:root{color-scheme:dark;--page:#171918;--panel:#202220;--line:#353733;--text:#f2f1e9;--muted:#93978e;--orange:#f4a66b;--mono:'Space Mono',monospace;--sans:'DM Sans',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--page);color:var(--text);font-family:var(--sans);font-size:14px;-webkit-font-smoothing:antialiased}button,a,input{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{color:inherit;cursor:pointer}button{transition:background .15s,border-color .15s,transform .15s}button:active{transform:translateY(1px)}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid var(--orange);outline-offset:4px}button{border:0;background:none}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.svg-library{position:absolute;width:0;height:0;overflow:hidden}.topbar{height:78px;border-bottom:1px solid #30322e;display:flex;align-items:center;gap:28px;padding:0 max(40px,calc((100vw - 1320px)/2));}.brand{display:flex;gap:11px;align-items:center;text-decoration:none;color:var(--text);font-size:32px;font-weight:800;letter-spacing:-1.9px;line-height:1}.brand-period{color:var(--orange);margin-left:-10px}.brand-mark{display:grid;grid-template-columns:repeat(2,8px);grid-template-rows:repeat(2,8px);gap:4px;transform:rotate(-12deg);margin-right:1px}.brand-mark i{background:var(--orange);border-radius:2px}.brand-mark i:nth-child(2){transform:translate(2px,-2px);background:#ffd2ad}.brand-caption{font:10px var(--mono);letter-spacing:1.8px;color:#8d9288;margin-top:5px;padding-left:25px;border-left:1px solid #3a3c35}.help-button{display:flex;align-items:center;gap:8px;margin-left:auto;color:#c7cbc1;font-size:12px}.help-button:hover{color:var(--orange)}.question-mark{width:17px;height:17px;border:1px solid #7b8275;border-radius:50%;display:grid;place-items:center;font-size:11px}.help-arrow{font-size:18px;margin-left:10px;color:#858d7c}main{max-width:1320px;margin:0 auto;width:calc(100% - 80px)}.intro{display:flex;justify-content:space-between;align-items:center;padding:28px 0 27px;gap:24px}.eyebrow{font:9px var(--mono);letter-spacing:1.5px;color:#a6ab9f;display:flex;align-items:center;gap:7px}.eyebrow>span{width:5px;height:5px;background:var(--orange);border-radius:50%}h1{font-weight:550;font-size:38px;letter-spacing:-1.6px;margin:7px 0 0;line-height:1.15}h1>span{color:var(--orange)}.intro>p{font-size:12px;line-height:1.8;color:#a4a99f;margin:10px 2px 0 0}.workbench{display:grid;grid-template-columns:minmax(0,1fr) 284px;gap:20px;align-items:start}.world-panel{border:1px solid #3c3e36;border-radius:10px;overflow:hidden;background:#20231f;box-shadow:0 12px 40px #00000012}.world-topbar{height:43px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid #343930;background:#242721}.scene-name{font:10px var(--mono);letter-spacing:1.15px;color:#c4c8bb;display:flex;align-items:center;gap:10px}.scene-number{font-size:9px;color:#8d9684;border:1px solid #444c3b;padding:2px 4px;border-radius:3px;letter-spacing:0}.performance{display:flex;align-items:center;gap:6px;font:9px var(--mono);color:#a8b19f}.status-dot{width:5px;height:5px;border-radius:50%;background:#b2cb8b;box-shadow:0 0 6px #9eb67b44}.metric-divider{height:12px;border-left:1px solid #454b3f;margin:0 5px}.fps-unit{font-size:8px;color:#7e8873}.canvas-wrap{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#101614;isolation:isolate;touch-action:none}#world,#glow{display:block;width:100%;height:100%;position:absolute;inset:0;image-rendering:pixelated}#world{touch-action:none;cursor:none;outline-offset:-3px}#glow{pointer-events:none;filter:blur(13px);opacity:.52;mix-blend-mode:screen}.world-coordinate{position:absolute;top:16px;left:18px;font:8px var(--mono);letter-spacing:.8px;color:#617365;pointer-events:none}.world-coordinate span{color:#46594c;font-size:7px;margin-left:4px}#brush-cursor{display:none;position:absolute;border:1px solid #fff9;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 1px #0007;z-index:3}#brush-cursor.eraser{border-style:dashed;border-color:#e9aaaa}.canvas-hint{position:absolute;bottom:18px;left:18px;display:flex;align-items:center;gap:8px;background:#161e19df;border:1px solid #69725850;border-radius:6px;padding:11px 13px;backdrop-filter:blur(8px);font-size:10px;color:#e0e3d8;pointer-events:none;transition:opacity .6s,transform .6s}.canvas-hint svg{width:15px;height:15px;color:#d3d9c6}.canvas-hint span{color:#96a68f;font-size:10px}.canvas-hint.dismissed{opacity:0;transform:translateY(6px)}#paused-badge{position:absolute;top:16px;right:16px;align-items:center;gap:6px;font:9px var(--mono);letter-spacing:1px;background:#20261ddf;color:#e4c499;padding:8px 11px;border:1px solid #6b664850;border-radius:5px;pointer-events:none}#paused-badge:not([hidden]){display:flex}#paused-badge svg{width:12px;height:12px}.world-toolbar{height:59px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #363e2e;background:#252a22}.pause-button{height:33px;border:1px solid #535a48;border-radius:5px;padding:0 11px;display:flex;align-items:center;gap:8px;font-size:11px;background:#343b2e}.pause-button svg{width:14px;height:14px}.pause-button:hover{background:#404936}kbd{font:8px var(--mono);border:1px solid #5c6352;padding:1px 4px;border-radius:3px;color:#b6bdaa;background:#ffffff05;white-space:nowrap}.pause-button kbd{margin-left:10px;font-size:8px}.world-actions{display:flex;align-items:center;gap:15px}.world-actions button{display:flex;align-items:center;gap:7px;font-size:11px;color:#bcc5b2;padding:7px 0}.world-actions button:hover{color:#f2ddba}.world-actions svg{width:15px;height:15px}.toolbar-divider{height:15px;border-left:1px solid #444d3b}.world-footnote{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:10px;color:#92998a;gap:10px}.world-footnote>div{display:flex;align-items:center;gap:7px}.tiny-mouse{width:9px;height:12px;border:1px solid #89917f;border-radius:5px;position:relative}.tiny-mouse:before{content:'';height:4px;position:absolute;top:0;left:3px;border-left:1px solid #89917f}.footnote-separator{color:#50594a;margin:0 3px}.shortcut{font:9px var(--mono);color:#acb4a2}.made-of{color:#707a66;font-size:10px}.control-panel{border:1px solid #3b3e34;background:#21251f;border-radius:10px;padding:21px 18px 17px;box-shadow:0 12px 40px #0000000b}.palette-header{display:flex;align-items:center;justify-content:space-between}.palette-header h2{font-size:17px;letter-spacing:-.5px;font-weight:600;margin:0}.element-count{font:8px var(--mono);letter-spacing:.7px;color:#8e9785}.palette-subtitle{font-size:10px;color:#8f9987;margin:6px 0 18px}.palette{display:grid;grid-template-columns:1fr 1fr;gap:7px}.element-button{display:flex;align-items:center;gap:9px;min-width:0;height:44px;padding:0 10px;border:1px solid #3a4333;border-radius:5px;background:#2a3026;text-align:left;color:#dce1d3;font-size:11px;font-weight:500;position:relative}.element-button:hover{background:#363e30;border-color:#657256}.element-button.selected{border-color:#c5b784;background:#494934;color:#f4e8c1;box-shadow:0 0 0 1px #c5b78415 inset}.element-button.selected:after{content:'';position:absolute;top:6px;right:6px;width:3px;height:3px;border-radius:50%;background:#e4d5a4}.element-button svg{width:20px;height:20px;color:var(--element-color);stroke-width:1.45}.element-note{margin:17px 0 0;min-height:76px;padding-bottom:14px;border-bottom:1px solid #3a4233}.note-heading{display:flex;align-items:center;justify-content:space-between;gap:5px}.note-heading>span:first-child{font-size:11px;font-weight:600;color:#dbd6b9}.note-heading>span:last-child{font:7px var(--mono);letter-spacing:.65px;color:#8e9780}.element-note p{font-size:10px;line-height:1.7;margin:5px 0 0;color:#939f87;max-width:240px}.brush-control{padding-top:15px}.control-label{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:500}.control-label output{font:11px var(--mono);color:#d7d9c1}.control-label output span{color:#879075;font-size:8px}input[type=range]{display:block;appearance:none;width:100%;height:3px;border:0;border-radius:2px;background:linear-gradient(to right,#e3c798 var(--progress,23%),#444c3c var(--progress,23%));margin:18px 0 12px;cursor:pointer;outline-offset:8px}input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;background:#f0d5a7;border-radius:50%;box-shadow:0 0 0 3px #f0d5a710}input[type=range]::-moz-range-thumb{width:11px;height:11px;border:0;background:#f0d5a7;border-radius:50%}.brush-scale{display:flex;justify-content:space-between;font-size:8px;color:#89957b}.tool-switch{display:flex;background:#191f17;border:1px solid #3b4632;border-radius:5px;margin-top:17px;padding:3px;gap:3px}.tool-switch button{display:flex;align-items:center;justify-content:center;gap:7px;width:50%;height:31px;border:1px solid transparent;border-radius:3px;color:#859479;font-size:10px}.tool-switch button.active{background:#3a4531;border-color:#566249;color:#e2e8d6}.tool-switch svg{width:13px;height:13px}.tool-switch kbd{font-size:7px;color:#a0ac91;border-color:#65725a}.discovery{display:flex;gap:12px;margin-top:17px;align-items:center;padding:13px 0 0;border-top:1px solid #394631}.discovery-star{font-size:27px;color:#c7ca95;align-self:flex-start;line-height:1.2}.discovery p{margin:0;font-size:10px;line-height:1.7}.discovery strong{display:block;color:#c6cdb0;font-weight:500}.discovery p>span{display:block;color:#8d9c7b;margin-top:3px}footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #343b2e;margin-top:23px;padding:17px 0 21px;color:#757f6b;font-size:10px}footer>span:first-child{font:8px var(--mono);letter-spacing:1.25px}footer>span:last-child{display:flex;gap:13px;align-items:center}.footer-spark{font-size:19px;color:#8e9e79}.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,15px);border:1px solid #647453;background:#2d3825;color:#e5eddc;padding:12px 20px;border-radius:7px;box-shadow:0 5px 30px #0003;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:20;max-width:90vw;text-align:center}.toast.visible{transform:translate(-50%,0);opacity:1}dialog{width:min(560px,calc(100vw - 32px));border:1px solid #536048;border-radius:13px;background:#222a1f;padding:27px;color:#e6ebdd;box-shadow:0 30px 100px #0008}dialog::backdrop{background:#080e0acc;backdrop-filter:blur(5px)}.dialog-header{display:flex;justify-content:space-between;align-items:center}.icon-button{padding:4px;display:flex}.icon-button:hover{color:var(--orange)}dialog h2{font-size:27px;letter-spacing:-1px;font-weight:550;margin:20px 0 10px}dialog>p{font-size:12px;color:#aab69f;line-height:1.7}.help-interactions{margin:23px 0;display:grid;gap:15px}.help-interactions>div{position:relative;padding-left:65px}.help-interactions>div>span{position:absolute;left:0;font-size:18px}.help-interactions strong{font-size:12px;font-weight:500}.help-interactions p{font-size:11px;line-height:1.6;color:#a7b49b;margin:4px 0}.keyboard-help{display:grid;grid-template-columns:1fr 1fr;gap:12px;border-top:1px solid #424e38;padding-top:18px;font-size:10px;color:#abb69f}.keyboard-help>span:last-child{grid-column:1/-1}.keyboard-help kbd{margin-right:4px}.primary-button{display:flex;align-items:center;justify-content:space-between;background:#eac799;color:#2e3528;width:100%;border-radius:5px;padding:12px 16px;font-size:12px;font-weight:600;margin-top:24px}.primary-button:hover{background:#f5d9b4}@media(min-width:1500px){main{max-width:1390px}.topbar{padding-left:max(40px,calc((100vw - 1390px)/2));padding-right:max(40px,calc((100vw - 1390px)/2))}.workbench{grid-template-columns:minmax(0,1fr) 298px}.control-panel{padding:24px 20px}.element-button{height:47px}.element-note{margin-top:20px}.discovery{margin-top:20px;padding-top:17px}.intro{padding-top:35px;padding-bottom:32px}}@media(max-width:1150px){.made-of{display:none}.workbench{grid-template-columns:minmax(0,1fr) 254px;gap:16px}.control-panel{padding:18px 14px}.element-button{padding:0 8px;gap:7px}.element-count{font-size:7px}.intro>p{font-size:11px}h1{font-size:34px}.canvas-hint span{display:none}.world-topbar{padding:0 13px}.scene-name{font-size:9px}.world-actions{gap:11px}.world-toolbar{padding:0 11px}.world-footnote{font-size:9px;gap:5px}.world-footnote>div{gap:5px}.footnote-separator{margin:0 1px}.discovery{margin-top:15px}}@media(max-width:800px){.topbar{height:67px;padding:0 24px}.brand{font-size:29px}.brand-caption{font-size:8px;padding-left:18px}.help-button{font-size:11px}.help-arrow{margin-left:0}.intro{padding:25px 0 23px}.intro>p{max-width:220px;line-height:1.6}.intro>p br{display:none}h1{font-size:30px}.eyebrow{font-size:8px}main{width:calc(100% - 48px)}.workbench{grid-template-columns:1fr}.control-panel{padding:20px;display:grid;grid-template-columns:1fr 1fr;column-gap:24px}.palette-header,.palette-subtitle,.palette{grid-column:1}.palette{grid-row:3/7;grid-template-columns:1fr 1fr}.element-note{grid-column:2;grid-row:1/4;margin:0;min-height:auto;padding-top:1px;padding-bottom:12px}.element-note p{font-size:11px;line-height:1.6}.brush-control{grid-column:2;grid-row:4}.tool-switch{grid-column:2;grid-row:5;align-self:start}.discovery{grid-column:2;grid-row:6}.palette-subtitle{margin-bottom:15px}.palette-header h2{font-size:16px}.palette .element-button{height:40px}.element-count{font-size:7px}.world-footnote{margin:11px 0 1px}footer{margin-top:20px}}@media(max-width:520px){.topbar{height:61px;padding:0 18px;gap:10px}.brand{font-size:28px}.brand-mark{grid-template-columns:repeat(2,7px);grid-template-rows:repeat(2,7px);gap:3px;margin-right:2px}.brand-caption{display:none}.help-button{font-size:10px}.question-mark{width:15px;height:15px;font-size:9px}.help-arrow{font-size:16px}.intro{display:block;padding:24px 0 20px}.eyebrow{font-size:7px;letter-spacing:1.2px}h1{font-size:32px;letter-spacing:-1.5px;margin-top:7px}.intro>p{font-size:11px;max-width:none;line-height:1.6;margin-top:9px}.intro>p br{display:block}main{width:calc(100% - 32px)}.workbench{gap:15px}.world-panel{border-radius:8px}.world-topbar{height:35px;padding:0 10px}.scene-name{font-size:8px;letter-spacing:.7px;gap:7px}.scene-number{font-size:7px;padding:1px 3px}.performance{font-size:8px;gap:4px}.fps-unit{font-size:7px}.metric-divider{margin:0 3px}.canvas-wrap{aspect-ratio:1.3}.world-coordinate{font-size:6px;left:11px;top:11px;letter-spacing:.3px}.world-coordinate span{font-size:5px}.canvas-hint{padding:7px 9px;bottom:11px;left:11px;font-size:8px;gap:6px}.canvas-hint svg{height:12px;width:12px}.world-toolbar{height:49px;padding:0 10px}.pause-button{height:29px;font-size:10px;padding:0 9px;gap:5px}.pause-button kbd{display:none}.pause-button svg{width:12px;height:12px}.world-actions{gap:12px}.world-actions button{font-size:9px;gap:5px}.world-actions svg{width:13px;height:13px}.world-footnote{font-size:8px;margin-top:10px}.world-footnote>div{gap:5px}.world-footnote .footnote-separator:last-of-type,.world-footnote .shortcut{display:none}.world-footnote>div{font-size:0}.world-footnote>div .tiny-mouse{font-size:8px}.world-footnote>div:after{content:'Drag to paint · Select Erase to remove';font-size:8px}.footnote-separator{display:none}.control-panel{display:block;padding:17px 15px;border-radius:8px}.palette-header h2{font-size:16px}.element-count{font-size:7px}.palette-subtitle{font-size:9px;margin:5px 0 13px}.palette{grid-template-columns:repeat(3,1fr);gap:6px}.palette .element-button{height:38px;font-size:10px;padding:0 8px;gap:6px}.element-button svg{width:17px;height:17px}.element-note{margin-top:15px;min-height:61px;padding-bottom:12px}.element-note p{font-size:10px;max-width:none}.note-heading>span:last-child{font-size:7px}.brush-control{padding-top:14px}.brush-control input{margin-top:17px}.tool-switch{margin-top:14px}.tool-switch button{height:30px}.discovery{margin-top:15px;gap:10px;padding-top:12px}.discovery-star{font-size:24px}.discovery p{font-size:10px}.discovery p>span{margin-top:1px}.discovery p>span br{display:none}.discovery p>span br:after{content:' '}.discovery p>span{display:inline}.discovery strong{display:inline;margin-right:4px}footer{padding:14px 0 20px;margin-top:19px;gap:20px;align-items:flex-start}footer>span:first-child{font-size:7px;line-height:1.8;max-width:110px}footer>span:last-child{font-size:8px;max-width:155px;line-height:1.6}.footer-spark{font-size:16px}#paused-badge{font-size:7px;right:9px;top:9px;padding:6px;letter-spacing:.5px}.keyboard-help{grid-template-columns:1fr;gap:10px}.keyboard-help>span:last-child{grid-column:auto}dialog{padding:22px}dialog h2{font-size:24px}.help-interactions{gap:12px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Keep the complete workbench comfortably in view on a typical laptop. */
@media(min-width:801px) and (max-height:1000px){.topbar{height:70px}.intro{padding-top:22px;padding-bottom:23px}.canvas-wrap{max-height:520px}.control-panel{padding-top:18px;padding-bottom:15px}.palette-subtitle{margin-bottom:14px}.element-button{height:40px;font-size:12px}.element-note{margin-top:14px;min-height:69px}.brush-control{padding-top:12px}.tool-switch{margin-top:14px}.discovery{margin-top:14px;padding-top:11px}.discovery p>span br{display:none}.discovery p>span br:after{content:' '}.discovery p>span{max-width:195px}footer{margin-top:18px;padding-top:14px;padding-bottom:16px}}