:root{font-family:DM Sans,Noto Sans JP,sans-serif;color:#fff;line-height:1.4;background:#101225;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #ffcf7e;outline-offset:4px}.hidden{display:none!important}.app{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 72% 42%,#3b315f 0,#1b1c39 35%,#111428 69%,#0e1224)}#scene{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block}.backdrop{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(11,13,30,.92) 0,rgba(11,13,30,.68) 29%,transparent 59%),linear-gradient(0deg,rgba(12,14,30,.9),transparent 23%,transparent 78%,rgba(12,14,30,.43))}.grid{position:absolute;inset:0;z-index:0;opacity:.24;background-image:linear-gradient(#ffffff10 1px,transparent 1px),linear-gradient(90deg,#ffffff10 1px,transparent 1px);background-size:75px 75px;-webkit-mask-image:linear-gradient(0deg,#000,transparent 82%);mask-image:linear-gradient(0deg,#000,transparent 82%)}.topbar{position:relative;z-index:8;display:flex;align-items:center;justify-content:space-between;height:88px;padding:0 clamp(22px,5vw,80px);border-bottom:1px solid #ffffff19}.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:-.055em;font-size:22px;line-height:.85;white-space:nowrap}.brand-mark{display:flex;align-items:center;justify-content:center;color:#151224;background:#ffb16f;border-radius:10px;width:33px;height:33px;font-size:23px;letter-spacing:0;box-shadow:0 0 25px #ffa47355}.brand-accent{color:#ffb279}.brand small{display:block;margin-top:6px;color:#b5b5ce;font-size:9px;font-weight:700;letter-spacing:.28em}.top-center,.footer{color:#8e94ac;letter-spacing:.24em;font-size:10px;font-weight:800}.top-actions{display:flex;gap:9px}.icon-btn{width:38px;height:38px;border:1px solid #ffffff38;border-radius:100%;color:#fff;background:#ffffff10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-weight:800;font-size:16px}.icon-btn:hover{background:#ffffff30}.panel{position:relative;z-index:5}.intro{min-height:calc(100svh - 147px);padding:clamp(70px,13vh,150px) 0 100px clamp(24px,8vw,128px);max-width:720px}.eyebrow,.overlay-kicker{font-size:12px;letter-spacing:.25em;font-weight:800;color:#ffb373}.eyebrow-dot{display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:#ffb373;box-shadow:0 0 15px #ffb373}.intro h1{font-size:clamp(42px,5.2vw,76px);line-height:1.22;letter-spacing:-.065em;margin:27px 0 23px;font-weight:900;text-shadow:0 12px 50px #090d26aa}.intro h1 em{font-style:normal;color:#ffb373}.intro-copy{font-size:clamp(15px,1.35vw,18px);color:#cbcadd;line-height:1.9;margin:0 0 32px;font-weight:500}.primary-btn{border:0;background:#ffad73;color:#26162a;border-radius:14px;padding:17px 22px;min-width:238px;font-size:16px;font-weight:900;display:inline-flex;align-items:center;justify-content:space-between;gap:38px;box-shadow:0 12px 45px #ff95662e;transition:transform .18s,background .18s}.primary-btn:hover{transform:translateY(-3px);background:#ffc299}.primary-btn span{font-size:22px;font-weight:400}.intro-pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:29px}.intro-pills span{border:1px solid #ffffff35;background:#ffffff0a;border-radius:99px;padding:8px 13px;font-size:11px;letter-spacing:.02em;color:#d0d1e1}.frame{position:absolute;z-index:3;pointer-events:none;left:45%;top:17%;width:49%;height:65%;opacity:.36}.frame i{position:absolute;width:31px;height:31px;border-color:#ffffff9c;border-style:solid}.frame i:nth-child(1){top:0;left:0;border-width:2px 0 0 2px;border-radius:4px 0 0}.frame i:nth-child(2){top:0;right:0;border-width:2px 2px 0 0;border-radius:0 4px 0 0}.frame i:nth-child(3){bottom:0;left:0;border-width:0 0 2px 2px;border-radius:0 0 0 4px}.frame i:nth-child(4){bottom:0;right:0;border-width:0 2px 2px 0;border-radius:0 0 4px}.footer{position:absolute;z-index:8;bottom:0;left:0;right:0;display:flex;justify-content:space-between;gap:18px;padding:22px clamp(22px,5vw,80px);border-top:1px solid #ffffff15}.play{position:relative;z-index:5;min-height:calc(100svh - 88px);pointer-events:none}.play-left{position:absolute;left:clamp(25px,7vw,110px);top:clamp(95px,21vh,195px);max-width:min(40vw,470px)}.session-label{color:#ffb77b;font-weight:800;font-size:12px;letter-spacing:.22em}.session-label span{font-size:18px}.pose-name{font-size:clamp(34px,4.1vw,62px);font-weight:900;letter-spacing:-.075em;line-height:1.12;margin-top:18px;text-shadow:0 8px 42px #0d102b}.pose-hint{font-size:clamp(15px,1.35vw,20px);color:#e6dded;font-weight:600;margin-top:18px;line-height:1.65}.hint-line{margin-top:32px;color:#abb1c9;font-size:13px;letter-spacing:.035em}.hint-arrow{display:inline-grid;place-items:center;width:26px;height:26px;margin-right:8px;background:#ffae7252;color:#ffc399;border-radius:50%;font-size:17px}.count-wrap{position:absolute;left:clamp(24px,7vw,110px);top:clamp(345px,52vh,515px);display:flex;align-items:center;gap:14px;opacity:0;transition:opacity .2s,transform .18s;transform:scale(.9);transform-origin:left center}.count-wrap.show{opacity:1;transform:scale(1)}.count-label{font-size:13px;font-weight:900;color:#ffb373;letter-spacing:.16em}.count-wrap strong{font-size:clamp(86px,13vw,154px);letter-spacing:-.11em;line-height:1;color:#fff;text-shadow:0 0 70px #ffad7180}.count-sub{align-self:flex-end;margin-bottom:18px;color:#d3cee0;font-size:12px;letter-spacing:.13em}.hud{position:absolute;right:clamp(24px,5vw,80px);top:36px;display:flex;align-items:center;gap:19px;padding:13px 19px;border:1px solid #ffffff30;background:#14172b9e;border-radius:14px;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}.hud div:not(.hud-divider){display:flex;flex-direction:column;gap:1px}.hud span{font-size:9px;letter-spacing:.15em;color:#a3a6bd;font-weight:800}.hud strong{font-size:21px;letter-spacing:.03em;line-height:1.25}.hud strong small{font-size:12px;color:#7d849c}.hud-divider{height:29px;width:1px;background:#ffffff2c}.speed-block strong{font-size:13px;letter-spacing:.1em;color:#ffb373;padding-top:4px}.bottom-play{position:absolute;left:clamp(25px,7vw,110px);right:clamp(25px,7vw,110px);bottom:90px}.level-track{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.level-track span{height:6px;border-radius:30px;background:#ffffff35;position:relative;overflow:hidden}.level-track span:after{content:"";position:absolute;inset:0;background:#ffb373;transform:scaleX(var(--fill,0));transform-origin:left;transition:transform .16s}.round-note{margin-top:10px;color:#aeb0c6;font-size:11px;letter-spacing:.12em}.shot-note{position:absolute;top:43%;left:50%;transform:translate(-50%,-50%) rotate(-7deg) scale(.7);font-weight:900;font-size:clamp(55px,9vw,126px);white-space:nowrap;color:#ffae76;opacity:0;text-shadow:0 9px 0 #311929,0 0 60px #ff9e81;pointer-events:none}.shot-note.pop{animation:shotPop .55s ease-out}.flash{position:absolute;z-index:12;inset:0;background:#fff;opacity:0;pointer-events:none}.flash.fire{animation:flash .45s ease-out}.overlay{position:absolute;inset:0;z-index:15;background:#0e1025aa;display:grid;place-items:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:25px}.overlay-card{width:min(100%,450px);padding:45px 40px;background:linear-gradient(150deg,#2d2a4f,#1c1f39);border:1px solid #ffffff30;border-radius:26px;text-align:center;box-shadow:0 35px 100px #05061388}.overlay-card h2{font-size:clamp(40px,5vw,62px);letter-spacing:-.07em;margin:11px 0 7px}.overlay-card p{color:#c3c3d6;line-height:1.7}.overlay-card .primary-btn{margin-top:18px}.text-btn{display:block;margin:16px auto 0;border:0;background:none;color:#adb2cb;font-size:13px;text-decoration:underline}.result-spark{font-size:49px;color:#ffb373}.result-stat{display:flex;align-items:baseline;justify-content:center;gap:9px;border-top:1px solid #ffffff25;border-bottom:1px solid #ffffff25;margin:25px 0 13px;padding:11px}.result-stat strong{font-size:58px;color:#ffb373;line-height:1}.result-stat span{font-size:14px}.result-note{font-size:11px!important}.intro,.play,.overlay{animation:reveal .5s ease-out}.paused .count-wrap{opacity:0}.top-actions{pointer-events:auto}@keyframes reveal{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes shotPop{0%{opacity:0;transform:translate(-50%,-50%) rotate(-7deg) scale(.7)}18%{opacity:1;transform:translate(-50%,-50%) rotate(-7deg) scale(1.1)}70%{opacity:1;transform:translate(-50%,-50%) rotate(-7deg) scale(1)}to{opacity:0;transform:translate(-50%,-50%) rotate(-7deg) scale(1.05)}}@keyframes flash{0%{opacity:0}10%{opacity:.93}38%{opacity:.4}to{opacity:0}}@media(max-width:850px){.top-center{display:none}.intro{padding-top:10vh;max-width:80vw}.backdrop{background:linear-gradient(90deg,#101327ec 0,#101327b5 42%,transparent 100%),linear-gradient(0deg,#101327aa,transparent 32%)}.play-left{max-width:48vw}.frame{left:39%;width:57%}.hud{top:18px;right:18px;gap:12px}.hud strong{font-size:17px}.hud span{font-size:8px}.bottom-play{bottom:85px}}@media(max-width:600px){.topbar{height:64px;padding:0 19px}.brand{font-size:18px}.brand-mark{width:29px;height:29px}.brand small{font-size:7px}.icon-btn{width:34px;height:34px}.intro{min-height:calc(100svh - 110px);padding:8vh 20px 130px;max-width:none}.intro h1{font-size:clamp(38px,10vw,54px);margin:16px 0}.intro-copy{font-size:14px;line-height:1.75;margin-bottom:22px}.intro-pills{max-width:300px;margin-top:19px}.intro-pills span{font-size:10px;padding:6px 9px}.primary-btn{min-width:210px;padding:14px 17px;font-size:14px}.backdrop{background:linear-gradient(180deg,#111327e8 0,#1113279c 39%,transparent 67%,#111327dd 100%)}.frame{left:12%;top:38%;width:76%;height:45%;opacity:.22}.play{min-height:calc(100svh - 64px)}.play-left{left:20px;right:20px;top:85px;max-width:none}.session-label{font-size:10px}.pose-name{font-size:clamp(32px,9vw,48px);margin-top:9px}.pose-hint{font-size:13px;margin-top:8px}.hint-line{display:none}.hud{top:9px;right:12px;left:12px;padding:8px 12px;justify-content:space-between}.hud strong{font-size:17px}.hud .speed-block strong{font-size:11px}.hud-divider{height:23px}.count-wrap{top:auto;bottom:100px;left:20px;gap:9px}.count-wrap strong{font-size:91px}.count-label{font-size:10px}.count-sub{font-size:10px;margin-bottom:14px}.bottom-play{left:19px;right:19px;bottom:51px}.footer{padding:13px 19px;font-size:8px;letter-spacing:.1em}.footer span:last-child{display:none}.shot-note{top:51%;font-size:55px}}@media(max-height:620px)and (min-width:601px){.topbar{height:62px}.intro{padding-top:7vh;min-height:calc(100svh - 105px)}.intro h1{font-size:clamp(37px,5vw,54px);margin:10px 0}.intro-copy{font-size:14px;line-height:1.55;margin-bottom:14px}.intro-pills{margin-top:13px}.play-left{top:100px}.pose-name{font-size:40px}.count-wrap{top:280px}.bottom-play{bottom:54px}.footer{padding:10px 22px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}@media(min-width:851px){.intro h1{font-size:clamp(42px,4.5vw,68px)}}@media(max-width:600px){.backdrop{background:linear-gradient(180deg,#111327f4 0,#111327e0 34%,#1113279b 52%,transparent 78%,#111327ca 100%)}.play-left{padding:8px 10px 9px;margin-left:-10px;margin-right:-10px;border-radius:12px;background:linear-gradient(90deg,#111327dd,#11132785 76%,transparent)}.count-wrap strong{text-shadow:0 3px 22px #1b1735,0 0 60px #ffad7180}}@media(max-width:600px){.app[data-view=play] .backdrop{background:linear-gradient(180deg,#111327ee 0,#111327bf 23%,transparent 34%,transparent 72%,#111327b9 100%)}}.shot-note.pop{animation-duration:.36s}.overlay-card h2{font-size:clamp(36px,4.1vw,50px)}