/* Desk, flow version: the Desk with a holographic ribbon for a wallpaper. */

@font-face {
  font-family: 'Inter Variable';
  src: url('shared/fonts/inter-latin-opsz-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Arial, sized to Inter, so nothing jumps while the font loads. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Helvetica Neue');
  size-adjust: 107.12%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light dark;
  --ikb: #002FA7;
  --ikb-soft: rgba(0, 47, 167, 0.1);
  --wp-a: #E9EDFB;
  --wp-b: #F6F4F0;
  --blob: 0.55;
  --ink: #16181D;
  --ink-2: rgba(22, 24, 29, 0.7);
  --ink-3: rgba(22, 24, 29, 0.58);
  --hairline: rgba(22, 24, 29, 0.1);
  --hairline-soft: rgba(22, 24, 29, 0.06);
  --surface: rgba(255, 253, 250, 0.93);
  --surface-solid: #FFFDFA;
  --bar: rgba(255, 253, 250, 0.72);
  --tile: rgba(22, 24, 29, 0.05);
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 24px -8px rgba(16, 24, 40, 0.14);
  --shadow-2: 0 2px 4px rgba(16, 24, 40, 0.06), 0 24px 48px -16px rgba(16, 24, 40, 0.28);
  --shadow-3: 0 4px 8px rgba(16, 24, 40, 0.08), 0 40px 72px -16px rgba(16, 24, 40, 0.38);
  --settle: cubic-bezier(0.22, 1, 0.36, 1);
  --quick: cubic-bezier(0.2, 0.7, 0.2, 1);
  --leave: cubic-bezier(0.4, 0, 0.8, 0.2);
  --bar-h: 32px;
  --dock-reserve: 96px;
  --radius: 12px;
  --font: 'Inter Variable', 'Inter Fallback', system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --wp-a: #14151C;
    --wp-b: #0F0F11;
    --blob: 0.32;
    --ink: #F2F1EE;
    --ink-2: rgba(242, 241, 238, 0.7);
    --ink-3: rgba(242, 241, 238, 0.58);
    --hairline: rgba(255, 255, 255, 0.1);
    --hairline-soft: rgba(255, 255, 255, 0.06);
    --surface: rgba(32, 33, 40, 0.93);
    --surface-solid: #202128;
    --bar: rgba(28, 29, 36, 0.72);
    --tile: rgba(255, 255, 255, 0.07);
    --ikb-soft: rgba(90, 130, 255, 0.16);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -8px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.3), 0 24px 48px -16px rgba(0, 0, 0, 0.7);
    --shadow-3: 0 4px 8px rgba(0, 0, 0, 0.3), 0 40px 72px -16px rgba(0, 0, 0, 0.8);
  }
}

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

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  font-optical-sizing: auto;
  font-feature-settings: 'tnum' 1, 'cv11' 1;
  color: var(--ink);
  background: var(--wp-b);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--ikb); color: #fff; }
:focus-visible { outline: 2px solid var(--ikb); outline-offset: 2px; }
@media (prefers-color-scheme: dark) {
  :focus-visible { outline-color: #7A9BFF; }
}
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; }
* {
  scrollbar-width: thin;
  scrollbar-color: var(--hairline) transparent;
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------ wallpaper */
.wallpaper {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: radial-gradient(120% 90% at 28% 18%, var(--wp-a), var(--wp-b));
  overflow: hidden;
}
.wallpaper::after {
  content: '';
  position: absolute;
  right: -18vmax;
  bottom: -26vmax;
  width: 72vmax;
  height: 72vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--ikb), rgba(0, 47, 167, 0) 72%);
  opacity: var(--blob);
}

/* Layers for the celebrations. */
.fx { position: fixed; inset: 0; pointer-events: none; }
.fx--back { z-index: 1; }
.fx--top { z-index: 60; }

/* -------------------------------------------------------------- menu bar */
.menubar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  font-size: 13px;
  background: var(--bar);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 1px 0 var(--hairline);
  user-select: none;
}
.menubar__name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 0 8px;
  margin-right: 4px;
}
.menubar__list { display: flex; gap: 2px; }
.menubar__item {
  height: 22px;
  padding: 0 9px;
  border-radius: 6px;
  font-weight: 500;
  transition: background-color 150ms var(--quick), transform 120ms var(--quick);
}
.menubar__item:hover { background: rgba(22, 24, 29, 0.07); }
.menubar__item:active { transform: scale(0.97); background: rgba(22, 24, 29, 0.12); }
.menubar__item[data-front] { background: var(--ikb-soft); color: var(--ikb); }
.menubar__item[data-front]:hover { background: rgba(0, 47, 167, 0.16); }
@media (prefers-color-scheme: dark) {
  .menubar__item:hover { background: rgba(255, 255, 255, 0.09); }
  .menubar__item:active { background: rgba(255, 255, 255, 0.14); }
  .menubar__item[data-front] { color: #8FAAFF; }
  .menubar__item[data-front]:hover { background: rgba(90, 130, 255, 0.24); }
}
.menubar__right {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-right: 4px;
}
.menubar__clock { font-weight: 500; font-variant-numeric: tabular-nums; }
.menubar__clock:empty { display: none; }
.menubar__place { color: var(--ink-2); }

/* --------------------------------------------------------------- desktop */
.desktop {
  position: relative;
  z-index: 2;
}
.js .desktop {
  position: fixed;
  top: var(--bar-h);
  bottom: var(--dock-reserve);
  left: 0; right: 0;
}

/* ---------------------------------------------------------------- window */
.window {
  --w: 520px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  backdrop-filter: blur(28px) saturate(1.5);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1), 0 0 0 1px var(--hairline);
  overflow: hidden;
  transition: box-shadow 220ms var(--quick);
}
.window:focus { outline: none; }
#win-work { --w: 600px; }
#win-play { --w: 760px; }
#win-studio { --w: 560px; }
#win-hello { --w: 440px; }
#win-trash { --w: 300px; }

.js .window {
  position: absolute;
  top: 0; left: 0;
  width: var(--w);
  max-width: 100%;
  max-height: 100%;
  transform-origin: 0 0;
  will-change: transform;
}
.js .window:not([data-state='open']) { display: none; }
.window[data-front] { box-shadow: var(--shadow-2), 0 0 0 1px var(--hairline); }
.window[data-dragging] { box-shadow: var(--shadow-3), 0 0 0 1px var(--hairline); transition: none; }
.window[data-dragging] .titlebar { cursor: grabbing; }
.window[data-dragging] * { user-select: none; }

.titlebar {
  position: relative;
  flex: none;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hairline-soft);
  box-shadow: 0 1px 0 var(--hairline-soft);
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.titlebar__title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  transition: color 200ms var(--quick);
}
.window[data-front] .titlebar__title { color: var(--ink); }

.lights {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 8px;
}
.light {
  --c: var(--hairline);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12);
  display: grid;
  place-items: center;
  transition: background-color 180ms var(--quick), transform 120ms var(--quick);
}
.light svg {
  width: 8px; height: 8px;
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 1.6;
  stroke-linecap: round;
  fill: none;
  opacity: 0;
  transition: opacity 120ms var(--quick);
}
.window[data-front] .light--close { --c: #FF5F57; }
.window[data-front] .light--min { --c: #FEBC2E; }
.window[data-front] .light--zoom { --c: #28C840; }
.lights:hover .light svg, .light:focus-visible svg { opacity: 1; }
.light:active { transform: scale(0.9); filter: brightness(0.85); }
.light:focus-visible { outline-offset: 1px; }
.window[data-zoomed] .light--zoom svg path { d: path('M4 4l4 4M4 8l4-4'); }

.window__body {
  padding: 24px;
  overflow: auto;
  overscroll-behavior: contain;
}

/* Text links inside windows draw an underline. */
.window__body p a {
  text-decoration: none;
  font-weight: 600;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition: background-size 200ms var(--settle), color 150ms var(--quick);
}
.window__body p a:hover, .window__body h3 a:hover { color: var(--ikb); }
.window__body p a:hover { background-size: 100% 1px; }
@media (prefers-color-scheme: dark) {
  .window__body p a:hover, .window__body h3 a:hover { color: #7A9BFF; }
}

/* ----------------------------------------------------------------- about */
.about__photo {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--hairline), 0 8px 20px -8px rgba(16, 24, 40, 0.3);
  margin-bottom: 20px;
}
.about__hello {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
}
.about__role {
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  max-width: 34em;
  margin-bottom: 20px;
}
.about__fact { color: var(--ink-2); max-width: 44em; margin-bottom: 6px; }
/* Photo on the left, the languages as two small chips on the right. */
.about__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}
.about__top .about__photo { margin-bottom: 0; }
.about__langs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.about__langs li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 7px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px var(--hairline);
  background: var(--surface-solid);
}
.about__flag { font-size: 14px; line-height: 1; }
.about__level { color: var(--ink-3); font-weight: 400; }

/* ------------------------------------------------------------------ play */
.play__creed {
  max-width: 34em;
  margin-bottom: 20px;
  padding-bottom: 20px;
  box-shadow: 0 1px 0 var(--hairline-soft);
}
.play__creedTitle {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.play__creedBody { font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.play__intro { color: var(--ink-2); margin-bottom: 18px; }
.play__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 20px;
}
.play__card { min-width: 0; }
/* The animations were made for the app's dark screen, so they sit on one. */
.play__stage {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1;
  margin-bottom: 14px;
  border-radius: 16px;
  background: #0B0B0E;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  overflow: hidden;
  cursor: pointer;
}
.lottie { position: absolute; inset: 8%; }
.lottie svg, .lottie canvas { display: block; width: 100%; height: 100%; }
.play__stage:not([data-ready]) .lottie { opacity: 0; }
.play__stage[data-failed]::after { content: 'Could not load'; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,0.5); font-size: 13px; }

/* What each animation sits on in the app. */
.stage__photo {
  position: absolute;
  z-index: 1;
  left: calc(50cqw - var(--photo-r));
  top: calc(var(--photo-y) - var(--photo-r));
  width: calc(2 * var(--photo-r)); height: calc(2 * var(--photo-r));
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}
/* bunq's balloon file has its own round cut-out the balloons rise from: a
   circle at (540, 912) with radius 151.2 in the 1080 x 1080 animation. The
   animation is scaled and placed so that circle sits exactly on the photo,
   at every size. The stage's overflow clips what rises above it. */
.play__stage--balloons { --photo-r: 19cqw; --photo-y: 50cqw; }
.play__stage--balloons .lottie {
  inset: auto;
  z-index: 2;
  pointer-events: none;
  width: calc(var(--photo-r) * 1080 / 151.2);
  height: calc(var(--photo-r) * 1080 / 151.2);
  left: calc(50cqw - var(--photo-r) * 540 / 151.2);
  top: calc(var(--photo-y) - var(--photo-r) * 912 / 151.2);
}
.stage__caption {
  position: absolute;
  left: 10%; right: 10%;
  bottom: 14%;
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: 7cqw;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-wrap: balance;
}
.play__stage--paid .lottie { inset: 10% 20% 28%; }
.play__stage--pig { background: linear-gradient(180deg, #7B1E5B 0%, #3A1030 55%, #1A0C18 100%); }
.play__stage--pig .lottie { inset: 6% 12% 30%; }
.stage__caption--pig { bottom: 11%; left: 12%; right: 12%; }
.play__title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.play__line { color: var(--ink); margin-bottom: 4px; }
.play__body { color: var(--ink-2); font-size: 14px; }

/* ------------------------------------------------------------------ work */
.work__now {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding-bottom: 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 0 var(--hairline-soft);
}
.work__tile {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--hairline);
}
.work__nowTitle { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.work__nowTitle a { text-decoration: none; transition: color 150ms var(--quick); }
.work__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-3);
  margin: 2px 0 8px;
}
.work__sep { opacity: 0.6; }
.work__blurb { color: var(--ink-2); max-width: 60ch; }
.work__before {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.work__list { display: grid; gap: 4px; }
.work__row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 12px;
  margin: 0 -12px;
  border-radius: 10px;
  transition: background-color 160ms var(--quick);
}
.work__row:hover { background: var(--tile); }
.work__logo {
  flex: none;
  width: 80px;
  height: 24px;
  display: flex;
  align-items: center;
  color: var(--ink-2);
  transition: color 160ms var(--quick);
}
.work__row:hover .work__logo { color: var(--ikb); }
.work__logo svg { height: 16px; width: auto; }
.work__logo--pvh svg { height: 24px; border-radius: 5px; }
.work__logo--freelancer svg { height: 17px; }
.work__logo--word {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.work__logoTile { width: 24px; height: 24px; border-radius: 6px; }
/* Every logo is grey until the row is hovered, then Klein blue. The Stitch
   pill is a mask painted with currentColor, so it follows along. */
.work__logoStitch {
  display: block;
  width: 52px; height: 24px;
  border-radius: 5px;
  background: currentColor;
  -webkit-mask: url('shared/logos/stitch-mask.png') center / 100% 100% no-repeat;
  mask: url('shared/logos/stitch-mask.png') center / 100% 100% no-repeat;
}
.work__logo--remote svg { height: 14px; }
.work__logoTile { filter: grayscale(1) opacity(0.75); transition: filter 160ms var(--quick); }
.work__row:hover .work__logoTile { filter: none; }
.work__nowText .work__note { margin-top: 8px; }
.work__role { font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.work__row .work__meta { margin: 1px 0 4px; }
.work__check { color: var(--ink-3); font-style: italic; }
.work__note { color: var(--ink-2); font-size: 14px; max-width: 56ch; }
@media (prefers-color-scheme: dark) {
  .work__row:hover .work__logo { color: #7A9BFF; }
}

/* ---------------------------------------------------------------- studio */
.studio__head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.studio__mark {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--ikb);
  color: #fff;
  display: grid;
  place-items: center;
}
.studio__mark svg { width: 26px; }
.studio__name { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.studio__name a { text-decoration: none; transition: color 150ms var(--quick); }
.studio__line { font-size: 13px; color: var(--ink-3); }
.studio__blurb { color: var(--ink-2); max-width: 60ch; margin-bottom: 16px; }
.studio__list { display: grid; gap: 2px; margin: 0 -12px; }
.studio__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  transition: background-color 160ms var(--quick), transform 120ms var(--quick);
}
.studio__row:hover { background: var(--tile); }
.studio__row:active { transform: scale(0.985); }
.studio__tile {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--tile);
  color: var(--ink);
  display: grid;
  place-items: center;
  transition: background-color 160ms var(--quick), color 160ms var(--quick);
}
.studio__tile svg { height: 22px; width: auto; }
.studio__row:hover .studio__tile { background: var(--ikb); color: #fff; }
.studio__text { display: grid; gap: 1px; min-width: 0; }
.studio__app { font-weight: 600; letter-spacing: -0.01em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.studio__status { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.studio__tag { font-size: 14px; color: var(--ink-2); }
.studio__arrow {
  margin-left: auto;
  color: var(--ink-3);
  font-size: 14px;
  transition: transform 200ms var(--settle), color 150ms var(--quick);
}
.studio__row:hover .studio__arrow { transform: translate(2px, -2px); color: var(--ink); }

/* ----------------------------------------------------------------- hello */
.hello__lead { color: var(--ink-2); margin-bottom: 8px; }
.hello__email {
  display: inline-block;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
  text-decoration: none;
  color: var(--ikb);
  margin-bottom: 24px;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 2px;
  transition: background-size 220ms var(--settle), color 150ms var(--quick);
}
.hello__email:hover { background-size: 100% 2px; }
.hello__email:active { transform: scale(0.98); }
@media (prefers-color-scheme: dark) { .hello__email { color: #7A9BFF; } }
.hello__links { display: grid; gap: 2px; margin: 0 -12px; }
.hello__link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  transition: background-color 160ms var(--quick), transform 120ms var(--quick);
}
.hello__link:hover { background: var(--tile); }
.hello__link:active { transform: scale(0.985); }
.hello__label { font-weight: 600; letter-spacing: -0.01em; }
.hello__handle { font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hello__link:hover .hello__handle { color: var(--ink); }

/* ----------------------------------------------------------------- trash */
.trash p { color: var(--ink-2); text-align: center; padding: 8px 0; }

/* ------------------------------------------------------------------ dock */
.dock {
  position: fixed;
  left: 50%;
  bottom: 12px;
  z-index: 40;
  transform: translateX(-50%);
  padding: 8px;
  border-radius: 22px;
  background: var(--bar);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: var(--shadow-1), 0 0 0 1px var(--hairline);
}
.dock__list {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 48px;
}
.dock__slot {
  --s: 1;
  position: relative;
  width: calc(48px * var(--s));
  height: 48px;
}
.dock__item {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 48px;
  height: 48px;
  transform: translateX(-50%) scale(var(--s));
  transform-origin: 50% 100%;
  border-radius: 12px;
  display: block;
}
.dock__item:focus-visible { outline-offset: 3px; }
.dock__item:active .dock__icon { filter: brightness(0.82); }
.dock__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);
  transition: filter 120ms var(--quick);
}
.dock__photo { width: 48px; height: 48px; object-fit: cover; }
.dock__tileImg { width: 48px; height: 48px; }
.dock__icon svg { width: 26px; height: 26px; }
.dock__icon--play { background: linear-gradient(160deg, #FF8EC7, #FF5A36); color: #fff; }
.dock__icon--studio { background: linear-gradient(160deg, #1D4BD2, var(--ikb)); color: #fff; }
.dock__icon--studio svg { width: 28px; height: auto; }
.dock__icon--hello { background: linear-gradient(160deg, #FFFFFF, #E9EDFB); color: var(--ikb); }
.dock__icon--trash { background: none; box-shadow: none; color: var(--ink-2); }
.dock__icon--trash svg { width: 30px; height: 30px; }
.dock__divider {
  width: 1px;
  height: 36px;
  margin: 0 4px 6px;
  background: var(--hairline);
}
.dock__dot {
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ink-2);
  transform: translateX(-50%) scale(0);
  transition: transform 200ms var(--settle);
}
.dock__item[data-state] .dock__dot { transform: translateX(-50%) scale(1); }
.dock__label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  transform: translateX(-50%) translateY(4px);
  padding: 4px 9px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink);
  background: var(--surface-solid);
  box-shadow: var(--shadow-1), 0 0 0 1px var(--hairline);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms var(--quick), transform 200ms var(--settle);
}
.dock__item:hover .dock__label, .dock__item:focus-visible .dock__label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* The label must not scale with the icon. */
.dock__slot { --inv: calc(1 / var(--s)); }
.dock__label { scale: var(--inv); transform-origin: 50% 100%; }

/* ----------------------------------------------------------- done card */
.cards {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.card {
  width: 240px;
  height: 240px;
  border-radius: 20px;
  background: var(--surface-solid);
  box-shadow: var(--shadow-3), 0 0 0 1px var(--hairline);
  display: grid;
  place-items: center;
  pointer-events: auto;
}
.card > div { color: var(--ink); }

/* ----------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .dock__slot, .dock__item, .dock__dot, .dock__label, .studio__arrow, .light { transition: none; }
  .dock__item:hover .dock__icon { filter: brightness(0.92); }
}

/* ----------------------------------------------------- stacked layouts */
/* Phones, and any browser without JavaScript: the windows are cards. */
@media (max-width: 759px) {
  :root { --bar-h: 44px; }
  .menubar { padding: 0 8px; }
  .menubar__nav { display: none; }
  .menubar__name { font-size: 15px; }
  .menubar__right { font-size: 13px; }
  /* Positioned, so the cards stack above the fixed wallpaper and ribbon.
     With static, Safari paints the fixed layers over the text. */
  .js .desktop { position: relative; inset: auto; }
  .desktop {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: calc(var(--bar-h) + 16px) 16px calc(124px + env(safe-area-inset-bottom));
  }
  .js .window {
    position: static;
    width: auto;
    max-height: none;
    transform: none !important;
    will-change: auto;
  }
  .js .window:not([data-state='open']) { display: flex; }
  .window { scroll-margin-top: calc(var(--bar-h) + 16px); }
  .window[data-front] { box-shadow: var(--shadow-1), 0 0 0 1px var(--hairline); }
  #win-about { order: 1; }
  #win-work { order: 2; }
  #win-play { order: 3; }
  #win-studio { order: 4; }
  #win-hello { order: 5; }
  #win-trash { display: none !important; }
  .titlebar { height: 40px; cursor: default; }
  .lights { display: none; }
  .window__body { padding: 20px; }
  .play__grid { grid-template-columns: 1fr; gap: 26px; }
  .play__stage { max-width: 360px; margin-left: auto; margin-right: auto; }
  .about__hello, .hello__email { font-size: 26px; }
  .hello__email { overflow-wrap: anywhere; }

  /* The dock is an iPhone dock: a floating frosted pill with app icons.
     The icons are squircles, 60px on a 390px phone, with no labels.
     A small dot under the icon marks the card you are reading. */
  .dock {
    --icon: clamp(50px, 14.6vw, 60px);
    --dock-inset: 10px;
    left: var(--dock-inset);
    right: var(--dock-inset);
    bottom: calc(var(--dock-inset) + env(safe-area-inset-bottom));
    transform: none;
    padding: clamp(12px, 4.1vw, 17px) clamp(10px, 4vw, 16px);
    border-radius: clamp(30px, 10.3vw, 40px);
    background: rgba(255, 255, 255, 0.46);
    -webkit-backdrop-filter: blur(30px) saturate(1.8);
    backdrop-filter: blur(30px) saturate(1.8);
    box-shadow:
      inset 0 0.5px 0 rgba(255, 255, 255, 0.6),
      0 0 0 0.5px rgba(22, 24, 29, 0.08),
      0 12px 32px -12px rgba(16, 24, 40, 0.22);
  }
  .dock__list {
    height: auto;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }
  .dock__slot {
    width: var(--icon) !important;
    height: var(--icon);
    flex: none;
    transition: none;
  }
  .dock__slot--trash, .dock__divider { display: none; }
  .dock__item {
    position: static;
    width: var(--icon);
    height: var(--icon);
    transform: none !important;
    display: block;
    border-radius: 22.37%;
    transition: none;
  }
  .dock__icon {
    width: var(--icon);
    height: var(--icon);
    border-radius: 22.37%;
    clip-path: url(#squircle);
  }
  /* The images fill the squircle; the bunq tile is drawn a little larger so
     its own rounded corners are clipped away. */
  .dock__photo { width: 100%; height: 100%; border-radius: 0; }
  .dock__tileImg { width: 112%; height: 112%; margin: -6%; max-width: none; }
  .dock__icon {
    box-shadow: 0 0 0 0.5px rgba(22, 24, 29, 0.06);
    transition: filter 100ms var(--quick);
  }
  /* Every icon in an iPhone dock is a squircle, the photo too. */
  .dock__item[data-target='about'] .dock__icon { border-radius: 22.37%; }
  .dock__icon svg { width: calc(var(--icon) * 0.5); height: calc(var(--icon) * 0.5); }
  .dock__icon--studio svg { width: calc(var(--icon) * 0.54); height: auto; }
  /* Touching an icon darkens it, like iOS. */
  .dock__item:active .dock__icon { filter: brightness(0.72); transition-duration: 0ms; }
  .dock__label { display: none; }
  .dock__dot {
    bottom: -9px;
    width: 4px; height: 4px;
    background: rgba(22, 24, 29, 0.45);
    transform: translateX(-50%) scale(0);
  }
  .dock__item[data-state] .dock__dot { transform: translateX(-50%) scale(0); }
  .dock__item[data-front] .dock__dot { transform: translateX(-50%) scale(1); }
  @media (prefers-color-scheme: dark) {
    .dock {
      background: rgba(56, 58, 68, 0.5);
      box-shadow:
        inset 0 0.5px 0 rgba(255, 255, 255, 0.14),
        0 0 0 0.5px rgba(0, 0, 0, 0.3),
        0 12px 32px -12px rgba(0, 0, 0, 0.6);
    }
    .dock__icon { box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.06); }
    .dock__dot { background: rgba(242, 241, 238, 0.55); }
  }
}

/* Without JavaScript on a wide screen: one calm column. */
html:not(.js) .desktop {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 680px;
  margin: 0 auto;
  padding: calc(var(--bar-h) + 24px) 16px 48px;
}
html:not(.js) .window { width: auto; }
html:not(.js) #win-about { order: 1; }
html:not(.js) #win-work { order: 2; }
html:not(.js) #win-play { order: 3; }
html:not(.js) #win-studio { order: 4; }
html:not(.js) #win-hello { order: 5; }
html:not(.js) #win-trash, html:not(.js) .dock, html:not(.js) .menubar__nav, html:not(.js) .lights { display: none; }
html:not(.js) .titlebar { cursor: default; }

@media (min-width: 760px) {
  .window--trash .window__body { padding: 20px 24px; }
}


/* ------------------------------------------------------------------ flow */
:root {
  --wp-a: #FBFAF8;
  --wp-b: #FBFAF8;
  --blob: 0;
  /* The glass is a little thinner here, so the ribbon shows through. */
  --surface: rgba(255, 253, 250, 0.84);
  --bar: rgba(255, 253, 250, 0.6);
}
@media (prefers-color-scheme: dark) {
  :root {
    --wp-a: #0E0E12;
    --wp-b: #0E0E12;
    --surface: rgba(32, 33, 40, 0.84);
    --bar: rgba(28, 29, 36, 0.6);
  }
}
.flow {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
/* No live blur over the moving ribbon: re-blurring it every frame costs
   more than everything else on the page. The windows are solid paper
   instead; the ribbon lives between and behind them. */
.window, .menubar, .dock {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
:root { --surface: #FFFDFA; --bar: rgba(255, 253, 250, 0.92); }
@media (prefers-color-scheme: dark) { :root { --surface: #202128; --bar: rgba(28, 29, 36, 0.92); } }
@media (max-width: 759px) {
  .dock { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, 0.78); }
  @media (prefers-color-scheme: dark) { .dock { background: rgba(56, 58, 68, 0.84); } }
}
/* The wallpaper's blue blob is gone; the ribbon is the colour. */
.wallpaper::after { display: none; }

/* ----------------------------------------------------------------- intro */
/* intro.js plays it. Until it ends, the page waits out of sight. */
.intro { overflow: hidden; }
.intro .menubar,
.intro .dock,
.intro .window { opacity: 0; }
.intro .menubar,
.intro .dock,
.intro .desktop { pointer-events: none; }

.intro__stage {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding-bottom: 6vh;
  pointer-events: none;
}
.intro__photo {
  width: 128px; height: 128px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--hairline), 0 12px 28px -10px rgba(16, 24, 40, 0.35);
  transform-origin: 0 0;
}
.intro__hello {
  width: max-content;
  font-size: 44px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.025em;
  white-space: nowrap;
  transform-origin: 0 0;
}
.intro__words, .intro__wave { display: inline-block; }
.intro__wave { transform-origin: 70% 80%; }
@media (max-width: 759px) {
  .intro__photo { width: 112px; height: 112px; }
  .intro__hello { font-size: 38px; }
}