/* Shared presentation for the portfolio; game screen styles live in their iframes. */
:root { --bg:#0b0c10; --panel:#121419; --text:#eef2f5; --muted:#a4a9b4; --line:#2b2e38; --pink:#ff2f7f; --cyan:#20d9ee; --content:1240px; --gutter:clamp(20px,5vw,72px); --section-space:clamp(56px,7vw,100px); }
body { background:var(--bg); line-height:1.6; }
body .interface-studies { --bg:#0b0c10; --panel:#121419; --text:#eef2f5; --muted:#a4a9b4; --line:#2b2e38; --pink:#ff2f7f; --cyan:#20d9ee; background:var(--bg); }
body .header { height:72px; min-height:72px; padding-inline:var(--gutter); background:#0b0c10ed; border-bottom:1px solid var(--line); }
body .header nav { display:flex; gap:28px; }
body .header nav a { display:block; font-size:15px; color:var(--muted); }
body .header nav a:hover { color:var(--text); }
body .header-meta { font:13px/1.5 Consolas,monospace; letter-spacing:.12em; color:var(--muted); }
body .hero { height: min(740px, calc(100svh - 72px)); min-height:540px; }
body .hero-content { position:relative; bottom:auto; max-width:calc(var(--content) + 2 * var(--gutter)); width:100%; padding:130px var(--gutter) 80px; margin:auto; }
body .hero h1 { font-size:clamp(110px,14vw,200px); line-height:.95; margin:22px 0; }
body .hero .eyebrow { color:var(--pink); font-size:14px; letter-spacing:.14em; }
body .hero-tagline { font-size:clamp(24px,3vw,38px); }
.hero-summary { max-width:370px; color:#b9bec8; font-size:17px; line-height:1.8; margin:20px 0 28px; }
.hero-link { display:inline-flex; gap:28px; align-items:center; min-height:44px; border-bottom:1px solid var(--pink); font-size:16px; }
.hero-link span { color:var(--pink); }
body main > .section, body main > #design-system, body main > #wireframes, body main > #ui-explorations, body #character > .section { width:calc(100% - 2 * var(--gutter)); max-width:var(--content); margin:0 auto; padding:var(--section-space) 0; }
body main > .section, body main > #design-system, body main > #wireframes, body main > #ui-explorations { border-top:1px solid var(--line); }
body main > #design-system > .collection, body main > #ui-explorations > .collection { width:100%; max-width:none; margin:0; padding:0; }
body #design-system #system, body #ui-explorations #journey { padding:0; }
body .section-heading, body .study-heading, body #design-system .study-heading, body main > #wireframes > .study-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin:0 0 32px; }
body .section-heading h2, body .study-heading h2 { color:var(--text); font:500 clamp(28px,3.3vw,44px)/1.15 Arial,Helvetica,sans-serif; letter-spacing:-.045em; }
body .section-heading .eyebrow, body .study-heading .eyebrow { display:block; margin:0 0 13px; color:var(--pink); font:14px/1.5 Consolas,monospace; letter-spacing:.12em; }
body .study-heading .pill { display:none; }
body .feature-video, body .ui-stage, body .gallery-item, body .gameplay-player, body .motion-player { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#08090c; }
body .feature-video, body .ui-stage { aspect-ratio:16/9; }
body .feature-video video { width:100%; height:100%; object-fit:contain; }
body .interface-toolbar { padding:0 0 20px; border:0; }
body .screen-position { display:flex; align-items:center; gap:18px; }
body #screen-counter { color:var(--pink); font:15px Consolas,monospace; }
body #screen-context-title { font:500 17px Arial,sans-serif; }
body .screen-arrow { width:44px; height:44px; border:1px solid var(--line); border-radius:6px; background:var(--panel); }
body .ui-tabs { display:flex; gap:10px; padding:4px 0 20px; overflow-x:auto; scrollbar-width:thin; }
body .ui-tabs button { flex:1 0 105px; min-width:105px; padding:0; border:1px solid var(--line); border-radius:6px; background:var(--panel); box-shadow:none; position:relative; }
body .ui-tabs button[aria-selected=true] { border:1px solid var(--pink); background:#28121d; box-shadow:inset 0 -2px var(--pink); }
body .ui-tabs button:hover { transform:none; border-color:var(--pink); background:#20151c; }
body .screen-tab-label { font-size:14px; padding:11px 9px; }
body .screen-tab-label:after { content:none; }
body .interface-studies .board { background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden; box-shadow:none; }
body #design-system .source-token-bar { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:16px; padding:28px; }
body #design-system .source-token-bar i { height:64px; border-radius:5px; border:1px solid #ffffff20; margin-bottom:12px; }
body #design-system .source-token-bar strong { font-size:14px; line-height:1.5; min-height:34px; }
body #design-system .source-token-bar code { font-size:14px; color:var(--muted); }
body #design-system .system-foundations { display:grid; grid-template-columns:1.15fr 1fr; }
body #design-system .system-foundations > article { min-width:0; padding:28px; }
body #design-system .module-label { color:var(--muted); font-size:13px; line-height:1.7; display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; }
body #design-system .source-type-row { overflow-wrap:anywhere; }
body #design-system .source-type-row > span { font-size:14px; color:var(--muted); line-height:1.7; }
body #design-system .source-state-spec { padding:28px; border-top:0; }
body #design-system .state-spec-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:24px; }
body #design-system .state-spec-grid article { display:block; min-width:0; padding:0; }
body #design-system .state-spec-grid article img { width:150px; height:132px; object-fit:contain; margin:0 0 18px; }
body #design-system .state-spec-grid article h3 { font-size:17px; margin-bottom:14px; }
body #design-system .state-spec-grid article dl { display:grid; grid-template-columns:auto 1fr; gap:8px 14px; font-size:14px; line-height:1.6; }
body #design-system .state-spec-grid article dt, body #design-system .state-spec-grid article dd { display:block; margin:0; overflow-wrap:anywhere; }
body #design-system .state-spec-grid article dd { color:var(--muted); }
body #design-system #selection-motion { padding-top:56px; }
body #selection-motion .compact-motion-board { background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
body #selection-motion .study-heading h2 { font-size:28px; }
body #selection-motion .compact-motion-card { padding:24px; }
body #selection-motion .compact-motion-title h3 { font-size:18px; }
body #selection-motion .motion-controls { gap:8px; padding-top:18px; }
body #selection-motion .motion-controls button { min-height:44px; min-width:44px; border-radius:5px; }
body #wireframes .wire-options { gap:20px; }
body #wireframes .wire-option { padding:20px; border:1px solid var(--line); background:var(--panel); border-radius:8px; }
body #wireframes .option-name { font-size:16px; }
body #wireframes .option-caption { font-size:13px; color:var(--muted); }
body #wireframes .comparison-heading { margin-top:36px; }
body #wireframes .comparison-heading h3 { font-size:23px; }
body #wireframes .comparison-specs { border-color:var(--line); border-radius:0 0 10px 10px; overflow:hidden; }
body #wireframes .padding-breakdown:empty { display:none; }
body #journey .viewport-picker { padding:28px; background:var(--panel); }
body #journey .viewport-picker h3 { font-size:21px; letter-spacing:-.02em; }



body #journey .hud-playback-toolbar { background:var(--panel); padding:18px 28px; }
body #journey .source-hud-tabs { padding:20px; gap:12px; }
body #journey .source-hud-tabs button { border-radius:6px; padding:16px; background:#171a21; border:1px solid var(--line); }
body #journey .source-hud-tabs button[aria-pressed=true] { border-color:var(--pink); background:#28121d; }
body .gameplay-grid, body .gallery-grid { gap:24px; }
body .gallery-item { margin:0; aspect-ratio:16/9; }
body #character { background:var(--bg); border-block:1px solid var(--line); }
body .character-art-pair { gap:24px; }
body .character-art-pair > figure { margin:0; border:1px solid var(--line); border-radius:10px; padding:20px; }
body .character-motion-grid .model-stage { height:clamp(380px,50vw,620px); }
body .development-grid .motion-player { max-width:none; }
body footer { max-width:var(--content); margin:0 var(--gutter); padding:28px 0; }
body footer a { font-size:15px; color:var(--muted); }
:where(a,button,input):focus-visible { outline:2px solid var(--cyan); outline-offset:4px; }
@media(min-width:1380px) { body footer { margin-inline:auto; } }
@media(max-width:900px) {
  body #design-system .source-token-bar { grid-template-columns:repeat(4,minmax(0,1fr)); }
  body #design-system .system-foundations { grid-template-columns:1fr; }
  body #design-system .system-foundations > article:first-child { border-right:0; border-bottom:0; }
  body #design-system .state-spec-grid { grid-template-columns:1fr; }
  body #design-system .state-spec-grid article { display:grid; grid-template-columns:110px 1fr; gap:0 20px; }
  body #design-system .state-spec-grid article img { width:110px; height:100px; grid-row:span 2; }
}
@media(max-width:600px) {
  body .header { height:64px; min-height:64px; }
  body .header nav { gap:16px; }
  body .header nav a { font-size:14px; }
  body .header-meta { display:none; }
  body .hero { height:650px; min-height:0; }
  body .hero-art { width:100%; height:72%; object-position:60% 25%; }
  body .hero-content { position:absolute; bottom:36px; padding:0 var(--gutter); }
  body .hero h1 { font-size:clamp(96px,25vw,140px); margin:16px 0; }
  body .hero-summary { font-size:16px; max-width:290px; margin:16px 0; }
  body .hero .eyebrow { font-size:13px; }
  body .section-heading, body .study-heading { align-items:start; }
  body #design-system .source-token-bar { grid-template-columns:repeat(2,minmax(0,1fr)); padding:20px; gap:20px; }
  body #design-system .source-token-bar strong { min-height:0; margin-bottom:6px; }
  body #design-system .system-foundations > article, body #design-system .source-state-spec { padding:20px; }
  body #design-system .type-screen > strong { font-size:32px; }
  body #design-system .type-item-source > strong { font-size:23px; }
  body #design-system .geometry-details { gap:10px; }
  body #design-system .state-spec-grid article { grid-template-columns:85px minmax(0,1fr); gap:0 12px; }
  body #design-system .state-spec-grid article img { width:85px; height:85px; }
  body #selection-motion .compact-motion-board { grid-template-columns:1fr; }
  body #selection-motion .compact-motion-card { padding:20px; }
  body #wireframes .wire-options { grid-template-columns:1fr; }
  body #wireframes .layout-spec-row { grid-template-columns:1fr 1fr; }
  body #journey .viewport-picker { padding:20px; }
  body #journey .hud-playback-toolbar { padding:16px; gap:12px; flex-wrap:wrap; }
  body #journey .source-hud-tabs { padding:12px; gap:8px; }
  body #journey .source-hud-tabs button { padding:8px; }
  body #journey .hud-live-stage { min-height:0; padding:12px; }
  body .gameplay-grid, body .gallery-grid, body .character-art-pair { grid-template-columns:1fr; gap:16px; }
  body .gallery-item { grid-column:auto; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* HUD board: the aspect picker, the live stage, and the state tabs share one screen, no scrolling. */
body #journey .viewport-picker { display:grid; grid-template-columns:minmax(220px,1fr) auto; align-items:center; gap:24px; padding:16px 28px !important; }
body #journey .viewport-picker > div:first-child { min-width:0; }
body #journey .viewport-picker h4 { margin:2px 0 4px !important; }
body #journey .viewport-picker .pf-module-description { margin:0 !important; font-size:16px !important; line-height:1.5 !important; }




body #journey .viewport-status { padding:10px 28px !important; }
body #journey .hud-live-stage { aspect-ratio:auto !important; height:clamp(280px, calc(100vh - 400px), 620px) !important; max-height:none !important; min-height:0 !important; padding:20px !important; display:grid !important; place-items:center !important; }
@media(max-width:760px) {
  body #journey .viewport-picker { grid-template-columns:1fr; gap:12px; }
  body #journey .hud-live-stage { height:clamp(200px, calc(100vh - 440px), 420px) !important; padding:12px !important; }
}

/* Design system: colour codes carry an IDE-style swatch; rows and labels line up; no stray rules. */
body #design-system .color-code { display:inline-flex; align-items:center; gap:8px; font-family:var(--pf-mono,Consolas,monospace); font-size:inherit; color:inherit; text-transform:none; letter-spacing:0; }
body #design-system .color-code::before { content:''; flex:none; width:10px; height:10px; border-radius:2px; background:var(--token); border:1px solid rgba(255,255,255,.22); box-shadow:0 0 0 1px rgba(0,0,0,.45); }
body #design-system .source-type-row:last-child { border-bottom:0 !important; margin-bottom:0 !important; padding-bottom:0 !important; }
body #design-system .source-state-spec { border-bottom:0 !important; }
body #design-system .state-spec-grid article dl { grid-template-columns:84px minmax(0,1fr) !important; align-items:baseline; gap:8px 12px !important; }
body #design-system .state-spec-grid article dt { white-space:nowrap; }
/* One divider colour and weight throughout the design system panel, with no doubled rule between blocks. */
body #design-system .accurate-system { --panel-line:#2b2e38; }
body #design-system .source-token-bar { border-bottom:0 !important; }
body #design-system .system-foundations { border-bottom:0 !important; }
body #design-system .system-foundations > article:first-child { border-right:0 !important; border-bottom:0 !important; }
body #design-system .source-state-spec { border-top:0 !important; border-bottom:0 !important; }
body #design-system .source-type-row { border-bottom-color:var(--panel-line) !important; }
@media(max-width:760px) {
  body #design-system .system-foundations > article:first-child { border-right:0 !important; border-bottom:0 !important; }
}

/* HUD state cards: the highlighted card is the current state; no caption needed. */
body #journey .source-hud-tabs button::after { content:none !important; display:none !important; }

/* Interface motion: an auto play control and a timeline-style scrubber with frame ticks and a playhead. */
body #selection-motion .motion-controls { display:flex; align-items:center; gap:14px; padding-top:18px; }
body #selection-motion .motion-play-button { gap:8px; padding:0 14px; font-size:15px; letter-spacing:.02em; transition:opacity .2s,background .2s,border-color .2s; }
body #selection-motion .motion-play-button[disabled] { opacity:.38; cursor:default; background:transparent; border-color:#20d9ee33; }
body #selection-motion .motion-play-button[disabled]:hover { background:transparent; border-color:#20d9ee33; }
body #selection-motion .motion-timeline { flex:1; min-width:0; display:flex; align-items:center; gap:12px; }
body.pf-system.pf-unified[data-portfolio] #selection-motion .motion-controls input[type='range'] {
  appearance:none !important; -webkit-appearance:none !important; flex:1; min-width:0; width:auto; height:30px; min-height:30px; margin:0; padding:0;
  background:transparent !important; cursor:pointer; --track:#0d1017; --tick:rgba(255,255,255,.16); --fill:rgba(32,217,238,.28);
}
body.pf-system.pf-unified[data-portfolio] #selection-motion .motion-controls input[type='range']::-webkit-slider-runnable-track {
  height:30px; border-radius:4px; border:1px solid #2b2e38;
  background:linear-gradient(90deg,var(--fill) 0,var(--fill) calc(var(--progress,0) * 100%),transparent calc(var(--progress,0) * 100%)),
    repeating-linear-gradient(90deg,var(--tick) 0 1px,transparent 1px calc(100% / var(--ticks,10))),
    repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px calc(100% / var(--ticks,10) / 2)),
    var(--track);
  background-origin:border-box;
}
body.pf-system.pf-unified[data-portfolio] #selection-motion .motion-controls input[type='range']::-webkit-slider-thumb {
  appearance:none; -webkit-appearance:none; width:3px; height:30px; margin-top:-1px; border:0; border-radius:1px; background:#20d9ee;
  box-shadow:0 0 0 1px rgba(2,3,5,.9),0 0 10px rgba(32,217,238,.8);
}
body.pf-system.pf-unified[data-portfolio] #selection-motion .motion-controls input[type='range']::-moz-range-track {
  height:30px; border-radius:4px; border:1px solid #2b2e38;
  background:repeating-linear-gradient(90deg,var(--tick) 0 1px,transparent 1px calc(100% / var(--ticks,10))),var(--track);
}
body.pf-system.pf-unified[data-portfolio] #selection-motion .motion-controls input[type='range']::-moz-range-progress { height:30px; background:var(--fill); border-radius:4px 0 0 4px; }
body.pf-system.pf-unified[data-portfolio] #selection-motion .motion-controls input[type='range']::-moz-range-thumb { width:3px; height:30px; border:0; border-radius:1px; background:#20d9ee; box-shadow:0 0 10px rgba(32,217,238,.8); }
body.pf-system.pf-unified[data-portfolio] #selection-motion .motion-controls input[type='range']:focus-visible { outline:2px solid #20d9ee; outline-offset:3px; }
body #selection-motion .motion-time { flex:none; min-width:58px; text-align:right; font:14px/1 var(--pf-mono,Consolas,monospace); letter-spacing:.04em; color:#20d9ee; font-variant-numeric:tabular-nums; }
@media(max-width:600px) {
  body #selection-motion .motion-controls { flex-wrap:wrap; }
  body #selection-motion .motion-timeline { flex-basis:100%; }
}
body #selection-motion .motion-timeline::before, body #selection-motion .motion-timeline::after { content:none !important; display:none !important; }

/* 3D character: a quiet drag hint until the reader turns the model. */
body #model-viewer .model-stage { position:relative; }
body #model-viewer[data-ready='true']:not([data-hinted]) .model-stage::after { content:'Drag to rotate'; position:absolute; left:50%; bottom:16px; transform:translateX(-50%); padding:7px 12px; border:1px solid rgba(255,255,255,.14); border-radius:999px; background:rgba(8,10,15,.72); color:#c8d0d7; font:14px/1 var(--pf-mono,Consolas,monospace); letter-spacing:.06em; pointer-events:none; animation:model-hint-in .6s .4s both; }
@keyframes model-hint-in { from { opacity:0; transform:translate(-50%,6px); } to { opacity:1; transform:translate(-50%,0); } }

/* Interface screens: round previous / next controls with a fine chevron and a warm hover. */
body.pf-system.pf-unified[data-portfolio] .interface-toolbar .screen-arrow { width:44px; height:44px; padding:0; border-radius:50% !important; border:1px solid rgba(255,255,255,.18) !important; background:rgba(255,255,255,.04) !important; color:#eef2f5 !important; display:grid; place-items:center; box-shadow:none !important; transition:border-color .2s,background .2s,color .2s,transform .2s; }
body.pf-system.pf-unified[data-portfolio] .interface-toolbar .screen-arrow svg { width:20px; height:20px; }
body.pf-system.pf-unified[data-portfolio] .interface-toolbar .screen-arrow svg path { stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
body.pf-system.pf-unified[data-portfolio] .interface-toolbar .screen-arrow:hover { border-color:var(--pink) !important; color:#fff !important; background:color-mix(in srgb,var(--pink) 22%,transparent) !important; transform:translateY(-1px); }
body.pf-system.pf-unified[data-portfolio] .interface-toolbar .screen-arrow:active { transform:translateY(0); background:var(--pink) !important; border-color:var(--pink) !important; }
body.pf-system.pf-unified[data-portfolio] .interface-toolbar .screen-arrow:focus-visible { outline:2px solid #20d9ee; outline-offset:3px; }
body.pf-system.pf-unified[data-portfolio] .interface-toolbar .screen-arrow + .screen-arrow { margin-left:8px; }

/* 3D character: the reset control sits as a small glass button in the corner and only appears once the model is ready. */
body.pf-system.pf-unified[data-portfolio] #model-viewer .model-reset { position:absolute; top:14px; right:14px; z-index:3; width:40px; height:40px; padding:0; display:grid; place-items:center; border-radius:50% !important; border:1px solid rgba(255,255,255,.16) !important; background:rgba(8,10,15,.62) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#dfe5ea !important; font-size:0; box-shadow:0 4px 18px rgba(0,0,0,.35) !important; transition:border-color .2s,background .2s,color .2s,transform .2s,opacity .3s; }
body.pf-system.pf-unified[data-portfolio] #model-viewer .model-reset svg { display:block; }
body.pf-system.pf-unified[data-portfolio] #model-viewer .model-reset:hover { border-color:#20d9ee !important; color:#20d9ee !important; background:rgba(8,10,15,.8) !important; }
body.pf-system.pf-unified[data-portfolio] #model-viewer .model-reset:active { transform:scale(.94); }
body.pf-system.pf-unified[data-portfolio] #model-viewer .model-reset:focus-visible { outline:2px solid #20d9ee; outline-offset:3px; }
body.pf-system.pf-unified[data-portfolio] #model-viewer:not([data-ready='true']) .model-reset { opacity:0; pointer-events:none; }
body.pf-system.pf-unified[data-portfolio] #model-viewer { position:relative; }