@font-face{font-family:AB;src:url(../fonts/arni-anybody.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
.tl{list-style:none;margin-top:22px}
.trk summary{list-style:none;display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);cursor:pointer;min-height:72px}
.trk summary::-webkit-details-marker{display:none}.trk .no{font:500 11px PM;opacity:.6}
.trk .tt b{display:block;line-height:1.02}.trk .meta2{display:block;margin-top:6px;font:500 11px/1.3 PM;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.trk .st{font:500 10px PM;letter-spacing:.1em;text-transform:uppercase;padding:5px 7px;border:1.5px solid currentColor;white-space:nowrap}
.trk .st-fill{background:var(--fg);color:var(--bg);border-color:var(--fg)}.trk .st-dash{border-style:dashed;opacity:.7}
.trk .x{display:grid;gap:10px;padding:14px 0 18px 42px;border-bottom:1px solid var(--line)}
.trk .btn{min-height:54px;font-size:15px}.trk .btn.ghost{color:var(--fg);border-color:var(--fg)}.trk .btn.soon{color:var(--fg);border-color:var(--fg);opacity:.55}
@media (min-width:640px){.trk .x{grid-template-columns:1fr 1fr}}
.wrapA{max-width:1180px;margin:0 auto;padding:0 18px}
.backbar{display:flex;justify-content:space-between;align-items:center;padding:78px 18px 0;max-width:1180px;margin:0 auto}
.backbar a{font:500 11px PM;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:12px 0}
footer{color:var(--fg);border-color:var(--fg)}
.demos{color:var(--fg)}.demos .btn{background:var(--fg);color:var(--bg)}
@media (min-width:900px){.wrapA,.backbar{padding-left:48px;padding-right:48px}}

:root{--bg:#0B0E14;--fg:#F2EDE0;--amb:#F2A23A;--mag:#D6247A;--line:#ffffff1f}
body{background:var(--bg);color:var(--fg)}
.backbar,.backbar a{color:#cfc8b8}
.ahero{padding:10px 0 30px}.alogo{width:100%;height:auto;display:block;margin:6px 0 0}
.alogo line{transition:none}
.kickA{font:500 12px PM;letter-spacing:.12em;text-transform:uppercase;color:var(--amb)}
.tagline{font:400 clamp(30px,8.4vw,72px)/.95 AB;font-variation-settings:"wdth" var(--w,100),"wght" 700;letter-spacing:-.02em;text-transform:uppercase;margin-top:6px}
.tempo{display:flex;align-items:center;gap:10px;margin-top:20px;flex-wrap:wrap}
.tempo button{width:48px;height:48px;border:1.5px solid var(--fg);font:600 22px PM;cursor:pointer}.tempo button:hover{border-color:var(--amb);color:var(--amb)}
.tempo output{font:700 44px/1 AB;font-variation-settings:"wdth" 150,"wght" 800;color:var(--amb);min-width:3.2ch}
.tempo .mono{opacity:.75}
.lead{font-size:19px;max-width:34ch;margin-top:18px;color:#d9d2c3}
h2.ah{font:400 clamp(40px,11vw,104px)/.9 AB;font-variation-settings:"wdth" 150,"wght" 900;text-transform:uppercase;letter-spacing:-.03em;margin:84px 0 6px}
h2.ah span{color:var(--amb)}
.sub2{font:500 11px PM;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.mirror{position:relative;margin-top:20px;aspect-ratio:1;max-width:720px;background:#000;touch-action:none;user-select:none}
.mirror canvas{width:100%;height:100%;display:block;cursor:ew-resize}
.mirror .lab{position:absolute;bottom:10px;font:500 10px PM;letter-spacing:.1em;text-transform:uppercase;background:var(--bg);padding:4px 6px}
.mirror .l1{left:10px}.mirror .l2{right:10px;color:var(--amb)}
.rng{display:block;width:100%;max-width:720px;margin-top:14px;accent-color:var(--amb);height:44px}
.note2{font-size:15px;opacity:.75;margin-top:6px;max-width:44ch}
.arts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.arts figure img{width:100%;display:block;aspect-ratio:1;object-fit:cover}.arts figcaption{font:500 10px PM;letter-spacing:.1em;text-transform:uppercase;margin-top:6px;opacity:.75}
.trk .tt b{font:400 clamp(22px,6vw,40px)/1 AB;font-variation-settings:"wdth" 125,"wght" 800;text-transform:uppercase}
.trk[open] .tt b,.trk summary:hover .tt b{color:var(--amb)}
.rw{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:center;margin-top:16px;border:1.5px solid var(--line);padding:12px;text-decoration:none}.rw img{width:110px;height:110px;object-fit:cover}
.rw b{font:400 22px/1 AB;font-variation-settings:"wdth" 125,"wght" 800;text-transform:uppercase;display:block;margin:4px 0}.rw:hover{border-color:var(--amb)}
@media (min-width:900px){.arts{grid-template-columns:repeat(4,1fr)}.mirrorwrap{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:end}}
