@font-face{font-family:'DSEG14'; font-display:block; src:url(/assets/state-of-smoke/DSEG14Classic-Light.woff2) format('woff2');}
  .sos, .sos-float{

    --sos-border:var(--border, oklch(30% 0.03 292));
    --sos-radius:var(--radius, 14px);
    --sos-faint:var(--text-faint, oklch(55% 0.02 90));
    --sos-dim:var(--text-dim, oklch(76% 0.03 90));
    --sos-focus:var(--ember, oklch(75% 0.16 55));
    --sos-mono:var(--font-mono, 'IBM Plex Mono', monospace);
    --sos-display:var(--font-display, 'Fraunces', serif);
    --sos-body:var(--font-body, 'Work Sans', sans-serif);
  }
  .sos{
    --sos-red:#c23a1b;
    --sos-lcd:#a8dbe4;
    --sos-label:#6f787c;
    --sos-silver:#d6d0c6;
    --sos-silver-dim:#8d877e;
  }
  .sos-stage{
    position:relative;
    background:#000;
    border:1px solid var(--sos-border); border-radius:var(--sos-radius);
    padding:clamp(30px,5vw,56px) clamp(16px,3vw,36px) 24px;
    container-type:inline-size;
    overflow:hidden;
    user-select:none; -webkit-user-select:none;
  }
  .sos-mark{position:absolute; width:11px; height:11px; pointer-events:none;}
  .sos-mark::before, .sos-mark::after{content:''; position:absolute; background:var(--sos-red);}
  .sos-mark::before{left:5px; top:0; width:1px; height:11px;}
  .sos-mark::after{top:5px; left:0; height:1px; width:11px;}
  .sos-mark-tl{top:16px; left:16px;} .sos-mark-tr{top:16px; right:16px;}
  .sos-mark-bl{bottom:16px; left:16px;} .sos-mark-br{bottom:16px; right:16px;}

  .sos-deck{
    --cw:29cqw;
    --pw:38.6cqw;
    --sos-cs:1;
    display:flex; align-items:stretch; justify-content:space-between; gap:3.4cqw;
  }
  @container (max-width:680px){
    .sos-deck{--cw:50cqw; --pw:min(100cqw, 460px); --sos-cs:1.3; flex-direction:column; align-items:center; gap:30px;}
    .sos-cap{letter-spacing:0.1em;}
  }
  .sos-col{display:flex; flex-direction:column; align-items:center; justify-content:flex-end;}
  .sos-col > :first-child{margin-block:auto;}
  .sos-case-col{width:calc(var(--cw) * 2);}
  .sos-player-col{width:var(--pw);}
  .sos-cap{
    margin-top:20px; display:flex; align-items:center; gap:9px;
    font-family:var(--sos-mono); font-size:0.66rem; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--sos-faint); text-align:center; min-height:1.6em;
  }
  .sos-cap::before{content:''; width:6px; height:6px; background:var(--sos-red); flex-shrink:0;}
  .sos-foot{
    margin-top:clamp(26px,4vw,40px); display:flex; align-items:center; justify-content:center; gap:22px;
    font-family:var(--sos-mono); font-size:0.62rem; letter-spacing:0.42em; text-transform:uppercase; color:var(--sos-faint);
  }
  .sos-foot svg{width:14px; height:14px; color:var(--sos-dim); flex-shrink:0;}
  .sos-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;}

  .sos-case-view{position:relative; width:100%; height:calc(var(--cw) * 0.856 * var(--sos-cs)); perspective:1800px;}
  .sos-case-wrap{
    position:absolute; left:0; top:50%; width:100%; height:calc(var(--cw) * 0.856); margin-top:calc(var(--cw) * -0.428);
    transform-style:preserve-3d; transform-origin:75% 50%;
    transform:translateX(calc(var(--cw) * -0.5)) scale(var(--sos-cs)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    transition:transform .9s cubic-bezier(.2,.8,.2,1), transform-origin .9s cubic-bezier(.2,.8,.2,1);
  }
  .sos.is-case-open .sos-case-wrap{transform-origin:50% 50%; transform:translateX(0) scale(1) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));}
  .sos-case{position:absolute; top:0; right:0; width:50%; height:100%; transform-style:preserve-3d;}
  .sos-tray{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
  .sos-tray-slot{position:absolute; left:14.2%; top:5%; width:78.6%; aspect-ratio:1; transform:translateZ(1px);}
  .sos-lid{
    position:absolute; inset:0; transform-style:preserve-3d; transform-origin:0 50%;
    transform:translateZ(3px) rotateY(0deg);
    transition:transform 1.05s cubic-bezier(.2,.75,.2,1);
  }
  .sos.is-case-open .sos-lid{transform:translateZ(3px) rotateY(-179.6deg);}
  .sos-lid-face{
    position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:none; color:inherit; font:inherit;
    backface-visibility:hidden; -webkit-backface-visibility:hidden; appearance:none; -webkit-appearance:none;
  }
  .sos-lid-front{cursor:pointer;}
  .sos-lid-back{transform:rotateY(180deg); pointer-events:none;}
  .sos.is-case-open .sos-lid-front{pointer-events:none;}
  .sos.is-case-open .sos-lid-back{pointer-events:auto;}
  .sos-cover{position:absolute; left:14.6%; top:1.6%; width:82.9%; height:96.8%; display:block;}

  .sos-acrylic{
    position:absolute; inset:1.1% 1%; border-radius:2px; pointer-events:none;
    border:1px solid rgba(255,255,255,0.26);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.18);
    background:
      linear-gradient(118deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.06) 76%, rgba(255,255,255,0) 88%);
  }
  .sos-acrylic::before, .sos-acrylic::after{
    content:''; position:absolute; top:-1px; bottom:-1px; width:1px; background:rgba(255,255,255,0.16);
  }
  .sos-lid-front .sos-acrylic::before{left:12.4%;}  .sos-lid-front .sos-acrylic::after{left:13.6%;}
  .sos-lid-back .sos-acrylic::before{right:12.4%;}  .sos-lid-back .sos-acrylic::after{right:13.6%;}
  .sos-lid-front:hover .sos-acrylic{border-color:rgba(255,255,255,0.4);}

  .sos-booklet{
    position:absolute; left:2.5%; top:1.6%; width:82.9%; height:96.8%;
    container-type:inline-size; cursor:pointer;
    background:#0d0d0d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E");
    display:flex; flex-direction:column; align-items:center; text-align:center;
    padding:6.6% 8.3% 5.8%;
    color:var(--sos-silver);
  }
  .sos-booklet-corner{position:absolute; width:17cqw; height:auto; opacity:0.7; pointer-events:none;}
  .sos-booklet-corner.bl{left:3cqw; bottom:3cqw;}
  .sos-booklet-corner.br{right:3cqw; bottom:3cqw; transform:scaleX(-1);}
  .sos-booklet-corner.tl{left:3cqw; top:3cqw; transform:scaleY(-1);}
  .sos-booklet-corner.tr{right:3cqw; top:3cqw; transform:scale(-1,-1);}
  .sos-booklet-kicker{font-family:var(--sos-mono); font-size:2.9cqw; letter-spacing:0.32em; color:var(--sos-silver-dim); text-transform:uppercase;}
  .sos-booklet-title{font-family:var(--sos-display); font-weight:500; font-size:7.4cqw; letter-spacing:0.14em; text-transform:uppercase; line-height:1.1; margin-top:2cqw;}
  .sos-booklet-rule{width:86%; height:auto; margin:2.2cqw 0 3cqw; opacity:0.9;}
  .sos-booklet-label{
    align-self:stretch; display:flex; align-items:center; gap:2cqw;
    font-family:var(--sos-mono); font-size:2.9cqw; letter-spacing:0.28em; text-transform:uppercase; color:var(--sos-silver-dim); margin-bottom:1.4cqw;
  }
  .sos-booklet-label::before{content:''; width:1.7cqw; height:1.7cqw; background:var(--sos-red);}
  .sos-tracklist{list-style:none; align-self:stretch; display:flex; flex-direction:column;}
  .sos-track{
    display:flex; align-items:baseline; gap:2.2cqw; height:5cqw;
    font-family:var(--sos-mono); font-size:3.1cqw; color:var(--sos-silver-dim); text-align:left;
    width:100%; padding:0; border:0; background:none; appearance:none; -webkit-appearance:none;
  }
  .sos-track-n{flex-shrink:0;}
  .sos-track-t{flex:1; border-bottom:1px dotted rgba(214,208,198,0.28); line-height:1.2; padding-bottom:0.4cqw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--sos-silver);}
  button.sos-track{cursor:pointer;}
  button.sos-track:hover .sos-track-t{color:#fff; border-bottom-color:var(--sos-red);}
  .sos-track.is-current .sos-track-n{color:var(--sos-red);}
  .sos-booklet-tag{margin-top:auto; font-family:var(--sos-display); font-size:3.2cqw; letter-spacing:0.16em; text-transform:uppercase; color:var(--sos-silver);}

  .sos-disc{position:relative; width:100%; height:100%; border-radius:50%; touch-action:none; -webkit-tap-highlight-color:transparent; outline:none;}
  .sos-disc-body{
    position:absolute; inset:0; border-radius:50%; isolation:isolate;
    transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
  }
  .sos-disc-art{position:absolute; inset:0; width:100%; height:100%; border-radius:50%; pointer-events:none; -webkit-user-drag:none; will-change:transform;}
  .sos-disc-sheen{
    position:absolute; inset:0; border-radius:50%; pointer-events:none; mix-blend-mode:screen;
    background:conic-gradient(from 205deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,0.11) 26deg, rgba(255,255,255,0) 58deg, rgba(255,255,255,0) 180deg, rgba(255,255,255,0.07) 208deg, rgba(255,255,255,0) 236deg);
    -webkit-mask:radial-gradient(circle, transparent 0 27%, #000 28.5%);
            mask:radial-gradient(circle, transparent 0 27%, #000 28.5%);
  }
  .sos-disc:focus-visible .sos-disc-body{box-shadow:0 0 0 2px var(--sos-focus);}
  .sos.is-case-open[data-disc="case"] .sos-tray-slot .sos-disc{cursor:grab;}
  .sos.is-case-open[data-disc="case"] .sos-tray-slot .sos-disc:hover .sos-disc-body{transform:translateY(-1.5%) scale(1.012); box-shadow:0 10px 26px rgba(0,0,0,0.7);}
  .sos[data-disc="player"] .sos-well .sos-disc{cursor:grab;}
  .sos[data-disc="player"].is-lid-open .sos-well .sos-disc-body{transform:translateY(-1.6%) scale(1.035); box-shadow:0 2.4cqw 4cqw rgba(0,0,0,0.75);}
  .sos-float{position:fixed; inset:0; z-index:60; pointer-events:none;}
  .sos-float .sos-disc{position:absolute; left:0; top:0; pointer-events:auto; cursor:grabbing;}
  .sos-float .sos-disc-body{transition:none; box-shadow:0 22px 50px rgba(0,0,0,0.75);}

  .sos-player{position:relative; width:100%; aspect-ratio:1120 / 965; container-type:inline-size; touch-action:manipulation; -webkit-tap-highlight-color:transparent;}
  .sos-player-base{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; -webkit-user-drag:none;}
  .sos-well{position:absolute; border-radius:50%;}
  .sos-well::before{
    content:''; position:absolute; inset:-1.2%; border-radius:50%; pointer-events:none; opacity:0;
    box-shadow:0 0 0 1px rgba(168,219,228,0.55), 0 0 26px rgba(168,219,228,0.28), inset 0 0 30px rgba(168,219,228,0.12);
    transition:opacity .25s ease;
  }
  .sos-player.is-target .sos-well::before{opacity:1; animation:sosPulse 1.3s ease-in-out infinite;}
  .sos-glare{position:absolute; pointer-events:none; mix-blend-mode:screen; opacity:0; transform-origin:-19% 50%; -webkit-user-drag:none;}
  .sos[data-disc="player"] .sos-glare{opacity:1;}
  .sos.is-lid-open .sos-glare{opacity:0;}
  .sos-glare.is-opening{animation:sosLidOpen .75s cubic-bezier(.2,.75,.25,1) both;}
  .sos-glare.is-closing{animation:sosLidClose .6s cubic-bezier(.3,.7,.3,1) both;}
  @keyframes sosLidOpen{from{opacity:.9; transform:perspective(1100px) rotateY(0deg);} to{opacity:0; transform:perspective(1100px) rotateY(-46deg) translateZ(20px);}}
  @keyframes sosLidClose{from{opacity:0; transform:perspective(1100px) rotateY(-46deg) translateZ(20px);} 70%{opacity:.9;} to{opacity:var(--sos-glare-end,0); transform:perspective(1100px) rotateY(0deg);}}
  @keyframes sosPulse{0%,100%{opacity:.55;} 50%{opacity:1;}}

  .sos-lcd{
    position:absolute; display:grid; grid-template-columns:15% 1fr; grid-template-rows:60% 40%;
    pointer-events:none; color:var(--sos-lcd); border-radius:1cqw;
    transition:background .6s ease;
  }
  .sos.is-powered .sos-lcd{background:radial-gradient(ellipse 70% 90% at 55% 45%, rgba(120,205,230,0.07), transparent 75%);}
  .sos-lcd-icon{grid-row:1; grid-column:1; align-self:center; justify-self:center; width:2cqw; height:2cqw; margin-top:0.3cqw; filter:drop-shadow(0 0 0.5cqw rgba(140,220,240,0.5));}
  .sos-lcd-icon svg{display:none; width:100%; height:100%; fill:currentColor;}
  .sos-lcd-icon[data-icon="play"] .i-play, .sos-lcd-icon[data-icon="pause"] .i-pause,
  .sos-lcd-icon[data-icon="stop"] .i-stop, .sos-lcd-icon[data-icon="open"] .i-open{display:block;}
  .sos-lcd-icon[data-icon="idle"] .i-play{display:block; opacity:0.85;}
  .sos-lcd-main{
    grid-row:1; grid-column:2; align-self:center; justify-self:center; position:relative;
    font-family:'DSEG14', var(--sos-mono); font-size:2.6cqw; line-height:1; letter-spacing:0.08em; white-space:pre; margin-right:8%;
    text-shadow:0 0 0.7cqw rgba(140,220,240,0.55);
  }
  .sos-lcd-main::before{content:attr(data-ghost); position:absolute; left:0; top:0; color:var(--sos-lcd); opacity:0.07; text-shadow:none;}
  .sos-lcd-sub{
    grid-row:2; grid-column:1 / 3; align-self:start; display:flex; align-items:baseline; justify-content:center; gap:1.1cqw;
    font-size:1.2cqw; padding-right:5%;
  }
  .sos-lcd-label{font-family:var(--sos-body); font-weight:600; letter-spacing:0.08em; color:var(--sos-label);}
  .sos-lcd-val{font-family:'DSEG14', var(--sos-mono); font-size:1.3cqw; letter-spacing:0.06em; color:var(--sos-lcd); text-shadow:0 0 0.5cqw rgba(140,220,240,0.5); margin-right:2.2cqw; white-space:pre;}
  .sos-lcd-val:last-child{margin-right:0;}
  .sos-lcd.is-blink .sos-lcd-main{animation:sosBlink 1s steps(1) infinite;}
  .sos.is-paused .sos-lcd-time{animation:sosBlink 1s steps(1) infinite;}
  @keyframes sosBlink{0%{opacity:1;} 50%{opacity:0.15;}}

  .sos-btn{
    position:absolute; border-radius:50%; padding:0; border:0; cursor:pointer;
    background-color:#000; background-image:var(--sos-player-img); background-repeat:no-repeat;
    transition:transform .09s ease, filter .12s ease;
    appearance:none; -webkit-appearance:none; -webkit-tap-highlight-color:transparent;
  }
  .sos-btn:hover{filter:brightness(1.18);}
  .sos-btn:active, .sos-btn.is-pressed{transform:scale(0.93); filter:brightness(0.78);}
  .sos-btn:focus-visible{outline:2px solid var(--sos-focus); outline-offset:2px;}
  .sos-btn::after{
    content:''; position:absolute; inset:5%; border-radius:50%; pointer-events:none; opacity:0;
    box-shadow:0 0 0 1px rgba(168,219,228,0.55), 0 0 1.6cqw rgba(168,219,228,0.45);
    transition:opacity .3s ease;
  }
  .sos-btn.is-on::after{opacity:0.75;}
  .sos-btn.is-hint::after{animation:sosPulse 1.5s ease-in-out infinite; opacity:1;}

  .sos-vol{position:absolute; cursor:ns-resize; touch-action:none; border-radius:1cqw;}
  .sos-vol:focus-visible{outline:2px solid var(--sos-focus); outline-offset:2px;}
  .sos-knob{position:absolute; pointer-events:none; -webkit-user-drag:none;}

  @media (prefers-reduced-motion: reduce){
    .sos-case-wrap, .sos-lid, .sos-disc-body{transition-duration:.01s;}
    .sos-glare.is-opening, .sos-glare.is-closing{animation-duration:.01s;}
  }

  .sos-disc-section{width:min(1120px, calc(100% - 32px)); margin:20px auto 90px; padding:0; text-align:center;}
  .sos-disc-section > div > .sos-eyebrow, .sos-disc-section > div > h2, .sos-disc-section > div > .sos-episodes-sub{padding:0 8px;}

  .sos-disc-section .sos-stage{margin-top:28px; text-align:left; border:0; border-radius:0;}
  .sos-disc-section .sos-mark{display:none;}

  .sos-disc-section .sos-case-view,
  .sos-disc-section .sos-player{-webkit-box-reflect:below 6px linear-gradient(to bottom, transparent 74%, rgba(255,255,255,.17));}
  .sos-disc-section .sos-case-view{margin-bottom:calc(var(--cw) * 0.856 * var(--sos-cs) * 0.24);}
  .sos-disc-section .sos-player{margin-bottom:calc(var(--pw) * 0.862 * 0.24);}
  @media (prefers-reduced-transparency:reduce){
    .sos-disc-section .sos-case-view, .sos-disc-section .sos-player{-webkit-box-reflect:none; margin-bottom:0;}
  }