:root{--c-ink: #F4F2EE;--c-paper: #141413;--c-mute: rgba(244, 242, 238, .58);--c-line: #34332F}html{background:#141413;color-scheme:dark}.c-cursor{color:var(--c-ink)}.c-cursor:before{background:var(--c-ink)}.c-cursor__label{color:var(--c-paper)}.c-scroll{color:var(--c-ink)}.p-page{padding:0 var(--side-r) 0 var(--side-l)}.p-top{display:flex;justify-content:space-between;gap:1rem;padding-top:calc(var(--gutter) + env(safe-area-inset-top,0px))}.p-top__k{color:var(--c-mute)}.p-back:hover,.p-foot a:hover{text-decoration:underline;text-underline-offset:.25em}.p-hero{padding-inline:0;padding-block:clamp(4rem,14vh,10rem) clamp(2rem,5vh,4rem)}.p-title{font:400 var(--fs-num)/.78 var(--ff-serif);letter-spacing:-.03em;text-transform:uppercase;margin-left:-.04em}.p-title>div{padding-top:.3em;margin-top:-.3em}.p-hero__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:clamp(2rem,5vh,3.5rem);padding-top:1rem;border-top:1px solid currentColor}.p-proj{position:relative;padding-block:clamp(1rem,2vw,1.75rem) clamp(5rem,14vh,10rem);display:grid;gap:clamp(2rem,5vw,4rem)}.p-rule{position:absolute;left:0;right:0;top:0;height:1px;background:currentColor;transform-origin:left}.p-proj__head{display:grid;grid-template-columns:5ch 1fr auto;align-items:end;gap:1rem}.p-proj__n{align-self:start;padding-top:.9rem}.p-proj__name{font:400 var(--fs-work)/.82 var(--ff-serif);letter-spacing:-.02em;text-transform:uppercase}.p-proj__meta{display:grid;justify-items:end;gap:.15rem;padding-bottom:.5rem}.p-say{font-size:clamp(1.9rem,.8rem + 4.2vw,5.4rem);line-height:.98;max-width:16ch}.p-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.p-facts>div{border-top:1px solid currentColor;padding-top:.9rem;display:grid;gap:.5rem;align-content:start}.p-facts dt{color:var(--c-mute)}.p-cap{display:flex;justify-content:space-between;gap:1rem;margin-top:.9rem}.p-cap span:first-child{color:var(--c-mute)}.p-shot img{width:100%;height:auto}.p-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,3vw,3rem);max-width:56rem}[data-ink] img,[data-ink] iframe{filter:grayscale(1);transition:filter .7s var(--ease-out)}[data-ink].is-color img,[data-ink].is-color iframe{filter:none}@media(hover:hover){[data-ink]:hover img,[data-ink]:hover iframe,.p-duo:hover [data-ink] img{filter:none}}.p-cmp__tabs{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-bottom:1rem}.p-cmp__tabs button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--c-mute);cursor:pointer;padding:.3rem 0;border:0;border-bottom:1px solid transparent;background:none}.p-cmp__tabs button[aria-selected=true],.p-cmp__tabs button:hover{color:var(--c-ink);border-bottom-color:currentColor}.p-cmp__frame{position:relative;aspect-ratio:var(--ar, 16 / 10);overflow:hidden;background:#0b0b0c;user-select:none;-webkit-user-select:none}.p-cmp__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.p-cmp__after{clip-path:inset(0 0 0 var(--x))}.p-cmp__line{position:absolute;top:0;bottom:0;left:var(--x);width:1px;background:var(--c-ink);pointer-events:none}.p-cmp__line:after{content:"";position:absolute;inset:0 -1px;background:var(--c-paper);opacity:.6;z-index:-1}.p-cmp__line i{position:absolute;top:50%;left:50%;width:56px;height:56px;translate:-50% -50%;border-radius:50%;background:var(--c-ink);color:var(--c-paper);display:grid;place-items:center;font:500 10px/1 var(--ff-mono);letter-spacing:.08em}.p-cmp__line i:before{content:"← →"}.p-cmp__tag{position:absolute;bottom:.9rem;padding:.45rem .65rem;pointer-events:none;background:var(--c-paper);color:var(--c-ink)}.p-cmp__tag--l{left:.9rem}.p-cmp__tag--r{right:.9rem;background:var(--c-ink);color:var(--c-paper)}.p-cmp__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;touch-action:pan-y}.p-cmp__range::-webkit-slider-thumb{-webkit-appearance:none;width:56px;height:100vh}.p-cmp__range::-moz-range-thumb{width:56px;height:100vh;border:0}.p-cmp__frame:has(.p-cmp__range:focus-visible) .p-cmp__line i{outline:2px solid var(--c-ink);outline-offset:3px}.p-foot{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid currentColor;padding-block:1.25rem calc(2.5rem + env(safe-area-inset-bottom,0px))}.has-motion-switch .p-foot{padding-bottom:calc(var(--gutter) + 28px + .75rem + env(safe-area-inset-bottom,0px))}:root .gz-motion{left:auto;right:var(--side-r);flex-direction:row-reverse}@media(max-width:719px){.p-foot{flex-direction:column;gap:.5rem}.p-hero__row{grid-template-columns:1fr;gap:.35rem}.p-proj__head{grid-template-columns:1fr;gap:.5rem}.p-proj__n{padding-top:0}.p-proj__meta{justify-items:start;grid-auto-flow:column;justify-content:start;gap:1rem}.p-facts{grid-template-columns:1fr 1fr}.p-cmp__tag{bottom:.5rem;padding:.35rem .5rem;font-size:10px}.p-cmp__tag--l{left:.5rem}.p-cmp__tag--r{right:.5rem}.p-cmp__line i{width:44px;height:44px;font-size:9px}}.p-key{display:inline-block;opacity:0;transition:translate .08s ease-out,color .08s}.p-key.is-typed{opacity:1}.p-key.is-hit{animation:p-hit .22s ease-out}@keyframes p-hit{0%{translate:0 -.14em}45%{translate:0 .06em;scale:1 .95}to{translate:0 0;scale:1 1}}.p-key.is-down{translate:0 .07em;color:var(--c-mute);transition-duration:.04s}.p-key:not(.p-key--sp){cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.p-caret{display:inline-block;width:.05em;height:.72em;margin-left:.05em;background:currentColor;vertical-align:baseline;animation:p-blink 1s steps(1) infinite;transition:opacity .6s}.p-caret.is-done{opacity:0;animation:none}@keyframes p-blink{50%{opacity:0}}.p-trav{display:inline-block;position:relative;translate:0 calc((1 - var(--t, 0)) * -.3em);opacity:calc(.16 + var(--t, 0) * .44);transition:opacity .18s}.p-trav:after{content:"";position:absolute;left:0;right:0;bottom:-.06em;border-bottom:max(1px,.03em) dashed currentColor;opacity:.5;transition:opacity .25s}.p-trav.is-on{opacity:1}.p-trav.is-on:after{opacity:0}.p-proj__name.is-parts{position:relative}.p-part{display:inline-block;opacity:0;translate:0 -.5em}.p-part.is-in{opacity:1;translate:0 0;transition:translate .32s cubic-bezier(.3,1.5,.5,1),opacity .2s}.p-part.is-wrong{color:var(--c-mute);animation:p-shake .36s .26s ease-in-out}.p-part.is-out{opacity:0;translate:0 -.5em;transition:translate .24s ease-in,opacity .2s}@keyframes p-shake{20%{rotate:-6deg}40%{rotate:5deg}60%{rotate:-3deg}80%{rotate:2deg}}.p-why{position:absolute;top:100%;margin-top:.4rem;white-space:nowrap;font-size:var(--fs-mono);line-height:1.3;color:var(--c-mute);font-style:italic;text-transform:none;letter-spacing:.02em;opacity:0;translate:0 -.3rem;transition:opacity .25s,translate .25s}.p-why.is-on{opacity:1;translate:0 0}.p-valid{display:inline-block;vertical-align:top;margin-left:.6rem;padding:.35rem .6rem;border-radius:999px;font-size:var(--fs-mono);line-height:1;letter-spacing:.08em;color:#1e7b45;background:#e3f3e8;opacity:0;scale:.6;transition:opacity .3s,scale .4s cubic-bezier(.3,1.6,.5,1),color .8s,background-color .8s}.p-valid.is-on{opacity:1;scale:1}.p-valid.is-settled{color:var(--c-ink);background:transparent;box-shadow:inset 0 0 0 1px currentColor}.p-badge{display:inline-block;margin-right:.6rem;padding:.25rem .5rem;border-radius:999px;font-size:10px;line-height:1;color:var(--c-mute);box-shadow:inset 0 0 0 1px var(--c-line);transition:color .3s,background-color .3s,box-shadow .3s}.p-badge.is-pass{color:#1e7b45;background:#e3f3e8;box-shadow:none;animation:p-pop .35s ease-out}@keyframes p-pop{40%{scale:1.15}}@media(prefers-reduced-motion:reduce){:where(:root:not(.is-motion)) .p-key,:where(:root:not(.is-motion)) .p-part,:where(:root:not(.is-motion)) .p-trav,:where(:root:not(.is-motion)) .p-valid,:where(:root:not(.is-motion)) .p-badge{transition:none!important;animation:none!important}}.p-live__bar{display:flex;justify-content:space-between;gap:1rem;padding:.7rem .9rem;border:1px solid currentColor;border-bottom:0}.p-live__bar span:last-child{color:var(--c-mute)}.p-live__frame{display:block;width:100%;height:min(78vh,760px);border:1px solid currentColor;background:#141413}@media(max-width:719px){.p-live__frame{height:640px}}.p-curtain{position:fixed;inset:0;z-index:100;display:grid;place-items:center;pointer-events:none;background:#141413;box-shadow:inset 0 1px #f4f2ee;transform:scaleY(0);transform-origin:50% 100%;transition:transform .7s var(--ease-io)}.p-curtain__mark{font:400 clamp(3.5rem,2rem + 9vw,10rem)/.8 var(--ff-serif);letter-spacing:-.015em;color:#f4f2ee;opacity:0;translate:0 .25em;transition:opacity .45s .35s,translate .6s .35s var(--ease-out)}html.is-leaving .p-curtain{transform:scaleY(1);pointer-events:auto}html.is-leaving .p-curtain__mark{opacity:1;translate:0 0}.p-pin{position:relative}.p-pin>.p-cmp{position:sticky;width:min(100%,calc((100svh - 190px)*1.6));margin-inline:auto}
