/* SEONSPACE — Peach Clay Atelier UI (v1.22).
   Colours, depth and radii come from theme-tokens.css, generated from design-system.js
   (`npm run theme`); this file contains no colour literals. One block per selector per
   breakpoint: top-level rules first (by component), then media queries from wide to narrow.
   The page, header and footer share one peach atmosphere; the rail, dialog and controls are
   lit clay cards with violet-mauve shadows that match the 3D wall shade. */

/* ---------- Type ----------
   Pretendard: all Korean text, mixed Korean/English sentences, body copy, Korean titles and
   sub-headings, tags. Poppins: the wordmark and standalone English titles, labels, buttons and
   numeric KPIs. Weights 400/500/600/700 only. Both are self-hosted WOFF2; Poppins is the latin
   subset (four files, ~8 KB each), so Hangul and arrows fall through to Pretendard.
   Copy generated from content.js (menu labels, dialog titles, KPI values) is marked by
   typography.js and switches to Poppins only when it contains no Hangul. */
@font-face{font-family:'Pretendard';src:url('./assets/fonts/PretendardVariable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('./assets/fonts/poppins-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';src:url('./assets/fonts/poppins-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';src:url('./assets/fonts/poppins-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';src:url('./assets/fonts/poppins-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Menu numbers: in "01 / PROFILE" the digits are SemiBold and the category Medium. This face
   lends the 600 file (same URL, no extra download) to the digits only. */
@font-face{font-family:'Poppins Index';src:url('./assets/fonts/poppins-latin-600-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0030-0039}
@keyframes pulse{to{opacity:.2}}

/* ---------- Base ---------- */
:root {
  --font-ko: 'Pretendard', sans-serif;
  --font-en: 'Poppins', 'Pretendard', sans-serif;
  --header-height: 61.5px;
  --rail-width: 176px;
  --footer-height: 48px;
  --footer-space: calc(var(--footer-height) + env(safe-area-inset-bottom, 0px));
}
* {box-sizing: border-box}
html {font-family: var(--font-ko)}
/* Column layout: when the page is shorter than the viewport the footer still rests at the bottom,
   and when it is longer the footer simply follows the content (it is not fixed). */
body {
  display: flex; flex-direction: column; min-height: 100dvh;
  margin: 0;
  font-family: var(--font-ko);
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
  background: radial-gradient(ellipse at 52% 40%, var(--bg-hi) 0%, var(--bg) 58%, var(--bg-lo) 100%) fixed;
}
body.panel-open {overflow: hidden}
button {font: inherit; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent}
a {color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent}
textarea {font-family: var(--font-ko)}
/* Generated copy without Hangul (set by typography.js): standalone English titles, labels, KPIs. */
[data-script="latin"] {font-family: var(--font-en)}
button:focus-visible,
a:focus-visible {outline: 2px solid var(--accent); outline-offset: 5px}
em {font-style: normal}
[hidden] {display: none !important}
.noscript {padding: 30px; background: var(--card)}

/* ---------- Header: a thin pane of the same atmosphere ---------- */
header {
  position: sticky; top: 0; z-index: 8;
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: none; height: var(--header-height);
  margin: 0; padding: 0 4%;
  background: var(--glass);
  border-bottom: 1px solid var(--line-glass);
  box-shadow: 0 1px 0 var(--sheen);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}
.header-right {display: flex; align-items: center; gap: 45px}
/* Brand: a matte lavender badge with a capital S, then the SEONSPACE wordmark (CSS only).
   Poppins caps sit on the middle of a line-height:1 box, but the wordmark's cap centre measured
   0.3px above the badge centre and the badge's lower shade and shadow pull its optical centre
   down, so the wordmark drops 1px. */
header .brand {display: inline-flex; align-items: center; gap: 7px; height: 28px; font-family: var(--font-en); line-height: 1; white-space: nowrap; color: var(--accent)}
.brand-badge {display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; font-size: 16px; font-weight: 600; background: linear-gradient(160deg, var(--badge-hi) 10%, var(--badge) 80%); box-shadow: var(--badge-depth)}
.brand-wordmark {font-size: 16px; font-weight: 600; letter-spacing: .02em; transform: translateY(1px)}
.status {display: flex; align-items: center; gap: 9px; font-family: var(--font-en); line-height: 1.2; letter-spacing: .3px; font-size: var(--type-caption); color: var(--muted)}
.status i {width: 6px; height: 6px; border-radius: 50%; background: var(--lilac); box-shadow: 0 0 0 3px var(--tint-lilac)}
header #contact-link {display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 8px 0; border: 0; background: transparent; box-shadow: none; color: var(--ink); font-family: var(--font-en); font-size: 12px; line-height: 1.2; font-weight: 500; white-space: nowrap}
header #contact-link span {margin: 0; color: var(--accent); font-size: 14px}
header #contact-link:hover {color: var(--accent); text-decoration: underline; text-underline-offset: 4px}
.menu-toggle {display: none; background: var(--raised); border-color: var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm)}
.menu-toggle span {background: var(--accent)}

/* ---------- Intro ---------- */
main {position: relative; width: 100%; margin: 0 auto; min-height: 680px; max-width: 1900px}
.intro {position: absolute; left: 4%; top: 12%; z-index: 3; width: 273px; padding: 0; pointer-events: none}
.eyebrow {display: flex; align-items: center; gap: 9px; font-weight: 500}
.intro .eyebrow {font-family: var(--font-en); font-size: 9px; line-height: 1.25; letter-spacing: 1.1px; white-space: nowrap; color: var(--muted)}
.intro .eyebrow>span {white-space: nowrap}
.tiny-line {width: 20px; height: 1px; background: var(--accent); opacity: .35}
h1 {margin: 18px 0 19px; word-break: normal}
h1 br {display: block}
.intro h1 {font-family: var(--font-en); font-size: 32px; line-height: 1.25; font-weight: 600; letter-spacing: -1.05px; color: var(--ink)}
.sub-copy {margin: 0 0 19px; word-break: keep-all}
.intro .sub-copy {max-width: 256px; margin-bottom: 0; font-size: var(--type-body); line-height: 1.75; font-weight: 500; color: var(--text-body)}
.instruction {display: flex; line-height: 1.7}
.intro .instruction {align-items: center; gap: 7px; max-width: 100%; margin: 12px 0 0; font-size: var(--type-caption); color: var(--muted)}
.instruction>span:last-child {min-width: 0; line-height: 1.7}
.instruction .mouse-icon {flex: none; margin: 0}
.mouse-icon {position: relative; align-self: center; width: 10px; height: 14px; border: 1px solid var(--muted); border-radius: 6px}
.mouse-icon:after {content: ''; position: absolute; top: 2px; left: 4px; width: 1px; height: 3px; background: var(--muted)}
/* Hidden since v1.1; kept so the decorative note never appears. */
.room-note {display: none}

/* ---------- Scene ---------- */
#scene-wrap {position: absolute; left: 0; top: 0; bottom: 0; right: calc(var(--rail-width) + 22px); overflow: hidden}
#scene {display: block; width: 100%; height: 100%; outline: none}
#labels {position: absolute; inset: 0; pointer-events: none; opacity: 0}
#loading {position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border: 1px solid var(--line-soft); border-radius: 999px; background: var(--card-glass); box-shadow: var(--shadow-sm), var(--highlight); font-size: 13px; white-space: nowrap; color: var(--ink); pointer-events: none}
.loading-dot {width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 1s infinite alternate}
#fallback {position: absolute; inset: 28% 10%; text-align: center; color: var(--text-body)}
#fallback>span {font-size: 65px; color: var(--violet)}
#fallback h2 {font-family: var(--font-en); font-size: 35px; font-weight: 600}
#fallback p {font-size: 12px; line-height: 1.9; color: var(--text-body)}

/* ---------- 3D number labels: small clay pills, violet when active ---------- */
.object-label {
  position: absolute; top: 0; left: 0; transform: translate(-50%, -100%);
  display: flex; align-items: center; justify-content: center; gap: 0;
  min-width: 29px; min-height: 29px; padding: 4px;
  border: 1px solid var(--line); border-radius: 20px;
  background: var(--raised); color: var(--ink);
  box-shadow: var(--shadow-sm), var(--highlight);
  font-size: 10px; white-space: nowrap; pointer-events: auto;
  backdrop-filter: blur(8px);
  transition: background .2s, box-shadow .2s, border-color .2s, color .2s;
}
.object-label .label-number {min-width: 22px; padding: 0; border: 0; text-align: center; font-family: var(--font-en); font-size: 12px; line-height: 22px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent)}
.object-label .label-text {display: block; max-width: 0; padding: 0; overflow: hidden; opacity: 0; font-size: 10px; font-weight: 500; color: inherit; transition: max-width .25s, opacity .2s, padding .25s}
.object-label:after {content: ''; position: absolute; left: 50%; bottom: -16px; width: 1.5px; height: 15px; background: var(--accent); opacity: .55}
.object-label:hover,
.object-label:focus-visible,
.object-label.active {background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); box-shadow: var(--shadow-md)}
.object-label:is(:hover, :focus-visible, .active) .label-number {color: var(--on-accent)}
.object-label:hover .label-text,
.object-label:focus-visible .label-text,
.object-label.active .label-text {max-width: 140px; padding: 0 9px 0 5px; opacity: 1}

/* ---------- Navigation rail: a lit clay card ---------- */
.navigation-area {
  position: fixed; z-index: 7; right: 12px;
  top: calc(var(--header-height) + (100dvh - var(--header-height) - var(--footer-space)) / 2);
  transform: translateY(-50%);
  display: flex; flex-direction: column;
  max-height: calc(100dvh - var(--header-height) - var(--footer-space) - 24px);
  margin: 0; padding: 12px 10px; overflow: hidden;
  overscroll-behavior: contain; scrollbar-width: thin;
  background: var(--card-glass);
  border: 1px solid var(--line-soft); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md), var(--highlight);
  backdrop-filter: blur(16px);
}
.nav-heading {display: block; flex: none; padding: 3px 7px 11px; text-align: center; font-family: var(--font-en); font-size: 10px; line-height: 1.2; font-weight: 500; letter-spacing: 1.1px; color: var(--muted)}
.nav-heading>span:last-child {display: none}
.arrow {padding-left: 13px}
#object-nav {display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin}
.nav-item {
  position: relative; display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 59px; padding: 10px 7px;
  text-align: left; background: none;
  border: 1px solid transparent; border-radius: var(--radius-md);
  transition: background .16s, border-color .16s, box-shadow .16s;
}
.nav-icon {display: flex; align-items: center; justify-content: center; flex: none; width: 31px; height: 34px; padding: 5px; border-radius: var(--radius-sm); color: var(--accent); background: var(--tint-lilac); box-shadow: var(--highlight); transition: background .16s, color .16s}
.nav-icon svg {width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linejoin: round; stroke-linecap: round}
.nav-item small {display: block; margin-bottom: 4px; font-family: 'Poppins Index', var(--font-en); font-size: 10px; line-height: 1.2; font-weight: 500; letter-spacing: .3px; white-space: nowrap; color: var(--muted)}
.nav-item strong {font-size: 13px; font-weight: 500; line-height: 1.35; letter-spacing: -.2px; word-break: keep-all; color: var(--ink)}
.nav-item .nav-arrow {display: none}
.nav-item:hover {background: var(--tint-peach); border-color: var(--line)}
.nav-item:hover .nav-icon {background: var(--raised)}
.nav-item.active {background: var(--tint-lilac); border-color: var(--lilac); box-shadow: var(--highlight)}
.nav-item.active .nav-icon {background: var(--accent-fill); color: var(--on-accent); box-shadow: none}
.nav-item:focus-visible {outline: 2px solid var(--accent); outline-offset: 1px}
.navigation-area .scene-tools {
  position: static; inset: auto; flex: none; align-self: stretch;
  display: flex; justify-content: center; gap: 9px;
  margin: 10px -10px 0; padding: 10px 10px 0;
  border: 0; border-top: 1px solid var(--line-soft); border-radius: 0;
  background: var(--card-glass); box-shadow: none; backdrop-filter: none;
}
.scene-tools {z-index: 7; display: flex}
.navigation-area .scene-tools button {
  flex: none; width: 32px; height: 32px; font-size: 17px;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--raised); color: var(--accent);
  box-shadow: var(--shadow-sm);
  transition: background .16s, transform .16s;
}
.scene-tools button:hover {background: var(--tint-lilac); transform: translateY(-1px)}
.scene-tools button:active {transform: translateY(0)}
.scene-tools button:focus-visible {outline-offset: 2px}
.menu-open #menu-backdrop {background: var(--scrim)}

/* ---------- Footer: the deeper "ground" pane at the end of the page (in normal flow, not fixed) ---------- */
footer {
  position: relative; margin-top: auto;
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 12px;
  height: var(--footer-space); min-height: 0;
  padding: 0 4% env(safe-area-inset-bottom, 0px);
  font-family: var(--font-en); font-size: var(--type-caption); font-weight: 400; letter-spacing: 1px; color: var(--muted);
  background: var(--glass-deep);
}
footer>span {display: flex; align-items: center; margin: 0; line-height: 1; font-size: 11px}
footer>span:nth-child(2) {font-size: 11px; font-style: normal; letter-spacing: .2px}

/* ---------- Dialog: one lit clay card for all six stories and Contact ---------- */
#scrim {position: fixed; inset: 0; z-index: 9; background: var(--scrim); backdrop-filter: blur(5px)}
#panel {
  --dialog-title: var(--type-title); --dialog-heading: var(--type-heading); --dialog-body: var(--type-body);
  --dialog-meta: var(--type-body); --dialog-caption: var(--type-caption);
  position: fixed; top: 18px; right: 18px; bottom: 18px; z-index: 10;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(490px, calc(100vw - 36px)); max-height: calc(100dvh - 36px);
  padding: 0; overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line-soft); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), var(--highlight);
  backdrop-filter: blur(20px);
}
.panel-top {display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 51px; margin: 0; padding: 10px 24px; background: var(--card); border-bottom: 1px solid var(--line-soft)}
.panel-top>span {font-family: var(--font-en); font-size: 11px; font-weight: 500; line-height: 1.6; letter-spacing: 1px}
#panel .panel-top>span {color: var(--muted)}
.panel-top button {flex: none; width: 30px; height: 30px; font-size: 14px; border: 1px solid var(--line); border-radius: 50%; color: var(--accent); background: var(--raised); box-shadow: var(--shadow-sm); transition: background .16s}
.panel-top button:hover {background: var(--tint-lilac)}
#panel-content {min-height: 0; padding: 22px 28px 13px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--lilac) transparent; word-break: keep-all; overflow-wrap: break-word}
#panel-content:focus-visible {outline: 2px solid var(--accent); outline-offset: -3px}
.panel-bottom {display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; margin: 0; padding: 8px 24px; font-size: 10px; color: var(--muted); background: var(--card); border-top: 1px solid var(--line-soft)}
.panel-bottom button {background: none; border: 0}
.panel-bottom button span {margin-left: 6px}
#panel .panel-bottom button {min-height: 30px; padding: 5px 7px; border-radius: var(--radius-xs); font-size: var(--type-caption); font-weight: 500; color: var(--accent)}
#panel .panel-bottom button:hover {background: var(--tint-lilac)}
#panel #prev-story {margin-right: auto}
#panel #next-story {margin-left: auto}
#panel #prev-story span {margin: 0 6px 0 0}
#panel h2 {margin: 0 0 10px; font-size: var(--type-title); line-height: 1.3; font-weight: 600; letter-spacing: -.65px; word-break: keep-all; overflow-wrap: break-word; color: var(--ink)}
#panel h2 + .project-meta {margin-top: 22px}
#panel .panel-subtitle {margin: 0 0 15px; font-size: var(--type-body); line-height: 1.65; color: var(--muted)}
#panel .panel-subtitle.is-match-heading {font-size: var(--type-heading); line-height: 1.55; font-weight: 600; color: var(--ink)}
.panel-paragraph {word-break: keep-all}
#panel .panel-lead {margin: 11px 0 14px; font-size: var(--type-body); line-height: 1.65; font-weight: 600; color: var(--ink)}
/* Project metadata, sections and steps */
.project-meta {border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft)}
.project-meta>div {display: grid}
.project-meta dd {margin: 0; word-break: keep-all; overflow-wrap: break-word}
#panel .project-meta {margin: 16px 0; padding: 10px 0; font-size: var(--type-body); line-height: 1.55}
#panel .project-meta>div {grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 3px 0}
#panel .project-meta dt {text-align: left; font-size: var(--type-body); line-height: 1.55; font-weight: 400; color: var(--muted)}
#panel .project-meta dd {text-align: left; font-size: var(--type-body); line-height: 1.55; font-weight: 500; color: var(--text-body)}
.story-section {border-top: 1px solid var(--line-soft)}
.story-section p {margin: 0; word-break: keep-all; overflow-wrap: break-word}
.story-section li {word-break: keep-all; overflow-wrap: break-word}
.story-section ul,
.story-section ol {margin: 0; padding-left: 17px}
.story-section li+li {margin-top: 4px}
.story-section li strong {color: var(--ink)}
#panel .story-section {margin: 19px 0; padding-top: 17px}
#panel .story-section h3,
#panel .step h3 {margin: 0 0 7.5px; font-size: var(--type-heading); line-height: 1.4; font-weight: 600; color: var(--ink)}
#panel .story-section p,
#panel .story-section li,
#panel .step p,
#panel .step-block li {font-size: var(--type-body); line-height: 1.65; font-weight: 400; color: var(--text-body)}
#panel .step .step-summary {font-weight: 500; color: var(--ink)}
#panel .step-block {margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line-soft)}
#panel .step-block h4 {margin: 0 0 4px; font-size: var(--type-body); line-height: 1.45; font-weight: 600; color: var(--ink)}
#panel .step-block ul {margin: 0; padding-left: 17px}
#panel .step-block li+li {margin-top: 4px}
#panel .step-block strong {font-weight: 600; color: var(--ink)}
#panel .step-link {margin: 14px 0 0}
#panel .step-link a {display: inline-flex; padding: 10px 13px; font-size: var(--type-caption); color: var(--text-body); background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); transition: background .16s, border-color .16s}
#panel .step-link a:hover {background: var(--tint-lilac); border-color: var(--lilac)}
.step {display: grid; grid-template-columns: 24px 1fr; gap: 8px; padding: 14.5px 0; border-top: 1px solid var(--line-soft)}
.step>span {font-family: var(--font-en)}
.step p {margin: 0}
#panel .step>span {align-self: start; font-size: var(--type-heading); line-height: 1.4; font-weight: 600; font-variant-numeric: tabular-nums; transform: translateY(.5px); color: var(--accent)}
.issue-list .step:first-of-type {border-top: 0; padding-top: 6px}
.issue-list .step:last-of-type {padding-bottom: 4px}
/* Tags: peach clay chips */
.tags {display: flex; flex-wrap: wrap}
.tags span {border-radius: 30px}
#panel .tags {gap: 6px; margin: 12px 0 15px}
#panel .tags span {padding: 6px 10px; font-size: var(--type-caption); line-height: 1.35; font-weight: 500; color: var(--text-body); background: var(--tint-peach); border: 1px solid var(--line)}
/* KPI card: lilac tint like the room wall */
.metrics {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px}
.metrics:has(>.metric:only-child) {grid-template-columns: 1fr}
.metric {min-width: 0; border-top: 0}
.metric+.metric {border-top: 0}
.metric strong {display: block; margin-bottom: 5.5px}
.metric span {display: block; margin-top: 3.5px; word-break: keep-all}
#panel .metrics {margin: 16px 0; padding: 12px 16px; background: linear-gradient(135deg, var(--tint-lilac), var(--raised)); border: 1px solid var(--line-soft); border-radius: var(--radius-md); box-shadow: var(--highlight)}
#panel .metric {padding: 8px 0}
#panel .metric strong {font-size: var(--type-emphasis); line-height: 1.3; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink)}
#panel .metric span {font-size: var(--type-caption); line-height: 1.5; color: var(--text-body)}
/* Links and actions */
.panel-actions {margin: 16px 0}
#panel .panel-actions {display: flex; flex-wrap: wrap; gap: 8px}
#panel .panel-actions a,
#panel .panel-actions button {padding: 10px 13px; font-size: var(--type-caption); color: var(--text-body); background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); transition: background .16s, border-color .16s}
#panel .panel-actions a:hover,
#panel .panel-actions button:hover {background: var(--tint-lilac); border-color: var(--lilac)}
/* About Me profile (avatar unchanged) */
#panel .profile-intro {margin-top: 15px}
#panel .profile-identity {display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 20px; align-items: center; padding-bottom: 17px; border-bottom: 1px solid var(--line-soft)}
/* The approved avatar artwork ends about 10% above its canvas bottom with a straight sweatshirt hem.
   The circle clips the picture (not the image itself), and a 10% scale from the top plus a 5% drop
   push that hem past the circle, so the clothes run out of the frame instead of stopping mid-air. */
#panel .profile-avatar {position: relative; display: block; width: 104px; height: 104px; overflow: hidden; border-radius: 50%; background: linear-gradient(150deg, var(--tint-lilac), var(--raised)); box-shadow: var(--shadow-sm)}
#panel .profile-avatar:after {content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-soft); pointer-events: none}
#panel .profile-avatar img {display: block; width: 104px; height: 104px; aspect-ratio: 1; padding: 0; object-fit: contain; transform-origin: 50% 0; transform: translateY(5%) scale(1.1)}
#panel .profile-facts {display: flex; flex-direction: column; gap: 0; min-width: 0}
#panel .profile-name {margin-bottom: 4px; font-size: var(--type-emphasis); line-height: 1.3; font-weight: 700; color: var(--ink)}
#panel .profile-role,
#panel .profile-career {font-size: var(--type-body); line-height: 1.425; color: var(--text-body)}
#panel .profile-area {margin-top: 2.5px; font-size: var(--type-caption); line-height: 1.425; word-break: keep-all; color: var(--muted)}
#panel .profile-summary {min-width: 0; padding-top: 15px}
#panel .profile-summary .panel-lead {margin: 0 0 10px; font-size: var(--type-heading); line-height: 1.55; font-weight: 600; color: var(--ink)}
#panel .profile-summary .tags {margin: 0 0 14px}
/* Project mock-up placeholders (no invented screens) */
.project-mockup {width: 100%; max-width: 100%; margin: 16px 0 3px}
.project-mockup-stage {display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; aspect-ratio: 16/9; padding: 14px 16px; overflow: hidden; border: 1px solid var(--line-soft); box-shadow: none}
#panel .project-mockup-stage {background: var(--tint-lilac); border-radius: var(--radius-md); box-shadow: var(--highlight)}
.project-mockup[data-layout="phones"] .project-mockup-stage {padding: 12px 16px}
.project-mockup-frame {display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; margin: 0}
.project-mockup[data-layout="single"] .project-mockup-frame {width: 100%; height: 100%}
.project-mockup[data-layout="fill"] .project-mockup-stage {padding: 0; aspect-ratio: 1476 / 720}
.project-mockup[data-layout="fill"] .project-mockup-frame {width: 100%; height: 100%}
.project-mockup[data-layout="fill"] .project-mockup-frame img {object-fit: fill}
.project-mockup-frame img {display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; pointer-events: none}
.project-mockup[data-layout="phones"] .project-mockup-frame {flex: 1 1 0; max-width: 42%; height: 100%}
.project-mockup-empty {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%; background: transparent}
#panel .project-mockup-empty {color: var(--muted)}
.project-mockup[data-layout="phones"] .project-mockup-empty {width: auto; max-width: 100%; max-height: 100%; aspect-ratio: 9/19; border: 1px solid var(--line); border-radius: var(--radius-md)}
#panel .project-mockup[data-layout="phones"] .project-mockup-empty {background: var(--raised); box-shadow: var(--shadow-sm)}
.project-mockup-icon {width: 28px; height: 28px; opacity: .68}
.project-mockup-empty strong {font-size: var(--type-caption); font-weight: 600; text-align: center; color: var(--muted)}
.project-mockup-title {display: block; margin: 8px 0 0; font-size: var(--type-caption); font-weight: 400; line-height: 1.45; color: var(--muted)}
/* Contact: copy-only cards */
.contact-cards {display: grid; gap: 10px; margin: 18px 0 12.5px}
#panel .panel-subtitle + .contact-cards {margin-top: 4px}
.contact-card {width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 19px 18px; text-align: left; border: 1px solid var(--line); transition: background .15s, border-color .15s}
#panel .contact-card {color: var(--ink); background: var(--raised); border-radius: var(--radius-md); box-shadow: var(--shadow-sm)}
#panel .contact-card:not(:disabled):hover {background: var(--tint-lilac); border-color: var(--lilac)}
.contact-card:disabled {cursor: default; opacity: .55}
.contact-card-body {display: grid; gap: 6px; min-width: 0}
.contact-card small {font-family: var(--font-en); font-weight: 500; line-height: 1.2; letter-spacing: 1.6px}
#panel .contact-card small {font-size: var(--type-caption); color: var(--muted)}
.contact-card strong {font-weight: 500; overflow-wrap: break-word}
#panel .contact-card strong {font-size: var(--type-heading); color: var(--ink)}
.copy-label {flex: none}
#panel .copy-label {font-size: var(--type-caption)}
#panel .contact-card .copy-label {padding: 4px 7px; border-radius: var(--radius-xs); color: var(--accent); background: var(--tint-lilac)}
.contact-status {min-height: 24px; line-height: 1.5}
#panel .contact-status {font-size: var(--type-caption); color: var(--muted)}
#contact-copy-fallback {width: 100%; padding: 12px; font-size: 13px; color: var(--ink); background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: none}

/* ---------- Toast ---------- */
#toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); z-index: 20;
  transform: translateX(-50%); max-width: 90vw; padding: 14px 22px;
  font-size: 12px; text-align: center; color: var(--raised);
  background: var(--ink); border: 1px solid var(--accent); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); opacity: 0; pointer-events: none;
}

/* ---------- Responsive ---------- */
@media (min-width: 1700px) {
  .intro {left: 5%; top: 17%; width: 294px}
  .intro .sub-copy {max-width: 281px}
}

@media (min-width: 761px) {
  main {height: calc(100dvh - var(--header-height) - var(--footer-space)); max-height: 1050px}
  .navigation-area {width: 196px; min-width: 196px}
}

@media (min-width: 761px) and (max-width: 1100px) {
  main {min-height: 620px}
  .tiny-line {display: none}
  .intro {left: 3%; top: 9%; width: 219px}
  .intro h1 {font-size: 28px}
  .intro .sub-copy {max-width: 213px}
}

@media (max-width: 1100px) {
  .status {display: none}
}

@media (max-width: 760px) {
  :root {--header-height: 50.25px; --rail-width: 78px; --footer-height: 44px}
  header {z-index: 12; height: var(--header-height); padding: 0 5%}
  .header-right {gap: 13px}
  header .brand {gap: 7px; height: 24px}
  .brand-badge {width: 24px; height: 24px; font-size: 14px}
  .brand-wordmark {font-size: 14px; transform: translateY(.5px)}
  header #contact-link {display: inline-flex; font-size: 12px; transform: translateY(2px)}
  .menu-toggle {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 42px; height: 42px; padding: 10px; border-width: 1px; border-style: solid}
  .menu-toggle span {display: block; width: 19px; height: 1.5px; transition: transform .18s, opacity .18s}
  .menu-open .menu-toggle span:first-child {transform: translateY(6.5px) rotate(45deg)}
  .menu-open .menu-toggle span:nth-child(2) {opacity: 0}
  .menu-open .menu-toggle span:last-child {transform: translateY(-6.5px) rotate(-45deg)}
  main#experience {display: flex; flex-direction: column; width: 100%; height: auto; min-height: 0; max-height: none; overflow: visible}
  .intro {position: relative; inset: auto; width: 100%; padding: 28px 6% 0}
  .intro h1 {margin: 14px 0; font-size: 28px}
  h1 {max-width: 330px}
  .sub-copy {margin: 0}
  .intro .sub-copy {max-width: 440px}
  .intro .instruction {margin-top: 12px}
  #scene-wrap {position: relative; inset: auto; flex: none; width: 100%; height: clamp(370px, 108vw, 560px); margin: 0; overflow: hidden}
  #fallback {inset: 20% 8%}
  #fallback h2 {font-size: var(--type-title)}
  .object-label {min-width: 27px; min-height: 27px; padding: 2px; font-size: 8px}
  .object-label .label-number {font-size: 11px; line-height: 21px}
  .object-label .label-text {font-size: 9px}
  .object-label:after {height: 8px; bottom: -9px}
  body.menu-open {overflow: hidden}
  .navigation-area {
    display: flex; z-index: 11;
    top: var(--header-height); right: 0; bottom: 0; left: auto;
    width: min(340px, 100%); height: calc(100dvh - var(--header-height)); max-height: none;
    transform: translateX(100%);
    overflow: hidden;
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    border-right: 0; border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    background: var(--card);
    transition: transform .24s ease;
    pointer-events: none;
  }
  .menu-open .navigation-area {transform: translateX(0); pointer-events: auto}
  #object-nav {flex: 1 1 auto; min-height: 0; overflow-y: auto}
  .navigation-area .scene-tools {flex: none; margin: 0 -14px calc(-16px - env(safe-area-inset-bottom, 0px)); padding: 12px 14px calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--card)}
  .menu-open #menu-backdrop {display: block; position: fixed; inset: var(--header-height) 0 0; z-index: 10; border: 0; border-radius: 0; backdrop-filter: blur(3px)}
  .nav-heading {line-height: 1.5; text-align: left}
  .nav-item {flex-direction: row; justify-content: flex-start; gap: 13px; min-height: 60px; padding: 10px}
  .nav-item small {display: block; font-size: 10px; font-weight: 500}
  .nav-item strong {display: block; text-align: left; font-weight: 500}
  .nav-icon {width: 34px; height: 36px}
  .navigation-area .scene-tools button {width: 40px; height: 40px; font-size: 16px}
  footer {padding-left: 6%; padding-right: 6%}
  footer>span:nth-child(2) {display: none}
  #scrim {z-index: 20}
  #panel {--dialog-title: var(--type-title); inset: 0; top: 0; right: 0; bottom: 0; left: 0; z-index: 21; width: 100%; height: 100dvh; max-height: 100dvh; padding: 0; border: 0; border-radius: 0; box-shadow: none}
  .panel-top {padding: calc(9px + env(safe-area-inset-top, 0px)) 18px 9px}
  .panel-bottom {padding: 7px 16px calc(7px + env(safe-area-inset-bottom, 0px))}
  #panel-content {padding: 20px 20px 12px}
  #panel h2 + .project-meta {margin-top: 20px}
  #panel .project-meta>div {grid-template-columns: 60px minmax(0, 1fr)}
  #panel .profile-intro {margin-top: 12px}
  #panel .profile-identity {grid-template-columns: 76px minmax(0, 1fr); column-gap: 14px; padding-bottom: 14px}
  #panel .profile-avatar,
  #panel .profile-avatar img {width: 76px; height: 76px}
  #panel .profile-summary {padding-top: 13.5px}
  #panel .profile-summary .panel-lead {margin-bottom: 9px}
  .project-mockup-stage {aspect-ratio: 4/3}
  .project-mockup[data-layout="fill"] .project-mockup-stage {padding: 0; aspect-ratio: 1476 / 720}
  .project-mockup[data-layout="phones"] .project-mockup-stage {gap: 8px; padding: 10px}
}

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