:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--accent:#00f0ff;--accent-2:#ff2bd6;--ink:#e9eefb;--muted:#9aa6c2;--surface:#121627;--line:#2a3150}*{box-sizing:border-box}body{color:var(--ink);background:#0a0c18;margin:0;font:16px/1.5 Segoe UI,system-ui,-apple-system,Noto Sans,sans-serif}.page-head,.layout,.page-foot{max-width:1180px;margin-inline:auto;padding-inline:20px}.page-head{padding-block:28px 12px}h1{background:linear-gradient(90deg, var(--accent), var(--accent-2));color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(28px,4vw,42px);font-weight:800}.page-head p{max-width:62ch;color:var(--muted);margin:6px 0 0}h2{margin:20px 0 4px;font-size:17px}.layout{grid-template-columns:minmax(300px,420px) minmax(0,1fr);align-items:start;gap:20px;display:grid}.panel{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:16px}fieldset{border:0;border-bottom:1px solid var(--line);margin:0 0 16px;padding:0 0 16px}fieldset:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}legend{color:var(--accent);margin-bottom:8px;padding:0;font-weight:700}label{margin-top:10px;font-size:14px;display:block}label:first-of-type{margin-top:0}label.check{align-items:flex-start;gap:8px;margin-top:8px;display:flex}label.check input{flex:none;margin-top:4px}small{color:var(--muted);margin-top:3px;display:block}.note{color:var(--muted);margin:0 0 8px;font-size:14px}input:not([type=checkbox],[type=color]),select,textarea{border:1px solid var(--line);width:100%;color:var(--ink);font:inherit;background:#0b0e1c;border-radius:8px;margin-top:4px;padding:8px 10px}input[type=color]{border:1px solid var(--line);background:#0b0e1c;border-radius:8px;width:100%;height:38px;margin-top:4px;padding:2px;display:block}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.row{grid-template-columns:1fr 1fr;gap:12px;margin-top:10px;display:grid}.row label{margin-top:0}.side{gap:16px;display:grid;position:sticky;top:16px}.preview{border:1px solid var(--line);background:repeating-conic-gradient(#1c2136 0% 25%,#151929 0% 50%) 0 0/28px 28px;border-radius:12px;height:460px;overflow:hidden}.preview iframe{color-scheme:normal;background:0 0;border:0;width:100%;height:100%;display:block}textarea{resize:vertical;word-break:break-all;font:13px/1.4 ui-monospace,Consolas,monospace}.buttons{margin-top:10px}button,.button{border:1px solid var(--accent);color:var(--accent);font:inherit;text-align:center;cursor:pointer;background:0 0;border-radius:8px;padding:10px;font-weight:700;text-decoration:none;display:block}#copy{background:var(--accent);color:#06121a}.hint{min-height:1.5em;color:var(--muted);margin:8px 0 0;font-size:14px}ol{margin:6px 0 0;padding-left:20px;font-size:14px}.page-foot{color:var(--muted);justify-content:space-between;gap:12px;padding-block:24px;font-size:14px;display:flex}.page-foot a{color:var(--accent)}@media (max-width:820px){.layout{grid-template-columns:1fr}.side{order:-1;position:static}.preview{height:340px}}