:root{--bg-0: #07090d;--bg-1: #0e1218;--fg-0: rgba(255, 255, 255, .92);--fg-1: rgba(255, 255, 255, .62);--accent: #5ac8fa;--glass-tint: rgba(255, 255, 255, .1);--glass-stroke: rgba(255, 255, 255, .22);--glass-hover: rgba(255, 255, 255, .16);--shadow-lg: 0 24px 60px rgba(0, 0, 0, .45);--canvas-bg: var(--bg-1);--canvas-dot: rgba(255, 255, 255, .1);--selection: #5ac8fa;--selection-fill: rgba(90, 200, 250, .1);--dock-bg: rgba(22, 26, 34, .62);--popover-bg: rgba(30, 34, 42, .92);--picker-sheet-bg: rgba(28, 32, 40, .96);--field-bg: rgba(0, 0, 0, .25);--swatch-stroke: rgba(255, 255, 255, .22);--instrument-shadow: 0 8px 16px rgba(0, 0, 0, .5);--preset-active-bg: rgba(255, 255, 255, .18);--preset-active-fg: var(--fg-0);--segment-bg: rgba(255, 255, 255, .08);--segment-active-bg: rgba(255, 255, 255, .2);color-scheme:dark}[data-theme=light]{--bg-0: #f4f6f9;--bg-1: #ffffff;--fg-0: rgba(20, 22, 28, .92);--fg-1: rgba(20, 22, 28, .55);--accent: #0a84ff;--glass-tint: rgba(255, 255, 255, .55);--glass-stroke: rgba(20, 22, 28, .1);--glass-hover: rgba(255, 255, 255, .8);--shadow-lg: 0 24px 60px rgba(20, 30, 60, .18);--canvas-bg: #ffffff;--canvas-dot: rgba(20, 22, 28, .1);--selection: #0a84ff;--selection-fill: rgba(10, 132, 255, .1);--dock-bg: rgba(238, 240, 243, .72);--popover-bg: rgba(255, 255, 255, .94);--picker-sheet-bg: #ededef;--field-bg: rgba(20, 22, 28, .05);--swatch-stroke: rgba(20, 22, 28, .2);--instrument-shadow: 0 6px 14px rgba(20, 30, 60, .22);--preset-active-bg: #1c1c1e;--preset-active-fg: #ffffff;--segment-bg: rgba(20, 22, 28, .06);--segment-active-bg: #ffffff;color-scheme:light}.glass-panel{background:var(--glass-tint);border:1px solid var(--glass-stroke);border-radius:18px;backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);box-shadow:var(--shadow-lg);color:var(--fg-0)}.glass-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-grid;place-items:center;gap:6px;border:1px solid var(--glass-stroke);background:var(--glass-tint);color:var(--fg-0);padding:8px 14px;border-radius:999px;font:inherit;font-size:14px;font-weight:500;backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);cursor:pointer;transition:transform .12s ease,background .18s ease,border-color .18s ease}.glass-button:hover{background:var(--glass-hover)}.glass-button:active{transform:scale(.96)}.glass-button:disabled{opacity:.4;cursor:not-allowed}.glass-button--round{width:38px;height:38px;padding:0;border-radius:50%;font-size:18px}.glass-button--active{background:color-mix(in srgb,var(--accent) 24%,transparent);border-color:var(--accent)}.glass-popover{position:fixed;z-index:60;background:var(--popover-bg);border:1px solid var(--glass-stroke);border-radius:16px;padding:12px;backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);box-shadow:var(--shadow-lg);color:var(--fg-0)}.glass-popover--tail-bottom:after,.glass-popover--tail-bottom:before{content:"";position:absolute;top:100%;left:var(--tail-x, 50%);transform:translate(-50%);width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent}.glass-popover--tail-bottom:before{border-top:10px solid var(--glass-stroke)}.glass-popover--tail-bottom:after{margin-top:-1px;border-top:10px solid var(--popover-bg)}.glass-sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:55;background:#0000001f}.glass-sheet{position:fixed;z-index:60;left:50%;bottom:0;transform:translate(-50%);width:min(440px,100%);background:var(--picker-sheet-bg);border:1px solid var(--glass-stroke);border-radius:22px 22px 0 0;padding:16px;backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);box-shadow:var(--shadow-lg);color:var(--fg-0);animation:sheet-up .22s cubic-bezier(.2,.8,.2,1)}@keyframes sheet-up{0%{transform:translate(-50%,100%)}}.segmented{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;padding:2px;border-radius:10px;background:var(--segment-bg)}.segmented__option{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;color:var(--fg-0);font:inherit;font-size:15px;font-weight:600;padding:7px 12px;border-radius:8px;cursor:pointer;transition:background .16s ease}.segmented__option--active{background:var(--segment-active-bg);box-shadow:0 1px 3px #0000001f}.slider{display:flex;align-items:center;gap:12px}.slider__rail{position:relative;flex:1;display:flex;align-items:center}.slider__track{position:relative;flex:1;height:28px;border-radius:999px;overflow:hidden;border:1px solid var(--glass-stroke)}.slider__track--checker{background-image:linear-gradient(45deg,rgba(120,120,120,.5) 25%,transparent 25%),linear-gradient(-45deg,rgba(120,120,120,.5) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(120,120,120,.5) 75%),linear-gradient(-45deg,transparent 75%,rgba(120,120,120,.5) 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0;background-color:#fff}.slider__fill{position:absolute;top:0;right:0;bottom:0;left:0}.slider__input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.slider__knob{position:absolute;top:50%;width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.2);box-shadow:0 1px 4px #0000004d;transform:translate(-50%,-50%);pointer-events:none}.slider__value{flex:none;min-width:64px;text-align:center;font-size:17px;font-weight:600;padding:8px 10px;border-radius:10px;background:var(--segment-active-bg);border:1px solid var(--glass-stroke)}.swatch{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:1px solid var(--swatch-stroke);border-radius:50%;cursor:pointer;flex:none}.swatch--selected{outline:2px solid var(--accent);outline-offset:2px}.swatch--none{background-image:linear-gradient(135deg,transparent 44%,#ff453a 44%,#ff453a 56%,transparent 56%);background-color:var(--field-bg)}.swatch--rainbow{position:relative;background:conic-gradient(from 0deg,#ff3b30,#ff9500,#fc0,#34c759,#00c7be,#007aff,#5856d6,#af52de,#ff2d55,#ff3b30)}.swatch--rainbow:after{content:"";position:absolute;top:5px;right:5px;bottom:5px;left:5px;border-radius:50%;background:var(--swatch-color, #000);border:2px solid var(--popover-bg)}.dock{position:fixed;left:50%;bottom:20px;transform:translate(-50%);z-index:30;display:flex;align-items:center;gap:2px;padding:6px 8px;border-radius:16px;background:var(--dock-bg);border:1px solid var(--glass-stroke);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);box-shadow:var(--shadow-lg);max-width:calc(100vw - 24px)}.dock__grip{display:grid;place-items:center;width:20px;height:38px;color:var(--fg-1);cursor:grab;border-radius:8px;touch-action:none}.dock__grip:hover{background:var(--glass-hover);color:var(--fg-0)}.dock__grip:active{cursor:grabbing}.dock__tool{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;color:var(--fg-0);width:40px;height:40px;border-radius:10px;display:grid;place-items:center;cursor:pointer;transition:background .14s ease,color .14s ease}.dock__tool:hover{background:var(--glass-hover)}.dock__tool--active{background:var(--accent);color:#fff}.dock__chevron{position:absolute;right:3px;bottom:3px;opacity:.75}.dock__divider{width:1px;height:26px;margin:0 4px;background:var(--glass-stroke)}.dock__color{display:grid;place-items:center;width:40px;height:40px}.dock__chrome-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;color:var(--fg-1);width:30px;height:40px;border-radius:8px;display:grid;place-items:center;cursor:pointer}.dock__chrome-btn:hover{background:var(--glass-hover);color:var(--fg-0)}.dock-collapsed{position:fixed;left:50%;bottom:20px;transform:translate(-50%);z-index:30;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:56px;height:36px;border-radius:14px;border:1px solid var(--glass-stroke);background:var(--dock-bg);color:var(--fg-0);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);box-shadow:var(--shadow-lg);display:grid;place-items:center;cursor:pointer}.dock-collapsed:hover{background:var(--glass-hover)}.brush-styles{display:flex;gap:4px;margin-bottom:10px}.brush-style{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--glass-stroke);background:var(--segment-bg);color:var(--fg-0);font:inherit;font-size:13px;font-weight:600;padding:6px 10px;border-radius:8px;cursor:pointer;transition:background .14s ease}.brush-style:hover{background:var(--glass-hover)}.brush-style--active{background:var(--preset-active-bg);color:var(--preset-active-fg);border-color:transparent}.eraser-popover{display:flex;flex-direction:column;gap:12px;min-width:220px}.eraser-dot{display:block;border-radius:50%;background:currentColor}.shapes-flyout{display:grid;grid-template-columns:repeat(3,44px);gap:6px}.shape-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:44px;height:44px;border:1px solid transparent;border-radius:10px;background:var(--segment-bg);color:var(--fg-0);cursor:pointer;display:grid;place-items:center;transition:background .14s ease,border-color .14s ease}.shape-item:hover{background:var(--glass-hover);border-color:var(--glass-stroke)}.sticky-colors{display:flex;gap:8px;align-items:center}.width-presets{display:flex;gap:8px;margin-bottom:12px}.width-preset{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:46px;height:46px;border:0;border-radius:12px;background:transparent;color:var(--fg-0);cursor:pointer;display:grid;place-items:center;transition:background .15s ease}.width-preset:hover{background:var(--segment-bg)}.width-preset--active{background:var(--preset-active-bg);color:var(--preset-active-fg)}.color-picker{width:min(380px,calc(100vw - 24px));display:flex;flex-direction:column;gap:14px}.color-picker__header{display:grid;grid-template-columns:32px 1fr 32px;align-items:center}.color-picker__title{text-align:center;font-size:18px;font-weight:700}.color-picker__icon-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:32px;height:32px;border:0;border-radius:50%;background:var(--segment-bg);color:var(--fg-1);font-size:16px;cursor:pointer;display:grid;place-items:center}.color-picker__icon-btn--eyedropper{background:transparent;color:var(--accent);font-size:20px}.color-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0;border-radius:8px;overflow:hidden}.color-grid__cell{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:0;aspect-ratio:1;cursor:pointer}.color-grid__cell--selected{outline:2px solid var(--fg-0);outline-offset:-2px;z-index:1}.color-sliders{display:flex;flex-direction:column;gap:12px}.color-sliders__row{display:flex;align-items:center;gap:10px}.color-sliders__label{width:18px;font-weight:600;color:var(--fg-1)}.color-sliders__channel{flex:1;accent-color:var(--accent)}.color-sliders__hex{width:96px;background:var(--field-bg);border:1px solid var(--glass-stroke);color:var(--fg-0);border-radius:8px;padding:6px 10px;font:inherit;font-size:14px;text-transform:uppercase}.color-picker__section-label{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--fg-1);text-transform:uppercase}.color-picker__swatches{display:flex;align-items:center;gap:10px;padding-top:8px;border-top:1px solid var(--glass-stroke)}.color-picker__current{width:56px;height:56px;border-radius:12px;border:1px solid var(--swatch-stroke);flex:none}.color-picker__saved{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.app-menu{position:fixed;top:16px;left:16px;z-index:30;display:flex;align-items:center;gap:2px;padding:4px;border-radius:12px}.app-menu__btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;color:var(--fg-0);height:34px;padding:0 8px;border-radius:8px;display:flex;align-items:center;gap:2px;cursor:pointer;transition:background .14s ease}.app-menu__btn:hover{background:var(--glass-hover)}.app-menu__chevron{opacity:.6}.app-menu__title{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;color:var(--fg-0);font:inherit;font-size:14px;font-weight:600;height:34px;padding:0 8px;border-radius:8px;cursor:pointer;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background .14s ease}.app-menu__title:hover{background:var(--glass-hover)}.menu-popover{padding:6px}.menu{display:flex;flex-direction:column;width:248px;max-height:72vh;overflow-y:auto}.menu__section{display:flex;flex-direction:column;margin-top:6px;padding-top:6px;border-top:1px solid var(--glass-stroke)}.menu__section-title{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-1);padding:2px 10px 4px}.menu__item{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;color:var(--fg-0);font:inherit;font-size:14px;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;text-align:left;transition:background .12s ease}.menu__item:hover{background:var(--glass-hover)}.menu__item:disabled{opacity:.4;cursor:not-allowed}.menu__item-icon{width:18px;display:grid;place-items:center;color:var(--fg-1);flex:none}.menu__item-label{flex:1}.menu__item-shortcut{font-size:12px;color:var(--fg-1)}.page-tray__head{display:flex;align-items:center;justify-content:space-between;padding:2px 6px 8px;font-size:13px;font-weight:700;color:var(--fg-1)}.page-tray__add{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;color:var(--fg-0);width:24px;height:24px;border-radius:6px;display:grid;place-items:center;cursor:pointer}.page-tray__add:hover{background:var(--glass-hover)}.page-tray{display:flex;flex-direction:column;gap:6px;width:220px;max-height:60vh;overflow-y:auto}.page-tray__item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:var(--segment-bg);cursor:pointer}.page-tray__item--active{background:color-mix(in srgb,var(--accent) 22%,transparent);border:1px solid var(--accent)}.page-tray__item--dragover{outline:2px dashed var(--accent)}.page-tray__num{width:22px;height:22px;border-radius:6px;background:var(--field-bg);display:grid;place-items:center;font-size:12px;font-weight:600;flex:none}.page-tray__title{flex:1;border:0;background:transparent;color:var(--fg-0);font:inherit;font-size:14px;min-width:0}.page-tray__title:focus{outline:none;border-bottom:1px solid var(--accent)}.page-tray__del{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;color:var(--fg-1);cursor:pointer;font-size:15px;border-radius:6px;width:22px;height:22px}.page-tray__del:hover{color:#ff453a}.page-tray__del:disabled{opacity:.3;cursor:not-allowed}:root{font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Inter,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;background:var(--bg-0);color:var(--fg-0);overflow:hidden}a{color:var(--accent)}.lg-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--glass-stroke);background:var(--glass-tint);color:var(--fg-0);padding:10px 18px;border-radius:999px;font-size:14px;font-weight:500;backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);box-shadow:inset 0 1px #fff6,inset 0 -1px #00000026,0 4px 14px #00000040;cursor:pointer;transition:transform .12s ease,background .2s ease}.lg-button:hover{background:#ffffff29}.lg-button:active{transform:scale(.97)}.lg-button--primary{background:linear-gradient(180deg,#5ac8fa52,#5ac8fa26);border-color:#5ac8fa80}.home{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:40px;height:100%;padding:24px}.home__hero h1{font-size:clamp(48px,8vw,96px);margin:0;letter-spacing:-.04em;background:linear-gradient(180deg,var(--fg-0) 0%,var(--accent) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.home__tagline{margin:8px 0 0;color:var(--fg-1);text-align:center}.home__panel{display:flex;flex-direction:column;align-items:stretch;gap:18px;width:min(440px,100%);padding:24px;border-radius:24px;background:var(--glass-tint);border:1px solid var(--glass-stroke);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);box-shadow:var(--shadow-lg)}.home__panel>.lg-button--primary{align-self:stretch}.home__auth{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--fg-1)}.home__auth-row{display:flex;gap:8px}.home__auth-row input{flex:1;background:var(--field-bg);border:1px solid var(--glass-stroke);color:var(--fg-0);border-radius:999px;padding:10px 14px;font-size:14px}.home__auth-row input:focus{outline:2px solid var(--accent);outline-offset:1px}.home__signed-in{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--fg-1)}.home__note{margin:0;font-size:12px;color:var(--fg-1)}.home__error{margin:0;font-size:12px;color:#ff8a8a}.board{position:relative;width:100%;height:100%;overflow:hidden}.board__canvas{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--canvas-bg)}.selection-inspector{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;padding:12px;width:200px;border-radius:18px;background:var(--glass-tint);border:1px solid var(--glass-stroke);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);box-shadow:var(--shadow-lg);z-index:5}.selection-inspector__row{display:flex;align-items:center;gap:8px}.selection-inspector__row--swatches{flex-wrap:wrap;gap:6px;justify-content:space-between}.selection-inspector__label{font-size:12px;color:var(--fg-1);width:52px;flex:none}.selection-inspector__swatches{display:flex;flex-wrap:wrap;gap:6px}.selection-inspector__none{background:linear-gradient(135deg,transparent 44%,#ff453a 44%,#ff453a 56%,transparent 56%),var(--field-bg)}.selection-inspector__range{flex:1;accent-color:var(--accent)}.selection-inspector__num{width:64px;background:var(--field-bg);border:1px solid var(--glass-stroke);color:var(--fg-0);border-radius:8px;padding:4px 8px;font-size:13px}.selection-inspector__actions{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding-top:8px;border-top:1px solid var(--glass-stroke)}.selection-inspector__btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:30px;border-radius:8px;border:1px solid transparent;background:var(--field-bg);color:var(--fg-0);font-size:15px;cursor:pointer;display:grid;place-items:center;transition:background .15s ease}.selection-inspector__btn:hover{background:var(--glass-hover)}.selection-inspector__lock{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--glass-stroke);background:var(--field-bg);color:var(--fg-0);border-radius:999px;padding:8px 12px;font-size:13px;cursor:pointer;transition:background .15s ease,border-color .15s ease}.selection-inspector__lock:hover{background:var(--glass-hover)}.selection-inspector__lock--on{background:#ffd60a2e;border-color:#ffd60a80}.board__home-link{position:absolute;top:16px;left:16px;font-size:13px;text-decoration:none;background:var(--glass-tint);border:1px solid var(--glass-stroke);padding:6px 12px;border-radius:999px;backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%)}.auth-callback{display:grid;place-items:center;height:100%;color:var(--fg-1)}.snapshots{display:flex;flex-direction:column;width:268px;max-height:72vh;overflow-y:auto;gap:8px}.snapshots__head{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-1);padding:2px 4px}.snapshots__note{font-size:13px;color:var(--fg-1);padding:4px;margin:0}.snapshots__error{font-size:13px;color:#ff6b6b;padding:0 4px;margin:0}.snapshots__save{display:flex;gap:6px;align-items:center}.snapshots__input{flex:1;min-width:0;font:inherit;font-size:13px;color:var(--fg-0);background:var(--glass-hover);border:1px solid var(--glass-stroke);border-radius:8px;padding:6px 8px}.snapshots__save-btn{flex:none;width:auto;gap:4px}.snapshots__list{display:flex;flex-direction:column;border-top:1px solid var(--glass-stroke);padding-top:4px}.snapshots__row{display:flex;align-items:center;gap:8px;padding:6px 4px;border-radius:8px}.snapshots__row:hover{background:var(--glass-hover)}.snapshots__row-label{flex:1;font-size:14px;color:var(--fg-0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.snapshots__row-time{font-size:12px;color:var(--fg-1);flex:none}.snapshots__restore{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--glass-stroke);background:transparent;color:var(--fg-0);font:inherit;font-size:12px;padding:4px 10px;border-radius:999px;cursor:pointer;flex:none}.snapshots__restore:hover:not(:disabled){background:var(--glass-hover)}.snapshots__restore:disabled{opacity:.4;cursor:not-allowed}