/* Offline subset of official LXGW WenKai 1.522; license in fonts/OFL.json. */
@font-face{font-family:"LXGW WenKai";src:url("./fonts/LXGWWenKai-Regular-UI.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
:root{--safe-top:var(--safe-area-inset-top,0px);--safe-right:var(--safe-area-inset-right,0px);--safe-bottom:var(--safe-area-inset-bottom,0px);--safe-left:var(--safe-area-inset-left,0px);font-family:"LXGW WenKai",serif;font-size:15px;font-weight:400;font-synthesis:none;--ink:#284f4a;--muted:#53665a;--paper:#e9e3d3;--surface:#f4eedf;--surface-ink:#284f4a;--surface-muted:#53665a;--surface-active:#e5dcc8;--surface-line:#c5bfaa;--control-line:#777361;--accent:#963f30;--disabled:#e6e1d5;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}html{height:100%;touch-action:manipulation}body{margin:0;overflow:hidden;overscroll-behavior:none;-webkit-touch-callout:none}
body[data-palette=ink]{--ink:#e6ebda;--muted:#c4d2c8;--paper:#173538;--surface:#f0ecdc;--surface-ink:#284a47;--surface-muted:#52645b;--surface-active:#dedfcf;--surface-line:#c0c5b3;--control-line:#6f7869;--accent:#933d31;--disabled:#e0e1d5}
body[data-palette=ochre]{--ink:#5c4231;--muted:#725944;--paper:#ecdcc4;--surface:#f7ecd7;--surface-ink:#5c4231;--surface-muted:#725944;--surface-active:#eaddc3;--surface-line:#cbb89b;--control-line:#856c50;--accent:#8f3c2c;--disabled:#e9dfcd}
main,.canvas-shell{position:fixed;top:0;right:0;bottom:0;left:0;inset:0}.canvas-shell{overflow:hidden}canvas{position:absolute;display:block;touch-action:none;-webkit-user-select:none;user-select:none;cursor:crosshair}
.silk-frame{position:fixed;top:10px;right:10px;bottom:10px;left:10px;inset:10px;border:1px solid rgba(40,79,74,.15);pointer-events:none}@supports (color:color-mix(in srgb,black 15%,transparent)){.silk-frame{border:1px solid color-mix(in srgb,var(--ink) 15%,transparent)}}.silk-frame:before,.silk-frame:after{content:"";position:absolute;width:22px;height:22px;border-color:#b5a16e;opacity:.6}.silk-frame:before{left:-2px;top:-2px;border-left:2px solid;border-top:2px solid}.silk-frame:after{bottom:-2px;right:-2px;border-bottom:2px solid;border-right:2px solid}
.topbar{position:fixed;top:22px;top:calc(22px + var(--safe-top));left:23px;left:calc(23px + var(--safe-left));right:20px;right:calc(20px + var(--safe-right));display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;z-index:3}@supports (top:max(0px,1px)){.topbar{top:max(22px,var(--safe-top));left:max(23px,var(--safe-left));right:max(20px,var(--safe-right))}}.topbar>*+*{margin-left:12px}.brand{display:flex;align-items:center;-webkit-user-select:none;user-select:none;min-width:0}.brand>*+*{margin-left:12px}.seal{display:grid;align-items:center;justify-items:center;place-items:center;flex-shrink:0;width:32px;height:36px;border:1px solid #963f30;outline:1px solid rgba(150,63,48,0.376471);outline-offset:2px;background:#963f30;color:#fff2d7;border-radius:2px;transform:rotate(-3deg);font-size:22px}h1{font-size:24px;letter-spacing:4px;font-weight:400;margin:0 0 4px;white-space:nowrap}.brand p{font-size:9px;letter-spacing:1.6px;margin:0;color:var(--muted);white-space:nowrap}.top-actions{display:flex;pointer-events:auto;flex-shrink:0}.top-actions>*+*{margin-left:8px}
/* Opaque paper keeps text contrast independent of the changing painting. */
.glass,dialog{--ink:var(--surface-ink);--muted:var(--surface-muted);--active:var(--surface-active);--line:var(--surface-line);color:var(--ink);background:var(--surface);border:1px solid var(--line);box-shadow:0 7px 30px rgba(26,65,51,0.070588),inset 0 1px 0 rgba(255,255,255,0.6)}
button,input,select,textarea,summary{font-family:inherit}button{font-size:inherit;font-weight:400;line-height:1.4;color:inherit;border:1px solid transparent;background:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus,summary:focus,input:focus{outline:2px solid var(--accent);outline-offset:3px}button:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:1;color:var(--muted);background:var(--disabled);border:1px dashed var(--control-line);cursor:not-allowed;box-shadow:none}button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon-button{width:42px;height:42px;border-radius:50%;display:grid;align-items:center;justify-items:center;place-items:center}.share-button{min-height:42px;border-radius:22px;padding:0 15px;display:flex;align-items:center;font-size:14px;white-space:nowrap}.share-button>*+*{margin-left:8px}.share-button:hover,.icon-button:hover{background:var(--surface-active)}
/* Permanent bottom tray; its measured border box includes the safe bottom inset. */
.materials button,.dock-bottom>summary{font-size:13px;font-weight:400;line-height:1.4;white-space:nowrap}
.dock{position:fixed;right:0;bottom:0;left:0;top:auto;width:auto;max-width:none;max-height:none;overflow:visible;display:grid;grid-template-columns:minmax(0,1fr) 36px;grid-gap:6px;align-items:center;height:86px;height:calc(86px + var(--safe-bottom));padding:4px 6px 5px;padding-top:4px;padding-right:calc(6px + var(--safe-right));padding-bottom:calc(5px + var(--safe-bottom));padding-left:calc(6px + var(--safe-left));border:0;border-top:1px solid var(--line);border-radius:0;z-index:5}.panel-heading>button{flex-shrink:0;width:40px;height:40px;font-size:25px;line-height:1;color:var(--muted);border-radius:7px}.panel-heading>button:hover{background:var(--active)}
.materials{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-gap:4px}.materials button{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:16px 14px;grid-gap:1px;align-items:center;justify-content:center;min-height:36px;height:36px;min-width:0;padding:1px 3px;color:var(--muted);border-radius:6px;position:relative}.materials button>i,.materials button>svg,.materials button>span{justify-self:center}.materials button>span{width:1em;text-align:center;line-height:14px}.materials button:hover{background:var(--active)}.materials button[aria-pressed=true]{color:var(--ink);background:var(--active);border-color:var(--accent)}.materials i{display:block;flex-shrink:0;width:16px;height:16px;background:var(--swatch);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.082353);filter:drop-shadow(0 2px 1px rgba(18,51,34,0.07451))}.materials .powder{clip-path:polygon(0 85%,15% 50%,28% 70%,50% 15%,73% 63%,82% 43%,100% 85%,75% 100%,25% 100%)}.materials .drop{border-radius:70% 25% 65% 50%;transform:rotate(-45deg);width:13px;height:15px}.materials .rock{clip-path:polygon(8% 40%,36% 5%,81% 15%,100% 75%,67% 100%,4% 90%)}.materials .earth{border-radius:5px 8px 3px 4px;background:linear-gradient(160deg,transparent 2%,rgba(255,255,255,0.156863) 4%,transparent 45%),var(--swatch)}.materials .seed{border-radius:100% 0 100% 0;width:10px;height:14px;transform:rotate(18deg)}.materials .wood-shaving{width:16px;height:16px;fill:none;stroke:var(--swatch);stroke-width:2.5;filter:drop-shadow(0 1px 0 rgba(18,51,34,0.16))}.materials .oil{border-radius:65% 25% 60% 50%;width:13px;height:15px;transform:rotate(-45deg);opacity:.8}.materials .flame{border-radius:90% 3% 70% 70%;transform:rotate(-30deg);box-shadow:inset 4px -3px 0 #e6b568}.materials .snow{border-radius:50%;background:radial-gradient(circle,var(--swatch) 36%,transparent 41%) 0 0/7px 7px;filter:drop-shadow(0 0 1px #749b95)}.materials .gold{background:radial-gradient(circle,#fff5ba 15%,var(--swatch) 27%,transparent 33%) 0 0/8px 8px;filter:drop-shadow(0 0 2px rgba(202,155,76,0.333333));transform:rotate(12deg)}
/* Focus stays inside the compact tray targets. */
.dock button:focus,.dock summary:focus{outline:1px solid var(--control-line);outline-offset:-3px}.dock button:focus-visible,.dock summary:focus-visible{outline:1px solid var(--control-line);outline-offset:-3px}.dock button:focus:not(:focus-visible),.dock summary:focus:not(:focus-visible){outline:none}
/* Tools open above the tray without changing its measured height. */
.dock-bottom{position:relative;border:0;margin:0;padding:0;min-width:0;font-size:13px;line-height:1.4;color:var(--muted)}.dock-bottom>summary{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:6px;list-style:none;color:var(--ink);-webkit-tap-highlight-color:transparent;touch-action:manipulation}.dock-bottom>summary::-webkit-details-marker{display:none}.dock-bottom>summary>*+*{margin-top:2px}.dock-bottom>summary svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg)}.dock-bottom[open]>summary{background:var(--active)}.dock-bottom[open]>summary svg{transform:rotate(270deg)}.tool-popover{position:absolute;right:0;bottom:calc(100% + 8px);width:132px;max-height:calc(100vh - 96px - var(--safe-top) - var(--safe-bottom));overflow:auto;padding:6px;border-radius:9px}.brush-controls{display:flex;align-items:center;justify-content:space-between}.brush-controls button{width:34px;height:34px;border-radius:18px;display:grid;align-items:center;justify-items:center;place-items:center;color:var(--muted)}.brush-controls button[aria-pressed=true]{background:var(--active);color:var(--ink);border-color:var(--accent)}.brush-controls i{width:var(--dot);height:var(--dot);background:currentColor;border-radius:50%}.tools{display:flex;flex-direction:column;width:100%;margin-top:5px}.tools>*+*{margin-top:2px}.tools button{width:100%;min-width:0;min-height:36px;display:flex;justify-content:center;align-items:center;border-radius:6px;font-size:13px;color:var(--muted)}.tools button>*+*{margin-left:5px}.tools button:hover,.tools button[aria-pressed=true]{background:var(--active);color:var(--ink)}.tools button[aria-pressed=true]{border-color:var(--accent)}.tools button svg{width:15px;height:15px}
.panel{position:fixed;right:18px;right:calc(18px + var(--safe-right));top:78px;top:calc(78px + var(--safe-top));width:304px;max-width:calc(100% - 36px - var(--safe-left) - var(--safe-right));max-height:calc(100vh - 102px - var(--safe-top) - var(--safe-bottom));overflow:auto;border-radius:10px;padding:17px;z-index:6;font-size:14px}@supports (top:max(0px,1px)){.panel{right:max(18px,var(--safe-right));top:max(78px,calc(var(--safe-top) + 56px))}}@supports (height:100dvh){.panel{max-height:calc(100dvh - 102px - var(--safe-top) - var(--safe-bottom))}}.panel-heading{display:flex;justify-content:space-between;align-items:center;font-size:19px;min-width:0}.panel-heading>*+*{margin-left:12px}.panel-heading>div{min-width:0}.palettes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:7px;margin:14px 0 18px}.palettes button{position:relative;min-width:0;font-size:15px;padding:8px 5px;border:1px solid var(--control-line);border-radius:6px;color:var(--muted)}.palettes button[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent);background:var(--active);color:var(--ink)}.palettes i{display:block;height:23px;border-radius:3px;margin-bottom:8px;background:linear-gradient(90deg,var(--a) 0 25%,var(--b) 25% 50%,var(--c) 50% 75%,var(--d) 75%)}
.temperature-control{margin:0 0 15px}.temperature-control button{width:100%;min-height:44px;padding:9px 5px;border:1px solid var(--control-line);border-radius:6px;font-size:16px}.temperature-control button[aria-pressed=true]{background:var(--active);border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}.temperature-control small{display:block;margin-top:7px;font-size:13px;line-height:1.7;color:var(--muted)}.switches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:8px}.switches button{min-width:0;min-height:44px;padding:9px 5px;border:1px solid var(--control-line);border-radius:6px;font-size:15px}.switches [aria-pressed=true]{background:var(--active);border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}#drain-count{font-size:12px;display:block;text-align:right;margin:8px 0 11px;color:var(--muted)}#hint{font-size:14px;line-height:1.8;color:var(--muted);padding-top:12px;border-top:1px solid var(--line);margin-bottom:14px}.scene-options{margin-top:16px;font-size:14px;color:var(--muted)}.scene-options>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:6px;margin-top:8px}.scene-options button{min-width:0;min-height:42px;font-size:14px;padding:8px 2px;border-radius:6px;border:1px solid var(--control-line);color:var(--ink)}.scene-options button:hover,.palettes button:hover,.switches button:hover,.temperature-control button:hover{background:var(--active)}details{font-size:14px;line-height:1.9;margin-top:20px;color:var(--muted)}summary{cursor:pointer;min-height:40px;padding:7px 0;color:var(--ink)}details p{margin:12px 0}#build{font-size:12px}.panel,.dock,dialog{-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;overflow-wrap:break-word;overflow-wrap:anywhere}
#toast{position:fixed;left:50%;top:80px;top:calc(80px + var(--safe-top));transform:translateX(-50%) translateY(-5px);width:max-content;max-width:calc(100% - 40px);border:1px solid var(--surface-line);border-radius:16px;background:var(--surface);color:var(--surface-ink);font-size:14px;line-height:1.6;text-align:center;padding:9px 16px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:8}@supports (top:max(0px,1px)){#toast{top:max(80px,calc(var(--safe-top) + 58px))}}#toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}
dialog{width:500px;max-width:calc(100% - 32px - var(--safe-left) - var(--safe-right));max-height:calc(100vh - 40px - var(--safe-top) - var(--safe-bottom));overflow:auto;border-radius:12px;padding:22px;box-shadow:0 25px 100px rgba(17,43,56,0.270588)}@supports (width:min(1px,2px)){dialog{width:min(500px,calc(100% - 32px - var(--safe-left) - var(--safe-right)))}}@supports (height:100dvh){dialog{max-height:calc(100dvh - 40px - var(--safe-top) - var(--safe-bottom))}}dialog::backdrop{background:rgba(21,56,45,0.466667);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}dialog h2{font-size:24px;font-weight:400;letter-spacing:2px;margin:0}dialog .panel-heading p{font-size:14px;line-height:1.7;color:var(--muted);margin:8px 0 0}#art-preview{display:block;width:100%;max-width:100%;max-height:52vh;object-fit:contain;margin:18px auto;border:1px solid var(--line);background:var(--surface);border-radius:5px}@supports (height:100dvh){#art-preview{max-height:52dvh}}.export-options{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;font-size:14px;line-height:1.7;color:var(--muted);margin-top:-8px;margin-left:-10px}.export-options>*{margin-top:8px;margin-left:10px}.export-options label{display:flex;align-items:center;min-height:40px}.export-options label input{margin-right:9px}.export-options input{accent-color:var(--accent);width:17px;height:17px;flex-shrink:0}#export-size{font-size:13px}.export-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:9px;margin-top:16px}.export-actions button{min-width:0;min-height:46px;border:1px solid var(--control-line);padding:11px 6px;border-radius:7px;font-size:15px}.export-actions .primary{background:var(--accent);color:#fff7e6;border-color:var(--accent)}.export-actions button:disabled{color:var(--muted);background:var(--disabled);border:1px dashed var(--control-line);box-shadow:none}.export-actions span{float:right;margin-right:8px}#share-status{font-size:13px;line-height:1.8;color:var(--muted);text-align:center;margin:13px 0 0}dialog:not([open]){display:none}dialog[open]{display:block}dialog.fallback-modal{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;margin:auto;z-index:20}body.modal-fallback:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:19;background:rgba(21,56,45,0.533333)}body.modal-fallback main>.topbar,body.modal-fallback .material-tab{pointer-events:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}@keyframes drawer-in{from{opacity:0;transform:translateX(15px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:650px){.silk-frame{top:7px;right:7px;bottom:7px;left:7px;inset:7px}.topbar{left:17px;left:calc(17px + var(--safe-left));right:16px;right:calc(16px + var(--safe-right))}@supports (top:max(0px,1px)){.topbar{left:max(17px,var(--safe-left));right:max(16px,var(--safe-right))}}.topbar>*+*{margin-left:10px}.brand{}.brand>*+*{margin-left:10px}.seal{width:27px;height:32px;font-size:20px}h1{font-size:20px;letter-spacing:2px}.brand p{font-size:8px;letter-spacing:1px}.top-actions{}.top-actions>*+*{margin-left:7px}.icon-button{width:40px;height:40px}.share-button{min-height:40px;padding:0 11px;font-size:13px}.share-button>*+*{margin-left:6px}.share-button svg{width:16px}.panel{padding:15px}dialog{padding:17px}}
@media(max-width:370px){.share-button span{display:none}.share-button{width:40px;padding:0;justify-content:center}.topbar{left:15px;left:calc(15px + var(--safe-left));right:14px;right:calc(14px + var(--safe-right))}@supports (top:max(0px,1px)){.topbar{left:max(15px,var(--safe-left));right:max(14px,var(--safe-right))}}.panel{right:12px;right:calc(12px + var(--safe-right));max-width:calc(100% - 24px - var(--safe-left) - var(--safe-right))}@supports (top:max(0px,1px)){.panel{right:max(12px,var(--safe-right))}}.export-actions{grid-gap:7px}.export-actions button{font-size:14px}}
@media(max-height:480px){.topbar{top:16px;top:calc(16px + var(--safe-top))}@supports (top:max(0px,1px)){.topbar{top:max(16px,var(--safe-top))}}.panel{top:70px;top:calc(70px + var(--safe-top));max-height:calc(100vh - 86px - var(--safe-top) - var(--safe-bottom))}@supports (top:max(0px,1px)){.panel{top:max(70px,calc(var(--safe-top) + 54px))}}@supports (height:100dvh){.panel{max-height:calc(100dvh - 86px - var(--safe-top) - var(--safe-bottom))}}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.dock{animation:none}}

/* Chrome 61 uses zero/host-variable aliases; env is progressive. */
@supports (top:env(safe-area-inset-top,0px)){:root{--safe-top:var(--safe-area-inset-top,env(safe-area-inset-top,0px));--safe-right:var(--safe-area-inset-right,env(safe-area-inset-right,0px));--safe-bottom:var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px));--safe-left:var(--safe-area-inset-left,env(safe-area-inset-left,0px))}}

/* Match the drawing viewport to the safe screen; extended world stays clipped, not stretched. */
.canvas-shell{padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left)}
@media(orientation:landscape) and (max-height:500px){
 .topbar{top:calc(10px + var(--safe-top));left:calc(14px + var(--safe-left));right:calc(14px + var(--safe-right))}
 .brand p{display:none}.brand h1{font-size:19px}.seal{width:27px;height:30px;font-size:20px}
 .icon-button{width:40px;height:40px}.share-button{min-height:40px}.share-button span{display:none}
 .panel{top:calc(60px + var(--safe-top));max-height:calc(100vh - 74px - var(--safe-top) - var(--safe-bottom));padding:12px}
 .music-info-button{left:calc(14px + var(--safe-left));bottom:calc(12px + var(--safe-bottom))}
 .music-info-panel{top:calc(60px + var(--safe-top));bottom:auto;left:calc(14px + var(--safe-left));max-height:calc(100vh - 74px - var(--safe-top) - var(--safe-bottom))}
}

/* The optional material-effect switch does not cover the drawing surface. */
#sound-toggle .sound-slash{display:none}#sound-toggle[data-enabled=false] .sound-slash{display:block}
@media(max-width:420px){.share-button span{display:none}.share-button{width:40px;padding:0;justify-content:center}.top-actions>*+*{margin-left:5px}}

/* Theme-matched mounting cloth. The two-pixel rolled edges stay inside UI bands. */
:root{--mount:#e4eadc;--mount-active:#d2decc;--mount-ink:#25483e;--mount-muted:#465b4e;--mount-line:#a6b39a;--mount-control:#64755f;--mount-roll-shadow:#91a185;--mount-roll-light:#f4f6e9;--mount-thread:rgba(51,80,43,.035)}
body[data-palette=ink]{--mount:#d6dfd8;--mount-active:#c1d0c7;--mount-ink:#264741;--mount-muted:#3e574f;--mount-line:#95aa9c;--mount-control:#596f62;--mount-roll-shadow:#829c8d;--mount-roll-light:#eef3ee;--mount-thread:rgba(35,71,57,.035)}
body[data-palette=ochre]{--mount:#ecdfc6;--mount-active:#e1d1b0;--mount-ink:#5c4231;--mount-muted:#6d5540;--mount-line:#beaa86;--mount-control:#88704e;--mount-roll-shadow:#ac9364;--mount-roll-light:#fcf0d7;--mount-thread:rgba(102,71,32,.035)}
.topbar,.dock{--surface:var(--mount);--surface-active:var(--mount-active);--surface-ink:var(--mount-ink);--surface-muted:var(--mount-muted);--surface-line:var(--mount-line);--control-line:var(--mount-control);color:var(--mount-ink);background-color:var(--mount);background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.18) 0,rgba(255,255,255,.18) 1px,transparent 1px,transparent 4px),repeating-linear-gradient(90deg,var(--mount-thread) 0,var(--mount-thread) 1px,transparent 1px,transparent 3px);box-shadow:none}
.topbar:after,.dock:before{content:"";position:absolute;left:0;right:0;height:2px;pointer-events:none;background:linear-gradient(180deg,var(--mount-roll-light),var(--mount-roll-shadow))}
.topbar:after{top:0;bottom:auto}.dock:before{top:auto;bottom:0}
/* Independent tool bands reserve painting space through their measured border boxes. */
.topbar{position:fixed;top:0;bottom:auto;left:0;right:0;width:auto;height:48px;height:calc(48px + var(--safe-top));display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:0;padding-top:var(--safe-top);padding-left:calc(48px + var(--safe-left));padding-right:calc(12px + var(--safe-right));border:0;border-bottom:1px solid var(--line);border-radius:0}.topbar>*+*{margin-left:6px}.brand .seal,.brand p{display:none}.brand>*+*{margin-left:0}.brand h1{font-size:18px;letter-spacing:1px;line-height:1.25;margin:0}.top-actions{position:static;display:flex;flex-direction:row;align-items:center;margin:0;margin-right:88px}.top-actions>*+*{margin-left:4px;margin-top:0}.topbar .icon-button{width:36px;height:36px}.topbar .share-button{width:36px;min-height:36px;padding:0;justify-content:center;font-size:13px}.topbar .share-button span{display:none}.topbar button svg{width:16px;height:16px}
@media(max-width:350px){.brand h1{font-size:15px;letter-spacing:0}.topbar .icon-button{width:34px;height:34px}.topbar .share-button{width:34px;min-height:34px}.top-actions>*+*{margin-left:2px}}
@media(orientation:landscape){body:not([data-canvas-orientation]) .topbar{top:0;bottom:0;left:0;right:auto;width:44px;width:calc(44px + var(--safe-left));height:auto;flex-direction:column;justify-content:flex-start;padding-top:calc(44px + var(--safe-top));padding-right:6px;padding-bottom:calc(6px + var(--safe-bottom));padding-left:calc(5px + var(--safe-left));border-bottom:0;border-right:1px solid var(--line)}body:not([data-canvas-orientation]) .topbar>*+*{margin-left:0}body:not([data-canvas-orientation]) .topbar:after{top:0;bottom:0;left:0;right:auto;width:2px;height:auto;background:linear-gradient(90deg,var(--mount-roll-light),var(--mount-roll-shadow))}body:not([data-canvas-orientation]) .brand h1{font-size:18px;letter-spacing:3px;writing-mode:vertical-rl;text-orientation:upright}body:not([data-canvas-orientation]) .top-actions{flex-direction:column;width:32px;margin-top:12px;margin-right:0;margin-left:0}body:not([data-canvas-orientation]) .top-actions>*+*{margin-left:0;margin-top:4px}body:not([data-canvas-orientation]) .topbar .icon-button{width:32px;height:32px}body:not([data-canvas-orientation]) .topbar .share-button{width:32px;min-height:32px}}
@media(orientation:landscape) and (max-height:360px){body:not([data-canvas-orientation]) .brand h1{font-size:17px;letter-spacing:2px}}

/* Portrait keeps two condensed rows; landscape groups material and tool controls at the top. */
@media(orientation:landscape){.dock{top:0;bottom:0;left:auto;right:0;width:94px;width:calc(94px + var(--safe-right));height:auto;grid-template-columns:minmax(0,1fr);grid-template-rows:max-content 32px;grid-gap:6px;align-items:start;align-content:start;padding-top:calc(70px + var(--safe-top));padding-right:calc(4px + var(--safe-right));padding-bottom:calc(3px + var(--safe-bottom));padding-left:4px;border-top:0;border-left:1px solid var(--line);border-radius:0}.dock:before{top:0;bottom:0;left:auto;right:0;width:2px;height:auto;background:linear-gradient(90deg,var(--mount-roll-shadow),var(--mount-roll-light))}.materials{grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:2px;align-self:start}.materials button{grid-template-columns:16px 1em;grid-template-rows:none;grid-gap:0 2px;min-height:32px;height:32px;padding:2px}.materials i,.materials .wood-shaving{width:16px;height:16px}.materials .seed{width:10px;height:14px}.materials .drop,.materials .oil{width:13px;height:15px}.dock-bottom>summary{min-height:32px;height:32px;flex-direction:row}.dock-bottom>summary>*+*{margin-top:0;margin-left:4px}.dock-bottom>summary svg{transform:none}.dock-bottom[open]>summary svg{transform:rotate(180deg)}.tool-popover{right:calc(100% + 8px);bottom:0}@supports (top:max(0px,1px)){.dock{padding-top:max(70px,calc(60px + var(--safe-top)))}}}

/* Share preview is unobstructed without changing any stored drawing state. */
body.artwork-preview .material-tab,body.artwork-preview .dock,body.artwork-preview .topbar{visibility:hidden;pointer-events:none}

/* The complete measured shell wins while host viewport notifications settle. */
body[data-canvas-orientation=portrait] .dock{top:auto;bottom:0;left:0;right:0;width:auto;height:calc(86px + var(--safe-bottom));grid-template-columns:minmax(0,1fr) 36px;grid-template-rows:none;grid-gap:6px;align-items:center;align-content:normal;padding-top:4px;padding-right:calc(6px + var(--safe-right));padding-bottom:calc(5px + var(--safe-bottom));padding-left:calc(6px + var(--safe-left));border-left:0;border-top:1px solid var(--line);border-radius:0}
body[data-canvas-orientation=portrait] .dock:before{top:auto;bottom:0;left:0;right:0;width:auto;height:2px;background:linear-gradient(180deg,var(--mount-roll-light),var(--mount-roll-shadow))}
body[data-canvas-orientation=portrait] .materials{grid-template-columns:repeat(5,minmax(0,1fr));grid-gap:4px;align-self:auto}
body[data-canvas-orientation=portrait] .materials button{grid-template-columns:minmax(0,1fr);grid-template-rows:16px 14px;grid-gap:1px;min-height:36px;height:36px;padding:1px 3px}
body[data-canvas-orientation=portrait] .materials i,body[data-canvas-orientation=portrait] .materials .wood-shaving{width:16px;height:16px}
body[data-canvas-orientation=portrait] .materials .seed{width:10px;height:14px}
body[data-canvas-orientation=portrait] .materials .drop,body[data-canvas-orientation=portrait] .materials .oil{width:13px;height:15px}
body[data-canvas-orientation=portrait] .dock-bottom>summary{min-height:36px;height:36px;flex-direction:column}
body[data-canvas-orientation=portrait] .dock-bottom>summary>*+*{margin-top:2px;margin-left:0}
body[data-canvas-orientation=portrait] .dock-bottom>summary svg{transform:rotate(90deg)}
body[data-canvas-orientation=portrait] .dock-bottom[open]>summary svg{transform:rotate(270deg)}
body[data-canvas-orientation=portrait] .tool-popover{right:0;bottom:calc(100% + 8px)}
body[data-canvas-orientation=landscape] .dock{top:0;bottom:0;left:auto;right:0;width:94px;width:calc(94px + var(--safe-right));height:auto;grid-template-columns:minmax(0,1fr);grid-template-rows:max-content 32px;grid-gap:6px;align-items:start;align-content:start;padding-top:calc(70px + var(--safe-top));padding-right:calc(4px + var(--safe-right));padding-bottom:calc(3px + var(--safe-bottom));padding-left:4px;border-top:0;border-left:1px solid var(--line);border-radius:0}body[data-canvas-orientation=landscape] .dock:before{top:0;bottom:0;left:auto;right:0;width:2px;height:auto;background:linear-gradient(90deg,var(--mount-roll-shadow),var(--mount-roll-light))}body[data-canvas-orientation=landscape] .materials{grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:2px;align-self:start}body[data-canvas-orientation=landscape] .materials button{grid-template-columns:16px 1em;grid-template-rows:none;grid-gap:0 2px;min-height:32px;height:32px;padding:2px}body[data-canvas-orientation=landscape] .materials i,body[data-canvas-orientation=landscape] .materials .wood-shaving{width:16px;height:16px}body[data-canvas-orientation=landscape] .materials .seed{width:10px;height:14px}body[data-canvas-orientation=landscape] .materials .drop,body[data-canvas-orientation=landscape] .materials .oil{width:13px;height:15px}body[data-canvas-orientation=landscape] .dock-bottom>summary{min-height:32px;height:32px;flex-direction:row}body[data-canvas-orientation=landscape] .dock-bottom>summary>*+*{margin-top:0;margin-left:4px}body[data-canvas-orientation=landscape] .dock-bottom>summary svg{transform:none}body[data-canvas-orientation=landscape] .dock-bottom[open]>summary svg{transform:rotate(180deg)}body[data-canvas-orientation=landscape] .tool-popover{right:calc(100% + 8px);bottom:0}
@supports (top:max(0px,1px)){body[data-canvas-orientation=landscape] .dock{padding-top:max(70px,calc(60px + var(--safe-top)))}}

body[data-canvas-orientation=landscape] .topbar{top:0;bottom:0;left:0;right:auto;width:44px;width:calc(44px + var(--safe-left));height:auto;flex-direction:column;justify-content:flex-start;padding-top:calc(44px + var(--safe-top));padding-right:6px;padding-bottom:calc(6px + var(--safe-bottom));padding-left:calc(5px + var(--safe-left));border-bottom:0;border-right:1px solid var(--line)}body[data-canvas-orientation=landscape] .topbar>*+*{margin-left:0}body[data-canvas-orientation=landscape] .topbar:after{top:0;bottom:0;left:0;right:auto;width:2px;height:auto;background:linear-gradient(90deg,var(--mount-roll-light),var(--mount-roll-shadow))}body[data-canvas-orientation=landscape] .brand h1{font-size:18px;letter-spacing:3px;writing-mode:vertical-rl;text-orientation:upright}body[data-canvas-orientation=landscape] .top-actions{flex-direction:column;width:32px;margin-top:12px;margin-right:0;margin-left:0}body[data-canvas-orientation=landscape] .top-actions>*+*{margin-left:0;margin-top:4px}body[data-canvas-orientation=landscape] .topbar .icon-button{width:32px;height:32px}body[data-canvas-orientation=landscape] .topbar .share-button{width:32px;min-height:32px}
@media(max-height:360px){body[data-canvas-orientation=landscape] .brand h1{font-size:17px;letter-spacing:2px}}
@media(orientation:landscape) and (max-height:300px){.dock{grid-gap:4px}}
@media(max-height:300px){body[data-canvas-orientation=landscape] .dock{grid-gap:4px}}