@layer pages{
  :root{
    --page-image-sm:url("/assets/site/pages/media-hero-1280.webp");
    --page-image-md:url("/assets/site/pages/media-hero-1920.webp");
    --page-image-lg:url("/assets/site/pages/media-hero.webp");
    --ground-edge:url("/assets/site/masks/media-hero.svg");
    --art-w:2560; --art-h:1440;
    --lyrics-x:69.9%; --lyrics-y:19%; --lyrics-w:19.9%; --lyrics-h:52.6%;
    --page-image-run:300px;
  }
  .media-head{min-height:calc(var(--view-height) * .93);justify-content:center}
  .media-head .art-frame{bottom:auto;height:calc(var(--view-width) * 9 / 16)}
  .song-layer{opacity:0;visibility:hidden;transition:opacity 1.4s ease-out,visibility 0s linear 1.4s}
  .song-wave{position:absolute;inset:0;width:100%;height:100%;
    filter:drop-shadow(0 1px 2px rgba(255,255,255,.45))}
  .song-wave *{animation-play-state:paused}
  body.is-singing .song-layer{opacity:1;visibility:visible;transition-delay:0s,0s}
  body.is-singing .song-wave *{animation-play-state:running}
  .s0,.s3{stop-color:var(--song-line);stop-opacity:0}
  .s-mouth{stop-color:var(--song-line);stop-opacity:.18}
  .s1{stop-color:var(--song-line);stop-opacity:.95}
  .s2{stop-color:var(--song-line);stop-opacity:.6}
  .wave-lines path{fill:none;stroke:var(--song-line);stroke:url(#song-fade);stroke-width:4.6;stroke-linecap:round;
    transform-box:view-box;transform-origin:362px 646px;
    animation:wave-sway 3.4s ease-in-out var(--delay) infinite alternate}
  .wave-lines .l1{--turn:-4.2deg;--delay:0s;opacity:.55}
  .wave-lines .l2{--turn:-2.1deg;--delay:-.5s;opacity:.8}
  .wave-lines .l3{--turn:0deg;--delay:-1s;opacity:1}
  .wave-lines .l4{--turn:2.1deg;--delay:-1.5s;opacity:.8}
  .wave-lines .l5{--turn:4.2deg;--delay:-2s;opacity:.55}
  @keyframes wave-sway{
    from{transform:rotate(var(--turn)) translateY(-9px)}
    to  {transform:rotate(var(--turn)) translateY(11px)}}
  .wave-notes{color:var(--song-note)}
  .wave-notes .lane{transform-box:view-box;transform-origin:362px 646px;
    animation:wave-sway 3.4s ease-in-out var(--delay) infinite alternate}
  .wave-notes .l1{--turn:-4.2deg;--delay:0s}
  .wave-notes .l2{--turn:-2.1deg;--delay:-.5s}
  .wave-notes .l3{--turn:0deg;   --delay:-1s}
  .wave-notes .l4{--turn:2.1deg; --delay:-1.5s}
  .wave-notes .l5{--turn:4.2deg; --delay:-2s}
  .wave-notes use{fill:var(--song-note);fill:currentColor}
  .wave-notes .ride{opacity:0;transform-box:view-box;transform-origin:0 0;
    animation:note-fade var(--ride) linear var(--ride-delay) infinite}
  .wave-notes .n1{--ride:7s;  --ride-delay:0s}
  .wave-notes .n2{--ride:8.4s;--ride-delay:-1.4s}
  .wave-notes .n3{--ride:6.4s;--ride-delay:-2.8s}
  .wave-notes .n4{--ride:9s;  --ride-delay:-4.2s}
  .wave-notes .n5{--ride:7.6s;--ride-delay:-5.6s}
  .wave-notes .n6{--ride:8s;  --ride-delay:-7s}
  @keyframes note-fade{
    0%  {opacity:0;scale:.08}
    8%  {opacity:.9;scale:.14}
    22% {opacity:1;scale:.32}
    40% {scale:.6}
    58% {scale:.9}
    80% {opacity:1;scale:.82}
    100%{opacity:0;scale:.55}}
  .mist{position:absolute;left:80.5%;top:60%;width:14.5%;height:17.5%}
  .mist::before{content:"";position:absolute;left:-8%;right:-8%;bottom:14%;height:52%;border-radius:50%;
    background:radial-gradient(closest-side,var(--mist),var(--mist) 30%,var(--mist-mid) 60%,var(--mist-edge) 82%,transparent);
    opacity:var(--mist-strength);animation:mist-breathe 5.2s ease-in-out infinite alternate}
  .mist i{position:absolute;left:var(--x);bottom:var(--from,22%);width:var(--size,34%);aspect-ratio:1.4;
    translate:-50% 0;border-radius:50%;opacity:0;
    background:radial-gradient(closest-side,var(--mist),var(--mist) 16%,var(--mist-mid) 50%,var(--mist-edge) 76%,transparent);
    animation:mist-rise var(--time,7s) ease-out var(--delay,0s) infinite}
  .mist i:nth-child(1) {--x:22%;--size:46%;--time:6.4s;--delay:0s;   --drift:-14%}
  .mist i:nth-child(2) {--x:36%;--size:58%;--time:7.6s;--delay:-1.1s;--drift:-6%}
  .mist i:nth-child(3) {--x:50%;--size:64%;--time:8.2s;--delay:-2.6s;--drift:4%}
  .mist i:nth-child(4) {--x:64%;--size:56%;--time:7s;  --delay:-3.4s;--drift:10%}
  .mist i:nth-child(5) {--x:78%;--size:46%;--time:6.8s;--delay:-4.8s;--drift:16%}
  .mist i:nth-child(6) {--x:30%;--size:72%;--time:9.4s;--delay:-5.5s;--drift:-10%;--from:16%}
  .mist i:nth-child(7) {--x:58%;--size:74%;--time:9s;  --delay:-6.9s;--drift:8%; --from:16%}
  .mist i:nth-child(8) {--x:12%;--size:52%;--time:8.6s;--delay:-2s;  --drift:-18%;--from:14%}
  .mist i:nth-child(9) {--x:88%;--size:50%;--time:8.8s;--delay:-7.8s;--drift:18%;--from:14%}
  .mist i:nth-child(10){--x:44%;--size:60%;--time:7.2s;--delay:-4.1s;--drift:-4%;--from:20%}
  .mist i:nth-child(11){--x:70%;--size:62%;--time:8s;  --delay:-0.7s;--drift:12%;--from:20%}
  .mist i:nth-child(12){--x:52%;--size:80%;--time:10s; --delay:-8.4s;--drift:0%; --from:10%}
  @keyframes mist-rise{
    0%  {opacity:0;transform:translate(0,0) scale(.6)}
    16% {opacity:var(--mist-strength)}
    55% {opacity:calc(var(--mist-strength) * .75)}
    100%{opacity:0;transform:translate(var(--drift),-110%) scale(1.4)}}
  @keyframes mist-breathe{
    from{transform:scale(.94,.9)}
    to  {transform:scale(1.06,1.08)}}
  .art-frame.is-offscreen .mist::before,.art-frame.is-offscreen .mist i{animation-play-state:paused}
  @media (pointer:coarse){.mist i{animation-duration:calc(var(--time,7s) * 1.4)}}
  .lyrics-frame{position:absolute;top:0;left:var(--page-image-left);width:var(--page-image-width);height:var(--page-image-height);z-index:1;
    pointer-events:none;opacity:0;visibility:hidden;transition:opacity 1.4s ease-out,visibility 0s linear 1.4s}
  body.has-lyrics .lyrics-frame{opacity:1;visibility:visible;transition-delay:0s,0s}
  .lyrics-frame::before{content:"";position:absolute;
    left:calc(var(--lyrics-x) - var(--lyrics-w) * .3);top:calc(var(--lyrics-y) - var(--lyrics-h) * .12);
    width:calc(var(--lyrics-w) * 1.6);height:calc(var(--lyrics-h) * 1.24);
    background:radial-gradient(closest-side,var(--lyrics-veil),var(--lyrics-veil) 55%,
      color-mix(in srgb,var(--lyrics-veil) 55%,transparent) 78%,transparent)}
  .lyrics{--lyrics-bleed:32px;position:absolute;
    left:calc(var(--lyrics-x) - var(--lyrics-bleed));top:var(--lyrics-y);
    width:calc(var(--lyrics-w) + var(--lyrics-bleed) * 2);height:var(--lyrics-h);
    padding-inline:var(--lyrics-bleed);overflow:hidden;
    mask:linear-gradient(transparent,black 22%,black 78%,transparent)}
  .lyrics{transition:opacity .3s linear}
  .lyrics.is-leaving{transition:opacity .45s ease-in}
  .lyrics-text{margin:0;white-space:pre-line;font:italic 500 19px/1.6 Jost;letter-spacing:.01em;
    color:var(--heading);text-shadow:var(--lyrics-shadow);will-change:transform;
    transition:transform .3s linear}
  .player{position:relative;z-index:2;width:auto;height:auto;margin-bottom:var(--space-5);
    display:grid;grid-template-columns:minmax(0,300px) auto minmax(0,1fr) auto auto;align-items:center;
    gap:var(--space-4);place-content:normal;text-align:left;
    padding:var(--space-2) var(--space-4);
    background:linear-gradient(135deg,var(--card-solid) 45%,var(--card-solid-dark));
    backdrop-filter:none;box-shadow:var(--card-shadow);
    --ring-fill:linear-gradient(135deg,var(--gold-dark),var(--gold) 45%,var(--gold-dark))}
  .player-now{display:flex;align-items:center;gap:var(--space-3);min-width:0}
  .player-now .painted{width:44px;height:44px;flex:none}
  .player-what{min-width:0}
  .player-label{margin:0;font:500 12px Jost;letter-spacing:.24em;text-transform:uppercase;color:var(--text-muted)}
  .player-song{margin:2px 0 0;font:500 19px Cinzel;letter-spacing:.03em;color:var(--heading);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .player-seek{display:flex;align-items:center;gap:var(--space-2);min-width:0}
  .seek{flex:1;min-width:0;appearance:none;-webkit-appearance:none;height:14px;background:none;cursor:var(--cursor-click)}
  .seek::-webkit-slider-runnable-track{height:4px;border-radius:2px;
    background:linear-gradient(90deg,var(--gold) 0 var(--at,0%),var(--progress-open) var(--at,0%) 100%)}
  .seek::-moz-range-track{height:4px;border-radius:2px;
    background:linear-gradient(90deg,var(--gold) 0 var(--at,0%),var(--progress-open) var(--at,0%) 100%)}
  .seek::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;margin-top:-4.5px;border-radius:50%;
    background:var(--gold-light);box-shadow:0 0 9px var(--button-arrow-glow-dim)}
  .seek::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;
    background:var(--gold-light);box-shadow:0 0 9px var(--button-arrow-glow-dim)}
  .seek:focus-visible{outline:none}
  .seek:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--button-arrow-glow-dim)}
  .seek:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--button-arrow-glow-dim)}
  .player-time{flex:none;min-width:4ch;font:400 13px Jost;color:var(--text);font-variant-numeric:tabular-nums}
  .player-time.muted{color:var(--text-muted);text-align:right}
  .player-keys,.player-tools{display:flex;align-items:center;gap:var(--space-2)}
  .player-tools{gap:var(--space-3)}
  .key{width:40px;height:40px;flex:none;display:grid;place-content:center;padding:0;border:0;
    background:none;color:var(--gold);cursor:var(--cursor-click);will-change:transform;
    transition:color var(--button-ease),transform var(--button-ease)}
  .key svg{width:21px;height:21px;display:block}
  .key:hover,.key:focus-visible{color:var(--gold-light);transform:translateY(-2px)}
  .key:focus-visible{outline:none}
  .key:disabled{color:var(--text-muted);cursor:var(--cursor);transform:none}
  .key-play{width:56px;height:56px;filter:var(--painted-depth);
    background:url("/assets/site/icons/play.webp") center/contain no-repeat}
  .player.is-playing .key-play{background-image:url("/assets/site/icons/pause.webp")}
  .key-play:hover,.key-play:focus-visible{filter:var(--painted-depth) drop-shadow(0 0 10px var(--button-hover-glow))}
  .key-list[aria-expanded="true"]{color:var(--gold-light)}
  .volume{display:flex;align-items:center;gap:var(--space-1);color:var(--gold)}
  .volume svg{width:17px;height:17px;flex:none;opacity:.85}
  .song-list{position:absolute;right:0;bottom:calc(100% + var(--space-2));width:min(440px,100%);
    max-height:min(64vh,520px);overflow:auto;overscroll-behavior:contain;
    padding:var(--space-3);border:var(--border-thin) solid var(--gold-dark);border-radius:var(--image-radius);
    background:linear-gradient(135deg,var(--card-solid) 45%,var(--card-solid-dark));box-shadow:var(--card-shadow)}
  .song-list[hidden]{display:none}
  .song-pick{display:flex;flex-wrap:wrap;gap:var(--space-1);margin:0 0 var(--space-2);
    padding:0 0 var(--space-2);border-bottom:1px solid var(--rule-top)}
  .song-pick-key{font:500 12px Jost;letter-spacing:.1em;color:var(--text-muted);
    padding:4px 10px;border-radius:999px;border:1px solid transparent;background:none;cursor:var(--cursor-click)}
  .song-pick-key:hover,.song-pick-key:focus-visible{color:var(--gold-light)}
  .song-pick-key.is-current{color:var(--gold);border-color:var(--rule-top);background:var(--rule-top)}
  .song-items{list-style:none;margin:0;padding:0}
  .song-items li+li{background:var(--rule-top)}
  .song{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:4px 2px;
    background:none;border:0;cursor:var(--cursor-click);text-align:left;color:var(--text);font:400 16px Jost}
  .song .no{width:22px;flex:none;font-size:13px;color:var(--text-muted);font-variant-numeric:tabular-nums}
  .song .title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .song .length{font-size:13px;color:var(--text-muted);font-variant-numeric:tabular-nums}
  .song:hover .title,.song:focus-visible .title{color:var(--gold-light)}
  .song.is-current .title{color:var(--gold-light)}
  .song.is-current .no{color:var(--gold)}
  .page-body{padding-top:calc(var(--page-image-run) * .72)}
  .reel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
  .kill{display:grid;gap:var(--space-2)}
  .kill video{width:100%;aspect-ratio:16 / 9;border-radius:var(--image-radius);corner-shape:var(--corner-shape);
    background:var(--footer-mid);box-shadow:var(--card-shadow)}
  .kill-line{display:flex;align-items:baseline;gap:var(--space-2)}
  .kill-line h3{margin:0;font:500 19px Cinzel;letter-spacing:.04em;color:var(--heading)}
  .kill-line .level{font:500 12px Jost;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
  .kill-line time{margin-left:auto;font-size:13px;color:var(--text-muted)}
  .gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
  .gallery img{width:100%;aspect-ratio:16 / 10;object-fit:cover;border-radius:var(--image-radius);
    corner-shape:var(--corner-shape);box-shadow:var(--card-shadow)}
  .reel .empty-note,.gallery .empty-note{grid-column:1 / -1;text-align:center}
  @media (max-width:1240px){
    .player{grid-template-columns:minmax(0,220px) auto minmax(0,1fr) auto auto;gap:var(--space-3)}
    .gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
  }
  @media (max-width:900px){
    :root{--page-image-run:110px}
    .media-head{min-height:0}
    .player{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"now keys tools" "seek seek vol";
      gap:var(--space-1) var(--space-2);padding:var(--space-2) var(--space-3)}
    .player-now{grid-area:now}
    .player-keys{grid-area:keys}
    .player-tools{grid-area:tools}
    .player-seek{grid-area:seek}
    .volume{grid-area:vol}
    .player-now .painted{display:none}
    .song-list{top:calc(100% + var(--space-2));bottom:auto}
    .lyrics-frame{display:none}
    .reel{grid-template-columns:minmax(0,1fr)}
    .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (max-width:620px){
    .player-keys{gap:0}
    .volume{display:none}
  }
  body.is-stage{overflow:hidden;max-width:none}
  body.is-stage :is(.site-header,.sticky-bar,.site-footer,.foliage,.forest-ground,.page-title,.page-head-shade){display:none}
  body.is-stage .page-body>:not(.player,audio){display:none}
  body.is-stage main{position:fixed;top:0;left:0;right:0;
    height:100vh;height:100svh;height:var(--stage-h,100svh);
    overflow:hidden;min-height:0;padding:0;margin:0;
    display:flex;flex-direction:column;justify-content:flex-end}
  body.is-stage .media-head{position:absolute;inset:0;z-index:-1;display:block;min-height:0;padding:0;
    container-type:size}
  body.is-stage .page-body{position:static;isolation:auto;margin:0;padding:0;transform:none;animation:none}
  body.is-stage .page-head-image{inset:0;width:auto;height:auto;mask:none}
  body.is-stage .lyrics-frame{z-index:35;display:block;
    left:0;top:calc((100cqh - max(100cqh,100cqw * 9 / 16)) / 2);
    width:max(100cqw,100cqh * 16 / 9);height:max(100cqh,100cqw * 9 / 16)}
  body.is-stage .lyrics-text{font-size:clamp(13px,max(100cqh,100cqw * 9 / 16) * .021,24px)}
  body.is-stage{--lyrics-x:66%;--lyrics-w:27%}
  body.is-stage .lyrics-frame{--kasten-oben:3cqh;--kasten-hoch:calc(97cqh - var(--leiste-h,90px))}
  body.is-stage .lyrics{top:var(--kasten-oben);height:var(--kasten-hoch)}
  body.is-stage .lyrics-frame::before{
    top:calc(var(--kasten-oben) - var(--kasten-hoch) * .12);
    height:calc(var(--kasten-hoch) * 1.24)}
  body.is-stage .song-list{top:auto;bottom:calc(100% + var(--space-2));
    max-height:min(calc(var(--stage-h,100svh) * .6),520px)}
  body.is-stage .player{opacity:1;translate:none;
    position:relative;flex:none;width:auto;margin:0;border-radius:0;
    box-shadow:0 -14px 28px rgba(0,0,0,.7);
    padding-block:var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom));
    padding-inline:calc(var(--page-gutter) + env(safe-area-inset-left))
      calc(var(--page-gutter) + env(safe-area-inset-right))}
  body.is-stage .player::after{inset:0 0 auto;height:1px;border:0;mask:none;
    background:linear-gradient(90deg,transparent,var(--old-gold) 25%,var(--old-gold) 75%,transparent)}
  body.is-stage .player::before{display:none}
  .key-stage .out{display:none}
  body.is-stage .key-stage .in{display:none}
  body.is-stage .key-stage .out{display:block}
  body.is-stage .key-stage{color:var(--gold-light)}
  body.is-stage .player::after{display:none}
  body.is-stage .seek{position:absolute;inset:0 0 auto;z-index:3;width:auto;height:16px;margin-top:-7px}
  body.is-stage .seek::-webkit-slider-runnable-track{height:2px;border-radius:0;
    background:linear-gradient(90deg,var(--gold-light) 0 var(--at,0%),var(--old-gold) var(--at,0%) 100%)}
  body.is-stage .seek::-moz-range-track{height:2px;border-radius:0;
    background:linear-gradient(90deg,var(--gold-light) 0 var(--at,0%),var(--old-gold) var(--at,0%) 100%)}
  body.is-stage .seek::-webkit-slider-thumb{width:20px;height:20px;margin-top:-9px;
    background:transparent;box-shadow:none}
  body.is-stage .seek::-moz-range-thumb{width:20px;height:20px;background:transparent;box-shadow:none}
  body.is-stage .seek:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--button-arrow-glow-dim)}
  body.is-stage .seek:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px var(--button-arrow-glow-dim)}
  body.is-stage .player-seek{flex:none;gap:var(--space-1)}
  body.is-stage .player-time.muted::before{content:"/";margin-right:var(--space-1);color:var(--text-muted)}
  body.is-stage .volume{display:flex;flex:1;min-width:0}
  body.is-stage .vol{flex:1;width:auto;min-width:0;height:22px}
  body.is-stage .vol::-webkit-slider-runnable-track{height:4px}
  body.is-stage .vol::-moz-range-track{height:4px}
  body.is-stage .vol::-webkit-slider-thumb{width:16px;height:16px;margin-top:-6px;
    box-shadow:0 0 9px var(--button-arrow-glow-dim)}
  body.is-stage .vol::-moz-range-thumb{width:16px;height:16px;box-shadow:0 0 9px var(--button-arrow-glow-dim)}
  body.is-stage .volume svg{width:20px;height:20px}
  body.no-volume .volume{display:none}
  body.is-stage.no-volume .player{grid-template-columns:minmax(0,1fr) auto auto auto}
  @media (orientation:landscape) and (min-width:620px){
    body.is-stage.no-volume .player{grid-template-columns:minmax(0,1fr) auto auto auto}
    body.is-stage .player{grid-template-columns:minmax(0,200px) auto auto auto minmax(0,1fr);
      grid-template-areas:none;gap:var(--space-3);
      padding-block:var(--space-1) calc(var(--space-1) + env(safe-area-inset-bottom))}
    body.is-stage :is(.player-now,.player-keys,.player-seek,.player-tools,.volume){grid-area:auto}
  }
  @media (orientation:landscape) and (min-width:1240px){
    body.is-stage .player{grid-template-columns:minmax(0,320px) auto auto auto minmax(0,1fr)}
  }
  @media (orientation:landscape) and (max-height:560px){
    body.is-stage{--lyrics-x:58%;--lyrics-w:36%;--lyrics-y:12%;--lyrics-h:50%}
    body.is-stage .lyrics{--lyrics-bleed:16px}
  }
  @media (orientation:portrait){
    body.is-stage .page-head-image::before{background-position:left center}
    body.is-stage .player{grid-template-areas:"now keys tools" "seek vol vol"}
    body.is-stage.no-volume .player{grid-template-areas:"now keys tools" "seek seek seek"}
    body.is-stage{--lyrics-x:6%;--lyrics-w:88%}
    body.is-stage .lyrics-frame{left:0;top:0;width:100cqw;height:100cqh}
    body.is-stage .lyrics-text{font-size:clamp(14px,4vw,22px);text-align:center}
  }
}