@font-face{font-family:Funnel Sans;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/funnel-sans-latin-400-normal-DoUbjnPF.woff2)format("woff2"),url(/assets/funnel-sans-latin-400-normal-lg3X1pA2.woff)format("woff")}@font-face{font-family:Funnel Sans;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/funnel-sans-latin-600-normal-C79PO7m9.woff2)format("woff2"),url(/assets/funnel-sans-latin-600-normal-BLIooA7Q.woff)format("woff")}@font-face{font-family:Funnel Sans;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/funnel-sans-latin-700-normal-BmG_XEFx.woff2)format("woff2"),url(/assets/funnel-sans-latin-700-normal-CQdsfxpd.woff)format("woff")}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:var(--lightningcss-light,#d6d7da)var(--lightningcss-dark,#26272a);--surface:var(--lightningcss-light,#b8b9bc)var(--lightningcss-dark,#47484b);--ink:var(--lightningcss-light,#111214)var(--lightningcss-dark,#f4f4f2);--muted:var(--lightningcss-light,#3f4247)var(--lightningcss-dark,#bcbec3);--glass:var(--lightningcss-light,#fff6)var(--lightningcss-dark,#1011135c);--glass-plate:var(--lightningcss-light,#ffffffb8)var(--lightningcss-dark,#f4f4f229);--frost:blur(24px) saturate(1.4)}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{color:var(--ink);-webkit-text-size-adjust:100%;margin:0;font-family:Funnel Sans,Trebuchet MS,sans-serif;line-height:1.3}html{background:radial-gradient(55% 60% at 8% 4%, var(--lightningcss-light,#f5cf1480)var(--lightningcss-dark,#f5cf1442), transparent 72%), radial-gradient(45% 55% at 96% 12%, var(--lightningcss-light,#1d9f4b5c)var(--lightningcss-dark,#1d9f4b42), transparent 72%), radial-gradient(55% 55% at 82% 104%, var(--lightningcss-light,#f47a1c6b)var(--lightningcss-dark,#f47a1c42), transparent 72%), radial-gradient(45% 50% at -4% 100%, var(--lightningcss-light,#2460cf52)var(--lightningcss-dark,#2460cf47), transparent 72%), var(--bg);background-attachment:fixed;min-height:100%}p{margin:0}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;place-items:center;margin:0;padding:0;display:grid}:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.lesson{max-width:640px;height:100svh;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);-webkit-user-select:none;user-select:none;flex-direction:column;margin:0 auto;display:flex;overflow:hidden;container-type:inline-size}.ico{fill:currentColor;width:24px;height:24px;display:block}.ico.line{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round}.head{align-items:flex-start;gap:12px;padding:18px 20px 0;display:flex}.id{flex:1;min-width:0}.name{letter-spacing:-.01em;font-size:23px;font-weight:700;line-height:1.1}.say{color:var(--muted);text-wrap:balance;margin-top:2px;font-size:15px}.ticks{flex:none;align-items:flex-end;gap:4px;margin-top:6px;display:flex}.ticks span{background:var(--surface);border-radius:2px;width:8px;height:8px}.ticks .done{background:var(--ink)}.ticks .now{background:var(--ink);border-radius:3px;width:12px;height:12px}.ticks.count{color:var(--muted);white-space:nowrap;margin-top:4px;font-size:15px;font-weight:600}.scene{--overhang:max(0px, (100cqw - 540px) / 2);flex:1 1 0;width:100%;max-width:540px;min-height:0;margin:0 auto;position:relative}canvas.cube{touch-action:none;cursor:grab;width:100%;height:100%;position:absolute;inset:0}.trace{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.trace[hidden]{display:none}.trace polygon{fill:none;stroke:var(--ink);stroke-width:2px;stroke-linejoin:round;stroke-dasharray:1}.turn,.home{right:calc(12px - var(--overhang));width:44px;height:44px;color:var(--muted);position:absolute;bottom:4px}.home{right:calc(60px - var(--overhang))}.home[hidden]{display:none}.next-stage{white-space:nowrap;align-items:center;gap:6px;min-height:44px;padding:0 10px;font-size:16px;font-weight:600;display:flex;position:absolute;bottom:4px;left:50%;transform:translate(-50%)}.next-stage[hidden]{display:none}.next-stage:not([hidden]){animation:.32s cubic-bezier(.16,1,.3,1) way-on}@keyframes way-on{0%{opacity:0;transform:translate(-50%,6px)}}.home:not([hidden]){animation:.26s cubic-bezier(.16,1,.3,1) view-on}@keyframes view-on{0%{opacity:0;transform:scale(.7)}}@media (prefers-reduced-motion:no-preference){.pictos button,.transport button,.menu .row,.menu .tile,.menu .step{transition:transform .18s cubic-bezier(.16,1,.3,1)}.pictos button:active,.transport button:active,.menu .row:active,.menu .tile:active,.menu .step:active{transition-duration:60ms;transform:scale(.96)}}@media (prefers-reduced-motion:reduce){.next-stage:not([hidden]),.home:not([hidden]){animation:none}}.guide{left:calc(8px + var(--gx,1) * (100% - 88px));top:calc(var(--gy,0) * (100% - 124px));z-index:2;touch-action:none;cursor:grab;width:72px;height:72px;position:absolute}.guide canvas{width:100%;height:100%;display:block}.guide[hidden]{display:none}.bubble:empty{opacity:0;pointer-events:none}.head{position:relative}.is-talking .say{visibility:hidden}.bubble{z-index:3;background:var(--ink);width:max-content;max-width:min(260px,100% - 16px);color:var(--bg);text-wrap:balance;border-radius:12px;padding:8px 12px;font-size:14px;position:absolute}.bubble[data-v=below]{top:calc(var(--gy,0) * (100% - 124px) + 78px)}.bubble[data-v=above]{bottom:calc(100% - var(--gy,0) * (100% - 124px) + 6px)}.bubble:after{content:"";left:var(--tail,27px);background:inherit;width:18px;height:10px;position:absolute}.bubble[data-v=below]:after{clip-path:polygon(40% 0,100% 100%,0 100%);top:-9px}.bubble[data-v=above]:after{clip-path:polygon(0 0,100% 0,60% 100%);bottom:-9px}.pictos{gap:6px 3px;padding:0 16px;display:flex}.pictos.two-rows{grid-template-columns:repeat(var(--cols), minmax(0, 46px));display:grid}.pictos.two-rows>*{min-width:0}.pictos button{border-radius:7px;flex:0 46px;gap:2px;min-width:42px;padding:5px 0 3px;font-size:14px;font-weight:600}.pictos svg{aspect-ratio:1;width:min(33px,100% - 6px);height:auto;display:block}.pictos .cell{fill:color-mix(in srgb, var(--ink) 30%, var(--bg))}.pictos .arrow{fill:currentColor}.pictos svg:has(.moving) .arrow{stroke:var(--bg);stroke-width:1.4px;paint-order:stroke}.pictos .now svg:has(.moving) .arrow{stroke:var(--ink)}.pictos .arc{fill:none;stroke:currentColor;stroke-width:3.6px;stroke-linecap:round}.pictos .hollow{fill:none;stroke:color-mix(in srgb, var(--ink) 30%, var(--bg));stroke-width:1.6px}.pictos .now .hollow{fill:none;stroke:color-mix(in srgb, var(--bg) 26%, var(--ink))}.pictos .times{color:var(--muted);font-variant-numeric:tabular-nums;align-self:center;padding-left:4px;font-size:16px;font-weight:600}.pictos .done{color:var(--muted)}.pictos .now{background:var(--ink);color:var(--bg)}.pictos .now .cell{fill:color-mix(in srgb, var(--bg) 45%, var(--ink))}.dock{background:var(--glass);width:fit-content;max-width:calc(100% - 24px);-webkit-backdrop-filter:var(--frost);backdrop-filter:var(--frost);border-radius:20px;align-self:center;justify-items:center;gap:8px;margin:4px auto 20px;padding:8px 10px 10px;display:grid}.app[data-page] .dock{display:none}.dock .pictos{min-width:0;max-width:100%;padding:2px 0}.transport{align-items:center;gap:4px;width:100%;display:flex}.speeds{gap:2px;margin-right:auto;padding-right:16px;display:flex}.speeds button{min-width:44px;height:44px;color:var(--muted);border-radius:10px;padding:0 6px;font-size:16px;font-weight:600}.speeds button[aria-pressed=true]{color:var(--ink);background:var(--glass-plate)}.key{border-radius:12px;width:48px;height:48px}.key.play{background:var(--ink);width:58px;height:58px;color:var(--bg);border-radius:14px}.key.play .ico{width:28px;height:28px}.p2,.p3,.is-playing .p1,.is-done .p1{display:none}.is-playing .p2,.is-done:not(.is-playing) .p3{display:block}.measure{top:env(safe-area-inset-top,0px);background:var(--ink);color:var(--bg);padding:4px 8px;font-size:12px;position:fixed;left:0;right:0}@container (width<=380px){.pictos{column-gap:2px;padding:0 12px}.pictos button{min-width:0}.dock{max-width:calc(100% - 16px);padding:8px 6px}.transport{gap:2px}.speeds{padding-right:4px}.speeds button{min-width:40px;padding:0}.key{width:46px}.key.play{width:54px;height:54px}}.menu{-webkit-user-select:none;user-select:none;flex-direction:column;display:flex}.cubes,.levels{background:var(--glass);border-radius:14px;flex:none;align-self:start;gap:2px;padding:4px;display:flex}.cubes button{width:68px;color:var(--muted);border-radius:10px;justify-items:center;padding:4px 0 6px;font-size:13px;font-weight:600;display:grid}.line-cube{width:37px;height:40px}.line-cube path{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linejoin:round;stroke-linecap:round}.line-cube .layers{opacity:.6}.cubes button[aria-pressed=true] .out{stroke-width:2.2px}.levels{margin-top:10px}.levels button[hidden]{display:none}.levels button{min-height:44px;color:var(--muted);border-radius:10px;padding:0 14px;font-size:15px;font-weight:600}.cubes button[aria-pressed=true],.levels button[aria-pressed=true]{background:var(--glass-plate);color:var(--ink)}.list{flex:1 1 0;min-height:0;position:relative;overflow-y:auto}.list>div>[hidden]{display:none}.shelf{gap:2px;padding-bottom:6px;display:flex}.step{border-radius:9px;flex:0 44px;justify-items:center;gap:2px;min-width:0;padding:4px 0 2px;display:grid}.step canvas{aspect-ratio:1;width:min(38px,100%)}.step[aria-expanded=true]{background:var(--glass-plate)}.step .sname,.row i,.tile i,.tile .lname{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.check{fill:none;width:14px;height:14px;stroke:var(--ink);stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round;visibility:hidden}.done>.check{visibility:visible}.stage-title{margin:0;padding:6px 10px;font-size:20px;font-weight:700;line-height:1.15}.row{text-align:left;border-radius:10px;align-items:center;gap:10px;width:100%;min-height:52px;padding:6px 10px;display:flex}.ltext{flex:1;min-width:0;display:grid}.row .check{flex:none;width:18px;height:18px}.case{flex:none;width:36px;height:36px}.cases{flex-wrap:wrap;gap:2px;padding:2px 0 8px;display:flex}.tile{border-radius:10px;justify-items:center;gap:2px;width:52px;padding:6px 0 8px;display:grid}canvas.case{width:44px;height:44px}.case .cell{fill:color-mix(in srgb, var(--ink) 30%, var(--bg))}.case .on{fill:var(--ink)}.case line{stroke:var(--ink);stroke-width:1.8px}.case .arc{fill:none;stroke:var(--ink);stroke-width:1.8px;stroke-linecap:round}.lname{font-size:15px;font-weight:600}.row.done .lname{color:var(--muted);font-weight:400}.formula{color:var(--muted);letter-spacing:.02em;white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}.row:has(.case) .formula{white-space:normal}.go{flex:none;align-items:center;gap:12px;display:flex}.go p{flex:1;min-width:0;font-size:17px;font-weight:600}.go button[hidden]{display:none}.menu{max-width:640px;height:100svh;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);margin:0 auto}@media (width<1000px){.app.is-open .menu,.app:not(.is-open)>.lesson{display:none}.app{overflow-x:clip}.cubes{margin:16px 20px 0}.levels{margin-inline:20px}.list{background:var(--glass);-webkit-backdrop-filter:var(--frost);backdrop-filter:var(--frost);border-radius:20px;margin:14px 14px 0;padding:14px 10px}.row.now,.tile.now{background:var(--glass-plate)}.go{background:var(--glass);-webkit-backdrop-filter:var(--frost);backdrop-filter:var(--frost);border-radius:20px;margin:10px 14px 18px;padding:12px 12px 12px 18px}.go:has(button[hidden]){visibility:hidden}}@media (width<380px){.levels{margin-inline:14px}.levels button{padding:0 8px}}.back{left:calc(12px - var(--overhang));width:44px;height:44px;color:var(--muted);position:absolute;bottom:4px}@media (width>=1000px){.app{grid-template-columns:360px minmax(0,1fr);gap:36px;height:100svh;padding:16px 0 16px 16px;display:grid}.menu{isolation:isolate;border-radius:22px;max-width:none;height:100%;margin:0;padding:20px 16px 8px;position:relative}.menu:before{content:"";z-index:-1;border-radius:inherit;background:var(--glass);-webkit-backdrop-filter:var(--frost);backdrop-filter:var(--frost);position:absolute;inset:0}.cubes,.levels{margin-inline:4px}.list{margin-top:14px;padding-bottom:8px}.tile{width:44px}.row.open,.tile.open{background:var(--glass-plate)}.go,.back{display:none}@media (hover:hover){.row:not(.open):hover,.tile:not(.open):hover,.step:not([aria-expanded=true]):hover{background:color-mix(in srgb, var(--glass-plate) 50%, transparent)}}.app>.lesson{max-width:none;height:100%;margin:0;padding:0;container-type:size}.app>.lesson .ticks{display:none}.app>.lesson .head{padding:28px 96px 0 0}.app>.lesson .name{font-size:28px}.app>.lesson .say{margin-top:6px;font-size:17px}.app>.lesson .scene{flex:1 1 0;align-self:center;width:calc(100% - 48px);max-width:none;margin-block:8px;container-type:size}.app>.lesson canvas.cube{width:min(100cqw,540px,100cqh);height:min(100cqw,540px,100cqh);margin:auto;inset:0}.app>.lesson .turn{bottom:8px;right:0}.app>.lesson .home{bottom:8px;right:48px}.app>.lesson .pictos{justify-content:center;gap:8px 6px;padding:0 32px}.app>.lesson .dock .pictos{padding:2px 0}.app>.lesson .pictos button{flex:none;width:52px;padding:6px 0 4px}.app>.lesson .pictos svg{width:36px;height:36px}.app>.lesson .dock{margin-bottom:28px}}.more{flex:none;align-items:center;gap:8px;padding:6px 20px;display:flex}.more button[hidden]{display:none}[data-layout=lang]{padding:0 0 4px 12px}.lang{min-height:44px;color:var(--muted);padding:0 8px;font-size:16px;font-weight:600}.lang[aria-current=page]{color:var(--ink);text-underline-offset:4px;text-decoration:underline}.more-open{width:52px;height:52px;margin-left:-4px}.more-open canvas{width:100%;height:100%;display:block}.more-veil{z-index:20;background:color-mix(in srgb, var(--bg) 96%, transparent);opacity:0;position:fixed;inset:0}.more-pop{z-index:21;pointer-events:none;position:fixed}.more-veil[hidden],.more-pop[hidden]{display:none}.more-pop canvas{width:100%;height:100%;display:block}.more-item{pointer-events:auto;white-space:nowrap;opacity:0;align-items:center;height:60px;font-size:20px;font-weight:600;display:flex;position:absolute}.more-item[data-side=left]{padding:0 96px 0 8px}.more-item[data-side=right]{padding:0 8px 0 96px}.more-item[aria-current=page] .word{text-underline-offset:5px;text-decoration:underline}@media (prefers-reduced-motion:no-preference) and (width<1000px){.app[data-arrive]>.menu>:not(.more){animation:.5s cubic-bezier(.16,1,.3,1) .2s both arrive}}@media (prefers-reduced-motion:no-preference) and (width>=1000px){.app[data-arrive]>.menu{animation:.5s cubic-bezier(.16,1,.3,1) .2s both arrive}}@media (prefers-reduced-motion:no-preference){.app[data-arrive]>.lesson>:not(.scene),.app[data-arrive] .scene>button{animation:.5s cubic-bezier(.16,1,.3,1) .2s both arrive}}@keyframes arrive{0%{opacity:0}}@media (width<380px){.more{padding-inline:12px}}@media (width<1000px){.menu{position:relative}[data-layout=pieces]{top:calc(env(safe-area-inset-top,0px) + 8px);right:calc(env(safe-area-inset-right,0px) + 2px);z-index:2;padding:0;position:absolute}[data-layout=pieces] .more-open{margin:0}}@media (width<380px){[data-layout=pieces]{top:calc(env(safe-area-inset-top,0px) + 12px);right:calc(env(safe-area-inset-right,0px) + 8px)}[data-layout=pieces] .more-open{width:44px;height:44px}}.app[data-page]>.lesson :is(.ticks,[data-formula],.transport){display:none}.page-block{padding:6px 0 calc(20px + env(safe-area-inset-bottom,0px));flex-direction:column;flex:none;gap:18px;display:flex}.page-block[hidden]{display:none}.cube-row{padding:0 20px}.cube-row>p{color:var(--muted);font-size:15px;font-weight:600}.cube-row>div{gap:22px;margin-top:4px;display:flex}.cube-row button{text-align:center;flex-direction:column;align-items:center;gap:2px;min-width:44px;max-width:96px;padding:2px 0;font-size:14px;font-weight:600;line-height:1.15;display:flex}.cube-row canvas{width:44px;height:44px}.cube-row button[aria-pressed=true] span{text-underline-offset:4px;text-decoration:underline;text-decoration-thickness:2px}@container (width<=380px){.cube-row{padding:0 12px}}@media (width>=1000px){.app>.lesson>.page-block{align-self:center;width:fit-content;max-width:100%;padding-bottom:28px}.app>.lesson .cube-row{padding:0 36px}.app>.lesson .page-block .pictos{justify-content:start}[data-layout=lang]{padding-bottom:8px}[data-layout=pieces]{z-index:22;padding:0;position:fixed;top:18px;right:22px}}