@import url('../fonts/fonts.css');
:root{--canvas:#050708;--surface:#0c0f11;--ink:#e5e9e8;--muted:#a7b0b3;--accent:#c6b08f;--line:rgba(229,233,232,.15);--gutter:clamp(20px,4vw,72px);--display:Syne,'Noto Sans SC','Microsoft YaHei',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--canvas);color:var(--ink);font-family:'Noto Sans SC','Microsoft YaHei',sans-serif;font-size:16px;line-height:1.8}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}img{display:block;max-width:100%}button,a,summary{touch-action:manipulation}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}.shell{width:min(1760px,calc(100% - var(--gutter)*2));margin-inline:auto}.skip-link{position:fixed;top:0;left:20px;z-index:100;transform:translateY(-150%);background:var(--ink);color:var(--canvas);padding:10px}.skip-link:focus{transform:none}
.hero{position:relative;isolation:isolate;min-height:100svh;display:flex;align-items:end;padding-block:170px 80px}.hero-image{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:56% 40%}.hero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,7,8,.12) 20%,rgba(5,7,8,.36) 55%,#050708 100%),linear-gradient(90deg,rgba(5,7,8,.52),transparent 70%)}.hero-layout{display:grid;grid-template-columns:1.2fr .8fr;align-items:end;gap:clamp(40px,8vw,140px)}h1,h2,h3{font-family:var(--display);line-height:1.12;letter-spacing:-.035em;margin:0}h1{font-size:clamp(64px,8vw,112px);font-weight:600}.english-title{font:12px/1.6 'DM Mono',monospace;letter-spacing:.14em;margin-top:28px;color:#d3c2a6}.hero-copy{max-width:560px}.hero-copy p{margin:0 0 24px}.competition{color:#e1cbaa;font-size:14px}.primary-action{display:inline-flex;gap:22px;align-items:center;background:#f3f4ed;color:#10110f;min-height:48px;padding:9px 19px;border-radius:999px;font-size:14px}.primary-action svg,.film-play svg{width:22px;height:22px;fill:currentColor}
.section{padding-block:clamp(80px,9vw,150px)}.section-heading{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(32px,6vw,96px);align-items:end;margin-bottom:48px}.section-heading h2{font-size:clamp(36px,4.7vw,72px);font-weight:600}.section-heading p{margin:0;color:var(--muted);max-width:550px}.film-stage{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000}.film-stage>img{width:100%;height:100%;object-fit:cover;filter:brightness(.65)}.film-play{position:absolute;inset:0;border:0;background:transparent;display:flex;gap:16px;align-items:center;justify-content:center;font-size:16px}.film-play svg{width:56px;height:56px;padding:15px;border:1px solid currentColor;border-radius:50%}.film-stage iframe{display:block;width:100%;height:100%;border:0}.media-meta{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:20px;font-size:14px}.media-meta>span{font:12px 'DM Mono',monospace;color:var(--accent)}.media-meta a,.closing a{border-bottom:1px solid var(--accent);padding-block:8px}.player-note{font-size:13px;color:var(--muted)}.project-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--line);margin:44px 0 0}.project-facts>div{padding:24px 20px;border-right:1px solid var(--line)}.project-facts>div:first-child{padding-left:0}.project-facts>div:last-child{border:0}dt{color:var(--muted);font-size:13px;margin-bottom:8px}dd{margin:0;font-size:15px}
.reference-section{background:var(--surface)}.reference-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}.reference-grid figure{margin:0;min-width:0}.image-button{width:100%;height:clamp(300px,35vw,590px);background:#111417;border:0;border-radius:14px;overflow:hidden;padding:0;cursor:zoom-in}.image-button img{width:100%;height:100%;object-fit:contain}.reference-grid figcaption{padding-top:24px}.reference-grid h3{font-size:25px}.reference-grid p{color:var(--muted);max-width:44ch;margin:14px 0}.reference-grid figcaption>span{font:12px 'DM Mono',monospace;color:var(--accent)}.process-list{padding:0;margin:0;list-style:none;border-top:1px solid var(--line)}.process-list li{display:grid;grid-template-columns:64px .7fr 1.3fr;gap:24px;align-items:baseline;padding:32px 0;border-bottom:1px solid var(--line)}.process-number{font:12px 'DM Mono',monospace;color:var(--accent)}.process-list h3{font-size:26px}.process-list p{margin:0;color:var(--muted)}.workflow-heading{margin-top:80px}.workflow-heading h3,.test-layout h3{font-size:30px}.workflow-heading p{color:var(--muted)}.node-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;padding:0;margin:32px 0;border-block:1px solid var(--line)}.node-flow li{position:relative;min-width:0;padding:28px 24px;border-right:1px solid var(--line)}.node-flow li:first-child{padding-left:0}.node-flow li:last-child{border-right:0}.node-flow strong{display:block;font-size:20px;font-weight:500}.node-flow span{display:block;color:var(--muted);font-size:14px;margin:8px 0 20px}.node-flow code{font:12px/1.8 'DM Mono',monospace;color:var(--accent);overflow-wrap:anywhere}.node-flow li:not(:last-child)::after{content:'';position:absolute;right:-4px;top:38px;width:8px;height:8px;border-top:1px solid var(--accent);border-right:1px solid var(--accent);transform:rotate(45deg);background:var(--canvas)}.workflow-details{border-bottom:1px solid var(--line);padding:8px 0 24px}.workflow-details summary{cursor:pointer;min-height:44px;padding-block:8px}.workflow-details>p{color:var(--muted);font-size:14px}.workflow-details dl>div{display:grid;grid-template-columns:180px 1fr;gap:24px;padding:16px 0;border-top:1px solid var(--line)}.workflow-details dd{overflow-wrap:anywhere}.test-layout{display:grid;grid-template-columns:.65fr 1.35fr;gap:64px;align-items:center;margin-top:80px}.test-layout p{color:var(--muted)}.test-layout video{width:100%;aspect-ratio:1920/1088;background:#000;border-radius:14px}.closing{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:24px;padding-block:32px 60px;color:var(--muted);font-size:14px}
dialog{position:fixed;width:100%;max-width:none;height:100dvh;max-height:none;inset:0;margin:0;padding:0;border:0;background:rgba(2,3,4,.96);color:var(--ink)}dialog::backdrop{background:rgba(2,3,4,.9)}.viewer-stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:80px 7vw}.viewer-stage img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}.viewer-stage p{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);font-size:14px;white-space:nowrap}.viewer-stage button{position:absolute;right:24px;top:20px;min-height:44px;padding:8px 20px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}body.viewer-open{overflow:hidden}
@media(max-width:900px){.hero-layout,.section-heading{grid-template-columns:1fr}.hero-layout{gap:36px}.hero-copy{max-width:650px}.hero{padding-bottom:56px}.hero-image{object-position:62% center}.project-facts,.node-flow{grid-template-columns:repeat(2,minmax(0,1fr))}.project-facts>div:nth-child(3){padding-left:0}.project-facts>div:nth-child(even){border-right:0}.project-facts>div:nth-child(n+3){border-top:1px solid var(--line)}.node-flow li:nth-child(2){border-right:0}.node-flow li:nth-child(2)::after{display:none}.node-flow li:nth-child(3){padding-left:0}.test-layout{gap:32px;grid-template-columns:1fr}}
@media(max-width:620px){.hero{min-height:90svh;padding-top:320px}.hero-layout{gap:24px}h1{font-size:64px}.hero-copy p{font-size:15px}.hero-image{object-position:60% top}.hero::after{background:linear-gradient(180deg,rgba(5,7,8,.1),rgba(5,7,8,.7) 40%,#050708 90%)}.english-title{margin-top:20px}.section-heading{margin-bottom:32px}.reference-grid{gap:32px;grid-template-columns:1fr}.image-button{height:auto;aspect-ratio:1/1}.reference-grid figure:first-child .image-button{aspect-ratio:16/9}.process-list li{grid-template-columns:32px 1fr;gap:16px}.process-list p{grid-column:2}.process-list h3{font-size:23px}.project-facts>div{padding:20px 12px}.project-facts dd{font-size:14px}.node-flow li{padding:24px 16px}.node-flow strong{font-size:18px}.workflow-details dl>div{grid-template-columns:1fr;gap:4px}.media-meta,.closing{align-items:flex-start;flex-direction:column;gap:8px}.workflow-heading,.test-layout{margin-top:56px}.viewer-stage{padding:80px 16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}