:root{--bg: #080808;--surface: #111118;--panel: #15151d;--border: #2a2a3a;--text: #f0ead8;--dim: #6a6a7a;--accent: #a0a0b0;--rose: #ff3d6e;--cyan: #00f5ff;--panel-w: 240px}:root:not([data-magma-theme=gatefold]){--bg: var(--mt-bg);--surface: var(--mt-surface, color-mix(in srgb, var(--mt-bg) 92%, var(--mt-text)));--panel: color-mix(in srgb, var(--surface) 94%, var(--mt-text));--border: color-mix(in srgb, var(--surface) 78%, var(--mt-text));--text: var(--mt-text);--dim: var(--mt-muted, color-mix(in srgb, var(--mt-text) 55%, var(--mt-bg)));--accent: var(--mt-accent);--rose: var(--mt-accent2, var(--mt-accent));--cyan: var(--mt-accent)}:root:not([data-magma-theme=gatefold]) .canvas-hint{background:color-mix(in srgb,var(--bg) 88%,transparent)}:root:not([data-magma-theme=gatefold])[data-theme-mode=light]{--scanline: rgba(0, 0, 0, 0.03)}.theme-list{top:calc(100% + 4px);bottom:auto;z-index:50}body{user-select:none;-webkit-user-select:none}input,textarea,[contenteditable]{user-select:text;-webkit-user-select:text}.workspace{min-height:0}.panel{width:var(--panel-w);background:var(--panel);border-right:2px solid var(--border);padding:12px 10px;overflow-y:auto;flex-shrink:0;min-height:0;display:flex;flex-direction:column;gap:10px}.props-panel{border-right:none;border-left:2px solid var(--border);overflow-x:hidden}.panel-label{display:flex;align-items:center;justify-content:space-between;font-size:9px;color:var(--accent);letter-spacing:0.2em;margin-bottom:4px}.panel-divider{height:1px;background:var(--border);margin:2px 0}.tool-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}.tool-btn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px;background:var(--surface);border:2px solid var(--border);border-radius:4px;color:var(--dim);font-family:"Press Start 2P",monospace;font-size:6px;cursor:pointer;transition:all 0.12s}.tool-btn:hover{border-color:var(--accent);color:var(--text)}.tool-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(160,160,176,0.08);box-shadow:0 0 12px rgba(160,160,176,0.1),inset 0 0 12px rgba(160,160,176,0.03)}.tool-icon{font-size:14px;line-height:1}.tool-name{font-size:6px;letter-spacing:0.1em}.shapes-btn{width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:var(--surface);border:2px solid var(--border);border-radius:4px;color:var(--accent);font-family:"Press Start 2P",monospace;font-size:8px;cursor:pointer;transition:all 0.12s}.shapes-btn:hover{border-color:var(--accent);color:var(--text)}.shapes-btn.active{border-color:var(--accent);color:var(--text);background:rgba(160,160,176,0.08);box-shadow:0 0 12px rgba(160,160,176,0.1),inset 0 0 12px rgba(160,160,176,0.03)}.shapes-btn-arrow{font-size:10px;opacity:0.6}.shapes-popup{display:none;position:fixed;background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:8px;z-index:50;min-width:220px;max-height:70vh;overflow-y:auto}.shapes-popup.open{display:flex;flex-direction:column;gap:6px}.shapes-popup-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}.popup-section-label{grid-column:1 / -1;font-family:"Press Start 2P",monospace;font-size:7px;color:var(--dim);letter-spacing:0.2em;padding:4px 0 2px;border-top:1px solid var(--border)}.popup-section-label:first-child{border-top:none}.shape-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 8px;background:var(--surface);border:2px solid var(--border);border-radius:4px;color:var(--dim);font-family:"Press Start 2P",monospace;font-size:6px;cursor:pointer;transition:all 0.12s}.shape-btn:hover{border-color:var(--accent);color:var(--text)}.shape-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(160,160,176,0.08)}.ref-upload-btn{width:100%;padding:8px;background:var(--surface);border:2px dashed var(--border);border-radius:4px;color:var(--dim);font-family:"Press Start 2P",monospace;font-size:7px;cursor:pointer;transition:all 0.15s;letter-spacing:0.05em}.ref-upload-btn:hover{border-color:var(--accent);color:var(--accent)}.ref-preview-wrap{position:relative;display:none;border:2px solid var(--border);border-radius:4px;overflow:hidden}.ref-preview-wrap.visible{display:block}.ref-canvas{width:100%;display:block;cursor:crosshair;image-rendering:auto}.ref-clear-btn{position:absolute;top:4px;right:4px;width:20px;height:20px;background:rgba(0,0,0,0.7);border:1px solid var(--rose);border-radius:3px;color:var(--rose);font-size:12px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.ref-clear-btn:hover{background:var(--rose);color:#000}.ref-hint{font-size:6px;color:var(--dim);text-align:center;line-height:1.4;margin:0;display:none}.ref-hint.visible{display:block}.center-area{flex:1;display:flex;align-items:center;justify-content:center;padding:20px;min-width:0;position:relative;overflow:hidden}.canvas-wrap{display:contents}#mainCanvas{max-width:100%;max-height:100%;width:auto;height:auto;cursor:crosshair;image-rendering:auto;display:block;box-shadow:0 0 40px rgba(0,0,0,0.6)}.canvas-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:min(420px,calc(100% - 48px));display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 20px;background:rgba(8,8,8,0.82);border:1px solid var(--border);border-radius:4px;text-align:center;line-height:1.8;pointer-events:none}.canvas-hint[hidden]{display:none}.canvas-hint-title{font-size:9px;letter-spacing:0.2em;color:var(--accent)}.canvas-hint-text{font-size:8px;color:var(--text)}.canvas-hint-keys{font-size:6px;letter-spacing:0.1em;color:var(--dim)}@media(hover:none){.canvas-hint-keys{display:none}}dialog.modal-box::backdrop{background:rgba(0,0,0,0.7)}dialog.modal-box:not([open]){display:none}dialog.modal-box{margin:auto}.modal-box{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:24px;min-width:340px;max-width:90vw;display:flex;flex-direction:column;gap:16px;box-sizing:border-box}.modal-header{font-size:10px;color:var(--accent);letter-spacing:0.2em}.modal-textarea{width:100%;min-height:80px;background:var(--surface);border:2px solid var(--border);border-radius:4px;color:var(--text);font-family:"Press Start 2P",monospace;font-size:16px;padding:10px;outline:none;resize:vertical;line-height:1.4}.modal-textarea:focus{border-color:var(--accent)}#textModal{width:min(560px,92vw);max-width:92vw}#textModal::backdrop{background:rgba(0,0,0,0.18)}#textModal .modal-textarea{min-height:160px}#textModal .modal-row .color-row{flex:1;min-width:0}#textModal .modal-row>.prop-label{width:52px;flex:none}.doc-modal{width:min(600px,92vw);max-width:92vw;max-height:86vh;padding:0;gap:0}.doc-modal .modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 12px}.doc-modal .modal-body{padding:0 20px 4px;overflow-y:auto;flex:1;min-height:0;font-family:"Courier Prime",monospace;font-size:12px}.doc-modal .modal-body p{margin:0 0 12px;line-height:1.6;color:var(--dim)}.doc-modal .modal-body strong{color:var(--text);font-weight:400}.doc-modal .modal-body code{color:var(--cyan)}.doc-modal .modal-btns{flex:none;margin:0;padding:12px 20px 18px;border-top:1px solid var(--border)}.sub-label{font-family:"Press Start 2P",monospace;font-size:6px;color:var(--accent);letter-spacing:0.12em;margin:16px 0 8px}.ref-grid{display:grid;grid-template-columns:max-content 1fr;gap:7px 14px;margin:0 0 4px;line-height:1.5}.ref-grid dt{white-space:nowrap}.ref-grid dd{margin:0;color:var(--dim)}.ref-grid kbd+kbd{margin-left:3px}kbd{font-family:"Courier Prime",monospace;font-size:11px;background:var(--surface);color:var(--cyan);border:1px solid var(--border);border-radius:3px;padding:2px 5px;white-space:nowrap}.credits-lede{color:var(--text)!important;line-height:1.6;margin-top:4px}.credits-lede strong{color:var(--cyan)}.modal-row{display:flex;align-items:center;gap:10px}.modal-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:4px;flex-wrap:wrap}.modal-btns .action-btn{flex:none;padding:10px 20px}.modal-btns .export-btn{flex:none;padding:10px 20px}[hidden]{display:none!important}.prop-group{display:flex;flex-direction:column;gap:6px}.canvas-bg-row{display:flex;gap:8px}.canvas-bg-item{flex:1;display:flex;flex-direction:column;gap:4px}.custom-dropdown#canvasSizeDropdown.open .dropdown-options{max-height:min(460px,var(--dd-room, calc(100vh - 220px)))}#canvasSizeDropdown .dropdown-options::-webkit-scrollbar{width:8px}#canvasSizeDropdown .dropdown-options::-webkit-scrollbar-track{background:rgba(255,255,255,0.06)}#canvasSizeDropdown .dropdown-options::-webkit-scrollbar-thumb{background:var(--dd-accent, #ff3d6e);border-radius:4px}.dropdown-group{padding:7px 10px 3px;font-size:6px;color:var(--dim);letter-spacing:0.18em;pointer-events:none}.dropdown-group:not(:first-child){border-top:1px solid var(--line, rgba(255, 255, 255, 0.12));margin-top:3px}.prop-label{font-size:8px;color:var(--dim);letter-spacing:0.15em}.file-input{width:100%;padding:8px 10px;background:var(--surface);border:2px solid var(--border);border-radius:4px;color:var(--text);font-family:"Courier Prime",monospace;font-size:11px;outline:none}.file-input:focus{border-color:var(--accent)}.color-row{display:flex;align-items:center;gap:8px}.color-input{width:32px;height:24px;border:2px solid var(--border);border-radius:3px;background:none;cursor:pointer;padding:0}.color-input::-webkit-color-swatch-wrapper{padding:2px}.color-input::-webkit-color-swatch{border:none;border-radius:2px}.color-hex-input{font-family:"Courier Prime",monospace;font-size:11px;color:var(--dim);background:none;border:1px solid transparent;border-radius:2px;padding:2px 4px;width:70px;outline:none}.color-hex-input:focus{border-color:var(--accent);color:var(--text)}.no-fill-btn{width:24px;height:24px;background:var(--surface);border:2px solid var(--border);border-radius:3px;color:var(--dim);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}.no-fill-btn:hover{border-color:var(--rose);color:var(--rose)}.no-fill-btn.active{border-color:var(--rose);color:var(--rose);background:rgba(255,61,110,0.1)}.range-row{display:flex;align-items:center;gap:6px}.rot-btn{width:22px;height:22px;flex-shrink:0;background:var(--surface);border:2px solid var(--border);border-radius:4px;color:var(--accent);font-family:"Press Start 2P",monospace;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.12s;line-height:1}.rot-btn:hover{border-color:var(--accent);color:var(--text)}.rot-btn:active{background:rgba(160,160,176,0.15)}.range-input{flex:1;-webkit-appearance:none;appearance:none;height:6px;background:var(--border);border-radius:3px;outline:none}.range-input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--accent);border-radius:50%;cursor:pointer}.range-val{font-family:"Courier Prime",monospace;font-size:11px;color:var(--accent);min-width:28px;text-align:right}.prop-select{width:100%;padding:10px 30px 10px 10px;background-color:var(--surface);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a0a0b0' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;border:2px solid var(--border);border-radius:4px;color:var(--text);font-family:"Press Start 2P",monospace;font-size:9px!important;cursor:pointer;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.prop-select:focus{border-color:var(--accent)}.prop-select option{background:var(--surface);color:var(--text);font-family:inherit}.action-btns{display:flex;gap:6px}.action-btn{flex:1;padding:6px 6px;background:var(--surface);border:2px solid var(--border);border-radius:4px;color:var(--dim);font-family:"Press Start 2P",monospace;font-size:6px;cursor:pointer;transition:all 0.12s;letter-spacing:0.05em}.action-btn:hover{border-color:var(--accent);color:var(--text)}.action-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(160,160,176,0.08)}.action-btn.danger:hover{border-color:var(--rose);color:var(--rose)}.export-btn{width:100%;padding:12px;background:var(--accent);border:none;border-radius:4px;color:#000;font-family:"Press Start 2P",monospace;font-size:9px;cursor:pointer;letter-spacing:0.1em;transition:all 0.15s}.export-btn:hover{background:var(--text)}footer{text-align:center}.panel::-webkit-scrollbar{width:6px}.panel::-webkit-scrollbar-track{background:transparent}.panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.panel::-webkit-scrollbar-thumb:hover{background:var(--dim)}.shapes-popup::-webkit-scrollbar{width:6px}.shapes-popup::-webkit-scrollbar-track{background:transparent}.shapes-popup::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.shapes-popup::-webkit-scrollbar-thumb:hover{background:var(--dim)}body.tool-select #mainCanvas{cursor:default}body.tool-rect #mainCanvas,body.tool-circle #mainCanvas,body.tool-line #mainCanvas{cursor:crosshair}body.tool-text #mainCanvas{cursor:text}body.dragging #mainCanvas{cursor:grabbing}.shape-btn .chrome{font-size:16px;line-height:1}.shape-btn .chrome::before,.shape-btn .chrome::after{font-size:16px;line-height:1}.section-toggle{background:none;border:none;color:var(--dim);font-size:10px;line-height:1;padding:2px 4px;cursor:pointer;transition:color 0.1s,transform 0.1s}.section-toggle:hover{color:var(--text)}.section-toggle:not(.active){transform:rotate(-90deg)}.layers-section[hidden],.ref-section[hidden]{display:none}.layers-list{display:flex;flex-direction:column;gap:1px;max-height:220px;overflow-y:auto;margin-bottom:6px}.layer-row{display:flex;align-items:center;gap:6px;padding:4px 6px;background:var(--surface);border:1px solid transparent;border-left:2px solid transparent;cursor:pointer;font-size:9px;color:var(--dim);white-space:nowrap;overflow:hidden}.layer-row:hover{color:var(--text);border-color:var(--border)}.layer-row.selected{color:var(--text);background:var(--panel);border-left-color:var(--rose)}.layer-kind{flex:0 0 auto;font-family:"Press Start 2P",monospace;font-size:7px;letter-spacing:0.08em;color:var(--accent)}.layer-name{flex:1 1 auto;font-family:"Courier Prime",monospace;font-size:11px;overflow:hidden;text-overflow:ellipsis}.layer-row.hidden .layer-kind,.layer-row.hidden .layer-name{opacity:0.35}.layer-vis{flex:0 0 auto;background:none;border:none;color:var(--dim);font-size:10px;line-height:1;padding:0 2px;cursor:pointer}.layer-vis:hover{color:var(--rose)}.layer-lock{flex:0 0 auto;background:none;border:none;color:var(--dim);font-size:10px;line-height:1;padding:0 2px;cursor:pointer}.layer-lock:hover{color:var(--rose)}.layer-row.locked .layer-name{cursor:default}#lockBtn.active{border-color:var(--rose);color:var(--rose)}.layers-list .no-data{padding:8px 6px;font-size:9px;color:var(--dim)}.modal-message{font-family:"Courier Prime",monospace;font-size:0.9rem;line-height:1.5;color:var(--text)}#mainCanvas.drag-over{outline:2px dashed var(--rose);outline-offset:-2px}@media(max-width:768px){html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}header{flex-wrap:wrap;gap:8px 12px;padding:12px 16px}.header-right{flex-wrap:wrap;gap:8px}.workspace{flex:none;flex-direction:column;overflow:visible}.center-area{order:-1;flex:none;height:min(100vw,70svh);padding:12px}.panel{width:auto;overflow:visible;border-right:none;border-left:none;border-top:2px solid var(--border);padding:12px 16px}}html.desktop .tool-nav,html.desktop footer,html.desktop .mobile-notice{display:none}:root.desktop{--title-size: 10px;--title-glow: none}html.desktop header{padding:8px 16px}html.desktop h1.glitch::before,html.desktop h1.glitch::after{content:none}.doc-name{display:none}html.desktop .doc-name{display:inline-block;font-family:"Courier Prime",monospace;font-size:0.78rem;color:var(--dim);padding-left:16px;border-left:1px solid var(--border);max-width:40ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layers-section{display:none}html.desktop .layers-section{display:block}.menubar{display:none}html.desktop .menubar{display:flex;align-items:stretch;align-self:stretch;margin-left:4px}html.desktop .menu{position:relative;display:flex}html.desktop .menu-title{font-family:"Press Start 2P",monospace;font-size:8px;letter-spacing:0.08em;color:var(--dim);background:none;border:none;padding:0 12px;cursor:pointer;transition:color 0.1s,background 0.1s}html.desktop .menu-title:hover{color:var(--text);background:var(--surface)}html.desktop .menu.open .menu-title{color:var(--bg);background:var(--rose)}html.desktop .menu-drop{display:none;position:absolute;top:100%;left:0;z-index:40;min-width:248px;padding:5px 0;background:var(--panel);border:1px solid var(--border);border-top:2px solid var(--rose);box-shadow:4px 4px 0 rgba(0,0,0,0.55)}html.desktop .menu.open .menu-drop{display:block}html.desktop .menu-drop button{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:28px;width:100%;font-family:"Courier Prime",monospace;font-size:0.8rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text);background:none;border:none;border-left:2px solid transparent;padding:5px 14px 5px 24px;text-align:left;cursor:pointer}html.desktop .menu-drop button:hover:not(:disabled){background:var(--rose);border-left-color:var(--cyan);color:var(--bg)}html.desktop .menu-drop button:disabled{color:var(--dim);cursor:default}html.desktop .menu-drop button i{font-style:normal;font-size:0.7rem;letter-spacing:0;color:var(--dim);text-transform:none}html.desktop .menu-drop button:hover:not(:disabled) i{color:var(--bg)}html.desktop .menu-drop button.checked::before{content:"✓";position:absolute;left:9px;font-size:0.8rem}html.desktop .menu-drop hr{height:0;margin:5px 12px;border:0;border-top:1px solid var(--border)}