*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 8% 0%,#242820,transparent 65%),#0e1117;color:#eaecef;font:15px/1.6 Arial,sans-serif}main{width:min(610px,calc(100% - 450px));padding:56px 38px}.eyebrow{color:#fcd535;font:700 11px/1.5 monospace;letter-spacing:2px}h1{font-size:42px;line-height:1.12;letter-spacing:-1.8px;margin:28px 0}h1 span{display:block;color:#949ca7;font-size:30px;font-weight:400;letter-spacing:-.8px;margin-top:14px}.intro{font-size:13px;color:#a7afb9;line-height:1.9}.controls{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}label{display:grid;gap:6px;color:#929aa5;font-size:12px}input,select{width:100%;min-width:0;height:40px;border:1px solid #333b47;border-radius:8px;padding:8px 10px;background:#1a1e25;color:#eaecef;font:14px Arial}input[type=color]{padding:4px}.actions{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 8px}button{padding:10px 13px;border:1px solid #434c5a;border-radius:8px;background:#202630;color:#eaecef;cursor:pointer}button:first-child{background:#fcd535;color:#202630;border-color:#fcd535}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #fcd535;outline-offset:2px}#preview-status{color:#929aa5;font-size:12px}.spec{margin-top:32px;font:10px/1.5 monospace;color:#717b89;letter-spacing:1px}a{color:#d5dce5;font-size:12px}@media(max-width:800px){main{width:100%;padding:24px;max-width:540px}h1{font-size:30px}h1 span{font-size:23px}}
/* Compact working surface: keep theme controls visible beside the widget. */
main{padding:28px 32px;width:min(680px,calc(100% - 460px))}
h1{font-size:32px;margin:14px 0}.intro{margin:12px 0}
.controls{margin-top:18px;gap:10px 14px}.actions{margin-top:18px}.spec{margin-top:18px}
@media(max-width:800px){main{width:100%;padding:20px;max-width:540px}}