/* The landscape stays photographic; the objects have their own transparent edges. */
body { background:#79a9cf url('./assets/bliss.jpg') center center / cover no-repeat fixed; }
body::before { display:none; }
.desk { padding:28px 4vw; }
.stage { width:min(1120px,100%); padding:30px 0; }
.notebook { z-index:2; }
.desk-object { padding:0; min-height:0; border-radius:24px; }
.cd-player { width:clamp(180px,19vw,235px); }
.camcorder { width:clamp(200px,22vw,270px); }
.mailbox { width:clamp(170px,17.5vw,215px); }
.object-photo { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain; filter:drop-shadow(4px 15px 8px #0b201d50); transition:transform .35s cubic-bezier(.2,.65,.25,1),filter .35s; user-select:none; }
.desk-object:hover .object-photo { filter:drop-shadow(4px 22px 10px #0b201d45); }
.cd-player:hover .walkman-photo { transform:rotate(7deg); }
.mailbox:hover .object-photo { transform:rotate(-3deg); }
.camcorder:hover .object-photo { transform:rotate(3deg); }
.object-dialog { overscroll-behavior:contain; }
.object-dialog[open] { animation:room-arrive .28s ease-out both; }
.object-dialog[data-room="music"],.object-dialog[data-room="video"] { background:#e8e6df; }
.object-dialog[data-room="music"] { width:min(620px,calc(100vw - 24px)); }
.object-dialog[data-room="video"] { width:min(850px,calc(100vw - 24px)); }
.object-dialog button,.object-dialog input,.object-dialog select { font-family:var(--ui); }
.object-dialog button { min-height:38px; }
.object-dialog input[type="range"] { cursor:pointer; min-width:0; }
.object-dialog button:disabled { cursor:default; opacity:.4; }
.dialog-head p:empty { display:none; }
.object-dialog[data-room="music"] .dialog-head > div,.object-dialog[data-room="video"] .dialog-head > div { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.dialog-close { margin-left:auto; }
.object-dialog[data-room="mailbox"] { width:min(500px,calc(100vw - 32px)); border:1px solid #d8d0bd; border-radius:3px; box-shadow:0 25px 80px #18292155; }
[data-room="mailbox"] .dialog-inner { padding:28px; }
[data-room="mailbox"] .dialog-head { align-items:center; margin-bottom:24px; }
[data-room="mailbox"] .dialog-head h2 { font-size:24px; }
.mail-links { display:grid; }
.mail-links a { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 2px; font-size:18px; text-decoration:none; border-bottom:1px solid #a4b8c866; transition:padding .2s,color .2s; }
.mail-links a:last-child { border-bottom:0; }
.mail-links a:hover { padding-left:8px; color:#ac4f36; }
.letter-form { margin-top:25px; padding-top:20px; border-top:1px solid #b8af9b; }
.letter-form h3 { margin:0 0 20px; font:700 24px/1.2 Georgia,serif; }
.letter-form label { display:block; margin:14px 0; font:13px/1.5 var(--ui); }
.letter-form label > span { color:#777366; }
.letter-form input,.letter-form textarea,.letter-form select { display:block; width:100%; margin-top:6px; padding:10px; border:1px solid #b8af9b; border-radius:2px; background:#fffef9; color:#262921; font:16px/1.5 var(--ui); }
.letter-form textarea { resize:vertical; min-height:145px; font:18px/1.55 Georgia,serif; }
.letter-delivery { display:flex; align-items:flex-end; flex-wrap:wrap; gap:12px; }
.letter-delivery label { flex:1; min-width:120px; margin:0; }
.letter-delivery button { flex:1; min-width:155px; min-height:46px; padding:10px 12px; border:1px solid #9f9888; border-radius:3px; background:#e9e2cf; color:#292d25; cursor:pointer; font-size:13px; }
.letter-help,.letter-status,#letter-destination { font:13px/1.5 var(--ui); }
.letter-help { margin:12px 0 0; color:#6f6b60; }
.letter-status:empty { display:none; }
#letter-destination { display:inline-block; margin:8px 0; text-underline-offset:3px; }
@keyframes room-arrive { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } }

/* A browser-native skin system: the controls stay real through every skin. */
.retro-player { --shell:#cbd3df; --edge:#738399; --light:#fcffff; --panel:#050f31; --glow:#82d8ff; --ink:#1a2639; padding:13px; border:2px solid var(--edge); border-radius:25px 25px 55px 25px; background:linear-gradient(115deg,var(--light),var(--shell) 26%,var(--light) 28%,var(--shell) 31%,var(--shell) 75%,var(--light)); color:var(--ink); box-shadow:inset 0 0 0 3px #fff7,inset 0 -6px 9px #0003,0 15px 25px #15202a28; transition:background .3s,border-radius .3s; }
.player-titlebar { display:flex; justify-content:space-between; padding:3px 12px 12px; font-size:12px; font-weight:700; letter-spacing:.04em; }
.player-display,.playlist,.tv-idle,.tv-osd,#vhs-time { font-family:var(--digital); }
.playlist button { font-family:var(--digital); }
.player-display { padding:14px 18px 8px; border:4px ridge var(--edge); border-radius:20px 20px 30px 8px; background:radial-gradient(ellipse at 30% 0%,#ffffff20,transparent 65%),var(--panel); color:var(--glow); box-shadow:inset 0 3px 14px #0009; text-shadow:0 0 9px color-mix(in srgb,var(--glow) 40%,transparent); }
.display-top { display:flex; justify-content:space-between; gap:10px; font-size:13px; letter-spacing:.14em; }
.digital-time { display:block; font-size:46px; line-height:1.3; font-variant-numeric:tabular-nums; letter-spacing:-.04em; }
.track-title { margin:0 0 8px; font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#spectrum { display:block; width:100%; height:54px; }
.retro-player label { font-size:14px; }
.retro-player input[type="range"] { accent-color:var(--glow); }
.player-seek { display:flex; align-items:center; gap:12px; margin:14px 4px 8px; }
.player-seek input { flex:1; }
.player-transport { display:flex; flex-wrap:wrap; gap:7px; }
.retro-player button,.load-music,.skin-controls select { border:2px outset var(--light); border-radius:8px; padding:5px 10px; background:linear-gradient(var(--light),var(--shell)); color:var(--ink); cursor:pointer; font-size:15px; }
.retro-player button:active,.retro-player button[aria-pressed="true"] { border-style:inset; background:var(--shell); }
.player-transport #audio-play { width:58px; border-radius:50%; font-size:22px; }
.player-transport #audio-shuffle { margin-left:auto; }
.audio-volume { display:flex; align-items:center; gap:12px; margin:12px 5px; }
.audio-volume input { flex:1; }
.eq-heading,.playlist-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:12px; font-size:13px; letter-spacing:.1em; font-weight:700; }
.equalizer { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; padding:13px 9px; border:2px groove var(--light); margin-top:5px; background:linear-gradient(90deg,#0001,transparent,#0001); }
.equalizer label { display:flex; align-items:center; gap:10px; flex-direction:column-reverse; }
.equalizer input { writing-mode:vertical-lr; direction:rtl; appearance:slider-vertical; width:25px; height:77px; }
.load-music { position:relative; display:block; letter-spacing:0; overflow:hidden; }
.load-music input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.load-music:focus-within { outline:3px solid #ec6545; outline-offset:3px; }
.playlist { list-style:none; margin:8px 0; padding:8px; min-height:64px; max-height:155px; overflow:auto; background:var(--panel); border:2px inset var(--edge); color:var(--glow); }
.playlist li { font-size:15px; }
.playlist button { display:block; width:100%; text-align:left; border:0; background:none; color:var(--glow); border-radius:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.playlist button[aria-current="true"] { background:#ffffff22; }
.playlist-empty { padding:9px; line-height:1.5; }
.local-note { font-size:13px; margin:9px 4px; }
.skin-controls { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; padding:8px 5px 10px; }
.skin-controls select { max-width:180px; margin-left:5px; }
.skin-credit { text-align:center; font-size:13px; line-height:1.5; margin:16px 10px 2px; }
.retro-player[data-skin="darkstar"] { --shell:#24292a; --light:#626c6e; --edge:#090e10; --panel:#080e0c; --glow:#9bff72; --ink:#e5f1e5; border-radius:50px 12px 50px 12px; padding:20px 18px; background:repeating-linear-gradient(130deg,#0000 0 22px,#0003 23px 24px),linear-gradient(120deg,#5b6666,#182022 48%,#424e50); box-shadow:inset 0 0 0 5px #0f1518,0 14px 28px #0004; }
[data-skin="darkstar"] .player-display { border-radius:10px 40px 10px 40px; border-width:7px; }
[data-skin="darkstar"] .player-titlebar { color:#c0efb0; }
[data-skin="darkstar"] .player-transport button { border-radius:2px 12px; }
.retro-player[data-skin="mint"] { --shell:#a9c7aa; --light:#f0f1c9; --edge:#426257; --panel:#142d26; --glow:#d3f393; --ink:#1f382b; border-radius:4px; padding:14px; background:linear-gradient(#f0efd1 0 36px,#a9c7aa 37px); box-shadow:6px 7px 0 #344d3845,inset 0 0 0 2px #fff8; }
[data-skin="mint"] .player-display { border-radius:0; border-width:3px; }
[data-skin="mint"] button,[data-skin="mint"] select,[data-skin="mint"] .load-music { border-radius:0; }

/* CRT screen, loading tape and transport controls are one video interface. */
.television { padding:22px 24px 15px; background:linear-gradient(125deg,#f1f0e8,#aaa9a3 35%,#deddd4 60%,#90918c); border:3px solid #737570; border-radius:35px 35px 17px 17px; box-shadow:inset 3px 3px 2px #fff9,inset -5px -6px 8px #45484490,0 13px 25px #25291e44; }
.tv-screen { position:relative; aspect-ratio:4/3; overflow:hidden; border:13px solid #282e2b; border-radius:45% / 7%; background:#070908; box-shadow:0 0 0 2px #5e625d,0 0 0 4px #dadbd2,inset 0 0 35px #000; }
.youtube-screen,.youtube-screen iframe { display:block; width:100%; height:100%; min-height:200px; border:0; background:#060706; }
.tv-screen { min-height:226px; }
.tv-idle { position:absolute; inset:0; padding:25px; display:flex; flex-direction:column; justify-content:space-between; background:#101473; color:#e6e9fc; font-size:18px; letter-spacing:.07em; text-shadow:2px 0 #8193ed; }
.tv-idle strong { text-align:center; font-size:25px; font-weight:400; }
.tv-osd { position:absolute; bottom:14px; left:18px; right:18px; color:#c0ffb2; font-size:17px; text-shadow:1px 1px #12280a; pointer-events:none; }
.tv-chin { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:19px 8px; font-size:17px; color:#444b44; }
.tv-speaker { width:95px; height:22px; background:repeating-linear-gradient(0deg,#525752 0 1px,transparent 1px 4px); }
.tv-led { width:8px; height:8px; background:#85ed70; border-radius:50%; box-shadow:0 0 6px #cfff8d; }
.vcr-deck { position:relative; background:linear-gradient(#494e4c,#272c29); color:#e9e9dc; padding:15px; border:2px inset #7c807b; border-radius:5px; }
.tape-slot { width:62%; height:24px; margin:0 auto 15px; border:3px inset #5d625d; background:#121512; text-align:center; font-size:12px; letter-spacing:.22em; color:#959d91; }
.vhs-tape { display:block; width:min(300px,90%); margin:0 auto 12px; padding:0; border:0; background:transparent; cursor:pointer; filter:drop-shadow(2px 9px 5px #0007); transition:transform .8s cubic-bezier(.45,0,.4,1),opacity .55s .2s; }
.vhs-tape img { display:block; width:100%; height:auto; max-height:170px; object-fit:contain; user-select:none; }
.vhs-tape:hover { transform:translateY(-4px); }
.vcr-buttons { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.vcr-buttons button { border:2px outset #959b94; border-radius:4px; padding:5px 11px; background:linear-gradient(#767f77,#424c45); color:#fff; cursor:pointer; font-size:16px; }
.vcr-buttons label { display:flex; flex:1 1 150px; align-items:center; gap:8px; font-size:14px; }
.vcr-buttons input { width:80px; flex:1; accent-color:#b2d8a0; }
.vhs-progress { display:flex; align-items:center; gap:10px; font-size:14px; margin-top:12px; }
.vhs-progress input { flex:1; accent-color:#b2d8a0; }
#vhs-time { display:block; text-align:right; color:#b2d8a0; font-size:14px; margin-top:5px; }
[data-tape="loading"] .vhs-tape { transform:translateY(-45px) scale(.82,.12); opacity:0; pointer-events:none; }
[data-tape="loading"] .tv-idle { background:#070918; }
[data-tape="loaded"] .vhs-tape,[data-tape="error"] .vhs-tape { display:none; }
[data-tape="loaded"] .tv-idle,[data-tape="error"] .tv-idle { display:none; }
.player-transport { align-items:center; margin:14px 4px; }
.spotify-link { margin-left:auto; font-size:14px; text-underline-offset:3px; }
.spotify-embed { min-height:352px; border:2px inset var(--edge); border-radius:12px; overflow:hidden; background:var(--panel); }
.spotify-embed iframe { display:block; width:100%; height:352px; border:0; }
#audio-progress { display:block; width:100%; height:5px; margin:16px 0 8px; accent-color:var(--glow); }
.media-message { font:13px/1.5 var(--ui); margin:10px 4px 0; }
.media-message:empty { display:none; }
.video-fallback { display:inline-block; margin-top:8px; font-size:13px; }
.tape-library { display:flex; align-items:center; gap:10px; margin-top:15px; font-size:14px; }
.tape-library select { width:100%; min-width:0; padding:8px; background:#424c45; color:#fff; border:1px solid #959b94; }
@media (min-width:1000px) {
  .stage { min-height:650px; }
}
@media (max-width:999px) {
  .object-rack { display:grid; grid-template-columns:1fr 1.22fr .94fr; align-items:center; gap:20px; width:min(500px,96%); margin-top:24px; }
  .desk-object { width:100%; }
  .cd-player { transform:rotate(-9deg); }
  .camcorder { transform:translateY(-8px) rotate(5deg); }
  .mailbox { transform:rotate(-3deg); }
  .notebook { margin-block:-35px; transform:scale(.88) rotate(-3deg); transition:transform .85s cubic-bezier(.22,.7,.2,1),margin .85s cubic-bezier(.22,.7,.2,1); }
  .notebook.is-open { margin-block:0; }
}
@media (max-width:650px) {
  .desk { padding:20px 16px; }
  .stage { padding:26px 0 10px; }
  .notebook { margin-block:-33px; }
  .notebook.is-open { margin-block:0; }
  .object-rack { gap:10px; width:min(380px,100%); margin-top:18px; }
  .desk-object { width:100%; min-height:0; }
  .object-dialog[data-room="video"] .dialog-inner { padding:12px; }
  .television { padding:15px 12px 10px; border-radius:25px 25px 12px 12px; }
  .tv-screen { border-width:8px; }
  .tv-idle { padding:16px; font-size:15px; }
  .tv-idle strong { font-size:19px; }
  .tv-speaker { width:60px; }
  .tv-chin { padding:14px 6px; }
  .vcr-deck { padding:10px; }
  .retro-player { padding:10px; }
  .retro-player[data-skin="darkstar"] { padding:16px 10px; }
  .player-titlebar { font-size:12px; padding-left:4px; }
  .player-display { padding:12px; }
  .digital-time { font-size:40px; }
  .skin-controls label { width:100%; }
  .player-transport { gap:4px; }
}
@media (max-width:650px) and (max-height:720px) {
  .notebook:not(.is-open) { transform:scale(.8) rotate(-3deg); margin-block:-55px; }
  .object-rack { width:min(340px,96%); margin-top:12px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }