<!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 & 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;