/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4
 * genre: editorial portfolio · tone: technical and restrained · palette: sage paper + cobalt accent
 * macrostructure: Fixed Scene Scroll Narrative + Relationship Index · theme: studied-DNA · interaction: resilient 3D portrait
 * contrast: pass (40–41) · nav: N1a minimal topbar · footer: Ft5 · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive/mobile: pass (34,49–57) · icons: pass (30) · slop: pass
 */
/* Hallmark · component: avatar guidance · genre: editorial · theme: studied-DNA
 * pre-emit critique: P5 H4 E4 S5 R5 V4 · passive guidance; existing controls own interaction states */
.experience-hint { display:flex; align-items:baseline; gap:8px; margin:24px 0 0; color:var(--home-muted); font:400 14px/1.6 var(--font-body); letter-spacing:0; pointer-events:none; transition:opacity var(--dur-short) var(--ease-out); }
.experience-hint strong,.experience-hint>b { color:var(--home-accent); font-weight:600; }
.experience-hint>b { font-size:22px; line-height:1; }
.experience-chapter .experience-hint>b { color:var(--home-accent); font-size:22px; }
.experience-hint[data-explored="true"] { opacity:0; }
.experience-hint--mobile { display:none; }
.experience-sticker-pin i { position:relative; }
.experience-sticker-pin[data-guiding="true"] i::after { content:""; position:absolute; inset:-7px; border:1px solid var(--home-accent); border-radius:50%; opacity:0; animation:sticker-cue 900ms var(--ease-out) 2; }
@keyframes sticker-cue { 0% { opacity:.75; transform:scale(.55); } 100% { opacity:0; transform:scale(1.8); } }
@media(prefers-reduced-motion:reduce) { .experience-sticker-pin[data-guiding="true"] i::after { animation:none; } .experience-hint { transition-duration:120ms; } }
@media (max-width:900px) {
  .experience-hint--inline { display:none; }
  .experience-hint--mobile { position:absolute; z-index:3; display:flex; justify-content:center; align-items:center; left:24px; right:24px; bottom:79px; margin:0; color:var(--home-accent); font-size:14px; line-height:16px; }
  .experience-hint--mobile>b { font-size:16px; }
}
:root { --home-bg:#c9cfb9; --home-paper:#f1efe5; --home-ink:#171913; --home-muted:#4d5448; --home-dark:#20221d; --home-accent:#2446c8; --home-accent-ink:#f1efe5; --home-focus:#334f3b; --home-line:rgba(23,25,19,.24); --home-glow:rgba(244,241,222,.48); --home-paper-90:rgba(241,239,229,.9); --home-paper-72:rgba(241,239,229,.72); --home-paper-18:rgba(241,239,229,.18); --home-footer-line:rgba(241,239,229,.25); --home-shadow:rgba(23,25,19,.08); --font-body:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif; --font-display:"Arial Narrow","Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif; --ease-out:cubic-bezier(.16,1,.3,1); --ease-in:cubic-bezier(.7,0,.84,0); --ease-in-out:cubic-bezier(.65,0,.35,1); --dur-instant:100ms; --dur-short:180ms; --dur-medium:280ms; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--home-bg); overflow-x:clip; }
body { margin:0; color:var(--home-ink); background:var(--home-paper); font-family:var(--font-body); overflow-x:clip; }
a { color:inherit; }
.home-header { position:fixed; z-index:20; inset:0 0 auto; height:74px; padding:0 34px; display:flex; align-items:center; justify-content:space-between; color:var(--home-ink); mix-blend-mode:multiply; pointer-events:none; }
.home-header a { pointer-events:auto; text-decoration:none; font:600 12px/1 var(--font-body); letter-spacing:.08em; white-space:nowrap; }
.home-header nav { display:flex; gap:28px; }
.experience { height:560vh; background:var(--home-bg); }
.experience-sticky { position:sticky; top:0; height:100vh; min-height:680px; overflow:hidden; isolation:isolate; }
.experience-sticky::before { content:""; position:absolute; inset:0; z-index:-2; background:radial-gradient(circle at 70% 45%,var(--home-glow),transparent 34%),var(--home-bg); }
.experience-placeholder { position:absolute; z-index:0; top:50%; right:10vw; width:min(36vw,520px); aspect-ratio:4/5; transform:translateY(-48%); opacity:.42; transition:opacity .28s ease; pointer-events:none; }
.experience-placeholder i { position:absolute; inset:0; border:1px solid var(--home-line); border-radius:50% 50% 44% 44%; background:radial-gradient(circle at 50% 34%,var(--home-paper-72),transparent 48%); animation:experience-placeholder-breathe 2.4s var(--ease-in-out) infinite; }
.experience-placeholder span { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); font:600 11px/1 var(--font-body); letter-spacing:.22em; animation:experience-placeholder-label 1.2s ease-in-out infinite alternate; }
.experience-placeholder.is-hidden { opacity:0; }
.experience-canvas { position:absolute !important; inset:0; z-index:1; touch-action:none; cursor:grab; opacity:1; transition:opacity .28s ease; }
.experience-canvas.is-dragging,.experience-canvas:active { cursor:grabbing; }
.experience-canvas.is-sticker-hover:not(.is-dragging) { cursor:pointer; }
.experience[data-scene-transition="out"] .experience-canvas { opacity:0; pointer-events:none; }
.experience[data-scene-transition="in"] .experience-canvas { pointer-events:none; }
.experience[data-scene-transition="out"] .experience-copy,.experience[data-scene-transition="out"] .jazz-room { opacity:0; }
.experience[data-scene-transition="out"] .jazz-room { animation:none; }
.experience-fallback { width:48vw; height:100%; object-fit:contain; object-position:72% center; display:block; margin-left:auto; }
.experience-loading { position:absolute; z-index:12; left:50%; bottom:9vh; width:min(260px,calc(100vw - 96px)); display:grid; gap:10px; transform:translateX(-50%); color:var(--home-ink); font:600 10px/1 var(--font-body); letter-spacing:.16em; pointer-events:none; }
.experience-loading__meta { display:flex; align-items:center; justify-content:space-between; }
.experience-loading__meta strong { font:inherit; }
.experience-loading__meta em { color:var(--home-muted); font:500 10px/1 var(--font-body); font-style:normal; letter-spacing:.08em; font-variant-numeric:tabular-nums; }
.experience-loading__track { position:relative; display:block; height:2px; overflow:hidden; background:var(--home-line); }
.experience-loading__track i { position:absolute; inset:0; display:block; transform-origin:left; background:var(--home-ink); transition:transform .24s linear; }
.experience-loading__track b { position:absolute; top:0; bottom:0; left:0; width:30%; background:linear-gradient(90deg,transparent,var(--home-paper),transparent); animation:experience-loader-scan 1.35s var(--ease-in-out) infinite; }
@keyframes experience-loader-scan { from { transform:translateX(-110%); } to { transform:translateX(440%); } }
@keyframes experience-placeholder-breathe { 0%,100% { transform:scale(.985); opacity:.62; } 50% { transform:scale(1.015); opacity:1; } }
@keyframes experience-placeholder-label { from { opacity:.45; } to { opacity:1; } }
.experience-error { position:absolute; z-index:12; left:6.5vw; bottom:10vh; max-width:340px; display:grid; gap:8px; padding:16px; border:1px solid var(--home-ink); background:var(--home-paper-72); backdrop-filter:blur(10px); }
.experience-error strong { font:600 14px/1.2 var(--font-body); }
.experience-error span { color:var(--home-muted); font-size:12px; line-height:1.5; }
.experience-error code { display:block; max-width:100%; overflow-wrap:anywhere; color:var(--home-muted); font:500 9px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace; }
.experience-error button { min-height:44px; margin-top:4px; padding:0 14px; border:1px solid var(--home-ink); color:var(--home-paper); background:var(--home-ink); font:600 11px/1 var(--font-body); letter-spacing:.08em; cursor:pointer; }
.experience-frame { position:absolute; inset:28px; z-index:4; pointer-events:none; border:1px solid var(--home-line); }
.experience-frame i { position:absolute; width:12px; height:12px; border-color:var(--home-ink); }
.experience-frame i:nth-child(1) { left:-1px; top:-1px; border-left:2px solid; border-top:2px solid; }
.experience-frame i:nth-child(2) { right:-1px; top:-1px; border-right:2px solid; border-top:2px solid; }
.experience-frame i:nth-child(3) { left:-1px; bottom:-1px; border-left:2px solid; border-bottom:2px solid; }
.experience-frame i:nth-child(4) { right:-1px; bottom:-1px; border-right:2px solid; border-bottom:2px solid; }
.experience-drag,.experience-index { position:absolute; z-index:5; bottom:48px; margin:0; font:600 10px/1 var(--font-body); letter-spacing:.16em; pointer-events:none; }
.experience-drag { right:55px; padding:10px 12px; bottom:39px; border:1px solid var(--home-line); background:var(--home-paper-72); }
.experience-drag span { display:inline-block; margin-right:8px; font-size:15px; animation:dragHint 1.8s ease-in-out infinite; }
.experience-index { left:55px; }
.experience-controls { position:absolute; z-index:6; right:200px; bottom:39px; display:flex; }
.experience-controls button { min-width:44px; min-height:44px; padding:0 12px; border:1px solid var(--home-line); border-right:0; color:var(--home-ink); background:var(--home-paper-72); font:600 10px/1 var(--font-body); cursor:pointer; }
.experience-controls button:last-child { border-right:1px solid var(--home-line); }
.experience-controls button:hover:not(:disabled) { background:var(--home-paper); }
.experience-controls button:active:not(:disabled) { color:var(--home-paper); background:var(--home-ink); }
.experience-controls button:disabled { opacity:.55; cursor:not-allowed; }
.experience-signal-nav { position:absolute; z-index:8; right:34px; top:50%; display:grid; gap:5px; transform:translateY(-50%); }
.experience-signal-nav button { width:86px; min-height:44px; padding:5px 7px; display:grid; grid-template-columns:18px minmax(0,1fr) auto; align-items:center; gap:4px; border:1px solid transparent; color:var(--home-muted); background:transparent; text-align:left; cursor:pointer; transition:color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out),background-color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out); }
.experience-signal-nav button small { font:500 8px/1 var(--font-body); opacity:.72; }
.experience-signal-nav button span { overflow:hidden; font:600 9px/1 var(--font-body); letter-spacing:.08em; white-space:nowrap; }
.experience-signal-nav button b { color:var(--home-muted); font:500 8px/1 var(--font-body); letter-spacing:.03em; }
.experience-signal-nav button:hover:not(:disabled),.experience-signal-nav button.is-active { color:var(--home-ink); border-color:var(--home-line); background:var(--home-paper-72); transform:translateX(-5px); }
.experience-signal-nav button:active:not(:disabled) { color:var(--home-accent-ink); border-color:var(--home-accent); background:var(--home-accent); }
.experience-signal-nav button.is-active { color:var(--home-accent); border-color:var(--home-accent); }
.experience-signal-nav button.is-active b { color:var(--home-accent); }
.experience-signal-nav button[data-audio="playing"] span::after { content:""; display:inline-block; width:5px; height:5px; margin-left:5px; border-radius:50%; background:var(--home-accent); vertical-align:1px; }
.experience-signal-nav button:disabled { opacity:.3; cursor:not-allowed; }
.experience-sticker-pin { position:absolute; z-index:9; display:flex; align-items:center; gap:0; color:var(--home-accent); pointer-events:none; }
.experience-sticker-pin::before { content:""; width:48px; height:1px; background:var(--home-accent); }
.experience-sticker-pin.is-left { flex-direction:row-reverse; transform:translate(calc(-100% + 5px),-50%); }
.experience-sticker-pin.is-right { transform:translate(-5px,-50%); }
.experience-sticker-pin i { width:10px; height:10px; border:2px solid var(--home-paper); border-radius:50%; background:var(--home-accent); box-shadow:0 0 0 1px var(--home-accent); }
.experience-sticker-pin span { padding:6px 8px; border:1px solid var(--home-accent); background:var(--home-paper-90); font:600 9px/1 var(--font-body); letter-spacing:.1em; }
.experience-sticker-card { position:absolute; z-index:10; right:134px; bottom:98px; width:min(350px,calc(100% - 80px)); padding:20px 24px 21px; border:1px solid var(--home-ink); background:var(--home-paper-90); backdrop-filter:blur(12px); box-shadow:8px 8px 0 var(--home-shadow); }
.experience-sticker-meta { margin:0 42px 17px 0; padding-bottom:10px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--home-line); color:var(--home-muted); font:500 8px/1 var(--font-body); letter-spacing:.12em; }
.experience-sticker-card>p { margin:0 42px 13px 0; color:var(--home-accent); font:600 9px/1 var(--font-body); letter-spacing:.15em; }
.experience-sticker-card h3 { margin:0 0 12px; font:600 28px/1 var(--font-display); letter-spacing:-.035em; }
.experience-sticker-card>span { display:block; color:var(--home-muted); font-size:12px; line-height:1.65; }
.experience-sticker-card>a { display:inline-block; margin-top:18px; color:var(--home-accent); font:600 10px/1 var(--font-body); letter-spacing:.08em; text-decoration:none; }
.experience-audio-toggle { min-height:44px; margin-top:17px; padding:0 13px; display:inline-flex; align-items:center; gap:10px; border:1px solid var(--home-ink); color:var(--home-paper); background:var(--home-ink); font:600 9px/1 var(--font-body); letter-spacing:.1em; cursor:pointer; white-space:nowrap; }
.experience-audio-toggle:hover:not(:disabled) { color:var(--home-accent-ink); background:var(--home-accent); border-color:var(--home-accent); }
.experience-audio-toggle:active:not(:disabled) { color:var(--home-ink); background:var(--home-paper); }
.experience-audio-toggle:disabled { opacity:.55; cursor:not-allowed; }
.experience-audio-bars { width:18px; height:14px; display:flex; align-items:flex-end; justify-content:space-between; }
.experience-audio-bars i { width:3px; height:100%; display:block; background:currentColor; transform-origin:center bottom; transform:scaleY(.28); }
.experience-audio-toggle[data-state="playing"] .experience-audio-bars i { animation:audioMeter 1.1s var(--ease-in-out) infinite; }
.experience-audio-toggle[data-state="playing"] .experience-audio-bars i:nth-child(2) { animation-delay:-.38s; }
.experience-audio-toggle[data-state="playing"] .experience-audio-bars i:nth-child(3) { animation-delay:-.72s; }
.experience-sticker-close { position:absolute; top:8px; right:8px; width:44px; height:44px; border:0; color:var(--home-ink); background:transparent; font:400 24px/1 var(--font-body); cursor:pointer; }
.experience-sticker-close:hover { color:var(--home-accent); }
.experience-sticker-close:active { color:var(--home-paper); background:var(--home-ink); }
.experience-copy { position:absolute; z-index:3; inset:0; pointer-events:none; }
.experience-chapter { position:absolute; opacity:0; transform:translateY(24px); transition:opacity .5s ease,transform .5s ease; }
.experience-chapter.is-active { opacity:1; transform:none; }
.experience-chapter>p { margin:0 0 22px; font:600 11px/1 var(--font-body); letter-spacing:.16em; }
.experience-chapter h1,.experience-chapter h2 { min-width:0; margin:0; overflow-wrap:anywhere; font-family:var(--font-display); font-weight:600; letter-spacing:-.055em; }
.experience-chapter h1 { max-width:51vw; font-size:clamp(48px,5.1vw,80px); line-height:1.06; }
.experience-chapter h1 em { font-style:normal; color:transparent; -webkit-text-stroke:1.5px var(--home-ink); }
.experience-chapter h2 { font-size:clamp(38px,4.25vw,72px); line-height:1.04; }
.experience-chapter--intro { left:6.5vw; top:25vh; width:58vw; }
.experience-chapter--intro>span { display:block; margin-top:30px; font-size:11px; letter-spacing:.14em; }
.experience-chapter--method { left:7vw; top:24vh; width:50vw; }
.experience-chapter--method ul { list-style:none; margin:38px 0 0; padding:0; width:360px; border-top:1px solid var(--home-line); }
.experience-chapter--method li { display:flex; gap:22px; padding:12px 0; border-bottom:1px solid var(--home-line); font-size:13px; text-transform:uppercase; letter-spacing:.07em; }
.experience-chapter--method b { color:var(--home-muted); font-size:10px; }
.experience-chapter--personal { right:8vw; top:21vh; width:37vw; }
.experience-chapter--personal h2 { color:transparent; -webkit-text-stroke:1.5px var(--home-ink); }
.experience-signal-description { display:block; max-width:48ch; margin-top:25px; color:var(--home-muted); font-size:13px; line-height:1.7; }
.experience-progress { position:absolute; z-index:5; left:55px; right:55px; bottom:28px; height:1px; background:var(--home-line); pointer-events:none; }
.experience-progress i { display:block; width:100%; height:2px; transform-origin:left; background:var(--home-ink); }
.home-content { background:var(--home-paper); position:relative; z-index:6; }
.home-section { padding:120px clamp(34px,6vw,108px); border-top:1px solid var(--home-line); }
.section-label { margin:0 0 58px; display:flex; align-items:center; gap:16px; font:600 11px/1 var(--font-body); letter-spacing:.15em; }
.section-label::before { content:""; width:32px; height:2px; background:var(--home-ink); }
.work-intro { margin-bottom:82px; display:grid; grid-template-columns:minmax(0,2.1fr) minmax(240px,.9fr); align-items:end; gap:32px; }
.work-heading { min-width:0; max-width:1050px; margin:0; overflow-wrap:anywhere; font:600 clamp(48px,7vw,112px)/.92 var(--font-display); letter-spacing:-.06em; }
.work-intro>p { max-width:48ch; margin:0 0 4px; color:var(--home-muted); font-size:13px; line-height:1.75; }
.work-family { border-top:1px solid var(--home-ink); }
.work-family-label { min-height:92px; padding:18px 0; display:grid; grid-template-columns:48px minmax(120px,.45fr) minmax(0,1fr); align-items:center; gap:18px; border-bottom:1px solid var(--home-line); }
.work-family-label>span { font:600 9px/1 var(--font-body); letter-spacing:.12em; }
.work-family-label>strong { font:600 13px/1 var(--font-body); letter-spacing:.16em; }
.work-family-label>p { margin:0; color:var(--home-muted); font-size:12px; }
.product-index { padding:28px 0 76px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.product-card { min-width:0; display:flex; flex-direction:column; border:1px solid var(--home-line); text-decoration:none; background:var(--home-paper); }
.product-card__visual { position:relative; aspect-ratio:1.55; margin:0; overflow:hidden; border-bottom:1px solid var(--home-line); background:var(--home-bg); }
.product-card__visual img { width:100%; height:100%; display:block; object-fit:contain; }
.product-card__visual>strong { min-width:0; height:100%; padding:24px; display:grid; place-items:center; overflow-wrap:anywhere; font:600 clamp(28px,4vw,54px)/.92 var(--font-display); letter-spacing:-.055em; }
.product-card__visual figcaption { position:absolute; inset:14px 14px auto; display:flex; justify-content:space-between; color:var(--home-ink); font:600 8px/1 var(--font-body); letter-spacing:.12em; mix-blend-mode:multiply; }
.product-card__body { position:relative; min-height:230px; padding:22px 52px 24px 22px; }
.product-card__body>p,.platform-card__body>p { margin:0 0 28px; color:var(--home-muted); font:600 9px/1.2 var(--font-body); letter-spacing:.12em; }
.product-card__body h3,.platform-card__body h3 { min-width:0; margin:0; overflow-wrap:anywhere; font:600 clamp(30px,3.4vw,54px)/.92 var(--font-display); letter-spacing:-.055em; }
.product-card__body>span,.platform-card__body>span { display:block; max-width:48ch; margin-top:18px; color:var(--home-muted); font-size:12px; line-height:1.65; }
.product-card__body>i,.platform-card__body>i { position:absolute; right:22px; bottom:22px; font:400 24px/1 var(--font-body); font-style:normal; transition:transform var(--dur-short) var(--ease-out); }
.work-relationship { min-height:68px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; color:var(--home-muted); border-top:1px solid var(--home-line); border-bottom:1px solid var(--home-line); font:600 8px/1 var(--font-body); letter-spacing:.16em; }
.work-relationship i { height:1px; position:relative; background:var(--home-line); }
.work-relationship i::after { content:""; position:absolute; right:0; top:-3px; width:7px; height:7px; border-top:1px solid var(--home-muted); border-right:1px solid var(--home-muted); transform:rotate(45deg); }
.work-family-label--platform { border-bottom:0; }
.platform-index { padding-bottom:12px; }
.platform-card { position:relative; min-width:0; display:grid; grid-template-columns:minmax(300px,.78fr) minmax(0,1.22fr); border:1px solid var(--home-ink); color:var(--home-paper); background:var(--home-ink); text-decoration:none; }
.platform-card__body { position:relative; min-height:520px; padding:34px 72px 34px 34px; display:flex; flex-direction:column; }
.platform-card__body>p,.platform-card__body>span { color:var(--home-paper-72); }
.platform-card__body h3 { font-size:clamp(48px,6.6vw,104px); }
.platform-card__body ul { list-style:none; margin:auto 0 0; padding:22px 0 0; display:flex; flex-wrap:wrap; gap:10px; border-top:1px solid var(--home-footer-line); }
.platform-card__body li { padding:8px 10px; border:1px solid var(--home-footer-line); font:600 8px/1 var(--font-body); letter-spacing:.12em; }
.platform-card figure { min-width:0; margin:0; display:grid; place-items:center; border-left:1px solid var(--home-footer-line); background:var(--home-paper); }
.platform-card figure img { width:100%; height:100%; display:block; object-fit:contain; }
.notes-header { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-bottom:70px; }
.notes-header h2 { min-width:0; margin:0; overflow-wrap:anywhere; font:600 clamp(48px,6vw,92px)/.94 var(--font-display); letter-spacing:-.055em; }
.notes-header p { align-self:end; max-width:480px; color:var(--home-muted); line-height:1.7; }
.home-note { display:grid; grid-template-columns:90px 150px 1fr auto; align-items:center; gap:24px; padding:25px 0; border-top:1px solid var(--home-line); text-decoration:none; transition:background-color var(--dur-short) var(--ease-out); }
.home-note:last-child { border-bottom:1px solid var(--home-line); }
.home-note:hover { background:var(--home-bg); }
.home-note time,.home-note small { font-size:11px; letter-spacing:.1em; }
.home-note strong { font:600 clamp(20px,2.6vw,38px)/1.15 var(--font-display); }
.home-footer { min-height:72vh; padding:100px clamp(34px,6vw,108px) 38px; color:var(--home-paper); background:var(--home-ink); display:flex; flex-direction:column; justify-content:space-between; gap:64px; }
.home-footer p { font-size:11px; letter-spacing:.16em; }
.home-footer-main { display:grid; grid-template-columns:minmax(0,1fr) clamp(220px,20vw,292px); align-items:end; gap:clamp(48px,7vw,120px); }
.home-footer h2 { min-width:0; margin:0; max-width:1000px; overflow-wrap:anywhere; font:600 clamp(64px,10vw,150px)/.82 var(--font-display); letter-spacing:-.075em; }
.home-footer h2 a { text-decoration-thickness:2px; text-underline-offset:12px; }
.wechat-contact { display:block; min-width:0; padding:12px; color:var(--home-ink); background:var(--home-paper); border:1px solid var(--home-footer-line); text-decoration:none; }
.wechat-contact img { width:100%; height:auto; display:block; background:#fff; }
.wechat-contact__meta { padding:13px 2px 2px; display:grid; grid-template-columns:auto 1fr; align-items:baseline; column-gap:12px; row-gap:7px; border-top:1px solid var(--home-line); }
.wechat-contact__meta small { color:var(--home-accent); font:600 9px/1 var(--font-body); letter-spacing:.14em; }
.wechat-contact__meta strong { justify-self:end; font-size:13px; }
.wechat-contact__meta i { grid-column:1/-1; color:var(--home-muted); font:400 11px/1.5 var(--font-body); font-style:normal; }
.home-footer-meta { padding-top:30px; display:flex; justify-content:space-between; border-top:1px solid var(--home-footer-line); font-size:11px; }
a:focus-visible,button:focus-visible { outline:2px solid var(--home-focus); outline-offset:3px; }
@keyframes dragHint { 0%,100% { transform:translateX(-3px); } 50% { transform:translateX(3px); } }
@keyframes audioMeter { 0%,100% { transform:scaleY(.28); } 50% { transform:scaleY(1); } }
@media (hover:hover) and (pointer:fine) { .product-card:hover .product-card__body>i,.platform-card:hover .platform-card__body>i { transform:translate(3px,-3px); } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } .experience-drag span,.experience-audio-bars i { animation:none !important; } .experience-chapter,.experience-poster,.experience-canvas,.experience-signal-nav button,.product-card__body>i,.platform-card__body>i { transition:none; } }
@media (max-width:900px) { .experience-sticky { min-height:620px; } .experience-chapter--intro,.experience-chapter--method,.experience-chapter--personal { left:8vw; right:auto; width:84vw; top:18vh; } .experience-chapter h1 { font-size:clamp(44px,11vw,72px); } .experience-chapter h2 { font-size:clamp(36px,8vw,58px); } .experience-signal-nav { right:16px; } .experience-sticker-card { right:116px; } .work-intro { grid-template-columns:1fr; } .product-index { grid-template-columns:1fr; } .product-card__body { min-height:200px; } .platform-card { grid-template-columns:1fr; } .platform-card__body { min-height:400px; } .platform-card figure { min-height:320px; border-left:0; border-top:1px solid var(--home-footer-line); } .notes-header { grid-template-columns:1fr; } }
@media (max-width:640px) { .home-header { height:64px; padding-inline:20px; } .home-header nav { gap:14px; } .experience-frame { inset:14px; } .home-section { padding:84px 20px; } .section-label { margin-bottom:42px; } .work-intro { margin-bottom:56px; } .work-heading { font-size:clamp(42px,13vw,64px); } .work-family-label { grid-template-columns:36px 1fr; } .work-family-label>p { grid-column:2; } .product-index { padding-bottom:56px; } .product-card__body { min-height:0; padding-bottom:58px; } .work-relationship { grid-template-columns:auto minmax(20px,1fr) auto; } .platform-card__body { min-height:360px; padding:28px 58px 28px 24px; } .platform-card figure { min-height:240px; } .home-note { grid-template-columns:58px 1fr auto; gap:12px; } .home-note small { display:none; } .home-footer { min-height:auto; padding:84px 20px 32px; } .home-footer-main { grid-template-columns:1fr; gap:54px; } .wechat-contact { width:min(100%,320px); } .home-footer-meta { flex-direction:column; gap:10px; } }

/* Jazz room: the full-body character shares the portrait's drag controls.
 * Hallmark critique: philosophy 4 · hierarchy 4 · execution 4 · specificity 5 · restraint 4 · variety 4.
 */
:root { --jazz-paper:#ddcdb4; --jazz-ink:#302921; --jazz-muted:#665443; --jazz-accent:#9b432b; --jazz-line:rgba(48,41,33,.22); --jazz-vinyl:#25241f; --jazz-groove:#3f3b31; --jazz-label:#be6846; }
/* Hallmark component scope: video player; inherits portfolio tokens and layout. */
.experience[data-persona="jazz"][data-jazz-medium="video"] .experience-canvas { opacity:0; visibility:hidden; pointer-events:none; }
.experience[data-persona="jazz"][data-jazz-medium="video"] .experience-drag,
.experience-controls[hidden] { display:none; }
.jazz-video-room { position:absolute; z-index:7; inset:100px 148px 100px 64px; display:flex; flex-direction:column; justify-content:center; gap:16px; color:var(--jazz-ink); transition:opacity var(--dur-medium) var(--ease-out); }
.experience[data-scene-transition="out"] .jazz-video-room { opacity:0; pointer-events:none; }
.jazz-video-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.jazz-video-heading h2 { margin:0; font:600 clamp(20px,2.2vw,32px)/1.3 var(--font-display); letter-spacing:-.035em; font-style:normal; }
.jazz-video-heading>span { color:var(--jazz-muted); font:500 12px/1.5 var(--font-body); white-space:nowrap; }
.jazz-video-stage { position:relative; min-height:0; align-self:center; width:100%; max-width:calc(54vh * 16 / 9); aspect-ratio:16/9; background:var(--jazz-paper); }
.jazz-video-stage video { display:block; width:100%; height:100%; object-fit:contain; }
.jazz-video-status { position:absolute; inset:auto 12px 12px; padding:12px 16px; background:var(--home-paper-90); color:var(--jazz-ink); display:flex; align-items:center; justify-content:space-between; gap:12px; font:400 12px/1.6 var(--font-body); }
.jazz-video-toolbar,.jazz-video-playback,.jazz-video-links { display:flex; align-items:center; gap:8px; }
.jazz-video-toolbar { justify-content:space-between; flex-wrap:wrap; }
.jazz-video-room button { min-height:44px; padding:0 16px; border:1px solid var(--jazz-line); background:transparent; color:var(--jazz-ink); cursor:pointer; white-space:nowrap; font:500 12px/1.4 var(--font-body); }
.jazz-video-playback button:first-child { background:var(--jazz-ink); color:var(--jazz-paper); }
.jazz-video-room button:hover:not(:disabled) { background:var(--jazz-accent); color:var(--home-paper); }
.jazz-video-room button:active:not(:disabled) { transform:translateY(1px); }
.jazz-video-room button:disabled { opacity:.5; cursor:not-allowed; }
.jazz-video-links button { border-color:transparent; }
.jazz-video-notice { margin:0; font:400 12px/1.5 var(--font-body); }
.jazz-video-about { font:400 12px/1.6 var(--font-body); color:var(--jazz-muted); }
.jazz-video-about summary { min-height:44px; display:list-item; align-content:center; cursor:pointer; width:fit-content; }
.jazz-video-about summary:focus-visible { outline:2px solid var(--jazz-accent); outline-offset:3px; }
.jazz-video-about p { margin:0; max-width:680px; }
@media(max-width:900px) {
  .jazz-video-room { inset:92px 120px 120px 28px; }
  .jazz-video-heading { align-items:flex-start; flex-direction:column; gap:4px; }
  .jazz-video-room button { padding-inline:12px; }
}
@media(max-width:600px) {
  .jazz-video-room { inset:94px 24px 200px; gap:12px; }
  .jazz-video-toolbar { gap:4px; }
  .jazz-video-playback,.jazz-video-links { flex:1 0 100%; }
  .jazz-video-room button { flex:1; }
  .experience[data-persona="jazz"][data-jazz-medium="video"] .experience-signal-nav { inset:auto 24px 58px; transform:none; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .experience[data-persona="jazz"][data-jazz-medium="video"] .experience-signal-nav button { width:100%; }
}
@media(prefers-reduced-motion:reduce) { .jazz-video-room { transition:none; } }
.experience-sticky::after { content:""; position:absolute; z-index:0; inset:0; background:var(--jazz-paper); opacity:0; transition:opacity 600ms var(--ease-in-out); pointer-events:none; }
.experience[data-persona="jazz"] .experience-sticky::after { opacity:1; }
.experience[data-persona="jazz"] .experience-copy { opacity:0; }
.experience-copy { transition:opacity var(--dur-medium) var(--ease-out); }
.jazz-room { position:absolute; z-index:7; top:22%; right:11%; width:31%; max-width:440px; color:var(--jazz-ink); animation:jazzEnter 550ms var(--ease-out) both; }
.jazz-room-kicker { margin:0 0 24px; font:600 10px/1.4 var(--font-body); letter-spacing:.16em; }
.jazz-room h2 { margin:0; font:600 clamp(36px,3.6vw,62px)/1.16 var(--font-display); letter-spacing:-.055em; }
.jazz-room-description { margin:22px 0 28px; color:var(--jazz-muted); font:400 13px/1.8 var(--font-body); }
.jazz-model-status { margin:0 0 16px; color:var(--jazz-muted); font:400 12px/1.6 var(--font-body); }
.jazz-model-status button { display:block; min-height:44px; padding:0 12px; margin-top:8px; border:1px solid currentColor; background:transparent; color:var(--jazz-ink); font:inherit; cursor:pointer; }
.jazz-entry-status { position:absolute; z-index:8; right:140px; bottom:108px; max-width:270px; padding:16px 20px; background:var(--home-paper); border:1px solid var(--home-line); color:var(--home-ink); }
.jazz-entry-status button { display:inline-block; margin-right:8px; }
.experience[data-persona="jazz"] .experience-signal-nav button { grid-template-columns:18px minmax(0,1fr); }
.jazz-room { transition:opacity .28s ease; }
.jazz-room .experience-audio-toggle:disabled { opacity:.5; cursor:wait; }
.jazz-player { padding:24px 0; display:flex; align-items:center; gap:24px; border-block:1px solid var(--jazz-line); }
.jazz-record { width:112px; height:112px; flex:0 0 112px; display:grid; place-items:center; border-radius:50%; border:6px solid var(--jazz-vinyl); background:repeating-radial-gradient(circle at center,var(--jazz-vinyl) 0 3px,var(--jazz-groove) 3.5px 4px); animation:recordTurn 6s linear infinite; animation-play-state:paused; }
.jazz-record[data-playing="true"] { animation-play-state:running; }
.jazz-record i { position:relative; width:42px; height:42px; display:grid; place-content:center; text-align:center; border-radius:50%; background:var(--jazz-label); color:var(--jazz-ink); font:600 8px/1.35 var(--font-body); font-style:normal; }
.jazz-record i::after { content:""; position:absolute; left:19px; top:19px; width:4px; height:4px; border-radius:50%; background:var(--jazz-vinyl); }
.jazz-player-copy strong { display:block; font:600 12px/1.5 var(--font-body); letter-spacing:.08em; }
.jazz-player-copy>span { display:block; margin-top:6px; color:var(--jazz-muted); font:400 11px/1.5 var(--font-body); }
.jazz-room .experience-audio-toggle { margin-top:12px; min-width:124px; justify-content:center; background:var(--jazz-ink); border-color:var(--jazz-ink); color:var(--jazz-paper); font-size:12px; letter-spacing:0; }
.jazz-room .experience-audio-toggle:hover:not(:disabled) { background:var(--jazz-accent); border-color:var(--jazz-accent); }
.jazz-audience { display:flex; align-items:center; gap:10px; margin-top:16px; font:400 11px/1.5 var(--font-body); }
.jazz-audience>span { color:var(--jazz-muted); margin-right:auto; }
.jazz-audience button,.jazz-return { min-height:44px; padding:0 10px; background:transparent; color:var(--jazz-ink); border:0; font:500 12px/1.4 var(--font-body); cursor:pointer; white-space:nowrap; }
.jazz-audience button[aria-pressed="true"] { color:var(--jazz-accent); text-decoration:underline; text-underline-offset:5px; }
.jazz-audience button:hover,.jazz-return:hover { color:var(--jazz-accent); }
.jazz-return { display:block; padding-left:0; margin-top:12px; }
.jazz-cat { position:absolute; z-index:8; left:7%; bottom:9%; padding:12px 18px; background:var(--home-paper-72); border:1px solid var(--jazz-line); color:var(--jazz-ink); cursor:pointer; animation:jazzEnter 400ms var(--ease-out) both; }
.jazz-cat img { display:block; width:128px; height:112px; margin:auto; image-rendering:pixelated; }
.jazz-cat span { display:block; font:600 12px/1.8 var(--font-body); }
.jazz-cat small { display:block; color:var(--jazz-muted); font:400 10px/1.8 var(--font-body); }
.experience[data-persona="jazz"] button:focus-visible { outline:2px solid var(--jazz-accent); outline-offset:3px; }
@keyframes recordTurn { to { transform:rotate(360deg); } }
@keyframes jazzEnter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@media(max-width:900px) {
  .experience[data-persona="jazz"] .experience-sticky { min-height:760px; }
  .jazz-room { width:auto; max-width:430px; left:28px; right:116px; top:auto; bottom:88px; }
  .jazz-room-kicker { margin-bottom:8px; font-size:8px; }
  .jazz-room h2 { font-size:30px; line-height:1.12; }
  .jazz-room h2 br { display:none; }
  .jazz-room-description { margin:10px 0 12px; font-size:11px; }
  .jazz-player { padding:12px 0; gap:16px; }
  .jazz-record { width:64px; height:64px; flex-basis:64px; border-width:3px; }
  .jazz-record i { width:30px; height:30px; font-size:6px; }
  .jazz-record i::after { left:13px; top:13px; }
  .jazz-audience { margin-top:5px; }
  .jazz-return { margin-top:0; }
  .jazz-cat { left:24px; bottom:auto; top:110px; padding:6px 10px; }
  .jazz-cat img { width:80px; height:70px; }
}
@media(max-width:540px) {
  .jazz-entry-status { left:24px; right:24px; bottom:92px; max-width:none; }
  .jazz-room { left:24px; right:24px; bottom:78px; }
  .experience[data-persona="jazz"] .experience-signal-nav { top:30%; right:16px; }
  .experience[data-persona="jazz"] .experience-drag { display:none; }
  .jazz-room h2 { font-size:28px; }
  .jazz-player-copy { min-width:0; }
  .jazz-cat { top:85px; left:20px; }
  .jazz-cat small { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  .experience-sticky::after,.experience-copy { transition:opacity 120ms linear; }
  .experience-placeholder i,.experience-placeholder span,.experience-loading__track b { animation:none; }
  .jazz-room,.jazz-cat,.jazz-record { animation:none; }
}

/* Hallmark · component: portrait navigation · genre: editorial · theme: studied-DNA
 * audience: portfolio visitors · use: explore YM's interests · tone: playful-editorial
 * pre-emit critique: P4 H4 E4 S5 R5 V4
 * Reuse the existing scene, controls and tokens; keep the face clear of copy.
 */
.experience-title-tail { white-space:nowrap; }
@media(min-width:901px) {
  .experience[data-persona="everyday"][data-portrait-stage="intro"] .experience-sticker-card { left:6.5vw; right:auto; }
}
@media(max-width:900px) {
  .experience[data-persona="everyday"] .experience-chapter { top:108px; }
  .experience[data-persona="everyday"] .experience-chapter h1 { max-width:100%; font-size:clamp(32px,7vw,52px); line-height:1.08; }
  .experience[data-persona="everyday"] .experience-chapter>p { margin-bottom:16px; }
  .experience[data-persona="everyday"] .experience-chapter--intro>span { margin-top:18px; font-size:10px; }
  .experience[data-persona="everyday"] .experience-signal-nav { inset:auto 24px 96px; transform:none; grid-template-columns:repeat(6,minmax(0,1fr)); gap:0; }
  .experience[data-persona="everyday"] .experience-signal-nav button { width:100%; min-width:44px; padding:4px 0; display:flex; justify-content:center; }
  .experience[data-persona="everyday"] .experience-signal-nav button small,
  .experience[data-persona="everyday"] .experience-signal-nav button b { display:none; }
  .experience[data-persona="everyday"] .experience-signal-nav button:hover,
  .experience[data-persona="everyday"] .experience-signal-nav button.is-active { transform:none; }
  .experience[data-persona="everyday"] .experience-controls { right:24px; bottom:34px; }
  .experience[data-persona="everyday"] .experience-drag { display:none; }
  .experience[data-persona="everyday"]:has(.experience-sticker-card) .experience-copy { visibility:hidden; }
  .experience[data-persona="everyday"] .experience-sticker-card { left:24px; right:24px; top:96px; bottom:auto; width:auto; }
  .experience[data-persona="everyday"] .experience-sticker-card>a { min-height:44px; display:inline-flex; align-items:center; margin-top:8px; }
  .experience[data-persona="everyday"] .experience-index { left:24px; bottom:51px; }
  .experience-error { left:24px; right:24px; bottom:156px; max-width:none; grid-template-columns:minmax(0,1fr) auto; align-items:center; padding:12px; }
  .experience-error strong,.experience-error span { grid-column:1; }
  .experience-error code { grid-column:1 / -1; grid-row:3; }
  .experience-error button { grid-column:2; grid-row:1 / span 2; margin:0; }
}

/* Selected articles retain summaries and categories at every width. */
.home-note--featured{grid-template-columns:60px 110px minmax(0,1fr) 24px;align-items:start}
.home-note--featured>div{min-width:0}.home-note--featured strong{display:block;line-height:1.5}.home-note--featured p{font-size:.88rem;line-height:1.8;color:var(--home-muted);margin:12px 0 0;overflow-wrap:anywhere}
.all-notes-link{display:flex;align-items:center;justify-content:space-between;min-height:52px;margin-top:28px;padding:12px 0;color:var(--home-accent);font-size:.9rem;border-bottom:1px solid var(--home-line)}
@media(max-width:640px){.home-note--featured{grid-template-columns:60px minmax(0,1fr) 24px}.home-note--featured small{display:block;grid-column:2;font-size:.7rem}.home-note--featured>div{grid-column:1 / 3}.home-note--featured>span{grid-column:3;grid-row:2}.home-note--featured strong{font-size:1.1rem}}