@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)}@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,#f5cf1457)var(--lightningcss-dark,#f5cf1429), transparent 72%), radial-gradient(45% 55% at 96% 12%, var(--lightningcss-light,#1d9f4b38)var(--lightningcss-dark,#1d9f4b29), transparent 72%), radial-gradient(55% 55% at 82% 104%, var(--lightningcss-light,#f47a1c47)var(--lightningcss-dark,#f47a1c29), transparent 72%), radial-gradient(45% 50% at -4% 100%, var(--lightningcss-light,#2460cf2e)var(--lightningcss-dark,#2460cf29), 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))}.transport{align-items:center;gap:10px;padding:10px 20px 20px;display:flex}.speeds{gap:2px;margin-right:auto;display:flex}.speeds button{min-width:44px;height:44px;color:var(--muted);border-bottom:3px solid #0000;font-size:16px;font-weight:600}.speeds button[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--ink)}.round{background:var(--surface);border-radius:50%;width:46px;height:46px}.round.play{background:var(--ink);width:62px;height:62px;color:var(--bg)}.round.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}}.menu{background:var(--bg);-webkit-user-select:none;user-select:none;flex-direction:column;display:flex}.cubes{flex:none;gap:2px;padding:12px 12px 0;display:flex}.cubes button{min-height:44px;color:var(--muted);padding:0 8px;font-size:20px;font-weight:700}.cubes button[aria-pressed=true]{color:var(--ink)}.levels{flex:none;gap:2px;padding:12px 12px 4px;display:flex}.cubes+.levels{padding-top:0}.levels button[hidden]{display:none}.levels button{min-height:44px;color:var(--muted);border-bottom:3px solid #0000;padding:0 8px;font-size:16px;font-weight:600;position:relative}.levels button:after{content:"";background:var(--ink);height:3px;transition:transform .28s cubic-bezier(.16,1,.3,1);position:absolute;inset:auto 0 -3px;transform:scaleX(0)}.levels button[aria-pressed=true]{color:var(--ink)}.levels button[aria-pressed=true]:after{transform:none}@media (prefers-reduced-motion:reduce){.levels button:after{transition:none}}.list{flex:1 1 0;min-height:0;padding:4px 8px 16px;position:relative;overflow-y:auto}.step{align-items:center;gap:12px;padding:16px 8px 4px;display:flex}.step canvas{flex:none;width:44px;height:44px}.step .sname{flex:1;min-width:0;font-size:17px;font-weight:700}.step.done .sname{color:var(--muted);font-weight:600}.row{text-align:left;border-radius:7px;justify-content:flex-start;align-items:center;gap:28px;width:100%;min-height:52px;padding:6px 12px 6px 24px;display:flex}.row i,.tile i{flex:none;place-items:center;width:12px;display:grid}.row i:before,.tile i:before{content:"";background:color-mix(in srgb, var(--ink) 30%, var(--bg));border-radius:2px;width:8px;height:8px}.row.done i:before,.tile.done i:before{background:var(--ink)}.row.now i:before,.tile.now i:before{background:var(--ink);border-radius:3px;width:12px;height:12px}.ltext{min-width:0;display:grid}.case{flex:none;width:36px;height:36px;margin-left:auto}.cases{flex-wrap:wrap;gap:2px;padding:4px 12px 8px 56px;display:flex}.tile{border-radius:7px;justify-items:center;gap:6px;width:52px;padding:6px 0 8px;display:grid}.tile .case{margin:0}.tile i{height:12px}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:16px;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:14px;overflow:hidden}.row:has(.case) .formula{white-space:normal}.tile .lname{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.go{flex:none;align-items:center;gap:12px;padding:12px 20px 20px;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}.list{-webkit-mask-image:linear-gradient(#000 calc(100% - 24px),#0000);mask-image:linear-gradient(#000 calc(100% - 24px),#0000)}}.back{left:calc(12px - var(--overhang));width:44px;height:44px;color:var(--muted);position:absolute;bottom:4px}@media (width>=1000px){.app{grid-template-columns:300px minmax(0,1fr);gap:8px;height:100svh;padding:16px 0 16px 16px;display:grid}.menu{--bg:var(--lightningcss-light,#dcdddf)var(--lightningcss-dark,#414348);--surface:var(--lightningcss-light,#bbbcc0)var(--lightningcss-dark,#2f3135);border-radius:14px;max-width:none;height:100%;margin:0;padding:0;overflow:hidden}.list{padding-bottom:8px}.step{gap:10px;padding:14px 4px 4px}.step canvas{width:40px;height:40px}.row{gap:24px;padding-left:18px}.cases{padding-left:4px;padding-right:4px}.tile{width:44px}.row.open,.tile.open{background:var(--surface)}.go,.back{display:none}@media (hover:hover){.row:not(.open):hover,.tile:not(.open):hover{background:color-mix(in srgb, var(--surface) 55%, var(--bg))}}.app>.lesson{max-width:none;height:100%;margin:0;padding:0;container-type:size}.app>.lesson .ticks{display:none}.app>.lesson .head{padding:28px 36px 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 .pictos button{flex:none;width:52px;padding:6px 0 4px}.app>.lesson .pictos svg{width:36px;height:36px}.app>.lesson .transport{padding:12px 36px 28px}}@media (width<1000px){.menu{background:0 0}}.list>div>[hidden]{display:none}.step{text-align:left;border-radius:7px;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;width:100%;min-height:48px;padding:4px;display:grid}.step canvas{width:36px;height:36px}.step .sname{font-size:16px}.marks{color:var(--muted);font-variant-numeric:tabular-nums;gap:3px;padding-right:6px;font-size:13px;font-weight:600;display:flex}.marks i{background:color-mix(in srgb, var(--ink) 30%, var(--bg));border-radius:1.5px;width:6px;height:6px}.marks i.done,.marks i.now{background:var(--ink)}.row{gap:12px;min-height:44px;padding:4px 8px 4px 18px}.lname{font-size:15px}.formula{font-size:13px}.cases{padding:2px 4px 8px 14px}@media (width>=1000px){.menu{--bg:var(--lightningcss-light,#c7c8cb)var(--lightningcss-dark,#1e1f22);--surface:color-mix(in srgb, var(--ink) 11%, var(--bg))}.cases{padding-left:4px}}@media (width>=1000px) and (hover:hover){.step:hover{background:color-mix(in srgb, var(--surface) 55%, var(--bg))}}.step .sname{text-align:left;justify-self:start}.marks{justify-self:end}.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}.menu:has([data-layout=pieces]) .levels{padding-right:76px}}@media (width<380px){.menu:has([data-layout=pieces]) .levels{padding-right:60px}.menu:has([data-layout=pieces]) .levels button{padding:0 5px}[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}}