:root {color-scheme:light;--cream:#f6f0e6;--ink:#1c2744;--ink-deep:#0e1628;--coral:#f2534a;--coral-deep:#d63c38;--blush:#ffb4a8;--sun:#ffc83d;--sun-deep:#f0a202;--leaf:#2ebe6a;--leaf-deep:#14964c;--white:#fffdf9;--line:#eadfce;--line-deep:#e7d8c4;--muted:#5e6880;--font:"Nunito","Segoe UI",sans-serif;--radius-control:16px;--radius-panel:28px;--radius-scene:36px;--radius-round:999px;--border:2px;--shadow:0 6px 0 var(--line-deep);--button-shadow:0 4px 0 var(--ink-deep);--ease:cubic-bezier(.2,.8,.2,1);--bounce:cubic-bezier(.175,.885,.32,1.275);--quick:120ms;--standard:240ms;--enter:420ms}
*{box-sizing:border-box}[hidden]{display:none!important}html{scroll-padding-top:100px}body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--cream);color:var(--ink);font:700 16px/1.5 var(--font)}button,input,select,textarea{font:inherit;color:inherit}button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer;transition:transform var(--quick) var(--ease),background var(--quick),box-shadow var(--quick)}button:disabled{cursor:default}button,a{touch-action:manipulation}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:4px}main:focus,h1:focus,h2:focus{outline:none}
.skip{position:fixed;top:8px;left:12px;z-index:100;padding:12px 20px;border-radius:var(--radius-control);background:var(--ink);color:var(--white);transform:translateY(-160%)}.skip:focus{transform:none}main{flex:1;min-width:0}.view{width:100%;max-width:1200px;margin:0 auto;padding:36px 32px 64px}.view:not([hidden]){animation:view-in var(--enter) var(--ease) both}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;padding:16px max(24px,calc((100% - 1136px)/2));background:var(--cream);border-bottom:var(--border) solid var(--line)}.brand{display:flex;align-items:center;gap:12px;min-width:0;min-height:44px;text-decoration:none;flex-shrink:0}.brand img{flex:none}.brand strong,.brand small{display:block}.brand strong{font-size:16px;font-weight:900;line-height:1.2}.brand small{font-size:12px;color:var(--muted);font-weight:800;margin-top:4px}.preview-tag{font-size:10px;line-height:1.3;letter-spacing:.07em;text-transform:uppercase;max-width:86px;color:var(--muted);border-left:var(--border) solid var(--line);padding-left:16px}
nav{display:flex;gap:4px;align-items:center;margin-left:auto}nav button{min-height:44px;display:flex;align-items:center;justify-content:center;gap:7px;padding:8px 12px;border:var(--border) solid transparent;border-radius:var(--radius-control);background:transparent;font-size:14px;font-weight:900;white-space:nowrap}nav button .icon{width:18px;height:18px}nav button[aria-current="page"]{background:var(--white);border-color:var(--line);box-shadow:0 3px 0 var(--line-deep)}nav .nav-account{border-color:var(--ink);margin-left:4px;max-width:160px}#nav-nome{overflow:hidden;text-overflow:ellipsis}
.icon{display:inline-block;width:21px;height:21px;flex:none;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}[data-icon]{display:inline-flex;align-items:center;flex:none}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.12;font-weight:900;letter-spacing:-.035em;overflow-wrap:anywhere}h1{font-size:clamp(36px,4vw,52px);margin-bottom:16px}h2{font-size:30px;margin-bottom:12px}h3{font-size:26px;margin-bottom:16px}p{margin-bottom:16px}.eyebrow{display:flex;align-items:center;gap:8px;margin:0 0 12px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-size:11px;line-height:1.4;font-weight:900}.eyebrow-line{width:24px;height:3px;border-radius:var(--radius-round);background:var(--coral)}.lead{color:var(--muted);font-size:18px;line-height:1.6;max-width:52ch}.fine{font-size:13px;line-height:1.5;color:var(--muted);margin:0}
.btn,.back{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px 20px;border:var(--border) solid var(--ink);border-radius:var(--radius-control);background:var(--ink);color:var(--white);box-shadow:var(--button-shadow);font-weight:900;line-height:1.3;text-decoration:none}.btn .icon{width:20px;height:20px;transition:transform var(--standard) var(--ease)}.btn:active,.back:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink-deep)}.btn-ghost,.back{background:var(--white);color:var(--ink);border-color:var(--line);box-shadow:0 4px 0 var(--line-deep)}.btn-ghost:active,.back:active{box-shadow:0 1px 0 var(--line-deep)}.back{min-height:44px;font-size:14px;padding:9px 14px;gap:8px}
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:24px;padding:24px 0 36px}.hero h1{font-size:clamp(44px,5.6vw,72px);line-height:1.02;letter-spacing:-.05em;margin:20px 0 24px}.hero h1>span{position:relative;display:inline-block;isolation:isolate}.hero h1>span:after{content:"";position:absolute;bottom:4px;left:-4px;right:-8px;height:16px;border-radius:var(--radius-round);background:var(--sun);z-index:-1;transform:rotate(-2deg)}.hero .lead{max-width:43ch;margin-bottom:28px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.hero-facts{display:flex;gap:20px;margin-top:24px;font-size:13px;color:var(--muted)}.hero-facts>span{display:flex;gap:7px;align-items:center}.hero-facts .icon{width:17px;height:17px}
.hero-stage{position:relative;min-width:0;height:430px;border-radius:var(--radius-scene);background:var(--white);border:var(--border) solid var(--line);display:grid;place-items:center;isolation:isolate;overflow:hidden}.hero-landscape{position:absolute;width:100%;height:100%;object-fit:cover;z-index:-1;pointer-events:none}#hero-rumo{width:260px;margin:0 0 28px;transform:rotate(-5deg)}.scene-label{position:absolute;top:30px;left:26px;color:var(--ink);background:var(--sun);border-radius:var(--radius-control) var(--radius-control) var(--radius-control) 4px;padding:10px 14px;font-weight:900;font-size:13px;transform:rotate(-4deg);animation:label-in 600ms var(--bounce) both}.scene-caption{position:absolute;bottom:26px;right:24px;left:24px;display:flex;gap:12px;align-items:center;padding:12px 16px;background:var(--white);border:var(--border) solid var(--line);border-radius:var(--radius-control);font-size:11px;box-shadow:0 4px 0 var(--line-deep)}.scene-caption>span{display:grid}.scene-caption strong{font-size:15px;letter-spacing:.12em}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin:40px 0 20px}.section-heading h2{margin:0;font-size:28px}.section-heading>p{max-width:25ch;color:var(--muted);margin:0;font-size:14px}.marks{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:12px 0 24px;border-bottom:var(--border) solid var(--line)}.marks:before{content:"";position:absolute;top:62px;left:12%;right:12%;border-top:3px dashed var(--line-deep);z-index:-1}.mark-summary{display:flex;flex-direction:column;align-items:center;min-width:0;padding:12px 8px;border:var(--border) solid transparent;border-radius:var(--radius-control);background:transparent;position:relative}.mark-summary img{width:80px;height:80px;transition:transform var(--standard) var(--bounce)}.mark-summary strong{font-size:18px;font-weight:900;margin-top:4px}.mark-summary>span:last-child{font-size:13px;color:var(--muted)}.mark-degree{font-size:10px;letter-spacing:.12em;color:var(--muted);margin-top:8px}
.programs{display:grid;grid-template-columns:1fr 1fr;gap:24px}.program{padding:28px;border:var(--border) solid var(--line);border-radius:var(--radius-panel);background:var(--white);position:relative;display:flex;flex-direction:column;min-width:0}.program-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:-8px 0 8px}.program-number{font-size:11px;letter-spacing:.1em;font-weight:900;padding:7px 10px;border-radius:var(--radius-round);background:var(--cream)}.program h3{font-size:30px;line-height:1.15}.program p:not(.eyebrow){color:var(--muted);font-size:15px;max-width:44ch;margin-bottom:24px}.program .btn{align-self:start;margin-top:auto}.program-pais{border-top:6px solid var(--leaf)}.program-filho{border-top:6px solid var(--coral);background:var(--cream)}
.how-it-works{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin:64px 0 40px}.how-it-works h2{font-size:36px;line-height:1.15}.how-it-works p{max-width:38ch;color:var(--muted);font-size:15px}.day{list-style:none;padding:0;margin:0;display:grid;gap:24px}.day li{display:flex;gap:16px;align-items:start}.day b{display:grid;place-items:center;flex:none;width:32px;height:32px;border:var(--border) solid var(--line-deep);border-radius:50%;font-size:13px}.day strong{display:block;font-size:16px;font-weight:900;margin:2px 0 4px}.day p{font-size:14px;margin:0}.preview-note{display:flex;align-items:start;gap:16px;background:var(--white);border:var(--border) solid var(--line);border-radius:var(--radius-control);padding:20px 24px;font-size:14px}.preview-note>span{margin-top:2px}.preview-note p{margin:6px 0 0;color:var(--muted)}summary{cursor:pointer;padding:12px 0 4px;min-height:44px;font-size:13px;font-weight:900}
.gate{display:grid;grid-template-columns:.85fr 1.15fr;border-radius:var(--radius-scene);border:var(--border) solid var(--line);overflow:hidden;background:var(--white)}.gate-side{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:40px 32px;background:var(--ink);color:var(--white);text-align:center;position:relative;isolation:isolate}.gate-side:before{content:"";position:absolute;inset:80px 20px;border:var(--border) dashed var(--muted);border-radius:50%;transform:rotate(-25deg);z-index:-1}.gate-side .eyebrow{color:var(--sun);font-size:10px}.gate-side h2{font-size:30px;margin:0}.gate-side p{font-size:14px;max-width:30ch;margin:0;color:var(--cream)}#gate-rumo{width:240px}.gate-coordinates{font-size:11px;letter-spacing:.18em;color:var(--sun);margin-top:20px}
.sheet{display:grid;gap:16px;align-content:start;padding:36px;background:var(--white);min-width:0}.sheet h1{font-size:32px;margin:0}.sheet .eyebrow{margin:0}.form-intro{color:var(--muted);font-size:14px;margin:0 0 4px}label{display:grid;gap:7px;font-size:14px;font-weight:900}input,select,textarea{width:100%;min-width:0;padding:12px 14px;border:var(--border) solid var(--line-deep);border-radius:var(--radius-control);background:var(--white);font-size:16px;font-weight:700;line-height:1.5}input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}input:focus,select:focus,textarea:focus{border-color:var(--ink);background:var(--white)}textarea{resize:vertical;min-height:150px}[aria-invalid="true"]{border-color:var(--coral-deep)}
.role-picker{margin:0 0 4px;padding:0;border:0;display:grid;gap:10px}.role-picker legend{font-size:13px;font-weight:900;padding:0 0 8px}.check{position:relative;display:flex;flex-direction:row;gap:12px;align-items:center;padding:12px 14px;border:var(--border) solid var(--line);border-radius:var(--radius-control);cursor:pointer;min-height:70px;transition:border-color var(--quick),background var(--quick)}.check input{position:absolute;width:1px;height:1px;opacity:0;padding:0;margin:0}.check:has(input:checked){border-color:var(--ink);background:var(--cream)}.check:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:4px}.check strong,.check small{display:block}.check small{font-size:12px;color:var(--muted);font-weight:700;margin-top:2px}.role-check{display:grid;place-items:center;margin-left:auto;width:22px;height:22px;border:var(--border) solid var(--line-deep);border-radius:50%;color:transparent;flex:none;font-size:12px}.check:has(input:checked) .role-check{color:var(--white);border-color:var(--ink);background:var(--ink)}.sheet .fine{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px}.sheet .fine .icon{width:15px;height:15px}.status{font-size:13px;min-height:0;margin:0;color:var(--muted)}.status:empty{display:none}.status[data-error="true"]{color:var(--ink);border-left:4px solid var(--coral);background:var(--cream);padding:10px 12px}
.hello{display:flex;gap:24px;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:32px;margin-bottom:24px;border-radius:var(--radius-panel);background:var(--ink);color:var(--white)}.hello h1{font-size:36px;margin-bottom:12px}.hello .eyebrow{color:var(--sun)}.hello .lead{color:var(--cream);font-size:16px;margin:0;max-width:65ch}.dash{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:24px}.card{min-width:0;padding:24px;border:var(--border) solid var(--line);border-top:6px solid var(--line);border-radius:var(--radius-panel);background:var(--white)}.card h2{font-size:22px}.card p{font-size:14px;color:var(--muted);overflow-wrap:anywhere}.card .btn{width:100%;font-size:14px}.card-leaf{border-top-color:var(--leaf)}.card-coral{border-top-color:var(--coral)}.card-sun{border-top-color:var(--sun)}
.trail-head{display:flex;gap:24px;align-items:end;justify-content:space-between;margin-bottom:28px}.trail-head h1{font-size:42px;margin-bottom:12px}.trail-head .lead{font-size:15px;margin:0}.switch{display:flex;align-items:center;gap:4px;padding:4px;background:var(--white);border:var(--border) solid var(--line);border-radius:var(--radius-control)}.switch button{border:0;background:transparent;padding:10px 22px;border-radius:12px;min-height:44px;font-size:14px;font-weight:900}.switch button[aria-pressed="true"]{background:var(--ink);color:var(--white);box-shadow:0 2px 0 var(--ink-deep)}.map-stage{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}.map-wrap{min-width:0;padding:20px 0 0;border:var(--border) solid var(--line);border-radius:var(--radius-panel);background:var(--white);overflow:hidden}.map-caption{display:flex;align-items:center;gap:8px;padding:0 20px;font-size:12px;font-weight:900}.map-caption .icon{width:18px;height:18px}.map-direction{margin-left:auto;font-size:10px;letter-spacing:.12em;white-space:nowrap;color:var(--muted)}
.chart{position:relative;min-height:350px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-color:var(--line-deep) var(--white);scrollbar-width:thin;background:var(--white);border-radius:var(--radius-panel);padding:70px 20px 28px}.chart.compact{min-height:280px;padding-top:56px;border:var(--border) solid var(--line)}.row{position:relative;display:flex;gap:12px;align-items:center;min-width:570px;min-height:220px}.row:before{content:"";position:absolute;top:120px;left:30px;right:30px;border-top:4px dashed var(--line-deep)}.stop{position:relative;flex:1;min-width:114px;align-self:stretch;display:flex;align-items:center;justify-content:center}.stop:before{content:"";position:absolute;width:100%;height:100px;top:94px;border-radius:42% 58% 42% 44%;background:var(--stage);opacity:.14;transform:rotate(-6deg)}.stop:nth-child(2):before{transform:rotate(7deg)}.station{position:relative;width:100%;min-height:220px;padding:0 4px 8px;display:flex;flex-direction:column;align-items:center;border:var(--border) solid transparent;border-radius:var(--radius-control);background:transparent;color:var(--ink);gap:8px}.station .stage-art{height:72px;width:72px;margin-bottom:8px;transition:transform var(--standard) var(--bounce)}.gem{height:64px;width:64px;display:grid;place-items:center;flex:none;border-radius:18px;transform:rotate(45deg);background:var(--stage);box-shadow:5px 5px 0 var(--stage-deep);border:3px solid var(--stage);transition:transform var(--standard) var(--bounce),box-shadow var(--standard)}.gem em{font-size:12px;font-style:normal;font-weight:900;color:var(--ink);transform:rotate(-45deg)}.land-ink .gem em{color:var(--white)}.station b{font-size:15px;font-weight:900;margin-top:14px;white-space:nowrap;line-height:1.2}.station small{font-size:12px;color:var(--muted)}.station[aria-pressed="true"]{background:var(--cream);border-color:var(--ink)}.station[aria-pressed="true"] .gem{transform:rotate(45deg) scale(1.04);outline:3px solid var(--white);outline-offset:2px}.land-leaf{--stage:var(--leaf);--stage-deep:var(--leaf-deep)}.land-coral{--stage:var(--coral);--stage-deep:var(--coral-deep)}.land-sun{--stage:var(--sun);--stage-deep:var(--sun-deep)}.land-ink{--stage:var(--ink);--stage-deep:var(--ink-deep)}.between{position:relative;display:flex;gap:5px;flex:0 0 24px;align-items:center;padding-top:25px}.tick{width:10px;height:10px;border:var(--border) solid var(--line-deep);transform:rotate(45deg);background:var(--white)}.row.has-substeps{min-width:660px}.pin{position:absolute;top:-64px;right:2px;width:50px;padding:4px;z-index:3;background:var(--white);border:var(--border) solid var(--line);border-radius:var(--radius-control);pointer-events:none;box-shadow:0 3px 0 var(--line-deep)}.pin .rumo{width:100%;display:block}.map-disclaimer{font-size:12px;color:var(--muted);margin:0;padding:16px 20px;border-top:var(--border) solid var(--line)}
.dock{background:var(--white);border:var(--border) solid var(--line);border-radius:var(--radius-panel);padding:24px;min-width:0;border-top:6px solid var(--stage);animation:dock-in var(--standard) var(--ease) both}.dock-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-8px 0 16px}.dock-bearing{font-size:16px;font-weight:900;padding:8px 12px;border:var(--border) solid var(--line);border-radius:var(--radius-round)}.dock h2{font-size:26px;line-height:1.15;margin-bottom:12px}.dock>p:not(.eyebrow){font-size:14px;color:var(--muted)}.dock-note{border-top:var(--border) solid var(--line);padding-top:16px;margin-top:16px}.dock .btn{width:100%;font-size:14px;padding:12px 14px;margin:12px 0 16px}.chip{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:12px;margin:8px 0;text-align:left;background:var(--cream);border:var(--border) solid var(--line);border-radius:var(--radius-control);font-size:13px;font-weight:900}.chip .icon{width:17px;height:17px}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:start}.split>.sheet{border:var(--border) solid var(--line);border-radius:var(--radius-panel);padding:28px}.split>div>h2{font-size:24px}.aula-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}.aula-list li{display:grid;gap:8px;padding:20px;border:var(--border) solid var(--line);border-left:6px solid var(--stage,var(--coral));border-radius:var(--radius-control);background:var(--white);overflow-wrap:anywhere}.aula-list small{color:var(--muted);font-size:13px}.row-btns{display:flex;gap:12px;flex-wrap:wrap}.row-btns button{min-height:44px;padding:8px 14px;border:var(--border) solid var(--line);border-radius:12px;background:var(--cream);font-size:13px;font-weight:900;box-shadow:0 2px 0 var(--line-deep)}.row-btns button:active{transform:translateY(2px);box-shadow:none}
.lesson-layout{max-width:760px;margin:0 auto}.lesson-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}.lesson-program{font-size:12px;color:var(--muted);text-align:right}.lesson{background:var(--white);padding:36px 40px;border:var(--border) solid var(--line);border-top:6px solid var(--stage,var(--coral));border-radius:var(--radius-panel);box-shadow:var(--shadow);position:relative}.lesson-heading{display:flex;align-items:center;gap:16px;margin-bottom:16px}.lesson-heading img{width:64px;height:64px;margin-left:-8px}.lesson-heading .eyebrow{margin:0}.lesson h1{font-size:34px;line-height:1.2}.lesson .lead{font-size:17px;line-height:1.65;max-width:none;white-space:pre-wrap;overflow-wrap:anywhere}.lesson-preview{display:flex;align-items:start;gap:10px;padding:14px;border-radius:var(--radius-control);background:var(--cream);margin:20px 0 24px;font-size:13px}.lesson-preview .icon{width:18px;height:18px;margin-top:2px}.lesson-preview p{margin:0}.write{margin:24px 0 10px}.write>span{font-size:14px}.write textarea{min-height:190px;font-size:17px;padding:16px;line-height:1.7;background:var(--white)}.lesson .status{margin-top:12px}.lesson-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:28px;border-top:var(--border) solid var(--line);padding-top:24px}.local-save{display:flex;gap:6px;align-items:center;font-size:11px;color:var(--muted)}.local-save .icon{width:15px;height:15px}.lesson-footnote{font-size:12px;color:var(--muted);text-align:center;margin-top:24px}
.done{max-width:560px;margin:0 auto;text-align:center;padding:12px 0}.done>.eyebrow{justify-content:center}.done-stage{position:relative;width:260px;height:260px;margin:16px auto 24px;display:grid;place-items:center;background:var(--white);border-radius:50%;border:var(--border) dashed var(--line-deep)}#done-rumo{width:230px}.done-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;display:none}.done-stage.playing video{display:block}.done-stage.playing #done-rumo{visibility:hidden}.done-seal{position:absolute;bottom:4px;right:0;width:52px;height:52px;display:grid;place-items:center;background:var(--leaf);border:4px solid var(--cream);border-radius:50%;color:var(--ink);animation:seal-in 500ms var(--bounce) both}.done-seal .icon{width:26px;height:26px;stroke-width:3}.done h1{font-size:44px;margin-bottom:16px}.done .lead{font-size:18px;margin:0 auto 12px;overflow-wrap:anywhere}.done-note{font-size:14px;color:var(--muted);margin-bottom:24px}.done-receipt{display:flex;align-items:center;gap:16px;padding:20px;text-align:left;background:var(--white);border:var(--border) solid var(--line);border-radius:var(--radius-control);margin-bottom:24px}.done-receipt>div{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap;font-size:13px}.done-receipt strong{font-size:24px;font-weight:900}.done-receipt>span:last-child{margin-left:auto;color:var(--muted);font-size:11px;flex:none}.done>.btn{width:100%}.done>.back{margin-top:20px;border-color:transparent;background:transparent;box-shadow:none}
footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px max(24px,calc((100% - 1136px)/2));border-top:var(--border) solid var(--line)}footer .brand strong{font-size:13px}footer .brand small{font-size:11px}footer p{font-size:11px;margin:0;color:var(--muted)}.motion-toggle{display:flex;gap:6px;align-items:center;min-height:44px;padding:8px 12px;background:transparent;border:var(--border) solid var(--line);border-radius:12px;font-size:11px;color:var(--muted)}.motion-toggle .icon{width:14px;height:14px}.noscript{padding:24px;text-align:center;background:var(--sun)}
.rumo{display:block;width:100%;height:auto;overflow:visible}.bob{transform-origin:120px 210px;animation:rumo-float 3s ease-in-out 3}.needle{transform-origin:120px 78px;animation:needle-look 3s ease-in-out 3}.eyes{transform-origin:120px 128px;animation:eyes-blink 4.2s ease-in-out 3}.arm-r{transform-origin:182px 124px}.pose-wave .arm-r{animation:wave 1.2s var(--ease) 2}.star{transform-origin:center;transform-box:fill-box;animation:twinkle 3s ease-in-out 3}.star-b{animation-delay:240ms}.star-c{animation-delay:480ms}.pose-celebrate .bob{animation:celebrate 700ms var(--bounce) both}.pose-celebrate .arm-l{transform-origin:56px 124px;transform:rotate(40deg)}.pose-celebrate .arm-r{transform:rotate(-40deg)}body[data-motion="paused"] *,body[data-motion="paused"] *:before,body[data-motion="paused"] *:after{animation:none!important;transition:none!important}
@keyframes view-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes dock-in{from{opacity:.5;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes label-in{from{opacity:0;transform:translateY(8px) rotate(-6deg) scale(.94)}to{opacity:1;transform:rotate(-4deg)}}@keyframes rumo-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(2deg)}}@keyframes needle-look{0%,100%{transform:rotate(-8deg)}45%,65%{transform:rotate(10deg)}}@keyframes eyes-blink{0%,43%,48%,100%{transform:scaleY(1)}45%,46%{transform:scaleY(.08)}}@keyframes wave{0%,100%{transform:rotate(0)}25%,65%{transform:rotate(-25deg)}45%,85%{transform:rotate(-8deg)}}@keyframes twinkle{0%,100%{transform:scale(.85)}50%{transform:scale(1.05) rotate(10deg)}}@keyframes celebrate{0%{transform:translateY(0) scale(1.05,.95)}40%{transform:translateY(-18px) scale(.98,1.02)}75%{transform:translateY(0) scale(1.03,.97)}100%{transform:none}}@keyframes seal-in{0%{transform:scale(.7) rotate(-15deg);opacity:0}100%{transform:none;opacity:1}}
@media(hover:hover){nav button:hover{background:var(--white)}.btn:hover{background:var(--ink-deep)}.btn:hover .icon{transform:translateX(3px)}.btn-ghost:hover,.back:hover{background:var(--cream)}.mark-summary:hover{background:var(--white);border-color:var(--line)}.mark-summary:hover img{transform:translateY(-4px) rotate(-4deg)}.station:hover .stage-art{transform:translateY(-3px)}.station:hover .gem{transform:rotate(45deg) translate(-2px,-2px)}.chip:hover,.row-btns button:hover{background:var(--line)}.check:hover{border-color:var(--muted)}}
@media(max-width:1100px) and (min-width:900px){.preview-tag{display:none}.top{gap:12px}nav button{padding:8px}.brand strong{font-size:14px}}
@media(max-width:899px){.top{position:relative;padding:16px 24px;gap:16px}.preview-tag{display:none}nav{position:fixed;z-index:30;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));margin:0;justify-content:space-around;gap:0;padding:7px;border:var(--border) solid var(--line);border-radius:20px;background:var(--white);box-shadow:0 4px 0 var(--line-deep)}nav button{flex:1;flex-direction:column;gap:4px;min-width:0;padding:5px 3px;font-size:10px;min-height:50px;border:0;border-radius:12px}nav button .icon{width:20px;height:20px}nav button[aria-current="page"]{background:var(--cream);box-shadow:none}nav .nav-account{margin:0;border:0}body{padding-bottom:90px}html{scroll-padding-top:16px}.view{padding:28px 24px 48px}.hero{gap:16px;padding:12px 0 24px}.hero h1{font-size:52px}.hero-stage{height:360px}#hero-rumo{width:215px}.scene-label{top:20px;left:16px;font-size:11px}.scene-caption{left:12px;right:12px;bottom:20px;padding:10px;font-size:9px;gap:8px}.hero-actions .btn{font-size:13px;padding:12px 16px}.hero-facts{gap:12px;font-size:11px}.hero .lead{font-size:16px}.map-stage{grid-template-columns:minmax(0,1fr)}.dock{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;align-items:start}.dock-heading{grid-row:1/span 2;grid-column:2;justify-content:end;gap:24px;margin:0}.dock h2{grid-column:1}.dock-note,.dock .fine{grid-column:1/-1}.dock .btn{margin-top:8px}.trail-head h1{font-size:36px}.gate{grid-template-columns:.8fr 1.2fr}.gate-side{padding:24px 20px}.gate-side h2{font-size:24px}#gate-rumo{width:200px}.sheet{padding:28px}.how-it-works{gap:32px}footer{padding:24px;gap:16px;flex-wrap:wrap}.dash{grid-template-columns:1fr}}
@media(max-width:599px){.top{padding:16px 20px;border-bottom:0}.brand{gap:10px}.brand strong{font-size:14px}.brand small{font-size:11px}.brand img{width:36px;height:36px}.view{padding:20px 20px 40px}.hero{grid-template-columns:1fr;gap:28px;padding:4px 0 8px}.hero h1{font-size:54px;margin:16px 0 20px}.hero .lead{font-size:16px;line-height:1.65;margin-bottom:24px}.hero-actions{gap:12px}.hero-actions .btn{font-size:14px;flex:1;padding:12px 10px;min-height:52px}.hero-actions .btn:first-child{flex:1.2}.hero-actions .icon{width:16px}.hero-facts{font-size:12px;gap:24px;margin-top:20px}.hero-stage{height:310px;border-radius:var(--radius-panel)}#hero-rumo{width:200px;margin:2px 0 48px}.scene-label{top:18px;left:18px;font-size:11px;padding:8px 12px}.scene-caption{bottom:16px;left:16px;right:16px;font-size:10px}.scene-caption strong{font-size:13px}.section-heading{margin:36px 0 12px;display:block}.section-heading h2{font-size:25px;max-width:22ch}.section-heading>p{margin:10px 0 0;max-width:none;font-size:13px}.marks{gap:0;padding:4px 0 20px}.marks:before{top:40px}.mark-summary{padding:8px 2px;border-radius:12px}.mark-summary img{height:60px;width:60px}.mark-summary strong{font-size:13px;margin-top:2px}.mark-summary>span:last-child{font-size:10px}.mark-degree{font-size:9px;margin-top:6px}.programs{grid-template-columns:1fr;gap:16px}.program{padding:24px}.program h3{font-size:28px}.program .btn{width:100%;align-self:stretch;font-size:14px}.program-top{margin-bottom:4px}.program-top img{height:76px;width:88px}.how-it-works{grid-template-columns:1fr;gap:24px;margin:40px 0 32px}.how-it-works h2{font-size:30px}.how-it-works h2 br{display:none}.how-it-works p{max-width:none}.day{gap:20px}.preview-note{padding:16px;gap:10px;font-size:12px}.preview-note .icon{width:18px;height:18px}.gate{display:flex;flex-direction:column;border-radius:var(--radius-panel)}.gate-side{order:2;text-align:left;align-items:start;padding:24px 20px;gap:12px;min-height:150px}.gate-side:before,.gate-side>.eyebrow,.gate-coordinates{display:none}.gate-side h2{font-size:22px;max-width:70%;position:relative;z-index:2}.gate-side h2 br{display:none}.gate-side p{font-size:12px;max-width:70%}#gate-rumo{position:absolute;right:4px;top:20px;width:96px}.sheet{padding:24px 20px;gap:16px}.sheet h1{font-size:28px}.sheet .eyebrow{font-size:10px}.form-intro{font-size:13px}.check{padding:12px;gap:10px;min-height:66px}.hello{padding:24px;gap:20px;margin-bottom:20px}.hello h1{font-size:30px}.hello .lead{font-size:14px}.card{padding:20px}.trail-head{display:block;margin-bottom:20px}.trail-head h1{font-size:34px;line-height:1.12}.trail-head .lead{font-size:13px}.switch{display:inline-flex;margin-top:20px}.map-caption{padding:0 14px;font-size:11px;gap:6px}.chart{padding:70px 14px 20px;min-height:330px}.map-disclaimer{padding:14px;font-size:11px}.dock{display:block;padding:24px}.dock-heading{justify-content:space-between;margin:-8px 0 16px}.dock h2{font-size:28px}.split{grid-template-columns:1fr;gap:32px}.split>.sheet{padding:24px 20px}.lesson-top{gap:12px;margin-bottom:20px}.lesson-top .back{font-size:12px;padding:10px;gap:5px}.lesson-program{font-size:10px;max-width:100px}.lesson{padding:24px 20px;border-radius:24px}.lesson-heading{gap:10px;margin-bottom:12px}.lesson-heading img{width:56px;height:56px}.lesson h1{font-size:28px}.lesson .lead{font-size:15px}.lesson-preview{font-size:12px;padding:12px}.write textarea{min-height:180px;font-size:16px;padding:14px}.lesson-actions{flex-direction:column-reverse;gap:16px;margin-top:24px;padding-top:20px}.lesson-actions .btn{width:100%;min-height:52px}.done{padding-top:4px}.done-stage{width:220px;height:220px;margin:20px auto 24px}#done-rumo{width:190px}.done h1{font-size:36px}.done .lead{font-size:16px}.done-note{font-size:13px}.done-receipt{gap:12px;padding:16px}.done-receipt>div{font-size:12px;gap:4px}.done-receipt>span:last-child{font-size:10px}footer{display:grid;grid-template-columns:1fr;gap:16px;padding:24px 20px}footer .brand img{width:30px;height:30px}.motion-toggle{justify-self:start}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.lab-entry{display:grid;grid-template-columns:100px 1fr auto;gap:24px;align-items:center;padding:32px;border:2px solid var(--ink);border-radius:28px;margin:40px 0;background:var(--sun)}.lab-entry p{max-width:55ch}.lab-entry h2{font-size:30px}.lab-entry .eyebrow{color:var(--ink)}.lab-entry img{background:var(--white);border-radius:24px}.aula-link{display:flex;justify-content:space-between;gap:12px;align-items:center;width:100%;padding:12px;margin:8px 0;min-height:44px;text-align:left;border:2px solid var(--line);border-radius:12px;background:var(--cream);color:var(--ink);font:inherit;font-weight:800}.aula-link svg{width:20px;flex:none}.records-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:32px}.saved-record{margin:12px 0;padding:16px 20px;background:var(--white);border:2px solid var(--line);border-radius:16px}.saved-record summary{min-height:44px;cursor:pointer;font-weight:900;overflow-wrap:anywhere}.saved-record small{display:block;color:var(--muted)}.saved-record p{white-space:pre-wrap;overflow-wrap:anywhere}.experiment-layout{max-width:860px;margin:auto}.lab-tag{font-size:12px;font-weight:900;border:2px solid var(--ink);border-radius:999px;padding:6px 12px;background:var(--sun)}.lab-intro{padding:40px;background:var(--white);border:2px solid var(--line);border-radius:28px}.lab-intro h1{font-size:42px;line-height:1.13;max-width:20ch}.lab-illustration{display:flex;align-items:center;gap:24px;padding-bottom:24px;color:var(--muted);font-size:14px;font-weight:900}.lab-facts{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0}.lab-facts span{padding:8px 12px;background:var(--cream);border-radius:12px;font-size:13px;font-weight:800}.lab-intro-actions{display:flex;gap:16px;flex-wrap:wrap;margin:24px 0}.lab-sources{font-size:14px;color:var(--muted);margin-top:24px}.lab-sources summary{padding:12px 0;cursor:pointer;color:var(--ink);min-height:44px}.lab-sources a{display:block;color:var(--ink);padding:8px 0;min-height:44px}.experiment-form{padding:32px;background:var(--white);border:2px solid var(--line);border-radius:28px}.experiment-progress{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:32px;font-size:13px;font-weight:900;color:var(--muted)}.experiment-progress progress{width:100%;height:10px;appearance:none;border:0;border-radius:99px;overflow:hidden;background:var(--line)}progress::-webkit-progress-bar{background:var(--line)}progress::-webkit-progress-value{background:var(--leaf);border-radius:99px;transition:width 240ms ease}.experiment-form h1{font-size:32px;line-height:1.15}.experiment-form fieldset{border:0;padding:0;margin:24px 0;min-width:0}.experiment-form legend{font-weight:900;margin-bottom:12px}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.choice{display:flex;gap:12px;align-items:flex-start;padding:16px;min-height:80px;background:var(--white);border:2px solid var(--line);border-radius:16px;cursor:pointer;margin:0!important;transition:background 180ms,border-color 180ms,transform 180ms}.choice input{width:20px;height:20px;flex:none;margin:2px 0;accent-color:var(--ink)}.choice strong,.choice small{display:block}.choice small{font-size:13px;font-weight:600;color:var(--muted);margin-top:5px}.choice:has(:checked){border-color:var(--ink);background:var(--cream);box-shadow:0 3px 0 var(--line-deep)}.choice:has(:focus-visible){outline:3px solid var(--ink);outline-offset:3px}.choice:has(:disabled){opacity:.55;cursor:default}.choice:has(:checked) input{accent-color:var(--ink)}.experiment-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:24px;margin-top:24px;border-top:2px solid var(--line)}.step-hint{color:var(--muted);line-height:1.6}.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}.compare-column{padding:20px;background:var(--cream);border:2px solid var(--line);border-top:6px solid var(--leaf);border-radius:20px;min-width:0}.compare-column:nth-child(2){border-top-color:var(--coral)}.compare-column h2{font-size:20px}.experiment-form input:not([type=checkbox]):not([type=radio]),.experiment-form textarea,.experiment-form select{width:100%}.experiment-form textarea{min-height:100px;resize:vertical}.value-counter{display:block;font-size:13px;margin:12px 0;color:var(--muted)}.lab-review{display:grid;gap:12px;margin:24px 0}.review-section{padding:20px;border:2px solid var(--line);border-radius:16px;position:relative;overflow-wrap:anywhere}.review-section h2{font-size:18px;margin-right:80px}.review-section p{white-space:pre-wrap;margin-bottom:0;color:var(--muted);font-size:14px}.review-section button{position:absolute;right:12px;top:12px;min-height:44px}.review-tools{display:flex;gap:12px;flex-wrap:wrap}.experiment-form .btn:disabled{opacity:.6;cursor:wait}.experiment-form input[type=date]{color:var(--ink);min-height:48px}
@media(max-width:899px){.lab-entry{grid-template-columns:80px 1fr}.lab-entry>button{grid-column:1/-1}.lab-entry img{width:80px;height:80px}}
@media(max-width:599px){.lab-entry{padding:24px;gap:16px}.lab-entry h2{font-size:24px}.lab-entry>img{width:64px;height:64px}.lab-entry{grid-template-columns:64px 1fr}.lab-intro,.experiment-form{padding:24px 20px}.lab-intro h1{font-size:32px}.lab-illustration{gap:12px}.lab-illustration img{width:100px;height:90px}.lab-illustration span{font-size:12px}.lab-intro-actions{display:grid}.choice-grid,.compare-grid{grid-template-columns:1fr}.experiment-form h1{font-size:28px}.experiment-actions .btn{min-width:150px}.records-head{align-items:flex-start;flex-direction:column}.experiment-layout .lesson-top{align-items:flex-start}.lab-tag{max-width:140px;text-align:center}.review-section{padding:16px}.review-section h2{margin-right:64px}}
.how-it-works h2 br:after{content:" "}.experiment-form label:not(.choice){margin-top:16px}.experiment-form .choice input{min-height:20px;padding:0}.station-degree{font-size:10px;letter-spacing:.1em;color:var(--muted)}.aula-list small{display:block}.choice:active{transform:translateY(2px)}.aula-link:active,.mark-summary:active{transform:translateY(2px)}.switch button:active,nav button:active{transform:translateY(2px)}.lab-sources a:hover{text-decoration-thickness:2px}.lab-review{animation:dock-in 240ms var(--ease)}
@media(max-width:599px){.how-it-works h2 br{display:initial}.lab-entry .eyebrow{font-size:10px}.lab-entry{grid-template-columns:1fr}.lab-entry>img{display:none}}
.review-section{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start}.review-section h2{margin:0;align-self:center}.review-section button{position:static;grid-column:2;grid-row:1}.review-section p{grid-column:1/-1;margin:0}.choice:hover{border-color:var(--ink)}
.map-scroll-hint{display:none;color:var(--muted);font-size:11px;padding:0 14px;margin:0 0 12px}.station-degree{margin-top:8px}.gem{margin-top:8px;margin-bottom:4px}@media(max-width:899px){.map-scroll-hint{display:block}}

/* Lote 2: the same vector joints carry every pose, including reduced motion. */
.companion{display:block;width:100%}.companion .bob,.companion .needle,.companion .eyes,.companion .star{animation:none}#hero-rumo .stars,#gate-rumo .stars{opacity:1}
.cast-intro{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:40px;margin:40px 0;padding:32px 0;border-block:2px solid var(--line)}.cast-intro h2{font-size:28px;max-width:18ch}.cast-intro p:last-child{font-size:14px;color:var(--muted);max-width:43ch;margin:0}.cast-lineup{display:flex;align-items:end;justify-content:space-around;gap:12px}.cast-lineup>div{flex:1;min-width:0;text-align:center}.cast-lineup .companion{max-width:132px;margin:auto}.cast-lineup strong{display:block;font-weight:900;font-size:18px}.cast-lineup>div>span:last-child{display:block;font-size:11px;color:var(--muted);max-width:16ch;margin:4px auto 0}
.resume-panel{display:grid;grid-template-columns:190px 1fr;align-items:center;gap:32px;padding:24px 36px;background:var(--white);border:2px solid var(--ink);border-radius:28px;box-shadow:0 6px 0 var(--line-deep)}.resume-panel h2{font-size:32px;max-width:22ch}.resume-panel p:not(.eyebrow){color:var(--muted);font-size:14px;max-width:65ch;overflow-wrap:anywhere}.resume-panel .btn{margin:4px 0 12px}.passport-heading{margin:40px 0 20px}.passport-heading h2{font-size:28px}.passport-heading>p:last-child{color:var(--muted);font-size:14px}.passport{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;padding:20px;margin:0 0 32px;border:2px solid var(--line-deep);border-radius:24px;background:var(--white)}.passport-stamp{min-width:0;padding:8px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}.passport-stamp+li{border-left:2px dashed var(--line-deep)}.passport-stamp strong{display:block;font-size:17px;font-weight:900}.passport-stamp span{display:inline-block;margin:8px 0;border-radius:99px;background:var(--cream);padding:4px 12px;font-size:11px;text-transform:uppercase;letter-spacing:.06em}.passport-stamp p{font-size:12px;color:var(--muted);margin:0}.passport-stamp[data-earned=false] img{filter:grayscale(1);opacity:.5}.passport-stamp[data-earned=true] span{background:var(--sun)}.route-overview{margin:24px 0;color:var(--muted)}.route-overview>summary{padding:14px 0;color:var(--ink)}.route-overview .dash{margin-top:16px}.earned-now{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:24px 0}.earned-now:empty{display:none}.new-stamp{width:170px;padding:16px;background:var(--white);border:2px dashed var(--line-deep);border-radius:20px;font-size:13px}.new-stamp .eyebrow{justify-content:center;font-size:9px}.new-stamp img{display:block;margin:0 auto 8px}.new-stamp strong{display:block}.new-stamp span{display:none}.new-stamp p:last-child{font-size:11px;color:var(--muted);margin:8px 0 0}
.companion-stage{display:grid;grid-template-columns:112px minmax(0,1fr) 64px;align-items:center;gap:20px;margin:-12px 0 12px;min-height:132px}.companion-caption strong{display:block;font-size:18px;font-weight:900}.companion-caption p{color:var(--muted);font-size:13px;max-width:45ch;margin:4px 0 12px}.companion-caption .back{font-size:12px}.question-path{height:4px;margin-bottom:28px;background:var(--line);border-radius:99px;position:relative}.question-path:after{content:'';display:block;height:4px;width:48px;background:var(--sun);border-radius:99px}.experiment-progress{margin-bottom:24px}.lesson-companion-row{display:flex;gap:16px;align-items:center;justify-content:space-between;margin:20px 0 -8px;padding:0 12px;background:var(--cream);border-radius:16px}.lesson-companion-row #lesson-companion{width:80px;flex:none}.lesson-companion-row .back{font-size:12px}
.helper-dialog{width:calc(100% - 32px);max-width:560px;max-height:calc(100% - 40px);padding:28px;border:2px solid var(--ink);border-radius:28px;background:var(--white);color:var(--ink);box-shadow:0 6px 0 var(--ink-deep);overscroll-behavior:contain}.helper-dialog::backdrop{background:#1c274477}.helper-top{display:flex;align-items:start;justify-content:space-between;gap:12px}.helper-top #helper-character{width:110px}.helper-dialog h2{font-size:26px;line-height:1.2}.helper-options{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 24px}.helper-options .back{font-size:12px;flex:1;min-width:130px}.helper-options [aria-pressed=true]{border-color:var(--ink);background:var(--sun)}#helper-copy{padding:20px;background:var(--cream);border-radius:16px;font-size:15px;line-height:1.7;white-space:pre-wrap}.helper-dialog .fine{font-size:12px}
@media(max-width:899px){.cast-intro{gap:24px;grid-template-columns:1fr}.cast-intro h2{max-width:none}.cast-lineup .companion{max-width:140px}.resume-panel{grid-template-columns:150px 1fr;padding:24px;gap:24px}.passport-stamp{padding:8px 12px}}
@media(max-width:599px){.cast-intro{margin:32px 0;padding:24px 0;gap:16px}.cast-intro h2{font-size:25px}.cast-lineup{gap:8px}.cast-lineup strong{font-size:16px}.cast-lineup>div>span:last-child{font-size:10px}.resume-panel{grid-template-columns:80px minmax(0,1fr);gap:12px;padding:20px}.resume-panel h2{font-size:25px}.resume-panel .eyebrow{font-size:9px}.resume-panel p:not(.eyebrow){font-size:12px}.resume-panel #resume-character{align-self:start;margin-top:12px}.resume-panel .btn{font-size:13px;padding:12px;width:100%}.passport-heading h2{font-size:25px}.passport{grid-template-columns:1fr;padding:12px 20px}.passport-stamp{flex-direction:row;gap:16px;text-align:left;padding:16px 0}.passport-stamp img{width:72px;height:72px;flex:none}.passport-stamp+li{border-left:0;border-top:2px dashed var(--line-deep)}.passport-stamp strong{font-size:16px}.passport-stamp span{font-size:10px;margin:6px 0}.companion-stage{grid-template-columns:76px minmax(0,1fr);gap:12px;min-height:132px}.companion-stage>img{display:none}.companion-caption strong{font-size:16px}.companion-caption p{font-size:12px;margin-bottom:8px}.companion-caption .back{font-size:11px;padding:9px 12px}.helper-dialog{padding:20px}.helper-top #helper-character{width:90px}.helper-options{gap:8px}.helper-options .back{min-width:100%;font-size:13px}.new-stamp{width:140px}.question-path{margin-bottom:24px}}

.companion[data-state=celebrate] .bob{animation:celebrate 700ms var(--bounce) both}

/* Each joint keeps its SVG origin while additive gestures return to the static pose. */
.character-replay{display:block;width:100%;min-height:110px;padding:0;border:2px solid transparent;border-radius:20px;background:transparent}.character-replay:focus-visible{border-color:var(--ink);outline-offset:2px}.character-replay:active{background:var(--white)}.cast-lineup .character-replay .companion{pointer-events:none}@media(hover:hover){.character-replay:hover{background:var(--white);border-color:var(--line)}}@media(max-width:599px){.companion-stage{grid-template-columns:92px minmax(0,1fr)}.character-replay{min-height:100px}}

/* Low poly companions: the approved art leads; native controls keep selection clear. */
.avatar-bar{margin:0 0 28px;border-block:2px solid var(--line);padding:16px 0}.avatar-current{display:flex;align-items:center;gap:14px}.avatar-current img{object-fit:contain;border-radius:14px;background:var(--white)}.avatar-current p{margin:0}.avatar-current small{display:block;color:var(--muted)}.avatar-picker{margin-top:12px}.avatar-picker summary{min-height:44px;cursor:pointer;padding:10px 0;text-decoration:underline;text-underline-offset:4px}.avatar-picker fieldset{border:0;padding:0;margin:16px 0}.avatar-picker legend{font-size:22px;font-weight:900;margin-bottom:12px}.avatar-options{display:flex;gap:12px;overflow-x:auto;padding:8px 5px 16px;scroll-snap-type:x proximity}.animal-option{flex:0 0 168px;border:2px solid transparent;border-radius:20px;padding:10px;cursor:pointer;text-align:center;scroll-snap-align:start;background:var(--white)}.animal-option:has(:checked){border-color:var(--ink);background:var(--white)}.animal-option:has(:focus-visible){outline:3px solid var(--leaf);outline-offset:2px}.animal-option img{display:block;width:100%;height:auto;border-radius:12px}.animal-option span{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px}.animal-option input{width:20px;height:20px;min-height:20px;margin:0;accent-color:var(--ink)}.animal-option small{display:block;font-size:12px;color:var(--muted)}.avatar-actions{display:flex;gap:12px;flex-wrap:wrap}.avatar-picker .status{margin:16px 0}.avatar-bar>[role=status]:empty{display:none}
@media(min-width:1000px){.animal-option{flex:1;min-width:0}.avatar-options{overflow-x:visible}}
.avatar-bar,.avatar-picker,.avatar-picker fieldset{min-width:0;max-width:100%}.avatar-options{max-width:100%;min-width:0}.avatar-picker legend{max-width:100%}

@font-face{font-family:Nunito;src:url('media/fonts/Nunito.ttf') format('truetype');font-weight:200 1000;font-style:normal;font-display:swap}
/* Bosque (Lote 5.2): map and question side by side; a stop opens its question at once. */
.bosque{margin:0 0 48px}.world-heading{margin-bottom:16px}.world-heading .eyebrow{margin-bottom:6px}.world-heading h2{font-size:clamp(22px,2.4vw,28px);margin:0}
.world-stage{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:start}
.world-scene{position:sticky;top:96px;border-radius:28px;background:var(--white);border:2px solid var(--line);overflow:hidden;isolation:isolate}
.world-viewport{height:clamp(300px,calc(100vh - 380px),560px);position:relative;touch-action:pan-y;background:var(--cream)}.world-viewport canvas,.world-viewport>img{position:absolute;inset:0;display:block;width:100%;height:100%}.world-viewport canvas{cursor:grab}.world-viewport canvas:active{cursor:grabbing}.world-viewport>img{object-fit:contain;padding:16px}.world-viewport[data-ready=true]>img{display:none}.world-viewport[data-fallback=true]>canvas{display:none}.world-viewport[data-fallback=true]>img{display:block}.world-viewport[data-exploring=true]{outline:3px solid var(--sun);outline-offset:-3px}
.world-camera{position:absolute;left:10px;right:10px;bottom:10px;display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px;pointer-events:none}.world-camera>*{pointer-events:auto}.world-camera button{min-width:44px;min-height:44px;padding:8px 12px;border:2px solid var(--line);border-radius:12px;background:var(--white);box-shadow:0 2px 0 var(--line-deep);font-size:12px;font-weight:900;color:var(--ink);transition:background .12s,transform .12s}.world-camera button:hover{background:var(--cream)}.world-camera button:active{transform:translateY(2px)}.world-camera button[aria-pressed=true]{border-color:var(--sun-deep);background:var(--sun)}.world-camera button:disabled{opacity:.5}
.world-adjust{margin-left:auto;border:2px solid var(--line);border-radius:12px;background:var(--white)}.world-adjust summary{display:inline-flex;align-items:center;min-height:44px;padding:6px 12px;color:var(--ink);font-size:12px;cursor:pointer}.world-adjust[open]{flex-basis:100%;padding:0 6px 6px}.world-adjust-buttons{display:flex;flex-wrap:wrap;gap:6px}.world-adjust-buttons button{font-size:16px;box-shadow:none}
.world-panel{min-width:0;container-type:inline-size}.world-steps{list-style:none;position:relative;display:flex;justify-content:space-between;gap:4px;margin:0 0 14px;padding:4px 0}.world-steps:before{content:"";position:absolute;left:22px;right:22px;top:50%;border-top:3px dashed var(--line-deep)}.world-steps li{position:relative}
.world-node{display:grid;place-items:center;width:44px;height:44px;padding:0;border:3px solid var(--stage);border-radius:50%;background:var(--white);font-size:16px;font-weight:900;color:var(--ink);transition:transform .12s}.world-node:not([aria-current]):hover{background:var(--cream)}.world-node[aria-current=step]{background:var(--sun);border-color:var(--ink);transform:scale(1.12);box-shadow:0 3px 0 var(--line-deep)}.world-node[data-state=bloqueada]{border-style:dashed;color:var(--muted)}.world-node[data-state=guardado]{background:var(--leaf)}
.world-place-head{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin-bottom:8px}.world-place-head .eyebrow{margin:0}.world-place-state{margin:0;font-size:12px;color:var(--muted)}
.world-status{font-size:13px;margin:0 0 12px;padding:10px 12px;border-left:4px solid var(--sun);background:var(--white);border-radius:8px}.world-status:empty{display:none}
.world-panel .experiment-form{padding:0;border:0;background:none;box-shadow:none}.world-panel .experiment-progress{display:none}
.world-done{padding:24px;border:2px solid var(--line);border-radius:20px;background:var(--white)}.world-done h3{font-size:24px}.world-done-actions{display:flex;flex-wrap:wrap;gap:12px}
.world-note{margin-top:20px;border-left:3px solid var(--leaf);padding-left:14px}.world-example{border:0;background:none;padding:0;min-height:44px;color:var(--ink);font:inherit;font-weight:900;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.map-overview-title{font-size:24px;margin-top:28px}
@container (max-width:560px){.choice-grid,.compare-grid{grid-template-columns:1fr}.companion-stage{grid-template-columns:72px minmax(0,1fr);min-height:0;margin:0 0 8px}.companion-stage>img{display:none}}
@media(max-width:899px){.world-stage{grid-template-columns:minmax(0,1fr);gap:16px}.world-scene{position:relative;top:auto}.world-viewport{height:min(320px,44vh);min-height:240px}html{scroll-padding-bottom:100px}.world-node,.world-camera button{scroll-margin-bottom:100px}}
@media(max-width:599px){.world-scene{border-radius:22px}.world-camera{left:8px;right:8px;bottom:8px;gap:4px}.world-camera button,.world-adjust summary{padding:6px 8px;font-size:11px}.world-heading{margin-bottom:10px}.world-heading h2{font-size:22px}.world-viewport{height:min(280px,40vh)}body[data-programa=filho] #trilha .trail-head .lead{display:none}#trilha .trail-head{margin-bottom:16px}#trilha .trail-head h1{font-size:30px;margin-bottom:0}#trilha .switch{margin-top:12px}}
@media(max-height:520px) and (max-width:950px){.world-viewport{height:220px;min-height:0}}
#world-question h1{scroll-margin:96px 0 104px}
/* Lote 5.4: personagens em pé no bosque, numa camada sobre o canvas. z-index 0 prende a ordem dos personagens à camada: os controles da câmera continuam por cima. */
.world-layer{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.world-viewport[data-fallback=true]>.world-layer{display:none}
.map-figure{position:absolute;left:0;top:0;width:120px;transform-origin:0 0}
.map-body{transform-origin:50% 91.5%}
.world-layer .companion[data-state=celebrate] .bob{animation:none}
.map-fx{position:absolute;left:0;top:0;transform-origin:0 0}.map-fx>svg{position:absolute;left:-60px;top:-60px;width:120px;height:120px;overflow:visible}
.node-glyph{display:grid;place-items:center}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(prefers-reduced-motion:reduce){.world-node,.world-camera button{transition:none}}
@media(max-width:899px){nav #nav-nome{min-width:0;max-width:100%;white-space:nowrap}}
#experiment-form>.fine{margin-top:12px}
/* Lote 5.5: bosque e pergunta numa tela só, na própria rota do Filho. Mapa em faixa em cima com a fila na base, pergunta
   embaixo com rolagem interna e ações presas no rodapé; deitado ou em tela baixa, mapa à esquerda. O painel e o formulário
   viram itens da mesma grade (display:contents), então a página #experimento e a rota dos Pais não mudam. --top-h vem do JS. */
body[data-programa=filho] #trilha{max-width:none}
body[data-programa=filho] #trilha>:not(#bosque),#bosque>.world-heading{max-width:1136px;margin-left:auto;margin-right:auto}
.world-heading .fine{max-width:80ch;margin-top:8px}
/* Com o bosque na tela, a rolagem da página conta só o que cobre de fato: o cabeçalho preso no desktop, a navegação no celular. */
html:has(#bosque:not([hidden])){scroll-padding-top:var(--top-h,78px)}
#bosque .eyebrow{font-size:14px;letter-spacing:.02em;text-transform:none}
#bosque .fine,#world-stage .world-place-state,#world-stage .world-status,#world-stage .value-counter,#world-stage .status{font-size:14px}
/* overflow-anchor:none: quando o mapa recolhe com o teclado, a ancoragem de rolagem do navegador não arrasta a página. */
#world-stage{--nav-h:0px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto minmax(120px,1fr) auto auto;grid-template-areas:"scene scene" "head help" "status status" "fields fields" "labstatus labstatus" "note actions";gap:0;align-items:start;height:calc(100vh - var(--top-h,78px) - var(--nav-h));height:calc(100svh - var(--top-h,78px) - var(--nav-h));min-height:min-content;padding:6px 0;scroll-margin:0;overflow-anchor:none}
#world-stage::before{content:"";grid-row:2/-1;grid-column:1/-1;align-self:stretch;background:var(--white);border:2px solid var(--line);border-radius:24px}
#world-stage :is(.world-panel,#world-question,#experiment-form){display:contents}
/* overflow:clip recorta como hidden sem virar contêiner de rolagem; com hidden o mínimo do item da grade era zero e a grade
   espremia o mapa sobre a fila (QA A2). */
#world-stage .world-scene{grid-area:scene;position:relative;top:auto;align-self:stretch;display:flex;flex-direction:column;overflow:clip;margin-bottom:6px;border-radius:24px}
#world-stage .world-viewport{flex:none;height:36vh;height:36svh;min-height:0}
#world-stage .world-camera{bottom:60px;z-index:1}
/* QA M4: os oito botões de ajuste abrem numa grade compacta acima de "Ajustar visão", e o mapa continua à vista. */
#world-stage .world-adjust[open]{flex-basis:auto;padding:0}
#world-stage .world-adjust-buttons{position:absolute;right:0;bottom:calc(100% + 6px);display:grid;grid-template-columns:repeat(4,44px);gap:4px;padding:4px;border:2px solid var(--line);border-radius:12px;background:var(--white)}
#world-stage .world-camera button,#world-stage .world-adjust summary{font-size:14px}
#world-stage .world-steps{flex:none;width:min(100% - 8px,600px);height:50px;margin:0 auto;padding:3px 0;align-items:center;gap:0;overflow-x:auto;scrollbar-width:none}
#world-stage :is(.world-node,.world-camera button){scroll-margin:0}
#world-stage .world-node:focus-visible{outline-offset:-2px}
#world-stage .world-place-head{grid-area:head;align-self:center;margin:6px 8px 0 20px;gap:0 10px}
#world-stage #world-place-zone{display:block}
#world-stage .world-status{grid-area:status;margin:8px 20px 0}
#world-stage #experiment-fields{grid-area:fields;align-self:stretch;min-height:0;overflow-y:auto;margin-top:4px;padding:4px 20px 16px;container-type:inline-size}
#world-stage .world-done{grid-area:fields;align-self:start;max-height:100%;overflow:auto;margin:8px 20px 16px;padding:16px 20px}
#world-stage .world-done h3{font-size:20px}
#world-stage #experiment-status{grid-area:labstatus;margin:0 20px 8px}
#world-stage .experiment-actions{grid-area:actions;align-self:stretch;justify-content:flex-end;gap:10px;margin:0;padding:10px 14px 12px 12px;border-top:2px solid var(--line)}
#world-stage .experiment-actions .btn{min-width:0;min-height:44px;padding:10px 16px;font-size:15px}
#world-stage .world-note{grid-area:note;align-self:stretch;display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;margin:0;padding:10px 12px 12px 20px;border:0;border-top:2px solid var(--line)}
#world-stage .note-short{display:none}
#world-stage :is(.experiment-progress,.question-path,#experiment-form>.fine,.companion-stage>img,.companion-caption>strong,.companion-caption>p){display:none}
/* "Ver uma alternativa": um botão de 44 px com o rosto do guia; o ::after estende o clique ao rosto. */
#world-stage .companion-stage{grid-area:help;justify-self:end;position:relative;display:flex;align-items:center;gap:8px;min-height:44px;margin:6px 16px 0 0;padding:0 14px 0 5px;border-radius:999px;background:var(--white);box-shadow:inset 0 0 0 2px var(--line),0 3px 0 var(--line-deep);align-self:center}
#world-stage .companion-stage:has(#lab-help[hidden]){display:none}
#world-stage #lab-companion{position:relative;flex:none;width:34px;height:34px;border-radius:50%;overflow:hidden;background:var(--cream)}
#world-stage #lab-companion .companion{position:absolute;width:var(--face-w,68px);left:var(--face-x,-17px);top:var(--face-y,-14px)}
#world-stage #lab-companion [data-character=bino]{--face-w:60px;--face-x:-13px;--face-y:-6px}
#world-stage #lab-companion [data-character=pipa]{--face-w:84px;--face-x:-25px;--face-y:-12px}
#world-stage #lab-companion [data-character=teo]{--face-w:64px;--face-x:-29px;--face-y:-14px}
#world-stage #lab-companion [data-character=rumo]{--face-w:60px;--face-x:-13px;--face-y:-19px}
#world-stage .companion-caption{display:block}
#world-stage #lab-help{min-height:44px;padding:0;border:0;background:none;box-shadow:none;font-size:14px;color:var(--ink);white-space:nowrap}
#world-stage #lab-help:after{content:"";position:absolute;inset:0;border-radius:999px}
#world-stage #lab-help:focus-visible{outline:none}
#world-stage #lab-help:active{transform:none}
#world-stage .companion-stage:has(#lab-help:focus-visible){outline:3px solid var(--ink);outline-offset:3px}
#world-stage .companion-stage:active{transform:translateY(2px);box-shadow:inset 0 0 0 2px var(--line),0 1px 0 var(--line-deep)}
@media(hover:hover){#world-stage .companion-stage:hover{background:var(--cream)}}
/* Pergunta mais enxuta: título de 20–22 px, dica e rótulos de 14–15 px; nada abaixo de 14 px, alvos de 44 px. */
#world-stage #experiment-fields h1{font-size:22px;line-height:1.2;letter-spacing:-.02em;margin:2px 0 6px;scroll-margin:0}
#world-stage #experiment-fields>.eyebrow{margin:0}
#world-stage .step-hint{font-size:15px;line-height:1.45;margin:0 0 4px}
#world-stage :is(label,legend){font-size:15px}
#world-stage label small{font-size:14px;color:var(--muted)}
#world-stage fieldset{margin:12px 0 4px}
#world-stage legend{margin-bottom:8px}
#world-stage label:not(.choice){margin-top:12px;gap:5px}
#world-stage :is(input:not([type=checkbox]):not([type=radio]),select){min-height:44px;padding:8px 12px}
#world-stage textarea{min-height:84px;padding:8px 12px}
#world-stage .choice-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:8px}
#world-stage .choice{min-height:44px;padding:10px 12px;gap:10px}
#world-stage .choice strong{font-size:15px;line-height:1.3}
#world-stage .choice small{font-size:14px;line-height:1.35;margin-top:2px}
#world-stage label small{font-size:14px}
#world-stage .value-counter{margin:8px 0 0}
#world-stage .compare-grid{gap:12px;margin:12px 0 4px}
#world-stage .compare-column{padding:12px 14px;border-top-width:5px}
#world-stage .compare-column h2{font-size:16px;margin:0}
#world-stage .lab-review{gap:8px;margin:12px 0}
#world-stage .review-section{padding:12px 14px}
#world-stage .review-section h2{font-size:16px}
@media(min-width:900px){
 #world-stage #experiment-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;align-content:start;align-items:start}
 #world-stage #experiment-fields>.eyebrow{grid-area:1/1}
 #world-stage #experiment-fields>h1{grid-area:2/1;margin-bottom:0}
 #world-stage #experiment-fields>.step-hint{grid-area:1/2/3/3;align-self:end;margin:0}
 #world-stage #experiment-fields>:is(.compare-grid,.lab-review,.review-tools){grid-column:1/-1}
 #world-stage .lab-review{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
}
@media(max-width:899px){
 html:has(#bosque:not([hidden])){scroll-padding-top:0;scroll-padding-bottom:calc(72px + max(12px,env(safe-area-inset-bottom)))}
 #world-stage{--nav-h:calc(72px + max(12px,env(safe-area-inset-bottom)));grid-template-rows:auto auto auto minmax(120px,1fr) auto auto auto;grid-template-areas:"scene scene" "head help" "status status" "fields fields" "labstatus labstatus" "actions actions" "note note"}
 #world-stage .experiment-actions{justify-content:space-between;padding:8px 14px}
 #world-stage .world-note{border-top:0;padding:0 14px 8px 20px}
}
@media(max-width:899px) and (orientation:portrait){#world-stage .world-viewport{height:36vh;height:36svh}}
@media(max-width:599px){
 #world-stage{padding:4px 0}
 #world-stage .world-viewport{height:30.5vh;height:30.5svh}
 #world-stage :is(#experiment-fields>.eyebrow,.place-state){display:none}
 #world-stage #experiment-status{margin-bottom:4px}
 #world-stage #experiment-fields{padding:4px 16px 12px}
 #world-stage #experiment-fields h1{font-size:20px}
 #world-stage :is(.step-hint,label,legend){font-size:14px}
 #world-stage .world-place-head{margin-left:16px}
 #world-stage :is(.place-deg,.cam-extra){display:none}
 #world-stage .note-long{display:none}
 #world-stage .note-short{display:inline}
 #world-stage .world-note{padding:0 12px 4px 16px}
 #world-stage .experiment-actions{gap:8px;padding:6px 12px}
 #world-stage .experiment-actions .btn{padding:10px 12px;gap:8px}
 #world-stage #lab-skip{min-height:44px;padding:4px 10px;line-height:1.15}
}
/* QA A2/M2: em pé com até 700 px de altura (Safari com as barras, Android pequeno), o mapa fica com 26% (no mínimo 173 px,
   para o Rumo continuar com 56 px). A pergunta nunca fica com menos de 120 px: se não couber, o bloco cresce
   (min-height:min-content) e a página rola um pouco, em vez de as partes se cruzarem. */
@media(max-width:899px) and (orientation:portrait) and (max-height:700px){#world-stage .world-viewport{height:max(26vh,173px);height:max(26svh,173px)}}
/* Com até 600 px de altura uma tela só não cabe: o mapa volta aos 40% do 5.4, onde os guias ficam livres dos botões. */
@media(max-width:899px) and (orientation:portrait) and (max-height:600px){#world-stage .world-viewport{height:40vh;height:40svh}}
@media(max-width:420px){
 #world-stage .back-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 #world-stage #experiment-back{flex:none;width:44px;padding:0}
}
/* Deitado ou tela baixa: mapa e fila à esquerda, pergunta à direita, cada um com metade da largura. A linha de onde você
   está, o botão de alternativa e o aviso ficam presos embaixo do mapa (posição absoluta na área do mapa), para a altura
   variável da pergunta e das mensagens não roubar altura do mapa. */
@media(max-height:640px) and (min-aspect-ratio:4/3){
 #world-stage{position:relative;padding:2px 0;column-gap:12px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(120px,1fr) auto auto;grid-template-areas:"scene status" "scene fields" "scene labstatus" "scene actions"}
 #world-stage::before{grid-column:2;grid-row:1/-1}
 /* Com 148 px de mapa, qualquer botão por cima cobria um guia (cenário do 5.4): a câmera desce para uma linha do cartão,
    abaixo da fila, e mostra só "Ajustar visão", que abre Ver bosque e Explorar. A linha de onde você está sai (a fila mostra). */
 #world-stage .world-scene{margin:0 0 48px;padding-bottom:52px}
 #world-stage .world-viewport{flex:1 1 0;height:auto}
 #world-stage .world-camera{left:8px;right:8px;bottom:4px}
 #world-stage .world-adjust{margin-left:0}
 #world-stage .world-camera:not(:has(.world-adjust[open])) :is(#world-overview,#world-explore){display:none}
 #world-stage:has(.world-adjust[open]) .companion-stage{visibility:hidden}
 #world-stage .world-place-head{display:none}
 #world-stage :is(.companion-stage,.world-note){grid-area:scene;position:absolute;margin:0}
 #world-stage .companion-stage{right:4px;bottom:52px}
 #world-stage .world-note{left:0;right:0;bottom:0;min-height:44px;flex-wrap:nowrap;border:0;padding:0 4px}
 #world-stage :is(#experiment-fields>.eyebrow,.place-deg,.place-state,.note-long){display:none}
 #world-stage .note-short{display:inline}
 #world-stage #experiment-fields h1{font-size:20px}
 #world-stage .experiment-actions{justify-content:space-between;padding:4px 12px}
 #world-stage #experiment-fields{display:block;padding-top:2px}
 #world-stage .world-adjust-buttons{grid-template-columns:repeat(8,44px);gap:2px}
 #world-stage .back-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 #world-stage #experiment-back{flex:none;width:44px;padding:0}
 #world-stage #lab-skip{padding:4px 10px;line-height:1.15}
}
/* Celular em pé com um campo de texto em foco: o mapa recolhe para a fila de paradas, para o teclado não cobrir o campo. */
/* A folga embaixo deixa qualquer campo subir para o alto da área; o teclado cobre essa parte. */
@media(max-width:899px) and (orientation:portrait){#world-stage[data-typing] :is(.world-viewport,.world-camera){display:none}#world-stage[data-typing] #experiment-fields{padding-bottom:50vh;padding-bottom:50svh}}
/* Lote 5.6: o espaço do Duolingo no painel da pergunta. Um campo por linha, o mesmo respiro entre os blocos e escolhas com o
   mesmo espaço nas duas direções; só Continuar pesa como ação principal. O cabeçalho e o primeiro bloco não descem: em 844×390
   e 1280×720 a primeira resposta continua à vista sem rolar a página (Lote 5.5). */
#world-stage{--respiro:24px}
#world-stage #experiment-fields>:is(fieldset,label,div){margin:var(--respiro) 0 0}
#world-stage #experiment-fields>.step-hint+*{margin-top:12px}
#world-stage #experiment-fields>:empty{display:none}
#world-stage .choice-grid{gap:12px}
/* Os campos ficam numa coluna de até 860 px; o resumo da revisão usa a largura toda, e cada cartão começa pelo título
   mesmo quando o vizinho da linha é mais alto. */
@media(min-width:900px){#world-stage #experiment-fields>:is(fieldset,label,div){grid-column:1/-1;width:100%;max-width:860px}#world-stage #experiment-fields>.lab-review{max-width:none}}
#world-stage .review-section{align-content:start}
/* Sem WebGL o pôster cobre a faixa inteira, como o 3D: corta as pontas da floresta em vez de deixar faixas creme (QA M3). */
#world-stage #world-poster{object-fit:cover;padding:0}
/* Lote 5.7: fase por fase. O formulário continua inteiro; os blocos dos outros passos ficam com data-off. O passo 1 mostra a
   dica da pergunta; os opcionais trocam a dica por uma frase que diz para que servem. */
#world-stage #experiment-fields [data-off]{display:none}
#world-stage .compare-column:not(:has(label:not([data-off]))){display:none}
#world-stage #experiment-fields:not([data-part="0"]) .step-hint{display:none}
#world-stage .part-why{margin:0;font-size:15px;line-height:1.45;color:var(--muted)}
#world-stage .part-why:empty{display:none}
#world-stage .part-why:focus{outline:none}
/* Barra de passos da fase, no topo do painel: um traço por passo, cheio até o atual, e o texto "Passo 2 de 3". */
#world-stage .world-place-state{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px}
#world-stage .part-bar{display:inline-flex;gap:4px}
#world-stage .part-bar i{width:20px;height:6px;border-radius:99px;background:var(--line-deep)}
#world-stage .part-bar i[data-on]{background:var(--ink)}
#world-stage .part-text{font-weight:800;color:var(--ink)}
/* Passagem de fase: o painel desce e some em 200 ms enquanto o mapa cresce (o JS anima a altura, ou a largura deitado); na
   volta, sobe. data-instant tira as transições quando um toque pula a passagem. */
#world-stage :is(.world-place-head,.companion-stage,.world-status,#experiment-fields,#experiment-status,.experiment-actions,.world-note){transition:opacity .2s cubic-bezier(.2,.8,.2,1),transform .2s cubic-bezier(.2,.8,.2,1)}
#world-stage::before,#world-stage .world-camera,.passage-note{transition:opacity .2s}
#world-stage[data-passage]:not([data-closing]) :is(.world-place-head,.companion-stage,.world-status,#experiment-fields,#experiment-status,.experiment-actions,.world-note){opacity:0;transform:translateY(24px);pointer-events:none}
#world-stage[data-passage]:not([data-closing])::before{opacity:0}
#world-stage[data-passage] .world-camera{opacity:0;pointer-events:none}
#world-stage[data-passage=wide] .world-scene{grid-column:1/-1;justify-self:start;z-index:2}
#world-stage[data-instant] *,#world-stage[data-instant]::before{transition:none!important}
.passage-note{position:absolute;left:50%;top:12px;z-index:1;margin:0;padding:6px 16px;border:2px solid var(--ink);border-radius:999px;background:var(--white);font-size:15px;font-weight:900;white-space:nowrap;transform:translateX(-50%);opacity:0;pointer-events:none}
#world-stage[data-passage]:not([data-closing]) .passage-note{opacity:1}
/* Passo compacto (opção A, escolhida por Marcelo em 15/10): sem a linha "01 / ...", escolhas em duas colunas só com o título
   (a descrição da atividade marcada aparece numa linha abaixo) e revisão com título, estado e Editar por bloco. */
.help-short{display:none}
#world-stage[data-phase] #experiment-fields>.eyebrow{display:none}
/* As descrições das atividades saem da tela, mas continuam para o leitor de tela (QA O3). */
#world-stage[data-phase] .choice small{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#world-stage .choice-note{margin:8px 0 0;font-size:14px;line-height:1.4;color:var(--muted)}
#world-stage .choice-note:empty{display:none}
#world-stage[data-phase] .review-section{position:relative;display:block;padding:10px 12px}
#world-stage[data-phase] .review-section>p{display:none}
#world-stage[data-phase] .review-section h2{margin:0 0 2px;font-size:14px}
#world-stage .review-state{display:block;font-size:14px;color:var(--muted)}
/* O botão Editar cobre o bloco inteiro (alvo grande); o rótulo fica no canto de baixo, na linha do estado. */
#world-stage[data-phase] .review-section button{position:absolute;inset:0;width:100%;height:100%;min-height:44px;display:flex;align-items:flex-end;justify-content:flex-end;padding:10px 12px;border:0;border-radius:inherit;background:none;box-shadow:none;font-size:14px;text-decoration:underline;text-underline-offset:3px}
#world-stage[data-phase] .review-section:has(button:hover){background:var(--cream)}
@media(max-width:899px){#world-stage[data-phase] :is(.choice-grid,.lab-review){grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Campos de texto com duas linhas à vista (crescem ao arrastar o canto); as fichas da comparação perdem a moldura, e nos
   passos opcionais o nome da possibilidade vem na frase de cima, no lugar do título "Possibilidade A". */
#world-stage[data-phase] textarea{min-height:0;height:58px;padding:6px 12px;line-height:1.35}
#world-stage[data-phase] #experiment-fields{padding-bottom:6px}
#world-stage[data-phase] .compare-grid{gap:0 24px;margin-top:12px}
#world-stage[data-phase] .compare-column{padding:0;border:0;background:none}
#world-stage[data-phase] .compare-column h2{font-size:15px;color:var(--muted)}
#world-stage[data-phase] #experiment-fields:not([data-part="0"]) .compare-column h2{display:none}
#world-stage[data-phase] .compare-column label:first-of-type{margin-top:4px}
/* Nos passos opcionais a frase de para que servem fica no lugar do título, que segue para o leitor de tela, e o "(opcional)"
   de cada rótulo sai, porque a frase já diz. */
#world-stage[data-phase] #experiment-fields:not([data-part="0"])>h1{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#world-stage[data-phase] #experiment-fields:not([data-part="0"]) label small{display:none}
#world-stage[data-phase] #experiment-fields:not([data-part="0"]) .part-why{font-size:17px;font-weight:800;line-height:1.35;color:var(--ink)}
/* Atividades e prioridades: o título já pergunta, então a legenda fica só para o leitor de tela; contador e descrição da
   opção marcada dividem uma linha. */
#world-stage[data-phase] fieldset:has([name=activities],[name=values],[name=action])>legend{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#world-stage[data-phase] .value-counter{display:inline-block}
#world-stage[data-phase] .choice-note{display:inline}
#world-stage[data-phase] .choice-note:not(:empty)::before{content:" · "}
#world-stage[data-phase] .choice{padding:6px 10px;gap:8px;align-items:center}
#world-stage[data-phase] .choice strong{font-size:14px;line-height:1.25}
/* Mapa curto enquanto a fase está aberta; na passagem ele ocupa a área (JS). */
@media(max-width:599px) and (orientation:portrait){#world-stage[data-phase]:not([data-mapa]) .world-viewport{height:clamp(116px,14svh,156px)}
 /* Na faixa curta só "Ver bosque", que abre o mapa do tamanho do 5.6 com Explorar e Ajustar. */
 #world-stage[data-phase]:not([data-mapa]) :is(#world-explore,.world-adjust){display:none}}
@media(max-width:599px){
 #world-stage[data-phase] .choice{padding:6px 8px;gap:6px}
 #world-stage[data-phase] #experiment-fields{padding-left:12px;padding-right:12px}
 #world-stage[data-phase] #experiment-fields h1{margin-top:0}
 /* Celular em pé: a linha do exemplo fictício fica na primeira parada, onde se começa; o aviso completo segue acima do bloco. */
 #world-stage[data-phase]:not([data-stop="0"]) .world-note{display:none}
 #world-stage[data-phase] .choice input{width:18px;height:18px}
 #world-stage[data-phase] .review-section{padding:10px}
 #world-stage[data-phase] .review-section h2{letter-spacing:-.01em}
}
@media(min-width:600px) and (max-width:899px) and (orientation:portrait){#world-stage[data-phase]:not([data-mapa]) .world-viewport{height:20svh}}
@media(min-width:900px){#world-stage{--mapa-h:26svh}#world-stage[data-phase]:not([data-mapa]) .world-viewport{height:var(--mapa-h)}}
/* Lote 5.8: no desktop o mapa da fase fica mais alto, fixo por altura de janela: 29% em 720 px, 40% em 900 e 50% em 1080
   (a folga medida abaixo do passo mais alto do 5.7), nunca menos que os 26% do 5.7 nem mais que 55%. A partir de 1200 px de
   largura: em 1024×768 a pergunta, mais estreita, já rolava 29 px no 6.1 e passava a rolar 76 (QA A1). */
@media(min-width:1200px){#world-stage{--mapa-h:clamp(26svh,max(80svh - 367px,100svh - 540px),55svh)}}
/* Tela larga: os campos soltos de um passo dividem a linha (até três), o título fica à esquerda e a dica à direita. */
@media(min-width:900px){
 #world-stage[data-phase] #experiment-fields{grid-template-columns:repeat(6,minmax(0,200px));align-items:start}
 #world-stage[data-phase] #experiment-fields>h1{grid-area:1/1/2/4}
 #world-stage[data-phase] #experiment-fields>.step-hint{grid-area:1/4/2/7}
 #world-stage[data-phase] #experiment-fields>.part-why{grid-column:1/-1}
 #world-stage[data-phase] #experiment-fields>:is(fieldset,label,div){grid-column:1/-1;max-width:none}
 #world-stage[data-phase] #experiment-fields[data-cols="2"]>:is(label,div:not(.compare-grid)){grid-column:span 3}
 #world-stage[data-phase] #experiment-fields[data-cols="3"]>:is(label,div:not(.compare-grid)){grid-column:span 2}
}
/* Deitado: mapa com 42% da largura (a fila das sete paradas cabe inteira), a barra de passos no topo da pergunta, os campos
   lado a lado como na tela larga e o botão de ajuda com o rótulo curto. Na passagem o mapa enche a altura do cartão. */
@media(max-height:640px) and (min-aspect-ratio:4/3){
 #world-stage[data-phase]{grid-template-columns:minmax(0,42fr) minmax(0,58fr);grid-template-rows:auto auto minmax(120px,1fr) auto auto;grid-template-areas:"scene head" "scene status" "scene fields" "scene labstatus" "scene actions"}
 #world-stage[data-phase] .world-viewport{height:auto}
 #world-stage[data-phase] .world-place-head{display:flex;margin:6px 12px 0 16px}
 #world-stage .help-long{display:none}
 #world-stage .help-short{display:inline}
 #world-stage[data-passage=wide] .world-scene{margin-bottom:0;padding-bottom:0}
 #world-stage[data-phase] #experiment-fields:not([data-part="0"]) .part-why{font-size:15px}
 #world-stage[data-phase] #experiment-fields{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:16px;align-content:start;align-items:start;padding:2px 16px 8px}
 #world-stage[data-phase] #experiment-fields>*{grid-column:1/-1}
 #world-stage[data-phase] #experiment-fields[data-cols="2"]>:is(label,div:not(.compare-grid)){grid-column:span 3}
 #world-stage[data-phase] #experiment-fields[data-cols="3"]>:is(label,div:not(.compare-grid)){grid-column:span 2}
 #world-stage[data-phase] .choice-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 /* Os oito botões de ajuste em duas linhas de quatro, dentro da coluna do mapa. */
 #world-stage[data-phase] .world-adjust-buttons{grid-template-columns:repeat(4,44px)}
 #world-stage[data-phase] .lab-review{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:900px),(max-height:640px) and (min-aspect-ratio:4/3){
 /* Campos na mesma linha começam juntos, logo abaixo da dica. */
 #world-stage[data-phase] #experiment-fields:is([data-cols="2"],[data-cols="3"])>:is(label,div:not(.compare-grid)){margin-top:12px}
 #world-stage[data-phase] .compare-column{display:grid;grid-template-columns:repeat(var(--n,1),minmax(0,1fr));column-gap:24px;align-items:start}
 #world-stage[data-phase] .compare-column>h2{grid-column:1/-1}
 #world-stage[data-phase] #experiment-fields:not([data-part="0"]) .compare-grid{grid-template-columns:1fr}
}
@media(max-width:599px){#world-stage .help-long{display:none}#world-stage .help-short{display:inline}}
/* Mensagens da pergunta (rascunho, exemplo, erro, fase concluída): uma faixa sobre a base da área da pergunta, logo acima das
   ações, sem empurrar o passo (QA M1). O que não é erro sai sozinho em 2,5 s, depois de anunciado (world-bridge.js). */
#world-stage[data-phase]{position:relative}
#world-stage[data-phase] #experiment-status{position:absolute;left:12px;right:12px;bottom:4px;z-index:1;margin:0;padding:6px 12px;border:2px solid var(--line);border-radius:12px;background:var(--cream);box-shadow:0 2px 0 var(--line-deep)}
#world-stage[data-phase] #experiment-status:empty{display:none}
/* QA M9 (17/10): a faixa de mensagem não segura o toque no campo que ela cobre. */
#world-stage[data-phase] #experiment-status{pointer-events:none}
@media(max-width:599px){#world-stage #part-skip{min-height:44px;padding:4px 10px;line-height:1.15}}
@media(max-height:640px) and (min-aspect-ratio:4/3){#world-stage #part-skip{padding:4px 10px;line-height:1.15}}
/* Lote 5.8: com o mapa mais alto, os passos mais altos de 1280×720 (revisão, 4.2 e 6.1) perdiam a folga. Só no desktop:
   nos opcionais a frase faz o papel da dica e o primeiro bloco fica a 12 px dela; escolhas com menos opções que colunas
   ocupam a linha (o texto cabe numa linha só); cada bloco da revisão fica numa linha, com título, estado e Editar. */
@media(min-width:900px){
 #world-stage[data-phase] #experiment-fields:not([data-part="0"])>.part-why{margin-bottom:-12px}
 #world-stage[data-phase] .choice-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
 #world-stage[data-phase] .review-section{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;min-height:44px;padding:11px 56px 11px 12px}
 #world-stage[data-phase] .review-section h2{margin:0}
 #world-stage[data-phase] .review-section button{align-items:center}
}
/* Lote 5.8: no desktop as mensagens saem de cima da pergunta e ficam na base do mapa, entre os botões da câmera, numa faixa que
   o enquadramento já deixa livre de paradas e personagens. Vale para a da pergunta (rascunho, exemplo, erro, "Fase concluída.")
   e para a do mapa (parada que ainda não abriu, exploração); com as duas, a da pergunta fica à vista. Com o mapa mais alto, a faixa
   sobre a pergunta cobria até 37 px do passo e a linha do mapa fazia a pergunta rolar 13 px (QA M1 e B1). Sem área da grade, a
   posição conta a partir do bloco inteiro (item de grade com área usa a área como referência). Vale a partir de 1200 px, onde o
   mapa ficou alto: em 1024×768 a dica de exploração tinha três linhas e cobria o Rumo (QA M4); ali fica como no 5.7. */
@media(min-width:1200px){
 #world-stage[data-phase] :is(#experiment-status,.world-status){grid-area:auto;position:absolute;left:50%;right:auto;top:calc(6px + var(--mapa-h) - 10px);bottom:auto;z-index:3;width:max-content;max-width:min(600px,calc(100% - 600px));margin:0;padding:6px 12px;border:2px solid var(--line);border-radius:12px;background:var(--cream);box-shadow:0 2px 0 var(--line-deep);transform:translate(-50%,-100%)}
 #world-stage[data-phase] .world-status:empty,#world-stage[data-phase]:has(#experiment-status:not(:empty)) .world-status{display:none}
}
/* Lote 5.8: a lupa do "Ver bosque" aparece só no desktop; no celular os botões da câmera precisam caber numa linha (Lote 5.5). */
.cam-icon{display:none}
@media(min-width:900px){#world-stage .cam-icon{display:inline-block;margin-right:6px;vertical-align:-3px}
 /* O guia que sai ou entra no quadro do foco perto esmaece em 0,2 s, em vez de piscar (QA M3 da 2ª rodada). */
 #world-layer .map-figure{transition:opacity .2s,visibility .2s}}
/* Lote 5.10: mostrar. A criança reconhece tudo na tela: a entrada diz qual botão é de quem, o topo da pergunta diz a fase, a
   fila e o mapa usam os mesmos nomes e símbolos, cada botão diz o que faz e os balões ficam na camada de cima, sem mudar o
   layout nem a rolagem. Nada aqui ganha altura: em 390×844 e 1280×720 alguns passos têm de 7 a 13 px de folga, e deitado
   nenhuma. */
.hero-note{margin:14px 0 0;font-size:15px;line-height:1.45;color:var(--muted)}
.hero-login{min-height:44px;padding:0;border:0;background:none;font:inherit;font-weight:900;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* O grau da bússola fica só na rota dos Pais. */
body[data-programa=filho] #trilha :is(.station-degree,.dock-bearing,.map-direction){display:none}
/* Topo da pergunta em duas linhas, ao lado do botão de ajuda (a linha dele já tinha 44 px): "Fase 4 de 7 · Placa" e, embaixo,
   a etapa e o passo. Deitado, numa linha só. */
#world-stage #world-place-zone{flex-basis:100%;color:var(--ink);letter-spacing:0}
#world-stage .world-place-stage{margin:0;font-size:14px;font-weight:800;line-height:1.4;color:var(--muted)}
@media(max-height:640px) and (min-aspect-ratio:4/3){#world-stage #world-place-zone{flex-basis:auto}}
/* Sem o botão de ajuda ao lado (Mirante), a linha do topo não tem os 44 px dele: fase, etapa e passo cabem numa linha só. */
#world-stage:has(#lab-help[hidden]) #world-place-zone{flex-basis:auto}
/* O botão de ajuda leva o nome de quem ajuda: "Pedir ajuda ao Bino". No celular e deitado, em duas linhas, para o topo caber. */
.help-world{display:none}
#world-stage #lab-help .help-world{display:inline}
#world-stage #lab-help :is(.help-long,.help-short){display:none}
@media(max-width:599px),(max-height:640px) and (min-aspect-ratio:4/3){
 #world-stage #lab-help{white-space:normal;text-align:left;line-height:1.15}
 #world-stage #lab-help .help-world>span{display:block}
 #world-stage .companion-stage{gap:6px;padding-right:10px}
}
@media(max-width:599px){
 #world-stage .world-place-head{margin:6px 4px 0 12px}
 #world-stage .companion-stage{margin-right:12px}
 #world-stage #world-place-zone{font-weight:800}
 /* A barra de passos sai no celular; o texto "Passo 1 de 2" fica. */
 #world-stage .part-bar{display:none}
}
/* Botões da câmera com o texto inteiro em todo tamanho. No celular e deitado eles dividem a linha e o texto quebra dentro do
   botão, para não abrir uma segunda linha sobre o mapa. */
@media(max-width:599px),(max-height:640px) and (min-aspect-ratio:4/3){
 #world-stage .world-camera{flex-wrap:nowrap}
 #world-stage .world-camera>button,#world-stage .world-adjust summary{min-width:44px;padding:4px 8px;line-height:1.1;text-align:left}
 #world-stage .world-camera>button{flex:0 1 auto}
 #world-stage .world-adjust{flex:0 1 auto;min-width:0}
}
/* Fila das fases: o nome da parada ao lado do círculo, com o estado embaixo. No desktop todos; no tablet em pé, o da atual. No
   celular e deitado não há largura: o nome da atual fica no topo da pergunta e no mapa, e o das outras aparece ao tocar. */
.node-name{display:none}
@media(min-width:900px) and (min-height:641px){
 #world-stage .world-steps{width:min(100% - 16px,1080px);container-type:inline-size}
 #world-stage .world-steps li{display:flex;align-items:center;gap:6px}
 #world-stage .node-name{display:flex;flex-direction:column;padding-right:6px;background:var(--white);font-size:14px;line-height:1.2;color:var(--ink);cursor:pointer}
 #world-stage .node-name b{font-weight:900}
 #world-stage .node-name small{font-size:14px;font-weight:700;color:var(--muted)}
 #world-stage .node-name[data-look=aqui] small{color:var(--ink);font-weight:900}
}
@container (max-width:900px){#world-stage .node-name:not([data-look=aqui]) small{display:none}}
@media(min-width:600px) and (max-width:899px) and (orientation:portrait){
 #world-stage .world-steps li:has([aria-current]){display:flex;align-items:center;gap:6px}
 #world-stage li:has([aria-current]) .node-name{display:flex;flex-direction:column;padding-right:6px;background:var(--white);font-size:14px;line-height:1.2}
 #world-stage li:has([aria-current]) .node-name small{font-size:14px;font-weight:900}
}
/* Estados com o mesmo símbolo e o mesmo nome na fila, no mapa e na legenda. */
.world-node[data-look=aqui]{background:var(--sun);border-color:var(--ink);transform:scale(1.12);box-shadow:0 3px 0 var(--line-deep)}
.world-node[data-look=feita]{background:var(--leaf)}
/* QA M1 (17/10): com o exercício guardado, a fase deixada para depois continua branca, como na legenda. */
.world-node[data-look=depois]{background:var(--white)}
.world-node[data-look=fechada]{border-style:dashed;color:var(--muted)}
/* "Dicas", no canto de cima do mapa, sempre no mesmo lugar: reabre as dicas e a legenda. */
.world-guide-open{position:absolute;left:10px;top:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;min-width:44px;min-height:44px;padding:6px 12px 6px 6px;border:2px solid var(--line);border-radius:999px;background:var(--white);box-shadow:0 2px 0 var(--line-deep);font:inherit;font-size:14px;font-weight:900;color:var(--ink);cursor:pointer}
.world-guide-open:active{transform:translateY(2px);box-shadow:0 0 0 var(--line-deep)}
.guide-q{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--white);font-size:16px;line-height:1}
#world-stage[data-passage] .world-guide-open{opacity:0;pointer-events:none}
/* Com um campo de texto em foco no celular e no tablet em pé o mapa recolhe e a fila sobe: o botão sai junto com o mapa, como
   os da câmera, para não cobrir as primeiras fases da fila. */
@media(max-width:899px) and (orientation:portrait){#world-stage[data-typing] .world-guide-open{display:none}}
@media(max-width:599px),(max-height:640px) and (min-aspect-ratio:4/3){.world-guide-open{left:8px;top:8px}}
/* Rótulos no mapa: nome curto de cada personagem e "Você está aqui", em texto de 14 px que não muda com o zoom. */
.map-tags{position:absolute;inset:0;z-index:30000;pointer-events:none}
.map-name,.map-here{position:absolute;left:0;top:0;border:2px solid var(--line);background:var(--white);color:var(--ink);font-size:14px;font-weight:900;line-height:1.2;white-space:nowrap}
/* QA M7 (17/10): o nome não é alvo de toque (teria 23 px); o toque é no desenho do personagem. */
.map-name{padding:1px 8px;border-radius:999px}
.map-here{display:flex;flex-direction:column;align-items:center;padding:2px 10px;border-color:var(--ink);border-radius:12px}
.map-here small{font-size:14px;font-weight:800}
.world-layer .companion svg{pointer-events:visiblePainted;cursor:pointer}
/* Balão de fala: borda tinta, ponta para o elemento, sem sombra de botão. Na camada de cima, sem mexer no layout. */
.world-tip{position:fixed;inset:auto;margin:0;width:max-content;max-width:min(340px,calc(100% - 16px));padding:12px 14px;border:2px solid var(--ink);border-radius:18px;background:var(--white);color:var(--ink);overflow:visible}
.world-tip:popover-open{display:flex;align-items:flex-start;gap:10px}
.world-tip::before{content:"";position:absolute;left:var(--tail,50%);width:14px;height:14px;background:var(--white);border:2px solid var(--ink);transform:translateX(-50%) rotate(45deg)}
.world-tip[data-side=below]::before{top:-9px;border-right:0;border-bottom:0}
.world-tip[data-side=above]::before{bottom:-9px;border-left:0;border-top:0}
.world-tip[data-side=over]::before{display:none}
/* Balão só de informação não recebe toque: o toque segue para o botão que estiver embaixo e o fecha. */
.world-tip:is([data-kind=fechada],[data-kind=papel]){pointer-events:none}
.tip-face{position:relative;flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--cream)}
.tip-face[hidden]{display:none}
.tip-face .companion{position:absolute;width:var(--face-w,71px);left:var(--face-x,-15px);top:var(--face-y,-22px)}
.tip-face [data-character=bino]{--face-w:71px;--face-x:-15px;--face-y:-7px}
.tip-face [data-character=pipa]{--face-w:99px;--face-x:-29px;--face-y:-14px}
.tip-face [data-character=teo]{--face-w:75px;--face-x:-34px;--face-y:-16px}
.tip-body{min-width:0}
.tip-text{margin:0;font-size:15px;line-height:1.4;font-weight:700}
.tip-text b{display:block;font-weight:900}
.tip-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.tip-foot[hidden]{display:none}
.tip-count{font-size:14px;font-weight:800;color:var(--muted)}
.tip-ok{min-height:44px;padding:8px 18px;border:2px solid var(--ink);border-radius:12px;background:var(--sun);font:inherit;font-size:15px;font-weight:900;color:var(--ink);cursor:pointer}
.tip-ok:focus-visible,.world-guide-open:focus-visible,.map-name:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
/* Legenda: os estados, as quatro etapas e quem é quem. Rola por dentro se a tela for baixa. */
.world-guide{position:fixed;inset:auto;margin:0;width:min(420px,calc(100% - 16px));max-height:calc(100% - 16px);overflow:auto;padding:16px 18px;border:2px solid var(--ink);border-radius:20px;background:var(--white);color:var(--ink)}
.world-guide h2{margin:0 0 10px;font-size:18px}
.world-guide h3{margin:16px 0 8px;font-size:16px}
.world-guide ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.world-guide li{font-size:15px;line-height:1.4}
.guide-looks li,.guide-cast li{display:flex;align-items:center;gap:10px}
.guide-looks .world-node{--stage:var(--ink);flex:none;pointer-events:none}/* QA B4: sem o efeito de passar o mouse */
.guide-looks b{display:block;font-weight:900}
.guide-looks small{display:block;font-size:14px;color:var(--muted)}
/* QA M8 (17/10): o topo da legenda, com "Fechar", fica preso enquanto ela rola. */
.guide-head{position:sticky;top:-16px;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-16px -18px 10px;padding:10px 18px;border-bottom:2px solid var(--line);background:var(--white)}
.world-guide .guide-head h2{margin:0}
.guide-note{margin:0 0 8px;font-size:14px;color:var(--muted)}
.guide-stages li{display:flex;align-items:flex-start;gap:10px}
.stage-dot{flex:none;width:18px;height:18px;margin-top:2px;border:3px solid var(--stage);border-radius:50%;background:var(--white)}
.guide-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.guide-actions .back{min-height:44px}
@media(prefers-reduced-motion:reduce){.world-guide-open{transition:none}}