@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#2b245a;background:#f6a9d0;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #293fdd;outline-offset:5px}button[hidden],[hidden]{display:none!important}.app{position:relative;min-height:100svh;overflow:hidden;background:radial-gradient(ellipse at 50% 53%,#ffd4d9 0%,#f9b9cf 39%,#f4a4d0 82%)}header{position:relative;z-index:2;height:94px;margin:0 5%;border-bottom:1px solid #62286825;display:flex;align-items:center;justify-content:space-between}.wordmark{font-family:Manrope,sans-serif;font-size:25px;font-weight:800;letter-spacing:-1.3px;text-decoration:none;color:inherit;display:flex;gap:7px;align-items:center}.wordmark span{font-size:34px;color:#2e48ec}.edition,.eyebrow{font-size:12px;font-weight:700;letter-spacing:2px}.round{position:relative;width:43px;height:43px;border:1px solid #4e376b4a;border-radius:50%;background:transparent;color:inherit;font-size:23px}.sound-slash{position:absolute;left:17px;top:6px;color:#2b245a;font-weight:700}.round[aria-pressed=true] .sound-slash{display:none}main{min-height:690px;height:calc(100svh - 158px);position:relative}.intro{position:absolute;z-index:1;top:27px;left:15px;right:15px;text-align:center;pointer-events:none}.eyebrow{margin:0 0 16px}h1{font-family:Manrope,sans-serif;font-size:clamp(38px,4.7vw,67px);font-weight:800;letter-spacing:-3.2px;line-height:1.08;margin:0}h1 em{font-style:normal;color:#2f46db}#subtitle{font-size:16px;margin-top:18px;color:#5f3f6b}#scene{position:absolute;inset:130px 0 72px;cursor:grab}#scene:active{cursor:grabbing}canvas{display:block;width:100%;height:100%}.stage-label{position:absolute;top:49%;font-family:Manrope,sans-serif;font-size:23px;font-weight:600;line-height:1.15;letter-spacing:-1px;transform:rotate(-10deg);pointer-events:none}.left-label{left:19%}.stage-label span{display:block;font-size:49px;margin-left:27px;font-weight:400}.right-label{right:20%;transform:rotate(11deg);font-size:18px}.right-label span{color:#ed572a;font-size:65px;margin-left:0}.actions{position:absolute;bottom:15px;left:18px;right:18px;z-index:2;text-align:center}.primary{display:inline-flex;gap:32px;align-items:center;justify-content:center;min-height:57px;padding:16px 25px;border:0;border-radius:50px;background:#2e41d7;color:white;font-weight:600;box-shadow:0 5px 0 #202e9c;transition:transform .2s,background .2s}.primary:hover{background:#3e54ec;transform:translateY(-2px)}.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #202e9c}.primary span{font-size:23px}#hint{font-size:11px;letter-spacing:1.8px;margin:21px 0 0;color:#705074}footer{height:64px;margin:0 5%;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #62286825;font-size:12px;color:#64416c}#reset{border:0;background:none;color:inherit;font-size:12px;padding:10px}#progress{display:flex;gap:7px}#progress i{height:7px;width:7px;border-radius:100%;background:#2e41d733}#progress i.done{background:#2e41d7}#object-picks{display:flex;gap:10px;justify-content:center}#object-picks button{border:1px solid #2e41d74a;background:#fff5;color:#2b245a;padding:15px 20px;border-radius:30px;font-weight:600;font-size:14px;backdrop-filter:blur(10px)}#object-picks button:hover{background:#fff9}#object-picks button.done{background:#2e41d7;color:white}#object-picks button span{margin-left:10px}dialog{border:0;border-radius:28px;background:#fff9ef;color:#2b245a;padding:40px;width:min(460px,calc(100% - 30px));text-align:center;box-shadow:0 25px 100px #41226044;max-height:90svh;overflow:auto}dialog::backdrop{background:#3223504d;backdrop-filter:blur(10px)}dialog[open]{animation:pop .35s ease-out}.close{position:absolute;right:15px;top:12px;background:transparent;border:0;font-size:29px;color:#6c577d;width:38px;height:38px;border-radius:50%}h2{font-family:Manrope,sans-serif;font-size:32px;line-height:1.15;letter-spacing:-1.1px;margin:14px 0}dialog p{line-height:1.6}.quiz-icon{font-size:43px;color:#2e41d7;margin-top:25px}#quiz-copy{color:#705b79;font-size:16px}#answers{display:grid;gap:10px;margin-top:25px}#answers button{background:#f3e8f3;border:1px solid #e2d1e5;padding:15px;border-radius:13px;color:#43304f;font-size:16px;text-align:left}#answers button:hover{background:#e7ddff;border-color:#8c78e6}#answers button:disabled{cursor:default}#answers button.correct{background:#d9ee91;border-color:#809d2e;color:#354210}#answers button.wrong{background:#ffe2d8}#feedback{font-size:15px;min-height:24px}#next{font-size:14px;width:100%}#letter{width:min(830px,calc(100% - 30px));padding:24px;grid-template-columns:1fr 1.15fr;gap:30px;text-align:left}#letter[open]{display:grid}.letter-art{min-height:380px;border-radius:15px;background:#f9aa39;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-2deg);margin:10px 0}.letter-art>span{font-size:130px;line-height:1;color:#e24b84}.letter-art>p{font-family:Manrope,sans-serif;font-weight:800;font-size:48px;line-height:1.05;letter-spacing:-2px;margin:20px 0 35px;text-align:center}.letter-art small{font-size:10px;letter-spacing:2px}.letter-copy{padding:27px 12px 15px 0}.letter-copy .eyebrow{font-size:10px;letter-spacing:1.5px}.letter-copy h2{font-size:56px;color:#2e41d7}.letter-copy>p:not(.eyebrow){font-size:15px}.signature{font-weight:700}#again{font-size:14px;min-height:48px;padding:10px 20px;margin-top:10px}#fallback{position:fixed;bottom:3px;left:15px;right:15px;background:white;padding:10px;font-size:13px;z-index:5}.opened .stage-label{opacity:0}.opened #scene{inset:130px 0 100px}.opened h1{font-size:clamp(36px,4vw,55px)}@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}@media(min-width:1500px){.left-label{left:26%}.right-label{right:26%}}@media(max-width:650px){header{height:74px;margin:0 6%}.wordmark{font-size:21px}.edition{font-size:9px;letter-spacing:1px}.round{width:36px;height:36px}.sound-slash{left:13px;top:3px}main{height:calc(100svh - 132px);min-height:640px}.intro{top:30px}h1{font-size:42px;letter-spacing:-2px}.eyebrow{font-size:10px;letter-spacing:1.7px;margin-bottom:14px}#subtitle{font-size:14px;max-width:270px;margin:15px auto}.stage-label{top:49%;font-size:15px;letter-spacing:-.5px}.left-label{left:6%}.right-label{right:6%;font-size:13px}.stage-label span{font-size:34px;margin-left:10px}.right-label span{font-size:42px}#scene{inset:150px -60px 85px}.opened #scene{inset:130px -25px 105px}.actions{bottom:21px}#object-picks{gap:7px}#object-picks button{font-size:12px;padding:12px 11px}#object-picks button span{margin-left:3px}.primary{min-height:54px}footer{height:58px;font-size:10px;margin:0 6%}#reset{font-size:10px}#hint{font-size:9px}dialog{padding:35px 25px}#letter[open]{grid-template-columns:1fr;gap:8px}.letter-art{min-height:190px;flex-direction:row;gap:18px;margin:15px 8px 0}.letter-art>span{font-size:95px}.letter-art>p{font-size:34px;margin:0}.letter-art small{display:none}.letter-copy{padding:16px 10px}.letter-copy h2{font-size:45px}.letter-copy>p:not(.eyebrow){font-size:15px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}