/* CatChat's page. Only the page layout lives here, the components come from
   dist/m3-expressive.css. Big screens get a nav rail and a rounded pane,
   phones get a top bar and a bottom nav bar. */

html { scroll-behavior: smooth; scroll-padding-top: 16px; }
body.pf { margin: 0; background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); }
.pf-app { display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 100vh; }
.pf-brand-icon { width: 20px; height: 20px; fill: currentColor; flex: none; }

/* ---- nav rail ---- */
.pf-rail.m3-nav-rail { position: sticky; top: 0; height: 100vh; background: transparent; padding-top: 20px; }
.pf-rail .m3-nav-rail__header { margin-bottom: 28px; gap: 16px; align-items: center; width: 96px; padding: 0; }
.pf-avatar {
  width: 56px; height: 56px; display: block; flex: none;
  clip-path: url(#m3-shape-cookie9);
  background: var(--md-sys-color-surface-container-highest);
  transition: transform var(--md-sys-motion-spring-default-spatial);
}
.pf-avatar:hover { transform: rotate(40deg); }
.pf-avatar img { transition: transform var(--md-sys-motion-spring-default-spatial); }
.pf-avatar:hover img { transform: rotate(-40deg) scale(1.15); }
.pf-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-avatar:focus-visible { clip-path: none; border-radius: 50%; outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }
.pf-topbar .pf-avatar { width: 40px; height: 40px; margin: 0 8px; }
.pf-rail__bottom { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 96px; padding-bottom: 8px; }

/* ---- content pane ---- */
.pf-pane { margin: 16px 16px 16px 0; border-radius: var(--md-sys-shape-corner-extra-large); background: var(--md-sys-color-surface); overflow: clip; min-width: 0; }
.pf-topbar { display: none; }
.pf-section { padding: 96px 64px 32px; }
.pf-title { font: 500 45px/52px "Google Sans Flex", var(--md-ref-typeface-brand); font-variation-settings: "ROND" 60; margin: 0; letter-spacing: -0.01em; }
.pf-lead { font: var(--md-sys-typescale-body-large); letter-spacing: var(--md-sys-typescale-body-large-tracking); color: var(--md-sys-color-on-surface-variant); max-width: 60ch; margin: 12px 0 0; }
.pf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.pf-reveal { opacity: 0; transform: translateY(24px); transition: opacity 500ms var(--md-sys-motion-easing-emphasized-decelerate), transform 700ms var(--md-sys-motion-easing-emphasized-decelerate); }
.pf-reveal.is-in { opacity: 1; transform: none; }

/* ---- hero ---- */
.pf-hero-wrap { padding: 24px; }
.pf-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px 48px;
  min-height: min(600px, calc(100vh - 64px));
  padding: 56px 64px 40px;
  border-radius: var(--md-sys-shape-corner-extra-extra-large);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  overflow: hidden;
}
.pf-hero__text { align-self: center; }
.pf-hi { font: var(--md-sys-typescale-headline-small); margin: 0; }

/* the big name; portfolio.js moves each letter's font axes with the cursor */
.pf-name {
  margin: 4px 0 0;
  font-family: "Google Sans Flex", "Roboto Flex", var(--md-ref-typeface-brand);
  font-size: clamp(48px, 7.6vw, 128px);
  white-space: nowrap;
  line-height: 1;
  letter-spacing: -0.02em;
  user-select: none;
  touch-action: pan-y;
}
.pf-name .word { display: inline-block; white-space: nowrap; }
.pf-name .ch {
  display: inline-block;
  font-variation-settings: "wght" 560, "wdth" 100, "slnt" 0, "opsz" 144;
  color: color-mix(in srgb, var(--md-sys-color-primary) calc(var(--hot, 0) * 100%), var(--md-sys-color-on-primary-container));
  will-change: font-variation-settings;
}
.pf-tagline { font: var(--md-sys-typescale-headline-small); margin: 20px 0 0; max-width: 30ch; }
.pf-socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.pf-socials .m3-btn { gap: 8px; }
.pf-socials .m3-btn--outlined { color: var(--md-sys-color-on-primary-container); box-shadow: inset 0 0 0 1px var(--md-sys-color-outline); }

.pf-portrait { position: relative; align-self: center; justify-self: center; width: min(100%, 420px); aspect-ratio: 1; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%; }
.pf-portrait__back { position: absolute; inset: -4% -10% 4% 10%; background: var(--md-sys-color-tertiary-container); clip-path: url(#pf-clip-back); }
.pf-portrait__img { position: absolute; inset: 0; clip-path: url(#pf-clip-front); background: var(--md-sys-color-surface-container-highest); }
.pf-portrait__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 900ms var(--md-sys-motion-easing-emphasized-decelerate); }
.pf-portrait:hover .pf-portrait__img img { transform: scale(1.12); }
.pf-portrait__tag { position: absolute; left: -4%; bottom: 10%; padding: 8px 14px; border-radius: var(--md-sys-shape-corner-large); background: var(--md-sys-color-tertiary); color: var(--md-sys-color-on-tertiary); font: var(--md-sys-typescale-label-large); transform: rotate(-6deg); box-shadow: var(--md-sys-elevation-level1); pointer-events: none; }


/* ---- toolbox ---- */
/* languages on top, the two smaller groups side by side underneath */
.pf-toolgroups { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 12px; }
.pf-toolgroup { min-width: 0; }
.pf-toolgroup--lang { grid-column: 1 / -1; }
.pf-toolgroup__title { font: var(--md-sys-typescale-title-small); letter-spacing: var(--md-sys-typescale-title-small-tracking); color: var(--md-sys-color-on-surface-variant); margin: 0 4px 12px; }
.pf-tools { display: grid; grid-template-columns: repeat(var(--count, 3), minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pf-toolgroup--lang .pf-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 999px) {
  .pf-toolgroups { grid-template-columns: minmax(0, 1fr); }
  .pf-tools, .pf-toolgroup--lang .pf-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-tools > .pf-tool:last-child:nth-child(odd) { grid-column: span 2; }
}
.pf-tool {
  display: flex; align-items: center; gap: 16px; padding: 16px 20px 16px 16px;
  border-radius: var(--md-sys-shape-corner-extra-large); color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container);
}
.pf-tool__badge {
  position: relative; width: 64px; height: 64px; flex: none; display: grid; place-items: center;
  color: var(--badge-fg);
}
/* the shape is a separate layer so it can spin while the logo stays put */
.pf-tool__badge::before {
  content: ""; position: absolute; inset: 0; clip-path: var(--badge-shape); background: var(--badge-bg);
  transition: transform var(--md-sys-motion-spring-default-spatial);
}
/* --spin and --grow are set by portfolio.js */
.pf-tool__badge::before { transform: rotate(var(--spin, 0deg)) scale(var(--grow, 1)); transition: none; }
.pf-tool__icon { position: relative; width: 28px; height: 28px; fill: currentColor; }
.pf-tool__name { font: var(--md-sys-typescale-title-medium); }
@media (max-width: 599px) {
  .pf-tools, .pf-toolgroup--lang .pf-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pf-tool { flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 16px 12px; }
  .pf-tool__badge { width: 52px; height: 52px; }
  .pf-tool__icon { width: 24px; height: 24px; }
}

/* ---- projects ---- */
.pf-soon {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 48px; align-items: center;
  padding: 48px; border-radius: var(--md-sys-shape-corner-extra-extra-large);
  background: var(--md-sys-color-surface-container-low); box-shadow: var(--md-sys-elevation-level1);
}
.pf-soon__art { position: relative; width: 240px; aspect-ratio: 1; }
.pf-soon__shape { position: absolute; display: grid; place-items: center; }
.pf-soon__shape--a { inset: 0 30% 30% 0; background: var(--md-sys-color-tertiary-container); clip-path: url(#m3-shape-clover4); animation: pf-spin 26s linear infinite; }
.pf-soon__shape--b { inset: 45% 0 0 50%; background: var(--md-sys-color-secondary-container); clip-path: url(#m3-shape-sunny); animation: pf-spin 32s linear infinite reverse; }
.pf-soon__shape--c { inset: 18%; background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); clip-path: url(#m3-shape-cookie9); }
.pf-soon__shape--c .m3-icon { --m3-icon-size: 56px; }
@keyframes pf-spin { to { transform: rotate(360deg); } }
.pf-soon__badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 10px; border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); font: var(--md-sys-typescale-label-large); }
.pf-soon__badge .m3-icon { --m3-icon-size: 18px; }
.pf-photo-note { margin: 16px 0 0; width: fit-content; }
.pf-viewer__credit { color: var(--md-sys-color-on-secondary-container); text-decoration: none; }
.pf-viewer__credit:hover { text-decoration: underline; }
.pf-viewer__chip[hidden] { display: none; }
.pf-soon .pf-title { margin-top: 16px; }
.pf-soon__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---- playground ---- */
.pf-toys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 16px; }
.pf-toy {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border-radius: var(--md-sys-shape-corner-extra-large); background: var(--md-sys-color-surface-container-low); box-shadow: var(--md-sys-elevation-level1);
}
.pf-toy--game, .pf-toy--type { grid-column: span 2; }
.pf-toy__head { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 16px 16px 8px 20px; }
.pf-toy__icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.pf-toy__icon .m3-icon { --m3-icon-size: 22px; }
.pf-toy__title { font: var(--md-sys-typescale-title-large); margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-toy__meta { font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); }
.pf-toy__actions { display: flex; gap: 0; margin-right: -4px; }
.pf-toy__hint { font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); text-align: center; margin: 4px 0 12px; }

/* game */
.pf-game { position: relative; flex: 1; min-height: 400px; margin: 0 8px 8px; border-radius: var(--md-sys-shape-corner-large); background: var(--md-sys-color-surface-container-high); overflow: hidden; touch-action: manipulation; user-select: none; outline: none; }
.pf-game:focus-visible { box-shadow: inset 0 0 0 3px var(--md-sys-color-secondary); }
.pf-game__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pf-game__hud { position: absolute; top: 14px; right: 20px; z-index: 2; display: flex; gap: 16px; pointer-events: none; font: 500 20px/28px "Google Sans Flex", var(--md-ref-typeface-brand); font-variant-numeric: tabular-nums; letter-spacing: .06em; color: var(--md-sys-color-on-surface); transition: color 400ms; }
.pf-game__hi { color: var(--md-sys-color-on-surface-variant); transition: color 400ms; }
.pf-game.is-night .pf-game__hud, .pf-game.is-night .pf-game__hi { color: var(--md-sys-color-inverse-on-surface); }
.pf-game__overlay { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 16px; }
.pf-game__overlay[hidden] { display: none; }
.pf-game__overlay .m3-btn { animation: pf-card-in 360ms var(--md-sys-motion-easing-emphasized-decelerate); }
@keyframes pf-card-in { from { opacity: 0; transform: translateY(8px) scale(.94); } }
.pf-game.is-idle .pf-game__score { visibility: hidden; } /* no 00000 before the first game */
.pf-toy__caption { font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); margin: 0; padding: 4px 20px 16px; }

/* shape morpher */
.pf-toy--morph { align-items: stretch; }
.pf-morph {
  --morph-tone: var(--md-sys-color-primary);
  position: relative; flex: 1; min-height: 220px; margin: 8px 24px 0; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; border-radius: var(--md-sys-shape-corner-large);
}
.pf-morph svg { width: min(100%, 240px); aspect-ratio: 1; overflow: visible; transition: transform var(--md-sys-motion-spring-fast-spatial); }
.pf-morph:hover svg { transform: scale(1.04); }
.pf-morph:active svg { transform: scale(.94); }
.pf-morph path { fill: var(--morph-tone); transition: fill 600ms var(--md-sys-motion-easing-emphasized); }
.pf-morph:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }
.pf-morph__picks { display: grid; grid-template-columns: repeat(5, 40px); justify-content: center; gap: 4px 8px; padding: 0 16px 20px; }
.pf-morph__pick { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border: 0; padding: 0; cursor: pointer; background: transparent; color: var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-small); -webkit-tap-highlight-color: transparent; }
.pf-morph__pick span { width: 22px; height: 22px; background: currentColor; transition: transform var(--md-sys-motion-spring-fast-spatial), background-color 200ms; }
.pf-morph__pick:hover span { transform: scale(1.15); }
.pf-morph__pick:focus { outline: none; }
.pf-morph__pick:focus-visible { outline: 2px solid var(--md-sys-color-secondary); }
.pf-morph__pick[aria-pressed="true"] { color: var(--md-sys-color-primary); }
.pf-morph__pick[aria-pressed="true"] span { transform: scale(1.3); }
.pf-morph__pick::after { content: ""; position: absolute; inset: -4px; } /* 48dp target */

/* type tester */
.pf-type__text {
  display: block; width: 100%; box-sizing: border-box; resize: none; overflow: hidden; border: 0; outline: none; background: transparent; color: var(--md-sys-color-on-surface);
  padding: 8px 24px 4px; font: 560 clamp(44px, 6vw, 88px)/1.1 "Google Sans Flex", var(--md-ref-typeface-brand); letter-spacing: -0.01em;
  caret-color: var(--md-sys-color-primary);
}
.pf-type__text:focus-visible { box-shadow: inset 0 -2px 0 var(--md-sys-color-primary); }
.pf-type__axes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; padding: 16px 24px 24px; margin-top: auto; }
.pf-type__label { display: flex; justify-content: space-between; font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); margin-bottom: 4px; }
.pf-type__value { font-variant-numeric: tabular-nums; color: var(--md-sys-color-on-surface); }
.pf-type__axis .m3-slider { width: 100%; }

/* shape jar */
.pf-arena { position: relative; flex: 1; min-height: 300px; margin: 0 8px 8px; border-radius: var(--md-sys-shape-corner-large); background: var(--md-sys-color-surface-container-high); overflow: hidden; touch-action: none; user-select: none; }
.pf-arena__hint { position: absolute; top: 14px; left: 0; right: 0; text-align: center; font: var(--md-sys-typescale-label-medium); color: var(--md-sys-color-on-surface-variant); pointer-events: none; transition: opacity 300ms; }
.pf-body { position: absolute; left: 0; top: 0; will-change: transform; cursor: grab; }
.pf-body:active { cursor: grabbing; }
.pf-body.is-pop { animation: pf-pop 450ms var(--md-sys-motion-easing-emphasized-decelerate); }
@keyframes pf-pop { 40% { scale: 1.25; } }

@media (max-width: 999px) {
  .pf-toys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-toy--jar .pf-toy__icon { display: none; }
}
@media (max-width: 599px) { .pf-toy--jar .pf-toy__icon { display: grid; } }
@media (max-width: 599px) {
  .pf-toys { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pf-toy--game, .pf-toy--type { grid-column: auto; }
  .pf-type__axes { grid-template-columns: minmax(0, 1fr); }
  .pf-game { min-height: 400px; }
}

/* ---- footer ---- */
.pf-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 64px 64px 0; padding: 24px 0 32px; border-top: 1px solid var(--md-sys-color-outline-variant); font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); }
.pf-footer a:not(.m3-btn) { color: inherit; }

/* ---- theme ---- */
.pf-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; padding: 8px 24px 16px; }
.pf-swatch { aspect-ratio: 1; border: 0; border-radius: 50%; cursor: pointer; background: conic-gradient(from 90deg, var(--t) 0 25%, var(--s) 25% 50%, var(--p) 50% 100%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-sys-color-outline) 30%, transparent); transition: border-radius var(--md-sys-motion-spring-fast-spatial); }
.pf-swatch:hover { border-radius: var(--md-sys-shape-corner-large); }
.pf-swatch[aria-pressed="true"] { border-radius: var(--md-sys-shape-corner-medium); outline: 2px solid var(--md-sys-color-on-surface); outline-offset: 3px; }
.pf-hue { padding: 0 24px 24px; }
.pf-hue__label { display: flex; justify-content: space-between; font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); margin-bottom: 12px; }
.pf-hue input[type=range] { width: 100%; height: 40px; margin: 0; appearance: none; border-radius: 20px; cursor: pointer; background: linear-gradient(90deg, hsl(0 70% 50%), hsl(60 70% 48%), hsl(120 60% 42%), hsl(180 65% 40%), hsl(240 65% 58%), hsl(300 60% 52%), hsl(360 70% 50%)); }
.pf-hue input[type=range]::-webkit-slider-thumb { appearance: none; width: 6px; height: 52px; border-radius: 3px; background: var(--md-sys-color-on-surface); box-shadow: 0 0 0 3px var(--md-sys-color-surface-container-low); }
.pf-hue input[type=range]::-moz-range-thumb { width: 6px; height: 52px; border: 0; border-radius: 3px; background: var(--md-sys-color-on-surface); }

.pf-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 9998; overflow: hidden; }
.pf-confetti i { position: absolute; left: 0; top: 0; will-change: transform; }

::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: pf-reveal 650ms var(--md-sys-motion-easing-emphasized); }
@keyframes pf-reveal { from { clip-path: circle(0 at var(--vx, 50%) var(--vy, 50%)); } to { clip-path: circle(150vmax at var(--vx, 50%) var(--vy, 50%)); } }
.pf-party .pf-name .ch { animation: pf-bounce 500ms ease-in-out infinite alternate; animation-delay: calc(var(--i) * 50ms); }
@keyframes pf-bounce { to { transform: translateY(-12px); } }

/* ---- responsive ---- */
@media (max-width: 1199px) {
  .pf-section { padding: 80px 40px 24px; }
  .pf-footer { margin-inline: 40px; }
  .pf-hero { padding: 48px 40px 32px; }
}
@media (max-width: 999px) {
  .pf-hero { grid-template-columns: minmax(0, 1fr); }
  .pf-soon { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 36px; }
  .pf-soon__art { width: 180px; }
  .pf-portrait { order: -1; width: min(70%, 340px); }
}
@media (max-width: 599px) {
  .pf-app { grid-template-columns: minmax(0, 1fr); }
  .pf-rail.m3-nav-rail { display: none; }
  .pf-pane { margin: 0; border-radius: 0; padding-bottom: 80px; }
  .pf-topbar { display: block; position: sticky; top: 0; z-index: 10; }
  .pf-hero-wrap { padding: 8px 16px 16px; }
  .pf-hero { padding: 28px 22px 24px; border-radius: var(--md-sys-shape-corner-extra-large); min-height: 0; }
  .pf-section { padding: 56px 16px 16px; }
  .pf-footer { margin: 48px 16px 0; }
  .pf-title { font-size: 36px; line-height: 44px; }
  .pf-soon { padding: 28px 20px; }
  .pf-navbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; }
}
@media (min-width: 600px) { .pf-navbar { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pf-reveal { opacity: 1; transform: none; transition: none; }
  ::view-transition-new(root) { animation: none; }
}

/* ---- loading screen ---- */
.pf-loader {
  position: fixed; inset: 0; z-index: 10000;
  display: grid; place-items: center;
  background: var(--md-sys-color-surface);
  transition: opacity 400ms var(--md-sys-motion-easing-emphasized), visibility 0s linear 400ms;
}
.pf-loader.is-done { opacity: 0; visibility: hidden; }
.pf-loader .m3-loading { transition: transform 400ms var(--md-sys-motion-easing-emphasized-accelerate); }
.pf-loader.is-done .m3-loading { transform: scale(.6); }
body.is-loading { overflow: hidden; }

/* ---- photos ---- */
.pf-photo { position: absolute; inset: 0; border: 0; padding: 0; background: none; cursor: pointer; color: #fff; text-align: left; border-radius: inherit; }
.pf-photo:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: -3px; }
.pf-photo .m3-carousel__label small { display: block; font: var(--md-sys-typescale-body-small); opacity: .9; }

/* full-screen photo viewer */
.pf-viewer.m3-dialog--fullscreen {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border-radius: 0;
  background: var(--md-sys-color-surface-container-lowest); color: var(--md-sys-color-on-surface);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden;
}
.pf-viewer:not([open]) { display: none; }
.pf-viewer__top { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; }
.pf-viewer__count {
  padding: 6px 14px; border-radius: var(--md-sys-shape-corner-full); margin-right: 4px;
  background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-label-large); font-variant-numeric: tabular-nums;
}
.pf-viewer__stage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 0 24px; min-height: 0; touch-action: pan-y; }
.pf-viewer__figure { position: relative; margin: 0; height: 100%; min-height: 0; }
/* absolute so max-width/height measure against the frame and the photo always fits */
.pf-viewer__figure img {
  position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--md-sys-shape-corner-extra-large); user-select: none;
  animation: pf-photo-in 450ms var(--md-sys-motion-easing-emphasized-decelerate);
}
@keyframes pf-photo-in { from { opacity: 0; transform: translateX(var(--from, 0)) scale(.97); } }
.pf-viewer__info { display: grid; gap: 16px; padding: 16px 24px 24px; justify-items: center; }
.pf-viewer__caption { display: grid; justify-items: center; gap: 8px; text-align: center; }
.pf-viewer__title { font: var(--md-sys-typescale-headline-small); margin: 0; }
.pf-viewer__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pf-viewer__chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px 0 10px;
  border-radius: var(--md-sys-shape-corner-small); background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
  font: var(--md-sys-typescale-label-large);
}
.pf-viewer__chip .m3-icon { --m3-icon-size: 18px; }
.pf-viewer__strip { display: flex; gap: 6px; max-width: 100%; overflow-x: auto; padding: 4px; scrollbar-width: none; }
.pf-viewer__strip::-webkit-scrollbar { display: none; }
.pf-viewer__thumb {
  position: relative; flex: none; width: 64px; height: 48px; padding: 0; border: 0; cursor: pointer; overflow: hidden;
  border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-surface-container-highest);
  opacity: .6; transition: border-radius var(--md-sys-motion-spring-fast-spatial), opacity 200ms, width var(--md-sys-motion-spring-default-spatial);
}
.pf-viewer__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-viewer__thumb:hover { opacity: .85; }
.pf-viewer__thumb[aria-current="true"] { opacity: 1; width: 88px; border-radius: var(--md-sys-shape-corner-large); box-shadow: inset 0 0 0 2px var(--md-sys-color-primary); }
.pf-viewer__thumb[aria-current="true"] img { outline: 2px solid var(--md-sys-color-primary); outline-offset: -2px; border-radius: inherit; }
@media (max-width: 599px) {
  .pf-viewer__stage { grid-template-columns: minmax(0, 1fr); padding: 0 12px; }
  .pf-viewer__nav { display: none; } /* swipe instead */
  .pf-viewer__info { padding: 12px 12px 16px; }
}

/* ---- setup ---- */
.pf-setup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.pf-rig {
  grid-column: span 2; display: flex; flex-direction: column; gap: 20px; padding: 28px;
  border-radius: var(--md-sys-shape-corner-extra-extra-large);
  background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);
}
.pf-rig__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.pf-rig__kind { font: var(--md-sys-typescale-label-large); }
.pf-rig__name { font: 500 45px/52px "Google Sans Flex", var(--md-ref-typeface-brand); font-variation-settings: "ROND" 60; margin: 4px 0 0; }
.pf-rig__badge {
  width: 88px; height: 88px; flex: none; display: grid; place-items: center;
  clip-path: url(#m3-shape-cookie12); background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
  transition: transform var(--md-sys-motion-spring-default-spatial);
}
.pf-rig__badge .m3-icon { --m3-icon-size: 40px; transition: transform var(--md-sys-motion-spring-default-spatial); }
.pf-rig__badge { rotate: var(--spin, 0deg); scale: var(--grow, 1); }
.pf-rig__badge .m3-icon { rotate: calc(var(--spin, 0deg) * -1); } /* the icon stays upright */
.pf-rig__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-rig__chip {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px 0 12px;
  border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-surface-container-lowest); color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-label-large);
}
.pf-rig__chip .m3-icon { --m3-icon-size: 18px; color: var(--md-sys-color-primary); }
.pf-rig__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: auto 0 0; }
.pf-stat { padding: 14px 16px 16px; border-radius: var(--md-sys-shape-corner-large); background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent); display: flex; flex-direction: column-reverse; gap: 2px; }
.pf-stat dt { font: var(--md-sys-typescale-label-medium); opacity: .85; }
.pf-stat dd { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.pf-stat__num { font: 500 40px/44px "Google Sans Flex", var(--md-ref-typeface-brand); font-variant-numeric: tabular-nums; }
.pf-stat__unit { font: var(--md-sys-typescale-title-small); }

/* the phone card reuses the PC card styles */
.pf-phone {
  display: flex; flex-direction: column; gap: 20px; padding: 28px;
  border-radius: var(--md-sys-shape-corner-extra-extra-large);
  background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);
}
.pf-phone .pf-rig__badge { background: var(--md-sys-color-tertiary); color: var(--md-sys-color-on-tertiary); }
.pf-phone .pf-phone__stats { grid-template-columns: minmax(0, 1fr); }
.pf-phone .pf-stat { background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent); }

.pf-desk { grid-column: 1 / -1; padding: 20px; border-radius: var(--md-sys-shape-corner-extra-extra-large); background: var(--md-sys-color-surface-container); }
.pf-desk__title { font: var(--md-sys-typescale-title-large); margin: 4px 4px 16px; }
.pf-desk__list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.pf-gear {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px 16px 18px;
  border-radius: var(--md-sys-shape-corner-extra-large); background: var(--md-sys-color-surface-container-low);
  transition: border-radius var(--md-sys-motion-spring-fast-spatial), background-color var(--md-sys-motion-spring-default-effects);
}
.pf-gear:hover { border-radius: var(--md-sys-shape-corner-large); background: var(--md-sys-color-surface-container-lowest); }
.pf-gear__badge {
  width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 14px;
  clip-path: var(--gear-shape); background: var(--gear-bg); color: var(--gear-fg);
  transition: transform var(--md-sys-motion-spring-default-spatial);
}
.pf-gear__badge .m3-icon { --m3-icon-size: 30px; transition: transform var(--md-sys-motion-spring-default-spatial); }
.pf-gear__badge { rotate: var(--spin, 0deg); scale: var(--grow, 1); }
.pf-gear__badge .m3-icon, .pf-gear__badge .pf-gear__logo { rotate: calc(var(--spin, 0deg) * -1); }
.pf-gear__text { display: grid; gap: 2px; min-width: 0; }
.pf-gear__logo { width: 30px; height: 30px; fill: currentColor; transition: transform var(--md-sys-motion-spring-default-spatial); }
/* link tiles are wider, with the badge next to the text */
.pf-desk__list > li:not(.pf-gear) { display: flex; }
.pf-desk--links .pf-desk__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-desk--links .pf-gear { flex: 1; flex-direction: row; align-items: center; gap: 16px; }
.pf-desk--links .pf-gear__badge { margin-bottom: 0; flex: none; }
.pf-desk--links .pf-gear__name { font: var(--md-sys-typescale-title-large); }
.pf-gear--link { position: relative; color: inherit; text-decoration: none; }
.pf-gear--link:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }
.pf-gear__go { margin-left: auto; color: var(--md-sys-color-on-surface-variant); transition: transform var(--md-sys-motion-spring-fast-spatial); }
.pf-gear--link:hover .pf-gear__go { transform: translate(2px, -2px); color: var(--md-sys-color-primary); }
.pf-gear__kind { font: var(--md-sys-typescale-label-medium); color: var(--md-sys-color-primary); }
.pf-gear__name { font: var(--md-sys-typescale-title-medium); }

@media (max-width: 1199px) {
  .pf-desk__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 999px) { .pf-desk--links .pf-desk__list { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 999px) {
  .pf-setup { grid-template-columns: minmax(0, 1fr); }
  .pf-rig, .pf-desk { grid-column: auto; }
  .pf-rig__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .pf-rig { padding: 22px; }
  .pf-rig__name { font-size: 36px; line-height: 44px; }
  .pf-rig__badge { width: 64px; height: 64px; }
  .pf-rig__badge .m3-icon { --m3-icon-size: 30px; }
  .pf-desk__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-gear:last-child:nth-child(odd) { grid-column: span 2; }
  .pf-desk--links .pf-desk__list { grid-template-columns: minmax(0, 1fr); }
  .pf-desk--links .pf-desk__list > li:last-child:nth-child(odd) { grid-column: auto; }
}

/* no selecting, dragging or long-press saving the avatar */
img[data-avatar] { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; pointer-events: none; }

/* ---- cursor ---- */
/* the normal cursor comes back while a dialog is open, because dialogs draw
   above everything (including the custom one) */
html.has-dot-cursor:not(:has(dialog[open])), html.has-dot-cursor:not(:has(dialog[open])) * { cursor: none !important; }
.pf-cursor {
  position: fixed; left: 0; top: 0; z-index: 10000; width: 18px; height: 18px; overflow: visible;
  mix-blend-mode: difference; pointer-events: none; will-change: transform;
  opacity: 0; transition: opacity 200ms;
}
.pf-cursor path { fill: #fff; }
.pf-cursor.is-on { opacity: 1; }
html:has(dialog[open]) .pf-cursor { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .pf-soon__shape { animation: none !important; }
  .pf-loader, .pf-loader .m3-loading { transition: none; }
}