:root{
  --ink:#eff8f7;--cyan:#16b4dd;--night:#07161a;--panel:rgba(4,22,27,.92);
  --small:14px;--body:17px;--lead:23px;
  --sans:"General Sans",Arial,sans-serif;--serif:Gambarino,Georgia,serif
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--night);color:var(--ink)}
body{font:400 var(--body)/1.48 var(--sans)}
button,input,select{font:inherit}
button{cursor:pointer}
a{color:inherit;text-underline-offset:4px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}
::selection{background:var(--cyan);color:#041216}
.experience{position:relative;height:100svh;min-height:650px;isolation:isolate;overflow:hidden}
.scene,.scene-photo,.scene-veil,#sound-canvas{position:absolute;inset:0}
.scene{z-index:-1;background:var(--night);overflow:hidden}
.scene-photo{opacity:0;overflow:hidden}
.scene-photo.is-active{opacity:1}
.scene-photo img{width:100%;height:100%;object-fit:cover;object-position:center 42%;filter:grayscale(1) contrast(1.12);transform:scale(1.08)}
.scene-photo:nth-child(2) img{object-position:center 35%}
.scene-photo:nth-child(3) img{object-position:center 45%}
.scene-veil{background:rgba(2,18,23,.68)}
#sound-canvas{width:100%;height:100%;pointer-events:none}
.topbar{position:absolute;z-index:4;top:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:26px clamp(20px,3vw,48px)}
.brand{display:block;width:clamp(190px,19vw,250px);flex:none}
.brand img{display:block;width:100%;height:auto}
.source-link{font-size:var(--small);text-decoration:none;color:#e4f6f7;padding:12px 0}
.source-link:hover{text-decoration:underline}
.story{position:absolute;z-index:2;left:clamp(20px,4.2vw,64px);right:clamp(20px,4.2vw,64px);top:clamp(135px,19vh,225px);min-height:310px;display:flex;align-items:flex-start;justify-content:space-between;gap:40px}
.story-content{max-width:min(57vw,730px)}
.story-place{margin:0 0 23px;color:#b8d9df;font-size:var(--small);font-weight:500}
.story-title{font:400 clamp(61px,6.2vw,95px)/.93 var(--serif);letter-spacing:-.035em;margin:0;max-width:11ch;text-wrap:balance}
.story-description{font-size:var(--lead);line-height:1.35;max-width:36ch;margin:29px 0 0;color:#f0faf9}
.story-source{display:inline-block;margin-top:23px;color:#93e5f5;font-size:var(--small)}
.story-figure{min-width:245px;text-align:right;margin-top:75px;color:#d9f7fc}
.story-figure strong{display:block;font:400 clamp(110px,13vw,200px)/.76 var(--serif);letter-spacing:-.07em}
.story-figure span{display:block;font-size:var(--small);margin-top:22px}
.player{position:absolute;z-index:5;left:50%;bottom:clamp(41px,5.6vh,58px);transform:translateX(-50%);width:min(1080px,calc(100% - 56px));padding:25px 31px 22px;background:var(--panel)}
.player-current{display:flex;align-items:center;justify-content:space-between;gap:22px}
.player-heading{display:block;color:#9fd3db;font-size:var(--small)}
.current-copy h2{font:400 clamp(34px,3.4vw,49px)/1 var(--serif);letter-spacing:-.025em;margin:4px 0 4px}
.current-copy p{margin:0;color:#adc8cd;font-size:var(--small)}
.play-button{width:66px;height:66px;border:0;background:var(--cyan);color:#07161a;display:grid;place-items:center;font-size:27px;line-height:1;transition:transform .18s,background .18s}
.play-button:hover{background:#6cdcf3;transform:scale(1.06)}
.play-button:active{transform:scale(.97)}
.play-button:disabled{opacity:.5;cursor:default;transform:none}
.player-progress{display:grid;grid-template-columns:45px 1fr 45px;align-items:center;gap:16px;margin:20px 0 21px;font-size:var(--small);color:#cbdddd;font-variant-numeric:tabular-nums}
.player-progress span:last-child{text-align:right}
input[type=range]{width:100%;accent-color:var(--cyan);cursor:pointer}
.player-bottom{display:flex;align-items:center;justify-content:space-between;gap:22px}
.playlist-controls{display:flex;align-items:center;gap:8px;min-width:0}
.song-select-label{color:#afd4db;font-size:var(--small);margin-right:5px}
.track-arrow{width:39px;height:39px;flex:none;border:0;background:rgba(223,245,247,.13);color:#dffaff;font-size:22px;line-height:1;transition:background .18s,color .18s}
.track-arrow:hover:not(:disabled){background:var(--cyan);color:#06181d}
.track-arrow:disabled{opacity:.4;cursor:default}
#song-select{min-width:190px;max-width:min(37vw,320px);height:39px;padding:0 30px 0 12px;border:0;border-radius:0;background:#193942;color:#eff8f7;cursor:pointer;text-overflow:ellipsis}
#song-select:disabled{opacity:.5;cursor:default}
.player-tools{display:flex;align-items:center;gap:17px;flex:none}
.tool-link{display:inline-flex;align-items:center;min-height:38px;color:#c5f1f8;font-size:var(--small);white-space:nowrap;text-decoration:none;cursor:pointer}
.tool-link:hover{text-decoration:underline;color:#fff}
.volume{display:flex;align-items:center;gap:9px;min-width:137px;font-size:var(--small);color:#c3d8db}
.volume input{width:75px}
.credit{position:absolute;z-index:2;left:clamp(20px,3vw,48px);right:clamp(20px,3vw,48px);bottom:10px;display:flex;justify-content:space-between;gap:18px;color:#c0d5d8;font-size:13px}
.credit a{color:#c0eff9}
@media(max-width:850px){
  .experience{min-height:660px}
  .story{top:125px}
  .story-content{max-width:64vw}
  .story-title{font-size:clamp(52px,7vw,72px)}
  .story-description{font-size:19px;max-width:32ch}
  .story-figure{min-width:150px;margin-top:95px}
  .story-figure strong{font-size:105px}
  .player{width:calc(100% - 34px);padding:22px}
}
@media(max-width:600px){
  .experience{height:100svh;min-height:700px}
  .topbar{padding:16px}
  .brand{width:165px}
  .source-link{font-size:13px;max-width:120px;text-align:right;line-height:1.25}
  .scene-photo img{object-position:45% 40%}
  .scene-photo:nth-child(2) img{object-position:58% 40%}
  .scene-veil{background:rgba(2,18,23,.7)}
    .story{left:20px;right:20px;top:112px;display:block;min-height:0}
  .story-content{max-width:100%}
  .story-place{margin-bottom:13px;font-size:13px}
  .story-title{font-size:clamp(43px,11.3vw,60px);max-width:8ch}
  .story-description{font-size:16px;line-height:1.36;max-width:30ch;margin-top:15px}
  .story-source{margin-top:10px;font-size:13px}
  .story-figure{position:absolute;top:0;right:0;min-width:0;margin:0;text-align:right;opacity:.76}
  .story-figure strong{font-size:70px}
  .story-figure span{font-size:13px;margin-top:8px;max-width:100px}
  .player{bottom:0;width:100%;padding:19px 20px 24px}
  .player-current{align-items:start}
  .current-copy h2{font-size:34px}
  .current-copy p{font-size:13px;line-height:1.3;max-width:24ch}
  .play-button{width:56px;height:56px;flex:none}
  .player-progress{margin:15px 0 16px;gap:9px}
  .player-bottom{display:block}
  .playlist-controls{gap:6px}
  .song-select-label{font-size:13px;margin-right:2px}
  #song-select{flex:1;min-width:0;max-width:none;font-size:13px}
  .track-arrow{width:37px;height:37px}
  .player-tools{justify-content:space-between;gap:9px;margin-top:9px}
  .tool-link,.volume{font-size:13px}
  .volume{min-width:0}
  .volume input{width:55px}
  .credit{display:none}
}
@media(max-height:760px) and (min-width:601px){.story{top:115px}.story-description{font-size:19px;margin-top:16px}.story-figure{margin-top:35px}.player{bottom:25px}}
@media(max-height:760px) and (max-width:600px){.experience{min-height:650px}.story{top:92px}.story-title{font-size:42px}.story-description{font-size:14px}.story-figure strong{font-size:56px}.player{padding-top:12px;padding-bottom:14px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}