/* Only the presentation changes. The nine-palace data stays server rendered. */
.qma-panel{border:1px solid #d8c5a3;border-radius:16px;background:linear-gradient(115deg,#f7f2ff,#fffaf0);padding:19px 22px;margin:0 0 20px;scroll-margin-top:90px;box-shadow:0 7px 22px #4a2b7410}
.qma-top,.qma-title,.qma-actions{display:flex;align-items:center;gap:14px}.qma-top{justify-content:space-between;flex-wrap:wrap}.qma-title>div{display:flex;align-items:baseline;gap:13px}.qma-kicker{font-size:12px;letter-spacing:2px;color:#857053}.qma-status{font-size:19px;color:#59368d;font-weight:650}.qma-seal{display:grid;place-items:center;width:39px;height:39px;flex:none;border:1px solid #b99658;border-radius:11px;color:#9e762d;font-family:serif;font-size:23px;background:#fffaf1}.qma-actions{gap:12px;flex-wrap:wrap}.qma-actions button{min-height:38px;padding:7px 13px;border:1px solid #c8afd9;border-radius:9px;background:#fff;color:#65408f;font-size:13px;font-weight:600}.qma-actions button:hover{background:#f0e8fc}.qma-actions .qma-skip{border-color:#bb975c;color:#816330}.qma-preference{display:flex;align-items:center;gap:6px;color:#786a81;font-size:12px;cursor:pointer}.qma-preference input{accent-color:#7650aa;width:15px;height:15px}.qimen-wrap .qma-description{font-size:13px;color:#7b6b88;line-height:1.65;margin:11px 0 14px;min-height:22px;overflow-wrap:anywhere}.qma-steps{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));list-style:none;padding:0;margin:0;gap:8px}.qma-steps li{display:flex;align-items:center;gap:7px;min-width:0;color:#8f839b;font-size:12px;white-space:nowrap;border-top:2px solid #e4dbea;padding-top:10px;transition:color .2s,border-color .2s}.qma-steps li>span{font-size:10px;font-variant-numeric:tabular-nums;letter-spacing:1px;color:#a294af}.qma-steps li.is-current{border-color:#ba9755;color:#75521d;font-weight:700}.qma-steps li.is-current>span{color:#9b742e}.qma-steps li.is-done{border-color:#a287bb;color:#72538f}.qma-playing .qm-cell{visibility:hidden;opacity:0;transform:translateY(8px);transition:none;background:linear-gradient(150deg,#fff,#faf7ff);border-color:#d5c4e5}.qma-playing .qm-cell--center{background:radial-gradient(ellipse at center,#f7edda,#fffaf2)}.qma-playing .qm-cell.qma-cell-visible{visibility:visible;opacity:1;transform:translateY(0);transition:opacity .3s ease,transform .3s ease}.qma-playing .qm-cell.qma-cell-current{border-color:#bb9652;box-shadow:0 0 0 1px #bb96523b,0 4px 18px #b4914715}.qma-playing .qm-summary{opacity:.3;transition:opacity .3s}.qma-arriving #qimen-result .qm-cell{visibility:hidden;opacity:0}
@media(min-width:601px) and (max-width:950px){.qma-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}

@media(max-width:600px){.qma-panel{padding:14px 12px;border-radius:12px;margin-bottom:15px;scroll-margin-top:76px}.qma-top{gap:10px}.qma-title{gap:9px}.qma-seal{width:32px;height:32px;font-size:20px;border-radius:8px}.qma-title>div{gap:9px}.qma-status{font-size:16px}.qma-kicker{font-size:10px;letter-spacing:1px}.qma-actions{width:100%;justify-content:space-between;gap:7px}.qma-actions button{font-size:12px;padding:5px 10px;min-height:34px}.qma-preference{font-size:11px}.qimen-wrap .qma-description{font-size:11px;margin:9px 0 10px;min-height:36px}.qma-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 10px}.qma-steps li{font-size:11px;gap:5px;padding-top:5px}.qma-steps li>span{font-size:9px}}
@media(prefers-reduced-motion:reduce){.qma-panel *,.qma-playing .qm-cell{transition:none!important;transform:none!important}.qma-arriving #qimen-result .qm-cell{visibility:visible;opacity:1}}

/* Exactly two gentle full-board flashes after the nine one-second slots. */
.qma-complete-flash{animation:qma-completion-flash 1s linear 1}
@keyframes qma-completion-flash{0%,50%,100%{opacity:1}25%,75%{opacity:.45}}
@media(prefers-reduced-motion:reduce){.qma-complete-flash{animation:none!important}}
/* Recorded calculation walkthrough. Keep the final chart server-rendered. */
.qma-panel [hidden]{display:none!important}
.qma-calculating .qm-board-layout{display:none!important}
.qma-step-button{border:0;background:transparent;color:inherit;font:inherit;display:flex;gap:6px;align-items:center;padding:0;min-height:30px;cursor:pointer;text-align:left;width:100%}
.qma-step-button>span{font-size:10px;opacity:.65}
.qma-panel button:focus-visible{outline:2px solid #9b7639;outline-offset:3px}
.qma-panel button:disabled{opacity:.45;cursor:default}
.qma-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,410px);gap:26px;margin-top:22px;padding:24px;border:1px solid #e8dbcb;border-radius:14px;background:#fffdf9;align-items:center}
.qma-reason,.qma-diagram{min-width:0}
.qma-phase{font-size:12px;color:#9a783d;letter-spacing:1px}
.qma-workspace .qma-work-title{margin:6px 0 16px;font-family:serif;font-size:25px;color:#4b2d73}
.qma-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0 0 18px}
.qma-facts>div{padding:10px 13px;border:1px solid #ede3d4;background:#fbf7f0;border-radius:9px;min-width:0}
.qma-facts dt{font-size:12px;color:#8c7a65;margin-bottom:5px}
.qma-facts dd{font-size:17px;color:#513c29;margin:0;font-weight:650;overflow-wrap:anywhere}
.qma-explanation{display:grid;grid-template-columns:32px minmax(0,1fr);gap:9px 10px;align-items:start}
.qma-explanation small{font-size:11px;color:#8f6f3b;background:#f3eadb;padding:3px 4px;text-align:center;border-radius:4px}
.qma-workspace .qma-explanation p{font-size:14px;line-height:1.65;margin:0;color:#675c6e;overflow-wrap:anywhere}
.qma-workspace .qma-explanation .qma-outcome{color:#5a367e;font-weight:650}
.qma-diagram-head{display:flex;justify-content:space-between;gap:8px;margin-bottom:10px;font-size:12px;color:#8a7a67}
.qma-diagram-head strong{font-size:13px;color:#765391}
.qma-map{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;position:relative;isolation:isolate;aspect-ratio:1}
.qma-map-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #e6dccc;border-radius:10px;background:#f9f5ee;min-width:0;padding:5px;text-align:center;transition:background .18s,border-color .18s}
.qma-map-cell[data-gong="5"]{background:#f3ead8;border-style:dashed}
.qma-map-name{font-size:11px;color:#9c8c78;z-index:2}
.qma-map-symbol{font-family:serif;font-size:27px;line-height:1.35;color:#59347a;min-height:36px;z-index:2}
.qma-map-sub{font-size:10px;color:#98866e;line-height:1.4;min-height:14px;z-index:2}
.qma-map-cell.is-highlight{border-color:#bd9246;box-shadow:inset 0 0 0 1px #bd924636;background:#fff1d8}
.qma-map-cell.is-filled{background:#fffaf0}
.qma-path{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
.qma-route{stroke:#c29a50;stroke-width:1.4;fill:none;stroke-dasharray:4 3;opacity:.62}
.qma-path circle{fill:#a77828;stroke:#ffefc6;stroke-width:2}
.qma-moving-symbol{position:absolute;transform:translate(-50%,-50%);z-index:3;background:#5f3d85;color:#fff8e9;border:1px solid #d5b47a;box-shadow:0 3px 12px #3d205633;border-radius:7px;padding:5px 7px;font-size:13px;white-space:nowrap;pointer-events:none}
.qma-workspace .qma-map-note{margin:10px 0 0;min-height:32px;font-size:11px;line-height:1.5;color:#99856b}
.qma-progress{height:3px;border-radius:3px;margin-top:17px;background:#e6dce9;overflow:hidden}
.qma-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#7854a4,#c8a35c)}
@media(max-width:760px){.qma-workspace{grid-template-columns:1fr;padding:14px;gap:18px}.qma-diagram{width:100%;max-width:360px;margin:auto}.qma-workspace .qma-work-title{font-size:21px;margin-bottom:12px}.qma-facts dd{font-size:15px}.qma-workspace .qma-explanation p{font-size:13px}.qma-top{align-items:flex-start}.qma-actions{justify-content:flex-start}.qma-preference{margin-left:auto}.qma-map-symbol{font-size:25px}.qma-steps{grid-template-columns:repeat(3,minmax(0,1fr))}.qma-step-button{white-space:normal}.qma-map-sub{font-size:10px}}
@media(prefers-reduced-motion:reduce){.qma-map-cell{transition:none}.qma-moving-symbol{display:none}}
/* On phones, keep the animated palace map before the longer explanations. */
@media(max-width:760px){.qma-diagram{grid-row:1}.qma-reason{grid-row:2}.qma-workspace{padding:12px}}