@font-face{font-family:Riviosa Gothic;src:url('brand/riviosa-gothic-book.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Riviosa Gothic;src:url('brand/riviosa-gothic-demi.woff2') format('woff2');font-weight:600;font-display:swap}
:root{color-scheme:light;--bg:#e9e6df;--panel:#fbfbfa;--ink:#121211;--muted:#625f59;--rule:#c7c4bc;--rule-soft:#e2ded5;--accent:#963c25;--accent-ink:#fff;--button:#fff;--overlay:rgba(251,251,250,.96)}
:root[data-theme=dark]{color-scheme:dark;--bg:#181918;--panel:#222321;--ink:#f1f0eb;--muted:#b9b8af;--rule:#62635d;--rule-soft:#3d3e38;--accent:#e4b49c;--accent-ink:#201b17;--button:#2b2c28;--overlay:rgba(34,35,33,.96)}
html,body{font-family:Riviosa Gothic,"Century Gothic","Avenir Next",Arial,sans-serif}
#side h1{font-weight:400}button,input{font-family:inherit}
.chip,#toggle,#explodeBtn,#themeToggle{background:var(--overlay);color:var(--ink)}
.btns button{background:var(--button);min-height:36px}
.btns button[aria-pressed=true],#explodeBtn[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}
#themeToggle{position:absolute;right:12px;top:12px;z-index:4;min-height:36px;min-width:96px;padding:7px 10px;border:1px solid var(--rule);font:inherit;font-size:12px;cursor:pointer}
#viewname{max-width:calc(100% - 132px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:36px;display:flex;align-items:center}
#readout{top:60px}#explodeBtn{top:60px;min-height:36px}
#hint{max-width:calc(100% - 24px)}
button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.row{min-height:36px}.row input{flex:none}.row span{overflow-wrap:anywhere}
#toggle{color:var(--ink);min-height:44px}
@media(max-width:760px){
 #side{top:64px;padding-top:14px;padding-bottom:24px}
 #app.open::after{content:'';position:absolute;right:0;top:0;width:min(300px,86vw);height:64px;background:var(--panel);border-left:1px solid var(--rule);z-index:3;pointer-events:none}
 #explodeBtn{top:auto;bottom:64px;min-height:44px}
 #hint{max-width:calc(100% - 158px);font-size:11px;letter-spacing:.025em}
 .btns button{min-height:44px}.row{min-height:44px}
 #themeToggle{min-height:44px}#viewname{min-height:44px;font-size:11px}
 #app.open #toggle{top:12px;bottom:auto;right:120px}
 #app.open #viewname,#app.open #hint,#app.open #explodeBtn{visibility:hidden}
}
@media(prefers-reduced-motion:reduce){#side{transition:none}}