/* ══════════════════════════════════════════════════════════════════
   SUKOON · سكون · soundscape mixer (Version 2)
   Built on site.css + chill.css. Everything here is prefixed sk-.

   · The scene is the hero: a painted room, nearly edge to edge, under
     a big, quiet title. Every sound in the mix adds something to it.
   · Under it the mixer: the sounds as small picture tiles, and beside
     them the deck, a sage "now playing" panel. Its rings are the mix:
     one ring per sound, thicker = louder.
   · A tile rests muted in colour and comes alive (sage, with a dot)
     when its sound plays; a dashed edge means the mix is paused.
   · A small player follows you down the page once the deck scrolls away.
   Also used by /chill/lofi/ (the same player with the lofi rooms).
   ══════════════════════════════════════════════════════════════════ */

.sk { --dock-h: 64px; }
.sk main { display: block; }

/* ── The title (the room comes first, so it stays compact) ───────── */
.sk-head {
    display: grid; gap: 18px clamp(32px, 5vw, 80px); align-items: end;
    padding: clamp(28px, 4vw, 52px) 0 clamp(24px, 2.6vw, 36px);
}
@media (min-width: 900px) { .sk-head { grid-template-columns: auto minmax(0, 1fr); } }
.sk-head-title {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.28em;
    font-size: clamp(48px, 6.6vw, 88px); line-height: 1; letter-spacing: -0.034em; font-weight: 600;
}
.sk-head-copy { display: grid; gap: 12px; max-width: 600px; padding-bottom: 0.35em; }
.sk-head-lead { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.42; letter-spacing: -0.014em; color: var(--fg-2); text-wrap: pretty; }
.sk-head-lead em { font-style: normal; color: var(--fg); font-weight: 600; }

/* ── Stage: the living scene ─────────────────────────────────────── */
/* A room, painted by hand and brought to life (sukoon-painted.js, sukoon-illus.js). Every sound in the mix adds to it.
   Its controls sit on small dark pills so they read over any sky. */
.sk-stage-sec { width: min(100% - 24px, 1680px); margin-inline: auto; }
.sk-recede { transform: scale(calc(1 - 0.04 * var(--p, 0))); opacity: calc(1 - 0.35 * var(--p, 0)); transform-origin: 50% 0; }
/* full screen needs the stage free of any transform around it */
.sk-stage-sec:has(.is-full) .sk-recede { transform: none; opacity: 1; }
.sk-stage {
    --glass: rgba(10, 14, 24, 0.5);
    position: relative; overflow: hidden; isolation: isolate;
    aspect-ratio: 12 / 5; min-height: 200px; max-height: 78vh; width: 100%;
    border-radius: var(--radius-lg); background: #0A0F1E; color: #FFFFFF;
    -webkit-user-select: none; user-select: none;
}
/* the room's painting, still, until the live room is ready (and for good without WebGL 2); the live room fades in over it */
.sk-stage-poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.sk-stage-paint { position: absolute; left: 0; top: 0; display: block; opacity: 0; pointer-events: none; transition: opacity 1.2s var(--ease); }
.sk-stage[data-canvas="paint"] .sk-stage-paint { opacity: 1; pointer-events: auto; }

.sk-stage-top {
    position: absolute; z-index: 3;            /* (above the play control, so an open menu is never under it) */ inset: clamp(12px, 1.6vw, 20px) clamp(12px, 1.6vw, 20px) auto;
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px;
    pointer-events: none; transition: opacity .5s var(--ease);
}
.sk-stage-top > * { pointer-events: auto; }
.sk-stage-btn {
    display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px 0 13px;
    border: 0; border-radius: 980px; background: var(--glass); color: #FFFFFF;
    -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
    font: 500 13px/1 var(--font); letter-spacing: -0.006em; white-space: nowrap; cursor: pointer;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    transition: background-color .3s var(--ease), transform .25s var(--ease);
}
.sk-stage-btn:hover { background: rgba(10, 14, 24, 0.7); }
.sk-stage-btn:active { transform: scale(0.96); }
.sk-stage-btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.sk-stage-btn .ch-i { width: 18px; height: 18px; }
.sk-stage-fs { width: 40px; padding: 0; justify-content: center; }
#sk-time-btn .i-moon,
#sk-time-btn[data-phase="dusk"] .i-sun, #sk-time-btn[data-phase="night"] .i-sun { display: none; }
#sk-time-btn[data-phase="dusk"] .i-moon, #sk-time-btn[data-phase="night"] .i-moon { display: block; }
.sk-stage-fs .i-shrink, .sk-stage.is-full .sk-stage-fs .i-expand { display: none; }
.sk-stage.is-full .sk-stage-fs .i-shrink { display: block; }

.sk-stage-left { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.sk-stage-time { position: relative; }
.sk-stage-right { display: flex; align-items: flex-start; gap: 8px; margin-left: auto; }

/* the rooms (on /chill/lofi/): one pill naming the room, and a menu like the time of day's */
.sk-stage-room { position: relative; }
.sk-room-now { display: inline-flex; align-items: center; gap: 8px; }
.sk-room-now .ch-i { width: 17px; height: 17px; stroke-width: 1.7; }
.sk-room-chev { width: 9px; height: 9px; margin-left: 2px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; transition: transform .3s var(--ease); }
#sk-room-btn[aria-expanded="true"] .sk-room-chev { transform: rotate(180deg); }
.sk-stage.is-loading #sk-room-btn .sk-room-now { animation: sk-pulse 1.2s ease-in-out infinite alternate; }
@keyframes sk-pulse { to { opacity: 0.55; } }
.sk-style-seg[hidden] { display: none; }
.sk-time-menu.sk-room-menu { left: auto; right: 0; min-width: 220px; }
.sk-time-menu.sk-room-menu button { display: flex; align-items: center; gap: 12px; }
.sk-room-menu .ch-i { width: 18px; height: 18px; stroke-width: 1.7; }
@media (max-width: 560px) {
    .sk-time-auto { display: none; }
    .sk-stage-btn { padding: 0 13px 0 11px; }
    /* the menus stay inside a phone's smaller scene: the rooms in two columns, and both scroll if they must */
    .sk-time-menu { max-height: calc((100vw - 24px) * 0.75 - 64px); overflow-y: auto; overscroll-behavior: contain; }
    .sk-stage-room { position: static; }        /* (so the rooms open across the whole scene, under its top bar) */
    .sk-time-menu.sk-room-menu { grid-template-columns: 1fr 1fr; left: 0; right: 0; min-width: 0; }
}
@media (max-width: 640px) {
    .sk-stage-paused { display: none; }     /* (the play button in the scene says it already) */
}
@media (pointer: coarse) {
    .sk-stage-btn { min-height: 44px; }
    .sk-stage-fs { width: 44px; }
    .sk-time-menu button { min-height: 44px; }
}

.sk-time-menu {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 3; min-width: 200px;
    display: grid; gap: 2px; padding: 6px; border-radius: 16px;
    background: rgba(18, 22, 32, 0.9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.6);
}
.sk-time-menu[hidden] { display: none; }
.sk-time-menu button {
    display: grid; gap: 4px; min-height: 40px; padding: 10px 12px; border: 0; border-radius: 10px;
    background: transparent; color: rgba(255, 255, 255, 0.86); text-align: left;
    font: 500 15px/1.1 var(--font); cursor: pointer;
}
.sk-time-menu button small { font: 400 12px/1.2 var(--font); color: rgba(255, 255, 255, 0.58); }
.sk-time-menu button:hover { background: rgba(255, 255, 255, 0.08); color: #FFFFFF; }
.sk-time-menu button[aria-pressed="true"] { background: #FFFFFF; color: #16161A; }
.sk-time-menu button[aria-pressed="true"] small { color: rgba(22, 22, 26, 0.6); }
.sk-time-menu button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -2px; }

.sk-stage-paused {
    position: absolute; left: 50%; top: 6px; transform: translateX(-50%);
    padding: 9px 14px; border-radius: 980px; background: var(--glass);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    font: 600 12px/1 var(--font); letter-spacing: 0.06em; text-transform: uppercase;
    opacity: 0; transition: opacity .5s var(--ease); pointer-events: none !important;
}
.sk[data-mix="paused"] .sk-stage-paused { opacity: 1; }

/* the scene's own play control: the first thing to press, on the same dark pills as the rest */
.sk-stage-hint {
    position: absolute; z-index: 2; left: clamp(12px, 1.6vw, 20px); bottom: clamp(12px, 1.6vw, 20px);
    display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 20px 4px 4px;
    border: 0; border-radius: 980px; background: var(--glass); color: #FFFFFF; cursor: pointer;
    -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
    font: 500 15px/1.2 var(--font); letter-spacing: -0.01em; text-align: left;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    transition: opacity .6s var(--ease), translate .6s var(--ease-out), background-color .3s var(--ease);
}
.sk-stage-hint:hover { background: rgba(10, 14, 24, 0.7); }
.sk-stage-hint:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.sk-stage-hint-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #FFFFFF; color: #16161A; }
.sk-stage-hint-ic .ch-i { width: 16px; height: 16px; margin-left: 2px; }
.sk:not([data-mix="off"]) .sk-stage-hint, .sk-stage.is-full .sk-stage-hint,
.sk:has(#sk-start:not([hidden])) .sk-stage-hint { opacity: 0; translate: 0 8px; pointer-events: none; visibility: hidden; transition-property: opacity, translate, visibility; }

/* once something plays, the same corner holds a slim player: pause, and what is in the scene */
.sk-stage:not(.is-full) .sk-stage-bar {
    position: absolute; z-index: 2; left: clamp(12px, 1.6vw, 20px); bottom: clamp(12px, 1.6vw, 20px);
    display: flex; align-items: center; gap: 12px; max-width: min(440px, calc(100% - 2 * clamp(12px, 1.6vw, 20px)));
    min-height: 48px; padding: 4px 20px 4px 4px; border-radius: 980px;
    --p-fg: #FFFFFF; --p-fg-2: rgba(255, 255, 255, 0.72);
    background: var(--glass); color: #FFFFFF; color-scheme: dark;
    -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
    transition: opacity .6s var(--ease) .15s, translate .6s var(--ease-out) .15s;
}
.sk[data-mix="off"] .sk-stage:not(.is-full) .sk-stage-bar { opacity: 0; translate: 0 8px; visibility: hidden; pointer-events: none; }
.sk-stage:not(.is-full) .sk-stage-bar .sk-play { width: 40px; height: 40px; background: #FFFFFF; color: #16161A; }
.sk-stage:not(.is-full) .sk-stage-bar .sk-play .ch-i { width: 16px; height: 16px; }
.sk-stage:not(.is-full) .sk-stage-bar .sk-play:focus-visible { outline-color: #FFFFFF; }
.sk-stage:not(.is-full) .sk-stage-now { gap: 3px; }
.sk-stage:not(.is-full) .sk-stage-now b { font-size: 15px; line-height: 1.15; letter-spacing: -0.01em; }
.sk-stage:not(.is-full) .sk-stage-now span { font-size: 13px; }
.sk-stage:not(.is-full) .sk-chips { display: none; }

/* Full screen: a sage bar with play/pause and every sound as a chip */
.sk-stage.is-full .sk-stage-bar {
    position: absolute; z-index: 2; left: 50%; bottom: max(18px, env(safe-area-inset-bottom));
    transform: translateX(-50%); width: min(calc(100% - 32px), 1120px);
    display: grid; grid-template-columns: auto minmax(0, 15rem) minmax(0, 1fr); align-items: center; gap: 12px 18px;
    padding: 10px 14px 10px 10px; border-radius: 28px;
    box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.6);
    transition: opacity .5s var(--ease), transform .5s var(--ease-out);
}
.sk-stage-bar .sk-play { width: 52px; height: 52px; margin: 0; }
.sk-stage-bar .sk-play .ch-i { width: 22px; height: 22px; }
.sk-stage-now { display: grid; gap: 5px; min-width: 0; }
.sk-stage-now b, .sk-stage-now span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-stage-now b { font-weight: 600; font-size: 21px; line-height: 1.1; letter-spacing: -0.016em; }
.sk-stage-now span { font-size: 13px; line-height: 1.3; color: var(--p-fg-2); }
.sk-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sk-chip {
    min-height: 34px; padding: 0 13px; border: 0; border-radius: 980px;
    background: var(--p-fill); color: var(--p-fg-2);
    font: 500 13px/1 var(--font); white-space: nowrap; cursor: pointer;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    transition: background-color .3s var(--ease), color .3s var(--ease);
}
.sk-chip:hover { color: var(--p-fg); background: var(--p-fill-2); }
.sk-chip[aria-pressed="true"] { background: var(--ch-ink); color: var(--ch-sage); }
.sk-chip:focus-visible { outline: 2px solid var(--p-fg); outline-offset: 2px; }

/* idle in full screen: controls and cursor step aside */
.sk-stage.is-full[data-ui="off"] { cursor: none; }
.sk-stage.is-full[data-ui="off"] .sk-stage-top,
.sk-stage.is-full[data-ui="off"] .sk-stage-bar { opacity: 0; pointer-events: none; }
.sk-stage.is-full[data-ui="off"] .sk-stage-top > * { pointer-events: none; }
.sk-stage.is-full[data-ui="off"] .sk-stage-bar { transform: translate(-50%, 12px); }

.sk-stage:fullscreen { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; border-radius: 0; }
.sk-stage:-webkit-full-screen { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; border-radius: 0; }
.sk-stage::backdrop { background: #000; }
.sk-stage.is-fs {
    position: fixed; inset: 0; z-index: 9000; width: 100vw; height: 100vh; height: 100dvh;
    max-height: none; aspect-ratio: auto; border-radius: 0;
}
html.sk-fs-lock, html.sk-fs-lock body { overflow: hidden; }

/* ── The mixer: the sounds, and the deck beside them ─────────────── */
.sk-mixer {
    display: grid; grid-template-columns: minmax(0, 1fr); align-items: start;
    gap: clamp(28px, 3vw, 40px); padding-top: clamp(48px, 6vw, 88px);
}
@media (min-width: 1080px) { .sk-mixer { grid-template-columns: minmax(0, 1fr) 404px; } }
.sk-sounds { container: sounds / inline-size; min-width: 0; }
.sk-sounds-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 20px; }
.sk-sounds-head h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.022em; font-weight: 600; }
.sk-sounds-head p { color: var(--fg-3); font-size: 17px; }

/* Sound tiles: a small picture, the name, its takes, its level */
/* The whole tile plays and stops its sound (its button lies under all of it); the takes and the level sit over it, beside the picture.
   12 sounds sit in 4, 3 or 2 columns, by the room the mixer gives them. */
.sk-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@container sounds (min-width: 940px) { .sk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sk-sound {
    --ic: 60px; --pad: 14px; --ic-top: calc(50% - var(--ic) / 2);
    position: relative; min-width: 0;
    display: grid; grid-template-columns: calc(var(--ic) + 2 * var(--pad)) minmax(0, 1fr);
    grid-template-rows: calc(var(--pad) + 28px) 1fr auto 8px;       /* the name · the takes · the level (kept at the foot) · a margin */
    border-radius: 20px; background: var(--bg-2);
    transition: background-color .5s var(--ease), box-shadow .5s var(--ease);
}
.sk-sound:hover { background: var(--bg-3); }
.sk-sound-toggle {
    grid-area: 1 / 1 / -1 / -1; position: relative; display: block;
    width: 100%; min-height: calc(var(--ic) + 2 * var(--pad)); padding: 0; border: 0; border-radius: inherit;
    background: transparent; color: var(--fg); text-align: left; cursor: pointer;
    outline: 2px solid transparent; outline-offset: 2px;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    transition: outline-color .3s var(--ease);
}
.sk-sound-toggle:focus-visible { outline-color: var(--accent); }
.sk-sound-toggle img {
    position: absolute; left: var(--pad); top: var(--ic-top); width: var(--ic); height: var(--ic); display: block;
    border-radius: 14px; object-fit: cover; background: var(--bg-3);
    filter: grayscale(0.5) brightness(0.84);
    transition: filter .8s var(--ease), transform .3s var(--ease);
}
:root[data-palette="snowy-owl"] .sk-sound-toggle img { filter: grayscale(0.5) brightness(1) contrast(0.94); }
.sk-sound-toggle:active img { transform: scale(0.94); }
.sk-scrim { display: none; }
.sk-sound-name {
    position: absolute; left: calc(var(--ic) + 2 * var(--pad)); right: 44px; top: calc(var(--pad) + 2px);
    font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.016em; color: var(--fg);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sk-key {
    position: absolute; top: calc(var(--pad) + 2px); right: var(--pad); display: grid; place-items: center;
    min-width: 22px; height: 20px; padding: 0 4px; border-radius: 6px;
    color: var(--fg-3); background: var(--bg-3);
    font: 500 11px/1 var(--font); font-variant-numeric: tabular-nums;
    transition: background-color .5s var(--ease);
}
.sk-sound:hover .sk-key { background: var(--bg-4); }
@media (hover: none) { .sk-key { display: none; } .sk-sound-name { right: var(--pad); } }
/* playing: a sage dot on the picture's corner */
.sk-on {
    position: absolute; left: calc(var(--pad) + var(--ic) - 9px); top: calc(var(--ic-top) - 3px);
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--ch-sage); box-shadow: 0 0 0 2.5px var(--bg-2);
    opacity: 0; transform: scale(0.4);
    transition: opacity .5s var(--ease), transform .5s var(--ease-out);
}
.sk-on::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--ch-sage); }
/* play / pause over the picture, on hover */
.sk-hover-ic {
    position: absolute; left: calc(var(--pad) + var(--ic) / 2 - 17px); top: calc(var(--ic-top) + var(--ic) / 2 - 17px);
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    background: #FFFFFF; color: #16161A; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.5);
    opacity: 0; transform: scale(0.8);
    transition: opacity .25s var(--ease), transform .3s var(--ease-out);
}
.sk-hover-ic .ch-i { width: 14px; height: 14px; }
.sk-hover-ic .i-pause { display: none; }
@media (hover: hover) {
    .sk-sound-toggle:hover .sk-hover-ic { opacity: 1; transform: scale(1); }
}
.sk-spin {
    position: absolute; left: calc(var(--pad) + var(--ic) / 2 - 14px); top: calc(var(--ic-top) + var(--ic) / 2 - 14px);
    width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,0.3); border-top-color: #FFFFFF;
    opacity: 0; pointer-events: none; transition: opacity .2s;
}

/* playing */
.sk-sound.active { background: color-mix(in srgb, var(--ch-sage) 15%, var(--bg-2)); }
.sk-sound.active .sk-key { background: color-mix(in srgb, var(--ch-sage) 22%, var(--bg-2)); color: var(--fg-2); }
.sk-sound.active img { filter: none; }
.sk-sound.active .sk-on { opacity: 1; transform: scale(1); box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--ch-sage) 15%, var(--bg-2)); }
.sk-sound.active .sk-on::after { animation: sk-ping 3s var(--ease) infinite; }
.sk-sound.active .sk-hover-ic .i-play { display: none; }
.sk-sound.active .sk-hover-ic .i-pause { display: block; }
@keyframes sk-ping { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(2.6); opacity: 0; } }
/* paused with the rest of the mix: a dashed sage edge */
.sk-sound.suspended { background-color: var(--bg-2); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='%23A9CFB6' stroke-width='3' stroke-dasharray='6 7' stroke-linecap='round'/%3e%3c/svg%3e"); box-shadow: none; }
:root[data-palette="snowy-owl"] .sk-sound.suspended { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='%233F7A52' stroke-width='3' stroke-dasharray='6 7' stroke-linecap='round'/%3e%3c/svg%3e"); }
.sk-sound.suspended img { filter: grayscale(0.3) brightness(0.86); }
.sk-sound.suspended .sk-on::after { animation: none; }
/* loading */
.sk-sound.loading .sk-spin { opacity: 1; animation: sk-rot 0.9s linear infinite; }
.sk-sound.loading .sk-hover-ic { opacity: 0 !important; }
@keyframes sk-rot { to { transform: rotate(360deg); } }
.sk-sound.pulse-hint { animation: sk-hint 1.4s var(--ease); }
@keyframes sk-hint { 40% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ch-sage) 45%, transparent); } }

/* the takes and the level, beside the picture (over the tile's button) */
.sk-sound-ctrl { display: contents; }
.sk-takes { grid-area: 2 / 2; position: relative; z-index: 1; pointer-events: none; display: flex; align-items: center; min-width: 0; padding-right: var(--pad); }
.sk-takes-label, .sk-single { display: none; }
.sk-dots { display: flex; justify-content: flex-start; min-width: 0; margin-left: -6px; }
/* each take is a small circle: the sukoon mark, with a roomier hit area */
.sk-take {
    position: relative; display: grid; place-items: center; pointer-events: auto;
    flex: 0 1 22px; min-width: 14px; height: 26px; padding: 0; border: 0; border-radius: 8px;
    background: transparent; cursor: pointer; touch-action: manipulation;
}
.sk-take::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px var(--fg-3);
    transition: background-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.sk-take:hover::before { box-shadow: inset 0 0 0 1.5px var(--fg); transform: scale(1.2); }
.sk-take:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.sk-take[aria-pressed="true"]::before { background: var(--fg-2); box-shadow: none; transform: scale(1.2); }
.sk-sound.active .sk-take[aria-pressed="true"]::before { background: var(--ch-sage-text); }
.sk-take:disabled { cursor: not-allowed; }
.sk-take:disabled::before { box-shadow: inset 0 0 0 1.5px var(--fg-4); background: linear-gradient(135deg, transparent 45%, var(--fg-4) 45% 55%, transparent 55%); }

.sk-vol { grid-area: 3 / 2; position: relative; z-index: 1; pointer-events: none; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px; min-width: 0; padding-right: var(--pad); }
.sk-vol .sk-out { display: none; }
.sk-mute {
    position: relative; pointer-events: auto;
    display: grid; place-items: center; width: 30px; height: 30px; margin-left: -7px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--fg-3); cursor: pointer;
    transition: color .3s var(--ease), background-color .3s var(--ease);
}
.sk-mute:hover { color: var(--fg); background: var(--bg-4); }
.sk-mute:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sk-mute .ch-i { width: 17px; height: 17px; }
.sk-mute .i-mute { display: none; }
.sk-mute[aria-pressed="true"] .i-vol { display: none; }
.sk-mute[aria-pressed="true"] .i-mute { display: block; }
.sk-vol .ch-range { --tint: var(--fg-3); --track: var(--line-2); pointer-events: auto; }
.sk-sound.active .sk-vol .ch-range { --tint: var(--ch-sage-text); }

/* two columns (phones): the picture smaller, at the top, its name beside it; the takes and the level across the tile under them */
@container sounds (max-width: 600px) {
    .sk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .sk-sound {
        --ic: 46px; --pad: 12px; --ic-top: var(--pad);
        grid-template-columns: minmax(0, 1fr); grid-template-rows: calc(var(--ic) + var(--pad) + 4px) 1fr auto 6px;
        border-radius: 18px;
    }
    .sk-sound-toggle img { border-radius: 12px; }
    .sk-sound-name {
        left: calc(var(--ic) + var(--pad) + 10px); right: var(--pad); top: var(--pad); height: var(--ic);
        display: flex; align-items: center; white-space: normal; font-size: 16px; line-height: 1.15;
    }
    .sk-key { display: none; }
    .sk-takes, .sk-vol { grid-column: 1; padding-inline: 12px; }
    .sk-dots { margin-left: -5px; }
    .sk-hover-ic { width: 30px; height: 30px; left: calc(var(--pad) + var(--ic) / 2 - 15px); top: calc(var(--ic-top) + var(--ic) / 2 - 15px); }
}

/* the room's few lines under the sounds */
.sk-stage-cap { margin-top: 24px; color: var(--fg-2); font-size: 16px; line-height: 1.55; max-width: 68ch; text-wrap: pretty; }
.sk-stage-tip { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 14px; white-space: nowrap; color: var(--fg-3); }
.sk-stage-tip .ch-kbd { min-width: 22px; height: 22px; padding: 0 6px; font-size: 11.5px; }
/* on a phone the room's few lines fold to three, with a More */
.sk-cap-more { display: none; }
@media (max-width: 640px) {
    .sk-stage-cap:not(.is-open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
    .sk-cap-more:not([hidden]) {
        display: inline-flex; align-items: center; min-height: 36px; margin: 2px 0 0 -10px; padding: 0 10px; border: 0; border-radius: 980px;
        background: transparent; color: var(--accent); font: 400 15px/1 var(--font); cursor: pointer; touch-action: manipulation;
    }
    .sk-cap-more:hover { text-decoration: underline; }
    .sk-cap-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
}
@media (hover: none) { .sk-stage-tip { display: none; } }

/* ── Deck: the sage "now playing" panel ──────────────────────────── */
.sk-deck {
    container: deck / inline-size;
    position: relative; display: grid; gap: 24px;
    padding: clamp(22px, 2.6vw, 30px); border-radius: var(--radius-lg);
    isolation: isolate; overflow: hidden;
}
@media (min-width: 1080px) { .sk-deck { position: sticky; top: 24px; margin-top: 62px; } }
.sk-deck-top {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    font-size: 14px; line-height: 1.2; font-weight: 500; color: var(--p-fg-2); font-variant-numeric: tabular-nums;
}
.sk-state { display: inline-flex; align-items: center; gap: 10px; }
.sk-led {
    width: 8px; height: 8px; border-radius: 50%;
    background: transparent; box-shadow: inset 0 0 0 1.5px var(--p-fg-3);
    transition: background-color .5s var(--ease), box-shadow .5s var(--ease);
}
.sk[data-mix="on"] .sk-led { background: var(--ch-ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ch-ink) 14%, transparent); animation: sk-blink 3.2s ease-in-out infinite; }
.sk[data-mix="paused"] .sk-led { background: var(--p-fg-3); box-shadow: none; }
@keyframes sk-blink { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--ch-ink) 0%, transparent); } }
.sk-clock { display: inline-flex; align-items: center; gap: 10px; }
.sk-clock b { font-weight: 600; font-size: 15px; color: var(--p-fg); min-width: 5ch; text-align: right; }
.sk-keys-btn { width: 36px; min-height: 36px; margin: -8px -8px -8px 0; background: transparent; color: var(--p-fg-2); }
@media (hover: none) { .sk-keys-btn { display: none; } }
.sk-save-warn { font-size: 14px; color: var(--gold) !important; }

.sk-deck-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(18px, 3vw, 34px); align-items: center; }

/* The rings */
.sk-rings { width: clamp(150px, 17vw, 210px); aspect-ratio: 1; display: block; overflow: visible; }
.sk-ring {
    fill: none; stroke: var(--ch-ink); stroke-opacity: 0.12; stroke-width: 1;
    transform-box: fill-box; transform-origin: center;
    transition: stroke-width 1s var(--ease), stroke-opacity 1s var(--ease);
}
.sk-ring.is-on {
    stroke-opacity: 0.85; stroke-width: var(--w, 3);
    stroke-dasharray: var(--dash, 4 2); stroke-linecap: round;
    animation: sk-spin var(--spd, 40s) linear infinite;
}
.sk[data-mix="paused"] .sk-ring.is-on { stroke-opacity: 0.4; animation-play-state: paused; }
.sk-core { fill: var(--ch-ink); transform-box: fill-box; transform-origin: center; }
.sk[data-mix="on"] .sk-core { animation: sk-core 6s ease-in-out infinite; }
@keyframes sk-spin { to { transform: rotate(360deg); } }
@keyframes sk-core { 50% { transform: scale(1.5); } }

.sk-now { display: grid; gap: 10px; min-width: 0; }
.sk-now-title { font-size: clamp(34px, 3.4vw, 44px); line-height: 1.04; letter-spacing: -0.028em; font-weight: 600; text-wrap: balance; }
.sk-now-mix { color: var(--p-fg-2); font-size: 15px; line-height: 1.45; min-height: 1.45em; text-wrap: pretty; }
.sk-transport { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sk-push { margin-left: auto; }
.sk-deck .ch-btn:disabled { opacity: 0.55; }
.sk-play {
    display: inline-grid; place-items: center; flex-shrink: 0;
    width: 64px; height: 64px; margin-right: 6px; border: 0; border-radius: 50%;
    background: var(--ch-ink); color: var(--ch-sage); cursor: pointer;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.sk-play:hover { transform: scale(1.04); }
.sk-play:active { transform: scale(0.95); }
.sk-play:focus-visible { outline: 2px solid var(--ch-ink); outline-offset: 4px; }
.sk-play .ch-i { width: 26px; height: 26px; }
.sk-play .i-pause { display: none; }
.sk[data-mix="on"] .sk-play .i-play { display: none; }
.sk[data-mix="on"] .sk-play .i-pause { display: block; }

.sk-deck-foot {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 28px; align-items: center;
    padding-top: 20px; border-top: 1px solid var(--p-line);
}
.sk-ctl-label { font-size: 14px; font-weight: 500; line-height: 1; color: var(--p-fg-2); white-space: nowrap; }
.sk-master { display: grid; grid-template-columns: auto minmax(0, 1fr) 3.4ch; gap: 14px; align-items: center; }
.sk-master .ch-range { --tint: var(--ch-ink); }
.sk-out { font-size: 14px; font-weight: 500; line-height: 1; color: var(--p-fg); text-align: right; font-variant-numeric: tabular-nums; }
.sk-timer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.sk-timer-custom { display: flex; align-items: center; gap: 6px; }
.sk-timer-custom input {
    width: 80px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 10px;
    background: var(--p-fill); color: var(--p-fg);
    font: 500 15px/1 var(--font); text-align: center; -moz-appearance: textfield;
}
.sk-timer-custom input::-webkit-inner-spin-button, .sk-timer-custom input::-webkit-outer-spin-button { -webkit-appearance: none; }
.sk-timer-custom input::placeholder { color: var(--p-fg-3); }
.sk-timer-custom input:focus-visible { outline: 2px solid var(--p-fg); outline-offset: 2px; }
.sk-timer-custom .ch-btn, .sk-timer-run .ch-btn { min-height: 36px; padding: 0 14px; font-size: 14px; }
.sk-timer-run { display: flex; align-items: center; gap: 10px; }
.sk-countdown { font-size: 16px; font-weight: 600; line-height: 1; color: var(--p-fg); font-variant-numeric: tabular-nums; }
.sk-countdown.is-soon { animation: sk-soon 2s ease-in-out infinite; }
@keyframes sk-soon { 50% { opacity: 0.45; } }
[hidden] { display: none !important; }

/* The deck adapts to its own width */
@container deck (max-width: 620px) {
    .sk-deck-foot { grid-template-columns: minmax(0, 1fr); }
    .sk-timer { justify-content: flex-start; }
    .sk-transport .ch-btn { padding: 0 15px; }
    .sk-transport .sk-mini { width: 44px; padding: 0; }
    .sk-transport .sk-mini span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@container deck (max-width: 470px) {
    .sk-clock > span:first-child { display: none; }
    /* the rings stay whole, beside the title */
    .sk-deck-main { grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; }
    .sk-rings { order: 2; width: clamp(104px, 34cqi, 136px); }
    .sk-transport .ch-btn { width: 44px; padding: 0; }
    .sk-transport .ch-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ── Scenes ──────────────────────────────────────────────────────── */
.sk-scenes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sk-scene {
    width: 100%; height: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 20px;
    padding: 22px 24px; border: 0; border-radius: 22px; text-align: left; cursor: pointer;
    background: var(--bg-2); color: var(--fg);
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    transition: background-color .5s var(--ease), transform .5s var(--ease-out), color .5s var(--ease);
}
.sk-scene:hover { background: var(--bg-3); transform: scale(1.012); }
.sk-scene:active { transform: scale(0.99); }
.sk-scene:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sk-scene[aria-pressed="true"] { background: var(--ch-sage); color: var(--ch-ink); }
.sk-scene-art { grid-row: span 2; display: flex; padding-left: 16px; }
.sk-scene-art img {
    width: 52px; height: 52px; margin-left: -16px; border-radius: 50%; object-fit: cover;
    box-shadow: 0 0 0 3px var(--bg-2); background: var(--bg-3);
    transition: box-shadow .5s var(--ease);
}
.sk-scene:hover .sk-scene-art img { box-shadow: 0 0 0 3px var(--bg-3); }
.sk-scene[aria-pressed="true"] .sk-scene-art img { box-shadow: 0 0 0 3px var(--ch-sage); }
.sk-scene-name { font-size: 21px; font-weight: 600; line-height: 1.15; letter-spacing: -0.018em; align-self: end; }
.sk-scene-sounds { font-size: 14px; line-height: 1.35; color: var(--fg-3); align-self: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-scene[aria-pressed="true"] .sk-scene-sounds { color: color-mix(in srgb, var(--ch-ink) 66%, transparent); }

/* ── Your mixes (three memory slots) ─────────────────────────────── */
.sk-slots-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: clamp(48px, 5vw, 64px) 0 16px; }
.sk-slots-head h3 { font-size: clamp(21px, 2.1vw, 28px); line-height: 1.16; letter-spacing: -0.016em; font-weight: 600; }
.sk-slots-head p { font-size: 17px; color: var(--fg-3); }
.sk-slots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sk-slot { position: relative; display: flex; min-width: 0; }
.sk-slot-main {
    flex: 1; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 14px;
    min-height: 80px; padding: 16px 56px 16px 18px; border: 0; border-radius: 20px; text-align: left; cursor: pointer;
    background: var(--bg-2); color: var(--fg);
    touch-action: manipulation;
    transition: background-color .4s var(--ease);
}
.sk-slot-main:hover { background: var(--bg-3); }
.sk-slot-main:focus-visible, .sk-slot-del:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sk-slot-id {
    grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    font-size: 13px; font-weight: 600; background: var(--bg-3); color: var(--fg-2);
}
.sk-slot-name { font-size: 17px; font-weight: 600; letter-spacing: -0.014em; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-slot-sub { font-size: 14px; line-height: 1.3; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-slot.is-empty .sk-slot-main { background: color-mix(in srgb, var(--bg-2) 55%, transparent); padding-right: 18px; }
.sk-slot.is-empty .sk-slot-main:hover { background: var(--bg-2); }
.sk-slot.is-empty .sk-slot-id { background: transparent; outline: 1.5px dashed var(--line-2); outline-offset: -1.5px; }
.sk-slot.is-empty .sk-slot-name { color: var(--fg-2); }
.sk-slot.is-filled .sk-slot-id { background: var(--ch-sage); color: var(--ch-ink); }
.sk-slot.is-current .sk-slot-main { background: var(--bg-2); box-shadow: inset 0 0 0 1.5px var(--ch-sage-text); }
.sk-slot-del {
    position: absolute; top: 50%; right: 12px; translate: 0 -50%;
    display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%;
    background: transparent; color: var(--fg-3); cursor: pointer;
    transition: background-color .3s var(--ease), color .3s var(--ease);
}
.sk-slot-del:hover { background: var(--bg-4); color: var(--rose); }
.sk-slot-del .ch-i { width: 16px; height: 16px; }

/* ── Why "Sukoon": the word, then the story ──────────────────────── */
.sk-scenes-sec { margin-top: clamp(40px, 5vw, 72px); padding-block: clamp(72px, 9vw, 120px); }
.sk-word-sec { padding-block: clamp(88px, 11vw, 150px) clamp(72px, 9vw, 120px); }
.sk-word-sec .ch-sec-head { margin-bottom: clamp(36px, 4.4vw, 60px); }
.sk-word { display: grid; gap: clamp(36px, 5vw, 80px); align-items: start; }
@media (min-width: 900px) { .sk-word { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.sk-entry { padding: clamp(28px, 3.6vw, 44px); border-radius: var(--radius-lg); display: grid; gap: 20px; }
.sk-entry-ar { font-family: var(--font-ar); font-weight: 600; font-size: clamp(88px, 11vw, 148px); line-height: 1.2; direction: rtl; unicode-bidi: isolate; text-align: right; }
.sk-entry-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; padding-top: 18px; border-top: 1px solid var(--p-line); }
.sk-entry-head b { font-weight: 600; font-size: 32px; line-height: 1; letter-spacing: -0.024em; }
.sk-entry-head span { font-size: 14px; color: var(--p-fg-2); }
.sk-entry ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; counter-reset: sense; }
.sk-entry li { display: grid; grid-template-columns: 1.6em minmax(0, 1fr); font-size: 16px; line-height: 1.5; color: var(--p-fg-2); }
.sk-entry li::before { counter-increment: sense; content: counter(sense) "."; font-weight: 600; color: var(--p-fg); }
.sk-entry li i { font-style: normal; font-weight: 600; color: var(--p-fg); }
.sk-mark { display: inline-block; width: 0.62em; height: 0.62em; margin: 0 0.15em; border-radius: 50%; border: 2px solid currentColor; vertical-align: 0.05em; }

.sk-story { display: grid; gap: 20px; }
.sk-story p { color: var(--fg-2); font-size: 17px; line-height: 1.6; max-width: 58ch; text-wrap: pretty; }
.sk-story .sk-story-lead { max-width: 24ch; margin-bottom: 12px; font-size: clamp(28px, 3.3vw, 40px); line-height: 1.16; letter-spacing: -0.024em; font-weight: 600; color: var(--fg); }
.sk-story .sk-sign { font-size: 14px; color: var(--fg-3); }
.sk-story .ch-btn { justify-self: start; margin-top: 8px; }

/* Sukoon for iPhone: a quiet card, the app peeking out of it */
.sk-ios {
    position: relative; overflow: hidden;
    display: grid; gap: 28px; align-items: center;
    margin-top: clamp(56px, 7vw, 96px); padding: clamp(28px, 4vw, 52px);
    border-radius: var(--radius-lg); background: var(--bg-2); color: var(--fg);
    transition: transform .6s var(--ease-out);
}
.sk-ios:hover { text-decoration: none; transform: scale(1.006); }
@media (min-width: 834px) { .sk-ios { grid-template-columns: minmax(0, 1fr) 280px; padding-block: 0; min-height: 320px; } }
.sk-ios-copy { display: grid; gap: 14px; justify-items: start; padding-block: clamp(0px, 3vw, 44px); }
.sk-ios-copy img { width: 64px; height: 64px; border-radius: 22.5%; box-shadow: 0 0 0 1px var(--line); }
.sk-ios-text { display: block; color: var(--fg-2); font-size: 17px; line-height: 1.47; max-width: 52ch; }
.sk-ios strong { display: block; margin-bottom: 6px; color: var(--fg); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 600; }
.sk-ios .more { margin-top: 4px; }
.sk-ios-phone { display: flex; justify-content: center; align-self: end; justify-self: center; height: 300px; overflow: hidden; }
.sk-ios-phone .phone { --phone-w: 230px; aspect-ratio: auto; height: 470px; padding: 7px; border-radius: 40px; }
.sk-ios-phone .phone img { border-radius: 33px; object-position: top; }
@media (max-width: 833px) { .sk-ios-phone { height: 240px; margin-bottom: calc(-1 * clamp(28px, 4vw, 52px)); } }

/* ── Dock (follows you once the deck is off screen) ──────────────── */
.sk-dock {
    position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 900;
    width: min(760px, calc(100vw - 24px)); min-height: var(--dock-h);
    display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
    padding: 8px 10px 8px 8px; border-radius: 980px;
    box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.55);
    opacity: 0; transform: translate(-50%, 130%); pointer-events: none;
    transition: opacity .5s var(--ease), transform .7s var(--ease-out);
}
.sk-dock.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.sk-dock .sk-play { width: 48px; height: 48px; margin: 0; }
.sk-dock .sk-play .ch-i { width: 20px; height: 20px; }
.sk-dock-state { display: grid; gap: 4px; font-size: 13px; line-height: 1; color: var(--p-fg-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sk-dock-state b { font-weight: 600; color: var(--p-fg); font-size: 15px; }
.sk-dock-mix { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; font-weight: 600; letter-spacing: -0.014em; line-height: 1.2; }
.sk-dock-acts { display: flex; gap: 4px; }
.sk-dock-acts .ch-btn { min-height: 44px; }
.sk-dock-acts .ch-i { transition: transform .4s var(--ease); }
.sk-dock.is-deck-below #sk-dock-up .ch-i { transform: rotate(180deg); }
body.sk-dock-open { --dock-space: calc(var(--dock-h) + 16px); }
html:has(body.sk-dock-open) { scroll-padding-bottom: calc(var(--dock-h) + 40px); }
body.sk-dock-open .ft { padding-bottom: calc(var(--dock-h) + 32px); }

/* Shared-link start: one big, obvious button (a page needs a click before it may play sound) */
.sk-start {
    position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); z-index: 950;
    display: inline-flex; align-items: center; gap: 14px;
    min-height: 60px; padding: 0 28px 0 10px; border: 0; border-radius: 980px;
    background: var(--ch-sage); color: var(--ch-ink); cursor: pointer;
    font: 600 17px/1 var(--font); letter-spacing: -0.012em; box-shadow: 0 24px 48px -18px rgba(0, 0, 0, 0.6);
    transform: translate(-50%, 0);
    animation: sk-rise .8s var(--ease-out) both;
}
.sk-start-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ch-ink); color: var(--ch-sage); }
.sk-start-ic .ch-i { width: 18px; height: 18px; }
.sk-start::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 1.5px solid var(--ch-sage); opacity: 0.6; animation: sk-halo 3s var(--ease) infinite; pointer-events: none; }
.sk-start:focus-visible { outline: 2px solid var(--fg); outline-offset: 8px; }
@keyframes sk-rise { from { opacity: 0; transform: translate(-50%, 30px); } }
@keyframes sk-halo { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.1, 1.3); opacity: 0; } }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1079px) {
    .sk-deck { max-width: 720px; }
}
@media (max-width: 900px) {
    .sk-scenes, .sk-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sk-slots .sk-slot:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .sk-stage { aspect-ratio: 2 / 1; border-radius: 24px; }
    .sk-stage.is-full .sk-stage-bar { grid-template-columns: auto minmax(0, 1fr); }
    .sk-stage.is-full .sk-chips {
        grid-column: 1 / -1; justify-content: flex-start; flex-wrap: nowrap;
        overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 -4px; padding: 0 4px;
    }
    .sk-stage.is-full .sk-chips::-webkit-scrollbar { display: none; }
}
@media (max-width: 640px) {
    .sk-deck { border-radius: 24px; }
    .sk-scenes { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(250px, 80%); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 8px; scrollbar-width: none; }
    .sk-scenes::-webkit-scrollbar { display: none; }
    .sk-scenes li { scroll-snap-align: start; }
    .sk-scenes { grid-auto-columns: minmax(200px, 62%); }
    .sk-scene { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; padding: 18px 20px 20px; }
    .sk-scene-art { grid-row: auto; margin-bottom: 8px; padding-left: 12px; }
    .sk-scene-art img { width: 40px; height: 40px; margin-left: -12px; }
    .sk-scene-name { font-size: 19px; }
    .sk-scene-sounds { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
    .sk-slots { grid-template-columns: minmax(0, 1fr); }
    .sk-slots .sk-slot:last-child:nth-child(odd) { grid-column: auto; }
    .sk-dock { grid-template-columns: auto minmax(0, 1fr) auto; border-radius: 24px; }
    .sk-dock-mix { display: none; }
}
@media (max-width: 560px) {
    .sk-stage { aspect-ratio: 4 / 3; border-radius: 20px; }
}
@media (pointer: coarse) {
    .sk-take { height: 32px; }
    .sk-take::after { content: ""; position: absolute; inset: -6px -1px; }
    .sk-mute::after { content: ""; position: absolute; inset: -7px; }
}
/* the narrowest phones: the scene's top bar, all of it inside the frame (the time of day as its sun or moon alone) */
@media (max-width: 420px) {
    #sk-time-btn { width: 40px; padding: 0; justify-content: center; }
    #sk-time-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sk-recede { transform: none; opacity: 1; }
    .sk-stage.is-loading #sk-room-btn .sk-room-now { animation: none; }
    .sk-ring.is-on, .sk-core, .sk-led, .sk-on::after, .sk-start::after, .sk-countdown.is-soon { animation: none !important; }
    .sk-sound-toggle:active img, .sk-scene:hover, .sk-ios:hover { transform: none; }
    .sk-sound.pulse-hint { animation: none; }
    .sk-start { animation: none; }
}

/* An open scene menu (time of day, or Lofi's rooms) owns the scene: the in-scene player steps aside */
.sk-stage:has(.sk-time-menu:not([hidden])) :is(.sk-stage-bar, .sk-stage-hint),
.sk-stage:has(#sk-style-seg.is-open) :is(.sk-stage-bar, .sk-stage-hint) { opacity: 0; visibility: hidden; }