:root{--bg:#0a0d0c;--panel:#111513;--line:#27302c;--muted:#849089;--text:#eef4f0;--lime:#b8f34b;--copper:#e1a93a}*{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);overflow:hidden}.topbar{height:68px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 18px 0 20px;background:#0d100f;position:relative;z-index:4}.brand{display:flex;align-items:center;gap:11px;width:292px;color:var(--text);text-decoration:none}.brand-mark{width:34px;height:34px;border:1px solid #59635e;border-radius:9px;display:grid;place-items:center;font-weight:800;color:var(--lime);background:#171c19}.brand b{font-size:15px;letter-spacing:.03em}.brand small{font-size:8px;display:block;letter-spacing:.2em;color:var(--muted);margin-top:2px}.file-meta{display:flex;align-items:center;gap:10px;color:#b8c0bc;font:12px ui-monospace,SFMono-Regular,monospace;min-width:0;flex:1}.status-dot{width:7px;height:7px;background:#65706a;border-radius:50%}.status-dot.live{background:var(--lime);box-shadow:0 0 12px #9bea3b}.divider{height:16px;width:1px;background:var(--line)}.actions{display:flex;gap:8px}.button{appearance:none;border:1px solid #39433e;border-radius:7px;background:#171c19;color:#eaf0ed;padding:9px 14px;font:600 12px inherit;cursor:pointer;transition:.16s}.button:hover{border-color:#77827c;transform:translateY(-1px)}.button.primary{background:var(--lime);color:#10140e;border-color:var(--lime)}.button.ghost{background:#151917}.shell{height:calc(100% - 68px);display:grid;grid-template-columns:292px 1fr}.sidebar{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}.project-head{padding:24px 20px 19px;border-bottom:1px solid var(--line)}.eyebrow{font-size:9px;letter-spacing:.22em;color:#728078;font-weight:700;margin:0 0 9px}.project-head h1{font-size:17px;margin:0 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.project-head>p:last-child{font-size:11px;line-height:1.55;color:var(--muted);margin:0}.panel.stats{display:grid;grid-template-columns:repeat(3,1fr);margin:14px;border:1px solid var(--line);border-radius:8px;background:#0c100e}.stats div{padding:11px 8px;border-right:1px solid var(--line);min-width:0}.stats div:last-child{border:0}.stats strong{font:600 13px ui-monospace,SFMono-Regular,monospace;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stats span{font-size:9px;color:var(--muted);display:block;margin-top:4px}.layers-head{padding:9px 18px;display:flex;align-items:center;justify-content:space-between}.layers-head>div{display:flex;align-items:center;gap:8px}.layers-head p{margin:0}.layers-head span{font-size:9px;color:var(--muted)}.layers-head button{font:10px inherit;color:#aeb8b2;background:none;border:0;cursor:pointer}.layer-list{overflow:auto;flex:1;padding:0 10px}.empty-layers{font-size:11px;line-height:1.6;color:#657069;padding:20px 9px}.layer-row{height:42px;display:grid;grid-template-columns:18px 13px 1fr auto;align-items:center;gap:8px;padding:0 8px;border-radius:6px;cursor:pointer;border:1px solid transparent}.layer-row:hover{background:#181d1a}.layer-row.active{background:#1b211e;border-color:#313a35}.eye{width:14px;height:14px;border:1px solid #66716b;border-radius:50%;position:relative}.eye.on:after{content:"";position:absolute;inset:3px;border-radius:50%;background:currentColor}.swatch{height:9px;width:9px;border-radius:2px}.layer-name{font:11px ui-monospace,SFMono-Regular,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}.layer-type{font-size:8px;color:#68736d}.layer-row .count{font:9px ui-monospace,SFMono-Regular,monospace;color:#77817c}.sidebar footer{height:38px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 16px;color:#66716b;font-size:9px}.workspace{position:relative;min-width:0;overflow:hidden;background-color:#080b09;background-image:linear-gradient(rgba(55,66,60,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(55,66,60,.16) 1px,transparent 1px);background-size:24px 24px}.workspace.dragging .drop-hint{display:grid}.drop-hint{position:absolute;inset:18px;border:2px dashed var(--lime);background:rgba(10,15,11,.86);color:var(--lime);font-size:18px;letter-spacing:.08em;place-items:center;z-index:8;display:none}.welcome{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}.welcome h2{font-size:38px;line-height:1.12;letter-spacing:-.035em;margin:5px 0 14px}.welcome>p:not(.eyebrow){max-width:500px;color:var(--muted);font-size:13px;line-height:1.7;margin:0}.welcome-actions{display:flex;gap:8px;margin-top:22px}.board-ghost{width:160px;height:104px;border:2px solid #6d7d72;border-radius:12px;margin-bottom:25px;position:relative;color:#48534c;display:grid;place-items:center;font:700 18px ui-monospace,monospace;box-shadow:inset 0 0 0 6px #101512}.board-ghost i{position:absolute;width:12px;height:12px;border:2px solid #5e6d63;border-radius:50%}.board-ghost i:nth-child(1){left:12px;top:12px}.board-ghost i:nth-child(2){right:12px;top:12px}.board-ghost i:nth-child(3){left:12px;bottom:12px}.board-ghost i:nth-child(4){right:12px;bottom:12px}canvas{width:100%;height:100%;display:block;cursor:grab}canvas.drag{cursor:grabbing}.toolbar{position:absolute;top:15px;left:15px;height:36px;display:flex;background:#121714;border:1px solid #2c3530;border-radius:7px;overflow:hidden;box-shadow:0 5px 20px #0008}.toolbar button{border:0;border-right:1px solid #2c3530;background:none;color:#cbd3ce;min-width:36px;padding:0 10px;cursor:pointer;font:11px inherit}.toolbar button:hover{background:#222a25;color:#fff}.toolbar span{width:8px;border-right:1px solid #2c3530}.legend{position:absolute;left:15px;bottom:14px;right:15px;display:flex;gap:18px;color:#79847d;font:9px ui-monospace,monospace;pointer-events:none}.legend span:last-child{margin-left:auto;color:#aab4ae}.loading{position:absolute;inset:0;background:#080b09dd;z-index:7;display:flex;align-items:center;justify-content:center;gap:12px}.loading span{width:18px;height:18px;border:2px solid #364038;border-top-color:var(--lime);border-radius:50%;animation:spin .7s linear infinite}.loading b{font-size:12px}#toast{position:fixed;right:18px;bottom:18px;padding:12px 16px;border:1px solid #3b4841;border-radius:8px;background:#151b17;color:#e7eee9;font-size:12px;z-index:20;opacity:0;transform:translateY(8px);transition:.2s;pointer-events:none}#toast.show{opacity:1;transform:none}#toast.error{border-color:#974b4b;color:#ffb3b3}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:760px){.topbar{height:58px}.brand{width:auto}.brand span:last-child,.file-meta{display:none}.actions .ghost{display:none}.shell{height:calc(100% - 58px);grid-template-columns:1fr}.sidebar{position:absolute;z-index:5;left:0;bottom:0;width:100%;height:180px;border:0;border-top:1px solid var(--line)}.project-head,.stats,.layers-head,footer{display:none!important}.layer-list{display:flex;gap:5px;padding:8px;overflow-x:auto}.layer-row{min-width:155px}.workspace{padding-bottom:180px}.welcome h2{font-size:28px}.board-ghost{width:120px;height:78px}.legend{bottom:192px}.toolbar{top:12px}.welcome{bottom:180px}}