:root { color-scheme: light; --ink:#152f35; --paper:#f5f7f5; --muted:#53696b; --line:#cdd8d6; --accent:#a13c30; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:1rem; line-height:1.6; }
main { width:min(100% - 2.5rem,42rem); margin:auto; padding:1.5rem 0 max(2rem,env(safe-area-inset-bottom)); }
header { display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--line); padding-bottom:1rem; }
.wordmark { font-family:Georgia,serif; font-size:1.7rem; font-style:italic; }
.edition,.eyebrow { font-size:.75rem; letter-spacing:.16em; font-weight:650; }
.edition { color:var(--muted); }
.intro { margin:2rem 0 1.5rem; }
.eyebrow { margin:0 0 .7rem; color:var(--muted); }
h1,h2,h3 { font-family:Georgia,"Times New Roman",serif; font-weight:400; line-height:1.15; }
h1 { margin:0; font-size:clamp(2.2rem,8vw,3.5rem); letter-spacing:-.035em; }
h2 { font-size:2rem; margin:.5rem 0 1.5rem; }
h3 { font-size:1.45rem; margin:1.5rem 0 .75rem; }
label { display:block; font-size:.9rem; margin-bottom:.6rem; }
.optional { color:var(--muted); font-size:.8rem; margin-left:.35rem; }
textarea { display:block; resize:vertical; width:100%; border:1px solid var(--line); border-radius:6px; padding:.85rem 1rem; background:#fff; color:var(--ink); font:inherit; min-height:6.5rem; }
textarea::placeholder { color:#697a7b; }
textarea:read-only { background:transparent; }
button,summary,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { font:inherit; cursor:pointer; }
button:disabled { cursor:default; opacity:.6; }
.primary { display:block; width:100%; min-height:3.7rem; border:1px solid var(--ink); border-radius:6px; padding:.9rem 1.2rem; background:var(--ink); color:#fff; font-weight:550; transition:background .15s; }
.primary:not(:disabled):active { background:#2b5157; }
button:focus-visible,summary:focus-visible,a:focus-visible,textarea:focus-visible { outline:3px solid #a85a2d; outline-offset:4px; }
.cast-area { padding:1.5rem 0 0; }
.hexagram { display:flex; flex-direction:column; gap:10px; width:156px; margin:0 auto 1.3rem; }
.hex-line { display:flex; align-items:center; gap:14px; height:10px; position:relative; }
.hex-line .bar { flex:1; background:var(--ink); height:100%; }
.hex-line.pending .bar { background:var(--line); height:2px; }
.hex-line.changing .bar { background:var(--accent); }
.hex-line.changing::after { content:"●"; color:var(--accent); position:absolute; left:calc(100% + 12px); font-size:.65rem; }
.progress { text-align:center; font-size:.9rem; margin:0 0 1rem; min-height:1.5em; }
.quiet { font-size:.85rem; color:var(--muted); text-align:center; margin:.75rem 0 0; }
footer { margin-top:2rem; border-top:1px solid var(--line); color:var(--muted); font-size:.875rem; }
summary { cursor:pointer; padding:1rem 0; min-height:48px; }
details p { margin:.25rem 0 1rem; }
a { color:inherit; text-underline-offset:3px; }
.error { border-left:3px solid var(--accent); padding-left:1rem; color:var(--accent); }
#reading { margin-top:2rem; }
.question-echo { font-family:Georgia,serif; font-size:1.3rem; margin:0 0 2rem; white-space:pre-wrap; overflow-wrap:anywhere; }
.result-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-block:1px solid var(--line); margin:1.5rem 0; }
.result-pair.single { grid-template-columns:1fr; }
.result-figure { padding:1.5rem .75rem; text-align:center; }
.result-figure+.result-figure { border-left:1px solid var(--line); }
.result-figure .hexagram { width:90px; gap:7px; margin:1rem auto; }
.result-figure .hex-line { height:7px; gap:10px; }
.result-figure .hex-line.changing::after { left:calc(100% + 6px); }
.figure-label { font-size:.8rem; color:var(--muted); }
.figure-name { font-family:Georgia,serif; font-size:1.25rem; line-height:1.35; margin:0; }
.cast-record { font-size:.85rem; color:var(--muted); text-align:center; overflow-wrap:anywhere; }
.cast-record strong { color:var(--ink); font-weight:550; letter-spacing:.14em; }
.reading-text { font-family:Georgia,"Times New Roman",serif; font-size:1.15rem; line-height:1.75; }
.reading-text p { margin:0 0 1.2rem; }
.line-reading { padding:0 0 0 1rem; border-left:2px solid var(--accent); margin:1.4rem 0; }
.line-reading h3 { font-family:inherit; color:var(--accent); font-size:.9rem; font-weight:600; }
.reading-notes { font-size:.875rem; color:var(--muted); }
.other-lines { border-block:1px solid var(--line); margin:1.5rem 0; }
.other-lines summary { font-family:system-ui,sans-serif; font-size:.9rem; }
.restart { margin-top:2rem; }
@media (min-width:700px) { main { padding-top:2.3rem; } .intro { margin-top:2.7rem; } .cast-area { padding-top:2rem; } }
@media (prefers-reduced-motion:reduce) { * { transition:none!important; scroll-behavior:auto!important; } }