.logo-letter-page{background:linear-gradient(#6fcaff 0 170px,#f2f9ff 420px,#fff 100%)}
.logo-letter-app{background:linear-gradient(180deg,#e9f8ff 0,#fff 65%)}
.logo-letter-topbar{background:linear-gradient(180deg,#ff655e,#ec3642)}
.logo-letter-title-wrap{min-width:0;text-align:center}.logo-letter-title-wrap .topbar-title{font-size:clamp(1.16rem,4.7vw,1.8rem)}
.logo-letter-subtitle{font-size:.72rem;font-weight:900;opacity:.92;margin-top:2px}
.logo-letter-score{min-width:55px;height:48px;padding:0 10px;border-radius:18px;background:#fff7cb;color:#9a5800;display:flex;align-items:center;justify-content:center;gap:4px;font-size:1rem;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7),0 5px 12px rgba(93,21,28,.18)}
.logo-letter-hud{display:grid;grid-template-columns:auto 1fr 46px;gap:10px;align-items:center;padding:12px 16px;background:#fff;border-bottom:1px solid #e1ebf5}
.logo-letter-round{font-size:.78rem;font-weight:1000;color:#5b6f8d;white-space:nowrap}.logo-letter-round strong{color:#ef3540}
.logo-letter-progress{display:grid;grid-template-columns:repeat(10,1fr);gap:3px}.logo-letter-progress i{display:block;height:8px;border-radius:999px;background:#d9e4ee}.logo-letter-progress i.done{background:#ffbd2f}.logo-letter-progress i.current{background:#ef3540}
.logo-letter-reset{width:42px;height:42px;border:0;border-radius:14px;background:#edf5fd;color:#0d67c5;font-size:1.35rem;font-weight:1000;box-shadow:inset 0 0 0 1px #d7e7f5}
.logo-letter-world{position:relative;overflow:hidden;min-height:650px;padding:26px 16px 34px;background:linear-gradient(#8dd7ff 0 25%,#c7eeff 25% 37%,#91c46e 37% 43%,#67717c 43% 100%)}
.logo-letter-sky{position:absolute;inset:0 0 auto;height:260px;pointer-events:none}.logo-cloud{position:absolute;width:82px;height:30px;border-radius:999px;background:#fff;box-shadow:29px -15px 0 5px #fff,58px 0 0 -1px #fff;opacity:.94}.cloud-one{left:8%;top:32px}.cloud-two{right:18%;top:75px;transform:scale(.75)}.logo-letter-sun{position:absolute;right:7%;top:25px;width:62px;height:62px;border-radius:50%;background:#ffd84f;box-shadow:0 0 0 10px rgba(255,216,79,.17)}
.logo-letter-garage{position:absolute;left:5%;right:5%;top:142px;height:148px;border-radius:24px 24px 8px 8px;background:#f4a339;border:7px solid #c75e2e;box-shadow:0 10px 0 rgba(71,48,25,.14)}.logo-letter-garage-roof{position:absolute;left:-12px;right:-12px;top:-33px;height:43px;background:#e8493d;clip-path:polygon(4% 100%,12% 0,88% 0,96% 100%);border-radius:8px}.logo-letter-garage-sign{position:absolute;left:50%;top:-12px;transform:translateX(-50%);white-space:nowrap;padding:8px 16px;border-radius:999px;background:#114b85;color:#fff;font-size:.72rem;font-weight:1000;letter-spacing:.04em;box-shadow:0 5px 0 #082f58}.logo-letter-door-lines{position:absolute;left:16%;right:16%;top:37px;bottom:0;border-radius:13px 13px 0 0;background:repeating-linear-gradient(180deg,#e8edf2 0 16px,#cfd8e1 16px 20px);border:6px solid #5b6671;border-bottom:0}
.logo-letter-question{position:relative;z-index:3;width:max-content;max-width:96%;margin:0 auto 12px;padding:10px 18px;border-radius:999px;background:#fff;color:#0e3971;font-size:clamp(.92rem,4vw,1.2rem);font-weight:1000;box-shadow:0 7px 18px rgba(15,73,120,.16);border:3px solid #ffcc45;text-align:center}
.brand-stage{position:relative;z-index:4;width:min(90%,410px);margin:0 auto 18px;padding:18px;border-radius:30px;background:rgba(255,255,255,.97);box-shadow:0 16px 32px rgba(16,54,92,.22);border:4px solid #e5eef7;text-align:center;transition:.25s transform,.25s box-shadow}.brand-stage.correct{transform:translateY(30px) scale(.96);box-shadow:0 9px 20px rgba(16,54,92,.16)}
.brand-logo-card{height:170px;display:grid;place-items:center;padding:8px}.brand-logo-svg{width:100%;height:100%;max-width:310px;filter:drop-shadow(0 5px 3px rgba(0,0,0,.09))}.brand-reveal{min-height:26px;margin-top:2px;font-size:1rem;font-weight:1000;color:#168849}
.logo-letter-road{position:relative;z-index:2;height:58px;margin:0 -16px 12px;background:#515b65;border-top:7px solid #f6f6f6;border-bottom:7px solid #f6f6f6;display:flex;align-items:center;justify-content:space-around;overflow:hidden}.logo-letter-road span{display:block;width:18%;height:6px;background:#ffd649;border-radius:3px}
.logo-letter-answers{position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:min(100%,500px);margin:0 auto}.logo-letter-answer{min-height:104px;border:0;border-radius:25px;background:linear-gradient(160deg,#fff,#edf6ff);color:#0d4d91;font-size:3.3rem;line-height:1;font-weight:1000;box-shadow:0 9px 0 #c5d9eb,0 13px 22px rgba(31,66,100,.17);border:4px solid #fff;transition:.12s transform,.18s background,.18s color}.logo-letter-answer:active{transform:translateY(4px);box-shadow:0 5px 0 #c5d9eb}.logo-letter-answer.is-correct{background:linear-gradient(#4bdc79,#1eae55);color:#fff;box-shadow:0 9px 0 #13783a}.logo-letter-answer.is-wrong{animation:logoShake .3s;background:linear-gradient(#ff7777,#ed3944);color:#fff;box-shadow:0 9px 0 #aa1c25}.logo-letter-answer.is-disabled{pointer-events:none;opacity:.72}.logo-letter-answer.is-correct.is-disabled{opacity:1}
.logo-letter-feedback{position:relative;z-index:4;min-height:45px;margin-top:14px;text-align:center;color:#fff;font-size:1rem;font-weight:1000;text-shadow:0 2px 2px rgba(0,0,0,.18);opacity:0;transform:translateY(5px);transition:.18s}.logo-letter-feedback.show{opacity:1;transform:none}.logo-letter-feedback.good{color:#fff7a7}.logo-letter-feedback.bad{color:#ffe0e0}
.logo-letter-finish{position:absolute;z-index:12;inset:0;display:grid;place-items:center;padding:20px;background:rgba(6,38,77,.68);backdrop-filter:blur(6px)}.logo-letter-finish-card{width:min(94%,420px);padding:28px 20px;border-radius:30px;background:#fff;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.25);border:6px solid #ffce42}.finish-flag{font-size:3.6rem}.logo-letter-finish-card h2{margin:6px 0;font-size:2rem}.logo-letter-finish-card p{margin:0;color:#60708a;font-weight:800}.finish-stars{margin:16px 0;font-size:1.15rem;letter-spacing:1px}.logo-letter-finish-card button{min-height:58px;border:0;border-radius:18px;padding:0 24px;background:linear-gradient(#20a8ff,#0870df);color:#fff;font-weight:1000;box-shadow:0 7px 0 #0755aa}
@keyframes logoShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px) rotate(-2deg)}75%{transform:translateX(8px) rotate(2deg)}}
@media(max-width:420px){.logo-letter-world{min-height:600px;padding-left:12px;padding-right:12px}.brand-logo-card{height:145px}.logo-letter-answer{min-height:92px;font-size:2.8rem}.logo-letter-answers{gap:9px}.logo-letter-progress{gap:2px}.logo-letter-hud{padding-left:12px;padding-right:12px}}
@media(min-width:620px){.logo-letter-world{min-height:720px}.brand-logo-card{height:205px}.logo-letter-answer{min-height:122px;font-size:4rem}}
@media(prefers-reduced-motion:reduce){.logo-letter-answer.is-wrong{animation:none}.brand-stage{transition:none}}
.logo-letter-progress i{display:grid;place-items:center;height:25px;border-radius:7px;font-size:.58rem;font-style:normal;font-weight:1000}.logo-letter-progress i.done{background:#34c86b;color:#fff}.logo-letter-progress i.current{background:#ef3540;color:#fff;transform:scale(1.08)}.logo-letter-answers.cols-2{grid-template-columns:repeat(2,1fr);max-width:360px}.logo-letter-answers.cols-3{grid-template-columns:repeat(3,1fr)}.logo-letter-answers.cols-4{grid-template-columns:repeat(4,1fr);max-width:580px}.logo-letter-answers.cols-4 .logo-letter-answer{font-size:2.8rem;min-height:96px}
@media(max-width:420px){.logo-letter-progress i{font-size:.5rem;height:22px}.logo-letter-answers.cols-4{gap:6px}.logo-letter-answers.cols-4 .logo-letter-answer{font-size:2.25rem;min-height:82px;border-radius:18px}}