@font-face{font-family:'Archivo';font-style:normal;font-weight:300 850;font-stretch:62% 125%;font-display:swap;src:url(/assets/hx2/fonts/Archivo-normal-300_850-latin.woff2) format('woff2');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:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/hx2/fonts/Barlow-normal-400-latin.woff2) format('woff2');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:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/hx2/fonts/Barlow-normal-500-latin.woff2) format('woff2');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:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/hx2/fonts/Barlow-normal-600-latin.woff2) format('woff2');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:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/hx2/fonts/BarlowCondensed-normal-500-latin.woff2) format('woff2');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:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/hx2/fonts/BarlowCondensed-normal-600-latin.woff2) format('woff2');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:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/hx2/fonts/BarlowCondensed-normal-700-latin.woff2) format('woff2');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:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/hx2/fonts/BarlowCondensed-normal-800-latin.woff2) format('woff2');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:'Source Serif 4';font-style:italic;font-weight:400 600;font-display:swap;src:url(/assets/hx2/fonts/SourceSerif4-italic-400_600-latin.woff2) format('woff2');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:'Source Serif 4';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/hx2/fonts/SourceSerif4-normal-400_700-latin.woff2) format('woff2');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:'Spline Sans Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/hx2/fonts/SplineSansMono-normal-400-latin.woff2) format('woff2');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:'Spline Sans Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/hx2/fonts/SplineSansMono-normal-500-latin.woff2) format('woff2');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:'Spline Sans Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/hx2/fonts/SplineSansMono-normal-600-latin.woff2) format('woff2');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:'Caveat';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/hx2/fonts/Caveat-normal-400_700-latin.woff2) format('woff2');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:"HX Song";font-display:swap;src:url(/assets/hx2/fonts/zcool-sub.woff2) format("woff2")}
@font-face{font-family:"Noto Serif SC";font-weight:400;font-display:swap;src:url(/assets/hx2/fonts/serif400-sub.woff2) format("woff2")}
@font-face{font-family:"Noto Serif SC";font-weight:600;font-display:swap;src:url(/assets/hx2/fonts/serif600-sub.woff2) format("woff2")}
@font-face{font-family:"Noto Sans SC";font-weight:400;font-display:swap;src:url(/assets/hx2/fonts/sans400-sub.woff2) format("woff2")}
@font-face{font-family:"Noto Sans SC";font-weight:700 800;font-display:swap;src:url(/assets/hx2/fonts/sans700-sub.woff2) format("woff2")}
/* harryxin.com: shared foundation for the Final Proposal pages */
:root{--f-ui:"Archivo",system-ui,-apple-system,"Segoe UI","PingFang SC","Noto Sans SC","Microsoft YaHei UI",sans-serif;--f-mono:"Spline Sans Mono","Cascadia Mono",Consolas,monospace;
  --d-bg:#0a0d0b;--d-bg2:#111613;--d-fg:#e9eee9;--d-dim:#a3ada5;--d-line:#252d27;--d-acc:#9cff57}
html[data-theme="light"]{--d-bg:#f4f5f1;--d-bg2:#e9ece5;--d-fg:#101512;--d-dim:#4d5850;--d-line:#cfd5cc;--d-acc:#2f7d1e}
*{box-sizing:border-box}
/* the proposal's frames inherited its document rule .doc p; same specificity and order here so every paragraph lays out as approved */
.mk p{max-width:70ch;margin:10px 0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:#080b0a}
html[data-theme="light"]{background:#f3f5ef}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;min-height:100vh}
html[data-lang="en"] .zh,html[data-lang="zh"] .en{display:none!important}
.mk{min-height:100vh;overflow-x:clip}
.mk :focus-visible{outline:2px solid var(--sigtx,#9cff57);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:#9cff57;color:#07100a;padding:10px 14px;border-radius:8px;font:600 15px var(--f-ui)}
.skip:focus{top:12px}
/* the design is drawn at 1440 px; between tablet and desktop widths it scales as a whole */
@media (min-width:900px) and (max-width:1439.98px){.mk{zoom:var(--hxz,1)}}
.mk .tb{position:relative}
.tb-set{display:none!important}
.mk .pp{max-height:calc(100vh - 100px);overflow:auto}
.mk .pp em{min-width:0}
.mk main{display:block}
.mk .btn{text-decoration:none}
.mk button.flm-c{appearance:none;border:1px solid var(--line);background:var(--bg2);color:var(--fg);text-align:left;padding:0;border-radius:12px;overflow:hidden;cursor:pointer;font:inherit}
.mk button.flm-c[aria-pressed="true"]{border-color:var(--sig);box-shadow:inset 0 3px 0 var(--sig)}
.flm-player{margin-bottom:22px;border-radius:16px;overflow:hidden;background:#000;border:1px solid var(--line);aspect-ratio:16/9}
.flm-player video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
.flm-err{color:var(--fg2);font-size:15px;margin:10px 0 0}
.flm-err a{color:var(--sigtx);text-decoration:underline}
/* mobile sheets (projects + settings) and bottom bar: proposal styling, real positioning */
.sheet-wrap{position:fixed;inset:0;z-index:60}
.sheet-wrap[hidden]{display:none}
.mk .scrim{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.mk .sheet{position:absolute;left:0;right:0;bottom:0;max-height:84vh;overflow:auto;background:var(--bg2);color:var(--fg);border-radius:22px 22px 0 0;border-top:1px solid var(--line);padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px));box-shadow:0 -20px 50px rgba(0,0,0,.45)}
.mk .sheet a{color:var(--fg);text-decoration:none}
.sh-h{display:flex;justify-content:space-between;align-items:center;padding:0 4px 8px}
.sh-h b{font:700 20px/1.2 var(--f-ui)}
.sh-x{width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:inherit;font-size:26px;cursor:pointer}
.set-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 6px;font:540 16px var(--f-ui)}
.set-row .tb-lang button{min-width:64px}
.mk .bnav{display:none;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));height:68px;z-index:50;border-radius:20px;background:color-mix(in srgb,var(--bg2) 94%,transparent);border:1px solid var(--line);grid-template-columns:repeat(4,1fr);backdrop-filter:blur(14px);box-shadow:0 14px 34px -10px rgba(0,0,0,.45)}
.mk .bnav a{text-decoration:none}
/* SkillTree page */
.mk-st .st-hero{padding:80px 48px 56px;display:grid;grid-template-columns:600px 1fr;gap:64px;align-items:end}
.mk-st .st-k{font:600 13px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg3)}
.mk-st h1{font:500 76px/1.03 "Source Serif 4",serif;letter-spacing:-.02em;margin:22px 0 0}
.mk-st h1 b{font-weight:500;color:#9d8cff}
.mk-st h1.zh{font:600 60px/1.3 "Noto Serif SC",serif}
.mk-st .st-lede{font-size:20px;line-height:1.65;color:var(--fg2);max-width:46ch;margin:0}
.mk-st .st-lede.zh{font-size:18px;line-height:1.95}
.mk-st .st-acts{display:flex;gap:14px;margin-top:28px}
.mk-st .btn-p{--btn-bg:#9d8cff;--btn-fg:#100c24}
.mk-st .st-sec{padding:0 48px 80px}
.mk-st .st-stage{max-width:1100px}
.mk-st .st-mstage{display:none}
.mk-st .st-cap{font-size:15px;color:var(--fg2);max-width:70ch;margin:18px auto 0;text-align:center}
.mk-st .st-cap.zh{line-height:1.9}
.mk-st .st-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:64px 48px;border-top:1px solid var(--line)}
.mk-st .st-notes h3{font:600 24px/1.25 "Source Serif 4","Noto Serif SC",serif;margin:0 0 10px}
.mk-st .st-notes p{margin:0;color:var(--fg2);font-size:16.5px;line-height:1.65}
.mk-st .st-notes p.zh{line-height:1.9}
.mk-st .st-end{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:48px;border-top:1px solid var(--line)}
.mk-st .st-end p{margin:0;color:var(--fg2);max-width:62ch}
@media (prefers-reduced-motion:reduce){.strip-track{animation:none!important}.strip{overflow-x:auto}}
/* phone-only and desktop-only blocks from the proposal's phone frames */
.mob-only,.mob-inl{display:none!important}
.mo-tabs .chiprow{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 16px}
.mo-tabs .chiprow button{appearance:none;font:600 14px/1 var(--f-ui);padding:8px 12px;min-height:34px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--fg);cursor:pointer}
.mo-tabs .chiprow button[aria-selected="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.mo-tabs [role="tabpanel"][hidden]{display:none}
.mo-tabs .mt-cap{margin:0;padding:14px 16px 16px;font-size:15px;line-height:1.6;color:#17344b;max-width:none}
.mo-tabs .mt-txt{padding:18px 16px;color:#17344b}
.mo-tabs .mt-txt p{margin:0 0 12px;font-size:16px;line-height:1.6;max-width:none}
.mo-tabs .mt-txt .btn-t{color:#17344b;border-color:rgba(23,52,75,.25)}
.mode-dots{gap:6px;justify-content:center;margin-top:14px}
.mode-dots i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:width .2s,background .2s}
.mode-dots i.on{width:20px;border-radius:4px;background:var(--fg)}
@media (prefers-reduced-motion:reduce){.mode-dots i{transition:none}}

/* ======================= MOCKUP BASE ======================= */
.mk{width:100%;font-family:var(--f-ui);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

.mk *{box-sizing:border-box}
.mk a{color:inherit;text-decoration:none}
.mk button{font-family:inherit;cursor:pointer}
.mk img{display:block;max-width:100%}
.mk .zh{font-family:var(--zh-ui,"Noto Sans SC"),"PingFang SC","Microsoft YaHei UI",sans-serif}

.mk .ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mk .ic.f{fill:currentColor;stroke:none}
.mk .dk{display:var(--show-dk,block)} .mk .lt{display:var(--show-lt,none)}
/* brand tokens */
html[data-theme="dark"] .mk{--bg:#080b0a;--bg2:#0e1410;--bg3:#141b16;--fg:#e9eee9;--fg2:#a3ada5;--fg3:#78837b;--line:#222a25;--sig:#9cff57;--sigtx:#9cff57;--on-sig:#07100a;--show-dk:block;--show-lt:none;--grid:rgba(156,255,87,.035);color-scheme:dark}
html[data-theme="light"] .mk{--bg:#f3f5ef;--bg2:#e8ece4;--bg3:#dde3d9;--fg:#0a0f0c;--fg2:#465249;--fg3:#68736b;--line:#cfd6cb;--sig:#9cff57;--sigtx:#2f7d1e;--on-sig:#07100a;--show-dk:none;--show-lt:block;--grid:rgba(10,15,12,.045);color-scheme:light}
.mk{background:var(--bg);color:var(--fg)}
/* shared buttons (same shape everywhere; fill comes from the page) */
.mk .btn{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 26px;border-radius:10px;font:640 17px/1 var(--f-ui);border:1.5px solid transparent;white-space:nowrap;transition:transform .15s,background .15s,border-color .15s}
.mk .btn .ic{width:17px;height:17px}
.mk .btn-p{background:var(--btn-bg,var(--sig));color:var(--btn-fg,var(--on-sig))}
.mk .btn-s{background:transparent;color:var(--fg);border-color:var(--btn-line,var(--line))}
.mk .btn:hover{transform:translateY(-1px)}
.mk .btn-t{font:600 16px/1 var(--f-ui);color:var(--fg);display:inline-flex;align-items:center;gap:8px;border-bottom:1.5px solid var(--line);padding-bottom:4px}
.mk .chip{display:inline-flex;align-items:center;gap:7px;font:500 13px/1 var(--f-mono);letter-spacing:.02em;color:var(--fg2)}
.mk .dot{width:7px;height:7px;border-radius:50%;background:var(--dotc,var(--sig))}
/* shared top bar */
.mk .tb{height:68px;display:flex;align-items:center;gap:28px;padding:0 48px;border-bottom:1px solid var(--line);position:relative;z-index:5;background:var(--tb-bg,var(--bg))}
.mk .tb-brand{display:flex;align-items:center;gap:12px;font:660 18px/1 var(--f-ui)}
.mk .tb-brand img{width:30px;height:30px}
.mk .tb-links{display:flex;gap:26px;margin-left:24px;font:540 15.5px/1 var(--f-ui);color:var(--fg2)}
.mk .tb-links a.on{color:var(--fg)}
.mk .tb-links a.on::after{content:"";display:block;height:2px;background:var(--sigtx);margin-top:6px;border-radius:2px}
.mk .tb-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.mk .tb-proj{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 14px;border-radius:9px;border:1px solid var(--line);background:var(--bg2);color:var(--fg);font:620 15px/1 var(--f-ui)}
.mk .tb-proj .n{font:500 12px/1 var(--f-mono);color:var(--fg3)}
.mk .tb-proj .cur{color:var(--fg)}
.mk .tb-ico{width:40px;height:40px;border-radius:9px;display:grid;place-items:center;color:var(--fg2);border:1px solid transparent;background:transparent}
.mk .tb-ico:hover{border-color:var(--line);color:var(--fg)}
.mk .tb-lang{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;height:40px}
.mk .tb-lang button{border:0;background:transparent;color:var(--fg3);font:600 13.5px/1 var(--f-ui);padding:0 12px;min-width:40px}
.mk .tb-lang button.on{color:var(--fg);background:var(--bg3)}
.mk .tb-step{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;height:40px}
.mk .tb-step a{width:40px;display:grid;place-items:center;color:var(--fg2)}
.mk .tb-step a+a{border-left:1px solid var(--line)}
/* projects panel */
.mk .pp{position:absolute;right:48px;top:76px;width:560px;background:var(--bg2);border:1px solid var(--line);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.35);padding:18px;z-index:20;display:none}
.mk .pp.open{display:block}
.mk .pp-h{display:flex;justify-content:space-between;align-items:baseline;padding:2px 6px 12px;border-bottom:1px solid var(--line)}
.mk .pp-h b{font:700 18px/1 var(--f-ui)}
.mk .pp-g{font:500 12px/1 var(--f-mono);color:var(--fg3);letter-spacing:.06em;padding:14px 6px 6px;text-transform:uppercase}
.mk .pp a{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;padding:8px 6px;border-radius:9px}
.mk .pp a:hover{background:var(--bg3)}
.mk .pp a .th{width:56px;height:38px;border-radius:6px;background:var(--bg3) center/cover no-repeat;border:1px solid var(--line)}
.mk .pp a b{font:620 15.5px/1.2 var(--f-ui);display:block}
.mk .pp a span{font-size:13.5px;color:var(--fg2);line-height:1.3}
.mk .pp a.here{background:color-mix(in srgb,var(--sig) 10%,transparent);box-shadow:inset 3px 0 0 var(--sigtx)}
.mk .pp a em{font:500 11.5px/1 var(--f-mono);font-style:normal;color:var(--sigtx)}

/* ======================= HOME ======================= */
.mk-home{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:48px 48px;background-position:-1px -1px}
.h-hero{height:832px;display:grid;grid-template-columns:520px 1fr;gap:64px;padding:64px 48px 40px;position:relative}
.h-left{display:flex;flex-direction:column;padding-top:28px}
.h-kick{display:flex;gap:14px;align-items:center;font:500 13.5px/1 var(--f-mono);color:var(--fg2);letter-spacing:.03em}
.h-kick .clk{color:var(--fg)}
.h-name{font:820 154px/.86 var(--f-ui);font-stretch:64%;letter-spacing:-.025em;margin:34px 0 0;padding-bottom:.08em}
.h-name .x{color:var(--fg)}
.h-intro{font-size:21.5px;line-height:1.55;color:var(--fg2);margin:30px 0 0;max-width:30ch;text-wrap:pretty}
.h-intro b{color:var(--fg);font-weight:600}
.zh .h-intro,.h-intro.zh{font-size:20px;line-height:1.8;max-width:23em}
.h-acts{display:flex;gap:12px;margin-top:38px}
.h-soc{display:flex;gap:6px;margin-top:auto;padding-top:24px;align-items:center}
.h-soc a{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 12px;border-radius:8px;color:var(--fg2);font:540 14px/1 var(--f-ui)}
.h-soc a:hover{background:var(--bg2);color:var(--fg)}
.h-soc .lbl{font:500 12.5px/1 var(--f-mono);color:var(--fg3);margin-right:6px;letter-spacing:.04em}
.h-right{display:flex;flex-direction:column;gap:14px;min-width:0}
.stage{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/10;background:#0c0f0d;border:1px solid var(--line);box-shadow:0 40px 90px -40px rgba(0,0,0,.6)}
.stage .slide{position:absolute;inset:0;opacity:0;transition:opacity .45s,transform .6s;transform:scale(1.015)}
.stage .slide.on{opacity:1;transform:none}
.stage video,.stage .slide>img{width:100%;height:100%;object-fit:cover}
.stage .shade{position:absolute;inset:auto 0 0 0;height:58%;background:linear-gradient(to top,rgba(5,8,6,.92),rgba(5,8,6,.55) 45%,transparent)}
.stage .meta{position:absolute;left:30px;right:30px;bottom:26px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;color:#f1f4f0}
.stage .meta .t{font-size:16px;line-height:1.45;color:rgba(241,244,240,.82);max-width:34ch}
.stage .meta .n{display:block;margin-bottom:6px;color:#fff}
.stage .lab{position:absolute;left:18px;top:16px;font:500 12px/1 var(--f-mono);letter-spacing:.04em;color:rgba(255,255,255,.86);background:rgba(0,0,0,.45);padding:7px 9px;border-radius:6px;backdrop-filter:blur(6px)}
.stage .pz{position:absolute;right:16px;top:14px;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:8px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.45);color:#fff;font:600 13.5px/1 var(--f-ui);backdrop-filter:blur(6px)}
.stage .play{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:9px;font:640 15px/1 var(--f-ui);white-space:nowrap}
.n-dl{font:700 38px/.95 "Barlow Condensed",var(--f-ui);letter-spacing:.005em}
.n-moci{font:600 34px/1 "Source Serif 4","Noto Serif SC",serif;letter-spacing:-.01em}
.n-fi{font:700 34px/1 var(--f-ui);font-stretch:85%}
.slide-moci{background:#efe9dd}
.slide-moci img{object-position:60% 40%}
.slide-fi{background:#0b100d;display:grid;place-items:center}
.slide-fi img{width:62%!important;height:auto!important;object-fit:contain!important;opacity:.95}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tab{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;text-align:left;padding:10px;border-radius:12px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg2) 80%,transparent);color:var(--fg);position:relative}
.tab .th{width:64px;height:44px;border-radius:7px;background:var(--bg3) center/cover no-repeat}
.tab b{display:block;font:640 15.5px/1.2 var(--f-ui)}
.tab span{font-size:13.5px;color:var(--fg2);line-height:1.25}
.tab[aria-selected="true"]{border-color:color-mix(in srgb,var(--sigtx) 70%,var(--line));background:var(--bg2)}
.tab[aria-selected="true"]::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--sigtx);border-radius:2px}
.h-all{display:flex;justify-content:space-between;align-items:center;font-size:15px;color:var(--fg2);padding:0 4px}
.h-all a{color:var(--fg);font-weight:600;display:inline-flex;gap:8px;align-items:center}
/* home sections */
.h-sec{padding:120px 48px 0}
.h-sh{display:grid;grid-template-columns:520px 1fr;gap:64px;align-items:end;margin-bottom:44px}
.h-sh h2{font:800 76px/.92 var(--f-ui);font-stretch:66%;letter-spacing:-.015em;margin:0}
.h-sh p{margin:0;font-size:19px;color:var(--fg2);max-width:46ch}
/* DriverLab spread */
.f-dl{border-radius:22px;overflow:hidden;background:#0d1012;color:#eef1f3;position:relative}
.f-dl .rule{display:flex;height:4px}.f-dl .rule i{flex:1}.f-dl .rule i:first-child{background:#e5484d}.f-dl .rule i:last-child{background:#3e7bfa}
.f-dl .vid{position:relative;aspect-ratio:21/8.4;overflow:hidden}
.f-dl .vid video,.f-dl .vid img{width:100%;height:100%;object-fit:cover}
.f-dl .vid .pz{position:absolute;right:20px;bottom:18px}
.f-dl .vid .lab{position:absolute;left:20px;bottom:20px;font:500 12px/1 var(--f-mono);background:rgba(0,0,0,.5);color:#fff;padding:7px 9px;border-radius:6px}
.f-dl .body{display:grid;grid-template-columns:400px 1fr 300px;gap:56px;padding:44px 48px 48px}
.f-dl h3{font:700 84px/.86 "Barlow Condensed",var(--f-ui);margin:0;letter-spacing:.005em}
.f-dl .kick{font:600 15px/1 "Barlow Condensed",var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:#9aa6b0;margin-bottom:16px;display:block}
.f-dl h4{font:600 30px/1.15 "Barlow",var(--f-ui);margin:0 0 14px;letter-spacing:-.005em}
.f-dl p{font:400 17.5px/1.65 "Barlow",var(--f-ui);color:#b8c2ca;margin:0;max-width:52ch}
.f-dl .zh h4,.f-dl h4.zh{font:700 28px/1.35 "Noto Sans SC",sans-serif}
.f-dl p.zh{font:400 16.5px/1.85 "Noto Sans SC",sans-serif}
.f-dl .facts{display:flex;gap:26px;margin-top:22px;font:500 15px/1.3 "Barlow",var(--f-ui);color:#dfe5ea}
.f-dl .facts span::before{content:"";display:inline-block;width:8px;height:8px;background:#f0e14a;border-radius:1px;margin-right:9px;transform:translateY(-1px)}
.f-dl .acts{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.f-dl .btn-p{--btn-bg:#f0e14a;--btn-fg:#121212;justify-content:center;font-family:"Barlow",var(--f-ui);font-weight:600;font-size:17px}
.f-dl .btn-s{color:#eef1f3;border-color:#3a4148;justify-content:center;font-family:"Barlow",var(--f-ui);font-weight:600}
.f-dl .btn-t{color:#c9d1d8;border-color:#3a4148;justify-content:center;font-family:"Barlow",var(--f-ui)}
/* MOCI spread */
.f-moci{margin-top:28px;border-radius:22px;overflow:hidden;background:#f3ede1;color:#17344b;display:grid;grid-template-columns:520px 1fr;position:relative}
html[data-theme="dark"] .f-moci{background:#e9e1d1}
.f-moci .pg{padding:52px 48px;position:relative;background-image:repeating-linear-gradient(transparent 0 35px,rgba(23,52,75,.08) 35px 36px);background-position:0 18px}
.f-moci .pg::before{content:"";position:absolute;left:30px;top:0;bottom:0;width:1px;background:rgba(212,93,69,.45)}
.f-moci .lock{display:flex;align-items:center;gap:12px;font:600 19px/1 "Source Serif 4","Noto Serif SC",serif}
.f-moci .lock img{width:40px;height:40px}
.f-moci .lock small{font:600 12px/1 var(--f-ui);letter-spacing:.2em;color:#d45d45}
.f-moci h3{font:560 50px/1.08 "Source Serif 4",serif;letter-spacing:-.015em;margin:30px 0 18px;text-wrap:balance}
.f-moci h3.zh{font:600 44px/1.3 "Noto Serif SC",serif;letter-spacing:.01em}
.f-moci p{font:400 17.5px/1.7 var(--f-ui);color:#3c5366;margin:0;max-width:44ch}
.f-moci p.zh{font-size:16.5px;line-height:1.9}
.f-moci .steps{display:grid;grid-template-columns:repeat(4,auto);gap:0;margin:30px 0 0;justify-content:start}
.f-moci .steps span{display:flex;align-items:center;gap:8px;font:600 15px/1 "Source Serif 4","Noto Serif SC",serif;color:#17344b;padding-right:14px}
.f-moci .steps span+span::before{content:"→";color:#b0a48c;margin-right:14px;font-family:var(--f-ui)}
.f-moci .acts{display:flex;gap:14px;align-items:center;margin-top:34px}
.f-moci .btn-p{--btn-bg:#17344b;--btn-fg:#f6f1e7}
.f-moci .btn-t{color:#17344b;border-color:rgba(23,52,75,.3)}
.f-moci .hon{margin-top:26px;font:italic 400 15px/1.5 "Source Serif 4","Noto Serif SC",serif;color:#6a7a86}
.f-moci .hon.zh{font-style:normal}
.f-moci .dev{padding:44px 44px 44px 0;display:grid;place-items:center}
.ipad{position:relative;width:100%;border-radius:30px;background:#1d2227;padding:14px;box-shadow:0 30px 60px -20px rgba(23,52,75,.45),0 0 0 1px rgba(0,0,0,.2)}
.ipad .scr{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:1180/820;background:#f6f1e7}
.ipad .scr img{width:100%;height:100%;object-fit:cover}
.ipad .ink{position:absolute;left:40%;top:44%;font:500 74px/1 "Caveat",cursive;color:#1f3a52;white-space:nowrap;clip-path:inset(0 100% 0 0)}
.ipad .ink.go{animation:write 1.9s steps(28,end) .3s forwards}
.ipad .tick{position:absolute;left:39%;top:36%;width:26%;height:30%;overflow:visible}
.ipad .tick path{vector-effect:non-scaling-stroke;fill:none;stroke:#d45d45;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:1 2;stroke-dashoffset:1.01}
.ipad .tick.go path{animation:draw .7s ease-out 2.4s forwards}
.ipad .ill{position:absolute;right:12px;bottom:12px;font:500 11.5px/1 var(--f-mono);color:#5b6b78;background:rgba(246,241,231,.92);padding:6px 8px;border-radius:5px;border:1px solid rgba(23,52,75,.15)}
@keyframes write{to{clip-path:inset(0 0 0 0)}}
@keyframes draw{to{stroke-dashoffset:0}}
/* FindItem compact */
.f-fi{margin-top:28px;display:grid;grid-template-columns:360px 1fr auto;gap:48px;align-items:center;padding:30px 36px;border-radius:22px;border:1px solid var(--line);background:var(--bg2)}
.f-fi .art{height:170px;border-radius:12px;background:#0b100d;display:grid;place-items:center}
.f-fi .art img{height:150px}
.f-fi h3{font:720 40px/1 var(--f-ui);font-stretch:82%;margin:0 0 10px}
.f-fi p{margin:0;color:var(--fg2);font-size:17px;max-width:56ch}
.f-fi .chip{margin-top:14px}
/* more projects list */
.mp{border-top:1px solid var(--line)}
.mp a{display:grid;grid-template-columns:300px 1fr 130px;gap:36px;align-items:center;padding:26px 8px;border-bottom:1px solid var(--line);position:relative}
.mp a:hover{background:color-mix(in srgb,var(--bg2) 70%,transparent)}
.mp .d{font-size:18px;color:var(--fg2);line-height:1.45}
.mp .k2{font:500 13px/1.3 var(--f-mono);color:var(--fg3);letter-spacing:.03em}
.mp .go{justify-self:end;font:600 14.5px/1 var(--f-ui);display:inline-flex;gap:8px;align-items:center;color:var(--fg)}
.mp .runs{display:block;font:500 13px/1.4 var(--f-mono);color:var(--sigtx);margin-top:6px}
.mp .pv{position:absolute;right:170px;top:50%;width:220px;height:130px;margin-top:-65px;border-radius:10px;background:var(--bg3) center/cover no-repeat;border:1px solid var(--line);opacity:0;transform:translateY(8px) rotate(-1.5deg);transition:.25s;pointer-events:none;box-shadow:0 20px 40px -12px rgba(0,0,0,.45)}
.mp a:hover .pv{opacity:1;transform:none}
.w-vira{font:900 44px/1 var(--f-ui);font-stretch:72%;letter-spacing:-.03em}.w-vira i{font:italic 400 44px/1 "Source Serif 4",serif;letter-spacing:-.02em}
.w-fact{font:640 36px/1 var(--f-ui);position:relative;padding:4px 10px}.w-fact::before,.w-fact::after{content:"";position:absolute;width:12px;height:12px;border:2px solid #4a90e2}.w-fact::before{left:-2px;top:-4px;border-right:0;border-bottom:0}.w-fact::after{right:-2px;bottom:-4px;border-left:0;border-top:0}
.w-skill{font:500 40px/1 "Source Serif 4",serif;color:var(--fg);letter-spacing:-.01em}.w-skill b{color:#9d8cff;font-weight:500}
.w-ctx{font:500 36px/1 var(--f-mono);letter-spacing:-.02em}.w-ctx::after{content:"_";color:#d9b25b}
.w-loom{font:300 40px/1 var(--f-ui);font-stretch:112%;letter-spacing:.02em;color:var(--fg)}.w-loom b{color:#9b8cf0;font-weight:300}
.w-rl{font:700 34px/1 var(--f-mono);letter-spacing:-.04em}.w-rl b{color:#3fc1b0;font-weight:700}
/* films */
.films{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:16px}
.films a{display:block}
.films .cv{aspect-ratio:16/9;border-radius:10px;background:var(--bg3) center/cover;border:1px solid var(--line);position:relative}
.films .cv span{position:absolute;right:8px;bottom:8px;font:500 12px/1 var(--f-mono);background:rgba(0,0,0,.6);color:#fff;padding:5px 7px;border-radius:5px}
.films b{display:block;font:620 16.5px/1.3 var(--f-ui);margin-top:12px}
.films small{font-size:14px;color:var(--fg2);line-height:1.4;display:block;margin-top:4px}
/* about + footer */
.ab{display:grid;grid-template-columns:520px 1fr;gap:64px}
.ab p{font-size:21px;line-height:1.6;color:var(--fg2);margin:0 0 18px;max-width:40ch}
.ab p b{color:var(--fg);font-weight:600}
.ab p.zh{font-size:19px;line-height:1.9;max-width:26em}
.ab .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);margin-top:28px}
.ab .facts div{padding:18px 18px 0 0}
.ab .facts small{font:500 12.5px/1 var(--f-mono);color:var(--fg3);letter-spacing:.04em;display:block;margin-bottom:8px}
.ab .facts b{font:620 17px/1.35 var(--f-ui)}
.ab .facts a{color:var(--sigtx);font-size:14px}
.ft{margin-top:120px;padding:56px 48px 64px;border-top:1px solid var(--line);display:grid;grid-template-columns:520px 1fr 1fr 1fr;gap:64px;font-size:15px}
.ft h5{font:500 12.5px/1 var(--f-mono);color:var(--fg3);letter-spacing:.06em;margin:0 0 16px;text-transform:uppercase}
.ft a{display:block;color:var(--fg2);margin-bottom:9px}
.ft .em{font:600 22px/1.3 var(--f-ui);color:var(--fg)}

/* ======================= MOCI PAGE ======================= */
html[data-theme="light"] .mk-moci{--bg:#f5f0e6;--bg2:#ece5d7;--bg3:#e3dac8;--fg:#17344b;--fg2:#4a5f70;--fg3:#7a8792;--line:#ddd3c1;--sig:#17344b;--sigtx:#d45d45;--on-sig:#f6f1e7;--paper:#fbf8f1;--paper-fg:#17344b}
html[data-theme="dark"] .mk-moci{--bg:#0f1c27;--bg2:#152634;--bg3:#1c3142;--fg:#efe8da;--fg2:#b6bfc5;--fg3:#86939c;--line:#253a4b;--sig:#efe8da;--sigtx:#ec8a72;--on-sig:#0f1c27;--paper:#ece4d4;--paper-fg:#17344b}
.mk-moci{--zh-ui:"Noto Sans SC"}
.mk-moci .tb{--tb-bg:transparent}
.mo-hero{display:grid;grid-template-columns:560px 1fr;gap:56px;padding:72px 48px 88px;align-items:center}
.mo-lock{display:flex;align-items:center;gap:14px}
.mo-lock .mk-ic{width:52px;height:52px;border-radius:12px;background:var(--paper);display:grid;place-items:center;box-shadow:0 0 0 1px var(--line)}
.mo-lock .mk-ic img{width:40px;height:40px}
.mo-lock b{font:600 24px/1 "Noto Serif SC","Source Serif 4",serif;letter-spacing:.06em}
.mo-lock small{font:600 12.5px/1 var(--f-ui);letter-spacing:.24em;color:var(--sigtx);display:block;margin-top:8px}
.mo-h1{font:520 80px/1.03 "Source Serif 4",serif;letter-spacing:-.02em;margin:40px 0 0;text-wrap:balance}
.mo-h1.zh{font:600 66px/1.26 "Noto Serif SC",serif;letter-spacing:.01em}
.mo-h1 em{font-style:italic;color:var(--sigtx);font-weight:450}
.mo-h1.zh em{font-style:normal}
.mo-lede{font-size:20px;line-height:1.65;color:var(--fg2);margin:28px 0 0;max-width:44ch}
.mo-lede.zh{font-size:18.5px;line-height:1.95;max-width:28em}
.mo-acts{display:flex;gap:18px;align-items:center;margin-top:36px}
.mk-moci .btn-p{--btn-bg:var(--fg);--btn-fg:var(--bg)}
html[data-theme="dark"] .mk-moci .btn-p{--btn-bg:#efe8da;--btn-fg:#0f1c27}
.mo-stat{display:flex;gap:10px;align-items:center;margin-top:30px;font:italic 400 16px/1.4 "Source Serif 4","Noto Serif SC",serif;color:var(--fg3)}
.mo-stat.zh{font-style:normal;font-size:15px}
.mo-stat i{width:8px;height:8px;border-radius:50%;background:var(--sigtx);display:inline-block}
.mo-sec{padding:96px 48px;border-top:1px solid var(--line);position:relative}
.mo-why{display:grid;grid-template-columns:560px 1fr;gap:56px;align-items:start}
.mo-h2{font:520 52px/1.1 "Source Serif 4",serif;letter-spacing:-.015em;margin:0;text-wrap:balance}
.mo-h2.zh{font:600 44px/1.35 "Noto Serif SC",serif}
.mo-p{font-size:19px;line-height:1.75;color:var(--fg2);margin:0 0 16px;max-width:52ch}
.mo-p.zh{font-size:17.5px;line-height:2;max-width:32em}
.mo-ex{margin-top:28px;display:flex;align-items:baseline;gap:22px;font:400 46px/1 "Caveat",cursive;color:var(--fg)}
.mo-ex s{text-decoration:none;position:relative;color:var(--fg)}
.mo-ex .car{position:relative}
.mo-ex .car::after{content:"u";position:absolute;left:.35em;top:-.62em;font-size:.62em;color:var(--sigtx)}
.mo-ex .car::before{content:"";position:absolute;left:.28em;top:.05em;width:.32em;height:.32em;border-left:2px solid var(--sigtx);border-top:2px solid var(--sigtx);transform:rotate(45deg)}
.mo-ex small{font:400 15px/1.4 var(--f-ui);color:var(--fg3);align-self:center}
.mo-steps{display:grid;grid-template-columns:360px 1fr;gap:56px}
.mo-rail{position:relative}
.mo-rail ol{list-style:none;margin:28px 0 0;padding:0;border-left:1px solid var(--line)}
.mo-rail li{padding:18px 0 18px 26px;position:relative;color:var(--fg3)}
.mo-rail li b{display:block;font:600 24px/1.2 "Source Serif 4","Noto Serif SC",serif;color:inherit}
.mo-rail li span{font-size:15px;line-height:1.5;display:block;margin-top:4px}
.mo-rail li.on{color:var(--fg)}
.mo-rail li.on::before{content:"";position:absolute;left:-2px;top:18px;bottom:18px;width:3px;background:var(--sigtx);border-radius:2px}
.mo-shots{display:grid;gap:22px}
.mo-shot{display:grid;grid-template-columns:1fr 300px;gap:30px;align-items:center}
.mo-shot .scr{border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px var(--line),0 24px 50px -24px rgba(15,28,39,.45)}
.mo-shot .scr img{width:100%}
.mo-shot h4{font:600 26px/1.2 "Source Serif 4","Noto Serif SC",serif;margin:0 0 10px}
.mo-shot p{margin:0;color:var(--fg2);font-size:16.5px;line-height:1.65}
.mo-shot p.zh{line-height:1.9;font-size:16px}
.mo-shot .n{font:600 13px/1 var(--f-ui);letter-spacing:.2em;color:var(--sigtx);display:block;margin-bottom:12px}
.mo-cap{font:500 12px/1 var(--f-mono);color:var(--fg3);margin-top:10px}
.mo-rhythm{display:grid;grid-template-columns:560px 1fr;gap:56px;align-items:center}
.tl{position:relative;height:150px;margin-top:10px}
.tl .ln{position:absolute;left:0;right:0;top:64px;height:2px;background:var(--line)}
.tl .pt{position:absolute;top:44px;transform:translateX(-50%);text-align:center;width:120px}
.tl .pt i{display:block;width:16px;height:16px;border-radius:50%;margin:12px auto 12px;background:var(--bg);border:2.5px solid var(--sigtx)}
.tl .pt b{font:500 34px/1 "Caveat",cursive;color:var(--fg);display:block;position:absolute;top:-30px;left:0;right:0}
.tl .pt span{font-size:14px;color:var(--fg3)}
.keys{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.keys span{display:inline-flex;gap:10px;align-items:center;padding:10px 14px;border-radius:10px;background:var(--bg2);border:1px solid var(--line);font-size:15px}
.keys kbd{font:600 13px/1 var(--f-mono);border:1px solid var(--line);border-bottom-width:2.5px;border-radius:5px;padding:4px 7px;background:var(--bg)}
.ledger{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:40px}
.ledger>div{background:var(--paper);color:var(--paper-fg);border-radius:16px;padding:30px 32px;background-image:repeating-linear-gradient(transparent 0 33px,rgba(23,52,75,.08) 33px 34px);background-position:0 70px}
.ledger h4{font:600 24px/1.2 "Source Serif 4","Noto Serif SC",serif;margin:0 0 14px}
.ledger ul{list-style:none;margin:0;padding:0}
.ledger li{display:grid;grid-template-columns:26px 1fr;gap:8px;font-size:16px;line-height:1.55;padding:6px 0;color:#2c4558}
.ledger li.zh{font-size:15.5px;line-height:1.8}
.ledger .ok::before{content:"✓";color:#5f8c6c;font-weight:700}
.ledger .tb2::before{content:"○";color:#c0873a;font-weight:700}
.trycard{display:grid;grid-template-columns:1fr 520px;gap:56px;align-items:center}
.nb{background:var(--paper);color:var(--paper-fg);border-radius:18px;padding:30px 34px 26px;position:relative;box-shadow:0 0 0 1px var(--line);background-image:repeating-linear-gradient(transparent 0 39px,rgba(23,52,75,.09) 39px 40px);background-position:0 26px}
.nb::before{content:"";position:absolute;left:22px;top:0;bottom:0;width:1px;background:rgba(212,93,69,.5)}
.nb .q{font:600 30px/1.3 "Noto Serif SC",serif;margin:0 0 4px}
.nb .pos{font:italic 400 15px "Source Serif 4",serif;color:#6a7a86}
.nb input{width:100%;font:500 30px/1.2 "Source Serif 4",serif;color:#17344b;border:0;border-bottom:2px solid rgba(23,52,75,.35);background:transparent;padding:16px 0 8px;margin-top:10px;outline:none}
.nb input:focus{border-bottom-color:#d45d45}
.nb .row{display:flex;gap:12px;margin-top:18px}
.nb .row button{height:44px;padding:0 16px;border-radius:9px;font:600 15px var(--f-ui);border:1.5px solid rgba(23,52,75,.3);background:transparent;color:#17344b}
.nb .row button.pri{background:#17344b;color:#f6f1e7;border-color:#17344b}
.nb .fb{min-height:26px;margin-top:14px;font-size:15px;color:#4a5f70}
.nb .lab{position:absolute;right:16px;top:14px;font:500 11.5px/1 var(--f-mono);color:#7a8792}
/* MOCI prototype (signature interaction) */
.proto-moci{max-width:980px}
.pm-stage{position:relative}
.pm-ctl{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.pm-ctl button{font:600 14px var(--f-ui);height:40px;padding:0 14px;border-radius:8px;border:1px solid var(--d-line);background:var(--d-bg2);color:var(--d-fg);cursor:pointer}
.pm-ctl button[aria-pressed="true"]{background:var(--d-fg);color:var(--d-bg)}
.pm-paper{position:relative;aspect-ratio:16/8.2;border-radius:18px;overflow:hidden;background:#fbf8f1;color:#17344b;box-shadow:0 0 0 1px rgba(23,52,75,.15);background-image:repeating-linear-gradient(transparent 0 47px,rgba(23,52,75,.10) 47px 48px);background-position:0 30px;display:grid;grid-template-columns:38% 1fr}
.pm-q{background:#183448;color:#f2ede3;padding:7% 8%;display:flex;flex-direction:column;justify-content:center}
.pm-q small{font:600 12px/1 var(--f-ui);letter-spacing:.2em;opacity:.7}
.pm-q b{font:600 clamp(28px,4.4vw,52px)/1.2 "Noto Serif SC",serif;margin-top:14px}
.pm-q span{font:italic 400 16px "Source Serif 4",serif;opacity:.75;margin-top:8px}
.pm-w{position:relative;padding:0 6%}
.pm-w::before{content:"";position:absolute;left:4%;top:0;bottom:0;width:1px;background:rgba(212,93,69,.45)}
.pm-ink{position:absolute;left:12%;top:31%;font:500 clamp(40px,6.6vw,84px)/1 "Caveat",cursive;color:#1f3a52;white-space:nowrap}
.pm-ink .w{display:inline-block;clip-path:inset(0 100% 0 0)}
.pm-ins{position:absolute;left:1.02em;top:-.42em;font-size:.55em;color:#d45d45;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .35s}.pm-ins::after{content:'';position:absolute;left:.12em;top:1.15em;width:.42em;height:.42em;border-left:3px solid #d45d45;border-top:3px solid #d45d45;transform:rotate(45deg)}.pm-ins.show{opacity:1;transform:none}.pm-ul{position:absolute;left:0;width:5.1em;bottom:-.06em;height:3px;background:#6f8a76;border-radius:3px;transform:scaleX(0);transform-origin:left;transition:transform .6s ease-out}.pm-ul.show{transform:scaleX(1)}.pm-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.pm-svg path{vector-effect:non-scaling-stroke;fill:none;stroke:#d45d45;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 2;stroke-dashoffset:1.01}
.pm-fb{position:absolute;left:5%;right:5%;bottom:6%;background:#f6f1e7;border-radius:14px;padding:14px 18px;display:flex;gap:14px;align-items:center;box-shadow:0 10px 30px -10px rgba(23,52,75,.35),inset 0 3px 0 var(--fbc,#6f8a76);opacity:0;transform:translateY(14px);transition:opacity .35s,transform .45s cubic-bezier(.2,.7,.2,1)}
.pm-fb.show{opacity:1;transform:none}
.pm-fb i{width:34px;height:34px;border-radius:50%;background:var(--fbc,#6f8a76);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:700;flex:none}
.pm-fb b{font:600 18px/1.2 "Noto Serif SC","Source Serif 4",serif;display:block}
.pm-fb span{font-size:14px;color:#4a5f70}
.pm-cal{position:absolute;right:6%;top:9%;display:flex;gap:8px;opacity:0;transition:opacity .4s}
.pm-cal.show{opacity:1}
.pm-cal span{font:500 13px/1 var(--f-mono);padding:6px 8px;border-radius:6px;border:1px solid rgba(23,52,75,.2);color:#17344b;background:#fbf8f1}
.pm-cal span.on{background:#d45d45;color:#fff;border-color:#d45d45}
.pm-tag{position:absolute;right:12px;bottom:-30px;font:500 12px/1 var(--f-mono);color:var(--d-dim)}

/* ======================= DRIVERLAB PAGE ======================= */
html[data-theme="dark"] .mk-dl{--bg:#0e1113;--bg2:#161a1e;--bg3:#1e2328;--fg:#eef1f3;--fg2:#aab4bc;--fg3:#7d8891;--line:#272d33;--sig:#f0e14a;--sigtx:#f0e14a;--on-sig:#121212;--red:#e5484d;--blue:#3e7bfa}
html[data-theme="light"] .mk-dl{--bg:#eef0f2;--bg2:#e3e6ea;--bg3:#d7dbe0;--fg:#111417;--fg2:#4a545d;--fg3:#6c757d;--line:#cdd2d8;--sig:#f0e14a;--sigtx:#8a7a00;--on-sig:#121212;--red:#d7353b;--blue:#2c66e0}
.mk-dl{--f-dl:"Barlow Condensed","Bahnschrift",var(--f-ui);--f-dlb:"Barlow",var(--f-ui);font-family:var(--f-dlb)}
.mk-dl .tb{--tb-bg:var(--bg)}
.dl-hero{position:relative;height:760px;overflow:hidden;background:#0a0c0d}
.dl-hero video,.dl-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dl-hero .sh{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,10,11,.94) 0%,rgba(8,10,11,.78) 34%,rgba(8,10,11,.15) 66%,rgba(8,10,11,0)),linear-gradient(to top,rgba(8,10,11,.6),transparent 30%)}
.dl-hero .rule{position:absolute;left:0;right:0;top:0;height:4px;display:flex}.dl-hero .rule i{flex:1}.dl-hero .rule i:first-child{background:var(--red)}.dl-hero .rule i:last-child{background:var(--blue)}
.dl-in{position:absolute;left:48px;top:96px;width:700px;color:#f2f4f5}
.dl-logo{display:flex;align-items:center;gap:14px;font:700 26px/1 var(--f-dl);letter-spacing:.02em}
.dl-logo img{width:42px;height:42px}
.dl-kick{display:flex;gap:18px;margin-top:40px;font:600 15px/1 var(--f-dl);letter-spacing:.14em;text-transform:uppercase;color:#a9b4bd}
.dl-kick span+span::before{content:"/";margin-right:18px;color:#5d6871}
.dl-h1{font:700 98px/.92 var(--f-dl);letter-spacing:-.005em;margin:18px 0 0;text-wrap:balance}
.dl-h1.zh{font:800 52px/1.25 "Noto Sans SC",sans-serif;letter-spacing:.01em}
.dl-lede{font:400 20px/1.6 var(--f-dlb);color:#c3ccd3;margin:28px 0 0;max-width:46ch}
.dl-lede.zh{font:400 18.5px/1.9 "Noto Sans SC",sans-serif;max-width:28em}
.dl-acts{display:flex;gap:14px;margin-top:40px;align-items:center}
.mk-dl .btn{font-family:var(--f-dlb);font-weight:600;border-radius:8px}
.mk-dl .btn-p{--btn-bg:#f0e14a;--btn-fg:#121212;height:56px;font-size:18px;padding:0 28px}
.mk-dl .dl-hero .btn-s{color:#f2f4f5;border-color:rgba(255,255,255,.35);height:56px}
.dl-dev{margin-top:30px;display:flex;gap:22px;font:500 15px/1 var(--f-dlb);color:#9fabb4}
.dl-dev span{display:inline-flex;gap:8px;align-items:center}
.dl-hero .pz{position:absolute;right:28px;bottom:26px}
.dl-hero .lab{position:absolute;right:150px;bottom:34px;font:500 12px/1 var(--f-mono);color:rgba(255,255,255,.75)}
.pz{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 13px;border-radius:8px;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.5);color:#fff;font:600 13.5px/1 var(--f-ui);backdrop-filter:blur(6px)}
.dl-sec{padding:104px 48px;border-top:1px solid var(--line)}
.dl-sh{display:grid;grid-template-columns:560px 1fr;gap:64px;align-items:end;margin-bottom:48px}
.dl-k{font:600 14px/1 var(--f-dl);letter-spacing:.16em;text-transform:uppercase;color:var(--fg3);display:flex;align-items:center;gap:12px;margin-bottom:18px}
.dl-k::before{content:"";width:26px;height:3px;background:linear-gradient(90deg,var(--red) 50%,var(--blue) 50%)}
.dl-h2{font:700 64px/.98 var(--f-dl);margin:0;text-wrap:balance}
.dl-h2.zh{font:800 48px/1.25 "Noto Sans SC",sans-serif}
.dl-p{font:400 18.5px/1.65 var(--f-dlb);color:var(--fg2);margin:0;max-width:56ch}
.dl-p.zh{font:400 17px/1.95 "Noto Sans SC",sans-serif;max-width:34em}
.frc{display:grid;grid-template-columns:1fr 600px;gap:64px;align-items:center}
.field{position:relative;border-radius:16px;background:var(--bg2);border:1px solid var(--line);padding:22px}
.field svg{width:100%;height:auto;display:block}
.field .fl{font:600 13px/1 var(--f-dl);letter-spacing:.1em;text-transform:uppercase;fill:var(--fg2)}
.field .note{position:absolute;left:22px;bottom:-26px;font:500 12px/1 var(--f-mono);color:var(--fg3)}
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mode{border-radius:16px;overflow:hidden;background:var(--bg2);border:1px solid var(--line)}
.mode .im{aspect-ratio:16/9;background:#0b0d0e center/cover}
.mode .tx{padding:24px 26px 28px}
.mode .mn{font:700 13px/1 var(--f-dl);letter-spacing:.16em;text-transform:uppercase;color:var(--fg3)}
.mode h4{font:700 36px/1 var(--f-dl);margin:10px 0 12px}
.mode h4.zh{font:800 28px/1.3 "Noto Sans SC",sans-serif}
.mode p{margin:0;font:400 16.5px/1.6 var(--f-dlb);color:var(--fg2)}
.mode p.zh{font:400 15.5px/1.85 "Noto Sans SC",sans-serif}
.mode .meta{display:flex;gap:14px;margin-top:16px;font:600 14px/1 var(--f-dl);letter-spacing:.06em;color:var(--fg)}
.mode .meta span{padding:6px 9px;border-radius:5px;background:var(--bg3)}
.mode.orig .mn{color:var(--sigtx)}
.views{display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:start}
.vw{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/8.4;background:#0b0d0e}
.vw img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.vw img.on{opacity:1}
.vw .ann{position:absolute;display:flex;align-items:center;gap:8px;font:600 13.5px/1 var(--f-dl);letter-spacing:.06em;text-transform:uppercase;color:#fff;opacity:0;transform:translateY(6px);transition:.35s}
.vw .ann.on{opacity:1;transform:none}
.vw .ann i{width:12px;height:12px;border:2px solid #f0e14a;border-radius:50%;flex:none;background:rgba(0,0,0,.35)}
.vw .ann span{background:rgba(0,0,0,.62);padding:6px 9px;border-radius:5px;backdrop-filter:blur(4px)}
.vlist{display:grid;gap:10px}
.vlist button{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;text-align:left;padding:16px 18px;border-radius:12px;border:1px solid var(--line);background:var(--bg2);color:var(--fg)}
.vlist button b{display:block;font:700 22px/1.1 var(--f-dl)}
.vlist button b.zh{font:700 18px/1.4 "Noto Sans SC",sans-serif}
.vlist button span{font:400 15px/1.5 var(--f-dlb);color:var(--fg2)}
.vlist button span.zh{font-family:"Noto Sans SC",sans-serif}
.vlist button .k3{font:600 13px/1 var(--f-mono);color:var(--fg3);padding-top:4px}
.vlist button[aria-pressed="true"]{border-color:var(--fg);box-shadow:inset 3px 0 0 #f0e14a}
.team{display:grid;grid-template-columns:640px 1fr;gap:64px;align-items:center}
.team .im{border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.flm{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.flm a{display:block;border-radius:12px;overflow:hidden;background:var(--bg2);border:1px solid var(--line)}
.flm .cv{aspect-ratio:16/9;background:#0b0d0e center/cover;position:relative}
.flm .cv span{position:absolute;right:8px;bottom:8px;font:500 12px/1 var(--f-mono);background:rgba(0,0,0,.65);color:#fff;padding:5px 7px;border-radius:5px}
.flm b{display:block;font:700 21px/1.15 var(--f-dl);padding:14px 16px 4px}
.flm b.zh{font:700 16px/1.4 "Noto Sans SC",sans-serif}
.flm small{display:block;padding:0 16px 16px;color:var(--fg2);font-size:14px}
.honest{display:grid;grid-template-columns:560px 1fr;gap:64px}
.honest ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.honest li{padding:16px 0;border-bottom:1px solid var(--line);font:400 16.5px/1.6 var(--f-dlb);color:var(--fg2);display:grid;grid-template-columns:150px 1fr;gap:24px}
.honest li.zh{font-family:"Noto Sans SC",sans-serif;line-height:1.85}
.honest li b{font:700 15px/1.4 var(--f-dl);letter-spacing:.08em;text-transform:uppercase;color:var(--fg)}
.dl-end{display:flex;justify-content:space-between;align-items:center;padding:56px 48px;border-top:1px solid var(--line)}
.dl-end h3{font:700 54px/1 var(--f-dl);margin:0}
.dl-end h3.zh{font:800 40px/1.3 "Noto Sans SC",sans-serif}

/* ======================= MOBILE ======================= */















.bnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font:560 12px/1 var(--f-ui);color:var(--fg2);position:relative}
.bnav a .ic{width:22px;height:22px}
.bnav a.on{color:var(--sigtx)}
.bnav a.on::after{content:"";position:absolute;bottom:8px;width:4px;height:4px;border-radius:50%;background:var(--sigtx)}
.sheet .grab{width:40px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 14px}
.sheet h6{font:500 12px/1 var(--f-mono);letter-spacing:.06em;color:var(--fg3);margin:14px 4px 6px;text-transform:uppercase}
.sheet a{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center;padding:8px 6px;border-radius:10px;min-height:56px}
.sheet a .th{width:52px;height:36px;border-radius:6px;background:var(--bg3) center/cover}
.sheet a b{font:620 15.5px/1.2 var(--f-ui);display:block}
.sheet a span{font-size:13px;color:var(--fg2)}
.sheet a.here{background:color-mix(in srgb,var(--sig) 10%,transparent);box-shadow:inset 3px 0 0 var(--sigtx)}
.mo-m{padding:30px 18px}
.mo-m .mo-h1{font-size:46px;margin-top:26px}
.mo-m .mo-h1.zh{font-size:38px}
.mo-m .mo-lede{font-size:17px;margin-top:18px}
.mo-m .mo-lede.zh{font-size:16px}
.mo-m .btn{width:100%;justify-content:center}











/* ======================= SKILLTREE STUDY ======================= */
.st-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}
@media (max-width:900px){.st-wrap{grid-template-columns:1fr}}
.st-desk{position:relative;border-radius:14px;overflow:hidden;background:#e6ead9;aspect-ratio:10/14}
.st-desk canvas{position:absolute;inset:0;width:100%;height:100%}
.st-node{position:absolute;transform:translate(-50%,-50%);font:600 13px/1 "Spline Sans Mono",monospace;color:#1f3a1c;background:rgba(250,248,238,.94);border:1.5px solid #3f7d34;border-radius:999px;padding:7px 11px;cursor:pointer;white-space:nowrap;box-shadow:0 4px 12px rgba(40,60,30,.25);transition:opacity .3s,transform .3s,background .2s}
.st-node:hover,.st-node[aria-expanded="true"]{background:#2f6b2c;color:#fff;border-color:#2f6b2c}
.st-node.lk{color:#5b4a36;border-color:#8a6a45;border-style:dashed;box-shadow:none;background:rgba(250,248,238,.85)}
.st-node.hid{opacity:0;transform:translate(-50%,-50%) scale(.6);pointer-events:none}
.st-root{position:absolute;left:50%;top:3.2%;transform:translate(-50%,-50%);font:600 13px/1 "Spline Sans Mono",monospace;color:#f3e9d8;letter-spacing:.08em;text-align:center}
.st-side{position:sticky;top:70px;background:var(--d-bg2);border:1px solid var(--d-line);border-radius:12px;padding:18px}
.st-side h4{margin:0 0 6px;font:640 18px/1.2 var(--f-ui)}
.st-side .k{display:block;margin-bottom:10px}
.st-side pre{font:13px/1.5 "Spline Sans Mono",monospace;background:#1f2a1c;color:#dfeccf;border-radius:8px;padding:12px;white-space:pre-wrap;margin:10px 0 0}
.st-ctl{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0}
.st-ctl input[type=range]{width:220px}
.st-ctl button{font:600 14px var(--f-ui);height:38px;padding:0 14px;border-radius:8px;border:1px solid var(--d-line);background:var(--d-bg2);color:var(--d-fg);cursor:pointer}
.st-mob{position:relative;width:min(100%,330px);aspect-ratio:390/1250;border-radius:30px;overflow:hidden;background:#e6ead9;border:8px solid #1a1d1b}
.st-mob canvas{position:absolute;inset:0;width:100%;height:100%}
.st-card{position:absolute;left:44%;right:5%;font:13px/1.4 var(--f-ui);color:#2a3a26;background:rgba(250,248,238,.93);border:1px solid #9bb98a;border-radius:10px;padding:9px 11px;box-shadow:0 6px 16px rgba(40,60,30,.18)}
.st-card b{display:block;font:600 13px "Spline Sans Mono",monospace;color:#1f3a1c;margin-bottom:2px}

/* ---- handwriting overlays ---- */
.hw-ov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.ipad .ill{right:auto;left:31%;top:15%;bottom:auto}
.ifb{position:absolute;left:28.5%;right:2.6%;bottom:3.4%;background:#f6f1e7;border-radius:12px;padding:12px 16px;display:flex;gap:12px;align-items:center;color:#17344b;box-shadow:0 10px 26px -10px rgba(23,52,75,.45),inset 0 3px 0 var(--k,#6f8a76);opacity:0;transform:translateY(10px);transition:opacity .3s,transform .4s cubic-bezier(.2,.7,.2,1)}
.ifb.show{opacity:1;transform:none}
.ifb i{width:30px;height:30px;border-radius:50%;background:var(--k,#6f8a76);color:#fff;font-style:normal;font-weight:700;display:grid;place-items:center;flex:none;font-size:15px}
.ifb b{font:600 16px/1.3 "Noto Serif SC","Source Serif 4",serif}
.ifb[data-k="bad"]{--k:#d45d45}.ifb[data-k="rev"]{--k:#b8893a}.ifb[data-k="ok"]{--k:#6f8a76}
.rp{position:absolute;right:2.2%;top:2.2%;font:600 13px/1 var(--f-ui);color:#17344b;background:rgba(246,241,231,.94);border:1px solid rgba(23,52,75,.2);border-radius:999px;padding:7px 11px;cursor:pointer;pointer-events:auto}
.f-moci .steps span i{font-style:normal}
.f-moci .steps span{transition:color .25s}
.f-moci .steps span.on{color:#d45d45;text-decoration:underline 2px;text-underline-offset:7px}
.f-moci .steps span.done{color:#7a8a96}
.mo-ex-svg{width:420px;height:auto;display:block;overflow:visible;color:var(--fg)}
.pm-ov{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* ---- DriverLab: FRC match language ---- */
.f-dl{background:#24282c;background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1.3px),radial-gradient(rgba(0,0,0,.22) 1px,transparent 1.3px);background-size:5px 5px,7px 7px;background-position:0 0,2px 3px;padding-bottom:34px}
.sb{display:grid;grid-template-columns:1fr 230px 1fr;height:76px;background:#0a0c0f;border-bottom:3px solid #000;color:#fff}
.sb-side{display:flex;align-items:center;gap:10px;padding:0 22px}
.sb-side.red{background:linear-gradient(90deg,#a80f18,#e0222c)}
.sb-side.blue{background:linear-gradient(90deg,#1b57cf,#0b3a96);justify-content:flex-end}
.sb .al{font:700 15px/1.1 "Barlow Condensed",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.88);margin:0 8px}
.sb .al .zh{letter-spacing:.2em;font-family:"Noto Sans SC",sans-serif}
.sb .tn{font:800 27px/1 "Barlow Condensed",sans-serif;background:rgba(0,0,0,.3);padding:9px 12px;border-radius:4px;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.sb .tn.you{background:#fff;color:#0b3a96}
.sb-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.sb-mid .clk{font:700 42px/1 "Barlow Condensed",sans-serif;font-variant-numeric:tabular-nums}
.sb-mid .ph{font:700 12.5px/1 "Barlow Condensed",sans-serif;letter-spacing:.16em;color:#f0e14a}
.ff{position:relative;margin:30px 30px 0;border-radius:16px;padding:11px;background:linear-gradient(180deg,#d7dde2,#8f989f) top/100% 7px no-repeat,rgba(205,225,238,.11);box-shadow:inset 0 0 0 1px rgba(255,255,255,.26),0 24px 40px -22px rgba(0,0,0,.7)}
.f-dl .ff .vid{border-radius:9px;overflow:hidden;aspect-ratio:21/8.6;position:relative}
.tag36{position:absolute;width:34px;height:34px;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'><rect width='7' height='7' fill='%23000'/><rect x='2' y='1' width='1' height='1' fill='%23fff'/><rect x='3' y='1' width='1' height='1' fill='%23fff'/><rect x='5' y='1' width='1' height='1' fill='%23fff'/><rect x='1' y='2' width='1' height='1' fill='%23fff'/><rect x='4' y='2' width='1' height='1' fill='%23fff'/><rect x='1' y='3' width='1' height='1' fill='%23fff'/><rect x='2' y='3' width='1' height='1' fill='%23fff'/><rect x='5' y='3' width='1' height='1' fill='%23fff'/><rect x='3' y='4' width='1' height='1' fill='%23fff'/><rect x='4' y='4' width='1' height='1' fill='%23fff'/><rect x='5' y='4' width='1' height='1' fill='%23fff'/><rect x='1' y='5' width='1' height='1' fill='%23fff'/><rect x='3' y='5' width='1' height='1' fill='%23fff'/></svg>") center/78% no-repeat;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.45);z-index:2}
.tag36.tl{left:-6px;top:-6px}.tag36.tr{right:-6px;top:-6px}.tag36.bl{left:-6px;bottom:-6px}.tag36.br{right:-6px;bottom:-6px}
.bumper{display:inline-flex;align-items:center;height:96px;padding:0 30px;border-radius:20px;background:#c71f29;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 2px,transparent 2px 4px),repeating-linear-gradient(-45deg,rgba(0,0,0,.09) 0 2px,transparent 2px 4px);box-shadow:inset 0 3px 0 rgba(255,255,255,.2),inset 0 -7px 0 rgba(0,0,0,.28),0 10px 20px -8px rgba(0,0,0,.7)}
.bumper span{font:800 66px/1 "Barlow Condensed",sans-serif;color:#fff;text-transform:uppercase;letter-spacing:.035em;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.f-dl .body{padding:38px 48px 0}
.f-dl .kick{margin:18px 0 0}
.tlbar{display:flex;margin:30px 48px 0;height:42px;border-radius:6px;overflow:hidden;font:600 14px/1 "Barlow Condensed",sans-serif;letter-spacing:.1em;text-transform:uppercase;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.tlbar>span{display:flex;align-items:center;gap:9px;padding:0 16px;color:#dfe5ea}
.tlbar .auto{flex:20;background:#3b4249}
.tlbar .tele{flex:140;background:#2c3137;justify-content:space-between}
.tlbar b{font-weight:800;color:#f0e14a}
.tlbar .zh{font-family:"Noto Sans SC",sans-serif;letter-spacing:.06em}
.dl-hero .sb{position:absolute;left:0;right:0;bottom:0;z-index:2}


/* ---- SkillTree stage ---- */
.st-stage{position:relative;border-radius:14px;overflow:hidden;background:#e6ead9;aspect-ratio:2/3;max-width:1000px;margin:0 auto}
.st-mstage{position:relative;width:min(100%,340px);aspect-ratio:390/1250;border-radius:30px;overflow:hidden;background:#e6ead9;border:8px solid #1a1d1b;margin:0 auto}
.st-c{position:absolute;inset:0;width:100%;height:100%}
.st-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.st-lines .ld{fill:none;stroke:#5b7a4a;stroke-width:1.6;stroke-dasharray:1 2;stroke-dashoffset:1.01;transition:stroke-dashoffset .7s ease-out,stroke .2s,stroke-width .2s;vector-effect:non-scaling-stroke}
.st-lines .ld.in{stroke-dashoffset:0}
.st-lines .ld.on{stroke:#2f6b2c;stroke-width:2.6}
.st-lines .nd{fill:#fbf8ee;stroke:#3f7d34;stroke-width:2.5;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);transition:opacity .3s,transform .35s;vector-effect:non-scaling-stroke}
.st-lines .nd.in{opacity:1;transform:none}
.st-lines .nd.on{fill:#3f7d34}
.st-card2{position:absolute;display:flex;flex-direction:column;gap:5px;text-align:left;padding:12px 14px;border-radius:12px;background:rgba(251,249,240,.95);border:1px solid #b9cfa9;color:#24331f;font:14px/1.4 var(--f-ui);box-shadow:0 8px 20px -10px rgba(40,60,30,.4);opacity:0;transform:translateY(10px);transition:opacity .45s,transform .5s cubic-bezier(.2,.7,.2,1),border-color .2s,box-shadow .2s;cursor:pointer}
.st-card2.in{opacity:1;transform:none}
.st-card2.on{border-color:#3f7d34;box-shadow:0 0 0 2px #3f7d34,0 12px 26px -10px rgba(40,60,30,.5)}
.st-card2 .t{font:700 18px/1 "Spline Sans Mono",monospace;color:#1f3a1c}
.st-card2 .dsc{font-size:13px;color:#5d6d55}
.st-card2 .bar{height:6px;border-radius:3px;background:#dbe5d2;overflow:hidden;margin-top:2px}.st-card2 .bar i{display:block;height:100%;background:#4f9440;border-radius:3px}
.st-card2 .n{font:600 13px/1.3 var(--f-ui)}
.st-card2 .u{font:12.5px/1.45 "Spline Sans Mono",monospace;color:#3d5236}
.st-card2 .nx{font:12.5px/1.45 "Spline Sans Mono",monospace;color:#8a6a45}
.st-chip{position:absolute;transform:translate(-50%,-50%) scale(.6);font:600 12px/1 "Spline Sans Mono",monospace;color:#1f3a1c;background:rgba(251,249,240,.93);border:1.5px solid #4f8a40;border-radius:999px;padding:5px 9px;white-space:nowrap;opacity:0;transition:opacity .35s,transform .4s,background .2s;pointer-events:none}
.st-chip.in{opacity:1;transform:translate(-50%,-50%)}
.st-chip.nt{border-style:dashed;border-color:#8a6a45;color:#6b5236}
.st-stage.has-sel .st-chip:not(.on),.st-stage.has-sel .st-card2.in:not(.on){opacity:.45}
.st-chip.on{background:#2f6b2c;color:#fff;border-color:#2f6b2c}.st-chip.nt.on{background:#fff7e8;color:#6b5236;border-color:#8a6a45}
.st-root{position:absolute;left:50%;top:1.6%;transform:translate(-50%,-50%);font:600 13px/1.3 "Spline Sans Mono",monospace;color:#f3e9d8;letter-spacing:.08em;text-align:center;z-index:3}
.st-root span{opacity:.65;font-size:11px;letter-spacing:.02em}
.st-mstage .st-card2{padding:9px 10px;font-size:12.5px}.st-mstage .st-card2 .t{font-size:15px}.st-mstage .st-card2 .u{display:none}

/* ---- MOCI result close-ups: readable correction text ---- */
.mo-res{border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px var(--line),0 24px 50px -24px rgba(15,28,39,.45);background:var(--paper)}
.mo-res img{width:100%;display:block}
.mo-res .zoom{display:block;font:500 12px/1 var(--f-mono);color:#7a8792;padding:14px 16px 0;letter-spacing:.04em;border-top:1px solid rgba(23,52,75,.12)}
.diff{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 16px 16px;color:#17344b}
.diff>div{background:#fdfbf6;border:1px solid rgba(23,52,75,.14);border-radius:12px;padding:12px 14px}
.diff small{display:block;font:600 13px/1.3 var(--f-ui);color:#5b6b78;margin-bottom:6px}
.diff b{font:500 32px/1.15 "Source Serif 4",serif;letter-spacing:.01em;display:block;white-space:nowrap}
.diff .gap{display:inline-block;width:.42em;height:.9em;vertical-align:-.08em;border-bottom:3px solid #d45d45;margin:0 1px;position:relative}
.diff .gap::after{content:attr(data-l);position:absolute;left:50%;top:-.62em;transform:translateX(-50%);font-size:.55em;color:#d45d45;font-style:italic}
.diff .ins{color:#d45d45;text-decoration:underline 3px;text-underline-offset:5px}
.diff .bad b{color:#9c3b2c}
.diff p{grid-column:1/-1;margin:0;font:15px/1.6 var(--f-ui);color:#4a5f70}
.diff p.zh{font-size:15px;line-height:1.8}
.diff.one{grid-template-columns:1fr}
.m390 .diff>div{padding:10px 10px;min-width:0}




.fr-vp .fold{position:absolute;left:0;right:0;height:0;border-top:1.5px dashed rgba(255,90,60,.55);z-index:30;pointer-events:none}
.fr-vp .fold span{position:absolute;right:6px;top:-17px;font:600 9.5px/1 var(--f-mono);color:#fff;background:rgba(200,60,40,.8);padding:4px 6px;border-radius:4px;letter-spacing:.04em}
.phone .fr{border-radius:34px}
/* phone mockups adapt to 320-430 px */








/* ---- DriverLab field diagram ---- */
.frc2{grid-template-columns:1fr;gap:36px}
.frc2>div:first-child{display:grid;grid-template-columns:560px 1fr;gap:0 64px;align-items:start}
.frc2>div:first-child>.dl-k,.frc2>div:first-child>.dl-h2{grid-column:1}
.frc2>div:first-child>p{grid-column:2}
.frc2>div:first-child>p:first-of-type{grid-row:1/span 3;margin-top:0!important}
.field2{border-radius:16px;background:var(--bg2);border:1px solid var(--line);padding:18px}
.fimg{position:relative;border-radius:10px;overflow:hidden;background:#1b1f23}
.fimg img{display:block;width:100%;height:auto}
.fsvg{position:absolute;inset:0;width:100%;height:100%}
.fm{position:absolute;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;background:#fff;color:#111;font:800 15px/28px "Barlow Condensed",var(--f-ui);text-align:center;box-shadow:0 0 0 2px #111,0 4px 10px rgba(0,0,0,.45)}
.fm.s{position:static;transform:none;flex:none;margin-top:1px}
.fdim{position:absolute;right:12px;bottom:10px;font:600 13px/1 var(--f-mono);color:#e6eaee;background:rgba(0,0,0,.55);padding:6px 8px;border-radius:5px}
.flegend{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px 28px}
.flegend li{display:flex;gap:12px;align-items:flex-start}
.flegend b{display:block;font:700 19px/1.2 var(--f-dl);letter-spacing:.02em;color:var(--fg);margin-bottom:3px}
.flegend b .zh{font:700 16px/1.3 "Noto Sans SC",sans-serif}
.flegend li>span:last-child>span{font:400 15px/1.5 var(--f-dlb);color:var(--fg2)}
.flegend li>span:last-child>span.zh{font:400 14.5px/1.75 "Noto Sans SC",sans-serif}
.fnote{margin:16px 0 0;font:400 13.5px/1.6 var(--f-dlb);color:var(--fg3)}
.fnote .zh{font-family:"Noto Sans SC",sans-serif}






/* ---- DriverLab logo lockup ---- */
.dll{display:inline-flex;align-items:center;gap:14px;color:#f5f4f0}
.dll .dlm{width:44px;height:44px}
.dll .dlw{font:600 25px/1 "Segoe UI","Barlow",var(--f-ui);letter-spacing:.06em}
/* ---- homepage DriverLab: official-site key visual ---- */
.f-dl2{border-radius:22px;overflow:hidden;background:#0d1012;color:#f2f4f5}
.kv{position:relative;height:620px}
.kv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kv-sh{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,10,11,.92),rgba(8,10,11,.7) 38%,rgba(8,10,11,0) 70%)}
.kv-in{position:absolute;left:56px;top:56px;bottom:56px;width:600px;display:flex;flex-direction:column;justify-content:center}
.kv-in h3{font:700 66px/1 "Barlow Condensed",var(--f-ui);margin:34px 0 0;text-wrap:balance}
.kv-in h3.zh{font:800 46px/1.3 "Noto Sans SC",sans-serif}
.kv-in p{font:400 19px/1.6 "Barlow",var(--f-ui);color:#c3ccd3;margin:20px 0 0;max-width:44ch}
.kv-in p.zh{font:400 17.5px/1.85 "Noto Sans SC",sans-serif}
.kv-a{display:flex;gap:14px;margin-top:34px}
.f-dl2 .btn-p{--btn-bg:#f0e14a;--btn-fg:#121212;font-family:"Barlow",var(--f-ui);font-weight:600}
.f-dl2 .btn-s{color:#f2f4f5;border-color:rgba(255,255,255,.35);font-family:"Barlow",var(--f-ui);font-weight:600}
.kv .pz{position:absolute;right:22px;bottom:20px}
.kv-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:#0d1012}
.tile{display:block;padding:0 0 26px;background:#14181b}
.tile i{display:block;aspect-ratio:16/8;background:#0b0d0e center top/cover no-repeat}
.tile b{display:block;font:700 26px/1.1 "Barlow Condensed",var(--f-ui);margin:20px 26px 6px}
.tile b.zh{font:700 20px/1.4 "Noto Sans SC",sans-serif}
.tile span{display:block;margin:0 26px;font:400 16px/1.5 "Barlow",var(--f-ui);color:#aab4bc}
.tile span.zh{font-family:"Noto Sans SC",sans-serif}
.tile:hover i{filter:brightness(1.08)}
/* ---- film strip ---- */
.strip{position:relative;margin:0 -48px;background:#0b0b0b;padding:34px 0;overflow:hidden;
  background-image:radial-gradient(circle at 50% 50%,#262626 0 5px,transparent 5.5px),radial-gradient(circle at 50% 50%,#262626 0 5px,transparent 5.5px);
  background-size:30px 30px,30px 30px;background-repeat:repeat-x;background-position:0 6px,0 calc(100% - 6px)}
.strip::before,.strip::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.strip::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}.strip::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent)}
.strip-track{display:flex;gap:14px;width:max-content;animation:strip 60s linear infinite}
.strip:hover .strip-track,.strip:focus-within .strip-track,.strip.paused .strip-track{animation-play-state:paused}
@keyframes strip{to{transform:translateX(-50%)}}
.ff2{position:relative;width:380px;aspect-ratio:16/9;border:0;padding:0;border-radius:4px;overflow:hidden;background:#000;cursor:pointer;flex:none;outline-offset:4px}
.ff2 .cv{position:absolute;inset:0;background:center/cover;transition:transform .4s,filter .3s;filter:saturate(.9)}
.ff2:hover .cv,.ff2:focus-visible .cv{transform:scale(1.04);filter:saturate(1.1)}
.ff2 .du{position:absolute;right:8px;bottom:8px;font:600 13px/1 var(--f-mono);color:#fff;background:rgba(0,0,0,.6);padding:5px 7px;border-radius:4px}
.films-sec{position:relative}.fdlg{position:absolute;inset:-60px -48px;z-index:40;background:rgba(0,0,0,.6);display:grid;place-items:center;backdrop-filter:blur(3px)}
.fdlg[hidden]{display:none}
.fdlg-card{position:relative;width:820px;display:grid;grid-template-columns:1fr 1fr;background:var(--bg2);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.5)}
.fdlg-cv{background:#000 center/cover;min-height:300px}
.fdlg-b{padding:28px 30px 30px}
.fdlg-b h4{font:760 30px/1.1 var(--f-ui);font-stretch:80%;margin:0 0 8px;padding-right:30px}
.fdlg-m{font:500 13.5px/1 var(--f-mono);color:var(--fg3);margin:0 0 16px}
.fdlg-b ul{margin:0 0 22px;padding-left:18px;color:var(--fg2);font-size:16px;line-height:1.6}
.fdlg-b li{margin:4px 0}
.fdlg-x{position:absolute;right:12px;top:10px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--fg);font-size:22px;line-height:1;z-index:2}
/* ---- rules page ---- */
.ru{padding:72px 48px 96px}
.ru-h{display:flex;flex-direction:column;gap:22px;margin-bottom:48px}
.ru-h .dll{color:var(--fg)}
.ru-h h1{font:700 72px/1 var(--f-dl);margin:0}.ru-h h1.zh{font:800 56px/1.2 "Noto Sans SC",sans-serif}
.ru-g{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ru-c{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:28px 30px}
.ru-c h2{font:700 34px/1 var(--f-dl);margin:0 0 20px}.ru-c h2.zh{font:800 26px/1.3 "Noto Sans SC",sans-serif}
.ru-c h2 small{font:500 13px/1 var(--f-mono);color:var(--fg3);vertical-align:middle;margin-left:8px}
.ru-c dl{display:grid;grid-template-columns:110px 1fr;gap:12px 16px;margin:0}
.ru-c dt{font:700 15px/1.4 var(--f-dl);letter-spacing:.04em;text-transform:uppercase;color:var(--fg)}
.ru-c dt.zh{font:700 15px/1.6 "Noto Sans SC",sans-serif;text-transform:none}
.ru-c dd{margin:0;font:400 16px/1.5 var(--f-dlb);color:var(--fg2)}.ru-c dd.zh{font-family:"Noto Sans SC",sans-serif;line-height:1.7}
.keys2{grid-template-columns:120px 1fr!important}
.keys2 kbd{font:600 13px/1 var(--f-mono);border:1px solid var(--line);border-bottom-width:3px;border-radius:6px;padding:6px 8px;background:var(--bg);color:var(--fg);margin-right:4px}
.ru-n{margin:20px 0 0;font:400 14.5px/1.6 var(--f-dlb);color:var(--fg3)}
.rl{margin:28px 0 0}
/* ---- MOCI: humanist Song for Chinese ---- */
.mk-moci,.f-moci{--zh-song:"HX Song","Noto Serif SC","Songti SC",STSong,serif;--zh-body:"Noto Serif SC","Songti SC",STSong,serif}
.mo-h1.zh,.mo-h2.zh,.f-moci h3.zh,.mo-shot h4.zh,.ledger h4.zh,.nb .q,.mo-rail li b .zh,.diff small .zh,.pm-q b{font-family:var(--zh-song)!important;font-weight:400!important}
.mo-h1.zh{font-size:58px!important;letter-spacing:.01em!important;line-height:1.3!important}
.mo-h2.zh{font-size:44px!important;letter-spacing:.01em!important}
.f-moci h3.zh{font-size:42px!important;letter-spacing:.01em}
.mk-moci p.zh,.mk-moci li.zh,.mk-moci .zh.mo-p,.f-moci p.zh,.mo-lede.zh,.mo-stat.zh,.mk-moci .mo-rail li span.zh,.diff p.zh{font-family:var(--zh-body)!important}
.mo-m .mo-h1.zh{font-size:40px!important}
/* ---- field markers 6 and 7 on phones ---- */



/* ---- mobile homepage DriverLab tiles not used; reduced motion ---- */
@media (prefers-reduced-motion:reduce){.strip-track{animation:none!important}}

/* ---- code-line portrait in the hero ---- */
.pt{position:absolute;pointer-events:none}
html[data-theme="dark"] .mk .pt{--pt-ink:#9cff57;--pt-line:rgba(233,238,233,.24);--pt-hi:#eaffd8}
html[data-theme="light"] .mk .pt{--pt-ink:#2f7d1e;--pt-line:rgba(10,15,12,.28);--pt-hi:#0a0f0c}
.h-hero .pt{left:336px;top:54px;width:296px;height:360px}
.mh .pt{right:0;top:4px;width:50%;height:200px}
.ptbig{max-width:560px;aspect-ratio:322/384;margin:18px auto 0;background:var(--d-bg2);border:1px solid var(--d-line);border-radius:14px;padding:16px}
/* reduced motion (real preference or the toggle) */
@media (prefers-reduced-motion:reduce){.mk *,.pm-paper *{animation:none!important;transition:none!important}.ipad .ink{clip-path:none}.ipad .tick path{stroke-dashoffset:0}}

/* ---------- homepage hero: introduction + portrait, nothing else ---------- */
.mk-home .h-hero{height:auto;min-height:780px;grid-template-columns:minmax(0,600px) minmax(0,1fr);gap:48px;align-items:center;padding:48px 48px 72px}
.mk-home .h-left{padding-top:0}
.h-pt{position:relative;width:100%;max-width:560px;height:640px;justify-self:center}
.mk-home .h-pt .pt{position:absolute;left:0;top:0;width:100%;height:100%;transform:none}

/* ---------- Harry Xin logo assembly (decorative, first homepage visit per session) ---------- */
html.hx-logo .tb-brand img{visibility:hidden;animation:hxLogoShow 0s 5s forwards}
/* once the assembly actually starts, the safety net restarts from that moment */
html.hx-logo.hx-logo-run .tb-brand img{animation:hxLogoShow2 0s 2.4s forwards}
@keyframes hxLogoShow{to{visibility:visible}}
@keyframes hxLogoShow2{to{visibility:visible}}
.hx-asm{position:absolute;z-index:80;pointer-events:none;transform-origin:0 0;will-change:transform}
.hx-asm svg{display:block;width:100%;height:100%;overflow:visible}

/* ---------- Selected projects: three perspective cards ---------- */
.sp{position:relative;display:flex;justify-content:center;gap:40px;padding:36px 0 8px;perspective:1700px;perspective-origin:50% 42%;transform-style:preserve-3d}
.spc{position:relative;flex:0 0 340px;height:440px;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:#f3f5f1;isolation:isolate;
  transform-style:preserve-3d;backface-visibility:hidden;
  box-shadow:0 34px 60px -32px rgba(0,0,0,.6),0 14px 26px -18px rgba(0,0,0,.45);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.sp>.spc:nth-child(1){transform:rotateY(9deg) translateZ(-24px)}
.sp>.spc:nth-child(2){transform:translateZ(18px)}
.sp>.spc:nth-child(3){transform:rotateY(-9deg) translateZ(-24px)}
.sp>.spc:hover{box-shadow:0 44px 70px -30px rgba(0,0,0,.66),0 16px 30px -18px rgba(0,0,0,.5)}
.sp>.spc:nth-child(1):hover{transform:rotateY(6deg) translateZ(0) translateY(-4px)}
.sp>.spc:nth-child(2):hover{transform:translateZ(34px) translateY(-4px)}
.sp>.spc:nth-child(3):hover{transform:rotateY(-6deg) translateZ(0) translateY(-4px)}
.spc:focus-visible{outline:2px solid var(--sigtx,#9cff57);outline-offset:4px}
.spc-art{position:relative;flex:1;display:grid;place-items:center;overflow:hidden}
.spc-cap{position:relative;display:grid;grid-template-columns:1fr auto;align-items:end;gap:4px 14px;padding:18px 22px 20px;border-top:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.2)}
.spc-cap b{font:700 22px/1.15 var(--f-ui);letter-spacing:-.005em}
.spc-cap small{grid-column:1;font:400 14.5px/1.45 var(--f-ui);color:rgba(243,245,241,.74)}
.spc-cap small.zh{font-family:"Noto Sans SC",var(--f-ui)}
.spc-go{grid-column:2;grid-row:1/span 2;align-self:center;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.26)}
.spc-go .ic{width:16px;height:16px}
.spc-dim{position:absolute;inset:0;background:#05070a;opacity:var(--dim,0);pointer-events:none;transition:opacity .5s}
.spc-edge{position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);
  background:linear-gradient(118deg,rgba(255,255,255,var(--lit,.05)) 0%,rgba(255,255,255,0) 38%)}
/* DriverLab */
.spc-dl{background:radial-gradient(120% 85% at 50% 0%,#2b3137 0%,#15191c 62%,#0e1113 100%)}
.spc-bars{position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,#d5293b 0 50%,#2f6fe0 50% 100%)}
.spc-field{position:absolute;inset:22px 22px 0;border:1px solid rgba(255,255,255,.07);border-bottom:0;border-radius:10px 10px 0 0;
  background:linear-gradient(90deg,transparent calc(50% - .5px),rgba(255,255,255,.08) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px))}
.spc-dl .dll{position:relative;flex-direction:column;gap:18px;color:#f5f4f0}
.spc-dl .dll .dlm{width:96px;height:96px}
.spc-dl .dll .dlw{font-size:27px;letter-spacing:.1em}
/* MOCI */
.spc-mo{background:#17344b}
.spc-mo .spc-art{grid-template-rows:auto auto;align-content:center;gap:20px}
.spc-lines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 35px,rgba(248,244,233,.05) 35px 36px)}
.spc-paper{position:relative;width:116px;height:116px;border-radius:6px;background:#f8f4e9;display:grid;place-items:center;box-shadow:5px 6px 0 rgba(0,0,0,.18);justify-self:center}
.spc-paper img{width:86px;height:86px;display:block}
.spc-mw{position:relative;text-align:center;justify-self:center}
.spc-mw b{display:block;font:600 30px/1 "Noto Serif SC","Source Serif 4",serif;letter-spacing:.06em;color:#f8f4e9}
.spc-mw small{display:block;margin-top:12px;font:600 12.5px/1 var(--f-ui);letter-spacing:.24em;color:#e8907e}
/* SkillTree */
.spc-st{background:radial-gradient(110% 80% at 50% 0%,#28224a 0%,#15122a 60%,#0e0c1c 100%)}
.spc-st .spc-art{grid-template-rows:1fr auto}
.spc-branch{position:absolute;left:50%;top:0;width:200px;height:240px;transform:translateX(-50%);color:rgba(157,140,255,.34)}
.spc-st .w-skill{position:relative;align-self:end;margin-bottom:34px;font-size:50px;color:#f2f0fb}
.sp-foot{display:flex;justify-content:center;margin-top:22px;min-height:40px}
.sp-replay{appearance:none;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--fg2);font:560 14.5px/1 var(--f-ui);cursor:pointer}
.sp-replay:hover{color:var(--fg);border-color:var(--fg3)}
.sp-replay[hidden]{display:none}
.sp-replay .ic{width:16px;height:16px}
/* before the sequence starts the cards wait in depth; a CSS fallback reveals them if the script never runs it */
.sp.sp-armed>.spc{opacity:0;transform:translateZ(-700px);animation:spFallback .4s 6s forwards}
@keyframes spFallback{to{opacity:1;transform:none}}
.sp.sp-run>.spc:hover{box-shadow:0 34px 60px -32px rgba(0,0,0,.6),0 14px 26px -18px rgba(0,0,0,.45)}
.films-sec .h-allf{grid-column:2;justify-self:start;margin-top:16px}

/* ---------- project-page entrance card (decorative, appended to body) ---------- */
.pe-card{position:absolute;z-index:70;pointer-events:none;width:340px;height:440px;transform-origin:50% 50%;will-change:transform,opacity}
.pe-card>.spc{width:340px;height:440px;flex:none;transform:none!important}
.pe-hide{opacity:0;animation:peFallback 0s 2.2s forwards}
@keyframes peFallback{to{opacity:1}}

/* ---------- Films page ---------- */
.mk-films main{padding-bottom:40px}
.fm-hero{padding:88px 48px 56px;border-bottom:1px solid var(--line)}
.fm-k{font:600 13px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg3);margin:0}
.fm-h1{font:820 154px/.86 var(--f-ui);font-stretch:64%;letter-spacing:-.025em;margin:22px 0 0}
.fm-h1 .zh{font:700 120px/1 "Noto Sans SC",sans-serif;letter-spacing:.04em}
.fm-lede{font-size:22px;line-height:1.55;color:var(--fg2);max-width:34ch;margin:28px 0 0}
.fm-lede.zh{font-size:20px;line-height:1.8}
.fm-ch{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.fm-list{padding:24px 48px 0}
.fm-it{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:48px;align-items:center;padding:56px 0;border-bottom:1px solid var(--line);position:relative}
.fm-it::before{content:"";position:absolute;left:0;right:0;top:-1px;height:6px;background:radial-gradient(circle,var(--line) 1.6px,transparent 2px) 0 50%/16px 6px repeat-x;opacity:.9}
.fm-it:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.55fr)}
.fm-it:nth-child(even) .fm-still{order:2}
.fm-still{position:relative;display:block;border-radius:6px;overflow:hidden;background:#000;aspect-ratio:16/9;box-shadow:0 30px 60px -36px rgba(0,0,0,.6)}
.fm-still img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.fm-still:hover img{transform:scale(1.025)}
.fm-still:focus-visible{outline:2px solid var(--sigtx);outline-offset:4px}
.fm-play{position:absolute;left:18px;bottom:18px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(10,13,11,.72);color:#fff;border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(6px)}
.fm-play .ic{width:18px;height:18px;margin-left:2px}
.fm-dur{position:absolute;right:14px;bottom:14px;font:600 13px/1 var(--f-mono);color:#fff;background:rgba(0,0,0,.66);padding:6px 8px;border-radius:4px}
.fm-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:0;font:500 13.5px/1.4 var(--f-mono);color:var(--fg3);letter-spacing:.02em}
.fm-n{font:600 15px/1 var(--f-mono);color:var(--sigtx)}
.fm-txt h2{font:520 40px/1.12 "Source Serif 4",serif;letter-spacing:-.015em;margin:16px 0 0;color:var(--fg)}
.fm-txt h2.zh{font:600 32px/1.35 "Noto Serif SC",serif;letter-spacing:.02em}
.fm-txt ul{margin:18px 0 0;padding:0;list-style:none}
.fm-txt li{position:relative;padding-left:20px;margin-top:8px;font-size:17px;line-height:1.6;color:var(--fg2)}
.fm-txt li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:1.5px;background:var(--fg3)}
.fm-role{margin:18px 0 0;font-size:16px;line-height:1.6;color:var(--fg);max-width:none}
.fm-role .k{display:inline-block;margin-right:10px;font:600 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg3)}
.fm-watch{margin-top:26px}
.fm-more{padding:72px 48px 24px}
.fm-more h2{font:800 52px/1 var(--f-ui);font-stretch:70%;margin:0}
.fm-more p{color:var(--fg2);font-size:18px;margin:16px 0 0}
@media (prefers-reduced-motion:reduce){
  .sp.sp-armed>.spc{opacity:1;transform:none;animation:none}
  .spc,.spc-dim,.fm-still img{transition:none}
  html.hx-logo .tb-brand img,html.hx-logo.hx-logo-run .tb-brand img{visibility:visible;animation:none}
  .pe-hide{opacity:1;animation:none}
}
.spc.spc-dl .dll{color:#f5f4f0}
.spc.spc-st .w-skill{color:#f2f0fb}
.pe-card .ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Club Fair cover: crop off the top band that names the school */
.fm-crop .fm-still img{transform:scale(1.3);transform-origin:50% 100%}
.fm-crop .fm-still:hover img{transform:scale(1.33)}
.cv[style*="BV16CaRzWEHG"],[data-fcv][style*="BV16CaRzWEHG"]{background-size:130% auto!important;background-position:50% 100%!important}
/* while cards travel behind the section plane, let taps reach them rather than the container */
.sp.sp-run{pointer-events:none}
.sp.sp-run>.spc{pointer-events:auto}
/* cards keep their own light-on-dark text in both site themes (beats .mk a{color:inherit}) */
.mk .spc,.pe-card .spc{color:#f3f5f1}

/* ================= refinement round 2 ================= */
/* page gutters: more room on the left, growing with wide screens (design units; zoom handles 900-1439) */
.mk-home,.mk-films{--gx:80px}
@media (min-width:1440px){.mk-home,.mk-films{--gx:clamp(80px,calc(80px + (100vw - 1440px) * .25),200px)}}
.mk-home .tb,.mk-films .tb{padding-left:var(--gx);padding-right:var(--gx)}
.mk-home .h-hero{padding-left:var(--gx);padding-right:var(--gx)}
.mk-home .h-sec{padding-left:var(--gx);padding-right:var(--gx)}
.mk-home .ft,.mk-films .ft{padding-left:var(--gx);padding-right:var(--gx)}
.mk-films .fm-hero,.mk-films .fm-list,.mk-films .fm-more{padding-left:var(--gx);padding-right:var(--gx)}
.mk-home .films-sec .strip{margin-left:calc(-1 * var(--gx));margin-right:calc(-1 * var(--gx))}

/* hero entrance: name line by line, then introduction, links and portrait (CSS only; never hidden without the animation) */
.mk-home .h-name .ln{display:block;overflow:hidden;padding:.06em 0 .12em;margin:-.06em 0 -.12em}
.mk-home .h-name .ln>span{display:block}
@keyframes hxLine{from{transform:translateY(135%)}to{transform:none}}
@keyframes hxRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes hxFade{from{opacity:0}to{opacity:1}}
html.hx-in .mk-home .h-name .ln>span{animation:hxLine .95s cubic-bezier(.2,.8,.2,1) .05s both}
html.hx-in .mk-home .h-name .ln+.ln>span{animation-delay:.17s}
html.hx-in .mk-home .h-left>.h-intro{animation:hxRise .8s cubic-bezier(.2,.8,.2,1) .32s both}
html.hx-in .mk-home .h-left>.h-acts{animation:hxRise .8s cubic-bezier(.2,.8,.2,1) .44s both}
html.hx-in .mk-home .h-left>.h-soc{animation:hxRise .8s cubic-bezier(.2,.8,.2,1) .54s both}
html.hx-in .mk-home .h-pt{animation:hxFade 1.4s ease .15s both}
/* first homepage visit of a session: the logo assembles above the name first (desktop) */
@media (min-width:900px){
  html.hx-in.hx-logo .mk-home .h-name .ln>span{animation-delay:.62s}
  html.hx-in.hx-logo .mk-home .h-name .ln+.ln>span{animation-delay:.74s}
  html.hx-in.hx-logo .mk-home .h-left>.h-intro{animation-delay:.9s}
  html.hx-in.hx-logo .mk-home .h-left>.h-acts{animation-delay:1s}
  html.hx-in.hx-logo .mk-home .h-left>.h-soc{animation-delay:1.08s}
}
/* phones: the logo assembles in the top bar; the brand name follows it */
html.hx-logo .tb-brand span{opacity:0;animation:hxShowTxt 0s 5s forwards}
html.hx-logo.hx-logo-run .tb-brand span{animation:hxShowTxt2 0s 2.6s forwards}
@keyframes hxShowTxt{to{opacity:1}}
@keyframes hxShowTxt2{to{opacity:1}}

/* section reveals (added by script only when it can also reveal them) */
html.hx-rv [data-rv]{transition:opacity .75s cubic-bezier(.2,.8,.2,1),transform .85s cubic-bezier(.2,.8,.2,1);transition-delay:var(--rd,0s)}
html.hx-rv [data-rv]:not(.in){opacity:0;transform:translateY(22px)}
[data-rv-line] .ln{display:block;overflow:hidden;padding:.06em 0 .12em;margin:-.06em 0 -.12em}
[data-rv-line] .ln>span{display:block}
html.hx-rv [data-rv-line] .ln>span{transition:transform .95s cubic-bezier(.2,.8,.2,1)}
html.hx-rv [data-rv-line] .ln+.ln>span{transition-delay:.1s}
html.hx-rv [data-rv-line]:not(.in) .ln>span{transform:translateY(135%)}
html.hx-rv [data-rv-mask]{transition:clip-path 1.15s cubic-bezier(.65,0,.35,1)}
html.hx-rv [data-rv-mask]:not(.in){clip-path:inset(0 0 100% 0)}
html.hx-rv .fm-it [data-rv-mask]:not(.in){clip-path:inset(0 100% 0 0)}
html.hx-rv .fm-it:nth-child(even) [data-rv-mask]:not(.in){clip-path:inset(0 0 0 100%)}
/* only images are masked, so links and controls are never clipped (clipped areas cannot be clicked) */

/* All films: a dedicated call to action under the strip */
.fcta{display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px 48px;margin:40px 0 0;padding:34px 40px;border-radius:20px;
  background:var(--fg);color:var(--bg);text-decoration:none;position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.mk a.fcta{color:var(--bg)}
.fcta::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:radial-gradient(circle,color-mix(in srgb,var(--bg) 55%,transparent) 2px,transparent 2.5px) 0 50%/18px 8px repeat-x;opacity:.5}
.fcta-k{display:block;font:600 13px/1 var(--f-mono);letter-spacing:.16em;opacity:.62}
.fcta-t{display:block;margin-top:12px;font:800 54px/.95 var(--f-ui);font-stretch:66%;letter-spacing:-.01em}
.fcta-t.zh{font:800 42px/1.15 "Noto Sans SC",var(--f-ui);letter-spacing:.02em}
.fcta-d{display:block;margin-top:12px;font-size:17px;line-height:1.5;opacity:.72;max-width:52ch}
.fcta-d.zh{font-family:"Noto Sans SC",var(--f-ui)}
.fcta-b{display:inline-flex;align-items:center;gap:12px;height:64px;padding:0 30px;border-radius:999px;background:var(--sig,#9cff57);color:#07100a;font:700 19px/1 var(--f-ui);white-space:nowrap;transition:gap .25s,padding .25s}
.fcta-b.zh,.fcta-b .zh{font-family:"Noto Sans SC",var(--f-ui)}
.fcta-b .ic{width:22px;height:22px;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.fcta:hover{transform:translateY(-3px);box-shadow:0 26px 50px -28px rgba(0,0,0,.55)}
.fcta:hover .fcta-b .ic{transform:translateX(5px)}
.fcta:focus-visible{outline:3px solid var(--sigtx,#9cff57);outline-offset:5px}
html[data-theme="light"] .fcta-b{background:#9cff57;color:#07100a}

/* About: affiliation marks, subordinate to the facts they label */
.ab .facts .fact-l{position:relative}
.fact-logo{display:block;height:34px;margin-bottom:12px}
.fact-logo img{height:100%;width:auto;display:block}
.fl-ib{height:30px;margin-top:2px;margin-bottom:14px}
.mk .fact-logo img.dk{display:var(--show-dk,block)}
.mk .fact-logo img.lt{display:var(--show-lt,none)}

@media (prefers-reduced-motion:reduce){
  html.hx-in .mk-home .h-name .ln>span,html.hx-in .mk-home .h-left>*,html.hx-in .mk-home .h-pt{animation:none!important}
  html.hx-logo .tb-brand span{opacity:1;animation:none}
  .fcta,.fcta-b .ic{transition:none}
}

/* ================= round 3 ================= */
/* ---- opening: the logo engages, releases, and the cover parts along the green diagonal ---- */
html.hx-intro body::after{content:"";position:fixed;inset:0;z-index:94;background:#0a0d0b;animation:hxiCover .25s 2.6s forwards}
html[data-theme="light"].hx-intro body::after{background:#f3f5ef}
html.hx-intro-on body::after{display:none}
@keyframes hxiCover{to{opacity:0;visibility:hidden}}
html.hx-intro .tb-brand img{visibility:hidden}
.hxi{position:fixed;inset:0;z-index:95;animation:hxiFail .3s 3.5s forwards}
@keyframes hxiFail{to{opacity:0;visibility:hidden;pointer-events:none}}
.hxi-a,.hxi-b{position:absolute;inset:0;background:#0a0d0b;will-change:transform}
html[data-theme="light"] .hxi-a,html[data-theme="light"] .hxi-b{background:#f3f5ef}
.hxi-logo{position:absolute;left:50%;top:50%;width:112px;height:112px;margin:-56px 0 0 -56px;transform-origin:0 0;z-index:2;will-change:transform}
.hxi-logo svg{display:block;width:100%;height:100%;overflow:visible}
.hxi-skip{position:absolute;right:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:3;height:40px;padding:0 18px;border-radius:999px;border:1px solid rgba(233,238,233,.24);background:transparent;color:rgba(233,238,233,.78);font:560 14px/1 var(--f-ui);cursor:pointer;transition:background-color .2s,color .2s,transform .2s}
html[data-theme="light"] .hxi-skip{border-color:rgba(10,15,12,.22);color:rgba(10,15,12,.72)}
.hxi-skip:hover{background:rgba(233,238,233,.08);color:#fff}
html[data-theme="light"] .hxi-skip:hover{background:rgba(10,15,12,.06);color:#0a0f0c}
.hxi-skip:active{transform:scale(.96);transition-duration:.08s}
.hxi-skip:focus-visible{outline:2px solid #9cff57;outline-offset:3px}
@media (max-width:899px){.hxi-logo{width:88px;height:88px;margin:-44px 0 0 -44px}.hxi-skip{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}}
/* the hero follows the opening */
html.hx-in .mk-home .h-pt{animation:hxRise 1.2s cubic-bezier(.2,.8,.2,1) .2s both}
html.hx-in.hx-intro .mk-home .h-name .ln>span{animation-delay:1.25s}
html.hx-in.hx-intro .mk-home .h-name .ln+.ln>span{animation-delay:1.37s}
html.hx-in.hx-intro .mk-home .h-left>.h-intro{animation-delay:1.5s}
html.hx-in.hx-intro .mk-home .h-left>.h-acts{animation-delay:1.6s}
html.hx-in.hx-intro .mk-home .h-left>.h-soc{animation-delay:1.68s}
html.hx-in.hx-intro .mk-home .h-pt{animation-delay:1.3s}

/* ---- portrait: a tonal screen print traced from the reference photo (inline SVG, follows the theme) ---- */
.h-pt .hx-pt{position:absolute;inset:0;width:100%;height:100%;display:block}
.hx-pt .pt-paper{fill:#fbfcf8}
.hx-pt .pt-mid{fill:#3f8f2a;fill-opacity:.42}
.hx-pt .pt-ink,.hx-pt .pt-hair,.hx-pt .pt-line{fill:#141815}
.hx-pt .pt-jacket{fill:#2a322c}
html[data-theme="dark"] .hx-pt .pt-paper{fill:#dfe6dc}
html[data-theme="dark"] .hx-pt .pt-mid{fill-opacity:.55}
html[data-theme="dark"] .hx-pt .pt-ink{fill:#0a0d0b}
html[data-theme="dark"] .hx-pt .pt-hair{fill:#2c3a30}
html[data-theme="dark"] .hx-pt .pt-jacket{fill:#1c2520}
html[data-theme="dark"] .hx-pt .pt-line{fill:#dfe6dc}

/* ---- showcase: four cards; the container never takes pointer input, so every card is always clickable ---- */
.sp{pointer-events:none;gap:28px}
.sp>.spc{pointer-events:auto}
.spc{flex:0 0 288px;height:420px}
.sp>.spc{--rest:none;--lift:0px;--press:1;transform:var(--rest) translateY(var(--lift)) scale(var(--press));
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .3s,filter .2s}
.sp>.spc:nth-child(1){--rest:rotateY(7deg)}
.sp>.spc:nth-child(2){--rest:rotateY(2.5deg)}
.sp>.spc:nth-child(3){--rest:rotateY(-2.5deg)}
.sp>.spc:nth-child(4){--rest:rotateY(-7deg)}
.sp>.spc:nth-child(n):hover{transform:var(--rest) translateY(var(--lift)) scale(var(--press))}
@media (hover:hover){.sp>.spc:hover{--lift:-6px;--lit:.12;box-shadow:0 44px 70px -30px rgba(0,0,0,.66),0 16px 30px -18px rgba(0,0,0,.5)}}
.sp>.spc:active{--press:.975;filter:brightness(.94);transition-duration:.08s}
/* FindItem: its own near-black and cyan, its Find/Item wordmark and the lit drawer from its site */
.spc-fi{background:radial-gradient(120% 90% at 50% 0%,#14202a 0%,#0c1117 58%,#0a0c0f 100%)}
.spc-fi .spc-art{grid-template-rows:1fr auto;justify-items:center;padding-top:28px}
.fi-grid{width:66%;max-width:200px;overflow:visible;align-self:center}
.fi-bin polygon{fill:rgba(97,196,227,.04);stroke:rgba(97,196,227,.36);stroke-width:.7;stroke-linejoin:round}
.fi-bin circle{fill:rgba(97,196,227,.32)}
.fi-lit polygon{fill:rgba(97,196,227,.24);stroke:#61c4e3;stroke-width:.9;stroke-linejoin:round}
.fi-lit circle{fill:#d6f6ff}
.fi-lit{filter:drop-shadow(0 0 7px rgba(97,196,227,.7))}
.fi-word{position:relative;margin-bottom:30px;font:700 30px/1 var(--f-ui);letter-spacing:-.01em;color:#f5f7fa;white-space:nowrap}
.fi-word b{font-weight:700;color:#61c4e3}
.fi-cn{margin-left:10px;font:700 24px/1 "Noto Sans SC",var(--f-ui);color:#f5f7fa}
.fi-cn b{color:#61c4e3}
.spc-fi .spc-go{border-color:rgba(97,196,227,.4);color:#61c4e3}

/* ---- interaction system: hover on pointers, immediate press, visible focus, color-only under reduced motion ---- */
.mk a,.mk button,.hxi-skip{-webkit-tap-highlight-color:transparent}
.mk button:not(:disabled){cursor:pointer}
.mk button:disabled,.mk [aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.mk .btn{transition:transform .22s cubic-bezier(.2,.8,.2,1),background-color .2s,border-color .2s,box-shadow .25s,color .2s,filter .2s}
.mk .btn:hover{transform:none}
.mk .tb-ico,.mk .tb-proj,.mk .tb-step a,.mk .tb-lang button,.mk .sp-replay,.mk .pz,.mk .sh-x,.mk .chiprow button,.mk .tab,.mk .flm-c,.mk .bnav a,.mk .tb-set{transition:background-color .18s,color .18s,border-color .18s,transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.mk .tb-links a,.mk .btn-t,.mk .ft a,.mk .h-soc a,.mk .ab .facts a,.mk .mp a,.mk .pp a,.mk .sheet a{transition:color .18s,opacity .18s,background-color .18s,border-color .18s,transform .22s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){
  .mk .btn-p:hover{filter:brightness(1.07);box-shadow:0 12px 26px -16px rgba(0,0,0,.6)}
  .mk .btn-s:hover{background:color-mix(in srgb,var(--fg) 7%,transparent);border-color:color-mix(in srgb,var(--fg) 32%,transparent)}
  .mk .tb-ico:hover,.mk .tb-proj:hover,.mk .tb-step a:hover,.mk .sp-replay:hover,.mk .pz:hover,.mk .tb-set:hover{background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--fg)}
  .mk .tb-lang button:not(.on):hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 6%,transparent)}
  .mk .tb-links a:hover,.mk .bnav a:hover{color:var(--fg)}
  .mk .btn-t:hover{color:var(--fg);border-color:var(--fg2)}
  .mk .ft a:hover,.mk .ab .facts a:hover,.mk .h-soc a:hover{color:var(--sigtx)}
  .mk .flm-c:hover,.mk .chiprow button:not([aria-selected="true"]):hover{border-color:var(--fg3)}
  .mk .sheet a:hover{background:var(--bg3)}
  .ff2:hover{box-shadow:0 0 0 2px rgba(255,255,255,.35)}
}
.mk .btn:active,.mk .tb-ico:active,.mk .tb-proj:active,.mk .tb-step a:active,.mk .tb-lang button:active,.mk .sp-replay:active,.mk .pz:active,.mk .sh-x:active,
.mk .chiprow button:active,.mk .tab:active,.mk .flm-c:active,.mk .bnav a:active,.mk .tb-set:active{transform:scale(.96);transition-duration:.08s}
.mk .btn-p:active{filter:brightness(.92)}
.mk .btn-s:active,.mk .tb-ico:active,.mk .tb-proj:active,.mk .tb-step a:active,.mk .sp-replay:active,.mk .pz:active,.mk .tb-set:active,.mk .tb-lang button:active{background:color-mix(in srgb,var(--fg) 14%,transparent)}
.mk .tb-links a:active,.mk .btn-t:active,.mk .ft a:active,.mk .h-soc a:active,.mk .ab .facts a:active{opacity:.55;transition-duration:.06s}
.mk .mp a:active,.mk .pp a:active,.mk .sheet a:active{background:var(--bg3);transform:scale(.995);transition-duration:.08s}
.ff2{transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.ff2:active{transform:scale(.97);transition-duration:.08s}
.mk .tile{transition:filter .2s,transform .22s cubic-bezier(.2,.8,.2,1)}
.mk .tile:active{filter:brightness(.9);transform:scale(.99);transition-duration:.08s}
.fm-still{transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.fm-still:active{transform:scale(.99);transition-duration:.08s}
.fcta:active{transform:translateY(-1px) scale(.99);transition-duration:.08s}
.fcta:active .fcta-b{filter:brightness(.92)}
.mk .pp a:focus-visible,.mk .mp a:focus-visible,.mk .sheet a:focus-visible{outline-offset:-2px}
@media (prefers-reduced-motion:reduce){
  .mk *:active,.ff2:active,.fcta:active,.hxi-skip:active{transform:none!important}
  .sp>.spc{--lift:0px!important;--press:1!important}
}

/* ---- More projects as tiles: a different rhythm from the heading-left sections around it ---- */
.mk .mp.mp-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;border-top:0}
.mk .mp-tiles a{display:flex;flex-direction:column;gap:0;padding:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg2);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .3s}
.mk .mp-tiles .pv{position:static;order:-1;width:100%;height:auto;aspect-ratio:16/10;margin:0;opacity:1;transform:none;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;transition:filter .3s}
.mk .mp-tiles a>[class^="w-"]{display:inline-block;zoom:.6;margin:22px 0 0 30px;align-self:flex-start;white-space:nowrap}
.mk .mp-tiles .d{font-size:15px;line-height:1.5;padding:10px 18px 0;flex:1}
.mk .mp-tiles .go{justify-self:auto;align-self:flex-start;margin:16px 18px 18px;font-size:14px}
@media (hover:hover){.mk .mp-tiles a:hover{background:var(--bg2);transform:translateY(-4px);border-color:var(--fg3);box-shadow:0 24px 40px -26px rgba(0,0,0,.55)}.mk .mp-tiles a:hover .pv{filter:brightness(1.08)}}
.mk .mp-tiles a:active{transform:scale(.98);transition-duration:.08s}
@media (prefers-reduced-motion:reduce){.mk .mp-tiles a,.mk .mp-tiles a:hover,.mk .mp-tiles a:active{transform:none}}

/* ---- SkillTree header: the real `skilltree next` output beside the headline ---- */
.mk-st .st-hero{grid-template-columns:minmax(0,560px) minmax(0,1fr);align-items:center;gap:56px}
.mk-st .st-hero .st-lede{margin-top:26px}
.st-shot{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#11131a;box-shadow:0 40px 80px -40px rgba(0,0,0,.7),0 12px 30px -18px rgba(0,0,0,.5);transform:perspective(1600px) rotateY(-5deg);transform-origin:left center}
.st-shot img{display:block;width:100%;height:auto}
@media (prefers-reduced-motion:reduce){.st-shot{transform:none}}
/* MOCI on the homepage uses the same single Chinese serif as the MOCI page (Noto Serif SC), so ZCOOL is no longer loaded here */
.f-moci{--zh-song:"Noto Serif SC","Source Serif 4","Songti SC",STSong,serif}
/* ---- MOCI film: the portfolio video's code-drawn animation, with a chapter bar ---- */
.mv{margin:0;width:100%;--mv-on:var(--fg);--mv-dim:var(--fg3);--mv-track:color-mix(in srgb,var(--fg) 14%,transparent)}
.f-moci .mv{--mv-on:#17344b;--mv-dim:#7a8a96;--mv-track:rgba(23,52,75,.14)}
.mv-frame{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/9;background:#e9e2d0;box-shadow:0 30px 60px -26px rgba(23,52,75,.45),0 0 0 1px rgba(23,52,75,.12)}
.mv-frame video{display:block;width:100%;height:100%;object-fit:cover}
.mv-ill{position:absolute;left:12px;bottom:12px;font:500 11.5px/1 var(--f-mono);color:#5b6b78;background:rgba(246,241,231,.92);padding:6px 8px;border-radius:5px;border:1px solid rgba(23,52,75,.15);pointer-events:none}
.mv .pz{position:absolute;right:12px;top:12px;height:34px;background:rgba(23,52,75,.78);border-color:rgba(255,255,255,.18)}
.mv-ch{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.mv-ch button{appearance:none;background:none;border:0;padding:0 0 4px;min-height:44px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;text-align:left;cursor:pointer;color:var(--mv-dim);font:600 15px/1.2 "Source Serif 4","Noto Serif SC",serif;transition:color .2s;-webkit-tap-highlight-color:transparent}
.mv-ch .mv-bar{order:-1;flex:0 0 100%;height:3px;border-radius:3px;background:var(--mv-track);position:relative;overflow:hidden;margin-bottom:8px}
.mv-ch .mv-bar::after{content:"";position:absolute;inset:0;background:#d45d45;transform-origin:left;transform:scaleX(var(--p,0))}
.mv-ch .mv-n{font:500 11.5px/1 var(--f-mono);letter-spacing:.04em}
.mv-ch button.on{color:var(--mv-on)}
@media (hover:hover){.mv-ch button:hover{color:var(--mv-on)}}
.mv-ch button:focus-visible{outline:2px solid #d45d45;outline-offset:3px;border-radius:4px}
.f-moci .dev .mv{align-self:center}
.mo-film{margin-top:34px}
@media (max-width:899px){.mv-frame{border-radius:14px}.mv-ch{gap:8px}.mv-ch button{font-size:14px}.mv-ill{font-size:10.5px;left:8px;bottom:8px}.mv .pz{right:8px;top:8px;height:30px;padding:0 10px}}
/* ---- More projects: logo icons, recoloured for day and night ---- */
.lg{display:grid!important;place-items:center;background:var(--lg-bg)!important;background-image:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--lg-a) 14%,transparent),transparent 62%)!important}
.lg-ic{width:84px;height:84px;border-radius:22px;background:var(--lg-plate);display:grid;place-items:center;box-shadow:0 14px 28px -16px rgba(0,0,0,.55),inset 0 0 0 1px color-mix(in srgb,var(--lg-k) 10%,transparent);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.lg-ic svg{width:68px;height:68px;display:block}
.lg .k,.thl .k{fill:var(--lg-k)}.lg .a,.thl .a{fill:var(--lg-a)}.lg .p,.thl .p{fill:var(--lg-p,var(--lg-k))}
.lg .ks,.lg .as,.thl .ks,.thl .as,.thl .ps{fill:none;stroke-linecap:round;stroke-linejoin:round}.lg .ks,.thl .ks{stroke:var(--lg-k)}.lg .as,.thl .as{stroke:var(--lg-a)}.thl .ps{stroke:var(--lg-plate)}
@media (hover:hover){.mk .mp-tiles a:hover .lg-ic{transform:translateY(-3px) rotate(-3deg)}}
@media (prefers-reduced-motion:reduce){.lg-ic{transition:none}.mk .mp-tiles a:hover .lg-ic{transform:none}}
.lg-rl{--lg-bg:#0c2820;--lg-plate:#1d5a41;--lg-p:#f4efe0;--lg-k:#17402e;--lg-a:#d0503f}
.lg-vira{--lg-bg:#1b1414;--lg-plate:#100d0d;--lg-k:#f5eee6;--lg-a:#ff6f5e}
.lg-fact{--lg-bg:#0a1822;--lg-plate:#0f2534;--lg-k:#e6f1f6;--lg-a:#45c0ec}
.lg-ctx{--lg-bg:#1c1a15;--lg-plate:#2c2820;--lg-p:#f6f0df;--lg-k:#6b5a35;--lg-a:#cf9531}
.lg-loom{--lg-bg:#121714;--lg-plate:#1e2520;--lg-k:#eeeade;--lg-a:#e9c57d}
html[data-theme="light"] .lg-rl{--lg-bg:#e3eadb;--lg-plate:#2c6a4d;--lg-p:#fbf8ef;--lg-k:#1f4d39;--lg-a:#c8463a}
html[data-theme="light"] .lg-vira{--lg-bg:#f4e9e0;--lg-plate:#fffaf5;--lg-k:#1c1515;--lg-a:#e0483a}
html[data-theme="light"] .lg-fact{--lg-bg:#e1ecf2;--lg-plate:#fdfeff;--lg-k:#0f2a3b;--lg-a:#1b92c6}
html[data-theme="light"] .lg-ctx{--lg-bg:#ebe5d4;--lg-plate:#3d3426;--lg-p:#fffdf6;--lg-k:#6b5a35;--lg-a:#b47b19}
html[data-theme="light"] .lg-loom{--lg-bg:#e3e7db;--lg-plate:#fbfbf6;--lg-k:#28332b;--lg-a:#a07c22}
/* ---- Day theme: the film strip sits on a lightbox (light film base, white light through the sprocket holes) ---- */
html[data-theme="light"] .strip{background-color:#dcd9cf;
  background-image:radial-gradient(circle at 50% 50%,#fdfcf8 0 5px,transparent 5.5px),radial-gradient(circle at 50% 50%,#fdfcf8 0 5px,transparent 5.5px);
  box-shadow:inset 0 1px 0 rgba(40,38,30,.07),inset 0 -1px 0 rgba(40,38,30,.07)}
html[data-theme="light"] .ff2{box-shadow:0 0 0 1px rgba(40,38,30,.12),0 12px 24px -16px rgba(40,38,30,.5)}
/* "See all films" follows the theme instead of inverting it; the green button carries the emphasis */
.fcta{background:var(--bg2);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
.mk a.fcta{color:var(--fg)}
.fcta::before{background:radial-gradient(circle,color-mix(in srgb,var(--fg) 28%,transparent) 2px,transparent 2.5px) 0 50%/18px 8px repeat-x}
.fcta:hover{box-shadow:inset 0 0 0 1px var(--fg3),0 26px 50px -28px rgba(0,0,0,.45)}
/* ---- SkillTree at night: the stage, cards and labels go dark with the page (the canvas redraws its ground in st.js) ---- */
html[data-theme="dark"] .st-stage,html[data-theme="dark"] .st-mstage{background:#141c16}
html[data-theme="dark"] .st-card2{background:rgba(23,30,24,.95);border-color:#3b5734;color:#dbe6d3;box-shadow:0 10px 24px -12px rgba(0,0,0,.7)}
html[data-theme="dark"] .st-card2.on{border-color:#7cc163;box-shadow:0 0 0 2px #7cc163,0 12px 26px -10px rgba(0,0,0,.7)}
html[data-theme="dark"] .st-card2 .t{color:#d4ecc4}
html[data-theme="dark"] .st-card2 .dsc{color:#9cad93}
html[data-theme="dark"] .st-card2 .bar{background:#2a3826}
html[data-theme="dark"] .st-card2 .bar i{background:#6fb85a}
html[data-theme="dark"] .st-card2 .u{color:#b7cdab}
html[data-theme="dark"] .st-card2 .nx{color:#d6b88f}
html[data-theme="dark"] .st-chip{background:rgba(23,30,24,.94);color:#d4ecc4;border-color:#5f9c4e}
html[data-theme="dark"] .st-chip.nt{border-color:#a98257;color:#d6b88f}
html[data-theme="dark"] .st-chip.on{background:#4f9440;color:#fff;border-color:#4f9440}
html[data-theme="dark"] .st-chip.nt.on{background:#3a2c1d;color:#f0d5ad;border-color:#a98257}
html[data-theme="dark"] .st-lines .ld{stroke:#6f9a5b}
html[data-theme="dark"] .st-lines .ld.on{stroke:#9bd67f}
html[data-theme="dark"] .st-lines .nd{fill:#18201a;stroke:#6fae5c}
html[data-theme="dark"] .st-lines .nd.on{fill:#7cc163}
/* ---- Projects menu: each project's logo on a small app-style plate instead of a screenshot ---- */
.mk .pp a{grid-template-columns:40px 1fr auto}.mk .sheet a{grid-template-columns:40px 1fr}
.mk .pp a .th.thl,.mk .sheet a .th.thl{width:40px;height:40px;border-radius:11px;border:0;background:var(--lg-plate);display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 9%,transparent),0 6px 14px -10px rgba(0,0,0,.6)}
.thl svg{width:31px;height:31px;display:block}
.lg-dl{--lg-plate:#1b1f23;--lg-k:#f3f2ec;--lg-a:#c6f24e}
.lg-moci{--lg-plate:#f3ecdc;--lg-k:#17344b;--lg-a:#d45d45}
.lg-fi{--lg-plate:#0e1d26;--lg-k:#d6e9f1;--lg-a:#61c4e3}
.lg-st{--lg-plate:#162019;--lg-k:#cfe2c2;--lg-a:#88c25e}
html[data-theme="dark"] .lg-dl{--lg-plate:#2b3138}
html[data-theme="light"] .lg-moci{--lg-plate:#fbf7ee}
html[data-theme="light"] .lg-fi{--lg-plate:#fdfeff;--lg-k:#173447;--lg-a:#2e7fcb}
html[data-theme="light"] .lg-st{--lg-plate:#f1f4e6;--lg-k:#2f5a33;--lg-a:#3f8236}
/* DriverLab page, day theme (desktop): light veil over the field video, dark type */
@media (min-width:900px){
html[data-theme="light"] .dl-hero{background:var(--bg2)}
html[data-theme="light"] .dl-hero .sh{background:linear-gradient(90deg,rgba(238,240,242,.97) 0%,rgba(238,240,242,.9) 36%,rgba(238,240,242,.45) 60%,rgba(238,240,242,.12) 80%),linear-gradient(to top,#eef0f2 0%,rgba(238,240,242,.7) 12%,rgba(238,240,242,0) 34%)}
html[data-theme="light"] .dl-in,html[data-theme="light"] .dl-in .dll{color:var(--fg)}
html[data-theme="light"] .dl-lede{color:var(--fg2)}
html[data-theme="light"] .mk-dl .dl-hero .btn-s{color:var(--fg);border-color:rgba(17,20,23,.3);background:rgba(255,255,255,.6)}
html[data-theme="light"] .mk-dl .dl-hero .btn-s:hover{background:rgba(255,255,255,.9)}
html[data-theme="light"] .dl-hero .pz{background:rgba(255,255,255,.88);color:var(--fg);border-color:rgba(17,20,23,.16)}
html[data-theme="light"] .dl-hero .pz:hover{background:#fff}
}
/* day theme: game captures sit on a light mat instead of black slabs */
html[data-theme="light"] .mk-dl .fimg,html[data-theme="light"] .mk-dl .im,html[data-theme="light"] .mk-dl .vw,html[data-theme="light"] .mk-dl .cv{background:var(--bg3)}
html[data-theme="light"] .mk-dl .vw,html[data-theme="light"] .mk-dl .flm-player{box-shadow:0 0 0 1px var(--line),0 18px 40px -26px rgba(17,20,23,.45)}
/* DriverLab field: hover a legend name to light that part of the field */
.fhl .fh{opacity:0;transition:opacity .22s ease}
.fhl .fh.on{opacity:1}
.fhl .fd{fill:rgba(6,8,10,.58)}
.fhl .fr{fill:rgba(240,225,74,.14);stroke:#f0e14a;stroke-width:2.5px;vector-effect:non-scaling-stroke}
.fimg .fm{transition:opacity .2s,transform .2s,box-shadow .2s}
.fimg.lit .fm{opacity:.3}
.fimg.lit .fm.on{opacity:1;transform:translate(-50%,-50%) scale(1.2);box-shadow:0 0 0 2px #111,0 0 0 5px #f0e14a,0 4px 12px rgba(0,0,0,.5)}
.flegend li[data-n]{padding:8px 10px;margin:-8px -10px;border-radius:10px;cursor:default;transition:background-color .18s}
.flegend li[data-n].on{background:color-mix(in srgb,var(--fg) 7%,transparent)}
.flegend li[data-n].on .fm.s{background:#f0e14a;color:#111}
.flegend li[data-n]:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.fimg .fm[data-n]{cursor:default}
/* day theme: the hero melts into the page instead of ending on a rule */
@media (min-width:900px){
html[data-theme="light"] .dl-hero+.dl-sec{border-top-color:transparent}
}

@media (max-width:899px){
.mk .tb{height:60px;padding:0 16px;gap:10px}
.mk .tb-brand img{width:28px;height:28px}
.mk .tb-brand{font-size:16.5px}
.mk .diff{gap:8px;padding:12px}
.mk .diff b{font-size:min(26px,calc(var(--pw,390px) * .068))}
.mk .diff small{font-size:12.5px}
.mk .diff p{font-size:14.5px}
.mk .h-acts{flex-wrap:wrap}
.mk .tb-brand span{white-space:nowrap}
.mk .tb-step a{width:36px}
.mk .mo-m .steps-row,.mk .chiprow{flex-wrap:wrap}
.mk .dl-dev{flex-wrap:wrap;gap:8px 16px}
.mk .diff{grid-template-columns:1fr 1fr}
.mk .tabs .tab{min-width:0}
.mk .field2{padding:10px;border-radius:12px}
.mk .fm{width:20px;height:20px;font-size:12px;line-height:20px}
.mk .flegend{grid-template-columns:1fr;gap:12px}
.mk .flegend b{font-size:17px}
.mk .fdim{font-size:10.5px;padding:4px 6px}
.mk .fm[data-n="7"]{transform:translate(-50%,-125%)}
.mk .fm[data-n="6"]{transform:translate(-50%,-10%)}
.mk .fm[data-n="3"]{transform:translate(-20%,-50%)}
.mk{padding-bottom:96px}.mk .tb{height:60px;padding:0 16px;gap:10px;position:sticky;top:0;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px)}.mk .tb-links,.mk .tb-proj,.mk .tb-gh,.mk .tb-theme,.mk .tb .tb-lang{display:none!important}.mk .tb-set{display:grid!important}.mk .pp{display:none!important}.mk .bnav{display:grid}.mk .mob-only{display:block!important}.mk .mob-inl{display:inline!important}.mk .mode-dots.mob-only{display:flex!important}.mk .desk-only,.mk .desk-inl{display:none!important}.mk .h-hero{display:block;height:auto;padding:24px 18px 0;position:relative}.mk .h-left{padding-top:0;position:relative}.mk .h-name{font-size:84px;margin:6px 0 0}.mk .h-intro,.mk .h-intro.zh{font-size:17.5px;margin-top:22px;max-width:none}.mk .h-intro.zh{font-size:16.5px}.mk .h-acts{margin-top:24px;gap:10px}.mk .h-acts .btn{height:52px;padding:0 16px;font-size:16.5px;flex:1;justify-content:center}.mk .h-soc{padding-top:14px;flex-wrap:wrap}.mk .h-right{margin-top:24px;gap:12px}.mk .stage{border-radius:14px}.mk .stage .meta{left:16px;right:16px;bottom:14px;gap:12px}.mk .stage .meta .t{font-size:13.5px}.mk .stage .n-dl{font-size:28px}.mk .stage .n-moci{font-size:24px}.mk .stage .n-fi{font-size:24px}.mk .stage .meta .btn{height:42px;padding:0 14px;font-size:14.5px}.mk .stage .lab{display:none}.mk .h-soc,.mk .tabs,.mk .h-all{display:none!important}.mk .stage{margin-top:26px}.mk .stage .meta .btn{display:none}.mk .tabs{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}.mk .tab{min-width:230px;scroll-snap-align:start}.mk .h-all{flex-direction:column;align-items:flex-start;gap:8px}.mk .h-sec{padding:72px 18px 0}.mk .h-sh{display:block;margin-bottom:24px}.mk .h-sh h2{font-size:52px}.mk .h-sh p{margin-top:12px;font-size:17px}.mk .kv{height:auto;display:flex;flex-direction:column}.mk .kv video{position:relative;aspect-ratio:16/10;height:auto}.mk .kv-sh{display:none}.mk .kv-in{position:static;width:auto;padding:24px 20px 28px}.mk .kv-in h3{font-size:40px;margin-top:22px}.mk .kv-in h3.zh{font-size:28px}.mk .kv-in p{font-size:16.5px}.mk .kv-in p.zh{font-size:15.5px}.mk .kv-a{flex-direction:column;gap:10px}.mk .kv-a .btn{justify-content:center}.mk .kv .pz{top:12px;right:12px;bottom:auto}.mk .kv-tiles{grid-template-columns:1fr}.mk .f-moci{grid-template-columns:1fr}.mk .f-moci .pg{padding:32px 22px 26px}.mk .f-moci h3{font-size:34px}.mk .f-moci h3.zh{font-size:30px!important}.mk .f-moci .steps{grid-template-columns:repeat(2,auto);gap:8px 0}.mk .f-moci .acts{flex-direction:column;align-items:stretch}.mk .f-moci .acts .btn{justify-content:center}.mk .f-moci .dev{padding:0 16px 24px}.mk .ipad{border-radius:18px;padding:8px}.mk .ipad .scr{border-radius:11px}.mk .ifb{left:4%;right:4%;padding:8px 10px}.mk .ifb b{font-size:13px}.mk .ifb i{width:24px;height:24px}.mk .rp{font-size:11.5px;padding:5px 8px}.mk .f-fi{grid-template-columns:1fr;gap:18px;padding:22px}.mk .f-fi h3{font-size:32px}.mk .mp a{grid-template-columns:1fr;gap:8px;padding:20px 4px}.mk .mp .go{justify-self:start}.mk .mp .pv{display:none}.mk .strip{margin:0 -18px}.mk .ff2{width:250px}.mk .fdlg{position:fixed;inset:0;padding:16px}.mk .fdlg-card{width:100%;grid-template-columns:1fr;max-height:88vh;overflow:auto}.mk .fdlg-cv{min-height:190px}.mk .fdlg-b{padding:22px}.mk .ab{grid-template-columns:1fr;gap:20px}.mk .ab p{font-size:18px}.mk .ab p.zh{font-size:17px}.mk .ab .facts{grid-template-columns:1fr 1fr}.mk .ft{grid-template-columns:1fr;gap:28px;padding:40px 18px;margin-top:72px}.mk .mo-hero{grid-template-columns:1fr;gap:32px;padding:32px 18px 48px}.mk .mo-h1{font-size:46px}.mk .mo-h1.zh{font-size:38px!important}.mk .mo-lede{font-size:17px}.mk .mo-lede.zh{font-size:16px}.mk .mo-acts{flex-direction:column;align-items:stretch;gap:12px}.mk .mo-acts .btn{justify-content:center}.mk .mo-sec{padding:56px 18px}.mk .mo-why,.mk .mo-steps,.mk .mo-rhythm,.mk .trycard{grid-template-columns:1fr;gap:24px}.mk .mo-h2{font-size:36px}.mk .mo-h2.zh{font-size:32px!important}.mk .mo-p{font-size:16.5px}.mk .mo-p.zh{font-size:16px}.mk .mo-ex{flex-direction:column;align-items:flex-start;gap:8px}.mk .mo-ex-svg{width:100%}.mk .mo-shot{grid-template-columns:1fr;gap:16px}.mk .mo-rail ol{display:none}.mk .diff{grid-template-columns:1fr 1fr;gap:8px;padding:12px}.mk .diff>div{padding:10px;min-width:0}.mk .diff b{font-size:min(26px,6.6vw)}.mk .tl{height:130px}.mk .tl .pt{width:72px}.mk .tl .pt:last-child{transform:translateX(-80%)}.mk .tl .pt b{font-size:26px}.mk .tl .pt span{font-size:12px}.mk .keys span{font-size:14px}.mk .ledger{grid-template-columns:1fr;gap:18px}.mk .ledger>div{padding:22px}.mk .pm-paper{grid-template-columns:1fr;aspect-ratio:auto}.mk .pm-q{padding:22px}.mk .pm-w{min-height:300px}.mk .pm-fb{left:4%;right:4%}.mk .pm-cal{top:4%;right:4%}.mk .dl-hero{height:auto;display:flex;flex-direction:column;background:var(--bg)}.mk .dl-hero video{position:relative;aspect-ratio:16/10;height:auto}.mk .dl-hero .sh{display:none}.mk .dl-hero .rule{position:relative}.mk .dl-in{position:static;width:auto;padding:24px 18px 32px;color:var(--fg)}.mk .dl-in .dll{color:var(--fg)}.mk .dl-h1{font-size:52px;margin-top:12px}.mk .dl-h1.zh{font-size:28px!important}.mk .dl-lede{font-size:17px;color:var(--fg2)}.mk .dl-lede.zh{font-size:16px}.mk .dl-acts{flex-direction:column;align-items:stretch;gap:10px}.mk .dl-acts .btn{justify-content:center}.mk .dl-hero .btn-s{color:var(--fg)!important;border-color:var(--line)!important}.mk .dl-hero .pz{position:absolute;right:10px;top:calc(100vw * .625 - 44px);bottom:auto;height:34px}.mk .dl-hero .dl-logo{display:none}.mk .dl-sec{padding:56px 18px}.mk .dl-sh{grid-template-columns:1fr;gap:16px;margin-bottom:28px}.mk .dl-h2{font-size:40px}.mk .dl-h2.zh{font-size:30px!important}.mk .dl-p{font-size:16.5px}.mk .dl-p.zh{font-size:15.5px}.mk .frc2>div:first-child{display:block}.mk .dl-short{font-size:16px!important;margin:14px 0 18px!important}.mk .dl-short.zh{font-size:15.5px!important}.mk .field2{padding:10px;border-radius:12px}.mk .fm{width:20px;height:20px;font-size:12px;line-height:20px}.mk .fm[data-n="7"]{transform:translate(-50%,-125%)}.mk .fm[data-n="6"]{transform:translate(-50%,-10%)}.mk .fm[data-n="3"]{transform:translate(-20%,-50%)}.mk .flegend{grid-template-columns:1fr;gap:12px}.mk .flegend b{font-size:17px}.mk .fdim{font-size:10.5px;padding:4px 6px}.mk #modes .dl-sh>p{display:none}.mk .modes{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -18px;padding:0 18px;scroll-padding:0 18px;scrollbar-width:none;overscroll-behavior-x:contain}.mk .modes::-webkit-scrollbar{display:none}.mk .mode{flex:0 0 100%;scroll-snap-align:start}.mk .mode .tx{padding:18px}.mk .mode h4{font-size:30px}.mk .mode h4.zh{font-size:22px}.mk .mode p{font-size:15.5px}.mk .mode p.zh{font-size:15px}.mk .views{grid-template-columns:1fr;gap:16px}.mk .vw .ann{font-size:11px}.mk .team{grid-template-columns:1fr;gap:24px}.mk .flm{grid-template-columns:1fr 1fr;gap:12px}.mk .flm b{font-size:17px;padding:10px 12px 2px}.mk .flm small{padding:0 12px 12px}.mk .honest{grid-template-columns:1fr;gap:20px}.mk .honest li{grid-template-columns:1fr;gap:6px}.mk .dl-end{flex-direction:column;align-items:flex-start;gap:18px;padding:40px 18px}.mk .dl-end h3{font-size:40px}.mk .dl-end>div{flex-direction:column;align-items:stretch;width:100%}.mk .dl-end .btn{justify-content:center}.mk .ru{padding:40px 18px 64px}.mk .ru-h h1{font-size:48px}.mk .ru-h h1.zh{font-size:38px}.mk .ru-g{grid-template-columns:1fr}.mk .ru-c{padding:22px}.mk .ru-c dl{grid-template-columns:100px 1fr}.mk-st .st-hero{grid-template-columns:1fr;gap:20px;padding:36px 18px 32px}.mk-st h1{font-size:46px}.mk-st h1.zh{font-size:36px}.mk-st .st-acts{flex-direction:column}.mk-st .st-acts .btn{justify-content:center}.mk-st .st-sec{padding:0 18px 48px}.mk-st .st-stage{display:none}.mk-st .st-mstage{display:block;width:100%;max-width:420px;border-radius:18px;border:0;margin:0 auto}.mk-st .st-notes{grid-template-columns:1fr;padding:48px 18px}.mk-st .st-end{flex-direction:column;align-items:flex-start;padding:40px 18px}.mk-home .h-hero{min-height:0;padding:24px 18px 8px}.mk .h-pt{position:absolute;right:0;top:10px;width:52%;height:214px;max-width:none}.mk-home .h-pt .pt{left:0;top:0;width:100%;height:100%}.mk .h-left{z-index:1}.mk .sp{flex-direction:column;align-items:stretch;gap:12px;padding:8px 0 0;perspective:1100px}.mk .spc{flex:none;width:100%;height:172px;flex-direction:row;border-radius:16px}.mk .sp>.spc:nth-child(n){--rest:none}.mk .spc-art{flex:0 0 42%}.mk .spc-cap{flex:1;border-top:0;border-left:1px solid rgba(255,255,255,.12);align-content:center;padding:16px}.mk .spc-cap b{font-size:17px;white-space:nowrap}.mk .spc-cap small{font-size:13.5px}.mk .spc-go{width:34px;height:34px}.mk .spc-field{inset:14px 12px 0}.mk .spc-dl .dll{gap:10px}.mk .spc-dl .dll .dlm{width:52px;height:52px}.mk .spc-dl .dll .dlw{font-size:14px}.mk .spc-mo .spc-art{gap:10px}.mk .spc-paper{width:62px;height:62px}.mk .spc-paper img{width:46px;height:46px}.mk .spc-mw b{font-size:18px}.mk .spc-mw small{margin-top:6px;font-size:10.5px}.mk .spc-branch{width:120px;height:144px}.mk .spc-st .w-skill{font-size:30px;margin-bottom:22px}.mk .films-sec .h-allf{grid-column:auto}.mk .fm-hero{padding:40px 18px 36px}.mk .fm-h1{font-size:88px}.mk .fm-h1 .zh{font-size:64px}.mk .fm-lede{font-size:18px}.mk .fm-lede.zh{font-size:16.5px}.mk .fm-list{padding:8px 18px 0}.mk .fm-it,.mk .fm-it:nth-child(even){grid-template-columns:1fr;gap:20px;padding:36px 0}.mk .fm-it:nth-child(even) .fm-still{order:0}.mk .fm-txt h2{font-size:30px}.mk .fm-txt h2.zh{font-size:25px}.mk .fm-txt li{font-size:16px}.mk .fm-watch{width:100%;justify-content:center}.mk .fm-more{padding:48px 18px 16px}.mk .fm-more h2{font-size:40px}.mk-home,.mk-films{--gx:22px}.mk-home .tb,.mk-films .tb{padding:0 var(--gx)}.mk-home .h-hero{padding:24px var(--gx) 8px}.mk-home .h-sec{padding-left:var(--gx);padding-right:var(--gx)}.mk-home .ft,.mk-films .ft{padding-left:var(--gx);padding-right:var(--gx)}.mk-films .fm-hero{padding:40px var(--gx) 36px}.mk-films .fm-list{padding:8px var(--gx) 0}.mk-films .fm-more{padding:48px var(--gx) 16px}.mk-home .films-sec .strip{margin-left:calc(-1 * var(--gx));margin-right:calc(-1 * var(--gx))}.mk .fcta{grid-template-columns:1fr;gap:20px;padding:28px 22px 22px;margin-top:28px;border-radius:18px}.mk .fcta-t{font-size:42px}.mk .fcta-t.zh{font-size:30px}.mk .fcta-d{font-size:15.5px}.mk .fcta-b{width:100%;justify-content:center;height:58px;font-size:17.5px}.mk .fact-logo{height:28px}.mk .fl-ib{height:26px}.mk .spc-fi .spc-art{padding-top:14px}.mk .fi-grid{width:76%}.mk .fi-word{font-size:16px;margin-bottom:16px}.mk .fi-cn{font-size:13px;margin-left:6px}.mk .mp.mp-tiles{display:grid;grid-auto-flow:column;grid-auto-columns:72%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--gx,22px));padding:0 var(--gx,22px) 6px;scroll-padding:0 var(--gx,22px);scrollbar-width:none}.mk .mp.mp-tiles::-webkit-scrollbar{display:none}.mk .mp-tiles a{scroll-snap-align:start}.mk .mp-tiles .pv{display:block}.mk .mp-tiles a{padding:0;gap:0}.mk-st .st-hero{grid-template-columns:1fr;gap:26px}.mk .st-shot{transform:none;border-radius:12px}

}