:root{color:#000;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#fff;font-family:system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{touch-action:none;width:100%;min-height:100%}body{overscroll-behavior:none;background:#fff;min-height:100svh;margin:0;overflow:hidden}.auth-screen{background:#fff;place-items:center;display:grid;position:fixed;inset:0}.auth-form{align-items:center;gap:10px;display:flex}.auth-input,.auth-button{appearance:none;font:inherit;color:#111;background:#0000000f;border:0;border-radius:999px;padding:14px 18px}.auth-input{outline:none;min-width:min(72vw,240px)}.auth-button{color:#fff;background:#111}.app{touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;background:#fff;position:fixed;inset:0}.top-bar{top:calc(18px + env(safe-area-inset-top,0px));z-index:2;grid-template-columns:1fr auto 1fr;align-items:center;display:grid;position:absolute;left:18px;right:18px}.top-actions{justify-self:end;align-items:center;gap:10px;display:flex}.presence-indicator{min-height:32px;font-size:22px;line-height:1}.canvas-indicator{color:#000000b3;background:#0000000f;border-radius:999px;justify-self:center;padding:8px 14px;font-size:14px;line-height:1}.top-button{background:#fffffff0;border:0;border-radius:999px;place-items:center;width:42px;height:42px;padding:0;display:grid;position:relative;overflow:hidden;box-shadow:0 10px 30px #00000014}.clear-button:before{content:"";transform-origin:0;background:#0000001a;position:absolute;inset:0;transform:scaleX(0)}.clear-button.is-holding:before{animation:4s linear forwards clear-progress}.drawing-surface{touch-action:none;-webkit-user-select:none;user-select:none;cursor:crosshair;pointer-events:none;background:#fff;width:100%;height:100%;display:block;position:absolute;inset:0}.controls-shell{z-index:2;right:0;bottom:calc(18px + env(safe-area-inset-bottom,0px));flex-direction:column;gap:10px;padding:0 18px;display:flex;position:absolute;left:0}.palette{justify-content:center;gap:14px;display:flex}.slider-panel{justify-content:center;display:flex}.aux-panel{opacity:0;pointer-events:none;transform-origin:bottom;max-height:0;padding:0;transition:max-height .26s,padding .26s,opacity .22s,transform .32s cubic-bezier(.22,1,.36,1);overflow:hidden;transform:translateY(18px)scale(.96)}.aux-panel.is-open{opacity:1;pointer-events:auto;max-height:140px;padding:8px 0;overflow:visible;transform:translateY(0)scale(1)}.thickness-slider{accent-color:#111;opacity:0;width:min(280px,100vw - 72px);margin:0;transition:opacity .2s,transform .3s cubic-bezier(.22,1,.36,1);transform:translateY(12px)scaleX(.94)}.palette-button,.control-button,.top-button{appearance:none;border:0;padding:0}.palette-button{opacity:0;border-radius:999px;width:58px;height:58px;transition:opacity .22s,transform .32s cubic-bezier(.22,1,.36,1);transform:translateY(16px)scale(.88);box-shadow:inset 0 0 0 1px #00000014,0 10px 30px #00000014}.controls{grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;gap:14px;display:grid}.control-button{background:#fffffff0;border-radius:999px;justify-self:center;place-items:center;width:58px;height:58px;display:grid;box-shadow:0 10px 30px #00000014}.aux-panel.is-open .palette-button,.aux-panel.is-open .thickness-slider{opacity:1;transform:translateY(0)scale(1)}.control-icon{color:#111;width:22px;height:22px}.color-button{background:#fffffff5}.color-swatch{border-radius:999px;width:24px;height:24px;box-shadow:inset 0 0 0 1px #00000024}@media (pointer:coarse){.drawing-surface{cursor:default}}@keyframes clear-progress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}