/* ═══════════════════════════════════════════════════════════════════════════
   The widgets' own skins.

   ONE LIGHT, DECLARED ONCE: from just left of straight above. Every raised
   thing in here carries a lit hairline on its TOP inner edge, a shaded one on
   its BOTTOM inner edge, and a cast shadow BELOW. Every recessed thing carries
   exactly the opposite — dark at the top of the well, light at the foot —
   because a well is occluded by its own sides. Nothing below contradicts that.
   [[deboss-sign-must-be-measured]]

   ALL LENGTHS ARE `cqw` OF THE TILE, which is a container-type:inline-size. So
   the tile is 100 units wide whatever size it is drawn at, and every widget
   renders unchanged at 171pt on the board and at 38pt in the composer chip.
   ═══════════════════════════════════════════════════════════════════════════ */

.field{container-type:inline-size;container-name:tile}
.w{position:absolute;inset:0;overflow:hidden}

/* ═══ THE ROOM ══════════════════════════════════════════════════════════════
   ⚠ A FLAT FILL IS NOT A SURFACE. Measured, a dozen of these were 70–95% one
   quantised colour, which is what makes a tile read as an empty card with
   something printed on it rather than as an object standing in a room. Every
   widget gets the same two things a real surface has: a fine grain, and a
   light that falls off toward the far corner.

   ⚠ AND IT IS ONE GRAIN AND ONE LIGHT, shared, because forty-six different
   noises at forty-six different angles is not a room, it is a collage.
   ═════════════════════════════════════════════════════════════════════════ */
.field::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:9;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size:30cqw 30cqw;
  opacity:.055;mix-blend-mode:overlay;
}
.field::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:8;
  background:radial-gradient(128% 108% at 22% -6%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.13) 100%);
}
/* the two widgets that ARE a photograph of a room already */
.field:has(.w-place)::before,.field:has(.w-jot)::before{background:none}


.w-mono,.w .mono{font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace}

/* ═══ THE SIX FROM THE FIGMA TILE ═══════════════════════════════════════════
   All six are the same object: a DEVICE, inset on a plain ground, with a soft
   shadow under it. That is the reference's construction and it is the thing
   that makes them read as apps rather than as screenshots. Two grounds only —
   #f8f6f3 for the light three, #111111 for the dark three — both sampled off
   the artwork, as is every colour below.
   ═════════════════════════════════════════════════════════════════════════ */
/* ⚠ THE DEVICE IS THE TILE. It was inset on a ground with a shadow under it,
   which is how the Figma ARTWORK is drawn — but that artwork is a picture of a
   widget sitting on a home screen, and here the tile already IS the widget's
   frame. Inset, every device came out a different apparent size (the piano
   small in a wide cream margin, Today small in a black one) and the board read
   as six screenshots rather than six apps. Edge to edge, they are all exactly
   one size, and the tile's own radius and elevation do the standing-off. */
.dev{
  position:absolute;inset:0;
  border-radius:inherit;overflow:hidden;
}

/* ── 1 · the scope ──────────────────────────────────────────────────────── */
.w-scope .dev{background:linear-gradient(#242220,#141311);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.w-scope .crt{
  position:absolute;left:5%;right:5%;top:5%;bottom:19.5%;
  border-radius:2.5cqw;overflow:hidden;
  background:radial-gradient(120% 100% at 50% 40%,#0d1a0f 0%,#070f08 100%);
  box-shadow:inset 0 1cqw 2.4cqw rgba(0,0,0,.8);
}
.w-scope .crt::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(to right,rgba(120,255,150,.09) 0 1px,transparent 1px 16.6%),
    repeating-linear-gradient(to bottom,rgba(120,255,150,.09) 0 1px,transparent 1px 20%);
}
.w-scope .crt::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.4;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.3) 0 1px,transparent 1px 3px);
}
.w-scope .wave{position:absolute;left:3%;top:24%;width:94%;height:52%}
.w-scope .line{stroke:#5bf07a;stroke-width:1.8;filter:drop-shadow(0 0 2px rgba(90,240,120,.9))}
.w-scope .glow{stroke:rgba(90,240,120,.22);stroke-width:5}
.w-scope .l{
  position:absolute;font-family:ui-monospace,Menlo,monospace;
  font-size:5.5cqw;letter-spacing:.02em;color:#55e072;
  text-shadow:0 0 5px rgba(85,224,114,.6);
}
.w-scope .tl{left:5.5%;top:5%}
.w-scope .tr{right:5.5%;top:5%}
.w-scope .bl{left:5.5%;bottom:5%}
.w-scope .br{right:5.5%;bottom:5%}
/* the status row is printed on the CASE, under the screen — which is what says
   this is an instrument with a screen in it rather than a screen */
.w-scope .status{
  position:absolute;left:6.5%;right:6.5%;bottom:5.5%;
  display:flex;align-items:center;justify-content:space-between;
  font-family:ui-monospace,Menlo,monospace;font-size:4.4cqw;letter-spacing:.1em;
  color:#8f8d88;
}
.w-scope .status .st{display:flex;align-items:center;gap:2cqw}
.w-scope .status i{width:2.6cqw;height:2.6cqw;border-radius:50%;background:#4ce06f;box-shadow:0 0 5px #4ce06f}

/* ── 2 · the player ─────────────────────────────────────────────────────── */
.w-player .dev{--warm:1;
  background:linear-gradient(#fdfaf1 0%,#f2ece0 46%,#ddd5c4 100%);
  box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.05);
}
.w-player .lcd{
  position:absolute;left:6%;right:6%;top:5.5%;height:40%;
  border-radius:1.4cqw;overflow:hidden;
  background:linear-gradient(#b9bfb2,#a7ae9f);
  box-shadow:inset 0 0 0 1px rgba(60,70,58,.28), 0 .5cqw 1cqw rgba(60,70,58,.18);
  font-family:ui-monospace,Menlo,monospace;color:#232a21;
}
.w-player .lcd::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.10) 0 1px,transparent 1px 3px);
}
.w-player .hd{
  display:flex;justify-content:space-between;align-items:center;
  padding:1.2cqw 2.2cqw;background:#535f52;color:#f2f4ef;font-size:4.4cqw;
}
.w-player .body{padding:1.8cqw 2.6cqw 0}
.w-player .ttl{font-family:'Selecta',sans-serif;font-weight:500;font-size:6.9cqw;letter-spacing:-.02em;line-height:1.1}
.w-player .who{font-family:'Selecta',sans-serif;font-size:4.4cqw;color:rgba(35,42,33,.66);margin-top:.2cqw}
.w-player .prog{
  margin-top:2cqw;height:1.6cqw;border-radius:1cqw;overflow:hidden;
  background:rgba(40,52,45,.22);
}
.w-player .prog i{display:block;height:100%;background:#3b4738}
.w-player .t{display:flex;justify-content:space-between;font-size:4.4cqw;color:rgba(35,42,33,.72);margin-top:1.2cqw}
.w-player .wheel{
  position:absolute;left:50%;top:49.5%;transform:translateX(-50%);
  width:45%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;
  background:radial-gradient(120% 120% at 32% 22%,#f4f1ec 0%,#e6e2dc 52%,#d7d3cc 100%);
  box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.08),
             0 0 0 1px rgba(0,0,0,.05), 0 1cqw 2cqw rgba(60,50,36,.12);
}
.w-player .wheel .sheen{
  position:absolute;inset:-30%;
  background:conic-gradient(from 0deg,rgba(255,255,255,0) 0deg,rgba(255,255,255,.7) 40deg,rgba(255,255,255,0) 96deg,rgba(0,0,0,.04) 190deg,rgba(255,255,255,0) 300deg);
  opacity:.45;
}
.w-player .wheel .ctr{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:40%;height:40%;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 34% 24%,#fbf9f6,#dedad3);
  box-shadow:0 0 0 1px rgba(0,0,0,.06), inset 0 1px 0 #fff, 0 .5cqw 1cqw rgba(60,50,36,.14);
}
.w-player .wheel .ctr b{font-family:ui-monospace,Menlo,monospace;font-size:4.4cqw;color:#4a4640;font-weight:400}
.w-player .wl{
  position:absolute;font-family:ui-monospace,Menlo,monospace;font-size:3.5cqw;
  color:rgba(70,66,60,.62);letter-spacing:.06em;
}
.w-player .wl.menu{left:50%;top:5%;transform:translateX(-50%)}
.w-player .wl.prev{left:5%;top:50%;transform:translateY(-50%)}
.w-player .wl.next{right:5%;top:50%;transform:translateY(-50%)}
.w-player .wl.play{left:50%;bottom:5%;transform:translateX(-50%)}

/* ── 3 · today ──────────────────────────────────────────────────────────── */
.w-today .dev{background:linear-gradient(#fffdf7,#f4efe3);padding:8.5cqw 8cqw}
.w-today .hd{font-weight:500;font-size:11cqw;letter-spacing:-.03em;line-height:1}
.w-today .sub{margin-top:1.4cqw;font-size:5.5cqw;color:rgba(25,25,25,.42)}
.w-today ul{list-style:none;margin-top:7cqw;display:flex;flex-direction:column;gap:5cqw}
.w-today li{display:flex;align-items:center;gap:3.4cqw}
.w-today .box{
  flex:none;width:7.6cqw;height:7.6cqw;border-radius:1.4cqw;
  display:grid;place-items:center;
  box-shadow:inset 0 0 0 1.4px rgba(25,25,25,.3);
  transition:background .26s var(--ease),box-shadow .26s var(--ease);
}
.w-today .box svg{width:5.6cqw;height:5.6cqw;opacity:0;transform:scale(.5);transition:opacity .2s var(--ease),transform .32s var(--spring)}
.w-today li.on .box{background:#2f6bff;box-shadow:inset 0 0 0 1.4px #2f6bff}
.w-today li.on .box svg{opacity:1;transform:none}
.w-today b{
  font-weight:400;font-size:5.5cqw;letter-spacing:-.014em;color:#191919;
  position:relative;transition:color .26s var(--ease);
}
.w-today b::after{
  content:'';position:absolute;left:-.4cqw;right:-.4cqw;top:52%;height:1.2px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .34s var(--ease);
}
.w-today li.on b{color:rgba(25,25,25,.42)}
.w-today li.on b::after{transform:scaleX(1)}

/* ── 4 · the piano ──────────────────────────────────────────────────────── */
.w-keys .dev{
  background:linear-gradient(#5a3c22,#28170a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.w-keys .board{position:absolute;left:4%;right:4%;top:6.5%;bottom:4%;display:flex;border-radius:1cqw;overflow:hidden}
.w-keys .wk{
  flex:1;height:100%;--iv:1;
  background:linear-gradient(#fdfcf6 0%,#f4f1e5 72%,#e6e1d1 100%);
  box-shadow:inset -1px 0 0 rgba(60,48,30,.16), inset 0 1px 0 rgba(255,255,255,.9),
             inset 0 -1.4cqw 1.4cqw rgba(120,110,88,.14);
  transition:filter .07s linear,box-shadow .07s linear;
}
.w-keys .wk.on{
  box-shadow:inset -1px 0 0 rgba(60,48,30,.16), inset 0 3cqw 3cqw rgba(90,78,58,.34),
             inset 0 -1.4cqw 1.4cqw rgba(120,110,90,.2);
}
.w-keys .bk{
  position:absolute;top:0;width:4.6%;height:60%;
  border-radius:0 0 .8cqw .8cqw;
  background:linear-gradient(#3a3936 0%,#151413 76%,#000 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), .3cqw 1.2cqw 1.4cqw rgba(0,0,0,.44);
  transform:translateX(-50%);
  transition:filter .07s linear;
}
.w-keys .bk.on{filter:brightness(1.6)}

/* ── 5 · the ticker ─────────────────────────────────────────────────────── */
.w-ticker .dev{--tint:1;
  background:#232320;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  font-family:ui-monospace,Menlo,monospace;
}
.w-ticker .top{
  position:absolute;left:5.5%;right:5.5%;top:5%;height:12%;
  display:flex;align-items:center;gap:2.4cqw;
}
.w-ticker .badge{
  width:6.4cqw;height:6.4cqw;border-radius:50%;display:grid;place-items:center;
  background:#f0a02a;color:#1a1408;font-size:4.4cqw;font-weight:700;
}
.w-ticker .pair{font-size:4.4cqw;letter-spacing:.06em;color:#f2f2f0}
.w-ticker .live{margin-left:auto;display:flex;align-items:center;gap:1.8cqw;font-size:4.4cqw;letter-spacing:.08em;color:#e8e8e6}
.w-ticker .live i{width:2.4cqw;height:2.4cqw;border-radius:50%;background:#4ce06f;box-shadow:0 0 5px #4ce06f}
.w-ticker .screen{--t:1;
  position:absolute;left:4.5%;right:4.5%;top:18%;bottom:15.5%;
  border-radius:1.6cqw;overflow:hidden;
  background:#151513;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.w-ticker .screen::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);
}
.w-ticker .name{font-size:4.4cqw;letter-spacing:.24em;color:#c48b2e}
.w-ticker .fig{
  margin-top:1.6cqw;font-size:13.8cqw;letter-spacing:-.01em;color:#ffbe4d;
  text-shadow:0 0 5cqw rgba(255,150,30,.55), 0 0 1.4cqw rgba(255,180,80,.7);
  font-variant-numeric:tabular-nums;
}
.w-ticker .pct{margin-top:1.6cqw;font-size:5.5cqw;color:#4ce06f;text-shadow:0 0 2cqw rgba(76,224,111,.5)}
.w-ticker .pct.down{color:#ff7a6b;text-shadow:0 0 2cqw rgba(255,122,107,.45)}
.w-ticker .strip{
  position:absolute;left:0;right:0;bottom:0;height:11%;overflow:hidden;
  display:flex;align-items:center;
  background:#1a1a18;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.w-ticker .run{white-space:nowrap;font-size:3.5cqw;color:#e0a63c;padding-left:5cqw}

/* ── 6 · the photograph ─────────────────────────────────────────────────── */
.w-place .dev{background:#2a3038}
.w-place img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.w-place .mist{
  position:absolute;left:-50%;right:-50%;top:30%;height:34%;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.2) 40%,rgba(255,255,255,.05) 70%,rgba(255,255,255,0) 100%);
  filter:blur(3cqw);
}
.w-place .scrim{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(10,14,20,.26) 0%,rgba(10,14,20,0) 30%,rgba(8,10,14,.55) 78%,rgba(6,8,12,.72) 100%);
}
.w-place .temp{
  position:absolute;right:6%;top:5%;
  font-weight:500;font-size:11cqw;letter-spacing:-.03em;color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.w-place .cap{position:absolute;left:7%;right:7%;bottom:6%;display:flex;flex-direction:column;color:#fff}
.w-place .kick{font-size:3.5cqw;letter-spacing:.26em;color:rgba(255,255,255,.72)}
.w-place .ttl{margin-top:1.4cqw;font-weight:500;font-size:11cqw;line-height:1;white-space:nowrap;letter-spacing:-.03em;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.w-place .sub{font-style:italic;font-size:6.9cqw;line-height:1.2;letter-spacing:-.01em;color:rgba(255,255,255,.94)}
.w-place .foot{margin-top:1.6cqw;font-size:4.4cqw;color:rgba(255,255,255,.7)}

/* ── 7 · the garden ────────────────────────────────────────────────────── */
.w-garden{background:#f3f6ee;overflow:hidden}
.w-garden .hold{position:absolute;inset:0}
.w-garden .cap{position:absolute;left:8cqw;right:8cqw;bottom:6cqw;display:flex;align-items:baseline;justify-content:space-between}
.w-garden .cap b{font-weight:500;font-size:7.4cqw;letter-spacing:-.03em;color:#f6f4ec;text-shadow:0 .5cqw 2cqw rgba(20,14,8,.6)}
.w-garden .cap span{font-size:4.4cqw;letter-spacing:.08em;text-transform:uppercase;color:rgba(246,244,236,.66);text-shadow:0 .4cqw 1.6cqw rgba(20,14,8,.6)}

/* ── 8 · the mark ──────────────────────────────────────────────────────── */
.w-orbs{background:#f4f4f2;overflow:hidden}
.w-orbs .hold{position:absolute;inset:0}
.w-orbs .caret{position:absolute;right:19cqw;top:44cqw;width:1.2cqw;height:12cqw;border-radius:.6cqw;background:#1c1c1e;animation:orbcaret 1.1s steps(1,end) infinite}
[data-v="2"] .w-orbs .caret{background:#f2efe8}
@keyframes orbcaret{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ── 9 · two players ──────────────────────────────────────────────────── */
.w-pong{background:#0a1018;padding:0}
.w-pong .court{position:absolute;inset:0;background:radial-gradient(130% 100% at 50% 0%,#16222f,#060a10 74%)}
.w-pong .mid{
  position:absolute;left:6%;right:6%;top:50%;height:1px;
  background:repeating-linear-gradient(to right,rgba(255,255,255,.30) 0 3cqw,transparent 3cqw 6cqw);
}
.w-pong .sc{
  position:absolute;font-family:ui-monospace,Menlo,monospace;font-size:11cqw;
  color:rgba(255,255,255,.20);
}
.w-pong .sc.a{left:8cqw;top:32%;transform:translateY(-50%)}
.w-pong .sc.b{right:8cqw;top:68%;transform:translateY(-50%)}
.w-pong .bat{
  position:absolute;width:26%;height:2.2cqw;border-radius:1.1cqw;background:#fff;
  transform:translateX(-50%);
}
.w-pong .bat.top{top:8%}
.w-pong .bat.bot{bottom:8%}
.w-pong .ball{
  position:absolute;width:5cqw;height:5cqw;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%);
  box-shadow:0 0 4cqw rgba(255,255,255,.28);
}

/* ── 10 · the week ────────────────────────────────────────────────────── */
.w-week{background:linear-gradient(#fdfdfc,#f4f4f2);padding:8cqw 7cqw}
.w-week .days{display:grid;grid-template-columns:repeat(7,1fr);gap:1.6cqw;margin-bottom:2.6cqw}
.w-week .days span{
  text-align:center;font-size:4.4cqw;letter-spacing:.02em;color:rgba(25,25,25,.3);
}
.w-week .grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:2cqw;
  position:absolute;left:7cqw;right:7cqw;top:17cqw;bottom:8cqw;
}
/* ⚠ AN UNNAMED HOUR IS A TICK, NOT NOTHING — an empty grid has to still be a
   grid, or the widget's first second reads as a tile that failed to load. And
   ⚠ the tick cannot live inside the element whose OPACITY is animated: fading
   the cell fades its own outline with it. So the fill is a background-color
   alpha written by draw(), and the outline is a box-shadow that never moves. */
.w-week .grid i{
  border-radius:1.6cqw;
  background:rgba(47,107,255,var(--a,0));
  box-shadow:inset 0 0 0 1px rgba(25,25,25,.065);
  transition:background-color .22s linear;
}

/* ── 11 · the camera ──────────────────────────────────────────────────── */
.w-film{background:linear-gradient(#f7f5f0,#eceae3)}
.w-film .pile{
  position:absolute;left:8cqw;right:8cqw;top:7cqw;height:72cqw;border-radius:1cqw;
  background:#fff;box-shadow:0 .6cqw 1.6cqw rgba(40,34,24,.16);
}
.w-film .pile.p2{transform:rotate(4.4deg)}
.w-film .pile.p1{transform:rotate(-6deg)}
.w-film .print{
  position:absolute;left:7cqw;right:7cqw;top:6cqw;
  padding:2.8cqw 2.8cqw 0;border-radius:1cqw;background:#fff;
  box-shadow:0 1cqw 2.6cqw rgba(40,34,24,.24), inset 0 1px 0 #fff;
  will-change:transform;
}
.w-film .pic{
  position:relative;height:60cqw;border-radius:.4cqw;overflow:hidden;
  background:linear-gradient(#2d3f5c 0%,#7d6a86 42%,#d99a72 74%,#f2c79a 100%);
  will-change:opacity,filter;
}
.w-film .pic .sun{position:absolute;left:26%;top:44%;width:16cqw;height:16cqw;border-radius:50%;background:radial-gradient(#fff6df,#ffcf8a 62%,rgba(255,190,120,0) 72%)}
.w-film .pic .sea{position:absolute;left:0;right:0;bottom:0;height:36%;background:linear-gradient(rgba(30,40,60,.42),rgba(20,28,44,.62))}
.w-film .foot{padding:2.2cqw 0 2.6cqw;text-align:right}
.w-film .foot span{font-family:ui-monospace,Menlo,monospace;font-size:3.5cqw;color:rgba(40,34,24,.42)}
.w-film .count{
  position:absolute;left:0;right:0;bottom:5cqw;text-align:center;
  font-size:5.5cqw;letter-spacing:-.012em;color:rgba(25,25,25,.42);
}
.w-film .count b{font-weight:500;color:rgba(25,25,25,.78)}
.w-film .flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}

/* ── 12 · the record ──────────────────────────────────────────────────── */
.w-record{background:linear-gradient(#332a20,#16110c)}
.w-record .plate{--warm:1;
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:84cqw;height:84cqw;border-radius:50%;
  background:radial-gradient(120% 120% at 30% 20%,#453a2c,#1c1712);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 1.6cqw 3cqw rgba(0,0,0,.5);
  overflow:hidden;
}
.w-record .disc{
  position:absolute;inset:5cqw;border-radius:50%;
  background:#0a0a0b;
  box-shadow:0 0 0 1px rgba(255,255,255,.06), inset 0 0 6cqw rgba(0,0,0,.9);
  will-change:transform;
}
.w-record .grooves{
  position:absolute;inset:0;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.055) 0 .6cqw,rgba(0,0,0,0) .6cqw 1.5cqw);
}
.w-record .label{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:32%;height:32%;border-radius:50%;
  background:radial-gradient(#f3e2c2,#dcc196);
  box-shadow:0 0 0 1px rgba(0,0,0,.2);
}
.w-record .label::before{
  content:'';position:absolute;left:14%;right:14%;top:38%;height:1px;background:rgba(90,60,30,.35);
}
.w-record .spindle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:3.4%;height:3.4%;border-radius:50%;background:#cfcac2;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.w-record .sheen{
  position:absolute;inset:-20%;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.16) 47%,rgba(255,255,255,.02) 55%,rgba(255,255,255,0) 64%);
}
.w-record .arm{
  position:absolute;right:6cqw;top:9cqw;width:8cqw;height:56cqw;
  transform-origin:50% 8%;
}
.w-record .arm .tone{
  position:absolute;left:50%;top:6%;width:1.6cqw;height:94%;transform:translateX(-50%);
  border-radius:.8cqw;background:linear-gradient(#e6e3dd,#a9a5a0);
  box-shadow:0 .6cqw 1.2cqw rgba(0,0,0,.45);
}
.w-record .arm .head{
  position:absolute;left:50%;bottom:-1cqw;width:5cqw;height:7cqw;transform:translateX(-50%);
  border-radius:1cqw;background:linear-gradient(#4a4744,#232120);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 .6cqw 1.2cqw rgba(0,0,0,.5);
}
.w-record .arm::before{ /* the pivot */
  content:'';position:absolute;left:50%;top:0;width:9cqw;height:9cqw;transform:translate(-50%,-42%);
  border-radius:50%;background:radial-gradient(120% 120% at 34% 24%,#5a5651,#26241f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 .8cqw 1.4cqw rgba(0,0,0,.5);
}

/* ── the clock ─────────────────────────────────────────────────────────── */
.w-clock .dev{background:#f3ece1}
.w-clock .hold{position:absolute;inset:0}

/* ── 14 · the stamp ───────────────────────────────────────────────────── */
/* ⚠ A PERFORATION ONLY READS AGAINST SOMETHING ELSE. The stamp's paper and the
   tile's paper were within a couple of levels of each other, so the teeth were
   cut correctly and completely invisible — it looked like a plain rectangle and
   read as a mask that had failed. The ground goes darker; the stamp goes
   brighter. */
.w-stamp{background:linear-gradient(#e4dac4,#d6cab0)}
.w-stamp .sheet{position:absolute;inset:0 0 7cqw;display:grid;place-items:center}
.w-stamp .st{
  position:relative;height:71cqw;aspect-ratio:100/130;
  filter:drop-shadow(0 1.2cqw 2cqw rgba(70,54,30,.30));
}
/* the light travelling over the paper — the whole tile is a sheet in a hand */
.w-stamp .st::after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(108deg,
    rgba(255,255,255,0) calc(var(--sheen,50%) - 26%),
    rgba(255,255,255,.34) var(--sheen,50%),
    rgba(255,255,255,0) calc(var(--sheen,50%) + 26%));
  mix-blend-mode:soft-light;
}
.w-stamp .st svg{position:absolute;inset:0;width:100%;height:100%}
.w-stamp .ink{position:absolute;inset:0;will-change:opacity}
.w-stamp .roller{
  position:absolute;left:-6%;right:-6%;top:0;height:16%;
  background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.78),rgba(255,255,255,0));
  pointer-events:none;
}
.w-stamp .hand{
  position:absolute;left:0;right:0;bottom:2.6cqw;text-align:center;
  font-size:4.4cqw;letter-spacing:.02em;color:rgba(50,38,18,.5);
}
.w-stamp .hand b{font-weight:500;color:rgba(60,48,28,.7)}

/* ── reduced motion: the widgets are ambient by definition, and ambient
      motion is the first thing this setting is about. They keep their POSE
      (a wave, a wheel, a bed of flowers) and stop moving. ────────────────── */
@media (prefers-reduced-motion:reduce){
  .w-keys .wk,.w-keys .bk,.w-today .box,.w-today b,.w-today b::after,.w-week .grid i{transition:none}
}

/* the mark tile's caret: the one tile that writes nothing says so, by blinking
   where the words would start */
.w-orbs .caret{
  position:absolute;right:12cqw;top:50%;transform:translateY(-50%);
  width:1.6cqw;height:19cqw;border-radius:.6cqw;background:rgba(25,25,25,.62);
  animation:blink 1.08s steps(1,end) infinite;
}
@keyframes blink{0%,54%{opacity:1}55%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.w-orbs .caret{animation:none;opacity:.6}}

/* ── 15 · the globe ───────────────────────────────────────────────────────
   Lit from the top left like everything else in the app, which for a sphere
   means the highlight sits up and left of centre and the limb goes dark at the
   bottom right. */
.w-globe{background:radial-gradient(120% 100% at 20% 0%,#161a24 0%,#080a10 72%);overflow:hidden}
.w-globe .space{
  position:absolute;inset:0;
  background:
    radial-gradient(1px 1px at 18% 22%,rgba(255,255,255,.5),transparent 60%),
    radial-gradient(1px 1px at 72% 14%,rgba(255,255,255,.34),transparent 60%),
    radial-gradient(1px 1px at 86% 62%,rgba(255,255,255,.28),transparent 60%),
    radial-gradient(1px 1px at 34% 78%,rgba(255,255,255,.22),transparent 60%);
}
.w-globe .ball{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:74cqw;height:74cqw;border-radius:50%;overflow:hidden;
  background:radial-gradient(120% 120% at 28% 22%,#3f6f9e 0%,#22456a 46%,#12253c 78%,#0b1725 100%);
  box-shadow:0 0 6cqw rgba(90,150,220,.22), inset 0 0 0 1px rgba(160,200,240,.14);
}
/* the longitudes: a band of hairlines wider than the sphere, sliding behind it */
.w-globe .grid{
  position:absolute;left:-30%;top:0;width:160%;height:100%;
  background:
    repeating-linear-gradient(to right,rgba(180,215,245,.16) 0 1px,transparent 1px 7%),
    repeating-linear-gradient(to bottom,rgba(180,215,245,.10) 0 1px,transparent 1px 13%);
}
.w-globe .land{position:absolute;border-radius:50%;filter:blur(1.6cqw);background:rgba(120,150,120,.5)}
.w-globe .land.a{left:12%;top:26%;width:40%;height:30%}
.w-globe .land.b{left:48%;top:52%;width:34%;height:26%;background:rgba(130,140,110,.45)}
.w-globe .land.c{left:56%;top:12%;width:22%;height:18%;background:rgba(110,145,125,.4)}
.w-globe .lit{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(46% 46% at 28% 22%,rgba(255,255,255,.30),rgba(255,255,255,0) 70%);
}
.w-globe .limb{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(120% 120% at 30% 24%,rgba(0,0,0,0) 42%,rgba(0,0,0,.55) 88%);
  box-shadow:inset -1.4cqw -1.4cqw 4cqw rgba(0,0,0,.5);
}
/* the pin: a bead on a needle, standing off the surface, with a hairline ring
   on the ground under it — the ring is the thing touching the coordinate */
.w-globe .pin{position:absolute;left:47%;top:56%;width:5cqw;height:14cqw}
.w-globe .pin b{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:5cqw;height:5cqw;border-radius:50%;
  background:radial-gradient(120% 120% at 32% 26%,#fff,#ff6a4d 62%,#c9331c);
  box-shadow:0 0 2.6cqw rgba(255,120,80,.6);
}
.w-globe .pin::after{
  content:'';position:absolute;left:50%;top:4cqw;bottom:0;width:.8cqw;
  transform:translateX(-50%);
  background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.15));
}
/* ⚠ the ring goes where the NEEDLE TOUCHES, which is the pin element's bottom
   edge — the pin is translated -100% so its foot is at its own `top`. Placed
   14cqw lower (its height) it sat detached below the pin like a shadow of
   nothing. */
.w-globe .ring{
  position:absolute;left:47%;top:56%;
  width:16cqw;height:6cqw;border-radius:50%;
  border:.7cqw solid rgba(255,170,140,.9);
}
.w-globe .l{
  position:absolute;left:0;right:0;bottom:5cqw;text-align:center;
  font-family:ui-monospace,Menlo,monospace;font-size:4.4cqw;letter-spacing:.08em;
  color:rgba(210,230,250,.72);transition:opacity .3s ease;
}

/* ── 16 · the breath ──────────────────────────────────────────────────────
   The disc is the clock: nothing counts down, and the label is the only word. */
.w-breath{background:#0d0a16;overflow:hidden}
.w-breath .hold{position:absolute;inset:0}
.w-breath .lab{position:absolute;left:0;right:0;bottom:11cqw;text-align:center;font-size:5.5cqw;letter-spacing:.34em;text-transform:uppercase;color:rgba(240,236,250,.62)}
[data-v="2"] .w-breath .lab{color:rgba(60,44,28,.6)}

/* ── snake ──────────────────────────────────────────────────────────────── */
.w-snake .dev{background:linear-gradient(#2c2e28,#161813)}
.w-snake .lcd{
  position:absolute;inset:9% 8%;border-radius:1.6cqw;overflow:hidden;
  background:linear-gradient(#adb763,#98a352);
  box-shadow:inset 0 0 0 .7cqw rgba(60,66,26,.45), inset 0 1.4cqw 2.4cqw rgba(60,66,26,.30);
}
.w-snake .sc{
  position:absolute;left:5%;top:4%;font-family:ui-monospace,Menlo,monospace;
  font-size:5.5cqw;color:rgba(28,32,10,.72);letter-spacing:.04em;
}
.w-snake .cells{position:absolute;left:4%;right:4%;top:24%;bottom:5%}
.w-snake .cells i,.w-snake .cells b{
  position:absolute;width:7.6923%;height:11.111%;display:block;
  background:#1e2210;border-radius:.4cqw;
  box-shadow:inset 0 0 0 .4cqw rgba(173,183,99,.9);
}
.w-snake .cells b.food{border-radius:50%;box-shadow:none;transform:scale(.72)}

/* ── fours ──────────────────────────────────────────────────────────────── */
.w-tiles .dev{background:#f3efe6}
.w-tiles .grid{position:absolute;inset:9%;display:grid;grid-template:repeat(4,1fr)/repeat(4,1fr);gap:2.4cqw}
.w-tiles .grid i{
  display:grid;place-items:center;border-radius:1.8cqw;
  background:rgba(120,106,84,.11);
  font-weight:500;font-size:6.9cqw;letter-spacing:-.035em;color:transparent;
  transition:transform .18s cubic-bezier(.22,1,.36,1);
}
.w-tiles i[data-v="1"]{background:#eee5d3;color:#6f6552}
.w-tiles i[data-v="2"]{background:#e8dcc0;color:#6f6552}
.w-tiles i[data-v="3"]{background:#eeb98a;color:#5f4a30}
.w-tiles i[data-v="4"]{background:#e9975f;color:#4a3418}
.w-tiles i[data-v="5"]{background:#e5773f;color:#fbf7ef}
.w-tiles i[data-v="6"]{background:#dd5b32;color:#fbf7ef;font-size:5.5cqw}
.w-tiles i[data-v="7"]{background:#c9a227;color:#fbf7ef;font-size:5.5cqw}

/* ── best chess ─────────────────────────────────────────────────────────── */
.w-chess{background:#faf6ec;overflow:hidden}
.w-chess .hold{position:absolute;inset:0}
.w-chess .cap{position:absolute;left:8cqw;right:8cqw;bottom:5cqw;display:flex;align-items:baseline;justify-content:space-between}
.w-chess .cap b{font-weight:500;font-size:5.5cqw;letter-spacing:-.018em;color:#33291b}
.w-chess .cap span{font-size:4.4cqw;color:rgba(60,48,28,.55)}
[data-v="1"] .w-chess .cap b{color:#e8ebef}
[data-v="1"] .w-chess .cap span{color:rgba(226,232,240,.5)}

/* ── thock ──────────────────────────────────────────────────────────────── */
.w-thock .dev{background:linear-gradient(#1e2530,#0c1016)}
.w-thock .caps{position:absolute;left:9%;right:9%;top:26%;display:grid;grid-template-columns:repeat(4,1fr);gap:3cqw}
.w-thock .caps i{
  position:relative;aspect-ratio:1;border-radius:2.2cqw;display:grid;place-items:center;
  background:linear-gradient(#f6f2e6,#ddd6c4);
  transform:translateY(calc(var(--d,0) * 1.6cqw));
  box-shadow:0 calc((1 - var(--d,0)) * 1.6cqw) 0 #b7ae99,
             0 calc((1 - var(--d,0)) * 2.6cqw) 2.2cqw rgba(0,0,0,.34),
             inset 0 .5cqw 0 rgba(255,255,255,.7);
}
/* ⚠ ONE KEY MOVING TWO PIXELS IS NOT A MOVING TILE. A mechanical board is LIT
   from under its caps, and the light under the key you just hit is both true
   and the thing that reads at 56pt — the travel alone measured dead. */
.w-thock .caps i::after{
  content:'';position:absolute;inset:-1.4cqw;border-radius:3.4cqw;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 62%, rgba(120,208,255,calc(var(--d,0) * .55 + var(--warm,0) * .40)), rgba(120,208,255,0) 70%);
  filter:blur(1.2cqw);
}
.w-thock .caps b{font-weight:500;font-size:5.5cqw;color:#4b463d;letter-spacing:-.01em}
.w-thock .ring{
  position:absolute;width:17cqw;height:17cqw;border-radius:50%;display:block;
  border:.7cqw solid rgba(255,255,255,.6);pointer-events:none;
}
.w-thock .dev::after{
  content:'soundboard';position:absolute;left:0;right:0;bottom:6%;text-align:center;
  font-size:4.4cqw;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.28);
}

/* ── reactions ──────────────────────────────────────────────────────────── */
.w-burst .dev{background:radial-gradient(120% 92% at 50% 112%, #55305f 0%, #1c1424 72%)}
.w-burst .sky{position:absolute;inset:0}
.w-burst .sky span{position:absolute;font-size:11cqw;line-height:1;will-change:transform}
.w-burst .btn{
  position:absolute;left:50%;bottom:8%;width:19cqw;height:19cqw;display:block;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle at 36% 28%, #ff9b74, #dd4530 68%);
  box-shadow:0 1.2cqw 3cqw rgba(0,0,0,.55), inset 0 .8cqw 1.2cqw rgba(255,255,255,.45);
}

/* ── splits ─────────────────────────────────────────────────────────────── */
.w-splits .dev{background:#f7f5f0}
.w-splits .top{position:absolute;left:9%;top:8%;display:flex;align-items:baseline;gap:1.8cqw}
.w-splits .top b{font-weight:500;font-size:17.4cqw;letter-spacing:-.05em;line-height:.86}
.w-splits .top span{font-size:5.5cqw;color:rgba(30,28,24,.46)}
.w-splits .bars{position:absolute;left:9%;right:9%;bottom:21%;height:36%;display:flex;align-items:flex-end;gap:1.8cqw}
.w-splits .bars i{flex:1;position:relative;border-radius:1cqw;background:rgba(40,36,30,.11);overflow:hidden}
.w-splits .bars s{position:absolute;left:0;right:0;bottom:0;display:block;background:#2f6bff;border-radius:1cqw}
.w-splits .foot{
  position:absolute;left:9%;right:9%;bottom:8%;display:flex;justify-content:space-between;
  font-size:5.5cqw;color:rgba(30,28,24,.52);
}
.w-splits .foot .d{color:rgba(30,28,24,.34)}

/* ── the year ───────────────────────────────────────────────────────────── */
.w-streak .dev{background:#f6f4ee}
.w-streak .hd{position:absolute;left:9%;top:7%;display:flex;align-items:baseline;gap:1.8cqw}
.w-streak .hd b{font-weight:500;font-size:17.4cqw;letter-spacing:-.045em;line-height:.86;color:#2b21c8}
.w-streak .hd span{font-size:5.5cqw;color:rgba(30,30,50,.42)}
.w-streak .year{position:absolute;left:9%;right:9%;bottom:9%;display:grid;grid-template-columns:repeat(7,1fr);gap:1.4cqw}
.w-streak .year svg{display:block;width:100%;aspect-ratio:10/13;overflow:visible}
.w-streak .year g{fill:none;stroke:#2b21c8;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.w-streak .year g circle{fill:#2b21c8;stroke:none}

/* ── eight glasses ──────────────────────────────────────────────────────── */
.w-water{background:#f4f8fb;overflow:hidden}
.w-water .hold{position:absolute;inset:0}
.w-water .side{position:absolute;right:9cqw;top:50%;transform:translateY(-50%);text-align:right}
.w-water .side b{display:block;font-weight:500;font-size:26cqw;line-height:.9;letter-spacing:-.05em;color:#1d2a36;font-variant-numeric:tabular-nums}
.w-water .side span{display:block;font-size:4.4cqw;letter-spacing:.1em;text-transform:uppercase;color:rgba(30,44,58,.5);margin-top:1.4cqw}
[data-v="1"] .w-water .side b{color:#eaf4fb}
[data-v="1"] .w-water .side span{color:rgba(214,232,246,.5)}

/* ── mixtape ────────────────────────────────────────────────────────────── */
.w-tape .dev{background:linear-gradient(#241f1c,#100d0b)}
.w-tape .shell{
  position:absolute;inset:13% 7%;border-radius:2.4cqw;
  background:linear-gradient(#46403a,#26211d);
  box-shadow:inset 0 .6cqw 0 rgba(255,255,255,.11), inset 0 -.6cqw 0 rgba(0,0,0,.55), 0 1.8cqw 3.4cqw rgba(0,0,0,.5);
}
.w-tape .win{
  position:absolute;left:7%;right:7%;top:8%;height:46%;
  border-radius:1.6cqw;overflow:hidden;background:#16120e;
  box-shadow:inset 0 1cqw 2cqw rgba(0,0,0,.85), inset 0 0 0 .5cqw rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:space-between;padding:0 5%;
}
.w-tape .reel{position:relative;width:40%;aspect-ratio:1}
.w-tape .reel b{
  position:absolute;left:50%;top:50%;border-radius:50%;
  background:conic-gradient(#453a30,#6d5c49 25%,#453a30 50%,#6d5c49 75%,#453a30);
  box-shadow:0 0 0 .3cqw rgba(0,0,0,.55);
}
.w-tape .hub{
  position:absolute;left:50%;top:50%;width:30%;height:30%;display:block;
  transform:translate(-50%,-50%);border-radius:50%;background:#dcd7cb;
  box-shadow:inset 0 0 0 .5cqw #8e8a80;
}
.w-tape .span{
  position:absolute;left:16%;right:16%;top:50%;display:block;
  height:calc(1cqw + var(--r,.6) * 1cqw);transform:translateY(-50%);
  background:#2a231c;
}
.w-tape .label{
  position:absolute;left:7%;right:7%;bottom:9%;padding:2cqw 3cqw 2.4cqw;
  border-radius:1.2cqw;background:linear-gradient(#f6f1e2,#e6dfcc);
  box-shadow:inset 0 .4cqw 0 rgba(255,255,255,.8), 0 .6cqw 1.4cqw rgba(0,0,0,.4);
}
.w-tape .label b{display:block;font-weight:500;font-size:5.5cqw;letter-spacing:-.02em;color:#3a352a}
.w-tape .label span{display:block;font-size:4.4cqw;color:rgba(58,53,42,.55);margin-top:.4cqw}
.w-tape .screws{position:absolute;inset:0;pointer-events:none}
.w-tape .screws i{position:absolute;width:2cqw;height:2cqw;border-radius:50%;background:#17181a;box-shadow:inset 0 .3cqw 0 rgba(255,255,255,.18)}
.w-tape .screws i:first-child{left:4%;top:4%}
.w-tape .screws i:last-child{right:4%;top:4%}

/* ── the shelf ──────────────────────────────────────────────────────────── */
.w-covers .dev{background:radial-gradient(120% 92% at 50% 0%, #292930, #101012 72%);perspective:70cqw}
.w-covers .stage{position:absolute;left:0;right:0;top:6%;height:60%;transform-style:preserve-3d}
.w-covers .stage i{
  position:absolute;left:50%;top:50%;width:44%;aspect-ratio:1;display:block;
  border-radius:1cqw;background:linear-gradient(142deg,var(--c1),var(--c2));
  box-shadow:0 1.8cqw 3.2cqw rgba(0,0,0,.55), inset 0 0 0 .35cqw rgba(255,255,255,.18);
}
/* ⚠ THE GLOSS IS THE MOVING PART. A sleeve is a laminated card under one lamp,
   so its specular travels as the shelf turns — `--gl` is where the lamp is for
   THIS sleeve, which depends on how far it is from the middle. */
.w-covers .stage u{
  position:absolute;inset:0;display:block;border-radius:inherit;
  background:linear-gradient(114deg,
    rgba(255,255,255,0) calc(var(--gl,46%) - 30%),
    rgba(255,255,255,.42) var(--gl,46%),
    rgba(255,255,255,.05) calc(var(--gl,46%) + 14%),
    rgba(255,255,255,0) calc(var(--gl,46%) + 38%));
}
.w-covers .cap{position:absolute;left:7%;right:7%;bottom:8%;text-align:center}
.w-covers .cap b{display:block;font-weight:500;font-size:6.9cqw;letter-spacing:-.02em;color:#f3f1ec}
.w-covers .cap span{display:block;font-size:5.5cqw;color:rgba(243,241,236,.5);margin-top:.5cqw}

/* ── levels ─────────────────────────────────────────────────────────────── */
.w-vu{background:#2b2a28;overflow:hidden}
.w-vu .hold{position:absolute;inset:0}

/* ── trace ──────────────────────────────────────────────────────────────── */
.w-liss .dev{background:linear-gradient(#1e201c,#0f110f)}
.w-liss .crt{
  position:absolute;inset:8%;border-radius:2.4cqw;overflow:hidden;
  background:radial-gradient(120% 100% at 50% 45%, #0f1d11, #060c07);
  box-shadow:inset 0 1cqw 2.4cqw rgba(0,0,0,.8);
}
.w-liss .crt::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.34) 0 1px,transparent 1px 3px);
}
.w-liss svg{position:absolute;inset:8%}
.w-liss .line{stroke:#63f28a;stroke-width:1.6;filter:drop-shadow(0 0 2px rgba(90,240,120,.85))}
.w-liss .glow{stroke:rgba(90,240,120,.16);stroke-width:6}
.w-liss .r{
  position:absolute;right:7%;bottom:5%;font-family:ui-monospace,Menlo,monospace;
  font-size:4.4cqw;color:rgba(120,240,150,.62);
}

/* ── tailfin ────────────────────────────────────────────────────────────── */
.w-tail .dev{background:linear-gradient(#dde9f1 0%, #f4f6f4 60%, #eae7df 100%);overflow:hidden}

.w-tail .sky{
  position:absolute;inset:0;
  /* ⚠ THE CLOUD HAS TO BE A LAYER OF THE SKY. As a ::before it was the FIRST
     child and this element painted straight over it — and a fin that only
     changes every 3.4 seconds is a photograph in between, so what has to be
     moving is the weather. */
  /* ⚠ AND A CLOUD IS NOT WHITE. A white cloud on a pale sky changes no pixel
     when it moves — which is a true fact about white on white and a false
     picture of weather. Real cloud is bright on top and grey underneath. */
  background:
    radial-gradient(ellipse 12% 6% at 50% 22%, rgba(255,255,255,.98) 0 30%, rgba(158,176,192,.72) 78%, transparent 82%),
    radial-gradient(ellipse 17% 8% at 50% 28%, rgba(252,253,255,.95) 0 26%, rgba(146,166,186,.62) 76%, transparent 82%),
    radial-gradient(ellipse 10% 5% at 50% 16%, rgba(255,255,255,.95) 0 32%, rgba(168,184,200,.6) 78%, transparent 82%),
    radial-gradient(90% 62% at var(--sky,72%) 8%, rgba(255,255,255,.92), transparent 68%);
  background-position:calc(var(--cloud,0) * 1cqw) 0, calc(var(--cloud,0) * 0.72cqw) 0, calc(var(--cloud,0) * 1.3cqw) 0, 0 0;
  background-repeat:repeat-x, repeat-x, repeat-x, no-repeat;
  background-size:46% 100%, 62% 100%, 34% 100%, 100% 100%;
  filter:blur(1.1cqw);
}
.w-tail .fin{
  position:absolute;left:12%;right:10%;top:12%;bottom:27%;overflow:hidden;
  /* ⚠ A FIN IS WIDE AT THE ROOT. The first polygon was a narrow rake and read
     as a diagonal stripe across a pale square, not as a tail. */
  clip-path:polygon(0% 100%, 100% 100%, 88% 2%, 47% 2%);
  background:var(--base,#c8402f);
  /* a new livery FLIES IN rather than cross-fading: it is a tail going past */
  transform:translate(calc((1 - var(--wipe,1)) * 30% + var(--sway,0cqw)), var(--bob,0cqw));
  opacity:var(--wipe,1);
  filter:drop-shadow(-1.4cqw 1.6cqw 2cqw rgba(30,40,60,.22));
}
.w-tail .fin::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.18;
  background:linear-gradient(#fff, transparent 42%);
}
.w-tail .mark{position:absolute;inset:0;display:block}
.w-tail .mark[data-style=band]{background:linear-gradient(transparent 44%, var(--ink) 44% 61%, transparent 61%)}
.w-tail .mark[data-style=split]{background:linear-gradient(var(--ink) 0 36%, transparent 36%)}
.w-tail .mark[data-style=chevron]{background:linear-gradient(122deg, transparent 36%, var(--ink) 36% 55%, transparent 55%)}
.w-tail .mark[data-style=dot]{background:radial-gradient(circle at 64% 28%, var(--ink) 0 15%, transparent 15%)}
.w-tail .dev::after{
  /* the top of the fuselage, so the fin is standing ON something */
  content:'';position:absolute;left:6%;right:4%;bottom:23%;height:7%;
  border-radius:60% 60% 0 0 / 100% 100% 0 0;
  background:linear-gradient(#f2f0ea,#d9d5cb);
  box-shadow:0 -.4cqw 0 rgba(255,255,255,.7) inset;
}
.w-tail .ask{
  position:absolute;left:0;right:0;bottom:7%;text-align:center;
  font-size:5.5cqw;letter-spacing:-.015em;color:rgba(40,52,66,.5);
}

/* ── bird log ───────────────────────────────────────────────────────────── */
.w-bird .dev{background:#f4efe2}
.w-bird .dev::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 92% at 28% 6%, rgba(255,255,255,.72), transparent 62%);
}
.w-bird .plate{position:absolute;left:5%;right:5%;top:7%;height:50%}
.w-bird .legs,.w-bird .perch{fill:none;stroke:#3a342c;stroke-width:1.4;stroke-linecap:round}
.w-bird .perch{stroke-width:1.7;opacity:.42}
.w-bird .cap{position:absolute;left:8%;right:8%;bottom:8%}
.w-bird .cap b{display:block;font-weight:500;font-size:6.9cqw;letter-spacing:-.025em;color:#2f2a22}
.w-bird .cap i{display:block;font-style:italic;font-size:5.5cqw;color:rgba(47,42,34,.55);margin-top:.3cqw}
.w-bird .cap span{display:block;margin-top:1.4cqw;font-size:4.4cqw;color:rgba(47,42,34,.40)}

/* ── strata ─────────────────────────────────────────────────────────────── */
.w-strata .dev{background:linear-gradient(#fbf6e8,#efe4cc)}
.w-strata .hill{position:absolute;inset:0}
.w-strata .hill path{stroke:rgba(58,46,30,.26);stroke-width:.5;vector-effect:non-scaling-stroke}
.w-strata .cap{position:absolute;left:8%;right:8%;bottom:7%;display:flex;justify-content:space-between;align-items:baseline}
.w-strata .cap b{font-weight:500;font-size:6.9cqw;letter-spacing:-.025em;color:#f6f1e6}
.w-strata .cap span{font-size:5.5cqw;color:rgba(246,241,230,.66)}

/* ── today's sky ────────────────────────────────────────────────────────── */
.w-rothko .ground{position:absolute;inset:0;display:block}
.w-rothko .f{
  position:absolute;left:15%;right:15%;display:block;border-radius:1.4cqw;
  filter:blur(1.5cqw);transform-origin:50% 50%;
  box-shadow:0 0 6cqw 1cqw rgba(0,0,0,.06);
}
.w-rothko .f.a{top:9%;height:36%}
.w-rothko .f.b{top:52%;height:28%}
/* the paper the fields are floating on, so the ground is a GROUND and not the
   colour that happens to be behind them */
.w-rothko .ground::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(120% 90% at 32% 8%, rgba(255,255,255,.16), transparent 62%);
}
.w-rothko .cap{position:absolute;left:9%;right:9%;bottom:6%;display:flex;justify-content:space-between;align-items:baseline}
.w-rothko .cap b{font-weight:500;font-size:5.5cqw;letter-spacing:-.02em;color:rgba(255,255,255,.94);text-shadow:0 .3cqw 1.2cqw rgba(0,0,0,.35)}
.w-rothko .cap span{font-size:5.5cqw;color:rgba(255,255,255,.66);text-shadow:0 .3cqw 1.2cqw rgba(0,0,0,.35)}

/* ═══ BATCH TWO ════════════════════════════════════════════════════════════ */

/* ── jot ────────────────────────────────────────────────────────────────── */
.w-jot .dev{background:#f2efe9;isolation:isolate}
.w-jot .ground{position:absolute;inset:0;filter:blur(9cqw) saturate(1.25)}
.w-jot .ground i{position:absolute;left:0;top:0;border-radius:50%;mix-blend-mode:multiply;opacity:.85}
.w-jot .paper{
  position:absolute;left:14%;right:12%;top:22%;bottom:20%;
  border-radius:1.6cqw;background:#fdfcf9;transform:rotate(-2.6deg);
  box-shadow:0 1.6cqw 3.6cqw rgba(40,30,20,.22), 0 .3cqw .6cqw rgba(40,30,20,.12);
}
.w-jot .paper svg{position:absolute;inset:9% 8%}
.w-jot .paper path{stroke:#2c2a33;stroke-width:2.1;stroke-linecap:round;opacity:.82}

/* ── heavy hours ────────────────────────────────────────────────────────── */
.w-grav .dev{background:radial-gradient(120% 96% at 50% 0%, #1d2331, #0a0d14 74%);overflow:hidden}
.w-grav .matrix{position:absolute;left:7%;right:7%;top:35%;height:29%}
.w-grav .matrix i{
  position:absolute;width:4.4cqw;height:4.4cqw;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 34% 28%, #fff6e0, #c8b494 62%, #6e6250);
  box-shadow:0 .5cqw .9cqw rgba(0,0,0,.5);
}
.w-grav .dev::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:22%;
  background:linear-gradient(transparent,rgba(0,0,0,.55));
}

/* ── ball pit ───────────────────────────────────────────────────────────── */
.w-pit .dev{background:linear-gradient(#f7f5f0,#eae6dd)}
.w-pit .well{position:absolute;inset:5%;border-radius:6cqw;overflow:hidden;background:rgba(120,110,92,.07);box-shadow:inset 0 1cqw 2cqw rgba(90,80,64,.10)}
.w-pit .well i{position:absolute;border-radius:50%}
.w-pit i[data-h="0"]{background:radial-gradient(circle at 34% 28%, #ffd0a6, #e8794a)}
.w-pit i[data-h="1"]{background:radial-gradient(circle at 34% 28%, #cfe6ff, #4e8fd0)}
.w-pit i[data-h="2"]{background:radial-gradient(circle at 34% 28%, #ffe9a8, #e2b73a)}
.w-pit i[data-h="3"]{background:radial-gradient(circle at 34% 28%, #d9f0d2, #5aa565)}
.w-pit i[data-h="4"]{background:radial-gradient(circle at 34% 28%, #f5cfe4, #cc6d99)}
.w-pit i[data-h="5"]{background:radial-gradient(circle at 34% 28%, #e3dcf5, #8779c4)}

/* ── the break ──────────────────────────────────────────────────────────── */
.w-brk .dev{background:#2b1d14;padding:0}
.w-brk .table{
  position:absolute;inset:8%;border-radius:2cqw;overflow:hidden;
  background:radial-gradient(120% 100% at 50% 30%, #2f7350, #1d5138 78%);
  box-shadow:inset 0 0 0 1.6cqw #5a3a22, inset 0 1cqw 2.4cqw rgba(0,0,0,.35);
}
.w-brk .table i{
  position:absolute;width:9cqw;height:9cqw;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 34% 26%, #ffeec8, #c3452f 66%, #7d2418);
  box-shadow:0 .5cqw 1cqw rgba(0,0,0,.4);
}
.w-brk .table i.cue{background:radial-gradient(circle at 34% 26%, #fff, #ded6c4 70%, #a49b8a)}
.w-brk .pocket{position:absolute;width:6cqw;height:6cqw;border-radius:50%;background:#120c08;box-shadow:inset 0 .4cqw .8cqw rgba(0,0,0,.8)}
.w-brk .pocket.tl{left:-1%;top:-1%}
.w-brk .pocket.tr{right:-1%;top:-1%}
.w-brk .pocket.bl{left:-1%;bottom:-1%}
.w-brk .pocket.br{right:-1%;bottom:-1%}

/* ── the lamp ───────────────────────────────────────────────────────────── */
.w-lava .dev{background:linear-gradient(#241830,#120c19)}
.w-lava .glass{
  position:absolute;left:22%;right:22%;top:6%;bottom:14%;overflow:hidden;
  border-radius:18cqw 18cqw 5cqw 5cqw;
  background:linear-gradient(100deg, rgba(255,190,120,.10), rgba(120,70,160,.16));
  box-shadow:inset 0 0 0 .6cqw rgba(255,255,255,.13), inset -1.4cqw 0 2.4cqw rgba(0,0,0,.35);
}
/* the gooey merge: blur the alpha, then threshold it. Two blobs that touch
   become one blob, which is the only thing a lava lamp actually does. */
/* blur the alpha, then threshold it: two blobs that touch become one, which
   is the only thing a lava lamp actually does. ⚠ TOO MUCH CONTRAST CLIPS IT into
   a flat slab with a noisy edge — the number is a threshold, not a dial. */
.w-lava .goo{position:absolute;inset:0;filter:blur(1.7cqw) contrast(9) saturate(1.2)}
.w-lava .goo i,.w-lava .goo b{position:absolute;border-radius:50%;background:#c2351a;display:block}
.w-lava .goo .pool{left:-10%;right:-10%;bottom:-6%;height:16%;border-radius:0;width:auto}
.w-lava .cap{
  position:absolute;left:31%;right:31%;bottom:5%;height:8%;border-radius:1cqw;
  background:linear-gradient(#4a4048,#241d28);
  box-shadow:inset 0 .4cqw 0 rgba(255,255,255,.16);
}
.w-lava .dev::after{
  content:'';position:absolute;left:22%;right:22%;top:6%;bottom:14%;pointer-events:none;
  border-radius:18cqw 18cqw 5cqw 5cqw;
  background:linear-gradient(104deg, rgba(255,255,255,.26) 0 9%, transparent 26%);
}

/* ── komorebi ───────────────────────────────────────────────────────────── */
.w-kom .dev{background:#efe2c8}
.w-kom .hold{position:absolute;inset:0}

/* ── structure ──────────────────────────────────────────────────────────── */
.w-morpho .dev{background:radial-gradient(120% 96% at 50% 20%, #1b1f2a, #0b0d12 76%)}
/* ⚠ TWO CLIPPED DIVS NEVER RESOLVED INTO A BUTTERFLY at 140pt — they read as a
   pair of blue blobs. One symmetric silhouette as a url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='80' viewBox='0 0 100 80'><path fill='%23000' d='M50 22C44 8 28 0 16 6 3 13 1 32 12 40 1 47 2 65 15 72 28 79 45 71 50 58Z'/><path fill='%23000' d='M50 22C56 8 72 0 84 6 97 13 99 32 88 40 99 47 98 65 85 72 72 79 55 71 50 58Z'/><ellipse fill='%23000' cx='50' cy='42' rx='3.4' ry='23'/><path fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' d='M50 21C46 13 42 9 35 7M50 21c4-8 8-12 15-14'/></svg>") over one gradient does,
   and it is the honest construction anyway: the blue is ONE optical effect over
   one wing pair, not two independently coloured wings. */
.w-morpho .bfly{
  position:absolute;inset:12% 5% 24%;
  background:
    radial-gradient(76% 96% at var(--cx,50%) 44%,
      hsl(var(--hue,220) 96% 66% / calc(var(--lobe,1) * .98)) 0%,
      hsl(var(--hue,220) 90% 44% / calc(var(--lobe,1) * .82)) 46%,
      transparent 84%),
    linear-gradient(152deg,#7a5a3e,#43301f);
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='80' viewBox='0 0 100 80'><path fill='%23000' d='M50 22C44 8 28 0 16 6 3 13 1 32 12 40 1 47 2 65 15 72 28 79 45 71 50 58Z'/><path fill='%23000' d='M50 22C56 8 72 0 84 6 97 13 99 32 88 40 99 47 98 65 85 72 72 79 55 71 50 58Z'/><ellipse fill='%23000' cx='50' cy='42' rx='3.4' ry='23'/><path fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' d='M50 21C46 13 42 9 35 7M50 21c4-8 8-12 15-14'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='80' viewBox='0 0 100 80'><path fill='%23000' d='M50 22C44 8 28 0 16 6 3 13 1 32 12 40 1 47 2 65 15 72 28 79 45 71 50 58Z'/><path fill='%23000' d='M50 22C56 8 72 0 84 6 97 13 99 32 88 40 99 47 98 65 85 72 72 79 55 71 50 58Z'/><ellipse fill='%23000' cx='50' cy='42' rx='3.4' ry='23'/><path fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' d='M50 21C46 13 42 9 35 7M50 21c4-8 8-12 15-14'/></svg>");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  filter:drop-shadow(0 1.2cqw 2.2cqw rgba(0,0,0,.55));
  transform:perspective(80cqw) rotateY(calc(var(--turn,0) * 1deg));
}
/* ⚠ 'Madagascan Sunset Moth' is 22 characters and the readout is pinned to the
   other end, so the two met in the middle. The name takes what is left and
   ellipses; the number never moves, because it is the thing that is changing. */
.w-morpho .cap{position:absolute;left:8%;right:8%;bottom:7%;display:flex;gap:3cqw;justify-content:space-between;align-items:baseline}
.w-morpho .cap b{font-weight:500;font-size:5.5cqw;color:rgba(240,244,255,.94);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.012em}
.w-morpho .cap span{font-family:ui-monospace,Menlo,monospace;font-size:4.4cqw;color:rgba(180,205,255,.66);flex:none;font-variant-numeric:tabular-nums}
/* the caption sits on a photograph of an animal; it needs its own ground */
.w-morpho .dev::after{content:'';position:absolute;left:0;right:0;bottom:0;height:26%;pointer-events:none;
  background:linear-gradient(to top,rgba(6,8,14,.78),rgba(6,8,14,.36) 46%,rgba(6,8,14,0))}

/* ── crowns ───────────────────────────────────────────────────────────────
   ⚠ ONE GRADIENT, ANCHORED TO THE TILE. Every masked layer sizes its
   background to the whole 100cqw box and offsets it by its own inset, so a
   single specular sweeps the burst, the arch, the tower, both corners and the
   rule at once. Sized per element, each gets its own little sun and the frame
   reads as a collage of six gold stickers. */
.w-crown .dev{
  background:radial-gradient(120% 100% at 50% 104%, #1c1a18 0%, #08080a 72%);
  --gold:radial-gradient(64% 96% at var(--lx,50%) var(--ly,26%), #fff8dd 0%, #f2d183 20%, #b9862f 52%, #4a3310 100%);
}
.w-crown .dev i{
  position:absolute;display:block;background-image:var(--gold);
  background-size:100cqw 100cqw;background-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.w-crown .burst{left:0;top:0;width:100cqw;height:100cqw;background-position:0 0;opacity:.16}
.w-crown .arch{left:6cqw;top:6cqw;width:88cqw;height:76cqw;background-position:-6cqw -6cqw;opacity:.92}
.w-crown .tower{
  left:24cqw;top:22cqw;width:52cqw;height:56cqw;background-position:-24cqw -22cqw;
  filter:drop-shadow(0 1cqw 2.4cqw rgba(0,0,0,.7));
  -webkit-mask-image:none;mask-image:none;
}
.w-crown .corner{width:22cqw;height:22cqw}
.w-crown .corner.tl{left:4cqw;top:4cqw;background-position:-4cqw -4cqw}
.w-crown .corner.tr{right:4cqw;top:4cqw;background-position:-74cqw -4cqw;transform:scaleX(-1)}
.w-crown .rule{left:18cqw;bottom:16cqw;width:64cqw;height:12.8cqw;background-position:-18cqw -71cqw;opacity:.8}
.w-crown .cap{position:absolute;left:8%;right:8%;bottom:5%;display:flex;justify-content:space-between;align-items:baseline}
.w-crown .cap b{font-weight:500;font-size:5.5cqw;color:#e8d5a8}
.w-crown .cap span{font-size:5.5cqw;color:rgba(232,213,168,.5)}

/* ── on the shelf ───────────────────────────────────────────────────────── */
.w-books .dev{background:linear-gradient(#f5f1e6,#e4dccb)}
.w-books .rail{
  position:absolute;left:7%;right:7%;bottom:27%;height:56%;
  display:flex;align-items:flex-end;gap:1.1cqw;--sway:0deg;
}
/* the light travelling along the shelf — spines are cloth and board under one
   lamp, and the lamp is the part of a bookshelf that ever changes */
.w-books .rail::after{
  content:'';position:absolute;inset:-6% -2% 0;pointer-events:none;z-index:3;
  background:linear-gradient(96deg,
    rgba(255,244,222,0) calc(var(--lamp,48%) - 26%),
    rgba(255,246,226,.30) var(--lamp,48%),
    rgba(255,244,222,0) calc(var(--lamp,48%) + 26%));
  mix-blend-mode:soft-light;
}
.w-books .rail i{
  flex:1;position:relative;display:block;border-radius:.5cqw .5cqw 0 0;background:var(--c);
  box-shadow:inset -.9cqw 0 0 rgba(0,0,0,.20), inset .5cqw 0 0 rgba(255,255,255,.16),
             0 .5cqw 1cqw rgba(60,48,32,.24);
  transition:transform .55s cubic-bezier(.34,1.42,.64,1);
  overflow:hidden;
}
/* the title, set DOWN the spine, which is how a spine is printed */
.w-books .rail u{
  position:absolute;left:50%;bottom:8%;transform:translateX(-50%) rotate(180deg);
  writing-mode:vertical-rl;text-decoration:none;
  font-size:3.5cqw;letter-spacing:.02em;color:rgba(255,255,255,.62);white-space:nowrap;
}
/* ⚠ A GAP IS NOT EMPTY. A title with no copies in stands as a thin buff slip
   where the book should be — which is what makes this a library rather than a
   row with something missing from it. */
.w-books .rail i.gone{
  flex:.34;background:#ded3bb;height:52%!important;
  box-shadow:inset -.4cqw 0 0 rgba(0,0,0,.10), 0 .3cqw .7cqw rgba(60,48,32,.16);
}
.w-books .rail i.gone u{display:none}
.w-books .board{
  position:absolute;left:4%;right:4%;bottom:24%;height:3cqw;
  background:linear-gradient(#cdbb98,#8f7c56);border-radius:.6cqw;
  box-shadow:0 1cqw 2cqw rgba(60,48,32,.30);
}
.w-books .cap{position:absolute;left:8%;right:8%;bottom:9%;display:flex;justify-content:space-between;align-items:baseline}
.w-books .cap b{font-weight:500;font-size:5.5cqw;letter-spacing:-.02em;color:#3c3225}
.w-books .cap span{font-size:4.4cqw;color:rgba(60,48,32,.5)}

/* ── passport ───────────────────────────────────────────────────────────── */
.w-kino .dev{background:linear-gradient(#1c2434,#0a0e16)}
.w-kino .page{
  position:absolute;left:8%;right:8%;top:8%;bottom:24%;overflow:hidden;
  border-radius:1.4cqw;background:linear-gradient(#f4efe2,#e6dece);
  box-shadow:0 1.4cqw 3cqw rgba(0,0,0,.5);
  transform:rotate(var(--lean,0deg));
}
/* paper held in a hand: the light runs across it between stamps */
.w-kino .page::after{
  content:'';position:absolute;inset:0;z-index:9;pointer-events:none;
  background:linear-gradient(102deg,
    rgba(255,255,255,0) calc(var(--sheen,50%) - 30%),
    rgba(255,255,255,.30) var(--sheen,50%),
    rgba(255,255,255,0) calc(var(--sheen,50%) + 30%));
  mix-blend-mode:soft-light;
}
.w-kino .flag{position:absolute;left:8%;top:11%;width:20cqw;height:13cqw;display:flex;border-radius:.6cqw;overflow:hidden;box-shadow:0 .3cqw .8cqw rgba(0,0,0,.25)}
.w-kino .flag[data-dir=h]{flex-direction:column}
.w-kino .flag i{flex:1}
/* Japan is a disc on white, not three bands */
.w-kino .flag[data-dir=j]{background:#fff}
.w-kino .flag[data-dir=j] i{flex:0;width:0}
.w-kino .flag[data-dir=j]::after{
  content:'';position:absolute;left:50%;top:50%;width:52%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;background:#bc002d;
}
.w-kino .flag{position:relative}
.w-kino .c{position:absolute;left:8%;top:44%;font-weight:500;font-size:6.9cqw;letter-spacing:-.03em;color:#2b2a24}
.w-kino .f{position:absolute;left:8%;top:62%;font-size:5.5cqw;color:rgba(43,42,36,.66)}
.w-kino .y{position:absolute;left:8%;top:77%;font-size:4.4cqw;color:rgba(43,42,36,.4)}
.w-kino .stamp{
  position:absolute;right:6%;top:16%;padding:1cqw 2.2cqw;font-style:normal;
  font-size:4.4cqw;letter-spacing:.16em;color:#a83b2c;
  border:.7cqw solid #a83b2c;border-radius:1cqw;transform-origin:50% 50%;
}
.w-kino .foot{position:absolute;left:8%;bottom:8%;font-size:5.5cqw;color:rgba(226,232,244,.55)}
.w-kino .foot span{color:#e2e8f4;font-weight:500}

/* ── the quarter ────────────────────────────────────────────────────────── */
.w-city .dev{background:#f5f2ea}
.w-city .map{position:absolute;inset:0}
.w-city .map .ground{fill:#efe9da}
.w-city .map .b1{fill:#e3dbc8}
.w-city .map .b2{fill:#e8e1d0}
.w-city .map .park{fill:#c6d6ae}
.w-city .map .civic{fill:#dcc9ae}
.w-city .map .water{fill:#a8c8d4}
.w-city .map .road{stroke:#f8f5ec;stroke-width:2.4;vector-effect:non-scaling-stroke;fill:none}
.w-city .map .big{stroke:#fffdf6;stroke-width:5;vector-effect:non-scaling-stroke;fill:none;stroke-linecap:round}
.w-city .pin{
  position:absolute;left:52%;top:38%;width:5cqw;height:5cqw;display:block;
  transform:translate(-50%,-50%) scale(calc(1 + var(--ping,0) * .18));
  border-radius:50%;background:#d4452f;
  box-shadow:0 0 0 calc(1.4cqw + var(--ping,0) * 5cqw) rgba(212,69,47,calc(.22 - var(--ping,0) * .2)),
             0 .6cqw 1.2cqw rgba(0,0,0,.2);
}
.w-city .cap{position:absolute;left:8%;right:8%;bottom:8%}
.w-city .cap span{display:block;font-size:4.4cqw;letter-spacing:.1em;text-transform:uppercase;color:rgba(60,48,32,.46)}
.w-city .cap b{display:block;font-weight:500;font-size:8.7cqw;letter-spacing:-.03em;color:#2f2a22;margin-top:.6cqw}
.w-city .cap em{display:block;font-style:normal;font-size:5.5cqw;color:rgba(60,48,32,.55)}

/* ── skyline ────────────────────────────────────────────────────────────── */
.w-sky .dev{background:linear-gradient(#25406b 0%, #3f5c86 46%, #8a7a92 78%, #c99a86 100%)}
.w-sky .air{position:absolute;inset:0;background:radial-gradient(80% 44% at 60% 96%, rgba(255,210,170,.5), transparent 70%)}
.w-sky .town{position:absolute;left:0;right:0;bottom:26%;height:52%;display:flex;align-items:flex-end;gap:.9cqw;padding:0 3%}
.w-sky .town i{display:block;background:#141a26;border-radius:.4cqw .4cqw 0 0;position:relative;opacity:.94}
.w-sky .town i.hero{background:#0d1119;box-shadow:0 0 3cqw rgba(255,214,160,.35)}
.w-sky .town u{
  position:absolute;inset:8% 12% 0;display:block;opacity:calc(var(--lit,.5) * var(--blink,1));
  background:repeating-linear-gradient(to bottom, rgba(255,214,150,.85) 0 .7cqw, transparent .7cqw 2.1cqw),
             repeating-linear-gradient(to right, rgba(255,214,150,.85) 0 .6cqw, transparent .6cqw 1.9cqw);
  background-blend-mode:multiply;
}
.w-sky .water{position:absolute;left:0;right:0;bottom:0;height:26%;background:linear-gradient(rgba(20,26,38,.85),rgba(30,44,70,.6))}
.w-sky .cap{position:absolute;left:8%;right:8%;bottom:7%;display:flex;justify-content:space-between;align-items:baseline}
.w-sky .cap b{font-weight:500;font-size:5.5cqw;color:#f2ede4}
.w-sky .cap span{font-size:5.5cqw;color:rgba(242,237,228,.6)}

/* ── stripes ────────────────────────────────────────────────────────────── */
.w-mow .dev{
  background:
    repeating-linear-gradient(84deg, rgba(255,255,255,.05) 0 .5cqw, transparent .5cqw 1.6cqw),
    repeating-linear-gradient(96deg, rgba(0,0,0,.07) 0 .6cqw, transparent .6cqw 1.9cqw),
    linear-gradient(#547239,#425c2b);
  overflow:hidden;
}
.w-mow .lawn{position:absolute;inset:0;display:flex;flex-direction:column}
.w-mow .lawn i{flex:1;position:relative;overflow:hidden}
/* an UNCUT band is the standing grass; the cut part is the stripe the roller
   has laid, and which way it lies is what makes it pale or dark */
.w-mow .lawn i s{position:absolute;left:0;top:0;bottom:0;display:block}
/* the band's own lie, and the strip the roller is laying over it right now */
.w-mow .lawn i,.w-mow .lawn i s{box-shadow:inset 0 .3cqw .7cqw rgba(0,0,0,.09)}
.w-mow .lawn i[data-d="0"],.w-mow .lawn i s[data-d="0"]{background:
  repeating-linear-gradient(90deg, rgba(255,255,255,.11) 0 .5cqw, transparent .5cqw 1.5cqw),
  linear-gradient(#8fb160,#7ba050)}
.w-mow .lawn i[data-d="1"],.w-mow .lawn i s[data-d="1"]{background:
  repeating-linear-gradient(90deg, rgba(0,0,0,.11) 0 .5cqw, transparent .5cqw 1.5cqw),
  linear-gradient(#3d6127,#345422)}
.w-mow .mower{
  position:absolute;left:0;top:0;width:9cqw;height:6cqw;display:block;border-radius:1cqw;
  background:linear-gradient(#f5d14a,#c9992a);
  box-shadow:0 .6cqw 1.2cqw rgba(0,0,0,.35), inset 0 .4cqw 0 rgba(255,255,255,.5);
}

/* ── the cellar ─────────────────────────────────────────────────────────── */
/* the caption sits on a photograph of an object; it needs its own ground */
.w-pour .dev::after{content:'';position:absolute;left:0;right:0;bottom:0;height:24%;pointer-events:none;
  background:linear-gradient(to top,rgba(10,8,6,.80),rgba(10,8,6,.34) 48%,rgba(10,8,6,0))}
.w-pour .dev{background:linear-gradient(#241f1c,#100d0c)}
.w-pour .hold{position:absolute;inset:0}
.w-pour .cap{
  position:absolute;left:7%;right:7%;bottom:5%;display:flex;justify-content:space-between;align-items:baseline;
  text-shadow:0 .4cqw 1.4cqw rgba(0,0,0,.8);
}
.w-pour .cap b{font-weight:500;font-size:5.5cqw;color:#efe7d4}
.w-pour .cap span{font-size:4.4cqw;color:rgba(239,231,212,.55)}

/* ═══ VARIANTS ══════════════════════════════════════════════════════════════
   Every widget has three. A variant is not a filter dropped over the top — a
   filter shifts the INK as well as the ground and quietly breaks the one thing
   a widget has to do, which is read. Each of these is a real palette: the
   backlight of a different phone, a different baize, a different paper.

   The host stamps `data-v` on the widget's own box, so a variant can be a
   block here as easily as a branch in draw().
   ═════════════════════════════════════════════════════════════════════════ */

/* ── screens ────────────────────────────────────────────────────────────── */
[data-v="1"] .w-scope .crt{background:radial-gradient(120% 100% at 50% 40%,#1c1405 0%,#0f0a02 100%)}
[data-v="1"] .w-scope .line{stroke:#ffb648;filter:drop-shadow(0 0 2px rgba(255,182,72,.9))}
[data-v="1"] .w-scope .glow{stroke:rgba(255,182,72,.22)}
[data-v="1"] .w-scope .crt::before{background:
  repeating-linear-gradient(to right,rgba(255,190,90,.09) 0 1px,transparent 1px 16.6%),
  repeating-linear-gradient(to bottom,rgba(255,190,90,.09) 0 1px,transparent 1px 20%)}
[data-v="1"] .w-scope .l{color:rgba(255,190,90,.62)}
[data-v="1"] .w-scope .status i{background:#ffb648;box-shadow:0 0 5px #ffb648}
[data-v="2"] .w-scope .dev{background:linear-gradient(#f3efe6,#e2dccd)}
[data-v="2"] .w-scope .crt{background:#faf7ef;box-shadow:inset 0 1cqw 2.4cqw rgba(90,80,60,.14)}
[data-v="2"] .w-scope .line{stroke:#2b3a2c;filter:none}
[data-v="2"] .w-scope .glow{stroke:rgba(43,58,44,.14)}
[data-v="2"] .w-scope .crt::before{background:
  repeating-linear-gradient(to right,rgba(60,72,60,.10) 0 1px,transparent 1px 16.6%),
  repeating-linear-gradient(to bottom,rgba(60,72,60,.10) 0 1px,transparent 1px 20%)}
[data-v="2"] .w-scope .crt::after{opacity:0}
[data-v="2"] .w-scope .l{color:rgba(40,52,40,.55)}
[data-v="2"] .w-scope .status{color:rgba(40,52,40,.55)}
[data-v="2"] .w-scope .status i{background:#3f7a4a;box-shadow:none}

/* the Nokia's own backlights, which is what that phone really had */
[data-v="1"] .w-snake .lcd{background:linear-gradient(#fbeec6,#eed69a);box-shadow:inset 0 0 0 .7cqw rgba(90,70,20,.4), inset 0 1.4cqw 2.4cqw rgba(90,70,20,.28)}
[data-v="1"] .w-snake .cells i,[data-v="1"] .w-snake .cells b{background:#3a2c0d;box-shadow:inset 0 0 0 .4cqw rgba(240,221,168,.9)}
[data-v="1"] .w-snake .sc{color:rgba(58,44,13,.75)}
[data-v="2"] .w-snake .lcd{background:linear-gradient(#dcf3fb,#aad9e9);box-shadow:inset 0 0 0 .7cqw rgba(20,60,74,.35), inset 0 1.4cqw 2.4cqw rgba(20,60,74,.24)}
[data-v="2"] .w-snake .cells i,[data-v="2"] .w-snake .cells b{background:#16303a;box-shadow:inset 0 0 0 .4cqw rgba(198,230,242,.9)}
[data-v="2"] .w-snake .sc{color:rgba(22,48,58,.75)}

[data-v="1"] .w-liss .crt{background:radial-gradient(120% 100% at 50% 45%,#1e1508,#0b0803)}
[data-v="1"] .w-liss .line{stroke:#ffb648;filter:drop-shadow(0 0 2px rgba(255,182,72,.85))}
[data-v="1"] .w-liss .glow{stroke:rgba(255,182,72,.16)}
[data-v="1"] .w-liss .r{color:rgba(255,190,90,.62)}
[data-v="2"] .w-liss .crt{background:radial-gradient(120% 100% at 50% 45%,#0a1620,#04080d)}
[data-v="2"] .w-liss .line{stroke:#8fdcff;filter:drop-shadow(0 0 2px rgba(143,220,255,.85))}
[data-v="2"] .w-liss .glow{stroke:rgba(143,220,255,.16)}
[data-v="2"] .w-liss .r{color:rgba(160,225,255,.62)}

[data-v="1"] .w-ticker .dev{background:linear-gradient(#f4f0e6,#e6dfd0)}
[data-v="1"] .w-ticker .top{background:#e8e0cf;color:#2b2620}
[data-v="1"] .w-ticker .pair{color:#2b2620}
[data-v="1"] .w-ticker .live{color:rgba(43,38,32,.6)}
[data-v="1"] .w-ticker .screen{background:#fbf8f0;box-shadow:inset 0 1cqw 2cqw rgba(90,80,60,.10)}
[data-v="1"] .w-ticker .screen::after{opacity:0}
[data-v="1"] .w-ticker .name{color:#8a6a20}
[data-v="1"] .w-ticker .fig{color:#2b2620;text-shadow:none}
[data-v="1"] .w-ticker .pct{color:#2f7a45;text-shadow:none}
[data-v="1"] .w-ticker .pct.down{color:#b8382a;text-shadow:none}
[data-v="1"] .w-ticker .strip{background:#e8e0cf;box-shadow:inset 0 1px 0 rgba(0,0,0,.06)}
[data-v="1"] .w-ticker .run{color:#8a6a20}
[data-v="2"] .w-ticker .screen{background:radial-gradient(120% 100% at 50% 30%,#150a22,#08040f)}
[data-v="2"] .w-ticker .name{color:#c46ae8}
[data-v="2"] .w-ticker .fig{color:#f0c4ff;text-shadow:0 0 3cqw rgba(196,106,232,.7)}
[data-v="2"] .w-ticker .pct{color:#5ef2c8;text-shadow:0 0 2cqw rgba(94,242,200,.6)}

[data-v="1"] .w-vu .dev{background:linear-gradient(#2a2724,#151312)}
[data-v="1"] .w-vu .dial{background:linear-gradient(#242220,#141312);box-shadow:inset 0 0 0 .6cqw rgba(220,200,150,.18), inset 0 1.2cqw 2.2cqw rgba(0,0,0,.5)}
[data-v="1"] .w-vu .scale{stroke:rgba(232,222,200,.55)}
[data-v="1"] .w-vu .needle{background:linear-gradient(#f6f1e2,#8a8272)}
[data-v="1"] .w-vu .cap,[data-v="1"] .w-vu .db{color:rgba(232,222,200,.5)}
[data-v="2"] .w-vu .dev{background:linear-gradient(#e6d7ae,#c8a86c)}
[data-v="2"] .w-vu .dial{background:linear-gradient(#fdf6e2,#efdcb2);box-shadow:inset 0 0 0 .6cqw rgba(120,84,20,.3), inset 0 1.2cqw 2.2cqw rgba(140,100,30,.2)}
[data-v="2"] .w-vu .scale{stroke:rgba(88,60,14,.6)}
[data-v="2"] .w-vu .needle{background:linear-gradient(#3a2a10,#a08a52)}
[data-v="2"] .w-vu .cap,[data-v="2"] .w-vu .db{color:rgba(88,60,14,.6)}

[data-v="1"] .w-thock .dev{background:linear-gradient(#f2efe8,#dcd7c9)}
[data-v="1"] .w-thock .caps i{background:linear-gradient(#3a3a3e,#232326);box-shadow:0 calc((1 - var(--d,0)) * 1.6cqw) 0 #131315, 0 calc((1 - var(--d,0)) * 2.6cqw) 2.2cqw rgba(0,0,0,.28), inset 0 .5cqw 0 rgba(255,255,255,.14)}
[data-v="1"] .w-thock .caps b{color:#efece4}
[data-v="1"] .w-thock .ring{border-color:rgba(40,40,44,.5)}
[data-v="1"] .w-thock .dev::after{color:rgba(40,40,44,.32)}
[data-v="2"] .w-thock .dev{background:linear-gradient(#1a2622,#0d1512)}
[data-v="2"] .w-thock .caps i{background:linear-gradient(#dcf2e4,#a8ceb8)}
[data-v="2"] .w-thock .caps b{color:#22403a}
[data-v="2"] .w-thock .ring{border-color:rgba(150,240,200,.55)}

[data-v="1"] .w-tiles .dev{background:#e7eaee}
[data-v="1"] .w-tiles .grid i{background:rgba(70,84,100,.10);color:#4b586a}
[data-v="1"] .w-tiles i[data-v="1"],[data-v="1"] .w-tiles i[data-v="2"]{background:#dfe4ea;color:#46536a}
[data-v="1"] .w-tiles i[data-v="3"]{background:#9fb2c8;color:#1c2634}
[data-v="1"] .w-tiles i[data-v="4"]{background:#7591b0;color:#f4f7fa}
[data-v="1"] .w-tiles i[data-v="5"]{background:#4d6c92;color:#f4f7fa}
[data-v="1"] .w-tiles i[data-v="6"]{background:#2f4c72;color:#f4f7fa}
[data-v="1"] .w-tiles i[data-v="7"]{background:#1d3352;color:#f4f7fa}
[data-v="2"] .w-tiles .dev{background:#0c0e12}
[data-v="2"] .w-tiles .grid i{background:rgba(140,200,255,.07);color:rgba(190,225,255,.7)}
[data-v="2"] .w-tiles i[data-v="1"],[data-v="2"] .w-tiles i[data-v="2"]{background:rgba(120,200,255,.16);color:#cfe8ff}
[data-v="2"] .w-tiles i[data-v="3"]{background:#1d5f8a;color:#eaf6ff}
[data-v="2"] .w-tiles i[data-v="4"]{background:#1e7fa8;color:#eaf6ff}
[data-v="2"] .w-tiles i[data-v="5"]{background:#22a3a0;color:#04202a}
[data-v="2"] .w-tiles i[data-v="6"]{background:#4ad07a;color:#04202a}
[data-v="2"] .w-tiles i[data-v="7"]{background:#b6f05a;color:#04202a}

[data-v="1"] .w-pong .court{background:radial-gradient(120% 100% at 50% 30%,#2f7350,#1d5138 78%);box-shadow:inset 0 0 0 1.4cqw #5a3a22}
[data-v="2"] .w-pong .court{background:radial-gradient(120% 100% at 50% 40%,#1a0d2e,#0b0518 80%)}
[data-v="2"] .w-pong .pad,[data-v="2"] .w-pong .ball{background:#63f2c8;box-shadow:0 0 3cqw rgba(99,242,200,.7)}
[data-v="2"] .w-pong .net{border-color:rgba(99,242,200,.35)}
[data-v="2"] .w-pong .sc{color:rgba(99,242,200,.45)}

[data-v="1"] .w-brk .table{background:radial-gradient(120% 100% at 50% 30%,#2b5f96,#123a63 78%);box-shadow:inset 0 0 0 1.6cqw #4a3320, inset 0 1cqw 2.4cqw rgba(0,0,0,.35)}
[data-v="2"] .w-brk .table{background:radial-gradient(120% 100% at 50% 30%,#2a2a2e,#131316 78%);box-shadow:inset 0 0 0 1.6cqw #3a3a40, inset 0 1cqw 2.4cqw rgba(0,0,0,.5)}
[data-v="2"] .w-brk .table i{background:radial-gradient(circle at 34% 26%,#fff,#d8d2c4 66%,#8f887a)}
[data-v="2"] .w-brk .table i.cue{background:radial-gradient(circle at 34% 26%,#ffe08a,#e0a23a 66%,#8a5e14)}

/* ── the player, in three shells ────────────────────────────────────────── */
[data-v="1"] .w-player .dev{background:linear-gradient(#4a4a4e,#232326)}
[data-v="1"] .w-player .wheel{background:radial-gradient(circle at 40% 32%,#5c5c62,#2c2c30)}
[data-v="1"] .w-player .wl{color:rgba(240,240,238,.6)}
[data-v="1"] .w-player .wheel .ctr{background:linear-gradient(#4e4e54,#333338)}
[data-v="1"] .w-player .wheel .ctr b{color:#dcdcd8}
[data-v="2"] .w-player .dev{background:linear-gradient(#8fd8e6,#3f9fbe)}
[data-v="2"] .w-player .wheel{background:radial-gradient(circle at 40% 32%,#eafaff,#a8dcea)}

/* ═══ RUNNING YOUR LIFE ═════════════════════════════════════════════════════
   ONE HEADER ROW, then ONE BODY. Never two figures of equal weight — that is a
   table, and a table at 140pt is a grey smudge.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── heart rate ─────────────────────────────────────────────────────────── */
.w-pulse{background:linear-gradient(#fffefb,#f2f4f8);padding:7cqw}
.w-pulse .hd{display:flex;align-items:center;gap:3cqw}
.w-pulse .ic{
  width:13cqw;height:13cqw;flex:none;border-radius:3.6cqw;background:#0a63f5;
  box-shadow:0 1cqw 2cqw rgba(10,99,245,.30);
  -webkit-mask:none;position:relative;
}
.w-pulse .ic::after{
  content:'';position:absolute;inset:26%;
  background:#fff;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='22' viewBox='0 0 24 22'><path d='M12 21C5 16 1 12 1 7.5 1 4 3.7 1.5 7 1.5c2 0 3.8 1 5 2.6C13.2 2.5 15 1.5 17 1.5c3.3 0 6 2.5 6 6C23 12 19 16 12 21Z' fill='%23000'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='22' viewBox='0 0 24 22'><path d='M12 21C5 16 1 12 1 7.5 1 4 3.7 1.5 7 1.5c2 0 3.8 1 5 2.6C13.2 2.5 15 1.5 17 1.5c3.3 0 6 2.5 6 6C23 12 19 16 12 21Z' fill='%23000'/></svg>") center/contain no-repeat;
}
.w-pulse .hd em{display:block;font-style:normal;font-size:5.5cqw;color:rgba(20,22,26,.42);letter-spacing:-.01em}
.w-pulse .hd b{display:block;font-weight:500;font-size:6.9cqw;letter-spacing:-.025em;color:#14161a}
.w-pulse .panel{
  position:absolute;left:7cqw;right:7cqw;bottom:7cqw;height:48cqw;
  border-radius:5cqw;background:#f2f3f5;overflow:hidden;display:flex;align-items:center;
}
.w-pulse .trace{position:absolute;left:4%;top:0;width:66%;height:100%}
.w-pulse .trace path{stroke:#0a63f5;stroke-width:2}
.w-pulse .chip{
  position:absolute;right:0;top:0;bottom:0;width:34%;
  border-radius:5cqw;background:#0a63f5;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:-1cqw 0 3cqw rgba(10,99,245,.22);
}
.w-pulse .chip b{font-weight:500;font-size:8.7cqw;letter-spacing:-.04em;line-height:.9}
.w-pulse .chip span{font-size:4.4cqw;opacity:.8}

/* ── pressure ───────────────────────────────────────────────────────────── */
.w-press{background:linear-gradient(#fffdf8,#f3eee2);padding:7cqw}
.w-press .ttl{font-weight:500;font-size:6.9cqw;letter-spacing:-.03em;color:#14161a}
.w-press .plot{position:absolute;left:7cqw;right:7cqw;top:24cqw;bottom:20cqw}
.w-press .axis{position:absolute;left:0;top:0;bottom:0;width:18cqw;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}
.w-press .axis b{font-weight:400;font-size:5.5cqw;color:#14161a}
.w-press .axis i{position:absolute;left:15cqw;top:2cqw;bottom:2cqw;width:.7cqw;background:#14161a;border-radius:1cqw}
.w-press .axis::before,.w-press .axis::after{
  content:'';position:absolute;left:13.3cqw;width:4cqw;height:4cqw;border-radius:50%;background:#14161a;
}
.w-press .axis::before{top:0}
.w-press .axis::after{bottom:0}
.w-press svg{position:absolute;left:20cqw;right:0;top:0;bottom:0;width:calc(100% - 20cqw);height:100%}
.w-press .sys{fill:#f2c98a}
.w-press svg{transition:none}
.w-press .dia{fill:#a9c8ea}
.w-press .mid{stroke:rgba(20,22,26,.14);stroke-width:1;fill:none}
.w-press .read{position:absolute;left:7cqw;bottom:6cqw;display:flex;align-items:baseline;gap:1.6cqw}
.w-press .read b{font-weight:500;font-size:8.7cqw;letter-spacing:-.035em;color:#14161a}
.w-press .read span{font-size:5.5cqw;color:rgba(20,22,26,.45)}

/* ── last night ─────────────────────────────────────────────────────────── */
.w-sleepr .hyp i.head{box-shadow:0 0 1.6cqw rgba(150,196,255,.75);filter:brightness(1.35)}
.w-sleepr{background:linear-gradient(#141c33,#0a0f1e);padding:7cqw}
.w-sleepr .hd{display:flex;align-items:baseline;gap:2.6cqw}
.w-sleepr .hd em{font-style:normal;font-size:4.4cqw;letter-spacing:.14em;text-transform:uppercase;color:rgba(190,214,255,.5)}
.w-sleepr .hd b{font-weight:500;font-size:8.7cqw;letter-spacing:-.035em;color:#eaf1ff;margin-left:auto}
.w-sleepr .hyp{
  position:absolute;left:7cqw;right:7cqw;top:30cqw;height:44cqw;
  display:flex;align-items:flex-end;gap:.5cqw;
}
.w-sleepr .hyp i{flex:1;border-radius:.6cqw .6cqw 0 0;transition:opacity .4s ease}
.w-sleepr .hyp i[data-s="0"]{height:22%;background:#f2a03d}
.w-sleepr .hyp i[data-s="1"]{height:46%;background:#7cc0ff}
.w-sleepr .hyp i[data-s="2"]{height:72%;background:#3f7fd4}
.w-sleepr .hyp i[data-s="3"]{height:100%;background:#1e3f86}
.w-sleepr .ft{
  position:absolute;left:7cqw;right:7cqw;bottom:6cqw;display:flex;justify-content:space-between;
  font-size:4.4cqw;color:rgba(190,214,255,.42);
}

/* ── the tide ───────────────────────────────────────────────────────────── */
.w-tide{background:#0a1c33;overflow:hidden}
.w-tide .hold{position:absolute;inset:0}
.w-tide .hd{position:absolute;left:7cqw;right:7cqw;top:6cqw;display:flex;align-items:baseline;justify-content:space-between}
.w-tide .hd em{font-style:normal;font-weight:500;font-size:6.9cqw;letter-spacing:-.025em;color:#f4f9ff;text-shadow:0 .6cqw 2cqw rgba(4,12,26,.65)}
.w-tide .hd b{font-weight:500;font-size:6.9cqw;letter-spacing:-.025em;color:#f4f9ff;font-variant-numeric:tabular-nums;text-shadow:0 .6cqw 2cqw rgba(4,12,26,.65)}
.w-tide .ft{
  position:absolute;left:7cqw;right:7cqw;bottom:6cqw;display:flex;justify-content:space-between;align-items:flex-end;
  font-size:4.4cqw;color:rgba(206,228,252,.62);text-shadow:0 .4cqw 1.6cqw rgba(4,12,26,.6);
}
.w-tide .ft b{display:block;font-weight:500;font-size:5.5cqw;color:#f4f9ff;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.w-tide .ft .mid{color:rgba(206,228,252,.86)}
/* ⚠ the chart variant is ink on paper and inherits none of the night's type */
.w-tide[data-x] {}
.field[data-v="2"] .w-tide .hd em,.field[data-v="2"] .w-tide .hd b,.field[data-v="2"] .w-tide .ft b{color:#1b2b3d;text-shadow:none}
.field[data-v="2"] .w-tide .ft{color:rgba(40,58,78,.62);text-shadow:none}
.field[data-v="2"] .w-tide .ft .mid{color:rgba(40,58,78,.85)}
.field[data-v="2"] .w-tide{background:#f6f2e8}

/* ── departures ─────────────────────────────────────────────────────────── */
.w-board{background:radial-gradient(130% 100% at 50% -10%,#183358,#060c18 72%);padding:6cqw 0 0}
.w-board .hd{display:flex;justify-content:space-between;align-items:baseline;padding:0 6cqw 3cqw}
.w-board .hd em{font-style:normal;font-size:4.4cqw;letter-spacing:.16em;text-transform:uppercase;color:rgba(160,200,255,.55)}
.w-board .hd b{font-family:ui-monospace,Menlo,monospace;font-weight:400;font-size:5.5cqw;color:#eaf2ff}
.w-board .rows{display:flex;flex-direction:column;gap:.6cqw;padding:0 4cqw}
.w-board .r{
  display:grid;grid-template-columns:17cqw 1fr auto;align-items:center;gap:2cqw;
  transform:perspective(60cqw) rotateX(calc(var(--flap,0) * -46deg));
  transform-origin:50% 50%;
  padding:1.9cqw 2cqw;border-radius:1.4cqw;background:rgba(120,170,255,.07);
  font-size:4.4cqw;color:#dce9ff;
}
.w-board .at{font-family:ui-monospace,Menlo,monospace;color:rgba(190,220,255,.75)}
.w-board .to{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-board .st{font-size:3.5cqw;letter-spacing:.06em;text-transform:uppercase}
.w-board .r[data-st=ontime] .st{color:#5ce08a}
.w-board .r[data-st=delayed] .st{color:#f2b13d}
.w-board .r[data-st=cancelled] .st{color:#ff6a5e}
.w-board .r[data-st=boarding] .st{color:#7cc0ff}
.w-board .r[data-st=boarding]{background:rgba(124,192,255,calc(.06 + var(--blink,.5) * .16))}
.w-board .r[data-st=boarding] .st{opacity:var(--blink,1)}

/* ── boarding ───────────────────────────────────────────────────────────── */
.w-hop{background:linear-gradient(#fffdf8,#f2ece0);padding:7cqw}
.w-hop .top{display:flex;justify-content:space-between;align-items:baseline}
.w-hop .top em{font-style:normal;font-size:4.4cqw;color:#e8622c;font-weight:500}
.w-hop .top b{font-weight:400;font-size:4.4cqw;color:rgba(20,22,26,.45)}
.w-hop .track{position:absolute;left:8cqw;right:8cqw;top:40cqw;height:16cqw}
.w-hop .line{position:absolute;left:0;right:52%;top:50%;height:.7cqw;background:#e8622c;transform:translateY(-50%)}
.w-hop .dash{position:absolute;left:48%;right:0;top:50%;height:.7cqw;transform:translateY(-50%);
  background:repeating-linear-gradient(90deg,#e8622c 0 2cqw,transparent 2cqw 4cqw)}
.w-hop .plane{
  position:absolute;top:50%;width:9cqw;height:9cqw;transform:translate(-50%,calc(-50% + var(--bob,0cqw)));
  background:#e8622c;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M2 13.5 22 12 2 10.5l2-3.5 5 1.6L7 3h2.5l4.2 5.2L20 9.6 22 12l-8.3 1.4L9.5 21H7l2-5.6-5 1.6Z' fill='%23000'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M2 13.5 22 12 2 10.5l2-3.5 5 1.6L7 3h2.5l4.2 5.2L20 9.6 22 12l-8.3 1.4L9.5 21H7l2-5.6-5 1.6Z' fill='%23000'/></svg>") center/contain no-repeat;
}
.w-hop .ends{position:absolute;left:7cqw;right:7cqw;top:60cqw;display:flex;justify-content:space-between}
.w-hop .ends .r{text-align:right}
.w-hop .ends b{display:block;font-weight:500;font-size:8.7cqw;letter-spacing:-.04em;color:#14161a;line-height:1}
.w-hop .ends em{display:block;font-style:normal;font-size:4.4cqw;color:rgba(20,22,26,.42);margin-top:.6cqw}
.w-hop .at{position:absolute;left:7cqw;top:18cqw;font-weight:500;font-size:11cqw;letter-spacing:-.045em;color:#14161a}

/* ── ninety days ────────────────────────────────────────────────────────── */
.w-schengen{background:#f8f3e6;overflow:hidden}
.w-schengen .hold{position:absolute;inset:0}
.w-schengen .hd{position:absolute;left:9cqw;top:7cqw;display:flex;align-items:baseline;gap:2.2cqw}
.w-schengen .hd b{font-weight:500;font-size:17.4cqw;line-height:.9;letter-spacing:-.045em;color:#2b2418;font-variant-numeric:tabular-nums}
.w-schengen .hd span{font-size:4.4cqw;letter-spacing:.1em;text-transform:uppercase;color:rgba(60,48,28,.55)}
.w-schengen .ft{position:absolute;left:9cqw;bottom:6cqw;font-size:4.4cqw;letter-spacing:.08em;text-transform:uppercase;color:rgba(60,48,28,.45)}
[data-v="2"] .w-schengen .hd b{color:#eceef4}
[data-v="2"] .w-schengen .hd span,[data-v="2"] .w-schengen .ft{color:rgba(232,236,248,.5)}

/* ── four clocks ────────────────────────────────────────────────────────── */
.w-zones{background:#0b0c0f;overflow:hidden}
.w-zones .hold{position:absolute;inset:0}

/* ── charging ───────────────────────────────────────────────────────────── */
.w-charge{background:radial-gradient(120% 100% at 50% 8%,#22261c,#0b0d09);display:grid;place-items:center}
.w-charge .ring{position:absolute;left:14%;top:10%;width:72%;height:72%}
.w-charge .bg{stroke:rgba(190,240,120,.12);stroke-width:8}
.w-charge .fg{stroke:#b6f05a;stroke-width:8;filter:drop-shadow(0 0 2cqw rgba(182,240,90,.5))}
.w-charge .bolt{
  position:absolute;left:50%;top:24%;width:9cqw;height:9cqw;transform:translateX(-50%);
  background:#b6f05a;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M13 2 4 14h6l-1 8 9-12h-6Z' fill='%23000'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M13 2 4 14h6l-1 8 9-12h-6Z' fill='%23000'/></svg>") center/contain no-repeat;
}
.w-charge .mid{position:absolute;left:0;right:0;top:40%;display:flex;justify-content:center;align-items:baseline;gap:.8cqw}
.w-charge .mid b{font-weight:500;font-size:22cqw;letter-spacing:-.05em;line-height:.9;color:#eaf6dc}
.w-charge .mid span{font-size:5.5cqw;color:rgba(234,246,220,.5)}
.w-charge .ft{position:absolute;left:0;right:0;bottom:8cqw;text-align:center;font-size:4.4cqw;color:rgba(234,246,220,.45)}

/* ── this month ─────────────────────────────────────────────────────────── */
.w-spend{background:radial-gradient(120% 96% at 20% 0%,#22252c,#0e1013);padding:7cqw}
.w-spend .hd em{font-style:normal;font-size:4.4cqw;letter-spacing:.14em;text-transform:uppercase;color:rgba(200,214,236,.45)}
.w-spend .fig{display:flex;align-items:baseline;gap:1.2cqw;margin-top:3cqw;white-space:nowrap}
.w-spend .fig i{font-style:normal;font-size:8.7cqw;line-height:1;color:rgba(200,214,236,.45);align-self:baseline}
.w-spend .fig b{font-weight:500;font-size:17.4cqw;letter-spacing:-.05em;line-height:.92;color:#eef3fb}
.w-spend .bar{
  position:absolute;left:7cqw;right:7cqw;top:52cqw;height:5cqw;display:flex;gap:.7cqw;
  border-radius:2.5cqw;
}
.w-spend .bar::after{
  content:'';position:absolute;left:var(--k,60%);top:-2cqw;bottom:-2cqw;width:.8cqw;
  background:#eef3fb;border-radius:1cqw;box-shadow:0 0 2cqw rgba(238,243,251,.5);
}
.w-spend .bar i{background:var(--c);border-radius:1cqw}
.w-spend .key{position:absolute;left:7cqw;right:7cqw;top:62cqw;display:flex;gap:3.4cqw;font-size:4.4cqw;color:rgba(200,214,236,.55)}
.w-spend .key span{display:flex;align-items:center;gap:1.4cqw}
.w-spend .key u{width:2.2cqw;height:2.2cqw;border-radius:50%}
.w-spend .ft{position:absolute;left:7cqw;bottom:6cqw;font-size:4.4cqw;color:rgba(200,214,236,.34)}

/* ── medications ────────────────────────────────────────────────────────── */
.w-dose{background:#f6f7fb;overflow:hidden}
.w-dose .hold{position:absolute;inset:0}
.w-dose .hd{position:absolute;left:8cqw;right:8cqw;top:7cqw}
.w-dose .hd b{display:block;font-weight:500;font-size:8.7cqw;letter-spacing:-.032em;color:#1e2230}
.w-dose .hd span{display:block;font-size:5.5cqw;color:rgba(34,40,58,.55);margin-top:.4cqw}
.w-dose .ft{position:absolute;left:8cqw;right:8cqw;bottom:7cqw;display:flex;align-items:baseline;justify-content:space-between}
.w-dose .ft em{font-style:normal;font-size:4.4cqw;letter-spacing:.08em;text-transform:uppercase;color:rgba(34,40,58,.5)}
.w-dose .ft i{font-style:normal;font-size:5.5cqw;font-weight:500;color:#3b5bdb}
[data-v="1"] .w-dose .ft i{color:#c05621}
[data-v="2"] .w-dose .hd b{color:#eef1f8}
[data-v="2"] .w-dose .hd span{color:rgba(226,232,248,.55)}
[data-v="2"] .w-dose .ft em{color:rgba(226,232,248,.5)}
[data-v="2"] .w-dose .ft i{color:#7aa2ff}

/* ── watering ───────────────────────────────────────────────────────────── */
.w-plants{background:#faf6ef;overflow:hidden}
.w-plants .hold{position:absolute;inset:0}
.w-plants .cap{position:absolute;left:7cqw;right:7cqw;bottom:6cqw;display:flex;align-items:baseline;justify-content:space-between}
.w-plants .cap b{font-weight:500;font-size:8.7cqw;letter-spacing:-.03em;color:#2f2a22}
.w-plants .cap span{font-size:4.4cqw;letter-spacing:.08em;text-transform:uppercase;color:rgba(60,50,34,.55)}
[data-v="2"] .w-plants .cap b{color:#eef1ee}
[data-v="2"] .w-plants .cap span{color:rgba(226,232,226,.5)}

/* ── bin night ──────────────────────────────────────────────────────────── */
.w-bins{background:#0d0d10;overflow:hidden}
.w-bins .hold{position:absolute;inset:0}
.w-bins .cap{position:absolute;left:8cqw;right:8cqw;bottom:14cqw;text-align:center}
.w-bins .cap b{display:block;font-weight:500;font-size:8.7cqw;letter-spacing:-.03em;color:#f2f3f6}
.w-bins .cap span{display:block;font-size:5.5cqw;color:rgba(232,236,246,.6);margin-top:.4cqw}
.w-bins .ft{position:absolute;left:0;right:0;bottom:6cqw;text-align:center;font-size:4.4cqw;letter-spacing:.16em;text-transform:uppercase;color:rgba(232,236,246,.42)}

/* ── every month ────────────────────────────────────────────────────────── */
.w-subs{background:linear-gradient(#fdfaf2,#efeade);padding:7cqw;overflow:hidden}
.w-subs .hd{display:flex;justify-content:space-between;align-items:baseline}
.w-subs .hd em{font-style:normal;font-size:4.4cqw;letter-spacing:.14em;text-transform:uppercase;color:rgba(20,22,26,.4)}
.w-subs .hd b{font-weight:500;font-size:6.9cqw;letter-spacing:-.03em;color:#14161a}
.w-subs .rows{position:absolute;left:7cqw;right:7cqw;top:26cqw;display:flex;flex-direction:column;gap:1.6cqw}
.w-subs .r{display:flex;align-items:center;gap:2.4cqw;font-size:4.4cqw;color:#14161a}
.w-subs .r u{width:4.4cqw;height:4.4cqw;border-radius:1.4cqw;flex:none}
.w-subs .r span{flex:1;color:rgba(20,22,26,.6)}
.w-subs .r b{font-weight:500}
.w-subs .sweep{
  position:absolute;left:0;right:0;height:9cqw;transform:translateY(-50%);
  background:linear-gradient(90deg,rgba(47,107,255,0),rgba(47,107,255,.10),rgba(47,107,255,0));
  pointer-events:none;
}

/* ── where the car is ───────────────────────────────────────────────────── */
.w-park{background:#f2efe7;--drift:0cqw;overflow:hidden}
.w-park .map{position:absolute;inset:0}
.w-park .map{position:absolute;inset:-8cqw;transform:translateX(var(--drift,0));background:
  repeating-linear-gradient(0deg,rgba(60,48,32,.05) 0 1px,transparent 1px 9%),
  repeating-linear-gradient(90deg,rgba(60,48,32,.05) 0 1px,transparent 1px 9%)}
.w-park .road{stroke:rgba(60,48,32,.20);stroke-width:7;vector-effect:non-scaling-stroke;fill:none;stroke-linecap:round}
.w-park .blk{fill:rgba(60,48,32,.10)}
.w-park .map::after{content:''}
.w-park .pin{
  position:absolute;left:43%;top:44%;width:5.6cqw;height:5.6cqw;border-radius:50%;background:#2f6bff;
  transform:translate(-50%,-50%) scale(calc(1 + var(--ping,0) * .16));
  box-shadow:0 0 0 calc(1.4cqw + var(--ping,0) * 6cqw) rgba(47,107,255,calc(.24 - var(--ping,0) * .22)),
             0 .6cqw 1.4cqw rgba(0,0,0,.22);
}
.w-park .cap{position:absolute;left:7%;right:7%;bottom:8%}
.w-park .cap b{display:block;font-weight:500;font-size:5.5cqw;letter-spacing:-.024em;color:#2f2a22}
.w-park .cap span{display:block;font-size:5.5cqw;color:rgba(60,48,32,.5);margin-top:.4cqw}

/* ── who is next ────────────────────────────────────────────────────────── */
.w-gifts{background:#fbf8f2;overflow:hidden}
.w-gifts .hold{position:absolute;inset:0}
.w-gifts .cap{position:absolute;left:8cqw;right:8cqw;bottom:7cqw}
.w-gifts .cap em{display:block;font-style:normal;font-size:4.4cqw;letter-spacing:.12em;text-transform:uppercase;color:#c0562b}
.w-gifts .cap b{display:block;font-weight:500;font-size:8.7cqw;letter-spacing:-.032em;color:#2f2a22;margin-top:.4cqw}
.w-gifts .cap span{display:block;font-size:4.4cqw;color:rgba(60,48,32,.58);margin-top:.4cqw}
[data-v="2"] .w-gifts .cap b{color:#f2f1ee}
[data-v="2"] .w-gifts .cap em{color:#ff9a63}
[data-v="2"] .w-gifts .cap span{color:rgba(242,241,238,.5)}

/* ── on its way ─────────────────────────────────────────────────────────── */
.w-parcel{background:linear-gradient(#2a1f14,#100a06);padding:7cqw}
.w-parcel .hd{display:flex;justify-content:space-between;align-items:baseline}
.w-parcel .hd em{font-style:normal;font-size:4.4cqw;letter-spacing:.12em;text-transform:uppercase;color:rgba(200,214,236,.42)}
.w-parcel .hd b{font-weight:500;font-size:8.7cqw;letter-spacing:-.035em;color:#eef3fb}
.w-parcel .track{position:absolute;left:10cqw;right:10cqw;top:56cqw;height:10cqw}
.w-parcel .line{position:absolute;left:0;right:0;top:50%;height:.8cqw;transform:translateY(-50%);background:rgba(200,214,236,.16);border-radius:1cqw}
.w-parcel .done{position:absolute;left:0;top:50%;height:.8cqw;transform:translateY(-50%);background:#b6f05a;border-radius:1cqw;overflow:hidden}
/* the light running down the finished route — a parcel in transit is a thing
   moving, and a bar that fills at 6% a second cannot say so */
.w-parcel .done::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) calc(var(--run,0%) - 34%),
    rgba(255,255,255,.92) var(--run,0%),
    rgba(255,255,255,0) calc(var(--run,0%) + 34%));
}
.w-parcel .stop{position:absolute;top:50%;width:2.6cqw;height:2.6cqw;margin-left:-1.3cqw;transform:translateY(-50%);border-radius:50%;background:rgba(200,214,236,.24)}
.w-parcel .stop.on{background:#b6f05a}
.w-parcel .van{box-shadow:0 0 0 calc(var(--pulse,.5) * 1.6cqw) rgba(182,240,90,calc(.30 - var(--pulse,.5) * .22));
  position:absolute;top:50%;width:8cqw;height:8cqw;transform:translate(-50%,calc(-50% + var(--jog,0cqw)));background:#b6f05a;
  -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M1 6h12v9H1zM13 9h5l3 3.5V15h-8z' fill='%23000'/%3E%3Ccircle cx='6' cy='17' r='2.2' fill='%23000'/%3E%3Ccircle cx='17' cy='17' r='2.2' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M1 6h12v9H1zM13 9h5l3 3.5V15h-8z' fill='%23000'/%3E%3Ccircle cx='6' cy='17' r='2.2' fill='%23000'/%3E%3Ccircle cx='17' cy='17' r='2.2' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
}
.w-parcel .ft{position:absolute;left:7cqw;right:7cqw;bottom:6cqw;display:flex;justify-content:space-between;font-size:4.4cqw;color:rgba(200,214,236,.5)}
.w-parcel .ft .st{color:#b6f05a}

/* ── one line ───────────────────────────────────────────────────────────── */
/* ⚠ THE LINE IS THE SUBJECT AND EVERYTHING ELSE IS FURNITURE. Set at 11cqw
   under a big grey pair of quote marks it was the third loudest thing in its
   own tile. It is set in the display serif now, at half again the size, hung
   on an opening quote that sits OUTSIDE the measure the way a real setting
   hangs punctuation — and the date is a small mark at the foot rather than a
   second line of copy. */
.w-quote{background:radial-gradient(126% 104% at var(--lx,20%) var(--ly,2%),#3f3446,#0d0a11);padding:9cqw}
.w-quote .mark{display:none}
.w-quote .t{
  position:absolute;left:11cqw;right:8cqw;top:20cqw;
  font-family:"Iowan Old Style",Georgia,serif;font-weight:400;font-size:15.5cqw;line-height:1.06;
  letter-spacing:-.028em;color:#f6f4ee;text-wrap:balance;text-indent:-3.6cqw;
}
.w-quote .t::before{content:'\201C';color:rgba(246,244,238,.34)}
.w-quote .t::after{content:'\201D';color:rgba(246,244,238,.34)}
.w-quote .ft{position:absolute;left:11cqw;bottom:7cqw;display:flex;align-items:center;gap:2.6cqw;
  font-size:4.4cqw;letter-spacing:.14em;text-transform:uppercase;color:rgba(240,238,232,.42)}
.w-quote .ft::before{content:'';width:7cqw;height:.35cqw;background:rgba(240,238,232,.30)}
[data-v="1"] .w-quote .t{color:#241f1a}
[data-v="1"] .w-quote .t::before,[data-v="1"] .w-quote .t::after{color:rgba(52,42,32,.30)}
[data-v="1"] .w-quote .ft{color:rgba(52,42,32,.5)}
[data-v="1"] .w-quote .ft::before{background:rgba(52,42,32,.32)}

/* ── variants: running your life ────────────────────────────────────────── */
[data-v="1"] .w-pulse{background:#0d1017}
[data-v="1"] .w-pulse .hd em{color:rgba(190,214,255,.45)}
[data-v="1"] .w-pulse .hd b{color:#eaf1ff}
[data-v="1"] .w-pulse .panel{background:rgba(120,170,255,.08)}
[data-v="1"] .w-pulse .trace path{stroke:#5ce08a}
[data-v="1"] .w-pulse .chip{background:#5ce08a;color:#04180c;box-shadow:-1cqw 0 3cqw rgba(92,224,138,.22)}
[data-v="1"] .w-pulse .ic{background:#5ce08a;box-shadow:0 1cqw 2cqw rgba(92,224,138,.3)}
[data-v="1"] .w-pulse .ic::after{background:#04180c}
[data-v="2"] .w-pulse{background:#f6f2e8}
[data-v="2"] .w-pulse .panel{background:#ece5d6}
[data-v="2"] .w-pulse .trace path{stroke:#8a3a2c}
[data-v="2"] .w-pulse .chip{background:#8a3a2c;box-shadow:none}
[data-v="2"] .w-pulse .ic{background:#8a3a2c;box-shadow:none}

[data-v="1"] .w-press{background:#171a20}
[data-v="1"] .w-press .ttl,[data-v="1"] .w-press .read b,[data-v="1"] .w-press .axis b{color:#eaf1ff}
[data-v="1"] .w-press .read span{color:rgba(190,214,255,.45)}
[data-v="1"] .w-press .axis i,[data-v="1"] .w-press .axis::before,[data-v="1"] .w-press .axis::after{background:#eaf1ff}
[data-v="1"] .w-press .sys{fill:#c98a3a}
[data-v="1"] .w-press .dia{fill:#3f6ca8}
[data-v="1"] .w-press .mid{stroke:rgba(190,214,255,.16)}
[data-v="2"] .w-press{background:#faf7ef}
[data-v="2"] .w-press .sys{fill:#b8503a}
[data-v="2"] .w-press .dia{fill:#5a6a7a}

[data-v="1"] .w-sleepr{background:linear-gradient(#33203a,#160d1c)}
[data-v="1"] .w-sleepr .hyp i[data-s="1"]{background:#f0a6c8}
[data-v="1"] .w-sleepr .hyp i[data-s="2"]{background:#b46ac4}
[data-v="1"] .w-sleepr .hyp i[data-s="3"]{background:#5c2f7a}
[data-v="2"] .w-sleepr{background:linear-gradient(#16181c,#0a0b0d)}
[data-v="2"] .w-sleepr .hyp i[data-s="0"]{background:#8a8f98}
[data-v="2"] .w-sleepr .hyp i[data-s="1"]{background:#d8dce2}
[data-v="2"] .w-sleepr .hyp i[data-s="2"]{background:#8f959e}
[data-v="2"] .w-sleepr .hyp i[data-s="3"]{background:#4a5058}

[data-v="1"] .w-tide{background:linear-gradient(#4a2c58,#1c1030)}
[data-v="1"] .w-tide .fill{fill:rgba(240,160,200,.20)}
[data-v="1"] .w-tide .line{stroke:rgba(255,214,236,.85)}
[data-v="2"] .w-tide{background:#f6f3ea}
[data-v="2"] .w-tide .hd em,[data-v="2"] .w-tide .hd b{color:#1f2a34}
[data-v="2"] .w-tide .fill{fill:rgba(60,120,180,.16)}
[data-v="2"] .w-tide .line{stroke:#2f6b96}
[data-v="2"] .w-tide .ft{color:rgba(31,42,52,.55)}
[data-v="2"] .w-tide .ft b{color:#1f2a34}
[data-v="2"] .w-tide .ft .mid{color:rgba(31,42,52,.75)}

[data-v="1"] .w-board{background:radial-gradient(130% 100% at 50% -8%,#232018,#0a0806 74%)}
[data-v="1"] .w-board .r{background:linear-gradient(#221f18,#15130f);font-family:ui-monospace,Menlo,monospace;color:#f0e8c8;box-shadow:inset 0 .3cqw 0 rgba(255,240,200,.10)}
[data-v="1"] .w-board .at{color:#f0e8c8}
[data-v="1"] .w-board .hd b{color:#f0e8c8}
[data-v="2"] .w-board{background:#1a1204}
[data-v="2"] .w-board .r{background:rgba(255,180,60,.08);color:#ffbf4a}
[data-v="2"] .w-board .at,[data-v="2"] .w-board .hd b{color:#ffbf4a}
[data-v="2"] .w-board .hd em{color:rgba(255,191,74,.5)}
[data-v="2"] .w-board .r[data-st=ontime] .st{color:#ffbf4a}

[data-v="1"] .w-hop{background:#0e1118}
[data-v="1"] .w-hop .ends b,[data-v="1"] .w-hop .at{color:#eaf1ff}
[data-v="1"] .w-hop .ends em,[data-v="1"] .w-hop .top b{color:rgba(190,214,255,.45)}
[data-v="2"] .w-hop{background:linear-gradient(#eef4fd,#dbe6f5)}
[data-v="2"] .w-hop .top em,[data-v="2"] .w-hop .line,[data-v="2"] .w-hop .plane{background:#0a63f5;color:#0a63f5}
[data-v="2"] .w-hop .top em{background:none}
[data-v="2"] .w-hop .dash{background:repeating-linear-gradient(90deg,#0a63f5 0 2cqw,transparent 2cqw 4cqw)}

[data-v="1"] .w-schengen{background:linear-gradient(#f6efe2,#e4d6bc)}
[data-v="1"] .w-schengen .fg{stroke:#8a3a2c}
[data-v="1"] .w-schengen::after{background:conic-gradient(from var(--spin,0deg), rgba(138,58,44,0) 0deg, rgba(138,58,44,.6) 15deg, rgba(138,58,44,0) 32deg)}
[data-v="2"] .w-schengen{background:linear-gradient(#171a20,#0b0d11)}
[data-v="2"] .w-schengen .bg{stroke:rgba(190,214,255,.12)}
[data-v="2"] .w-schengen .fg{stroke:#7cc0ff}
[data-v="2"] .w-schengen .mid b{color:#eaf1ff}
[data-v="2"] .w-schengen .mid span,[data-v="2"] .w-schengen .ft{color:rgba(190,214,255,.42)}
[data-v="2"] .w-schengen::after{background:conic-gradient(from var(--spin,0deg), rgba(124,192,255,0) 0deg, rgba(124,192,255,.6) 15deg, rgba(124,192,255,0) 32deg)}

[data-v="1"] .w-zones{background:linear-gradient(#f7f3e9,#e6ddc9)}
[data-v="1"] .w-zones .face{background:radial-gradient(circle at 38% 30%,#fdfaf2,#e8e0cd);box-shadow:inset 0 0 0 .6cqw rgba(60,48,32,.16), 0 1cqw 2cqw rgba(60,48,32,.2)}
[data-v="1"] .w-zones .c[data-night=true] .face{background:radial-gradient(circle at 38% 30%,#ded6c4,#c2b9a4)}
[data-v="1"] .w-zones .face b{background:#2b2620}
[data-v="1"] .w-zones .face .m{background:rgba(43,38,32,.72)}
[data-v="1"] .w-zones .c span{color:rgba(60,48,32,.55)}
[data-v="2"] .w-zones{background:linear-gradient(#2a1f0c,#120c04)}
[data-v="2"] .w-zones .face{background:radial-gradient(circle at 38% 30%,#3e2f12,#1d1507);box-shadow:inset 0 0 0 .6cqw rgba(232,190,110,.24), 0 1cqw 2cqw rgba(0,0,0,.5)}
[data-v="2"] .w-zones .face b{background:#e8be6e}
[data-v="2"] .w-zones .c span{color:rgba(232,190,110,.5)}

[data-v="1"] .w-charge{background:radial-gradient(120% 100% at 50% 8%,#101a26,#050a10)}
[data-v="1"] .w-charge .fg,[data-v="1"] .w-charge .bolt{stroke:#7cc0ff;background:#7cc0ff}
[data-v="1"] .w-charge .bg{stroke:rgba(124,192,255,.12)}
[data-v="2"] .w-charge{background:linear-gradient(#f7f4ec,#e6dfd0)}
[data-v="2"] .w-charge .bg{stroke:rgba(60,48,32,.10)}
[data-v="2"] .w-charge .fg{stroke:#2f7a45;filter:none}
[data-v="2"] .w-charge .bolt{background:#2f7a45}
[data-v="2"] .w-charge .mid b{color:#2b2620}
[data-v="2"] .w-charge .mid span,[data-v="2"] .w-charge .ft{color:rgba(60,48,32,.45)}

[data-v="1"] .w-spend{background:linear-gradient(#faf8f2,#eae4d6)}
[data-v="1"] .w-spend .hd em,[data-v="1"] .w-spend .key,[data-v="1"] .w-spend .ft{color:rgba(40,36,30,.5)}
[data-v="1"] .w-spend .fig b{color:#1f1c18}
[data-v="1"] .w-spend .fig i{color:rgba(40,36,30,.4)}
[data-v="1"] .w-spend .bar::after{background:#1f1c18;box-shadow:none}
[data-v="2"] .w-spend{background:radial-gradient(130% 100% at 22% -6%,#15281c,#050c08 74%)}
[data-v="2"] .w-spend .fig b{color:#c8f0d4}
[data-v="2"] .w-spend .bar::after{background:#c8f0d4}

[data-v="1"] .w-dose{background:#f4f0e4}
[data-v="1"] .w-dose .ic,[data-v="1"] .w-dose .hd .n{background:#e4dcc4;color:#6a5a20}
[data-v="1"] .w-dose .ic::after{background:#6a5a20}
[data-v="1"] .w-dose .pips i.on{background:#6a5a20}
[data-v="2"] .w-dose{background:radial-gradient(130% 100% at 24% -6%,#1a2130,#080b12 76%)}
[data-v="2"] .w-dose .hd b,[data-v="2"] .w-dose .who b{color:#eaf1ff}
[data-v="2"] .w-dose .who span{color:rgba(190,214,255,.45)}
[data-v="2"] .w-dose .ic,[data-v="2"] .w-dose .hd .n{background:rgba(124,192,255,.14);color:#7cc0ff}
[data-v="2"] .w-dose .ic::after{background:#7cc0ff}
[data-v="2"] .w-dose .pips i{background:rgba(190,214,255,.14)}
[data-v="2"] .w-dose .pips i.on{background:#7cc0ff}

[data-v="1"] .w-plants{background:linear-gradient(#eceff1,#d8dee2)}
[data-v="1"] .w-plants .body{background:linear-gradient(#b6bcc0,#8b9296)}
[data-v="1"] .w-plants .cap b{color:#2b3138}
[data-v="2"] .w-plants{background:linear-gradient(#16201a,#0a100c)}
[data-v="2"] .w-plants .leaf{background:#6ec47a}
[data-v="2"] .w-plants .body{background:linear-gradient(#5a4030,#3a281c)}
[data-v="2"] .w-plants .cap b{color:#e6f2e8}
[data-v="2"] .w-plants .cap span{color:rgba(230,242,232,.5)}

[data-v="1"] .w-subs{background:radial-gradient(130% 100% at 24% -6%,#1a1e26,#080a0d 76%)}
[data-v="1"] .w-subs .hd em{color:rgba(200,214,236,.4)}
[data-v="1"] .w-subs .hd b,[data-v="1"] .w-subs .r,[data-v="1"] .w-subs .r b{color:#eef3fb}
[data-v="1"] .w-subs .r span{color:rgba(200,214,236,.55)}
[data-v="2"] .w-subs{background:linear-gradient(#fdfbf2,#eee7d6)}
[data-v="2"] .w-subs .r{font-family:ui-monospace,Menlo,monospace;font-size:4.4cqw}
[data-v="2"] .w-subs .r u{border-radius:0}

[data-v="1"] .w-park{background:#0e1117}
[data-v="1"] .w-park .road{stroke:rgba(190,214,255,.16)}
[data-v="1"] .w-park .blk{fill:rgba(190,214,255,.06)}
[data-v="1"] .w-park .cap b{color:#eaf1ff}
[data-v="1"] .w-park .cap span{color:rgba(190,214,255,.45)}
[data-v="2"] .w-park{background:#f3ead6}
[data-v="2"] .w-park .road{stroke:rgba(120,80,30,.18)}
[data-v="2"] .w-park .pin{background:#c4452f;box-shadow:0 0 0 calc(1.4cqw + var(--ping,0) * 6cqw) rgba(196,69,47,calc(.24 - var(--ping,0) * .22)), 0 .6cqw 1.4cqw rgba(0,0,0,.2)}

/* ⚠ THE OLD GIFTS VARIANT BLOCK IS GONE. It sat AFTER the new one and won on
   source order, and its `color-mix(in srgb, var(--c) …)` referred to a custom
   property that only the deleted `.box` element ever set — so the whole
   declaration was invalid, the eyebrow fell back to inherit, and it measured
   1.03:1 on a near-black tile. The canvas paints the ground now. */

[data-v="1"] .w-parcel{background:linear-gradient(#faf8f3,#e9e4da)}
[data-v="1"] .w-parcel .hd em,[data-v="1"] .w-parcel .ft{color:rgba(40,36,30,.5)}
[data-v="1"] .w-parcel .hd b{color:#1f1c18}
[data-v="1"] .w-parcel .line{background:rgba(40,36,30,.14)}
[data-v="1"] .w-parcel .done,[data-v="1"] .w-parcel .stop.on,[data-v="1"] .w-parcel .van{box-shadow:0 0 0 calc(var(--pulse,.5) * 1.6cqw) rgba(182,240,90,calc(.30 - var(--pulse,.5) * .22));background:#2f7a45}
[data-v="1"] .w-parcel .ft .st{color:#2f7a45}
[data-v="2"] .w-parcel{background:linear-gradient(#2a1608,#120902)}
[data-v="2"] .w-parcel .done,[data-v="2"] .w-parcel .stop.on,[data-v="2"] .w-parcel .van{box-shadow:0 0 0 calc(var(--pulse,.5) * 1.6cqw) rgba(182,240,90,calc(.30 - var(--pulse,.5) * .22));background:#f2a03d}
[data-v="2"] .w-parcel .ft .st{color:#f2a03d}

[data-v="1"] .w-quote{background:radial-gradient(120% 100% at var(--lx,22%) var(--ly,4%),#fbf8f0,#e8e0cd)}
[data-v="1"] .w-quote .t{color:#231f1a}
[data-v="1"] .w-quote .mark,[data-v="1"] .w-quote .ft{color:rgba(35,31,26,.32)}
[data-v="2"] .w-quote{background:radial-gradient(120% 100% at var(--lx,22%) var(--ly,4%),#f0a83c,#8a3a12)}
[data-v="2"] .w-quote .t{color:#2a1206}
[data-v="2"] .w-quote .mark,[data-v="2"] .w-quote .ft{color:rgba(42,18,6,.45)}

/* ── the map ────────────────────────────────────────────────────────────── */
.w-map{background:#cdb693;overflow:hidden}
.w-map .hold{position:absolute;inset:0}
.w-map .cap{position:absolute;left:7cqw;right:7cqw;bottom:6cqw}
.w-map .cap b{display:block;font-family:"Iowan Old Style",Georgia,serif;font-weight:600;font-size:6.9cqw;letter-spacing:-.01em;color:#2a1f10}
.w-map .cap span{display:block;font-family:"Iowan Old Style",Georgia,serif;font-style:italic;font-size:4.4cqw;color:rgba(58,45,28,.66);margin-top:.4cqw}

/* ── the press ──────────────────────────────────────────────────────────── */
.w-verse{background:#e5e3dd;overflow:hidden}
.w-verse .hold{position:absolute;inset:0}

/* ── the cube ───────────────────────────────────────────────────────────── */
.w-cube{background:#efefed;overflow:hidden}
.w-cube .hold{position:absolute;inset:0}
.w-cube .cap{position:absolute;left:7cqw;right:7cqw;bottom:6cqw;display:flex;align-items:baseline;justify-content:space-between}
.w-cube .cap b{font-weight:500;font-size:8.7cqw;letter-spacing:-.03em;color:#1a1a1c;font-variant-numeric:tabular-nums}
.w-cube .cap span{font-size:4.4cqw;letter-spacing:.08em;text-transform:uppercase;color:rgba(30,30,34,.5)}
[data-v="1"] .w-cube .cap b,[data-v="3"] .w-cube .cap b{color:#f4f4f6}
[data-v="1"] .w-cube .cap span,[data-v="3"] .w-cube .cap span{color:rgba(238,238,244,.5)}

/* ── the decks ──────────────────────────────────────────────────────────── */
.w-decks{background:#17181c;overflow:hidden}
.w-decks .hold{position:absolute;inset:0}
.w-decks .cap{position:absolute;left:7cqw;right:7cqw;bottom:6cqw;display:flex;align-items:baseline;gap:2cqw}
.w-decks .cap b{font-weight:500;font-size:8.7cqw;letter-spacing:-.03em;color:#f0f2f6;font-variant-numeric:tabular-nums}
.w-decks .cap span{font-size:4.4cqw;letter-spacing:.06em;text-transform:uppercase;color:rgba(226,232,244,.5)}
[data-v="3"] .w-decks .cap b{color:#1a1a1c}
[data-v="3"] .w-decks .cap span{color:rgba(30,30,34,.5)}

/* ── the catch ──────────────────────────────────────────────────────────── */
.w-land{background:#070a14;overflow:hidden}
.w-land .hold{position:absolute;inset:0}
.w-land .hd{position:absolute;left:7cqw;right:7cqw;top:6cqw;display:flex;align-items:baseline;justify-content:space-between}
.w-land .hd em{font-style:normal;font-weight:500;font-size:6.9cqw;letter-spacing:-.025em;color:#e8eefb;font-variant-numeric:tabular-nums;text-shadow:0 .5cqw 2cqw rgba(2,6,16,.7)}
.w-land .hd b{font-family:ui-monospace,Menlo,monospace;font-weight:400;font-size:5.5cqw;color:#c8d6f0;text-shadow:0 .5cqw 2cqw rgba(2,6,16,.7)}
.w-land .ft{position:absolute;left:7cqw;right:7cqw;bottom:6cqw;display:flex;align-items:center;gap:2.6cqw}
.w-land .ft .bar{flex:1;height:1.9cqw;border-radius:1cqw;background:rgba(200,214,240,.22);overflow:hidden}
.w-land .ft .bar s{display:block;height:100%;background:linear-gradient(90deg,#ffb35c,#ff6a4d);text-decoration:none;border-radius:1cqw}
.w-land .ft span{font-size:4.4cqw;letter-spacing:.1em;text-transform:uppercase;color:rgba(200,214,240,.55)}
[data-v="2"] .w-land .hd em{color:#161c2c;text-shadow:none}
[data-v="2"] .w-land .hd b{color:#2a3348;text-shadow:none}
[data-v="2"] .w-land .ft span{color:rgba(24,30,48,.82)}
[data-v="2"] .w-land .ft .bar{background:rgba(30,38,58,.2)}