:root{--bg:#151713;--panel:#1c1f19;--line:#34382d;--muted:#929b83;--ink:#e7eadb;--lime:#cef580;--orange:#eab17d}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:13px 'Segoe UI',system-ui,sans-serif}button,select{font:inherit}button{cursor:pointer;color:inherit;border:1px solid var(--line);border-radius:5px;background:#252920;padding:10px 13px;transition:background .15s,border-color .15s}button:hover{background:#343c2a;border-color:#69754e}button:disabled{opacity:.38;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,.import:focus-within{outline:2px solid var(--lime);outline-offset:4px}header{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 29px;gap:30px}.brand{display:flex;gap:11px;align-items:center;text-decoration:none;color:var(--ink);font-weight:800;font-size:17px;letter-spacing:-.7px}.brand-icon{display:grid;place-items:center;border:1px solid var(--lime);width:34px;height:34px;color:var(--lime);font-size:27px}.brand-light{font-weight:400;margin-left:4px}.brand b{font:9px monospace;color:var(--muted);border:1px solid var(--line);padding:4px 6px;margin-left:5px;letter-spacing:.5px}.header-note{font:9px monospace;letter-spacing:.9px;color:var(--muted);margin-left:auto}.header-note i,.view-label i{display:inline-block;width:5px;height:5px;background:var(--lime);border-radius:50%;margin-right:7px}.quiet{background:transparent;border:0;font-size:11px}.quiet span{display:inline-grid;place-items:center;border:1px solid var(--muted);width:17px;height:17px;border-radius:50%;margin-left:8px}main{display:grid;grid-template-columns:285px minmax(0,1fr);max-width:1700px;margin:auto}.sidebar{padding:28px 23px 23px;border-right:1px solid var(--line)}.kicker{font:9px monospace;letter-spacing:1.7px;color:var(--lime)}h1{font-weight:500;font-size:31px;letter-spacing:-1.2px;line-height:1.1;margin:14px 0 10px}h1>span{color:var(--lime)}.intro{color:var(--muted);font-size:11px;margin:0 0 25px}.import{display:flex;align-items:center;flex-direction:column;border:1px dashed #67744c;border-radius:6px;background:#23291c;padding:17px 6px;cursor:pointer;position:relative;gap:7px}.import:hover,.import.dragging{background:#303d20;border-color:var(--lime)}.import-symbol{color:var(--lime);font-size:26px;line-height:1}.import strong{font-size:12px;font-weight:600}.import span:not(.import-symbol){font-size:10px;color:var(--muted)}.import small{font-size:8px;color:#929d7b;white-space:nowrap;margin-top:4px}.import input{position:absolute;width:1px;height:1px;opacity:0}.demo{width:100%;border:0;background:transparent;color:var(--muted);font-size:10px;padding:11px}.section-label{font:9px monospace;letter-spacing:1.2px;margin:24px 0 12px;display:flex;align-items:center;gap:8px}.section-label>span{color:#6c775b}.section-label em{font-size:7px;color:var(--orange);font-style:normal;margin-left:auto;border:1px solid #64503a;padding:3px;letter-spacing:.2px}.presets{display:grid;gap:7px}.preset{display:flex;align-items:center;text-align:left;gap:11px;width:100%;padding:11px}.preset-icon{font-size:24px;color:#8d9c79;width:24px}.preset strong{font:10px monospace;display:block;letter-spacing:.4px}.preset small{display:block;font-size:9px;color:var(--muted);margin-top:5px}.preset>b{margin-left:auto;font-weight:400;color:#6b7957}.preset.active{background:#303c23;border-color:#9dc35f}.preset.active .preset-icon,.preset.active>b{color:var(--lime)}.control{display:block;margin:16px 0;font-size:11px}.control output{float:right;font:10px monospace;color:var(--lime)}input[type=range]{display:block;width:100%;height:4px;margin:15px 0 10px;accent-color:var(--lime);cursor:pointer}.control small{font-size:8px;color:var(--muted);display:block;line-height:1.5}.row,.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px}.row select{border:1px solid #414a33;background:#252c1e;color:#cbd8b6;border-radius:4px;font:10px monospace;padding:6px 5px;min-width:86px}.toggle{font-size:11px;margin:17px 0}input[type=checkbox]{accent-color:var(--lime);width:15px;height:15px}.reset{border:1px solid var(--line);margin-top:6px}.privacy{font:8px monospace;color:#8b9975;line-height:1.6;margin-top:22px}.studio{padding:0 25px;min-width:0;background:linear-gradient(130deg,#20241b 0%,#191d17 75%)}.studio-toolbar{height:80px;display:flex;align-items:center;justify-content:space-between;gap:12px}.file-meta{display:flex;gap:10px;align-items:center;min-width:100px}.file-icon{font-size:27px;color:#b6c796}.file-meta strong{display:block;font:11px monospace;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-meta small{display:block;font-size:9px;color:var(--muted);margin-top:5px}.view-tools{display:flex;gap:5px}.view-tools button{background:transparent;border-color:transparent;font-size:10px;padding:7px 9px;color:#aebc99}.view-tools .selected{background:#333e27;border-color:#536240;color:#d4eabb}.viewports{height:500px;min-height:320px;display:grid;grid-template-columns:1fr 1fr;position:relative;border:1px solid #4b563b;border-radius:5px;overflow:hidden;background:#1b2019}.view{min-width:0;position:relative;height:100%;overflow:hidden}.view.before{border-right:1px solid #53623c}.view-label{position:absolute;top:17px;left:17px;right:17px;display:flex;align-items:center;font:9px monospace;letter-spacing:1px;z-index:1;pointer-events:none}.view-label>span:last-child{margin-left:auto;color:#77896c;font-size:8px;letter-spacing:.5px}.before .view-label i{background:#8d9b81}.after .view-label{color:var(--lime)}.canvas-holder{height:100%;width:100%;position:relative}.canvas-holder canvas{display:block;width:100%;height:100%;outline:none;touch-action:none}.after canvas{image-rendering:pixelated}.view-bottom{position:absolute;left:17px;right:17px;bottom:45px;display:flex;justify-content:space-between;font:8px monospace;color:#9aa78b;letter-spacing:.7px;pointer-events:none}.after .view-bottom{color:#b0cb8e}.orbit-hint{position:absolute;bottom:13px;left:0;right:0;text-align:center;font:8px monospace;color:#7e8f6f;pointer-events:none;letter-spacing:1px}.orbit-hint b{color:#526047;margin:0 8px}.viewports.solo{grid-template-columns:1fr}.viewports.solo .before{display:none}.busy{position:absolute;inset:0;background:#191e18dd;display:flex;align-items:center;justify-content:center;gap:14px;color:var(--lime);font:11px monospace;z-index:3}.busy[hidden]{display:none}.spinner{width:18px;height:18px;border:2px solid #4c5e35;border-top-color:var(--lime);border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.metrics{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;border-bottom:1px solid var(--line);padding:25px 0}.metrics>div{padding:0 22px;border-right:1px solid var(--line)}.metrics>div:first-child{padding-left:0}.metrics>div:last-child{border:0;padding-right:0}.metrics span{display:block;color:#88997a;font:8px monospace;letter-spacing:1px}.metrics strong{display:block;font:28px monospace;font-weight:400;letter-spacing:-1px;margin:11px 0 6px}.metrics em{font:11px monospace;font-style:normal;color:#a6b396;letter-spacing:0;margin-left:5px}.metrics small{font-size:8px;color:#8b9b7c}.metrics>div:first-child small{color:var(--lime)}.export-panel{padding:27px 0;display:flex;justify-content:space-between;gap:20px;align-items:center}h2{font-size:24px;font-weight:450;letter-spacing:-.7px;margin:9px 0 11px}.export-panel p{color:var(--muted);font-size:10px;line-height:1.8;margin:0}.export-actions{min-width:290px}.primary{background:var(--lime);border-color:var(--lime);color:#203014;font-weight:700}.primary:hover{background:#ddff9f;border-color:#ddff9f}.export-actions>.primary{width:100%;text-align:left;display:flex;justify-content:space-between;padding:14px 16px;font-size:12px}.primary>span{font:10px monospace}.export-actions>div{display:flex;gap:7px;margin-top:8px}.export-actions>div>button{flex:1;font-size:9px;padding:10px 7px;background:transparent}.export-actions>small{display:block;font:8px monospace;color:#869775;text-align:center;margin-top:10px}.status-line{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;padding:15px 0;font:9px monospace;color:#a2b68c;line-height:1.7}#status.error{color:#ffb08e}#custom{font-size:8px;white-space:nowrap;color:#6f835d}footer{border-top:1px solid var(--line);padding:18px 29px;display:flex;justify-content:space-between;font:8px monospace;color:#77886a;letter-spacing:1px}footer b{font-weight:400;color:#4d5b44;margin-left:15px}dialog{border:1px solid #718b50;background:#232a1d;color:var(--ink);border-radius:9px;padding:32px;max-width:610px;width:calc(100% - 30px);box-shadow:0 30px 100px #0009}dialog::backdrop{background:#080d07bb}dialog h2{font-size:30px}dialog ol{padding-left:19px;font-size:12px;line-height:1.8;color:#b8c6a6}dialog li{padding:6px 0}dialog strong{color:#e1e9d4}dialog p{font-size:11px;line-height:1.8;color:#9eaf8c}.close{position:absolute;right:13px;top:13px;padding:3px 10px;background:transparent;font-size:22px}dialog .primary{margin-top:15px}.fatal{position:fixed;inset:0;display:grid;place-content:center;padding:30px;background:#171d14;z-index:20}.fatal h2{color:var(--lime)}.fatal p{max-width:500px;line-height:1.8;color:#b6c7a2}.fatal button{max-width:200px}@media(min-width:1500px){.viewports{height:610px}}@media(max-width:1100px){main{grid-template-columns:255px minmax(0,1fr)}.sidebar{padding:25px 17px}.studio{padding:0 16px}.header-note{display:none}header .quiet{margin-left:auto}.view-tools button span{display:none}.viewports{height:440px}.metrics{grid-template-columns:repeat(3,1fr)}.metrics .metric-last{display:none}.metrics>div{padding:0 12px}.metrics>div:nth-child(3){border:0}.export-panel{flex-direction:column;align-items:stretch}.export-actions{min-width:0}.view-label{font-size:8px;left:10px;right:10px}.view-label>span:last-child{font-size:6px}.view-bottom{left:10px;right:10px;font-size:7px}.file-meta strong{max-width:170px}}@media(max-width:720px){header{padding:0 16px;height:65px}.brand{font-size:14px}.brand b{display:none}.quiet{font-size:9px}main{display:flex;flex-direction:column}.sidebar{border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.sidebar>.kicker,.sidebar>h1,.sidebar>.intro,.sidebar>.import,.sidebar>.demo,.sidebar>.section-label,.sidebar>.presets,.sidebar>.privacy{grid-column:1/-1}h1 br{display:none}.presets{grid-template-columns:1fr 1fr 1fr}.preset{padding:10px 6px;gap:5px}.preset small,.preset>b{display:none}.preset strong{font-size:8px}.preset-icon{font-size:20px;width:20px}.section-label{margin-top:20px}.control{margin:14px 0}.viewports{height:420px}.view-label>span:last-child{display:none}.studio-toolbar{height:70px}.view-tools button{padding:6px}.metrics strong{font-size:22px}.metrics small{font-size:7px}.metrics em{font-size:9px}.metrics span{font-size:7px}.export-panel{padding:22px 0}.status-line{font-size:8px}.status-line #custom{display:none}footer{padding:16px;letter-spacing:0;font-size:7px}footer b{display:none}.orbit-hint{font-size:6px;letter-spacing:.4px}.orbit-hint b{margin:0 3px}}