.hero{-webkit-user-select:none;user-select:none;background:#000;position:fixed;inset:0;overflow:hidden}.hero-canvas{cursor:grab;touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.hero.is-hovering .hero-canvas{cursor:pointer}.hero.is-dragging .hero-canvas{cursor:grabbing}.ui-in{opacity:0;transition:opacity .9s var(--ease-out), transform 1.1s var(--ease-out);transform:translateY(18px)}.hero.is-in .ui-in{opacity:1;transform:none}.hero-loader{z-index:5;pointer-events:none;transition:opacity .6s var(--ease-out), transform 1.2s var(--ease-in-out), filter .6s var(--ease-out);place-items:center;display:grid;position:absolute;inset:0}.hero-loader canvas{image-rendering:pixelated;display:block}.hero-loader.is-out{opacity:0;filter:blur(6px);transform:translateY(-60px)scale(.96)}.hero-toggle{z-index:4;border-radius:40px;align-items:center;width:90px;height:50px;padding:5px;display:flex;position:absolute;bottom:32px;left:15px}.hero-toggle-knob{width:40px;height:40px;transition:transform .7s var(--ease-spring);background:#fff;border-radius:40px;position:absolute;top:5px;left:5px}.hero-toggle.is-list .hero-toggle-knob{transform:translate(40px)}.hero-toggle button{color:#fff;place-items:center;width:40px;height:40px;transition:color .3s ease-in-out .35s;display:grid;position:relative}.hero-toggle button[aria-pressed=true]{color:#000}.hero-filter{z-index:4;flex-direction:column;align-items:flex-end;gap:10px;display:flex;position:absolute;bottom:32px;right:40px}.hero-filter-btn{color:#000;border-radius:48px;min-width:81.6px;padding:16px 21px;font-size:clamp(16px,1.5vw,17.92px);font-weight:500;line-height:1.4;transition:background-color .3s ease-in-out;position:relative}.hero-filter-btn.is-open,.hero-filter-btn.has-filter{background:#fff}@media (min-width:1920px){.hero-filter-btn{padding:18px 21px}}.hero-filter-panel{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform-origin:100% 100%;opacity:0;pointer-events:none;min-width:220px;transition:opacity .35s var(--ease-out), transform .5s var(--ease-out);background:#fff8;border-radius:24px;flex-direction:column;gap:2px;padding:8px;display:flex;transform:translateY(10px)scale(.96)}.hero-filter-panel.is-open{opacity:1;pointer-events:auto;transform:none}.hero-filter-panel button{color:#000;text-align:left;border-radius:20px;justify-content:space-between;align-items:center;height:40px;padding:0 16px;font-size:16px;font-weight:500;transition:background-color .25s;display:flex}.hero-filter-panel button:hover{background:#ffffff80}.hero-filter-panel button.is-active{background:#fff}.hero-filter-panel .count{font-family:var(--font-mono), monospace;opacity:.55;font-size:11px}.hero-list{z-index:2;scrollbar-width:none;opacity:0;pointer-events:none;transition:opacity .6s var(--ease-out);background:#000;padding:132px 40px 180px;position:absolute;inset:0;overflow-y:auto}.hero-list::-webkit-scrollbar{display:none}.hero-list.is-open{opacity:1;pointer-events:auto}.hero-list-head,.hero-list li{grid-template-columns:70px 560px 430px 1fr 80px;align-items:center;display:grid}.hero-list-head{font-family:var(--font-mono), monospace;letter-spacing:.08em;text-transform:uppercase;color:#6b6b6b;opacity:0;transition:opacity .6s var(--ease-out);padding-bottom:14px;font-size:11px;font-weight:500}.hero-list.is-open .hero-list-head{opacity:1}.hero-list ul{list-style:none}.hero-list li{color:#fff;cursor:pointer;opacity:0;transition:opacity .6s var(--ease-out), transform .8s var(--ease-out), color .3s, border-color .3s;border-top:1px solid #2a2a2a;padding:13px 0;transform:translateY(16px)}.hero-list.is-open li{opacity:1;transform:none}.hero-list ul:hover li:not(.is-active){color:#4d4d4d}.hero-list li.is-active{border-top-color:#ffffff54}.hero-list .c-client{letter-spacing:-.03em;font-size:40px;font-weight:500;line-height:1}.hero-list .c-index,.hero-list .c-title,.hero-list .c-year{font-family:var(--font-mono), monospace;letter-spacing:.08em;text-transform:uppercase;font-size:11px;font-weight:500}.hero-list .c-index{color:#3d3d3d;transition:color .3s}.hero-list li.is-active .c-index{color:#fff}.hero-list .c-year{text-align:right}.hero-list .c-tags{gap:6px;display:flex}.hero-list .c-tags em{font-style:normal;font-family:var(--font-mono), monospace;letter-spacing:.08em;text-transform:uppercase;color:#6e6e6e;background:#1a1a1a;border-radius:20px;padding:6px 11px;font-size:10px;font-weight:500;transition:background-color .3s,color .3s}.hero-list li.is-active .c-tags em{color:#000;background:#fff}.hero-list-fade{pointer-events:none;background:linear-gradient(#0000,#000000f2 62%,#000);height:235px;position:fixed;bottom:0;left:0;right:0}.hero-list-preview{pointer-events:none;opacity:0;width:300px;height:300px;transition:opacity .3s var(--ease-out), scale .5s var(--ease-out);background:#f1f1f1;border-radius:6px;position:fixed;top:0;left:0;overflow:hidden;scale:.85;box-shadow:0 30px 60px #000000b3}.hero-list-preview.is-on{opacity:1;scale:1}.hero-list-preview img{object-fit:cover;opacity:0;width:100%;height:100%;position:absolute;inset:0}.hero-list-preview img.is-on{opacity:1}@media (max-width:760px){.hero-toggle{display:none}.hero-filter{bottom:20px;right:20px}.hero .hero-nav{margin-left:16px}.hero-filter-btn{height:50px;padding:0 18px;font-size:15px}.hero-list-head{display:none}.hero-list li{grid-template-columns:34px 1fr auto}.hero-list .c-client{font-size:26px}.hero-list .c-title,.hero-list .c-tags{display:none}}.hero.is-clean>:not(.hero-canvas){display:none}