/* William Hu — a small, dependency-free corner of the web. */
:root{--paper:#f8f7f4;--ink:#222522;--muted:#626661;--blue:#2459e0;--line:#deded7;--soft:#eeeee8;--radius:24px;--nav-height:80px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none;scroll-behavior:smooth;scroll-padding-top:110px}
*{box-sizing:border-box}body{margin:0;-webkit-font-smoothing:antialiased}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{color:inherit}button:not(:disabled){cursor:pointer}img,svg{max-width:100%}button{border:0}::selection{background:#cbd9fc;color:#153571}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--blue);outline-offset:6px;border-radius:5px}[hidden]{display:none!important}.container{width:min(1184px,calc(100% - 112px));margin-inline:auto}.section{padding-block:118px}.icon{width:22px;height:22px;flex-shrink:0;vertical-align:middle}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:12px;left:20px;z-index:1000;padding:14px 20px;background:var(--ink);color:white;transform:translateY(-180%)}.skip-link:focus{transform:translateY(0)}.reading-progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:110;pointer-events:none}.reading-progress span{display:block;width:100%;height:100%;background:var(--blue);transform:scaleX(0);transform-origin:left}
.site-header{position:sticky;top:0;z-index:100;background:rgba(248,247,244,.91);border-bottom:1px solid rgba(34,37,34,.09);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.nav-shell{width:min(1328px,calc(100% - 80px));margin:auto;display:flex;align-items:center;height:var(--nav-height);gap:32px}.wordmark{display:flex;align-items:center;gap:15px;margin-right:auto}.wordmark>span:first-child{font-size:32px;font-weight:800;letter-spacing:-3px;line-height:1}.brand-dot{color:var(--blue)}.wordmark-name{font-size:14px;font-weight:600;letter-spacing:-.3px}.navigation{display:flex;align-items:center;gap:31px;font-size:13px;font-weight:500}.navigation a{position:relative;padding-block:12px}.navigation a::after{content:"";position:absolute;bottom:3px;height:2px;background:var(--blue);left:0;right:0;transform:scaleX(0);transform-origin:left;transition:transform .2s}.navigation a:hover::after,.navigation a[aria-current]::after{transform:scaleX(1)}.nav-actions{display:flex;align-items:center;gap:20px;margin-left:17px}.language-link{font-size:12px;font-weight:600;display:flex;align-items:center;gap:9px;padding:12px 2px}.lang-divider{color:#b0b1a9}.language-link .muted{color:var(--muted)}.language-link .current{color:var(--ink)}.menu-toggle{display:none;width:36px;height:36px;background:transparent;padding:8px}.menu-toggle span{display:block;height:1.5px;background:var(--ink);margin:5px 0;transition:transform .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.25px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.hero{position:relative;min-height:min(900px,calc(100svh - 80px));display:grid;grid-template-columns:1.05fr 1fr;align-items:center;column-gap:24px;padding-top:68px;padding-bottom:126px}.eyebrow,.section-kicker{font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:10px;font-weight:500;letter-spacing:1.4px;line-height:1.8}.eyebrow{margin-bottom:31px;color:var(--muted)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(86px,9.8vw,142px);font-weight:550;letter-spacing:-.075em;line-height:.98;margin-bottom:33px;position:relative;width:fit-content}h1>.hero-name{color:var(--blue)}.name-underline{position:absolute;bottom:-21px;width:95%;right:0;height:18px;overflow:visible}.name-underline path{fill:none;stroke:#acc3ed;stroke-width:3;stroke-linecap:round}.hero-description{font-size:17px;line-height:1.75;color:var(--muted);margin:46px 0 30px}.hero-links{display:flex;gap:26px;align-items:center;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;gap:22px;padding:17px 23px;font-size:13px;font-weight:500;border-radius:99px;transition:transform .25s,background .25s}.button:hover{transform:translateY(-3px)}.button-blue{background:var(--blue);color:white}.button-blue:hover{background:#1748c5}.button .icon{width:18px;height:18px}.text-link{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:550;background:transparent;padding:7px 0;border-bottom:1px solid transparent;transition:gap .2s,border-color .2s}.text-link .icon{width:17px;height:17px}.text-link:hover{gap:15px;border-color:currentColor}.hero-bottom{position:absolute;bottom:26px;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding-top:22px;border-top:1px solid var(--line);font:9px ui-monospace,"SFMono-Regular",monospace;letter-spacing:1.3px;color:var(--muted)}.hero-bottom a{display:flex;align-items:center;gap:20px;padding:12px 0}.scroll-arrow{font:21px sans-serif;color:var(--ink)}
/* A little still life: one code note, one record, another kind of keyboard. */
.hero-composition{position:relative;height:510px;width:100%;max-width:560px;justify-self:end;transform:translateY(8px)}.composition-grid{position:absolute;inset:5% -2% 3% 0;background-image:radial-gradient(#c8cbc0 .8px,transparent .8px);background-size:20px 20px;mask-image:radial-gradient(ellipse,black 15%,transparent 67%);-webkit-mask-image:radial-gradient(ellipse,black 15%,transparent 67%)}.composition-orbit{position:absolute;width:400px;height:400px;left:12%;top:10%;border:1px solid #dddcd1;border-radius:50%;transform:rotate(-25deg);box-shadow:0 0 0 25px rgba(226,226,214,.14)}.code-note{position:absolute;left:3%;top:12%;width:285px;height:258px;background:#fffefa;border:1px solid #e4e3d9;border-radius:13px;transform:rotate(-9deg);box-shadow:0 22px 55px #343b2920;padding:24px;z-index:2}.window-dots{display:flex;gap:5px}.window-dots i{width:6px;height:6px;border-radius:50%;background:#c6c8bf}.window-dots i:first-child{background:#d3a78b}.window-dots i:nth-child(2){background:#c3be8d}.window-dots i:nth-child(3){background:#9cb39c}.code-lines{font:16px/1.8 ui-monospace,"SFMono-Regular",Consolas,monospace;margin-top:29px;letter-spacing:-.6px}.code-dim{color:#74786f;font-size:11px}.code-blue{color:var(--blue)}.note-corner{position:absolute;right:22px;bottom:15px;color:#90968a;font-size:24px}.code-caret{display:inline-block;width:7px;height:17px;background:#2459e066;vertical-align:middle;margin-left:6px}.vinyl{position:absolute;right:0;top:21%;width:255px;height:255px;border-radius:50%;background:#262b29;box-shadow:0 22px 45px #22252225;z-index:3}.vinyl-rings{position:absolute;inset:14px;border-radius:50%;background:repeating-radial-gradient(circle,#272d29 0 3px,#363e37 4px 5px);border:1px solid #4a5148}.vinyl-label{position:absolute;inset:34%;border-radius:50%;background:#d5e2a4;color:#343c28;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 8px #2a302b}.vinyl-label>.icon{width:27px;height:27px;transform:translateY(-8px)}.vinyl-label i{position:absolute;bottom:20px;width:6px;height:6px;background:#252a25;border-radius:50%}.hero-piano{position:absolute;left:12%;bottom:6%;width:345px;height:120px;background:#29322c;border-radius:13px;padding:14px 14px 11px;transform:rotate(9deg);box-shadow:0 20px 40px #31382b25;z-index:4}.piano-keys{height:100%;display:flex;gap:2px}.piano-keys i{position:relative;flex:1;background:linear-gradient(100deg,#e8e5dc,#fffef9);border-radius:0 0 4px 4px;box-shadow:inset 0 -6px #c9c8bf}.piano-keys i:not(:nth-child(7n+3)):not(:nth-child(7n)):not(:last-child)::after{content:"";position:absolute;width:60%;height:62%;top:0;right:-34%;background:linear-gradient(100deg,#333a33,#1d241f);box-shadow:2px 4px 3px #0003;border-radius:0 0 2px 2px;z-index:1}.curiosity-chip{position:absolute;bottom:4%;right:-2%;z-index:5;display:flex;align-items:center;gap:9px;padding:13px 17px;background:#e9eddd;border:1px solid #d2d8c2;border-radius:6px;transform:rotate(-6deg);font:11px ui-monospace,"SFMono-Regular",monospace;color:#4d5940;box-shadow:0 8px 18px #2225220c}.curiosity-chip .icon{width:16px;height:16px}.composition-cross{position:absolute;right:7%;top:6%;font:38px ui-monospace,monospace;color:#bca27b;font-weight:200;transform:rotate(15deg)}.composition-dot{position:absolute;left:1%;bottom:25%;width:9px;height:9px;border-radius:50%;background:#8ba4ca}
.section-kicker{color:var(--muted);margin-bottom:27px}h2{font-size:clamp(40px,4.7vw,65px);font-weight:540;line-height:1.12;letter-spacing:-.055em;margin-bottom:26px}.about-section{padding-top:106px;border-bottom:1px solid var(--line)}.about-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:100px;align-items:start}.about-prose{max-width:565px;font-size:16px;line-height:1.85;color:var(--muted)}.about-prose p{margin-bottom:17px}.handwritten{font-family:Georgia,"Songti SC",serif;font-style:italic;color:var(--blue);font-size:22px;line-height:1.4;margin-top:33px;margin-bottom:0;transform:rotate(-2deg);width:fit-content}.toolkit{background:#eeeee7;border:1px solid #e2e2d7;border-radius:var(--radius);padding:32px;margin-top:11px;position:relative;overflow:hidden}.toolkit-header{display:flex;align-items:center;gap:12px;color:#686e5d;font:9px ui-monospace,monospace;letter-spacing:1.2px}.primary-language{display:flex;align-items:center;gap:20px;margin:41px 0 33px}.primary-language>span{display:grid;place-items:center;background:#dde5c9;color:#546640;width:70px;height:70px;border-radius:19px;font-size:29px;letter-spacing:-1px;font-weight:600}.primary-language h3{font-size:28px;letter-spacing:-1px;font-weight:550;margin-bottom:7px}.primary-language p{font-size:11px;color:var(--muted);margin-bottom:0}.also-label{font-size:11px;color:var(--muted);margin-bottom:15px}.language-tags{display:flex;gap:8px;flex-wrap:wrap}.language-tags span{font-size:11px;padding:8px 13px;border:1px solid #d9dccd;border-radius:6px;background:#f5f5ee}.toolkit-lines{display:flex;gap:9px;align-items:end;height:35px;margin-top:26px;opacity:.5}.toolkit-lines i{width:35%;height:2px;background:#bdc6aa}.toolkit-lines i:nth-child(2){width:12%}.toolkit-lines i:nth-child(3){width:21%}.toolkit-lines i:nth-child(4){width:8%}.section-heading{max-width:770px;margin-bottom:65px}.section-heading>p{max-width:560px;font-size:16px;line-height:1.8;color:var(--muted);margin-bottom:0}.work-section{background:#fffefa}.project-story{display:grid;grid-template-columns:1fr 1.15fr;gap:76px;position:relative;align-items:start}.story-step{min-height:77vh;display:flex;align-items:center;padding:64px 0}.story-step:first-child{padding-top:38px}.feature-copy h3{font-size:47px;font-weight:540;letter-spacing:-.05em;line-height:1.14;margin-bottom:23px}.project-name{display:block;font:600 15px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;letter-spacing:-.2px;margin-bottom:9px;color:var(--ink)}.project-category{font:9px ui-monospace,"SFMono-Regular",monospace;letter-spacing:1.5px;color:var(--blue);margin-bottom:23px}.feature-copy>p{font-size:15px;line-height:1.85;color:var(--muted);margin-bottom:23px}.feature-points{list-style:none;padding:0;margin:0 0 25px;font-size:12px;line-height:1.65;color:#4d554c}.feature-points li{position:relative;padding-left:17px;margin-bottom:10px}.feature-points li::before{content:"";position:absolute;width:4px;height:4px;left:0;top:8px;background:#819571;border-radius:50%}.project-tech{font:10px/1.6 ui-monospace,monospace;color:var(--muted);margin-bottom:9px}.project-role{font-size:10px;color:var(--muted);margin-bottom:21px}.feature-copy .text-link{color:var(--blue)}.story-visual{height:100%;position:relative}.sticky-scene{position:sticky;top:calc(var(--nav-height) + 55px);padding-top:10px}.scene-stack{position:relative;aspect-ratio:1.05}.scene-panel{position:absolute;inset:0;opacity:0;transform:translateY(24px) scale(.96);transition:opacity .65s,transform .9s cubic-bezier(.2,.8,.2,1);pointer-events:none}.scene-panel.is-active{opacity:1;transform:translateY(0) scale(1)}.scene-panel .project-art{height:100%;transform:translateY(calc(var(--scene-shift,0) * -8px))}.scene-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:16px;padding-inline:6px}.scene-footer>span{font-size:9px;color:var(--muted)}.scene-markers{display:flex;gap:6px}.scene-markers i{width:6px;height:6px;border-radius:50%;background:#d5d8cb;transition:width .3s,background .3s}.scene-markers i.is-active{background:#566347;width:18px;border-radius:9px}.mobile-art{display:none}.more-feature-heading{font-size:25px;font-weight:500;letter-spacing:-.7px;margin:70px 0 31px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.feature-card{background:var(--paper);border:1px solid #e5e5dc;border-radius:18px;overflow:hidden;display:flex;flex-direction:column}.compact-art{height:220px;overflow:hidden}.compact-art .project-art{height:100%;border-radius:0}.feature-card .feature-copy{padding:30px;display:flex;flex:1;flex-direction:column;align-items:start}.feature-card .project-category{font-size:8px;letter-spacing:1px;margin-bottom:15px}.feature-card h3{font-size:27px;letter-spacing:-1px;line-height:1.2;margin-bottom:15px}.feature-card .feature-copy>p{font-size:13px;line-height:1.8}.feature-card .feature-points{font-size:11px}.feature-card .project-tech{font-size:9px;margin-top:auto}.feature-card .project-role{font-size:9px;margin-bottom:14px}.feature-card .text-link{font-size:12px}.music-note{max-width:680px;margin-top:30px;margin-bottom:0;font-size:11px;line-height:1.8;color:var(--muted)}
/* Abstract project scenes. All shapes are local CSS, not third-party images. */
.project-art{position:relative;isolation:isolate;border-radius:22px;overflow:hidden;min-height:180px}.art-label{position:absolute;left:26px;bottom:23px;z-index:9;font-size:11px;letter-spacing:-.1px;color:#374631}.art-corner{position:absolute;right:25px;top:20px;color:#52624a;font-size:22px}.art-resona{background:#e6e9db}.art-sonora{background:#e8e4f0}.sound-orbit{position:absolute;top:44%;left:50%;border:1px solid #9ca88f66;border-radius:50%;transform:translate(-50%,-50%) rotate(-32deg);width:68%;height:42%}.orbit-b{width:82%;height:53%;transform:translate(-50%,-50%) rotate(30deg)}.orbit-c{width:70%;height:70%;transform:translate(-50%,-50%) rotate(60deg);border-color:#b6bdab55}.sound-core{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);width:29%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 25%,#eef2db,#becb97);box-shadow:0 20px 30px #72834c24,inset 0 1px 1px #ffffffe0;display:grid;place-items:center;color:#4b633f}.sound-core .icon{width:33%;height:33%;stroke-width:1}.waveform{position:absolute;top:72%;left:22%;width:56%;height:40px;display:flex;gap:4px;align-items:center}.waveform i{height:var(--h);flex:1;max-width:6px;border-radius:5px;background:#7f9669}.art-sonora .sound-core{background:radial-gradient(circle at 35% 25%,#f4effb,#c9b7dc);color:#7c5b94}.art-sonora .waveform{height:24px}.art-sonora .waveform i{background:#a18ab6}.art-whaos{background:#e1e9f3}.art-whaos .art-label,.art-whaos .art-corner{color:#40628b}.desktop-paper{position:absolute;width:68%;height:55%;left:16%;top:19%;border-radius:10px}.paper-back{transform:rotate(-10deg);background:#bfd0e9;border:1px solid #a5bddb}.paper-front{background:#fbfcff;border:1px solid #c5d4ea;transform:rotate(4deg);box-shadow:0 20px 45px #4c6a9824;padding:18px}.app-grid{display:flex;justify-content:center;gap:11px;margin-top:14%}.app-grid>span{display:grid;place-items:center;width:19%;aspect-ratio:1;background:#e0e8f8;color:#597bac;border-radius:12px}.app-grid>span:nth-child(2){background:#e9e3f0;color:#9472ae}.app-grid>span:nth-child(3){background:#e2ead9;color:#7e945f}.app-grid>span:nth-child(4){background:#f5ead2;color:#bd9b58}.app-grid .icon{width:45%;height:45%}.prompt-line{display:flex;align-items:center;gap:10px;border:1px solid #e0e7f0;border-radius:20px;padding:8px 10px;margin-top:15%;font-size:14px;color:#7890ad}.prompt-line i{height:4px;width:55%;background:#dce5f2;border-radius:4px}.prompt-line b{margin-left:auto;background:var(--blue);color:white;border-radius:50%;width:20px;height:20px;text-align:center}.cursor-shape{position:absolute;right:15%;top:60%;width:31px;height:44px;background:#3c5e91;clip-path:polygon(0 0,100% 65%,57% 68%,40% 100%);transform:rotate(-20deg);filter:drop-shadow(0 4px 3px #fff);z-index:4}.art-rhythm{background:#f0e8d8}.art-rhythm .art-label{color:#7d5a37}.chopping-board{position:absolute;width:68%;height:44%;background:#e4c7a0;box-shadow:inset 0 0 0 8px #ebd4b4,0 20px 30px #8f70501a;border:1px solid #d6b48a;border-radius:25px;top:25%;left:17%;transform:rotate(-10deg)}.chopping-board::after{content:"";position:absolute;right:17px;top:50%;width:8px;height:8px;background:#cfb183;border-radius:50%;box-shadow:inset 0 2px 2px #98724e33}.carrot{position:absolute;width:40%;height:20%;top:39%;left:35%;background:linear-gradient(#ef9853,#d97a37);border-radius:15% 60% 60% 15%;transform:rotate(3deg)}.carrot::after{content:"";position:absolute;width:20%;height:90%;background:#889a58;left:-12%;top:5%;clip-path:polygon(0 0,100% 25%,50% 50%,100% 75%,0 100%,25% 50%)}.slice{position:absolute;top:36%;width:7%;height:23%;background:#e58b44;border:4px solid #f0a55b;border-radius:50%;transform:rotate(-20deg)}.slice-1{left:17%;transform:rotate(10deg)}.slice-2{left:24%;top:47%}.slice-3{left:30%;top:27%}.knife{position:absolute;width:37%;height:18%;left:36%;top:16%;transform:rotate(-35deg);background:linear-gradient(#e6ecea 50%,#d0d9d7 50%);border-radius:0 0 65% 2%;box-shadow:0 4px 2px #654d3820}.knife i{position:absolute;left:-53%;top:0;height:100%;width:55%;background:#4e574b;border-radius:6px 0 0 6px}.beat-track{position:absolute;bottom:20%;left:22%;width:56%;height:2px;background:#cfbda5;display:flex;justify-content:space-between;align-items:center}.beat-track i{width:11px;height:11px;background:#dba566;border-radius:50%;border:3px solid #f1e5d3;box-shadow:0 0 0 1px #c9aa83}.beat-track i:nth-child(2){background:#a8b883}.beat-track>span{font-size:28px;color:#8e6d49;transform:translateY(-3px)}.rhythm-spark{position:absolute;right:14%;top:13%;color:#bd9b5f;font-size:48px}.art-academy{background:#e7ebdf}.learning-lines{position:absolute;inset:25% 25% 29%;border:1px solid #b2bea0;transform:rotate(-15deg);border-radius:20px}.learning-lines::before,.learning-lines::after{content:"";position:absolute;top:50%;left:-15%;width:130%;height:1px;background:#b2bea0;transform:rotate(32deg)}.learning-lines::after{transform:rotate(-38deg)}.learning-node{position:absolute;width:55px;height:55px;border-radius:15px;background:#fffdf6;box-shadow:0 9px 20px #5f704b15;display:grid;place-items:center;font:22px Georgia,serif;color:#5e7547;border:1px solid #d1d9c5}.node-a{left:20%;top:15%;transform:rotate(-12deg)}.node-b{right:21%;top:20%;transform:rotate(8deg);background:#d7e0c6}.node-c{left:30%;bottom:21%;transform:rotate(4deg);font-family:ui-monospace,monospace}.node-d{right:25%;bottom:26%;background:#c4d5ae;transform:rotate(-8deg)}.art-dorm{background:#e7e9ee}.pass-card{position:absolute;left:28%;top:16%;width:45%;height:60%;border:1px solid #cbd1df;border-radius:12px}.pass-back{background:#cbd4e4;transform:rotate(-12deg)}.pass-front{background:#fdfdff;transform:rotate(8deg);box-shadow:0 15px 30px #505f7d20;padding:20px}.pass-avatar{display:block;width:27px;height:27px;border-radius:50%;background:#bdcce2}.pass-lines{position:absolute;top:25px;left:56px;right:14px}.pass-lines i{display:block;height:4px;background:#d8dfe9;margin-bottom:7px;border-radius:2px}.pass-lines i:nth-child(2){width:65%}.pass-check{position:absolute;left:37%;top:43%;width:32px;height:32px;border:1px solid #adbf9c;border-radius:50%;display:grid;place-items:center;color:#77945a;background:#eaf1e1;font-size:19px}.pass-code{position:absolute;bottom:14px;left:22px;right:22px;height:15px;display:flex;gap:2px}.pass-code i{flex:1;background:#a7b4ca}.pass-code i:nth-child(3n){flex:3}.pass-route{position:absolute;bottom:14%;left:31%;width:40%;height:1px;background:#aab8ce;display:flex;justify-content:space-between}.pass-route i{width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#96a7c2}
.organization-section{background:#263728;color:#f0f2e9;padding-block:100px;overflow:hidden}.org-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:90px;align-items:center}.organization-section .section-kicker{color:#bac7b0}.organization-name{font-size:12px;display:flex;align-items:center;gap:10px;margin-bottom:23px;color:#d4dfcb}.organization-name .icon{width:18px;height:18px}.organization-section h2{font-size:57px;letter-spacing:-2.5px;line-height:1.14}.organization-section p{font-size:14px;line-height:1.85;color:#d3dccb;max-width:510px}.organization-section .org-secondary{font-size:12px;color:#bac6b3}.org-links{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:28px}.button-light{background:#e8eede;color:#2f452b}.org-links .text-link{font-size:12px}.org-visual{position:relative;min-height:400px;background:radial-gradient(ellipse,#455e3f80,transparent 70%);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:38px}.exabyte-mark{width:150px;height:150px;position:relative;transform:rotate(-20deg)}.exabyte-mark>div{position:absolute;width:64px;height:64px;background:#d8e6c8;border:1px solid #b6c9a2;border-radius:14px;box-shadow:10px 15px 18px #17271850}.exabyte-mark>div:nth-child(1){left:0;top:0;background:linear-gradient(135deg,#d8e6c8,#a9bf8f)}.exabyte-mark>div:nth-child(2){right:0;top:0;background:linear-gradient(135deg,#b6cba2,#7f9b65)}.exabyte-mark>div:nth-child(3){left:0;bottom:0;background:linear-gradient(135deg,#e3ecd8,#b7cba2)}.exabyte-mark>div:nth-child(4){right:0;bottom:0;background:linear-gradient(135deg,#b8cfa1,#93ad78)}.org-values{font-size:27px;text-align:center;line-height:1.4;letter-spacing:-.8px;display:flex;flex-direction:column}.org-values span:last-child{color:#c0d3a9}.org-caption{font:8px ui-monospace,monospace;letter-spacing:2px;color:#b9c6ad}
.life-section{padding-top:126px}.interests-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.interest-card{overflow:hidden;border-radius:20px;background:#f0f0e9;border:1px solid #e6e5dc}.interest-visual{position:relative;height:230px;overflow:hidden}.interest-copy{padding:0 33px 32px}.interest-copy h3{font-size:25px;font-weight:540;letter-spacing:-.8px;line-height:1.3;margin-bottom:14px}.interest-copy p{font-size:14px;line-height:1.8;color:var(--muted);margin-bottom:21px;max-width:430px}.interest-copy>span{font:9px/1.7 ui-monospace,monospace;color:#62695a;letter-spacing:.1px}.interest-piano{background:#edece5}.mini-piano{position:absolute;top:55px;left:17%;width:67%;height:110px;background:#333d32;transform:rotate(-9deg);border-radius:10px;padding:13px;box-shadow:0 16px 20px #24312315}.floating-note{position:absolute;right:14%;top:26px;font:50px Georgia,serif;color:#81936d;transform:rotate(14deg)}.note-two{right:auto;left:13%;top:126px;font-size:32px;transform:rotate(-17deg)}.interest-sports{background:#e8edde}.court-lines{position:absolute;top:35px;left:16%;width:67%;height:160px;border:1px solid #bac7a6;border-radius:50%;transform:rotate(-22deg)}.court-lines::after{content:"";position:absolute;left:50%;top:0;height:100%;width:1px;background:#bac7a6}.basketball{position:absolute;width:121px;height:121px;left:calc(50% - 60px);top:45px;background:#d4a374;border-radius:50%;transform:rotate(-15deg);box-shadow:inset -13px -10px 25px #9a63322b}.basketball .icon{width:100%;height:100%;stroke:#946b49;stroke-width:.3;transform:scale(1.33)}.ball-shadow{position:absolute;width:100px;height:16px;background:#576c3820;filter:blur(5px);border-radius:50%;top:180px;left:calc(50% - 45px)}.interest-video{background:#e9edf3}.video-frame{position:absolute;top:37px;left:24%;width:53%;height:150px;border:1px solid #bbcadf;background:#f9fbff;border-radius:10px;box-shadow:0 12px 25px #42608717;transform:rotate(7deg);display:grid;place-items:center}.video-frame>.icon{width:55px;height:55px;stroke:#6e8bb6;stroke-width:.8}.video-timeline{position:absolute;bottom:13px;left:15px;right:15px;height:11px;display:flex;gap:5px}.video-timeline i{flex:1;background:#c7d7ed;border-radius:2px}.video-timeline i:nth-child(2){background:#d5cce5;flex:2}.video-timeline i:nth-child(3){background:#c6d7b3}.video-cross{position:absolute;left:15%;top:76px;font-size:30px;color:#94acd0;transform:rotate(-13deg)}.interest-games{background:#f0e8dd}.game-board{position:absolute;top:57px;left:24%;width:56%;height:126px;background:conic-gradient(#c7b391 25%,#eadfc9 0 50%,#c7b391 0 75%,#eadfc9 0);background-size:40px 40px;transform:rotate(-12deg);border:8px solid #e2d2b6;border-radius:8px;box-shadow:0 13px 25px #614f3510}.game-piece{position:absolute;top:35px;left:41%;width:75px;height:100px;display:grid;place-items:center;border-radius:10px;transform:rotate(9deg)}.game-piece .icon{width:80px;height:80px;stroke:#4c5746;stroke-width:1;fill:#788368;filter:drop-shadow(7px 9px 3px #35422b33)}.game-disc{position:absolute;top:133px;right:20%;width:39px;height:39px;border-radius:50%;background:#c49968;box-shadow:0 5px 0 #a17b50,0 9px 12px #71533425;border:3px solid #d2ae82}
.directory-section{background:#efefe9;border-block:1px solid #e4e4db}.directory-section .section-heading{margin-bottom:40px}.directory-controls{margin-bottom:23px}.search-field{display:flex;align-items:center;gap:12px;background:#fffefa;border:1px solid #d9dcd0;border-radius:10px;padding:15px 18px;max-width:440px;margin-bottom:22px;color:var(--muted)}.search-field .icon{width:18px;height:18px}.search-field input{border:0;outline-offset:10px;background:transparent;min-width:0;width:100%;font-size:13px;color:var(--ink)}.search-field input::placeholder{color:#72786b}.filter-list{display:flex;flex-wrap:wrap;gap:8px}.filter-button{padding:9px 15px;background:transparent;border:1px solid #d6d9cc;border-radius:50px;font-size:11px;transition:background .2s,color .2s,border .2s}.filter-button:hover{background:#e1e5d6}.filter-button.is-selected{background:#303d2b;border-color:#303d2b;color:#f5f7ed}.result-count{font:10px/1.5 ui-monospace,monospace;color:var(--muted);margin:27px 0 20px}.repo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.repo-card{display:flex;flex-direction:column;background:#f9f9f4;border:1px solid #dedfd5;border-radius:14px;padding:25px;min-height:245px;transition:transform .2s,box-shadow .2s,border-color .2s}.repo-card:hover{transform:translateY(-4px);border-color:#bdc8ad;box-shadow:0 10px 22px #25311908}.repo-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:27px}.repo-icon{color:#6e805f}.repo-icon .icon{width:21px;height:21px}.repo-role{font-size:9px;color:var(--muted);text-align:right}.repo-card h3{font-size:17px;font-weight:550;letter-spacing:-.5px;margin-bottom:12px;line-height:1.35}.repo-card>p{font-size:12px;line-height:1.8;color:var(--muted);margin-bottom:20px}.repo-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto}.repo-bottom>span{font:9px/1.7 ui-monospace,monospace;color:var(--muted)}.repo-link{display:grid;place-items:center;min-width:32px;min-height:32px;border-radius:50%;background:#e8eddf;color:#4d6340;transition:background .2s}.repo-link:hover{background:#d4e1c5}.repo-link .icon{width:16px;height:16px}.empty-state{text-align:center;padding:70px 25px;background:#f8f9f3;border:1px dashed #c7cebb;border-radius:16px}.empty-state>span{font-size:40px;color:#81966d;display:block;margin-bottom:20px}.empty-state h3{font-size:24px;font-weight:500}.empty-state p{font-size:14px;color:var(--muted)}.empty-state button{color:var(--blue)}
.contact-section{position:relative;text-align:center;padding-block:140px 120px}.contact-section .section-kicker{margin-bottom:26px}.contact-section h2{font-size:clamp(42px,5.5vw,74px);line-height:1.12;margin-bottom:27px}.contact-section>p{font-size:15px;line-height:1.85;color:var(--muted);margin-bottom:37px}.contact-spark{width:44px;height:44px;margin:0 auto 33px;color:#8ca36d;transform:rotate(10deg)}.contact-spark .icon{width:100%;height:100%;stroke-width:1}.email-link{display:inline-flex;align-items:center;justify-content:center;gap:18px;max-width:100%;font-size:clamp(17px,2.7vw,30px);letter-spacing:-1px;padding-bottom:9px;border-bottom:1px solid #b8c9e9;color:var(--blue);overflow-wrap:anywhere}.email-link:hover{border-color:var(--blue)}.email-link .icon{width:24px;height:24px}.contact-socials{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;margin-top:24px}.contact-socials .text-link{font-size:12px;color:var(--muted)}.site-footer{display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid var(--line);padding-block:30px 38px}.footer-name{font-size:16px;font-weight:600;letter-spacing:-.5px}.footer-name>span{color:var(--blue)}.site-footer p{font-size:10px;color:var(--muted);margin:9px 0 0}.back-top{font-size:11px;display:flex;align-items:center;gap:25px;padding:12px 0;color:var(--muted)}.back-top>span{font-size:20px;color:var(--ink)}
/* Motion enhances an already readable page. The script never hides content by default. */
@keyframes arrive{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){.hero-enter{animation:arrive .9s cubic-bezier(.2,.8,.2,1) both}.hero-enter:nth-child(2){animation-delay:.1s}.hero-enter:nth-child(3){animation-delay:.2s}.hero-enter:nth-child(4){animation-delay:.3s}.hero-composition.hero-enter{animation-delay:.2s}.motion-ready [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .75s ease,transform .85s cubic-bezier(.2,.8,.2,1);transition-delay:var(--reveal-delay,0ms)}.motion-ready [data-reveal].is-visible{opacity:1;transform:translateY(0)}}
html[lang=zh-Hans] .hero-greeting{font-size:.74em;white-space:nowrap;letter-spacing:-.045em}html[lang=zh-Hans] h1{font-size:clamp(78px,8.5vw,124px);line-height:1.12;letter-spacing:-.065em}html[lang=zh-Hans] h2{line-height:1.3;letter-spacing:-.045em}html[lang=zh-Hans] .feature-copy h3{line-height:1.3;letter-spacing:-.025em}html[lang=zh-Hans] .eyebrow,html[lang=zh-Hans] .section-kicker{letter-spacing:1.3px}html[lang=zh-Hans] .hero-description{line-height:1.9}html[lang=zh-Hans] .hero{padding-top:55px}html[lang=zh-Hans] .feature-card h3{font-size:25px}html[lang=zh-Hans] .hero-links{gap:20px}
@media(min-width:1600px){.hero{min-height:860px}.story-step{min-height:650px}.sticky-scene{top:140px}}
@media(max-width:1150px){.container{width:calc(100% - 80px)}.hero{column-gap:0;min-height:730px;padding-top:50px}.hero-composition{height:445px;transform:scale(.9);transform-origin:center right}.vinyl{width:215px;height:215px;right:-3%}.code-note{width:245px;height:242px;left:-4%}.hero-piano{width:300px;left:3%;bottom:3%}.composition-orbit{width:330px;height:330px;left:0}.curiosity-chip{right:0;bottom:2%}.hero-links{gap:18px}.hero-description{font-size:15px}.desktop-break{display:none}.about-grid{gap:50px}.project-story{gap:50px}.feature-copy h3{font-size:40px}.feature-card .feature-copy{padding:24px}.org-grid{gap:45px}.organization-section h2{font-size:49px}.repo-card{padding:22px}.section{padding-block:100px}.life-section{padding-top:100px}}
@media(max-width:900px){.container{width:calc(100% - 64px)}.nav-shell{width:calc(100% - 48px);gap:20px}.navigation{gap:21px}.nav-actions{margin-left:0}.hero{min-height:670px;grid-template-columns:1fr 1fr}h1{font-size:98px}.hero-composition{height:410px;transform:scale(.82);transform-origin:center right;margin-right:0;width:380px}.hero-description{font-size:14px}.eyebrow{font-size:8px;letter-spacing:1px}.hero-links{gap:17px}.hero-links>.text-link{font-size:12px}.button{padding:15px 19px;gap:13px;font-size:12px}.wordmark-name{font-size:12px}.about-grid{gap:35px;grid-template-columns:1.15fr 1fr}.about-prose{font-size:14px}.toolkit{padding:25px}.primary-language{gap:12px}.primary-language h3{font-size:25px}.primary-language>span{width:55px;height:55px}.primary-language p{font-size:10px}.project-story{gap:35px;grid-template-columns:1fr 1fr}.feature-copy h3{font-size:35px}.feature-copy>p{font-size:14px}.feature-points{font-size:11px}.sticky-scene{top:calc(var(--nav-height) + 85px)}.scene-footer>span{font-size:8px}.waveform{gap:3px;height:32px}.feature-grid{gap:16px}.feature-card .feature-copy{padding:22px}.feature-card h3{font-size:24px}.feature-card .feature-copy>p{font-size:12px}.compact-art{height:185px}.pass-front{padding:14px}.pass-avatar{width:22px;height:22px}.pass-lines{top:19px;left:43px}.org-grid{grid-template-columns:1.3fr 1fr;gap:30px}.organization-section h2{font-size:43px}.organization-section p{font-size:13px}.org-links{gap:15px}.org-values{font-size:23px}.interest-copy{padding:0 26px 27px}.interest-copy h3{font-size:23px}.interest-copy p{font-size:13px}.repo-grid{grid-template-columns:1fr 1fr}.contact-section h2{font-size:56px}html[lang=zh-Hans] h1{font-size:91px}html[lang=zh-Hans] .feature-card h3{font-size:23px}}
@media(max-width:700px){:root{--nav-height:66px;scroll-padding-top:90px}.container{width:calc(100% - 40px)}.section{padding-block:76px}.nav-shell{width:calc(100% - 36px);height:auto;min-height:var(--nav-height);flex-wrap:wrap;gap:0}.wordmark{gap:13px}.wordmark-name{font-size:13px}.wordmark>span:first-child{font-size:30px}.nav-actions{margin-left:auto;gap:15px}.language-link{font-size:12px}.menu-toggle:not([hidden]){display:block}.navigation{order:3;flex-basis:100%;justify-content:space-between;font-size:12px;gap:8px;padding-bottom:13px}.has-js .navigation{display:none;padding:15px 0 23px;border-top:1px solid var(--line)}.has-js .navigation.is-open{display:flex}.hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding-top:60px;padding-bottom:88px}.hero-copy{position:relative;z-index:2}.eyebrow{font-size:9px;letter-spacing:1px;margin-bottom:26px}h1{font-size:clamp(83px,18vw,120px);line-height:1;letter-spacing:-.07em;margin-bottom:25px}.hero-description{font-size:15px;line-height:1.8;max-width:340px;margin-top:35px;margin-bottom:25px}.hero-links{gap:24px}.button{font-size:12px;padding:15px 20px}.hero-composition{align-self:center;width:min(430px,100%);height:375px;margin-top:28px;margin-bottom:0;transform:none;transform-origin:center}.composition-orbit{width:300px;height:300px;top:6%;left:7%;transform:none}.code-note{left:3%;top:6%;width:220px;height:210px;padding:19px}.code-lines{font-size:13px;margin-top:20px;line-height:1.8}.code-dim{font-size:9px}.vinyl{width:195px;height:195px;right:1%;top:20%}.vinyl-label i{bottom:11px}.vinyl-label>.icon{width:21px;height:21px}.hero-piano{left:12%;width:265px;height:96px;bottom:4%;padding:12px}.curiosity-chip{font-size:9px;padding:11px 12px;right:0;bottom:2%}.composition-cross{font-size:30px;top:1%;right:9%}.composition-dot{left:4%;bottom:24%}.hero-bottom{bottom:13px;padding-top:17px;align-items:center;gap:15px;font-size:7px;letter-spacing:.8px}.hero-bottom a{gap:9px;font-size:7px;text-align:right}.hero-bottom>span{max-width:120px;line-height:1.8}.hero-bottom .scroll-arrow{font-size:19px}.section-kicker{font-size:9px;letter-spacing:1.1px;margin-bottom:23px}h2{font-size:39px;line-height:1.13;letter-spacing:-1.8px}.about-grid{grid-template-columns:1fr;gap:38px}.about-prose{font-size:15px;line-height:1.85}.handwritten{font-size:21px;margin-top:25px}.toolkit{padding:27px;margin:0}.primary-language{margin:30px 0 25px}.primary-language h3{font-size:29px}.primary-language>span{width:62px;height:62px}.primary-language p{font-size:11px}.toolkit-lines{margin-top:15px}.section-heading{margin-bottom:40px}.section-heading>p{font-size:14px;line-height:1.85}.project-story{display:block}.story-visual{display:none}.story-step{min-height:0;padding:0 0 55px;display:flex;flex-direction:column;align-items:stretch;gap:27px;margin-bottom:35px;border-bottom:1px solid var(--line)}.story-step:first-child{padding-top:0}.story-step:last-child{margin-bottom:0;padding-bottom:0;border:0}.story-step .mobile-art{display:block;order:-1}.mobile-art .project-art{height:340px}.project-category{font-size:9px;margin-bottom:17px}.feature-copy h3{font-size:37px;margin-bottom:18px}.feature-copy>p{font-size:14px;line-height:1.85;max-width:500px}.feature-points{font-size:12px}.project-tech{font-size:10px}.project-role{font-size:10px;margin-bottom:16px}.feature-copy .text-link{font-size:12px}.more-feature-heading{font-size:24px;margin:55px 0 25px;line-height:1.3}.feature-grid{grid-template-columns:1fr;gap:23px}.feature-card{border-radius:17px;display:grid;grid-template-columns:1fr}.compact-art{height:240px}.feature-card .feature-copy{padding:27px}.feature-card h3{font-size:29px}.feature-card .feature-copy>p{font-size:14px}.feature-card .feature-points{font-size:12px}.feature-card .project-tech{font-size:10px}.feature-card .project-role{font-size:10px}.feature-card .text-link{font-size:12px}.learning-node{width:65px;height:65px;font-size:26px}.pass-card{width:37%;left:32%}.pass-check{top:40%;left:38%;width:34px;height:34px}.pass-avatar{width:26px;height:26px}.pass-lines{left:50px;top:20px}.music-note{font-size:11px;line-height:1.85;margin-top:24px}.organization-section{padding-block:72px}.org-grid{grid-template-columns:1fr;gap:35px}.organization-section h2{font-size:41px;letter-spacing:-1.8px}.organization-section p{font-size:14px}.organization-section .org-secondary{font-size:12px}.org-links{gap:22px}.org-visual{min-height:310px;gap:26px}.exabyte-mark{width:125px;height:125px}.exabyte-mark>div{width:53px;height:53px;border-radius:12px}.org-values{font-size:23px}.interests-grid{grid-template-columns:1fr;gap:23px}.interest-visual{height:220px}.interest-copy{padding:0 27px 29px}.interest-copy h3{font-size:25px}.interest-copy p{font-size:14px}.mini-piano{top:55px;height:100px}.video-frame{top:35px;height:145px}.repo-grid{grid-template-columns:1fr;gap:14px}.repo-card{min-height:225px;padding:25px}.repo-top{margin-bottom:22px}.repo-card h3{font-size:18px}.repo-card>p{font-size:13px;line-height:1.8}.repo-role{font-size:10px}.repo-bottom>span{font-size:10px}.repo-link{min-width:38px;min-height:38px}.filter-button{padding:10px 14px;font-size:11px}.search-field{padding:16px}.search-field input{font-size:14px}.result-count{font-size:10px}.contact-section{padding-block:88px 76px}.contact-section h2{font-size:41px;letter-spacing:-1.8px}.contact-section>p{font-size:14px;margin-bottom:30px}.email-link{font-size:clamp(17px,5.2vw,25px);letter-spacing:-.6px;gap:10px}.email-link .icon{width:20px;height:20px}.contact-socials{gap:25px}.contact-socials .text-link{font-size:12px}.site-footer{padding:27px 0;align-items:start;gap:18px}.site-footer p{max-width:205px;font-size:9px;line-height:1.8}.back-top{font-size:10px;gap:12px;white-space:nowrap}.footer-name{font-size:15px}html[lang=zh-Hans] h1{font-size:clamp(78px,17vw,112px)}html[lang=zh-Hans] .hero{padding-top:53px}html[lang=zh-Hans] h2{font-size:37px;letter-spacing:-1px}html[lang=zh-Hans] .feature-copy h3{font-size:34px}html[lang=zh-Hans] .feature-card h3{font-size:26px}html[lang=zh-Hans] .hero-bottom{font-size:7px}html[lang=zh-Hans] .hero-bottom>span{max-width:145px}}
@media(max-width:370px){.container{width:calc(100% - 32px)}.nav-shell{width:calc(100% - 28px)}.wordmark-name{font-size:12px}.hero-links{gap:14px}.hero-links>.text-link{font-size:11px}.hero-composition{height:335px;transform:scale(.94);width:100%}.code-note{width:195px;height:200px;left:1%;top:4%}.vinyl{width:175px;height:175px;right:0;top:18%}.hero-piano{width:235px;left:8%;bottom:4%;height:90px}.composition-orbit{width:260px;height:260px;left:5%}.curiosity-chip{right:-2%;bottom:2%}.mobile-art .project-art{height:290px}.navigation{font-size:11px}.interest-copy{padding-inline:23px}.email-link{font-size:17px;letter-spacing:-.4px}.toolkit{padding:24px}.hero-bottom>span{max-width:110px}.hero-bottom a{max-width:160px}h2{font-size:35px}html[lang=zh-Hans] h2{font-size:33px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.motion-ready [data-reveal]{opacity:1;transform:none}.project-story{display:block}.story-visual{display:none}.story-step{min-height:0;padding-block:25px 55px;display:grid;grid-template-columns:1fr 1fr;gap:50px}.story-step .mobile-art{display:block}.mobile-art .project-art{height:100%;min-height:340px}.scene-panel .project-art{transform:none}.hero-composition{transform:none}.repo-card:hover,.button:hover{transform:none}}
@media(prefers-reduced-motion:reduce) and (max-width:700px){.story-step{display:flex;padding:0 0 40px;gap:25px}.mobile-art .project-art{min-height:300px}}
@media print{.site-header,.hero-composition,.reading-progress,.directory-controls,.back-top,.contact-spark{display:none!important}.container{width:100%}.section,.organization-section{padding:25px 0}.hero{display:block;min-height:0;padding:15px 0}.hero-bottom{position:static;margin-top:25px}.hero h1{font-size:65px}.hero-links{display:none}.project-story{display:block}.story-visual{display:none}.story-step{min-height:0;display:block;padding:25px 0}.feature-grid,.repo-grid,.interests-grid{grid-template-columns:1fr 1fr}.motion-ready [data-reveal]{opacity:1;transform:none}.organization-section{background:white;color:#222}.organization-section p,.organization-section .section-kicker{color:#555}.org-visual{display:none}.org-grid{display:block}.project-art,.interest-visual{display:none}.feature-card,.repo-card,.interest-card{break-inside:avoid}.compact-art{height:0}h2{font-size:32px}.feature-copy h3{font-size:27px}}

@media(min-width:701px) and (prefers-reduced-motion:no-preference){.motion-ready .story-step .feature-copy{transform:translateY(10px);transition:transform .65s cubic-bezier(.2,.8,.2,1)}.motion-ready .story-step.is-current .feature-copy{transform:none}.story-step .project-name{transition:color .5s}.story-step.is-current .project-name{color:var(--blue)}}

/* Finite first-view performances. No animation changes layout or carries content. */
@media (prefers-reduced-motion: no-preference) {
  .is-playing .piano-keys i {
    transform-origin: center top;
    animation: piano-press 1.35s ease-in-out calc(.35s + var(--key-delay, 0ms)) 2;
  }
  .vinyl.is-playing { animation: record-turn 3.6s cubic-bezier(.3,.05,.25,1) .3s; }
  .code-note.is-playing .code-caret { animation: caret-blink .55s steps(1) .35s 6; }
  .is-playing .floating-note { --rest-angle: 14deg; animation: note-drift 1.55s ease-in-out .35s 2; }
  .is-playing .note-two { --rest-angle: -17deg; animation-delay: .65s; }
  .is-playing .basketball { animation: basketball-bounce 3.3s .35s both; }
  .is-playing .ball-shadow { animation: bounce-shadow 3.3s .35s both; }
  .is-playing .video-frame > .icon { animation: play-pulse 1.4s ease-in-out .35s 2; }
  .is-playing .video-timeline i { transform-origin: left; animation: timeline-edit 2.8s ease-in-out .4s; }
  .is-playing .video-timeline i:nth-child(2) { animation-delay: .65s; }
  .is-playing .video-timeline i:nth-child(3) { animation-delay: .9s; }
  .is-playing .game-piece { --rest-angle: 9deg; animation: chess-move 3s ease-in-out .35s; }
  .is-playing .game-disc { animation: disc-move 2.7s ease-in-out .65s; }
  .is-playing .sound-core { animation: sound-breathe 1.45s ease-in-out .35s 2; }
  .is-playing .waveform i { animation: sound-wave .75s ease-in-out calc(.35s + var(--i, 0) * 17ms) 4; }
  .is-playing .app-grid > span { animation: app-hop 1.35s ease-in-out .35s 2; }
  .is-playing .app-grid > span:nth-child(2) { animation-delay: .5s; }
  .is-playing .app-grid > span:nth-child(3) { animation-delay: .65s; }
  .is-playing .app-grid > span:nth-child(4) { animation-delay: .8s; }
  .is-playing .cursor-shape { animation: cursor-click 2.8s ease-in-out .4s; }
  .is-playing .knife { transform-origin: 15% 50%; animation: knife-chop .85s ease-in-out .4s 3; }
  .is-playing .beat-track i { animation: beat-tap .85s ease-in-out .5s 3; }
  .is-playing .beat-track i:nth-child(2) { animation-delay: .7s; }
  .is-playing .beat-track i:nth-child(3) { animation-delay: .9s; }
  .is-playing .beat-track i:nth-child(4) { animation-delay: 1.1s; }
  .is-playing .learning-node { animation: node-lift 1.35s ease-in-out .35s 2; }
  .is-playing .node-a { --rest-angle: -12deg; }
  .is-playing .node-b { --rest-angle: 8deg; animation-delay: .55s; }
  .is-playing .node-c { --rest-angle: 4deg; animation-delay: .75s; }
  .is-playing .node-d { --rest-angle: -8deg; animation-delay: .95s; }
  .is-playing .pass-check { animation: check-confirm 2.9s ease-in-out .4s; }
  .is-playing .pass-route i { animation: beat-tap 1s ease-in-out .45s 3; }
  .is-playing .pass-route i:nth-child(2) { animation-delay: .7s; }
  .is-playing .pass-route i:nth-child(3) { animation-delay: .95s; }
  .exabyte-mark.is-playing > div { animation: tile-lift 1.4s ease-in-out .35s 2; }
  .exabyte-mark.is-playing > div:nth-child(2) { animation-delay: .55s; }
  .exabyte-mark.is-playing > div:nth-child(3) { animation-delay: .75s; }
  .exabyte-mark.is-playing > div:nth-child(4) { animation-delay: .95s; }
}
@keyframes piano-press {
  0%, 28%, 48%, 78%, 100% { transform: translateY(0) scaleY(1); filter: brightness(1); }
  9%, 19%, 57%, 67% { transform: translateY(4px) scaleY(.96); filter: brightness(.86); }
}
@keyframes record-turn { to { transform: rotate(360deg); } }
@keyframes caret-blink { 50% { opacity: 0; } }
@keyframes note-drift {
  0%, 100% { transform: translateY(0) rotate(var(--rest-angle)); }
  45% { transform: translateY(-13px) rotate(calc(var(--rest-angle) + 9deg)); }
}
@keyframes basketball-bounce {
  0%, 100% { transform: translateY(0) rotate(-15deg) scale(1); animation-timing-function: ease-out; }
  8%, 40%, 66% { transform: translateY(12px) rotate(-15deg) scale(1.07,.93); animation-timing-function: ease-out; }
  23% { transform: translateY(-34px) rotate(14deg) scale(.97,1.03); animation-timing-function: ease-in; }
  53% { transform: translateY(-21px) rotate(-3deg) scale(.98,1.02); animation-timing-function: ease-in; }
  77% { transform: translateY(-10px) rotate(-9deg); animation-timing-function: ease-in; }
  87% { transform: translateY(6px) rotate(-15deg) scale(1.03,.97); }
}
@keyframes bounce-shadow {
  0%, 100% { transform: scale(1); opacity: 1; }
  8%, 40%, 66%, 87% { transform: scale(1.12,.85); opacity: 1; }
  23% { transform: scale(.65); opacity: .45; }
  53% { transform: scale(.78); opacity: .65; }
  77% { transform: scale(.9); opacity: .8; }
}
@keyframes play-pulse { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.15); } }
@keyframes timeline-edit { 0%, 100% { transform: scaleX(1); } 30% { transform: scaleX(.55); } 65% { transform: scaleX(.85); } }
@keyframes chess-move {
  0%, 100% { transform: translate(0,0) rotate(var(--rest-angle)); }
  25% { transform: translate(-10px,-20px) rotate(-3deg); }
  45%, 65% { transform: translate(26px,10px) rotate(9deg); }
  80% { transform: translate(14px,-15px) rotate(3deg); }
}
@keyframes disc-move { 0%, 100% { transform: translateX(0); } 30%, 65% { transform: translateX(-24px) rotate(-40deg); } }
@keyframes sound-breathe { 0%, 100% { transform: translate(-50%,-50%) scale(1); } 45% { transform: translate(-50%,-50%) scale(1.09); } }
@keyframes sound-wave { 0%, 100% { transform: scaleY(1); } 30% { transform: scaleY(.4); } 65% { transform: scaleY(1.3); } }
@keyframes app-hop { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-8px); } 55% { transform: translateY(2px); } }
@keyframes cursor-click { 0%, 100% { transform: translate(0,0) rotate(-20deg); } 30%, 65% { transform: translate(-15px,-12px) rotate(-20deg); } 45% { transform: translate(-15px,-12px) rotate(-20deg) scale(.85); } }
@keyframes knife-chop { 0%, 100% { transform: translateY(0) rotate(-35deg); } 35% { transform: translateY(-13px) rotate(-43deg); } 55% { transform: translateY(17px) rotate(-26deg); } 70% { transform: translateY(12px) rotate(-28deg); } }
@keyframes beat-tap { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.5); } }
@keyframes node-lift { 0%, 100% { transform: translateY(0) rotate(var(--rest-angle)); } 40% { transform: translateY(-9px) rotate(calc(var(--rest-angle) + 5deg)); } }
@keyframes check-confirm { 0%, 100% { transform: scale(1); } 20% { transform: scale(.8); } 38% { transform: scale(1.18); } 50%, 75% { transform: scale(1); } 63% { transform: scale(1.1); } }
@keyframes tile-lift { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-12px); } }