/* Sticky Circle Field: self-contained styles, independent of the archive. */
.scf{--scf-ink:#0b0a08;--scf-cream:#f5e6c7;--scf-yellow:#f6d719;--scf-pink:#e65ca6;position:relative;background:var(--scf-ink);color:var(--scf-cream);padding:0;box-sizing:border-box;isolation:isolate;min-width:0}
.scf canvas{display:block;width:100%;height:auto;aspect-ratio:1;max-width:none;cursor:grab;touch-action:pan-y;outline-offset:-6px}
.scf canvas:active{cursor:grabbing}
.scf canvas:focus-visible{outline:2px solid var(--scf-cream)}
.scf-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px 8px;border-top:1px solid #504335;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--scf-cream);background:var(--scf-ink);min-height:58px;position:relative;z-index:3}
.scf-state{font-size:11px;line-height:1.35;letter-spacing:.09em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.scf-state::before{content:"";width:7px;height:7px;flex:0 0 7px;background:var(--scf-pink);border-radius:50%}
.scf[data-phase="hold"] .scf-state::before{background:#55c83c}
.scf[data-phase="gather"] .scf-state::before{background:var(--scf-yellow)}
.scf-actions{display:flex;gap:5px;align-items:center}
.scf-button{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-width:42px;min-height:38px;padding:7px 10px;border:1px solid #74634a;border-radius:0;background:var(--scf-ink);color:var(--scf-cream);font:600 11px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;cursor:pointer;transition:background .2s,color .2s;box-sizing:border-box;letter-spacing:0}
.scf-button:hover,.scf-button:focus-visible{background:var(--scf-cream);color:var(--scf-ink)}
.scf-button:focus-visible{outline:2px solid var(--scf-yellow);outline-offset:3px}
.scf-button:disabled{opacity:.6;cursor:default}
.scf-button[hidden]{display:none}
.scf-expand{font-size:22px;line-height:1}
.scf-hint{font:10px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.045em;color:#d4c4a7;margin:0;padding:0 14px 13px;background:var(--scf-ink);position:relative;z-index:3}
.scf-placeholder{min-width:0;visibility:hidden}
.scf-dialog{position:fixed;inset:0;margin:0;padding:0;border:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;overflow:hidden;background:#0b0a08;color:#f5e6c7;box-sizing:border-box;z-index:2147483647}
.scf-dialog:not([open]){display:none}
.scf-dialog::backdrop{background:#0b0a08}
.scf-dialog .scf.scf-expanded{position:absolute!important;inset:0!important;display:flex!important;flex-direction:column!important;transform:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;overflow:hidden!important}
.scf-dialog .scf-expanded::before{display:none!important}
.scf-dialog .scf-expanded canvas{flex:1 1 0;min-height:0;height:0;width:100%;aspect-ratio:auto;touch-action:none;transform:none!important;max-width:none}
.scf-dialog .scf-toolbar{flex:0 0 auto;padding:14px max(24px,env(safe-area-inset-right)) 9px max(24px,env(safe-area-inset-left));min-height:66px}
.scf-dialog .scf-hint{flex:0 0 auto;text-align:center;padding-bottom:max(12px,env(safe-area-inset-bottom))}
.scf-dialog .scf-close{position:absolute;right:max(18px,env(safe-area-inset-right));top:max(18px,env(safe-area-inset-top));z-index:10;width:48px;height:48px;background:#f5e6c7;color:#0b0a08;font:400 32px/1 Arial,sans-serif;border:1px solid #0b0a08;box-shadow:0 0 0 4px #0b0a08}
.scf-dialog .scf-close:hover{background:#f6d719}
.scf-dialog .scf-state{font-size:12px}
@media(max-width:420px){.scf-toolbar{padding-inline:9px;gap:6px}.scf-state{font-size:9px;letter-spacing:.04em;gap:5px}.scf-button{min-width:36px;min-height:36px;padding:6px 8px;font-size:10px}.scf-expand{font-size:20px}.scf-hint{padding-inline:9px;font-size:9px}.scf-dialog .scf-toolbar{padding-inline:14px}}
@media(prefers-reduced-motion:reduce){.scf *{animation:none!important;transition:none!important}}

.scf-dialog .scf.scf-expanded::after{content:"";display:block!important;position:absolute;inset:10px 10px calc(var(--scf-control-space,150px) + 10px);pointer-events:none;z-index:2;border:1px solid #8a7453;transform:translate3d(var(--scf-frame-x,0px),var(--scf-frame-y,0px),0)}
.scf-audio{display:flex;flex-wrap:wrap;align-items:center;gap:9px 14px;padding:9px 14px 14px;background:#0b0a08;color:#f5e6c7;border-top:1px solid #423725;position:relative;z-index:4;flex:0 0 auto;box-sizing:border-box}
.scf-audio-toggle{min-width:100px}
.scf-audio-toggle[data-status="on"]{background:#f6d719;border-color:#f6d719;color:#0b0a08}
.scf-volume-label{font:10px/1.3 ui-monospace,Consolas,monospace;display:flex;align-items:center;gap:7px}
.scf-volume{width:84px;accent-color:#f6d719;margin:0;height:30px}
.scf-audio-status{flex:1 0 100%;font:10px/1.5 ui-monospace,Consolas,monospace;color:#dfd0b6;margin:0}
.scf-dialog .scf-audio{justify-content:center;padding-bottom:max(12px,env(safe-area-inset-bottom))}
.scf-dialog .scf-audio-status{text-align:center}
@media(max-width:420px){.scf-audio{padding-inline:10px;gap:7px 10px}.scf-volume{width:68px}.scf-audio-toggle{min-width:92px}.scf-audio-status{font-size:9px}}
@media(prefers-reduced-motion:reduce){.scf-dialog .scf.scf-expanded::after{transform:none!important}}