.why-interface{--why-accent:#0879f9;--why-angle:0deg;box-sizing:border-box;position:relative;min-height:100svh;padding:clamp(92px,9vw,132px) var(--shell-edge) clamp(58px,6vw,90px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr auto;overflow:hidden;background:#f5f5f7;color:#1d1d1f;isolation:isolate}.why-grid{position:absolute;z-index:-2;inset:0;background-image:linear-gradient(rgba(29,29,31,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(29,29,31,.055) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(90deg,#000,transparent 92%)}.why-interface:after{content:"";position:absolute;z-index:-1;left:57%;top:48%;width:52vw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--why-accent) 20%,transparent),transparent 67%);transform:translate(-50%,-50%);transition:background .6s ease}.why-header{grid-column:1/13;display:flex;align-items:flex-start;justify-content:space-between}.why-header p{margin:0;display:grid;gap:7px}.why-header span,.why-header small{color:#6e6e73;font:700 9px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.11em}.why-header strong{font:650 clamp(20px,2vw,30px)/1 sans-serif;letter-spacing:-.04em}.why-stage{grid-column:1/8;align-self:center;position:relative;z-index:2}.why-question{margin:0;color:#1d1d1f;font:680 clamp(58px,8.2vw,132px)/.8 -apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif;letter-spacing:-.08em}.why-word-window{height:clamp(74px,11vw,166px);overflow:hidden}.why-word-window strong{display:block;color:var(--why-accent);font:680 clamp(68px,10.5vw,170px)/.82 -apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif;letter-spacing:-.09em;white-space:nowrap;transition:color .5s}.why-word-window strong.is-changing{animation:why-word-change .5s cubic-bezier(.16,1,.3,1)}.why-answer{max-width:520px;margin:26px 0 0;color:#6e6e73;font-size:clamp(15px,1.3vw,20px);line-height:1.45;transition:opacity .25s,transform .4s}.why-answer.is-changing{opacity:0;transform:translateY(12px)}.why-orbit{grid-column:8/13;align-self:center;justify-self:center;position:relative;width:min(35vw,480px);aspect-ratio:1;border-radius:50%;cursor:grab;touch-action:none;outline:0}.why-orbit:focus-visible{box-shadow:0 0 0 2px var(--why-accent),0 0 0 8px color-mix(in srgb,var(--why-accent) 15%,transparent)}.why-orbit.is-dragging{cursor:grabbing}.why-orbit-ring{position:absolute;inset:11%;border:1px solid #aeaeb2;border-radius:50%;transform:rotate(var(--why-angle));transition:transform .65s cubic-bezier(.16,1,.3,1)}.why-orbit-ring:before,.why-orbit-ring:after{content:"";position:absolute;inset:10%;border:1px dashed color-mix(in srgb,var(--why-accent) 52%,transparent);border-radius:50%}.why-orbit-ring:after{inset:38%;border-style:solid;background:color-mix(in srgb,var(--why-accent) 10%,transparent)}.why-orbit-item{position:absolute;left:50%;top:50%;width:90px;min-height:34px;padding:8px;border:1px solid #d2d2d7;border-radius:999px;background:rgba(255,255,255,.9);color:#6e6e73;font:700 9px/1 sans-serif;letter-spacing:.08em;cursor:pointer;transform:translate(-50%,-50%) rotate(calc(var(--i) * 90deg + var(--why-angle))) translateY(calc(min(17.5vw,210px) * -1)) rotate(calc((var(--i) * 90deg + var(--why-angle)) * -1));transition:transform .65s cubic-bezier(.16,1,.3,1),background .3s,color .3s,border-color .3s}.why-orbit-item:nth-of-type(1){--i:0}.why-orbit-item:nth-of-type(2){--i:1}.why-orbit-item:nth-of-type(3){--i:2}.why-orbit-item:nth-of-type(4){--i:3}.why-orbit-item.is-active{border-color:var(--why-accent);background:var(--why-accent);color:#fff;box-shadow:0 12px 32px color-mix(in srgb,var(--why-accent) 28%,transparent)}.why-orbit-core{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:#1d1d1f;color:#fff;transform:translate(-50%,-50%) rotate(calc(var(--why-angle) * -.1));box-shadow:0 22px 55px rgba(0,0,0,.18);transition:transform .6s cubic-bezier(.16,1,.3,1)}.why-orbit-core b{font:700 clamp(24px,3vw,44px)/1 sans-serif;letter-spacing:-.07em}.why-orbit-core i{position:absolute;right:18%;top:13%;color:var(--why-accent);font:700 22px/1 sans-serif;font-style:normal}.why-route{grid-column:1/9;align-self:end;display:flex;align-items:center;gap:12px;color:#86868b;font:700 8px/1 sans-serif;letter-spacing:.09em}.why-route span{display:flex;align-items:center;gap:7px;white-space:nowrap}.why-route b{color:var(--why-accent)}.why-route>i{width:clamp(22px,4vw,64px);height:1px;background:#c7c7cc}.why-enter{grid-column:9/13;align-self:end;justify-self:end;display:flex;align-items:center;gap:14px;color:#1d1d1f;text-decoration:none;font:650 12px/1 sans-serif}.why-enter i{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:var(--why-accent);color:#fff;font-size:18px;font-style:normal;transition:transform .35s cubic-bezier(.16,1,.3,1)}.why-enter:hover i{transform:translateY(7px) rotate(12deg)}
@keyframes why-word-change{0%{opacity:0;transform:translateY(95%) rotate(3deg);filter:blur(10px)}100%{opacity:1;transform:none;filter:none}}
@media(max-width:900px){.why-interface{min-height:900px;padding:86px 22px 48px;grid-template-columns:1fr;grid-template-rows:auto auto 1fr auto auto;gap:28px}.why-header,.why-stage,.why-orbit,.why-route,.why-enter{grid-column:1}.why-header small{display:none}.why-stage{align-self:end}.why-question{font-size:clamp(48px,13vw,82px)}.why-word-window{height:clamp(62px,16vw,104px)}.why-word-window strong{font-size:clamp(58px,15vw,98px)}.why-orbit{width:min(76vw,420px)}.why-orbit-item{transform:translate(-50%,-50%) rotate(calc(var(--i) * 90deg + var(--why-angle))) translateY(calc(min(38vw,180px) * -1)) rotate(calc((var(--i) * 90deg + var(--why-angle)) * -1))}.why-route{overflow-x:auto;padding-bottom:6px}.why-enter{justify-self:start}.why-interface:after{left:50%;top:68%;width:100vw}}
@media(prefers-reduced-motion:reduce){.why-interface *{animation:none!important;transition:none!important}}
.why-orbit-item{width:110px}
/* Shared white portfolio surface. */
.why-interface{background:var(--paper)!important}
.why-grid{opacity:.42}
