.intro-screen[hidden]{display:none}.intro-screen{position:fixed;inset:0;z-index:100;background:#101012;overflow:hidden;color:#f7f7fa}.intro-screen canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.intro-active{overflow:hidden}.intro-top{position:absolute;inset:35px 40px auto;display:flex;justify-content:space-between;align-items:center;font:11px 'JetBrains Mono',monospace;color:#b6b6c4}.intro-top strong{font:600 16px Inter,sans-serif;color:#fafafa}.intro-skip{padding:10px 15px;background:#ffffff08;border:1px solid #ffffff30;border-radius:6px;color:white;cursor:pointer;font:inherit}.intro-words{position:absolute;left:max(40px,calc((100vw - 1200px)/2));top:42%;pointer-events:none}.intro-words small{font:10px 'JetBrains Mono',monospace;color:#c0b7de}.intro-words h2{font-size:clamp(46px,7vw,100px);line-height:1.02;font-weight:500;letter-spacing:-.07em;margin:25px 0}.intro-words h2 span{color:#d8b4fe}.intro-bottom{position:absolute;left:40px;right:40px;bottom:30px;display:flex;justify-content:space-between;align-items:center;color:#8b8795;font:9px 'JetBrains Mono',monospace}.intro-progress{height:1px;background:#ffffff20;position:absolute;bottom:0;left:0;right:0}.intro-progress i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#a5b4fc,#f472b6);transform:scaleX(0);transform-origin:left}
.photo-wrap{background:#b5afc4}.photo-wrap img{object-position:50% 25%;filter:grayscale(1) contrast(1.13);transition:filter .7s,transform .8s}.photo-wrap:after{content:'';position:absolute;inset:0;background:url('./grain.svg');mix-blend-mode:multiply;opacity:.3;pointer-events:none}.polaroid:hover .photo-wrap img{filter:grayscale(.45) contrast(1.05);transform:scale(1.035)}.photo-label{z-index:2}.hero-title-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}.hero-title-line>span{display:inline-block}.hero h1>br{display:none}.hero-footnote{flex-wrap:wrap}.replay-intro{font:inherit;background:transparent;border:0;border-bottom:1px solid #70647c;color:#c0b0d8;padding:4px 0;margin-left:4px;cursor:pointer}.replay-intro:hover{color:white}.hero{position:relative}.hero-glow{position:absolute;width:300px;height:300px;left:var(--glow-x,70%);top:var(--glow-y,45%);transform:translate(-50%,-50%);background:radial-gradient(circle,#c4a5fb07,transparent 68%);pointer-events:none;z-index:-1}.tools-card{transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) rotate(-12deg)}.workflow-card{transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) rotate(16deg)}.polaroid{transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) rotate(6deg)}.note,.polaroid{transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .2s}.is-dragging .note,.is-dragging .polaroid{transition:box-shadow .2s;--tilt-x:0deg!important;--tilt-y:0deg!important}
.project-image .project-open{transition:opacity .2s,transform .2s}.project-image{isolation:isolate}.project-image:after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,#ffffff0c 48%,transparent 70%);transform:translateX(-100%);pointer-events:none}.project:hover .project-image:after{transform:translateX(100%);transition:transform .8s}.project-entry{scroll-margin-top:130px}
@media(hover:none),(pointer:coarse){.note,.polaroid{--tilt-x:0deg!important;--tilt-y:0deg!important}}
@media(max-width:600px){.intro-top{inset:24px 23px auto}.intro-top>span{display:none}.intro-words{left:25px;top:28%}.intro-words h2{font-size:60px}.intro-bottom{left:23px;right:23px;font-size:8px}.intro-bottom>span:last-child{display:none}.intro-words small{font-size:9px}.replay-intro{margin-left:0}}
@media(prefers-reduced-motion:reduce){.hero-glow{display:none!important}.note,.polaroid{--tilt-x:0deg!important;--tilt-y:0deg!important}.intro-screen{display:none}.project-image:after{display:none}}

/* A click-to-enter cover, using the ATOM63 ring / shockwave / organic field. */
.intro-screen{background:#0b0b0f;touch-action:pan-y}.intro-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0b0b0fe8 0%,#0b0b0f77 30%,transparent 60%);pointer-events:none}.intro-top{inset:36px 40px auto}.intro-top strong{font-size:18px}.intro-words{top:28%;left:max(40px,calc((100vw - 1200px)/2))}.intro-words h2{font-size:clamp(76px,8.4vw,138px);letter-spacing:-.065em;line-height:1.02;font-weight:500;margin:0}.intro-words h2 span{background:linear-gradient(110deg,#a5b4fc,#d8b4fe 65%,#f472b6);background-clip:text;-webkit-background-clip:text;color:transparent;padding-right:.12em}.intro-enter{position:absolute;left:max(40px,calc((100vw - 1200px)/2));bottom:14%;display:flex;align-items:center;gap:48px;padding:18px 22px 18px 27px;border:1px solid #e4daf866;border-radius:999px;background:#ffffff0a;backdrop-filter:blur(12px);color:#fff;font:500 15px/1.3 Inter,"PingFang SC",sans-serif;cursor:pointer;transition:background .25s,border-color .25s,transform .25s}.intro-enter i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#f5efff;color:#1b1529;font:400 26px/1 Inter,sans-serif;transition:transform .25s}.intro-enter:hover{background:#b6a1ec20;border-color:#e4daf8bb;transform:translateY(-3px)}.intro-enter:hover i{transform:translate(2px,-2px)}.intro-enter:focus-visible{outline:2px solid #d8b4fe;outline-offset:6px}.intro-screen.is-leaving .intro-enter{pointer-events:none}
@media(max-width:700px){.intro-shade{background:linear-gradient(0deg,#0b0b0f 0%,transparent 45%,#0b0b0f77 100%)}.intro-top{inset:25px 24px auto}.intro-words{top:auto;bottom:23%;left:24px}.intro-words h2{font-size:clamp(66px,13vw,95px)}.intro-enter{left:24px;bottom:7%;padding:12px 16px 12px 22px;gap:35px;font-size:14px}}
@media(prefers-reduced-motion:reduce){.intro-screen{display:block}.intro-screen[hidden]{display:none}.intro-enter{transition:none}}