:root{color-scheme:dark;--bg:#0c131e;--panel:#131e2d;--text:#edf3fb;--muted:#9cacc1;--line:#2b3c50;--accent:#e5a464}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:13px/1.6 Arial,sans-serif}button,input,select,textarea{font:inherit}button,label.upload,.import-label{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}a{color:inherit;text-decoration:none}header{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 28px;gap:25px;background:#0c131e;position:sticky;top:0;z-index:10}.brand{font-size:20px;font-weight:800;letter-spacing:1.5px;white-space:nowrap}.brand>span{color:var(--accent);font-weight:400}.brand small{font:10px Arial;color:var(--muted);letter-spacing:1.5px;margin-left:10px}header>a:nth-child(2){font-size:12px;margin-left:auto;color:var(--muted)}button,.import-label{border:1px solid var(--line);background:#1a293b;color:#e0e8f3;padding:9px 13px;border-radius:5px}.primary{background:var(--accent);border-color:var(--accent);color:#131b25;font-weight:bold}.primary:hover{background:#f1b67a}.wide{width:100%}main{display:grid;grid-template-columns:375px minmax(0,1fr);max-width:1800px;margin:auto}aside{border-right:1px solid var(--line);padding:28px 24px 40px;background:#101a28;max-height:calc(100vh - 72px);overflow:auto}.eyebrow{font-size:8px;letter-spacing:1.8px;color:var(--accent)}h1{font-size:26px;font-weight:400;margin:10px 0}.editor-intro p{color:var(--muted);font-size:12px;margin:0 0 22px}fieldset{margin:0;padding:20px 0 22px;border:0;border-top:1px solid var(--line);min-width:0}legend{float:left;width:100%;font-size:14px;font-weight:bold;padding:0 0 18px}legend>span{font:10px monospace;color:var(--accent);margin-right:10px}fieldset>label{clear:both}label{display:block;color:#b9c7d9;font-size:11px;margin-bottom:12px}input:not([type=file]):not([type=range]):not([type=checkbox]),textarea,select{display:block;margin-top:5px;width:100%;min-width:0;padding:9px 10px;border:1px solid #3a4d66;background:#0c1521;color:#edf3fa;border-radius:4px}textarea{resize:vertical}input[type=color]{height:35px;padding:3px!important}input[type=range]{display:block;width:100%;accent-color:var(--accent);margin-top:8px}input[type=checkbox]{accent-color:var(--accent)}.two{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;clear:both}.upload{border:1px dashed #627895;background:#172437;text-align:center;padding:18px 12px;border-radius:5px;position:relative;clear:both}.upload span{display:block;color:#e4b786;font-size:13px}.upload small{display:block;font-size:10px;color:#8ca0b8;margin-top:5px}.upload input,.import-label input{position:absolute;width:1px;height:1px;opacity:0}.muted{color:var(--muted);font-size:10px;margin:-3px 0 14px;overflow-wrap:anywhere}output{float:right;color:var(--accent)}fieldset>p{clear:both;color:var(--muted);font-size:11px;margin:0 0 15px}.actions{gap:10px;margin-top:12px}.actions button,.import-label{text-align:center;font-size:11px;margin:0;position:relative}.reset{background:none;border:0;color:var(--muted);padding:12px 0;font-size:11px}.instructions{margin-top:12px;padding:13px;border:1px solid #3d4a5b;border-radius:5px;font-size:11px;color:#a7b8cc}.instructions strong{color:#d4deeb}.instructions code{display:block;font-size:10px;overflow-wrap:anywhere;margin:8px 0;color:#dfb581}.instructions p{margin:8px 0}.preview-area{padding:24px;position:sticky;top:72px;height:calc(100vh - 72px);display:flex;flex-direction:column;gap:16px;overflow:auto;background:radial-gradient(ellipse at top,#17283e,#0b121c 70%)}.preview-toolbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.preview-toolbar>span{font:9px monospace;letter-spacing:1.5px;color:#b5c8dd;display:flex;align-items:center;gap:7px}.preview-toolbar i{width:5px;height:5px;border-radius:50%;background:#79c4a8}.preview-sizes{margin-left:auto;display:flex}.preview-sizes button{border-radius:0;font-size:10px;padding:6px 12px}.preview-sizes button:first-child{border-radius:4px 0 0 4px}.preview-sizes button:last-child{border-radius:0 4px 4px 0}.preview-sizes .active{border-color:#a3764e;background:#79512d33;color:#f0bb89}.ready-toggle{display:flex;align-items:center;gap:6px;margin:0;font-size:10px}.frame-wrap{border:1px solid #3e526b;border-radius:9px;overflow:hidden;background:#020611;min-height:430px;flex:1;box-shadow:0 20px 60px #0005;width:100%;margin:0 auto;transition:max-width .15s}.frame-wrap.mobile{max-width:390px;min-height:650px;flex:none;height:650px}iframe{width:100%;height:100%;display:block;border:0;min-height:430px}.preview-bottom{display:flex;gap:40px;align-items:center}.preview-bottom label{min-width:220px;margin:0;font-size:10px}.preview-bottom p{font-size:10px;color:#778ca7}.where{border-top:1px solid #293b50;padding-top:12px;color:#7f95b0}.where>span{font-size:8px;letter-spacing:1.5px}.where p{font-size:10px;line-height:1.9;margin-bottom:0}.where code{color:#a3b8d1;font-size:10px}#status{font-size:12px;color:#a5dac1;overflow-wrap:anywhere;position:sticky;bottom:0;background:#101a28;margin:0;padding:12px 0}button:disabled{opacity:.5;cursor:wait}@media(min-width:1600px){main{grid-template-columns:405px minmax(0,1fr)}aside{padding:30px}.preview-area{padding:30px;gap:22px}}@media(max-width:1050px){main{grid-template-columns:320px minmax(0,1fr)}aside{padding:22px 16px}.preview-area{padding:18px 12px}.preview-toolbar{gap:10px}.preview-toolbar>span{font-size:8px}.preview-bottom{gap:15px}.preview-bottom label{min-width:170px}}@media(max-width:750px){header{padding:0 15px;gap:10px;height:64px}.brand{font-size:16px}.brand small{display:none}header>a:nth-child(2){font-size:10px}header .primary{font-size:10px;padding:8px}main{display:flex;flex-direction:column-reverse}aside{max-height:none;overflow:visible;border:0;padding:24px 20px}.preview-area{position:static;height:auto;padding:18px 12px 20px}.frame-wrap{flex:none;height:420px;min-height:420px}.frame-wrap.mobile{min-height:620px;height:620px}.where{display:none}.preview-bottom{align-items:start}.preview-bottom p{max-width:140px;font-size:9px}.preview-toolbar{gap:8px}.ready-toggle{width:100%;justify-content:end}.editor-intro h1{font-size:28px}.preview-toolbar>span{font-size:8px}.preview-sizes{margin-left:auto}}