/* Songless Radio — songlessradio.com */
  :root{
    --ink:#06080d; --night:#0b0f17; --paper:#ede7da; --dim:#8b8a80;
    --dial:#d8b36a; --line:rgba(237,231,218,.14);
    --accent:#7fa8c9;
    --serif:'Instrument Serif',Georgia,serif; --mono:'Space Mono',ui-monospace,monospace;
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{height:100%}
  @supports (height:100dvh){html,body{height:100dvh}}
  body{background:var(--ink);color:var(--paper);font-family:var(--mono);overflow:hidden}
  #vis{position:absolute;inset:0;width:100%;height:100%;display:block}
  #flash{position:absolute;inset:0;background:#cfd8e6;opacity:0;pointer-events:none;transition:opacity .1s}
  .chrome{position:absolute;left:0;right:0;display:flex;justify-content:space-between;align-items:center;
    padding:22px 30px;z-index:5;transition:opacity .8s ease}
  header.chrome{top:0;padding-top:calc(22px + env(safe-area-inset-top))}
  .brand{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
  .brand b{color:var(--dial);font-weight:700}
  #clock{font-size:13px;letter-spacing:.18em;color:var(--dim);font-variant-numeric:tabular-nums}
  main{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;z-index:3;pointer-events:none;padding:0 24px}
  #freq{font-size:14px;letter-spacing:.35em;color:var(--dial);margin-bottom:14px;font-variant-numeric:tabular-nums}
  #chname{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(44px,8vw,96px);
    line-height:1.05;letter-spacing:.01em;text-shadow:0 2px 40px rgba(0,0,0,.55)}
  #chsub{margin-top:16px;font-size:13px;letter-spacing:.14em;color:var(--dim)}
  #sleepnote{margin-top:10px;font-size:12px;letter-spacing:.14em;color:var(--dial);min-height:16px;font-variant-numeric:tabular-nums}
  footer{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:0 30px calc(26px + env(safe-area-inset-bottom));transition:opacity .8s ease}
  #dial{position:relative;height:64px;border-top:1px solid var(--line);margin-bottom:18px;cursor:pointer}
  #dial .tick{position:absolute;top:0;width:1px;height:10px;background:var(--line)}
  #dial .tick.major{height:16px;background:rgba(237,231,218,.3)}
  .stop{position:absolute;top:22px;transform:translateX(-50%);text-align:center;cursor:pointer;
    color:var(--dim);transition:color .3s;user-select:none;-webkit-user-select:none}
  .stop .f{font-size:11px;letter-spacing:.08em;font-variant-numeric:tabular-nums}
  .stop .n{font-size:11px;letter-spacing:.12em;text-transform:lowercase;margin-top:3px}
  .stop.on{color:var(--paper)}
  .stop:hover{color:var(--paper)}
  #needle{position:absolute;top:-1px;width:2px;height:64px;background:var(--dial);
    box-shadow:0 0 12px rgba(216,179,106,.7);transition:left .6s cubic-bezier(.3,1.2,.4,1);pointer-events:none}
  .bar{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
  button{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--paper);
    background:transparent;border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;
    transition:border-color .25s,color .25s;touch-action:manipulation}
  .chbtn{display:none;width:44px;height:44px;padding:0;font-size:22px;
    align-items:center;justify-content:center;line-height:1}
  button:hover{border-color:var(--dial);color:var(--dial)}
  button:focus-visible{outline:2px solid var(--dial);outline-offset:2px}
  button.on{border-color:var(--dial);color:var(--dial)}
  #play{width:52px;height:52px;display:flex;align-items:center;justify-content:center;padding:0}
  #play svg{width:18px;height:18px;fill:currentColor}
  .grp{display:flex;align-items:center;gap:8px}
  .lbl{font-size:11px;letter-spacing:.18em;color:var(--dim);text-transform:uppercase}
  input[type=range]{-webkit-appearance:none;appearance:none;width:130px;height:2px;background:var(--line);border-radius:2px}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;
    background:var(--dial);cursor:pointer}
  input[type=range]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--dial);cursor:pointer}
  .spacer{flex:1}
  #help{position:absolute;inset:0;z-index:20;background:rgba(6,8,13,.92);display:none;
    align-items:center;justify-content:center;padding:24px}
  #help.open{display:flex}
  #help .card{max-width:640px;max-height:86vh;overflow-y:auto;border:1px solid var(--line);border-radius:14px;
    padding:36px 40px;background:var(--night)}
  #help h2{font-family:var(--serif);font-style:italic;font-weight:400;font-size:32px;margin-bottom:6px}
  #help h3{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--dial);margin:24px 0 10px}
  #help p,#help li{font-size:13px;line-height:1.8;color:var(--paper)}
  #help ol{padding-left:20px}
  #help li{margin-bottom:8px}
  #help a{color:var(--dial)}
  #help .close{margin-top:26px}
  #help kbd{border:1px solid var(--line);border-radius:4px;padding:1px 6px;font-size:11px}
  body.hidechrome header.chrome,body.hidechrome footer{opacity:0;pointer-events:none}
  body.hidechrome{cursor:none}
  @media (max-width:700px){
    .chrome{padding:14px 16px;padding-top:calc(14px + env(safe-area-inset-top))}
    .brand{font-size:11px;letter-spacing:.16em}
    .brand-domain{display:none}
    #clock{font-size:12px}
    main{padding-bottom:250px}
    #freq{font-size:12px;letter-spacing:.3em;margin-bottom:10px}
    #chname{font-size:clamp(40px,13vw,68px)}
    #chsub{font-size:12px;padding:0 10px}
    .stop{display:none}
    #dial{height:32px;margin-bottom:14px}
    #needle{height:32px}
    footer{padding:0 14px calc(12px + env(safe-area-inset-bottom))}
    .bar{gap:8px;row-gap:10px}
    .grp{flex-wrap:wrap;row-gap:8px}
    button{padding:8px 12px;font-size:11px}
    #play{width:52px;height:52px}
    .chbtn{display:flex}
    input[type=range]{width:104px}
    .spacer{display:none}
    #helpbtn{width:100%}
  }
  @media (prefers-reduced-motion:reduce){
    #needle{transition:none}
  }