:root{color-scheme:light;--paper:#f4f0e7;--ink:#293d35;--muted:#617067;--line:#c8cec1;--accent:#a35b3b;--surface:#fbf9f3;--space:clamp(1rem,3vw,2rem);font:17px/1.6 system-ui,sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 90% 10%,#e5e8dc,transparent 55%)}a{color:inherit;text-underline-offset:.25em}button,input,textarea{font:inherit}button,.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.7rem 1.4rem;background:#e3e4d9;color:var(--ink);border:1px solid transparent;border-radius:3px;cursor:pointer;text-decoration:none;font-weight:650}button:disabled{opacity:.5;cursor:wait}.secondary{background:#ebe9df;color:var(--ink);border-color:transparent}:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.skip{position:absolute;top:-100px}.skip:focus{top:0;background:white;z-index:2}.masthead{max-width:1280px;margin:auto;padding:1.5rem var(--space);display:flex;justify-content:space-between;gap:1rem;align-items:center;border-bottom:1px solid var(--line)}.brand{font-size:.7rem;letter-spacing:.18em;text-decoration:none;display:flex;align-items:center;gap:.6rem}.tao-symbol{width:2rem;height:2rem;flex-shrink:0}nav{display:flex;gap:1rem;align-items:center;font-size:.8rem}nav button{padding:.4rem .7rem;min-height:44px}main{max-width:1120px;margin:0 auto;padding:clamp(2rem,6vw,5rem) var(--space);min-height:72vh}h1,h2,h3,.serif{font-family:Georgia,serif;font-weight:400;line-height:1.15}h1{font-size:clamp(2.6rem,6vw,5rem);margin:.8rem 0 1.4rem;letter-spacing:-.04em}h2{font-size:2rem;margin:.6rem 0 1rem}h3{font-size:1.35rem;margin:.5rem 0}.eyebrow{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:650}.muted,small{color:var(--muted)}p{max-width:62ch}.actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}.hero{display:grid;gap:3rem;align-items:center}.hero-copy>p{max-width:36ch}.narrow{max-width:540px;margin:auto}.panel{padding:var(--space);border:1px solid var(--line);background:var(--surface);border-radius:4px}label{display:block;margin:1.3rem 0 .4rem;font-size:.85rem;font-weight:600}input,textarea{width:100%;min-width:0;padding:.85rem;border:1px solid #8d9d8e;border-radius:3px;background:#fffdf8;color:var(--ink)}textarea{min-height:220px;resize:vertical}.help{display:block;margin:.5rem 0}.error{color:#a02d25}.error:empty{display:none}.page-head{max-width:700px;margin-bottom:2.5rem}.journey{max-width:860px;margin:auto}.from{border-left:2px solid var(--line);padding:.3rem 1.3rem;margin-left:1.4rem}.arrow{color:var(--accent);font-size:1.5rem;margin:.5rem 0 .5rem 1.4rem}.current{position:relative;background:var(--ink);color:var(--surface);padding:clamp(1.4rem,4vw,2.6rem);border-radius:4px}.current .eyebrow,.current .muted{color:#d6dcb9}.current h2{font-size:clamp(2rem,4vw,3rem)}.possibilities{display:grid;gap:.75rem;margin:1rem 0;padding:0;list-style:none}.possibility{padding:1rem 1.2rem;border:1px solid var(--line);background:#fbf9f380;display:grid;grid-template-columns:2rem 1fr;gap:.75rem}.step{font:1.4rem Georgia,serif;color:var(--accent)}.possibility p{font-size:.8rem;margin:.5rem 0}.context{border-left:2px solid var(--accent);padding-left:1rem;margin:1.5rem 0}.demo-banner{padding:.7rem 1rem;border:1px dashed var(--accent);font-size:.8rem;margin-bottom:2rem}footer{text-align:center;font:italic .85rem Georgia,serif;color:var(--muted);padding:2rem 1rem}#status{max-width:900px;margin:0 auto;padding:0 1rem;overflow-wrap:anywhere}.art-slot{width:44px;height:44px;object-fit:contain;float:right}dialog{max-width:450px;padding:2rem;background:var(--surface);color:var(--ink);border:1px solid var(--line)}dialog::backdrop{background:#293d3580}
@media(min-width:640px){.possibilities{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{gap:4rem}}
@media(min-width:1024px){.hero{grid-template-columns:1fr 1fr}.possibilities{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:380px){.brand{font-size:.6rem;letter-spacing:.1em}.masthead{gap:.5rem}nav{gap:.4rem}.actions>*{width:100%}}
@media(prefers-reduced-motion:no-preference){main{animation:arrive .3s ease-out}@keyframes arrive{from{opacity:.5;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}}
select{font:inherit;max-width:100%;padding:.65rem;border:1px solid var(--line);background:var(--surface);color:var(--ink)}.question-display{margin:1.5rem 0 2rem;padding:1rem 1.5rem;border-left:2px solid var(--accent);background:#fbf9f370}.question-display p{margin:.4rem 0;white-space:pre-wrap;overflow-wrap:anywhere}.ceremony-stage{background:#191713;border:1px solid #6c654e;border-radius:5px;color:#f5ead7;overflow:hidden}.ceremony-stage svg{width:100%;display:block;min-height:190px}.ceremony-dock{padding:1rem var(--space) 1.8rem;border-top:1px solid #5e5945}.ceremony-dock button{background:#302d25;color:#ded4af;border-color:transparent}.ceremony-dock .secondary{background:#25221d;color:#ded4af}.ceremony-dock #caption{font:1.3rem/1.5 Georgia,serif}.ceremony-dock #casting-status{font-size:.75rem;letter-spacing:.12em}.hexagrams{display:grid;gap:1.5rem}.hexagram{min-width:0}.hex-line{display:flex;align-items:center;gap:.6rem;margin:.65rem 0;max-width:300px}.line-number,.line-value{font-size:.75rem;width:2rem;flex-shrink:0}.hex-line .yang,.hex-line .yin{height:13px;flex:1;background:var(--ink)}.hex-line .yin{background:linear-gradient(to right,var(--ink) 43%,transparent 43%,transparent 57%,var(--ink) 57%)}.hex-line.changing{color:var(--accent)}.hex-line.changing .yang{background:var(--accent)}.hex-line.changing .yin{background:linear-gradient(to right,var(--accent) 43%,transparent 43%,transparent 57%,var(--accent) 57%)}.symbol-art{height:64px;width:64px;object-fit:contain}.symbol-context{display:grid;gap:1rem}.reading-panel{max-height:65vh;overflow:auto;overscroll-behavior:contain;padding:clamp(1rem,3vw,2.5rem);background:var(--surface);border:1px solid var(--line);scrollbar-gutter:stable}.reading-panel p,.journal-text{white-space:pre-wrap;overflow-wrap:anywhere}.reading-panel section+section{margin-top:2rem}.gist{font-style:italic;max-height:10rem;overflow:auto}.movement-path{display:grid;gap:1rem}.movement-amount{font:2rem Georgia,serif;align-self:center;color:var(--accent)}.consequence{margin-top:1.5rem;border-color:var(--accent)}.history details{padding:1rem 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.history summary{cursor:pointer;padding:.6rem 0}.history details details{padding-left:1rem}#journal{min-height:40vh}.possibility .art-slot{width:25px;height:25px}.demo-banner label{display:inline-block;margin:0 .5rem}nav button{font-size:.7rem}h1,h2,h3,p,small{overflow-wrap:anywhere}
@media(min-width:640px){.hexagrams,.symbol-context{grid-template-columns:repeat(2,minmax(0,1fr))}.movement-path{grid-template-columns:1fr auto 1fr}}
@media(max-width:639px){.masthead{flex-wrap:wrap}.masthead nav{width:100%;justify-content:flex-end}.ceremony-stage svg{min-height:0;aspect-ratio:1200/620}.ceremony-dock .actions{display:grid}.ceremony-dock .actions button{width:100%}.movement-amount{transform:none}.reading-panel{max-height:60vh}}

main:focus{outline:none}

/* Read-only state information layer. Domain hues arrive through metadata. */
.state-link{background:#293d350a;color:inherit;border-color:transparent;font:inherit;font-weight:650;padding:.45rem .8rem;min-height:44px;text-align:left;white-space:normal}.current .state-link{margin-top:1rem;background:#ffffff12}.hexagram{position:relative}.hexagram .state-link::after{content:"";position:absolute;inset:0}.hexagram:focus-within{outline:3px solid var(--accent)}.state-viewer{width:min(980px,calc(100% - 2rem));max-width:none;max-height:90dvh;padding:0;border-radius:8px;overscroll-behavior:contain}.state-toolbar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.5rem;background:var(--surface);border-bottom:1px solid var(--line)}.state-toolbar>span{font-size:.65rem;letter-spacing:.12em}.state-toolbar button{flex-shrink:0}.state-view-content{padding:clamp(1rem,4vw,3rem)}.state-view-content h2{font-size:clamp(2rem,5vw,3.5rem)}.state-view-content section+section{margin-top:2rem}.state-atmosphere{border-top:10px solid var(--state-hue);padding-top:1rem}.state-lead{font:1.3rem/1.6 Georgia,serif}.state-art{display:block;max-width:100%;width:auto;max-height:260px;height:auto;object-fit:contain;margin:1rem auto}.state-art[hidden]{display:none}.reference-state,.viewer-reflection{border-top:1px solid var(--line);padding-top:1.5rem}.state-transition{margin:1rem 0;padding:1.5rem;border:1px solid var(--line)}.hexagram-field{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,.8fr) minmax(0,1fr);gap:1rem;align-items:stretch;margin:2rem 0}.hexagram-field section+section{margin-top:0}.trigram-field{padding:1.2rem;background:color-mix(in srgb,var(--state-hue) 25%,var(--surface));border-top:8px solid var(--state-hue)}.trigram-mark{display:flex;align-items:center;gap:1rem}.trigram-mark>span{font:3rem Georgia,serif}.trigram-mark .state-lines{width:90px}.association-labels{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.association-labels dt{font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.association-labels dd{margin:.3rem 0;overflow-wrap:anywhere}.hexagram-centre{text-align:center;align-self:center;padding:1rem}.hex-glyph{font-size:4rem}.chinese-name{font-size:2rem;margin:.5rem}.state-lines{max-width:180px;margin:1rem auto;padding-right:1.8rem}.state-line{position:relative;display:flex;gap:14%;height:12px;margin:12px 0}.state-line span{background:var(--ink);flex:1}.state-line.yang{gap:0}.state-line small{position:absolute;left:calc(100% + .5rem);white-space:nowrap;font-size:.65rem}.state-line.is-changing{outline:2px solid var(--accent);outline-offset:3px}.state-pair{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;margin:2rem 0}.state-pair>span{align-self:center}.state-viewer details{margin-top:2rem;font-size:.8rem}.state-viewer li{overflow-wrap:anywhere}
@media(max-width:639px){.state-viewer{width:100%;max-height:94dvh;margin:auto 0 0;border-radius:12px 12px 0 0}.hexagram-field{grid-template-columns:minmax(0,1fr)}.hexagram-centre{grid-row:2}.state-toolbar{padding:.7rem 1rem}.state-view-content{padding:1.2rem}.state-pair{flex-direction:column}.state-pair button{justify-content:center}}

/* A local field on every device: resize the space, never the set of states. */
.local-invitation{padding:2rem;text-align:center;border:1px solid var(--line);font:1.4rem/1.5 Georgia,serif}.local-invitation p{margin:.7rem auto}.local-invitation>span{color:var(--accent)}.local-state{position:relative;cursor:pointer;touch-action:manipulation}.local-state:hover{box-shadow:0 0 0 2px var(--accent)}.local-state:focus-within{outline:3px solid var(--accent);outline-offset:3px}.transition-preview{border-left:2px solid var(--accent);padding-left:.8rem}.transition-preview small{display:block;margin-top:.4rem}.local-field .possibilities{grid-template-columns:minmax(0,1fr)}.local-field .possibility+.possibility::before{content:"↓";position:absolute;top:-1.4rem;left:1.5rem;color:var(--accent)}.local-field .possibilities{gap:1.8rem}
@media(min-width:768px){.local-field .possibilities{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.local-field .possibility+.possibility::before{content:none}}

.persona-fields{margin:1.5rem 0;padding:1rem;border:1px solid var(--line);min-width:0}.persona-fields legend{font-family:Georgia,serif;padding:0 .5rem}.persona-field-grid{display:grid;gap:.5rem 1.5rem}.persona-fields select{width:100%;background:var(--surface);color:var(--ink);min-height:48px}.persona-fields [hidden]{display:none}.persona-attribute-summary{display:flex;flex-wrap:wrap;gap:1rem 2rem}.persona-attribute-summary dt{font-size:.75rem;color:var(--muted)}.persona-attribute-summary dd{margin:.35rem 0;overflow-wrap:anywhere}@media(min-width:640px){.persona-field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Shared reading rhythm for state descriptions, AI readings and saved history. */
.prose{max-width:65ch;line-height:1.8;overflow-wrap:anywhere}
.prose>p{margin:0;white-space:normal}
.prose>p+p{margin-top:1.1em}
.reading-section+.reading-section{margin-top:2.2rem}
.reading-section>h3{margin-bottom:.85rem}
.state-view-content .prose{margin:.85rem 0 1.4rem}
.local-state .prose{margin:.7rem 0}
.possibility .prose>p+p{margin-top:1em}

/* Keep the original hero footprint, with bounded artwork beside the copy. */
.splash{margin:0 auto;text-align:center;display:grid;grid-template-areas:"heading" "artwork" "entry";grid-template-columns:minmax(0,1fr);align-items:center;gap:1.5rem}
.splash-heading{grid-area:heading;min-width:0;width:100%;position:relative;z-index:1}
.splash-heading h1{margin:0 0 1rem;font-size:clamp(2.6rem,7vw,4.8rem)}
.splash-subtitle{max-width:none;margin:0 auto;color:var(--muted);font:clamp(1.05rem,2.4vw,1.45rem)/1.7 Georgia,serif}
.splash-artwork{grid-area:artwork;justify-self:center;display:block;width:100%;max-width:360px;height:auto;object-fit:contain}
.splash-artwork[hidden],.splash-explanation[hidden]{display:none}
.splash-entry{grid-area:entry;min-width:0}
.splash-entry .actions{justify-content:center;margin-top:0;gap:1rem}
.splash-invitation{margin:1.1rem 0 0;color:var(--muted);font:italic 1.1rem/1.6 Georgia,serif}
.splash-term{display:inline-block}
.splash-term-button{display:inline;min-height:44px;padding:.3rem .08rem;border:0;border-radius:3px;background:#293d350a;color:var(--ink);font:inherit;font-weight:650;text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:.22em}
.splash-term-button:hover,.splash-term-button[aria-expanded="true"]{color:var(--accent)}
.splash-explanation{position:absolute;top:100%;left:50%;transform:translateX(-50%);width:min(24rem,100%);padding:1rem 1.25rem;background:var(--surface);color:var(--ink);box-shadow:0 8px 28px #293d3520;border-radius:4px;text-align:left;font:1rem/1.65 system-ui,sans-serif;z-index:3}
.splash-explanation strong,.splash-explanation>span{display:block}
.splash-explanation strong{margin-bottom:.3rem;font-family:Georgia,serif;font-size:1.2rem}
@media(max-width:639px){.splash{gap:1.5rem}.splash-entry{width:100%}.splash-entry .actions>*{width:auto;flex:0 1 auto}.splash-explanation{font-size:.95rem}}
@media(min-width:1024px){.splash{grid-template-areas:"heading artwork" "entry artwork";grid-template-columns:repeat(2,minmax(0,1fr));column-gap:4rem;text-align:left}.splash-heading{align-self:end}.splash-entry{align-self:start}.splash-artwork{max-width:460px}.splash-entry .actions{justify-content:flex-start}}

.persona-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:1.5rem}
.persona-card{min-width:0;display:flex;flex-direction:column;align-items:flex-start;margin:0}
.persona-card.selected{outline:2px solid var(--accent);outline-offset:3px}
.persona-avatar{display:block;flex:none;width:80px;max-width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;margin:0 0 1rem}
.persona-avatar-placeholder{display:grid;place-items:center;background:var(--surface);border:1px solid var(--accent);font:2.5rem Georgia,serif;color:var(--accent)}
.persona-card .actions{margin-top:auto;padding-top:1rem}
.persona-card details{width:100%;margin-top:1rem}
.avatar-editor{min-width:0;overflow-wrap:anywhere;margin:2rem 0;padding:1.5rem;border:1px solid var(--muted);border-radius:8px}
.avatar-editor .persona-avatar{width:96px}
.avatar-editor button[hidden]{display:none}
@media(max-width:639px){.masthead{flex-wrap:wrap}nav{flex-wrap:wrap}.persona-card{overflow-wrap:anywhere}}

/* Quiet controls keep emphasis in the text, with feedback on interaction. */
.masthead nav>a{font-weight:650;background:#293d350a;padding:.35rem .65rem;border-radius:3px;text-decoration:none}
@media(hover:hover){button:not(:disabled):hover,.button:hover,.masthead nav>a:hover{background:#d8ddcf}.ceremony-dock button:not(:disabled):hover{background:#403b30}.current .state-link:hover{background:#ffffff20}}
button:not(:disabled):active,.button:active{box-shadow:inset 0 0 0 1px #61706740}