:root{color-scheme:light;--paper:#e9e6dd;--ink:#203b3c;--muted:#69716d;--rule:#bbc2b8;--mint:#bfead8}
*{box-sizing:border-box}
html,body{margin:0;min-width:280px;width:100%;min-height:100%;background:var(--paper);color:var(--ink)}
body{font-family:"Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN",Meiryo,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.experience{position:relative;display:flex;flex-direction:column;width:100%;height:100svh;min-height:360px;overflow:hidden;background:var(--paper)}
.masthead{position:absolute;z-index:2;top:max(34px,env(safe-area-inset-top));left:4.7%;right:4.7%;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;pointer-events:none}
.signature{display:flex;align-items:center;gap:12px;pointer-events:auto}
.signature svg{width:24px;height:38px}
h1{font-family:Arial,Helvetica,sans-serif;font-size:24px;font-weight:500;letter-spacing:.23em;line-height:1;margin:0}
.signature p{font-size:10px;letter-spacing:.12em;margin:9px 0 0;color:var(--muted)}
.options{display:flex;gap:20px;align-items:center;pointer-events:auto}
.option{background:none;border:0;min-height:44px;padding:5px 0;cursor:pointer;color:#546563;font-size:11px;letter-spacing:.03em;display:flex;align-items:center;gap:8px}
.option:hover{color:#152f30}
.option[aria-pressed=true].motion{color:#193e38;text-decoration:underline;text-underline-offset:5px}
.sound svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}
.sound-off{display:none}
.sound[aria-pressed=false] .sound-waves{display:none}
.sound[aria-pressed=false] .sound-off{display:block}
.stage{position:absolute;inset:0}
canvas{display:block;width:100%;height:100%;outline:0}
.stage-caption{position:absolute;bottom:24%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:13px;font-size:11px;letter-spacing:.19em;color:#617370;white-space:nowrap;pointer-events:none}
.caption-line{width:27px;height:1px;background:#93aba0}
.controls{position:absolute;left:4.7%;right:4.7%;bottom:max(34px,env(safe-area-inset-bottom));z-index:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:28px;pointer-events:none}
.action{text-align:center;pointer-events:auto}
.strike{position:relative;display:flex;align-items:center;gap:39px;min-width:225px;justify-content:center;border:1px solid #203b3c;background:#203b3c;color:#f0f4e9;border-radius:2px;min-height:62px;padding:15px 24px;cursor:pointer;box-shadow:0 5px 0 -3px #a9b9ac;transition:background .16s,transform .16s,box-shadow .16s;overflow:hidden}
.strike:before{content:"";position:absolute;top:-35px;left:-40px;height:150px;width:20px;background:#daffe00b;transform:rotate(35deg);transition:left .35s}
.strike:hover:not(:disabled):before{left:110%}
.strike:hover:not(:disabled){background:#2f5050;transform:translateY(-2px);box-shadow:0 8px 0 -5px #96aaa0}
.strike:active:not(:disabled){transform:translateY(1px);box-shadow:none}
.strike:disabled{cursor:default;background:#344e4c;color:#c1d0c4}
#strike-label{font-size:19px;letter-spacing:.17em;font-weight:500}
.strike-icon{font-family:Arial,sans-serif;font-size:24px;font-weight:normal;color:#c3e4cf}
.strike-tail{font-size:10px;letter-spacing:.16em;color:#a3b9ad}
.action p{font-size:10px;letter-spacing:.09em;color:var(--muted);margin:14px 0 0}
.phase{display:flex;gap:15px;align-items:center;align-self:center;color:#6d7d75;min-width:100px;padding-bottom:15px}
#phase-number{font-family:Georgia,serif;font-size:32px;line-height:1;font-style:italic;font-weight:normal;color:#455f56}
#phase-label{font-size:10px;letter-spacing:.2em;display:block;margin-bottom:10px}
.phase-track{width:62px;height:1px;background:#b8c0b3;display:block;overflow:visible}
.phase-track i{height:1px;display:block;width:0;background:#335a4b;transition:width .1s linear}
.edition{justify-self:end;align-self:center;padding-bottom:15px;font:9px/1.8 Arial,sans-serif;letter-spacing:.18em;color:#7c8980;text-align:right;display:flex;flex-direction:column}
button:focus-visible{outline:2px solid #38745f;outline-offset:5px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.no-script{position:absolute;top:45%;left:15%;right:15%;text-align:center}
@media (max-width:640px){.masthead{top:max(23px,env(safe-area-inset-top));left:6%;right:6%}.signature{gap:9px}.signature svg{width:20px;height:30px}h1{font-size:20px}.signature p{font-size:9px;letter-spacing:.03em;margin-top:7px}.options{gap:14px}.option{font-size:10px}.motion{max-width:44px;line-height:1.65;text-align:center}.sound{gap:5px}.sound span{display:none}.stage-caption{bottom:27%;font-size:10px;letter-spacing:.1em}.controls{left:6%;right:6%;bottom:max(30px,env(safe-area-inset-bottom));grid-template-columns:1fr auto 1fr;gap:12px}.strike{min-width:186px;min-height:60px;padding:14px 18px;gap:26px}.strike-tail{display:none}.phase{min-width:0;gap:7px;flex-direction:column;align-items:flex-start;padding-bottom:20px}#phase-number{font-size:25px}.phase-track{width:27px}#phase-label{font-size:9px;letter-spacing:.1em;margin-bottom:8px}.edition{font-size:8px;letter-spacing:.06em;padding-bottom:20px}.action p{font-size:9px;margin-top:13px}}
@media (max-height:550px) and (min-width:641px){.masthead{top:20px}.controls{bottom:17px}.strike{min-height:48px;padding:10px 23px}.action p{margin-top:8px}.stage-caption{display:none}.signature p{display:none}.signature svg{height:26px}.edition,.phase{padding-bottom:8px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}

.motion-short{display:none}
@media(max-width:640px){.motion-full{display:none}.motion-short{display:inline}.motion{max-width:none;white-space:nowrap}}

@media(max-width:360px){.edition{display:none}.controls{grid-template-columns:28px 1fr 28px;gap:8px}.action{grid-column:2}.phase{grid-column:1}.strike{min-width:150px;width:100%;gap:20px}.signature p{font-size:8px}}