:root{--bg:#e6e6d7;--panel:#f5f3e6;--line:#111;--ink:#111;--screen:#fcfbf3;--toolbar:#ebe7d4}*{box-sizing:border-box;margin:0}html{overscroll-behavior:none}[hidden]{display:none !important}html,body{height:100%;background:repeating-linear-gradient(0deg,#d9d7c9 0px,#d9d7c9 4px,#d3d1c4 4px,#d3d1c4 8px);color:var(--ink);font-family:"Chicago","Geneva","Verdana",system-ui,sans-serif;image-rendering:pixelated;overflow:hidden;user-select:none;-webkit-user-select:none}.desktop{height:100%;display:grid;grid-template-rows:28px 1fr 26px}.menu-bar,.status-bar{display:flex;align-items:center;gap:16px;padding:0 10px;background:#f2efdf;border-bottom:2px solid #000;font-size:13px;user-select:none}.status-bar{border-top:2px solid #000;border-bottom:none;justify-content:space-between;font-size:12px}.workspace{padding:18px;position:relative;overflow:hidden}.title-bar{display:flex;align-items:center;justify-content:space-between;padding:0 10px;background:linear-gradient(90deg,#d7d2bf 0%,#f4f0df 100%);border-bottom:2px solid #000;font-size:13px;user-select:none}.title-left{display:flex;align-items:center;gap:10px}.traffic{width:12px;height:12px;border:2px solid #000;background:#fff9d9}.sidebar{border-right:2px solid #000;background:var(--toolbar);padding:8px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}.panel{background:var(--panel);border:2px solid #000;padding:6px 8px}.panel h3{margin:0 0 4px;font-size:11px;text-transform:uppercase;letter-spacing:0.08em}button{font:inherit;border:2px solid #000;background:#fffceb;color:#000;padding:4px 8px;cursor:pointer;box-shadow:2px 2px 0 #000;font-size:11px;min-height:28px}button:active,button.active{transform:translate(2px,2px);box-shadow:none;background:#ddd7c2}.tool-btn{width:100%;text-align:left}.tool-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}.fx-grid{grid-template-columns:repeat(3,1fr)}.fx-grid .tool-btn{font-size:10px;padding:3px 5px;min-height:24px}.toolbar-group{display:flex;gap:4px;align-items:center}.palette-row{display:flex;gap:4px;margin-bottom:6px}.palette-row .swatch{flex:1;height:28px;border:2px solid #000;cursor:pointer;box-shadow:2px 2px 0 #000}.palette-row .swatch.active{outline:3px solid #f00;outline-offset:0px}.palette-select{width:100%;font:inherit;font-size:11px;border:2px solid #000;background:#fffceb;padding:3px}input[type="range"]{-webkit-appearance:none;appearance:none;height:6px;background:#d8d3c1;border:2px solid #000;border-radius:0;outline:none;cursor:pointer}input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:20px;background:#fffceb;border:2px solid #000;border-radius:0;box-shadow:1px 1px 0 #000;cursor:pointer}input[type="range"]::-webkit-slider-thumb:active{background:#ddd7c2;box-shadow:none;transform:translateY(1px)}input[type="range"]::-moz-range-thumb{width:14px;height:20px;background:#fffceb;border:2px solid #000;border-radius:0;box-shadow:1px 1px 0 #000;cursor:pointer}input[type="range"]::-moz-range-thumb:active{background:#ddd7c2;box-shadow:none}input[type="range"]::-moz-range-track{height:6px;background:#d8d3c1;border:2px solid #000;border-radius:0}.canvas-wrap{display:grid;min-width:0;min-height:0;background:#d8d3c1}.canvas-stage{position:relative;display:grid;place-items:center;padding:16px;overflow:auto}.canvas-shell{position:relative;aspect-ratio:4 / 3;background:var(--screen);border:2px solid #000;box-shadow:6px 6px 0 #000;overflow:hidden}canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;image-rendering:auto}.menu-logo{font-weight:bold;font-size:13px;color:var(--ink);text-decoration:none}.menu-logo:hover{text-decoration:underline}.layer-stack{display:flex;flex-direction:column;gap:0}.layer-btn{width:100%;text-align:left;font-size:11px;display:flex;align-items:center;gap:6px;border-bottom-width:0}.layer-btn:last-child{border-bottom-width:2px}.layer-btn.active{background:#d6ecd8}.layer-btn.active:active{background:#a5d6a7}.layer-eye{cursor:pointer;font-size:13px;flex-shrink:0}.layer-eye.hidden{opacity:0.3}.layer-label{flex:1}.sub-title-bar{display:flex;align-items:center;justify-content:space-between;padding:0 8px;height:24px;background:linear-gradient(90deg,#d7d2bf 0%,#f4f0df 100%);border-bottom:2px solid #000;font-size:12px;user-select:none;cursor:grab}.sub-title-bar:active{cursor:grabbing}.mono{font-family:"Monaco","Courier New",monospace;font-size:11px}.row{display:flex;justify-content:space-between;align-items:center;font-size:11px;margin-bottom:4px}.lang-select{font-family:inherit;font-size:11px;padding:1px 2px;border:1px solid #888;background:var(--panel,#f5f3e6);cursor:pointer}.modal-overlay{position:fixed;inset:0;z-index:310;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.3)}.modal-overlay[hidden]{display:none}.modal-window{width:380px;max-width:90vw;background:var(--panel);border:2px solid #000;box-shadow:6px 6px 0 #000}.modal-body{padding:16px;max-height:60vh;overflow-y:auto;font-size:12px;line-height:1.7}.modal-body p{margin:0 0 6px}.modal-body ul,.modal-body ol{margin:0 0 6px;padding-left:20px}.modal-body li{margin-bottom:3px}.modal-body a{color:#2255aa;text-decoration:none}.modal-body a:hover{text-decoration:underline}.modal-close-btn{min-height:20px;padding:0 6px;font-size:16px;line-height:1;box-shadow:1px 1px 0 #000;cursor:pointer}.mobile-only{display:none}.mobile-tool-select{width:100%;font:inherit;font-size:12px;padding:4px;border:2px solid #000;background:#fffceb}