:root{--window:#050607;--hover:8%;--press:10%}
.unit{width:100%;max-width:100%;margin:0 auto;overflow:hidden;background:var(--surf-c);border-radius:12px;padding:16px}
.window{position:relative;width:100%;aspect-ratio:4/1;max-width:100%;background:var(--window);border-radius:6px 6px 2px 2px;box-shadow:0 0 0 var(--bz,7px) #1c1c1e,inset 0 0 0 1px #2a2a2d;overflow:hidden;cursor:default;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.window canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.window.game{aspect-ratio:128/18;margin-top:var(--bz,7px);border-radius:2px 2px 6px 6px;cursor:pointer} /* one display behind one bezel: the strip between the clock and the desk is the same bezel */
.unit{--bz:7px}
@media (max-width:700px){.unit{--bz:5px}}
.window.game[hidden]{display:none}
.face{display:grid;gap:16px;margin-top:16px;transition:opacity .9s ease}
body.idle .face{opacity:.07;transition-duration:2.4s}

/* Rows: controls centred on one axis, wrapping on narrow screens */
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.ctl{display:grid;gap:4px;min-width:0;flex:0 0 auto}
.ctl.grow{flex:1 1 160px}
.ctl.push{margin-left:auto}
.ctl[hidden]{display:none}
.lbl{display:flex;justify-content:space-between;gap:8px;font-size:12px;line-height:16px;letter-spacing:.5px;font-weight:500;color:var(--on-surf-v);padding:0 2px}

/* State layer: an overlay of the content colour at 8% on hover, 10% while pressed */
.btn,.icon,.seg button,.switch{position:relative;isolation:isolate;overflow:hidden}
.btn::before,.icon::before,.seg button::before{content:'';position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity .15s;pointer-events:none;border-radius:inherit}
.btn:hover::before,.icon:hover::before,.seg button:hover::before{opacity:.08}
.btn:active::before,.icon:active::before,.seg button:active::before{opacity:.1}

/* Common buttons: 40dp, full-round, label-large, 24dp side padding (16dp when leading with an icon) */
.btn{font:500 14px/20px var(--font);letter-spacing:.1px;height:40px;padding:0 24px;border:0;border-radius:20px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.btn.tonal{background:var(--s-c);color:var(--on-s-c)}
.btn.outlined{background:transparent;color:var(--p);box-shadow:inset 0 0 0 1px var(--outline)}
.btn svg{width:18px;height:18px;fill:currentColor;margin-left:-8px}

/* Icon buttons: 40dp state layer, 24dp icon. Standard = no container; filled = primary container */
.icon{width:40px;height:40px;border:0;border-radius:20px;padding:0;background:transparent;color:var(--on-surf-v);cursor:pointer;display:inline-grid;place-items:center;flex:0 0 auto}
.icon svg{width:24px;height:24px;fill:currentColor;display:block}
.icon[aria-pressed="true"],.icon[aria-expanded="true"]{color:var(--p)}
.icon.filled{background:var(--p);color:var(--on-p)}
.icon.filled[aria-pressed="true"]{background:var(--p);color:var(--on-p)}
#playKey svg+svg,#playKey[aria-pressed="true"] svg:first-child{display:none}
#playKey[aria-pressed="true"] svg+svg{display:block}


/* Outlined text field (also the exposed dropdown): 56dp, extra-small corners, 1dp outline, 2dp primary when focused,
   label floating in the outline gap, body-large input text */
.field{position:relative;height:56px;min-width:0}
.field select,.field input{width:100%;height:56px;margin:0;padding:0 16px;font:400 16px/24px var(--font);letter-spacing:.5px;color:var(--on-surf);background:transparent;border:1px solid var(--outline);border-radius:4px;outline:none;appearance:none;-webkit-appearance:none;min-width:0}
.field select{padding-right:48px;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.field select option{background:var(--surf-c);color:var(--on-surf)}
.field.icon-end input{padding-right:52px}
.field:hover select,.field:hover input{border-color:var(--on-surf)}
.field select:focus,.field input:focus{border-color:var(--p);box-shadow:inset 0 0 0 1px var(--p)}
.field label{position:absolute;left:12px;top:-8px;padding:0 4px;background:var(--surf-c);font:400 12px/16px var(--font);letter-spacing:.4px;color:var(--on-surf-v);pointer-events:none;transition:top .15s,font-size .15s,line-height .15s}
.field.text input:placeholder-shown:not(:focus)+label{top:16px;font-size:16px;line-height:24px;letter-spacing:.5px}
.field input::placeholder{color:var(--on-surf-v);opacity:0}
.field input:focus::placeholder{opacity:1}
.field:focus-within label{color:var(--p)}
.field .arrow{position:absolute;right:12px;top:16px;width:24px;height:24px;fill:var(--on-surf-v);pointer-events:none}
.field .icon{position:absolute;right:4px;top:8px}
.field [hidden]{display:none}


/* Slider: 16dp tracks, active = primary, inactive = secondary container, 4×44 handle with 6dp of clear space either side */
.fader{width:100%;height:44px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;display:block;--v:50%}
.fader::-webkit-slider-runnable-track{height:16px;border-radius:8px;background:linear-gradient(to right,var(--p) 0 var(--v),var(--s-c) var(--v) 100%)}
.fader::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:4px;height:44px;margin-top:-14px;border-radius:2px;background:var(--p);box-shadow:0 0 0 6px var(--surf-c);transition:width .1s}
.fader:active::-webkit-slider-thumb{width:2px}
.fader::-moz-range-track{height:16px;border-radius:8px;background:var(--s-c)}
.fader::-moz-range-progress{height:16px;border-radius:8px 0 0 8px;background:var(--p)}
.fader::-moz-range-thumb{width:4px;height:44px;border:0;border-radius:2px;background:var(--p);box-shadow:0 0 0 6px var(--surf-c)}


.about{margin:16px 0 0;font:400 12px/16px var(--font);letter-spacing:.4px;color:var(--on-surf-v);transition:opacity .9s ease}
.about a{color:inherit;text-decoration:underline;text-underline-offset:2px}
body.idle .about{opacity:.07;transition-duration:2.4s}
/* Focus indicator: 3dp secondary, 2dp outside the component */
:focus-visible{outline:3px solid var(--s);outline-offset:2px}
.field select:focus-visible,.field input:focus-visible{outline:none}
@media (prefers-reduced-motion:reduce){.face,.switch,.switch i,.field label{transition:none}}

/* In the installed app (and in Float's window) the page around the board disappears */
@media (display-mode:standalone){.top,#page,.foot{display:none!important}.boardwrap{padding-top:16px}}
.boardwrap{padding:0 var(--gutter)}
/* Controls: one row on wide screens; on phones, play + station, then volume + brightness side by side */
.face .row{display:grid;grid-template-columns:auto minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) auto auto auto auto;gap:12px 16px;align-items:center}
.fz{display:flex;align-items:center;gap:10px}
.fz .ico{display:block;width:20px;height:20px;fill:var(--on-surf-v);flex:0 0 auto}
.mutebtn{flex:0 0 auto;width:32px;height:32px;margin:-6px -4px -6px -6px;padding:6px;border:0;border-radius:16px;background:transparent;color:var(--on-surf-v);cursor:pointer;display:grid;place-items:center;position:relative;overflow:hidden}
.mutebtn::before{content:"";position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity .15s;border-radius:inherit}.mutebtn:hover::before{opacity:.08}
.mutebtn svg{width:20px;height:20px;fill:currentColor;display:block}.mutebtn svg+svg,.mutebtn[aria-pressed="true"] svg:first-child{display:none}.mutebtn[aria-pressed="true"] svg+svg{display:block}
.mutebtn[aria-pressed="true"]{color:var(--p)}.vol.muted .fader{opacity:.45}
/* Phones: a compact, dense version of the same controls. Labels become icons, the field and sliders get shorter. */
@media (max-width:700px){
  .unit{padding:10px}
  .face{margin-top:10px;gap:8px}
  .face .row{grid-template-columns:40px minmax(0,calc(50% - 48px)) minmax(0,1fr) 40px 40px;gap:8px 12px}
  .face .st{grid-column:2/4;grid-row:1}
  .face .feedbtn{grid-column:4/5;grid-row:1}
  .face .sitbtn{grid-column:5/6;grid-row:1}
  .face .vol{grid-column:1/3;grid-row:2}
  .face .br{grid-column:3/6;grid-row:2}
  .face .dots{grid-column:1/6;grid-row:3;justify-content:center}
  .face .lbl{display:none}
  .fz .ico{display:block}
  .icon{width:40px;height:40px}
  .icon svg{width:22px;height:22px}
  .field{height:44px}
  .field select,.field input{height:44px;font-size:15px;padding:0 12px}
  .field select{padding-right:40px}
  .field .arrow{top:10px;right:8px}
  .field label{font-size:11px;line-height:14px;top:-7px;left:10px}
  .fader{height:32px}
  .fader::-webkit-slider-runnable-track{height:10px;border-radius:5px}
  .fader::-webkit-slider-thumb{height:28px;margin-top:-9px}
  .fader::-moz-range-track,.fader::-moz-range-progress{height:10px}
  .fader::-moz-range-thumb{height:28px}
}
html.turning #page{opacity:.55;transition:opacity .2s}
#page{transition:opacity .25s}
#page:focus{outline:none}
.icon[hidden]{display:none}
.icon:disabled{opacity:.38;cursor:default}.icon:disabled::before{display:none}
.icon.sitbtn[aria-pressed="true"],.icon.floatbtn[aria-pressed="true"]{background:var(--s-c);color:var(--on-s-c)}
.floatnote{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;border-radius:8px;background:var(--surf-high);color:var(--on-surf-v);font:500 14px/20px var(--font);padding:12px}
.floatnote[hidden]{display:none}
/* Palette tiles: each a tiny board in its palette */
.dots{display:flex;gap:2px;align-items:center}
.swatch{position:relative;isolation:isolate;overflow:hidden;width:36px;height:36px;border:0;border-radius:4px;padding:0;background:transparent;cursor:pointer;display:grid;place-items:center}
.swatch::before{content:'';position:absolute;inset:0;background:var(--on-surf);opacity:0;transition:opacity .15s;border-radius:inherit}
.swatch:hover::before{opacity:.08}
.swatch::after{content:"";position:absolute;left:50%;bottom:1px;width:10px;height:2px;margin-left:-5px;background:repeating-linear-gradient(90deg,var(--p) 0 2px,transparent 2px 4px);opacity:0}
.swatch[aria-pressed="true"]::after{opacity:1}
.swatch canvas{width:24px;height:16px;display:block;position:relative;z-index:1;transition:opacity .2s}
@media (min-width:701px){.swatch{width:30px;height:30px}.swatch canvas{width:20px;height:13px}}

/* Broadcast mode (?broadcast=video|live): just the board, centred in a 16:9 frame, for streaming software */
html.broadcast,html.broadcast body{height:100%;margin:0;overflow:hidden;background:#0b0b0c;cursor:none}
html.broadcast .top,html.broadcast #page,html.broadcast .foot,html.broadcast .face,html.broadcast .skip,html.broadcast .floatnote{display:none!important}
html.broadcast .boardwrap{height:100vh;display:flex;align-items:center;justify-content:center;padding:0}
html.broadcast .unit{margin:0;padding:clamp(12px,1.6vw,28px);border-radius:clamp(10px,1.2vw,22px)}
html.broadcast .unit{--bz:max(7px,.5vw)}
html.broadcast .bcstart{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);cursor:pointer;font:500 18px/1 var(--font);padding:16px 24px;border-radius:24px;border:0;background:#fff;color:#111}

/* screen-reader-only text (the board described in words); visually hidden */
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}