#q961-guide { --q-blue:#193e82; --q-ink:#17304b; --q-orange:#d97827; color:var(--q-ink); margin:2rem 0; line-height:1.8; }
#q961-guide *, #q961-guide *::before, #q961-guide *::after { box-sizing:border-box; }
#q961-guide [hidden] { display:none !important; }
#q961-guide .q961-panel { margin:1.4rem 0; padding:clamp(16px,3vw,28px); background:#fff; border:1px solid #b8c8dd; border-radius:18px; box-shadow:0 8px 24px #193e820b; }
#q961-guide h2 { font-size:clamp(1.35rem,3vw,1.8rem); line-height:1.45; margin:.3rem 0 1rem; }
#q961-guide h3 { font-size:1.18rem; line-height:1.5; margin:0 0 .6rem; }
#q961-guide p { margin:.6rem 0; }
#q961-guide .q961-kicker { color:var(--q-blue); font-weight:800; letter-spacing:.08em; font-size:.9rem; }
#q961-guide .q961-alert { padding:14px 18px; border-left:5px solid var(--q-orange); background:#fff3e7; border-radius:6px; }
#q961-guide .q961-fields { display:grid; grid-template-columns:1fr; gap:1rem; margin:1.2rem 0; }
#q961-guide label { display:block; font-weight:700; }
#q961-guide label > span { display:block; margin-bottom:6px; }
#q961-guide select, #q961-guide textarea { width:100%; max-width:100%; border:1px solid #687e9d; border-radius:8px; padding:10px; font:inherit; font-size:1rem; color:var(--q-ink); background:#fff; min-height:48px; }
#q961-guide textarea { min-height:160px; resize:vertical; }
#q961-guide .q961-result { border:2px solid var(--q-blue); border-radius:12px; padding:18px; background:#f2f6fc; }
#q961-guide .q961-result[data-danger="true"] { border-color:#a54912; background:#fff3e7; }
#q961-guide .q961-tag { display:inline-block; border-bottom:3px solid var(--q-orange); font-weight:700; margin-bottom:10px; }
#q961-guide .q961-actions { display:flex; flex-wrap:wrap; gap:10px; margin:1rem 0; }
#q961-guide button, #q961-guide .q961-link { display:inline-flex; justify-content:center; align-items:center; min-height:46px; min-width:46px; border:1px solid var(--q-blue); border-radius:8px; padding:8px 14px; color:var(--q-blue); background:#fff; font:inherit; font-weight:700; cursor:pointer; text-decoration:none; line-height:1.5; }
#q961-guide .q961-primary { background:var(--q-blue); color:#fff; }
#q961-guide button:disabled { color:#5b6676; background:#edf0f4; border-color:#8796ab; cursor:default; }
#q961-guide :is(button,a,input,select,textarea,summary):focus-visible { outline:3px solid #9a4812; outline-offset:4px; }
#q961-guide details { margin:1rem 0; border:1px solid #b8c8dd; padding:14px; border-radius:10px; }
#q961-guide summary { cursor:pointer; font-weight:700; min-height:44px; }
#q961-guide .q961-static { list-style:none; padding:0; }
#q961-guide .q961-static > li { padding:12px 0; border-bottom:1px solid #d5deeb; }
#q961-guide .q961-static > li:last-child { border:0; }
#q961-guide .q961-note { font-size:.95rem; color:#405775; }
#q961-guide figure { margin:1rem 0; }
#q961-guide .q961-figure { border-radius:14px; border:1px solid #b8c8dd; overflow:hidden; background:linear-gradient(140deg,#f5f8fd,#e8eff8); }
#q961-guide svg { display:block; width:100%; height:auto; max-width:100%; }
#q961-guide svg text { font-family:system-ui,"Microsoft JhengHei",sans-serif; fill:#17304b; font-size:23px; font-weight:700; }
#q961-guide .q961-layer { opacity:.64; transition:opacity .2s; }
#q961-guide .q961-layer.is-active { opacity:1; filter:drop-shadow(0 2px 2px #193e8240); }
#q961-guide .q961-layer.is-active .q961-outline { stroke:#193e82; stroke-width:4; }
#q961-guide .q961-water, #q961-guide .q961-injection { opacity:0; fill:none; stroke-linecap:round; stroke-linejoin:round; }
#q961-guide svg[data-step="1"] .q961-water-upper, #q961-guide svg[data-step="2"] .q961-water, #q961-guide svg[data-step="3"] .q961-water, #q961-guide svg[data-step="4"] .q961-water { opacity:1; }
#q961-guide svg[data-step="3"] .q961-injection, #q961-guide svg[data-step="4"] .q961-injection { opacity:1; }
#q961-guide svg[data-step="4"] .q961-water-lower { opacity:.22; }
#q961-guide svg[data-playing="true"] .q961-water { stroke-dasharray:9 8; animation:q961-flow 1s linear infinite; }
#q961-guide .q961-legend { display:flex; gap:16px; flex-wrap:wrap; padding:10px 14px; background:white; font-size:.9rem; }
#q961-guide .q961-swatch { display:inline-block; width:25px; border-top:4px solid #193e82; margin-right:6px; vertical-align:middle; }
#q961-guide .q961-swatch.orange { border-color:#a94f12; border-top-style:dashed; }
#q961-guide .q961-range { width:100%; accent-color:var(--q-blue); height:44px; margin:0; cursor:pointer; }
#q961-guide .q961-layer-readout, #q961-guide .q961-caption { padding:14px 16px; background:#edf3fb; border-radius:10px; margin:.7rem 0; }
#q961-guide .q961-caption { min-height:150px; border-left:4px solid var(--q-orange); }
#q961-guide .q961-caption strong { display:block; }
#q961-guide .q961-story { padding-left:1.5rem; }
#q961-guide .q961-story li { padding:7px 0; }
#q961-guide .q961-quiz label { display:flex; align-items:flex-start; gap:9px; font-weight:400; padding:8px 0; }
#q961-guide .q961-quiz input { width:22px; height:22px; flex:none; accent-color:var(--q-blue); margin-top:4px; }
@keyframes q961-flow { to { stroke-dashoffset:-34; } }
@media(prefers-reduced-motion:reduce) { #q961-guide * { animation:none !important; transition:none !important; } }
@media(max-width:420px) { #q961-guide .q961-panel { padding:14px; } #q961-guide .q961-result { padding:12px; } #q961-guide .q961-actions > * { flex:1 1 auto; } }
@media print { #q961-guide [data-interactive], #q961-guide .q961-actions { display:none!important; } #q961-guide details > * { display:block!important; } #q961-guide .q961-panel { break-inside:avoid; box-shadow:none; } }