/* Base: reset, the page frame (sidebar, main column, overlays) and its breakpoints. The look lives in cartoon.css. */
*{box-sizing:border-box}
html{font-synthesis:none;-webkit-text-size-adjust:100%}
body{margin:0}
button,a,select{-webkit-tap-highlight-color:transparent}
button,select,input{font:inherit;color:inherit}
button,a{touch-action:manipulation}
button{border:0;cursor:pointer}
button:disabled{cursor:default}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
main:focus{outline:0}
.icon{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Frame: a fixed sidebar (232px; 100px from 950px; a bottom bar from 600px) and the main column beside it. */
.sidebar{position:fixed;inset:0 auto 0 0;z-index:10;width:232px;display:flex;flex-direction:column}
.main-wrap{position:relative;z-index:1;margin-left:232px;padding:0 28px;max-width:1800px}
.skip{position:fixed;left:10px;top:-60px;z-index:99;background:#fff;padding:13px;border-radius:12px}
.skip:focus{top:10px}
.audio-status{position:fixed;bottom:15px;left:calc(50% + 116px);transform:translateX(-50%);z-index:20;pointer-events:none}
/* The toast sits below the HUD flowers it announces, beside the 🐢 (not over it), off the dock where stars land; never a target.
   Low enough that the bunny peeking over its top edge stays clear of the HUD chips. */
#toast{position:fixed;top:112px;right:96px;z-index:30;white-space:nowrap;pointer-events:none}
.error-banner{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:100;max-width:90%;display:flex;gap:12px;align-items:center}
dialog{width:calc(100% - 32px);max-height:85dvh}
@media(max-width:950px){
 .sidebar{width:100px}
 .main-wrap{margin-left:100px;padding:0 20px}
 .audio-status{left:calc(50% + 50px)}
}
@media(max-width:759px){.main-wrap{padding:0 16px}}
@media(max-width:600px){
 .sidebar{inset:auto 0 0;width:100%;height:calc(84px + env(safe-area-inset-bottom))}
 .main-wrap{margin-left:0;padding:0 14px 100px}
 .audio-status{left:50%;bottom:96px}
 #toast{top:auto;right:auto;left:50%;bottom:96px;transform:translateX(-50%);max-width:94%;white-space:normal}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}