:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#090f12;color:#e9f0ef}*{box-sizing:border-box}body{margin:0;padding:20px;line-height:1.5}main{max-width:800px;margin:auto}a{color:#40ddc4}header{display:flex;align-items:center;justify-content:space-between;gap:12px}h1{font-size:25px;margin:18px 0 10px}.tag{color:#f5c47c;border:1px solid #745732;border-radius:20px;padding:4px 11px;font-size:12px}.note{color:#b7c1c4;font-size:14px}.panel{border:1px solid #2a393f;background:#111c21;border-radius:16px;padding:18px;margin:18px 0}.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}button,select{font:inherit;border:1px solid #52666f;background:#192930;color:inherit;border-radius:10px;padding:11px 16px;max-width:100%}button{cursor:pointer}button.primary{background:#35dac0;color:#08231e;border-color:#35dac0;font-weight:700}button:disabled{opacity:.45;cursor:default}.value{font-size:clamp(40px,10vw,68px);font-weight:750;color:#35dac0;line-height:1.3;overflow-wrap:anywhere}.muted{color:#9caeb5}.preview{width:100%;max-height:38vh;object-fit:contain;background:#000;border-radius:12px;display:block}.code{font-family:ui-monospace,monospace;overflow-wrap:anywhere;font-size:12px}pre,textarea{white-space:pre-wrap;overflow-wrap:anywhere;font-family:ui-monospace,monospace;font-size:12px;max-width:100%;width:100%;color:#d7e6e9;background:#0a1216;border:1px solid #2a393f;border-radius:8px;padding:10px}textarea{height:230px}summary{cursor:pointer}footer{margin-top:30px;font-size:12px;color:#98a6ac}#player{display:block;width:100%;max-height:70vh;background:#000}label{display:block;margin:10px 0}#preview:empty{display:none}#history{min-height:1.5em}.steps{padding-left:22px}.steps li{margin:9px 0}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid #f5c47c;outline-offset:3px}@media(max-width:480px){body{padding:14px}.panel{padding:14px}h1{font-size:22px}.actions button{flex-grow:1}}