.hero{max-width:var(--max);padding:clamp(32px, 6vh, 72px) var(--gutter) clamp(40px, 6vh, 72px);grid-template-columns:max-content minmax(0,1fr);grid-template-areas:"name name""text stage";align-items:center;column-gap:clamp(28px,5vw,64px);margin:0 auto;display:grid;position:relative}.hero-namebox{grid-area:name}.hero-text{grid-area:text}.hero-stage{grid-area:stage;display:grid}.hero-name{letter-spacing:-.02em;white-space:nowrap;margin-left:-.04em;font-size:clamp(3.2rem,min(14.5vw,17vh),12.5rem);font-weight:900;line-height:.95;display:flex}.hero-letter-mask{flex:none;margin:0 -.08em -.26em;padding:.04em .08em .26em;display:inline-block;overflow:hidden}.hero-letter{cursor:default;will-change:transform;transition:color .2s;display:inline-block}.hero-nav{flex-wrap:wrap;gap:4px 26px;display:flex}.hero-nav a{font-family:var(--display);border-bottom:2px solid #0000;font-size:clamp(1.05rem,1.6vw,1.4rem);font-weight:900;transition:border-color .2s}.hero-nav a:hover{border-color:var(--accent)}.hero-cards{--h:clamp(300px, min(40vw, 64vh), 700px);height:var(--h);width:min(100%, calc(var(--h) * 1.5));justify-self:end;position:relative}.hero-card{cursor:grab;touch-action:none;user-select:none;-webkit-user-drag:none;background:#fff;border-radius:14px;padding:10px 10px 0;display:block;position:absolute;box-shadow:0 2px 4px #0000000f,0 22px 40px -18px #00000061}.hero-card-body{background:var(--soft);aspect-ratio:16/9;border-radius:8px;overflow:hidden}.hero-card-video{object-fit:cover;pointer-events:none;width:100%;height:100%}.hero-card-title{align-items:center;gap:8px;padding:10px 4px 12px;font-size:.88rem;font-weight:700;display:flex}.hero-card-title:before{content:"";background:var(--accent);border-radius:50%;width:9px;height:9px}.hero-card-tape{background:#00000014;border-radius:2px;width:70px;height:22px;position:absolute;top:-11px;left:50%;translate:-50%;rotate:-4deg}.hero-card.c1{z-index:2;width:56%;bottom:8%;left:0}.hero-card.c2{z-index:1;width:54%;top:0;right:0}.hero-card.c3{z-index:3;width:46%;bottom:0;right:1%}.hero-card.c3 .hero-card-body{aspect-ratio:auto;background:var(--ink)}.hero-code{min-height:128px;font-family:var(--mono);color:#ececec;white-space:pre-wrap;word-break:break-all;margin:0;padding:14px 16px 18px;font-size:.78rem;line-height:1.7}.hero-code-text{display:grid}.hero-code-text>span{grid-area:1/1}.hero-code-ghost{visibility:hidden}.hero-code .dots{gap:6px;margin-bottom:10px;display:flex}.hero-code .dots i{background:#555;border-radius:50%;width:9px;height:9px}.hero-code .caret{vertical-align:-.2em;background:var(--accent);width:7px;height:1.1em;margin-left:2px;animation:1s step-end infinite blink;display:inline-block}@keyframes blink{50%{opacity:0}}.hero-drag-hint{color:var(--mute);font-size:.8rem;font-weight:700;position:absolute;bottom:-6px;left:4px}@media (width>=900px){.hero{grid-template:"name stage"1fr"text stage"".stage"1fr/minmax(0,.9fr) minmax(0,1.1fr);max-width:1680px;height:100svh;min-height:600px;max-height:1000px}.hero-namebox{align-self:end;container-type:inline-size}.hero-name{font-size:min(17.8cqi,12.5rem)}.hero-text{margin-top:clamp(16px,3vh,36px)}.hero-stage{height:100%;container-type:size}.hero-cards{align-self:center;width:min(100cqw,125cqh);height:min(100cqh,80cqw)}.hero-code{min-height:0}}@media (width>=900px) and (height<=760px){.hero-code{padding:12px 14px 14px;font-size:.7rem}}@media (width<=899px){.hero{grid-template-columns:1fr;grid-template-areas:"name""text""stage"}.hero-text{margin-top:18px}.hero-cards{width:100%;height:clamp(360px,100vw,460px);margin-top:32px}.hero-card.c2{width:52%;top:0;left:0;right:auto}.hero-card.c1{width:56%;inset:22% 0 auto auto}.hero-card.c3{z-index:0;width:48%;bottom:0;left:0;right:auto}.hero-code{min-height:0;padding:10px 12px 12px;font-size:.6rem}.hero-drag-hint{bottom:-24px;left:auto;right:4px}}.work-grid{perspective:1200px;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(14px,2vw,24px);display:grid}.work-card{grid-column:span 3}.work-card.w0{grid-column:span 4}.work-card.w1{grid-column:span 2}.work-card.w2,.work-card.w3{grid-column:span 3}@media (width<=900px){.work-card,.work-card.w0,.work-card.w1,.work-card.w2,.work-card.w3{grid-column:span 6}}.work-card>a{background:var(--surface);border-radius:var(--radius);border:1px solid var(--line);height:100%;box-shadow:var(--shadow);transform-style:preserve-3d;transition:box-shadow .4s var(--ease);flex-direction:column;display:flex;position:relative;overflow:hidden}.work-card>a:hover{box-shadow:var(--shadow-lift)}.work-media{aspect-ratio:16/9;background:var(--c-soft);position:relative;overflow:hidden}.work-card.w1 .work-media{aspect-ratio:4/3}.work-video{object-fit:cover;width:100%;height:100%;transition:transform .8s var(--ease)}.work-card>a:hover .work-video{transform:scale(1.04)}.work-body{flex-direction:column;flex:1;gap:8px;padding:20px 22px 24px;display:flex;position:relative}.work-kicker{color:var(--mute);letter-spacing:.04em;font-size:.78rem;font-weight:700}.work-body h3{font-size:clamp(1.4rem,2.6vw,2rem)}.work-summary{color:var(--ink-2);font-size:.94rem;line-height:1.7}.work-body .tags{margin-top:auto;padding-top:10px}.work-go{background:var(--c-soft);width:40px;height:40px;color:var(--c);transition:transform .4s var(--ease), background .3s, color .3s;border-radius:50%;place-items:center;font-weight:900;display:grid;position:absolute;top:18px;right:20px}.work-card>a:hover .work-go{background:var(--c);color:#fff;transform:rotate(-45deg)}.strip-viewport{margin-inline:calc(var(--gutter) * -1);padding:24px var(--gutter) 32px;overflow:hidden}.strip-track{cursor:grab;touch-action:pan-y;gap:clamp(14px,2vw,24px);width:max-content;display:flex}.strip-track:active{cursor:grabbing}.strip-item{width:clamp(220px,28vw,340px);cursor:inherit;text-align:left;background:#fff;border:0;border-radius:14px;flex:none;padding:10px 10px 0;box-shadow:0 2px 4px #0000000f,0 18px 34px -18px #00000057}.strip-item img{aspect-ratio:4/5;object-fit:cover;background:var(--soft);pointer-events:none;border-radius:8px;width:100%}.strip-item span{color:var(--ink-2);padding:10px 4px 12px;font-size:.84rem;font-weight:700;display:block}.strip-hint{color:var(--mute);font-size:.8rem;font-weight:700}.lightbox{z-index:100;-webkit-backdrop-filter:blur(10px);background:#ffffffeb;align-content:center;place-items:center;gap:14px;padding:24px;display:grid;position:fixed;inset:0}.lightbox img{width:auto;max-width:min(92vw,1100px);height:auto;max-height:80vh;box-shadow:var(--shadow-lift);border-radius:16px}.lightbox-cap{color:var(--ink-2);font-weight:700}.lightbox-close{background:var(--ink);color:#fff;cursor:pointer;border:0;border-radius:50%;width:46px;height:46px;font-size:1.5rem;line-height:1;position:absolute;top:18px;right:18px}