@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap";:root{color:#e9edf4;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-optical-sizing:auto;--background:#0e1118;--surface:#171c26;--surface-raised:#1d2430;--surface-hover:#252e3d;--line:#2a3342;--text:#e9edf4;--muted:#8d99aa;--faint:#677486;--accent:#74b9ed;background:#0e1118;font-family:DM Sans,Noto Sans JP,sans-serif;font-weight:400}*{box-sizing:border-box}body{min-width:320px;height:100%;margin:0;overflow:hidden}html{height:100%}button,input{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible{outline-offset:3px;outline:2px solid #78bdf1}::selection{color:#fff;background:#347eac}.three-canvas{width:100%;height:100%;position:relative}.three-canvas canvas{z-index:0;width:100%;height:100%;image-rendering:pixelated;display:block;position:absolute;inset:0}.texture-debug-label{z-index:1;color:#eef4fa;pointer-events:none;background:#0f141cd1;border:1px solid #ffffff2e;border-radius:5px;padding:6px 9px;font-size:11px;position:absolute;top:10px;left:10px}.canvas-workspace{flex-direction:column;min-width:0;min-height:0;display:flex}.canvas-stage{flex:1;min-height:0;position:relative;container-type:size}.canvas-viewport{cursor:crosshair;touch-action:none;justify-content:center;align-items:center;padding:29px 26px;display:flex;position:absolute;inset:0;overflow:hidden}.canvas-frame{aspect-ratio:1;will-change:transform;background:#14213b;border:1px solid #b7c5d34d;flex:none;width:min(100cqw - 52px,100cqh - 58px,100dvh - 260px);position:relative;overflow:hidden;box-shadow:0 18px 48px #00000052,0 0 0 5px #19202bc7}.canvas-frame>.three-canvas{width:100%;height:100%;display:block}.canvas-statusbar{color:#728094;justify-content:space-between;align-items:center;min-height:31px;padding:0 5px;font-size:9px;display:flex}.canvas-statusbar>span:first-child{align-items:center;gap:7px;display:flex}.live-dot{background:#65bd9d;border-radius:50%;width:5px;height:5px;display:inline-block;box-shadow:0 0 8px #65bd9d80}@media (width<=760px){.canvas-viewport{padding:25px 20px}.canvas-frame{width:min(100cqw - 40px,100cqh - 50px,60vh)}}@media (width<=520px){.canvas-viewport{padding:24px 17px}.canvas-frame{width:min(100cqw - 34px,100cqh - 48px,48vh)}}.action-tile{color:#c1cbd8;cursor:pointer;background:linear-gradient(145deg,#232c38,#1a212c);border:1px solid #303947;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:7px;min-height:68px;transition:background .14s,border-color .14s;display:flex}.action-tile span{font-size:10px}.action-tile svg{color:#a9bbcc}.action-tile:hover{background:#2a3543;border-color:#526a7e}.action-tile:disabled{color:#707c8b;cursor:not-allowed;background:#171d26;border-color:#252d38}.action-tile:disabled svg{color:#65707e}.action-tile:disabled:hover{background:#171d26;border-color:#252d38}.history-buttons{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.canvas-toolbar{background:#1a202b;border:1px solid #29313e;border-radius:9px;flex-wrap:wrap;justify-content:space-between;align-items:center;min-width:0;min-height:43px;padding:0 12px;display:flex}.canvas-meta{color:#98a5b6;align-items:center;gap:8px;font-size:10px;display:flex}.canvas-meta-icon{color:#88a6bf}.canvas-meta strong{color:#e0e6ef;font-size:10px;font-weight:600}.meta-divider{background:#394352;width:1px;height:13px;margin:0 2px}.ratio-badge{color:#93a2b5;background:#29323f;border-radius:4px;padding:2px 5px;font-size:9px}.canvas-zoom{color:#b3becb;align-items:center;gap:7px;font-size:10px;display:flex}.canvas-toolbar-actions{align-items:center;gap:8px;display:flex}.canvas-toolbar-actions .history-buttons{gap:4px;display:flex}.canvas-toolbar-actions .history-buttons .action-tile{border-radius:6px;flex-direction:row;gap:4px;min-height:27px;padding:0 7px}.canvas-toolbar-actions .history-buttons .action-tile svg{width:14px;height:14px}.canvas-toolbar-actions .history-buttons .action-tile span{font-size:9px}.texture-debug-fields{border-top:1px solid #303947;flex-wrap:wrap;flex:1 0 100%;align-items:center;gap:8px 14px;width:100%;min-width:0;padding:7px 0 8px;display:flex}.texture-debug-field-group{color:#8290a2;white-space:nowrap;align-items:center;gap:5px;font-size:9px;display:flex}.texture-debug-field-group>div{align-items:center;gap:3px;display:flex}.texture-debug-field{color:#aab6c5;white-space:nowrap;cursor:pointer;background:#202835;border:1px solid #354050;border-radius:5px;min-height:23px;padding:0 6px;font-size:9px}.texture-debug-field:hover{color:#e0e8f2;background:#2a3544}.texture-debug-field.selected{color:#d6ebfb;background:#263c4d;border-color:#6387a2}.texture-debug-toggle{color:#aab6c5;white-space:nowrap;cursor:pointer;background:#202835;border:1px solid #354050;border-radius:6px;justify-content:center;align-items:center;gap:5px;min-height:27px;padding:0 8px;font-size:9px;display:inline-flex}.texture-debug-toggle:hover{color:#e0e8f2;background:#2a3544}.texture-debug-toggle.selected{color:#d6ebfb;background:#263c4d;border-color:#6387a2}.canvas-toolbar{position:relative}.canvas-zoom button{color:#98a7b9;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;place-items:center;width:25px;height:25px;display:grid}.canvas-zoom button:hover{background:#252e3c}@media (width<=520px){.canvas-toolbar{min-height:39px;padding:0 9px}.canvas-meta{gap:6px;font-size:9px}.canvas-meta strong{font-size:9px}.canvas-toolbar-actions{gap:4px}.canvas-toolbar-actions .history-buttons{gap:2px}.canvas-toolbar-actions .history-buttons .action-tile{padding:0 5px}.canvas-toolbar-actions .history-buttons .action-tile span{display:none}.texture-debug-fields{scrollbar-width:thin;flex-wrap:nowrap;overflow-x:auto}.texture-debug-field-group{flex:none}.texture-debug-toggle{gap:3px;min-height:25px;padding:0 5px;font-size:8px}.texture-debug-toggle span{display:none}}.palette-section{border-top:1px solid #2b3441;margin-top:9px;padding-top:15px}.palette-section .section-title{justify-content:space-between;align-items:center;display:flex}.palette-actions{align-items:center;gap:5px;display:flex}.palette-actions>span{color:#748195;font-size:9px}.palette-actions button{color:#aebaca;cursor:pointer;background:#1b222d;border:1px solid #344050;border-radius:5px;place-items:center;width:21px;height:21px;padding:0;display:grid}.palette-actions button:hover:not(:disabled){color:#e0effa;background:#293545}.palette-actions button:disabled{cursor:not-allowed;opacity:.45}.palette-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;margin-top:10px;display:grid}.palette-swatch{aspect-ratio:1;color:#fff;cursor:grab;border:1px solid #ffffff14;border-radius:5px;place-items:center;width:100%;padding:0;transition:transform .12s,box-shadow .12s,opacity .12s;display:grid;position:relative}.palette-swatch:hover{z-index:1;transform:scale(1.12)}.palette-swatch.active{outline-offset:2px;outline:2px solid #c5e8ff;box-shadow:0 0 0 4px #72b9e729}.palette-swatch:active{cursor:grabbing}.palette-swatch.dragging{opacity:.4}.palette-swatch.drop-target{outline-offset:2px;outline:2px dashed #c5e8ff}@media (width<=520px){.palette-section{border-top:0;margin-top:0;padding-top:0}.palette-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}}.hue-ring{background:conic-gradient(#f44242,#f8d33d,#46d64d,#38d2c1,#3979ed,#a243e8,#e842a6,#f44242);border-radius:50%;position:absolute;inset:0;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 13px),#000 calc(100% - 12px));mask:radial-gradient(farthest-side,#0000 calc(100% - 13px),#000 calc(100% - 12px))}.hue-ring-control{touch-action:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.hue-ring-hit-area{fill:#0000;stroke:#0000;stroke-width:13px;pointer-events:stroke;cursor:crosshair}.hue-ring-marker{pointer-events:none;background:0 0;border:2px solid #f5f8fc;border-radius:50%;width:13px;height:13px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 1px 5px #0000008c}.color-section{min-width:0}.color-wheel-wrap{width:min(100%,205px);margin:12px auto 13px}.color-picker{aspect-ratio:1;width:100%;position:relative}.color-wheel-wrap .react-colorful{pointer-events:none;gap:0;width:100%;height:100%;position:absolute;inset:0}.color-wheel-wrap .react-colorful__saturation{pointer-events:auto;border-bottom:0;border-radius:2px;width:52%;height:52%;position:absolute;top:24%;left:24%}.color-wheel-wrap .react-colorful__hue{display:none}.color-wheel-wrap .react-colorful__pointer{border:2px solid #f5f8fc;width:13px;height:13px;box-shadow:0 1px 5px #0000008c}.color-wheel-wrap .react-colorful__saturation-pointer{width:11px;height:11px}.active-color-row{color:#8491a2;align-items:center;gap:8px;min-height:31px;font-size:9px;display:flex}.active-swatch{border:1px solid #ffffff4d;border-radius:4px;width:15px;height:15px;box-shadow:0 2px 5px #00000038}.active-color-row code{color:#c8d2df;letter-spacing:.4px;margin-left:auto;font-family:inherit;font-size:9px}@media (width>=1500px){.color-wheel-wrap{width:min(100%,222px)}}@media (width<=520px){.color-section{grid-row:span 2}.color-section>.section-title{margin-bottom:10px}.color-wheel-wrap{width:min(100%,205px);margin:0 auto 10px}.active-color-row{flex-wrap:wrap;gap:6px}.active-color-row code{width:100%;margin-left:21px}}.panel{background:linear-gradient(155deg,#1c232ff7,#161c26fa);border:1px solid #29313e;border-radius:11px;min-width:0;padding:19px 16px;box-shadow:0 12px 35px #00000024}.panel-heading{justify-content:space-between;align-items:center;margin-bottom:22px;display:flex}.eyebrow{color:#7d8b9e;letter-spacing:1.15px;margin-bottom:5px;font-size:9px;font-weight:700;display:block}.panel-heading h2{color:#e8edf5;letter-spacing:-.2px;margin:0;font-size:14px;font-weight:600}.icon-button{color:#95a2b4;cursor:pointer;background:#1b222d;border:1px solid #2d3746;border-radius:7px;place-items:center;width:30px;height:30px;display:grid}.icon-button:hover{background:#252e3c}.subtle-button{background:0 0;border-color:#0000}.section-title{color:#b9c2cf;font-size:11px;font-weight:500}@media (width>=1500px){.panel{padding:22px 18px}}@media (width<=1050px){.panel{padding-left:12px;padding-right:12px}}@media (width<=760px){.panel{padding:16px 13px}.panel-heading{margin-bottom:17px}}.color-panel{flex-direction:column;padding:19px 16px 16px;display:flex;overflow-y:hidden}.color-heading{margin-bottom:16px}@media (width<=760px){.color-panel{display:none}.color-panel.mobile-panel-open{z-index:10;width:min(360px,100% - 76px);display:flex;position:absolute;top:51px;bottom:8px;right:60px;overflow-y:auto}}@media (height<=660px) and (width>=761px){.color-panel{overflow-y:auto}}@media (width<=520px){.color-panel.mobile-panel-open{grid-template-columns:minmax(0,1fr) minmax(110px,.9fr);align-content:start;column-gap:12px;display:grid}.color-panel .color-heading{grid-column:1/-1;margin-bottom:13px}}.tool-type-selector{border:0;min-width:0;margin:0 0 17px;padding:0}.tool-type-selector legend{color:#8492a4;letter-spacing:.08em;margin-bottom:8px;font-size:10px;font-weight:700}.tool-type-selector>div{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;display:grid}.tool-type-option{color:#a5b3c3;cursor:pointer;background:#10151d5c;border:1px solid #303947;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:3px;min-width:0;min-height:52px;padding:5px 3px 4px;font-size:9px;display:flex}.tool-type-option:hover{color:#e4edf7;background:#252e3b}.tool-type-option.selected{color:#b3def6;background:#325d7845;border-color:#4a93bf}.tool-type-option span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (width<=520px){.tool-type-selector{margin-bottom:12px}}.direction-toggle{color:#bdc6d2;cursor:pointer;text-align:left;background:#10151d5c;border:1px solid #303947;border-radius:8px;align-items:center;gap:9px;min-height:40px;margin:-7px 0 15px;padding:0 9px;font-size:11px;display:flex}.direction-toggle>svg{color:#a5b3c3}.direction-toggle.is-on{color:#b3def6;background:#325d7845;border-color:#4a93bf}.direction-toggle.is-on>svg{color:#83caff}@media (width<=520px){.direction-toggle{align-self:start;gap:6px;height:34px;min-height:34px;padding:0 7px;font-size:10px}}.brush-size-section{margin-top:auto;padding-top:17px}.brush-size-heading{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.brush-size-heading output{color:#d4deea;text-align:center;background:#222a36;border:1px solid #303948;border-radius:5px;min-width:48px;padding:4px 7px;font-size:10px}.brush-size-heading output span{color:#8794a5}.brush-size-section input[type=range]{appearance:none;background:linear-gradient(to right, #67b7e9 var(--range-progress), #394554 var(--range-progress));cursor:pointer;border-radius:99px;width:100%;height:5px;margin:0;display:block}.brush-size-section input[type=range]::-webkit-slider-thumb{appearance:none;background:#7fc4ee;border:2px solid #e8f4fc;border-radius:50%;width:15px;height:15px;box-shadow:0 1px 5px #00000061}.brush-size-section input[type=range]::-moz-range-thumb{background:#7fc4ee;border:2px solid #e8f4fc;border-radius:50%;width:12px;height:12px;box-shadow:0 1px 5px #00000061}.range-labels{color:#697789;justify-content:space-between;margin-top:7px;font-size:8px;display:flex}@media (width<=520px){.color-panel .brush-size-section{border-top:1px solid #2b3441;margin-top:17px;padding-top:15px}}.tool-options{margin-top:2px}.tool-options h3{color:#8492a4;letter-spacing:.08em;margin:0 0 10px;font-size:10px;font-weight:700}.tool-options .brush-size-section{margin-top:0;padding-top:0}.bucket-fill-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;display:grid}.bucket-fill-options button{color:#a5b3c3;cursor:pointer;background:#10151d5c;border:1px solid #303947;border-radius:7px;min-height:38px;padding:5px;font-size:10px}.bucket-fill-options button:hover{color:#e4edf7;background:#252e3b}.bucket-fill-options button.selected{color:#b3def6;background:#325d7845;border-color:#4a93bf}.tool-options-empty{color:#788699;margin:0;font-size:10px}.control-section{margin-bottom:20px}.choice-row{gap:7px;margin-top:9px;display:grid}.shape-row{grid-template-columns:repeat(3,1fr)}.paint-row{grid-template-columns:repeat(3,minmax(0,1fr))}.tool-choice{color:#9aa8b9;cursor:pointer;background:#0f141c6e;border:1px solid #0000;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:7px;min-width:0;height:62px;padding:8px 3px 6px;transition:background .14s,border-color .14s,color .14s;display:flex}.tool-choice span{text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:9px;overflow:hidden}.tool-choice:hover{color:#e4edf7;background:#252e3b}.tool-choice.selected{color:#a9dafa;background:linear-gradient(145deg,#2e536db3,#233546c2);border-color:#5da8d7;box-shadow:inset 0 0 0 1px #64b1e01a,0 0 14px #4497cc14}.tool-choice.unavailable,.tool-choice.unavailable:hover,.tool-choice.unavailable.selected{color:#68717e;box-shadow:none;filter:grayscale();opacity:.55;cursor:not-allowed;background:#0f141c40;border-color:#0000}.tool-choice.unavailable-shake{animation:.42s ease-in-out unavailable-shake}@keyframes unavailable-shake{0%,to{transform:translate(0)}15%,45%,75%{transform:translate(-2px)}30%,60%,90%{transform:translate(2px)}}@media (prefers-reduced-motion:reduce){.tool-choice.unavailable-shake{animation:none}}@media (width<=520px){.control-section{margin-bottom:13px}}.tools-panel{flex-direction:column;display:flex;overflow-y:auto}@media (width<=760px){.tools-panel{display:none}.tools-panel.mobile-panel-open{z-index:10;width:min(340px,100% - 76px);display:flex;position:absolute;top:51px;bottom:8px;right:60px;overflow-y:auto}}@media (width<=520px){.tools-panel.mobile-panel-open{grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:8px 13px;display:grid}.tools-panel.mobile-panel-open>.panel-heading{grid-area:1/1/auto/-1;margin-bottom:13px}.tools-panel.mobile-panel-open>.control-section:first-of-type{grid-area:2/1;margin-bottom:0}.tools-panel.mobile-panel-open>.direction-toggle{grid-area:3/1;margin:0}.tools-panel.mobile-panel-open>.control-section:nth-of-type(2){grid-area:2/2;margin-bottom:0}.tools-panel.mobile-panel-open>.tool-type-selector{grid-area:3/1/auto/-1;margin:0}.tools-panel.mobile-panel-open>.tool-options{grid-area:4/1/auto/-1}.tools-panel.mobile-panel-open .tool-choice{height:54px}}.topbar{background:#11151df0;border-bottom:1px solid #252b36;flex:none;align-items:center;gap:34px;height:66px;padding:0 30px;display:flex;position:relative}.brand-group{align-items:center;gap:8px;display:flex}.brand{color:#f3f5fa;letter-spacing:-.5px;align-items:center;gap:9px;font-size:15px;font-weight:700;text-decoration:none;display:flex}.shortcuts-help-button,.shortcuts-dialog-close{color:#aeb9c8;cursor:pointer;background:#1b222d;border:1px solid #2d3746;border-radius:7px;justify-content:center;align-items:center;width:30px;height:30px;padding:0;display:inline-flex}.shortcuts-help-button:hover,.shortcuts-dialog-close:hover{color:#dce8f4;background:#252e3c}.shortcuts-help-button:focus-visible,.shortcuts-dialog-close:focus-visible{outline-offset:2px;outline:2px solid #8cc9ee}.shortcuts-dialog{color:#e5eaf1;background:#171c25;border:1px solid #344051;border-radius:12px;width:min(440px,100vw - 32px);max-height:min(620px,100dvh - 32px);padding:20px;box-shadow:0 20px 70px #0000008c}.shortcuts-dialog::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#05080db8}.shortcuts-dialog-header{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.shortcuts-dialog-header h2{margin:0;font-size:16px;font-weight:650}.shortcuts-dialog-close{width:32px;height:32px}.shortcuts-list{gap:7px;margin:0;padding:0;list-style:none;display:grid}.shortcuts-list li{color:#b9c3d0;border:1px solid #29313e;border-radius:7px;justify-content:space-between;align-items:center;gap:14px;min-height:36px;padding:7px 10px;font-size:12px;display:flex}.shortcuts-list kbd{color:#e0e8f1;font:inherit;flex:none;font-size:11px;font-weight:600}.brand-mark{object-fit:contain;width:29px;height:29px}.document-title{color:#b6c0ce;background:#171c25;border:1px solid #29313e;border-radius:7px;align-items:center;gap:9px;min-width:0;height:34px;padding:0 11px;font-size:12px;display:flex}.document-dot{background:#d7ad66;border-radius:50%;width:7px;height:7px;transition:background-color .18s,box-shadow .18s;box-shadow:0 0 9px #d7ad6680}.document-dot.saved{background:#65bd9d;box-shadow:0 0 9px #65bd9d80}.document-name-input{width:180px;min-width:0;color:inherit;font:inherit;background:0 0;border:0;outline:0;padding:0}.document-name-input:focus-visible{outline-offset:3px;border-radius:2px;outline:1px solid #6387a2}.topbar-actions{align-items:center;gap:11px;margin-left:auto;display:flex}.saved-status{color:#8190a2;align-items:center;gap:7px;margin-right:5px;font-size:11px;display:inline-flex}.saved-status>span{background:#65bd9d;border-radius:50%;width:6px;height:6px;display:inline-block;box-shadow:0 0 8px #65bd9d80}.project-file-input{display:none}.project-file-status{z-index:1;color:#b9c3d0;opacity:1;background:#171c25;border:1px solid #2d3746;border-radius:6px;max-width:min(440px,100vw - 40px);padding:6px 9px;font-size:11px;transition:opacity .7s;position:absolute;top:54px;right:30px}.project-file-status.fading{opacity:0;pointer-events:none}.topbar-button,.export-button{cursor:pointer;color:#b9c3d0;background:#1b222d;border:1px solid #2d3746;border-radius:7px;justify-content:center;align-items:center;gap:7px;height:34px;padding:0 12px;font-size:11px;display:inline-flex}.topbar-button:hover{background:#252e3c}.export-button{color:#111924;background:#a9d8f6;border-color:#9dc9e7;font-weight:700}.export-button:hover{background:#c1e4fa}.export-button:disabled{cursor:wait;opacity:.7}.canvas-export-status{z-index:1;color:#b9c3d0;background:#171c25;border:1px solid #2d3746;border-radius:6px;padding:6px 9px;font-size:11px;position:absolute;top:54px;right:30px}@media (width<=1050px){.topbar{gap:20px;padding:0 18px}.canvas-export-status,.project-file-status{right:18px}}@media (width<=760px){.topbar{gap:12px;height:58px;padding:0 14px}.document-title{gap:7px;padding:0 8px;font-size:10px}.document-name-input{width:120px}.saved-status,.topbar-button span{display:none}.topbar-actions{gap:7px}.topbar-button,.export-button{width:34px;padding:0}.export-button span{display:none}.canvas-export-status,.project-file-status{right:14px}}@media (width<=520px){.brand{gap:6px;font-size:13px}.brand-mark{width:26px;height:26px}.document-title{min-width:0;max-width:150px}.document-name-input{text-overflow:ellipsis;white-space:nowrap;width:100px;overflow:hidden}.topbar{gap:8px}}.mobile-panel-nav{display:none}@media (width<=760px){.mobile-panel-nav{z-index:20;top:max(119px, calc(env(safe-area-inset-top) + 113px));flex-direction:column;gap:7px;display:flex;position:fixed;right:8px}.mobile-panel-nav button{color:#b7c5d5;cursor:pointer;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#19212cf5;border:1px solid #354354;border-radius:10px;justify-content:center;align-items:center;width:44px;height:44px;padding:0;display:flex;box-shadow:0 4px 14px #00000047}.mobile-panel-nav button span{clip:rect(0, 0, 0, 0);white-space:nowrap;clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.mobile-panel-nav button.active{color:#b7e0fb;background:#294256;border-color:#4c87ad;box-shadow:0 0 0 2px #5fa9d62b,0 4px 14px #00000047}}#root{height:100%}.app-shell{background:radial-gradient(ellipse at 51% 47%, #25374b2e, transparent 49%), var(--background);flex-direction:column;height:100dvh;min-height:0;display:flex;overflow:hidden}.workspace{flex:1;grid-template-rows:auto minmax(0,1fr);grid-template-columns:220px minmax(0,1fr) 274px;gap:18px;width:min(1600px,100%);min-height:0;margin:0 auto;padding:20px 24px 16px;display:grid;overflow:hidden}.workspace>.tools-panel,.workspace>.color-panel{grid-row:1/3}.workspace>.tools-panel{grid-column:1}.workspace>.canvas-toolbar,.workspace>.canvas-workspace{grid-column:2}.workspace>.canvas-toolbar{grid-row:1}.workspace>.canvas-workspace{grid-row:2}.workspace>.color-panel{grid-column:3}@media (width>=1500px){.workspace{grid-template-columns:238px minmax(0,1fr) 290px;gap:22px;padding-top:28px;padding-bottom:24px}}@media (width<=1050px){.workspace{grid-template-columns:190px minmax(0,1fr) 238px;gap:12px;padding-left:16px;padding-right:16px}}@media (width<=760px){.workspace{grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr);gap:8px;width:100%;padding:8px;display:grid;position:relative}.workspace>.tools-panel,.workspace>.color-panel,.workspace>.canvas-toolbar,.workspace>.canvas-workspace{grid-column:1}.workspace>.canvas-toolbar{grid-row:1}.workspace>.canvas-workspace{grid-row:2;height:auto}.workspace>.tools-panel,.workspace>.color-panel{grid-row:1/3}}@media (width<=520px){.workspace{padding-left:6px;padding-right:6px}}@media (height<=860px) and (width>=761px){.workspace{padding-top:10px;padding-bottom:10px}.panel{padding-top:12px;padding-bottom:12px}.panel-heading{margin-bottom:12px}.control-section{margin-bottom:10px}.tool-choice{height:52px}.action-tile{gap:4px;min-height:55px}.palette-section{margin-top:3px;padding-top:8px}.palette-grid{gap:5px;margin-top:6px}.brush-size-section{padding-top:9px}}@media (height<=700px) and (width>=761px){.palette-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:3px}.palette-section{padding-top:5px}}@media (height<=660px) and (width>=761px){.color-heading{margin-bottom:8px}.color-wheel-wrap{margin-top:3px;margin-bottom:3px}.brush-size-section{padding-top:5px}}