a {color:blue;}

h1 {
  margin-top: 10px;
  margin-bottom: 5px;
}

.desktop, .mobile {
  display: none;
}

@media only screen and (max-width: 768px) {
  .mobile { display: block; }
}

@media only screen and (min-width: 769px) {
  .desktop { display: block; }
}

.responsive-div {
  width: 100%;
}

@media only screen and (max-width: 768px) {
  .responsive-div { width: 100%; }
}

@media only screen and (min-width: 769px) {
  .responsive-div {
    width: 800px;
    margin: 0 auto;
  }
}

:root{
  --bg:#fff;
  --text:#0f172a;
  --muted:#475569;
  --line:#cbd5e1;
  --chip:#f8fafc;
  --btn:#0f172a;
}
*{box-sizing:border-box}

body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Arial, "Noto Sans Hebrew", "Heebo", sans-serif;
  text-align:center;
}

.wrap{
  width:100%;
  margin: 0 auto;
}

h1{
  font-size: clamp(26px, 4vw, 40px);
  letter-spacing:.2px;
  line-height:1.1;
}

.box{
  border:2px solid var(--line);
  display:grid;
  gap:14px;
  padding:22px 18px;
    border-radius:18px;
  width:100%;
  max-width:520px;
  margin: 10px auto 0;
}

.row{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
  justify-content:center;
}
.label{font-size:14px;color:var(--muted);}
.value{font-size: clamp(44px, 9vw, 88px); line-height:1.05; letter-spacing: 1px;}
.value.he{letter-spacing:0;}
.valueDateHe{
  font-size: clamp(22px, 5.6vw, 40px);
  line-height: 1.2;
  letter-spacing: 0;
  padding: 0 6px;
  max-width: 100%;
  word-break: break-word;
}
.small{font-size:16px;color:var(--muted);}
.divider{width:min(380px,85%);height:1px;background:var(--line);margin:8px auto;}

.todayTable{
  border:2px solid var(--line);
  margin:14px auto 0;
  width:100%;
  max-width:520px;
    border-radius:14px;
  overflow:hidden;
  text-align:right;
  background:#fff;
}
.todayTable .head{
  padding:10px 12px;
  background:var(--chip);
  font-size:14px;
  border-bottom:1px solid var(--line);
}
.todayTable .line{
  padding:10px 12px;
  font-size:14px;
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.todayTable .line span:first-child{color:var(--muted);white-space:nowrap;}

.form{
  width:100%;
  max-width:520px;
  margin:0 auto;
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

.inputs{
  width: 92px;
  padding:10px 12px;
    border-radius:12px;
  font-size:14px;
  background:#fff;
  color:var(--text);
  text-align:center;
}

button{
  padding:10px 12px;
  border-radius:12px;
    background:#fff;
  color:var(--btn);
  font-size:14px;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
button:hover{ transform: translateY(-1px); box-shadow: 0 10px 20px rgba(0,0,0,.08); background:#eef2f7; }

.linksTitle{
  margin: 16px auto 8px;
  font-size: 14px;
  color: var(--muted);
}

.navWrap{
  border:2px solid var(--line);
  width:100%;
  max-width:520px;
  margin: 0 auto;
  text-align:center;
    border-radius:14px;
  overflow:hidden;
  background:#fff;
}
.navGroup{padding:10px 12px;border-bottom:1px solid var(--line);}
.navGroup:last-child{border-bottom:0;}
.navTitle{font-size:13px;color:var(--muted);margin:0 0 8px;text-align:center;}
.navLinks{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.navLinks a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  border-radius:12px;
    background:var(--chip);
  font-weight:600;

  color:var(--btn);
  text-decoration:none;
  font-size:13px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.navLinks a:hover{ transform: translateY(-1px); box-shadow: 0 10px 20px rgba(0,0,0,.08); background:#eef2f7; }
.navLinks a.current{ background:var(--chip); }

.seo{
  margin: 14px auto 20px;
  width:100%;
  max-width:520px;
  color: var(--muted);
  font-size: 14px;
  line-height:1.6;
  text-align:center;
}

@media (max-width: 600px){
  .box{max-width:100%; padding:18px 14px; border-radius:16px;}
  .divider{width:min(320px, 90%);}
  .todayTable, .navWrap, .seo{max-width:100%;}
  .inputs{ width: 28vw; max-width: 110px; min-width: 72px; }
}


/* shadow to make frames more visible */
.box,
.todayTable,
.navWrap{
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

/* slightly smaller default big value (Gregorian date was too large) */
.valueDateG{
  font-size: clamp(28px, 6.2vw, 52px);
  line-height: 1.12;
  letter-spacing: .2px;
}

/* helper text under forms */
.smallHelp{
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  text-align: center;
}

/* keep day/month/year inputs on one row on mobile */
@media only screen and (max-width: 768px) {
  .form{
    flex-wrap: nowrap;
    gap: 6px;
  }
  .inputs{
    width: 22vw;
    min-width: 60px;
    max-width: 90px;
    padding: 9px 8px;
    font-size: 14px;
  }
  .form button{
    padding: 9px 10px;
    font-size: 13px;
    white-space: nowrap;
  }
}

:focus-visible{outline:3px solid rgba(15,23,42,.25);outline-offset:3px;border-radius:14px;}


/* stronger shadow on mobile */
@media only screen and (max-width: 768px) {
  .box,
  .todayTable,
  .navWrap{
    box-shadow: 0 14px 34px rgba(0,0,0,.14);
  }
  .box, .todayTable, .navWrap{
    margin-left: 10px;
    margin-right: 10px;
  }
}