/* frizzy-g.com: TOM MODE, a.k.a. "TomSpace", the same as Mbao's and Stretcher's.
   Tom told the group the apps were shit, so this is Frizzy G's homepage the way Tom sees it: a 2006
   MySpace profile after a fight with PowerPoint WordArt, plus bits nicked off a 1999 GeoCities page
   and a Windows 95 box. Checkerboard and glitter, a marquee, Comic Sans, Impact WordArt with the
   ALPHA MALE sticker (Web 2.0 logos had "beta"; George's orders), the logo as a profile pic, a Top 8
   with three friends in it (and Tom's friend request, pending since 2006), gel buttons, a disco ball
   on a string, the dancing baby, a hit counter, a Windows 95 taskbar with Mardy Bum on autoplay,
   Y2K READY and, on a big screen, the webring.

   It is terrible ON PURPOSE, but it all still works:
   - real content always sits on a solid panel at 4.5:1 or better (the mess is in the decoration);
   - every tap target is 44px+, every focus gets a black-and-yellow ring;
   - every animation stops under prefers-reduced-motion: the marquee wraps into a still banner;
   - all joke text is CSS content with empty alt text ( / "" ) so screen readers skip it.
   Its effects script (tom.js) adds Windows 95: a start-up splash the first time, joke message boxes
   that zoom open out of the taskbar, and glitter off the cursor. 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;
  --silver: #c0c0c0;

  --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;

  --gutter: 16px;
  --mq: 36px;               /* the marquee strip across the top */

  /* 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");
  --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;
  /* the ALPHA MALE sticker's words: drawn, not typed, because the WordArt it sits on clips its
     background to text, and real text in there would print through it as a ghost */
  --alpha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 30'%3E%3Crect x='1.5' y='1.5' width='109' height='27' fill='%23cc0000' stroke='%23fff' stroke-width='3'/%3E%3Ctext x='56' y='20.5' text-anchor='middle' font-family='Comic Sans MS,Chalkboard SE,Comic Neue,cursive' font-size='13.5' font-weight='700' letter-spacing='1' fill='%23fff'%3EALPHA MALE%3C/text%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%);
  --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%);
  --wa-sunset: linear-gradient(180deg, #ffff00 12%, #ff9900 42%, #ff0066 70%, #cc33ff 100%);
  /* WordArt outline: four hard drop-shadows trace the glyphs, then the 3D bit */
  --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);

  /* Windows 95, at phone scale (2px per 1995 pixel): the two-tone bevels, the title bar, the icons */
  --tfx-ready: 1;           /* tom.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-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");
  /* 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; }

*, *::before, *::after { box-sizing: border-box; }

/* the tiled MySpace background: hot pink / purple checkerboard (+ a drifting glitter layer, below) */
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  overflow-x: hidden; /* wonky stickers never cause sideways scrolling */
  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; margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  overflow-x: clip;
  color: var(--ink); font: 400 1rem/1.5 var(--comic);
  cursor: var(--cur-arrow);
}
a, button { cursor: var(--cur-hand); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- the marquee (wraps into a still banner under reduced motion) ---------- */

body::before {
  content: "\2605   Welcome 2 Frizzy G's homepage!!!   \2605   Tom has visited 0 times   \2605   3 apps, 0 Toms   \2605   Tom reckons it's all shit, so here it is thru Tom's eyes   \2605   Frizzy G is in ur extended network   \2605   Mbao + Stretcher + Earshot = the Frizzy G empire   \2605   thanx 4 the add!!!   \2605   sign my guestbook   \2605";
  content: "\2605   Welcome 2 Frizzy G's homepage!!!   \2605   Tom has visited 0 times   \2605   3 apps, 0 Toms   \2605   Tom reckons it's all shit, so here it is thru Tom's eyes   \2605   Frizzy G is in ur extended network   \2605   Mbao + Stretcher + Earshot = the Frizzy G empire   \2605   thanx 4 the add!!!   \2605   sign my guestbook   \2605" / "";
  display: block; flex: none; height: var(--mq); overflow: hidden; contain: strict;
  white-space: pre; font: 700 0.95rem/32px var(--comic); color: var(--lime);
  background: var(--ink); border-bottom: 4px ridge var(--cyan);
  text-indent: 10px;
  animation: tom-marquee 34s linear -2s infinite; /* starts already on screen, not on a blank strip */
}
/* the joke measures ~242ch of Comic Sans: it scrolls all the way off, then comes straight back round */
@keyframes tom-marquee { from { text-indent: 100vw; } to { text-indent: -246ch; } }

/* glitter drifting over the checkerboard: one fixed layer, moved with transform (cheap) */
body::after {
  content: ""; position: fixed; inset: -96px; z-index: -2; 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 ambient layer: three things floating about behind everything ---------- */
/* a disco ball on a string hanging off the marquee, the dancing baby (1996's finest) and a glitter
   heart, behind every panel and never clickable. On a phone they sit in the page's open space (the
   ball up top, the baby and the heart either side of the Y2K badge at the very end) and scroll with
   it; on a big screen they move out into the empty sides */
.ambient { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ambient i { position: absolute; display: block; font-style: normal; }

/* 1. the disco ball */
.ambient i:nth-child(1) {
  --ball: 54px;
  top: var(--mq); right: 18px; width: var(--ball); height: 96px; transform-origin: 50% 0;
  background: linear-gradient(var(--ink), var(--ink)) 50% 0 / 2px calc(100% - var(--ball) + 6px) no-repeat;
  animation: tom-dangle 3.6s ease-in-out infinite alternate;
}
.ambient i:nth-child(1)::before {
  content: ""; position: absolute; left: 0; bottom: 0; width: var(--ball); height: var(--ball); border-radius: 50%;
  border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  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;
}
.ambient i:nth-child(1)::after {
  content: "\2726"; content: "\2726" / "";
  position: absolute; left: -12px; bottom: calc(var(--ball) - 22px); font: 700 22px/1 var(--comic); color: var(--paper);
  text-shadow: 0 0 4px #fff, 1px 1px 0 var(--ink); animation: tom-twinkle 0.9s ease-in-out infinite alternate;
}
@keyframes tom-dangle { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@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; } }

/* 2. the dancing baby: the cha-cha, in four jerky GIF frames, with music */
.ambient i:nth-child(2) { right: calc(50% + 66px); bottom: 26px; width: 62px; height: 60px; }
.ambient i:nth-child(2)::before {
  content: "\1F476"; content: "\1F476" / "";
  position: absolute; left: 0; bottom: 2px; font: 400 44px/1 sans-serif;
  filter: drop-shadow(3px 3px 0 var(--ink));
  animation: tom-chacha 1.1s steps(1, end) infinite;
}
.ambient i:nth-child(2)::after {
  content: "\266A\A  \266B"; content: "\266A\A  \266B" / "";
  position: absolute; right: -6px; top: 0; white-space: pre; font: 700 18px/1.1 var(--comic); color: var(--yellow);
  text-shadow: 2px 2px 0 var(--ink); animation: tom-notes 1.1s steps(1, end) infinite;
}
@keyframes tom-chacha {
  0%  { transform: translate(0, 0) rotate(-16deg); }
  25% { transform: translate(5px, -10px) rotate(6deg); }
  50% { transform: translate(0, 0) scaleX(-1) rotate(-16deg); }
  75% { transform: translate(-5px, -10px) scaleX(-1) rotate(6deg); }
}
@keyframes tom-notes { 50% { transform: translate(6px, -7px) rotate(12deg); } }

/* 3. a glitter heart, bobbing about */
.ambient i:nth-child(3) { --heart: 58px; left: calc(50% + 72px); bottom: 26px; width: var(--heart); height: var(--heart); animation: tom-bob 3.2s ease-in-out infinite alternate; }
.ambient i:nth-child(3)::before {
  content: "\2665\FE0E"; content: "\2665\FE0E" / "";
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 400 calc(var(--heart) * 1.15)/1 Arial, "Segoe UI Symbol", sans-serif; color: #ff3cd0;
}
.ambient i:nth-child(3)::after {
  content: "\2727"; content: "\2727" / "";
  position: absolute; right: 0; top: 0; font: 700 20px/1 var(--comic); color: var(--paper);
  text-shadow: 0 0 4px #fff, 1px 1px 0 var(--ink); animation: tom-twinkle 0.7s ease-in-out infinite alternate;
}
@keyframes tom-bob { from { transform: translateY(-4px) rotate(-8deg); } to { transform: translateY(2px) rotate(6deg); } }

/* ---------- layout ---------- */

.home {
  width: 100%; max-width: 560px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 30px;
  padding: 22px var(--gutter) 6px;
}

/* ---------- the header: WordArt, the ALPHA MALE sticker, and the logo as a profile pic ---------- */

.logo {
  position: relative; margin: 0;
  display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; column-gap: 16px; row-gap: 14px;
}
/* the name: glitter rainbow WordArt, wonky (the fallback, for browsers without background-clip: text) */
.logo-text {
  position: relative; grid-column: 1 / -1; grid-row: 1; justify-self: start;
  padding: 4px 10px 10px 4px; margin: 4px 0 0;
  font: 700 clamp(3.6rem, 20vw, 5.2rem)/1 var(--impact); font-synthesis: none; letter-spacing: 0.02em; white-space: nowrap;
  color: var(--yellow); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--ink);
  transform: rotate(-4deg) skewX(-6deg); transform-origin: 0 50%;
}
/* Web 2.0 logos had a "beta" sticker. This one has a better one, by order of George */
.logo-text::after {
  content: ""; position: absolute; left: calc(100% - 30px); top: -16px; width: 104px; height: 28px;
  background: var(--alpha) 50% 50% / 100% 100% no-repeat;
  transform: rotate(14deg) skewX(6deg);
  animation: tom-throb .7s ease-in-out infinite alternate;
}
@keyframes tom-throb { from { transform: rotate(14deg) skewX(6deg) scale(.92); } to { transform: rotate(8deg) skewX(6deg) scale(1.08); } }
/* the picture, as Frizzy G's MySpace profile pic: just the G, in a glitter-ish frame */
.logo-img {
  grid-column: 1; grid-row: 2; display: block;
  width: 112px; height: 112px; object-fit: cover; object-position: 86% 50%;
  background: #808080; border: 5px ridge var(--cyan); box-shadow: 6px 6px 0 var(--ink);
  transform: rotate(-3deg);
}
/* the profile box: everyone's MySpace headline */
.logo::after {
  content: "Frizzy G's Space\A Mood: cheeky \1F61C\A Status: ALPHA MALE\A Tom has visited: 0 times";
  content: "Frizzy G's Space\A Mood: cheeky \1F61C\A Status: ALPHA MALE\A Tom has visited: 0 times" / "";
  grid-column: 2; grid-row: 2; align-self: center;
  white-space: pre-line; padding: 8px 10px;
  font: 700 0.86rem/1.5 var(--comic); color: var(--ink);
  background: var(--paper); border: 4px ridge var(--lime); box-shadow: 6px 6px 0 var(--ink);
  transform: rotate(1.2deg);
}
/* "Online Now!", blinking, stuck over the bottom of the pic */
.logo::before {
  content: "Online Now!"; content: "Online Now!" / "";
  position: absolute; z-index: 1; left: 18px; top: 100%; margin-top: -16px;
  padding: 0 7px; white-space: nowrap; font: 700 0.72rem/1.6 var(--comic); color: var(--ink);
  background: var(--lime); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(-4deg); animation: tom-blink 1s steps(1, end) infinite;
}
@keyframes tom-blink { 50% { opacity: 0; } }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .logo-text {
    -webkit-text-stroke: 0; text-shadow: none; color: transparent; -webkit-text-fill-color: transparent;
    background-image: var(--glitter), linear-gradient(90deg, #ff00d4, #ffff00 25%, #00ffff 50%, #ccff00 75%, #ff00d4);
    background-size: 22px 22px, 200% 100%;
    -webkit-background-clip: text; background-clip: text;
    filter: var(--wordart-edge) drop-shadow(4px 4px 0 #fff) drop-shadow(3px 3px 0 #000);
    animation: tom-shimmer 3s linear infinite;
  }
}
@keyframes tom-shimmer { to { background-position: 22px 22px, 200% 0; } }

/* ---------- the apps: Frizzy G's Top 8 (there are 3, and Tom), as 2006 gel buttons ---------- */

.apps { display: flex; flex-direction: column; gap: 24px; margin-top: 10px; }
.apps::before {
  content: "Frizzy G\2019 s Top 8 (there are 3)"; content: "Frizzy G\2019 s Top 8 (there are 3)" / "";
  align-self: flex-start; padding: 5px 12px; margin-bottom: -6px;
  font: 700 1rem/1.3 var(--comic); color: var(--ink); background: var(--orange);
  border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); transform: rotate(-1deg);
}
.app {
  --gel-top: #ff8af0; --gel: var(--pink-gel); --rim: #7a0066; --pic: "\1F3B1";
  position: relative;
  display: grid; grid-template-columns: 68px minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: 16px; row-gap: 0; align-items: center;
  min-height: 108px; padding: 14px 16px 16px 14px;
  border: 3px solid var(--rim); border-radius: 22px;
  background: var(--gloss), linear-gradient(180deg, var(--gel-top), var(--gel));
  box-shadow: 0 5px 0 var(--rim), 6px 10px 0 var(--ink);
  color: var(--ink); text-decoration: none;
  transform: rotate(-1.4deg);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.app-mbao { --gel-top: #ff8af0; --gel: var(--pink-gel); --rim: #7a0066; --pic: "\1F3B1"; }
.app-stretcher { --gel-top: #b3ffff; --gel: #00ccff; --rim: #005f80; --pic: "\1F938"; transform: rotate(1.2deg); }
.app-earshot { --gel-top: #ecff66; --gel: #66dd00; --rim: #0b5e00; --pic: "\1F4DE"; transform: rotate(-.8deg); }
.app:active { transform: translateY(4px) rotate(0deg); box-shadow: 0 1px 0 var(--rim), 3px 5px 0 var(--ink); }
/* each friend's pic: a clip-art emoji in a white Polaroid */
.app::before {
  content: var(--pic); content: var(--pic) / "";
  grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center;
  width: 68px; height: 68px; font: 400 40px/1 "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  background: var(--paper); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-6deg);
}
.app-stretcher::before { transform: rotate(5deg); }
/* the name, all a friend says now: big white Impact with a fat black edge */
.app-name {
  grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: start;
  padding: 0 4px 2px 0;
  font: 700 2.6rem/1 var(--impact); font-synthesis: none; letter-spacing: 0.03em;
  color: var(--paper); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink);
}
/* and a sticker each */
.app::after {
  content: "HOT!!"; content: "HOT!!" / "";
  position: absolute; right: -6px; top: -14px; display: grid; place-items: center; width: 60px; height: 44px;
  font: 700 0.8rem/1 var(--comic); color: var(--paper); background: var(--red);
  clip-path: var(--starburst); transform: rotate(14deg);
  animation: tom-throb2 .8s ease-in-out infinite alternate;
}
.app-stretcher::after {
  content: "Tom's PB: 0 mins"; content: "Tom's PB: 0 mins" / "";
  width: auto; height: auto; padding: 1px 7px; clip-path: none; border: 2px solid var(--paper); box-shadow: 2px 2px 0 var(--ink);
  background: var(--violet); font-size: 0.7rem; line-height: 1.5; transform: rotate(-6deg); animation: none;
}
.app-earshot::after {
  content: "NEW!"; content: "NEW!" / "";
  width: auto; height: auto; padding: 0 7px; clip-path: none; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
  background: var(--yellow); color: var(--red); font: 700 1rem/1.3 var(--impact); letter-spacing: .05em; transform: rotate(8deg);
  animation: tom-blink .8s steps(1, end) infinite;
}
@keyframes tom-throb2 { from { transform: rotate(14deg) scale(.9); } to { transform: rotate(6deg) scale(1.08); } }

/* PIN (George's, see pin\README.md): a padlock sticker slapped over the bottom of the friend's pic,
   on the apps behind it (.app-locked). The word is real text; the padlock is decoration */
.app-lock {
  grid-column: 1; grid-row: 1 / span 2; align-self: center; justify-self: center; position: relative; z-index: 1;
  padding: 0 6px 0 4px; white-space: nowrap;
  font: 700 0.85rem/1.45 var(--impact); font-synthesis: none; letter-spacing: 0.06em; color: var(--red);
  background: var(--yellow); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
  transform: translateY(28px) rotate(-5deg); /* down onto the pic's bottom edge */
}
.app-lock::before { content: "\1F512\00A0"; content: "\1F512\00A0" / ""; font: 400 0.75rem/1 "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.app-locked::before { margin-bottom: 12px; } /* the pic sits up a bit to make room under it */

/* the last friend: Tom, who still hasn't accepted (MySpace's grey "no photo" pic, a dashed outline) */
.apps::after {
  content: "TOM\A friend request pending since 2006"; content: "TOM\A friend request pending since 2006" / "";
  display: flex; align-items: center; min-height: 100px; padding: 12px 16px 12px 98px; white-space: pre-line;
  font: 700 0.9rem/1.4 var(--comic); color: var(--ink);
  border: 3px dashed var(--ink); border-radius: 22px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Crect width='60' height='60' fill='%23e8e8e8'/%3E%3Ccircle cx='30' cy='23' r='11' fill='%23a6a6a6'/%3E%3Cpath d='M9 60c0-14 9.5-21 21-21s21 7 21 21z' fill='%23a6a6a6'/%3E%3Ctext x='30' y='29' text-anchor='middle' font-family='Comic Sans MS,Chalkboard SE,Comic Neue,cursive' font-size='17' font-weight='700' fill='%23fff'%3E%3F%3C/text%3E%3C/svg%3E") 21px 50% / 54px 54px no-repeat,
    linear-gradient(var(--paper), var(--paper)) 16px 50% / 64px 64px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 13px 50% / 70px 70px no-repeat,
    repeating-linear-gradient(-45deg, #e4e4e4 0 10px, #cfcfcf 10px 20px);
  box-shadow: 6px 10px 0 rgba(0, 0, 0, .55);
  transform: rotate(-1deg);
}

/* under construction: every page, forever */
.home::after {
  content: "\1F6A7  UNDER CONSTRUCTION \1F6A7"; content: "\1F6A7  UNDER CONSTRUCTION \1F6A7" / "";
  align-self: center; margin-top: 4px; padding: 6px 12px; white-space: pre;
  font: 700 1.1rem/1.2 var(--impact); font-synthesis: none; letter-spacing: 0.08em; color: var(--ink);
  border: 10px solid transparent;
  background: linear-gradient(var(--amber), var(--amber)) padding-box, repeating-linear-gradient(-45deg, var(--ink) 0 8px, var(--amber) 8px 16px) border-box;
  box-shadow: 6px 6px 0 var(--ink); transform: rotate(-2.5deg);
}

/* ---------- the footer: the look switch is the Windows 95 taskbar (message boxes zoom out of
   it), then the hit counter, the small print and the badge ---------- */

.foot {
  width: 100%; max-width: 560px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 26px;
  padding: 34px var(--gutter) calc(36px + env(safe-area-inset-bottom));
}
.look-pick {
  position: relative; align-self: stretch; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  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 {
  appearance: none; -webkit-appearance: none;
  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);
  touch-action: manipulation;
}
.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), bold */
.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; }
/* the hit counter and the small print (the no-break space keeps "800×600" together when it wraps) */
.foot::before {
  content: "you are visitor no. 0000003\A (Tom has visited 0 times)\A best viewed in Netscape Navigator 4.0 at\00A0 800\00D7 600\A\00A9  2006 TomSpace. All wrongs reserved.";
  content: "you are visitor no. 0000003\A (Tom has visited 0 times)\A best viewed in Netscape Navigator 4.0 at\00A0 800\00D7 600\A\00A9  2006 TomSpace. All wrongs reserved." / "";
  order: 2; align-self: stretch; padding: 9px 10px; 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);
}
/* an 88x31 web badge, at the very bottom where they always lived */
.foot::after {
  content: "\2714  Y2K READY"; content: "\2714  Y2K READY" / "";
  order: 3; display: grid; place-items: center; width: 108px; height: 34px; white-space: pre;
  font: 700 0.8rem/1 var(--win); letter-spacing: 0.04em; color: var(--ink);
  background: linear-gradient(180deg, #f2ff99, var(--lime) 50%, #99cc00 51%, #ccff33);
  border: 2px solid var(--ink); box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #557000, 4px 4px 0 var(--pink);
  transform: rotate(-2deg);
}

/* the look menu in the corner is lookmenu.css's, the same in every look on all the Frizzy G sites
   (it has its own Windows 95 dress for Tom mode): .top-end, .corner, .look-menu, .look-burger,
   .look-panel, .look-panel-label, .lm-opts, .lm-opt, .lm-night, .lm-frizzy, .lm-tom, .lm-castle,
   and the PIN form in it: .lm-pin, .lm-pin-label, .lm-pin-row, .lm-pin-input, .lm-pin-go, .lm-pin-wrong */

/* ---------- 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; }

/* a mouse over a button makes it wiggle, like every 2006 Flash intro (no hover on phones) */
@media (hover: hover) {
  .app:hover, .look-opt:hover { animation: tom-wiggle 0.25s ease-in-out infinite alternate; }
  .app:hover:active, .look-opt:hover:active { animation: none; } /* so the press still shows */
}
@keyframes tom-wiggle { from { rotate: -1.5deg; } to { rotate: 1.5deg; scale: 1.02; } }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  /* the marquee can't scroll, so the whole thing wraps into a still banner: every joke stays readable */
  body::before { height: auto; contain: none; white-space: normal; text-indent: 0; text-align: center; padding: 5px 14px 7px; font-size: 0.85rem; line-height: 1.45; }
  .ambient i:nth-child(1) { top: 0; height: 150px; }
}

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

/* 360px Androids: a touch smaller */
@media (max-width: 374px) {
  :root { --gutter: 12px; }
  .logo { grid-template-columns: 100px minmax(0, 1fr); column-gap: 12px; }
  .logo-img { width: 100px; height: 100px; }
  .logo::after { font-size: 0.8rem; padding: 7px 8px; }
  .app { grid-template-columns: 60px minmax(0, 1fr); column-gap: 12px; padding: 13px 13px 15px 12px; }
  .app::before { width: 60px; height: 60px; font-size: 34px; }
  .app-lock { transform: translateY(24px) rotate(-5deg); }
  .apps::after { padding-left: 90px; font-size: 0.85rem; }
  .app-name { font-size: 2.35rem; }
  .look-pick { gap: 4px; }
  .look-label { padding-right: 2px; }
  .look-opt { padding: 0 6px; font-size: 0.85rem; }
}

/* big screens: the empty sides get a giant WordArt shout (left), a webring and a column of web
   badges (right), and the ambient things move out into the open */
@media (min-width: 1000px) {
  .home { gap: 22px; padding-top: 18px; }
  .apps { gap: 20px; margin-top: 4px; }
  .app { min-height: 104px; }
  .foot { gap: 22px; padding-top: 28px; }
  /* the under-construction sign moves out into the left margin, under the WordArt */
  .home::after { position: fixed; z-index: 0; left: calc(25vw - 140px); bottom: 8vh; margin: 0; transform: translateX(-50%) rotate(-6deg); }
  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 */
  .ambient::after {
    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: 60%; 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;
  }
  /* the ambient things, fixed out in the open: the disco ball over the WordArt, the baby dancing
     under it, the heart under the badges */
  .ambient { position: fixed; overflow: visible; }
  .ambient i:nth-child(1) { right: auto; left: calc(25vw - 169px); height: 190px; }
  .ambient i:nth-child(2) { right: auto; left: calc(25vw - 260px); bottom: auto; top: 29vh; width: 80px; height: 76px; }
  .ambient i:nth-child(2)::before { font-size: 56px; }
  .ambient i:nth-child(2)::after { font-size: 22px; }
  .ambient i:nth-child(3) { --heart: 96px; left: calc(75vw + 92px); bottom: 60px; }
  .foot { padding-bottom: 40px; }
}

/* a proper desktop: the Top 8 the way MySpace drew it, a grid, two by two: the three friends, and
   Tom's pending request in the fourth place. The page widens into the gap between the WordArt
   and the webring */
@media (min-width: 1200px) {
  .home { max-width: 640px; }
  .apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
  .apps::before { grid-column: 1 / -1; justify-self: start; }
  .app { grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; min-height: 132px; padding: 16px 14px 18px 14px; }
  .app::before { width: 64px; height: 64px; font-size: 38px; }
  .app-name { font-size: 2.45rem; }
  .app-lock { font-size: 0.8rem; transform: translateY(26px) rotate(-5deg); }
  .apps::after { min-height: 132px; padding: 12px 12px 12px 94px; font-size: 0.9rem;
    background-position: 18px 50%, 14px 50%, 11px 50%, 0 0; background-size: 56px 56px, 64px 64px, 70px 70px, auto;
    transform: rotate(1.2deg); }
  .home::after { left: calc(25vw - 170px); }
}

/* 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) {
  .logo-text, html::before { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; -webkit-text-stroke: 0; filter: none; }
  .app { border: 3px solid CanvasText; }
  .look-opt { border: 2px solid ButtonText; }
  .look-opt[aria-pressed="true"] { outline: 2px solid Highlight; }
  .ambient, body::after { display: none; }
}

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

/* a message box. Placed on the page (it scrolls with it), clear of the apps and the taskbar */
.tfx-win {
  position: absolute; left: 0; top: 0; z-index: 15;
  width: min(320px, calc(100vw - 32px)); padding: 4px;
  font: 400 0.95rem/1.35 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;
}
.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.875rem/1 var(--win); color: var(--paper); background: var(--tfx-caption);
  user-select: none; -webkit-user-select: none; touch-action: none;
}
.tfx-win:not(.tfx-active) .tfx-title { color: var(--ink); background: var(--tfx-caption-off); }  /* the window behind (black, not 1995's silver: it has to be read) */
.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: 14px; padding: 16px 12px 14px 10px; }
.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: 3px; overflow-wrap: break-word; }
.tfx-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 2px 8px 10px; }
.tfx-btn {
  position: relative; min-width: 88px; min-height: 44px; margin: 0; padding: 0 14px; border: 0; border-radius: 0;
  appearance: none; -webkit-appearance: none;
  font: 400 0.95rem/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 12px 0 16px; 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 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: 21; 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: 19; pointer-events: none; border: 5px solid #fff;
  border-image: repeating-linear-gradient(45deg, #fff 0 2px, transparent 2px 4px) 5; mix-blend-mode: difference;
}

/* glitter off the cursor (and a puff where a finger taps), like every 1999 homepage */
.tfx-spark {
  position: fixed; z-index: 22; left: 0; top: 0; width: 0; height: 0; pointer-events: none;
  font: 400 24px/1 Arial, "Segoe UI Symbol", sans-serif;
  text-shadow: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 3px 3px 0 var(--ink);
  animation: tom-spark .8s ease-in forwards;
}
.tfx-spark::before { content: "\2605"; content: "\2605" / ""; position: absolute; left: -.5em; top: -.55em; }
.tfx-spark-1 { --dx: -14px; color: var(--yellow); }
.tfx-spark-2 { --dx: 10px; color: var(--cyan); font-size: 18px; }
.tfx-spark-3 { --dx: -4px; color: var(--paper); font-size: 28px; }
.tfx-spark-4 { --dx: 16px; color: var(--lime); font-size: 20px; }
@keyframes tom-spark { from { translate: 0 0; scale: 1; opacity: 1; } to { translate: var(--dx) 34px; scale: .3; opacity: 0; rotate: 180deg; } }

/* start-up, the first time a browser 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 { margin: 0; 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 { margin: 0; font: 400 0.85rem/1.3 var(--win); }

@media (forced-colors: active) {
  /* Windows 95's bevels are box-shadows, which high contrast drops: real borders instead */
  .tfx-win { border: 2px solid CanvasText; }
  .tfx-btn, .tfx-cap, .tfx-splash-bar { border: 2px solid ButtonText; }
  .tfx-zoom, .tfx-ghost { mix-blend-mode: normal; border-color: Highlight; border-image: none; }
  .tfx-spark { display: none; }
}