:root{--canvas-glow:#fffaf0}body,.paper,.dock,.style-options,.time-options{transition:background-color .2s,color .2s,border-color .2s}.theme-toggle .icon{width:20px;height:20px}:root[data-theme=dark]{color-scheme:dark;--room:#1d1c24;--paper:#26262f;--dock:#2b2a35;--ink:#d1c8c4;--canvas-glow:#f5e5ff}:root[data-theme=dark] ::selection{background:#78658580;color:#fff1df}:root[data-theme=dark] :is(button,input,canvas):focus-visible{outline-color:#c3a8de}:root[data-theme=dark] .brand{color:#d4c9c0}:root[data-theme=dark] .brand-mark{stroke:#c2a6db}:root[data-theme=dark] .brand-dot{color:#d5b292}:root[data-theme=dark] .paper{border-color:#ffffff0b;box-shadow:0 2px 3px #0002,0 12px 40px #0002,inset 0 1px #ffffff04}:root[data-theme=dark] .paper:before{background-image:radial-gradient(#ead8ef08 .65px,transparent .65px)}:root[data-theme=dark] .empty-a{stroke:#9a86ad}:root[data-theme=dark] .empty-b{stroke:#aa9387}:root[data-theme=dark] .empty-dot{background:#8d7e92}:root[data-theme=dark] .paper-corner span{background:#c4b2d0}:root[data-theme=dark] .playhead{background:linear-gradient(transparent 2%,#c3a1d440 18%,#c3a1d470 50%,#c3a1d440 82%,transparent 98%)}:root[data-theme=dark] .playhead:before{background:linear-gradient(90deg,transparent,#d9bcf210)}:root[data-theme=dark] .playhead span{background:#d1b4e4;box-shadow:0 0 12px #caa2ea55}:root[data-theme=dark] .paper.erasing .cursor{border-color:#c6b6d0;background:#c4b1da1a}:root[data-theme=dark] .pending span{background:#c8b2db}:root[data-theme=dark] .dock{border-color:#ffffff0d;box-shadow:0 6px 10px #0002,0 13px 30px #0002,inset 0 1px #ffffff06}:root[data-theme=dark] .icon-button{color:#c0b4ba}:root[data-theme=dark] .icon-button:hover:not(:disabled){background:#39343f;color:#efdfd2}:root[data-theme=dark] .icon-button[aria-pressed=true]{background:#443a48;color:#e2c8e8;box-shadow:inset 0 1px 3px #0002}:root[data-theme=dark] .theme-toggle[aria-pressed=true]{color:#edce9c}:root[data-theme=dark] input[type=range]::-webkit-slider-runnable-track{background:#574b5d}:root[data-theme=dark] input[type=range]::-webkit-slider-thumb{background:#ccb0d2;box-shadow:0 2px 4px #0003}:root[data-theme=dark] input[type=range]::-moz-range-track{background:#574b5d}:root[data-theme=dark] input[type=range]::-moz-range-thumb{background:#ccb0d2}:root[data-theme=dark] .pebble{color:color-mix(in srgb,var(--base) 85%,#ffead9);background:linear-gradient(145deg,color-mix(in srgb,var(--light) 28%,#393440),color-mix(in srgb,var(--base) 22%,#2e2b36));box-shadow:inset 0 1px 2px #ffffff0c,inset 0 -3px 4px #0002,0 3px 5px #0002}:root[data-theme=dark] .pebble.selected{box-shadow:inset 0 1px 2px #ffffff1c,inset 0 -3px 4px #0002,0 5px 8px #0003,0 0 0 1px color-mix(in srgb,var(--base) 35%,transparent)}:root[data-theme=dark] .pebble.selected:after{background:var(--base);opacity:.85}:root[data-theme=dark] .divider{background:#77667f;opacity:.35}:root[data-theme=dark] .play-button{color:#eccc9e;background:linear-gradient(145deg,#65515c,#4b3c4b);box-shadow:inset 0 2px 2px #ffffff0c,inset 0 -4px 5px #0002,0 4px 7px #0002}:root[data-theme=dark] .play-button:hover{box-shadow:inset 0 2px 2px #ffffff0c,inset 0 -4px 5px #0002,0 7px 12px #0004}:root[data-theme=dark] .play-button[aria-pressed=true]{background:linear-gradient(145deg,#6b5560,#534050)}:root[data-theme=dark] .play-orbit{border-color:#dbb98640}:root[data-theme=dark] .time-button{color:#c3b6c1}:root[data-theme=dark] .time-button:hover{background:#3d3543}:root[data-theme=dark] .time-options{background:#302b38;border-color:#ffffff10;box-shadow:0 6px 25px #0005}:root[data-theme=dark] .time-options button{color:#cfc0d0}:root[data-theme=dark] .time-options button:hover,:root[data-theme=dark] .time-options button[aria-pressed=true]{background:#493d50;color:#efdcf6}:root[data-theme=dark] .style-button{background:#2d2934;color:#d1c2cc;border-color:#ffffff0b;box-shadow:0 3px 8px #0001}:root[data-theme=dark] .style-button>.icon{color:color-mix(in srgb,var(--style-color) 75%,#ffe3ff)}:root[data-theme=dark] .style-button:hover,:root[data-theme=dark] .style-button[aria-expanded=true]{background:#3a303f;box-shadow:0 4px 14px #0003}:root[data-theme=dark] .style-chevron{stroke:#bca7c6}:root[data-theme=dark] .style-options{background:#302b38;border-color:#ffffff10;box-shadow:0 12px 35px #0005,0 3px 8px #0002}:root[data-theme=dark] .style-options button{color:#d1c4d3}:root[data-theme=dark] .style-options button:hover,:root[data-theme=dark] .style-options button[aria-checked=true]{background:#493c50;color:#f3e1f8}:root[data-theme=dark] .style-swatch{background:color-mix(in srgb,var(--option-color) 20%,#3b3043);color:color-mix(in srgb,var(--option-color) 65%,#ffe3ff);box-shadow:inset 0 1px 2px #ffffff0b}:root[data-theme=dark] .style-check{background:#d3b5dc}:root[data-theme=dark] .loop-progress{background:#d1b7dc14}:root[data-theme=dark] .loop-progress span{background:#b89cc9}:root[data-theme=dark] [data-tip]:not(.pebble):after,:root[data-theme=dark] .pebble:before{background:#57465eee;color:#f9eafa;box-shadow:0 3px 12px #0003}:root[data-theme=dark] .toast{background:#332c3bef;border-color:#ffffff12;box-shadow:0 6px 24px #0004;color:#e2cfe8}@media (max-width:420px){.topbar{height:108px;flex-wrap:wrap;justify-content:center;padding:10px 0;gap:0}.brand{width:100%;justify-content:center;font-size:20px;gap:8px}.brand-mark{width:26px}.top-actions{justify-content:center;gap:10px!important}.style-options{position:fixed;left:16px;right:16px;top:110px;width:auto}}@media (prefers-reduced-motion:reduce){body,.paper,.dock,.style-options,.time-options{transition:none}}.paper.erasing .cursor{width:44px;height:44px;margin:-22px 0 0 -22px}@media (max-width:420px){.dock{column-gap:5px;padding:12px 10px}.drawing-tools .icon-button,.clear-button{width:30px}.time-button{min-width:65px}}