.dial{--dial-step:48px;--dial-base:calc(var(--dial-height) - 28px);--dial-needle:calc(var(--dial-base) - 8px);padding:var(--dial-pad);border-radius:calc(var(--radius-window) + var(--dial-pad));background:linear-gradient(180deg, color-mix(in srgb, var(--night), #fff calc(var(--dial-frame) * 12%)), var(--night) 45%, color-mix(in srgb, var(--night), #000 calc(var(--dial-frame) * 45%)));box-shadow:inset 0 1px 0 rgb(255 255 255/calc(var(--dial-frame) * .14)), inset 0 -1px 0 rgb(0 0 0/calc(var(--dial-frame) * .5)), 0 10px 20px -14px #1c1a17cc, 0 calc(var(--dial-frame) * 16px) calc(var(--dial-frame) * 26px) calc(var(--dial-frame) * -10px) rgb(28 26 23/calc(var(--dial-frame) * .7))}@media (width>=1024px){.dial{--dial-step:var(--desk-dial-step);width:min(var(--desk-dial-width), 100%);margin-inline:auto}}.dial-window{height:var(--dial-height);border-radius:var(--radius-window);background:radial-gradient(ellipse at 50% -25%, hsl(var(--dial-backlight-hue) var(--dial-backlight-saturation) calc(10% + 22% * var(--dial-backlight))), var(--night) 70%);box-shadow:inset 0 0 0 1px #ebe4d41f, inset 0 calc(7px + var(--dial-depth) * 5px) calc(8px + var(--dial-depth) * 6px) -3px #000000bf, inset 0 14px 24px #00000059, inset calc(var(--dial-depth) * 26px) 0 calc(var(--dial-depth) * 22px) calc(var(--dial-depth) * -12px) rgb(0 0 0/calc(var(--dial-depth) * .7)), inset calc(var(--dial-depth) * -26px) 0 calc(var(--dial-depth) * 22px) calc(var(--dial-depth) * -12px) rgb(0 0 0/calc(var(--dial-depth) * .7)), inset 0 calc(var(--dial-depth) * -8px) calc(var(--dial-depth) * 12px) calc(var(--dial-depth) * -6px) rgb(0 0 0/calc(var(--dial-depth) * .6));position:relative;overflow:hidden}.dial-fade{position:absolute;inset:0;-webkit-mask:linear-gradient(90deg,#0000,#000 35% 65%,#0000);mask:linear-gradient(90deg,#0000,#000 35% 65%,#0000)}.dial-scale{width:0;transform:translateX(calc(var(--position) * var(--dial-step) * -1));transition:transform var(--duration-dial) var(--ease-dial);position:absolute;top:0;bottom:0;left:50%}.dial-scale[data-instant=true]{transition:none}.dial-scale[data-landing=true]{transition:transform var(--duration-dial-land) var(--ease-dial-land)}.dial-scale[data-seeking=true]{animation:dial-seek 3.4s var(--ease-dial-seek) infinite}@keyframes dial-seek{0%,6%{transform:translateX(calc(var(--count) * .62 * var(--dial-step) * -1))}16%,24%{transform:translateX(calc(var(--count) * .14 * var(--dial-step) * -1))}33%,36%{transform:translateX(calc(var(--count) * .81 * var(--dial-step) * -1))}48%,58%{transform:translateX(calc(var(--count) * .38 * var(--dial-step) * -1))}68%,72%{transform:translateX(calc(var(--count) * .93 * var(--dial-step) * -1))}84%,92%{transform:translateX(calc(var(--count) * .05 * var(--dial-step) * -1))}to{transform:translateX(calc(var(--count) * .62 * var(--dial-step) * -1))}}.dial-line{top:calc(var(--dial-base) - 8px);left:calc(var(--first) * var(--dial-step));width:calc(var(--stations) * var(--dial-step));background:linear-gradient(var(--cream), var(--cream)) bottom / 100% 1px no-repeat, repeating-linear-gradient(90deg, var(--cream) 0 1px, transparent 1px calc(var(--dial-step) / 5)) top / 100% 8px no-repeat;height:9px;opacity:var(--dial-minor-opacity);position:absolute}.dial-tick{top:calc(var(--dial-base) - 18px);left:calc(var(--at) * var(--dial-step));background:var(--cream);width:2px;height:18px;opacity:var(--dial-tick-opacity);margin-left:-1px;position:absolute}.dial-number{top:calc(var(--dial-base) + 6px);left:calc(var(--at) * var(--dial-step));color:var(--cream);font:300 19px / 1 var(--face-display);letter-spacing:.04em;font-variant-numeric:tabular-nums;opacity:var(--dial-tick-opacity);transition:color .4s;position:absolute;transform:translate(-50%)}.dial-number[data-skipped=true]{opacity:var(--filter-skipped-opacity)}.dial-number[data-lit=true]{color:var(--orange);opacity:1}.dial-needle{top:calc(var(--dial-base) - var(--dial-needle) * 599.5 / 687);color:var(--orange);filter:drop-shadow(0 calc(4px + var(--dial-depth) * 4px) calc(4px + var(--dial-depth) * 3px) rgb(0 0 0/calc(.65 + var(--dial-depth) * .2)));display:block;position:absolute;left:50%;translate:-50%}.dial-needle svg{width:auto;height:var(--dial-needle);display:block;overflow:visible}.dial-glass{pointer-events:none;background:linear-gradient(175deg,#ffffff17,#0000 42%);position:absolute;inset:0}.launch{z-index:900;background:var(--night);color:var(--cream);place-content:center;justify-items:center;gap:24px;padding:16px;display:none;position:fixed;inset:0}:root[data-launch] .launch{display:grid}.launch-logo{display:flex}.launch .dial{width:min(300px,100vw - 32px)}@media (width>=1024px){.launch .dial{width:var(--desk-dial-width)}}.launch-name{min-height:22px;font:700 18px / 22px var(--face-ui);letter-spacing:-.01em;opacity:0;margin:0;transition:opacity .4s,translate .4s;translate:0 6px}.launch-name[data-shown=true]{opacity:1;translate:none}.launch-signature{font:400 16px / 1.2 var(--face-text);color:#ebe4d48c;margin:0}.diode{background:#3a352f;border-radius:50%;flex:none;width:8px;height:8px;display:inline-block;box-shadow:inset 0 1px 1px #0009,0 0 0 1px #00000059}.diode:not([data-light=off]){--lit:var(--ok);background:radial-gradient(circle at 32% 30%, #fff 0 .8px, transparent 1.3px), var(--lit);box-shadow:0 0 7px 1px color-mix(in srgb, var(--lit) 65%, transparent)}.diode[data-light=crackle]{--lit:var(--orange);animation:1.3s step-end infinite diode-crackle}.diode[data-light=red]{--lit:var(--bad);animation:1.8s ease-in-out infinite diode-blink}@keyframes diode-crackle{0%{opacity:1}6%{opacity:.25}9%{opacity:1}17%{opacity:.55}20%{opacity:1}37%{opacity:.2}42%{opacity:1}49%{opacity:.6}53%{opacity:1}68%{opacity:.3}71%{opacity:1}84%{opacity:.45}88%{opacity:1}}@keyframes diode-blink{50%{opacity:.22}}.list{padding:4px 14px 0}.list-rows{margin:0;padding:0 0 104px;list-style:none}.list-fade{z-index:2;pointer-events:none;margin-inline:-14px;position:sticky}.list-fade[data-edge=top]{background:linear-gradient(var(--page), color-mix(in srgb, var(--page) 0%, transparent));opacity:0;height:28px;margin-bottom:-28px;transition:opacity .2s;top:0}.list-fade[data-edge=top][data-on=true]{opacity:1}.list-fade[data-edge=bottom]{background:linear-gradient(color-mix(in srgb, var(--page) 0%, transparent), var(--page) 62%);height:130px;margin-top:-130px;bottom:0}@property --row-left{syntax:"<percentage>";inherits:false;initial-value:0%}@property --row-right{syntax:"<percentage>";inherits:false;initial-value:7%}.row{--row-left:0%;--row-right:7%;border-radius:var(--radius-pill);background:linear-gradient(90deg, color-mix(in srgb, var(--ink) var(--row-left), transparent), color-mix(in srgb, var(--ink) var(--row-right), transparent));min-height:60px;transition:--row-left var(--duration-row) ease, --row-right var(--duration-row) ease;align-items:center;gap:12px;margin-bottom:6px;padding:8px;display:flex;position:relative}.row[hidden]{display:none}.row[data-state]{--row-left:7%;--row-right:0%}.row[data-folding]{pointer-events:none;overflow:hidden}.row-logo{background:#0d0c0a;border-radius:50%;flex:none;place-items:center;width:44px;height:44px;display:grid;position:relative}.row-cap{background:var(--night);border-radius:50%;place-items:center;width:86%;height:86%;display:grid;overflow:hidden}.row-cap img{object-fit:contain;width:100%;height:100%;display:block}.row-logo[data-ring=true]:after{opacity:0;content:"";pointer-events:none;border:2px solid #ebe4d44d;border-radius:50%;animation:2s ease-out infinite row-ring;position:absolute;inset:-6%}@keyframes row-ring{0%{opacity:.6;transform:scale(.95)}to{opacity:0;transform:scale(1.18)}}.row-name{letter-spacing:-.01em;flex:1;min-width:0;margin:0;font-size:16px;font-weight:700;line-height:1.15}.row-name a{color:inherit;text-decoration:none}.row-name a:after{border-radius:inherit;content:"";position:absolute;inset:0}.row-name a:focus-visible{outline:none}.row-name a:focus-visible:after{outline:2px solid var(--orange);outline-offset:2px}.row-heart,.row-play,.row-diode{z-index:1;flex:none;place-items:center;display:grid;position:relative}.row-heart{width:28px;height:44px;color:color-mix(in srgb, var(--ink) 60%, var(--page));cursor:pointer;background:0 0;border:0;margin-right:-4px;padding:0}.row-heart[data-favorite=true]{color:var(--ink)}.row-play,.row-diode{border-radius:50%;width:44px;height:44px}.row-play{background:var(--page);color:var(--ink);cursor:pointer;border:0;padding:0}.row[data-state=last] .row-play,.row-diode{background:color-mix(in srgb, var(--ink) 9%, transparent)}.toast-region{z-index:10;pointer-events:none;position:fixed;top:200px;left:14px;right:14px}@media (width>=1024px){.toast-region{top:150px;left:50%;right:auto;translate:-50%}}.toast{background:var(--cream);color:var(--night);overflow-wrap:anywhere;pointer-events:auto;user-select:text;border-radius:14px;margin:0;padding:12px 14px;font-size:13px;font-weight:500;box-shadow:0 12px 24px -10px #00000080}.set{--speaker-scale:var(--speaker-scale-max);--speaker-centre:220px;--set-name-size:calc(33px * var(--name-scale));--set-name-top:var(--name-top);--set-name-width:var(--name-width);--set-name-cast:url(#set-name-cast)}@media (width>=1024px){.set{--desk-dial-room:calc(var(--desk-dial-top) + var(--dial-height) + 2 * var(--dial-pad) + 21px);--speaker-scale:var(--desk-speaker-scale);--speaker-centre:calc(var(--desk-speaker-centre) - var(--desk-dial-room));--set-name-size:var(--desk-name-size);--set-name-top:calc(var(--desk-name-top) - var(--desk-dial-room));--set-name-width:var(--desk-name-width);--set-name-cast:url(#set-name-cast-desk)}}@media (width<1024px){.set[data-rise]{animation:set-rise var(--duration-set-rise) cubic-bezier(.2, .7, .2, 1)}}@keyframes set-rise{0%{opacity:0;transform:translateY(60px)}}.set-face{touch-action:pan-y;user-select:none;height:calc(var(--set-name-top) + var(--set-name-size) * 2 + 110px);color:var(--cream);background:#0b0a09;position:relative;overflow:hidden}.set-speaker{position:absolute;inset:0;overflow:hidden}.set-cone{top:calc(var(--speaker-centre) - 130px * var(--speaker-scale));width:260px;height:260px;filter:brightness(var(--speaker-brightness));transform:scale(var(--speaker-scale));transform-origin:top;background:#0f0d0b;border-radius:50%;margin-left:-130px;position:absolute;left:50%;overflow:hidden;box-shadow:0 0 0 6px #25211d,0 0 0 8px #141210}.set-cone[data-silenced=true]{opacity:.45}.set-cone b{background:radial-gradient(circle closest-side,#0000 79%,#0f0d0b 80%,#2e2924 86%,#474037 90%,#2e2924 94%,#0f0d0b 99%);border-radius:50%;position:absolute;inset:0}.set-cone i{background:radial-gradient(circle at 44% 41%,#fff4e46b 0 3%,#fff4e400 10%),radial-gradient(circle closest-side,#6e665b 0,#4a433a 18%,#26221d 28%,#0f0d0b 30% 32%,#0000 33%),repeating-radial-gradient(circle closest-side,#0000008c 0 2.4%,#ffffff0d 2.4% 3.6%,#0000 3.6% 9%),radial-gradient(circle closest-side,#191612 24%,#3a342d 58%,#645b50 100%);border-radius:50%;position:absolute;inset:10%}.set-plate{z-index:1;background:var(--night);-webkit-mask-composite:xor;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000,#000),radial-gradient(circle,#000 0 1.25px,#0000 1.7px),radial-gradient(circle,#000 0 1.25px,#0000 1.7px);mask-image:linear-gradient(#000,#000),radial-gradient(circle,#000 0 1.25px,#0000 1.7px),radial-gradient(circle,#000 0 1.25px,#0000 1.7px);-webkit-mask-position:0 0,0 0,2.2px 3.81px;mask-position:0 0,0 0,2.2px 3.81px;-webkit-mask-size:auto,4.4px 7.62px,4.4px 7.62px;mask-size:auto,4.4px 7.62px,4.4px 7.62px;-webkit-mask-repeat:repeat,repeat,repeat;mask-repeat:repeat,repeat,repeat;-webkit-mask-clip:border-box,border-box,border-box;mask-clip:border-box,border-box,border-box;-webkit-mask-origin:border-box,border-box,border-box;mask-origin:border-box,border-box,border-box;mask-composite:exclude;mask-mode:match-source,match-source,match-source}.set-screws{pointer-events:none;position:absolute;inset:0;overflow:hidden}.set-screws div{top:var(--speaker-centre);width:calc(2 * (130px * var(--speaker-scale) + 8px - var(--screw-size) / 2 - var(--screw-inset)));aspect-ratio:1;position:absolute;left:50%;translate:-50% -50%}.set-screws i{width:var(--screw-size);height:var(--screw-size);margin:calc(var(--screw-size) / -2);opacity:var(--screw-opacity);background:linear-gradient(#050404,#050404) 50%/62% 1.3px no-repeat,linear-gradient(#050404,#050404) 50%/1.3px 62% no-repeat,radial-gradient(circle at 35% 30%,#2b2723,#151311 60%,#0b0a09);border-radius:50%;position:absolute;box-shadow:0 0 0 1px #0000008c,0 1px 1px #ffffff0a}.set-screws i:first-child{top:0;left:0;rotate:20deg}.set-screws i:nth-child(2){top:0;left:100%;rotate:-35deg}.set-screws i:nth-child(3){top:100%;left:0;rotate:50deg}.set-screws i:nth-child(4){top:100%;left:100%;rotate:5deg}.set-grab{z-index:3;cursor:pointer;touch-action:none;background:0 0;border:0;place-items:center;height:26px;padding:0;display:grid;position:absolute;top:0;left:0;right:0}.set-grab:focus-visible{outline-offset:-4px}.set-grab:after{content:"";background:#ebe4d44d;width:44px;height:4px}.set-logo{z-index:2;top:calc(var(--speaker-centre) - 98px * var(--speaker-scale));width:196px;height:196px;transform:scale(var(--speaker-scale));transform-origin:top;place-items:center;margin-left:-98px;display:grid;position:absolute;left:50%}.set-cap{background:var(--night);border-radius:50%;place-items:center;width:96px;height:96px;display:grid;overflow:hidden;box-shadow:0 0 0 4px #0d0c0a,0 8px 18px #0000008c}.set-cap img{object-fit:contain;width:100%;height:100%;display:block}.set-cap[data-white] img{width:86%;height:86%}.set-cap[data-silenced=true]{filter:grayscale();opacity:.6}.set-name{z-index:2;top:var(--set-name-top);right:calc((100% - var(--set-name-width)) / 2);left:calc((100% - var(--set-name-width)) / 2);text-align:center;justify-items:center;gap:12px;display:grid;position:absolute}.set-name h1{--relief:var(--name-relief);--wall-contrast:var(--name-relief-contrast);--rim:#fffcf0f2;--wall1:color-mix(in srgb, #cbbf9f, #000 calc(var(--wall-contrast) * 45%));--wall2:color-mix(in srgb, #b3a585, #000 calc(var(--wall-contrast) * 50%));--wall3:color-mix(in srgb, #8f8166, #000 calc(var(--wall-contrast) * 55%));--slice:calc(var(--relief) * var(--name-relief-x) * .022em) calc(var(--relief) * .022em) 0;color:#0000;font:700 var(--set-name-size) / 1.04 var(--face-ui);letter-spacing:-.025em;text-wrap:balance;filter:drop-shadow(-.4px -.4px 0 var(--rim)) drop-shadow(var(--slice) var(--wall1)) drop-shadow(var(--slice) var(--wall2)) drop-shadow(var(--slice) var(--wall3)) var(--set-name-cast);background-image:linear-gradient(#fffcf2 0%,#f6efdc 22%,#ece3cc 55%,#ddd2b6 85%,#cfc3a5 100%);background-size:100% 1lh;-webkit-background-clip:text;background-clip:text;margin:0}.set-keys{align-items:center;gap:22px;display:flex}.set-key{width:24px;height:24px;color:color-mix(in srgb, var(--cream) 72%, var(--night));cursor:pointer;transition:color var(--duration-hover);background:0 0;border:0;place-items:center;padding:0;display:grid;position:relative}.set-key:before{content:"";position:absolute;inset:-10px}.set-key:hover,.set-key[data-favorite=true]{color:color-mix(in srgb, var(--cream) 88%, var(--night))}.set-turn{z-index:3;top:var(--speaker-centre);color:#ebe4d440;cursor:pointer;background:0 0;border:0;place-items:center;padding:12px 6px;transition:color .15s,opacity .25s;display:grid;position:absolute;translate:0 -50%}.set-turn:hover,.set-turn:focus-visible{color:var(--cream)}@media (width>=1024px){.set-turn{opacity:0}.set-turn:focus-visible{opacity:1}.set-turn[data-way=previous]{right:min(calc(50% + 138px * var(--speaker-scale) + 160px), calc(100% - 58px))}.set-turn[data-way=next]{left:min(calc(50% + 138px * var(--speaker-scale) + 160px), calc(100% - 58px))}}@media (width>=1024px) and (hover:hover){.set:hover .set-turn{opacity:1}}@media (width<1024px){.set-turn:not(:focus-visible){clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;padding:0;overflow:hidden}.set-turn[data-way=previous]{left:4px}.set-turn[data-way=next]{right:4px}}.set-play{z-index:2;text-align:center;position:absolute;bottom:20px;left:0;right:0}.set-filters{position:absolute}.shell-dial{padding:0 14px 21px;position:relative}.shell-dial[hidden]{display:none}.shell-dial-open{border-radius:calc(var(--radius-window) + var(--dial-pad));cursor:pointer;background:0 0;border:0;padding:0;position:absolute;inset:0 14px 21px}.shell-screens[data-uncovered]{position:relative;overflow:clip}.shell-screens[data-uncovered]>.list{pointer-events:none;position:absolute;inset:0 0 auto}.shell-screens[data-uncovered]>.set{z-index:1;background:var(--page);min-height:100dvh;position:relative}
