/* ============================================================ HOROSCOPE (观星台) — V21 "healing" theme (roadmap §7.8.1). Warm cream / sage green / terracotta / soft gold, botanical accents. Replaces the V20 ink-night board (dark bg + dragon/horse art, removed per V21 Phase 0). Contrast discipline: every color used for TEXT is the "-deep" variant, verified ≥ 4.5:1 (WCAG AA) against the darkest background it sits on (--card2 #F1E7D4) — see RELEASE_NOTES V21 Phase 0 for the check script. The lighter decor variants (--sage/--terra/--gold-soft) are only used for borders, fills, large graphics and ≥18px bold accents (3:1 rule). ============================================================ */ :root{ --bg:#F6EFE3; /* 暖奶油 warm cream page */ --card:#FFFBF2; /* 卡片 */ --card2:#F1E7D4; /* 嵌套/输入底 */ --text:#4A453D; /* 暖墨正文 */ --dim:#6B6354; /* 次级文字 (4.8:1 on card2) */ --line:rgba(74,69,61,.15); --sage:#9CAF88; /* 鼠尾草绿 decor */ --sage-deep:#52693D; /* text-safe sage */ --terra:#C96F4A; /* 赤陶橙 decor */ --terra-deep:#9C4A2A; /* text-safe terracotta */ --gold-soft:#D9B87C; /* 淡金 decor */ --gold-deep:#7A5E1D; /* text-safe gold */ --wood:#4A6B3B;--fire:#A2442E;--earth:#7A5E1D;--metal:#636358;--water:#396383; --shadow:0 8px 28px rgba(120,96,70,.10); --serif:'Noto Serif SC','Spectral',Georgia,serif; --en:'Spectral','Noto Serif SC',Georgia,serif; --mono:'IBM Plex Mono',ui-monospace,monospace; } *{box-sizing:border-box} html,body{margin:0;min-height:100%} body{background:var(--bg);color:var(--text);font-family:var(--serif);font-size:15.5px;line-height:1.65;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--terra-deep);outline-offset:2px} .skip{position:absolute;left:-999px;top:8px;z-index:60;background:var(--sage-deep);color:#FFFBF2;padding:8px 12px;font:700 13px var(--serif);border-radius:8px} .skip:focus{left:8px} /* ===== botanical background: cream wash + corner sprigs ===== */ .bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden; background: radial-gradient(55% 40% at 88% 0%,rgba(156,175,136,.14),transparent 65%), radial-gradient(48% 40% at 4% 100%,rgba(201,111,74,.08),transparent 60%), var(--bg)} .bg-sprig{position:absolute} .bg-sprig--tr{right:-40px;top:-30px;width:min(38vw,340px);opacity:.55} .bg-sprig--bl{left:-50px;bottom:-40px;width:min(30vw,260px);opacity:.4;transform:scaleX(-1) rotate(160deg)} .sp-stem{stroke:var(--sage)} .sp-leaf{fill:var(--sage);opacity:.8} .sp-leaf--lite{opacity:.55} .sp-berry{fill:var(--terra);opacity:.65} @media (prefers-reduced-motion: no-preference){ .bg-sprig--tr{animation:sway 14s ease-in-out infinite;transform-origin:85% 90%} @keyframes sway{0%,100%{rotate:0deg}50%{rotate:1.4deg}} } .wrap{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:18px clamp(10px,3vw,26px) 48px} /* ===== header ===== */ .hdr{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;border:1px solid var(--line);background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:12px 16px;position:relative} .brand{display:flex;align-items:center;gap:13px} .seal{width:46px;height:46px;flex:none;display:grid;place-items:center;background:var(--terra);color:#FFF6EA;font:900 20px/1 var(--serif);border-radius:12px;box-shadow:inset 0 0 0 2px rgba(255,246,234,.4);writing-mode:vertical-rl;letter-spacing:.1em} .brand h1{margin:0;font:900 19px/1.15 var(--serif);letter-spacing:.12em;color:var(--text)} .brand h1 span{color:var(--sage-deep)} .brand p{margin:4px 0 0;color:var(--dim);font:500 11px/1 var(--en);letter-spacing:.28em;text-transform:uppercase} .nav{display:flex;gap:7px;flex-wrap:wrap} .nav a,.lang-toggle{position:relative;border:1px solid var(--sage);background:rgba(156,175,136,.14);color:var(--sage-deep);font:700 11px/1 var(--en);letter-spacing:.16em;text-transform:uppercase;padding:9px 12px;cursor:pointer;border-radius:999px} .nav a::before{content:'';position:absolute;top:-8px;bottom:-8px;left:-2px;right:-2px} .nav a:hover,.lang-toggle:hover{border-color:var(--sage-deep);background:var(--sage-deep);color:#FFFBF2} .nav a.active{background:var(--sage-deep);color:#FFFBF2;border-color:var(--sage-deep)} /* ===== hero ===== */ .hero{border:1px solid var(--line);background:linear-gradient(120deg,rgba(156,175,136,.10),transparent 55%),var(--card);border-radius:16px;box-shadow:var(--shadow);margin-top:12px;padding:24px 20px 20px;position:relative;overflow:hidden} .hero::after{content:"觀象授時";position:absolute;right:16px;top:14px;writing-mode:vertical-rl;color:rgba(74,69,61,.09);font:900 34px/1 var(--serif);letter-spacing:.3em;pointer-events:none} .hero-sprig{position:absolute;right:4%;bottom:-8px;width:min(30vw,220px);opacity:.7;pointer-events:none} @media(max-width:760px){.hero-sprig{opacity:.35}} .kicker{color:var(--terra-deep);font:700 11px/1 var(--en);letter-spacing:.3em;text-transform:uppercase} .hero h2{margin:10px 0 8px;font:900 clamp(26px,4.4vw,42px)/1.15 var(--serif);letter-spacing:.06em;color:var(--text)} .hero h2 b{color:var(--sage-deep);font-weight:900} .hero .sub{max-width:720px;color:var(--dim);font:400 14.5px/1.75 var(--serif)} .ent-chip{display:inline-flex;align-items:center;gap:7px;margin-top:12px;border:1px solid rgba(201,111,74,.5);color:var(--terra-deep);background:rgba(201,111,74,.08);padding:7px 12px;font:700 11px/1 var(--en);letter-spacing:.14em;text-transform:uppercase;border-radius:999px} .privacy-clear{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px} .privacy-clear-btn{background:none;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font:600 11.5px/1 var(--en);letter-spacing:.04em;color:var(--dim);cursor:pointer} .privacy-clear-btn:hover{color:var(--terra-deep);border-color:rgba(201,111,74,.5)} .privacy-clear-note{color:var(--dim);font:400 12px/1.5 var(--serif)} /* ===== shared panel ===== */ .panel{border:1px solid var(--line);background:var(--card);border-radius:16px;box-shadow:var(--shadow);position:relative;padding:16px} .sec{margin-top:14px} .sec-label{color:var(--dim);font:700 11px/1 var(--en);letter-spacing:.26em;text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .sec-label::before{content:"❀";color:var(--terra)} .sec-label .zh{font-family:var(--serif);letter-spacing:.4em;color:var(--text)} .empty{color:var(--dim);font:400 13px/1.6 var(--serif);text-align:center;padding:18px 6px} /* ===== birth form ===== */ .form-grid{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end} .fld{display:flex;flex-direction:column;gap:5px} .fld label{font:600 10.5px/1 var(--en);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} .fld input,.fld select{background:var(--card2);border:1px solid rgba(74,69,61,.22);color:var(--text);font:500 14px var(--mono);padding:9px 10px;min-width:120px;border-radius:10px} .fld input:focus,.fld select:focus{border-color:var(--sage-deep);outline:none} .fld--check{flex-direction:row;align-items:center;gap:8px} .fld--check label{order:2;white-space:nowrap} .fld--check input{order:1;min-width:17px!important;width:17px;height:17px;padding:0;accent-color:var(--sage-deep);cursor:pointer} .fld--check input:disabled{opacity:.35;cursor:not-allowed} /* ===== birth-city picker (region -> city cascade, replaces manual timezone+lat/lon by default) ============================================= */ .fld--city{flex:1 1 220px} .fld--city input,.fld--city select{width:100%} .fld--city select:disabled{opacity:.5;cursor:not-allowed} .fld-manual{display:flex;gap:10px;flex-wrap:wrap;width:100%} .fld-manual[hidden]{display:none} .btn{position:relative;cursor:pointer;border:1px solid var(--sage-deep);background:rgba(156,175,136,.16);color:var(--sage-deep);font:700 12px/1 var(--en);letter-spacing:.16em;text-transform:uppercase;padding:11px 18px;border-radius:999px} .btn::before{content:'';position:absolute;top:-6px;bottom:-6px;left:-2px;right:-2px} .btn:hover{background:var(--sage-deep);color:#FFFBF2} .btn--seal{border-color:var(--terra-deep);background:rgba(201,111,74,.12);color:var(--terra-deep)} .btn--seal:hover{background:var(--terra-deep);color:#FFF6EA} .form-note{margin:9px 0 0;color:var(--dim);font:400 12px/1.6 var(--serif)} /* ===== four pillars ===== */ .pillars{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch} .pillar{flex:1;min-width:74px;text-align:center;border:1px solid var(--line);background:var(--card2);border-radius:12px;padding:10px 6px 12px;position:relative} .pillar .t{font:600 9.5px/1 var(--en);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)} .pillar .gz{margin-top:8px;writing-mode:vertical-rl;font:900 30px/1 var(--serif);letter-spacing:.18em;display:inline-block} .pillar .el{margin-top:8px;font:600 10px/1 var(--en);letter-spacing:.1em;color:var(--dim)} .e-0{color:var(--wood)} .e-1{color:var(--fire)} .e-2{color:var(--earth)} .e-3{color:var(--metal)} .e-4{color:var(--water)} .elems{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} .elem{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);padding:5px 11px;font:600 12px/1 var(--serif);border-radius:999px} .elem i{width:9px;height:9px;border-radius:50%;font-style:normal} .elem i.e-0{background:var(--wood)} .elem i.e-1{background:var(--fire)} .elem i.e-2{background:var(--earth)} .elem i.e-3{background:var(--metal)} .elem i.e-4{background:var(--water)} /* ===== 生辰详批 (子平法 chart-detail table) ===== */ .bz-wrap{margin-top:4px} .bz-table-wrap{margin-top:10px;overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--card)} .bz-table{width:100%;border-collapse:collapse;font:400 12.5px/1.5 var(--serif);white-space:nowrap} .bz-table th,.bz-table td{border:1px solid var(--line);padding:7px 10px;text-align:center;color:var(--text)} .bz-table thead th,.bz-table tr th:first-child{background:var(--card2);color:var(--dim);font:600 10.5px/1 var(--en);letter-spacing:.1em;text-transform:uppercase;white-space:normal} .bz-table tr th:first-child{text-align:left;position:sticky;left:0} .bz-table td small{display:block;color:var(--dim);font:400 9.5px/1 var(--en);margin-top:2px} .bz-table .dm{color:var(--terra-deep)} /* shensha rarity badges (V21 Phase 1) */ /* Shensha rarity badges — tier palette is an homage to Diablo II item rarity: 0 common=normal white, 1 frequent=magic blue, 2 uncommon=rare yellow, 3 rare=unique gold. Dark chip base so the D2 hues read like item text on an inventory background, at AA-viable contrast. */ .rar{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:4px;font:600 9px/1.6 var(--en);letter-spacing:.08em;vertical-align:1px;background:#2b2620} .rar-0{color:#e8e6e1} .rar-1{color:#8a8aff} .rar-2{color:#ffff64} .rar-3{color:#c7a256} /* ten-god distribution bars (V21 Phase 1) */ .bz-gods-h{margin-top:14px;color:var(--dim);font:700 10.5px/1 var(--en);letter-spacing:.22em;text-transform:uppercase} .bz-gods{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:4px 22px;margin-top:8px} .bzg{display:flex;align-items:center;gap:8px} .bzg-n{flex:none;width:56px;font:600 12.5px/1 var(--serif);color:var(--text)} .bzg-bar{flex:1;height:8px;background:rgba(74,69,61,.10);border-radius:4px;overflow:hidden} .bzg-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--sage),var(--gold-soft));border-radius:4px} /* U5: 命造评级 four-axis rank card */ .mz-card{border:1px solid var(--line);background:var(--card2);border-radius:14px;padding:14px 16px} .mz-head{display:flex;gap:16px;align-items:center;flex-wrap:wrap} .mz-score{display:flex;flex-direction:column;align-items:center} .mz-score b{font:800 34px/1 var(--mono);color:var(--terra-deep)} .mz-score span{font:600 9.5px/1.6 var(--en);letter-spacing:.1em;color:var(--dim);text-transform:uppercase} .mz-pct{flex:1;min-width:180px;font:700 13.5px/1.5 var(--serif);color:var(--sage-deep)} .mz-axes{margin-top:12px;display:flex;flex-direction:column;gap:7px} .mz-ax{display:flex;align-items:center;gap:10px} .mz-ax-n{flex:0 0 92px;font:600 10.5px/1.3 var(--en);letter-spacing:.04em;color:var(--dim);text-transform:uppercase} .mz-ax-bar{flex:1;height:8px;background:rgba(74,69,61,.10);border-radius:4px;overflow:hidden} .mz-ax-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--sage),var(--terra));border-radius:4px} .mz-ax-v{font:700 13px/1 var(--mono);color:var(--text);min-width:26px;text-align:right} .mz-ax-na{font:400 11px/1.4 var(--serif);color:var(--dim);font-style:italic} .bzg-v{flex:none;min-width:46px;text-align:right;font:600 11.5px/1 var(--mono);color:var(--dim)} .bz-rel{margin-top:10px;font:400 13px/1.7 var(--serif);color:var(--text)} .bz-rel-t{display:inline-block;min-width:64px;color:var(--dim);font:600 10.5px/1 var(--en);letter-spacing:.14em;text-transform:uppercase;margin-right:8px} .bz-season{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px} .bz-season span{border:1px solid var(--line);background:var(--card2);padding:5px 11px;font:700 12px/1 var(--serif);border-radius:999px} .bz-strength{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:14px;border:1px dashed var(--sage);border-radius:12px;background:rgba(156,175,136,.08);padding:12px 14px} .bz-score{flex:none;text-align:center;min-width:76px} .bz-score b{display:block;font:900 30px/1 var(--mono);color:var(--gold-deep)} .bz-score span{display:block;margin-top:5px;font:600 9.5px/1.3 var(--en);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)} .bz-strength-text{flex:1;min-width:230px} .bz-strength-text p{margin:0 0 6px;font:400 13.5px/1.7 var(--serif);color:var(--text)} .bz-strength-text p:last-child{margin-bottom:0} .bz-caveat{margin:8px 0 0;color:var(--dim);font:400 11.5px/1.6 var(--serif)} /* ===== 大运流年 (V21 Phase 2) ===== */ .dy-start{margin:2px 0 10px;font:400 13.5px/1.7 var(--serif);color:var(--text)} .dy-row{display:flex;gap:8px;flex-wrap:wrap} .dy{flex:1;min-width:64px;text-align:center;border:1px solid var(--line);background:var(--card2);border-radius:12px;padding:8px 4px 9px} .dy-cur{border-color:var(--sage-deep);background:rgba(156,175,136,.16);box-shadow:0 0 0 1px var(--sage-deep) inset} .dy-age{display:block;font:600 10px/1 var(--en);letter-spacing:.08em;color:var(--dim)} .dy-gz{display:inline-block;margin-top:6px;writing-mode:vertical-rl;font:900 22px/1 var(--serif);letter-spacing:.14em} .dy-yr{display:block;margin-top:6px;font:600 10.5px/1 var(--mono);color:var(--dim)} .dy-lns{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;margin-top:12px} .dy-ln{border:1px solid var(--line);background:var(--card2);border-radius:12px;padding:10px 13px} .dy-ln--now{border-color:var(--gold-soft);background:rgba(217,184,124,.12)} .dy-ln-h{font:700 14px/1.5 var(--serif);color:var(--text)} .dy-ln-b{margin-top:5px;font:400 12.5px/1.7 var(--serif);color:var(--dim)} .ta-badge{display:inline-block;margin-left:7px;padding:2px 9px;border-radius:999px;background:rgba(201,111,74,.14);color:var(--terra-deep);font:600 10.5px/1.5 var(--serif);vertical-align:2px} /* ===== daily fortune ===== */ .today-head{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap} .today-gz{font:900 22px/1 var(--serif);letter-spacing:.14em;color:var(--text)} .today-rel{color:var(--dim);font:400 13px var(--serif)} .streak{margin-left:auto;border:1px solid var(--gold-soft);background:rgba(217,184,124,.15);color:var(--gold-deep);padding:6px 12px;font:700 11px/1 var(--en);letter-spacing:.12em;border-radius:999px} /* Beta badge — reuses the page's own sage/terra tokens (design.md: no new palette), same pill shape as .streak so it reads as one family. */ .beta-badge{display:inline-flex;align-items:center;border:1px solid var(--sage);background:rgba(156,175,136,.16);color:var(--sage-deep);padding:2px 9px;font:700 10px/1.6 var(--en);letter-spacing:.16em;border-radius:999px;text-transform:uppercase} /* ===== today detail (V25 Part 5 §23.3): real day-pillar card + ten-god chip + branch-event "why" strip. harmony reads sage, friction reads terracotta — the page's own existing polarity colors, nothing new. ===== */ .today-detail{margin-top:12px} .today-detail-inner{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start} .today-detail-inner .pillar{flex:none} .today-detail-body{flex:1;min-width:200px;display:flex;flex-direction:column;gap:8px} .tengod-chip{align-self:flex-start;border:1px solid var(--gold-soft);background:rgba(217,184,124,.12);color:var(--gold-deep);padding:5px 11px;font:700 12px/1.3 var(--serif);border-radius:999px} .today-why{display:flex;flex-direction:column;gap:5px} .today-why-row{font:400 13px/1.5 var(--serif);color:var(--dim)} .today-why-row.up{color:var(--sage-deep)} .today-why-row.down{color:var(--terra-deep)} /* ===== 每日星语签 daily draw (V23 Phase 3) ===== */ .star-draw{margin-top:14px} .sd-card{display:flex;gap:13px;align-items:center;border:1px solid var(--gold-soft);background:rgba(217,184,124,.10);border-radius:14px;padding:12px 15px} .sd-card.sd-hidden{border-color:var(--terra);background:rgba(201,111,74,.09)} .sd-glyph{flex:none;font-size:30px;line-height:1;color:var(--gold-deep)} .sd-card.sd-hidden .sd-glyph{color:var(--terra-deep)} .sd-name{font:700 14px/1.3 var(--serif);color:var(--text);display:flex;align-items:center;gap:7px} .sd-badge{font:700 9px/1 var(--en);letter-spacing:.12em;text-transform:uppercase;color:#FFF6EA;background:var(--terra-deep);border-radius:999px;padding:3px 8px;font-style:normal} .sd-advice{margin:4px 0 0;font:400 13px/1.6 var(--serif);color:var(--dim)} .sd-streak-hint{margin:6px 0 0;font:600 10.5px/1.4 var(--en);letter-spacing:.04em;color:var(--terra-deep)} .overall{display:flex;gap:16px;align-items:center;margin-top:14px;flex-wrap:wrap} .oring{position:relative;width:96px;height:96px;flex:none} .oring svg{transform:rotate(-90deg)} .oring .track{fill:none;stroke:rgba(74,69,61,.12);stroke-width:6} .oring .val{fill:none;stroke:var(--sage-deep);stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset 1.1s cubic-bezier(.22,.8,.3,1)} .oring b{position:absolute;inset:0;display:grid;place-items:center;font:900 26px/1 var(--mono);color:var(--text)} .otext{flex:1;min-width:230px;font:400 14.5px/1.8 var(--serif);color:var(--text)} .domains{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:14px} .dom{border:1px solid var(--line);background:var(--card2);border-radius:12px;padding:11px 13px} .dom .dh{display:flex;justify-content:space-between;align-items:baseline;gap:8px} .dom .dn{font:700 14px/1 var(--serif);letter-spacing:.28em;color:var(--text)} .dom .ds{font:700 15px/1 var(--mono)} .dom .bar{height:4px;background:rgba(74,69,61,.12);margin:9px 0;overflow:hidden;border-radius:2px} .dom .bar i{display:block;height:100%;width:0;transition:width 1s cubic-bezier(.22,.8,.3,1)} .dom.up .ds{color:var(--sage-deep)} .dom.up .bar i{background:var(--sage)} .dom.flat .ds{color:var(--gold-deep)} .dom.flat .bar i{background:var(--gold-soft)} .dom.down .ds{color:var(--terra-deep)} .dom.down .bar i{background:var(--terra)} .dom p{margin:0;font:400 13px/1.7 var(--serif);color:var(--dim)} .lucky-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px} .lk{display:flex;flex-direction:column;gap:5px;border:1px solid var(--line);background:var(--card2);border-radius:12px;padding:9px 13px;min-width:104px} .lk span{font:600 9.5px/1 var(--en);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)} .lk b{font:700 14px/1.3 var(--serif);color:var(--text)} .lk .sw{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px;box-shadow:inset 0 0 0 1px rgba(74,69,61,.2)} .yiji{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px} .yj{border:1px solid var(--line);background:var(--card2);border-radius:12px;padding:10px 13px} .yj .t{font:900 15px/1 var(--serif);letter-spacing:.5em;margin-bottom:7px} .yj.yi .t{color:var(--sage-deep)} .yj.ji .t{color:var(--terra-deep)} .yj p{margin:0;font:400 13.5px/1.8 var(--serif);color:var(--text)} /* ===== synastry ===== */ .syn-form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:4px} .syn-result{margin-top:14px} .syn-charts{display:flex;gap:14px;align-items:stretch;flex-wrap:wrap} .syn-chart{flex:1;min-width:230px;border:1px solid var(--line);background:var(--card2);border-radius:12px;padding:12px} .syn-chart-h{font:700 11px/1 var(--en);letter-spacing:.24em;text-transform:uppercase;color:var(--sage-deep);margin-bottom:9px} .pillars--sm{gap:6px} .pillar--sm{padding:7px 4px 9px;min-width:0;background:var(--card)} .pillar--sm .gz{font-size:20px} .syn-divider{flex:none;align-self:center;color:var(--terra);font-size:20px;opacity:.8} @media(max-width:640px){.syn-divider{display:none}} .syn-top{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:14px} .sring{position:relative;width:132px;height:132px;flex:none} .sring svg{transform:rotate(-90deg)} .sring .track{fill:none;stroke:rgba(74,69,61,.12);stroke-width:7} .sring .val{fill:none;stroke:var(--terra);stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset 1.4s cubic-bezier(.22,.8,.3,1)} .sring b{position:absolute;inset:0;display:grid;place-items:center;font:900 34px/1 var(--mono);color:var(--text)} .sring em{position:absolute;left:0;right:0;bottom:16px;text-align:center;font:600 9px/1 var(--en);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);font-style:normal} .syn-parts{flex:1;min-width:250px;display:flex;flex-direction:column;gap:6px} /* U2: five relationship-lens scores (朋友/同事/暧昧/情侣/夫妻) */ .syn-mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-top:8px} .syn-mode{border:1px solid var(--line);background:var(--card2);border-radius:12px;padding:10px 12px} .syn-mode .sm-h{display:flex;justify-content:space-between;align-items:baseline} .syn-mode .sm-n{font:700 12.5px/1.2 var(--serif);color:var(--text)} .syn-mode .sm-v{font:800 18px/1 var(--mono);color:var(--terra-deep)} .syn-mode .sm-bar{margin-top:6px;height:7px;background:rgba(74,69,61,.10);border-radius:4px;overflow:hidden} .syn-mode .sm-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--sage),var(--terra));border-radius:4px} .syn-mode .sm-line{margin:7px 0 0;font:400 11.5px/1.5 var(--serif);color:var(--dim)} .sp{display:flex;justify-content:space-between;gap:10px;font:400 13px/1.5 var(--serif);border-left:3px solid var(--line);padding:3px 0 3px 10px;color:var(--text)} .sp b{font:700 12.5px var(--mono);flex:none} .sp.pos{border-left-color:var(--sage)} .sp.pos b{color:var(--sage-deep)} .sp.neg{border-left-color:var(--terra)} .sp.neg b{color:var(--terra-deep)} .syn-pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:14px} .spil{border:1px solid var(--line);background:var(--card2);border-radius:12px;text-align:center;padding:10px 6px} .spil .n{font:700 13px/1 var(--serif);letter-spacing:.3em;color:var(--text)} .spil .s{margin-top:7px;font:900 20px/1 var(--mono);color:var(--gold-deep)} .xiu-rel{margin-top:14px} .xiu-rel:empty{display:none} .xiu-h{color:var(--dim);font:700 10.5px/1 var(--en);letter-spacing:.22em;text-transform:uppercase;margin-bottom:8px} /* ===== 合盘 branch matrix (V25 Part 5 §24.2) — dual charts reuse the existing .syn-charts/.syn-chart/.pillar--sm classes verbatim; only the matrix grid + SVG connector overlay are new. Harmony=sage, clash=terra — the page's own existing polarity colors, no new palette. ===== */ .synbm-inner{position:relative;margin-top:6px} .synbm-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2} .synbm-grid{position:relative;z-index:1;margin-top:14px;display:grid;gap:4px;align-items:stretch} .synbm-corner{background:transparent} .synbm-colhead,.synbm-rowhead{display:flex;align-items:center;justify-content:center;font:700 10px/1 var(--en);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} .synbm-cell{border:1px solid var(--line);background:var(--card2);border-radius:8px;min-height:40px;font:700 15px/1 var(--serif);color:var(--dim);cursor:pointer;transition:transform .12s ease} .synbm-cell.harmony{border-color:var(--sage);background:rgba(156,175,136,.16);color:var(--sage-deep)} .synbm-cell.clash{border-color:var(--terra);background:rgba(201,111,74,.14);color:var(--terra-deep)} .synbm-cell.active{transform:scale(1.08);box-shadow:0 2px 8px rgba(74,69,61,.18)} .synbm-cell:disabled{cursor:default} .synbm-line{stroke-width:2;fill:none} .synbm-line.harmony{stroke:var(--sage-deep)} .synbm-line.clash{stroke:var(--terra-deep)} @media(max-width:480px){.synbm-cell{font-size:12px;min-height:34px}.synbm-colhead,.synbm-rowhead{font-size:8.5px}} .xiu-row{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;border:1px solid var(--line);background:var(--card2);border-radius:12px;padding:9px 13px;margin-top:6px;font:400 13px/1.6 var(--serif)} .xiu-n{flex:none;font-weight:700;color:var(--text)} .xiu-arrow{color:var(--terra);font-weight:700} .xiu-row b{color:var(--terra-deep);font-size:15px} .xiu-d{color:var(--dim)} .pull{margin-top:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;border:1px dashed var(--gold-soft);border-radius:12px;background:rgba(217,184,124,.10);padding:10px 13px} .pull b{font:900 19px var(--mono);color:var(--gold-deep)} .pull span{font:400 13px var(--serif);color:var(--text)} .share-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px} /* ===== relationship book (V23 Phase 2) ===== */ .syn-book{margin-bottom:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center} .syn-book-h{width:100%;color:var(--dim);font:700 10.5px/1 var(--en);letter-spacing:.22em;text-transform:uppercase;margin-bottom:2px} .syn-book-chip{display:inline-flex;align-items:stretch;border:1px solid var(--line);background:var(--card2);border-radius:999px;overflow:hidden} .syn-book-load{display:flex;flex-direction:column;align-items:flex-start;gap:1px;border:none;background:none;cursor:pointer;padding:7px 12px;font:700 13px/1.2 var(--serif);color:var(--text)} .syn-book-load small{font:400 10px/1 var(--en);letter-spacing:.04em;color:var(--dim)} .syn-book-del{border:none;background:none;cursor:pointer;padding:0 12px;color:var(--dim);font:400 16px/1 var(--serif)} .syn-book-del:hover{color:var(--terra-deep)} /* ===== synastry four-section result (V23 Phase 2) ===== */ .syn-hero{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:14px} .syn-title{flex:1;min-width:200px;font:700 21px/1.35 var(--serif);color:var(--terra-deep)} .syn-sec{margin-top:16px} .syn-line{margin:0 0 8px;border:1px solid var(--line);background:var(--card2);border-radius:12px;padding:10px 13px 10px 12px;font:400 13.5px/1.7 var(--serif);color:var(--text)} .syn-line--pos{border-left:3px solid var(--sage)} .syn-line--neg{border-left:3px solid var(--terra)} .syn-result .l3{margin-top:16px} /* ===== 7-day fate calendar (V23 Phase 3) ===== */ .syn-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px} .syn-cal-cell{display:flex;flex-direction:column;align-items:center;gap:5px;border:1px solid var(--line);background:var(--card2);border-radius:10px;padding:9px 4px} .syn-cal-cell.locked{background:transparent;border-style:dashed;opacity:.7} .scc-d{font:700 9.5px/1 var(--en);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)} .scc-v{font:900 18px/1 var(--mono);color:var(--terra-deep)} .scc-v--locked{color:var(--dim);font-weight:700} .scc-hint{font:400 8.5px/1.3 var(--en);color:var(--dim);text-align:center} .share-tip{color:var(--dim);font:400 12.5px/1.6 var(--serif)} /* ===== V23 Phase 1 (roadmap §7.10): single-chart three-layer disclosure === L1 headline (big-three + tags, always visible) -> L2 five-dimension radar (reveals on scroll) -> L3 collapsible "PRO" professional chart (wheel + aspect grid, astronomy-engine loaded only on expand). Design law: L1/L2 carry zero jargon; the ink-blue wheel card below is the ONLY deep-dark module on this cream-themed page (roadmap module 3). */ :root{--ink-blue:#1a2440;--star-gold:#e0c15a} /* -- L1: big-three cards + personality tags -- */ .l1-big3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px} .l1-card{border:1px solid var(--line);background:var(--card2);border-radius:12px;padding:11px 14px} .l1-card .t{display:block;font:600 10.5px/1 var(--en);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)} .l1-card b{display:block;margin-top:7px;font:700 17px/1.4 var(--serif);color:var(--text)} .l1-card small{display:block;margin-top:5px;font:400 11px/1.5 var(--serif);color:var(--dim)} .l1-miss{font:400 13px/1.4 var(--serif);color:var(--dim)} .l1-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .l1-tag{cursor:pointer;border:1px solid var(--gold-soft);background:linear-gradient(135deg,rgba(217,184,124,.18),rgba(201,111,74,.08));color:var(--text);font:500 13px/1.5 var(--serif);padding:9px 14px;border-radius:14px;max-width:100%;box-shadow:0 2px 0 rgba(122,94,29,.12);animation:l1TagIn .45s cubic-bezier(.34,1.56,.64,1) backwards} .l1-tag:active{transform:translateY(1px);box-shadow:none} @keyframes l1TagIn{from{opacity:0;transform:scale(.9) translateY(6px)}to{opacity:1;transform:none}} /* -- L2: five-dimension radar, reveals on scroll (see horoscope.js observer) -- */ .l2{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease} .l2.in-view{opacity:1;transform:none} .l2-radar-wrap{display:flex;gap:22px;flex-wrap:wrap;align-items:center} .l2-radar{flex:none;width:min(260px,80vw)} .l2-radar svg{width:100%;height:auto;display:block} .ar-grid{fill:none;stroke:var(--line);stroke-width:1} .ar-spoke{stroke:var(--line);stroke-width:1} .ar-label{fill:var(--dim);font:600 10px var(--en);letter-spacing:.04em;text-transform:uppercase} .ar-label.ar-lit{fill:var(--terra-deep);font-weight:700} .ar-data{fill:rgba(156,175,136,.30);stroke:var(--sage-deep);stroke-width:1.6;transform-origin:130px 130px;animation:l2RadarIn .8s cubic-bezier(.22,.8,.3,1) backwards} @keyframes l2RadarIn{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}} .ar-dot{fill:var(--sage-deep);cursor:pointer} .ar-dot.ar-lit{fill:var(--terra-deep)} .l2-detail{flex:1;min-width:220px;display:flex;flex-direction:column;gap:8px} .l2-dim{border:1px solid var(--line);background:var(--card2);border-radius:12px;padding:10px 13px;cursor:pointer} .l2-dim .dh{display:flex;justify-content:space-between;align-items:baseline;gap:8px} .l2-dim .dn{font:700 13px/1 var(--serif);color:var(--text)} .l2-dim .dv{font:700 14px/1 var(--mono);color:var(--gold-deep)} .l2-dim p{margin:0;font:400 12.5px/1.6 var(--serif);color:var(--dim);max-height:0;overflow:hidden;transition:max-height .35s ease,margin-top .35s ease} .l2-dim.open p{margin-top:7px;max-height:140px} /* -- L3: collapsible PRO chart -- */ .l3-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:1px solid var(--terra-deep);background:rgba(201,111,74,.08);color:var(--terra-deep);font:700 12px/1 var(--en);letter-spacing:.14em;text-transform:uppercase;padding:10px 16px;border-radius:999px} .l3-toggle:hover{background:var(--terra-deep);color:#FFF6EA} .l3-toggle .car{display:inline-block;transition:transform .3s ease} .l3-toggle[aria-expanded="true"] .car{transform:rotate(180deg)} .l3-body{margin-top:14px;display:none} .l3-body.open{display:block} .l3-loading{color:var(--dim);font:400 13px/1.6 var(--serif);padding:10px 0} /* the one deep-dark "star-map notebook" module on the whole page */ .l3-wheel-card{border-radius:16px;background:radial-gradient(120% 90% at 20% 0%,rgba(224,193,90,.12),transparent 60%),var(--ink-blue);padding:18px;box-shadow:var(--shadow);position:relative;overflow:hidden} .l3-wheel-card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55; background-image:radial-gradient(1px 1px at 12% 22%,var(--star-gold) 0,transparent 60%),radial-gradient(1px 1px at 68% 12%,var(--star-gold) 0,transparent 60%),radial-gradient(1px 1px at 40% 78%,var(--star-gold) 0,transparent 60%),radial-gradient(1px 1px at 84% 64%,var(--star-gold) 0,transparent 60%),radial-gradient(1px 1px at 25% 55%,var(--star-gold) 0,transparent 60%),radial-gradient(1px 1px at 92% 30%,var(--star-gold) 0,transparent 60%)} .astro-wheel{position:relative;z-index:1;width:min(380px,100%);display:block;margin:0 auto; /* explicit non-emoji symbol font stack: together with the U+FE0E text- presentation selectors baked into the glyph strings (astroChart.js), this kills the purple emoji squares iOS substitutes for ♈–♓/♀/♂ */ font-family:"Noto Sans Symbols","Segoe UI Symbol","Apple Symbols","DejaVu Sans",serif} .aw-bg{fill:rgba(10,16,38,.35);stroke:rgba(224,193,90,.5);stroke-width:1.4} .aw-band{stroke:none} .aw-ring{fill:none;stroke:rgba(224,193,90,.45);stroke-width:1} .aw-inner{fill:none;stroke:rgba(224,193,90,.22);stroke-width:1} .aw-tick{stroke:rgba(255,246,234,.28);stroke-width:.7} .aw-tick10{stroke:rgba(255,246,234,.45);stroke-width:1} .aw-cusp{stroke:rgba(224,193,90,.22);stroke-width:.8} .aw-cusp.aw-asc{stroke:var(--star-gold);stroke-width:2} .aw-sign{font-size:16px} .aw-el-0{fill:#e8927a}.aw-el-1{fill:#e6c87a}.aw-el-2{fill:#b3d9b3}.aw-el-3{fill:#93bede} .aw-pointer{stroke:rgba(255,246,234,.3);stroke-width:.7} .aw-planet-bg{fill:#131b3d;stroke:var(--star-gold);stroke-width:1.1} .aw-planet-glyph{fill:#FFF6EA;font-size:13px} .aw-deg{fill:rgba(255,246,234,.6);font-size:8.5px} .l3-legend{display:flex;flex-wrap:wrap;gap:9px;margin-top:10px;justify-content:center;position:relative;z-index:1} .l3-legend span{color:#cdd6ef;font:400 10.5px/1 var(--en);letter-spacing:.04em} .l3-grid-wrap{margin-top:16px;text-align:center} .astro-aspect-grid{width:min(360px,100%);display:block;margin:10px auto 0;font-family:"Noto Sans Symbols","Segoe UI Symbol","Apple Symbols","DejaVu Sans",serif} .ag-diag{fill:rgba(224,193,90,.16)} .ag-cell{stroke:rgba(255,246,234,.14);stroke-width:.6} .ag-glyph{fill:var(--star-gold);font-size:13px} .ag-asp{fill:#0d1330;font-size:11px} .l3-terms{margin-top:14px;display:flex;flex-direction:column;gap:6px} .l3-term{border:1px solid var(--line);background:var(--card2);border-radius:10px;padding:8px 12px;font:400 12.5px/1.6 var(--serif);color:var(--text)} .l3-term b{color:var(--terra-deep)} /* ===== 紫微十二宫 (V21 Phase 6) ===== */ .zw-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(86px,auto);gap:6px} .zw-cell{border:1px solid var(--line);background:var(--card2);border-radius:10px;padding:8px 9px;display:flex;flex-direction:column;gap:6px} .zw-ming{border-color:var(--terra-deep);box-shadow:0 0 0 1px var(--terra-deep) inset;background:rgba(201,111,74,.10)} .zw-shen{background:rgba(217,184,124,.14)} .zw-ming.zw-shen{background:linear-gradient(135deg,rgba(201,111,74,.10),rgba(217,184,124,.14))} .zw-h{display:flex;justify-content:space-between;gap:6px;align-items:baseline} .zw-p{font:700 12px/1 var(--serif);color:var(--text);letter-spacing:.08em} .zw-ming .zw-p{color:var(--terra-deep)} .zw-b{font:600 10px/1 var(--mono);color:var(--dim)} .zw-stars{display:flex;flex-wrap:wrap;gap:4px} .zw-star{border:1px solid rgba(156,175,136,.6);background:rgba(156,175,136,.14);color:var(--sage-deep);font:700 11.5px/1.4 var(--serif);padding:2px 8px;border-radius:999px} .zw-empty{font:400 11px/1.4 var(--serif);color:var(--dim)} .zw-center{grid-column:2/4;grid-row:2/4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px dashed var(--sage);border-radius:12px;background:rgba(156,175,136,.06)} .zw-c-ju{font:900 22px/1 var(--serif);color:var(--sage-deep);letter-spacing:.1em} .zw-c-l{font:500 12px/1.5 var(--serif);color:var(--dim)} @media(max-width:640px){.zw-p{font-size:10.5px}.zw-star{font-size:10px;padding:2px 6px}.zw-c-ju{font-size:17px}} /* ===== ZWDS deep layer (V25 Part 5 §25.6) — reuses the entry-level grid's spatial layout/tokens; only adds click state, 四化 superscripts, 化忌 warning border, and the synthesis cards. ===== */ .zwd-inner{position:relative} .zwd-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2} .zwd-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(92px,auto);gap:6px} .zwd-cell{all:unset;box-sizing:border-box;cursor:pointer;border:1px solid var(--line);background:var(--card2);border-radius:10px;padding:8px 9px;display:flex;flex-direction:column;gap:6px;transition:box-shadow .15s ease} .zwd-cell:focus-visible{outline:2px solid var(--terra-deep);outline-offset:2px} .zwd-cell.zwd-jihit{border-color:var(--terra-deep);box-shadow:0 0 0 1px var(--terra-deep) inset;background:rgba(201,111,74,.10)} .zwd-cell.zwd-active{box-shadow:0 0 0 2px var(--sage-deep) inset} .zwd-cell.zwd-linked{box-shadow:0 0 0 2px var(--terra) inset} .zwd-stars{display:flex;flex-wrap:wrap;gap:4px} .zwd-star{border:1px solid rgba(156,175,136,.6);background:rgba(156,175,136,.14);color:var(--sage-deep);font:700 11px/1.4 var(--serif);padding:2px 7px;border-radius:999px;display:inline-flex;align-items:center;gap:3px} .zwd-star--lucky{border-color:rgba(217,184,124,.7);background:rgba(217,184,124,.16);color:var(--gold-deep)} .zwd-star--sha{border-color:rgba(201,111,74,.6);background:rgba(201,111,74,.10);color:var(--terra-deep)} .zwd-bright{font:600 9px/1 var(--en);opacity:.75;font-style:normal} .zwd-hua{font:900 10px/1 var(--serif);border-radius:999px;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;background:rgba(74,69,61,.08)} .zwd-hua.lu,.zwd-hua.quan,.zwd-hua.ke{color:var(--sage-deep)} .zwd-hua.ji{color:var(--terra-deep);background:rgba(201,111,74,.16)} .zwd-age{font:600 9.5px/1 var(--mono);color:var(--dim)} .zwd-center{grid-column:2/4;grid-row:2/4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px dashed var(--sage);border-radius:12px;background:rgba(156,175,136,.06);text-align:center;padding:8px} .zwd-line{stroke:var(--terra-deep);stroke-width:1.5;fill:none;opacity:.7} .zwd-detail{margin-top:12px;border:1px solid var(--line);background:var(--card2);border-radius:12px;padding:12px 14px} .zwd-score{font:900 20px/1 var(--mono);color:var(--gold-deep);margin:4px 0 6px} .zwd-score b{font-size:26px} .zwd-breakdown{display:flex;gap:12px;flex-wrap:wrap;font:600 12px/1.5 var(--serif)} .zwd-breakdown .up{color:var(--sage-deep)} .zwd-breakdown .down{color:var(--terra-deep)} .zwd-card{margin-top:14px;border:1px solid var(--line);background:var(--card2);border-radius:12px;padding:12px 14px} .zwd-card p{margin:0;font:400 13px/1.6 var(--serif);color:var(--text)} .zwd-card--note{border-color:var(--terra);background:rgba(201,111,74,.08)} #zwdSynthesis{margin-top:14px} .zwd-synth-card{margin-top:10px;border:1px solid var(--line);background:var(--card2);border-radius:12px;padding:12px 14px} .zwd-synth--reinforced{border-left:3px solid var(--sage-deep)} .zwd-synth--crosscurrent{border-left:3px solid var(--terra-deep)} .zwd-synth-v{font:700 10px/1 var(--en);letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:5px} .zwd-synth-card p{margin:0 0 8px;font:400 13px/1.6 var(--serif);color:var(--text)} .zwd-receipts{display:flex;gap:8px;flex-wrap:wrap} .zwd-receipts span{font:500 11px/1.4 var(--serif);color:var(--dim);border:1px solid var(--line);border-radius:8px;padding:3px 8px} @media(max-width:640px){.zwd-star{font-size:9.5px;padding:2px 6px}} /* ===== sixteen-type quiz (V21 Phase 4) ===== */ .pq-progress{height:6px;background:rgba(74,69,61,.10);border-radius:3px;overflow:hidden} .pq-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--sage),var(--gold-soft));border-radius:3px;transition:width .3s ease} .pq-count{margin-top:8px;font:600 11px/1 var(--mono);color:var(--dim)} /* U3: timed-quiz countdown */ .pq-clock{margin-left:10px;font:700 12px/1 var(--mono);color:var(--gold-deep)} .pq-clock--low{color:var(--terra-deep)} .pq-timebar{margin-top:6px;height:4px;background:rgba(74,69,61,.10);border-radius:2px;overflow:hidden} .pq-timebar i{display:block;height:100%;background:var(--terra);border-radius:2px;transition:width .25s linear} .pq-freq{color:var(--terra-deep);font-weight:700} .pq-q{margin:14px 0 12px;font:700 clamp(17px,2.6vw,21px)/1.5 var(--serif);color:var(--text)} .pq-opts{display:flex;flex-direction:column;gap:10px;max-width:560px} .pq-opt{cursor:pointer;text-align:left;border:1px solid var(--line);background:var(--card2);color:var(--text);font:500 14.5px/1.6 var(--serif);padding:13px 16px;border-radius:12px} .pq-opt:hover{border-color:var(--sage-deep);background:rgba(156,175,136,.14)} .pq-result{border:1px dashed var(--sage);border-radius:12px;background:rgba(156,175,136,.08);padding:16px;margin-bottom:12px} .pq-type{font:900 34px/1 var(--en);letter-spacing:.12em;color:var(--sage-deep)} .pq-name{margin-top:6px;font:700 16px/1.4 var(--serif);color:var(--text)} .pq-desc{margin:8px 0 0;font:400 13.5px/1.8 var(--serif);color:var(--text);max-width:640px} .pq-axes{margin-top:12px;display:grid;gap:6px;max-width:420px} .pq-ax{display:flex;align-items:center;gap:10px;font:700 12px/1 var(--en);color:var(--dim)} .pq-ax-bar{flex:1;height:8px;background:rgba(201,111,74,.18);border-radius:4px;overflow:hidden} .pq-ax-bar i{display:block;height:100%;background:var(--sage);border-radius:4px 0 0 4px} .pq-compat{margin-top:12px;display:flex;flex-direction:column;gap:4px;font:400 12.5px/1.6 var(--serif);color:var(--dim)} .pq-compat b{color:var(--text);font-weight:700} .pq-compat-friction b{color:var(--terra-deep)} .foot{margin-top:26px;text-align:center;color:var(--dim);font:500 11.5px/1.8 var(--en);letter-spacing:.06em} @media(max-width:720px){ .brand h1{font-size:16px} .hero h2{font-size:24px} .yiji{grid-template-columns:1fr} .pillar .gz{font-size:24px} } /* V22 §7.9.0 ⑥: mobile birth-form rework. The desktop layout is a flex-wrap row where each .fld only sizes to its own content — the timezone