:root{--ink:#173b50;--text:#283f4c;--muted:#6b7f89;--bg:#f2f6f7;--paper:#fff;--line:#d7e1e5;--gold:#a1854d;--blue:#366c85;--base:16px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:var(--base)/1.75 "Microsoft YaHei","PingFang SC",sans-serif}button,input,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);padding:10px 18px;transition:background .16s,border-color .16s}button:hover{background:#eaf1f4;border-color:#9bb5c2}button:disabled{cursor:wait;opacity:.55}a{color:var(--blue);text-underline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #a1854d;outline-offset:3px}.primary{background:var(--ink);color:#fff;border-color:var(--ink)}.primary:hover{background:#29586f;color:#fff}.quiet{background:transparent}.sidebar{position:fixed;inset:0 auto 0 0;width:236px;padding:35px 23px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:20}.brand{display:flex;gap:13px;align-items:center;text-decoration:none;color:var(--ink);font:bold 28px/1.3 SimSun,serif}.brand svg{width:44px;stroke:var(--gold);fill:none;stroke-width:1.5}.brand small{display:block;font:12px/1.8 "Microsoft YaHei",sans-serif;letter-spacing:2px;color:var(--muted);margin-top:4px}.sidebar nav{display:grid;gap:10px;margin-top:54px}.sidebar nav button{display:flex;align-items:center;gap:18px;text-align:left;border:0;background:transparent;padding:13px 17px}.sidebar nav button span{font:22px SimSun,serif;width:24px;text-align:center;color:#7f939d}.sidebar nav .selected{background:#eaf1f4;color:var(--ink);font-weight:600}.sidebar nav .selected span{color:var(--ink)}.side-bottom{margin-top:auto;display:grid;gap:15px;font-size:13px}.side-bottom button{text-align:left;border:0;padding:0;background:transparent}.side-bottom small{color:var(--muted);font-size:11px}main{margin-left:236px;max-width:1570px;padding:0 5.6%}.topbar{height:90px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:.8em;color:var(--muted)}.topbar>div{display:flex;gap:22px;align-items:center}.topbar button{padding:4px 10px;background:transparent}.status:before{content:"";display:inline-block;width:6px;height:6px;background:#829c86;border-radius:50%;margin-right:7px}.status.offline:before{background:#a1854d}.hero{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;min-height:425px;gap:40px}.pretitle{font-size:.84em;color:var(--gold);margin:0 0 14px;letter-spacing:1px}h1{font:42px/1.35 SimSun,"Songti SC",serif;font-weight:600;color:var(--ink);margin:12px 0 22px}h2{font:25px/1.5 SimSun,serif;color:var(--ink);margin:12px 0}h3{font-size:1.08em;color:var(--ink);font-weight:600}p{margin:12px 0}.hero-copy>p:not(.pretitle){color:var(--muted);line-height:2}.topic-row,.sample-row{display:flex;gap:10px;flex-wrap:wrap}.topic-row{margin-top:23px}.topic-row button{border-color:#cfdee5;background:transparent;font-size:.8em;padding:5px 11px;border-radius:20px}.topic-row .active{background:#dceaf0;color:var(--ink)}.orbit{max-width:340px;justify-self:center;width:100%;position:relative;text-align:center}.orbit svg{width:100%;stroke:#b4c6cc;fill:none;stroke-width:1}.orbit text{fill:var(--ink);stroke:none;text-anchor:middle;font-family:SimSun,serif;font-size:32px}.orbit .center-ring{stroke:var(--gold);stroke-width:1.7}.orbit .center-word{font-size:41px}.orbit-note{font-size:11px;letter-spacing:4px;color:var(--gold)}.ask-compose{background:white;padding:24px 28px;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 35px #173b5005}.ask-compose>label{font-size:.85em;color:var(--muted)}textarea,input,select{color:var(--text);background:#fff;border:1px solid var(--line);border-radius:5px;padding:11px 13px;max-width:100%;min-width:0}textarea{resize:vertical}#question{display:block;width:100%;border:0;outline:none;font-size:1.05em;min-height:88px;padding:12px 0}#question:focus-visible{outline:0;box-shadow:inset 0 -2px var(--gold)}.compose-bottom{display:flex;justify-content:space-between;align-items:center;gap:18px}.compose-bottom>span{font-size:.75em;color:var(--muted)}.compose-bottom .primary span{margin-left:20px}.sample-row{border-top:1px solid #edf1f3;margin-top:20px;padding-top:13px}.sample-row button{background:transparent;border:0;font-size:.75em;padding:2px 12px 2px 0;color:var(--muted)}.welcome-bottom{margin:70px 0;display:flex;align-items:center;gap:15px;flex-wrap:wrap}.welcome-bottom>div{flex:1;min-width:240px}.welcome-bottom h2{font-size:26px}.welcome-bottom p,.welcome-bottom span{color:var(--muted);font-size:.8em}.welcome-bottom>button{font-size:.8em}.page-heading{margin:48px 0 30px}.page-heading p:last-child{color:var(--muted)}.view{padding-bottom:25px}.casting{text-align:center;background:white;border:1px solid var(--line);border-radius:10px;padding:38px;margin:25px 0}.casting p:not(.pretitle){font-size:.8em;color:var(--muted)}.coins{display:flex;justify-content:center;gap:25px;margin:25px 0}.coins i{font:24px SimSun,serif;font-style:normal;display:grid;place-items:center;width:65px;height:65px;border:2px solid #b69b60;border-radius:50%;color:#8b753f;background:#faf6e9;outline:1px solid #d9cba8;outline-offset:-7px}.coins.rolling i{animation:coin .35s ease 2}.coins i.back{background:#e8dfc6}.mini-lines{max-width:180px;margin:20px auto;display:flex;flex-direction:column-reverse;gap:5px}.mini-lines div{display:flex;gap:15px;height:6px}.mini-lines i{background:var(--ink);flex:1}.mini-lines .gap{flex:0;width:20px;background:transparent}@keyframes coin{50%{transform:rotateY(180deg) translateY(-10px)}}.reading-heading{display:flex;justify-content:space-between;align-items:center;gap:25px;margin:45px 0 25px}.reading-heading h2{font:25px/1.5 SimSun,serif}.reading-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:28px}.hex-paper{background:#fff;border:1px solid var(--line);border-radius:8px;padding:28px 35px}.small-label{font-size:.75em;color:var(--gold)}.hex-paper h3{font:33px/1.5 SimSun,serif;margin:10px 0}.hex-paper>p{font-size:.8em;color:var(--muted)}.hex-lines{display:flex;flex-direction:column-reverse;gap:11px;margin:28px 0 25px}.hex-line{display:flex;gap:12px;align-items:center;border:0;padding:4px;background:transparent;width:100%}.hex-line>span{font-size:12px;width:32px;color:var(--muted);text-align:left}.hex-line .bars{display:flex;gap:18px;flex:1;height:10px}.bars i{background:var(--ink);height:10px;flex:1}.hex-line.moving .bars i{background:var(--gold)}.hex-line em{width:22px;font-size:11px;color:var(--gold);font-style:normal}.hex-line.active{background:#edf3f6}.line-info{font-size:.8em;color:var(--muted);min-height:52px;border-top:1px solid var(--line);padding-top:15px}#changed-hex{font-size:.85em;color:var(--gold);padding-top:10px}.original{border-bottom:1px solid var(--line);padding:12px 4px 22px}blockquote{font:23px/1.9 SimSun,serif;color:var(--ink);margin:15px 0}.original button{border:0;background:transparent;color:var(--muted);font-size:.75em;padding:0}.original p{font-size:.75em;color:var(--muted)}.reflection{padding:14px 4px}.reflection p{color:var(--muted);font-size:.9em}.reflection small{display:block;color:var(--muted);font-size:.7em;margin-top:10px}.after-reading{display:flex;gap:13px;margin:23px 0}.chat-section{background:#fff;border:1px solid var(--line);border-radius:10px;margin:45px 0;padding:30px}.chat-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.chat-heading span{font-size:.7em;color:var(--muted)}.message{padding:18px 0;border-bottom:1px solid #e6edef}.message .speaker{font-size:.72em;color:var(--gold);margin-bottom:7px}.message.user .speaker{color:var(--muted)}.message .message-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.94em}.message.waiting{color:var(--muted)}.follow-prompts{display:flex;gap:9px;flex-wrap:wrap;margin:25px 0}.follow-prompts button{font-size:.75em;padding:5px 10px}#chat-form{display:flex;gap:12px;align-items:flex-end}#followup{width:100%;flex:1;min-width:0}#chat-form button{white-space:nowrap}.chat-foot{color:var(--muted);font-size:.7em}.birth-form{display:flex;align-items:end;gap:18px;flex-wrap:wrap;background:white;border:1px solid var(--line);padding:28px;border-radius:9px}.birth-form label{font-size:.8em;min-width:145px;flex:1}.birth-form label input:not([type=checkbox]){display:block;width:100%;margin-top:8px}.birth-form .check{flex:0 0 190px;padding-bottom:12px;min-width:0}.birth-form>small{width:100%;color:var(--muted);font-size:.72em}.check{display:flex;gap:8px;align-items:center}.check input{width:17px;height:17px;flex:none}.birth-intro{margin:35px 0 20px}.birth-intro p{color:var(--muted);font-size:.85em}.pillars{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line);background:white}.pillar{border:0;border-right:1px solid var(--line);border-radius:0;background:transparent;padding:22px 10px}.pillar:last-child{border:0}.pillar b{font:42px/1.7 SimSun,serif;display:block;letter-spacing:12px;padding-left:12px}.pillar small{display:block;color:var(--muted);font-size:.7em}.pillar>span{color:var(--gold);font-size:.8em}.birth-bottom{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin:30px 0}.muted{font-size:.75em;color:var(--muted)}.element{display:grid;grid-template-columns:28px 1fr 35px;align-items:center;gap:16px;margin:14px 0;font-size:.85em}.element-track{height:7px;background:#e2e9ec;border-radius:4px;overflow:hidden}.element-track i{display:block;height:100%;background:#62828b}.pillar-info{background:#e8f0f3;padding:15px;font-size:.85em}.birth-bottom button{margin:8px 8px 0 0}.calendar-layout{display:grid;grid-template-columns:1fr .7fr;gap:45px}.calendar-paper{background:#fff;border-top:5px solid var(--ink);border-radius:4px;padding:30px 35px;text-align:center}.calendar-controls{display:flex;gap:10px;justify-content:center;align-items:center}.calendar-controls button{padding:3px 10px;font-size:.75em}.calendar-controls input{padding:4px 8px;font-size:.8em;max-width:160px}.solar-day{font:106px/1.3 Georgia,serif;color:var(--ink);margin-top:20px}.lunar-day{font:27px/1.5 SimSun,serif;margin:8px 0}#calendar-stems{font-size:.8em;color:var(--muted)}.calendar-terms{margin:25px 0 5px;padding:15px;border-block:1px solid var(--line);color:var(--gold);font-size:.9em}.yi-ji{text-align:left;padding:15px 0}.yi-ji>div{display:flex;gap:20px;align-items:start;padding:10px 0}.yi-ji span{border:1px solid #a4b7ab;border-radius:50%;color:#547961;font-family:SimSun,serif;width:33px;height:33px;display:grid;place-items:center;flex:none}.yi-ji>div+div span{border-color:#bfaeaa;color:#8d6962}.yi-ji p{font-size:.85em;margin:3px 0}.calendar-paper>small{font-size:.67em;color:var(--muted);text-align:left;display:block}.calendar-side{padding:20px 0}.calendar-side>p{font-size:.85em;color:var(--muted)}.calendar-side label{display:block;font-size:.8em;margin:30px 0 10px}.calendar-side textarea{width:100%;display:block;margin-bottom:15px}.calendar-side button{margin-bottom:10px;font-size:.85em}.atlas-layout{display:grid;grid-template-columns:.8fr 1fr;gap:60px;align-items:start}.atlas-layout form{display:grid;gap:18px;padding-top:15px}.atlas-layout label:not(.check){display:grid;gap:8px;font-size:.85em}.atlas-layout small{color:var(--muted);font-size:.75em}.atlas-preview{max-width:440px;background:white;box-shadow:0 15px 40px #173b5012;justify-self:center;width:100%}.atlas-preview svg{display:block;width:100%;height:auto}.history-toolbar{display:flex;gap:15px;margin-bottom:25px}.import-label{border:1px solid var(--line);background:white;border-radius:6px;padding:10px 18px;cursor:pointer}.history-item{display:flex;gap:22px;align-items:center;padding:22px;border-bottom:1px solid var(--line);background:#fff}.history-item>div{flex:1;min-width:0}.history-item h3{margin:0;font-size:1em;overflow-wrap:anywhere}.history-item p{font-size:.75em;color:var(--muted);margin:5px 0}.history-item button{font-size:.75em}.empty-state{padding:55px 25px;background:#fff;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:8px}.app-footer{border-top:1px solid var(--line);display:flex;gap:25px;align-items:center;justify-content:space-between;padding:22px 0;font-size:.72em;color:var(--muted)}.app-footer button{background:transparent;border:0;padding:0;font-size:1em;color:var(--muted)}dialog{border:1px solid var(--line);border-radius:10px;padding:32px;max-width:570px;width:calc(100% - 35px);color:var(--text);box-shadow:0 20px 70px #173b5025}dialog::backdrop{background:#173b5038;backdrop-filter:blur(3px)}dialog p{font-size:.85em;color:var(--muted)}dialog .close{float:right;border:0;background:transparent;padding:0 4px;font-size:25px;line-height:1}.family-person{display:flex;gap:17px;align-items:center;background:#edf3f5;padding:18px;margin:20px 0}.family-person>span{width:50px;height:50px;background:#d6e5eb;border-radius:50%;display:grid;place-items:center;font:23px SimSun,serif}.family-person small{display:block;color:var(--muted);font-size:.75em}dialog .check{margin:15px 0;font-size:.85em}dialog>.primary{margin-top:12px}#toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:#173b50;color:white;padding:12px 24px;border-radius:7px;z-index:100;font-size:.85em;max-width:90vw}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}@media(min-width:1700px){main{margin-inline:auto;padding-left:260px;padding-right:40px}}@media(max-width:1150px){.sidebar{width:190px;padding:28px 17px}main{margin-left:190px;padding-inline:4%}h1{font-size:35px}.hero{gap:15px;min-height:370px}.orbit{max-width:270px}.reading-grid{gap:20px}.hex-paper{padding:23px}.atlas-layout{gap:28px}.calendar-layout{gap:25px}}@media(max-width:760px){.sidebar{position:sticky;top:0;width:100%;height:auto;padding:12px 18px;border-right:0;border-bottom:1px solid var(--line);display:flex;flex-direction:row;align-items:center;gap:15px}.brand{font-size:22px;flex:none;gap:7px}.brand svg{width:29px}.brand small,.side-bottom{display:none}.sidebar nav{margin:0;display:flex;gap:3px;flex:1;justify-content:flex-end}.sidebar nav button{padding:8px;font-size:12px;white-space:nowrap;gap:0}.sidebar nav button span{display:none}main{margin-left:0;padding:0 20px}.topbar{height:62px}.topbar>div{gap:10px}.topbar .status{font-size:10px}h1{font-size:32px}.hero{grid-template-columns:1fr;position:relative;min-height:320px;gap:0}.hero-copy{position:relative;z-index:2;padding:30px 0}.hero-copy>p:not(.pretitle){font-size:.85em}.orbit{position:absolute;right:-20px;top:35px;width:200px;opacity:.13;z-index:0}.orbit-note{display:none}.pretitle{font-size:.75em}.ask-compose{padding:20px}.compose-bottom{align-items:stretch;flex-direction:column;gap:15px}.compose-bottom>span{font-size:.65em}.compose-bottom .primary{width:100%}.sample-row{gap:9px}.sample-row button{font-size:.7em}#question{font-size:.95em}.welcome-bottom{margin:40px 0}.welcome-bottom h2{font-size:23px}.page-heading{margin:30px 0 25px}.reading-grid,.birth-bottom,.calendar-layout,.atlas-layout{grid-template-columns:1fr;gap:23px}.reading-heading{align-items:flex-start;gap:10px}.reading-heading h2{font-size:22px}.reading-heading>button{font-size:.65em;white-space:nowrap;padding:7px 10px}.hex-paper{padding:22px 25px}.hex-lines{max-width:290px;margin-inline:auto}.chat-section{padding:22px 18px}.chat-heading{display:block}.chat-heading span{display:block}.follow-prompts button{font-size:.68em}#chat-form{flex-wrap:wrap}#followup{flex-basis:100%}.birth-form{padding:20px;gap:16px}.birth-form label{flex-basis:calc(50% - 16px);min-width:120px}.birth-form .check{flex-basis:100%;padding-bottom:0}.birth-form>button{width:100%}.pillar b{font-size:32px;letter-spacing:7px;padding-left:7px}.pillar small{font-size:.6em}.calendar-paper{padding:22px}.calendar-controls{gap:7px}.calendar-controls input{max-width:145px}.calendar-side{padding:0 0 15px}.atlas-layout{display:flex;flex-direction:column-reverse}.atlas-layout>*{width:100%}.atlas-preview{max-width:390px;align-self:center}.atlas-layout form{gap:14px}.history-item{padding:17px;gap:12px;flex-wrap:wrap}.history-item>div{flex-basis:100%}.app-footer{gap:15px;flex-wrap:wrap}.app-footer span{width:100%}.casting{padding:25px 15px}.casting>button{font-size:.8em;margin:3px}.topbar #today-short{max-width:48%;font-size:11px}.page-heading p:last-child{font-size:.85em}}@media(max-width:370px){.sidebar{padding-inline:10px;gap:4px}.sidebar nav button{padding-inline:6px;font-size:11px}.brand{font-size:20px}.brand svg{width:25px}main{padding-inline:15px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.mobile-only{display:none}@media(max-width:760px){.sidebar{flex-wrap:wrap;gap:8px}.sidebar nav{flex-basis:100%;justify-content:space-between;gap:0}.sidebar nav button{padding:7px 8px}.mobile-only{display:block;margin-left:auto;border:0;padding:3px 8px;font-size:11px;color:var(--muted)}.topbar{height:57px}.hero{min-height:300px}.orbit{right:0}}

/* The diagrams carry the interaction: natural imagery, casting, changing lines, time. */
:root{--muted:#586f7b;--ease:cubic-bezier(.16,1,.3,1)}
::selection{background:#d8e6e9;color:var(--ink)}
input,textarea{caret-color:var(--gold);accent-color:var(--ink)}
input[type=range]{padding:0;cursor:pointer;accent-color:var(--ink)}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled{cursor:default}
html{scrollbar-color:#aabec6 var(--bg);scrollbar-width:thin}
.hero{grid-template-columns:1.1fr 1fr;gap:22px;min-height:475px}
.hero h1{font-size:clamp(32px,3.05vw,45px);text-wrap:balance}
.hero-copy>p{max-width:34em}
.orbit{max-width:350px;padding:12px 0 18px}
.orbit svg{display:block;overflow:visible}
.orbit .wheel-boundary{stroke:#afc2c9;stroke-width:1}
.orbit .taiji{transform-origin:180px 180px;stroke:none}
.nature-sector{cursor:pointer;outline:none}
.nature-sector .sector-hit{fill:transparent;stroke:none;transition:fill .18s}
.nature-sector>path:not(.sector-hit){stroke:var(--ink);stroke-width:3.6;stroke-linecap:square}
.orbit .nature-sector text{font:13px/1.2 "Microsoft YaHei",sans-serif;fill:var(--ink)}
.nature-sector:hover .sector-hit,.nature-sector.active .sector-hit{fill:#dee9ed}
.nature-sector:focus-visible .sector-hit{fill:#e7dfcd;stroke:var(--gold);stroke-width:2}
.nature-sector.active>path:not(.sector-hit){stroke:#836728}
.trigram-detail{min-height:95px;text-align:center;padding-inline:5px}
.trigram-detail b{font:18px/1.5 SimSun,serif;color:var(--ink)}
.trigram-detail p{font-size:.73em;line-height:1.7;margin:5px 0;color:var(--muted)}
.trigram-detail button{font-size:.7em;border:0;background:transparent;color:var(--ink);padding:3px 7px;text-decoration:underline;text-underline-offset:4px}
.ask-compose{box-shadow:none}
.casting{padding:28px;text-align:left;border-radius:12px;overflow:hidden}
.cast-intro h2{font-size:29px;margin-top:0}
.cast-intro p{max-width:55em}
.casting-stage{display:grid;grid-template-columns:1.2fr 1fr;gap:42px;align-items:center;margin:18px 0 25px}
.coin-table{position:relative;min-height:245px;display:flex;justify-content:center;flex-direction:column;padding-top:48px;isolation:isolate}
.table-rings{position:absolute;inset:24px 12px 38px;border:1px solid #c8d5d9;border-radius:50%;transform:rotateX(30deg);z-index:-1}
.table-rings:after{content:"";position:absolute;inset:18px;border:1px solid #dce5e8;border-radius:50%}
.coins{perspective:900px;gap:22px;margin:12px 0 25px;min-height:80px;align-items:center}
.coins .coin{position:relative;display:block;flex:none;width:74px;height:74px;font-style:normal;border:0;outline:0;background:none;transform-style:preserve-3d}
.coins .coin[data-face="2"]{transform:rotateY(180deg)}
.coin>span{position:absolute;inset:0;display:grid;place-content:center;text-align:center;border:2px solid #a78a48;border-radius:50%;background:#f2e5b9;color:#69501e;outline:1px solid #c1a96a;outline-offset:-7px;backface-visibility:hidden;font:24px/1.05 SimSun,serif;box-shadow:0 7px 12px #4b381a18}
.coin .coin-back{transform:rotateY(180deg);background:#e4d3a2}
.coin small{font:11px/1.5 "Microsoft YaHei",sans-serif;display:block;margin-top:3px}
#coin-caption{text-align:center;min-height:2em;font-size:.8em;position:relative}
.build-label{display:flex;justify-content:space-between;gap:10px;font-size:.73em;color:var(--muted)}
.build-label b{font-variant-numeric:tabular-nums;color:var(--ink)}
.mini-lines{max-width:none;width:100%;gap:7px;margin:16px 0}
.mini-lines .cast-slot{display:grid;grid-template-columns:30px 1fr 22px;gap:14px;align-items:center;height:25px}
.cast-slot>span{font-size:11px;color:var(--muted)}
.cast-slot>b{font-size:13px;font-weight:500;color:var(--muted);text-align:center}
.cast-slot .slot-bars{display:flex;gap:0;height:9px}
.slot-bars i{background:var(--ink);flex:1}
.slot-bars .gap{flex:0 0 24%;background:transparent}
.slot-bars i.empty-line{height:1px;background:#d9e3e6;align-self:center}
.cast-slot.moving .slot-bars i:not(.gap){background:var(--gold)}
#cast-result{min-height:2em;font-size:.75em}
.cast-actions{display:flex;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:22px}
.reading-grid{grid-template-columns:1.24fr 1fr;align-items:start}
.hex-paper{padding:25px}
.hex-compare{display:grid;grid-template-columns:1fr 30px 1fr;gap:12px;align-items:center;min-width:0}
.hex-compare>div{min-width:0}
.hex-compare h3{font-size:28px;margin:9px 0;white-space:nowrap}
.hex-compare p{font-size:.7em;color:var(--muted);min-height:2em;margin:8px 0}
.change-bridge svg{width:100%;fill:none;stroke:var(--gold);stroke-width:1.7}
.hex-compare .hex-lines{margin:18px 0;gap:7px}
.hex-line{min-height:31px;padding:3px 0;gap:5px}
.hex-line>span{width:25px;font-size:11px;flex:none}
.hex-line .bars{gap:19%}
.hex-line em{width:12px;font-size:10px;flex:none}
.morph-bars{display:flex;gap:var(--gap,0%);height:10px;flex:1;min-width:0}
.morph-bars i{height:100%;flex:1;background:var(--ink)}
.hex-line.moving .morph-bars i{background:var(--gold)}
.hex-line.active{outline:1px solid #b8cbd2;outline-offset:2px}
.change-controls{padding-top:17px;border-top:1px solid var(--line)}
.change-controls>div:first-child{display:flex;justify-content:space-between;align-items:center;gap:9px}
.change-controls label{font-size:.7em;color:var(--muted)}
.change-controls button{font-size:.68em;padding:3px 8px}
.change-controls input{width:100%;display:block;margin:17px 0 3px;min-height:22px}
.change-scale{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.line-info{margin-top:14px}
.small-label{color:#80662f}
.hour-explorer{margin-top:30px;border-block:1px solid var(--line);padding:18px 0}
.hour-explorer>div:first-child{display:flex;justify-content:space-between;gap:15px;font-size:.85em;flex-wrap:wrap}
#hour-caption{font-size:.85em;color:var(--muted)}
.hour-explorer>input{width:100%;margin:16px 0 5px;min-height:24px}
.hour-scale{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.hour-explorer>small{font-size:.68em;color:var(--muted)}
.pillar b{letter-spacing:0;padding-left:0;display:flex;justify-content:center;gap:12px}
.pillar b span{padding-inline:3px;transition:background .18s,color .18s}
.pillar b .element-selected{color:var(--ink);background:#e4dbc7;border-radius:4px}
.birth-bottom{grid-template-columns:1.05fr 1fr;gap:40px;align-items:start}
.element-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}
.element-heading h3{font-size:1em}
.relation-tabs{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;flex:none}
.relation-tabs button{border:0;border-radius:0;font-size:.7em;padding:4px 9px;margin:0}
.relation-tabs [aria-pressed=true]{background:var(--ink);color:white}
.element-wheel{display:block;width:100%;max-width:390px;margin:0 auto;overflow:visible}
.element-link{fill:none;stroke:#9bafb8;stroke-width:1.2}
.element-node{cursor:pointer;outline:none}
.element-node circle{fill:var(--paper);stroke:var(--element);stroke-width:2;transition:fill .18s,stroke-width .18s}
.element-node text{fill:var(--ink);text-anchor:middle;font:25px SimSun,serif;pointer-events:none}
.element-node .element-count{font:10px "Microsoft YaHei",sans-serif;fill:var(--muted)}
.element-node:hover circle,.element-node.active circle{fill:#e5eef1;stroke-width:3}
.element-node:focus-visible circle{stroke:var(--ink);stroke-dasharray:4 2;stroke-width:3}
.element-wheel .element-center{font:17px SimSun,serif;fill:var(--ink);text-anchor:middle}
.element-wheel .element-subcenter{font:10px "Microsoft YaHei",sans-serif;fill:var(--muted);text-anchor:middle}
.element-info{font-size:.8em;min-height:4.5em;line-height:1.85;background:#e7eff2;padding:14px 17px;margin-top:0}
.calendar-side{padding-top:0}
.month-browser{padding:18px 20px 8px;background:var(--paper);border-radius:12px;margin-bottom:28px}
.month-heading{display:flex;align-items:center;justify-content:space-between}
.month-heading h2{font-size:22px;margin:4px 0 16px}
.month-heading button{border:0;background:transparent;padding:3px 8px;min-width:30px}
.week-labels,.month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.week-labels{font-size:11px;color:var(--muted);text-align:center;margin-bottom:9px}
.month-day{border:0;background:transparent;padding:6px 0;min-width:0;min-height:47px;border-radius:6px;line-height:1.4;position:relative}
.month-day b{display:block;font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}
.month-day small{display:block;font-size:9px;color:var(--muted)}
.month-day.has-term small{color:#80662f}
.month-day[aria-pressed=true]{background:var(--ink);color:white}
.month-day[aria-pressed=true] small{color:#e1e9ec}
.month-day.is-today:after{content:"";position:absolute;width:4px;height:4px;bottom:2px;left:calc(50% - 2px);border-radius:50%;background:var(--gold)}
.month-hint{font-size:.66em;color:var(--muted);margin:12px 0}
.calendar-paper{align-self:start}
.message.waiting .speaker:after{content:"";width:15px;height:3px;display:inline-block;background:var(--gold);margin-left:10px;animation:thinking 1.2s ease-in-out 3}
@keyframes thinking{50%{opacity:.25;transform:scaleX(.4)}}
.reduce-motion *,.reduce-motion *:before,.reduce-motion *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(max-width:1150px){.hero{min-height:425px}.hero h1{font-size:34px}.orbit{max-width:300px}.hex-paper{padding:20px}.hex-compare{gap:7px;grid-template-columns:1fr 20px 1fr}.hex-compare h3{font-size:25px}.reading-grid{grid-template-columns:1.12fr 1fr;gap:20px}.hex-line>span{width:21px;font-size:10px}.hex-line em{display:none}.element-heading{align-items:start;gap:7px}.element-heading h3{font-size:.85em}.calendar-layout{grid-template-columns:1fr .85fr}}
@media(max-width:950px) and (min-width:761px){.reading-grid{grid-template-columns:1fr}.hex-paper{max-width:650px}.hex-compare .hex-lines{gap:8px}.hex-line>span{width:35px}.calendar-layout{grid-template-columns:1fr}.month-browser{max-width:520px}.casting-stage{gap:22px}.coins{gap:12px}.coins .coin{width:58px;height:58px}.hero h1{font-size:31px}.hero{grid-template-columns:1.1fr 1fr}.orbit{max-width:250px}.trigram-detail{min-height:120px}}
@media(max-width:760px){
  .hero{display:flex;flex-direction:column;gap:0;min-height:0}
  .hero-copy{width:100%;padding:30px 0 10px}
  .hero h1{font-size:33px;margin-bottom:16px}
  .hero-copy>p{margin:8px 0}
  .topic-row{margin-top:16px}
  .orbit{position:relative;top:auto;right:auto;width:100%;max-width:300px;opacity:1;z-index:1;padding:0 0 20px;align-self:center}
  .orbit>svg{width:265px;max-width:100%;margin:auto}
  .trigram-detail{min-height:86px}
  .trigram-detail p{font-size:.75em}
  .casting{padding:22px 18px}
  .cast-intro h2{font-size:25px}
  .casting-stage{grid-template-columns:1fr;gap:7px;margin:0 0 20px}
  .coin-table{min-height:225px;padding-top:32px}
  .coins{gap:22px}
  .coins .coin{width:65px;height:65px}
  .cast-build{padding-inline:9px}
  .cast-actions{gap:8px}
  .cast-actions .primary{flex-basis:100%}
  .cast-actions button{flex:1}
  .reading-grid{grid-template-columns:1fr}
  .hex-paper{padding:22px 18px}
  .hex-compare{grid-template-columns:1fr 20px 1fr;gap:9px}
  .hex-compare h3{font-size:26px}
  .hex-line>span{width:23px;font-size:10px}
  .hex-line em{display:none}
  .hex-compare p{font-size:.65em}
  .hex-compare .hex-lines{gap:9px}
  .hex-line{min-height:31px}
  .change-controls label{font-size:.72em}
  .change-controls button{font-size:.68em}
  .birth-bottom{grid-template-columns:1fr;gap:20px}
  .element-heading{align-items:center}
  .element-heading h3{font-size:1.05em}
  .hour-explorer>div:first-child{gap:4px}
  .hour-scale{font-size:9px}
  .calendar-layout{display:flex;flex-direction:column}
  .calendar-paper,.calendar-side{width:100%}
  .month-day{min-height:49px}
  .month-day b{font-size:14px}
  .month-day small{font-size:10px}
}
@media(max-width:370px){.hero h1{font-size:29px}.coins{gap:17px}.coins .coin{width:59px;height:59px}.hex-compare{gap:5px;grid-template-columns:1fr 15px 1fr}.hex-compare h3{font-size:23px}.hex-line>span{width:20px}.hex-line{gap:3px}.change-controls label{font-size:.65em}.month-browser{padding-inline:12px}.pillar b{gap:5px}.hour-scale{font-size:8px}}

/* Labels stay readable at the smallest supported viewport. */
.sidebar nav button span{color:var(--muted)}
.calendar-paper{border-radius:0}
.atlas-preview{box-shadow:0 15px 40px #00000012}
dialog{border:0;box-shadow:0 20px 70px #00000026}
.topbar .status,.topbar #today-short,.compose-bottom>span,.sample-row button,
.reading-heading>button,.hex-compare p,.change-controls label,.change-controls button,
.change-scale,.hex-line>span,.hex-line em,.cast-slot>span,.coin small,
.hour-scale,.hour-explorer>small,.month-day small,.month-hint,.week-labels,
.pillar small,.reflection small,.calendar-paper>small,.chat-foot,.follow-prompts button,
.app-footer,.side-bottom small{font-size:12px}
.element-node .element-count,.element-wheel .element-subcenter{font-size:12px}
.hex-compare h3{white-space:normal}
.pillars{grid-template-columns:repeat(4,minmax(0,1fr))}
.pillar{min-width:0}
@media(max-width:760px){.sidebar nav button{font-size:12px}.mobile-only{font-size:12px}.hex-line>span{font-size:11px}.hex-compare p{font-size:11px}.hour-scale{font-size:11px}.month-day small{font-size:11px}.pillar{padding:20px 5px}.pillar b{font-size:30px;gap:6px}.pillar b span{padding:0}}
@media(max-width:370px){.pillar b{font-size:26px;gap:4px}}

.retrieved-sources{margin-top:1rem;border-top:1px solid var(--line,#dbe2e5);padding-top:.7rem;overflow-wrap:anywhere}.retrieved-sources summary{cursor:pointer;font-size:.85rem;color:var(--muted,#5b6e76);padding:.3rem 0}.retrieved-sources section{margin:1rem 0}.retrieved-sources h4{font-size:.9rem;margin:.6rem 0}.retrieved-sources blockquote{white-space:pre-wrap;margin:.5rem 0;padding-left:.8rem;border-left:2px solid #a1854d;font-size:.9rem;line-height:1.8}.retrieved-sources p,.retrieved-sources small{display:block;font-size:.76rem;color:#58707b;line-height:1.6}.retrieved-sources a{font-size:.8rem}

.sidebar nav svg{width:24px;height:24px}.jiaobei-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:34px}.jiaobei-layout #jiaobei-question{display:block;width:100%;height:48px;margin:10px 0}.jiaobei-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0}.jiaobei-presets button{text-align:left;white-space:normal;font-size:14px;min-height:54px;padding:8px 11px;line-height:1.55}.jiaobei-presets button small{display:block;font-size:11px;color:var(--muted);font-weight:400}.jiaobei-presets button span{display:block}.jiaobei-input-row{display:flex;gap:9px;align-items:center}.jiaobei-input-row #jiaobei-question{flex:1;min-width:0}.jiaobei-input-row>button{flex:none;min-height:48px;white-space:nowrap;padding-inline:14px}.jiaobei-presets button[aria-pressed=true]{background:#e3edf1;border-color:#7397a8;font-weight:600}.jiaobei-layout #jiaobei-question-hint{font-size:12px;margin:8px 0}.jiaobei-layout label{font-size:15px}.jiaobei-table{position:relative;background:transparent;border-radius:0;border-bottom:1px solid var(--line);margin:18px 0 14px;overflow:hidden}.jiaobei-webgl{height:340px;min-width:0}.jiaobei-webgl canvas{display:block;width:100%;height:100%;touch-action:pan-y}.jiaobei-table>p{margin:0;position:absolute;left:10px;right:10px;bottom:10px;text-align:center;font-size:13px;color:#173b50;pointer-events:none}.jiaobei-actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}.jiaobei-guide{margin-top:24px;border-top:1px solid #cbd9df;padding-top:15px;font-size:14px}.jiaobei-guide summary{cursor:pointer}.jiaobei-guide dt{margin:14px 0 5px;color:#173b50}.jiaobei-guide dd{margin:0;color:#4b6572}.jiaobei-guide p,.jiaobei-guide a{font-size:12px;color:#4b6572}.jiaobei-result-side{align-self:center}.jiaobei-result-side h2{font-size:36px}.jiaobei-result-side #jiaobei-result-faces{font-size:13px;color:#4b6572}.jiaobei-result-side #jiaobei-result-question{font-size:19px;color:#173b50}.jiaobei-fallback{height:340px;display:flex;justify-content:center;align-items:center;gap:35px}.jiaobei-fallback>div{display:grid;gap:18px;text-align:center;font-size:12px}.cup-fallback{display:block;width:95px;height:62px;border-radius:70% 20% 70% 20%;background:#d6b27b;transform:rotate(-18deg)}.cup-fallback[data-flat=false]{background:#9b4437}.throwing .cup-fallback{animation:cup-toss 1.65s ease-in-out}.paused .cup-fallback{animation-play-state:paused}@keyframes cup-toss{0%{transform:translateY(0) rotateX(0)}35%{transform:translateY(-70px) rotateX(380deg) rotateZ(25deg)}80%{transform:translateY(-12px) rotateX(690deg)}100%{transform:translateY(0) rotateX(720deg)}}
@media(max-width:1000px){.jiaobei-layout{grid-template-columns:minmax(0,1fr);gap:22px}.jiaobei-result-side{max-width:75ch}.jiaobei-webgl,.jiaobei-fallback{height:320px}}@media(max-width:760px){.sidebar nav{overflow-x:auto;justify-content:flex-start;max-width:100%;min-width:0}.sidebar nav button{flex:0 0 auto;min-height:42px}.sidebar nav{scrollbar-width:thin;scrollbar-color:#aabfc9 transparent}.jiaobei-webgl,.jiaobei-fallback{height:275px}.jiaobei-layout{gap:12px}}

.feature-guide{margin:0 0 24px;padding:0 0 17px;border-bottom:1px solid var(--line);font-size:13px;line-height:1.65;color:#48616e;max-width:88ch}.feature-guide p{display:flex;gap:12px;margin:5px 0}.feature-guide b{flex:0 0 2em;font-weight:600;color:var(--ink)}.feature-guide span{min-width:0}.gw-reference{flex-basis:100%;font-size:13px;border-top:1px solid var(--line);padding-top:10px}.gw-reference>b{display:block;margin-bottom:8px}.gw-reference p{margin:8px 0}.jiaobei-guide h3{font-size:17px;margin:0 0 12px}@media(max-width:390px){.jiaobei-presets button{font-size:13px;padding:8px}.jiaobei-input-row{gap:6px}.jiaobei-input-row>button{padding-inline:10px}.feature-guide{font-size:12px}}
/* Optional personal reference and owner inbox. */
.eyebrow{display:block;color:#56717d;font-size:.78rem;letter-spacing:.12em;margin-bottom:10px}
.profile-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr);gap:32px;margin:28px 0}
.profile-card{padding:28px;border:1px solid #d3dfe2;background:rgba(255,255,255,.6);border-radius:12px;min-width:0}
.profile-card h2,.personality-card h2{font-size:1.28rem;margin:0 0 20px}.profile-card h2 small,.profile-birth-heading small{font-size:.78rem;font-weight:400;color:#617780}
.profile-fields{display:grid;grid-template-columns:1fr 1.8fr;gap:18px}.profile-card label{display:block;font-size:.88rem;margin-bottom:18px}.profile-card input:not([type=checkbox]),.profile-card textarea{display:block;width:100%;margin-top:8px;box-sizing:border-box}.profile-card label.check{display:flex;gap:9px;align-items:flex-start}.profile-card input[type=checkbox]{margin-top:4px;flex-shrink:0}
.profile-note,.profile-card small{font-size:.78rem;color:#536d78;line-height:1.65}.profile-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:16px 0}.profile-actions button{min-height:42px}.profile-card [role=status]{font-size:.82rem;min-height:1.5em;color:#28576a}
.profile-compass{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 12px;min-width:0}.profile-compass svg{width:100%;max-width:260px;align-self:center}.profile-ring{fill:none;stroke:#b9cdd2;stroke-width:1;stroke-dasharray:3 6}.profile-ray{fill:none;stroke:#a88857;stroke-width:2}.profile-mark{fill:#173b50}.profile-compass h2{font-size:1.4rem;margin:12px 0}.profile-compass p{line-height:1.8;overflow-wrap:anywhere}.profile-compass small{color:#56717d}
.personality-card{display:grid;grid-template-columns:1fr 1fr;gap:32px;border-top:1px solid #d3dfe2;border-bottom:1px solid #d3dfe2;padding:28px 0;margin:36px 0}.personality-card h2{margin-bottom:10px}.personality-card p{line-height:1.7}.personality-card small{color:#56717d}.trait-row{display:grid;grid-template-columns:90px 1fr 36px;align-items:center;gap:10px;margin:12px 0;font-size:.85rem}.trait-row meter{width:100%;height:12px;accent-color:#35728b}.trait-row meter::-webkit-meter-optimum-value{background:#397589}.profile-birth-heading{margin:36px 0 16px}.profile-birth-heading h2{font-size:1.3rem}.profile-birth-heading p{color:#56717d}
.personality-dialog{width:min(620px,calc(100% - 32px));max-height:85dvh;box-sizing:border-box;overflow:auto}.personality-dialog fieldset{border:0;padding:12px 0 18px;margin:0;border-bottom:1px solid #d3dfe2}.personality-dialog legend{padding:12px 0 0;line-height:1.6}.personality-options{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.personality-options label{cursor:pointer;text-align:center}.personality-options input{position:absolute;opacity:0;width:1px;height:1px}.personality-options span{display:block;border:1px solid #bdcfd5;border-radius:6px;padding:12px 0;background:#fff}.personality-options input:checked+span{background:#173b50;color:#fff;border-color:#173b50}.personality-options input:focus-visible+span{outline:3px solid #b18a4b;outline-offset:2px}.personality-dialog small{display:block;color:#56717d;line-height:1.7}.admin-main{margin:0 auto;max-width:1100px;padding:32px 24px}.admin-main #admin-login{max-width:440px}.admin-main dl{display:grid;grid-template-columns:100px 1fr;gap:12px}.admin-main dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.admin-main #admin-list{display:grid;gap:20px}.admin-main #admin-list article p{font-size:.78rem;color:#56717d}
.cup-fallback{clip-path:polygon(0 30%,8% 15%,25% 4%,50% 0,75% 4%,92% 15%,100% 30%,90% 50%,76% 40%,50% 30%,24% 40%,10% 50%)}
@media(max-width:760px){.profile-layout,.personality-card{grid-template-columns:1fr;gap:24px}.profile-fields{grid-template-columns:1fr;gap:0}.profile-card{padding:20px}.profile-compass{display:none}.personality-card{margin:26px 0}.admin-main dl{grid-template-columns:1fr;gap:6px}.profile-actions{gap:8px}.profile-birth-heading small{display:block;margin-top:6px}}
@media(prefers-reduced-motion:no-preference){.profile-ring{transform-origin:120px 90px;animation:profile-breathe 6s ease-in-out infinite}@keyframes profile-breathe{50%{opacity:.45}}}

/* Authored functional icons and one contextual cultural illustration. */
.icon-definitions{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.gw-icon{display:inline-block;flex:none;fill:none;color:var(--ink);vertical-align:middle}
.sidebar nav button{display:flex;align-items:center;gap:12px}
.sidebar nav .nav-icon{width:27px;height:27px}
.heading-title{display:flex;align-items:center;gap:16px;min-width:0}
.heading-title h1{margin:0;min-width:0}
.heading-icon{width:58px;height:58px}
.hero .heading-icon{width:54px;height:54px}
.page-heading .heading-title{margin-bottom:15px}
.button-icon{width:25px;height:25px;margin-right:8px}
.feature-guide b{display:flex;align-items:center;gap:7px;flex-basis:4.8em;white-space:nowrap}
.guide-icon{width:20px;height:20px}
.illustrated-heading{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:24px;align-items:center;min-height:215px}
.heading-copy{min-width:0}.heading-copy>p{max-width:40ch}
.heading-illustration{margin:0;align-self:center;text-align:center}
.heading-illustration img{display:block;width:100%;height:205px;object-fit:contain}
.heading-illustration figcaption{font-size:11px;color:#627580;line-height:1.5;margin-top:4px}
@media(max-width:760px){.sidebar nav button{gap:6px}.sidebar nav .nav-icon{width:23px;height:23px}.heading-title{gap:10px}.heading-icon{width:44px;height:44px}.hero .heading-icon{width:42px;height:42px}.illustrated-heading{grid-template-columns:minmax(0,1fr) 102px;gap:10px;min-height:165px}.illustrated-heading h1{font-size:28px;line-height:1.4}.heading-illustration img{height:153px}.heading-illustration figcaption{font-size:10px}.illustrated-heading .heading-copy>p{font-size:13px;line-height:1.7}.guide-icon{width:18px;height:18px}.feature-guide b{flex-basis:4.6em;gap:6px}}
@media(max-width:360px){.illustrated-heading{grid-template-columns:minmax(0,1fr) 82px}.illustrated-heading h1{font-size:25px}.illustrated-heading .heading-icon{width:36px;height:36px}.heading-illustration img{height:138px}}

/* Cup first, one compact question picker below; DOM order matches the task. */
.jiaobei-play .jiaobei-webgl,.jiaobei-play .jiaobei-fallback{height:clamp(220px,calc(100svh - 500px),340px)}
.jiaobei-play{scroll-margin-top:16px}.jiaobei-play .jiaobei-table{margin-top:0;margin-bottom:12px}
.jiaobei-current{display:flex;gap:10px;align-items:baseline;color:var(--ink);margin:8px 0}
.jiaobei-current>span{flex:none;font-size:12px;color:#536d78}
.jiaobei-current>p{margin:0;font-size:14px;line-height:1.6;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.jiaobei-play-actions{gap:8px;margin:10px 0}.jiaobei-play-actions button{min-height:44px;padding:8px 14px}
.jiaobei-drag-hint{font-size:12px}.jiaobei-question-picker{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);scroll-margin-top:16px}
.jiaobei-question-picker h2{font-size:19px;margin:0 0 10px}.jiaobei-question-picker .jiaobei-presets{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:8px 0}
.jiaobei-question-picker .jiaobei-presets button{min-height:50px;padding:6px 9px;font-size:13px;line-height:1.5}
.jiaobei-question-picker .jiaobei-input-row{gap:8px}.jiaobei-question-picker .jiaobei-input-row #jiaobei-question{margin:0;height:44px}
.jiaobei-question-picker .jiaobei-input-row>button{min-height:44px;padding:8px 11px;font-size:13px}
.jiaobei-question-picker #jiaobei-question-hint{margin:8px 0 0}.jiaobei-result-side{align-self:start}
#view-jiaobei>#usage-jiaobei{margin-top:24px}
@media(max-width:760px){#view-jiaobei .illustrated-heading{min-height:140px;margin-bottom:16px}#view-jiaobei .heading-illustration img{height:128px}.jiaobei-play .jiaobei-webgl,.jiaobei-play .jiaobei-fallback{height:260px}.jiaobei-current{gap:8px}.jiaobei-play-actions{gap:6px}.jiaobei-play-actions button{padding:8px 12px}.jiaobei-question-picker{margin-top:20px}.jiaobei-question-picker .jiaobei-presets{grid-template-columns:repeat(2,minmax(0,1fr))}.jiaobei-question-picker .jiaobei-presets button{min-height:48px;padding:6px 8px}.jiaobei-question-picker .jiaobei-input-row>button{font-size:12px;padding-inline:9px}}
@media(max-width:760px) and (max-height:740px){.jiaobei-play .jiaobei-webgl,.jiaobei-play .jiaobei-fallback{height:220px}#view-jiaobei .illustrated-heading{min-height:128px}#view-jiaobei .heading-illustration img{height:114px}}

/* A reveal stays in this view; returning keeps the completed experience. */
.topbar-start{display:flex;align-items:center;gap:12px;min-width:0}
.view-back{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:7px 12px;white-space:nowrap}
.view-back .gw-icon{width:20px;height:20px}.heading-title .view-back{margin-left:auto;font:14px/1.5 var(--sans,Arial,sans-serif)}
#jiaobei-reveal-note{font-size:12px;line-height:1.6;margin:8px 0 0;max-width:50ch}
.jiaobei-details{grid-column:1/-1;border-top:1px solid var(--line);padding-top:24px;scroll-margin-top:20px;min-width:0}
.jiaobei-details-heading{display:flex;gap:16px;align-items:center;justify-content:space-between}.jiaobei-details-heading .pretitle{margin:0 0 4px}
.jiaobei-details-heading h2{font-size:36px;margin:0}.jiaobei-details-heading>button{flex:none;min-height:44px}
#jiaobei-result-faces{font-size:13px;color:#4b6572}#jiaobei-result-question{font-size:19px;color:var(--ink);overflow-wrap:anywhere}
#jiaobei-chat-host .chat-section{margin-top:22px}#jiaobei-chat-host{scroll-margin-top:20px}
@media(max-width:760px){.jiaobei-play{scroll-margin-top:130px}.topbar-start{gap:6px}.topbar .view-back{font-size:12px;padding:7px 9px}.topbar .topbar-start #today-short{max-width:none;font-size:10px}.jiaobei-details{scroll-margin-top:130px}#jiaobei-chat-host{scroll-margin-top:130px}.jiaobei-details-heading h2{font-size:29px}.jiaobei-details-heading>button{padding:7px 10px;font-size:12px}.heading-title .view-back{font-size:12px;padding:7px 9px}.heading-title:has(.view-back){flex-wrap:wrap;gap:9px}.heading-title:has(.view-back) h1{font-size:28px}}
@media(max-width:360px){.can-go-back #today-short{display:none}.heading-title:has(.view-back) h1{font-size:25px}.heading-title:has(.view-back) .heading-icon{width:36px;height:36px}}

/* Optional account controls inherit the existing porcelain/blue interface. */
#account-open{display:inline-flex;gap:5px;align-items:center;min-height:40px;padding:6px 9px;max-width:150px}#account-open .gw-icon{width:20px;height:20px}#account-open-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-account-strip{display:flex;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;margin-bottom:16px}.profile-account-strip>.gw-icon{width:24px;height:24px}.profile-account-strip>span{flex:1;min-width:0;overflow-wrap:anywhere}.profile-account-strip>button{min-height:44px;white-space:nowrap;padding:7px 11px}
#account-dialog{width:480px;max-width:calc(100vw - 28px);max-height:88svh;overflow:auto}#account-dialog h2{margin:0 0 18px;font:30px/1.4 SimSun,serif}.account-tabs{display:flex;gap:8px;margin-bottom:20px}.account-tabs button{min-height:44px;font-size:14px;padding:7px 13px}.account-tabs [aria-pressed=true]{background:var(--ink);color:white}#account-form>label:not(.check){display:grid;gap:6px;margin:14px 0}#account-form input:not([type=checkbox]){width:100%;min-height:46px;border:1px solid var(--line);border-radius:6px;padding:8px 12px}#account-form .check{font-size:14px}#account-submit{width:100%;min-height:46px}#account-error{color:#8a342e;min-height:1.5em}#account-recovery-code{display:block;overflow-wrap:anywhere;user-select:all;background:#e6eff2;padding:16px;font:15px/1.8 monospace}.account-sync-row{display:flex;gap:10px;align-items:center;justify-content:space-between;font-size:13px;margin-top:12px}.account-sync-row button{font-size:12px;min-height:40px;padding:6px 9px;white-space:nowrap}.account-conflict{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);color:#7d4925}.account-conflict p{margin:0;font-size:14px}
@media(max-width:760px){.topbar>div{gap:6px}.topbar #connection{max-width:95px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.topbar #account-open{font-size:12px;max-width:92px}.topbar #account-open .gw-icon{width:17px;height:17px}#account-dialog{padding:24px 20px}.profile-account-strip{font-size:12px}.profile-account-strip>button{font-size:12px}}
@media(max-width:360px){.topbar #today-short{display:none}.topbar #connection{max-width:80px}}

.profile-family-actions{display:flex;gap:9px 12px;flex-wrap:wrap;align-items:center;margin:16px 0}.profile-family-actions>button{min-height:44px}.profile-family-actions>small{font-size:12px;color:#536e7a}.personality-origin{font-size:13px;flex-basis:100%;margin:10px 0 0}
.family-import-page main{margin:0 auto;padding:28px 24px 40px;max-width:720px}.family-picker-heading{display:flex;gap:12px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:18px}.family-picker-heading h1{font-size:30px;display:flex;gap:12px;align-items:center;margin:0}.family-picker-heading svg{width:40px;height:40px;fill:none;stroke:var(--ink);stroke-width:2.5}.family-picker-heading>button{white-space:nowrap;font-size:13px;min-height:44px;padding:7px 12px}#family-state{color:#486a7c;font-size:14px;min-height:2em}.family-select-label{display:grid;gap:10px;margin:28px 0 24px}.family-select-label select{min-height:48px;width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:white}#family-preview h2{font-size:28px}.family-preview-list{display:grid;grid-template-columns:6em minmax(0,1fr);gap:14px 12px;padding:20px 0;border-block:1px solid var(--line)}.family-preview-list dt{color:#536e7a}.family-preview-list dd{margin:0;overflow-wrap:anywhere}.family-import-page .check{display:flex;gap:10px;align-items:flex-start;margin:18px 0;font-size:14px}.family-import-page .check input{margin-top:6px;flex:none}.family-import-page #family-about-preview{font-size:13px;max-height:9em;overflow:auto;white-space:pre-wrap}.family-replace-note,#family-destination{font-size:13px}#family-send{min-height:48px;width:100%;margin-top:12px}
@media(max-width:760px){.profile-family-actions>button{font-size:13px;padding:8px 12px}.family-import-page main{padding:20px 16px 32px}.family-picker-heading h1{font-size:25px;gap:8px}.family-picker-heading svg{width:32px;height:32px}.family-picker-heading>button{font-size:12px;padding:7px 9px}.family-preview-list{grid-template-columns:5em minmax(0,1fr);font-size:14px}.family-import-page>main>p{font-size:14px}}

.method-info-table{border-collapse:collapse;width:100%;font-size:14px}.method-info-table th,.method-info-table td{border-bottom:1px solid var(--line);padding:12px 8px;text-align:left;vertical-align:top}.method-info-table th:first-child,.method-info-table td:first-child{width:7em}

.jiaobei-picker-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.jiaobei-picker-heading h2{margin:0}.jiaobei-picker-heading button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 10px;font-size:13px;flex:none}.jiaobei-picker-heading svg{width:18px;height:18px}