.xq-flow{--ic:52px;counter-reset:xq-flow;gap:28px;margin:20px 0 48px;padding:0;list-style:none;display:grid;position:relative}.xq-flow li:not(:last-child):after{content:"";left:calc(var(--ic) / 2);top:var(--ic);background:var(--warm);opacity:.75;width:1px;position:absolute;bottom:-28px}.xq-flow li{counter-increment:xq-flow;grid-template-columns:var(--ic) 1fr;align-content:start;column-gap:18px;display:grid;position:relative}.xq-flow .ic{width:var(--ic);height:var(--ic);z-index:1;background:var(--background);border:1.5px solid var(--tone);color:var(--tone-ink);box-shadow:0 0 0 6px var(--background);border-radius:50%;grid-row:span 3;place-items:center;display:grid;position:relative}.xq-flow .ic svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;width:24px;height:24px}.xq-flow .nowrap{white-space:nowrap;color:inherit;font-size:inherit}.xq-flow small:before{content:"第 " counter(xq-flow) " 步"}.xq-flow small{letter-spacing:.14em;color:var(--tone-ink);font-size:12px}.xq-flow strong{color:var(--ink);letter-spacing:.04em;font-size:17px;line-height:1.5}.xq-flow span{color:var(--subtle);text-wrap:pretty;font-size:14px;line-height:1.7}.xq-flow .tone-prep,.xq-flow-legend .tone-prep{--tone:var(--accent);--tone-ink:var(--accent)}.xq-flow .tone-draw,.xq-flow-legend .tone-draw{--tone:#5d9aa2;--tone-ink:#3d727a}.xq-flow .tone-read,.xq-flow-legend .tone-read{--tone:var(--warm);--tone-ink:#8a6a2c}.prose .xq-flow-legend,.xq-flow-legend{padding:0;list-style:none}.xq-flow-legend{letter-spacing:.08em;color:var(--subtle);flex-wrap:wrap;gap:6px 18px;margin:4px 0 0;font-size:13px;display:flex}.xq-flow-legend li{margin:0;padding:0;list-style:none}.xq-flow-legend li::marker{content:none}.xq-flow-legend li:before{content:"";background:var(--tone);border-radius:50%;width:8px;height:8px;margin-right:6px;display:inline-block}@media (min-width:900px){.xq-flow{grid-template-columns:repeat(6,1fr);gap:0 16px}.xq-flow li:not(:last-child):after{content:none}.xq-flow:before{content:"";left:8.33333%;right:8.33333%;top:calc(var(--ic) / 2);background:var(--warm);opacity:.75;height:1px;position:absolute}.xq-flow li{text-align:center;grid-template-columns:minmax(0,1fr);row-gap:4px}.xq-flow .ic{grid-row:auto;justify-self:center;margin-bottom:14px}.xq-flow span{text-wrap:balance;max-width:15em;margin-inline:auto}}.xq-ask,.xq-pick,.xq-done{border-top:4px solid var(--ink);margin-top:24px;padding-top:20px}.xq-chips{border:0;margin:0 0 16px;padding:0}.xq-chips label{margin:0 8px 8px 0;display:inline-block}.xq-chips input{opacity:0;pointer-events:none;position:absolute}.xq-chips span{border:2px solid var(--line);cursor:pointer;border-radius:4px;align-items:center;min-height:40px;padding:0 14px;font-weight:700;display:inline-flex}.xq-chips input:checked+span{border-color:var(--ink);background:var(--ink);color:#fff}.xq-chips input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}.xq-sentence{flex-wrap:wrap;align-items:baseline;gap:6px;font-size:17px;font-weight:700;display:flex}.xq-sentence textarea{resize:vertical;min-width:0;line-height:1.7;font:inherit;border:1px solid var(--line);border-bottom:2px solid var(--ink);color:var(--accent-strong);background:0 0;border-radius:4px;flex:100%;padding:10px 12px;font-size:16px;font-weight:400}.xq-sentence textarea:focus{border-bottom-color:var(--accent);outline:none}.xq-ask .hint{color:var(--subtle);margin-top:10px;font-size:14px;line-height:1.8}.xq-ask .hint p{margin:0 0 4px}.xq-ask .hint+.field-label{margin-top:16px;display:block}.xq-ask .xq-count{text-align:right;color:var(--subtle);margin:4px 0 0;font-size:13px}.xq-ask .hint strong{color:var(--ink)}.xq-check{color:var(--subtle);align-items:flex-start;gap:8px;margin-top:16px;font-size:14px;display:flex}.xq-deck{grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:10px;margin-top:16px;display:grid}.xq-piece{aspect-ratio:1;cursor:pointer;background:radial-gradient(circle at 35% 30%, #2d7a8d, var(--accent-deep) 58%, #0f3e4a);border:0;border-radius:50%;transition:transform .2s;box-shadow:inset 0 -3px #00000040,0 3px 6px #18596947}.xq-piece:hover:not(:disabled){transform:translateY(-4px)}.xq-piece.chosen{box-shadow:0 0 0 3px var(--warm), 0 0 18px 4px #e8b65a99}.xq-piece:disabled{cursor:default}.xq-done .result,.xq-draw .result{border-top:4px solid var(--ink);margin:16px 0;padding:0;list-style:none}.xq-done .result li,.xq-draw .result li{border-bottom:1px solid var(--line);grid-template-columns:2.4em 1fr auto;align-items:center;gap:8px;padding:10px 0;display:grid}.xq-done .result .pos,.xq-draw .result .pos{font-family:var(--font-display);color:var(--accent);font-size:20px;font-weight:900}.xq-done .result .mean,.xq-draw .result .mean{color:var(--subtle);font-size:14px}.xq-done .result .pc,.xq-draw .result .pc{font-family:BiauKai,Kaiti TC,STKaiti,DFKai-SB,serif;font-size:26px;font-weight:700}.xq-draws-table{border-collapse:collapse;width:100%;margin-top:16px}.xq-draws-table th,.xq-draws-table td{text-align:left;border-bottom:1px solid var(--line);padding:10px 8px;font-size:15px}.xq-draws-table th{letter-spacing:.08em;color:var(--subtle);font-size:13px}.result.pieces-only li{grid-template-columns:2.4em auto}.result.pieces-only .seq{font-family:var(--font-display);color:var(--subtle);font-size:18px;font-weight:900}:root{--night:#0a2a33;--ivory:#f7f0e3;--ivory-edge:#e2d4bb;--red-char:#b3362f;--font-piece:"BiauKai", "Kaiti TC", "STKaiti", "DFKai-SB", "Noto Serif TC", serif}.ritual-bg{z-index:55;background:radial-gradient(circle at 50% 40%, #1d6679 0%, #123f4b 45%, var(--night) 100%);opacity:0;pointer-events:none;transition:opacity 1.4s;position:fixed;inset:0}body.ritual .ritual-bg{opacity:1;pointer-events:auto}.hud,.ritual-top{z-index:70;color:var(--soft);opacity:0;pointer-events:none;transition:opacity .8s;position:fixed;left:0;right:0}body.ritual .hud,body.ritual .ritual-top{opacity:1;pointer-events:auto}.ritual-top{padding:calc(12px + env(safe-area-inset-top)) 16px 12px;justify-content:space-between;display:flex;top:0}.hud{text-align:center;padding:12px 16px calc(20px + env(safe-area-inset-bottom));bottom:0}.hud-step{letter-spacing:.16em;color:#9fcfd9;margin:0;font-size:12px;font-weight:700}.hud-status{font-family:var(--font-display);color:var(--ivory);margin:2px 0 10px;font-size:clamp(17px,2.4vw,20px);font-weight:900}.hud-actions{justify-content:center;align-items:center;gap:12px;min-height:44px;display:flex}.ghost{min-height:40px;color:var(--soft);font:inherit;cursor:pointer;background:0 0;border:1.5px solid #e2f1f48c;border-radius:4px;padding:0 16px;font-size:14px;font-weight:700}.ghost:hover,.ghost:focus-visible{border-color:var(--soft);background:#e2f1f41f;outline:none}.ghost[aria-pressed=false]{opacity:.6}.hud-count{font-family:var(--font-display);color:var(--warm);font-size:22px;font-weight:900}.stage{aspect-ratio:1;background:var(--soft);touch-action:manipulation;--p:48px;--k:1.45;width:100%;transition:background-color 1s;position:relative;overflow:hidden}body.ritual .stage{z-index:60;background:0 0;width:min(100vw,100svh - 220px,720px);position:fixed;top:calc(50% - 40px);left:50%;overflow:visible;transform:translate(-50%,-50%)}.layer{position:absolute;inset:0}.layer[data-ring-outer],.layer[data-ring-inner],.board{pointer-events:none}.piece{pointer-events:auto}.stone{pointer-events:none;place-items:center;display:grid}.stone-core{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none;background:0 0;border:0;border-radius:50%;width:46%;padding:0}.stone-core:not(:disabled){pointer-events:auto;cursor:pointer}.stone-core:focus-visible{outline-offset:10px;outline:2px dashed #e2f1f480}.stone-core svg{width:100%;display:block;overflow:visible}.halo{fill:#fff;opacity:.55}.stone-body{fill:var(--accent-deep);transition:fill 1s}body.ritual .stone-body{fill:#d6ebef}body.ritual .halo{opacity:.14}.hold-ring{fill:none;stroke:var(--warm);stroke-width:6px;stroke-dasharray:1;stroke-dashoffset:1px}.breath-label{text-align:center;font-family:var(--font-display);letter-spacing:.2em;color:var(--accent-deep);pointer-events:none;font-size:clamp(22px,4vw,30px);font-weight:900;position:absolute;top:84%;left:0;right:0}body.ritual .breath-label{color:var(--ivory)}.breath-label small{letter-spacing:.1em;color:#9fcfd9;font-size:13px;font-weight:700;display:block}.prayer{text-align:center;pointer-events:none;width:min(92vw,760px);position:absolute;bottom:56%;left:50%;transform:translate(-50%)}.prayer .nb{white-space:nowrap}.prayer p{text-wrap:balance;color:var(--ivory);letter-spacing:.06em;margin:0;font-size:clamp(14px,min(2.6vw,2.3svh),24px);font-weight:700;line-height:1.75}.piece{width:var(--p);height:var(--p);perspective:600px;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:50%;padding:0;transition:transform .25s,opacity .4s;position:absolute}.piece:focus-visible{outline:3px solid var(--warm);outline-offset:3px}.inner{transform-style:preserve-3d;border-radius:50%;transition:transform .8s cubic-bezier(.2,.7,.2,1);position:absolute;inset:0}.face{backface-visibility:hidden;border-radius:50%;place-items:center;display:grid;position:absolute;inset:0}.back{background:radial-gradient(circle at 35% 30%, #2d7a8d, var(--accent-deep) 58%, #0f3e4a);box-shadow:inset 0 -3px #00000040,0 3px 6px #18596947}body.ritual .back{box-shadow:0 0 0 1.5px #f7f0e373,inset 0 -3px #0000004d,0 4px 10px #00000059}.back svg{width:58%}.front{background:radial-gradient(circle at 35% 30%, #fffaf1, var(--ivory) 55%, var(--ivory-edge));transform:rotateY(180deg);box-shadow:inset 0 -3px #785a3233,0 3px 8px #252d2f33}.front:before{content:"";opacity:.65;border:1.5px solid;border-radius:50%;position:absolute;inset:9%}.front.red{color:var(--red-char)}.front.black{color:var(--ink)}.char{font-family:var(--font-piece);font-weight:700;font-size:calc(var(--p) * .54);line-height:1;-webkit-mask-image:linear-gradient(115deg,#000 45%,#0000 55%);mask-image:linear-gradient(115deg,#000 45%,#0000 55%);-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:260% 100%;mask-size:260% 100%}.flipped .inner{transform:rotateY(180deg)}.flipped .char{animation:.9s ease-out .35s both brush}@keyframes brush{0%{filter:blur(3px);opacity:.2;-webkit-mask-position:100% 0;mask-position:100% 0}to{filter:none;opacity:1;-webkit-mask-position:0 0;mask-position:0 0}}@media (hover:hover){.picking .piece:not(.chosen):hover{transform:translateY(-5px)}}.piece.chosen{transform:translateY(-6px)scale(1.08)}.piece.chosen .back{box-shadow:0 0 0 3px var(--warm), 0 0 18px 4px #e8b65a99}.piece.placed{transform:scale(var(--k));cursor:default}.links{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.links line{stroke:var(--accent);stroke-width:3px;opacity:.7;stroke-dasharray:1;stroke-dashoffset:1px;vector-effect:non-scaling-stroke}body.ritual .links line{stroke:#7cc8d6}.slot-mark{width:calc(var(--p) * var(--k));height:calc(var(--p) * var(--k));border:1.5px dashed var(--accent);opacity:.55;border-radius:50%;position:absolute;transform:translate(-50%,-50%)}body.ritual .slot-mark{border-color:var(--soft)}.ripple{width:calc(var(--p) * var(--k));height:calc(var(--p) * var(--k));border:2px solid var(--accent);pointer-events:none;border-radius:50%;position:absolute;transform:translate(-50%,-50%)}body.ritual .ripple{border-color:var(--soft)}.piece.self:after{content:"";box-shadow:0 0 0 2.5px var(--warm), 0 0 22px 6px #e8b65a8c;border-radius:50%;animation:1.4s ease-in-out 2 warm-glow;position:absolute;inset:-5px}@keyframes warm-glow{0%,to{transform:scale(1)}50%{transform:scale(1.14)}}@media (prefers-reduced-motion:reduce){.piece,.inner,.steps li,.ritual-bg,.hud,.ritual-top,.stage,.stone-body{transition:none}.flipped .char,.piece.self:after{animation:none}}.xq-reading p{white-space:pre-wrap;line-height:1.9}
