:root{--black:#0a0a08;--cream:#efeadd;--orange:#ff5c35;--lime:#c8ff49}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--black);font-family:"Arial Narrow",Arial,"PingFang SC",sans-serif}.topbar{height:66px;background:var(--black);color:white;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 max(24px,4vw);border-bottom:1px solid #333}.topbar a{font-size:20px;font-weight:900;letter-spacing:2px;color:#fff;text-decoration:none}.topbar a span{color:var(--orange)}.topbar p{font:11px monospace;letter-spacing:2px;color:#8f8f86}.topbar i{justify-self:end;width:10px;height:10px;border-radius:50%;background:#444;box-shadow:0 0 0 4px #222}.topbar i.live{background:var(--lime);box-shadow:0 0 14px var(--lime)}main{width:min(1180px,calc(100% - 44px));margin:auto}.hero{display:grid;grid-template-columns:1.25fr .75fr;gap:60px;align-items:end;padding:64px 0 42px}.kicker{font:12px monospace;letter-spacing:2px;margin:0 0 20px}.hero h1{font-size:clamp(52px,7vw,92px);line-height:.84;letter-spacing:-6px;text-transform:uppercase;margin:0}.hero h1 em{color:var(--orange);font-style:normal}.lead{max-width:390px;font-size:16px;line-height:1.8;border-left:5px solid var(--orange);padding-left:20px;margin:0 0 5px}.console{display:grid;grid-template-columns:1fr 48px 1fr;align-items:stretch;border:2px solid var(--black);background:var(--black)}.panel{background:#fff;padding:22px 24px 16px;min-width:0}.panel.dark{background:#151512;color:white}.panel label{display:block;text-transform:uppercase;font-size:12px;font-weight:bold;letter-spacing:1.4px;border-bottom:1px solid #c9c5bc;padding-bottom:14px}.panel.dark label{border-color:#404039}.panel label b{display:inline-grid;place-items:center;background:var(--orange);color:white;width:25px;height:25px;margin-right:8px}.panel textarea{width:100%;height:190px;border:0;resize:vertical;outline:none;padding:22px 0;background:transparent;color:inherit;font:28px/1.5 monospace}.panel.dark textarea{font-size:25px;color:var(--lime);letter-spacing:3px}.panel textarea::placeholder{color:#a5a39c}.meta{display:flex;justify-content:space-between;gap:15px;align-items:center;font:11px monospace;color:#76736b;border-top:1px solid #c9c5bc;padding-top:12px}.dark .meta{border-color:#404039;color:#8c8c82}.meta button{background:transparent;color:inherit;border:0;text-decoration:underline;cursor:pointer;font:inherit}.swap{border:0;border-left:2px solid var(--black);border-right:2px solid var(--black);background:var(--orange);font-size:26px;cursor:pointer;color:white}.player{display:grid;grid-template-columns:auto auto 260px 1fr auto;align-items:center;gap:14px;padding:25px 0;border-bottom:2px solid var(--black)}.play,.stop{border:2px solid var(--black);height:48px;padding:0 20px;background:var(--lime);cursor:pointer;text-transform:uppercase}.play span{margin-right:10px}.stop{background:transparent}.stop:disabled{opacity:.35}.speed{padding:0 15px}.speed label{display:flex;justify-content:space-between;font-size:11px;font-weight:bold}.speed output{color:var(--orange)}.speed input{width:100%;accent-color:var(--orange)}.pulse{height:40px;display:flex;gap:5px;align-items:center;justify-content:center;overflow:hidden}.pulse i{display:block;width:4px;height:5px;background:#bbb;transition:.1s}.playing .pulse i{animation:pulse .7s ease-in-out infinite}.pulse i:nth-child(2n){animation-delay:.15s}.pulse i:nth-child(3n){animation-delay:.3s}@keyframes pulse{50%{height:34px;background:var(--orange)}}#status{font:11px monospace;text-align:right;min-width:70px}.reference{margin:38px 0 70px;border-top:2px solid var(--black);border-bottom:2px solid var(--black)}summary{display:flex;justify-content:space-between;padding:20px 4px;cursor:pointer;font-weight:900;text-transform:uppercase;list-style:none}summary b{font:12px monospace;color:var(--orange)}.grid{display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid var(--black);padding:18px 0 24px}.grid div{padding:8px 12px;border-right:1px solid #c2beb4;font:14px monospace}.grid b{display:inline-block;width:25px}.grid code{color:#d43e1e}footer{background:var(--orange);color:white;padding:24px max(24px,4vw);display:flex;gap:28px;font-weight:bold}footer p{margin:0 0 0 auto;font:11px monospace}@media(max-width:800px){.topbar{grid-template-columns:1fr auto}.topbar p{display:none}.hero{grid-template-columns:1fr;gap:26px;padding:45px 0 30px}.hero h1{letter-spacing:-4px}.console{grid-template-columns:1fr}.swap{height:45px;border:2px solid var(--black);transform:none}.panel textarea{height:150px}.player{grid-template-columns:1fr 1fr}.speed,.pulse{grid-column:1/-1;width:100%}#status{text-align:left}.grid{grid-template-columns:repeat(3,1fr)}footer{flex-wrap:wrap}footer p{width:100%;margin:0}}@media(max-width:450px){main{width:calc(100% - 24px)}.hero h1{font-size:48px}.panel{padding:18px 16px}.panel textarea{font-size:21px}.grid{grid-template-columns:repeat(2,1fr)}}