@font-face { font-family: "Suisse Mono"; src: url("/fonts/SuisseMono-Regular.woff2") format("woff2"); font-display: swap; }

/* blur radius is animatable, so glass can "materialize" on enter instead of just fading in */
@property --blur { syntax: "<length>"; inherits: true; initial-value: 26px; }

:root {
  color-scheme: dark;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Suisse Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* springs (response / damping) baked into linear(); cubic-bezier is the fallback */
  --spring-smooth: cubic-bezier(.2, .8, .2, 1);   /* damping 1.0  - default, no overshoot */
  --spring-bouncy: cubic-bezier(.34, 1.4, .64, 1); /* damping .72  - only after a press / flick */
  --spring-snappy: cubic-bezier(.2, .9, .3, 1.1);  /* damping .86  */
  --t-smooth: .48s;
  --t-bouncy: .52s;
  --t-snappy: .38s;

  --bg: #08080b;
  --bg-top: #16131f;
  --text: #f6f5f2;
  --muted: rgba(246, 245, 242, .74);
  --line: rgba(255, 255, 255, .13);
  --accent: #f6f5f2;
  --surface-solid: #1b1a22;

  /* glass: clear body, bright rim, thickness from inner light */
  --blur: 26px;
  --sat: 1.9;
  --bright: 1.1;
  --tint-1: rgba(255, 255, 255, .085);
  --tint-2: rgba(255, 255, 255, .025);
  --sheen: rgba(255, 255, 255, .15);
  --edge: rgba(255, 255, 255, .5);
  --edge-soft: rgba(255, 255, 255, .1);
  --edge-glow: rgba(255, 255, 255, .22);
  --volume: rgba(255, 255, 255, .045);
  --refract: rgba(150, 135, 255, .2);
  --drop: rgba(0, 0, 0, .6);
  --rim: linear-gradient(140deg, rgba(255,255,255,.95), rgba(255,255,255,.16) 24%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.16) 76%, rgba(255,255,255,.6));
  --lit-c: rgba(255, 255, 255, .17);

  /* controls that sit inside glass (no nested blur, just lighter fills) */
  --fill-1: rgba(255, 255, 255, .085);
  --fill-2: rgba(255, 255, 255, .03);
  --fill-edge: rgba(255, 255, 255, .22);
  --wash-hover: rgba(255, 255, 255, .06);
  --btn-1: rgba(255, 255, 255, .26);
  --btn-2: rgba(255, 255, 255, .09);
  --btn-edge: rgba(255, 255, 255, .28);
  --chip-tint: rgba(16, 16, 22, .5);
  --scrub-track: rgba(255, 255, 255, .17);
  --scrub-fill: rgba(255, 255, 255, .92);

  /* cursor */
  --cur-dot: #fff;
  --cur-dot-edge: rgba(10, 8, 18, .7);
  --cur-ring-1: rgba(255, 255, 255, .22);
  --cur-ring-2: rgba(255, 255, 255, .04);
  --cur-ring-edge: rgba(255, 255, 255, .55);
  --cur-hairline: rgba(10, 8, 18, .35);

  /* light behind the glass, pulled from the cover art */
  --orb-a: 134, 112, 222;
  --orb-b: 206, 98, 130;
  --orb-c: 228, 160, 118;
  --orb-d: 240, 226, 246;
  --orb-o: .42; /* kept low: on a phone the glow sits right under the text */
  --orb-d-o: .07;
}

@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring-smooth: linear(0, 0.026, 0.088, 0.17, 0.259, 0.349, 0.435, 0.514, 0.586, 0.65, 0.705, 0.753, 0.794, 0.829, 0.859, 0.883, 0.904, 0.921, 0.936, 0.947, 0.957, 0.965, 0.972, 0.977, 0.981, 0.985, 0.988, 0.99, 0.992, 0.994, 0.995, 0.996, 0.997, 0.997, 0.998, 0.998, 1);
    --spring-bouncy: linear(0, 0.021, 0.076, 0.152, 0.243, 0.339, 0.436, 0.53, 0.617, 0.696, 0.767, 0.827, 0.879, 0.921, 0.956, 0.983, 1.003, 1.018, 1.028, 1.034, 1.038, 1.038, 1.038, 1.035, 1.032, 1.029, 1.025, 1.021, 1.018, 1.015, 1.012, 1.009, 1.007, 1.005, 1.003, 1.002, 1);
    --spring-snappy: linear(0, 0.024, 0.086, 0.168, 0.261, 0.357, 0.45, 0.538, 0.617, 0.687, 0.748, 0.8, 0.844, 0.881, 0.91, 0.934, 0.953, 0.968, 0.979, 0.988, 0.994, 0.998, 1.001, 1.003, 1.004, 1.005, 1.005, 1.005, 1.005, 1.004, 1.004, 1.003, 1.003, 1.002, 1.002, 1.002, 1);
  }
}

body.light {
  color-scheme: light;
  --bg: #e7e4ef;
  --bg-top: #f6f4fb;
  --text: #1b1a22;
  --muted: rgba(27, 26, 34, .66);
  --line: rgba(27, 26, 34, .12);
  --accent: #1b1a22;
  --surface-solid: #f3f1f8;

  --sat: 1.7;
  --bright: 1.05;
  --tint-1: rgba(255, 255, 255, .5);
  --tint-2: rgba(255, 255, 255, .18);
  --sheen: rgba(255, 255, 255, .6);
  --edge: rgba(255, 255, 255, .95);
  --edge-soft: rgba(255, 255, 255, .6);
  --edge-glow: rgba(255, 255, 255, .9);
  --volume: rgba(255, 255, 255, .3);
  --refract: rgba(140, 120, 255, .16);
  --drop: rgba(80, 70, 130, .42);
  --rim: linear-gradient(140deg, #fff, rgba(255,255,255,.55) 24%, rgba(110,100,150,.16) 52%, rgba(255,255,255,.5) 78%, #fff);
  --lit-c: rgba(255, 255, 255, .75);

  --fill-1: rgba(255, 255, 255, .62);
  --fill-2: rgba(255, 255, 255, .26);
  --fill-edge: rgba(255, 255, 255, .95);
  --wash-hover: rgba(255, 255, 255, .4);
  --btn-1: rgba(255, 255, 255, .92);
  --btn-2: rgba(255, 255, 255, .5);
  --btn-edge: rgba(27, 26, 34, .1);
  --scrub-track: rgba(27, 26, 34, .15);
  --scrub-fill: rgba(27, 26, 34, .8);

  --cur-dot: #1b1a22;
  --cur-dot-edge: rgba(255, 255, 255, .95);
  --cur-ring-1: rgba(255, 255, 255, .5);
  --cur-ring-2: rgba(255, 255, 255, .1);
  --cur-ring-edge: rgba(255, 255, 255, .8);
  --cur-hairline: rgba(27, 26, 34, .38);

  --orb-a: 172, 152, 242;
  --orb-b: 246, 152, 180;
  --orb-c: 252, 202, 152;
  --orb-d: 255, 255, 255;
  --orb-o: .85;
  --orb-d-o: .34;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100svh; margin: 0; overflow-x: hidden; background-color: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
/* the page gradient lives on its own fixed layer: `background-attachment: fixed` repaints on every scroll frame on phones */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 70% at 50% 0%, var(--bg-top), var(--bg) 72%); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
[hidden] { display: none !important; }
::selection { background: rgba(var(--orb-a), .45); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

/* ---------- light behind the glass ---------- */
.ambient { position: fixed; z-index: 0; pointer-events: none; width: clamp(420px, 72vmax, 1100px); aspect-ratio: 1; border-radius: 50%; opacity: .88; will-change: transform; animation: drift 28s ease-in-out infinite alternate; transition: opacity 1.4s ease; }
body.is-playing .ambient { opacity: 1; }
.ambient-one { top: -26vmax; left: -22vmax; background: radial-gradient(closest-side, rgba(var(--orb-a), var(--orb-o)), rgba(var(--orb-a), 0)); }
.ambient-two { top: 16vh; right: -32vmax; background: radial-gradient(closest-side, rgba(var(--orb-b), var(--orb-o)), rgba(var(--orb-b), 0)); animation-duration: 34s; animation-delay: -9s; }
.ambient-three { bottom: -36vmax; left: -8vmax; background: radial-gradient(closest-side, rgba(var(--orb-c), calc(var(--orb-o) * .8)), rgba(var(--orb-c), 0)); animation-duration: 31s; animation-delay: -15s; }
.ambient-four { top: 4vh; right: 6vw; width: clamp(180px, 28vmax, 460px); background: radial-gradient(closest-side, rgba(var(--orb-d), var(--orb-d-o)), rgba(var(--orb-d), 0)); animation-duration: 23s; animation-delay: -4s; }
.grain { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }

.page-shell { position: relative; z-index: 1; width: min(100% - 28px, 520px); min-height: 100svh; margin: 0 auto; padding: 40px 0 max(28px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: stretch; }

/* ---------- glass material (big surfaces blur what is behind them) ---------- */
.profile-card, .about-panel {
  --rad: 34px;
  position: relative; isolation: isolate;
  border-radius: var(--rad);
  background:
    linear-gradient(158deg, var(--sheen), transparent 30%),
    linear-gradient(135deg, var(--tint-1), var(--tint-2));
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat)) brightness(var(--bright));
          backdrop-filter: blur(var(--blur)) saturate(var(--sat)) brightness(var(--bright));
  box-shadow:
    inset 0 1px 0 var(--edge),
    inset 0 -1px 0 var(--edge-soft),
    inset 1px 0 0 var(--edge-soft),
    inset -1px 0 0 var(--edge-soft),
    inset 0 0 44px var(--volume),
    inset 7px 9px 24px -12px var(--edge-glow),
    inset -9px -11px 26px -14px var(--refract),
    0 30px 70px -22px var(--drop),
    0 8px 24px rgba(0, 0, 0, .18);
  animation: materialize .85s var(--spring-smooth) both;
}
.profile-card { padding: 10px; }
.about-panel { --rad: 28px; margin-top: 14px; padding: 20px 24px; animation-delay: .12s; }

/* ---------- fills: controls that live on glass (no nested blur) ---------- */
.discord-presence, .music-player, .link-card, .footer-socials a {
  position: relative; isolation: isolate;
  background-color: transparent;
  background-image: linear-gradient(150deg, var(--fill-1), var(--fill-2));
  box-shadow: inset 0 1px 0 var(--fill-edge), inset 0 -1px 0 rgba(0, 0, 0, .1), 0 12px 22px -12px rgba(0, 0, 0, .4);
  transition: translate var(--t-smooth) var(--spring-smooth), scale var(--t-bouncy) var(--spring-bouncy), background-color .3s ease;
}

/* ---------- rim light (gradient hairline) + pointer specular, shared by every glass piece ---------- */
:is(.profile-card, .about-panel, .discord-presence, .music-player, .link-card, .footer-socials a, .player-toggle, .chip)::before {
  content: ""; position: absolute; inset: 0; z-index: 3; padding: 1px; border-radius: inherit; pointer-events: none;
  background: var(--rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
:is(.profile-card, .about-panel, .discord-presence, .music-player, .link-card, .footer-socials a, .player-toggle, .chip)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  opacity: var(--lit, 0); transition: opacity .45s ease;
  background: radial-gradient(var(--lit-r, 200px) circle at var(--mx, 50%) var(--my, 0), var(--lit-c), transparent 70%);
}
.profile-card::after, .about-panel::after { --lit-r: 280px; }

/* ---------- banner + floating chips ---------- */
.profile-banner { position: relative; height: 172px; overflow: hidden; margin: 0 0 18px; border-radius: calc(var(--rad, 34px) - 10px); background: #171717; box-shadow: 0 0 0 .5px rgba(255, 255, 255, .25), 0 10px 24px -10px rgba(0, 0, 0, .5); }
.profile-card { --rad: 34px; }
.profile-banner::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .34), transparent 46%); }
/* the art settles in once on load, then only reacts to the mouse (depth parallax via --nx/--ny, max 2% of the banner = inside the 1.05 scale margin); nothing loops, so nothing shimmers over the halftone dots */
.profile-banner img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 56%; scale: 1.05; translate: calc(var(--nx, 0) * -2%) calc(var(--ny, 0) * -2%); transition: translate 1.1s var(--spring-smooth); animation: banner-settle 1.6s var(--spring-smooth) both; }
/* glass glint: an iridescent band that sweeps across now and then (driven from JS, one shot at a time, transform only) */
.banner-glint { position: absolute; inset: 0; z-index: 1; pointer-events: none; transform: translateX(-100%); background: linear-gradient(105deg, transparent 29%, rgba(var(--orb-a), .5) 41%, rgba(255, 255, 255, .55) 50%, rgba(var(--orb-b), .5) 59%, transparent 71%); }
.card-topline { position: absolute; z-index: 2; inset: 12px 12px auto; display: flex; align-items: center; justify-content: space-between; }
.chip { position: relative; isolation: isolate; height: 32px; display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; border: 0; border-radius: 999px; color: #fff; font: 11px var(--mono); letter-spacing: .1em; text-transform: lowercase; background: var(--chip-tint); -webkit-backdrop-filter: blur(14px) saturate(1.8) brightness(.92); backdrop-filter: blur(14px) saturate(1.8) brightness(.92); box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 6px 16px -6px rgba(0,0,0,.45); }
.chip { --lit-c: rgba(255, 255, 255, .2); }
.chip::before { --rim: linear-gradient(140deg, rgba(255,255,255,.7), rgba(255,255,255,.1) 40%, rgba(255,255,255,.1) 60%, rgba(255,255,255,.4)); }
.theme-button { cursor: pointer; transition: translate var(--t-smooth) var(--spring-smooth), scale var(--t-bouncy) var(--spring-bouncy); }
.theme-icon { font-size: 14px; line-height: 1; }

/* ---------- identity ---------- */
.card-body { padding: 0 10px 8px; }
.profile-head { position: relative; display: flex; align-items: center; gap: 15px; margin-bottom: 22px; }
.avatar { width: 74px; height: 74px; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border-radius: 50%; background: #efefeb; box-shadow: 0 0 0 1.5px rgba(255,255,255,.7), 0 0 0 5px rgba(255,255,255,.12), 0 14px 30px -8px rgba(0,0,0,.55); }
.avatar img { width: 100%; height: 100%; display: block; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.identity h1 { display: flex; align-items: center; gap: 8px; margin: 0 0 5px; font-size: clamp(30px, 7vw, 42px); font-weight: 650; letter-spacing: -.065em; line-height: .95; }
.identity h1 { -webkit-user-select: none; user-select: none; }
.banner-static { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; opacity: 0; }
.identity h1.is-glitching { animation: name-glitch .8s steps(1, end); }
.profile-banner.is-glitching img { animation: banner-settle 1.6s var(--spring-smooth) both, banner-glitch .8s steps(1, end); } /* keep settle in the list so it doesn't restart */
.handle { margin: 0; color: var(--muted); font: 12px var(--mono); letter-spacing: .08em; }
.online-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(255,255,255,.1); }
.online-dot[data-status-state="online"] { background: #72d39b; box-shadow: 0 0 0 4px rgba(114,211,155,.14); }
.online-dot[data-status-state="idle"] { background: #e4bb68; box-shadow: 0 0 0 4px rgba(228,187,104,.14); }
.online-dot[data-status-state="dnd"] { background: var(--text); box-shadow: 0 0 0 4px color-mix(in srgb, var(--text) 12%, transparent); }
.online-dot[data-status-state="offline"] { background: var(--muted); box-shadow: none; }
.bio-copy { margin: 0 4px 22px; font-size: 14px; line-height: 1.5; }
.bio-copy p { margin: 0; }
.bio-night { display: none; margin-top: 6px; color: var(--muted); font: 12px var(--mono); letter-spacing: .08em; animation: presence-in .7s var(--spring-smooth) both; }
.bio-copy a { color: var(--accent); border-bottom: 1px solid rgba(255,255,255,.3); }

/* ---------- discord presence ---------- */
.discord-presence { --st: #72d39b; --amp: 1; --plate-w: 190px; display: flex; flex-direction: column; gap: 12px; min-height: 78px; margin: 0 0 12px; padding: 13px 15px 13px 13px; border-radius: 24px; animation: presence-in .5s var(--spring-smooth) both; }
.discord-presence[data-state="idle"] { --st: #e4bb68; --amp: .72; }
.discord-presence[data-state="dnd"] { --st: var(--text); --amp: .5; }
.discord-presence[data-state="dnd"] .presence-aura { opacity: .45; }
.discord-presence[data-state="streaming"] { --st: #a98bf5; --amp: 1.05; }
/* the status colour bleeds out of the avatar, the nameplate (the Discord collectible) peeks in from the right edge */
.presence-aura { position: absolute; z-index: 0; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(170px 110px at 40px 40px, color-mix(in srgb, var(--st) 15%, transparent), transparent 72%); }
.presence-plate { position: absolute; z-index: 0; top: 0; right: 0; width: var(--plate-w); height: 78px; overflow: hidden; border-radius: 0 24px 24px 0; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000 80%); mask-image: linear-gradient(90deg, transparent 40%, #000 80%); }
.presence-plate :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; transition: opacity .5s ease; }
.presence-plate.is-moving img { opacity: 0; }
.presence-main { position: relative; z-index: 1; display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 15px; padding-right: calc(var(--plate-w) * .54); } /* the first 40% of the plate is fully transparent and the text stops where it starts to get dark */
.presence-avatar-wrap { position: relative; z-index: 1; width: 52px; height: 52px; }
/* the ring is a frozen waveform: 36 bars around the avatar, taller when online, short when dnd; it only moves while music plays (the site's loop, or dread's Spotify) */
.presence-signal { position: absolute; left: -14px; top: -14px; width: 80px; height: 80px; overflow: visible; pointer-events: none; color: var(--st); }
.presence-signal line { stroke: color-mix(in srgb, currentColor 68%, transparent); stroke-width: 1.7; stroke-linecap: round; transform-origin: 40px 10.5px; scale: 1 var(--amp, 1); transition: scale .5s var(--spring-smooth); animation-duration: 1.15s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
body.is-playing .presence-signal line, .discord-presence[data-listening] .presence-signal line { animation-name: sig-dance; }
.presence-signal g:nth-child(6n+2) line { animation-delay: -.5s; animation-duration: .95s; }
.presence-signal g:nth-child(6n+3) line { animation-delay: -.2s; animation-duration: 1.1s; }
.presence-signal g:nth-child(6n+4) line { animation-delay: -.7s; animation-duration: .85s; }
.presence-signal g:nth-child(6n+5) line { animation-delay: -.35s; animation-duration: 1.05s; }
.presence-signal g:nth-child(6n+6) line { animation-delay: -.9s; animation-duration: 1.3s; }
.presence-avatar { width: 52px; height: 52px; display: block; object-fit: cover; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; filter: grayscale(.15) contrast(1.04); }
.presence-badge { position: absolute; right: -4px; bottom: -3px; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-solid); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent), 0 3px 8px -2px rgba(0, 0, 0, .35); }
.presence-badge::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--st); }
.discord-presence[data-state="idle"] .presence-badge::before { background: none; box-shadow: inset -3.4px 3.4px 0 0 var(--st); }
.discord-presence[data-state="dnd"] .presence-badge::before { height: 2.8px; border-radius: 2px; }
.discord-presence[data-state="streaming"] .presence-badge::before { height: 10px; border-radius: 0; clip-path: polygon(12% 0, 100% 50%, 12% 100%); }
.presence-badge::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid var(--st); opacity: 0; }
.discord-presence[data-state="online"] .presence-badge::after { animation: badge-ping 2.6s ease-out infinite; }
.presence-copy { position: relative; z-index: 1; min-width: 0; }
.presence-heading { display: flex; align-items: center; gap: 7px; min-width: 0; }
.presence-heading strong { overflow: hidden; color: var(--text); font-size: 14px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.presence-tag { flex: 0 8 auto; min-width: 0; overflow: hidden; display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px 0 4px; border-radius: 6px; color: var(--text); font: 11px/1 var(--mono); letter-spacing: .02em; white-space: nowrap; background: color-mix(in srgb, var(--text) 8%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.presence-tag img { flex: none; width: 12px; height: 12px; border-radius: 3px; }
.presence-tag span { overflow: hidden; text-overflow: ellipsis; }
.presence-devices { flex: none; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.presence-devices svg { width: 13px; height: 13px; }
.presence-devices svg[hidden] { display: none; }
.presence-activity { overflow: hidden; margin: 4px 0 0; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.presence-detail { overflow: hidden; margin: 3px 0 0; color: var(--muted); font: 11px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
/* rich activity (game / Spotify / ...): art, title, a live timer or a progress bar */
.presence-rich { position: relative; z-index: 1; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 9px 12px 9px 9px; border-radius: 16px; background: color-mix(in srgb, var(--text) 6%, transparent); box-shadow: inset 0 0 0 1px var(--line); animation: presence-in .45s var(--spring-smooth) both; }
.rich-art { position: relative; width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; border-radius: 11px; background: linear-gradient(135deg, color-mix(in srgb, var(--st) 34%, transparent), color-mix(in srgb, var(--text) 10%, transparent)); }
.rich-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rich-art img[hidden] { display: none; }
.rich-glyph { color: var(--text); font-size: 18px; font-style: normal; }
.rich-copy { min-width: 0; display: grid; gap: 2px; }
.rich-copy strong { overflow: hidden; color: var(--text); font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.rich-copy span { overflow: hidden; color: var(--muted); font: 11px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.rich-copy span:empty { display: none; }
.rich-bar { height: 3px; margin-top: 5px; overflow: hidden; border-radius: 2px; background: var(--line); }
.rich-bar[hidden] { display: none; }
.rich-bar i { display: block; height: 100%; transform-origin: left; scale: var(--p, 0) 1; background: var(--st); transition: scale 1s linear; }
.rich-time { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font: 11px var(--mono); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rich-time:empty { display: none; }
.rich-time::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--st); animation: live-dot 1.8s ease-in-out infinite; }

/* ---------- player ---------- */
.music-player { display: grid; gap: 10px; margin: 0 0 12px; padding: 12px; border-radius: 26px; }
.player-main { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 13px; }
/* like Apple Music: artwork shrinks when paused, springs up when playing */
.player-cover { position: relative; width: 56px; height: 56px; overflow: hidden; border-radius: 14px; scale: .88; box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .45); transition: scale var(--t-bouncy) var(--spring-bouncy), box-shadow .6s ease; }
.player-cover img { width: 100%; height: 100%; display: block; object-fit: cover; }
.player-cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.26), inset 0 1px 0 rgba(255,255,255,.38); }
.music-player.is-playing .player-cover { scale: 1; box-shadow: 0 16px 30px -8px rgba(0, 0, 0, .6), 0 0 34px -4px rgba(var(--orb-b), .55); }
.player-copy { min-width: 0; display: grid; gap: 5px; }
.player-title { overflow: hidden; color: var(--text); font-size: 14px; font-weight: 600; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.player-subtitle { display: flex; align-items: center; color: var(--muted); font: 11px var(--mono); letter-spacing: .04em; }
.player-eq { height: 10px; width: 0; margin-right: 0; display: inline-flex; align-items: flex-end; gap: 2px; overflow: hidden; opacity: 0; transition: width var(--t-snappy) var(--spring-snappy), margin-right var(--t-snappy) var(--spring-snappy), opacity .25s ease; }
.music-player.is-playing .player-eq { width: 12px; margin-right: 7px; opacity: 1; }
.player-eq i { width: 2px; height: 100%; border-radius: 2px; background: currentColor; transform-origin: bottom; animation: eq 1s ease-in-out infinite; }
.player-eq i:nth-child(2) { animation-duration: .78s; animation-delay: -.4s; }
.player-eq i:nth-child(3) { animation-duration: 1.15s; animation-delay: -.7s; }
.player-eq i:nth-child(4) { animation-duration: .9s; animation-delay: -.2s; }
.player-toggle { position: relative; isolation: isolate; width: 46px; height: 46px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: var(--text); cursor: pointer; background-color: transparent; background-image: linear-gradient(150deg, var(--btn-1), var(--btn-2)); box-shadow: inset 0 1px 0 var(--fill-edge), inset 0 0 0 .5px var(--btn-edge), 0 10px 20px -8px rgba(0, 0, 0, .5); transition: translate var(--t-smooth) var(--spring-smooth), scale var(--t-bouncy) var(--spring-bouncy); }
.player-toggle svg { grid-area: 1 / 1; width: 18px; height: 18px; transition: scale var(--t-snappy) var(--spring-snappy), opacity .2s ease; }
.icon-play { translate: 1px 0; }
.icon-pause { scale: .4; opacity: 0; }
.music-player.is-playing .icon-play { scale: .4; opacity: 0; }
.music-player.is-playing .icon-pause { scale: 1; opacity: 1; }
.player-scrub { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 0 2px; }
.player-time { min-width: 3ch; color: var(--muted); font: 11px var(--mono); font-variant-numeric: tabular-nums; }
.player-time:last-child { text-align: right; }
.scrub { height: 26px; display: grid; align-items: center; touch-action: pan-y; cursor: pointer; border-radius: 8px; }
.scrub-track { --h: 5px; position: relative; height: var(--h); overflow: hidden; border-radius: 99px; background: var(--scrub-track); scale: var(--sx, 1) 1; transform-origin: var(--ox, 50%) 50%; transition: height var(--t-snappy) var(--spring-snappy), scale var(--t-snappy) var(--spring-snappy); }
.scrub-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); border-radius: inherit; background: var(--scrub-fill); }
@media (hover: hover) { .scrub:hover .scrub-track { --h: 8px; } }
.scrub.is-scrubbing .scrub-track { --h: 10px; transition: height var(--t-snappy) var(--spring-snappy); }
.vol-btn { justify-self: start; width: 30px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--muted); cursor: pointer; transition: scale var(--t-bouncy) var(--spring-bouncy), color .2s ease; }
.vol-btn svg { grid-area: 1 / 1; width: 18px; height: 18px; transition: scale var(--t-snappy) var(--spring-snappy), opacity .2s ease; }
.vol-btn .icon-vol-off { scale: .5; opacity: 0; }
.vol-btn.is-muted .icon-vol-low { scale: .5; opacity: 0; }
.vol-btn.is-muted .icon-vol-off { scale: 1; opacity: 1; }
.vol-btn:active { scale: .88; transition-duration: .09s; }
.vol-max { justify-self: end; width: 18px; height: 18px; color: var(--muted); }
@media (hover: hover) { .vol-btn:hover { color: var(--text); } }

/* ---------- links ---------- */
.links { display: grid; gap: 9px; }
.link-card { min-height: 60px; display: grid; grid-template-columns: 28px 1fr auto 20px; align-items: center; gap: 8px; padding: 0 16px; border-radius: 22px; }
.link-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.14); color: var(--accent); font-size: 13px; }
body.light .link-icon { background: rgba(27, 26, 34, .07); }
.link-icon-image { overflow: hidden; padding: 0; background: #f4f4f2; box-shadow: 0 4px 10px -3px rgba(0,0,0,.4); }
.link-icon-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.link-name { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.link-note { color: var(--muted); font: 11px var(--mono); }
.link-arrow { color: var(--accent); font-size: 15px; text-align: right; transition: translate var(--t-smooth) var(--spring-smooth); }

/* ---------- footer ---------- */
.profile-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.footer-socials { display: flex; gap: 8px; }
.footer-socials a { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 11px; color: var(--muted); font: 9px var(--mono); }
.footer-icon { width: 17px; height: 17px; display: block; object-fit: cover; border-radius: 4px; }
.footer-metrics { display: inline-flex; align-items: center; gap: 13px; }
.footer-status, .view-status { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font: 11px var(--mono); }
.footer-status > span { overflow: hidden; text-overflow: ellipsis; }
.footer-status i { width: 5px; height: 5px; display: inline-block; border-radius: 50%; background: var(--accent); }
.footer-status[data-status-state="online"] i { background: #72d39b; box-shadow: 0 0 0 4px rgba(114,211,155,.14); }
.footer-status[data-status-state="idle"] i { background: #e4bb68; box-shadow: 0 0 0 4px rgba(228,187,104,.14); }
.footer-status[data-status-state="dnd"] i { background: var(--text); box-shadow: 0 0 0 4px color-mix(in srgb, var(--text) 12%, transparent); }
.footer-status[data-status-state="offline"] i { background: var(--muted); box-shadow: none; }
.view-eye { color: var(--accent); font-size: 9px; }
.section-tag { color: var(--muted); font: 11px var(--mono); letter-spacing: .12em; text-transform: lowercase; }
.about-panel p { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.section-tag i { margin-left: 10px; font-style: normal; letter-spacing: .06em; }
/* facts / ask / log: the rest of the bio, in the same terminal voice as the hex dump */
.about-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.facts { margin: 8px 0 0; font: 12px/1.9 var(--mono); }
.facts > div { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 10px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; color: var(--text); }
.live-time { font-variant-numeric: tabular-nums; }
.sleep-state { display: inline-flex; align-items: center; gap: 7px; margin-left: 12px; color: var(--muted); }
.sleep-state i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.sleep-state[data-state="awake"] i { background: #72d39b; box-shadow: 0 0 0 4px rgba(114,211,155,.14); }
.sleep-state[data-state="asleep"] i { background: #a79bf0; box-shadow: 0 0 0 4px rgba(167,155,240,.18); }
.ask-list { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.ask-list li { padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; font: 11px var(--mono); letter-spacing: .02em; color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }
.tracks { margin: 8px 0 0; padding: 0; list-style: none; font: 500 14px/24px var(--sans); }
.tracks li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 2px 0; color: var(--text); }
.tr-n { color: var(--muted); font: 400 12px/24px var(--mono); font-variant-numeric: tabular-nums; }
.tr-by { color: var(--muted); font-weight: 400; white-space: nowrap; }
.timeline { position: relative; margin: 8px 0 0; padding: 0; list-style: none; font: 12px/1.9 var(--mono); }
.timeline::before { content: ""; position: absolute; left: 2px; top: 11px; bottom: 11px; width: 1px; background: var(--line); }
.timeline li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding-left: 18px; color: var(--text); }
.timeline li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.tl-when { color: var(--muted); }
.timeline .is-now::before { background: #72d39b; box-shadow: 0 0 0 4px rgba(114,211,155,.14); }
/* hex dump: the bio as a file; hovering a byte lights up its character (and the other way round), and it is scanned once when it scrolls into view */
.hexdump { width: fit-content; max-width: 100%; --hex-hit: color-mix(in srgb, var(--text) 18%, transparent); margin: 12px 0 2px; padding: 9px 12px 10px; border-radius: 14px; font: 11px/1.75 var(--mono); font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--text) 5%, transparent); box-shadow: inset 0 0 0 1px var(--line); user-select: none; }
.hex-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; padding-bottom: 6px; border-bottom: 1px solid var(--line); color: var(--muted); }
.hex-head span:first-child { color: var(--text); }
.hex-row { display: flex; gap: 16px; color: var(--muted); }
.hex-bytes { display: grid; grid-template-columns: repeat(8, 2ch); column-gap: .7ch; text-align: center; }
.hex-bytes span:nth-child(4) { margin-right: .7ch; }
.hex-ascii { display: grid; grid-template-columns: repeat(8, 1ch); text-align: center; }
.hex-ascii span { color: var(--text); }
.hex-ascii span.dot { color: var(--muted); }
.hexdump [data-i] { border-radius: 3px; }
.hexdump [data-i].is-pair { background: var(--hex-hit); color: var(--text); }
.hexdump.is-scanned [data-i] { animation: hex-scan .9s ease-out; }

/* ---------- press / hover: respond on pointer-down, release on a spring ---------- */
.link-card, .footer-socials a { cursor: pointer; }
@media (hover: hover) {
  .link-card:hover, .footer-socials a:hover { translate: 0 -2px; background-color: var(--wash-hover); }
  .link-card:hover .link-arrow { translate: 2px -2px; }
  .theme-button:hover, .player-toggle:hover { translate: 0 -1px; }
}
.link-card:active, .footer-socials a:active, .theme-button:active, .player-toggle:active { scale: .965; transition-duration: .09s, .09s, .2s; }
.player-toggle:active { transition-duration: .09s; }

/* ---------- cursor: drawn by the OS from these images, so it can never lag behind the mouse (mouse / trackpad only) ---------- */
@media (hover: hover) and (pointer: fine) {
  :root {
    --cur-default: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23ffffff%22/%3E%3Cstop offset=%221%22 stop-color=%22%23ddd3f8%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%22M4 3 L4 21.5 L8.6 17.4 L11.6 24.2 L14.8 22.8 L11.9 16.2 L18.2 16.2 Z%22 fill=%22none%22 stroke=%22%23fff%22 stroke-opacity=%22.85%22 stroke-width=%224.2%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M4 3 L4 21.5 L8.6 17.4 L11.6 24.2 L14.8 22.8 L11.9 16.2 L18.2 16.2 Z%22 fill=%22url(%23g)%22 stroke=%22%231b1a22%22 stroke-width=%221.5%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M5.9 6.6 L5.9 17.6%22 stroke=%22%23fff%22 stroke-opacity=%22.9%22 stroke-width=%221.1%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3C/svg%3E") 4 3, auto;
    --cur-link: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cdefs%3E%3ClinearGradient id=%22h%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23ffe6f0%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23f7b8d0%22/%3E%3Cstop offset=%221%22 stop-color=%22%23b8a5f7%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22s%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22/%3E%3Cstop offset=%221%22 stop-color=%22%23f4a9c6%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%22M4 3 L4 21.5 L8.6 17.4 L11.6 24.2 L14.8 22.8 L11.9 16.2 L18.2 16.2 Z%22 fill=%22none%22 stroke=%22%23fff%22 stroke-opacity=%22.85%22 stroke-width=%224.2%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M4 3 L4 21.5 L8.6 17.4 L11.6 24.2 L14.8 22.8 L11.9 16.2 L18.2 16.2 Z%22 fill=%22url(%23h)%22 stroke=%22%231b1a22%22 stroke-width=%221.5%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M5.9 6.6 L5.9 17.6%22 stroke=%22%23fff%22 stroke-opacity=%22.85%22 stroke-width=%221.1%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M22.6 1.5999999999999996 Q22.6 6.6 27.6 6.6 Q22.6 6.6 22.6 11.6 Q22.6 6.6 17.6 6.6 Q22.6 6.6 22.6 1.5999999999999996 Z%22 fill=%22none%22 stroke=%22%23fff%22 stroke-opacity=%22.85%22 stroke-width=%222.6%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M22.6 1.5999999999999996 Q22.6 6.6 27.6 6.6 Q22.6 6.6 22.6 11.6 Q22.6 6.6 17.6 6.6 Q22.6 6.6 22.6 1.5999999999999996 Z%22 fill=%22url(%23s)%22 stroke=%22%231b1a22%22 stroke-width=%221%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M26.2 11.2 Q26.2 13.6 28.599999999999998 13.6 Q26.2 13.6 26.2 16.0 Q26.2 13.6 23.8 13.6 Q26.2 13.6 26.2 11.2 Z%22 fill=%22none%22 stroke=%22%23fff%22 stroke-opacity=%22.85%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M26.2 11.2 Q26.2 13.6 28.599999999999998 13.6 Q26.2 13.6 26.2 16.0 Q26.2 13.6 23.8 13.6 Q26.2 13.6 26.2 11.2 Z%22 fill=%22%231b1a22%22/%3E%3C/svg%3E") 4 3, pointer;
    --cur-scrub: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cdefs%3E%3ClinearGradient id=%22p%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23ffe6f0%22/%3E%3Cstop offset=%221%22 stop-color=%22%23d4c8fb%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform=%22translate(2 2)%22%3E%3Crect x=%222.2%22 y=%227.2%22 width=%2223.6%22 height=%2213.6%22 rx=%226.8%22 fill=%22none%22 stroke=%22%23fff%22 stroke-opacity=%22.85%22 stroke-width=%224%22/%3E%3Crect x=%222.2%22 y=%227.2%22 width=%2223.6%22 height=%2213.6%22 rx=%226.8%22 fill=%22url(%23p)%22 stroke=%22%231b1a22%22 stroke-width=%221.5%22/%3E%3Cpath d=%22M10.4 10.9 L7.2 14 L10.4 17.1 M17.6 10.9 L20.8 14 L17.6 17.1%22 fill=%22none%22 stroke=%22%231b1a22%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/g%3E%3C/svg%3E") 16 16, ew-resize;
  }
  html, html body { cursor: var(--cur-default); }
  html a, html button, html summary, html [role="button"], html .identity h1, html .vol-btn, html .link-card, html .theme-button, html .player-toggle, html .footer-socials a { cursor: var(--cur-link); }
  html .scrub { cursor: var(--cur-scrub); }
}

/* ---------- motion ---------- */
@keyframes materialize { from { --blur: 0px; opacity: 0; transform: translateY(18px) scale(.98); } }
@keyframes drift { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(5%, 4%, 0) scale(1.1); } }
@keyframes banner-settle { from { scale: 1.18; } }
@keyframes name-glitch {
  0%   { text-shadow: 3px 0 rgba(255, 60, 120, .75), -3px 0 rgba(60, 200, 255, .75); translate: 2px 0; }
  20%  { text-shadow: -4px 0 rgba(255, 60, 120, .75), 4px 0 rgba(60, 200, 255, .75); translate: -3px 0; }
  40%  { text-shadow: 2px 1px rgba(255, 60, 120, .6), -2px -1px rgba(60, 200, 255, .6); translate: 0 1px; }
  60%  { text-shadow: -3px 0 rgba(255, 60, 120, .75), 3px 0 rgba(60, 200, 255, .75); translate: 3px 0; }
  80%  { text-shadow: 1px 0 rgba(255, 60, 120, .5), -1px 0 rgba(60, 200, 255, .5); translate: -1px 0; }
  100% { text-shadow: none; translate: 0 0; }
}
@keyframes banner-glitch {
  0%   { translate: -2.2% 0; filter: contrast(1.8) brightness(1.15); }
  15%  { translate: 2.2% 0; filter: contrast(1.4) hue-rotate(40deg); }
  30%  { translate: 0 0; filter: none; }
  45%  { translate: -1.6% 0; filter: contrast(2) brightness(.9); }
  60%  { translate: 2.4% 0; filter: invert(.08) contrast(1.5); }
  75%  { translate: 0 0; filter: none; }
  100% { translate: 0 0; filter: none; }
}
.night .bio-night { display: block; }
@keyframes sig-dance { 0%, 100% { scale: 1 .45; } 50% { scale: 1 1.3; } }
@keyframes badge-ping { 0% { scale: .8; opacity: .7; } 70%, 100% { scale: 1.9; opacity: 0; } }
@keyframes live-dot { 50% { opacity: .35; } }
@keyframes hex-scan { from { background: var(--hex-hit); color: var(--text); } to { background: transparent; } }
@keyframes presence-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes eq { 0%, 100% { scale: 1 .25; } 50% { scale: 1 1; } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .4s; }

/* ---------- small screens ---------- */
/* ---------- wide screens: the about panel sits beside the card instead of under it ---------- */
@media (min-width: 1000px) {
  .page-shell { width: min(100% - 48px, 940px); display: grid; grid-template-columns: 520px minmax(0, 400px); align-content: start; column-gap: 20px; justify-content: center; }
  .profile-card { grid-column: 1; grid-row: 1; }
  .about-panel { grid-column: 2; grid-row: 1; align-self: center; margin-top: 0; }
  .link-card[href="#about"] .link-arrow { font-size: 0; }
  .link-card[href="#about"] .link-arrow::after { content: "→"; font-size: 15px; }
  .about-panel:target { animation: about-ping 1.1s ease-out; }
}
@media (min-width: 1000px) and (hover: hover) {
  .link-card[href="#about"]:hover .link-arrow { translate: 2px 0; }
}
@keyframes about-ping {
  0% { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; }
  100% { outline: 2px solid transparent; outline-offset: 10px; }
}

@media (max-width: 500px) {
  .page-shell { padding-top: 16px; }
  .profile-card { --rad: 30px; padding: 8px; }
  .profile-banner { height: 146px; border-radius: 22px; }
  .card-body { padding: 0 8px 6px; }
  .avatar { width: 64px; height: 64px; }
  .discord-presence { --plate-w: 160px; }
  .link-card { grid-template-columns: 28px 1fr 20px; }
  .link-note { display: none; }
  .profile-footer { flex-wrap: wrap; row-gap: 12px; }
  .footer-metrics { margin-left: auto; gap: 12px; min-width: 0; max-width: 100%; }
  .footer-status { min-width: 0; white-space: nowrap; } /* the inner span ellipsizes, only if the row really can't fit it (320px); no overflow here or the dot's ring gets clipped */
  .view-status { flex: none; white-space: nowrap; }
}

@media (max-width: 400px) {
  .hex-off { display: none; } /* no room for the offset column next to bytes + characters */
}

/* ---------- phones: keep scrolling smooth ---------- */
@media (hover: none) and (pointer: coarse) {
  /* a live blur of a moving backdrop is the costliest thing a phone GPU does; the glass look is carried by tint, rim light and shadow */
  .profile-card, .about-panel { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .grain { display: none; }
  .ambient { animation: none; will-change: auto; }
}

/* ---------- accessibility: motion, transparency, contrast ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .player-cover { scale: 1; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .profile-card, .about-panel, .chip { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface-solid); }
  .ambient, .grain { display: none; }
}
@media (prefers-contrast: more) {
  .presence-plate { display: none; }
  :root, body.light { --muted: var(--text); --rim: linear-gradient(var(--text), var(--text)); }
  .profile-card, .about-panel { background: var(--surface-solid); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .profile-card, .about-panel { background: color-mix(in srgb, var(--surface-solid) 82%, transparent); }
}