/* ═══════════════════════════════════════════════════════════════════════════
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:9%;right:9%;top:14%;bottom:11%;display:flex;border-radius:1cqw;overflow:hidden;
box-shadow:0 1.2cqw 2.6cqw rgba(0,0,0,.42), inset 0 0 0 .3cqw rgba(0,0,0,.30)}
.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;
}
/* ⚠ A PRESSED KEY THAT ONLY SHADES IS TWO PERCENT OF A SMALL BOARD, and the
tile measured 0.04. A real key TRAVELS and the felt under it goes dark —
both, and it reads at 56pt as well as at 240. */
.w-keys .wk.on{
transform:translateY(1.6cqw) scaleY(.985);
background:linear-gradient(#e8e3d2 0%,#d9d3bf 72%,#c8c1aa 100%);
box-shadow:inset -1px 0 0 rgba(60,48,30,.22), inset 0 4cqw 4cqw rgba(70,60,42,.42),
inset 0 -1.4cqw 1.4cqw rgba(120,110,90,.24);
}
.w-keys .bk{
position:absolute;top:0;width:4.6%;height:60%;transition:filter .07s linear,transform .07s linear;
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(2.1);transform:translateX(-50%) translateY(1.2cqw) scaleY(.98)}
/* ── 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-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;
}
/* ⚠ EIGHT PHOTOGRAPHS A DAY, AND EVERY ONE OF THEM WAS THE SAME PICTURE. The
develop cycle runs 5.2s and the counter honestly walks 8 → 1, so over eleven
seconds the widget came back to EXACTLY where it started — measured 0.04 of
change, which is a loop you can see and worse than no motion at all. Each
frame is now its own photograph: a different sky ramp, a sun in a different
place, a different horizon. Nothing else changed; the cycle was always
right, it just had one picture in it. */
.w-film .pic{
--sky1:#2d3f5c; --sky2:#7d6a86; --sky3:#d99a72; --sky4:#f2c79a;
--sunx:26%; --suny:44%; --sunr:16cqw; --sea:36%; --seaa:.42;
position:relative;height:60cqw;border-radius:.4cqw;overflow:hidden;
background:linear-gradient(var(--sky1) 0%,var(--sky2) 42%,var(--sky3) 74%,var(--sky4) 100%);
will-change:opacity,filter;
}
.w-film .pic .sun{
position:absolute;left:var(--sunx);top:var(--suny);width:var(--sunr);height:var(--sunr);
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:var(--sea);
background:linear-gradient(rgba(30,40,60,var(--seaa)),rgba(20,28,44,calc(var(--seaa) + .20)));
}
.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 ─────────────────────────────────────────────────────────────── */
/* ⚠ THREE CHIPS AND ONE WIDGET. `splits` declared Blue / Ember / Track and had
no variant rule anywhere in this file, so all three drew the identical tile —
a chip that changes nothing is worse than no chip, because it reads as a
control that is broken. And the tile measured 0.037 of chroma against a 0.045
floor: a white card, warm-grey bars and two blue ones is a GREY widget with a
spot of colour on it. THE EMPTY PART OF A BAR IS STILL A RUN — a day on the
plan you have not done yet — so it is a pale tint of the same accent rather
than neutral grey, and the whole chart is then one hue instead of one hue
plus a lot of nothing. */
.w-splits{--c:#2f6bff;--ct:rgba(47,107,255,.15);--paper:#f7f5f0;--ink:30,28,24}
.w-splits .dev{background:var(--paper)}
.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 b{color:rgb(var(--ink))}
.w-splits .top span{font-size:5.5cqw;color:rgba(var(--ink),.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:var(--ct);overflow:hidden}
.w-splits .bars s{position:absolute;left:0;right:0;bottom:0;display:block;background:var(--c);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(var(--ink),.52);
}
.w-splits .foot .d{color:rgba(var(--ink),.34)}
/* ⚠ Ember is the same log at dusk; Track is the rubber, at night, where the
only light is the lane markings — so it is the one that flips tone. */
[data-v="1"] .w-splits{--c:#f0562a;--ct:rgba(240,86,42,.17);--paper:#fbf4ec;--ink:44,26,16}
[data-v="2"] .w-splits{--c:#e8603c;--ct:rgba(232,96,60,.22);--paper:#141210;--ink:246,240,232}
/* ── 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-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%, #ffffff, #e9ecf1 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,") 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,");mask-image:url("data:image/svg+xml;utf8,");
-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(18,22,32,.92);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(38,62,124,.88);flex:none;font-variant-numeric:tabular-nums}
/* the caption sits on a photograph of an animal; it needs its own ground */
/* ⚠ the caption's footing follows the stage — a dark scrim under dark type on
a white card is a bruise, so it lifts toward the paper instead */
.w-morpho .dev::after{content:'';position:absolute;left:0;right:0;bottom:0;height:30%;pointer-events:none;
background:linear-gradient(to top,rgba(255,255,255,.97),rgba(255,255,255,.72) 42%,rgba(255,255,255,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,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") 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)}
/* ⚠ A 9cqw AEROPLANE ON A BOARDING PASS IS A DINGBAT. It read as a mark
printed on the rule rather than as the aircraft flying it, and the glyph's
own artwork sits low in its 24-unit box, so centring the BOX left the plane
riding under its own line. Bigger, and lifted by the offset the glyph
carries. */
.w-hop .plane{
position:absolute;top:50%;width:15cqw;height:15cqw;
transform:translate(-50%,calc(-50% - .9cqw + var(--bob,0cqw)));
background:#e8622c;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* ⚠ AND THE TWO AIRPORTS ARE THE POINT OF THE CARD. At 8.7cqw sitting in the
middle of the pass they were smaller than the departure time and had a third
of the tile empty underneath them — the one thing you look at on a boarding
pass, set as a caption. They are anchored to the FOOT and set at the size the
time is. */
.w-hop .ends{position:absolute;left:7cqw;right:7cqw;bottom:8cqw;display:flex;justify-content:space-between;align-items:flex-end}
.w-hop .ends .r{text-align:right}
.w-hop .ends b{display:block;font-weight:500;font-size:13.8cqw;letter-spacing:-.045em;color:#14161a;line-height:.94}
.w-hop .ends em{display:block;font-style:normal;font-size:5.5cqw;color:rgba(20,22,26,.46);margin-top:1cqw}
.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,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") 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)}
/* ⚠ THE NUMBERS ARE THE WIDGET and they were set at caption size with 40% of
the card empty under them. */
.w-subs .hd b{font-weight:500;font-size:11cqw;letter-spacing:-.04em;color:#14161a;font-variant-numeric:tabular-nums}
.w-subs .rows{position:absolute;left:7cqw;right:7cqw;top:31cqw;display:flex;flex-direction:column;gap:3.4cqw}
.w-subs .r{display:flex;align-items:center;gap:3cqw;font-size:6.2cqw;letter-spacing:-.015em;color:#14161a;font-variant-numeric:tabular-nums}
.w-subs .r u{width:5.6cqw;height:5.6cqw;border-radius:1.8cqw;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 .grn{fill:#c2e0a4}
.w-park .wat{fill:none;stroke:#a8d5f2;stroke-width:11;vector-effect:non-scaling-stroke;stroke-linecap:round}
.w-park .rc path{stroke:#e3dfd4;stroke-width:9;vector-effect:non-scaling-stroke;fill:none;stroke-linecap:round}
.w-park .rw path{stroke:#fffdf9;stroke-width:6.4;vector-effect:non-scaling-stroke;fill:none;stroke-linecap:round}
/* ⚠ ONE ROAD YELLOW. Every road the same weight and colour is a grid; one
trunk road in the map-yellow every atlas uses is what says city. */
.w-park .big{stroke:#fbe08d;stroke-width:6.4;vector-effect:non-scaling-stroke;fill:none;stroke-linecap:round}
.w-park .blk{fill:rgba(88,74,52,.09)}
.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}
/* ⚠ A VAN DRIVES ON THE ROAD. The glyph's wheels sit at 0.80 of its box, so
centring the BOX on the line hangs the vehicle above it with its wheels in
mid-air — it reads as sailing rather than driving, and no amount of jog
fixes a constant offset. Lifted by exactly the distance from the box's
middle to the bottom of its wheels. And 8cqw against a 0.8cqw line is a
dot: at 13 it is the thing travelling the route. */
.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:13cqw;height:13cqw;transform:translate(-50%,calc(-80% + 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:5.5cqw}
[data-v="2"] .w-subs .r u{border-radius:0}
[data-v="1"] .w-park{background:#0e1117}
[data-v="1"] .w-park .grn{fill:#1c3324}
[data-v="1"] .w-park .wat{stroke:#16324e}
[data-v="1"] .w-park .rc path{stroke:#1a1f28}
[data-v="1"] .w-park .rw path{stroke:#2b323e}
[data-v="1"] .w-park .big{stroke:#5b4a22}
[data-v="1"] .w-park .blk{fill:rgba(190,214,255,.05)}
[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 .grn{fill:#d9dfb0}
[data-v="2"] .w-park .wat{stroke:#cfd8c4}
[data-v="2"] .w-park .rc path{stroke:#e2d5b6}
[data-v="2"] .w-park .rw path{stroke:#fdf7e8}
[data-v="2"] .w-park .big{stroke:#e9c98a}
[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-size:4.4cqw;letter-spacing:.01em;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)}
/* ═══════════════════════════════════════════════════════════════════════════
THE REFERENCE BANK.
⚠ Every one of these is a known object, so the licence here is to be EXACT.
═══════════════════════════════════════════════════════════════════════════ */
/* ── the week strip ─────────────────────────────────────────────────────── */
.w-strip{overflow:hidden;background:#8fa98b}
/* ⚠ THE REFERENCE IS A BRIGHT MEADOW AT NOON. These photographs are graded
for a reading page, which is half a stop under what a widget ground wants —
and a dark ground under white glass is a different, gloomier widget. */
.w-strip .bgimg{position:absolute;inset:0;background:var(--shot) center/cover no-repeat;
filter:brightness(1.16) saturate(1.12)}
/* ⚠ TWO PANES, ONE SEAM. The reference's days sit on brighter glass than the
stats and the join between them is a hairline, not a gap. */
.w-strip .pane{
position:absolute;left:6cqw;right:6cqw;
backdrop-filter:blur(10px) saturate(1.25);-webkit-backdrop-filter:blur(10px) saturate(1.25);
}
.w-strip .days{
top:26cqw;height:22cqw;display:grid;grid-template-columns:repeat(7,1fr);
background:rgba(255,255,255,.72);border-radius:6cqw 6cqw 2cqw 2cqw;
box-shadow:0 1cqw 3cqw rgba(20,30,20,.20), inset 0 .3cqw 0 rgba(255,255,255,.85);
}
.w-strip .days .d{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8cqw;
border-right:.25cqw solid rgba(30,40,30,.10);
}
.w-strip .days .d:last-child{border-right:0}
.w-strip .days b{font-weight:500;font-size:5.5cqw;color:#2b3330}
.w-strip .days i{font-style:normal;font-size:5.5cqw;color:rgba(43,51,48,.62);
width:7cqw;height:7cqw;display:grid;place-items:center;border-radius:50%}
.w-strip .days .d.on i{background:rgba(30,40,30,.24);color:#1b221f;font-weight:500}
.w-strip .stats{
top:48cqw;height:22cqw;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;
background:rgba(255,255,255,.30);border-radius:2cqw 2cqw 6cqw 6cqw;
box-shadow:0 1.4cqw 3cqw rgba(20,30,20,.18);
}
.w-strip .stats span{display:flex;flex-direction:column;align-items:center;gap:.6cqw;
border-right:.25cqw solid rgba(255,255,255,.30)}
.w-strip .stats span:last-child{border-right:0}
.w-strip .stats b{font-weight:500;font-size:8.7cqw;letter-spacing:-.03em;color:#fff;text-shadow:0 .4cqw 1.6cqw rgba(20,30,20,.4)}
.w-strip .stats em{font-style:normal;font-size:4.4cqw;letter-spacing:.10em;text-transform:uppercase;color:rgba(255,255,255,.88);
display:flex;align-items:center;gap:1cqw;text-shadow:0 .4cqw 1.6cqw rgba(20,30,20,.4)}
.w-strip .dot{width:2.4cqw;height:2.4cqw;border-radius:50%}
.w-strip .dot.g{background:#3ddc6a}.w-strip .dot.r{background:#ff4d3d}
[data-v="1"] .w-strip .bgimg{filter:hue-rotate(-24deg) saturate(1.15) brightness(.86)}
[data-v="2"] .w-strip .bgimg{filter:brightness(.34) saturate(.7)}
[data-v="2"] .w-strip .days{background:rgba(24,26,30,.62)}
[data-v="2"] .w-strip .days b{color:#f2f4f8}
[data-v="2"] .w-strip .days i{color:rgba(238,242,248,.6)}
[data-v="2"] .w-strip .days .d.on i{background:rgba(255,255,255,.26);color:#fff}
/* ── the sun ────────────────────────────────────────────────────────────── */
.w-sun{overflow:hidden;background:#fff}
.w-sun .hold{position:absolute;inset:0}
.w-sun .cap{position:absolute;left:8cqw;right:8cqw;bottom:8cqw}
.w-sun .cap b{display:block;font-weight:500;font-size:15cqw;line-height:.92;letter-spacing:-.045em;color:#16233a}
.w-sun .cap span{display:block;font-weight:500;font-size:6.9cqw;letter-spacing:-.02em;color:#16233a;margin-top:.6cqw}
.w-sun .cap em{display:block;font-style:normal;font-size:4.8cqw;color:rgba(22,35,58,.48);margin-top:.8cqw}
[data-v="1"] .w-sun .cap b,[data-v="1"] .w-sun .cap span,
[data-v="3"] .w-sun .cap b,[data-v="3"] .w-sun .cap span{color:#f4f7fc}
[data-v="1"] .w-sun .cap em,[data-v="3"] .w-sun .cap em{color:rgba(226,234,248,.55)}
/* ── the sunset card ────────────────────────────────────────────────────── */
.w-setgrad{
overflow:hidden;
background:linear-gradient(
calc(160deg + var(--k,.5) * 24deg),
color-mix(in srgb,#7f93c8 calc((1 - var(--k,.5)) * 100%),#8fa2d8) 0%,
#f2c39a 52%, #ff8a3c 78%, #ff6a2c 100%);
}
.w-setgrad .hd{position:absolute;left:8cqw;right:8cqw;top:8cqw;display:flex;justify-content:space-between;align-items:flex-start}
.w-setgrad .hd em{font-style:normal;font-size:4.4cqw;letter-spacing:.14em;text-transform:uppercase;color:#fff;
text-shadow:0 .4cqw 1.8cqw rgba(60,80,140,.55)}
.w-setgrad .dots{display:flex;flex-direction:column;gap:1.6cqw}
.w-setgrad .dots b{width:3cqw;height:3cqw;border-radius:50%}
.w-setgrad .dots b:nth-child(1){background:#ff5a2c}
.w-setgrad .dots b:nth-child(2){background:#ffab34}
.w-setgrad .dots b:nth-child(3){background:#6aa8f2}
.w-setgrad .big{position:absolute;left:8cqw;top:18cqw;display:flex;align-items:baseline;gap:1cqw}
.w-setgrad .big b{font-weight:500;font-size:26cqw;line-height:.86;letter-spacing:-.05em;color:#fff;
text-shadow:0 .5cqw 2.6cqw rgba(150,60,20,.42), 0 0 .8cqw rgba(150,60,20,.28)}
.w-setgrad .big span{font-size:8.7cqw;color:rgba(255,255,255,.88);text-shadow:0 .4cqw 2cqw rgba(150,60,20,.42)}
.w-setgrad .ft{position:absolute;left:8cqw;right:8cqw;bottom:8cqw;display:flex;align-items:flex-end;justify-content:space-between;gap:3cqw}
.w-setgrad .ft em{display:block;font-style:normal;font-size:4.4cqw;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;color:#fff;
text-shadow:0 .4cqw 1.8cqw rgba(150,60,20,.5)}
.w-setgrad .ft b{display:block;font-weight:400;font-size:19cqw;line-height:1;letter-spacing:-.04em;color:#fff;margin-top:1cqw;
text-shadow:0 .5cqw 2.6cqw rgba(150,60,20,.42)}
.w-setgrad .ft b i{font-style:normal;font-size:8.7cqw}
.w-setgrad .burst{width:30cqw;height:17cqw;color:rgba(255,255,255,.95);margin-bottom:2cqw}
[data-v="1"] .w-setgrad{background:linear-gradient(168deg,#4a5570,#8a7f92 54%,#c4694a 80%,#a8452a)}
[data-v="2"] .w-setgrad{background:linear-gradient(160deg,#5aa8e8,#ffd9a0 56%,#ffb14a 80%,#ff8a2c)}
/* ── the sentence ───────────────────────────────────────────────────────── */
/* ⚠ A SENTENCE ON A FLAT GROUND IS A TEXT FILE. The dark variant measured
42% ONE COLOUR — the aurora behind it was drawn at .42/.32/.20 over #04060c,
which resolves to three shades of almost-black, and half the time it had
drifted out of frame anyway. Night is not flat: there is a glow low down
where the city is, and colour in the upper air. Both are here now, and the
drift keeps the aurora INSIDE the tile so it is always part of the picture. */
.w-say{overflow:hidden;background:linear-gradient(150deg,#171a26,#05070e 62%,#0b0a12);display:grid;place-items:center;padding:8cqw;isolation:isolate}
.w-say::before{
content:'';position:absolute;inset:-18%;z-index:-1;
background:
radial-gradient(52% 40% at 26% 22%,rgba(70,140,255,.60),transparent 72%),
radial-gradient(46% 34% at 78% 68%,rgba(196,86,255,.46),transparent 74%),
radial-gradient(34% 26% at 58% 10%,rgba(46,224,196,.30),transparent 76%),
radial-gradient(120% 42% at 50% 118%,rgba(255,176,96,.24),transparent 70%);
animation:sayaurora 7.5s ease-in-out infinite alternate;
}
@keyframes sayaurora{
0%{transform:translate3d(-7%,-5%,0) scale(1.02)}
50%{transform:translate3d(6%,4%,0) scale(1.30)}
100%{transform:translate3d(-3%,7%,0) scale(1.10)}
}
.w-say p{
margin:0;font-weight:500;font-size:12.5cqw;line-height:1.14;letter-spacing:-.035em;text-wrap:balance;
}
/* ⚠ ONE PARAGRAPH, TWO OPACITIES. The facts are opaque, the grammar is not —
set as two COLOURS it is a two-tone caption; set as opacity it reads at a
glance and in full, which is the whole idea. */
.w-say p span{color:#fff;opacity:calc(.30 + var(--in,1) * .70);transition:opacity .18s linear}
.w-say p span.dim{opacity:calc(.10 + var(--in,1) * .34)}
[data-v="1"] .w-say{background:linear-gradient(158deg,#f7a6b4,#f6d089)}
[data-v="2"] .w-say{background:linear-gradient(158deg,#5ec8f5,#7f9ef0)}
[data-v="1"] .w-say p span.dim,[data-v="2"] .w-say p span.dim{opacity:calc(.22 + var(--in,1) * .52)}
/* ⚠ ON A PALE GROUND OPACITY IS NOT ENOUGH. White at 60% over a peach ramp is
1.7:1 — every floating word takes a soft ring as well, which is what a real
setting over a photograph does. */
[data-v="1"] .w-say p span,[data-v="2"] .w-say p span{text-shadow:0 .3cqw 2cqw rgba(120,60,90,.42)}
/* ── the charge cell ────────────────────────────────────────────────────── */
.w-cell{overflow:hidden;background:#0b0d12}
.w-cell .hold{position:absolute;inset:0}
.w-cell .hd{position:absolute;left:9cqw;right:9cqw;top:9cqw}
.w-cell .hd em{display:flex;align-items:center;gap:1.6cqw;font-style:normal;font-size:6.2cqw;letter-spacing:-.02em;color:rgba(255,255,255,.55)}
.w-cell .bolt{width:3.4cqw;height:5.4cqw;background:currentColor;
clip-path:polygon(58% 0,0 58%,38% 58%,30% 100%,100% 40%,56% 40%)}
.w-cell .hd b{display:block;font-weight:400;font-size:8cqw;letter-spacing:-.028em;color:#fff;margin-top:.6cqw}
/* ── the timer ──────────────────────────────────────────────────────────── */
.w-timer{overflow:hidden;background:linear-gradient(#fffdf9,#f2f4f9)}
.w-timer .hold{position:absolute;inset:0}
.w-timer .t{position:absolute;left:0;right:0;top:11cqw;text-align:center;font-weight:400;font-size:17cqw;letter-spacing:-.03em;color:#141822;font-variant-numeric:tabular-nums}
.w-timer .go{
position:absolute;left:50%;bottom:16cqw;transform:translateX(-50%);
width:20cqw;height:20cqw;border-radius:50%;border:0;background:#141822;cursor:pointer;
display:grid;place-items:center;
}
.w-timer .go::before,.w-timer .go::after{content:'';position:absolute;width:1.8cqw;height:7cqw;background:#fff;border-radius:.6cqw}
.w-timer .go::before{transform:translateX(-2cqw)}
.w-timer .go::after{transform:translateX(2cqw)}
[data-v="2"] .w-timer{background:radial-gradient(120% 90% at 30% 0%,#1b2029,#080a0e 72%)}
[data-v="2"] .w-timer .t{color:#eef1f8}
[data-v="2"] .w-timer .go{background:#eef1f8}
[data-v="2"] .w-timer .go::before,[data-v="2"] .w-timer .go::after{background:#0e1116}
/* ── the flight ─────────────────────────────────────────────────────────── */
.w-flight{overflow:hidden;background:linear-gradient(160deg,#eceef1,#e2e5ea)}
.w-flight .line{position:absolute;left:0;right:0;top:34cqw;height:5.6cqw;background:rgba(120,160,235,.34)}
.w-flight .done{position:absolute;left:0;top:0;bottom:0;background:#3d8bfa}
/* ⚠ THE AEROPLANE WAS FLYING SIDEWAYS. The silhouette is drawn nose-UP — which
is right for a route running down a page and wrong for one running across
it — so the aircraft sat broadside to its own line, crabbing along a
horizontal track with its wings fore and aft. The polygon stays (it is a
real plan view of an aircraft); it is turned a quarter to face where it is
going. It is also bigger: 12cqw against a 5.6cqw route line reads as a mark
ON the line rather than as the thing travelling it. */
.w-flight .plane{
position:absolute;top:50%;width:17cqw;height:17cqw;
transform:translate(-50%,-50%) rotate(90deg);
background:#3a3f47;
clip-path:polygon(50% 0,58% 32%,100% 58%,100% 68%,58% 58%,58% 82%,72% 94%,72% 100%,50% 92%,28% 100%,28% 94%,42% 82%,42% 58%,0 68%,0 58%,42% 32%);
filter:drop-shadow(0 1.4cqw 1.6cqw rgba(30,40,60,.34));
}
/* ⚠ and the badge was sitting ON it — a black slab across the tail of the very
thing it is labelling. It stands clear, with its pointer reaching down. */
.w-flight .tip{
position:absolute;top:16cqw;transform:translateX(-50%);
background:#33383f;border-radius:2.6cqw;padding:1.4cqw 3cqw;
}
.w-flight .tip::after{content:'';position:absolute;left:50%;bottom:-1.6cqw;transform:translateX(-50%);
border-left:1.8cqw solid transparent;border-right:1.8cqw solid transparent;border-top:1.8cqw solid #33383f}
.w-flight .tip b{font-weight:500;font-size:4.4cqw;color:#fff}
.w-flight .cap{position:absolute;left:8cqw;right:8cqw;bottom:9cqw}
.w-flight .cap em{display:block;font-style:normal;font-size:6.2cqw;letter-spacing:-.018em;color:rgba(60,72,90,.62)}
.w-flight .cap b{display:block;font-weight:400;font-size:13cqw;letter-spacing:-.035em;color:rgba(60,72,90,.62);margin-top:.6cqw}
.w-flight .cap b span{font-weight:500;font-size:17cqw;color:#2b3542}
[data-v="1"] .w-flight{background:linear-gradient(160deg,#faf6ee,#eee6d6)}
[data-v="1"] .w-flight .done{background:#e0662c}
[data-v="1"] .w-flight .line{background:rgba(224,102,44,.26)}
[data-v="2"] .w-flight{background:linear-gradient(160deg,#161a21,#0b0e13)}
[data-v="2"] .w-flight .cap em,[data-v="2"] .w-flight .cap b{color:rgba(200,214,238,.55)}
[data-v="2"] .w-flight .cap b span{color:#eef2f8}
[data-v="2"] .w-flight .plane{background:#e8ecf4}
/* ── the walk ───────────────────────────────────────────────────────────── */
/* ⚠ NEUMORPHISM IS TWO SHADOWS. Raised = dark down-right AND light up-left;
recessed = the same pair reversed. One shadow is a card with a drop shadow,
which is a completely different, much cheaper look. */
.w-walk{overflow:hidden;background:#eceef0;padding:6cqw;--lo:#c9ccd2;--hi:#ffffff}
.w-walk .card{
position:absolute;inset:6cqw;border-radius:9cqw;background:#f4f5f7;padding:8cqw 8cqw 7cqw;
box-shadow:1.6cqw 1.6cqw 4cqw var(--lo), -1.4cqw -1.4cqw 3.4cqw var(--hi);
}
/* ⚠ A STEP COUNTER IS NOT A TERMINAL. Every figure on this card was set in
ui-monospace — a face whose whole job is making a `1` as wide as a `9` for
code — so "14-day streak" came out spaced like a printout and the big number
like a receipt. The house sans with TABULAR FIGURES gives the one property
that was actually wanted (columns that do not jitter as the count ticks) and
none of the typewriter. */
.w-walk{font-variant-numeric:tabular-nums}
.w-walk em{display:block;font-style:normal;font-size:4.4cqw;color:rgba(40,46,58,.42)}
.w-walk .streak{display:block;font-weight:500;font-size:8.7cqw;letter-spacing:-.03em;color:#171a20;margin-top:.6cqw}
.w-walk .bar{
position:relative;height:8cqw;border-radius:4cqw;margin-top:6cqw;overflow:hidden;
background:#e6e8ec;box-shadow:inset 1cqw 1cqw 2.4cqw var(--lo), inset -.8cqw -.8cqw 2cqw var(--hi);
display:flex;align-items:center;justify-content:flex-end;
}
.w-walk .bar i{
position:absolute;left:0;top:0;bottom:0;border-radius:4cqw;
/* ⚠ a barber stripe, and it TRAVELS — a plain fill is a progress bar */
background:repeating-linear-gradient(115deg,#ff2f52 0 5cqw,#ff5f78 5cqw 10cqw);
background-position:var(--run,0) 0;
}
/* ⚠ A GOAL WRITTEN INSIDE THE TRACK IS OVERWRITTEN BY THE PROGRESS. At 80% the
bar's stripes run under "10,000" and a text-shadow the colour of the empty
track cannot rescue type sitting on a red barber pole. ⚠ AND IT CANNOT
SIMPLY BE MOVED UP EITHER — the track is `overflow:hidden`, which is what
clips the stripe to the rounded shape, so anything positioned outside it is
clipped away entirely and the label disappears. It is a SIBLING of the bar
now, on the streak's own line, where nothing can travel over it. */
.w-walk .goal{
position:absolute;right:6cqw;top:11.2cqw;font-size:4.4cqw;color:rgba(40,46,58,.5);
font-variant-numeric:tabular-nums;
}
.w-walk .big{display:flex;align-items:baseline;gap:2cqw;margin-top:5cqw}
.w-walk .big b{font-weight:500;font-size:21cqw;letter-spacing:-.055em;color:#12151b}
.w-walk .big em{font-size:4.4cqw;color:rgba(40,46,58,.42)}
.w-walk .row{display:grid;grid-template-columns:repeat(3,1fr);margin-top:5cqw}
.w-walk .row span{display:flex;flex-direction:column}
.w-walk .row b{font-weight:500;font-size:8.7cqw;letter-spacing:-.035em;color:#12151b}
.w-walk .row em{font-size:4.4cqw;color:rgba(40,46,58,.42);margin-top:.4cqw}
[data-v="1"] .w-walk{background:#e6efe9;--lo:#c2d2c9;--hi:#ffffff}
[data-v="1"] .w-walk .card{background:#eef5f1}
[data-v="1"] .w-walk .bar i{background:repeating-linear-gradient(115deg,#12a06a 0 5cqw,#3ec48c 5cqw 10cqw)}
[data-v="2"] .w-walk{background:#181b21;--lo:#0d0f13;--hi:#262b34}
[data-v="2"] .w-walk .card{background:#1d2129}
[data-v="2"] .w-walk .bar{background:#171a20}
[data-v="2"] .w-walk .streak,[data-v="2"] .w-walk .big b,[data-v="2"] .w-walk .row b{color:#eef1f6}
[data-v="2"] .w-walk em,[data-v="2"] .w-walk .row em{color:rgba(226,232,244,.45)}
/* ── the studio ─────────────────────────────────────────────────────────── */
.w-studio{overflow:hidden;background:#eae5da;padding:4cqw;--lo:#cbc3b2;--hi:#fffdf4}
.w-studio .panel{
position:absolute;inset:4cqw;border-radius:8cqw;background:#f3eee2;padding:6cqw;
box-shadow:1.6cqw 1.6cqw 4cqw var(--lo), -1.4cqw -1.4cqw 3.4cqw var(--hi);
display:flex;flex-direction:column;gap:3.4cqw;
}
.w-studio .top{display:flex;align-items:baseline;gap:2.4cqw}
.w-studio .top b{font-weight:400;font-size:11cqw;letter-spacing:-.03em;color:#1c1e22}
.w-studio .top em{font-style:normal;font-size:6.9cqw;color:rgba(30,34,40,.55)}
.w-studio .pills{margin-left:auto;display:flex;gap:1.4cqw}
.w-studio .pills span{
width:7cqw;height:7cqw;border-radius:50%;display:grid;place-items:center;font-size:3.5cqw;color:rgba(30,34,40,.5);
box-shadow:inset .5cqw .5cqw 1.2cqw var(--lo), inset -.4cqw -.4cqw 1cqw var(--hi);
}
.w-studio .proj{
display:flex;align-items:center;gap:2cqw;border-radius:6cqw;padding:2.6cqw 2.6cqw 2.6cqw 4cqw;
background:#ebe5d6;box-shadow:inset .8cqw .8cqw 2cqw var(--lo), inset -.7cqw -.7cqw 1.8cqw var(--hi);
}
.w-studio .proj span{flex:1;min-width:0}
.w-studio .proj em{display:block;font-style:normal;font-size:4.4cqw;color:rgba(30,34,40,.5)}
.w-studio .proj b{display:flex;align-items:center;gap:1.6cqw;font-weight:400;font-size:6.9cqw;letter-spacing:-.02em;color:#1c1e22}
.w-studio .proj b i{font-style:normal;font-size:3.5cqw;padding:.6cqw 1.6cqw;border-radius:2cqw;background:#d8dade;color:rgba(30,34,40,.62)}
.w-studio .rb{width:9cqw;height:9cqw;border-radius:50%;flex:none;background:#f2ece0;
box-shadow:.7cqw .7cqw 1.6cqw var(--lo), -.6cqw -.6cqw 1.4cqw var(--hi)}
.w-studio .mid{display:flex;gap:3cqw;flex:1;min-height:0}
.w-studio .face{position:relative;flex:none;width:34cqw;height:34cqw;border-radius:50%;
box-shadow:1.2cqw 1.2cqw 3cqw var(--lo), -1cqw -1cqw 2.6cqw var(--hi)}
.w-studio .art{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.4cqw}
/* the cover is a real object: two chrome domes and their reflection, which is
what the reference's tile actually is */
.w-studio .cov{position:relative;display:block;height:20cqw;border-radius:4cqw;overflow:hidden;
background:
radial-gradient(60% 40% at 30% 26%,#f2f3f5 0%,#8d9096 34%,#26282d 72%),
radial-gradient(52% 34% at 74% 34%,#e6e8ea 0%,#7d8086 36%,#1c1e22 74%),
linear-gradient(#43464c,#0e1013);
box-shadow:.8cqw .8cqw 2cqw var(--lo)}
.w-studio .cov::after{content:'';position:absolute;left:0;right:0;bottom:0;height:44%;
background:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,0));
transform:scaleY(-1)}
/* ⚠ A `path()` CLIP IS IN THE ELEMENT'S OWN PIXELS. Authored in an 8-unit
space it clips to nothing, and a clip that selects nothing paints the
element's own box — which is how a white heart became a black square. Two
circles and a rotated square is the same shape and scales with the tile. */
.w-studio .heart{position:absolute;right:2cqw;top:1.8cqw;width:4.6cqw;height:4.6cqw;
background:
radial-gradient(circle at 30% 32%,#fff 52%,transparent 53%),
radial-gradient(circle at 70% 32%,#fff 52%,transparent 53%),
linear-gradient(#fff,#fff);
background-size:100% 100%,100% 100%,72% 72%;
background-position:0 0,0 0,50% 78%;
background-repeat:no-repeat;
filter:drop-shadow(0 .3cqw .6cqw rgba(0,0,0,.35));
clip-path:polygon(50% 100%,0 42%,0 18%,22% 0,50% 16%,78% 0,100% 18%,100% 42%)}
.w-studio .art em{font-style:normal;font-size:4.4cqw;color:rgba(30,34,40,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ⚠ ONE SHAPE, NOT TWO BUTTONS — two circles with a waist between them, which
is the most memorable thing on the reference panel. */
.w-studio .peanut{
position:relative;margin-top:auto;height:11cqw;width:26cqw;align-self:center;
background:#f2ece0;border-radius:5.5cqw;
box-shadow:.9cqw .9cqw 2.2cqw var(--lo), -.8cqw -.8cqw 2cqw var(--hi);
display:flex;align-items:center;justify-content:space-around;
}
.w-studio .peanut::before{content:'';position:absolute;left:50%;top:50%;width:5cqw;height:5cqw;transform:translate(-50%,-50%);
border-radius:50%;background:#e3e4e6;box-shadow:inset .4cqw .4cqw 1cqw var(--lo)}
.w-studio .peanut b{width:0;height:0;border-top:2.2cqw solid transparent;border-bottom:2.2cqw solid transparent}
.w-studio .peanut .prev{border-right:3.2cqw solid #1c1e22}
.w-studio .peanut .next{border-left:3.2cqw solid #1c1e22}
/* ⚠ Warm was four points of cream away from Soft — the two measured 1.58 of
difference on a 1.6 floor, i.e. the chip technically changed something and
nobody could see it. It is a warm LAMP now, not a warmer paper: the whole
panel sits under a low sun, the type goes brown rather than blue-black, and
the accent moves with it. */
[data-v="1"] .w-studio{background:#e7d4b8;--lo:#c4ab86;--hi:#fff6e2}
[data-v="1"] .w-studio .panel{background:#f6e7cd}
[data-v="1"] .w-studio .proj{background:#efdcbd}
[data-v="1"] .w-studio .top b,[data-v="1"] .w-studio .proj b{color:#3a2a16}
[data-v="1"] .w-studio .top em,[data-v="1"] .w-studio .proj em,[data-v="1"] .w-studio .art em{color:rgba(58,42,22,.62)}
[data-v="1"] .w-studio .pills span{color:rgba(58,42,22,.66)}
[data-v="1"] .w-studio .proj b i{background:#e0c79c;color:rgba(58,42,22,.74)}
[data-v="1"] .w-studio .rb{background:#f9edd6}
[data-v="1"] .w-studio .peanut .prev{border-right-color:#3a2a16}
[data-v="1"] .w-studio .peanut .next{border-left-color:#3a2a16}
[data-v="2"] .w-studio{background:#232529;--lo:#141619;--hi:#31343a}
[data-v="2"] .w-studio .panel{background:#282b31}
[data-v="2"] .w-studio .proj{background:#22252b}
[data-v="2"] .w-studio .pills span{color:rgba(226,232,244,.7)}
[data-v="2"] .w-studio .proj b i{background:#31353d;color:rgba(226,232,244,.72)}
[data-v="2"] .w-studio .top b,[data-v="2"] .w-studio .proj b{color:#eef1f6}
[data-v="2"] .w-studio .top em,[data-v="2"] .w-studio .proj em,[data-v="2"] .w-studio .art em{color:#dfe6f4}
[data-v="2"] .w-studio .peanut .prev{border-right-color:#eef1f6}
[data-v="2"] .w-studio .peanut .next{border-left-color:#eef1f6}
/* the playhead running along the project row, and the light on the case */
.w-studio .proj{position:relative;overflow:hidden}
.w-studio .proj .play{position:absolute;left:var(--play,0%);top:0;bottom:0;width:1cqw;
background:linear-gradient(rgba(30,34,40,0),rgba(30,34,40,.22),rgba(30,34,40,0));pointer-events:none}
.w-studio .panel::after{
content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(112deg,
rgba(255,255,255,0) calc(var(--sheen,46%) - 26%),
rgba(255,255,255,.42) var(--sheen,46%),
rgba(255,255,255,0) calc(var(--sheen,46%) + 26%));
mix-blend-mode:soft-light;
}
/* ── the level ──────────────────────────────────────────────────────────── */
.w-level{overflow:hidden;background:#fff}
.w-level .hold{position:absolute;inset:0}
.w-level .hd{position:absolute;left:7cqw;right:7cqw;top:7cqw}
.w-level .hd b{font-weight:500;font-size:7.4cqw;letter-spacing:-.028em;color:#141c2c}
.w-level .hd i{font-style:normal;float:right;font-size:4.4cqw;color:rgba(20,28,44,.5)}
.w-level .hd em{display:block;font-style:normal;font-size:4.4cqw;color:rgba(20,28,44,.5);margin-top:.4cqw}
[data-v="2"] .w-level .hd b{color:#eef4ff}
[data-v="2"] .w-level .hd i,[data-v="2"] .w-level .hd em{color:rgba(210,226,255,.5)}
/* ── the mood ───────────────────────────────────────────────────────────── */
.w-mood{overflow:hidden;background:#fbeee2}
.w-mood .hold{position:absolute;inset:0}
.w-mood .hd{position:absolute;left:8cqw;right:8cqw;top:8cqw;display:flex;justify-content:space-between;align-items:center}
.w-mood .hd em{font-style:normal;font-size:5.5cqw;letter-spacing:-.018em;color:rgba(120,70,90,.78)}
.w-mood .ic{width:7cqw;height:7cqw;border-radius:50%;border:.55cqw solid rgba(120,70,90,.6)}
.w-mood .ic::after{content:'';display:block;width:2.6cqw;height:2.6cqw;margin:1.4cqw 0 0 1.4cqw;border-radius:50%;
border:.5cqw solid rgba(120,70,90,.6)}
/* ⚠ ONE BIG SOFT SHADOW UNDER WHITE TYPE IS NOT DEPTH, IT IS BLUR. A single
2.4cqw shadow at .28 spreads a grey haze the shape of the word and the
letterforms lose their edge — the type reads as slightly out of focus on a
card that is otherwise sharp. Two shadows: a TIGHT one that draws the edge
and holds it against the gradient, and a wide faint one that sits the block
off the paper. Same idea as any real drop shadow — contact plus ambient. */
.w-mood .q{
position:absolute;left:8cqw;right:11cqw;top:25cqw;
font-weight:500;font-size:12.5cqw;line-height:1.04;letter-spacing:-.042em;
color:#fff;text-wrap:balance;
text-shadow:0 .18cqw .5cqw rgba(122,58,84,.34), 0 1.4cqw 4.2cqw rgba(122,58,84,.16);
}
/* ⚠ AND A LABEL IS NOT A HEADLINE. `State of Mind` was set at the same weight
and nearly the same size as the copy under it; a small tracked cap line puts
it where a section label belongs and gives the headline the whole card. */
.w-mood .hd em{
font-size:4.4cqw;font-weight:500;letter-spacing:.085em;text-transform:uppercase;
}
.w-mood .log{
position:absolute;left:8cqw;right:8cqw;bottom:8cqw;height:15cqw;border:0;cursor:pointer;
border-radius:7.5cqw;
/* ⚠ THE ONE CONTROL ON THE CARD WAS THE LEAST READABLE THING ON IT. White at
34% over a pale gradient is a pale pill with pale type in it, and a blurred
text-shadow does not buy contrast, it buys fog. The glass is brighter, it
carries a real rim, and the ink is the card's OWN deep plum rather than
white — which is both legible and what the surface is actually doing. */
background:rgba(255,255,255,.62);
backdrop-filter:blur(10px) saturate(1.35);-webkit-backdrop-filter:blur(10px) saturate(1.35);
box-shadow:
inset 0 .35cqw 0 rgba(255,255,255,.92),
inset 0 0 0 .28cqw rgba(255,255,255,.5),
0 .5cqw 1.2cqw rgba(122,58,84,.14),
0 2.2cqw 5cqw rgba(122,58,84,.13);
font:inherit;font-size:6.4cqw;font-weight:500;letter-spacing:-.014em;color:#6b2f4c;
transition:transform .3s var(--spring), box-shadow .3s var(--ease);
}
.w-mood .log:active{transform:scale(.985);box-shadow:inset 0 .35cqw 0 rgba(255,255,255,.8), 0 .3cqw .7cqw rgba(122,58,84,.16)}
[data-v="2"] .w-mood .hd em{color:rgba(230,220,250,.75)}
[data-v="2"] .w-mood .q{text-shadow:0 .18cqw .5cqw rgba(10,6,26,.5), 0 1.4cqw 4.2cqw rgba(10,6,26,.3)}
[data-v="2"] .w-mood .log{background:rgba(255,255,255,.16);color:#f2ecff;
box-shadow:inset 0 .35cqw 0 rgba(255,255,255,.30), inset 0 0 0 .28cqw rgba(255,255,255,.16),
0 .5cqw 1.2cqw rgba(6,4,18,.34), 0 2.2cqw 5cqw rgba(6,4,18,.28)}
[data-v="2"] .w-mood .ic{border-color:rgba(230,220,250,.6)}
[data-v="2"] .w-mood .ic::after{border-color:rgba(230,220,250,.6)}
/* ── the cloud card ─────────────────────────────────────────────────────── */
.w-cloudy{overflow:hidden;background:#9a7fe0}
.w-cloudy .hold{position:absolute;inset:0}
.w-cloudy .hd{position:absolute;left:8cqw;right:8cqw;top:8cqw}
.w-cloudy .hd em{display:flex;align-items:center;gap:1.6cqw;font-style:normal;font-size:5.5cqw;letter-spacing:-.02em;color:#fff;text-shadow:0 .4cqw 1.8cqw rgba(60,40,80,.6)}
.w-cloudy .arrow{width:4cqw;height:4cqw;background:#fff;clip-path:polygon(100% 0,0 42%,42% 52%,54% 100%)}
.w-cloudy .hd b{display:block;font-weight:400;font-size:24cqw;line-height:1;letter-spacing:-.045em;color:#fff;margin-top:.4cqw;text-shadow:0 .5cqw 2.6cqw rgba(60,40,80,.5)}
.w-cloudy .ft{position:absolute;left:8cqw;bottom:8cqw}
.w-cloudy .ft em{display:block;font-style:normal;font-size:6.9cqw;letter-spacing:-.02em;color:#fff;text-shadow:0 .4cqw 1.8cqw rgba(60,40,80,.6)}
.w-cloudy .ft span{display:block;font-size:5.5cqw;color:#fff;margin-top:.4cqw;text-shadow:0 .4cqw 1.8cqw rgba(60,40,80,.6)}
/* ── the map pin ────────────────────────────────────────────────────────── */
.w-pin{overflow:hidden;background:#eef1ea}
.w-pin .map{position:absolute;inset:-6%;background:var(--shot) center/cover no-repeat;will-change:transform}
.w-pin .acc{position:absolute;left:50%;top:47%;width:34cqw;height:34cqw;border-radius:50%;
background:radial-gradient(circle,#2f7bff 0%,rgba(47,123,255,0) 68%);transform:translate(-50%,-50%)}
.w-pin .dot{position:absolute;left:50%;top:47%;width:7cqw;height:7cqw;border-radius:50%;
transform:translate(-50%,-50%);background:#2f7bff;border:1.6cqw solid #fff;
box-shadow:0 .8cqw 2.4cqw rgba(20,40,90,.34)}
.w-pin .lab{
position:absolute;left:5cqw;bottom:5cqw;padding:1.4cqw 3cqw;border-radius:2.4cqw;
background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
font-size:4.8cqw;font-weight:500;letter-spacing:-.012em;color:#1b2230;
box-shadow:0 .8cqw 2.4cqw rgba(20,30,50,.16);
}
[data-v="1"] .w-pin .map{filter:hue-rotate(14deg) saturate(1.1)}
[data-v="2"] .w-pin .map{filter:invert(.90) hue-rotate(180deg) saturate(.62) brightness(.94)}
[data-v="2"] .w-pin .lab{background:rgba(24,26,32,.88);color:#eef1f8}
/* ── the tumble clock ───────────────────────────────────────────────────── */
.w-tumble{overflow:hidden;background:#efe9dd}
.w-tumble .hold{position:absolute;inset:0}
/* ═══════════════════════════════════════════════════════════════════════════
THE REAL ARTWORK — see js/real.js. Everything here is either an app's own
shipped asset or a photograph of that app running.
═══════════════════════════════════════════════════════════════════════════ */
/* ── a real app, alive ──────────────────────────────────────────────────── */
.w-live{overflow:hidden;background:#111318;isolation:isolate}
/* ⚠ A KEN BURNS ON TOP OF A CROP IS TWO ZOOMS. The harvest already framed
the thing; -8% inset plus a 1.10 scale is another quarter on top and it
cuts the subject. Enough overhang to drift in, and no more. */
.w-live .shot{
position:absolute;inset:-4%;background:var(--shot) center/cover no-repeat;
will-change:transform;
}
/* ⚠ AND A LIGHT ACROSS IT. A crop that only drifts is a slideshow of one
frame; the travelling specular is what says something is being looked at. */
.w-live .lamp{
position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;
background:linear-gradient(104deg,
rgba(255,255,255,0) calc(var(--lamp,46%) - 28%),
rgba(255,255,255,.34) var(--lamp,46%),
rgba(255,255,255,0) calc(var(--lamp,46%) + 28%));
}
.w-live .cap{position:absolute;left:7cqw;right:7cqw;bottom:6cqw}
.w-live .cap b{display:block;font-weight:500;font-size:6.9cqw;letter-spacing:-.022em;color:#f4f6fa;text-shadow:0 .5cqw 2cqw rgba(6,8,14,.7)}
.w-live .cap span{display:block;font-size:4.4cqw;color:rgba(226,234,248,.66);text-shadow:0 .4cqw 1.6cqw rgba(6,8,14,.7)}
/* the light ones want a paper ground rather than a black one behind the crop */
/* ⚠ a sheet of paper is warm — a note on a neutral grey measures as no
colour at all, which is exactly what paper is not. */
.w-live-verse,.w-live-jot{background:#f4eee0}
.w-live-city,.w-live-pit,.w-live-powder{background:#eef0f2}
.w-live-jot .shot{filter:sepia(.22) saturate(1.5) contrast(1.02)}
.w-live-verse .shot{filter:sepia(.16) saturate(1.35)}
.w-live-cube,.w-live-clock{background:#efefed}
/* ── structure ──────────────────────────────────────────────────────────── */
.w-morpho{background:#f4f6f9;overflow:hidden}
.w-morpho .hold{position:absolute;inset:0}
.w-morpho .cap{position:absolute;left:8cqw;right:8cqw;bottom:6cqw;display:flex;gap:3cqw;justify-content:space-between;align-items:baseline}
.w-morpho .cap b{font-weight:500;font-size:5.5cqw;color:rgba(18,22,32,.92);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(38,62,124,.88);flex:none;font-variant-numeric:tabular-nums}
/* ── the bird log ───────────────────────────────────────────────────────── */
.w-bird{overflow:hidden;background:#efe7d6}
/* ⚠ A PLATE'S OWN MARGIN IS NOT THE WIDGET'S MARGIN. Every one of flock's
lithographs is a bird on a cream sheet with pale paper round the outside, so
`cover` on the whole file leaves a bleached band along the top and down the
sides — which at tile size reads as a badly placed picture rather than as a
sheet of paper. Scaled past the margin the bird gets the tile. */
.w-bird .pl{position:absolute;left:0;right:0;top:0;bottom:26cqw;background:var(--shot) center/126% no-repeat}
/* the lamp travelling over the sheet — a plate is paper and paper is lit */
.w-bird .pl::after{
content:'';position:absolute;inset:0;mix-blend-mode:soft-light;
background:linear-gradient(100deg,
rgba(255,248,232,0) calc(var(--lamp,48%) - 26%),
rgba(255,250,236,.42) var(--lamp,48%),
rgba(255,248,232,0) calc(var(--lamp,48%) + 26%));
}
.w-bird .cap{position:absolute;left:8cqw;right:8cqw;bottom:6cqw}
.w-bird .cap b{display:block;font-weight:500;font-size:6.9cqw;letter-spacing:-.022em;color:#2b2317}
.w-bird .cap em{display:block;font-size:4.4cqw;letter-spacing:.01em;color:rgba(60,48,30,.62);margin-top:.2cqw}
.w-bird .cap span{position:absolute;right:0;bottom:.6cqw;font-size:4.4cqw;letter-spacing:.08em;text-transform:uppercase;color:rgba(60,48,30,.5)}
/* ── postage ────────────────────────────────────────────────────────────── */
/* ⚠ A FAN OF REAL STAMPS. Every one is a `postage` issue, perforated by that
app, and the whole set is placed off ONE continuous position so the stamp
falling off the end is already the one arriving at the other. */
.w-stamp{overflow:hidden;background:linear-gradient(150deg,#e8dfc9,#d4c8ae)}
.w-stamp .st{
position:absolute;left:50%;top:44%;width:44cqw;aspect-ratio:100/130;
background:var(--shot) center/cover no-repeat;
transform:translate(-50%,-50%) translateX(var(--x,0)) rotate(var(--rot,0deg)) scale(var(--k,1));
z-index:var(--z,10);opacity:var(--o,1);
filter:drop-shadow(0 1.4cqw 2.4cqw rgba(60,46,22,.34));
border-radius:.6cqw;
}
.w-stamp .cap{position:absolute;left:8cqw;bottom:6cqw;z-index:30}
.w-stamp .cap b{display:block;font-weight:500;font-size:6.9cqw;letter-spacing:-.02em;color:#3a2f18}
.w-stamp .cap em{display:block;font-style:normal;font-size:4.4cqw;letter-spacing:.1em;text-transform:uppercase;color:rgba(70,56,28,.55)}
[data-v="2"] .w-stamp{background:linear-gradient(150deg,#22201b,#0e0d0b)}
[data-v="2"] .w-stamp .cap b{color:#f2eee2}
[data-v="2"] .w-stamp .cap em{color:rgba(240,234,220,.5)}
/* ═══════════════════════════════════════════════════════════════════════════
THE MONEY BANK — see js/money.js. Each one answers ONE question with ONE
number, because a home screen is not where anybody analyses anything.
═══════════════════════════════════════════════════════════════════════════ */
.w-runway{overflow:hidden;background:#101319}
.w-runway .hold{position:absolute;inset:0}
.w-runway .hd{position:absolute;left:8cqw;right:8cqw;top:8cqw}
.w-runway .hd em{display:block;font-style:normal;font-size:4.4cqw;letter-spacing:.12em;text-transform:uppercase;color:rgba(200,214,238,.55)}
.w-runway .hd b{display:block;font-weight:500;font-size:13.8cqw;letter-spacing:-.04em;color:#f2f5fa;margin-top:.6cqw}
.w-runway .ft{position:absolute;left:8cqw;right:8cqw;bottom:7cqw;display:flex;gap:8cqw}
.w-runway .ft b{display:block;font-weight:500;font-size:8.7cqw;letter-spacing:-.03em;color:#f2f5fa}
.w-runway .ft em{display:block;font-style:normal;font-size:4.4cqw;color:rgba(200,214,238,.5)}
[data-v="1"] .w-runway{background:#faf7ef}
[data-v="1"] .w-runway .hd b,[data-v="1"] .w-runway .ft b{color:#2b2418}
[data-v="1"] .w-runway .hd em,[data-v="1"] .w-runway .ft em{color:rgba(60,50,32,.55)}
.w-pot{overflow:hidden;background:#f6f8fb}
.w-pot .hold{position:absolute;inset:0}
.w-pot .hd{position:absolute;left:8cqw;right:8cqw;top:7cqw}
.w-pot .hd em{display:block;font-style:normal;font-size:4.4cqw;letter-spacing:.1em;text-transform:uppercase;color:rgba(22,35,58,.5)}
.w-pot .hd b{display:block;font-weight:500;font-size:12cqw;letter-spacing:-.04em;color:#16233a;margin-top:.4cqw}
.w-pot .ft{position:absolute;left:8cqw;bottom:7cqw;font-size:5.5cqw;color:rgba(22,35,58,.5)}
[data-v="1"] .w-pot{background:#faf3e9}
[data-v="1"] .w-pot .hd b{color:#2b2317}
[data-v="2"] .w-pot{background:#12141a}
[data-v="2"] .w-pot .hd b{color:#eef2f8}
[data-v="2"] .w-pot .hd em,[data-v="2"] .w-pot .ft{color:rgba(210,226,255,.5)}
/* ⚠ ONE NUMBER AND A COUNT OF SLEEPS, and the sleeps are MARKS rather than a
number so you can count them without reading. */
.w-payday{overflow:hidden;background:radial-gradient(120% 100% at 26% 0%,#1b1f28,#080a0f);padding:8cqw}
.w-payday em{display:block;font-style:normal;font-size:4.4cqw;letter-spacing:.14em;text-transform:uppercase;color:rgba(200,214,238,.5)}
.w-payday b{display:block;font-weight:500;font-size:38cqw;line-height:.86;letter-spacing:-.06em;color:#f2f5fa;margin-top:1cqw}
.w-payday i{display:block;font-style:normal;font-size:6.9cqw;letter-spacing:-.02em;color:rgba(200,214,238,.62);margin-top:-1cqw}
.w-payday .marks{position:absolute;left:8cqw;right:8cqw;bottom:19cqw;display:flex;gap:1.4cqw}
.w-payday .marks i{flex:1;height:3.4cqw;border-radius:1.7cqw;background:rgba(200,214,238,.16);
transition:background .3s ease calc(var(--i) * .02s)}
.w-payday .marks i.on{background:#3ddc84}
.w-payday .left{position:absolute;left:8cqw;bottom:8cqw;font-size:5.5cqw;color:rgba(200,214,238,.55)}
.w-payday .left b{display:inline;font-size:5.5cqw;color:#f2f5fa}
[data-v="1"] .w-payday{background:radial-gradient(120% 100% at 26% 0%,#fdfaf2,#eee6d4)}
[data-v="1"] .w-payday b,[data-v="1"] .w-payday .left b{color:#2b2418}
[data-v="1"] .w-payday em,[data-v="1"] .w-payday i,[data-v="1"] .w-payday .left{color:rgba(60,50,32,.55)}
[data-v="1"] .w-payday .marks i{background:rgba(60,50,32,.14)}
[data-v="1"] .w-payday .marks i.on{background:#2f8a52}
[data-v="2"] .w-payday .marks i.on{background:#7ef0a8}
.w-orders{overflow:hidden;background:#faf7f0}
.w-orders .hold{position:absolute;inset:0}
.w-orders .hd{position:absolute;left:8cqw;right:8cqw;top:8cqw}
.w-orders .hd em{display:block;font-style:normal;font-size:4.4cqw;letter-spacing:.12em;text-transform:uppercase;color:rgba(58,50,38,.5)}
.w-orders .hd b{display:block;font-weight:500;font-size:10cqw;letter-spacing:-.035em;color:#2b2418;margin-top:.6cqw}
.w-orders .hd span{display:block;font-size:5.5cqw;color:rgba(58,50,38,.55);margin-top:.4cqw}
[data-v="1"] .w-orders{background:#f2f6fa}
[data-v="1"] .w-orders .hd b{color:#16223a}
[data-v="2"] .w-orders{background:#101319}
[data-v="2"] .w-orders .hd b{color:#eef2f8}
[data-v="2"] .w-orders .hd em,[data-v="2"] .w-orders .hd span{color:rgba(200,214,238,.55)}
.w-split{overflow:hidden;background:#faf8f2}
.w-split .hold{position:absolute;inset:0}
.w-split .hd{position:absolute;left:8cqw;right:8cqw;top:8cqw}
.w-split .hd em{display:block;font-style:normal;font-size:5.5cqw;letter-spacing:-.018em;color:rgba(58,50,38,.62)}
.w-split .hd b{display:block;font-weight:500;font-size:15cqw;letter-spacing:-.045em;color:#2b2418;margin-top:.2cqw}
[data-v="1"] .w-split{background:#f2f6fa}
[data-v="1"] .w-split .hd b{color:#16223a}
[data-v="2"] .w-split{background:#0f1218}
[data-v="2"] .w-split .hd b{color:#eef2f8}
[data-v="2"] .w-split .hd em{color:rgba(200,214,238,.6)}
/* ── the variants that were doing nothing ─────────────────────────────────────
⚠ FIFTEEN WIDGETS SHIPPED CHIPS WITH NO RULE BEHIND THEM. `splits` was the
first one caught by eye; `tools/vars.mjs` — the one lens that compares a
widget WITH ITSELF, since every other lens looks at one variant at a time
and each of those was individually fine — found fourteen more. A chip that
changes nothing is worse than no chip: it does not read as a missing
feature, it reads as a control that is broken.
Every name below was already written and every one of them describes a real
thing. None of these is a hue rotation: Ebony is a different instrument,
Frost is a different month, Storm is different weather, Slide is a different
film format. */
/* today — the paper it is written on */
[data-v="1"] .w-today .dev{
background:
repeating-linear-gradient(#0000 0 calc(12.5cqw - 1px), rgba(52,86,190,.30) calc(12.5cqw - 1px) 12.5cqw),
linear-gradient(#fffefa,#f3f0e6);
}
[data-v="1"] .w-today .box{border-radius:50%;box-shadow:inset 0 0 0 1.4px rgba(52,86,190,.5)}
/* ⚠ A RULED SHEET IS BLUE PAPER, and at .13 the rules were grey enough that
the tile measured 0.037 of chroma — a monochrome widget with a blue tick on
it. The rules carry the colour; the margin rule is the red one every ruled
pad has, and it is what makes the sheet read as a pad rather than as lines. */
[data-v="1"] .w-today .dev::before{
content:'';position:absolute;left:11%;top:0;bottom:0;width:1.4px;background:rgba(200,60,70,.42);
}
[data-v="2"] .w-today .dev{
background:
repeating-linear-gradient(#0000 0 5.4cqw, rgba(44,124,86,.30) 5.4cqw calc(5.4cqw + 1px)),
repeating-linear-gradient(90deg,#0000 0 5.4cqw, rgba(44,124,86,.30) 5.4cqw calc(5.4cqw + 1px)),
linear-gradient(#fdfefb,#eef2ea);
}
[data-v="2"] .w-today li.on .box{background:#2f8f5b;box-shadow:inset 0 0 0 1.4px #2f8f5b}
[data-v="2"] .w-today .box{border-radius:0;box-shadow:inset 0 0 0 1.4px rgba(44,124,86,.55)}
/* place — the weather it was taken in, and the light that goes with it */
[data-v="1"] .w-place img{filter:saturate(.72) brightness(.62) hue-rotate(-12deg) contrast(1.06)}
[data-v="1"] .w-place .scrim{
background:linear-gradient(to bottom,rgba(30,14,40,.30) 0%,rgba(60,26,40,.06) 26%,rgba(14,8,20,.62) 76%,rgba(8,4,14,.82) 100%);
}
[data-v="1"] .w-place .mist{background:linear-gradient(90deg,rgba(255,170,110,0),rgba(255,170,110,.24) 42%,rgba(255,140,90,0))}
[data-v="2"] .w-place img{filter:saturate(.44) brightness(.78) contrast(.92)}
[data-v="2"] .w-place .scrim{
background:
repeating-linear-gradient(72deg, rgba(210,225,240,.16) 0 1px, rgba(0,0,0,0) 1px 7px),
linear-gradient(to bottom,rgba(30,38,48,.34) 0%,rgba(30,38,48,.06) 32%,rgba(12,16,22,.6) 80%,rgba(8,10,14,.76) 100%);
}
[data-v="2"] .w-place .mist{opacity:.3}
/* keys — a different instrument, not a tinted one */
[data-v="1"] .w-keys .dev{background:linear-gradient(#2c2c2e,#0e0e10)}
[data-v="1"] .w-keys .wk{
background:linear-gradient(#3a3a3e 0%,#26262a 72%,#161618 100%);
box-shadow:inset -1px 0 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14),
inset 0 -1.4cqw 1.4cqw rgba(0,0,0,.34);
}
[data-v="1"] .w-keys .wk.on{background:linear-gradient(#585860 0%,#43434a 72%,#33333a 100%)}
[data-v="1"] .w-keys .bk{background:linear-gradient(#f2efe6,#cfcabb)}
[data-v="2"] .w-keys .dev{background:linear-gradient(#f04f6a,#c02348)}
[data-v="2"] .w-keys .board{border-radius:4cqw}
[data-v="2"] .w-keys .wk{
background:linear-gradient(#fffdf4 0%,#fdf3d2 74%,#f5e2a8 100%);
box-shadow:inset -1.4px 0 0 rgba(190,120,40,.28), inset 0 1px 0 #fff,
inset 0 -1.4cqw 1.4cqw rgba(200,150,60,.22);
}
[data-v="2"] .w-keys .wk.on{background:linear-gradient(#ffe98a 0%,#ffd84f 72%,#f7c22a 100%)}
[data-v="2"] .w-keys .bk{background:linear-gradient(#2b6df0,#1642a8);border-radius:0 0 1.6cqw 1.6cqw}
/* week — the ink the squares are printed in */
[data-v="1"] .w-week{background:linear-gradient(#fffaf4,#f6efe6)}
[data-v="1"] .w-week .grid i{background:rgba(232,96,42,var(--a,0))}
[data-v="2"] .w-week{background:linear-gradient(#14161a,#0b0d11)}
[data-v="2"] .w-week .days span{color:rgba(238,242,248,.44)}
[data-v="2"] .w-week .grid i{
background:rgba(238,242,248,var(--a,0));
box-shadow:inset 0 0 0 1px rgba(238,242,248,.09);
}
/* burst — the room the reactions are flying through */
[data-v="1"] .w-burst .dev{background:radial-gradient(120% 92% at 50% 112%, #16304a 0%, #060b14 74%)}
[data-v="2"] .w-burst .dev{background:linear-gradient(#fbf8f1,#efe9dc)}
[data-v="2"] .w-burst .sky span{filter:drop-shadow(0 .8cqw 1.2cqw rgba(60,50,34,.28))}
/* covers — the shelf's own light. Studio is a white cyc; Paper is a printed
sleeve catalogue, so the gloss comes off and the cards get an ink hairline */
[data-v="1"] .w-covers .dev{background:radial-gradient(120% 96% at 50% 0%, #f7f6f3, #dedcd6 76%)}
[data-v="1"] .w-covers .stage i{box-shadow:0 1.8cqw 3.2cqw rgba(40,36,30,.28), inset 0 0 0 .35cqw rgba(0,0,0,.10)}
[data-v="1"] .w-covers .cap b{color:#1b1a18}
[data-v="1"] .w-covers .cap span{color:rgba(27,26,24,.5)}
[data-v="2"] .w-covers .dev{background:linear-gradient(#f4efe3,#e6dece)}
[data-v="2"] .w-covers .stage i{border-radius:0;box-shadow:0 .9cqw 1.6cqw rgba(50,42,28,.22), inset 0 0 0 .3cqw rgba(40,32,20,.5)}
[data-v="2"] .w-covers .stage u{opacity:.16}
[data-v="2"] .w-covers .cap b{color:#2b2418}
[data-v="2"] .w-covers .cap span{color:rgba(43,36,24,.5)}
/* film — a different FORMAT, not a tinted polaroid: a contact sheet is a
black card with a white grease-pencil border, a slide is a mounted 35mm */
[data-v="1"] .w-film{background:linear-gradient(#232323,#141414)}
[data-v="1"] .w-film .pile{background:#2c2c2c;box-shadow:0 .6cqw 1.6cqw rgba(0,0,0,.5)}
[data-v="1"] .w-film .print{background:#1b1b1b;box-shadow:0 1cqw 2.6cqw rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.16)}
[data-v="1"] .w-film .pic{border-radius:0}
[data-v="1"] .w-film .foot span{color:rgba(255,255,255,.5)}
[data-v="1"] .w-film .count{color:rgba(255,255,255,.42)}
[data-v="1"] .w-film .count b{color:rgba(255,255,255,.82)}
[data-v="2"] .w-film{background:linear-gradient(#c9c6bd,#a8a49a)}
[data-v="2"] .w-film .pile{background:#f2f0ea;border-radius:.6cqw}
[data-v="2"] .w-film .print{
padding:5.4cqw 5.4cqw 0;border-radius:.8cqw;
background:linear-gradient(#fbfaf6,#e8e5dc);
box-shadow:0 1cqw 2.6cqw rgba(30,28,22,.34), inset 0 0 0 1px rgba(90,84,70,.3);
}
[data-v="2"] .w-film .pic{border-radius:0;box-shadow:inset 0 0 0 1.4px rgba(20,18,14,.55)}
[data-v="2"] .w-film .foot{padding:2.6cqw 0 3cqw;text-align:center}
[data-v="2"] .w-film .foot span{color:rgba(40,34,24,.6)}
/* grav — the material the beads are cut from */
[data-v="1"] .w-grav .matrix i{
background:radial-gradient(circle at 34% 28%, #ffe9a8, #c9932f 58%, #6a4c14);
box-shadow:0 .5cqw .9cqw rgba(0,0,0,.55);
}
[data-v="2"] .w-grav .dev{background:radial-gradient(120% 96% at 50% 0%, #f4f3ef, #d9d7d0 78%)}
/* ⚠ AND INK IS NOT GREY. Graphite beads on white paper measured 0.037 of
chroma — the whole tile one hue's worth of nothing — so the ink is a real
ink: a deep blue-black bead on a paper that is faintly blue, the way an
inkwell and its blotter actually look. */
[data-v="2"] .w-grav .dev{background:radial-gradient(120% 96% at 50% 0%, #eef1f8, #cfd6e6 78%)}
[data-v="2"] .w-grav .matrix i{
background:radial-gradient(circle at 34% 28%, #4d5a86, #17203e 64%, #070b1a);
box-shadow:0 .5cqw .9cqw rgba(30,42,80,.30);
}
/* kino — what the stamp is stamped on */
[data-v="1"] .w-kino .dev{background:linear-gradient(#2a2118,#120d08)}
[data-v="1"] .w-kino .page{
border-radius:.4cqw;background:linear-gradient(#fdf6e4,#f0e4c6);
box-shadow:0 1.4cqw 3cqw rgba(0,0,0,.5), inset 0 0 0 1px rgba(150,120,60,.3);
}
[data-v="2"] .w-kino .dev{background:linear-gradient(#3a1220,#170610)}
[data-v="2"] .w-kino .page{
border-radius:0;background:linear-gradient(#f7ede0,#e4cfae);
box-shadow:0 1.8cqw 3.6cqw rgba(0,0,0,.6), inset 0 0 0 2.4px rgba(58,18,32,.65);
}
/* mow — the month. Spring is new growth, Frost is a hard morning */
[data-v="1"] .w-mow .lawn i[data-d="0"],[data-v="1"] .w-mow .lawn i s[data-d="0"]{background:
repeating-linear-gradient(90deg, rgba(255,255,255,.13) 0 .5cqw, transparent .5cqw 1.5cqw),
linear-gradient(#b6cf74,#a2c161)}
[data-v="1"] .w-mow .lawn i[data-d="1"],[data-v="1"] .w-mow .lawn i s[data-d="1"]{background:
repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 .5cqw, transparent .5cqw 1.5cqw),
linear-gradient(#5c8a33,#4d772b)}
[data-v="2"] .w-mow .lawn i[data-d="0"],[data-v="2"] .w-mow .lawn i s[data-d="0"]{background:
repeating-linear-gradient(90deg, rgba(255,255,255,.30) 0 .5cqw, transparent .5cqw 1.5cqw),
linear-gradient(#cfdcd4,#bccdc4)}
[data-v="2"] .w-mow .lawn i[data-d="1"],[data-v="2"] .w-mow .lawn i s[data-d="1"]{background:
repeating-linear-gradient(90deg, rgba(0,0,0,.09) 0 .5cqw, transparent .5cqw 1.5cqw),
linear-gradient(#6f8c81,#5d7a70)}
/* payday — the paper the number is printed on */
[data-v="1"] .w-payday{background:radial-gradient(120% 100% at 26% 0%,#fbf7ef,#ece5d6)}
[data-v="1"] .w-payday em{color:rgba(40,34,24,.5)}
[data-v="1"] .w-payday b{color:#191510}
[data-v="1"] .w-payday i{color:rgba(40,34,24,.6)}
[data-v="1"] .w-payday .marks i{background:rgba(40,34,24,.14)}
[data-v="1"] .w-payday .marks i.on{background:#1f9a5b}
[data-v="1"] .w-payday .left{color:rgba(40,34,24,.55)}
[data-v="1"] .w-payday .left b{color:#191510}
[data-v="2"] .w-payday{background:radial-gradient(120% 100% at 26% 0%,#0d2b1d,#04120b)}
[data-v="2"] .w-payday b{color:#c9ffdf}
[data-v="2"] .w-payday .marks i{background:rgba(120,255,190,.16)}
[data-v="2"] .w-payday .marks i.on{background:#3ddc84}
[data-v="2"] .w-payday .left b{color:#c9ffdf}
/* record — brass is a lacquer master, marble is a picture disc */
[data-v="1"] .w-record{background:linear-gradient(#2b2a26,#131210)}
[data-v="1"] .w-record .plate{background:radial-gradient(120% 120% at 30% 20%,#4a4640,#1d1b18)}
[data-v="1"] .w-record .disc{background:radial-gradient(120% 120% at 32% 24%,#c9a24a,#6b4f18 62%,#2e2008)}
[data-v="1"] .w-record .label{background:radial-gradient(#f7efdc,#e2d3ae)}
[data-v="2"] .w-record{background:linear-gradient(#26262a,#0f0f11)}
[data-v="2"] .w-record .plate{background:radial-gradient(120% 120% at 30% 20%,#3c3c42,#18181c)}
[data-v="2"] .w-record .disc{
background:
radial-gradient(60% 44% at 26% 22%, rgba(255,255,255,.5), transparent 62%),
radial-gradient(48% 62% at 74% 68%, rgba(210,180,220,.42), transparent 66%),
linear-gradient(128deg,#efeae6,#cfc7c4 46%,#e6dfd9);
}
[data-v="2"] .w-record .label{background:radial-gradient(#2a2724,#151311)}
/* streak — the ink the year is drawn in */
[data-v="1"] .w-streak .dev{background:#f2f5ee}
[data-v="1"] .w-streak .hd b{color:#2f6b3a}
[data-v="1"] .w-streak .year g{stroke:#2f6b3a}
[data-v="1"] .w-streak .year g circle{fill:#2f6b3a}
[data-v="2"] .w-streak .dev{background:#fbf1f2}
[data-v="2"] .w-streak .hd b{color:#b32f52}
[data-v="2"] .w-streak .year g{stroke:#b32f52}
[data-v="2"] .w-streak .year g circle{fill:#b32f52}
/* tail — the weather it is standing in */
[data-v="1"] .w-tail .dev{background:linear-gradient(#f6c88a 0%, #f1a06f 46%, #6f5a72 100%)}
[data-v="1"] .w-tail .fin{filter:saturate(.9) brightness(.86)}
/* ⚠ A CAPTION SET FOR A PALE MORNING IS INVISIBLE AT DUSK — 2.12:1 over the
amber, because the ink was written once against one sky. Each weather brings
its own. */
[data-v="1"] .w-tail .ask{color:rgba(52,26,10,.72)}
[data-v="2"] .w-tail .ask{color:rgba(22,30,38,.66)}
[data-v="2"] .w-tail .dev{
background:
repeating-linear-gradient(78deg, rgba(190,205,220,.20) 0 1px, transparent 1px 9px),
linear-gradient(#8e9aa6 0%, #aab3ba 54%, #7e848a 100%);
}
[data-v="2"] .w-tail .fin{filter:saturate(.6) brightness(.74)}
/* tape — the formulation. Chrome is a clear shell, Metal is brushed alloy */
[data-v="1"] .w-tape .dev{background:linear-gradient(#2c3238,#12161a)}
[data-v="1"] .w-tape .shell{
background:linear-gradient(rgba(226,236,244,.44),rgba(150,168,182,.34));
box-shadow:inset 0 .6cqw 0 rgba(255,255,255,.5), inset 0 -.6cqw 0 rgba(0,0,0,.3), 0 1.8cqw 3.4cqw rgba(0,0,0,.5);
}
[data-v="1"] .w-tape .label{background:linear-gradient(#fbfdff,#dfe9f2)}
[data-v="2"] .w-tape .dev{background:linear-gradient(#1d1d20,#0b0b0d)}
[data-v="2"] .w-tape .shell{
background:
repeating-linear-gradient(92deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px),
linear-gradient(#7d8288,#3d4045);
box-shadow:inset 0 .6cqw 0 rgba(255,255,255,.3), inset 0 -.6cqw 0 rgba(0,0,0,.6), 0 1.8cqw 3.4cqw rgba(0,0,0,.55);
}
[data-v="2"] .w-tape .label{background:linear-gradient(#2b2b2e,#191919)}
[data-v="2"] .w-tape .label b{color:#e8e6df}
/* ⚠ AND THE SECOND LINE TOO — a dark label with only its title relit leaves
the side and the running time at 1.38:1 on a piece of type whose whole job
is being read off a shelf. */
[data-v="2"] .w-tape .label span{color:rgba(232,230,223,.66)}
/* ⚠ the goal is a NEW element and the dark variant had never heard of it —
1.19:1, because a label added after a theme was written inherits the light
one's ink. */
[data-v="2"] .w-walk .goal{color:rgba(210,216,228,.55)}