@layer reset, room, objects, scraps, dialog, motion, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { width: 100%; min-height: 100%; margin: 0; }
  button, dialog { font: inherit; }
  button { color: inherit; }
  svg { display: block; width: 100%; height: auto; overflow: visible; }
  :focus-visible { outline: 3px dashed #ffe49a; outline-offset: 7px; }
}

@layer room {
  :root {
    --ink: #111321;
    --midnight: #171a2d;
    --floor: #24273c;
    --floor-light: #303450;
    --paper: #f0e4c9;
    --paper-shadow: #c8b99b;
    --copper: #e39155;
    --copper-dark: #8c4e31;
    --butter: #ffe49a;
    --blue: #8fb6ce;
    --pink: #d99ca7;
    --mint: #8cb9aa;
    --chalk: #e9e1d2;
    --muted: #9da0b3;
    --shadow: rgba(4, 5, 12, 0.42);
  }

  body {
    overflow: hidden;
    background: var(--ink);
    color: var(--chalk);
    font-family: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  }

  .skip-link {
    position: fixed;
    z-index: 1000;
    left: 1rem;
    top: 1rem;
    translate: 0 -200%;
    padding: 0.7rem 1rem;
    background: var(--paper);
    color: var(--ink);
  }

  .skip-link:focus { translate: 0; }

  .playroom {
    position: relative;
    isolation: isolate;
    width: 100%;
    height: 100svh;
    min-height: 34rem;
    overflow: hidden;
    background:
      linear-gradient(90deg, transparent 0 49.8%, rgba(4, 5, 12, 0.13) 49.9% 50.1%, transparent 50.2%) 0 0 / 11.5rem 100%,
      linear-gradient(178deg, var(--floor-light), var(--floor) 48%, #1e2133);
    transition: background-color 700ms ease, filter 700ms ease;
  }

  .playroom::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -4;
    opacity: 0.24;
    background-image:
      radial-gradient(circle at 12% 14%, #fff 0 0.7px, transparent 0.9px),
      radial-gradient(circle at 73% 35%, #fff 0 0.6px, transparent 0.9px),
      radial-gradient(circle at 45% 80%, #fff 0 0.5px, transparent 0.8px);
    background-size: 37px 41px, 53px 61px, 29px 47px;
    mix-blend-mode: soft-light;
    pointer-events: none;
  }

  .playroom::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 80;
    border: clamp(0.35rem, 1vw, 0.8rem) solid rgba(9, 10, 18, 0.46);
    box-shadow: inset 0 0 7rem rgba(2, 2, 7, 0.56);
    pointer-events: none;
  }

  .thread-canvas,
  .floor-glow,
  .floor-scratches {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .thread-canvas { z-index: 5; }

  .floor-glow {
    z-index: -2;
    opacity: 0.18;
    background: radial-gradient(circle at 14% 18%, rgba(255, 224, 154, 0.9), rgba(227, 145, 85, 0.16) 17%, transparent 39%);
    transition: opacity 700ms ease, transform 900ms ease;
  }

  body[data-light="on"] .floor-glow { opacity: 0.82; transform: scale(1.18); }
  body[data-light="on"] .playroom { filter: saturate(1.08) brightness(1.09); }

  .floor-scratches {
    z-index: -1;
    opacity: 0.18;
    background:
      linear-gradient(117deg, transparent 0 36%, rgba(231, 213, 183, 0.28) 36.1% 36.2%, transparent 36.4%),
      linear-gradient(72deg, transparent 0 67%, rgba(231, 213, 183, 0.2) 67.1% 67.2%, transparent 67.4%),
      linear-gradient(168deg, transparent 0 77%, rgba(231, 213, 183, 0.18) 77.1% 77.2%, transparent 77.4%);
  }

  .room-stamp {
    position: absolute;
    z-index: 2;
    right: 2.2rem;
    bottom: 1.4rem;
    margin: 0;
    color: rgba(240, 228, 201, 0.25);
    font: 700 clamp(0.68rem, 1vw, 0.86rem)/1 system-ui, sans-serif;
    letter-spacing: 0.23em;
    text-transform: uppercase;
    transform: rotate(-1.5deg);
  }

  .hello-note {
    position: absolute;
    z-index: 20;
    left: 38%;
    top: 7%;
    display: grid;
    width: clamp(9rem, 14vw, 12.5rem);
    min-height: 7rem;
    place-content: center;
    padding: 1.1rem 1.2rem;
    color: #2b2a30;
    background: var(--paper);
    box-shadow: 0.8rem 1rem 1.6rem var(--shadow);
    transform: rotate(2.5deg);
    clip-path: polygon(1% 4%, 97% 0, 100% 92%, 6% 100%, 0 57%);
  }

  .hello-note::before {
    content: "";
    position: absolute;
    width: 3.4rem;
    height: 0.8rem;
    top: -0.36rem;
    left: 38%;
    background: rgba(255, 228, 154, 0.66);
    transform: rotate(-4deg);
  }

  .hello-note span:first-child { font: italic 1.55rem/1.1 Georgia, serif; }
  .hello-note span:nth-child(2) { margin-top: 0.25rem; font-size: 0.78rem; }
  .hello-note small { margin-top: 0.75rem; color: #76706a; font-size: 0.62rem; }

  .keyboard-help {
    position: absolute;
    z-index: 2;
    left: 1.6rem;
    bottom: 1.2rem;
    width: max-content;
    max-width: calc(100vw - 8rem);
    margin: 0;
    color: rgba(233, 225, 210, 0.42);
    font-size: 0.62rem;
    letter-spacing: 0.03em;
  }

  .noscript-note {
    position: absolute;
    z-index: 50;
    left: 50%;
    bottom: 1rem;
    translate: -50% 0;
    padding: 0.6rem 0.8rem;
    background: var(--paper);
    color: var(--ink);
    font-size: 0.68rem;
    transform: rotate(-1deg);
  }

  .not-found {
    display: grid;
    min-height: 100svh;
    place-items: center;
    overflow: hidden;
    background:
      radial-gradient(circle at 50% 42%, rgba(227,145,85,0.2), transparent 24rem),
      repeating-linear-gradient(90deg, transparent 0 10rem, rgba(4,5,12,0.13) 10.05rem 10.2rem),
      linear-gradient(#303450, #1d2032);
  }

  .not-found main { width: min(90vw, 32rem); text-align: center; }
  .not-found p { color: var(--muted); font-size: 0.7rem; letter-spacing: 0.2em; }
  .not-found h1 { margin: 0.8rem auto 2rem; font: italic clamp(2rem, 8vw, 4rem)/0.96 Georgia, serif; }
  .not-found a { display: inline-grid; min-height: 44px; place-items: center; padding: 0.6rem 0.9rem; border: 1px dashed rgba(240,228,201,0.5); color: var(--paper); }
  .lost-coin { width: 8rem; aspect-ratio: 1; display: grid; margin: 0 auto 1rem; place-items: center; border: 0.7rem double var(--copper-dark); border-radius: 50%; background: var(--copper); color: #713b28; box-shadow: 0 1.2rem 1rem var(--shadow); font: 700 4rem/1 Georgia, serif; transform: rotate(12deg); }
}

@layer objects {
  .object {
    --dx: 0px;
    --dy: 0px;
    --turn: 0deg;
    position: absolute;
    z-index: 15;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: grab;
    touch-action: none;
    transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) rotate(calc(var(--rotation) + var(--turn)));
    transform-origin: 50% 60%;
    transition: filter 220ms ease, transform 420ms cubic-bezier(.2,.8,.2,1);
    -webkit-tap-highlight-color: transparent;
  }

  .object:hover,
  .object:focus-visible { z-index: 40; filter: brightness(1.1) saturate(1.12); }
  .object:active { cursor: grabbing; }
  .object.is-dragging { z-index: 60; cursor: grabbing; transition: filter 100ms ease; filter: brightness(1.15) drop-shadow(0 1.1rem 0.9rem rgba(3, 4, 10, 0.38)); }

  .object-label {
    position: absolute;
    left: 50%;
    bottom: -1.4rem;
    z-index: 3;
    width: max-content;
    max-width: 9rem;
    padding: 0.28rem 0.45rem;
    border: 1px solid rgba(240, 228, 201, 0.35);
    background: rgba(17, 19, 33, 0.88);
    color: var(--chalk);
    font-size: 0.58rem;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    translate: -50% 0.35rem;
    transition: opacity 160ms ease, translate 160ms ease;
  }

  .object:hover .object-label,
  .object:focus-visible .object-label { opacity: 1; translate: -50% 0; }

  .object-lamp { --x: 13%; --y: 14%; --size: clamp(7.2rem, 13vw, 11.5rem); --rotation: -2deg; }
  .object-window { --x: 82%; --y: 21%; --size: clamp(11rem, 19vw, 17rem); --rotation: 1deg; aspect-ratio: 1.25; border: clamp(0.7rem, 1.3vw, 1.15rem) solid #443d49; background: #171b37; box-shadow: 0 1.2rem 1.4rem var(--shadow), inset 0 0 2rem #050713; overflow: hidden; }
  .object-clock { --x: 57%; --y: 19%; --size: clamp(5.8rem, 9vw, 8.7rem); --rotation: 4deg; }
  .object-moth { --x: 29%; --y: 28%; --size: clamp(4.4rem, 7vw, 6.6rem); --rotation: -8deg; }
  .object-coin { --x: 51%; --y: 50%; --size: clamp(5.7rem, 9vw, 8.2rem); --rotation: 7deg; perspective: 600px; }
  .object-spool { --x: 33%; --y: 63%; --size: clamp(8rem, 13vw, 12rem); --rotation: -12deg; }
  .object-notebook { --x: 15%; --y: 75%; --size: clamp(8rem, 14vw, 13rem); --rotation: -8deg; }
  .object-matchbox { --x: 66%; --y: 72%; --size: clamp(7.5rem, 12vw, 11rem); --rotation: 5deg; }
  .object-music { --x: 86%; --y: 75%; --size: clamp(7.5rem, 12vw, 11rem); --rotation: -3deg; }

  .object-lamp svg { filter: drop-shadow(0 1.2rem 0.7rem var(--shadow)); }
  .lamp-cord, .lamp-rim, .lamp-pull { fill: none; stroke: #b7a799; stroke-width: 4; stroke-linecap: round; }
  .lamp-shade { fill: #c86f64; stroke: #6f393d; stroke-width: 4; }
  .lamp-bulb { fill: #8f7959; stroke: #4b4140; stroke-width: 3; transition: fill 300ms ease, filter 300ms ease; }
  .lamp-pull-end { fill: var(--copper); }
  body[data-light="on"] .lamp-bulb { fill: var(--butter); filter: drop-shadow(0 0 1.2rem #ffe49a); }

  .window-scene { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(#11152e, #33385b); transition: background 700ms ease; }
  .window-cross::before, .window-cross::after { content: ""; position: absolute; z-index: 3; background: #443d49; box-shadow: 0 0 0 2px rgba(12, 12, 22, 0.3); }
  .window-cross::before { width: 0.65rem; height: 100%; left: calc(50% - 0.325rem); top: 0; }
  .window-cross::after { width: 100%; height: 0.65rem; top: calc(50% - 0.325rem); left: 0; }
  .moon { position: absolute; width: 2.7rem; aspect-ratio: 1; right: 13%; top: 12%; border-radius: 50%; background: var(--butter); box-shadow: 0 0 1.7rem rgba(255, 228, 154, 0.5); transition: translate 700ms ease, background 700ms ease; }
  .star { position: absolute; width: 0.28rem; aspect-ratio: 1; border-radius: 50%; background: #fff5cf; box-shadow: 0 0 0.7rem #fff5cf; }
  .star-one { left: 16%; top: 21%; }
  .star-two { left: 68%; top: 68%; }
  .star-three { left: 35%; top: 72%; }
  .rain { position: absolute; width: 1px; height: 2.8rem; opacity: 0; background: linear-gradient(transparent, var(--blue)); transform: rotate(16deg); }
  .rain-one { left: 21%; top: 10%; }
  .rain-two { left: 59%; top: 32%; }
  .rain-three { left: 81%; top: 57%; }
  .playroom[data-scene="rain"] .window-scene { background: linear-gradient(#222b42, #52657b); }
  .playroom[data-scene="rain"] .moon, .playroom[data-scene="rain"] .star { opacity: 0.14; }
  .playroom[data-scene="rain"] .rain { opacity: 0.8; animation: rain-drop 900ms linear infinite; }
  .playroom[data-scene="sunrise"] .window-scene { background: linear-gradient(#694d67, #d68470 58%, #f1bd83); }
  .playroom[data-scene="sunrise"] .moon { translate: -260% 140%; background: #ffd08a; }
  .playroom[data-scene="sunrise"] .star { opacity: 0; }
  .playroom[data-scene="void"] .window-scene { background: #03040a; }
  .playroom[data-scene="void"] .moon { width: 1rem; background: #03040a; border: 2px solid var(--paper); box-shadow: 0 0 0 0.45rem rgba(240, 228, 201, 0.1); }
  .playroom[data-scene="void"] .star { scale: 1.8; }

  .clock-face { position: relative; display: block; width: 100%; aspect-ratio: 1; border: 0.65rem solid #bdb0a0; border-radius: 50%; background: #e8dec9; box-shadow: 0 1rem 1rem var(--shadow), inset 0 0 0 0.2rem #6c6470; }
  .clock-dot { position: absolute; width: 0.34rem; aspect-ratio: 1; border-radius: 50%; background: #4a4652; }
  .clock-dot-twelve { left: 50%; top: 8%; translate: -50% 0; }
  .clock-dot-three { right: 8%; top: 50%; translate: 0 -50%; }
  .clock-dot-six { left: 50%; bottom: 8%; translate: -50% 0; }
  .clock-dot-nine { left: 8%; top: 50%; translate: 0 -50%; }
  .clock-hand { position: absolute; left: 50%; bottom: 50%; width: 0.18rem; border-radius: 1rem; background: #3a3540; transform-origin: 50% 100%; }
  .clock-hour { height: 25%; transform: translateX(-50%) rotate(var(--hour-angle, 0deg)); }
  .clock-minute { height: 34%; width: 0.11rem; transform: translateX(-50%) rotate(var(--minute-angle, 0deg)); }
  .clock-pin { position: absolute; left: 50%; top: 50%; width: 0.55rem; aspect-ratio: 1; border-radius: 50%; background: var(--copper); translate: -50% -50%; }
  .clock-digital { display: block; width: max-content; margin: 0.35rem auto 0; padding: 0.2rem 0.35rem; color: rgba(233,225,210,0.55); font-size: 0.55rem; }

  .moth-wing { fill: #b7af94; stroke: #665f58; stroke-width: 2.4; transform-origin: 60px 46px; }
  .moth-body { fill: #4f4548; }
  .moth-antenna { fill: none; stroke: #796c65; stroke-width: 2; stroke-linecap: round; }
  .object-moth:hover .moth-wing-left, .object-moth.is-bothered .moth-wing-left { animation: wing-left 180ms ease-in-out 5 alternate; }
  .object-moth:hover .moth-wing-right, .object-moth.is-bothered .moth-wing-right { animation: wing-right 180ms ease-in-out 5 alternate; }
  .object-moth svg { animation: moth-drift 4.8s ease-in-out infinite alternate; }

  .coin { position: relative; display: block; width: 100%; aspect-ratio: 1; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.22,.76,.28,1.25); }
  .coin-face { position: absolute; inset: 0; display: grid; place-items: center; border: 0.55rem double #8e4e2e; border-radius: 50%; background: radial-gradient(circle at 32% 27%, #ffd09b, #db814c 58%, #8e4e2e); color: #713b28; box-shadow: 0 1.1rem 1rem var(--shadow), inset 0 0 0 0.35rem rgba(255,235,183,0.26); backface-visibility: hidden; }
  .coin-face::before { font: 700 2.4rem/1 Georgia, serif; }
  .coin-face::after { position: absolute; bottom: 16%; right: 20%; font-size: 0.55rem; }
  .coin-front::before { content: "p"; }
  .coin-front::after { content: "1"; }
  .coin-back::before, .coin-back::after { content: "?"; }
  .coin-back { transform: rotateY(180deg); }
  .object-coin.is-flipping .coin { animation: coin-flip 900ms cubic-bezier(.25,.75,.3,1.25); }
  .object-coin[data-face="back"] .coin { transform: rotateY(180deg); }
  .coin-answer { position: absolute; left: 50%; top: calc(100% + 0.3rem); width: max-content; translate: -50% 0; color: var(--butter); font-size: 0.68rem; text-shadow: 0 0.35rem 0.6rem #050610; }

  .object-spool svg { filter: drop-shadow(0 1.1rem 0.8rem var(--shadow)); }
  .spool-end { fill: #73564d; stroke: #382f33; stroke-width: 4; }
  .spool-thread { fill: #c7764e; stroke: #7d422f; stroke-width: 4; }
  .spool-lines { fill: none; stroke: #efad79; stroke-width: 3; opacity: 0.8; }
  .spool-hole { fill: #292637; stroke: #a4775f; stroke-width: 4; }
  .object-spool.is-dragging svg { animation: spool-roll 700ms linear infinite; }

  .notebook-cover { position: relative; display: block; width: 100%; aspect-ratio: 0.78; border: 0.35rem solid #355853; border-left-width: 1.1rem; background: #528076; box-shadow: 0.9rem 1rem 1rem var(--shadow), inset 0 0 0 0.18rem rgba(239,228,201,0.18); }
  .notebook-wire { position: absolute; left: -1.45rem; top: 7%; width: 1.4rem; height: 86%; background: repeating-linear-gradient(to bottom, transparent 0 0.55rem, #c8b9a0 0.57rem 0.7rem, transparent 0.72rem 1.2rem); }
  .notebook-title { position: absolute; left: 50%; top: 43%; translate: -50% -50%; color: #e8dcc3; font: italic 3.2rem/1 Georgia, serif; }
  .notebook-doodle { position: absolute; right: 16%; bottom: 12%; color: var(--butter); font-size: 1.2rem; }

  .matchbox { position: relative; display: block; width: 100%; aspect-ratio: 1.65; filter: drop-shadow(0 1rem 0.7rem var(--shadow)); }
  .matchbox-sleeve { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; border: 0.3rem solid #763d35; background: #be6255; color: #f5dfb6; text-transform: uppercase; letter-spacing: 0.09em; transition: translate 550ms cubic-bezier(.2,.9,.2,1); }
  .matchbox-sleeve b { font: 700 0.8rem/0.95 system-ui, sans-serif; }
  .matchbox-sleeve i { position: absolute; right: 12%; top: 16%; font-style: normal; }
  .matchbox-tray { position: absolute; inset: 7% 1%; border: 0.28rem solid #8d7a67; background: #d8c6a9; }
  .matchbox-tray em { position: absolute; left: 20%; width: 62%; height: 0.22rem; background: #b2825e; transform-origin: left center; }
  .matchbox-tray em::after { content: ""; position: absolute; right: -0.34rem; top: -0.18rem; width: 0.55rem; aspect-ratio: 1; border-radius: 50%; background: #562d2c; }
  .matchbox-tray em:nth-child(1) { top: 26%; transform: rotate(4deg); }
  .matchbox-tray em:nth-child(2) { top: 49%; transform: rotate(-5deg); }
  .matchbox-tray em:nth-child(3) { top: 70%; transform: rotate(8deg); }
  .object-matchbox.is-open .matchbox-sleeve { translate: -54% -7%; }

  .music-box { position: relative; display: block; width: 100%; aspect-ratio: 1.25; filter: drop-shadow(0 1rem 0.8rem var(--shadow)); }
  .music-body { position: absolute; inset: 28% 8% 9%; border: 0.3rem solid #60434d; background: #936472; }
  .music-lid { position: absolute; z-index: 2; left: 8%; right: 8%; top: 6%; height: 38%; display: grid; place-items: center; border: 0.3rem solid #60434d; background: #b47b83; color: #f7d999; transform-origin: 50% 100%; transition: transform 500ms ease; }
  .music-key { position: absolute; right: -4%; top: 49%; width: 1.7rem; height: 0.32rem; border-radius: 1rem; background: #d5aa71; transform-origin: left center; }
  .music-key::after { content: ""; position: absolute; right: -0.2rem; top: -0.34rem; width: 0.8rem; aspect-ratio: 1; border: 0.2rem solid #d5aa71; border-radius: 50%; }
  .music-note { position: absolute; z-index: 4; left: 50%; top: 9%; color: var(--butter); opacity: 0; }
  .music-note-two { left: 35%; }
  .music-note-three { left: 68%; }
  .object-music[aria-pressed="true"] .music-lid { transform: rotateX(-52deg); }
  .object-music[aria-pressed="true"] .music-key { animation: key-turn 700ms linear infinite; }
  .object-music[aria-pressed="true"] .music-note { animation: note-rise 1.8s ease-out infinite; }
  .object-music[aria-pressed="true"] .music-note-two { animation-delay: 0.45s; }
  .object-music[aria-pressed="true"] .music-note-three { animation-delay: 0.9s; }

  .tidy-button {
    position: absolute;
    z-index: 70;
    right: 1.4rem;
    top: 1.3rem;
    min-width: 44px;
    min-height: 44px;
    padding: 0.55rem 0.7rem;
    border: 1px dashed rgba(233,225,210,0.36);
    background: rgba(17,19,33,0.45);
    color: rgba(233,225,210,0.55);
    font-size: 0.62rem;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease, color 180ms ease, background 180ms ease;
  }

  .playroom.has-moved .tidy-button { opacity: 1; pointer-events: auto; }
  .tidy-button:hover, .tidy-button:focus-visible { color: var(--paper); background: rgba(17,19,33,0.8); }
}

@layer scraps {
  .scrap-layer, .spark-layer { position: absolute; inset: 0; z-index: 65; pointer-events: none; overflow: hidden; }

  .found-scrap {
    position: absolute;
    width: clamp(8rem, 15vw, 12rem);
    min-height: 4.7rem;
    display: grid;
    place-items: center;
    padding: 1rem;
    border: 0;
    background: var(--paper);
    color: #30303a;
    box-shadow: 0.7rem 0.9rem 1rem var(--shadow);
    font: italic 0.82rem/1.35 Georgia, serif;
    pointer-events: auto;
    cursor: pointer;
    clip-path: polygon(3% 1%, 100% 4%, 96% 100%, 0 94%);
    animation: scrap-arrive 500ms cubic-bezier(.2,.9,.2,1) both;
  }

  .found-scrap::after { content: "×"; position: absolute; right: 0.45rem; top: 0.25rem; color: #8c7d70; font: 0.75rem/1 system-ui, sans-serif; }

  .spark {
    position: absolute;
    width: var(--spark-size, 0.3rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--spark-color, var(--butter));
    box-shadow: 0 0 1rem var(--spark-color, var(--butter));
    animation: spark-out 1.5s ease-out both;
  }

  .toast {
    position: absolute;
    z-index: 75;
    left: 50%;
    bottom: 7%;
    width: max-content;
    max-width: min(90vw, 24rem);
    margin: 0;
    padding: 0.45rem 0.65rem;
    background: rgba(17,19,33,0.75);
    color: var(--paper);
    font-size: 0.67rem;
    text-align: center;
    opacity: 0;
    translate: -50% 0.4rem;
    pointer-events: none;
    transition: opacity 180ms ease, translate 180ms ease;
  }

  .toast.is-visible { opacity: 1; translate: -50% 0; }
}

@layer dialog {
  .notebook-dialog {
    width: min(92vw, 31rem);
    max-height: 90svh;
    padding: 0;
    border: 0;
    overflow: visible;
    background: transparent;
    color: #302f35;
  }

  .notebook-dialog::backdrop { background: rgba(7, 8, 16, 0.76); backdrop-filter: blur(3px); }

  .notebook-page {
    position: relative;
    min-height: 30rem;
    padding: 3.2rem 3rem 2.2rem 4rem;
    background:
      linear-gradient(90deg, transparent 0 3rem, rgba(199,91,91,0.34) 3.05rem 3.12rem, transparent 3.17rem),
      repeating-linear-gradient(to bottom, transparent 0 1.65rem, rgba(89,124,151,0.18) 1.68rem 1.74rem),
      var(--paper);
    box-shadow: 1rem 1.4rem 2rem rgba(2,3,9,0.5);
    transform: rotate(-1deg);
    clip-path: polygon(1% 0, 98% 2%, 100% 96%, 4% 100%, 0 48%);
  }

  .notebook-page::before { content: ""; position: absolute; inset: 0 auto 0 0.85rem; width: 0.7rem; background: repeating-linear-gradient(to bottom, transparent 0 0.85rem, #8c7f72 0.9rem 1.05rem, transparent 1.1rem 1.7rem); }
  .notebook-date { margin: 0 0 2rem; color: #857a70; font-size: 0.7rem; }
  .notebook-page h2 { max-width: 11ch; margin: 0 0 1rem; font: italic clamp(2rem, 6vw, 3.4rem)/0.95 Georgia, serif; letter-spacing: -0.04em; }
  .notebook-page > p:not(.notebook-date, .notebook-sign) { margin: 0.4rem 0; font: italic 1.25rem/1.2 Georgia, serif; }
  .notebook-sketch { width: 100%; margin-top: 1.6rem; }
  .notebook-sketch path, .notebook-sketch circle { fill: none; stroke: #47796d; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .notebook-sketch circle { fill: var(--copper); stroke: none; }
  .notebook-sign { margin: -0.2rem 0 1.5rem; text-align: right; font: italic 2rem/1 Georgia, serif; }
  .notebook-close { min-width: 44px; min-height: 44px; padding: 0.55rem 0.75rem; border: 1px dashed #756d67; background: transparent; color: #4a474a; cursor: pointer; }
}

@layer motion {
  @keyframes rain-drop { from { translate: 0 -120%; } to { translate: -1rem 170%; } }
  @keyframes moth-drift { from { translate: -0.25rem 0.15rem; rotate: -2deg; } to { translate: 0.45rem -0.55rem; rotate: 3deg; } }
  @keyframes wing-left { to { transform: rotateY(65deg) rotateZ(-7deg); } }
  @keyframes wing-right { to { transform: rotateY(-65deg) rotateZ(7deg); } }
  @keyframes coin-flip { 0% { transform: rotateY(0) translateY(0); } 45% { transform: rotateY(810deg) translateY(-3.8rem) rotateX(20deg); } 100% { transform: rotateY(1440deg) translateY(0); } }
  @keyframes spool-roll { to { transform: rotate(360deg); } }
  @keyframes key-turn { to { transform: rotate(360deg); } }
  @keyframes note-rise { 0% { opacity: 0; translate: 0 0; } 25% { opacity: 1; } 100% { opacity: 0; translate: 0 -3.5rem; rotate: 18deg; } }
  @keyframes scrap-arrive { from { opacity: 0; scale: 0.7; translate: 0 2rem; rotate: -12deg; } to { opacity: 1; scale: 1; } }
  @keyframes spark-out { 0% { opacity: 0; scale: 0.3; translate: 0 0; } 20% { opacity: 1; } 100% { opacity: 0; scale: 0; translate: var(--spark-x, 0) var(--spark-y, -3rem); } }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
    .object-moth { transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) rotate(var(--rotation)); }
  }

  @media (forced-colors: active) {
    .playroom, .hello-note, .notebook-page, .found-scrap { forced-color-adjust: auto; }
    .object { border: 1px solid CanvasText; }
    .object-label { opacity: 1; }
  }
}

@layer responsive {
  @media (max-width: 46rem) {
    .playroom { min-height: 30rem; background-size: 7rem 100%, auto; }
    .hello-note { left: 34%; top: 7%; width: 8.4rem; min-height: 6.2rem; padding: 0.85rem; }
    .hello-note span:first-child { font-size: 1.25rem; }
    .hello-note span:nth-child(2) { font-size: 0.68rem; }
    .hello-note small { font-size: 0.54rem; }
    .room-stamp { right: 1rem; bottom: 0.8rem; font-size: 0.58rem; }
    .keyboard-help { left: 0.8rem; bottom: 0.75rem; max-width: 13rem; font-size: 0.52rem; }
    .tidy-button { right: 0.7rem; top: 0.7rem; font-size: 0.56rem; }

    .object-lamp { --x: 17%; --y: 13%; --size: 6.2rem; }
    .object-window { --x: 78%; --y: 17%; --size: 8.5rem; border-width: 0.65rem; }
    .object-clock { --x: 54%; --y: 30%; --size: 5.3rem; }
    .object-moth { --x: 27%; --y: 33%; --size: 4.3rem; }
    .object-coin { --x: 57%; --y: 48%; --size: 5.2rem; }
    .object-spool { --x: 25%; --y: 57%; --size: 6.7rem; }
    .object-notebook { --x: 23%; --y: 79%; --size: 7rem; }
    .object-matchbox { --x: 53%; --y: 73%; --size: 6.8rem; }
    .object-music { --x: 82%; --y: 79%; --size: 6.7rem; }

    .object-label { font-size: 0.52rem; bottom: -1.1rem; }
    .moon { width: 1.7rem; }
    .clock-face { border-width: 0.42rem; }
    .notebook-page { min-height: min(31rem, 86svh); padding: 2.5rem 2rem 1.7rem 3rem; }
    .notebook-page h2 { font-size: clamp(2rem, 10vw, 3rem); }
  }

  @media (max-height: 39rem) and (min-width: 47rem) {
    .hello-note { top: 4%; scale: 0.82; }
    .object-lamp { --y: 16%; --size: 7.5rem; }
    .object-window { --y: 19%; --size: 10.5rem; }
    .object-clock { --y: 18%; --size: 5.5rem; }
    .object-moth { --y: 28%; --size: 4rem; }
    .object-coin { --y: 49%; --size: 5.3rem; }
    .object-spool { --y: 65%; --size: 7rem; }
    .object-notebook { --y: 73%; --size: 7.2rem; }
    .object-matchbox { --y: 72%; --size: 6.8rem; }
    .object-music { --y: 73%; --size: 6.8rem; }

    .notebook-dialog { max-height: 94svh; overflow: auto; }
    .notebook-page { min-height: 0; padding: 1.8rem 2.4rem 1.2rem 3.5rem; }
    .notebook-date { margin-bottom: 0.7rem; }
    .notebook-page h2 { margin-bottom: 0.55rem; font-size: 2.45rem; }
    .notebook-page > p:not(.notebook-date, .notebook-sign) { margin: 0.2rem 0; font-size: 1rem; }
    .notebook-sketch { height: 6.6rem; margin-top: 0.5rem; }
    .notebook-sign { margin: -0.5rem 0 0.4rem; font-size: 1.6rem; }
  }

  @media (max-height: 39rem) {
    .notebook-dialog { max-height: 94svh; overflow: auto; }
    .notebook-page { min-height: 0; padding: 1.5rem 1.6rem 1rem 2.8rem; }
    .notebook-date { margin-bottom: 0.55rem; }
    .notebook-page h2 { margin-bottom: 0.45rem; font-size: 2.15rem; }
    .notebook-page > p:not(.notebook-date, .notebook-sign) { margin: 0.15rem 0; font-size: 0.95rem; }
    .notebook-sketch { height: 5.5rem; margin-top: 0.35rem; }
    .notebook-sign { margin: -0.45rem 0 0.25rem; font-size: 1.45rem; }
  }
}