@charset "UTF-8";
:root{--bg:#f6f7f8;--ink:#202228;--muted:#737780;--line:#dddfe3;--accent:#c6f76b;--surface:#fff;--radius:15px;--ease:cubic-bezier(.22,1,.36,1);font-family:Arial,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;-webkit-font-smoothing:antialiased}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer;color:inherit}button{touch-action:manipulation}a{color:inherit;text-decoration:none}button:disabled{cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #7d54ee;outline-offset:5px}button:focus:not(:focus-visible){outline:none}button{border:0}h1,h2,h3,p{margin:0}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}::selection{background:var(--accent);color:var(--ink)}.skip-link{position:fixed;z-index:100;top:-100px;left:20px;background:var(--ink);color:white;padding:15px;border-radius:8px}.skip-link:focus{top:15px}.site-header{max-width:1600px;margin:auto;height:86px;padding:0 4.5%;display:flex;align-items:center;justify-content:space-between;gap:30px;position:sticky;top:0;z-index:50;background:#f6f7f8ec;backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;font-size:21px;font-weight:800;letter-spacing:-.7px;white-space:nowrap;gap:1px}.brand-light{font-weight:400}.brand sup{font-size:12px;align-self:flex-start;margin-top:4px;margin-left:3px}.brand-mark{font-family:Arial,sans-serif;font-weight:900;font-size:29px;letter-spacing:-4px;padding-right:4px;background:var(--ink);color:var(--accent);height:35px;width:35px;display:flex;justify-content:center;align-items:center;border-radius:9px;margin-right:11px;line-height:1}.site-header nav{display:flex;gap:34px;font-size:14px}.site-header nav a{color:#5f646d;padding:13px 0;position:relative;transition:color .2s}.site-header nav a::after{content:"";height:2px;position:absolute;bottom:4px;left:0;right:0;background:var(--ink);transform:scaleX(0);transition:transform .3s;transform-origin:left}.site-header nav a:hover,.site-header nav a.active{color:var(--ink)}.site-header nav a.active::after{transform:scaleX(1)}.motion-toggle{font-size:13px;display:flex;gap:9px;align-items:center;padding:10px 14px;border:1px solid #d6d9df;border-radius:30px;background:transparent;white-space:nowrap;transition:background .2s}.motion-toggle:hover{background:white}.pause-icon{font-weight:700;font-size:16px;width:14px;display:inline-block;text-align:center}.section{width:min(1344px,91%);margin:0 auto}.first-section{padding-top:57px}.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:25px;margin-bottom:61px}.eyebrow{font-family:"SFMono-Regular",Consolas,monospace;font-size:12px;letter-spacing:1.2px;line-height:1.5;font-weight:500}.intro .eyebrow{color:#6e717b;margin-bottom:20px}h1{font-size:clamp(36px,3.9vw,59px);font-weight:650;letter-spacing:-2.4px;line-height:1.3}h1>span{color:#787d88}.intro-copy{font-size:15px;line-height:1.9;color:#737780;padding-bottom:6px;flex-shrink:0}.section-label{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px}.section-label h2{font-size:21px;font-weight:600;letter-spacing:-.45px}.section-label h2>span{display:inline-block;font-family:"SFMono-Regular",Consolas,monospace;font-size:13px;font-weight:400;color:#969aa1;margin-right:14px;vertical-align:2px;letter-spacing:0}.section-label p{font-size:14px;color:var(--muted)}.style-gallery{display:grid;grid-template-columns:1.23fr 1fr 1fr;gap:22px}.stage{height:365px;border-radius:var(--radius);position:relative;overflow:hidden;isolation:isolate}.stage-caption{position:absolute;top:25px;left:25px;font-family:"SFMono-Regular",Consolas,monospace;font-size:12px;letter-spacing:1.2px;z-index:5}.stage-corner{position:absolute;top:22px;right:25px;font-size:23px;z-index:2;opacity:.8}.stage-bottom{position:absolute;bottom:22px;left:25px;right:25px;display:flex;align-items:center;justify-content:space-between;gap:6px;z-index:5}.interaction-hint{font-size:12px}.exhibit-caption{display:flex;justify-content:space-between;align-items:center;padding:20px 2px 0;gap:5px}.exhibit-caption h3{font-size:17px;font-weight:550;margin-bottom:7px}.exhibit-caption p{font-size:12px;letter-spacing:.2px;color:var(--muted)}.tag{font-size:12px;padding:6px 9px;border:1px solid #d8dbe0;border-radius:5px;color:#636872;white-space:nowrap}
.glass-stage{background:#838df2;color:#fff;display:flex;justify-content:center;align-items:center;transition:background .8s}.ambient{border-radius:50%;filter:blur(36px);position:absolute;pointer-events:none;animation:ambient-float 12s ease-in-out infinite alternate}.ambient-a{background:#36d3fc;width:260px;height:260px;top:-100px;left:-80px}.ambient-b{background:#fa9dea;width:250px;height:260px;bottom:-100px;right:-80px;animation-delay:-4s}.ambient-c{background:#584de0;width:200px;height:220px;bottom:-90px;left:-100px;animation-delay:-8s}.glass-stage[data-color=peach]{background:#e27f75}.glass-stage[data-color=peach] .ambient-a{background:#ffd06b}.glass-stage[data-color=peach] .ambient-b{background:#d53e77}.glass-stage[data-color=peach] .ambient-c{background:#efcaa4}.glass-stage[data-color=mint]{background:#56b8aa}.glass-stage[data-color=mint] .ambient-a{background:#adfbb6}.glass-stage[data-color=mint] .ambient-b{background:#228896}.glass-stage[data-color=mint] .ambient-c{background:#76dbbf}.glass-tilt{width:78%;max-width:330px;height:205px;perspective:1000px;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s ease-out}.glass-card{width:100%;height:100%;padding:0;background:none;position:relative;transform-style:preserve-3d;transition:transform .85s var(--ease);text-align:left;color:white}.glass-card.flipped{transform:rotateY(180deg)}.glass-face{position:absolute;inset:0;border:1px solid #ffffff60;border-radius:15px;padding:23px;background:linear-gradient(130deg,#ffffff3a,#ffffff08 70%);box-shadow:0 15px 35px #1c20752b,inset 0 1px 0 #ffffff40;backdrop-filter:blur(20px);backface-visibility:hidden;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.glass-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2;font-size:20px;letter-spacing:1.5px;font-weight:600}.glass-top>span:last-child{font-size:12px;letter-spacing:.6px;font-weight:400}.tiny-plus{font-size:16px;vertical-align:top;margin-left:4px}.glass-rings{position:absolute;left:40px;top:55px;right:20px;height:120px}.glass-rings i{position:absolute;left:20%;top:0;width:125px;height:125px;border:1px solid #ffffff6b;border-radius:100%}.glass-rings i:nth-child(2){left:33%;top:-8px}.glass-rings i:nth-child(3){left:46%;top:-16px}.glass-bottom{display:flex;align-items:flex-end;justify-content:space-between;z-index:2;font-size:13px;line-height:1.45;letter-spacing:.1px}.glass-arrow{font-size:26px;font-weight:300}.glass-back{transform:rotateY(180deg)}.glass-back>.glass-top{font-size:12px;font-weight:400;letter-spacing:1px}.glass-back-title{font-size:24px;line-height:1.5;font-weight:500}.glass-back-copy{font-size:12px;letter-spacing:2px;opacity:.85}.swatches{display:flex;gap:2px}.swatch{height:30px;width:25px;background:transparent;position:relative;padding:0}.swatch::before{content:"";width:12px;height:12px;border-radius:50%;display:block;margin:auto;box-shadow:0 0 0 1px #ffffff66}.swatch.violet::before{background:#acaafb}.swatch.peach::before{background:#ffc9a7}.swatch.mint::before{background:#acf1ce}.swatch.selected::before{box-shadow:0 0 0 3px #868ab533,0 0 0 4px white}.swiss-stage{width:100%;background:#ff6748;color:#231f20;text-align:left;padding:0;display:block;transition:background .5s}.swiss-number{position:absolute;top:24px;right:24px;font-size:13px;font-family:monospace}.swiss-layout{position:absolute;inset:58px 25px 66px;display:block}.swiss-type{position:absolute;top:-7px;left:0;font-size:clamp(86px,9.2vw,145px);letter-spacing:-12px;line-height:1.15;font-weight:600;transition:transform .85s var(--ease)}.swiss-period{color:#ffe8d7}.swiss-disc{position:absolute;bottom:0;left:0;border-radius:50%;width:70px;height:70px;background:#232021;transition:transform .85s var(--ease),border-radius .85s}.swiss-small{position:absolute;right:0;bottom:0;font-size:13px;line-height:1.18;letter-spacing:-.2px;font-weight:700;transition:transform .85s var(--ease)}.swiss-rule{position:absolute;left:0;right:0;top:65%;border-top:1px solid #23202160;transition:transform .85s var(--ease)}.swiss-stage .stage-bottom{font-size:12px;border-top:1px solid #23202160;padding-top:13px;bottom:18px}.round-arrow{font-size:21px}.swiss-stage.recomposed{background:#c6f76b}.swiss-stage.recomposed .swiss-type{transform:translateY(65px) scale(.87) translateX(6%)}.swiss-stage.recomposed .swiss-disc{transform:translateY(-150px) translateX(190%);border-radius:10px}.swiss-stage.recomposed .swiss-small{transform:translateY(-147px) translateX(-170%)}.swiss-stage.recomposed .swiss-rule{transform:translateY(-70px)}
.soft-stage{background:#e9ebef;color:#646b75;display:flex;align-items:center;flex-direction:column}.soft-caption{font-size:12px;letter-spacing:2px;margin-top:70px;color:#858c96}.dial-track{width:160px;height:160px;display:flex;align-items:center;justify-content:center;position:relative;margin:15px auto 12px}.dial-track::before{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from -1deg,#bac0c9 0deg 1deg,transparent 1deg 15deg);mask:radial-gradient(circle,transparent 64%,#000 65%,#000 68%,transparent 69%)}.soft-dial{height:123px;width:123px;border-radius:50%;background:linear-gradient(135deg,#f0f2f6,#e3e6ec);box-shadow:10px 10px 23px #bdc3ce,-10px -10px 23px #fff,inset 0 0 0 1px #ffffff80;position:relative;display:flex;align-items:center;justify-content:center;transition:box-shadow .15s}.dial-center svg{width:29px;height:29px;color:#7b838f}.dial-pointer{position:absolute;inset:8px;transform:rotate(135deg)}.dial-pointer::after{content:"";position:absolute;top:6px;left:calc(50% - 2px);width:4px;height:12px;background:#9099a6;border-radius:4px}.light-control{width:59%;max-width:200px}.light-control label{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:10px}.light-control output{font-family:monospace;font-size:12px;font-variant-numeric:tabular-nums}.light-control input{accent-color:#818b9b;width:100%;height:5px;display:block;cursor:ew-resize}.small-star{font-size:25px;font-weight:300}.soft-stage .stage-bottom{color:#858c96}.micro-section{padding-top:79px;padding-bottom:81px}.micro-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.micro-stage{height:238px;background:white;border:1px solid #e1e4e9;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.demo-index{position:absolute;left:19px;top:18px;font-size:12px;letter-spacing:1px;font-family:monospace;color:#9398a2}.demo-hint{position:absolute;bottom:20px;left:10px;right:10px;text-align:center;font-size:12px;color:#969ba4}.micro-caption{padding:16px 2px 0;display:flex;flex-direction:column;gap:5px}.micro-caption h3{font-size:15px;font-weight:550}.micro-caption>span{font-size:12px;color:var(--muted)}.magnetic-stage{background:radial-gradient(circle at center,#f0f3f7 0,white 70%)}.magnet-zone{width:100%;height:145px;display:flex;align-items:center;justify-content:center}.magnet-button{position:relative;display:flex;align-items:center;gap:22px;background:var(--ink);color:white;border-radius:50px;padding:18px 22px;font-size:14px;box-shadow:0 6px 12px #20222812;transition:transform .45s var(--ease),box-shadow .3s;overflow:hidden;will-change:transform}.magnet-button:hover{box-shadow:0 12px 25px #20222822}.diagonal-arrow{font-size:20px}.magnet-button.pulse{animation:button-pulse .5s var(--ease)}.magnet-button .ripple{position:absolute;width:15px;height:15px;left:50%;top:50%;border-radius:50%;background:#c6f76b50;pointer-events:none;animation:ripple .75s var(--ease) forwards}.tabs-demo{width:84%;display:flex;flex-direction:column;align-items:center;gap:20px;padding-top:16px}.segmented{width:100%;display:flex;background:#f1f2f5;border:1px solid #e8eaee;border-radius:9px;padding:4px;position:relative}.segmented button{background:transparent;flex:1;height:34px;z-index:1;position:relative;color:#8a8e98;font-size:12px;min-width:0;padding:3px}.segmented button[aria-selected=true]{color:#333741;font-weight:600}.segment-indicator{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/3);border-radius:6px;background:white;box-shadow:0 2px 5px #0000000c;transition:transform .5s var(--ease)}.tab-preview{display:flex;align-items:center;gap:7px;font-size:12px;color:#7f8692;min-height:22px}.mode-symbol{font-size:19px;color:#d19b45}.tab-preview.changed{animation:subtle-in .5s var(--ease)}.like-wrap{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;padding-top:12px}.like-button{position:relative;width:67px;height:67px;display:flex;align-items:center;justify-content:center;background:#f9f2f4;border-radius:50%;color:#c0a4ad;transition:background .3s,transform .3s}.like-button svg{width:29px;height:29px;stroke-width:1.6;transition:fill .2s,color .2s;overflow:visible;fill:transparent}.like-button:hover{transform:scale(1.07)}.like-button[aria-pressed=true]{background:#fff0f3;color:#f75a7f}.like-button[aria-pressed=true] svg{fill:currentColor;animation:heart-pop .55s var(--ease)}.like-label{font-size:12px;color:#9196a0}.like-particles{position:absolute;inset:0;pointer-events:none}.like-particles i{position:absolute;left:50%;top:50%;width:5px;height:5px;background:#f75a7f;opacity:0;border-radius:50%;--angle:0deg}.like-particles i:nth-child(2){--angle:60deg;background:#ffb852}.like-particles i:nth-child(3){--angle:120deg}.like-particles i:nth-child(4){--angle:180deg;background:#e5a3e9}.like-particles i:nth-child(5){--angle:240deg}.like-particles i:nth-child(6){--angle:300deg;background:#ffb852}.like-button[aria-pressed=true] .like-particles i{animation:burst .7s ease-out forwards}.progress-demo{display:flex;align-items:center;flex-direction:column;gap:13px;width:83%;padding-top:15px}.progress-button{border-radius:9px;background:#edf2e7;color:#506739;min-height:48px;width:100%;padding:0 12px;position:relative;isolation:isolate;overflow:hidden;font-size:12px}.progress-content{display:flex;align-items:center;justify-content:center;gap:7px;position:relative;z-index:2}.progress-content svg{width:17px;height:17px}.progress-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:#c6f76b;transition:width .3s linear}.progress-button.done .progress-fill{width:100%}.progress-button.done{animation:button-pulse .5s var(--ease)}.progress-status{font-size:12px;color:#8b929d;min-height:16px}
.type-section{background:#1e2025;color:#f8f9fa;position:relative;overflow:hidden}.type-inner{padding-top:46px;padding-bottom:34px}.section-label.light{padding-bottom:26px;border-bottom:1px solid #ffffff1c;margin-bottom:26px}.section-label.light h2{font-weight:500}.section-label.light h2>span{color:#868b96}.section-label.light p{color:#9296a0}.type-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.type-choices{display:flex;gap:7px}.type-choices button{font-size:13px;background:transparent;color:#a5a9b2;padding:9px 16px;border-radius:25px;transition:background .2s,color .2s;border:1px solid transparent}.type-choices button.active{background:#c6f76b;color:#202228}.type-choices button:not(.active):hover{border-color:#545860;color:#fff}.replay-button{display:flex;align-items:center;gap:8px;color:#c7cbd4;font-size:12px;background:transparent;padding:10px}.replay-button>span{font-size:23px;line-height:1}.replay-button:hover{color:var(--accent)}.type-canvas{height:435px;position:relative;display:flex;align-items:center;justify-content:center;border:1px solid #ffffff1c;border-radius:10px;overflow:hidden}.type-grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse,#000,transparent 75%)}.type-coordinate{font-size:12px;color:#6b727e;position:absolute;font-family:monospace;letter-spacing:1px;z-index:2}.top-left{top:20px;left:22px}.top-right{top:20px;right:22px}.bottom-left{bottom:20px;left:22px}.bottom-right{bottom:20px;right:22px}.kinetic-type{display:flex;flex-direction:column;align-items:center;font-weight:600;letter-spacing:-8px;font-size:clamp(70px,9.6vw,142px);line-height:.95;position:relative;z-index:1;padding-bottom:11px;width:100%}.type-line{display:block;white-space:pre}.type-line.accent{color:var(--accent)}.type-dot{color:var(--accent)}.kinetic-type .char{display:inline-block;min-width:.02em}.kinetic-type.revealing .char{animation:type-reveal .8s var(--ease) both;animation-delay:calc(var(--i)*55ms)}.kinetic-type.shimmer .type-line{background:linear-gradient(100deg,#70767e 0%,#70767e 26%,#fff 42%,#fff 48%,#70767e 64%,#70767e 100%);background-size:260% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:type-shimmer 2.6s ease-in-out both}.kinetic-type.shimmer .type-line.accent{background-image:linear-gradient(100deg,#6f8c3c 0%,#6f8c3c 26%,#e5ffc3 42%,#e5ffc3 48%,#6f8c3c 64%,#6f8c3c 100%);animation-delay:.12s}.type-footnote{display:flex;justify-content:space-between;gap:20px;padding-top:24px;font-size:12px;color:#858c97}.type-footnote>span:first-child{color:#b4bac5}
.scroll-section{padding-top:77px;padding-bottom:72px}.scroll-story{display:grid;grid-template-columns:1.3fr 1fr;gap:10%;position:relative}.story-visual{position:sticky;top:125px;align-self:start;padding-top:25px}.story-stage{height:447px;background:#e9eaf0;border-radius:15px;position:relative;overflow:hidden;--progress:0;--spread:0;--float:0;--lift:0}.story-stage-top{position:absolute;top:25px;left:27px;right:27px;display:flex;justify-content:space-between;font-size:12px;font-family:monospace;letter-spacing:1px;color:#7b808c;z-index:10}.story-stage-bottom{position:absolute;bottom:25px;left:27px;right:27px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:12px;color:#6f7682;z-index:10}.story-progress{width:100px;height:3px;border-radius:4px;background:#ccd0d9;overflow:hidden}.story-progress span{height:100%;width:0;display:block;background:#6a50d2}.story-art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;perspective:1000px}.story-sheet{width:55%;height:57%;position:absolute;border-radius:13px;padding:22px;display:flex;flex-direction:column;box-shadow:0 12px 25px #25263512;transform-style:preserve-3d;transition:background .8s;color:#202228}.story-sheet>span:first-child{font-family:monospace;font-size:12px;opacity:.6}.story-sheet strong{font-size:clamp(24px,3.3vw,46px);font-weight:500;letter-spacing:-1.3px;margin-top:auto;white-space:nowrap}.sheet-back{background:#c6f76b;transform:translate(calc(25px + var(--spread)*.6px),calc(-22px - var(--spread)*.3px)) rotate(calc(8deg + var(--spread)*.09deg))}.sheet-middle{background:#a59aed;transform:translate(calc(11px - var(--spread)*.6px),calc(-10px - var(--spread)*.2px)) rotate(calc(-4deg - var(--spread)*.1deg))}.sheet-front{background:#fafbfc;transform:translateY(calc(var(--lift)*-1px)) rotate(calc(var(--spread)*.035deg));box-shadow:0 16px 35px #2726381c}.sheet-front i{font-size:12px;font-style:normal;color:#8c9099;margin-top:8px}.sheet-symbol{position:absolute;right:25px;top:22px;font-size:28px}.story-stage.finished .sheet-front{background:#22242a;color:white}.story-stage.finished .sheet-symbol{color:var(--accent)}.story-note{font-size:12px;color:#969aa3;display:block;padding-top:17px;text-align:center}.story-step{height:310px;display:flex;align-items:flex-start;justify-content:center;flex-direction:column;opacity:.35;transition:opacity .5s}.story-step.is-active{opacity:1}.step-number{font-family:monospace;font-size:12px;letter-spacing:1.2px;color:#969aa3;margin-bottom:22px}.story-step h3{font-size:36px;line-height:1.3;letter-spacing:-1px;font-weight:550;margin-bottom:19px}.story-step p{font-size:15px;line-height:1.9;color:#808590}.step-pill{font-size:12px;border:1px solid #dddfe5;border-radius:20px;padding:6px 10px;margin-top:21px;color:#858b95}
.transition-section{padding-bottom:77px}.transition-lab{display:grid;grid-template-columns:.8fr 1.55fr;gap:70px;padding:40px;background:white;border:1px solid #e1e4e9;border-radius:var(--radius)}.transition-controls{padding:7px 0;display:flex;flex-direction:column;align-items:stretch;justify-content:center}.transition-controls>.eyebrow{font-size:12px;color:#979ca5;letter-spacing:1px;margin-bottom:20px}.transition-controls>h3{font-size:36px;letter-spacing:-1px;line-height:1.45;font-weight:550;margin-bottom:30px}.transition-options{display:flex;flex-direction:column;gap:8px}.transition-options button{padding:14px 13px;display:flex;justify-content:space-between;align-items:center;background:transparent;border:1px solid transparent;border-radius:7px;color:#8b929e;transition:background .3s,color .3s;font-size:14px}.transition-options button strong{font-family:monospace;font-weight:400;font-size:12px;margin-right:15px;color:#939ca7}.transition-options button.active{background:#f0f2f5;color:#262a33}.transition-options button:hover{background:#f4f5f7}.option-icon{opacity:0;transform:translateX(-7px);transition:opacity .3s,transform .3s}.transition-options button.active .option-icon{opacity:1;transform:translateX(0)}.transition-controls>p{font-size:12px;line-height:1.7;color:#8e949e;margin-top:20px}.transition-view{min-width:0}.browser-bar{height:39px;background:#edeff3;display:flex;align-items:center;justify-content:space-between;padding:0 15px;border-radius:10px 10px 0 0;color:#8a929e;font-family:monospace;font-size:12px}.browser-dots{display:flex;gap:5px}.browser-dots i{background:#c9cdd4;display:block;width:6px;height:6px;border-radius:50%}.transition-screen{height:345px;position:relative;overflow:hidden;background:#202329}.scene{position:absolute;inset:0;padding:25px 28px;display:flex;flex-direction:column;justify-content:space-between;isolation:isolate;overflow:hidden}.scene-dark{background:#202329;color:#f4f6f8}.scene-lime{background:#c6f76b;color:#202329}.scene-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.9px;font-family:monospace;gap:10px}.scene-top span:first-child{opacity:.6}.scene-center{padding:15px 0 9px}.scene-small{font-size:12px;opacity:.5;display:block;margin-bottom:15px}.scene-center strong{font-size:clamp(35px,4.2vw,63px);letter-spacing:-3px;font-weight:500;line-height:1;display:block}.scene-dark .scene-center strong>span{color:#bdc3d0}.scene-lime .scene-center strong>span{color:#5f8130}.scene-bottom{display:flex;justify-content:space-between;align-items:center;font-size:12px}.scene-bottom>span:first-child{opacity:.65}.scene-asterisk{font-size:50px;line-height:1;color:#c6f76b}.scene-lime .scene-asterisk{color:#202329}.transition-curtain{position:absolute;inset:0;z-index:4;background:#b5a6f1;transform:translateY(101%);pointer-events:none}.transition-action{padding:17px 0 0;display:flex;align-items:center;justify-content:space-between;gap:10px}.transition-action>span{font-size:12px;color:#9298a2}.transition-action>button{padding:10px 15px;background:#24272d;color:white;border-radius:6px;font-size:12px;display:flex;gap:15px;align-items:center;transition:background .2s}.transition-action>button:hover{background:#464b55}.scene.incoming{z-index:3}.scene.incoming.circle-enter{animation:circle-reveal .85s var(--ease) both}.scene.incoming.slide-enter{animation:slide-enter .75s var(--ease) both}.scene.slide-exit{animation:slide-exit .75s var(--ease) both}.transition-curtain.playing{animation:curtain-reveal 1s var(--ease) both}
.site-footer{width:min(1344px,91%);margin:auto;display:flex;align-items:center;justify-content:space-between;padding:30px 0 40px;border-top:1px solid var(--line);gap:20px}.site-footer .brand{font-size:15px}.site-footer .brand-mark{height:26px;width:26px;font-size:23px;border-radius:7px;margin-right:7px}.site-footer p{font-size:12px;color:#969ba4}.back-top{display:flex;align-items:center;gap:20px;font-size:12px;color:#717885}.back-top:hover{color:#202228}.reading-progress{position:fixed;top:0;left:0;right:0;z-index:70;height:2px;pointer-events:none}.reading-progress>span{display:block;width:0;height:100%;background:#929c72}
@keyframes ambient-float{to{transform:translate(35px,25px) scale(1.15)}}@keyframes button-pulse{0%{scale:1}35%{scale:.91}70%{scale:1.05}100%{scale:1}}@keyframes ripple{from{transform:translate(-50%,-50%) scale(0);opacity:.9}to{transform:translate(-50%,-50%) scale(23);opacity:0}}@keyframes subtle-in{from{transform:translateY(5px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes heart-pop{0%{transform:scale(.8)}40%{transform:scale(1.28)}70%{transform:scale(.9)}100%{transform:scale(1)}}@keyframes burst{0%{opacity:1;transform:rotate(var(--angle)) translateX(17px) scale(.4)}50%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateX(56px) scale(.1)}}@keyframes type-reveal{from{transform:translateY(45px) rotate(6deg);opacity:0;filter:blur(7px)}to{transform:translateY(0) rotate(0);opacity:1;filter:blur(0)}}@keyframes type-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}@keyframes circle-reveal{from{clip-path:circle(0% at 88% 86%)}to{clip-path:circle(145% at 88% 86%)}}@keyframes slide-enter{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slide-exit{from{transform:translateX(0)}to{transform:translateX(-25%);opacity:.5}}@keyframes curtain-reveal{0%{transform:translateY(101%)}45%,55%{transform:translateY(0)}100%{transform:translateY(-101%)}}
body.motion-paused *,body.motion-paused *::before,body.motion-paused *::after{animation-play-state:paused!important;transition-duration:.001ms!important;scroll-behavior:auto!important}body.motion-paused .glass-tilt{transform:none!important}body.motion-paused .magnet-button{transform:none!important}body.motion-paused .story-sheet{transform:none!important}body.motion-paused .sheet-middle{transform:translate(-15px,-12px) rotate(-6deg)!important}body.motion-paused .sheet-back{transform:translate(20px,-20px) rotate(8deg)!important}body.motion-paused .kinetic-type .char{opacity:1!important;transform:none!important;filter:none!important}body.motion-paused .kinetic-type.shimmer .type-line{background:none;color:#f8f9fa}body.motion-paused .kinetic-type.shimmer .type-line.accent{color:var(--accent)}
@media(min-width:1600px){.site-header{padding:0 72px}}@media(max-width:1150px){.site-header nav{gap:22px}.style-gallery{gap:16px;grid-template-columns:1.15fr 1fr 1fr}.stage{height:335px}.glass-tilt{height:180px;width:81%}.glass-face{padding:19px}.glass-rings{left:15px;top:37px;scale:.85}.stage-caption{left:20px;top:23px;font-size:12px;letter-spacing:.7px}.stage-bottom{left:20px;right:20px;bottom:19px}.interaction-hint{font-size:12px}.soft-caption{margin-top:62px}.dial-track{margin-top:10px;margin-bottom:8px}.exhibit-caption{align-items:flex-start}.tag{font-size:12px;padding:5px 6px}.micro-grid{gap:14px}.micro-stage{height:224px}.magnet-button{gap:14px;padding:17px 18px;font-size:13px}.tabs-demo{width:87%}.progress-demo{width:85%}.progress-button{padding:0 8px;font-size:12px}.type-canvas{height:390px}.transition-lab{gap:40px;padding:30px}.transition-controls>h3{font-size:32px}.scene-center strong{font-size:56px}.scroll-story{gap:8%}.story-stage{height:410px}.story-sheet{width:59%;height:58%}.swiss-stage.recomposed .swiss-disc{transform:translateY(-125px) translateX(140%)}.swiss-stage.recomposed .swiss-small{transform:translateY(-125px) translateX(-140%)}.swiss-stage.recomposed .swiss-type{transform:translateY(63px) scale(.85) translateX(4%)}.swiss-stage.recomposed .swiss-rule{transform:translateY(-60px)}}
@media(max-width:900px){.site-header{padding:0 4%;height:76px;gap:16px}.brand{font-size:18px}.brand-mark{height:30px;width:30px;font-size:26px;margin-right:8px}.site-header nav{gap:16px;font-size:12px}.motion-toggle{font-size:12px;padding:9px 11px;gap:6px}.section{width:92%}.first-section{padding-top:40px}.intro{margin-bottom:42px;gap:16px}.intro-copy{font-size:13px}.intro .eyebrow{font-size:12px;margin-bottom:14px}h1{font-size:39px;letter-spacing:-2px}.section-label h2{font-size:19px}.section-label p{font-size:12px}.style-gallery{grid-template-columns:1fr 1fr;gap:28px 18px}.glass-exhibit{grid-column:1/-1}.glass-stage{height:335px}.glass-tilt{max-width:340px;height:215px;width:65%}.glass-face{padding:25px}.glass-rings{top:62px;left:40px;scale:1}.ambient-a{width:420px;height:350px;top:-60px}.ambient-b{width:400px;height:310px;bottom:-100px}.ambient-c{width:230px;height:270px;left:35%;bottom:-190px}.swiss-type{font-size:125px}.swiss-stage.recomposed .swiss-disc{transform:translateY(-125px) translateX(230%)}.swiss-stage.recomposed .swiss-small{transform:translateY(-125px) translateX(-210%)}.swiss-stage.recomposed .swiss-type{transform:translateY(60px) scale(.85) translateX(12%)}.tag{font-size:12px}.micro-grid{grid-template-columns:1fr 1fr;gap:27px 18px}.micro-stage{height:240px}.magnet-button{font-size:14px;padding:18px 24px;gap:24px}.tabs-demo{width:78%;gap:24px}.segmented button{font-size:13px;height:35px}.tab-preview{font-size:12px}.progress-demo{width:76%}.progress-button{font-size:13px}.like-label,.progress-status,.demo-hint{font-size:12px}.micro-section{padding-top:64px;padding-bottom:65px}.kinetic-type{font-size:110px;letter-spacing:-6px}.type-canvas{height:380px}.scroll-section{padding-top:62px;padding-bottom:60px}.scroll-story{gap:6%;grid-template-columns:1.2fr 1fr}.story-stage{height:365px}.story-visual{top:108px}.story-stage-top,.story-stage-bottom{left:20px;right:20px}.story-stage-top{font-size:12px}.story-sheet{padding:18px;width:65%;height:56%}.story-sheet strong{font-size:32px;letter-spacing:-1px}.story-sheet i{font-size:12px}.story-step h3{font-size:30px}.story-step p{font-size:14px}.story-step{height:295px}.transition-lab{grid-template-columns:.85fr 1.2fr;gap:25px;padding:25px}.transition-controls>h3{font-size:29px;margin-bottom:24px}.transition-controls>.eyebrow{font-size:12px;letter-spacing:.5px}.transition-options button{font-size:12px;padding:13px 9px}.transition-options button strong{margin-right:8px}.scene{padding:22px}.scene-top{font-size:12px;letter-spacing:.3px}.scene-center strong{font-size:47px;letter-spacing:-2px}.scene-small{font-size:12px}.scene-bottom{font-size:12px}.scene-asterisk{font-size:39px}.transition-screen{height:335px}.transition-action{align-items:flex-start;gap:8px}.transition-action>span{font-size:12px;margin-top:11px}.transition-action>button{white-space:nowrap;font-size:12px;padding:10px;gap:8px}}
@media(max-width:620px){html{scroll-padding-top:125px}.site-header{height:108px;flex-wrap:wrap;align-content:flex-start;padding:15px 5% 0;gap:0;justify-content:space-between}.site-header>.brand{height:31px;font-size:18px}.site-header>.brand sup{margin-top:3px}.site-header nav{order:3;width:100%;justify-content:space-between;gap:10px;margin-top:11px;font-size:12px;overflow:auto}.site-header nav a{white-space:nowrap;padding:11px 0 13px}.site-header nav a::after{bottom:5px}.motion-toggle{height:32px;font-size:12px;padding:6px 11px}.section{width:90%}.first-section{padding-top:35px}.intro{display:block;margin-bottom:34px}.intro .eyebrow{font-size:12px;letter-spacing:.8px;margin-bottom:14px}h1{font-size:clamp(28px,8vw,45px);letter-spacing:-1.6px;line-height:1.45}.intro-copy{font-size:13px;line-height:1.7;margin-top:16px;padding:0}.intro-copy br{display:none}.intro-copy br::after{content:" "}.section-label{align-items:flex-start;gap:10px;margin-bottom:20px}.section-label h2{font-size:18px;line-height:1.5}.section-label h2>span{font-size:12px;margin-right:9px;vertical-align:1px}.section-label p{display:none}.style-gallery{display:flex;flex-direction:column;gap:31px}.stage{height:355px}.glass-tilt{width:80%;height:210px}.glass-face{padding:24px}.glass-rings{left:30px;scale:.95}.stage-caption{font-size:12px;left:24px;top:25px}.stage-bottom{left:24px;right:24px;bottom:23px}.interaction-hint{font-size:12px}.ambient-a{width:260px;height:290px;left:-110px}.ambient-b{width:290px;height:280px;right:-100px}.ambient-c{bottom:-190px;left:-20px}.swiss-layout{inset:60px 25px 66px}.swiss-type{font-size:135px}.swiss-stage.recomposed .swiss-disc{transform:translateY(-150px) translateX(225%)}.swiss-stage.recomposed .swiss-small{transform:translateY(-147px) translateX(-240%)}.swiss-stage.recomposed .swiss-type{transform:translateY(65px) scale(.87) translateX(12%)}.swiss-stage.recomposed .swiss-rule{transform:translateY(-70px)}.soft-caption{margin-top:66px}.dial-track{margin-top:12px;margin-bottom:13px}.exhibit-caption{padding-top:15px;align-items:center}.exhibit-caption h3{font-size:17px;margin-bottom:5px}.exhibit-caption p{font-size:12px}.tag{font-size:12px;padding:6px 9px}.micro-section{padding-top:57px;padding-bottom:54px}.micro-grid{gap:26px 12px}.micro-stage{height:220px;border-radius:12px}.demo-index{font-size:12px;left:12px;top:15px;letter-spacing:.5px}.demo-hint{font-size:12px;left:8px;right:8px;line-height:1.5;bottom:16px;min-height:27px;display:flex;align-items:flex-end;justify-content:center}.magnet-button{font-size:12px;padding:14px 15px;gap:10px}.diagonal-arrow{font-size:17px}.magnet-zone{height:150px}.tabs-demo{width:89%;gap:17px;padding-top:0}.segmented{padding:3px;border-radius:7px}.segmented button{font-size:12px;height:31px}.segment-indicator{top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/3);border-radius:5px}.tab-preview{font-size:12px;gap:5px;flex-direction:column;line-height:1.4}.mode-symbol{font-size:18px}.like-wrap{padding-top:0;gap:10px}.like-button{width:57px;height:57px}.like-button svg{width:26px;height:26px}.like-label{font-size:12px}.progress-demo{width:87%;padding-top:4px;gap:13px}.progress-button{font-size:12px;min-height:42px;padding:0 5px;border-radius:7px}.progress-content{gap:4px}.progress-content svg{width:14px;height:14px}.progress-status{font-size:12px;text-align:center;line-height:1.5}.micro-caption h3{font-size:13px}.micro-caption>span{font-size:12px}.micro-caption{padding-top:12px;gap:5px}.type-inner{padding-top:33px;padding-bottom:28px}.section-label.light{padding-bottom:19px;margin-bottom:20px}.type-toolbar{align-items:center;gap:8px}.type-choices{gap:3px;flex-wrap:wrap}.type-choices button{font-size:12px;padding:8px 10px;white-space:nowrap}.replay-button{font-size:12px;gap:3px;padding:5px 0;white-space:nowrap}.replay-button>span{font-size:20px}.type-canvas{height:318px}.type-coordinate{font-size:12px;letter-spacing:.3px}.top-left{top:17px;left:16px}.top-right{top:17px;right:16px}.bottom-left{bottom:18px;left:16px}.bottom-right{display:none}.kinetic-type{font-size:clamp(69px,19.5vw,108px);letter-spacing:-4px;line-height:1.02;padding-bottom:5px}.type-footnote{padding-top:18px;font-size:12px;display:block;line-height:1.6}.type-footnote>span:last-child{display:none}.scroll-section{padding-top:52px;padding-bottom:57px}.scroll-story{display:block}.story-visual{top:108px;padding-top:10px;z-index:3;pointer-events:none;background:linear-gradient(var(--bg) 94%,transparent);padding-bottom:22px}.story-stage{height:330px}.story-note{font-size:12px;padding-top:11px}.story-sheet{width:56%;height:58%;padding:19px}.story-sheet strong{font-size:34px}.story-sheet i{font-size:12px}.story-stage-top{top:22px;left:23px;right:23px;font-size:12px}.story-stage-bottom{bottom:20px;left:23px;right:23px;font-size:12px}.story-steps{position:relative;z-index:2;padding-left:24px}.story-step{height:270px;padding-top:5px;opacity:.6;justify-content:center}.story-step h3{font-size:30px;margin-bottom:12px}.story-step p{font-size:14px;line-height:1.8}.step-number{font-size:12px;margin-bottom:15px}.step-pill{margin-top:14px;font-size:12px}.transition-section{padding-bottom:53px}.transition-section>.section-label h2{font-size:17px}.transition-lab{display:flex;flex-direction:column;gap:22px;padding:22px 18px}.transition-controls{padding:0}.transition-controls>.eyebrow{font-size:12px;margin-bottom:12px}.transition-controls>h3{font-size:26px;margin-bottom:19px;line-height:1.35}.transition-controls>h3 br{display:none}.transition-options{flex-direction:row;gap:5px}.transition-options button{flex:1;justify-content:center;padding:11px 6px;font-size:12px;border:1px solid #e5e7eb;white-space:nowrap}.transition-options button strong{font-size:12px;display:block;margin:0 0 5px;color:#9aa0aa}.transition-options button .option-icon{display:none}.transition-controls>p{font-size:12px;margin-top:13px;min-height:18px}.browser-bar{font-size:12px;height:34px;padding:0 12px}.transition-screen{height:310px}.scene{padding:22px}.scene-top{font-size:12px;letter-spacing:.1px}.scene-small{font-size:12px;margin-bottom:12px}.scene-center strong{font-size:51px;letter-spacing:-2px}.scene-bottom{font-size:12px}.scene-asterisk{font-size:44px}.transition-action>span{font-size:12px;margin-top:11px}.transition-action>button{font-size:12px;padding:11px 14px;gap:16px}.site-footer{width:90%;padding:26px 0 30px;flex-wrap:wrap;gap:23px}.site-footer .brand{font-size:14px}.site-footer .brand-mark{height:25px;width:25px;font-size:22px}.site-footer p{order:3;width:100%;font-size:12px}.back-top{font-size:12px;gap:13px}}
@media(max-width:370px){.micro-grid{grid-template-columns:1fr}.micro-stage{height:230px}.demo-index{font-size:12px;left:20px;top:20px}.demo-hint{font-size:12px;bottom:20px}.magnet-button{font-size:14px;padding:18px 25px;gap:30px}.tabs-demo{width:75%}.segmented button{font-size:13px}.tab-preview{flex-direction:row;font-size:12px;gap:8px}.progress-demo{width:72%}.progress-button{font-size:13px;min-height:48px}.progress-status{font-size:12px}.like-label{font-size:12px}.micro-caption h3{font-size:15px}.micro-caption>span{font-size:12px}.glass-tilt{height:185px}.glass-face{padding:20px}.swiss-stage.recomposed .swiss-disc{transform:translateY(-150px) translateX(170%)}.swiss-stage.recomposed .swiss-small{transform:translateY(-147px) translateX(-180%)}.swiss-type{font-size:120px}.type-choices button{font-size:12px;padding:8px}.type-toolbar{gap:3px}.replay-button{font-size:12px}.scene-top>span:first-child{max-width:80px;line-height:1.5}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ambient{animation:none}.glass-tilt,.magnet-button{transition:none}}

/* Keep labels legible across compact and spacious layouts. */
.intro-copy,.story-step p{font-size:16px}
.site-header nav,.motion-toggle,.type-choices button,.replay-button,.transition-options button,.transition-action>button{font-size:14px}
.magnet-button,.segmented button,.progress-button{font-size:14px}
.micro-caption h3{font-size:16px}
.light-control label{font-size:14px}
.light-control{width:65%}
.scene-top{font-size:12px;line-height:1.4}
.scene-top>span{max-width:49%}
.scene-top>span:last-child{text-align:right}
.scene-small{font-size:14px}
.swiss-small{left:calc(100% - 70px);right:auto;width:70px;transition:transform .85s var(--ease),left .85s var(--ease)}
.swiss-disc{transition:transform .85s var(--ease),border-radius .85s,left .85s var(--ease)}
.swiss-stage.recomposed .swiss-small{left:0;right:auto;transform:translateY(-145px)}
.swiss-stage.recomposed .swiss-disc{left:calc(100% - 70px);transform:translateY(-145px)}
@media(max-width:900px){.site-header nav{font-size:13px}.motion-toggle{font-size:12px}.light-control{max-width:210px}}
@media(max-width:620px){
 .site-header nav{font-size:13px}.intro-copy{font-size:14px}.light-control{max-width:210px}
 .type-choices button{font-size:12px;padding:9px 10px}.replay-button{font-size:12px;gap:4px}
 .type-toolbar{flex-wrap:wrap;row-gap:10px}.transition-options button{font-size:13px}
 .magnet-button{font-size:13px;padding:14px 12px;gap:8px}.segmented button{font-size:12px}
 .progress-button{font-size:12px}.tab-preview{font-size:12px;text-align:center}.micro-caption h3{font-size:15px}
 .progress-status{font-size:12px}.demo-hint{font-size:12px}.like-label{font-size:12px;text-align:center;padding:0 6px}
 .transition-action{flex-wrap:wrap}.transition-action>button{font-size:14px}.transition-action>span{font-size:12px}
 .transition-controls>.eyebrow{font-size:12px}.scene-top{font-size:12px}.scene-small{font-size:12px}
 .story-sheet strong{font-size:32px}.scene-center strong{font-size:48px}.scene-bottom>span:first-child{max-width:78%}
}
@media(max-width:370px){.micro-caption h3{font-size:16px}.magnet-button,.segmented button,.progress-button{font-size:14px}.demo-index{font-size:12px}}