:root{--paper:#f5f4f0;--ink:#11120f;--line:#d8d7d1;--blue:#2415e8;--muted:#898982;--green:#14a87a;--red:#ea423b;--panel:304px}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}button,input,select{font:inherit}.topbar{height:58px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 20px;gap:22px;position:relative;z-index:5}.brand{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.19em;font-weight:700;white-space:nowrap}.brand i{width:10px;height:10px;background:var(--blue)}.file-meta{font:11px/1.2 "Courier New",monospace;color:#aaa;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.actions{display:flex;align-items:center;gap:7px}.actions a{font-size:10px;letter-spacing:.14em;color:#969690;text-decoration:none;margin-left:10px;white-space:nowrap}.button{border:1px solid var(--line);background:#fff;height:32px;padding:0 18px;font-size:10px;letter-spacing:.12em;cursor:pointer}.button:hover{border-color:#111}.button.primary{background:#111;color:#fff;border-color:#111}.button.primary:hover{background:var(--blue)}main{height:calc(100vh - 58px);display:grid;grid-template-columns:minmax(0,1fr) var(--panel)}.stage{position:relative;overflow:hidden;background-color:#f3f2ee;background-image:linear-gradient(45deg,#e8e7e2 25%,transparent 25%),linear-gradient(-45deg,#e8e7e2 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e8e7e2 75%),linear-gradient(-45deg,transparent 75%,#e8e7e2 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0;display:grid;place-items:center}.stage:after{content:"";position:absolute;inset:11% 8%;border:1px solid rgba(34,20,230,.12);pointer-events:none}.artboard{position:relative;z-index:2;filter:drop-shadow(0 12px 22px rgba(0,0,0,.12));outline:1px solid var(--blue);transform-origin:center;touch-action:none}.artboard canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.maskCanvas{pointer-events:none}.handle{position:absolute;width:7px;height:7px;background:#fff;border:1px solid #222;z-index:3}.tl{left:-4px;top:-4px}.tr{right:-4px;top:-4px}.bl{left:-4px;bottom:-4px}.br{right:-4px;bottom:-4px}.mr{right:-5px;top:50%}.mb{left:50%;bottom:-5px}.dimension-tag{position:absolute;left:50%;bottom:-27px;transform:translateX(-50%);background:#111;color:white;padding:4px 8px;font:10px "Courier New",monospace;white-space:nowrap}.status-card{position:absolute;z-index:3;left:18px;bottom:17px;background:rgba(255,255,255,.94);border:1px solid #111;padding:10px 12px;display:flex;gap:22px;font:10px "Courier New",monospace;box-shadow:2px 2px 0 rgba(0,0,0,.08)}.stage-copy{display:none;position:absolute;z-index:3;width:min(510px,70%);left:8%;top:16%;background:rgba(245,244,240,.94);border:1px solid #111;padding:34px}.stage-copy h1{font:500 42px/1.03 Georgia,serif;margin:12px 0}.stage-copy em{color:var(--blue)}.stage-copy p{font:13px/1.5 monospace;max-width:430px}.eyebrow{font-size:10px;letter-spacing:.16em;font-weight:700}.drop-hint{position:absolute;z-index:10;inset:24px;border:2px dashed var(--blue);background:rgba(245,244,240,.9);display:none;place-items:center;font:700 14px monospace;color:var(--blue)}.stage.dragging .drop-hint{display:grid}.panel{border-left:1px solid var(--line);background:rgba(255,255,255,.97);overflow-y:auto}.control-section{padding:20px 16px;border-bottom:1px solid #e4e3de}.control-section h2{margin:0 0 18px;padding-bottom:10px;border-bottom:1px solid #111;font-size:10px;letter-spacing:.18em}.control-section h2 b{color:var(--blue);margin-right:8px}.field-row{display:grid;grid-template-columns:1fr 30px 1fr;gap:6px;align-items:end}.field-row label,.select-label{font-size:8px;letter-spacing:.15em;color:#999}.field-row input{display:block;width:100%;height:31px;margin-top:6px;padding:0 8px;border:1px solid var(--line);font:11px "Courier New",monospace;background:white}.lock{height:31px;border:1px solid var(--line);background:#fff;color:#aaa;cursor:pointer}.lock.active{color:var(--blue);border-color:#aaa}.slider-label{position:relative;margin-top:18px;display:grid;grid-template-columns:1fr auto;font-size:10px}.slider-label output{font:9px "Courier New",monospace;color:#888}.slider-label input{grid-column:1/-1;width:100%;margin:10px 0 0;accent-color:#111;height:3px}.micro-label{font-size:8px;letter-spacing:.18em;color:#8a8a84;margin:25px 0 8px}.segmented{display:flex;flex-wrap:wrap;gap:4px}.segmented button{height:26px;border:1px solid #d7d6d0;background:white;padding:0 8px;font:9px "Courier New",monospace;color:#666;cursor:pointer}.segmented button.active,.segmented button:hover{background:#111;color:white;border-color:#111}.shapes button{flex:1 0 29%}.hint{font-size:9px;line-height:1.5;color:#a2a29c;margin:12px 0}.check{display:flex;gap:7px;align-items:center;margin:12px 0;font-size:10px}.check input{accent-color:#111}.check small{color:#aaa}.select-label{display:block;color:#111;font-size:10px;letter-spacing:0;margin-top:17px}.select-label select{display:block;width:100%;height:32px;margin-top:7px;border:1px solid var(--line);padding:0 8px;background:#fff;font:10px "Courier New",monospace}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}.tool-grid button{height:34px;background:#fff;border:1px solid var(--line);font-size:9px;letter-spacing:.06em;cursor:pointer}.tool-grid button.active{background:#111;color:#fff;border-color:#111}.tool-grid i,.legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}.green{background:var(--green)}.red{background:var(--red)}.text-button{background:transparent;border:0;border-bottom:1px solid #aaa;font-size:9px;letter-spacing:.12em;padding:0 0 3px;cursor:pointer}.legend{display:flex;gap:16px;margin-top:16px;font:9px monospace;color:#888}.toast{position:fixed;z-index:20;left:50%;bottom:24px;transform:translate(-50%,20px);background:#111;color:#fff;padding:10px 15px;font:10px monospace;opacity:0;transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:820px){:root{--panel:270px}.topbar{padding:0 10px}.file-meta,.actions a{display:none}.brand{flex:1}.stage:after{inset:5%}.status-card{display:none}}@media(max-width:650px){html,body{overflow:auto}.topbar{position:sticky;top:0}.actions #resetBtn{display:none}main{height:auto;min-height:calc(100vh - 58px);display:flex;flex-direction:column}.stage{height:62vh;min-height:420px}.panel{width:100%;overflow:visible;border-left:0;border-top:1px solid var(--line)}.control-section{padding:22px}.artboard{max-width:86%}}