/* OCHIAI PLANNING / TOP PLAY 01. The navigation works without JavaScript. */
/* Draw UI arrows as lines, never platform-dependent emoji glyphs. */
.ui-arrow{display:inline-block;width:1em;height:1em;vertical-align:-.12em;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
:root{--paper:#fff;--ink:#505050;--blue:#247ca0;--accent:#ae7252;color-scheme:light;font-family:Arial,Helvetica,sans-serif;font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;background:var(--paper);color:var(--ink)}body{-webkit-font-smoothing:antialiased;overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button{background:none;border:0}button:focus-visible,a:focus-visible{outline:1px solid currentColor;outline-offset:5px}button:disabled{cursor:wait}[hidden]{display:none!important}
#stage{position:relative;width:100%;height:100svh;min-height:460px;isolation:isolate;overflow:hidden;background:#fff}#field{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;transition:opacity .65s}
.edge-note{position:absolute;top:max(28px,env(safe-area-inset-top));left:32px;right:32px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.22em;pointer-events:none}.edge-note>span:first-child{font-size:11px;letter-spacing:.35em}.edge-note>span:last-child{opacity:.65}
.identity{position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);width:min(700px,100%);padding:20px 24px;text-align:center;z-index:3}.identity:before{content:"";position:absolute;inset:-46px -18px;z-index:-1;background:radial-gradient(ellipse,rgba(255,255,255,.97) 0%,rgba(255,255,255,.9) 35%,rgba(255,255,255,0) 70%);pointer-events:none;transition:opacity .45s}
.wordmark{display:inline-flex;align-items:center;justify-content:center;gap:.76em;padding:22px 12px;min-height:62px;font-size:clamp(15px,1.36vw,21px);letter-spacing:.22em;font-weight:400;white-space:nowrap;transition:color .25s}.word{display:inline-flex}.letter{display:inline-block;will-change:transform,opacity;transform-origin:50% 80%}.edge-menu{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:0 20px;margin-top:11px;font-size:10px;letter-spacing:.18em}.edge-menu a,.edge-menu button{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 4px;transition:color .25s,opacity .25s;opacity:.7}.edge-menu span{display:inline-block;margin-left:6px;font-size:10px}.edge-menu a:after,.edge-menu button:after{content:"";position:absolute;left:4px;right:5px;bottom:7px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .3s cubic-bezier(.2,.8,.2,1)}.edge-menu a:hover,.edge-menu button:hover,.edge-menu a:focus-visible,.edge-menu button:focus-visible{opacity:1}.edge-menu a:hover:after,.edge-menu button:hover:after,.edge-menu a:focus-visible:after,.edge-menu button:focus-visible:after{transform:scaleX(1);transform-origin:left}
.film-window{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:min(1020px,84vw);height:min(450px,57vh);background:#151b1d;z-index:1;overflow:hidden;opacity:0;clip-path:inset(49.9% 12%);pointer-events:none;transition:clip-path .65s cubic-bezier(.12,.85,.15,1),opacity .3s,width .65s,height .65s}.film-window img{width:100%;height:100%;object-fit:cover;opacity:.7;transform:scale(1.13);transition:transform 1.7s cubic-bezier(.1,.7,.1,1)}.film-index,.film-enter{position:absolute;font-size:9px;letter-spacing:.2em;color:#fff;bottom:22px}.film-index{left:24px}.film-enter{right:24px}.is-portal .film-window{opacity:1;clip-path:inset(0)}.is-portal .film-window img{transform:scale(1.01)}.is-portal #works-link{color:#398bc0}.is-portal .identity:before{opacity:0}.is-portal #field{opacity:1}.is-leaving .film-window{width:100%;height:100%;clip-path:inset(0)}.is-leaving .wordmark,.is-leaving .edge-menu{opacity:0;transition:opacity .16s}.is-leaving .film-window img{transform:scale(1.4)}
.margin-type{position:absolute;left:8%;bottom:18%;pointer-events:none;opacity:0;transform:translateY(12px);z-index:-1;display:flex;align-items:center;gap:28px;letter-spacing:-.05em;font-size:clamp(40px,8vw,116px);font-weight:400;line-height:1}.echo-line{height:1px;width:clamp(40px,12vw,180px);background:currentColor}.margin-type.flash{animation:echo 2.5s both}@keyframes echo{0%{opacity:0;transform:translate(34px,5px);filter:blur(4px)}10%{opacity:.45;transform:translate(0,0);filter:blur(0)}14%{transform:translate(-5px,0)}19%,55%{opacity:.38;transform:translate(0,0)}100%{opacity:0;transform:translate(-35px,0)}}
.foot{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));left:32px;right:32px;min-height:44px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;font-size:9px;letter-spacing:.14em;z-index:4}.instruction{white-space:nowrap;opacity:.65}.instruction span{display:inline-block;margin-left:12px}.movements{display:flex;gap:12px;align-items:center}.movements button{position:relative;display:flex;gap:8px;align-items:center;min-width:44px;min-height:44px;padding:8px 6px;font-size:9px;letter-spacing:.11em;opacity:.6}.movements button:before{content:"";position:absolute;left:6px;right:6px;top:5px;height:1px;background:currentColor;transform:scaleX(.2);transform-origin:left;transition:transform .35s}.movements button[aria-pressed=true]{opacity:1}.movements button[aria-pressed=true]:before{transform:scaleX(1)}.movements button span{display:none}.movements button[aria-pressed=true] span{display:inline}.sound-control{display:flex;justify-content:flex-end;align-items:center;gap:15px}#sound{min-height:44px;white-space:nowrap;font-size:9px;letter-spacing:.12em;padding:8px 0}#sound-line{width:75px;height:16px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.no-script{position:absolute;bottom:105px;width:100%;text-align:center;font-size:10px;letter-spacing:.15em}.js-off .wordmark{pointer-events:none}
dialog{position:fixed;inset:0;max-width:none;max-height:none;width:100%;height:100%;height:100dvh;margin:0;padding:28px 38px 32px;border:0;background:rgba(255,255,255,.98);color:var(--ink);overflow:auto}dialog::backdrop{background:rgba(255,255,255,.8)}.about-head{display:flex;align-items:center;justify-content:space-between;gap:24px}.about-head h1{font-size:10px;letter-spacing:.2em;font-weight:400;margin:0}.about-head button{font-size:10px;letter-spacing:.12em;min-height:44px;padding:10px}.about-poem{width:min(850px,85%);margin:8vh auto 5vh}.about-poem p{font-size:clamp(32px,8.5vw,108px);font-weight:400;line-height:1.15;letter-spacing:-.045em;margin:0;display:flex;align-items:center;gap:clamp(18px,5vw,75px);border-bottom:1px solid #e5e5e5;padding:9px 0}.about-poem p span{font-size:9px;letter-spacing:.15em;min-width:30px}.about-poem p:nth-child(2){padding-left:7%}.about-poem p:nth-child(3){padding-left:14%;color:var(--blue)}.about-poem p:nth-child(4){padding-left:0}.about-end{display:block;width:min(850px,85%);margin:auto;font-size:9px;letter-spacing:.18em;line-height:2}
.edge-note>span:first-child{font-size:9px;letter-spacing:.2em}.edge-menu a,.edge-menu button,.movements button{opacity:.84}.about-poem{margin:5vh auto 4vh}.about-poem p{font-size:clamp(32px,min(8.5vw,10.5dvh),108px)}
@media(max-width:650px){.edge-note{left:22px;right:22px;top:22px}.identity{top:46%;padding:18px 12px}.wordmark{font-size:15px;letter-spacing:.18em;gap:.65em;padding:24px 6px}.edge-menu{gap:0 14px;font-size:9px;letter-spacing:.12em;margin-top:12px}.foot{left:22px;right:22px;bottom:18px;grid-template-columns:1fr 1fr;gap:10px 0}.instruction{grid-column:1/-1;text-align:center;font-size:8px;margin-bottom:8px}.movements{gap:8px}.sound-control{gap:6px}#sound-line{width:40px}.margin-type{bottom:24%;left:7%;font-size:48px}.film-window{top:46%;width:92vw;height:43vh;min-height:240px}.film-index{font-size:7px;left:16px;right:45px;line-height:1.8;max-width:65%}.film-enter{right:16px;font-size:8px}dialog{padding:18px 20px}.about-poem{width:100%;margin-top:15vh}.about-end{width:100%;margin-top:35px}}
@media(max-height:520px) and (min-width:651px){#stage{min-height:360px}.identity{top:46%}.margin-type{bottom:16%;font-size:44px}.film-window{height:62vh}.foot{bottom:10px}.about-poem{margin:15px auto}.about-poem p{font-size:45px}}
@media(max-width:360px){.movements{gap:4px}#sound-line{display:none}.foot{gap:10px 6px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.letter{transform:none!important;opacity:1!important}.margin-type{display:none}.film-window img{transform:none!important}}
.foot .sound-control{grid-column:3}
@media(max-width:650px){.foot .sound-control{grid-column:2}}