/* shell/base.css */
* { box-sizing:border-box; }
body { margin:0; min-height:100svh; background:#eceae4; color:var(--ink); font-family:var(--ui); }
body::before { content:''; position:fixed; inset:0; pointer-events:none; opacity:.24; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.2' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
a { color:inherit; }
button { font:inherit; }
a,button { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid #ec6545; outline-offset:7px; }
.desk { min-height:100svh; padding:29px 5vw 22px; display:flex; flex-direction:column; align-items:center; }
.stage { position:relative; width:100%; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; perspective:1900px; padding:38px 0 30px; }
.quote-sticker { left:110px; top:366px; width:230px; min-height:104px; background:#f1e8d4; color:#302b24; border:4px double #776a54; border-radius:2px; transform:rotate(-5deg); cursor:pointer; }
.quote-sticker:hover { transform:rotate(-2deg) translateY(-4px); }
.quote-label { font:700 23px/1.15 'Times New Roman',Times,serif; text-align:center; }
.quote-label small { display:block; margin-top:11px; font:400 10px/1.3 Georgia,serif; letter-spacing:.12em; text-transform:uppercase; }
[hidden] { display:none!important; }
.hint { font:14px var(--ui); color:#6d6e64; margin:0; padding-top:3px; text-align:center; }
.object-rack { display:flex; align-items:flex-end; justify-content:center; flex-wrap:wrap; gap:18px; margin-top:34px; }
.desk-object { width:170px; min-height:132px; position:relative; border:0; background:transparent; color:var(--ink); cursor:pointer; transition:transform .2s ease; }
.desk-object:hover { transform:translateY(-6px) rotate(1deg); }
.object-dialog { width:min(760px,calc(100vw - 32px)); max-height:calc(100svh - 32px); padding:0; border:2px solid #292e29; border-radius:16px; background:var(--paper); color:var(--ink); box-shadow:0 30px 100px #11171075; }
.object-dialog::backdrop { background:#20251e66; backdrop-filter:blur(1.5px); }
.dialog-inner { padding:24px; }
.dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:18px; }
.dialog-head h2 { margin:0; font-size:34px; line-height:1.1; }
.dialog-head p { margin:5px 0 0; color:#6b6e65; font-size:15px; }
.dialog-close { width:38px; height:38px; flex:0 0 auto; border:1px solid #96998f; border-radius:50%; background:#fffdf4; cursor:pointer; font-size:24px; line-height:1; }
@media (min-width:1000px) {
.object-rack { position:absolute; inset:0; margin:0; pointer-events:none; }
.desk-object { position:absolute; pointer-events:auto; }
.desk-object:hover { transform:translateY(-6px) rotate(0); }
}
@media (max-width:650px) {
.desk { padding:23px 22px 18px; }
.stage { padding:37px 0 25px; }
.object-rack { gap:10px; margin-top:27px; }
.desk-object { width:105px; min-height:105px; }
.dialog-inner { padding:18px; }
.quote-sticker { left:65px; right:37px; top:353px; width:auto; min-height:104px; }
.quote-label { font-size:21px; }
}
@media (prefers-reduced-motion:reduce) {
*,*::before,*::after { transition:none!important; scroll-behavior:auto!important; }
}

/* retro.css */
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; }
.desk-object { padding:0; min-height:0; border-radius:24px; }
.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); }
.object-dialog { overscroll-behavior:contain; }
.object-dialog[open] { animation:room-arrive .28s ease-out both; }
.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; }
.dialog-close { margin-left:auto; }
@keyframes room-arrive { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } }
.player-titlebar { display:flex; justify-content:space-between; padding:3px 12px 12px; font-size:12px; font-weight:700; letter-spacing:.04em; }
.playlist{ font-family:var(--digital); }
.playlist button { font-family:var(--digital); }
.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; }
#spectrum { display:block; width:100%; height:54px; }
.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; }
.load-music{ 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; }
.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; }
[data-skin="darkstar"] .player-titlebar { color:#c0efb0; }
[data-skin="darkstar"] .player-transport button { border-radius:2px 12px; }
[data-skin="mint"] button,[data-skin="mint"] select,[data-skin="mint"] .load-music { border-radius:0; }
.youtube-screen,.youtube-screen iframe { display:block; width:100%; height:100%; min-height:200px; border:0; background:#060706; }
.vcr-deck { position:relative; background:linear-gradient(#494e4c,#272c29); color:#e9e9dc; padding:15px; border:2px inset #7c807b; border-radius:5px; }
.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; }
.player-transport { align-items:center; margin:14px 4px; }
.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; }
@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%; }
}
@media (max-width:650px) {
.desk { padding:20px 16px; }
.stage { padding:26px 0 10px; }
.object-rack { gap:10px; width:min(380px,100%); margin-top:18px; }
.desk-object { width:100%; min-height:0; }
.vcr-deck { padding:10px; }
.player-titlebar { font-size:12px; padding-left:4px; }
.digital-time { font-size:40px; }
.player-transport { gap:4px; }
}
@media (max-width:650px) and (max-height:720px) {
.object-rack { width:min(340px,96%); margin-top:12px; }
}
@media (prefers-reduced-motion:reduce) {
*,*::before,*::after { animation:none!important; transition:none!important; }
}

/* scrapbook.css */
.scrapbook-spread { --scrap:#faf9f5; --print:#1c1916; --book-type:'Times New Roman',Times,serif; position:relative; padding:15px 3px 0; isolation:isolate; }
.quote-clipping { position:relative; padding:17px 18px 16px; background:var(--scrap); color:var(--print); box-shadow:1px 2px 3px #33291c20,2px 5px 8px #33291c12; transform:rotate(-1deg); }
.quote-clipping::before,.companion-clipping::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:.055; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23paper)' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
.paper-tape { position:absolute; z-index:2; width:86px; height:27px; left:calc(50% - 43px); top:-12px; background:linear-gradient(94deg,#b7805940,#cfaa7d77 20%,#d5b8898c 65%,#b98d6455); border-inline:1px solid #d2be9166; box-shadow:0 1px 1px #7b63371a; transform:rotate(5deg); pointer-events:none; }
.companion-clipping { position:relative; width:90%; margin:26px 0 2px auto; padding:15px 17px; background:#fcfcfa; box-shadow:1px 2px 4px #40342c20; transform:rotate(1deg); }
.companion-clipping::before { content:''; position:absolute; left:-13px; top:4px; width:47px; height:19px; background:#d1bfa799; transform:rotate(-39deg); pointer-events:none; }
.companion-clipping blockquote { margin:0; color:#1c1916; font:700 21px/1.28 var(--book-type); letter-spacing:0; text-wrap:pretty; overflow-wrap:break-word; }
.companion-clipping p { margin:12px 0 0; color:#302b25; font:italic 14px/1.4 var(--book-type); }
[data-style="aged"] { --scrap:#dec8aa; --print:#3e2d20; }
[data-style="aged"] .quote-clipping { background:linear-gradient(105deg,#9d724c12,transparent 45%,#fff2),var(--scrap); transform:rotate(.8deg); }
[data-style="aged"] .companion-clipping { transform:rotate(-1deg); }
.has-original .quote-clipping { padding:0; background:none; }
.has-original .quote-clipping::before { display:none; }
.quote-image-button { position:relative; display:block; width:100%; padding:0; border:0; background:transparent; cursor:zoom-in; }
.quote-image-button img { display:block; width:100%; height:auto; }
.quote-image-button > span { position:absolute; right:5px; bottom:5px; display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:#fff8e9e6; color:#403527; font:18px/1 var(--hand); box-shadow:0 1px 3px #0002; }
@media (max-width:650px) {
.quote-clipping { padding:15px; }
.companion-clipping { width:94%; padding:15px; }
.companion-clipping blockquote { font-size:20px; }
}

/* desk-v2.css */
.sr-only { position:absolute!important; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.stage { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); align-content:center; align-items:center; justify-items:center; gap:30px 22px; width:min(1160px,100%); min-height:640px; padding:36px 0; }
.object-rack { display:contents; }
.stage .desk-object { position:relative; inset:auto; grid-column:span 2; width:100%; max-width:260px; min-height:0; margin:0; transform:none; }
.stage .my-computer { width:76%; max-width:200px; text-decoration:none; }
.stage .my-computer:focus-visible { outline:2px solid #52615a; outline-offset:7px; border-radius:8px; }
.stage .desk-object:hover { transform:translateY(-6px) rotate(0); }
.stage .object-photo { max-height:none; }
@media(max-width:999px) {
.stage { min-height:580px; gap:32px 20px; }
}
@media(max-width:650px) {
.stage { width:min(430px,100%); grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px 18px; min-height:0; padding:28px 0; }
.stage .my-computer { grid-column:2 / span 2; width:85%; }
}
.quote-image-button > span { font-family:var(--ui); }
.stage .movable-object { touch-action:none; user-select:none; -webkit-user-select:none; cursor:grab; }
.stage .movable-object img { -webkit-user-drag:none; }
.stage .movable-object.is-dragging { cursor:grabbing; transition:none; }

/* interactions.css */
.vcr-deck { width:85%; margin:-1% auto 0; padding:12px 16px; border:1px solid #929798; border-radius:5px; background:linear-gradient(#dce0e0,#a7acac); color:#20292e; box-shadow:0 4px 9px #10221e40; }
.vcr-buttons { gap:8px; }
.vcr-buttons button { min-width:44px; min-height:38px; padding:4px 12px; color:#17212b; font:18px var(--ui); background:linear-gradient(#f2f4f4,#a9afaf); border:1px outset #e3e8e7; border-radius:4px; }
.vcr-buttons button:disabled { opacity:.4; }
.vcr-buttons label{ font:12px var(--ui); }
.vcr-buttons input{ accent-color:#51686d; min-width:0; }
.vcr-buttons label { flex:1; }
@media(max-width:650px) {
.vcr-deck { width:96%; padding:10px; }
.vcr-buttons label { flex-basis:100px; }
}
@font-face { font-family:'Clipping Pica'; src:url('../assets/IMFellDWPica-Regular.ttf') format('truetype'); font-style:normal; font-weight:400; font-display:swap; }
.object-dialog:focus{ outline:none; }

/* Tactile late-1990s controls shared by the desk objects. */
.retro-icon-button {
  --icon-x:0%; --icon-y:0%;
  position:relative; width:58px!important; min-width:58px!important; height:58px!important; min-height:58px!important;
  padding:0!important; border:0!important; border-radius:0!important; background:transparent!important;
  color:transparent!important; box-shadow:none!important; cursor:pointer;
}
.retro-icon-button::before {
  content:""; position:absolute; inset:0; background-image:url('../assets/ui/retro-controls.png');
  background-repeat:no-repeat; background-size:300% 300%; background-position:var(--icon-x) var(--icon-y);
  filter:drop-shadow(0 5px 5px #10171370); transition:transform .14s ease,filter .14s ease;
}
.retro-icon-button:hover::before,.retro-icon-button:focus-visible::before { transform:translateY(-2px); filter:drop-shadow(0 7px 6px #10171388) brightness(1.04); }
.retro-icon-button:active::before { transform:translateY(2px); filter:drop-shadow(0 2px 2px #10171366) brightness(.92); }
.retro-icon-button:focus-visible { outline:2px solid #f7e59d!important; outline-offset:2px; }
.retro-icon-button:disabled { opacity:.45; cursor:default; }
.retro-icon-play { --icon-x:100%; --icon-y:0%; }
.retro-icon-switch { --icon-x:50%; --icon-y:0%; }
.retro-icon-mic { --icon-x:0%; --icon-y:0%; }
.retro-icon-save { --icon-x:0%; --icon-y:50%; }
.retro-icon-back { --icon-x:50%; --icon-y:50%; }
.retro-icon-camera { --icon-x:100%; --icon-y:50%; }
.retro-icon-post { --icon-x:0%; --icon-y:100%; }
.retro-icon-eject { --icon-x:50%; --icon-y:100%; }
.retro-icon-help { --icon-x:100%; --icon-y:100%; }

/* toys.css */
.is-playing-game .dialog-inner { padding:0!important; height:100%; }
.is-playing-game .dialog-head { display:none; }

/* composition desk */
.desk { min-height:100svh; padding:28px 18px 22px; overflow:hidden; }
.stage { position:relative; display:block; width:min(1120px,100%); height:calc(100svh - 50px); min-height:720px; padding:0; }
.object-rack { display:contents; }
.stage .notebook:not(.is-open),.stage .desk-object,.stage .desk-sticker { position:absolute; inset:auto; margin:0; }
.stage .notebook:not(.is-open) { --object-width:min(61vw,68svh,720px); z-index:1; left:50%; top:50%; width:var(--object-width)!important; max-width:none!important; height:auto!important; min-height:0!important; aspect-ratio:3/4; transform:translate(-50%,-50%) rotate(-1.5deg)!important; filter:drop-shadow(8px 22px 16px #071b354f); }
.stage .desk-object,.stage .desk-sticker { z-index:10; width:var(--object-width)!important; max-width:none!important; min-height:0; transform:rotate(var(--object-tilt,0deg))!important; }
.stage .desk-object:hover,.stage .desk-sticker:hover { transform:translateY(-3px) rotate(var(--object-tilt,0deg))!important; }
.stage .desk-object .object-photo { width:100%; max-height:none; }
.stage .cd-player { --object-width:min(20vw,190px); --object-tilt:-5deg; left:24%; top:7%; }
.stage [data-object="etch"] { --object-width:min(24vw,245px); --object-tilt:2deg; left:58%; top:5%; }
.stage [data-object="board"] { --object-width:min(20vw,205px); --object-tilt:-3deg; left:20%; top:32%; }
.stage [data-sticker="creator"] { --object-width:max-content; --object-tilt:-3deg; left:43%; top:48%; }
.stage [data-sticker="clay"] { --object-width:min(15vw,148px); --object-tilt:3deg; left:calc(43% + 116px); top:47%; }
.stage [data-object="photos"] { --object-width:min(18vw,175px); --object-tilt:-7deg; left:24%; top:57%; }
.stage [data-object="mailbox"] { --object-width:min(17vw,165px); --object-tilt:-4deg; left:64%; top:57%; }
.stage [data-object="games"] { --object-width:min(13vw,125px); --object-tilt:-8deg; left:44%; top:70%; }
.stage [data-object="video"] { --object-width:min(20vw,195px); --object-tilt:4deg; left:24%; top:77%; }
.stage .my-computer { --object-width:min(22vw,215px); --object-tilt:3deg; left:63%; top:75%; }
.stage .creator-sticker { display:block; box-sizing:content-box; max-width:max-content!important; padding:9px 11px!important; background:#fff5c9; color:#292820; box-shadow:2px 5px 5px #1928214a; font:21px/1.02 var(--hand); text-align:center; white-space:nowrap; cursor:grab; }
.stage .desk-sticker.clay-sticker { display:flex; align-items:center; justify-content:center; padding:8px 12px!important; border-radius:12px; background:#fffef8; box-shadow:2px 5px 5px #1928214a; cursor:grab; }
.stage .desk-sticker.clay-sticker img { display:block; width:100%!important; height:auto!important; object-fit:contain; }
.stage:has(.notebook.is-open) { height:auto!important; min-height:640px; overflow:visible; }
.stage:has(.notebook.is-open) .desk-sticker { display:none; }
.object-resizer { position:absolute; z-index:60; right:-9px; bottom:-9px; width:30px; height:30px; border:0; opacity:0; cursor:nwse-resize; filter:drop-shadow(0 1px 1px #1020308c); transition:opacity .16s; }
.object-resizer::before { content:''; position:absolute; right:5px; bottom:5px; width:10px; height:10px; border-right:1px solid #ffffffd0; border-bottom:1px solid #ffffffd0; border-radius:0 0 3px; }
.object-resizer::after { content:''; position:absolute; right:9px; bottom:9px; width:5px; height:5px; border-right:1px solid #ffffffa8; border-bottom:1px solid #ffffffa8; }
.movable-object:hover>.object-resizer,.movable-object:focus-within>.object-resizer,.movable-object.is-resizing>.object-resizer { opacity:.46; }
.stage .movable-object.is-dragging,.stage .movable-object.is-resizing { transition:none!important; }
.stage .movable-object.is-resizing { cursor:nwse-resize; }
.notebook.is-open>.object-resizer { display:none; }
@media(hover:none) { .object-resizer { opacity:.24; } }
@media(max-width:650px) {
  .desk { padding:42px 8px 12px; overflow-x:hidden; overflow-y:auto; }
  .stage { width:100%; height:760px; min-height:760px; }
  .stage .notebook:not(.is-open) { --object-width:min(91vw,430px); top:50%; }
  .stage .cd-player { --object-width:29vw; left:18%; top:7%; }
  .stage [data-object="etch"] { --object-width:32vw; left:57%; top:6%; }
  .stage [data-object="board"] { --object-width:24vw; left:12%; top:31%; }
  .stage [data-sticker="creator"] { --object-width:max-content; left:35%; top:48%; }
  .stage .creator-sticker { padding:7px 8px!important; font-size:16px; }
  .stage [data-sticker="clay"] { --object-width:23vw; left:calc(35% + 100px); top:47%; }
  .stage [data-object="photos"] { --object-width:27vw; left:12%; top:58%; }
  .stage [data-object="mailbox"] { --object-width:25vw; left:65%; top:57%; }
  .stage [data-object="games"] { --object-width:17vw; left:42%; top:70%; }
  .stage [data-object="video"] { --object-width:26vw; left:12%; top:77%; }
  .stage .my-computer { --object-width:27vw; left:64%; top:76%; }
}

/* Resize corrections must measure settled geometry; retain the small hover lift. */
.stage.is-laying-out .movable-object { transition:none!important; }

/* Phone pull-to-close: the sheet follows the finger, then springs or slides away. */
.object-dialog { transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .3s ease; }
.object-dialog.is-pulling { transition:none; }

/* Quiet physical keycaps mark the same left/right gesture across collections. */
.keyboard-shuffle { display:none; }
@media (hover:hover) and (pointer:fine) and (min-width:701px) {
  .keyboard-shuffle:not([hidden]) { display:flex; justify-content:center; gap:5px; margin:12px auto 4px; color:#f2e9d6; opacity:.55; pointer-events:none; }
  .keyboard-shuffle kbd { display:grid; place-items:center; width:23px; height:20px; border:1px solid currentColor; border-bottom-width:3px; border-radius:4px; font:13px/1 Arial,sans-serif; }
  .notebook .keyboard-shuffle { color:#625c4e; }
}

/* Cursor art has SVG sources in assets/cursors; native cursors stay precise and
   leave touch, text editing, resize handles, and grab states alone. */
@media (hover:hover) and (pointer:fine) {
  html,body { cursor:url('../assets/cursors/arrow.png') 2 2,auto; }
  .desk-object,.site-mark,.view-switcher a,.object-return,.dialog-close { cursor:url('../assets/cursors/hand.png') 13 3,pointer; }
}