.birthday-page {
  width:min(100%,calc(1200px + 2 * var(--gutter)));
  margin-inline:auto;
  padding:clamp(36px,6vw,90px) var(--gutter) clamp(64px,9vw,126px);
}
.birthday-hero {
  display:grid; grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);
  align-items:center; gap:clamp(28px,6vw,92px);
}
.birthday-hero > *, .birthday-guide > * { min-width:0; }
.birthday-breadcrumb {
  display:flex; align-items:center; flex-wrap:wrap; gap:9px;
  margin-bottom:clamp(18px,3vw,32px); color:var(--muted); font-size:13px;
}
.birthday-breadcrumb a { color:var(--accent); text-underline-offset:.22em; }
.birthday-intro h1 {
  max-width:12ch; margin:0; font-size:clamp(48px,6.1vw,93px);
  font-weight:735; letter-spacing:-.065em; line-height:1;
}
.birthday-intro > p {
  max-width:41ch; margin:clamp(15px,2.5vw,23px) 0 0;
  color:var(--muted); font-size:clamp(16px,1.8vw,22px); line-height:1.55;
}
.birthday-form,.birthday-result,.birthday-guide {
  --text:var(--panel-ink); --muted:var(--panel-muted); --accent:var(--panel-accent);
  --line:var(--panel-line); color:var(--text); color-scheme:light;
  border:1px solid var(--line); border-radius:18px; background:var(--panel-bg);
}
.birthday-form {
  padding:clamp(15px,2vw,22px);
  display:grid; gap:10px; max-width:450px; margin-top:clamp(22px,4vw,38px);
}
.birthday-form label { display:block; margin-bottom:6px; font-weight:650; font-size:15px; }
.birthday-date-field { min-width:0; }
.birthday-form input[type=date] {
  width:100%; min-width:0; min-height:52px; padding:10px 12px;
  border:1px solid var(--line); border-radius:10px;
  color:var(--text); background:#fff; font-size:16px;
}
.birthday-form input[type=date]:focus { border-color:var(--accent); }
.birthday-form input[aria-invalid=true] { border-color:#a12b24; }
.birthday-help,.birthday-form small {
  margin:0; color:var(--muted); font-size:13px; line-height:1.48;
}
.birthday-form button,.birthday-actions :is(button,a) {
  display:inline-flex; align-items:center; justify-content:center; min-height:46px;
  padding:9px 14px; border:1px solid var(--line); border-radius:10px;
  background:var(--panel-inset); color:var(--accent); font:inherit; font-size:14px;
  font-weight:650; line-height:1.2; text-align:center; text-decoration:none;
  transition:background-color .18s,border-color .18s,color .18s;
}
.birthday-form button[type=submit],.birthday-actions > .birthday-download,
.birthday-actions > :is(button,a):first-child {
  border-color:var(--accent); background:var(--accent); color:#fff;
}
.birthday-form button[type=submit]:hover:not(:disabled),
.birthday-actions > .birthday-download:hover:not(:disabled),
.birthday-actions > :is(button,a):first-child:hover:not(:disabled) {
  border-color:var(--panel-ink); background:var(--panel-ink);
}
.birthday-actions > :is(button,a):hover:not(:first-child,:disabled,.birthday-download) {
  border-color:var(--accent); background:#dbe8f8;
}
.birthday-page :is(button,a,input):focus-visible { outline-offset:3px; }
.birthday-page button:disabled { opacity:.57; cursor:default; }
.birthday-result {
  padding:clamp(12px,2.6vw,24px);
  box-shadow:0 20px 70px #03060e80;
}
.birthday-stage {
  display:grid; position:relative; isolation:isolate; place-items:center;
  min-height:154px; aspect-ratio:1.22; overflow:hidden; border-radius:14px;
  background:
    radial-gradient(ellipse at 50% 47%,#1d3550 6%,#101c2d 51%,#080e19 77%);
}
.birthday-stage #birthday-moon {
  display:block; width:min(70%,360px); height:auto; aspect-ratio:1;
}
.birthday-empty {
  position:relative; width:min(100%,28ch); margin:0; padding:14px;
  color:#e4e1da; font-size:clamp(14px,1.7vw,17px); line-height:1.45; text-align:center;
}
.birthday-empty::before {
  content:""; display:block; width:clamp(52px,9vw,82px); aspect-ratio:1; margin:0 auto 13px;
  border-radius:50%; border:1px solid #a5b8d247;
  background:radial-gradient(circle at 67% 36%,#6e89a5 0%,#324e6d 36%,#13243a 69%);
  box-shadow:0 0 22px #82b7ff25;
}
.birthday-stage:has(#birthday-moon:not([hidden])) .birthday-empty { display:none; }
.birthday-details {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,.82fr);
  gap:10px 14px; margin:clamp(14px,2vw,22px) 0 0; padding:0;
}
.birthday-details > div {
  min-width:0; padding-inline-start:10px; border-inline-start:1px solid var(--line);
}
.birthday-details dt {
  margin:0 0 5px; color:var(--muted); font-size:12px; font-weight:520; line-height:1.3;
}
.birthday-details dd {
  margin:0; font-size:clamp(14px,1.8vw,20px); font-weight:690;
  line-height:1.26; overflow-wrap:anywhere;
}
.birthday-details dd time { font-variant-numeric:tabular-nums; }
.birthday-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(16px,3vw,24px); }
.birthday-actions > * { flex:1 1 auto; }
.birthday-status {
  margin:8px 0 0; color:var(--muted); font-size:13px; line-height:1.46;
}
.birthday-status:empty { display:none; }
.birthday-form:has([aria-invalid=true]) .birthday-status { color:#a12b24; }
.birthday-share-fallback { margin-top:12px; }
.birthday-share-fallback label {
  display:block; margin-bottom:6px; color:var(--muted); font-size:13px;
}
.birthday-share-fallback input {
  width:100%; min-height:44px; padding:8px 10px;
  border:1px solid var(--line); border-radius:8px;
  color:var(--text); background:#fff; font:inherit; font-size:16px;
}
.birthday-guide .birthday-credit { font-size:12px; color:var(--muted); }
.birthday-guide {
  max-width:900px; padding:clamp(18px,3.5vw,38px); margin-top:clamp(40px,7vw,88px);
}
.birthday-guide h2 {
  margin:0; font-size:clamp(27px,4vw,44px); line-height:1.1; font-weight:700; letter-spacing:-.045em;
}
.birthday-guide p {
  max-width:68ch; margin:12px 0 0; color:var(--muted); font-size:clamp(15px,1.6vw,18px); line-height:1.62;
}
.birthday-guide a {
  color:var(--accent); text-underline-offset:.22em;
}
@media (max-width:780px) {
  .birthday-hero { grid-template-columns:minmax(0,1fr); align-items:start; }
  .birthday-intro h1 { font-size:clamp(44px,9vw,70px); }
  .birthday-result { width:min(100%,520px); }
}
@media (max-width:410px) {
  .birthday-details { grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); }
  .birthday-details > div { padding-inline-start:7px; }
}