Clockmaker's Observatory source

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="color-scheme" content="light dark">
<title>Clockmaker's Observatory</title>
<!--css-->
<main class="stage" aria-label="A clockmaker's observatory beneath a copper dome: a brass telescope, a moving four-planet orrery, instrument shelves and a workbench crowded with books, charts and tools.">
  <h1 class="scene-title">The clockmaker's<br><span>observatory</span><small>A little room for a very large universe</small></h1>
  <input class="control-input" type="checkbox" id="pause">
  <input class="control-input" type="checkbox" id="lamp" checked>
  <div class="room" aria-hidden="true">
    <div class="dome">
      <i class="rib" style="--angle:-72deg"></i><i class="rib" style="--angle:-48deg"></i><i class="rib" style="--angle:-24deg"></i>
      <i class="rib" style="--angle:0deg"></i><i class="rib" style="--angle:24deg"></i><i class="rib" style="--angle:48deg"></i><i class="rib" style="--angle:72deg"></i>
    </div>
    <div class="sky-window"><div class="moon"></div><div class="constellation"><svg viewBox="0 0 100 80"><path d="M9 61 28 44 39 52 57 22 81 10 90 30M28 44 25 18"/><g><circle cx="9" cy="61" r="1.3"/><circle cx="28" cy="44" r="1.8"/><circle cx="39" cy="52" r="1.3"/><circle cx="57" cy="22" r="1.8"/><circle cx="81" cy="10" r="1.4"/><circle cx="90" cy="30" r="1"/><circle cx="25" cy="18" r="1.2"/></g></svg></div></div>
    <div class="wall"></div>
    <div class="floor"></div>
    <div class="wall-clock prop" data-prop="wall clock">
      <div class="clock-face"><b>XII</b><b>III</b><b>VI</b><b>IX</b><i class="hour-hand"></i><i class="minute-hand"></i></div>
      <div class="pendulum"><i></i></div><span class="clock-plaque">GRAHAM &amp; SON</span>
    </div>
    <div class="astrolabe prop" data-prop="astrolabe"><i></i><b></b><span></span></div>
    <div class="star-chart prop" data-prop="star chart">
      <span>THE NORTHERN HEAVENS</span>
      <svg viewBox="0 0 140 100"><g class="chart-grid"><circle cx="70" cy="48" r="39"/><circle cx="70" cy="48" r="26"/><circle cx="70" cy="48" r="13"/><path d="M31 48H109M70 9V87M42 20 98 76M42 76 98 20"/></g><path d="m43 37 16-9 10 20 17-13 12 24-24 10-15-21-11 18"/><g class="chart-stars"><circle cx="43" cy="37" r="2"/><circle cx="59" cy="28" r="2"/><circle cx="69" cy="48" r="2"/><circle cx="86" cy="35" r="2"/><circle cx="98" cy="59" r="2"/><circle cx="74" cy="69" r="2"/><circle cx="48" cy="66" r="2"/></g></svg>
      <small>PLATE IV · CELESTIAL ATLAS</small>
    </div>
    <div class="chalkboard prop" data-prop="chalkboard"><span>FIELD NOTES</span><i></i><small>24 / 36 / 48 / 72</small></div>
    <div class="shelves prop" data-prop="shelf unit">
      <div class="books">
        <i class="book prop" data-prop="book 1" style="--book:#5c735e;--height:8em"><b>ATLAS</b></i>
        <i class="book prop" data-prop="book 2" style="--book:#985347;--height:7em"></i>
        <i class="book prop" data-prop="book 3" style="--book:#42556c;--height:9em"><b>STARS</b></i>
        <i class="book prop" data-prop="book 4" style="--book:#b79a63;--height:7.5em"></i>
        <i class="book prop" data-prop="book 5" style="--book:#71536b;--height:8.5em"></i>
        <i class="book prop" data-prop="book 6" style="--book:#497078;--height:6.5em"></i>
        <i class="book prop" data-prop="book 7" style="--book:#985347;--height:8em"></i>
        <i class="book prop" data-prop="book 8" style="--book:#5c735e;--height:7em"><b>TIME</b></i>
      </div>
      <div class="bottles"><i class="bottle prop" data-prop="specimen bottle 1"></i><i class="bottle prop" data-prop="specimen bottle 2"></i><i class="bottle prop" data-prop="specimen bottle 3"></i></div>
      <div class="plant prop" data-prop="plant"><i></i><i></i><i></i><b></b></div>
      <span class="shelf-label">PRECISION / PATIENCE</span>
    </div>
    <div class="stool prop" data-prop="stool"><i></i><i></i><b></b></div>
    <div class="workbench prop" data-prop="workbench">
      <div class="drawer"><span>01</span></div><div class="drawer"><span>02</span></div><div class="drawer"><span>03</span></div>
      <div class="tools">
        <div class="drawing prop" data-prop="technical drawing"><svg viewBox="0 0 100 65"><g><circle cx="33" cy="31" r="18"/><circle cx="33" cy="31" r="8"/><circle cx="62" cy="31" r="11"/><path d="M9 9H86M9 55H86M9 5V59M86 5V59M15 31H76M33 13V49M58 17 76 45"/></g></svg><span>ESCAPEMENT · No. 7</span></div>
        <div class="notebook prop" data-prop="notebook"><i></i></div>
        <div class="compass prop" data-prop="compass"><i></i></div>
        <div class="calipers prop" data-prop="calipers"></div>
        <div class="winding-key prop" data-prop="winding key"></div>
        <div class="magnifier prop" data-prop="magnifier"></div>
        <div class="ink-bottle prop" data-prop="ink bottle"></div>
        <div class="quill prop" data-prop="quill"></div>
        <div class="mug prop" data-prop="mug"></div>
        <i class="loose-cog prop" data-prop="loose cog 1"></i><i class="loose-cog prop" data-prop="loose cog 2"></i><i class="loose-cog prop" data-prop="loose cog 3"></i>
      </div>
    </div>
    <div class="telescope prop" data-prop="telescope">
      <div class="tripod"><i></i><i></i><i></i><b></b></div>
      <div class="telescope-mount"><i></i></div>
      <div class="barrel"><i class="eyepiece"></i><i class="collar"></i><i class="lens"></i><i class="focus-wheel"></i><b>H. GRAHAM · LONDON</b></div>
    </div>
    <div class="orrery prop" data-prop="orrery">
      <div class="orrery-foot"></div><div class="orrery-base"><span>THE CELESTIAL ENGINE</span><i class="bolt" style="--angle:30deg;--x:84.6%;--y:70%"></i><i class="bolt" style="--angle:150deg;--x:15.4%;--y:70%"></i><i class="bolt" style="--angle:270deg;--x:50%;--y:10%"></i></div>
      <div class="drive"><i class="gear gear-small"></i><i class="gear gear-large"></i><b class="crank"></b></div>
      <div class="shaft"></div>
      <div class="orbital-space"><div class="orbital-plane">
        <div class="carrier" style="--diameter:11em;--period:var(--t-drift);--phase:35deg"><i class="planet mercury"></i></div>
        <div class="carrier" style="--diameter:16em;--period:calc(var(--t-drift) * 1.5);--phase:145deg"><i class="planet venus"></i></div>
        <div class="carrier" style="--diameter:22em;--period:calc(var(--t-drift) * 2);--phase:250deg"><i class="planet earth"></i></div>
        <div class="carrier" style="--diameter:28em;--period:calc(var(--t-drift) * 3);--phase:310deg"><i class="planet saturn"></i></div>
        <div class="sun"></div>
      </div></div>
    </div>
    <div class="desk-lamp prop" data-prop="desk lamp"><div class="lamp-foot"></div><div class="lamp-stem"></div><div class="lamp-shade"><i class="bulb"></i></div></div>
    <div class="lamp-glow"></div>
    <p class="room-mark">EST. 1710 <span>52° N / 00° W</span></p>
  </div>
  <div class="controls" role="group" aria-label="Observatory controls">
    <label for="pause"><span class="check-mark" aria-hidden="true"></span>Pause clockwork</label>
    <label for="lamp"><span class="check-mark" aria-hidden="true"></span>Desk lamp</label>
    <p class="motion-note">System reduced motion: clockwork stays still.</p>
  </div>
</main>
@import "lib/stage";

@layer scene {
  .stage {
    --room: #dbcdb5;
    --room-shadow: #ad9679;
    --wood: #956345;
    --wood-edge: #573c2b;
    --brass: #a97832;
    --brass-light: #f2d79c;
    --copper: #a76145;
    --paper: #f1e4c7;
    --paper-ink: #30291f;
    --glass: #82b3bd;
    --sky: #101d38;
    --star: #ecf1ff;
    --panel: #f4f1ff;
    --panel-ink: #14121f;
    --focus: #6d4aff;
    background: radial-gradient(ellipse at 50% 40%, var(--room), var(--room-shadow));
    isolation: isolate;
  }
  @media (prefers-color-scheme: dark) {
    .stage {
      --room: #171c27;
      --room-shadow: #0d111b;
      --wood: #4c3028;
      --wood-edge: #241a19;
      --brass: #bf9450;
      --brass-light: #e9c987;
      --copper: #704636;
      --paper: #c5b18b;
      --glass: #376274;
      --sky: #080f22;
      --panel: #0b0a14;
      --panel-ink: #f4f1ff;
      --focus: #9d85ff;
    }
  }
  @supports (color: light-dark(white, black)) {
    .stage {
      --room: light-dark(#dbcdb5, #171c27);
      --room-shadow: light-dark(#ad9679, #0d111b);
      --wood: light-dark(#956345, #4c3028);
      --wood-edge: light-dark(#573c2b, #241a19);
      --brass: light-dark(#a97832, #bf9450);
      --brass-light: light-dark(#f2d79c, #e9c987);
      --copper: light-dark(#a76145, #704636);
      --paper: light-dark(#f1e4c7, #c5b18b);
      --glass: light-dark(#82b3bd, #376274);
      --sky: light-dark(#101d38, #080f22);
      --panel: var(--c-paper);
      --panel-ink: var(--c-ink);
      --focus: var(--c-accent);
    }
  }

  .scene-title {
    position: absolute;
    z-index: 2;
    inset: 4% auto auto 4%;
    color: var(--panel-ink);
    font: 400 clamp(1rem, 1.6vw, 1.6rem)/1.25 Georgia, serif;
    letter-spacing: 0.03em;
  }
  .scene-title span { font-style: italic; }
  .scene-title small {
    display: block;
    margin-block-start: 0.8em;
    font: 500 0.55em/1.5 system-ui, sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .room {
    position: absolute;
    inset: 48% auto auto 50%;
    inline-size: 100em;
    block-size: 66em;
    font-size: min(0.9vw, 1.18dvh, 12px);
    translate: -50% -50%;
  }
  .room div, .room i, .room b, .room svg { position: absolute; }
  .room i { font-style: normal; }
  .room svg { inline-size: 100%; block-size: 100%; fill: none; stroke: currentColor; stroke-width: 0.7; }
  .room div::before, .room div::after, .room i::before, .room i::after {
    content: "";
    position: absolute;
  }

  .dome {
    inset: 0 0 auto;
    block-size: 50em;
    border: 0.8em solid var(--copper);
    border-block-end-width: 1.6em;
    border-radius: 50em 50em 0 0;
    overflow: hidden;
    background:
      radial-gradient(ellipse at 50% 100%, #0000 60%, #ffffff0a 61%, #0000 62%),
      repeating-linear-gradient(0deg, #0000 0 9em, #0002 9em 9.3em),
      linear-gradient(90deg, var(--room-shadow), var(--room) 50%, var(--room-shadow));
    box-shadow: inset 0 0 0 0.25em var(--brass-light), 0 1em 0 var(--wood-edge);
  }
  .dome::after { inset: 40% 5%; border: 0.15em solid #ffffff18; border-radius: 50%; }
  .rib {
    inset: auto auto 0 49.5%;
    inline-size: 0.65em;
    block-size: 60em;
    transform-origin: 50% 100%;
    rotate: var(--angle);
    background:
      repeating-linear-gradient(#0000 0 5em, var(--brass-light) 5em 5.25em, #0000 5.25em 6em),
      linear-gradient(90deg, #0005, var(--copper) 50%, var(--brass-light));
    box-shadow: 0.35em 0 0 #0003;
  }
  .sky-window {
    inset: 2em auto auto 28em;
    inline-size: 44em;
    block-size: 39em;
    border: 1em solid var(--wood-edge);
    border-radius: 24em 24em 0 0;
    overflow: hidden;
    background:
      radial-gradient(circle at 18% 30%, var(--star) 0 0.1em, #0000 0.16em),
      radial-gradient(circle at 74% 18%, var(--star) 0 0.12em, #0000 0.18em),
      radial-gradient(circle at 83% 62%, var(--star) 0 0.12em, #0000 0.18em),
      radial-gradient(circle at 25% 80%, var(--star) 0 0.08em, #0000 0.13em),
      radial-gradient(circle at 65% 76%, var(--star) 0 0.1em, #0000 0.16em),
      radial-gradient(circle at 48% 9%, var(--star) 0 0.1em, #0000 0.16em),
      radial-gradient(circle at 90% 40%, var(--star) 0 0.08em, #0000 0.14em),
      linear-gradient(135deg, #0000 30%, #7183b126 52%, #0000 66%),
      var(--sky);
    box-shadow: 0 0 0 0.2em var(--brass), inset 0 0 6em #0005;
  }
  .sky-window::after { inset: auto 0 0; block-size: 2em; background: var(--copper); box-shadow: 0 -0.2em var(--brass-light); }
  .moon {
    inset: 7em auto auto 28em;
    inline-size: 5em;
    block-size: 5em;
    border-radius: 50%;
    background:
      radial-gradient(circle at 28% 60%, #8a98ad66 0 12%, #0000 13%),
      radial-gradient(circle at 65% 30%, #8a98ad55 0 9%, #0000 10%),
      radial-gradient(circle at 45% 42%, #faf1d3, #b7c7da);
    box-shadow: 0 0 3em #c8d5ff30, inset -0.8em -0.2em 0 #4b648e40;
  }
  .constellation { inset: 15% 34% 20% 6%; color: #cedbff; }
  .constellation svg { stroke: #cedbff55; stroke-width: 0.4; }
  .constellation circle { fill: var(--star); stroke: none; }
  .wall {
    inset: 40em 0 auto;
    block-size: 19em;
    border: 0.4em solid var(--wood-edge);
    background:
      linear-gradient(#0003, #0000 50%),
      repeating-linear-gradient(90deg, #0000 0 9.7em, var(--wood-edge) 9.7em 10em),
      var(--room);
    box-shadow: inset 0 1em 0 var(--wood), inset 0 1.2em 0 var(--brass);
  }
  .floor {
    inset: 54em 0 auto;
    block-size: 15em;
    transform: perspective(45em) rotateX(35deg);
    transform-origin: 50% 0;
    border: 0.4em solid var(--wood-edge);
    background:
      repeating-linear-gradient(0deg, #0000 0 4.7em, #0004 4.7em 5em),
      repeating-linear-gradient(90deg, var(--wood) 0 9.7em, var(--wood-edge) 9.7em 10em);
  }

  .wall-clock {
    inset: 14em auto auto 7em;
    inline-size: 11em;
    block-size: 22em;
    border: 0.5em solid var(--wood-edge);
    border-radius: 6em 6em 1.5em 1.5em;
    background: linear-gradient(90deg, var(--wood-edge), var(--wood), var(--wood-edge));
    box-shadow: 0.5em 1em 1em #0003, inset 0 0 0 0.2em var(--brass);
  }
  .wall-clock::after { inset: 11em 2em 2em; border: 0.2em solid var(--brass); border-radius: 4em; background: #080f2299; }
  .clock-face {
    z-index: 1;
    inset: 1em 0.7em auto;
    block-size: 8.6em;
    border: 0.4em solid var(--brass);
    border-radius: 50%;
    background: var(--paper);
    color: var(--paper-ink);
    box-shadow: 0 0 0 0.2em var(--wood-edge);
  }
  @supports (background: conic-gradient(#000, #fff)) {
    .clock-face { background: radial-gradient(circle, var(--paper) 58%, #0000 59% 68%, var(--paper) 69%), repeating-conic-gradient(var(--paper-ink) 0 1deg, var(--paper) 1deg 6deg); }
  }
  .clock-face b { font: 700 1em/1 Georgia, serif; }
  .clock-face b:nth-child(1) { inset: 0.7em auto auto 35%; }
  .clock-face b:nth-child(2) { inset: 42% 0.65em auto auto; }
  .clock-face b:nth-child(3) { inset: auto auto 0.6em 39%; }
  .clock-face b:nth-child(4) { inset: 42% auto auto 0.6em; }
  .hour-hand, .minute-hand { inset: auto auto 50% calc(50% - 0.13em); inline-size: 0.26em; block-size: 2em; background: var(--paper-ink); transform-origin: 50% 100%; rotate: -55deg; }
  .minute-hand { block-size: 2.8em; rotate: 38deg; }
  .clock-face::after { inset: calc(50% - 0.35em); border-radius: 50%; background: var(--brass); }
  .pendulum { z-index: 1; inset: 10em auto auto calc(50% - 0.13em); inline-size: 0.26em; block-size: 8em; background: var(--brass); transform-origin: 50% 0; rotate: 0deg; animation: pendulum var(--t-swing) ease-in-out infinite alternate; }
  .pendulum i { inset: auto auto 0 -1.3em; inline-size: 2.8em; block-size: 2.8em; border: 0.3em solid var(--brass); border-radius: 50%; background: radial-gradient(circle at 30% 25%, var(--brass-light), var(--brass)); }
  .clock-plaque { position: absolute; z-index: 2; inset: auto 0 0.6em; color: var(--brass-light); font: 0.6em/1 system-ui, sans-serif; text-align: center; letter-spacing: 0.08em; }
  @keyframes pendulum { from { rotate: -7deg; } to { rotate: 7deg; } }
  .astrolabe { inset: 23em auto auto 21em; inline-size: 10em; block-size: 12em; }
  .astrolabe::before { inset: 1em 4em auto; block-size: 2em; border: 0.25em solid var(--brass); border-radius: 50%; }
  .astrolabe i { inset: 3em 0 auto; aspect-ratio: 1; border: 0.5em solid var(--brass); border-radius: 50%; background: repeating-conic-gradient(var(--brass-light) 0 1deg, #0000 1deg 15deg); box-shadow: inset 0 0 0 0.2em var(--brass-light); }
  .astrolabe i::before { inset: 15%; border: 0.2em solid var(--brass); border-radius: 50%; }
  .astrolabe b { inset: 4.4em 3em 0; border: 0.22em solid var(--brass-light); border-radius: 50%; rotate: 40deg; }
  .astrolabe span { position: absolute; inset: 7.8em -1em auto; block-size: 0.25em; background: var(--brass-light); rotate: -30deg; box-shadow: 0 0.2em #0003; }
  .star-chart {
    inset: 9em auto auto 73em;
    inline-size: 18em;
    block-size: 15em;
    border: 0.6em solid var(--wood-edge);
    background: var(--paper);
    color: var(--paper-ink);
    rotate: 3deg;
    box-shadow: 0.4em 0.7em 0 #0003, inset 0 0 0 0.15em var(--brass);
  }
  .star-chart span, .star-chart small { position: absolute; inset: 0.8em 0 auto; text-align: center; font: 0.8em/1 Georgia, serif; letter-spacing: 0.12em; }
  .star-chart small { inset: auto 0 1em; font-size: 0.55em; }
  .star-chart svg { inset: 1.8em 0 auto; block-size: 10.5em; }
  .chart-grid { stroke: #30291f55; stroke-width: 0.4; }
  .chart-stars { fill: currentColor; }
  .chalkboard { inset: 29em auto auto 61em; inline-size: 11em; block-size: 9em; border: 0.5em solid var(--wood); background: #253c3c; color: #ede7c6; rotate: -4deg; }
  .chalkboard span, .chalkboard small { position: absolute; inset: 0.8em 0 auto; font: 0.7em/1 system-ui, sans-serif; text-align: center; letter-spacing: 0.1em; }
  .chalkboard small { inset: auto 0 1em; font-size: 0.65em; }
  .chalkboard i { inset: 3em 2em auto; block-size: 3em; border: 0.1em solid #ede7c680; border-radius: 50%; rotate: -20deg; }
  .chalkboard i::after { inset: 0.4em 1.2em; border: 0.1em solid #ede7c680; border-radius: 50%; rotate: 50deg; }

  .shelves { inset: 27em auto auto 77em; inline-size: 20em; block-size: 19em; border-inline: 0.7em solid var(--wood-edge); background: linear-gradient(#0002, #0000), var(--room-shadow); box-shadow: 0.6em 0.6em 0 #0002; }
  .shelves::before { inset: 9em -1.2em auto; block-size: 0.8em; background: var(--wood); box-shadow: 0 9em var(--wood), 0 0.2em var(--brass), 0 9.2em var(--brass); }
  .books { inset: 0 0.4em auto; block-size: 9em; display: flex; align-items: end; gap: 0.25em; }
  .book { position: relative !important; flex: 1; block-size: var(--height); border: 0.15em solid #0003; border-radius: 0.25em 0.25em 0 0; background: linear-gradient(90deg, #0004, #0000 30%, #fff2 65%, #0002), var(--book); box-shadow: 0.2em 0 #0003; }
  .book::after { inset: 0.8em 0 auto; block-size: 0.15em; background: var(--brass-light); box-shadow: 0 0.35em var(--brass-light), 0 calc(var(--height) - 2em) var(--brass-light); }
  .book b { inset: 2.4em 0 auto; color: #fff2cd; font: 0.6em/1 Georgia, serif; writing-mode: vertical-rl; margin: auto; letter-spacing: 0.2em; }
  .book:nth-child(6) { rotate: -8deg; transform-origin: 50% 100%; margin-inline: 0.2em; }
  .bottles { inset: 11em auto auto 1em; inline-size: 11em; block-size: 7em; }
  .bottle { inset: auto auto 0 0; inline-size: 2.8em; block-size: 5em; border: 0.15em solid #c1eeeb70; border-radius: 0.5em 0.5em 0.3em 0.3em; background: linear-gradient(90deg, #fff2, #0000 35%, #0003), linear-gradient(#0000 38%, var(--glass) 39%), #8cbac22a; box-shadow: inset 0.3em 0 0 #e5ffef30; }
  .bottle::before { inset: -1em 0.7em auto; block-size: 1em; background: var(--brass); border-radius: 0.2em; box-shadow: 0 0.3em 0 #1a2426; }
  .bottle::after { inset: 2.5em 0.2em auto; block-size: 1.3em; background: var(--paper); box-shadow: inset 0 0 0 0.15em #0002; }
  .bottle:nth-child(2) { inset-inline-start: 3.6em; block-size: 4.2em; }
  .bottle:nth-child(3) { inset-inline-start: 7.2em; block-size: 5.8em; }
  .plant { inset: 11em auto auto 14em; inline-size: 4em; block-size: 7em; }
  .plant b { inset: auto 0 0; block-size: 3em; border-radius: 0.3em 0.3em 1em 1em; background: linear-gradient(90deg, #0003, #0000, #fff2), #ad7350; border-block-start: 0.5em solid #ce9368; }
  .plant i { inset: auto auto 2em 2em; inline-size: 0.15em; block-size: 4em; background: #537b63; rotate: -35deg; transform-origin: 50% 100%; }
  .plant i::before { inset: 0 -1.3em auto; inline-size: 1.5em; block-size: 2.6em; border-radius: 100% 0 100% 0; background: linear-gradient(45deg, #48705b, #78a278); }
  .plant i:nth-child(2) { rotate: 35deg; block-size: 5em; }
  .plant i:nth-child(3) { rotate: 2deg; block-size: 6em; }
  .shelf-label { position: absolute; inset: auto 0 -1.9em; color: var(--brass-light); font: 0.6em/1 system-ui, sans-serif; text-align: center; letter-spacing: 0.16em; }

  .workbench { inset: 52em auto auto 4em; inline-size: 92em; block-size: 11em; border-block-start: 1.6em solid var(--wood); background: repeating-linear-gradient(0deg, #0000 0 0.7em, #ffffff04 0.7em 0.8em), linear-gradient(var(--wood-edge), var(--wood)); box-shadow: 0 -0.25em 0 var(--brass), 0 0.5em 0 #0005; }
  .workbench::before { inset: 0 -1.2em auto; block-size: 0.8em; background: var(--wood-edge); box-shadow: 0 -1.5em 0 var(--wood), 0 -1.7em 0 #ffffff25; }
  .workbench::after { inset: auto 2em -4em; block-size: 4em; border-inline: 2em solid var(--wood-edge); }
  .drawer { inset: 1.5em auto auto 3em; inline-size: 26em; block-size: 6em; border: 0.25em solid var(--wood-edge); background: linear-gradient(90deg, #0001, #fff1 45%, #0001), var(--wood); box-shadow: inset 0 0.2em #ffffff18; }
  .drawer:nth-child(2) { inset-inline-start: 33em; }
  .drawer:nth-child(3) { inset-inline-start: 63em; }
  .drawer::before { inset: 2em calc(50% - 2em) auto; block-size: 1em; border: 0.22em solid var(--brass); border-radius: 0.5em; background: #0002; }
  .drawer span { position: absolute; inset: 1em auto auto 1.2em; color: var(--brass-light); font: 0.85em/1 Georgia, serif; }
  .stool { z-index: 1; inset: 59em auto auto 12em; inline-size: 13em; block-size: 10em; }
  .stool b { inset: 0 0 auto; block-size: 2.8em; border-radius: 50%; background: radial-gradient(ellipse at 45% 25%, var(--wood), var(--wood-edge)); box-shadow: 0 0.5em var(--wood-edge); }
  .stool i { inset: 2em auto auto 2em; inline-size: 1em; block-size: 8em; background: var(--wood-edge); rotate: 10deg; }
  .stool i:nth-child(2) { inset-inline-start: 10em; rotate: -10deg; }
  .stool::after { inset: 7em 2em auto; block-size: 0.6em; background: var(--wood-edge); }
  .tools { inset: -7em 0 auto; block-size: 7em; }
  .drawing { inset: 1.5em auto auto 2em; inline-size: 16em; block-size: 7em; background: var(--paper); color: var(--paper-ink); rotate: -8deg; box-shadow: 0.2em 0.3em #0003; }
  .drawing svg { inset: 0 1em auto; inline-size: calc(100% - 2em); block-size: 6em; stroke-width: 0.5; }
  .drawing span { position: absolute; inset: auto 1em 0.5em; font: 0.5em/1 system-ui, sans-serif; letter-spacing: 0.15em; }
  .notebook { inset: 3em auto auto 20em; inline-size: 11em; block-size: 5em; border: 0.35em solid #48616c; border-inline-start: 0.8em solid #304653; border-radius: 0.2em 0.7em 0.7em 0.2em; background: var(--paper); rotate: 8deg; box-shadow: 0 0.4em #304653; }
  .notebook i { inset: 0.5em 1.5em; background: repeating-linear-gradient(#0000 0 0.6em, #30291f44 0.6em 0.7em); border-inline-start: 0.1em solid #ac6b4c; }
  .compass { inset: 0 auto auto 32em; inline-size: 5em; block-size: 5em; border: 0.5em solid var(--brass); border-radius: 50%; background: repeating-conic-gradient(var(--paper-ink) 0 1deg, var(--paper) 1deg 30deg); box-shadow: 0.2em 0.2em #0004; }
  .compass i { inset: 0.7em 1.4em; background: linear-gradient(#a45649 50%, #384d60 50%); rotate: 28deg; }
  @supports (clip-path: polygon(0 0, 100% 0, 50% 100%)) {
    .compass i { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
  }
  .calipers { inset: 5.7em auto auto 32em; inline-size: 10em; block-size: 0.5em; border-radius: 0.2em; background: linear-gradient(#d9cba9, var(--brass)); rotate: -7deg; }
  .calipers::before, .calipers::after { inset: -1.7em auto auto 1em; inline-size: 0.5em; block-size: 2.2em; background: var(--brass-light); border-block-start: 0.4em solid var(--brass); }
  .calipers::after { inset-inline-start: 5em; border-inline-end: 1.2em solid var(--brass); }
  .winding-key { inset: 6em auto auto 70em; inline-size: 4em; block-size: 0.6em; background: var(--brass); rotate: -16deg; }
  .winding-key::before { inset: -0.8em auto auto -1.4em; inline-size: 3em; block-size: 2.2em; border: 0.4em solid var(--brass); border-radius: 50%; }
  .winding-key::after { inset: 0 auto auto 3.3em; inline-size: 0.7em; block-size: 1.3em; background: var(--brass); }
  .magnifier { inset: 2em auto auto 66em; inline-size: 4em; block-size: 3em; border: 0.35em solid var(--brass); border-radius: 50%; background: #9ac2cf33; rotate: 15deg; box-shadow: inset 0.2em 0.2em #d0effc55; }
  .magnifier::after { inset: 50% auto auto 100%; inline-size: 4em; block-size: 0.6em; background: var(--wood-edge); border-inline-end: 0.5em solid var(--brass); }
  .ink-bottle { inset: 3.5em auto auto 79em; inline-size: 2.7em; block-size: 3.2em; border: 0.2em solid #82a4ba; border-radius: 0.3em; background: linear-gradient(90deg, #ffffff30, #0000), #18273a; }
  .ink-bottle::before { inset: -0.7em 0.4em auto; block-size: 0.7em; background: var(--brass); }
  .ink-bottle::after { inset: 1em 0.3em auto; block-size: 1em; background: var(--paper); }
  .quill { inset: -1em auto auto 82em; inline-size: 0.15em; block-size: 6em; background: var(--paper); rotate: 23deg; transform-origin: 50% 100%; }
  .quill::before { inset: -0.4em auto auto -0.8em; inline-size: 1.8em; block-size: 4.5em; border-radius: 100% 0 100% 0; background: repeating-linear-gradient(-35deg, #e2cfb0 0 0.4em, #f6ead0 0.4em 0.5em); }
  .mug { inset: 1em auto auto 86em; inline-size: 4em; block-size: 4.5em; border-radius: 0.4em 0.4em 1em 1em; background: linear-gradient(90deg, #384954, #80908e 40%, #3b4c56); border-block-start: 0.4em solid #bbc3af; box-shadow: 0.3em 0.3em #0003; }
  .mug::before { inset: 0.8em auto auto 90%; inline-size: 1.6em; block-size: 2.5em; border: 0.45em solid #63777a; border-radius: 0 1em 1em 0; }
  .loose-cog { inset: 2em auto auto 39em; inline-size: 2.5em; block-size: 2.5em; border: 0.5em dotted var(--brass); border-radius: 50%; background: radial-gradient(circle, #0000 0 20%, var(--brass-light) 21% 50%, #0000 51%); rotate: 8deg; }
  .loose-cog:nth-last-child(2) { inset: 5.6em auto auto 44em; inline-size: 2em; block-size: 2em; }
  .loose-cog:nth-last-child(1) { inset: 5.4em auto auto 61em; inline-size: 3em; block-size: 3em; }

  .telescope { inset: 30em auto auto 17em; inline-size: 26em; block-size: 24em; }
  .tripod { inset: 8em auto auto 9em; inline-size: 12em; block-size: 16em; }
  .tripod i { inset: 0 auto auto 5em; inline-size: 1.1em; block-size: 16em; background: linear-gradient(90deg, var(--wood-edge), var(--wood), var(--brass)); transform-origin: 50% 0; rotate: 23deg; border-block-end: 1em solid var(--brass); }
  .tripod i:nth-child(2) { rotate: -23deg; }
  .tripod i:nth-child(3) { rotate: 0deg; block-size: 13em; opacity: 0.7; }
  .tripod b { inset: 11em 1em auto; block-size: 0.4em; background: var(--brass); }
  .telescope-mount { inset: 3em auto auto 12em; inline-size: 5em; block-size: 6em; border: 0.7em solid var(--brass); border-block-start: none; border-radius: 0 0 2em 2em; }
  .telescope-mount::before { inset: auto auto -2.7em 1em; inline-size: 0.8em; block-size: 2.3em; background: var(--brass-light); }
  .telescope-mount i { inset: 0.8em auto auto -1.5em; inline-size: 1.8em; block-size: 1.8em; border: 0.4em solid var(--brass-light); border-radius: 50%; background: var(--wood-edge); }
  .barrel { inset: 0 auto auto 0; inline-size: 27em; block-size: 4.5em; border: 0.2em solid var(--brass); border-radius: 0.6em; transform-origin: 50% 50%; rotate: -28deg; background: linear-gradient(var(--brass-light), var(--brass) 18%, #684b2b 42%, var(--brass) 64%, var(--brass-light) 76%, var(--brass) 95%); box-shadow: 0 0.5em 0 #0003; }
  .barrel::before { inset: -0.2em 22% -0.2em auto; inline-size: 1em; background: var(--brass-light); box-shadow: -12em 0 var(--brass-light), 0.2em 0 #5b3b22, -11.8em 0 #5b3b22; }
  .eyepiece { inset: 0.8em 100% auto auto; inline-size: 4em; block-size: 2.5em; border-radius: 0.3em; background: linear-gradient(#242a2c, #607475, #242a2c); box-shadow: -0.6em 0 0 #1b252c; }
  .collar { inset: -0.5em auto -0.5em 93%; inline-size: 2em; border: 0.2em solid var(--brass-light); background: linear-gradient(var(--brass), var(--brass-light), var(--brass)); border-radius: 0.4em; }
  .lens { inset: -0.25em auto auto 100%; inline-size: 1.4em; block-size: 4.6em; border: 0.25em solid var(--brass-light); border-radius: 50%; background: linear-gradient(120deg, #233747, #83c2cb 40%, #1a2943 60%); box-shadow: inset -0.2em 0 0 #0005; }
  .focus-wheel { inset: auto auto -1.2em 7em; inline-size: 2em; block-size: 2em; border: 0.4em dotted var(--brass-light); border-radius: 50%; background: var(--wood-edge); }
  .barrel b { inset: 2em auto auto 10em; color: var(--brass-light); font: 0.6em/1 Georgia, serif; letter-spacing: 0.1em; }

  .orrery { inset: 31em auto auto 43em; inline-size: 28em; block-size: 21em; }
  .orrery-foot { inset: auto 4em -0.4em; block-size: 2em; border-radius: 50%; background: var(--wood-edge); box-shadow: 0 0.4em #0004, inset 0 0.2em var(--brass); }
  .orrery-base { inset: auto 4.5em 0.5em; block-size: 5em; border: 0.3em solid var(--brass); border-radius: 50% / 20%; background: linear-gradient(var(--brass-light) 0 12%, #203a42 13% 80%, var(--brass) 81%); box-shadow: inset 0 -0.4em #0003; }
  .orrery-base span { position: absolute; inset: 2em 0 auto; color: #f2d79c; font: 0.6em/1 Georgia, serif; text-align: center; letter-spacing: 0.17em; }
  .bolt { inset: var(--y) auto auto var(--x); inline-size: 0.45em; block-size: 0.45em; translate: -50% -50%; border-radius: 50%; background: linear-gradient(45deg, #0000 43%, #664728 44% 56%, #0000 57%), var(--brass-light); }
  @supports (width: calc(sin(1rad) * 1px)) {
    .bolt { inset-inline-start: calc(50% + cos(var(--angle)) * 40%); inset-block-start: calc(50% + sin(var(--angle)) * 40%); }
  }
  .shaft { inset: 3em auto auto 13.4em; inline-size: 1.2em; block-size: 14em; background: linear-gradient(90deg, #634c2f, var(--brass-light), var(--brass)); }
  .shaft::after { inset: 8em -1.2em auto; block-size: 0.8em; border: 0.2em solid var(--brass); border-radius: 50%; background: var(--brass-light); }
  .drive { z-index: 1; inset: 13em auto auto 7em; inline-size: 14em; block-size: 7em; }
  .gear { inset: 0.6em auto auto 0; inline-size: 4.6em; block-size: 4.6em; border: 0.35em dotted var(--brass); border-radius: 50%; background: var(--brass); rotate: 0deg; animation: gear-turn calc(var(--t-drift) / 2) linear infinite; }
  .gear::before { inset: 12%; border: 0.15em solid var(--brass-light); border-radius: 50%; background: radial-gradient(circle, #273536 0 13%, var(--brass-light) 14% 22%, var(--brass) 23% 60%, #76552c 61%); }
  .gear-large { inset: -0.4em auto auto 4.4em; inline-size: 6.9em; block-size: 6.9em; animation-duration: calc(var(--t-drift) * 0.75); animation-direction: reverse; }
  @supports (background: repeating-conic-gradient(#000 0deg 5deg, #0000 5deg 10deg)) {
    .gear { border: 0; background: repeating-conic-gradient(var(--brass) 0deg 7.5deg, #0000 7.5deg 15deg); }
    .gear-large { background: repeating-conic-gradient(var(--brass) 0deg 5deg, #0000 5deg 10deg); }
  }
  @supports (mask-image: radial-gradient(#000, #0000)) {
    .gear { mask-image: radial-gradient(circle, #0000 0 7%, #000 8%); }
  }
  .crank { inset: 3em auto auto 10em; inline-size: 3em; block-size: 0.6em; background: var(--brass-light); rotate: -20deg; }
  .crank::after { content: ""; position: absolute; inset: -0.3em 0 auto auto; inline-size: 1em; block-size: 1.5em; border-radius: 0.3em; background: var(--wood); }
  @keyframes gear-turn { to { rotate: 360deg; } }
  .orbital-space { inset: -7em 0 auto; inline-size: 28em; block-size: 28em; }
  .orbital-plane { inset: 0; transform: scaleY(0.47); }
  .carrier {
    inset: calc(50% - var(--diameter) / 2) auto auto calc(50% - var(--diameter) / 2);
    inline-size: var(--diameter);
    block-size: var(--diameter);
    border: 0.18em solid var(--brass);
    border-radius: 50%;
    transform: rotateZ(var(--phase));
    animation: orbit var(--period) linear infinite;
  }
  .carrier::before { inset: calc(50% - 0.08em) 0 auto 50%; block-size: 0.16em; background: var(--brass); }
  .planet { inset: calc(50% - 1em) -1em auto auto; inline-size: 2em; block-size: 2em; border: 0.12em solid #fff3; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #e5cfac, #87735e 60%, #443d35); transform: rotateZ(calc(-1 * var(--phase))) scaleY(2.13); animation: planet-face var(--period) linear infinite; }
  .venus { inline-size: 2.7em; block-size: 2.7em; inset-block-start: calc(50% - 1.35em); background: radial-gradient(circle at 30% 25%, #f5d8a5, #c38b54 60%, #73503d); }
  .earth { inline-size: 3.2em; block-size: 3.2em; inset-block-start: calc(50% - 1.6em); background: radial-gradient(ellipse at 35% 30%, #abc69a 0 15%, #0000 16%), radial-gradient(ellipse at 60% 70%, #6f9b82 0 18%, #0000 19%), radial-gradient(circle at 30% 25%, #a5c7d5, #497c9d 60%, #233a59); }
  .saturn { inline-size: 3.7em; block-size: 3.7em; inset-block-start: calc(50% - 1.85em); background: repeating-linear-gradient(10deg, #ffffff18 0 0.3em, #0000 0.3em 0.7em), radial-gradient(circle at 30% 25%, #ead3a0, #b39770 60%, #6b5745); }
  .saturn::after { inset: 0.6em -1.2em; border: 0.5em solid #c7b088; border-radius: 50%; rotate: -20deg; box-shadow: 0 0 0 0.15em #edd9b866; }
  .sun { inset: calc(50% - 2em); border-radius: 50%; background: radial-gradient(circle at 30% 25%, #fff0bb, #dcaa52 60%, #a77835); transform: scaleY(2.13); box-shadow: 0 0 2em #eacb6b30; }
  @keyframes orbit { from { transform: rotateZ(var(--phase)); } to { transform: rotateZ(calc(var(--phase) + 360deg)); } }
  @keyframes planet-face { from { transform: rotateZ(calc(-1 * var(--phase))) scaleY(2.13); } to { transform: rotateZ(calc(-1 * var(--phase) - 360deg)) scaleY(2.13); } }
  @supports (transform-style: preserve-3d) and (perspective: 1px) {
    .orbital-space { perspective: 70em; }
    .orbital-plane { transform: rotateX(62deg); transform-style: preserve-3d; }
    .carrier { transform-style: preserve-3d; }
    .planet { transform: rotateZ(calc(-1 * var(--phase))) rotateX(-62deg); animation-name: planet-face-3d; }
    .sun { transform: rotateX(-62deg); }
    @keyframes planet-face-3d { from { transform: rotateZ(calc(-1 * var(--phase))) rotateX(-62deg); } to { transform: rotateZ(calc(-1 * var(--phase) - 360deg)) rotateX(-62deg); } }
  }

  .desk-lamp { inset: 37em auto auto 71em; inline-size: 12em; block-size: 15em; }
  .lamp-foot { inset: auto 1em 0; block-size: 1.8em; border: 0.3em solid var(--brass); border-radius: 50%; background: #244143; box-shadow: 0 0.3em #0004; }
  .lamp-stem { inset: 3em auto auto 5.5em; inline-size: 0.7em; block-size: 11em; background: linear-gradient(90deg, var(--brass), var(--brass-light), var(--brass)); }
  .lamp-stem::before { inset: -2em -2em auto; block-size: 3em; border: 0.5em solid var(--brass); border-block-end: 0; border-radius: 3em 3em 0 0; }
  .lamp-shade { inset: 0 -1em auto; block-size: 5em; border: 0.3em solid var(--brass); border-radius: 6em 6em 0.8em 0.8em; background: linear-gradient(90deg, #1c3837, #4b7b6a 35%, #294c43 75%, #142f31); box-shadow: inset 0 0.4em #ffffff20; }
  .bulb { inset: auto 1em -0.6em; block-size: 1em; border-radius: 50%; background: var(--c-lamp, #ffe9b0); opacity: 0.15; transition: opacity var(--t-base) var(--ease-out); }
  /* Keep the transparent falloff inside the box so the light has no rectangular edge. */
  .lamp-glow { pointer-events: none; inset: 34em auto auto 60em; inline-size: 35em; block-size: 27em; background: radial-gradient(ellipse 48% 48% at 50% 50%, #ffd1842b, #ffc1740a 50%, #0000 100%); opacity: 0; transition: opacity var(--t-base) var(--ease-out); }
  #lamp:checked ~ .room .lamp-glow, #lamp:checked ~ .room .bulb { opacity: 1; }
  .room-mark { position: absolute; inset: auto 0 -3em; color: var(--panel-ink); font: 0.65em/1 system-ui, sans-serif; letter-spacing: 0.25em; }
  .room-mark span { float: right; }

  .control-input { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .controls {
    position: absolute;
    z-index: 3;
    inset: auto auto max(1rem, env(safe-area-inset-bottom)) 50%;
    translate: -50% 0;
    inline-size: max-content;
    max-inline-size: calc(100% - 2rem);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0.25rem;
    gap: 0.25rem;
    border: 1px solid var(--panel-ink);
    border-radius: 1rem;
    background: var(--panel);
    color: var(--panel-ink);
    box-shadow: 0 0.4rem 1.5rem #0002;
    font: 500 0.8rem/1.3 system-ui, sans-serif;
  }
  .controls label { display: flex; align-items: center; gap: 0.6em; min-block-size: 44px; min-inline-size: 44px; padding: 0.5rem 0.75rem; border: 1px solid transparent; border-radius: 0.7rem; cursor: pointer; }
  .check-mark { inline-size: 1.1em; block-size: 1.1em; border: 1.5px solid currentColor; border-radius: 0.2em; flex: none; }
  #pause:checked ~ .controls [for="pause"] .check-mark, #lamp:checked ~ .controls [for="lamp"] .check-mark { background: var(--panel-ink); box-shadow: inset 0 0 0 0.15em var(--panel); }
  #pause:focus-visible ~ .controls [for="pause"], #lamp:focus-visible ~ .controls [for="lamp"] { outline: 3px solid var(--focus); outline-offset: -3px; }
  @supports selector(:has(*)) {
    .stage:has(#pause:checked) .controls [for="pause"] { border-color: currentColor; }
  }
  #pause:checked ~ .room *, #pause:checked ~ .room *::before, #pause:checked ~ .room *::after { animation-play-state: paused; }
  .motion-note { display: none; flex-basis: 100%; padding: 0 0.75rem 0.5rem; font-size: 0.75em; text-align: center; }

  @media (aspect-ratio < 1/1) {
    .scene-title { inset: max(4rem, env(safe-area-inset-top)) auto auto 5%; max-inline-size: 90%; font-size: clamp(1rem, 4vw, 1.4rem); }
    .scene-title small { font-size: 0.48em; }
    .room { inset-block-start: calc(50% - 0.25rem); block-size: 172em; font-size: min(0.92vw, calc((100dvh - 14rem) / 172)); }
    .dome { block-size: 80em; }
    .rib { block-size: 90em; }
    .sky-window { inset: 3em auto auto 20em; inline-size: 62em; block-size: 72em; border-radius: 32em 32em 0 0; }
    .moon { inset: 12em auto auto 36em; inline-size: 7em; block-size: 7em; }
    .constellation { inset: 25% 15% 30% 8%; }
    .wall { inset-block-start: 73em; block-size: 81em; }
    .floor { inset-block-start: 148em; block-size: 22em; }
    .wall-clock { inset: 28em auto auto 3em; scale: 1.4; transform-origin: 0 0; }
    .astrolabe { inset: 65em auto auto 79em; scale: 1.2; transform-origin: 0 0; }
    .star-chart { inset: 34em auto auto 52em; inline-size: 30em; block-size: 23em; }
    .star-chart svg { block-size: 17em; }
    .star-chart span { font-size: 1.2em; }
    .star-chart small { font-size: 0.8em; }
    .chalkboard { inset: 81em auto auto 60em; inline-size: 18em; block-size: 12em; }
    .chalkboard span { font-size: 1em; }
    .chalkboard small { font-size: 0.9em; }
    .chalkboard i { inset: 4em 4em auto; block-size: 4em; }
    .shelves { inset: 62em auto auto 9em; inline-size: 43em; block-size: 24em; }
    .books { block-size: 12em; gap: 0.6em; }
    .book { block-size: calc(var(--height) * 1.35); }
    .book b { font-size: 0.95em; }
    .shelves::before { inset-block-start: 12em; box-shadow: 0 11em var(--wood), 0 0.2em var(--brass), 0 11.2em var(--brass); }
    .bottles { inset: 16em auto auto 3em; scale: 1.3; transform-origin: 0 100%; }
    .plant { inset: 16em auto auto 32em; scale: 1.3; transform-origin: 0 100%; }
    .shelf-label { font-size: 0.9em; }
    .telescope { inset: 97em auto auto 9em; scale: 1.5; transform-origin: 0 0; }
    .orrery { inset: 102em auto auto 54em; scale: 1.45; transform-origin: 0 0; }
    .desk-lamp { inset: 119em auto auto 78em; scale: 1; transform-origin: 0 0; }
    .workbench { inset-block-start: 134em; block-size: 20em; }
    .drawer { inline-size: 26em; block-size: 12em; }
    .drawer::before { inset-block-start: 5em; block-size: 1.5em; }
    .drawer span { font-size: 1.5em; }
    .tools { inset-block-start: -6em; }
    .drawing { inset: 0 auto auto 1em; inline-size: 23em; block-size: 10em; }
    .drawing svg { block-size: 8em; }
    .drawing span { font-size: 0.8em; }
    .notebook { inset: 3em auto auto 27em; inline-size: 16em; block-size: 7em; }
    .compass { inset: 0 auto auto 45em; }
    .calipers { inset: 7em auto auto 46em; }
    .loose-cog { inset-inline-start: 51em; }
    .loose-cog:nth-last-child(2) { inset: 8em auto auto 57em; }
    .loose-cog:nth-last-child(1) { inset: 7em auto auto 62em; }
    .magnifier { inset: 3em auto auto 67em; }
    .winding-key { inset: 9em auto auto 71em; }
    .ink-bottle { inset: 5em auto auto 80em; }
    .quill { inset: 1em auto auto 82em; }
    .mug { inset: 4em auto auto 87em; }
    .stool { inset: 151em auto auto 12em; scale: 1.6; transform-origin: 0 0; }
    .lamp-glow { inset: 112em auto auto 60em; block-size: 42em; }
    .room-mark { font-size: 1em; }
  }
  @media (height < 650px) and (aspect-ratio >= 1/1) {
    .scene-title small { display: none; }
    .room { font-size: min(0.9vw, 1.05dvh); inset-block-start: 46%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .room *, .room *::before, .room *::after { animation: none !important; transition: none !important; }
    .motion-note { display: block; }
  }
}

What ships: tokens and lib snippets inlined, lowered for the browser targets (minified in the real page).

@property --c-ink {
  syntax: "<color>";
  inherits: true;
  initial-value: #14121f;
}

@property --c-paper {
  syntax: "<color>";
  inherits: true;
  initial-value: #f4f1ff;
}

@property --c-accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #6d4aff;
}

@property --c-car-wall {
  syntax: "<color>";
  inherits: true;
  initial-value: #e9e6dc;
}

@property --c-seat {
  syntax: "<color>";
  inherits: true;
  initial-value: #c9c4b4;
}

@property --c-line {
  syntax: "<color>";
  inherits: true;
  initial-value: #ff9500;
}

@property --c-tunnel {
  syntax: "<color>";
  inherits: true;
  initial-value: #05050a;
}

@property --c-lamp {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffe9b0;
}

@property --c-platform {
  syntax: "<color>";
  inherits: true;
  initial-value: #dfe9ff;
}

@property --a-spin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@layer tokens {
  :root {
    color-scheme: light dark;
    --c-ink: light-dark(#14121f, #f4f1ff);
    --c-paper: light-dark(#f4f1ff, #0b0a14);
    --c-accent: light-dark(#6d4aff, #9d85ff);
    --c-car-wall: light-dark(#e9e6dc, #1a1826);
    --c-seat: light-dark(#c9c4b4, #2a2638);
    --c-line: light-dark(#ff9500, #ff9f1a);
    --c-tunnel: #05050a;
    --c-lamp: #ffe9b0;
    --c-platform: light-dark(#dfe9ff, #9fb4e8);
    --t-fast: .15s;
    --t-base: .4s;
    --t-slow: 1.2s;
    --t-drift: 24s;
    --t-rush: 1.6s;
    --t-swing: 3.6s;
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-spring: linear(0, .22 2.1%, .73 6.5%, 1.04 10.7%, 1.09 13%, 1.02 20%, .99 27%, 1);
  }
}

@layer reset {
  *, :before, :after {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    block-size: 100%;
  }
}

@layer base {
  body {
    background: var(--c-paper);
    min-block-size: 100dvh;
    color: var(--c-ink);
    font: 1rem / 1.5 system-ui, sans-serif;
    overflow: clip;
  }

  .stage {
    contain: strict;
    position: fixed;
    inset: 0;
    overflow: clip;
  }
}

@layer scene {
  .stage {
    --room: #dbcdb5;
    --room-shadow: #ad9679;
    --wood: #956345;
    --wood-edge: #573c2b;
    --brass: #a97832;
    --brass-light: #f2d79c;
    --copper: #a76145;
    --paper: #f1e4c7;
    --paper-ink: #30291f;
    --glass: #82b3bd;
    --sky: #101d38;
    --star: #ecf1ff;
    --panel: #f4f1ff;
    --panel-ink: #14121f;
    --focus: #6d4aff;
    background: radial-gradient(ellipse at 50% 40%, var(--room), var(--room-shadow));
    isolation: isolate;
  }

  @media (prefers-color-scheme: dark) {
    .stage {
      --room: #171c27;
      --room-shadow: #0d111b;
      --wood: #4c3028;
      --wood-edge: #241a19;
      --brass: #bf9450;
      --brass-light: #e9c987;
      --copper: #704636;
      --paper: #c5b18b;
      --glass: #376274;
      --sky: #080f22;
      --panel: #0b0a14;
      --panel-ink: #f4f1ff;
      --focus: #9d85ff;
    }
  }

  @supports (color: light-dark(white, black)) {
    .stage {
      --room: light-dark(#dbcdb5, #171c27);
      --room-shadow: light-dark(#ad9679, #0d111b);
      --wood: light-dark(#956345, #4c3028);
      --wood-edge: light-dark(#573c2b, #241a19);
      --brass: light-dark(#a97832, #bf9450);
      --brass-light: light-dark(#f2d79c, #e9c987);
      --copper: light-dark(#a76145, #704636);
      --paper: light-dark(#f1e4c7, #c5b18b);
      --glass: light-dark(#82b3bd, #376274);
      --sky: light-dark(#101d38, #080f22);
      --panel: var(--c-paper);
      --panel-ink: var(--c-ink);
      --focus: var(--c-accent);
    }
  }

  .scene-title {
    z-index: 2;
    color: var(--panel-ink);
    letter-spacing: .03em;
    font: 400 clamp(1rem, 1.6vw, 1.6rem) / 1.25 Georgia, serif;
    position: absolute;
    inset: 4% auto auto 4%;
  }

  .scene-title span {
    font-style: italic;
  }

  .scene-title small {
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-block-start: .8em;
    font: 500 .55em / 1.5 system-ui, sans-serif;
    display: block;
  }

  .room {
    block-size: 66em;
    inline-size: 100em;
    font-size: min(.9vw, 1.18dvh, 12px);
    position: absolute;
    inset: 48% auto auto 50%;
    translate: -50% -50%;
  }

  .room div, .room i, .room b, .room svg {
    position: absolute;
  }

  .room i {
    font-style: normal;
  }

  .room svg {
    fill: none;
    stroke: currentColor;
    stroke-width: .7px;
    block-size: 100%;
    inline-size: 100%;
  }

  .room div:before, .room div:after, .room i:before, .room i:after {
    content: "";
    position: absolute;
  }

  .dome {
    border: .8em solid var(--copper);
    background: radial-gradient(ellipse at 50% 100%, #0000 60%, #ffffff0a 61%, #0000 62%),
      repeating-linear-gradient(0deg, #0000 0 9em, #0002 9em 9.3em),
      linear-gradient(90deg, var(--room-shadow), var(--room) 50%, var(--room-shadow));
    block-size: 50em;
    box-shadow: inset 0 0 0 .25em var(--brass-light), 0 1em 0 var(--wood-edge);
    border-block-end-width: 1.6em;
    border-radius: 50em 50em 0 0;
    inset: 0 0 auto;
    overflow: hidden;
  }

  .dome:after {
    border: .15em solid #ffffff18;
    border-radius: 50%;
    inset: 40% 5%;
  }

  .rib {
    transform-origin: 50% 100%;
    block-size: 60em;
    inline-size: .65em;
    rotate: var(--angle);
    background: repeating-linear-gradient(#0000 0 5em, var(--brass-light) 5em 5.25em, #0000 5.25em 6em),
      linear-gradient(90deg, #0005, var(--copper) 50%, var(--brass-light));
    inset: auto auto 0 49.5%;
    box-shadow: .35em 0 #0003;
  }

  .sky-window {
    border: 1em solid var(--wood-edge);
    background: radial-gradient(circle at 18% 30%, var(--star) 0 .1em, #0000 .16em),
      radial-gradient(circle at 74% 18%, var(--star) 0 .12em, #0000 .18em),
      radial-gradient(circle at 83% 62%, var(--star) 0 .12em, #0000 .18em),
      radial-gradient(circle at 25% 80%, var(--star) 0 .08em, #0000 .13em),
      radial-gradient(circle at 65% 76%, var(--star) 0 .1em, #0000 .16em),
      radial-gradient(circle at 48% 9%, var(--star) 0 .1em, #0000 .16em),
      radial-gradient(circle at 90% 40%, var(--star) 0 .08em, #0000 .14em),
      linear-gradient(135deg, #0000 30%, #7183b126 52%, #0000 66%),
      var(--sky);
    block-size: 39em;
    inline-size: 44em;
    box-shadow: 0 0 0 .2em var(--brass), inset 0 0 6em #0005;
    border-radius: 24em 24em 0 0;
    inset: 2em auto auto 28em;
    overflow: hidden;
  }

  .sky-window:after {
    background: var(--copper);
    block-size: 2em;
    box-shadow: 0 -.2em var(--brass-light);
    inset: auto 0 0;
  }

  .moon {
    background: radial-gradient(circle at 28% 60%, #8a98ad66 0 12%, #0000 13%), radial-gradient(circle at 65% 30%, #8a98ad55 0 9%, #0000 10%), radial-gradient(circle at 45% 42%, #faf1d3, #b7c7da);
    border-radius: 50%;
    block-size: 5em;
    inline-size: 5em;
    inset: 7em auto auto 28em;
    box-shadow: 0 0 3em #c8d5ff30, inset -.8em -.2em #4b648e40;
  }

  .constellation {
    color: #cedbff;
    inset: 15% 34% 20% 6%;
  }

  .constellation svg {
    stroke: #cedbff55;
    stroke-width: .4px;
  }

  .constellation circle {
    fill: var(--star);
    stroke: none;
  }

  .wall {
    border: .4em solid var(--wood-edge);
    background: linear-gradient(#0003, #0000 50%),
      repeating-linear-gradient(90deg, #0000 0 9.7em, var(--wood-edge) 9.7em 10em),
      var(--room);
    block-size: 19em;
    box-shadow: inset 0 1em 0 var(--wood), inset 0 1.2em 0 var(--brass);
    inset: 40em 0 auto;
  }

  .floor {
    transform-origin: 50% 0;
    border: .4em solid var(--wood-edge);
    background: repeating-linear-gradient(0deg, #0000 0 4.7em, #0004 4.7em 5em),
      repeating-linear-gradient(90deg, var(--wood) 0 9.7em, var(--wood-edge) 9.7em 10em);
    block-size: 15em;
    inset: 54em 0 auto;
    transform: perspective(45em) rotateX(35deg);
  }

  .wall-clock {
    border: .5em solid var(--wood-edge);
    background: linear-gradient(90deg, var(--wood-edge), var(--wood), var(--wood-edge));
    block-size: 22em;
    inline-size: 11em;
    box-shadow: .5em 1em 1em #0003, inset 0 0 0 .2em var(--brass);
    border-radius: 6em 6em 1.5em 1.5em;
    inset: 14em auto auto 7em;
  }

  .wall-clock:after {
    border: .2em solid var(--brass);
    background: #080f2299;
    border-radius: 4em;
    inset: 11em 2em 2em;
  }

  .clock-face {
    z-index: 1;
    border: .4em solid var(--brass);
    background: var(--paper);
    block-size: 8.6em;
    color: var(--paper-ink);
    box-shadow: 0 0 0 .2em var(--wood-edge);
    border-radius: 50%;
    inset: 1em .7em auto;
  }

  @supports (background: conic-gradient(#000, #fff)) {
    .clock-face {
      background: radial-gradient(circle, var(--paper) 58%, #0000 59% 68%, var(--paper) 69%), repeating-conic-gradient(var(--paper-ink) 0 1deg, var(--paper) 1deg 6deg);
    }
  }

  .clock-face b {
    font: 700 1em / 1 Georgia, serif;
  }

  .clock-face b:first-child {
    inset: .7em auto auto 35%;
  }

  .clock-face b:nth-child(2) {
    inset: 42% .65em auto auto;
  }

  .clock-face b:nth-child(3) {
    inset: auto auto .6em 39%;
  }

  .clock-face b:nth-child(4) {
    inset: 42% auto auto .6em;
  }

  .hour-hand, .minute-hand {
    background: var(--paper-ink);
    transform-origin: 50% 100%;
    block-size: 2em;
    inline-size: .26em;
    inset: auto auto 50% calc(50% - .13em);
    rotate: -55deg;
  }

  .minute-hand {
    block-size: 2.8em;
    rotate: 38deg;
  }

  .clock-face:after {
    background: var(--brass);
    border-radius: 50%;
    inset: calc(50% - .35em);
  }

  .pendulum {
    z-index: 1;
    background: var(--brass);
    transform-origin: 50% 0;
    block-size: 8em;
    inline-size: .26em;
    animation: pendulum var(--t-swing) ease-in-out infinite alternate;
    inset: 10em auto auto calc(50% - .13em);
    rotate: 0deg;
  }

  .pendulum i {
    border: .3em solid var(--brass);
    background: radial-gradient(circle at 30% 25%, var(--brass-light), var(--brass));
    border-radius: 50%;
    block-size: 2.8em;
    inline-size: 2.8em;
    inset: auto auto 0 -1.3em;
  }

  .clock-plaque {
    z-index: 2;
    color: var(--brass-light);
    text-align: center;
    letter-spacing: .08em;
    font: .6em / 1 system-ui, sans-serif;
    position: absolute;
    inset: auto 0 .6em;
  }

  @keyframes pendulum {
    from {
      rotate: -7deg;
    }

    to {
      rotate: 7deg;
    }
  }

  .astrolabe {
    block-size: 12em;
    inline-size: 10em;
    inset: 23em auto auto 21em;
  }

  .astrolabe:before {
    border: .25em solid var(--brass);
    border-radius: 50%;
    block-size: 2em;
    inset: 1em 4em auto;
  }

  .astrolabe i {
    aspect-ratio: 1;
    border: .5em solid var(--brass);
    background: repeating-conic-gradient(var(--brass-light) 0 1deg, #0000 1deg 15deg);
    box-shadow: inset 0 0 0 .2em var(--brass-light);
    border-radius: 50%;
    inset: 3em 0 auto;
  }

  .astrolabe i:before {
    border: .2em solid var(--brass);
    border-radius: 50%;
    inset: 15%;
  }

  .astrolabe b {
    border: .22em solid var(--brass-light);
    border-radius: 50%;
    inset: 4.4em 3em 0;
    rotate: 40deg;
  }

  .astrolabe span {
    background: var(--brass-light);
    block-size: .25em;
    position: absolute;
    inset: 7.8em -1em auto;
    rotate: -30deg;
    box-shadow: 0 .2em #0003;
  }

  .star-chart {
    border: .6em solid var(--wood-edge);
    background: var(--paper);
    block-size: 15em;
    inline-size: 18em;
    color: var(--paper-ink);
    box-shadow: .4em .7em 0 #0003, inset 0 0 0 .15em var(--brass);
    inset: 9em auto auto 73em;
    rotate: 3deg;
  }

  .star-chart span, .star-chart small {
    text-align: center;
    letter-spacing: .12em;
    font: .8em / 1 Georgia, serif;
    position: absolute;
    inset: .8em 0 auto;
  }

  .star-chart small {
    font-size: .55em;
    inset: auto 0 1em;
  }

  .star-chart svg {
    block-size: 10.5em;
    inset: 1.8em 0 auto;
  }

  .chart-grid {
    stroke: #30291f55;
    stroke-width: .4px;
  }

  .chart-stars {
    fill: currentColor;
  }

  .chalkboard {
    border: .5em solid var(--wood);
    color: #ede7c6;
    background: #253c3c;
    block-size: 9em;
    inline-size: 11em;
    inset: 29em auto auto 61em;
    rotate: -4deg;
  }

  .chalkboard span, .chalkboard small {
    text-align: center;
    letter-spacing: .1em;
    font: .7em / 1 system-ui, sans-serif;
    position: absolute;
    inset: .8em 0 auto;
  }

  .chalkboard small {
    font-size: .65em;
    inset: auto 0 1em;
  }

  .chalkboard i {
    border: .1em solid #ede7c680;
    border-radius: 50%;
    block-size: 3em;
    inset: 3em 2em auto;
    rotate: -20deg;
  }

  .chalkboard i:after {
    border: .1em solid #ede7c680;
    border-radius: 50%;
    inset: .4em 1.2em;
    rotate: 50deg;
  }

  .shelves {
    border-inline: .7em solid var(--wood-edge);
    background: linear-gradient(#0002, #0000), var(--room-shadow);
    block-size: 19em;
    inline-size: 20em;
    inset: 27em auto auto 77em;
    box-shadow: .6em .6em #0002;
  }

  .shelves:before {
    background: var(--wood);
    block-size: .8em;
    box-shadow: 0 9em var(--wood), 0 .2em var(--brass), 0 9.2em var(--brass);
    inset: 9em -1.2em auto;
  }

  .books {
    align-items: end;
    gap: .25em;
    block-size: 9em;
    display: flex;
    inset: 0 .4em auto;
  }

  .book {
    block-size: var(--height);
    background: linear-gradient(90deg, #0004, #0000 30%, #fff2 65%, #0002), var(--book);
    border: .15em solid #0003;
    border-radius: .25em .25em 0 0;
    flex: 1;
    box-shadow: .2em 0 #0003;
    position: relative !important;
  }

  .book:after {
    background: var(--brass-light);
    block-size: .15em;
    box-shadow: 0 .35em var(--brass-light), 0 calc(var(--height) - 2em) var(--brass-light);
    inset: .8em 0 auto;
  }

  .book b {
    color: #fff2cd;
    writing-mode: vertical-rl;
    letter-spacing: .2em;
    margin: auto;
    font: .6em / 1 Georgia, serif;
    inset: 2.4em 0 auto;
  }

  .book:nth-child(6) {
    transform-origin: 50% 100%;
    margin-inline: .2em;
    rotate: -8deg;
  }

  .bottles {
    block-size: 7em;
    inline-size: 11em;
    inset: 11em auto auto 1em;
  }

  .bottle {
    background: linear-gradient(90deg, #fff2, #0000 35%, #0003), linear-gradient(#0000 38%, var(--glass) 39%), #8cbac22a;
    border: .15em solid #c1eeeb70;
    border-radius: .5em .5em .3em .3em;
    block-size: 5em;
    inline-size: 2.8em;
    inset: auto auto 0 0;
    box-shadow: inset .3em 0 #e5ffef30;
  }

  .bottle:before {
    background: var(--brass);
    border-radius: .2em;
    block-size: 1em;
    inset: -1em .7em auto;
    box-shadow: 0 .3em #1a2426;
  }

  .bottle:after {
    background: var(--paper);
    block-size: 1.3em;
    inset: 2.5em .2em auto;
    box-shadow: inset 0 0 0 .15em #0002;
  }

  .bottle:nth-child(2) {
    block-size: 4.2em;
    inset-inline-start: 3.6em;
  }

  .bottle:nth-child(3) {
    block-size: 5.8em;
    inset-inline-start: 7.2em;
  }

  .plant {
    block-size: 7em;
    inline-size: 4em;
    inset: 11em auto auto 14em;
  }

  .plant b {
    background: linear-gradient(90deg, #0003, #0000, #fff2), #ad7350;
    border-block-start: .5em solid #ce9368;
    border-radius: .3em .3em 1em 1em;
    block-size: 3em;
    inset: auto 0 0;
  }

  .plant i {
    transform-origin: 50% 100%;
    background: #537b63;
    block-size: 4em;
    inline-size: .15em;
    inset: auto auto 2em 2em;
    rotate: -35deg;
  }

  .plant i:before {
    background: linear-gradient(45deg, #48705b, #78a278);
    border-radius: 100% 0;
    block-size: 2.6em;
    inline-size: 1.5em;
    inset: 0 -1.3em auto;
  }

  .plant i:nth-child(2) {
    block-size: 5em;
    rotate: 35deg;
  }

  .plant i:nth-child(3) {
    block-size: 6em;
    rotate: 2deg;
  }

  .shelf-label {
    color: var(--brass-light);
    text-align: center;
    letter-spacing: .16em;
    font: .6em / 1 system-ui, sans-serif;
    position: absolute;
    inset: auto 0 -1.9em;
  }

  .workbench {
    border-block-start: 1.6em solid var(--wood);
    background: repeating-linear-gradient(0deg, #0000 0 .7em, #ffffff04 .7em .8em), linear-gradient(var(--wood-edge), var(--wood));
    block-size: 11em;
    inline-size: 92em;
    box-shadow: 0 -.25em 0 var(--brass), 0 .5em 0 #0005;
    inset: 52em auto auto 4em;
  }

  .workbench:before {
    background: var(--wood-edge);
    block-size: .8em;
    box-shadow: 0 -1.5em 0 var(--wood), 0 -1.7em 0 #ffffff25;
    inset: 0 -1.2em auto;
  }

  .workbench:after {
    border-inline: 2em solid var(--wood-edge);
    block-size: 4em;
    inset: auto 2em -4em;
  }

  .drawer {
    border: .25em solid var(--wood-edge);
    background: linear-gradient(90deg, #0001, #fff1 45%, #0001), var(--wood);
    block-size: 6em;
    inline-size: 26em;
    inset: 1.5em auto auto 3em;
    box-shadow: inset 0 .2em #ffffff18;
  }

  .drawer:nth-child(2) {
    inset-inline-start: 33em;
  }

  .drawer:nth-child(3) {
    inset-inline-start: 63em;
  }

  .drawer:before {
    border: .22em solid var(--brass);
    background: #0002;
    border-radius: .5em;
    block-size: 1em;
    inset: 2em calc(50% - 2em) auto;
  }

  .drawer span {
    color: var(--brass-light);
    font: .85em / 1 Georgia, serif;
    position: absolute;
    inset: 1em auto auto 1.2em;
  }

  .stool {
    z-index: 1;
    block-size: 10em;
    inline-size: 13em;
    inset: 59em auto auto 12em;
  }

  .stool b {
    background: radial-gradient(ellipse at 45% 25%, var(--wood), var(--wood-edge));
    block-size: 2.8em;
    box-shadow: 0 .5em var(--wood-edge);
    border-radius: 50%;
    inset: 0 0 auto;
  }

  .stool i {
    background: var(--wood-edge);
    block-size: 8em;
    inline-size: 1em;
    inset: 2em auto auto 2em;
    rotate: 10deg;
  }

  .stool i:nth-child(2) {
    inset-inline-start: 10em;
    rotate: -10deg;
  }

  .stool:after {
    background: var(--wood-edge);
    block-size: .6em;
    inset: 7em 2em auto;
  }

  .tools {
    block-size: 7em;
    inset: -7em 0 auto;
  }

  .drawing {
    background: var(--paper);
    block-size: 7em;
    inline-size: 16em;
    color: var(--paper-ink);
    inset: 1.5em auto auto 2em;
    rotate: -8deg;
    box-shadow: .2em .3em #0003;
  }

  .drawing svg {
    stroke-width: .5px;
    block-size: 6em;
    inline-size: calc(100% - 2em);
    inset: 0 1em auto;
  }

  .drawing span {
    letter-spacing: .15em;
    font: .5em / 1 system-ui, sans-serif;
    position: absolute;
    inset: auto 1em .5em;
  }

  .notebook {
    background: var(--paper);
    border: .35em solid #48616c;
    border-inline-start: .8em solid #304653;
    border-radius: .2em .7em .7em .2em;
    block-size: 5em;
    inline-size: 11em;
    inset: 3em auto auto 20em;
    rotate: 8deg;
    box-shadow: 0 .4em #304653;
  }

  .notebook i {
    background: repeating-linear-gradient(#0000 0 .6em, #30291f44 .6em .7em);
    border-inline-start: .1em solid #ac6b4c;
    inset: .5em 1.5em;
  }

  .compass {
    border: .5em solid var(--brass);
    background: repeating-conic-gradient(var(--paper-ink) 0 1deg, var(--paper) 1deg 30deg);
    border-radius: 50%;
    block-size: 5em;
    inline-size: 5em;
    inset: 0 auto auto 32em;
    box-shadow: .2em .2em #0004;
  }

  .compass i {
    background: linear-gradient(#a45649 50%, #384d60 50%);
    inset: .7em 1.4em;
    rotate: 28deg;
  }

  @supports (clip-path: polygon(0 0, 100% 0, 50% 100%)) {
    .compass i {
      clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    }
  }

  .calipers {
    background: linear-gradient(#d9cba9, var(--brass));
    border-radius: .2em;
    block-size: .5em;
    inline-size: 10em;
    inset: 5.7em auto auto 32em;
    rotate: -7deg;
  }

  .calipers:before, .calipers:after {
    background: var(--brass-light);
    border-block-start: .4em solid var(--brass);
    block-size: 2.2em;
    inline-size: .5em;
    inset: -1.7em auto auto 1em;
  }

  .calipers:after {
    border-inline-end: 1.2em solid var(--brass);
    inset-inline-start: 5em;
  }

  .winding-key {
    background: var(--brass);
    block-size: .6em;
    inline-size: 4em;
    inset: 6em auto auto 70em;
    rotate: -16deg;
  }

  .winding-key:before {
    border: .4em solid var(--brass);
    border-radius: 50%;
    block-size: 2.2em;
    inline-size: 3em;
    inset: -.8em auto auto -1.4em;
  }

  .winding-key:after {
    background: var(--brass);
    block-size: 1.3em;
    inline-size: .7em;
    inset: 0 auto auto 3.3em;
  }

  .magnifier {
    border: .35em solid var(--brass);
    background: #9ac2cf33;
    border-radius: 50%;
    block-size: 3em;
    inline-size: 4em;
    inset: 2em auto auto 66em;
    rotate: 15deg;
    box-shadow: inset .2em .2em #d0effc55;
  }

  .magnifier:after {
    background: var(--wood-edge);
    border-inline-end: .5em solid var(--brass);
    block-size: .6em;
    inline-size: 4em;
    inset: 50% auto auto 100%;
  }

  .ink-bottle {
    background: linear-gradient(90deg, #ffffff30, #0000), #18273a;
    border: .2em solid #82a4ba;
    border-radius: .3em;
    block-size: 3.2em;
    inline-size: 2.7em;
    inset: 3.5em auto auto 79em;
  }

  .ink-bottle:before {
    background: var(--brass);
    block-size: .7em;
    inset: -.7em .4em auto;
  }

  .ink-bottle:after {
    background: var(--paper);
    block-size: 1em;
    inset: 1em .3em auto;
  }

  .quill {
    background: var(--paper);
    transform-origin: 50% 100%;
    block-size: 6em;
    inline-size: .15em;
    inset: -1em auto auto 82em;
    rotate: 23deg;
  }

  .quill:before {
    background: repeating-linear-gradient(-35deg, #e2cfb0 0 .4em, #f6ead0 .4em .5em);
    border-radius: 100% 0;
    block-size: 4.5em;
    inline-size: 1.8em;
    inset: -.4em auto auto -.8em;
  }

  .mug {
    background: linear-gradient(90deg, #384954, #80908e 40%, #3b4c56);
    border-block-start: .4em solid #bbc3af;
    border-radius: .4em .4em 1em 1em;
    block-size: 4.5em;
    inline-size: 4em;
    inset: 1em auto auto 86em;
    box-shadow: .3em .3em #0003;
  }

  .mug:before {
    border: .45em solid #63777a;
    border-radius: 0 1em 1em 0;
    block-size: 2.5em;
    inline-size: 1.6em;
    inset: .8em auto auto 90%;
  }

  .loose-cog {
    border: .5em dotted var(--brass);
    background: radial-gradient(circle, #0000 0 20%, var(--brass-light) 21% 50%, #0000 51%);
    border-radius: 50%;
    block-size: 2.5em;
    inline-size: 2.5em;
    inset: 2em auto auto 39em;
    rotate: 8deg;
  }

  .loose-cog:nth-last-child(2) {
    block-size: 2em;
    inline-size: 2em;
    inset: 5.6em auto auto 44em;
  }

  .loose-cog:last-child {
    block-size: 3em;
    inline-size: 3em;
    inset: 5.4em auto auto 61em;
  }

  .telescope {
    block-size: 24em;
    inline-size: 26em;
    inset: 30em auto auto 17em;
  }

  .tripod {
    block-size: 16em;
    inline-size: 12em;
    inset: 8em auto auto 9em;
  }

  .tripod i {
    background: linear-gradient(90deg, var(--wood-edge), var(--wood), var(--brass));
    transform-origin: 50% 0;
    border-block-end: 1em solid var(--brass);
    block-size: 16em;
    inline-size: 1.1em;
    inset: 0 auto auto 5em;
    rotate: 23deg;
  }

  .tripod i:nth-child(2) {
    rotate: -23deg;
  }

  .tripod i:nth-child(3) {
    opacity: .7;
    block-size: 13em;
    rotate: 0deg;
  }

  .tripod b {
    background: var(--brass);
    block-size: .4em;
    inset: 11em 1em auto;
  }

  .telescope-mount {
    border: .7em solid var(--brass);
    border-block-start: none;
    border-radius: 0 0 2em 2em;
    block-size: 6em;
    inline-size: 5em;
    inset: 3em auto auto 12em;
  }

  .telescope-mount:before {
    background: var(--brass-light);
    block-size: 2.3em;
    inline-size: .8em;
    inset: auto auto -2.7em 1em;
  }

  .telescope-mount i {
    border: .4em solid var(--brass-light);
    background: var(--wood-edge);
    border-radius: 50%;
    block-size: 1.8em;
    inline-size: 1.8em;
    inset: .8em auto auto -1.5em;
  }

  .barrel {
    border: .2em solid var(--brass);
    transform-origin: 50%;
    background: linear-gradient(var(--brass-light), var(--brass) 18%, #684b2b 42%, var(--brass) 64%, var(--brass-light) 76%, var(--brass) 95%);
    border-radius: .6em;
    block-size: 4.5em;
    inline-size: 27em;
    inset: 0 auto auto 0;
    rotate: -28deg;
    box-shadow: 0 .5em #0003;
  }

  .barrel:before {
    background: var(--brass-light);
    inline-size: 1em;
    box-shadow: -12em 0 var(--brass-light), .2em 0 #5b3b22, -11.8em 0 #5b3b22;
    inset: -.2em 22% -.2em auto;
  }

  .eyepiece {
    background: linear-gradient(#242a2c, #607475, #242a2c);
    border-radius: .3em;
    block-size: 2.5em;
    inline-size: 4em;
    inset: .8em 100% auto auto;
    box-shadow: -.6em 0 #1b252c;
  }

  .collar {
    border: .2em solid var(--brass-light);
    background: linear-gradient(var(--brass), var(--brass-light), var(--brass));
    border-radius: .4em;
    inline-size: 2em;
    inset: -.5em auto -.5em 93%;
  }

  .lens {
    border: .25em solid var(--brass-light);
    background: linear-gradient(120deg, #233747, #83c2cb 40%, #1a2943 60%);
    border-radius: 50%;
    block-size: 4.6em;
    inline-size: 1.4em;
    inset: -.25em auto auto 100%;
    box-shadow: inset -.2em 0 #0005;
  }

  .focus-wheel {
    border: .4em dotted var(--brass-light);
    background: var(--wood-edge);
    border-radius: 50%;
    block-size: 2em;
    inline-size: 2em;
    inset: auto auto -1.2em 7em;
  }

  .barrel b {
    color: var(--brass-light);
    letter-spacing: .1em;
    font: .6em / 1 Georgia, serif;
    inset: 2em auto auto 10em;
  }

  .orrery {
    block-size: 21em;
    inline-size: 28em;
    inset: 31em auto auto 43em;
  }

  .orrery-foot {
    background: var(--wood-edge);
    block-size: 2em;
    box-shadow: 0 .4em #0004, inset 0 .2em var(--brass);
    border-radius: 50%;
    inset: auto 4em -.4em;
  }

  .orrery-base {
    border: .3em solid var(--brass);
    background: linear-gradient(var(--brass-light) 0 12%, #203a42 13% 80%, var(--brass) 81%);
    border-radius: 50% / 20%;
    block-size: 5em;
    inset: auto 4.5em .5em;
    box-shadow: inset 0 -.4em #0003;
  }

  .orrery-base span {
    color: #f2d79c;
    text-align: center;
    letter-spacing: .17em;
    font: .6em / 1 Georgia, serif;
    position: absolute;
    inset: 2em 0 auto;
  }

  .bolt {
    inset: var(--y) auto auto var(--x);
    background: linear-gradient(45deg, #0000 43%, #664728 44% 56%, #0000 57%), var(--brass-light);
    border-radius: 50%;
    block-size: .45em;
    inline-size: .45em;
    translate: -50% -50%;
  }

  @supports (width: calc(sin(1rad) * 1px)) {
    .bolt {
      inset-block-start: calc(50% + sin(var(--angle)) * 40%);
      inset-inline-start: calc(50% + cos(var(--angle)) * 40%);
    }
  }

  .shaft {
    background: linear-gradient(90deg, #634c2f, var(--brass-light), var(--brass));
    block-size: 14em;
    inline-size: 1.2em;
    inset: 3em auto auto 13.4em;
  }

  .shaft:after {
    border: .2em solid var(--brass);
    background: var(--brass-light);
    border-radius: 50%;
    block-size: .8em;
    inset: 8em -1.2em auto;
  }

  .drive {
    z-index: 1;
    block-size: 7em;
    inline-size: 14em;
    inset: 13em auto auto 7em;
  }

  .gear {
    border: .35em dotted var(--brass);
    background: var(--brass);
    block-size: 4.6em;
    inline-size: 4.6em;
    animation: gear-turn calc(var(--t-drift) / 2) linear infinite;
    border-radius: 50%;
    inset: .6em auto auto 0;
    rotate: 0deg;
  }

  .gear:before {
    border: .15em solid var(--brass-light);
    background: radial-gradient(circle, #273536 0 13%, var(--brass-light) 14% 22%, var(--brass) 23% 60%, #76552c 61%);
    border-radius: 50%;
    inset: 12%;
  }

  .gear-large {
    block-size: 6.9em;
    inline-size: 6.9em;
    animation-duration: calc(var(--t-drift) * .75);
    animation-direction: reverse;
    inset: -.4em auto auto 4.4em;
  }

  @supports (background: repeating-conic-gradient(#000 0deg 5deg, #0000 5deg 10deg)) {
    .gear {
      background: repeating-conic-gradient(var(--brass) 0deg 7.5deg, #0000 7.5deg 15deg);
      border: 0;
    }

    .gear-large {
      background: repeating-conic-gradient(var(--brass) 0deg 5deg, #0000 5deg 10deg);
    }
  }

  @supports (mask-image: radial-gradient(#000, #0000)) {
    .gear {
      mask-image: radial-gradient(circle, #0000 0 7%, #000 8%);
    }
  }

  .crank {
    background: var(--brass-light);
    block-size: .6em;
    inline-size: 3em;
    inset: 3em auto auto 10em;
    rotate: -20deg;
  }

  .crank:after {
    content: "";
    background: var(--wood);
    border-radius: .3em;
    block-size: 1.5em;
    inline-size: 1em;
    position: absolute;
    inset: -.3em 0 auto auto;
  }

  @keyframes gear-turn {
    to {
      rotate: 360deg;
    }
  }

  .orbital-space {
    block-size: 28em;
    inline-size: 28em;
    inset: -7em 0 auto;
  }

  .orbital-plane {
    inset: 0;
    transform: scaleY(.47);
  }

  .carrier {
    inset: calc(50% - var(--diameter) / 2) auto auto calc(50% - var(--diameter) / 2);
    inline-size: var(--diameter);
    block-size: var(--diameter);
    border: .18em solid var(--brass);
    transform: rotateZ(var(--phase));
    animation: orbit var(--period) linear infinite;
    border-radius: 50%;
  }

  .carrier:before {
    background: var(--brass);
    block-size: .16em;
    inset: calc(50% - .08em) 0 auto 50%;
  }

  .planet {
    block-size: 2em;
    inline-size: 2em;
    transform: rotateZ(calc(-1 * var(--phase))) scaleY(2.13);
    animation: planet-face var(--period) linear infinite;
    background: radial-gradient(circle at 30% 25%, #e5cfac, #87735e 60%, #443d35);
    border: .12em solid #fff3;
    border-radius: 50%;
    inset: calc(50% - 1em) -1em auto auto;
  }

  .venus {
    background: radial-gradient(circle at 30% 25%, #f5d8a5, #c38b54 60%, #73503d);
    block-size: 2.7em;
    inline-size: 2.7em;
    inset-block-start: calc(50% - 1.35em);
  }

  .earth {
    background: radial-gradient(at 35% 30%, #abc69a 0 15%, #0000 16%), radial-gradient(at 60% 70%, #6f9b82 0 18%, #0000 19%), radial-gradient(circle at 30% 25%, #a5c7d5, #497c9d 60%, #233a59);
    block-size: 3.2em;
    inline-size: 3.2em;
    inset-block-start: calc(50% - 1.6em);
  }

  .saturn {
    background: repeating-linear-gradient(10deg, #ffffff18 0 .3em, #0000 .3em .7em), radial-gradient(circle at 30% 25%, #ead3a0, #b39770 60%, #6b5745);
    block-size: 3.7em;
    inline-size: 3.7em;
    inset-block-start: calc(50% - 1.85em);
  }

  .saturn:after {
    border: .5em solid #c7b088;
    border-radius: 50%;
    inset: .6em -1.2em;
    rotate: -20deg;
    box-shadow: 0 0 0 .15em #edd9b866;
  }

  .sun {
    background: radial-gradient(circle at 30% 25%, #fff0bb, #dcaa52 60%, #a77835);
    border-radius: 50%;
    inset: calc(50% - 2em);
    transform: scaleY(2.13);
    box-shadow: 0 0 2em #eacb6b30;
  }

  @keyframes orbit {
    from {
      transform: rotateZ(var(--phase));
    }

    to {
      transform: rotateZ(calc(var(--phase) + 360deg));
    }
  }

  @keyframes planet-face {
    from {
      transform: rotateZ(calc(-1 * var(--phase))) scaleY(2.13);
    }

    to {
      transform: rotateZ(calc(-1 * var(--phase) - 360deg)) scaleY(2.13);
    }
  }

  @supports (transform-style: preserve-3d) and (perspective: 1px) {
    .orbital-space {
      perspective: 70em;
    }

    .orbital-plane {
      transform-style: preserve-3d;
      transform: rotateX(62deg);
    }

    .carrier {
      transform-style: preserve-3d;
    }

    .planet {
      transform: rotateZ(calc(-1 * var(--phase))) rotateX(-62deg);
      animation-name: planet-face-3d;
    }

    .sun {
      transform: rotateX(-62deg);
    }

    @keyframes planet-face-3d {
      from {
        transform: rotateZ(calc(-1 * var(--phase))) rotateX(-62deg);
      }

      to {
        transform: rotateZ(calc(-1 * var(--phase) - 360deg)) rotateX(-62deg);
      }
    }
  }

  .desk-lamp {
    block-size: 15em;
    inline-size: 12em;
    inset: 37em auto auto 71em;
  }

  .lamp-foot {
    border: .3em solid var(--brass);
    background: #244143;
    border-radius: 50%;
    block-size: 1.8em;
    inset: auto 1em 0;
    box-shadow: 0 .3em #0004;
  }

  .lamp-stem {
    background: linear-gradient(90deg, var(--brass), var(--brass-light), var(--brass));
    block-size: 11em;
    inline-size: .7em;
    inset: 3em auto auto 5.5em;
  }

  .lamp-stem:before {
    border: .5em solid var(--brass);
    border-block-end: 0;
    border-radius: 3em 3em 0 0;
    block-size: 3em;
    inset: -2em -2em auto;
  }

  .lamp-shade {
    border: .3em solid var(--brass);
    background: linear-gradient(90deg, #1c3837, #4b7b6a 35%, #294c43 75%, #142f31);
    border-radius: 6em 6em .8em .8em;
    block-size: 5em;
    inset: 0 -1em auto;
    box-shadow: inset 0 .4em #ffffff20;
  }

  .bulb {
    background: var(--c-lamp, #ffe9b0);
    opacity: .15;
    block-size: 1em;
    transition: opacity var(--t-base) var(--ease-out);
    border-radius: 50%;
    inset: auto 1em -.6em;
  }

  .lamp-glow {
    pointer-events: none;
    opacity: 0;
    block-size: 27em;
    inline-size: 35em;
    transition: opacity var(--t-base) var(--ease-out);
    background: radial-gradient(48% 48%, #ffd1842b, #ffc1740a 50%, #0000 100%);
    inset: 34em auto auto 60em;
  }

  #lamp:checked ~ .room .lamp-glow, #lamp:checked ~ .room .bulb {
    opacity: 1;
  }

  .room-mark {
    color: var(--panel-ink);
    letter-spacing: .25em;
    font: .65em / 1 system-ui, sans-serif;
    position: absolute;
    inset: auto 0 -3em;
  }

  .room-mark span {
    float: right;
  }

  .control-input {
    clip-path: inset(50%);
    white-space: nowrap;
    block-size: 1px;
    inline-size: 1px;
    position: absolute;
    overflow: hidden;
  }

  .controls {
    z-index: 3;
    inset: auto auto max(1rem, env(safe-area-inset-bottom)) 50%;
    border: 1px solid var(--panel-ink);
    background: var(--panel);
    inline-size: max-content;
    max-inline-size: calc(100% - 2rem);
    color: var(--panel-ink);
    border-radius: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem;
    padding: .25rem;
    font: 500 .8rem / 1.3 system-ui, sans-serif;
    display: flex;
    position: absolute;
    translate: -50%;
    box-shadow: 0 .4rem 1.5rem #0002;
  }

  .controls label {
    cursor: pointer;
    border: 1px solid #0000;
    border-radius: .7rem;
    align-items: center;
    gap: .6em;
    min-block-size: 44px;
    min-inline-size: 44px;
    padding: .5rem .75rem;
    display: flex;
  }

  .check-mark {
    border: 1.5px solid;
    border-radius: .2em;
    flex: none;
    block-size: 1.1em;
    inline-size: 1.1em;
  }

  #pause:checked ~ .controls [for="pause"] .check-mark, #lamp:checked ~ .controls [for="lamp"] .check-mark {
    background: var(--panel-ink);
    box-shadow: inset 0 0 0 .15em var(--panel);
  }

  #pause:focus-visible ~ .controls [for="pause"], #lamp:focus-visible ~ .controls [for="lamp"] {
    outline: 3px solid var(--focus);
    outline-offset: -3px;
  }

  @supports selector(:has(*)) {
    .stage:has(#pause:checked) .controls [for="pause"] {
      border-color: currentColor;
    }
  }

  #pause:checked ~ .room *, #pause:checked ~ .room :before, #pause:checked ~ .room :after {
    animation-play-state: paused;
  }

  .motion-note {
    text-align: center;
    flex-basis: 100%;
    padding: 0 .75rem .5rem;
    font-size: .75em;
    display: none;
  }

  @media (aspect-ratio < 1) {
    .scene-title {
      inset: max(4rem, env(safe-area-inset-top)) auto auto 5%;
      max-inline-size: 90%;
      font-size: clamp(1rem, 4vw, 1.4rem);
    }

    .scene-title small {
      font-size: .48em;
    }

    .room {
      block-size: 172em;
      font-size: min(.92vw, .581395dvh - .0813954rem);
      inset-block-start: calc(50% - .25rem);
    }

    .dome {
      block-size: 80em;
    }

    .rib {
      block-size: 90em;
    }

    .sky-window {
      border-radius: 32em 32em 0 0;
      block-size: 72em;
      inline-size: 62em;
      inset: 3em auto auto 20em;
    }

    .moon {
      block-size: 7em;
      inline-size: 7em;
      inset: 12em auto auto 36em;
    }

    .constellation {
      inset: 25% 15% 30% 8%;
    }

    .wall {
      block-size: 81em;
      inset-block-start: 73em;
    }

    .floor {
      block-size: 22em;
      inset-block-start: 148em;
    }

    .wall-clock {
      transform-origin: 0 0;
      inset: 28em auto auto 3em;
      scale: 1.4;
    }

    .astrolabe {
      transform-origin: 0 0;
      inset: 65em auto auto 79em;
      scale: 1.2;
    }

    .star-chart {
      block-size: 23em;
      inline-size: 30em;
      inset: 34em auto auto 52em;
    }

    .star-chart svg {
      block-size: 17em;
    }

    .star-chart span {
      font-size: 1.2em;
    }

    .star-chart small {
      font-size: .8em;
    }

    .chalkboard {
      block-size: 12em;
      inline-size: 18em;
      inset: 81em auto auto 60em;
    }

    .chalkboard span {
      font-size: 1em;
    }

    .chalkboard small {
      font-size: .9em;
    }

    .chalkboard i {
      block-size: 4em;
      inset: 4em 4em auto;
    }

    .shelves {
      block-size: 24em;
      inline-size: 43em;
      inset: 62em auto auto 9em;
    }

    .books {
      gap: .6em;
      block-size: 12em;
    }

    .book {
      block-size: calc(var(--height) * 1.35);
    }

    .book b {
      font-size: .95em;
    }

    .shelves:before {
      box-shadow: 0 11em var(--wood), 0 .2em var(--brass), 0 11.2em var(--brass);
      inset-block-start: 12em;
    }

    .bottles {
      transform-origin: 0 100%;
      inset: 16em auto auto 3em;
      scale: 1.3;
    }

    .plant {
      transform-origin: 0 100%;
      inset: 16em auto auto 32em;
      scale: 1.3;
    }

    .shelf-label {
      font-size: .9em;
    }

    .telescope {
      transform-origin: 0 0;
      inset: 97em auto auto 9em;
      scale: 1.5;
    }

    .orrery {
      transform-origin: 0 0;
      inset: 102em auto auto 54em;
      scale: 1.45;
    }

    .desk-lamp {
      transform-origin: 0 0;
      inset: 119em auto auto 78em;
      scale: 1;
    }

    .workbench {
      block-size: 20em;
      inset-block-start: 134em;
    }

    .drawer {
      block-size: 12em;
      inline-size: 26em;
    }

    .drawer:before {
      block-size: 1.5em;
      inset-block-start: 5em;
    }

    .drawer span {
      font-size: 1.5em;
    }

    .tools {
      inset-block-start: -6em;
    }

    .drawing {
      block-size: 10em;
      inline-size: 23em;
      inset: 0 auto auto 1em;
    }

    .drawing svg {
      block-size: 8em;
    }

    .drawing span {
      font-size: .8em;
    }

    .notebook {
      block-size: 7em;
      inline-size: 16em;
      inset: 3em auto auto 27em;
    }

    .compass {
      inset: 0 auto auto 45em;
    }

    .calipers {
      inset: 7em auto auto 46em;
    }

    .loose-cog {
      inset-inline-start: 51em;
    }

    .loose-cog:nth-last-child(2) {
      inset: 8em auto auto 57em;
    }

    .loose-cog:last-child {
      inset: 7em auto auto 62em;
    }

    .magnifier {
      inset: 3em auto auto 67em;
    }

    .winding-key {
      inset: 9em auto auto 71em;
    }

    .ink-bottle {
      inset: 5em auto auto 80em;
    }

    .quill {
      inset: 1em auto auto 82em;
    }

    .mug {
      inset: 4em auto auto 87em;
    }

    .stool {
      transform-origin: 0 0;
      inset: 151em auto auto 12em;
      scale: 1.6;
    }

    .lamp-glow {
      block-size: 42em;
      inset: 112em auto auto 60em;
    }

    .room-mark {
      font-size: 1em;
    }
  }

  @media (height < 650px) and (aspect-ratio >= 1) {
    .scene-title small {
      display: none;
    }

    .room {
      font-size: min(.9vw, 1.05dvh);
      inset-block-start: 46%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .room *, .room :before, .room :after {
      transition: none !important;
      animation: none !important;
    }

    .motion-note {
      display: block;
    }
  }
}

@layer utilities;