/* A light-paper practice table, scoped away from the actual casting figure. */
#trigram-playground{--tp-paper:#fbf6e9;--tp-ink:#292d2a;--tp-muted:#6b6a60;--tp-line:#d7cebb;--tp-accent:#416653;--tp-soft:#e4ece1;margin:36px 0;padding:27px;border:1px solid var(--tp-line);background:var(--tp-paper);color:var(--tp-ink);box-shadow:inset 0 0 0 5px #fbf6e9,inset 0 0 0 6px #d7cebb44;isolation:isolate}
body[data-world="dusk"] #trigram-playground{--tp-accent:#9a4c33;--tp-soft:#f2e2d5}
body[data-world="night"] #trigram-playground{--tp-accent:#4b527c;--tp-soft:#e7e7f0}
body[data-world="jade"] #trigram-playground{--tp-accent:#416653;--tp-soft:#e4ece1}
#trigram-playground *{box-sizing:border-box}
#trigram-playground [hidden]{display:none!important}
#trigram-playground button{font-family:var(--sans,system-ui,sans-serif);cursor:pointer;min-height:44px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#trigram-playground button:focus-visible{outline:3px solid var(--tp-accent);outline-offset:3px}
#trigram-playground button:disabled{cursor:default;opacity:.63}
#trigram-playground .tp-eyebrow{margin:0 0 8px;font:10px/1.7 var(--sans,system-ui,sans-serif);letter-spacing:1.5px;color:var(--tp-accent)}
#trigram-playground .tp-heading h3{margin:0 0 10px;font:31px/1.25 var(--serif,Georgia,serif);color:var(--tp-ink);letter-spacing:-.6px}
#trigram-playground .tp-heading>p:last-child{margin:0;max-width:590px;font-size:13px;line-height:1.8;color:var(--tp-muted)}
#trigram-playground .tp-progress{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;list-style:none;padding:0;margin:24px 0}
#trigram-playground .tp-progress li{display:flex;align-items:center;gap:7px;margin:0;padding:7px 0;border-bottom:2px solid var(--tp-line);color:var(--tp-muted);font-size:11px}
#trigram-playground .tp-progress li>span{display:grid;place-items:center;flex:0 0 22px;width:22px;height:22px;border:1px solid var(--tp-line);font:12px/1 var(--serif,Georgia,serif)}
#trigram-playground .tp-progress small{font-size:10px;line-height:1.3}
#trigram-playground .tp-progress .tp-current{border-bottom-color:var(--tp-accent);color:var(--tp-accent)}
#trigram-playground .tp-progress .tp-done>span{background:var(--tp-accent);border-color:var(--tp-accent);color:var(--tp-paper)}
#trigram-playground .tp-clue{padding:16px 19px;background:var(--tp-soft);border-left:3px solid var(--tp-accent)}
#trigram-playground .tp-clue>span{font:10px/1.6 var(--sans,system-ui,sans-serif);letter-spacing:1px;color:var(--tp-accent)}
#trigram-playground .tp-clue h4{margin:6px 0 5px;font:24px/1.35 var(--serif,Georgia,serif);font-weight:400;color:var(--tp-ink)}
#trigram-playground .tp-clue p{margin:0;font-size:11px;line-height:1.7;color:var(--tp-muted)}
#trigram-playground .tp-board{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(115px,.8fr);gap:23px;align-items:center;margin:23px 0}
#trigram-playground .tp-slots{display:grid;gap:10px}
#trigram-playground .tp-slot{display:block;min-height:92px;width:100%;padding:11px 15px;text-align:left;color:var(--tp-ink);background:var(--tp-paper);border:1px solid var(--tp-line);border-radius:3px}
#trigram-playground .tp-slot[aria-pressed="true"]{border:2px solid var(--tp-accent);padding:10px 14px;box-shadow:0 0 0 2px var(--tp-soft)}
#trigram-playground .tp-slot:disabled{opacity:1}
#trigram-playground .tp-slot-position{display:block;font-size:12px;font-weight:600;color:var(--tp-accent)}
#trigram-playground .tp-slot-position small{display:block;margin-top:1px;font-size:10px;font-weight:400;color:var(--tp-muted)}
#trigram-playground .tp-slot-choice{display:flex;gap:9px;align-items:center;margin-top:7px;font-size:13px;line-height:1.4}
#trigram-playground .tp-slot-choice>b{min-width:29px;font:27px/1 serif;font-weight:400;color:var(--tp-ink)}
#trigram-playground .tp-preview{margin:0;text-align:center;min-width:0}
#trigram-playground .tp-preview-lines{display:flex;flex-direction:column-reverse;gap:7px;align-items:center;width:100%;min-height:89px;justify-content:center}
#trigram-playground .tp-line{display:flex;gap:13px;width:97px;height:6px;flex:0 0 6px}
#trigram-playground .tp-line i{flex:1;height:100%;background:var(--tp-accent);border-radius:1px}
#trigram-playground .tp-line-empty i{background:repeating-linear-gradient(90deg,var(--tp-line) 0 7px,transparent 7px 12px);opacity:.7}
#trigram-playground .tp-upper-start{margin-bottom:7px}
#trigram-playground .tp-preview figcaption{font-size:8px;line-height:1.65;letter-spacing:.5px;color:var(--tp-muted);margin-top:14px}
#trigram-playground .tp-preview figcaption>span{display:block;font:13px/1.6 var(--serif,Georgia,serif);letter-spacing:0;color:var(--tp-ink);margin-top:5px;overflow-wrap:anywhere}
#trigram-playground .tp-pick-label{font-size:12px;font-weight:600;color:var(--tp-accent);margin:0 0 10px}
#trigram-playground .tp-trigrams{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
#trigram-playground .tp-trigram{--tile-ink:#3f704d;--tile-wash:#e2efdf;--tile-edge:#b2cdb0;position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:86px;padding:10px 4px 8px;border:1px solid var(--tile-edge);border-radius:8px 3px 7px 4px;background:radial-gradient(ellipse at 50% 8%,var(--tile-wash) 0 34%,transparent 75%),linear-gradient(155deg,#fffaf0 0 42%,var(--tile-wash) 100%);color:var(--tp-ink);box-shadow:0 3px 0 var(--tile-edge),0 5px 9px #29322b0b,inset 0 0 0 3px #fffaf080;transition:transform 110ms ease,box-shadow 110ms ease}
#trigram-playground .tp-trigram[data-trigram="乾"]{--tile-ink:#365e95;--tile-wash:#e3eaf7;--tile-edge:#bdcbe1}
#trigram-playground .tp-trigram[data-trigram="兑"]{--tile-ink:#286c81;--tile-wash:#dff0f2;--tile-edge:#a9ced4}
#trigram-playground .tp-trigram[data-trigram="离"]{--tile-ink:#9b4031;--tile-wash:#f7e1da;--tile-edge:#dfb0a3}
#trigram-playground .tp-trigram[data-trigram="震"]{--tile-ink:#795c24;--tile-wash:#f6edce;--tile-edge:#d9c58e}
#trigram-playground .tp-trigram[data-trigram="巽"]{--tile-ink:#3f704d;--tile-wash:#e2efdf;--tile-edge:#b2cdb0}
#trigram-playground .tp-trigram[data-trigram="坎"]{--tile-ink:#4a4f80;--tile-wash:#e5e5f3;--tile-edge:#b8bad8}
#trigram-playground .tp-trigram[data-trigram="艮"]{--tile-ink:#326f65;--tile-wash:#dcefe6;--tile-edge:#a7ccbc}
#trigram-playground .tp-trigram[data-trigram="坤"]{--tile-ink:#87562f;--tile-wash:#f3e6d5;--tile-edge:#d6ba94}
#trigram-playground .tp-trigram::before{content:"";position:absolute;z-index:-1;top:4px;right:4px;width:47px;height:38px;background:var(--tile-edge);opacity:.45;pointer-events:none}
#trigram-playground .tp-trigram::after{content:"";position:absolute;bottom:4px;left:calc(50% - 12px);width:24px;height:2px;background:var(--tile-ink);opacity:.35;clip-path:polygon(0 30%,20% 0,60% 20%,100% 0,97% 85%,25% 100%,0 75%);pointer-events:none}
#trigram-playground .tp-trigram[data-trigram="乾"]::before{top:8px;right:8px;width:calc(100% - 16px);height:21px;border:1px solid var(--tile-edge);border-left:0;border-right:0;border-radius:50%;background:none}
#trigram-playground .tp-trigram[data-trigram="兑"]::before{top:7px;right:3px;background:repeating-radial-gradient(ellipse at 50% -70%,transparent 0 8px,var(--tile-edge) 9px 10px,transparent 11px 15px);border-radius:50%}
#trigram-playground .tp-trigram[data-trigram="离"]::before{top:2px;right:4px;width:31px;height:43px;clip-path:polygon(55% 0,60% 29%,86% 49%,100% 73%,79% 100%,21% 97%,0 72%,22% 39%,30% 64%,43% 40%)}
#trigram-playground .tp-trigram[data-trigram="震"]::before{top:4px;right:6px;width:29px;height:43px;clip-path:polygon(45% 0,97% 0,60% 36%,96% 36%,18% 100%,40% 55%,0 55%)}
#trigram-playground .tp-trigram[data-trigram="巽"]::before{top:6px;right:4px;background:repeating-linear-gradient(160deg,transparent 0 8px,var(--tile-edge) 9px 11px,transparent 12px 18px);border-radius:70% 15% 50% 20%;rotate:-8deg}
#trigram-playground .tp-trigram[data-trigram="坎"]::before{top:1px;right:7px;width:30px;height:43px;border-radius:65% 20% 58% 40%;rotate:-30deg;background:linear-gradient(135deg,var(--tile-edge),transparent)}
#trigram-playground .tp-trigram[data-trigram="艮"]::before{top:4px;right:3px;clip-path:polygon(0 100%,33% 22%,48% 55%,75% 0,100% 100%);background:linear-gradient(150deg,transparent,var(--tile-edge) 62%)}
#trigram-playground .tp-trigram[data-trigram="坤"]::before{top:7px;right:3px;border-radius:80% 35% 15% 10%;background:repeating-linear-gradient(0deg,var(--tile-edge) 0 2px,transparent 2px 8px);rotate:-6deg}
#trigram-playground .tp-trigram[aria-pressed="true"]{border-color:var(--tile-ink);box-shadow:0 3px 0 var(--tile-ink),0 5px 9px #29322b0b,inset 0 0 0 1px var(--tile-ink),inset 0 0 0 4px #fffaf080}
#trigram-playground .tp-trigram:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--tile-ink),inset 0 0 0 1px var(--tile-ink)}
#trigram-playground .tp-trigram-symbol{display:block;font:28px/1 serif;color:var(--tile-ink);margin-bottom:6px;text-shadow:0 1px 0 #fffaf0}
#trigram-playground .tp-trigram strong{font-size:11px;line-height:1.4;font-weight:500;overflow-wrap:anywhere;color:var(--tp-ink)}
#trigram-playground .tp-trigram small{font:10px/1.4 "Songti SC",STSong,serif;color:var(--tile-ink);margin-top:3px}
#trigram-playground .tp-trigram:disabled{opacity:.86}
#trigram-playground .tp-wind-note{margin:10px 0 0;font-size:10px;line-height:1.7;color:var(--tp-muted)}
#trigram-playground .tp-feedback{font-size:12px;line-height:1.8;min-height:44px;color:var(--tp-accent);margin:18px 0 0;overflow-wrap:anywhere}
#trigram-playground .tp-answer{display:flex;gap:16px;align-items:center;margin-top:13px;padding:16px;border:1px solid var(--tp-line);background:var(--tp-soft)}
#trigram-playground .tp-match-seal{display:grid;place-items:center;flex:0 0 35px;width:35px;height:39px;outline:1px solid var(--tp-accent);outline-offset:3px;color:var(--tp-paper);background:var(--tp-accent);box-shadow:inset 0 0 0 2px var(--tp-paper);font:27px/1 "Songti SC",STSong,serif;transform:rotate(-6deg);pointer-events:none}
#trigram-playground .tp-answer strong{display:block;font:17px/1.5 var(--serif,Georgia,serif);color:var(--tp-ink)}
#trigram-playground .tp-answer p{font-size:11px;line-height:1.8;color:var(--tp-muted);margin:6px 0 0}
#trigram-playground .tp-actions{display:flex;justify-content:space-between;align-items:center;gap:17px;margin-top:22px;padding-top:17px;border-top:1px solid var(--tp-line)}
#trigram-playground .tp-actions>p{font-size:11px;line-height:1.7;color:var(--tp-muted);margin:0;max-width:280px}
#trigram-playground .tp-next{flex-shrink:0;min-height:44px;padding:10px 17px;border:1px solid var(--tp-accent);border-radius:3px;background:var(--tp-accent);color:var(--tp-paper);font-size:12px;line-height:1.5}
#trigram-playground .tp-next:disabled{color:var(--tp-muted);border-color:var(--tp-line);background:transparent;opacity:1}
#trigram-playground .tp-footnote{margin:17px 0 0;font-size:10px;line-height:1.8;color:var(--tp-muted)}
#trigram-playground.tp-just-matched .tp-match-seal{animation:tp-impression 600ms cubic-bezier(.2,.65,.3,1) both}
@keyframes tp-impression{0%{opacity:0;transform:translateY(-9px) scale(1.45) rotate(-3deg)}55%{opacity:1;transform:translateY(1px) scale(.96) rotate(-6deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(-6deg)}}
@media(max-width:600px){#trigram-playground{padding:21px 16px;margin:28px 0}#trigram-playground .tp-heading h3{font-size:28px}#trigram-playground .tp-heading>p:last-child{font-size:12px}#trigram-playground .tp-progress{gap:7px;margin:20px 0}#trigram-playground .tp-progress li{gap:5px}#trigram-playground .tp-progress small{font-size:9px}#trigram-playground .tp-clue{padding:13px 14px}#trigram-playground .tp-clue h4{font-size:21px}#trigram-playground .tp-board{grid-template-columns:minmax(0,1.15fr) minmax(95px,.85fr);gap:14px}#trigram-playground .tp-slot{padding:10px 11px}#trigram-playground .tp-slot[aria-pressed="true"]{padding:9px 10px}#trigram-playground .tp-slot-position{font-size:11px}#trigram-playground .tp-slot-position small{font-size:9px}#trigram-playground .tp-slot-choice{font-size:12px;gap:6px}#trigram-playground .tp-slot-choice>b{font-size:24px;min-width:24px}#trigram-playground .tp-line{width:85px;height:5px;flex-basis:5px}#trigram-playground .tp-trigrams{gap:7px}#trigram-playground .tp-trigram{min-height:80px}#trigram-playground .tp-trigram-symbol{font-size:26px}#trigram-playground .tp-trigram strong{font-size:10px}#trigram-playground .tp-actions{align-items:flex-start;gap:12px}#trigram-playground .tp-actions>p{font-size:10px}#trigram-playground .tp-next{font-size:11px;padding:10px 13px}#trigram-playground .tp-answer{gap:13px;padding:14px}#trigram-playground .tp-answer strong{font-size:16px}}
@media(max-width:380px){#trigram-playground{padding:19px 12px}#trigram-playground .tp-progress small{display:none}#trigram-playground .tp-progress li{justify-content:center}#trigram-playground .tp-trigrams{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#trigram-playground .tp-trigram{min-height:76px;padding:8px 6px}#trigram-playground .tp-trigram-symbol{font-size:24px;margin-bottom:4px}#trigram-playground .tp-trigram strong{font-size:12px;line-height:1.25;white-space:nowrap;overflow-wrap:normal;word-break:normal}#trigram-playground .tp-trigram small{line-height:1.2;margin-top:2px}#trigram-playground .tp-board{gap:10px;grid-template-columns:minmax(0,1fr) 90px}#trigram-playground .tp-slot-choice{font-size:11px}#trigram-playground .tp-actions{flex-direction:column}#trigram-playground .tp-next{align-self:flex-end}}
@media(prefers-reduced-motion:reduce){#trigram-playground *,#trigram-playground.tp-just-matched .tp-match-seal{animation:none!important;transition:none!important}}