:root{--paper:#f4f6f8;--sheet:#fbfcfd;--ink:#1b2730;--muted:#5d6b75;--line:#1b27301a;--sky:#2f6f9f;--accent:var(--sky);--type-ink:var(--ink);--serif:"Songti SC", "Noto Serif SC", "Source Han Serif SC", "STSong", serif;--sans:-apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--paper);color:var(--ink);font:16px/1.7 var(--sans);-webkit-tap-highlight-color:transparent;margin:0}button{font:inherit;color:inherit}.page{max-width:520px;padding-block:20px 48px;padding-left:max(20px, env(safe-area-inset-left,0px));padding-right:max(20px, env(safe-area-inset-right,0px));margin:0 auto}.masthead{letter-spacing:.08em;color:var(--muted);border-bottom:1px solid var(--line);justify-content:space-between;align-items:baseline;padding-bottom:10px;font-size:13px;display:flex}.masthead .brand{color:var(--ink);font-weight:600}.btn{border:1px solid var(--line);background:var(--sheet);cursor:pointer;border-radius:999px;justify-content:center;align-items:center;gap:6px;min-height:46px;padding:0 20px;font-weight:500;text-decoration:none;transition:transform .12s,background .2s;display:inline-flex}.btn:active{transform:scale(.97)}.btn:focus-visible,.option:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent);outline-offset:2px}.btn.primary{background:var(--accent);color:#fff;border-color:#0000}.btn.big{width:100%;min-height:54px;font-size:17px}.btn.ghost{background:0 0;border:0;min-height:40px;padding:0 8px;font-size:20px}.btn.link{color:var(--accent);background:0 0;border:0;min-height:40px}.fine{color:var(--muted);margin-top:28px;font-size:12px;line-height:1.7}.intro{flex-direction:column;gap:18px;display:flex}.hero-title{font-family:var(--serif);letter-spacing:.01em;text-wrap:balance;margin:28px 0 0;font-size:clamp(38px,11vw,54px);font-weight:900;line-height:1.2}.lede{color:var(--muted);margin:0;font-size:16px}.forecast{grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0 14px;display:grid}.tile{background:var(--sheet);border:1px solid var(--line);border-radius:14px;flex-direction:column;display:flex;overflow:hidden}.tile canvas{aspect-ratio:3/4;width:100%;display:block}.tile span{text-align:center;font-family:var(--serif);padding:6px 0 8px;font-size:15px;font-weight:700}.quiz{flex-direction:column;min-height:100svh;display:flex}.quiz-top{justify-content:space-between;align-items:center;margin:0 -8px;display:flex}.count{font-variant-numeric:tabular-nums;color:var(--muted);font-size:14px}.count b{color:var(--ink);font-size:18px}.progress{background:var(--line);border-radius:2px;height:4px;margin-top:8px;overflow:hidden}.progress i{background:var(--accent);height:100%;transition:width .3s;display:block}.question{font-family:var(--serif);text-wrap:balance;margin:44px 0 28px;font-size:clamp(24px,6.6vw,30px);font-weight:700;line-height:1.45;animation:.35s ease-out both rise}.options{flex-direction:column;gap:10px;display:flex}.option{text-align:left;border:1px solid var(--line);background:var(--sheet);cursor:pointer;border-radius:14px;padding:15px 18px;font-size:16px;line-height:1.5;transition:border-color .15s,background .15s,transform .12s;animation:.35s ease-out both rise}.option:nth-child(2){animation-delay:40ms}.option:nth-child(3){animation-delay:80ms}.option:nth-child(4){animation-delay:.12s}.option:active{transform:scale(.985)}.option.picked{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 10%, var(--sheet));color:var(--accent);font-weight:600}@media (hover:hover){.option:hover{border-color:color-mix(in srgb, var(--accent) 50%, var(--line))}}@keyframes rise{0%{opacity:.001;transform:translateY(8px)}to{opacity:1;transform:none}}.sky{max-width:520px;height:min(52svh,420px);margin:0 auto;position:relative}.sky canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.masthead.on-sky{padding:calc(16px + env(safe-area-inset-top,0px)) max(20px, env(safe-area-inset-right,0px)) 10px max(20px, env(safe-area-inset-left,0px));color:color-mix(in srgb, var(--type-ink) 75%, transparent);border-color:color-mix(in srgb, var(--type-ink) 15%, transparent);position:absolute;top:0;left:0;right:0}.masthead.on-sky .brand{color:var(--type-ink)}.type-F .masthead.on-sky{color:#fffc;border-color:#fff3}.type-F .masthead.on-sky .brand{color:#fff}.sheet{background:var(--sheet);color:var(--type-ink);border-radius:24px 24px 0 0;margin-top:-28px;padding-top:30px;position:relative}.eyebrow{color:var(--muted);letter-spacing:.06em;margin:0;font-size:14px}.weather{font-family:var(--serif);flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:4px 0 6px;font-size:clamp(64px,20vw,92px);font-weight:900;line-height:1.1;display:flex}.weather small{font-family:var(--sans);color:var(--accent);letter-spacing:.04em;font-size:15px;font-weight:600}.tagline{font-family:var(--serif);margin:0 0 14px;font-size:22px;font-weight:600;line-height:1.5}.desc{color:color-mix(in srgb, var(--type-ink) 85%, var(--muted));margin:0}.readings{background:color-mix(in srgb, var(--accent) 7%, var(--sheet));border-radius:18px;grid-template-columns:1fr 170px;align-items:center;gap:18px;margin:28px 0 8px;padding:18px;display:grid}@media (width<=380px){.readings{grid-template-columns:1fr}.quad{max-width:220px;margin:0 auto}}.meters{flex-direction:column;gap:16px;min-width:0;display:flex}.m-head{justify-content:space-between;align-items:baseline;font-size:14px;display:flex}.m-head b{font-variant-numeric:tabular-nums;font-size:22px}.m-bar{background:var(--line);border-radius:4px;height:8px;margin:4px 0;overflow:hidden}.m-bar i{background:var(--accent);transform-origin:0;border-radius:4px;height:100%;animation:.9s cubic-bezier(.2,.8,.2,1) .2s both grow;display:block}@keyframes grow{0%{transform:scaleX(.02)}to{transform:none}}.meter p{color:var(--muted);margin:0;font-size:12px;line-height:1.5}.quad{width:100%;height:auto;display:block;overflow:visible}.q-bg{fill:var(--sheet);stroke:var(--line)}.q-line{stroke:var(--line);stroke-dasharray:3 4}.q-label{font:600 14px var(--serif);fill:var(--muted);text-anchor:middle;opacity:.6}.q-label.on{fill:var(--accent);opacity:1}.q-axis{font:11px var(--sans);fill:var(--muted);text-anchor:middle}.q-dot{fill:var(--accent);stroke:var(--sheet);stroke-width:2.5px}.q-halo{fill:var(--accent);opacity:.18}.block{margin-top:26px}.block h3,.others h3{letter-spacing:.12em;color:var(--muted);margin:0 0 8px;font-size:13px;font-weight:600}.block p{margin:0}.traits{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.traits li{padding-left:18px;position:relative}.traits li:before{content:"";background:var(--accent);border-radius:50%;width:7px;height:7px;position:absolute;top:.72em;left:2px}.pair{grid-template-columns:1fr 1fr;gap:18px;display:grid}@media (width<=420px){.pair{grid-template-columns:1fr;gap:26px}}.actions{flex-direction:column;gap:10px;margin-top:34px;display:flex}.others{flex-direction:column;gap:10px;margin-top:40px;display:flex}.other{border:1px solid var(--line);color:var(--ink);border-radius:14px;grid-template-columns:64px 1fr;align-items:center;gap:14px;padding:10px;display:grid}.other canvas{border-radius:10px;width:64px;height:64px;display:block}.other b{font-family:var(--serif);margin-right:8px;font-size:17px}.other span{color:var(--muted);font-size:12px}.other p{color:var(--muted);margin:2px 0 0;font-size:14px;line-height:1.5}.modal{z-index:20;padding:max(16px, env(safe-area-inset-top,0px)) max(16px, env(safe-area-inset-right,0px)) max(16px, env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px));background:#10161c99;place-items:center;animation:.2s both fade;display:grid;position:fixed;inset:0}.modal-card{background:var(--sheet);border-radius:20px;flex-direction:column;gap:10px;width:min(380px,100%);max-height:100%;padding:14px;display:flex;overflow:auto}.modal-card img{border-radius:12px;width:100%;display:block}.hint{text-align:center;color:var(--muted);margin:0;font-size:14px}.modal-actions{grid-template-columns:1fr 1fr;gap:10px;display:grid}@keyframes fade{0%{opacity:0}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}