@font-face{font-family:Familjen Grotesk;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/familjen-grotesk-latin-400-normal-DOvmqNol.woff2)format("woff2"),url(/assets/familjen-grotesk-latin-400-normal-DYohiwGD.woff)format("woff")}@font-face{font-family:Familjen Grotesk;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/familjen-grotesk-latin-600-normal-DR8FYmV8.woff2)format("woff2"),url(/assets/familjen-grotesk-latin-600-normal-Cchso0CV.woff)format("woff")}@font-face{font-family:Familjen Grotesk;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/familjen-grotesk-latin-700-normal-DP3KK2u2.woff2)format("woff2"),url(/assets/familjen-grotesk-latin-700-normal-Cqh4U_Q6.woff)format("woff")}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:var(--lightningcss-light,#cdced1)var(--lightningcss-dark,#35373b);--surface:var(--lightningcss-light,#bbbcc0)var(--lightningcss-dark,#45474c);--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{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%;margin:0;font-family:Familjen Grotesk,Trebuchet MS,sans-serif;line-height:1.3}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}.scene{flex:1 1 0;width:100%;max-width:540px;min-height:0;margin:0 auto;position:relative}canvas.cube{touch-action:pan-y;cursor:grab;width:100%;height:100%;position:absolute;inset:0}.turn{width:44px;height:44px;color:var(--muted);position:absolute;bottom:4px;right:12px}.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) arrive}@keyframes arrive{0%{opacity:0;transform:translate(-50%,6px)}}@media (prefers-reduced-motion:reduce){.next-stage:not([hidden]){animation:none}}.guide{width:72px;height:72px;position:absolute;top:0;right:8px}.guide canvas{width:100%;height:100%;display:block}.guide[hidden]{display:none}.bubble:empty{opacity:0;pointer-events:none}.head{position:relative}.is-talking>:not(.bubble){visibility:hidden}.bubble{background:var(--ink);min-height:calc(100% - 8px);color:var(--bg);text-wrap:balance;border-radius:12px;align-items:center;padding:10px 14px;font-size:15px;display:flex;position:absolute;inset:8px 12px auto}.bubble:after{content:"";background:inherit;clip-path:polygon(0 0,100% 0,60% 100%);width:18px;height:10px;position:absolute;bottom:-9px;right:calc(max(0px,50cqw - 270px) + 23px)}.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{width:33px;height:33px;display:block}.pictos .cell{fill:color-mix(in srgb, var(--ink) 30%, var(--bg))}.pictos .arrow{fill:currentColor}.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) 26%, 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}.levels{flex:none;gap:2px;padding:12px 12px 4px;display:flex}.levels button{min-height:44px;color:var(--muted);border-bottom:3px solid #0000;padding:0 8px;font-size:16px;font-weight:600}.levels button[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--ink)}.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}.step .count{color:var(--muted);font-size:14px}.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{flex:none;place-items:center;width:12px;display:grid}.row i:before{content:"";background:color-mix(in srgb, var(--ink) 30%, var(--bg));border-radius:2px;width:8px;height:8px}.row.done i:before{background:var(--ink)}.row.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}.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}.lang{min-height:44px;color:var(--muted);flex:none;align-self:flex-start;margin:0 0 4px 12px;padding:0 8px;font-size:16px;font-weight:600}.lang[hidden]{display:none}.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}}.back{width:44px;height:44px;color:var(--muted);position:absolute;bottom:4px;left:12px}@media (width>=1000px){.app{grid-template-columns:332px 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}.lang{margin-bottom:8px}.row.open{background:var(--surface)}.go,.back{display:none}@media (hover:hover){.row: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{aspect-ratio:1;flex:0 auto;align-self:center;width:min(100%,540px,100cqh - 280px);margin-block:auto}.app>.lesson .turn{bottom:8px;right:0}.app>.lesson>.head,.app>.lesson>.pictos,.app>.lesson>.transport{align-self:center;width:min(100%,640px)}.app>.lesson .pictos{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}.app>.lesson .bubble:after{right:calc(min(100cqw,640px)/2 + min(100cqw,540px,100cqh - 280px)/-2 + 23px)}}