*{box-sizing:border-box}body{margin:0;background:#e9e9e6;color:#202124;font:16px Arial,sans-serif}a{color:inherit}button,input{font:inherit}button{padding:12px 20px;background:#1a1a20;color:white;border:0;cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #e76531;outline-offset:4px}header,main,footer{max-width:1240px;margin:auto;padding:25px 28px}header{display:flex;justify-content:space-between;border-bottom:1px solid #bbb;font-size:14px}h1{font-size:48px;font-weight:400;letter-spacing:-.045em;margin:16px 0}p{line-height:1.55}.controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:20px 0}.controls label{flex:1;min-width:240px}.controls input{width:75%}.stage-wrap{position:relative;aspect-ratio:16/9;overflow:hidden;background:#100e14;container-type:inline-size}.stage{position:absolute;inset:0;overflow:hidden;font-family:Arial,sans-serif;--p:0;background:#100e14;color:#f5efe6}.motion-nav{position:absolute;z-index:4;top:5%;left:5%;right:5%;display:flex;justify-content:space-between;font-size:1.6cqw;padding-bottom:2%;border-bottom:1px solid #ffffff40}.motion-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:translateX(calc(var(--p)*-44%)) scale(calc(1 - var(--p)*.15));opacity:calc(1 - var(--p)*.7)}.motion-heading{position:absolute;top:23%;left:5%;font-size:6cqw;line-height:1.03;letter-spacing:-.055em;margin:0;font-weight:400;opacity:calc(1 - var(--p)*1.7);z-index:2}.motion-stage-intro{position:absolute;bottom:8%;left:5%;width:40%;font-size:1.65cqw;line-height:1.4;opacity:calc(1 - var(--p)*1.5)}.motion-sheet{position:absolute;top:22%;left:30%;width:65%;bottom:7%;padding:4%;background:#f2f0ec;color:#27232b;transform:translateX(calc((1 - var(--p))*125%));border-left:.7cqw solid #da8961}.motion-sheet small{font-size:1.4cqw;letter-spacing:.06em}.motion-sheet h2{font-size:5cqw;line-height:1;letter-spacing:-.055em;font-weight:400;margin:4% 0}.motion-sheet p{font-size:1.6cqw;line-height:1.5;max-width:95%}.motion-flow{border-top:1px solid #aaa;padding:5% 0;display:flex;justify-content:space-between;font-size:2cqw}.motion-sheet .rest{font-size:1.3cqw}.stage.folio{background:#f2f3ef;color:#1527b2}.folio .motion-art{width:55%;height:73%;top:15%;left:45%;transform:translateY(calc(var(--p)*-100%));opacity:calc(1 - var(--p))}.folio .motion-heading{font-family:Georgia,serif;font-size:7.3cqw}.folio .motion-nav{border-color:#1527b2}.folio .motion-sheet{background:#f2f3ef;color:#1527b2;border-left:1px solid #1527b2;transform:translateY(calc((1 - var(--p))*140%));left:23%;width:72%;padding-top:2%}.folio .motion-sheet h2{font-family:Georgia,serif}.stage.practice{background:#e8f044;color:#182020}.practice .motion-art{left:53%;width:47%;transform:translateY(calc(var(--p)*-105%));opacity:1}.practice .motion-heading{font-family:Impact,'Arial Narrow',sans-serif;font-size:11.3cqw;line-height:.9;top:23%;transform:translateY(calc(var(--p)*-160%));opacity:1}.practice .motion-nav{border-color:#182020}.practice .motion-sheet{background:#182020;color:#e8f044;transform:translateY(calc((1 - var(--p))*140%));top:19%;left:5%;width:90%;bottom:6%;border:0;padding:3%}.practice .motion-sheet h2{font-family:Impact,'Arial Narrow',sans-serif;font-size:7cqw;letter-spacing:-.02em;margin:2% 0}.practice .motion-sheet p{color:#edf0d5;max-width:75%}.practice .motion-flow{border-color:#e8f044}.frame-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin:28px 0}.frame-grid h3{font-size:18px;font-weight:400;margin:18px 0 6px}.frame-grid p{font-size:15px;line-height:1.5}.motion-note{display:grid;grid-template-columns:1fr 1fr;gap:40px;border-top:1px solid #aaa;padding-top:20px}.motion-note h2{font-size:22px;font-weight:400}.motion-note p{font-size:16px}.state{font-size:14px;margin-left:auto}.board-caption{font-size:14px;color:#56565e}.static-page header{margin-bottom:20px}.static-page .frame-grid{grid-template-columns:1fr;gap:25px}.static-page .frame-grid article{display:grid;grid-template-columns:2fr 1fr;gap:28px}.static-page .stage-wrap{width:100%}.static-page .frame-grid h3{font-size:24px;margin-top:25px}.static-page .frame-grid p{font-size:18px}.static-page main{max-width:1380px}.static-page .motion-note{margin-top:40px}.static-page h1{font-size:52px}
@media(max-width:700px){h1{font-size:36px}header,main,footer{padding:22px}.frame-grid,.motion-note{grid-template-columns:1fr}.stage-wrap{aspect-ratio:4/5}.motion-nav{font-size:3cqw;top:5%}.motion-heading{font-size:10cqw;top:16%;width:90%}.motion-art{object-position:75%;height:70%;top:15%;transform:translateY(calc(var(--p)*-40%));opacity:calc(1 - var(--p)*.8)}.motion-stage-intro{width:88%;font-size:3.5cqw}.motion-sheet{left:5%;width:90%;top:35%;bottom:5%;transform:translateY(calc((1 - var(--p))*160%));padding:5%;border-left:0;border-top:1.5cqw solid #da8961}.motion-sheet small{font-size:2.8cqw}.motion-sheet h2{font-size:8cqw;margin:6% 0}.motion-sheet p{font-size:3.3cqw}.motion-flow{font-size:4cqw}.motion-sheet .rest{font-size:2.8cqw}.static-page .frame-grid article{display:block}.folio .motion-sheet{left:5%;width:90%;top:32%}.folio .motion-heading{font-size:14cqw}.practice .motion-heading{font-size:20cqw}.practice .motion-sheet h2{font-size:12cqw}.practice .motion-sheet p{max-width:100%}.practice .motion-sheet{top:28%}.controls label{min-width:100%}}
.practice .motion-heading{opacity:clamp(0,calc(2 - var(--p)*2),1)}.stage .motion-nav{background:#100e14;box-shadow:0 -3cqw 0 3cqw #100e14}.stage.folio .motion-nav{background:#f2f3ef;box-shadow:0 -3cqw 0 3cqw #f2f3ef}.stage.practice .motion-nav{background:#e8f044;box-shadow:0 -3cqw 0 3cqw #e8f044}