@font-face { font-family: Gloock; src: url('./assets/fonts/gloock-regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Noto Sans SC'; src: url('./assets/fonts/noto-sans-sc-subset.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root {
  --color-bg: oklch(.974 .002 110); --color-surface: oklch(.995 0 0); --color-raised: oklch(.938 .003 110);
  --color-ink: oklch(.245 .005 155); --color-muted: oklch(.49 .008 155); --color-line: oklch(.86 .004 155);
  --color-accent: oklch(.62 .148 31); --color-action: oklch(.51 .137 31); --color-accent-tint: oklch(.925 .027 31);
  --color-canvas: oklch(.895 .025 161); --color-tool: oklch(.91 .026 47); --color-game: oklch(.89 .033 246);
  --cursor-color: #272c29; --cursor-fill: #272c2910; --header-fill: #f6f6f4ed;
  --font-serif: Gloock, Georgia, serif; --font-sans: 'Noto Sans SC', 'PingFang SC', system-ui, sans-serif;
  --ease: cubic-bezier(.22,1,.36,1); --gutter: 64px; --content-width: 1200px; --header-height: 88px;
  --motion-press: 120ms; --motion-feedback: 240ms; --motion-panel: 420ms;
  --motion-collection: 600ms; --motion-theme: 620; --motion-dot: 20; --motion-ring: 110;
  --motion-cursor-hover: 320ms; --cursor-hover-scale: 1.25;
  --dock-compact-height: 64px; --dock-gap: 48px; --dock-compact-gap: 28px;
  --z-header: 10; --z-floating: 12; --z-cursor: 20; --z-skip: 30;
  --atmosphere-ink: #3c4f52; --atmosphere-cool: #849baf; --atmosphere-warm: #b76350;
  --continuity-grid: rgb(49 68 69 / .038); --continuity-cool: rgb(92 122 145 / .095); --continuity-warm: rgb(183 99 80 / .06);
  --footer-fill: rgb(253 253 251 / .66);
}
:root[data-theme='dark'] {
  --color-bg: oklch(.215 .005 155); --color-surface: oklch(.263 .006 155); --color-raised: oklch(.31 .006 155);
  --color-ink: oklch(.94 .004 115); --color-muted: oklch(.735 .009 145); --color-line: oklch(.39 .008 155);
  --color-accent: oklch(.725 .128 31); --color-action: oklch(.755 .113 31); --color-accent-tint: oklch(.325 .035 31);
  --color-canvas: oklch(.31 .029 163); --color-tool: oklch(.33 .027 41); --color-game: oklch(.32 .027 244);
  --cursor-color: #eaece7; --cursor-fill: #eaece717; --header-fill: #181a19ed;
  --atmosphere-ink: #1b303b; --atmosphere-cool: #465d73; --atmosphere-warm: #c27b63;
  --continuity-grid: rgb(190 207 214 / .045); --continuity-cool: rgb(70 93 115 / .17); --continuity-warm: rgb(194 123 99 / .09);
  --footer-fill: rgb(35 38 36 / .70);
}
*, *::before, *::after { box-sizing: border-box; letter-spacing: 0; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
html.is-scroll-locked { overflow: hidden; overscroll-behavior: none; }
body {
  margin: 0;
  background-color: var(--color-bg);
  background-image:
    radial-gradient(ellipse 72rem 48rem at 94% 9%,var(--continuity-cool),transparent 70%),
    radial-gradient(ellipse 58rem 42rem at 4% 55%,var(--continuity-warm),transparent 72%),
    radial-gradient(ellipse 66rem 46rem at 88% 86%,var(--continuity-cool),transparent 74%),
    linear-gradient(var(--continuity-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--continuity-grid) 1px,transparent 1px);
  background-size: auto,auto,auto,92px 92px,92px 92px;
  background-repeat: no-repeat,no-repeat,no-repeat,repeat,repeat;
  color: var(--color-ink); font: 400 1rem/1.75 var(--font-sans); -webkit-font-smoothing: antialiased;
  transition: background-color .28s, color .28s;
}
h1,h2,h3,p,ul,figure,dl,dd { margin: 0; padding: 0; }
h1,h2,h3 { font-weight: 500; line-height: 1.3; text-wrap: balance; overflow-wrap: anywhere; }
p { text-wrap: pretty; } a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; } button,a,summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:disabled { opacity: .4; cursor: not-allowed; } button,summary { -webkit-user-select: none; user-select: none; }
svg { display: inline-block; flex: none; vertical-align: middle; } img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
::selection { background: var(--color-accent-tint); color: var(--color-action); }
:focus-visible { outline: 2px solid var(--color-action); outline-offset: 6px; }
[tabindex='-1']:focus:not(:focus-visible) { outline: none; }
.container { width: 100%; max-width: calc(var(--content-width) + var(--gutter)*2); padding-inline: var(--gutter); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: var(--z-skip); top: 16px; left: 16px; background: var(--color-surface); padding: 12px 20px; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.module-status { font-size: .875rem; color: var(--color-muted); } .module-status:empty { display: none; }
.site-header { position: fixed; inset: 0 0 auto; z-index: var(--z-header); padding-top: env(safe-area-inset-top); transition: background-color .25s, border-color .25s; border-bottom: 1px solid transparent; }
.site-header.is-scrolled { background: var(--header-fill); border-bottom-color: var(--color-line); backdrop-filter: blur(14px); }
.header-inner { min-height: var(--dock-display-height,var(--header-height)); display: flex; align-items: center; gap: var(--dock-gap); transition: min-height var(--motion-panel) var(--ease), gap var(--motion-panel) var(--ease); }
.site-header:not(.player-dock).is-compact { --dock-display-height: var(--dock-compact-height); --dock-gap: var(--dock-compact-gap); }
.site-header:not(.player-dock).is-compact .brand-monogram { font-size: 1.75rem; }
.brand { font: 400 1.75rem/1 var(--font-serif); text-decoration: none; display: inline-block; }
.brand-monogram { width: 44px; height: 44px; flex: none; display: flex; align-items: center; position: relative; font-size: 2.125rem; transition: font-size var(--motion-panel) var(--ease); }
.signature-dot { width: 5px; height: 5px; background: var(--color-accent); border-radius: 50%; margin: 22px 0 0 5px; }
.brand-j { color: var(--color-accent); } .wordmark-period { color: var(--color-ink); }
.site-nav { display: flex; align-items: center; gap: 32px; margin-left: auto; }
.site-nav a { display: grid; place-items: center; min-height: 44px; min-width: 44px; position: relative; font-size: .875rem; }
.site-nav a::after { content: ''; position: absolute; inset: auto 7px 6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease); }
.site-nav a:hover::after,.site-nav a:focus-visible::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 20px; }
.workspace-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--color-line); padding: 0 18px; min-height: 44px; background: transparent; border-radius: 4px; font-size: .8125rem; transition: border-color .2s, background .2s; }
.workspace-btn:hover { border-color: var(--color-ink); background: var(--color-surface); }
.icon-button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; padding: 0; color: var(--color-ink); }
.icon-button:hover { background: var(--color-raised); }
.theme-picker { position: relative; } .theme-picker summary { list-style: none; cursor: pointer; } .theme-picker summary::-webkit-details-marker { display: none; }
.theme-options { position: absolute; z-index: 1; top: calc(100% + 10px); right: 0; width: 176px; padding: 8px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 6px; }
.theme-options button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; background: none; font-size: .875rem; border-radius: 3px; }
.theme-options button:hover { background: var(--color-raised); }
.choice-mark { margin-left: auto; width: 5px; height: 5px; border-radius: 50%; background: transparent; }
[aria-pressed='true'] .choice-mark { background: var(--color-action); }
.hero { min-height: 720px; height: calc(100svh - 24px); position: relative; isolation: isolate; overflow: hidden; }
.hero-atmosphere { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }
.hero-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
#signature-scene { display: block; width: 100%; height: 100%; }
.scene-fallback { position: absolute; top: 20%; right: 16%; font: 400 24rem/1 var(--font-serif); color: var(--color-accent); opacity: .65; }
.hero-art.is-ready .scene-fallback { display: none; }
.hero-inner { height: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: var(--header-height); padding-bottom: 110px; position: relative; }
.hero-copy { position: relative; max-width: 530px; width: fit-content; }
.hero-kicker { color: var(--color-ink); font-size: .8125rem; display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.small-dash { display: inline-block; width: 22px; height: 1px; background: var(--color-action); }
h1 { font: 400 6rem/1.08 var(--font-serif); }
.hero-sub { margin-top: 30px; font-size: 1.625rem; line-height: 1.7; font-weight: 350; }
.hero-links { display: flex; align-items: center; gap: 28px; margin-top: 36px; }
.text-action { width: fit-content; display: inline-flex; align-items: center; gap: 16px; min-height: 44px; padding: 8px 0; border: 0; background: none; color: var(--color-ink); text-decoration: none; font-size: .875rem; font-weight: 500; line-height: 1.5; }
.text-action svg { transition: transform .3s var(--ease); } .text-action:hover svg { transform: translate(3px,-3px); }
.hero-action { border-bottom: 1px solid var(--color-ink); gap: 32px; padding-bottom: 12px; transition: color .22s, border-color .22s; }
.hero-action:hover,.hero-action:focus-visible { color: var(--color-action); border-color: currentColor; }
.hero-action:active svg { transform: translate(1px,-1px); }
.hero-bottom { position: absolute; bottom: 32px; left: var(--gutter); right: var(--gutter); display: flex; align-items: center; justify-content: space-between; color: var(--color-muted); font-size: .75rem; }
.scroll-cue { position: absolute; left: 50%; transform: translateX(-50%); border: 1px solid var(--color-line); }
.hero-signature { text-align: right; }
.section { position: relative; scroll-margin-top: calc(var(--dock-compact-height) + env(safe-area-inset-top) + 24px - var(--section-inset,0px)); }
#main-content { scroll-margin-top: calc(var(--header-height) + env(safe-area-inset-top)); }
.works { --section-inset: 96px; padding: 96px 0 112px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 44px; }
.section-title > p { font: 400 .875rem/1.5 var(--font-serif); color: var(--color-muted); margin-bottom: 16px; }
h2 { font-size: 2.25rem; font-weight: 400; }
.section-side { text-align: right; flex-shrink: 0; } .section-side > p { color: var(--color-muted); font-size: .8125rem; margin-bottom: 18px; }
.carousel-controls { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.carousel-arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--color-line); border-radius: 50%; background: transparent; transition: background .22s, color .22s, border-color .22s; }
.carousel-arrow:hover:not(:disabled) { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-bg); }
.carousel-arrow.previous svg { transform: rotate(180deg); }
.carousel-counter { min-width: 56px; color: var(--color-muted); font-size: .75rem; font-variant-numeric: tabular-nums; text-align: center; }
.carousel-counter strong { color: var(--color-ink); font-weight: 500; }
.carousel-viewport { width: 100%; max-width: 1600px; margin-inline: auto; overflow: hidden; touch-action: pan-y pinch-zoom; }
.carousel-track { display: flex; align-items: stretch; list-style: none; }
.collection-slide { flex: 0 0 min(860px,72%); min-width: 0; padding-right: 32px; }
.collection-slide .project { transform: scale(.955); opacity: .64; transition: transform var(--motion-collection) var(--ease), opacity var(--motion-collection) var(--ease); }
.collection-slide.is-selected .project { transform: scale(1); opacity: 1; }
.project { position: relative; min-width: 0; overflow: hidden; border-radius: 6px; min-height: 490px; display: flex; flex-direction: column; align-items: flex-start; padding: 48px; background: var(--color-canvas); }
.project[data-category='tool'] { background: var(--color-tool); }
.project[data-category='game'] { background: var(--color-game); }
.project,.site-footer,.dialog { transition: background-color .28s, color .28s; }
.project-art { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.project-art canvas { width: 100%; height: 100%; display: block; }
.project > :not(.project-art) { position: relative; }
.project-category { color: var(--color-muted); font-size: .8125rem; margin-bottom: 18px; line-height: 1.5; }
.project-title,.works-fallback h3 { font-size: 2rem; font-weight: 500; max-width: 70%; }
.project-original { font: 400 1rem/1.6 var(--font-serif); margin-top: 10px; color: var(--color-muted); }
.project-summary { font-size: 1rem; margin-top: 22px; max-width: 32ch; width: 55%; }
.project-action { margin-top: auto; gap: 36px; padding-top: 24px; }
.project-action .icon-arrow { transition: transform .3s var(--ease); }
.project-action:hover .icon-arrow { transform: translateX(4px); }
.project > .project-open { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; }
.project > .project-open:focus-visible { outline-offset: -4px; }
.project > .project-entry { position: relative; z-index: 2; }
.project-caption { pointer-events: none; }
.project:has(.project-open:hover) .project-caption,.project:has(.project-open:focus-visible) .project-caption { color: var(--color-action); }
.project:has(.project-open:hover) .project-caption svg,.project:has(.project-open:focus-visible) .project-caption svg { transform: translateX(4px); }
.game-note { font-size: .75rem; color: var(--color-muted); margin-top: 4px; }
.works-list,.works-fallback { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: calc(var(--content-width) + var(--gutter)*2); padding-inline: var(--gutter); margin-inline: auto; list-style: none; }
.works-fallback > li { padding: 40px; background: var(--color-raised); border-radius: 6px; }
.collection-single { display: block; max-width: 1060px; width: 100%; }
.collection-single .project { min-height: 430px; }
.games { padding: 0 0 112px; }
.games .section-title h2 { max-width: none; }
.game-project { background: #242624 !important; color: #f5f6f2; isolation: isolate; }
.project > .game-cover { position: absolute; right: 0; top: 0; height: 100%; width: 72%; max-width: none; object-fit: cover; object-position: 65% center; z-index: -1; mask-image: linear-gradient(90deg,transparent,#000 28%); }
.game-project .project-category,.game-project .project-original,.game-project .game-note { color: #c6cbc5; }
.game-project .project-summary { width: 40%; max-width: 21ch; }
.game-project .project-action { color: #f5f6f2; }
.game-project .project-action:hover { color: #f3a998; }
.game-project .project-title { max-width: 60%; }
.game-project .game-note { margin-top: 8px; }
.legacy-entry { padding-block: 80px; }
.player-page { --header-height: 56px; --dock-compact-height: 56px; height: 100dvh; overflow: hidden; }
.player-dock { background: var(--color-bg); border-bottom-color: var(--color-line); }
.player-dock .header-inner { max-width: none; padding-inline: 24px; gap: 24px; }
.player-dock .brand-monogram { font-size: 1.75rem; }
.player-dock .signature-dot { margin-top: 16px; width: 4px; height: 4px; }
.player-back { font-size: .875rem; gap: 10px; white-space: nowrap; }
.player-title { font: 500 .875rem/1.4 var(--font-sans); border-left: 1px solid var(--color-line); padding-left: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-actions { display: flex; gap: 8px; margin-left: auto; }
.player-stage { position: fixed; inset: calc(var(--header-height) + env(safe-area-inset-top)) 0 env(safe-area-inset-bottom); }
.player-stage iframe { display: block; border: 0; width: 100%; height: 100%; background: var(--color-bg); }
.player-status { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; background: var(--color-bg); color: var(--color-ink); }
.player-loading-mark { font: 400 3rem/1 var(--font-serif); color: var(--color-accent); }
.player-recovery { display: flex; gap: 32px; }
@media (max-width: 600px) {
  .player-dock .header-inner { padding-inline: 12px; gap: 12px; }
  .player-title { padding-left: 12px; font-size: .8125rem; }
  .player-back { gap: 4px; font-size: .8125rem; }
  .player-actions { gap: 0; }
}
@media (max-width: 700px) {
  .project.game-project { min-height: 560px; padding: 28px; }
  .project > .game-cover { top: auto; bottom: 0; width: 100%; height: 58%; object-fit: cover; object-position: center 65%; mask-image: linear-gradient(#0000,#000 24%); }
  .game-project .project-summary { width: 100%; max-width: 26ch; }
  .game-project .project-title { max-width: 100%; }
  .game-project .project-action { margin-top: 12px; padding-top: 12px; }
  .game-project .game-note { margin-top: 0; }
}
.empty-state { padding-block: 48px; color: var(--color-muted); }
.project-figure { width: 100%; margin-bottom: 24px; }
.project:has(.project-figure) { min-height: auto; }
.project:has(.project-figure) .project-summary { width: 100%; }
.cover-box { aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-raised); }
.cover-box img { width: 100%; height: 100%; object-fit: cover; }
.cover-chip,.cover-fallback { color: var(--color-muted); font-size: .75rem; margin-top: 8px; }
.site-footer { padding: 64px 0 28px; background: var(--footer-fill); border-top: 1px solid var(--color-line); }
.footer-top { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; padding-bottom: 72px; }
.footer-brand { font-size: 2.625rem; } .footer-signoff > p { color: var(--color-muted); font-size: .875rem; margin-top: 22px; }
.footer-directory { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; }
.directory-group h2 { font: 500 .8125rem/1.5 var(--font-sans); margin-bottom: 16px; }
.directory-group > div { display: flex; flex-direction: column; align-items: flex-start; }
.directory-group a,.directory-group button { display: inline-flex; align-items: center; text-align: left; min-height: 44px; border: 0; background: none; padding: 6px 0; font-size: .8125rem; color: var(--color-muted); }
.directory-group a:hover,.directory-group button:hover { color: var(--color-action); }
.directory-group svg { display: none; }
.footer-inner { padding-top: 24px; border-top: 1px solid var(--color-line); display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--color-muted); font-size: .75rem; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 44px; }
.back-top { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--color-line); border-radius: 50%; background: var(--color-bg); }
.back-top.is-floating { position: fixed; right: 24px; bottom: 24px; z-index: var(--z-floating); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s, transform .25s var(--ease), visibility .25s; }
.back-top.is-floating.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-top:hover svg { transform: translateY(-3px); }
.dialog { width: min(660px,calc(100% - 40px)); max-height: min(800px,calc(100dvh - 48px)); padding: 0; border: 1px solid var(--color-line); border-radius: 8px; background: var(--color-surface); color: var(--color-ink); }
.dialog.game-dialog { width: min(520px,calc(100% - 32px)); }
.dialog[open] { display: flex; flex-direction: column; animation: dialog-in .32s var(--ease); }
.dialog::backdrop { background: #0008; } .dialog.is-closing { animation: dialog-out .18s var(--ease) forwards; }
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 32px 22px; flex-shrink: 0; }
.dialog-title { font-size: 1.5rem; }
.dialog-body { overflow: auto; overscroll-behavior: contain; padding: 0 32px 36px; }
.dialog-category { color: var(--color-muted); font-size: .8125rem; margin-bottom: 20px; }
.dialog-desc { margin-top: 16px; font-size: .9375rem; }
.dialog-note { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: .875rem; }
.dialog-facts-title { margin-top: 32px; font-size: 1rem; }
.dialog-facts { display: grid; grid-template-columns: 120px 1fr; gap: 12px 20px; margin-top: 16px; font-size: .875rem; }
.dialog-facts dt { color: var(--color-muted); }
.dialog-external { margin-top: 24px; }
.workspace-lead { font-size: 1.375rem; margin-bottom: 18px; }
.dialog-actions { margin-top: 28px; }
.btn { min-height: 44px; padding: 10px 20px; border: 1px solid var(--color-line); border-radius: 4px; background: transparent; font-size: .875rem; }
.btn:hover { background: var(--color-raised); }
.cursor-ring,.cursor-dot { position: fixed; left: 0; top: 0; z-index: var(--z-cursor); pointer-events: none; opacity: 0; }
.cursor-ring { width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 1px solid #fff; border-radius: 50%; transition: scale var(--motion-cursor-hover) var(--ease), opacity .16s; }
.cursor-ring,.cursor-dot { mix-blend-mode: difference; }
.cursor-dot { width: 4px; height: 4px; margin: -2px 0 0 -2px; background: #fff; border-radius: 50%; }
.cursor-ready,.cursor-ready a,.cursor-ready button,.cursor-ready summary,.cursor-ready .carousel-viewport { cursor: none; }
.cursor-ready .cursor-ring,.cursor-ready .cursor-dot { opacity: 1; }
.cursor-ring.is-hover { scale: var(--cursor-hover-scale); }
.cursor-ring.is-pressed { scale: .8; transition-duration: var(--motion-press); }
.cursor-ready input,.cursor-ready textarea,.cursor-ready [contenteditable='true'] { cursor: text; }
/* The new theme grows over an unchanged old snapshot, in both directions. */
.theme-transitioning,.theme-transitioning * { transition: none !important; }
.theme-transitioning .cursor-ring,.theme-transitioning .cursor-dot { opacity: 0 !important; }
::view-transition-group(root) { animation: none; }
::view-transition-old(root),::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }
::view-transition { pointer-events: none; }
@keyframes dialog-in { from { opacity: .65; transform: translateY(14px) scale(.985); } }
@keyframes dialog-out { to { opacity: 0; transform: translateY(8px); } }
@media(min-width:1700px) { :root { --content-width: 1340px; } }
@media(max-width:1050px) { :root { --gutter: 40px; } h1 { font-size: 5.5rem; } .hero-copy { max-width: 440px; } .project { padding: 36px; min-height: 450px; } .footer-top { gap: 40px; } .collection-slide { flex-basis: 78%; } }
@media(max-width:900px) {
  :root { --gutter: 24px; --header-height: 76px; --dock-compact-height: 60px; --dock-gap: 20px; --dock-compact-gap: 16px; }
  .header-actions { gap: 8px; } .site-nav { gap: 12px; }
  .workspace-btn { padding: 0 12px; } .workspace-btn svg { display: none; }
  .hero { min-height: 740px; height: 100svh; }
  .hero-inner { justify-content: flex-start; padding-top: 140px; padding-bottom: 80px; }
  .hero-copy { max-width: 100%; }
  h1 { font-size: 4.5rem; } .hero-kicker { margin-bottom: 24px; font-size: .75rem; }
  .hero-sub { font-size: 1.25rem; line-height: 1.75; margin-top: 22px; }
  .hero-links { gap: 24px; margin-top: 26px; } .hero-action { gap: 24px; }
  .hero-bottom { bottom: 24px; font-size: .6875rem; } .hero-signature { display: none; }
  .scroll-cue { position: static; transform: none; }
  .scene-fallback { top: 50%; right: 15%; font-size: 17rem; }
  .works { --section-inset: 64px; padding: 64px 0 72px; } .games { padding-bottom: 72px; }
  h2 { font-size: 1.75rem; } .section-heading { margin-bottom: 30px; gap: 20px; align-items: flex-end; }
  .section-title > p { font-size: .75rem; margin-bottom: 12px; }
  .section-side > p { display: none; } .carousel-controls { gap: 6px; } .carousel-counter { min-width: 42px; font-size: .6875rem; }
  .collection-slide { flex-basis: 87%; padding-right: 16px; }
  .project { min-height: 480px; padding: 28px; }
  .project-category { margin-bottom: 14px; font-size: .75rem; }
  .project-title { max-width: 100%; font-size: 1.625rem; }
  .project-original { font-size: .875rem; } .project-summary { max-width: 32ch; width: 100%; margin-top: 14px; }
  .collection-single { width: 100%; padding-inline: var(--gutter); }
  .collection-single .project { min-height: 480px; }
  .works-list,.works-fallback { grid-template-columns: 1fr; }
  .project-action { padding-top: 20px; }
  .footer-top { grid-template-columns: 1fr; gap: 40px; padding-bottom: 36px; }
  .footer-brand { font-size: 2.25rem; } .footer-signoff > p { margin-top: 16px; }
  .footer-directory { gap: 18px; } .footer-inner { flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 20px; }
  .site-footer { padding-top: 40px; } .back-top.is-floating { right: 16px; bottom: max(20px,env(safe-area-inset-bottom)); }
  .dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); }
  .dialog-header { padding: 24px 20px 18px; } .dialog-body { padding: 0 24px 28px; }
  .dialog-facts { grid-template-columns: 100px 1fr; gap: 12px; }
}
@media(max-width:400px) {
  :root { --gutter: 20px; --dock-gap: 10px; --dock-compact-gap: 10px; } .site-nav { gap: 4px; } .header-actions { gap: 2px; }
  .workspace-btn { padding-inline: 9px; font-size: .75rem; } h1 { font-size: 3.75rem; }
  .hero-inner { padding-top: 120px; } .hero { min-height: 690px; }
  .section-heading { flex-wrap: wrap; row-gap: 18px; } .section-side { margin-left: auto; }
  .project { padding: 24px; } .footer-directory { gap: 12px; } .directory-group a,.directory-group button { font-size: .75rem; }
}
@media(max-height:700px) and (min-width:901px) {
  .hero { min-height: 580px; } .hero-inner { padding-top: 96px; padding-bottom: 80px; }
  .hero-kicker { margin-bottom: 18px; } h1 { font-size: 5rem; } .hero-sub { font-size: 1.25rem; margin-top: 20px; } .hero-links { margin-top: 22px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto !important; } *,*::before,*::after { animation: none !important; transition: none !important; }
  .cursor-ring,.cursor-dot { display: none; } .collection-slide .project { transform: none; }
}
@media(hover:none),(pointer:coarse) { .cursor-ring,.cursor-dot { display: none; } }
@media print { .hero-art,.hero-atmosphere,.cursor-ring,.cursor-dot,.header-actions,.back-top { display: none; } .site-header { position: static; } .hero { height: auto; min-height: 400px; } .carousel-track { display: block; } .collection-slide .project { transform: none; opacity: 1; } }