/* Shared top bar: brand on the left, one "section switcher" next to it, page tools on the right.
   Every page loads this after its own styles, so the header looks and behaves the same everywhere. */
.top .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-width:0}
.top .brand b{font:700 18px/1 var(--f-display);white-space:nowrap}
.top .brand small,.top .brand p{display:none}
.top .logo{width:24px;height:24px}
/* the name (built by nav.js): a TL monogram at rest; pointing at it plays the chosen idea. The tulip never moves.
   .play is the same as hovering, so the brand/ page can show each idea without a mouse. */
.wm{display:inline-flex;align-items:center;height:24px}
.svx{height:10px;width:auto;display:block}
.tl-mono{display:block;height:100%;width:auto}
/* spill: every pixel of TULIP LABS is a rect that starts on the TL and flies to its letter */
.tl-spill{display:block;height:20px;width:20px;overflow:visible;transition:width .35s cubic-bezier(.2,.8,.3,1) .12s}
.tl-spill rect{transform:translate(calc(var(--a) * 1px),calc(var(--b) * 1px));
  transition:transform .5s cubic-bezier(.3,.7,.2,1.25),opacity .25s;transition-delay:calc((37 - var(--x)) * 4ms)}
.tl-spill rect.h{opacity:0}
.brand:is(:hover,:focus-visible,.play) .tl-spill{width:calc(var(--w) * 4px);transition-delay:0s}
.brand:is(:hover,:focus-visible,.play) .tl-spill rect{transform:translate(calc(var(--x) * 1px),calc(var(--y) * 1px));opacity:1;transition-delay:calc(var(--x) * 11ms)}
/* runner: the whole name; on hover a pink pixel appears, hops through every letter lighting it, and fades at the end */
.tl-run{position:relative;display:inline-flex;align-items:baseline;font:700 18px/1 var(--f-display);white-space:nowrap}
.tl-run span{display:inline-block}
.tl-run i{position:absolute;left:0;bottom:1px;width:6px;height:6px;background:var(--pink);opacity:0}
.brand:is(:hover,:focus-visible,.play) .tl-run span{animation:tlight .5s calc(var(--i) * 60ms + 60ms) both}
.brand:is(:hover,:focus-visible,.play) .tl-run i{animation:trun .66s cubic-bezier(.4,0,.5,1) both,thop .066s ease-in-out 10 alternate both}
@keyframes trun{from{left:0;opacity:1}85%{opacity:1}to{left:calc(100% - 6px);opacity:0}}
@keyframes thop{to{translate:0 -9px}}
@keyframes tlight{35%{color:var(--pink);transform:translateY(-2px)}}
.wm-phone{display:none;height:20px}
/* "by svx": its own small mark after the name, split off by a hairline */
.by-svx{display:inline-flex;align-items:center;gap:5px;font:500 11px var(--f-mono);color:var(--muted);white-space:nowrap;padding-left:10px;margin-left:-2px;border-left:1px solid var(--line);height:16px}
@media (max-width:640px){.by-svx{display:none}}
/* typed: TL on a pink keycap; pressing it types the rest after a blinking caret */
.tl-typed{display:inline-flex;align-items:center;gap:7px}
.tl-typed kbd{display:grid;place-items:center;width:26px;height:24px;border-radius:5px;background:var(--pink);color:#1a0d14;
  box-shadow:inset 0 -3px 0 #c2357a;transition:transform .1s,box-shadow .1s}
.tl-typed kbd svg{height:12px}.tl-typed kbd rect[fill]{fill:#fff6fb}
.tl-t{display:inline-flex;font:600 15px/1 var(--f-mono);white-space:nowrap}
.tl-t i{font-style:normal;max-width:0;overflow:hidden;transition:max-width 0s calc((9 - var(--i)) * 20ms)}
.tl-typed em{width:2px;height:16px;background:var(--pink);opacity:0;margin-left:1px}
.brand:is(:hover,:focus-visible,.play) .tl-typed kbd{transform:translateY(2px);box-shadow:inset 0 -1px 0 #c2357a}
.brand:is(:hover,:focus-visible,.play) .tl-t i{max-width:1ch;transition-delay:calc(var(--i) * 55ms + 120ms)}
.brand:is(:hover,:focus-visible,.play) .tl-typed em{animation:tcaret 1s steps(2) .1s infinite}
@keyframes tcaret{from{opacity:1}}
@media (prefers-reduced-motion:reduce){.tl-spill,.tl-spill rect,.tl-t i{transition:none!important}.tl-run i,.tl-run span{animation:none!important}}
.top .grow{flex:1}

.sw{position:relative}
.sw>summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;
  font:600 13px var(--f-body);color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:7px;padding:6px 10px 6px 8px}
.sw>summary::-webkit-details-marker{display:none}
.sw>summary:hover{border-color:var(--muted)}
.sw>summary em{font-style:normal;color:var(--muted);font-size:10px;transition:transform .15s}
.sw[open]>summary em{transform:rotate(180deg)}
.sw>summary .sl{color:var(--muted);font-weight:500}
.sq{width:10px;height:10px;flex:none;border-radius:2px;background:var(--kc,var(--c2));box-shadow:3px 3px 0 color-mix(in srgb,var(--kc,var(--c2)) 35%,transparent)}
.sw-menu{position:absolute;z-index:40;top:calc(100% + 8px);left:0;width:min(560px,calc(100vw - 24px));
  background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 44px rgba(10,16,28,.22);
  padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:2px 10px}
.sw-menu h6{grid-column:1/-1;margin:8px 8px 2px;font:600 10.5px var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.sw-menu h6:first-child{margin-top:2px}
.sw-menu a{display:grid;grid-template-columns:14px 1fr;gap:2px 10px;align-items:center;padding:8px;border-radius:7px;text-decoration:none;color:var(--ink)}
.sw-menu a:hover,.sw-menu a:focus-visible{background:color-mix(in srgb,var(--kc) 12%,transparent)}
.sw-menu a[aria-current="page"]{background:color-mix(in srgb,var(--kc) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--kc) 45%,transparent)}
.sw-menu a b{font-size:13.5px;font-weight:600}
.sw-menu a small{grid-column:2;font-size:12px;color:var(--muted);line-height:1.35}
.sw-menu a.home{grid-column:1/-1}

/* one colour per section, used by the switcher, the home page and the footer */
.k-home{--kc:#ff5fa8}.k-worlds{--kc:#ff5fa8}.k-tc{--kc:#2fb38f}.k-ms{--kc:#3d8fe0}.k-bx{--kc:#e6a21a}.k-ps{--kc:#9a6be0}.k-ds{--kc:#3caa4c}.k-od{--kc:#ee6a4c}.k-dz{--kc:#1fa8c9}

@media (max-width:640px){
  .top .brand b{font-size:16px}
  .sw-menu{grid-template-columns:1fr;position:fixed;left:12px;right:12px;width:auto;top:56px;max-height:calc(100vh - 72px);overflow:auto}
  .sw>summary .sl{display:none}
}
/* phones: the name shrinks to the TL monogram */
@media (max-width:480px){.tl-run,.tl-t,.tl-typed em{display:none!important}.wm-phone{display:block}.tl-spill{width:20px!important}.tl-spill rect{transform:translate(calc(var(--a) * 1px),calc(var(--b) * 1px))!important;opacity:1!important}.tl-spill rect.h{opacity:0!important}}

/* colours switch, at the foot of the section menu */
.sw-theme{grid-column:1/-1;display:flex;align-items:center;gap:6px;margin:8px 0 0;padding:10px 8px 2px;border-top:1px dashed var(--line)}
.sw-theme span{font:600 10.5px var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-right:auto}
.sw-theme button{display:inline-flex;align-items:center;gap:6px;font:500 12.5px var(--f-body);color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:6px;padding:5px 10px;cursor:pointer;box-shadow:inset 0 -2px 0 var(--line)}
.sw-theme button i{font-style:normal;font-size:13px;width:14px;text-align:center}
.sw-theme button:hover{border-color:var(--muted)}
.sw-theme button[aria-pressed="true"]{background:#ff6fb5;border-color:#ff6fb5;color:#2a0b1b;box-shadow:inset 0 -2px 0 #c2407f}

/* footer: your whole garden standing in voxel grass. Black paper in dark, warm paper in light. */
.gfoot{--f-ink:#f0ede4;--f-muted:#a3a497;--f-accent:#f7b6d7;margin-top:40px;color:var(--f-muted);font-size:12.5px;position:relative;isolation:isolate;
  background:radial-gradient(60% 80% at 72% 100%,rgba(255,111,181,.16),transparent 70%),#0c0d0b}
.gfoot::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85 .12' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
:root[data-theme="light"] .gfoot{--f-ink:#1d1b17;--f-muted:#6a655a;--f-accent:#d23f87;background:radial-gradient(60% 80% at 72% 100%,rgba(255,111,181,.14),transparent 70%),#efebe2}
:root[data-theme="light"] .gfoot::before{display:none}
.gf-in{max-width:1240px;margin:0 auto;padding:56px max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:20px 40px;align-items:end}
.gf-title{margin:0;font:400 clamp(44px,5.4vw,70px)/.92 "Instrument Serif",Georgia,serif;color:var(--f-ink)}
.gf-title i{color:var(--f-accent)}
.gf-sub{margin:12px 0 26px;max-width:260px;line-height:1.5;font-size:13.5px}
.gf-beds{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;align-items:end}
.gf-bed{display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;color:var(--f-ink);padding:0 2px;border-radius:8px;transition:transform .2s}
.gf-pot{position:relative;width:100%;max-width:110px;height:130px;display:block}
.gf-pot canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.gf-ghost{opacity:.2}
:root[data-theme="light"] .gf-ghost{opacity:.28}
.gf-bed b{font:600 12.5px/1.2 var(--f-body);margin-top:2px;display:flex;gap:6px;align-items:center;white-space:nowrap}
.gf-bed b::before{content:"";width:8px;height:8px;border-radius:2px;flex:none;background:var(--kc)}
.gf-bed small{font:11px var(--f-mono);color:var(--f-muted);margin:1px 0 8px;opacity:.8}
.gf-bed:hover{transform:translateY(-4px)}
.gf-bed:hover .gf-pot{animation:gfsway 1.6s ease-in-out infinite;transform-origin:50% 100%}
@keyframes gfsway{0%,100%{transform:rotate(0)}50%{transform:rotate(-2.5deg)}}
/* the bee: drifts from flower to flower, turns round at each end, wings flicker */
.gf-bee{position:absolute;width:27px;height:21px;left:4%;top:8px;z-index:2;pointer-events:none;image-rendering:pixelated}
@media (prefers-reduced-motion:no-preference){
  .gf-bee{animation:gfbee 34s ease-in-out infinite}
  .gf-bee .w{animation:gfwing .18s steps(2) infinite}
}
@keyframes gfbee{
  0%{left:4%;top:8px;transform:scaleX(-1)} 12%{left:18%;top:46px;transform:scaleX(-1)} 24%{left:33%;top:14px;transform:scaleX(-1)}
  36%{left:50%;top:40px;transform:scaleX(-1)} 47%{left:90%;top:10px;transform:scaleX(-1)} 50%{left:90%;top:12px;transform:scaleX(1)}
  64%{left:66%;top:44px;transform:scaleX(1)} 78%{left:40%;top:6px;transform:scaleX(1)} 97%{left:4%;top:10px;transform:scaleX(1)} 100%{left:4%;top:8px;transform:scaleX(-1)}}
@keyframes gfwing{50%{opacity:.25}}
.gf-grass{display:block;width:100%;height:34px;margin-top:-6px}
.gf-base{background:#1a3d22;color:#cfe6c9;display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;font:11.5px/1.5 var(--f-mono);
  padding:12px max(16px,env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.gf-brand{display:flex;align-items:center;gap:9px;margin-right:auto}
.gf-brand .logo{width:15px;height:15px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px}
.gf-brand .logo i{background:#ff6fb5;border-radius:1px}.gf-brand .logo i:nth-child(2),.gf-brand .logo i:nth-child(6){background:#f3ecd7}
.gf-brand .logo i:nth-child(4){background:#7cc742}.gf-brand .logo i:nth-child(8){background:#ffd21f}.gf-brand .logo i:nth-child(1),.gf-brand .logo i:nth-child(9){opacity:.25}
.gf-brand b{font:700 13px "Pixelify Sans",ui-monospace,monospace;color:#fff;letter-spacing:.02em}
.gf-brand em{font-style:normal;opacity:.8;display:inline-flex;align-items:center;gap:6px}
.gf-brand .svx{height:9px;color:#fff}
.gf-news{color:inherit;opacity:.75;text-underline-offset:3px}.gf-news:hover{opacity:1}
.gf-keep{opacity:.75}
.gf-top{color:#10260f;background:#a3d65f;text-decoration:none;font:600 11.5px var(--f-mono);padding:3px 9px 4px;border-radius:5px;box-shadow:inset 0 -2px 0 #6f9f3a}
.gf-top:hover{background:#c0e889}
@media (max-width:900px){
  .gf-in{grid-template-columns:1fr}
  .gf-beds{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:2px}
  .gf-pot{height:100px}
}
@media (max-width:560px){.gf-keep{display:none}}
@media (prefers-reduced-motion:reduce){.gf-bed:hover .gf-pot{animation:none}}
.sfoot{margin-top:40px}
.sfoot .gf-grass{height:28px;margin-top:0}
.sfoot .gf-base{padding-top:9px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}

/* the logo: a pixel tulip, the same one as the favicon (learn/logo.svg). Every page still ships the
   old 3×3 grid of <i>s inside .logo; they stay as the box and the picture is drawn over them. */
.logo{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'><rect x='1' y='0' width='1' height='1' fill='%23ff6fb5'/><rect x='3' y='0' width='1' height='1' fill='%23ff6fb5'/><rect x='5' y='0' width='1' height='1' fill='%23ff6fb5'/><rect x='0' y='1' width='1' height='1' fill='%23ff6fb5'/><rect x='1' y='1' width='1' height='1' fill='%23ff6fb5'/><rect x='2' y='1' width='1' height='1' fill='%23d23f87'/><rect x='3' y='1' width='1' height='1' fill='%23ff6fb5'/><rect x='4' y='1' width='1' height='1' fill='%23d23f87'/><rect x='5' y='1' width='1' height='1' fill='%23ff6fb5'/><rect x='6' y='1' width='1' height='1' fill='%23ff6fb5'/><rect x='0' y='2' width='1' height='1' fill='%23ff6fb5'/><rect x='1' y='2' width='1' height='1' fill='%23ff6fb5'/><rect x='2' y='2' width='1' height='1' fill='%23ffd21f'/><rect x='3' y='2' width='1' height='1' fill='%23ffd21f'/><rect x='4' y='2' width='1' height='1' fill='%23ffd21f'/><rect x='5' y='2' width='1' height='1' fill='%23ff6fb5'/><rect x='6' y='2' width='1' height='1' fill='%23ff6fb5'/><rect x='1' y='3' width='1' height='1' fill='%23ff6fb5'/><rect x='2' y='3' width='1' height='1' fill='%23ff6fb5'/><rect x='3' y='3' width='1' height='1' fill='%23ffd21f'/><rect x='4' y='3' width='1' height='1' fill='%23ff6fb5'/><rect x='5' y='3' width='1' height='1' fill='%23ff6fb5'/><rect x='0' y='4' width='1' height='1' fill='%233faa52'/><rect x='3' y='4' width='1' height='1' fill='%2324803c'/><rect x='6' y='4' width='1' height='1' fill='%233faa52'/><rect x='0' y='5' width='1' height='1' fill='%233faa52'/><rect x='1' y='5' width='1' height='1' fill='%233faa52'/><rect x='3' y='5' width='1' height='1' fill='%2324803c'/><rect x='5' y='5' width='1' height='1' fill='%233faa52'/><rect x='6' y='5' width='1' height='1' fill='%233faa52'/><rect x='1' y='6' width='1' height='1' fill='%233faa52'/><rect x='2' y='6' width='1' height='1' fill='%233faa52'/><rect x='3' y='6' width='1' height='1' fill='%2324803c'/><rect x='4' y='6' width='1' height='1' fill='%233faa52'/><rect x='5' y='6' width='1' height='1' fill='%233faa52'/></svg>") center/contain no-repeat!important;image-rendering:pixelated}
.logo i{visibility:hidden}

/* product news cards (home and the news page), filled by learn/news.js */
.news{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.nw{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.nw-art{display:flex;aspect-ratio:1.9;border-radius:6px;overflow:hidden;transition:transform .25s cubic-bezier(.2,.8,.3,1)}
.nw:hover .nw-art{transform:translateY(-3px)}
.nw-art>span{flex:0 0 42%;display:grid;place-items:center;background:var(--a)}
.nw-art>span svg{width:46%;height:auto;image-rendering:pixelated}
.nw-art>b{flex:1;display:flex;align-items:center;padding:0 16px;background:var(--b);color:var(--c,#fff);font:400 21px/1.08 var(--f-serif)}
.nw-meta{font:12px var(--f-mono);color:var(--muted);margin-top:12px}
.nw-meta em{font-style:normal;color:var(--ink)}
.nw-t{font:500 16px/1.35 var(--f-body);margin-top:4px}
.nw-t::after{content:" ›";color:var(--muted)}
.nw:hover .nw-t{text-decoration:underline;text-underline-offset:3px}
.nw-body{color:var(--muted);font-size:14px;line-height:1.6;margin-top:6px}
.news .nw-t::after{content:" →";color:var(--pink);font-family:var(--f-mono)}

/* Page change: pink pixel blocks fill the screen from where you clicked, a cream tulip waits while the next
   page loads, and there the blocks clear from the middle out. The head script on every page sets .wipe-in
   when it arrives mid-change, so the first paint is already covered; nav.js takes it from there. */
html.wipe-in body::after{content:"";position:fixed;inset:0;z-index:9998;background:#ff6fb5 url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'><rect x='1' y='0' width='1' height='1' fill='%23fff6fb'/><rect x='3' y='0' width='1' height='1' fill='%23fff6fb'/><rect x='5' y='0' width='1' height='1' fill='%23fff6fb'/><rect x='0' y='1' width='1' height='1' fill='%23fff6fb'/><rect x='1' y='1' width='1' height='1' fill='%23fff6fb'/><rect x='2' y='1' width='1' height='1' fill='%23ffd6ea'/><rect x='3' y='1' width='1' height='1' fill='%23fff6fb'/><rect x='4' y='1' width='1' height='1' fill='%23ffd6ea'/><rect x='5' y='1' width='1' height='1' fill='%23fff6fb'/><rect x='6' y='1' width='1' height='1' fill='%23fff6fb'/><rect x='0' y='2' width='1' height='1' fill='%23fff6fb'/><rect x='1' y='2' width='1' height='1' fill='%23fff6fb'/><rect x='2' y='2' width='1' height='1' fill='%23ffd21f'/><rect x='3' y='2' width='1' height='1' fill='%23ffd21f'/><rect x='4' y='2' width='1' height='1' fill='%23ffd21f'/><rect x='5' y='2' width='1' height='1' fill='%23fff6fb'/><rect x='6' y='2' width='1' height='1' fill='%23fff6fb'/><rect x='1' y='3' width='1' height='1' fill='%23fff6fb'/><rect x='2' y='3' width='1' height='1' fill='%23fff6fb'/><rect x='3' y='3' width='1' height='1' fill='%23ffd21f'/><rect x='4' y='3' width='1' height='1' fill='%23fff6fb'/><rect x='5' y='3' width='1' height='1' fill='%23fff6fb'/><rect x='0' y='4' width='1' height='1' fill='%233faa52'/><rect x='3' y='4' width='1' height='1' fill='%2324803c'/><rect x='6' y='4' width='1' height='1' fill='%233faa52'/><rect x='0' y='5' width='1' height='1' fill='%233faa52'/><rect x='1' y='5' width='1' height='1' fill='%233faa52'/><rect x='3' y='5' width='1' height='1' fill='%2324803c'/><rect x='5' y='5' width='1' height='1' fill='%233faa52'/><rect x='6' y='5' width='1' height='1' fill='%233faa52'/><rect x='1' y='6' width='1' height='1' fill='%233faa52'/><rect x='2' y='6' width='1' height='1' fill='%233faa52'/><rect x='3' y='6' width='1' height='1' fill='%2324803c'/><rect x='4' y='6' width='1' height='1' fill='%233faa52'/><rect x='5' y='6' width='1' height='1' fill='%233faa52'/></svg>") center/56px no-repeat;image-rendering:pixelated;animation:wipesafe 0s 2.5s forwards}
@keyframes wipesafe{to{opacity:0;visibility:hidden}}
.px-wipe{position:fixed;inset:0;z-index:9999;display:grid;pointer-events:none}
.px-wipe i{background:#ff6fb5;transform:scale(0);transition:transform .2s cubic-bezier(.3,.7,.2,1)}
.px-wipe i:nth-child(7n+3){background:#f7b6d7}.px-wipe i:nth-child(11n+5){background:#ff5fa8}
.px-wipe.full i{transform:scale(1.04)}
.px-wipe.now i,.px-wipe.now .tl{transition:none}
.px-wipe .tl{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'><rect x='1' y='0' width='1' height='1' fill='%23fff6fb'/><rect x='3' y='0' width='1' height='1' fill='%23fff6fb'/><rect x='5' y='0' width='1' height='1' fill='%23fff6fb'/><rect x='0' y='1' width='1' height='1' fill='%23fff6fb'/><rect x='1' y='1' width='1' height='1' fill='%23fff6fb'/><rect x='2' y='1' width='1' height='1' fill='%23ffd6ea'/><rect x='3' y='1' width='1' height='1' fill='%23fff6fb'/><rect x='4' y='1' width='1' height='1' fill='%23ffd6ea'/><rect x='5' y='1' width='1' height='1' fill='%23fff6fb'/><rect x='6' y='1' width='1' height='1' fill='%23fff6fb'/><rect x='0' y='2' width='1' height='1' fill='%23fff6fb'/><rect x='1' y='2' width='1' height='1' fill='%23fff6fb'/><rect x='2' y='2' width='1' height='1' fill='%23ffd21f'/><rect x='3' y='2' width='1' height='1' fill='%23ffd21f'/><rect x='4' y='2' width='1' height='1' fill='%23ffd21f'/><rect x='5' y='2' width='1' height='1' fill='%23fff6fb'/><rect x='6' y='2' width='1' height='1' fill='%23fff6fb'/><rect x='1' y='3' width='1' height='1' fill='%23fff6fb'/><rect x='2' y='3' width='1' height='1' fill='%23fff6fb'/><rect x='3' y='3' width='1' height='1' fill='%23ffd21f'/><rect x='4' y='3' width='1' height='1' fill='%23fff6fb'/><rect x='5' y='3' width='1' height='1' fill='%23fff6fb'/><rect x='0' y='4' width='1' height='1' fill='%233faa52'/><rect x='3' y='4' width='1' height='1' fill='%2324803c'/><rect x='6' y='4' width='1' height='1' fill='%233faa52'/><rect x='0' y='5' width='1' height='1' fill='%233faa52'/><rect x='1' y='5' width='1' height='1' fill='%233faa52'/><rect x='3' y='5' width='1' height='1' fill='%2324803c'/><rect x='5' y='5' width='1' height='1' fill='%233faa52'/><rect x='6' y='5' width='1' height='1' fill='%233faa52'/><rect x='1' y='6' width='1' height='1' fill='%233faa52'/><rect x='2' y='6' width='1' height='1' fill='%233faa52'/><rect x='3' y='6' width='1' height='1' fill='%2324803c'/><rect x='4' y='6' width='1' height='1' fill='%233faa52'/><rect x='5' y='6' width='1' height='1' fill='%233faa52'/></svg>") center/contain no-repeat;image-rendering:pixelated;
  opacity:0;transform:scale(.6);transition:opacity .18s,transform .3s cubic-bezier(.3,.7,.3,1.5)}
.px-wipe.full .tl{opacity:1;transform:none;transition-delay:.12s}
.px-wipe.full .tl{animation:tlbreathe 1.1s ease-in-out .45s infinite}
@keyframes tlbreathe{50%{transform:translateY(-6px) rotate(-4deg)}}

/* sign in: a quiet word in the top bar, then initials once signed in */
.acct{all:unset;cursor:pointer;font:500 13px var(--f-body);color:var(--muted);padding:6px 10px;border-radius:4px;border:1px solid transparent;white-space:nowrap}
.acct:hover{color:var(--ink);border-color:var(--line)}
.acct:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.acct.in{font:600 12px var(--f-mono);color:var(--ink);background:color-mix(in srgb,var(--pink) 18%,transparent);border-color:color-mix(in srgb,var(--pink) 45%,transparent);padding:5px 8px}
.acct-sheet{width:min(400px,calc(100vw - 32px));padding:32px 28px 24px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font:15px/1.55 var(--f-body)}
.acct-sheet::backdrop{background:rgb(0 0 0 / .45);backdrop-filter:blur(3px)}
.acct-sheet[open]{animation:as-in .22s ease-out}
@keyframes as-in{from{opacity:0;transform:translateY(8px)}}
.as-x{position:absolute;top:10px;right:10px}
.as-x button{all:unset;cursor:pointer;width:28px;height:28px;display:grid;place-items:center;border-radius:4px;color:var(--muted);font-size:20px}
.as-x button:hover{color:var(--ink);background:var(--soft)}
.as-head{text-align:center}
.as-tulip{width:35px;height:35px}
.as-head h2{font:400 30px/1.1 var(--f-serif);margin:12px 0 4px}
.as-head h2 i{color:var(--pink)}
.as-head p{margin:0;color:var(--muted);font-size:14px}
.as-btns{display:grid;gap:8px;margin-top:24px}
.as-btns button,.as-mail button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;padding:11px 14px;border:1px solid var(--line);border-radius:4px;font-weight:500;font-size:14px;transition:border-color .2s}
.as-btns button:hover,.as-mail button:hover{border-color:var(--ink)}
.as-btns button:focus-visible,.as-mail button:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.as-btns svg{width:16px;height:16px}
.as-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--faint);font:12px var(--f-mono)}
.as-or::before,.as-or::after{content:"";flex:1;height:1px;background:var(--line)}
.as-mail label{display:block;font:500 12px var(--f-mono);color:var(--muted);margin-bottom:6px}
.as-mail div{display:grid;gap:8px}
.as-mail input{box-sizing:border-box;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--ink);font:inherit;font-size:14px}
.as-mail input:focus{outline:2px solid var(--pink);outline-offset:-1px;border-color:transparent}
.as-mail button{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.as-msg{min-height:1.4em;margin:12px 0 0;font-size:13px;color:var(--pink);text-align:center}
.as-msg:empty{margin:0;min-height:0}
.as-fine{margin:14px 0 0;text-align:center;color:var(--faint);font:12px var(--f-mono)}
.as-list{list-style:none;margin:22px 0 0;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}
.as-list li{display:flex;gap:10px;align-items:baseline}
.as-dot{flex:none;width:7px;height:7px;background:#3faa52}
.acct-sheet [hidden]{display:none!important}
.as-or[hidden] + .as-mail{margin-top:24px}
.as-btns .as-out{color:#d23f87;border-color:color-mix(in srgb,#d23f87 45%,transparent)}.as-btns .as-out:hover{border-color:#d23f87}
/* signed in: your photo, or initials, in the top bar */
.acct.in{display:grid;place-items:center;width:32px;height:32px;padding:0;border-radius:50%;overflow:hidden;font:600 11.5px var(--f-mono)}
.acct.in img{width:100%;height:100%;object-fit:cover;display:block}
/* first sign-in: pick a username */
.as-name{display:grid;gap:6px;margin-top:22px}
.as-name label{font:500 12px var(--f-mono);color:var(--muted)}
.as-name label[for=as-disp]{margin-top:10px}
.as-at{display:flex;align-items:center;border:1px solid var(--line);border-radius:4px;background:var(--bg)}
.as-at span{padding:0 0 0 12px;color:var(--faint);font:14px var(--f-mono)}
.as-at input{flex:1;min-width:0;border:0;background:none;padding:10px 12px 10px 2px;color:var(--ink);font:14px var(--f-mono);outline:none}
.as-at:focus-within{outline:2px solid var(--pink);outline-offset:-1px;border-color:transparent}
.as-name > input{box-sizing:border-box;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--ink);font:inherit;font-size:14px}
.as-name > input:focus{outline:2px solid var(--pink);outline-offset:-1px;border-color:transparent}
.as-hint{margin:0;min-height:1.3em;font:12px var(--f-mono);color:var(--faint)}
.as-hint.ok{color:#3faa52}.as-hint.no{color:#d23f87}
.as-name button{all:unset;box-sizing:border-box;cursor:pointer;margin-top:16px;padding:11px 14px;border-radius:4px;background:var(--ink);color:var(--bg);text-align:center;font-weight:500;font-size:14px}
.as-name button:disabled{opacity:.4;cursor:default}
.as-name button:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.as-fine a{color:inherit;text-underline-offset:2px}
.acct.in svg{width:100%;height:100%;display:block}