/* Stretcher: TOM MODE, a.k.a. "TomSpace".
   Tom told the group the apps were shit, so this is Stretcher the way Tom sees it: his 2006 MySpace
   profile after a fight with PowerPoint WordArt, plus bits nicked off a 1999 GeoCities page and a
   Windows 95 box. (Same look as Mbao's Tom mode, now with added hamstrings.)
   Checkerboard + glitter, a marquee, Comic Sans, Impact WordArt, gel buttons, a disco ball, a
   dancing gymnast, a level counter, Tom's Top 8 (the focuses, plus Desk break as a flashing advert),
   MySpace moods on the time cards, a difficulty select for the holds, the ALPHA MALE sticker, a hit
   counter, Y2K. The home's cards fly in, PowerPoint-style, at every step.

   It is terrible ON PURPOSE, but it all still works:
   - real content sits on solid panels at 4.5:1 or better (the mess is in the decoration);
   - the PLAY screen is one big white "profile box": the phase is a full-width coloured bar you can
     read across a room, the photo sits in a glitter frame (decoration round it, never on it), the
     countdown is WordArt with a thick black edge, and the photo shrinks before anything overflows;
   - every tap target is 44px+, every focus gets a black-and-yellow ring;
   - every animation stops under prefers-reduced-motion (the marquee becomes a still banner);
   - joke text is CSS content with empty alt text ( / "" ) so screen readers skip it.
   Its effects script (look.js) adds Windows 95: a start-up splash the first time, message boxes
   that zoom open, an MSN nudge as a session starts, and balloons when you finish. Their classes
   all start .tfx- (bottom of this file); without the script none of them ever exist.
   CSP: no web fonts, no external images. The fonts are whatever tacky ones the phone already has:
   Comic Sans MS + Impact + Tahoma (Windows, Mac), Chalkboard SE + Futura Condensed (iPhone),
   Coming Soon ("casual") + Roboto Condensed (Android). */

:root {
  --pink: #ff00d4;          /* also Tom mode's theme-color */
  --pink-gel: #e600c0;
  --purple: #8a00ff;
  --violet: #6600cc;
  --lime: #ccff00;
  --cyan: #00ffff;
  --yellow: #ffff00;
  --amber: #ffcc00;
  --orange: #ff9900;
  --red: #cc0000;
  --blue: #0000ee;          /* 1998 hyperlink blue */
  --navy: #003399;          /* MySpace header blue */
  --ink: #000000;
  --paper: #ffffff;
  --cream: #ffffcc;
  --blush: #ffd6f5;
  --silver: #c0c0c0;
  --tip: #ffffe1;           /* Windows tooltip yellow */

  --comic: "Comic Sans MS", "Comic Sans", "Chalkboard SE", Chalkboard, "Comic Neue", casual, "Segoe Print", cursive;
  --impact: Impact, Haettenschweiler, "Futura-CondensedExtraBold", "Futura Condensed ExtraBold", "AvenirNextCondensed-Heavy", "Arial Narrow Bold", sans-serif-condensed, "Arial Black", sans-serif;
  --fancy: Papyrus, "Party LET", "Segoe Script", "Segoe Print", cursive;
  --times: "Times New Roman", Times, Georgia, serif;
  --mono: "Courier New", Courier, "Lucida Console", monospace;
  --win: Tahoma, "Microsoft Sans Serif", "MS Sans Serif", Geneva, Verdana, sans-serif;

  --mq: calc(32px + env(safe-area-inset-top));   /* the marquee strip across the top */
  --gutter: 16px;

  /* tiles and cursors, all inline (img-src allows data:) */
  --sparkles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cpath fill='%23fff' d='M16 5Q16 14 25 14Q16 14 16 23Q16 14 7 14Q16 14 16 5Z'/%3E%3Cpath fill='%23ff0' d='M60 24Q60 30 66 30Q60 30 60 36Q60 30 54 30Q60 30 60 24Z'/%3E%3Cpath fill='%230ff' d='M82 60Q82 70 92 70Q82 70 82 80Q82 70 72 70Q82 70 82 60Z'/%3E%3Cpath fill='%23cf0' d='M30 57Q30 62 35 62Q30 62 30 67Q30 62 25 62Q30 62 30 57Z'/%3E%3Cpath fill='%23fff' d='M52 82Q52 86 56 86Q52 86 52 90Q52 86 48 86Q52 86 52 82Z'/%3E%3Cpath fill='%23cf0' d='M88 8Q88 12 92 12Q88 12 88 16Q88 12 84 12Q88 12 88 8Z'/%3E%3Cpath fill='%23ff0' d='M8 82Q8 88 14 88Q8 88 8 94Q8 88 2 88Q8 88 8 82Z'/%3E%3Ccircle cx='40' cy='40' r='1.6' fill='%23fff'/%3E%3Ccircle cx='70' cy='48' r='1.2' fill='%23ff0'/%3E%3Ccircle cx='24' cy='36' r='1' fill='%230ff'/%3E%3Ccircle cx='66' cy='92' r='1.4' fill='%23fff'/%3E%3C/svg%3E");
  --glitter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath fill='%23fff' d='M6 2Q6 6 10 6Q6 6 6 10Q6 6 2 6Q6 6 6 2Z'/%3E%3Cpath fill='%23fff' d='M16 12Q16 15 19 15Q16 15 16 18Q16 15 13 15Q16 15 16 12Z'/%3E%3Ccircle cx='18' cy='4' r='1' fill='%23fff'/%3E%3Ccircle cx='5' cy='18' r='1' fill='%23fff'/%3E%3C/svg%3E");
  --flames: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='30' viewBox='0 0 48 30'%3E%3Cpath d='M0 30V18Q4 21 6 13T12 2Q12 11 16 14T22 8Q26 13 26 19Q29 11 34 4Q35 13 40 16Q44 13 44 6Q48 12 48 18V30Z' fill='%23ff2200'/%3E%3Cpath d='M0 30V23Q5 23 8 17Q10 21 14 21T22 14Q24 20 28 22Q32 17 36 12Q38 19 42 22Q45 21 48 23V30Z' fill='%23ff9900'/%3E%3Cpath d='M0 30V27Q6 27 10 22Q12 26 18 26T24 20Q26 26 32 27Q36 23 38 19Q40 25 44 27H48V30Z' fill='%23ffee00'/%3E%3C/svg%3E");
  --cur-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M2 2v22l6-6 4.5 10 4-1.8L12 16.5h8.5z' fill='%23ff00d4' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M25 2Q25 8 31 8Q25 8 25 14Q25 8 19 8Q25 8 25 2Z' fill='%23ff0' stroke='%23000' stroke-width='.8'/%3E%3Cpath d='M22 19Q22 22 25 22Q22 22 22 25Q22 22 19 22Q22 22 22 19Z' fill='%230ff' stroke='%23000' stroke-width='.6'/%3E%3C/svg%3E") 2 2, auto;
  --cur-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M2 2v22l6-6 4.5 10 4-1.8L12 16.5h8.5z' fill='%23cf0' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M25 2Q25 8 31 8Q25 8 25 14Q25 8 19 8Q25 8 25 2Z' fill='%23ff00d4' stroke='%23000' stroke-width='.8'/%3E%3Cpath d='M22 19Q22 22 25 22Q22 22 22 25Q22 22 19 22Q22 22 22 19Z' fill='%23fff' stroke='%23000' stroke-width='.6'/%3E%3C/svg%3E") 2 2, pointer;
  /* "~*~ hot stretch ~*~", lettered into the top of the photo's glitter frame (never on the photo) */
  --hot-stretch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='24' viewBox='0 0 240 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23ff00d4'/%3E%3Cstop offset='.5' stop-color='%236600cc'/%3E%3Cstop offset='1' stop-color='%23ff00d4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ctext x='120' y='18' text-anchor='middle' font-family='Comic Sans MS,Chalkboard SE,Comic Neue,cursive' font-size='17' font-weight='700' fill='url%28%23g%29'%3E~*~ hot stretch ~*~%3C/text%3E%3C/svg%3E");
  /* the TOM MODE! sticker's words: drawn, not typed, because the wordmark it sits on clips its
     background to text, and any real text in there would print through it as a ghost */
  --tom-sticker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cg font-family='Comic Sans MS,Chalkboard SE,Comic Neue,cursive' font-size='10.5' font-weight='700' fill='%23fff' text-anchor='middle'%3E%3Ctext x='32' y='22'%3ETOM%3C/text%3E%3Ctext x='32' y='34'%3EMODE!%3C/text%3E%3C/g%3E%3C/svg%3E");
  --starburst: polygon(50% 0%, 57.1% 9.6%, 67.1% 3%, 70.5% 14.5%, 82.1% 11.7%, 81.4% 23.6%, 93.3% 25%, 88.5% 36%, 99.2% 41.3%, 91% 50%, 99.2% 58.7%, 88.5% 64%, 93.3% 75%, 81.4% 76.4%, 82.1% 88.3%, 70.5% 85.5%, 67.1% 97%, 57.1% 90.4%, 50% 100%, 42.9% 90.4%, 32.9% 97%, 29.5% 85.5%, 17.9% 88.3%, 18.6% 76.4%, 6.7% 75%, 11.5% 64%, 0.8% 58.7%, 9% 50%, 0.8% 41.3%, 11.5% 36%, 6.7% 25%, 18.6% 23.6%, 17.9% 11.7%, 29.5% 14.5%, 32.9% 3%, 42.9% 9.6%);
  --star5: polygon(50% 0%, 61.8% 35.5%, 98% 35.5%, 68.5% 57.5%, 79.5% 92%, 50% 70.5%, 20.5% 92%, 31.5% 57.5%, 2% 35.5%, 38.2% 35.5%);
  --rainbow: linear-gradient(90deg, #ff0000, #ff9900, #ffff00, #33ff00, #00ffff, #3366ff, #cc00ff, #ff0000);
  --gloss: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.35) 49%, rgba(255,255,255,0) 50%);
  /* WordArt presets (fills) and the outline: four hard drop-shadows trace the glyphs */
  --wa-sunset: linear-gradient(180deg, #ffff00 12%, #ff9900 42%, #ff0066 70%, #cc33ff 100%);
  --wa-ocean: linear-gradient(180deg, #ffffff 8%, #00ffff 40%, #0099ff 70%, #3300cc 100%);
  --wa-fire: linear-gradient(180deg, #ffff66 8%, #ffcc00 34%, #ff5500 66%, #cc0000 100%);
  --wa-gum: linear-gradient(180deg, #ff00d4 15%, #9900ff 85%);
  --wordart-edge: drop-shadow(2px 0 0 #000) drop-shadow(-2px 0 0 #000) drop-shadow(0 2px 0 #000) drop-shadow(0 -2px 0 #000);
  --wordart-edge3: drop-shadow(3px 0 0 #000) drop-shadow(-3px 0 0 #000) drop-shadow(0 3px 0 #000) drop-shadow(0 -3px 0 #000);

  /* Windows 95, at phone scale (2px per 1995 pixel): the two-tone bevels, the title bar, the icons */
  --tfx-ready: 1;           /* look.js waits for this, so nothing it draws ever shows unstyled mid-switch */
  --tfx-frame: inset -2px -2px #000, inset 2px 2px #dfdfdf, inset -4px -4px #808080, inset 4px 4px #fff;
  --tfx-raised: inset -2px -2px #000, inset 2px 2px #fff, inset -4px -4px #808080, inset 4px 4px #dfdfdf;
  --tfx-pressed: inset -2px -2px #fff, inset 2px 2px #000, inset -4px -4px #dfdfdf, inset 4px 4px #808080;
  --tfx-field: inset -2px -2px #fff, inset 2px 2px #808080, inset -4px -4px #dfdfdf, inset 4px 4px #000;
  --tfx-caption: linear-gradient(90deg, #000080, #1084d0);
  --tfx-caption-off: linear-gradient(90deg, #808080, #b5b5b5);
  --tfx-i-err: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='17.5' cy='17.5' r='13.5' fill='%23000' opacity='.3'/%3E%3Ccircle cx='15.5' cy='15.5' r='13.5' fill='%23f00' stroke='%23800000' stroke-width='1.5'/%3E%3Cpath d='M10.5 10.5l10 10M20.5 10.5l-10 10' stroke='%23fff' stroke-width='3.4'/%3E%3C/svg%3E");
  --tfx-i-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M17.5 4.5L31.5 29.5h-28z' fill='%23000' opacity='.3'/%3E%3Cpath d='M15.5 2.5l14 25h-28z' fill='%23ff0' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M14 10h3l-.5 10h-2z'/%3E%3Cpath d='M14 21.5h3v3h-3z'/%3E%3C/svg%3E");
  --tfx-i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M17 3.5c7.2 0 13 4.7 13 10.5s-5.8 10.5-13 10.5q-1.5 0-3-.3L7.5 30l1.6-7.6C5.5 20.6 4 17.5 4 14 4 8.2 9.8 3.5 17 3.5z' fill='%23000' opacity='.3'/%3E%3Cpath d='M15 1.5c7.2 0 13 4.7 13 10.5s-5.8 10.5-13 10.5q-1.5 0-3-.3L5.5 28l1.6-7.6C3.5 18.6 2 15.5 2 12 2 6.2 7.8 1.5 15 1.5z' fill='%23fff' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3Ccircle cx='15' cy='6.4' r='1.9' fill='%2300f'/%3E%3Cpath d='M12.4 9.8h4.2v7.6h1.6v1.9h-6.4v-1.9h1.6v-5.7h-1z' fill='%2300f'/%3E%3C/svg%3E");
  --tfx-i-q: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M17 3.5c7.2 0 13 4.7 13 10.5s-5.8 10.5-13 10.5q-1.5 0-3-.3L7.5 30l1.6-7.6C5.5 20.6 4 17.5 4 14 4 8.2 9.8 3.5 17 3.5z' fill='%23000' opacity='.3'/%3E%3Cpath d='M15 1.5c7.2 0 13 4.7 13 10.5s-5.8 10.5-13 10.5q-1.5 0-3-.3L5.5 28l1.6-7.6C3.5 18.6 2 15.5 2 12 2 6.2 7.8 1.5 15 1.5z' fill='%23fff' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M11.8 8.4c0-2.1 1.5-3.5 3.3-3.5s3.4 1.3 3.4 3.2c0 2.7-3.4 2.9-3.4 5.7v.8' fill='none' stroke='%2300f' stroke-width='2.6'/%3E%3Cpath d='M13.8 16.2h2.6v2.6h-2.6z' fill='%2300f'/%3E%3C/svg%3E");
  /* the Office Assistant (1997, close enough): a paperclip with eyebrows */
  --tfx-i-clip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M11 13v12a5 5 0 0 0 10 0V8a3.5 3.5 0 0 0-7 0v15' fill='none' stroke='%23555' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='12.5' cy='10' r='3.4' fill='%23fff' stroke='%23000'/%3E%3Ccircle cx='20' cy='10' r='3.4' fill='%23fff' stroke='%23000'/%3E%3Ccircle cx='13.3' cy='10.6' r='1.4'/%3E%3Ccircle cx='20.8' cy='10.6' r='1.4'/%3E%3Cpath d='M9 4.8q3-2.2 6 0M17.5 4.2q3-1.6 5.6.8' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
  /* MSN Messenger's two little buddies */
  --tfx-i-msn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='11' cy='9' r='5' fill='%2333cc33' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M2 28c0-7 4-11 9-11s9 4 9 11z' fill='%2333cc33' stroke='%23000' stroke-width='1.4'/%3E%3Ccircle cx='21' cy='11' r='5' fill='%233399ff' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M12 30c0-7 4-11 9-11s9 4 9 11z' fill='%233399ff' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
  --tfx-g-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3.6C3 2 4.3 1 6 1s3 1 3 2.6c0 2-3 2.1-3 4v.6' fill='none' stroke='%23000' stroke-width='1.9'/%3E%3Cpath d='M5 9.4h2v2H5z'/%3E%3C/svg%3E");
  --tfx-g-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E");
  --tfx-g-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.8 2.8L10 3' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E");
  --tfx-g-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath d='M0 0h22v22H0z' fill='%23fff'/%3E%3Cpath d='M2 2h20v20H2z' fill='%23808080'/%3E%3Cpath d='M2 2h18v18H2z' fill='%23dfdfdf'/%3E%3Cpath d='M4 4h16v16H4z' fill='%23c0c0c0'/%3E%3Cpath d='M7.5 10h9L12 15z'/%3E%3C/svg%3E");
  /* the Start button's flag, in Tom's colours */
  --tfx-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20'%3E%3Cpath d='M3 3c3-1.6 5-1.6 8 0v6.6c-3-1.6-5-1.6-8 0z' fill='%23ff00d4' stroke='%23000' stroke-width='.9'/%3E%3Cpath d='M12 3c3 1.6 5 1.6 8 0v6.6c-3 1.6-5 1.6-8 0z' fill='%23ccff00' stroke='%23000' stroke-width='.9'/%3E%3Cpath d='M3 10.6c3-1.6 5-1.6 8 0v6.6c-3-1.6-5-1.6-8 0z' fill='%2300ffff' stroke='%23000' stroke-width='.9'/%3E%3Cpath d='M12 10.6c3 1.6 5 1.6 8 0v6.6c-3 1.6-5 1.6-8 0z' fill='%23ffff00' stroke='%23000' stroke-width='.9'/%3E%3C/svg%3E");
  color-scheme: light;
}

@property --tom-spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ---------- the mechanics (the same as every look: two fixed full-height screens) ---------- */

* { margin: 0; padding: 0; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
/* the tiled MySpace background: hot pink / purple checkerboard (+ a drifting glitter layer) */
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  background-color: var(--pink);
  background-image: conic-gradient(var(--pink) 25%, var(--purple) 0 50%, var(--pink) 0 75%, var(--purple) 0);
  background-size: 64px 64px;
}
body {
  position: relative; overflow: hidden;
  color: var(--ink); font: 400 1rem/1.4 var(--comic);
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  cursor: var(--cur-arrow);
}
input, select { user-select: text; -webkit-user-select: text; }
b { font-weight: 700; }
button, label, select { cursor: var(--cur-hand); }
button { font-family: inherit; color: var(--ink); touch-action: manipulation; }

/* glitter drifting over the checkerboard: one fixed layer, moved with transform (cheap) */
body::after {
  content: ""; position: fixed; inset: -96px; z-index: -1; pointer-events: none;
  background: var(--sparkles) 0 0 / 96px 96px;
  animation: tom-drift 9s linear infinite; will-change: transform;
}
@keyframes tom-drift { to { transform: translate3d(96px, 96px, 0); } }

/* the marquee, right across the top of every screen (wraps into a still banner under reduced
   motion). The screens start below it. */
body::before {
  content: "\2605   Welcome 2 TomSpace!!!   \2605   Tom reckons stretching is for people who can't game   \2605   Stretcher has 60 stretchez. Tom has done 0   \2605   no pain no gain (Tom: no gain)   \2605   thanx 4 the add!!!   \2605   sign my guestbook   \2605";
  content: "\2605   Welcome 2 TomSpace!!!   \2605   Tom reckons stretching is for people who can't game   \2605   Stretcher has 60 stretchez. Tom has done 0   \2605   no pain no gain (Tom: no gain)   \2605   thanx 4 the add!!!   \2605   sign my guestbook   \2605" / "";
  position: fixed; top: 0; left: 0; right: 0; z-index: 5; height: var(--mq); overflow: hidden; contain: strict;
  padding-top: env(safe-area-inset-top);
  white-space: pre; font: 700 0.88rem/28px var(--comic); color: var(--lime);
  background: var(--ink); border-bottom: 4px ridge var(--cyan);
  text-indent: 10px; pointer-events: none;
  animation: tom-marquee 30s linear -3s infinite; /* starts already on screen, not on a blank strip */
}
body:has(> #play:not([hidden]))::before {
  content: "\2605   ur stretchin on TomSpace!!!   \2605   hold it... hold it... hold it...   \2605   Tom reckons stretching is for people who can't game   \2605   Tom is in ur extended network (lying on the floor)   \2605   no pain no gain (Tom: no gain)   \2605";
  content: "\2605   ur stretchin on TomSpace!!!   \2605   hold it... hold it... hold it...   \2605   Tom reckons stretching is for people who can't game   \2605   Tom is in ur extended network (lying on the floor)   \2605   no pain no gain (Tom: no gain)   \2605" / "";
}
/* the joke measures ~212ch of Comic Sans: it scrolls all the way off, then comes straight back round */
@keyframes tom-marquee { from { text-indent: 100vw; } to { text-indent: -214ch; } }

/* Each screen is the full dynamic viewport below the marquee, capped in width so a desktop browser
   gets a phone-shaped column rather than cards stretched across 1920px. */
.screen {
  position: fixed;
  top: var(--mq); left: 0; right: 0;
  height: calc(100vh - var(--mq));
  height: calc(100dvh - var(--mq));
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  padding: 10px max(var(--gutter), env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
}
.topbar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; min-height: 56px; }
.scroll { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }

/* ---------- WordArt ---------- */
/* .logo-text is the app's "this is the logo treatment" hook: here that means WordArt. Each one gets
   its own preset below; this is the fallback for browsers without background-clip: text. */
.logo-text {
  font-family: var(--impact); font-weight: 700; font-synthesis: none; letter-spacing: 0.02em;
  color: var(--yellow); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--ink);
}

/* ---------- header: disco-ball logo, glitter WordArt, the TOM MODE! sticker ---------- */

/* the wordmark: glitter rainbow WordArt, wonky, with a disco ball for a logo */
.brand {
  position: relative; flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 2px 6px 4px 2px; font-size: 2.45rem; line-height: 1; transform: rotate(-4deg); transform-origin: 0 50%;
}
/* the ball: a disco ball whose mirror tiles slide round */
.brand::before {
  background:
    radial-gradient(circle at 34% 30%, #fff 0 7%, rgba(255,255,255,.55) 12%, rgba(255,255,255,0) 30%),
    radial-gradient(circle, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.45) 0 1px, rgba(0,0,0,0) 1px 6px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.45) 0 1px, rgba(0,0,0,0) 1px 6px),
    conic-gradient(from var(--tom-spin, 0deg), #ff00d4, #ffff00, #00ffff, #ccff00, #ff00d4);
  animation: tom-disco 1.4s linear infinite, tom-spin 3s linear infinite;
}
.brand::before {
  content: ""; flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
}
@keyframes tom-disco { to { background-position: 0 0, 0 0, 12px 0, 0 0, 0 0; } }
@keyframes tom-spin { to { --tom-spin: 360deg; } }
@keyframes tom-twinkle { from { transform: scale(.5) rotate(0deg); opacity: .4; } to { transform: scale(1.15) rotate(90deg); opacity: 1; } }
/* Web 2.0 logos had a "beta" sticker. This one has a worse one. */
.brand::after {
  content: "";
  position: absolute; left: 100%; top: -9px; margin-left: -4px; width: 64px; height: 48px;
  background: var(--tom-sticker) 50% 50% / 100% 100% no-repeat, var(--red);
  clip-path: var(--starburst); transform: rotate(16deg);
  animation: tom-throb .7s ease-in-out infinite alternate;
}
@keyframes tom-throb { from { transform: rotate(16deg) scale(.92); } to { transform: rotate(10deg) scale(1.08); } }

/* the settings cog: a Windows 95 button (pushed in while the panel is open) */
button.icon {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0 0 2px;
  font: 400 1.6rem/1 "Segoe UI Symbol", var(--win); color: var(--ink);
  background: var(--silver); border: 0; border-radius: 0; box-shadow: var(--tfx-raised), 4px 4px 0 var(--ink);
}
button.icon:active, button.icon[aria-expanded="true"] { box-shadow: var(--tfx-pressed), 4px 4px 0 var(--ink); padding: 3px 0 0 2px; }

/* ---------- settings: a Windows 95 Properties dialog ---------- */

.settings-panel {
  flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; padding: 4px 12px 14px;
  font: 400 0.95rem/1.3 var(--win); color: var(--ink);
  background: var(--silver); box-shadow: var(--tfx-frame), 6px 6px 0 var(--ink);
}
.settings-panel::before {
  content: "Stretcher Properties"; content: "Stretcher Properties" / "";
  display: block; height: 30px; margin: 0 -8px 6px; padding: 0 8px 0 34px; overflow: hidden; white-space: nowrap;
  font: 700 0.9rem/30px var(--win); color: var(--paper);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7.5' fill='%23c0c0c0' stroke='%23000' stroke-width='1.4' stroke-dasharray='3 1.6'/%3E%3Ccircle cx='10' cy='10' r='3' fill='%23ff00d4' stroke='%23000'/%3E%3C/svg%3E") 8px 50% / 20px 20px no-repeat, var(--tfx-caption);
}
.settings-panel label { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; }
.settings-panel select, .settings-panel input[type="number"] {
  appearance: none; -webkit-appearance: none; min-height: 44px; border: 0; border-radius: 0;
  font: 400 0.95rem/1.2 var(--win); color: var(--ink); background: var(--paper); box-shadow: var(--tfx-field);
}
.settings-panel select { padding: 6px 34px 6px 8px; background: var(--tfx-g-down) right 4px center / 24px 24px no-repeat, var(--paper); max-width: 62%; }
.settings-panel input[type="number"] { width: 76px; padding: 6px 8px; -moz-appearance: textfield; }
.settings-panel input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none; width: 26px; height: 26px; margin: 0 4px;
  background: var(--paper) 50% 50% / 16px 16px no-repeat; box-shadow: var(--tfx-field);
}
.settings-panel input[type="checkbox"]:checked { background-image: var(--tfx-g-tick); }
/* the privacy line: a Notepad README, so it reads as the real thing it is */
.fine-print {
  margin-top: 6px; padding: 8px 10px; font: 400 0.85rem/1.45 var(--mono); color: var(--ink);
  background: var(--paper); box-shadow: var(--tfx-field);
}
.fine-print b { color: var(--red); }

/* ---------- home: three questions, one step of cards at a time ---------- */
/* Step 1 is Tom's Top 8 (seven focuses, and an advert: Desk break), step 2 the old time cards (Tom's
   moods), step 3 a video game's difficulty select. Every card is a wonky gel button with a hard black
   shadow, and each step's cards fly in like a 2003 PowerPoint. Last session's pick on each step wears
   a yellow "Last time" sticker: a hint, so nothing looks pressed. */

#dashboard { display: flex; flex-direction: column; padding: 0 10px 12px 4px; }

/* the top: Back (a Windows 95 button), the level counter beside it, the question in WordArt below */
.hero {
  position: relative; flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 4px 2px 0;
}
.step-back {
  flex: none; min-width: 92px; min-height: 44px; margin: 0 0 4px; padding: 0 12px 2px; border: 0; border-radius: 0;
  font: 700 0.95rem/1 var(--win); color: var(--ink); background: var(--silver);
  box-shadow: var(--tfx-raised), 4px 4px 0 var(--ink);
}
.step-back:active { box-shadow: var(--tfx-pressed), 2px 2px 0 var(--ink); padding: 3px 10px 0 14px; }
/* the MySpace mood line, now a level counter: Tom treats everything as a game */
.hero-kicker {
  flex: 0 1 auto; min-width: 0; padding: 2px 9px;
  font: 700 0.84rem/1.35 var(--comic); color: var(--ink);
  background: var(--paper); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--cyan); transform: rotate(-1.5deg);
}
.hero-kicker::before { content: "Level "; content: "Level " / ""; color: var(--blue); }
/* with the blinking "Online Now!" on the first step (on the others, Back sits beside the counter) */
#home[data-step="focus"] .hero-kicker::after {
  content: "Online Now!"; content: "Online Now!" / "";
  display: inline-block; margin-left: 8px; padding: 0 6px; transform: rotate(4deg);
  font: 700 0.7rem/1.6 var(--comic); color: var(--ink); background: var(--lime); border: 2px solid var(--ink);
  animation: tom-blink 1s steps(1, end) infinite;
}
@keyframes tom-blink { 50% { opacity: 0; } }
.hero-title {
  flex: 1 0 100%; min-width: 0; padding: 0 52px 8px 4px; font-size: 2.1rem; line-height: 1.05; text-wrap: balance;
  transform: rotate(-3deg) skewX(-7deg); transform-origin: 0 50%;
}
/* the dancing gymnast (the dancing baby's sporty cousin), doing the cha-cha at the end of the question */
.hero::after {
  content: "\1F938"; content: "\1F938" / "";
  position: absolute; right: 4px; bottom: 4px; width: 50px; text-align: center; pointer-events: none;
  font: 400 34px/1 sans-serif; filter: drop-shadow(3px 3px 0 var(--ink));
  animation: tom-chacha 1.1s steps(1, end) infinite;
}
@keyframes tom-chacha {
  0%  { transform: translate(0, 0) rotate(-16deg); }
  25% { transform: translate(4px, -8px) rotate(6deg); }
  50% { transform: translate(0, 0) scaleX(-1) rotate(-16deg); }
  75% { transform: translate(-4px, -8px) scaleX(-1) rotate(6deg); }
}

/* the cards: two to a row (the time step's last one and the difficulties take a whole row), under a
   banner that's different every step, of course */
.cards {
  position: relative; flex-shrink: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 17px 14px; margin-top: 12px;
}
.cards::before {
  grid-column: 1 / -1; margin-bottom: -4px; padding: 2px 10px;
  font: 700 0.86rem/1.35 var(--comic); color: var(--ink); background: var(--orange);
  border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); transform: rotate(-0.8deg);
}
.focus-grid::before {
  content: "\2665  Tom's Top 8  \2665  (one's an advert)"; content: "\2665  Tom's Top 8  \2665  (one's an advert)" / "";
  background: var(--cyan); box-shadow: 4px 4px 0 var(--pink); transform: rotate(0.6deg);
}
.time-grid::before { content: "Stretcher has 60 stretchez!!1"; content: "Stretcher has 60 stretchez!!1" / ""; }
.hold-grid::before {
  content: "\2605  SELECT UR DIFFICULTY  \2605"; content: "\2605  SELECT UR DIFFICULTY  \2605" / "";
  text-align: center; font: 700 1rem/1.3 var(--impact); font-synthesis: none; letter-spacing: 0.1em;
  color: var(--lime); background: var(--ink); border-color: var(--lime); box-shadow: 4px 4px 0 var(--pink);
}

/* a card: a gel button, a bit wonky. Its tilt is `rotate`, so a press (transform) and the fly-in
   (translate, scale) never fight it. Colours go by position, the same on every step. */
.card {
  --gel-hi: #b3ffff; --gel: #00ccff; --gel-edge: #005f80;
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 0; min-height: 56px; margin: 0; padding: 12px 10px; text-align: center; line-height: 1.2;
  color: var(--ink); border: 3px solid var(--gel-edge); border-radius: 20px;
  background: var(--gloss), linear-gradient(180deg, var(--gel-hi), var(--gel));
  box-shadow: 0 5px 0 var(--gel-edge), 6px 10px 0 var(--ink);
  rotate: var(--tilt, 0deg);
  animation: tom-fly-l 0.42s cubic-bezier(.2, .8, .35, 1) var(--in, 0s) backwards;
}
.card:nth-child(even) { animation-name: tom-fly-r; }
.card:active { transform: translateY(4px); rotate: 0deg; box-shadow: 0 1px 0 var(--gel-edge), 3px 4px 0 var(--ink); }
.card:nth-child(1) { --tilt: -1.6deg; }
.card:nth-child(2) { --gel-hi: #ff8af0; --gel: var(--pink-gel); --gel-edge: #7a0066; --tilt: 1.4deg; --in: .05s; }
.card:nth-child(3) { --gel-hi: #ffff99; --gel: #ffd800; --gel-edge: #7a6a00; --tilt: 0.8deg; --in: .1s; }
.card:nth-child(4) { --gel-hi: #ffd27a; --gel: var(--orange); --gel-edge: #803d00; --tilt: -1.2deg; --in: .15s; }
.card:nth-child(5) { --gel-hi: #ecff66; --gel: #66dd00; --gel-edge: #2d6b00; --tilt: -0.5deg; --in: .2s; }
.card:nth-child(6) { --gel-hi: #ecd2ff; --gel: #b366ff; --gel-edge: #4b0080; --tilt: 1.1deg; --in: .25s; }
.card:nth-child(7) { --gel-hi: #ffc9c9; --gel: #ff5c5c; --gel-edge: #800000; --tilt: -0.9deg; --in: .3s; }
.card:nth-child(8) { --tilt: 0.7deg; --in: .35s; }
/* PowerPoint's "Fly In": the left column from the left, the right from the right; the advert spirals */
@keyframes tom-fly-l { from { translate: -110vw 0; } 72% { translate: 12px 0; } }
@keyframes tom-fly-r { from { translate: 110vw 0; } 72% { translate: -12px 0; } }
@keyframes tom-spiral { from { scale: 0.05; rotate: -720deg; } 78% { scale: 1.1; } }

/* "Last time": a yellow sticker on last session's pick (a hint: the card isn't pressed or chosen) */
.c-last {
  position: absolute; left: -5px; top: -14px; z-index: 1; pointer-events: none;
  padding: 0 7px; white-space: nowrap; rotate: -6deg;
  font: 700 0.72rem/1.6 var(--comic); color: var(--ink); text-shadow: none; letter-spacing: 0.01em;
  background: var(--yellow); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
}
.c-last::before { content: "\2605  "; content: "\2605  " / ""; white-space: pre; color: var(--red); }

/* ----- step 1: Tom's Top 8. Every friend gets a profile pic (an emoji sticker on the corner) ----- */
.focus-card { gap: 3px; padding: 13px 10px 12px; }
.focus-card .c-name { font: 700 1.02rem/1.15 var(--comic); text-shadow: 0 1px 0 rgba(255,255,255,.7); }
.focus-card .c-note { font: 400 0.8rem/1.25 var(--comic); }
.focus-card::after {
  position: absolute; top: -14px; right: -4px; pointer-events: none; rotate: 12deg;
  font: 400 25px/1 sans-serif; filter: drop-shadow(2px 2px 0 var(--ink));
}
.focus-card:nth-child(1)::after { content: "\1F4AF"; content: "\1F4AF" / ""; }   /* All over: 100 */
.focus-card:nth-child(2)::after { content: "\1F483"; content: "\1F483" / ""; }   /* Hips: hips don't lie */
.focus-card:nth-child(3)::after { content: "\1F351"; content: "\1F351" / ""; }   /* Posterior chain: a peach, obviously */
.focus-card:nth-child(4)::after { content: "\1F4BB"; content: "\1F4BB" / ""; }   /* Desk work relief */
.focus-card:nth-child(5)::after { content: "\1F3C3"; content: "\1F3C3" / ""; }   /* Runners */
.focus-card:nth-child(6)::after { content: "\1F519"; content: "\1F519" / ""; }   /* Lower back: BACK (Tom's best joke) */
.focus-card:nth-child(7)::after { content: "\1F992"; content: "\1F992" / ""; }   /* Shoulders & neck: a giraffe */

/* the 8th friend is an advert: Desk break, five minutes, starts the moment you tap it. A yellow
   coupon in a red frame, a flashing FREE OFFER strip across the top, a CLICK HERE link bar across
   the bottom and a NEW! starburst on the corner */
.desk-card {
  gap: 3px; padding: 0 8px; border: 3px dashed var(--ink); border-radius: 3px;
  background: repeating-linear-gradient(-45deg, #ffff70 0 9px, #ffee00 9px 18px);
  box-shadow: 0 0 0 4px var(--red), 7px 10px 0 4px var(--ink);
}
.cards .desk-card { animation-name: tom-spiral; animation-duration: 0.6s; } /* (beats the even cards' fly-in) */
.desk-card:active { box-shadow: 0 0 0 4px var(--red), 3px 4px 0 4px var(--ink); }
.desk-card::before {
  content: "\2605 FREE OFFER \2605"; content: "\2605 FREE OFFER \2605" / "";
  align-self: stretch; margin: 0 -8px auto; padding: 3px 4px 2px;
  font: 700 0.82rem/1.2 var(--impact); font-synthesis: none; letter-spacing: 0.1em;
  color: var(--yellow); background: var(--red); border-bottom: 3px solid var(--ink);
  animation: tom-swap 0.9s steps(1, end) infinite;
}
.desk-card .c-name {
  margin-top: 3px; font: 700 1.25rem/1.05 var(--impact); font-synthesis: none; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--red); text-shadow: 2px 2px 0 var(--paper);
}
.desk-card .c-note { font: 400 0.74rem/1.25 var(--comic); }
.desk-card .c-tag {
  align-self: stretch; margin: auto -8px 0; padding: 3px 4px 4px; border-top: 3px solid var(--ink);
  font: 700 0.76rem/1.25 var(--comic); color: var(--paper); background: var(--blue); text-decoration: underline;
}
.desk-card .c-tag::before { content: "\25B6  "; content: "\25B6  " / ""; white-space: pre; }
.desk-card::after {
  content: "NEW!"; content: "NEW!" / "";
  position: absolute; top: -20px; right: -14px; width: 52px; height: 42px; display: grid; place-items: center; pointer-events: none;
  font: 700 0.8rem/1 var(--impact); font-synthesis: none; letter-spacing: 0.04em; color: var(--yellow);
  background: var(--red); clip-path: var(--starburst);
  animation: tom-throb .7s ease-in-out infinite alternate;
}

/* ----- step 2: the lengths, Tom's moods. The 30 takes the bottom row and the ALPHA MALE sticker,
   the 5 is Tom's personal best ----- */
.time-grid { flex: 1; grid-template-rows: auto repeat(3, minmax(0, 1fr)); gap: 15px 14px; margin-top: 14px; max-height: 580px; min-height: 340px; }
.time-grid .time-card:last-child { grid-column: 1 / -1; }
.time-card { gap: 8px; padding: 6px 6px 8px; line-height: 1; border-radius: 22px; }
.time-card .t-num {
  font: 700 2.9rem/0.95 var(--impact); font-synthesis: none; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums; padding: 0 6px 3px 2px;
  color: var(--paper); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--ink);
}
.time-card .t-unit { font: 700 1.05rem/1 var(--comic); letter-spacing: 0; margin-left: 5px; color: var(--paper); -webkit-text-fill-color: var(--paper); }
/* the tag is the card's MySpace mood (the little blue "mood" tab is stuck on its corner) */
.time-card .t-tag {
  position: relative; display: block; max-width: 100%; padding: 2px 7px; font: 700 0.76rem/1.3 var(--comic); color: var(--ink);
  background: var(--paper); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
}
.time-card .t-tag::before {
  content: "mood:"; content: "mood:" / "";
  position: absolute; left: -8px; top: -11px; padding: 0 4px; transform: rotate(-8deg);
  font: 700 0.58rem/1.45 var(--comic); color: var(--paper); background: var(--blue);
}
.time-card:nth-child(1) .t-tag::after { content: " \26A1"; content: " \26A1" / ""; }
.time-card:nth-child(2) .t-tag::after { content: " \1F60E"; content: " \1F60E" / ""; }
.time-card:nth-child(3) .t-tag::after { content: " \1F485"; content: " \1F485" / ""; }
.time-card:nth-child(4) .t-tag::after { content: " \1F913"; content: " \1F913" / ""; }
.time-card:nth-child(5) .t-tag::after { content: " \1F4AA"; content: " \1F4AA" / ""; }
/* stickers. Everything was in beta in 2006. Not the big one: George's orders */
.time-card:first-child::after, .time-card:last-child::after,
.hold-card:first-child::after, .hold-card:last-child::after {
  position: absolute; top: -12px; right: 10px; padding: 0 6px; white-space: nowrap; pointer-events: none;
  font: 700 0.66rem/1.5 var(--comic); letter-spacing: 0.06em; color: var(--paper); text-shadow: none;
  background: var(--red); border: 2px solid var(--paper); box-shadow: 2px 2px 0 var(--ink); transform: rotate(8deg);
}
.time-card:first-child::after { content: "Tom's PB!!"; content: "Tom's PB!!" / ""; background: var(--violet); transform: rotate(-7deg); }
.time-card:last-child::after { content: "ALPHA MALE"; content: "ALPHA MALE" / ""; right: 18px; top: -13px; font-size: 0.72rem; }

/* ----- step 3: the hold lengths, as a difficulty select. Green, yellow, red, with stars ----- */
.hold-grid { grid-template-columns: minmax(0, 1fr); gap: 17px; }
.hold-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "secs name" "secs note";
  align-items: center; column-gap: 12px; row-gap: 2px; min-height: 84px; padding: 8px 16px 10px 10px; text-align: left; border-radius: 22px;
}
.hold-card:nth-child(1) { --gel-hi: #ecff66; --gel: #66dd00; --gel-edge: #2d6b00; }
.hold-card:nth-child(2) { --gel-hi: #ffff99; --gel: #ffd800; --gel-edge: #7a6a00; }
.hold-card:nth-child(3) { --gel-hi: #ffc9c9; --gel: #ff5c5c; --gel-edge: #800000; }
.hold-card .c-secs {
  grid-area: secs; min-width: 2.25em; padding: 0 6px 4px 2px; text-align: center;
  font: 700 2.9rem/0.95 var(--impact); font-synthesis: none; letter-spacing: 0.01em; font-variant-numeric: tabular-nums;
  color: var(--paper); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--ink);
}
.hold-card .c-name { grid-area: name; align-self: end; font: 700 1.3rem/1.1 var(--comic); text-shadow: 0 1px 0 rgba(255,255,255,.7); }
.hold-card .c-name::after { white-space: pre; letter-spacing: 0.04em; font-family: var(--win); }
.hold-card:nth-child(1) .c-name::after { content: "  \2605\2606\2606"; content: "  \2605\2606\2606" / ""; }
.hold-card:nth-child(2) .c-name::after { content: "  \2605\2605\2606"; content: "  \2605\2605\2606" / ""; }
.hold-card:nth-child(3) .c-name::after { content: "  \2605\2605\2605"; content: "  \2605\2605\2605" / ""; }
.hold-card .c-note { grid-area: note; align-self: start; font: 400 0.86rem/1.3 var(--comic); }
.hold-card:first-child::after { content: "Tom's level"; content: "Tom's level" / ""; background: var(--violet); transform: rotate(5deg); }
.hold-card:last-child::after { content: "HARD MODE"; content: "HARD MODE" / ""; right: 18px; top: -13px; font-size: 0.72rem; background: var(--ink); color: var(--lime); border-color: var(--lime); }

/* ---------- the look switch: the Windows 95 taskbar (message boxes zoom out of it) ---------- */

.look-pick {
  position: relative; flex-shrink: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 22px -2px 4px; padding: 5px 6px; background: var(--silver);
  box-shadow: inset 0 2px 0 #fff, inset 0 -2px 0 #808080, 4px 4px 0 var(--ink);
}
/* the profile's autoplay song, straddling its top edge */
.look-pick::before {
  content: "\266B  now playing: Mardy Bum (autoplay, soz) \266B"; content: "\266B  now playing: Mardy Bum (autoplay, soz) \266B" / "";
  position: absolute; left: 10px; top: -13px; white-space: pre; transform: rotate(-1.5deg); pointer-events: none;
  padding: 0 8px; font: 700 0.62rem/1.55 var(--comic); color: var(--lime); background: var(--ink); border: 2px solid var(--lime);
}
/* the label is where the Start button would be (just the flag and the word: it isn't a button) */
.look-label {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 8px 0 4px; margin-right: 2px;
  font: 700 0.95rem/1 var(--win); color: var(--ink);
}
.look-label::before { content: ""; width: 24px; height: 22px; background: var(--tfx-flag) 50% 50% / contain no-repeat; }
.look-opt {
  flex: 1 1 auto; min-height: 44px; margin: 0; padding: 0 10px; border: 0; border-radius: 0;
  font: 400 0.92rem/1 var(--win); color: var(--ink); background: var(--silver); box-shadow: var(--tfx-raised);
}
.look-opt:active { box-shadow: var(--tfx-pressed); padding: 2px 8px 0 12px; }
/* the look you're on: its taskbar button is pushed in (and checkered, like the active window's) */
.look-opt[aria-pressed="true"] {
  font-weight: 700; box-shadow: var(--tfx-pressed);
  background: repeating-conic-gradient(#fff 0 25%, #dfdfdf 0 50%) 0 0 / 4px 4px;
}
.look-night { font-family: var(--times); }
.look-frizzy { font-style: italic; }
.look-tom { font-family: var(--impact); letter-spacing: 0.04em; }

/* below the fold (scroll for it): the hit counter, the excuses and the under construction sign.
   The negative margin means it takes no room from the cards, it just sits past the end. */
#dashboard::after {
  content: "you are visitor no. 0000052\A best viewed in Netscape 4.0 at\00A0 800\00D7 600\A\00A9  2006 TomSpace. All wrongs reserved.\A\1F6A7  UNDER CONSTRUCTION  \1F6A7";
  content: "you are visitor no. 0000052\A best viewed in Netscape 4.0 at\00A0 800\00D7 600\A\00A9  2006 TomSpace. All wrongs reserved.\A\1F6A7  UNDER CONSTRUCTION  \1F6A7" / "";
  flex: none; height: 116px; margin: 26px 2px -128px; padding: 9px 8px; white-space: pre-wrap; text-align: center;
  font: 700 0.8rem/1.6 var(--mono); color: var(--lime); background: var(--ink); border: 4px ridge var(--amber);
}

/* ---------- play ---------- */

#play { gap: 8px; }
/* the top: a MySpace header bar, with a Windows close box and a hit counter for the time left */
.play-top {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 5px 6px;
  background: var(--navy); border: 3px ridge var(--cyan); box-shadow: 4px 4px 0 var(--ink);
}
.play-top .icon { width: 44px; height: 44px; font-size: 1.25rem; box-shadow: var(--tfx-raised); }
.play-top .icon:active { box-shadow: var(--tfx-pressed); }
/* "Runners' stretches · 30 min · Medium holds" needs two lines on a phone */
.play-top .routine-title {
  flex: 1; min-width: 0; font: 700 0.95rem/1.2 var(--comic); color: var(--yellow);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
}
.play-top .routine-title::before { content: "\266B "; content: "\266B " / ""; color: var(--cyan); }
/* the hit counter */
.play-top .total-remaining {
  flex: none; padding: 3px 8px; font: 700 1.15rem/1.2 var(--mono); letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums; color: var(--lime); background: var(--ink); border: 3px inset #666;
}

/* the stretch itself: one big white profile box. The phase is its header bar, "Next up" its footer,
   and everything else is in the middle. */
.play-main {
  position: relative; flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 0 10px; text-align: center;
  background: var(--paper); border: 5px ridge var(--pink); box-shadow: 7px 7px 0 var(--ink);
}
/* the phase is a full-width bar whose colour you can read across a room:
   get ready = red (flashing), hold = black + lime, lower = navy + cyan, up = lime, paused = grey */
.phase-label {
  align-self: stretch; flex: none; margin: 0 -10px auto; min-height: 36px; padding: 4px 10px;
  font: 700 1.35rem/28px var(--impact); font-synthesis: none; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--yellow); background: var(--red); border-bottom: 4px solid var(--ink);
  animation: tom-swap 0.9s steps(1, end) infinite;
}
@keyframes tom-swap { 50% { color: var(--red); background-color: var(--yellow); } }
.phase-label:empty { visibility: hidden; }
.phase-label.holding { color: var(--lime); background: var(--ink); border-bottom-color: var(--lime); animation: none; }
.phase-label.holding::before, .phase-label.holding::after { content: "\2665  "; content: "\2665  " / ""; white-space: pre; color: var(--pink); }
.phase-label.holding::after { content: "  \2665"; content: "  \2665" / ""; }
.phase-label.lowering { color: var(--cyan); background: var(--navy); animation: none; }
.phase-label.up { color: var(--ink); background: var(--lime); animation: none; }
/* paused: the app is "Not Responding", obviously */
#play:has(#btnPlayPause[aria-label="Resume"]) .phase-label { color: var(--ink); background: var(--silver); animation: none; }
#play:has(#btnPlayPause[aria-label="Resume"]) .phase-label::after {
  content: " (Not Responding)"; content: " (Not Responding)" / "";
  font: 400 0.8rem/1 var(--win); letter-spacing: 0; text-transform: none; color: var(--ink);
}

.stretch-title {
  padding: 6px 8px 2px; font: italic 700 clamp(22px, 6.4vmin, 34px)/1.12 var(--comic);
  color: var(--violet); -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--cyan);
}
/* Left / Right: a sticker */
.side-chip {
  display: inline-block; margin-top: 4px; padding: 1px 16px 2px; visibility: hidden;
  font: 700 clamp(15px, 4.4vmin, 19px)/1.3 var(--impact); font-synthesis: none; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--yellow); background: var(--red); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-4deg);
}
.side-chip.visible { visibility: visible; }
/* the photo: a glitter frame with the caption lettered into its top. The picture itself is never
   covered. It is the one thing that shrinks when a long name + a note make the box too full. */
.stretch-img {
  flex: 0 1 auto; min-height: 96px;
  max-width: min(90%, 350px);
  max-height: 30vh;
  max-height: 30dvh;
  margin: 10px 0 6px; padding: 24px 0 0; object-fit: contain;
  border: 7px solid transparent;
  background:
    var(--hot-stretch) 50% 2px / min(220px, 94%) auto no-repeat padding-box,
    linear-gradient(var(--paper), var(--paper)) padding-box,
    var(--glitter) 0 0 / 22px 22px border-box,
    var(--rainbow) 0 0 / 200% 100% border-box;
  box-shadow: 0 0 0 3px var(--ink), 7px 7px 0 3px var(--ink);
  display: none;
  animation: tom-frame 1.6s steps(4) infinite;
}
.stretch-img.visible { display: block; }
@keyframes tom-frame { to { background-position: 50% 2px, 0 0, 22px 22px, 200% 0; } }

/* the big number is WordArt: Impact, a "sunset" fill, a thick black edge and a 3D bit */
.countdown {
  font-size: clamp(84px, min(32vmin, 20vh), 220px); line-height: 1; padding: 0 0.12em 0.04em 0.06em; margin: 0;
  font-variant-numeric: tabular-nums;
}
.countdown.reps { font-size: clamp(60px, min(22vmin, 14vh), 150px); }
.countdown.reps .of { font-size: 0.45em; letter-spacing: 0.04em; }
.countdown.lead { color: var(--cyan); }
.countdown.ending { color: var(--orange); animation: tom-throb2 0.5s ease-in-out infinite alternate; }
@keyframes tom-throb2 { from { transform: scale(.94) rotate(-2deg); } to { transform: scale(1.06) rotate(2deg); } }

/* rep cadence: a Windows 95 progress bar. Navy blocks fill as you lower; lime drains as you come up */
.cadence {
  width: min(80%, 300px); height: 22px; margin: 8px auto 0; padding: 4px; overflow: hidden;
  background: var(--paper); box-shadow: var(--tfx-field);
}
.cadence-fill { height: 100%; width: 0%; background: repeating-linear-gradient(90deg, #000080 0 10px, transparent 10px 13px); }
.cadence-fill.up { background: repeating-linear-gradient(90deg, #339900 0 10px, transparent 10px 13px); }

/* the step's note: the Office Assistant says it, in a tooltip-yellow balloon */
.step-note {
  position: relative; max-width: min(96%, 460px); margin: 10px auto 0; padding: 8px 10px 8px 48px;
  font: 400 clamp(13px, 3.5vmin, 15.5px)/1.35 var(--win); color: var(--ink); text-align: left;
  background: var(--tfx-i-clip) 6px 50% / 34px 34px no-repeat, var(--tip);
  border: 2px solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink);
}
.intensity {
  max-width: min(94%, 460px); margin-top: 6px;
  font: italic 700 clamp(12px, 3.2vmin, 14px)/1.3 var(--comic); color: var(--red);
}
/* no photo (the desk-break stretches): the Office Assistant takes over. The note turns into his big
   speech balloon, with his famous opening line and a sticker owning up about the photo, and the
   countdown gets the photo's room */
.stretch-img:not(.visible) ~ .countdown { font-size: clamp(96px, min(38vmin, 24vh), 240px); }
.stretch-img:not(.visible) ~ .step-note {
  max-width: min(100%, 440px); margin: 22px auto 0; padding: 12px 14px 14px 80px;
  font-size: clamp(15px, 4.2vmin, 18px); line-height: 1.4;
  background: var(--tfx-i-clip) 6px 50% / 66px 66px no-repeat, var(--tip);
  border-width: 3px; border-radius: 18px; box-shadow: 5px 5px 0 var(--ink);
}
.stretch-img:not(.visible) ~ .step-note::before {
  content: "It looks like you're stretching. Would you like help?"; content: "It looks like you're stretching. Would you like help?" / "";
  display: block; margin-bottom: 6px; font: 700 0.92em/1.3 var(--comic); color: var(--navy);
}
.stretch-img:not(.visible) ~ .step-note::after {
  content: "\1F4F7  no photo: Tom sat on the camera"; content: "\1F4F7  no photo: Tom sat on the camera" / "";
  position: absolute; right: 10px; top: -15px; padding: 0 7px; white-space: pre; pointer-events: none; transform: rotate(3deg);
  font: 700 0.68rem/1.6 var(--comic); color: var(--paper); background: var(--violet); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
}
/* Next up: the box's footer bar */
.next-up {
  align-self: stretch; flex: none; margin: auto -10px 0; padding: 0 10px; height: 32px;
  font: 400 clamp(13px, 3.9vmin, 16px)/32px var(--comic); color: var(--paper); background: var(--navy);
  border-top: 4px solid var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.next-up b { font-weight: 700; color: var(--yellow); }

/* controls: Windows 98 buttons, and one big pink gel for the one that matters (with the sticker) */
.play-controls { display: flex; justify-content: center; align-items: center; gap: 12px; flex-shrink: 0; padding: 6px 0 4px; }
.play-controls button {
  min-width: 52px; height: 52px; margin: 0; padding: 0 12px; border: 0; border-radius: 0;
  font: 400 1.35rem/1 "Segoe UI Symbol", var(--win); color: var(--ink);
  background: var(--silver); box-shadow: var(--tfx-raised), 4px 4px 0 var(--ink);
}
.play-controls button:active { box-shadow: var(--tfx-pressed), 2px 2px 0 var(--ink); padding: 3px 10px 0 14px; }
.play-controls .big {
  position: relative; min-width: 104px; height: 62px; padding: 0 22px; font-size: 1.8rem;
  border: 3px solid #7a0066; border-radius: 999px; color: var(--ink);
  background: var(--gloss), linear-gradient(180deg, #ff8af0, var(--pink-gel));
  box-shadow: 0 5px 0 #7a0066, 5px 9px 0 var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.play-controls .big:active { transform: translateY(4px); padding: 0 22px; box-shadow: 0 1px 0 #7a0066, 3px 4px 0 var(--ink); }
.play-controls .big::after {
  content: "ALPHA MALE"; content: "ALPHA MALE" / "";
  position: absolute; right: -8px; top: -13px; padding: 0 6px; white-space: nowrap; pointer-events: none; transform: rotate(8deg);
  font: 700 0.62rem/1.5 var(--comic); letter-spacing: 0.06em; color: var(--paper); text-shadow: none;
  background: var(--red); border: 2px solid var(--paper); box-shadow: 2px 2px 0 var(--ink);
}
/* overall progress: the Windows 95 copy dialog's bar */
.progress-track {
  flex-shrink: 0; height: 24px; padding: 4px; overflow: hidden; margin-right: 4px;
  background: var(--paper); box-shadow: var(--tfx-field), 4px 4px 0 var(--ink);
}
.progress-fill {
  height: 100%; width: 0%;
  background: repeating-linear-gradient(90deg, #000080 0 11px, transparent 11px 14px);
  transition: width 0.15s linear;
}
/* the keys, on a Windows 95 status bar (solid, so it reads over the checkerboard) */
.kbd-hint {
  flex-shrink: 0; padding: 2px 8px; margin-right: 4px; font: 400 0.8rem/1.6 var(--win); color: var(--ink); text-align: center;
  background: var(--silver); box-shadow: inset -1px -1px #fff, inset 1px 1px #808080, 4px 4px 0 var(--ink);
}
.kbd-hint kbd {
  display: inline-block; padding: 0 6px; font: 700 0.75rem/1.5 var(--win); color: var(--ink);
  background: var(--silver); box-shadow: inset -1px -1px #000, inset 1px 1px #fff, inset -2px -2px #808080;
}
/* Keyboard shortcuts mean nothing on a phone. */
@media (hover: none) { .kbd-hint { display: none; } }

/* ---------- finished: the pop-up ad you actually wanted ---------- */

.play-main:has(> .finish-box) { background: none; border-color: transparent; box-shadow: none; }
.finish-box {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: min(100%, 360px); padding: 0 16px 0;
  background: var(--paper); border: 6px groove var(--pink); box-shadow: 8px 8px 0 var(--ink);
  transform: rotate(-1deg);
}
.finish-box::before {
  content: "\2605  CONGRATULATIONS!!!  \2605"; content: "\2605  CONGRATULATIONS!!!  \2605" / "";
  align-self: stretch; margin: 0 -16px 2px; padding: 8px 6px 7px; text-align: center; white-space: pre;
  font: 700 1.25rem/1.15 var(--impact); font-synthesis: none; letter-spacing: 0.06em;
  color: var(--yellow); background: var(--red); border-bottom: 3px solid var(--yellow);
  animation: tom-swap 0.9s steps(1, end) infinite;
}
/* a strip of clip-art flames along the bottom edge */
.finish-box::after {
  content: ""; align-self: stretch; height: 30px; margin: 4px -16px 0;
  background: var(--flames) 0 100% / 48px 30px repeat-x;
  animation: tom-flicker 0.8s steps(4) infinite;
}
@keyframes tom-flicker { to { background-position: 48px 100%; } }
.finish-box .big-check { font-size: 58px; line-height: 1.1; animation: tom-bounce 0.6s ease-in-out infinite alternate; }
@keyframes tom-bounce { from { transform: translateY(0) rotate(-8deg); } to { transform: translateY(-8px) rotate(8deg); } }
.finish-box h2 { font-size: 3.6rem; line-height: 1; padding: 0 8px 8px 4px; transform: rotate(-3deg) skewX(-6deg); }
.finish-box .meta { font: 700 1.05rem/1.3 var(--comic); color: var(--ink); }
.finish-box .meta::after { content: "~ ur a legend x ~"; content: "~ ur a legend x ~" / ""; display: block; font: 400 1.15rem/1.4 var(--fancy); color: var(--violet); }
.finish-box .btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 6px; }
.finish-box .btns button {
  position: relative; min-height: 52px; margin: 0; padding: 0 16px; border: 0; border-radius: 0;
  font: 700 1.05rem/1 var(--comic); color: var(--ink); background: var(--silver); box-shadow: var(--tfx-raised), 4px 4px 0 var(--ink);
}
.finish-box .btns button:active { box-shadow: var(--tfx-pressed), 2px 2px 0 var(--ink); }
.finish-box .btns .primary {
  border: 3px solid #0b5e00; border-radius: 999px;
  background: var(--gloss), linear-gradient(180deg, #ecff66, #66dd00);
  box-shadow: 0 5px 0 #0b5e00, 5px 9px 0 var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.finish-box .btns .primary:active { transform: translateY(4px); box-shadow: 0 1px 0 #0b5e00, 3px 4px 0 var(--ink); }
/* when you're done, the ALPHA MALE sticker moves to "Another one" (the play button does nothing now) */
.finish-box .btns .primary::after {
  content: "ALPHA MALE"; content: "ALPHA MALE" / "";
  position: absolute; right: -6px; top: -13px; padding: 0 6px; white-space: nowrap; pointer-events: none; transform: rotate(8deg);
  font: 700 0.62rem/1.5 var(--comic); letter-spacing: 0.06em; color: var(--paper); text-shadow: none;
  background: var(--red); border: 2px solid var(--paper); box-shadow: 2px 2px 0 var(--ink);
}
#play:has(.finish-box) .play-controls .big::after { content: none; }

/* WordArt fills, where the browser can clip a background to text */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand, .hero-title, .countdown, .finish-box h2, .time-card .t-num, .hold-card .c-secs {
    -webkit-text-stroke: 0; text-shadow: none; color: transparent; -webkit-text-fill-color: transparent;
    -webkit-background-clip: text; background-clip: text;
  }
  /* "glitter rainbow", shimmering */
  .brand {
    background-image: var(--glitter), linear-gradient(90deg, #ff00d4, #ffff00 25%, #00ffff 50%, #ccff00 75%, #ff00d4);
    background-size: 22px 22px, 200% 100%;
    filter: var(--wordart-edge) drop-shadow(3px 3px 0 #fff) drop-shadow(2px 2px 0 #000);
    animation: tom-shimmer 3s linear infinite;
  }
  /* "sunset" preset, slanted, with a cyan 3D bit */
  .hero-title { background-image: var(--wa-sunset); filter: var(--wordart-edge) drop-shadow(4px 4px 0 #00ffff) drop-shadow(2px 2px 0 #000); }
  .time-card .t-num, .hold-card .c-secs { background-image: linear-gradient(180deg, #fff 30%, #ffff66 31%, #ffcc00 100%); filter: var(--wordart-edge) drop-shadow(3px 3px 0 #000); }
  /* the countdown: thick edge so it reads from the floor */
  .countdown { background-image: var(--wa-sunset); filter: var(--wordart-edge3) drop-shadow(6px 6px 0 #00ffff) drop-shadow(2px 2px 0 #000); }
  .countdown.lead { background-image: var(--wa-ocean); filter: var(--wordart-edge3) drop-shadow(6px 6px 0 #ff00d4) drop-shadow(2px 2px 0 #000); }
  .countdown.ending { background-image: var(--wa-fire); filter: var(--wordart-edge3) drop-shadow(6px 6px 0 #ffff00) drop-shadow(2px 2px 0 #000); }
  /* "rainbow" preset */
  .finish-box h2 {
    background-image: var(--glitter), var(--rainbow); background-size: 22px 22px, 200% 100%;
    filter: var(--wordart-edge3) drop-shadow(5px 5px 0 #ff00d4) drop-shadow(2px 2px 0 #000);
    animation: tom-shimmer 3s linear infinite;
  }
}
@keyframes tom-shimmer { to { background-position: 22px 22px, 200% 0; } }

/* ---------- Windows 95 (made by look.js; none of this exists without it) ---------- */

/* a message box: fixed on the screen, over the page but never over the marquee */
/* (on a phone it's narrow enough to sit left of the cog, over the header) */
.tfx-win {
  position: fixed; left: 0; top: 0; z-index: 40;
  width: min(300px, calc(100vw - 92px)); padding: 4px;
  font: 400 0.92rem/1.3 var(--win); color: var(--ink); text-align: left;
  background: var(--silver); box-shadow: var(--tfx-frame), 6px 6px 0 var(--ink);
  cursor: var(--cur-arrow); touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
.tfx-hidden { visibility: hidden; }  /* measured and placed, waiting for its zoom */
/* the title bar: drag it to move the window (an outline follows, the window jumps there when you let go) */
.tfx-title {
  display: flex; align-items: center; gap: 0; height: 30px; padding: 0 3px 0 8px;
  font: 700 0.86rem/1 var(--win); color: var(--paper); background: var(--tfx-caption);
  touch-action: none;
}
.tfx-win:not(.tfx-active) .tfx-title { color: var(--silver); background: var(--tfx-caption-off); }  /* the window behind */
.tfx-title-text { flex: 1; min-width: 0; padding-right: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tfx-cap {
  position: relative; flex: none; width: 26px; height: 22px; margin: 0; padding: 0; border: 0; border-radius: 0;
  appearance: none; -webkit-appearance: none; color: var(--ink);
  background: var(--silver) 50% 50% / 12px 12px no-repeat; box-shadow: var(--tfx-raised);
  cursor: var(--cur-hand); touch-action: manipulation;
}
.tfx-help { background-image: var(--tfx-g-help); }
.tfx-x { margin-left: 2px; background-image: var(--tfx-g-x); }
.tfx-cap:active { box-shadow: var(--tfx-pressed); background-position: calc(50% + 1px) calc(50% + 1px); }
/* tiny, like the real ones, but a thumb-sized hit area */
.tfx-cap::after { content: ""; position: absolute; inset: -11px -5px; }
.tfx-x::after { inset: -11px -10px -11px -6px; }
.tfx-body { display: flex; align-items: flex-start; gap: 12px; padding: 12px 10px 10px 8px; }
.tfx-ico { flex: none; width: 36px; height: 36px; background: 50% 50% / contain no-repeat; }
.tfx-ico-err { background-image: var(--tfx-i-err); }
.tfx-ico-warn { background-image: var(--tfx-i-warn); }
.tfx-ico-info { background-image: var(--tfx-i-info); }
.tfx-ico-q { background-image: var(--tfx-i-q); }
.tfx-ico-clip { background-image: var(--tfx-i-clip); }
.tfx-ico-msn { background-image: var(--tfx-i-msn); }
.tfx-msg { flex: 1; min-width: 0; margin: 0; padding-top: 2px; overflow-wrap: break-word; }
.tfx-msg b { display: block; margin-bottom: 2px; }
.tfx-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0 8px 8px; }
.tfx-btn {
  position: relative; min-width: min(84px, 26vw - 22px); min-height: 44px; margin: 0; padding: 0 12px; border: 0; border-radius: 0;
  appearance: none; -webkit-appearance: none;
  font: 400 0.92rem/1 var(--win); color: var(--ink); background: var(--silver); box-shadow: var(--tfx-raised);
  cursor: var(--cur-hand); touch-action: manipulation;
}
/* the default button wears the black frame */
.tfx-default { box-shadow: 0 0 0 2px var(--ink), var(--tfx-raised); }
.tfx-btn:active { padding: 2px 10px 0 14px; box-shadow: 0 0 0 2px var(--ink), var(--tfx-pressed); }
/* keyboard focus: the classic dotted rectangle inside the button, and the black frame round it
   (plus TomSpace's yellow ring, so it can't be missed) */
.tfx-btn:focus-visible::before, .tfx-btn:active::before {
  content: ""; position: absolute; inset: 6px; border: 1px dotted var(--ink); pointer-events: none;
}
.tfx-win .tfx-btn:focus-visible { outline: none !important; box-shadow: 0 0 0 2px var(--ink), 0 0 0 5px var(--yellow), var(--tfx-raised) !important; }
.tfx-win .tfx-cap:focus-visible { outline: 2px solid var(--yellow) !important; outline-offset: 1px !important; box-shadow: var(--tfx-raised) !important; }

/* the session's one pop-up: an MSN Messenger toast ("Tom has just sent you a nudge!"). Small, no
   button row (tap it anywhere, or its X), and it shakes once when it lands. */
.tfx-toast { width: min(284px, calc(100vw - 96px)); }
.tfx-toast .tfx-title { height: 26px; }
.tfx-toast .tfx-body { gap: 10px; padding: 8px 8px 9px 6px; background: linear-gradient(180deg, #ffffff, #dfe9f5); box-shadow: inset 0 0 0 1px #808080; }
.tfx-toast .tfx-ico { width: 32px; height: 32px; }
.tfx-toast .tfx-msg { font-size: 0.86rem; line-height: 1.3; padding-top: 0; }
.tfx-toast .tfx-msg b { color: var(--navy); }
.tfx-shake { animation: tfx-shake 0.5s steps(10, end) 1; }
@keyframes tfx-shake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-7px, 2px); } 20% { transform: translate(6px, -3px); } 30% { transform: translate(-5px, -2px); }
  40% { transform: translate(7px, 3px); } 50% { transform: translate(-6px, 1px); } 60% { transform: translate(5px, -2px); }
  70% { transform: translate(-4px, 3px); } 80% { transform: translate(3px, -1px); } 90% { transform: translate(-2px, 1px); }
}
/* the nudge itself: the whole screen jumps, once, as the session starts */
.tfx-nudge { animation: tfx-shake 0.5s steps(10, end) 1; }

/* the finish: a congratulations box (a touch bigger, and its title bar flashes) */
.tfx-congrats .tfx-title { animation: tfx-flashbar 0.45s steps(1, end) 6; }
@keyframes tfx-flashbar { 50% { background: linear-gradient(90deg, #800000, #ff0000); } }
.tfx-congrats .tfx-msg { font-size: 0.95rem; }

/* the zoom: outline rectangles stepping between the taskbar and the window. White in
   "difference" mode inverts whatever is underneath, like Windows drawing them in XOR. */
.tfx-zoom { position: fixed; z-index: 50; pointer-events: none; border: 3px solid #fff; mix-blend-mode: difference; }
/* dragging: Windows 95 didn't show window contents while dragging, just a hatched outline */
.tfx-ghost {
  position: fixed; z-index: 49; pointer-events: none; border: 5px solid #fff;
  border-image: repeating-linear-gradient(45deg, #fff 0 2px, transparent 2px 4px) 5; mix-blend-mode: difference;
}

/* the sparkle explosion behind "Done!" (16 bits: glitter stars, confetti, bubbles, emoji), and a W00T */
.tfx-burst { position: fixed; z-index: 30; width: 0; height: 0; pointer-events: none; }
.tfx-burst i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; opacity: 0; font-style: normal; background: var(--c, var(--yellow)); animation: tfx-boom 2.1s var(--d, 0s) 1 forwards; }
.tfx-burst i:nth-child(4n+1) { left: -14px; top: -14px; width: 28px; height: 28px; clip-path: var(--star5); }
.tfx-burst i:nth-child(4n+2) { left: -5px; top: -12px; width: 10px; height: 24px; border: 2px solid var(--ink); }
.tfx-burst i:nth-child(4n+3) { border-radius: 50%; border: 3px solid var(--ink); box-shadow: inset -3px -3px 0 rgba(0,0,0,.25); }
.tfx-burst i:nth-child(4n) { left: -18px; top: -18px; width: 36px; height: 36px; background: none; font: 400 32px/36px sans-serif; text-align: center; }
.tfx-burst i:nth-child(4)::before { content: "\1F389"; }
.tfx-burst i:nth-child(8)::before { content: "\1F496"; }
.tfx-burst i:nth-child(12)::before { content: "\2B50"; }
.tfx-burst i:nth-child(16)::before { content: "\1F4AA"; }
.tfx-burst i:nth-child(1)  { --x: -150px; --y: -160px; --r: 260deg;  --c: var(--yellow); }
.tfx-burst i:nth-child(2)  { --x: -105px; --y: -215px; --r: -340deg; --c: var(--cyan); --d: .08s; }
.tfx-burst i:nth-child(3)  { --x: -50px;  --y: -245px; --r: 180deg;  --c: var(--pink); --d: .04s; }
.tfx-burst i:nth-child(4)  { --x: 6px;    --y: -265px; --r: -40deg; }
.tfx-burst i:nth-child(5)  { --x: 62px;   --y: -235px; --r: -260deg; --c: var(--lime); --d: .06s; }
.tfx-burst i:nth-child(6)  { --x: 118px;  --y: -200px; --r: 320deg;  --c: #ff6600; }
.tfx-burst i:nth-child(7)  { --x: 158px;  --y: -140px; --r: -200deg; --c: var(--cyan); --d: .1s; }
.tfx-burst i:nth-child(8)  { --x: 168px;  --y: -60px;  --r: 40deg;   --d: .05s; }
.tfx-burst i:nth-child(9)  { --x: -170px; --y: -70px;  --r: -280deg; --c: var(--cyan); --d: .03s; }
.tfx-burst i:nth-child(10) { --x: -160px; --y: 10px;   --r: 300deg;  --c: var(--yellow); --d: .09s; }
.tfx-burst i:nth-child(11) { --x: 150px;  --y: 18px;   --r: 240deg;  --c: var(--lime); }
.tfx-burst i:nth-child(12) { --x: -120px; --y: -110px; --r: -45deg;  --d: .07s; }
.tfx-burst i:nth-child(13) { --x: -30px;  --y: -150px; --r: 200deg;  --c: var(--pink); --d: .12s; }
.tfx-burst i:nth-child(14) { --x: 40px;   --y: -125px; --r: -300deg; --c: var(--lime); --d: .02s; }
.tfx-burst i:nth-child(15) { --x: 95px;   --y: -100px; --r: 160deg;  --c: var(--yellow); --d: .11s; }
.tfx-burst i:nth-child(16) { --x: 105px;  --y: -255px; --r: 25deg;   --d: .04s; }
.tfx-burst::before {
  content: "W00T!!!";
  position: absolute; left: -116px; top: -66px; width: 232px; height: 132px; display: grid; place-items: center;
  font: 700 2.5rem/1 var(--impact); font-synthesis: none; letter-spacing: 0.04em; color: var(--yellow);
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink);
  background: var(--red); clip-path: var(--starburst); opacity: 0;
  animation: tfx-kapow 1.25s cubic-bezier(.2, 1.4, .4, 1) 1 forwards;
}
.tfx-burst::after {
  content: ""; position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%;
  border: 6px solid var(--paper); box-shadow: 0 0 0 5px var(--pink), inset 0 0 0 5px var(--cyan); opacity: 0;
  animation: tfx-ring 0.9s ease-out 1 forwards;
}
@keyframes tfx-boom {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(.2); animation-timing-function: cubic-bezier(.12, .75, .3, 1); }
  42%  { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1.3); animation-timing-function: cubic-bezier(.5, 0, .9, .55); }
  100% { opacity: 0; transform: translate(calc(var(--x) * 1.25), calc(var(--y) + 280px)) rotate(calc(var(--r) * 2.4)) scale(.9); }
}
@keyframes tfx-kapow {
  0%   { opacity: 1; transform: scale(0) rotate(-40deg); }
  30%  { opacity: 1; transform: scale(1.2) rotate(8deg); }
  70%  { opacity: 1; transform: scale(1) rotate(4deg); }
  100% { opacity: 0; transform: scale(1.7) rotate(4deg); }
}
@keyframes tfx-ring { 0% { opacity: 1; transform: scale(.2); } 100% { opacity: 0; transform: scale(6.5); } }

/* balloons, floating up past the finish (six of them, Windows 95's 16 colours) */
.tfx-party { position: fixed; inset: 0; z-index: 30; overflow: hidden; pointer-events: none; }
.tfx-balloon {
  position: absolute; bottom: -120px; width: 54px; height: 66px; border-radius: 50% 50% 48% 48% / 56% 56% 44% 44%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 9%, rgba(255,255,255,0) 22%), var(--c, #ff0000);
  border: 3px solid var(--ink); box-shadow: 4px 4px 0 rgba(0,0,0,.35);
  animation: tfx-float var(--t, 6s) linear var(--d, 0s) 1 forwards;
}
.tfx-balloon::before { content: ""; position: absolute; left: 50%; bottom: -9px; margin-left: -6px; border: 6px solid transparent; border-bottom: 8px solid var(--ink); border-top: 0; }
.tfx-balloon::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 58px; margin: 6px 0 0 -1px; background: var(--ink); transform-origin: 50% 0; transform: rotate(6deg); }
.tfx-balloon:nth-child(1) { left: 4%;  --c: #ff0000; --d: 0s;   --t: 6.2s; }
.tfx-balloon:nth-child(2) { left: 22%; --c: #ffff00; --d: .5s;  --t: 5.6s; }
.tfx-balloon:nth-child(3) { left: 40%; --c: #00ff00; --d: .2s;  --t: 6.8s; }
.tfx-balloon:nth-child(4) { left: 58%; --c: #00ffff; --d: .8s;  --t: 5.9s; }
.tfx-balloon:nth-child(5) { left: 74%; --c: #ff00ff; --d: .35s; --t: 6.4s; }
.tfx-balloon:nth-child(6) { left: 86%; --c: #0000ff; --d: 1.1s; --t: 6s; }
@keyframes tfx-float {
  0%   { transform: translate(0, 0) rotate(-6deg); }
  25%  { transform: translate(14px, -30vh) rotate(5deg); }
  50%  { transform: translate(-10px, -60vh) rotate(-5deg); }
  75%  { transform: translate(12px, -90vh) rotate(4deg); }
  100% { transform: translate(0, calc(-100vh - 200px)) rotate(-3deg); }
}

/* start-up, the first time a phone opens Tom mode (never without motion): clouds, logo, progress
   blocks, under two seconds. A tap or any key skips it. */
.tfx-splash {
  position: fixed; inset: 0; z-index: 60; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  padding: 24px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  font-family: var(--win); color: var(--ink); text-align: center; cursor: var(--cur-hand);
  user-select: none; -webkit-user-select: none;
  --puff: radial-gradient(closest-side, rgba(255,255,255,.97) 55%, rgba(255,255,255,.55) 78%, rgba(255,255,255,0));
  background:
    var(--puff) left -40px top 74px / 240px 74px no-repeat,
    var(--puff) left 10px top 38px / 130px 94px no-repeat,
    var(--puff) left 92px top 54px / 122px 76px no-repeat,
    var(--puff) right -50px top 214px / 260px 82px no-repeat,
    var(--puff) right 44px top 172px / 142px 104px no-repeat,
    var(--puff) right -6px top 188px / 120px 86px no-repeat,
    var(--puff) left -60px bottom 128px / 280px 84px no-repeat,
    var(--puff) left 2px bottom 156px / 150px 104px no-repeat,
    var(--puff) left 104px bottom 146px / 132px 80px no-repeat,
    var(--puff) right -24px bottom 44px / 204px 64px no-repeat,
    var(--puff) right 40px bottom 66px / 112px 80px no-repeat,
    linear-gradient(180deg, #2c62c9 0%, #5b8fe0 48%, #a9c8f2 100%);
}
.tfx-splash-logo { display: flex; align-items: center; gap: 18px; }
/* the flag, in Tom's colours, waving, with its trail of little squares */
.tfx-flag {
  position: relative; display: grid; grid-template-columns: repeat(2, 30px); gap: 4px; flex: none;
  transform: perspective(160px) rotateY(-22deg) skewY(-9deg);
}
.tfx-flag i { display: block; height: 28px; border: 2px solid var(--ink); }
.tfx-flag i:nth-child(1) { background: var(--pink); }
.tfx-flag i:nth-child(2) { background: var(--lime); }
.tfx-flag i:nth-child(3) { background: var(--cyan); }
.tfx-flag i:nth-child(4) { background: var(--yellow); }
.tfx-flag::before {
  content: ""; position: absolute; left: -16px; top: 9px; width: 8px; height: 8px; background: var(--pink);
  box-shadow: 0 30px 0 var(--cyan), -12px 2px 0 -1px var(--pink), -12px 28px 0 -1px var(--cyan),
    -22px 4px 0 -2px var(--pink), -22px 26px 0 -2px var(--cyan), -30px 6px 0 -3px var(--pink), -30px 24px 0 -3px var(--cyan);
}
.tfx-splash-word { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; max-width: 220px; text-align: left; }
.tfx-splash-word small { flex: 0 0 100%; font: 700 0.95rem/1.2 Arial, var(--win); }
.tfx-splash-word b { font: 700 2.2rem/1 "Arial Black", Arial, var(--win); letter-spacing: -0.02em; }
.tfx-splash-word em {
  font: italic 700 2.5rem/1 "Arial Black", Arial, var(--win); color: var(--yellow);
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink);
}
.tfx-splash-msg { font: 700 1.1rem/1.3 var(--win); }
/* the progress bar: a sunken well filling up with navy blocks, a jump at a time */
.tfx-splash-bar { display: flex; gap: 2px; width: 232px; height: 28px; padding: 5px; background: var(--silver); box-shadow: var(--tfx-pressed); }
.tfx-splash-bar i { flex: 1; }
.tfx-splash-bar i.tfx-on { background: #000080; }
.tfx-splash-skip { font: 400 0.85rem/1.3 var(--win); }

/* ---------- focus: black and yellow, can't miss it ---------- */

:focus-visible { outline: 3px solid var(--ink) !important; outline-offset: 3px !important; box-shadow: 0 0 0 3px var(--yellow) !important; }
.play-top :focus-visible { outline-color: var(--yellow) !important; box-shadow: 0 0 0 3px var(--ink) !important; }

/* a mouse over a button makes it wiggle, like every 2006 Flash intro (no hover on phones) */
@media (hover: hover) {
  .card:hover, .finish-box .btns button:hover { animation: tom-wiggle 0.25s ease-in-out infinite alternate; }
  .card:hover:active, .finish-box .btns button:hover:active { animation: none; }
}
@keyframes tom-wiggle { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg) scale(1.02); } }

/* ---------- motion off: everything stands still ---------- */

@media (prefers-reduced-motion: reduce) {
  :root { --mq: calc(48px + env(safe-area-inset-top)); }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  /* the marquee can't scroll, so it's a still two-line banner */
  body::before, body:has(> #play:not([hidden]))::before {
    content: "\2605  Welcome 2 TomSpace!!!  \2605  Tom reckons stretching is for people who can't game  \2605";
    content: "\2605  Welcome 2 TomSpace!!!  \2605  Tom reckons stretching is for people who can't game  \2605" / "";
    display: flex; align-items: center; justify-content: center; text-align: center; white-space: normal;
    text-indent: 0; padding: env(safe-area-inset-top) 12px 0; font-size: 0.8rem; line-height: 1.3;
  }
}

/* ---------- smaller and bigger screens ---------- */

/* 360px Androids */
@media (max-width: 374px) {
  .brand { font-size: 2.15rem; gap: 8px; }
  .brand::before { width: 34px; height: 34px; }
  .hero-title { font-size: 1.9rem; }
  .focus-card .c-name { font-size: 0.95rem; }
  .focus-card .c-note { font-size: 0.75rem; }
  .time-card .t-num, .hold-card .c-secs { font-size: 2.6rem; }
  .time-card .t-tag { font-size: 0.7rem; padding: 2px 5px; }
  .play-top .routine-title { font-size: 0.82rem; }
  .play-top .total-remaining { padding: 3px 6px; letter-spacing: 0.04em; }
  .settings-panel select { max-width: 70%; padding-right: 30px; font-size: 0.86rem; background-position: right 3px center; }
  #dashboard::after { font-size: 0.72rem; }
  .look-pick { gap: 4px; }
  .look-label { padding-right: 2px; }
  .look-opt { padding: 0 6px; font-size: 0.85rem; }
  .play-controls { gap: 10px; }
  .play-controls button { min-width: 48px; }
}
/* short phones: the play screen loses the marquee and the box gets tighter, so the photo keeps its size */
@media (max-height: 760px) {
  body:has(> #play:not([hidden]))::before { display: none; }
  #play { top: 0; height: 100vh; height: 100dvh; padding-top: max(10px, env(safe-area-inset-top)); }
  .phase-label { min-height: 32px; font-size: 1.2rem; line-height: 24px; }
  .next-up { height: 28px; line-height: 28px; }
  .stretch-img { margin: 8px 0 4px; }
  .step-note { margin-top: 6px; padding-top: 6px; padding-bottom: 6px; }
  .stretch-img:not(.visible) ~ .countdown { font-size: clamp(84px, min(34vmin, 19vh), 200px); }
  .stretch-img:not(.visible) ~ .step-note { margin-top: 18px; padding-top: 10px; padding-bottom: 12px; }
}

/* big screens: the empty sides get a giant WordArt shout (left) and a webring + a column of web
   badges (right) */
@media (min-width: 1000px) {
  html::before {
    content: "TOM\A MODE"; content: "TOM\A MODE" / "";
    position: fixed; z-index: 0; top: 52%; left: calc(25vw - 140px); pointer-events: none;
    white-space: pre; text-align: center; padding: 8px 12px 16px 8px;
    font: 700 clamp(3.5rem, 7vw, 6.5rem)/0.95 var(--impact); font-synthesis: none; letter-spacing: 0.02em;
    color: var(--yellow); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 6px 6px 0 var(--ink);
    transform: translate(-50%, -50%) rotate(-12deg) skewX(-8deg);
    animation: tom-sway 2.8s ease-in-out infinite alternate;
  }
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    html::before {
      -webkit-text-stroke: 0; text-shadow: none; color: transparent; -webkit-text-fill-color: transparent;
      background-image: var(--wa-sunset); -webkit-background-clip: text; background-clip: text;
      filter: drop-shadow(3px 0 0 #000) drop-shadow(-3px 0 0 #000) drop-shadow(0 3px 0 #000) drop-shadow(0 -3px 0 #000) drop-shadow(7px 7px 0 #00ffff) drop-shadow(3px 3px 0 #000);
    }
  }
  /* the webring (every proper site was in one) */
  html::after {
    content: "\2605  THE LADS WEBRING  \2605\A\25C4  prev  \00B7  random  \00B7  next  \25BA\A proud member since 1999.\A Probably.";
    content: "\2605  THE LADS WEBRING  \2605\A\25C4  prev  \00B7  random  \00B7  next  \25BA\A proud member since 1999.\A Probably." / "";
    position: fixed; z-index: 0; top: calc(var(--mq) + 40px); left: calc(75vw + 140px); width: 204px; pointer-events: none;
    padding: 10px 8px 12px; white-space: pre; text-align: center;
    font: 700 0.78rem/1.6 var(--comic); color: var(--yellow); background: var(--ink);
    border: 5px ridge var(--pink); box-shadow: 6px 6px 0 var(--cyan);
    transform: translateX(-50%) rotate(2deg);
  }
  @keyframes tom-sway {
    from { transform: translate(-50%, -50%) rotate(-14deg) skewX(-8deg); }
    to { transform: translate(-50%, -50%) rotate(-7deg) skewX(-8deg) scale(1.06); }
  }
  /* 88x31 badges, stacked */
  .topbar::before {
    content: "Netscape NOW!\A Y2K READY\A made with Notepad\A Tom approved\A valid HTML 2.0\A MSN me l8r";
    content: "Netscape NOW!\A Y2K READY\A made with Notepad\A Tom approved\A valid HTML 2.0\A MSN me l8r" / "";
    position: fixed; z-index: 0; top: 58%; left: calc(75vw + 140px); width: 160px; pointer-events: none;
    white-space: pre; text-align: center; font: 700 0.8rem/44px var(--comic); color: var(--ink);
    transform: translate(-50%, -50%) rotate(4deg);
    background:
      linear-gradient(var(--lime), var(--lime)) 2px 7px / calc(100% - 4px) 30px no-repeat,
      linear-gradient(var(--ink), var(--ink)) 0 5px / 100% 34px no-repeat,
      linear-gradient(var(--orange), var(--orange)) 2px 51px / calc(100% - 4px) 30px no-repeat,
      linear-gradient(var(--ink), var(--ink)) 0 49px / 100% 34px no-repeat,
      linear-gradient(var(--silver), var(--silver)) 2px 95px / calc(100% - 4px) 30px no-repeat,
      linear-gradient(var(--ink), var(--ink)) 0 93px / 100% 34px no-repeat,
      linear-gradient(var(--yellow), var(--yellow)) 2px 139px / calc(100% - 4px) 30px no-repeat,
      linear-gradient(var(--ink), var(--ink)) 0 137px / 100% 34px no-repeat,
      linear-gradient(var(--cyan), var(--cyan)) 2px 183px / calc(100% - 4px) 30px no-repeat,
      linear-gradient(var(--ink), var(--ink)) 0 181px / 100% 34px no-repeat,
      linear-gradient(#ff85ea, #ff85ea) 2px 227px / calc(100% - 4px) 30px no-repeat,
      linear-gradient(var(--ink), var(--ink)) 0 225px / 100% 34px no-repeat;
  }
}

/* Windows high contrast: the WordArt's see-through fill would vanish, so it goes back to plain text
   (last in the file, so it outranks every WordArt rule above) */
@media (forced-colors: active) {
  .brand, .hero-title, .countdown, .finish-box h2, .time-card .t-num, .hold-card .c-secs, html::before {
    background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; -webkit-text-stroke: 0; filter: none;
  }
  .stretch-img { border-color: CanvasText; }
  /* Windows 95's bevels are box-shadows, which high contrast drops: real borders instead */
  .tfx-win, .settings-panel { border: 2px solid CanvasText; }
  .tfx-btn, .tfx-cap, .tfx-splash-bar, .play-controls button, .look-opt, button.icon, .step-back { border: 2px solid ButtonText; }
  .c-last { border-color: CanvasText; }
  .tfx-zoom, .tfx-ghost { mix-blend-mode: normal; border-color: Highlight; border-image: none; }
}

/* ---- "alright powelly": an incoming text, as an MSN Messenger toast, obviously ---- */
.powelly {
  position: fixed; z-index: 300; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); width: min(300px, calc(100vw - 20px));
  display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 0 0 12px; cursor: pointer; color: #000;
  background: linear-gradient(180deg, #e6f0ff, #b9d4ff); box-shadow: inset -2px -2px 0 #404040, inset 2px 2px 0 #fff, 4px 4px 0 #000;
  font: 700 14px/1.3 Tahoma, Verdana, sans-serif; transform: translateY(calc(100% + 30px)); transition: transform .5s steps(6);
}
.powelly-in { transform: none; }
.powelly-from { grid-column: 1 / -1; padding: 4px 8px; color: #fff; background: linear-gradient(90deg, #000080, #1084d0); }
.powelly-from::after { content: " says:"; content: " says:" / ""; }
.powelly-text { padding: 2px 10px 0; font: 700 18px/1.2 "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive; color: #ff00d4; text-shadow: 1px 1px 0 #ffe600; }
.powelly-time { align-self: end; padding-right: 10px; font-size: 11px; color: #404040; }
.powelly-time::before { content: "*nudge* "; content: "*nudge* " / ""; color: #000080; }
@media (prefers-reduced-motion: reduce) { .powelly { transition: none; transform: none; } }