@import"https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap";:root{font-family:Manrope,ui-sans-serif,system-ui,sans-serif;color:#edf3ee;background:#111518;font-synthesis:none;--bg:#111518;--panel:#151c1e;--panel-2:#1b2426;--line:#2a3537;--muted:#7d8e89;--soft:#afc0ba;--mint:#79c7ba;--mint-2:#365c56;--warm:#f6a55b}*{box-sizing:border-box}html,body,#root{margin:0;width:100%;height:100%;overflow:hidden}button,select,input{font:inherit}button{border:0;color:inherit;cursor:pointer}.app{height:100%;display:flex;flex-direction:column;background:var(--bg);outline:none}.topbar{height:70px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--line);background:#12191b}.brand{display:flex;align-items:center;gap:11px}.brand-mark{width:30px;height:30px;position:relative;border:1px solid #4c8279;border-radius:50%;display:grid;place-items:center}.brand-mark span{position:absolute;width:14px;height:5px;border-top:2px solid var(--mint);border-radius:50%;transform:rotate(-35deg)}.brand-mark span+span{transform:rotate(35deg);margin-top:6px}.eyebrow,.panel-kicker{color:var(--mint);font-family:DM Mono,monospace;font-size:9px;letter-spacing:1.6px;font-weight:500}.topbar h1{font-size:17px;line-height:1.1;margin:4px 0 0;font-weight:600;letter-spacing:-.3px}.top-actions{display:flex;align-items:center;gap:7px}.autosave{font-size:11px;color:var(--muted);margin-right:10px}.autosave i,.live-dot{display:inline-block;width:6px;height:6px;background:#79c7ba;border-radius:50%;margin-right:6px;box-shadow:0 0 0 3px #79c7ba20}.ghost,.icon-ghost{display:inline-flex;align-items:center;gap:6px;padding:9px 11px;border-radius:8px;background:#1c2527;color:#b7c6c1;font-size:11px}.ghost:hover,.icon-ghost:hover{background:#273335;color:#edf3ee}.workbench{min-height:0;flex:1;display:flex;position:relative}.stage{min-width:0;flex:1;position:relative;overflow:hidden;background:#202729}.canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}.canvas-status,.canvas-hint{position:absolute;top:15px;pointer-events:none;background:#151b1dcc;border:1px solid #2f3b3d;border-radius:8px;color:#9eb0aa;padding:8px 11px;font-size:10px;letter-spacing:.1px}.canvas-status{right:16px}.canvas-hint{left:16px;color:#7f928c}.canvas-status b{color:#526360;padding:0 5px}.right-panel{width:278px;flex:none;border-left:1px solid var(--line);background:#151c1e;padding:20px 18px;overflow:auto}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between}.right-panel h2{font-size:17px;margin:5px 0 0;font-weight:600}.icon-ghost{padding:7px;background:transparent}.brush-preview{margin:22px 0 18px;padding:15px 13px;background:#1c2527;border:1px solid #2d393b;border-radius:10px}.preview-line{border-radius:999px;width:100%;margin:9px 0 13px;box-shadow:0 0 20px #79c7ba30}.brush-preview span{font-size:10px;color:#7f918c}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:15px 12px;padding:2px 0 18px;border-bottom:1px solid var(--line)}.metric{display:flex;flex-direction:column;gap:4px}.metric strong{font-size:14px;color:#dce9e3}.metric span{font-size:10px;color:#73827e;text-transform:uppercase;letter-spacing:.7px}.panel-note{color:#6f807b;font-size:10px;line-height:1.6;margin-top:18px}.stylus-status{margin-top:18px;padding:12px;border:1px solid #2d393b;background:#1b2426;border-radius:9px;color:#82958e;font-size:10px;line-height:1.5}.stylus-status.connected{border-color:#3f756c;background:#1c302d;color:#b8d9d0}.stylus-status>div{display:flex;align-items:center;gap:6px;color:#d0e4dc;font-weight:600}.status-led{width:6px;height:6px;border-radius:50%;background:#6f807b}.connected .status-led{background:var(--mint);box-shadow:0 0 0 3px #79c7ba24}.stylus-status small{display:block;margin-top:6px;color:#91a49d;font-size:9px}.stylus-status .sample-count{color:#6f807b;margin-top:5px}.editor{padding:14px 0;border-bottom:1px solid var(--line)}.range-row{display:grid;grid-template-columns:92px 1fr 31px;align-items:center;gap:8px;margin:10px 0;color:#8da09a;font-size:10px}.range-row input,.scale-control input{accent-color:var(--mint);width:100%}.range-row b{font-family:DM Mono,monospace;font-size:9px;color:#b9c9c2;text-align:right}.tool-shelf{height:79px;flex:none;display:flex;align-items:center;gap:8px;padding:0 20px;background:#171e20;border-top:1px solid #2a3436;overflow-x:auto}.tool-cluster,.brush-cluster{display:flex;align-items:center;gap:5px}.tool-button,.brush-button{height:54px;min-width:58px;padding:7px 9px;border-radius:9px;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#879893;font-size:10px;white-space:nowrap}.brush-button{flex-direction:row;min-width:auto;height:40px;padding:7px 9px}.tool-button:hover,.brush-button:hover,.tool-button.active,.brush-button.active{background:#2d403d;color:#e5f0eb}.brush-dot{width:13px;height:13px;border-radius:50%;border:2px solid #ffffff22}.separator{height:38px;width:1px;background:#344143;margin:0 8px}.shelf-spacer{flex:1}.zoom-button{width:32px;height:32px;border-radius:7px;background:#222d2f;display:grid;place-items:center;color:#c9d7d1}.zoom-label{font:10px DM Mono,monospace;color:#8da19a;min-width:38px;text-align:center}.utility-bar{height:51px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:#131a1c;border-top:1px solid #273234;color:#95a8a0;font-size:10px}.utility-group{display:flex;align-items:center;gap:7px}.utility-bar button,.utility-bar select,.file-button{display:inline-flex;align-items:center;gap:6px;border-radius:7px;background:#1d2729;color:#a9bbb4;padding:7px 9px;font-size:10px}.utility-bar button:hover,.utility-bar button.selected{background:#31534d;color:#e2efea}.utility-bar select{border:0;outline:0}.toggle{display:flex;align-items:center;gap:5px;color:#91a59e}.toggle input{accent-color:var(--mint)}.scale-control{display:flex;align-items:center;gap:7px}.scale-control input{width:65px}.file-button{cursor:pointer}.file-button input{display:none}.selection-bar{height:46px;flex:none;display:flex;align-items:center;gap:7px;padding:0 20px;background:#223531;color:#bcd8d0;font-size:10px}.selection-bar>span{margin-right:8px}.selection-bar button{display:inline-flex;align-items:center;gap:5px;padding:7px 9px;border-radius:6px;background:#33534d;color:#e0efe9;font-size:10px}.selection-bar button:hover{background:#416960}.selection-bar button.danger{background:#633a3b}.selection-bar button.danger:hover{background:#824747}footer{height:25px;flex:none;padding:0 20px;display:flex;align-items:center;justify-content:space-between;background:#0f1416;color:#596a65;font-size:9px;letter-spacing:.2px}@media(max-width:850px){.right-panel{position:absolute;z-index:3;right:0;top:0;bottom:0;width:288px;transform:translate(100%);transition:transform .16s ease;box-shadow:-16px 0 30px #0005}.right-panel.open{transform:translate(0)}.utility-bar{overflow-x:auto}.utility-group{white-space:nowrap}.autosave{display:none}}@media(max-width:620px){.topbar{padding:0 14px}.topbar h1{font-size:14px}.tool-shelf{padding:0 10px}.canvas-hint{display:none}.utility-bar{padding:0 10px}.utility-bar .utility-group:first-child{display:none}}.tool-wheel{position:absolute;left:34px;bottom:28px;width:260px;height:260px;transform-origin:center;z-index:2;filter:drop-shadow(0 12px 24px #0008);transition:transform .16s ease}.wheel-outer{position:absolute;top:20px;right:20px;bottom:20px;left:20px;border-radius:50%;border:1px solid #526562;background:radial-gradient(circle,#1a2526 0,#1a2526 39%,#172021 40%,#172021 62%,#223331,#223331,#141b1d 65%);box-shadow:inset 0 0 0 8px #12191b,inset 0 0 0 9px #334542}.wheel-outer:after{content:"";position:absolute;top:55px;right:55px;bottom:55px;left:55px;border-radius:50%;border:1px solid #46615c;opacity:.8}.wheel-slot{position:absolute;width:50px;height:50px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:#263433;border:1px solid #45615b;color:#a3b9b1;z-index:3;transition:transform .12s,background .12s,color .12s}.wheel-slot:hover,.wheel-slot.active{background:#4a8278;color:#f0faf5;border-color:#9cd8ca;transform:scale(1.12)}.wheel-slot small{font-size:7px;line-height:1}.wheel-inner{position:absolute;top:77px;right:77px;bottom:77px;left:77px;z-index:3;display:flex;align-items:center;justify-content:center;gap:5px}.wheel-inner button{width:35px;height:52px;padding:3px;border-radius:8px;background:#22312f;color:#a9c0b8;border:1px solid #3b5853;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.wheel-inner button:hover{background:#37625b;color:#effaf5}.wheel-inner small{font-size:7px}.inner-glyph{font-size:15px;color:#d8e9e1}.wheel-center{position:absolute;left:calc(50% - 32px);top:calc(50% - 28px);width:64px;height:56px;border-radius:50%;z-index:4;background:#11191a;border:1px solid #668b83;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#cbe2da}.wheel-center span{width:20px;height:20px;border-radius:50%;border:2px solid #dcece4aa}.wheel-center small{font-size:7px;max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wheel-undo{position:absolute;right:-5px;top:91px;display:flex;flex-direction:column;gap:5px;z-index:4}.wheel-undo button{width:25px;height:25px;border-radius:7px;background:#293a37;color:#b6d2c8;border:1px solid #45665f;display:grid;place-items:center}.wheel-label{position:absolute;left:0;right:0;bottom:-2px;text-align:center;color:#718983;font:8px DM Mono,monospace;letter-spacing:1.5px;z-index:4}.tool-shelf{transition:opacity .16s ease}.utility-bar button.selected{box-shadow:0 0 0 1px #79c7ba66 inset}@media(max-width:850px){.tool-wheel{left:14px;bottom:18px;transform:scale(.86)}.tool-shelf{display:none}}@media(max-width:620px){.tool-wheel{left:6px;bottom:8px;transform:scale(.72)}.wheel-slot{width:46px;height:46px}.utility-bar .utility-group:first-child{display:flex}}.export-wrap{position:relative}.export-menu{position:absolute;right:0;bottom:42px;width:168px;padding:6px;background:#1b2527;border:1px solid #3a4b4c;border-radius:9px;box-shadow:0 12px 24px #0008;z-index:10}.export-menu button{width:100%;justify-content:space-between;text-align:left;background:transparent!important;border-radius:6px;color:#c6d7d0!important;padding:9px;font-size:10px}.export-menu button:hover{background:#31534d!important}.export-menu small{color:#718983;font-size:8px}.wheel-popup{position:absolute;left:112px;top:18px;z-index:8;width:245px;padding:13px;background:#172122ee;border:1px solid #63857e;border-radius:13px;box-shadow:0 18px 36px #000b;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#dcebe5}.popup-title{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;letter-spacing:.2px}.popup-title button{background:transparent;color:#9bb5ac;font-size:18px;line-height:1;padding:0 3px}.popup-subtitle{font-size:9px;color:#81958e;line-height:1.45;margin:5px 0 10px}.popup-brushes{display:grid;grid-template-columns:1fr 1fr;gap:6px}.popup-brushes button{display:grid;grid-template-columns:15px 1fr;grid-template-rows:1fr 1fr;column-gap:7px;align-items:center;text-align:left;padding:8px;border-radius:8px;background:#22302f;border:1px solid transparent;color:#c4d7cf;font-size:10px}.popup-brushes button:hover,.popup-brushes button.chosen{background:#31564f;border-color:#79c7ba;color:#f1fbf6}.popup-brushes button small{grid-column:2;color:#78908a;font-size:8px}.popup-brushes button.chosen small{color:#aed0c5}.popup-brush-dot{grid-row:1 / span 2;width:14px;height:14px;border-radius:50%;border:2px solid #ffffff44}.popup-link{width:100%;margin-top:10px;padding:8px;border-radius:7px;background:#22302f;color:#9ed0c3;text-align:left;font-size:9px}.popup-link:hover{background:#31564f}.color-popup{left:104px;top:36px;width:210px;text-align:center}.hue-ring{width:112px;height:112px;margin:12px auto;border-radius:50%;padding:14px;background:conic-gradient(#e66b6b,#f5b45d,#e9e768,#79c77f,#69cbd0,#7795e9,#c17be0,#e66b6b);box-shadow:0 0 0 1px #fff4}.hue-core{width:100%;height:100%;border-radius:50%;border:7px solid #172122;box-shadow:inset 0 0 0 1px #fff5}.color-palette{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin:8px 0 12px}.color-palette button{width:22px;height:22px;border-radius:50%;border:2px solid #ffffff22}.color-palette button:hover,.color-palette button.chosen{border-color:#fff;box-shadow:0 0 0 3px #79c7ba66}.custom-color{display:flex;align-items:center;justify-content:space-between;color:#8ea39c;font-size:9px;border-top:1px solid #324343;padding-top:10px}.custom-color input{width:35px;height:22px;border:0;padding:0;background:transparent}html,body,#root{overscroll-behavior:none}.app{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.canvas{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;cursor:crosshair}.canvas.pannable{cursor:grab}.canvas.pannable:active{cursor:grabbing}