.sd{--sd-ink:#2a2622;--sd-muted:#6b6258;--sd-paper:#fbf7f0;--sd-mark:#1d7566;--sd-gold:#c08a2b;--sd-gap:8px;--play-ink:var(--sd-ink);--play-icon-bg:#fffcf6db;border-radius:var(--radius-xl);isolation:isolate;-webkit-tap-highlight-color:transparent;background:radial-gradient(90% 70% at 50% 0,#fffdf8 0%,#fffdf800 70%),linear-gradient(#f4ede2,#ebe1d2);border:1px solid #e4d9c8;position:relative;overflow:hidden}.sd-stage{outline:none}.sd-boards{gap:var(--sd-gap);justify-content:center;align-items:center;display:flex}.sd-board{aspect-ratio:4/3;background:var(--sd-paper);border-radius:10px;flex:none;position:relative;overflow:hidden;box-shadow:0 0 0 1px #3c2d1e1f,0 6px 18px #3c2d1e24}.sd-board__pic,.sd-pic,.sd-marks{width:100%;height:100%;display:block;position:absolute;inset:0}.sd-marks{pointer-events:none;overflow:visible}.sd-ring{fill:none}.sd-ring__halo{stroke:#ffffffd9;stroke-width:7px}.sd-ring__line{stroke:var(--sd-mark);stroke-width:3.2px;stroke-linecap:round}.sd-hintmark{fill:#fff4d638;stroke:var(--sd-gold);stroke-width:2.4px;stroke-dasharray:7 7;stroke-linecap:round}.sd-miss{stroke:#8a5a4a;stroke-width:3px;stroke-linecap:round;opacity:0}.sd-cursor{fill:none;stroke:#ff9f1c;stroke-width:3px;display:none}.sd[data-play-mode=on] .sd-stage:focus-visible .sd-cursor{display:inline}.sd[data-play-mode=on] .sd-stage:focus-visible .sd-board{box-shadow:0 0 0 3px var(--color-focus), 0 6px 18px #3c2d1e24}@media (prefers-reduced-motion:no-preference){.sd-ring__line{stroke-dasharray:1;stroke-dashoffset:0;animation:.42s cubic-bezier(.3,.7,.3,1) backwards sd-draw}.sd-ring__halo{animation:.3s ease-out backwards sd-fade}.sd-hintmark{animation:1.6s ease-in-out 2 sd-hint}.sd-miss{animation:.7s ease-out sd-miss}}@media (prefers-reduced-motion:reduce){.sd-miss{opacity:.8}}@keyframes sd-draw{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}@keyframes sd-fade{0%{opacity:0}to{opacity:1}}@keyframes sd-hint{0%,to{opacity:1}50%{opacity:.45}}@keyframes sd-miss{0%{opacity:0}15%{opacity:.85}to{opacity:0}}.sd:not([data-play-mode]){padding:var(--space-4) var(--space-4) 0}.sd:not([data-play-mode]) .sd-board{flex:1 1 0;min-width:0}.sd:not([data-play-mode]) .sd-stage{cursor:pointer}.sd:not([data-play-mode]) :is(.sd-status,.sd-foot,.sd-keyhint,.sd-result,.sd-hint-note){display:none}.sd-entry{justify-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4) var(--space-5);display:grid}.sd-entry__note{color:var(--sd-muted);margin:0;font-weight:700}.sd[data-play-mode=on] .sd-entry{display:none}.sd-level{margin:0 0 var(--space-2);border:0;flex-wrap:wrap;justify-content:center;gap:6px;min-inline-size:0;padding:0;display:flex}.sd-level legend{text-align:center;width:100%;color:var(--sd-muted);margin-bottom:4px;padding:0;font-size:.85rem;font-weight:700}.sd-level label{position:relative}.sd-level input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.sd-level span{text-align:center;min-width:5.2em;min-height:44px;color:var(--sd-ink);background:#fff;border:2px solid #d8ccba;border-radius:999px;padding:10px 14px;font-weight:800;line-height:1.2;display:block}.sd-level input:checked+span{border-color:var(--sd-mark);background:var(--sd-mark);color:#fff}.sd-level input:focus-visible+span{outline:3px solid var(--sd-gold);outline-offset:2px}.sd-cta{min-width:160px;min-height:60px;padding-inline:var(--space-6);border-radius:var(--radius-full);background:var(--color-primary);color:var(--on-primary);font:inherit;letter-spacing:.02em;cursor:pointer;touch-action:manipulation;box-shadow:0 5px 0 var(--color-primary-strong);border:0;font-size:1.25rem;font-weight:800;transition:translate 60ms,box-shadow 60ms}.sd-cta:active{box-shadow:0 2px 0 var(--color-primary-strong);translate:0 3px}.sd-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}.sd[data-play-mode=on]{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border:0;border-radius:0;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);animation:.28s ease-out sd-in;display:grid}@keyframes sd-in{0%{opacity:0}to{opacity:1}}.sd[data-play-mode=on] .play-bar{grid-row:1}.sd[data-play-mode=on] .sd-stage{min-width:0;min-height:0;padding:0 var(--space-2);touch-action:manipulation;grid-row:2;place-items:center;display:grid;overflow:hidden}.sd[data-play-mode=on] .sd-boards{width:100%;height:100%}.sd[data-play-mode=on][data-layout=col] .sd-boards{flex-direction:column}.sd[data-play-mode=on] .sd-board{width:var(--sd-pw,300px);cursor:crosshair}.sd-status{align-items:center;gap:var(--space-3);color:var(--sd-ink);font-variant-numeric:tabular-nums;white-space:nowrap;margin:0;font-size:1.05rem;font-weight:800;display:flex}.sd-status__time{min-width:2.6em;color:var(--sd-muted);font-weight:700}.sd[data-play-mode=on] .sd-foot{justify-content:center;align-items:center;gap:var(--space-5);padding:var(--space-2) var(--space-4) var(--space-3);grid-row:3;display:flex}.sd-pips{gap:8px;margin:0;padding:0;list-style:none;display:flex}.sd-pips li{background:0 0;border:2px solid #b9ab97;border-radius:50%;width:14px;height:14px;transition:background-color .2s,border-color .2s}.sd-pips li[data-on]{border-color:var(--sd-mark);background:var(--sd-mark);box-shadow:inset 0 0 0 2px #fff}.sd-hint{align-items:center;gap:var(--space-2);min-height:var(--tap-min);padding-inline:var(--space-4) var(--space-5);border-radius:var(--radius-full);color:var(--sd-ink);font:inherit;white-space:nowrap;cursor:pointer;touch-action:manipulation;background:#fffdf8;border:2px solid #cdbfa9;flex:none;font-weight:800;display:inline-flex}.sd-hint:active{background:#f3ebde}.sd-hint:disabled{opacity:.45;cursor:default}.sd[data-play-mode=on] .sd-hint-note:not([hidden]){z-index:2;left:50%;bottom:calc(env(safe-area-inset-bottom) + 72px);padding:4px var(--space-4);border-radius:var(--radius-full);color:#7a5716;white-space:nowrap;pointer-events:none;background:#fff8e6f2;margin:0;font-size:.95rem;font-weight:700;position:absolute;translate:-50%;box-shadow:0 1px 6px #3c2d1e24}.sd-keyhint{display:none}@media (hover:hover) and (pointer:fine){.sd[data-play-mode=on][data-phase=playing] .sd-keyhint{right:calc(env(safe-area-inset-right) + var(--space-4));bottom:calc(env(safe-area-inset-bottom) + var(--space-4));color:var(--sd-muted);margin:0;font-size:.8rem;display:block;position:absolute}}.sd[data-play-mode=on] .sd-result:not([hidden]){z-index:3;justify-items:center;gap:var(--space-1);width:min(calc(100% - 2 * var(--space-4)), 340px);padding:var(--space-4) var(--space-5) var(--space-5);border-radius:var(--radius-lg);text-align:center;background:#fffcf6f5;animation:.34s cubic-bezier(.2,.8,.3,1) sd-rise;display:grid;position:absolute;top:50%;left:50%;translate:-50% -50%;box-shadow:0 12px 36px #3c2d1e3d}@keyframes sd-rise{0%{opacity:0;translate:-50% calc(14px - 50%)}to{opacity:1;translate:-50% -50%}}.sd-result p{margin:0}.sd-result__mark{color:var(--sd-mark);font-size:2rem;font-weight:800;line-height:1}.sd-result__title{color:var(--sd-ink);font-size:1.7rem;font-weight:800}.sd-result__scene{color:var(--sd-muted);font-weight:600}.sd-result__stats{gap:var(--space-6);margin:var(--space-2) 0 var(--space-4);display:flex}.sd-result__stats div{justify-items:center;display:grid}.sd-result__stats dt{color:var(--sd-muted);font-size:.85rem;font-weight:700}.sd-result__stats dd{font-variant-numeric:tabular-nums;color:var(--sd-ink);margin:0;font-size:1.6rem;font-weight:800}.sd[data-phase=complete] .sd-foot{visibility:hidden}.sd-tools{display:none}.sd[data-play-mode=on] .sd-tools{z-index:2;top:calc(env(safe-area-inset-top) + var(--space-2));left:calc(env(safe-area-inset-left) + 68px);right:calc(env(safe-area-inset-right) + 124px);pointer-events:none;justify-content:center;gap:6px;display:flex;position:absolute}.sd[data-play-mode=on] .sd-tools>*{pointer-events:auto}.sd-tool{min-width:var(--tap-min);min-height:var(--tap-min);border-radius:var(--radius-full);color:var(--sd-ink);font:inherit;white-space:nowrap;cursor:pointer;touch-action:manipulation;background:#fffdf8eb;border:2px solid #cdbfa9;justify-content:center;align-items:center;gap:4px;padding:0 10px;font-size:.9rem;font-weight:800;display:inline-flex}.sd-tool:active{background:#f3ebde}.sd-tool:focus-visible,.sd-textbtn:focus-visible,.sd-picker__item:focus-visible,.sd-picker__close:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}.sd-tool__label{display:none}@media (width>=420px){.sd-tool__label{display:inline}}.sd[data-phase=complete] .sd-tools{visibility:hidden}.sd-textbtn{min-height:var(--tap-min);margin-top:var(--space-2);padding:0 var(--space-4);color:var(--sd-mark);font:inherit;text-underline-offset:3px;cursor:pointer;background:0 0;border:0;font-weight:800;text-decoration:underline}.sd-picker{width:min(calc(100% - 2 * var(--space-3)), 720px);max-height:min(calc(100% - 2 * var(--space-3)), 900px);padding:var(--space-3) var(--space-3) var(--space-4);border-radius:var(--radius-lg);color:var(--sd-ink);overscroll-behavior:contain;background:#fffaf2;border:0;overflow:auto;box-shadow:0 16px 48px #281e1452}.sd-picker::backdrop{background:#281e1473}.sd-picker__head{z-index:1;top:calc(-1 * var(--space-3));margin-top:calc(-1 * var(--space-3));padding-top:var(--space-3);justify-content:space-between;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2);background:#fffaf2;display:flex;position:sticky}.sd-picker__title{margin:0;font-size:1.2rem;font-weight:800}.sd-picker__close{width:var(--tap-min);height:var(--tap-min);color:var(--sd-ink);cursor:pointer;background:#f1e8da;border:0;border-radius:50%;place-items:center;display:inline-grid}.sd-picker__levels{margin-bottom:var(--space-3)}.sd-picker__list{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(140px,1fr));margin:0;padding:0;list-style:none;display:grid}.sd-picker__item{width:100%;color:var(--sd-ink);font:inherit;text-align:left;cursor:pointer;touch-action:manipulation;background:#fff;border:2px solid #e2d6c4;border-radius:12px;gap:4px;padding:6px;display:grid}.sd-picker__item[aria-current=true]{border-color:var(--sd-mark)}.sd-picker__thumb{aspect-ratio:4/3;object-fit:cover;background:#efe6d8;border-radius:8px;width:100%;display:block;position:relative;overflow:hidden}.sd-picker__name{font-size:.9rem;font-weight:800;line-height:1.3}.sd-picker__state{min-height:1.2em;color:var(--sd-muted);font-size:.8rem;font-weight:700}.sd-picker__state[data-state=playing]{color:#9a5b12}.sd-picker__state[data-state=cleared]{color:var(--sd-mark)}@media (width<=380px){.sd[data-play-mode=on] .sd-foot{gap:var(--space-3);padding-inline:var(--space-3)}.sd-status{gap:var(--space-2);font-size:.95rem}.sd-pips{gap:5px}.sd-pips li{width:11px;height:11px}.sd-hint{padding-inline:var(--space-3) var(--space-4)}}@media (width<=430px){.sd[data-play-mode=on] .sd-foot:has(.sd-pips li:nth-child(7)){gap:var(--space-3);padding-inline:var(--space-3)}.sd-foot:has(.sd-pips li:nth-child(7)) .sd-status{gap:var(--space-2);font-size:.95rem}.sd-foot:has(.sd-pips li:nth-child(7)) .sd-pips{gap:5px}.sd-foot:has(.sd-pips li:nth-child(7)) .sd-pips li{width:11px;height:11px}.sd-foot:has(.sd-pips li:nth-child(7)) .sd-hint{padding-inline:var(--space-3) var(--space-4)}}@media (orientation:landscape) and (height<=520px){.sd[data-play-mode=on]{grid-template-rows:auto minmax(0,1fr)}.sd[data-play-mode=on] .sd-foot{z-index:2;left:calc(env(safe-area-inset-left) + 72px);right:calc(env(safe-area-inset-right) + 124px);top:env(safe-area-inset-top);padding:var(--space-2) 0;gap:var(--space-3);grid-row:1;justify-content:space-between;position:absolute}.sd[data-play-mode=on] .sd-tools{margin-left:auto;position:static}.sd-tool__label{display:none}.sd[data-play-mode=on] .sd-stage{padding-bottom:var(--space-2)}.sd[data-play-mode=on] .sd-hint-note:not([hidden]){bottom:var(--space-3)}.sd-pips li{width:12px;height:12px}}@media (orientation:landscape) and (height<=520px) and (width<=760px){.sd[data-play-mode=on] .sd-foot{gap:var(--space-2)}.sd-hint{min-width:var(--tap-min);justify-content:center;padding-inline:10px}.sd-hint>span{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.sd-status{gap:var(--space-2)}.sd-pips{gap:4px}.sd-pips li{width:10px;height:10px}}