@font-face{font-family:"Dramivio Display";src:url("./assets/fonts/display-bold.otf") format("opentype");font-style:normal;font-weight:700 900;font-display:swap}
:root{--paper:#f5f6f2;--ink:#172c25;--green:#12583e;--muted:#64746d;--gold:#d4b86a;--line:#d4dcd3;--sage:#e7ebe2;--gutter:clamp(22px,4.4vw,76px);--display:"Dramivio Display",Impact,"Arial Narrow",sans-serif;--body:Arial,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;color-scheme:light;font-family:var(--body);color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scrollbar-gutter:stable}body{margin:0;overflow-x:clip}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit}a{color:inherit;text-decoration:none}img,svg{display:block}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--green);outline-offset:5px}button:disabled{cursor:default}::selection{color:var(--paper);background:var(--green)}h1,h2,h3,p,figure{margin:0}.icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon-defs{position:absolute;width:0;height:0;overflow:hidden}.skip-link{position:fixed;left:20px;top:-80px;z-index:1000;padding:12px 18px;color:white;background:var(--green)}.skip-link:focus{top:10px}.eyebrow{font-size:10px;font-weight:600;letter-spacing:.12em;line-height:1.5}.section-number{font-family:ui-monospace,monospace;font-weight:400;margin-right:25px;letter-spacing:0}.section-wrap{padding-left:var(--gutter);padding-right:var(--gutter)}.section-topline{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--line);padding-top:24px}.small-asterisk{font-size:36px;color:var(--green);line-height:1}.text-link{display:inline-flex;align-items:center;gap:24px;font-size:12px;font-weight:600}.text-link .icon{width:21px;height:21px}.text-link:hover .icon{transform:translateX(4px)}
/* The framework owns scene height and pinning. The visual canvas lives inside its shell. */
cv-stage,cv-scene,cv-animate{display:block}cv-stage::part(frame){max-width:none}cv-scene{scroll-margin-top:70px}cv-scene[zone]{min-height:100svh}.timeline-control{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}.scene-canvas{position:relative;width:100%;height:100svh;overflow:clip;isolation:isolate}.display-heading{font-family:var(--display);font-weight:700;letter-spacing:-.025em;line-height:.86;text-transform:uppercase}.outline-word{color:transparent;-webkit-text-stroke:1.2px var(--ink)}
/* Navigation */
.site-header{position:fixed;inset:0 0 auto;height:77px;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px;z-index:100;background:rgb(245 246 242 / .93);border-bottom:1px solid rgb(212 220 211 / .8);backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:5px;font-size:23px;letter-spacing:-1px;font-weight:750;white-space:nowrap}.brand img{margin-left:-6px}.brand-dot{color:var(--green)}.main-nav{display:flex;align-items:center;gap:30px}.scene-link{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:600;letter-spacing:.04em}.nav-number{font-family:ui-monospace,monospace;color:var(--muted);font-size:9px}.scene-link:hover,.scene-link[aria-current],.scene-link.active{color:var(--green)}.scene-link[aria-current] .nav-number{color:var(--green);text-decoration:underline;text-underline-offset:4px}.header-actions{display:flex;align-items:center;gap:24px}.language-toggle{border:0;background:none;display:flex;align-items:center;gap:8px;font-size:11px;min-height:44px;padding:6px}.language-dot{width:5px;height:5px;background:var(--green);border-radius:50%}.header-source{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;transition:background .2s,color .2s}.header-source .icon{width:17px;height:17px}.header-source:hover{background:var(--green);color:white}
/* Original Dramivio presentation sprite. Image positions preserve the source 5 by 2 grid. */
.art{display:block;background-color:#d8dfd3;background-image:url("https://dramivio-docs.pages.dev/design/assets/covers.png");background-size:500% 200%;background-repeat:no-repeat;position:relative;isolation:isolate}.art-0{background-position:0 0}.art-1{background-position:25% 0}.art-2{background-position:50% 0}.art-3{background-position:75% 0}.art-4{background-position:100% 0}.art-5{background-position:0 100%}.art-6{background-position:25% 100%}.art-7{background-position:50% 100%}.art-8{background-position:75% 100%}.art-9{background-position:100% 100%}
/* 01 — Letterforms and a moving poster composition. */
.opening-canvas{--brand-progress:0;--poster-progress:0;--copy-progress:0;background:var(--paper)}.opening-topline{position:absolute;top:calc(77px + 4.5svh);left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;gap:20px;z-index:40}.opening-edition{color:var(--muted);font-weight:400}.opening-brand{font-family:var(--display);font-size:min(25.3vw,43svh);line-height:.8;font-weight:700;letter-spacing:-.028em;color:var(--green);position:absolute;left:50%;top:43%;white-space:nowrap;z-index:20;transform:translate(-50%,calc(-50% - var(--brand-progress) * 13svh)) scale(calc(1 - var(--brand-progress) * .25));transform-origin:center;opacity:calc(1 - var(--brand-progress) * .45)}.brand-square{position:absolute;width:1.7vw;height:1.7vw;background:var(--gold);right:-2.1vw;top:-1vw}.opening-poster{position:absolute;z-index:10;will-change:transform}.opening-poster>.art{width:100%;aspect-ratio:3/4;box-shadow:0 8px 32px rgb(20 44 32 / .07)}.poster-back-one{width:13.7vw;max-width:215px;left:37%;top:20%;transform:translate(calc(var(--poster-progress) * -9vw),calc(var(--poster-progress) * 23svh)) rotate(calc(8deg - var(--poster-progress) * 8deg))}.poster-back-two{width:10vw;max-width:160px;right:4.5%;top:20%;transform:translate(calc(var(--poster-progress) * -12vw),calc(var(--poster-progress) * 30svh)) rotate(calc(-8deg + var(--poster-progress) * 8deg))}.poster-front-one{z-index:30;width:17.5vw;max-width:270px;left:11%;top:43%;transform:translate(calc(var(--poster-progress) * -4vw),calc(var(--poster-progress) * -3svh)) rotate(calc(-11deg + var(--poster-progress) * 11deg)) scale(calc(1 + var(--poster-progress) * .05))}.poster-front-two{z-index:30;width:15vw;max-width:234px;right:18%;top:27%;transform:translate(calc(var(--poster-progress) * 12vw),calc(var(--poster-progress) * 11svh)) rotate(calc(10deg - var(--poster-progress) * 10deg)) scale(calc(1 + var(--poster-progress) * .08))}.poster-label{position:absolute;left:10px;right:10px;bottom:9px;color:white;font-family:ui-monospace,monospace;font-size:8px;letter-spacing:.02em;line-height:1.3;padding:5px 7px;background:rgb(23 44 37 / .72)}.art-number{position:absolute;top:10px;left:10px;font-family:ui-monospace,monospace;font-size:9px;color:white;background:rgb(23 44 37 / .6);padding:5px}.opening-star{position:absolute;z-index:25;color:var(--gold);left:48%;top:68%;font-size:clamp(45px,6vw,95px);line-height:1;transform:rotate(calc(25deg + var(--poster-progress) * 70deg));opacity:calc(1 - var(--copy-progress))}.opening-copy{position:absolute;right:var(--gutter);bottom:16%;z-index:40;width:min(340px,28vw);opacity:calc(1 - var(--copy-progress));transform:translateY(calc(var(--copy-progress) * 30px))}.opening-tagline{font-family:var(--display);font-size:clamp(26px,3.05vw,48px);line-height:1;letter-spacing:-.015em}.opening-description{font-size:12px;line-height:1.65;max-width:285px;margin-top:12px;color:var(--muted)}.opening-bottom{position:absolute;bottom:24px;left:var(--gutter);right:var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:18px;z-index:40;border-top:1px solid var(--line);padding-top:18px}.opening-bottom>.eyebrow{font-size:9px}.scroll-invitation{display:flex;align-items:center;gap:18px;font-size:9px;letter-spacing:.08em}.scroll-arrow{font-size:20px;line-height:1}
/* 02 — An asymmetrical, naturally scrolling gallery. */
.gallery-section{padding-top:65px;padding-bottom:90px}.gallery-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:60px;margin-top:62px}.gallery-heading .display-heading{font-size:clamp(82px,11.3vw,178px)}.gallery-intro{width:268px;max-width:30%;padding-bottom:4px}.gallery-intro>p{font-size:13px;line-height:1.75;color:var(--muted)}.underlined-note{display:block;margin-top:29px;border-bottom:1px solid var(--ink);padding-bottom:9px;font-size:8px;line-height:1.8}.poster-wall{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2.6vw;row-gap:75px;margin-top:82px;padding-top:10px}.wall-item{min-width:0;position:relative}.wall-1{grid-column:1/span 4;width:88%}.wall-2{grid-column:5/span 3;margin-top:105px}.wall-3{grid-column:9/span 4;width:94%;margin-top:30px;justify-self:end}.wall-4{grid-column:1/span 3;margin-top:-42px;width:96%}.wall-5{grid-column:5/span 4;margin-top:4px}.wall-6{grid-column:10/span 3;margin-top:-20px}.story-card{display:block;position:relative;text-align:left;border:0;padding:0;width:100%;background:none}.story-art{aspect-ratio:3/4;transition:transform .35s cubic-bezier(.2,.7,.1,1);transform-origin:center}.story-index{position:absolute;top:11px;left:11px;font-size:9px;font-family:ui-monospace,monospace;line-height:1;background:var(--paper);padding:6px;color:var(--ink)}.story-open-icon{position:absolute;bottom:12px;right:12px;background:var(--paper);width:40px;height:40px;display:grid;place-items:center;border-radius:50%;transition:background .2s,color .2s}.story-open-icon .icon{width:19px;height:19px}.story-card:hover .story-art{transform:translateY(-5px)}.story-card:hover .story-open-icon{background:var(--green);color:white}.story-caption{display:block;padding-top:16px}.story-title{display:block;font-weight:600;font-size:16px;letter-spacing:-.035em;line-height:1.3}.story-genre{display:block;font-size:8px;letter-spacing:.1em;color:var(--muted);margin-top:7px;line-height:1.5}.wall-word{display:block;margin-top:45px;font-family:var(--display);font-size:clamp(40px,5.7vw,88px);font-weight:700;line-height:.85;letter-spacing:-.025em;color:var(--green)}.wall-small-copy{display:block;margin:0 0 42px auto;max-width:170px;font-family:var(--display);font-size:clamp(29px,3.5vw,52px);line-height:.95;letter-spacing:-.02em}.gallery-bottom{display:flex;justify-content:space-between;align-items:center;gap:28px;margin-top:70px;padding-top:24px;border-top:1px solid var(--line)}.gallery-bottom>.eyebrow{font-size:8px;color:var(--muted)}
/* 03 — A single real interface, decomposed into readable visual layers. */
.phone-canvas{--assembly-progress:0;--copy-progress:0;background:var(--sage)}.phone-scene-topline{position:absolute;top:112px;left:var(--gutter);right:var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:10}.phone-scene-topline>.eyebrow:last-child{color:var(--muted);font-weight:400}.assembly-copy{position:absolute;top:53%;left:var(--gutter);transform:translateY(-45%);width:42%;z-index:5}.assembly-copy>.display-heading{font-size:min(10vw,17svh);line-height:.85}.assembly-copy>p{max-width:310px;font-size:13px;line-height:1.75;margin-top:28px;color:var(--muted)}.assembly-legend{display:flex;gap:29px;margin-top:30px;padding-top:19px;border-top:1px solid #c3cdbf;max-width:330px}.assembly-legend>span{display:flex;flex-direction:column;gap:7px;font-size:9px;letter-spacing:.08em}.assembly-legend b{font-family:ui-monospace,monospace;font-size:10px;color:var(--muted);font-weight:400}.assembly-figure{position:absolute;width:580px;height:630px;left:70%;top:54%;transform:translate(-50%,-50%);perspective:1500px;z-index:6}.assembly-orbit{position:absolute;width:480px;height:480px;border:1px solid rgb(18 88 62 / .12);border-radius:50%;left:50%;top:46%;transform:translate(-50%,-50%) scale(calc(1 - var(--assembly-progress) * .1))}.assembly-orbit::after{content:"";position:absolute;inset:40px;border:1px solid rgb(18 88 62 / .08);border-radius:50%}.phone-composition{position:absolute;left:50%;top:49%;width:308px;height:624px;transform-style:preserve-3d;transform:translate(-50%,-50%) rotateX(calc(18deg * (1 - var(--assembly-progress)))) rotateY(calc(-13deg * (1 - var(--assembly-progress)))) rotateZ(calc(-9deg * (1 - var(--assembly-progress)))) scale(.88)}.device-base{position:absolute;inset:0;border:5px solid #234438;border-radius:44px;background:var(--paper);box-shadow:12px 20px 45px rgb(32 54 35 / .13)}.device-camera{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:76px;height:19px;border-radius:12px;background:#172c25}.device-status{position:absolute;left:19px;right:19px;top:19px;display:flex;justify-content:space-between;align-items:center;font-size:10px}.device-status>span{font-size:9px;letter-spacing:1px}.device-brand{display:flex;align-items:center;gap:4px;position:absolute;top:58px;left:13px;right:14px}.device-brand>strong{font-size:19px;letter-spacing:-.7px}.device-pill{margin-left:auto;font-size:7px;padding:6px 7px;border-radius:20px;background:#e3ebe1;color:var(--green);white-space:nowrap;letter-spacing:.03em}.ui-layer{position:absolute;background:var(--paper);border:1px solid #dbe2d7;border-radius:11px;transform-style:preserve-3d;box-shadow:calc(10px * (1 - var(--assembly-progress))) calc(14px * (1 - var(--assembly-progress))) calc(30px * (1 - var(--assembly-progress))) rgb(25 49 33 / .12)}.layer-search{left:16px;top:112px;width:276px;height:44px;display:flex;align-items:center;gap:9px;padding:0 12px;background:white;transform:translate3d(calc(142px * (1 - var(--assembly-progress))),calc(-112px * (1 - var(--assembly-progress))),calc(145px * (1 - var(--assembly-progress)))) rotateZ(calc(3deg * (1 - var(--assembly-progress))))}.layer-search>.icon{width:15px;height:15px;color:var(--muted)}.layer-search>span:not(.layer-label){font-size:10px;color:var(--muted);white-space:nowrap}.layer-search>.tiny-arrow{margin-left:auto;width:13px;height:13px;color:var(--green)}.layer-genres{left:16px;top:166px;width:276px;height:32px;display:flex;align-items:center;justify-content:space-between;gap:6px;background:none;border:0;box-shadow:none;transform:translate3d(calc(-70px * (1 - var(--assembly-progress))),calc(-45px * (1 - var(--assembly-progress))),calc(80px * (1 - var(--assembly-progress))))}.layer-genres>span{font-size:9px;line-height:30px;padding:0 10px;background:white;border:1px solid #e1e7dd;border-radius:8px;white-space:nowrap}.layer-genres>span.active{color:var(--paper);background:var(--green);border-color:var(--green)}.layer-continue{left:16px;top:209px;width:276px;height:68px;padding:9px;display:flex;align-items:center;gap:9px;background:#e5ece2;transform:translate3d(calc(-138px * (1 - var(--assembly-progress))),calc(44px * (1 - var(--assembly-progress))),calc(160px * (1 - var(--assembly-progress))))}.continue-art{width:34px;height:46px;border-radius:4px;flex-shrink:0}.continue-copy{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}.continue-copy>b{font-size:10px;white-space:nowrap}.continue-copy>span:not(.device-progress){font-size:8px;color:var(--muted)}.device-progress{height:2px;width:95%;background:#c6d5c5;border-radius:2px;overflow:hidden}.device-progress>span{display:block;width:44%;height:100%;background:var(--green)}.device-play{width:29px;height:29px;border-radius:50%;background:var(--green);color:white;display:grid;place-items:center}.device-play>.icon{width:14px;height:14px}.layer-catalog{left:16px;top:291px;width:276px;height:246px;padding:10px;background:var(--paper);transform:translate3d(calc(55px * (1 - var(--assembly-progress))),calc(112px * (1 - var(--assembly-progress))),calc(120px * (1 - var(--assembly-progress)))) rotateZ(calc(2deg * (1 - var(--assembly-progress))))}.device-section{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}.device-section>b{font-size:12px}.device-section>span{font-size:8px;color:var(--muted)}.device-posters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.device-poster{height:163px;border-radius:8px;overflow:hidden}.device-posters>div>b{display:block;font-size:9px;line-height:1.3;margin-top:8px;white-space:nowrap;letter-spacing:-.2px}.device-posters small{display:block;font-size:7px;line-height:1.3;margin-top:4px;color:var(--muted)}.device-heart{position:absolute;right:6px;bottom:6px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:white;background:rgb(15 44 31 / .72)}.device-heart .icon{width:13px;height:13px}.device-heart.filled .icon{fill:currentColor}.layer-navigation{left:16px;bottom:20px;width:276px;height:52px;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;display:flex;justify-content:space-around;padding-top:11px;transform:translate3d(calc(-10px * (1 - var(--assembly-progress))),calc(70px * (1 - var(--assembly-progress))),calc(70px * (1 - var(--assembly-progress))))}.layer-navigation>span{display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--muted)}.layer-navigation>span.active{color:var(--green)}.layer-navigation .icon{width:17px;height:17px}.layer-navigation small{font-size:7px}.layer-label{position:absolute;white-space:nowrap;font-size:9px;font-weight:600;letter-spacing:.06em;opacity:calc(1 - var(--assembly-progress) * 1.6);pointer-events:none;color:var(--green)}.layer-label::before{content:"";display:inline-block;width:19px;height:1px;background:var(--green);vertical-align:middle;margin-right:7px}.layer-search>.layer-label{left:0;top:-24px}.layer-continue>.layer-label{right:-20px;bottom:-27px}.layer-catalog>.layer-label{right:0;bottom:-27px}.assembly-caption{position:absolute;bottom:-8px;left:0;right:0;height:20px;text-align:center;font-size:9px;letter-spacing:.06em;color:var(--muted)}.caption-open{opacity:calc(1 - var(--copy-progress))}.caption-complete{position:absolute;inset:0;opacity:var(--copy-progress);color:var(--green);font-weight:600}
/* 04 — Back to the brand, then forward to the work. */
.finale{padding-top:70px;padding-bottom:23px}.back-top{display:flex;align-items:center;gap:10px;font-size:9px;letter-spacing:.05em}.finale-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:60px;margin-top:62px}.finale-tagline{font-family:var(--display);font-size:clamp(36px,4vw,64px);letter-spacing:-.02em;line-height:1}.finale-intro>p:last-child{max-width:350px;font-size:12px;line-height:1.75;color:var(--muted)}.finale-brand{position:relative;font-family:var(--display);font-size:24.1vw;line-height:.83;letter-spacing:-.027em;font-weight:700;color:var(--green);margin:48px 0 40px;white-space:nowrap}.finale-brand>span{position:absolute;right:-.2vw;top:-.4vw;font-family:var(--body);font-size:5vw;color:var(--gold);line-height:1}.project-links{display:grid;grid-template-columns:1fr 1fr;gap:40px}.project-link{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:25px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);transition:color .2s}.project-link small{display:block;font-size:8px;letter-spacing:.1em;color:var(--muted);margin-bottom:10px}.project-link strong{display:block;font-family:var(--display);font-size:clamp(31px,3.8vw,60px);line-height:1;letter-spacing:-.01em;font-weight:700}.project-link>.icon{width:43px;height:43px;stroke-width:1;transition:transform .25s}.project-link:hover{color:var(--green)}.project-link:hover>.icon{transform:translate(3px,-3px)}.footer-line{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:43px;font-size:8px;letter-spacing:.06em;color:var(--muted)}.footer-brand{display:flex;align-items:center;gap:4px;font-size:16px;letter-spacing:-.5px;font-weight:700;color:var(--ink)}.footer-brand>img{margin-left:-5px}.footer-line>a:last-child{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
/* Story details are a genuine, keyboard-accessible dialog. */
body.dialog-open{overflow:hidden}.story-dialog{width:min(860px,calc(100% - 44px));max-height:calc(100svh - 60px);padding:0;border:0;background:var(--paper);color:var(--ink);overflow:auto;box-shadow:0 25px 100px rgb(5 20 13 / .22)}.story-dialog::backdrop{background:rgb(10 28 19 / .65);backdrop-filter:blur(5px)}.dialog-layout{display:grid;grid-template-columns:.9fr 1fr;min-height:520px}.dialog-art{min-height:520px;aspect-ratio:3/4}.dialog-copy{position:relative;padding:64px 36px 30px;display:flex;flex-direction:column;align-items:flex-start}.dialog-close{position:absolute;right:18px;top:16px;width:36px;height:36px;background:transparent;border:1px solid var(--line);display:grid;place-items:center;border-radius:50%}.dialog-close>.icon{width:18px;height:18px}.dialog-copy>.eyebrow{font-size:8px;color:var(--muted)}.dialog-genre{font-size:10px;letter-spacing:.06em;color:var(--green);margin-top:44px}.dialog-copy>h2{font-family:var(--display);font-size:54px;line-height:.95;letter-spacing:-.02em;font-weight:700;margin-top:12px}.dialog-description{font-size:13px;line-height:1.8;color:var(--muted);margin-top:22px}.dialog-note{font-size:9px;line-height:1.6;color:var(--muted);margin-top:28px;padding-top:13px;border-top:1px solid var(--line);width:100%}.dialog-pagination{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;margin-top:auto;padding-top:34px}.dialog-pagination>span{font-family:ui-monospace,monospace;font-size:10px}.dialog-pagination>div{display:flex;gap:8px}.dialog-pagination button{width:38px;height:38px;display:grid;place-items:center;background:none;border:1px solid var(--line);border-radius:50%}.dialog-pagination button:hover{background:var(--green);color:white}.dialog-pagination .icon{width:18px;height:18px}#dialog-prev .icon{transform:rotate(180deg)}.noscript-note{padding:20px var(--gutter);font-size:12px;text-align:center;border-top:1px solid var(--line)}
/* Chinese keeps the same hierarchy with appropriate glyph spacing and line heights. */
html[lang="zh-CN"] .display-heading{font-family:var(--body);font-weight:900;letter-spacing:-.06em;line-height:1.03}html[lang="zh-CN"] .gallery-heading .display-heading{font-size:clamp(60px,7.7vw,120px)}html[lang="zh-CN"] .assembly-copy>.display-heading{font-size:min(7.4vw,13svh)}html[lang="zh-CN"] .opening-tagline,html[lang="zh-CN"] .finale-tagline,html[lang="zh-CN"] .project-link strong,html[lang="zh-CN"] .dialog-copy>h2{font-family:var(--body);font-weight:800;letter-spacing:-.035em}html[lang="zh-CN"] .opening-tagline{font-size:30px}html[lang="zh-CN"] .project-link strong{font-size:32px}html[lang="zh-CN"] .dialog-copy>h2{font-size:38px;line-height:1.15}html[lang="zh-CN"] .story-title{letter-spacing:.02em}
@media(min-width:1800px){.assembly-figure{left:68%}.assembly-copy{left:9%}.gallery-section,.finale{max-width:1800px;margin:auto}.finale-brand{font-size:430px}}
@media(max-width:1100px){.main-nav{gap:20px}.scene-link{font-size:9px}.nav-number{display:none}.site-header{gap:15px}.header-actions{gap:15px}.opening-description{font-size:11px}.opening-copy{width:29vw}.opening-brand{font-size:min(25.1vw,42svh)}.gallery-heading{gap:35px}.gallery-intro{max-width:33%}.assembly-figure{left:72%;width:520px;height:590px}.phone-composition{transform:translate(-50%,-50%) rotateX(calc(18deg * (1 - var(--assembly-progress)))) rotateY(calc(-13deg * (1 - var(--assembly-progress)))) rotateZ(calc(-9deg * (1 - var(--assembly-progress)))) scale(.77)}.assembly-orbit{width:400px;height:400px}.assembly-copy{width:44%}.assembly-copy>p{max-width:270px;font-size:12px}.assembly-legend{gap:20px}.assembly-caption{bottom:10px;font-size:8px}.wall-small-copy{font-size:30px}}
@media(max-width:700px){
  :root{--gutter:22px}.site-header{height:64px;gap:10px}.brand{font-size:20px;letter-spacing:-.7px}.brand img{width:33px;height:33px}.main-nav{gap:13px}.scene-link{gap:0;font-size:8px}.scene-link>span:last-child{display:none}.nav-number{display:block;font-size:10px}.header-actions{gap:7px}.header-source{width:30px;height:30px}.header-source .icon{width:14px;height:14px}.language-toggle{font-size:10px;gap:6px;padding:5px}.language-dot{width:4px;height:4px}cv-scene{scroll-margin-top:64px}.eyebrow{font-size:8px}.section-number{margin-right:14px}.section-topline{padding-top:18px}.small-asterisk{font-size:28px}
  .opening-topline{top:94px}.opening-edition{display:none}.opening-brand{top:34%;font-size:25.1vw;letter-spacing:-.03em;transform:translate(-50%,calc(-50% - var(--brand-progress) * 8svh)) scale(calc(1 - var(--brand-progress) * .12))}.brand-square{width:2.2vw;height:2.2vw;right:-2.2vw;top:-2vw}.poster-back-one{width:min(23vw,15svh);left:59%;top:23%;transform:translate(calc(var(--poster-progress) * -15vw),calc(var(--poster-progress) * 20svh)) rotate(calc(8deg - var(--poster-progress) * 8deg))}.poster-back-two{display:none}.poster-front-one{width:min(34vw,22svh);left:9%;top:43%;transform:translate(calc(var(--poster-progress) * -3vw),calc(var(--poster-progress) * -2svh)) rotate(calc(-11deg + var(--poster-progress) * 11deg))}.poster-front-two{width:min(29vw,20svh);right:7%;top:46%;transform:translate(calc(var(--poster-progress) * -4vw),calc(var(--poster-progress) * -3svh)) rotate(calc(10deg - var(--poster-progress) * 10deg))}.poster-label{font-size:6px;padding:4px;left:5px;right:5px;bottom:5px}.art-number{font-size:7px;padding:4px;top:5px;left:5px}.opening-star{left:11%;top:19%;font-size:42px}.opening-copy{left:var(--gutter);right:auto;bottom:13.5%;width:76%;max-width:320px}.opening-tagline{font-size:30px}.opening-description{font-size:10px;line-height:1.55;max-width:250px;margin-top:8px}.opening-bottom{bottom:18px;padding-top:15px}.opening-bottom>.eyebrow>span:last-child{display:none}.opening-bottom>.eyebrow{font-size:8px}.scroll-invitation{font-size:8px;gap:11px}.scroll-arrow{font-size:18px}
  .gallery-section{padding-top:35px;padding-bottom:55px}.gallery-heading{display:block;margin-top:40px}.gallery-heading .display-heading{font-size:18.5vw;line-height:.88}.gallery-intro{width:auto;max-width:none;margin-top:25px;display:flex;align-items:flex-end;gap:22px}.gallery-intro>p{font-size:11px;line-height:1.7;max-width:70%}.underlined-note{font-size:6px;line-height:1.9;margin-top:0;max-width:85px;min-width:70px}.poster-wall{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;row-gap:35px;margin-top:42px}.wall-item{grid-column:auto;width:100%;margin-top:0;justify-self:auto}.wall-item:nth-child(even){margin-top:45px}.wall-word,.wall-small-copy{display:none}.story-title{font-size:12px;line-height:1.3}.story-genre{font-size:6px;letter-spacing:.05em;margin-top:5px}.story-caption{padding-top:11px}.story-index{top:6px;left:6px;font-size:7px;padding:5px}.story-open-icon{bottom:7px;right:7px;width:29px;height:29px}.story-open-icon>.icon{width:14px;height:14px}.gallery-bottom{margin-top:38px;padding-top:19px;gap:18px;align-items:flex-start}.gallery-bottom>.eyebrow{font-size:6px;line-height:1.7;max-width:50%}.gallery-bottom>.text-link{font-size:10px;gap:8px}.gallery-bottom>.text-link>.icon{width:15px;height:15px}
  .phone-scene-topline{top:91px;gap:12px}.phone-scene-topline>.eyebrow:last-child{display:none}.assembly-copy{top:130px;left:var(--gutter);transform:none;width:calc(100% - var(--gutter) * 2)}.assembly-copy>.display-heading{font-size:13.1vw;line-height:.85}.assembly-copy>p{font-size:10px;line-height:1.6;position:absolute;left:53%;top:0;max-width:47%;margin:0}.assembly-legend{gap:13px;margin-top:16px;padding-top:12px;max-width:100%;justify-content:space-between}.assembly-legend>span{flex-direction:row;align-items:center;gap:6px;font-size:7px}.assembly-legend b{font-size:8px}.assembly-figure{left:50%;top:66%;width:370px;height:420px;max-width:100%;perspective:1100px}.assembly-orbit{width:300px;height:300px;top:48%}.phone-composition{top:48%;transform:translate(-50%,-50%) rotateX(calc(14deg * (1 - var(--assembly-progress)))) rotateY(calc(-11deg * (1 - var(--assembly-progress)))) rotateZ(calc(-8deg * (1 - var(--assembly-progress)))) scale(.6)}.layer-search{transform:translate3d(calc(65px * (1 - var(--assembly-progress))),calc(-58px * (1 - var(--assembly-progress))),calc(90px * (1 - var(--assembly-progress))))}.layer-continue{transform:translate3d(calc(-68px * (1 - var(--assembly-progress))),calc(32px * (1 - var(--assembly-progress))),calc(100px * (1 - var(--assembly-progress))))}.layer-catalog{transform:translate3d(calc(35px * (1 - var(--assembly-progress))),calc(65px * (1 - var(--assembly-progress))),calc(80px * (1 - var(--assembly-progress))))}.layer-navigation{transform:translate3d(0,calc(45px * (1 - var(--assembly-progress))),calc(30px * (1 - var(--assembly-progress))))}.layer-label{display:none}.assembly-caption{bottom:-3px;font-size:7px}
  .finale{padding-top:40px;padding-bottom:25px}.back-top{font-size:7px;gap:6px}.finale-intro{display:block;margin-top:40px}.finale-tagline{font-size:39px}.finale-intro>p:last-child{font-size:11px;line-height:1.7;max-width:270px;margin-top:15px}.finale-brand{font-size:23.3vw;margin:40px 0 30px}.finale-brand>span{font-size:7vw;right:-1vw;top:-2vw}.project-links{gap:20px}.project-link{gap:5px;padding:19px 0}.project-link small{font-size:6px;line-height:1.5;margin-bottom:8px;letter-spacing:.06em}.project-link strong{font-size:30px;white-space:nowrap}.project-link>.icon{width:23px;height:23px}.footer-line{display:grid;grid-template-columns:1fr 1fr;gap:23px 12px;margin-top:30px;font-size:6px;line-height:1.6}.footer-line>span{grid-row:2;grid-column:1/-1;text-align:center}.footer-line>a:last-child{justify-self:end;font-size:7px}.footer-brand{font-size:15px}
  .story-dialog{width:calc(100% - 32px);max-height:calc(100svh - 32px)}.dialog-layout{display:block;min-height:0}.dialog-art{width:100%;min-height:0;height:36svh;aspect-ratio:3/4;background-size:500% 200%}.dialog-copy{padding:30px 22px 22px}.dialog-close{top:12px;right:12px;background:var(--paper);z-index:5}.dialog-copy>.eyebrow{font-size:7px;max-width:80%}.dialog-genre{margin-top:24px;font-size:9px}.dialog-copy>h2{font-size:43px;max-width:90%}.dialog-description{font-size:12px;margin-top:15px}.dialog-note{font-size:8px;margin-top:20px}.dialog-pagination{padding-top:24px}
  html[lang="zh-CN"] .gallery-heading .display-heading{font-size:13.5vw;line-height:1.12}html[lang="zh-CN"] .assembly-copy>.display-heading{font-size:9.7vw;line-height:1.05}html[lang="zh-CN"] .opening-tagline{font-size:26px}html[lang="zh-CN"] .finale-tagline{font-size:29px}html[lang="zh-CN"] .project-link strong{font-size:22px}html[lang="zh-CN"] .dialog-copy>h2{font-size:30px}
}
@media(max-width:380px){.site-header{padding:0 17px}.main-nav{gap:11px}.header-actions{gap:4px}.header-source{display:none}.project-link strong{font-size:26px}.project-links{gap:15px}.assembly-copy>p{font-size:9px}.assembly-caption{font-size:6px}.gallery-intro{gap:15px}.story-title{font-size:11px}}
@media(max-height:720px) and (min-width:701px){.opening-topline{top:102px}.opening-brand{font-size:min(23vw,43svh);top:43%}.poster-front-one{width:16vw;max-width:24svh}.poster-front-two{width:14vw;max-width:22svh}.poster-back-one{width:12vw;max-width:18svh}.poster-back-two{width:9vw;max-width:15svh}.opening-copy{bottom:17%;max-width:290px}.opening-tagline{font-size:31px}.opening-description{font-size:10px}.opening-star{font-size:50px}.phone-scene-topline{top:100px}.assembly-copy{top:55%}.assembly-copy>.display-heading{font-size:15svh}.assembly-copy>p{margin-top:18px;font-size:11px}.assembly-legend{margin-top:20px;padding-top:13px}.assembly-figure{height:500px;top:57%;left:71%}.phone-composition{transform:translate(-50%,-50%) rotateX(calc(18deg * (1 - var(--assembly-progress)))) rotateY(calc(-13deg * (1 - var(--assembly-progress)))) rotateZ(calc(-9deg * (1 - var(--assembly-progress)))) scale(.67)}.assembly-orbit{width:350px;height:350px}.assembly-caption{bottom:0}}
@media(max-height:720px) and (max-width:700px){.opening-topline{top:85px}.opening-brand{top:31%}.poster-back-one{top:21%}.poster-front-one{top:40%}.poster-front-two{top:42%}.opening-copy{bottom:13%;width:80%}.opening-tagline{font-size:27px}.opening-description{font-size:9px;max-width:250px}.opening-star{top:19%;font-size:33px}.phone-scene-topline{top:83px}.assembly-copy{top:117px}.assembly-copy>.display-heading{font-size:11.5vw}.assembly-copy>p{font-size:9px}.assembly-legend{margin-top:10px;padding-top:9px}.assembly-figure{top:67%;height:340px}.phone-composition{transform:translate(-50%,-50%) rotateX(calc(14deg * (1 - var(--assembly-progress)))) rotateY(calc(-11deg * (1 - var(--assembly-progress)))) rotateZ(calc(-8deg * (1 - var(--assembly-progress)))) scale(.48)}.assembly-orbit{width:245px;height:245px}.assembly-caption{bottom:2px}html[lang="zh-CN"] .assembly-copy>.display-heading{font-size:8.5vw}}
/* Caption messages use separate fade windows so their lettering never overlaps. */
.caption-open{opacity:clamp(0,calc(1 - var(--copy-progress) * 2),1)}
.caption-complete{opacity:clamp(0,calc(var(--copy-progress) * 2 - 1),1)}
/* Short landscape screens get a readable, naturally scrolling assembled interface. */
@media(max-height:520px) and (min-width:701px){
  #app[zone]{height:auto!important;min-height:0}
  #app::part(shell){position:relative;top:auto;height:auto;min-height:0}
  #app .phone-canvas{--assembly-progress:1!important;--copy-progress:1!important;display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,1fr);align-items:center;column-gap:clamp(24px,4vw,64px);height:auto;min-height:0;padding:104px var(--gutter) 32px;overflow:visible}
  #app .phone-scene-topline{position:static;grid-column:1/-1;margin-bottom:24px}
  #app .assembly-copy{position:static;width:auto;transform:none}
  #app .assembly-copy>.display-heading{font-size:clamp(48px,7vw,76px);line-height:.85}
  #app .assembly-copy>p{max-width:330px;font-size:12px;line-height:1.65;margin-top:18px}
  #app .assembly-legend{gap:20px;margin-top:18px;padding-top:12px}
  #app .assembly-figure{position:relative;left:auto;top:auto;transform:none;width:100%;max-width:none;height:400px}
  #app .phone-composition{left:50%;top:46%;transform:translate(-50%,-50%) scale(.53)}
  #app .assembly-orbit{width:min(100%,320px);height:auto;aspect-ratio:1;top:46%}
  #app .assembly-caption{bottom:0;height:22px;font-size:8px;line-height:1.5}
  #app .layer-label{display:none}
  html[lang="zh-CN"] #app .assembly-copy>.display-heading{font-size:clamp(36px,5vw,54px);line-height:1.05}
}
/* Preserve each poster's 3:4 sprite cell instead of stretching it across the dialog. */
@media(max-width:700px){
  .dialog-layout{padding-top:20px;background:var(--sage)}
  .dialog-art{width:min(calc(100% - 44px),27svh);height:auto;min-height:0;aspect-ratio:3/4;margin:0 auto 20px}
  .dialog-copy{background:var(--paper)}
}
/* Leave room for the tagline on common laptop-height displays. */
@media(min-width:701px) and (min-height:721px) and (max-height:850px){.opening-copy{bottom:12%}.poster-front-two{top:24%}}
/* A complete static composition is also the accessible motion-reduction path. */
.static-fallback cv-scene[zone]{height:100svh!important}.static-fallback cv-scene[zone]::part(shell){position:relative;top:auto}.static-fallback .opening-canvas{--brand-progress:0!important;--poster-progress:0!important;--copy-progress:0!important}.static-fallback .phone-canvas{--assembly-progress:1!important;--copy-progress:1!important}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}cv-scene[zone]{height:100svh!important}cv-scene[zone]::part(shell){position:relative;top:auto}.opening-canvas{--brand-progress:0!important;--poster-progress:0!important;--copy-progress:0!important}.phone-canvas{--assembly-progress:1!important;--copy-progress:1!important}.wall-item::part(layer){transform:none!important}.story-card:hover .story-art{transform:none}}