:root{
  color-scheme:dark;
  --bg:#0b0b0d; --panel:#1a1a1f; --ink:#f0efe9; --ink-2:#a8a8b4; --ink-3:#70707c;
  --line:#2c2c34; --line-2:#23232a;
  --skel:#24242c; --skel-2:#32323c; --skel-txt:#6a6a76;
  --win:#7fae8b; --win-s:#1c241e; --loss:#c88a74; --loss-s:#241c19;
  --THAI:#c9463f; --THAI-s:#291815;
  --AI:#cf75f0; --AI-s:#26172b;
  --TECH:#ff7a5c; --TECH-s:#2c1b17;
  --WORLD:#6fb2ee; --WORLD-s:#16202b;
  --GOOD:#68c185; --GOOD-s:#15251b;
  --SPORT:#e0b839; --SPORT-s:#2a2313;
  --FILM:#e0788f; --FILM-s:#2b1920;
  --BALL:#4ec3cb; --BALL-s:#122528;
  --serif:ui-serif,Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Inter,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;
  /* side padding, never less than the notch in landscape */
  --pl:max(18px,env(safe-area-inset-left)); --pr:max(18px,env(safe-area-inset-right));
}
*{box-sizing:border-box}
/* stops a pull at the top of the page reaching the browser's own pull-to-refresh or back/forward
   swipe. CSS alone is not enough on its own, see the touchmove guard near the pull top code below;
   the two only work together. */
html{-webkit-text-size-adjust:100%;overscroll-behavior-y:contain}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;
  line-height:1.5;-webkit-font-smoothing:antialiased;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;overscroll-behavior-y:contain}
/* touch-action: manipulation kills double tap zoom and keeps pinch zoom */
body *{touch-action:manipulation}
.page{max-width:640px;margin:0 auto;min-height:100vh;min-height:100dvh;background:var(--panel);
  padding:0 var(--pr) 34px var(--pl)}
/* a mouse gets a centred column with the dark surround, a phone gets the whole screen in either
   orientation, so turning it sideways never leaves black bars */
@media (min-width:680px) and (hover:hover){.page{border-left:1px solid var(--line);border-right:1px solid var(--line)}}
@media (hover:none) and (pointer:coarse){
  body{background:var(--panel)}
  .page{max-width:none}}

/* desktop scrollbar: a track line, thumb takes the colour of the current section */
html::-webkit-scrollbar{width:9px}
html::-webkit-scrollbar-track{background:linear-gradient(to right,transparent 4px,
  var(--line) 4px,var(--line) 5px,transparent 5px)}
html::-webkit-scrollbar-thumb{background:var(--cur,var(--ink-2));border-radius:99px;
  border:2px solid transparent;background-clip:content-box}
@supports not selector(::-webkit-scrollbar){
  html{scrollbar-width:thin;scrollbar-color:var(--cur,var(--ink-2)) transparent}}
/* touch: hidden entirely, the system overlay is drawn by the OS and cannot be removed */
@media (hover:none) and (pointer:coarse){
  html{scrollbar-width:none}
  html::-webkit-scrollbar{width:0;height:0}}

.mast{position:sticky;top:0;margin:0 calc(-1 * var(--pr)) 0 calc(-1 * var(--pl));background:var(--panel);z-index:4;
  padding:calc(18px + env(safe-area-inset-top)) var(--pr) 9px var(--pl);border-bottom:1px solid var(--line)}
.mast .top{display:flex;align-items:center;gap:16px}
.mast .t{font-family:var(--serif);letter-spacing:-.015em;line-height:1.05;font-size:33px;flex:1;
  user-select:none;-webkit-user-select:none;position:relative}
.mbtn{width:36px;height:36px;flex:0 0 auto;border:1px solid var(--line);border-radius:50%;
  background:transparent;color:var(--ink-2);cursor:pointer;display:flex;align-items:center;
  justify-content:center;padding:0;transition:opacity .25s ease}
.mbtn.dim{opacity:.3}
#jump{color:var(--ink);border-color:var(--ink-3)}
.mbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.mast .sub{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:7px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
/* a quiet line along the masthead's own bottom edge while a routine is writing, deliberately too
   subtle to catch the eye while reading. Tapping it (a generous invisible strip, not just the
   2px visible line) answers the one question a mark this quiet raises: is it still going. */
.updbar{position:absolute;left:0;right:0;bottom:-10px;height:20px;overflow:hidden;cursor:pointer}
.updbar i{position:absolute;bottom:9px;left:-30%;width:30%;height:2px;background:var(--ink-2);
  opacity:.3;animation:updslide 2.2s ease-in-out infinite}
@keyframes updslide{0%{left:-30%}100%{left:100%}}

.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:0 0 auto}
/* each category is a block of its own: air above, then a full width tinted band you can tap to fold */
/* a soft break between categories: about a third of the way from the plain hairline to a hard band */
.sec{margin-top:31px}
.sec:first-of-type{margin-top:20px}
.secH{display:flex;align-items:center;gap:10px;margin:0 calc(-1 * var(--pr)) 4px calc(-1 * var(--pl));
  padding:10px var(--pr) 10px var(--pl);font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;cursor:pointer;user-select:none;-webkit-user-select:none;
  border-bottom:1px solid color-mix(in srgb,currentColor 20%,transparent);
  transition:opacity .25s ease,background-color .25s ease}
.secH .cnt{font-size:10px;opacity:.7;margin-left:auto;font-weight:400}
.secH .chev{font-size:15px;line-height:1;opacity:.8;transition:transform .2s;transform:rotate(90deg)}
.sec.collapsed .secH .chev{transform:rotate(0deg)}
/* folded: the band recedes, but stays exactly where it was, so folding never moves the band itself,
   only the items beneath it disappear */
.sec.collapsed .secH{opacity:.5;background:transparent !important;border-bottom-color:transparent}
.sec.collapsed>:not(.secH){display:none}
.none{padding:12px 0 8px 17px;color:var(--ink-3);font-size:13.5px}

/* basketball band: air and a full width rule, still subordinate to Sports */
.band{margin:20px 0 0 13px;padding:4px 0 0 13px;border-top:1px solid var(--line)}
.subH{display:flex;align-items:center;gap:6px;padding:14px 0 1px;font-family:var(--mono);
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;opacity:.72}
.subH .sq{width:5px;height:5px;border-radius:1.5px;flex:0 0 auto}
.subH .cnt{margin-left:auto;font-size:8.5px;opacity:.8}
/* World's two bands: serif labels with a small age note, a hairline between lines, folded until tapped */
.band.fold>.subH{cursor:pointer;user-select:none;-webkit-user-select:none}
.band.fold .bc{font-size:12px;opacity:.8;transition:transform .2s;transform:rotate(90deg)}
.band.fold.f .bc{transform:none}
.band.fold.f>:not(.subH){display:none}
.ln{border-bottom:1px solid var(--line-2)}
.ln>summary,.ln>.sm{list-style:none;cursor:pointer;display:grid;gap:0 8px;padding:10px 0 9px;align-items:start}
.ln>.sm{cursor:default}
.ln>summary::-webkit-details-marker{display:none}
.ln>summary,.ln>.sm{grid-template-columns:74px 1fr 14px;grid-template-areas:"k x c" "sb x c";grid-template-rows:auto 1fr}
.ln .k{grid-area:k;font:italic 13px/1.35 var(--serif);color:var(--WORLD);padding-top:1px;white-space:nowrap}
.ln .sb{grid-area:sb;font:8.5px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.ln .x{grid-area:x;font-size:14px;line-height:1.4;color:var(--ink)}
.ln .c{grid-area:c;color:var(--ink-3);font-size:13px;line-height:1.6;transition:transform .2s}
.ln[open]>summary .c{transform:rotate(90deg)}
.ln .ex{padding:0 14px 10px 82px;font-size:13.5px;color:var(--ink-2);line-height:1.55}
.ln .ex p{margin:0}
.ln .ex p.tm{font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--WORLD);margin:0 0 4px}
.ln .go{font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);border:1px solid var(--ink-3);
  background:transparent;border-radius:99px;padding:6px 12px;margin-top:9px;cursor:pointer}
/* each story sits on its own barely lighter plate, and the old 1px rule is a 3px gap. The 2px that costs
   comes out of the summary's padding (8 + 16 instead of 13 + 13), so a closed row is the same height. */
.row{position:relative;background:#1d1d22;border-radius:6px;margin:0 -8px 3px;padding:0 8px;transition:background .2s}
.row:last-of-type{margin-bottom:0}
.row[open]{background:#202026}
/* the outlet, in the plate's corner, so quiet it is second nature. Closed, taps pass through to the row;
   opened, it lights up and is the link to the source. */
.srcl{position:absolute;right:2px;bottom:-1px;max-width:55%;padding:6px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-family:var(--mono);font-size:5.6px;letter-spacing:.08em;text-transform:uppercase;
  line-height:1;color:var(--ink-3);opacity:.6;text-decoration:none;pointer-events:none;
  transition:color .25s,opacity .25s}
.row[open] .srcl{color:var(--ink-2);opacity:1;pointer-events:auto;text-decoration:underline dotted;text-underline-offset:2px}
.row>summary{list-style:none;cursor:pointer;padding:8px 0 16px;position:static;display:grid;
  grid-template-columns:auto 1fr auto;gap:10px;align-items:start}
.row>summary::-webkit-details-marker{display:none}
.row h3{font-family:var(--serif);font-size:16.5px;line-height:1.3;margin:0;font-weight:600}
.band .row h3{font-size:15.5px}
.row .lead{padding-top:6px}
.row .chev{color:var(--ink-3);font-size:14px;line-height:1.6;transition:transform .2s}
.row[open]>summary .chev{transform:rotate(90deg)}
.row .body{padding:0 0 16px 17px}
/* a quiet hairline between the headline and the text once an item is open */
.row .body::before{content:"";display:block;height:1px;background:var(--line);margin:0 0 12px}
/* description and why it matters share size and ink, the key line is quieter */
.desc{font-size:14.5px;color:var(--ink);line-height:1.6}
.prev{font-size:12px;color:var(--ink-3);border-left:2px solid var(--line);padding-left:9px;margin:9px 0 0}
.key{margin:15px 0 14px;padding:0 0 0 13px;border-left:2px solid var(--line-2)}
.key.q{border-left-color:var(--line)}
.key .txt{font-family:var(--serif);font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.key .who{display:block;margin-top:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3)}
.why{font-size:14.5px;color:var(--ink);line-height:1.6}
.why b{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:4px;font-weight:400}
.more{margin-top:14px;margin-left:-17px}   /* spans the whole row, so the pill centres on the card, not on the indented text */
/* the pill sits at --mx (0 left, .5 centre, 1 right) of the row. Hold it to wiggle, then slide it
   sideways and let go. The spot is remembered and shared by every item. */
.more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;width:max-content;
  position:relative;left:calc(var(--mx,.5) * 100%);transform:translateX(calc(var(--mx,.5) * -100% - 1px));
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--ink-3);border-radius:99px;padding:7px 15px;
  touch-action:pan-y pinch-zoom;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.more>summary::-webkit-details-marker{display:none}
.more>summary.edit{border-color:var(--ink);animation:wig .2s ease-in-out infinite alternate}
@keyframes wig{from{rotate:-2.6deg}to{rotate:2.6deg}}
.more .deep{padding:11px 0 0 17px;font-size:14px;color:var(--ink);line-height:1.6}
.more .deep p{margin:0 0 9px}.more .deep p:last-of-type{margin-bottom:0}
.out{display:inline-block;margin-top:8px;padding:8px 0 3px;font-size:13.5px;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--ink-3)}

/* game block */
.game{border:1px solid var(--BALL);border-radius:9px;overflow:hidden;margin:9px 0 3px;
  background:var(--BALL-s);transition:background .45s ease,border-color .45s ease}
.game>summary{list-style:none;cursor:pointer;padding:9px 11px;display:grid;
  grid-template-columns:auto 1fr auto;gap:7px;align-items:baseline}
.game>summary::-webkit-details-marker{display:none}
/* one phrase, not a caption plus a value: the team leads, "Last night" trails as a quiet aside,
   both set to share a real baseline so they read as a single line */
.game .gt{font-family:var(--serif);font-size:15px;line-height:1;color:var(--ink);font-weight:600}
.game .gl{font-family:var(--sans);font-size:11.5px;line-height:1;color:var(--BALL);opacity:.85}
.game .chev{color:var(--BALL);font-size:12px;transition:transform .2s}
.game[open]>summary .chev{transform:rotate(90deg)}
.game .gbody{padding:1px 11px 11px}
.game.rv-w{border-color:var(--win);background:var(--win-s)}
.game.rv-l{border-color:var(--loss);background:var(--loss-s)}
.game.rv-w .gl,.game.rv-w .chev{color:var(--win)}
.game.rv-l .gl,.game.rv-l .chev{color:var(--loss)}

.skel{position:relative;border-radius:7px;overflow:hidden;background:var(--skel);min-height:112px;
  transition:background .45s ease}
.skel.shown{background:transparent;min-height:0}
.skel .real{opacity:0;transition:opacity .3s ease}
.skel.shown .real{opacity:1}
.skel .wire{position:absolute;inset:0;background:var(--skel);cursor:pointer;display:flex;
  flex-direction:column;justify-content:center;gap:7px;padding:11px;transition:opacity .3s ease;
  user-select:none;-webkit-user-select:none;touch-action:none}
.skel.shown .wire{opacity:0;pointer-events:none}
.skel .bar{height:8px;border-radius:4px;background:var(--skel-2)}
.skel .bar.w1{width:44%;height:14px} .skel .bar.w2{width:86%} .skel .bar.w3{width:62%}
.skel .lbl{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--skel-txt);margin-top:2px;display:flex;align-items:center;gap:8px}
.skel .track{flex:1;max-width:92px;height:2px;border-radius:2px;background:var(--skel-2);
  overflow:hidden;opacity:0;transition:opacity .18s}
.skel.arming .track{opacity:1}
.skel .fill{height:100%;width:0;background:var(--skel-txt)}
.skel.arming .fill{width:100%;transition:width .65s linear}

/* the card: Blazers always left, the winning half tinted and bold */
.gm{display:flex}
.gh{flex:1;min-width:0;padding:10px 12px}
.gh.t{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.gv{width:1px;background:var(--skel-2);opacity:.7}
.gn{display:flex;align-items:baseline;gap:7px}
.tn{font-size:13px;white-space:nowrap}
.tn.us::before{content:"";display:inline-block;width:6px;height:6px;border-radius:1px;
  background:var(--ink);margin-right:5px;vertical-align:1px}
.won{font-weight:700;color:var(--ink)}
.lost{font-weight:400;color:var(--ink-2)}
.rec{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);letter-spacing:.04em}
.gs{display:flex;align-items:center;gap:8px;margin:3px 0 4px}
.ts{font-family:var(--serif);font-size:28px;font-variant-numeric:tabular-nums;line-height:1;
  letter-spacing:-.01em}
.ts.won{font-weight:700}
.tp{display:block;font-size:11px;color:var(--ink-2);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.tp b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.gd{padding:9px 12px 11px;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.res{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;padding:2px 8px;
  border-radius:5px;user-select:none;-webkit-user-select:none;position:relative;
  border:1px solid transparent}
.res.win{color:var(--win);background:var(--win-s);border-color:var(--win)}
.res.loss{color:var(--loss);background:var(--loss-s);border-color:var(--loss)}

/* fast pass */
.fast{margin-top:26px;border-top:1px solid var(--line);padding-top:16px;scroll-margin-top:72px}
.fastH{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:16px;
  padding-bottom:13px;border-bottom:1px solid var(--line)}
.fastH .ft{font-family:var(--serif);font-size:21px;letter-spacing:-.01em;color:var(--ink)}
.fastH .fn{font-family:var(--mono);font-size:10px;letter-spacing:.09em;color:var(--ink-3)}
.pips{display:flex;gap:2px;margin-bottom:16px}
.pips i{height:3px;flex:1;border-radius:2px;transition:background .18s ease}
.tapwrap{position:relative;user-select:none;-webkit-user-select:none}
/* the chip stays pinned at the same top position and the counter at the same bottom position on
   every card; only .fcmid, the group between them, grows to fill the space and centres its own
   content inside it. Two fixed points to read by, so the eye is not relocating them on every tap. */
.fc{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 32px;
  display:flex;flex-direction:column;height:300px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.fc .chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:4px;align-self:flex-start;flex:0 0 auto;margin-bottom:12px}
.fc .fcmid{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:12px}
.fc h4{font-family:var(--serif);font-size:28px;line-height:1.24;margin:0;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fc .kl{font-size:16px;color:var(--ink-2);line-height:1.42;display:-webkit-box;
  -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fc .kw{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
  overflow:hidden;flex:0 0 auto}
.fc .ct{font-family:var(--mono);font-size:11px;letter-spacing:.09em;color:var(--ink-3);flex:0 0 auto;margin-top:12px}
.fc.endcard{align-items:center;justify-content:center;text-align:center;gap:5px}
.zones{position:absolute;inset:0;display:flex;cursor:pointer;border-radius:14px;overflow:hidden}
.zones span{flex:1;display:flex;align-items:center;font-size:17px;line-height:1;color:var(--ink-3);
  opacity:.22;transition:opacity .22s ease,background .22s ease}
.zones .zl{justify-content:flex-start;padding-left:7px}
.zones .zr{justify-content:flex-end;padding-right:7px}
.tapwrap.peek .zones span{opacity:.62;background:rgba(128,128,128,.09)}
.tapwrap.armed .fc{border-color:var(--ink-3)}
.restart{font:inherit;font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  cursor:pointer;background:transparent;border:1px solid var(--line);color:var(--ink-2);
  border-radius:99px;padding:5px 13px;margin-top:9px;z-index:3;position:relative}

.done{text-align:center;color:var(--ink-3);font-size:13px;padding:100px 8px 16px;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.done b{display:block;font-family:var(--serif);font-size:21px;color:var(--ink);margin-bottom:3px;font-weight:400}
.endmark{display:block;position:relative;margin:26px -8px;height:4px;opacity:.55}
.endmark i{position:absolute;top:0;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;
  background:var(--ink-3);will-change:transform,opacity}
.endmark i:nth-child(1){transform:translateX(-14px)}.endmark i:nth-child(3){transform:translateX(14px)}
/* the dots the dev portal hold scatters in and snaps into a row (bindDevPortal), hidden at rest */
.endmark i.x{opacity:0}
.err{padding:90px 8px;text-align:center;color:var(--ink-3);font-family:var(--serif);font-size:19px}

/* easter eggs */
@keyframes fall{to{transform:translateY(130px) rotate(var(--r));opacity:0}}
.conf{position:absolute;width:5px;height:8px;border-radius:1px;animation:fall .9s ease-in forwards;z-index:3}
@keyframes ringx{to{transform:translate(-50%,-50%) scale(5);opacity:0}}
.ring{position:absolute;width:26px;height:26px;border-radius:50%;border:2px solid var(--win);
  transform:translate(-50%,-50%) scale(.4);animation:ringx .75s ease-out forwards;z-index:1}
.shout{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(.5);opacity:0;
  font-family:var(--serif);font-size:22px;font-weight:700;z-index:5;background:#0d0d10;
  border:1px solid #e03a3e;border-radius:99px;padding:5px 15px;
  transition:all .34s cubic-bezier(.2,1.5,.4,1);white-space:nowrap;pointer-events:none}
.shout.go{opacity:1;transform:translate(-50%,-50%) scale(1)}
.shout .r{color:#e03a3e}.shout .c{color:#fff}
.whisper{font-size:11.5px;color:var(--ink-3);font-style:italic;height:0;overflow:hidden;
  transition:height .26s ease,opacity .26s ease;opacity:0}
.whisper.go{height:18px;opacity:1}
.stamp{position:absolute;right:4px;top:2px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--TECH);border:2px solid var(--TECH);border-radius:5px;padding:3px 7px;
  transform:rotate(-13deg) scale(1.8);opacity:0;transition:opacity .22s ease,transform .22s ease;pointer-events:none}
.stamp.go{opacity:.9;transform:rotate(-13deg) scale(1)}
.ball{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--TECH);
  border:1.5px solid var(--ink);pointer-events:none;z-index:6}

/* pulling past the top of the page and letting go: its own shuffle bag, own effects, fixed to the
   viewport rather than the masthead, since the masthead itself is what is being dragged */
@keyframes ptdust{to{transform:translateY(90px);opacity:0}}
.pt-dust{position:fixed;top:0;width:3px;height:3px;border-radius:50%;background:var(--ink-3);
  opacity:.7;z-index:6;pointer-events:none;animation:ptdust .9s ease-in forwards}
.pt-bar{position:fixed;left:0;right:0;top:0;height:3px;z-index:6;pointer-events:none}
.pt-grain{position:fixed;left:0;right:0;top:0;height:140px;z-index:6;opacity:0;pointer-events:none;
  background-image:radial-gradient(circle,var(--ink-3) .6px,transparent .7px);background-size:3px 3px;
  transition:opacity .12s}
.pt-seal{position:fixed;right:18px;top:calc(18px + env(safe-area-inset-top));z-index:6;
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--GOOD);
  border:1.5px solid var(--GOOD);border-radius:50%;width:46px;height:46px;display:flex;
  align-items:center;justify-content:center;text-align:center;pointer-events:none;
  transform:rotate(-10deg) scale(1.6);opacity:0;transition:opacity .2s,transform .2s}
.pt-corner{position:fixed;left:0;top:0;width:90px;height:90px;z-index:6;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 60%);
  clip-path:polygon(0 0,100% 0,0 100%);opacity:0;transform:scale(.7);transform-origin:top left;
  transition:opacity .3s,transform .3s}