.tl-wrapper{--tl-paper:#f5f0e5;--tl-card:#fffdf8;--tl-ink:#233f42;--tl-muted:#61706b;--tl-line:#d6ddd1;--tl-green:#286251;--tl-deep:#183f37;--tl-violet:#6552ab;--tl-soft:#e6ede6;max-width:1240px;margin:0 auto;padding:clamp(18px,3vw,40px) 24px 64px;color:var(--tl-ink);background:var(--tl-paper)}.tl-wrapper *,.tl-wrapper ::after,.tl-wrapper ::before{box-sizing:border-box}.tl-wrapper button,.tl-wrapper input{font:inherit}.tl-wrapper button{cursor:pointer}.tl-wrapper :is(button,input,[tabindex]):focus-visible{outline:3px solid #b96e36;outline-offset:3px}.tl-wrapper .tl-hero{max-width:760px;margin:0 auto 22px;text-align:center}.tl-wrapper .tl-hero h1{margin:0;color:var(--tl-ink);font-size:clamp(2.1rem, 4.6vw, 3.7rem);letter-spacing:-.05em;line-height:1.05}.tl-wrapper .tl-hero p{margin:16px 0 0;color:var(--tl-muted);font-size:.98rem;line-height:1.65}.tl-wrapper .tl-fullscreen{position:static;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:0 0 12px auto;padding:9px 14px;border:1px solid var(--tl-line);border-radius:9px;color:var(--tl-ink);background:var(--tl-card);font-weight:800}.tl-wrapper .tl-fullscreen:hover{background:var(--tl-soft)}.tl-wrapper #tl-workshop{display:grid;grid-template-columns:310px minmax(0,1fr);gap:18px;align-items:start}.tl-wrapper #tl-settings{display:flex;flex-direction:column;gap:10px;padding:17px;border:1px solid var(--tl-line);border-radius:15px;background:var(--tl-card);box-shadow:0 4px 16px #183f370a}.tl-wrapper .tl-tabs{display:flex;flex-wrap:wrap;gap:6px}.tl-wrapper #tl-tabs{padding-bottom:10px;border-bottom:1px solid var(--tl-line)}.tl-wrapper .tl-tab{flex:1;min-width:114px;min-height:44px;padding:8px 10px;border:1px solid var(--tl-line);border-radius:9px;color:var(--tl-ink);background:#faf9f4;font-size:.78rem;font-weight:800;line-height:1.2}.tl-wrapper .tl-tab:hover{border-color:var(--tl-green);background:var(--tl-soft)}.tl-wrapper .tl-tab.active{border-color:var(--tl-violet);color:#fff;background:var(--tl-violet)}.tl-wrapper .tl-keyboard{display:grid;grid-template-columns:repeat(6,minmax(44px,1fr));gap:6px}.tl-wrapper .tl-key{width:100%;min-width:44px;min-height:44px;padding:5px;border:1px solid var(--tl-line);border-radius:8px;color:var(--tl-ink);background:#fffefa;font-family:'Comic Sans MS','Segoe UI',sans-serif;font-size:1.2rem;font-weight:800}.tl-wrapper .tl-key:hover{border-color:var(--tl-violet);background:#f0edfa}.tl-wrapper .tl-key.active{border-color:var(--tl-violet);color:#fff;background:var(--tl-violet);box-shadow:0 4px 10px #6552ab35}.tl-wrapper .tl-studio{min-width:0;padding:16px;border:1px solid var(--tl-line);border-radius:18px;background:var(--tl-card);box-shadow:0 10px 28px #183f3714}.tl-wrapper .tl-studio-top{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:8px}.tl-wrapper .tl-eyebrow{margin:0 0 5px;color:var(--tl-green);font-size:.7rem;font-weight:850;letter-spacing:.11em;text-transform:uppercase}.tl-wrapper #tl-character{margin:0;color:var(--tl-ink);font-size:clamp(1.55rem, 3vw, 2.3rem);line-height:1}.tl-wrapper #tl-progress{margin:0;padding:7px 10px;border-radius:999px;color:var(--tl-green);background:var(--tl-soft);font-size:.76rem;font-weight:800;white-space:nowrap}.tl-wrapper .tl-board-hint{margin:0 0 11px;color:var(--tl-muted);font-size:.8rem;line-height:1.4}.tl-wrapper .tl-stage-wrap{width:min(100%,650px);margin:0 auto 12px}.tl-wrapper .tl-stage{position:relative;width:100%;aspect-ratio:1.32/1;overflow:hidden;border:1px solid #c7d5e2;border-radius:13px;background-color:#fffdf9;background-image:linear-gradient(#d3e7f4 1px,transparent 1px),linear-gradient(90deg,#edf5fa 1px,transparent 1px);background-size:100% 25%,25% 100%;box-shadow:inset 0 0 28px #e7f1f599;touch-action:manipulation}.tl-wrapper .tl-stage::before{content:'';position:absolute;top:0;bottom:0;left:12%;z-index:1;width:1px;background:#f2bbc1;pointer-events:none}.tl-wrapper .tl-stage svg{position:absolute;inset:0;z-index:2;width:100%;height:100%}.tl-wrapper .tl-canvas{position:absolute;inset:0;z-index:3;display:none;width:100%;height:100%;cursor:crosshair;touch-action:none}.tl-wrapper .tl-stage.training .tl-canvas{display:block}.tl-wrapper .tl-seyes{stroke:#9ed0e8;stroke-width:.5}.tl-wrapper .tl-seyes.base{stroke:#539dd0;stroke-width:1}.tl-wrapper .tl-seyes.dash{stroke:#cebde9;stroke-width:.5;stroke-dasharray:2 2}.tl-wrapper .tl-guide{fill:none;stroke:#dfdbe9;stroke-width:4.4;stroke-linecap:round;stroke-linejoin:round}.tl-wrapper .tl-stage.training .tl-guide{stroke:#bfaee1;stroke-dasharray:2.5 3.5;stroke-width:3.2}.tl-wrapper .tl-ink{fill:none;stroke:#493787;stroke-width:4.4;stroke-linecap:round;stroke-linejoin:round}.tl-wrapper .tl-stage.training .tl-ink{display:none}.tl-wrapper .tl-arrow,.tl-wrapper .tl-depart{fill:#1c8b65}.tl-wrapper .tl-depart-halo{fill:#1c8b65;opacity:.25;transform-box:fill-box;transform-origin:center;animation:tl-pulse 1.3s ease-in-out infinite}.tl-wrapper .tl-pen{fill:#493787;display:none}.tl-wrapper .tl-stage.playing .tl-pen{display:block}.tl-wrapper .tl-stage.training :is(.tl-depart,.tl-depart-halo,.tl-arrow,.tl-pen){display:none}@keyframes tl-pulse{0%,100%{transform:scale(1);opacity:.28}50%{transform:scale(2.1);opacity:0}}.tl-wrapper .tl-conseil{min-height:1.55rem;margin:0 0 5px;color:var(--tl-violet);font-size:1rem;font-weight:800;text-align:center}.tl-wrapper .tl-live{min-height:1.25rem;margin:0 0 10px;color:var(--tl-green);font-size:.77rem;font-weight:700;text-align:center}.tl-wrapper .tl-controls,.tl-wrapper .tl-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px}.tl-wrapper .tl-controls{margin-bottom:9px}.tl-wrapper .tl-btn{min-height:44px;padding:9px 12px;border:1px solid var(--tl-green);border-radius:9px;color:#fff;background:var(--tl-green);font-size:.82rem;font-weight:800}.tl-wrapper .tl-btn:hover:not(:disabled){background:var(--tl-deep)}.tl-wrapper .tl-btn.secondary{color:var(--tl-violet);border-color:#d8d0e9;background:#f3f0fb}.tl-wrapper .tl-btn.ghost{color:var(--tl-ink);border-color:var(--tl-line);background:#faf9f4}.tl-wrapper .tl-btn:disabled{opacity:.48;cursor:default}.tl-wrapper .tl-speeds{display:inline-flex;overflow:hidden;border:1px solid #d8d0e9;border-radius:9px}.tl-wrapper .tl-speed{min-height:42px;padding:7px 10px;border:0;color:var(--tl-violet);background:#fbfaff;font-size:.78rem;font-weight:800}.tl-wrapper .tl-speed+.tl-speed{border-left:1px solid #d8d0e9}.tl-wrapper .tl-speed.active{color:#fff;background:var(--tl-violet)}.tl-wrapper .tl-bridge{margin:25px auto 0;text-align:center}.tl-wrapper .pont-outil{display:inline-block;max-width:100%;padding:11px 14px;border:1px solid #ead6a8;border-radius:10px;color:#86531d;background:#fffbeb;font-weight:750;text-decoration:none}.tl-wrapper .pont-outil:hover{text-decoration:underline}.tl-wrapper #tl-workshop.geometry-tableau,.tl-wrapper #tl-workshop:fullscreen{position:fixed;inset:0;z-index:100000;width:100vw;height:100dvh;max-width:none;margin:0;padding:10px;display:grid;grid-template-columns:280px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:10px;overflow:hidden;background:var(--tl-paper)}.tl-wrapper #tl-workshop.geometry-tableau #tl-settings,.tl-wrapper #tl-workshop:fullscreen #tl-settings{min-height:0;overflow-y:auto}.tl-wrapper #tl-workshop.geometry-tableau .tl-studio,.tl-wrapper #tl-workshop:fullscreen .tl-studio{min-height:0;height:auto;display:flex;flex-direction:column}.tl-wrapper #tl-workshop.geometry-tableau .tl-stage-wrap,.tl-wrapper #tl-workshop:fullscreen .tl-stage-wrap{flex:1;min-height:0;width:min(100%,820px);display:flex}.tl-wrapper #tl-workshop.geometry-tableau .tl-stage,.tl-wrapper #tl-workshop:fullscreen .tl-stage{width:100%;min-height:0;aspect-ratio:auto}.tl-wrapper #tl-workshop.geometry-tableau .geometry-tableau-toolbar{grid-column:1/-1}.tl-wrapper #tl-workshop.geometry-tableau .geometry-tableau-toolbar #tl-settings{padding:0;border:0;background:0 0;box-shadow:none}.tl-wrapper #tl-workshop.geometry-tableau .geometry-tableau-toolbar .tl-keyboard,.tl-wrapper #tl-workshop.geometry-tableau .geometry-tableau-toolbar .tl-tabs{display:none}.tl-wrapper #tl-workshop.geometry-tableau.geometry-controls-closed{grid-template-columns:minmax(0,1fr)}.tl-wrapper #tl-workshop.geometry-tableau.geometry-controls-closed #tl-settings{display:none}.tl-wrapper[data-theme=dark],[data-theme=dark] .tl-wrapper{--tl-paper:#11211e;--tl-card:#18312c;--tl-ink:#eef3ed;--tl-muted:#bdd0c5;--tl-line:#426057;--tl-green:#7eae91;--tl-deep:#d9ebdd;--tl-soft:#26473d;background:#11211e}[data-theme=dark] .tl-wrapper :is(#tl-settings,.tl-studio){background:var(--tl-card)!important}[data-theme=dark] .tl-wrapper :is(.tl-tab,.tl-key,.tl-btn.ghost,.tl-speed){color:var(--tl-ink)!important;background:#1d3933!important}[data-theme=dark] .tl-wrapper .tl-key.active,[data-theme=dark] .tl-wrapper .tl-speed.active,[data-theme=dark] .tl-wrapper .tl-tab.active{color:#fff!important;background:var(--tl-violet)!important}[data-theme=dark] .tl-wrapper .tl-stage{background-color:#fffdf9}@media (max-width:900px){.tl-wrapper #tl-workshop{grid-template-columns:1fr}.tl-wrapper #tl-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.tl-wrapper #tl-settings .tl-keyboard{grid-column:1/-1}.tl-wrapper #tl-workshop.geometry-tableau,.tl-wrapper #tl-workshop:fullscreen{grid-template-columns:220px minmax(0,1fr)}.tl-wrapper #tl-workshop.geometry-tableau #tl-settings,.tl-wrapper #tl-workshop:fullscreen #tl-settings{display:flex}}@media (max-width:620px){.tl-wrapper{padding:17px 10px 38px}.tl-wrapper .tl-hero h1{font-size:2.15rem}.tl-wrapper .tl-hero p{font-size:.9rem}.tl-wrapper .tl-fullscreen{width:100%;margin-right:0}.tl-wrapper #tl-settings{display:flex;padding:13px}.tl-wrapper .tl-keyboard{grid-template-columns:repeat(6,minmax(44px,1fr));gap:4px}.tl-wrapper .tl-key{font-size:1.05rem}.tl-wrapper .tl-studio{padding:12px}.tl-wrapper .tl-stage{aspect-ratio:1.1/1}.tl-wrapper .tl-studio-top{align-items:start}.tl-wrapper #tl-progress{font-size:.68rem}.tl-wrapper .tl-controls{gap:6px}.tl-wrapper .tl-btn{flex:1 1 calc(50% - 6px)}.tl-wrapper .tl-speeds{flex:1 1 100%;justify-content:center}.tl-wrapper .tl-speed{flex:1}.tl-wrapper #tl-workshop.geometry-tableau,.tl-wrapper #tl-workshop:fullscreen{grid-template-columns:minmax(132px,40%) minmax(0,1fr);padding:6px;gap:6px}.tl-wrapper #tl-workshop.geometry-tableau #tl-settings,.tl-wrapper #tl-workshop:fullscreen #tl-settings{display:flex;padding:8px}.tl-wrapper #tl-workshop.geometry-tableau #tl-settings .tl-keyboard,.tl-wrapper #tl-workshop.geometry-tableau #tl-settings .tl-tabs{display:none}.tl-wrapper #tl-workshop.geometry-tableau .tl-studio{padding:9px}.tl-wrapper #tl-workshop.geometry-tableau .tl-studio-top{margin-bottom:4px}.tl-wrapper #tl-workshop.geometry-tableau .tl-board-hint,.tl-wrapper #tl-workshop.geometry-tableau .tl-eyebrow{display:none}.tl-wrapper #tl-workshop.geometry-tableau .tl-controls{gap:4px}.tl-wrapper #tl-workshop.geometry-tableau .tl-btn{min-height:38px;padding:6px;font-size:.7rem}.tl-wrapper #tl-workshop.geometry-tableau .tl-nav{gap:4px}.tl-wrapper #tl-workshop.geometry-tableau.geometry-controls-closed{grid-template-columns:minmax(0,1fr)}.tl-wrapper #tl-workshop.geometry-tableau.geometry-controls-closed #tl-settings{display:none}}@media (prefers-reduced-motion:reduce){.tl-wrapper *{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important}}.tl-wrapper .tl-keyboard{grid-template-columns:repeat(auto-fit,minmax(44px,1fr))}.tl-wrapper .tl-stage{background-image:none}.tl-wrapper .tl-speed{min-height:44px}.tl-wrapper .tl-privacy-note{margin:10px 0 0;color:var(--tl-muted);font-size:.76rem;line-height:1.45}[data-theme=dark] .tl-wrapper .tl-conseil{color:#c6b6fc}@media (max-width:620px){.tl-wrapper .tl-keyboard{grid-template-columns:repeat(auto-fit,minmax(44px,1fr))}.tl-wrapper .tl-studio{order:-1}.tl-wrapper #tl-settings{order:0}.tl-wrapper #tl-workshop.geometry-tableau .tl-studio,.tl-wrapper #tl-workshop:fullscreen .tl-studio{order:0}.tl-wrapper #tl-workshop.geometry-tableau #tl-settings,.tl-wrapper #tl-workshop:fullscreen #tl-settings{order:0;overflow-y:auto}.tl-wrapper #tl-workshop.geometry-tableau #tl-settings .tl-keyboard,.tl-wrapper #tl-workshop.geometry-tableau #tl-settings .tl-tabs{display:flex}.tl-wrapper #tl-workshop.geometry-tableau #tl-settings .tl-keyboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(44px,1fr))}.tl-wrapper #tl-workshop.geometry-tableau .tl-btn{min-height:44px}}.tl-wrapper .tl-depart-halo{animation:none}.tl-wrapper .tl-stage.playing .tl-depart-halo{animation:tl-pulse 1.3s ease-in-out infinite}.tl-wrapper #tl-workshop.geometry-tableau .geometry-tableau-toolbar{display:grid;grid-template-columns:1fr 1fr}.tl-wrapper #tl-workshop.geometry-tableau .geometry-tableau-toolbar>button{margin:0;min-height:44px;padding:7px;font-size:.8rem}.tl-wrapper #tl-workshop.geometry-tableau .tl-studio{grid-row:2;overflow-y:auto}.tl-wrapper #tl-workshop.geometry-tableau .tl-stage-wrap{min-height:180px}.tl-wrapper #tl-workshop.geometry-tableau .tl-studio>:not(.tl-stage-wrap){flex-shrink:0}[data-theme=dark] .tl-wrapper .tl-btn:not(.secondary):not(.ghost):not(:disabled){color:#11211e;background:#a5cfb4;border-color:#a5cfb4}@media (max-width:620px){.tl-wrapper #tl-settings{align-items:stretch}.tl-wrapper .tl-studio-top{flex-direction:column;gap:8px}.tl-wrapper #tl-character{white-space:nowrap}.tl-wrapper #tl-progress{max-width:100%;white-space:normal}}[data-theme=dark] .tl-wrapper #tl-progress{color:#c4e2ce}.tl-wrapper #tl-workshop.geometry-tableau{align-items:stretch}.tl-wrapper .tl-live:empty{display:none}@media (min-width:1100px){.tl-wrapper{position:relative}.tl-wrapper .tl-fullscreen{position:absolute;right:24px;top:38px}.tl-wrapper .tl-hero{max-width:800px;margin-left:0;text-align:left}}@media (max-width:620px){.tl-wrapper #tl-workshop.geometry-tableau:not(.geometry-controls-closed){grid-template-columns:1fr}.tl-wrapper #tl-workshop.geometry-tableau:not(.geometry-controls-closed) #tl-settings{position:absolute;z-index:30;top:58px;bottom:6px;left:6px;width:min(280px,calc(100% - 12px));box-shadow:6px 0 20px #0008}}