.wrap{max-width:1180px;margin:0 auto;width:100%}
.intro{max-width:760px;margin:10px 0 26px}
.intro h1{font-family:var(--serif);font-weight:300;font-size:clamp(46px,5vw,76px);line-height:1;letter-spacing:-0.025em;margin:0}
.intro p{font-size:17px;line-height:1.6;color:var(--haze);max-width:62ch;margin:18px 0 0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;overflow:hidden}
.formbody{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:26px;align-items:start}
.card.collapsed{padding:14px 18px}
.summary{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sumline{font-size:17px}
.sumline b{font-weight:500}
.card h2{font-family:var(--serif);font-weight:400;font-size:22px;margin:0 0 14px}
.fieldlabel{font-size:13px;color:var(--haze);margin:0 0 8px}
.side{display:flex;flex-direction:column;gap:20px}
.placebtn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;font:inherit;font-size:17px;color:var(--moonlight);background:transparent;border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;transition:border-color 150ms var(--ease-out)}
.placebtn:hover{border-color:#3A4458}
.cityfield{position:relative}
.cityfield .pop{top:58px;left:0;right:0;width:auto}
.clockrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.clockrow .clock.off{opacity:0.4}
.ghost{font:inherit;font-size:13px;color:var(--haze);background:transparent;border:1px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer;transition:color 150ms var(--ease-out),border-color 150ms var(--ease-out)}
.ghost:hover{color:var(--moonlight);border-color:#3A4458}
.ghost[aria-pressed="true"]{color:var(--ink);background:var(--moonlight);border-color:var(--moonlight)}
.err{font-size:13px;color:#E0967A;min-height:18px;margin:10px 0 0}
#result .stage{grid-area:auto}
#result{margin-top:56px;display:grid;grid-template-columns:minmax(360px,520px) 1fr;gap:44px;align-items:start}
.answer h2{font-family:var(--serif);font-weight:300;font-size:clamp(40px,4.4vw,64px);line-height:1.02;letter-spacing:-0.02em;margin:0}
.answer .deg{font-size:16px;color:var(--haze);margin:14px 0 0}
.answer .when{font-size:15px;color:var(--haze);margin:6px 0 0}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:26px 0 0;border-top:1px solid var(--line)}
.grid3 div{padding:14px 12px 14px 0;border-bottom:1px solid var(--line)}
.grid3 .v{font-size:22px;font-weight:500;margin-top:2px}
.grid3 .v sup{font-size:0.5em;vertical-align:0.7em}
.block{margin:28px 0 0}
.block h3{font-family:var(--serif);font-weight:400;font-size:24px;margin:0 0 8px}
.block p{font-size:16px;line-height:1.65;color:#C9C6BC;max-width:60ch;margin:0}
.block .src{font-size:13px;color:var(--haze);margin:8px 0 0}
.quote{border-left:1px solid var(--line);padding-left:16px;font-family:var(--serif);font-size:19px;line-height:1.5;color:var(--moonlight);margin:0}
.note{font-size:15px;line-height:1.6;color:var(--haze);margin:22px 0 0;padding:14px 16px;border:1px solid var(--line);border-radius:12px}
.links{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0}
.links a{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:var(--moonlight);border:1px solid var(--line);border-radius:999px;padding:10px 16px;transition:border-color 150ms var(--ease-out)}
.links a:hover{border-color:#3A4458}
.links .arr{transition:transform 150ms var(--ease-out)}
.links a:hover .arr{transform:translateX(4px)}
@media (min-width:1101px){
  #result .stage{position:sticky;top:26px}
}
@media (max-width:1100px){
  .formbody{grid-template-columns:1fr}
  #result{grid-template-columns:1fr;gap:28px}
  #result .stage{order:-1;max-width:460px}
}
@media (max-width:767px){
  html{overflow-x:hidden}
  .page{padding-inline:16px}
  .card{padding:16px;border-radius:14px}
  .grid3{grid-template-columns:1fr 1fr}
  .ghost,.placebtn{min-height:44px}
}