@charset "UTF-8";
:root{--ink:#1d1d1f;--muted:#77757e;--purple:#7550c5;--paper:#f8f7fa;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft Yahei",sans-serif;-webkit-font-smoothing:antialiased}body.modal-open{overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #a085ef;outline-offset:6px}button{border:0}img{max-width:100%;display:block;height:auto}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:650;letter-spacing:-.055em}button{letter-spacing:0}.wrap{width:min(1120px,calc(100% - 96px));margin-inline:auto}.mobile-only{display:none}.skip-link{position:fixed;top:-60px;left:20px;background:#fff;padding:12px;z-index:100}.skip-link:focus{top:10px}
.site-header{position:sticky;top:0;z-index:30;background:#f8f7fae6;backdrop-filter:blur(22px);border-bottom:1px solid #1d1d1f0b}.nav{height:73px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:650;letter-spacing:-.5px}.brand-symbol{width:30px;height:30px;display:inline-block;position:relative}.brand-symbol i{font-style:normal;position:absolute;background:#271b46;color:white;border:1px solid #9582b6;border-radius:5px;width:20px;height:22px;display:grid;place-items:center;font-size:10px;box-shadow:0 2px 3px #1b0c3520}.brand-symbol i:first-child{left:0;top:0;transform:rotate(-10deg)}.brand-symbol i:last-child{right:0;bottom:0;transform:rotate(8deg)}.nav-links{display:flex;gap:34px;align-items:center;font-size:12px;color:#5e5a64}.nav-links a:hover{color:var(--purple)}.nav-cta{font-size:12px;padding:9px 17px;color:#fff;background:#222125;border-radius:25px;display:flex;gap:14px;align-items:center;transition:background .25s}.nav-cta:hover{background:var(--purple)}
.hero{position:relative;overflow:hidden;min-height:1080px;background:radial-gradient(ellipse at 50% 76%,#ede7f6 0%,#f8f7fa 48%)}.hero-copy{position:relative;z-index:2;text-align:center;padding-top:73px}.eyebrow{font-size:13px;font-weight:550;letter-spacing:.09em}.hero-eyebrow{display:flex;align-items:center;justify-content:center;gap:9px;color:#777080}.tiny-key{border-radius:5px;padding:4px 5px;box-shadow:0 2px 6px #3a264d10;border:1px solid #ddd5e7;color:#6a527b;line-height:1;background:#fefcff;font-size:10px}.hero h1{font-size:clamp(66px,7.6vw,104px);line-height:1.14;margin-top:25px;letter-spacing:-.07em}.hero h1 span{background:linear-gradient(110deg,#2e1b4d 3%,#654d99 40%,#ab8bcc 90%);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-intro{color:#89828f;font-size:21px;letter-spacing:.035em;margin-top:24px;font-weight:400}.hero-actions{display:flex;justify-content:center;align-items:center;gap:30px;margin-top:28px}.button{display:inline-flex;align-items:center;justify-content:center;gap:25px;font-size:14px;font-weight:500;padding:15px 25px;border-radius:40px;transition:transform .3s,background .3s}.button:hover{transform:translateY(-2px)}.button-dark{background:#252228;color:#fff}.button-dark:hover{background:#594171}.button-purple{background:#7652bd;color:white}.button-purple:hover{background:#6842af}.text-button{background:transparent;color:var(--purple);display:inline-flex;gap:12px;align-items:center;font-size:14px;padding:5px 0}.text-button:hover{color:#9d77d7}.play-small{width:20px;height:20px;border:1px solid #9477ba;border-radius:50%;display:grid;place-items:center;font-size:7px;padding-left:1px}.hero-art{position:relative;width:min(1050px,92vw);margin:-15px auto 0;height:480px}.hero-art img{position:relative;width:810px;margin:auto;transform:rotate(-7deg) translateY(-10px);animation:float 8s ease-in-out infinite;filter:drop-shadow(0 36px 38px #49326017)}.hero-halo{position:absolute;width:640px;max-width:90%;height:190px;bottom:20px;left:50%;transform:translateX(-50%);border-radius:50%;background:#d4c4e7;filter:blur(65px);opacity:.25}.art-caption{position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);font-size:12px;letter-spacing:.16em;color:#968b9f}.hero-bottom{border-top:1px solid #34233f13;position:relative;margin-top:38px;display:flex;justify-content:space-between;align-items:center;padding:25px 0;color:#918896;font-size:12px}.hero-bottom span{font-size:13px;font-weight:600;color:#5e5367}.hero-bottom em{font-size:9px;font-style:normal;letter-spacing:3px;margin-left:13px;font-weight:400;color:#a79cab}.hero-bottom p{position:absolute;left:50%;transform:translateX(-50%)}.scroll-cue{border:1px solid #cfc6d8;border-radius:50%;height:29px;width:29px;display:grid;place-items:center;font-size:15px}
.section-dark{background:#101014;color:#f5f3f8}.input-section{padding:130px 0 105px}.section-heading h2,.style-copy h2{font-size:clamp(48px,5.3vw,70px);line-height:1.16;margin-top:22px}.section-heading h2 span{color:#a49aae}.section-dark .eyebrow{color:#a493ba}.section-intro{font-size:18px;line-height:1.9;color:#8f8a96;letter-spacing:-.015em;margin-top:25px}.input-section .section-intro{color:#9d97a5}.input-demo{margin-top:67px;border-top:1px solid #ffffff22;border-bottom:1px solid #ffffff22;padding:26px 0 28px}.demo-top,.demo-bottom{display:flex;justify-content:space-between;align-items:center}.demo-top>span{color:#7c7487;font-size:12px}.word-switch{display:flex;padding:4px;background:#222026;border-radius:25px;gap:2px}.word-switch button{background:transparent;color:#8d8498;width:46px;height:31px;border-radius:20px;font-size:13px;transition:all .3s}.word-switch button.active{background:#51406b;color:#f7f0ff}.demo-flow{display:flex;gap:48px;align-items:center;justify-content:center;padding:60px 0 67px}.demo-key{position:relative;border:1px solid #695880;border-radius:25px;width:164px;height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(150deg,#342846,#21192d);box-shadow:inset 0 2px 2px #b799dc17,0 10px 0 #130e1b,0 12px 0 #65527766,0 22px 24px #0003;transition:transform .22s,box-shadow .22s,background .22s}.demo-key b{font-family:Arial,sans-serif;font-weight:400;font-size:67px;line-height:1}.demo-key>span{font-size:19px;color:#c9b4e1;margin-top:10px}.demo-key small{position:absolute;font-size:11px;font-weight:400;color:#73677f;bottom:-40px}.demo-plus,.demo-equals{font-size:29px;font-weight:200;color:#676071}.demo-key.pressed{transform:translateY(7px);background:linear-gradient(150deg,#755397,#47325f);box-shadow:inset 0 2px 15px #e6b8ff20,0 2px 0 #130e1b,0 3px 0 #9675bb99,0 8px 16px #0003}.demo-result{width:150px;text-align:center;transition:transform .4s,opacity .4s}.demo-result b{font-size:107px;font-weight:500;line-height:1.2;color:#d5beec}.demo-result span{display:block;font-size:17px;color:#81728f;margin-top:12px}.demo-result.flash{transform:scale(1.12)}.demo-bottom p{font-size:13px;color:#877e91}.text-button.light{color:#c6a8e9;font-size:12px}.input-details{display:grid;grid-template-columns:repeat(3,1fr);margin-top:45px;gap:40px}.input-details strong{font-size:16px;font-weight:500}.input-details p{font-size:13px;color:#88828f;margin-top:13px;line-height:1.8}
.style-section{padding:150px 0 145px;background:#f6f4f8;overflow:hidden;transition:background .6s}.style-section[data-theme=forest]{background:#f2f5f0}.style-section[data-theme=mechanical]{background:#f4f4f3}.style-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center}.style-copy .eyebrow{color:#95849e}.style-copy h2 span{color:#8c709f}.style-copy .section-intro{font-size:16px;line-height:1.95}.swatches{display:flex;gap:13px;margin-top:35px}.swatch{width:32px;height:32px;display:grid;place-items:center;background:transparent;border-radius:50%;border:1px solid transparent;transition:border-color .25s}.swatch span{display:block;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 1px 3px #0002}.swatch.purple span{background:linear-gradient(145deg,#725b96,#261d38)}.swatch.forest span{background:linear-gradient(145deg,#f3f0e6,#91ad87)}.swatch.mechanical span{background:linear-gradient(145deg,#acadb0 45%,#eea400 46%,#eea400 70%,#00899b 71%)}.swatch.outline span{background:#102419;border:2px solid #578466}.swatch.classic span{background:linear-gradient(135deg,#fff 50%,#171717 51%);border:1px solid #bbb}.swatch.selected{border-color:#8e7b9c}.swatch:hover{border-color:#aaa}.skin-name{font-size:13px;margin-top:19px;color:#5c4d69}.skin-name span{display:block;font-size:12px;margin-top:7px;color:#7c7186}.keyboard-stage{position:relative;min-height:480px;display:flex;flex-direction:column;justify-content:center;align-items:center}.keyboard-stage img{width:100%;height:auto;aspect-ratio:588/530;object-fit:contain;border-radius:34px;transform:rotate(-3deg);box-shadow:4px 28px 38px #25202c25;position:relative;transition:opacity .2s,transform .5s}.keyboard-stage img.switching{opacity:0;transform:rotate(-1deg) translateY(5px)}.keyboard-aura{position:absolute;inset:5%;border-radius:50%;background:#d6cae5;filter:blur(55px);opacity:.55;transition:background .6s}.style-section[data-theme=forest] .keyboard-aura{background:#d8e4c9}.style-section[data-theme=mechanical] .keyboard-aura{background:#e5d5bc}.stage-caption{margin-top:42px;font-size:11px;color:#a29aa8;letter-spacing:.06em}
.practice-section{background:#efeff1;padding:125px 0 120px}.practice-section .eyebrow{color:#8d8398}.practice-section .section-heading{margin-bottom:58px}.practice-section .section-heading h2 span{color:#9c92a6;margin-left:15px}.practice-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.practice-card{overflow:hidden;position:relative;border-radius:28px;min-height:800px}.follow-card{background:linear-gradient(145deg,#fff,#e7e3ee)}.card-copy{padding:45px 43px 0;position:relative;z-index:2}.card-eyebrow{font-size:12px;color:#92809e}.card-copy h3{font-size:40px;line-height:1.25;margin-top:18px}.card-copy p{font-size:13px;line-height:1.9;color:#786f81;margin-top:18px}.phone-shell{border-radius:28px;overflow:hidden;width:250px;box-shadow:0 25px 50px #0002;transform:rotate(7deg);margin:37px auto -105px;outline:1px solid #ffffff26;outline-offset:3px}.phone-shell img{width:100%;height:auto}.game-card{background:radial-gradient(ellipse at 65% 55%,#312942,#15131c 80%);color:#f7f4fc}.game-card .card-eyebrow{color:#aa92c9}.game-card h3 span{color:#b29bc9}.game-card .card-copy p{color:#9d8eaf}.game-card .phone-shell{transform:rotate(-7deg)}.card-note{position:absolute;bottom:0;left:0;width:100%;padding:35px 40px 24px;background:linear-gradient(transparent,#e9e5ef 60%);font-size:11px;letter-spacing:.06em;color:#8e7da1;display:flex;align-items:center;gap:7px}.game-card .card-note{background:linear-gradient(transparent,#18141e 60%);color:#aa95c1}.note-dot{height:5px;width:5px;border-radius:50%;background:currentColor}
.privacy-section{text-align:center;padding:120px 0 105px;background:#f8f7fa}.privacy-section .lock-icon{width:45px;height:45px;margin:0 auto 24px;color:#9b7cb5}.lock-icon svg{width:100%;height:100%}.privacy-section .eyebrow{color:#91829f}.privacy-section h2{font-size:clamp(45px,5vw,65px);line-height:1.25;margin-top:22px}.privacy-section h2 span{color:#9b80b1}.privacy-section .section-intro{font-size:16px;line-height:1.95}.privacy-section .text-button{margin-top:22px;font-size:13px}
.film-section{padding:10px 0 125px}.film-banner{border-radius:28px;position:relative;overflow:hidden;min-height:410px;background:#0a0611}.film-banner>img{width:100%;height:440px;object-fit:cover;object-position:20% 50%;opacity:.5;transform:scale(1.05)}.film-overlay{position:absolute;inset:0;padding:62px;background:linear-gradient(90deg,#09050fdd,#09050f40 65%,transparent)}.film-overlay .eyebrow{color:#b49ec8;font-size:11px}.film-overlay h2{color:#f7f3fa;font-size:52px;line-height:1.2;margin-top:17px}.film-play{margin-top:27px;background:#e7dbf61a;color:#f2e7fc;border:1px solid #bfa0e046;border-radius:25px;font-size:12px;padding:12px 20px;display:flex;gap:13px;align-items:center;backdrop-filter:blur(10px);transition:background .3s}.film-play:hover{background:#b791e344}.film-play span{font-size:9px}
.faq-section{padding-bottom:125px;display:grid;grid-template-columns:.85fr 1.15fr;gap:65px}.faq-title .eyebrow{color:#9d90a8}.faq-title h2{font-size:33px;margin-top:20px}.faq-list details{border-bottom:1px solid #dfdbe4;padding:24px 0}.faq-list details:first-child{padding-top:0}.faq-list summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:14px;cursor:pointer;line-height:1.6}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary>span{font-size:21px;font-weight:300;color:#a196ac;transition:transform .25s}.faq-list details[open] summary>span{transform:rotate(45deg)}.faq-list details p{font-size:13px;line-height:1.95;color:#8c8295;padding:17px 30px 0 0}
.closing{padding:95px 0 105px;text-align:center;background:linear-gradient(135deg,#e9e2f0,#efebf5 50%,#e8dfef);position:relative;overflow:hidden}.closing-icon{transform:scale(1.6);margin-bottom:34px}.closing h2{font-size:60px;line-height:1.2}.closing h2 span{color:#806391}.closing p{color:#786584;font-size:15px;line-height:1.9;margin-top:22px}.closing .button{margin-top:30px}.guide-link{display:flex;margin:16px auto 0;font-size:12px}.closing-meta{display:block;font-size:10px;color:#a799af;letter-spacing:.06em;margin-top:18px}.footer{display:flex;align-items:center;gap:30px;padding-top:32px;padding-bottom:32px;color:#9d95a6;font-size:11px}.footer .brand{font-size:16px;margin-right:auto;color:#71647c}.footer .brand-symbol{transform:scale(.75);margin-right:-5px}.footer .brand small{font-size:8px;font-weight:400;letter-spacing:2px;margin-left:8px}.footer>p{margin-right:auto}.copyright{color:#b7aebe}
dialog{border:0;padding:0;max-height:90dvh;overflow:auto;border-radius:25px;color:var(--ink);box-shadow:0 25px 120px #0005}dialog::backdrop{background:#121017bf;backdrop-filter:blur(15px)}.film-dialog{width:min(1100px,94vw);background:#100c16}.film-dialog video{width:100%;display:block;max-height:70dvh;background:black}.film-dialog p{padding:20px 25px;font-size:12px;color:#b0a0c0;letter-spacing:.04em}.dialog-close{width:33px;height:33px;border-radius:50%;background:#ffffffde;color:#332e3b;position:absolute;right:15px;top:15px;font-size:23px;line-height:1;z-index:2;box-shadow:0 2px 12px #0002}.guide-dialog{width:min(530px,92vw);background:#f8f7fa;padding:45px}.guide-dialog>.brand-symbol{margin-bottom:25px;transform:scale(1.25)}.guide-dialog .eyebrow{color:#a08aaf;font-size:11px}.guide-dialog h2{font-size:32px;margin-top:13px}.guide-dialog ol{list-style:none;padding:0;display:grid;gap:24px;margin:35px 0 25px}.guide-dialog li{display:flex;gap:16px}.guide-dialog li>span{width:25px;height:25px;flex-shrink:0;background:#ebe3f2;color:#9071a8;font-size:12px;display:grid;place-items:center;border-radius:50%}.guide-dialog li strong{font-size:14px;font-weight:550}.guide-dialog li p{font-size:12px;line-height:1.9;color:#94899f;margin-top:8px}.guide-note{font-size:11px;color:#7e7288;margin-bottom:25px}.guide-done{font-size:12px;width:100%}
.reveal{opacity:1;transform:none}.js-motion .reveal{opacity:0;transform:translateY(35px);transition:opacity 1s var(--ease),transform 1s var(--ease)}.js-motion .reveal.visible{opacity:1;transform:translateY(0)}
@keyframes float{0%,100%{transform:rotate(-7deg) translateY(-10px)}50%{transform:rotate(-5deg) translateY(-27px)}}
@media(min-width:1500px){.hero{min-height:1160px}.hero-copy{padding-top:90px}.hero-art{margin-top:0;height:500px}.hero-art img{width:850px}.hero-bottom{margin-top:45px}}
@media(max-width:1000px){.wrap{width:calc(100% - 64px)}.hero{min-height:1010px}.hero-art{height:460px}.hero-art img{width:760px}.style-layout{gap:36px;grid-template-columns:.85fr 1.15fr}.style-copy h2{font-size:52px}.style-copy .section-intro{font-size:14px}.keyboard-stage{min-height:400px}.demo-flow{gap:30px}.practice-card{min-height:760px}.card-copy{padding:35px 30px 0}.card-copy h3{font-size:34px}.card-copy p{font-size:12px}.phone-shell{width:240px}.faq-section{gap:40px}.faq-title h2{font-size:28px}.footer>p{display:none}}
@media(max-width:700px){html{scroll-padding-top:70px}.wrap{width:calc(100% - 44px)}.nav{height:63px}.brand{font-size:19px}.nav-links{gap:18px;font-size:10px}.nav-links a:first-child{display:none}.nav-cta{font-size:10px;gap:8px;padding:8px 11px}.hero{min-height:825px}.hero-copy{padding-top:60px}.hero-eyebrow{font-size:10px;gap:7px}.hero h1{font-size:64px;margin-top:27px;line-height:1.18;letter-spacing:-.065em}.hero-intro{font-size:17px;line-height:1.65;margin-top:22px}.hero-intro .mobile-only{display:none}.hero-actions{gap:25px;margin-top:25px}.button{font-size:12px;padding:13px 21px;gap:18px}.text-button{font-size:12px}.hero-art{width:100%;height:320px;margin-top:5px}.hero-art img{width:550px;max-width:122%;position:absolute;left:50%;margin-left:-61%;top:0}.hero-halo{width:95%;height:120px;bottom:40px}.art-caption{bottom:0;font-size:10px;white-space:nowrap}.hero-bottom{margin-top:32px;padding:18px 0}.hero-bottom span{font-size:11px}.hero-bottom em{font-size:8px;margin-left:8px;letter-spacing:2px}.hero-bottom p{display:none}.scroll-cue{height:25px;width:25px}.input-section{padding:83px 0 73px}.eyebrow{font-size:11px}.section-heading h2,.style-copy h2{font-size:48px;line-height:1.2;margin-top:20px}.section-intro{font-size:14px;margin-top:23px;line-height:1.9}.input-demo{margin-top:40px;padding:20px 0 22px}.demo-top>span{font-size:9px}.word-switch{padding:3px}.word-switch button{width:34px;height:26px;font-size:11px}.demo-flow{gap:13px;padding:43px 0 55px}.demo-key{width:84px;height:103px;border-radius:16px;box-shadow:inset 0 1px 2px #b799dc17,0 6px 0 #130e1b,0 7px 0 #65527766,0 15px 16px #0003}.demo-key b{font-size:39px}.demo-key>span{font-size:12px;margin-top:6px}.demo-key small{font-size:9px;bottom:-28px}.demo-plus,.demo-equals{font-size:18px}.demo-result{width:65px}.demo-result b{font-size:61px}.demo-result span{font-size:11px;margin-top:8px}.demo-bottom p{font-size:10px}.text-button.light{font-size:10px}.input-details{grid-template-columns:1fr;gap:24px;margin-top:33px}.input-details>div{display:flex;align-items:baseline;gap:22px}.input-details strong{font-size:12px;flex-shrink:0}.input-details p{font-size:11px;margin-top:0}.style-section{padding:80px 0 70px}.style-layout{grid-template-columns:1fr;gap:30px}.style-copy .section-intro{font-size:14px}.style-copy .section-intro br:last-child{display:none}.swatches{margin-top:25px}.skin-name{font-size:12px}.skin-name span{display:inline;margin-left:13px;font-size:11px}.keyboard-stage{min-height:340px;margin:0 7px}.keyboard-stage img{width:92%;border-radius:27px}.stage-caption{font-size:9px;margin-top:33px}.practice-section{padding:78px 0 75px}.practice-section .section-heading h2 span{margin-left:0;display:inline-block}.mobile-only{display:inline}.practice-section .section-heading{margin-bottom:35px}.practice-grid{grid-template-columns:1fr;gap:20px}.practice-card{min-height:760px;border-radius:23px}.card-copy{padding:32px 30px 0}.card-copy h3{font-size:36px}.card-copy p{font-size:12px;line-height:1.9;margin-top:15px}.card-eyebrow{font-size:11px}.phone-shell{width:235px;margin-top:30px}.card-note{padding:35px 30px 20px;font-size:10px}.privacy-section{padding:80px 0 70px}.privacy-section h2{font-size:45px}.privacy-section .section-intro{font-size:13px}.privacy-section .lock-icon{width:38px;height:38px}.film-section{padding-bottom:80px}.film-banner{min-height:370px;border-radius:23px}.film-banner>img{height:370px;object-position:45% center;opacity:.42}.film-overlay{padding:39px 29px;background:linear-gradient(90deg,#09050fbb,#09050f10)}.film-overlay h2{font-size:42px;margin-top:20px}.film-play{margin-top:28px;font-size:11px;padding:11px 17px}.faq-section{grid-template-columns:1fr;gap:36px;padding-bottom:80px}.faq-title h2{font-size:29px;margin-top:16px}.faq-list summary{font-size:12px}.faq-list details{padding:20px 0}.faq-list details p{font-size:12px}.closing{padding:70px 0 77px}.closing h2{font-size:48px}.closing p{font-size:13px}.closing-meta{font-size:9px}.closing-icon{margin-bottom:30px;transform:scale(1.4)}.footer{padding-top:25px;padding-bottom:25px;gap:15px;flex-wrap:wrap}.footer .brand{font-size:14px}.footer .brand small{display:none}.footer>a:last-of-type,.copyright{font-size:9px}.guide-dialog{padding:35px 27px}.guide-dialog h2{font-size:29px}.film-dialog{border-radius:16px}.film-dialog p{font-size:10px;padding:15px}.dialog-close{width:28px;height:28px;font-size:20px;right:10px;top:10px}}
@media(max-width:370px){.hero h1{font-size:56px}.nav-links{display:none}.hero{min-height:790px}.hero-art{height:285px}.section-heading h2,.style-copy h2{font-size:43px}.demo-flow{gap:9px}.demo-key{width:76px}.practice-card{min-height:750px}.privacy-section h2{font-size:40px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.js-motion .reveal{opacity:1;transform:none}}