@font-face{font-family:Manrope;src:url(/fonts/manrope-500.ttf);font-weight:500;font-display:swap}@font-face{font-family:Manrope;src:url(/fonts/manrope-700.ttf);font-weight:700;font-display:swap}*{box-sizing:border-box}body{margin:0;background:#121212;color:#ece8e1;font:500 14px/1.7 Manrope,sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}[hidden]{display:none!important}header,main,footer{max-width:1440px;padding-inline:64px;margin:auto}header{height:112px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff12}.logo{font-size:43px;letter-spacing:-.085em;font-weight:700}.logo span{font-size:10px;letter-spacing:0;margin-left:9px;font-weight:500}nav{display:flex;gap:34px;font-size:11px;color:#b4aca5}.intro{display:flex;justify-content:space-between;font-size:11px;color:#a49a91;padding-top:31px}.intro>span:last-child{color:#786f68}.stage{position:relative;aspect-ratio:3.1;margin:26px -15px 15px}.render-host,.posters{position:absolute;inset:0}.render-host canvas{display:block;width:100%;height:100%}.posters img{width:100%;height:auto;display:block}.posters{position:relative}.fallback-second{position:relative;margin-top:12px}.fallback-second img{width:75%}.fallback-second span{position:absolute;left:60%;top:35%;color:#aaa29b;font-size:12px}.stage:has(.posters:not([hidden])){aspect-ratio:auto;min-height:280px}.stage.is-live{aspect-ratio:3.1}.pronunciation{position:absolute;left:65%;top:46%;font-size:12px;letter-spacing:.03em;color:#aaa29b;opacity:0;pointer-events:none}.hero-copy{display:grid;grid-template-columns:1.2fr 1fr;gap:100px;align-items:center;padding:20px 0 0}h1{font-size:clamp(40px,4.3vw,62px);font-weight:500;letter-spacing:-.055em;line-height:1.08;margin:0}.hero-copy>div{max-width:365px}.hero-copy p{color:#aaa29b;font-size:14px;line-height:1.9;margin:0}.cta{display:inline-flex;gap:85px;background:#f47a43;color:#21160f;border-radius:4px;padding:14px 22px;font-size:12px;margin-top:25px;transition:background .2s}.cta:hover{background:#ffa273}.controls{margin-top:50px;padding:18px 0;border-top:1px solid #ffffff18;display:flex;align-items:center;justify-content:space-between;color:#9c9086;font-size:10px}.controls>span>span{margin:0 10px;color:#f47a43}.controls button{padding:10px 12px;background:none;border:none;color:#c4b5a9;font-size:10px}.study-note{margin-top:65px;padding:45px 0;display:flex;align-items:center;justify-content:space-between;gap:30px;border-top:1px solid #ffffff18;color:#8e8278;font-size:11px}.study-note p{color:#b1a49a;margin:0}.study-note>a{color:#e6b697}footer{display:flex;justify-content:space-between;padding-top:25px;padding-bottom:35px;border-top:1px solid #ffffff10;font-size:10px;color:#786f68}.skip{position:fixed;top:-60px;left:15px;background:#fff;color:#111;padding:10px;z-index:5}.skip:focus{top:15px}:focus-visible{outline:2px solid #ffad81;outline-offset:5px}.tuning{position:fixed;right:15px;bottom:15px;background:#24201ef5;border:1px solid #8a5035;padding:20px;z-index:9;width:280px;font-size:11px}.tuning h2{font-size:15px;margin:0 0 10px}.tuning label{display:flex;justify-content:space-between;padding:5px 0}.tuning input{width:150px;accent-color:#f47a43}.tuning output{display:block;font-size:10px;white-space:pre-line;padding:10px 0}.tuning button{background:#f47a43;border:0;padding:6px 12px;color:#111}@media(max-width:700px){header,main,footer{padding-inline:24px}header{height:84px}.logo{font-size:35px}nav{gap:18px;font-size:9px}nav a:last-child{display:none}.intro{font-size:9px;gap:20px;padding-top:25px}.stage,.stage.is-live{aspect-ratio:2.1;margin:30px -8px 10px}.pronunciation{font-size:8px;left:61%;top:43%;max-width:100px}.hero-copy{grid-template-columns:1fr;gap:26px;padding-top:22px}h1{font-size:43px}.hero-copy p{font-size:13px;max-width:330px}.controls{margin-top:35px}.study-note{flex-direction:column;align-items:start;gap:16px;margin-top:35px;padding-block:30px}.tuning{width:250px}.fallback-second span{font-size:9px}.stage:has(.posters:not([hidden])){min-height:210px}}@media(max-width:700px){.pronunciation{left:8%;top:auto;bottom:14px;max-width:none;font-size:10px}}
