:root{color:#111;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#050505;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0}body{overflow:hidden}button,input{font:inherit}.notebook-frame{color:#111;touch-action:none;-webkit-user-select:none;user-select:none;background:#050505;width:100vw;height:100svh;min-height:320px;position:relative;overflow:hidden}.cover-canvas,.drawing-canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.cover-canvas{z-index:0}.drawing-canvas{z-index:1;cursor:crosshair;touch-action:none}.pen-controls,.action-controls{z-index:2;align-items:center;gap:10px;display:flex;position:absolute}.pen-controls{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#faf8eeb8;border-radius:999px;padding:8px 10px;top:clamp(10px,3vw,18px);left:clamp(10px,3vw,18px);box-shadow:0 3px #000c}.color-row{align-items:center;gap:7px;display:flex}.color-button{background:var(--swatch);cursor:pointer;border:2px solid #f8f4e8;border-radius:999px;flex:0 0 18px;width:18px;height:18px;padding:0;transition:transform .15s,box-shadow .15s;box-shadow:0 0 0 1px #000c,inset 0 1px #ffffff52}.color-button:hover,.color-button:focus-visible,.color-button.is-selected{transform:scale(1.22)}.color-button:focus-visible{outline-offset:3px;outline:2px solid #f8f4e8}.color-button.is-selected{box-shadow:0 0 0 3px #f8f4e8,0 0 0 5px #000000e0}.pen-slider{accent-color:#111;cursor:pointer;width:clamp(78px,17vw,132px)}.action-controls{top:clamp(10px,3vw,18px);right:clamp(10px,3vw,18px)}.tool-button{color:#111;cursor:pointer;background:#faf8eedb;border:2px solid #111;border-radius:999px;place-items:center;width:40px;height:40px;padding:0;transition:transform .17s,box-shadow .17s,background-color .17s;display:grid;position:relative;overflow:hidden;box-shadow:0 3px #000000db}.tool-button:hover,.tool-button:focus-visible{background:#fffdf5;transform:scale(1.15);box-shadow:0 5px #000000db}.tool-button:active{transform:scale(1.08)}.tool-button:focus-visible{outline-offset:3px;outline:3px solid #fffdf5}.tool-button:after{content:"";opacity:0;background:#00000038;border-radius:999px;width:10px;height:10px;position:absolute;inset:50%;transform:translate(-50%,-50%)scale(0)}.tool-button.is-rippling:after{animation:.36s ease-out ripple}.tool-button.is-spinning svg{animation:.52s cubic-bezier(.26,.78,.3,1) spin}@keyframes ripple{0%{opacity:.45;transform:translate(-50%,-50%)scale(0)}to{opacity:0;transform:translate(-50%,-50%)scale(7)}}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=520px){.pen-controls{gap:8px;padding:7px 9px}.color-button{flex-basis:16px;width:16px;height:16px}.tool-button{width:36px;height:36px}}@media (prefers-reduced-motion:reduce){.color-button,.tool-button{transition-duration:1ms}.tool-button.is-rippling:after,.tool-button.is-spinning svg{animation-duration:1ms}}