:root { --ink: #1d1f26; --dim: #7a7f8e; --soft: #f1f2f6; --line: #d9dce4; --paper: #fff;
        --blue: #3478f6; --rust: #c2553a; --mint: #17a583; --amber: #eaa53a; --magenta: #c72c91;
        --card: 0 0 0 1px rgba(30,40,70,.14), 0 1px 2px rgba(30,40,70,.2), 0 8px 18px -4px rgba(30,40,70,.28);
        --lift: drop-shadow(0 0 .5px rgba(30,40,70,.35)) drop-shadow(0 1px 2px rgba(30,40,70,.18)) drop-shadow(0 8px 14px rgba(30,40,70,.2));
        --float: 0 0 0 1px rgba(30,40,70,.08), 0 2px 6px rgba(20,30,60,.12), 0 16px 40px rgba(20,30,60,.22);
        --font: 'Jost', system-ui, sans-serif; color-scheme: light;
        /* the instrument: width, the round top's diameter, the dial's, where the body begins */
        --W: min(640px, calc(100vw - 32px)); --B: min(424px, calc(100vw - 32px)); --D: calc(var(--B) - 48px); --top: calc(var(--B) * .6); }
[hidden] { display: none !important; }
body.unrendered .instrument { visibility: hidden; }          /* nothing shows until the first render has drawn the remembered state */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; padding: 12px 0 96px; color: var(--ink); font: 17px/1.4 var(--font); background: linear-gradient(#ffffff, #e6e8ee) fixed;
       -webkit-font-smoothing: antialiased; }
a { color: var(--blue); }
.dim { color: var(--dim); }
button { font: inherit; color: var(--ink); cursor: pointer; border: 0; padding: 8px 16px; min-height: 40px; border-radius: 4px; background: var(--soft); }
button:hover { background: #e6e8ee; }
button:active { background: #d9dce4; }
button:disabled { cursor: default; opacity: .4; }
button, .label, .time { user-select: none; -webkit-user-select: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.icon { width: 20px; height: 20px; flex: none; display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon.solid { fill: currentColor; stroke: none; }

/* the instrument: one paper shape (a round top holding the dial, a body holding the music, a
   tab at the foot for the pairing), with the controls laid over it */
.instrument { position: relative; width: var(--W); margin: 0 auto; }
.paper { position: absolute; inset: 0; filter: var(--lift); pointer-events: none; }
.paper > * { position: absolute; background: var(--paper); }
.boss { width: var(--B); height: var(--B); border-radius: 50%; left: calc((var(--W) - var(--B)) / 2); top: 0; }
.case { left: 0; right: 0; top: var(--top); bottom: 0; border-radius: 32px; }
.tab { width: 288px; height: 48px; border-radius: 24px; left: calc(50% - 144px); bottom: -24px; }
.instrument:has(#instruments[hidden]) .boss { display: none; }
.instrument:has(#instruments[hidden]) .case { top: 0; }
.face { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: calc((var(--B) - var(--D)) / 2) 48px 64px; }
.instrument:has(#instruments[hidden]) .face { padding-top: 40px; }

/* the dial; over it, the forward button on the face under the head (dial units: --u, the
   face 360 across) and the sphere at the dial's lower right */
#instruments { position: relative; align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 24px; margin-bottom: 16px; --u: calc(var(--D) / 360); }
#dial { width: var(--D); }
.dial { display: block; width: 100%; overflow: visible; touch-action: none; user-select: none; }
.dial text { font: 500 15px var(--font); fill: #4a4f5c; text-anchor: middle; dominant-baseline: central; }
.dial .head .gaze { transition: opacity .6s ease-in-out; }   /* the head: a gaze while readings arrive */
.dial .head:not(.live) .gaze { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .dial .head .gaze { transition: none; } }
#headbits { position: absolute; top: 0; left: calc(50% - var(--D) / 2); width: var(--D); height: var(--D); pointer-events: none; }
#headbits > * { pointer-events: auto; }
#ball { position: absolute; right: -6px; bottom: -6px; width: 72px; height: 72px; border-radius: 50%;
        background: linear-gradient(#ffffff, #dfe2ea); box-shadow: 0 2px 6px rgba(20,32,64,.22); }

/* blue buttons: a slight gradient; pressed, they sink */
button.main, .play { color: #fff; font-weight: 600; background: linear-gradient(#4a88f8, #2c6ce8); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 3px rgba(30,60,140,.3); }
button.main:hover, .play:hover { background: linear-gradient(#3f7ff2, #2462dc); }
button.main:active, .play:active { transform: translateY(1px); background: linear-gradient(#2462dc, #2c6ce8); box-shadow: inset 0 2px 4px rgba(10,30,90,.45); }
#forward { position: absolute; left: 50%; top: calc(var(--u) * 180 + max(var(--u) * 58 - 20px, var(--u) * 36) + 8px); transform: translateX(-50%);
           display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; height: 40px; padding: 0 20px 0 16px; border-radius: 20px; }
#forward:active { transform: translateX(-50%) translateY(1px); }

.play { width: 80px; height: 80px; border-radius: 50%; padding: 0; display: grid; place-items: center; flex: none; }
.play .icon { width: 34px; height: 34px; }
.play:disabled { background: var(--soft); color: var(--dim); box-shadow: none; }

/* the music */
#player { align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.track { text-align: center; margin-top: 8px; max-width: 100%; }
.track .title { font-size: 28px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; padding: 0; min-height: 0; background: none; border-radius: 0;
                overflow-wrap: anywhere; cursor: pointer; }
.track .title:hover { background: none; color: var(--blue); }
.track .title.remote { cursor: default; }
.track .title.remote:hover { color: var(--ink); }
.track .title.choose { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); }
.track .title.choose .icon { width: 24px; height: 24px; }
.track .title.choose:hover { color: #2462dc; }
/* the track is a menu: the page's songs, recent files, a file of your own */
.titlemenu { position: relative; display: inline-block; max-width: 100%; }
.track .title .chev { display: inline-grid; place-items: center; vertical-align: 2px; margin-left: 12px; width: 28px; height: 28px; border-radius: 50%; color: var(--rust);   /* after the last word, wherever the title wraps */
                      background: color-mix(in srgb, var(--rust) 10%, #fff); transition: transform .15s; }
.track .title .chev .icon { width: 18px; height: 18px; }
.titlemenu.open .title .chev { transform: rotate(180deg); }
.track .title .last { white-space: nowrap; }                  /* the last word and the chevron wrap together */
.track .title .chev.out { display: none; }                     /* wrapping: the chevron on the last word */
.titlemenu .menu { z-index: 30; left: 50%; top: calc(100% + 8px); transform: translate(-50%, -4px); width: max-content; min-width: 300px; max-width: min(440px, calc(100vw - 32px));
                   text-align: left; font-size: 17px; font-weight: 400; letter-spacing: 0; }
.titlemenu.open .menu { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.menu button .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.titlemenu .menu button { white-space: normal; padding-top: 8px; padding-bottom: 8px; }   /* a long name wraps in a narrow menu */
.titlemenu .menu .who { flex: none; }
.menu .section { padding: 10px 16px 4px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.menu .sep { height: 1px; margin: 8px 0; background: var(--line); }
.menu .who { margin-left: auto; padding-left: 16px; color: var(--dim); font-size: 14px; font-weight: 400; }
.menu .pick { color: var(--blue); }
.menu .pick .icon { visibility: visible; color: var(--blue); }
.byline { color: var(--dim); }
.byline:empty { display: none; }
.dropping .instrument { outline: 2px dashed var(--blue); outline-offset: 12px; border-radius: 40px; }
.time { color: var(--dim); font-size: 14px; font-variant-numeric: tabular-nums; min-width: 3.9ch; }   /* 0:00, or ‒:‒‒ */
.seek.long .time { min-width: 4.6ch; }                         /* 10:00 */
.time.right { text-align: right; }
.seek { align-self: stretch; display: flex; align-items: center; gap: 12px; }
.seek:has(input:disabled) > :not(.play) { opacity: .4; }       /* nothing to scrub; Play (on a phone, in this row) is still Play */
/* a track decoding: a mint shimmer on the bias, four times the track's height, slides along behind the scrubber */
.seek .scrub { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; }
.seek .scrub > input { position: relative; z-index: 1; }     /* the scrubber in front of the shimmer */
.seek .scrub::before { content: ''; position: absolute; left: -8px; right: -8px; top: 50%; height: 16px; margin-top: -8px; border-radius: 8px;
                       background: linear-gradient(135deg, rgba(160, 222, 196, 0) 20%, #a9e2c8 40%, #8fd8b8 50%, #a9e2c8 60%, rgba(160, 222, 196, 0) 80%)
                                   -400% 0 / 80% 100% no-repeat;
                       opacity: 0; transition: opacity .4s; pointer-events: none; }
.seek.decoding { opacity: 1; }
.seek.decoding .scrub::before { opacity: 1; animation: shimmer 3s linear infinite; }
@keyframes shimmer { from { background-position: -400% 0; } to { background-position: 500% 0; } }   /* in from off the left, out past the right */
@media (prefers-reduced-motion: reduce) { .seek.decoding .scrub::before { animation: none; background: #cdeedf; opacity: .6; } }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; min-width: 0; height: 32px; margin: 0; background: transparent; cursor: pointer; --p: 0%; --c: var(--ink); }
input[type=range]:disabled { cursor: default; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--c) var(--p), var(--line) var(--p)); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line); }
input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--c); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(20,30,60,.4), 0 0 0 .5px rgba(20,30,60,.12); }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(20,30,60,.4); }
input.level { --c: var(--blue); }
.controls { align-self: stretch; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.controls .select { justify-self: stretch; }
.levelrow { justify-self: stretch; display: flex; align-items: center; gap: 8px; color: var(--dim); }
.note { color: var(--dim); font-size: 15px; text-align: center; }

/* the space menu: a paper chip that opens a paper menu */
.select { position: relative; }
.trigger { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 56px; padding: 8px 12px 8px 16px; text-align: left; border-radius: 8px;
           background: var(--paper); box-shadow: var(--card); }
.trigger:hover { background: var(--paper); box-shadow: 0 0 0 1px rgba(30,40,70,.18), 0 1px 2px rgba(30,40,70,.22), 0 10px 20px -4px rgba(30,40,70,.32); }
.trigger:active { background: var(--paper); }
.trigger > span:first-child { min-width: 0; }
.label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.trigger .value { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.select .value { transition: opacity .15s; }
.select.loading .value { opacity: .5; transition-delay: .2s; }   /* a room that lands at once never dims */
.select.failed .value { color: var(--rust); }
/* a room rendering: a mint wash, faintly mottled, fills the chip from the left behind a hard
   wavy edge that rolls along it; the chip takes no clicks meanwhile */
@property --progress { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --phase { syntax: '<length>'; inherits: false; initial-value: 0px; }
@keyframes undulate { to { --phase: 84px; } }
.select { transition: --progress .35s linear; }
.select.snap { transition: none; }
.select .trigger { position: relative; overflow: hidden; isolation: isolate; }
.select .trigger > * { position: relative; z-index: 1; }
.select .trigger::before { content: ''; position: absolute; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .5s; inset: 0;
  --fill: calc(.05 + .95 * var(--progress));   /* the wave starts 5% in */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='80' preserveAspectRatio='none'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008 .03' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .8 0 0 0 0 .66 .5 0 0 0 -.18'/%3E%3C/filter%3E%3Crect width='400' height='80' filter='url(%23p)'/%3E%3C/svg%3E") 0 0 / 100% 100%, #cdeedf;
  -webkit-mask: linear-gradient(#000, #000) 0 0 / calc(var(--fill) * 100%) 100% no-repeat,
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='84'%3E%3Cpath d='M0 0H9C9 14.7 1 27.3 1 42C1 56.7 9 69.3 9 84H0Z'/%3E%3C/svg%3E") calc(var(--fill) * (100% + 10px)) var(--phase) / 10px 84px repeat-y;
          mask: linear-gradient(#000, #000) 0 0 / calc(var(--fill) * 100%) 100% no-repeat,
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='84'%3E%3Cpath d='M0 0H9C9 14.7 1 27.3 1 42C1 56.7 9 69.3 9 84H0Z'/%3E%3C/svg%3E") calc(var(--fill) * (100% + 10px)) var(--phase) / 10px 84px repeat-y;
}
.select.loading.measured .trigger::before { opacity: 1; animation: undulate 1.4s linear infinite; }
.select.loading .trigger { cursor: progress; }
.select.loading .trigger:hover { box-shadow: var(--card); }
.trigger .chev { width: 32px; height: 32px; margin-left: auto; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--rust);
                 background: color-mix(in srgb, var(--rust) 10%, #fff); transition: transform .15s; }
.select.open .chev { transform: rotate(180deg); }
.menu { position: absolute; left: 0; top: calc(100% + 8px); min-width: 100%; padding: 8px 0; z-index: 20; background: var(--paper); border-radius: 8px;
        box-shadow: var(--float); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .12s, transform .12s; }
.select.up .menu { top: auto; bottom: calc(100% + 8px); transform: translateY(4px); }
.select.open .menu { opacity: 1; transform: none; pointer-events: auto; }
.menu button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 24px 0 16px; border-radius: 0; background: none; text-align: left; white-space: nowrap; }
.menu button:hover { background: var(--soft); }
.menu .icon { width: 18px; height: 18px; color: var(--rust); visibility: hidden; }
.menu [aria-checked=true] { font-weight: 600; }
.menu [aria-checked=true] .icon { visibility: visible; }

/* the pairing: a status in the tab at the foot, opening a panel above it */
.pair { position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%); width: 288px; z-index: 20; }   /* the transform makes a stacking context: above the scrubber's */
.pairpill { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; padding: 0 24px; border-radius: 24px;
            background: none; font-size: 15px; }
.pairpill:hover, .pairpill:active { background: none; color: var(--blue); }
.pairtext { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.battery { display: inline-flex; align-items: center; gap: 2px; flex: none; color: var(--dim); font-variant-numeric: tabular-nums; }
.battery::before { content: '·'; margin-right: 6px; }
.battery.low { color: var(--amber); }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--mint); }
.dot.idle { background: none; box-shadow: inset 0 0 0 1.5px var(--dim); }
.dot.wait { background: var(--amber); animation: pulse 1.2s ease-in-out infinite; }
.dot.relay { background: var(--amber); }                     /* paired, but through the server, not directly */
@keyframes pulse { 50% { opacity: .35; } }
.pop { position: absolute; bottom: calc(100% + 8px); left: 50%; width: min(340px, 100vw - 24px); padding: 16px; z-index: 20; font-size: 15px; background: var(--paper); border-radius: 8px;
       box-shadow: var(--float); opacity: 0; transform: translate(-50%, 4px); pointer-events: none; transition: opacity .12s, transform .12s; }
.pair.open .pop { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#linkstate { font-weight: 600; }
.pop .code, .pop form { margin-top: 10px; }
.pop .fielderror { color: var(--magenta); font-size: 14px; margin-top: 6px; min-height: 0; }
.pop .fielderror:empty { display: none; }
.pop .youare { display: block; white-space: nowrap; margin-top: 14px; color: var(--dim); }
/* the pencil and the name are one unit in the line of text, letters on the line's baseline
   (overflow clip, not hidden, which would move an inline block's baseline to its bottom
   edge); the name carries a double magenta underline; hovered or edited in place the unit
   looks like the page's inputs (the soft fill, the blue focus ring), clear of the text
   beside it; the pencil stays put */
.pop .namebtn { display: inline-block; vertical-align: baseline; overflow: clip; cursor: text; outline: 2px solid transparent; outline-offset: 0; box-sizing: border-box;
                padding: 4px 8px; margin: -4px 0 -4px 4px; border-radius: 4px; background: transparent; transition: background .12s, outline-color .12s; }
.pop .namebtn .pencil { display: inline-block; margin-right: 4px; color: var(--magenta); font-size: 14px; }
.pop .namebtn b { display: inline-block; vertical-align: baseline; width: 140px; overflow: clip; text-overflow: ellipsis; white-space: pre; font-weight: 600; outline: none;
                  text-decoration: underline double; text-decoration-color: var(--magenta); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pop .namebtn:hover, .pop .namebtn:focus-visible, .pop .namebtn.editing { background: var(--soft); }
.pop .namebtn.editing { outline-color: var(--blue); }
.pop .namebtn:hover b, .pop .namebtn:focus-visible b, .pop .namebtn.editing b { text-decoration: none; }
.pop .namebtn.editing b { text-overflow: clip; }
.pop .code { font-size: 22px; font-weight: 600; margin-top: 4px; }
.pop .row { display: flex; gap: 8px; margin-top: 8px; }
.pop input { flex: 1; min-width: 0; min-height: 40px; padding: 8px 12px; font: inherit; color: var(--ink); background: var(--soft); border: 0; border-radius: 4px; }
.pop input:focus { outline: 2px solid var(--blue); }
#unlink, #pairnear { margin-top: 12px; }

/* the page's address as a QR code: in the about box, and in the pairing panel on a computer */
.qr { margin: 12px 0 8px; text-align: center; }
.qr img { display: block; margin: 0 auto; width: 120px; height: 120px; image-rendering: pixelated; }
.qr figcaption { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--dim); }   /* the address, the pairing line's weight and blue */

/* head-tracking: the switch for a phone alone */
.tracking:not(:has(> :not([hidden]))) { display: none; }   /* none of its parts showing: no gap for it either */
/* the switch belongs with the pairing: nearer the pill than the controls above it (the
   page's height unchanged: the space moves from below it to above) */
.tracking { margin-top: 24px; }
.face:has(.tracking > :not([hidden])) { padding-bottom: 24px; }   /* a line above the pill */
.switch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; cursor: pointer; min-height: 40px; font-weight: 700; font-size: 14px; letter-spacing: .04em; color: var(--dim); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .pill { flex: none; width: 46px; height: 26px; border-radius: 13px; background: #dfe2ea; position: relative; transition: background 0.15s; }
.switch .pill::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(20,30,60,.35); transition: left 0.15s; }
.switch input:checked ~ .pill { background: var(--blue); }
.switch input:checked ~ .pill::after { left: 23px; }
.switch input:checked ~ .name { color: var(--blue); }
.switch input:focus-visible ~ .pill { outline: 2px solid var(--blue); }
.switch .state { min-width: 2.2em; font-variant-numeric: tabular-nums; }
.switch .why { flex-basis: 100%; font-weight: 400; letter-spacing: 0; color: var(--dim); font-size: 14px; margin-left: calc(46px + 8px); }
.switch.off { cursor: default; }
.switch.off .pill, .switch.off .state, .switch.off .name { opacity: 0.4; }

#diag { width: var(--W); margin: 48px auto 0; text-align: center; color: #a0a4b0; font-size: 12px; font-variant-numeric: tabular-nums; }

/* about this page: a grey disc at the upper right, opening a modal (the top layer, above everything) */
#infobtn { position: absolute; top: 24px; right: 24px; width: 36px; height: 36px; min-height: 0; padding: 0; border-radius: 50%; z-index: 30;
           background: #c6c9d3; color: #fff; font-size: 22px; font-weight: 700; line-height: 36px; text-align: center;
           text-shadow: 0 1px 2px rgba(30,40,70,.3); transition: background .12s;
           box-shadow: 0 0 0 1px rgba(30,40,70,.2), 0 1px 2px rgba(30,40,70,.2), 0 6px 12px -3px rgba(30,40,70,.28); }   /* the card's shadow, scaled down */
#infobtn:hover { background: #c6c9d3; }   /* no change on hover: only the cursor says it is a button */
#infobtn:active { background: #adb1bd; }
body.head #infobtn, body.dark #infobtn { display: none; }
#info { width: min(520px, 100vw - 32px); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 12px; color: var(--ink);
        background: var(--paper); box-shadow: var(--float); }
#info::backdrop { background: rgba(16,18,26,.45); }
#info .sheet { position: relative; padding: 24px 28px 20px; }
#info h2 { margin: 0 32px 12px 0; font-size: 22px; font-weight: 600; }
#info p { margin: 0 0 12px; }
#info h4 { font-size: 22px; font-weight: 500; line-height: 26px; margin: 30px 0 13px; color: #857e76; }   /* a warm grey; nearer what it heads, the same space in all */
#info li + li { margin-top: 6px; }
#info .close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; min-height: 0; padding: 0; border-radius: 50%;
               background: none; color: var(--dim); font-size: 26px; line-height: 36px; }
#info .close:hover { background: var(--soft); color: var(--ink); }
html:has(#info[open]) { overflow: hidden; }

/* overlays: sound needs a tap; motion needs a tap */
/* overlays own the top band (1000+): nothing in the page may sit above a wall, whatever its own stacking */
#allow, #motion { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; text-align: center; cursor: pointer;
                  background: rgba(16,18,26,.72); color: #fff; font-size: 32px; font-weight: 600; letter-spacing: -.01em;
                  text-shadow: 0 0 12px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.5); }

/* this device is the head: the phone sits on the headband unseen */
body.head { background: #000; }
body.head .instrument, body.head #diag { display: none; }

/* a phone alone, during a countdown: black page (unlit pixels on an OLED) */
body.dark { background: #000; }
html:has(body.dark), body.dark, html:has(body.head), body.head { overflow: hidden; overscroll-behavior: none; touch-action: none; }
body.dark .instrument, body.dark #diag { visibility: hidden; }
body.dark .dial * { visibility: hidden; }                  /* the dial sets its head and knob visible */
/* during the countdown: what to do, over the lower third of the screen */
#banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001; height: 33vh; padding: 24px 32px; display: flex; align-items: center;
          justify-content: center; text-align: center; font-size: 24px; font-weight: 600; line-height: 1.3; color: #fff; background: #14161b;
          box-shadow: var(--float); transition: height 1.2s cubic-bezier(.6, 0, .3, 1), background-color 1.2s, color .5s; }
#banner.fill { height: 100vh; height: 100dvh; background: #000; color: transparent; box-shadow: none; }
#banner { padding-bottom: 72px; }                               /* room for Cancel at the foot */
#cancelcount { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); min-height: 40px; padding: 8px 24px; border-radius: 20px;
               background: none; color: inherit; border: 1px solid currentColor; font-size: 17px; font-weight: 500; }
#cancelcount:hover, #cancelcount:active { background: rgba(255, 255, 255, .12); }
#banner.fill #cancelcount { display: none; }                   /* the moment has come: nothing left to cancel */
@media (prefers-reduced-motion: reduce) { #banner { transition: none; } }

/* the dark page's note: bright at first, then down to a dim grey that leaves an OLED mostly unlit */
#hat { display: none; }
body.dark #hat, body.head #hat { display: flex; flex-direction: column; align-items: center; gap: 8px; position: fixed; bottom: 24px; left: 0; right: 0; z-index: 1002;
                 text-align: center; color: #333; animation: hatin 1s ease-out both, hatfade 8s ease-in forwards; }
.hattitle { font-weight: 600; font-size: 22px; }
#exit { color: inherit; padding: 8px 24px; margin-top: 8px; border: 1px solid currentColor; border-radius: 20px; text-decoration: none; }
@keyframes hatin { from { opacity: 0; transform: translateY(12px); } }
@keyframes hatfade { 0%, 50% { color: #fff; } 100% { color: #333; } }
@media (prefers-reduced-motion: reduce) { body.dark #hat, body.head #hat { animation: hatfade 8s steps(1, end) forwards; } }

/* until the first state is settled: one line, nothing moving */

/* a phone: the same shape, narrower; the round top a little inside the body's width */
@media (max-width: 680px) {
  /* the track's name on one line, a little smaller; one too long for it drifts to its end
     and back (with reduced motion, cut short with an ellipsis); the chevron stays beside it */
  .titlemenu .title { display: inline-flex; align-items: center; max-width: 100%; font-size: 24px; }
  .track .title .name { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .track .title .name.over { mask: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent); }
  .track .title .text { display: inline-block; }
  .track .title .last .chev { display: none; }
  .track .title .chev.out { display: inline-grid; flex: none; }
  @media (prefers-reduced-motion: reduce) { .track .title .text { display: inline; } .track .title .name.over { mask: none; } }
  :root { --W: calc(100vw - 16px); --B: calc(100vw - 56px); }
  body { padding-top: 12px; }
  .face { padding-left: 24px; padding-right: 24px; }
  #ball { width: 56px; height: 56px; }
  #infobtn { top: 16px; right: 16px; width: 32px; height: 32px; font-size: 19px; line-height: 32px; }   /* clear of the round top */
  /* the Space chip at 140 px, its room cut short, so the level has room; its menu opens as
     wide as its names */
  .controls { grid-template-columns: 140px 1fr; gap: 16px; }
  .controls .select { width: 140px; }
  .controls .trigger { gap: 6px; padding: 8px 8px 8px 12px; }
  .controls .trigger > span:first-child { flex: 1; min-width: 0; }
  .controls .trigger .chev { width: 28px; height: 28px; }
  .controls .select .menu { min-width: 240px; width: max-content; }
  .seek .play { width: 64px; height: 64px; margin-right: 4px; }
  .seek .play .icon { width: 28px; height: 28px; }
}