:root{color-scheme:dark;--bg:#0b0d0f;--panel:#121518;--border:#303332;--gold:#d9bd82;--white:#f0f0e9;--muted:#acb1af}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--white);font-family:Inter,Segoe UI,Arial,sans-serif}main{max-width:1240px;margin:auto;padding:34px 28px}header{margin-bottom:28px}.back{font-size:12px;letter-spacing:2px;text-decoration:none;color:var(--muted)}.eyebrow{color:var(--gold);font-size:11px;font-weight:600;letter-spacing:2px;margin:22px 0 10px}h1{font-family:Arial Narrow,Impact,sans-serif;font-weight:500;font-size:clamp(28px,4vw,48px);letter-spacing:1px;margin:0}h2{font-family:Arial Narrow,Impact,sans-serif;font-weight:500;font-size:30px;margin:0 0 16px;letter-spacing:1px}.intro{color:var(--muted);font-size:15px;margin:12px 0 0}.layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,1fr);gap:24px}.preview-panel,.setup-panel{background:var(--panel);border:1px solid var(--border);border-radius:8px;min-width:0}.preview-head{padding:16px;display:flex;align-items:center;justify-content:space-between;gap:10px}.switch{display:flex;gap:4px;background:#090b0c;padding:4px;border-radius:5px}button,a.primary{font:inherit;font-size:13px}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.switch button{background:transparent;color:var(--muted);border:0;border-radius:3px;padding:8px 20px}.switch button[aria-pressed=true]{background:var(--gold);color:#16150e}.preview-head>span{font-size:10px;letter-spacing:1px;color:var(--muted)}.preview-stage{position:relative;aspect-ratio:768/612;background:radial-gradient(ellipse at center,#25292c 0%,#171b1e 65%,#121518 100%);margin:0 16px;overflow:hidden}.preview-stage img{display:block;width:100%;height:100%;object-fit:contain}.preview-stage iframe{border:0;display:block;width:100%;height:100%;background:transparent}.preview-foot{padding:16px;display:flex;align-items:center;gap:16px;justify-content:space-between}.preview-foot>span{font-size:12px;line-height:1.5;color:var(--muted);max-width:300px}.setup-panel{padding:26px}.setup-panel .eyebrow{margin-top:0}.description{color:var(--muted);font-size:14px;line-height:1.7;margin-bottom:22px}.primary,.secondary{display:block;text-decoration:none;text-align:center;padding:12px 15px;border:1px solid var(--border);border-radius:4px;background:transparent;color:var(--white)}.primary{background:var(--gold);color:#16150e;border-color:var(--gold);font-weight:600}.setup-panel>.secondary{width:100%;margin-top:10px}.secondary:hover{border-color:var(--gold)}label{display:block;margin:24px 0 9px;font-size:12px;color:var(--muted)}.copy-field{display:flex;min-width:0;gap:6px}.copy-field input{min-width:0;width:100%;background:#090b0c;border:1px solid var(--border);padding:11px;color:var(--white);border-radius:4px;font:11px Consolas,monospace}.copy-field button{flex-shrink:0;padding:8px;border:1px solid var(--border);border-radius:4px;background:#242725;color:var(--white)}#copy-status{font-size:12px;color:var(--gold);min-height:18px;margin:7px 0}.text-link{font-size:12px;color:var(--gold);text-decoration:none}.dimensions{margin-top:22px;border-top:1px solid var(--border);padding-top:18px;display:flex;align-items:center;justify-content:space-between}.dimensions span{font-size:10px;letter-spacing:1px;color:var(--muted)}.dimensions strong{font:17px Consolas,monospace;font-weight:400}.instructions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:20px}.instructions h3{font-size:16px;font-weight:500;margin:0 0 10px}.instructions p:not(.eyebrow){font-size:13px;color:var(--muted);line-height:1.8;margin:0}footer{margin-top:32px;padding-top:20px;border-top:1px solid var(--border);font-size:10px;color:var(--muted);letter-spacing:1.5px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}@media(max-width:850px){.layout{grid-template-columns:1fr}.instructions{grid-template-columns:1fr;gap:4px}.preview-stage{max-width:600px;margin:auto}.setup-panel{padding:22px}}@media(max-width:430px){main{padding:22px 16px}.preview-head{flex-wrap:wrap}.preview-foot{align-items:flex-start;flex-direction:column}.preview-foot button{width:100%}}

.native-note{padding:12px 0;color:var(--gold);font-size:13px}.preview-stage:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.preview-stage .controller.custom{position:absolute;display:block;inset:auto;top:0;left:0;transform-origin:0 0}

#design-select,#custom-skin-url{display:block;width:100%;padding:11px;background:#090b0c;color:var(--white);border:1px solid var(--border);border-radius:4px;font:13px Segoe UI,Arial,sans-serif}#custom-skin-form{margin:12px 0 18px}#custom-skin-form[hidden]{display:none}#custom-skin-form button{width:100%;margin-top:10px}#custom-skin-form small{display:block;color:var(--muted);font-size:11px;line-height:1.6}#skin-error{color:#ffbf9a;font-size:12px;line-height:1.5}

.zip-panel{border-top:1px solid var(--border);margin-top:24px;padding-top:18px}.zip-panel h3{font-size:18px;font-weight:500;margin:0}.zip-panel p,.zip-panel small{font-size:12px;color:var(--muted);line-height:1.7}.zip-panel input,.zip-panel select{display:block;width:100%;padding:10px;background:#090b0c;color:var(--white);border:1px solid var(--border);border-radius:4px}.zip-panel button{width:100%;margin-top:12px}.zip-panel a{color:var(--gold);font-size:13px}.zip-panel [hidden]{display:none!important}#upload-status{color:var(--gold)}

.opacity-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.opacity-heading .highlight-toggle{display:flex;align-items:center;gap:7px;font-size:12px;white-space:nowrap}.highlight-toggle input{width:16px;height:16px;accent-color:#d8b45b}