/* A calm personal site around one piece of pixel art: the cabin (cabin.js), with a room for each project. */
:root {
  --bg: #ece8e0;
  --surface: #f6f3ed;
  --ink: #1d1f23;
  --text: #3a3e45;
  --muted: #62666d;
  --line: #d3ccbf;
  --accent: #a4502b;
  --sky: #bcdcec;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --wide: 1120px;
  --read: 1040px;
  --frame-shadow: rgba(40, 24, 8, .28);
  color-scheme: light;
}
/* dark: a gallery at night (the theme is picked before the page draws, in index.html; the toggle is in main.js) */
:root[data-theme="dark"] {
  --bg: #121110;
  --surface: #1b1a18;
  --ink: #f1ece4;
  --text: #c9c3b9;
  --muted: #8f897f;
  --line: #2d2a26;
  --accent: #e0925f;
  --sky: #2c3d4c;
  --frame-shadow: rgba(0, 0, 0, .7);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.65 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--accent); text-decoration-color: currentColor; }
a:focus-visible, summary:focus-visible, .who:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, h4 { color: var(--ink); }
.eyebrow { margin: 0; color: var(--muted); font: 500 12px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; }
.px { image-rendering: pixelated; }

/* ---------- top bar */
.masthead {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px; /* the name and the links on one baseline */
  max-width: var(--wide); margin: 0 auto; padding: 14px 24px;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
}
.wordmark { flex: none; color: var(--ink); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
#nav { display: flex; gap: 22px; margin-left: auto; font-size: 14px; }
.theme-toggle { align-self: center; flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--muted); cursor: pointer; }
.theme-toggle:hover { color: var(--ink); border-color: var(--muted); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .sun, [data-theme="dark"] .theme-toggle .moon { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: block; }
#nav a { color: var(--muted); text-decoration: none; }
#nav a:hover { color: var(--ink); }

/* ---------- intro and the cabin */
.hero { max-width: var(--wide); margin: 0 auto; padding: 32px 24px 24px; }
.hero-head { display: grid; grid-template-columns: minmax(0, 720px) minmax(155px, 1fr); gap: 40px; align-items: center; margin-bottom: 24px; }
.hero-head .intro { grid-area: 1 / 1; }
.hero-head .framed { grid-area: 1 / 2; } /* (first in the page, so on phones the intro can wrap round it) */
/* the portrait in its frame under a picture light (main.js), centred in the space beside the intro. In the dark the
   lamp comes on: its light fans down over the painting and onto the wall, and the frame falls into shadow below. */
.framed { position: relative; justify-self: center; width: 155px; margin: 0; }
.framed .pshadow, .framed .pv, .framed > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.framed .pshadow, .framed .pv { background-repeat: no-repeat; background-position: 0 0; image-rendering: pixelated; }
.framed .pshadow { filter: drop-shadow(0 6px 10px var(--frame-shadow)); }
.framed > svg { overflow: visible; pointer-events: none; }
.framed .lit { opacity: 0; }
[data-theme="dark"] .framed .lit { opacity: 1; }
/* switching between light and dark: a slow crossfade of the whole page */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .6s; animation-timing-function: ease-in-out; }
/* the name is the wordmark in the top bar; the heading stays for search engines and screen readers, out of sight */
.hero h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.lede { margin: 14px 0 0; color: var(--text); font-size: 19px; line-height: 1.55; }
.stage { margin: 0; }
.room-scroll { overflow: hidden; } /* no box: the cabin stands on the page like a diorama */
/* the whole cabin fits in the first screen: no taller than the window leaves below the intro (--fit, set by main.js) */
.room { position: relative; width: 100%; max-width: min(1184px, var(--fit, 9999px) * 1.213); aspect-ratio: 592 / 488; margin: 0 auto; }
#scene { display: block; width: 100%; height: 100%; }
/* the cabin and its rooms (in the projects and the sidebar) a touch more saturated; at night also dimmed a little, so
   their snow and white rooms don't glare against the dark page */
:is(#scene, .scene-box img, .rooms img) { filter: saturate(1.1); }
[data-theme="dark"] :is(#scene, .scene-box img, .rooms img) { filter: brightness(.95) saturate(1.1); }
.stage figcaption { margin-top: 12px; color: var(--muted); font-size: 14px; }

/* ---------- people in the room */
.who { cursor: pointer; outline: none; }
.who:hover, .who:focus-visible { filter: drop-shadow(1px 0 0 #ffcc00) drop-shadow(-1px 0 0 #ffcc00) drop-shadow(0 1px 0 #ffcc00) drop-shadow(0 -1px 0 #ffcc00); }
/* people and animals walk a tile in 500 ms, in a straight line (as in Habbo); cabin.js moves them and picks their frames */
/* decoration never takes clicks: light, view cones, tracking boxes, skeletons, pulses, steam, smoke, the ball */
#scene circle[fill="url(#glow)"], #scene .fov, #scene .bbox, #scene .skel, #scene .wave, #scene .steam, #scene .smoke, #scene .ball { pointer-events: none; }
.skel { animation: skel 4.8s infinite; }
@keyframes skel { 0%, 55% { opacity: 0; } 56%, 100% { opacity: 1; } }
.wave { opacity: 0; animation: wave 1.5s steps(3) infinite; }
.wave:nth-child(2) { animation-delay: 0.25s; }
.wave:nth-child(3) { animation-delay: 0.5s; }
@keyframes wave { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.blink { animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.2; } }
/* the pitched ball flies from the hand to the net, started by cabin.js on the pitcher's release frame */
.ball { opacity: 0; }
.ball.fly { animation: throw 0.45s steps(9) forwards; }
@keyframes throw {
  0% { opacity: 1; transform: translate(0, 0); }
  90% { opacity: 1; transform: translate(var(--dx), var(--dy)); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
}

/* Animations run in a few discrete frames, like Habbo's, so the scene repaints a handful of times a second, not 60. */
.steam { animation: steam 1.8s steps(4) infinite; }
.smoke { animation: smoke 3s steps(6) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes smoke { 0% { opacity: 0; transform: translate(0, 0) scale(0.5); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(5px, -24px) scale(1.5); } }
@keyframes steam { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 0.8; } 100% { opacity: 0; transform: translateY(-8px); } }
.flicker { animation: flicker 0.5s steps(2) infinite; }
/* the fire in the fireplace: two flame shapes taking turns */
.fire { animation: fire 0.4s steps(2) infinite; }
@keyframes fire { to { transform: translateX(-32px); } }
@keyframes flicker { 50% { transform: translateY(1px); opacity: 0.75; } }
.glow { opacity: 0.85; }
/* people moving on the hacker room's floor-plan screen */

/* speech: a small dark see-through label like a tracker's, the speaker's name in tracker green; long lines wrap */
.bubble {
  position: absolute; z-index: 2;
  transform: translate(-50%, -100%);
  width: max-content; max-width: 230px;
  padding: 2px 6px;
  background: rgba(16, 18, 22, .74); color: #e9eef2;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  border: 1px solid rgba(57, 255, 136, .55); border-radius: 3px;
  font: 500 10.5px/1.4 var(--mono);
  pointer-events: none;
  animation: bubble 3.2s forwards;
}
.bubble b { color: #39ff88; font-weight: 600; }
.bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -4px;
  width: 6px; height: 6px; margin-left: -3px;
  background: rgba(16, 18, 22, .74); border: 1px solid rgba(57, 255, 136, .55); border-top: 0; border-left: 0;
  transform: rotate(45deg);
}
@keyframes bubble {
  0% { opacity: 0; translate: 0 8px; }
  8%, 80% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 0 -20px; }
}


/* ---------- sections: a label column and a content column */
.sections { max-width: var(--read); margin: 0 auto; padding: 0 24px; }
.section { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 32px; padding: 56px 0; border-top: 1px solid var(--line); }
.section-head h2 { margin: 6px 0 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.section-body > :first-child { margin-top: 0; }
.section-body p { margin: 0 0 12px; }
.section-body h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.lead { color: var(--ink); font-size: 17px; }
.note { color: var(--muted); font-size: 14px; }
.group { margin: 40px 0 8px !important; color: var(--muted) !important; font: 500 12px/1.4 var(--mono) !important; letter-spacing: 0.08em; text-transform: uppercase; }
.group:first-child { margin-top: 0 !important; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 !important; }
.tag { padding: 1px 9px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--text); font: 12px/1.7 var(--mono); }
details { margin: 6px 0; }
summary { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--accent); font-family: var(--mono); }
details[open] > summary::after { content: "−"; }
.bullets { margin: 8px 0; padding-left: 18px; }
.bullets li { margin-bottom: 6px; }
figure { margin: 12px 0; }

.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 16px; font-size: 15px; }
.facts dt { color: var(--muted); font: 500 12px/2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.facts dd { margin: 0; }

.proj { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.proj:last-child { border-bottom: 0; }
.proj h4 { margin: 0 0 4px; font-size: 17px; font-weight: 600; line-height: 1.35; }
.meta { color: var(--muted); font-size: 14px; }
/* every project the same: a small close-up of its room (vector, sharp at any size) beside the text */
.scene-box { width: 240px; align-self: start; overflow: hidden; }
.scene-box img { display: block; width: 100%; height: auto; }

.rows { list-style: none; margin: 0; padding: 0; }
.rows > li { border-bottom: 1px solid var(--line); }
.rows summary { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: baseline; width: 100%; padding: 14px 0; color: var(--text); font-size: 15px; font-weight: 400; }
.rows summary b { color: var(--ink); font-weight: 600; }
.rows summary:hover b { color: var(--accent); }
.when { color: var(--muted); font: 13px var(--mono); white-space: nowrap; }
.rows .more-box { padding: 0 0 16px; }

.entry { padding: 16px 0; border-bottom: 1px solid var(--line); }
.entry:first-child { padding-top: 0; }
.entry:last-child { border-bottom: 0; padding-bottom: 0; }
.entry-head { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.kind { color: var(--muted); font: 500 12px/1.6 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.badge { margin-left: 10px; padding: 1px 8px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 99px; color: var(--accent); font: 500 11px var(--mono); text-transform: none; letter-spacing: 0; }
.skills { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; margin: 0 0 8px; }
.skills dt { color: var(--ink); font-weight: 600; font-size: 15px; }
.skills dd { margin: 2px 0 0; font-size: 15px; }

.footer { max-width: var(--read); margin: 0 auto; padding: 32px 24px 48px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.footer p { margin: 0; }
.noscript { margin: 24px; padding: 12px; background: var(--surface); border: 1px solid var(--line); }

/* ---------- the side cards: on wide screens the page becomes three columns, the cards staying in view as you scroll */
/* below the wide layout only the contact card shows, at the end of the page */
.rail { display: none; }
.rail-left { display: block; max-width: var(--read); margin: 0 auto; padding: 16px 24px 40px; }
.rail-left .card:not(.contact) { display: none; }
.card { margin: 0 0 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: 13.5px; line-height: 1.5; }
.card-title { margin: 0 0 10px; color: var(--muted); font: 500 11px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.card p { margin: 0 0 6px; }
.card p:last-child { margin-bottom: 0; }
.card .where { display: block; color: var(--muted); font-size: 12.5px; }
.card .links { gap: 4px 14px; }
.card .tags { margin: 0 !important; gap: 5px; }
.card .tag { font-size: 11px; }
.plain { margin: 0; padding: 0; list-style: none; }
.plain li { margin: 0 0 7px; }
.plain li:last-child { margin-bottom: 0; }
.plain b { display: block; color: var(--ink); font-weight: 600; }
.timeline { margin: 0; padding: 0 0 0 12px; list-style: none; border-left: 1px solid var(--line); }
.timeline li { position: relative; margin: 0 0 7px; }
.timeline .where, .rooms span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.timeline li::before { content: ""; position: absolute; left: -16.5px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--accent); }
.timeline li:first-child::before { background: var(--accent); }
.timeline .when { display: block; font-size: 11px; }
.timeline b { color: var(--ink); font-weight: 600; }
.rooms { margin: 0; padding: 0; list-style: none; }
.rooms a { display: grid; grid-template-columns: 50px 1fr; gap: 10px; align-items: center; padding: 4px 0; color: var(--text); font-size: 12.5px; line-height: 1.35; text-decoration: none; }
.rooms a:hover { color: var(--accent); }
.rooms img { width: 50px; height: 36px; object-fit: cover; object-position: center 60%; background: var(--sky); border: 1px solid var(--line); border-radius: 6px; image-rendering: pixelated; }
.rooms b { display: block; color: var(--ink); font-weight: 600; font-size: 12px; }
.rooms span { -webkit-line-clamp: 2; }
.card a { overflow-wrap: anywhere; }
@media (min-width: 1380px) {
  .layout { display: grid; grid-template-columns: 232px minmax(0, 1060px) 232px; grid-template-areas: ". head ." "left main right"; /* the top bar over the middle column: the name starts where the intro does */ column-gap: 28px; justify-content: center; padding: 0 24px; }
  .masthead { grid-area: head; max-width: none; width: 100%; padding-left: 0; padding-right: 0; }
  main { grid-area: main; min-width: 0; }
  .hero, .sections { max-width: none; padding-left: 0; padding-right: 0; }
  /* sticky while they fit on screen; taller than the window, they scroll with the page (never cut off inside) */
  .rail, .rail-left { display: block; position: sticky; top: 72px; align-self: start; margin: 32px 0 0; padding: 0; max-width: none; }
  .rail-left .card:not(.contact) { display: block; }
  .rail-left { grid-area: left; }
  .rail-right { grid-area: right; }
  /* the cabin no taller than the left card column (about 650px) on wider screens */
  .room { max-width: min(788px, var(--fit, 9999px) * 1.213); }
}

/* ---------- narrow screens */
@media (max-width: 860px) {
  .section { grid-template-columns: 1fr; gap: 12px; padding: 40px 0; }
  .proj { grid-template-columns: 1fr; }
  .scene-box { width: 100%; max-width: 300px; }
}
@media (max-width: 640px) {
  /* the name and the theme button on one row, every section link below them (wrapping, nothing hidden off screen) */
  .masthead { flex-wrap: wrap; padding: 10px 16px; gap: 6px 16px; }
  #nav { order: 3; flex-basis: 100%; flex-wrap: wrap; gap: 4px 13px; margin-left: 0; font-size: 14px; }
  .hero { padding: 32px 16px 16px; }
  .lede { font-size: 18px; }
  .sections, .rail-left { padding-left: 16px; padding-right: 16px; }
  .skills { grid-template-columns: 1fr; }
  /* the portrait small at the top right, the intro wrapping round it */
  .hero-head { display: flow-root; }
  .hero-head .framed { float: right; width: 93px; margin: 0 0 8px 16px; }
  .rows summary { grid-template-columns: 1fr; gap: 2px; }
  /* the whole cabin at phone width (smaller, so the sections come sooner) */
  .room { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- short pixel tours (tours.js): a pixel window over the page */
.tour-btn { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 2px; padding: 6px 12px; border: 2px solid var(--ink); border-radius: 0; background: var(--surface); color: var(--ink); font: 500 13px var(--mono); cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
.tour-btn span { color: var(--accent); }
.tour-btn:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.tour-btn:active { transform: translate(3px, 3px); box-shadow: none; }
.tour-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.proj:has(.tour-btn) .scene-box { cursor: pointer; }
.proj:has(.tour-btn) .scene-box:hover img { filter: saturate(1.1) brightness(1.04); }

.pxwin { width: min(860px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; overflow: auto; border: 2px solid #2c313c; border-radius: 10px; background: #101114; color: #e9ecf1; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.pxwin::backdrop { background: rgba(6, 7, 9, .78); backdrop-filter: blur(3px); }
.pxwin-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-bottom: 1px solid #1f232c; }
.pxwin-title { color: #8a919c; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pxwin-x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0 0 2px; border: 1px solid #2c313c; border-radius: 50%; background: #161920; color: #e9ecf1; font: 400 18px/1 var(--font); cursor: pointer; }
.pxwin-x:hover { background: #222631; }
.pxwin-head { padding: 18px 26px 10px; }
.pxwin-head.in { animation: capIn .45s ease-out; }
.pxwin-eyebrow { margin: 0 0 4px; color: #e8915f; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.pxwin-h { margin: 0; color: #f2f2f0; font: 600 24px/1.2 "Pixelify Sans", var(--font); letter-spacing: 0.01em; }
.pxwin-stage { padding: 0; }
.pxwin-stage { display: flex; justify-content: center; background: #101114; position: relative; }
.pxwin-head { position: relative; }
.pxwin-try[hidden] { display: none !important; }
.pxwin-try { position: absolute; top: 14px; right: 26px; max-width: 46%; text-align: right; margin: 0; padding: 4px 10px; border: 1px solid #e8915f; border-radius: 999px; background: rgba(16, 17, 20, .88); color: #e8915f; font: 500 12px/1.3 var(--font); pointer-events: none; }
.pxwin-try.wait { background: #e8915f; color: #101114; animation: tryPulse 1.6s ease-in-out infinite; }
@keyframes tryPulse { 50% { box-shadow: 0 0 0 5px rgba(232, 145, 95, .25); } }
@media (prefers-reduced-motion: reduce) { .pxwin-try.wait { animation: none; } }
.pxwin-stage canvas { display: block; flex: none; image-rendering: pixelated; image-rendering: crisp-edges; background: #101114; touch-action: manipulation; }
.pxwin-sub { display: flex; align-items: flex-start; justify-content: center; min-height: 2.9em; margin: 0; padding: 4px 26px 14px; background: #101114; color: #f2f2f0; font: 400 17px/1.45 var(--font); text-align: center; text-wrap: balance; letter-spacing: .005em; }
.pxwin-sub.in { animation: capIn .35s ease-out; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes capIn { from { opacity: 0; transform: translateY(4px); } }
.pxwin-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid #1f232c; }
.pxb { min-width: 36px; height: 32px; padding: 0 10px; border: 1px solid #2c313c; border-radius: 8px; background: #161920; color: #e9ecf1; font: 600 12px var(--mono); cursor: pointer; }
.pxb:hover { background: #222631; }
.pxb.play { min-width: 44px; background: #f2f2f0; border-color: #f2f2f0; color: #101114; }
.pxb.snd { display: inline-grid; place-items: center; }
.pxb.snd[hidden] { display: none; }
.pxb.snd svg { display: block; }
.pxb.snd[aria-pressed="true"] .off, .pxb.snd[aria-pressed="false"] .on { display: none; }
.pxb.snd[aria-pressed="false"] { color: #8a919c; }
.pxwin-track { position: relative; flex: 1 1 240px; min-width: 180px; height: 32px; border: 1px solid #2c313c; border-radius: 8px; background: #121418; overflow: hidden; cursor: pointer; touch-action: none; user-select: none; }
.pxwin-track.drag { cursor: grabbing; }
.pxwin-knob { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #e8915f; box-shadow: 0 0 0 3px rgba(232, 145, 95, .25); pointer-events: none; opacity: 0; transition: opacity .15s; }
.pxwin-track:hover .pxwin-knob, .pxwin-track.drag .pxwin-knob, .pxwin-track:focus-visible .pxwin-knob { opacity: 1; }
.pxwin-bar-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(232, 145, 95, .16); border-right: 2px solid #e8915f; }
.pxwin-dots { position: absolute; inset: 0; display: flex; }
.pxwin-dots span { display: flex; align-items: center; justify-content: center; border-right: 1px solid #2c313c; color: #8a919c; font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.pxwin-dots span:last-child { border-right: 0; }
.pxwin-dots span.on { color: #fff; }
.pxwin-link { margin-left: auto; color: #8fb8e6; font: 600 13px var(--mono); }
.pxwin :focus-visible { outline: 2px solid #e8915f; outline-offset: 2px; }
@media (max-width: 640px) {
  .pxwin-sub { font-size: 15px; min-height: 4.35em; padding: 4px 14px 10px; }
  .pxwin-head { padding: 14px 16px 8px; }
  .pxwin-h { font-size: 18px; }
  .pxwin-try { position: static; display: inline-block; max-width: none; margin-top: 6px; border-radius: 10px; text-align: left; }
  .pxwin-ctl { padding: 8px 12px 14px; }
  .pxwin-link { margin-left: 0; flex-basis: 100%; }
}

/* ---------- "Get in touch": a button in the contact card, and its window (main.js) */
.contact .card-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.msg-btn { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.msg-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.msg-btn:focus-visible, .msgwin :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.msgwin { width: min(500px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; overflow: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: 0 24px 70px rgba(0, 0, 0, .35); }
.msgwin::backdrop { background: rgba(10, 9, 8, .55); backdrop-filter: blur(2px); }
.msg-form { display: grid; gap: 12px; padding: 18px 20px 20px; }
.msg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.msg-head h2 { margin: 0; font-size: 18px; font-weight: 600; }
.msg-x { display: grid; place-items: center; width: 28px; height: 28px; padding: 0 0 2px; border: 1px solid var(--line); border-radius: 50%; background: var(--bg); color: var(--ink); font: 400 18px/1 var(--font); cursor: pointer; }
.msg-note { margin: -4px 0 0; color: var(--muted); font-size: 14px; }
.msg-form label { display: grid; gap: 4px; color: var(--ink); font-size: 13.5px; font-weight: 500; }
.msg-form label small { color: var(--muted); font-size: inherit; font-weight: 400; }
.msg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .msg-row { grid-template-columns: 1fr; } }
.msg-form input, .msg-form textarea, .msg-form select { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font); }
.msg-form textarea { resize: vertical; min-height: 110px; }
.msg-form input::placeholder { color: var(--muted); opacity: .7; }
.msg-form input:focus, .msg-form textarea:focus, .msg-form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.msg-honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.msg-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.msg-status { margin: 0; color: var(--muted); font-size: 13.5px; }
.msg-status.ok { color: #3f8f5f; }
.msg-status.bad { color: #c0483c; }
.msg-send { flex: none; padding: 8px 20px; border: 0; border-radius: 99px; background: var(--ink); color: var(--bg); font: 600 14px var(--font); cursor: pointer; }
.msg-send:hover { background: var(--accent); }
.msg-send:disabled { opacity: .6; cursor: wait; }
.msg-done { display: grid; justify-items: center; gap: 10px; padding: 34px 28px 28px; text-align: center; }
.msg-done[hidden], .msg-form[hidden] { display: none; }
.msg-done h2 { margin: 4px 0 0; font-size: 22px; font-weight: 600; outline: none; }
.msg-done p { max-width: 34ch; margin: 0 0 8px; color: var(--muted); font-size: 15px; }
.msg-done b { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.msg-check { width: 52px; height: 52px; fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.msg-check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: msgTick .5s .15s ease-out forwards; }
@keyframes msgTick { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .msg-check path { animation: none; stroke-dashoffset: 0; } }