@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('./assets/fonts/dm-sans-400.ttf') format('truetype')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('./assets/fonts/dm-sans-500.ttf') format('truetype')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url('./assets/fonts/dm-sans-600.ttf') format('truetype')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url('./assets/fonts/dm-sans-700.ttf') format('truetype')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:400;font-display:swap;src:url('./assets/fonts/fredoka-400.ttf') format('truetype')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:500;font-display:swap;src:url('./assets/fonts/fredoka-500.ttf') format('truetype')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:600;font-display:swap;src:url('./assets/fonts/fredoka-600.ttf') format('truetype')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:700;font-display:swap;src:url('./assets/fonts/fredoka-700.ttf') format('truetype')}
:root{--cream:#fffaf0;--paper:#fff;--ink:#2c2519;--muted:#786c56;--yellow:#f8c637;--yellow-deep:#f3b820;--line:#eadfbd;--soft:#fff1c9;--green:#dff1d3;--green-ink:#4c7f35;--shadow:0 12px 0 #ead89a;--radius:24px;font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--cream)}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 84% 4%,#fff5cf 0 12%,transparent 34%),var(--cream)}button{font:inherit;border:0;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #936e00;outline-offset:4px}.topbar{max-width:1180px;margin:auto;padding:24px 32px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;font:600 23px Fredoka;color:var(--ink);background:none}.brand-mark{width:40px;height:40px;border-radius:14px;background:var(--yellow);display:grid;place-items:center;font-size:23px}.nav{display:flex;align-items:center;gap:28px}.nav a{color:var(--muted);text-decoration:none;font-weight:600;font-size:14px}.btn{padding:15px 21px;border-radius:15px;font:600 14px Fredoka;letter-spacing:.3px;transition:.18s transform,.18s box-shadow}.btn-primary{color:#5e4600;background:var(--yellow);box-shadow:0 5px 0 #d39f16}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 7px 0 #d39f16}.btn-secondary{color:#856100;background:var(--paper);border:2px solid var(--line);box-shadow:0 4px 0 var(--line)}.btn-ghost{background:none;color:#8a6700}.page{max-width:1180px;margin:auto;padding:40px 32px 80px}.hero{display:grid;grid-template-columns:1.04fr .96fr;gap:70px;align-items:center;padding:42px 0 84px}.eyebrow{font:600 12px Fredoka;letter-spacing:1.5px;color:#a57a00}.hero h1{font:600 clamp(44px,6vw,76px)/.98 Fredoka;letter-spacing:-2px;margin:18px 0 24px}.hero p{font-size:19px;line-height:1.55;color:var(--muted);max-width:545px;margin:0}.actions{display:flex;gap:14px;align-items:center;margin-top:30px}.trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:28px;color:var(--muted);font-size:12px;font-weight:700}.trust span::before{content:'✓';color:#64a340;font-size:15px;margin-right:6px}.hero-art{height:500px;border-radius:42px;background:var(--yellow);position:relative;display:grid;place-items:center;overflow:hidden;box-shadow:var(--shadow)}.hero-art:before{content:'';position:absolute;width:420px;height:420px;border-radius:50%;background:#ffdb6a}.art-kicker{position:absolute;top:30px;left:32px;font:600 12px Fredoka;letter-spacing:1px;color:#6d5100}.tato{position:relative;z-index:1;width:230px;height:230px;border-radius:46% 46% 42% 42%;background:#f5b52b;border:7px solid #a96c11;box-shadow:inset -18px -20px 0 #df941d,0 12px 0 #be7912}.tato:before,.tato:after{content:'';position:absolute;top:86px;width:17px;height:22px;border-radius:50%;background:#34270c}.tato:before{left:65px}.tato:after{right:65px}.mouth{position:absolute;left:83px;top:124px;width:62px;height:34px;border-bottom:8px solid #34270c;border-radius:0 0 50% 50%}.leaf{position:absolute;top:-45px;right:28px;width:75px;height:43px;border-radius:100% 0 100% 0;background:#74ac46;transform:rotate(-20deg);border:5px solid #4f7f31}.speech{position:absolute;bottom:28px;left:28px;right:28px;padding:17px 18px;border-radius:18px;background:#fff;box-shadow:0 5px 0 #dba921;z-index:2}.speech strong{font:500 17px Fredoka}.speech small{display:block;margin-top:5px;color:var(--muted);font-size:12px}.steps{border-top:1px solid var(--line);padding-top:35px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.step{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:22px}.step-num{font:600 30px Fredoka;color:var(--yellow-deep)}.step h3{font:600 18px Fredoka;margin:15px 0 6px}.step p{font-size:14px;line-height:1.45;color:var(--muted);margin:0}.screen{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-card,.onboard-card{width:min(100%,540px);background:var(--paper);border:1px solid var(--line);border-radius:28px;padding:36px;box-shadow:0 10px 0 #f0e6c9}.auth-card h1,.onboard-card h1{font:600 38px/1 Fredoka;margin:16px 0}.back{display:inline-flex;background:none;color:var(--muted);font-weight:700;margin-bottom:28px}.sub{color:var(--muted);line-height:1.55}.form{display:grid;gap:12px;margin:26px 0}.input{width:100%;padding:15px 16px;border:2px solid var(--line);border-radius:14px;background:#fffdf8;color:var(--ink);font:inherit}.full{width:100%}.fine{font-size:12px;line-height:1.5;color:var(--muted);text-align:center}.progress{height:9px;background:#f0e5c4;border-radius:20px;overflow:hidden;margin:20px 0 30px}.progress i{display:block;height:100%;background:var(--yellow);border-radius:inherit;transition:width .3s}.choice{display:flex;align-items:center;gap:14px;padding:16px;border:2px solid var(--line);border-radius:17px;background:white;text-align:left;margin:10px 0;width:100%}.choice.active{border-color:var(--yellow);background:var(--soft)}.choice .emoji{font-size:24px}.choice strong{font:500 16px Fredoka}.choice small{display:block;color:var(--muted);margin-top:3px}.choice-wrap{margin:24px 0}.app-shell{min-height:100vh;display:grid;grid-template-columns:240px 1fr;background:var(--cream)}.sidebar{background:#fffdf7;border-right:1px solid var(--line);padding:28px 20px;display:flex;flex-direction:column}.side-nav{display:grid;gap:8px;margin-top:48px}.side-nav button{background:none;text-align:left;padding:14px;border-radius:14px;color:var(--muted);font-weight:700}.side-nav button.active{background:var(--soft);color:#866200}.side-footer{margin-top:auto;color:var(--muted);font-size:12px;line-height:1.5}.main{max-width:1060px;width:100%;padding:38px 48px 70px}.app-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:30px}.app-head h1{font:600 38px Fredoka;margin:8px 0}.avatar{width:48px;height:48px;border-radius:16px;background:var(--yellow);display:grid;place-items:center;font-size:25px}.dashboard{display:grid;grid-template-columns:1.4fr .8fr;gap:20px}.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px}.card h2{font:500 23px Fredoka;margin:7px 0 10px}.card p{color:var(--muted);line-height:1.5;margin:0 0 18px}.big-card{min-height:260px;background:linear-gradient(135deg,#fff7d9,#fff)}.stat-row{display:flex;gap:14px}.stat{flex:1}.stat strong{font:600 34px Fredoka;display:block;color:#8a6600}.stat span{color:var(--muted);font-size:12px}.city-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}.place{padding:18px;border-radius:18px;background:#fff;border:1px solid var(--line);cursor:pointer}.place:hover{border-color:var(--yellow-deep);transform:translateY(-2px)}.place-icon{font-size:30px}.place strong{display:block;font:500 17px Fredoka;margin-top:12px}.place small{color:var(--muted)}.toast{position:fixed;bottom:24px;right:24px;padding:14px 18px;background:#2c2519;color:white;border-radius:14px;box-shadow:0 6px 0 #0e0c08}.hidden{display:none!important}@media(max-width:850px){.topbar{padding:18px 20px}.nav a{display:none}.page{padding:20px}.hero{grid-template-columns:1fr;gap:40px;padding-top:25px}.hero-art{height:390px}.steps{grid-template-columns:1fr}.app-shell{display:block}.sidebar{position:sticky;top:0;z-index:3;flex-direction:row;align-items:center;padding:12px 20px;border-right:0;border-bottom:1px solid var(--line)}.side-nav{display:flex;margin:0 0 0 auto}.side-nav button{padding:10px}.side-footer{display:none}.side-nav button span{display:none}.main{padding:28px 20px 50px}.dashboard{grid-template-columns:1fr}.city-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.hero h1{font-size:49px}.hero p{font-size:17px}.actions{flex-direction:column;align-items:stretch}.actions .btn{width:100%}.trust{gap:10px;display:grid}.auth-card,.onboard-card{padding:25px}.app-head h1{font-size:31px}.city-grid{grid-template-columns:1fr}}
.account-card>a{display:inline-flex;align-items:center;gap:7px;margin-bottom:22px;padding:9px 15px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font:500 14px/1 'DM Sans',sans-serif;text-decoration:none;transition:color .25s,border-color .25s,transform .25s}.account-card>a:hover{color:var(--ink);border-color:#6c8f68;transform:translateX(-3px)}.account-card h1{margin-top:0}
.brand-mark{overflow:hidden}.brand-mark img{display:block;width:100%;height:100%;object-fit:cover}
/* BataTalk — warm, playful, and made for real conversations. */
:root{--cream:#faf8f1;--ink:#292d25;--muted:#686b5e;--yellow:#f5cb45;--yellow-deep:#dbb335;--line:#e3e3d8;--soft:#f9efc9;--display:'Fredoka',sans-serif}
html{scroll-behavior:smooth;scroll-padding-top:105px}body{background:var(--cream);-webkit-font-smoothing:antialiased}button,a,input{-webkit-tap-highlight-color:transparent}button{color:inherit}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #427354;outline-offset:5px}h1,h2,h3,p{overflow-wrap:break-word}button svg,a svg{flex-shrink:0}::selection{background:#f5cb45;color:#292d25}.skip-link{position:fixed;left:20px;top:-100px;z-index:100;background:var(--ink);color:white;padding:14px 20px;border-radius:12px}.skip-link:focus{top:12px}.btn{display:inline-flex;justify-content:center;align-items:center;gap:20px;min-height:50px;padding:15px 24px;border-radius:12px;font:700 14px 'DM Sans',sans-serif;letter-spacing:0;transition:transform .22s,box-shadow .22s,background .22s}.btn-primary{background:var(--yellow);color:var(--ink);border:1px solid #cda931;box-shadow:0 4px 0 #c5a12b}.btn-primary:hover{background:#ffda60;transform:translateY(-3px);box-shadow:0 7px 0 #c5a12b}.btn-primary:active{transform:translateY(3px);box-shadow:0 1px 0 #c5a12b}.btn-dark{background:var(--ink);color:#fffcef;box-shadow:0 3px 0 #11150f}.btn-dark:hover{background:#424a39;transform:translateY(-2px)}.btn svg,.text-link svg{transition:transform .2s}.btn:hover svg,.text-link:hover svg{transform:translateX(4px)}.brand{font:600 27px var(--display);letter-spacing:-.8px;padding:0;white-space:nowrap}.brand-mark{border:1px solid #dcb32a;transform:rotate(-8deg);width:38px;height:40px;border-radius:13px;transition:transform .3s}.brand:hover .brand-mark{transform:rotate(8deg)}.eyebrow{font:700 10px 'DM Sans',sans-serif;letter-spacing:1.7px;color:#676c57}.topbar-premium{max-width:1280px;padding:25px 48px;gap:18px;position:relative;z-index:5}.stage-label span{width:5px;height:5px;background:#5c8246;border-radius:50%}.nav{margin-left:auto;gap:30px}.nav a{font-size:12px;color:#555b4e;position:relative}.nav a::after{content:'';position:absolute;bottom:-7px;left:0;width:100%;height:2px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .25s}.nav a:hover::after{transform:scaleX(1)}.nav .btn{min-height:44px;padding:11px 17px;font-size:12px;gap:15px}.premium-page{max-width:1280px;margin:auto;padding:0 48px}.hero-premium{display:grid;grid-template-columns:1.02fr 1fr;align-items:center;gap:48px;padding:54px 0 64px}.hero-copy{position:relative;padding-bottom:12px}.hero-copy .eyebrow{display:flex;align-items:center;gap:9px;color:#556343}.tiny-spark{font-size:23px;color:#648055;line-height:1}.hero-copy h1{font:500 clamp(64px,7.5vw,102px)/.96 var(--display);letter-spacing:-3.5px;margin:27px 0 26px;position:relative}.hero-copy h1 em{font-style:normal;color:#63774d;display:inline-block;position:relative}.hero-copy h1 em::after{content:'';position:absolute;left:0;right:-7px;bottom:-7px;height:10px;border-top:4px solid var(--yellow);border-radius:50%;transform:rotate(-3deg)}.headline-star{font-size:72px;color:var(--yellow);position:absolute;left:330px;bottom:10px;transform:rotate(15deg);animation:starTurn 16s linear infinite}.hero-copy p{max-width:390px;font-size:16px;line-height:1.8;color:var(--muted);margin:0}.hero-copy .actions{gap:25px;margin-top:29px;flex-wrap:wrap}.hero-how{font-size:12px;font-weight:600;text-decoration:none;display:flex;align-items:center;gap:10px;min-height:44px}.hero-how span{font-size:22px}.hero-note{display:flex;align-items:center;gap:22px;margin-top:25px;color:#666c5d;font-size:11px}.hero-note>span{display:flex;align-items:center;gap:6px}.hero-note svg{color:#63794c}.conversation-stage{height:565px;background:#edc479;border-radius:160px 160px 24px 24px;position:relative;isolation:isolate;box-shadow:inset 0 0 0 1px #d7b06b}.stage-label{position:absolute;top:30px;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:7px;font-size:8px;letter-spacing:1.5px;font-weight:700;color:#67552e}.stage-label span{background:#746039}.cafe-window{position:absolute;top:80px;left:13%;width:74%;height:255px;border:9px solid #f9e7b7;border-bottom-width:13px;border-radius:140px 140px 5px 5px;overflow:hidden;background:#e5ead6;box-shadow:0 0 0 2px #c69f62}.window-sun{position:absolute;top:26px;right:35px;width:58px;height:58px;border-radius:50%;background:#ffdb70}.window-hill{position:absolute;width:125%;height:120px;left:-35px;bottom:-27px;background:#9dab7a;border-radius:50% 60% 0 0;transform:rotate(-12deg)}.window-hill:after{content:'';position:absolute;width:80%;height:140px;background:#b7c99c;border-radius:50%;left:150px;top:-30px}.window-frame{position:absolute;height:100%;width:8px;left:50%;background:#f9e7b7}.window-frame:after{content:'';position:absolute;top:115px;width:400px;height:8px;background:#f9e7b7;left:-200px}.cafe-sign{position:absolute;top:104px;left:18%;background:#fff8e7;border:1px solid #ad8c50;padding:9px 15px;border-radius:6px;transform:rotate(-7deg);font:500 26px var(--display);box-shadow:0 4px 0 #d7b16b;z-index:2}.cafe-sign span{display:block;font:600 6px 'DM Sans',sans-serif;letter-spacing:1px;margin-top:3px}.stage-doodle{position:absolute;right:18px;top:138px;font:400 27px/.9 var(--display);transform:rotate(10deg);color:#5a653d}.stage-doodle span{display:block;font-size:42px;margin-top:4px;margin-left:12px}.tato-small{position:absolute;top:211px;left:calc(50% - 78px);width:156px;height:166px;z-index:2;border-radius:48% 46% 42% 44%;background:#dfad59;border:3px solid #825d31;box-shadow:inset -12px -7px 0 #c99140;transform:rotate(-5deg);animation:tatoFloat 5s ease-in-out infinite}.tato-small:before,.tato-small:after{content:'';position:absolute;top:64px;width:9px;height:14px;border-radius:50%;background:#3e3c27;animation:blink 7s infinite}.tato-small:before{left:43px}.tato-small:after{right:40px}.tato-small .leaf{top:-27px;right:29px;width:42px;height:29px;border:2px solid #536438;background:#859b53;transform:rotate(-12deg)}.tato-small .mouth{left:62px;top:86px;width:25px;height:15px;border-bottom:3px solid #3e3c27}.cheeks{position:absolute;top:83px;left:26px;width:20px;height:10px;background:#d88a5d;border-radius:50%;box-shadow:82px 0 0 #d88a5d}.cafe-counter{position:absolute;left:0;right:0;top:350px;height:24px;background:#947049;border-top:5px solid #654f36;z-index:2}.coffee-cup{position:absolute;top:312px;right:64px;width:33px;height:38px;border-radius:3px 3px 12px 12px;background:#faf0d7;border:2px solid #775d3c;z-index:3}.coffee-cup:after{content:'';position:absolute;top:5px;right:-15px;width:13px;height:16px;border:3px solid #775d3c;border-radius:0 10px 10px 0}.coffee-cup i{position:absolute;width:2px;height:19px;top:-30px;background:#fff5db;border-radius:50%;left:8px;animation:steam 3s infinite}.coffee-cup i:nth-child(2){left:17px;animation-delay:.7s}.coffee-cup i:nth-child(3){left:25px;animation-delay:1.4s}.live-card{position:absolute;left:-23px;right:31px;top:350px;background:#fffef8;border:1px solid #dedbcc;border-radius:16px;padding:17px 20px;z-index:4;box-shadow:0 14px 35px #5f462222;transform:rotate(-3deg)}.live-head{display:flex;align-items:center;gap:7px;font-size:9px;color:#666a5b}.live-dot{width:6px;height:6px;border-radius:50%;background:#698953;box-shadow:0 0 0 3px #e9efdf}.demo-label{margin-left:auto;font-size:7px;letter-spacing:1px;border:1px solid #dfdfd4;border-radius:4px;padding:3px}.bubble{font-size:12px;padding:12px 14px;border-radius:12px;width:max-content;max-width:94%;margin-top:12px}.bubble-name{font-size:7px;font-weight:700;letter-spacing:1px;display:block;color:#687952;margin-bottom:5px}.bubble-tato{background:#ecf0e2;border-bottom-left-radius:2px}.bubble-user{background:#faedbd;margin-left:auto;border-bottom-right-radius:2px}.bubble-user>span{font-size:10px;margin-left:7px;color:#9a791f}.live-foot{display:flex;justify-content:space-between;align-items:center;margin-top:11px}.voice-line{display:flex;align-items:center;justify-content:center;gap:3px;height:29px;flex:1}.voice-line i{height:var(--h);width:3px;border-radius:3px;background:#809362;animation:voiceWave 1s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.13s)}.demo-toggle{border-radius:50%;width:34px;height:34px;background:var(--ink);color:#fff;font-size:12px;display:grid;place-items:center}.stage-sticker{position:absolute;right:-20px;top:277px;z-index:5;background:#f7db6b;padding:16px 18px;border:1px solid #b9993e;transform:rotate(9deg);border-radius:4px;box-shadow:2px 4px 0 #b79b5740;font:400 13px/1.3 var(--display)}.stage-sticker strong{font-weight:500}.stage-sticker>span{position:absolute;right:7px;top:-16px;font-size:32px}.stage-caption{position:absolute;bottom:14px;left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;font-size:7px;letter-spacing:1.3px;font-weight:600}.is-paused .bt-room__light{animation-play-state:paused!important}.proof-strip{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:27px 0;gap:20px}.proof-strip>div{display:flex;gap:17px;align-items:center;justify-content:center;border-right:1px solid var(--line)}.proof-strip>div:last-child{border:0}.proof-strip svg{color:#6b7f52;width:25px;height:25px}.proof-strip span{font-size:11px;line-height:1.7;color:#6c7063}.proof-strip strong{display:block;font-size:13px;color:var(--ink);font-weight:600}.experience{display:grid;grid-template-columns:1fr 1.1fr;gap:85px;padding:108px 0 115px}.experience h2,.scenes h2{font:500 clamp(35px,4.1vw,53px)/1.06 var(--display);letter-spacing:-1.3px;margin:18px 0 23px}.experience h2 em,.scenes h2 em{font-style:normal;color:#6c7d53}.experience-lead p{font-size:14px;line-height:1.8;max-width:335px;color:var(--muted)}.text-link{display:inline-flex;align-items:center;gap:18px;background:none;font-weight:600;font-size:12px;margin-top:15px;padding:10px 0;color:var(--ink);text-decoration:none}.experience-flow{display:grid;align-content:center}.flow-item{display:grid;grid-template-columns:30px 1fr 36px;gap:17px;align-items:start;padding:23px 0;border-bottom:1px solid var(--line)}.flow-item:first-child{padding-top:0}.flow-item:last-child{border:0;padding-bottom:0}.flow-mark{font-size:11px;font-weight:700;color:#879075;padding-top:5px}.flow-item h3{font:500 21px/1.15 var(--display);margin:0 0 8px}.flow-item p{font-size:12px;line-height:1.8;color:var(--muted);margin:0;max-width:330px}.flow-icon{color:#87916e;padding-top:3px}.scenes{padding:64px 36px 26px;background:#efeee4;border:1px solid #e5e4d7;border-radius:25px;margin:0 -16px}.scenes-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:30px}.scenes-head h2{margin-bottom:0}.scenes-head>p{color:var(--muted);font-size:12px;line-height:1.8;margin:0 0 4px}.scene-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.scene{border:1px solid #dcddce;border-radius:14px;background:#fffef7;overflow:hidden;transition:transform .3s,box-shadow .3s}.scene:hover{transform:translateY(-7px);box-shadow:0 15px 30px #343b2410}.scene-top{display:flex;justify-content:space-between;gap:8px;font-size:7px;letter-spacing:1px;font-weight:600;padding:17px 18px 0;background:#ebdab4}.scene-top span:last-child{letter-spacing:0;color:#69674f}.scene-art{height:185px;position:relative;overflow:hidden}.cafe-art{background:#ebdab4}.scene-trip .scene-top,.trip-art{background:#d9e3d4}.scene-work .scene-top,.work-art{background:#e4deeb}.scene-symbol{position:absolute;z-index:2;transition:transform .5s}.scene:hover .scene-symbol{transform:translateY(-6px) rotate(4deg)}.mini-awning{width:142px;height:28px;position:absolute;top:26px;left:calc(50% - 71px);background:repeating-linear-gradient(90deg,#7e8b60 0 20px,#faf4df 20px 40px);border:2px solid #69724d;border-radius:6px 6px 10px 10px;z-index:1}.mini-shop{position:absolute;left:calc(50% - 63px);top:46px;width:126px;height:114px;background:#fff4d9;border:2px solid #8b845f;border-radius:0 0 4px 4px;text-align:center;padding-top:11px;font:500 29px var(--display);color:#71804f}.mini-shop span{display:block;font:600 6px 'DM Sans',sans-serif;letter-spacing:2px;border:1px solid #b9ba9b;width:40px;padding:4px;margin:7px auto;transform:rotate(-9deg)}.cafe-art .scene-symbol{bottom:6px;right:26px;color:#5c6a43;background:#f0cc70;padding:11px;border:1px solid #b2a06a;border-radius:50%;transform:rotate(10deg)}.trip-art .scene-symbol{left:calc(50% - 41px);top:28px;transform:rotate(9deg);color:#617554}.flight-route{position:absolute;border:1px dashed #99a58b;width:240px;height:110px;border-radius:50%;transform:rotate(-20deg);top:32px;left:-63px}.flight-cloud{position:absolute;width:60px;height:20px;background:#eef3e8;border-radius:30px;top:33px;left:25px}.flight-cloud:before{content:'';position:absolute;width:30px;height:30px;border-radius:50%;left:15px;bottom:4px;background:inherit}.cloud-two{left:auto;right:-6px;top:90px;transform:scale(.8)}.ticket{position:absolute;background:#f7f5e7;bottom:9px;left:calc(50% - 76px);width:152px;font-size:6px;padding:10px 15px;border:1px solid #b4bba6;transform:rotate(-8deg);letter-spacing:1px}.ticket b{display:block;font-size:12px;margin-top:5px;letter-spacing:2px}.work-art .scene-symbol{bottom:12px;left:35px;color:#72687f;transform:rotate(-8deg)}.work-message{position:absolute;top:25px;left:25px;background:#fff9ef;border:1px solid #b4a7b9;border-radius:12px 12px 12px 0;padding:11px 14px;transform:rotate(-5deg);font:400 18px var(--display);z-index:2}.work-message span{color:#bb9344;margin-left:5px}.work-steps{position:absolute;bottom:0;right:10px;display:flex;align-items:end}.work-steps i{width:38px;height:40px;background:#b5a7bc;border:1px solid #a596ae}.work-steps i:nth-child(2){height:72px}.work-steps i:nth-child(3){height:104px}.scene-body{padding:24px 20px 13px}.scene-category{font-size:7px;letter-spacing:1.5px;color:#7e826e;font-weight:700}.scene-body h3{font:500 24px/1.05 var(--display);letter-spacing:-.5px;margin:9px 0 12px;max-width:225px}.scene-body p{font-size:11px;line-height:1.8;color:var(--muted);min-height:40px;margin:0}.scene-body button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;background:none;border-top:1px solid var(--line);padding:13px 0 0;margin-top:21px;text-align:left;font-weight:600;font-size:10px;min-height:47px}.scene-body button>span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#f0f0e6;transition:background .2s,transform .2s}.scene-body button:hover>span{background:var(--yellow);transform:rotate(-35deg)}.scenes-bottom{display:flex;justify-content:space-between;align-items:center;gap:18px;padding-top:16px}.scenes-bottom>span{font-size:10px;color:#787d6d}.scenes-bottom .text-link{margin:0;font-size:10px}.final-cta{position:relative;text-align:center;background:#2f392c;color:#f8f5e7;border-radius:24px;margin:78px 0 50px;padding:68px 40px;overflow:hidden}.final-cta .eyebrow{color:#c4c9b1}.final-cta h2{font:500 clamp(46px,5.5vw,70px)/1.03 var(--display);letter-spacing:-1.5px;margin:22px 0}.final-cta h2 em{font-style:normal;color:#f5ce59}.final-cta p{font-size:13px;color:#d1d4c3;margin:0 0 26px}.final-cta .btn{font-size:12px}.cta-note{display:block;font-size:10px;color:#bac3ac;margin-top:21px}.cta-doodle{position:absolute;top:80px;left:70px;font:400 80px var(--display);color:#9bab78;transform:rotate(-18deg)}.cta-doodle span{display:block;position:absolute;top:145px;left:760px;font-size:110px;color:#aebd89}.site-footer{max-width:1280px;margin:auto;padding:0 48px 35px;display:flex;flex-wrap:wrap;align-items:center;gap:25px}.site-footer .brand{font-size:23px}.site-footer>span{font-size:10px;color:#777c6d}.site-footer>a{font-size:10px;text-decoration:none;margin-left:auto}.site-footer .copyright{flex-basis:100%;border-top:1px solid var(--line);padding-top:20px;margin-top:5px;font-size:9px}
/* The same visual language follows you into the app. */
.screen{background:radial-gradient(ellipse at 0% 0%,#e5e9d5,transparent 55%),var(--cream);padding:45px 24px}.auth-card,.onboard-card{width:min(100%,570px);border-color:#dfe1d4;box-shadow:0 20px 65px #3037240c;border-radius:25px;padding:38px}.auth-card h1,.onboard-card h1{font-weight:500;font-size:42px;line-height:1.09;letter-spacing:-1px}.back{font-size:12px;padding:8px 0}.screen .eyebrow{font-size:9px}.screen .sub{font-size:13px;line-height:1.8}.progress{height:5px;margin:23px 0 30px;background:#eeefe5}.progress i{background:#7c8f5d}.choice{border:1px solid #dfe1d5;border-radius:13px;padding:17px 16px;gap:15px;transition:background .2s,border-color .2s,transform .2s}.choice:hover{background:#f8f8ef;border-color:#a3ae8f;transform:translateX(3px)}.choice.active{border:1px solid #8f9c6b;background:#f0f3e5;box-shadow:inset 3px 0 0 #829359}.choice .emoji{background:#f0f0e7;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;flex-shrink:0}.choice strong{font-size:18px}.choice small{font-size:11px;line-height:1.5;margin-top:5px}.choice.active:after{content:'✓';color:#5c7545;margin-left:auto}.app-shell{grid-template-columns:225px 1fr}.sidebar{background:#f2f2e8;padding:30px 23px;position:sticky;top:0;height:100vh}.side-nav button{display:flex;gap:14px;align-items:center;font-size:14px;min-height:48px;transition:background .2s}.side-nav button:hover{background:#e7eadb}.side-nav button.active{background:#dfe6cd;color:#445238}.side-nav button.active:after{content:'';width:6px;height:6px;background:#7b8e57;border-radius:50%;margin-left:auto}.side-footer{font-size:10px;line-height:1.8}.main{max-width:1200px;padding:50px 48px}.app-head{margin-bottom:36px}.app-head h1{font-size:44px;letter-spacing:-1px;font-weight:500;margin:12px 0}.app-head .sub{font-size:13px}.avatar{border:1px solid #dcb32a;border-radius:50%;width:48px}.dashboard{grid-template-columns:1.4fr 1fr}.card{padding:30px;border-color:#e0e2d5;border-radius:20px;box-shadow:0 5px 20px #25301203}.card h2{font-size:28px;margin:14px 0}.card p{font-size:13px;line-height:1.8;max-width:530px}.big-card{background:#eaf0db;position:relative;overflow:hidden;border-color:#dce3cc}.big-card>.eyebrow{color:#5c7144}.big-card>.btn{margin-top:8px}.stat-row{margin-top:30px;gap:20px}.stat strong{font-size:48px;font-weight:500;color:#66794b}.stat span{font-size:11px}.stat+.stat{padding-left:20px;border-left:1px solid var(--line)}.place{text-align:left;color:var(--ink);padding:23px 20px;transition:transform .2s,border-color .2s,box-shadow .2s;border-radius:15px;min-width:0}.place:hover{border-color:#95a775;box-shadow:0 8px 15px #30372409;transform:translateY(-4px)}.place-icon{width:55px;height:55px;background:#f4ebd4;border-radius:17px;display:grid;place-items:center;font-size:27px;margin-bottom:20px}.place:nth-child(2n) .place-icon{background:#e3ead9}.place:nth-child(3n) .place-icon{background:#eae3ee}.place strong{font-size:19px;margin:12px 0 8px}.place small{font-size:10px;line-height:1.6}.toast{z-index:50;max-width:calc(100vw - 40px);border:1px solid #6a745c;box-shadow:0 8px 25px #0002;font-size:13px;line-height:1.6;animation:enter .25s ease-out}.input:focus{border-color:#879b61}.fine{font-size:11px}
/* Motion is decorative; every screen remains usable without it. */
.hero-copy{animation:enter .7s both}.conversation-stage{animation:enter .9s .1s both}.will-reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s cubic-bezier(.22,.61,.36,1)}.will-reveal.is-visible{opacity:1;transform:none}.scene:nth-child(2){transition-delay:.07s}.scene:nth-child(3){transition-delay:.14s}.screen .auth-card,.screen .onboard-card,.main{animation:enter .35s ease-out}.will-reveal.scene.is-visible:hover{transform:translateY(-7px)}
@keyframes enter{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@keyframes tatoFloat{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-7px) rotate(1deg)}}@keyframes voiceWave{from{transform:scaleY(.35)}to{transform:scaleY(1)}}@keyframes blink{0%,43%,47%,100%{transform:scaleY(1)}45%{transform:scaleY(.1)}}@keyframes steam{0%{opacity:0;transform:translateY(6px)}40%{opacity:.8}100%{opacity:0;transform:translateY(-12px)}}@keyframes starTurn{to{transform:rotate(375deg)}}
@media(min-width:1500px){.hero-premium{padding-top:65px;padding-bottom:80px}.hero-copy h1{font-size:108px}.conversation-stage{height:590px}.live-card{top:362px}.cafe-counter{top:362px}.tato-small{top:225px}.coffee-cup{top:324px}}
@media(max-width:1050px){.premium-page{padding:0 32px}.topbar-premium{padding:23px 32px}.hero-premium{gap:30px}.hero-copy h1{font-size:80px}.headline-star{left:268px;font-size:54px}.conversation-stage{height:535px}.stage-sticker{right:-12px;font-size:11px;padding:14px}.stage-doodle{right:10px;font-size:22px}.live-card{left:-15px;right:15px;top:340px;padding:15px}.stage-caption{font-size:6px}.hero-copy .actions{gap:12px}.hero-how{font-size:11px}.hero-copy .btn{padding:14px 17px}.experience{gap:45px;padding:85px 0}.scenes{padding:45px 23px 22px}.scene-grid{gap:14px}.scene-body{padding:20px 15px 12px}.scene-body h3{font-size:22px}.scene-body button{font-size:9px}.scene-top{font-size:6px;padding:14px 12px 0}.cta-doodle{left:35px;font-size:62px}.main{padding:38px 28px}.city-grid{grid-template-columns:repeat(2,1fr)}.site-footer{padding-right:32px;padding-left:32px}}
@media(min-width:761px) and (max-width:850px){.sidebar{height:auto}.side-nav button{min-width:44px}.side-nav button.active:after{display:none}}
@media(max-width:760px){html{scroll-padding-top:24px}.topbar-premium{padding:20px 24px;gap:12px}.topbar-premium .brand{font-size:25px}.nav{gap:0}.nav>a{display:none}.nav .btn{font-size:10px;padding:10px 12px;gap:9px;min-height:40px}.nav .btn svg{width:16px}.premium-page{padding:0 24px}.hero-premium{grid-template-columns:1fr;gap:45px;padding:38px 0 42px}.hero-copy{max-width:520px;margin:auto;width:100%}.hero-copy h1{font-size:84px;letter-spacing:-2.8px;margin:23px 0}.headline-star{left:300px;bottom:5px}.hero-copy p{max-width:400px;font-size:15px}.hero-copy .actions{gap:24px;flex-direction:row;align-items:center}.hero-copy .actions .btn{width:auto}.hero-note{font-size:10px;margin-top:22px}.conversation-stage{max-width:470px;width:calc(100% - 20px);margin:auto;height:550px;border-radius:140px 140px 22px 22px}.live-card{left:-12px;right:14px;top:346px;padding:17px}.stage-sticker{right:-16px;font-size:13px}.proof-strip{gap:14px;padding:22px 0}.proof-strip>div{gap:9px;align-items:start}.proof-strip svg{width:19px;height:19px;flex-shrink:0}.proof-strip span{font-size:9px}.proof-strip strong{font-size:10px}.experience{grid-template-columns:1fr;gap:30px;padding:66px 0}.experience h2,.scenes h2{font-size:42px}.experience-lead p{max-width:410px}.experience-flow{padding-top:15px}.flow-item{grid-template-columns:30px 1fr 28px;gap:12px}.flow-item h3{font-size:22px}.flow-item p{max-width:none}.scenes{margin:0 -10px;padding:35px 20px 20px}.scenes-head{display:block;margin-bottom:27px}.scenes-head>p{margin-top:20px}.scene-grid{grid-template-columns:1fr;gap:22px}.scene-top{font-size:8px;padding:18px 22px 0}.scene-art{height:205px}.scene-body{padding:23px}.scene-body h3{max-width:none;font-size:29px}.scene-body p{font-size:13px;min-height:0}.scene-body button{font-size:12px;margin-top:20px}.mini-awning{top:35px}.mini-shop{top:55px}.cafe-art .scene-symbol{right:calc(50% - 122px);bottom:13px}.trip-art .scene-symbol{top:38px}.ticket{bottom:15px}.work-art .scene-symbol{left:calc(50% - 80px);bottom:22px}.work-message{left:calc(50% - 110px);top:25px}.work-steps{right:calc(50% - 120px)}.scenes-bottom{align-items:start;flex-direction:column;gap:6px}.scenes-bottom>span{margin-top:5px}.final-cta{padding:54px 20px;margin:48px 0 33px}.final-cta h2{font-size:53px}.cta-doodle{left:-22px;top:18px;font-size:43px;opacity:.4}.final-cta p{max-width:250px;margin:0 auto 26px;line-height:1.7}.site-footer{padding:0 24px 26px;gap:18px}.site-footer>span:not(.copyright){flex-basis:100%;order:2}.site-footer>a{margin-left:auto;font-size:9px}.site-footer .copyright{order:3}.sidebar{height:auto;position:sticky;padding:15px 20px}.sidebar .brand{font-size:24px}.sidebar .brand-mark{width:33px;height:34px;font-size:20px}.side-nav{gap:4px}.side-nav button{font-size:20px;min-width:42px;justify-content:center}.side-nav button.active:after{display:none}.main{padding:30px 22px 45px}.app-head h1{font-size:36px}.app-head .sub{max-width:250px}.dashboard{grid-template-columns:1fr}.card{padding:25px}.city-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.place{padding:18px}.place strong{font-size:18px}.screen{padding:25px 18px}.onboard-card,.auth-card{padding:29px 24px}.onboard-card h1,.auth-card h1{font-size:36px}.choice{padding:15px 12px}.choice strong{font-size:17px}.choice small{font-size:10px}}
@media(max-width:400px){.topbar-premium{padding:17px 18px}.premium-page{padding:0 20px}.hero-copy h1{font-size:72px}.headline-star{left:256px;font-size:45px}.hero-copy .eyebrow{font-size:9px}.hero-copy .actions{gap:14px}.hero-copy .btn{font-size:12px}.hero-note{gap:15px;font-size:9px}.conversation-stage{height:540px}.cafe-sign{font-size:23px;padding:8px 12px;left:12%}.stage-doodle{font-size:19px;right:7px}.stage-sticker{font-size:11px;padding:12px;top:275px}.live-head{font-size:8px}.bubble{font-size:11px}.live-card{padding:14px 12px}.proof-strip>div{flex-direction:column;gap:9px}.proof-strip strong{font-size:9px}.experience h2,.scenes h2{font-size:37px}.scene-body{padding:20px}.final-cta h2{font-size:46px}.city-grid{grid-template-columns:1fr}.app-head h1{font-size:31px}.app-head{gap:12px}.avatar{flex-shrink:0;width:39px;height:39px;font-size:22px}.choice .emoji{width:35px;height:40px;font-size:21px}.choice strong{font-size:16px}.screen .eyebrow{font-size:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.will-reveal{opacity:1;transform:none}}
/* Practice loop: the landing explains what a local challenge feels like. */
.practice-method{border-block:1px solid #dce3cf;padding:17px 0 15px;margin:23px 0 20px;max-width:390px}
.practice-method>span{display:block;font-size:8px;letter-spacing:1.2px;font-weight:700;color:#8a986f;margin-bottom:6px}
.practice-method>strong{display:block;font:500 20px/1.25 Fredoka;color:#5b7247}
.practice-method>p{font-size:11px!important;line-height:1.65!important;color:#7d8b71!important;margin:7px 0 0!important}
@media(max-width:760px){.practice-method{max-width:500px;margin:20px 0 18px}.practice-method>strong{font-size:18px}}
/* City experience: the illustrated, animated world from the BataTalk app. */
.app-shell{grid-template-columns:minmax(210px,240px) minmax(0,1fr)}
.main{min-width:0}
.city-app{max-width:1180px;margin:0 auto}
.city-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:24px}
.city-page-head h1{font:600 clamp(34px,4vw,48px)/1 Fredoka;margin:8px 0;letter-spacing:-.8px}
.city-page-head p{margin:0;color:var(--muted);font-size:15px}
.city-avatar{width:52px;height:52px;border-radius:16px;background:var(--yellow);font-size:25px;box-shadow:0 4px 0 #d39f16}
.city-tabs{display:flex;gap:9px;overflow-x:auto;padding:2px 1px 15px;scrollbar-width:thin}
.city-tab{min-width:150px;display:grid;grid-template-columns:auto 1fr;column-gap:8px;row-gap:2px;text-align:left;padding:12px 13px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:transform .18s ease,border-color .18s ease,background .18s ease;flex:0 0 auto}
.city-tab:hover{transform:translateY(-2px);border-color:#d5ad30}
.city-tab>span{grid-row:1 / span 2;font-size:24px;line-height:1.1}
.city-tab strong{font:500 15px/1.1 Fredoka;color:var(--ink);white-space:nowrap}
.city-tab small{font-size:10px;font-weight:700;color:var(--muted);white-space:nowrap}
.city-tab.is-active{background:var(--yellow);border-color:#d39f16;box-shadow:0 4px 0 #d39f16}
.city-tab.is-active small{color:#745900}
.city-title-row{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:14px 0 17px}
.city-count{font:600 10px Fredoka;letter-spacing:1.4px;color:#a37b14}
.city-title-row h2{font:600 28px/1 Fredoka;margin:6px 0 5px}
.city-title-row p{margin:0;color:var(--muted);font-size:13px}
.city-view-switch{display:flex;gap:3px;padding:3px;background:#fff;border:1px solid var(--line);border-radius:12px}
.city-view-switch button{padding:9px 12px;border-radius:9px;background:transparent;color:var(--muted);font:600 12px Fredoka}
.city-view-switch button.is-active{background:#fff4ce;color:#7f6000}
.city-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.75fr);align-items:start;gap:20px}
.city-map-shell{min-width:0;padding:9px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 6px 0 #ead89a}
.city-map-toolbar{height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 6px 4px;color:#7a6a42;font:600 11px Fredoka;letter-spacing:.6px}
.city-map-toolbar span{display:flex;align-items:center;gap:7px}
.city-map-toolbar i{width:7px;height:7px;border-radius:50%;background:#68a847;box-shadow:0 0 0 3px #e2f1d9}
.city-map-toolbar small{font:600 10px 'DM Sans';color:#a38d61}
.city-map-viewport{position:relative;min-height:555px;overflow:hidden;border-radius:13px;border:1px solid rgba(44,37,25,.16);isolation:isolate}
.city-art{position:absolute;inset:0;overflow:hidden;background:linear-gradient(160deg,var(--sky-a),var(--sky-b) 58%,var(--sky-c));color:#3a2a12}
.city-haze{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(80% 46% at 50% 4%,rgba(255,255,255,.28),transparent 70%),radial-gradient(100% 80% at 50% 100%,rgba(30,40,55,.08),transparent 70%)}
.city-art-credit{position:absolute;right:13px;top:13px;z-index:8;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.82);color:rgba(55,48,31,.68);font:600 9px Fredoka;letter-spacing:1px}
.city-map-tip{position:absolute;left:50%;top:14px;z-index:12;transform:translateX(-50%);padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.9);color:#54492f;font:600 11px Fredoka;white-space:nowrap;box-shadow:0 3px 0 rgba(44,37,25,.12)}
.city-nav-arrow{position:absolute;top:50%;z-index:14;width:38px;height:38px;border-radius:50%;background:#fff;color:#a77b10;font:400 31px/30px Fredoka;box-shadow:0 4px 0 rgba(44,37,25,.18);transform:translateY(-50%);transition:transform .16s ease,opacity .16s ease}
.city-nav-arrow:hover:not(:disabled){transform:translateY(-50%) scale(1.06)}
.city-nav-arrow:disabled{opacity:.35;cursor:not-allowed}
.arrow-prev{left:10px}.arrow-next{right:10px}
.city-poi-layer{position:absolute;inset:0;z-index:11}
.city-poi{position:absolute;left:var(--poi-x);top:var(--poi-y);width:104px;min-height:86px;padding:0;background:transparent;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--ink);transition:transform .24s cubic-bezier(.22,1.3,.36,1);z-index:2}
.city-poi:hover,.city-poi:focus-visible{transform:translate(-50%,-50%) scale(1.08);z-index:5}
.city-poi.is-selected{transform:translate(-50%,-50%) scale(1.17);z-index:6}
.poi-pin{position:relative;width:52px;height:52px;display:grid;place-items:center;border:3px solid var(--poi-color);border-radius:50%;background:#fff;font-size:23px;box-shadow:0 4px 0 rgba(20,40,59,.22)}
.poi-ring{position:absolute;top:-7px;width:64px;height:64px;border:2px solid var(--poi-color);border-radius:50%;opacity:.4;animation:city-ring 2.2s ease-out infinite;pointer-events:none}
.city-poi.is-selected .poi-pin{border-color:#fff;background:var(--poi-color);box-shadow:0 0 0 4px var(--yellow),0 5px 0 rgba(20,40,59,.24)}
.city-poi.is-selected .poi-ring{animation-duration:1.4s;opacity:.7}
.poi-name{max-width:104px;padding:4px 8px;border-radius:8px;background:#fff;box-shadow:0 2px 0 rgba(20,40,59,.12);font:600 10px/1.1 Fredoka;white-space:nowrap}
.city-detail{position:sticky;top:25px;padding:22px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 6px 0 #ead89a}
.detail-kicker{font:600 10px Fredoka;letter-spacing:1.3px;color:#a67c13}
.detail-title-row{display:flex;align-items:center;gap:12px;margin:15px 0 17px}
.detail-icon{width:54px;height:54px;display:grid;place-items:center;flex:0 0 auto;border-radius:17px;background:var(--poi-color);font-size:28px;box-shadow:0 4px 0 rgba(44,37,25,.15)}
.detail-title-row h2{font:500 25px/1 Fredoka;margin:0 0 5px}
.detail-title-row p{margin:0;font-size:12px;color:var(--muted)}
.detail-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:17px}
.detail-meta span{padding:6px 8px;border-radius:8px;background:#fff5d5;color:#7b600e;font-size:10px;font-weight:700}
.detail-block{padding:13px 0;border-top:1px solid #eee4cf}
.detail-block small,.detail-support small{display:block;margin-bottom:6px;color:#a47c18;font:600 9px Fredoka;letter-spacing:1px}
.detail-block p{margin:0;color:#6d624e;font-size:13px;line-height:1.5}
.detail-tato strong{color:var(--ink)}
.detail-support{display:grid;gap:6px;margin:4px 0 17px;padding:14px;border-radius:12px;background:#fff4c9}
.detail-support strong{font:500 18px/1.2 Fredoka;color:#3d321e}
.detail-support span{font-size:11px;color:#8c722d}
.city-start-button{width:100%;padding:14px 16px;border-radius:12px;background:var(--yellow);color:#5e4600;box-shadow:0 4px 0 #d39f16;font:600 12px Fredoka;transition:transform .16s ease,box-shadow .16s ease}
.city-start-button:hover{transform:translateY(-2px);box-shadow:0 6px 0 #d39f16}
.city-start-button b{margin-left:5px;font-size:15px}
.city-footnote{margin:18px 0 0;text-align:center;color:#9a8d72;font-size:11px}
.city-poi-list{display:grid;gap:8px;padding:5px}
.city-poi-row{display:flex;align-items:center;gap:12px;width:100%;padding:11px;border:1px solid var(--line);border-radius:12px;background:#fff;text-align:left;transition:transform .16s ease,border-color .16s ease}
.city-poi-row:hover{transform:translateX(3px);border-color:#d5ad30}
.city-poi-row.is-selected{background:#fff8df;border-color:#d5ad30}
.row-icon{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;border-radius:13px;background:var(--poi-color);font-size:21px}
.row-copy{min-width:0;display:grid;gap:4px}
.row-copy strong{font:500 16px Fredoka;color:var(--ink)}
.row-copy small{overflow:hidden;color:var(--muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.row-arrow{margin-left:auto;color:#ab8018;font-size:20px}

/* TaTotorial */
.city-art-0 .city-water{position:absolute;inset:0;background:radial-gradient(circle at 14% 30%,rgba(255,255,255,.25) 0 4px,transparent 5px),radial-gradient(circle at 80% 60%,rgba(255,255,255,.22) 0 6px,transparent 7px)}
.city-island{position:absolute;left:7%;right:7%;top:24%;bottom:5%;border-radius:44% 56% 48% 52%/38% 42% 58% 62%;background:linear-gradient(160deg,#f5e4ac,#e8cf8b);box-shadow:0 0 0 8px rgba(255,255,255,.24),inset -8px -10px 0 rgba(190,150,70,.24);z-index:2}
.city-island:after{content:'';position:absolute;left:6%;right:6%;top:7%;bottom:7%;border-radius:44% 56% 48% 52%/38% 42% 58% 62%;background:linear-gradient(160deg,#afda80,#8fc461);box-shadow:inset -6px -8px 0 rgba(70,120,40,.18)}
.island-path{position:absolute;height:28%;width:4%;background:#f2e3b2;border-radius:999px;z-index:3;transform-origin:center}.path-one{left:45%;top:41%;transform:rotate(42deg)}.path-two{left:57%;top:48%;transform:rotate(-43deg)}
.island-house{position:absolute;left:45%;top:31%;width:43px;height:34px;background:linear-gradient(#e85d4a,#c94436);border-radius:4px;z-index:4;box-shadow:4px 5px 0 rgba(90,60,10,.2)}.island-house:before{content:'';position:absolute;left:-3px;top:-10px;border-left:25px solid transparent;border-right:25px solid transparent;border-bottom:13px solid #a83428}
.city-art-0 .city-pond{position:absolute;left:19%;top:72%;width:14%;height:10%;border-radius:50%;background:radial-gradient(circle at 38% 35%,#9fdff5,#5eb8de);box-shadow:inset 2px 3px 0 rgba(255,255,255,.4);z-index:4}
.city-tree,.campus-tree{position:absolute;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 32% 25%,#8ccb6a 0 13%,#5ea83c 14% 72%,#4e9432 73%);box-shadow:4px 8px 0 rgba(60,100,30,.25);z-index:4}.city-art-0 .tree-one{left:21%;top:36%}.city-art-0 .tree-two{right:18%;top:42%;transform:scale(.8)}.city-art-0 .tree-three{left:55%;top:81%;transform:scale(.9)}
.city-flower{position:absolute;width:8px;height:8px;border-radius:50%;background:#ff8fa0;z-index:5;box-shadow:7px 1px 0 #ffd44d}.city-art-0 .flower-one{left:36%;top:57%}.city-art-0 .flower-two{left:58%;top:51%;background:#b57be0}
.city-cloud{position:absolute;z-index:5;color:rgba(255,255,255,.8);font:700 29px Fredoka;animation:city-cloud-drift 4s ease-in-out infinite alternate}.cloud-one{left:8%;top:8%}.cloud-two{right:12%;top:15%;font-size:23px;animation-delay:.6s}
.city-boat{position:absolute;right:8%;top:9%;width:38px;height:18px;border-bottom:8px solid #b35f3d;border-radius:0 0 15px 15px;z-index:5;animation:city-bob 3.4s ease-in-out infinite}.city-boat:before{content:'';position:absolute;left:16px;bottom:5px;width:3px;height:22px;background:#7a4a28}.city-boat:after{content:'';position:absolute;left:19px;bottom:15px;border-left:14px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
.city-bird{position:absolute;color:rgba(255,255,255,.85);font-size:26px;z-index:5;animation:city-cloud-drift 5s ease-in-out infinite alternate}.bird-one{left:20%;top:16%}.bird-two{left:58%;top:10%;font-size:18px;animation-delay:1s}

/* Batata City */
.city-grid-overlay{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 2px,transparent 2px 27px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px,transparent 2px 27px);z-index:0}
.city-road{position:absolute;background:#6f737d;z-index:2;box-shadow:inset 0 2px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.1)}.road-horizontal{left:0;right:0;top:43%;height:14%}.road-vertical{top:0;bottom:0;left:37%;width:13%}
.road-mark{position:absolute;background:repeating-linear-gradient(90deg,#f6e27a 0 14px,transparent 14px 27px);z-index:3}.mark-h{left:0;right:0;top:49.5%;height:3px}.mark-v{top:0;bottom:0;left:42%;width:3px;background:repeating-linear-gradient(0deg,#f6e27a 0 14px,transparent 14px 27px)}
.city-crosswalk{position:absolute;width:10%;height:8%;z-index:4;background:repeating-linear-gradient(90deg,#e8e8e8 0 5px,#6f737d 5px 10px)}.crosswalk-one{left:38%;top:35%}.crosswalk-two{left:38%;top:58%}
.city-building{position:absolute;border-radius:5px;z-index:3;box-shadow:4px 5px 0 rgba(60,50,20,.18)}.city-building:after{content:'';position:absolute;left:16%;right:16%;top:31%;height:7px;background:#ffe9b8;border-radius:1px;box-shadow:0 12px 0 #8a5624,0 24px 0 #ffe9b8}
.building-orange{left:6%;top:6%;width:20%;height:15%;background:linear-gradient(150deg,#f0ac62,#de9448);border-top:6px solid #c9803c}.building-red{left:6%;top:24%;width:14%;height:13%;background:linear-gradient(150deg,#e68a7a,#d06a5a);border-top:5px solid #b54a3c}.building-gray{right:6%;top:18%;width:27%;height:18%;background:linear-gradient(150deg,#d6cfc4,#bfb6a8);border-top:5px solid #a2988a}.building-yellow{right:6%;top:61%;width:25%;height:14%;background:linear-gradient(150deg,#f2cc66,#e0b34a);border-top:5px solid #c79a32}
.city-art-1 .tree-one{left:8%;top:65%;transform:scale(.9)}.city-art-1 .tree-two{left:69%;top:70%;transform:scale(.7)}
.city-park{position:absolute;left:6%;top:64%;width:23%;height:27%;border-radius:14px;background:linear-gradient(150deg,#a6d478,#8cbe5e);box-shadow:inset -5px -7px 0 rgba(70,120,40,.15);z-index:2}.city-park:after{content:'';position:absolute;left:17%;top:14%;width:60%;height:62%;border:5px solid #f2e3b2;border-radius:50%;transform:rotate(18deg)}.city-art-1 .city-pond{position:absolute;left:11%;top:81%;width:10%;height:7%;z-index:5}
.city-car{position:absolute;z-index:7;width:34px;height:14px;border-radius:5px;background:linear-gradient(#3a4450,#242c36);box-shadow:0 3px 0 rgba(20,30,40,.28);animation:city-drive 8s linear infinite}.city-car:before{content:'';position:absolute;left:8px;top:2px;width:18px;height:6px;border-radius:3px;background:#afc4d8}.city-car:after{content:'';position:absolute;left:4px;bottom:-3px;width:6px;height:6px;border-radius:50%;background:#2a323c;box-shadow:20px 0 #2a323c}.city-art-1 .car-one{top:46%;left:-40px}.city-art-1 .car-two{top:52%;left:calc(100% + 40px);background:linear-gradient(#fff,#d8dee6);animation-name:city-drive-back;animation-delay:2s;animation-duration:9.5s}

/* Fritópolis */
.city-sea{position:absolute;inset:0 0 auto;height:31%;background:linear-gradient(#2e97cc,#45b4e0);z-index:0}.city-beach{position:absolute;left:0;right:0;top:30%;bottom:0;background:linear-gradient(#f7e7b6,#eed9a0);z-index:1}.city-wave{position:absolute;left:0;right:0;height:5px;border-radius:50%;background:rgba(255,255,255,.7);z-index:3}.wave-one{top:27%}.wave-two{top:30%;opacity:.5}.city-boardwalk{position:absolute;left:0;right:0;top:45%;height:9%;z-index:4;background:repeating-linear-gradient(90deg,#d2a268 0 13px,#c4945a 13px 26px);box-shadow:0 4px 0 rgba(120,80,30,.2)}
.city-palm{position:absolute;z-index:5;width:12px;height:82px;border-radius:8px 8px 3px 3px;background:#9a6e40;transform-origin:bottom}.city-palm:before{content:'';position:absolute;left:-22px;top:-17px;width:58px;height:34px;background:radial-gradient(ellipse at center,#4eb05e 0 20%,transparent 21%),radial-gradient(ellipse at 30% 55%,#358a44 0 18%,transparent 19%),radial-gradient(ellipse at 72% 48%,#3e9a4e 0 18%,transparent 19%)}.palm-one{left:10%;top:57%;transform:rotate(-7deg)}.palm-two{right:11%;top:60%;transform:scaleX(-1) rotate(-7deg)}
.city-parasol{position:absolute;left:56%;top:35%;width:45px;height:45px;border-radius:50%;z-index:5;background:conic-gradient(#ff5b5b 0 12.5%,#fff 12.5% 25%,#ff5b5b 25% 37.5%,#fff 37.5% 50%,#ff5b5b 50% 62.5%,#fff 62.5% 75%,#ff5b5b 75% 87.5%,#fff 87.5%);clip-path:polygon(50% 0,100% 78%,0 78%);filter:drop-shadow(0 3px 0 rgba(120,80,30,.2))}.city-parasol:after{content:'';position:absolute;left:21px;top:28px;width:3px;height:24px;background:#8a5e32}.city-food-cart{position:absolute;left:46%;top:76%;width:54px;height:34px;border-radius:5px;z-index:6;background:linear-gradient(#ff9a66,#f07840);box-shadow:4px 5px 0 rgba(120,80,30,.2);border-top:9px solid #fff}.city-food-cart:after{content:'FRITA';position:absolute;left:10px;top:16px;color:#fff;font:700 9px Fredoka;letter-spacing:1px}.city-fries{position:absolute;left:61%;top:67%;z-index:6;font-style:normal;font-size:30px;animation:city-hop 2s ease-in-out infinite}.city-crab{position:absolute;left:12%;top:38%;z-index:6;color:#cf6948;font-size:22px;animation:city-crabwalk 14s ease-in-out infinite}.city-art-2 .boat-one{left:34%;top:13%;background:#fff;border-bottom-color:#d8dee6}.city-art-2 .boat-one:after{border-left-color:#ff8fa0}.city-art-2 .boat-two{left:21%;top:10%;width:22px;height:8px;background:#fff;border-bottom-color:#c4d7e8;animation-duration:4.1s;animation-delay:.8s}.city-art-2 .bird-one{top:4%}.city-art-2 .bird-two{top:9%;left:64%}

/* Neon Purê */
.city-art-3 .city-haze{background:radial-gradient(circle at 74% 8%,rgba(255,235,168,.22),transparent 17%),radial-gradient(ellipse at 50% 40%,rgba(84,63,142,.22),transparent 60%)}.city-moon{position:absolute;right:15%;top:7%;width:43px;height:43px;border-radius:50%;z-index:2;background:radial-gradient(circle at 38% 35%,#fff6d8,#f2dfa0);box-shadow:0 0 24px rgba(255,240,190,.45)}.city-moon:after{content:'';position:absolute;left:24px;top:8px;width:8px;height:8px;border-radius:50%;background:rgba(200,180,120,.36);box-shadow:-11px 16px 0 rgba(200,180,120,.28)}
.city-star{position:absolute;z-index:3;color:#fff;font:700 14px Fredoka;animation:city-twinkle 2.4s ease-in-out infinite}.star-one{left:19%;top:8%}.star-two{left:53%;top:14%;animation-delay:.6s}.star-three{right:11%;top:23%;animation-delay:1.1s}
.city-neon-road{position:absolute;background:#141026;z-index:2}.city-neon-road.road-horizontal{top:47%;height:11%;left:0;right:0}.city-neon-road.road-vertical{left:47%;width:9%;top:0;bottom:0}.city-neon-road.road-horizontal:after{content:'';position:absolute;left:0;right:0;top:50%;height:2px;background:#ff6ec7;box-shadow:0 0 10px #ff6ec7}.city-neon-road.road-vertical:after{content:'';position:absolute;top:0;bottom:0;left:50%;width:2px;background:#4fe3e0;box-shadow:0 0 10px #4fe3e0}
.city-neon-building{position:absolute;z-index:3;border-radius:5px;background:linear-gradient(#3e3468,#2a2248);box-shadow:5px 6px 0 rgba(0,0,0,.26);font-style:normal}.city-neon-building:after{content:'';position:absolute;left:16%;right:16%;top:37%;height:6px;background:#ffd44d;box-shadow:0 12px 0 #574a8a,0 24px 0 #ffd44d,0 36px 0 #574a8a}.city-neon-building b{position:absolute;z-index:2;left:10%;top:11%;color:#ff8ed4;font:700 9px Fredoka;letter-spacing:1px;text-shadow:0 0 8px #ff6ec7}.neon-building-one{left:8%;top:11%;width:26%;height:27%}.neon-building-two{right:8%;top:8%;width:24%;height:31%;background:linear-gradient(#453a78,#302754)}.neon-building-two b{color:#7ff0ee;text-shadow:0 0 8px #4fe3e0}.neon-building-three{left:8%;top:63%;width:24%;height:25%}.neon-building-three b{color:#ffe9a0;text-shadow:0 0 8px #ffd44d}.neon-building-four{right:8%;top:63%;width:28%;height:25%;background:linear-gradient(#453a78,#302754)}
.city-neon-car{position:absolute;z-index:5;width:34px;height:12px;border-radius:6px;background:linear-gradient(#c793ec,#9a5fd0);box-shadow:0 0 12px #ff6ec7;animation:city-drive 6s linear infinite}.city-neon-car:after{content:'';position:absolute;right:-6px;top:3px;width:7px;height:5px;border-radius:3px;background:#ffd44d;box-shadow:0 0 8px #ffd44d}.neon-car-one{left:-40px;top:48%}.neon-car-two{left:calc(100% + 40px);top:53%;background:linear-gradient(#ffd44d,#ebb424);box-shadow:0 0 12px #4fe3e0;animation-name:city-drive-back;animation-duration:8s;animation-delay:2s}.city-music-note{position:absolute;z-index:5;color:#ff8ed4;font:700 24px Fredoka;text-shadow:0 0 8px #ff6ec7;animation:city-float 2.4s ease-in-out infinite}.note-one{left:37%;top:16%}.note-two{left:43%;top:10%;font-size:17px;animation-delay:.7s}

/* Bata Airport */
.airport-terminal{position:absolute;left:0;right:0;top:6%;height:23%;z-index:2;border-radius:0 0 26px 26px;background:linear-gradient(150deg,#edf1f6,#d8dfe8);box-shadow:0 5px 0 rgba(60,70,90,.15)}.airport-terminal:before{content:'';position:absolute;left:7%;right:7%;top:20%;height:38%;background:repeating-linear-gradient(90deg,#9fbed6 0 10px,#7fa6c4 10px 14px);border-radius:6px}.airport-terminal b{position:absolute;left:50%;top:63%;transform:translateX(-50%);padding:4px 9px;border-radius:5px;background:#b9c4d2;color:#56677a;font:700 9px Fredoka;letter-spacing:1px}.airport-tower{position:absolute;right:12%;top:7%;width:17px;height:30%;z-index:3;border-radius:5px;background:linear-gradient(#98a6b8,#7e8da0)}.airport-tower:before{content:'';position:absolute;left:-5px;top:-7px;width:27px;height:15px;border-radius:50%;background:#5c6b80}.airport-tower:after{content:'';position:absolute;left:8px;top:-1px;width:6px;height:6px;border-radius:50%;background:#ff5b5b;box-shadow:0 0 7px #ff5b5b;animation:city-twinkle 1.6s ease-in-out infinite}
.airport-runway{position:absolute;left:0;right:0;top:49%;height:17%;z-index:2;background:#5c6470;box-shadow:inset 0 3px 0 rgba(0,0,0,.15)}.runway-mark{position:absolute;left:0;right:0;top:57%;height:3px;z-index:3;background:repeating-linear-gradient(90deg,#fff 0 17px,transparent 17px 34px)}
.airport-plane{position:absolute;z-index:5;width:54px;height:18px;border-radius:14px;background:linear-gradient(#fff,#dde4ec);box-shadow:0 3px 0 rgba(60,70,90,.2);animation:city-drive 10s linear infinite}.airport-plane:before{content:'';position:absolute;left:19px;top:-7px;width:8px;height:29px;border-radius:3px;background:#c9d2dc;transform:skewX(-18deg)}.airport-plane:after{content:'';position:absolute;right:4px;top:5px;width:6px;height:8px;border-radius:3px;background:#ff5b5b}.plane-fly{left:-70px;top:16%;animation-name:city-fly}.plane-taxi{left:calc(100% + 70px);top:52%;width:65px;height:20px;animation-name:city-drive-back;animation-duration:8s}
.airport-board{position:absolute;right:12%;top:34%;z-index:6;width:146px;display:grid;gap:5px;padding:10px;border-radius:10px;background:#1e2a3a;box-shadow:0 5px 0 rgba(20,30,45,.3);font-style:normal}.airport-board b{color:#ffd44d;font:700 9px Fredoka;letter-spacing:1px;text-align:center}.airport-board span{display:flex;justify-content:space-between;gap:8px;color:#e8eef5;font:600 8px Fredoka}.airport-board em{color:#7bc043;font-style:normal}.airport-board span:nth-child(3) em{color:#ffd44d}.airport-board span:nth-child(4) em{color:#ff8a3d}.airport-belt{position:absolute;left:8%;top:82%;width:100px;height:16px;z-index:6;border-radius:5px;background:repeating-linear-gradient(90deg,#3a4450 0 14px,#2a323c 14px 28px);background-size:28px 100%;animation:city-belt 1.1s linear infinite;box-shadow:0 3px 0 rgba(20,30,40,.4)}.airport-bag{position:absolute;left:18%;top:76%;width:32px;height:35px;z-index:6;border-radius:5px;background:linear-gradient(#ff9a5a,#f07840);box-shadow:0 3px 0 rgba(90,40,0,.3)}.airport-bag:before{content:'';position:absolute;left:8px;top:-8px;width:12px;height:9px;border:3px solid #c05828;border-bottom:0;border-radius:6px 6px 0 0}

/* Campus Valley */
.campus-lawn{position:absolute;inset:0;background:linear-gradient(150deg,#b8dc96,#9cc878);z-index:0}.campus-road{position:absolute;z-index:2;background:#7b858e;box-shadow:inset 0 2px 0 rgba(255,255,255,.22)}.campus-road.road-horizontal{top:45%;height:12%}.campus-road.road-horizontal:after{content:'';position:absolute;left:0;right:0;top:50%;height:3px;background:repeating-linear-gradient(90deg,#f6e27a 0 14px,transparent 14px 28px)}
.campus-building{position:absolute;z-index:3;border-radius:5px;background:linear-gradient(150deg,#c6a574,#9f8054);box-shadow:4px 5px 0 rgba(60,50,20,.2)}.campus-building:after{content:'';position:absolute;left:17%;right:17%;top:32%;height:7px;background:#ffe9b8;box-shadow:0 13px 0 #7a5e3d,0 26px 0 #ffe9b8}.campus-library{left:8%;top:8%;width:24%;height:27%;background:linear-gradient(150deg,#a5c8d8,#709db5);border-top:7px solid #527d96}.campus-hall{right:7%;top:9%;width:24%;height:25%;background:linear-gradient(150deg,#d88a78,#c06a58);border-top:7px solid #a34a3a}.campus-dorm{right:8%;top:63%;width:23%;height:22%;background:linear-gradient(150deg,#b08ad8,#9268bc)}
.campus-court{position:absolute;left:8%;top:67%;width:30%;height:21%;z-index:3;border-radius:9px;background:#7fb85a;box-shadow:inset 0 0 0 3px #fff,inset -4px -5px 0 rgba(70,120,40,.2)}.campus-court:after{content:'';position:absolute;left:34%;top:18%;width:30%;height:62%;border:2px solid #fff;border-radius:4px}.campus-tree{position:absolute;width:31px;height:31px;border-radius:50%;z-index:4;background:radial-gradient(circle at 32% 25%,#8ccb6a 0 13%,#5ea83c 14% 72%,#4e9432 73%);box-shadow:4px 8px 0 rgba(60,100,30,.25)}.campus-tree.tree-one{left:67%;top:41%}.campus-tree.tree-two{left:31%;top:32%;transform:scale(.7)}.campus-ball{position:absolute;left:27%;top:76%;z-index:5;width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#d8dee6);animation:city-ball 1.3s ease-in-out infinite}

/* Workshire */
.work-road{position:absolute;z-index:2;background:#5c6470}.work-road.road-horizontal{left:0;right:0;top:45%;height:12%}.work-road.road-horizontal:after{content:'';position:absolute;left:0;right:0;top:50%;height:3px;background:repeating-linear-gradient(90deg,#f6e27a 0 14px,transparent 14px 28px)}.work-road.road-vertical{top:0;bottom:0;left:44%;width:11%}.work-roundabout{position:absolute;left:40%;top:41%;width:20%;height:20%;z-index:3;border-radius:50%;background:#5c6470}.work-fountain{position:absolute;left:45%;top:46%;width:10%;height:10%;z-index:4;border:3px solid #8894a2;border-radius:50%;background:radial-gradient(circle at 40% 35%,#9fdff5,#4fa8d0)}.work-fountain:after{content:'✦';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;animation:city-twinkle 2s ease-in-out infinite}
.work-tower,.work-building{position:absolute;z-index:3;border-radius:5px;background:linear-gradient(#7fa8cc,#5c88b0);box-shadow:5px 6px 0 rgba(30,45,60,.25);font-style:normal}.work-tower:after,.work-building:after{content:'';position:absolute;left:12%;right:12%;top:24%;height:3px;background:rgba(255,255,255,.35);box-shadow:0 10px 0 rgba(255,255,255,.25),0 20px 0 rgba(255,255,255,.34),0 30px 0 rgba(255,255,255,.25)}.work-tower b,.work-building b{position:absolute;z-index:2;left:50%;top:9%;transform:translateX(-50%);padding:3px 5px;border-radius:3px;background:rgba(255,255,255,.86);color:#3a5a78;font:700 8px Fredoka;white-space:nowrap}.tower-one{left:8%;top:7%;width:24%;height:29%}.tower-two{right:7%;top:9%;width:25%;height:26%;background:linear-gradient(#8898ac,#68788c)}.tower-two b{width:18px;height:18px;padding:0;display:grid;place-items:center;border-radius:50%;background:transparent;border:2px solid #fff;color:#fff}.tower-three{left:35%;top:14%;width:8%;height:20%;background:linear-gradient(#b0bcc8,#8e9cac)}.work-building-one{left:8%;top:65%;width:26%;height:23%}.work-building-two{right:7%;top:63%;width:28%;height:25%;background:linear-gradient(#d8c9a0,#c0ac7c)}.work-building-two b{top:58%;color:#7a6a3a}.city-art-6 .tree-one{left:66%;top:39%;transform:scale(.7)}.city-art-6 .tree-two{left:35%;top:65%;transform:scale(.65)}

@keyframes city-ring{0%{transform:scale(.65);opacity:.55}100%{transform:scale(1.65);opacity:0}}
@keyframes city-cloud-drift{0%,100%{transform:translateX(0)}50%{transform:translateX(16px)}}
@keyframes city-bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}
@keyframes city-hop{0%,100%{transform:translateY(0) scaleX(1)}40%{transform:translateY(-10px)}60%{transform:translateY(0) scaleX(1.04) scaleY(.96)}}
@keyframes city-drive{0%{transform:translateX(-48px)}100%{transform:translateX(calc(100vw + 340px))}}
@keyframes city-drive-back{0%{transform:translateX(48px)}100%{transform:translateX(calc(-100vw - 340px))}}
@keyframes city-fly{0%{transform:translateX(-70px) translateY(7px) rotate(-8deg)}100%{transform:translateX(calc(100vw + 300px)) translateY(-28px) rotate(-8deg)}}
@keyframes city-crabwalk{0%,100%{transform:translateX(0)}50%{transform:translateX(160px)}}
@keyframes city-twinkle{0%,100%{opacity:.28}50%{opacity:1}}
@keyframes city-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes city-belt{to{background-position:28px 0}}
@keyframes city-ball{0%,100%{transform:translateY(0)}40%{transform:translateY(-22px)}60%{transform:translateY(0) scale(1.12,.86)}}
@media(prefers-reduced-motion:reduce){.city-art *, .city-art *:before, .city-art *:after{animation:none!important;transition:none!important}}
@media(max-width:980px){.city-layout{grid-template-columns:1fr}.city-detail{position:relative;top:auto}.city-map-viewport{min-height:520px}}
@media(max-width:680px){.main{padding-left:16px;padding-right:16px}.city-page-head h1{font-size:35px}.city-title-row{align-items:flex-start;flex-direction:column}.city-view-switch{align-self:stretch}.city-view-switch button{flex:1}.city-map-viewport{min-height:480px}.city-map-tip{top:12px;font-size:10px}.city-art-credit{right:10px;top:10px;font-size:8px}.city-poi{width:88px}.poi-pin{width:45px;height:45px;font-size:20px}.poi-ring{width:57px;height:57px}.poi-name{max-width:90px;font-size:9px}.city-nav-arrow{width:34px;height:34px;font-size:27px}.city-detail{padding:18px}.detail-title-row h2{font-size:23px}.airport-board{right:8%;width:126px;transform:scale(.9);transform-origin:top right}}
@media(max-width:430px){.city-map-shell{padding:6px;border-radius:15px}.city-map-viewport{min-height:430px}.city-poi{width:76px}.poi-name{max-width:78px;overflow:hidden;text-overflow:ellipsis}.city-art-credit{display:none}.city-tabs{margin-right:-16px;padding-right:16px}.city-tab{min-width:137px}.city-map-tip{left:12px;right:12px;transform:none;text-align:center}.airport-board{display:none}}
/* Product flows: a real practice room, profile controls, and responsive app states. */
.nav-auth{padding:10px 8px;font-size:12px}
.avatar-button{border:0;cursor:pointer}
.profile-backdrop{position:fixed;z-index:20;inset:0;display:grid;place-items:start end;padding:76px 28px 28px;background:rgba(44,37,25,.18)}
.profile-dialog{width:min(100%,380px);padding:22px;background:#fffdf7;border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 0 rgba(76,57,13,.2);animation:profile-in .2s ease-out}
.profile-dialog-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.profile-dialog h2{margin:5px 0 0;font:600 28px Fredoka}.profile-close{width:32px;height:32px;border-radius:50%;background:#fff1c9;color:#806000;font-size:23px;line-height:1}
.profile-summary{display:flex;align-items:center;gap:12px;margin:20px 0;padding:13px;border:1px solid var(--line);border-radius:12px;background:#fff}.profile-avatar{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:var(--yellow);font-size:23px}.profile-summary strong{font:500 15px Fredoka}.profile-summary p{margin:4px 0 0;color:var(--muted);font-size:11px}
.profile-settings{display:grid;gap:9px}.profile-settings label{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--line);border-radius:11px;background:#fff}.profile-settings strong,.profile-settings small{display:block}.profile-settings strong{font:500 13px Fredoka}.profile-settings small{margin-top:3px;color:var(--muted);font-size:10px;line-height:1.35}.profile-settings input{width:18px;height:18px;accent-color:#f0b719;flex:0 0 auto}.profile-logout{width:100%;margin-top:16px;padding:11px;border:1px solid #e1b9aa;border-radius:10px;background:#fff5f1;color:#9b5041;font-size:12px;font-weight:700}
@keyframes session-character-bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-7px)}}
@keyframes profile-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:980px){.profile-backdrop{padding:72px 18px 18px}}
@media(max-width:680px){.main{padding-left:20px;padding-right:20px}.profile-backdrop{padding:68px 12px 12px}.profile-dialog{width:100%}}
@media(prefers-reduced-motion:reduce){.session-character,.profile-dialog{animation:none}.session-progress span{transition:none}}

/* Avatar library and city mastery language */
.profile-summary .profile-avatar,.profile-nav-avatar,.avatar-face{display:grid;place-items:center;background:#f8c637;border-radius:15px;font-size:24px}
.profile-summary .profile-avatar{width:48px;height:48px;flex:0 0 auto}.profile-nav-avatar{width:38px;height:38px;border-radius:12px;font-size:20px}.avatar-face{width:58px;height:58px;border-radius:19px;font-size:31px}
.avatar-picker{margin:18px 0;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fffdf7}.avatar-picker>div:first-child{display:grid;gap:3px}.avatar-picker strong{font:500 14px Fredoka}.avatar-picker small{color:var(--muted);font-size:10px;line-height:1.35}.avatar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px;padding:2px}.avatar-option{display:grid;gap:4px;place-items:center;padding:8px 3px;border:1px solid #ede3c4;border-radius:12px;background:#fff;color:var(--ink)}.avatar-option small{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:58px}.avatar-option.is-selected{border-color:#d59f16;background:#fff0bc;box-shadow:0 0 0 2px #f8c63755}.passport-place-top{display:flex;align-items:center;justify-content:space-between}.city-stars{display:inline-flex;gap:2px;color:#d7ded0;font-size:19px;letter-spacing:0}.city-stars .is-on{color:#f3b820;text-shadow:0 1px 0 #b47d0a}.rank-label{font:600 12px Fredoka;color:#5b7b4d}.rank-hint{min-height:31px}.free-call-card{display:grid;grid-template-columns:220px 1fr;gap:26px;align-items:center;margin-top:28px;padding:24px;border:1px solid #cbdcc7;border-radius:24px;background:linear-gradient(120deg,#dfead4,#fffef7);box-shadow:0 7px 0 #d1dec9}.free-call-card h2{font:500 27px Fredoka;margin:8px 0}.free-call-card p{color:var(--muted);max-width:600px;line-height:1.5}.free-call-art{min-height:155px;position:relative;display:grid;place-items:center;border-radius:19px;background:linear-gradient(145deg,#294a40,#5b8064);overflow:hidden}.free-call-art:before{content:'CHAMADA AO VIVO';position:absolute;top:13px;left:14px;color:#edf7e8;font:700 9px Fredoka;letter-spacing:1px}.free-call-video-dot{position:absolute;top:14px;right:14px;width:8px;height:8px;border-radius:50%;background:#ff7c62;box-shadow:0 0 0 5px #ff7c6233}.free-call-avatar{width:76px;height:76px;display:grid;place-items:center;border-radius:26px;background:#f8c637;font-size:42px;box-shadow:0 8px 0 #223b302e;animation:avatar-float 3s ease-in-out infinite}.free-call-wave{position:absolute;bottom:13px;color:#e9f3dd;font-size:29px;letter-spacing:8px;animation:wave-pulse 1s ease-in-out infinite}.speaking-avatar{animation:avatar-breathe 2.3s ease-in-out infinite}.voice-experience[data-voice-phase=listening] .speaking-avatar{animation:avatar-listen 1s ease-in-out infinite}.voice-experience[data-voice-phase=speaking] .speaking-avatar{animation:avatar-talk .2s ease-in-out infinite alternate}.self-preview-label{font:500 12px Fredoka;color:#edf7e8}.self-preview{gap:3px}.self-preview small{background:none!important;padding:0!important;margin-top:4px}.profile-nav-trigger .profile-nav-avatar{flex:0 0 auto}
@keyframes avatar-talk{from{transform:translateY(0) scaleY(.94)}to{transform:translateY(-2px) scaleY(1.08)}}@keyframes avatar-listen{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg) translateY(-2px)}}@keyframes avatar-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes avatar-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}@keyframes wave-pulse{50%{letter-spacing:11px;opacity:.65}}
@media(max-width:600px){.avatar-grid{grid-template-columns:repeat(4,1fr)}.free-call-card{grid-template-columns:1fr}.free-call-art{min-height:125px}.free-call-card h2{font-size:23px}}

/* Oito retratos com silhuetas, acessórios e paletas próprias. */
.avatar-illustration{width:100%;height:100%;display:block;overflow:visible}.avatar-illustration [class]{vector-effect:non-scaling-stroke;stroke-linejoin:round}.avatar-illustration>g{filter:drop-shadow(0 2px 1.4px #17312a3d)}.avatar-backdrop{fill:#f6d264}.avatar-orbit{fill:#fff7d6;opacity:.62}.avatar-portrait-light{fill:#fff;opacity:.13;pointer-events:none}.avatar-specular{fill:#fff;opacity:.24}.avatar-body{fill:#334f4c;stroke:#263d36;stroke-width:1.35}.avatar-head{fill:#e8ad83;stroke:#303b3b;stroke-width:2}.avatar-eye{fill:#303b3b}.avatar-eye-glint{fill:#fff8e9;opacity:.9}.avatar-brows,.avatar-nose{fill:none;stroke:#303b3b;stroke-width:1.35;stroke-linecap:round}.avatar-nose{stroke-width:1.15;opacity:.58}.avatar-mouth{fill:#713b3d;stroke:#303b3b;stroke-width:1.5;stroke-linecap:round;transform-box:fill-box;transform-origin:center}.avatar-cheek{fill:none;stroke:#d98f78;stroke-width:2;stroke-linecap:round;opacity:.65}.avatar-face,.profile-avatar,.profile-nav-avatar,.avatar-option-face{padding:4px;background:linear-gradient(145deg,#fff8de,#e6c04f);box-shadow:inset 0 1px 0 #fff9,0 2px 5px #26403421}.avatar-face{display:grid}.avatar-option-face{display:block;width:46px;height:46px;border-radius:14px}.profile-summary .profile-avatar{padding:3px}.profile-nav-avatar{padding:2px}.avatar-option-face .avatar-illustration{width:100%;height:100%}.self-avatar{padding:3px}.self-avatar[data-speaking=true] .avatar-mouth{animation:avatar-mouth-talk .16s ease-in-out infinite alternate}.voice-experience[data-voice-phase=listening] .self-avatar[data-speaking=true]{box-shadow:0 0 0 5px #9fca7a55}.avatar-option:focus-visible{outline:3px solid #936e00;outline-offset:2px}
.profile-avatar[data-avatar=batata],.profile-nav-avatar[data-avatar=batata],.avatar-face[data-avatar=batata],.avatar-option-face[data-avatar=batata]{background:#f6d264}.profile-avatar[data-avatar=frita],.profile-nav-avatar[data-avatar=frita],.avatar-face[data-avatar=frita],.avatar-option-face[data-avatar=frita]{background:#f5b5a7}.profile-avatar[data-avatar=chips],.profile-nav-avatar[data-avatar=chips],.avatar-face[data-avatar=chips],.avatar-option-face[data-avatar=chips]{background:#a8d7e7}.profile-avatar[data-avatar=faca],.profile-nav-avatar[data-avatar=faca],.avatar-face[data-avatar=faca],.avatar-option-face[data-avatar=faca]{background:#d9c0e9}.profile-avatar[data-avatar=garfo],.profile-nav-avatar[data-avatar=garfo],.avatar-face[data-avatar=garfo],.avatar-option-face[data-avatar=garfo]{background:#a8d8c5}.profile-avatar[data-avatar=colher],.profile-nav-avatar[data-avatar=colher],.avatar-face[data-avatar=colher],.avatar-option-face[data-avatar=colher]{background:#d8b9ee}.profile-avatar[data-avatar=estudante],.profile-nav-avatar[data-avatar=estudante],.avatar-face[data-avatar=estudante],.avatar-option-face[data-avatar=estudante]{background:#f2d579}.profile-avatar[data-avatar=chef],.profile-nav-avatar[data-avatar=chef],.avatar-face[data-avatar=chef],.avatar-option-face[data-avatar=chef]{background:#b6d0dc}
.avatar-potato{fill:#d9a24a;stroke:#6c4b2f;stroke-width:2}.avatar-sprout{fill:#5d8d55;stroke:#3f633e;stroke-width:1.5}.avatar-illustration--batata .avatar-body{fill:#d7634e}.avatar-illustration--frita .avatar-head{fill:#6d4433}.avatar-illustration--chips .avatar-head{fill:#f0b798}.avatar-illustration--faca .avatar-face-window{fill:#c78664}.avatar-illustration--garfo .avatar-head{fill:#8c563b}.avatar-illustration--colher .avatar-head{fill:#f0c39e}.avatar-illustration--estudante .avatar-head{fill:#6d4537}.avatar-illustration--chef .avatar-head{fill:#d59f82}.avatar-illustration--batata .avatar-backdrop{fill:#f2c95d}.avatar-illustration--frita .avatar-backdrop{fill:#efab9f}.avatar-illustration--chips .avatar-backdrop{fill:#8fcce1}.avatar-illustration--faca .avatar-backdrop{fill:#c9afe3}.avatar-illustration--garfo .avatar-backdrop{fill:#91cbb7}.avatar-illustration--colher .avatar-backdrop{fill:#cba9e5}.avatar-illustration--estudante .avatar-backdrop{fill:#e8c75e}.avatar-illustration--chef .avatar-backdrop{fill:#a8c5d2}
.avatar-shirt-coral{fill:#d9685e}.avatar-shirt-blue{fill:#3d759d}.avatar-shirt-plum{fill:#705083}.avatar-shirt-green{fill:#4b8875}.avatar-shirt-lilac{fill:#8062a4}.avatar-shirt-mustard{fill:#d29b37}.avatar-shirt-slate{fill:#466273}.avatar-afro{fill:#332720;stroke:#303b3b;stroke-width:2}.avatar-curls{fill:#b54e3e;stroke:#303b3b;stroke-width:2}.avatar-swoop{fill:#252d47;stroke:#303b3b;stroke-width:2}.avatar-punk{fill:#48345b;stroke:#303b3b;stroke-width:2}.avatar-streak{fill:#f07e95;stroke:#303b3b;stroke-width:1.5}.avatar-cap-hair{fill:#443631;stroke:#303b3b;stroke-width:2}.avatar-cap{fill:#e57245;stroke:#303b3b;stroke-width:2;stroke-linejoin:round}.avatar-silver{fill:#e8ece3;stroke:#303b3b;stroke-width:2}.avatar-bangs{fill:none;stroke:#8b9695;stroke-width:2;stroke-linecap:round}.avatar-hijab{fill:#4d7992;stroke:#303b3b;stroke-width:2}.avatar-hijab-line{fill:none;stroke:#d2e0e2;stroke-width:1.5;stroke-linecap:round}.avatar-freckles{fill:none;stroke:#a76450;stroke-width:2;stroke-linecap:round;stroke-dasharray:1 3}.avatar-hood{fill:none;stroke:#d6edf2;stroke-width:2;stroke-linecap:round}.avatar-glasses{fill:#dfeff0;fill-opacity:.28;stroke:#303b3b;stroke-width:2;stroke-linejoin:round}.avatar-earring{fill:#f3c84b;stroke:#303b3b;stroke-width:1.3}.avatar-necklace{fill:none;stroke:#f7d66b;stroke-width:2;stroke-linecap:round}.avatar-collar{fill:none;stroke:#e2f0e6;stroke-width:2;stroke-linecap:round}.avatar-headphones{fill:#4a6372;stroke:#303b3b;stroke-width:2;stroke-linejoin:round}.avatar-hearing-aid{fill:#7eb3c1;stroke:#303b3b;stroke-width:1.5}.avatar-scarf{fill:#d76f61;stroke:#303b3b;stroke-width:1.5;stroke-linejoin:round}
@keyframes avatar-mouth-talk{from{transform:scaleY(.7) scaleX(.92)}to{transform:scaleY(1.9) scaleX(1.12)}}

/* Avatar modular: a arte é a mesma em todos os tamanhos e as peças continuam
   legíveis sem depender de filtros ou imagens externas. */
.avatar-illustration--modular{filter:drop-shadow(0 2px 2px #18372c32)}
.avatar-illustration--modular .av-glasses{fill:#e7f4f2;fill-opacity:.2;stroke:#263736;stroke-width:1.8}
.avatar-illustration--modular .av-hearing{fill:none;stroke:#4c8994;stroke-width:2.5;stroke-linecap:round}
.avatar-illustration--modular .av-jewel{fill:#f3c44e;stroke:#624d28;stroke-width:1}
.avatar-illustration--modular .av-headphones{fill:none;stroke:#334f61;stroke-width:4;stroke-linejoin:round}
.avatar-frame--explorador,.avatar-frame--viajante,.avatar-frame--morador,.avatar-frame--guia,.avatar-frame--embaixador,.avatar-frame--lenda{box-shadow:0 0 0 3px var(--frame,#5c9275),0 4px 12px #173c2c30!important}
.avatar-frame--viajante{--frame:#527eac}.avatar-frame--morador{--frame:#b06b4f}.avatar-frame--guia{--frame:#c2982d}.avatar-frame--embaixador{--frame:#9568b0}.avatar-frame--lenda{--frame:#f0b93f}

.xp-reward{margin:18px 0;padding:18px;border:1px solid #d8bf75;border-radius:20px;background:linear-gradient(145deg,#fff9df,#fff);box-shadow:0 6px 0 #ead89a;color:#294337}
.xp-reward__top{display:flex;align-items:center;gap:12px}.xp-reward__top>span{font-size:30px}.xp-reward__top>div{display:grid}.xp-reward__top small{font:700 10px Fredoka;letter-spacing:1.2px;color:#856b24}.xp-reward__top strong{font:600 26px Fredoka;color:#234a38}.xp-reward__top>b{margin-left:auto;padding:7px 10px;border-radius:999px;background:#f0b93f;color:#5e4600;font-size:12px}
.xp-reward ul{display:grid;gap:6px;margin:14px 0;padding:0;list-style:none}.xp-reward li{display:flex;justify-content:space-between;font-size:13px}.xp-reward li b{color:#4e7b3d}.xp-reward__bar{height:9px;overflow:hidden;border-radius:99px;background:#e7dfc9}.xp-reward__bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#69a05a,#f0b93f);transition:width .7s cubic-bezier(.2,.8,.2,1)}.xp-reward>small{display:block;margin-top:7px;color:#746b56}.xp-reward.is-promoted{border-color:#f0b93f;background:radial-gradient(circle at 95% 0,#ffe47b55,transparent 38%),#fff9df}.xp-reward--pending strong{font-size:15px;color:#746b56}
@media(max-width:560px){.xp-reward__top>b{font-size:10px}.xp-reward{padding:15px}}

.avatar-official{background:var(--portrait-bg)!important}.avatar-official .avatar-illustration{object-fit:contain}


/* CITY / VOICE — a small world, a little more courage. */
body[data-tab=city] .main,body[data-screen=session] .main{max-width:1450px}.city-world{max-width:none}.city-world .city-page-head{margin:0 0 32px;align-items:center}.city-world .city-page-head h1{font:500 clamp(38px,4vw,58px)/1.04 Fredoka!important;letter-spacing:-1.6px!important;margin:17px 0}.city-page-head h1 em{font-style:normal;color:#74875a}.city-world .city-page-head p{font-size:14px;line-height:1.75}.destination-number{position:absolute;top:14px;right:12px;font-size:8px;color:#96a085}.destination-emoji{display:block;font-size:26px;margin-bottom:14px}.city-world .city-layout{grid-template-columns:minmax(0,1.7fr) minmax(270px,.8fr);gap:23px}.city-world .city-map-shell{padding:10px;border-radius:22px!important;box-shadow:none!important}.city-world .city-map-toolbar{height:36px;font:500 10px 'DM Sans',sans-serif;color:#7c866e}.city-world .city-map-toolbar small{font-size:9px}.city-world .city-map-viewport{border-radius:15px;height:440px;min-height:0}.city-world .city-art{height:100%;min-height:0}.city-world .city-art-credit{display:none}.city-world .city-detail{position:sticky;top:30px;padding:26px!important;scroll-margin-top:100px;border-radius:22px!important;background:#fffef8!important;box-shadow:none!important}.city-world .detail-kicker{font:700 9px 'DM Sans',sans-serif;letter-spacing:1.4px;color:#7e8b6b}.destination-symbol{position:relative;display:grid;place-items:center;width:94px;height:94px;border-radius:29px;background:color-mix(in srgb,var(--destination-color),white 80%);margin:25px 0;font-size:43px;transform:rotate(-5deg)}.destination-symbol>span{position:absolute;right:-12px;top:-7px;font-size:32px;color:#b7a36a}.city-world .detail-title-row{display:block;margin:0}.city-world .detail-title-row h2{font-size:32px!important;margin:0 0 8px}.city-world .detail-title-row p{font-size:12px;color:#778368;line-height:1.5;margin:0}.city-world .detail-meta{display:flex;flex-wrap:wrap;gap:6px;margin:19px 0}.city-world .detail-meta span{font:500 10px 'DM Sans',sans-serif;padding:6px 9px;color:#6e7d5b;background:#f0f3e6;border-radius:6px}.destination-desc{font-size:13px;color:#67745b;line-height:1.8;margin:20px 0}.destination-learn{padding:17px 0;border-top:1px solid #e5e8dc;border-bottom:1px solid #e5e8dc;margin-bottom:22px}.destination-learn>span{font-size:8px;letter-spacing:1.1px;color:#859274;font-weight:700}.destination-learn p{font-size:12px;line-height:1.5;color:#5d704c;margin:9px 0 0}.city-world .city-start-button{background:#f3cd53!important;color:#39402b!important;box-shadow:0 3px 0 #c4a343!important;border:1px solid #c6a747!important;text-transform:none;width:100%;display:flex;justify-content:space-between;align-items:center;padding:14px 17px}.destination-note{font-size:9px;color:#8a947e;line-height:1.6;display:block;margin-top:14px;text-align:center}.city-poi{transition:filter .25s}.city-poi:hover{filter:drop-shadow(0 6px 8px #273b2322)}
/* Voice rooms: no transcript, no message composer, no chat layout. */
.voice-experience{--voice-level:0;animation:enter .4s ease-out}.voice-header{display:flex;align-items:center;gap:25px;margin-bottom:27px}.voice-back{background:#eef2e4;border:1px solid #dce4cc;border-radius:10px;padding:11px 14px;font-size:11px;color:#6b7e51;white-space:nowrap}.voice-header>div{margin-right:auto}.voice-header .eyebrow{font-size:8px}.voice-header h1{font:500 38px/1.1 Fredoka;letter-spacing:-1px;margin:9px 0 0}.voice-time{font:500 14px 'DM Sans',sans-serif;font-variant-numeric:tabular-nums;color:#7b8b67;border:1px solid #dee5d2;border-radius:9px;padding:10px 13px}.voice-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(285px,.85fr);gap:26px;align-items:start}.voice-stage{position:relative;border:1px solid #dce3d0;border-radius:25px;padding:11px;background:#fffef8;overflow:hidden}.voice-stage-top{display:flex;align-items:center;justify-content:space-between;gap:10px;height:40px;padding:0 9px 10px;font-size:10px;color:#6c7c57}.voice-stage-top button{height:31px;width:35px;border:1px solid #dce3ce;background:#f4f7ec;border-radius:7px;color:#728659;display:grid;place-items:center}.voice-stage-top button[aria-pressed=false]{background:white;color:#a8b19a}.voice-room{--room-wall:#e6cf9f;--room-trim:#98784e;--room-cloth:#829862;height:475px;position:relative;isolation:isolate;overflow:hidden;border-radius:17px;background:var(--room-wall)}.room-wall{position:absolute;inset:0;background:linear-gradient(90deg,#ffffff08,#ffffff30 48%,#00000005)}.room-wall:after{content:'';position:absolute;inset:65% 0 0;border-top:5px solid var(--room-trim);background:linear-gradient(#ffffff12,#00000008),var(--room-trim);opacity:.3}.room-window{position:absolute;top:42px;left:22%;height:244px;width:56%;border:10px solid #fff4d5;border-radius:120px 120px 5px 5px;overflow:hidden;box-shadow:0 0 0 2px #8a764a35}.room-window .session-city-art{inset:0!important;border-radius:0!important;min-height:0!important;pointer-events:none;opacity:.85}.room-window:after{content:'';position:absolute;top:0;bottom:0;left:50%;width:7px;background:#fff4d5;box-shadow:0 0 0 1px #b0a68215}.room-lamp{position:absolute;width:63px;height:115px;top:0;right:45px;z-index:2}.room-lamp:before{content:'';position:absolute;left:31px;top:0;width:2px;height:63px;background:var(--room-trim)}.room-lamp:after{content:'';position:absolute;left:0;bottom:14px;width:63px;height:39px;border-radius:40px 40px 5px 5px;background:var(--room-cloth);box-shadow:0 10px 30px #fff2a84d}.room-shelf{position:absolute;left:22px;top:207px;width:95px;height:12px;background:var(--room-trim);border-radius:2px;z-index:3;box-shadow:0 45px 0 var(--room-trim)}.room-shelf i{position:absolute;bottom:12px;left:9px;width:15px;height:30px;border-radius:3px 3px 1px 1px;background:#a5b079;border:1px solid #665d3438}.room-shelf i:nth-child(2){left:29px;height:36px;background:#d5ad6e}.room-shelf i:nth-child(3){left:49px;background:#f9e6bf}.room-shelf i:nth-child(4){left:69px;height:26px;background:#a49b91}.room-sign{position:absolute;top:106px;left:20px;padding:12px 16px;background:#fff7e3;border:1px solid #c4ac763b;border-radius:7px;transform:rotate(-6deg);z-index:4;max-width:56%;box-shadow:0 4px 0 #695e2610}.room-sign span{display:block;font:500 25px/1.1 Fredoka;color:var(--room-trim);text-align:center}.room-sign small{display:block;font-size:6px;letter-spacing:2px;text-transform:uppercase;color:#887856;text-align:center;margin-top:6px}.room-table{position:absolute;bottom:72px;left:0;right:0;height:40px;border-top:7px solid var(--room-trim);background:#d2b482;z-index:6;box-shadow:0 8px 0 #886c441a}.room-object{position:absolute;bottom:109px;right:44px;font-size:41px;z-index:5;transform:rotate(7deg)}.room-plant{position:absolute;bottom:114px;right:22px;width:35px;height:42px;background:#ba8d6c;border:2px solid #8d7050;border-radius:0 0 10px 10px;z-index:3}.room-plant i{position:absolute;width:22px;height:50px;left:10px;top:-49px;border-radius:90% 0;background:#7b9662;transform:rotate(15deg);transform-origin:bottom;animation:plantBreeze 7s ease-in-out infinite}.room-plant i:nth-child(2){transform:rotate(-40deg);height:40px;top:-38px}.room-plant i:nth-child(3){transform:rotate(50deg);height:35px;top:-34px}.room-tato{position:absolute;left:calc(50% - 100px);bottom:103px;width:200px;height:224px;z-index:5;animation:voiceTato 5s ease-in-out infinite}.room-tato-body{position:absolute;inset:25px 0 0;border:3px solid #937044;border-radius:47% 48% 41% 44%;background:#ddb16a;box-shadow:inset -15px -10px 0 #c8974f}.room-tato-leaf{position:absolute;top:0;right:54px;width:52px;height:37px;border:3px solid #6b814e;background:#a0b76e;border-radius:90% 0;transform:rotate(-10deg);z-index:2}.room-eye{position:absolute;width:11px;height:18px;background:#494633;top:64px;border-radius:50%;animation:blink 8s infinite}.room-eye.left{left:52px}.room-eye.right{right:51px}.room-cheek{position:absolute;top:88px;left:32px;width:28px;height:12px;border-radius:50%;background:#cf986f;box-shadow:100px 0 0 #cf986f}.room-mouth{position:absolute;top:91px;left:85px;width:25px;height:16px;border-bottom:4px solid #494633;border-radius:0 0 50% 50%}.room-outfit{position:absolute;bottom:0;left:18px;right:18px;height:62px;background:var(--room-cloth);border:2px solid #586444;border-radius:18px 18px 36px 36px}.room-outfit:before,.room-outfit:after{content:'';position:absolute;width:11px;height:20px;top:-20px;background:var(--room-cloth);border:2px solid #586444;border-bottom:0;left:20px}.room-outfit:after{left:auto;right:20px}.room-outfit span{display:block;font-size:18px;text-align:center;margin-top:11px;opacity:.85}.room-grain{position:absolute;inset:0;pointer-events:none;z-index:8;background-image:radial-gradient(#6c533511 .5px,transparent .5px);background-size:4px 4px;opacity:.4}.room-airport{--room-wall:#cbdfe5;--room-trim:#5f8493;--room-cloth:#6d91a1}.room-airport .room-window{border-radius:12px;width:70%;left:15%}.room-airport .room-shelf{background:#4c7486;box-shadow:0 25px 0 #4c7486,0 50px 0 #4c7486}.room-airport .room-shelf i{height:10px;width:24px;background:#f9e4a0}.room-office,.room-bank{--room-wall:#d6ddc6;--room-trim:#748165;--room-cloth:#879a70}.room-office .room-window,.room-bank .room-window{border-radius:10px}.room-office .room-sign,.room-bank .room-sign{transform:rotate(-2deg);background:#f2f5e8}.room-office .room-outfit:before,.room-office .room-outfit:after,.room-bank .room-outfit:before,.room-bank .room-outfit:after{display:none}.room-hotel{--room-wall:#d9c5d5;--room-trim:#8c6b86;--room-cloth:#8b6d85}.room-hotel .room-sign{border:2px solid #ddc69c;border-radius:45px 45px 6px 6px;padding:20px 14px;background:#fff1d3}.room-hotel .room-lamp:after{background:#e1c18a}.room-beach,.room-park{--room-wall:#cbe1d1;--room-trim:#91ac8b;--room-cloth:#e1c470}.room-beach .room-window,.room-park .room-window{inset:0;width:100%;height:100%;border:0;border-radius:0}.room-beach .room-window:after,.room-park .room-window:after,.room-beach .room-lamp,.room-park .room-lamp,.room-beach .room-shelf,.room-park .room-shelf{display:none}.room-beach .room-table,.room-park .room-table{background:#d6c699}.room-music,.room-cinema,.room-street{--room-wall:#434357;--room-trim:#6b718c;--room-cloth:#887198}.room-music .room-lamp:after,.room-cinema .room-lamp:after,.room-street .room-lamp:after{background:#c8a0ca}.room-music .room-window,.room-cinema .room-window,.room-street .room-window{border-color:#8e8da7}.room-music .room-window:after,.room-cinema .room-window:after,.room-street .room-window:after{background:#8e8da7}.room-library{--room-wall:#d9cbb1;--room-trim:#958361;--room-cloth:#839a76}.room-library .room-shelf{width:125px;box-shadow:0 50px 0 var(--room-trim),0 100px 0 var(--room-trim)}.room-classroom{--room-wall:#d9e3c9;--room-trim:#729263}.room-classroom .room-sign{background:#4f7955;border:5px solid #bf9a68;transform:none}.room-classroom .room-sign span,.room-classroom .room-sign small{color:#f7f2df}.room-market{--room-wall:#e0dbb5;--room-trim:#9a9662;--room-cloth:#a4a568}.room-gym{--room-wall:#d2d3e0;--room-trim:#8a889e;--room-cloth:#8d86a8}.voice-person{display:flex;align-items:center;justify-content:center;gap:9px;padding:17px 0 10px;color:#7d8b6c;font-size:11px}.voice-person strong{font:500 19px Fredoka;color:#4c613d}.person-dot{width:7px;height:7px;border-radius:50%;background:#aab794}.voice-caption{padding:15px 20px;background:#f1f5e8;border:1px solid #e0e8d3;border-radius:12px;color:#556b43;text-align:center;font-size:15px;line-height:1.6;margin:4px 5px 5px;min-height:57px}.voice-companion{padding:21px 0 0}.voice-progress-label{display:flex;justify-content:space-between;gap:15px;font-size:8px;font-weight:700;letter-spacing:1.3px;color:#859275}.voice-progress-label b{font-size:10px;letter-spacing:1px}.voice-steps{display:flex;gap:5px;margin:11px 0 24px}.voice-steps i{height:4px;background:#e0e7d5;flex:1;border-radius:3px}.voice-steps i.is-current{background:#b5c591}.voice-steps i.is-done{background:#728b53}.voice-companion h2{font:500 35px/1.08 Fredoka;letter-spacing:-.7px;margin:0 0 15px}.voice-companion>p{font-size:13px;line-height:1.8;color:#7e8a70;margin:0}.voice-skills{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px}.voice-skills span{font-size:9px;border:1px solid #dee5d3;border-radius:6px;padding:5px 8px;color:#84926f}.voice-orb-wrap{display:flex;align-items:center;flex-direction:column;margin:25px 0 12px}.voice-orb{height:85px;width:85px;border-radius:50%;display:grid;place-items:center;background:#e7eed9;color:#82976a;border:1px solid #d6e1c6;box-shadow:0 0 0 calc(7px + var(--voice-level)*14px) #dfe8cd4d,0 0 0 calc(16px + var(--voice-level)*24px) #e8eedc4d;transition:box-shadow .12s}.voice-meter{display:flex;align-items:center;justify-content:center;gap:3px;height:36px;margin-top:21px}.voice-meter i{width:3px;height:calc(3px + var(--voice-level)*var(--bar));background:#8aa16b;border-radius:3px;transition:height .09s}.voice-companion h3{font:500 22px/1.2 Fredoka;text-align:center;margin:8px 0 10px}.voice-companion .voice-instruction{font-size:11px;text-align:center;min-height:40px;line-height:1.7}.voice-primary{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;border:1px solid #788d5c;background:#819760;color:#fffef3;border-radius:13px;box-shadow:0 4px 0 #617448;min-height:53px;font-size:12px;font-weight:700;margin-top:19px;padding:13px;transition:transform .2s,background .2s}.voice-primary:hover:enabled{transform:translateY(-2px);background:#728a51}.voice-primary:disabled{background:#e3e9d8;border-color:#d2dcc2;color:#869477;box-shadow:0 3px 0 #d5dfc7;cursor:default}.voice-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:18px 0 7px}.voice-tools button{background:none;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:60px;padding:10px 2px;color:#6c8254;border:1px solid transparent;border-radius:10px;transition:background .2s}.voice-tools button:hover:enabled{background:#edf3e2}.voice-tools button[aria-pressed=true]{background:#f4e7d7;color:#ab7852}.voice-tools span{font-size:9px}.voice-tools button:disabled{color:#b1baa5;cursor:default}.voice-finish-early{display:block;margin:0 auto;padding:11px;background:none;text-decoration:underline;text-underline-offset:4px;color:#89967b;font-size:10px}.voice-local-note{border-top:1px solid #e0e7d6;padding-top:17px;margin-top:14px;text-align:center}.voice-local-note span{font-size:7px;letter-spacing:1.3px;font-weight:700;color:#8d9a7e}.voice-local-note p{font-size:9px;line-height:1.7;color:#8d9a7e;margin:6px auto 0;max-width:255px}.voice-companion .voice-error{font-size:11px;padding:12px;border-radius:10px;background:#fff0da;color:#936535;line-height:1.6;margin-top:12px}.voice-experience[data-voice-phase=speaking] .room-mouth{height:15px;width:18px;border:0;border-radius:50%;background:#655339;animation:tatoSpeaking .5s infinite alternate}.voice-experience[data-voice-phase=speaking] .voice-orb{animation:orbBreath 2s ease-in-out infinite}.voice-experience[data-voice-phase=listening] .voice-orb{background:#e3edcf;color:#637e43}.voice-experience[data-voice-phase=listening]:not(.is-muted) .person-dot{background:#8eaa65}.voice-experience[data-voice-phase=paused] .voice-room{filter:saturate(.6)}.voice-summary{max-width:660px;margin:28px auto;text-align:center;background:#fffef8;border:1px solid #dce5cf;border-radius:28px;padding:48px 45px;animation:enter .5s}.summary-stamp{display:grid;place-items:center;width:90px;height:90px;border:2px dashed #9ab57a;border-radius:50%;background:#eef5df;color:#8aa366;transform:rotate(-12deg);margin:0 auto 29px}.voice-summary .eyebrow{font-size:9px}.voice-summary h1{font:500 47px/1.05 Fredoka;letter-spacing:-1px;margin:21px 0;color:#526b3e}.voice-summary>p{font-size:14px;color:#849271;line-height:1.8}.summary-stats{display:flex;justify-content:center;gap:42px;margin:29px 0}.summary-stats strong{display:block;font:500 40px Fredoka;color:#748c56}.summary-stats span{font-size:10px;color:#8b997a}.summary-stats>div+div{border-left:1px solid #dde6cf;padding-left:42px}.summary-skills{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;font-size:11px;color:#7c945c}.voice-summary .summary-note{font-size:12px;max-width:380px;margin:24px auto}.voice-summary>.text-link{display:flex;justify-content:center;font-size:11px;margin:12px auto}.voice-summary>small{font-size:9px;color:#a0ad90}.demo-voice-caption{padding:12px 5px;color:#647b4e;font-size:13px;min-height:51px;line-height:1.5}.demo-voice-caption .bubble-name{font-size:7px;display:block;margin-bottom:4px}
@keyframes voiceTato{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(1deg)}}@keyframes tatoSpeaking{to{transform:scaleY(.45)}}@keyframes orbBreath{50%{box-shadow:0 0 0 14px #dfe8cd55,0 0 0 25px #e8eedc55}}@keyframes plantBreeze{50%{rotate:4deg}}
@media(max-width:1150px){.city-world .city-layout{grid-template-columns:minmax(0,1.3fr) minmax(260px,.9fr);gap:17px}.city-world .city-map-viewport{height:390px}.voice-layout{grid-template-columns:minmax(0,1.2fr) minmax(270px,.85fr);gap:20px}.voice-room{height:460px}.room-tato{scale:.85;transform-origin:bottom center}.room-sign{max-width:67%;padding:10px 12px;left:12px}.room-sign span{font-size:21px}.room-shelf{left:12px;width:76px;scale:.8;transform-origin:left center}.room-lamp{right:20px}.room-object{right:18px;font-size:33px}.room-plant{right:10px;scale:.8;transform-origin:bottom right}.voice-header{gap:15px}.voice-header h1{font-size:32px}.voice-header .eyebrow{font-size:7px}.voice-companion h2{font-size:30px}.voice-companion>p{font-size:12px}.voice-companion h3{font-size:20px}}
@media(max-width:950px){.city-world .city-layout{grid-template-columns:1fr}.city-world .city-detail{position:relative;top:auto;display:grid;grid-template-columns:90px 1fr;gap:0 22px}.city-world .detail-kicker{grid-column:1/-1}.destination-symbol{grid-column:1;grid-row:2/4;width:77px;height:80px;font-size:36px;margin:20px 0}.city-world .detail-title-row{grid-column:2;margin-top:22px}.city-world .detail-meta{grid-column:2;margin:10px 0}.destination-desc,.destination-learn,.city-start-button,.destination-note{grid-column:1/-1}.destination-desc{margin:12px 0 18px}.voice-layout{grid-template-columns:1fr}.voice-room{height:420px}.voice-stage{max-width:650px;width:100%;margin:auto}.voice-companion{max-width:520px;width:100%;margin:auto;padding:12px 7px}.voice-companion h2{font-size:33px}.voice-orb-wrap{margin-top:25px}.voice-companion .voice-instruction{min-height:0}.voice-tools span{font-size:11px}.voice-primary{font-size:13px}.voice-local-note p{font-size:10px}.voice-header{flex-wrap:wrap}.voice-header>div{order:3;flex-basis:100%}.voice-time{margin-left:auto}.voice-header .eyebrow{font-size:8px}.voice-header h1{font-size:36px}.voice-stage .room-tato{scale:1}.voice-stage .room-sign{left:24px;font-size:24px}.voice-stage .room-shelf{left:23px;scale:1}.voice-stage .room-plant{right:23px;scale:1}.voice-stage .room-object{right:44px}.voice-summary{padding:40px 25px}}
@media(max-width:600px){.city-world .city-page-head{align-items:start;gap:15px;margin-bottom:21px}.city-world .city-page-head .eyebrow{font-size:7px;letter-spacing:1.1px;max-width:190px;line-height:1.7}.city-world .city-page-head h1{font-size:37px!important;margin:13px 0}.city-world .city-page-head p{font-size:12px;max-width:235px}.destination-emoji{font-size:24px;margin-bottom:12px}.city-world .city-map-toolbar{font-size:8px}.city-world .city-map-toolbar small{font-size:7px}.city-world .city-map-viewport{height:375px}.city-world .city-detail{padding:23px!important;gap:0 15px}.city-world .detail-title-row h2{font-size:28px!important}.city-world .detail-title-row p{font-size:11px}.city-world .detail-meta{gap:4px}.city-world .detail-meta span{font-size:9px;padding:5px 6px}.destination-desc{font-size:13px}.voice-header{margin-bottom:20px}.voice-back{font-size:11px}.voice-header h1{font-size:34px}.voice-header .eyebrow{font-size:7px}.voice-stage{padding:8px;border-radius:20px}.voice-stage-top{font-size:9px;padding:0 5px 8px}.voice-room{height:355px;border-radius:14px}.room-window{top:29px;height:200px;border-width:7px}.voice-stage .room-tato{scale:.74;bottom:65px;transform-origin:bottom center}.room-table{bottom:44px;height:29px;border-top-width:5px}.voice-stage .room-sign{left:10px;top:82px;max-width:70%;padding:9px 11px}.voice-stage .room-sign span{font-size:19px}.room-sign small{font-size:5px;letter-spacing:1.4px}.voice-stage .room-shelf{left:12px;top:182px;scale:.67;transform-origin:left center}.voice-stage .room-lamp{right:12px;scale:.7;transform-origin:top right}.voice-stage .room-object{right:18px;bottom:71px;font-size:29px}.voice-stage .room-plant{right:8px;bottom:73px;scale:.68;transform-origin:bottom right}.voice-person{font-size:9px;padding:13px 0 9px}.voice-person strong{font-size:17px}.voice-caption{font-size:13px;padding:12px;min-height:0;margin:0 0 3px}.voice-companion{padding:8px 5px}.voice-companion h2{font-size:32px}.voice-companion>p{font-size:13px}.voice-skills span{font-size:10px}.voice-companion h3{font-size:23px}.voice-companion .voice-instruction{font-size:12px}.voice-tools span{font-size:10px}.voice-local-note span{font-size:8px}.voice-finish-early{font-size:11px;padding:14px}.voice-primary{min-height:55px}.voice-summary{padding:35px 21px;margin:10px auto}.voice-summary h1{font-size:37px}.voice-summary>p{font-size:12px}.summary-stats{gap:28px}.summary-stats>div+div{padding-left:28px}.summary-stats strong{font-size:35px}}
@media(prefers-reduced-motion:reduce){.voice-room *,.voice-orb,.voice-experience,.voice-summary{animation:none!important}.voice-meter i,.voice-orb{transition:none}}

/* A single open city: the destination is the hero, arrows are the only switcher. */
.city-single .city-page-head{margin-bottom:34px}.city-single .city-hero-heading{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;align-items:center;gap:18px;margin-bottom:24px}.city-hero-heading>div{text-align:center}.city-hero-heading .eyebrow{font-size:9px}.city-hero-heading h2{font:500 clamp(36px,4.5vw,54px)/1 Fredoka;letter-spacing:-1.5px;margin:10px 0 6px;color:#29372c}.city-hero-heading h2 span{font-size:.7em;margin-left:8px}.city-hero-heading p{margin:0;color:#748169;font-size:12px}.city-title-arrow{width:52px;height:52px;border:1px solid #d0dbc1;border-radius:50%;background:#edf3e3;color:#617750;font-size:25px;display:grid;place-items:center;transition:transform .2s,background .2s,box-shadow .2s}.city-title-arrow:hover:enabled{transform:scale(1.08);background:#e0ebd0;box-shadow:0 3px 0 #bdcba9}.city-title-arrow:disabled{opacity:.3;cursor:default}.city-single .city-layout{grid-template-columns:minmax(0,1.7fr) minmax(280px,.8fr)}.city-single .city-map-viewport{height:520px}.city-single .city-detail{top:24px}
@media(max-width:950px){.city-single .city-map-viewport{height:470px}.city-single .city-detail{top:auto}.city-single .city-hero-heading{grid-template-columns:44px minmax(0,1fr) 44px;gap:10px}.city-title-arrow{width:44px;height:44px;font-size:21px}}
@media(max-width:600px){.city-single .city-page-head{margin-bottom:24px}.city-single .city-page-head h1{font-size:34px!important}.city-single .city-hero-heading{grid-template-columns:40px minmax(0,1fr) 40px;gap:7px;margin-bottom:18px}.city-hero-heading h2{font-size:32px}.city-hero-heading p{font-size:10px}.city-title-arrow{width:40px;height:40px;font-size:19px}.city-single .city-map-viewport{height:390px}}

/* Account entry: a real local profile flow for the standalone site. */
.account-card{max-width:520px}.account-card .form{gap:9px;margin:27px 0 20px}.field-label{font:600 11px 'DM Sans',sans-serif;color:#6f7d62;margin-top:6px}.signed-account{display:flex;align-items:center;gap:13px;padding:16px;border:1px solid #dce5d2;border-radius:13px;background:#f1f5e8;margin-bottom:8px}.signed-account strong,.signed-account small{display:block}.signed-account strong{font:500 18px Fredoka;color:#4d603e}.signed-account small{font-size:11px;color:#849174;margin-top:4px}.account-card .input{min-height:50px;border-color:#d8e0ce;background:#fffef9}.account-card .input:focus{border-color:#839b6a;box-shadow:0 0 0 4px #dfead144;outline:none}.account-card .fine{max-width:360px;margin:0 auto}.profile-dialog .profile-summary p{overflow-wrap:anywhere}.nav-auth{white-space:nowrap}
.auth-notice{margin:12px auto 0;padding:11px 14px;border:1px solid #cbdcb6;border-radius:11px;background:#eef5e5;color:#5d7749;font-size:12px;line-height:1.5}.verification-card .sub strong{color:#566c45;overflow-wrap:anywhere}.verification-input{text-align:center;font:600 24px/1 'DM Sans',sans-serif;letter-spacing:8px;padding-left:20px}.verification-input::placeholder{color:#bdc9b2;letter-spacing:8px}.verification-actions{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin:-6px 0 18px}.verification-actions .auth-switch{margin:0}.dev-code{margin:0 auto 17px;padding:10px 13px;border:1px dashed #d5bd6b;border-radius:10px;background:#fff8d9;color:#7d6827;font-size:11px}.dev-code strong{font:700 16px 'DM Sans',sans-serif;letter-spacing:3px}@media(max-width:600px){.verification-input{font-size:21px;letter-spacing:5px;padding-left:15px}.verification-input::placeholder{letter-spacing:5px}}
.profile-nav-trigger{display:flex;align-items:center;gap:10px;width:100%;margin-top:25px;padding:10px;border:1px solid #dbe4ce;border-radius:15px;background:#f8faef;color:#516541;text-align:left;transition:transform .2s,background .2s,border-color .2s}.profile-nav-trigger:hover{transform:translateY(-2px);background:#fffef8;border-color:#9db085}.profile-nav-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#f5cd54;font-size:18px;flex:none}.profile-nav-copy{min-width:0;display:grid;gap:2px}.profile-nav-copy small{font:700 8px 'DM Sans',sans-serif;letter-spacing:1.1px;color:#829071}.profile-nav-copy strong{font:500 14px Fredoka;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-nav-arrow{margin-left:auto;font-size:15px;color:#879976}.profile-nav-trigger:focus-visible{outline:3px solid #936e00;outline-offset:3px}@media(max-width:760px){.profile-nav-trigger{width:auto;margin:0 0 0 10px;padding:6px;border:0;background:transparent}.profile-nav-copy{display:none}.profile-nav-arrow{display:none}.profile-nav-avatar{width:35px;height:35px}}
/* Open city canvas: the map is the page, with controls layered into the scene. */
.city-open-canvas{width:100%;min-height:0}.city-open-stage{width:100%;height:calc(100svh - 108px);min-height:640px;max-height:900px}.city-open-map{height:100%;min-height:0!important;padding:0!important;border-radius:30px!important;border:1px solid #cfdac1!important;box-shadow:0 18px 0 #dfe8d4,0 24px 70px #2f442018!important;background:#dce8d1}.city-open-map>.city-art{z-index:1}.city-open-map .city-art-credit{display:none}.city-open-title{position:absolute;z-index:35;top:22px;left:50%;width:min(590px,calc(100% - 150px));transform:translateX(-50%);display:grid;grid-template-columns:52px minmax(0,1fr) 52px;align-items:center;gap:14px;pointer-events:none}.city-open-title>div{padding:11px 18px 13px;text-align:center;background:#fbfcf4d9;border:1px solid #d6e1c9;border-radius:22px;box-shadow:0 7px 0 #b7c9a044;backdrop-filter:blur(8px);pointer-events:none}.city-open-title .eyebrow{font-size:8px;letter-spacing:1.5px;color:#76896b}.city-open-title h1{font:500 clamp(31px,4vw,50px)/1 Fredoka;letter-spacing:-1.5px;color:#30422f;margin:6px 0 3px}.city-open-title h1 span{font-size:.7em;margin-left:6px}.city-open-title p{margin:0;color:#6f8069;font-size:11px}.city-open-title .city-title-arrow{pointer-events:auto}.city-open-instruction{position:absolute;z-index:34;top:24px;left:25px;display:grid;gap:5px;padding:11px 13px;border:1px solid #d5e1c8;border-radius:13px;background:#f7faefd9;color:#5f7655;backdrop-filter:blur(8px);pointer-events:none}.city-open-instruction span{font:700 8px 'DM Sans',sans-serif;letter-spacing:1.1px}.city-open-instruction small{font-size:9px;color:#81917a}.city-open-hint{position:absolute;z-index:34;left:50%;bottom:18px;transform:translateX(-50%);padding:9px 14px;border:1px solid #d4dfc8;border-radius:999px;background:#f8fbf0df;color:#687e5d;font-size:10px;white-space:nowrap;backdrop-filter:blur(8px);pointer-events:none}.city-open-map .city-poi-layer{z-index:25}.city-open-map .city-poi{z-index:26}.city-open-map .city-poi.is-selected{z-index:29}.city-world .city-detail-overlay{position:absolute!important;z-index:60;right:22px;bottom:22px;top:auto;width:min(370px,calc(100% - 44px));max-height:calc(100% - 165px);overflow:auto;display:block!important;padding:24px!important;border:1px solid #d1dfc4!important;border-radius:24px!important;background:#fffef8f5!important;box-shadow:0 16px 0 #b6c99a55,0 24px 55px #23361f2e!important;animation:city-detail-in .28s cubic-bezier(.22,1,.36,1)}.city-detail-close{position:absolute;right:14px;top:14px;width:34px;height:34px;border:1px solid #d7e1cc;border-radius:50%;background:#f0f5e7;color:#6c815a;font-size:23px;line-height:1;transition:transform .2s,background .2s}.city-detail-close:hover{transform:rotate(8deg) scale(1.05);background:#e1ecd4}.city-detail-overlay .detail-kicker{padding-right:34px}.city-detail-overlay .destination-symbol{margin:20px 0 15px}.city-detail-overlay .destination-desc{margin:16px 0}.city-detail-overlay .destination-learn{margin-bottom:18px}@keyframes city-detail-in{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:950px){.city-open-stage{height:calc(100svh - 155px);min-height:620px}.city-open-title{width:min(560px,calc(100% - 90px));grid-template-columns:44px minmax(0,1fr) 44px;gap:10px}.city-open-title>div{padding:10px 14px 12px}.city-open-title h1{font-size:38px}.city-open-instruction{top:18px;left:18px}.city-open-instruction small{display:none}.city-open-hint{bottom:14px}.city-world .city-detail-overlay{right:16px;bottom:16px;width:min(390px,calc(100% - 32px));max-height:calc(100% - 150px)}}
@media(max-width:600px){.city-open-stage{height:calc(100svh - 118px);min-height:570px}.city-open-map{border-radius:22px!important;box-shadow:0 10px 0 #dfe8d4,0 15px 36px #2f442016!important}.city-open-title{top:13px;width:calc(100% - 22px);grid-template-columns:38px minmax(0,1fr) 38px;gap:6px}.city-open-title>div{padding:8px 8px 10px;border-radius:17px}.city-open-title .eyebrow{font-size:6px;letter-spacing:1px}.city-open-title h1{font-size:28px;letter-spacing:-.8px;margin:5px 0 2px}.city-open-title p{font-size:9px}.city-title-arrow{width:38px;height:38px;font-size:18px}.city-open-instruction{top:75px;left:13px;padding:7px 9px;border-radius:10px}.city-open-instruction span{font-size:6px}.city-open-hint{left:13px;right:13px;bottom:11px;transform:none;text-align:center;font-size:9px;white-space:normal}.city-world .city-detail-overlay{left:10px;right:10px;bottom:10px;width:auto;max-height:72%;padding:19px!important;border-radius:19px!important}.city-detail-close{right:10px;top:10px;width:30px;height:30px;font-size:20px}.city-detail-overlay .destination-symbol{width:65px;height:65px;font-size:30px;margin:13px 0 10px}.city-detail-overlay .destination-symbol>span{font-size:23px}.city-detail-overlay .detail-title-row h2{font-size:25px!important}.city-detail-overlay .detail-title-row p{font-size:10px}.city-detail-overlay .detail-meta{margin:12px 0}.city-detail-overlay .destination-desc{font-size:11px;margin:10px 0}.city-detail-overlay .destination-learn{padding:11px 0;margin-bottom:13px}.city-detail-overlay .destination-learn p{font-size:10px}.city-detail-overlay .city-start-button{padding:12px 14px}.city-detail-overlay .destination-note{font-size:8px}}
@media(prefers-reduced-motion:reduce){.city-detail-overlay{animation:none!important}.city-open-title .city-title-arrow{transition:none}}
.city-single .city-open-map{height:100%!important}
/* Immersive city pass: light, depth and a living atmosphere for every map. */
.city-open-map{isolation:isolate}.city-open-map::after{content:'';position:absolute;inset:0;z-index:31;border:1px solid rgba(255,255,255,.42);border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(34,55,36,.08),inset 0 -110px 160px rgba(34,54,42,.12);pointer-events:none}.city-art::before{content:'';position:absolute;inset:0;z-index:8;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 35%,rgba(22,39,42,.12));mix-blend-mode:soft-light;opacity:.72}.city-art::after{content:'';position:absolute;inset:0;z-index:9;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 48%,rgba(22,40,44,.2) 100%);opacity:.55}.city-atmosphere{position:absolute;inset:0;z-index:10;pointer-events:none;overflow:hidden;opacity:.9}.city-atmosphere::before,.city-atmosphere::after{content:'';position:absolute;inset:0;pointer-events:none}.city-atmosphere::before{background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.26) 0 1px,transparent 2px),radial-gradient(circle at 70% 34%,rgba(255,255,255,.2) 0 1px,transparent 2px),radial-gradient(circle at 48% 78%,rgba(255,255,255,.16) 0 1px,transparent 2px);background-size:137px 103px,181px 151px,211px 173px;animation:city-specks 16s linear infinite}.city-atmosphere::after{background:linear-gradient(110deg,transparent 0 42%,rgba(255,255,255,.16) 50%,transparent 58%);transform:translateX(-100%);animation:city-glint 11s ease-in-out infinite}.city-art-0 .city-atmosphere{background:radial-gradient(ellipse at 68% 13%,rgba(255,245,184,.55),transparent 18%),radial-gradient(ellipse at 17% 78%,rgba(118,206,235,.35),transparent 24%)}.city-art-0 .city-atmosphere::before{background:radial-gradient(ellipse at 15% 83%,rgba(255,255,255,.3) 0 2px,transparent 3px),radial-gradient(ellipse at 80% 48%,rgba(255,255,255,.22) 0 2px,transparent 3px);background-size:92px 28px,131px 37px;animation:city-water-shimmer 8s ease-in-out infinite}.city-art-0 .city-atmosphere::after{background:radial-gradient(circle at 61% 32%,rgba(255,246,197,.6),transparent 1.5%),radial-gradient(circle at 38% 52%,rgba(255,235,128,.7),transparent 1.5%);background-size:180px 130px,240px 180px;animation:city-fireflies 5s ease-in-out infinite alternate}.city-art-1 .city-atmosphere{background:linear-gradient(180deg,rgba(255,238,176,.36),transparent 31%,rgba(68,94,86,.16))}.city-art-1 .city-atmosphere::before{background:repeating-linear-gradient(90deg,transparent 0 8%,rgba(255,248,197,.12) 8.2% 8.5%,transparent 8.8% 16%);mask-image:linear-gradient(180deg,transparent 0 8%,#000 8% 31%,transparent 31%);animation:city-window-flicker 5s steps(2,end) infinite}.city-art-1 .city-atmosphere::after{background:radial-gradient(ellipse at 50% 50%,rgba(255,213,95,.15),transparent 42%);animation:city-breathe 6s ease-in-out infinite}.city-art-2 .city-atmosphere{background:linear-gradient(180deg,rgba(255,176,144,.32),transparent 34%,rgba(54,125,155,.18))}.city-art-2 .city-atmosphere::before{background:repeating-linear-gradient(4deg,transparent 0 18px,rgba(255,255,255,.17) 19px 21px,transparent 22px 42px);mask-image:linear-gradient(180deg,#000 0 32%,transparent 80%);animation:city-wave-flow 9s linear infinite}.city-art-2 .city-atmosphere::after{background:radial-gradient(ellipse at 72% 22%,rgba(255,240,181,.42),transparent 21%);animation:city-sunset 8s ease-in-out infinite alternate}.city-art-3 .city-atmosphere{background:radial-gradient(circle at 16% 24%,rgba(79,227,224,.25),transparent 18%),radial-gradient(circle at 78% 29%,rgba(255,110,199,.27),transparent 20%),linear-gradient(180deg,transparent 45%,rgba(255,110,199,.1))}.city-art-3 .city-atmosphere::before{background:repeating-linear-gradient(90deg,transparent 0 10%,rgba(79,227,224,.11) 10.2% 10.45%,transparent 10.7% 20%),repeating-linear-gradient(0deg,transparent 0 13%,rgba(255,110,199,.09) 13.2% 13.5%,transparent 13.8% 26%);mask-image:linear-gradient(180deg,transparent 0 47%,#000 48%);animation:city-neon-drift 12s linear infinite}.city-art-3 .city-atmosphere::after{background:radial-gradient(ellipse at 50% 58%,rgba(255,110,199,.22),transparent 34%);animation:city-neon-pulse 3.2s ease-in-out infinite}.city-art-4 .city-atmosphere{background:linear-gradient(180deg,rgba(255,255,255,.24),transparent 32%,rgba(87,110,137,.16))}.city-art-4 .city-atmosphere::before{background:repeating-linear-gradient(90deg,transparent 0 8%,rgba(255,224,111,.52) 8.2% 8.8%,transparent 9% 16%);mask-image:linear-gradient(180deg,transparent 0 52%,#000 53%);animation:city-runway-lights 1.8s linear infinite}.city-art-4 .city-atmosphere::after{background:radial-gradient(ellipse at 47% 26%,rgba(255,255,255,.42),transparent 23%);animation:city-cloud-glow 7s ease-in-out infinite alternate}.city-art-5 .city-atmosphere{background:radial-gradient(ellipse at 22% 12%,rgba(255,249,189,.42),transparent 22%),linear-gradient(180deg,transparent 45%,rgba(44,87,56,.12))}.city-art-5 .city-atmosphere::before{background:radial-gradient(circle at 21% 43%,rgba(255,255,255,.3) 0 2px,transparent 3px),radial-gradient(circle at 77% 62%,rgba(255,255,255,.24) 0 2px,transparent 3px);background-size:170px 120px,230px 180px;animation:city-specks 18s linear infinite reverse}.city-art-5 .city-atmosphere::after{background:linear-gradient(105deg,transparent 0 35%,rgba(255,255,255,.14) 47%,transparent 60%);animation:city-glint 13s ease-in-out infinite}.city-art-6 .city-atmosphere{background:linear-gradient(180deg,rgba(184,213,235,.25),transparent 39%,rgba(27,47,61,.24))}.city-art-6 .city-atmosphere::before{background:repeating-linear-gradient(90deg,transparent 0 8%,rgba(255,225,147,.2) 8.3% 9.4%,transparent 9.7% 16%);mask-image:linear-gradient(180deg,transparent 0 8%,#000 8% 37%,transparent 37%);animation:city-office-lights 4.5s steps(3,end) infinite}.city-art-6 .city-atmosphere::after{background:radial-gradient(ellipse at 50% 38%,rgba(255,215,131,.18),transparent 40%);animation:city-breathe 7s ease-in-out infinite}.city-poi{filter:drop-shadow(0 6px 5px rgba(28,56,43,.16))}.poi-pin{overflow:hidden;isolation:isolate;background:linear-gradient(145deg,#fff 15%,#f5f8ee);transition:transform .25s cubic-bezier(.22,1.3,.36,1),box-shadow .25s,filter .25s}.poi-pin::before{content:'';position:absolute;inset:3px;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.85),transparent 42%);z-index:-1}.city-poi:hover .poi-pin,.city-poi:focus-visible .poi-pin{transform:translateY(-4px);filter:saturate(1.15);box-shadow:0 0 0 4px rgba(255,255,255,.52),0 8px 0 rgba(20,40,59,.16),0 0 22px color-mix(in srgb,var(--poi-color),transparent 40%)}.city-poi.is-selected .poi-pin{transform:translateY(-4px)}.poi-name{border:1px solid rgba(255,255,255,.8);background:rgba(255,255,255,.9);backdrop-filter:blur(5px);transition:transform .2s,background .2s}.city-poi:hover .poi-name,.city-poi:focus-visible .poi-name{transform:translateY(-2px);background:#fffef6}.city-open-map .city-art-3 .city-poi .poi-name{background:rgba(28,22,51,.78);border-color:rgba(255,255,255,.25);color:#fff6de}.city-open-map .city-art-3 .city-poi:hover .poi-name,.city-open-map .city-art-3 .city-poi:focus-visible .poi-name{background:rgba(45,33,78,.94)}
@keyframes city-specks{from{background-position:0 0,0 0,0 0}to{background-position:90px 48px,-80px 65px,120px -42px}}@keyframes city-glint{0%,45%{transform:translateX(-100%);opacity:0}60%{opacity:1}100%{transform:translateX(100%);opacity:0}}@keyframes city-water-shimmer{0%,100%{transform:translateX(-1%);opacity:.55}50%{transform:translateX(2%);opacity:1}}@keyframes city-fireflies{0%,100%{opacity:.25;transform:translateY(3px)}50%{opacity:1;transform:translateY(-5px)}}@keyframes city-window-flicker{0%,100%{opacity:.42}45%{opacity:.76}70%{opacity:.35}}@keyframes city-breathe{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.8;transform:scale(1.06)}}@keyframes city-wave-flow{from{background-position:0 0}to{background-position:120px 0}}@keyframes city-sunset{0%,100%{opacity:.35;transform:translateX(-2%)}50%{opacity:.9;transform:translateX(2%)}}@keyframes city-neon-drift{from{background-position:0 0,0 0}to{background-position:80px 0,-50px 35px}}@keyframes city-neon-pulse{0%,100%{opacity:.35}50%{opacity:1}}@keyframes city-runway-lights{from{background-position:0 0}to{background-position:64px 0}}@keyframes city-cloud-glow{0%,100%{opacity:.32;transform:translateX(-2%)}50%{opacity:.9;transform:translateX(3%)}}@keyframes city-office-lights{0%,100%{opacity:.4}35%{opacity:.75}68%{opacity:.28}}
@media(max-width:680px){.city-open-map::after{border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(34,55,36,.1),inset 0 -70px 80px rgba(34,54,42,.12)}.city-open-instruction{background:#f7faefed}.city-open-hint{background:#f8fbf0ed}.city-poi{filter:drop-shadow(0 4px 4px rgba(28,56,43,.15))}.poi-pin{width:50px;height:50px}.poi-name{font-size:9px}}
@media(prefers-reduced-motion:reduce){.city-atmosphere::before,.city-atmosphere::after,.city-poi:hover .poi-pin{animation:none!important;transition:none!important}}
/* Challenge feedback and suggested prompts */
.suggested-question{margin-top:16px;padding:12px 14px;background:#f4ead4;border:1px solid #e6d7b6;border-radius:10px;transform:rotate(-1deg)}
.suggested-question span,.feedback-tip span{display:block;font-size:8px;letter-spacing:1.2px;font-weight:700;color:#9b7843;margin-bottom:4px}
.suggested-question strong{display:block;font:500 15px/1.35 Fredoka;color:#6d5734}
.voice-feedback-card{max-width:760px;margin:26px auto;background:#fffef8;border:1px solid #dce5cf;border-radius:20px;padding:42px 44px;text-align:center;animation:enter .35s ease-out}
.feedback-mark{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 18px;border:1px solid #a6bd88;border-radius:50%;background:#edf4df;color:#769457}
.voice-feedback-card .eyebrow{font-size:9px}
.voice-feedback-card h1{font:500 44px/1.08 Fredoka;letter-spacing:-.8px;color:#526b3e;margin:14px 0 10px}
.feedback-lead{font-size:15px;color:#7b896c;margin:0 auto 27px}
.feedback-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:left;margin:0 0 17px}
.feedback-columns>div{padding:17px 18px;border:1px solid #dce5cf;border-radius:12px;background:#fbfcf4}
.feedback-columns strong{font:500 17px Fredoka;color:#637d4b}
.feedback-columns p{font-size:12px;line-height:1.65;color:#7d8a70;margin:8px 0 0}
.feedback-tip{text-align:left;background:#eef3e5;border-radius:12px;padding:14px 17px;margin-bottom:24px}
.feedback-tip p{font-size:12px;line-height:1.6;color:#60704f;margin:0}
.voice-feedback-card .btn{margin-inline:auto}
.voice-ai-feedback{margin:14px 0 18px;padding:12px 14px;border:1px solid #d5e2c8;border-radius:12px;background:#f5f8ef;color:#637657;text-align:left;font-size:11px;line-height:1.55}.voice-ai-feedback span{display:block;color:#7b896f;font-style:italic}.voice-ai-feedback p{margin:5px 0 0;color:#4f6547}.voice-ai-feedback[hidden]{display:none}
.practice-feedback{margin:23px auto;padding:18px 20px;background:#eef3e5;border-radius:13px;text-align:left;max-width:520px}
.practice-feedback strong{font:500 16px Fredoka;color:#607b49;display:block;margin-top:8px}
.practice-feedback strong:first-child{margin-top:0}
.practice-feedback p{font-size:12px;line-height:1.65;color:#74836a;margin:4px 0 0}
.final-feedback{border:1px solid #dce5cf}
.voice-local-note p{max-width:285px}
/* Guided practice: visible support, truthful feedback, and comfortable reading. */
.voice-experience .voice-layout{grid-template-columns:minmax(0,1fr) minmax(310px,360px)}
.voice-experience .voice-companion{display:block;min-width:0}
.voice-experience .self-preview{display:flex;align-items:center;justify-content:flex-start;gap:12px;min-height:72px;height:auto;max-height:none;aspect-ratio:auto;padding:12px;margin:0 0 22px;border:0;box-shadow:none;background:#e9f0df;color:#334b35;border-radius:12px;text-align:left}
.voice-experience .self-avatar{margin:0;flex-shrink:0;width:44px;height:44px;background:#f5d87a}
.voice-experience .self-preview small{display:none}
.voice-experience .self-preview-label{font-size:14px}
.voice-experience .voice-progress-label{font-size:11px;letter-spacing:.3px;color:#526448;flex-wrap:wrap;gap:8px}
.voice-experience .voice-progress-label b{font-size:11px}
.voice-experience .voice-steps{margin:10px 0 9px}
.voice-experience .turn-count{font-size:12px;color:#53644b;margin-bottom:20px}
.voice-experience .voice-companion h2{font-size:30px}
.voice-experience [data-turn-subtitle]{font-size:20px;color:#526448}
.voice-experience .voice-companion>p{font-size:14px;line-height:1.65;color:#526448}
.voice-experience .suggested-question{transform:none;background:#f8edce;border:0;border-radius:8px;padding:15px}
.voice-experience .suggested-question>span{font-size:10px;color:#70572b;letter-spacing:.7px}
.voice-experience .suggested-question strong{font-size:18px;line-height:1.45;color:#4e432c}
.voice-experience .suggested-question p{font-size:12px;line-height:1.6;margin:8px 0 0;color:#66573a}
.practice-help,.practice-review{margin:18px 0;color:#3c573d;font-size:14px;text-align:left}
.practice-help summary,.practice-review summary{cursor:pointer;padding-block:10px;font-weight:600;min-height:44px}
.practice-help summary:focus-visible,.practice-review summary:focus-visible{outline:3px solid #39756a;outline-offset:3px}
.practice-help p,.practice-review p{font-size:13px;line-height:1.6}
.practice-review li{padding:8px 0;border-bottom:1px solid var(--line)}
.practice-review li>span{font-size:11px;color:#526448}
.practice-review ol{padding-left:23px}
.voice-experience .voice-companion h3{margin-top:22px;font-size:22px}
.voice-experience .voice-primary{font-size:14px;background:#49683c;color:#fffef3;border-color:#49683c}
.voice-experience .voice-primary:hover:enabled{background:#38532e}
.voice-experience .voice-primary:disabled{background:#e3e9d8;color:#536448;border-color:#d2dcc2}
.voice-experience .voice-tools span{font-size:12px}
.voice-experience .voice-local-note p{font-size:12px;max-width:none;color:#53644b;line-height:1.65}
.voice-experience .voice-finish-early{font-size:13px}
.voice-experience .voice-error{color:#78411b;font-size:13px}
body[data-screen=session] .voice-feedback-card,body[data-screen=session] .voice-summary{border-radius:16px;box-shadow:none}
.voice-feedback-card .feedback-lead,.voice-feedback-card .feedback-columns p,.voice-feedback-card .feedback-tip p,.voice-summary .practice-feedback p,.voice-summary>p,.voice-summary>small{color:#526448;font-size:14px;line-height:1.7}
.voice-feedback-card .feedback-columns{gap:24px}
.voice-feedback-card .feedback-columns>div{border:0;padding:0;background:none}
.voice-feedback-card .feedback-columns strong,.voice-feedback-card .feedback-tip strong,.voice-summary .practice-feedback strong{color:#3d5732;font:500 20px Fredoka}
.voice-feedback-card .feedback-note{font-size:13px;line-height:1.65;color:#526448;text-align:left;margin:20px 0 26px}
.voice-feedback-card>.text-link{display:block;margin:16px auto 0}
.voice-summary .summary-stats span{color:#526448;font-size:12px}
@media(max-width:1100px){.voice-experience .voice-layout{grid-template-columns:minmax(0,1fr) 310px}}
@media(max-width:900px){.voice-experience .voice-layout{grid-template-columns:1fr}.voice-experience .voice-companion{max-width:650px;width:100%;margin:auto}.voice-experience .self-preview{width:auto;max-width:none}.voice-experience .voice-companion h3,.voice-experience .voice-instruction{text-align:left}}
@media(max-width:600px){.voice-feedback-card .feedback-columns{gap:20px}.voice-experience .voice-header{flex-wrap:wrap}.voice-experience .voice-header>div{min-width:0;flex:1}.voice-experience .voice-header h1{font-size:25px}.voice-experience .voice-time{margin-left:auto}.voice-experience .voice-stage .voice-room{height:400px}.voice-experience .voice-caption{position:relative;bottom:auto;left:auto;right:auto;margin:0;border:0;border-radius:0;background:#203a34;min-height:64px;font-size:16px;backdrop-filter:none}.voice-experience .voice-person{bottom:96px}.voice-experience .voice-stage{contain:layout;overflow:hidden}.voice-experience .voice-stage .room-tato{bottom:60px}.voice-summary .summary-stats{gap:20px}.voice-summary .summary-stats>div+div{padding-left:20px}.voice-summary .summary-stats strong{font-size:32px}}
@media(max-width:600px){.voice-feedback-card{padding:31px 20px;margin:10px auto}.voice-feedback-card h1{font-size:36px}.feedback-columns{grid-template-columns:1fr;gap:9px}.feedback-columns>div{padding:14px}.feedback-lead{font-size:13px}.suggested-question strong{font-size:14px}.practice-feedback{padding:15px 16px}}
/* BataTalk: sunshine, sculpted little worlds and a face-to-face hello. */
:root{--bt-ink:#263b36;--bt-leaf:#4b7257;--bt-sun:#ffd05a;--bt-paper:#fbfcf7;--bt-line:#dce5db;--bt-ease:cubic-bezier(.22,1,.36,1)}
html{scroll-behavior:smooth;scroll-padding-top:100px}body{color:var(--bt-ink)}button,a,input{ -webkit-tap-highlight-color:transparent}button{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #39756a;outline-offset:4px}button{transition:transform .22s var(--bt-ease),box-shadow .22s,background .22s}button:not(.city-poi):active:enabled{transform:translateY(2px) scale(.98)}
.btn-primary,.city-start-button,.voice-primary{box-shadow:0 4px 0 #b99435,0 9px 20px #6f581415!important;border-radius:16px!important;transition:transform .2s,box-shadow .2s!important}.btn-primary:hover,.city-start-button:hover,.voice-primary:hover:enabled{transform:translateY(-3px);box-shadow:0 7px 0 #b99435,0 13px 24px #6f581421!important}.btn-primary:active,.city-start-button:active,.voice-primary:active:enabled{transform:translateY(3px);box-shadow:0 1px 0 #b99435!important}.conversation-stage{box-shadow:inset 0 1px 0 #fff,inset 0 -40px 80px #553a1512}.scene{transition:transform .45s var(--bt-ease),box-shadow .45s}
.app-shell{background:linear-gradient(135deg,#f7f9f2,#eef3ed)}.sidebar{background:#f9fbf5;border-right:1px solid var(--bt-line)}.side-nav{gap:8px}.side-nav button{border-radius:15px;min-height:50px}.side-nav button.active{background:#dfead9;color:#274e37;box-shadow:inset 3px 0 #577d4c,0 3px 8px #2f4c2510}.side-nav button:hover{background:#eaf1e3;transform:translateX(3px)}.main{padding-top:35px}.main>div:not(.voice-experience){animation:page-arrive .45s var(--bt-ease)}.app-head h1{letter-spacing:-1.5px}.card{border:1px solid #d9e3d4;background:#fffffc;border-radius:24px;box-shadow:0 6px 0 #e3eadc,0 15px 35px #2b472d08}.home-feature{position:relative;overflow:hidden;background:linear-gradient(120deg,#f7e5a1,#fbedbd 60%,#dcebc9)}.home-feature-art{background:radial-gradient(ellipse at center,#fff7cf 0 45%,transparent 46%)}.home-feature-art:after{content:'';position:absolute;bottom:14%;left:20%;width:60%;height:22px;border-radius:50%;background:#614b2720;filter:blur(9px)}.rhythm-card{background:#e6efde}.stat strong{font-variant-numeric:tabular-nums}.place{border:1px solid #d6e0d2;border-radius:21px!important;background:#fffffc;box-shadow:0 4px 0 #e1e8dc;transition:transform .3s var(--bt-ease),box-shadow .3s}.place:hover{transform:translateY(-5px);box-shadow:0 9px 0 #dce7d3,0 15px 24px #2a482512}.place-icon{border-radius:16px;box-shadow:inset 0 1px #fff,0 5px 12px #263b3610}.place:nth-child(2) .place-icon{background:#dcebf0}.place:nth-child(3) .place-icon{background:#eadff3}
.passport-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px}.passport-place{padding:22px;background:#fffef8;border:1px solid #d6e2cf;border-radius:20px;display:grid;gap:10px;text-align:left;min-width:0}.passport-place>span{font-size:28px}.passport-place strong{font:500 20px Fredoka}.passport-place small{color:#586e59;line-height:1.5}.passport-place.is-visited{background:#e6efdc;border:1px dashed #86a66d}.passport-place:hover{transform:translateY(-4px);box-shadow:0 8px 0 #dae4d1}.journey-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:32px 0 10px}.journey-head h2{font:500 28px Fredoka;margin:8px 0}.journey-count{font:500 42px Fredoka;color:#597849}.journey-count small{font:500 14px 'DM Sans'}
.onboard-card,.account-card{background:#fffefa;border:1px solid #dce6d5;border-radius:28px;box-shadow:0 10px 0 #e0e9d8,0 25px 65px #29472f10;padding:36px}.screen{background:radial-gradient(ellipse at 20% 20%,#e4edcf,transparent 55%),#f5f8ef}.choice{border-radius:16px!important;border:1px solid #dbe3d4!important;box-shadow:0 3px 0 #e9eddf;animation:page-arrive .45s var(--bt-ease) both;animation-delay:calc(var(--choice-index)*55ms)}.choice.active{background:#e4efd9!important;border-color:#7e9c6e!important;box-shadow:0 3px 0 #8eaa78}.choice:hover{transform:translateX(4px)}.profile-dialog{border:1px solid #d8e4cf!important;border-radius:27px!important;box-shadow:0 28px 90px #142b3040!important;animation:page-arrive .35s var(--bt-ease)}.profile-backdrop{backdrop-filter:blur(12px)}.profile-settings input{accent-color:#577d4c;width:21px;height:21px}.profile-settings label{padding-block:20px!important}
/* Miniature cities: grounded architecture, paths, scenery and a readable destination dock. */
.city-open-map>.city-art{transition:filter .5s;perspective:900px}.city-building,.city-neon-building,.campus-building,.work-tower,.work-building,.airport-terminal,.island-house{filter:drop-shadow(10px 16px 0 #253d3525);box-shadow:inset 0 4px 0 #ffffff68,inset -9px 0 0 #233e3218}.city-tree,.campus-tree,.city-palm{filter:drop-shadow(7px 10px 2px #294b3428)}.city-road,.city-neon-road,.campus-road,.work-road{box-shadow:0 -3px 0 #ffffff59,0 4px 0 #28432d25}.city-pond,.work-fountain{box-shadow:inset 0 4px 7px #24577c33,0 0 0 5px #e5eadb70}.city-island{filter:drop-shadow(0 14px 0 #419b9c66) drop-shadow(0 24px 15px #2c78934d)}.city-open-title>div{background:#fffff4e8;box-shadow:0 5px 0 #46623716,0 12px 35px #28493812}.city-open-instruction{top:150px;left:20px}.city-open-hint{bottom:76px}.city-dock{position:absolute;z-index:36;bottom:17px;left:50%;transform:translateX(-50%);display:flex;gap:7px;padding:7px;border-radius:18px;background:#fffef6eb;backdrop-filter:blur(15px);border:1px solid #ffffffbf;box-shadow:0 8px 30px #27443125;max-width:calc(100% - 24px);overflow-x:auto}.city-dock button{width:43px;height:43px;flex:none;border:0;border-radius:12px;background:transparent;font-size:23px}.city-dock button[aria-pressed=true]{background:#e0ebd4;box-shadow:inset 0 0 0 1px #9fb58a}.city-dock button:hover{background:#edf2e5;transform:translateY(-3px)}.city-world .city-detail-overlay{bottom:90px;box-shadow:0 18px 60px #18332230!important}.city-poi.is-selected .poi-ring{box-shadow:0 0 0 12px #ffffff22,0 0 0 25px #ffffff12}.poi-pin{border-radius:22px!important}.city-art .world-resident{position:absolute;z-index:12;left:var(--x);top:var(--y);width:11px;height:16px;border-radius:48% 48% 40% 40%;background:var(--coat);border:1px solid #45604566;box-shadow:2px 5px 0 #26463424;animation:resident-walk 13s ease-in-out infinite alternate;animation-delay:var(--delay)}.world-resident:before{content:'';position:absolute;left:2px;top:2px;width:5px;height:5px;background:#efc58b;border-radius:50%}.world-resident:after{content:'';position:absolute;bottom:-3px;left:1px;width:3px;height:4px;background:#34473d;box-shadow:5px 0 #34473d}.city-art-3 .world-resident{filter:drop-shadow(0 0 4px #ed9dd766)}
.arrival-transition{position:fixed;inset:0;z-index:9999;pointer-events:none;overflow:hidden;background:#263b36;animation:arrival-fade .9s both}.arrival-transition>.city-art{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;animation:arrival-zoom .9s var(--bt-ease) both}.arrival-transition>span{position:absolute;left:50%;top:70%;transform:translateX(-50%);background:#fffef5ed;padding:15px 24px;border-radius:20px;white-space:nowrap;font:500 20px Fredoka;color:#2c4634;box-shadow:0 8px 30px #0002}
/* Call room. Tato is the focal point; mission and local camera support him. */
body[data-screen=session] .main{max-width:1600px;padding:24px 30px}.voice-header{margin-bottom:22px}.voice-header h1{font-size:30px}.voice-time{font-variant-numeric:tabular-nums;background:#e1eadb;border:1px solid #cbdcc2;padding:10px 16px;border-radius:13px}.voice-layout{grid-template-columns:minmax(0,1fr) 290px;gap:22px}.voice-stage{padding:0;border:6px solid #fffef8;border-radius:28px;background:#203a34;box-shadow:0 8px 0 #cbd9c5,0 25px 60px #233c3520;isolation:isolate}.voice-stage-top{position:absolute;z-index:15;top:18px;left:18px;right:18px;height:auto;padding:0;color:#fff}.voice-stage-top>span{padding:9px 13px;background:#20372dcc;backdrop-filter:blur(10px);border:1px solid #ffffff30;border-radius:12px}.voice-stage-top button{width:38px;height:36px;background:#ffffffed;color:#315c47;border:0;border-radius:11px}.voice-stage .voice-room{height:570px;border-radius:20px;background:radial-gradient(ellipse at 35% 20%,#ffffff4d,transparent 60%),var(--room-wall)}.voice-room:after{content:'';position:absolute;inset:0;z-index:10;pointer-events:none;background:linear-gradient(0deg,#172a2ce6,transparent 30%,transparent 80%,#172a2c25);box-shadow:inset 0 0 60px #4f391517}.voice-stage .room-window{left:30%;width:48%;height:300px;top:55px;border-width:12px;box-shadow:0 0 0 2px #71582f40,12px 16px 30px #5e422d18,inset 0 0 30px #fef5c4}.voice-stage .room-sign{top:128px;left:20px;max-width:40%;padding:14px;transform:rotate(-4deg)}.voice-stage .room-sign span{font-size:25px}.voice-stage .room-shelf{top:258px}.voice-stage .room-table{bottom:85px;height:49px;background:repeating-linear-gradient(0deg,#b38a5b16 0 2px,transparent 2px 8px),#d2b482;box-shadow:0 9px 20px #5b3f3a25}.voice-stage .room-tato{width:240px;height:280px;left:calc(50% - 120px);bottom:124px;filter:drop-shadow(0 12px 8px #74502826);animation:tato-presence 6s ease-in-out infinite;transform-origin:50% 90%}.voice-stage .room-tato-body{background:radial-gradient(ellipse at 29% 20%,#ffe3a0,transparent 52%),radial-gradient(ellipse at 76% 75%,#bc8044,transparent 55%),#e8b66a;border:2px solid #99652f;border-radius:46% 48% 42% 42%;box-shadow:inset 5px 3px 5px #fff2bf99,inset -13px -9px 17px #98613555,inset 0 -4px 0 #bf8c4b}.room-tato-body:before,.room-tato-body:after{content:'';position:absolute;width:38px;height:62px;top:140px;border:2px solid #a9763f;border-radius:50%;background:linear-gradient(100deg,#eac07c,#d59b57);z-index:3}.room-tato-body:before{left:-20px;transform:rotate(20deg)}.room-tato-body:after{right:-20px;transform:rotate(-20deg)}.voice-stage .room-eye{top:77px;width:14px;height:22px;background:radial-gradient(circle at 35% 28%,white 0 2px,transparent 3px),#3c3326;translate:var(--look-x,0) var(--look-y,0)}.voice-stage .room-eye.left{left:64px}.voice-stage .room-eye.right{right:64px}.voice-stage .room-mouth{top:111px;left:calc(50% - 16px);width:32px;height:14px;border-radius:4px 4px 22px 22px;background:#70452c;border-bottom:3px solid #f49887}.voice-stage .room-cheek{top:109px;left:43px;opacity:.65;box-shadow:125px 0 #ed9871;filter:blur(1px)}.voice-stage .room-tato-leaf{right:67px;width:62px;height:43px;background:linear-gradient(140deg,#c1d48b,#79994f);box-shadow:inset 0 3px 3px #e5f2bd88;transform-origin:bottom left;animation:leaf-sway 5s ease-in-out infinite}.voice-stage .room-outfit{background:linear-gradient(100deg,#ffffff18,transparent),var(--room-cloth);box-shadow:inset 0 3px #ffffff22}.voice-stage .room-plant{right:25px;bottom:138px}.voice-stage .room-object{bottom:139px;right:65px}.voice-person{position:absolute;z-index:15;bottom:104px;left:22px;color:#fff;padding:0;gap:8px}.voice-person strong{color:#fff;font-size:21px}.voice-person>span:last-child{color:#e0e8dc;font-size:10px}.voice-caption{position:absolute;z-index:15;bottom:17px;left:18px;right:18px;margin:0;min-height:60px;padding:16px 22px;border:1px solid #ffffff26;border-radius:16px;background:#182e2bcc;color:white;text-align:center;font-size:17px;line-height:1.5;backdrop-filter:blur(12px)}.voice-caption[hidden]{display:none}.voice-companion{padding:0}.voice-companion h2{font-size:29px;margin-bottom:12px}.voice-companion>p{font-size:12px;color:#56684d}.voice-companion h3{font-size:20px}.voice-orb-wrap{margin:15px auto}.voice-orb{width:65px;height:65px}.voice-local-note{margin-top:15px}.voice-tools button{min-height:51px;border-radius:12px}.voice-tools button:disabled{opacity:.45}.voice-finish-early{color:#a3423d;background:#f8e9e3;border-radius:12px;padding:12px;width:100%;margin-top:12px}.voice-primary{font-size:12px;min-height:51px}.self-preview{position:relative;background:linear-gradient(135deg,#334d47,#1c302d);border:3px solid white;border-radius:18px;aspect-ratio:16/9;overflow:hidden;margin-bottom:22px;box-shadow:0 5px 0 #d7e2cf;display:grid;place-content:center;text-align:center;color:#e8efdf}.self-preview video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);display:none}.self-preview.camera-on video{display:block}.self-avatar{font:500 31px Fredoka;width:57px;height:57px;display:grid;place-items:center;border-radius:50%;background:#dce8c9;color:#446243;margin:0 auto 9px}.camera-on .self-avatar{visibility:hidden}.self-preview button{position:relative;z-index:2;border:1px solid #ffffff44;background:#213b32d9;color:#fff;border-radius:9px;padding:7px 12px;font-size:10px;justify-self:center}.self-preview small{position:relative;z-index:2;font-size:9px;max-width:220px;line-height:1.5;margin:7px 8px 0;background:#20392cbd;border-radius:5px;padding:2px 6px}.voice-experience[data-voice-phase=speaking] .room-mouth{animation:tato-talk .22s ease-in-out infinite alternate!important}.voice-experience[data-voice-phase=listening] .room-tato{animation:tato-listen 4s ease-in-out infinite}.voice-experience[data-voice-phase=speaking] .room-tato-body:after{animation:tato-gesture 1.8s ease-in-out infinite}.voice-experience[data-voice-phase=listening] .self-preview{box-shadow:0 0 0 calc(1px + var(--voice-level,0)*5px) #7aa969,0 5px 0 #d7e2cf}.voice-experience[data-voice-phase=speaking] .voice-stage{border-color:#c0d2a4}.voice-summary{background:#fffffa;border:1px solid #dce5d0;border-radius:30px;box-shadow:0 9px 0 #e0e8d6,0 24px 50px #2d492c12}.summary-stamp{box-shadow:0 6px 0 #b8c99f;animation:stamp-arrive .65s var(--bt-ease)}
@keyframes page-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes arrival-zoom{from{transform:scale(1);filter:blur(0)}to{transform:scale(3.5);filter:blur(9px)}}@keyframes arrival-fade{0%{opacity:0}12%,48%{opacity:1}100%{opacity:0}}@keyframes tato-presence{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}@keyframes tato-talk{from{transform:scaleY(.45)}to{transform:scaleY(1.45)}}@keyframes tato-listen{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(-1deg) translateY(2px)}}@keyframes tato-gesture{0%,100%{transform:rotate(-20deg)}50%{transform:rotate(-55deg) translateY(-12px)}}@keyframes leaf-sway{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(-2deg)}}@keyframes resident-walk{0%,12%{transform:translateX(0)}90%,100%{transform:translateX(38px)}}@keyframes stamp-arrive{from{transform:scale(1.3) rotate(-14deg);opacity:0}to{transform:scale(1);opacity:1}}
.city-details{position:absolute;inset:0;width:100%;height:100%;z-index:11;pointer-events:none}.voice-orb-wrap{display:none}.self-preview{max-height:150px}.room-window .city-art-credit{display:none}.conversation-stage .tato-small,.home-feature-art .tato-small{background:radial-gradient(ellipse at 28% 22%,#ffe4a5,transparent 55%),radial-gradient(ellipse at 78% 80%,#b97f45,transparent 60%),#e4b164;box-shadow:inset 5px 4px 6px #ffedb988,inset -12px -8px 16px #9a683855,0 12px 15px #684a2520}.conversation-stage .tato-small .leaf,.home-feature-art .leaf{background:linear-gradient(135deg,#c5d994,#7e9a50);box-shadow:inset 0 3px 3px #ddebab;transform-origin:bottom left}.voice-companion .voice-local-note p{font-size:10px}.voice-companion .voice-instruction{min-height:30px}
@media(min-width:1500px){.voice-stage .voice-room{height:650px}.voice-stage .room-tato{scale:1.2;bottom:146px}.voice-stage .room-window{height:370px}}
@media(max-width:1100px){.voice-layout{grid-template-columns:minmax(0,1fr) 255px;gap:16px}body[data-screen=session] .main{padding:24px 20px}.voice-stage .room-sign span{font-size:19px}.voice-stage .room-sign{left:12px}.voice-stage .room-tato{scale:.9}.voice-person>span:last-child{display:none}.city-open-instruction{top:135px}}
@media(max-width:900px){.voice-layout{grid-template-columns:1fr}.voice-stage .voice-room{height:490px}.voice-companion{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}.voice-companion>.self-preview{grid-column:2;grid-row:1/6;align-self:start;width:100%;max-width:260px;justify-self:end}.voice-companion>*{grid-column:1}.voice-companion .voice-primary,.voice-companion .voice-tools,.voice-companion .voice-finish-early,.voice-companion .voice-local-note,.voice-companion .voice-error{grid-column:1/-1}.voice-orb-wrap{display:none}.voice-companion h2{font-size:26px}.voice-companion h3,.voice-companion .voice-instruction{text-align:left;margin:0}.voice-stage .room-tato{bottom:102px;scale:.86}.voice-person{bottom:97px}.passport-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.main{padding:23px 16px}.sidebar{backdrop-filter:blur(15px)}.side-nav button{min-height:43px}.onboard-card,.account-card{padding:25px 21px}.app-head h1{font-size:33px}.card{border-radius:21px}.passport-place{padding:17px}.passport-place strong{font-size:17px}.journey-head{gap:14px}.journey-count{font-size:31px}.journey-head h2{font-size:24px}.city-open-stage{min-height:590px}.city-open-instruction{top:110px;left:13px}.city-dock{bottom:13px;gap:2px;padding:5px;border-radius:15px}.city-dock button{width:35px;height:37px;font-size:20px}.city-open-hint{bottom:70px}.city-world .city-detail-overlay{bottom:73px;max-height:70%}.voice-header{gap:8px}.voice-header .eyebrow{font-size:7px}.voice-header h1{font-size:24px}.voice-time{font-size:11px;padding:8px 10px}.voice-back{font-size:11px}body[data-screen=session] .main{padding:20px 12px}.voice-stage{border-width:4px;border-radius:23px}.voice-stage .voice-room{height:430px}.voice-stage .room-tato{scale:.78;bottom:72px}.voice-stage .room-window{height:230px;top:50px;left:25%;width:60%}.voice-stage .room-sign{top:110px;left:9px;max-width:45%;padding:9px}.voice-stage .room-sign span{font-size:17px}.voice-stage .room-shelf{top:195px}.voice-stage .room-table{bottom:68px}.voice-stage .room-plant{bottom:115px}.voice-stage .room-object{bottom:116px;right:40px}.voice-stage-top{top:12px;left:12px;right:12px;font-size:9px}.voice-person{bottom:90px;left:15px}.voice-caption{font-size:14px;left:10px;right:10px;bottom:12px;padding:12px 10px;min-height:55px}.voice-companion{gap:9px 14px;padding:9px 5px}.voice-companion h2{font-size:24px}.voice-companion h3{font-size:18px}.voice-companion>p{font-size:11px}.self-preview{border-width:2px;border-radius:14px;aspect-ratio:1/1;margin-bottom:0}.self-avatar{width:43px;height:43px;font-size:24px}.self-preview small{font-size:8px}.voice-progress-label{font-size:8px}.voice-skills span{font-size:9px}.arrival-transition>span{font-size:15px;padding:13px 18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.arrival-transition{display:none}.main>div{opacity:1!important;transform:none!important}}


/* Continuity first: local state changes never replay page entrance effects. */
html{scrollbar-gutter:stable}.main>div:not(.voice-experience),.voice-experience,.choice,.city-app{animation:none!important}.app-shell{min-height:100svh}.city-open-map>.city-art{perspective:none;contain:layout paint}.city-art::before,.city-art::after{mix-blend-mode:normal}.city-atmosphere::before,.city-atmosphere::after{animation:none!important}.city-atmosphere{opacity:.55}.arrival-transition{display:none}.city-poi{filter:none;transition:transform .2s cubic-bezier(.22,1,.36,1)}.city-open-map::after{box-shadow:inset 0 -60px 80px #223e4216}.city-open-title>div,.city-open-instruction,.city-open-hint,.city-dock,.poi-name{backdrop-filter:none}.city-open-title>div{background:#fffff6f2}.city-open-title h1{font-size:clamp(29px,3.2vw,43px)}.city-open-instruction{top:132px}.city-open-stage{min-height:680px}.city-open-title{top:15px}.city-open-hint{color:#3e5a45}.city-car,.city-cloud,.city-boat,.city-wave,.world-resident,.city-poi:hover .poi-pin,.city-poi:focus-visible .poi-pin{filter:none}.voice-stage{contain:layout paint}.voice-room:after{box-shadow:none}.voice-stage .room-tato{filter:none}
/* A companion with a life of his own. */
.guide-tato{width:100%;height:100%;overflow:visible;display:block}.tato-buddy{margin-top:auto;padding-top:18px}.buddy-toggle{display:flex;align-items:center;gap:5px;width:100%;padding:0;border:0;background:transparent;text-align:left;color:#36543d}.buddy-toggle>.guide-tato{width:81px;height:90px;flex:none}.buddy-toggle>span{font:500 18px Fredoka}.buddy-toggle i{font:400 10px 'DM Sans';display:block;margin-top:4px;color:#62765a}.tato-buddy p{margin:0;padding:13px 14px;background:#edf3e3;border:1px solid #d4e3c5;border-radius:4px 16px 16px 16px;color:#516746;font-size:11px;line-height:1.7}.tato-buddy p[hidden]{display:none}.side-footer{position:static!important;margin-top:18px!important;font-size:9px!important}.sidebar{display:flex;flex-direction:column}.side-nav{margin-bottom:20px}.onboarding-layout{display:grid;grid-template-columns:minmax(250px,380px) minmax(350px,510px);justify-content:center;align-items:center;gap:65px;min-height:100svh;padding:40px 32px;background:radial-gradient(ellipse at 18% 45%,#e3ecd3,transparent 60%),#f7f9f1}.onboarding-layout .onboard-card{width:100%;max-width:none;margin:0;box-sizing:border-box;padding:34px}.onboarding-guide{width:100%}.guide-postcard{position:relative;height:330px;border:8px solid #fffef7;border-radius:140px 140px 30px 30px;background:#c5dfcf;overflow:hidden;isolation:isolate;box-shadow:0 7px 0 #d4dfc6}.guide-postcard .guide-tato{position:absolute;width:210px;height:231px;left:calc(50% - 105px);bottom:30px;z-index:3}.guide-postmark{position:absolute;top:32px;left:0;right:0;text-align:center;font-size:8px;line-height:1.7;letter-spacing:1.5px;color:#476c58;z-index:2}.guide-hills{position:absolute;left:-10%;bottom:-20%;width:120%;height:62%;border-radius:50%;background:#93b47d;box-shadow:40px -22px 0 #b0c89a,-60px -35px 0 #d4dda7}.guide-postcard:before{content:'';position:absolute;width:110px;height:110px;right:30px;top:70px;border-radius:50%;background:#f8dfa0}.guide-postcard-caption{position:absolute;z-index:4;left:0;right:0;bottom:15px;text-align:center;font:500 15px Fredoka;color:#314d35}.guide-orbit{position:absolute;z-index:4;color:#52734e;font:500 19px Fredoka;padding:7px 12px;border-radius:12px;background:#fffef5e6;animation:buddy-float 5s ease-in-out infinite}.orbit-one{left:15px;top:128px;rotate:-9deg}.orbit-two{right:6px;top:185px;rotate:8deg;font-size:14px;animation-delay:-2s}.guide-speech{position:relative;padding:22px 23px 18px;border:1px solid #d4e2c8;border-radius:20px;background:#fffef9;margin-top:20px;box-shadow:0 4px 0 #e1e8d9;min-height:115px}.guide-speech:before{content:'';position:absolute;left:40px;top:-8px;width:15px;height:15px;rotate:45deg;background:#fffef9;border-top:1px solid #d4e2c8;border-left:1px solid #d4e2c8}.guide-speech>span{font-size:8px;letter-spacing:1.4px;font-weight:700;color:#66814f}.guide-speech p{font:500 19px/1.45 Fredoka;margin:9px 0 0;color:#3c573d}.guide-journey{display:flex;align-items:center;gap:12px;justify-content:center;font-size:10px;margin-top:23px;color:#7c8975}.guide-journey i{width:35px;height:1px;background:#cad7bc}.guide-journey .current{color:#446237;font-weight:700}.guide-journey .done{color:#5c8050}.auth-tato{display:flex;align-items:center;gap:13px;padding:0 10px;background:#eaf1df;border-radius:18px;margin:18px 0}.auth-tato .guide-tato{width:77px;height:90px;flex:none}.auth-tato p{font:500 18px/1.3 Fredoka;color:#4d6844}.choice{transition:background .18s,border-color .18s,box-shadow .18s!important}.choice:hover{transform:none!important}.choice .emoji{transition:transform .25s}.choice.active .emoji{transform:rotate(-7deg) scale(1.12)}.choice-wrap{margin-block:24px}.onboard-card h1{font-size:clamp(29px,3vw,38px);line-height:1.1}
/* Real storefronts at every address; the map's controls remain separate. */
.world-architecture{position:absolute;inset:0;z-index:13;pointer-events:none}.world-address{position:absolute;left:var(--address-x);top:var(--address-y);width:clamp(105px,14vw,167px);aspect-ratio:180/165;transform:translate(-50%,-57%)}.world-address svg{width:100%;height:100%;overflow:visible}.city-open-map .city-building,.city-open-map .city-neon-building,.city-open-map .campus-building,.city-open-map .work-building,.city-open-map .work-tower,.city-open-map .island-house{display:none}.city-open-map .city-poi{margin-top:40px;width:120px;min-height:60px}.city-open-map .poi-pin{width:33px;height:33px;font-size:17px;border-width:2px;border-radius:13px!important;box-shadow:0 3px 0 #354e3226}.city-open-map .poi-ring{width:43px;height:43px;animation:none;opacity:.45}.city-open-map .poi-name{font-size:10px;padding:5px 9px;max-width:130px;border-radius:8px;color:#304936;background:#fffef6f2}.city-poi.is-selected .poi-ring{box-shadow:0 0 0 7px #ffffff22}.city-open-map .city-poi.is-selected{transform:translate(-50%,-50%) scale(1.08)}.city-open-map .city-poi:hover{transform:translate(-50%,-50%) scale(1.06)}.city-open-map .city-poi:hover .poi-pin{transform:translateY(-2px)}.chimney-smoke{animation:chimney-rise 5s ease-out infinite;transform-origin:126px 8px}.address-neon{animation:neon-glow 4s ease-in-out infinite}.city-art-0 .city-island{background:radial-gradient(ellipse at 30% 30%,#b5d68a,#94bd6c);box-shadow:inset 0 0 0 5px #e8d797,inset 0 0 0 11px #c3d793;filter:drop-shadow(0 11px 0 #378b9855)}.city-art-1{background-color:#ceddbc}.city-art-5{background-color:#aec68e}.city-art-6{background-color:#aec6c7}.city-tree,.campus-tree{filter:none}.city-details{z-index:12}.city-water{background:repeating-radial-gradient(ellipse at 50% 40%,#71c4dc 0 4px,#77c7dc 5px 8px,#66bbd7 9px 34px)}
/* A centered invitation, with no animated full-screen blur. */
body.has-dialog{overflow:hidden}.place-backdrop{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:24px;background:#18382f7d;animation:place-fade .18s ease-out}.place-dialog{position:relative;width:min(790px,100%);max-height:calc(100dvh - 48px);overflow:auto;display:grid;grid-template-columns: .83fr 1fr;background:#fffff8;border-radius:30px;border:1px solid #e5ecd8;box-shadow:0 25px 90px #122a3040;animation:place-in .28s cubic-bezier(.22,1,.36,1);outline:none}.place-close{position:absolute;right:14px;top:14px;z-index:5;width:36px;height:36px;background:#eff3e6;border:1px solid #dce5d3;border-radius:50%;font-size:23px;color:#49613f}.place-dialog-art{position:relative;overflow:hidden;isolation:isolate;min-height:450px;background:#d4e5c1}.place-dialog-art .guide-tato{position:absolute;z-index:3;width:220px;height:242px;left:calc(50% - 110px);bottom:98px}.place-sun{position:absolute;top:65px;right:35px;width:120px;height:120px;border-radius:50%;background:#fae6a8}.place-hills{position:absolute;left:-30%;bottom:-70px;width:160%;height:60%;border-radius:50%;background:#9dbb79;box-shadow:80px -30px #bdd399}.place-city-label{position:absolute;left:22px;top:25px;right:15px;font:500 12px Fredoka;color:#4e7050}.place-prop{position:absolute;bottom:90px;right:20px;font-size:53px;z-index:4;rotate:8deg}.place-welcome{position:absolute;bottom:39px;left:0;right:0;text-align:center;z-index:4;font:500 22px Fredoka;color:#35513e}.place-art-1{background:#e7d7ba}.place-art-2{background:#b6dcd8}.place-art-3{background:#443b59}.place-art-3 .place-hills{background:#65607a;box-shadow:80px -30px #57516a}.place-art-3 .place-sun{background:#e7d8bd;width:70px;height:70px}.place-art-3 .place-city-label,.place-art-3 .place-welcome{color:#fcf0d8}.place-art-4{background:#c8dce1}.place-art-6{background:#c5d2d0}.place-dialog-content{padding:47px 32px 27px}.place-dialog-content .eyebrow{font-size:8px;letter-spacing:1.4px}.place-dialog h2{font:500 clamp(27px,3vw,36px)/1.05 Fredoka;color:#304c39;margin:12px 0 7px}.place-role{font-size:11px;color:#687c5c;margin:0 0 21px}.place-facts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.place-facts>span{display:flex;align-items:center;gap:6px;background:#edf3e4;border:1px solid #dde7d0;border-radius:9px;font-size:10px;padding:7px 9px;color:#49613e}.difficulty-bars{display:flex;align-items:end;gap:2px;height:13px}.difficulty-bars b{width:3px;height:5px;background:#c1ccba;border-radius:1px}.difficulty-bars b:nth-child(2){height:9px}.difficulty-bars b:nth-child(3){height:13px}.difficulty-bars b.filled{background:#648050}.place-dialog-content>p:not(.place-role){font-size:13px;line-height:1.75;color:#576b4d;margin:21px 0 14px}.place-skills{display:flex;gap:7px;flex-wrap:wrap}.place-skills span{font-size:10px;color:#5a7146}.place-dialog blockquote{margin:20px 0 24px;border-left:3px solid var(--place-accent);padding:5px 0 5px 12px;font:500 18px/1.4 Fredoka;color:#4f693f}.place-dialog blockquote small{display:block;font:700 7px 'DM Sans';letter-spacing:1px;margin-bottom:7px;color:#7b8a6e}.place-dialog .city-start-button{width:100%;font-size:12px;padding:14px 17px;display:flex;justify-content:space-between;align-items:center;border:0;background:#f8cc54;color:#3d4829}.place-dialog .destination-note{display:block;text-align:center;font-size:9px;color:#77846b;margin-top:15px}.place-close:focus-visible{outline:3px solid #54783f;outline-offset:3px}.profile-backdrop{backdrop-filter:none;animation:place-fade .18s ease-out}
@keyframes buddy-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes place-fade{from{opacity:0}to{opacity:1}}@keyframes place-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}@keyframes chimney-rise{from{opacity:0;transform:translateY(4px) scale(.8)}30%{opacity:.5}to{opacity:0;transform:translateY(-18px) scale(1.3)}}@keyframes neon-glow{0%,100%{opacity:.5}50%{opacity:1}}@keyframes spark-turn{to{transform:rotate(360deg)}}@keyframes hero-tato-breathe{0%,100%{translate:0 0}50%{translate:0 -5px}}@keyframes sign-sway{0%,100%{rotate:-1deg}50%{rotate:1deg}}@keyframes proof-light{0%,65%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@media(max-width:1100px){.onboarding-layout{gap:30px;grid-template-columns:280px minmax(340px,480px)}.onboarding-layout .onboard-card{padding:27px}.guide-postcard{height:300px}.guide-speech p{font-size:18px}.world-address{width:130px}.city-open-map .city-poi{margin-top:32px}.tato-buddy p{font-size:10px}}
@media(max-width:760px){.tato-buddy,.sidebar>.side-footer{display:none}.sidebar{flex-direction:row}.side-nav{margin-bottom:0}.onboarding-layout{display:flex;flex-direction:column;gap:20px;min-height:100svh;padding:24px 18px}.onboarding-guide{max-width:510px;display:grid;grid-template-columns:100px 1fr;gap:0 12px;align-items:center}.guide-postcard{height:115px;border-width:3px;border-radius:40px 40px 18px 18px;box-shadow:none}.guide-postcard .guide-tato{width:96px;height:106px;left:calc(50% - 48px);bottom:0}.guide-postmark,.guide-orbit,.guide-postcard-caption{display:none}.guide-postcard:before{width:50px;height:50px;top:10px;right:5px}.guide-speech{margin:0;padding:15px;min-height:0;box-shadow:none;border-radius:17px}.guide-speech:before{left:-8px;top:40px;rotate:-45deg}.guide-speech>span{font-size:7px;letter-spacing:1px}.guide-speech p{font-size:16px;margin-top:6px}.guide-journey{grid-column:1/-1;margin-top:18px}.onboarding-layout .onboard-card{max-width:510px;padding:25px 22px}.onboard-card h1{font-size:29px}.world-address{width:110px}.city-open-stage{min-height:620px}.city-open-map .city-poi{margin-top:32px}.city-open-map .poi-name{font-size:9px;max-width:105px}.city-open-map .poi-pin{width:29px;height:29px;font-size:15px}.city-open-map .poi-ring{width:36px;height:36px}.city-open-title h1{font-size:28px}.city-open-instruction{top:105px}.place-backdrop{padding:16px}.place-dialog{width:min(440px,100%);grid-template-columns:1fr;max-height:calc(100dvh - 32px);border-radius:24px}.place-dialog-art{min-height:153px;height:153px}.place-dialog-art .guide-tato{width:128px;height:141px;left:calc(50% - 64px);bottom:-6px}.place-city-label{top:18px;left:17px;font-size:11px;max-width:95px;line-height:1.5}.place-sun{width:90px;height:90px;top:20px;right:52px}.place-prop{bottom:20px;right:33px;font-size:38px}.place-welcome{display:none}.place-close{width:32px;height:32px;top:11px;right:11px;background:#fffef5df}.place-dialog-content{padding:23px}.place-dialog h2{font-size:29px}.place-role{margin-bottom:15px}.place-dialog-content>p:not(.place-role){margin:15px 0 12px;font-size:12px}.place-dialog blockquote{margin:16px 0 21px;font-size:17px}.place-dialog .destination-note{font-size:8px}}
.baggage-case{animation:baggage-rock 5s ease-in-out infinite;transform-origin:58px 87px}@keyframes baggage-rock{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@media(max-width:760px){.sidebar{backdrop-filter:none}.tato-buddy{display:flex;position:fixed;bottom:16px;right:15px;z-index:90;flex-direction:column-reverse;width:240px;padding:0;pointer-events:none}.buddy-toggle{pointer-events:auto;width:63px;height:65px;margin-left:auto;justify-content:center;border:1px solid #d3e1c5;border-radius:23px;background:#fffef2;box-shadow:0 4px 0 #c6d7b5}.buddy-toggle>.guide-tato{width:57px;height:63px}.buddy-toggle>span{display:none}.tato-buddy p{pointer-events:auto;margin-bottom:10px;background:#fffef6;padding:14px;border-radius:18px 18px 4px 18px;font-size:12px;box-shadow:0 5px 20px #2943331a}.tato-buddy p[hidden]{display:none}body[data-screen=session] .tato-buddy,body.has-dialog .tato-buddy{visibility:hidden}body[data-tab=city] .tato-buddy{bottom:88px}.place-backdrop{z-index:300}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.guide-character,.guide-eyes,.guide-wave,}
.plans-section{max-width:1180px;margin:0 auto;padding:112px 32px 108px;border-top:1px solid var(--line)}
.plans-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:38px}.plans-heading h2{font:600 clamp(40px,5vw,64px)/.98 Fredoka;letter-spacing:-1.8px;margin:15px 0 0}.plans-heading h2 em{color:#d8a700;font-style:normal}.plans-heading>p{max-width:300px;color:var(--muted);line-height:1.55;margin:0 0 5px}.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.plan-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px;display:flex;flex-direction:column;min-height:390px;box-shadow:0 7px 0 #f0e4bd}.plan-card.plan-featured{background:#fff8dd;border:2px solid var(--yellow-deep);transform:translateY(-10px);box-shadow:0 10px 0 #e2c158}.plan-kicker{font:600 11px Fredoka;letter-spacing:1.3px;color:#a57a00}.plan-card h3{font:500 30px Fredoka;margin:18px 0 5px}.plan-price{font:600 31px Fredoka;color:var(--ink);margin:0 0 12px}.plan-price small{font:500 13px 'DM Sans';color:var(--muted)}.plan-card>p:not(.plan-price){color:var(--muted);line-height:1.5;margin:0}.plan-card ul{list-style:none;padding:0;margin:22px 0 25px;display:grid;gap:11px;color:var(--ink);font-size:14px}.plan-card li:before{content:'✓';color:#74a94d;font-weight:700;margin-right:9px}.plan-card .btn{margin-top:auto}.plan-badge{position:absolute;right:20px;top:-14px;padding:7px 11px;border-radius:999px;background:var(--yellow);color:#6b5000;font:700 10px Fredoka;letter-spacing:.5px}.plans-note{text-align:center;color:var(--muted);font-size:13px;margin:28px 0 0}.is-loading{opacity:.7;cursor:wait}
/* Mensal/Anual (landing e paywall) e a linha "cobrado por ano" embaixo do preço. */
.bill-toggle{display:flex;width:max-content;max-width:100%;margin:0 auto 22px;padding:4px;gap:4px;border-radius:999px;background:rgba(28,58,43,.08);border:1px solid rgba(28,58,43,.1)}
.bill-toggle button{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:inherit;font:600 14px/1 'DM Sans',sans-serif;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.bill-toggle button b{padding:4px 7px;border-radius:999px;background:#dff0cf;color:#2d5a1f;font-size:11.5px}
.bill-toggle button[aria-pressed="true"]{background:#1c3a2b;color:#fbf6ea;box-shadow:0 6px 14px -8px rgba(28,58,43,.7)}
.bill-toggle button[aria-pressed="true"] b{background:#f8c637;color:#1c3a2b}
.bill-toggle button:focus-visible{outline:3px solid #f8c637;outline-offset:2px}
.plan-bill{margin:-6px 0 14px;font:500 12.5px/1.35 'DM Sans',sans-serif;color:#6b7a70}
.plan-bill b{color:#2d5a1f;font-weight:700}
:root[data-theme="dark"] .bill-toggle{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}
:root[data-theme="dark"] .bill-toggle button[aria-pressed="true"]{background:#f8c637;color:#1c3a2b}
:root[data-theme="dark"] .plan-bill{color:#b8c2bb}
:root[data-theme="dark"] .plan-bill b{color:#bfe3a3}
@media(prefers-reduced-motion:reduce){.bill-toggle button{transition:none}}@media(max-width:760px){.plans-section{padding:78px 20px}.plans-heading{display:block}.plans-heading>p{margin-top:20px}.plans-grid{grid-template-columns:1fr;gap:24px}.plan-card.plan-featured{transform:none}}

/* Welcome to Plus/Pro: the celebration after a confirmed subscription. */
.wl-backdrop { position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:20px; overflow-y:auto;
  background:radial-gradient(circle at 50% 40%,#2c523d99,#0d1c14e6); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  animation:wlFade .35s ease-out both; }
.wl-backdrop.wl-plan-pro { background:radial-gradient(circle at 50% 40%,#3a2d6ab3,#0c0a1ceb); }
.wl-dialog { --wl-accent:#f8c637; --wl-ink:#1f3d2e; position:relative; width:min(100%,470px); margin:70px 0 20px; padding:84px 28px 22px;
  text-align:center; color:var(--wl-ink); background:linear-gradient(180deg,#fffaf0,#fff4d6); border-radius:34px;
  box-shadow:0 40px 90px -40px #000c, 0 0 0 1px #ffffffb3 inset; isolation:isolate;
  animation:wlPop .7s cubic-bezier(.34,1.56,.64,1) both; }
.wl-plan-pro .wl-dialog { --wl-ink:#fff4d9; background:linear-gradient(180deg,#2d2451,#1d1737); box-shadow:0 40px 90px -40px #000, 0 0 0 1px #f8c63740 inset; }
.wl-burst { position:absolute; left:50%; top:0; width:0; height:0; z-index:-1; pointer-events:none; }
.wl-rays { position:absolute; left:-230px; top:-230px; width:460px; height:460px; border-radius:50%;
  background:repeating-conic-gradient(from 0deg,#ffe38a55 0 9deg,transparent 9deg 24deg);
  -webkit-mask-image:radial-gradient(circle,#000 18%,transparent 68%); mask-image:radial-gradient(circle,#000 18%,transparent 68%);
  animation:wlRaysIn .8s .1s ease-out both, wlSpin 24s linear infinite; }
.wl-ring { position:absolute; left:-80px; top:-80px; width:160px; height:160px; border:3px solid var(--wl-accent); border-radius:50%; opacity:0; animation:wlRing 1.1s .15s cubic-bezier(.22,1,.36,1) both; }
.wl-ring.is-late { animation-delay:.45s; border-width:2px; }
.wl-confetti { position:absolute; left:50%; top:10px; width:0; height:0; pointer-events:none; z-index:3; }
.wl-confetti i { position:absolute; left:-4px; top:-6px; width:8px; height:12px; border-radius:2px; background:var(--c); opacity:0;
  animation:wlConfetti 2.4s var(--delay) cubic-bezier(.15,.7,.35,1) both; }
.wl-confetti i.is-round { width:9px; height:9px; border-radius:50%; }
.wl-confetti i.is-long { width:5px; height:16px; }
.wl-tato { position:absolute; left:50%; top:-78px; width:150px; aspect-ratio:200/220; transform:translateX(-50%); filter:drop-shadow(0 18px 18px #0006); animation:wlTato .9s .15s cubic-bezier(.34,1.56,.64,1) both; }
.wl-tato>.guide-tato { position:static; width:100%; height:100%; max-width:none; }
.wl-badge { position:relative; display:inline-flex; align-items:center; gap:7px; padding:7px 14px 7px 10px; overflow:hidden; border-radius:999px;
  color:#3b2a05; background:linear-gradient(180deg,#ffe38a,#f8c637); box-shadow:0 6px 16px -8px #a8711a, inset 0 -2px 0 #d9a42a;
  font:800 12px/1 'DM Sans',sans-serif; letter-spacing:1.4px; text-transform:uppercase; animation:wlRise .5s .45s both; }
.wl-badge svg { width:15px; height:15px; fill:#3b2a05; }
.wl-badge::after { content:""; position:absolute; top:0; bottom:0; left:-40%; width:30%; background:linear-gradient(90deg,transparent,#fffbe6d9,transparent); transform:skewX(-20deg); animation:wlShine 2.8s 1.1s ease-in-out infinite; }
.wl-dialog h2 { margin:14px 0 8px; font:600 clamp(30px,6vw,38px)/1.05 'Fredoka',sans-serif; letter-spacing:-.8px; color:inherit; animation:wlRise .55s .55s both; }
.wl-dialog>p { max-width:34ch; margin:0 auto 18px; font:500 15px/1.5 'DM Sans',sans-serif; opacity:.82; animation:wlRise .55s .65s both; }
.wl-perks { display:grid; gap:8px; margin:0 0 18px; padding:0; list-style:none; text-align:left; }
.wl-perks li { display:flex; align-items:center; gap:10px; padding:10px 13px; border-radius:15px; background:#ffffffb3; font:600 14px/1.35 'DM Sans',sans-serif;
  box-shadow:0 1px 0 #e8d9ab; animation:wlRise .5s calc(.8s + var(--i) * .12s) both; }
.wl-plan-pro .wl-perks li { background:#ffffff12; box-shadow:0 1px 0 #ffffff14; }
.wl-perks svg { flex-shrink:0; width:22px; height:22px; padding:4px; border-radius:50%; fill:none; stroke:#1f3d2e; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; background:var(--wl-accent); }
.wl-cities { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; margin:0 0 20px; }
.wl-city { display:grid; justify-items:center; gap:5px; min-width:0; }
.wl-city small { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 9.5px/1.2 'DM Sans',sans-serif; opacity:.75; }
.wl-city__icon { position:relative; width:42px; height:42px; border-radius:50%; background:#24493a14; animation:wlCityPulse .6s calc(1.35s + var(--i) * .14s) both; }
.wl-plan-pro .wl-city__icon { background:#ffffff17; }
.wl-city__icon i { position:absolute; inset:0; display:grid; place-items:center; }
.wl-city__icon svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.wl-city__lock { opacity:.55; animation:wlUnlock .45s calc(1.3s + var(--i) * .14s) both; }
.wl-city__glyph { opacity:0; animation:wlGlyph .5s calc(1.42s + var(--i) * .14s) cubic-bezier(.34,1.56,.64,1) both; }
.wl-primary { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:56px; padding:14px 20px; border:0; border-radius:18px; cursor:pointer;
  color:#1c3a2b; background:linear-gradient(180deg,#ffdc6c,#f8c637); box-shadow:0 5px 0 #c9971f,0 18px 30px -16px #9c6b17;
  font:800 16px/1.2 'DM Sans',sans-serif; animation:wlRise .5s 2.2s both; transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s; }
.wl-primary b { transition:transform .25s cubic-bezier(.34,1.56,.64,1); }
.wl-primary:hover { transform:translateY(-2px); box-shadow:0 7px 0 #c9971f,0 20px 32px -16px #9c6b17; }
.wl-primary:hover b { transform:translateX(4px); }
.wl-primary:active { transform:translateY(3px); box-shadow:0 2px 0 #c9971f; }
.wl-secondary { min-height:46px; margin-top:6px; padding:10px 14px; border:0; background:none; color:inherit; opacity:.8; cursor:pointer; font:700 14px 'DM Sans',sans-serif; text-decoration:underline; text-underline-offset:4px; animation:wlRise .5s 2.3s both; }
.wl-secondary:hover { opacity:1; }
.wl-dialog :focus-visible { outline:3px solid #24493a; outline-offset:3px; }
.wl-plan-pro .wl-dialog :focus-visible { outline-color:#ffdd8a; }
@keyframes wlFade { from { opacity:0; } }
@keyframes wlPop { 0% { opacity:0; transform:translateY(40px) scale(.82); } 60% { opacity:1; transform:translateY(-6px) scale(1.03); } 100% { transform:none; } }
@keyframes wlRaysIn { from { opacity:0; scale:.4; } }
@keyframes wlSpin { to { transform:rotate(360deg); } }
@keyframes wlRing { 0% { opacity:.9; transform:scale(.3); } 100% { opacity:0; transform:scale(2.4); } }
@keyframes wlConfetti { 0% { opacity:0; transform:translate(0,0) rotate(0); } 8% { opacity:1; } 45% { transform:translate(var(--dx),var(--dy)) rotate(calc(var(--spin) * .5)); } 100% { opacity:0; transform:translate(calc(var(--dx) * 1.15),calc(var(--dy) + 420px)) rotate(var(--spin)); } }
@keyframes wlTato { 0% { opacity:0; transform:translateX(-50%) translateY(50px) scale(.5); } 100% { opacity:1; transform:translateX(-50%); } }
@keyframes wlRise { from { opacity:0; transform:translateY(12px); } }
@keyframes wlShine { 0%,55% { left:-40%; } 85%,100% { left:130%; } }
@keyframes wlUnlock { 0% { opacity:.55; transform:none; } 60% { opacity:.9; transform:translateY(-3px) rotate(-14deg); } 100% { opacity:0; transform:translateY(-10px) scale(.4); } }
@keyframes wlGlyph { from { opacity:0; transform:scale(.3); } to { opacity:1; transform:none; } }
@keyframes wlCityPulse { 0% { box-shadow:0 0 0 0 #f8c637; background-color:transparent; } 50% { background-color:#f8c637; } 100% { box-shadow:0 0 0 12px #f8c63700; background-color:var(--wl-city-done,#f8c63740); } }
.wl-plan-pro .wl-dialog { --wl-city-done:#ffffff1f; }
.wl-plan-pro .wl-city__glyph { color:#ffe38a; }
@media(max-width:480px) {
  .wl-dialog { padding:74px 16px 16px; border-radius:28px; margin-top:62px; }
  .wl-tato { width:128px; top:-68px; }
  .wl-perks li { font-size:13.5px; padding:9px 11px; }
  .wl-cities { grid-template-columns:repeat(4,minmax(0,1fr)); row-gap:10px; }
  .wl-city small { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) {
  .wl-backdrop,.wl-dialog,.wl-tato,.wl-badge,.wl-dialog h2,.wl-dialog>p,.wl-perks li,.wl-city__icon,.wl-primary,.wl-secondary,.wl-ring { animation:none; }
  .wl-rays { animation:none; }
  .wl-badge::after,.wl-confetti { display:none; }
  .wl-city__lock { animation:none; opacity:0; }
  .wl-city__glyph { animation:none; opacity:1; }
  .wl-primary,.wl-primary b { transition:none; }
}/* Final visual layer: editorial landing + cohesive product surfaces. */
:root{--cream:#f9f8f3;--ink:#283126;--muted:#626b5d;--line:#dde2d5;--radius:22px;--ease-out:cubic-bezier(.2,.75,.25,1)}
body{background:var(--cream)}.topbar-premium{position:sticky;top:0;max-width:1360px;background:#f9f8f3ed;backdrop-filter:blur(18px);padding:19px 48px;border-bottom:1px solid #e1e4d78c;z-index:30}.topbar-premium .brand{font-size:29px}.topbar-premium .brand-mark{width:40px;height:42px}.nav{gap:27px}.nav a{font-size:13px}.nav .btn{font-size:13px;min-height:46px}.nav .nav-auth{box-shadow:none;color:#4f5b46;padding:10px 5px;background:transparent}.premium-page{max-width:1320px;padding:0 48px}.eyebrow{font-size:11px;letter-spacing:1.6px}.hero-premium{grid-template-columns:1.04fr 1fr;gap:60px;padding:58px 0 52px;align-items:center}.hero-copy{padding-bottom:12px;min-width:0}.hero-copy .eyebrow{font-size:10px}.hero-copy h1{font-size:clamp(49px,5.1vw,70px);line-height:1.055;letter-spacing:-2.4px;font-weight:500;max-width:570px;margin:27px 0 25px;text-wrap:pretty}.hero-word-slot{display:block;min-height:1.13em}.hero-copy h1 em.hero-swap-word{position:relative;display:inline-block;color:#966c00;white-space:nowrap;font-style:normal;z-index:0}.hero-copy h1 em.hero-swap-word:after{content:'';position:absolute;left:-2px;right:-6px;bottom:3px;height:35%;background:#f7d86b;border:0;border-radius:7px 3px 8px 2px;transform:rotate(-2deg);z-index:-1}.hero-copy p{font-size:16px;max-width:425px;line-height:1.85}.hero-copy .actions{gap:27px;margin-top:29px}.hero-copy .btn{font-size:15px;padding:16px 24px;min-height:55px}.hero-how{font-size:13px}.hero-note{font-size:12px;gap:24px;margin-top:27px}.hero-note svg{width:16px;height:16px}.hero-demo{position:relative;min-width:0;border:1px solid #d8dfcf;border-radius:25px;background:#fffef8;padding:9px;box-shadow:0 18px 45px #35462a0d;animation:enter .8s .1s both}.demo-toolbar{height:39px;display:flex;justify-content:space-between;align-items:center;padding:0 13px 8px;gap:10px;font-size:8px;font-weight:700;letter-spacing:1.15px;color:#66735a}.demo-toolbar>span:first-child{display:flex;align-items:center;gap:7px}.demo-toolbar i{width:6px;height:6px;background:#799457;border-radius:50%}.demo-count{font-variant-numeric:tabular-nums;white-space:nowrap}.hero-demo .conversation-stage{height:485px;max-width:none;width:100%;border-radius:17px;margin:0;background:#e6c187;box-shadow:inset 0 0 0 1px #b9995d30;animation:none;overflow:hidden;isolation:isolate;transition:background .7s ease}.hero-demo .stage-label{top:16px;font-size:7px;letter-spacing:1.5px;color:#624f34;z-index:5}.hero-demo .cafe-window{height:205px;width:58%;left:21%;top:53px;border-width:7px;border-radius:100px 100px 4px 4px;transition:background .6s,border-radius .6s,transform .6s}.hero-demo .window-frame:after{top:91px}.hero-demo .cafe-sign{top:84px;left:8%;font-size:25px;padding:11px 14px;z-index:4;transition:background .6s,color .6s}.hero-demo .cafe-sign span{font-size:6px;letter-spacing:.7px}.hero-demo .stage-doodle{display:none}.hero-demo .tato-small{top:172px;left:calc(50% - 76px);width:152px;height:158px;z-index:4;box-shadow:inset -12px -7px 0 #c99140}.hero-demo .tato-small .mouth{top:84px}.tato-outfit{position:absolute;bottom:0;left:16px;right:16px;height:45px;border:2px solid #445b3d;background:#789063;border-radius:12px 12px 24px 24px;z-index:2}.tato-outfit:before,.tato-outfit:after{content:'';position:absolute;top:-13px;height:19px;width:9px;background:inherit;border:2px solid #445b3d;border-bottom:0}.tato-outfit:before{left:15px}.tato-outfit:after{right:15px}.tato-outfit i{position:absolute;left:calc(50% - 12px);top:8px;width:24px;height:16px;border:1px solid #4b643e;border-radius:0 0 8px 8px}.hero-demo .cafe-counter{top:299px;height:25px;z-index:5;background:#a17a51;border-top:5px solid #735637;transition:background .6s}.hero-demo .coffee-cup{top:262px;right:48px;z-index:6}.hero-demo .live-card{left:16px;right:16px;top:318px;border:1px solid #dedfce;border-radius:14px;transform:none;box-shadow:0 8px 20px #4b3a1a12;padding:13px 16px;z-index:7}.hero-demo .live-head{font-size:10px;line-height:1.4}.hero-demo .demo-label{font-size:7px}.hero-demo .bubble{font-size:12px;padding:9px 12px;margin-top:8px;max-width:94%;line-height:1.3}.hero-demo .bubble-name{display:inline;margin-right:8px;font-size:7px}.hero-demo .bubble-tato{border-radius:9px 9px 9px 2px}.hero-demo .bubble-user{border-radius:9px 9px 2px 9px}.hero-demo .live-foot{margin-top:8px;gap:9px}.demo-state-label{font-size:8px;color:#657158;white-space:nowrap}.hero-demo .voice-line{height:25px;max-width:180px;margin-left:auto}.hero-demo .voice-line i{width:2px;height:calc(var(--h)*.65);background:#789063}.hero-demo .demo-toggle,.demo-reset{width:30px;height:30px;min-width:30px;border-radius:50%;font-size:11px;transition:transform .2s,background .2s}.demo-reset{background:#eff0e5;color:#657354;font-size:18px}.demo-reset:hover{background:#e0e7cd;transform:rotate(-35deg)}.demo-state-label+.voice-line{flex:1}.hero-demo .stage-sticker{top:228px;right:11px;padding:11px;font-size:10px;z-index:6;border-color:#bd9d4c;background:#f7dc7b;border-radius:3px;transform:rotate(8deg);box-shadow:2px 4px 0 #b79b5720}.hero-demo .stage-sticker>span{font-size:26px;right:5px;top:-15px}.hero-demo .stage-caption{display:none}.hero-role-chip{right:13px;top:159px;font-size:7px;padding:6px 9px;box-shadow:none;z-index:6;max-width:148px;background:#fff9e9}.hero-role-chip span{font-size:12px}.scenario-selector{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:11px 3px 4px}.scenario-selector button{display:flex;align-items:center;justify-content:center;gap:7px;background:transparent;padding:11px 5px;min-height:42px;border-radius:9px;font-size:11px;font-weight:600;color:#6e7865;border:1px solid transparent;transition:background .2s,color .2s,border-color .2s}.scenario-selector button:hover{background:#f1f3e8}.scenario-selector button[aria-pressed=true]{background:#ecf0df;color:#415735;border-color:#d8e0c7}.demo-progress{height:2px;overflow:hidden;margin:5px 8px 0;border-radius:2px;background:#edf0e5}.demo-progress i{display:block;width:100%;height:100%;background:#9ba981;transform-origin:left;transform:scaleX(var(--chapter-progress,.25));transition:transform .6s ease}.demo-is-paused .demo-progress i{animation-play-state:paused;opacity:.45}
/* Each location has its own setting and the Tato's own outfit. */
.scene-props>div{position:absolute;transition:opacity .5s,transform .6s;pointer-events:none}.prop-pendant{top:29px;right:62px;width:45px;height:35px;background:#576849;clip-path:polygon(44% 0,56% 0,57% 40%,100% 100%,0 100%,43% 40%);z-index:3}.prop-clock{width:36px;height:36px;border-radius:50%;border:3px solid #a17a49;background:#fff2d7;left:22px;top:190px;z-index:3}.prop-clock:before,.prop-clock:after{content:'';position:absolute;left:15px;top:7px;width:2px;height:10px;background:#756043;transform-origin:bottom}.prop-clock:after{transform:rotate(115deg)}.prop-board,.prop-suitcase,.prop-hotel,.prop-monitor,.prop-laptop{opacity:0;transform:translateY(7px);z-index:3}.prop-board{left:16px;top:143px;width:127px;padding:9px 11px;border:2px solid #4a6372;background:#304c5a;color:#f6ecc6;border-radius:4px}.prop-board>span{font-size:7px;letter-spacing:1.5px}.prop-board b{font-size:8px;letter-spacing:.8px;display:flex;justify-content:space-between;padding-top:7px;font-weight:500}.prop-board b i{font-style:normal;color:#f7d878}.prop-board small{font-size:5px;display:block;margin-top:10px;letter-spacing:.5px}.prop-suitcase{bottom:184px;left:33px;width:48px;height:57px;border:3px solid #5c707b;background:#adb8ae;border-radius:8px;box-shadow:inset 7px 0 0 #c3ccbb}.prop-suitcase:before{content:'';position:absolute;left:12px;top:-18px;width:16px;height:14px;border:3px solid #5c707b;border-bottom:0;border-radius:4px 4px 0 0}.prop-suitcase:after{content:'';position:absolute;bottom:-7px;left:6px;width:7px;height:7px;background:#5c707b;border-radius:50%;box-shadow:23px 0 0 #5c707b}.prop-hotel{left:22px;top:153px;width:97px;height:108px;text-align:center;padding:18px 5px;background:#765b72;border:4px solid #d8b77c;color:#fff0d0;border-radius:50px 50px 4px 4px}.prop-hotel span{font-size:7px;letter-spacing:2px}.prop-hotel b{display:block;font:400 20px Fredoka;margin-top:5px}.prop-hotel small{font-size:9px;display:block;margin-top:6px;color:#e7c583}.prop-plant{right:23px;top:251px;width:33px;height:45px;border:2px solid #987350;border-radius:3px 3px 10px 10px;background:#b88361;z-index:3}.prop-plant i{position:absolute;width:20px;height:46px;left:10px;top:-44px;background:#6f8555;border:1px solid #5e7546;border-radius:80% 10%;transform:rotate(15deg);transform-origin:bottom}.prop-plant i:nth-child(2){transform:rotate(-40deg);height:37px;top:-34px}.prop-plant i:nth-child(3){transform:rotate(45deg);height:33px;top:-32px}.prop-monitor{top:149px;left:20px;width:117px;height:92px;background:#f6f3da;border:4px solid #64765c;border-bottom-width:8px;border-radius:5px;padding:9px}.prop-monitor span{font-size:7px;letter-spacing:1px;color:#5e744e}.prop-monitor i{width:17px;height:19px;background:#a4b77f;position:absolute;bottom:10px;left:16px}.prop-monitor i:nth-of-type(2){height:28px;left:42px;background:#c4b76d}.prop-monitor i:nth-of-type(3){height:40px;left:68px;background:#7c965b}.prop-laptop{top:259px;right:22px;width:76px;height:40px;border:3px solid #68755c;background:#c4d1b5;border-radius:4px;z-index:6;transform:rotate(-5deg)}.prop-laptop:after{content:'';position:absolute;left:-7px;bottom:-6px;width:84px;height:4px;background:#68755c;border-radius:3px}.hero-demo [data-scene=airport]{background:#cedde2}.hero-demo [data-scene=airport] .cafe-window{border-radius:12px;width:76%;left:12%;background:#deebef}.hero-demo [data-scene=airport] .window-hill{height:55px;border-radius:0;background:#9eb3b5;bottom:0;transform:none}.hero-demo [data-scene=airport] .window-hill:after{height:3px;top:24px;border-radius:0;background:#f5edd3;transform:rotate(-8deg);left:0}.hero-demo [data-scene=airport] .window-sun{background:#f2da88;width:40px;height:40px}.hero-demo [data-scene=airport] .cafe-sign{top:71px;left:26px;background:#f5f3e5;transform:rotate(-3deg);font-size:25px;color:#405f6b}.hero-demo [data-scene=airport] .cafe-counter{background:#90a5ad;border-color:#6a828d}.hero-demo [data-scene=airport] .tato-outfit{background:#688998;border-color:#415f6b}.hero-demo [data-scene=airport] .tato-outfit:before,.hero-demo [data-scene=airport] .tato-outfit:after{display:none}.hero-demo [data-scene=airport] .tato-outfit i{background:#ecdfae;width:13px;height:8px;left:12px;top:11px;border:0;border-radius:2px}.hero-demo [data-scene=airport] .prop-board,.hero-demo [data-scene=airport] .prop-suitcase{opacity:1;transform:none}.hero-demo [data-scene=airport] .prop-pendant,.hero-demo [data-scene=airport] .prop-clock,.hero-demo [data-scene=airport] .coffee-cup,.hero-demo [data-scene=airport] .prop-plant{opacity:0}.hero-demo [data-scene=hotel]{background:#d9c5d4}.hero-demo [data-scene=hotel] .cafe-window{border-color:#efdfcc;border-radius:110px 110px 4px 4px;background:#ece3cb}.hero-demo [data-scene=hotel] .window-hill{background:#b2a0ad}.hero-demo [data-scene=hotel] .cafe-sign{background:#fff2da;color:#705769;transform:rotate(-4deg);font-size:23px}.hero-demo [data-scene=hotel] .cafe-counter{background:#a38697;border-color:#725966}.hero-demo [data-scene=hotel] .tato-outfit{background:#7d6275;border-color:#564651}.hero-demo [data-scene=hotel] .tato-outfit:before,.hero-demo [data-scene=hotel] .tato-outfit:after{display:none}.hero-demo [data-scene=hotel] .tato-outfit i{background:#e6c674;left:48%;width:5px;height:5px;border:0;box-shadow:0 9px 0 #e6c674}.hero-demo [data-scene=hotel] .prop-hotel{opacity:1;transform:none}.hero-demo [data-scene=hotel] .prop-clock,.hero-demo [data-scene=hotel] .coffee-cup{opacity:0}.hero-demo [data-scene=meeting]{background:#d8dfc8}.hero-demo [data-scene=meeting] .cafe-window{border-radius:8px;border-color:#eef0da;background:#dae7d2}.hero-demo [data-scene=meeting] .window-hill{background:#9bb78b}.hero-demo [data-scene=meeting] .cafe-sign{background:#f6f7e7;color:#5a714b;font-size:24px;transform:rotate(-2deg)}.hero-demo [data-scene=meeting] .cafe-counter{background:#a6ad86;border-color:#6f7e57}.hero-demo [data-scene=meeting] .prop-monitor,.hero-demo [data-scene=meeting] .prop-laptop{opacity:1;transform:none}.hero-demo [data-scene=meeting] .prop-clock,.hero-demo [data-scene=meeting] .coffee-cup{opacity:0}.hero-demo [data-scene=meeting] .tato-outfit{background:#f0e5be;border-color:#8e805a}.hero-demo [data-scene=meeting] .tato-outfit:before,.hero-demo [data-scene=meeting] .tato-outfit:after{display:none}.hero-demo [data-scene=meeting] .tato-outfit i{width:10px;height:25px;left:calc(50% - 5px);top:0;background:#6b8054;clip-path:polygon(0 0,100% 0,80% 28%,100% 80%,50% 100%,0 80%,20% 28%);border:0}.proof-strip{padding:27px 0 29px;gap:20px}.proof-strip span{font-size:12px}.proof-strip strong{font-size:14px}.proof-strip svg{width:27px;height:27px}.experience{padding:100px 0;gap:70px}.experience h2,.scenes h2{font-size:clamp(37px,4.1vw,55px);letter-spacing:-1.4px}.experience-lead p{font-size:15px;max-width:380px}.text-link{font-size:13px;gap:15px}.flow-item{padding:25px 0;gap:20px}.flow-item h3{font-size:23px}.flow-item p{font-size:13px;line-height:1.75}.flow-mark{background:#ecf0e2;color:#687b50;width:32px;height:32px;display:grid;place-items:center;border-radius:10px;padding:0}.scenes{padding:52px 32px 25px;background:#edf0e6;border-color:#e0e5d7;border-radius:26px}.scenes-head>p{font-size:14px}.scene{border-radius:17px;border-color:#d7dfce;box-shadow:0 4px 12px #31402103}.scene-top{font-size:9px;letter-spacing:.6px;padding:19px 20px 0}.scene-art{height:210px}.scene-body{padding:24px 22px 18px}.scene-category{font-size:9px}.scene-body h3{font-size:29px;line-height:1.12;min-height:65px;max-width:250px;letter-spacing:-.6px}.scene-body p{font-size:13px;line-height:1.75;min-height:46px}.scene-body button{font-size:12px;line-height:1.5;min-height:52px;margin-top:21px;gap:12px}.scene-body button>span{width:32px;height:32px;flex-shrink:0}.scene-symbol{scale:1.12}.scenes-bottom{padding-top:22px}.scenes-bottom>span,.scenes-bottom .text-link{font-size:12px}.final-cta{margin:78px 0 45px;padding:73px 30px;background:#2d3b2b}.final-cta:after{content:'';position:absolute;width:360px;height:360px;border:1px solid #c4d3a719;border-radius:50%;right:-110px;bottom:-100px;box-shadow:0 0 0 40px #c4d3a706,0 0 0 80px #c4d3a703;pointer-events:none}.final-cta p{font-size:15px}.final-cta .btn{font-size:14px}.cta-note{font-size:12px}.cta-doodle{opacity:.6}.site-footer{max-width:1320px}.site-footer>span,.site-footer>a{font-size:12px}.site-footer .copyright{font-size:11px}
/* Product: comfortable density, clear actions, and stronger hierarchy. */
.app-shell{grid-template-columns:224px minmax(0,1fr)}.sidebar{padding:30px 21px;background:#f0f3e9}.side-nav{gap:9px}.side-nav button{font-size:14px;border:1px solid transparent}.side-nav button.active{border-color:#e4b936;background:#f7cf53;color:#354a2c;box-shadow:0 3px 0 #d8ad35}.main{max-width:1390px;padding:42px 40px 70px}.app-head .eyebrow{font-size:10px}.app-head h1{font-size:44px}.app-head .sub{font-size:15px}.avatar{transition:transform .2s,box-shadow .2s}.avatar:hover{transform:rotate(-7deg);box-shadow:0 4px 0 #d8bc56}.dashboard{grid-template-columns:minmax(0,1.5fr) minmax(270px,1fr)}.home-feature{background:#34452e;color:#f8f6e8;display:flex;min-height:310px;border:1px solid #2c3e26;position:relative;padding:30px}.home-feature-copy{position:relative;z-index:2;max-width:72%}.home-feature .eyebrow{color:#ced9b8;font-size:9px}.home-feature h2{font-size:36px;font-weight:500;line-height:1.08;letter-spacing:-.7px}.home-feature p{color:#d0d9c1;font-size:13px;max-width:290px}.home-feature .btn{font-size:12px;gap:12px;padding:14px 17px}.home-feature-art{position:absolute;right:-15px;top:35px;width:165px;height:250px;border-radius:100px 100px 0 0;background:#44573a;border:1px solid #61734b}.home-feature-art .tato-small{top:45px;left:20px;transform:scale(.75);transform-origin:top left;animation:none}.home-feature-art>span{position:absolute;top:174px;left:21px;font:400 20px/1.1 Fredoka;transform:rotate(-7deg);color:#ced8b0}.rhythm-card h2{font-size:28px}.rhythm-card .eyebrow{font-size:9px}.rhythm-card .stat-row{margin-top:20px}.rhythm-card .stat strong{font-size:47px}.rhythm-card .stat span{font-size:12px}.rhythm-note{display:flex;align-items:center;gap:10px;background:#f1f4e9;padding:12px;border-radius:10px;margin-top:23px;color:#6d8353}.rhythm-note p{font-size:12px;line-height:1.6;margin:0}.rhythm-note svg{flex-shrink:0}.rhythm-card .text-link{margin-top:10px;font-size:12px}.explore-panel{margin-top:38px}.panel-heading{display:flex;align-items:end;justify-content:space-between;gap:20px}.panel-heading .eyebrow{font-size:9px}.panel-heading h2{font:500 29px/1.15 Fredoka;letter-spacing:-.5px;margin:11px 0 0}.panel-heading .text-link{margin:0}.explore-panel .city-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.place{padding:25px;background:#fffef9}.place-icon{width:57px;height:57px;border-radius:18px;color:#786541}.place strong{font-size:23px;line-height:1.13;letter-spacing:-.3px}.place small{font-size:12px;line-height:1.6;display:block;min-height:38px}.place-open{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);margin-top:20px;padding-top:15px;font-size:12px;font-weight:600}.place:hover .place-open svg{transform:translateX(4px)}.place-open svg{transition:transform .2s}.screen{min-height:100svh;background:radial-gradient(ellipse at 0 0,#e3eace,transparent 60%),#f9f8f3}.auth-card,.onboard-card{padding:40px;box-shadow:0 14px 60px #2c3b2110;border-radius:26px;border-color:#d8dfcd}.onboard-card h1,.auth-card h1{font-size:42px;line-height:1.1}.screen .sub{font-size:14px}.choice{min-height:83px;border-radius:14px;padding:17px;transition:background .2s,transform .2s,border-color .2s;animation:enter .4s both;animation-delay:calc(var(--choice-index,0)*.055s)}.choice strong{font-size:20px}.choice small{font-size:12px}.choice.active{background:#eef4df;border-color:#83996a;box-shadow:inset 4px 0 0 #7b9560}.screen .full{min-height:52px;font-size:13px}.screen .back{font-size:13px}.progress{height:6px}.fine{font-size:12px;line-height:1.75}.city-page-head h1{font-weight:500!important;letter-spacing:-1.2px!important}.city-page-head p{font-size:14px}.city-tabs{padding-bottom:10px;scrollbar-width:thin;scrollbar-color:#b6c6a1 transparent}.city-tab{border-radius:15px!important;transition:transform .2s,border-color .2s,background .2s}.city-tab:hover{transform:translateY(-3px)}.city-tab.is-active{background:#edf3df!important;border-color:#93a876!important;box-shadow:0 3px 0 #c1cda7!important}.city-tab strong{font-size:16px!important}.city-tab small{font-size:10px!important}.city-map-shell,.city-detail{border-radius:20px!important;box-shadow:0 5px 18px #33422608!important;border-color:#dce1d2!important}.city-detail{background:#fffef8!important;padding:25px!important}.city-detail h2{font-size:29px!important;font-weight:500!important}.detail-block p{font-size:13px!important;line-height:1.75!important}.detail-support{background:#eef3e4!important;border-color:#dce5cd!important;padding:16px!important}.detail-support strong{font-size:19px!important;font-weight:500!important;line-height:1.4!important}.city-start-button{font:700 12px 'DM Sans',sans-serif!important;border-radius:12px!important;min-height:50px}.city-poi-row{border-radius:12px!important;min-height:74px;transition:transform .2s,background .2s}.city-poi-row:hover{transform:translateX(3px)}.city-poi-row.is-selected{background:#f0f5e7!important;border-color:#9eaf83!important}.city-view-switch{border:1px solid #d9dfcf!important;background:#f1f4e9!important;padding:4px!important;border-radius:12px!important}.city-view-switch button{border-radius:9px!important;min-height:37px}.city-view-switch button.is-active{background:#fffef7!important;color:#415c32!important;box-shadow:0 2px 5px #24311b0b!important}.session-header{gap:20px}.session-header-copy h1{font-weight:500}.session-header-copy p{font-size:14px;line-height:1.7}.session-kicker{font:700 9px 'DM Sans',sans-serif;color:#697f51}.session-progress{height:5px;background:#e8eddc}.session-progress span{background:#8ba365}.session-scene-panel,.session-console{border-radius:20px;box-shadow:0 6px 20px #35452707;border-color:#dce3d0;background:#fffef8}.session-console{padding:23px}.session-message{border-radius:13px!important}.session-message p{font-size:14px!important;line-height:1.7!important}.session-message.is-tato{background:#edf2e4}.session-message.is-user{background:#fcf0c8}.session-console-head strong{font-size:24px;font-weight:500}.session-form label{font-size:12px}.session-input-row input{min-width:0;min-height:48px;border-radius:11px}.session-input-row input:focus{outline:2px solid #85996b;outline-offset:2px}.session-pause,.session-send,.session-finish{min-height:42px;border-radius:10px;font:600 12px 'DM Sans',sans-serif}.session-suggestions button{font-size:12px;line-height:1.6;text-align:left}.session-scene-note small{font-size:11px;line-height:1.7}.session-console-foot button{font-size:12px}.session-input-row button:disabled{opacity:.4;cursor:not-allowed}.profile-dialog{border-radius:22px;box-shadow:0 22px 80px #24371e24;border-color:#dbe3ce;padding:27px}.profile-dialog-head h2{font-size:32px;font-weight:500}.profile-settings label{padding:17px;border-radius:13px}.profile-settings strong{font-size:16px}.profile-settings small{font-size:12px;line-height:1.6}.profile-settings input{accent-color:#758d52}.profile-close{min-width:40px;min-height:40px}.profile-backdrop{backdrop-filter:blur(6px)}
@keyframes demoTime{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(min-width:1500px){.hero-premium{padding:68px 0 60px}.hero-copy h1{font-size:73px}.hero-demo .conversation-stage{height:485px}.hero-demo .tato-small{top:172px}.hero-demo .cafe-counter{top:299px}.hero-demo .coffee-cup{top:262px}.hero-demo .live-card{top:318px}}
@media(max-width:1150px){.topbar-premium{padding:17px 30px}.premium-page{padding:0 34px}.hero-premium{gap:35px}.hero-copy h1{font-size:58px;letter-spacing:-2px}.hero-copy p{font-size:15px}.hero-copy .actions{gap:17px}.hero-copy .btn{font-size:14px;padding:15px 18px}.hero-note{font-size:11px;gap:15px}.hero-demo .live-head{font-size:8px}.demo-state-label{display:none}.hero-role-chip{max-width:124px;font-size:6px}.hero-demo .cafe-sign{font-size:22px;left:5%}.hero-demo .prop-monitor{width:98px;left:12px}.hero-demo .prop-board{width:109px;left:11px}.hero-demo .prop-hotel{width:83px;left:15px}.hero-demo .prop-plant{right:11px}.hero-demo .tato-small{left:calc(50% - 72px)}.scenario-selector button{font-size:10px;gap:5px}.scene-body{padding:22px 17px 17px}.scene-body h3{font-size:26px}.scene-body button{font-size:11px}.scene-top{font-size:8px}.main{padding:35px 28px 60px}.dashboard{grid-template-columns:1fr}.home-feature{min-height:280px}.home-feature-art{right:30px;width:195px;height:245px;top:25px}.home-feature-art .tato-small{left:35px}.home-feature-art>span{left:40px}.home-feature-copy{max-width:70%}.rhythm-card{display:grid;grid-template-columns:1fr 1.1fr;column-gap:20px}.rhythm-card>.eyebrow,.rhythm-card>h2{grid-column:1}.rhythm-card>.stat-row{grid-column:2;grid-row:1/4;margin:0;align-self:center}.rhythm-note{margin-top:10px}.rhythm-card>.text-link{grid-column:2;grid-row:4}.explore-panel .city-grid{gap:12px}.place{padding:20px}.place strong{font-size:21px}.place small{font-size:11px}.panel-heading h2{font-size:26px}.panel-heading .text-link{font-size:11px}.session-header{grid-template-columns:1fr}.session-back{font-size:12px}.session-header-meta{grid-row:2;justify-self:end}.session-header-copy{grid-row:2}.session-header-copy h1{font-size:34px}.session-header-meta{display:none}}
@media(max-width:900px){.topbar-premium{gap:15px}.nav{gap:18px}.nav>a{display:none}.hero-copy h1{font-size:51px}.hero-copy .eyebrow{font-size:8px}.hero-copy .actions{gap:9px}.hero-how{font-size:11px}.hero-copy .btn{font-size:12px;gap:12px}.hero-note{font-size:10px;gap:12px}.hero-demo .bubble{font-size:10px}.hero-demo .bubble-name{font-size:6px}.hero-demo .live-card{left:9px;right:9px;padding:13px 11px}.scenario-selector button{flex-direction:column;gap:5px;padding:9px 2px}.hero-role-chip{right:8px;top:150px;font-size:6px}.hero-demo .stage-label{font-size:6px}.hero-demo .cafe-sign{font-size:20px;top:77px}.hero-demo .cafe-sign span{font-size:5px}.hero-demo .stage-sticker{top:255px;font-size:8px;padding:8px}.hero-demo .prop-board,.hero-demo .prop-hotel,.hero-demo .prop-monitor{scale:.8;transform-origin:left center}.hero-demo .prop-pendant{right:35px}.hero-demo .prop-plant{scale:.8;transform-origin:bottom right}.hero-demo .coffee-cup{right:22px}.experience{gap:35px}.flow-item{gap:14px}.flow-item h3{font-size:21px}.flow-item p{font-size:12px}.scenes{padding:40px 22px 22px}.scene-body h3{font-size:24px;min-height:80px}.scene-body p{min-height:69px;font-size:12px}.scene-top{font-size:7px;padding:18px 13px 0}.scene-body button{font-size:10px}.proof-strip span{font-size:11px}.proof-strip strong{font-size:12px}}
@media(max-width:760px){.topbar-premium{padding:16px 20px}.topbar-premium .brand{font-size:26px}.topbar-premium .brand-mark{width:35px;height:37px}.nav{gap:14px}.nav .btn{font-size:11px;min-height:40px}.nav .nav-auth{display:block;padding:8px 0}.premium-page{padding:0 24px}.hero-premium{grid-template-columns:1fr;gap:31px;padding:36px 0 34px}.hero-copy{max-width:520px;width:100%;padding:0}.hero-copy .eyebrow{font-size:9px}.hero-copy h1{font-size:clamp(45px,8.7vw,63px);line-height:1.04;letter-spacing:-1.8px;max-width:500px;margin:23px 0}.hero-copy p{font-size:15px;max-width:450px}.hero-copy .actions{gap:25px;margin-top:26px}.hero-copy .btn{font-size:14px;padding:15px 20px}.hero-how{font-size:12px}.hero-note{font-size:11px;gap:22px;margin-top:22px}.hero-demo{max-width:520px;width:100%;margin:0 auto;padding:8px;border-radius:23px}.hero-demo .conversation-stage{height:485px;max-width:none;width:100%;border-radius:16px}.demo-toolbar{height:36px;font-size:8px}.hero-demo .stage-label{font-size:7px}.hero-demo .cafe-sign{left:8%;font-size:25px;top:82px}.hero-demo .cafe-sign span{font-size:6px}.hero-demo .live-card{left:13px;right:13px;padding:13px 14px}.hero-demo .live-head{font-size:9px}.hero-demo .bubble{font-size:12px}.hero-demo .bubble-name{font-size:7px}.hero-demo .stage-sticker{top:235px;right:12px;font-size:10px;padding:11px}.hero-role-chip{right:12px;top:158px;font-size:7px;max-width:148px}.hero-demo .prop-board,.hero-demo .prop-hotel,.hero-demo .prop-monitor{scale:1}.hero-demo .prop-plant{scale:1;right:22px}.hero-demo .coffee-cup{right:46px}.scenario-selector button{flex-direction:row;font-size:11px;gap:6px;min-height:43px}.demo-state-label{display:inline;font-size:8px}.proof-strip{gap:12px;padding:23px 0}.proof-strip>div{gap:9px;align-items:center;flex-direction:column;text-align:center;padding-right:8px}.proof-strip>div:last-child{padding:0}.proof-strip span{font-size:10px}.proof-strip strong{font-size:11px}.proof-strip svg{width:24px;height:24px}.experience{padding:62px 0;grid-template-columns:1fr;gap:20px}.experience h2,.scenes h2{font-size:42px}.experience-lead p{font-size:14px;max-width:420px}.flow-item{padding:23px 0;gap:16px}.flow-item h3{font-size:23px}.flow-item p{font-size:13px}.scenes{padding:35px 20px 20px}.scene-grid{gap:24px}.scene-top{font-size:9px;padding:19px 22px 0}.scene-body{padding:23px}.scene-body h3{font-size:30px;min-height:0;max-width:none}.scene-body p{font-size:14px;min-height:0}.scene-body button{font-size:13px}.scenes-head>p{font-size:14px}.scenes-bottom>span,.scenes-bottom .text-link{font-size:11px}.final-cta{padding:55px 23px;margin:46px 0 30px}.final-cta p{font-size:14px;max-width:320px}.final-cta .btn{font-size:12px}.cta-note{font-size:11px}.site-footer>span,.site-footer>a{font-size:11px}.site-footer .copyright{font-size:10px}.app-shell{display:block}.sidebar{height:auto;position:sticky;z-index:25;padding:13px 18px}.sidebar .brand{font-size:23px}.side-nav button{font-size:22px;padding:8px 10px;min-height:43px}.main{padding:29px 21px 50px}.app-head h1{font-size:35px}.app-head .eyebrow{font-size:8px}.app-head .sub{font-size:13px}.dashboard{grid-template-columns:1fr}.home-feature{padding:26px;min-height:300px}.home-feature h2{font-size:33px}.home-feature-copy{max-width:70%}.home-feature p{max-width:220px;font-size:12px}.home-feature-art{width:155px;right:-15px;top:43px;height:235px}.home-feature-art .tato-small{left:14px;scale:.9}.home-feature-art>span{font-size:18px;left:20px;top:160px}.home-feature .btn{font-size:11px;gap:10px;padding:13px 15px}.rhythm-card{display:block;padding:25px}.rhythm-card .stat-row{margin-top:20px}.rhythm-note{margin-top:20px}.panel-heading{display:block}.panel-heading .text-link{margin-top:10px;font-size:12px}.explore-panel .city-grid{grid-template-columns:1fr;gap:15px;margin-top:15px}.place{padding:23px;position:relative;min-height:160px}.place-icon{float:left;margin-right:18px;margin-bottom:10px}.place strong{font-size:24px;margin-top:5px}.place small{font-size:12px;min-height:30px}.place-open{clear:both;margin-top:18px}.onboard-card,.auth-card{padding:29px 24px}.onboard-card h1,.auth-card h1{font-size:35px}.screen .sub{font-size:13px}.choice{padding:15px 12px;min-height:85px}.choice strong{font-size:18px}.choice small{font-size:11px}.city-detail{padding:23px!important}.city-detail h2{font-size:29px!important}.session-header-copy h1{font-size:33px}.session-header-copy p{font-size:13px}.session-console{padding:20px}.session-scene-wrap{height:350px}.session-message p{font-size:13px!important}.session-console-foot{gap:12px}.session-console-foot button{font-size:11px}.profile-dialog{padding:23px}.profile-settings small{font-size:11px}}
@media(max-width:390px){.topbar-premium{padding:14px 16px;gap:8px}.nav{gap:10px}.nav .btn{font-size:10px;padding:10px 11px}.nav .nav-auth{padding:8px 0}.nav .btn svg{display:none}.topbar-premium .brand{font-size:24px}.premium-page{padding:0 19px}.hero-copy h1{font-size:43px;letter-spacing:-1.4px}.hero-copy .eyebrow{font-size:8px}.hero-copy .actions{gap:18px}.hero-copy .btn{font-size:12px;padding:15px 17px}.hero-how{font-size:11px}.hero-note{font-size:10px;gap:15px}.hero-demo .cafe-sign{left:5%;font-size:22px}.hero-demo .bubble{font-size:10px}.hero-demo .bubble-name{font-size:6px}.hero-demo .live-head{font-size:8px}.hero-demo .stage-sticker{font-size:8px;top:259px;padding:8px}.hero-demo .coffee-cup{right:26px}.hero-role-chip{right:7px;max-width:118px;font-size:6px}.hero-demo .prop-board,.hero-demo .prop-hotel,.hero-demo .prop-monitor{scale:.8}.hero-demo .prop-plant{scale:.8;right:12px}.demo-state-label{display:none}.scenario-selector button{font-size:9px;gap:4px}.scenario-selector svg{width:14px}.demo-toolbar{font-size:7px}.hero-demo .stage-label{font-size:6px}.hero-demo .live-card{left:8px;right:8px;padding:12px}.experience h2,.scenes h2{font-size:37px}.scene-body h3{font-size:27px}.scene-body p{font-size:13px}.scene-body button{font-size:12px}.home-feature-copy{max-width:82%}.home-feature-art{right:-49px;opacity:.7}.home-feature .btn{font-size:10px}.home-feature p{max-width:200px}.session-console-foot{flex-wrap:wrap}.session-console-foot button{flex:1;white-space:nowrap}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.demo-progress{display:none}.scene-props>div{transition:none}.choice{animation:none}.hero-demo{animation:none}}

.scenario-selector{grid-template-columns:repeat(3,minmax(0,1fr))}
/* BataTalk refinement: the existing scene opens onto the page. */
.topbar-premium{background:var(--cream);backdrop-filter:none;border-bottom:1px solid var(--line)}
.premium-page .hero-premium{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:60px;padding:54px 0 50px}
.hero-copy,.hero-demo,.hero-copy h1{animation:none}
.hero-copy h1{font:500 clamp(48px,5vw,68px)/1.06 Fredoka,sans-serif;letter-spacing:-2px;text-wrap:balance;max-width:560px;margin:24px 0}
.hero-copy h1 em{font-style:normal;color:#956900;display:inline}
.hero-copy h1 em:after{content:none}
.hero-copy p{font-size:18px;line-height:1.65;max-width:440px}
.hero-copy .actions{gap:24px;flex-wrap:wrap}
.hero-copy .hero-how{font-size:14px}
.premium-page .btn-primary{border:1px solid #374b2e;border-radius:13px!important;box-shadow:0 4px 0 #ba962b!important}
.premium-page .btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 0 #ba962b!important}
.premium-page .hero-demo{border:0;background:none;box-shadow:none;filter:none;border-radius:0;padding:0;animation:none}
.hero-demo .conversation-stage{height:515px;background:transparent;box-shadow:none;border-radius:0;overflow:visible;animation:none}
.hero-demo .stage-label{top:12px;left:14px;right:auto;justify-content:flex-start;color:#556448;font-size:10px;letter-spacing:.9px}
.hero-demo .cafe-window{top:52px;left:22%;width:64%;height:245px;border-width:8px;background:#e5ead6}
.hero-demo .cafe-sign{top:87px;left:2%;font-size:29px;padding:13px 16px;animation:sign-sway 8s ease-in-out infinite;transform-origin:50% 0}
.hero-demo .cafe-sign span{font-size:7px}
.hero-demo .tato-small{top:186px;left:calc(52% - 76px);scale:1.35;transform:rotate(-3deg);transform-origin:center bottom;animation:none}
.hero-demo .cafe-counter{top:329px;left:0;right:0;height:21px;background:#a17a51;border-top:4px solid #735637}
.hero-demo .coffee-cup{top:292px;right:55px;scale:1.12}
.hero-demo .live-card{top:352px;left:28px;right:12px;padding:17px 20px;border:0;border-radius:12px;box-shadow:0 4px 8px #45512d16;background:#fffef9}
.hero-demo .live-head{font-size:11px;color:#526448;line-height:1.5}
.hero-demo .demo-label{border:0;font-size:9px;letter-spacing:.5px;padding:0}
.hero-demo .demo-voice-caption{font-size:18px;line-height:1.45;color:#30492f;padding:12px 0;min-height:70px}
.hero-demo .demo-voice-caption .bubble-name{display:block;font-size:10px;letter-spacing:.8px;margin:0 0 6px;color:#526448}
.hero-demo .live-foot{margin-top:0;gap:10px}
.hero-demo .demo-toggle,.hero-demo .demo-reset{min-width:44px;width:44px;height:44px;font-size:16px}
.hero-demo .demo-reset{background:#e9efdd;color:#334b2f}
.hero-demo .demo-state-label{display:inline;font-size:10px;color:#526448;white-space:normal;max-width:122px}
.hero-demo .voice-line{max-width:110px}
.hero-demo .stage-sticker{top:246px;right:4px;max-width:135px;padding:12px;font-size:13px;line-height:1.4;transform:rotate(5deg);background:#f6dd88}
.hero-demo .prop-plant{top:279px;right:17px}
.hero-demo .prop-board,.hero-demo .prop-hotel,.hero-demo .prop-monitor{top:188px;left:12px}
.hero-demo .prop-suitcase{bottom:186px;left:28px}
.hero-demo .prop-laptop{top:290px;right:20px}
.hero-demo [data-scene=airport] .cafe-window{width:72%;left:18%}
.hero-demo [data-scene=airport] .cafe-sign{top:79px;left:3%}
.hero-demo [data-scene=hotel] .cafe-sign,.hero-demo [data-scene=meeting] .cafe-sign{font-size:27px}
.hero-demo .scenario-selector{display:flex;flex-wrap:wrap;gap:2px 15px;padding:30px 0 0;margin-left:12px}
.scenario-selector button{border:0;border-radius:0;background:none;box-shadow:none;min-height:44px;padding:9px 0;font-size:12px;color:#53634a;position:relative;flex-direction:row}
.scenario-selector button:hover{background:none;color:#283d26}
.scenario-selector button[aria-pressed=true]{border:0;box-shadow:none;background:none;color:#283d26;text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:2px}
.premium-page .proof-strip{border:0;border-radius:0;background:none;box-shadow:none;padding:26px 0;gap:24px;overflow:visible}
.proof-strip:after{content:none}
.proof-strip>div{justify-content:flex-start;padding-left:20px;gap:0}
.proof-strip>div:first-child{padding-left:0}
.proof-strip span{font-size:14px;line-height:1.8;color:#53634a}
.proof-strip strong{font-size:17px;font-weight:600;color:#283d26}
.experience{gap:80px;padding:95px 0}
.experience h2,.scenes h2,.conversation-example h2{font:500 clamp(38px,4vw,52px)/1.09 Fredoka,sans-serif;letter-spacing:-1.3px;margin:0 0 24px;text-wrap:balance}
.experience h2 em,.scenes h2 em,.conversation-example h2 em{color:#62794b;font-style:normal}
.experience-lead>p{font-size:16px;line-height:1.75}
.practice-method{padding:18px 0;margin:24px 0;max-width:430px}
.practice-method>strong{font-size:24px;color:#3c5633}
.practice-method>p{font-size:15px!important;line-height:1.7!important;color:#53634a!important}
.landing-tato-note{display:flex;align-items:center;gap:14px;background:none;border:0;padding:0;margin-top:28px;max-width:390px}
.landing-tato-note .guide-tato{width:112px;height:124px;flex-shrink:0}
.landing-tato-note p{font:500 22px/1.35 Fredoka,sans-serif;background:#edf1e3;border:0;border-radius:4px 14px 14px 14px;padding:16px;margin:0;color:#3d5934}
.experience-flow{gap:8px;align-content:center}
.experience .flow-item{grid-template-columns:48px minmax(0,1fr);gap:19px;padding:23px 0;border-bottom:1px solid var(--line)}
.experience .flow-item:last-child{border:0}
.flow-item:hover{background:none}
.flow-mark{font:500 34px/1 Fredoka,sans-serif;color:#7c8d61;background:none;border-radius:0;box-shadow:none;width:auto;height:auto;display:block;padding-top:2px}
.flow-item h3{font-size:26px;line-height:1.2}
.flow-item p{font-size:15px;line-height:1.65;max-width:380px}
.flow-destinations{font-size:14px;font-weight:600;color:#5d713e;margin-top:16px;word-spacing:3px}
.flow-phrase{display:flex;align-items:center;gap:14px;margin-top:16px;color:#3b5737;font:500 21px Fredoka,sans-serif}
.flow-phrase>span:first-child{color:#8d9b68;font-size:20px}
.flow-item .flow-reply{font:500 20px/1.4 Fredoka,sans-serif;color:#5d713e;margin-top:16px}
.premium-page .scenes{background:#edf0e4;border:0;border-radius:0;margin:0;padding:44px 28px 24px}
.scenes-head{align-items:start;gap:32px}
.scenes-head>div{min-width:0}
.scenes-head p{font-size:16px;line-height:1.7;color:#53634a;margin:0}
.landing-world-strip{display:flex;flex-wrap:wrap;gap:7px 0;margin-top:20px}
.landing-world-strip span{background:none;border:0;border-radius:0;padding:0;font-size:12px;color:#53634a}
.landing-world-strip span+span:before{content:'/';margin:0 8px;color:#75835f}
.scene-grid{gap:24px}
.scenes .scene{border:0;border-radius:8px;box-shadow:none;background:#fffdf5;overflow:hidden;transition:transform .2s}
.scenes .scene:hover{box-shadow:none;transform:translateY(-3px)}
.scene-top{font-size:10px;letter-spacing:.6px;padding:18px 20px 0}
.scene-top>span:last-child{font-size:11px}
.scene-art{height:198px;box-shadow:none}
.scene-cafe .scene-top,.scene-cafe .scene-art{background:#ebdab4}
.cafe-menu{position:absolute;right:17px;bottom:22px;display:grid;gap:6px;padding:10px 12px;background:#fff9e8;border:1px solid #ac9161;border-radius:3px;transform:rotate(3deg);font-size:10px;letter-spacing:.8px;color:#5d5237}
.scene-trip .scene-top,.scene-trip .scene-art{background:#e0e8d5}
.scene-trip .scene-art{border-bottom:2px dashed #9fac85}
.scene-trip .ticket{border:0;border-left:1px dashed #899774;transform:rotate(-2deg);font-size:9px;width:180px;left:calc(50% - 90px);padding:12px 16px}
.scene-trip .ticket b{font-size:13px;letter-spacing:1px}
.scene-work .scene-top,.scene-work .scene-art{background:#e9e7d9}
.work-badge{position:absolute;left:28px;bottom:15px;width:125px;padding:23px 12px 17px;border:1px solid #a3ad8e;border-radius:7px;background:#fffdf3;transform:rotate(-3deg);z-index:3;text-align:center;color:#40583c}
.work-badge:before{content:'';position:absolute;top:8px;left:48px;width:26px;height:4px;background:#a2b38a;border-radius:4px}
.work-badge>span{font:500 24px Fredoka,sans-serif}
.work-badge small{display:block;font-size:9px;letter-spacing:.7px;margin-top:5px}
.work-art .work-message{left:20px;top:19px;font-size:18px;border-radius:7px;background:#fffdf3}
.work-steps i{background:#b4c09c;border-color:#9baa83}
.scene-body{padding:24px 20px 17px}
.scene-body h3{font-size:28px;line-height:1.12;min-height:64px;max-width:260px}
.scene-body p{font-size:15px;line-height:1.6;min-height:72px}
.scene-body button{font-size:13px;min-height:54px;line-height:1.5}
.scene-body button>span{background:none;border-radius:0;width:24px}
.scene-body button:hover>span{background:none;transform:translateX(3px)}
.conversation-example{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center;padding:96px 0}
.conversation-example>div{min-width:0}
.conversation-example>div>p{font-size:16px;line-height:1.7;color:#53634a;max-width:380px}
.conversation-example .text-link{font-size:15px;min-height:44px}
.example-heading{display:flex;align-items:center;gap:13px;color:#53634a;font-size:13px;border-bottom:1px solid var(--line);padding-bottom:8px}
.example-heading .guide-tato{width:60px;height:66px;flex-shrink:0}
.example-dialogue dl{display:grid;grid-template-columns:54px 1fr;gap:19px 15px;margin:24px 0;font-size:19px;line-height:1.45}
.example-dialogue dt{font-size:12px;font-weight:700;color:#62794b;padding-top:4px}
.example-dialogue dd{margin:0}
.example-dialogue dd:nth-of-type(even){color:#657648}
.example-dialogue .example-note{font-size:12px;line-height:1.6;color:#53634a;border-top:1px solid var(--line);padding-top:14px}
.premium-page .final-cta{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center;margin:0 0 48px;padding:54px 56px 0;text-align:left;background:#2d3b2b;border:0;border-radius:0;box-shadow:0 0 0 100vmax #2d3b2b;clip-path:inset(0 -100vmax);overflow:clip}
.final-cta:after{content:none}
.final-tato{align-self:end;max-width:310px;justify-self:center;margin-bottom:-35px}
.final-tato .guide-tato{width:100%;height:auto;animation:none}
.final-copy{padding-bottom:60px}
.final-cta h2{font-size:clamp(44px,4.8vw,64px);line-height:1.08;margin:20px 0}
.final-cta p{font-size:16px;color:#e3e8d5;line-height:1.6}
.final-cta .btn{font-size:14px;line-height:1.5}
.site-footer{padding-bottom:28px}
.site-footer>span,.site-footer>a{font-size:13px}
.premium-page .guide-character,.premium-page .guide-wave,.premium-page .guide-leaf{animation:none}
.premium-page .tiny-spark{animation:none}
.premium-page [data-reveal],.premium-page .will-reveal{opacity:1;transform:none;transition:none}
body[data-screen=session] .main,.voice-feedback-card,.voice-summary{animation:none!important}
.voice-experience .self-preview-label{color:#334b35}
.voice-experience .voice-local-note p{font-size:12px!important}
.premium-page .scene-top>span:last-child,.premium-page .scene-category{color:#58664a}
.premium-page .landing-world-strip span,.premium-page .scenes-head p{color:#4f6047}
.premium-page .site-footer>span,.premium-page .site-footer>a,.premium-page .site-footer .copyright{color:#53634a}
.premium-page .scenes-bottom>span{color:#53664a}
.premium-page .plans-heading h2 em{color:#566b42}
.premium-page .plans-heading p{color:#53634a}
.site-footer>span,.site-footer>a,.site-footer .copyright{color:#53634a}
.premium-page .cafe-menu{color:#50452f}
.place-city-label{color:#385f42!important}
.place-dialog blockquote small{color:#5d704f!important}
.destination-note{color:#536b48!important}
.flow-destinations{color:#4f673b}
@media(max-width:1100px){.premium-page .hero-premium{gap:32px}.hero-copy h1{font-size:54px}.hero-copy p{font-size:16px}.hero-demo .stage-sticker{font-size:11px;max-width:105px}.hero-demo .cafe-sign{font-size:24px}.hero-demo .demo-state-label{display:none}.hero-demo .scenario-selector{gap:2px 12px}.hero-demo .live-card{left:12px;right:0}.experience{gap:40px}.scenes .scene-grid{gap:16px}.scene-body{padding:20px 16px 14px}.scene-body h3{font-size:25px;min-height:84px}.scene-body p{font-size:14px;min-height:88px}.scene-body button{font-size:12px}.conversation-example{gap:45px}.premium-page .final-cta{gap:30px;padding-inline:20px}}
@media(max-width:900px){.hero-copy h1{font-size:47px}.hero-demo .tato-small{scale:1.25}.hero-demo .stage-label{font-size:9px;letter-spacing:.5px}.hero-demo .stage-sticker{right:0;font-size:10px;max-width:95px}.hero-demo .live-card{padding:15px}.hero-demo .demo-conversation-name{max-width:200px}.hero-demo .demo-voice-caption{font-size:16px}.hero-demo .cafe-sign{left:0;font-size:21px}.hero-demo [data-scene=hotel] .cafe-sign,.hero-demo [data-scene=meeting] .cafe-sign{font-size:22px}.hero-demo .scenario-selector{gap:2px 10px}.scenario-selector button{font-size:11px}.proof-strip strong{font-size:15px}.proof-strip span{font-size:12px}}
@media(max-width:760px){.premium-page .hero-premium{grid-template-columns:1fr;padding:32px 0 30px;gap:30px}.hero-copy h1{font-size:clamp(43px,8vw,58px);max-width:510px;letter-spacing:-1.4px}.hero-copy p{font-size:17px;max-width:460px}.hero-copy .actions{gap:20px;margin-top:24px}.hero-copy .btn{font-size:14px}.hero-copy .hero-how{font-size:13px}.hero-demo .conversation-stage{height:510px}.hero-demo .cafe-sign{font-size:27px;left:2%}.hero-demo .tato-small{scale:1.35}.hero-demo .stage-label{font-size:10px}.hero-demo .stage-sticker{font-size:12px;max-width:125px}.hero-demo .demo-voice-caption{font-size:18px}.hero-demo .live-card{left:10px;right:0}.hero-demo .scenario-selector{padding-top:34px;gap:2px 18px;margin-left:10px}.scenario-selector button{font-size:12px}.premium-page .proof-strip{gap:0;padding:24px 0}.proof-strip>div{align-items:start;text-align:left;padding:0 12px}.proof-strip strong{font-size:14px;line-height:1.5}.proof-strip span{font-size:12px}.experience{padding:62px 0;gap:30px}.experience h2,.scenes h2,.conversation-example h2{font-size:40px}.landing-tato-note{max-width:430px}.landing-tato-note .guide-tato{width:94px;height:104px}.landing-tato-note p{font-size:20px}.premium-page .scenes{padding:32px 20px 20px;margin-inline:-4px}.scenes-head{display:block}.scenes-head p{margin-top:18px}.scenes .scene-grid{grid-template-columns:1fr;gap:24px}.scene-top{font-size:11px}.scene-body{padding:24px}.scene-body h3{font-size:30px;min-height:0;max-width:none}.scene-body p{font-size:16px;min-height:0}.scene-body button{font-size:14px}.scene-art{height:198px}.scene-cafe .mini-shop{left:calc(50% - 63px)}.cafe-menu{right:calc(50% - 150px)}.work-art .work-message{left:calc(50% - 122px)}.work-badge{left:calc(50% - 78px)}.conversation-example{grid-template-columns:1fr;gap:28px;padding:62px 0}.example-dialogue dl{font-size:18px}.premium-page .final-cta{grid-template-columns:140px 1fr;gap:18px;padding:35px 0 0;margin-bottom:34px}.final-copy{padding-bottom:40px}.final-tato{width:180px;max-width:none;margin-left:-30px;margin-bottom:-20px}.final-cta h2{font-size:39px}.final-cta .eyebrow{font-size:9px;letter-spacing:.7px}.final-cta p{font-size:14px;margin:0 0 22px}.final-cta .btn{font-size:12px;padding:13px 16px;gap:10px}.site-footer>span,.site-footer>a{font-size:12px}}
@media(max-width:420px){.hero-copy h1{font-size:43px}.hero-copy .actions{gap:14px}.hero-copy .btn{padding:14px 16px;font-size:13px}.hero-copy .hero-how{font-size:12px}.hero-demo .cafe-sign{font-size:23px;padding:10px 13px}.hero-demo .tato-small{left:calc(50% - 76px);scale:1.3}.hero-demo .cafe-window{left:20%;width:74%}.hero-demo .stage-sticker{font-size:10px;max-width:100px;top:256px}.hero-demo .coffee-cup{right:35px}.hero-demo .demo-voice-caption{font-size:17px}.hero-demo .scenario-selector{gap:0 16px}.hero-demo .live-head{font-size:10px}.hero-demo .demo-conversation-name{max-width:180px}.experience h2,.scenes h2,.conversation-example h2{font-size:36px}.flow-item h3{font-size:24px}.experience .flow-item{grid-template-columns:38px minmax(0,1fr);gap:13px}.flow-mark{font-size:30px}.flow-item p{font-size:14px}.flow-phrase{font-size:18px}.flow-destinations{font-size:13px;word-spacing:0}.proof-strip>div{padding-inline:9px}.proof-strip strong{font-size:12px}.proof-strip span{font-size:11px}.landing-tato-note{gap:8px}.landing-tato-note p{font-size:19px}.scene-body{padding:21px}.scene-body h3{font-size:28px}.scene-body p{font-size:15px}.premium-page .final-cta{grid-template-columns:90px 1fr;gap:12px}.final-tato{width:145px;margin-left:-48px}.final-cta h2{font-size:35px}.final-copy{position:relative;z-index:1}.final-cta .btn{font-size:12px;gap:8px;padding:12px}.final-cta .btn svg{width:17px}}
@media(max-width:340px){html,body{overflow-x:clip}.app-shell,.main,.city-app,.voice-experience{max-width:100%;min-width:0;width:100%}.sidebar{min-width:0}.premium-page{padding-inline:16px}.main{padding-inline:14px}.city-open-map{overflow:hidden}.city-open-title{width:calc(100% - 12px);grid-template-columns:32px minmax(0,1fr) 32px;gap:3px}.city-open-title>div{padding-inline:4px}.city-open-title h1{font-size:24px}.voice-experience .voice-companion{min-width:0}.voice-experience .voice-header{min-width:0}.voice-experience .voice-header h1{font-size:22px}}

/* Conversa guiada: apoio em português, dica visível e correção por trechos. */
.suggested-question{display:grid;gap:8px;border:1px solid #d7e5c7!important;background:linear-gradient(135deg,#f4f8e9,#fffef8)!important;border-radius:16px!important;padding:15px!important}
.suggested-question strong{font-size:18px;line-height:1.35;color:#294d35}
.suggested-question p[data-support-pt]{margin:0!important;color:#66745c!important;font-size:12px!important;line-height:1.55}
.hint-toggle{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:10px;padding:10px 12px;border:1px dashed #d1a52f;border-radius:12px;background:#fff7ce;color:#795b0b;font:600 12px Fredoka;cursor:pointer}
.hint-toggle:hover,.hint-toggle:focus-visible{background:#ffefad;transform:translateY(-1px)}
.practice-help{margin-top:8px;padding:13px 14px;border:1px solid #ead8a0;border-radius:13px;background:#fffdf0;color:#66552c;font-size:12px;line-height:1.5}
.practice-help strong{display:block;font:600 12px Fredoka;color:#795b0b}
.practice-help p{margin:7px 0 4px;color:#314c38;font:600 15px/1.4 Fredoka}
.practice-help small{color:#8a7a51}
.voice-steps{grid-template-columns:repeat(4,1fr)!important}
.voice-ai-feedback{margin-top:12px!important}
.correction-card{padding:14px;border:1px solid #dce5d0;border-radius:15px;background:#fbfff7;color:#40533b}
.correction-head{display:flex;justify-content:space-between;gap:10px;align-items:center;font:600 12px Fredoka}
.correction-head span{display:flex;align-items:center;gap:4px;font:400 10px/1.2 Arial;color:#74816c}
.correction-legend-good,.correction-legend-swap{width:8px;height:8px;border-radius:50%;display:inline-block;margin-left:4px}.correction-legend-good{background:#69b876}.correction-legend-swap{background:#edc34f}
.correction-words{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0 8px!important;font-size:14px!important;line-height:1.6!important}
.correction-word{padding:2px 5px;border-radius:5px}.correction-good{background:#ddf3df;color:#25673b}.correction-swap{background:#fff0b9;color:#765a0a}
.correction-explanation{padding-top:8px;border-top:1px solid #e8eedf;font-size:11px;line-height:1.45}.correction-explanation strong{font:600 11px Fredoka}.correction-explanation ul{margin:5px 0 0;padding-left:17px}.correction-explanation li+li{margin-top:4px}
.correction-ai-note{margin:9px 0 0!important;color:#65735e!important;font-size:11px!important;line-height:1.45!important}
.voice-feedback-card .correction-card{max-width:640px;margin:18px auto;text-align:left}
@media(max-width:600px){.correction-head{align-items:flex-start;flex-direction:column}.suggested-question strong{font-size:16px}}
@media(prefers-reduced-motion:reduce){.hero-demo .cafe-sign,.premium-page *,.premium-page *:before,.premium-page *:after{animation:none!important;transition:none!important}.premium-page [data-reveal]{opacity:1;transform:none}}

/* App navigation becomes a persistent horizontal trail on every viewport. */
body[data-screen=app] .app-shell,body[data-screen=session] .app-shell{display:block;min-height:100vh}
body[data-screen=app] .sidebar,body[data-screen=session] .sidebar{position:fixed;inset:auto 0 0;z-index:30;height:78px;display:flex;flex-direction:row;align-items:center;padding:10px 22px;background:#f7f9f1;border:0;border-top:1px solid #dce5d4;box-shadow:0 -8px 24px #2f4c2510}
body[data-screen=app] .sidebar>.brand,body[data-screen=session] .sidebar>.brand,body[data-screen=app] .sidebar>.tato-buddy,body[data-screen=session] .sidebar>.tato-buddy,body[data-screen=app] .sidebar>.guide-sidebar,body[data-screen=session] .sidebar>.guide-sidebar,body[data-screen=app] .side-footer,body[data-screen=session] .side-footer{display:none}
body[data-screen=app] .main,body[data-screen=session] .main{max-width:1200px;margin:0 auto;padding:42px 48px 118px}
body[data-screen=app] .side-nav,body[data-screen=session] .side-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:min(100%,680px);margin:0 auto}
body[data-screen=app] .side-nav button,body[data-screen=session] .side-nav button{justify-content:center;text-align:center;gap:7px;padding:9px 10px;min-height:56px;border-radius:14px;color:#5f6f59;font-size:12px}
body[data-screen=app] .side-nav button.active,body[data-screen=session] .side-nav button.active{background:#dfead3;color:#2c5438;box-shadow:inset 0 3px #6f9259}
body[data-screen=app] .side-nav button[data-action=open-profile],body[data-screen=session] .side-nav button[data-action=open-profile]{display:flex;align-items:center}
body[data-screen=app] .profile-nav-avatar,body[data-screen=session] .profile-nav-avatar{width:25px;height:25px;min-width:25px}
.trail-summary{display:flex;align-items:end;justify-content:space-between;gap:28px;background:#eaf1df;border-color:#dbe6cf;margin-bottom:34px}.trail-summary strong{display:block;margin-top:6px;font:500 44px/1 Fredoka;color:#3d633d}.trail-summary strong small{font:400 16px 'DM Sans',sans-serif;color:#62765b}.trail-summary p{margin:8px 0 0;color:#53684d;font-size:13px}.trail-summary-meter{width:min(42%,260px);height:8px;background:#d6e2ca;border-radius:10px;overflow:hidden}.trail-summary-meter i{display:block;height:100%;background:#6e9658;border-radius:inherit}
.trail-groups{display:grid;gap:26px}.trail-group{position:relative;padding:26px 28px;background:#fffdf7;border:1px solid #e1e7d8;border-radius:20px}.trail-group-head{display:flex;justify-content:space-between;gap:20px;align-items:start}.trail-level{font-size:10px;font-weight:700;letter-spacing:1.4px;color:#71865e}.trail-group h2{margin:7px 0 5px;font:500 30px/1.1 Fredoka}.trail-group-head p{margin:0;color:#697763;font-size:13px}.trail-count{font:500 25px Fredoka;color:#70855c}.trail-line{position:relative;display:grid;gap:8px;margin-top:22px;padding-left:3px}.trail-line:before{content:'';position:absolute;left:19px;top:18px;bottom:18px;width:2px;background:#dfe7d7}.trail-node{position:relative;z-index:1;display:grid;grid-template-columns:38px minmax(0,1fr) 28px;align-items:center;gap:12px;width:100%;padding:10px 12px;border:1px solid transparent;border-radius:13px;background:transparent;text-align:left;color:#304831}.trail-node:hover,.trail-node.is-available:focus-visible{background:#f2f6eb;border-color:#d5e1cb}.trail-node:not(.is-available){opacity:.55;cursor:default}.trail-node-dot{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#edf2e8;border:2px solid #c8d6bf;color:#6b825b;font:600 12px 'DM Sans',sans-serif}.trail-node.is-done .trail-node-dot{background:#6b9255;border-color:#6b9255;color:white}.trail-node strong,.trail-node small{display:block}.trail-node strong{font:500 17px Fredoka}.trail-node small{margin-top:3px;color:#71806d;font-size:11px}.trail-node-arrow{justify-self:end;color:#71925d;font-size:17px}
@media(max-width:700px){body[data-screen=app] .sidebar,body[data-screen=session] .sidebar{height:72px;padding:8px 10px}body[data-screen=app] .main,body[data-screen=session] .main{padding:28px 18px 100px}.trail-summary{display:block;padding:20px}.trail-summary-meter{width:100%;margin-top:18px}.trail-group{padding:21px 14px}.trail-group h2{font-size:27px}.trail-group-head p{font-size:12px;max-width:245px}.trail-node{grid-template-columns:34px minmax(0,1fr) 22px;padding:9px 4px;gap:9px}.trail-node-dot{width:30px;height:30px}.trail-node strong{font-size:15px}.trail-node small{font-size:10px}}
@media(max-width:380px){body[data-screen=app] .side-nav,body[data-screen=session] .side-nav{gap:2px}.side-nav button{font-size:10px!important;padding-inline:3px!important}.trail-group h2{font-size:24px}.trail-node strong{font-size:14px}}

/* The trail is the primary action, so it rises from the bottom bar. */
body[data-screen=app] .sidebar,body[data-screen=session] .sidebar{height:86px;padding-bottom:16px}
body[data-screen=app] 
body[data-screen=app] 
body[data-screen=app] 
@media(max-width:700px){body[data-screen=app] .sidebar,body[data-screen=session] .sidebar{height:80px;padding-bottom:13px}body[data-screen=app] body[data-screen=app] }
@media(max-width:380px){body[data-screen=app] .side-nav button:nth-child(2),body[data-screen=session] .side-nav button:nth-child(2){min-height:56px;transform:translateY(-6px)}}

/* The progress screen is a playable board path, rather than a plain checklist. */
.trail-group{overflow:hidden;background:#f5f3e7;border:1px solid #dfe5d3;box-shadow:0 5px 0 #e4e8dc}.trail-middle{background:#edf3e7}.trail-advanced{background:#f1edf4}
.trail-line{grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 12px;margin:28px -3px -2px;padding:34px 6px 28px;isolation:isolate}.trail-line:before{content:'';position:absolute;z-index:-1;left:7%;right:7%;top:66px;height:calc(100% - 132px);border:4px solid #cddbbd;border-top-color:#bdcfad;border-radius:28px;background:linear-gradient(#cddbbd,#cddbbd) center 50%/100% 4px no-repeat}.trail-middle .trail-line:before{border-color:#c3d8c0;background:linear-gradient(#c3d8c0,#c3d8c0) center 50%/100% 4px no-repeat}.trail-advanced .trail-line:before{border-color:#d7c5da;background:linear-gradient(#d7c5da,#d7c5da) center 50%/100% 4px no-repeat}
.trail-node{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;min-height:136px;padding:0 4px;border:0;border-radius:16px;background:transparent;text-align:center;color:#304831}.trail-node:nth-child(even){transform:translateY(12px)}.trail-node:hover,.trail-node.is-available:focus-visible{background:transparent;border:0}.trail-node:not(.is-available){opacity:.52}.trail-node-dot{width:58px;height:58px;border:4px solid #c4d4b8;background:#fffdf6;box-shadow:0 3px 0 #b7cba8,0 4px 10px #415a2b20;font-size:25px;line-height:1}.trail-node.is-available .trail-node-dot{border-color:#7fa266}.trail-node.is-done .trail-node-dot{background:#71965c;border-color:#5c824a;box-shadow:0 3px 0 #4e733f;color:white}.trail-node-copy{display:block;width:100%;padding:8px 6px 6px;background:#fffdf7;border:1px solid #dfe5d6;border-radius:10px;box-shadow:0 3px 0 #dbe3d4}.trail-node strong{font:500 14px/1.1 Fredoka}.trail-node small{margin-top:4px;color:#75816f;font-size:9px;line-height:1.2}.trail-node-arrow{position:absolute;top:18px;right:2px;justify-self:auto;color:#6b8c58;font-size:16px}.trail-node:not(.is-available) .trail-node-arrow{font-size:12px}.trail-summary{position:relative}
@media(max-width:760px){.trail-line{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 10px;padding:27px 2px 20px;margin-inline:-2px}.trail-line:before{left:8%;right:8%;top:52px;height:calc(100% - 104px);border-width:3px;border-radius:22px;background:linear-gradient(#cddbbd,#cddbbd) center 50%/100% 3px no-repeat}.trail-node{min-height:124px}.trail-node-dot{width:50px;height:50px;font-size:21px}.trail-node-copy{padding:7px 3px 5px}.trail-node strong{font-size:13px}.trail-node small{font-size:8px}.trail-node-arrow{top:14px;right:-1px;font-size:13px}.trail-node:nth-child(even){transform:translateY(9px)}}
@media(max-width:430px){.trail-group{padding-inline:10px}.trail-group-head{gap:8px}.trail-group-head p{max-width:210px}.trail-count{font-size:22px}.trail-line{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px 14px}.trail-line:before{display:none}.trail-node{min-height:119px}.trail-node-dot{width:48px;height:48px}.trail-node-arrow{right:3px}}
/* BataTalk: warm paper, forest ink, and tactile game pieces. */
:root{--ink:#243e32;--muted:#586b60;--cream:#faf9f2;--line:#dde4d6}
.plan-kicker{color:#785b00!important}
body{background:#faf9f2;color:var(--ink)}
button,a,input{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #36744e;outline-offset:5px}
.app-head h1{line-height:1.12}.app-head .sub{font-size:15px;line-height:1.7;color:#586b60}
.card{box-shadow:0 4px 0 #e4e9dc;border-radius:24px}.card p{color:#53685b}
.home-feature{border:0!important;background:#30462e!important}.home-feature p{color:#e5ecda!important}.home-feature h2{font-size:38px;line-height:1.1}.home-feature .eyebrow{color:#dce6cb}
.rhythm-card{background:#edf2e4}.rhythm-card .stat strong{color:#45663b}.explore-panel{margin-top:40px}.panel-heading h2{font-size:30px}
.place{padding:25px!important}.place small{font-size:13px;line-height:1.6;color:#596d5d}.place strong{font-size:23px}.place-icon{background:#eef2e5}
.auth-card,.onboard-card{border-radius:28px;box-shadow:0 8px 0 #e6eadc,0 22px 60px #334d2710;background:#fffef8}.input{border:1px solid #cddac7;background:#fcfdf7;min-height:52px}.choice{min-height:84px}.field-label{color:#405840}
.profile-dialog{border-radius:25px!important;box-shadow:0 20px 70px #1d392529!important}.profile-settings label{background:#f5f8ef}.profile-settings small{color:#596e58}
.voice-support-card,.voice-feedback-card{border-radius:20px}.voice-feedback-card{box-shadow:0 5px 0 #e0e8d6}.voice-experience .voice-local-note p{color:#576b5e}
.scene-category,.scenes-bottom>span,.site-footer>span,.site-footer .copyright{color:#53644b!important}.scene-top>span:last-child{color:#4d5d41!important}.plans-heading h2 em{color:#51743c!important}.plan-card .eyebrow{color:#785b00}
body[data-screen=app] .side-nav button span,body[data-screen=session] .side-nav button span{display:inline}
body[data-screen=app] .side-nav button:after,body[data-screen=session] .side-nav button:after{display:none}
body[data-screen=app] .side-nav button.active,body[data-screen=session] .side-nav button.active{background:#f7cf53;color:#354a2c;border-color:#e4b936;box-shadow:0 3px 0 #d8ad35}
.sidebar{padding-bottom:max(12px,env(safe-area-inset-bottom))!important}.toast{bottom:106px}
.board-page{max-width:850px;margin:auto}.board-heading{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-bottom:25px}.board-heading h1{font:500 clamp(32px,4vw,48px)/1.06 Fredoka;margin:12px 0;max-width:510px;letter-spacing:-1px}.board-heading p{color:#5b705d;line-height:1.6}.board-score{flex-shrink:0;text-align:center;padding:20px;border:1px solid #dce6d1;border-radius:22px;background:#f1f5e8}.board-score b{font:500 36px Fredoka;display:block}.board-score small{font:500 18px Fredoka;color:#648154}.board-score>span{font-size:11px;color:#526846}
body[data-tab=progress] .main,body[data-tab=progress] .board-page{animation:none!important;opacity:1}
.board-intro{display:flex;align-items:center;gap:24px;max-width:550px;margin:0 auto 35px;padding:14px 20px}.board-intro .guide-tato{width:115px;height:140px;flex-shrink:0}.board-intro b{font:500 24px Fredoka}.board-intro p{font-size:14px;line-height:1.5;color:#5b705d;margin:7px 0 15px}.board-intro .btn{font-size:13px;min-height:45px}
.board-chapter{--trail:#bacd9b;--chapter:#eaf0da;--piece:#f3f6e9;position:relative;margin:0 auto;border-radius:32px;background:var(--chapter);overflow:hidden;border:1px solid #dce5cf;max-width:660px}
.board-chapter+.board-chapter{margin-top:25px}.board-leaf{--trail:#9fcabb;--chapter:#e1eee6;--piece:#eaf6ef}.board-star{--trail:#c5b5d4;--chapter:#eee7f0;--piece:#f5eff8}
.board-chapter>header{text-align:center;padding:28px 20px 15px;background:#ffffff45}.board-chapter>header>span{font-size:10px;letter-spacing:1.4px;font-weight:700;color:#4b6952}.board-chapter h2{font:500 31px Fredoka;margin:8px 0}.board-chapter header p{font-size:13px;color:#526b5b;margin:0}
.board-path{position:relative;width:100%;margin:0;isolation:isolate;background:radial-gradient(ellipse at 12% 20%,#ffffff65 0 5%,transparent 5.2%),radial-gradient(ellipse at 92% 65%,#ffffff55 0 7%,transparent 7.2%)}
.board-road{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1}.board-road path{stroke:var(--trail);stroke-width:14;vector-effect:non-scaling-stroke;stroke-linecap:round;fill:none}
.board-stop{position:absolute;transform:translateX(-50%);width:155px;display:flex;flex-direction:column;align-items:center;background:none;padding:0;gap:8px;color:#304c39}.board-piece{position:relative;width:83px;height:77px;display:grid;place-items:center;border-radius:50%;background:var(--piece);border:4px solid #fffdf3;box-shadow:0 8px 0 var(--trail),0 12px 0 #ffffff50;transition:transform .18s,box-shadow .18s}.board-piece>span{font-size:32px}.board-piece i{position:absolute;right:-6px;bottom:0;width:25px;height:25px;display:grid;place-items:center;border-radius:50%;font-size:11px;font-style:normal;background:#d2dcc9;border:3px solid var(--chapter);color:#53674d}
.board-stop strong{font:500 17px/1.2 Fredoka;text-align:center;background:var(--chapter);padding:3px 7px;border-radius:7px}.board-stop small{font-size:10px;color:#556c5a;background:var(--chapter);padding:0 5px}.board-stop.locked .board-piece{filter:saturate(.4)}.board-stop.current .board-piece{background:#f8d25c;border-color:#fff2b7;box-shadow:0 8px 0 #cfab36,0 0 0 8px #fff9da,0 12px 0 #cfab3625}.board-stop.current .board-piece i{background:#527c3e;color:white}.board-stop.done .board-piece{background:#b6d58d}.board-stop.done .board-piece i{background:#50713c;color:white}.board-stop:not(.locked):hover .board-piece{transform:translateY(-4px)}.board-stop.locked{cursor:default}
.board-start{position:absolute;bottom:calc(100% + 12px);background:#335839;color:#fff;padding:7px 10px;border-radius:9px;font-size:9px;letter-spacing:.5px;font-weight:700;white-space:nowrap}.board-start:after{content:'';position:absolute;left:calc(50% - 5px);bottom:-5px;border-top:6px solid #335839;border-left:5px solid transparent;border-right:5px solid transparent}
.board-sprout{position:absolute;left:13%;font-size:50px;color:#789e6266;transform:rotate(-9deg);text-align:center}.board-sprout small{display:block;max-width:90px;font:500 13px Fredoka;color:#607d58}.board-finish{font-size:40px;text-align:center;padding:0 0 24px;color:#718b57}
@media(max-width:600px){.board-heading{gap:12px}.board-heading h1{font-size:31px}.board-heading p{font-size:13px}.board-score{padding:12px}.board-score b{font-size:27px}.board-score>span{display:block;max-width:65px}.board-intro{gap:12px;padding:4px}.board-intro .guide-tato{width:88px}.board-intro b{font-size:22px}.board-chapter{border-radius:23px}.board-chapter>header{padding-top:23px}.board-chapter h2{font-size:28px}.board-stop{width:130px}.board-piece{width:72px;height:68px}.board-stop strong{font-size:15px}.board-sprout{left:5%;font-size:38px}.board-sprout small{max-width:65px;font-size:11px}.board-heading .eyebrow{font-size:8px}.home-feature h2{font-size:31px}.main .app-head h1{font-size:34px}}
@media(prefers-reduced-motion:reduce){.board-piece{transition:none}}
/* A little world worth coming back to. Shared surface and motion language. */
:root {
  --cream: #fbf8ef;
  --ink: #233e33;
  --muted: #5a6d60;
  --yellow: #f5cc51;
  --line: #dce3d5;
  --ease-ui: cubic-bezier(.22,1,.36,1);
  --surface-shadow: 0 3px 2px #233e3303, 0 16px 40px #233e3308;
}
body { background: var(--cream); }
.btn { border-radius: 16px; transition: transform .25s var(--ease-ui), box-shadow .25s var(--ease-ui), background .25s; }
.btn-primary { box-shadow: 0 4px 0 #bc9630, 0 8px 18px #b7942314; }
.btn-secondary { background: #fffef9; border: 1px solid #cdd8c6; color: var(--ink); }
.topbar-premium { max-width: 1280px; margin: 16px auto 0; top: 12px; border: 1px solid #dbe1d5; border-radius: 22px; padding: 16px 25px; background: #fffdf4ed; box-shadow: 0 6px 24px #233e3306; }
.topbar-premium .brand { font-size: 28px; }
.premium-page { max-width: 1280px; padding-inline: 40px; }
.premium-page .hero-premium { grid-template-columns: 1.1fr 1fr; gap: 54px; padding: 80px 0 64px; }
.hero-copy h1 { font-size: clamp(48px,4.65vw,66px); line-height: 1.09; letter-spacing: -2.1px; max-width: 610px; }
.hero-copy h1 em { color: var(--ink); }
.hero-copy h1 em::after { content: none; }
.hero-word-slot { min-height: 1.2em; padding-bottom: .07em; }
.hero-copy h1 .hero-swap-word { color: #886000; position: relative; display: inline-block; background: linear-gradient(transparent 64%,#f6d973 64%,#f6d973 92%,transparent 92%); }
.hero-copy p { font-size: 17px; line-height: 1.8; max-width: 400px; }
.hero-copy .eyebrow { font-size: 10px; letter-spacing: 1.8px; }
.hero-reassurance { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 24px; font-size: 11px; color: #53664f; }
.hero-reassurance span { display: inline-flex; align-items: center; gap: 6px; }
.premium-page .hero-demo { padding: 18px 16px 12px; border: 1px solid #dce1d0; border-radius: 140px 140px 28px 28px; background: #edf0e2; box-shadow: 0 8px 0 #e0e5d4,0 24px 50px #3047280b; }
.hero-demo .conversation-stage { background: transparent; border-radius: 115px 115px 18px 18px; height: 510px; }
.hero-demo .live-card { left: 7px; right: 7px; border: 1px solid #d4dec9; border-radius: 19px; box-shadow: 0 5px 0 #d9e0cc,0 12px 28px #263d2510; background: #fffef8; }
.hero-demo .stage-label { font-size: 8px; top: 25px; letter-spacing: 1px; }
.hero-demo .scenario-selector { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin: 0; padding: 14px 2px 2px; }
.scenario-selector button { min-height: 37px; border: 1px solid transparent; border-radius: 11px; font-size: 11px; padding: 7px 4px; transition: background .25s,box-shadow .25s,transform .25s; }
.scenario-selector button:after { display: none; }
.scenario-selector button[aria-pressed=true] { background: #fffdf5; border-color: #cfd9c1; color: #304c31; box-shadow: 0 3px 0 #d4dec7; }
.scenario-selector button:hover { background: #fffdf5; transform: translateY(-2px); }
.premium-page .proof-strip { border: 1px solid #dce2d1; background: #f0f2e5; border-radius: 22px; padding: 26px 16px; }
.proof-strip>div { padding-inline: 28px; }
.proof-strip span { font-size: 12px; }
.proof-strip strong { font-size: 16px; margin-top: 5px; }
.experience { padding: 108px 0; gap: 80px; }
.experience h2,.scenes h2,.conversation-example h2 { font-size: clamp(36px,3.8vw,52px); line-height: 1.08; letter-spacing: -1.3px; }
.experience .flow-item { grid-template-columns: 48px minmax(0,1fr); gap: 20px; padding: 26px; margin-bottom: 14px; background: #fffdf7; border: 1px solid #dce3d5; border-radius: 23px; box-shadow: var(--surface-shadow); }
.flow-mark { font-size: 22px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 15px; background: #ecf0df; color: #54713f; }
.flow-item:nth-child(2) .flow-mark { background: #f9e7ae; color: #786020; }
.flow-item:nth-child(3) .flow-mark { background: #e4eae9; color: #4a6660; }
.flow-item h3 { font-size: 24px; margin-top: 0; }
.flow-item p { font-size: 14px; line-height: 1.75; }
.practice-method>p { color: #5a6b51!important; font-size: 13px!important; }
.landing-tato-note { margin-top: 26px; }
.premium-page .scenes { border-radius: 32px; border: 1px solid #d9e1cc; background: #eaf0df; padding: 46px 32px 28px; }
.scenes-head { margin-bottom: 34px; }
.landing-world-strip { display: flex; gap: 6px; flex-wrap: wrap; }
.landing-world-strip span { border: 1px solid #cad7ba; border-radius: 20px; padding: 6px 9px; font-size: 10px; }
.scene { border: 1px solid #dbe1d2; border-radius: 22px; overflow: hidden; background: #fffef8; box-shadow: 0 5px 0 #d5dfc9; }
.scene-art { height: 195px; }
.scene-body { padding: 25px 22px 18px; }
.scene-body h3 { font-size: 27px; line-height: 1.12; min-height: 62px; }
.scene-body p { font-size: 14px; line-height: 1.7; }
.scene-body button { font-size: 12px; min-height: 52px; }
.scene-body button>span { background: #eaf0dd; width: 34px; height: 34px; }
.conversation-example { padding: 104px 0; gap: 70px; }
.example-dialogue { padding: 27px; background: #f0f2e6; border: 1px solid #dce3d1; border-radius: 28px; box-shadow: var(--surface-shadow); }
.example-dialogue dl { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 12px; align-items: center; }
.example-dialogue dt { font-size: 11px; color: #536b48; }
.example-dialogue dd { margin: 0; padding: 13px 16px; border-radius: 14px 14px 14px 3px; background: #fffef8; font-size: 16px; }
.example-dialogue dd:nth-of-type(even) { background: #dfe8d3; color: #405636; border-radius: 14px 14px 3px 14px; }
.plans-section { padding: 70px 0 95px; }
.plans-heading h2 { font-weight: 500; font-size: clamp(36px,4vw,54px); line-height: 1.08; }
.plans-grid { gap: 22px; }
.plan-card { border-radius: 25px; background: #fffef8; box-shadow: 0 5px 0 #e2e6d6; padding: 28px; }
.plan-card.plan-featured { background: #fff2c5; box-shadow: 0 7px 0 #d4b24e,0 20px 35px #9478250a; }
.plan-price { font-size: 39px; }
.plan-card li:before { color: #4a7236; }
.premium-page .final-cta { width: auto; margin: 0 0 48px; border-radius: 34px; padding: 35px 65px 0; background: #294535; box-shadow: inset 0 0 0 1px #486047; }
.final-copy { padding-block: 28px 50px; }
.site-footer { max-width: 1280px; padding-inline: 40px; }
/* The app: generous work area, tactile controls, quiet supporting surfaces. */
.app-shell { background: radial-gradient(ellipse at 100% 0,#e8eedc,transparent 60%),var(--cream); }
.app-head { padding-bottom: 24px; border-bottom: 1px solid #dce3d3; margin-bottom: 30px; }
.app-head h1 { font-size: clamp(34px,3.5vw,47px); }
.card { border: 1px solid #d9e1d0; border-radius: 27px; box-shadow: var(--surface-shadow); }
.home-feature { background: #294c3a!important; padding: 35px; min-height: 300px; }
.home-feature h2 { font-size: 42px; color: #fff9e8; }
.home-feature-art { background: radial-gradient(ellipse at center,#5b7850 0 44%,transparent 45%); }
.home-feature-art>span { color: #fbecb4; }
.rhythm-card { background: #eef1df; }
.rhythm-card h2 { font-size: 30px; }
.rhythm-card .stat strong { font-size: 52px; }
.place { background: #fffef8; box-shadow: 0 4px 0 #dde4d2; }
.place-icon { width: 61px; height: 61px; border-radius: 20px; }
.board-heading { padding-bottom: 20px; border-bottom: 1px solid #dce3d3; }
.board-chapter { box-shadow: 0 6px 0 #d8e0ce,0 20px 40px #29453506; }
.board-score { background: #fff7d9; border-color: #e4d59a; box-shadow: 0 4px 0 #e5dba9; }
.city-open-stage,.city-open-map { border-radius: 28px; }
.city-dock { box-shadow: 0 5px 0 #d7dfca,0 16px 34px #263e2520; }
.city-dock button { transition: transform .25s var(--ease-ui),background .25s; }
.city-dock button:hover { transform: translateY(-5px); }
.place-dialog,.profile-dialog { background: #fffdf5; border: 1px solid #d8e0cd; }
.place-dialog .place-role { color: #526747; }
.profile-backdrop { backdrop-filter: blur(7px); z-index: 70; }
.profile-settings label { padding: 15px; border-radius: 15px; }
.profile-settings strong { font-size: 15px; }
.profile-settings small { font-size: 11px; }
.voice-stage { box-shadow: 0 7px 0 #d5dfca,0 20px 45px #2d492512; border-radius: 27px; }
.voice-support-card,.voice-feedback-card { background: #fffdf7; border: 1px solid #dce3d3; padding: 23px; }
.screen { background: radial-gradient(ellipse at 10% 10%,#e2ebd1,transparent 55%),var(--cream); }
.auth-card,.onboard-card { padding: 36px; border: 1px solid #d5dfc9; box-shadow: 0 7px 0 #e1e7d5,0 30px 70px #2945350b; }
.choice { border-radius: 17px; padding: 18px; }
.choice.active { background: #e9f0da; box-shadow: inset 4px 0 #658746; }
.input { border-radius: 13px; transition: border-color .2s,box-shadow .2s; }
.input:focus { box-shadow: 0 0 0 4px #7399571a; }
body:is([data-screen=app],[data-screen=session]) .sidebar { inset: auto 50% 18px auto; transform: translateX(50%); width: min(620px,calc(100% - 30px)); height: 78px; border: 1px solid #ccd8bf; border-radius: 24px; background: #fffdf2f2; backdrop-filter: blur(18px); box-shadow: 0 6px 0 #d9e1cd,0 16px 45px #2945351c; padding: 10px!important; }
body:is([data-screen=app],[data-screen=session]) .side-nav button { font-size: 13px; border-radius: 16px; transition: transform .25s var(--ease-ui),background .25s; }
body:is([data-screen=app],[data-screen=session]) .side-nav button.active { background: #f7cf53; color: #354a2c; }
body:is([data-screen=app],[data-screen=session]) .side-nav button { min-height: 52px; }
body:is([data-screen=app],[data-screen=session]) .side-nav button:hover { transform: translateY(-2px); }
/* Reveal only after the observer has been installed. Content is visible without JS. */
@media(prefers-reduced-motion:no-preference) {
  .premium-page .will-reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s ease,transform .65s var(--ease-ui); }
  .premium-page .will-reveal.is-visible { opacity: 1; transform: none; }
  .premium-page .scene.is-visible:hover { transform: translateY(-7px); }
  .premium-page .tiny-spark { animation: refresh-spark 18s linear infinite; }
  .board-stop.current .board-piece { animation: refresh-piece 3s ease-in-out infinite; }
  .dashboard>.card { animation: enter .55s var(--ease-ui) both; }
  .dashboard>.card:nth-child(2) { animation-delay: .08s; }
}
@keyframes refresh-spark { to { transform: rotate(180deg); } }
@keyframes refresh-piece { 50% { transform: translateY(-4px); } }
@media(min-width:1100px) {
  body[data-screen=app] .app-shell { padding-left: 235px; }
  body[data-screen=app] .sidebar { inset: 20px auto 20px 20px; transform: none; width: 210px; height: auto; flex-direction: column; align-items: stretch; padding: 25px 16px!important; border-radius: 26px; }
  body[data-screen=app] .sidebar>.brand { display: flex; font-size: 27px; margin: 0 0 30px; }
  body[data-screen=app] .side-nav { display: flex; flex-direction: column; width: 100%; gap: 12px; margin: 0; }
  body[data-screen=app] .side-nav button { justify-content: flex-start; padding-inline: 17px; gap: 14px; font-size: 15px; }
  body[data-screen=app] .side-footer { display: block; margin-top: auto; padding: 25px 8px 0; font-size: 12px; }
  body[data-screen=app] .main { padding: 45px 36px 70px; }
}
@media(max-width:1100px) {
  .topbar-premium { margin-inline: 20px; }
  .premium-page .hero-premium { gap: 30px; }
  .hero-copy h1 { font-size: 48px; }
  .experience { gap: 35px; }
  .experience .flow-item { padding: 20px; gap: 12px; }
  .scene-body { padding: 22px 18px; }
  .scene-body h3 { font-size: 25px; }
}
@media(max-width:760px) {
  .topbar-premium { margin: 10px 12px 0; top: 8px; padding: 12px 15px; border-radius: 17px; }
  .topbar-premium .brand { font-size: 24px; }
  .topbar-premium .brand-mark { width: 33px; height: 35px; }
    .nav .btn-dark { display: none; }
  .nav .nav-auth { font-size: 13px; min-width: 48px; }
  .premium-page { padding-inline: 22px; }
  .premium-page .hero-premium { grid-template-columns: minmax(0,1fr); padding: 48px 0 36px; gap: 35px; }
  .hero-copy h1 { font-size: clamp(39px,8.9vw,58px); letter-spacing: -1.4px; max-width: 550px; }
  .hero-copy p { font-size: 16px; }
  .hero-reassurance { gap: 12px; font-size: 10px; }
  .premium-page .hero-demo { width: 100%; max-width: 500px; margin: auto; border-radius: 110px 110px 24px 24px; padding: 10px; }
  .hero-demo .conversation-stage { height: 510px; }
  .hero-demo .scenario-selector { margin: 0; padding: 14px 2px 2px; gap: 6px; }
  .hero-demo .live-card { left: 3px; right: 3px; }
  .premium-page .proof-strip { padding: 17px 6px; border-radius: 18px; }
  .proof-strip>div { padding-inline: 9px; }
  .proof-strip span { font-size: 10px; }
  .proof-strip strong { font-size: 12px; }
  .experience { padding: 65px 0; gap: 25px; }
  .experience .flow-item { grid-template-columns: 35px minmax(0,1fr); padding: 22px 17px; }
  .flow-mark { width: 32px; height: 35px; font-size: 18px; border-radius: 10px; }
  .flow-item h3 { font-size: 23px; }
  .premium-page .scenes { margin-inline: 0; padding: 29px 16px 23px; border-radius: 25px; }
  .scene-body h3 { min-height: 0; font-size: 28px; }
  .scene-body p { min-height: 0; }
  .scene-body button { font-size: 13px; }
  .conversation-example { padding: 65px 0; gap: 26px; }
  .example-dialogue { padding: 20px 15px; border-radius: 22px; }
  .example-dialogue dd { font-size: 14px; padding: 12px; }
  .plans-section { padding: 50px 0 65px; }
  .plans-grid { gap: 26px; }
  .plan-card.plan-featured { transform: none; }
  .premium-page .final-cta { grid-template-columns: 95px minmax(0,1fr); padding: 18px 15px 0; gap: 8px; border-radius: 24px; }
  .final-copy { padding: 10px 0 30px; }
  .final-cta h2 { font-size: 36px; }
  .final-tato { width: 160px; margin-left: -55px; }
  .site-footer { padding-inline: 22px; }
  .home-feature { padding: 27px; min-height: 275px; }
  .home-feature h2 { font-size: 34px; }
  .auth-card,.onboard-card { padding: 26px 21px; }
  body:is([data-screen=app],[data-screen=session]) .sidebar { bottom: max(12px,env(safe-area-inset-bottom)); width: calc(100% - 24px); border-radius: 22px; }
  body:is([data-screen=app],[data-screen=session]) .main { padding-bottom: 125px; }
}
@media(max-width:360px) {
  .premium-page { padding-inline: 16px; }
  .hero-copy h1 { font-size: 36px; }
  .hero-copy .actions { gap: 10px; }
  .hero-copy .hero-how { font-size: 11px; }
  .hero-demo .stage-label { font-size: 7px; }
  .hero-demo .stage-sticker { max-width: 85px; font-size: 9px; }
  .final-cta h2 { font-size: 30px; }
  .premium-page .final-cta { grid-template-columns: 68px minmax(0,1fr); }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .premium-page .will-reveal { opacity: 1; transform: none; transition: none; }
}
.journey-board{max-width:920px!important;padding-bottom:100px}.journey-board .board-heading{margin-bottom:18px}.journey-status{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;margin:0 0 24px;padding:20px 24px;border:1px solid #ddcfaa;border-radius:24px;background:linear-gradient(145deg,#fffdf5,#fff8dc);box-shadow:0 7px 0 #eadcb8}.journey-status__class{display:flex;align-items:center;gap:11px}.journey-status__class>span{display:grid;width:48px;height:48px;place-items:center;border-radius:16px;background:color-mix(in srgb,var(--class-color) 20%,#fff);font-size:25px}.journey-status__class div{display:grid}.journey-status__class small{font:700 9px Fredoka;letter-spacing:1.2px;color:#8b795a}.journey-status__class strong{font:600 19px Fredoka;color:#2b4639}.journey-status__xp{min-width:220px}.journey-status__xp>div:first-child{display:flex;justify-content:space-between;gap:12px;margin-bottom:7px;font-size:12px}.journey-status__xp span{color:#81745e}.journey-xp-bar{height:11px;overflow:hidden;border-radius:999px;background:#e9e0c9}.journey-xp-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#68a05c,#efbc3f);box-shadow:inset 0 1px #fff8}.journey-status__facts{display:grid;gap:4px;text-align:right;font-size:12px;color:#766b58}.journey-status__facts b{color:#294638}.journey-board .board-intro{margin-bottom:36px}.journey-cities{display:grid;justify-items:center}.journey-city{position:relative;width:min(100%,780px);overflow:hidden;border:1px solid #ffffff7d;border-radius:32px;background:linear-gradient(150deg,color-mix(in srgb,var(--city-a) 68%,#fff),color-mix(in srgb,var(--city-b) 58%,#fff9e9));box-shadow:0 12px 0 color-mix(in srgb,var(--city-b) 36%,#bba76e),0 24px 44px #28453620}.journey-city.is-current{outline:4px solid #f0b93f;outline-offset:5px}.journey-city__head{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:24px 26px 18px;background:#fff8}.journey-city__symbol{display:grid;width:58px;height:58px;place-items:center;border:1px solid #fff9;border-radius:19px;background:#fff8;font-size:30px;box-shadow:0 5px 0 #32513c1a}.journey-city__head small{font:700 10px Fredoka;letter-spacing:1.3px;color:#375c4f}.journey-city__head h2{margin:3px 0 2px;font:600 29px/1 Fredoka;color:#203c32}.journey-city__head p{margin:0;color:#49685d;font-size:13px}.journey-city__count{display:grid;text-align:right}.journey-city__count b{font:600 25px Fredoka}.journey-city__count span{font-size:11px;color:#4f695e}.journey-city__progress{height:5px;background:#ffffff69}.journey-city__progress i{display:block;height:100%;background:#315e4a;opacity:.7}.journey-city__map{position:relative;min-height:250px;padding:45px 28px 36px}.journey-city__terrain{position:absolute;inset:0;overflow:hidden;opacity:.24}.journey-city__terrain i{position:absolute;border:2px solid #fff9;border-radius:50%;background:#fff4}.journey-city__terrain i:nth-child(1){width:220px;height:110px;left:-50px;bottom:-30px}.journey-city__terrain i:nth-child(2){width:170px;height:80px;right:-25px;top:18px}.journey-city__terrain i:nth-child(3){width:90px;height:90px;left:46%;top:42%;background:transparent}.journey-city__terrain i:nth-child(4){width:14px;height:14px;right:20%;bottom:17%;background:#fff}.journey-city__map ol{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;align-items:start;margin:0;padding:0;list-style:none}.journey-city__map li{position:relative;display:grid;justify-items:center}.journey-city__map button{position:relative;z-index:2;display:grid;justify-items:center;gap:6px;width:100%;padding:0 4px;background:none;text-align:center;color:#234238}.journey-stop__pin{display:grid;width:58px;height:58px;place-items:center;border:3px solid #fff;border-radius:21px;background:#fff8ea;font-size:25px;box-shadow:0 7px 0 #31533c35;transition:transform .25s}.journey-city__map button:hover .journey-stop__pin,.journey-city__map button:focus-visible .journey-stop__pin{transform:translateY(-5px) rotate(-3deg)}.journey-city__map strong{padding:5px 8px;border-radius:8px;background:#fffbe8db;font:600 13px Fredoka}.journey-city__map small{max-width:110px;font:700 8px DM Sans;letter-spacing:.5px;color:#315547}.journey-city__map li.is-done .journey-stop__pin{background:#3f745b;color:#fff}.journey-city__map li.is-current .journey-stop__pin{background:#f0b93f;box-shadow:0 7px 0 #aa7c13,0 0 0 8px #ffe18055}.journey-route{position:absolute;z-index:0;top:28px;left:62%;width:85%;border-top:4px dashed #fff9;transform:rotate(calc((var(--stop) - 2) * 1.5deg))}.journey-city footer{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:14px 24px;border-top:1px solid #fff8;background:#fff7;font-size:12px;color:#49675c}.journey-city footer button{padding:9px 13px;border:1px solid #31584633;border-radius:12px;background:#fff8;color:#294a3d;font-weight:800}.journey-connector{height:76px;display:grid;place-items:center;color:#c1972f}.journey-connector:before,.journey-connector:after{content:'';width:2px;height:22px;background:#d4c58f}.journey-connector span{font-size:14px}.journey-city__map li.is-locked .journey-stop__pin{filter:saturate(.45);opacity:.8}
@media(max-width:720px){.journey-status{grid-template-columns:1fr;gap:14px}.journey-status__facts{grid-template-columns:1fr 1fr;text-align:left}.journey-city{border-radius:24px}.journey-city__head{grid-template-columns:auto 1fr;padding:20px 17px}.journey-city__count{grid-column:2;text-align:left}.journey-city__map{padding:34px 12px 26px}.journey-city__map ol{grid-template-columns:repeat(3,1fr);gap:24px 4px}.journey-route{display:none}.journey-city footer{align-items:flex-start;padding:13px 16px}.journey-city__symbol{width:48px;height:48px}.journey-city__head h2{font-size:24px}.journey-status__xp{min-width:0}}
@media(prefers-reduced-motion:reduce){.journey-stop__pin,.journey-xp-bar i{transition:none!important}}

/* Trilha v2 (23/09): capítulo com a arte real da cidade e os destinos fora
   de foco num mapa de cartões-postais. */
.journey-city__art { display: block; height: 150px; overflow: hidden; }
.journey-city__art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.journey-city__head { background: #fffcf1ee; }
.journey-more { width: min(100%, 780px); margin: 56px auto 0; }
.journey-more header h2 { margin: 0; font: 600 26px/1.1 Fredoka, sans-serif; color: #203c32; }
.journey-more header p { margin: 6px 0 0; font-size: 14px; color: #5d6d5d; }
.journey-more ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; }
.journey-postcard button {
  display: grid; gap: 4px; width: 100%; padding: 8px 8px 12px;
  border: 1px solid #e6dcc2; border-radius: 18px; background: #fffdf6;
  text-align: left; color: #203c32; cursor: pointer;
  box-shadow: 0 5px 0 #eadfbf;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
}
.journey-postcard button:hover { transform: translateY(-4px); box-shadow: 0 9px 0 #eadfbf; }
.journey-postcard button:focus-visible { outline: 3px solid #2c5a45; outline-offset: 3px; }
.journey-postcard__art { position: relative; display: block; aspect-ratio: 20 / 11; overflow: hidden; border-radius: 12px; margin-bottom: 6px; }
.journey-postcard__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.journey-postcard__art i { position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fffdf6e6; font-style: normal; font-size: 13px; }
.journey-postcard b { padding: 0 4px; font: 600 16px/1.15 Fredoka, sans-serif; }
.journey-postcard small { padding: 0 4px; font-size: 12px; color: #6b7a66; }
.journey-postcard__bar { height: 4px; margin: 6px 4px 0; border-radius: 999px; background: #eee6d1; overflow: hidden; }
.journey-postcard__bar i { display: block; height: 100%; background: #5f9a5a; }
.journey-postcard.is-complete small { color: #3f7a4f; font-weight: 700; }
:root[data-theme="dark"] .journey-postcard button { background: #1d2822; border-color: #324238; color: #eef3e6; box-shadow: 0 5px 0 #101713; }
:root[data-theme="dark"] .journey-more header h2 { color: #eef3e6; }
:root[data-theme="dark"] .journey-more header p, :root[data-theme="dark"] .journey-postcard small { color: #a9b8a8; }
@media (max-width: 720px) {
  .journey-city__art { height: 110px; }
  .journey-more ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
.journey-evidence-note{margin:-12px 0 22px;color:#625a4a;font-size:12px;line-height:1.5}
.learning-evidence{min-width:0;margin:20px 0 28px;padding:20px 22px;border:1px solid #d9e4d8;border-radius:20px;background:#f8fbf5;color:#294638}
.learning-evidence header{margin-bottom:12px}
.learning-evidence .eyebrow{font-size:10px;letter-spacing:1px;color:#65806d}
.learning-evidence h2{margin:3px 0 0;font:600 22px/1.15 Fredoka, sans-serif}
.learning-evidence__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:10px;margin:0;padding:0;list-style:none}
.learning-evidence__item{min-width:0;padding:13px 14px;border:1px solid #dce5d9;border-radius:14px;background:#fff}
.learning-evidence__item h3{margin:0 0 8px;font:600 16px/1.25 Fredoka,sans-serif;overflow-wrap:anywhere}
.learning-evidence__item ul{display:grid;gap:5px;margin:0;padding-left:17px;font-size:12px;line-height:1.4}
.learning-evidence__item li{overflow-wrap:anywhere}
.learning-evidence__item small{display:block;margin-top:9px;color:#68776c;font-size:11px}
.learning-evidence__empty,.learning-evidence__note{margin:0;color:#5e6f62;font-size:12px;line-height:1.5}
.learning-evidence__note{margin-top:12px}
.retention-plan{margin:22px 0 34px;padding:24px;border:1px solid #dfd4b7;border-radius:26px;background:linear-gradient(145deg,#fffdf6,#fff9e6);box-shadow:0 7px 0 #eadfbe;color:#294638}.retention-plan>header{display:flex;justify-content:space-between;align-items:center;gap:18px}.retention-plan h2{margin:4px 0;font:600 27px/1.1 Fredoka,sans-serif}.retention-plan header p{margin:5px 0 0;color:#607166;font-size:13px}.retention-plan__note{flex:none;padding:9px 12px;border-radius:12px;background:#f6e9bd;font:600 13px Fredoka,sans-serif}.retention-plan>ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0;padding:0;list-style:none}.retention-week{min-width:0;padding:14px;border:1px solid #e8e1ce;border-radius:17px;background:#fffdf8}.retention-week.is-current{border-color:#d8aa2c;box-shadow:0 0 0 2px #f3dc8d}.retention-week h3{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px;font:600 17px Fredoka,sans-serif}.retention-week h3 span{font:700 10px 'DM Sans',sans-serif;letter-spacing:.1em;color:#6e7c6d}.retention-week h3 b{padding:4px 7px;border-radius:99px;background:#f5e6ad;font:700 9px 'DM Sans',sans-serif;color:#644f16}.retention-week ul{display:grid;gap:5px;margin:0;padding:0;list-style:none}.retention-week li button{display:grid;width:100%;gap:2px;padding:8px 9px;border-radius:10px;background:#f7f5eb;text-align:left;color:#294638}.retention-week li button:hover,.retention-week li button:focus-visible{background:#f3ebd2}.retention-week li button>span{font:700 9px 'DM Sans',sans-serif;letter-spacing:.04em;color:#778173}.retention-week li strong{font:600 14px/1.2 Fredoka,sans-serif}.retention-week li small{font-size:10px;color:#68776c}.retention-plan__disclaimer{margin:0;color:#647568;font-size:11px;line-height:1.5}.journey-board .retention-plan+.board-intro{margin-bottom:36px}
:root[data-theme="dark"] .retention-plan{background:linear-gradient(145deg,#1c2922,#20291c);border-color:#405142;color:#eef3e6;box-shadow:0 7px 0 #111914}:root[data-theme="dark"] .retention-plan header p,:root[data-theme="dark"] .retention-plan__disclaimer,:root[data-theme="dark"] .retention-week h3 span,:root[data-theme="dark"] .retention-week li small{color:#a9b8a8}:root[data-theme="dark"] .retention-week{background:#17211b;border-color:#36443a}:root[data-theme="dark"] .retention-week li button{background:#222d25;color:#eef3e6}
@media(max-width:720px){.retention-plan{padding:18px 14px}.retention-plan>header{align-items:flex-start;flex-direction:column}.retention-plan>ol{grid-template-columns:1fr}.retention-plan h2{font-size:24px}}
/* Clear separation between map controls, scenery, addresses, and pedestrian life. */
.city-world .city-open-stage { height:900px; min-height:780px; max-height:none; }
.city-world .city-open-map { background:#eef1e3; }
.city-open-map>.city-redesigned { top:128px; bottom:105px; height:auto; border-block:1px solid #b7c8b344; overflow:hidden; }
.city-open-map::after { pointer-events:none; box-shadow:none; }
.city-open-title { top:14px; }
.city-open-title>div { box-shadow:none; background:#fffef6; }
.city-open-instruction { display:none; }
.city-open-hint { bottom:77px; border:0; background:none; }
.city-dock { bottom:14px; }
.world-ground { position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.city-redesigned .city-details { opacity:.95; z-index:4; }
.city-details .city-prop { position:absolute; width:var(--prop-width); height:var(--prop-height); transform:translate(-50%,-75%); overflow:visible; pointer-events:none; }
.city-redesigned .world-architecture { z-index:10; }
.city-redesigned .world-address { width:clamp(115px,13vw,157px); transform:translate(-50%,-60%); }
.city-redesigned .world-address svg { filter:drop-shadow(0 5px 1px #233e3309); }
.city-open-map .city-redesigned .city-poi { margin-top:39px; min-height:57px; }
.city-open-map .city-redesigned .poi-name { border:1px solid #d2ddc5; box-shadow:0 2px 0 #54734416; max-width:140px; font-size:11px; }
.city-open-map .city-redesigned .poi-pin { background:#fffbe8; width:34px; height:34px; }
.city-redesigned.city-art-3 .poi-name { background:#fff1d9; color:#47394b; border-color:#a88c9e; }
.city-redesigned.city-art-3 .world-address svg { filter:drop-shadow(0 6px 5px #171a3566); }
.world-life { position:absolute; inset:0; z-index:8; pointer-events:none; }
.world-traffic { position:absolute; width:60px; height:34px; left:12%; top:48%; transform:translateY(-50%); }
.world-traffic svg { width:100%; height:100%; overflow:visible; }
.city-art-3 .world-traffic { top:54%; }
.city-art-6 .world-traffic { top:54%; }
.traffic-plane { top:94%; width:88px; height:44px; }
.city-walker { position:absolute; left:var(--from-x); top:var(--from-y); width:18px; height:27px; transform:translate(-50%,-80%); }
.walker-person { display:block; position:relative; width:100%; height:100%; transform-origin:center bottom; }
.walker-head { position:absolute; top:1px; left:5px; width:9px; height:10px; border-radius:48%; background:#e8bc82; border-top:3px solid #75553e; z-index:3; }
.walker-shirt { position:absolute; top:10px; left:3px; width:13px; height:12px; border-radius:5px 5px 3px 3px; background:var(--coat); z-index:2; box-shadow:inset -3px 0 #00000012; }
.walker-arm { position:absolute; top:12px; left:0; width:4px; height:10px; border-radius:4px; background:#ddb384; transform-origin:top center; }
.walker-leg { position:absolute; top:20px; width:4px; height:7px; background:#4c5152; border-radius:2px; transform-origin:top; }
.leg-left { left:5px; }.leg-right { left:11px; }
.walker-shadow { position:absolute; bottom:-2px; left:0; width:21px; height:6px; border-radius:50%; background:#28443b25; }
.walker-case { position:absolute; left:16px; top:15px; width:8px; height:11px; border-radius:2px; border:1px solid #567684; background:#e4b270; box-shadow:0 2px #526a70; }
.walker-pack { position:absolute; left:12px; top:11px; width:6px; height:9px; background:#d2b775; border-radius:3px; z-index:3; }
.city-art-3 .walker-head { background:#f1c89c; }.city-art-3 .walker-shadow { background:#15152966; }
/* One Tato model across the landing, onboarding, invitations and practice room. */
.tato-small.tato-unified { border:0!important; background:none!important; box-shadow:none!important; border-radius:0; animation:none!important; }
.tato-small.tato-unified:before,.tato-small.tato-unified:after { display:none; }
.hero-demo .tato-small.tato-unified { width:195px; height:215px; top:119px; left:calc(50% - 97px); scale:1.08; transform:none; }
.home-feature-art .tato-small.tato-unified { width:160px; height:176px; left:calc(50% - 80px); top:18px; transform:none; }
.voice-stage .room-tato.tato-unified { width:280px; height:308px; left:calc(50% - 140px); bottom:104px; scale:1; animation:none; }
@media(prefers-reduced-motion:no-preference) {
 .world-traffic { animation:world-drive 24s linear infinite; animation-delay:-7s; }
 .traffic-plane { animation-duration:36s; animation-delay:-12s; }
 .city-art-6 .world-traffic { animation-name:world-roundabout; }
 .city-walker { animation:world-walk var(--walk-time) linear infinite; animation-delay:var(--walk-delay); }
 .walker-person { animation:world-step .6s ease-in-out infinite; }
 .walker-leg { animation:world-leg .6s ease-in-out infinite alternate; }
 .leg-right { animation-delay:-.6s; }
 .walker-arm { animation:world-arm .6s ease-in-out infinite alternate; }
 .world-surf { animation:world-surf 6s ease-in-out infinite; }
}
@keyframes world-drive { from { left:-12%; } to { left:112%; } }
@keyframes world-roundabout { 0% { left:-12%; top:54%; } 35% { left:33%; top:54%; } 45% { left:42%; top:66%; } 55% { left:59%; top:66%; } 65% { left:68%; top:54%; } 100% { left:112%; top:54%; } }
@keyframes world-walk { 0%,8%,100% { left:var(--from-x); top:var(--from-y); } 45%,55% { left:var(--to-x); top:var(--to-y); } }
@keyframes world-step { 50% { transform:translateY(-1px); } }
@keyframes world-leg { from { transform:rotate(-15deg); } to { transform:rotate(15deg); } }
@keyframes world-arm { from { transform:rotate(-12deg); } to { transform:rotate(18deg); } }
@keyframes world-surf { 50% { transform:translateY(5px); opacity:.4; } }






@media(max-width:760px) {
 .city-world .city-open-stage { height:830px; min-height:830px; }
 .city-open-map>.city-redesigned { top:110px; bottom:100px; }
 .city-open-title { width:calc(100% - 18px); grid-template-columns:33px minmax(0,1fr) 33px; gap:5px; }
 .city-open-title h1 { font-size:26px; }
 .city-open-title>div { padding:10px 5px; border-radius:17px; }
 .city-open-title p { font-size:10px; }
 .city-redesigned .world-address { width:95px; }
 .city-open-map .city-redesigned .city-poi { width:94px; margin-top:29px; }
 .city-open-map .city-redesigned .poi-name { max-width:96px; font-size:9px; padding:5px 6px; }
 .city-open-map .city-redesigned .poi-pin { width:31px; height:31px; }
 .city-open-hint { font-size:9px; padding-inline:6px; }
 .city-redesigned .city-details { opacity:.8; }
 .city-details .city-prop { width:calc(var(--prop-width)*.68); height:calc(var(--prop-height)*.68); }
 .city-walker { scale:.85; }
 .voice-stage .room-tato.tato-unified { width:235px; height:259px; left:calc(50% - 117px); bottom:65px; scale:1; }
 .hero-demo .tato-small.tato-unified { top:130px; scale:1.05; }
}
@media(max-width:360px) {
 .city-redesigned .world-address { width:83px; }
 .city-open-map .city-redesigned .city-poi { width:84px; }
 .city-open-map .city-redesigned .poi-name { max-width:87px; font-size:8px; }
 .city-dock { gap:0; padding:5px; }
 .city-open-title h1 { font-size:23px; }
}
@media(prefers-reduced-motion:reduce) {
}
/* A quieter practice/result hierarchy. (As demonstrações da landing antiga saíram em 2026-10-04.) */
body[data-screen=session] .result-card{max-width:620px;padding:38px 44px;margin:24px auto 55px;border:1px solid #dce3d3;border-radius:28px;background:#fffef9;text-align:center;box-shadow:0 12px 40px #263e3306}
.result-icon{width:60px;height:60px;border-radius:22px;background:#eaf0df;color:#6a894e;display:grid;place-items:center;margin:0 auto 22px;transform:rotate(-6deg)}
.result-eyebrow{display:block;font-size:10px;letter-spacing:1.6px;color:#6d7a60;text-transform:uppercase}
body[data-screen=session] .result-card h1{font:500 clamp(30px,3vw,40px)/1.14 var(--display);letter-spacing:-.7px;margin:15px auto 12px;max-width:420px;color:#233f34}
.result-card .result-subtitle{font-size:14px;color:#68725f;line-height:1.6;margin:0 0 24px}
.completion-path{display:flex;align-items:center;justify-content:center;margin:24px auto;gap:16px}
.completion-path span{border:1px solid #d6dece;border-radius:50%;width:34px;height:34px;display:grid;place-items:center;color:#77836c;position:relative;font-size:13px}
.completion-path span+span:before{content:'';width:17px;height:2px;background:#d6dece;position:absolute;right:100%}
.completion-path .done{background:#e7efd9;border-color:#b5c997;color:#4b6b35}
.result-takeaway{text-align:left;background:#f3f4e9;border-radius:18px;padding:23px 25px;margin:26px 0}
.result-takeaway>span{font-size:9px;letter-spacing:1.5px;color:#71805d;font-weight:700}
.result-takeaway h2{font:500 22px/1.3 var(--display);margin:10px 0 12px;color:#304b39}
.result-takeaway p{font:500 26px/1.4 var(--display);margin:0 0 8px;color:#304b39}
.result-takeaway small{font-size:12px;color:#6b775e;line-height:1.5}
.result-card>.btn{width:100%;margin:6px 0 12px}
.result-card>.text-link{display:block;margin:8px auto 20px;font-size:13px}
.result-card details{text-align:left;border:0;border-top:1px solid #e3e7dc;border-radius:0;background:none;margin:0;padding:0;box-shadow:none}
.result-card details summary{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:54px;padding:15px 0;font:500 13px 'DM Sans',sans-serif;color:#4e6345;cursor:pointer}
.result-card details summary:after{content:'+';font-size:16px}
.result-card details[open] summary:after{content:'−'}
.result-card details summary span{display:none}
.result-card details p,.result-card details small{font-size:12px;line-height:1.7;color:#627256}
.result-card .result-privacy summary{font-size:11px;color:#69745f}
.result-card .feedback-columns{margin:10px 0 20px}
.result-card .feedback-columns strong{font-size:17px}
.result-card .summary-stats{margin:24px auto 16px;padding:20px 0;background:#f3f4e9;border-radius:18px;justify-content:center}
.result-card .summary-stats strong{font:500 32px var(--display)}
.result-card .result-progress-label{font-size:12px;margin-bottom:24px;color:#67755c}
.result-card .result-save{display:block;font-size:11px;color:#6a765f;margin-bottom:24px}
.voice-companion .voice-local-note{padding:12px 0;border-top:1px solid #dce3d3;background:none}
.voice-local-note summary{cursor:pointer;font-size:11px;color:#63715a;line-height:1.6}
.voice-companion .self-preview{display:none}
.voice-companion>h2>span[data-turn-subtitle]{display:none}
.voice-companion>h2{margin:20px 0 16px}
.voice-companion .suggested-question{margin:12px 0}
.voice-companion .suggested-question>p{display:none}
.voice-experience .voice-companion{background:#fffdf7;border:1px solid #dce3d3;border-radius:24px;padding:28px;align-self:center}
.voice-experience .voice-companion .turn-count{display:none}
.voice-experience .voice-companion h2{font-size:29px;line-height:1.2;margin:28px 0 20px}
.voice-experience .voice-companion h2 br{display:none}
.voice-experience .voice-companion h3{font:500 18px/1.4 var(--display);text-align:left;margin:27px 0 6px}
.voice-experience .voice-instruction{font-size:12px;text-align:left;margin:0 0 20px;min-height:40px}
.voice-experience .hint-toggle{background:#f4f3e7;border:0;border-radius:10px;min-height:44px;text-align:left;justify-content:flex-start;padding:12px 15px;font-size:12px;color:#5e6c4b}
.voice-experience .practice-help{padding:18px;background:#f6f0d9;border:0;margin:12px 0 0;border-radius:12px}
.voice-experience .practice-help p{font:500 21px/1.4 var(--display);margin:10px 0;color:#304738}
.voice-experience .practice-help small{font-size:11px;color:#637052}
.voice-experience .voice-tools{gap:8px;margin:18px 0 4px}
.voice-experience .voice-tools button{border-radius:10px;min-height:48px;background:#f3f5ed}
.voice-experience .voice-tools button:disabled{opacity:.5}
.voice-experience .voice-tools span{font-size:10px}
.voice-experience .voice-primary{background:#243f34;border-color:#243f34;box-shadow:0 4px 0 #172d24;border-radius:13px;min-height:56px}
.voice-experience .voice-finish-early{background:transparent;color:#6b7562;padding:14px;font-size:12px;text-decoration:underline;text-underline-offset:4px}
.voice-experience .voice-stage .room-shelf,.voice-experience .voice-stage .room-object{display:none}
.voice-experience .voice-stage .room-sign{box-shadow:none;background:#fff9e8d9;transform:rotate(-3deg)}
.voice-experience .voice-stage .room-sign small{display:none}
.voice-experience .voice-stage .room-window{opacity:.8}
.voice-experience .voice-layout{grid-template-columns:minmax(0,1fr) minmax(320px,380px);gap:30px}
body[data-screen=session] .sidebar{display:none}
body[data-screen=session] .main{padding-bottom:40px}
body[data-screen=session] .result-card{margin-top:12px;margin-bottom:20px;padding-top:30px;padding-bottom:26px}
.result-card .result-icon{margin-bottom:17px}
.result-card .result-takeaway{margin:20px 0;padding:20px 24px}
.result-card .completion-path{margin:20px auto}
@media(max-width:900px){.voice-experience .voice-layout{grid-template-columns:1fr}.voice-experience .voice-companion{max-width:none;padding:24px}.voice-experience .voice-stage .voice-room{height:360px}.voice-experience .voice-companion h2{margin-top:20px}}
@media(max-width:600px){.voice-experience .voice-layout{gap:20px}.voice-experience .voice-stage .voice-room{height:245px}.voice-experience .voice-stage .room-tato{scale:.6;bottom:12px}.voice-experience .voice-stage .room-window{top:25px;height:155px}.voice-experience .voice-stage .room-sign{top:65px;left:12px;max-width:120px;padding:8px}.voice-experience .voice-stage .room-sign span{font-size:16px}.voice-experience .voice-stage .room-table{bottom:0}.voice-experience .voice-stage .room-plant{display:none}.voice-experience .voice-person{bottom:70px;padding:0;background:none}.voice-experience .voice-caption{font-size:15px;min-height:60px;padding:15px}.voice-experience .voice-companion{padding:22px}.voice-experience .voice-companion h2{font-size:25px}.voice-experience .voice-companion h3{margin-top:18px}.voice-experience .voice-instruction{min-height:0}.voice-experience .voice-header{gap:12px}.voice-experience .voice-header .eyebrow{display:none}.voice-experience .voice-header h1{font-size:23px}}
@media(max-width:800px){.result-card .summary-stats{gap:24px}}
@media(max-width:480px){body[data-screen=session] .result-card{padding:28px 22px;margin:8px auto 25px;border-radius:22px}.result-takeaway{padding:20px}}
/* The SVG skeleton owns its transforms; old independent CSS loops are disabled. */
.tato-rig,.tato-rig *{animation:none!important;transition:none!important}
.tato-small.tato-unified,.room-tato.tato-unified{animation:none!important}
.tato-rig{overflow:visible;isolation:isolate}
.tato-rig [data-rig-part]{transform-box:view-box;transform-origin:0 0}
.tato-rig [data-rig-part=body]{will-change:transform}
@media(prefers-reduced-motion:reduce){.tato-rig [data-rig-part]{will-change:auto}}
.voice-experience .voice-companion{padding:26px}
.lesson-cycle{display:flex;align-items:center;justify-content:space-between;gap:5px;margin:22px 0 24px;padding-bottom:21px;border-bottom:1px solid #e1e7d8}
.lesson-cycle>span{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11px;color:#65725a;flex:1}
.lesson-cycle b{width:32px;height:32px;border:1px solid #d4dec9;border-radius:50%;display:grid;place-items:center;background:#f7f8f1;font-size:13px}
.lesson-cycle i{color:#9aa48e;font-style:normal}
.lesson-cycle .is-active{font-weight:700;color:#254b37}
.lesson-cycle .is-active b{background:#274c38;color:#fff;border-color:#274c38;box-shadow:0 0 0 5px #e8efdf}
.lesson-now{display:flex;align-items:center;gap:9px}
.lesson-state-icon{width:30px;height:30px;display:grid;place-items:center;background:#eaf0df;border-radius:10px;color:#42613a;font-size:19px}
.voice-experience .voice-companion .lesson-now h3{font:500 14px/1.4 'DM Sans';margin:0;color:#4f6647}
.voice-experience .voice-companion h2{font:500 28px/1.2 Fredoka;margin:16px 0 21px}
.lesson-starter{border-radius:16px;background:#f7f0d7;padding:20px;margin-bottom:20px}
.lesson-starter>span{font-size:9px;letter-spacing:1.1px;color:#756139;font-weight:700}
.lesson-starter>p{font:500 26px/1.4 Fredoka;color:#4e3f23;margin:10px 0 12px}
.voice-experience .lesson-starter .hint-toggle{background:transparent;border-top:1px solid #ded2af;border-radius:0;padding:12px 0 0;display:flex;justify-content:space-between;width:100%;font-size:11px;min-height:36px;color:#635535}
.voice-experience .lesson-starter .practice-help{padding:0;margin:12px 0 0;background:transparent}
.voice-experience .lesson-starter .practice-help p{font-size:20px;color:#4e3f23}
.voice-experience .voice-instruction{font-size:12px;line-height:1.6;color:#526747;margin:0 0 15px}
.voice-experience .voice-tools{margin:14px 0 0}
.voice-experience .voice-tools button{min-height:42px}
.voice-experience[data-voice-phase=idle] .voice-tools,.voice-experience[data-voice-phase=requesting] .voice-tools{display:none}
.voice-experience .voice-local-note{border:0;margin:0;padding:0}
.voice-experience .voice-local-note summary{font-size:10px;text-align:center}
.voice-experience .voice-finish-early{padding:13px;margin:0}
.voice-experience[data-voice-phase=speaking] .voice-primary{background:#eaf0df;box-shadow:none;border-color:#d8e2cc;color:#49613d}
.voice-experience[data-voice-phase=speaking] .voice-primary>svg{display:none}
.voice-experience[data-voice-phase=listening]:not(.is-muted) .lesson-state-icon{background:#274c38;color:#fff}
.lesson-achievements{list-style:none;text-align:left;padding:0;margin:25px 0 16px;display:grid;gap:12px}
.lesson-achievements li{display:flex;align-items:center;gap:12px;font-size:14px;line-height:1.5;color:#355139}
.lesson-achievements li>span{display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:50%;background:#eaf0df;color:#526e3b}
.result-card .lesson-evidence{font-size:11px;line-height:1.6;text-align:center;color:#68715e;max-width:44ch;margin:0 auto 24px}
.result-card .result-takeaway p{font-size:24px}
.result-card .result-takeaway h2{font-size:20px}
@media(max-width:600px){.voice-experience .voice-companion{padding:22px}.lesson-cycle{margin-top:18px;margin-bottom:19px}.voice-experience .voice-companion h2{font-size:26px}.lesson-starter{padding:17px}.lesson-starter>p{font-size:24px}}
/* ==========================================================================
   BataTalk · sala de prática
   Uma coluna, um foco por vez. A cena carrega o contexto; o console carrega
   a ação. Nada é dito duas vezes.
   ========================================================================== */

/* Os tokens ficam também no `.bt-room` para a cena funcionar fora da sala —
   por exemplo no palco da home. */
.bt-practice,
.bt-room {
  --bt-cream: #FBF6EA;
  --bt-paper: #FFFDF7;
  --bt-ink: #14241C;
  --bt-forest: #1C3A2B;
  --bt-forest-2: #2B5541;
  --bt-moss: #6C8F68;
  --bt-mute: #5D6D5D;
  --bt-mute-2: #7C8A79;
  --bt-butter: #F8C637;
  --bt-butter-deep: #DFA518;
  --bt-clay: #E07B45;
  --bt-line: #E6DECA;
  --bt-ease: cubic-bezier(.22, 1, .36, 1);
  --bt-spring: cubic-bezier(.34, 1.56, .64, 1);
  --bt-display: 'Fredoka', 'DM Sans', sans-serif;
}

.bt-practice {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 18px;
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--bt-ink);
}

.bt-practice :where(p, h1, h2, h3, ol, ul) { margin: 0; padding: 0; list-style: none; }
.bt-practice .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.bt-practice :focus-visible { outline: 3px solid var(--bt-forest); outline-offset: 3px; border-radius: 10px; }

/* --- cabeçalho ------------------------------------------------------------ */
.bt-practice__head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.bt-practice__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px 9px 12px;
  border: 1px solid var(--bt-line);
  border-radius: 999px;
  background: var(--bt-paper);
  color: var(--bt-mute);
  font: 500 13.5px/1 inherit;
  cursor: pointer;
  transition: transform .3s var(--bt-spring), color .25s, border-color .25s;
}
.bt-practice__back:hover { transform: translateX(-3px); color: var(--bt-forest); border-color: var(--bt-moss); }

/* Vira <h1> para a sala ter um título; o tamanho do texto continua vindo
   dos filhos, como quando era um <p>. */
.bt-practice__where { display: grid; gap: 3px; min-width: 0; font-size: inherit; font-weight: inherit; }
.bt-practice__where b {
  font: 600 19px/1.1 var(--bt-display);
  letter-spacing: -.02em;
  color: var(--bt-forest);
}
.bt-practice__where span { font-size: 12.5px; color: var(--bt-mute-2); }

.bt-practice__meta { display: flex; align-items: center; gap: 16px; margin-left: auto; }

/* Um único indicador de progresso para toda a prática. */
.bt-steps { display: flex; gap: 6px; }
.bt-steps li {
  width: 26px; height: 6px;
  border-radius: 3px;
  background: rgba(28, 58, 43, .12);
  transition: background .45s var(--bt-ease), width .45s var(--bt-ease);
}
.bt-steps li.is-done { background: var(--bt-moss); }
.bt-steps li.is-current { background: var(--bt-butter); width: 38px; }

.bt-practice__time {
  font: 500 13px/1 var(--bt-display);
  color: var(--bt-mute-2);
  font-variant-numeric: tabular-nums;
}

/* --- cena ------------------------------------------------------------------ */
.bt-stage {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: var(--bt-cream);
  box-shadow: 0 30px 60px -40px rgba(20, 36, 28, .55);
}

.bt-room {
  position: relative;
  aspect-ratio: 27 / 20;
  background: var(--room-tint, #EFE7D4);
}
.bt-room.is-mini { aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; }
.bt-room__scene { position: absolute; inset: 0; }

.bt-scene__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition: transform .6s var(--bt-ease);
}
/* Não herdadas: quem escreve (immersive.js) escreve direto em cada camada. */
@property --look-x { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --look-y { syntax: '<length>'; inherits: false; initial-value: 0px; }
.bt-scene__layer[data-depth="0"] { transform: translate3d(calc(var(--look-x, 0px) * .45), calc(var(--look-y, 0px) * .45), 0) scale(1.03); }
.bt-scene__layer[data-depth="1"] { transform: translate3d(calc(var(--look-x, 0px) * 1), calc(var(--look-y, 0px) * .8), 0); }
.bt-scene__layer[data-depth="3"] { transform: translate3d(calc(var(--look-x, 0px) * 1.9), calc(var(--look-y, 0px) * 1.3), 0) scale(1.02); }
.bt-scene__front { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

.bt-room__tato {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 8%;
  width: 30%;
  transform: translateX(-50%);
  filter: drop-shadow(0 20px 16px rgba(60, 40, 10, .3));
}
.bt-room__tato svg { display: block; width: 100%; height: auto; }

.bt-room__light {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(66% 52% at 24% 6%, rgba(255, 244, 205, .55), transparent 62%),
    radial-gradient(50% 40% at 80% 92%, rgba(20, 36, 28, .18), transparent 70%);
  mix-blend-mode: soft-light;
}
.bt-room__vignette {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  box-shadow: inset 0 -60px 80px -56px rgba(20, 36, 28, .6), inset 0 26px 50px -46px rgba(255, 250, 232, .85);
}
.bt-room[data-dark="true"] .bt-room__light { mix-blend-mode: screen; opacity: .5; }

/* --- balões da conversa ---------------------------------------------------- */
.bt-bubble {
  position: absolute;
  z-index: 7;
  max-width: min(62%, 400px);
  padding: 14px 18px;
  border-radius: 20px;
  font: 500 clamp(16px, 1.9vw, 21px)/1.3 var(--bt-display);
  letter-spacing: -.01em;
  animation: btBubbleIn .5s var(--bt-ease) both;
}
.bt-bubble--tato {
  left: 4.5%;
  top: 9%;
  background: rgba(255, 253, 247, .95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--bt-forest);
  box-shadow: 0 18px 34px -22px rgba(20, 36, 28, .7);
}
.bt-bubble--tato::after {
  content: '';
  position: absolute;
  left: 34px; bottom: -9px;
  width: 20px; height: 20px;
  border-radius: 0 0 8px 0;
  background: inherit;
  transform: rotate(45deg) skew(-8deg, -8deg);
}
.bt-bubble--you {
  right: 4.5%;
  bottom: 14%;
  background: var(--bt-forest);
  color: #FFFDF7;
  font-size: clamp(14px, 1.6vw, 18px);
  box-shadow: 0 18px 34px -22px rgba(20, 36, 28, .9);
}
@keyframes btBubbleIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

/* O avatar do aprendiz mora na cena e acende quando a voz chega:
   é a resposta para “ele está me ouvindo?”. */
.bt-me {
  position: absolute;
  z-index: 7;
  right: 20px; bottom: 18px;
  transition: opacity .4s var(--bt-ease);
}
.bt-me .self-avatar {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bt-paper);
  border: 2px solid rgba(255, 253, 247, .9);
  box-shadow: 0 12px 24px -14px rgba(20, 36, 28, .8);
  transition: box-shadow .25s var(--bt-ease), transform .25s var(--bt-spring);
}
.bt-me .self-avatar svg { width: 100%; height: 100%; display: block; }
.bt-me .self-avatar[data-speaking="true"] {
  transform: scale(1.06);
  box-shadow: 0 0 0 5px rgba(127, 197, 140, .45), 0 12px 24px -14px rgba(20, 36, 28, .8);
}
[data-voice-phase="listening"] .bt-me .self-avatar { box-shadow: 0 0 0 3px rgba(248, 198, 55, .55), 0 12px 24px -14px rgba(20, 36, 28, .8); }
.bt-practice.is-muted .bt-me .self-avatar { opacity: .5; }
/* Com o balão da resposta aberto, o avatar sai da frente. */
.bt-stage:has(.bt-bubble--you:not([hidden])) .bt-me { opacity: 0; }

.bt-cc {
  position: absolute;
  z-index: 8;
  right: 14px; top: 14px;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--bt-forest);
  background: rgba(255, 253, 247, .88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .3s var(--bt-spring), background .25s, color .25s;
}
.bt-cc:hover { transform: scale(1.08); }
.bt-cc[aria-pressed="false"] { background: rgba(28, 58, 43, .55); color: rgba(255, 253, 247, .7); }

/* --- console --------------------------------------------------------------- */
.bt-console {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 26px 24px 22px;
  border-radius: 28px;
  background: var(--bt-paper);
  border: 1px solid var(--bt-line);
  box-shadow: 0 24px 50px -40px rgba(20, 36, 28, .5);
  text-align: center;
}

/* O objetivo é a informação mais importante: o que fazer agora. */
.bt-mission { margin: 0; max-width: 38ch; color: var(--bt-forest); font-size: 13px; line-height: 1.45; }
.bt-mission span { display: block; margin-bottom: 4px; color: var(--bt-mute); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.bt-goal b {
  font: 600 clamp(21px, 2.6vw, 28px)/1.2 var(--bt-display);
  letter-spacing: -.025em;
  color: var(--bt-forest);
}


.bt-mic {
  position: relative;
  width: 88px; height: 88px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #3F2E05;
  margin: 6px 0;
  background: linear-gradient(180deg, #FFDA6B, var(--bt-butter) 42%, var(--bt-butter-deep));
  box-shadow: 0 16px 30px -12px rgba(190, 140, 20, .85), inset 0 2px 0 rgba(255, 255, 255, .6);
  transition: transform .35s var(--bt-spring), box-shadow .35s var(--bt-ease), background .3s, color .3s;
}
.bt-mic:hover:not(:disabled) { transform: translateY(-3px) scale(1.03); }
.bt-mic:active:not(:disabled) { transform: scale(.97); }
.bt-mic:disabled { cursor: default; background: #E9E4D4; color: #97A093; box-shadow: none; }
.bt-mic__icon { display: grid; place-items: center; }

/* O próprio anel do botão é o medidor: ele cresce com a sua voz.
   Um sinal só, no lugar onde a ação acontece. */
.bt-mic__pulse {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--bt-butter);
  opacity: 0;
  transform: scale(1);
}
[data-voice-phase="listening"] .bt-mic__pulse {
  /* O nível é limitado: o anel respira, não invade o resto do console. */
  opacity: calc(.4 + min(var(--voice-level, 0), .2) * 3);
  border-color: #7FC58C;
  border-width: 3px;
  transform: scale(calc(1 + min(var(--voice-level, 0), .2) * 1.3));
  transition: transform .12s linear, opacity .12s linear;
}
[data-voice-phase="speaking"] .bt-mic__pulse { animation: btPulse 2s var(--bt-ease) infinite; }
.bt-practice.is-muted .bt-mic__pulse { opacity: .15 !important; transform: none !important; }
@keyframes btPulse {
  0% { opacity: .7; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.3); }
}
[data-voice-phase="listening"] .bt-mic { background: linear-gradient(180deg, #7FC58C, #4C7A57); color: #F6FBF4; }
[data-voice-phase="processing"] .bt-mic { background: #E9E4D4; color: #7C8A79; }


.bt-cta {
  font: 600 16px/1 var(--bt-display);
  color: var(--bt-forest);
  letter-spacing: -.01em;
}
.bt-status:empty { display: none; }
.bt-status { font-size: 14px; line-height: 1.5; color: var(--bt-mute); max-width: 42ch; }
.bt-error.is-quiet {
  padding: 0;
  border: 0;
  background: none;
  color: var(--bt-mute);
  font-size: 13px;
}
.bt-error {
  max-width: 44ch;
  padding: 12px 18px;
  border-radius: 16px;
  background: rgba(224, 123, 69, .1);
  border: 1px solid rgba(224, 123, 69, .3);
  color: #A0522C;
  font-size: 13.5px;
  line-height: 1.5;
}

/* --- ajuda sob demanda ------------------------------------------------------ */
.bt-help { width: 100%; max-width: 460px; }
.bt-help__toggle {
  padding: 9px 18px;
  border: 1px dashed var(--bt-moss);
  border-radius: 999px;
  background: rgba(108, 143, 104, .08);
  color: var(--bt-forest-2);
  font: 500 13.5px/1 inherit;
  cursor: pointer;
  transition: background .25s, transform .3s var(--bt-spring);
}
.bt-help__toggle:hover { background: rgba(108, 143, 104, .16); transform: translateY(-2px); }
.bt-help__body {
  margin-top: 12px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(248, 198, 55, .12);
  border: 1px solid rgba(248, 198, 55, .45);
  animation: btFade .35s var(--bt-ease) both;
}
.bt-help__body p[lang] {
  font: 500 clamp(17px, 2vw, 21px)/1.3 var(--bt-display);
  color: var(--bt-forest);
}
.bt-help__body small { display: block; margin-top: 8px; font-size: 12.5px; color: var(--bt-mute-2); }
@keyframes btFade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* --- retorno da fala -------------------------------------------------------- */
.bt-coach { width: 100%; max-width: 520px; text-align: left; animation: btFade .4s var(--bt-ease) both; }
.bt-coach .correction-card {
  padding: 18px 20px;
  border-radius: 20px;
  background: #F2F6EE;
  border: 1px solid #DDE6D6;
}
.bt-coach .correction-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bt-moss);
  margin-bottom: 12px;
}
.bt-coach .correction-head span { display: inline-flex; align-items: center; gap: 6px; }
.bt-coach .correction-legend-good,
.bt-coach .correction-legend-swap { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.bt-coach .correction-legend-good { background: var(--bt-moss); }
.bt-coach .correction-legend-swap { background: var(--bt-butter-deep); }
.bt-coach .correction-words { font: 500 19px/1.5 var(--bt-display); color: var(--bt-forest); }
.bt-coach .correction-word { padding: 1px 3px; border-radius: 4px; }
.bt-coach .correction-swap { background: rgba(248, 198, 55, .45); }
.bt-coach .correction-explanation { margin-top: 12px; font-size: 13.5px; color: var(--bt-mute); }
.bt-coach .correction-explanation ul { display: grid; gap: 6px; margin-top: 6px; }
.bt-coach .correction-ai-note { margin-top: 12px; font-size: 13px; color: var(--bt-mute-2); }

/* --- controles da conversa -------------------------------------------------
   Um bloco único, e presente só enquanto há conversa para controlar. Sair da
   prática não é par de "silenciar", então mora separado, no fim.
   -------------------------------------------------------------------------- */
.bt-transport {
  display: flex;
  gap: 4px;
  height: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(28, 58, 43, .06);
  opacity: 0;
  transform: translateY(6px) scale(.96);
  pointer-events: none;
  transition: opacity .35s var(--bt-ease), transform .4s var(--bt-spring), height .4s var(--bt-ease), padding .4s var(--bt-ease);
}
[data-voice-phase="speaking"] .bt-transport,
[data-voice-phase="listening"] .bt-transport,
[data-voice-phase="paused"] .bt-transport,
[data-voice-phase="processing"] .bt-transport {
  height: 50px;
  padding: 5px;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.bt-transport button {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--bt-forest-2);
  cursor: pointer;
  transition: background .25s, color .25s, transform .3s var(--bt-spring);
}
.bt-transport button:hover:not(:disabled) { background: var(--bt-paper); transform: translateY(-2px); }
.bt-transport button:disabled { opacity: .3; cursor: default; }
.bt-transport button[aria-pressed="true"] { background: #F3D9CE; color: #A0522C; }

.bt-exit {
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 100%;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid #F0EBDD;
}
.bt-exit__finish {
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--bt-mute-2);
  font: 500 13.5px/1 inherit;
  cursor: pointer;
  transition: color .25s, background .25s;
}
.bt-exit__finish:hover { color: var(--bt-forest); background: rgba(28, 58, 43, .06); }

.bt-note { text-align: center; }
/* Microfone bloqueado pede instrução concreta, não política de privacidade. */
.bt-fix {
  max-width: 46ch;
  padding: 14px 18px;
  border-radius: 18px;
  background: rgba(108, 143, 104, .1);
  border: 1px dashed rgba(108, 143, 104, .5);
  animation: btFade .35s var(--bt-ease) both;
}
.bt-fix p { font-size: 13.5px; line-height: 1.55; color: var(--bt-forest-2); }
.bt-fix b { font-weight: 600; }
.bt-note summary {
  list-style: none;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--bt-mute-2);
  padding: 6px 0;
}
.bt-note summary::-webkit-details-marker { display: none; }
.bt-note summary::before { content: '＋ '; color: var(--bt-moss); }
.bt-note[open] summary::before { content: '− '; }
.bt-note p { max-width: 52ch; margin: 0 auto; font-size: 12.5px; line-height: 1.6; color: var(--bt-mute-2); text-align: left; }

/* ==========================================================================
   Responsivo — no celular o console gruda embaixo e a cena encolhe.
   ========================================================================== */
@media (max-width: 720px) {
  .bt-practice { gap: 12px; }
  .bt-practice__head { flex-wrap: wrap; gap: 10px 12px; }
  .bt-practice__where { order: 3; width: 100%; }
  .bt-practice__meta { margin-left: auto; }
  .bt-room { aspect-ratio: 5 / 4; }
  .bt-room__tato { width: 33%; }
  .bt-stage { border-radius: 22px; }
  .bt-bubble { max-width: 78%; padding: 11px 14px; border-radius: 16px; }
  .bt-bubble--you { max-width: 68%; }
  .bt-console { padding: 20px 16px 16px; border-radius: 24px; gap: 12px; }
  .bt-mic { width: 78px; height: 78px; }
  .bt-transport button { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .bt-practice *,
  .bt-practice *::before,
  .bt-practice *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .bt-mic__pulse { display: none; }
  .bt-bubble { opacity: 1; transform: none; }
}

/* Morador de Batata City no lugar do Tato (character-places.js). O SVG do rig
   tem margem dos lados, então a caixa é mais larga que a do Tato; a sombra de
   chão já vem no desenho. */
.bt-room__npc { width: 52%; bottom: 3%; filter: none; }
.bt-room.is-mini .bt-room__npc { width: 58%; bottom: 2%; }
/* ==========================================================================
   BataTalk · home "O mundo responde" (2026-10-19, Design OS v11.7)
   Folha ÚNICA da landing: tudo vive sob `.ld`, o resto do produto não é tocado.
   A viagem do app: a ilha do Tato que responde (céu), o café por dentro
   (creme), os níveis (amarelo), o check-in em três visitas (céu-verde), as
   cidades em faixas (verde-noite), os planos (papel), as dúvidas e a rua de
   Batata City com todo mundo (céu de novo).
   Um traço só: panoramas e salas do app, moradores do rig e o Tato.
   "A arte fala, a interface sussurra" (2026-10-25): as cenas são grandes e a
   camada de interface é uma gramática só. Balão de papel para quem mora ali,
   verde para você, tracejado amarelo só no sopro do Tato. Nada de etiqueta em
   pílula, rótulo em caixa alta ou caixa dentro de caixa. Fundos: creme e areia
   alternados, um só momento escuro (as cidades). Fredoka nas falas e títulos,
   DM Sans no texto (nunca abaixo de 13 px).
   ========================================================================== */
.ld {
  --cream: #FBF6EA; --sand: #F3EBDA; --paper: #FFFDF8;
  --ink: #15271D; --ink-2: #33473B; --mute: #52645A;
  --forest: #1C3A2B; --forest-2: #24493A; --green: #2E6A4E; --leaf: #E4F0E1;
  --butter: #F8C637; --butter-dk: #D59E14; --butter-ink: #352600; --butter-soft: #FFF4CC;
  --teal: #2F6E73; --accent-text: #7A5200; --line: #E6DCC6; --line-2: #EFE7D6;
  --sky-0: #8DC7E3; --sky-1: #A8D6EA; --night: #1A1630; --night-2: #241E44;
  --display: 'Fredoka', 'DM Sans', sans-serif; --body: 'DM Sans', system-ui, sans-serif;
  --pad: clamp(16px, 4.6vw, 72px); --max: 1240px; --nav-h: 72px;
  --edge: max(var(--pad), calc((100vw - var(--max)) / 2));
  --r-xl: 32px; --r-lg: 22px; --r-md: 14px;
  --ease: cubic-bezier(.2, .8, .2, 1); --pop: cubic-bezier(.34, 1.45, .64, 1);
  --float: 0 1px 0 rgba(21, 39, 29, .06), 0 14px 30px -14px rgba(21, 39, 29, .42);
  --soft: 0 1px 0 rgba(21, 39, 29, .05), 0 10px 22px -18px rgba(21, 39, 29, .45);
  --card: 0 1px 0 rgba(21, 39, 29, .05), 0 26px 50px -30px rgba(21, 39, 29, .5);
  position: relative; min-height: 100vh; background: var(--cream); color: var(--ink);
  font: 400 17px/1.55 var(--body); overflow-x: clip; -webkit-font-smoothing: antialiased;
}
:where(.ld) *, :where(.ld) *::before, :where(.ld) *::after { box-sizing: border-box; }
:where(.ld) :where(h1, h2, h3, p, ol, ul, dl, dd, figure) { margin: 0; padding: 0; }
:where(.ld) :where(ol, ul) { list-style: none; }
:where(.ld) a { color: inherit; }
:where(.ld) button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
.ld [hidden] { display: none !important; }
.ld :focus-visible { outline: 3px solid #8A5A00; outline-offset: 3px; border-radius: 10px; }
.ld :is(.ld-world, .ld-foot) :focus-visible { outline-color: var(--butter); }
.ld .lp-i { flex: none; }
/* Tatos e moradores são ilustração: nunca roubam o clique de um botão */
.ld :is(.ld-cafe__tato, .ld-faq__tato, .ld-final__tato, .ld-actor) { pointer-events: none; }
.ld-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ld-main > section { scroll-margin-top: var(--nav-h); }

/* ---- tipografia --------------------------------------------------------- */
/* escala contida (2026-11-06): como Speak/Stripe/AbacatePay, H2 médio, peso 500, uma palavra de destaque */
.ld-h2 { font: 500 clamp(32px, 3.3vw, 50px)/1.06 var(--display); letter-spacing: -.02em; color: var(--forest); text-wrap: balance; }
.ld-h2 em { font-style: normal; color: var(--green); }
.ld-h2--light { color: #FFFDF8; }
.ld-h2--light em { color: var(--butter); }
.ld-lead { font-size: clamp(16.5px, 1.15vw, 18.5px); line-height: 1.6; color: var(--ink-2); max-width: 36em; text-wrap: pretty; }
.ld-lead--light { color: #D9E6DC; }
.ld-fine { font-size: 13px; line-height: 1.5; color: var(--mute); }
.ld-where-cap { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 15px; line-height: 1.4; color: var(--mute); }
.ld-where-cap b { font-weight: 600; color: var(--ink-2); }
.ld-where-cap__face { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--sand); }

/* ---- botões --------------------------------------------------------------- */
.ld-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 999px; font: 600 16px/1 var(--display); letter-spacing: .01em; text-decoration: none; white-space: nowrap; transition: transform .14s var(--ease), box-shadow .14s var(--ease), background-color .15s, color .15s; }
.ld-btn .lp-i { transition: transform .2s var(--ease); }
.ld-btn--lg { min-height: 60px; padding: 0 32px; font-size: 19px; }
.ld-btn--block { width: 100%; }
.ld-btn--primary { background: var(--butter); color: var(--butter-ink); box-shadow: 0 4px 0 var(--butter-dk), 0 16px 28px -16px rgba(166, 118, 0, .9); }
.ld-btn--primary:hover { background: #FBCF4C; transform: translateY(-2px); box-shadow: 0 6px 0 var(--butter-dk), 0 20px 30px -16px rgba(166, 118, 0, .9); }
.ld-btn--primary:hover .lp-i { transform: translateX(3px); }
.ld-btn--primary:active, .ld-btn--primary[aria-busy='true'] { transform: translateY(3px); box-shadow: 0 1px 0 var(--butter-dk); }
.ld-btn--ink { background: var(--forest); color: #FFFDF8; }
.ld-btn--ink:hover { background: var(--forest-2); }
.ld-btn--line { background: var(--paper); color: var(--forest); box-shadow: inset 0 0 0 2px var(--line); }
.ld-btn--line:hover { box-shadow: inset 0 0 0 2px var(--forest); }
.ld-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 600 17px/1.2 var(--display); color: var(--forest); text-decoration: none; }
.ld-link span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: rgba(28, 58, 43, .35); }
.ld-link:hover span { text-decoration-color: currentColor; }
.ld-link .lp-i { transition: transform .2s var(--ease); }
.ld-link:hover .lp-i { transform: translateY(3px); }
.ld-round { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 253, 248, .94); color: var(--forest); box-shadow: var(--float); }
.ld-round:hover { background: #FFF; }
.ld-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); font: 500 15px/1.2 var(--display); color: var(--forest); transition: box-shadow .15s, transform .14s var(--ease); }
.ld-chip:hover { box-shadow: inset 0 0 0 2px var(--green); transform: translateY(-1px); }
.ld-chip-tag { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 9px; border-radius: 999px; font: 700 12px/1 var(--body); letter-spacing: .03em; background: var(--sand); color: var(--ink-2); }
.ld-chip-tag.is-free { background: #E7F4E8; color: #23573E; }

/* ---- barra do topo --------------------------------------------------------- */
.ld-nav { position: fixed; inset: 0 0 auto; z-index: 40; height: var(--nav-h); transition: background-color .25s, box-shadow .25s; }
.ld-nav.is-stuck { background: rgba(251, 246, 234, .97); box-shadow: 0 1px 0 rgba(21, 39, 29, .08), 0 8px 24px -18px rgba(21, 39, 29, .5); }
.ld-nav__bar { display: flex; align-items: center; gap: 20px; height: 100%; max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); }
.ld-logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 600 21px/1 var(--display); color: var(--forest); letter-spacing: -.01em; }
.ld-logo img { width: 36px; height: 36px; border-radius: 11px; }
.ld-nav__links { display: flex; gap: 4px; margin-left: auto; }
.ld-nav__links a { position: relative; padding: 10px 12px; border-radius: 10px; font: 500 15px/1 var(--body); color: var(--ink-2); text-decoration: none; }
.ld-nav__links a:hover { color: var(--forest); background: rgba(28, 58, 43, .07); }
.ld-nav__links a.is-current { color: var(--forest); }
.ld-nav__links a.is-current::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--butter-dk); }
.ld-nav__login { min-height: 44px; padding: 0 12px; font: 600 15px/1 var(--display); color: var(--forest); border-radius: 10px; }
.ld-nav__login:hover { background: rgba(28, 58, 43, .07); }
.ld-nav__start { min-height: 44px; padding: 0 20px; font-size: 15px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s var(--ease), visibility 0s .2s; }
.ld-nav.show-start .ld-nav__start { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s var(--ease); }

/* ---- falas (os componentes da sala de prática) ----------------------------- */
.ld-say { position: relative; display: grid; gap: 7px; padding: 13px 17px 15px; border-radius: 22px; background: var(--paper); color: var(--ink); box-shadow: var(--soft); }
.ld-say::after { content: ''; position: absolute; left: var(--tail, 34px); bottom: -10px; width: 20px; height: 20px; background: inherit; border-radius: 0 0 6px 0; transform: translateX(-50%) rotate(45deg); box-shadow: 6px 6px 10px -8px rgba(21, 39, 29, .4); }
.ld-say__who { display: flex; align-items: center; gap: 8px; min-width: 0; font: 600 14px/1 var(--display); color: var(--ink-2); }
.ld-say__face { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--sand); }
.ld-say__who b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ld-say__who i { font-style: normal; letter-spacing: .02em; text-transform: none; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--leaf); color: var(--green); }
.ld-say__line { font: 500 22px/1.2 var(--display); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.ld-you { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 10px; padding: 12px 18px 14px; border-radius: 22px 22px 6px 22px; background: var(--green); color: #FFFDF8; box-shadow: var(--soft); }
.ld-you > b { grid-column: 1 / -1; font: 700 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: #CFE7D5; }
.ld-you > span[lang] { font: 500 20px/1.25 var(--display); overflow-wrap: anywhere; }
.ld-you > small { grid-column: 1 / -1; font-size: 13.5px; color: #CFE7D5; }
.ld-wave { display: inline-flex; align-items: center; gap: 3px; height: 22px; }
.ld-wave i { width: 3px; height: var(--h); border-radius: 2px; background: currentColor; opacity: .75; }
.ld-whisper { position: relative; display: grid; gap: 4px; padding: 10px 14px 12px; border-radius: 18px; background: var(--butter-soft); border: 1.5px dashed #DDAA2C; color: var(--butter-ink); font: 500 16px/1.4 var(--body); }
.ld-whisper small { font: 700 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.ld-whisper b { font: 600 17px/1.2 var(--display); color: var(--ink); }
.ld-ok { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 12px; border-radius: 999px; background: #E7F4E8; color: #23573E; font: 600 15px/1.2 var(--display); box-shadow: var(--float); }
.ld-ok span { font: 500 14px/1.2 var(--body); color: var(--ink-2); }
.ld-dots { display: inline-flex; gap: 6px; padding: 6px 0; }
.ld-dots i { width: 9px; height: 9px; border-radius: 50%; background: #CFE7D5; animation: ld-dot 1.2s var(--ease) infinite; }
.ld-dots i:nth-child(2) { animation-delay: .15s; }
.ld-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ld-dot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.ld-actor { filter: drop-shadow(0 10px 14px rgba(40, 26, 10, .22)); }
.ld-actor svg { display: block; height: 100%; width: auto; }
:is(.ld-cafe__tato, .ld-faq__tato, .ld-final__tato) { display: block; aspect-ratio: 200 / 220; filter: drop-shadow(0 12px 12px rgba(60, 40, 10, .25)); }
:is(.ld-cafe__tato, .ld-faq__tato, .ld-final__tato) svg { display: block; width: 100%; height: 100%; }

/* ---- 1 hero: a demonstração que troca de lugar -------------------------------- */
/* Seis cenas empilhadas: cada uma é a cidade do app (cobrindo o palco e mirando
   o lugar da lição), quem atende em primeiro plano e a conversa. A cena ligada
   aparece em fade; a câmera chega devagar no lugar; as falas entram no ritmo
   (--at). O relógio é a barrinha da cena (ld-rail): pausar a barra pausa tudo.
   Composição (2026-10-25): três faixas que não se encostam. O texto e a barra
   formam um grupo só, centrado na altura, sobre o papel; a conversa começa
   depois da coluna do texto (--copy-r), inteira sobre a cidade; quem atende
   fica logo depois da conversa, com o rosto livre. Tudo deriva do tamanho do
   título (--h1), então as três faixas andam juntas em qualquer largura. */
.ld-hero { --dur: 8.6s; --ch: min(64cqh, 600px); --h1: clamp(40px, 3.7vw, 58px);
  --copy-w: calc(var(--h1) * 7.8); --copy-r: calc(var(--edge) + var(--copy-w));
  --talk-x: calc(var(--copy-r) + clamp(28px, 3vw, 56px)); --talk-w: clamp(290px, 26vw, 380px);
  position: relative; isolation: isolate; overflow: clip; height: clamp(680px, 100svh, 1080px); container-type: size; background: #D9E7E6;
  display: flex; flex-direction: column; justify-content: center; padding-top: var(--nav-h); }
.ld-hero__stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ld-scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s var(--ease), visibility 0s .9s; }
.ld-scene.is-on { z-index: 1; opacity: 1; visibility: visible; transition: opacity .9s var(--ease); }
/* o véu de papel à esquerda: o texto lê bem sobre qualquer cidade */
.ld-scene::before { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--cream) 0, var(--cream) calc(var(--copy-r) - 24px), rgba(251, 246, 234, 0) calc(var(--talk-x) - 8px)); }
/* a cidade cobre o palco e mira o lugar da lição (âncora do mapa do app) em --px/--py */
.ld-scene__art { --ar: 1.818; --w: calc(max(100cqw, 100cqh * var(--ar)) * 1.16); --h: calc(var(--w) / var(--ar));
  position: absolute; z-index: 0; width: var(--w); height: var(--h);
  left: clamp(calc(100cqw - var(--w)), calc(var(--px, 60cqw) - var(--ax) * var(--w)), 0px);
  top: clamp(calc(100cqh - var(--h)), calc(var(--py, 40cqh) - var(--ay) * var(--h)), 0px);
  transform-origin: calc(var(--ax) * 100%) calc(var(--ay) * 100%); }
.ld-scene__pano { display: block; width: 100%; height: 100%; user-select: none; }
/* a placa do lugar, em cima do prédio da lição */
.ld-scene__pin { position: absolute; left: calc(var(--ax) * 100%); top: calc(var(--ay) * 100%); transform: translate(-50%, calc(-100% - 10px)); display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; background: var(--forest); color: #FFFDF8; white-space: nowrap; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .6); font: 600 15px/1 var(--display); }
.ld-scene__pin::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--butter); box-shadow: 0 0 0 4px rgba(248, 198, 55, .3); }
.ld-scene__pin::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: inherit; border-radius: 0 0 3px 0; transform: translateX(-50%) rotate(45deg); }
.ld-scene__pin span { font: 500 13px/1 var(--body); color: #CFE7D5; }
/* quem atende, em primeiro plano, de pé na frente do lugar */
.ld-scene__who { position: absolute; z-index: 2; left: calc(var(--talk-x) + var(--talk-w) - var(--ch) * .1); bottom: -2px; height: var(--ch); filter: drop-shadow(0 22px 26px rgba(30, 24, 10, .28)); transform-origin: 50% 100%; }
.ld-scene__who svg { display: block; height: 100%; width: auto; }
/* a conversa, ao lado da cabeça de quem fala */
.ld-scene__talk { position: absolute; z-index: 3; left: var(--talk-x); bottom: calc(var(--ch) * .2); width: var(--talk-w);
  display: grid; grid-template-areas: "npc" "tip" "you"; gap: 10px; }
.ld-scene__pin { display: none; }
.ld-beat--npc { grid-area: npc; justify-self: start; }
.ld-beat--tip { grid-area: tip; justify-self: start; }
.ld-beat--think, .ld-beat--you { grid-area: you; justify-self: end; }

.ld-beat--npc .ld-say { --tail: calc(100% - 40px); padding: 14px 18px 16px; }
.ld-beat--npc .ld-say::after { left: auto; right: 6px; bottom: 26px; transform: rotate(-45deg); }
.ld-beat--npc .ld-say__line { font-size: clamp(20px, 1.7vw, 25px); }
.ld-beat--tip .ld-whisper { grid-template-columns: 26px 1fr; align-items: start; gap: 8px; max-width: 330px; font-size: 15px; }
.ld-beat--tip .ld-whisper small { display: block; margin-bottom: 3px; }
.ld-whisper__face { width: 26px; height: 26px; border-radius: 50%; background: #FFF; }
.ld-you--think { min-width: 84px; grid-template-columns: auto; }
.ld-beat--tip .ld-whisper { grid-template-columns: 24px 1fr; align-items: center; padding: 8px 14px 8px 8px; border-radius: 20px; box-shadow: var(--soft); }
.ld-beat--you .ld-you { grid-template-columns: auto 1fr auto; padding: 12px 14px 12px 18px; }
.ld-you__ok { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--butter); color: var(--butter-ink); font: 700 14px/1 var(--body); font-style: normal; }
.ld-beat--you .ld-you > span[lang] { font-size: clamp(18px, 1.45vw, 21px); }
@media (prefers-reduced-motion: no-preference) {
  .ld-scene.is-on .ld-scene__art { animation: ld-camera calc(var(--dur) + 1s) linear both; }
  .ld-scene.is-on .ld-scene__who { animation: ld-arrive .8s var(--ease) both, ld-breathe 3.6s ease-in-out .8s infinite; }
  .ld-scene.is-on .ld-beat { animation: ld-beat .5s var(--pop) both; animation-delay: var(--at, 0s); }
  .ld-beat--npc { --at: .6s; }
  .ld-beat--tip { --at: 2.5s; }
  .ld-scene.is-on .ld-beat--think { animation: ld-think 1.7s var(--ease) both; animation-delay: 3.5s; }
  .ld-beat--you { --at: 5.2s; }
  .ld-scene.is-on .ld-you__ok { animation: ld-beat .45s var(--pop) both; animation-delay: 6.2s; }
}
/* sem movimento: a conversa inteira, parada (o "pensando" não aparece) */
@media (prefers-reduced-motion: reduce) { .ld-beat--think { display: none; } }
@keyframes ld-camera { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes ld-arrive { from { opacity: 0; translate: 36px 0; } }
@keyframes ld-breathe { 50% { scale: 1 1.012; } }
@keyframes ld-beat { from { opacity: 0; transform: translateY(10px) scale(.94); } }
@keyframes ld-think { 0% { opacity: 0; transform: translateY(8px); } 14%, 86% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }

/* texto ------------------------------------------------------------------------ */
.ld-hero__copy { position: relative; z-index: 5; display: grid; justify-items: start; gap: 16px; width: var(--copy-w); margin-left: var(--edge); }
.ld-hero__title { display: grid; gap: 2px; font: 600 var(--h1)/1 var(--display); letter-spacing: -.03em; color: var(--forest); }
/* 2ª linha do título: "Aqui você fala" + o lugar da cena que está tocando */
.ld-hero__title-b { display: block; margin-top: .3em; font-size: .62em; line-height: 1.08; font-weight: 500; color: var(--ink-2); letter-spacing: -.03em; }
.ld-hero__title > span:first-child { display: block; }
/* os seis lugares ocupam a mesma célula: o título não pula quando troca */
.ld-hero__where { display: grid; color: var(--green); }
.ld-nw { white-space: nowrap; }
.ld-where { grid-area: 1 / 1; opacity: 0; transform: translateY(.25em); transition: opacity .45s var(--ease), transform .55s var(--ease); text-wrap: balance; }
.ld-where.is-on { opacity: 1; transform: none; transition-delay: .15s; }
.ld-hero__lead { max-width: 25em; font-size: clamp(17px, 1.3vw, 19.5px); line-height: 1.55; color: #17301F; text-wrap: pretty; }
.ld-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 4px; }
.ld-hero__note { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 500 14.5px/1.4 var(--body); color: #1E3427; }
.ld-hero__note .lp-i { color: var(--green); }

/* a barra das cenas: o relógio da demonstração ------------------------------------ */
/* logo abaixo do texto: o grupo inteiro (título, ação, barra) se lê de uma vez */
.ld-hero__rail { position: relative; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; width: var(--copy-w); margin: clamp(28px, 6cqh, 64px) 0 0 var(--edge); }
/* o rótulo em cima da barra: diz que é demonstração e onde a cena acontece */
.ld-hero__demo { order: -1; flex-basis: 100%; font: 500 13.5px/1.3 var(--body); color: var(--mute); }
.ld-hero__place span { display: none; }
.ld-hero__place span::before { content: ' · '; }
.ld-hero[data-scene-on="0"] [data-place="0"], .ld-hero[data-scene-on="1"] [data-place="1"], .ld-hero[data-scene-on="2"] [data-place="2"],
.ld-hero[data-scene-on="3"] [data-place="3"], .ld-hero[data-scene-on="4"] [data-place="4"], .ld-hero[data-scene-on="5"] [data-place="5"] { display: inline; }
.ld-hero__pause { box-shadow: inset 0 0 0 1.5px var(--line); background: var(--paper); }
.ld-rail { display: flex; gap: 4px; }
.ld-rail__item { display: grid; align-items: center; width: 52px; min-height: 44px; padding: 0 2px; }
.ld-rail__item span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ld-rail__item i { position: relative; display: block; height: 5px; border-radius: 3px; background: rgba(28, 58, 43, .18); overflow: hidden; }
.ld-rail__item i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--forest); transform: scaleX(0); transform-origin: left; }
.ld-rail__item:hover i { background: rgba(28, 58, 43, .3); }
.ld-rail__item.is-on i::after { transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) {
  .ld-rail__item.is-on i::after { animation: ld-rail var(--dur) linear both; }
}
@keyframes ld-rail { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* parado: fora da tela, aba escondida ou "Pausar" (sem seletor `*`) */
:is(.ld-hero.is-still, .ld.demo-is-paused .ld-hero) :is(.ld-scene__art, .ld-scene__who, .ld-beat, .ld-you__ok) { animation-play-state: paused; }
:is(.ld-hero.is-still, .ld.demo-is-paused .ld-hero) .ld-rail__item i::after { animation-play-state: paused; }

/* Hero v9 (2026-11-06), depois do estudo de Speak, Praktika, Duolingo, Loora,
   AbacatePay, Stripe, Linear e Notion: texto grande e centralizado em cima
   (uma frase, um botão); embaixo, larga, a tela do mundo vivo (as seis cenas)
   com o celular de verdade por cima, à direita: a tela que abre no clique.
   A barra das cenas fica no topo da tela, estilo stories. */
@media (min-width: 900px) {
  .ld-hero { --h1: clamp(52px, 5.6vw, 92px); --frame-w: min(1240px, calc(100vw - 2 * var(--pad)));
    display: grid; grid-template-columns: minmax(0, var(--frame-w)); grid-template-areas: "copy" "stage"; justify-content: center;
    height: auto; overflow: visible; container-type: normal; background: var(--cream); padding: calc(var(--nav-h) + clamp(40px, 6vh, 72px)) 0 clamp(96px, 10vw, 150px); }
  .ld-hero__copy { grid-area: copy; justify-items: center; width: auto; max-width: 1000px; margin: 0 auto; text-align: center; gap: 22px; }
  .ld-hero__title { justify-items: center; line-height: .98; letter-spacing: -.035em; }
  .ld-hero__title-b { font-size: .6em; margin-top: .26em; }
  .ld-hero__where { justify-items: center; }
  .ld-hero__lead { max-width: 30em; font-size: clamp(18px, 1.35vw, 21px); color: var(--ink-2); }
  .ld-hero__cta { justify-content: center; margin-top: 6px; }
  .ld-hero__note { justify-content: center; }
  .ld-hero__stage { grid-area: stage; position: relative; inset: auto; margin-top: clamp(48px, 6vw, 80px); aspect-ratio: 1240 / 700; border-radius: 40px; overflow: hidden;
    container-type: size; background: #D9E7E6; box-shadow: 0 60px 120px -60px rgba(28, 58, 43, .55), 0 0 0 1px rgba(28, 58, 43, .06);
    --talk-x: 5cqw; --talk-w: min(34cqw, 400px); --ch: 74cqh; }
  .ld-scene::before { content: none; }
  .ld-scene__art { --px: 46cqw; --py: 44cqh; }
  .ld-scene__who { left: calc(var(--talk-x) + var(--talk-w) + 1cqw); }
  /* o celular de verdade: a tela que abre quando a pessoa clica */
  .ld-hero__phone { grid-area: stage; z-index: 7; align-self: end; justify-self: end; position: relative; width: clamp(220px, 21vw, 300px); margin: 0 clamp(-56px, -3vw, -16px) clamp(-90px, -6vw, -40px) 0; }
  .ld-hero__phone img { display: block; width: 100%; height: auto; border-radius: 34px; border: 9px solid #17241C; background: #17241C; box-shadow: 0 50px 90px -40px rgba(20, 30, 20, .7); }
  .ld-hero__said { position: absolute; left: -46%; bottom: 30%; display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 16px; border-radius: 22px 22px 6px 22px; background: var(--green); color: #FFFDF8; font: 600 clamp(16px, 1.3vw, 19px)/1.2 var(--display); white-space: nowrap; box-shadow: 0 24px 40px -20px rgba(20, 50, 30, .7); }
  /* a barra das cenas: no topo da tela, sobre o céu */
  .ld-hero__rail { grid-area: stage; align-self: start; z-index: 6; width: auto; margin: clamp(48px, 6vw, 80px) 0 0; padding: 16px 18px; flex-wrap: nowrap; gap: 10px; }
  .ld-hero__rail .ld-rail { flex: 1; gap: 6px; }
  .ld-hero__rail .ld-rail__item { flex: 1; width: auto; min-height: 44px; }
  .ld-hero__rail .ld-rail__item i { height: 4px; background: rgba(255, 253, 248, .55); }
  .ld-hero__rail .ld-rail__item i::after { background: #FFFDF8; }
  .ld-hero__pause { width: 44px; height: 44px; background: rgba(255, 253, 248, .9); box-shadow: none; }
  .ld-hero__demo { order: 2; flex-basis: auto; padding: 8px 14px; border-radius: 999px; background: rgba(255, 253, 248, .9); color: var(--ink-2); white-space: nowrap; font-size: 13.5px; }
  @media (prefers-reduced-motion: no-preference) {
    .ld-hero__phone { animation: ld-float 6s ease-in-out infinite; }
  }
}
@media (max-width: 899px) { .ld-hero__phone { display: none; } }
@keyframes ld-float { 50% { transform: translateY(-10px); } }
@keyframes ld-said { 0%, 46% { transform: translateY(14px) scale(.9); clip-path: inset(0 100% 0 0 round 22px); } 56%, 100% { transform: none; clip-path: inset(0 0 0 0 round 22px); } }
:is(.ld-hero.is-still, .ld.demo-is-paused .ld-hero) :is(.ld-hero__phone, .ld-hero__said) { animation-play-state: paused; }

/* telas médias */
@media (max-width: 1239px) {
  .ld-hero { --ch: min(56cqh, 500px); --h1: clamp(38px, 4vw, 50px); --talk-w: 290px; }
  .ld-rail__item { width: 40px; }
  .ld-beat--npc .ld-say__line { font-size: 19px; }
  .ld-scene__art { --px: 66cqw; }
}
/* estreitas: texto em cima; a cena (cidade, morador e conversa) embaixo */
@media (max-width: 899px) {
  .ld-hero { --ch: 300px; justify-content: flex-start; height: auto; padding-top: 0; container-type: inline-size; background: var(--cream); }
  .ld-hero__copy { order: -1; }
  .ld-scene__pin { display: flex; left: var(--pad); top: 14px; transform: none; z-index: 2; }
  .ld-scene__pin::after { content: none; }
  .ld-hero__place { display: none; }
  .ld-hero__copy { width: auto; max-width: 640px; margin: 0; padding: calc(var(--nav-h) + 16px) var(--pad) 0; gap: 14px; }
  .ld-hero__title { font-size: clamp(32px, 6.5vw, 44px); }
  /* a cena em cima (cidade e quem atende), a conversa embaixo, no papel */
  .ld-hero__stage { --scene: 340px; position: relative; inset: auto; height: calc(var(--scene) + 262px); margin-top: 18px; container-type: size; }
  .ld-scene::before { background: linear-gradient(180deg, var(--cream) 0, rgba(251, 246, 234, 0) 12%, rgba(251, 246, 234, 0) calc(var(--scene) - 70px), var(--cream) var(--scene)); }
  .ld-scene__art { --px: 32cqw; --py: calc(var(--scene) * .5); --w: calc(max(100cqw, var(--scene) * var(--ar)) * 1.08); top: clamp(calc(var(--scene) - var(--h)), calc(var(--py) - var(--ay) * var(--h)), 0px); }
  .ld-scene__who { left: auto; right: 6%; bottom: auto; top: calc(var(--scene) - var(--ch) + 6px); height: var(--ch); }
  .ld-scene__talk { left: var(--pad); right: var(--pad); bottom: 8px; width: auto; max-width: 560px; }
  .ld-beat--npc .ld-say::after { left: auto; right: 64px; bottom: auto; top: -9px; transform: rotate(-135deg); }
  .ld-hero__rail { width: auto; margin: 0; padding: 14px var(--pad) 40px; }
}
@media (max-width: 640px) {
  .ld-hero { --ch: 250px; }
  .ld-hero__title { font-size: clamp(32px, 10vw, 40px); }
  .ld-hero__lead { font-size: 16.5px; }
  .ld-hero__cta { width: 100%; }
  .ld-hero__cta .ld-btn--primary { flex: 1 1 100%; }
  .ld-hero__how { display: none; }
  .ld-hero__note { font-size: 13.5px; }
  .ld-hero__stage { --scene: 280px; margin-top: 12px; }
  .ld-scene__who { right: 4%; }
  .ld-scene__talk { left: 14px; right: 14px; gap: 8px; }
  .ld-beat--npc .ld-say { padding: 11px 14px 13px; }
  .ld-beat--npc .ld-say__line { font-size: 18px; }
  .ld-beat--tip .ld-whisper { font-size: 14px; }
  .ld-scene__pin { font-size: 13px; padding: 6px 11px 6px 9px; }
  .ld-rail__item { width: 36px; }
  .ld-hero__rail { flex-wrap: wrap; gap: 10px; }
}

/* ---- 2 café: deu branco, o Tato sopra ----------------------------------------- */
.ld-cafe { position: relative; padding: clamp(80px, 9vw, 132px) var(--pad) clamp(80px, 8vw, 120px); background: var(--cream); }
/* cabeçalho de seção: título e uma linha logo abaixo, à esquerda (o mesmo em todas) */
.ld-cafe__head, .ld-again__head { display: grid; justify-items: start; gap: 16px; max-width: calc(var(--max) + 120px); margin: 0 auto clamp(36px, 4.4vw, 60px); }
.ld-cafe__head .ld-h2, .ld-again__head .ld-h2 { max-width: 16em; }
.ld-cafe__lead b { font-weight: 600; color: var(--forest); }
.ld-cafe__fig, .ld-again__fig { margin: 0; }
.ld-cafe__room { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4.4vw, 72px); align-items: center; max-width: calc(var(--max) + 120px); margin: 0 auto; }
/* em retrato: a sala do app inteira na altura da conversa */
.ld-cafe__stage { position: relative; aspect-ratio: 4 / 5; max-height: 820px; border-radius: 36px; overflow: hidden; background: #F3E5C8; container-type: size; isolation: isolate; }
/* A arte (1536 × 1024) cobre o palco como object-fit: cover e mira em --fx/--fy;
   quem atende fica entre as duas camadas, na geometria do app (tampo a 71%). */
.ld-art { --ar: 1.5; --w: calc(max(100cqw, 100cqh * var(--ar)) * var(--zoom, 1)); --h: calc(var(--w) / var(--ar));
  position: absolute; width: var(--w); height: var(--h); container-type: size;
  left: clamp(calc(100cqw - var(--w)), calc(50cqw - var(--fx, .5) * var(--w)), 0px);
  top: clamp(calc(100cqh - var(--h)), calc(50cqh - var(--fy, .5) * var(--h)), 0px); }
.ld-art__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; }
.ld-art__front { z-index: 2; }
.ld-art__who { position: absolute; z-index: 1; left: 50%; bottom: 13.6%; height: 63.7%; transform: translateX(-50%); }
.ld-cafe__tato { position: absolute; z-index: 3; right: 6%; bottom: 15%; width: clamp(84px, 17%, 132px); }
.ld-talk { display: grid; gap: 16px; }
.ld-talk__log { display: grid; gap: 16px; }
.ld-turn { display: grid; justify-items: start; }
.ld-turn--you { justify-items: end; }
.ld-turn--ok { justify-items: end; }
.ld-say--big .ld-say__line { font-size: clamp(24px, 2.1vw, 30px); }
.ld-say--big { padding: 16px 20px 18px; max-width: 30em; }
.ld-say--big::after, .ld-talk .ld-say::after { left: 26px; }
.ld-you--blank { min-width: 84px; grid-template-columns: auto; }
.ld-talk .ld-turn--you .ld-you { grid-template-columns: auto 1fr auto; }
.ld-ladder { display: grid; gap: 12px; width: min(100%, 460px); padding: 14px 18px 14px; border-radius: 20px; background: var(--butter-soft); border: 1.5px dashed #DDAA2C; }
.ld-ladder__head { display: flex; align-items: center; gap: 10px; }
.ld-ladder__head b { font: 600 16px/1 var(--display); color: var(--accent-text); }
.ld-ladder__head span { font-size: 13.5px; color: #6B5320; }
.ld-ladder ol { display: grid; gap: 10px; padding-left: 38px; }
.ld-ladder li { display: grid; gap: 2px; }
.ld-ladder li small { font: 500 13px/1.2 var(--body); color: #6B5320; }
.ld-ladder li span { font: 500 18px/1.3 var(--display); color: var(--ink); }
.ld-ladder li span b { font-weight: 600; }
.ld-ladder[data-shown="0"] ol, .ld-ladder[data-shown="0"] .ld-ladder__head span { display: none; }
.ld-ladder[data-shown="2"] li:nth-child(n + 3), .ld-ladder[data-shown="3"] li:nth-child(n + 4) { display: none; }
.ld-help { display: inline-flex; align-items: center; gap: 10px; justify-self: start; min-height: 44px; margin-left: 28px; padding: 0 14px 0 6px; border-radius: 999px; color: var(--forest); font: 600 15px/1 var(--display); }
.ld-help:hover { background: rgba(213, 158, 20, .14); }
.ld-help__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--butter); color: var(--butter-ink); font: 700 16px/1 var(--display); }
.ld-talk__reply { padding-top: 2px; }
.ld-whisper--note { max-width: 460px; grid-template-columns: 24px 1fr; align-items: start; gap: 10px; }
.ld-whisper--note p { font-size: 15.5px; line-height: 1.5; }
.ld-talk__next { display: flex; justify-content: flex-end; margin-top: 8px; }

/* ---- 3 nível: a escada das respostas --------------------------------------- */
.ld-level { position: relative; padding: clamp(80px, 9vw, 128px) var(--pad) clamp(72px, 8vw, 112px); background: var(--sand); overflow: clip; }
.ld-level__head { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 14px; max-width: var(--max); margin: 0 auto clamp(30px, 4vw, 48px); }
/* a pergunta do Kenji fica logo acima do A1: lê-se pergunta → escada */
.ld-level__head .ld-say--level { margin-top: clamp(10px, 1.6vw, 22px); }
.ld-level__head .ld-h2 { color: var(--forest); }
.ld-level__head .ld-h2 em { color: var(--green); }
.ld-say--level { width: fit-content; max-width: 100%; }
.ld-say--level .ld-say__line { font-size: clamp(20px, 1.8vw, 26px); }
/* a escada sobe da esquerda para a direita: cada degrau é um nível */
.ld-stairs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; gap: 12px; max-width: var(--max); margin: 0 auto; }
.ld-step { display: grid; gap: 12px; align-content: start; padding: 18px 16px 20px; min-height: calc(210px + var(--i) * 30px); border-radius: 24px 24px 8px 8px; background: var(--paper); }
.ld-step__code { display: grid; gap: 3px; }
.ld-step__code b { font: 600 30px/1 var(--display); color: var(--forest); }
.ld-step__code span { font: 500 14px/1.25 var(--body); color: var(--mute); }
.ld-you--step { padding: 10px 13px 12px; border-radius: 16px 16px 4px 16px; box-shadow: none; }
.ld-you--step span[lang] { grid-column: 1 / -1; font-size: 16.5px; line-height: 1.25; }
.ld-step__bar { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.ld-step__bar small { display: block; margin-bottom: 2px; font: 600 13px/1.2 var(--body); color: var(--mute); }
.ld-step__pace { margin-top: auto; font-size: 13px; line-height: 1.35; color: var(--mute); }
.ld-level__fine { max-width: var(--max); margin: 18px auto 0; }

/* ---- 4 revisitas: o mesmo balcão, três problemas -------------------------- */
.ld-again { position: relative; padding: clamp(80px, 9vw, 132px) var(--pad); background: var(--cream); }


.ld-again__head .ld-h2 em { color: var(--teal); }
.ld-again__body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: center; max-width: calc(var(--max) + 120px); margin: 0 auto; }
.ld-again__stage { position: relative; aspect-ratio: 5 / 4; border-radius: 36px; overflow: hidden; background: #DCE9EC; container-type: size; isolation: isolate; }
/* o letreiro em HTML por cima do desenho (CHECKIN.sign em qa/scene-art.mjs) */
.ld-hang { position: absolute; z-index: 3; left: 37.6%; top: 2.9%; width: 24.7%; height: 7.2%; display: grid; place-items: center; border-radius: 1.2cqh; background: var(--teal); color: #FFFDF8; font: 600 4.2cqh/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
/* espelhado em relação ao café: a linha do tempo à esquerda, o balcão à direita */
@media (min-width: 1101px) {
  .ld-again__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .ld-again__fig { order: 2; }
}
/* a linha do tempo: três visitas, sempre à vista */
.ld-trips { display: grid; }
.ld-trip { position: relative; display: grid; gap: 12px; padding: 22px 0; border-top: 1px solid var(--line); }
.ld-trip:last-child { border-bottom: 1px solid var(--line); }
.ld-trip__when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.ld-trip__when b { flex-basis: 100%; font: 500 14px/1.2 var(--body); color: var(--mute); }
.ld-trip__when > span { font: 600 22px/1.2 var(--display); color: var(--forest); }
/* o painel de embarque: o único detalhe escuro da seção */
.ld-trip__when em { padding: 6px 10px; border-radius: 8px; background: #18242A; color: #F8C637; font: 700 13px/1 var(--body); font-style: normal; letter-spacing: .04em; }
.ld-trip__line { display: grid; grid-template-columns: 30px 1fr; align-items: start; gap: 10px; }
.ld-trip__face { width: 30px; height: 30px; border-radius: 50%; background: var(--sand); }
.ld-trip__line span { font: 500 clamp(17px, 1.35vw, 19.5px)/1.3 var(--display); color: var(--ink-2); }

/* ---- 5 cidades: uma por vez, em tela cheia ------------------------------------ */
/* A mesma linguagem do hero: a cidade cobre a tela, a câmera chega devagar e
   cada lugar aparece marcado no prédio dele. A barra das 14 é o relógio. */
.ld-world { --dur-city: 5.4s; position: relative; height: clamp(660px, 94svh, 900px); overflow: clip; container-type: size; background: #12261C; color: #FFFDF8; }
.ld-world__stage { position: absolute; inset: 0; }
.ld-wcity { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1s var(--ease), visibility 0s 1s; }
.ld-wcity.is-on { z-index: 1; opacity: 1; visibility: visible; transition: opacity 1s var(--ease); }
/* o véu: título em cima, nome da cidade embaixo, a cidade livre no meio */
.ld-wcity::before { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(9, 22, 15, .82) 0, rgba(9, 22, 15, .35) 24%, rgba(9, 22, 15, 0) 40%, rgba(9, 22, 15, 0) 58%, rgba(9, 22, 15, .78) 100%); }
.ld-wcity__art { --ar: 1.818; --w: max(100cqw, 100cqh * var(--ar)); position: absolute; width: var(--w); height: calc(var(--w) / var(--ar)); left: calc(50cqw - var(--w) / 2); top: min(0px, calc(54cqh - var(--w) / var(--ar) / 2)); }
.ld-wcity__art > img { display: block; width: 100%; height: 100%; user-select: none; }
.ld-wcity__pins { position: absolute; z-index: 2; inset: 0; }
.ld-wpin { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: rgba(255, 253, 248, .97); color: var(--forest); font: 600 14.5px/1 var(--display); white-space: nowrap; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .65); transform: translate(-50%, calc(-100% - 10px)); }
.ld-wpin::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: inherit; border-radius: 0 0 3px 0; transform: translateX(-50%) rotate(45deg); }
.ld-wpin__face { width: 30px; height: 30px; border-radius: 50%; background: var(--sand); }
.ld-wpin em { padding: 4px 8px; border-radius: 999px; background: #E2F2E4; color: #23573E; font: 600 12px/1 var(--body); font-style: normal; }
.ld-wcity__label { position: absolute; z-index: 3; left: var(--edge); bottom: 100px; display: grid; gap: 8px; }
.ld-wcity__label b { font: 600 clamp(44px, 5vw, 76px)/.9 var(--display); letter-spacing: -.04em; color: #FFFDF8; text-shadow: 0 6px 30px rgba(0, 0, 0, .35); }
.ld-wcity__label span { font: 500 clamp(17px, 1.4vw, 21px)/1.3 var(--display); color: #DCEBDF; }
.ld-wcity__list { display: none; }
.ld-world__head { position: absolute; z-index: 4; top: clamp(64px, 10cqh, 110px); left: var(--edge); right: var(--edge); display: grid; justify-items: start; gap: 12px; }
.ld-world__rail { position: absolute; z-index: 4; left: var(--edge); right: var(--edge); bottom: 34px; display: flex; align-items: center; gap: 14px; }
.ld-crail { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.ld-crail::-webkit-scrollbar { display: none; }
.ld-crail__item { position: relative; flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 4px; border-radius: 999px; overflow: hidden; background: rgba(255, 253, 248, .1); color: #E6F0E9; font: 600 14.5px/1 var(--display); box-shadow: inset 0 0 0 1.5px rgba(255, 253, 248, .18); transition: background-color .3s, color .3s; }
.ld-crail__item:hover { background: rgba(255, 253, 248, .2); }
.ld-crail__glyph { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(160deg, var(--chip-a), var(--chip-b)); color: #1C3A2B; }
.ld-crail__glyph svg { width: 18px; height: 18px; }
.ld-crail__name { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .5s var(--ease), padding .5s var(--ease); }
.ld-crail__item.is-on { background: var(--paper); color: var(--forest); box-shadow: none; }
.ld-crail__item.is-on .ld-crail__name { max-width: 200px; padding: 0 12px 0 9px; }
.ld-crail__item i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--butter); transform: scaleX(0); transform-origin: left; }
.ld-crail__item.is-on i { transform: scaleX(1); }
.ld-world__pause { flex: none; background: rgba(255, 253, 248, .14); color: #FFFDF8; box-shadow: inset 0 0 0 1.5px rgba(255, 253, 248, .24); }
.ld-world__pause:hover { background: rgba(255, 253, 248, .24); }
@media (prefers-reduced-motion: no-preference) {
  .ld-wcity.is-on .ld-wcity__art { animation: ld-camera calc(var(--dur-city) + 1.2s) linear both; }
  .ld-wcity.is-on .ld-wpin { animation: ld-pin .55s var(--pop) both; animation-delay: calc(.45s + var(--k) * .2s); }
  .ld-wcity.is-on .ld-wcity__label { animation: ld-rise .7s var(--ease) both .1s; }
  .ld-crail__item.is-on i { animation: ld-cityclock var(--dur-city) linear both; }
}
/* sem opacidade: se a animação ficar parada (fora da tela), a placa continua lá */
@keyframes ld-pin { from { translate: 0 12px; scale: .6; } 70% { scale: 1.06; } }
@keyframes ld-rise { from { translate: 0 18px; } }
@keyframes ld-cityclock { from { transform: scaleX(0); } to { transform: scaleX(1); } }
:is(.ld-world.is-still, .ld.demo-is-paused .ld-world) :is(.ld-wcity__art, .ld-wpin, .ld-wcity__label, .ld-crail__item i) { animation-play-state: paused; }

/* ---- 6 planos: um passe por plano ------------------------------------------- */
.ld-plans { padding: clamp(84px, 9vw, 132px) var(--pad) clamp(72px, 8vw, 104px); background: var(--sand); }
.ld-plans__head { display: grid; justify-items: center; gap: 16px; max-width: var(--max); margin: 0 auto clamp(30px, 4vw, 48px); text-align: center; }
.ld-plans__head .ld-lead { margin-inline: auto; }
.ld-plans__toggle { margin-top: 4px; }
.ld-plans__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); max-width: 1120px; margin: 0 auto; align-items: stretch; }
.ld-plan { position: relative; display: flex; flex-direction: column; border-radius: var(--r-xl); background: var(--paper); }
.ld-plan.is-featured { background: var(--forest); color: #FFFDF8; box-shadow: 0 30px 60px -34px rgba(21, 39, 29, .9); }
.ld-plan__main { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 26px 24px 20px; }
.ld-plan__stub { position: relative; display: grid; gap: 12px; padding: 0 24px 24px; }
.ld-plan__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ld-plan__head h3 { font: 600 26px/1 var(--display); color: inherit; }
.ld-plan__badge { padding: 6px 10px; border-radius: 999px; background: var(--butter); color: var(--butter-ink); font: 700 12px/1 var(--body); letter-spacing: .04em; }
.ld-plan__for { font-size: 15px; color: var(--mute); }
.ld-plan__price { display: flex; align-items: baseline; gap: 6px; font: 600 42px/1 var(--display); letter-spacing: -.02em; }
.ld-plan__price small { font: 500 15px/1 var(--body); color: var(--mute); letter-spacing: 0; }
.ld-plan__bill { font-size: 13.5px; color: var(--mute); min-height: 20px; }
.ld-plan.is-featured :is(.ld-plan__for, .ld-plan__price small, .ld-plan__bill, .ld-plan__open) { color: #CFE7D5; }
.ld-plan ul { display: grid; gap: 10px; margin: 6px 0 0; }
.ld-plan li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 15.5px; line-height: 1.45; }
.ld-plan li .lp-i { margin-top: 3px; color: var(--green); }
.ld-plan.is-featured li .lp-i { color: var(--butter); }
.ld-plan.is-featured .ld-btn--line { background: transparent; color: #FFFDF8; box-shadow: inset 0 0 0 2px rgba(255, 253, 248, .4); }
.ld-plans__note { max-width: 1120px; margin: 22px auto 0; text-align: center; font-size: 14.5px; color: var(--mute); }
.ld-limits { max-width: 1120px; margin: 26px auto 0; border-radius: var(--r-lg); background: var(--paper); }
.ld-limits summary { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 20px; list-style: none; cursor: pointer; font: 600 16px/1 var(--display); color: var(--forest); }
.ld-limits summary::-webkit-details-marker { display: none; }
.ld-limits[open] summary .lp-i { transform: rotate(180deg); }
.ld-limits__body { padding: 0 20px 22px; display: grid; gap: 18px; }
.ld-limits__scroll { overflow-x: auto; }
.ld-compare { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14.5px; }
.ld-compare caption { padding: 4px 0 12px; text-align: left; font: 600 18px/1.2 var(--display); color: var(--forest); }
.ld-compare th, .ld-compare td { padding: 12px 10px; border-top: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.ld-compare thead th { border-top: 0; font: 600 16px/1 var(--display); color: var(--forest); }
.ld-compare tbody th { font-weight: 600; color: var(--ink-2); }
.ld-compare td .lp-i { color: var(--green); }
.ld-defs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ld-defs div { padding: 12px 14px; border-radius: 14px; background: var(--sand); }
.ld-defs dt { font: 600 15px/1.2 var(--display); color: var(--forest); margin-bottom: 4px; }
.ld-defs dd { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.ld-limits__foot { font-size: 13px; line-height: 1.55; color: var(--mute); }

/* ---- 7 dúvidas: você pergunta, o Tato responde -------------------------------- */
.ld-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; padding: clamp(72px, 8vw, 112px) var(--pad) clamp(88px, 9vw, 128px); }
.ld-faq__head { position: sticky; top: calc(var(--nav-h) + 32px); display: grid; gap: 16px; align-content: start; align-self: start; }
.ld-faq__tato { width: clamp(110px, 11vw, 150px); margin-top: 6px; }
.ld-faq__list { display: grid; align-content: start; border-top: 1px solid var(--line); }
/* <details> não vira grade de verdade (o conteúdo fica num slot só): bloco simples */
.ld-faq__item { position: relative; }
.ld-faq__item { border-bottom: 1px solid var(--line); }
.ld-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 64px; padding: 16px 0; list-style: none; cursor: pointer; font: 600 19px/1.3 var(--display); color: var(--forest); }
.ld-faq__item summary::-webkit-details-marker { display: none; }
.ld-faq__item summary:hover span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: rgba(28, 58, 43, .3); }
.ld-faq__item summary i { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--sand); transition: background-color .15s; }
.ld-faq__item[open] summary i { background: var(--butter); }
.ld-faq__item summary i::before, .ld-faq__item summary i::after { content: ''; position: absolute; left: 9px; right: 9px; top: 15px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s var(--ease); }
.ld-faq__item summary i::after { transform: rotate(90deg); }
.ld-faq__item[open] summary i::after { transform: rotate(0); }
.ld-faq__item > p { max-width: 40em; padding: 0 48px 22px 0; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); }

/* ---- 8 final: todo mundo chega para se despedir --------------------------------- */
/* a borda de cima: as nuvens que separam as dúvidas (papel) do céu da cidade */
.ld-final { --h: min(24cqh, 11.4cqw); position: relative; height: clamp(720px, 100svh, 920px); overflow: clip; container-type: size; background: #A8D5E8; color: var(--forest); }
/* as cidades passando, sozinhas, como um vídeo ao fundo */
.ld-final__bg { position: absolute; inset: 0; }
.ld-final__city { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease); }
.ld-final__city.is-on { opacity: 1; }
.ld-final__city img { position: absolute; left: 50%; bottom: 0; width: max(100cqw, 100cqh * 1.818); height: auto; aspect-ratio: 20 / 11; transform: translateX(-50%); }
.ld-final__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--cream) 0, rgba(251, 246, 234, .86) 26%, rgba(251, 246, 234, .2) 50%, rgba(251, 246, 234, 0) 62%); }
@media (prefers-reduced-motion: no-preference) {
  .ld-final__city.is-on img { animation: ld-drift 9s linear both; }
}
@keyframes ld-drift { from { scale: 1.06; } to { scale: 1; } }
.ld-final__copy { position: relative; z-index: 5; display: grid; justify-items: center; gap: 16px; padding: clamp(84px, 11cqh, 132px) var(--pad) 0; text-align: center; }
.ld-final__title { font: 600 clamp(40px, 4.6vw, 70px)/1 var(--display); letter-spacing: -.03em; color: var(--forest); text-wrap: balance; }
.ld-final__title em { font-style: normal; color: var(--green); }
.ld-final__lead { max-width: 30em; font: 500 clamp(18px, 1.6vw, 24px)/1.45 var(--display); color: #17301F; text-wrap: balance; }
.ld-final__note { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1.4 var(--body); color: #1E3427; text-shadow: 0 0 6px var(--cream), 0 0 14px var(--cream), 0 0 2px var(--cream); }
.ld-final__note .lp-i { color: var(--green); }
/* a calçada da frente: só o elenco fica neste plano (cobre as pessoinhas do desenho) */
.ld-final__ground { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: calc(var(--h) * .42 + 26px); background: repeating-linear-gradient(90deg, rgba(150, 120, 70, .14) 0 2px, transparent 2px 120px), linear-gradient(180deg, #EFE3CB, #E2D1B0); border-top: 9px solid #CBB68E; box-shadow: 0 -14px 30px -18px rgba(60, 40, 10, .45); }
/* o elenco, lado a lado, ninguém na frente de ninguém */
.ld-crowd { position: absolute; z-index: 4; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; align-items: flex-end; }
.ld-crowd__who { position: relative; flex: none; width: calc(var(--h) * var(--tall, 1) * .62); height: calc(var(--h) * var(--tall, 1)); }
.ld-crowd__body { position: absolute; left: 50%; bottom: 0; height: 100%; transform: translateX(-50%); filter: drop-shadow(0 10px 10px rgba(40, 28, 10, .22)); }
.ld-crowd__body svg { display: block; height: 100%; width: auto; }
.ld-crowd__tato { flex: none; width: calc(var(--h) * .86); margin: 0 calc(var(--h) * .1); }
.ld-crowd__tato .ld-final__tato { position: static; width: 100%; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  /* com JS: eles esperam fora da tela e entram andando pelas laterais */
  .ld-final.is-armed .ld-crowd__who { transform: translateX(var(--from)); }
  .ld-final.is-armed [data-side="l"] { --from: calc(-60cqw - var(--i) * 4cqw); }
  .ld-final.is-armed [data-side="r"] { --from: calc(60cqw + var(--i) * 4cqw); }
  .ld-final.is-armed .ld-crowd__tato { opacity: 0; transform: translateY(30%) scale(.7); }
  .ld-final.is-in .ld-crowd__who { transform: none; transition: transform 2.1s cubic-bezier(.22, .7, .25, 1) calc(.15s + var(--i) * .13s); }
  .ld-final.is-in .ld-crowd__body { animation: ld-walk .3s ease-in-out calc(.15s + var(--i) * .13s) 7 alternate both; }
  .ld-final.is-in .ld-crowd__tato { opacity: 1; transform: none; transition: opacity .5s 2s, transform .7s var(--pop) 2s; }
  .ld-crowd__who.is-hop { animation: ld-hop .7s var(--pop); }
}
@keyframes ld-walk { from { translate: 0 0; rotate: -2deg; } to { translate: 0 -7px; rotate: 2deg; } }
@keyframes ld-hop { 35% { translate: 0 -22px; } 70% { translate: 0 2px; } }
:is(.ld-final.is-still, .ld.demo-is-paused .ld-final) :is(.ld-final__city img, .ld-crowd__body, .ld-crowd__who) { animation-play-state: paused; }

/* ---- rodapé e barra fixa -------------------------------------------------------- */
.ld-foot { background: #12261C; color: #D3E2D7; padding: clamp(48px, 6vw, 72px) var(--pad) 40px; }
.ld-foot__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 2fr); gap: 32px 56px; max-width: var(--max); margin: 0 auto; }
.ld-foot .ld-logo { color: #FFFDF8; }
.ld-foot__brand p { margin-top: 12px; max-width: 26em; font-size: 15px; line-height: 1.6; color: #A9C0B1; }
.ld-foot__links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ld-foot__links p { margin-bottom: 10px; font: 600 15px/1.2 var(--display); color: #FFFDF8; }
.ld-foot__links a { display: block; padding: 6px 0; font-size: 14.5px; color: #C3D6C9; text-decoration: none; }
.ld-foot__links a:hover { color: #FFFDF8; text-decoration: underline; text-underline-offset: 4px; }
.ld-foot__copy { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid rgba(255, 253, 248, .12); font-size: 13.5px; color: #93AE9C; }
.ld-dock { display: none; }

/* ---- telas médias: o hero empilha (texto, ilha, conversa) ---------------------- */
@media (max-width: 1239px) {
  .ld-stairs { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .ld-step { min-height: 0; }
}
@media (max-width: 1100px) {
  .ld-nav__links a:nth-child(5) { display: none; }
  .ld-cafe__room { grid-template-columns: 1fr; max-width: 760px; }
  .ld-cafe__stage { aspect-ratio: 4 / 3; }
  .ld-cafe__head, .ld-again__head { max-width: 760px; grid-template-columns: 1fr; }
  .ld-again__body { grid-template-columns: 1fr; max-width: 760px; }
  .ld-again__stage { aspect-ratio: 16 / 10; }
}
@media (max-width: 960px) {
  .ld-nav__links { display: none; }
  .ld-nav__login { margin-left: auto; }
  .ld-level__head { grid-template-columns: 1fr; }
  .ld-level__head .ld-h2 { grid-row: auto; }
  .ld-level__head .ld-say--level { grid-column: 1; grid-row: auto; justify-self: start; }
  .ld-plans__grid { grid-template-columns: 1fr; max-width: 520px; }
  .ld-faq { grid-template-columns: 1fr; }
  .ld-faq__head { position: relative; top: auto; }
  .ld-faq__tato { position: absolute; right: 0; top: -8px; width: 96px; margin: 0; }
  .ld-faq__head .ld-h2 { padding-right: 96px; }
  .ld-foot__in { grid-template-columns: 1fr; }
  .ld-dock { position: fixed; z-index: 30; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 18px; border-radius: 999px; background: rgba(28, 58, 43, .97); color: #DCEBDF; font: 600 14px/1 var(--body); box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .6); opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .2s, transform .25s var(--ease), visibility 0s .25s; }
  .ld-dock.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .25s var(--ease); }
  .ld-dock .ld-btn { min-height: 46px; }
}

/* ---- celular ---------------------------------------------------------------------- */
@media (max-width: 899px) {
  .ld-world { display: flex; flex-direction: column; height: auto; container-type: inline-size; }
  .ld-world__head { order: -1; }
  .ld-world__head { position: relative; top: auto; left: auto; right: auto; padding: 68px var(--pad) 22px; }
  .ld-world__stage { position: relative; height: 480px; container-type: size; }
  .ld-wcity::before { background: linear-gradient(180deg, rgba(9, 22, 15, .35) 0, rgba(9, 22, 15, 0) 22%, rgba(9, 22, 15, 0) 42%, rgba(9, 22, 15, .86) 100%); }
  .ld-wcity__pins { display: none; }
  .ld-wcity__list { position: absolute; z-index: 3; left: var(--pad); right: var(--pad); bottom: 16px; display: flex; flex-wrap: wrap; gap: 6px; }
  .ld-wcity__list li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: rgba(255, 253, 248, .95); color: var(--forest); font: 600 13px/1 var(--display); }
  .ld-wcity__list .ld-wpin__face { width: 24px; height: 24px; }
  .ld-wcity__label { left: var(--pad); bottom: 126px; }
  .ld-wcity__label b { font-size: 46px; }
  .ld-world__rail { position: relative; left: auto; right: auto; bottom: auto; padding: 16px var(--pad) 44px; }
  /* no celular, uma fileira só: seis moradores e o Tato no meio */
  .ld-final { --h: min(118px, 19vw); height: 640px; }
  .ld-crowd__who[data-far] { display: none; }
  .ld-final__ground { height: 14%; }
  .ld-crowd { bottom: calc(14% - 34px); }
  .ld-wcity__art { top: calc(100cqh - var(--w) / var(--ar) + 40px); }
}
@media (max-width: 640px) {
  .ld { font-size: 16px; --nav-h: 64px; }
  .ld-logo { font-size: 19px; }
  .ld-nav__start { display: none; }
  .ld-h2 { font-size: clamp(30px, 8.8vw, 38px); }
  .ld-cafe__stage { border-radius: 26px; aspect-ratio: 4 / 4.2; }
  .ld-say--big .ld-say__line { font-size: 22px; }
  .ld-talk__next .ld-btn { width: 100%; }
  .ld-stairs { grid-template-columns: 1fr; gap: 8px; }
  .ld-step { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; padding: 14px 16px; border-radius: 18px; }
  .ld-step__code { display: flex; align-items: baseline; gap: 10px; grid-column: 1 / -1; }
  .ld-step__code b { font-size: 24px; }
  .ld-step__code span { font-size: 14px; }
  .ld-you--step { justify-self: start; grid-column: 1 / -1; }
  .ld-step__bar { grid-column: 1; }
  .ld-step__bar small { display: inline; margin-right: 4px; }
  .ld-step__pace { grid-column: 2; align-self: center; }
  /* limites no celular: cada recurso com os três planos embaixo, sem rolagem de lado */
  .ld-compare { min-width: 0; }
  .ld-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ld-compare :is(tbody, tr, th, td) { display: block; }
  .ld-compare tbody tr { padding: 12px 0; border-top: 1px solid var(--line-2); }
  .ld-compare tbody th { padding: 0 0 6px; border: 0; color: var(--forest); }
  .ld-compare td { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 3px 0; border: 0; }
  .ld-compare td::before { content: attr(data-plan); font-weight: 600; color: var(--ink-2); }
  .ld-step__pace { margin-top: 0; }
  .ld-again__stage { aspect-ratio: 4 / 3; border-radius: 26px; }
  .ld-trip { padding: 18px 0; }
  .ld-trip__when > span { font-size: 20px; }
  .ld-plan__main { padding: 22px 18px 16px; }
  .ld-plan__stub { padding: 18px; }
  .ld-plan__price { font-size: 36px; }
  .ld-defs { grid-template-columns: 1fr; }
  .ld-faq__item summary { font-size: 16.5px; }
  .ld-final__copy { gap: 14px; padding-top: 72px; }
  .ld-foot__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .ld *, .ld *::before, .ld *::after { animation: none !important; transition: none !important; }
  /* as faixas param e viram uma fila que rola de lado */
}
/* pausa: só o que se mexe sozinho (sem seletor `*` preso a classe que muda no
   ritmo da página; ver landing-scroll-perf-rules) */
.ld.demo-is-paused .ld-dots i { animation-play-state: paused; }

/* Alvos de toque >= 44x44 (a barrinha de progresso continua do mesmo tamanho visual). */
.ld-nav__links a { display: inline-flex; align-items: center; min-height: 44px; }
.ld-nav__links a.is-current::after { bottom: 8px; }
.ld-foot__links a { display: flex; align-items: center; min-height: 44px; padding-block: 0; }
@media (max-width: 1239px) {
  .ld-rail { gap: 0; }
  .ld-rail__item { width: 44px; padding: 0 4px; }
}

/* ==== v9 (2026-11-06): ritmo comum das seções ================================
   Cabeçalho centralizado e grande, uma frase de apoio, muito respiro. */
.ld-head { display: grid; justify-items: center; gap: 18px; max-width: 900px; margin: 0 auto clamp(48px, 6vw, 80px); text-align: center; }
.ld-head .ld-lead { margin: 0 auto; }
.ld-h2 { font: 600 clamp(36px, 4.4vw, 64px)/1.02 var(--display); letter-spacing: -.03em; }
.ld-lead { font-size: clamp(17px, 1.3vw, 20px); }

/* fatos: no lugar de logos/notas que ainda não temos */
.ld-facts { padding: 0 var(--pad); background: var(--cream); }
.ld-facts__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: var(--max); margin: 0 auto; padding: clamp(28px, 3vw, 40px) 0; border-block: 1px solid var(--line); list-style: none; }
.ld-facts__list li { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 0 16px; }
.ld-facts__list li + li { border-left: 1px solid var(--line); }
.ld-facts__list b { font: 600 clamp(34px, 3.4vw, 52px)/1 var(--display); letter-spacing: -.03em; color: var(--forest); }
.ld-facts__list span { font-size: 15px; line-height: 1.4; color: var(--mute); max-width: 15em; }

/* as telas de verdade */
.ld-app { padding: clamp(110px, 12vw, 170px) var(--pad) clamp(90px, 10vw, 140px); background: var(--cream); }
.ld-app__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); max-width: 1120px; margin: 0 auto; list-style: none; }
.ld-app__step { display: grid; justify-items: center; align-content: start; gap: 10px; text-align: center; }
.ld-app__step:nth-child(2) { transform: translateY(-36px); }
.ld-phone { width: min(100%, 290px); margin-bottom: 18px; border-radius: 40px; padding: 9px; background: #17241C; box-shadow: 0 50px 80px -46px rgba(20, 40, 25, .65); }
.ld-phone img { display: block; width: 100%; height: auto; border-radius: 31px; }
.ld-app__n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--butter); color: var(--butter-ink); font: 700 17px/1 var(--display); }
.ld-app__step h3 { font: 600 clamp(22px, 1.8vw, 26px)/1.15 var(--display); letter-spacing: -.015em; color: var(--forest); }
.ld-app__step p:not(.ld-app__n) { max-width: 22em; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.ld-app__cta { display: grid; justify-items: center; gap: 14px; margin-top: clamp(48px, 5vw, 72px); }
.ld-app__note { display: inline-flex; align-items: center; gap: 8px; font: 500 14.5px/1.4 var(--body); color: #1E3427; }
.ld-app__note .lp-i { color: var(--green); }
@media (max-width: 899px) {
  .ld-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .ld-facts__list li:nth-child(3) { border-left: 0; }
  .ld-app__steps { grid-template-columns: 1fr; max-width: 420px; gap: 56px; }
  .ld-app__step:nth-child(2) { transform: none; }
  .ld-phone { width: min(78%, 280px); }
}
@media (max-width: 640px) { .ld-h2 { font-size: clamp(32px, 9.4vw, 42px); } }

/* café, nível e revisitas: cabeçalho centralizado, como o resto */
.ld-cafe__head, .ld-again__head, .ld-level__head { justify-items: center; text-align: center; margin-inline: auto; }
.ld-cafe__head .ld-h2, .ld-again__head .ld-h2 { max-width: 18em; }
.ld-cafe__lead, .ld-again__head .ld-lead, .ld-level__head .ld-lead { margin-inline: auto; }
.ld-level__head .ld-say--level { justify-self: center; }
.ld-cafe, .ld-again { padding-block: clamp(110px, 11vw, 160px); }

/* ==== v10 (2026-11-06): ideias trazidas das referências ===================== */
/* elenco (Praktika: galeria de tutores) */
.ld-cast { padding: clamp(110px, 11vw, 160px) var(--pad); background: var(--cream); }
.ld-cast__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: var(--max); margin: 0 auto; list-style: none; }
.ld-cast__card { display: grid; align-content: start; gap: 12px; padding: 22px 22px 24px; border-radius: 28px; background: var(--paper); box-shadow: 0 1px 0 rgba(28, 58, 43, .06), 0 24px 40px -34px rgba(28, 58, 43, .4); transition: transform .25s var(--ease); }
.ld-cast__card:hover { transform: translateY(-4px); }
.ld-cast__face { width: 88px; height: 88px; border-radius: 50%; background: var(--sand); }
.ld-cast__who { display: grid; gap: 3px; }
.ld-cast__who b { font: 600 22px/1.1 var(--display); color: var(--forest); }
.ld-cast__who span { font-size: 14px; line-height: 1.35; color: var(--mute); }
.ld-cast__line { font: 500 17px/1.4 var(--display); color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 1100px) { .ld-cast__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .ld-cast__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(78%, 280px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); }
  .ld-cast__card { scroll-snap-align: start; }
}

/* valor (Praktika: professor × app; AbacatePay: simulador) */
.ld-value { padding: clamp(110px, 11vw, 160px) var(--pad); background: var(--forest); color: #FFFDF8; }
.ld-value__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; max-width: var(--max); margin: 0 auto; }
.ld-value__copy { display: grid; gap: 22px; }
.ld-value .ld-h2 em { color: var(--butter); }
.ld-lead--light { color: #DCEADF; }
.ld-value__fine { max-width: 34em; font-size: 14.5px; line-height: 1.55; color: #B9CFBF; }
.ld-value__fine a { color: #FFFDF8; text-underline-offset: 3px; }
.ld-value__calc { display: grid; gap: 22px; padding: clamp(24px, 3vw, 36px); border-radius: 32px; background: rgba(255, 253, 248, .07); box-shadow: inset 0 0 0 1px rgba(255, 253, 248, .12); }
.ld-value__pick { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; }
.ld-value__pick legend { padding: 0; margin-bottom: 12px; font: 600 18px/1.3 var(--display); color: #FFFDF8; }
.ld-value__opts { display: flex; gap: 8px; }
.ld-value__opts label { position: relative; flex: 1; }
.ld-value__opts input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ld-value__opts span { display: grid; place-items: center; min-height: 48px; border-radius: 16px; background: rgba(255, 253, 248, .1); font: 600 20px/1 var(--display); color: #FFFDF8; transition: background-color .15s, color .15s; }
.ld-value__opts input:checked + span { background: var(--butter); color: var(--butter-ink); }
.ld-value__opts input:focus-visible + span { outline: 3px solid #FFFDF8; outline-offset: 2px; }
.ld-value__out { display: none; gap: 18px; }
.ld-value__out[data-n="2"] { display: grid; }
.ld-value__calc:has(input:checked:not(#aulas-2)) .ld-value__out[data-n="2"] { display: none; }
.ld-value__calc:has(#aulas-1:checked) .ld-value__out[data-n="1"],
.ld-value__calc:has(#aulas-3:checked) .ld-value__out[data-n="3"],
.ld-value__calc:has(#aulas-5:checked) .ld-value__out[data-n="5"] { display: grid; }
.ld-value__row { display: grid; gap: 8px; }
.ld-value__row p { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ld-value__row span { font-size: 15.5px; color: #DCEADF; }
.ld-value__row b { font: 600 clamp(26px, 2.4vw, 34px)/1 var(--display); letter-spacing: -.02em; color: #FFFDF8; }
.ld-value__row b small { font: 500 14px/1 var(--body); color: #B9CFBF; margin-left: 4px; }
.ld-value__bar { display: block; height: 14px; border-radius: 8px; background: rgba(255, 253, 248, .1); overflow: hidden; }
.ld-value__bar::after { content: ''; display: block; width: var(--w); height: 100%; border-radius: inherit; background: #E9B8A6; }
.ld-value__row--us .ld-value__bar::after { background: var(--butter); }
.ld-value__row--us b { color: var(--butter); }
.ld-value__sum { font-size: 14.5px; line-height: 1.5; color: #B9CFBF; }
.ld-value__calc .ld-btn { justify-self: start; }
@media (prefers-reduced-motion: no-preference) {
  .ld-value__out .ld-value__bar::after { animation: ld-grow .7s var(--ease) both; transform-origin: left; }
}
@keyframes ld-grow { from { transform: scaleX(0); } }
@media (max-width: 960px) { .ld-value__in { grid-template-columns: 1fr; } }

/* suporte humano no FAQ (AbacatePay: "suporte que não te deixa na mão") */
.ld-faq__help { max-width: 26em; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.ld-faq__help a { color: var(--forest); font-weight: 600; text-underline-offset: 3px; }
/* links dentro do texto: alvo de toque de 44 px sem mexer na linha */
.ld-value__fine a, .ld-faq__help a { display: inline-block; padding-block: 13px; margin-block: -13px; }

/* ==== v11 (2026-11-06) ======================================================= */
/* objetivos no lugar da barra muda (Headspace, Cambly, Busuu, Babbel, Loora) */
.ld-rail__item span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: nowrap; }
.ld-hero__rail .ld-rail { flex: 0 1 auto; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.ld-hero__rail .ld-rail::-webkit-scrollbar { display: none; }
.ld-hero__rail .ld-rail__item { flex: none; width: auto; display: grid; gap: 5px; align-content: center; min-height: 44px; padding: 7px 14px 6px; border-radius: 16px; background: rgba(255, 253, 248, .9); color: var(--forest); font: 600 14.5px/1 var(--display); transition: background-color .2s, color .2s; }
.ld-hero__rail .ld-rail__item i { height: 3px; background: rgba(28, 58, 43, .14); }
.ld-hero__rail .ld-rail__item i::after { background: var(--butter); }
.ld-hero__rail .ld-rail__item.is-on { background: var(--forest); color: #FFFDF8; }
.ld-hero__rail .ld-rail__item:hover:not(.is-on) { background: #FFFDF8; }
.ld-hero__rail .ld-rail__item:focus-visible { outline: 3px solid var(--butter); outline-offset: 2px; }
@media (min-width: 900px) { .ld-hero__demo { margin-left: auto; } }
@media (max-width: 1180px) and (min-width: 900px) { .ld-hero__demo { display: none; } }
@media (max-width: 899px) {
  .ld-hero__rail { flex-wrap: nowrap; }
  .ld-hero__rail .ld-rail { flex: 1; overflow-x: auto; scrollbar-width: none; gap: 6px; }
  .ld-hero__rail .ld-rail__item { flex: none; width: auto; display: grid; gap: 5px; padding: 7px 12px 6px; border-radius: 14px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font: 600 14px/1 var(--display); color: var(--forest); }
  .ld-hero__rail .ld-rail__item.is-on { background: var(--forest); color: #FFFDF8; box-shadow: none; }
  .ld-hero__rail .ld-rail__item i { height: 3px; }
  .ld-hero__rail .ld-rail__item i::after { background: var(--butter); }
}

/* garantia em destaque (Preply: "Nós garantimos") */
.ld-guarantee { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px 20px; max-width: var(--max); margin: clamp(32px, 4vw, 48px) auto 0; padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 40px); border-radius: 28px; background: var(--butter); color: var(--butter-ink); text-align: center; }
.ld-guarantee__big { font: 600 clamp(28px, 3vw, 44px)/1.05 var(--display); letter-spacing: -.02em; }
.ld-guarantee__text { max-width: 30em; font: 500 17px/1.45 var(--body); }

/* biblioteca grátis (Babbel "e além", Headspace "Explore our library") */
.ld-library { padding: clamp(110px, 11vw, 160px) var(--pad) clamp(40px, 5vw, 72px); background: var(--cream); }
.ld-library__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: var(--max); margin: 0 auto; list-style: none; }
.ld-library__card { display: grid; align-content: start; gap: 10px; height: 100%; min-height: 180px; padding: 26px 24px; border-radius: 28px; background: var(--paper); color: var(--ink-2); text-decoration: none; box-shadow: 0 1px 0 rgba(28, 58, 43, .06), 0 24px 40px -34px rgba(28, 58, 43, .4); transition: transform .25s var(--ease); }
.ld-library__card:hover { transform: translateY(-4px); }
.ld-library__card:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; }
.ld-library__card b { font: 600 22px/1.15 var(--display); color: var(--forest); }
.ld-library__card span { font-size: 15.5px; line-height: 1.5; }
.ld-library__card .lp-i { align-self: end; margin-top: auto; color: var(--forest); }
.ld-library__more { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 28px; }
@media (max-width: 1000px) { .ld-library__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ld-library__grid { grid-template-columns: 1fr; } .ld-library__card { min-height: 0; } }
/* ==========================================================================
   Cidades — panorama vetorial em planos, com marcadores ancorados no chão.
   ========================================================================== */

.bt-city {
  --city-ink: #14241C;
  --city-paper: #FFFDF7;
  --city-forest: #1C3A2B;
  --city-butter: #F8C637;
  --city-ease: cubic-bezier(.22, 1, .36, 1);
  --city-spring: cubic-bezier(.34, 1.56, .64, 1);

  position: relative;
  aspect-ratio: 20 / 11;
  border-radius: 26px;
  overflow: hidden;
  background: #CFE6F0;
  isolation: isolate;
}
.bt-city.is-mini { aspect-ratio: 16 / 9; border-radius: 18px; }

.bt-city__art { position: absolute; inset: 0; }
.bt-city__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition: transform .9s var(--city-ease);
}
/* Os planos deslizam em velocidades diferentes com o ponteiro. */
.bt-city__layer[data-depth="0"] { transform: translate3d(calc(var(--look-x, 0px) * .3), calc(var(--look-y, 0px) * .3), 0) scale(1.02); }
.bt-city__layer[data-depth="1"] { transform: translate3d(calc(var(--look-x, 0px) * .9), calc(var(--look-y, 0px) * .6), 0); }
.bt-city__layer[data-depth="2"] { transform: translate3d(calc(var(--look-x, 0px) * 1.7), calc(var(--look-y, 0px) * 1.1), 0) scale(1.02); }

.bt-city__light {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(60% 46% at 22% 6%, rgba(255, 247, 214, .5), transparent 62%),
    radial-gradient(60% 44% at 82% 96%, rgba(20, 36, 28, .18), transparent 70%);
  mix-blend-mode: soft-light;
}
.bt-city__vignette {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  box-shadow: inset 0 -70px 90px -70px rgba(20, 36, 28, .5), inset 0 40px 70px -60px rgba(255, 253, 247, .6);
}
.bt-city.is-night .bt-city__light { mix-blend-mode: screen; opacity: .45; }

/* --- marcadores ------------------------------------------------------------ */
.city-poi-layer { position: absolute; inset: 0; z-index: 5; }

.city-poi {
  position: absolute;
  left: var(--poi-x);
  top: var(--poi-y);
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform: translate(-50%, -100%);
  transition: transform .4s var(--city-spring), filter .3s var(--city-ease);
  animation: btPoiIn .6s var(--city-ease) both;
  animation-delay: calc(var(--poi-index, 0) * 70ms);
}
@keyframes btPoiIn { from { opacity: 0; transform: translate(-50%, -80%) scale(.85); } to { opacity: 1; } }

.poi-pin {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  color: var(--city-forest);
  background: var(--city-paper);
  border: 2.5px solid var(--poi-color, #F8C637);
  box-shadow: 0 8px 18px -8px rgba(20, 36, 28, .6);
  transition: transform .4s var(--city-spring), background .3s, color .3s, box-shadow .3s;
}
.poi-pin svg { width: 22px; height: 22px; }

/* Um pé fino liga o marcador ao chão: ele deixa de flutuar. */
.poi-stem {
  position: absolute;
  left: 50%;
  top: 44px;
  width: 2px;
  height: 18px;
  background: linear-gradient(180deg, var(--poi-color, #F8C637), transparent);
  transform: translateX(-50%);
  pointer-events: none;
}
.poi-stem::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -3px;
  width: 12px; height: 5px;
  border-radius: 50%;
  background: rgba(20, 36, 28, .25);
  transform: translateX(-50%);
}

.poi-name {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 253, 247, .94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font: 600 12px/1 'Fredoka', sans-serif;
  letter-spacing: -.01em;
  color: var(--city-forest);
  white-space: nowrap;
  box-shadow: 0 6px 14px -8px rgba(20, 36, 28, .7);
  transition: transform .35s var(--city-spring), background .3s, color .3s;
}

.city-poi:hover { transform: translate(-50%, -104%); }
.city-poi:hover .poi-pin { transform: scale(1.1); background: var(--poi-color, #F8C637); color: #14241C; }
.city-poi:hover .poi-name { transform: translateY(-2px); }
.city-poi:focus-visible { outline: none; }
.city-poi:focus-visible .poi-pin { box-shadow: 0 0 0 4px rgba(28, 58, 43, .35), 0 8px 18px -8px rgba(20, 36, 28, .6); }

.city-poi.is-selected .poi-pin {
  background: var(--city-forest);
  color: var(--city-butter);
  border-color: var(--city-butter);
  transform: scale(1.12);
}
.city-poi.is-selected .poi-name { background: var(--city-forest); color: var(--city-paper); }
/* Um pulso curto marca o local escolhido, sem piscar para sempre. */
.city-poi.is-selected .poi-pin::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--city-butter);
  animation: btPoiPulse 1.8s var(--city-ease) 3;
}
@keyframes btPoiPulse {
  0% { opacity: .8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}

.bt-city.is-night .poi-pin { background: #2A2148; color: #FFF3D2; }
.bt-city.is-night .poi-name { background: rgba(42, 33, 72, .92); color: #FFF3D2; }
.bt-city.is-night .city-poi:hover .poi-pin { background: var(--poi-color, #F8C637); color: #1B1533; }

@media (max-width: 760px) {
  .bt-city { aspect-ratio: 4 / 3; border-radius: 20px; }
  .poi-pin { width: 40px; height: 40px; }
  .poi-pin svg { width: 18px; height: 18px; }
  .poi-name { font-size: 11px; padding: 4px 9px; margin-top: 12px; }
  .poi-stem { top: 36px; height: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .bt-city *,
  .bt-city *::before,
  .bt-city *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .city-poi { opacity: 1; }
}

/* --- seletor de cidades -----------------------------------------------------
   Regras antigas prendiam o seletor em 365px com botões de 43px, então os
   rótulos se sobrepunham. Aqui ele vira uma barra de vidro centralizada.
   -------------------------------------------------------------------------- */
.city-open-map .city-dock {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 16px;
  z-index: 7;
  width: auto;
  max-width: calc(100% - 32px);
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 3px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 253, 247, .88);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 18px 40px -22px rgba(20, 36, 28, .7);
  overflow-x: auto;
  scrollbar-width: none;
  transform: translateX(-50%);
}
.city-open-map .city-dock::-webkit-scrollbar { display: none; }

.city-dock .city-dock-chip {
  flex: none;
  width: auto;
  height: auto;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 5px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: #5D6D5D;
  font: 500 13px/1 'DM Sans', sans-serif;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), color .25s, background .25s;
}
.city-dock .city-dock-chip svg {
  width: 28px; height: 28px;
  padding: 5px;
  border-radius: 50%;
  color: #1C3A2B;
  background: linear-gradient(160deg, var(--chip-a), var(--chip-b));
  box-shadow: inset 0 0 0 1px rgba(255, 253, 247, .7);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.city-dock .city-dock-chip:hover { color: #1C3A2B; background: rgba(28, 58, 43, .07); }
.city-dock .city-dock-chip:hover svg { transform: scale(1.1) rotate(-6deg); }
.city-dock .city-dock-chip[aria-pressed="true"] {
  background: #1C3A2B;
  color: #FFFDF7;
  box-shadow: none;
}
.city-dock .city-dock-chip[aria-pressed="true"] svg { box-shadow: inset 0 0 0 1px rgba(255, 253, 247, .5); }

@media (max-width: 1000px) {
  .city-dock .city-dock-chip span { display: none; }
  .city-dock .city-dock-chip { padding: 5px; }
}

/* O palco tinha altura mínima de 780px vinda do desenho antigo, o que deixava
   uma faixa vazia sob o panorama. Agora ele acompanha a arte. */
.city-app .city-open-stage,
.city-open-canvas .city-open-stage {
  height: auto;
  min-height: 0;
  max-height: none;
}
.city-app .city-open-map,
.city-open-canvas .city-open-map { height: auto; padding: 0 0 104px !important; }
.city-open-canvas .city-open-hint {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 88px;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 40px);
  font-size: 12.5px;
  color: #7C8A79;
  text-align: center;
}
/* ==========================================================================
   Resultado da prática — a mesma sala volta, agora comemorando.
   ========================================================================== */
.bt-result {
  --bt-paper: #FFFDF7;
  --bt-forest: #1C3A2B;
  --bt-forest-2: #2B5541;
  --bt-moss: #6C8F68;
  --bt-mute: #5D6D5D;
  --bt-mute-2: #7C8A79;
  --bt-butter: #F8C637;
  --bt-line: #E6DECA;
  --bt-display: 'Fredoka', 'DM Sans', sans-serif;

  max-width: 640px;
  margin: 0 auto;
  padding: 0 0 28px;
  border-radius: 30px;
  background: var(--bt-paper);
  border: 1px solid var(--bt-line);
  box-shadow: 0 34px 70px -46px rgba(20, 36, 28, .55);
  overflow: hidden;
  text-align: center;
  animation: btResultIn .6s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes btResultIn { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: none; } }

.bt-result__scene { position: relative; margin-bottom: 30px; }
.bt-result__scene .bt-room { aspect-ratio: 2 / 1; border-radius: 0; }
.bt-result__scene .bt-room__tato { width: 24%; bottom: 10%; }
.bt-result__seal {
  position: absolute;
  z-index: 8;
  right: 30px; bottom: -26px;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  color: var(--bt-forest);
  background: var(--bt-butter);
  border: 4px solid var(--bt-paper);
  box-shadow: 0 12px 24px -12px rgba(190, 140, 20, .9);
  animation: btSeal .6s cubic-bezier(.34, 1.56, .64, 1) .35s both;
}
@keyframes btSeal { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }

.bt-result > *:not(.bt-result__scene) { padding-inline: clamp(22px, 5vw, 44px); }

.bt-result .result-icon { display: none; }
.bt-result .result-eyebrow {
  display: block;
  font: 600 10.5px/1 'DM Sans', sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bt-moss);
}
.bt-result h1 {
  margin: 12px 0 6px;
  font: 600 clamp(26px, 3.4vw, 36px)/1.12 var(--bt-display);
  letter-spacing: -.03em;
  color: var(--bt-forest);
}
.bt-result .result-subtitle { font-size: 15px; line-height: 1.6; color: var(--bt-mute); }

.bt-result .lesson-achievements {
  display: grid;
  gap: 8px;
  margin: 22px auto 0;
  max-width: 420px;
  text-align: left;
  list-style: none;
}
.bt-result .lesson-achievements li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  background: #F2F6EE;
  font-size: 14.5px;
  color: var(--bt-forest-2);
  animation: btTick .5s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(.4s + var(--i, 0) * 90ms);
}
.bt-result .lesson-achievements li span {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  flex: none;
  border-radius: 50%;
  background: var(--bt-moss);
  color: #FFFDF7;
  font-size: 13px;
}
@keyframes btTick { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

.bt-result .lesson-evidence,
.bt-result .result-save,
.bt-result .result-progress-label { display: block; margin-top: 14px; font-size: 12.5px; line-height: 1.55; color: var(--bt-mute-2); }

.bt-result .summary-stats { display: flex; justify-content: center; gap: 40px; margin: 22px 0 6px; }
.bt-result .summary-stats strong {
  display: block;
  font: 600 32px/1 var(--bt-display);
  color: var(--bt-forest);
  font-variant-numeric: tabular-nums;
}
.bt-result .summary-stats span { font-size: 12.5px; color: var(--bt-mute-2); }

.bt-result .completion-path { display: flex; justify-content: center; gap: 8px; margin: 18px 0 0; }
.bt-result .completion-path span {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(28, 58, 43, .09);
  font: 600 13px/1 var(--bt-display);
  color: var(--bt-mute-2);
}
.bt-result .completion-path span.done { background: var(--bt-moss); color: #FFFDF7; }

/* A frase para levar é o presente do fim: ela merece destaque. */
.bt-result .result-takeaway {
  margin: 24px auto 0;
  max-width: 440px;
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(180deg, #FFF6DA, #FFFDF7);
  border: 1px solid rgba(248, 198, 55, .5);
}
.bt-result .result-takeaway > span {
  font: 600 10px/1 'DM Sans', sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #B98C12;
}
.bt-result .result-takeaway h2 { margin: 10px 0 12px; font: 500 17px/1.3 var(--bt-display); color: var(--bt-forest); }
.bt-result .result-takeaway p[lang] { font: 500 clamp(20px, 2.4vw, 26px)/1.3 var(--bt-display); color: var(--bt-forest); }
.bt-result .result-takeaway small { display: block; margin-top: 10px; font-size: 12.5px; color: var(--bt-mute-2); }
.bt-result .result-takeaway details { margin-top: 14px; }
.bt-result .result-takeaway summary { cursor: pointer; font-weight: 700; color: var(--bt-forest); }
.bt-result .result-takeaway details p[lang] { margin: 12px 0 0; overflow-wrap: anywhere; }

.bt-result .btn.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(100%, 420px);
  margin: 26px auto 0;
  padding: 17px 26px;
  border: 0;
  border-radius: 999px;
  color: #3F2E05;
  background: linear-gradient(180deg, #FFDA6B, #F8C637 42%, #DFA518);
  font: 600 16px/1 var(--bt-display);
  cursor: pointer;
  box-shadow: 0 14px 28px -12px rgba(190, 140, 20, .85);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s;
}
.bt-result .btn.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 34px -14px rgba(190, 140, 20, .9); }
.bt-result .text-link {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  border: 0;
  background: none;
  color: var(--bt-mute);
  font: 500 14px/1 'DM Sans', sans-serif;
  cursor: pointer;
  transition: color .25s;
}
.bt-result .text-link:hover { color: var(--bt-forest); }

.bt-result details {
  margin-top: 16px;
  text-align: left;
  border-top: 1px solid #F0EBDD;
  padding-top: 12px;
}
.bt-result details summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 0;
  font-size: 13.5px;
  color: var(--bt-mute);
}
.bt-result details summary::-webkit-details-marker { display: none; }
.bt-result details summary span { display: none; }
.bt-result details summary::after { content: ' ＋'; color: var(--bt-moss); }
.bt-result details[open] summary::after { content: ' −'; }
.bt-result details p, .bt-result details li { font-size: 13px; line-height: 1.6; color: var(--bt-mute-2); }
.bt-result details ol { display: grid; gap: 12px; margin: 10px 0 0; padding: 0; list-style: none; }
.bt-result details ol li { padding: 12px 14px; border-radius: 12px; background: #F7F4EA; }
.bt-result details ol p[lang] { font: 500 16px/1.4 var(--bt-display); color: var(--bt-forest); margin: 6px 0 4px; }
.bt-result details ol span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--bt-moss); }

@media (max-width: 620px) {
  .bt-result { border-radius: 24px; }
  .bt-result .summary-stats { gap: 24px; }
  .bt-result__scene .bt-room { aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
  .bt-result,
  .bt-result * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
/* ==========================================================================
   Camada de movimento do aplicativo.
   Uma linguagem só: entradas escalonadas, elevação no hover, pressão no clique.
   Hierarquia — cena > conteúdo > microinteração.
   ========================================================================== */

:root {
  --bt-ease-out: cubic-bezier(.22, 1, .36, 1);
  --bt-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --bt-fast: 180ms;
  --bt-mid: 320ms;
  --bt-slow: 520ms;
}

/* --- entrada escalonada dos cartões ---------------------------------------- */
body[data-screen="app"] .dashboard > *,
body[data-screen="app"] .explore-panel .place,
body[data-screen="app"] .board-chapter {
  animation: btRise var(--bt-slow) var(--bt-ease-out) both;
}
body[data-screen="app"] .dashboard > *:nth-child(2) { animation-delay: 70ms; }
body[data-screen="app"] .explore-panel .place:nth-child(2) { animation-delay: 90ms; }
body[data-screen="app"] .explore-panel .place:nth-child(3) { animation-delay: 160ms; }
body[data-screen="app"] .board-chapter:nth-of-type(2) { animation-delay: 90ms; }
body[data-screen="app"] .board-chapter:nth-of-type(3) { animation-delay: 160ms; }
@keyframes btRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* --- superfícies que respondem ---------------------------------------------- */
.place,
.card,
.choice,
.avatar-option {
  transition:
    transform var(--bt-mid) var(--bt-ease-spring),
    box-shadow var(--bt-mid) var(--bt-ease-out),
    border-color var(--bt-mid) var(--bt-ease-out),
    background var(--bt-mid) var(--bt-ease-out);
}
.place:hover,
.choice:hover,
.avatar-option:hover { transform: translateY(-4px); }
.place:active,
.choice:active,
.avatar-option:active { transform: translateY(-1px) scale(.99); }

/* O ícone do local gira de leve: dá vida sem chamar atenção. */
.place .place-icon { transition: transform var(--bt-mid) var(--bt-ease-spring); }
.place:hover .place-icon { transform: rotate(-6deg) scale(1.08); }

/* --- botões ------------------------------------------------------------------ */
.btn,
.city-start-button,
.voice-primary,
.text-link {
  transition:
    transform var(--bt-mid) var(--bt-ease-spring),
    box-shadow var(--bt-mid) var(--bt-ease-out),
    background var(--bt-fast) linear,
    color var(--bt-fast) linear;
}
.btn:active,
.city-start-button:active { transform: translateY(1px) scale(.985); }
.text-link { display: inline-flex; align-items: center; gap: 7px; }
.text-link:hover { gap: 11px; }

/* --- estatísticas que aparecem ---------------------------------------------- */
.stat strong,
.summary-stats strong {
  display: block;
  animation: btPop var(--bt-slow) var(--bt-ease-spring) both;
  animation-delay: 160ms;
  font-variant-numeric: tabular-nums;
}
@keyframes btPop { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }

/* --- foco visível e coerente ------------------------------------------------- */
body[data-screen] :focus-visible {
  outline: 3px solid #1C3A2B;
  outline-offset: 3px;
  border-radius: 10px;
}

/* --- rolagem suave dentro do produto ---------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-screen="app"] .dashboard > *,
  body[data-screen="app"] .explore-panel .place,
  body[data-screen="app"] .board-chapter,
  .stat strong,
  .summary-stats strong { animation: none; opacity: 1; transform: none; }
  .place:hover,
  .choice:hover,
  .avatar-option:hover { transform: none; }
}
/* ==========================================================================
   Correções de interface encontradas na varredura visual.
   Cada bloco anota o problema que resolve.
   ========================================================================== */

/* `.auth-switch` não tinha estilo nenhum: virava um botão cinza cru do
   navegador. Aparecia na tela de conta (dois lado a lado) e no perfil, onde
   "Excluir minha conta" escapava da caixa de diálogo. */
.auth-switch {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: none;
  color: #5d6d5d;
  font: 500 14px/1.3 'DM Sans', sans-serif;
  text-align: center;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.auth-switch:hover { background: rgba(28, 58, 43, .06); color: #1c3a2b; }
.auth-card .auth-switch[data-auth-switch] {
  border-color: #e6deca;
  color: #1c3a2b;
  font-weight: 600;
}
.auth-card .auth-switch[data-auth-switch]:hover { border-color: #6c8f68; }

/* No perfil, excluir a conta é destrutivo e mora por último, discreto. */
.profile-dialog .auth-switch[data-profile-action="delete-account"] {
  margin-top: 4px;
  font-size: 13px;
  color: #9b5041;
}
.profile-dialog .auth-switch[data-profile-action="delete-account"]:hover {
  background: rgba(155, 80, 65, .08);
  color: #7d3d31;
}

/* A grade mostrava 15 dos 20 avatares e a rolagem não tinha nenhum sinal:
   parecia que os outros cinco não existiam. */
.avatar-grid {
  max-height: min(370px, 48vh);
  scrollbar-width: thin;
}

/* O cartão de destaque da home recorta a arte; sem a legenda decorativa o
   mascote não fica mais espremido contra a borda no celular. */
.home-feature { overflow: hidden; }
.home-feature-art > span { display: none; }

/* A trilha alinhava o cabeçalho à esquerda e o tabuleiro ao centro. */
.board-intro { max-width: 660px; margin-inline: auto; }
/* Finishing pass over Claude's illustrated cities. All rules are city-scoped. */
.city-open-canvas { --scene-paper:#fffdf3; --scene-ink:#284e3e; }
.city-open-canvas .city-open-map {
  background:#f7f7ea!important;
  border:1px solid #d4ddc8!important;
  box-shadow:0 5px 0 #dce3d0,0 24px 60px -32px #34563842!important;
  padding:0 0 110px!important;
  overflow:hidden;
}
.city-pan-scroll { position:relative; overflow-x:auto; scrollbar-width:thin; scrollbar-color:#9caf91 #e8edda; overscroll-behavior-x:contain; }
.city-pan-scroll:focus-visible { outline:3px solid #37694f; outline-offset:-4px; }
.city-open-canvas .bt-city { width:100%; border-radius:26px 26px 0 0; aspect-ratio:20/11; }
.city-open-canvas .city-open-title { top:22px; width:min(458px,calc(100% - 360px)); grid-template-columns:42px minmax(0,1fr) 42px; gap:14px; }
.city-open-canvas .city-open-title>div { border:1px solid #fffdf688; border-radius:19px; background:#fffdf3e8; padding:12px 15px 14px; box-shadow:0 5px 20px -12px #43624644; backdrop-filter:blur(8px); }
.city-open-canvas .city-open-title .eyebrow { font-size:9px; letter-spacing:1.9px; color:#56765e; }
.city-open-canvas .city-open-title h1 { font-size:clamp(28px,2.6vw,38px); letter-spacing:-1.1px; color:#284e3e; margin:6px 0; }
.city-open-canvas .city-open-title p { font-size:11px; color:#59715b; }
.city-open-canvas .city-title-arrow { width:42px; height:42px; min-height:42px; border:1px solid #fffef5b3; background:#fffdf0e6; color:#3c624b; box-shadow:0 3px 10px -5px #365c3b55; font-size:21px; }
.city-open-canvas .city-title-arrow:disabled { opacity:.34; }
.city-open-canvas .city-title-arrow:focus-visible,.city-open-canvas .city-dock-chip:focus-visible,.city-motion-toggle:focus-visible { outline:3px solid #31674a; outline-offset:3px; }
.city-open-canvas .city-open-instruction { display:grid; top:30px; left:25px; border:0; border-radius:0; box-shadow:none; background:none; padding:0; gap:8px; backdrop-filter:none; }
.city-open-canvas .city-open-instruction span { display:flex; align-items:center; gap:7px; color:#385d4c; font-size:8px; letter-spacing:1.35px; }
.city-open-canvas .city-open-instruction i { width:6px; height:6px; border-radius:50%; background:#4b8b62; box-shadow:0 0 0 4px #71a78220; }
.city-open-canvas .city-open-instruction small { display:block; color:#4f7460; font-size:10px; }
.city-open-canvas .city-poi { left:var(--poi-x); top:var(--poi-y); width:auto; min-width:80px; margin:0; padding:0; gap:0; transform:translate(-50%,-100%); filter:none; }
.city-open-canvas .city-poi .poi-pin { width:42px; height:42px; border-width:2px; border-radius:16px; background:#fffdf3; box-shadow:0 4px 0 #35533618,0 7px 15px -8px #23442b77; }
.city-open-canvas .city-poi .poi-pin svg { width:20px; height:20px; }
.city-open-canvas .city-poi .poi-name { margin-top:9px; max-width:none; padding:6px 10px; font:600 11px/1.15 'DM Sans',sans-serif; border:1px solid #fffdf399; border-radius:7px; color:#2e533e; background:#fffdf3f5; box-shadow:0 3px 8px -4px #1c42264d; }
.city-open-canvas .poi-stem { top:42px; height:12px; width:2px; }
.city-open-canvas .city-poi:hover,.city-open-canvas .city-poi:focus-visible { z-index:30; }
.city-open-canvas .city-poi:hover .poi-pin { transform:translateY(-3px) rotate(-5deg); background:var(--poi-color); }
.city-open-canvas .city-poi:active .poi-pin { transform:translateY(1px) scale(.96); }
.city-open-canvas .city-poi:focus-visible .poi-pin { outline:3px solid #2a6548; outline-offset:3px; }
.city-open-canvas .city-poi.is-selected .poi-pin { background:#254d3a; color:#ffdc73; border-color:#ffdc73; }
.city-open-canvas .city-poi.is-selected .poi-name { background:#254d3a; color:#fff9dd; }
.city-open-canvas .city-open-hint { bottom:75px; padding:0; border:0; background:none; font-size:11px; color:#637660; white-space:normal; }
.city-open-canvas .city-dock { bottom:16px; width:max-content; max-width:calc(100% - 34px); padding:5px; gap:2px; border:1px solid #d9e0cc; box-shadow:0 8px 18px -12px #345c3d4d; background:#fffdf5; }
.city-open-canvas .city-dock-chip { min-width:44px; min-height:44px; padding:5px 10px 5px 5px; font-size:11px; gap:5px; }
.city-open-canvas .city-dock-chip svg { width:30px; height:30px; flex-shrink:0; }
.city-open-canvas .city-dock-chip span { position:static; transform:none; max-width:none; font:inherit; color:inherit; }
.city-motion-toggle { position:absolute; z-index:36; top:26px; right:24px; width:38px; min-height:38px; display:grid; place-items:center; border:1px solid #fffdf6a6; border-radius:50%; color:#385d4c; background:#fffdf3c9; cursor:pointer; }
.city-motion-toggle svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.city-motion-toggle span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.city-motion-toggle:hover { background:#fffdf3; }
.city-motion-toggle[aria-pressed="true"] { color:#fff7d6; background:#345d48; }
.city-pan-cue { display:none; }
/* Night UI belongs to the palette of its illustration. */
.city-open-canvas:is([data-world="neon-pure"],[data-world="festivalia"]) .city-open-map { background:#29223e!important; border-color:#5c4b6e!important; box-shadow:0 5px 0 #d4d1d6,0 24px 60px -32px #32204266!important; }
.city-open-canvas:is([data-world="neon-pure"],[data-world="festivalia"]) .city-open-title>div { background:#2c214ce8; border-color:#a795bc40; }
.city-open-canvas:is([data-world="neon-pure"],[data-world="festivalia"]) .city-open-title h1 { color:#fff0cb; }
.city-open-canvas:is([data-world="neon-pure"],[data-world="festivalia"]) :is(.city-open-title p,.city-open-title .eyebrow,.city-open-instruction small,.city-open-instruction span,.city-open-hint,.city-pan-cue) { color:#d6c6df; }
.city-open-canvas:is([data-world="neon-pure"],[data-world="festivalia"]) .city-title-arrow,.city-open-canvas:is([data-world="neon-pure"],[data-world="festivalia"]) .city-motion-toggle { background:#433354; color:#ffebbf; border-color:#9c7bb55c; }
.city-open-canvas .is-night .poi-pin { background:#33264c; color:#ffe4b3; }
.city-open-canvas .is-night .poi-name { color:#ffedce; background:#32264df5; border-color:#b296c43d; }
.city-open-canvas:is([data-world="neon-pure"],[data-world="festivalia"]) .city-dock { background:#f5efdf; }
.city-open-canvas .bt-city__light { background:radial-gradient(ellipse at 15% 20%,#ffe6a653,transparent 63%),linear-gradient(0deg,#6c8f4929,transparent 45%); }
.city-open-canvas .is-night .bt-city__light { background:radial-gradient(ellipse at 80% 20%,#d5a2de24,transparent 60%); }
/* Nested groups preserve the original SVG translations and scale. */
@media(prefers-reduced-motion:no-preference) {
  .city-cloud-drift { animation:cityCloudDrift 28s ease-in-out infinite alternate; animation-delay:var(--delay,0s); }
  .city-canopy { transform-origin:0 -26px; animation:cityCanopySway 6s ease-in-out infinite alternate; animation-delay:var(--delay,0s); }
  .city-bunting { transform-origin:50% 0; animation:cityBunting 5s ease-in-out infinite alternate; }
  .city-boat-bob { animation:cityBoatBob 5s ease-in-out infinite; }
  .city-ripples { animation:cityRipples 5s ease-in-out infinite; }
  .city-water { stroke-dasharray:15 4; animation:cityWater 1.5s linear infinite; }
  .city-steam { animation:citySteam 4s ease-out infinite; }
  .city-neon-glow { animation:cityNeon 7s ease-in-out infinite; }
  .city-night-reflection,.city-stars { animation:cityNeon 9s ease-in-out infinite alternate; }
  .city-resident-route { animation:cityResidentRoute var(--duration,29s) ease-in-out infinite; animation-delay:var(--delay,0s); }
  .city-resident-step { animation:cityResidentStep .65s ease-in-out infinite; }
  .city-plane-flight { animation:cityPlaneFlight var(--duration,48s) linear infinite; animation-delay:var(--delay,0s); }
  .city-bus-route { animation:cityBusRoute 35s linear infinite; animation-delay:-14s; }
}
@keyframes cityCloudDrift { from{transform:translateX(-13px)} to{transform:translateX(22px)} }
@keyframes cityCanopySway { from{transform:rotate(-1.5deg)} to{transform:rotate(1.5deg)} }
@keyframes cityBunting { from{transform:skewX(-3deg)} to{transform:skewX(3deg)} }
@keyframes cityBoatBob { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(3px) rotate(2deg)} }
@keyframes cityRipples { 0%,100%{opacity:.35;transform:translateY(0)} 50%{opacity:.75;transform:translateY(2px)} }
@keyframes cityWater { to{stroke-dashoffset:-38} }
@keyframes citySteam { 0%{opacity:0;transform:translateY(5px)} 25%{opacity:.5} 100%{opacity:0;transform:translate(5px,-17px)} }
@keyframes cityNeon { 0%,100%{opacity:.72} 50%{opacity:1} }
@keyframes cityResidentRoute { 0%,8%,100%{transform:translate(0,0)} 45%,55%{transform:translate(var(--route-x),var(--route-y))} }
@keyframes cityResidentStep { 50%{transform:translateY(-1px)} }
@keyframes cityPlaneFlight { from{transform:translateX(-320px)} to{transform:translateX(1300px)} }
@keyframes cityBusRoute { from{transform:translateX(-820px)} to{transform:translateX(650px)} }
.city-open-canvas.is-motion-paused .bt-city *, .city-open-canvas.is-offscreen .bt-city *, .has-dialog .city-open-canvas .bt-city * { animation-play-state:paused!important; }
@media(max-width:1100px) {
  .city-open-canvas .city-dock-chip span { display:none; }
  .city-open-canvas .city-dock-chip { padding:5px; }
  .city-open-canvas .city-open-title { width:min(420px,calc(100% - 110px)); }
  .city-open-canvas .city-open-instruction { top:132px; left:20px; }
}
@media(max-width:1100px) {
  .city-open-canvas .city-open-map { border-radius:22px!important; padding:0 0 124px!important; }
  .city-open-canvas .city-open-title { position:relative; top:auto; left:auto; width:100%; transform:none; padding:17px 16px 14px; grid-template-columns:40px minmax(0,1fr) 40px; gap:7px; }
  .city-open-canvas .city-open-title>div { background:none; border:0; padding:0; box-shadow:none; backdrop-filter:none; }
  .city-open-canvas .city-open-title h1 { font-size:30px; }
  .city-open-canvas .city-open-title .eyebrow { font-size:8px; }
  .city-open-canvas .city-open-title p { font-size:10px; }
  .city-open-canvas .city-title-arrow { width:38px; height:40px; }
  .city-open-canvas .city-open-instruction { display:none; }
  .city-open-canvas .bt-city { width:max(800px,100%); min-width:800px; aspect-ratio:20/11; border-radius:0; }
  .city-open-canvas .city-poi { min-width:80px; }
  .city-open-canvas .city-poi .poi-pin { width:42px; height:42px; }
  .city-open-canvas .city-poi .poi-name { font-size:11px; }
  .city-open-canvas .city-open-hint { bottom:80px; font-size:10px; width:calc(100% - 20px); max-width:none; left:50%; right:auto; transform:translateX(-50%); }
  .city-open-canvas .city-dock { gap:0; padding:4px; bottom:18px; max-width:calc(100% - 14px); }
  .city-open-canvas .city-dock-chip { min-width:40px; min-height:44px; padding:4px; }
  .city-open-canvas .city-dock-chip svg { width:29px; height:29px; }
  .city-open-canvas .city-dock-chip span { display:none; }
  .city-motion-toggle { top:124px; right:12px; width:36px; min-height:36px; }
  .city-pan-cue { display:block; position:absolute; bottom:102px; left:0; width:100%; text-align:center; color:#73826b; font:500 10px 'DM Sans',sans-serif; letter-spacing:.2px; }
  .city-open-canvas:is([data-world="neon-pure"],[data-world="festivalia"]) .city-open-title>div { background:none; }
}
@media(prefers-reduced-motion:reduce) {
  .city-open-canvas .bt-city *, .city-open-canvas .bt-city *::after { animation:none!important; transition:none!important; }
  .city-open-canvas .bt-city__layer { transform:none!important; }
  .city-motion-toggle { display:none; }
}

/* Living dioramas: warm daylight, local atmosphere and quiet camera movement. */
.city-open-canvas .bt-city__light {
  background:radial-gradient(ellipse at 18% 15%,#fff0b56b,transparent 53%),linear-gradient(170deg,transparent 48%,#d9a55d18 72%,#214d3c24);
}
.city-open-canvas .is-night .bt-city__light {
  background:radial-gradient(ellipse at 20% 60%,#ef9d8238,transparent 45%),radial-gradient(ellipse at 82% 45%,#a294ee38,transparent 55%);
  opacity:.7;
}
.city-open-canvas .city-open-title>div { background:#fffdf1d6; backdrop-filter:blur(12px); border-color:#fffbeab3; box-shadow:0 10px 35px -20px #2b553b55; }
.city-open-canvas .city-poi .poi-pin { transition:transform .3s cubic-bezier(.2,.8,.3,1.3),background .25s,box-shadow .25s; }
.city-open-canvas .city-poi:is(:hover,:focus-visible) .poi-pin { box-shadow:0 0 0 7px #fff9dd45,0 10px 24px -7px #25493875; }
.city-open-canvas .city-dock-chip { transition:background .25s,color .25s,transform .25s; }
.city-open-canvas .city-dock-chip:hover { transform:translateY(-3px); }
.city-pan-scroll.is-draggable { cursor:grab; }
.city-pan-scroll.is-dragging { cursor:grabbing; user-select:none; }
.city-open-canvas .city-motion-toggle { width:44px; min-height:44px; }
@media(prefers-reduced-motion:no-preference) {
 .city-bird-flight { animation:cityBirdFlight var(--flight-time,55s) linear infinite; animation-delay:-18s; }
 .city-balloon { animation:cityBalloon 14s ease-in-out infinite alternate; }
 .city-firefly { animation:cityFirefly var(--float-time) ease-in-out infinite; animation-delay:var(--delay); }
 .city-petal { animation:cityPetal var(--float-time) linear infinite; animation-delay:var(--delay); }
 .city-sea-glint { animation:citySeaGlint 4s ease-in-out infinite; animation-delay:var(--delay); }
 .city-cycle-route { animation:cityCycle 38s linear infinite; animation-delay:-13s; }
 .city-shooting-star { animation:cityShootingStar 19s linear infinite; }
 .city-open-canvas .bt-city__art { animation:cityArrival .85s cubic-bezier(.22,1,.36,1) both; }
}
@keyframes cityBirdFlight { from { transform:translate(-250px,12px); } to { transform:translate(1300px,-32px); } }
@keyframes cityBalloon { from { transform:translate(-12px,5px) rotate(-3deg); } to { transform:translate(14px,-12px) rotate(3deg); } }
@keyframes cityFirefly { 0%,100% { opacity:.12; transform:translate(0,0); } 45% { opacity:.9; transform:translate(12px,-18px); } 75% { opacity:.3; transform:translate(-7px,-8px); } }
@keyframes cityPetal { 0% { opacity:0; transform:translate(-25px,-25px) rotate(0deg); } 20%,70% { opacity:.65; } 100% { opacity:0; transform:translate(48px,12px) rotate(170deg); } }
@keyframes citySeaGlint { 0%,100% { opacity:.12; transform:translateX(-4px); } 50% { opacity:.8; transform:translateX(7px); } }
@keyframes cityCycle { from { transform:translate(-100px,var(--cycle-y)); } to { transform:translate(1350px,var(--cycle-y)); } }
@keyframes cityShootingStar { 0%,88%,100% { opacity:0; transform:translate(0,0); } 89% { opacity:.8; } 94% { opacity:0; transform:translate(-320px,105px); } }
@keyframes cityArrival { from { opacity:.55; } to { opacity:1; } }
@media(max-width:1100px) {
 .city-open-canvas .city-open-title>div { background:none; border:0; box-shadow:none; backdrop-filter:none; }
}
/* Keep hit areas fixed; only the pin inside them reacts to hover. */
.city-open-canvas .city-poi,
.city-open-canvas .city-poi:hover,
.city-open-canvas .city-poi:focus-visible,
.city-open-canvas .city-poi.is-selected { transform:translate(-50%,-100%); animation:none; }
.city-open-canvas .city-poi:hover .poi-pin { animation:none; }

/* Full-bleed city: the illustration takes the whole screen; the title and the
   destinations float over it as small glass pills. */
.city-open-canvas { --destination-ink:#285c60; --destination-paper:#fffdf5; --destination-line:#ffffffb3; --destination-glow:#fff3c352; --pill:#fffdf5d9; --pill-ink:#24493a; --pill-active:#254d3a; --pill-active-ink:#fff9dd; }
.city-open-canvas:is([data-world="neon-pure"],[data-world="festivalia"]) { --destination-ink:#f3dfb3; --destination-paper:#29223e; --destination-line:#a795bc40; --destination-glow:#b1a0f02b; --pill:#2a2044d9; --pill-ink:#fff0cb; --pill-active:#f3dfb3; --pill-active-ink:#322841; }
body[data-screen=app] .main:has(.city-open-canvas) { max-width:none; padding-top:16px; padding-inline:18px; }
@media(min-width:1101px) { body[data-screen=app] .main:has(.city-open-canvas) { padding-bottom:16px; } }
@media(max-width:1100px) { body[data-screen=app] .main:has(.city-open-canvas) { padding-top:10px; padding-inline:10px; } }
.city-open-canvas .city-open-map {
  position:relative; display:block; width:min(100%,calc((100svh - 34px) * 20 / 11)); margin-inline:auto;
  padding:0!important; overflow:hidden; border-radius:28px!important;
  background:var(--destination-paper)!important; border:0!important;
  box-shadow:0 26px 70px -36px #0b1a1299!important;
}
/* The whole city is visible at once, as large as the screen allows: no dragging. */
.city-open-canvas .city-open-map { aspect-ratio:20/11; }
.city-open-canvas .city-pan-scroll { position:absolute; inset:0; overflow:hidden; border-radius:inherit; }
.city-open-canvas .city-pan-scroll .bt-city { width:100%; min-width:0; max-width:none; height:auto; aspect-ratio:20/11; }
.city-open-canvas .city-open-title {
  position:absolute; z-index:12; top:14px; left:50%; transform:translateX(-50%); width:auto; max-width:calc(100% - 132px);
  display:grid; grid-template-columns:36px minmax(0,auto) 36px; align-items:center; gap:10px; padding:5px;
  border:1px solid var(--destination-line); border-radius:999px; background:var(--pill);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 10px 28px -16px #0f241a88;
}
.city-open-canvas .city-open-title>div,
.city-open-canvas:is([data-world="neon-pure"],[data-world="festivalia"]) .city-open-title>div {
  display:flex; align-items:baseline; gap:9px; min-width:0; padding:0 4px; border:0; background:none; box-shadow:none; backdrop-filter:none; white-space:nowrap;
}
.city-open-canvas .city-open-title h1 { order:2; margin:0; font-size:21px; line-height:1.15; letter-spacing:-.4px; color:var(--pill-ink); }
.city-open-canvas .city-open-title .eyebrow { order:1; color:var(--pill-ink); opacity:.7; font-size:9px; letter-spacing:1.6px; }
.city-open-canvas .city-open-title p { order:3; margin:0; font-size:11px; color:var(--pill-ink); opacity:.72; overflow:hidden; text-overflow:ellipsis; }
.city-open-canvas .city-title-arrow { width:36px; height:36px; min-height:36px; font-size:17px; border:0; border-radius:50%; box-shadow:none; background:#ffffff66; color:var(--pill-ink); }
.city-open-canvas:is([data-world="neon-pure"],[data-world="festivalia"]) .city-title-arrow { background:#ffffff14; color:var(--pill-ink); }
.city-open-canvas .city-title-arrow:not(:disabled):hover { background:var(--pill-active); color:var(--pill-active-ink); }
.city-open-canvas .city-open-instruction { display:none; }
.city-open-canvas .city-motion-toggle,
.city-open-canvas:is([data-world="neon-pure"],[data-world="festivalia"]) .city-motion-toggle {
  position:absolute; z-index:12; top:14px; right:14px; width:46px; min-height:46px; margin:0;
  border:1px solid var(--destination-line); background:var(--pill); color:var(--pill-ink);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 10px 28px -16px #0f241a88;
}
.city-open-canvas .bt-city { border-radius:0; }
.city-open-canvas .bt-city__light { background:radial-gradient(ellipse at 18% 12%,var(--destination-glow),transparent 66%); }
.city-open-canvas .bt-city__vignette { box-shadow:inset 0 -32px 45px -38px #19352955; }
.city-open-canvas .city-open-map .city-poi .poi-pin { border-radius:50% 50% 50% 16%!important; transform:rotate(-45deg); background:#fffdf5; }
.city-open-canvas .city-poi .poi-pin svg { transform:rotate(45deg); }
.city-open-canvas .city-open-map .city-poi:is(:hover,:focus-visible) .poi-pin { transform:translateY(-4px) rotate(-45deg); }
.city-open-canvas .city-open-map .city-poi:active .poi-pin { transform:translateY(1px) rotate(-45deg); }
.city-open-canvas .city-poi .poi-name { padding:7px 11px; border-radius:8px; font-size:12px; box-shadow:0 2px 0 #233d2520; }
.city-open-canvas .city-open-map .is-night .city-poi .poi-pin { background:#33264c; }
.city-open-canvas .city-open-map .city-poi.is-selected .poi-pin { background:#254d3a; }
/* The hint stays for screen readers; the pins already say "tap me". */
.city-open-canvas .city-open-hint { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.city-open-canvas .city-dock,
.city-open-canvas:is([data-world="neon-pure"],[data-world="festivalia"]) .city-dock {
  position:absolute; z-index:12; left:50%; right:auto; bottom:14px; transform:translateX(-50%);
  display:flex; flex-wrap:nowrap; width:max-content; max-width:calc(100% - 28px); margin:0; padding:5px; gap:2px;
  overflow-x:auto; scrollbar-width:none;
  border:1px solid var(--destination-line); border-radius:999px; background:var(--pill);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 12px 30px -16px #0f241a99;
}
.city-open-canvas .city-dock-chip { flex:none; flex-direction:row; align-items:center; gap:7px; padding:4px 13px 4px 4px; min-width:0; min-height:42px; border-radius:999px; color:var(--pill-ink); background:transparent; box-shadow:none; }
.city-open-canvas .city-dock-chip span { display:block; max-width:none; white-space:nowrap; font:600 12px/1 'DM Sans',sans-serif; color:inherit; }
.city-open-canvas .city-dock-chip svg { width:32px; height:32px; }
.city-open-canvas .city-dock-chip:not([aria-pressed="true"]):hover { transform:none; background:#ffffff70; }
.city-open-canvas .city-dock-chip[aria-pressed="true"] { background:var(--pill-active); color:var(--pill-active-ink); box-shadow:none; }
.city-open-canvas:is([data-world="neon-pure"],[data-world="festivalia"]) .city-dock-chip:not([aria-pressed="true"]):hover { background:#ffffff18; }
.city-open-canvas:is([data-world="neon-pure"],[data-world="festivalia"]) :is(.city-title-arrow,.city-dock-chip,.city-motion-toggle):focus-visible,
.city-open-canvas:is([data-world="neon-pure"],[data-world="festivalia"]) .city-poi:focus-visible .poi-pin { outline-color:#ffdd8a; }
.city-open-canvas .city-pan-cue { display:none; }
@media(max-width:1100px) {
  .city-open-canvas .city-open-map { border-radius:24px!important; }
  /* !important beats city-voice.css (height:100%!important; min-height:0!important),
     which collapses the box to 0px once the scene is positioned absolutely. */
  .city-open-canvas .city-open-map { width:100%; height:auto!important; min-height:0!important; }
  /* Title pill on the left, pause on the right: places panning underneath
     only ever meet the top strip, which no pin reaches. */
  .city-open-canvas .city-open-title { top:10px; left:10px; transform:none; max-width:calc(100% - 76px); gap:6px; padding:4px; grid-template-columns:36px minmax(0,1fr) 36px; }
  .city-open-canvas .city-open-title>div { flex-direction:column; align-items:center; gap:2px; }
  .city-open-canvas .city-open-title h1 { order:2; font-size:18px; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .city-open-canvas .city-open-title .eyebrow { font-size:8px; }
  .city-open-canvas .city-open-title p { display:none; }
  .city-open-canvas .city-motion-toggle,
  .city-open-canvas:is([data-world="neon-pure"],[data-world="festivalia"]) .city-motion-toggle { top:10px; right:10px; width:46px; min-height:46px; }
  .city-open-canvas .city-dock-chip:not([aria-pressed="true"]) span { display:none; }
  .city-open-canvas .city-dock-chip:not([aria-pressed="true"]) { padding:4px; }
}
@media(max-width:560px) {
  .city-open-canvas .city-open-map { border-radius:20px!important; }
  .city-open-canvas .city-dock { bottom:10px; gap:0; padding:4px; max-width:calc(100% - 16px); }
  .city-open-canvas .city-dock-chip span { display:none; }
  .city-open-canvas .city-dock-chip,
  .city-open-canvas .city-dock-chip:not([aria-pressed="true"]) { padding:4px; min-height:40px; }
  .city-open-canvas .city-dock-chip svg { width:30px; height:30px; }
}
@media(prefers-reduced-motion:reduce) {
  .city-open-canvas :is(.city-dock-chip,.city-dock-chip svg,.poi-pin) { transition:none; }
}

/* Tato em cena e luz viva: tudo em transform/opacity, pausado fora da tela. */
@media(prefers-reduced-motion:no-preference) {
  .city-tato-wave { animation:cityTatoWave 4.8s ease-in-out infinite; }
  .city-gondola { animation:cityGondola 11s ease-in-out infinite alternate; }
  .city-sun-rays { animation:citySunRays 9s ease-in-out infinite alternate; }
  .city-sun-breathe { animation:citySunBreathe 7s ease-in-out infinite alternate; }
  .city-drive { animation:cityDrive var(--duration,24s) linear infinite; animation-delay:var(--delay,0s); }
  .city-window-flicker { animation:cityWindowFlicker calc(var(--flicker,6s) * 3) ease-in-out infinite; animation-delay:var(--delay,0s); }
  .city-foam { animation:cityFoam 5s ease-in-out infinite; animation-delay:var(--delay,0s); }
}
@keyframes cityTatoWave { 0%,55%,100% { transform:rotate(0deg); } 64% { transform:rotate(-16deg); } 73% { transform:rotate(10deg); } 82% { transform:rotate(-12deg); } 91% { transform:rotate(4deg); } }
@keyframes cityGondola { from { transform:translateY(0); } to { transform:translateY(-12px); } }
/* Grão de papel: a cidade parece impressa, não renderizada. Fica abaixo dos marcadores. */
.city-open-canvas .bt-city__art::after {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.12;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .33 0 0 0 0 .2 0 0 0 .55 -.16'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/180px 180px;
}
.city-open-canvas .is-night .bt-city__art::after { opacity:.07; }
/* Mistura `multiply` sobre uma cena que anima obrigava o navegador a recompor
   a cidade inteira a cada quadro: com ela, ~40 ms por quadro (CPU 4×); com
   mistura normal, ~22 ms. O grão continua lá, só que por transparência. */
@keyframes citySunRays { from { opacity:.55; } to { opacity:1; } }
@keyframes citySunBreathe { from { opacity:.6; transform:scale(.96); } to { opacity:1; transform:scale(1.05); } }
@keyframes cityDrive { from { transform:translateX(var(--from)); } to { transform:translateX(var(--to)); } }
@keyframes cityWindowFlicker { 0%,55%,100% { opacity:1; } 65%,82% { opacity:.58; } }
@keyframes cityFoam { 0%,100% { opacity:.35; transform:scale(1); } 50% { opacity:.8; transform:scale(1.015); } }
/* Festivalia: fogos, roda-gigante e o balanco da plateia. */
@media(prefers-reduced-motion:no-preference) {
  .city-firework { transform-origin:center; animation:cityFirework 6.5s ease-out infinite; animation-delay:var(--delay,0s); }
  .city-wheel { transform-origin:center; animation:citySpin 46s linear infinite; }
  .city-crowd-sway { transform-origin:50% 100%; animation:cityCrowdSway 3.6s ease-in-out infinite alternate; animation-delay:var(--delay,0s); }
}
/* Em SVG, `center` e `50% 100%` apontam para a cena inteira (transform-box:
   view-box), não para o objeto: a roda-gigante orbitava o centro da tela e os
   fogos escorregavam em direção a ele. `fill-box` gira cada um no próprio eixo. */
.bt-city :is(.city-wheel,.city-firework,.city-crowd-sway) { transform-box:fill-box; }
@keyframes cityFirework { 0% { opacity:0; transform:scale(.18); } 10% { opacity:1; transform:scale(.62); } 46% { opacity:.85; transform:scale(1.04); } 78%,100% { opacity:0; transform:scale(1.3); } }
@keyframes cityCrowdSway { from { transform:rotate(-1.7deg); } to { transform:rotate(1.7deg); } }

/* Segunda rodada: vida pequena e coerente em cada cidade. */
@media(prefers-reduced-motion:no-preference) {
  .city-smoke { animation:citySmoke 5.4s ease-out infinite; animation-delay:var(--delay,0s); }
  .city-sail-drift { animation:citySailDrift 46s ease-in-out infinite alternate; }
  .city-beacon { animation:cityBeacon 2.8s ease-in-out infinite; }
  .city-dolphin { animation:cityDolphin 11s ease-in-out infinite; }
  .city-signal { animation:citySignalR 14s steps(1,end) infinite; animation-delay:var(--delay,0s); }
  .city-signal-1 { animation-name:citySignalY; }
  .city-signal-2 { animation-name:citySignalG; }
  .city-pigeon { animation:cityPeck 3.2s ease-in-out infinite; animation-delay:var(--delay,0s); }
  .city-kite { transform-origin:0 60px; animation:cityKite 6s ease-in-out infinite alternate; }
  .city-surf { animation:citySurf 7s ease-in-out infinite alternate; }
  .city-shore,.city-tide { animation:cityShore 4.6s ease-in-out infinite; }
  .city-beam { animation:cityBeam 13s ease-in-out infinite alternate; }
  .city-beam.is-alt { animation-duration:17s; animation-direction:alternate-reverse; }
  .city-bulb-a,.city-bulb-b { animation:cityBulb 1.6s steps(1,end) infinite; }
  .city-bulb-b { animation-delay:-.8s; }
  .city-takeoff { animation:cityTakeoff 22s linear infinite; }
  .city-clock-hand { animation:citySpin 60s linear infinite; }
  .city-flag { animation:cityFlag 2.4s ease-in-out infinite alternate; }
  .city-tail { animation:cityTail 3s ease-in-out infinite alternate; }
  .city-fish { animation:cityFish 9s ease-in-out infinite; }
  .city-butterfly { animation:cityButterfly 7s ease-in-out infinite alternate; }
  .city-beach-flag { animation:cityLean 2.6s ease-in-out infinite alternate; }
  .city-windsock { transform-origin:0 -42px; animation:cityWindsock 3.4s ease-in-out infinite alternate; }
  .city-conversation-gesture { animation:cityGesture 2.8s ease-in-out infinite alternate; }
  .city-puddle-rings { animation:cityRipples 3.2s ease-in-out infinite; }
}
@keyframes citySmoke { 0% { opacity:0; transform:translate(0,0) scale(.6); } 20% { opacity:.65; } 100% { opacity:0; transform:translate(24px,-60px) scale(1.6); } }
@keyframes citySailDrift { from { transform:translateX(0); } to { transform:translateX(-90px); } }
@keyframes cityBeacon { 0%,100% { opacity:.2; } 50% { opacity:1; } }
@keyframes cityDolphin { 0%,60%,100% { opacity:0; transform:translate(0,16px) rotate(24deg); } 68% { opacity:1; transform:translate(12px,-12px) rotate(-6deg); } 78% { opacity:1; transform:translate(28px,-6px) rotate(-38deg); } 86% { opacity:0; transform:translate(40px,14px) rotate(-60deg); } }
@keyframes citySignalR { 0% { opacity:1; } 45% { opacity:0; } 100% { opacity:0; } }
@keyframes citySignalY { 0% { opacity:0; } 45% { opacity:1; } 55% { opacity:0; } 100% { opacity:0; } }
@keyframes citySignalG { 0% { opacity:0; } 55% { opacity:1; } 100% { opacity:1; } }
@keyframes cityPeck { 0%,38%,100% { transform:rotate(0deg); } 48% { transform:rotate(24deg); } 58% { transform:rotate(0deg); } 68% { transform:rotate(18deg); } 76% { transform:rotate(0deg); } }
@keyframes cityKite { from { transform:rotate(-7deg) translateY(0); } to { transform:rotate(6deg) translateY(-8px); } }
@keyframes citySurf { from { transform:translate(0,0) rotate(-2deg); } to { transform:translate(38px,4px) rotate(3deg); } }
@keyframes cityShore { 0%,100% { opacity:.2; transform:translate(0,0); } 50% { opacity:.75; transform:translate(-5px,-3px); } }
@keyframes cityBeam { from { transform:rotate(-12deg); } to { transform:rotate(10deg); } }
@keyframes cityBulb { 0% { opacity:1; } 50% { opacity:.3; } }
@keyframes cityTakeoff { 0% { opacity:0; transform:translate(-40px,0) rotate(0deg); } 6% { opacity:1; } 45% { transform:translate(150px,0) rotate(0deg); } 70% { opacity:1; transform:translate(300px,-80px) rotate(-14deg); } 80%,100% { opacity:0; transform:translate(360px,-120px) rotate(-16deg); } }
@keyframes citySpin { to { transform:rotate(360deg); } }
@keyframes cityFlag { from { transform:scaleX(1) skewY(0deg); } to { transform:scaleX(.84) skewY(7deg); } }
@keyframes cityTail { from { transform:rotate(-14deg); } to { transform:rotate(16deg); } }
@keyframes cityFish { 0%,100% { transform:translate(0,0); } 50% { transform:translate(-26px,4px); } }
@keyframes cityButterfly { 0% { transform:translate(0,0) scale(1,1); } 25% { transform:translate(14px,-10px) scale(.6,1); } 50% { transform:translate(30px,-2px) scale(1,1); } 75% { transform:translate(18px,-16px) scale(.6,1); } 100% { transform:translate(-6px,-6px) scale(1,1); } }
@keyframes cityLean { from { transform:rotate(-2deg); } to { transform:rotate(2deg); } }
@keyframes cityWindsock { from { transform:rotate(-7deg) scaleX(.9); } to { transform:rotate(5deg) scaleX(1.04); } }
@keyframes cityGesture { from { transform:rotate(-10deg); } to { transform:rotate(14deg); } }

/* Warm, unhurried lighting keeps the architecture readable as the city lives. */
@media(prefers-reduced-motion:no-preference) {
  .bt-city .city-marquee-glimmer { animation:cityMarqueeGlow 9s ease-in-out infinite; animation-delay:var(--delay,0s); }
  .bt-city .city-lantern-light { animation:cityLanternGlow 7s ease-in-out infinite alternate; }
}
@keyframes cityMarqueeGlow { 0%,100% { opacity:1; } 50% { opacity:.5; } }
@keyframes cityLanternGlow { from { opacity:.06; } to { opacity:.18; } }
@media(prefers-reduced-motion:reduce) {
  .bt-city :is(.city-marquee-glimmer,.city-lantern-light) { animation:none; }
}

/* Phones and tablets: the whole panorama fits the width, so the title sits just
   above it and the destinations just below, never covering a place. */
@media(max-width:1100px) {
  .city-open-canvas .city-open-map { display:flex; flex-direction:column; aspect-ratio:auto; padding:0 0 10px!important; }
  .city-open-canvas .city-open-title { position:relative; top:auto; left:auto; transform:none; order:0; align-self:flex-start; max-width:calc(100% - 76px); margin:10px 10px 10px; }
  .city-open-canvas .city-motion-toggle,
  .city-open-canvas:is([data-world="neon-pure"],[data-world="festivalia"]) .city-motion-toggle { top:10px; right:10px; }
  .city-open-canvas .city-pan-scroll { position:relative; inset:auto; order:1; border-radius:0; }
  .city-open-canvas .city-dock,
  .city-open-canvas:is([data-world="neon-pure"],[data-world="festivalia"]) .city-dock { position:relative; left:auto; bottom:auto; order:3; transform:none; align-self:center; margin:10px auto 0; box-shadow:0 8px 20px -14px #0f241a88; }
}

/* Phones: pins become compact icons so none overlap on the whole-city view, and
   the place names live in a tappable list right under the city. */
.city-open-canvas .city-place-list { display:none; }
@media(max-width:560px) {
  /* The hidden name no longer needs room: the tap area is the icon and its stem. */
  .city-open-canvas .city-open-map .city-poi { min-width:0; min-height:0; }
  .city-open-canvas .city-open-map .city-poi .poi-name { display:none; }
  .city-open-canvas .city-open-map .city-poi .poi-pin { width:30px; height:30px; border-width:2px; }
  .city-open-canvas .city-open-map .city-poi .poi-pin svg { width:15px; height:15px; }
  .city-open-canvas .city-open-map .poi-stem { top:28px; height:6px; }
  .city-open-canvas .city-place-list { order:3; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:10px 10px 0; padding:0; list-style:none; }
  .city-open-canvas .city-place-list button { display:flex; align-items:center; gap:8px; width:100%; min-height:44px; padding:8px 10px; border:1px solid #dfe4d2; border-radius:14px; background:#fffdf7; color:#2f4d3b; font:600 13px/1.2 'DM Sans',sans-serif; text-align:left; cursor:pointer; }
  .city-open-canvas .city-place-list button:active { transform:translateY(1px); }
  .city-open-canvas .city-place-list svg { flex-shrink:0; width:26px; height:26px; padding:5px; border-radius:50%; border:2px solid var(--poi-color); fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; background:#fff; }
  .city-open-canvas .city-place-list span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .city-open-canvas:is([data-world="neon-pure"],[data-world="festivalia"]) .city-place-list button { background:#322841; border-color:#544263; color:#fff0cb; }
  .city-open-canvas:is([data-world="neon-pure"],[data-world="festivalia"]) .city-place-list svg { background:#2a2044; }
  .city-open-canvas .city-dock,
  .city-open-canvas:is([data-world="neon-pure"],[data-world="festivalia"]) .city-dock { order:4; }
}
/* Câmera imersiva: a cidade ocupa a tela inteira em qualquer aparelho.
   A arte guarda a proporção 20:11 (os marcadores são % dela) e cobre a janela
   como um `cover`: o que sobra de um lado vira caminho para arrastar. A
   primeira vista (city-life-controls.js › frameCity) enquadra todos os locais. */
.city-open-canvas .city-open-map {
  width:100%; height:calc(100svh - 48px)!important; min-height:520px!important; max-height:1100px; aspect-ratio:auto;
}
.city-open-canvas .city-pan-scroll {
  position:absolute; inset:0; overflow:auto; container-type:size;
  scrollbar-width:none; overscroll-behavior:contain; touch-action:pan-x pan-y;
}
.city-open-canvas .city-pan-scroll::-webkit-scrollbar { display:none; }
.city-open-canvas .city-pan-scroll .bt-city,
.city-open-canvas .city-pan-scroll .bt-city.is-night {
  width:max(100cqw, 100cqh * 20 / 11); min-width:0; max-width:none; height:auto; aspect-ratio:20/11;
}
/* Tablets e celulares: título numa linha própria, a cidade logo abaixo, o
   seletor de destinos e a lista de locais em seguida. A altura da câmera
   decide o zoom: perto o bastante para ler os nomes, longe o bastante para
   ver vários lugares de uma vez; o resto se alcança arrastando. */
@media(max-width:1100px) {
  .city-open-canvas { --city-cam-h:max(400px, min(66vw, calc(100svh - 300px))); }
  .city-open-canvas .city-open-map { display:flex; flex-direction:column; height:auto!important; min-height:0!important; padding:0!important; overflow:visible; background:none!important; box-shadow:none!important; border-radius:0!important; }
  .city-open-canvas .city-open-title { position:relative; top:auto; left:auto; transform:none; order:0; align-self:flex-start; margin:0 0 10px; }
  .city-open-canvas .city-motion-toggle,
  .city-open-canvas:is([data-world="neon-pure"],[data-world="festivalia"]) .city-motion-toggle { top:0; right:0; }
  .city-open-canvas .city-pan-scroll { position:relative; inset:auto; order:1; height:var(--city-cam-h); border-radius:22px; box-shadow:0 18px 44px -28px #0b1a1299; }
  .city-open-canvas .city-dock,
  .city-open-canvas:is([data-world="neon-pure"],[data-world="festivalia"]) .city-dock { position:relative; order:2; top:auto; bottom:auto; left:auto; transform:none; align-self:center; margin:10px auto 0; }
  .city-open-canvas .city-place-list { order:3; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:12px 0 0; padding:0; list-style:none; }
  .city-open-canvas .city-place-list button { display:flex; align-items:center; gap:12px; width:100%; min-height:58px; padding:10px 12px; border:1px solid #dfe4d2; border-radius:16px; background:#fffdf7; color:#2f4d3b; font:600 14px/1.2 'DM Sans',sans-serif; text-align:left; cursor:pointer; box-shadow:0 2px 0 #dfe4d2; }
  .city-open-canvas .city-place-list button:active { transform:translateY(1px); }
  .city-open-canvas .city-place-list svg { flex-shrink:0; width:34px; height:34px; padding:7px; border-radius:50%; border:2px solid var(--poi-color); fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; background:#fff; }
  .city-open-canvas .city-place-list span { display:grid; gap:3px; min-width:0; }
  .city-open-canvas .city-place-list small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#6a7d68; font:500 11.5px/1.2 'DM Sans',sans-serif; }
  .city-open-canvas:is([data-world="neon-pure"],[data-world="festivalia"]) .city-place-list button { background:#322841; border-color:#544263; color:#fff0cb; box-shadow:none; }
  .city-open-canvas:is([data-world="neon-pure"],[data-world="festivalia"]) .city-place-list svg { background:#2a2044; }
  .city-open-canvas:is([data-world="neon-pure"],[data-world="festivalia"]) .city-place-list small { color:#cbbad8; }
}
@media(max-width:560px) {
  .city-open-canvas { --city-cam-h:max(320px, min(112vw, calc(100svh - 330px))); }
  .city-open-canvas .city-pan-scroll { border-radius:20px; }
  .city-open-canvas .city-open-map .city-poi { min-width:80px; }
  .city-open-canvas .city-open-map .city-poi .poi-name { display:block; font-size:10.5px; padding:5px 8px; }
  .city-open-canvas .city-open-map .city-poi .poi-pin { width:36px; height:36px; }
  .city-open-canvas .city-open-map .city-poi .poi-pin svg { width:17px; height:17px; }
  .city-open-canvas .city-open-map .poi-stem { top:36px; height:8px; }
  .city-open-canvas .city-place-list { grid-template-columns:1fr; }
}

/* Em telas de toque (GPUs de celular) o desfoque por trás das pílulas refaz o
   blur a cada quadro da cidade animada. Um fundo quase opaco lê igual. */
@media (hover:none) {
  .city-open-canvas :is(.city-open-title,.city-dock,.city-motion-toggle) { backdrop-filter:none!important; -webkit-backdrop-filter:none!important; }
  .city-open-canvas { --pill:#fffdf5f2; }
  .city-open-canvas:is([data-world="neon-pure"],[data-world="festivalia"]) { --pill:#2a2044f2; }
}
/* Tema escuro do app: a lista de locais acompanha a página, não a cidade. */
@media(max-width:1100px) {
  :root[data-theme="dark"] .city-open-canvas .city-place-list button { background:#1d2822; border-color:#324238; color:#eef3e6; box-shadow:none; }
  :root[data-theme="dark"] .city-open-canvas .city-place-list svg { background:#26332c; }
  :root[data-theme="dark"] .city-open-canvas .city-place-list small { color:#a9b8a8; }
}
/* ==========================================================================
   Tela de conta: entrar, criar, recuperar e confirmar o e-mail.

   Duas colunas — o mundo do Tato à esquerda (o MESMO céu e as MESMAS colinas
   do onboarding, para a entrada não cortar a cena) e o formulário à direita.
   No celular vira uma coluna só, com o palco deitado numa faixa.
   ========================================================================== */

.auth-screen {
  --auth-ink: #2c2519;
  --auth-muted: #7b6d55;
  --auth-line: #ece0c0;
  --auth-yellow: #f8c637;
  --auth-yellow-deep: #e0a815;
  --auth-green: #6d9455;
  position: relative;
  display: block;
  min-height: 100svh;
  padding: clamp(20px, 4vw, 52px) clamp(16px, 4vw, 40px);
  overflow: hidden;
  isolation: isolate;
  background: #fbf6e7;
}

/* -------------------------------------------------------------------- céu */
.auth-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.auth-sky__glow { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .7; }
.auth-sky__glow--a { top: -18%; left: -10%; width: 58vw; height: 58vw; background: radial-gradient(circle, #ffe7a1 0, #ffe7a100 70%); }
.auth-sky__glow--b { right: -16%; bottom: -24%; width: 62vw; height: 62vw; background: radial-gradient(circle, #cfe9c0 0, #cfe9c000 70%); }
.auth-sky__grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(#2c25190a 1px, transparent 1px), linear-gradient(90deg, #2c25190a 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 0, transparent 78%);
}
.auth-mote {
  position: absolute;
  left: calc(5% + (var(--i) * 8%));
  bottom: -12px;
  width: calc(4px + (var(--i) % 4) * 3px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f3c95e;
  opacity: 0;
}

.auth-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(24px, 4.4vw, 64px);
  width: min(1120px, 100%);
  min-height: calc(100svh - clamp(40px, 8vw, 104px));
  margin-inline: auto;
}

/* ------------------------------------------------------------ coluna do Tato */
.auth-aside { display: grid; gap: 20px; align-content: center; }
.auth-back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 17px;
  border: 1px solid var(--auth-line);
  border-radius: 999px;
  background: #fffdf6b3;
  color: var(--auth-muted);
  font: 600 13px/1 'DM Sans', sans-serif;
  transition: color .2s, border-color .2s, transform .2s;
}
.auth-back:hover { color: var(--auth-ink); border-color: #d5c391; transform: translateX(-3px); }

.auth-stage {
  position: relative;
  display: grid;
  place-items: end center;
  height: clamp(230px, 30vw, 320px);
  padding-bottom: 18px;
  border: 7px solid #fffdf6;
  border-radius: 170px 170px 32px 32px;
  background: linear-gradient(#cfe6f4, #dfeedd 62%, #d6e7c6);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 9px 0 #e7dcb8, 0 30px 66px -36px #33452b66;
}
.auth-stage__world { position: absolute; inset: 0; }
.auth-stage__sun {
  position: absolute; top: 13%; left: 50%;
  width: 84px; height: 84px;
  margin-left: -42px;
  border-radius: 50%;
  background: #ffe9a8;
  box-shadow: 0 0 0 16px #ffe9a83d, 0 0 64px #ffd97a;
}
.auth-stage__cloud {
  position: absolute;
  height: 20px;
  border-radius: 999px;
  background: #fffdf6cc;
  box-shadow: 24px 6px 0 -3px #fffdf6cc, -22px 5px 0 -4px #fffdf6cc;
}
.auth-stage__cloud--a { top: 17%; left: -30%; width: 66px; }
.auth-stage__cloud--b { top: 33%; left: -42%; width: 48px; opacity: .8; }
.auth-stage__hill { position: absolute; left: -14%; width: 128%; border-radius: 50%; }
.auth-stage__hill--back { bottom: -6%; height: 40%; background: #b6d19b; }
.auth-stage__hill--front { bottom: -20%; height: 44%; background: #93b87a; box-shadow: 46px -22px 0 #a9c98d; }

.auth-stage .guide-tato {
  position: relative;
  z-index: 2;
  width: min(74%, 224px);
  height: auto;
  margin-bottom: 44px;
  filter: drop-shadow(0 16px 14px #2e451f2b);
}
.auth-stage__line {
  position: absolute;
  z-index: 3;
  left: 15px; right: 15px; bottom: 15px;
  margin: 0;
  padding: 11px 15px;
  border-radius: 18px 18px 18px 5px;
  background: #fffdf6f5;
  box-shadow: 0 5px 0 #e5d9ae;
  text-align: center;
  font: 500 14.5px/1.4 Fredoka, 'DM Sans', sans-serif;
  color: #35512f;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(7px);
}
.auth-stage__line.is-in { opacity: 1; transform: none; transition: opacity .32s ease, transform .32s cubic-bezier(.22,1,.36,1); }

/* ------------------------------------------------------------ trilho de etapas */
.auth-journey {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.auth-journey li {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 10px 11px;
  border: 1px solid #efe4c6;
  border-radius: 14px;
  background: #fffdf6a6;
  animation: auth-rise .5s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(.14s + var(--i) * .08s);
}
.auth-journey li.is-current { border-color: var(--auth-yellow); background: #fff7e0; box-shadow: 0 0 0 3px #f8c63726; }
.auth-journey b {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #f1e8cd;
  font: 600 12px Fredoka, sans-serif;
  color: #8a7233;
}
.auth-journey li.is-current b { background: var(--auth-yellow); color: #5b4400; }
.auth-journey span { font: 500 12.6px/1.2 Fredoka, sans-serif; color: #4d4534; }
.auth-journey small { display: block; margin-top: 2px; font: 600 10.5px 'DM Sans', sans-serif; letter-spacing: .4px; color: #a1926f; }

/* ---------------------------------------------------------------- vantagens */
.auth-perks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.auth-perks li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  color: var(--auth-muted);
  animation: auth-rise .5s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(.3s + var(--i) * .08s);
}
.auth-perks__badge {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 12px;
  background: #eef4e3;
  color: #5d8a45;
}
.auth-perks b { display: block; font: 500 14.6px/1.3 Fredoka, 'DM Sans', sans-serif; color: #26402c; }
.auth-perks div span { display: block; margin-top: 2px; font-size: 12.4px; line-height: 1.5; }

/* -------------------------------------------------------------- formulário */
.auth-screen .auth-card {
  position: relative;
  width: min(100%, 500px);
  justify-self: center;
  padding: clamp(24px, 3.2vw, 38px);
  border: 1px solid var(--auth-line);
  border-radius: 30px;
  background: linear-gradient(#fffdf6, #fffaee);
  box-shadow: 0 12px 0 #f0e5c6, 0 40px 80px -50px #6b552466;
  overflow: hidden;
}
.auth-card__glow {
  position: absolute;
  top: -60%; right: -30%;
  width: 70%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #ffeaae80 0, transparent 70%);
  pointer-events: none;
}
.auth-screen .auth-card > *:not(.auth-card__glow) { position: relative; }
.auth-screen .auth-card h1 { margin: 10px 0 10px; font-size: clamp(29px, 3.4vw, 38px); line-height: 1.04; letter-spacing: -1px; }
.auth-screen .auth-card h1:focus-visible { outline: none; }
.auth-screen .auth-card .sub { margin: 0; font-size: 14.6px; }
.auth-card.is-swapping { animation: auth-swap .42s cubic-bezier(.22,1,.36,1) both; }
@keyframes auth-swap { from { opacity: 0; transform: translateY(12px) scale(.99); } }
.auth-card.is-wrong { animation: auth-shake .42s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes auth-shake {
  10%, 90% { transform: translateX(-3px); }
  20%, 80% { transform: translateX(5px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

/* Segmento entrar ⇄ criar conta: a pílula desliza, então o modo atual nunca
   é uma dúvida — e trocar de modo deixa de parecer sair da página. */
.auth-modes {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 0 0 20px;
  padding: 4px;
  border: 1px solid #efe4c6;
  border-radius: 999px;
  background: #f8f2df;
}
.auth-modes__pill {
  position: absolute;
  top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 6px -2px #6b552466;
  transition: transform .34s cubic-bezier(.22,1,.36,1);
}
.auth-modes[data-mode="login"] .auth-modes__pill, .auth-modes[data-mode="reset"] .auth-modes__pill { transform: translateX(100%); }
.auth-mode {
  position: relative;
  padding: 10px 8px;
  border-radius: 999px;
  background: none;
  font: 600 13px 'DM Sans', sans-serif;
  color: #9b8c69;
  transition: color .24s;
}
.auth-mode[aria-selected="true"] { color: #5b4400; }

.auth-form { display: grid; gap: 15px; margin: 24px 0 4px; }
.auth-field { display: grid; gap: 7px; }
.auth-field .field-label { font: 600 12.5px/1 'DM Sans', sans-serif; letter-spacing: .2px; transition: color .2s; }
.auth-field.is-focus .field-label { color: #5d8a45; }

/* O ícone mora DENTRO da moldura, ao lado do campo — nunca por cima dele:
   sobreposto, o clique cai na fronteira e o `input` (que ocupa a linha) ganha. */
.auth-wrap, .auth-secret {
  display: grid;
  align-items: center;
  border: 1px solid #ddd0a6;
  border-radius: 14px;
  background: #fffdf6;
  transition: border-color .2s, box-shadow .2s;
}
.auth-wrap { grid-template-columns: 42px minmax(0, 1fr); }
.auth-secret { grid-template-columns: 42px minmax(0, 1fr) auto; }
.auth-wrap:focus-within, .auth-secret:focus-within { border-color: var(--auth-yellow-deep); box-shadow: 0 0 0 4px #f8c63726; }
.auth-wrap > .auth-icon, .auth-secret > .auth-icon { justify-self: center; color: #b9a778; transition: color .2s; }
.auth-wrap:focus-within > .auth-icon, .auth-secret:focus-within > .auth-icon { color: var(--auth-yellow-deep); }
.auth-wrap .input, .auth-secret .input { border: 0; background: none; padding-left: 0; }
.auth-wrap .input:focus, .auth-secret .input:focus { box-shadow: none; outline: none; }
.auth-peek {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-right: 6px;
  border-radius: 11px;
  background: transparent;
  color: #ab9a70;
  transition: background .2s, color .2s;
}
.auth-peek:hover { background: #f5eed8; color: #6b5720; }
.auth-peek[aria-pressed="true"] { background: #fdf0c6; color: #6b5720; }

.auth-caps, .auth-hint { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; line-height: 1.5; color: var(--auth-muted); }
.auth-caps { color: #9a6a2c; font-weight: 600; }
.auth-caps[hidden] { display: none; }

.auth-strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 2px; }
.auth-strength i { height: 5px; border-radius: 999px; background: #ece1c3; transition: background .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1); transform-origin: left; }
.auth-strength i.is-on { background: #e0a815; }
.auth-strength[data-score="1"] i.is-on { background: #dd8b3a; }
.auth-strength[data-score="3"] i.is-on, .auth-strength[data-score="4"] i.is-on { background: var(--auth-green); }

.auth-submit { display: grid; place-items: center; margin-top: 4px; }
.auth-submit[aria-busy="true"] span { opacity: .55; }

.auth-notice {
  margin: 18px 0 0;
  padding: 13px 15px;
  border: 1px solid #dae4c9;
  border-left: 4px solid var(--auth-green);
  border-radius: 6px 14px 14px 6px;
  background: #f2f7e9;
  font-size: 13.4px;
  line-height: 1.6;
  color: #3f5a3c;
}
.auth-switches { display: grid; gap: 2px; margin-top: 16px; justify-items: start; }
.auth-switch { background: none; color: #6d7d66; font: 600 13.5px 'DM Sans', sans-serif; text-decoration: underline; text-decoration-color: #ddd0a6; text-underline-offset: 4px; transition: color .2s; }
.auth-switch:hover { color: var(--auth-ink); }
.auth-switch--quiet { font-size: 13px; color: #9b8c69; }
.auth-screen .fine { display: flex; align-items: flex-start; gap: 8px; margin: 20px 0 0; text-align: left; }
.auth-screen .fine .auth-icon { flex: none; margin-top: 2px; color: #b3a67f; }
.verification-input { text-align: center; letter-spacing: .5em; font: 500 26px/1 Fredoka, 'DM Sans', sans-serif; text-indent: .5em; }
.dev-code { margin-top: 16px; padding: 11px 14px; border: 1px dashed #d3ba7a; border-radius: 13px; background: #fdf6e2; font-size: 12.5px; color: #7a5f22; }
.signed-account { display: flex; align-items: center; gap: 13px; padding: 14px; border: 1px solid #e6dbb8; border-radius: 16px; background: #fffbee; }
.signed-account strong { display: block; font: 500 17px Fredoka, 'DM Sans', sans-serif; }
.signed-account small { color: var(--auth-muted); }

/* --------------------------------------------------------------- comemoração */
.auth-burst { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.auth-burst i {
  position: absolute;
  top: 42%; left: 50%;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: #f8c637;
  animation: auth-burst .95s cubic-bezier(.2,.7,.3,1) both;
  animation-delay: calc(var(--i) * .018s);
  transform: rotate(calc(var(--i) * 22.5deg)) translateY(0);
}
.auth-burst i:nth-child(3n) { background: #6d9455; }
.auth-burst i:nth-child(3n+1) { background: #ef9f4a; border-radius: 50%; }
@keyframes auth-burst {
  from { opacity: 1; transform: rotate(calc(var(--i) * 22.5deg)) translateY(0) scale(.4); }
  to { opacity: 0; transform: rotate(calc(var(--i) * 22.5deg)) translateY(-190px) scale(1); }
}

/* ---------------------------------------------------------------- movimento */
@keyframes auth-rise { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: no-preference) {
  .auth-screen .auth-card { animation: auth-rise .5s cubic-bezier(.22, 1, .36, 1) both; }
  .auth-stage { animation: auth-rise .5s cubic-bezier(.22, 1, .36, 1) .06s both; }
  .auth-stage__sun { animation: auth-sun 7s ease-in-out infinite; }
  @keyframes auth-sun { 50% { transform: translateY(-8px) scale(1.04); } }
  .auth-stage__cloud--a { animation: auth-drift 32s linear infinite; }
  .auth-stage__cloud--b { animation: auth-drift 44s linear infinite 5s; }
  @keyframes auth-drift { to { transform: translateX(340px); } }
  .auth-mote { animation: auth-float linear infinite; animation-duration: calc(14s + (var(--i) % 5) * 3.2s); animation-delay: calc(var(--i) * -2.1s); }
  @keyframes auth-float {
    0% { opacity: 0; transform: translateY(0) scale(.6); }
    14% { opacity: .5; }
    86% { opacity: .35; }
    100% { opacity: 0; transform: translateY(-104svh) translateX(28px) scale(1); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .auth-journey li, .auth-perks li, .auth-screen .auth-card, .auth-stage { animation: none !important; }
}

/* No celular o palco deita: o Tato de um lado, a fala do outro. Sobreposto,
   o balão cobria justamente o rosto que estava reagindo. */
@media (max-width: 940px) {
  .auth-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; min-height: 0; justify-items: center; }
  .auth-aside { width: min(100%, 500px); gap: 14px; }
  .auth-stage {
    grid-template-columns: 122px minmax(0, 1fr);
    place-items: end start;
    height: auto;
    min-height: 138px;
    padding: 12px 16px 0 4px;
    border-width: 5px;
    border-radius: 70px 26px 26px 70px;
  }
  .auth-stage .guide-tato { width: 116px; margin-bottom: 0; }
  .auth-stage__sun { width: 52px; height: 52px; top: 14px; left: auto; right: 66px; margin-left: 0; box-shadow: 0 0 0 10px #ffe9a83d; }
  .auth-stage__hill--front { bottom: -32%; height: 64%; left: -24%; width: 86%; }
  .auth-stage__hill--back { bottom: -18%; height: 46%; left: -20%; width: 82%; }
  .auth-stage__cloud { display: none; }
  .auth-stage__line { position: static; align-self: center; margin-bottom: 12px; text-align: left; font-size: 13.4px; padding: 10px 13px; }
  .auth-perks { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 18px; }
  .auth-perks div span { display: none; }
  .auth-perks li { align-items: center; }
  .auth-screen .auth-card { width: min(100%, 500px); }
}
@media (max-width: 520px) {
  .auth-journey { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .auth-journey li { padding: 8px 11px; }
  .auth-journey small { display: inline; margin-left: 6px; }
}
@media (max-width: 420px) {
  .auth-stage { grid-template-columns: 100px minmax(0, 1fr); min-height: 122px; }
  .auth-stage .guide-tato { width: 96px; }
  .auth-stage__sun { display: none; }
  .auth-stage__line { font-size: 12.6px; }
  .auth-perks { grid-template-columns: minmax(0, 1fr); }
  .verification-input { letter-spacing: .32em; font-size: 22px; }
}

/* Celular e tablet: o formulário vem logo depois do Tato. A trilha de passos
   repetia o "PASSO 1 DE 3" do próprio cartão, e os benefícios (que a pessoa
   acabou de ler na home) empurravam o cadastro para baixo da dobra: agora eles
   ficam depois do cartão, como reforço para quem rola. */
@media (max-width: 940px) {
  .auth-aside { display: contents; }
  .auth-layout > *, .auth-aside > * { width: min(100%, 500px); }
  .auth-back { order: 0; justify-self: start; width: auto; }
  .auth-stage { order: 1; }
  .auth-screen .auth-card { order: 2; }
  .auth-journey { display: none; }
  .auth-perks { order: 3; margin-top: 6px; }
}
/* O aceite vem antes do botão: quem toca em "Criar minha conta" já marcou. */
.auth-screen .auth-consent { margin: 6px 0 14px; }

/* Vindo do onboarding, o trilho mostra a trilha já pronta — também no celular. */
.auth-journey li.is-done { border-color: #cfe2bf; background: #eef6e6; }
.auth-journey li.is-done b { background: #6d9455; color: #fff; }
@media (max-width: 940px) { .auth-journey.is-saving { display: grid; order: 1; } }
/* ==========================================================================
   Onboarding v3 — a primeira conversa do produto com a pessoa.

   Uma cena só: o palco do Tato (sempre montado) e um painel que troca.
   Pouco texto: as cidades de verdade, o calendário do ritmo e a rota que se
   desenha explicam o que as palavras explicariam pior.
   Namespace `ob-`. Marcação em onboarding.js.
   ========================================================================== */

.ob-screen {
  --ob-ink: #2c2519;
  --ob-muted: #7b6d55;
  --ob-line: #ece0c0;
  --ob-paper: #fffdf6;
  --ob-yellow: #f8c637;
  --ob-yellow-deep: #e0a815;
  --ob-green: #6d9455;
  --ob-forest: #25493a;
  --ob-ease: cubic-bezier(.22, 1, .36, 1);
  --ob-spring: cubic-bezier(.34, 1.56, .64, 1);
  position: relative;
  display: block;
  min-height: 100svh;
  padding: clamp(14px, 2.6vw, 30px);
  overflow: hidden;
  isolation: isolate;
  color: var(--ob-ink);
  background: #fbf6e7;
}
.ob-screen .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.ob-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ob-sky__glow { position: absolute; border-radius: 50%; filter: blur(58px); opacity: .72; }
.ob-sky__glow--a { top: -16%; left: -8%; width: 58vw; height: 58vw; background: radial-gradient(circle, #ffe7a1 0, #ffe7a100 70%); }
.ob-sky__glow--b { right: -14%; bottom: -22%; width: 62vw; height: 62vw; background: radial-gradient(circle, #cfe9c0 0, #cfe9c000 70%); }

/* ---------------------------------------------------------------- moldura */
.ob-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(12px, 2vw, 20px);
  width: min(1120px, 100%);
  min-height: calc(100svh - clamp(28px, 5.2vw, 60px));
  margin-inline: auto;
}
.ob-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.ob-back {
  justify-self: start;
  padding: 9px 15px;
  border: 1px solid var(--ob-line);
  border-radius: 999px;
  background: #fffdf699;
  color: var(--ob-muted);
  font: 600 13px/1 'DM Sans', sans-serif;
  transition: transform .22s, color .22s, border-color .22s;
}
.ob-back:hover { transform: translateX(-3px); color: var(--ob-ink); border-color: #d5c391; }
.ob-dots { display: flex; align-items: center; gap: 7px; }
.ob-dots i { width: 26px; height: 6px; border-radius: 999px; background: #eadfbd; transition: background .4s ease, width .4s var(--ob-ease); }
.ob-dots i.is-done { background: var(--ob-green); }
.ob-dots i.is-current { width: 44px; background: linear-gradient(90deg, var(--ob-yellow), var(--ob-yellow-deep)); }

/* ------------------------------------------------------------------ cena */
.ob-scene {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  align-items: stretch;
  gap: clamp(16px, 3vw, 34px);
  min-height: 0;
}

/* ---------------------------------------------------------------- palco */
.ob-stage {
  position: relative;
  display: grid;
  place-items: end center;
  padding: 0 18px 22px;
  border: 7px solid #fffdf6;
  border-radius: 190px 190px 34px 34px;
  background: linear-gradient(#cfe6f4, #dfeedd 62%, #d6e7c6);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 10px 0 #e7dcb8, 0 34px 70px -38px #33452b66;
}
.ob-stage__world { position: absolute; inset: 0; }
.ob-stage__sun {
  position: absolute; top: 12%; left: 50%;
  width: 92px; height: 92px; margin-left: -46px;
  border-radius: 50%;
  background: #ffe9a8;
  box-shadow: 0 0 0 18px #ffe9a83d, 0 0 70px #ffd97a;
}
.ob-stage__hill { position: absolute; left: -14%; width: 128%; border-radius: 50%; }
.ob-stage__hill--back { bottom: -6%; height: 42%; background: #b6d19b; }
.ob-stage__hill--front { bottom: -18%; height: 44%; background: #93b87a; box-shadow: 48px -22px 0 #a9c98d; }
/* A cidade escolhida vira o fundo do palco. */
.ob-stage__city {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 58%;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity .8s ease, transform 1.4s var(--ob-ease);
}
.ob-stage__city.is-in { opacity: 1; transform: none; }
.ob-stage__city:not([hidden]) ~ .ob-stage__sun { display: none; }
.ob-stage__city:not([hidden]) ~ .ob-stage__hill--back { opacity: 0; }
.ob-stage__city:not([hidden]) ~ .ob-stage__hill--front { opacity: .92; }
.ob-stage .guide-tato {
  position: relative;
  z-index: 2;
  width: min(74%, 238px);
  height: auto;
  margin-bottom: 54px;
  filter: drop-shadow(0 18px 16px #2e451f2e);
}
.ob-stage__say {
  position: absolute;
  z-index: 3;
  left: 16px; right: 16px; bottom: 16px;
  margin: 0;
  padding: 12px 15px;
  border-radius: 18px 18px 18px 5px;
  background: #fffdf6f5;
  box-shadow: 0 6px 0 #e5d9ae;
  text-align: center;
  text-wrap: balance;
  font: 500 15.5px/1.35 Fredoka, 'DM Sans', sans-serif;
  color: #35512f;
  opacity: 0;
  transform: translateY(8px);
}
.ob-stage__say.is-in { opacity: 1; transform: none; transition: opacity .34s ease, transform .34s var(--ob-ease); }
.ob-stage__ring {
  position: absolute; z-index: 3;
  right: 16px; bottom: 74px;
  display: grid; place-items: center;
  width: 58px; height: 58px;
  filter: drop-shadow(0 4px 8px #33452b33);
}
.ob-stage__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ob-ring-track { fill: #fffdf6ef; stroke: #ffffffcc; stroke-width: 7; }
.ob-ring-fill {
  fill: none; stroke: var(--ob-yellow-deep); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 289; stroke-dashoffset: calc(289 - 289 * var(--p, 0));
  transition: stroke-dashoffset .7s var(--ob-ease);
}
.ob-stage__ring b { position: relative; font: 600 13px/1 Fredoka, sans-serif; color: #6f5410; }

/* --------------------------------------------------------------- painel */
.ob-card {
  display: grid;
  align-content: center;
  padding: clamp(22px, 3vw, 40px);
  border: 1px solid var(--ob-line);
  border-radius: 30px;
  background: linear-gradient(#fffdf6, #fffaee);
  box-shadow: 0 12px 0 #f0e5c6, 0 40px 80px -50px #6b552466;
  overflow: hidden auto;
}
.ob-panel { position: relative; display: grid; align-content: start; }
.ob-panel.is-entering { animation: ob-slide-in .42s var(--ob-ease) both; }
.ob-panel.is-entering-back { animation: ob-slide-in-back .42s var(--ob-ease) both; }
@keyframes ob-slide-in { from { opacity: 0; transform: translateX(30px); } }
@keyframes ob-slide-in-back { from { opacity: 0; transform: translateX(-30px); } }
@keyframes ob-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes ob-pop { from { opacity: 0; transform: scale(.94) translateY(10px); } }

.ob-title {
  margin: 0;
  font: 600 clamp(28px, 3.5vw, 42px)/1.04 Fredoka, sans-serif;
  letter-spacing: -1px;
  text-wrap: balance;
}
.ob-title em { font-style: normal; color: var(--ob-yellow-deep); }
.ob-title:focus-visible { outline: none; }

/* --------------------------------------------------------------- botões */
.ob-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 26px; }
.ob-foot--reveal { justify-content: flex-start; flex-wrap: wrap; }
.ob-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 26px;
  padding: 16px 24px;
  border-radius: 16px;
  background: linear-gradient(#fcd257, var(--ob-yellow));
  color: #5b4400;
  font: 600 15px Fredoka, sans-serif;
  letter-spacing: .3px;
  box-shadow: 0 5px 0 #d09b12;
  transition: transform .18s, box-shadow .18s, opacity .2s;
}
.ob-cta svg { transition: transform .24s var(--ob-ease); }
.ob-cta:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #d09b12; }
.ob-cta:hover svg { transform: translateX(4px); }
.ob-cta:active { transform: translateY(2px); box-shadow: 0 2px 0 #d09b12; }
.ob-cta--sm { margin-top: 0; padding: 13px 20px; font-size: 14px; }
.ob-cta.is-off, .ob-cta:disabled { opacity: .42; box-shadow: 0 5px 0 #ddd0a6; cursor: default; transform: none; }
.ob-panel > .ob-cta, .ob-panel > .ob-quiet { justify-self: start; }
.ob-foot .ob-cta { margin-top: 0; }
.ob-quiet {
  margin-top: 12px;
  padding: 8px 4px;
  background: none;
  color: var(--ob-muted);
  font: 600 13.5px 'DM Sans', sans-serif;
  text-decoration: underline;
  text-decoration-color: #ddd0a6;
  text-underline-offset: 4px;
  transition: color .2s;
}
.ob-quiet:hover { color: var(--ob-ink); }
.ob-foot .ob-quiet { margin-top: 0; }
.ob-quiet.is-suggested { color: var(--ob-ink); font-weight: 700; text-decoration-color: var(--ob-yellow-deep); }
.ob-note { font-size: 13px; font-weight: 600; color: var(--ob-muted); }

/* ------------------------------------------------------------ boas-vindas */
/* Três cidades em leque: a promessa é um mundo, não um formulário. */
.ob-fan { position: relative; height: clamp(120px, 15vw, 170px); margin: 0 0 26px; }
.ob-fan img {
  position: absolute; top: 0; left: 50%;
  width: clamp(150px, 19vw, 220px); height: auto; aspect-ratio: 20 / 11;
  object-fit: cover;
  border: 5px solid #fffdf6;
  border-radius: 18px;
  box-shadow: 0 16px 30px -18px #4c3d1a99;
  translate: -50% 0;
  transform: rotate(calc((var(--i) - 1) * 9deg)) translateX(calc((var(--i) - 1) * 62%));
  transform-origin: 50% 120%;
}
.ob-fan img:nth-child(2) { z-index: 2; top: -6px; }
.ob-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.ob-steps li {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 9px 14px;
  border: 1px solid #f0e6cb;
  border-radius: 999px;
  background: #fffbee;
  font-size: 14px; color: #5d5039;
  animation: ob-rise .5s var(--ob-ease) both;
  animation-delay: calc(.2s + var(--i) * .09s);
}
.ob-steps b { font: 600 18px/1 Fredoka, sans-serif; color: var(--ob-yellow-deep); }

/* --------------------------------------------------------------- objetivo */
.ob-goals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.ob-goal, .ob-scene-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 3px;
  padding: 0 0 14px;
  border: 2px solid var(--ob-line);
  border-radius: 22px;
  background: #fff;
  text-align: left;
  overflow: hidden;
  transition: border-color .22s, transform .24s var(--ob-ease), box-shadow .24s;
  animation: ob-rise .48s var(--ob-ease) both;
  animation-delay: calc(.05s + var(--i) * .07s);
}
.ob-goal:hover, .ob-scene-card:hover { transform: translateY(-4px); box-shadow: 0 16px 26px -20px #4c3d1a; }
.ob-goal.is-active, .ob-scene-card.is-active { border-color: var(--ob-yellow-deep); box-shadow: 0 0 0 4px #f8c6372e, 0 14px 26px -20px #4c3d1a; }
.ob-goal__art, .ob-scene-card__art { display: block; aspect-ratio: 20 / 13; overflow: hidden; background: #efe6cc; margin-bottom: 10px; }
.ob-goal__art img, .ob-scene-card__art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ob-ease); }
.ob-goal:hover img, .ob-goal.is-active img, .ob-scene-card:hover img, .ob-scene-card.is-active img { transform: scale(1.07); }
.ob-goal__copy { display: grid; gap: 3px; padding: 0 14px; }
.ob-goal strong, .ob-scene-card strong { padding: 0; font: 500 16.5px/1.2 Fredoka, sans-serif; }
.ob-goal small, .ob-scene-card small { font-size: 12.5px; line-height: 1.4; color: var(--ob-muted); }
.ob-scene-card strong, .ob-scene-card small { padding: 0 12px; }
.ob-tick {
  position: absolute; top: 10px; right: 10px;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fffdf6e6; color: #fff;
  opacity: 0; transform: scale(.6);
  transition: opacity .2s, transform .3s var(--ob-spring), background .2s;
}
.ob-goal.is-active .ob-tick { opacity: 1; transform: none; background: var(--ob-green); }
.ob-scene-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin-top: 24px; }
.ob-scene-card__art { aspect-ratio: 20 / 11; }

/* ------------------------------------------------------------------ nível */
.ob-level {
  --lv: 1;
  position: relative;
  display: grid;
  justify-items: center;
  margin-top: 22px;
  padding: 22px 20px 18px;
  border-radius: 26px;
  overflow: hidden;
  background: #f4efe2;
  isolation: isolate;
}
.ob-level__cafe { position: absolute; inset: 0; z-index: -1; opacity: .35; }
.ob-level__cafe img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 55%; filter: saturate(.8); }
.ob-level__cafe::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#fbf6e7cc, #fbf6e7f2 70%); }
.ob-level__say {
  position: relative;
  max-width: 30ch;
  min-height: 3.2em;
  display: grid; place-items: center;
  margin: 4px 0 24px;
  padding: 16px 22px;
  border-radius: 22px 22px 22px 6px;
  background: var(--ob-forest);
  color: #fff8dc;
  text-align: center;
  font: 500 clamp(18px, 2vw, 22px)/1.3 Fredoka, sans-serif;
  box-shadow: 0 14px 28px -18px #1c3a2b;
}
.ob-level__range { width: 100%; }
.ob-level input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px;
  background: transparent;
  cursor: pointer;
}
.ob-level input[type="range"]::-webkit-slider-runnable-track {
  height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, var(--ob-green) 0 calc(var(--lv) * 20%), #e6dcc0 calc(var(--lv) * 20%));
}
.ob-level input[type="range"]::-moz-range-track { height: 10px; border-radius: 999px; background: #e6dcc0; }
.ob-level input[type="range"]::-moz-range-progress { height: 10px; border-radius: 999px; background: var(--ob-green); }
.ob-level input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 34px; height: 34px; margin-top: -12px;
  border: 4px solid #fffdf6; border-radius: 50%;
  background: var(--ob-yellow);
  box-shadow: 0 4px 0 #c9971f, 0 8px 18px -8px #6b5524;
  transition: transform .2s var(--ob-spring);
}
.ob-level input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px;
  border: 4px solid #fffdf6; border-radius: 50%;
  background: var(--ob-yellow);
  box-shadow: 0 4px 0 #c9971f;
}
.ob-level input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.ob-level input[type="range"]:focus { outline: none; }
.ob-level input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px #25493a55, 0 4px 0 #c9971f; }
.ob-level input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px #25493a55; }
.ob-level__ticks { display: flex; justify-content: space-between; width: 100%; padding: 0 4px; font: 600 12px/1 Fredoka, sans-serif; color: #b3a47f; }
.ob-level__ticks span { transition: color .2s, transform .2s var(--ob-spring); }
.ob-level__ticks span.is-on { color: var(--ob-forest); transform: scale(1.25); }
.ob-level__name { margin: 12px 0 0; font: 500 17px Fredoka, sans-serif; color: var(--ob-forest); }

/* ------------------------------------------------------------------ ritmo */
.ob-pace { display: grid; gap: 18px; margin-top: 22px; }
.ob-pace__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ob-pace__opt {
  display: grid; justify-items: center; gap: 2px;
  padding: 16px 10px 14px;
  border: 2px solid var(--ob-line);
  border-radius: 20px;
  background: #fff;
  transition: border-color .22s, transform .24s var(--ob-ease), box-shadow .24s;
  animation: ob-rise .48s var(--ob-ease) both;
  animation-delay: calc(.05s + var(--i) * .07s);
}
.ob-pace__opt span { font-size: 26px; transition: transform .3s var(--ob-spring); }
.ob-pace__opt strong { font: 600 18px/1.1 Fredoka, sans-serif; }
.ob-pace__opt small { font-size: 12px; color: var(--ob-muted); }
.ob-pace__opt:hover { transform: translateY(-3px); }
.ob-pace__opt.is-active { border-color: var(--ob-yellow-deep); background: #fff8e0; box-shadow: 0 0 0 4px #f8c6372e; }
.ob-pace__opt.is-active span { transform: scale(1.18) rotate(-6deg); }
/* O mês: quatro semanas, e os dias combinados acendem um a um. */
.ob-month {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  width: min(100%, 330px);
  justify-self: center;
  padding: 12px 14px 14px;
  border-radius: 20px;
  background: #f4efe2;
}
.ob-month em { font: 600 10.5px/1 Fredoka, sans-serif; font-style: normal; text-align: center; color: #b3a47f; padding-bottom: 2px; }
.ob-month i { aspect-ratio: 1; border-radius: 50%; background: #e8dfc6; }
.ob-month i.is-day { background: #e8dfc6; }
.ob-month.is-on i.is-day {
  background: linear-gradient(145deg, #7fb86f, var(--ob-green));
  box-shadow: inset 0 -3px 0 #4d7a3c;
  animation: ob-day .38s var(--ob-spring) both;
  animation-delay: calc(var(--d) * 22ms);
}
@keyframes ob-day { from { transform: scale(.4); opacity: .2; } }
.ob-pace__total { margin: 0; text-align: center; font-size: 15px; color: var(--ob-muted); }
.ob-pace__total b { font: 600 22px Fredoka, sans-serif; color: var(--ob-forest); }
/* O combinado: segurar o botão por um segundo. */
.ob-hold {
  position: relative;
  display: grid; place-items: center;
  width: 100%;
  min-height: 58px;
  border-radius: 18px;
  background: var(--ob-forest);
  color: #fff8dc;
  font: 600 16px Fredoka, sans-serif;
  letter-spacing: .3px;
  overflow: hidden;
  box-shadow: 0 5px 0 #173127;
  user-select: none; -webkit-user-select: none;
  touch-action: none;
  transition: transform .18s, box-shadow .18s, opacity .2s;
}
.ob-hold__fill {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--ob-yellow), #fcd257);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.ob-hold__label { position: relative; }
.ob-hold.is-holding { transform: translateY(3px) scale(.99); box-shadow: 0 2px 0 #173127; }
.ob-hold.is-holding .ob-hold__fill { transform: scaleX(1); transition: transform 1s linear; }
.ob-hold.is-holding .ob-hold__label, .ob-hold.is-done .ob-hold__label { color: #4a3800; }
.ob-hold.is-done .ob-hold__fill { transform: scaleX(1); }
.ob-hold.is-done { animation: ob-pop .45s var(--ob-spring); }
.ob-hold.is-off, .ob-hold:disabled { opacity: .38; box-shadow: 0 5px 0 #8a9a8f; cursor: default; }
.ob-hold:focus-visible { outline: 3px solid var(--ob-yellow-deep); outline-offset: 3px; }

/* ---------------------------------------------------------------- montagem */
.ob-route { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 30px 0 6px; padding: 0; list-style: none; }
.ob-route::before {
  content: '';
  position: absolute; left: 10%; right: 10%; top: 38%;
  border-top: 3px dashed #d9c78e;
  transform: scaleX(0); transform-origin: 0 50%;
  animation: ob-draw 2.2s var(--ob-ease) .2s forwards;
}
@keyframes ob-draw { to { transform: scaleX(1); } }
.ob-route li { position: relative; display: grid; justify-items: center; gap: 8px; opacity: .2; transform: translateY(14px) scale(.9); transition: opacity .4s ease, transform .5s var(--ob-spring); }
.ob-route li.is-set { opacity: 1; transform: none; }
.ob-route__art { position: relative; display: block; width: 100%; aspect-ratio: 1; border: 4px solid #fffdf6; border-radius: 50%; overflow: hidden; box-shadow: 0 10px 22px -14px #4c3d1a; background: #efe6cc; }
.ob-route__art img { width: 100%; height: 100%; object-fit: cover; }
.ob-route li.is-set .ob-route__art::after {
  content: '✓'; position: absolute; right: 4%; bottom: 4%;
  display: grid; place-items: center; width: 26%; aspect-ratio: 1;
  border-radius: 50%; background: var(--ob-green); color: #fff; font: 700 13px/1 'DM Sans', sans-serif;
  animation: ob-pop .35s var(--ob-spring) both;
}
.ob-route b { font: 500 14px/1.2 Fredoka, sans-serif; text-align: center; }

/* --------------------------------------------------------------- revelação */
.ob-panel--reveal .ob-title { animation: ob-pop .55s var(--ob-spring) both; }
.ob-stop {
  display: grid; overflow: hidden;
  margin-top: 20px;
  border: 2px solid var(--ob-yellow);
  border-radius: 24px;
  background: linear-gradient(135deg, #fff6d9, #fffdf6);
  box-shadow: 0 10px 0 #f3e3ab;
  animation: ob-rise .5s var(--ob-ease) .16s both;
}
.ob-stop__art { position: relative; display: block; aspect-ratio: 20 / 8; overflow: hidden; }
.ob-stop__art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.ob-stop__art i {
  position: absolute; left: 14px; top: 14px;
  padding: 6px 11px; border-radius: 999px;
  background: var(--ob-forest); color: #fff8dc;
  font: 600 11.5px/1 Fredoka, sans-serif; font-style: normal; letter-spacing: .5px;
}
.ob-stop__copy { padding: 12px 18px 18px; }
.ob-stop__copy small { display: block; font: 600 11px Fredoka, sans-serif; letter-spacing: 1.1px; text-transform: uppercase; color: #a98d3f; }
.ob-stop__copy strong { display: block; margin-top: 3px; font: 500 24px Fredoka, sans-serif; }
.ob-stop__copy q {
  display: inline-block; margin-top: 9px; padding: 7px 12px;
  border-radius: 12px 12px 12px 4px;
  background: #fff; border: 1px dashed #e6d4a0;
  font: 500 14px 'DM Sans', sans-serif; color: #3f5a3c;
}
.ob-later { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.ob-later li { display: grid; gap: 4px; animation: ob-rise .45s var(--ob-ease) both; animation-delay: calc(.35s + var(--i) * .08s); }
.ob-later__art { display: block; aspect-ratio: 20 / 11; overflow: hidden; border-radius: 14px; border: 3px solid #fffdf6; box-shadow: 0 8px 16px -12px #4c3d1a; }
.ob-later__art img { width: 100%; height: 100%; object-fit: cover; }
.ob-later b { font: 500 13.5px/1.2 Fredoka, sans-serif; }
.ob-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ob-chip {
  padding: 8px 13px;
  border: 1px solid #e6dbb8; border-radius: 999px;
  background: #fffbee;
  font: 600 12.5px 'DM Sans', sans-serif; color: #6b5720;
  animation: ob-rise .45s var(--ob-ease) both;
  animation-delay: calc(.5s + var(--i) * .07s);
}

/* ------------------------------------------------------------ primeira fala */
.ob-voice { margin-top: 20px; padding: 20px; border: 1px solid var(--ob-line); border-radius: 26px; background: linear-gradient(180deg, #fffaf0, var(--ob-paper)); }
.ob-voice__q { display: flex; align-items: center; gap: 14px; }
.ob-voice__q strong { display: block; font: 500 clamp(19px, 2vw, 23px)/1.2 Fredoka, sans-serif; }
.ob-voice__q small { display: block; margin-top: 3px; font-size: 13px; color: var(--ob-muted); }
.ob-voice__play {
  flex: none; display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 0; border-radius: 50%;
  background: var(--ob-forest); color: #fff8dc; cursor: pointer;
  transition: transform .25s var(--ob-spring);
}
.ob-voice__play:hover { transform: scale(1.06); }
.ob-voice__play.is-playing { box-shadow: 0 0 0 6px #6d945533; }
.ob-voice__talk { display: grid; justify-items: center; gap: 10px; margin-top: 20px; text-align: center; }
.ob-voice__mic {
  position: relative; display: grid; place-items: center;
  width: 96px; height: 96px;
  border: 0; border-radius: 50%;
  color: #3f2e05; cursor: pointer;
  background: radial-gradient(circle at 34% 28%, #ffe38a, var(--ob-yellow) 58%, var(--ob-yellow-deep));
  box-shadow: 0 7px 0 #c9971f, 0 20px 36px -18px #9c6b17;
  transition: transform .2s var(--ob-spring), box-shadow .2s;
}
.ob-voice__mic:hover { transform: translateY(-2px); }
.ob-voice__mic:active { transform: translateY(4px); box-shadow: 0 2px 0 #c9971f; }
.ob-voice__mic:focus-visible { outline: 3px solid var(--ob-forest); outline-offset: 5px; }
.ob-voice__mic:disabled { cursor: progress; opacity: .7; }
.ob-voice__ring { position: absolute; inset: -8px; border-radius: 50%; border: 3px solid #e0a815; opacity: 0; }
.ob-voice[data-state="recording"] .ob-voice__mic { color: #fff; background: radial-gradient(circle at 34% 28%, #7fd08e, #3fa35b 60%, #2e7f45); box-shadow: 0 7px 0 #22683a, 0 20px 36px -18px #22683a; }
.ob-voice[data-state="recording"] .ob-voice__ring { border-color: #3fa35b; }
.ob-voice[data-state="sending"] .ob-voice__ring { border-color: var(--ob-yellow-deep); border-right-color: transparent; opacity: 1; }
.ob-voice__status { max-width: 36ch; margin: 0; font-size: 14px; font-weight: 600; color: #3d5a44; }
.ob-voice[data-state="error"] .ob-voice__status { color: #9a4b2e; }
.ob-voice__hint { margin: 0; font-size: 13px; color: var(--ob-muted); }
.ob-voice__hint b { color: var(--ob-ink); font-weight: 600; }
.ob-voice__result { display: grid; gap: 10px; margin-top: 18px; animation: ob-rise .45s var(--ob-ease) both; }
.ob-voice__said { display: grid; gap: 2px; margin: 0; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--ob-forest); color: #fff8dc; justify-self: end; max-width: 90%; }
.ob-voice__said small { font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; opacity: .7; }
.ob-voice__said span { font: 500 16px Fredoka, sans-serif; }
.ob-voice__feedback { padding: 13px 15px; border-radius: 16px; background: #fff2d6; border: 1px solid #f3dca0; }
.ob-voice__feedback.is-ok { background: #eef6e6; border-color: #cfe2bf; }
.ob-voice__feedback strong { display: block; font: 500 17px Fredoka, sans-serif; }
.ob-voice__feedback p { margin: 4px 0 0; font-size: 13.8px; line-height: 1.5; color: #5b5140; }
.ob-voice__feedback .ob-voice__reply { font-style: italic; color: #3d5a44; }
.ob-voice__privacy { margin: 12px 0 0; font-size: 12px; color: var(--ob-muted); text-align: center; }

/* ---------------------------------------------------------------- fechamento */
.ob-panel--finale { justify-items: start; }
.ob-panel--finale .ob-title { animation: ob-pop .6s var(--ob-spring) both; }
.ob-confetti { position: absolute; inset: -40px 0 auto; height: 0; pointer-events: none; }
.ob-confetti i {
  position: absolute; top: 0;
  left: var(--x);
  width: 8px; height: 12px;
  border-radius: 2px;
  background: hsl(calc(var(--i) * 47deg) 72% 62%);
  opacity: 0;
}
.ob-pact {
  display: flex; align-items: center; gap: 14px;
  margin-top: 20px;
  padding: 14px 18px 14px 14px;
  border-radius: 20px;
  background: #eef6e6;
  border: 1px solid #cfe2bf;
  animation: ob-rise .5s var(--ob-ease) .25s both;
}
.ob-pact__seal { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fffdf6; font-size: 24px; box-shadow: 0 4px 0 #cfe2bf; }
.ob-pact p { margin: 0; display: grid; gap: 2px; }
.ob-pact b { font: 600 17px/1.2 Fredoka, sans-serif; color: var(--ob-forest); }
.ob-pact small { font-size: 13px; color: #4f6b4a; }
.ob-remind { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: min(100%, 360px); margin-top: 18px; animation: ob-rise .5s var(--ob-ease) .35s both; }
.ob-remind span { grid-column: 1 / -1; font-size: 14px; font-weight: 600; color: var(--ob-muted); }
.ob-remind button {
  min-width: 58px; min-height: 44px; padding: 8px 12px;
  border: 1.5px solid var(--ob-line); border-radius: 14px;
  background: #fff;
  font: 600 14px Fredoka, sans-serif; color: var(--ob-ink);
  transition: border-color .2s, background .2s, transform .2s var(--ob-spring);
}
.ob-remind button:hover { border-color: #e2cf94; transform: translateY(-2px); }
.ob-remind button[aria-pressed="true"] { background: var(--ob-forest); border-color: var(--ob-forest); color: #fff8dc; }
.ob-next {
  display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  width: 100%; margin-top: 24px; padding: 10px 12px 10px 10px;
  border: 2px solid var(--ob-yellow); border-radius: 22px;
  background: linear-gradient(135deg, #fff6d9, #fffdf6);
  text-align: left;
  box-shadow: 0 7px 0 #e9c768;
  transition: transform .2s var(--ob-spring), box-shadow .2s;
  animation: ob-rise .5s var(--ob-ease) .45s both;
}
.ob-next:hover { transform: translateY(-3px); box-shadow: 0 10px 0 #e9c768; }
.ob-next:active { transform: translateY(3px); box-shadow: 0 3px 0 #e9c768; }
.ob-next:focus-visible { outline: 3px solid var(--ob-forest); outline-offset: 3px; }
.ob-next__art { display: block; aspect-ratio: 20 / 13; overflow: hidden; border-radius: 14px; }
.ob-next__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.ob-next__copy small { display: block; font: 600 11px Fredoka, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #a98d3f; }
.ob-next__copy strong { display: block; margin-top: 3px; font: 500 21px/1.1 Fredoka, sans-serif; }
.ob-next__go { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 14px; background: linear-gradient(#fcd257, var(--ob-yellow)); color: #5b4400; font: 600 14.5px Fredoka, sans-serif; box-shadow: 0 4px 0 #d09b12; }
@media (max-width: 620px) {
  .ob-next { grid-template-columns: 84px minmax(0, 1fr); }
  .ob-next__go { grid-column: 1 / -1; justify-content: center; padding: 14px; }
}

/* ------------------------------------------------------------- movimento */
@media (prefers-reduced-motion: no-preference) {
  .ob-stage__sun { animation: ob-sun 7s ease-in-out infinite; }
  @keyframes ob-sun { 50% { transform: translateY(-9px) scale(1.04); } }
  .ob-stage { animation: ob-rise .55s var(--ob-ease) both; }
  .ob-card { animation: ob-rise .55s var(--ob-ease) .07s both; }
  .ob-fan img { animation: ob-fan .7s var(--ob-spring) both; animation-delay: calc(.1s + var(--i) * .1s); }
  @keyframes ob-fan { from { opacity: 0; transform: rotate(0) translateX(0) translateY(30px); } }
  .ob-voice[data-state="recording"] .ob-voice__ring { animation: ob-voice-pulse 1.3s ease-out infinite; }
  .ob-voice[data-state="sending"] .ob-voice__ring { animation: ob-voice-spin .8s linear infinite; }
  .ob-voice[data-state="idle"] .ob-voice__mic { animation: ob-voice-invite 2.6s ease-in-out infinite; }
  .ob-confetti i { animation: ob-confetti var(--s) cubic-bezier(.2,.7,.4,1) var(--t) both; }
  @keyframes ob-confetti {
    0% { opacity: 1; transform: translateY(-10px) rotate(0); }
    100% { opacity: 0; transform: translateY(340px) translateX(calc((var(--i) - 13) * 4px)) rotate(var(--r)); }
  }
}
@keyframes ob-voice-pulse { from { opacity: .8; transform: scale(.94); } to { opacity: 0; transform: scale(1.35); } }
@keyframes ob-voice-spin { to { transform: rotate(360deg); } }
@keyframes ob-voice-invite { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .ob-panel, .ob-goal, .ob-scene-card, .ob-pace__opt, .ob-steps li, .ob-stop, .ob-chip, .ob-later li, .ob-pact, .ob-remind { animation: none !important; }
  .ob-route::before { animation: none; transform: none; }
  .ob-route li { transition: none; }
  .ob-month.is-on i.is-day { animation: none; }
}

/* -------------------------------------------------------------- responsivo */
@media (max-width: 940px) {
  .ob-scene { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-content: start; }
  .ob-stage { align-self: start; height: 140px; }
  .ob-stage {
    grid-template-columns: 116px minmax(0, 1fr);
    place-items: end start;
    min-height: 140px;
    padding: 12px 16px 0 6px;
    border-width: 5px;
    border-radius: 76px 28px 28px 76px;
  }
  .ob-stage .guide-tato { width: 110px; margin-bottom: 0; }
  .ob-stage__sun { width: 52px; height: 52px; top: 14px; left: auto; right: 74px; margin-left: 0; box-shadow: 0 0 0 10px #ffe9a83d; }
  .ob-stage__hill--front { bottom: -30%; height: 62%; left: -24%; width: 88%; }
  .ob-stage__hill--back { bottom: -16%; height: 46%; left: -20%; width: 84%; }
  .ob-stage__say { position: static; align-self: center; margin-bottom: 14px; text-align: left; font-size: 14.5px; }
  .ob-stage__ring { top: 10px; right: 10px; bottom: auto; width: 46px; height: 46px; }
  .ob-stage__ring b { font-size: 11px; }
  .ob-card { align-content: start; }
}
@media (max-width: 620px) {
  .ob-bar { grid-template-columns: auto minmax(0, 1fr); }
  .ob-dots { justify-content: flex-end; }
  .ob-dots i { width: 18px; }
  .ob-dots i.is-current { width: 32px; }
  .ob-goals { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ob-goal { grid-template-columns: 116px minmax(0, 1fr); align-items: center; padding: 0; }
  .ob-goal__art { height: 100%; aspect-ratio: auto; min-height: 84px; margin: 0; }
  .ob-goal__copy { padding: 12px 38px 12px 4px; }
  .ob-scene-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .ob-scene-card small { display: none; }
  .ob-foot { flex-direction: column-reverse; align-items: stretch; }
  .ob-foot .ob-cta, .ob-cta { width: 100%; justify-content: center; }
  .ob-foot--reveal { align-items: stretch; }
  .ob-foot--reveal .ob-note { text-align: center; }
  .ob-fan { height: 108px; margin-bottom: 18px; }
  .ob-fan img { width: 138px; }
  .ob-route { gap: 8px; }
  .ob-route b { font-size: 12px; }
  .ob-voice { padding: 16px; }
  .ob-level { padding: 18px 14px 14px; }
  .ob-month { width: min(100%, 260px); gap: 5px; }
  .ob-pace { gap: 14px; }
}
@media (max-width: 400px) {
  .ob-stage { grid-template-columns: 92px minmax(0, 1fr); height: 124px; min-height: 0; }
  .ob-stage .guide-tato { width: 88px; }
  .ob-stage__sun { display: none; }
  .ob-scene-card strong { font-size: 14px; }
  .ob-pace__opt strong { font-size: 16px; }
  .ob-month { gap: 4px; padding: 10px; }
}

/* ==========================================================================
   Ecos do onboarding dentro do app.
   ========================================================================== */
.home-feature__place { display: block; margin-top: 6px; font: 500 17px Fredoka, sans-serif; color: #f0c04a; }
/* Tato Pro — a warm, quiet call room, inside the existing app shell. */
.tato-call { --call-ink:#254737; --call-muted:#687669; --call-paper:#fffdf5; --call-line:#dce2cf; color:var(--call-ink); max-width:1320px; margin:0 auto; }
.tato-call * { box-sizing:border-box; }
.tato-call :where(h1,h2,p) { margin:0; }
.tato-call button { font-family:inherit; cursor:pointer; }
.tato-call button:disabled { cursor:default; opacity:.45; }
.tato-call :focus-visible { outline:3px solid #408263; outline-offset:4px; }
.tato-call [hidden] { display:none!important; }
.tato-call__head { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:5px 0 28px; }
.tato-call__eyebrow { display:block; font:700 9px/1.5 'DM Sans',sans-serif; letter-spacing:1.65px; color:#687b64; }
.tato-call__eyebrow b { background:#294d3a; color:#f6d578; border-radius:5px; font-size:9px; padding:4px 6px; margin-left:7px; letter-spacing:1px; }
.tato-call__head h1 { font:500 clamp(32px,3.2vw,46px)/1.15 'Fredoka',sans-serif; letter-spacing:-1.4px; margin:11px 0 8px; }
.tato-call__head p { color:var(--call-muted); font-size:13px; }

.tato-call__layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:26px; align-items:start; }
.tato-call__main { min-width:0; }
.tato-call__stage { position:relative; min-height:480px; height:clamp(470px,42vw,600px); border:1px solid #acb9a2; border-radius:26px; overflow:hidden; isolation:isolate; background:#d9debb; box-shadow:0 6px 0 #d5ddc7,0 24px 50px -32px #3b573959; }





































.tato-call__stage-top { position:absolute; z-index:8; top:18px; left:18px; right:18px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.tato-call__presence { display:flex; align-items:center; gap:7px; border-radius:20px; background:#fffbeddb; padding:8px 10px; color:#4e6651; font-size:10px; }
.tato-call__presence i { width:6px; height:6px; border-radius:50%; background:#72a375; }
.tato-call__time { color:#526548; font:600 11px 'DM Sans',sans-serif; background:#fffbedbb; padding:8px 10px; border-radius:20px; font-variant-numeric:tabular-nums; }
.tato-call__name { position:absolute; z-index:8; left:20px; bottom:17px; display:grid; gap:4px; }
.tato-call__name>span { display:flex; align-items:center; gap:6px; font:500 17px 'Fredoka',sans-serif; }
.tato-call__name small { color:#58714e; font-size:9px; }
.tato-call__name svg { background:#335e45; color:#fff6d1; padding:2px; border-radius:50%; }
.tato-call__self { position:absolute; z-index:8; width:108px; height:124px; bottom:17px; right:17px; border-radius:16px; background:#3b5345; border:3px solid #f8f3dd; box-shadow:0 5px 18px -6px #34412c77; overflow:hidden; }
.tato-call__self [data-call-avatar] { display:grid; place-items:center; width:100%; height:100%; padding:12px 10px 24px; background:radial-gradient(ellipse at 50% 110%,#829a72,#3e5949); }
.call-avatar { display:block; width:71px; height:71px; background:#f5d590; border-radius:50%; overflow:hidden; border:2px solid #fff1cb; }
.call-avatar svg { width:100%; height:100%; }
.tato-call__self>span { position:absolute; bottom:7px; left:9px; right:9px; color:#fcf8e5; font-size:9px; display:flex; justify-content:space-between; align-items:center; overflow:hidden; white-space:nowrap; }
.tato-call__self i { width:5px; height:5px; background:#b9c8a3; border-radius:50%; }
.tato-call__self i.is-speaking { background:#f4d66f; box-shadow:0 0 0 3px #f4d66f30; }
.tato-call__self video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
.tato-call__caption { position:absolute; z-index:9; left:18px; right:142px; bottom:65px; padding:12px 15px; border-radius:13px; background:#233e34ed; color:#fff8e1; box-shadow:0 5px 18px #2c482421; max-height:155px; overflow:auto; }
.tato-call__caption>span { font-size:7px; letter-spacing:1.8px; color:#e6ca79; }
.tato-call__caption p { font-size:14px; line-height:1.55; margin-top:4px; overflow-wrap:anywhere; }
.tato-call__bar { margin:20px 0 0; padding:0 12px; }
.tato-call__controls { display:flex; gap:14px; justify-content:center; }
.tato-call__controls button { display:grid; justify-items:center; gap:7px; padding:0; min-width:62px; background:none; border:0; color:#55705a; font-size:9px; }
.tato-call__controls button>svg { box-sizing:content-box; padding:13px; background:#fffdf4; border:1px solid #dbe1cd; border-radius:17px; transition:transform .18s,background .18s; }
.tato-call__controls button:hover:not(:disabled)>svg { transform:translateY(-3px); background:#ecf0e0; }
.tato-call__controls button[aria-pressed=true]>svg { background:#dce7ce; border-color:#96b18b; }
.tato-call__controls .tato-call__hangup { color:#ad6751; }
.tato-call__controls .tato-call__hangup>svg { background:#c66d53; color:#fff4db; border-color:#bd614a; padding-inline:22px; }
.tato-call__controls .tato-call__hangup:hover:not(:disabled)>svg { background:#b15d46; }
.tato-call__device-note { color:#7a8571; font-size:10px; text-align:center; margin-top:16px; }


.tato-call__side { border:1px solid #dce2cf; background:#fffdf4; border-radius:23px; padding:25px 23px 20px; min-width:0; }
.tato-call__side h2 { font:500 30px/1.12 'Fredoka',sans-serif; letter-spacing:-.7px; margin:12px 0; }
.tato-call__side [data-call-lobby]>p,.tato-call__ended>p { color:#7b826f; font-size:12px; line-height:1.7; }
.tato-call__topics { display:grid; grid-template-columns:1fr; gap:7px; margin:22px 0; }
.tato-call__topics button { display:flex; align-items:center; gap:10px; min-height:44px; padding:10px 12px; background:transparent; border:1px solid #e2e5d6; color:#667660; border-radius:11px; text-align:left; font-size:12px; }
.tato-call__topics button>svg:last-child { margin-left:auto; opacity:0; }
.tato-call__topics button[aria-pressed=true] { background:#edf1df; border-color:#8da87c; color:#2d593e; }
.tato-call__topics button[aria-pressed=true]>svg:last-child { opacity:1; }
.tato-call__topics button:hover { border-color:#a2b391; }
.tato-call__starter { border-left:2px solid #dabd72; padding-left:12px; margin:0 0 24px; }
.tato-call__starter>span { color:#9b916e; font-size:7px; font-weight:700; letter-spacing:1.25px; }
.tato-call__starter>p { font:500 17px/1.5 'Fredoka',sans-serif; color:#53724f; margin-top:6px; }
.tato-call__join { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; min-height:49px; padding:13px 14px; border-radius:13px; border:1px solid #284b38; background:#2c523d; color:#fff7da; font-size:12px; box-shadow:0 4px 0 #1b3729; transition:transform .2s,background .2s; }
.tato-call__join>svg:last-child { margin-left:auto; }
.tato-call__join:hover:not(:disabled) { background:#37644a; transform:translateY(-2px); }
.tato-call__join-note { display:block; margin-top:12px; text-align:center; color:#7e8875; font-size:9px; }
.tato-call__status { color:#74806d; font-size:11px; line-height:1.6; margin-top:15px; }
.tato-call__status:empty { display:none; }
.tato-call__error { color:#8d4d3b; background:#fbebe0; border:1px solid #edd4c0; border-radius:10px; padding:12px; font-size:11px; line-height:1.6; margin:12px 0; }
.tato-call__composer { border-top:1px solid #e8e8d9; margin-top:22px; padding-top:16px; }
.tato-call__composer label { font-size:10px; color:#7f8876; display:block; margin-bottom:8px; }
.tato-call__composer>div { display:flex; align-items:center; border:1px solid #dce2cd; border-radius:12px; overflow:hidden; background:#faf9ef; }
.tato-call__composer input { min-width:0; width:100%; font:400 11px 'DM Sans',sans-serif; color:#36533c; background:none; border:0; padding:14px 10px; }
.tato-call__composer button { min-width:42px; min-height:44px; display:grid; place-items:center; border:0; background:none; color:#466b48; }
.tato-call__privacy { color:#8c927f; font-size:9px; line-height:1.6; margin-top:14px!important; }
.tato-call__conversation-head { display:flex; align-items:center; justify-content:space-between; }
.tato-call__conversation-head h2 { font-size:25px; }
.tato-call__conversation-head .tato-call__eyebrow { font-size:7px; letter-spacing:1.1px; }
.tato-call__messages { min-height:260px; max-height:360px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#c5d2b7 transparent; padding-right:5px; }
.tato-call__message { padding:13px 14px; border-radius:3px 13px 13px 13px; background:#eef2e2; margin:12px 9px 12px 0; }
.tato-call__message.is-you { background:#f7edcf; margin:12px 0 12px 14px; border-radius:13px 3px 13px 13px; }
.tato-call__message>span { font-size:7px; font-weight:700; letter-spacing:1.4px; color:#6f8160; }
.tato-call__message p { color:#435d42; font-size:12px; line-height:1.7; margin-top:6px; overflow-wrap:anywhere; }
.tato-call__send-voice { display:flex; align-items:center; justify-content:center; gap:7px; min-height:42px; width:100%; border:1px solid #c8d4b8; border-radius:11px; font-size:11px; color:#375c41; background:#f4f6e9; }
.tato-call__equalizer { display:flex; align-items:center; gap:3px; height:25px; color:#7d9c69; }
.tato-call__equalizer i { display:block; width:3px; height:10px; background:currentColor; border-radius:3px; }
.tato-call__equalizer i:nth-child(2n) { height:20px; }
.tato-call__ended-mark,.tato-call__lock { width:50px; height:50px; display:grid; place-items:center; background:#eef0db; color:#64805d; border-radius:17px; margin-bottom:24px; }
.tato-call__stats { display:flex; gap:24px; margin:28px 0; }
.tato-call__stats>div { display:grid; gap:5px; }
.tato-call__stats strong { font:500 29px 'Fredoka',sans-serif; }
.tato-call__stats span { font-size:10px; color:#78836d; }
.tato-call__ended [data-call-save-note] { margin:10px 0 24px; font-size:10px; }
.tato-call__save-retry { border:0; background:none; color:#557147; font-size:11px; text-decoration:underline; padding:14px 0; }
.tato-call__unlock h2 { font:500 43px/1.1 'Fredoka',sans-serif; letter-spacing:-1.2px; margin:17px 0; }
.tato-call__unlock h2 em { font-style:normal; color:#9b7044; }
.tato-call__unlock>p { color:#75806d; font-size:12px; line-height:1.75; }
.tato-call__unlock ul { list-style:none; padding:0; margin:25px 0 30px; display:grid; gap:13px; font-size:11px; color:#58704e; }
.tato-call__unlock li { display:flex; gap:8px; align-items:center; }
.tato-call__unlock>small { display:block; text-align:center; margin-top:15px; font-size:9px; color:#818976; line-height:1.5; }
.call-nav>svg { flex-shrink:0; }
.call-nav span { display:flex; align-items:center; gap:8px; }
.call-nav b { font:700 7px 'DM Sans',sans-serif; letter-spacing:.5px; color:#54714f; background:#e8edd8; border-radius:4px; padding:3px 4px; }
.tato-call[data-voice-phase=listening] .tato-call__self { box-shadow:0 0 0 calc(var(--call-level,0)*5px) #9cb67690; }
.tato-call[data-voice-phase=processing] .tato-call__presence i { background:#d7ae53; }
.tato-call[data-voice-phase=error] .tato-call__presence i { background:#c57a5b; }
@media(prefers-reduced-motion:no-preference) {
 
 .tato-call[data-voice-phase=speaking] .tato-call__equalizer i { animation:callEqualizer .7s ease-in-out infinite alternate; }
 .tato-call[data-voice-phase=speaking] .tato-call__equalizer i:nth-child(2n) { animation-delay:-.4s; }
}

@keyframes callEqualizer { to { transform:scaleY(.45); } }
@media(max-width:1250px) { .tato-call__layout { grid-template-columns:minmax(0,1fr) 270px; gap:19px; }.tato-call__side { padding:22px 19px; } }
@media(max-width:1000px) { .tato-call__layout { grid-template-columns:minmax(0,1fr) 255px; gap:15px; }.tato-call__stage { min-height:450px; height:490px; }.tato-call__controls { gap:7px; }.tato-call__controls button { min-width:50px; }.tato-call__controls button>svg { padding:11px; }.tato-call__controls .tato-call__hangup>svg { padding-inline:15px; } }
@media(max-width:760px) {
 .tato-call__head { margin:2px 0 20px; }.tato-call__head h1 { font-size:33px; }.tato-call__head p { font-size:12px; max-width:260px; line-height:1.7; }.tato-call__layout { grid-template-columns:1fr; gap:24px; }.tato-call__stage { height:430px; min-height:0; border-radius:22px; }.tato-call__self { width:81px; height:98px; right:12px; bottom:12px; border-radius:13px; }.call-avatar { width:54px; height:54px; }.tato-call__self [data-call-avatar] { padding:9px 8px 21px; }.tato-call__stage-top { top:12px; left:12px; right:12px; }.tato-call__presence { font-size:9px; padding:7px 9px; }.tato-call__name { left:15px; bottom:13px; }.tato-call__name small { font-size:8px; }.tato-call__name>span { font-size:15px; }.tato-call__caption { left:12px; right:105px; bottom:65px; padding:10px 12px; }.tato-call__caption p { font-size:12px; }.tato-call__side { padding:25px 22px; }.tato-call__side h2 br { display:none; }.tato-call__side h2 { font-size:28px; }.tato-call__topics { grid-template-columns:1fr 1fr; gap:8px; }.tato-call__topics button { font-size:11px; gap:6px; padding:9px; }.tato-call__topics button>svg:last-child { display:none; }.tato-call__starter { margin-bottom:20px; }.tato-call__unlock h2 { font-size:37px; }.tato-call__unlock h2 br { display:inline; }.tato-call__messages { min-height:150px; max-height:300px; }.tato-call__controls { gap:8px; }.tato-call__controls button { font-size:8px; min-width:46px; }.tato-call__controls button>svg { padding:11px; }.tato-call__controls .tato-call__hangup>svg { padding-inline:16px; }.tato-call__bar { padding:0; }
 .side-nav { grid-template-columns:repeat(6,minmax(0,1fr))!important; }
 .side-nav button { min-width:0!important; padding-inline:7px!important; font-size:10px!important; }
 .side-nav .call-nav>svg { width:14px; height:14px; }
 .side-nav .call-nav span { gap:3px; }
 .side-nav .call-nav b { font-size:6px; padding:2px 3px; }
}
@media(max-width:360px) { .tato-call__head h1 { font-size:29px; }.tato-call__stage { height:380px; }.tato-call__controls { gap:5px; }.tato-call__controls button { min-width:41px; }.tato-call__controls button>svg { padding:10px; }.tato-call__controls .tato-call__hangup>svg { padding-inline:12px; }.side-nav .call-nav b { display:none; } }
@media(prefers-reduced-motion:reduce) { .tato-call *, .tato-call *::before,.tato-call *::after { animation:none!important; transition:none!important; } }
.city-access-notice { display:flex; align-items:center; gap:24px; margin:25px 0 0; padding:22px 25px; border:1px solid #d6dfc6; border-radius:20px; background:#fffaf0; color:#38523b; }
.city-access-notice span { font:700 8px 'DM Sans',sans-serif; letter-spacing:1.5px; color:#877b55; }
.city-access-notice h2 { font:500 24px 'Fredoka',sans-serif; margin:7px 0; }
.city-access-notice p { margin:0; color:#77806a; font-size:12px; line-height:1.6; }
.city-access-notice button { flex-shrink:0; margin-left:auto; border:1px solid #30503a; color:#fff5d6; background:#365a40; border-radius:12px; min-height:46px; padding:12px 17px; font-size:11px; cursor:pointer; }
.place-dialog .place-upgrade-note { color:#7b6846; font-size:12px; line-height:1.7; background:#f7efd7; border-radius:12px; padding:12px 14px; }
@media(max-width:760px) { .city-access-notice { flex-direction:column; align-items:stretch; gap:16px; padding:22px; }.city-access-notice button { margin:0; }.city-access-notice h2 { font-size:24px; } }

/* Locked free call: same golden padlock as locked cities, readable sizes. */
.tato-call__unlock .tato-call__lock { width:64px; height:64px; margin-bottom:18px; border-radius:50%; color:#24493a; background:radial-gradient(circle at 32% 26%,#ffe791,#f8c637 54%,#df9f2d); box-shadow:0 12px 24px -12px #a8711acc, inset 0 -4px 0 #cf9425, inset 0 3px 0 #fff4c7; }
.tato-call__unlock .tato-call__lock svg { width:28px; height:28px; }
.tato-call__unlock .tato-call__eyebrow { font-size:10px; letter-spacing:1.6px; color:#8a6d1f; }
.tato-call__unlock h2 { margin:12px 0 14px; }
.tato-call__unlock>p { font-size:14px; line-height:1.6; color:#5f6f58; }
.tato-call__unlock ul { margin:20px 0 24px; gap:11px; font-size:13.5px; color:#3f5a3f; }
.tato-call__unlock li svg { flex-shrink:0; color:#4f7f46; }
.tato-call__unlock .tato-call__join { min-height:54px; border-radius:17px; font-size:15px; font-weight:700; color:#1c3a2b; background:linear-gradient(180deg,#ffdc6c,#f8c637); border:0; box-shadow:0 5px 0 #c9971f,0 16px 28px -16px #9c6b17; transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s; }
.tato-call__unlock .tato-call__join:hover { transform:translateY(-2px); box-shadow:0 7px 0 #c9971f,0 18px 30px -16px #9c6b17; }
.tato-call__unlock .tato-call__join:active { transform:translateY(3px); box-shadow:0 2px 0 #c9971f; }
.tato-call__unlock>small { font-size:11.5px; line-height:1.55; color:#6c7563; }
@media(prefers-reduced-motion:reduce) { .tato-call__unlock .tato-call__join { transition:none; } }

/* Papo livre, second pass: Tato's illustrated living room, a floating call dock
   and a chat that reads like a conversation. */
.tato-call__head { margin:0 0 20px; }
.tato-call__eyebrow { font-size:11px; letter-spacing:1.5px; color:#5d7458; }
.tato-call__eyebrow b { font-size:10px; }
.tato-call__head h1 { font-size:clamp(30px,2.6vw,40px); line-height:1.1; letter-spacing:-1px; margin:8px 0 6px; }
.tato-call__head p { font-size:15px; line-height:1.5; }
.tato-call__layout { grid-template-columns:minmax(0,1fr) 360px; gap:24px; }

/* Stage: the practice home scene with Tato on the sofa rug. */
.tato-call__stage { height:clamp(460px,calc(100svh - 250px),640px); min-height:420px; border:0; border-radius:28px; background:#efe7d4; box-shadow:0 30px 60px -40px #14241c8c; }
.tato-room { position:absolute; inset:0; overflow:hidden; background:#efe7d4; }
.tato-room__scene { position:absolute; inset:0; }
.tato-room__scene .bt-scene__layer { position:absolute; inset:0; width:100%; height:100%; }
.tato-room__tato { position:absolute; z-index:3; left:50%; bottom:6%; width:clamp(210px,24vw,330px); aspect-ratio:200/220; transform:translateX(-50%); filter:drop-shadow(0 20px 16px #3c280a4d); }
.tato-room__tato>.guide-tato { position:static; display:block; width:100%; height:100%; max-width:none; }
.tato-room__glow { position:absolute; inset:0; z-index:5; pointer-events:none; background:radial-gradient(60% 50% at 24% 8%,#fff4cd73,transparent 62%); mix-blend-mode:soft-light; box-shadow:inset 0 -90px 90px -70px #14241c80; }
.tato-call__stage-top { top:16px; left:16px; right:16px; }
.tato-call__presence,.tato-call__time { min-height:34px; padding:8px 13px; font-size:12.5px; font-weight:600; color:#2f4d3b; background:#fffdf5e6; box-shadow:0 6px 16px -10px #14241c66; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.tato-call__presence i { width:8px; height:8px; box-shadow:0 0 0 3px #72a37533; }
.tato-call__name { left:18px; bottom:22px; padding:9px 14px 10px; border-radius:16px; background:#fffdf5e6; box-shadow:0 6px 16px -10px #14241c66; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.tato-call__name>span { font-size:17px; color:#24493a; }
.tato-call__name small { font-size:11.5px; color:#5f725a; }
.tato-call__self { width:122px; height:146px; right:18px; bottom:22px; border-radius:20px; border:3px solid #fffdf5; box-shadow:0 14px 30px -14px #14241c99; }
.call-avatar { width:78px; height:78px; }
.tato-call__self>span { font-size:12px; font-weight:600; bottom:9px; left:11px; right:11px; }
.tato-call__self i { width:8px; height:8px; }
.tato-call__caption { left:50%; right:auto; bottom:92px; width:min(calc(100% - 300px),560px); min-width:260px; transform:translateX(-50%); padding:13px 17px 15px; border-radius:18px; background:#1f3a2fee; box-shadow:0 18px 36px -18px #0b1a12cc; }
.tato-call__caption>span { font-size:10px; font-weight:700; }
.tato-call__caption p { font-size:16px; line-height:1.5; }

/* Call controls: one floating dock hanging off the bottom of the stage. */
.tato-call__bar { position:relative; z-index:10; margin:-34px auto 0; padding:0; width:max-content; max-width:100%; }
.tato-call__controls { gap:6px; padding:7px; border:1px solid #ffffffd9; border-radius:999px; background:#fffdf5f2; box-shadow:0 18px 40px -20px #14241c99; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.tato-call__controls button { position:relative; min-width:0; width:52px; height:52px; place-items:center; gap:0; border-radius:50%; color:#2f4d3b; }
.tato-call__controls button>svg { width:22px; height:22px; padding:0; border:0; border-radius:0; background:none; }
.tato-call__controls button::before { content:""; position:absolute; inset:0; border-radius:50%; background:#24493a0f; transition:background .2s,transform .2s cubic-bezier(.34,1.56,.64,1); }
.tato-call__controls button:hover:not(:disabled)::before { background:#24493a1f; transform:scale(1.06); }
.tato-call__controls button:hover:not(:disabled)>svg { transform:none; background:none; }
.tato-call__controls button[aria-pressed=true] { color:#fff9dd; }
.tato-call__controls button[aria-pressed=true]::before { background:#2c523d; }
.tato-call__controls button[aria-pressed=true]>svg { background:none; }
.tato-call__controls button>span { position:absolute; bottom:calc(100% + 10px); left:50%; transform:translate(-50%,4px); padding:6px 9px; border-radius:8px; background:#1f3a2f; color:#fff9e6; font-size:12px; font-weight:600; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s,transform .15s; }
.tato-call__controls button:is(:hover,:focus-visible)>span { opacity:1; transform:translate(-50%,0); }
.tato-call__controls .tato-call__hangup { width:72px; border-radius:999px; color:#fff6e8; }
.tato-call__controls .tato-call__hangup::before { border-radius:999px; background:#d0543f; }
.tato-call__controls .tato-call__hangup:hover:not(:disabled)::before { background:#b8432f; }
.tato-call__controls .tato-call__hangup>svg,.tato-call__controls .tato-call__hangup:hover:not(:disabled)>svg { padding:0; background:none; border:0; }
.tato-call__controls button>svg { position:relative; }
.tato-call__controls button:disabled { opacity:.4; }
.tato-call__device-note { margin-top:12px; font-size:12.5px; color:#6c7766; }

/* Side panel: readable lobby, chat bubbles and a warm ending. */
.tato-call__side { padding:26px 24px 22px; border-radius:26px; border-color:#e2e6d6; box-shadow:0 24px 50px -40px #14241c66; }
.tato-call__side h2 { font-size:30px; line-height:1.1; margin:10px 0 10px; }
.tato-call__side [data-call-lobby]>p,.tato-call__ended>p { font-size:14.5px; line-height:1.55; color:#5f6f58; }
.tato-call__topics { grid-template-columns:1fr 1fr; gap:8px; margin:20px 0 18px; }
.tato-call__topics button { justify-content:flex-start; gap:8px; min-height:48px; padding:10px 12px; border-radius:14px; border-color:#dfe4d2; background:#fffdf7; color:#3f5a42; font-size:14px; font-weight:600; transition:border-color .2s,background .2s,transform .2s; }
.tato-call__topics button>svg:first-child { flex-shrink:0; color:#6c8a5e; }
.tato-call__topics button>svg:last-child { display:none; }
.tato-call__topics button:hover { transform:translateY(-1px); border-color:#9fb58f; }
.tato-call__topics button[aria-pressed=true] { background:#2c523d; border-color:#2c523d; color:#fff9dd; }
.tato-call__topics button[aria-pressed=true]>svg:first-child { color:#f8c637; }
.tato-call__starter { margin:0 0 20px; padding:14px 16px 15px; border:0; border-radius:16px; background:#fff4d2; }
.tato-call__starter>span { font-size:10.5px; letter-spacing:1.3px; color:#8a6d1f; }
.tato-call__starter>p { font-size:19px; line-height:1.4; color:#3c5a3f; margin-top:5px; }
.tato-call__join { min-height:56px; border:0; border-radius:17px; color:#1c3a2b; background:linear-gradient(180deg,#ffdc6c,#f8c637); box-shadow:0 5px 0 #c9971f,0 16px 28px -16px #9c6b17; font-size:15.5px; font-weight:700; transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s; }
.tato-call__join:hover:not(:disabled) { background:linear-gradient(180deg,#ffe07a,#f8c637); transform:translateY(-2px); box-shadow:0 7px 0 #c9971f,0 18px 30px -16px #9c6b17; }
.tato-call__join:active:not(:disabled) { transform:translateY(3px); box-shadow:0 2px 0 #c9971f; }
.tato-call__join:focus-visible { outline-color:#24493a; }
.tato-call__join-note { margin-top:12px; font-size:12.5px; line-height:1.5; color:#6c7766; }
.tato-call__conversation-head { padding-bottom:12px; border-bottom:1px solid #eceedf; }
.tato-call__conversation-head h2 { font-size:26px; margin:6px 0 0; }
.tato-call__conversation-head .tato-call__eyebrow { font-size:10.5px; letter-spacing:1.3px; }
.tato-call__messages { display:flex; flex-direction:column; min-height:280px; max-height:min(420px,calc(100svh - 470px)); padding:14px 4px 6px 0; }
.tato-call__message { max-width:88%; margin:0 0 10px; padding:11px 14px 12px; border-radius:6px 18px 18px 18px; background:#edf2e3; align-self:flex-start; }
.tato-call__message.is-you { margin:0 0 10px; border-radius:18px 6px 18px 18px; background:#fff0c4; align-self:flex-end; }
.tato-call__message>span { font-size:10.5px; letter-spacing:1.2px; color:#5d7458; }
.tato-call__message.is-you>span { color:#8a6d1f; }
.tato-call__message p { font-size:15px; line-height:1.5; color:#2f4d3b; margin-top:3px; }
.tato-call__send-voice { min-height:50px; border-radius:15px; font-size:14px; font-weight:600; background:#2c523d; border-color:#2c523d; color:#fff9dd; }
.tato-call__equalizer { color:#4f7f46; }
.tato-call__status { font-size:13.5px; color:#5f6f58; }
.tato-call__error { font-size:13.5px; }
.tato-call__composer { margin-top:18px; padding-top:16px; }
.tato-call__composer label { font-size:13px; font-weight:600; color:#4f6450; }
.tato-call__composer>div { border-radius:16px; background:#fffdf7; transition:border-color .2s,box-shadow .2s; }
.tato-call__composer>div:focus-within { border-color:#6e9460; box-shadow:0 0 0 4px #6e946026; }
.tato-call__composer input { font-size:15px; padding:14px 12px 14px 15px; }
.tato-call__composer input:focus { outline:none; }
.tato-call__composer button { min-width:50px; min-height:50px; color:#2c523d; }
.tato-call__privacy { font-size:11.5px; line-height:1.55; color:#7b8475; margin-top:12px!important; }
.tato-call__ended-mark { width:64px; height:64px; margin-bottom:16px; border-radius:50%; color:#1c3a2b; background:radial-gradient(circle at 32% 26%,#ffe791,#f8c637 54%,#df9f2d); box-shadow:0 12px 24px -12px #a8711acc, inset 0 -4px 0 #cf9425, inset 0 3px 0 #fff4c7; }
.tato-call__stats { gap:10px; margin:22px 0 16px; }
.tato-call__stats>div { flex:1; gap:2px; padding:14px 14px 13px; border-radius:16px; background:#f3f5ea; }
.tato-call__stats strong { font-size:30px; line-height:1.1; font-variant-numeric:tabular-nums; }
.tato-call__stats span { font-size:12.5px; color:#5f6f58; }
.tato-call__ended [data-call-save-note] { margin:0 0 18px; font-size:13px; }

@media(max-width:1250px) { .tato-call__layout { grid-template-columns:minmax(0,1fr) 320px; } .tato-call__caption { width:calc(100% - 290px); } }
@media(max-width:1000px) { .tato-call__layout { grid-template-columns:minmax(0,1fr) 290px; } .tato-call__topics { grid-template-columns:1fr; } .tato-call__self { width:96px; height:118px; } .call-avatar { width:62px; height:62px; } .tato-call__caption { left:18px; right:130px; width:auto; min-width:0; transform:none; } }
@media(max-width:760px) {
  .tato-call__head { margin-bottom:16px; }
  .tato-call__head h1 { font-size:30px; }
  .tato-call__head p { font-size:14px; max-width:none; }
  .tato-call__layout { grid-template-columns:1fr; gap:26px; }
  .tato-call__stage { height:min(460px,72svh); min-height:360px; border-radius:24px; }
  .tato-room__tato { width:min(250px,64%); bottom:9%; }
  .tato-call__stage-top { top:12px; left:12px; right:12px; }
  .tato-call__presence,.tato-call__time { font-size:12px; min-height:32px; padding:7px 11px; }
  .tato-call__name { left:12px; bottom:40px; padding:7px 11px 8px; }
  .tato-call__name>span { font-size:15px; }
  .tato-call__name small { font-size:11px; }
  .tato-call__self { width:84px; height:104px; right:12px; bottom:40px; border-radius:16px; }
  .call-avatar { width:54px; height:54px; }
  .tato-call__self>span { font-size:11px; bottom:6px; left:8px; right:8px; }
  .tato-call__caption { left:12px; right:12px; bottom:152px; padding:11px 13px 12px; }
  .tato-call__caption p { font-size:14.5px; }
  .tato-call__bar { margin-top:-30px; }
  .tato-call__controls { gap:3px; padding:6px; }
  .tato-call__controls button { width:48px; height:48px; }
  .tato-call__controls .tato-call__hangup { width:62px; }
  .tato-call__controls button>span { display:none; }
  .tato-call__side { padding:22px 18px 18px; }
  .tato-call__side h2 { font-size:27px; }
  .tato-call__topics { grid-template-columns:1fr 1fr; }
  .tato-call__topics button { font-size:13.5px; padding:9px 10px; }
  .tato-call__messages { min-height:170px; max-height:340px; }
}
@media(max-width:360px) {
  .tato-call__head h1 { font-size:26px; }
  .tato-call__stage { min-height:330px; }
  .tato-call__controls button { width:44px; height:44px; }
  .tato-call__controls .tato-call__hangup { width:54px; }
  .tato-call__topics { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) { .tato-call__controls button::before,.tato-call__topics button,.tato-call__join,.tato-call__controls button>span { transition:none; } }

/* Fine tuning after review. */
.tato-room__tato { width:clamp(180px,19vw,270px); bottom:9%; }
.tato-call__controls button:disabled>span { display:none; }
.tato-call__messages { -webkit-mask-image:linear-gradient(transparent,#000 22px); mask-image:linear-gradient(transparent,#000 22px); }
@media(max-width:760px) {
  .tato-room__tato { width:min(210px,54%); }
  .tato-call__caption { top:58px; bottom:auto; }
}
/* A fala ainda está virando texto: o balão da pessoa aparece já, com reticências que respiram. */
.tato-call__message.is-pending p { opacity:.55; letter-spacing:.2em; animation:tato-call-pending 1.1s ease-in-out infinite; }
@keyframes tato-call-pending { 50% { opacity:.2; } }
@media (prefers-reduced-motion: reduce) { .tato-call__message.is-pending p { animation:none; } }
/* Conta, planos e a prática guiada: paywall no app, aba Ajustes, escada de
   ajuda e o retorno do Tato. Entra por último no bundle (dev-server.mjs), com
   a mesma linguagem do app: creme, tinta verde, amarelo Tato, Fredoka nos títulos. */

/* ---------------------------------------------------------------- paywall */
.pw-backdrop{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px;background:rgba(36,48,34,.42);backdrop-filter:blur(6px);overflow-y:auto;animation:pw-fade .18s ease-out}
.pw-dialog{position:relative;width:min(100%,980px);margin:auto;padding:30px 30px 22px;background:#fffdf6;border:1px solid #eadfbd;border-radius:30px;box-shadow:0 24px 80px rgba(29,57,37,.25);animation:pw-rise .32s cubic-bezier(.22,1,.36,1)}
.pw-close{position:absolute;top:16px;right:18px;width:40px;height:40px;border:0;border-radius:50%;background:#f3efe0;color:#3c4a3a;font-size:24px;line-height:1;cursor:pointer}
.pw-close:hover{background:#ece5cc}
.pw-head{display:flex;align-items:center;gap:18px;padding-right:40px;margin-bottom:22px}
.pw-head__tato{flex:0 0 92px;width:92px;height:104px}
.pw-head__tato svg{width:100%;height:100%}
.pw-eyebrow{display:block;margin-bottom:6px;font:800 11px/1 'DM Sans',sans-serif;letter-spacing:.14em;color:#8a6a0c}
.pw-head h2{margin:0 0 6px;font:600 clamp(24px,3vw,32px)/1.12 'Fredoka',sans-serif;color:#243e32}
.pw-head p{margin:0;max-width:60ch;color:#586b60;font-size:15px;line-height:1.6}
.pw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pw-plan{position:relative;display:flex;flex-direction:column;padding:22px 20px 18px;background:#fff;border:1.5px solid #e4e9dc;border-radius:22px;box-shadow:0 4px 0 #e4e9dc}
.pw-plan.is-highlight{border-color:#f0c02f;background:linear-gradient(180deg,#fff8dc,#fff 55%);box-shadow:0 5px 0 #e7b92c}
.pw-plan.is-current{border-style:dashed}
.pw-plan__badge{position:absolute;top:-11px;left:18px;padding:5px 10px;border-radius:999px;background:#f8c637;color:#3a2e0a;font:800 10.5px/1 'DM Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase}
.pw-plan__badge.is-current{background:#dff1d3;color:#3f6d2c}
.pw-plan h3{margin:4px 0 2px;font:600 22px/1.1 'Fredoka',sans-serif;color:#243e32}
.pw-plan__tagline{margin:0 0 10px;color:#6a7a6c;font-size:13.5px}
.pw-plan__price{margin:0 0 12px;font:600 30px/1 'Fredoka',sans-serif;color:#243e32}
.pw-plan__price small{margin-left:4px;font:500 13px 'DM Sans',sans-serif;color:#6a7a6c}
.pw-plan ul{flex:1;margin:0 0 16px;padding:0;list-style:none;display:grid;gap:8px}
.pw-plan li{display:flex;gap:8px;align-items:flex-start;color:#3a4a3e;font-size:14px;line-height:1.4}
.pw-plan li svg{flex:0 0 auto;margin-top:2px;color:#4c7f35}
.pw-plan__cta{min-height:46px;padding:12px 16px;border:2px solid #dde4d6;border-radius:14px;background:#fff;color:#2c3d31;font:700 14px 'DM Sans',sans-serif;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
.pw-plan__cta:hover:not(:disabled){transform:translateY(-1px)}
.pw-plan__cta.is-primary{border-color:#e4b936;background:#f8c637;color:#2f2608;box-shadow:0 4px 0 #cf9f22}
.pw-plan__cta.is-current{background:#f3f6ef;color:#6a7a6c;cursor:default}
.pw-plan__cta.is-quiet{border:0;background:none;color:#6a7a6c;text-decoration:underline;text-underline-offset:3px;min-height:auto}
.pw-note{margin:18px 0 6px;text-align:center;color:#6a7a6c;font-size:13px}
.pw-note a{color:#4b7257}
.pw-later{display:block;margin:0 auto;padding:8px 12px;border:0;background:none;color:#4b7257;font:700 14px 'DM Sans',sans-serif;cursor:pointer}
@keyframes pw-fade{from{opacity:0}}
@keyframes pw-rise{from{opacity:0;transform:translateY(18px) scale(.98)}}
@media(max-width:820px){.pw-grid{grid-template-columns:1fr}.pw-dialog{padding:24px 18px 16px;border-radius:24px}.pw-head{align-items:flex-start}.pw-head__tato{flex-basis:64px;width:64px;height:74px}.pw-backdrop{place-items:start center;padding:12px}}
@media(prefers-reduced-motion:reduce){.pw-backdrop,.pw-dialog{animation:none}}

/* ------------------------------------------------- convites de plano no app */
.side-plan{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 8px;margin:14px 0 0;padding:12px 14px;text-align:left;border:1.5px solid #efd27a;border-radius:16px;background:linear-gradient(135deg,#fff6d6,#fffdf4);color:#2f3b2c;cursor:pointer;transition:transform .2s,box-shadow .2s}
.side-plan:hover{transform:translateY(-1px);box-shadow:0 4px 0 #efd27a}
.side-plan small{grid-column:1;font:800 10px/1.2 'DM Sans',sans-serif;letter-spacing:.12em;color:#8a6a0c}
.side-plan strong{grid-column:1;font:600 14px/1.25 'DM Sans',sans-serif}
.side-plan span{grid-row:1/3;grid-column:2;font-size:18px}
@media(max-width:1100px){.side-plan{display:none}}
/* Hoje e Ajustes: ver app-home.css. */

/* --------------------------------------------- prática: ajuda e retorno */
.bt-coach-hint{margin:0 0 10px;padding:10px 14px;border-radius:14px;background:#fff6d6;border:1px solid #f0d77e;color:#4f3f0c;font-size:14px;line-height:1.5}
.bt-ladder{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.bt-ladder__step{display:grid;gap:2px;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid #e3e9dc}
.bt-ladder__step span{font:800 10.5px/1 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#8a6a0c}
.bt-ladder__step p{margin:0;color:#243e32;font-size:15px;line-height:1.45}
.bt-ladder__step.is-new{animation:ladder-in .35s cubic-bezier(.22,1,.36,1)}
@keyframes ladder-in{from{opacity:0;transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){.bt-ladder__step.is-new{animation:none}}
.correction-card .correction-words{font-style:italic}
.correction-notes{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.correction-notes li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;padding:10px 12px;border-radius:12px;background:#fffaf0;border:1px solid #efe3bd}
.correction-notes .note-from{color:#8a4b2d;text-decoration:line-through;text-decoration-color:rgba(138,75,45,.45)}
.correction-notes .note-arrow{color:#8a8f7f}
.correction-notes .note-to{color:#2f6b2a;font-weight:700}
.correction-notes small{flex-basis:100%;color:#5f6b5c;font-size:13px;line-height:1.45}
.result-best,.result-notes{margin:14px 0;padding:14px 16px;border-radius:18px;background:#f5f8ef;text-align:left}
.result-best span,.result-notes>span{display:block;margin-bottom:6px;font:800 11px/1 'DM Sans',sans-serif;letter-spacing:.12em;color:#4b7257}
.result-best p{margin:0;font:500 18px/1.4 'Fredoka',sans-serif;color:#243e32}
.practice-review li p b{color:#4b7257}
.lesson-achievements small{color:#8a6a0c;font-weight:600}

/* Foco programático em títulos (troca de tela) não precisa de moldura. */
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus{outline:none}
@media(max-width:760px){.side-nav .settings-nav .profile-nav-avatar{width:20px!important;height:20px!important;flex-basis:20px!important}}
.auth-consent{margin:12px 0 0;display:flex;align-items:flex-start;gap:8px;text-align:left;color:#596b5d;font-size:12.5px;line-height:1.5}.auth-consent input{width:18px;height:18px;margin:1px 0 0;flex:0 0 auto;accent-color:#4b7257}.auth-consent a{color:#385b43;font-weight:700}


/* Alvos de toque >= 44x44 (o desenho do botão continua o mesmo). */
.pw-close{width:44px;height:44px}
.pw-later{min-height:44px;min-width:44px}
/* Sequência: o chip no "Hoje", a chama viva e a tela que comemora. */

/* ---------------------------------------------------------------- chama */
.sk-flame{overflow:visible;display:block}
.sk-flame__body{transform-origin:60px 124px;transform:scale(var(--sk-scale,1))}
.sk-flame.is-animated .sk-layer{transform-box:fill-box;transform-origin:50% 100%}
.sk-flame.is-animated .sk-layer--outer{animation:sk-flicker 1.9s ease-in-out infinite}
.sk-flame.is-animated .sk-layer--mid{animation:sk-flicker 1.3s ease-in-out infinite reverse}
.sk-flame.is-animated .sk-layer--inner{animation:sk-flicker .9s ease-in-out infinite}
.sk-flame.is-animated .sk-spark{transform-box:fill-box;animation:sk-rise 2.4s ease-out infinite;animation-delay:calc(var(--i) * -.33s)}
.sk-flame.is-animated .sk-aura{transform-box:fill-box;transform-origin:center;animation:sk-pulse 2.8s ease-in-out infinite}
.sk-flame.is-animated .sk-aura--2{animation-delay:-1.4s}
.sk-flame.is-animated .sk-crown{transform-box:fill-box;transform-origin:center;animation:sk-bob 2.2s ease-in-out infinite}
.sk-flame--apagada.is-animated .sk-layer{animation-duration:4s}
@keyframes sk-flicker{0%,100%{transform:scale(1,1) skewX(0)}25%{transform:scale(.97,1.05) skewX(-2deg)}50%{transform:scale(1.03,.96) skewX(1.5deg)}75%{transform:scale(.98,1.03) skewX(-1deg)}}
@keyframes sk-rise{0%{opacity:0;transform:translate(0,0) scale(1)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),-46px) scale(.3)}}
@keyframes sk-pulse{0%,100%{opacity:.45;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
@keyframes sk-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* --------------------------------------------------------- chip no Hoje */
.app-head{align-items:center}
.streak-chip{display:inline-flex;align-items:center;gap:8px;margin-left:auto;margin-right:12px;padding:6px 14px 6px 8px;border:1.5px solid #f0d27c;border-radius:999px;background:linear-gradient(135deg,#fff8e1,#fff1cc);color:#3b2d0a;cursor:pointer;box-shadow:0 3px 0 #efd27a;transition:transform .2s,box-shadow .2s}
.streak-chip:hover{transform:translateY(-2px);box-shadow:0 5px 0 #efd27a}
.streak-chip__flame{width:30px;height:34px;display:grid;place-items:center}
.streak-chip__text{display:grid;text-align:left;line-height:1.1}
.streak-chip__text b{font:700 16px 'Fredoka',sans-serif}
.streak-chip__text small{font-size:11px;color:#7a6320}
.streak-chip.sk-chip--apagada{border-color:#ddd5c4;background:#f6f2e9;box-shadow:0 3px 0 #e2dac8;color:#5d574a}
.streak-chip.sk-chip--apagada small{color:#7d7666}
.streak-chip.sk-chip--labareda,.streak-chip.sk-chip--vulcao,.streak-chip.sk-chip--lendaria{border-color:#3d2a4d;background:linear-gradient(135deg,#2a1d3c,#5b2a86);color:#fff7e8;box-shadow:0 3px 0 #1c1229}
.streak-chip.sk-chip--labareda small,.streak-chip.sk-chip--vulcao small,.streak-chip.sk-chip--lendaria small{color:#f3d8ff}
.streak-chip.is-at-risk{animation:sk-risk 2.2s ease-in-out infinite}
@keyframes sk-risk{0%,100%{box-shadow:0 3px 0 #efd27a,0 0 0 0 rgba(242,81,42,.35)}50%{box-shadow:0 3px 0 #efd27a,0 0 0 8px rgba(242,81,42,0)}}
@media(max-width:640px){.streak-chip{padding:5px 10px 5px 6px}.streak-chip__text small{display:none}}

/* ---------------------------------------------------------------- tela */
.sk-backdrop{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:20px;background:rgba(24,20,12,.5);backdrop-filter:blur(8px);overflow-y:auto;animation:pw-fade .2s ease-out}
.sk-dialog{position:relative;width:min(100%,460px);margin:auto;padding:26px 24px 22px;border-radius:32px;text-align:center;overflow:hidden;color:#1c3a2b;background:linear-gradient(170deg,var(--sk-bg-a),var(--sk-bg-b));box-shadow:0 30px 90px rgba(0,0,0,.35);animation:sk-in .5s cubic-bezier(.2,1.3,.4,1)}
.sk-dialog.is-dark{color:#fff7e8}
.sk-dialog:before{content:'';position:absolute;left:-10%;right:-10%;top:-12%;height:62%;background:radial-gradient(closest-side at 50% 58%,color-mix(in srgb,var(--sk-a) 55%,transparent),transparent);pointer-events:none;animation:sk-breathe 3.5s ease-in-out infinite}
@keyframes sk-in{from{opacity:0;transform:translateY(40px) scale(.9)}}
@keyframes sk-breathe{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.sk-close{position:absolute;top:14px;right:14px;z-index:2;width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.55);color:inherit;font-size:22px;cursor:pointer}
.sk-dialog.is-dark .sk-close{background:rgba(255,255,255,.14)}
.sk-hero{position:relative;display:grid;justify-items:center;gap:2px;margin-top:4px}
.sk-hero__flame{filter:drop-shadow(0 12px 24px color-mix(in srgb,var(--sk-b) 45%,transparent));animation:sk-grow .8s cubic-bezier(.2,1.4,.4,1) both}
@keyframes sk-grow{from{opacity:0;transform:scale(.3) translateY(30px)}}
.sk-count{position:relative;display:grid;justify-items:center;margin-top:8px}
.sk-count__num{font:700 clamp(68px,18vw,92px)/.9 'Fredoka',sans-serif;letter-spacing:-.03em;background:linear-gradient(180deg,var(--sk-a),var(--sk-b));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 2px 0 rgba(255,255,255,.15)}
.sk-dialog--apagada .sk-count__num{background:none;color:#8f877a}
.sk-count__label{font:600 17px 'Fredoka',sans-serif;opacity:.85}
.sk-tier{margin-top:8px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.6);font:800 11px/1 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase}
.sk-dialog.is-dark .sk-tier{background:rgba(255,255,255,.14)}
.sk-plus{position:absolute;top:30px;right:22%;padding:6px 12px;border-radius:999px;background:#2f9e44;color:#fff;font:700 14px 'Fredoka',sans-serif;animation:sk-pop 1s cubic-bezier(.2,1.6,.4,1) .5s both}
@keyframes sk-pop{from{opacity:0;transform:scale(.2) rotate(-12deg)}}
.sk-dialog h2{position:relative;margin:16px 0 6px;font:600 22px/1.2 'Fredoka',sans-serif}
.sk-status{position:relative;margin:0 auto 16px;max-width:34ch;font-size:14px;line-height:1.5;opacity:.85}
.sk-status.is-at-risk{opacity:1;font-weight:700;color:#b33c1a}
.sk-dialog.is-dark .sk-status.is-at-risk{color:#ffb4a0}
.sk-week{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:0 0 16px;padding:12px 10px;list-style:none;border-radius:20px;background:rgba(255,255,255,.55)}
.sk-dialog.is-dark .sk-week{background:rgba(255,255,255,.1)}
.sk-day{display:grid;justify-items:center;gap:4px;animation:sk-day-in .4s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(.35s + var(--i) * .06s)}
@keyframes sk-day-in{from{opacity:0;transform:translateY(10px) scale(.6)}}
.sk-day__mark{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(28,58,43,.08);font-weight:700}
.sk-dialog.is-dark .sk-day__mark{background:rgba(255,255,255,.1)}
.sk-day.is-done .sk-day__mark{background:color-mix(in srgb,var(--sk-a) 30%,white)}
.sk-dialog.is-dark .sk-day.is-done .sk-day__mark{background:color-mix(in srgb,var(--sk-a) 35%,transparent)}
.sk-day.is-today .sk-day__mark{outline:2px dashed color-mix(in srgb,var(--sk-b) 70%,transparent);outline-offset:2px}
.sk-day small{font-size:11px;font-weight:700;opacity:.7}
.sk-next{position:relative;margin:0 0 14px;text-align:left}
.sk-next__head{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px;font-size:13px}
.sk-next__bar{height:10px;border-radius:999px;background:rgba(28,58,43,.12);overflow:hidden}
.sk-dialog.is-dark .sk-next__bar{background:rgba(255,255,255,.14)}
.sk-next__bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--sk-b),var(--sk-a));animation:sk-bar 1s cubic-bezier(.2,1,.3,1) .4s both}
@keyframes sk-bar{from{width:0}}
.sk-stats{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px}
.sk-stats div{padding:10px 6px;border-radius:16px;background:rgba(255,255,255,.55)}
.sk-dialog.is-dark .sk-stats div{background:rgba(255,255,255,.1)}
.sk-stats strong{display:block;font:700 22px/1 'Fredoka',sans-serif}
.sk-stats span{font-size:11.5px;opacity:.75}
.sk-tato{position:relative;margin:0 0 16px;padding:10px 14px;border-radius:16px;background:rgba(255,255,255,.7);color:#2f3b2c;font-size:14px;line-height:1.45;text-align:left}
.sk-actions{position:relative;display:grid;gap:8px}
.sk-share{display:inline-flex;justify-content:center;align-items:center;gap:10px;min-height:52px;border:0;border-radius:16px;color:#fff;font:700 15px 'DM Sans',sans-serif;cursor:pointer;background:linear-gradient(45deg,#f9ce34,#ee2a7b 45%,#6228d7);box-shadow:0 6px 18px rgba(238,42,123,.35);transition:transform .2s,box-shadow .2s}
.sk-share:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 24px rgba(238,42,123,.45)}
.sk-share:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.sk-share.is-busy{opacity:.8;pointer-events:none}
.sk-secondary{min-height:46px;border:0;border-radius:14px;background:rgba(255,255,255,.65);color:#1c3a2b;font:700 14px 'DM Sans',sans-serif;cursor:pointer}
.sk-dialog.is-dark .sk-secondary{background:rgba(255,255,255,.14);color:#fff7e8}
.sk-share-fallback{position:relative;display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;margin-top:12px;padding:12px;border-radius:18px;background:rgba(255,255,255,.75);color:#2f3b2c;text-align:left}
.sk-share-fallback[hidden]{display:none}
.sk-share-fallback img{width:96px;border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,.2)}
.sk-share-fallback p{margin:4px 0 8px;font-size:12.5px;line-height:1.45}
.sk-download{display:inline-block;padding:8px 14px;border-radius:12px;background:#1c3a2b;color:#fff;font-weight:700;font-size:13px;text-decoration:none}
.sk-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sk-confetti i{position:absolute;top:-12px;left:calc(var(--i) * 5.5%);width:8px;height:12px;border-radius:2px;background:hsl(calc(var(--i) * 40),90%,60%);animation:sk-fall 2.6s cubic-bezier(.3,.6,.4,1) both;animation-delay:calc(var(--i) * .07s)}
@keyframes sk-fall{to{transform:translate(calc((var(--i) - 9) * 6px),620px) rotate(calc(var(--i) * 70deg));opacity:0}}
@media(prefers-reduced-motion:reduce){.sk-flame .sk-layer,.sk-flame .sk-spark,.sk-flame .sk-aura,.sk-flame .sk-crown,.sk-dialog,.sk-dialog:before,.sk-hero__flame,.sk-day,.sk-next__bar i,.sk-confetti i,.sk-plus,.streak-chip.is-at-risk{animation:none!important}.sk-flame .sk-spark{opacity:.7}}
/* Suporte (modal / bottom sheet), entrada discreta de feedback na home e o
   cartão de revisão. Autocontido: também carrega nas páginas de apoio, que
   não usam o site.css. */
.sp-backdrop {
  --sp-ink: #1c2b21; --sp-muted: #5d6d5d; --sp-line: #e6deca; --sp-paper: #fffdf7; --sp-butter: #f8c637; --sp-butter-deep: #dfa518; --sp-leaf: #2b5541;
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: 20px;
  background: rgb(20 36 28 / .46);
  animation: sp-fade .18s ease-out both;
}
body.has-support { overflow: hidden; }
.sp-dialog {
  position: relative;
  width: min(520px, 100%);
  max-height: min(92dvh, 760px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 26px 26px 22px;
  border-radius: 26px;
  background: var(--sp-paper);
  color: var(--sp-ink);
  box-shadow: 0 24px 60px rgb(20 36 28 / .28);
  font: 400 15px/1.55 'DM Sans', system-ui, sans-serif;
  animation: sp-rise .26s cubic-bezier(.22, 1, .36, 1) both;
}
.sp-close {
  position: absolute; top: 14px; right: 14px;
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: #f3eedf; color: var(--sp-ink);
  font: 500 24px/1 'DM Sans', sans-serif; cursor: pointer;
}
.sp-close:hover { background: #ebe3cd; }
.sp-head { padding-right: 44px; }
.sp-kicker { font: 700 11px/1 'DM Sans', sans-serif; letter-spacing: 1.6px; color: #566a48; }
.sp-head h2, .sp-done h2 { margin: 8px 0 6px; font: 500 28px/1.1 Fredoka, 'DM Sans', sans-serif; letter-spacing: -.4px; }
.sp-head p { margin: 0 0 18px; color: var(--sp-muted); }
.sp-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; border: 0; }
.sp-cats legend { margin-bottom: 8px; font-weight: 700; font-size: 13px; }
.sp-cat { position: relative; }
.sp-cat input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sp-cat span {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 14px;
  border: 1.5px solid var(--sp-line); border-radius: 999px;
  background: #fff; color: var(--sp-ink);
  font-weight: 500; font-size: 14px;
  transition: background .15s, border-color .15s;
}
.sp-cat input:checked + span { background: #fff4cc; border-color: var(--sp-butter-deep); font-weight: 700; }
.sp-cat input:focus-visible + span { outline: 3px solid var(--sp-leaf); outline-offset: 2px; }
.sp-label { display: block; margin: 0 0 6px; font-weight: 700; font-size: 13px; }
.sp-form textarea, .sp-form input[type="email"] {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px;
  border: 1.5px solid var(--sp-line); border-radius: 16px;
  background: #fff; color: var(--sp-ink);
  font: 400 16px/1.5 'DM Sans', system-ui, sans-serif;
}
.sp-form textarea { min-height: 128px; resize: vertical; }
.sp-form textarea:focus, .sp-form input[type="email"]:focus { outline: 3px solid #cfe3c0; border-color: var(--sp-leaf); }
.sp-form input[type="email"] { margin-bottom: 14px; }
.sp-count { margin: 4px 0 12px; text-align: right; font-size: 12px; color: #8a9483; }
.sp-account { margin: 0 0 14px; padding: 11px 14px; border-radius: 14px; background: #f1f5ea; color: #3f5346; font-size: 13.5px; }
.sp-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sp-turnstile { min-height: 0; margin: 0 0 12px; }
.sp-turnstile:not(:empty) { min-height: 65px; }
.sp-status { min-height: 1.4em; margin: 0 0 10px; color: #a24a1c; font-size: 14px; font-weight: 500; }
.sp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.sp-actions small { color: #8a9483; font-size: 12.5px; }
.sp-send {
  min-height: 48px; padding: 0 26px;
  border: 0; border-radius: 16px;
  background: var(--sp-butter); color: #3d2e05;
  box-shadow: 0 5px 0 #d8a92a;
  font: 600 16px/1 Fredoka, 'DM Sans', sans-serif; letter-spacing: .2px;
  cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.sp-send:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 0 #d8a92a; }
.sp-send:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #d8a92a; }
.sp-send:disabled { opacity: .7; cursor: progress; }
.sp-send:focus-visible, .sp-close:focus-visible { outline: 3px solid var(--sp-leaf); outline-offset: 3px; }
.sp-done { padding: 10px 0 4px; text-align: center; }
.sp-done__mark { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 22px; background: #fff4cc; font-size: 32px; }
.sp-done p { margin: 0 auto 14px; max-width: 34ch; color: var(--sp-muted); }
.sp-done h2:focus { outline: none; }
.sp-protocol b { color: var(--sp-ink); font-variant-numeric: tabular-nums; }
@keyframes sp-fade { from { opacity: 0; } }
@keyframes sp-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@media (max-width: 600px) {
  .sp-backdrop { place-items: end stretch; padding: 0; }
  .sp-dialog { width: 100%; max-height: 92dvh; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; animation-name: sp-sheet; }
  .sp-head h2 { font-size: 25px; }
  .sp-send { flex: 1 1 100%; }
}
@keyframes sp-sheet { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .sp-backdrop, .sp-dialog { animation: none; } }

/* Entrada discreta no app ("Conta pra gente…") e botão de texto no rodapé. */
.feedback-nudge {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 26px 0 8px; padding: 10px 16px;
  border: 1.5px dashed #d9cfb2; border-radius: 999px;
  background: transparent; color: #5d6d5d;
  font: 500 14px/1.2 'DM Sans', system-ui, sans-serif; cursor: pointer;
}
.feedback-nudge:hover { background: #fff8e3; color: #1c2b21; border-color: #dfa518; }
.feedback-nudge:focus-visible { outline: 3px solid #2b5541; outline-offset: 3px; }

/* Revisão na home: lembrar antes de ver a resposta. */
.review-card { margin-top: 18px; }
.review-card h2 { margin-bottom: 4px; }
.review-card > p { margin: 0 0 14px; color: var(--muted, #626b5d); font-size: 14.5px; }
.review-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.review-item { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line, #dde2d5); border-radius: 16px; background: #fff; }
.review-item__from { font-size: 14.5px; color: #7b5a2a; text-decoration: line-through; text-decoration-color: #e3b36a; text-decoration-thickness: 1.5px; }
.review-item__to { font-size: 16px; font-weight: 700; color: #20422f; }
.review-item__why { font-size: 13px; color: var(--muted, #626b5d); }
.review-item button {
  justify-self: start; min-height: 36px; padding: 0 14px;
  border: 1.5px solid #cfdcc2; border-radius: 999px; background: #f4f8ee; color: #2b5541;
  font: 600 13px/1 'DM Sans', system-ui, sans-serif; cursor: pointer;
}
.review-item button:focus-visible { outline: 3px solid #2b5541; outline-offset: 2px; }

/* Sugestão de nível no fim da aula. */
.level-nudge { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: #f1f5ea; color: #2f4a35; font-size: 14px; }
.level-nudge button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 12px; background: #2b5541; color: #fff; font: 600 13.5px/1 'DM Sans', system-ui, sans-serif; cursor: pointer; }
.level-nudge button:focus-visible { outline: 3px solid #f8c637; outline-offset: 2px; }
/* ==========================================================================
   App: tokens de tema, a aba Hoje (td-*) e a aba Ajustes (cfg-*).
   Tudo aqui lê os tokens --app-*; o tema escuro e o "mais contraste" só
   trocam os tokens. Vem por último no site.css de propósito.
   ========================================================================== */

:root {
  --app-bg: #fbf8ef;
  --app-glow: #e9eedb;
  --app-surface: #fffdf7;
  --app-surface-2: #f4f3e9;
  --app-sunken: #eeede2;
  --app-ink: #1f3a2e;
  --app-ink-2: #3a5145;
  --app-muted: #647568;
  --app-line: #e3e5d8;
  --app-line-2: #d3d9c8;
  --app-accent: #f5c940;
  --app-accent-2: #d9a91f;
  --app-accent-ink: #5a4300;
  --app-accent-soft: #fdf2c7;
  --app-forest: #1f4234;
  --app-good: #3f8a3a;
  --app-danger: #b8402b;
  --app-danger-soft: #fbeae5;
  --app-focus: #936e00;
  --app-shadow: 0 1px 2px #1f3a2e0a, 0 12px 32px -8px #1f3a2e14;
  --app-ease: cubic-bezier(.22, 1, .36, 1);
  --app-spring: cubic-bezier(.34, 1.56, .64, 1);
}
html[data-theme="dark"] {
  --app-bg: #0f1612;
  --app-glow: #16241c;
  --app-surface: #16201b;
  --app-surface-2: #1d2923;
  --app-sunken: #121b16;
  --app-ink: #eef2e7;
  --app-ink-2: #c8d3c5;
  --app-muted: #93a494;
  --app-line: #243129;
  --app-line-2: #314038;
  --app-accent: #f5c940;
  --app-accent-2: #c9981a;
  --app-accent-ink: #f7d96b;
  --app-accent-soft: #2f2a14;
  --app-forest: #0b1711;
  --app-good: #7cc463;
  --app-danger: #ff8c73;
  --app-danger-soft: #36191375;
  --app-focus: #f5c940;
  --app-shadow: 0 1px 2px #0000004d, 0 14px 34px -10px #00000080;
}
html[data-contrast="more"] { --app-ink-2: #1b3024; --app-muted: #3d4f43; --app-line: #b9c3b1; --app-line-2: #98a592; }
html[data-contrast="more"][data-theme="dark"] { --app-ink-2: #f4f7ef; --app-muted: #cbd6c8; --app-line: #4b5b52; --app-line-2: #62746a; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* A casca do app acompanha o tema. Os seletores são longos para vencer as
   camadas antigas (design-refresh, immersive, fluid-world) sem !important. */
body:is([data-screen="app"], [data-screen="session"]) .app-shell { background: radial-gradient(ellipse at 100% 0, var(--app-glow), transparent 60%), var(--app-bg); }
body[data-screen="app"] .main { zoom: var(--app-zoom, 1); }

/* ==========================================================================
   HOJE
   ========================================================================== */
.td-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; max-width: 1120px; padding-bottom: 12px; color: var(--app-ink); }

.td-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 28px; flex-wrap: wrap; }
.td-date { margin: 0 0 8px; font: 600 13px/1 'DM Sans', sans-serif; letter-spacing: .02em; color: var(--app-muted); }
.td-date::first-letter { text-transform: uppercase; }
.td-head h1 { margin: 0; font: 600 clamp(36px, 4.2vw, 56px)/1 'Fredoka', sans-serif; letter-spacing: -1.8px; color: var(--app-ink); }
.td-line { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 15.5px; line-height: 1.4; color: var(--app-muted); }
.td-done { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--app-good); color: #fff; flex: none; }
.td-head__tools { display: flex; align-items: center; gap: 12px; }
.td-xp{display:grid;grid-template-columns:auto auto;column-gap:7px;align-items:center;padding:8px 12px;border:1px solid var(--app-line);border-radius:16px;background:var(--app-surface);box-shadow:0 3px 0 var(--app-line);color:var(--app-ink);text-align:left}.td-xp>span{grid-row:1/3;font-size:22px}.td-xp b{font:600 13px Fredoka}.td-xp small{font-size:10px;color:var(--app-muted)}.td-xp:hover{transform:translateY(-2px)}
.td-head .streak-chip { margin: 0; }
.td-me { display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border-radius: 18px; background: none; transition: transform .25s var(--app-spring); }
.td-me .avatar-option-face { width: 100%; height: 100%; border-radius: 18px; box-shadow: 0 0 0 3px var(--app-surface), 0 0 0 4px var(--app-line-2); }
.td-me:hover { transform: translateY(-2px) rotate(-3deg); }

/* ---------------------------------------------------------------- palco */
.td-stage { position: relative; display: grid; align-items: center; min-height: clamp(400px, 38vw, 480px); border-radius: 34px; overflow: hidden; isolation: isolate; background: #cfe6f0; box-shadow: 0 0 0 1px #1f3a2e14, 0 34px 60px -34px #1f3a2e80; }
.td-stage .td-stage__world.bt-city { position: absolute; inset: 0; z-index: -2; aspect-ratio: auto; height: 100%; border-radius: 0; }
/* Enquadramento: a ilha um pouco à direita (o texto fica à esquerda) e o
   céu cortado acima das nuvens, para nenhuma aparecer pela metade na borda. */
.td-stage__world .bt-city__art { top: -14%; left: -2%; right: -16%; }
.td-stage__scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, #0f2219e6 0%, #0f2219b3 30%, #0f221933 54%, #0f221900 68%), linear-gradient(0deg, #0f22198c 0%, #0f221900 34%); }
.td-stage__copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; max-width: 500px; padding: 48px 52px 84px; color: #fff8e6; }
.td-kicker { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 7px 13px 7px 11px; border-radius: 999px; border: 1px solid #ffffff2e; background: #ffffff1a; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font: 700 11.5px/1 'DM Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #ffeaa8; }
.td-kicker__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #9be37f; }
.td-kicker__dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #9be37f; animation: td-ping 2.4s var(--app-ease) infinite; }
.td-stage h2 { margin: 18px 0 10px; font: 600 clamp(52px, 6.4vw, 88px)/.9 'Fredoka', sans-serif; letter-spacing: -3px; color: #fffdf4; text-shadow: 0 2px 24px #0b1a1340; text-wrap: balance; }
.td-stage__meta { margin: 0 0 30px; font-size: 16px; color: #fff8e6c7; }
.td-cta { display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 26px 0 28px; border-radius: 19px; background: var(--app-accent); color: #362900; font: 600 18px/1 'Fredoka', sans-serif; letter-spacing: .1px; box-shadow: 0 5px 0 #c0901a, 0 22px 34px -14px #000000a6; transition: transform .22s var(--app-ease), box-shadow .22s var(--app-ease), background .2s; }
.td-cta svg { transition: transform .3s var(--app-spring); }
.td-cta:hover { background: #ffd451; transform: translateY(-2px); box-shadow: 0 7px 0 #c0901a, 0 26px 38px -14px #000000a6; }
.td-cta:hover svg { transform: translateX(4px); }
.td-cta:active { transform: translateY(3px); box-shadow: 0 2px 0 #c0901a, 0 12px 20px -12px #000000a6; }
.td-stage .td-cta:focus-visible { outline: 3px solid #fff3c4; outline-offset: 4px; }

.td-stage__cast { position: absolute; right: 6%; bottom: -2px; z-index: 1; width: clamp(170px, 17vw, 228px); margin: 0; }
.td-stage__tato { aspect-ratio: 200 / 220; filter: drop-shadow(0 18px 18px #0f22193d); }
.td-stage__tato .guide-tato { display: block; width: 100%; height: 100%; }
.td-bubble { position: absolute; right: 78%; top: 2%; display: flex; align-items: center; gap: 10px; width: max-content; max-width: 290px; margin: 0; padding: 9px 18px 9px 9px; border-radius: 22px 22px 6px 22px; background: #fffdf5; color: #1f3a2e; font: 600 18px/1.25 'Fredoka', sans-serif; box-shadow: 0 18px 34px -14px #0b1a1399; transform-origin: 100% 100%; animation: td-pop .6s .45s var(--app-spring) both; }
.td-bubble__me { flex: none; width: 36px !important; height: 36px !important; border-radius: 12px !important; padding: 3px !important; }
.td-bubble__text span { display: inline-block; animation: td-word .5s var(--app-ease) both; animation-delay: calc(.7s + var(--i) * 90ms); }

.td-stage__trail { position: absolute; left: 52px; bottom: 30px; z-index: 2; display: flex; align-items: center; gap: 12px; font: 600 12.5px/1 'DM Sans', sans-serif; letter-spacing: .03em; color: #fff8e6d9; }
.td-stage__trail i { position: relative; width: 132px; height: 6px; border-radius: 9px; background: #ffffff33; overflow: hidden; }
.td-stage__trail i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--app-accent); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); animation: td-grow 1.1s .5s var(--app-ease) both; }

/* A entrada do palco: a cidade assenta, o texto sobe em sequência. */
.td-stage__world .bt-city__art { animation: td-world 1.5s var(--app-ease) both; }
.td-stage__copy > * { animation: td-rise .7s var(--app-ease) both; }
.td-stage__copy > :nth-child(2) { animation-delay: .07s; }
.td-stage__copy > :nth-child(3) { animation-delay: .14s; }
.td-stage__copy > :nth-child(4) { animation-delay: .21s; }
.td-stage__cast .td-stage__tato { animation: td-enter .9s .15s var(--app-ease) both; }

.td-upsell { display: flex; align-items: center; gap: 14px; margin-top: -8px; padding: 14px 18px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--app-accent-2) 40%, transparent); background: var(--app-accent-soft); color: var(--app-ink); }
.td-upsell p { margin: 0; flex: 1; font-size: 14.5px; line-height: 1.45; color: var(--app-ink-2); }
.td-upsell strong { color: var(--app-ink); }
.td-upsell__lock { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--app-surface); color: var(--app-accent-ink); flex: none; }
.td-plan-chip { display: none; }
@media (max-width: 1100px) {
  .td-plan-chip { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 14px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--app-accent-2) 40%, transparent); background: var(--app-accent-soft); color: var(--app-ink); font: inherit; text-align: left; cursor: pointer; }
  .td-plan-chip__lock { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--app-surface); color: var(--app-accent-ink); flex: none; }
  .td-plan-chip__copy { display: grid; gap: 2px; flex: 1; min-width: 0; }
  .td-plan-chip__copy strong { font-size: 14px; line-height: 1.3; color: var(--app-ink); }
  .td-plan-chip__copy small { font-size: 13px; line-height: 1.35; color: var(--app-ink-2); }
  .td-plan-chip__go { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 13.5px; font-weight: 700; color: var(--app-accent-ink); }
  .td-plan-chip:focus-visible { outline: 3px solid var(--app-accent-2); outline-offset: 2px; }
}

.td-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 6px; border-radius: 10px; background: none; color: var(--app-ink); font: 700 13.5px/1 'DM Sans', sans-serif; white-space: nowrap; transition: color .2s; }
.td-link svg { transition: transform .3s var(--app-spring); }
.td-link:hover svg { transform: translateX(3px); }

/* ------------------------------------------------------- semana e rota */
.td-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.45fr); gap: 20px; }
.td-week, .td-route, .td-review { border: 1px solid var(--app-line); border-radius: 28px; background: var(--app-surface); box-shadow: var(--app-shadow); }
.td-week { display: flex; align-items: center; gap: 26px; padding: 26px 28px; }
.td-week h2, .td-route h2, .td-review h2 { margin: 0; font: 600 20px/1.2 'Fredoka', sans-serif; letter-spacing: -.2px; color: var(--app-ink); }
.td-week__ring { position: relative; display: grid; place-items: center; width: 96px; height: 96px; flex: none; }
.td-week__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.td-ring__track, .td-ring__fill { fill: none; stroke-width: 8; }
.td-ring__track { stroke: var(--app-sunken); }
.td-ring__fill { stroke: var(--app-accent); stroke-linecap: round; stroke-dashoffset: var(--off); animation: td-ring 1.2s .35s var(--app-ease) both; }
.td-week__ring b { position: relative; font: 600 30px/1 'Fredoka', sans-serif; color: var(--app-ink); }
.td-week__ring small { font-size: 15px; color: var(--app-muted); }
.td-week__body { min-width: 0; }
.td-days { display: flex; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.td-days li { display: grid; justify-items: center; gap: 6px; }
.td-days span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px dashed var(--app-line-2); color: #fff; transition: transform .3s var(--app-spring); }
.td-days small { font: 700 11px/1 'DM Sans', sans-serif; color: var(--app-muted); }
.td-days .is-done span { border: 0; background: var(--app-good); }
.td-days .is-today span { border: 2px solid var(--app-accent-2); box-shadow: 0 0 0 4px var(--app-accent-soft); }
.td-days .is-today.is-done span { border: 0; background: var(--app-good); }
.td-days .is-today small { color: var(--app-ink); }
.td-days .is-future span { opacity: .55; }
.td-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 16px 0 0; font-size: 13px; color: var(--app-muted); }
.td-stats b { font: 600 16px/1 'Fredoka', sans-serif; color: var(--app-ink); }

.td-route { padding: 22px 22px 18px 26px; }
.td-route > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.td-stops { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }
.td-stops::before { content: ''; position: absolute; left: 12%; right: 12%; top: 38px; border-top: 2px dashed var(--app-line-2); }
.td-stop { position: relative; display: grid; justify-items: center; gap: 3px; width: 100%; padding: 8px 6px 12px; border-radius: 20px; background: none; color: var(--app-ink); text-align: center; transition: background .2s; }
.td-stop:hover { background: var(--app-surface-2); }
.td-stop__pin { position: relative; display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 8px; border-radius: 20px; border: 2px solid color-mix(in srgb, var(--stop) 50%, transparent); background: color-mix(in srgb, var(--stop) 20%, var(--app-surface)); box-shadow: 0 4px 0 color-mix(in srgb, var(--stop) 40%, transparent); font-size: 28px; line-height: 1; transition: transform .35s var(--app-spring); }
.td-stop:hover .td-stop__pin { transform: translateY(-4px) rotate(-4deg); }
.td-stop__pin i { position: absolute; right: -7px; bottom: -7px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--app-surface); background: var(--app-ink); color: var(--app-surface); }
.td-stop.is-locked .td-stop__pin { filter: grayscale(.55); opacity: .85; }
.td-stop strong { font: 600 15px/1.2 'Fredoka', sans-serif; }
.td-stop small { font-size: 12px; color: var(--app-muted); }

.td-review { padding: 24px 26px; }
.td-review > header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.td-review > header p { margin: 0; font-size: 14px; color: var(--app-muted); }
.td-review__list { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.td-review__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 16px; padding: 14px 16px; border-radius: 16px; background: var(--app-surface-2); }
.td-review__from { font: 500 16px/1.4 'Fredoka', sans-serif; color: var(--app-ink-2); text-decoration: underline wavy color-mix(in srgb, var(--app-accent-2) 70%, transparent); text-underline-offset: 5px; }
.td-review__to { grid-column: 1; font: 600 16px/1.4 'Fredoka', sans-serif; color: var(--app-good); animation: td-rise .45s var(--app-ease) both; }
.td-review__why { grid-column: 1; font-size: 13px; line-height: 1.5; color: var(--app-muted); }
.td-review__item button { grid-column: 2; grid-row: 1; padding: 9px 14px; border-radius: 12px; border: 1px solid var(--app-line-2); background: var(--app-surface); color: var(--app-ink); font: 600 13px/1 'DM Sans', sans-serif; transition: transform .2s var(--app-ease); }
.td-review__item button:hover { transform: translateY(-1px); }

.td-retention { padding: 24px; border: 1px solid var(--app-line); border-radius: 26px; background: var(--app-surface); box-shadow: var(--app-shadow); }
.td-retention > header { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.td-retention__eyebrow { margin: 0 0 5px; font: 700 10px/1.2 'DM Sans',sans-serif; letter-spacing: .12em; color: var(--app-muted); }
.td-retention h2 { margin: 0; font: 600 23px/1.2 Fredoka,sans-serif; color: var(--app-ink); text-wrap: balance; }
.td-retention > ol { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 18px 0 12px; padding: 0; list-style: none; }
.td-retention > ol > li { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 5px 11px; align-items: center; min-width: 0; padding: 13px; border-radius: 16px; background: var(--app-surface-2); }
.td-retention__step { grid-row: 1/3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: var(--app-accent-soft); color: var(--app-accent-ink); font: 600 13px Fredoka,sans-serif; }
.td-retention > ol > li > div { display: grid; min-width: 0; }
.td-retention > ol > li small { color: var(--app-muted); font-size: 11px; }
.td-retention > ol > li strong { overflow: hidden; color: var(--app-ink); font: 600 15px/1.2 Fredoka,sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.td-retention > ol > li > div > span { color: var(--app-muted); font-size: 11px; }
.td-retention > ol > li button { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 0 0; background: none; color: var(--app-ink); font-size: 12px; font-weight: 700; }
.td-retention > p { margin: 0; color: var(--app-muted); font-size: 12px; line-height: 1.5; }
html[data-theme="dark"] .td-retention > ol > li { background: var(--app-surface-2); }
@media (max-width:720px) { .td-retention { padding: 20px 16px; } .td-retention > header { align-items: flex-start; } .td-retention > header .td-link { flex: none; font-size: 11px; } .td-retention > ol { grid-template-columns: 1fr; gap: 7px; } }

.td-feedback { justify-self: center; padding: 10px 16px; border-radius: 999px; background: none; color: var(--app-muted); font: 600 13px/1 'DM Sans', sans-serif; transition: background .2s, color .2s; }
.td-feedback:hover { background: var(--app-surface-2); color: var(--app-ink); }

@keyframes td-world { from { transform: scale(1.09) translateY(1.5%); } }
@keyframes td-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes td-enter { from { opacity: 0; transform: translateY(34px) scale(.94); } }
@keyframes td-pop { from { opacity: 0; transform: scale(.7) translateY(10px); } }
@keyframes td-word { from { opacity: 0; transform: translateY(7px); } }
@keyframes td-grow { from { transform: scaleX(0); } }
@keyframes td-ring { from { stroke-dashoffset: 213.6; } }
@keyframes td-ping { 0% { opacity: .7; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.8); } }

@media (max-width: 1100px) {
  .td-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .td-head { align-items: flex-start; }
  .td-head__tools { width: 100%; justify-content: space-between; order: -1; }
  .td-me { width: 46px; height: 46px; }
  .td-stage { align-items: start; min-height: 560px; border-radius: 28px; }
  .td-stage__world .bt-city__art { left: -60%; right: -60%; }
  .td-stage__scrim { background: linear-gradient(180deg, #0f2219e6 0%, #0f2219a6 38%, #0f221900 64%), linear-gradient(0deg, #0f221980 0%, #0f221900 26%); }
  .td-stage__copy { padding: 26px 24px 20px; }
  .td-stage h2 { font-size: clamp(44px, 12vw, 60px); letter-spacing: -2px; }
  .td-stage__meta { margin-bottom: 22px; font-size: 14.5px; }
  .td-cta { min-height: 54px; font-size: 17px; }
  .td-stage__cast { right: 4%; width: 176px; }
  .td-bubble { right: 62%; top: -8%; max-width: min(210px, 52vw); font-size: 15px; padding: 7px 14px 7px 7px; }
  .td-bubble__me { width: 30px !important; height: 30px !important; }
  .td-stage__trail { left: 24px; bottom: 22px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .td-stage__trail i { width: 110px; }
  .td-week { padding: 22px; gap: 18px; }
  .td-week__ring { width: 84px; height: 84px; }
  .td-days { gap: 5px; }
  .td-days span { width: 28px; height: 28px; }
}
@media (max-width: 560px) {
  /* A semana vira grade: anel e título em cima, os sete dias na largura toda. */
  .td-week { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px 16px; }
  .td-week__body { display: contents; }
  .td-week__ring { width: 72px; height: 72px; }
  .td-week__ring b { font-size: 25px; }
  .td-days { grid-column: 1 / -1; justify-content: space-between; margin: 0; }
  .td-stats { grid-column: 1 / -1; margin: 0; }
  .td-stops { grid-auto-flow: row; gap: 2px; }
  .td-stops::before { left: 38px; right: auto; top: 38px; bottom: 38px; border-top: 0; border-left: 2px dashed var(--app-line-2); }
  .td-stop { grid-template-columns: 60px 1fr; justify-items: start; align-items: center; column-gap: 14px; text-align: left; }
  .td-stop__pin { grid-row: 1 / 3; margin: 0; }
  .td-stop strong { align-self: end; }
  .td-stop small { align-self: start; }
  .td-review__item { grid-template-columns: 1fr; }
  .td-review__item button { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* ==========================================================================
   AJUSTES — categorias numa coluna, uma categoria por vez na outra.
   ========================================================================== */
.cfg-page { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 44px; align-items: start; max-width: 1060px; color: var(--app-ink); }

.cfg-nav { position: sticky; top: 28px; display: grid; gap: 10px; }
.cfg-nav__me { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border-radius: 18px; background: none; color: var(--app-ink); text-align: left; transition: background .2s; }
.cfg-nav__me:hover { background: var(--app-surface-2); }
.cfg-nav__me .avatar-option-face { width: 46px; height: 46px; border-radius: 15px; flex: none; }
.cfg-nav__me span { display: grid; gap: 3px; min-width: 0; }
.cfg-nav__me strong { overflow: hidden; font: 700 15px/1.2 'DM Sans', sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.cfg-nav__me small { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--app-muted); }
.cfg-nav nav { display: grid; gap: 2px; }
.cfg-nav__group { margin: 16px 12px 6px; font: 700 11px/1 'DM Sans', sans-serif; letter-spacing: .13em; text-transform: uppercase; color: var(--app-muted); }
.cfg-nav__item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 13px; background: none; color: var(--app-ink-2); font: 600 14.5px/1.2 'DM Sans', sans-serif; text-align: left; transition: background .18s, color .18s; }
.cfg-nav__item svg { flex: none; color: var(--app-muted); transition: color .18s; }
.cfg-nav__item:hover { background: var(--app-surface-2); color: var(--app-ink); }
.cfg-nav__item[aria-current="page"] { background: var(--app-surface); color: var(--app-ink); box-shadow: 0 0 0 1px var(--app-line), var(--app-shadow); }
.cfg-nav__item[aria-current="page"] svg { color: var(--app-accent-2); }
.cfg-nav__item[aria-current="page"]::before { content: ''; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 4px; border-radius: 4px; background: var(--app-accent); animation: cfg-mark .35s var(--app-spring) both; }
.cfg-nav hr { margin: 12px; border: 0; border-top: 1px solid var(--app-line); }
.cfg-nav__item--out, .cfg-nav__item--out svg { color: var(--app-danger); }
.cfg-nav__item--cta { background: var(--app-accent-soft); color: var(--app-ink); }

.cfg-body { display: grid; gap: 24px; min-width: 0; max-width: 720px; padding-bottom: 40px; }
.cfg-head h2 { margin: 0; font: 600 clamp(30px, 3vw, 40px)/1.05 'Fredoka', sans-serif; letter-spacing: -1.1px; color: var(--app-ink); }
.cfg-head p { max-width: 58ch; margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--app-muted); }

.cfg-group { display: grid; border: 1px solid var(--app-line); border-radius: 22px; background: var(--app-surface); box-shadow: var(--app-shadow); }
.cfg-group__head { display: grid; gap: 3px; padding: 20px 22px 2px; }
.cfg-group__head h3 { margin: 0; font: 600 17px/1.2 'Fredoka', sans-serif; color: var(--app-ink); }
.cfg-group__head small { font-size: 13px; color: var(--app-muted); }
.cfg-group--danger .cfg-group__head h3 { color: var(--app-danger); }

.cfg-row { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; min-height: 70px; margin: 0; padding: 16px 22px; border-top: 1px solid var(--app-line); color: var(--app-ink); text-decoration: none; }
.cfg-group > .cfg-row:first-child, .cfg-group > .cfg-expand:first-child > .cfg-row, .cfg-group__head + .cfg-row, .cfg-group__head + .cfg-expand > .cfg-row { border-top: 0; }
.cfg-group > :first-child.cfg-row { border-radius: 22px 22px 0 0; }
.cfg-group > :last-child.cfg-row { border-radius: 0 0 22px 22px; }
.cfg-group > :only-child.cfg-row { border-radius: 22px; }
.cfg-row__label { display: grid; gap: 4px; min-width: 0; }
.cfg-row__label strong, .cfg-row__label label strong { font: 600 15px/1.25 'DM Sans', sans-serif; color: var(--app-ink); }
.cfg-row__label small { font-size: 13px; line-height: 1.45; color: var(--app-muted); }
.cfg-row__control { display: flex; align-items: center; gap: 10px; flex: none; color: var(--app-muted); }
.cfg-value { max-width: 280px; overflow: hidden; font-size: 14.5px; text-overflow: ellipsis; white-space: nowrap; color: var(--app-ink-2); }
.cfg-row--toggle, .cfg-row--link, .cfg-expand > summary { cursor: pointer; transition: background .18s; }
.cfg-row--toggle:hover, .cfg-row--link:hover, .cfg-expand > summary:hover { background: color-mix(in srgb, var(--app-surface-2) 70%, transparent); }
.cfg-row--link:hover .cfg-row__control { color: var(--app-ink); }
.cfg-row--form .cfg-row__control { flex: 0 1 360px; }
.cfg-row--form .cfg-input { flex: 1; min-width: 0; }

.cfg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 16px; border: 1px solid var(--app-line-2); border-radius: 12px; background: var(--app-surface-2); color: var(--app-ink); font: 600 14px/1 'DM Sans', sans-serif; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .18s, transform .18s var(--app-ease), box-shadow .18s; }
.cfg-btn:hover { background: var(--app-sunken); }
.cfg-btn:active { transform: translateY(1px); }
.cfg-btn:disabled, .cfg-input:disabled { opacity: .5; cursor: not-allowed; }
.cfg-btn--primary { border-color: transparent; background: var(--app-accent); color: #3a2c00; box-shadow: 0 3px 0 var(--app-accent-2); }
.cfg-btn--primary:hover { background: #ffd451; transform: translateY(-1px); box-shadow: 0 4px 0 var(--app-accent-2); }
.cfg-btn--danger { border-color: color-mix(in srgb, var(--app-danger) 35%, transparent); background: var(--app-danger-soft); color: var(--app-danger); }
.cfg-btn--danger:hover { background: color-mix(in srgb, var(--app-danger) 16%, var(--app-surface)); }
.cfg-input { height: 44px; padding: 0 14px; border: 1px solid var(--app-line-2); border-radius: 12px; background: var(--app-bg); color: var(--app-ink); font: 500 15px 'DM Sans', sans-serif; transition: border-color .18s, box-shadow .18s; }
.cfg-input::placeholder { color: var(--app-muted); }
.cfg-input:focus-visible { outline: none; border-color: var(--app-accent-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-accent) 32%, transparent); }

.cfg-switch { position: relative; width: 46px; height: 28px; flex: none; }
.cfg-switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cfg-switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--app-line-2); transition: background .22s; }
.cfg-switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0000004d; transition: transform .3s var(--app-spring); }
.cfg-switch input:checked + i { background: var(--app-good); }
.cfg-switch input:checked + i::after { transform: translateX(18px); }
.cfg-switch input:focus-visible + i { outline: 3px solid var(--app-focus); outline-offset: 3px; }

.cfg-pill { padding: 5px 11px; border-radius: 999px; background: var(--app-accent-soft); color: var(--app-accent-ink); font: 700 12px/1 'DM Sans', sans-serif; white-space: nowrap; }
.cfg-note { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; padding: 16px 20px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--app-accent-2) 40%, transparent); background: var(--app-accent-soft); }
.cfg-note p { flex: 1 1 260px; margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--app-ink); }

/* Perfil: o cartão mostra como você aparece, com a cor do seu avatar. */
.cfg-card-me { --me: #f6d264; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 0 16px; padding: 0 22px 20px; overflow: hidden; border: 1px solid var(--app-line); border-radius: 24px; background: var(--app-surface); box-shadow: var(--app-shadow); }
.cfg-card-me[data-me="frita"] { --me: #f5b5a7; }
.cfg-card-me[data-me="chips"] { --me: #a8d7e7; }
.cfg-card-me[data-me="faca"] { --me: #d9c0e9; }
.cfg-card-me[data-me="garfo"] { --me: #a8d8c5; }
.cfg-card-me[data-me="colher"] { --me: #d8b9ee; }
.cfg-card-me[data-me="estudante"] { --me: #f2d579; }
.cfg-card-me[data-me="chef"] { --me: #b6d0dc; }
.cfg-card-me__banner { grid-column: 1 / -1; height: 104px; margin: 0 -22px; background: radial-gradient(circle at 1.5px 1.5px, #1f3a2e1f 1.5px, transparent 2px) 0 0 / 16px 16px, linear-gradient(120deg, var(--me), color-mix(in srgb, var(--me) 55%, #fff8e6)); transition: background .4s; }
.cfg-card-me__face { width: 92px !important; height: 92px !important; margin-top: -46px; border-radius: 28px !important; box-shadow: 0 0 0 5px var(--app-surface); }
.cfg-card-me__who { display: grid; gap: 4px; min-width: 0; padding-bottom: 6px; }
.cfg-card-me__who strong { overflow: hidden; font: 600 24px/1.1 'Fredoka', sans-serif; text-overflow: ellipsis; white-space: nowrap; color: var(--app-ink); }
.cfg-card-me__who small { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; color: var(--app-muted); }
.cfg-card-me .cfg-pill { margin-bottom: 10px; }

.cfg-avatars { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; padding: 14px 18px 20px; }
.cfg-avatar { position: relative; display: grid; justify-items: center; gap: 7px; padding: 10px 2px 9px; border: 1.5px solid transparent; border-radius: 18px; cursor: pointer; transition: background .2s, border-color .2s; }
.cfg-avatar input, .cfg-level input, .cfg-theme input, .cfg-segment__opt input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.cfg-avatar .avatar-option-face { width: 54px; height: 54px; border-radius: 17px; transition: transform .35s var(--app-spring); }
.cfg-avatar small { font: 600 12px/1 'DM Sans', sans-serif; color: var(--app-muted); }
.cfg-avatar:hover { background: var(--app-surface-2); }
.cfg-avatar:hover .avatar-option-face { transform: translateY(-3px) rotate(-4deg); }
.cfg-avatar:has(input:checked) { border-color: var(--app-accent-2); background: var(--app-accent-soft); }
.cfg-avatar:has(input:checked) small { color: var(--app-ink); }
.cfg-avatar:has(input:focus-visible), .cfg-level:has(input:focus-visible), .cfg-segment__opt:has(input:focus-visible) { outline: 3px solid var(--app-focus); outline-offset: 2px; }

.avatar-studio{display:grid;grid-template-columns:180px minmax(0,1fr);gap:22px;padding:18px 22px 24px}.avatar-studio__preview{position:sticky;top:20px;align-self:start;display:grid;justify-items:center;gap:7px;padding:22px 14px;border-radius:22px;background:linear-gradient(155deg,var(--app-accent-soft),var(--app-surface-2));text-align:center}.avatar-studio__portrait{width:126px!important;height:126px!important;border-radius:36px!important}.avatar-studio__preview strong{font:600 18px Fredoka}.avatar-studio__preview small{max-width:145px;color:var(--app-muted);font-size:12px;line-height:1.4}.avatar-studio__controls{display:grid;gap:18px}.avatar-presets,.avatar-part{min-width:0;margin:0;padding:0;border:0}.avatar-presets legend,.avatar-part legend{margin-bottom:10px;font:600 13px Fredoka;color:var(--app-ink)}.avatar-presets .cfg-avatars{grid-template-columns:repeat(4,minmax(0,1fr));padding:0}.avatar-part>div{display:flex;flex-wrap:wrap;gap:8px}.avatar-part__option{position:relative;cursor:pointer}.avatar-part__option input{position:absolute;width:1px;height:1px;opacity:0}.avatar-part__option span{display:block;padding:8px 11px;border:1.5px solid var(--app-line);border-radius:999px;background:var(--app-surface);font-size:12px;font-weight:700;color:var(--app-muted)}.avatar-part__option:hover span{border-color:var(--app-accent-2)}.avatar-part__option:has(input:checked) span{border-color:var(--app-accent-2);background:var(--app-accent-soft);color:var(--app-ink)}.avatar-part__option:has(input:focus-visible) span{outline:3px solid var(--app-focus);outline-offset:2px}.avatar-part__option.is-color span{display:grid;width:36px;height:36px;padding:4px;place-items:center}.avatar-part__option.is-color i{display:block;width:24px;height:24px;border:1px solid #2b332a38;border-radius:50%;background:var(--swatch)}

/* Galeria dos moradores: seleção acessível e arte vetorial do rig oficial. */
.cast-gallery{display:grid;gap:20px;animation:td-rise .35s var(--app-ease) both}
.cast-gallery>.cfg-head{margin-bottom:0}
.cast-feature{--app-ink:#173f32;--app-ink-2:#3d5846;--app-surface:#fffdf6;display:grid;grid-template-columns:minmax(220px,.78fr) minmax(0,1fr);align-items:center;gap:28px;min-height:270px;padding:20px 32px;border:1px solid color-mix(in srgb,var(--cast-accent) 20%,var(--app-line));border-radius:26px;background:var(--cast-bg);overflow:hidden}
.cast-feature__art{display:grid;align-self:stretch;min-height:230px;place-items:end center}
.cast-feature__art img{display:block;width:min(100%,270px);height:240px;object-fit:contain;object-position:center bottom}
.cast-feature__copy{display:grid;justify-items:start;gap:8px;max-width:480px}
.cast-kicker{font:700 10px/1 'DM Sans',sans-serif;letter-spacing:.16em;color:var(--app-ink-2)}
.cast-feature__copy h3{margin:0;font:600 clamp(28px,4vw,42px)/1 'Fredoka',sans-serif;letter-spacing:-.03em;color:var(--app-ink)}
.cast-feature__copy>strong{font:600 15px 'DM Sans',sans-serif;color:var(--app-ink)}
.cast-feature__copy p{max-width:42ch;margin:0;font-size:13px;line-height:1.55;color:var(--app-ink-2)}
.cast-feature__note{margin-top:4px;padding:8px 11px;border:1px solid color-mix(in srgb,var(--cast-accent) 25%,transparent);border-radius:999px;background:var(--app-surface);font-size:11px;font-weight:700;color:var(--app-ink)}
.cast-picker{min-width:0;margin:0;padding:0;border:0}
.cast-picker>legend{display:flex;align-items:baseline;gap:10px;margin-bottom:11px;font:600 17px 'Fredoka',sans-serif;color:var(--app-ink)}
.cast-picker>legend span{font:500 11px 'DM Sans',sans-serif;color:var(--app-muted)}
.cast-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.cast-card{position:relative;display:grid;grid-template-rows:150px auto;align-content:start;gap:8px;min-width:0;overflow:hidden;padding:8px 8px 11px;border:1.5px solid var(--app-line);border-radius:19px;background:var(--app-surface);box-shadow:none;cursor:pointer;transition:transform .2s var(--app-ease),border-color .2s,box-shadow .2s,background .2s}
.cast-card input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.cast-card__art{position:relative;display:grid;width:100%;height:150px;place-items:end center;overflow:hidden;border-radius:13px;background:var(--cast-bg);transition:background .2s}
.cast-card__art>img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.cast-card__info{display:grid;gap:4px;padding:2px 5px}
.cast-card__info strong{overflow:hidden;font:600 15px/1.1 'Fredoka',sans-serif;color:var(--app-ink);text-overflow:ellipsis;white-space:nowrap}
.cast-card__info small{min-height:25px;font-size:10.5px;line-height:1.3;color:var(--app-muted)}
.cast-card__check{position:absolute;z-index:2;top:9px;right:9px;display:grid;width:24px;height:24px;place-items:center;border:2px solid var(--app-surface);border-radius:50%;background:var(--app-ink);color:var(--app-surface);font-size:12px;font-weight:800;opacity:0;transform:scale(.8);transition:opacity .18s,transform .18s}
.cast-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--cast-accent) 58%,var(--app-line));box-shadow:0 8px 18px #31261b12}
.cast-card:hover{border-color:color-mix(in srgb,var(--cast-accent) 58%,var(--app-line));box-shadow:0 8px 18px #31261b12}
.cast-card:hover .cast-card__art{background:color-mix(in srgb,var(--cast-accent) 12%,var(--cast-bg))}
.cast-card:has(input:checked){border-color:var(--cast-accent);background:color-mix(in srgb,var(--cast-accent) 6%,var(--app-surface));box-shadow:inset 0 0 0 1px var(--cast-accent)}
.cast-card:has(input:checked) .cast-card__check{opacity:1;transform:scale(1)}
.cast-card:has(input:focus-visible){outline:3px solid var(--app-focus);outline-offset:3px}
.cast-personal{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 18px;border:1px solid var(--app-line);border-radius:18px;background:var(--app-surface)}
.cast-personal__portrait{display:block;width:50px;height:50px;padding:2px;border-radius:15px;background:var(--app-surface-2)}
.cast-personal__portrait .avatar-illustration{width:100%;height:100%;object-fit:cover}
.cast-personal h3{margin:0 0 3px;font:600 15px 'Fredoka',sans-serif;color:var(--app-ink)}
.cast-personal p,.cast-save-note{margin:0;font-size:11px;line-height:1.45;color:var(--app-muted)}
.cast-save-note{padding:0 2px;text-align:right}

.cfg-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px 22px 22px; }
.cfg-level { position: relative; display: grid; gap: 5px; padding: 18px 18px 16px; border: 1.5px solid var(--app-line-2); border-radius: 18px; background: var(--app-bg); cursor: pointer; transition: border-color .2s, background .2s, transform .25s var(--app-ease), box-shadow .2s; }
.cfg-level:hover { transform: translateY(-2px); }
.cfg-level__emoji { font-size: 28px; line-height: 1; }
.cfg-level strong { font: 600 15px/1.25 'DM Sans', sans-serif; color: var(--app-ink); }
.cfg-level small { font: 700 12px/1 'DM Sans', sans-serif; letter-spacing: .08em; color: var(--app-muted); }
.cfg-level::after { content: ''; position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--app-line-2); background: var(--app-surface); }
.cfg-level:has(input:checked) { border-color: var(--app-accent-2); background: var(--app-accent-soft); box-shadow: 0 3px 0 var(--app-accent-2); }
.cfg-level:has(input:checked)::after { border: 0; background: var(--app-accent-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 14px no-repeat; }

.cfg-plan { display: grid; gap: 14px; padding: 26px 28px 28px; border-radius: 26px; background: radial-gradient(circle at 92% -10%, #4e7d5c 0, transparent 52%), radial-gradient(circle at 0 120%, #f5c94033 0, transparent 50%), var(--app-forest); color: #fff8e6; box-shadow: var(--app-shadow); }
.cfg-plan--pro { background: radial-gradient(circle at 92% -10%, #7a58b8 0, transparent 52%), radial-gradient(circle at 0 120%, #f5c94033 0, transparent 50%), #1c1631; }
.cfg-plan__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cfg-plan__name { font: 500 15px/1 'DM Sans', sans-serif; color: #fff8e6b3; }
.cfg-plan__name b { font: 600 22px/1 'Fredoka', sans-serif; color: #fffdf4; }
.cfg-plan .cfg-pill { background: #ffffff1f; color: #fff8e6; }
.cfg-plan__price { margin: 0; font: 600 48px/1 'Fredoka', sans-serif; letter-spacing: -1.5px; color: #fffdf4; }
.cfg-plan__price small { margin-left: 6px; font: 500 15px 'DM Sans', sans-serif; letter-spacing: 0; color: #fff8e6a6; }
.cfg-plan ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.cfg-plan li { position: relative; padding-left: 28px; font-size: 14.5px; line-height: 1.4; color: #fff8e6e0; }
.cfg-plan li::before { content: ''; position: absolute; left: 0; top: 0; width: 19px; height: 19px; border-radius: 50%; background: #f5c940 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23362900' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat; }
.cfg-plan .cfg-btn--primary { justify-self: start; margin-top: 6px; min-height: 48px; padding: 0 22px; font-size: 15px; box-shadow: 0 4px 0 #b88a14; }

.cfg-expand > summary { list-style: none; }
.cfg-expand > summary::-webkit-details-marker { display: none; }
.cfg-expand[open] > summary .cfg-btn { opacity: .55; }
.cfg-form { display: grid; gap: 8px; max-width: 440px; padding: 2px 22px 22px; animation: td-rise .35s var(--app-ease) both; }
.cfg-form label { margin-top: 4px; font: 600 13.5px/1.3 'DM Sans', sans-serif; color: var(--app-ink-2); }
.cfg-form .cfg-btn { justify-self: start; margin-top: 10px; }

/* Aparência: cada tema mostra uma miniatura do próprio app. */
.cfg-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 14px 22px 22px; }
.cfg-theme { position: relative; display: grid; gap: 10px; cursor: pointer; }
.cfg-theme__mock { display: flex; gap: 6px; height: 104px; padding: 8px; overflow: hidden; border: 2px solid var(--app-line-2); border-radius: 18px; transition: border-color .2s, transform .3s var(--app-ease), box-shadow .2s; }
.cfg-theme__mock i { display: grid; align-content: start; gap: 6px; border-radius: 9px; }
.cfg-theme__mock b { display: block; height: 7px; border-radius: 4px; }
.cfg-theme__mock .m-side { width: 26%; padding: 7px 6px; }
.cfg-theme__mock .m-main { flex: 1; padding: 3px; }
.cfg-theme__mock .m-hero { height: 38px; border-radius: 9px; }
.cfg-theme__mock .m-line { width: 82%; }
.cfg-theme__mock .m-line--short { width: 52%; }
.cfg-theme__mock--light { background: #f7f4ea; }
.cfg-theme__mock--light .m-side { background: #fffdf5; box-shadow: 0 0 0 1px #e4e3d4; }
.cfg-theme__mock--light .m-side b { background: #e6e4d4; }
.cfg-theme__mock--light .m-side b:first-child { background: #f5c940; }
.cfg-theme__mock--light .m-hero { background: linear-gradient(90deg, #1f4234 45%, #8cc6dc); }
.cfg-theme__mock--light .m-line { background: #dcdfcd; }
.cfg-theme__mock--dark { background: #0f1612; }
.cfg-theme__mock--dark .m-side { background: #16201b; box-shadow: 0 0 0 1px #243129; }
.cfg-theme__mock--dark .m-side b { background: #2a3830; }
.cfg-theme__mock--dark .m-side b:first-child { background: #f5c940; }
.cfg-theme__mock--dark .m-hero { background: linear-gradient(90deg, #0b1711 45%, #4b7d8f); }
.cfg-theme__mock--dark .m-line { background: #26332c; }
.cfg-theme__mock--system { background: linear-gradient(118deg, #f7f4ea 50%, #0f1612 50%); }
.cfg-theme__mock--system .m-side { background: #fffdf5; box-shadow: 0 0 0 1px #e4e3d4; }
.cfg-theme__mock--system .m-side b { background: #e6e4d4; }
.cfg-theme__mock--system .m-side b:first-child { background: #f5c940; }
.cfg-theme__mock--system .m-hero { background: linear-gradient(90deg, #1f4234 45%, #4b7d8f); }
.cfg-theme__mock--system .m-line { background: #8a927f66; }
.cfg-theme__label { display: flex; align-items: center; gap: 8px; font: 600 14px/1 'DM Sans', sans-serif; color: var(--app-ink-2); }
.cfg-theme__label::after { content: ''; width: 18px; height: 18px; margin-left: auto; border-radius: 50%; border: 1.5px solid var(--app-line-2); transition: border .2s, background .2s; }
.cfg-theme:hover .cfg-theme__mock { transform: translateY(-3px); }
.cfg-theme:has(input:checked) .cfg-theme__mock { border-color: var(--app-accent-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-accent) 30%, transparent); }
.cfg-theme:has(input:checked) .cfg-theme__label { color: var(--app-ink); }
.cfg-theme:has(input:checked) .cfg-theme__label::after { border: 5px solid var(--app-accent-2); }
.cfg-theme:has(input:focus-visible) .cfg-theme__mock { outline: 3px solid var(--app-focus); outline-offset: 3px; }

.cfg-scale { display: grid; gap: 14px; padding: 14px 22px 22px; }
.cfg-segment { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 16px; background: var(--app-sunken); }
.cfg-segment__opt { position: relative; display: grid; justify-items: center; align-content: end; gap: 5px; min-height: 64px; padding: 10px 6px; border-radius: 12px; color: var(--app-muted); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.cfg-segment__opt span { font-family: 'Fredoka', sans-serif; font-weight: 600; line-height: 1; }
.cfg-segment__opt small { font: 700 11.5px/1 'DM Sans', sans-serif; }
.cfg-segment__opt:hover { color: var(--app-ink); }
.cfg-segment__opt:has(input:checked) { background: var(--app-surface); color: var(--app-ink); box-shadow: 0 1px 2px #0000001a, 0 6px 14px -6px #00000026; }
.cfg-scale__preview { display: flex; margin: 0; padding: 18px; border: 1px dashed var(--app-line-2); border-radius: 16px; background: var(--app-bg); }
.cfg-scale__preview span { padding: 11px 16px; border-radius: 18px 18px 18px 6px; background: var(--app-surface); box-shadow: 0 0 0 1px var(--app-line); font: 500 16px/1.35 'Fredoka', sans-serif; color: var(--app-ink); }

@keyframes cfg-mark { from { transform: scaleY(.2); opacity: 0; } }

@media (max-width: 900px) {
  .cfg-page { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .cfg-nav { position: static; min-width: 0; }
  .cfg-nav__me, .cfg-nav__group, .cfg-nav hr { display: none; }
  .cfg-nav nav { display: flex; gap: 8px; margin: 0 -16px; padding: 2px 16px 6px; overflow-x: auto; scrollbar-width: none; }
  .cfg-nav nav::-webkit-scrollbar { display: none; }
  .cfg-nav__item { width: auto; flex: none; padding: 10px 14px; border: 1px solid var(--app-line); white-space: nowrap; }
  .cfg-nav__item[aria-current="page"] { border-color: transparent; background: var(--app-accent); color: #362900; box-shadow: none; }
  .cfg-nav__item[aria-current="page"] svg { color: #362900; }
  .cfg-nav__item[aria-current="page"]::before { content: none; }
  .cfg-avatars { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .avatar-studio{grid-template-columns:1fr}.avatar-studio__preview{position:static}.avatar-presets .cfg-avatars{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cast-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .cast-feature{grid-template-columns:minmax(175px,.8fr) minmax(0,1fr);gap:18px;padding-inline:22px}
}
@media (max-width: 600px) {
  .cfg-row { flex-wrap: wrap; }
  .cfg-row--form .cfg-row__control { flex: 1 1 100%; }
  .cfg-row--toggle { flex-wrap: nowrap; }
  .cfg-levels { grid-template-columns: 1fr; }
  .cfg-themes { gap: 10px; padding-inline: 16px; }
  .cfg-theme__mock { height: 84px; }
  .cfg-theme__label { justify-content: center; font-size: 13px; }
  .cfg-theme__label::after { content: none; }
  .cfg-card-me { grid-template-columns: auto minmax(0, 1fr); }
  .cfg-card-me .cfg-pill { grid-column: 2; justify-self: start; margin: 8px 0 0; }
  .cfg-card-me__face { width: 78px !important; height: 78px !important; margin-top: -39px; }
  .cast-feature{grid-template-columns:minmax(108px,.72fr) minmax(0,1.35fr);gap:11px;min-height:190px;padding:10px 12px;text-align:left}.cast-feature__art{min-height:160px;place-items:center}.cast-feature__art img{height:158px;width:132px}.cast-feature__copy{justify-items:start;margin:0}.cast-feature__copy h3{font-size:28px}.cast-feature__copy>strong{font-size:12px}.cast-feature__copy p{font-size:11px;line-height:1.4}.cast-feature__note{max-width:100%;padding:7px 9px;font-size:9.5px}.cast-picker>legend{display:grid;gap:3px;font-size:16px}.cast-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.cast-card{grid-template-rows:138px auto;padding:7px 7px 10px;border-radius:17px}.cast-card__art{height:138px}.cast-card__info strong{font-size:14px}.cast-card__info small{font-size:10px}.cast-personal{grid-template-columns:46px minmax(0,1fr);gap:11px;padding:12px}.cast-personal__portrait{width:44px;height:44px}.cast-personal .cfg-btn{grid-column:2;justify-self:start}.cast-save-note{text-align:left}
}

@media (prefers-reduced-motion: reduce) {
  .td-stage *, .td-page *, .cfg-page *, .cast-gallery * { animation: none !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Reduzir movimento (Ajustes → Aparência): vale para o site inteiro.
   ========================================================================== */
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after {
  animation-duration: .001ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

/* Troca de tema: o tema novo abre num círculo a partir da opção escolhida. */
html.is-theme-switch::view-transition-old(root), html.is-theme-switch::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ==========================================================================
   TEMA ESCURO — só dentro do app. Landing, conta e onboarding têm arte
   pintada para o dia e continuam claros.
   ========================================================================== */
html[data-theme="dark"]:has(> body:is([data-screen="app"], [data-screen="session"])) { color-scheme: dark; background: var(--app-bg); }
html[data-theme="dark"] body:is([data-screen="app"], [data-screen="session"]) { background: var(--app-bg); }
/* Nas outras abas, só o texto que fica direto sobre o fundo clareia; cartões
   e cenas ilustradas (trilha, sala do Tato, cidades) continuam pintados de dia. */
html[data-theme="dark"] body[data-screen="app"] :is(.board-heading h1, .board-intro b, .tato-call__head h1) { color: var(--app-ink); }
html[data-theme="dark"] body[data-screen="app"] :is(.board-heading p, .board-intro p, .tato-call__head p, .tato-call__headnote, .tato-call__under) { color: var(--app-muted); }
html[data-theme="dark"] body[data-screen="app"] :is(.board-heading .eyebrow, .tato-call__eyebrow) { color: var(--app-accent-ink); }
html[data-theme="dark"] body[data-screen="app"] .board-heading { border-color: var(--app-line); }
/* Prática: o cabeçalho fica sobre o fundo; palco e cartão de resposta são cena de dia. */
html[data-theme="dark"] body[data-screen="session"] .bt-practice__where b { color: var(--app-ink); }
html[data-theme="dark"] body[data-screen="session"] :is(.bt-practice__where span, .bt-practice__time) { color: var(--app-muted); }
html[data-theme="dark"] body[data-screen="session"] .bt-steps li:not(.is-done):not(.is-current) { background: #ffffff1f; }
html[data-theme="dark"] body:is([data-screen="app"], [data-screen="session"]) :is(button, a, summary):focus-visible { outline-color: var(--app-focus); }

html[data-theme="dark"] body:is([data-screen="app"], [data-screen="session"]) .sidebar { border-color: var(--app-line); background: #141d18f2; box-shadow: 0 6px 0 #0a100d, 0 18px 45px #00000059; }
html[data-theme="dark"] body:is([data-screen="app"], [data-screen="session"]) .sidebar .brand { color: var(--app-ink); }
html[data-theme="dark"] body:is([data-screen="app"], [data-screen="session"]) .side-nav button { color: var(--app-muted); }
html[data-theme="dark"] body:is([data-screen="app"], [data-screen="session"]) .side-nav button:hover { background: var(--app-surface-2); color: var(--app-ink); }
html[data-theme="dark"] body:is([data-screen="app"], [data-screen="session"]) .side-nav button.active { border-color: #d9a91f; background: var(--app-accent); color: #2f2500; box-shadow: 0 3px 0 #9c7712; }
html[data-theme="dark"] body:is([data-screen="app"], [data-screen="session"]) .call-nav b { background: #2a3830; color: #b9d7a8; }
html[data-theme="dark"] body:is([data-screen="app"], [data-screen="session"]) .side-plan { border-color: #5a4a1a; background: linear-gradient(135deg, #2c2612, #1b211b); color: var(--app-ink); }
html[data-theme="dark"] body:is([data-screen="app"], [data-screen="session"]) .side-plan small { color: var(--app-accent-ink); }
html[data-theme="dark"] body:is([data-screen="app"], [data-screen="session"]) .side-plan:hover { box-shadow: 0 4px 0 #5a4a1a; }
html[data-theme="dark"] body:is([data-screen="app"], [data-screen="session"]) .side-footer { color: var(--app-muted); }
html[data-theme="dark"] body:is([data-screen="app"], [data-screen="session"]) .buddy-toggle { color: var(--app-ink); }
html[data-theme="dark"] body:is([data-screen="app"], [data-screen="session"]) .buddy-toggle i { color: var(--app-muted); }
html[data-theme="dark"] body:is([data-screen="app"], [data-screen="session"]) .tato-buddy p { border-color: var(--app-line-2); background: var(--app-surface-2); color: var(--app-ink-2); }
@media (max-width: 760px) {
  html[data-theme="dark"] body:is([data-screen="app"], [data-screen="session"]) .buddy-toggle { border-color: var(--app-line-2); background: var(--app-surface); box-shadow: 0 4px 0 #0a100d; }
}

/* A sequência no cabeçalho do Hoje. */
html[data-theme="dark"] body[data-screen="app"] .streak-chip { border-color: #5a4a1a; background: linear-gradient(135deg, #2d2511, #221c0e); color: #ffecb3; box-shadow: 0 3px 0 #120e05; }
html[data-theme="dark"] body[data-screen="app"] .streak-chip small { color: #d9c188; }
html[data-theme="dark"] body[data-screen="app"] .streak-chip.sk-chip--apagada { border-color: var(--app-line-2); background: var(--app-surface); color: var(--app-ink-2); box-shadow: 0 3px 0 #0a100d; }
html[data-theme="dark"] body[data-screen="app"] .streak-chip.sk-chip--apagada small { color: var(--app-muted); }

/* O palco à noite: a cidade continua de dia, mas a moldura escurece junto. */
html[data-theme="dark"] .td-stage { box-shadow: 0 0 0 1px #ffffff12, 0 34px 60px -30px #000000cc; }
html[data-theme="dark"] .cfg-card-me__banner { background: radial-gradient(circle at 1.5px 1.5px, #0000002e 1.5px, transparent 2px) 0 0 / 16px 16px, linear-gradient(120deg, color-mix(in srgb, var(--me) 70%, #0f1612), color-mix(in srgb, var(--me) 30%, #0f1612)); }
html[data-theme="dark"] .cfg-btn--primary, html[data-theme="dark"] .td-cta { color: #2f2500; }
html[data-theme="dark"] .cfg-segment { background: #0b110e; }
html[data-theme="dark"] .cfg-plan:not(.cfg-plan--pro) { background: radial-gradient(90% 120% at 100% 0, #2f5a40 0, transparent 60%), radial-gradient(circle at 0 120%, #f5c9401f 0, transparent 50%), #15281e; box-shadow: 0 0 0 1px #ffffff0f, var(--app-shadow); }
html[data-theme="dark"] .cfg-segment__opt:has(input:checked) { background: #26332c; box-shadow: 0 0 0 1px #3a4a41, 0 6px 14px -6px #000; }

/* Internal screens: a readable floor for small labels and consistent nav icons. */
/* O piso é 11px; o teto evita que `1em` herde 16px do bloco e transforme o rótulo num título. */
body:is([data-screen=app],[data-screen=session]) .eyebrow { font-size:clamp(11px,1em,12px); }

/* Revisão de 15/09 — ajustes de consistência entre telas. */
/* Paywall: a lista do plano com menos itens se esticava até a altura dos vizinhos. */
.pw-plan ul { align-content: start; }
.pw-plan .plan-bill b { white-space: nowrap; }
/* Boas-vindas: "Campus Valley" virava "Campus V…"; o nome pode ocupar duas linhas. */
.wl-city small { white-space: normal; overflow: visible; text-overflow: clip; text-align: center; line-height: 1.15; }
/* Resumo da aula: lista, nota, sugestão de nível e melhor fala tinham quatro larguras diferentes. Uma coluna só. */
.bt-result :is(.lesson-achievements, .lesson-evidence, .level-nudge, .result-best, .result-notes, .result-takeaway) { max-width: 440px; margin-left: auto; margin-right: auto; }
.bt-result .lesson-evidence { text-align: center; }
.bt-result .lesson-achievements { width: 100%; }
.bt-result .level-nudge { text-align: left; }
body:is([data-screen=app],[data-screen=session]) :is(.home-feature,.rhythm-card,.panel-heading,.app-head,.board-heading,.voice-header) .eyebrow { font-size:11px; }
.lesson-starter>span,.learning-speech>span,.phrase-ladder span,.result-takeaway>span { font-size:11px; }
.board-start { font-size:10.5px; }
.side-nav .nav-icon { flex-shrink:0; width:20px; height:20px; }
.side-nav button { gap:10px; }
.side-footer { font-size:11px; line-height:1.55; }
@media(max-width:760px) { .side-nav .nav-icon { width:18px; height:18px; } }
/* fluid-world.css pins the footer at 9px with !important; override it the same way. */
.sidebar .side-footer { font-size:11.5px!important; line-height:1.55; }

/* A barra de abas ganhou a quinta aba (Ajustes) e depois a sexta (Ranking), mas refinement.css ainda
   dividia em 4 colunas: entre 761 e 1100px, "Ajustes" caía numa segunda linha
   e a barra de 78px cortava a aba pela metade. */
body:is([data-screen=app],[data-screen=session]) .side-nav { grid-template-columns:repeat(6,minmax(0,1fr)); }

/* Incremental experience polish: preserve the existing world and app shell. */
body[data-screen="app"] :is(h1,h2,h3) { text-wrap:balance; }
body[data-screen="app"] :is(p,.place-skills) { text-wrap:pretty; }
.city-open-canvas .city-open-title { max-width:calc(100% - 140px); }
.city-open-canvas .city-open-title>div { flex-wrap:wrap; justify-content:center; gap:4px 10px; }
.city-open-canvas .city-open-title h1 { font-size:22px; }
.city-open-canvas .city-open-title p { display:none; }
.city-open-canvas .city-open-title .eyebrow { font-size:9px; opacity:1; }
.city-open-canvas .city-title-arrow { min-width:44px; min-height:44px; }
.city-open-canvas .city-dock-chip { min-height:44px; }
.city-open-canvas .city-dock-chip:focus-visible { outline:3px solid var(--pill-ink); outline-offset:-3px; }
.city-open-canvas .city-place-list small { color:#4e6553; }
.place-dialog { border-radius:24px; }
.place-dialog-art { isolation:isolate; overflow:hidden; }
.place-dialog-art>.bt-city { position:absolute; inset:0; width:100%; height:100%; min-width:0; border-radius:0; z-index:-1; }
.place-dialog-art>.bt-city>svg { width:100%; height:100%; }
.place-dialog-art:after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,#17332755,transparent 70%); z-index:-1; pointer-events:none; }
.place-city-label { background:#fffdf5ed; color:#203c2c; padding:7px 10px; border-radius:8px; font:600 11px/1.4 'DM Sans',sans-serif; }
.place-welcome { display:none; }
.place-dialog-content { padding:28px; }
.place-dialog-content h2 { margin-block:8px 12px; font-size:30px; }
.place-dialog-content>p { line-height:1.6; }
.place-preview-help { margin:20px 0; padding-top:14px; border-top:1px solid var(--app-line,#d9dfcf); }
.place-preview-help summary { min-height:44px; cursor:pointer; color:var(--app-ink,#203c2c); font:600 13px/1.5 'DM Sans',sans-serif; }
.place-preview-help blockquote { margin:8px 0; padding:12px 16px; border-left:2px solid var(--place-accent,#f8c637); color:var(--app-ink,#203c2c); font:600 17px/1.5 'DM Sans',sans-serif; }
.place-preview-help p { font-size:12px; color:var(--app-muted,#506650); line-height:1.5; }
.place-close { min-width:44px; min-height:44px; }
.place-dialog .destination-note { font:400 12px/1.5 'DM Sans',sans-serif; color:var(--app-muted,#506650); }
html[data-theme="dark"] .place-dialog { background:var(--app-surface,#17221c); color:var(--app-ink,#eef3e6); border:1px solid var(--app-line,#33433a); }
html[data-theme="dark"] .place-dialog-content :is(h2,.place-role,#selected-place-description,.place-skills) { color:var(--app-ink,#eef3e6); }
html[data-theme="dark"] .place-facts span { background:var(--app-surface-2,#26332c); color:var(--app-ink,#eef3e6); border-color:var(--app-line,#33433a); }
html[data-theme="dark"] .city-open-canvas .city-place-list small { color:#b8c8b8; }
@media(max-width:1100px) {
 .city-open-canvas .city-open-title { max-width:calc(100% - 58px); margin-right:58px; }
 .city-open-canvas .city-dock-chip[aria-pressed="true"] span { display:inline; font-size:11px; font-weight:600; padding-right:6px; }
 body[data-screen="app"] .main { padding-bottom:calc(112px + env(safe-area-inset-bottom))!important; }
 body[data-screen="app"] { scroll-padding-bottom:112px; }
 .city-open-canvas .city-place-list li { scroll-margin-bottom:112px; }
}
@media(max-width:560px) {
 .place-dialog { width:calc(100% - 24px); max-height:calc(100dvh - 24px); overflow-y:auto; border-radius:22px; }
 .place-dialog-art { min-height:150px; height:160px; }
 .place-dialog-content { padding:22px; }
 .place-dialog-content h2 { font-size:28px; }
 .place-dialog .place-facts { gap:6px; flex-wrap:wrap; }
 .place-dialog .city-start-button { min-height:48px; font-size:15px; }
 .city-open-canvas .city-open-title h1 { font-size:20px; }
 .city-open-canvas .city-place-list button { min-height:64px; }
}
@media(prefers-reduced-motion:reduce) { .place-dialog-art * { animation:none!important; transition:none!important; } }

/* Shared finishing: familiar layout, cleaner controls and readable content. */
body[data-screen="app"] .side-nav button { font-family:'DM Sans',sans-serif; }
body[data-screen="app"] .side-nav button:focus-visible { outline:3px solid var(--app-focus,#315d42); outline-offset:3px; }
body[data-screen="app"] :is(.td-heading,.board-heading) h1 { letter-spacing:-.025em; text-wrap:balance; }
body[data-screen="app"] :is(.td-heading,.board-heading) p { max-width:65ch; line-height:1.6; }
body[data-screen="app"] :is(.cfg-panel,.cfg-section) input::placeholder { color:var(--app-muted,#526854); opacity:1; }
body[data-screen="app"] :is(.cfg-panel,.cfg-section) :is(button,input,select) { min-height:44px; }
body[data-screen="app"] .city-place-list button:focus-visible { outline:3px solid var(--app-focus,#315d42); outline-offset:3px; }
body[data-screen="app"] .city-place-list small { white-space:normal; line-height:1.5; }

.place-dialog .place-city-label { top:16px; left:16px; max-width:calc(100% - 84px); width:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.td-route-details { border:1px solid var(--app-line); border-radius:20px; background:var(--app-surface); overflow:hidden; }
.td-route-details>summary { cursor:pointer; padding:18px 20px; min-height:64px; color:var(--app-ink); font:600 14px/1.5 'DM Sans',sans-serif; }
.td-route-details>summary span { display:block; font:400 12px/1.6 'DM Sans',sans-serif; color:var(--app-muted); margin-left:18px; }
.td-route-details[open]>summary { border-bottom:1px solid var(--app-line); }
.td-route-details .td-retention { box-shadow:none; border:0; border-radius:0; }
.td-head h1 { letter-spacing:-.025em; }
@media(max-width:560px) { .td-retention>header { flex-wrap:wrap; gap:12px; } .td-retention h2 { font:600 20px/1.3 'DM Sans',sans-serif; } }

/* Legacy place styles use fixed green text; restore dark-theme contrast. */
html[data-theme="dark"] .place-dialog :is(.destination-note,.place-skills span,.place-dialog-content>.eyebrow) { color:#b8c8b8!important; }
/* O interior ilustrado é compartilhado pelo produto e pela demonstração. */
.bt-room__illustration { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; pointer-events:none; user-select:none; }
.bt-room[data-illustrated] .bt-room__scene { z-index:0; isolation:isolate; }
.bt-room__scene>.bt-room__illustration { z-index:5; }
.bt-room>.bt-room__illustration.is-foreground { z-index:3; clip-path:inset(71% 0 0); }
@media(max-width:720px) { .bt-room[data-illustrated] .bt-room__illustration { object-position:44% 50%; } }
/* Camadas vetoriais (place-illustration.js): o balcão da frente já vem recortado, e quem atende fica no centro. */
.bt-room>.bt-room__illustration.is-foreground.is-layer { clip-path:none; }
@media(max-width:720px) { .bt-room[data-illustrated] .bt-room__illustration.is-layer { object-position:50% 50%; } }

/* Alvos de toque >= 44x44 (auditoria mobile): só hit area, o desenho visível é o mesmo. */
@media (max-width:359px) {
  /* 6 abas em 320px: a barra encolhia para 259px e cada aba ficava com 42px. */
  body:is([data-screen=app],[data-screen=session]) .sidebar { width:calc(100% - 12px); padding-inline:4px!important; }
  body:is([data-screen=app],[data-screen=session]) .side-nav { gap:0; }
  body:is([data-screen=app],[data-screen=session]) .side-nav button { padding-inline:2px; min-width:44px; }
}
.td-xp { min-height:44px; }
.td-link { min-height:44px; }
.cfg-nav__item { min-height:44px; }
.cfg-btn { min-height:44px; }
body[data-screen="app"] .sidebar>.brand { min-height:44px; }
.transfer-checkpoint{width:min(100% - 40px,880px);margin:32px auto 56px;color:var(--ink,#20362c)}
.checkpoint-card{position:relative;overflow:hidden;padding:clamp(22px,4vw,36px);border:1px solid rgba(37,73,53,.12);border-radius:24px;background:linear-gradient(135deg,#fffdf6 0%,#f5f8ee 100%);box-shadow:0 18px 48px rgba(34,57,40,.08)}
.checkpoint-eyebrow{margin:0 0 10px;color:#627d54;font-size:.72rem;font-weight:800;letter-spacing:.11em}
.checkpoint-card h2{margin:0 0 14px;font-size:clamp(1.3rem,2.8vw,1.8rem);line-height:1.2}
.checkpoint-card>p{max-width:68ch;line-height:1.65}
.checkpoint-privacy,.checkpoint-subtle{color:#607065;font-size:.9rem}
.checkpoint-privacy{margin:16px 0 20px}
.checkpoint-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:46px;padding:11px 18px;border:0;border-radius:14px;background:#275d3a;color:#fff;font:inherit;font-weight:750;cursor:pointer}
.checkpoint-button:hover{background:#1d4a2e}
.checkpoint-button:focus-visible{outline:3px solid #d39a1c;outline-offset:3px}
.checkpoint-button:disabled{opacity:.55;cursor:not-allowed}
.checkpoint-button-secondary{border:1px solid rgba(39,93,58,.22);background:#fff;color:#275d3a}
.checkpoint-button-secondary:hover{background:#f0f5eb}
.checkpoint-scenario{margin:18px 0 4px;color:#496d50;font-weight:750}
.checkpoint-setting{margin:0 0 18px;color:#53655a}
.checkpoint-progress{height:7px;overflow:hidden;border-radius:999px;background:#e0e8d9}
.checkpoint-progress span{display:block;width:var(--checkpoint-progress);height:100%;border-radius:inherit;background:#65954d;transition:width .2s ease}
.checkpoint-step{margin:9px 0;color:#607065;font-size:.85rem}
.checkpoint-prompt{margin:10px 0 20px;padding:18px 20px;border-left:4px solid #dfa92f;border-radius:0 14px 14px 0;background:#fff;font-size:1.08rem;line-height:1.55}
.checkpoint-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.checkpoint-audio{flex:1 1 100%;width:min(100%,420px);min-width:0;min-height:42px}
.checkpoint-recording,.checkpoint-recorded{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:13px 15px;border-radius:14px;background:#fff8e5;color:#473d24}
.checkpoint-recording-actions{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.checkpoint-recording-actions .checkpoint-button{min-height:42px;padding:9px 13px}
.checkpoint-error{color:#9e3030;font-weight:650}
.checkpoint-status{min-height:1.4em;color:#506556;font-size:.9rem}
@media(max-width:600px){.transfer-checkpoint{width:calc(100% - 28px);margin:24px auto 40px}.checkpoint-card{padding:20px;border-radius:19px}.checkpoint-actions>.checkpoint-button{flex:1 1 auto}.checkpoint-recording-actions{width:100%;margin-left:0}.checkpoint-recording-actions .checkpoint-button{flex:1 1 140px}.checkpoint-button{min-height:48px}}
@media(prefers-reduced-motion:reduce){.checkpoint-progress span{transition:none}}
/* Prática V2 — o lugar é o palco (PRACTICE EXPERIENCE V2.md).
   Isolada sob .pv2 / .pv2-result: não corrige as camadas antigas, substitui.
   Movimento: só transform e opacity; nada infinito fora de "ouvindo" e "pensando". */
.pv2, .pv2-result {
  --pv2-paper: #fffdf7;
  --pv2-paper-2: #f6f1e3;
  --pv2-ink: #14241c;
  --pv2-mute: #5b6a5d;
  --pv2-forest: #1c3a2b;
  --pv2-moss: #5f8a5b;
  --pv2-butter: #f8c637;
  --pv2-butter-deep: #dfa518;
  --pv2-accent-text: #785000;
  --pv2-success-text: #386037;
  --pv2-clay: #d9703c;
  --pv2-line: #e6deca;
  --pv2-shadow: 0 18px 50px -22px rgba(16, 32, 24, .55), 0 2px 0 rgba(16, 32, 24, .06);
  --m-instant: 100ms; --m-quick: 180ms; --m-base: 280ms; --m-scene: 620ms;
  --e-out: cubic-bezier(.2, .8, .2, 1); --e-in: cubic-bezier(.4, 0, 1, 1);
  --e-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dock-w: min(560px, calc(100% - 24px));
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--pv2-ink);
}
html[data-theme="dark"] :is(.pv2, .pv2-result) {
  --pv2-paper: #17221c; --pv2-paper-2: #1f2c25; --pv2-ink: #eef2e7; --pv2-mute: #a9b7aa;
  --pv2-line: #33433a; --pv2-forest: #0f1d16;
  --pv2-accent-text: #f8c637; --pv2-success-text: #a2cca0;
}

/* ------------------------------------------------------------------ palco */
/* O palco cobre a tela: a página de trás não rola nem mostra barra. */
html:has(.pv2, .pv2-result), body:has(.pv2, .pv2-result) { overflow: hidden; scrollbar-gutter: auto; }
.pv2 { position: fixed; inset: 0; z-index: 45; overflow: hidden; isolation: isolate; background: var(--pv2-forest); }
.pv2 .pv2-stage, .pv2-result .pv2-result__scene {
  position: absolute; inset: 0; border-radius: 0; box-shadow: none; overflow: hidden; background: var(--room-tint, #efe7d4);
}
.pv2 .bt-room, .pv2-result .bt-room { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; width: 100%; border-radius: 0; }
.pv2 .bt-room__tato {
  width: auto; height: min(46vh, 540px); left: 50%; bottom: 228px;
  transform: translateX(-50%); transition: transform var(--m-base) var(--e-out);
}
.pv2 .bt-room__tato svg { height: 100%; width: auto; }
.pv2-shade { position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background: linear-gradient(to top, rgba(14, 28, 20, .58), rgba(14, 28, 20, 0) 42%), linear-gradient(to bottom, rgba(14, 28, 20, .28), rgba(14, 28, 20, 0) 20%);
  transition: opacity var(--m-scene) var(--e-out);
}
.pv2[data-voice-phase="idle"] .pv2-shade { background: linear-gradient(to top, rgba(14, 28, 20, .72), rgba(14, 28, 20, .18) 60%), linear-gradient(to bottom, rgba(14, 28, 20, .5), rgba(14, 28, 20, 0) 45%); }
/* Quem fala chega um pouco mais perto. */
.pv2[data-voice-phase="speaking"] .bt-room__tato { transform: translateX(-50%) scale(1.02); }

/* ------------------------------------------------------------------ topo */
.pv2-top {
  position: absolute; z-index: 10; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  width: min(960px, calc(100% - 24px)); display: flex; align-items: center; gap: 12px;
  padding: 6px 8px; border-radius: 999px; background: color-mix(in srgb, var(--pv2-paper) 92%, transparent); box-shadow: var(--pv2-shadow);
}
.pv2-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--pv2-paper-2); color: var(--pv2-ink); cursor: pointer; transition: transform var(--m-instant) var(--e-out); }
.pv2-icon:active { transform: scale(.94); }
.pv2-icon[aria-pressed="false"] { opacity: .55; }
.pv2-where { flex: 1; min-width: 0; margin: 0; display: grid; line-height: 1.15; }
.pv2-where b { font: 600 17px/1.15 'Fredoka', 'DM Sans', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv2-where span { font-size: 12px; color: var(--pv2-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv2-beats { display: flex; gap: 5px; margin: 0; padding: 0; list-style: none; }
.pv2-beats li { width: 18px; height: 6px; border-radius: 3px; background: var(--pv2-line); transition: width var(--m-base) var(--e-out), background var(--m-base); }
.pv2-beats li.is-done { background: var(--pv2-moss); }
.pv2-beats li.is-current { width: 30px; background: var(--pv2-butter); }
.pv2-time { font-size: 12px; color: var(--pv2-mute); font-variant-numeric: tabular-nums; min-width: 32px; }

/* ------------------------------------------------------------------ chegada */
.pv2-intro {
  position: absolute; z-index: 6; left: 50%; top: 15vh; transform: translateX(-50%);
  width: min(620px, calc(100% - 40px)); text-align: center; color: #fffdf7;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
  opacity: 0; pointer-events: none; transition: opacity var(--m-base) var(--e-in), transform var(--m-base) var(--e-in);
}
.pv2-intro small { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.pv2-intro h2 { margin: 8px 0 10px; font: 600 clamp(40px, 7vw, 76px)/1 'Fredoka', 'DM Sans', sans-serif; letter-spacing: -.02em; }
.pv2-intro p { margin: 0 auto; max-width: 30ch; font-size: clamp(17px, 2vw, 21px); line-height: 1.4; }
.pv2[data-voice-phase="idle"] .pv2-intro { opacity: 1; animation: pv2-arrive var(--m-scene) var(--e-out) both; }
.pv2[data-voice-phase="idle"] :is(.pv2-line, .pv2-you, .pv2-goal, .pv2-help, .pv2-more, .pv2-hint) { opacity: 0; pointer-events: none; }
@keyframes pv2-arrive { from { opacity: 0; transform: translate(-50%, 14px); } }

/* ------------------------------------------------------------------ fala do personagem */
.pv2-line {
  position: absolute; z-index: 7; left: 50%; top: max(92px, 11vh); margin: 0;
  width: min(600px, calc(100% - 32px)); transform: translateX(-50%);
  transition: opacity var(--m-base) var(--e-out);
}
.pv2-line figcaption { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px 14px; padding: 5px 12px; border-radius: 999px; background: var(--pv2-forest); color: #fffdf7; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; box-shadow: var(--pv2-shadow); }
.pv2-line__state { font-weight: 500; letter-spacing: 0; text-transform: none; opacity: .9; }
.pv2-line__state:empty { display: none; }
.pv2-line__state::before { content: '·'; margin-right: 8px; }
.pv2-caption {
  position: relative; margin: 0; padding: 16px 22px; border-radius: 22px; background: var(--pv2-paper); box-shadow: var(--pv2-shadow);
  font: 500 clamp(19px, 2.2vw, 24px)/1.35 'Fredoka', 'DM Sans', sans-serif; color: var(--pv2-ink);
  border: 2px solid transparent; transition: border-color var(--m-base);
}
.pv2-caption::after { content: ''; position: absolute; left: 50%; bottom: -9px; width: 18px; height: 18px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 0 0 5px 0; }
.pv2[data-voice-phase="speaking"] .pv2-caption { border-color: var(--pv2-butter); }
.pv2-line.is-new .pv2-caption { animation: pv2-pop var(--m-base) var(--e-out); }
@keyframes pv2-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.pv2-dots { position: absolute; right: 18px; bottom: 14px; display: none; gap: 4px; }
.pv2-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--pv2-mute); animation: pv2-dot 1.1s var(--e-out) infinite; }
.pv2-dots i:nth-child(2) { animation-delay: .15s; } .pv2-dots i:nth-child(3) { animation-delay: .3s; }
.pv2[data-voice-phase="processing"] .pv2-dots { display: flex; }
.pv2[data-voice-phase="processing"] .pv2-caption { opacity: .55; }
@keyframes pv2-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
/* Sem legenda (preferência), a fala segue só na voz: o rótulo continua dizendo quem fala. */
.pv2-caption[hidden] { display: none; }

/* ------------------------------------------------------------------ sua fala */
.pv2-you {
  position: absolute; z-index: 8; right: max(16px, calc(50% - 470px)); bottom: calc(var(--dock-h, 230px) + 18px);
  display: grid; justify-items: end; gap: 8px; max-width: min(420px, calc(100% - 32px));
}
.pv2-said { margin: 0; padding: 12px 18px; border-radius: 20px 20px 6px 20px; background: var(--pv2-forest); color: #fffdf7; font: 500 18px/1.35 'DM Sans', sans-serif; box-shadow: var(--pv2-shadow); animation: pv2-pop var(--m-base) var(--e-out); }
.pv2-chip { margin: 0; display: grid; gap: 2px; justify-items: end; padding: 8px 14px; border-radius: 16px; background: var(--pv2-paper); box-shadow: var(--pv2-shadow); font-size: 14px; color: var(--pv2-mute); }
.pv2-chip.is-new { animation: pv2-pop var(--m-base) var(--e-spring); }
.pv2-chip__ok { font-weight: 700; color: var(--pv2-success-text); }
.pv2-chip__label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pv2-accent-text); margin-top: 2px; }
.pv2-chip__text { font: 600 17px/1.3 'Fredoka', 'DM Sans', sans-serif; color: var(--pv2-ink); }
.pv2[data-outcome="retry"] .pv2-chip { color: #6b4b00; background: #fff4cc; }
.pv2[data-outcome="unrated"] .pv2-chip { max-width: 34ch; text-align: right; }
.pv2-me { display: none; position: absolute; z-index: 8; left: max(16px, calc(50% - 470px)); bottom: calc(var(--dock-h, 230px) + 18px); width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 3px solid var(--pv2-paper); box-shadow: var(--pv2-shadow); background: var(--pv2-paper-2); }
.pv2-me .self-avatar, .pv2-me svg { display: block; width: 100%; height: 100%; }
.pv2-me .self-avatar[data-speaking="true"] { outline: 3px solid var(--pv2-butter); outline-offset: -3px; }

/* ------------------------------------------------------------------ dock: a ação do momento */
.pv2-dock {
  position: absolute; z-index: 9; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: var(--dock-w); padding: 16px 18px 14px; border-radius: 28px; background: var(--pv2-paper); box-shadow: var(--pv2-shadow);
  display: grid; justify-items: center; gap: 8px; text-align: center;
}
.pv2-goal { margin: 0; font: 600 19px/1.25 'Fredoka', 'DM Sans', sans-serif; transition: opacity var(--m-base); }
.pv2-goal b { font-weight: 600; }
.pv2-help { display: grid; gap: 8px; width: 100%; }
.pv2-help[hidden] { display: none; }
.pv2-coach { margin: 0; padding: 8px 12px; border-radius: 14px; background: #fff4cc; color: #5a4300; font-size: 15px; }
.pv2-coach[hidden] { display: none; }
.pv2-helpbox { text-align: left; padding: 12px 14px; border-radius: 16px; background: var(--pv2-paper-2); animation: pv2-pop var(--m-base) var(--e-out); }
.pv2-helpbox[hidden] { display: none; }
.pv2-criterion { margin: 0 0 8px; font-size: 13px; color: var(--pv2-mute); }
.pv2-criterion:empty { display: none; }
.pv2-ladder { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pv2-ladder li { display: grid; gap: 1px; }
.pv2-ladder li span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pv2-mute); }
.pv2-ladder li p { margin: 0; font-size: 16px; }
.pv2-ladder li.is-new { animation: pv2-pop var(--m-base) var(--e-out); }
.pv2-fix, .pv2-error { margin: 0; font-size: 14px; color: var(--pv2-clay); }
.pv2-fix p { margin: 0; }
.pv2-fix[hidden], .pv2-error[hidden] { display: none; }

.pv2-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; gap: 12px; }
.pv2-hint { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 6px; border: 0; border-radius: 999px; background: var(--pv2-paper-2); color: var(--pv2-ink); font: 600 14px/1 'DM Sans', sans-serif; cursor: pointer; }
.pv2-hint b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--pv2-paper); font: 700 16px/1 'Fredoka', sans-serif; }
.pv2-hint[aria-expanded="true"] { background: #fff4cc; }

.pv2-mic {
  position: relative; display: grid; place-items: center; width: 84px; height: 84px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--pv2-butter); color: var(--pv2-forest); box-shadow: 0 6px 0 var(--pv2-butter-deep), 0 16px 30px -12px rgba(120, 80, 0, .6);
  transition: transform var(--m-instant) var(--e-out), background var(--m-base), box-shadow var(--m-base);
}
.pv2-mic:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 3px 0 var(--pv2-butter-deep); }
.pv2-mic:disabled { cursor: default; }
.pv2-mic__icon { display: grid; transition: opacity var(--m-quick), transform var(--m-quick); }
.pv2-mic__ring { position: absolute; inset: -6px; border-radius: 50%; border: 3px solid transparent; }
.pv2[data-voice-phase="listening"] .pv2-mic { background: var(--pv2-forest); color: #fffdf7; box-shadow: 0 6px 0 #0d1f16, 0 16px 30px -12px rgba(10, 30, 20, .7); }
.pv2[data-voice-phase="listening"] .pv2-mic__ring { border-color: var(--pv2-moss); animation: pv2-breathe 1.6s var(--e-out) infinite; }
.pv2:is([data-voice-phase="speaking"], [data-voice-phase="processing"], [data-voice-phase="requesting"]) .pv2-mic { background: var(--pv2-paper-2); color: var(--pv2-mute); box-shadow: 0 6px 0 var(--pv2-line); }
.pv2[data-voice-phase="processing"] .pv2-mic__ring { border-color: var(--pv2-butter) transparent transparent; animation: pv2-spin .9s linear infinite; }
.pv2[data-voice-phase="error"] .pv2-mic { background: #fbe1d3; color: var(--pv2-clay); box-shadow: 0 6px 0 #e9b49a; }
.pv2.is-muted .pv2-mic { opacity: .6; }
.pv2[data-voice-phase="preparing"] .pv2-mic { background:var(--pv2-paper-2); color:var(--pv2-mute); box-shadow:0 4px 0 var(--pv2-line); }
.pv2[data-voice-phase="preparing"] .pv2-dots { display:flex; }
.pv2[data-voice-phase="speaking"] .pv2-mic:not(:disabled) { cursor:pointer; }
@keyframes pv2-breathe { 50% { transform: scale(1.08); opacity: .5; } }
@keyframes pv2-spin { to { transform: rotate(1turn); } }

/* Onda: a voz real (--voice-level vem do microfone, escrita só neste dock). */
.pv2-wave { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px; opacity: 0; transition: opacity var(--m-quick); }
.pv2-wave i { width: 5px; height: 34px; border-radius: 3px; background: currentColor; transform: scaleY(calc(.14 + var(--voice-level, 0) * var(--k, 1))); transition: transform 90ms linear; }
.pv2-wave i:nth-child(1), .pv2-wave i:nth-child(7) { --k: .45; }
.pv2-wave i:nth-child(2), .pv2-wave i:nth-child(6) { --k: .75; }
.pv2-wave i:nth-child(3), .pv2-wave i:nth-child(5) { --k: 1; }
.pv2-wave i:nth-child(4) { --k: 1.25; }
.pv2[data-voice-phase="listening"]:not(.is-muted) .pv2-wave { opacity: 1; }
.pv2[data-voice-phase="listening"]:not(.is-muted) .pv2-mic__icon { opacity: 0; transform: scale(.7); }

.pv2-more { justify-self: end; position: relative; }
.pv2-more > summary { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--pv2-paper-2); cursor: pointer; list-style: none; font-size: 13px; letter-spacing: 1px; color: var(--pv2-mute); }
.pv2-more > summary::-webkit-details-marker { display: none; }
.pv2-menu {
  position: absolute; right: 0; bottom: calc(100% + 10px); width: 240px; padding: 8px; border-radius: 20px; background: var(--pv2-paper); box-shadow: var(--pv2-shadow);
  display: grid; gap: 2px; text-align: left; animation: pv2-pop var(--m-quick) var(--e-out);
}
.pv2-menu button, .pv2-note summary { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 12px; background: none; color: var(--pv2-ink); font: 500 14px/1.2 'DM Sans', sans-serif; text-align: left; cursor: pointer; }
.pv2-menu button:hover:not(:disabled), .pv2-note summary:hover { background: var(--pv2-paper-2); }
.pv2-menu button:disabled { opacity: .45; cursor: default; }
.pv2-transport { display: grid; gap: 2px; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--pv2-line); }
.pv2-note p { margin: 4px 10px 8px; font-size: 12px; line-height: 1.45; color: var(--pv2-mute); }

.pv2-label { margin: 2px 0 0; font-weight: 700; font-size: 14px; }
.pv2-status { margin: 0; min-height: 1.2em; font-size: 13px; color: var(--pv2-mute); }
.pv2-status:empty { display: none; }
.pv2-legacy { display: none !important; }

/* ------------------------------------------------------------------ conclusão */
.pv2-result { position: fixed; inset: 0; z-index: 45; overflow-y: auto; display: grid; place-items: center; padding: 24px 16px; background: var(--pv2-forest); }
.pv2-result__scene { position: fixed; filter: saturate(.9); }
.pv2-result__scene .bt-room__tato { width: auto; height: min(46vh, 520px); bottom: 6vh; left: 22%; }
.pv2-result__scene .bt-room__tato svg { height: 100%; width: auto; }
.pv2-result .pv2-shade { background: linear-gradient(to right, rgba(14, 28, 20, .1), rgba(14, 28, 20, .55)); }
.pv2-result__card {
  position: relative; z-index: 5; width: min(520px, 100%); padding: 30px 28px 22px; border-radius: 30px; background: var(--pv2-paper); box-shadow: var(--pv2-shadow);
  display: grid; gap: 14px; animation: pv2-rise var(--m-scene) var(--e-out) both;
}
@media (min-width: 960px) { .pv2-result { justify-items: end; padding-right: max(32px, 8vw); } }
@keyframes pv2-rise { from { opacity: 0; transform: translateY(18px); } }
.pv2-result__seal { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--pv2-butter); color: var(--pv2-forest); box-shadow: 0 5px 0 var(--pv2-butter-deep); animation: pv2-seal 520ms 180ms var(--e-spring) both; }
@keyframes pv2-seal { from { transform: scale(.4); opacity: 0; } }
.pv2-result h1 { margin: 0; font: 600 clamp(32px, 5vw, 42px)/1.05 'Fredoka', 'DM Sans', sans-serif; letter-spacing: -.02em; }
.pv2-result__sub { margin: -6px 0 0; color: var(--pv2-mute); font-size: 16px; }
.pv2-achieved { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pv2-achieved li { display: flex; gap: 10px; align-items: baseline; font-size: 15px; color: var(--pv2-mute); animation: pv2-rise var(--m-base) calc(240ms + var(--i) * 70ms) var(--e-out) both; }
.pv2-achieved li span { flex: none; width: 20px; height: 20px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--pv2-paper-2); font-size: 12px; font-weight: 700; }
.pv2-achieved li.is-done { color: var(--pv2-ink); }
.pv2-achieved li.is-done span { background: var(--pv2-moss); color: #fffdf7; }
.pv2-take { padding: 14px 16px; border-radius: 18px; background: #fff7d9; color: #3b2f00; display: grid; gap: 2px; }
html[data-theme="dark"] .pv2-take { background: #2f2a14; color: #f7e7a8; }
.pv2-take > span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pv2-accent-text); }
.pv2-from { margin: 4px 0 0; text-decoration: line-through; text-decoration-color: rgba(185, 64, 43, .7); opacity: .75; }
.pv2-to { margin: 0; font: 600 20px/1.3 'Fredoka', 'DM Sans', sans-serif; }
.pv2-take small { font-size: 13px; opacity: .85; }
.pv2-facts { margin: 0; display: grid; gap: 10px; }
.pv2-facts div { display: grid; gap: 2px; }
.pv2-facts dt { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pv2-mute); }
.pv2-facts dd { margin: 0; font: 500 17px/1.35 'Fredoka', 'DM Sans', sans-serif; }
.pv2-actions { display: grid; gap: 8px; margin-top: 4px; }
.pv2-primary, .pv2-secondary { min-height: 52px; padding: 12px 18px; border: 0; border-radius: 18px; font: 700 16px/1.2 'DM Sans', sans-serif; cursor: pointer; transition: transform var(--m-instant) var(--e-out); }
.pv2-primary { background: var(--pv2-butter); color: var(--pv2-forest); box-shadow: 0 5px 0 var(--pv2-butter-deep); }
.pv2-primary:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--pv2-butter-deep); }
.pv2-secondary { background: var(--pv2-paper-2); color: var(--pv2-ink); }
.pv2-link { border: 0; background: none; padding: 6px; color: var(--pv2-mute); font: 500 14px/1.3 'DM Sans', sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pv2-fold { border-top: 1px solid var(--pv2-line); padding-top: 10px; }
.pv2-fold summary { cursor: pointer; font-size: 14px; color: var(--pv2-mute); }
.pv2-fold p { font-size: 13px; line-height: 1.5; color: var(--pv2-mute); }
.pv2-transcript { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; }
.pv2-transcript p { margin: 0; }

/* ------------------------------------------------------------------ foco e acessibilidade */
:is(.pv2, .pv2-result) :is(button, summary):focus-visible { outline: 3px solid var(--pv2-butter-deep); outline-offset: 3px; }

/* ------------------------------------------------------------------ celular: vertical e focado */
@media (max-width: 720px) {
  .pv2 { --dock-w: calc(100% - 16px); }
  .pv2-top { gap: 8px; padding: 5px; }
  .pv2-time { display: none; }
  .pv2-beats li { width: 12px; } .pv2-beats li.is-current { width: 22px; }
  .pv2 .bt-room__tato { height: 36dvh; bottom: 196px; }
  .pv2-line { top: calc(max(12px, env(safe-area-inset-top)) + 62px); }
  .pv2-caption { padding: 12px 16px; font-size: 18px; }
  .pv2-intro { top: 18dvh; }
  .pv2-you { right: 12px; left: 12px; justify-items: end; max-width: none; bottom: calc(var(--dock-h, 230px) + 12px); }
  .pv2-said { font-size: 16px; }
  .pv2-me { display: none; }
  .pv2-dock { bottom: max(8px, env(safe-area-inset-bottom)); padding: 14px 14px 12px; border-radius: 24px; }
  .pv2-goal { font-size: 17px; }
  .pv2-hint span { display: none; }
  .pv2-hint { padding: 6px; }
  .pv2-mic { width: 76px; height: 76px; }
  .pv2-result { place-items: end center; padding: 12px 8px max(8px, env(safe-area-inset-bottom)); }
  .pv2-result__scene .bt-room__tato { left: 50%; bottom: auto; top: 8dvh; height: 30dvh; }
  .pv2-result__card { padding: 24px 20px 18px; border-radius: 26px; }
}
@media (max-height: 640px) and (max-width: 720px) {
  .pv2 .bt-room__tato { height: 26dvh; }
  .pv2-line { top: 64px; }
}

/* ------------------------------------------------------------------ entrada no lugar */
html.is-scene-enter::view-transition-old(root), html.is-scene-enter::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.is-scene-enter::view-transition-new(root) { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  :is(.pv2, .pv2-result) *, :is(.pv2, .pv2-result) *::before, :is(.pv2, .pv2-result) *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* Clarity, compact feedback and accessible controls across the existing practice. */
.pv2-mission { position:relative; text-align:left; margin:0 0 8px; width:100%; min-width:0; }
.pv2-mission>summary { min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; list-style:none; color:var(--pv2-mute); font-size:12px; border-bottom:1px solid var(--pv2-line); }
.pv2-mission>summary::-webkit-details-marker { display:none; }
.pv2-mission>summary span:last-child { color:var(--pv2-ink); text-decoration:underline; text-underline-offset:4px; }
.pv2-mission__body { position:absolute; bottom:calc(100% + 12px); left:-4px; right:-4px; padding:20px; background:var(--pv2-paper); border-radius:16px; box-shadow:0 12px 40px #0e1c1440; max-height:min(420px,48dvh); overflow:auto; overscroll-behavior:contain; }
.pv2-mission__body h2 { font:600 18px/1.3 'DM Sans',sans-serif; margin:0 0 8px; letter-spacing:-.02em; }
.pv2-mission__body>p { font-size:13px; line-height:1.55; margin:0 0 16px; color:var(--pv2-mute); }
.pv2-mission__body ol { display:grid; gap:0; padding:0; margin:0; list-style:none; counter-reset:mission; }
.pv2-mission__body li { display:grid; grid-template-columns:24px 1fr; gap:3px 10px; padding:12px 0; border-top:1px solid var(--pv2-line); font-size:14px; line-height:1.4; counter-increment:mission; }
.pv2-mission__body li::before { content:counter(mission); font-variant-numeric:tabular-nums; color:var(--pv2-mute); }
.pv2-mission__body li small { grid-column:2; color:var(--pv2-mute); font-size:11px; }
.pv2-mission__body li[data-mission-state="current"] span { font-weight:700; }
.pv2-mission__body li[data-mission-state="confirmed"]::before { content:'✓'; color:var(--pv2-ink); }
.pv2-mission__body .pv2-mission__note { margin:16px 0 0; font-size:11px; }
.pv2-memory ol { margin:0; padding:0; list-style:none; max-height:28dvh; overflow:auto; overscroll-behavior:contain; }
.pv2-memory li { padding:10px 0; border-top:1px solid var(--pv2-line); }
.pv2-memory li p { margin:0 0 6px; }
.pv2 .bt-room__tato { bottom:calc(var(--dock-h,230px) + 12px); height:clamp(150px,36dvh,440px); }
.pv2 .pv2-stage { animation:pv2-enter-room 650ms cubic-bezier(.16,1,.3,1) both; transform-origin:50% 60%; }
@keyframes pv2-enter-room { from { transform:scale(1.025); } to { transform:scale(1); } }
.pv2 ::selection,.pv2-result ::selection { background:var(--pv2-butter); color:#14241c; }
.pv2 :is(.pv2-mission__body,.pv2-memory ol,.pv2-menu),.pv2-result__card { scrollbar-width:thin; scrollbar-color:var(--pv2-mute) var(--pv2-paper-2); }
@media(max-height:650px) { .pv2 .bt-room__tato { height:24dvh; } .pv2-mission__body { max-height:35dvh; } .pv2-dock { max-height:55dvh; overflow-y:auto; } .pv2-mission__body { position:static; box-shadow:none; margin-top:8px; } }
@media(prefers-reduced-motion:reduce) { .pv2 .pv2-stage { animation:none; } }
.pv2-icon { min-width:44px; min-height:44px; }
.pv2 .pv2-hint { min-width:44px; min-height:44px; }
.pv2-intro h2 { font-size:clamp(32px,4.5vw,58px); }
.pv2-intro p { font:400 17px/1.55 'DM Sans',sans-serif; max-width:34ch; text-wrap:pretty; }
.pv2-result h1 { font:600 34px/1.12 'DM Sans',sans-serif; letter-spacing:-.025em; text-wrap:balance; }
.pv2-result__card { border-radius:24px; gap:14px; box-shadow:0 20px 55px #0e1c1430; }
.pv2-result__sub { line-height:1.55; font-size:14px; }
.pv2-achieved li { flex-wrap:wrap; gap:6px 10px; line-height:1.5; }
.pv2-unverified { font-size:11px; color:var(--pv2-mute); margin-left:30px; flex-basis:100%; }
.pv2-to,.pv2-facts dd { font-family:'DM Sans',sans-serif; font-size:16px; line-height:1.5; }
.pv2-take>span { color:#6c4d0a; }
html[data-theme="dark"] .pv2-take>span { color:#f3ce72; }
.pv2-fold summary { min-height:44px; display:list-item; padding-block:10px; }
.pv2-primary,.pv2-secondary { border-radius:14px; min-height:48px; }
.pv2-result .pv2-primary { box-shadow:0 3px 0 var(--pv2-butter-deep); }
.pv2-menu { max-height:min(480px,60dvh); overflow-y:auto; overscroll-behavior:contain; }
.pv2-menu :is(button,summary) { min-height:44px; }
@media(max-width:720px) {
 .pv2-intro { top:17dvh; }
 .pv2-intro h2 { font-size:34px; }
 .pv2-intro p { font-size:15px; max-width:29ch; }
 .pv2-result { align-items:start; padding-top:max(18px,env(safe-area-inset-top)); }
 .pv2-result__card { padding:24px 20px; }
 .pv2-result h1 { font-size:29px; }
}
.pv2 .bt-room[data-illustrated] .bt-room__tato { bottom:21%; height:clamp(170px,42dvh,480px); }

/* --------------------------------------------------------------- encontro */
/* Objetos do Café Central (practice-v2.js → encounterScene). Desenham só fatos
   confirmados pelo servidor. A camada repete a geometria do object-fit:cover da
   ilustração (1536×1024, 3:2), então as porcentagens são posições na arte:
   quadro verde à direita do Tato, balcão logo abaixo. */
.pv2-props { position: absolute; inset: 0; z-index: 5; pointer-events: none; container-type: size; display: none; }
.pv2-props__art { position: absolute; left: 50%; top: 50%; width: max(100cqw, 150cqh); height: max(100cqh, calc(100cqw / 1.5)); transform: translate(-50%, -50%); container-type: size; }
@media (min-width: 721px) and (min-aspect-ratio: 5/6) { .pv2-props { display: block; } }
.pv2-order { margin: 6px 0 0; font-size: 14px; line-height: 1.35; color: var(--pv2-ink); text-align: center; padding: 8px 12px; border-radius: 12px; background: var(--pv2-paper-2); }
@media (min-width: 721px) and (min-aspect-ratio: 5/6) { .pv2-order { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } }

.pv2-board { position: absolute; left: 73.5%; top: 14%; width: 17%; padding: 1cqw 1.1cqw 1.1cqw; color: #f3efe2; font: 500 1.02cqw/1.25 'DM Sans', sans-serif; background: #1f382c; border: .3cqw solid #9a744a; border-radius: .6cqw; box-shadow: 0 1cqw 1.6cqw -.8cqw rgba(30, 20, 10, .55); transform: rotate(1.2deg); }
.pv2-board::before { content: ''; position: absolute; left: 50%; top: -2.2cqw; width: 5cqw; height: 2cqw; border: .16cqw solid #6b5434; border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; transform: translateX(-50%); }
.pv2-board b { display: block; margin-bottom: .7cqw; font: 600 1.5cqw/1 Fredoka, 'DM Sans', sans-serif; letter-spacing: -.01em; color: #f8e7a8; }
.pv2-board ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .42cqw; }
.pv2-board li { display: flex; justify-content: space-between; gap: .6cqw; align-items: baseline; }
.pv2-board li span { position: relative; }
.pv2-board small { display: block; font-size: .78cqw; opacity: .72; }
.pv2-board em { font-style: normal; font-size: .86cqw; opacity: .85; white-space: nowrap; }
.pv2-board li.is-out span { opacity: .7; }
.pv2-board li.is-out span::after { content: ''; position: absolute; left: -2%; right: -2%; top: .62em; height: .16cqw; border-radius: 2px; background: #f8c637; transform: rotate(-3deg); }
.pv2-board li.is-out em { color: #f8c637; opacity: 1; }
.pv2-board.is-new li.is-out span::after { animation: pv2-chalk 520ms var(--e-out) both; transform-origin: 0 50%; }

.pv2-counter { position: absolute; left: 74.5%; bottom: 28.6%; width: 15%; height: 13%; display: flex; align-items: flex-end; gap: .9cqw; }
.pv2-cup { position: relative; width: 5.2cqw; transform-origin: 50% 100%; filter: drop-shadow(0 .3cqw .25cqw rgba(30, 20, 10, .28)); }
.pv2-cup svg { display: block; width: 100%; height: auto; }
.pv2-cup[data-size="small"] { transform: scale(.82); }
.pv2-cup[data-size="large"] { transform: scale(1.16); }
.pv2-steam { position: absolute; left: 18%; right: 18%; bottom: 100%; height: 2.6cqw; display: flex; justify-content: space-between; }
.pv2-steam i { width: .28cqw; border-radius: 99px; background: rgba(255, 253, 247, .85); animation: pv2-steam 1.8s ease-out 2 both; }
.pv2-steam i:nth-child(2) { animation-delay: .3s; } .pv2-steam i:nth-child(3) { animation-delay: .6s; }
.pv2-plate { width: 6cqw; filter: drop-shadow(0 .3cqw .25cqw rgba(30, 20, 10, .28)); }
.pv2-plate svg { display: block; width: 100%; height: auto; }
.pv2-ticket { position: relative; width: 7.6cqw; padding: .55cqw .65cqw .7cqw; background: #fffdf7; color: #14241c; border-radius: .25cqw; transform: rotate(-3deg); transform-origin: 50% 100%; box-shadow: 0 .4cqw .8cqw -.3cqw rgba(30, 20, 10, .45); font: 500 .78cqw/1.3 'DM Sans', sans-serif; }
.pv2-ticket::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.35cqw; height: .4cqw; background: radial-gradient(circle at .2cqw 0, transparent .2cqw, #fffdf7 .21cqw) 0 0 / .4cqw .4cqw repeat-x; }
.pv2-ticket__head { display: block; font-size: .64cqw; letter-spacing: .14em; text-transform: uppercase; color: #5b6a5d; border-bottom: 1px dashed #c9bfa7; padding-bottom: .3cqw; margin-bottom: .3cqw; }
.pv2-ticket ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15cqw; }
.pv2-ticket li.is-out { color: #8a5a3c; text-decoration: line-through; text-decoration-color: #d9703c; }
.pv2-ticket li.is-out em { font-style: normal; text-decoration: none; display: inline-block; color: #d9703c; }
.pv2-ticket__total { margin: .35cqw 0 0; padding-top: .3cqw; border-top: 1px dashed #c9bfa7; display: flex; justify-content: space-between; }
.pv2-ticket__stamp { position: absolute; right: -.6cqw; top: 1.1cqw; padding: .1cqw .45cqw; border: .16cqw solid #3f7f4f; color: #3f7f4f; border-radius: .3cqw; font: 700 .8cqw/1.2 'DM Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase; transform: rotate(12deg); background: rgba(255, 253, 247, .7); }
.pv2-ticket__stamp.is-void { border-color: #b4532a; color: #b4532a; }
.pv2-ticket[data-state="cancelled"] ul { opacity: .5; }
.pv2-props .is-new:not(.pv2-board) { animation: pv2-prop-in var(--m-base) var(--e-spring) both; }
.pv2-props .pv2-cup.is-new[data-size="small"] { animation-name: pv2-prop-in-small; }
.pv2-props .pv2-cup.is-new[data-size="large"] { animation-name: pv2-prop-in-large; }
.pv2-ticket__stamp.is-new { animation: pv2-stamp 320ms var(--e-spring) both; }
@keyframes pv2-prop-in { from { opacity: 0; transform: translateY(.6cqw) scale(.94); } }
@keyframes pv2-prop-in-small { from { opacity: 0; transform: translateY(.6cqw) scale(.7); } to { transform: scale(.82); } }
@keyframes pv2-prop-in-large { from { opacity: 0; transform: translateY(.6cqw) scale(.98); } to { transform: scale(1.16); } }
@keyframes pv2-stamp { from { opacity: 0; transform: rotate(12deg) scale(1.6); } }
@keyframes pv2-chalk { from { transform: rotate(-3deg) scaleX(0); } }
@keyframes pv2-steam { 0% { opacity: 0; transform: translateY(0) scaleY(.4); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-1.4cqw) scaleY(1); } }
/* Na cena com objetos, a sua fala fica à esquerda: o balcão da direita é do pedido. */
@media (min-width: 721px) and (min-aspect-ratio: 5/6) {
  .pv2[data-encounter] .pv2-you { right: auto; left: max(16px, calc(50% - 470px)); justify-items: start; }
  .pv2[data-encounter] .pv2-said { border-radius: 20px 20px 20px 6px; }
  .pv2[data-encounter] .pv2-chip { justify-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  .pv2-props .is-new, .pv2-board.is-new li.is-out span::after, .pv2-steam i { animation: none !important; }
  .pv2-steam i { opacity: .7; }
}
/* Conclusão do encontro: o que ficou combinado e o próximo passo com motivo. */
.pv2-outcome { margin: 4px 0 14px; padding: 12px 14px; border-radius: 14px; background: var(--pv2-paper-2); border-left: 4px solid var(--pv2-moss); text-align: left; }
.pv2-outcome[data-status="cancelled"], .pv2-outcome[data-status="open"] { border-left-color: var(--pv2-clay); }
.pv2-outcome span, .pv2-next span { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pv2-mute); }
.pv2-outcome p { margin: 4px 0 0; font: 600 17px/1.35 'DM Sans', sans-serif; }
.pv2-next { margin: 12px 0 4px; text-align: left; }
.pv2-next p, .pv2-next__why { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--pv2-ink); }
.pv2-next__why { margin: 0 0 12px; color: var(--pv2-mute); }

/* Só o que muda na frase mais natural fica marcado (como no filme). */
:is(.pv2-chip__text, .pv2-to) mark { background: linear-gradient(transparent 58%, rgba(248, 198, 55, .55) 58%); color: inherit; padding: 0 1px; border-radius: 2px; }

/* Hotel Batata: cartão da reserva (esquerda) e ficha da recepção + chave
   (direita), sobre a cena. Abaixo de 980px a mesma informação fica no painel. */
.pv2-cards { position: absolute; z-index: 6; top: calc(max(16px, env(safe-area-inset-top)) + 76px); left: 16px; right: 16px; display: none; justify-content: space-between; align-items: flex-start; pointer-events: none; }
@media (min-width: 980px) { .pv2-cards { display: flex; } }
@media (min-width: 980px) { .pv2:has(.pv2-cards) .pv2-order { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } }
.pv2-cards__left, .pv2-cards__right { display: grid; gap: 12px; width: clamp(180px, calc((100vw - 660px) / 2 - 16px), 260px); }
.pv2-card { padding: 12px 14px 14px; border-radius: 14px; background: #fffdf7; color: #14241c; box-shadow: var(--pv2-shadow); font: 500 14px/1.35 'DM Sans', sans-serif; }
.pv2-card > span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #5b6a5d; }
.pv2-card b { display: block; margin: 4px 0 6px; font: 600 18px/1.2 Fredoka, 'DM Sans', sans-serif; }
.pv2-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.pv2-booking { transform: rotate(-1.5deg); border-top: 4px solid var(--pv2-butter); }
.pv2-desk { border-top: 4px solid var(--pv2-forest); font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: 13px; }
.pv2-desk b { font-family: inherit; font-size: 15px; }
.pv2-desk li.is-off { color: #b4532a; font-weight: 700; }
.pv2-desk li.is-note { color: #3f7f4f; }
.pv2-desk s { opacity: .6; }
.pv2-desk em { font-style: normal; color: #b4532a; font-weight: 700; }
.pv2-desk[data-state="cancelled"] ul { opacity: .5; }
.pv2-keycard { justify-self: end; width: 150px; aspect-ratio: 1.6; border-radius: 12px; padding: 12px; background: linear-gradient(135deg, #1c3a2b, #2f5a44); color: #fffdf7; box-shadow: var(--pv2-shadow); display: flex; flex-direction: column; justify-content: space-between; }
.pv2-keycard span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.pv2-keycard b { font: 600 30px/1 Fredoka, 'DM Sans', sans-serif; color: #f8c637; }
.pv2-cards .is-new { animation: pv2-prop-in var(--m-base) var(--e-spring) both; }
@media (prefers-reduced-motion: reduce) { .pv2-cards .is-new { animation: none; } }

/* ------------------------------------------------------------------ morador + Tato ao seu lado */
@keyframes bt-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.006, 1.012); } }
.pv2 .bt-room[data-resident] .bt-room__npc { width: auto; height: min(59vh, 680px); bottom: 3vh; filter: none; }
.pv2 .bt-room__npc svg { height: 100%; width: auto; }
.pv2[data-voice-phase="speaking"] .bt-room[data-resident] .bt-room__npc { transform: translateX(-50%) scale(1.015); }
.pv2-result__scene .bt-room[data-resident] .bt-room__npc { height: min(64vh, 700px); bottom: 2vh; }

.pv2-guide { display: flex; align-items: flex-end; gap: 4px; }
.pv2-guide[hidden] { display: none; }
.pv2-guide__tato { flex: none; width: 96px; height: 106px; margin-bottom: -8px; filter: drop-shadow(0 10px 10px rgba(30, 20, 5, .28)); }
.pv2-guide__tato svg { width: 100%; height: 100%; display: block; }
.pv2-guide__bubble {
  display: grid; gap: 4px; max-width: 360px; padding: 10px 14px 12px;
  border-radius: 18px 18px 18px 6px; background: var(--pv2-paper); box-shadow: var(--pv2-shadow);
  animation: pv2-pop var(--m-base) var(--e-out);
}
.pv2-guide__name { font: 700 11px/1 'DM Sans', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--pv2-accent-text); }
.pv2-guide__say { margin: 0; font: 500 15px/1.35 'DM Sans', sans-serif; color: var(--pv2-ink); }
.pv2-guide__say:empty { display: none; }
.pv2-guide .pv2-chip { padding: 0; background: none; box-shadow: none; justify-items: start; }
@media (max-width: 720px) {
  /* celular: o rosto fica no vão entre a fala do morador (topo) e a sua (acima do dock) */
  .pv2 .bt-room[data-resident] .bt-room__npc { height: 38dvh; bottom: calc(var(--dock-h, 230px) - 10px); }
  .pv2-guide__tato { width: 64px; height: 70px; }
  .pv2-guide__say { font-size: 14px; }
  .pv2-guide__bubble { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .bt-room__npc svg { animation: none !important; } }
/* Rostinho de quem fala na etiqueta da fala: no celular o corpo some atrás dos balões. */
.pv2-line__face { display: inline-grid; width: 30px; height: 30px; margin: -6px 6px -6px -8px; border-radius: 50%; overflow: hidden; background: var(--pv2-paper); vertical-align: middle; flex: none; }
.pv2-line__face svg { width: 100%; height: 100%; display: block; }

/* Alvos de toque >= 44px. */
.pv2-menu button, .pv2-note summary { min-height: 44px; }
.pv2-fold summary { display: flex; align-items: center; min-height: 44px; }
.pv2-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
/* Fala primeiro: o mesmo palco e materiais da prática, com a resposta ao alcance. */
.ob4 { overflow-y:auto; }
.ob4 [hidden] { display:none!important; }
.ob4 :is(button,input) { font:inherit; }
.ob4 :is(button,input):focus-visible { outline:3px solid var(--pv2-butter); outline-offset:3px; }
.ob4-top { position:relative; z-index:10; margin:12px auto; width:min(960px,calc(100% - 24px)); display:flex; align-items:center; gap:8px; padding:8px; border-radius:24px; background:var(--pv2-paper); box-shadow:var(--pv2-shadow); }
.ob4-where { flex:1; margin:0; display:grid; min-width:0; line-height:1.3; }
.ob4-where b { font-family:Fredoka,sans-serif; font-size:18px; }
.ob4-where span { font-size:12px; color:var(--pv2-mute); }
.ob4-link { background:transparent; border:0; color:var(--pv2-ink); padding:10px; min-height:44px; cursor:pointer; font-weight:700!important; text-decoration:underline; text-underline-offset:4px; }
.ob4-body { position:relative; z-index:5; width:min(960px,100%); margin:auto; padding:12px 16px 24px; }
.ob4-ask { min-height:calc(100dvh - 120px); display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:clamp(90px,22vh,240px); }
.ob4-line { margin:0; align-self:flex-start; width:min(430px,100%); }
.ob4-line figcaption { display:flex; align-items:center; gap:8px; color:#fffdf7; font-weight:700; text-shadow:0 2px 4px #14241c; }
.ob4-face { width:42px; height:42px; background:var(--pv2-paper); border-radius:50%; overflow:hidden; text-shadow:none; }
.ob4-face svg { width:100%; height:100%; }
.ob4-bubble { position:relative; padding:20px 22px 14px; margin-top:8px; border-radius:6px 24px 24px 24px; background:var(--pv2-paper); box-shadow:var(--pv2-shadow); }
.ob4-bubble p { margin:0 0 8px; }
.ob4-bubble__en { font:500 clamp(22px,3vw,32px)/1.2 Fredoka,sans-serif; }
.ob4-bubble__pt { color:var(--pv2-mute); font-size:14px; }
.ob4-replay { display:flex; align-items:center; gap:8px; min-height:44px; border:0; background:transparent; color:var(--pv2-ink); cursor:pointer; padding:6px 0; }
.ob4-dock { width:min(560px,100%); background:var(--pv2-paper); padding:20px 24px; border-radius:26px; box-shadow:var(--pv2-shadow); text-align:center; }
.ob4-nudge,.ob4-status { margin:0 0 12px; font-weight:600; }
.ob4-primary { display:inline-flex; align-items:center; justify-content:center; gap:10px; border:0; border-bottom:4px solid #b8840e; border-radius:16px; background:#f8c637; color:#14241c; min-height:54px; padding:12px 20px; font-weight:800!important; cursor:pointer; }
.ob4-primary:active { transform:translateY(2px); border-bottom-width:2px; }
.ob4-primary:disabled { cursor:wait; opacity:.8; }
.ob4-mic { width:100%; min-height:64px; }
.ob4-note { font-size:12px; line-height:1.5; color:var(--pv2-mute); margin:10px 0; }
.ob4-row,.ob4-actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; }
.ob4-chip { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:8px 12px; color:var(--pv2-ink); background:var(--pv2-paper-2); border:1px solid var(--pv2-line); border-radius:12px; cursor:pointer; }
.ob4-help,.ob4-alert { padding:14px; margin:12px 0; background:var(--pv2-paper-2); border-radius:14px; text-align:left; line-height:1.5; }
/* o rótulo da dica em cima das palavras (antes saía colado: "Diga uma bebidacoffee") */
.ob4-help p small { display:block; margin-bottom:2px; font-size:13px; opacity:.72; }
.ob4-help p + p { margin-top:8px; }
.ob4-form { text-align:left; }
.ob4-form label { display:block; font-weight:700; margin-bottom:10px; }
.ob4-form__row { display:flex; gap:8px; }
.ob4-form input { flex:1; min-width:0; border:2px solid var(--pv2-line); border-radius:12px; background:var(--pv2-paper-2); color:var(--pv2-ink); padding:12px; width:100%; }
.ob4-said { display:grid; gap:6px; text-align:left; margin:0 0 12px; }
.ob4-said small,.ob4-coach__who { color:var(--pv2-mute); font-size:12px; }
.ob4-coach { display:flex; align-items:center; gap:12px; text-align:left; background:var(--pv2-paper-2); border-radius:16px; padding:12px; }
.ob4-coach__tato { width:62px; flex:none; }
.ob4-coach__tato svg { width:100%; height:auto; }
.ob4-coach h2 { font:500 22px/1.2 Fredoka,sans-serif; margin:4px 0 6px; }
.ob4-coach p { font-size:14px; line-height:1.45; margin:0; }
.ob4-actions { margin-top:14px; }
.ob4-sheet { width:min(740px,100%); margin:20px auto; background:var(--pv2-paper); padding:clamp(20px,4vw,36px); border-radius:28px; box-shadow:var(--pv2-shadow); }
.ob4-sheet h1 { font:500 clamp(28px,4vw,40px)/1.12 Fredoka,sans-serif; margin:0 0 12px; }
.ob4-sub { color:var(--pv2-mute); margin:0 0 24px; }
.ob4-scenes { display:grid; gap:12px; padding:0; list-style:none; margin:0 0 20px; }
.ob4-scene { display:flex; align-items:center; width:100%; text-align:left; padding:0; overflow:hidden; background:var(--pv2-paper-2); color:var(--pv2-ink); border:2px solid var(--pv2-line); border-radius:18px; cursor:pointer; }
.ob4-scene:hover,.ob4-scene.is-active { border-color:#b8840e; }
.ob4-scene__art { width:120px; align-self:stretch; height:auto; object-fit:cover; }
.ob4-scene__copy { padding:16px; display:grid; gap:5px; min-width:0; }
.ob4-scene__copy small { font-weight:700; color:var(--pv2-accent-text); }
.ob4-scene__copy strong { font:500 22px/1.15 Fredoka,sans-serif; }
.ob4-scene__copy em { font-size:12px; font-style:normal; line-height:1.4; color:var(--pv2-mute); }
.ob4-level { border-top:1px solid var(--pv2-line); padding-top:12px; font-size:14px; line-height:1.5; }
.ob4-levels { display:grid; border:0; gap:10px; margin:10px 0; padding:0; }
.ob4-levels label { display:flex; align-items:center; gap:10px; min-height:44px; }
.ob4 .bt-room__tato { bottom:210px; height:min(42vh,420px); }
.ob4-screen[data-ob-step="choose"] .ob4-shade { background:rgba(14,28,20,.65); }
.ob4-dots { display:flex; gap:5px; }
.ob4-dots i { width:6px; height:6px; border-radius:50%; background:currentColor; }
.ob4 .is-recording { box-shadow:0 0 0 calc(3px + var(--lvl)*10px) #f8c63755; }
@media(max-width:480px) {
 .ob4-top { gap:2px; border-radius:18px; padding:6px; }
 .ob4-where b { font-size:15px; }
 .ob4-top .ob4-link { font-size:12px; padding:8px 6px; }
 .ob4-body { padding:8px 12px 20px; }
 .ob4-dock { padding:16px; }
 .ob4-ask { gap:120px; }
 .ob4-scene__art { width:76px; }
 .ob4-scene__copy { padding:12px; }
 .ob4-scene__copy strong { font-size:19px; }
 .ob4-form__row { flex-wrap:wrap; }
 .ob4-form__row input { flex-basis:100%; }
 .ob4-send { width:100%; }
}

/* O caminho à vista: 1 Falar · 2 Escolher · 3 Conta. */
.ob4-steps { position:relative; z-index:9; display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin:-4px auto 0; padding:0; list-style:none; width:min(960px,calc(100% - 24px)); }
.ob4-steps li { display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:3px 12px 3px 4px; border-radius:99px; background:rgba(20,36,28,.72); color:#fffdf7cc; font-size:12px; font-weight:700; letter-spacing:.01em; backdrop-filter:blur(6px); }
.ob4-steps li span { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#fffdf722; font-size:11px; }
.ob4-steps li[aria-current="step"] { background:#f8c637; color:#14241c; }
.ob4-steps li[aria-current="step"] span { background:#14241c; color:#f8c637; }
.ob4-steps li.is-done span { background:#6f9f47; color:#fff; }
/* A frase aparece enquanto a pessoa fala: é a prova de que o Sora ouve. */
.ob4-live { min-height:1.5em; margin:0 0 10px; font:500 20px/1.3 Fredoka,sans-serif; color:var(--pv2-ink); }
.ob4-live:empty { display:none; }
.ob4-level__row { display:flex; align-items:center; gap:8px; justify-content:space-between; }
.ob4-level__row p { margin:0; }
.ob4-level { border-top:0; border-bottom:1px solid var(--pv2-line); padding:0 0 12px; margin:-8px 0 16px; }
@media(max-width:480px) {
 .ob4-steps { gap:4px; }
 .ob4-steps li { padding-right:10px; font-size:11px; }
}
@media (prefers-reduced-motion: reduce) { .ob4-steps li { backdrop-filter:none; } }

/* Alvo de toque >= 44x44 também no topo compacto. */
.ob4-link { min-width:44px; }
/* ==========================================================================
   RANKING (rk-*): pódio + lista de XP, linha do Tato e o convite por link/QR.
   Só lê os tokens --app-* de app-home.css; tema escuro e contraste vêm de lá.
   ========================================================================== */
.rk-page { display: grid; gap: 22px; max-width: 1120px; color: var(--app-ink); }
.rk-card { background: var(--app-surface); border: 1px solid var(--app-line); border-radius: 24px; box-shadow: var(--app-shadow); }
.rk-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; }
.rk-kicker { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 10px; font: 600 13px/1 'DM Sans', sans-serif; letter-spacing: .02em; color: var(--app-muted); }
.rk-kicker svg { color: var(--app-accent-2); }
.rk-head h1 { margin: 0; font: 600 clamp(32px, 3.8vw, 50px)/1.02 'Fredoka', sans-serif; letter-spacing: -1.4px; color: var(--app-ink); }
.rk-sub { margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: var(--app-muted); }
.rk-controls { display: grid; gap: 10px; justify-items: end; }

.rk-tabs, .rk-period { display: inline-flex; padding: 4px; gap: 4px; border-radius: 16px; background: var(--app-sunken); border: 1px solid var(--app-line); }
.rk-tabs button, .rk-period button { min-height: 40px; padding: 0 16px; border-radius: 12px; background: transparent; color: var(--app-ink-2); font: 600 14px/1 'DM Sans', sans-serif; transition: background .18s var(--app-ease), color .18s, box-shadow .18s; }
.rk-tabs button[aria-selected="true"] { background: var(--app-surface); color: var(--app-ink); box-shadow: 0 1px 0 var(--app-line-2), 0 4px 12px -6px #1f3a2e33; }
.rk-period { background: transparent; border: 0; padding: 0; }
.rk-period button { min-height: 34px; padding: 0 12px; font-size: 13px; color: var(--app-muted); border: 1px solid transparent; }
.rk-period button[aria-pressed="true"] { color: var(--app-ink); border-color: var(--app-line-2); background: var(--app-surface); }
.rk-tabs button:focus-visible, .rk-period button:focus-visible, .rk-page :is(button, a, input):focus-visible { outline: 3px solid var(--app-focus); outline-offset: 2px; }

.rk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.rk-board { padding: 22px; min-height: 420px; display: grid; gap: 18px; align-content: start; }
.rk-board:has(> .rk-empty) { min-height: 0; align-content: center; }

/* Linha do Tato: diferença para a próxima pessoa + a conversa que fecha a conta. */
.rk-nudge { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 14px 16px; padding: 12px 16px 12px 10px; border-radius: 18px; background: var(--app-accent-soft); }
.rk-nudge__tato { width: 64px; height: 70px; margin: -14px 0 -6px; }
.rk-nudge__tato svg, .rk-empty__tato svg, .rk-dialog__tato svg { width: 100%; height: 100%; display: block; }
.rk-nudge__copy strong { display: block; font: 600 18px/1.2 'Fredoka', sans-serif; color: var(--app-ink); }
.rk-nudge__copy p { margin: 4px 0 0; font-size: 14px; line-height: 1.4; color: var(--app-ink-2); }
.rk-me-line { margin: -4px 2px 0; font-size: 14px; color: var(--app-muted); }
.rk-me-line strong { color: var(--app-ink); }

.rk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 14px; font: 600 15px/1 'Fredoka', sans-serif; letter-spacing: .2px; text-decoration: none; white-space: nowrap; transition: transform .16s var(--app-ease), box-shadow .16s, background .16s; }
.rk-btn--primary { background: var(--app-accent); color: #4a3700; box-shadow: 0 4px 0 var(--app-accent-2); }
.rk-btn--primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 0 var(--app-accent-2); }
.rk-btn--primary:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--app-accent-2); }
.rk-btn--soft { background: var(--app-surface-2); color: var(--app-ink); border: 1px solid var(--app-line-2); }
.rk-btn--soft:hover:not(:disabled) { background: var(--app-sunken); }
.rk-btn:disabled { opacity: .55; cursor: default; }

/* Pódio: 2º · 1º · 3º, alturas diferentes, avatares de verdade em cima. */
.rk-podium { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 10px; }
.rk-step { display: grid; justify-items: center; gap: 8px; min-width: 0; }
.rk-step__who { display: grid; justify-items: center; gap: 2px; min-width: 0; max-width: 100%; position: relative; text-align: center; }
.rk-step__who strong { margin-top: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 16px/1.2 'Fredoka', sans-serif; }
.rk-step__who span:not(.rk-crown):not(.rk-avatar) { font: 600 13px/1.2 'DM Sans', sans-serif; color: var(--app-muted); }
.rk-step__block { width: 100%; display: grid; place-items: start center; padding-top: 10px; border-radius: 16px 16px 6px 6px; background: var(--rk-step, var(--app-surface-2)); box-shadow: inset 0 -6px 0 #0000000f; }
.rk-step__block b { font: 600 34px/1 'Fredoka', sans-serif; color: var(--rk-step-ink, var(--app-ink)); }
.rk-step--1 { --rk-step: var(--app-accent); --rk-step-ink: #4a3700; }
.rk-step--1 .rk-step__block { height: 120px; }
.rk-step--2 { --rk-step: #dfe6d6; --rk-step-ink: #3a5145; }
.rk-step--2 .rk-step__block { height: 92px; }
.rk-step--3 { --rk-step: #f2dccb; --rk-step-ink: #7a4a2a; }
.rk-step--3 .rk-step__block { height: 70px; }
html[data-theme="dark"] .rk-step--2 { --rk-step: #2c3a32; --rk-step-ink: #dfe8da; }
html[data-theme="dark"] .rk-step--3 { --rk-step: #3d2c22; --rk-step-ink: #f2cfb4; }
.rk-step.is-me .rk-step__who strong { color: var(--app-good); }
.rk-crown { position: absolute; top: -18px; left: 50%; width: 32px; height: 20px; transform: translateX(-50%) rotate(-6deg); z-index: 1; }
.rk-crown svg { width: 100%; height: 100%; fill: var(--app-accent); stroke: #8a6500; stroke-width: 1.6; stroke-linejoin: round; }

.rk-avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; display: block; overflow: hidden; }
.rk-avatar svg { width: 100%; height: 100%; display: block; }
.rk-avatar--podium { width: 72px; height: 72px; box-shadow: 0 0 0 4px var(--app-surface), 0 0 0 6px var(--rk-step, var(--app-line)); }
.rk-step--1 .rk-avatar--podium { width: 84px; height: 84px; }

.rk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: none; }
.rk-row { display: grid; grid-template-columns: 34px 44px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 60px; padding: 8px 10px; border-radius: 16px; }
.rk-row + .rk-row { box-shadow: 0 -1px 0 var(--app-line); }
.rk-row.is-me { background: var(--app-accent-soft); box-shadow: none; }
.rk-row.is-me + .rk-row { box-shadow: none; }
.rk-row__rank { font: 600 17px/1 'Fredoka', sans-serif; color: var(--app-muted); text-align: center; }
.rk-row__name { min-width: 0; display: grid; gap: 3px; }
.rk-row__name strong { font: 600 16px/1.2 'DM Sans', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-row__name small { font-size: 12.5px; color: var(--app-muted); }
.rk-row__xp { font: 600 17px/1 'Fredoka', sans-serif; font-variant-numeric: tabular-nums; }
.rk-row__xp small { font: 600 11px/1 'DM Sans', sans-serif; color: var(--app-muted); letter-spacing: .04em; }
.rk-row__remove { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: transparent; color: var(--app-muted); opacity: .7; }
.rk-row__remove:hover, .rk-row__remove:focus-visible { opacity: 1; background: var(--app-surface-2); }
.rk-row__remove.is-armed { width: auto; padding: 0 10px; background: var(--app-danger-soft); color: var(--app-danger); font: 600 13px/1 'DM Sans', sans-serif; opacity: 1; }
.rk-row:not(:has(.rk-row__remove)) { grid-template-columns: 34px 44px minmax(0, 1fr) auto; }

.rk-visible { display: flex; gap: 12px; align-items: flex-start; margin-top: 4px; padding: 14px 4px 0; border-top: 1px dashed var(--app-line-2); cursor: pointer; }
.rk-visible input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--app-good); flex: none; }
.rk-visible strong { display: block; font-size: 14.5px; }
.rk-visible small { display: block; margin-top: 3px; font-size: 13px; color: var(--app-muted); line-height: 1.4; }

.rk-empty { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: 20px; padding: 18px 8px; }
.rk-empty.rk-card { padding: 28px; }
.rk-empty__tato { width: 132px; height: 145px; }
.rk-empty h2 { margin: 0; font: 600 24px/1.15 'Fredoka', sans-serif; letter-spacing: -.4px; }
.rk-empty p { margin: 8px 0 16px; max-width: 46ch; font-size: 15px; line-height: 1.5; color: var(--app-ink-2); }
.rk-error { display: grid; justify-items: start; gap: 12px; padding: 20px 4px; color: var(--app-ink-2); }

.rk-skeleton { display: grid; gap: 10px; }
.rk-skeleton__podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 10px; margin-bottom: 8px; }
.rk-skeleton i, .rk-skeleton > span { display: block; border-radius: 14px; background: var(--app-sunken); }
.rk-skeleton i:nth-child(1) { height: 150px; } .rk-skeleton i:nth-child(2) { height: 190px; } .rk-skeleton i:nth-child(3) { height: 130px; }
.rk-skeleton > span { height: 56px; }
@media (prefers-reduced-motion: no-preference) {
  .rk-skeleton i, .rk-skeleton > span { animation: rk-pulse 1.4s ease-in-out infinite alternate; }
  @keyframes rk-pulse { to { opacity: .55; } }
  .rk-board[aria-busy="false"] > * { animation: rk-in .36s var(--app-ease) both; }
  .rk-board[aria-busy="false"] > :nth-child(2) { animation-delay: .04s; } .rk-board[aria-busy="false"] > :nth-child(3) { animation-delay: .08s; } .rk-board[aria-busy="false"] > :nth-child(4) { animation-delay: .12s; }
  @keyframes rk-in { from { opacity: 0; transform: translateY(6px); } }
}

/* Convite: o QR é o centro, link e compartilhar logo abaixo. */
.rk-invite { padding: 22px; display: grid; gap: 12px; position: sticky; top: 18px; }
.rk-invite h2 { margin: 0; font: 600 22px/1.15 'Fredoka', sans-serif; letter-spacing: -.3px; }
.rk-invite__lead { margin: -4px 0 4px; font-size: 14px; line-height: 1.45; color: var(--app-ink-2); }
.rk-qr { position: relative; margin: 0 auto; width: min(100%, 236px); display: grid; gap: 8px; justify-items: center; }
.rk-qr .qr-svg { width: 100%; height: auto; display: block; color: #1f3a2e; border-radius: 18px; box-shadow: 0 0 0 1px var(--app-line-2); }
.rk-qr__mark { position: absolute; left: 50%; top: calc((100% - 26px) / 2); width: 19%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 26%; background: #f5c940; padding: 3%; box-shadow: 0 0 0 4px #fff; object-fit: contain; }
.rk-qr figcaption { font-size: 12.5px; color: var(--app-muted); }
.rk-qr__wait { display: block; width: 100%; aspect-ratio: 1; border-radius: 18px; background: var(--app-sunken); }
.rk-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.rk-link input, .rk-paste input { min-width: 0; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--app-line-2); background: var(--app-sunken); color: var(--app-ink); font: 500 14px/1 'DM Sans', sans-serif; }
.rk-link input { text-overflow: ellipsis; }
.rk-share { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.rk-share .rk-btn--primary:only-child { grid-column: 1 / -1; }
.rk-status { margin: 0; min-height: 1.2em; font-size: 13.5px; line-height: 1.4; color: var(--app-muted); }
.rk-status[data-tone="good"] { color: var(--app-good); }
.rk-status[data-tone="bad"] { color: var(--app-danger); }
.rk-paste { display: grid; gap: 8px; padding-top: 14px; border-top: 1px dashed var(--app-line-2); }
.rk-paste label { font-size: 13.5px; font-weight: 600; color: var(--app-ink-2); }
.rk-paste > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.rk-paste input { background: var(--app-surface); }
.rk-rotate { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 2px; background: none; color: var(--app-muted); font-size: 13px; font-weight: 600; text-align: left; }
.rk-rotate small { font-weight: 500; }
.rk-rotate[data-armed="true"] { color: var(--app-danger); }

/* Chegada por /?amigo=CODIGO */
.rk-dialog { width: min(420px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 26px; background: var(--app-surface, #fffdf7); color: var(--app-ink, #1f3a2e); box-shadow: 0 30px 80px -20px #0f1a1466; }
.rk-dialog::backdrop { background: #0f1a1466; backdrop-filter: blur(3px); }
/* O diálogo também abre sobre a landing, cujas regras de h2 mexem em grid: coluna única explícita. */
.rk-dialog__card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 26px 24px 22px; text-align: center; }
.rk-dialog__card > * { grid-column: 1 / -1; grid-row: auto; max-width: none; }
.rk-dialog__faces { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 4px; }
.rk-avatar--dialog { width: 76px; height: 76px; box-shadow: 0 0 0 4px var(--app-accent, #f5c940); }
.rk-dialog__vs { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--app-accent-soft, #fdf2c7); color: var(--app-accent-2, #d9a91f); }
.rk-dialog__tato { width: 70px; height: 78px; }
.rk-dialog h2 { margin: 0; font: 600 24px/1.15 'Fredoka', sans-serif; letter-spacing: -.4px; }
.rk-dialog p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--app-ink-2, #3a5145); }
.rk-dialog__actions { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 8px; }

@media (max-width: 980px) {
  .rk-layout { grid-template-columns: minmax(0, 1fr); }
  .rk-invite { position: static; grid-template-columns: minmax(0, 1fr) 200px; grid-template-areas: "title qr" "lead qr" "link qr" "share qr" "status status" "paste paste" "rotate rotate"; column-gap: 20px; }
  .rk-invite h2 { grid-area: title; } .rk-invite__lead { grid-area: lead; } .rk-qr { grid-area: qr; align-self: start; }
  .rk-link { grid-area: link; } .rk-share { grid-area: share; } .rk-status { grid-area: status; } .rk-paste { grid-area: paste; } .rk-rotate { grid-area: rotate; }
}
@media (max-width: 760px) {
  .rk-page { gap: 16px; }
  .rk-head { align-items: stretch; }
  .rk-controls { justify-items: stretch; width: 100%; }
  .rk-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .rk-period { justify-content: flex-start; }
  .rk-board { padding: 14px; border-radius: 20px; min-height: 0; }
  .rk-nudge { grid-template-columns: 52px minmax(0, 1fr); padding: 12px; }
  .rk-nudge__tato { width: 52px; height: 58px; margin: -6px 0 -4px; }
  .rk-nudge .rk-btn { grid-column: 1 / -1; }
  .rk-nudge__copy strong { font-size: 16.5px; }
  .rk-row { gap: 10px; padding: 8px 6px; grid-template-columns: 26px 40px minmax(0, 1fr) auto auto; }
  .rk-row:not(:has(.rk-row__remove)) { grid-template-columns: 26px 40px minmax(0, 1fr) auto; }
  .rk-avatar { width: 40px; height: 40px; }
  .rk-avatar--podium { width: 58px; height: 58px; }
  .rk-step--1 .rk-avatar--podium { width: 68px; height: 68px; }
  .rk-step__who strong { font-size: 14.5px; }
  .rk-step--1 .rk-step__block { height: 96px; } .rk-step--2 .rk-step__block { height: 72px; } .rk-step--3 .rk-step__block { height: 54px; }
  .rk-step__block b { font-size: 28px; }
  .rk-invite { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: none; padding: 18px; border-radius: 20px; }
  .rk-invite > * { grid-area: auto; }
  .rk-qr { width: min(100%, 220px); }
  .rk-empty, .rk-empty.rk-card { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 16px 6px; }
  .rk-empty__tato { width: 104px; height: 114px; }
  .rk-empty p { margin-inline: auto; }
}