{"StartWeb1280Neu":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<script src=\"./support.js\"></script>\n</head>\n<body>\n<x-dc>\n<helmet><script src=\"/entwurf/ds-base.js\"></script><style>body{margin:0}</style><style>@keyframes hz0{0%,100%{opacity:1}}@keyframes hn0{0%{opacity:0;transform:translateY(6px)}0.682%,1.818%{opacity:1;transform:none}2.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz1{0%,2.500%{opacity:0}3.182%,100%{opacity:1}}@keyframes hn1{0%,2.500%{opacity:0;transform:translateY(6px)}3.182%,4.318%{opacity:1;transform:none}5.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz2{0%,5.000%{opacity:0}5.682%,100%{opacity:1}}@keyframes hn2{0%,5.000%{opacity:0;transform:translateY(6px)}5.682%,6.818%{opacity:1;transform:none}7.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz3{0%,7.500%{opacity:0}8.182%,100%{opacity:1}}@keyframes hn3{0%,7.500%{opacity:0;transform:translateY(6px)}8.182%,9.318%{opacity:1;transform:none}10.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz4{0%,10.000%{opacity:0}10.682%,100%{opacity:1}}@keyframes hn4{0%,10.000%{opacity:0;transform:translateY(6px)}10.682%,11.818%{opacity:1;transform:none}12.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz5{0%,12.500%{opacity:0}13.182%,100%{opacity:1}}@keyframes hn5{0%,12.500%{opacity:0;transform:translateY(6px)}13.182%,14.318%{opacity:1;transform:none}15.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz6{0%,15.000%{opacity:0}15.682%,100%{opacity:1}}@keyframes hn6{0%,15.000%{opacity:0;transform:translateY(6px)}15.682%,16.818%{opacity:1;transform:none}17.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz7{0%,17.500%{opacity:0}18.182%,100%{opacity:1}}@keyframes hn7{0%,17.500%{opacity:0;transform:translateY(6px)}18.182%,19.318%{opacity:1;transform:none}20.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz8{0%,20.000%{opacity:0}20.682%,100%{opacity:1}}@keyframes hn8{0%,20.000%{opacity:0;transform:translateY(6px)}20.682%,21.818%{opacity:1;transform:none}22.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz9{0%,22.500%{opacity:0}23.182%,100%{opacity:1}}@keyframes hn9{0%,22.500%{opacity:0;transform:translateY(6px)}23.182%,24.318%{opacity:1;transform:none}25.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz10{0%,25.000%{opacity:0}25.682%,100%{opacity:1}}@keyframes hn10{0%,25.000%{opacity:0;transform:translateY(6px)}25.682%,26.818%{opacity:1;transform:none}27.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz11{0%,27.500%{opacity:0}28.182%,100%{opacity:1}}@keyframes hn11{0%,27.500%{opacity:0;transform:translateY(6px)}28.182%,29.318%{opacity:1;transform:none}30.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz12{0%,30.000%{opacity:0}30.682%,100%{opacity:1}}@keyframes hn12{0%,30.000%{opacity:0;transform:translateY(6px)}30.682%,31.818%{opacity:1;transform:none}32.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz13{0%,32.500%{opacity:0}33.182%,100%{opacity:1}}@keyframes hn13{0%,32.500%{opacity:0;transform:translateY(6px)}33.182%,34.318%{opacity:1;transform:none}35.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz14{0%,35.000%{opacity:0}35.682%,100%{opacity:1}}@keyframes hn14{0%,35.000%{opacity:0;transform:translateY(6px)}35.682%,36.818%{opacity:1;transform:none}37.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz15{0%,37.500%{opacity:0}38.182%,100%{opacity:1}}@keyframes hn15{0%,37.500%{opacity:0;transform:translateY(6px)}38.182%,39.318%{opacity:1;transform:none}40.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz16{0%,40.000%{opacity:0}40.682%,100%{opacity:1}}@keyframes hn16{0%,40.000%{opacity:0;transform:translateY(6px)}40.682%,41.818%{opacity:1;transform:none}42.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz17{0%,42.500%{opacity:0}43.182%,100%{opacity:1}}@keyframes hn17{0%,42.500%{opacity:0;transform:translateY(6px)}43.182%,44.318%{opacity:1;transform:none}45.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz18{0%,45.000%{opacity:0}45.682%,100%{opacity:1}}@keyframes hn18{0%,45.000%{opacity:0;transform:translateY(6px)}45.682%,46.818%{opacity:1;transform:none}47.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz19{0%,47.500%{opacity:0}48.182%,100%{opacity:1}}@keyframes hn19{0%,47.500%{opacity:0;transform:translateY(6px)}48.182%,49.318%{opacity:1;transform:none}50.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz20{0%,50.000%{opacity:0}50.682%,100%{opacity:1}}@keyframes hn20{0%,50.000%{opacity:0;transform:translateY(6px)}50.682%,51.818%{opacity:1;transform:none}52.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz21{0%,52.500%{opacity:0}53.182%,100%{opacity:1}}@keyframes hn21{0%,52.500%{opacity:0;transform:translateY(6px)}53.182%,54.318%{opacity:1;transform:none}55.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz22{0%,55.000%{opacity:0}55.682%,100%{opacity:1}}@keyframes hn22{0%,55.000%{opacity:0;transform:translateY(6px)}55.682%,56.818%{opacity:1;transform:none}57.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz23{0%,57.500%{opacity:0}58.182%,100%{opacity:1}}@keyframes hn23{0%,57.500%{opacity:0;transform:translateY(6px)}58.182%,59.318%{opacity:1;transform:none}60.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz24{0%,60.000%{opacity:0}60.682%,100%{opacity:1}}@keyframes hn24{0%,60.000%{opacity:0;transform:translateY(6px)}60.682%,61.818%{opacity:1;transform:none}62.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz25{0%,62.500%{opacity:0}63.182%,100%{opacity:1}}@keyframes hn25{0%,62.500%{opacity:0;transform:translateY(6px)}63.182%,64.318%{opacity:1;transform:none}65.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz26{0%,65.000%{opacity:0}65.682%,100%{opacity:1}}@keyframes hn26{0%,65.000%{opacity:0;transform:translateY(6px)}65.682%,66.818%{opacity:1;transform:none}67.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz27{0%,67.500%{opacity:0}68.182%,100%{opacity:1}}@keyframes hn27{0%,67.500%{opacity:0;transform:translateY(6px)}68.182%,69.318%{opacity:1;transform:none}70.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz28{0%,70.000%{opacity:0}70.682%,100%{opacity:1}}@keyframes hn28{0%,70.000%{opacity:0;transform:translateY(6px)}70.682%,71.818%{opacity:1;transform:none}72.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz29{0%,72.500%{opacity:0}73.182%,100%{opacity:1}}@keyframes hn29{0%,72.500%{opacity:0;transform:translateY(6px)}73.182%,74.318%{opacity:1;transform:none}75.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz30{0%,75.000%{opacity:0}75.682%,100%{opacity:1}}@keyframes hn30{0%,75.000%{opacity:0;transform:translateY(6px)}75.682%,76.818%{opacity:1;transform:none}77.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz31{0%,77.500%{opacity:0}78.182%,100%{opacity:1}}@keyframes hn31{0%,77.500%{opacity:0;transform:translateY(6px)}78.182%,79.318%{opacity:1;transform:none}80.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz32{0%,80.000%{opacity:0}80.682%,100%{opacity:1}}@keyframes hn32{0%,80.000%{opacity:0;transform:translateY(6px)}80.682%,81.818%{opacity:1;transform:none}82.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz33{0%,82.500%{opacity:0}83.182%,100%{opacity:1}}@keyframes hn33{0%,82.500%{opacity:0;transform:translateY(6px)}83.182%,84.318%{opacity:1;transform:none}85.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz34{0%,85.000%{opacity:0}85.682%,100%{opacity:1}}@keyframes hn34{0%,85.000%{opacity:0;transform:translateY(6px)}85.682%,86.818%{opacity:1;transform:none}87.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz35{0%,87.500%{opacity:0}88.182%,100%{opacity:1}}@keyframes hn35{0%,87.500%{opacity:0;transform:translateY(6px)}88.182%,89.318%{opacity:1;transform:none}90.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz36{0%,90.000%{opacity:0}90.682%,100%{opacity:1}}@keyframes hn36{0%,90.000%{opacity:0;transform:translateY(6px)}90.682%,91.818%{opacity:1;transform:none}92.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz37{0%,92.500%{opacity:0}93.182%,100%{opacity:1}}@keyframes hn37{0%,92.500%{opacity:0;transform:translateY(6px)}93.182%,94.318%{opacity:1;transform:none}95.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hnEnde{0%,95.000%{opacity:0;transform:translateY(6px)}95.682%,99.318%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}@keyframes heftFuellen{0%{visibility:hidden}6%,60%{visibility:visible}66%,100%{visibility:hidden}}</style></helmet>\n<div data-theme=\"{{ theme }}\" data-stil=\"bayati\" data-welt=\"violett\" lang=\"de\" style=\"position:relative;width:1280px;background:{{ hintergrund }};color:var(--textPrimary);font-family:var(--font-sans)\">\n<sc-if value=\"{{ eigenerHintergrund }}\" hint-placeholder-val=\"{{ true }}\"><div style=\"position:absolute;inset:0;overflow:hidden\"><div class=\"bayati-kopf\" style=\"position:absolute;left:0;top:0;right:0;height:900px\"></div><div class=\"bayati-muster\"></div></div></sc-if>\n<div style=\"position:relative\">\n<header style=\"position:sticky;top:0;z-index:5;height:72px;box-sizing:border-box;margin:0 {{ kopfRand }};padding:0 {{ kopfInnen }};display:flex;align-items:center;gap:40px;background:var(--background);border-bottom:1px solid var(--divider)\"><a href=\"#\" class=\"t-titel\" style=\"text-decoration:none;color:var(--textPrimary);letter-spacing:-0.01em\">Bayati</a><nav style=\"display:flex;gap:28px\"><a href=\"#themen\" class=\"t-klein-betont\" style=\"height:48px;display:flex;align-items:center;text-decoration:none;color:var(--textPrimary)\">Topics</a><a href=\"#\" class=\"t-klein-betont\" style=\"height:48px;display:flex;align-items:center;text-decoration:none;color:var(--textPrimary)\">Formulas</a><a href=\"#eltern\" class=\"t-klein-betont\" style=\"height:48px;display:flex;align-items:center;text-decoration:none;color:var(--textPrimary)\">For parents</a></nav><div style=\"flex:1\"></div><div role=\"radiogroup\" aria-label=\"Sprache / Language\" style=\"display:flex;gap:2px\"><span role=\"radio\" aria-checked=\"true\" aria-label=\"Deutsch\" class=\"t-klein-betont bayati-akzent\" style=\"height:32px;min-width:38px;box-sizing:border-box;padding:0 8px;display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--textPrimary)\">DE</span><span role=\"radio\" aria-checked=\"false\" aria-label=\"English\" class=\"t-klein-betont\" style=\"height:32px;min-width:38px;box-sizing:border-box;padding:0 8px;display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--textSecondary)\">EN</span></div><div role=\"radiogroup\" aria-label=\"Light / Dark\" style=\"display:flex;gap:2px\"><sc-if value=\"{{ hell }}\" hint-placeholder-val=\"{{ true }}\"><span role=\"radio\" aria-checked=\"true\" aria-label=\"Light\" class=\"bayati-akzent\" style=\"width:36px;height:32px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;color:var(--textPrimary)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"4\"></circle><path d=\"M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4\"></path></svg></span><span role=\"radio\" aria-checked=\"false\" aria-label=\"Dark\" style=\"width:36px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--textSecondary)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\"></path></svg></span></sc-if><sc-if value=\"{{ dunkel }}\" hint-placeholder-val=\"{{ false }}\"><span role=\"radio\" aria-checked=\"false\" aria-label=\"Light\" style=\"width:36px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--textSecondary)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"4\"></circle><path d=\"M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4\"></path></svg></span><span role=\"radio\" aria-checked=\"true\" aria-label=\"Dark\" class=\"bayati-akzent\" style=\"width:36px;height:32px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;color:var(--textPrimary)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\"></path></svg></span></sc-if></div><a href=\"#\" class=\"t-klein-betont\" style=\"height:48px;display:flex;align-items:center;font-weight:600;text-decoration:none;color:var(--accentText)\">Log in</a><a href=\"#\" class=\"t-knopf bayati-akzent\" style=\"height:44px;box-sizing:border-box;padding:0 20px;display:inline-flex;align-items:center;white-space:nowrap;text-decoration:none;color:var(--textPrimary);font-weight:600\">Start for free</a></header>\n\n<div style=\"box-sizing:border-box;width:1120px;margin:0 auto;display:flex;flex-direction:column\">\n\n<section data-screen-label=\"Einstieg\" style=\"padding-top:104px;display:flex;flex-direction:column;gap:56px\"><h1 class=\"t-anzeige\" style=\"margin:0;font-size:120px;line-height:0.92;letter-spacing:-0.035em;text-wrap:balance\">Maths that<br>sticks.</h1><div style=\"display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:96px;align-items:start\"><div style=\"height:734px;box-sizing:border-box;padding:12px 0 24px;display:flex;flex-direction:column;justify-content:space-between;gap:48px;min-width:0\">\n<dc-import name=\"Tafel\" theme=\"{{ theme }}\" tempo=\"{{ tempo }}\" hint-size=\"100%,420px\"></dc-import>\n<div style=\"display:flex;flex-direction:column;gap:40px\"><p class=\"t-fliesstext\" style=\"margin:0;max-width:520px;font-size:22px;line-height:34px;color:var(--textSecondary);text-wrap:pretty\">Short lessons, questions that reshuffle every time, and a learning path that shows you what you need first. Grades 7 to 10.</p><div style=\"display:flex;align-items:center;gap:24px\"><a href=\"#\" class=\"t-knopf bayati-akzent\" style=\"height:60px;box-sizing:border-box;padding:0 40px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;text-decoration:none;font-size:18px;font-weight:600;color:var(--textPrimary)\">Start for free</a><span class=\"t-klein\" style=\"color:var(--textSecondary);max-width:200px;text-wrap:pretty\">No sign-up. Create an account later if you like.</span></div></div></div><div style=\"width:348px;height:734px;flex:none;box-sizing:border-box;padding:8px;border-radius:46px;background:#000;border:1px solid light-dark(#000,var(--glassBorder))\"><div style=\"width:332px;height:718px;overflow:hidden;border-radius:38px\"><div style=\"width:390px;height:844px;overflow:hidden;zoom:0.851\"><dc-import name=\"LernenStart\" theme=\"{{ theme }}\" stil=\"bayati\" welt=\"violett\" hint-size=\"390px,844px\"></dc-import></div></div></div></div></section>\n\n<section data-screen-label=\"Was ist Bayati\" style=\"position:relative;margin:160px {{ wasRand }} 0;padding:48px {{ wasInnen }} 64px;box-sizing:border-box;width:{{ wasBreite }}\"><div style=\"position:relative;display:flex;flex-direction:column\"><h2 class=\"t-anzeige\" style=\"margin:0 0 48px;font-size:60px;line-height:1;letter-spacing:-0.03em\">What is Bayati?</h2><div style=\"position:relative;display:grid;grid-template-columns:{{ wasSpalten }};grid-auto-rows:{{ wasZeilen }};column-gap:120px\"><sc-if value=\"{{ vollbreit }}\" hint-placeholder-val=\"{{ false }}\"><div aria-hidden=\"true\" style=\"position:absolute;left:50%;top:48px;bottom:48px;width:1px;background:var(--divider)\"></div><div aria-hidden=\"true\" style=\"position:absolute;top:50%;left:0;right:0;height:1px;background:var(--divider)\"></div></sc-if><div style=\"display:grid;grid-template-columns:{{ zeileSpalten }};gap:{{ zeileGap }};align-items:start;padding:48px 0;min-width:0\"><h2 class=\"t-anzeige\" style=\"margin:0;font-size:28px;line-height:32px;letter-spacing:-0.02em;text-wrap:balance\">Who is Bayati for?</h2><div style=\"display:flex;flex-direction:column;gap:32px\"><p class=\"t-fliesstext\" style=\"margin:0;max-width:592px;font-size:19px;line-height:32px;color:var(--textSecondary);text-wrap:pretty\">For all of <strong style=\"font-weight:600;color:var(--textPrimary)\">secondary school</strong>. <strong style=\"font-weight:600;color:var(--textPrimary)\">38 chapters</strong> with <strong style=\"font-weight:600;color:var(--textPrimary)\">353 topics</strong>, in order from rational numbers to vectors, each building on the one before. Plus around <strong style=\"font-weight:600;color:var(--textPrimary)\">14,000 question templates</strong>. Each one rolls new numbers whenever you practise, which makes <strong style=\"font-weight:600;color:var(--textPrimary)\">billions of unique questions</strong>.</p><div style=\"display:flex;flex-direction:column;gap:16px\"><div style=\"position:relative;height:48px\"><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn0 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Rational numbers</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 7 · chapter 1 of 8</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn1 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Terms and variables</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 7 · chapter 2 of 8</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn2 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Equations</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 7 · chapter 3 of 8</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn3 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Relations and proportionality</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 7 · chapter 4 of 8</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn4 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Percentages and interest</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 7 · chapter 5 of 8</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn5 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Angles and symmetry</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 7 · chapter 6 of 8</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn6 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Congruence and triangles</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 7 · chapter 7 of 8</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn7 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Data and chance</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 7 · chapter 8 of 8</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn8 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Terms and binomial formulas</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 8 · chapter 1 of 11</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn9 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Equations in depth</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 8 · chapter 2 of 11</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn10 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Linear functions</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 8 · chapter 3 of 11</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn11 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Systems of linear equations</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 8 · chapter 4 of 11</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn12 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Powers</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 8 · chapter 5 of 11</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn13 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Wurzeln</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 8 · chapter 6 of 11</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn14 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Areas, circles and solids</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 8 · chapter 7 of 11</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn15 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Pythagorean theorem</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 8 · chapter 8 of 11</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn16 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Similarity and dilation</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 8 · chapter 9 of 11</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn17 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Probability in depth</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 8 · chapter 10 of 11</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn18 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Percentages and interest in depth</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 8 · chapter 11 of 11</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn19 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Real numbers</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 9 · chapter 1 of 10</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn20 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Powers and roots in depth</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 9 · chapter 2 of 10</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn21 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Quadratic functions</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 9 · chapter 3 of 10</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn22 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Quadratic equations</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 9 · chapter 4 of 10</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn23 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Power and root functions</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 9 · chapter 5 of 10</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn24 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Trigonometry</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 9 · chapter 6 of 10</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn25 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Similarity in depth</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 9 · chapter 7 of 10</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn26 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Solid geometry in depth</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 9 · chapter 8 of 10</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn27 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Exponentielles Wachstum</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 9 · chapter 9 of 10</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn28 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Probability and combinatorics</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 9 · chapter 10 of 10</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn29 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Exponential functions and logarithms</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 10 · chapter 1 of 9</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn30 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Polynomial functions</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 10 · chapter 2 of 9</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn31 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Trigonometric functions</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 10 · chapter 3 of 9</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn32 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Circle geometry</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 10 · chapter 4 of 9</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn33 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Differentialrechnung</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 10 · chapter 5 of 9</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn34 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Curve analysis</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 10 · chapter 6 of 9</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn35 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Wachstumsmodelle</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 10 · chapter 7 of 9</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn36 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Probability and statistics in depth</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 10 · chapter 8 of 9</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn37 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Vectors</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 10 · chapter 9 of 9</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hnEnde 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary)\">38 chapters, 353 topics</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Grades 7 to 10</span></div></div><div style=\"display:flex;flex-direction:column\"><div style=\"display:flex\"><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz0 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz1 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz2 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz3 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz4 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz5 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz6 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz7 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz8 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz9 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz10 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz11 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz12 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz13 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz14 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz15 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz16 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz17 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz18 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz19 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz20 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz21 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz22 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz23 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz24 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz25 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz26 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz27 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz28 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz29 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz30 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz31 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz32 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz33 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz34 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz35 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz36 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz37 44s linear infinite\"></div></div></div><div style=\"display:flex\"><span style=\"width:128px;flex:none;font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 7</span><span style=\"width:176px;flex:none;font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 8</span><span style=\"width:160px;flex:none;font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 9</span><span style=\"width:144px;flex:none;font-size:12px;line-height:16px;color:var(--textTertiary)\">Grade 10</span></div></div></div></div></div><div style=\"display:grid;grid-template-columns:{{ zeileSpalten }};gap:{{ zeileGap }};align-items:start;padding:48px 0;min-width:0\"><h2 class=\"t-anzeige\" style=\"margin:0;font-size:28px;line-height:32px;letter-spacing:-0.02em;text-wrap:balance\">What if I can’t remember something?</h2><div style=\"display:flex;flex-direction:column;gap:32px\"><p class=\"t-fliesstext\" style=\"margin:0;max-width:592px;font-size:19px;line-height:32px;color:var(--textSecondary);text-wrap:pretty\">The <strong style=\"font-weight:600;color:var(--textPrimary)\">Learning path</strong> shows you <strong style=\"font-weight:600;color:var(--textPrimary)\">what you need first</strong>. If something is missing, it takes you there first and then <strong style=\"font-weight:600;color:var(--textPrimary)\">back to your topic</strong>.</p><div style=\"height:392px\"><dc-import name=\"Lernweg\" theme=\"{{ theme }}\" hint-size=\"100%,392px\"></dc-import></div></div></div><div style=\"display:grid;grid-template-columns:{{ zeileSpalten }};gap:{{ zeileGap }};align-items:start;padding:48px 0;min-width:0\"><h2 class=\"t-anzeige\" style=\"margin:0;font-size:28px;line-height:32px;letter-spacing:-0.02em;text-wrap:balance\">Where does Bayati run?</h2><div style=\"display:flex;flex-direction:column;gap:32px\"><p class=\"t-fliesstext\" style=\"margin:0;max-width:592px;font-size:19px;line-height:32px;color:var(--textSecondary);text-wrap:pretty\">On your <strong style=\"font-weight:600;color:var(--textPrimary)\">phone</strong>, your <strong style=\"font-weight:600;color:var(--textPrimary)\">tablet</strong> and in the <strong style=\"font-weight:600;color:var(--textPrimary)\">browser</strong>. With an account you <strong style=\"font-weight:600;color:var(--textPrimary)\">pick up where you left off on any device</strong>.</p><div style=\"height:104px\"><dc-import name=\"Geraete\" theme=\"{{ theme }}\" hint-size=\"100%,104px\"></dc-import></div></div></div><div style=\"display:grid;grid-template-columns:{{ zeileSpalten }};gap:{{ zeileGap }};align-items:start;padding:48px 0;min-width:0\"><h2 class=\"t-anzeige\" style=\"margin:0;font-size:28px;line-height:32px;letter-spacing:-0.02em;text-wrap:balance\">What does Bayati cost?</h2><div style=\"display:flex;flex-direction:column;gap:32px\"><p class=\"t-fliesstext\" style=\"margin:0;max-width:592px;font-size:19px;line-height:32px;color:var(--textSecondary);text-wrap:pretty\">As a guest it’s <strong style=\"font-weight:600;color:var(--textPrimary)\">free</strong>, with limits. With an account it’s free as well, with fewer limits. <strong style=\"font-weight:600;color:var(--textPrimary)\">Premium</strong> costs <strong style=\"font-weight:600;color:var(--textPrimary)\">€44.99 a year</strong>, that’s <strong style=\"font-weight:600;color:var(--textPrimary)\">€3.75 a month</strong>.</p><div style=\"height:176px\"><dc-import name=\"Preise\" theme=\"{{ theme }}\" hint-size=\"100%,176px\"></dc-import></div></div></div></div></section>\n\n<section data-screen-label=\"Probieren\" style=\"margin:200px {{ probRand }} 0;display:flex;flex-direction:column;gap:72px\"><div style=\"display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:96px;align-items:end\"><div style=\"display:flex;flex-direction:column;gap:20px\"><span class=\"t-beschriftung\" style=\"color:var(--accentText)\">A real question</span><h2 class=\"t-anzeige\" style=\"margin:0;font-size:60px;line-height:1;letter-spacing:-0.03em;text-wrap:balance\">Try it now.</h2></div><p class=\"t-fliesstext\" style=\"margin:0 0 6px;font-size:19px;line-height:30px;color:var(--textSecondary);text-wrap:pretty\">This is how Bayati feels. Tap an answer, check, take a look. No account needed.</p></div><dc-import name=\"ProbierAufgabe\" theme=\"{{ theme }}\" nebeneinander=\"{{ true }}\" liste=\"{{ vollbreit }}\" hint-size=\"100%,720px\"></dc-import></section>\n\n<section ref=\"{{ bereichRef }}\" data-screen-label=\"Bereiche\" style=\"margin:200px {{ brRand }} 0;padding:0 {{ brPadX }};box-sizing:border-box;display:grid;grid-template-columns:{{ brSpalte }} minmax(0,1fr);gap:{{ brGap }};align-items:center;overflow:hidden\"><div style=\"position:relative;width:{{ brSpalte }};height:674px\"><div aria-hidden=\"true\" style=\"position:absolute;left:0;top:0;z-index:1;width:606px;height:426px;box-sizing:border-box;padding:8px;border-radius:28px;background:#000;border:1px solid light-dark(#000,var(--glassBorder));pointer-events:none;transform-origin:0 0;opacity:{{ brTabOp }};transform:{{ brTabT }}\"><div style=\"width:590px;height:410px;overflow:hidden;border-radius:20px\"><div style=\"width:1180px;height:820px;overflow:hidden;transform:scale(0.5);transform-origin:0 0\"><sc-if value=\"{{ ba_0 }}\" hint-placeholder-val=\"{{ true }}\"><dc-import name=\"TabletTheorieQuer\" theme=\"{{ theme }}\" hint-size=\"1180px,820px\"></dc-import></sc-if><sc-if value=\"{{ ba_1 }}\" hint-placeholder-val=\"{{ false }}\"><dc-import name=\"TTestErgebnisQuer\" theme=\"{{ theme }}\" hint-size=\"1180px,820px\"></dc-import></sc-if><sc-if value=\"{{ ba_2 }}\" hint-placeholder-val=\"{{ false }}\"><dc-import name=\"TDuellFrageQuer\" theme=\"{{ theme }}\" hint-size=\"1180px,820px\"></dc-import></sc-if></div></div></div><div style=\"position:absolute;right:0;top:0;z-index:2;transform:scale({{ brHandyS }});transform-origin:100% 100%;width:320px;height:674px;flex:none;box-sizing:border-box;padding:8px;border-radius:45px;background:#000;border:1px solid light-dark(#000,var(--glassBorder))\"><div style=\"width:304px;height:658px;overflow:hidden;border-radius:37px\"><div style=\"width:390px;height:844px;overflow:hidden;transform:scale(0.78);transform-origin:0 0\"><sc-if value=\"{{ ba_0 }}\" hint-placeholder-val=\"{{ true }}\"><dc-import name=\"TheorieSchritt\" theme=\"{{ theme }}\" stil=\"bayati\" welt=\"violett\" hint-size=\"390px,844px\"></dc-import></sc-if><sc-if value=\"{{ ba_1 }}\" hint-placeholder-val=\"{{ false }}\"><dc-import name=\"TestErgebnis\" theme=\"{{ theme }}\" hint-size=\"390px,844px\"></dc-import></sc-if><sc-if value=\"{{ ba_2 }}\" hint-placeholder-val=\"{{ false }}\"><dc-import name=\"DuellFrage\" theme=\"{{ theme }}\" hint-size=\"390px,844px\"></dc-import></sc-if></div></div></div></div><div style=\"justify-self:end;width:100%;max-width:680px;display:flex;flex-direction:column;gap:40px;min-width:0\"><div style=\"display:flex;flex-direction:column;gap:20px\"><span class=\"t-beschriftung\" style=\"color:var(--accentText)\">Three areas</span><h2 class=\"t-anzeige\" style=\"margin:0;font-size:60px;line-height:1;letter-spacing:-0.03em;text-wrap:balance\">Understand, practise, compete.</h2></div><div role=\"tablist\" aria-label=\"Areas\" style=\"display:flex;flex-direction:column\"><sc-for list=\"{{ bereiche }}\" as=\"b\" hint-placeholder-count=\"3\"><sc-if value=\"{{ b.an }}\" hint-placeholder-val=\"{{ true }}\"><div role=\"tab\" aria-selected=\"true\" class=\"bayati-akzent\" style=\"box-sizing:border-box;padding:24px 28px;display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:baseline\"><span class=\"t-anzeige\" style=\"font-size:36px;line-height:40px;color:var(--accentText)\">{{ b.nr }}</span><span style=\"display:flex;flex-direction:column;gap:6px\"><span class=\"t-titel\" style=\"font-size:26px;line-height:32px\">{{ b.titel }}</span><span class=\"t-fliesstext\" style=\"font-size:17px;line-height:26px;color:var(--textSecondary);text-wrap:pretty\">{{ b.text }}</span></span></div></sc-if><sc-if value=\"{{ b.aus }}\" hint-placeholder-val=\"{{ false }}\"><div role=\"tab\" aria-selected=\"false\" onClick=\"{{ b.klick }}\" style=\"box-sizing:border-box;padding:24px 28px;display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:baseline;cursor:pointer;border-bottom:1px solid var(--divider)\"><span class=\"t-anzeige\" style=\"font-size:36px;line-height:40px;color:var(--textTertiary)\">{{ b.nr }}</span><span style=\"display:flex;flex-direction:column;gap:6px\"><span class=\"t-titel\" style=\"font-size:26px;line-height:32px\">{{ b.titel }}</span><span class=\"t-fliesstext\" style=\"font-size:17px;line-height:26px;color:var(--textSecondary);text-wrap:pretty\">{{ b.text }}</span></span></div></sc-if></sc-for></div></div></section>\n\n<section data-screen-label=\"Lernweg\" style=\"margin-top:200px;display:flex;flex-direction:column;gap:72px\"><div style=\"display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:96px;align-items:end\"><div style=\"display:flex;flex-direction:column;gap:20px\"><span class=\"t-beschriftung\" style=\"color:var(--accentText)\">Learning path</span><h2 class=\"t-anzeige\" style=\"margin:0;font-size:60px;line-height:1;letter-spacing:-0.03em;text-wrap:balance\">Want to master quadratic equations? Bayati shows you the way.</h2></div><p class=\"t-fliesstext\" style=\"margin:0 0 6px;font-size:19px;line-height:30px;color:var(--textSecondary);text-wrap:pretty\">Bayati knows which topics come before every topic. You only learn what you’re really missing and always see where you are.</p></div><div role=\"list\" aria-label=\"Learning path\" style=\"margin:0 {{ lwRand }};display:grid;grid-template-columns:{{ lwSpalten }};column-gap:16px;align-items:start\"><div aria-hidden=\"true\" style=\"height:72px;display:flex;align-items:center\"><span style=\"flex:1;height:5px;background:linear-gradient(90deg,transparent,var(--accent))\"></span></div><sc-if value=\"{{ vollbreit }}\" hint-placeholder-val=\"{{ false }}\"><div role=\"listitem\" style=\"display:flex;flex-direction:column;gap:20px\"><div style=\"display:flex;align-items:center\"><span style=\"flex:1;height:5px;background:var(--accent)\"></span><span style=\"width:72px;height:72px;flex:none;box-sizing:border-box;border-radius:var(--radius-full);border:2px solid var(--success);color:var(--success);display:flex;align-items:center;justify-content:center\"><svg width=\"34\" height=\"34\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span><span style=\"flex:1;height:5px;background:var(--accent)\"></span></div><div style=\"display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;padding:0 12px\"><span style=\"font-size:22px;line-height:30px;font-weight:600;text-wrap:balance;color:var(--textSecondary)\">Terms and variables</span><span class=\"t-klein\" style=\"color:var(--successText)\">Grade 7 · done</span></div></div></sc-if><div role=\"listitem\" style=\"display:flex;flex-direction:column;gap:20px\"><div style=\"display:flex;align-items:center\"><span style=\"flex:1;height:5px;background:{{ lwLinie }}\"></span><span style=\"width:72px;height:72px;flex:none;border-radius:var(--radius-full);background:var(--success);color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"34\" height=\"34\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span><span style=\"flex:1;height:5px;background:var(--accent)\"></span></div><div style=\"display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;padding:0 12px\"><span style=\"font-size:22px;line-height:30px;font-weight:600;text-wrap:balance\">Binomische Formeln</span><span class=\"t-klein\" style=\"color:var(--successText)\">Grade 8 · done</span></div></div><div role=\"listitem\" aria-current=\"step\" style=\"display:flex;flex-direction:column;gap:20px\"><div style=\"display:flex;align-items:center\"><span style=\"flex:1;height:5px;background:var(--accent)\"></span><span style=\"width:72px;height:72px;flex:none;border-radius:var(--radius-full);background:var(--accent);display:flex;align-items:center;justify-content:center\"><span style=\"width:24px;height:24px;border-radius:var(--radius-full);background:var(--background)\"></span></span><span style=\"flex:1;height:5px;background:var(--surfaceLight)\"></span></div><div class=\"bayati-akzent\" style=\"box-sizing:border-box;padding:16px 12px;display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center\"><span style=\"font-size:22px;line-height:30px;font-weight:600;text-wrap:balance\">Rearranging equations</span><span class=\"t-klein\" style=\"color:var(--accentText)\">now · approx. 5 min</span></div></div><div role=\"listitem\" style=\"display:flex;flex-direction:column;gap:20px\"><div style=\"display:flex;align-items:center\"><span style=\"flex:1;height:5px;background:var(--surfaceLight)\"></span><span class=\"t-anzeige\" style=\"width:72px;height:72px;flex:none;border-radius:var(--radius-full);background:var(--surfaceLight);color:var(--textSecondary);display:flex;align-items:center;justify-content:center;font-size:28px\">3</span><span style=\"flex:1;height:5px;background:var(--surfaceLight)\"></span></div><div style=\"display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;padding:0 12px\"><span style=\"font-size:22px;line-height:30px;font-weight:600;text-wrap:balance\">Square roots</span><span class=\"t-klein\" style=\"color:var(--textSecondary)\">Grade 9</span></div></div><div role=\"listitem\" style=\"display:flex;flex-direction:column;gap:20px\"><div style=\"display:flex;align-items:center\"><span style=\"flex:1;height:5px;background:var(--surfaceLight)\"></span><span style=\"width:72px;height:72px;flex:none;box-sizing:border-box;border-radius:var(--radius-full);border:2px solid var(--accentBorder);color:var(--accent);display:flex;align-items:center;justify-content:center\"><svg width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.3 2 1.7 0 2.7-.4 3.7-1v10.2c-1 .6-2 1-3.7 1-2.3 0-4.3-2-7.3-2a6 6 0 0 0-4 1.3\"></path></svg></span><span style=\"flex:1;height:5px;background:{{ lwLinieR }}\"></span></div><div style=\"display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;padding:0 12px\"><span style=\"font-size:22px;line-height:30px;font-weight:600;text-wrap:balance\">Quadratic equations</span><span class=\"t-klein\" style=\"color:var(--accentText)\">Your goal</span></div></div><sc-if value=\"{{ vollbreit }}\" hint-placeholder-val=\"{{ false }}\"><div role=\"listitem\" style=\"display:flex;flex-direction:column;gap:20px\"><div style=\"display:flex;align-items:center\"><span style=\"flex:1;height:5px;background:var(--surfaceLight)\"></span><span style=\"width:72px;height:72px;flex:none;border-radius:var(--radius-full);background:var(--surfaceLight);color:var(--textSecondary);display:flex;align-items:center;justify-content:center\"><svg width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 18 6-6-6-6\"></path></svg></span><span style=\"flex:1;height:5px;background:var(--surfaceLight)\"></span></div><div style=\"display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;padding:0 12px\"><span style=\"font-size:22px;line-height:30px;font-weight:600;text-wrap:balance;color:var(--textSecondary)\">Quadratic functions</span><span class=\"t-klein\" style=\"color:var(--textSecondary)\">Grade 9 · next</span></div></div></sc-if><div aria-hidden=\"true\" style=\"height:72px;display:flex;align-items:center\"><span style=\"flex:1;height:5px;background:linear-gradient(90deg,var(--surfaceLight),transparent)\"></span></div></div></section>\n\n<section id=\"themen\" data-screen-label=\"Themen\" style=\"margin:200px {{ thRand }} 0;padding:0 {{ thPad }};display:flex;flex-direction:column;gap:48px\"><div style=\"display:flex;align-items:end;justify-content:space-between;gap:40px\"><div style=\"display:flex;flex-direction:column;gap:20px\"><span class=\"t-beschriftung\" style=\"color:var(--accentText)\">Grades 7 to 10</span><h2 class=\"t-anzeige\" style=\"margin:0;font-size:60px;line-height:1;letter-spacing:-0.03em\">38 chapters, 353 topics.</h2></div><sc-if value=\"{{ eigenerHintergrund }}\" hint-placeholder-val=\"{{ true }}\"><div style=\"display:flex;flex-direction:column;align-items:flex-end;gap:8px\"><div role=\"radiogroup\" aria-label=\"Grade\" style=\"display:flex;gap:4px\"><sc-for list=\"{{ klassen }}\" as=\"k\" hint-placeholder-count=\"4\"><sc-if value=\"{{ k.an }}\" hint-placeholder-val=\"{{ false }}\"><span role=\"radio\" aria-checked=\"true\" class=\"t-klein-betont bayati-akzent\" style=\"height:48px;box-sizing:border-box;padding:0 20px;display:flex;align-items:center;font-weight:600;white-space:nowrap;color:var(--textPrimary)\">{{ k.name }}</span></sc-if><sc-if value=\"{{ k.aus }}\" hint-placeholder-val=\"{{ true }}\"><span role=\"radio\" aria-checked=\"false\" tabIndex=\"0\" onClick=\"{{ k.klick }}\" onKeyDown=\"{{ k.taste }}\" class=\"t-klein-betont\" style=\"height:48px;box-sizing:border-box;padding:0 20px;display:flex;align-items:center;white-space:nowrap;cursor:pointer;color:var(--textSecondary);border:1px solid transparent\" style-focus=\"outline:2px solid var(--accent);outline-offset:2px\">{{ k.name }}</span></sc-if></sc-for></div><span class=\"t-klein t-ziffern\" style=\"color:var(--textSecondary);padding-right:20px\">{{ klasseMeta }}</span></div></sc-if></div><sc-if value=\"{{ eigenerHintergrund }}\" hint-placeholder-val=\"{{ true }}\"><div style=\"display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px;align-items:start\"><div role=\"list\" style=\"display:flex;flex-direction:column;min-width:0\"><div aria-hidden=\"true\" style=\"height:40px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;padding-bottom:10px;border-bottom:1px solid var(--textTertiary)\"><span class=\"t-beschriftung\" style=\"color:var(--textTertiary)\">Chapter</span><span class=\"t-beschriftung\" style=\"color:var(--textTertiary);padding-right:32px\">Topics</span></div><sc-for list=\"{{ themenL }}\" as=\"t\" hint-placeholder-count=\"4\"><a role=\"listitem\" href=\"#\" aria-label=\"{{ t.aria }}\" style=\"min-height:64px;box-sizing:border-box;padding:12px 0;display:grid;grid-template-columns:minmax(0,1fr) 32px 20px;column-gap:12px;align-items:center;text-decoration:none;color:var(--textPrimary);border-bottom:1px solid var(--divider)\" style-hover=\"color:var(--accentText)\"><span style=\"font-size:17px;line-height:24px;font-weight:600;text-wrap:pretty\">{{ t.titel }}</span><span class=\"t-klein t-ziffern\" style=\"text-align:right;color:var(--textSecondary)\">{{ t.n }}</span><span style=\"display:flex;color:var(--textTertiary)\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 18 6-6-6-6\"></path></svg></span></a></sc-for></div><div role=\"list\" style=\"display:flex;flex-direction:column;min-width:0\"><div aria-hidden=\"true\" style=\"height:40px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;padding-bottom:10px;border-bottom:1px solid var(--textTertiary)\"><span class=\"t-beschriftung\" style=\"color:var(--textTertiary)\">Chapter</span><span class=\"t-beschriftung\" style=\"color:var(--textTertiary);padding-right:32px\">Topics</span></div><sc-for list=\"{{ themenR }}\" as=\"t\" hint-placeholder-count=\"4\"><a role=\"listitem\" href=\"#\" aria-label=\"{{ t.aria }}\" style=\"min-height:64px;box-sizing:border-box;padding:12px 0;display:grid;grid-template-columns:minmax(0,1fr) 32px 20px;column-gap:12px;align-items:center;text-decoration:none;color:var(--textPrimary);border-bottom:1px solid var(--divider)\" style-hover=\"color:var(--accentText)\"><span style=\"font-size:17px;line-height:24px;font-weight:600;text-wrap:pretty\">{{ t.titel }}</span><span class=\"t-klein t-ziffern\" style=\"text-align:right;color:var(--textSecondary)\">{{ t.n }}</span><span style=\"display:flex;color:var(--textTertiary)\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 18 6-6-6-6\"></path></svg></span></a></sc-for></div></div></sc-if><sc-if value=\"{{ vollbreit }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:48px;align-items:start\"><sc-for list=\"{{ klassenAlle }}\" as=\"k\" hint-placeholder-count=\"4\"><div role=\"list\" aria-label=\"{{ k.name }}\" style=\"display:flex;flex-direction:column;min-width:0\"><div style=\"height:56px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;padding-bottom:10px;border-bottom:1px solid var(--textTertiary)\"><span style=\"display:flex;flex-direction:column;gap:2px\"><span class=\"t-titel\" style=\"font-size:22px;line-height:28px\">{{ k.name }}</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">{{ k.meta }}</span></span><span class=\"t-beschriftung\" style=\"color:var(--textTertiary);padding-right:32px\">Topics</span></div><sc-for list=\"{{ k.kap }}\" as=\"t\" hint-placeholder-count=\"8\"><a role=\"listitem\" href=\"#\" aria-label=\"{{ t.aria }}\" style=\"min-height:64px;box-sizing:border-box;padding:12px 0;display:grid;grid-template-columns:minmax(0,1fr) 32px 20px;column-gap:12px;align-items:center;text-decoration:none;color:var(--textPrimary);border-bottom:1px solid var(--divider)\" style-hover=\"color:var(--accentText)\"><span style=\"font-size:17px;line-height:24px;font-weight:600;text-wrap:pretty\">{{ t.titel }}</span><span class=\"t-klein t-ziffern\" style=\"text-align:right;color:var(--textSecondary)\">{{ t.n }}</span><span style=\"display:flex;color:var(--textTertiary)\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 18 6-6-6-6\"></path></svg></span></a></sc-for></div></sc-for></div></sc-if></section>\n\n<section data-screen-label=\"Your Bayati\" style=\"margin:200px {{ dbRand }} 0;padding:0 {{ dbPad }};display:grid;grid-template-columns:minmax(0,1fr) {{ dbSpalte }};gap:{{ dbGap }};align-items:center\"><div style=\"display:flex;flex-direction:column;gap:40px\"><div style=\"display:flex;flex-direction:column;gap:20px\"><span class=\"t-beschriftung\" style=\"color:var(--accentText)\">Your Bayati</span><h2 class=\"t-anzeige\" style=\"margin:0;font-size:60px;line-height:1;letter-spacing:-0.03em;text-wrap:balance\">Looks the way you want.</h2><p class=\"t-fliesstext\" style=\"margin:0;max-width:520px;font-size:19px;line-height:30px;color:var(--textSecondary);text-wrap:pretty\">Bayati, Organic, Rosé or Robotics. <sc-if value=\"{{ eigenerHintergrund }}\" hint-placeholder-val=\"{{ true }}\"><span>Every choice changes the phone on the right right away.</span></sc-if><sc-if value=\"{{ vollbreit }}\" hint-placeholder-val=\"{{ false }}\"><span>Every choice changes the tablet and phone on the right right away.</span></sc-if></p></div><div style=\"display:flex;flex-direction:column;gap:28px\"><div style=\"display:flex;flex-direction:column;gap:10px\"><span class=\"t-beschriftung\" style=\"color:var(--textSecondary)\">Style</span><div role=\"radiogroup\" aria-label=\"Style\" style=\"display:flex;flex-wrap:wrap;gap:4px\"><sc-for list=\"{{ stile }}\" as=\"s\" hint-placeholder-count=\"4\"><sc-if value=\"{{ s.an }}\" hint-placeholder-val=\"{{ true }}\"><span role=\"radio\" aria-checked=\"true\" class=\"t-klein-betont bayati-akzent\" style=\"height:48px;box-sizing:border-box;padding:0 20px;display:flex;align-items:center;gap:10px;font-weight:600;color:var(--textPrimary)\"><span data-stil=\"{{ s.key }}\" style=\"width:12px;height:12px;border-radius:var(--radius-full);background:var(--accent)\"></span>{{ s.name }}</span></sc-if><sc-if value=\"{{ s.aus }}\" hint-placeholder-val=\"{{ false }}\"><span role=\"radio\" aria-checked=\"false\" onClick=\"{{ s.klick }}\" class=\"t-klein-betont\" style=\"height:48px;box-sizing:border-box;padding:0 20px;display:flex;align-items:center;gap:10px;cursor:pointer;color:var(--textSecondary);border:1px solid transparent\"><span data-stil=\"{{ s.key }}\" style=\"width:12px;height:12px;border-radius:var(--radius-full);background:var(--accent)\"></span>{{ s.name }}</span></sc-if></sc-for></div></div><sc-if value=\"{{ zweiModi }}\" hint-placeholder-val=\"{{ true }}\"><div style=\"display:flex;flex-direction:column;gap:10px\"><span class=\"t-beschriftung\" style=\"color:var(--textSecondary)\">Mode</span><div role=\"radiogroup\" aria-label=\"Mode\" style=\"display:flex;gap:4px\"><sc-for list=\"{{ modi }}\" as=\"m\" hint-placeholder-count=\"2\"><sc-if value=\"{{ m.an }}\" hint-placeholder-val=\"{{ true }}\"><span role=\"radio\" aria-checked=\"true\" class=\"t-klein-betont bayati-akzent\" style=\"height:44px;box-sizing:border-box;padding:0 18px;display:flex;align-items:center;font-weight:600;color:var(--textPrimary)\">{{ m.name }}</span></sc-if><sc-if value=\"{{ m.aus }}\" hint-placeholder-val=\"{{ false }}\"><span role=\"radio\" aria-checked=\"false\" onClick=\"{{ m.klick }}\" class=\"t-klein-betont\" style=\"height:44px;box-sizing:border-box;padding:0 18px;display:flex;align-items:center;cursor:pointer;border:1px solid transparent;color:var(--textSecondary)\">{{ m.name }}</span></sc-if></sc-for></div></div></sc-if><sc-if value=\"{{ nurHell }}\" hint-placeholder-val=\"{{ false }}\"><span class=\"t-klein\" style=\"color:var(--textSecondary)\">Organic only comes in light.</span></sc-if><sc-if value=\"{{ nurDunkel }}\" hint-placeholder-val=\"{{ false }}\"><span class=\"t-klein\" style=\"color:var(--textSecondary)\">Robotics only comes in dark.</span></sc-if><sc-if value=\"{{ istBayati }}\" hint-placeholder-val=\"{{ true }}\"><div style=\"display:flex;flex-direction:column;gap:10px\"><span class=\"t-beschriftung\" style=\"color:var(--textSecondary)\">Accent colour</span><div role=\"radiogroup\" aria-label=\"Accent colour\" style=\"display:flex;flex-wrap:wrap;gap:8px\"><sc-for list=\"{{ welten }}\" as=\"w\" hint-placeholder-count=\"5\"><div role=\"radio\" aria-checked=\"{{ w.an }}\" aria-label=\"{{ w.name }}\" onClick=\"{{ w.klick }}\" style=\"width:64px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;padding-top:4px\"><sc-if value=\"{{ w.an }}\" hint-placeholder-val=\"{{ true }}\"><span data-welt=\"{{ w.key }}\" style=\"width:32px;height:32px;border-radius:var(--radius-full);background:var(--accent);outline:2px solid var(--accent);outline-offset:3px;color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span><span class=\"t-meta\" style=\"font-weight:600\">{{ w.name }}</span></sc-if><sc-if value=\"{{ w.aus }}\" hint-placeholder-val=\"{{ false }}\"><span data-welt=\"{{ w.key }}\" style=\"width:32px;height:32px;border-radius:var(--radius-full);background:var(--accent)\"></span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">{{ w.name }}</span></sc-if></div></sc-for></div></div></sc-if></div></div><div style=\"position:relative;width:{{ dbSpalte }};height:674px\"><sc-if value=\"{{ vollbreit }}\" hint-placeholder-val=\"{{ false }}\"><div aria-hidden=\"true\" style=\"position:absolute;left:0;top:0;z-index:1;width:606px;height:426px;box-sizing:border-box;padding:8px;border-radius:28px;background:#000;border:1px solid light-dark(#000,var(--glassBorder));pointer-events:none;transform:scale(1.4);transform-origin:0 0\"><div style=\"width:590px;height:410px;overflow:hidden;border-radius:20px\"><div style=\"width:1180px;height:820px;overflow:hidden;transform:scale(0.5);transform-origin:0 0\"><dc-import name=\"TabletLernenQuer\" theme=\"{{ phoneTheme }}\" stil=\"{{ stil }}\" welt=\"{{ welt }}\" hint-size=\"1180px,820px\"></dc-import></div></div></div></sc-if><div style=\"position:absolute;right:0;top:0;z-index:2;transform:scale({{ dbHandyS }});transform-origin:100% 100%;width:320px;height:674px;box-sizing:border-box;padding:8px;border-radius:45px;background:#000;border:1px solid light-dark(#000,var(--glassBorder))\"><div style=\"width:304px;height:658px;overflow:hidden;border-radius:37px\"><div style=\"width:390px;height:844px;overflow:hidden;zoom:0.78\"><dc-import name=\"LernenStart\" theme=\"{{ phoneTheme }}\" stil=\"{{ stil }}\" welt=\"{{ welt }}\" hint-size=\"390px,844px\"></dc-import></div></div></div></div></section>\n\n<section id=\"eltern\" data-screen-label=\"For parents\" style=\"margin:200px {{ vbRand }} 0;padding:0 {{ vbPad }};display:grid;grid-template-columns:{{ elSpalten }} minmax(0,1fr);gap:96px;align-items:start\"><div style=\"display:flex;flex-direction:column;gap:20px\"><span class=\"t-beschriftung\" style=\"color:var(--accentText)\">For parents</span><h2 class=\"t-anzeige\" style=\"margin:0;font-size:60px;line-height:1;letter-spacing:-0.03em;text-wrap:balance\">Safe for kids.</h2><a href=\"#\" class=\"t-klein-betont\" style=\"align-self:flex-start;height:48px;display:flex;align-items:center;gap:6px;font-weight:600;text-decoration:none;color:var(--accentText)\">More for parents<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 18 6-6-6-6\"></path></svg></a></div><div role=\"list\" style=\"display:grid;grid-template-columns:{{ elListe }};column-gap:48px;border-top:{{ elListeRand }}\"><sc-for list=\"{{ eltern }}\" as=\"e\" hint-placeholder-count=\"3\"><div role=\"listitem\" style=\"display:grid;grid-template-columns:{{ elItem }};gap:{{ elItemGap }};align-content:start;padding:28px 0;border-top:{{ elItemRand }};border-bottom:1px solid var(--divider)\"><span class=\"t-titel\" style=\"font-size:26px;line-height:32px;letter-spacing:-0.01em;text-wrap:balance\">{{ e.titel }}</span><span class=\"t-fliesstext\" style=\"font-size:17px;line-height:26px;color:var(--textSecondary);text-wrap:pretty\">{{ e.text }}</span></div></sc-for></div></section>\n\n<section data-screen-label=\"Fragen\" style=\"margin:200px {{ vbRand }} 0;padding:0 {{ vbPad }};display:grid;grid-template-columns:{{ elSpalten }} minmax(0,1fr);gap:96px;align-items:start\"><div style=\"display:flex;flex-direction:column;gap:20px\"><span class=\"t-beschriftung\" style=\"color:var(--accentText)\">Questions</span><h2 class=\"t-anzeige\" style=\"margin:0;font-size:60px;line-height:1;letter-spacing:-0.03em;text-wrap:balance\">What you want to know.</h2></div><div style=\"display:grid;grid-template-columns:{{ fgSpalten }};gap:48px 64px;align-items:start\"><sc-for list=\"{{ fragenGruppen }}\" as=\"g\" hint-placeholder-count=\"2\"><div style=\"display:flex;flex-direction:column\"><span class=\"t-beschriftung\" style=\"color:var(--textSecondary);padding-bottom:8px\">{{ g.titel }}</span><sc-for list=\"{{ g.fragen }}\" as=\"f\" hint-placeholder-count=\"3\"><div style=\"border-top:1px solid var(--divider)\"><sc-if value=\"{{ f.offen }}\" hint-placeholder-val=\"{{ false }}\"><div role=\"button\" aria-expanded=\"true\" style=\"min-height:64px;box-sizing:border-box;padding:16px 0;display:flex;align-items:center;gap:16px\"><span style=\"flex:1;font-size:20px;line-height:28px;font-weight:600\">{{ f.frage }}</span><span style=\"display:flex;color:var(--accent)\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m18 15-6-6-6 6\"></path></svg></span></div><p class=\"t-fliesstext\" style=\"margin:0;padding:0 48px 24px 0;font-size:17px;line-height:26px;color:var(--textSecondary);text-wrap:pretty\">{{ f.antwort }}</p><sc-if value=\"{{ f.link }}\" hint-placeholder-val=\"{{ false }}\"><a href=\"#\" class=\"t-klein-betont\" style=\"align-self:flex-start;margin:-12px 0 20px;height:40px;display:inline-flex;align-items:center;gap:6px;font-weight:600;text-decoration:none;color:var(--accentText)\">{{ f.link }}<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 18 6-6-6-6\"></path></svg></a></sc-if></sc-if><sc-if value=\"{{ f.zu }}\" hint-placeholder-val=\"{{ true }}\"><div role=\"button\" aria-expanded=\"false\" style=\"min-height:64px;box-sizing:border-box;padding:16px 0;display:flex;align-items:center;gap:16px;cursor:pointer\"><span style=\"flex:1;font-size:20px;line-height:28px;font-weight:600\">{{ f.frage }}</span><span style=\"display:flex;color:var(--textSecondary)\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"></path></svg></span></div></sc-if></div></sc-for></div></sc-for></div></section>\n\n<div style=\"height:200px\"></div>\n</div>\n\n<div style=\"position:relative;overflow:hidden;margin:0 {{ kopfRand }}\"><div class=\"bayati-kopf\" style=\"position:absolute;inset:0;transform:scaleY(-1)\"></div><section data-screen-label=\"Schluss\" style=\"position:relative;box-sizing:border-box;padding:160px 80px 120px\"><div style=\"position:relative;width:1120px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:96px;align-items:end\"><h2 class=\"t-anzeige\" style=\"margin:0;font-size:76px;line-height:0.95;letter-spacing:-0.035em;text-wrap:balance\">Ready? The first lesson takes five minutes.</h2><div style=\"display:flex;flex-direction:column;gap:14px;align-items:flex-start;padding-bottom:8px\"><a href=\"#\" class=\"t-knopf bayati-akzent\" style=\"height:64px;width:100%;box-sizing:border-box;padding:0 40px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;text-decoration:none;font-size:20px;font-weight:600;color:var(--textPrimary)\">Start for free</a><span class=\"t-klein\" style=\"color:var(--textSecondary)\">No sign-up. Create an account later if you like.</span></div></div></section>\n\n<footer style=\"position:relative\"><div style=\"box-sizing:border-box;width:1120px;margin:0 auto;padding:0 0 56px;display:flex;align-items:center;justify-content:space-between;gap:40px\"><nav aria-label=\"Footer\" style=\"display:flex;gap:32px\"><a href=\"#eltern\" class=\"t-klein\" style=\"min-height:44px;display:flex;align-items:center;text-decoration:none;color:var(--textSecondary)\" style-hover=\"color:var(--textPrimary)\">For parents</a><a href=\"#\" class=\"t-klein\" style=\"min-height:44px;display:flex;align-items:center;text-decoration:none;color:var(--textSecondary)\" style-hover=\"color:var(--textPrimary)\">Imprint</a><a href=\"#\" class=\"t-klein\" style=\"min-height:44px;display:flex;align-items:center;text-decoration:none;color:var(--textSecondary)\" style-hover=\"color:var(--textPrimary)\">Privacy</a></nav><div style=\"display:flex;align-items:center;gap:16px\"><span class=\"t-beschriftung\" style=\"color:var(--textSecondary)\">Language</span><div role=\"radiogroup\" aria-label=\"Sprache / Language\" style=\"display:flex;gap:16px\"><span role=\"radio\" aria-checked=\"true\" aria-label=\"Deutsch\" class=\"t-klein-betont\" style=\"height:44px;min-width:36px;box-sizing:border-box;padding:2px 4px 0;display:flex;align-items:center;justify-content:center;font-weight:600;border-bottom:2px solid var(--accent);color:var(--textPrimary);cursor:pointer\">DE</span><span role=\"radio\" aria-checked=\"false\" aria-label=\"English\" class=\"t-klein-betont\" style=\"height:44px;min-width:36px;box-sizing:border-box;padding:2px 4px 0;display:flex;align-items:center;justify-content:center;font-weight:600;border-bottom:2px solid transparent;color:var(--textSecondary);cursor:pointer\">EN</span></div></div></div></footer></div>\n</div>\n</div>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script data-props=\"{&quot;theme&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;light&quot;,&quot;dark&quot;],&quot;default&quot;:&quot;light&quot;,&quot;tsType&quot;:&quot;'light' | 'dark'&quot;},&quot;vollbreit&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:false,&quot;tsType&quot;:&quot;boolean&quot;},&quot;tempo&quot;:{&quot;editor&quot;:&quot;int&quot;,&quot;default&quot;:1000,&quot;min&quot;:500,&quot;max&quot;:2500,&quot;step&quot;:100,&quot;unit&quot;:&quot;ms&quot;,&quot;tsType&quot;:&quot;number&quot;}}\">\nclass Component extends DCLogic {\n  state = { stil: 'bayati', bereich: 0, tk: 7 };\n  bereichRef = React.createRef();\n  componentDidMount() {\n    let n = 0;\n    const go = () => { const mj = window.MathJax; if (mj && mj.typesetPromise) setTimeout(() => mj.typesetPromise().catch(() => {}), 400); else if (n++ < 60) setTimeout(go, 200); };\n    go();\n  }\n  renderVals() {\n    const t = this.props.theme ?? 'light', s = this.state.stil, md = this.state.modus ?? t, wl = this.state.welt ?? 'violett', b = this.state.bereich;\n    const vb = !!this.props.vollbreit;\n    const v = { theme: t, vollbreit: vb, hell: t === 'light', dunkel: t === 'dark', eigenerHintergrund: !vb, hintergrund: vb ? 'transparent' : 'var(--background)', kopfRand: vb ? '-320px' : '0', kopfInnen: vb ? '48px' : '80px', wasRand: vb ? '-400px' : '-80px', wasInnen: vb ? '120px' : '80px', wasBreite: vb ? '1920px' : '1280px', probRand: vb ? '-280px' : '0', wasSpalten: vb ? 'minmax(0,1fr) minmax(0,1fr)' : 'minmax(0,1fr)', wasZeilen: vb ? '1fr' : 'auto', zeileSpalten: vb ? 'minmax(0,1fr)' : '400px minmax(0,1fr)', zeileGap: vb ? '24px' : '96px', stil: s, welt: wl, phoneTheme: s === 'organic' ? 'light' : s === 'robotik' ? 'dark' : md };\n    v.zweiModi = s === 'bayati' || s === 'rose'; v.nurHell = s === 'organic'; v.nurDunkel = s === 'robotik'; v.istBayati = s === 'bayati';\n    const sel = (key, cur, set) => ({ key, an: cur === key, aus: cur !== key, klick: () => this.setState(set(key)) });\n    v.stile = [['bayati', 'Bayati'], ['organic', 'Organic'], ['rose', 'Rosé'], ['robotik', 'Robotics']].map(([k, name]) => ({ name, ...sel(k, s, k => ({ stil: k })) }));\n    v.modi = [['light', 'Light'], ['dark', 'Dark']].map(([k, name]) => ({ name, ...sel(k, md, k => ({ modus: k })) }));\n    v.welten = [['violett', 'Violet'], ['indigo', 'Indigo'], ['himmel', 'Sky'], ['pink', 'Pink'], ['tuerkis', 'Teal']].map(([k, name]) => ({ name, ...sel(k, wl, k => ({ welt: k })) }));\n    v.bereiche = [['Understand', 'Five-minute lessons, step by step.'], ['Practise', 'Questions that are never the same, and tests like in class.'], ['Duel', 'Against friends: who gets more right?']].map(([titel, text], i) => ({ nr: '0' + (i + 1), titel, text, an: b === i, aus: b !== i, klick: () => this.setState({ bereich: i }) }));\n    for (let i = 0; i < 3; i++) v['ba_' + i] = b === i;\n    v.eltern = [['No ads and no tracking', 'Bayati shows no ads and passes no data to advertising companies.'], ['No chat, no contact with strangers', 'Duels have no chat, no free-text names and no profile pictures. Opponents only appear by nickname.'], ['Content based on the curriculum', 'The chapters follow what grades 7 to 10 cover in class.']].map(([titel, text]) => ({ titel, text }));\n    const F = (frage, antwort, link) => ({ frage, antwort, link: link ?? false, offen: !!antwort, zu: !antwort });\n    v.fragenGruppen = [\n      { titel: 'About Bayati', fragen: [F('Does Bayati cost anything?'), F('Do I need an account?', 'No. You start as a guest and learn the first chapter. With an account you learn all chapters and continue on any device.'), F('Which grades?'), F('Does it work on phones and in the browser?')] },\n      { titel: 'About maths', fragen: [F('How do I solve equations?', 'You change both sides in the same way until x stands alone. Whatever you do on the left, you also do on the right.', 'Read the explanation'), F('What is the absolute value of a number?'), F('How do I calculate percentages?')] }\n    ];\n    v.tempo = this.props.tempo ?? 1000;\n    v.vbRand = vb ? '-400px' : '0'; v.vbPad = vb ? '48px' : '0'; v.elSpalten = vb ? '520px' : '400px'; v.elListe = vb ? 'repeat(3,minmax(0,1fr))' : 'minmax(0,1fr)'; v.elListeRand = vb ? 'none' : '1px solid var(--divider)'; v.elItem = vb ? 'minmax(0,1fr)' : 'minmax(0,1fr) minmax(0,1fr)'; v.elItemGap = vb ? '16px' : '32px'; v.elItemRand = vb ? '1px solid var(--divider)' : 'none'; v.fgSpalten = vb ? 'repeat(2,minmax(0,1fr))' : 'minmax(0,1fr)';\n    v.dbRand = vb ? '-400px' : '0'; v.dbPad = vb ? '48px' : '0'; v.dbSpalte = vb ? '1037px' : '320px'; v.dbGap = '120px'; v.dbHandyS = vb ? '0.84' : '1';\n    const KAP = { 7: [['Rational numbers', 15], ['Terms and variables', 13], ['Equations', 12], ['Relations and proportionality', 14], ['Percentages and interest', 14], ['Angles and symmetry', 15], ['Congruence and triangles', 10], ['Data and chance', 9]], 8: [['Terms and binomial formulas', 10], ['Equations in depth', 9], ['Linear functions', 8], ['Systems of linear equations', 9], ['Powers', 7], ['Wurzeln', 6], ['Areas, circles and solids', 11], ['Pythagorean theorem', 6], ['Similarity and dilation', 8], ['Probability in depth', 7], ['Percentages and interest in depth', 6]], 9: [['Real numbers', 7], ['Powers and roots in depth', 9], ['Quadratic functions', 10], ['Quadratic equations', 9], ['Power and root functions', 8], ['Trigonometry', 9], ['Similarity in depth', 6], ['Solid geometry in depth', 8], ['Exponentielles Wachstum', 7], ['Probability and combinatorics', 9]], 10: [['Exponential functions and logarithms', 10], ['Polynomial functions', 9], ['Trigonometric functions', 9], ['Circle geometry', 7], ['Differentialrechnung', 11], ['Curve analysis', 10], ['Wachstumsmodelle', 7], ['Probability and statistics in depth', 8], ['Vectors', 9]] };\n    const tk = this.state.tk, kl = KAP[tk];\n    const mkK = (k) => KAP[k].map(([titel, n], i) => ({ nr: k + '.' + String(i + 1).padStart(2, '0'), titel, n, aria: titel + ', ' + n + ' topics' }));\n    const th = mkK(tk), hh = Math.ceil(th.length / 2); v.themenL = th.slice(0, hh); v.themenR = th.slice(hh);\n    v.klassenAlle = [7, 8, 9, 10].map(k => ({ name: 'Grade ' + k, meta: KAP[k].length + ' chapters · ' + KAP[k].reduce((s, x) => s + x[1], 0) + ' topics', kap: mkK(k) }));\n    v.thRand = vb ? '-400px' : '0'; v.thPad = vb ? '48px' : '0';\n    v.klasseMeta = kl.length + ' chapters · ' + kl.reduce((s, x) => s + x[1], 0) + ' topics';\n    v.klassen = [7, 8, 9, 10].map(k => { const klick = () => this.setState({ tk: k }); return { name: 'Grade ' + k, an: tk === k, aus: tk !== k, klick, taste: (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); klick(); } } }; });\n    v.lwRand = vb ? '-400px' : '-80px'; v.lwSpalten = vb ? 'minmax(0,1fr) repeat(6,268px) minmax(0,1fr)' : 'minmax(0,1fr) repeat(4,268px) minmax(0,1fr)'; v.lwLinie = 'var(--accent)'; v.lwLinieR = 'var(--surfaceLight)';\n    const R = vb ? 400 : 80, e = vb ? 0 : 1, tq = vb ? 1 : 0;\n    v.bereichRef = this.bereichRef; v.brRand = (-R * (1 - e)).toFixed(1) + 'px'; v.brPadX = (48 * (1 - e)).toFixed(1) + 'px';\n    const tf = vb ? 1.3 : 0.9, hs = vb ? 0.22 : 0.48, ov = vb ? 80 : 120; v.brHandyS = (1 - hs * tq).toFixed(3); v.brSpalte = (320 + (606 * tf - ov + 320 * (1 - hs) - 320) * tq).toFixed(1) + 'px'; v.brGap = (120 - 72 * tq).toFixed(1) + 'px'; v.brTabOp = tq.toFixed(3); v.brTabT = 'translateX(' + (-48 * (1 - tq)).toFixed(1) + 'px) scale(' + (tf * (0.9 + 0.1 * tq)).toFixed(3) + ')';\n    return v;\n  }\n}\n</script>\n</body>\n</html>\n","LernenStart":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<script src=\"./support.js\"></script>\n</head>\n<body>\n<x-dc>\n<div data-theme=\"{{ theme }}\" data-stil=\"{{ stil }}\" data-welt=\"{{ welt }}\" style=\"position:relative;width:390px;height:844px;overflow:hidden;background:var(--background);color:var(--textPrimary);font-family:var(--font-sans)\">\n<sc-if value=\"{{ mitHintergrund }}\" hint-placeholder-val=\"{{ true }}\"><div class=\"bayati-kopf\" style=\"position:absolute;left:0;top:0;width:390px;height:280px\"></div><div class=\"bayati-muster\"></div></sc-if>\n<div style=\"position:absolute;left:0;top:0;width:390px;height:47px;box-sizing:border-box;padding:6px 26px 0 34px;display:flex;align-items:center;justify-content:space-between\"><span class=\"t-klein-betont\" style=\"font-weight:600\">9:41</span><span style=\"width:25px;height:12px;box-sizing:border-box;border:1px solid var(--textSecondary);border-radius:4px;padding:1px;display:flex\"><span style=\"width:72%;background:var(--textPrimary);border-radius:2px\"></span></span></div>\n<div style=\"position:absolute;left:20px;top:55px;width:350px;display:flex;flex-direction:column;gap:10px\">\n<div style=\"display:flex;align-items:center;gap:12px\"><div style=\"flex:1;min-width:0;display:flex;flex-direction:column;gap:2px\"><div style=\"display:flex;align-items:center;gap:8px\"><h1 class=\"t-titel\" style=\"margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis\">Good evening, Luise</h1><span style=\"display:flex;color:var(--accentText)\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none\"><path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\"></path></svg></span></div><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">Grade 7 · 12 min learned today</span></div><div role=\"button\" aria-label=\"Level 3, how you earn XP\" style=\"position:relative;width:56px;height:56px;flex:none;box-sizing:border-box;border-radius:var(--radius-full);background:var(--accentTint);border:2px solid var(--accent);display:flex;flex-direction:column;align-items:center;justify-content:center;\"><span style=\"font-family:var(--font-display);font-size:20px;line-height:22px;font-weight:700\">3</span><span style=\"font-size:9px;line-height:11px;font-weight:600;letter-spacing:.5px;color:var(--accentText)\">LEVEL</span></div></div>\n<div style=\"display:flex;flex-direction:column;gap:6px\"><div style=\"display:flex;justify-content:space-between;gap:12px\"><span class=\"t-meta\" style=\"color:var(--textSecondary)\">XP to level 4</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">120 / 200</span></div><div style=\"height:6px;border-radius:var(--radius-full);background:var(--glassLight);overflow:hidden\"><div style=\"width:60%;height:100%;border-radius:var(--radius-full);background:var(--accent)\"></div></div></div>\n</div>\n<div style=\"position:absolute;left:20px;top:333px;width:350px;height:112px;overflow:hidden;box-sizing:border-box;background:var(--surface);border:1px solid var(--accentBorder);border-radius:var(--radius-card)\">\n<div class=\"bayati-karo\" style=\"box-sizing:border-box;height:64px;padding:12px 80px 0 16px;display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--divider)\"><span class=\"t-beschriftung\" style=\"color:var(--accentText)\">Pick up where you left off</span><span class=\"t-kartentitel\" style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis\">7.01.03 Ordering and comparing</span></div>\n<div style=\"padding:9px 80px 0 16px\"><span class=\"t-klein t-ziffern\" style=\"color:var(--textSecondary)\">Step 3 of 9 · approx. 4 min</span></div>\n<div style=\"position:absolute;right:16px;top:31px;width:48px;height:48px;box-sizing:border-box;border-radius:var(--radius-full);background:var(--accentTint);border:1px solid var(--accentBorder);color:var(--textPrimary);display:flex;align-items:center;justify-content:center\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 4l13 8-13 8z\"></path></svg></div>\n<div style=\"position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--glassLight)\"><div style=\"width:33%;height:100%;background:var(--accent);border-radius:0 var(--radius-full) var(--radius-full) 0\"></div></div>\n</div>\n<div role=\"group\" aria-label=\"Areas\" style=\"position:absolute;left:20px;top:167px;width:350px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px\"><div role=\"link\" aria-label=\"Formulas\" style=\"min-height:48px;display:flex;flex-direction:column;align-items:center;gap:6px\"><div style=\"height:64px;width:100%;display:flex;align-items:center;justify-content:center\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 689.61 800\" role=\"img\" aria-hidden=\"true\" style=\"height:64px;width:auto;max-width:100%;display:block\"><g transform=\"translate(-712.355 -198.943)\"><ellipse cx=\"144.539\" cy=\"17.612\" rx=\"144.539\" ry=\"17.612\" transform=\"translate(799.232 947.281)\" fill=\"#e6e6e6\" opacity=\"0.501\"></ellipse><ellipse cx=\"136.644\" cy=\"145.753\" rx=\"136.644\" ry=\"145.753\" transform=\"translate(806.52 686.14)\" fill=\"#e6e6e6\"></ellipse><path d=\"M4.858,0H80.164a4.858,4.858,0,0,1,4.858,4.858V72.877a4.858,4.858,0,0,1-4.858,4.858H4.858A4.858,4.858,0,0,1,0,72.877V4.858A4.858,4.858,0,0,1,4.858,0Z\" transform=\"translate(901.259 918.13)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M14.535,128.751S-4.9,80.164,1.177,78.949c3.621-.725,5.947-10.958,7.236-19.1a37.652,37.652,0,1,1,39.712,14.3c.07,11.615,7.71,21.8,7.71,21.8l10.926,26.722-23.074,6.076Z\" transform=\"translate(928.626 385.523)\" fill=\"#ed9da0\"></path><path d=\"M524.78,648.2l-6.073,21.863s-4.858,35.224,1.215,43.726c4.77,6.678,13.287,14.855,29.083,16.291a19.52,19.52,0,0,0,20.379-13.5A6.084,6.084,0,0,0,569.72,715c0-2.429-3.644-31.58-3.644-31.58L560,653.059l-1.215-8.5Z\" transform=\"translate(395.306 204.948)\" style=\"fill:var(--textSecondary,#090814)\"></path><path d=\"M491.213,480.415s-31.58,60.73-6.073,72.877,31.58,10.931,31.58,14.575-4.858,2.429-2.429,8.5,6.014,105.671,13.3,109.315,42.57,6.073,46.214,0-3.644-103.242-1.215-106.886,9.717-23.078,9.717-23.078l13.361-1.215,31.58,6.073s35.224,38.867,74.091,51.014c0,0,20.648,17,18.219,20.648s-15.932,155.706-12.288,158.135,48.908,3.392,49.335-7.815S782.719,605.52,777.861,595.8,756,542.36,664.9,514.424c0,0-25.507-4.858-25.507-8.5s-2.429-26.721-7.288-27.936-32.794-2.429-32.794-2.429L564.09,486.488l-48.584-8.5Z\" transform=\"translate(386.361 168.679)\" style=\"fill:var(--textSecondary,#090814)\"></path><path d=\"M671.108,735.543s-6.073-6.073-7.288,0-6.073,31.58,2.429,32.794,98.383,8.5,98.383,8.5,6.753.662,10.4-3.285,8.989-10.7,4.179-12.5c-9.717-3.644-37.653-14.575-37.653-14.575s-21.18-19.505-23.609-20.72-10.4.071-16.473,4.93S671.108,735.543,671.108,735.543Z\" transform=\"translate(426.311 222.062)\" style=\"fill:var(--textSecondary,#090814)\"></path><path d=\"M575.978,371.348c-8.806,2.733-23.053-15.921-23.053-15.921s-9.459-33.51-11.889-27.437-56.155,23.924-56.155,23.924,10.932,102.027,6.073,111.744-13.361,48.584-6.073,52.228,41.3,0,52.228,4.858,42.511,4.858,51.014-1.215,10.932-10.931,19.434-7.288c7.238,3.1,24.16-102.952,29.031-134.556a14.386,14.386,0,0,0-5.961-13.98c-10.9-7.645-30.527-20.818-34-19.081C591.768,347.055,584.784,368.615,575.978,371.348Z\" transform=\"translate(387.833 136.852)\" fill=\"#e6e6e6\"></path><path d=\"M605.712,359.557h0a14.4,14.4,0,0,1,10.823,12.384l9.825,88.429s-24.292,52.228-36.438,17S605.712,359.557,605.712,359.557Z\" transform=\"translate(410.328 143.784)\" fill=\"#e6e6e6\"></path><path d=\"M603.831,450.844l26.721-7.288s4.858,34.009,9.717,34.009-17,19.434-27.936,17-26.721-10.931-27.936-17,10.931-31.58,10.931-31.58Z\" transform=\"translate(409.78 161.811)\" fill=\"#e6e6e6\"></path><path d=\"M564.382,379.844l3.644-7.288s53.443,15.79,64.374,30.365c0,0,26.721-17,41.3-14.575l14.575,2.429-44.941,40.082L586.245,426Z\" transform=\"translate(405.503 146.574)\" fill=\"#f2f2f2\"></path><path d=\"M571.181,372.557l-49.8,69.233,71.662,35.224s6.7,3.644,11.852,0L652.56,455.15,697.5,390.776,652.56,413.853S647.7,404.137,637.984,409Z\" transform=\"translate(396.275 146.574)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M626.455,485.747l9.717-25.507s21.863-27.936,9.717-41.3-25.507,38.867-25.507,38.867Z\" transform=\"translate(417.521 156.06)\" fill=\"#ed9da0\"></path><path d=\"M533.079,479.512l21.2-17.189s32.928-13.2,29.125-30.848S541.842,452.3,541.842,452.3Z\" transform=\"translate(398.785 158.224)\" fill=\"#ed9da0\"></path><path d=\"M494.263,349.986l-4.858-2.429s-19.434,3.644-23.078,34.009-15.79,131.178,15.79,134.822,74.091-4.858,74.091-4.858,8.5-46.155,0-46.155-52.228,6.073-51.014,0S528.272,358.488,494.263,349.986Z\" transform=\"translate(383.311 141.209)\" fill=\"#e6e6e6\"></path><path d=\"M338,356.741l13.394-20.528,8.469,33.889L338,379.819Z\" transform=\"translate(688.364 271.098)\" fill=\"#e6e6e6\"></path><circle cx=\"32.794\" cy=\"32.794\" r=\"32.794\" transform=\"translate(718.429 269.528)\" fill=\"#f2f2f2\"></circle><rect width=\"77.735\" height=\"77.735\" transform=\"translate(712.355 546.459)\" fill=\"#f2f2f2\"></rect><path d=\"M378.953,0l19.675,34.078L418.3,68.157H339.6l19.674-34.078Z\" transform=\"translate(688.708 198.943)\" fill=\"#f2f2f2\"></path><path d=\"M953.592,290.656q-.706,21.809-10.622,34.961t-23.565,13.155q-11.116,0-19.485-12.873t-8.371-39.6q0-5.909.281-11.255t.7-10.129l4.924-46.286h-32.5q-8.441,87.789-13.858,104.461t-18.36,16.672a15.523,15.523,0,0,1-10.411-4.361,14.653,14.653,0,0,1-4.924-11.537q0-6.469,10.2-18.078t11.325-21.173l8.441-65.983H833.726a24.183,24.183,0,0,0-11.044,2.743,20.837,20.837,0,0,0-7.949,6.4l-6.05,9h-4.924q6.892-21.383,16.953-32.147t23.143-10.763H951.341v24.761h-36.3q-1.689,16.883-2.6,33.765t-.914,33.906q0,11.538,5.346,18.712t13.365,7.175q4.923,0,10.341-4.01a14.54,14.54,0,0,0,6.12-10.481q.422-3.093.633-4.854t.211-2.181Z\" transform=\"translate(448.373 108.46)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M25.339,76.155a41.463,41.463,0,0,1-21.12-19.5c-6.575-13.34-7.3-36.064,11.372-41.583,0,0-3.275-14.853,6.436-12.509,0,0,2.327-4.2,13.821-1.718,0,0,42.471-4.947,50.009,9.037,0,0,22.794,4.671,10.656,22.011,0,0-.628,3.374-4.959,3.311l2.164-2.83-6.6,2.83s-9.173-14.61-17.83-6.532c0,0-16.557-.7-24.477-2.147,0,0,1.59,21.269-13.61,25.411S25.339,76.155,25.339,76.155Z\" transform=\"translate(920.777 367.131) rotate(8)\" style=\"fill:var(--textSecondary,#090814)\"></path></g></svg></div><span class=\"t-klein\" style=\"font-weight:600;color:var(--textPrimary)\">Formulas</span></div><div role=\"link\" aria-label=\"Tests\" style=\"min-height:48px;display:flex;flex-direction:column;align-items:center;gap:6px\"><div style=\"height:64px;width:100%;display:flex;align-items:center;justify-content:center\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 960 696.493\" role=\"img\" aria-hidden=\"true\" style=\"height:64px;width:auto;max-width:100%;display:block\"><g transform=\"translate(-455.43 -224.387)\"><path d=\"M85.665,167.974a84.229,84.229,0,0,1-17.713-1.491,83.192,83.192,0,0,1-53.559-35.244A84.164,84.164,0,0,1,99.92,1.492,83.18,83.18,0,0,1,153.543,36.7a84.174,84.174,0,0,1,.531,93.462A85.311,85.311,0,0,1,148.9,137.2l20.636,43.759-74.481,19.8Z\" transform=\"translate(927.301 335.338)\" fill=\"#ed9da0\"></path><path d=\"M826.1,478.572l-4.23,249.907-341.667-8.434,54.564-103.621c-.392-3.325,23.949-26.664,23.809-30.122-.42-10.133,8.375-19.519,9.8-30.122,1.926-14.455-22.953-18.357-28.49-49.789-2.767-15.707,9.712-66.3,12.319-72.083,3.275-7.619,17.565-14.562,22.614-21.426,4.37-5.687,8.851-9.519,36.973-50.69l87.91-22.4,9.719-2.482L732.1,356.347l16.036,13.471,15.083,2.253c2.255.337,4.44.735,6.54,1.193A71.189,71.189,0,0,1,797.294,385C823.623,404.242,826.69,440.437,826.1,478.572Z\" transform=\"translate(393.112 159.095)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M1078.812,660.4q-14.453,18.129-30.629,34.76l-36.945.028-198.689.224-35.769.042L753,695.485l-35.377.028-27.212.028-50.264.056-29.649.042-62.434.056-29.8.042-82.588.084-51.875.056-13.921.014q-4.643-4.748-9.145-9.635-11.218-12.164-21.582-25.083l28.822-.028,19.635-.014,45.46-.056,87.727-.084,29.649-.028,11.988-.014h.042l9.411-.014,4.215-.014,10.8-.014h4.566l32.016-.028,69.059-.084,30.391-.028,29.1-.028,27.282-.028,39.144-.042,209.067-.21Z\" transform=\"translate(336.619 224.989)\" fill=\"#e6e6e6\"></path><path d=\"M665.13,691.256a11.288,11.288,0,0,1-4.837-1.093l-269.625,6.879a11.316,11.316,0,0,1,1.611-21.07l176.4-52.6a11.316,11.316,0,0,1,5.624-.215l272.854,33.257a11.315,11.315,0,0,1,1.3,21.757l-179.627,12.46a11.326,11.326,0,0,1-3.695.623Z\" transform=\"translate(354.659 209.971)\" style=\"fill:var(--textSecondary,#3f3d56)\"></path><path d=\"M656.524,664.943a7.12,7.12,0,0,1-3.478-.9l-218.974,10.23a7.1,7.1,0,0,1,1.8-13.089l79.274-19.241a7.118,7.118,0,0,1,3.75.11l203.568-.245a7.1,7.1,0,0,1,.048,13.561l-63.866,9.255A7.084,7.084,0,0,1,656.524,664.943Z\" transform=\"translate(373.181 217.514)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><path d=\"M579.528,666.329A30.847,30.847,0,0,0,624.7,652.305l231.777,18.207L843.837,621.35,606.211,610.813a31.014,31.014,0,0,0-26.684,55.516Z\" transform=\"translate(427.129 204.456)\" fill=\"#ed9da0\"></path><path d=\"M676.836,383.935s35.013-23.52,77.028,18.816C782.2,431.3,836.856,603.9,841.388,675.422c.579,9.149-3.41,18.087-11.008,24.662s-18.117,10.193-29.025,9.983l-123.54-1.805L664,643.052l97.536.97Z\" transform=\"translate(466.722 175.16)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M657.2,751.085a31.848,31.848,0,0,1-12.339-2.5l-249.909,5.7a31.757,31.757,0,0,1-19.118-34.428L366.55,500.387a31.71,31.71,0,0,1,33.521-26.713L632.083,483.3a31.846,31.846,0,0,1,29.3,37.174L688.568,724.62A31.9,31.9,0,0,1,657.2,751.085Z\" transform=\"translate(347.592 150.173)\" style=\"fill:var(--textSecondary,#3f3d56)\"></path><g transform=\"translate(455.43 224.387)\"><g transform=\"translate(0 66.449)\"><path d=\"M177.379.453,16.856,0A16.255,16.255,0,0,0,.582,16.188L0,228.746A16.218,16.218,0,0,0,16.166,245l89.045.259,71.5.194a16.223,16.223,0,0,0,16.253-16.188l.043-12.567.56-199.969A16.242,16.242,0,0,0,177.379.453Z\" transform=\"translate(0 30.281) rotate(-9)\" fill=\"#e6e6e6\"></path><path d=\"M153.582.388,15.628,0A15.221,15.221,0,0,0,.388,15.153L0,151.814a67.777,67.777,0,0,0,67.511,67.878l26.211.065,59.256.172a15.206,15.206,0,0,0,15.24-15.153l.043-13.752.474-175.4A15.207,15.207,0,0,0,153.582.388Z\" transform=\"translate(14.324 40.931) rotate(-9)\" fill=\"#fff\"></path></g><g transform=\"translate(25.262 36.661)\"><path d=\"M177.379.453,16.856,0A16.255,16.255,0,0,0,.582,16.188L0,228.746A16.218,16.218,0,0,0,16.166,245l89.045.259,71.5.194a16.223,16.223,0,0,0,16.253-16.188l.043-12.567.56-199.969A16.242,16.242,0,0,0,177.379.453Z\" transform=\"translate(0 30.281) rotate(-9)\" fill=\"#e6e6e6\"></path><path d=\"M153.582.388,15.628,0A15.221,15.221,0,0,0,.388,15.153L0,151.814a67.777,67.777,0,0,0,67.511,67.878l26.211.065,59.256.172a15.206,15.206,0,0,0,15.24-15.153l.043-13.752.474-175.4A15.207,15.207,0,0,0,153.582.388Z\" transform=\"translate(14.324 40.931) rotate(-9)\" fill=\"#fff\"></path></g><g transform=\"translate(53.845 30.281) rotate(-9)\"><path d=\"M177.379.453,16.856,0A16.255,16.255,0,0,0,.582,16.188L0,228.746A16.218,16.218,0,0,0,16.166,245l89.045.259,71.5.194a16.223,16.223,0,0,0,16.253-16.188l.043-12.567.56-199.969A16.242,16.242,0,0,0,177.379.453Z\" transform=\"translate(0 0)\" fill=\"#e6e6e6\"></path><path d=\"M153.582.388,15.628,0A15.221,15.221,0,0,0,.388,15.153L0,151.814a67.777,67.777,0,0,0,67.511,67.878l26.211.065,59.256.172a15.206,15.206,0,0,0,15.24-15.153l.043-13.752.474-175.4A15.207,15.207,0,0,0,153.582.388Z\" transform=\"translate(12.482 12.76)\" fill=\"#fff\"></path><path d=\"M114.017,0H6.456a6.456,6.456,0,0,0,0,12.912H114.017a6.456,6.456,0,1,0,0-12.912Z\" transform=\"translate(36.549 106.527)\" fill=\"#e6e6e6\"></path><path d=\"M30.1,0H6.456a6.456,6.456,0,0,0,0,12.912H30.1A6.456,6.456,0,1,0,30.1,0Z\" transform=\"translate(36.549 71.133)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M114.017,0H6.456a6.456,6.456,0,0,0,0,12.912H114.017a6.456,6.456,0,1,0,0-12.912Z\" transform=\"translate(36.549 163.282)\" fill=\"#e6e6e6\"></path><path d=\"M114.006,0H6.445a6.445,6.445,0,0,0,0,12.89H114.006a6.445,6.445,0,0,0,0-12.89Z\" transform=\"translate(36.558 134.915)\" fill=\"#e6e6e6\"></path><path d=\"M38.188,76.377A38.188,38.188,0,1,1,76.377,38.188,38.188,38.188,0,0,1,38.188,76.377Zm0-73.723A35.535,35.535,0,1,0,73.723,38.188,35.535,35.535,0,0,0,38.188,2.654Z\" transform=\"translate(91.476 17.583)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M32.651,38.827A98.174,98.174,0,0,0,16.532.962a2.016,2.016,0,0,0-3.437,0A104.861,104.861,0,0,0,.017,40.486C-.292,43.023,3.691,43,4,40.486a98.1,98.1,0,0,1,2.61-13.364,2.28,2.28,0,0,0,.445-.136,29.012,29.012,0,0,1,17.136-2.791c.051.008.1,0,.151,0a95.447,95.447,0,0,1,4.473,15.689C29.3,42.4,33.136,41.334,32.651,38.827ZM8.04,22.24A100.757,100.757,0,0,1,14.991,5.818,95.407,95.407,0,0,1,22.678,20.07,33.576,33.576,0,0,0,8.04,22.24Z\" transform=\"translate(113.052 31.736)\" style=\"fill:var(--accent,#6c63ff)\"></path></g></g><path d=\"M209.528,220.6s-1.135,29.573-36.706,33.83l-61.231-16.6s47.323-154.5,23.731-135.4C120.954,114.054,88.051,94.847,64.307,77.9,49.408,67.263,38.16,57.471,38.16,57.471L21.823,96.415S-27.034,83.692,21.457,36.9c0,0,58.009-54.129,127.051-31.278s61.019,214.961,61.019,214.961Z\" transform=\"matrix(0.921, -0.391, 0.391, 0.921, 875.152, 359.603)\" style=\"fill:var(--textSecondary,#090814)\"></path></g></svg></div><span class=\"t-klein\" style=\"font-weight:600;color:var(--textPrimary)\">Tests</span></div><div role=\"link\" aria-label=\"Duel\" style=\"min-height:48px;display:flex;flex-direction:column;align-items:center;gap:6px\"><div style=\"height:64px;width:100%;display:flex;align-items:center;justify-content:center\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 921 647.73602\" role=\"img\" aria-hidden=\"true\" style=\"height:64px;width:auto;max-width:100%;display:block\"><title>playing cards</title><path d=\"M867.30078,771.82324a50.16694,50.16694,0,0,1-13.54492-1.87109L670.73145,720.96289l.5371-1.92578,183.02637,48.98926a48.16143,48.16143,0,0,0,13.00586,1.79687c21.53906,0,40.64258-12.48047,46.45606-33.21386L1044.043,271.99072h-.001l.28418-1.01123a48.28977,48.28977,0,0,0-33.42969-59.4126L716.7041,129.07129a48.29038,48.29038,0,0,0-59.46094,33.4165l-10.22168,36.46-1.92578-.54,10.22168-36.46a50.29063,50.29063,0,0,1,61.92676-34.80224l294.19238,82.4956a50.29149,50.29149,0,0,1,35.0625,60.96143l.00879.00244-.26953.96289L915.68262,737.14941C909.62793,758.74219,889.73242,771.82324,867.30078,771.82324Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><polygon points=\"518.96 84.066 522.31 85.006 532.62 87.896 533.7 84.036 529.84 82.956 533.23 70.866 541.38 63.786 543.55 86.806 537.55 85.116 536.47 88.976 551.87 93.296 552.95 89.436 549.68 88.526 546.54 59.306 562.54 45.396 567.03 46.656 568.11 42.796 552.7 38.476 551.62 42.336 556.7 43.756 536.35 59.746 541.99 39.636 545.85 40.716 546.93 36.856 531.52 32.536 530.44 36.396 536.22 38.016 524.07 81.336 518.29 79.716 518.14 80.236 517.52 82.476 518.96 84.066\" style=\"fill:var(--accent,#6c63ff)\"></polygon><path d=\"M683.25,245.83A116.74372,116.74372,0,0,0,672,251.44c-.67.38-1.34.77-2,1.16V240.23a46.801,46.801,0,0,0-1.87-13.15c.58-.36,1.17-.75,1.75-1.14.53-.35,1.07-.71,1.6-1.07A134.73634,134.73634,0,0,0,683.25,245.83Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><polygon points=\"727.027 611.842 722.542 610.584 721.462 614.435 736.868 618.755 737.948 614.904 732.874 613.481 753.218 597.485 747.576 617.604 743.725 616.524 742.645 620.375 758.051 624.695 759.131 620.844 753.353 619.224 765.503 575.895 771.281 577.515 772.361 573.664 756.955 569.344 755.875 573.195 759.726 574.275 756.335 586.369 748.189 593.449 746.024 570.433 752.023 572.115 753.103 568.264 737.698 563.944 736.618 567.795 739.891 568.713 743.033 597.93 727.027 611.842\" style=\"fill:var(--accent,#6c63ff)\"></polygon><path d=\"M885.31538,661.93431A110.09112,110.09112,0,0,0,905.775,650.43613a169.04888,169.04888,0,0,0,11.77863,20.95862A125.77733,125.77733,0,0,0,897.094,682.89294,135.22416,135.22416,0,0,0,885.31538,661.93431Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M750.397,453.726s-5.05855,32.85439-6.56141,34.51011,10.50007,40.333,10.50007,40.333l38.48867-22.44154s7.48855-41.52013,9.95427-42.90585S750.397,453.726,750.397,453.726Z\" transform=\"translate(-139.5 -125.26398)\" fill=\"#ffb8b8\"></path><path d=\"M750.397,453.726s-5.05855,32.85439-6.56141,34.51011,10.50007,40.333,10.50007,40.333l38.48867-22.44154s7.48855-41.52013,9.95427-42.90585S750.397,453.726,750.397,453.726Z\" transform=\"translate(-139.5 -125.26398)\" opacity=\"0.1\"></path><circle cx=\"640.67419\" cy=\"322.27193\" r=\"38\" fill=\"#ffb8b8\"></circle><path d=\"M763.7042,506.27039l-3.31144-3.00572-14.8847-21.18423s-1.70823-1.12439-3.32823,4.65277l-1.62,5.77716-13.98432,5.42575-30.94282,132.569,82.806,23.22,34.1014-132.72187-16.01721-16.95432-1.77345-8.1795-24.72806,10.09525Z\" transform=\"translate(-139.5 -125.26398)\" fill=\"#fff\"></path><path d=\"M670,644.09l2,.56,128.96,36.16,43.12-142.65s-10.2-8.06-18.18-9.26c0,0-13.4-15.18-19.17-16.8-5.78-1.62-12.17-15.87-12.17-15.87s-6.75,24.07-18.35,39.51-31.8,68.98-31.8,68.98l-5.7-98.19,6.4-24.69a45.464,45.464,0,0,0-10.06,8.09c-4.51,4.96-16.02,9-16.02,9s-30.32,8.12-35.68,8.7c-5.35.57-7.82,1.96-7.82,1.96L672,533.88l-2,13.76Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><path d=\"M687.6,588.79c-1.2,7.97-13.54,40.86-13.54,40.86L672,631.72l-2,2.01V511.92a5.61755,5.61755,0,0,1,2-1.39,13.71966,13.71966,0,0,1,3.53-.94l3.86,1.08S688.8,580.81,687.6,588.79Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><path d=\"M775.44293,631.07505s18.92574-34.1587,33.25151-25.98726-8.64,30.81153-8.64,30.81153Z\" transform=\"translate(-139.5 -125.26398)\" fill=\"#ffb8b8\"></path><path d=\"M716.86131,617.76364s-36.31869-11.22286-37.12869-8.33428-10.7543,19.83293-7.86572,20.64293,25.30437,6.05714,25.03437,7.02,10.74432,6.12858,10.74432,6.12858Z\" transform=\"translate(-139.5 -125.26398)\" fill=\"#ffb8b8\"></path><polygon points=\"648.165 384.489 625.05 385.398 620.236 384.048 600.963 371.253 594.58 390.355 618.886 388.862 623.7 390.212 643.686 404.125 648.165 384.489\" style=\"fill:var(--accent,#6c63ff)\"></polygon><polygon points=\"586.05 528.176 582.5 535.736 531.5 521.736 530.5 518.826 530.5 502.796 532.5 503.576 534.56 504.386 586.05 528.176\" style=\"fill:var(--textSecondary,#2f2e41)\"></polygon><path d=\"M727.45278,620.73364s-11.97719-5.43572-12.24719-4.47286-16.34288,28.65153-12.49144,29.73153,17.48435,8.01858,17.48435,8.01858Z\" transform=\"translate(-139.5 -125.26398)\" fill=\"#fff\"></path><path d=\"M837.34017,536.26612l6.74,1.89s3.85144,1.08,4.15716,7.39716,5.53292,35.82439,3.06719,37.21011-3.15858.15287-1.77286,2.61859,2.61859,1.77286,1.11573,3.42858S845.696,643.505,834.51886,661.14222s-14.57,26.033-18.42146,24.953L716.267,658.10129s4.44578-39.25765,8.56722-39.14051S796.473,633.85646,796.473,633.85646,822.62726,533.179,837.34017,536.26612Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><path d=\"M757.78487,405.88642l-6.2345-4.47128s18.58634-10.44541,38.42854-3.51981l-4.08748-7.273S801.192,389.46685,810.09806,406.26c4.68172,8.82778,10.06253,19.17007,12.26158,29.73748l7.43484,2.08484-4.84329,5.33591,9.12032,9.25151-10.83473-4.24064a32.524,32.524,0,0,1-5.56145,15.77732l-4.47115,6.23443s-4.43484-23.02763-3.72693-25.55215l-1.76976,6.31126s-5.34963-7.62685-4.28778-11.41359l-5.02557,3.356.05338-7.47333-25.2984.39427,5.37951-4.61825-15.0468-2.17709,7.627-5.34958s-18.70994,3.60324-21.28794,10.36864c-2.57778,6.76535-13.26,13.30046-13.26,13.30046l-2.017-7.37311S736.82762,410.22094,757.78487,405.88642Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><path d=\"M744.72085,419.55721l.29721-1.295c2.88968-12.58007-19.33835-35.97544-19.563-36.21036l-.39466-.41189.15412-.5496c.4398-1.56841,2.20365-2.96129,17.65926.38888,6.01774,1.30459,12.01884,2.89458,14.53112,3.57624-.28052-7.18284-9.18474-16.6997-9.27973-16.80038l-1.12008-1.18683,1.566-.45948c10.26547-3.009,22.28032,6.97086,26.12019,10.50459l6.41856-22.88956,12.70134,18.76039c7.79712-11.67253,19.07562-11.19961,19.56853-11.17245l1.58331.08646L814.2025,363.29c-5.34317,9.77538-6.30593,16.19629-6.36142,19.36186,14.21594-16.889,27.027-15.41792,27.58441-15.34426l1.94137.25634-1.34612,1.42228c-18.61059,19.665-20.802,45.60606-20.82209,45.86566l-.06714.8742ZM727.67,381.4914c3.93,4.25933,20.92405,23.481,19.51633,35.92848l66.10992-3.5964c.54512-4.62771,3.89789-26.64821,19.70494-44.50036-4.30785.38486-14.4698,2.84024-25.17507,16.52141l-1.22716,1.56771-.525-1.92009c-.08251-.30256-1.87214-7.33553,5.55265-21.62269-3.40377.32194-11.32864,2.10388-16.92936,11.45408l-.80644,1.34592-12.01971-17.7533-6.16913,22L774.49206,379.69c-.13508-.13677-13.03108-13.04892-23.75367-11.5094,2.75251,3.205,9.33808,11.6462,8.6167,18.28236l-.12732,1.17377-1.13681-.31878C745.46282,383.77681,731.03938,380.75512,727.67,381.4914Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M840.40847,362.03937a3.58691,3.58691,0,1,1,4.42216-2.48523A3.59071,3.59071,0,0,1,840.40847,362.03937Zm1.39693-4.98167a1.58691,1.58691,0,1,0,1.09951,1.95644A1.58875,1.58875,0,0,0,841.8054,357.0577Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M815.49963,355.05458a3.58692,3.58692,0,1,1,4.42216-2.48524A3.59074,3.59074,0,0,1,815.49963,355.05458Zm1.39693-4.98168a1.58692,1.58692,0,1,0,1.09951,1.95645A1.58875,1.58875,0,0,0,816.89656,350.0729Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M777.63572,351.15424a3.58691,3.58691,0,1,1,4.42216-2.48523A3.59072,3.59072,0,0,1,777.63572,351.15424Zm1.39693-4.98167a1.58691,1.58691,0,1,0,1.09951,1.95644A1.58875,1.58875,0,0,0,779.03265,346.17257Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M717.1894,379.87858a3.58691,3.58691,0,1,1,4.42216-2.48523A3.59071,3.59071,0,0,1,717.1894,379.87858Zm1.39693-4.98167a1.58691,1.58691,0,1,0,1.09951,1.95644A1.58875,1.58875,0,0,0,718.58633,374.89691Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M740.56282,363.5954a3.58692,3.58692,0,1,1,4.42217-2.48523A3.59115,3.59115,0,0,1,740.56282,363.5954Zm1.39694-4.98168a1.58692,1.58692,0,1,0,1.09951,1.95645A1.58886,1.58886,0,0,0,741.95976,358.61372Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><polygon points=\"720.272 575.155 719.31 574.885 530.809 522.027 531.348 520.101 718.887 572.69 837.418 149.994 573.112 75.88 532.799 219.645 530.873 219.105 571.728 73.414 572.689 73.684 839.883 148.609 839.613 149.571 720.272 575.155\" style=\"fill:var(--textSecondary,#2f2e41)\"></polygon><path d=\"M181.134,739.11671c12.42842,23.049,38.806,32.94351,38.806,32.94351s6.22712-27.47543-6.2013-50.52448-38.806-32.94351-38.806-32.94351S168.70559,716.06766,181.134,739.11671Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><path d=\"M189.67653,731.53374c22.43841,13.49969,31.08016,40.3138,31.08016,40.3138s-27.73812,4.92678-50.17653-8.57291S139.5,722.96083,139.5,722.96083,167.23811,718.034,189.67653,731.53374Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M669.88,225.94a49.004,49.004,0,0,0-8.07-15.67,49.78347,49.78347,0,0,0-4.17-4.77A49.1065,49.1065,0,0,0,622.77,191H317.23A49.28,49.28,0,0,0,268,240.23V723.77A49.28,49.28,0,0,0,317.23,773H622.77A49.28,49.28,0,0,0,672,723.77V240.23A48.87057,48.87057,0,0,0,669.88,225.94ZM670,723.77A47.287,47.287,0,0,1,622.77,771H317.23A47.287,47.287,0,0,1,270,723.77V240.23A47.287,47.287,0,0,1,317.23,193H622.77a47.1127,47.1127,0,0,1,34.25,14.74q.735.78,1.44,1.59A47.12039,47.12039,0,0,1,670,240.23Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><path d=\"M316.74192,268.70949c-.05549-.13036-.12411-.24888-.18511-.37428a30.29407,30.29407,0,0,0,3.31465-14.268c0-15.50156-9.68724-26.32821-23.55682-26.32821s-23.55683,10.82665-23.55683,26.32821,9.68724,26.32822,23.55683,26.32822a22.22629,22.22629,0,0,0,17.29565-7.72327c4.441,7.1861,13.026,8.13425,13.4215,8.17389l.46821-4.59553C327.177,276.21579,319.55571,275.324,316.74192,268.70949Zm-20.42728,7.06695c-11.15052,0-18.93784-8.92718-18.93784-21.70923s7.78732-21.70922,18.93784-21.70922,18.93783,8.92718,18.93783,21.70922a26.09216,26.09216,0,0,1-2.11,10.6067c-6.8942-4.18866-19.72068-1.68577-21.46035-1.31911l.95,4.5202c4.7114-.98649,14.08441-1.77779,18.16441.78194A17.66814,17.66814,0,0,1,296.31464,275.77644Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M298,291.382a8.01388,8.01388,0,0,0-11.33333,11.33334L298,314.04863l11.33333-11.33333A8.01388,8.01388,0,0,0,298,291.382Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M623.25808,698.38777c.05549.13036.12411.24888.18511.37428a30.294,30.294,0,0,0-3.31465,14.268c0,15.50157,9.68724,26.32822,23.55682,26.32822s23.55683-10.82665,23.55683-26.32822-9.68724-26.32821-23.55683-26.32821a22.22629,22.22629,0,0,0-17.29565,7.72327c-4.441-7.1861-13.026-8.13425-13.4215-8.17389L612.5,690.84674C612.823,690.88147,620.44429,691.77324,623.25808,698.38777Zm20.42728-7.067c11.15052,0,18.93784,8.92719,18.93784,21.70923s-7.78732,21.70923-18.93784,21.70923-18.93783-8.92718-18.93783-21.70923a26.09214,26.09214,0,0,1,2.11-10.60669c6.8942,4.18866,19.72068,1.68577,21.46035,1.31911l-.95-4.5202c-4.7114.98649-14.08441,1.77779-18.16441-.78194A17.66812,17.66812,0,0,1,643.68536,691.32081Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M642,675.71529A8.01387,8.01387,0,0,0,653.33333,664.382L642,653.04863,630.66667,664.382A8.01387,8.01387,0,0,0,642,675.71529Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M494.64587,465.71115c-13.61413-23.00368-40.54861-24.07575-40.54861-24.07575s-26.24611-3.35633-43.08283,31.67855c-15.69316,32.65539-37.35172,64.18483-3.48685,71.82921l6.117-19.03877,3.78821,20.45619a132.50656,132.50656,0,0,0,14.48952.24764c36.26655-1.1709,70.805.34257,69.69287-12.67139C500.13683,516.83661,507.7454,487.84528,494.64587,465.71115Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><path d=\"M444.42215,544.08708c.06586,2.58925.04615,5.32-1.2405,7.56794-2.55068,4.45626-8.77746,5.12336-12.52288,8.63562-3.93886,3.69364-4.38469,9.68822-4.57241,15.08473-.19626,5.642-.36277,11.469,1.6963,16.7255A40.65962,40.65962,0,0,0,432.533,600.262q3.43009,4.94445,6.92363,9.84448a42.50313,42.50313,0,0,0,4.14572,5.20265c4.17109,4.24877,9.89244,6.60062,15.60508,8.27864,3.6909,1.08416,7.67613,1.92868,11.3382.7508a21.70662,21.70662,0,0,0,6.59342-4.05429c2.72367-2.163,5.48919-4.37013,7.46327-7.23368,3.07515-4.46076,3.9263-10.045,4.56372-15.42537a332.8629,332.8629,0,0,0,2.19408-47.95141,11.75257,11.75257,0,0,0-.91547-5.09484c-1.89659-3.70333-6.97627-4.49394-9.65283-7.6795-2.28838-2.72357-2.38171-6.61049-2.36218-10.16775l.0497-9.056a3.79376,3.79376,0,0,0-.44011-2.20632,3.73782,3.73782,0,0,0-2.59772-1.212,87.5709,87.5709,0,0,0-17.03739-1.13982c-4.62344.14128-13.49452-.24571-17.49227,2.3294-3.62874,2.33741.91468,8.79312,1.75522,12.4194A80.91135,80.91135,0,0,1,444.42215,544.08708Z\" transform=\"translate(-139.5 -125.26398)\" fill=\"#a0616a\"></path><circle cx=\"315.53427\" cy=\"366.66826\" r=\"36.60356\" fill=\"#a0616a\"></circle><path d=\"M439.9618,582.5968a53.54739,53.54739,0,0,1-5.70845-11.0871c-1.309-3.956-1.65238-8.37707-.09939-12.24377-3.95536-2.29515-9.32568-.43652-12.20618,3.11528s-3.76206,8.31289-4.016,12.87886.01525,9.19913-.9784,13.6629c-2.19838,9.87576-10.35606,17.99484-10.9627,28.09413-.59681,9.93558,6.21635,18.59093,9.56811,27.9631a46.63021,46.63021,0,0,1,2.49807,18.20141c-.1086,1.99268-.23372,4.2638,1.17235,5.68a6.47817,6.47817,0,0,0,2.53351,1.365c16.17372,5.69027,33.6437,6.18254,50.78371,6.61669l28.30959.71707a9.02291,9.02291,0,0,0,4.99916-.83715c2.53981-1.55726,2.87974-5.04794,2.92292-8.02684.37188-25.65639-.71942-51.30895-1.81047-76.94483-.39546-9.29189-.79763-18.63767-2.768-27.72684-.50174-2.31446-1.32449-4.88824-3.46107-5.90975-1.8085-.86464-3.95412-.30484-5.83455.38962a46.4571,46.4571,0,0,0-21.758,16.749c-5.80877,8.26728-8.66611,18.18454-14.351,26.51457-4.12547,6.045-6.51143.77665-9.26012-3.675Q444.7501,590.34382,439.9618,582.5968Z\" transform=\"translate(-139.5 -125.26398)\" fill=\"#fff\"></path><path d=\"M435.58,559.8986c-.72.51-1.43,1.05-2.11005,1.62a40.84911,40.84911,0,0,0-6.8,7.16,56.72208,56.72208,0,0,0-7.7,14.53c-3.32,9.1-4.76,18.76-6.13995,28.34a68.39774,68.39774,0,0,0-.97,10.68c.21,13.16,7.99,25.35,8,38.52,0,.5-.01.99-.04,1.49a43.26068,43.26068,0,0,1-.76,6.42c-.57,3.09-1.39,6.14-2.2,9.18-2.04,7.62-4.24,15.52-8.22,22.21-.4.68-.83,1.35-1.27,2h-28c.22-.67.45-1.33.67-2q7.155-21.195,14.30005-42.38c1.46-4.32,2.92-8.66,3.95-13.1a124.07457,124.07457,0,0,0,2.41-16.63q1.65-17.385,2.17-34.84c.13-4.18.22-8.45,1.57-12.41a40.59828,40.59828,0,0,1,4.98-9.08q4.335-6.52506,8.67005-13.05c1.61-2.42,3.3-4.91,5.78-6.42,2.07-1.27,4.53-1.73,6.71-2.8a34.31183,34.31183,0,0,0,3.94-2.61c3.26-2.31,7.09-4.74,9.9-2.38a5.51383,5.51383,0,0,1,1.16,1.33,6.69111,6.69111,0,0,1,.43.77C448.71,552.28862,439.21,557.3286,435.58,559.8986Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><path d=\"M527.82,702.04863H398.14c.7-.64,1.39-1.31,2.06-2,.1-.1.19-.2.29-.3,4.96-5.15,6.09-11.48,8.58-18.18005q2.805-7.575,5.61-15.14a7.83143,7.83143,0,0,1,1.43-2.69,4.43654,4.43654,0,0,1,1.97-1.18,7.642,7.642,0,0,1,1.74-.32,19.40735,19.40735,0,0,1,2.53,0q34.905,1.8,69.76,4.39,4.5.34506,9,.69c2.45,1.82,4.87,3.75,7.18,5.79,7.51,6.6,14.02,14.37,17.75,23.55.45,1.11.86,2.24,1.2,3.39C527.46,700.7086,527.65,701.37859,527.82,702.04863Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><polygon points=\"349.127 338.23 322.517 324.291 285.77 329.993 278.167 363.573 297.093 362.845 302.38 350.508 302.38 362.641 311.113 362.305 316.181 342.665 319.349 363.573 350.394 362.939 349.127 338.23\" style=\"fill:var(--textSecondary,#2f2e41)\"></polygon><path d=\"M527.82,702.04863H498.54c-.21-.66-.41-1.33-.6-2a157.25975,157.25975,0,0,1-4.54-22.68c-.31-2.19-.58-4.39-.83-6.58-.16-1.39-.31-2.77-.46-4.16-1.68-15.44-2.97-31.03-7.69-45.81-.57-1.79-1.19-3.57-1.79-5.35a63.09619,63.09619,0,0,1-2.6-9.41c-1.28-7.32-.32-14.9-1.64-22.21-.74-4.08-2.21-7.67-3.1-11.41a23.10828,23.10828,0,0,1-.66-6.91,14.88177,14.88177,0,0,1,7.79-3.86c1.01-.17,2.15-.3,2.76-1.11a3.464,3.464,0,0,0,.46-2.04,97.95682,97.95682,0,0,0-.81-14.11c-.2-1.64-.45-3.28-.75-4.91-.01-.08-.03-.15-.04-.23,2.44-1.06,5.19-1.07,7.84-1.06,2.89.01,5.77.01,8.65.02q7.995.03,15.99.05c4.96.01,10.09.06,14.6,2.11,4.66,2.13,8.2,6.24,10.54,10.8s3.61,9.58,4.76,14.57a19.51973,19.51973,0,0,1,.5,4.21c.22,11.26-8.18,22.6-9.02,34.11-.27,3.73.04,7.49-.3,11.22-.34,3.74-1.34,7.4-1.52,11.14-.01.19-.02.39-.02.58-.11,4.87,1.31,9.64,2.95,14.23,2.54,7.13,5.63,14.04,8.82,20.91,3.08,6.65,6.24,13.27,9.08,20.01a34.26306,34.26306,0,0,1,2.95,9.89,13.72406,13.72406,0,0,1-1.51,7.99,9.3757,9.3757,0,0,1-1.19,1.69l-.02.02c-.09.1-.18.2-.27.29H527.82Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><path d=\"M555.71,691.78862a11.082,11.082,0,0,1-1.07,3.83c-.05.12-.1.23-.15.35-.58,1.37-1.17,2.72-1.78,4.08-.3.66-.6,1.33-.91,2H535.24a18.53555,18.53555,0,0,0,1.66-2c2.54-3.53,4.01-7.82,6.6-11.63a8.9538,8.9538,0,0,1,1.21-1.44C548.86,682.9586,555.97,683.77861,555.71,691.78862Z\" transform=\"translate(-139.5 -125.26398)\" fill=\"#ffb8b8\"></path><path d=\"M566.49,702.04863a19.61817,19.61817,0,0,0,.53-2c.12-.53.22-1.05.3-1.58.53-3.49.52-7.06,1.35-10.49,1.17-4.91,4.68-10.72,1.79-14.85a15.69052,15.69052,0,0,0,6.21-2.78c1.72-1.5,2.72-4.1,1.68-6.14-1.03-2.01-3.82-3.34-3.44-5.57a5.313,5.313,0,0,1,.98-1.94,14.52982,14.52982,0,0,0-.25-15.94c-.91-1.3-2.03-2.44-2.86-3.8a22.66345,22.66345,0,0,1-2.07-5.27,98.1662,98.1662,0,0,0-12.63-26.18,17.37178,17.37178,0,0,1-2.79-5.16,21.30405,21.30405,0,0,1-.22-6.13c.2-8.08-2.82-15.97-7.17-22.77-.32-.5-.65-.99-.98-1.48-4.2-6.19-9.41-11.62-14.6-17.01-2.14,1-4.03,1.65-5.14,3.73a11.086,11.086,0,0,0-.99,3.72c-1.42,9.9-2.65,19.86-3.61,29.81-.48,5.03-.97,10.1-.4,15.12s2.28,10.05,5.68,13.78c2.13,2.34,4.83,4.08,7.14,6.24q.555.525,1.08,1.08a35.40951,35.40951,0,0,1,4.41,5.79,49.92056,49.92056,0,0,1,7.34,29.93,48.64077,48.64077,0,0,1-.75,5.64,23.32684,23.32684,0,0,1-2.66,7.6c-1.05,1.73-2.43,3.24-3.38,5.03s-1.4,4.02-.46,5.81a11.83106,11.83106,0,0,1,4.13.74,17.52948,17.52948,0,0,1,7.8,5.95,25.93811,25.93811,0,0,1,1.98,3.04,37.44769,37.44769,0,0,1,1.98,4.08c.24.55.47,1.12.69,1.69a1.65873,1.65873,0,0,1,.12.31Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><polygon points=\"345.231 402.805 324.027 412.053 319.051 412.545 296.446 407.631 297.443 427.746 319.543 417.521 324.519 417.029 348.195 422.725 345.231 402.805\" style=\"fill:var(--accent,#6c63ff)\"></polygon><path d=\"M527.24,700.04863c.22.66.41,1.33.58,2h7.42a18.53555,18.53555,0,0,0,1.66-2Zm-195.99-439v441h276.5v-441Zm274.5,439H333.25v-437h272.5Zm-78.51,0c.22.66.41,1.33.58,2h7.42a18.53555,18.53555,0,0,0,1.66-2Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><path d=\"M422.10107,453.98173l.17139-.85986c.05078-.25537,4.94483-25.82471-7.665-49.78418l-.91211-1.73291,1.93848.27735c.55664.07959,13.28906,2.12207,22.417,22.22216.80127-3.063,1.60791-9.50537-.89746-20.36035l-.35644-1.54541,1.54785.34424c.48193.10693,11.46923,2.69678,15.82519,16.041l17.29492-14.63428V427.722c4.65137-2.36572,18.91455-8.731,27.98633-3.062l1.38379.86523-1.39892.84033c-.11866.07129-11.26172,6.83057-13.4712,13.6709,2.603.022,8.81055.11133,14.957.48,15.78613.94727,17.10839,2.76465,17.10839,4.39356v.5708l-.49121.29c-.27978.16552-27.999,16.69043-28.61328,29.58349l-.06348,1.32715Zm62.59229-11.95214H483.5127l.19433-1.16455c1.09717-6.58448,9.71729-12.93409,13.23291-15.27686-9.90869-4.37744-25.812,4.57324-25.979,4.66846l-1.4961.854V408.262l-16.3667,13.84863-.41308-1.51367c-2.86817-10.51514-10.01758-14.37061-13.208-15.59961,3.2915,15.76123-.33057,22.0498-.4917,22.31885l-1.02392,1.707-.7583-1.84082c-6.61377-16.06348-15.73536-21.17139-19.7793-22.70508,10.3999,21.457,7.68262,43.56494,6.958,48.168l62.68359,21.3125c2.00537-12.36524,23.55811-26.28467,28.49219-29.32471C512.51221,443.01445,497.80859,442.02959,484.69336,442.02959Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M408.67139,391.87724a3.58691,3.58691,0,1,1,3.58691,3.58692A3.59072,3.59072,0,0,1,408.67139,391.87724Zm2,0a1.58691,1.58691,0,1,0,1.58691-1.58691A1.58875,1.58875,0,0,0,410.67139,391.87724Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M434.541,391.87724a3.58691,3.58691,0,1,1,3.58691,3.58692A3.59072,3.59072,0,0,1,434.541,391.87724Zm2,0a1.58691,1.58691,0,1,0,1.58691-1.58691A1.58875,1.58875,0,0,0,436.541,391.87724Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M472.05176,398.345a3.58692,3.58692,0,1,1,3.58691,3.58691A3.59072,3.59072,0,0,1,472.05176,398.345Zm2,0a1.58692,1.58692,0,1,0,1.58691-1.58692A1.58874,1.58874,0,0,0,474.05176,398.345Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M522.49756,442.323a3.58692,3.58692,0,1,1,3.58691,3.58692A3.59073,3.59073,0,0,1,522.49756,442.323Zm2,0a1.58692,1.58692,0,1,0,1.58691-1.58691A1.58875,1.58875,0,0,0,524.49756,442.323Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M504.38867,420.33379a3.58716,3.58716,0,1,1,3.58692,3.58691A3.59073,3.59073,0,0,1,504.38867,420.33379Zm2,0a1.58716,1.58716,0,1,0,1.58692-1.58692A1.58875,1.58875,0,0,0,506.38867,420.33379Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><rect x=\"12\" y=\"645.28465\" width=\"909\" height=\"2\" style=\"fill:var(--textSecondary,#3f3d56)\"></rect></svg></div><span class=\"t-klein\" style=\"font-weight:600;color:var(--textPrimary)\">Duel</span></div></div>\n<div role=\"link\" aria-label=\"Streak: 3 days in a row, opens progress\" style=\"position:absolute;left:20px;top:273px;width:350px;height:44px;box-sizing:border-box;padding:0;display:flex;align-items:center;gap:8px\">\n<span style=\"width:24px;height:36px;flex:none;color:var(--warning);display:flex;align-items:center;justify-content:center\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\"></path></svg></span>\n<span class=\"t-klein-betont\" style=\"flex:1;min-width:0;font-weight:600;white-space:nowrap\"><span class=\"t-ziffern\" style=\"color:var(--warningText)\">3</span> days in a row</span>\n<div aria-label=\"Learned Mon, Tue, Wed. Today Wed.\" style=\"display:flex;gap:0\">\n<div style=\"width:20px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:10px;height:10px;border-radius:var(--radius-full);background:var(--accent)\"></span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">Mo</span></div>\n<div style=\"width:20px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:10px;height:10px;border-radius:var(--radius-full);background:var(--accent)\"></span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">Tu</span></div>\n<div style=\"width:20px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:10px;height:10px;border-radius:var(--radius-full);background:var(--accent);outline:2px solid var(--accent);outline-offset:2px\"></span><span class=\"t-meta\" style=\"font-weight:600;color:var(--textPrimary)\">We</span></div>\n<div style=\"width:20px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:10px;height:10px;box-sizing:border-box;border-radius:var(--radius-full);border:1.5px solid var(--inputBorder)\"></span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">Th</span></div>\n<div style=\"width:20px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:10px;height:10px;box-sizing:border-box;border-radius:var(--radius-full);border:1.5px solid var(--inputBorder)\"></span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">Fr</span></div>\n<div style=\"width:20px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:10px;height:10px;box-sizing:border-box;border-radius:var(--radius-full);border:1.5px solid var(--inputBorder)\"></span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">Sa</span></div>\n<div style=\"width:20px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:10px;height:10px;box-sizing:border-box;border-radius:var(--radius-full);border:1.5px solid var(--inputBorder)\"></span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">Su</span></div>\n</div>\n</div>\n<div style=\"position:absolute;left:20px;top:469px;width:350px;display:flex;align-items:baseline;justify-content:space-between\"><span class=\"t-abschnitt\">Chapters</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">6 chapters</span></div>\n<div style=\"position:absolute;left:20px;top:501px;width:350px;display:flex;flex-direction:column;gap:8px\">\n<div style=\"position:relative;overflow:hidden;box-sizing:border-box;padding:10px 16px 14px;display:flex;align-items:center;gap:12px;background:var(--accentTint);border:1px solid var(--accentBorder);border-radius:var(--radius-card)\"><span style=\"display:flex;flex:none;color:var(--accent)\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 3v14\"></path><path d=\"M5 10h14\"></path><path d=\"M5 21h14\"></path></svg></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-abschnitt\">Rational numbers</span><span class=\"t-meta\" style=\"color:var(--accentText)\">7.01</span></div><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">4/15</span><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--textSecondary)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"></path></svg><div style=\"position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--glassLight)\"><div style=\"width:27%;height:100%;background:var(--accent)\"></div></div></div>\n<div style=\"box-sizing:border-box;padding:10px 16px 0;display:flex;flex-direction:column;gap:8px\"><div style=\"display:flex;align-items:center;gap:12px\"><span style=\"display:flex;flex:none;color:var(--textSecondary)\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 21s-4-3-4-9 4-9 4-9\"></path><path d=\"M16 3s4 3 4 9-4 9-4 9\"></path><path d=\"M15 9l-6 6\"></path><path d=\"M9 9l6 6\"></path></svg></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-abschnitt\">Terms and variables</span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">7.02</span></div><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">1/13</span><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"></path></svg></div><div style=\"margin:0 -16px;height:4px;border-radius:var(--radius-full);background:var(--glassLight);overflow:hidden\"><div style=\"width:8%;height:100%;background:var(--accent)\"></div></div></div>\n<div style=\"box-sizing:border-box;padding:10px 16px 0;display:flex;flex-direction:column;gap:8px\"><div style=\"display:flex;align-items:center;gap:12px\"><span style=\"display:flex;flex:none;color:var(--textSecondary)\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 9h14\"></path><path d=\"M5 15h14\"></path></svg></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-abschnitt\">Equations</span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">7.03</span></div><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">0/12</span><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"></path></svg></div><div style=\"margin:0 -16px;height:4px;border-radius:var(--radius-full);background:var(--glassLight)\"></div></div>\n<div style=\"box-sizing:border-box;padding:10px 16px 0;display:flex;flex-direction:column;gap:8px\"><div style=\"display:flex;align-items:center;gap:12px\"><span style=\"display:flex;flex:none;color:var(--textSecondary)\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m16 3 4 4-4 4\"></path><path d=\"M20 7H4\"></path><path d=\"m8 21-4-4 4-4\"></path><path d=\"M4 17h16\"></path></svg></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-abschnitt\">Relations and proportionality</span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">7.04</span></div><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">0/14</span><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"></path></svg></div><div style=\"margin:0 -16px;height:4px;border-radius:var(--radius-full);background:var(--glassLight)\"></div></div>\n<div style=\"box-sizing:border-box;padding:10px 16px 0;display:flex;flex-direction:column;gap:8px\"><div style=\"display:flex;align-items:center;gap:12px\"><span style=\"display:flex;flex:none;color:var(--textSecondary)\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 5 5 19\"></path><circle cx=\"6.5\" cy=\"6.5\" r=\"2.5\"></circle><circle cx=\"17.5\" cy=\"17.5\" r=\"2.5\"></circle></svg></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-abschnitt\">Percentages and interest</span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">7.05</span></div><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">0/14</span><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"></path></svg></div><div style=\"margin:0 -16px;height:4px;border-radius:var(--radius-full);background:var(--glassLight)\"></div></div>\n<div style=\"box-sizing:border-box;padding:10px 16px 0;display:flex;flex-direction:column;gap:8px\"><div style=\"display:flex;align-items:center;gap:12px\"><span style=\"display:flex;flex:none;color:var(--textSecondary)\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 20h16L4 4z\"></path><path d=\"M4 14a6 6 0 0 1 6 6\"></path></svg></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-abschnitt\">Angles and symmetry</span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">7.06</span></div><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">0/15</span><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"></path></svg></div><div style=\"margin:0 -16px;height:4px;border-radius:var(--radius-full);background:var(--glassLight)\"></div></div>\n</div>\n<nav aria-label=\"Main navigation\" style=\"position:absolute;left:0;bottom:0;width:390px;height:80px\"><div class=\"tab-glas\" aria-hidden=\"true\" style=\"position:absolute;inset:0\"></div><svg width=\"390\" height=\"80\" viewBox=\"0 0 390 80\" aria-hidden=\"true\" style=\"position:absolute;left:0;top:0;overflow:visible\"><path d=\"M0 0.5H19C32 0.5 41 31.5 65 31.5C89 31.5 98 0.5 111 0.5H390\" fill=\"none\" style=\"stroke:var(--tab-kante)\" stroke-width=\"1\"></path><path d=\"M0 1.5H19C32 1.5 41 32.5 65 32.5C89 32.5 98 1.5 111 1.5H390\" fill=\"none\" style=\"stroke:var(--tab-licht)\" stroke-width=\"1\"></path></svg><div role=\"link\" aria-label=\"Learn\" aria-current=\"page\" style=\"position:absolute;left:0;top:0;width:130px;height:52px\"><span style=\"position:absolute;left:42px;top:-21px;width:46px;height:46px;box-sizing:border-box;border-radius:var(--radius-full);background:linear-gradient(145deg,color-mix(in oklab,var(--accent) 92%,white),var(--accent));border:1px solid color-mix(in oklab,white 20%,transparent);box-shadow:0 3px 8px -4px color-mix(in oklab,var(--accent) 60%,transparent),inset 0 1px 0 color-mix(in oklab,white 25%,transparent);color:#fff;display:flex;align-items:center;justify-content:center\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5z\" style=\"fill:currentColor\"></path><path d=\"M9 18h6\"></path><path d=\"M10 22h4\"></path></svg></span></div><div role=\"link\" aria-label=\"Progress\" style=\"position:absolute;left:130px;top:0;width:130px;height:52px;display:flex;align-items:center;justify-content:center;color:var(--textSecondary)\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 20V10\"></path><path d=\"M12 20V4\"></path><path d=\"M6 20v-6\"></path></svg></div><div role=\"link\" aria-label=\"Profile\" style=\"position:absolute;left:260px;top:0;width:130px;height:52px;display:flex;align-items:center;justify-content:center;color:var(--textSecondary)\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"8\" r=\"5\"></circle><path d=\"M20 21a8 8 0 0 0-16 0\"></path></svg></div><div style=\"position:absolute;left:128px;bottom:8px;width:134px;height:5px;border-radius:var(--radius-full);background:var(--textPrimary)\"></div></nav>\n</div>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script>\nclass Component extends DCLogic {\n  renderVals() {\n    const stil = this.props.stil ?? 'bayati';\n    return { theme: this.props.theme ?? 'dark', stil, welt: stil === 'bayati' ? (this.props.welt ?? 'violett') : '', mitHintergrund: true };\n  }\n}\n</script>\n</body>\n</html>\n","TabletLernenQuer":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<script src=\"./support.js\"></script>\n</head>\n<body>\n<x-dc>\n<div data-theme=\"{{ theme }}\" data-stil=\"{{ stil }}\" data-welt=\"{{ welt }}\" style=\"position:relative;width:1180px;height:820px;overflow:hidden;background:var(--background);color:var(--textPrimary);font-family:var(--font-sans)\">\n<div class=\"bayati-kopf\" style=\"position:absolute;left:0;top:0;width:1180px;height:300px\"></div><div class=\"bayati-muster\"></div>\n\n<div style=\"position:absolute;left:40px;top:96px;right:0;bottom:0;display:flex;gap:40px;padding-right:40px\">\n<div aria-label=\"Left column, scrolls on its own\" style=\"width:380px;flex:none;height:724px;overflow:hidden;box-sizing:border-box;padding:20px 0 24px\"><div style=\"display:flex;flex-direction:column;gap:8px\">\n<div style=\"display:flex;flex-direction:column;gap:10px\">\n<div style=\"display:flex;align-items:center;gap:12px\"><div style=\"flex:1;min-width:0;display:flex;flex-direction:column;gap:2px\"><div style=\"display:flex;align-items:center;gap:8px\"><h1 class=\"t-titel\" style=\"margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis\">Good evening, Luise</h1><span style=\"display:flex;color:var(--accentText)\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none\"><path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\"></path></svg></span></div><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">Grade 7 · 12 min learned today</span></div><div role=\"button\" aria-label=\"Level 3, how you earn XP\" style=\"position:relative;width:56px;height:56px;flex:none;box-sizing:border-box;border-radius:var(--radius-full);background:var(--accentTint);border:2px solid var(--accent);display:flex;flex-direction:column;align-items:center;justify-content:center;\"><span style=\"font-family:var(--font-display);font-size:20px;line-height:22px;font-weight:700\">3</span><span style=\"font-size:9px;line-height:11px;font-weight:600;letter-spacing:.5px;color:var(--accentText)\">LEVEL</span></div></div>\n<div style=\"display:flex;flex-direction:column;gap:6px\"><div style=\"display:flex;justify-content:space-between;gap:12px\"><span class=\"t-meta\" style=\"color:var(--textSecondary)\">XP to level 4</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">120 / 200</span></div><div style=\"height:6px;border-radius:var(--radius-full);background:var(--glassLight);overflow:hidden\"><div style=\"width:60%;height:100%;border-radius:var(--radius-full);background:var(--accent)\"></div></div></div>\n</div>\n<div role=\"group\" aria-label=\"Areas\" style=\"margin:8px 0 4px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px\"><div role=\"link\" aria-label=\"Formulas\" style=\"min-height:48px;display:flex;flex-direction:column;align-items:center;gap:6px\"><div style=\"height:64px;width:100%;display:flex;align-items:center;justify-content:center\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 689.61 800\" role=\"img\" aria-hidden=\"true\" style=\"height:64px;width:auto;max-width:100%;display:block\"><g transform=\"translate(-712.355 -198.943)\"><ellipse cx=\"144.539\" cy=\"17.612\" rx=\"144.539\" ry=\"17.612\" transform=\"translate(799.232 947.281)\" fill=\"#e6e6e6\" opacity=\"0.501\"></ellipse><ellipse cx=\"136.644\" cy=\"145.753\" rx=\"136.644\" ry=\"145.753\" transform=\"translate(806.52 686.14)\" fill=\"#e6e6e6\"></ellipse><path d=\"M4.858,0H80.164a4.858,4.858,0,0,1,4.858,4.858V72.877a4.858,4.858,0,0,1-4.858,4.858H4.858A4.858,4.858,0,0,1,0,72.877V4.858A4.858,4.858,0,0,1,4.858,0Z\" transform=\"translate(901.259 918.13)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M14.535,128.751S-4.9,80.164,1.177,78.949c3.621-.725,5.947-10.958,7.236-19.1a37.652,37.652,0,1,1,39.712,14.3c.07,11.615,7.71,21.8,7.71,21.8l10.926,26.722-23.074,6.076Z\" transform=\"translate(928.626 385.523)\" fill=\"#ed9da0\"></path><path d=\"M524.78,648.2l-6.073,21.863s-4.858,35.224,1.215,43.726c4.77,6.678,13.287,14.855,29.083,16.291a19.52,19.52,0,0,0,20.379-13.5A6.084,6.084,0,0,0,569.72,715c0-2.429-3.644-31.58-3.644-31.58L560,653.059l-1.215-8.5Z\" transform=\"translate(395.306 204.948)\" style=\"fill:var(--textSecondary,#090814)\"></path><path d=\"M491.213,480.415s-31.58,60.73-6.073,72.877,31.58,10.931,31.58,14.575-4.858,2.429-2.429,8.5,6.014,105.671,13.3,109.315,42.57,6.073,46.214,0-3.644-103.242-1.215-106.886,9.717-23.078,9.717-23.078l13.361-1.215,31.58,6.073s35.224,38.867,74.091,51.014c0,0,20.648,17,18.219,20.648s-15.932,155.706-12.288,158.135,48.908,3.392,49.335-7.815S782.719,605.52,777.861,595.8,756,542.36,664.9,514.424c0,0-25.507-4.858-25.507-8.5s-2.429-26.721-7.288-27.936-32.794-2.429-32.794-2.429L564.09,486.488l-48.584-8.5Z\" transform=\"translate(386.361 168.679)\" style=\"fill:var(--textSecondary,#090814)\"></path><path d=\"M671.108,735.543s-6.073-6.073-7.288,0-6.073,31.58,2.429,32.794,98.383,8.5,98.383,8.5,6.753.662,10.4-3.285,8.989-10.7,4.179-12.5c-9.717-3.644-37.653-14.575-37.653-14.575s-21.18-19.505-23.609-20.72-10.4.071-16.473,4.93S671.108,735.543,671.108,735.543Z\" transform=\"translate(426.311 222.062)\" style=\"fill:var(--textSecondary,#090814)\"></path><path d=\"M575.978,371.348c-8.806,2.733-23.053-15.921-23.053-15.921s-9.459-33.51-11.889-27.437-56.155,23.924-56.155,23.924,10.932,102.027,6.073,111.744-13.361,48.584-6.073,52.228,41.3,0,52.228,4.858,42.511,4.858,51.014-1.215,10.932-10.931,19.434-7.288c7.238,3.1,24.16-102.952,29.031-134.556a14.386,14.386,0,0,0-5.961-13.98c-10.9-7.645-30.527-20.818-34-19.081C591.768,347.055,584.784,368.615,575.978,371.348Z\" transform=\"translate(387.833 136.852)\" fill=\"#e6e6e6\"></path><path d=\"M605.712,359.557h0a14.4,14.4,0,0,1,10.823,12.384l9.825,88.429s-24.292,52.228-36.438,17S605.712,359.557,605.712,359.557Z\" transform=\"translate(410.328 143.784)\" fill=\"#e6e6e6\"></path><path d=\"M603.831,450.844l26.721-7.288s4.858,34.009,9.717,34.009-17,19.434-27.936,17-26.721-10.931-27.936-17,10.931-31.58,10.931-31.58Z\" transform=\"translate(409.78 161.811)\" fill=\"#e6e6e6\"></path><path d=\"M564.382,379.844l3.644-7.288s53.443,15.79,64.374,30.365c0,0,26.721-17,41.3-14.575l14.575,2.429-44.941,40.082L586.245,426Z\" transform=\"translate(405.503 146.574)\" fill=\"#f2f2f2\"></path><path d=\"M571.181,372.557l-49.8,69.233,71.662,35.224s6.7,3.644,11.852,0L652.56,455.15,697.5,390.776,652.56,413.853S647.7,404.137,637.984,409Z\" transform=\"translate(396.275 146.574)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M626.455,485.747l9.717-25.507s21.863-27.936,9.717-41.3-25.507,38.867-25.507,38.867Z\" transform=\"translate(417.521 156.06)\" fill=\"#ed9da0\"></path><path d=\"M533.079,479.512l21.2-17.189s32.928-13.2,29.125-30.848S541.842,452.3,541.842,452.3Z\" transform=\"translate(398.785 158.224)\" fill=\"#ed9da0\"></path><path d=\"M494.263,349.986l-4.858-2.429s-19.434,3.644-23.078,34.009-15.79,131.178,15.79,134.822,74.091-4.858,74.091-4.858,8.5-46.155,0-46.155-52.228,6.073-51.014,0S528.272,358.488,494.263,349.986Z\" transform=\"translate(383.311 141.209)\" fill=\"#e6e6e6\"></path><path d=\"M338,356.741l13.394-20.528,8.469,33.889L338,379.819Z\" transform=\"translate(688.364 271.098)\" fill=\"#e6e6e6\"></path><circle cx=\"32.794\" cy=\"32.794\" r=\"32.794\" transform=\"translate(718.429 269.528)\" fill=\"#f2f2f2\"></circle><rect width=\"77.735\" height=\"77.735\" transform=\"translate(712.355 546.459)\" fill=\"#f2f2f2\"></rect><path d=\"M378.953,0l19.675,34.078L418.3,68.157H339.6l19.674-34.078Z\" transform=\"translate(688.708 198.943)\" fill=\"#f2f2f2\"></path><path d=\"M953.592,290.656q-.706,21.809-10.622,34.961t-23.565,13.155q-11.116,0-19.485-12.873t-8.371-39.6q0-5.909.281-11.255t.7-10.129l4.924-46.286h-32.5q-8.441,87.789-13.858,104.461t-18.36,16.672a15.523,15.523,0,0,1-10.411-4.361,14.653,14.653,0,0,1-4.924-11.537q0-6.469,10.2-18.078t11.325-21.173l8.441-65.983H833.726a24.183,24.183,0,0,0-11.044,2.743,20.837,20.837,0,0,0-7.949,6.4l-6.05,9h-4.924q6.892-21.383,16.953-32.147t23.143-10.763H951.341v24.761h-36.3q-1.689,16.883-2.6,33.765t-.914,33.906q0,11.538,5.346,18.712t13.365,7.175q4.923,0,10.341-4.01a14.54,14.54,0,0,0,6.12-10.481q.422-3.093.633-4.854t.211-2.181Z\" transform=\"translate(448.373 108.46)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M25.339,76.155a41.463,41.463,0,0,1-21.12-19.5c-6.575-13.34-7.3-36.064,11.372-41.583,0,0-3.275-14.853,6.436-12.509,0,0,2.327-4.2,13.821-1.718,0,0,42.471-4.947,50.009,9.037,0,0,22.794,4.671,10.656,22.011,0,0-.628,3.374-4.959,3.311l2.164-2.83-6.6,2.83s-9.173-14.61-17.83-6.532c0,0-16.557-.7-24.477-2.147,0,0,1.59,21.269-13.61,25.411S25.339,76.155,25.339,76.155Z\" transform=\"translate(920.777 367.131) rotate(8)\" style=\"fill:var(--textSecondary,#090814)\"></path></g></svg></div><span class=\"t-klein\" style=\"font-weight:600;color:var(--textPrimary)\">Formulas</span></div><div role=\"link\" aria-label=\"Tests\" style=\"min-height:48px;display:flex;flex-direction:column;align-items:center;gap:6px\"><div style=\"height:64px;width:100%;display:flex;align-items:center;justify-content:center\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 960 696.493\" role=\"img\" aria-hidden=\"true\" style=\"height:64px;width:auto;max-width:100%;display:block\"><g transform=\"translate(-455.43 -224.387)\"><path d=\"M85.665,167.974a84.229,84.229,0,0,1-17.713-1.491,83.192,83.192,0,0,1-53.559-35.244A84.164,84.164,0,0,1,99.92,1.492,83.18,83.18,0,0,1,153.543,36.7a84.174,84.174,0,0,1,.531,93.462A85.311,85.311,0,0,1,148.9,137.2l20.636,43.759-74.481,19.8Z\" transform=\"translate(927.301 335.338)\" fill=\"#ed9da0\"></path><path d=\"M826.1,478.572l-4.23,249.907-341.667-8.434,54.564-103.621c-.392-3.325,23.949-26.664,23.809-30.122-.42-10.133,8.375-19.519,9.8-30.122,1.926-14.455-22.953-18.357-28.49-49.789-2.767-15.707,9.712-66.3,12.319-72.083,3.275-7.619,17.565-14.562,22.614-21.426,4.37-5.687,8.851-9.519,36.973-50.69l87.91-22.4,9.719-2.482L732.1,356.347l16.036,13.471,15.083,2.253c2.255.337,4.44.735,6.54,1.193A71.189,71.189,0,0,1,797.294,385C823.623,404.242,826.69,440.437,826.1,478.572Z\" transform=\"translate(393.112 159.095)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M1078.812,660.4q-14.453,18.129-30.629,34.76l-36.945.028-198.689.224-35.769.042L753,695.485l-35.377.028-27.212.028-50.264.056-29.649.042-62.434.056-29.8.042-82.588.084-51.875.056-13.921.014q-4.643-4.748-9.145-9.635-11.218-12.164-21.582-25.083l28.822-.028,19.635-.014,45.46-.056,87.727-.084,29.649-.028,11.988-.014h.042l9.411-.014,4.215-.014,10.8-.014h4.566l32.016-.028,69.059-.084,30.391-.028,29.1-.028,27.282-.028,39.144-.042,209.067-.21Z\" transform=\"translate(336.619 224.989)\" fill=\"#e6e6e6\"></path><path d=\"M665.13,691.256a11.288,11.288,0,0,1-4.837-1.093l-269.625,6.879a11.316,11.316,0,0,1,1.611-21.07l176.4-52.6a11.316,11.316,0,0,1,5.624-.215l272.854,33.257a11.315,11.315,0,0,1,1.3,21.757l-179.627,12.46a11.326,11.326,0,0,1-3.695.623Z\" transform=\"translate(354.659 209.971)\" style=\"fill:var(--textSecondary,#3f3d56)\"></path><path d=\"M656.524,664.943a7.12,7.12,0,0,1-3.478-.9l-218.974,10.23a7.1,7.1,0,0,1,1.8-13.089l79.274-19.241a7.118,7.118,0,0,1,3.75.11l203.568-.245a7.1,7.1,0,0,1,.048,13.561l-63.866,9.255A7.084,7.084,0,0,1,656.524,664.943Z\" transform=\"translate(373.181 217.514)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><path d=\"M579.528,666.329A30.847,30.847,0,0,0,624.7,652.305l231.777,18.207L843.837,621.35,606.211,610.813a31.014,31.014,0,0,0-26.684,55.516Z\" transform=\"translate(427.129 204.456)\" fill=\"#ed9da0\"></path><path d=\"M676.836,383.935s35.013-23.52,77.028,18.816C782.2,431.3,836.856,603.9,841.388,675.422c.579,9.149-3.41,18.087-11.008,24.662s-18.117,10.193-29.025,9.983l-123.54-1.805L664,643.052l97.536.97Z\" transform=\"translate(466.722 175.16)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M657.2,751.085a31.848,31.848,0,0,1-12.339-2.5l-249.909,5.7a31.757,31.757,0,0,1-19.118-34.428L366.55,500.387a31.71,31.71,0,0,1,33.521-26.713L632.083,483.3a31.846,31.846,0,0,1,29.3,37.174L688.568,724.62A31.9,31.9,0,0,1,657.2,751.085Z\" transform=\"translate(347.592 150.173)\" style=\"fill:var(--textSecondary,#3f3d56)\"></path><g transform=\"translate(455.43 224.387)\"><g transform=\"translate(0 66.449)\"><path d=\"M177.379.453,16.856,0A16.255,16.255,0,0,0,.582,16.188L0,228.746A16.218,16.218,0,0,0,16.166,245l89.045.259,71.5.194a16.223,16.223,0,0,0,16.253-16.188l.043-12.567.56-199.969A16.242,16.242,0,0,0,177.379.453Z\" transform=\"translate(0 30.281) rotate(-9)\" fill=\"#e6e6e6\"></path><path d=\"M153.582.388,15.628,0A15.221,15.221,0,0,0,.388,15.153L0,151.814a67.777,67.777,0,0,0,67.511,67.878l26.211.065,59.256.172a15.206,15.206,0,0,0,15.24-15.153l.043-13.752.474-175.4A15.207,15.207,0,0,0,153.582.388Z\" transform=\"translate(14.324 40.931) rotate(-9)\" fill=\"#fff\"></path></g><g transform=\"translate(25.262 36.661)\"><path d=\"M177.379.453,16.856,0A16.255,16.255,0,0,0,.582,16.188L0,228.746A16.218,16.218,0,0,0,16.166,245l89.045.259,71.5.194a16.223,16.223,0,0,0,16.253-16.188l.043-12.567.56-199.969A16.242,16.242,0,0,0,177.379.453Z\" transform=\"translate(0 30.281) rotate(-9)\" fill=\"#e6e6e6\"></path><path d=\"M153.582.388,15.628,0A15.221,15.221,0,0,0,.388,15.153L0,151.814a67.777,67.777,0,0,0,67.511,67.878l26.211.065,59.256.172a15.206,15.206,0,0,0,15.24-15.153l.043-13.752.474-175.4A15.207,15.207,0,0,0,153.582.388Z\" transform=\"translate(14.324 40.931) rotate(-9)\" fill=\"#fff\"></path></g><g transform=\"translate(53.845 30.281) rotate(-9)\"><path d=\"M177.379.453,16.856,0A16.255,16.255,0,0,0,.582,16.188L0,228.746A16.218,16.218,0,0,0,16.166,245l89.045.259,71.5.194a16.223,16.223,0,0,0,16.253-16.188l.043-12.567.56-199.969A16.242,16.242,0,0,0,177.379.453Z\" transform=\"translate(0 0)\" fill=\"#e6e6e6\"></path><path d=\"M153.582.388,15.628,0A15.221,15.221,0,0,0,.388,15.153L0,151.814a67.777,67.777,0,0,0,67.511,67.878l26.211.065,59.256.172a15.206,15.206,0,0,0,15.24-15.153l.043-13.752.474-175.4A15.207,15.207,0,0,0,153.582.388Z\" transform=\"translate(12.482 12.76)\" fill=\"#fff\"></path><path d=\"M114.017,0H6.456a6.456,6.456,0,0,0,0,12.912H114.017a6.456,6.456,0,1,0,0-12.912Z\" transform=\"translate(36.549 106.527)\" fill=\"#e6e6e6\"></path><path d=\"M30.1,0H6.456a6.456,6.456,0,0,0,0,12.912H30.1A6.456,6.456,0,1,0,30.1,0Z\" transform=\"translate(36.549 71.133)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M114.017,0H6.456a6.456,6.456,0,0,0,0,12.912H114.017a6.456,6.456,0,1,0,0-12.912Z\" transform=\"translate(36.549 163.282)\" fill=\"#e6e6e6\"></path><path d=\"M114.006,0H6.445a6.445,6.445,0,0,0,0,12.89H114.006a6.445,6.445,0,0,0,0-12.89Z\" transform=\"translate(36.558 134.915)\" fill=\"#e6e6e6\"></path><path d=\"M38.188,76.377A38.188,38.188,0,1,1,76.377,38.188,38.188,38.188,0,0,1,38.188,76.377Zm0-73.723A35.535,35.535,0,1,0,73.723,38.188,35.535,35.535,0,0,0,38.188,2.654Z\" transform=\"translate(91.476 17.583)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M32.651,38.827A98.174,98.174,0,0,0,16.532.962a2.016,2.016,0,0,0-3.437,0A104.861,104.861,0,0,0,.017,40.486C-.292,43.023,3.691,43,4,40.486a98.1,98.1,0,0,1,2.61-13.364,2.28,2.28,0,0,0,.445-.136,29.012,29.012,0,0,1,17.136-2.791c.051.008.1,0,.151,0a95.447,95.447,0,0,1,4.473,15.689C29.3,42.4,33.136,41.334,32.651,38.827ZM8.04,22.24A100.757,100.757,0,0,1,14.991,5.818,95.407,95.407,0,0,1,22.678,20.07,33.576,33.576,0,0,0,8.04,22.24Z\" transform=\"translate(113.052 31.736)\" style=\"fill:var(--accent,#6c63ff)\"></path></g></g><path d=\"M209.528,220.6s-1.135,29.573-36.706,33.83l-61.231-16.6s47.323-154.5,23.731-135.4C120.954,114.054,88.051,94.847,64.307,77.9,49.408,67.263,38.16,57.471,38.16,57.471L21.823,96.415S-27.034,83.692,21.457,36.9c0,0,58.009-54.129,127.051-31.278s61.019,214.961,61.019,214.961Z\" transform=\"matrix(0.921, -0.391, 0.391, 0.921, 875.152, 359.603)\" style=\"fill:var(--textSecondary,#090814)\"></path></g></svg></div><span class=\"t-klein\" style=\"font-weight:600;color:var(--textPrimary)\">Tests</span></div><div role=\"link\" aria-label=\"Duel\" style=\"min-height:48px;display:flex;flex-direction:column;align-items:center;gap:6px\"><div style=\"height:64px;width:100%;display:flex;align-items:center;justify-content:center\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 921 647.73602\" role=\"img\" aria-hidden=\"true\" style=\"height:64px;width:auto;max-width:100%;display:block\"><title>playing cards</title><path d=\"M867.30078,771.82324a50.16694,50.16694,0,0,1-13.54492-1.87109L670.73145,720.96289l.5371-1.92578,183.02637,48.98926a48.16143,48.16143,0,0,0,13.00586,1.79687c21.53906,0,40.64258-12.48047,46.45606-33.21386L1044.043,271.99072h-.001l.28418-1.01123a48.28977,48.28977,0,0,0-33.42969-59.4126L716.7041,129.07129a48.29038,48.29038,0,0,0-59.46094,33.4165l-10.22168,36.46-1.92578-.54,10.22168-36.46a50.29063,50.29063,0,0,1,61.92676-34.80224l294.19238,82.4956a50.29149,50.29149,0,0,1,35.0625,60.96143l.00879.00244-.26953.96289L915.68262,737.14941C909.62793,758.74219,889.73242,771.82324,867.30078,771.82324Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><polygon points=\"518.96 84.066 522.31 85.006 532.62 87.896 533.7 84.036 529.84 82.956 533.23 70.866 541.38 63.786 543.55 86.806 537.55 85.116 536.47 88.976 551.87 93.296 552.95 89.436 549.68 88.526 546.54 59.306 562.54 45.396 567.03 46.656 568.11 42.796 552.7 38.476 551.62 42.336 556.7 43.756 536.35 59.746 541.99 39.636 545.85 40.716 546.93 36.856 531.52 32.536 530.44 36.396 536.22 38.016 524.07 81.336 518.29 79.716 518.14 80.236 517.52 82.476 518.96 84.066\" style=\"fill:var(--accent,#6c63ff)\"></polygon><path d=\"M683.25,245.83A116.74372,116.74372,0,0,0,672,251.44c-.67.38-1.34.77-2,1.16V240.23a46.801,46.801,0,0,0-1.87-13.15c.58-.36,1.17-.75,1.75-1.14.53-.35,1.07-.71,1.6-1.07A134.73634,134.73634,0,0,0,683.25,245.83Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><polygon points=\"727.027 611.842 722.542 610.584 721.462 614.435 736.868 618.755 737.948 614.904 732.874 613.481 753.218 597.485 747.576 617.604 743.725 616.524 742.645 620.375 758.051 624.695 759.131 620.844 753.353 619.224 765.503 575.895 771.281 577.515 772.361 573.664 756.955 569.344 755.875 573.195 759.726 574.275 756.335 586.369 748.189 593.449 746.024 570.433 752.023 572.115 753.103 568.264 737.698 563.944 736.618 567.795 739.891 568.713 743.033 597.93 727.027 611.842\" style=\"fill:var(--accent,#6c63ff)\"></polygon><path d=\"M885.31538,661.93431A110.09112,110.09112,0,0,0,905.775,650.43613a169.04888,169.04888,0,0,0,11.77863,20.95862A125.77733,125.77733,0,0,0,897.094,682.89294,135.22416,135.22416,0,0,0,885.31538,661.93431Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M750.397,453.726s-5.05855,32.85439-6.56141,34.51011,10.50007,40.333,10.50007,40.333l38.48867-22.44154s7.48855-41.52013,9.95427-42.90585S750.397,453.726,750.397,453.726Z\" transform=\"translate(-139.5 -125.26398)\" fill=\"#ffb8b8\"></path><path d=\"M750.397,453.726s-5.05855,32.85439-6.56141,34.51011,10.50007,40.333,10.50007,40.333l38.48867-22.44154s7.48855-41.52013,9.95427-42.90585S750.397,453.726,750.397,453.726Z\" transform=\"translate(-139.5 -125.26398)\" opacity=\"0.1\"></path><circle cx=\"640.67419\" cy=\"322.27193\" r=\"38\" fill=\"#ffb8b8\"></circle><path d=\"M763.7042,506.27039l-3.31144-3.00572-14.8847-21.18423s-1.70823-1.12439-3.32823,4.65277l-1.62,5.77716-13.98432,5.42575-30.94282,132.569,82.806,23.22,34.1014-132.72187-16.01721-16.95432-1.77345-8.1795-24.72806,10.09525Z\" transform=\"translate(-139.5 -125.26398)\" fill=\"#fff\"></path><path d=\"M670,644.09l2,.56,128.96,36.16,43.12-142.65s-10.2-8.06-18.18-9.26c0,0-13.4-15.18-19.17-16.8-5.78-1.62-12.17-15.87-12.17-15.87s-6.75,24.07-18.35,39.51-31.8,68.98-31.8,68.98l-5.7-98.19,6.4-24.69a45.464,45.464,0,0,0-10.06,8.09c-4.51,4.96-16.02,9-16.02,9s-30.32,8.12-35.68,8.7c-5.35.57-7.82,1.96-7.82,1.96L672,533.88l-2,13.76Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><path d=\"M687.6,588.79c-1.2,7.97-13.54,40.86-13.54,40.86L672,631.72l-2,2.01V511.92a5.61755,5.61755,0,0,1,2-1.39,13.71966,13.71966,0,0,1,3.53-.94l3.86,1.08S688.8,580.81,687.6,588.79Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><path d=\"M775.44293,631.07505s18.92574-34.1587,33.25151-25.98726-8.64,30.81153-8.64,30.81153Z\" transform=\"translate(-139.5 -125.26398)\" fill=\"#ffb8b8\"></path><path d=\"M716.86131,617.76364s-36.31869-11.22286-37.12869-8.33428-10.7543,19.83293-7.86572,20.64293,25.30437,6.05714,25.03437,7.02,10.74432,6.12858,10.74432,6.12858Z\" transform=\"translate(-139.5 -125.26398)\" fill=\"#ffb8b8\"></path><polygon points=\"648.165 384.489 625.05 385.398 620.236 384.048 600.963 371.253 594.58 390.355 618.886 388.862 623.7 390.212 643.686 404.125 648.165 384.489\" style=\"fill:var(--accent,#6c63ff)\"></polygon><polygon points=\"586.05 528.176 582.5 535.736 531.5 521.736 530.5 518.826 530.5 502.796 532.5 503.576 534.56 504.386 586.05 528.176\" style=\"fill:var(--textSecondary,#2f2e41)\"></polygon><path d=\"M727.45278,620.73364s-11.97719-5.43572-12.24719-4.47286-16.34288,28.65153-12.49144,29.73153,17.48435,8.01858,17.48435,8.01858Z\" transform=\"translate(-139.5 -125.26398)\" fill=\"#fff\"></path><path d=\"M837.34017,536.26612l6.74,1.89s3.85144,1.08,4.15716,7.39716,5.53292,35.82439,3.06719,37.21011-3.15858.15287-1.77286,2.61859,2.61859,1.77286,1.11573,3.42858S845.696,643.505,834.51886,661.14222s-14.57,26.033-18.42146,24.953L716.267,658.10129s4.44578-39.25765,8.56722-39.14051S796.473,633.85646,796.473,633.85646,822.62726,533.179,837.34017,536.26612Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><path d=\"M757.78487,405.88642l-6.2345-4.47128s18.58634-10.44541,38.42854-3.51981l-4.08748-7.273S801.192,389.46685,810.09806,406.26c4.68172,8.82778,10.06253,19.17007,12.26158,29.73748l7.43484,2.08484-4.84329,5.33591,9.12032,9.25151-10.83473-4.24064a32.524,32.524,0,0,1-5.56145,15.77732l-4.47115,6.23443s-4.43484-23.02763-3.72693-25.55215l-1.76976,6.31126s-5.34963-7.62685-4.28778-11.41359l-5.02557,3.356.05338-7.47333-25.2984.39427,5.37951-4.61825-15.0468-2.17709,7.627-5.34958s-18.70994,3.60324-21.28794,10.36864c-2.57778,6.76535-13.26,13.30046-13.26,13.30046l-2.017-7.37311S736.82762,410.22094,757.78487,405.88642Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><path d=\"M744.72085,419.55721l.29721-1.295c2.88968-12.58007-19.33835-35.97544-19.563-36.21036l-.39466-.41189.15412-.5496c.4398-1.56841,2.20365-2.96129,17.65926.38888,6.01774,1.30459,12.01884,2.89458,14.53112,3.57624-.28052-7.18284-9.18474-16.6997-9.27973-16.80038l-1.12008-1.18683,1.566-.45948c10.26547-3.009,22.28032,6.97086,26.12019,10.50459l6.41856-22.88956,12.70134,18.76039c7.79712-11.67253,19.07562-11.19961,19.56853-11.17245l1.58331.08646L814.2025,363.29c-5.34317,9.77538-6.30593,16.19629-6.36142,19.36186,14.21594-16.889,27.027-15.41792,27.58441-15.34426l1.94137.25634-1.34612,1.42228c-18.61059,19.665-20.802,45.60606-20.82209,45.86566l-.06714.8742ZM727.67,381.4914c3.93,4.25933,20.92405,23.481,19.51633,35.92848l66.10992-3.5964c.54512-4.62771,3.89789-26.64821,19.70494-44.50036-4.30785.38486-14.4698,2.84024-25.17507,16.52141l-1.22716,1.56771-.525-1.92009c-.08251-.30256-1.87214-7.33553,5.55265-21.62269-3.40377.32194-11.32864,2.10388-16.92936,11.45408l-.80644,1.34592-12.01971-17.7533-6.16913,22L774.49206,379.69c-.13508-.13677-13.03108-13.04892-23.75367-11.5094,2.75251,3.205,9.33808,11.6462,8.6167,18.28236l-.12732,1.17377-1.13681-.31878C745.46282,383.77681,731.03938,380.75512,727.67,381.4914Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M840.40847,362.03937a3.58691,3.58691,0,1,1,4.42216-2.48523A3.59071,3.59071,0,0,1,840.40847,362.03937Zm1.39693-4.98167a1.58691,1.58691,0,1,0,1.09951,1.95644A1.58875,1.58875,0,0,0,841.8054,357.0577Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M815.49963,355.05458a3.58692,3.58692,0,1,1,4.42216-2.48524A3.59074,3.59074,0,0,1,815.49963,355.05458Zm1.39693-4.98168a1.58692,1.58692,0,1,0,1.09951,1.95645A1.58875,1.58875,0,0,0,816.89656,350.0729Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M777.63572,351.15424a3.58691,3.58691,0,1,1,4.42216-2.48523A3.59072,3.59072,0,0,1,777.63572,351.15424Zm1.39693-4.98167a1.58691,1.58691,0,1,0,1.09951,1.95644A1.58875,1.58875,0,0,0,779.03265,346.17257Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M717.1894,379.87858a3.58691,3.58691,0,1,1,4.42216-2.48523A3.59071,3.59071,0,0,1,717.1894,379.87858Zm1.39693-4.98167a1.58691,1.58691,0,1,0,1.09951,1.95644A1.58875,1.58875,0,0,0,718.58633,374.89691Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M740.56282,363.5954a3.58692,3.58692,0,1,1,4.42217-2.48523A3.59115,3.59115,0,0,1,740.56282,363.5954Zm1.39694-4.98168a1.58692,1.58692,0,1,0,1.09951,1.95645A1.58886,1.58886,0,0,0,741.95976,358.61372Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><polygon points=\"720.272 575.155 719.31 574.885 530.809 522.027 531.348 520.101 718.887 572.69 837.418 149.994 573.112 75.88 532.799 219.645 530.873 219.105 571.728 73.414 572.689 73.684 839.883 148.609 839.613 149.571 720.272 575.155\" style=\"fill:var(--textSecondary,#2f2e41)\"></polygon><path d=\"M181.134,739.11671c12.42842,23.049,38.806,32.94351,38.806,32.94351s6.22712-27.47543-6.2013-50.52448-38.806-32.94351-38.806-32.94351S168.70559,716.06766,181.134,739.11671Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><path d=\"M189.67653,731.53374c22.43841,13.49969,31.08016,40.3138,31.08016,40.3138s-27.73812,4.92678-50.17653-8.57291S139.5,722.96083,139.5,722.96083,167.23811,718.034,189.67653,731.53374Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M669.88,225.94a49.004,49.004,0,0,0-8.07-15.67,49.78347,49.78347,0,0,0-4.17-4.77A49.1065,49.1065,0,0,0,622.77,191H317.23A49.28,49.28,0,0,0,268,240.23V723.77A49.28,49.28,0,0,0,317.23,773H622.77A49.28,49.28,0,0,0,672,723.77V240.23A48.87057,48.87057,0,0,0,669.88,225.94ZM670,723.77A47.287,47.287,0,0,1,622.77,771H317.23A47.287,47.287,0,0,1,270,723.77V240.23A47.287,47.287,0,0,1,317.23,193H622.77a47.1127,47.1127,0,0,1,34.25,14.74q.735.78,1.44,1.59A47.12039,47.12039,0,0,1,670,240.23Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><path d=\"M316.74192,268.70949c-.05549-.13036-.12411-.24888-.18511-.37428a30.29407,30.29407,0,0,0,3.31465-14.268c0-15.50156-9.68724-26.32821-23.55682-26.32821s-23.55683,10.82665-23.55683,26.32821,9.68724,26.32822,23.55683,26.32822a22.22629,22.22629,0,0,0,17.29565-7.72327c4.441,7.1861,13.026,8.13425,13.4215,8.17389l.46821-4.59553C327.177,276.21579,319.55571,275.324,316.74192,268.70949Zm-20.42728,7.06695c-11.15052,0-18.93784-8.92718-18.93784-21.70923s7.78732-21.70922,18.93784-21.70922,18.93783,8.92718,18.93783,21.70922a26.09216,26.09216,0,0,1-2.11,10.6067c-6.8942-4.18866-19.72068-1.68577-21.46035-1.31911l.95,4.5202c4.7114-.98649,14.08441-1.77779,18.16441.78194A17.66814,17.66814,0,0,1,296.31464,275.77644Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M298,291.382a8.01388,8.01388,0,0,0-11.33333,11.33334L298,314.04863l11.33333-11.33333A8.01388,8.01388,0,0,0,298,291.382Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M623.25808,698.38777c.05549.13036.12411.24888.18511.37428a30.294,30.294,0,0,0-3.31465,14.268c0,15.50157,9.68724,26.32822,23.55682,26.32822s23.55683-10.82665,23.55683-26.32822-9.68724-26.32821-23.55683-26.32821a22.22629,22.22629,0,0,0-17.29565,7.72327c-4.441-7.1861-13.026-8.13425-13.4215-8.17389L612.5,690.84674C612.823,690.88147,620.44429,691.77324,623.25808,698.38777Zm20.42728-7.067c11.15052,0,18.93784,8.92719,18.93784,21.70923s-7.78732,21.70923-18.93784,21.70923-18.93783-8.92718-18.93783-21.70923a26.09214,26.09214,0,0,1,2.11-10.60669c6.8942,4.18866,19.72068,1.68577,21.46035,1.31911l-.95-4.5202c-4.7114.98649-14.08441,1.77779-18.16441-.78194A17.66812,17.66812,0,0,1,643.68536,691.32081Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M642,675.71529A8.01387,8.01387,0,0,0,653.33333,664.382L642,653.04863,630.66667,664.382A8.01387,8.01387,0,0,0,642,675.71529Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M494.64587,465.71115c-13.61413-23.00368-40.54861-24.07575-40.54861-24.07575s-26.24611-3.35633-43.08283,31.67855c-15.69316,32.65539-37.35172,64.18483-3.48685,71.82921l6.117-19.03877,3.78821,20.45619a132.50656,132.50656,0,0,0,14.48952.24764c36.26655-1.1709,70.805.34257,69.69287-12.67139C500.13683,516.83661,507.7454,487.84528,494.64587,465.71115Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><path d=\"M444.42215,544.08708c.06586,2.58925.04615,5.32-1.2405,7.56794-2.55068,4.45626-8.77746,5.12336-12.52288,8.63562-3.93886,3.69364-4.38469,9.68822-4.57241,15.08473-.19626,5.642-.36277,11.469,1.6963,16.7255A40.65962,40.65962,0,0,0,432.533,600.262q3.43009,4.94445,6.92363,9.84448a42.50313,42.50313,0,0,0,4.14572,5.20265c4.17109,4.24877,9.89244,6.60062,15.60508,8.27864,3.6909,1.08416,7.67613,1.92868,11.3382.7508a21.70662,21.70662,0,0,0,6.59342-4.05429c2.72367-2.163,5.48919-4.37013,7.46327-7.23368,3.07515-4.46076,3.9263-10.045,4.56372-15.42537a332.8629,332.8629,0,0,0,2.19408-47.95141,11.75257,11.75257,0,0,0-.91547-5.09484c-1.89659-3.70333-6.97627-4.49394-9.65283-7.6795-2.28838-2.72357-2.38171-6.61049-2.36218-10.16775l.0497-9.056a3.79376,3.79376,0,0,0-.44011-2.20632,3.73782,3.73782,0,0,0-2.59772-1.212,87.5709,87.5709,0,0,0-17.03739-1.13982c-4.62344.14128-13.49452-.24571-17.49227,2.3294-3.62874,2.33741.91468,8.79312,1.75522,12.4194A80.91135,80.91135,0,0,1,444.42215,544.08708Z\" transform=\"translate(-139.5 -125.26398)\" fill=\"#a0616a\"></path><circle cx=\"315.53427\" cy=\"366.66826\" r=\"36.60356\" fill=\"#a0616a\"></circle><path d=\"M439.9618,582.5968a53.54739,53.54739,0,0,1-5.70845-11.0871c-1.309-3.956-1.65238-8.37707-.09939-12.24377-3.95536-2.29515-9.32568-.43652-12.20618,3.11528s-3.76206,8.31289-4.016,12.87886.01525,9.19913-.9784,13.6629c-2.19838,9.87576-10.35606,17.99484-10.9627,28.09413-.59681,9.93558,6.21635,18.59093,9.56811,27.9631a46.63021,46.63021,0,0,1,2.49807,18.20141c-.1086,1.99268-.23372,4.2638,1.17235,5.68a6.47817,6.47817,0,0,0,2.53351,1.365c16.17372,5.69027,33.6437,6.18254,50.78371,6.61669l28.30959.71707a9.02291,9.02291,0,0,0,4.99916-.83715c2.53981-1.55726,2.87974-5.04794,2.92292-8.02684.37188-25.65639-.71942-51.30895-1.81047-76.94483-.39546-9.29189-.79763-18.63767-2.768-27.72684-.50174-2.31446-1.32449-4.88824-3.46107-5.90975-1.8085-.86464-3.95412-.30484-5.83455.38962a46.4571,46.4571,0,0,0-21.758,16.749c-5.80877,8.26728-8.66611,18.18454-14.351,26.51457-4.12547,6.045-6.51143.77665-9.26012-3.675Q444.7501,590.34382,439.9618,582.5968Z\" transform=\"translate(-139.5 -125.26398)\" fill=\"#fff\"></path><path d=\"M435.58,559.8986c-.72.51-1.43,1.05-2.11005,1.62a40.84911,40.84911,0,0,0-6.8,7.16,56.72208,56.72208,0,0,0-7.7,14.53c-3.32,9.1-4.76,18.76-6.13995,28.34a68.39774,68.39774,0,0,0-.97,10.68c.21,13.16,7.99,25.35,8,38.52,0,.5-.01.99-.04,1.49a43.26068,43.26068,0,0,1-.76,6.42c-.57,3.09-1.39,6.14-2.2,9.18-2.04,7.62-4.24,15.52-8.22,22.21-.4.68-.83,1.35-1.27,2h-28c.22-.67.45-1.33.67-2q7.155-21.195,14.30005-42.38c1.46-4.32,2.92-8.66,3.95-13.1a124.07457,124.07457,0,0,0,2.41-16.63q1.65-17.385,2.17-34.84c.13-4.18.22-8.45,1.57-12.41a40.59828,40.59828,0,0,1,4.98-9.08q4.335-6.52506,8.67005-13.05c1.61-2.42,3.3-4.91,5.78-6.42,2.07-1.27,4.53-1.73,6.71-2.8a34.31183,34.31183,0,0,0,3.94-2.61c3.26-2.31,7.09-4.74,9.9-2.38a5.51383,5.51383,0,0,1,1.16,1.33,6.69111,6.69111,0,0,1,.43.77C448.71,552.28862,439.21,557.3286,435.58,559.8986Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><path d=\"M527.82,702.04863H398.14c.7-.64,1.39-1.31,2.06-2,.1-.1.19-.2.29-.3,4.96-5.15,6.09-11.48,8.58-18.18005q2.805-7.575,5.61-15.14a7.83143,7.83143,0,0,1,1.43-2.69,4.43654,4.43654,0,0,1,1.97-1.18,7.642,7.642,0,0,1,1.74-.32,19.40735,19.40735,0,0,1,2.53,0q34.905,1.8,69.76,4.39,4.5.34506,9,.69c2.45,1.82,4.87,3.75,7.18,5.79,7.51,6.6,14.02,14.37,17.75,23.55.45,1.11.86,2.24,1.2,3.39C527.46,700.7086,527.65,701.37859,527.82,702.04863Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><polygon points=\"349.127 338.23 322.517 324.291 285.77 329.993 278.167 363.573 297.093 362.845 302.38 350.508 302.38 362.641 311.113 362.305 316.181 342.665 319.349 363.573 350.394 362.939 349.127 338.23\" style=\"fill:var(--textSecondary,#2f2e41)\"></polygon><path d=\"M527.82,702.04863H498.54c-.21-.66-.41-1.33-.6-2a157.25975,157.25975,0,0,1-4.54-22.68c-.31-2.19-.58-4.39-.83-6.58-.16-1.39-.31-2.77-.46-4.16-1.68-15.44-2.97-31.03-7.69-45.81-.57-1.79-1.19-3.57-1.79-5.35a63.09619,63.09619,0,0,1-2.6-9.41c-1.28-7.32-.32-14.9-1.64-22.21-.74-4.08-2.21-7.67-3.1-11.41a23.10828,23.10828,0,0,1-.66-6.91,14.88177,14.88177,0,0,1,7.79-3.86c1.01-.17,2.15-.3,2.76-1.11a3.464,3.464,0,0,0,.46-2.04,97.95682,97.95682,0,0,0-.81-14.11c-.2-1.64-.45-3.28-.75-4.91-.01-.08-.03-.15-.04-.23,2.44-1.06,5.19-1.07,7.84-1.06,2.89.01,5.77.01,8.65.02q7.995.03,15.99.05c4.96.01,10.09.06,14.6,2.11,4.66,2.13,8.2,6.24,10.54,10.8s3.61,9.58,4.76,14.57a19.51973,19.51973,0,0,1,.5,4.21c.22,11.26-8.18,22.6-9.02,34.11-.27,3.73.04,7.49-.3,11.22-.34,3.74-1.34,7.4-1.52,11.14-.01.19-.02.39-.02.58-.11,4.87,1.31,9.64,2.95,14.23,2.54,7.13,5.63,14.04,8.82,20.91,3.08,6.65,6.24,13.27,9.08,20.01a34.26306,34.26306,0,0,1,2.95,9.89,13.72406,13.72406,0,0,1-1.51,7.99,9.3757,9.3757,0,0,1-1.19,1.69l-.02.02c-.09.1-.18.2-.27.29H527.82Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><path d=\"M555.71,691.78862a11.082,11.082,0,0,1-1.07,3.83c-.05.12-.1.23-.15.35-.58,1.37-1.17,2.72-1.78,4.08-.3.66-.6,1.33-.91,2H535.24a18.53555,18.53555,0,0,0,1.66-2c2.54-3.53,4.01-7.82,6.6-11.63a8.9538,8.9538,0,0,1,1.21-1.44C548.86,682.9586,555.97,683.77861,555.71,691.78862Z\" transform=\"translate(-139.5 -125.26398)\" fill=\"#ffb8b8\"></path><path d=\"M566.49,702.04863a19.61817,19.61817,0,0,0,.53-2c.12-.53.22-1.05.3-1.58.53-3.49.52-7.06,1.35-10.49,1.17-4.91,4.68-10.72,1.79-14.85a15.69052,15.69052,0,0,0,6.21-2.78c1.72-1.5,2.72-4.1,1.68-6.14-1.03-2.01-3.82-3.34-3.44-5.57a5.313,5.313,0,0,1,.98-1.94,14.52982,14.52982,0,0,0-.25-15.94c-.91-1.3-2.03-2.44-2.86-3.8a22.66345,22.66345,0,0,1-2.07-5.27,98.1662,98.1662,0,0,0-12.63-26.18,17.37178,17.37178,0,0,1-2.79-5.16,21.30405,21.30405,0,0,1-.22-6.13c.2-8.08-2.82-15.97-7.17-22.77-.32-.5-.65-.99-.98-1.48-4.2-6.19-9.41-11.62-14.6-17.01-2.14,1-4.03,1.65-5.14,3.73a11.086,11.086,0,0,0-.99,3.72c-1.42,9.9-2.65,19.86-3.61,29.81-.48,5.03-.97,10.1-.4,15.12s2.28,10.05,5.68,13.78c2.13,2.34,4.83,4.08,7.14,6.24q.555.525,1.08,1.08a35.40951,35.40951,0,0,1,4.41,5.79,49.92056,49.92056,0,0,1,7.34,29.93,48.64077,48.64077,0,0,1-.75,5.64,23.32684,23.32684,0,0,1-2.66,7.6c-1.05,1.73-2.43,3.24-3.38,5.03s-1.4,4.02-.46,5.81a11.83106,11.83106,0,0,1,4.13.74,17.52948,17.52948,0,0,1,7.8,5.95,25.93811,25.93811,0,0,1,1.98,3.04,37.44769,37.44769,0,0,1,1.98,4.08c.24.55.47,1.12.69,1.69a1.65873,1.65873,0,0,1,.12.31Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><polygon points=\"345.231 402.805 324.027 412.053 319.051 412.545 296.446 407.631 297.443 427.746 319.543 417.521 324.519 417.029 348.195 422.725 345.231 402.805\" style=\"fill:var(--accent,#6c63ff)\"></polygon><path d=\"M527.24,700.04863c.22.66.41,1.33.58,2h7.42a18.53555,18.53555,0,0,0,1.66-2Zm-195.99-439v441h276.5v-441Zm274.5,439H333.25v-437h272.5Zm-78.51,0c.22.66.41,1.33.58,2h7.42a18.53555,18.53555,0,0,0,1.66-2Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><path d=\"M422.10107,453.98173l.17139-.85986c.05078-.25537,4.94483-25.82471-7.665-49.78418l-.91211-1.73291,1.93848.27735c.55664.07959,13.28906,2.12207,22.417,22.22216.80127-3.063,1.60791-9.50537-.89746-20.36035l-.35644-1.54541,1.54785.34424c.48193.10693,11.46923,2.69678,15.82519,16.041l17.29492-14.63428V427.722c4.65137-2.36572,18.91455-8.731,27.98633-3.062l1.38379.86523-1.39892.84033c-.11866.07129-11.26172,6.83057-13.4712,13.6709,2.603.022,8.81055.11133,14.957.48,15.78613.94727,17.10839,2.76465,17.10839,4.39356v.5708l-.49121.29c-.27978.16552-27.999,16.69043-28.61328,29.58349l-.06348,1.32715Zm62.59229-11.95214H483.5127l.19433-1.16455c1.09717-6.58448,9.71729-12.93409,13.23291-15.27686-9.90869-4.37744-25.812,4.57324-25.979,4.66846l-1.4961.854V408.262l-16.3667,13.84863-.41308-1.51367c-2.86817-10.51514-10.01758-14.37061-13.208-15.59961,3.2915,15.76123-.33057,22.0498-.4917,22.31885l-1.02392,1.707-.7583-1.84082c-6.61377-16.06348-15.73536-21.17139-19.7793-22.70508,10.3999,21.457,7.68262,43.56494,6.958,48.168l62.68359,21.3125c2.00537-12.36524,23.55811-26.28467,28.49219-29.32471C512.51221,443.01445,497.80859,442.02959,484.69336,442.02959Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M408.67139,391.87724a3.58691,3.58691,0,1,1,3.58691,3.58692A3.59072,3.59072,0,0,1,408.67139,391.87724Zm2,0a1.58691,1.58691,0,1,0,1.58691-1.58691A1.58875,1.58875,0,0,0,410.67139,391.87724Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M434.541,391.87724a3.58691,3.58691,0,1,1,3.58691,3.58692A3.59072,3.59072,0,0,1,434.541,391.87724Zm2,0a1.58691,1.58691,0,1,0,1.58691-1.58691A1.58875,1.58875,0,0,0,436.541,391.87724Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M472.05176,398.345a3.58692,3.58692,0,1,1,3.58691,3.58691A3.59072,3.59072,0,0,1,472.05176,398.345Zm2,0a1.58692,1.58692,0,1,0,1.58691-1.58692A1.58874,1.58874,0,0,0,474.05176,398.345Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M522.49756,442.323a3.58692,3.58692,0,1,1,3.58691,3.58692A3.59073,3.59073,0,0,1,522.49756,442.323Zm2,0a1.58692,1.58692,0,1,0,1.58691-1.58691A1.58875,1.58875,0,0,0,524.49756,442.323Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M504.38867,420.33379a3.58716,3.58716,0,1,1,3.58692,3.58691A3.59073,3.59073,0,0,1,504.38867,420.33379Zm2,0a1.58716,1.58716,0,1,0,1.58692-1.58692A1.58875,1.58875,0,0,0,506.38867,420.33379Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><rect x=\"12\" y=\"645.28465\" width=\"909\" height=\"2\" style=\"fill:var(--textSecondary,#3f3d56)\"></rect></svg></div><span class=\"t-klein\" style=\"font-weight:600;color:var(--textPrimary)\">Duel</span></div></div>\n<div role=\"link\" aria-label=\"Streak: 3 days in a row, opens progress\" style=\"width:380px;height:44px;box-sizing:border-box;padding:0;display:flex;align-items:center;gap:8px\">\n<span style=\"width:24px;height:36px;flex:none;color:var(--warning);display:flex;align-items:center;justify-content:center\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\"></path></svg></span>\n<span class=\"t-klein-betont\" style=\"flex:1;min-width:0;font-weight:600;white-space:nowrap\"><span class=\"t-ziffern\" style=\"color:var(--warningText)\">3</span> days in a row</span>\n<div aria-label=\"Learned Mon, Tue, Wed. Today Wed.\" style=\"display:flex;gap:0\">\n<div style=\"width:20px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:10px;height:10px;border-radius:var(--radius-full);background:var(--accent)\"></span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">Mo</span></div>\n<div style=\"width:20px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:10px;height:10px;border-radius:var(--radius-full);background:var(--accent)\"></span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">Tu</span></div>\n<div style=\"width:20px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:10px;height:10px;border-radius:var(--radius-full);background:var(--accent);outline:2px solid var(--accent);outline-offset:2px\"></span><span class=\"t-meta\" style=\"font-weight:600;color:var(--textPrimary)\">We</span></div>\n<div style=\"width:20px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:10px;height:10px;box-sizing:border-box;border-radius:var(--radius-full);border:1.5px solid var(--inputBorder)\"></span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">Th</span></div>\n<div style=\"width:20px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:10px;height:10px;box-sizing:border-box;border-radius:var(--radius-full);border:1.5px solid var(--inputBorder)\"></span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">Fr</span></div>\n<div style=\"width:20px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:10px;height:10px;box-sizing:border-box;border-radius:var(--radius-full);border:1.5px solid var(--inputBorder)\"></span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">Sa</span></div>\n<div style=\"width:20px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:10px;height:10px;box-sizing:border-box;border-radius:var(--radius-full);border:1.5px solid var(--inputBorder)\"></span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">Su</span></div>\n</div>\n</div>\n<div style=\"position:relative;width:380px;height:112px;overflow:hidden;box-sizing:border-box;background:var(--surface);border:1px solid var(--accentBorder);border-radius:var(--radius-card)\">\n<div class=\"bayati-karo\" style=\"box-sizing:border-box;height:64px;padding:12px 80px 0 16px;display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--divider)\"><span class=\"t-beschriftung\" style=\"color:var(--accentText)\">Pick up where you left off</span><span class=\"t-kartentitel\" style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis\">7.01.03 Ordering and comparing</span></div>\n<div style=\"padding:9px 80px 0 16px\"><span class=\"t-klein t-ziffern\" style=\"color:var(--textSecondary)\">Step 3 of 9 · approx. 4 min</span></div>\n<div style=\"position:absolute;right:16px;top:31px;width:48px;height:48px;box-sizing:border-box;border-radius:var(--radius-full);background:var(--accentTint);border:1px solid var(--accentBorder);color:var(--textPrimary);display:flex;align-items:center;justify-content:center\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 4l13 8-13 8z\"></path></svg></div>\n<div style=\"position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--glassLight)\"><div style=\"width:33%;height:100%;background:var(--accent);border-radius:0 var(--radius-full) var(--radius-full) 0\"></div></div>\n</div>\n<div style=\"margin-top:16px;display:flex;align-items:baseline;justify-content:space-between\"><span class=\"t-abschnitt\">Chapters</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">6 chapters</span></div>\n\n<div style=\"display:flex;flex-direction:column;gap:8px\">\n<div style=\"position:relative;overflow:hidden;box-sizing:border-box;padding:10px 16px 14px;display:flex;align-items:center;gap:12px;background:var(--accentTint);border:1px solid var(--accentBorder);border-radius:var(--radius-card)\"><span style=\"display:flex;flex:none;color:var(--accent)\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 3v14\"></path><path d=\"M5 10h14\"></path><path d=\"M5 21h14\"></path></svg></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-abschnitt\">Rational numbers</span><span class=\"t-meta\" style=\"color:var(--accentText)\">7.01</span></div><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">4/15</span><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--textSecondary)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"></path></svg><div style=\"position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--glassLight)\"><div style=\"width:27%;height:100%;background:var(--accent)\"></div></div></div>\n<div style=\"box-sizing:border-box;padding:10px 16px 0;display:flex;flex-direction:column;gap:8px\"><div style=\"display:flex;align-items:center;gap:12px\"><span style=\"display:flex;flex:none;color:var(--textSecondary)\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 21s-4-3-4-9 4-9 4-9\"></path><path d=\"M16 3s4 3 4 9-4 9-4 9\"></path><path d=\"M15 9l-6 6\"></path><path d=\"M9 9l6 6\"></path></svg></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-abschnitt\">Terms and variables</span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">7.02</span></div><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">1/13</span><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"></path></svg></div><div style=\"margin:0 -16px;height:4px;border-radius:var(--radius-full);background:var(--glassLight);overflow:hidden\"><div style=\"width:8%;height:100%;background:var(--accent)\"></div></div></div>\n<div style=\"box-sizing:border-box;padding:10px 16px 0;display:flex;flex-direction:column;gap:8px\"><div style=\"display:flex;align-items:center;gap:12px\"><span style=\"display:flex;flex:none;color:var(--textSecondary)\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 9h14\"></path><path d=\"M5 15h14\"></path></svg></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-abschnitt\">Equations</span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">7.03</span></div><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">0/12</span><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"></path></svg></div><div style=\"margin:0 -16px;height:4px;border-radius:var(--radius-full);background:var(--glassLight)\"></div></div>\n<div style=\"box-sizing:border-box;padding:10px 16px 0;display:flex;flex-direction:column;gap:8px\"><div style=\"display:flex;align-items:center;gap:12px\"><span style=\"display:flex;flex:none;color:var(--textSecondary)\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m16 3 4 4-4 4\"></path><path d=\"M20 7H4\"></path><path d=\"m8 21-4-4 4-4\"></path><path d=\"M4 17h16\"></path></svg></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-abschnitt\">Relations and proportionality</span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">7.04</span></div><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">0/14</span><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"></path></svg></div><div style=\"margin:0 -16px;height:4px;border-radius:var(--radius-full);background:var(--glassLight)\"></div></div>\n<div style=\"box-sizing:border-box;padding:10px 16px 0;display:flex;flex-direction:column;gap:8px\"><div style=\"display:flex;align-items:center;gap:12px\"><span style=\"display:flex;flex:none;color:var(--textSecondary)\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 5 5 19\"></path><circle cx=\"6.5\" cy=\"6.5\" r=\"2.5\"></circle><circle cx=\"17.5\" cy=\"17.5\" r=\"2.5\"></circle></svg></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-abschnitt\">Percentages and interest</span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">7.05</span></div><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">0/14</span><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"></path></svg></div><div style=\"margin:0 -16px;height:4px;border-radius:var(--radius-full);background:var(--glassLight)\"></div></div>\n<div style=\"box-sizing:border-box;padding:10px 16px 0;display:flex;flex-direction:column;gap:8px\"><div style=\"display:flex;align-items:center;gap:12px\"><span style=\"display:flex;flex:none;color:var(--textSecondary)\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 20h16L4 4z\"></path><path d=\"M4 14a6 6 0 0 1 6 6\"></path></svg></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-abschnitt\">Angles and symmetry</span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">7.06</span></div><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">0/15</span><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"></path></svg></div><div style=\"margin:0 -16px;height:4px;border-radius:var(--radius-full);background:var(--glassLight)\"></div></div>\n</div>\n</div></div>\n<div aria-label=\"Right column, scrolls on its own\" style=\"position:relative;flex:1;min-width:0;height:724px;overflow:hidden;box-sizing:border-box;padding:20px 0 24px;border-left:1px solid var(--divider);padding-left:40px\"><section aria-label=\"Path 7.01\" style=\"flex:1;min-width:0;display:flex;flex-direction:column;gap:24px\">\n<div style=\"display:flex;flex-direction:column;gap:2px\"><span class=\"t-meta\" style=\"color:var(--accentText)\">7.01</span><h2 class=\"t-titel\" style=\"margin:0\">Rational numbers</h2></div>\n<div style=\"display:flex;flex-direction:column;gap:12px;padding:4px 0\"><div class=\"t-klein-betont t-ziffern\" style=\"font-weight:600\">4 of 15 done</div><div style=\"height:6px;border-radius:var(--radius-full);background:var(--surfaceLight);overflow:hidden\"><div style=\"width:27%;height:100%;border-radius:var(--radius-full);background:var(--accent)\"></div></div></div>\n<div role=\"list\" style=\"display:flex;flex-direction:column\">\n<div style=\"position:relative;min-height:48px;box-sizing:border-box;padding:16px 12px 8px 60px;display:flex;align-items:flex-end;gap:12px\"><span class=\"t-beschriftung\" style=\"flex:1;min-width:0;color:var(--textSecondary)\">Understanding numbers</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">2 of 4</span></div>\n<div role=\"listitem\" style=\"position:relative;min-height:64px;box-sizing:border-box;padding:10px 12px;display:flex;align-items:center;gap:12px\"><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--accent)\"></span><span style=\"position:relative;width:36px;flex:none;display:flex;justify-content:center\"><span style=\"width:32px;height:32px;border-radius:var(--radius-full);background:var(--success);color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-kartentitel\">Negative numbers in everyday life</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">7.01.01 · <span style=\"color:var(--successText)\">done</span></span></div></div>\n<div role=\"listitem\" style=\"position:relative;min-height:64px;box-sizing:border-box;padding:10px 12px;display:flex;align-items:center;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--accent)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--accent)\"></span><span style=\"position:relative;width:36px;flex:none;display:flex;justify-content:center\"><span style=\"width:32px;height:32px;border-radius:var(--radius-full);background:var(--success);color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-kartentitel\">The number line</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">7.01.02 · <span style=\"color:var(--successText)\">done</span></span></div></div>\n<div role=\"listitem\" aria-current=\"step\" style=\"position:relative;min-height:64px;box-sizing:border-box;padding:10px 12px;display:flex;align-items:center;gap:12px;background:var(--accentTint);border:1px solid var(--accentBorder);border-radius:var(--radius-card)\"><span style=\"position:absolute;left:28.5px;top:-1px;height:calc(50% + 1px);width:3px;background:var(--accent)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:-1px;width:3px;background:var(--surfaceLight)\"></span><span style=\"position:relative;width:36px;flex:none;display:flex;justify-content:center\"><span style=\"width:36px;height:36px;border-radius:var(--radius-full);background:var(--accent);display:flex;align-items:center;justify-content:center\"><span style=\"width:12px;height:12px;border-radius:var(--radius-full);background:var(--background)\"></span></span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-kartentitel\">Ordering and comparing</span><span class=\"t-meta t-ziffern\" style=\"color:var(--accentText)\">now · step 3 of 9 · approx. 4 min</span></div></div>\n<div role=\"listitem\" style=\"position:relative;min-height:64px;box-sizing:border-box;padding:10px 12px;display:flex;align-items:center;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--surfaceLight)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--surfaceLight)\"></span><span style=\"position:relative;width:36px;flex:none;display:flex;justify-content:center\"><span class=\"t-meta t-ziffern\" style=\"width:32px;height:32px;border-radius:var(--radius-full);background:var(--surfaceLight);color:var(--textSecondary);font-weight:600;display:flex;align-items:center;justify-content:center\">4</span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-kartentitel\" style=\"color:var(--textSecondary)\">Absolute value and opposite number</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">7.01.04</span></div></div>\n<div style=\"position:relative;min-height:48px;box-sizing:border-box;padding:16px 12px 8px 60px;display:flex;align-items:flex-end;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--surfaceLight)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--surfaceLight)\"></span><span class=\"t-beschriftung\" style=\"flex:1;min-width:0;color:var(--textSecondary)\">Plus and minus</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">2 of 3</span></div>\n<div role=\"listitem\" style=\"position:relative;min-height:64px;box-sizing:border-box;padding:10px 12px;display:flex;align-items:center;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--surfaceLight)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--surfaceLight)\"></span><span style=\"position:relative;width:36px;flex:none;display:flex;justify-content:center\"><span class=\"t-meta t-ziffern\" style=\"width:32px;height:32px;border-radius:var(--radius-full);background:var(--surfaceLight);color:var(--textSecondary);font-weight:600;display:flex;align-items:center;justify-content:center\">5</span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-kartentitel\" style=\"color:var(--textSecondary)\">Adding integers</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">7.01.05</span></div></div>\n<div role=\"listitem\" style=\"position:relative;min-height:64px;box-sizing:border-box;padding:10px 12px;display:flex;align-items:center;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--surfaceLight)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--surfaceLight)\"></span><span style=\"position:relative;width:36px;flex:none;display:flex;justify-content:center\"><span style=\"width:32px;height:32px;border-radius:var(--radius-full);background:var(--success);color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-kartentitel\">Subtracting rational numbers</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">7.01.06 · <span style=\"color:var(--successText)\">done</span></span></div></div>\n<div role=\"listitem\" style=\"position:relative;min-height:64px;box-sizing:border-box;padding:10px 12px;display:flex;align-items:center;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--surfaceLight)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--surfaceLight)\"></span><span style=\"position:relative;width:36px;flex:none;display:flex;justify-content:center\"><span style=\"width:32px;height:32px;border-radius:var(--radius-full);background:var(--success);color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-kartentitel\">Mixed addition and subtraction</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">7.01.07 · <span style=\"color:var(--successText)\">done</span></span></div></div>\n<div style=\"position:relative;min-height:48px;box-sizing:border-box;padding:16px 12px 8px 60px;display:flex;align-items:flex-end;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--surfaceLight)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--surfaceLight)\"></span><span class=\"t-beschriftung\" style=\"flex:1;min-width:0;color:var(--textSecondary)\">Times and divided by</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">0 of 4</span></div>\n<div role=\"listitem\" style=\"position:relative;min-height:64px;box-sizing:border-box;padding:10px 12px;display:flex;align-items:center;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--surfaceLight)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--surfaceLight)\"></span><span style=\"position:relative;width:36px;flex:none;display:flex;justify-content:center\"><span class=\"t-meta t-ziffern\" style=\"width:32px;height:32px;border-radius:var(--radius-full);background:var(--surfaceLight);color:var(--textSecondary);font-weight:600;display:flex;align-items:center;justify-content:center\">8</span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-kartentitel\" style=\"color:var(--textSecondary)\">Multiplying integers</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">7.01.08</span></div></div>\n<div role=\"listitem\" style=\"position:relative;min-height:64px;box-sizing:border-box;padding:10px 12px;display:flex;align-items:center;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--surfaceLight)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--surfaceLight)\"></span><span style=\"position:relative;width:36px;flex:none;display:flex;justify-content:center\"><span class=\"t-meta t-ziffern\" style=\"width:32px;height:32px;border-radius:var(--radius-full);background:var(--surfaceLight);color:var(--textSecondary);font-weight:600;display:flex;align-items:center;justify-content:center\">9</span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-kartentitel\" style=\"color:var(--textSecondary)\">Dividing integers</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">7.01.09</span></div></div>\n<div role=\"listitem\" style=\"position:relative;min-height:64px;box-sizing:border-box;padding:10px 12px;display:flex;align-items:center;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--surfaceLight)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--surfaceLight)\"></span><span style=\"position:relative;width:36px;flex:none;display:flex;justify-content:center\"><span class=\"t-meta t-ziffern\" style=\"width:32px;height:32px;border-radius:var(--radius-full);background:var(--surfaceLight);color:var(--textSecondary);font-weight:600;display:flex;align-items:center;justify-content:center\">10</span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-kartentitel\" style=\"color:var(--textSecondary)\">Sign rules (summary)</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">7.01.10</span></div></div>\n<div role=\"listitem\" style=\"position:relative;min-height:64px;box-sizing:border-box;padding:10px 12px;display:flex;align-items:center;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--surfaceLight)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--surfaceLight)\"></span><span style=\"position:relative;width:36px;flex:none;display:flex;justify-content:center\"><span class=\"t-meta t-ziffern\" style=\"width:32px;height:32px;border-radius:var(--radius-full);background:var(--surfaceLight);color:var(--textSecondary);font-weight:600;display:flex;align-items:center;justify-content:center\">11</span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-kartentitel\" style=\"color:var(--textSecondary)\">Order of operations and brackets</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">7.01.11</span></div></div>\n<div style=\"position:relative;min-height:48px;box-sizing:border-box;padding:16px 12px 8px 60px;display:flex;align-items:flex-end;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--surfaceLight)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--surfaceLight)\"></span><span class=\"t-beschriftung\" style=\"flex:1;min-width:0;color:var(--textSecondary)\">Applying</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">0 of 4</span></div>\n<div role=\"listitem\" style=\"position:relative;min-height:64px;box-sizing:border-box;padding:10px 12px;display:flex;align-items:center;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--surfaceLight)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--surfaceLight)\"></span><span style=\"position:relative;width:36px;flex:none;display:flex;justify-content:center\"><span class=\"t-meta t-ziffern\" style=\"width:32px;height:32px;border-radius:var(--radius-full);background:var(--surfaceLight);color:var(--textSecondary);font-weight:600;display:flex;align-items:center;justify-content:center\">12</span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-kartentitel\" style=\"color:var(--textSecondary)\">Rational numbers: fractions</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">7.01.12</span></div></div>\n<div role=\"listitem\" style=\"position:relative;min-height:64px;box-sizing:border-box;padding:10px 12px;display:flex;align-items:center;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--surfaceLight)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--surfaceLight)\"></span><span style=\"position:relative;width:36px;flex:none;display:flex;justify-content:center\"><span class=\"t-meta t-ziffern\" style=\"width:32px;height:32px;border-radius:var(--radius-full);background:var(--surfaceLight);color:var(--textSecondary);font-weight:600;display:flex;align-items:center;justify-content:center\">13</span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-kartentitel\" style=\"color:var(--textSecondary)\">Rational numbers: decimals</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">7.01.13</span></div></div>\n<div role=\"listitem\" style=\"position:relative;min-height:64px;box-sizing:border-box;padding:10px 12px;display:flex;align-items:center;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--surfaceLight)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--surfaceLight)\"></span><span style=\"position:relative;width:36px;flex:none;display:flex;justify-content:center\"><span class=\"t-meta t-ziffern\" style=\"width:32px;height:32px;border-radius:var(--radius-full);background:var(--surfaceLight);color:var(--textSecondary);font-weight:600;display:flex;align-items:center;justify-content:center\">14</span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-kartentitel\" style=\"color:var(--textSecondary)\">The coordinate plane (all four quadrants)</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">7.01.14</span></div></div>\n<div role=\"listitem\" style=\"position:relative;min-height:64px;box-sizing:border-box;padding:10px 12px;display:flex;align-items:center;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--surfaceLight)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--surfaceLight)\"></span><span style=\"position:relative;width:36px;flex:none;display:flex;justify-content:center\"><span class=\"t-meta t-ziffern\" style=\"width:32px;height:32px;border-radius:var(--radius-full);background:var(--surfaceLight);color:var(--textSecondary);font-weight:600;display:flex;align-items:center;justify-content:center\">15</span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-kartentitel\" style=\"color:var(--textSecondary)\">Word problems with rational numbers</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">7.01.15</span></div></div>\n<div role=\"listitem\" style=\"position:relative;min-height:72px;box-sizing:border-box;padding:10px 12px;display:flex;align-items:center;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--surfaceLight)\"></span><span style=\"position:relative;width:36px;flex:none;display:flex;justify-content:center\"><span style=\"width:36px;height:36px;box-sizing:border-box;border-radius:var(--radius-full);border:3px solid var(--surfaceLight);background:var(--background);display:flex;align-items:center;justify-content:center\"><span style=\"width:14px;height:14px;border-radius:var(--radius-full);background:var(--surfaceLight)\"></span></span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-kartentitel\" style=\"color:var(--textSecondary)\">Chapter done</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">7.01 · 11 to go</span></div></div>\n</div>\n\n</section></div>\n</div>\n<div style=\"position:absolute;left:0;top:0;width:1180px;height:24px;z-index:5;box-sizing:border-box;padding:0 24px;display:flex;align-items:center;justify-content:space-between\"><span class=\"t-meta\" style=\"font-weight:600\">9:41</span><span style=\"width:25px;height:12px;box-sizing:border-box;border:1px solid var(--textSecondary);border-radius:4px;padding:1px;display:flex\"><span style=\"width:72%;background:var(--textPrimary);border-radius:2px\"></span></span></div>\n<nav aria-label=\"Main navigation\" style=\"position:absolute;left:50%;top:38px;transform:translateX(-50%);z-index:4;display:flex;gap:8px\"><div role=\"link\" aria-current=\"page\" style=\"height:44px;box-sizing:border-box;padding:0 18px;display:flex;align-items:center;gap:8px;border-radius:var(--radius-full);background:var(--accentTint);border:1px solid var(--accentBorder);color:var(--textPrimary)\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5\"></path><path d=\"M9 18h6\"></path><path d=\"M10 22h4\"></path></svg><span class=\"t-klein-betont\" style=\"font-weight:600\">Learn</span></div><div role=\"link\" style=\"height:44px;box-sizing:border-box;padding:0 18px;display:flex;align-items:center;gap:8px;border:1px solid transparent;color:var(--textSecondary)\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 20V10\"></path><path d=\"M12 20V4\"></path><path d=\"M6 20v-6\"></path></svg><span class=\"t-klein-betont\">Progress</span></div><div role=\"link\" style=\"height:44px;box-sizing:border-box;padding:0 18px;display:flex;align-items:center;gap:8px;border:1px solid transparent;color:var(--textSecondary)\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"8\" r=\"5\"></circle><path d=\"M20 21a8 8 0 0 0-16 0\"></path></svg><span class=\"t-klein-betont\">Profile</span></div></nav>\n</div>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script>\nclass Component extends DCLogic {\n  renderVals() {\n    return { theme: this.props.theme ?? 'dark', stil: this.props.stil ?? 'bayati', welt: this.props.welt ?? 'violett' };\n  }\n}\n</script>\n</body>\n</html>\n","DuellFrage":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<script src=\"./support.js\"></script>\n</head>\n<body>\n<x-dc>\n<div data-theme=\"{{ theme }}\" data-stil=\"bayati\" data-welt=\"violett\" style=\"position:relative;width:390px;height:844px;overflow:hidden;background:var(--background);color:var(--textPrimary);font-family:var(--font-sans)\">\n<div class=\"bayati-muster\"></div>\n\n<div style=\"position:absolute;left:0;top:0;width:390px;height:47px;box-sizing:border-box;padding:6px 26px 0 34px;display:flex;align-items:center;justify-content:space-between\"><span class=\"t-klein-betont\" style=\"font-weight:600\">9:41</span><span style=\"width:25px;height:12px;box-sizing:border-box;border:1px solid var(--textSecondary);border-radius:4px;padding:1px;display:flex\"><span style=\"width:72%;background:var(--textPrimary);border-radius:2px\"></span></span></div>\n<header style=\"position:absolute;left:0;top:47px;width:390px;height:56px;box-sizing:border-box;padding:0 20px 0 8px;display:flex;align-items:center\"><div aria-label=\"Close\" style=\"width:48px;height:48px;flex:none;display:flex;align-items:center;justify-content:center\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg></div><div class=\"t-klein-betont\" style=\"flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis\">Duel · 7.01 Rational numbers</div><span class=\"t-meta t-ziffern\" style=\"flex:none;margin-left:12px;display:flex;gap:12px;color:var(--textTertiary)\"><span>3 / 5</span><span aria-label=\"Time 1 minute 12 seconds\" style=\"color:var(--textSecondary)\">1:12</span></span></header>\n<div style=\"position:absolute;left:20px;top:107px;width:350px;display:flex;flex-direction:column;gap:16px\">\n<div aria-label=\"Race track\" style=\"position:relative;display:flex;flex-direction:column;gap:4px\"><div style=\"display:flex;align-items:center;gap:8px\"><span class=\"t-meta\" style=\"width:56px;flex:none;font-weight:600;color:var(--textPrimary)\">You</span><div role=\"img\" aria-label=\"You: 2 of 5 correct\" style=\"position:relative;width:262px;height:36px\"><div style=\"position:absolute;left:16px;right:16px;top:16px;height:4px;border-radius:var(--radius-full);background:var(--glassLight)\"></div><div style=\"position:absolute;left:16px;width:92px;top:16px;height:4px;border-radius:var(--radius-full);background:var(--accent)\"></div><span style=\"position:absolute;left:60px;top:16px;width:4px;height:4px;border-radius:var(--radius-full);background:var(--background)\"></span><span style=\"position:absolute;left:106px;top:16px;width:4px;height:4px;border-radius:var(--radius-full);background:var(--background)\"></span><span style=\"position:absolute;left:152px;top:16px;width:4px;height:4px;border-radius:var(--radius-full);background:var(--background)\"></span><span style=\"position:absolute;left:198px;top:16px;width:4px;height:4px;border-radius:var(--radius-full);background:var(--background)\"></span><span style=\"position:absolute;left:92px;top:2px\"><span aria-hidden=\"true\" class=\"t-ziffern\" style=\"width:32px;height:32px;flex:none;box-sizing:border-box;border-radius:var(--radius-full);border:1.5px solid var(--accentBorder);color:var(--accentText);display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;font-weight:700\">S</span></span></div></div><div style=\"display:flex;align-items:center;gap:8px\"><span class=\"t-meta\" style=\"width:56px;flex:none;color:var(--textSecondary)\">Fox</span><div role=\"img\" aria-label=\"Fox: 3 of 5 correct\" style=\"position:relative;width:262px;height:36px\"><div style=\"position:absolute;left:16px;right:16px;top:16px;height:4px;border-radius:var(--radius-full);background:var(--glassLight)\"></div><div style=\"position:absolute;left:16px;width:138px;top:16px;height:4px;border-radius:var(--radius-full);background:var(--textTertiary)\"></div><span style=\"position:absolute;left:60px;top:16px;width:4px;height:4px;border-radius:var(--radius-full);background:var(--background)\"></span><span style=\"position:absolute;left:106px;top:16px;width:4px;height:4px;border-radius:var(--radius-full);background:var(--background)\"></span><span style=\"position:absolute;left:152px;top:16px;width:4px;height:4px;border-radius:var(--radius-full);background:var(--background)\"></span><span style=\"position:absolute;left:198px;top:16px;width:4px;height:4px;border-radius:var(--radius-full);background:var(--background)\"></span><span style=\"position:absolute;left:138px;top:2px\"><span aria-hidden=\"true\" class=\"t-ziffern\" style=\"width:32px;height:32px;flex:none;box-sizing:border-box;border-radius:var(--radius-full);border:1.5px solid var(--accentBorder);color:var(--accentText);display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;font-weight:700\">M</span></span></div></div><span aria-hidden=\"true\" style=\"position:absolute;right:-6px;top:-2px;color:var(--textSecondary)\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z\"></path><path d=\"M4 22v-7\"></path></svg></span><span role=\"status\" aria-live=\"polite\" class=\"t-meta t-ziffern\" style=\"padding-left:64px;color:var(--textSecondary)\">Fox solved question 3</span></div>\n\n<div aria-label=\"Question\" style=\"box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:16px;background:var(--surface);border:1px solid light-dark(var(--glassBorder),transparent);border-radius:var(--radius-card)\">\n<div style=\"display:flex;align-items:center;gap:10px\"><span style=\"width:32px;height:32px;flex:none;border-radius:var(--radius-sm);background:var(--surfaceLight);color:var(--catAlgebra);display:flex;align-items:center;justify-content:center\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 3v14\"></path><path d=\"M5 10h14\"></path><path d=\"M5 21h14\"></path></svg></span><span class=\"t-meta\" style=\"flex:1;min-width:0;font-weight:600\">Absolute value and opposite number</span></div>\n<div style=\"display:flex;flex-direction:column;gap:4px\"><span class=\"t-fliesstext\">What is the absolute value?</span><span class=\"t-ziffern\" style=\"font-size:22px;line-height:28px;font-weight:600\">|−12|</span></div>\n<div role=\"radiogroup\" style=\"display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px\"><div role=\"radio\" aria-checked=\"false\" class=\"t-abschnitt t-ziffern\" style=\"height:64px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);border:1px solid var(--inputBorder)\">12</div><div role=\"radio\" aria-checked=\"true\" class=\"t-abschnitt t-ziffern\" style=\"height:64px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);background:var(--accentTint);border:2px solid var(--accent)\">−12</div><div role=\"radio\" aria-checked=\"false\" class=\"t-abschnitt t-ziffern\" style=\"height:64px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);border:1px solid var(--inputBorder)\">0</div><div role=\"radio\" aria-checked=\"false\" class=\"t-abschnitt t-ziffern\" style=\"height:64px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);border:1px solid var(--inputBorder)\">24</div></div>\n</div>\n</div>\n<div style=\"position:absolute;left:0;bottom:0;width:390px;box-sizing:border-box;padding:12px 20px 34px;display:flex;flex-direction:column;gap:4px;background:var(--background)\"><div class=\"t-knopf\" style=\"height:48px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-card);background:linear-gradient(var(--accentTint),var(--accentTint)),var(--background);border:1px solid var(--accentBorder);color:var(--textPrimary)\">Check</div><div style=\"position:absolute;left:128px;bottom:8px;width:134px;height:5px;border-radius:var(--radius-full);background:var(--textPrimary)\"></div></div>\n</div>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script>\nclass Component extends DCLogic {\n  renderVals() {\n    return { theme: this.props.theme ?? 'dark' };\n  }\n}\n</script>\n</body>\n</html>\n","TestErgebnis":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<script src=\"./support.js\"></script>\n</head>\n<body>\n<x-dc>\n<div data-theme=\"{{ theme }}\" data-stil=\"bayati\" data-welt=\"violett\" style=\"position:relative;width:390px;min-height:844px;overflow:hidden;background:var(--background);color:var(--textPrimary);font-family:var(--font-sans)\">\n<div class=\"bayati-muster\"></div>\n<div style=\"position:absolute;left:0;top:0;width:390px;height:47px;box-sizing:border-box;padding:6px 26px 0 34px;display:flex;align-items:center;justify-content:space-between\"><span class=\"t-klein-betont\" style=\"font-weight:600\">9:41</span><span style=\"width:25px;height:12px;box-sizing:border-box;border:1px solid var(--textSecondary);border-radius:4px;padding:1px;display:flex\"><span style=\"width:72%;background:var(--textPrimary);border-radius:2px\"></span></span></div>\n<header style=\"position:absolute;left:0;top:47px;width:390px;height:56px;box-sizing:border-box;padding:0 20px 0 8px;display:flex;align-items:center\"><div aria-label=\"Close\" style=\"width:48px;height:48px;flex:none;display:flex;align-items:center;justify-content:center\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg></div><div class=\"t-klein-betont\" style=\"flex:1;min-width:0;font-weight:600\">Test · 7.01 Rational numbers</div></header>\n<div style=\"position:relative;box-sizing:border-box;padding:119px 20px 162px;display:flex;flex-direction:column;gap:28px\">\n<div style=\"display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center\">\n<div style=\"position:relative;width:112px;height:112px\"><svg width=\"112\" height=\"112\" viewBox=\"0 0 112 112\" fill=\"none\" aria-hidden=\"true\" style=\"transform:rotate(-90deg)\"><circle cx=\"56\" cy=\"56\" r=\"52\" style=\"stroke:var(--surfaceLight);stroke-width:8\"></circle><circle cx=\"56\" cy=\"56\" r=\"52\" style=\"stroke:var(--success);stroke-width:8;stroke-linecap:round;stroke-dasharray:229 327\"></circle></svg><span class=\"t-anzeige\" style=\"position:absolute;inset:0;display:flex;align-items:center;justify-content:center\">7/10</span></div>\n<div style=\"display:flex;flex-direction:column;align-items:center;gap:2px\"><h1 class=\"t-titel\" style=\"margin:0\">7 of 10 correct</h1><span class=\"t-klein t-ziffern\" style=\"color:var(--textSecondary)\">Time 8:24 · 2 more than last time</span></div>\n\n<div style=\"width:240px;display:flex;flex-direction:column;gap:6px\"><div style=\"display:flex;justify-content:space-between\"><span class=\"t-klein-betont t-ziffern\" style=\"font-weight:600;color:var(--accentText)\">+60 XP</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">Level 3 · 180 / 200</span></div><div style=\"height:6px;border-radius:var(--radius-full);background:var(--glassLight);overflow:hidden\"><div style=\"width:90%;height:100%;border-radius:var(--radius-full);background:var(--accent)\"></div></div></div>\n</div>\n<div style=\"display:flex;flex-direction:column;gap:8px\"><span class=\"t-beschriftung\" style=\"color:var(--textSecondary);padding:0 4px\">Questions</span><div role=\"list\" style=\"display:flex;justify-content:space-between\"><div role=\"button\" aria-label=\"Question 1, correct\" style=\"width:28px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:28px;height:28px;border-radius:var(--radius-full);background:var(--success);color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">1</span></div><div role=\"button\" aria-label=\"Question 2, correct\" style=\"width:28px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:28px;height:28px;border-radius:var(--radius-full);background:var(--success);color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">2</span></div><div role=\"button\" aria-label=\"Question 3, correct\" style=\"width:28px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:28px;height:28px;border-radius:var(--radius-full);background:var(--success);color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">3</span></div><div role=\"button\" aria-label=\"Question 4, wrong\" style=\"width:28px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:28px;height:28px;box-sizing:border-box;border-radius:var(--radius-full);border:2px solid var(--error);color:var(--errorText);display:flex;align-items:center;justify-content:center\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg></span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">4</span></div><div role=\"button\" aria-label=\"Question 5, correct\" style=\"width:28px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:28px;height:28px;border-radius:var(--radius-full);background:var(--success);color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">5</span></div><div role=\"button\" aria-label=\"Question 6, correct\" style=\"width:28px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:28px;height:28px;border-radius:var(--radius-full);background:var(--success);color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">6</span></div><div role=\"button\" aria-label=\"Question 7, correct\" style=\"width:28px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:28px;height:28px;border-radius:var(--radius-full);background:var(--success);color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">7</span></div><div role=\"button\" aria-label=\"Question 8, wrong\" style=\"width:28px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:28px;height:28px;box-sizing:border-box;border-radius:var(--radius-full);border:2px solid var(--error);color:var(--errorText);display:flex;align-items:center;justify-content:center\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg></span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">8</span></div><div role=\"button\" aria-label=\"Question 9, wrong\" style=\"width:28px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:28px;height:28px;box-sizing:border-box;border-radius:var(--radius-full);border:2px solid var(--error);color:var(--errorText);display:flex;align-items:center;justify-content:center\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg></span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">9</span></div><div role=\"button\" aria-label=\"Question 10, correct\" style=\"width:28px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:28px;height:28px;border-radius:var(--radius-full);background:var(--success);color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">10</span></div></div></div>\n<div style=\"display:flex;flex-direction:column;gap:8px\"><span class=\"t-beschriftung\" style=\"color:var(--textSecondary);padding:0 4px\">Got wrong</span><div style=\"box-sizing:border-box;padding:14px 16px 4px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--divider)\">\n<span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">Question 4 · Absolute value and opposite</span>\n<div style=\"display:flex;align-items:baseline;gap:8px;flex-wrap:wrap\"><span class=\"t-klein\">What is the absolute value?</span><span class=\"t-abschnitt t-ziffern\">|−12|</span></div>\n<div style=\"display:flex;flex-direction:column;gap:4px\"><div style=\"display:flex;align-items:center;gap:8px;color:var(--errorText)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex:none\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg><span class=\"t-klein\" style=\"color:var(--textSecondary)\">Your answer</span><b class=\"t-klein-betont t-ziffern\" style=\"font-weight:600;color:var(--textPrimary)\">−12</b></div><div style=\"display:flex;align-items:center;gap:8px;color:var(--successText)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex:none\"><path d=\"M20 6 9 17l-5-5\"></path></svg><span class=\"t-klein\" style=\"color:var(--textSecondary)\">Correct</span><b class=\"t-klein-betont t-ziffern\" style=\"font-weight:600;color:var(--textPrimary)\">12</b></div></div>\n<span class=\"t-klein\">The absolute value is the distance from zero and never negative.</span>\n<span role=\"link\" class=\"t-klein-betont\" style=\"align-self:flex-start;height:48px;display:flex;align-items:center;font-weight:600;color:var(--accentText)\">Learning path</span>\n</div><div style=\"box-sizing:border-box;padding:14px 16px 4px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--divider)\">\n<span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">Question 8 · Multiplying integers</span>\n<div style=\"display:flex;align-items:baseline;gap:8px;flex-wrap:wrap\"><span class=\"t-klein\">Calculate:</span><span class=\"t-abschnitt t-ziffern\">(−3) · 4</span></div>\n<div style=\"display:flex;flex-direction:column;gap:4px\"><div style=\"display:flex;align-items:center;gap:8px;color:var(--errorText)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex:none\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg><span class=\"t-klein\" style=\"color:var(--textSecondary)\">Your answer</span><b class=\"t-klein-betont t-ziffern\" style=\"font-weight:600;color:var(--textPrimary)\">12</b></div><div style=\"display:flex;align-items:center;gap:8px;color:var(--successText)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex:none\"><path d=\"M20 6 9 17l-5-5\"></path></svg><span class=\"t-klein\" style=\"color:var(--textSecondary)\">Correct</span><b class=\"t-klein-betont t-ziffern\" style=\"font-weight:600;color:var(--textPrimary)\">−12</b></div></div>\n<span class=\"t-klein\">Different signs give minus.</span>\n<span role=\"link\" class=\"t-klein-betont\" style=\"align-self:flex-start;height:48px;display:flex;align-items:center;font-weight:600;color:var(--accentText)\">Learning path</span>\n</div><div style=\"box-sizing:border-box;padding:14px 16px 4px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--divider)\">\n<span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">Question 9 · Multiplying integers</span>\n<div style=\"display:flex;align-items:baseline;gap:8px;flex-wrap:wrap\"><span class=\"t-klein\">Calculate:</span><span class=\"t-abschnitt t-ziffern\">(−6) · (−2)</span></div>\n<div style=\"display:flex;flex-direction:column;gap:4px\"><div style=\"display:flex;align-items:center;gap:8px;color:var(--errorText)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex:none\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg><span class=\"t-klein\" style=\"color:var(--textSecondary)\">Your answer</span><b class=\"t-klein-betont t-ziffern\" style=\"font-weight:600;color:var(--textPrimary)\">−12</b></div><div style=\"display:flex;align-items:center;gap:8px;color:var(--successText)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex:none\"><path d=\"M20 6 9 17l-5-5\"></path></svg><span class=\"t-klein\" style=\"color:var(--textSecondary)\">Correct</span><b class=\"t-klein-betont t-ziffern\" style=\"font-weight:600;color:var(--textPrimary)\">12</b></div></div>\n<span class=\"t-klein\">Same signs give plus.</span>\n<span role=\"link\" class=\"t-klein-betont\" style=\"align-self:flex-start;height:48px;display:flex;align-items:center;font-weight:600;color:var(--accentText)\">Learning path</span>\n</div></div>\n</div>\n<div style=\"position:absolute;left:0;bottom:0;width:390px;box-sizing:border-box;padding:12px 20px 34px;display:flex;flex-direction:column;gap:4px;background:var(--background)\"><div class=\"t-knopf\" style=\"height:48px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-card);background:linear-gradient(var(--accentTint),var(--accentTint)),var(--background);border:1px solid var(--accentBorder);color:var(--textPrimary)\">Practise mistakes again</div><div class=\"t-knopf\" style=\"height:48px;display:flex;align-items:center;justify-content:center;color:var(--accentText)\">Done</div><div style=\"position:absolute;left:128px;bottom:8px;width:134px;height:5px;border-radius:var(--radius-full);background:var(--textPrimary)\"></div></div>\n</div>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script>\nclass Component extends DCLogic {\n  renderVals() {\n    return { theme: this.props.theme ?? 'dark' };\n  }\n}\n</script>\n</body>\n</html>\n","TheorieSchritt":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<script src=\"./support.js\"></script>\n</head>\n<body>\n<x-dc>\n<div data-theme=\"{{ theme }}\" data-stil=\"{{ stil }}\" data-welt=\"{{ welt }}\" style=\"position:relative;width:390px;min-height:844px;overflow:hidden;background:var(--background);color:var(--textPrimary);font-family:var(--font-sans)\">\n<sc-if value=\"{{ mitMuster }}\" hint-placeholder-val=\"{{ true }}\"><div class=\"bayati-muster\"></div></sc-if>\n<div style=\"position:absolute;left:0;top:0;width:390px;height:47px;box-sizing:border-box;padding:6px 26px 0 34px;display:flex;align-items:center;justify-content:space-between\"><span class=\"t-klein-betont\" style=\"font-weight:600\">9:41</span><span style=\"width:25px;height:12px;box-sizing:border-box;border:1px solid var(--textSecondary);border-radius:4px;padding:1px;display:flex\"><span style=\"width:72%;background:var(--textPrimary);border-radius:2px\"></span></span></div>\n<header style=\"position:absolute;left:0;top:47px;width:390px;height:60px\">\n<div style=\"height:56px;box-sizing:border-box;padding:0 20px 0 8px;display:flex;align-items:center\">\n<div style=\"width:48px;height:48px;flex:none;display:flex;align-items:center;justify-content:center\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg></div>\n<div class=\"t-klein-betont\" style=\"flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis\">7.01.04 Absolute value and opposite</div>\n<div class=\"t-meta t-ziffern\" style=\"flex:none;margin-left:12px;color:var(--textTertiary)\">2 / 9</div>\n</div>\n<div style=\"margin:0 20px;height:4px;border-radius:var(--radius-full);background:var(--surfaceLight);overflow:hidden\"><div style=\"width:22%;height:100%;border-radius:var(--radius-full);background:var(--accent)\"></div></div>\n</header>\n<div style=\"position:relative;box-sizing:border-box;padding:123px 20px 118px;display:flex;flex-direction:column;gap:24px\">\n<div style=\"display:flex;flex-direction:column;gap:12px\"><h1 class=\"t-titel\" style=\"margin:0\">Distance from zero</h1><p class=\"t-fliesstext\" style=\"margin:0\">The absolute value of a number is its distance from zero on the number line. It is written with two vertical bars.</p></div>\n<div class=\"bayati-karo\" style=\"box-sizing:border-box;padding:24px 16px 16px;display:flex;flex-direction:column;align-items:center;gap:12px;background-color:var(--surface);border:1px solid light-dark(var(--glassBorder),transparent);border-radius:var(--radius-md)\"><span style=\"font-size:22px;line-height:28px\">\\(|-5| = 5\\)</span><span class=\"t-meta\" style=\"color:var(--textTertiary)\">The distance from −5 to zero is 5.</span></div>\n<ol style=\"margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:16px\">\n<li style=\"display:flex;gap:12px\"><span class=\"t-meta t-ziffern\" style=\"width:24px;height:24px;flex:none;border-radius:var(--radius-full);background:var(--accentTint);color:var(--accentText);font-weight:600;display:flex;align-items:center;justify-content:center\">1</span><div style=\"display:flex;flex-direction:column;gap:4px\"><span class=\"t-klein-betont\" style=\"font-weight:600\">Find the number on the number line</span><span style=\"font-size:17px;line-height:24px\">\\(-5\\)</span></div></li>\n<li style=\"display:flex;gap:12px\"><span class=\"t-meta t-ziffern\" style=\"width:24px;height:24px;flex:none;border-radius:var(--radius-full);background:var(--accentTint);color:var(--accentText);font-weight:600;display:flex;align-items:center;justify-content:center\">2</span><div style=\"display:flex;flex-direction:column;gap:4px\"><span class=\"t-klein-betont\" style=\"font-weight:600\">Count the steps to zero</span><span style=\"font-size:17px;line-height:24px\">\\(-5 \\to 0\\)</span></div></li>\n<li style=\"display:flex;gap:12px\"><span class=\"t-meta t-ziffern\" style=\"width:24px;height:24px;flex:none;border-radius:var(--radius-full);background:var(--accentTint);color:var(--accentText);font-weight:600;display:flex;align-items:center;justify-content:center\">3</span><div style=\"display:flex;flex-direction:column;gap:4px\"><span class=\"t-klein-betont\" style=\"font-weight:600\">Write down the absolute value</span><span style=\"font-size:17px;line-height:24px\">\\(|-5| = 5\\)</span></div></li>\n</ol>\n<div style=\"position:relative;overflow:hidden;box-sizing:border-box;padding:14px 16px;display:flex;flex-direction:column;gap:4px;background:var(--accentTint);border:1px solid var(--accentBorder);border-radius:var(--radius-card)\"><span class=\"t-beschriftung\" style=\"color:var(--accentText)\">Remember</span><span class=\"t-klein-betont\">An absolute value is never negative.</span></div>\n<div style=\"position:relative;overflow:hidden;box-sizing:border-box;padding:14px 16px 14px 20px;display:flex;flex-direction:column;gap:4px;background:var(--warningFill);border-radius:var(--radius-md)\"><span style=\"position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--warning)\"></span><span class=\"t-beschriftung\" style=\"color:var(--warningText)\">Watch out</span><span class=\"t-klein-betont\">\\(-\\lvert -5 \\rvert\\) is \\(-5\\), not \\(5\\).</span></div>\n<sc-if value=\"{{ verdeckt }}\" hint-placeholder-val=\"{{ true }}\"><div style=\"box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:4px;border:1px dashed var(--accentBorder);border-radius:var(--radius-card)\"><span class=\"t-klein-betont\" style=\"font-weight:600\">What is \\(|-12|\\)?</span><span class=\"t-meta\" style=\"color:var(--textTertiary)\">Tap to see the answer</span></div></sc-if>\n<sc-if value=\"{{ aufgedeckt }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:8px;border:1px solid var(--accentBorder);border-radius:var(--radius-md)\"><span class=\"t-klein-betont\" style=\"font-weight:600\">What is \\(|-12|\\)?</span><span style=\"font-size:22px;line-height:28px\">\\(|-12| = 12\\)</span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">From −12 to zero it is 12 steps.</span></div></sc-if>\n<div style=\"height:160px;box-sizing:border-box;padding:16px;border-radius:var(--radius-md);background:var(--surfaceLight);display:flex;align-items:center;justify-content:center\"><span class=\"t-meta\" style=\"color:var(--textSecondary);text-align:center;max-width:240px\">Drawing: number line from −6 to 6, distance from −5 to zero marked</span></div>\n</div>\n<div style=\"position:absolute;left:0;bottom:0;width:390px;height:94px;box-sizing:border-box;padding:12px 20px 34px;display:flex;gap:12px;background:var(--background)\">\n<div style=\"width:56px;height:48px;flex:none;box-sizing:border-box;border-radius:var(--radius-card);border:1px solid var(--accentBorder);color:var(--accentText);display:flex;align-items:center;justify-content:center\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m12 19-7-7 7-7\"></path><path d=\"M19 12H5\"></path></svg></div>\n<div class=\"t-knopf\" style=\"flex:1;height:48px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-card);background:linear-gradient(var(--accentTint),var(--accentTint)),var(--background);border:1px solid var(--accentBorder);color:var(--textPrimary)\">Next</div>\n<div style=\"position:absolute;left:128px;bottom:8px;width:134px;height:5px;border-radius:var(--radius-full);background:var(--textPrimary)\"></div>\n</div>\n</div>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script>\nclass Component extends DCLogic {\n  componentDidMount() {\n    let n = 0;\n    const go = () => {\n      const mj = window.MathJax;\n      if (mj && mj.typesetPromise) mj.typesetPromise().catch(() => {});\n      else if (n++ < 60) setTimeout(go, 200);\n    };\n    go();\n  }\n  renderVals() {\n    const stil = this.props.stil ?? 'bayati';\n    const auf = !!this.props.aufgedeckt;\n    return { theme: this.props.theme ?? 'dark', stil, welt: stil === 'bayati' ? (this.props.welt ?? 'violett') : '', mitMuster: true, aufgedeckt: auf, verdeckt: !auf };\n  }\n}\n</script>\n</body>\n</html>\n","TDuellFrageQuer":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<script src=\"./support.js\"></script>\n</head>\n<body>\n<x-dc>\n<div data-theme=\"{{ theme }}\" data-stil=\"bayati\" data-welt=\"violett\" style=\"position:relative;width:1180px;height:820px;overflow:hidden;background:var(--background);color:var(--textPrimary);font-family:var(--font-sans)\">\n<div class=\"bayati-muster\"></div>\n<div style=\"position:absolute;left:230px;top:0px;width:720px;height:820px\"><dc-import name=\"DuellFrageV820\" theme=\"{{ theme }}\"  hint-size=\"720px,820px\"></dc-import></div>\n<div style=\"position:absolute;left:0;top:0;width:1180px;height:24px;z-index:7;box-sizing:border-box;padding:0 24px;display:flex;align-items:center;justify-content:space-between\"><span class=\"t-meta\" style=\"font-weight:600\">9:41</span><span style=\"width:25px;height:12px;box-sizing:border-box;border:1px solid var(--textSecondary);border-radius:4px;padding:1px;display:flex\"><span style=\"width:72%;background:var(--textPrimary);border-radius:2px\"></span></span></div>\n</div>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script>\nclass Component extends DCLogic {\n  renderVals() {\n    const p = Object.assign({}, this.props); delete p.theme;\n    return { theme: this.props.theme ?? 'dark', p };\n  }\n}\n</script>\n</body>\n</html>\n","DuellFrageV820":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<script src=\"./support.js\"></script>\n</head>\n<body>\n<x-dc>\n<div data-theme=\"{{ theme }}\" data-stil=\"bayati\" data-welt=\"violett\" style=\"position:relative;width:720px;height:820px;overflow:hidden;color:var(--textPrimary);font-family:var(--font-sans)\">\n\n\n\n<header style=\"position:absolute;left:0;top:47px;width:720px;height:56px;box-sizing:border-box;padding:0 20px 0 8px;display:flex;align-items:center\"><div aria-label=\"Close\" style=\"width:48px;height:48px;flex:none;display:flex;align-items:center;justify-content:center\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg></div><div class=\"t-klein-betont\" style=\"flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis\">Duel · 7.01 Rational numbers</div><span class=\"t-meta t-ziffern\" style=\"flex:none;margin-left:12px;display:flex;gap:12px;color:var(--textTertiary)\"><span>3 / 5</span><span aria-label=\"Time 1 minute 12 seconds\" style=\"color:var(--textSecondary)\">1:12</span></span></header>\n<div style=\"position:absolute;left:20px;top:107px;width:680px;display:flex;flex-direction:column;gap:16px\">\n<div aria-label=\"Race track\" style=\"position:relative;display:flex;flex-direction:column;gap:4px\"><div style=\"display:flex;align-items:center;gap:8px\"><span class=\"t-meta\" style=\"width:56px;flex:none;font-weight:600;color:var(--textPrimary)\">You</span><div role=\"img\" aria-label=\"You: 2 of 5 correct\" style=\"position:relative;width:262px;height:36px\"><div style=\"position:absolute;left:16px;right:16px;top:16px;height:4px;border-radius:var(--radius-full);background:var(--glassLight)\"></div><div style=\"position:absolute;left:16px;width:92px;top:16px;height:4px;border-radius:var(--radius-full);background:var(--accent)\"></div><span style=\"position:absolute;left:60px;top:16px;width:4px;height:4px;border-radius:var(--radius-full);background:var(--background)\"></span><span style=\"position:absolute;left:106px;top:16px;width:4px;height:4px;border-radius:var(--radius-full);background:var(--background)\"></span><span style=\"position:absolute;left:152px;top:16px;width:4px;height:4px;border-radius:var(--radius-full);background:var(--background)\"></span><span style=\"position:absolute;left:198px;top:16px;width:4px;height:4px;border-radius:var(--radius-full);background:var(--background)\"></span><span style=\"position:absolute;left:92px;top:2px\"><span aria-hidden=\"true\" class=\"t-ziffern\" style=\"width:32px;height:32px;flex:none;box-sizing:border-box;border-radius:var(--radius-full);border:1.5px solid var(--accentBorder);color:var(--accentText);display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;font-weight:700\">S</span></span></div></div><div style=\"display:flex;align-items:center;gap:8px\"><span class=\"t-meta\" style=\"width:56px;flex:none;color:var(--textSecondary)\">Fox</span><div role=\"img\" aria-label=\"Fox: 3 of 5 correct\" style=\"position:relative;width:262px;height:36px\"><div style=\"position:absolute;left:16px;right:16px;top:16px;height:4px;border-radius:var(--radius-full);background:var(--glassLight)\"></div><div style=\"position:absolute;left:16px;width:138px;top:16px;height:4px;border-radius:var(--radius-full);background:var(--textTertiary)\"></div><span style=\"position:absolute;left:60px;top:16px;width:4px;height:4px;border-radius:var(--radius-full);background:var(--background)\"></span><span style=\"position:absolute;left:106px;top:16px;width:4px;height:4px;border-radius:var(--radius-full);background:var(--background)\"></span><span style=\"position:absolute;left:152px;top:16px;width:4px;height:4px;border-radius:var(--radius-full);background:var(--background)\"></span><span style=\"position:absolute;left:198px;top:16px;width:4px;height:4px;border-radius:var(--radius-full);background:var(--background)\"></span><span style=\"position:absolute;left:138px;top:2px\"><span aria-hidden=\"true\" class=\"t-ziffern\" style=\"width:32px;height:32px;flex:none;box-sizing:border-box;border-radius:var(--radius-full);border:1.5px solid var(--accentBorder);color:var(--accentText);display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;font-weight:700\">M</span></span></div></div><span aria-hidden=\"true\" style=\"position:absolute;right:-6px;top:-2px;color:var(--textSecondary)\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z\"></path><path d=\"M4 22v-7\"></path></svg></span><span role=\"status\" aria-live=\"polite\" class=\"t-meta t-ziffern\" style=\"padding-left:64px;color:var(--textSecondary)\">Fox solved question 3</span></div>\n\n<div aria-label=\"Question\" style=\"box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:16px;background:var(--surface);border:1px solid light-dark(var(--glassBorder),transparent);border-radius:var(--radius-card)\">\n<div style=\"display:flex;align-items:center;gap:10px\"><span style=\"width:32px;height:32px;flex:none;border-radius:var(--radius-sm);background:var(--surfaceLight);color:var(--catAlgebra);display:flex;align-items:center;justify-content:center\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 3v14\"></path><path d=\"M5 10h14\"></path><path d=\"M5 21h14\"></path></svg></span><span class=\"t-meta\" style=\"flex:1;min-width:0;font-weight:600\">Absolute value and opposite number</span></div>\n<div style=\"display:flex;flex-direction:column;gap:4px\"><span class=\"t-fliesstext\">What is the absolute value?</span><span class=\"t-ziffern\" style=\"font-size:22px;line-height:28px;font-weight:600\">|−12|</span></div>\n<div role=\"radiogroup\" style=\"display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px\"><div role=\"radio\" aria-checked=\"false\" class=\"t-abschnitt t-ziffern\" style=\"height:64px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);border:1px solid var(--inputBorder)\">12</div><div role=\"radio\" aria-checked=\"true\" class=\"t-abschnitt t-ziffern\" style=\"height:64px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);background:var(--accentTint);border:2px solid var(--accent)\">−12</div><div role=\"radio\" aria-checked=\"false\" class=\"t-abschnitt t-ziffern\" style=\"height:64px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);border:1px solid var(--inputBorder)\">0</div><div role=\"radio\" aria-checked=\"false\" class=\"t-abschnitt t-ziffern\" style=\"height:64px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);border:1px solid var(--inputBorder)\">24</div></div>\n</div>\n</div>\n<div style=\"position:absolute;left:0;bottom:0;width:720px;box-sizing:border-box;padding:12px 20px 34px;display:flex;flex-direction:column;gap:4px;background:var(--background)\"><div class=\"t-knopf\" style=\"height:48px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-card);background:linear-gradient(var(--accentTint),var(--accentTint)),var(--background);border:1px solid var(--accentBorder);color:var(--textPrimary)\">Check</div><div style=\"position:absolute;left:293px;bottom:8px;width:134px;height:5px;border-radius:var(--radius-full);background:var(--textPrimary)\"></div></div>\n</div>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script>\nclass Component extends DCLogic {\n  renderVals() {\n    return { theme: this.props.theme ?? 'dark' };\n  }\n}\n</script>\n</body>\n</html>\n","TTestErgebnisQuer":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<script src=\"./support.js\"></script>\n</head>\n<body>\n<x-dc>\n<div data-theme=\"{{ theme }}\" data-stil=\"bayati\" data-welt=\"violett\" style=\"position:relative;width:1180px;height:820px;overflow:hidden;background:var(--background);color:var(--textPrimary);font-family:var(--font-sans)\">\n<div class=\"bayati-muster\"></div>\n<div style=\"position:absolute;left:230px;top:0px;width:720px;height:820px\"><dc-import name=\"TestErgebnisV820\" theme=\"{{ theme }}\"  hint-size=\"720px,820px\"></dc-import></div>\n<div style=\"position:absolute;left:0;top:0;width:1180px;height:24px;z-index:7;box-sizing:border-box;padding:0 24px;display:flex;align-items:center;justify-content:space-between\"><span class=\"t-meta\" style=\"font-weight:600\">9:41</span><span style=\"width:25px;height:12px;box-sizing:border-box;border:1px solid var(--textSecondary);border-radius:4px;padding:1px;display:flex\"><span style=\"width:72%;background:var(--textPrimary);border-radius:2px\"></span></span></div>\n</div>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script>\nclass Component extends DCLogic {\n  renderVals() {\n    const p = Object.assign({}, this.props); delete p.theme;\n    return { theme: this.props.theme ?? 'dark', p };\n  }\n}\n</script>\n</body>\n</html>\n","TestErgebnisV820":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<script src=\"./support.js\"></script>\n</head>\n<body>\n<x-dc>\n<div data-theme=\"{{ theme }}\" data-stil=\"bayati\" data-welt=\"violett\" style=\"position:relative;width:720px;min-height:820px;overflow:hidden;color:var(--textPrimary);font-family:var(--font-sans)\">\n\n\n<header style=\"position:absolute;left:0;top:47px;width:720px;height:56px;box-sizing:border-box;padding:0 20px 0 8px;display:flex;align-items:center\"><div aria-label=\"Close\" style=\"width:48px;height:48px;flex:none;display:flex;align-items:center;justify-content:center\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg></div><div class=\"t-klein-betont\" style=\"flex:1;min-width:0;font-weight:600\">Test · 7.01 Rational numbers</div></header>\n<div style=\"position:relative;box-sizing:border-box;padding:119px 20px 162px;display:flex;flex-direction:column;gap:28px\">\n<div style=\"display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center\">\n<div style=\"position:relative;width:112px;height:112px\"><svg width=\"112\" height=\"112\" viewBox=\"0 0 112 112\" fill=\"none\" aria-hidden=\"true\" style=\"transform:rotate(-90deg)\"><circle cx=\"56\" cy=\"56\" r=\"52\" style=\"stroke:var(--surfaceLight);stroke-width:8\"></circle><circle cx=\"56\" cy=\"56\" r=\"52\" style=\"stroke:var(--success);stroke-width:8;stroke-linecap:round;stroke-dasharray:229 327\"></circle></svg><span class=\"t-anzeige\" style=\"position:absolute;inset:0;display:flex;align-items:center;justify-content:center\">7/10</span></div>\n<div style=\"display:flex;flex-direction:column;align-items:center;gap:2px\"><h1 class=\"t-titel\" style=\"margin:0\">7 of 10 correct</h1><span class=\"t-klein t-ziffern\" style=\"color:var(--textSecondary)\">Time 8:24 · 2 more than last time</span></div>\n\n<div style=\"width:240px;display:flex;flex-direction:column;gap:6px\"><div style=\"display:flex;justify-content:space-between\"><span class=\"t-klein-betont t-ziffern\" style=\"font-weight:600;color:var(--accentText)\">+60 XP</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">Level 3 · 180 / 200</span></div><div style=\"height:6px;border-radius:var(--radius-full);background:var(--glassLight);overflow:hidden\"><div style=\"width:90%;height:100%;border-radius:var(--radius-full);background:var(--accent)\"></div></div></div>\n</div>\n<div style=\"display:flex;flex-direction:column;gap:8px\"><span class=\"t-beschriftung\" style=\"color:var(--textSecondary);padding:0 4px\">Questions</span><div role=\"list\" style=\"display:flex;justify-content:space-between\"><div role=\"button\" aria-label=\"Question 1, correct\" style=\"width:28px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:28px;height:28px;border-radius:var(--radius-full);background:var(--success);color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">1</span></div><div role=\"button\" aria-label=\"Question 2, correct\" style=\"width:28px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:28px;height:28px;border-radius:var(--radius-full);background:var(--success);color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">2</span></div><div role=\"button\" aria-label=\"Question 3, correct\" style=\"width:28px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:28px;height:28px;border-radius:var(--radius-full);background:var(--success);color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">3</span></div><div role=\"button\" aria-label=\"Question 4, wrong\" style=\"width:28px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:28px;height:28px;box-sizing:border-box;border-radius:var(--radius-full);border:2px solid var(--error);color:var(--errorText);display:flex;align-items:center;justify-content:center\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg></span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">4</span></div><div role=\"button\" aria-label=\"Question 5, correct\" style=\"width:28px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:28px;height:28px;border-radius:var(--radius-full);background:var(--success);color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">5</span></div><div role=\"button\" aria-label=\"Question 6, correct\" style=\"width:28px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:28px;height:28px;border-radius:var(--radius-full);background:var(--success);color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">6</span></div><div role=\"button\" aria-label=\"Question 7, correct\" style=\"width:28px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:28px;height:28px;border-radius:var(--radius-full);background:var(--success);color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">7</span></div><div role=\"button\" aria-label=\"Question 8, wrong\" style=\"width:28px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:28px;height:28px;box-sizing:border-box;border-radius:var(--radius-full);border:2px solid var(--error);color:var(--errorText);display:flex;align-items:center;justify-content:center\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg></span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">8</span></div><div role=\"button\" aria-label=\"Question 9, wrong\" style=\"width:28px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:28px;height:28px;box-sizing:border-box;border-radius:var(--radius-full);border:2px solid var(--error);color:var(--errorText);display:flex;align-items:center;justify-content:center\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg></span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">9</span></div><div role=\"button\" aria-label=\"Question 10, correct\" style=\"width:28px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:28px;height:28px;border-radius:var(--radius-full);background:var(--success);color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">10</span></div></div></div>\n<div style=\"display:flex;flex-direction:column;gap:8px\"><span class=\"t-beschriftung\" style=\"color:var(--textSecondary);padding:0 4px\">Got wrong</span><div style=\"box-sizing:border-box;padding:14px 16px 4px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--divider)\">\n<span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">Question 4 · Absolute value and opposite</span>\n<div style=\"display:flex;align-items:baseline;gap:8px;flex-wrap:wrap\"><span class=\"t-klein\">What is the absolute value?</span><span class=\"t-abschnitt t-ziffern\">|−12|</span></div>\n<div style=\"display:flex;flex-direction:column;gap:4px\"><div style=\"display:flex;align-items:center;gap:8px;color:var(--errorText)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex:none\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg><span class=\"t-klein\" style=\"color:var(--textSecondary)\">Your answer</span><b class=\"t-klein-betont t-ziffern\" style=\"font-weight:600;color:var(--textPrimary)\">−12</b></div><div style=\"display:flex;align-items:center;gap:8px;color:var(--successText)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex:none\"><path d=\"M20 6 9 17l-5-5\"></path></svg><span class=\"t-klein\" style=\"color:var(--textSecondary)\">Correct</span><b class=\"t-klein-betont t-ziffern\" style=\"font-weight:600;color:var(--textPrimary)\">12</b></div></div>\n<span class=\"t-klein\">The absolute value is the distance from zero and never negative.</span>\n<span role=\"link\" class=\"t-klein-betont\" style=\"align-self:flex-start;height:48px;display:flex;align-items:center;font-weight:600;color:var(--accentText)\">Learning path</span>\n</div><div style=\"box-sizing:border-box;padding:14px 16px 4px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--divider)\">\n<span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">Question 8 · Multiplying integers</span>\n<div style=\"display:flex;align-items:baseline;gap:8px;flex-wrap:wrap\"><span class=\"t-klein\">Calculate:</span><span class=\"t-abschnitt t-ziffern\">(−3) · 4</span></div>\n<div style=\"display:flex;flex-direction:column;gap:4px\"><div style=\"display:flex;align-items:center;gap:8px;color:var(--errorText)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex:none\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg><span class=\"t-klein\" style=\"color:var(--textSecondary)\">Your answer</span><b class=\"t-klein-betont t-ziffern\" style=\"font-weight:600;color:var(--textPrimary)\">12</b></div><div style=\"display:flex;align-items:center;gap:8px;color:var(--successText)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex:none\"><path d=\"M20 6 9 17l-5-5\"></path></svg><span class=\"t-klein\" style=\"color:var(--textSecondary)\">Correct</span><b class=\"t-klein-betont t-ziffern\" style=\"font-weight:600;color:var(--textPrimary)\">−12</b></div></div>\n<span class=\"t-klein\">Different signs give minus.</span>\n<span role=\"link\" class=\"t-klein-betont\" style=\"align-self:flex-start;height:48px;display:flex;align-items:center;font-weight:600;color:var(--accentText)\">Learning path</span>\n</div><div style=\"box-sizing:border-box;padding:14px 16px 4px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--divider)\">\n<span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">Question 9 · Multiplying integers</span>\n<div style=\"display:flex;align-items:baseline;gap:8px;flex-wrap:wrap\"><span class=\"t-klein\">Calculate:</span><span class=\"t-abschnitt t-ziffern\">(−6) · (−2)</span></div>\n<div style=\"display:flex;flex-direction:column;gap:4px\"><div style=\"display:flex;align-items:center;gap:8px;color:var(--errorText)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex:none\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg><span class=\"t-klein\" style=\"color:var(--textSecondary)\">Your answer</span><b class=\"t-klein-betont t-ziffern\" style=\"font-weight:600;color:var(--textPrimary)\">−12</b></div><div style=\"display:flex;align-items:center;gap:8px;color:var(--successText)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex:none\"><path d=\"M20 6 9 17l-5-5\"></path></svg><span class=\"t-klein\" style=\"color:var(--textSecondary)\">Correct</span><b class=\"t-klein-betont t-ziffern\" style=\"font-weight:600;color:var(--textPrimary)\">12</b></div></div>\n<span class=\"t-klein\">Same signs give plus.</span>\n<span role=\"link\" class=\"t-klein-betont\" style=\"align-self:flex-start;height:48px;display:flex;align-items:center;font-weight:600;color:var(--accentText)\">Learning path</span>\n</div></div>\n</div>\n<div style=\"position:absolute;left:0;bottom:0;width:720px;box-sizing:border-box;padding:12px 20px 34px;display:flex;flex-direction:column;gap:4px;background:var(--background)\"><div class=\"t-knopf\" style=\"height:48px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-card);background:linear-gradient(var(--accentTint),var(--accentTint)),var(--background);border:1px solid var(--accentBorder);color:var(--textPrimary)\">Practise mistakes again</div><div class=\"t-knopf\" style=\"height:48px;display:flex;align-items:center;justify-content:center;color:var(--accentText)\">Done</div><div style=\"position:absolute;left:293px;bottom:8px;width:134px;height:5px;border-radius:var(--radius-full);background:var(--textPrimary)\"></div></div>\n</div>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script>\nclass Component extends DCLogic {\n  renderVals() {\n    return { theme: this.props.theme ?? 'dark' };\n  }\n}\n</script>\n</body>\n</html>\n","TabletTheorieQuer":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<script src=\"./support.js\"></script>\n</head>\n<body>\n<x-dc>\n<div data-theme=\"{{ theme }}\" data-stil=\"bayati\" data-welt=\"violett\" style=\"position:relative;width:1180px;height:820px;overflow:hidden;background:var(--background);color:var(--textPrimary);font-family:var(--font-sans)\">\n<div class=\"bayati-muster\"></div>\n\n<div style=\"position:absolute;left:230px;top:0;width:720px;height:820px\"><dc-import name=\"TheorieSpalte\" theme=\"{{ theme }}\" stil=\"bayati\" welt=\"violett\" hint-size=\"720px,820px\"></dc-import></div>\n<div style=\"position:absolute;left:0;top:0;width:1180px;height:24px;z-index:5;box-sizing:border-box;padding:0 24px;display:flex;align-items:center;justify-content:space-between\"><span class=\"t-meta\" style=\"font-weight:600\">9:41</span><span style=\"width:25px;height:12px;box-sizing:border-box;border:1px solid var(--textSecondary);border-radius:4px;padding:1px;display:flex\"><span style=\"width:72%;background:var(--textPrimary);border-radius:2px\"></span></span></div>\n</div>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script>\nclass Component extends DCLogic {\n  renderVals() {\n    return { theme: this.props.theme ?? 'dark' };\n  }\n}\n</script>\n</body>\n</html>\n","TheorieSpalte":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<script src=\"./support.js\"></script>\n</head>\n<body>\n<x-dc>\n<div data-theme=\"{{ theme }}\" data-stil=\"{{ stil }}\" data-welt=\"{{ welt }}\" style=\"position:relative;width:720px;height:820px;overflow:hidden;color:var(--textPrimary);font-family:var(--font-sans)\">\n<sc-if value=\"{{ mitMuster }}\" hint-placeholder-val=\"{{ true }}\"></sc-if>\n\n<header style=\"position:absolute;left:0;top:24px;width:720px;height:60px\">\n<div style=\"height:56px;box-sizing:border-box;padding:0 20px 0 8px;display:flex;align-items:center\">\n<div style=\"width:48px;height:48px;flex:none;display:flex;align-items:center;justify-content:center\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg></div>\n<div class=\"t-klein-betont\" style=\"flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis\">7.01.04 Absolute value and opposite</div>\n<div class=\"t-meta t-ziffern\" style=\"flex:none;margin-left:12px;color:var(--textTertiary)\">2 / 9</div>\n</div>\n<div style=\"margin:0 20px;height:4px;border-radius:var(--radius-full);background:var(--surfaceLight);overflow:hidden\"><div style=\"width:22%;height:100%;border-radius:var(--radius-full);background:var(--accent)\"></div></div>\n</header>\n<div style=\"position:relative;box-sizing:border-box;padding:100px 20px 118px;display:flex;flex-direction:column;gap:24px\">\n<div style=\"display:flex;flex-direction:column;gap:12px\"><h1 class=\"t-titel\" style=\"margin:0\">Distance from zero</h1><p class=\"t-fliesstext\" style=\"margin:0\">The absolute value of a number is its distance from zero on the number line. It is written with two vertical bars.</p></div>\n<div class=\"bayati-karo\" style=\"box-sizing:border-box;padding:24px 16px 16px;display:flex;flex-direction:column;align-items:center;gap:12px;background-color:var(--surface);border:1px solid light-dark(var(--glassBorder),transparent);border-radius:var(--radius-md)\"><span style=\"font-size:22px;line-height:28px\">\\(|-5| = 5\\)</span><span class=\"t-meta\" style=\"color:var(--textTertiary)\">The distance from −5 to zero is 5.</span></div>\n<ol style=\"margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:16px\">\n<li style=\"display:flex;gap:12px\"><span class=\"t-meta t-ziffern\" style=\"width:24px;height:24px;flex:none;border-radius:var(--radius-full);background:var(--accentTint);color:var(--accentText);font-weight:600;display:flex;align-items:center;justify-content:center\">1</span><div style=\"display:flex;flex-direction:column;gap:4px\"><span class=\"t-klein-betont\" style=\"font-weight:600\">Find the number on the number line</span><span style=\"font-size:17px;line-height:24px\">\\(-5\\)</span></div></li>\n<li style=\"display:flex;gap:12px\"><span class=\"t-meta t-ziffern\" style=\"width:24px;height:24px;flex:none;border-radius:var(--radius-full);background:var(--accentTint);color:var(--accentText);font-weight:600;display:flex;align-items:center;justify-content:center\">2</span><div style=\"display:flex;flex-direction:column;gap:4px\"><span class=\"t-klein-betont\" style=\"font-weight:600\">Count the steps to zero</span><span style=\"font-size:17px;line-height:24px\">\\(-5 \\to 0\\)</span></div></li>\n<li style=\"display:flex;gap:12px\"><span class=\"t-meta t-ziffern\" style=\"width:24px;height:24px;flex:none;border-radius:var(--radius-full);background:var(--accentTint);color:var(--accentText);font-weight:600;display:flex;align-items:center;justify-content:center\">3</span><div style=\"display:flex;flex-direction:column;gap:4px\"><span class=\"t-klein-betont\" style=\"font-weight:600\">Write down the absolute value</span><span style=\"font-size:17px;line-height:24px\">\\(|-5| = 5\\)</span></div></li>\n</ol>\n<div style=\"position:relative;overflow:hidden;box-sizing:border-box;padding:14px 16px;display:flex;flex-direction:column;gap:4px;background:var(--accentTint);border:1px solid var(--accentBorder);border-radius:var(--radius-card)\"><span class=\"t-beschriftung\" style=\"color:var(--accentText)\">Remember</span><span class=\"t-klein-betont\">An absolute value is never negative.</span></div>\n<div style=\"position:relative;overflow:hidden;box-sizing:border-box;padding:14px 16px 14px 20px;display:flex;flex-direction:column;gap:4px;background:var(--warningFill);border-radius:var(--radius-md)\"><span style=\"position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--warning)\"></span><span class=\"t-beschriftung\" style=\"color:var(--warningText)\">Watch out</span><span class=\"t-klein-betont\">\\(-\\lvert -5 \\rvert\\) is \\(-5\\), not \\(5\\).</span></div>\n<sc-if value=\"{{ verdeckt }}\" hint-placeholder-val=\"{{ true }}\"><div style=\"box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:4px;border:1px dashed var(--accentBorder);border-radius:var(--radius-card)\"><span class=\"t-klein-betont\" style=\"font-weight:600\">What is \\(|-12|\\)?</span><span class=\"t-meta\" style=\"color:var(--textTertiary)\">Tap to see the answer</span></div></sc-if>\n<sc-if value=\"{{ aufgedeckt }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:8px;border:1px solid var(--accentBorder);border-radius:var(--radius-md)\"><span class=\"t-klein-betont\" style=\"font-weight:600\">What is \\(|-12|\\)?</span><span style=\"font-size:22px;line-height:28px\">\\(|-12| = 12\\)</span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">From −12 to zero it is 12 steps.</span></div></sc-if>\n<div style=\"height:160px;box-sizing:border-box;padding:16px;border-radius:var(--radius-md);background:var(--surfaceLight);display:flex;align-items:center;justify-content:center\"><span class=\"t-meta\" style=\"color:var(--textSecondary);text-align:center;max-width:240px\">Drawing: number line from −6 to 6, distance from −5 to zero marked</span></div>\n</div>\n<div style=\"position:absolute;left:0;bottom:0;width:720px;height:94px;box-sizing:border-box;padding:12px 20px 34px;display:flex;gap:12px;background:var(--background)\">\n<div style=\"width:56px;height:48px;flex:none;box-sizing:border-box;border-radius:var(--radius-card);border:1px solid var(--accentBorder);color:var(--accentText);display:flex;align-items:center;justify-content:center\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m12 19-7-7 7-7\"></path><path d=\"M19 12H5\"></path></svg></div>\n<div class=\"t-knopf\" style=\"flex:1;height:48px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-card);background:linear-gradient(var(--accentTint),var(--accentTint)),var(--background);border:1px solid var(--accentBorder);color:var(--textPrimary)\">Next</div>\n<div style=\"position:absolute;left:293px;bottom:8px;width:134px;height:5px;border-radius:var(--radius-full);background:var(--textPrimary)\"></div>\n</div>\n</div>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script>\nclass Component extends DCLogic {\n  componentDidMount() {\n    let n = 0;\n    const go = () => {\n      const mj = window.MathJax;\n      if (mj && mj.typesetPromise) mj.typesetPromise().catch(() => {});\n      else if (n++ < 60) setTimeout(go, 200);\n    };\n    go();\n  }\n  renderVals() {\n    const stil = this.props.stil ?? 'bayati';\n    const auf = !!this.props.aufgedeckt;\n    return { theme: this.props.theme ?? 'dark', stil, welt: stil === 'bayati' ? (this.props.welt ?? 'violett') : '', mitMuster: true, aufgedeckt: auf, verdeckt: !auf };\n  }\n}\n</script>\n</body>\n</html>\n","ProbierAufgabe":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<script src=\"./support.js\"></script>\n</head>\n<body>\n<x-dc>\n<helmet><script src=\"/entwurf/ds-base.js\"></script></helmet>\n<div ref=\"{{ wurzel }}\" data-theme=\"{{ theme }}\" data-stil=\"bayati\" data-welt=\"violett\" style=\"max-width:{{ breite }};display:flex;flex-direction:column;gap:40px;color:var(--textPrimary);font-family:var(--font-sans)\">\n<div style=\"display:flex;align-items:center;flex-wrap:wrap;gap:12px 32px;padding-bottom:20px;border-bottom:1px solid var(--divider)\"><span class=\"t-abschnitt\">Which grade are you in?</span><div role=\"radiogroup\" aria-label=\"Grade\" style=\"display:flex;flex-wrap:wrap;gap:4px\"><sc-for list=\"{{ klassen }}\" as=\"k\" hint-placeholder-count=\"4\"><sc-if value=\"{{ k.an }}\" hint-placeholder-val=\"{{ false }}\"><span role=\"radio\" aria-checked=\"true\" class=\"t-klein-betont t-ziffern\" style=\"height:44px;min-width:64px;box-sizing:border-box;padding:0 14px;display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--textPrimary);border-bottom:2px solid var(--accent);padding-top:2px\">Gr. {{ k.g }}</span></sc-if><sc-if value=\"{{ k.aus }}\" hint-placeholder-val=\"{{ true }}\"><span role=\"radio\" aria-checked=\"false\" onClick=\"{{ k.klick }}\" class=\"t-klein-betont t-ziffern\" style=\"height:44px;min-width:64px;box-sizing:border-box;padding:0 14px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-bottom:2px solid transparent;padding-top:2px;color:var(--textSecondary)\" style-hover=\"color:var(--textPrimary)\">Gr. {{ k.g }}</span></sc-if></sc-for></div></div>\n<div style=\"display:flex;gap:64px;align-items:flex-start\">\n<sc-if value=\"{{ mitListe }}\" hint-placeholder-val=\"{{ false }}\"><nav aria-label=\"Questions\" style=\"width:248px;flex:none;display:flex;flex-direction:column;gap:4px\"><span class=\"t-beschriftung t-ziffern\" style=\"padding:0 16px 12px;color:var(--textSecondary)\">Grade {{ klasse }} · {{ anzahl }} questions</span><sc-for list=\"{{ eintraege }}\" as=\"e\" hint-placeholder-count=\"3\"><sc-if value=\"{{ e.an }}\" hint-placeholder-val=\"{{ false }}\"><div aria-current=\"step\" style=\"min-height:56px;box-sizing:border-box;padding:8px 16px;display:flex;align-items:center;gap:12px;border-radius:var(--radius-card);background:linear-gradient(var(--accentTint),var(--accentTint)),var(--background);border:1px solid var(--accentBorder)\"><span style=\"width:24px;flex:none;display:flex;justify-content:center\"><sc-if value=\"{{ e.r }}\" hint-placeholder-val=\"{{ false }}\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--successText)\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-label=\"correct\"><path d=\"M20 6 9 17l-5-5\"></path></svg></sc-if><sc-if value=\"{{ e.f }}\" hint-placeholder-val=\"{{ false }}\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--errorText)\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-label=\"wrong\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg></sc-if><sc-if value=\"{{ e.offen }}\" hint-placeholder-val=\"{{ true }}\"><span class=\"t-klein-betont t-ziffern\" style=\"font-weight:600;color:var(--accentText)\">{{ e.nr }}</span></sc-if></span><span class=\"t-klein-betont\" style=\"flex:1;min-width:0;font-weight:600;text-wrap:pretty\">{{ e.thema }}</span></div></sc-if><sc-if value=\"{{ e.aus }}\" hint-placeholder-val=\"{{ true }}\"><div role=\"button\" tabIndex=\"0\" onClick=\"{{ e.klick }}\" style=\"min-height:56px;box-sizing:border-box;padding:8px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;border-radius:var(--radius-card);border:1px solid transparent;color:var(--textSecondary)\" style-hover=\"color:var(--textPrimary)\"><span style=\"width:24px;flex:none;display:flex;justify-content:center\"><sc-if value=\"{{ e.r }}\" hint-placeholder-val=\"{{ false }}\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--successText)\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-label=\"correct\"><path d=\"M20 6 9 17l-5-5\"></path></svg></sc-if><sc-if value=\"{{ e.f }}\" hint-placeholder-val=\"{{ false }}\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--errorText)\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-label=\"wrong\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg></sc-if><sc-if value=\"{{ e.offen }}\" hint-placeholder-val=\"{{ true }}\"><span class=\"t-klein-betont t-ziffern\" style=\"font-weight:600;color:var(--textTertiary)\">{{ e.nr }}</span></sc-if></span><span class=\"t-klein-betont\" style=\"flex:1;min-width:0;font-weight:600;text-wrap:pretty\">{{ e.thema }}</span></div></sc-if></sc-for></nav></sc-if>\n<div style=\"flex:1;min-width:0;display:grid;grid-template-columns:{{ spalten }};column-gap:48px;row-gap:24px;align-items:start\">\n<sc-if value=\"{{ ohneListe }}\" hint-placeholder-val=\"{{ true }}\"><div style=\"grid-column:1;display:flex;align-items:center;gap:8px\"><span class=\"t-meta t-ziffern\" style=\"flex:1;color:var(--textSecondary)\">Question {{ nr }} of {{ anzahl }}</span><span role=\"button\" aria-label=\"Previous question\" onClick=\"{{ zurueck }}\" style=\"width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--textSecondary)\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m15 18-6-6 6-6\"></path></svg></span><div aria-hidden=\"true\" style=\"display:flex;align-items:center;gap:6px\"><sc-for list=\"{{ punkte }}\" as=\"d\" hint-placeholder-count=\"2\"><sc-if value=\"{{ d.an }}\" hint-placeholder-val=\"{{ true }}\"><span style=\"width:24px;height:8px;border-radius:var(--radius-full);background:var(--accent)\"></span></sc-if><sc-if value=\"{{ d.aus }}\" hint-placeholder-val=\"{{ false }}\"><span style=\"width:8px;height:8px;border-radius:var(--radius-full);background:var(--surfaceLight)\"></span></sc-if></sc-for></div><span role=\"button\" aria-label=\"Next question\" onClick=\"{{ vor }}\" style=\"width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--textSecondary)\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 18 6-6-6-6\"></path></svg></span></div></sc-if>\n<sc-if value=\"{{ z.rabatt }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Rabatt\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.thermometer }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Thermometer\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.dreisatzgraph }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Dreisatz Graph\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.winkel }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Winkel\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.kugeln }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Kugeln\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.zinsen }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Zinsen\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.umstellen }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Umstellen\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.taxi }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Taxi\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.gluecksrad }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Gluecksrad\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.pythagoras }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Pythagoras\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.parabel }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Parabel\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.faktorisieren }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Faktorisieren\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.potenzen }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Potenzen\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.dreieckseiten }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Dreieck Seiten\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.exponential }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Exponential\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.polynomdivision }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Polynomdivision\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.sinus }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Sinus\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.kurvendiskussion }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Kurvendiskussion\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ istAlt }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"ProbierModell\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" aufgabe=\"{{ aufgabe }}\" on-next=\"{{ naechste }}\" hint-size=\"100%,560px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ fertig }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;display:flex;flex-direction:column;gap:20px;padding:24px 0\"><span class=\"t-titel t-ziffern\" style=\"text-wrap:pretty\">That was 5 of more than 1,000 questions.</span><div style=\"display:flex;flex-wrap:wrap;align-items:center;gap:8px 32px\"><a href=\"#\" class=\"t-knopf\" style=\"height:48px;box-sizing:border-box;padding:0 24px;display:flex;align-items:center;gap:8px;text-decoration:none;border-radius:var(--radius-card);border:1px solid var(--accentBorder);color:var(--textPrimary);background:linear-gradient(var(--accentTint),var(--accentTint)),var(--background)\">Continue in the app<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 12h14\"></path><path d=\"m12 5 7 7-7 7\"></path></svg></a><span role=\"button\" onClick=\"{{ nochmal5 }}\" class=\"t-klein-betont\" style=\"height:48px;display:flex;align-items:center;font-weight:600;cursor:pointer;color:var(--accentText)\">Five new questions</span></div></div></sc-if>\n<sc-if value=\"{{ linkUnten }}\" hint-placeholder-val=\"{{ true }}\"><a href=\"#\" class=\"t-klein-betont\" style=\"grid-column:1;justify-self:start;height:48px;display:flex;align-items:center;gap:6px;font-weight:600;text-decoration:none;color:var(--accentText)\">Continue in the app<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 18 6-6-6-6\"></path></svg></a></sc-if>\n</div>\n</div>\n</div>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script data-props=\"{&quot;$preview&quot;:{&quot;width&quot;:1120,&quot;height&quot;:760},&quot;theme&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;light&quot;,&quot;dark&quot;],&quot;default&quot;:&quot;light&quot;,&quot;tsType&quot;:&quot;'light' | 'dark'&quot;},&quot;nebeneinander&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:true,&quot;tsType&quot;:&quot;boolean&quot;}}\">\nclass Component extends DCLogic {\n  // Klasse 7: fünf Themen, je drei Aufgaben; Option 0 ist jeweils die richtige, gemischt wird beim Ziehen.\n  T7 = [\n    { thema: 'Percentages', v: 'pz', pool: [\n      { id: '1.1', frage: 'A hoodie costs €60. It is 25% off. How much do you pay?', optionen: ['€45', '€15', '€35', '€50'], d: { preis: 60, prozent: 25 } },\n      { id: '1.2', frage: 'A game costs €40. You get 50% off. How much do you save?', optionen: ['€20', '€10', '€50', '€30'], d: { preis: 40, prozent: 50, sparen: true } },\n      { id: '1.3', frage: 'Sneakers cost €120. 10% off. How much do you pay?', optionen: ['€108', '€12', '€110', '€100'], d: { preis: 120, prozent: 10 } } ] },\n    { thema: 'Negative numbers', v: 'th', pool: [\n      { id: '2.1', frage: 'In the morning it is −3 °C. By noon the temperature rises by 8 °C. How warm is it at noon?', optionen: ['5 °C', '11 °C', '−11 °C', '−5 °C'], d: { start: -3, schritt: 8 } },\n      { id: '2.2', frage: 'In the evening it is 4 °C. At night the temperature drops by 9 °C. How cold is it at night?', optionen: ['−5 °C', '5 °C', '−13 °C', '13 °C'], d: { start: 4, schritt: -9 } },\n      { id: '2.3', frage: 'It is 6 °C in Berlin and −4 °C in Oslo. How much warmer is it in Berlin?', optionen: ['10 °C', '2 °C', '−10 °C', '4 °C'], d: { a: 6, b: -4, namen: ['Berlin', 'Oslo'] } } ] },\n    { thema: 'Proportional relationships', v: 'ds', pool: [\n      { id: '3.1', frage: '4 bread rolls cost €1.60. How much do 10 rolls cost?', optionen: ['€4.00', '€6.40', '€16.00', '€3.20'], d: { kopf: ['Rolls', 'Euro'], z1: ['4', '€1.60'], teiler: '÷ 4', z2: ['1', '€0.40'], faktor: '× 10', z3: ['10', '€4.00'] } },\n      { id: '3.2', frage: '3 cinema tickets cost €24. How much do 5 tickets cost?', optionen: ['€40', '€32', '€45', '€26'], d: { kopf: ['Tickets', 'Euro'], z1: ['3', '€24'], teiler: '÷ 3', z2: ['1', '€8'], faktor: '× 5', z3: ['5', '€40'] } },\n      { id: '3.3', frage: 'A car drives 150 km in 2 hours. How far does it get in 5 hours?', optionen: ['375 km', '300 km', '450 km', '225 km'], d: { kopf: ['Hours', 'km'], z1: ['2', '150 km'], teiler: '÷ 2', z2: ['1', '75 km'], faktor: '× 5', z3: ['5', '375 km'] } } ] },\n    { thema: 'Angle sum in a triangle', v: 'wi', pool: [\n      { id: '4.1', frage: 'Two angles of a triangle are 50° and 70°. How big is the third?', optionen: ['60°', '120°', '240°', '50°'], d: { w: [50, 70, 60], frag: [2] } },\n      { id: '4.2', frage: 'A triangle has a right angle and an angle of 35°. How big is the third?', optionen: ['55°', '145°', '35°', '65°'], d: { w: [90, 35, 55], frag: [2], recht: 0 } },\n      { id: '4.3', frage: 'Two angles of a triangle are equal, the third is 100°. How big is each of the two?', optionen: ['40°', '80°', '100°', '130°'], d: { w: [40, 40, 100], frag: [0, 1] } } ] },\n    { thema: 'Probability', v: 'ku', pool: [\n      { id: '5.1', frage: 'A bag holds 3 red and 5 blue balls. What is the probability of drawing a red one?', optionen: ['3/8', '3/5', '5/8', '1/3'], d: { kugeln: [['red', 3], ['blue', 5]], gesucht: ['red'] } },\n      { id: '5.2', frage: 'A wheel of fortune has 6 equal sections, 2 of them green. What is the probability of green?', optionen: ['1/3', '2/4', '1/2', '2/3'], d: { rad: true, kugeln: [['green', 2], ['grey', 4]], gesucht: ['green'], extra: '= 1/3' } },\n      { id: '5.3', frage: 'A bowl holds 4 red, 2 yellow and 4 green gummy bears. What is the probability of not drawing a red one?', optionen: ['6/10', '4/10', '2/10', '4/6'], d: { kugeln: [['red', 4], ['yellow', 2], ['green', 4]], gesucht: ['yellow', 'green'] } } ] }\n  ];\n  N = {\"7\":[\"Winkel\",\"Dreisatz Graph\",\"Thermometer\",\"Kugeln\"],\"8\":[\"Zinsen\",\"Umstellen\",\"Taxi\",\"Gluecksrad\",\"Pythagoras\"],\"9\":[\"Parabel\",\"Faktorisieren\",\"Potenzen\",\"Dreieck Seiten\"],\"10\":[\"Exponential\",\"Polynomdivision\",\"Sinus\",\"Kurvendiskussion\"]};\n  TH = { 'Rabatt': 'Percentages', 'Thermometer': 'Negative numbers', 'Dreisatz Graph': 'Proportional relationships', 'Winkel': 'Angle sum in a triangle', 'Kugeln': 'Probability', 'Zinsen': 'Interest', 'Umstellen': 'Rearranging formulas', 'Taxi': 'Linear functions', 'Gluecksrad': 'Probability', 'Pythagoras': 'Pythagoras’ theorem', 'Parabel': 'Quadratic functions', 'Faktorisieren': 'Quadratic equations', 'Potenzen': 'Laws of exponents', 'Dreieck Seiten': 'Trigonometry', 'Exponential': 'Exponential functions', 'Polynomdivision': 'Polynomial division', 'Sinus': 'Sine functions', 'Kurvendiskussion': 'Curve sketching', w10: 'Cube net', zy10: 'Cylinder', si10: 'Sine', bd10: 'Tree diagram' };\n  state = { klasse: 7, idx: 0, fertig: false, runde: this.ziehe(), erg: {} };\n  ziehe() {\n    return this.T7.map((t) => { const a = t.pool[Math.floor(Math.random() * t.pool.length)]; const ord = [0, 1, 2, 3].sort(() => Math.random() - .5);\n      return Object.assign({}, a, { thema: t.thema, v: t.v, optionen: ord.map((i) => a.optionen[i]), richtig: ord.indexOf(0), id: a.id + '-' + ord.join('') }); });\n  }\n  A = {\n    8: [\n      { id: 'py8', v: 'py', pool: [1, 2], frage: 'The legs are a = 3 cm and b = 4 cm. How long is the hypotenuse c?', optionen: ['7 cm', '5 cm', '25 cm', '6 cm'], richtig: 1, weg: ['c² = 3² + 4² = 9 + 16.', 'c² = 25.', 'c = √25 = 5 cm.'] },\n      { id: 'g8', v: 'g', pool: [2], frage: 'Where does the line y = 2x + 1 cross the y-axis?', optionen: ['(1 | 0)', '(0 | 2)', '(0 | 1)', '(0 | −1)'], richtig: 2, weg: ['On the y-axis, x = 0.', 'y = 2 · 0 + 1 = 1.', 'The intersection is (0 | 1).'] },\n      { id: 'k8', v: 'k', pool: [1, 2], frage: 'A circle has radius r = 4 cm. What is its area?', optionen: ['≈ 25.1 cm²', '≈ 12.6 cm²', '≈ 50.3 cm²', '≈ 100.5 cm²'], richtig: 2, weg: ['Rearranged, the circle’s slices almost form a rectangle: π · r wide, r high.', 'A = π · r² = π · 4 · 4.', 'π · 16 ≈ 50.3 cm².'] },\n      { id: 'ur8', v: 'ur', pool: [1, 2], frage: 'An urn holds 3 blue and 5 red balls. You draw one. What is P(blue)?', optionen: ['3/5', '5/8', '3/8', '1/3'], richtig: 2, weg: ['Favourable: 3 blue balls.', 'Possible: 3 + 5 = 8 balls.', 'P(blue) = 3/8 = 37.5%.'] }\n    ],\n    9: [\n      { id: 'pr9', v: 'pr', pool: [1, 2], frage: 'A pyramid has a square base with a = 6 cm and height h = 9 cm. What is its volume?', optionen: ['324 cm³', '54 cm³', '162 cm³', '108 cm³'], richtig: 3, weg: ['Base area G = 6 · 6 = 36 cm².', 'A cuboid with the same base and height holds 36 · 9 = 324 cm³.', 'The pyramid fills a third of it: 324 : 3 = 108 cm³.'] },\n      { id: 'g9', v: 'g', pool: [0, 2], frage: 'What are the zeros of the parabola y = x² − 4?', optionen: ['x = 0 and x = 4', 'x = −2 and x = 2', 'x = −4 and x = 4', 'only x = 0'], richtig: 1, weg: ['Zeros means y = 0, so x² − 4 = 0.', 'x² = 4.', 'x = −2 or x = 2.'] },\n      { id: 'st9', v: 'st', pool: [1, 2], frage: 'You are 1.80 m tall and cast a 3 m shadow. The tree’s shadow is 10 m long. How tall is the tree?', optionen: ['5 m', '6 m', '7.5 m', '12 m'], richtig: 1, weg: ['Same sun, same angle: both triangles have the same shape.', 'The tree’s shadow is 10 : 3 ≈ 3.3 times as long as yours.', 'So the tree is 1.8 · 10 : 3 = 6 m tall.'] },\n      { id: 'sp9', v: 'sp', pool: [1, 2], frage: 'Where is the vertex of the parabola y = (x − 2)² + 1?', optionen: ['S(−2 | 1)', 'S(2 | 1)', 'S(2 | −1)', 'S(1 | 2)'], richtig: 1, weg: ['Start with the standard parabola y = x² with vertex (0 | 0).', '(x − 2)² shifts it 2 to the right.', '+ 1 shifts it 1 up: S(2 | 1).'] }\n    ],\n    10: [\n      { id: 'w10', v: 'w', pool: [0], frage: 'The net is folded into a cube. Which number is then opposite the 2?', optionen: ['1', '4', '5', '6'], richtig: 1, weg: ['Red is the bottom, the 5 folds on top.', '1 and 6 become the back and the front.', '2 and 4 fold up on the left and right: the 4 is opposite the 2.'] },\n      { id: 'zy10', v: 'zy', pool: [1, 2], frage: 'A cylinder has radius r = 3 cm and height h = 5 cm. What is its surface area?', optionen: ['≈ 94.2 cm²', '≈ 150.8 cm²', '≈ 75.4 cm²', '≈ 141.4 cm²'], richtig: 1, weg: ['Top and bottom: 2 · π · 3² ≈ 56.5 cm².', 'The unrolled side is a rectangle: 2π · 3 · 5 ≈ 94.2 cm².', 'Together ≈ 150.8 cm².'] },\n      { id: 'si10', v: 'si', pool: [1, 2], frage: 'What is sin 150°?', optionen: ['0.5', '0.87', '−0.5', '1'], richtig: 0, weg: ['150° is 30° short of the 180° mark.', 'The point at 150° mirrors 30° across the y-axis: same height.', 'sin 150° = sin 30° = 0.5.'] },\n      { id: 'bd10', v: 'bd', pool: [1, 2], frage: 'You toss a coin twice. What is the probability of two heads?', optionen: ['½', '¼', '⅓', '⅛'], richtig: 1, weg: ['First toss: P(heads) = ½.', 'Second toss: ½ again, independent of the first.', 'Multiply along the path: ½ · ½ = ¼.'] }\n    ]\n  };\n  wurzel = (el) => { this.el = el; };\n  componentDidMount() { if (!this.el || !window.ResizeObserver) return; this.ro = new ResizeObserver(() => { const w = this.el.clientWidth; if (w !== this.state.w) this.setState({ w }); }); this.ro.observe(this.el); }\n  componentWillUnmount() { this.ro && this.ro.disconnect(); }\n  renderVals() {\n    const k = this.state.klasse, alt = this.A[k] || [], L = (this.N[k] || alt).map(x => typeof x === 'string' ? (alt.find(a => a.id === x) || x) : x), n = L.length, i = this.state.idx % n, nb = !!this.props.nebeneinander, cur = L[i], neu = typeof cur === 'string';\n    const z = {}; Object.values(this.N).forEach(l => l.forEach(f => { z[f.toLowerCase().replace(/ /g, '')] = false; }));\n    if (neu) z[cur.toLowerCase().replace(/ /g, '')] = true;\n    const erg = this.state.erg, mitListe = nb && this.props.liste !== false;\n    return { theme: this.props.theme ?? 'light', wurzel: this.wurzel, bildBreite: nb ? 0 : (this.props.bildBreite || this.state.w || 0), nebeneinander: nb, breite: nb ? 'none' : '640px', spalten: nb && !mitListe ? 'minmax(0,1fr) 448px' : 'minmax(0,1fr)',\n      mitListe, ohneListe: !mitListe, klasse: k,\n      eintraege: L.map((a, d) => { const r = erg[k + '-' + d]; return { nr: d + 1, thema: this.TH[typeof a === 'string' ? a : a.id] || '', an: d === i, aus: d !== i, r: r === 'r', f: r === 'f', offen: !r, klick: () => this.setState({ idx: d }) }; }),\n      ergebnis: (e) => { if (!e) return; const key = k + '-' + i; if (this.state.erg[key] === e) return; this.setState(s => ({ erg: Object.assign({}, s.erg, { [key]: e }) })); }, nr: i + 1, anzahl: n, aufgabe: neu ? null : L[i],\n      z, istAlt: !neu, fertig: false, linkUnten: true,\n      klassen: [7, 8, 9, 10].map(g => ({ g, an: g === k, aus: g !== k, klick: () => this.setState({ klasse: g, idx: 0 }) })),\n      punkte: L.map((_, d) => ({ an: d === i, aus: d !== i })),\n      naechste: () => this.setState({ idx: (i + 1) % n }), nochmal5: () => this.setState({ idx: 0 }),\n      vor: () => this.setState({ idx: (i + 1) % n }), zurueck: () => this.setState({ idx: (i + n - 1) % n }) };\n  }\n}\n</script>\n</body>\n</html>\n","Aufgabe Winkel":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<script src=\"./support.js\"></script>\n</head>\n<body>\n<x-dc>\n<helmet><script src=\"/entwurf/ds-base.js\"></script><style>body{margin:0}</style></helmet>\n<div data-theme=\"{{ theme }}\" data-stil=\"bayati\" data-welt=\"violett\" style=\"display:grid;grid-template-columns:{{ spalten }};gap:{{ luecke }};align-items:center;padding:{{ rand }};background:{{ grund }};color:var(--textPrimary);font-family:var(--font-sans)\">\n<div style=\"grid-column:1;grid-row:1;min-width:0;display:flex;flex-direction:column;gap:20px\">\n<span class=\"t-beschriftung\" style=\"color:var(--accentText)\">Grade 7 · Angle sum in a triangle</span>\n<span class=\"t-abschnitt\" style=\"text-wrap:pretty\">Two angles of a triangle are 50° and 70°. How big is the third angle γ?</span>\n<sc-if value=\"{{ offen }}\" hint-placeholder-val=\"{{ true }}\"><span class=\"t-fliesstext\" style=\"color:var(--textSecondary);text-wrap:pretty\">Open the arc on the protractor as wide as γ. Then check.</span></sc-if>\n<sc-if value=\"{{ richtig }}\" hint-placeholder-val=\"{{ false }}\"><div role=\"status\" style=\"display:flex;flex-direction:column;gap:6px;color:var(--successText)\"><div style=\"display:flex;gap:10px;align-items:center\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none\"><path d=\"M20 6 9 17l-5-5\"></path></svg><span class=\"t-titel\" style=\"font-family:var(--font-display);font-weight:700\">Correct!</span></div><span class=\"t-klein-betont t-ziffern\" style=\"font-weight:600\">180° − 50° − 70° = 60°.</span></div></sc-if>\n<sc-if value=\"{{ falsch }}\" hint-placeholder-val=\"{{ false }}\"><div role=\"status\" style=\"display:flex;flex-direction:column;gap:6px;color:var(--errorText)\"><div style=\"display:flex;gap:10px;align-items:center\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg><span class=\"t-titel\" style=\"font-family:var(--font-display);font-weight:700\">Wrong!</span></div><span class=\"t-klein-betont t-ziffern\" style=\"font-weight:600\">You had {{ wertText }}, the answer is 60°.</span></div></sc-if>\n<sc-if value=\"{{ kann }}\" hint-placeholder-val=\"{{ false }}\"><div role=\"button\" onClick=\"{{ pruefen }}\" class=\"t-knopf\" style=\"height:48px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-card);border:1px solid var(--accentBorder);color:var(--textPrimary);background:linear-gradient(var(--accentTint),var(--accentTint)),var(--background);cursor:pointer\">Check</div></sc-if>\n<sc-if value=\"{{ gesperrt }}\" hint-placeholder-val=\"{{ true }}\"><div role=\"button\" aria-disabled=\"true\" class=\"t-knopf\" style=\"height:48px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-card);border:1px solid var(--accentBorder);color:var(--textPrimary);background:linear-gradient(var(--accentTint),var(--accentTint)),var(--background);opacity:.45\">Check</div></sc-if>\n<sc-if value=\"{{ geprueft }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px\"><div role=\"button\" onClick=\"{{ reset }}\" class=\"t-knopf\" style=\"height:48px;padding:0 24px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:var(--radius-card);border:1px solid var(--accentBorder);color:var(--textPrimary);background:linear-gradient(var(--accentTint),var(--accentTint)),var(--background);cursor:pointer\">Solve again</div></div></sc-if>\n</div>\n<div style=\"zoom:{{ bildZoom }};grid-column:{{ mcol }};grid-row:{{ mrow }};justify-self:{{ mself }};position:relative;width:560px;height:360px;touch-action:none;user-select:none\">\n<svg width=\"560\" height=\"360\" viewBox=\"0 0 560 360\" aria-hidden=\"true\" style=\"position:absolute;inset:0;overflow:visible\">\n<line x1=\"{{ ax }}\" y1=\"{{ ay }}\" x2=\"{{ bx }}\" y2=\"{{ by }}\" stroke=\"var(--textPrimary)\" stroke-width=\"2\" stroke-linecap=\"round\"></line>\n<path d=\"{{ seiteA }}\" pathLength=\"1\" fill=\"none\" stroke=\"var(--textPrimary)\" stroke-width=\"2\" stroke-linecap=\"round\" style=\"stroke-dasharray:1;stroke-dashoffset:{{ seitenOff }};transition:{{ trSeiten }}\"></path>\n<path d=\"{{ seiteB }}\" pathLength=\"1\" fill=\"none\" stroke=\"var(--textPrimary)\" stroke-width=\"2\" stroke-linecap=\"round\" style=\"stroke-dasharray:1;stroke-dashoffset:{{ seitenOff }};transition:{{ trSeiten }}\"></path>\n<path d=\"{{ halbkreis }}\" fill=\"none\" stroke=\"var(--divider)\" stroke-width=\"1.5\"></path>\n<path d=\"{{ dialTicks }}\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"1.5\" stroke-linecap=\"round\" style=\"opacity:{{ opOffen }};transition:opacity .3s\"></path>\n<path d=\"{{ wA }}\" fill=\"var(--pairIndigo)\" style=\"opacity:.18;transform:{{ tA0 }}\"></path>\n<path d=\"{{ wB }}\" fill=\"var(--pairAmber)\" style=\"opacity:.18;transform:{{ tB0 }}\"></path>\n<path d=\"{{ wCZiel }}\" fill=\"var(--pairTeal)\" stroke=\"var(--background)\" stroke-width=\"1\" stroke-linejoin=\"round\" style=\"opacity:{{ opGeistC }};transform:{{ tC0 }};transition:opacity .3s\"></path>\n<path d=\"{{ wA }}\" fill=\"var(--pairIndigo)\" stroke=\"var(--background)\" stroke-width=\"1\" stroke-linejoin=\"round\" style=\"transform:{{ tA }};transition:{{ trWeg }}\"></path>\n<path d=\"{{ wB }}\" fill=\"var(--pairAmber)\" stroke=\"var(--background)\" stroke-width=\"1\" stroke-linejoin=\"round\" style=\"transform:{{ tB }};transition:{{ trWegB }}\"></path>\n<path d=\"{{ wC }}\" fill=\"var(--pairTeal)\" stroke=\"var(--background)\" stroke-width=\"1\" stroke-linejoin=\"round\" style=\"transform:{{ tC }};transition:{{ trWegC }}\"></path>\n<path d=\"{{ diffPfad }}\" fill=\"var(--errorFill)\" stroke=\"var(--error)\" stroke-width=\"2\" stroke-dasharray=\"5 4\" stroke-linejoin=\"round\" vector-effect=\"non-scaling-stroke\" style=\"opacity:{{ opDiff }};transform:{{ diffT }};transition:opacity .4s\"></path>\n<line x1=\"{{ basisX1 }}\" y1=\"{{ basisY }}\" x2=\"{{ basisX2 }}\" y2=\"{{ basisY }}\" stroke=\"var(--textTertiary)\" stroke-width=\"1.5\" stroke-linecap=\"round\"></line>\n</svg>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ lA.x }}px;top:{{ lA.y }}px;transform:translate(-50%,-50%);white-space:nowrap;font-weight:600;color:var(--textPrimary)\">50°</span>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ lB.x }}px;top:{{ lB.y }}px;transform:translate(-50%,-50%);white-space:nowrap;font-weight:600;color:var(--textPrimary)\">70°</span>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ lC.x }}px;top:{{ lC.y }}px;transform:translate(-50%,-50%);white-space:nowrap;font-weight:600;color:var(--textPrimary);transition:opacity .4s\">{{ gammaText }}</span>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ hA.x }}px;top:{{ hA.y }}px;transform:translate(-50%,-50%);white-space:nowrap;font-weight:600;color:var(--textSecondary);opacity:{{ opLab }};transition:opacity .4s\">50°</span>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ hB.x }}px;top:{{ hB.y }}px;transform:translate(-50%,-50%);white-space:nowrap;font-weight:600;color:var(--textSecondary);opacity:{{ opLab }};transition:opacity .4s\">70°</span>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ hC.x }}px;top:{{ hC.y }}px;transform:translate(-50%,-50%);white-space:nowrap;font-weight:600;color:var(--textSecondary);opacity:{{ opLab }};transition:opacity .4s\">{{ hCText }}</span>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ dL.x }}px;top:{{ dL.y }}px;transform:translate(-50%,-50%);white-space:nowrap;font-weight:600;color:var(--errorText);opacity:{{ opDiff }};transition:opacity .4s\">{{ diffText }}</span>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ mX }}px;top:{{ summeY }}px;transform:translate(-50%,-50%);white-space:nowrap;font-weight:600;color:var(--accentText);opacity:{{ opWeg }};transition:opacity .4s .8s\">180°</span>\n<span class=\"t-meta t-ziffern\" style=\"position:absolute;left:{{ d0x }}px;top:{{ dTy }}px;transform:translate(-50%,0);white-space:nowrap;color:var(--textTertiary);opacity:{{ opOffen }};transition:opacity .3s\">0°</span>\n<span class=\"t-meta t-ziffern\" style=\"position:absolute;left:{{ d180x }}px;top:{{ dTy }}px;transform:translate(-50%,0);white-space:nowrap;color:var(--textTertiary);opacity:{{ opOffen }};transition:opacity .3s\">180°</span>\n<div style=\"position:absolute;left:336px;top:24px;display:flex;flex-direction:column;gap:6px\"><span class=\"t-beschriftung\" style=\"color:var(--accentText)\">{{ anzeigeLabel }}</span><span class=\"t-ziffern\" style=\"font-family:var(--font-display);font-size:72px;line-height:76px;font-weight:600;letter-spacing:-0.03em;white-space:nowrap;color:{{ anzeigeFarbe }};transition:color .3s\">{{ anzeige }}</span><span class=\"t-klein t-ziffern\" style=\"color:var(--textSecondary);min-height:20px;opacity:{{ unterOp }};transition:opacity .3s\">{{ unter }}</span></div>\n<sc-if value=\"{{ offen }}\" hint-placeholder-val=\"{{ true }}\"><div onPointerDown=\"{{ down }}\" onPointerMove=\"{{ move }}\" onPointerUp=\"{{ up }}\" onPointerCancel=\"{{ up }}\" style=\"position:absolute;left:356px;top:246px;width:170px;height:100px;cursor:{{ cursor }}\"></div>\n<span role=\"slider\" tabIndex=\"0\" aria-label=\"Angle γ on the protractor\" aria-valuemin=\"1\" aria-valuemax=\"179\" aria-valuenow=\"{{ wert }}\" onKeyDown=\"{{ taste }}\" onPointerDown=\"{{ down }}\" onPointerMove=\"{{ move }}\" onPointerUp=\"{{ up }}\" onPointerCancel=\"{{ up }}\" style=\"position:absolute;left:{{ gx }}px;top:{{ gy }}px;width:14px;height:14px;margin:-7px 0 0 -7px;box-sizing:border-box;border-radius:var(--radius-full);background:var(--background);border:2.5px solid var(--pairTeal);cursor:{{ cursor }};outline-offset:2px;touch-action:none\"></span></sc-if>\n</div>\n</div>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script data-props=\"{&quot;$preview&quot;:{&quot;width&quot;:1120,&quot;height&quot;:460},&quot;theme&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;light&quot;,&quot;dark&quot;],&quot;default&quot;:&quot;light&quot;,&quot;tsType&quot;:&quot;'light' | 'dark'&quot;},&quot;nebeneinander&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:true,&quot;tsType&quot;:&quot;boolean&quot;}}\">\nclass Component extends DCLogic {\n  WA = 50; WB = 70; WC = 60; R = 36; RH = 64; MX = 440; MY = 330;\n  A = { x: 40, y: 272 }; B = { x: 300, y: 272 }; C = { x: 0, y: 0 };\n  state = { wert: 1, bewegt: false, geprueft: false, phase: 0, sofort: false, drag: false };\n  constructor(p) {\n    super(p);\n    const L = this.B.x - this.A.x, ta = Math.tan(this.WA * Math.PI / 180), tb = Math.tan(this.WB * Math.PI / 180), cx = L * tb / (ta + tb);\n    this.C = { x: this.A.x + cx, y: this.A.y - ta * cx };\n  }\n  rad(d) { return d * Math.PI / 180; }\n  keil(th) { const a = this.rad(th); return 'M0 0L' + this.R + ' 0A' + this.R + ' ' + this.R + ' 0 ' + (th > 180 ? 1 : 0) + ' 0 ' + (this.R * Math.cos(a)).toFixed(2) + ' ' + (-this.R * Math.sin(a)).toFixed(2) + 'Z'; }\n  tf(p, rot, sc) { return 'translate(' + p.x.toFixed(1) + 'px,' + p.y.toFixed(1) + 'px) rotate(' + rot + 'deg) scale(' + sc + ')'; }\n  polar(p, winkel, r) { const a = this.rad(winkel); return { x: p.x + r * Math.cos(a), y: p.y - r * Math.sin(a) }; }\n  setzAus(e) {\n    const r = e.currentTarget.parentElement.getBoundingClientRect(), px = e.clientX - r.left, py = e.clientY - r.top;\n    let phi = Math.atan2(-(py - this.MY), px - this.MX) * 180 / Math.PI; if (phi < 0) phi = px < this.MX ? 180 : 0;\n    this.setState({ wert: Math.max(1, Math.min(179, Math.round(180 - phi))), bewegt: true });\n  }\n  spiele() {\n    this.stopp();\n    this.setState({ phase: 0, sofort: true }, () => { this.t1 = setTimeout(() => this.setState({ phase: 1, sofort: false }), 60); this.t2 = setTimeout(() => this.setState({ phase: 2 }), 1900); this.t3 = setTimeout(() => this.setState({ phase: 3 }), 4600); });\n  }\n  stopp() { clearTimeout(this.t1); clearTimeout(this.t2); clearTimeout(this.t3); }\n  componentWillUnmount() { this.stopp(); }\n  renderVals() { const v = this.renderVals0(); const e = v.richtig ? 'r' : v.falsch ? 'f' : null; if (e !== this._erg) { this._erg = e; const cb = this.props.onErgebnis; if (cb) setTimeout(() => cb(e), 0); } return v; }\n  renderVals0() {\n    const s = this.state, g = s.geprueft, ok = g && s.wert === this.WC, nb = this.props.nebeneinander ?? true, weg = g && s.phase >= 1, ende = g && s.phase >= (ok ? 2 : 3), fehl = g && !ok, zeigF = fehl && s.phase >= 2 && !ende, d = s.wert - this.WC, cw = ende || !g ? (g ? this.WC : s.wert) : s.wert, summe = this.WA + this.WB + s.wert;\n    const T = (x) => s.sofort ? 'none' : x, ease = 'cubic-bezier(.3,.7,.2,1)', M = { x: this.MX, y: this.MY }, sc = (this.RH / this.R).toFixed(3);\n    const tA0 = this.tf(this.A, 0, 1), tB0 = this.tf(this.B, -(180 - this.WB), 1), tC0 = this.tf(this.C, -(180 + this.WA), 1);\n    const gw = this.polar(M, 180 - s.wert, this.RH), teilw = 0.42;\n    return { theme: this.props.theme ?? 'light', bildZoom: this.props.bildBreite ? Math.min(1, this.props.bildBreite / 560) : 1, rand: this.props.eingebettet ? '0px' : '32px', grund: this.props.eingebettet ? 'transparent' : 'var(--background)', spalten: nb ? 'minmax(0,1fr) 560px' : 'minmax(0,1fr)', luecke: nb ? '48px' : '24px', mcol: nb ? 2 : 1, mrow: nb ? 1 : 2, mself: nb ? 'end' : 'start',\n      ax: this.A.x, ay: this.A.y, bx: this.B.x, by: this.B.y, seiteA: 'M' + this.A.x + ' ' + this.A.y + 'L' + this.C.x.toFixed(1) + ' ' + this.C.y.toFixed(1), seiteB: 'M' + this.B.x + ' ' + this.B.y + 'L' + this.C.x.toFixed(1) + ' ' + this.C.y.toFixed(1), seitenOff: 0, trSeiten: T('stroke-dashoffset .8s ' + ease),\n      dialTicks: 'M' + (this.MX - this.RH) + ' ' + this.MY + 'v6M' + (this.MX + this.RH) + ' ' + this.MY + 'v6M' + this.MX + ' ' + (this.MY - this.RH) + 'v-6', d0x: this.MX + this.RH, d180x: this.MX - this.RH, dTy: this.MY + 8, opOffen: g ? 0 : 1,\n      basisX1: this.MX - this.RH - 12, basisX2: this.MX + this.RH + 12, basisY: this.MY, halbkreis: 'M' + (this.MX - this.RH) + ' ' + this.MY + 'A' + this.RH + ' ' + this.RH + ' 0 0 1 ' + (this.MX + this.RH) + ' ' + this.MY,\n      wA: this.keil(this.WA), wB: this.keil(this.WB), wC: this.keil(cw), diffPfad: this.keil(Math.max(1, Math.abs(d))), diffT: this.tf(M, -(this.WA + this.WB + Math.min(s.wert, this.WC)), sc), opDiff: zeigF ? 1 : 0,\n      dL: this.polar(M, this.WA + this.WB + Math.min(s.wert, this.WC) + Math.abs(d) / 2, this.RH + 22), diffText: d < 0 ? 'missing ' + (-d) + '°' : d + '° too much', hCText: cw + '°', opLab: g && s.phase >= 2 ? 1 : 0,\n      tA0, tB0, tC0, opGeistC: g ? .18 : 1, wCZiel: this.keil(this.WC),\n      tA: weg ? this.tf(M, 0, sc) : tA0, tB: weg ? this.tf(M, -this.WA, sc) : tB0, tC: !g ? this.tf(M, -(180 - s.wert), sc) : weg ? this.tf(M, -(this.WA + this.WB), sc) : tC0,\n      trWeg: T('transform 1.1s ' + ease), trWegB: T('transform 1.1s ' + ease + ' .2s'), trWegC: !g ? 'none' : T('transform 1.1s ' + ease + ' .4s'),\n      lA: this.polar(this.A, this.WA / 2, 60), lB: this.polar(this.B, 180 - this.WB / 2, 60), lC: this.polar(this.C, 230 + this.WC / 2, 60), gammaText: ende ? this.WC + '°' : '?',\n      hA: this.polar(M, this.WA / 2, this.RH + 18), hB: this.polar(M, this.WA + this.WB / 2, this.RH + 18), hC: this.polar(M, this.WA + this.WB + Math.min(cw, this.WC) / 2, this.RH + 18),\n      mX: this.MX, summeY: this.MY - this.RH - 46, opWeg: weg ? 1 : 0, opEnde: ende ? 1 : 0,\n      anzeigeLabel: !g ? (s.bewegt ? 'Third angle · your answer' : 'Third angle') : ende ? 'Third angle' : fehl ? 'Sum with your angle' : 'Angle sum',\n      anzeige: !g ? (s.bewegt ? s.wert + '°' : '?') : ende ? this.WC + '°' : fehl ? summe + '°' : '180°', anzeigeFarbe: fehl && !ende ? 'var(--errorText)' : 'var(--textPrimary)',\n      unter: !g ? '' : ende ? '180° − 50° − 70° = 60°' : !fehl ? 'Three angles make a half circle' : d < 0 ? 'Missing to a half circle: ' + (-d) + '°' : 'That is ' + d + '° more than a half circle', unterOp: g && (!fehl || s.phase >= 2) ? 1 : 0,\n      offen: !g, wert: s.wert, wertText: s.wert + '°', gx: gw.x, gy: gw.y, cursor: s.drag ? 'grabbing' : 'grab',\n      geprueft: g, richtig: ok, falsch: g && !ok, kann: !g && s.bewegt, gesperrt: !g && !s.bewegt,\n      down: (e) => { e.currentTarget.setPointerCapture && e.currentTarget.setPointerCapture(e.pointerId); this.setState({ drag: true }); this.setzAus(e); },\n      move: (e) => { if (this.state.drag) this.setzAus(e); }, up: () => this.setState({ drag: false }),\n      taste: (e) => { const d = e.key === 'ArrowRight' || e.key === 'ArrowUp' ? 1 : e.key === 'ArrowLeft' || e.key === 'ArrowDown' ? -1 : 0; if (d) { e.preventDefault(); this.setState({ wert: Math.max(1, Math.min(179, this.state.wert + d)), bewegt: true }); } },\n      pruefen: () => { if (!this.state.bewegt) return; this.setState({ geprueft: true }); this.spiele(); },\n      nochmal: () => { if (this.state.geprueft) this.spiele(); },\n      reset: () => { this.stopp(); this.setState({ wert: 1, bewegt: false, geprueft: false, phase: 0, sofort: false }); } };\n  }\n}\n</script>\n</body>\n</html>\n","Preise":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<script src=\"./support.js\"></script>\n</head>\n<body>\n<x-dc>\n<helmet><script src=\"/entwurf/ds-base.js\"></script></helmet>\n<div data-theme=\"{{ theme }}\" style=\"color:var(--textPrimary);font-family:var(--font-sans);display:grid;grid-template-columns:{{ spalten }};column-gap:32px;row-gap:{{ zeilenAbstand }};align-items:baseline\">\n<span class=\"t-ziffern\" style=\"font-size:28px;line-height:40px;font-weight:500;letter-spacing:-0.01em;white-space:nowrap\">€44.99 : 12</span><span class=\"t-klein\" style=\"color:var(--textTertiary);white-space:nowrap\">Premium per year, per month</span>\n<span class=\"t-ziffern\" style=\"font-family:var(--font-display);font-size:64px;line-height:72px;font-weight:600;letter-spacing:-0.03em;white-space:nowrap;color:var(--accentText)\">= €3.75</span><span class=\"t-klein\" style=\"color:var(--textTertiary)\">a month</span>\n<span class=\"t-ziffern\" style=\"font-size:28px;line-height:40px;font-weight:500;letter-spacing:-0.01em;white-space:nowrap;color:var(--textSecondary)\">€4.99 · 12 = €59.88</span><span class=\"t-klein\" style=\"color:var(--textTertiary);white-space:nowrap\">monthly plan, per year</span>\n</div>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script data-props=\"{&quot;$preview&quot;:{&quot;width&quot;:624,&quot;height&quot;:176},&quot;theme&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;light&quot;,&quot;dark&quot;],&quot;default&quot;:&quot;light&quot;,&quot;tsType&quot;:&quot;'light' | 'dark'&quot;}}\">\nclass Component extends DCLogic {\n  renderVals() { const s = !!this.props.schmal; return { theme: this.props.theme ?? 'light', spalten: s ? 'minmax(0,1fr)' : '320px minmax(0,1fr)', zeilenAbstand: s ? '2px' : '12px' }; }\n}\n</script>\n</body>\n</html>\n","Geraete":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<script src=\"./support.js\"></script>\n</head>\n<body>\n<x-dc>\n<helmet><script src=\"/entwurf/ds-base.js\"></script></helmet>\n<div data-theme=\"{{ theme }}\" style=\"color:var(--textPrimary);font-family:var(--font-sans);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:{{ luecke }};opacity:{{ op }};transition:opacity .4s ease\">\n<sc-for list=\"{{ momente }}\" as=\"m\" hint-placeholder-count=\"3\"><div style=\"display:flex;flex-direction:column;gap:6px;opacity:{{ m.o }};transition:opacity .5s ease\"><span class=\"t-kartentitel\" style=\"color:var(--textPrimary)\">{{ m.zeit }}</span><span class=\"t-meta\" style=\"color:var(--textTertiary)\">{{ m.geraet }}</span><div style=\"height:12px\"></div><span class=\"t-klein\" style=\"color:{{ m.textFarbe }};transition:color .4s ease;white-space:{{ umbruch }};min-height:20px;text-wrap:pretty\">{{ m.lektion }}</span><div style=\"height:4px;border-radius:2px;background:var(--glassLight);overflow:hidden\"><div style=\"height:100%;border-radius:2px;background:{{ m.farbe }};width:{{ m.breite }};transition:width .6s cubic-bezier(.4,0,.2,1), background .4s ease\"></div></div></div></sc-for>\n</div>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script data-props=\"{&quot;$preview&quot;:{&quot;width&quot;:624,&quot;height&quot;:120},&quot;theme&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;light&quot;,&quot;dark&quot;],&quot;default&quot;:&quot;light&quot;,&quot;tsType&quot;:&quot;'light' | 'dark'&quot;},&quot;tempo&quot;:{&quot;editor&quot;:&quot;int&quot;,&quot;default&quot;:1000,&quot;min&quot;:400,&quot;max&quot;:2000,&quot;step&quot;:50,&quot;unit&quot;:&quot;ms&quot;,&quot;tsType&quot;:&quot;number&quot;}}\">\nclass Component extends DCLogic {\n  state = { sichtbar: 0, schritt: [3, 5, 7], op: 0 };\n  timer = [];\n  orte = [['7:40 on the bus', 'Phone'], ['13:10 at school', 'Tablet'], ['19:00 at your desk', 'Browser']];\n  componentDidMount() { this.lauf(); }\n  componentWillUnmount() { this.timer.forEach(clearTimeout); }\n  nach(ms, fn) { this.timer.push(setTimeout(fn, ms)); }\n  lauf() {\n    this.setState({ sichtbar: 0, schritt: [3, 5, 7], op: 0 });\n    const t = this.props.tempo ?? 1000, setS = (i, v) => this.setState(st => { const s = st.schritt.slice(); s[i] = v; return { schritt: s }; });\n    let z = 500;\n    this.nach(z, () => this.setState({ op: 1, sichtbar: 1 })); z += 1400;\n    [[0, 4], [0, 5]].forEach(([i, v]) => { this.nach(z, () => setS(i, v)); z += t; });\n    z += 400; this.nach(z, () => this.setState({ sichtbar: 2 })); z += 1400;\n    [[1, 6], [1, 7]].forEach(([i, v]) => { this.nach(z, () => setS(i, v)); z += t; });\n    z += 400; this.nach(z, () => this.setState({ sichtbar: 3 })); z += 1400;\n    [[2, 8], [2, 9]].forEach(([i, v]) => { this.nach(z, () => setS(i, v)); z += t; });\n    this.nach(z + 2600, () => this.setState({ op: 0 }));\n    this.nach(z + 3200, () => this.lauf());\n  }\n  renderVals() {\n    const { sichtbar, schritt, op } = this.state;\n    const momente = this.orte.map(([zeit, geraet], i) => { const n = schritt[i], fertig = n >= 9; return { luecke: this.props.schmal ? '16px' : '32px', umbruch: this.props.schmal ? 'normal' : 'nowrap', zeit, geraet, o: i < sichtbar ? 1 : 0, lektion: fertig ? 'Equations · done' : `Equations · ${n} of 9`, breite: (n / 9 * 100).toFixed(1) + '%', farbe: fertig ? 'var(--success)' : 'var(--accent)', textFarbe: fertig ? 'var(--successText)' : 'var(--textSecondary)' }; });\n    return { theme: this.props.theme ?? 'light', op, momente };\n  }\n}\n</script>\n</body>\n</html>\n","Lernweg":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<script src=\"./support.js\"></script>\n</head>\n<body>\n<x-dc>\n<helmet><script src=\"/entwurf/ds-base.js\"></script></helmet>\n<div data-theme=\"{{ theme }}\" style=\"color:var(--textPrimary);font-family:var(--font-sans);display:flex;flex-direction:column;gap:32px;opacity:{{ opazitaet }};transition:opacity .4s ease\">\n<div style=\"display:flex;flex-direction:column;gap:8px\">\n<span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">{{ zielText }}</span>\n<div style=\"display:flex;flex-direction:column;gap:12px\">\n<div style=\"height:56px;display:flex;align-items:center\"><div ref=\"{{ r1 }}\" style=\"font-size:26px;line-height:1;text-align:left\"></div></div>\n<div style=\"position:relative;height:56px\"><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;white-space:nowrap;opacity:{{ oHinweis }};transition:opacity .3s ease\"><span class=\"t-abschnitt\" style=\"font-weight:600;color:var(--textPrimary)\">I don’t remember this any more:</span><span class=\"t-abschnitt\" style=\"color:var(--textPrimary)\">{{ hinweisWas }}</span></div><div style=\"position:absolute;inset:0;display:flex;align-items:center;opacity:{{ o2 }};transition:opacity .4s ease .35s\"><div ref=\"{{ r2 }}\" style=\"font-size:26px;line-height:1;text-align:left\"></div></div></div>\n<div ref=\"{{ r3 }}\" style=\"font-size:26px;line-height:1;height:56px;display:flex;align-items:center;text-align:left;color:var(--accentText);opacity:{{ o3 }};transition:opacity .35s ease\"></div>\n</div>\n</div>\n<div style=\"display:flex;flex-direction:column;gap:12px\">\n<div style=\"position:relative;height:112px;display:flex;flex-wrap:wrap;align-content:flex-start;align-items:baseline;column-gap:14px;row-gap:8px\">\n<sc-for list=\"{{ knoten }}\" as=\"k\" hint-placeholder-count=\"4\"><div ref=\"{{ k.ref }}\" style=\"display:flex;align-items:baseline;gap:14px;opacity:{{ k.o }};transform:{{ k.tf }};transition:{{ k.tr }}\"><span style=\"display:flex;align-items:baseline;gap:6px;white-space:nowrap\"><span class=\"t-klein-betont\" style=\"font-weight:600;color:{{ k.farbe }};transition:color .3s ease\">{{ k.name }}</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">{{ k.kl }}</span></span><span style=\"font-size:15px;line-height:20px;color:var(--textTertiary);opacity:{{ k.linie }}\">→</span></div></sc-for>\n</div>\n<span style=\"font-size:12px;line-height:16px;color:var(--textTertiary);height:16px\">{{ status }}</span>\n</div>\n</div>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script data-props=\"{&quot;$preview&quot;:{&quot;width&quot;:624,&quot;height&quot;:392},&quot;theme&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;light&quot;,&quot;dark&quot;],&quot;default&quot;:&quot;light&quot;,&quot;tsType&quot;:&quot;'light' | 'dark'&quot;},&quot;tempo&quot;:{&quot;editor&quot;:&quot;int&quot;,&quot;default&quot;:1000,&quot;min&quot;:400,&quot;max&quot;:2000,&quot;step&quot;:50,&quot;unit&quot;:&quot;ms&quot;,&quot;tsType&quot;:&quot;number&quot;}}\">\nclass Component extends DCLogic {\n  state = { sz: 0, p: 0, opazitaet: 0 };\n  timer = []; refs = {};\n  szenen = [\n    { ziel: 'Quadratic equations', kl: 9, z1: 'x^2 + 6x + 9 = 0', l: '(x + 3)^2 = 0', z3: 'x = -3', fehlt: 2,\n      kette: [['Terms and variables', 7], ['Equations', 7], ['Binomial formulas', 8], ['Quadratic equations', 9]] },\n    { ziel: 'Trigonometry', kl: 9, z1: 'a = 3,\\\\; b = 4, \\\\quad \\\\sin\\\\alpha = \\\\frac{a}{c}', l: 'c = \\\\sqrt{3^2 + 4^2} = 5', z3: '\\\\sin\\\\alpha = \\\\frac{3}{5}', fehlt: 2,\n      kette: [['Angles and symmetry', 7], ['Congruence and triangles', 7], ['Pythagorean theorem', 8], ['Trigonometry', 9]] },\n    { ziel: 'Differentialrechnung', kl: 10, z1: \"f'(x) = 3x^2 - 3 = 0\", l: 'x^2 = 1', z3: 'x = -1 \\\\;\\\\text{or}\\\\; x = 1', fehlt: 1,\n      kette: [['Equations', 7], ['Quadratic equations', 9], ['Differentialrechnung', 10]] },\n    { ziel: 'Probability and combinatorics', kl: 9, z1: 'P(\\\\text{zwei Sechsen}) = \\\\frac{1}{6} \\\\cdot \\\\frac{1}{6}', l: '= \\\\frac{1 \\\\cdot 1}{6 \\\\cdot 6}', z3: '= \\\\frac{1}{36}', fehlt: 0,\n      kette: [['Rational numbers', 7], ['Data and chance', 7], ['Probability in depth', 8], ['Probability and combinatorics', 9]] },\n    { ziel: 'Exponentielles Wachstum', kl: 9, z1: 'K_2 = 500 \\\\cdot 1.03^2', l: '1.03^2 = 1.0609', z3: 'K_2 = 530.45', fehlt: 1,\n      kette: [['Percentages and interest', 7], ['Powers', 8], ['Exponentielles Wachstum', 9]] },\n    { ziel: 'Circle geometry', kl: 10, z1: 'b = \\\\frac{90^\\\\circ}{360^\\\\circ} \\\\cdot U, \\\\quad r = 4', l: 'U = 2\\\\pi \\\\cdot 4 \\\\approx 25.13', z3: 'b \\\\approx 6.28', fehlt: 1,\n      kette: [['Angles and symmetry', 7], ['Areas, circles and solids', 8], ['Circle geometry', 10]] }\n  ];\n  componentDidMount() { this.lauf(); }\n  componentWillUnmount() { this.timer.forEach(clearTimeout); }\n  componentDidUpdate() { this.setzen(); this.messen(); }\n  messen() {\n    const els = this.knotenEls || [], n = this.szenen[this.state.sz].kette.length;\n    if (els.filter(Boolean).length < n) return;\n    const pos = els.slice(0, n).map(el => [el.offsetLeft, el.offsetTop]);\n    const alt = this.pos && this.pos.sz === this.state.sz ? this.pos.v : null;\n    if (alt && alt.every((q, i) => q[0] === pos[i][0] && q[1] === pos[i][1])) return;\n    this.pos = { sz: this.state.sz, v: pos }; this.forceUpdate();\n  }\n  nach(ms, fn) { this.timer.push(setTimeout(fn, ms)); }\n  tex(el, tex) {\n    const mj = window.MathJax; if (!el || el.dataset.tex === tex) return;\n    el.dataset.tex = tex; el.innerHTML = ''; const m = mj.tex2svg(tex, { display: false }); m.style.cssText = 'display:inline-block;text-align:left;margin:0'; el.appendChild(m);\n  }\n  setzen() {\n    const mj = window.MathJax;\n    if (!mj || !mj.tex2svg) { if (!this._w) { this._w = true; this.nach(300, () => { this._w = false; this.setzen(); }); } return; }\n    const s = this.szenen[this.state.sz];\n    this.tex(this.refs.r1, s.z1); this.tex(this.refs.r2, s.l); this.tex(this.refs.r3, s.z3);\n  }\n  lauf() {\n    const s = this.szenen[this.state.sz], n = s.kette.length, t = this.props.tempo ?? 900;\n    this.setState({ p: 0 }); this.nach(900, () => this.setState({ opazitaet: 1 }));\n    let z = 1800; const schritte = 2 + 2 * n;\n    for (let p = 1; p <= schritte; p++) { const pp = p; this.nach(z, () => this.setState({ p: pp })); z += p === 1 || p === 1 + n ? 1100 : p === 2 + n ? 1900 : p === 3 + n + s.fehlt ? t + 900 : t; }\n    this.nach(z + 2200, () => this.setState({ opazitaet: 0 }));\n    this.nach(z + 2650, () => { this.setState({ sz: (this.state.sz + 1) % this.szenen.length }, () => this.lauf()); });\n  }\n  renderVals() {\n    const s = this.szenen[this.state.sz], n = s.kette.length, p = this.state.p;\n    const fuellStart = 3 + n, vertikal = p < 2 + n;\n    const gelernt = i => p >= fuellStart + i;\n    const sichtbar = i => p >= 2 + (n - 1 - i);\n    const lueckeZu = gelernt(s.fehlt);\n    const pos = this.pos && this.pos.sz === this.state.sz ? this.pos.v : [];\n    this.knotenEls = this.knotenEls || [];\n    const knoten = s.kette.map(([name, kl], i) => { const [l, t] = pos[i] || [0, 0]; return { name, kl, o: sichtbar(i) ? 1 : 0, linie: vertikal || i === n - 1 ? 0 : 1, tf: vertikal ? `translate(${-l}px, ${(n - 1 - i) * 28 - t}px)` : 'none', tr: vertikal ? 'opacity .35s ease' : `opacity .35s ease, transform 1.2s cubic-bezier(.65,0,.35,1) ${i * 90}ms`, ref: el => { this.knotenEls[i] = el; }, farbe: gelernt(i) ? (i === n - 1 ? 'var(--accentText)' : 'var(--textPrimary)') : 'var(--textTertiary)' }; });\n    const status = p < 2 ? '' : p < 2 + n ? 'The learning path looks back for what you need first.' : p < fuellStart ? 'In the right order.' : p < fuellStart + n ? 'Then it moves forward step by step.' : 'Back at your topic.';\n    const hinweisWas = s.kette[s.fehlt][0];\n    return { theme: this.props.theme ?? 'light', opazitaet: this.state.opazitaet, zielText: `Your topic: ${s.ziel} · grade ${s.kl}`,\n      r1: el => { this.refs.r1 = el; }, r2: el => { this.refs.r2 = el; }, r3: el => { this.refs.r3 = el; },\n      o2: lueckeZu ? 1 : 0, oHinweis: p >= 1 && !lueckeZu ? 1 : 0, hinweisWas, o3: p >= fuellStart + n - 1 ? 1 : 0, knoten, status };\n  }\n}\n</script>\n</body>\n</html>\n","Tafel":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<script src=\"./support.js\"></script>\n</head>\n<body>\n<x-dc>\n<helmet><script src=\"/entwurf/ds-base.js\"></script><style>@keyframes tafelEin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}</style></helmet>\n<div data-theme=\"{{ theme }}\" style=\"color:var(--textPrimary);font-family:var(--font-sans);display:flex;flex-direction:column;gap:20px;opacity:{{ opazitaet }};transition:opacity .4s ease\">\n<sc-if value=\"{{ zeigeFeld }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"width:515px;height:441px\"><div style=\"width:448px;transform:scale(1.15);transform-origin:0 0\"><dc-import name=\"AufgabenFeld\" variante=\"{{ feldV }}\" on-done=\"{{ feldFertig }}\" hint-size=\"448px,384px\"></dc-import></div></div></sc-if>\n<sc-if value=\"{{ zeigeTafel }}\" hint-placeholder-val=\"{{ true }}\"><div style=\"display:flex;flex-direction:column;gap:8px;padding-bottom:16px;border-bottom:1px solid var(--divider)\"><div style=\"display:flex;align-items:center;gap:16px;flex-wrap:wrap\"><span class=\"t-beschriftung\" style=\"color:var(--accentText)\">{{ thema }}</span><div ref=\"{{ formelRef }}\" style=\"font-size:17px;line-height:1;text-align:left;color:var(--textSecondary)\"></div></div><p class=\"t-klein\" style=\"margin:0;max-width:520px;color:var(--textSecondary);text-wrap:pretty\">{{ erklaerung }}</p></div>\n<div style=\"display:flex;flex-direction:column;gap:6px\">\n<sc-for list=\"{{ zeilen }}\" as=\"z\" hint-placeholder-count=\"3\"><div style=\"display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:32px;align-items:center;min-height:56px;animation:tafelEin .35s ease-out both\"><div ref=\"{{ z.ref }}\" style=\"font-size:30px;line-height:1;text-align:left;color:{{ z.farbe }}\"></div><span class=\"t-klein\" style=\"color:var(--textSecondary);text-wrap:pretty\">{{ z.note }}</span></div></sc-for>\n</div></sc-if>\n</div>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script data-props=\"{&quot;$preview&quot;:{&quot;width&quot;:676,&quot;height&quot;:420},&quot;theme&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;light&quot;,&quot;dark&quot;],&quot;default&quot;:&quot;light&quot;,&quot;tsType&quot;:&quot;'light' | 'dark'&quot;},&quot;tempo&quot;:{&quot;editor&quot;:&quot;int&quot;,&quot;default&quot;:1000,&quot;min&quot;:500,&quot;max&quot;:2500,&quot;step&quot;:100,&quot;unit&quot;:&quot;ms&quot;,&quot;tsType&quot;:&quot;number&quot;},&quot;herleitungen&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:true,&quot;tsType&quot;:&quot;boolean&quot;}}\">\nclass Component extends DCLogic {\n  state = { zeilen: [], opazitaet: 1, thema: '', formel: '', erklaerung: '', modus: 'tafel', feldV: 'ta' };\n  els = []; timer = []; letzter = -1; formelEl = null; letztesFeld = '';\n  POOL = ['ta', 'tc', 'td', 'k', 'p2', 'zy'];\n  feld() {\n    let v; do { v = this.POOL[Math.floor(Math.random() * this.POOL.length)]; } while (v === this.letztesFeld); this.letztesFeld = v;\n    this.setState({ modus: 'feld', feldV: v, opazitaet: 1 });\n  }\n  feldFertig() { if (this.state.modus !== 'feld') return; this.setState({ opazitaet: 0 }); this.nach(450, () => { this.setState({ modus: 'tafel' }); this.lauf(); }); }\n  componentDidMount() { this.lauf(); }\n  componentWillUnmount() { this.timer.forEach(clearTimeout); }\n  componentDidUpdate() { this.setzen(); }\n  nach(ms, fn) { this.timer.push(setTimeout(fn, ms)); }\n  tex(el, tex) {\n    const mj = window.MathJax; if (!el || el.dataset.tex === tex) return;\n    el.dataset.tex = tex; el.innerHTML = ''; const m = mj.tex2svg(tex, { display: false }); m.style.cssText = 'display:inline-block;text-align:left;margin:0'; el.appendChild(m);\n  }\n  setzen() {\n    const mj = window.MathJax;\n    if (!mj || !mj.tex2svg) { if (!this._w) { this._w = true; this.nach(300, () => { this._w = false; this.setzen(); }); } return; }\n    this.tex(this.formelEl, this.state.formel);\n    this.state.zeilen.forEach((z, i) => this.tex(this.els[i], z.tex));\n  }\n  lauf() {\n    const a = this.gen(), aufg = a.zeilen, tempo = this.props.tempo ?? 1000;\n    this.els = [];\n    this.setState({ thema: a.thema, formel: a.formel, erklaerung: a.erklaerung, zeilen: [this.zeile(aufg[0], 0, false)], opazitaet: 1 });\n    aufg.slice(1).forEach((s, k) => this.nach(tempo * (k + 1), () => this.setState(st => ({ zeilen: [...st.zeilen, this.zeile(s, k + 1, k + 2 === aufg.length)] }))));\n    this.nach(tempo * aufg.length + 2600, () => this.setState({ opazitaet: 0 }));\n    this.nach(tempo * aufg.length + 3050, () => { if (this.props.herleitungen ?? true) this.feld(); else this.lauf(); });\n  }\n  zeile([tex, note], i, final) { return { tex, note: note || '', farbe: final ? 'var(--accentText)' : 'var(--textPrimary)', ref: el => { this.els[i] = el; } }; }\n  gen() {\n    const r = (a, b) => a + Math.floor(Math.random() * (b - a + 1)), p = a => a[r(0, a.length - 1)], ggt = (a, b) => b ? ggt(b, a % b) : a;\n    const vz = n => n < 0 ? ' - ' + (-n) : ' + ' + n;\n    const typen = [\n      () => { const a = r(2, 9), x = r(2, 12), b = r(1, 20), c = a * x + b; return { thema: 'Equations', formel: 'a\\\\,x + b = c', erklaerung: 'Whatever you do on the left, you do on the right. That keeps the equation true until x stands alone.',\n        zeilen: [[`${a}x + ${b} = ${c}`, `− ${b} on both sides`], [`${a}x = ${c - b}`, `divide both sides by ${a}`], [`x = ${x}`, 'x stands alone']] }; },\n      () => { const a = r(2, 6), b = r(1, 9), x = r(1, 9), c = a * (x + b); return { thema: 'Terms and variables', formel: 'a\\\\,(x + b) = a\\\\,x + a\\\\,b', erklaerung: 'The number in front of the bracket multiplies every term inside. Then you solve as usual.',\n        zeilen: [[`${a}\\\\,(x + ${b}) = ${c}`, `${a} times x and ${a} times ${b}`], [`${a}x + ${a * b} = ${c}`, `− ${a * b} on both sides`], [`${a}x = ${c - a * b}`, `divide both sides by ${a}`], [`x = ${x}`, 'x stands alone']] }; },\n      () => { const ns = [2, 3, 4, 5, 6, 8]; let b = p(ns), d = p(ns); while (d === b) d = p(ns); const a = r(1, b - 1), c = r(1, d - 1), L = b * d / ggt(b, d), n = a * L / b + c * L / d, g = ggt(n, L);\n        const z = [[`\\\\frac{${a}}{${b}} + \\\\frac{${c}}{${d}}`, `common denominator is ${L}`], [`\\\\frac{${a * L / b}}{${L}} + \\\\frac{${c * L / d}}{${L}}`, 'add numerators, keep denominator']];\n        if (g > 1) { z.push([`\\\\frac{${n}}{${L}}`, `divide top and bottom by ${g}`]); z.push([L / g === 1 ? `${n / g}` : `\\\\frac{${n / g}}{${L / g}}`, 'fully simplified']); } else z.push([`\\\\frac{${n}}{${L}}`, 'can’t be simplified']);\n        return { thema: 'Rational numbers', formel: '\\\\frac{a}{b} + \\\\frac{c}{d} = \\\\frac{a d + c b}{b d}', erklaerung: 'You only add fractions with the same denominator. Expand first, then add the numerators, simplify at the end.', zeilen: z }; },\n      () => { let q, G; do { q = p([5, 10, 12, 15, 20, 25, 30, 40, 50, 75]); G = p([80, 120, 150, 200, 240, 250, 300, 400, 500, 600]); } while (q * G % 100); return { thema: 'Percentages', formel: 'W = \\\\frac{p}{100} \\\\cdot G', erklaerung: 'Percent means “out of a hundred”. The rate is a fraction over 100 that you multiply by the base value.',\n        zeilen: [[`${q}\\\\,\\\\% \\\\text{ of } ${G}`, `write ${q}% as a fraction`], [`\\\\frac{${q}}{100} \\\\cdot ${G}`, 'fraction times base value'], [`${q * G / 100}`, 'the percentage value']] }; },\n      () => { const a = r(2, 9), b = r(1, 12), c = r(2, 9), d = r(1, 12), k = b - d; return { thema: 'Terms and variables', formel: 'a\\\\,x + c\\\\,x = (a + c)\\\\,x', erklaerung: 'Only like terms go together: x-terms with x-terms, numbers with numbers. The sign always belongs to the number after it.',\n        zeilen: [[`${a}x + ${b} + ${c}x - ${d}`, 'x-terms to the front'], [`${a}x + ${c}x + ${b} - ${d}`, `${a} + ${c} and ${b} − ${d}`], [`${a + c}x${k ? vz(k) : ''}`, 'as short as it gets']] }; },\n      () => { const [a, b, c] = p([[3, 4, 5], [6, 8, 10], [5, 12, 13], [8, 15, 17], [9, 12, 15], [7, 24, 25], [12, 16, 20]]); return { thema: 'Pythagoras’ theorem', formel: 'a^2 + b^2 = c^2', erklaerung: 'In a right triangle the squares of the two legs add up to the square of the hypotenuse.',\n        zeilen: [[`c^2 = ${a}^2 + ${b}^2`, 'square the legs'], [`c^2 = ${a * a} + ${b * b}`, 'add the squares'], [`c^2 = ${c * c}`, 'take the square root'], [`c = ${c}`, 'the hypotenuse']] }; }\n,\n      () => { const a = r(2, 9); return { thema: 'Binomial formulas', formel: '(a + b)^2 = a^2 + 2ab + b^2', erklaerung: 'The bracket is multiplied by itself. The middle term is doubled because it appears twice.',\n        zeilen: [[`(x + ${a})^2`, 'first binomial formula'], [`x^2 + 2 \\\\cdot ${a} \\\\cdot x + ${a}^2`, 'substitute'], [`x^2 + ${2 * a}x + ${a * a}`, 'worked out']] }; },\n      () => { let x1 = r(-6, 8), x2 = r(-6, 8); if ((x1 + x2) % 2) x2++; if (x1 === x2) x2 += 2; const pp = -(x1 + x2), q = x1 * x2, h = -pp / 2, D = h * h - q, sq = Math.sqrt(D), [lo, hi] = [Math.min(x1, x2), Math.max(x1, x2)];\n        return { thema: 'Quadratic equations', formel: 'x_{1,2} = -\\\\frac{p}{2} \\\\pm \\\\sqrt{\\\\left(\\\\frac{p}{2}\\\\right)^2 - q}', erklaerung: 'In normal form x² + px + q = 0 you read off p and q and plug them into the pq formula.',\n        zeilen: [[`x^2${pp ? vz(pp) + 'x' : ''}${vz(q)} = 0`, `p = ${pp}, q = ${q}`], [`x_{1,2} = ${h} \\\\pm \\\\sqrt{${h * h}${vz(-q)}}`, 'into the pq formula'], [`x_{1,2} = ${h} \\\\pm ${sq}`, `square root of ${D}`], [`x_1 = ${lo}, \\\\quad x_2 = ${hi}`, 'two solutions']] }; },\n      () => { const a = p([2, 3, 5, 10]), m = r(2, 4), n = r(2, 4); return { thema: 'Powers', formel: 'a^m \\\\cdot a^n = a^{m+n}', erklaerung: 'Same base: when multiplying, you add the exponents.',\n        zeilen: [[`${a}^${m} \\\\cdot ${a}^${n}`, 'same base'], [`${a}^{${m} + ${n}}`, 'add the exponents'], [`${a}^{${m + n}} = ${Math.pow(a, m + n)}`, 'worked out']] }; },\n      () => { const x1 = r(-4, 3), x2 = x1 + r(1, 4), m = p([-3, -2, -1, 1, 2, 3]), b = r(-6, 6), y1 = m * x1 + b, y2 = m * x2 + b; return { thema: 'Linear functions', formel: 'm = \\\\frac{y_2 - y_1}{x_2 - x_1}', erklaerung: 'Two points fix a line. The slope is rise over run, then comes the y-intercept.',\n        zeilen: [[`P(${x1}\\\\,|\\\\,${y1}), \\\\quad Q(${x2}\\\\,|\\\\,${y2})`, 'two points'], [`m = \\\\frac{${y2} - (${y1})}{${x2} - (${x1})} = ${m}`, 'slope'], [`b = ${y1} - ${m} \\\\cdot (${x1}) = ${b}`, 'substitute P'], [`f(x) = ${m}x${vz(b)}`, 'the line']] }; },\n      () => { const [a, , c] = p([[3, 4, 5], [6, 8, 10], [5, 12, 13], [8, 15, 17], [7, 24, 25]]), w = (Math.asin(a / c) * 180 / Math.PI).toFixed(2).replace('.', '.'); return { thema: 'Trigonometry', formel: '\\\\sin\\\\alpha = \\\\frac{\\\\text{opposite}}{\\\\text{hypotenuse}}', erklaerung: 'In a right triangle the ratio of the sides fixes the angle. The calculator inverts the sine.',\n        zeilen: [[`\\\\sin\\\\alpha = \\\\frac{${a}}{${c}}`, 'form the ratio'], [`\\\\sin\\\\alpha = ${(a / c).toFixed(2).replace('.', '.')}`, 'as a decimal'], [`\\\\alpha = \\\\sin^{-1}(${(a / c).toFixed(2).replace('.', '.')})`, 'invert the sine'], [`\\\\alpha \\\\approx ${w}^\\\\circ`, 'the angle']] }; },\n      () => { const a = r(2, 5), n = r(3, 5), b = r(2, 9), c = r(1, 9); return { thema: 'A level · Derivatives', formel: 'f(x) = x^n \\\\;\\\\Rightarrow\\\\; f\\'(x) = n \\\\, x^{n-1}', erklaerung: 'Power rule: bring the exponent to the front, then reduce it by one. A factor stays, a lone number drops out.',\n        zeilen: [[`f(x) = ${a}x^${n} + ${b}x + ${c}`, 'term by term'], [`f'(x) = ${a} \\\\cdot ${n} \\\\, x^{${n} - 1} + ${b}`, 'power rule'], [`f'(x) = ${a * n}x^${n - 1} + ${b}`, 'the derivative']] }; },\n      () => { const h = r(-4, 5), k = r(-5, 9); return { thema: 'A level · Turning points', formel: 'f\\'(x_0) = 0', erklaerung: 'At a maximum or minimum the slope is zero. Differentiate, set equal to zero, solve for x.',\n        zeilen: [[`f(x) = x^2${vz(-2 * h)}x${vz(k)}`, 'the function'], [`f'(x) = 2x${vz(-2 * h)}`, 'differentiate'], [`0 = 2x${vz(-2 * h)}`, 'set equal to zero'], [`x_0 = ${h}`, 'the turning point']] }; },\n      () => { const a = p([3, 6, 9]), b = r(1, 4); return { thema: 'A level · Integrals', formel: '\\\\int_a^b f(x)\\\\,dx = F(b) - F(a)', erklaerung: 'The integral is the area under the graph. Find the antiderivative, upper minus lower limit.',\n        zeilen: [[`\\\\int_0^{${b}} ${a}x^2 \\\\, dx`, 'area from 0 to ' + b], [`\\\\left[ ${a / 3}x^3 \\\\right]_0^{${b}}`, 'antiderivative'], [`${a / 3} \\\\cdot ${b}^3 - 0`, 'substitute the limits'], [`${a / 3 * b * b * b}`, 'square units']] }; },\n      () => { const a = p([2, 3, 5, 10]), k = r(2, 5), v = Math.pow(a, k); return { thema: 'A level · Exponential equations', formel: 'a^x = b \\\\;\\\\Rightarrow\\\\; x = \\\\frac{\\\\ln b}{\\\\ln a}', erklaerung: 'If x is in the exponent, the logarithm brings it down. Take logs of both sides, then divide.',\n        zeilen: [[`${a}^x = ${v}`, 'x in the exponent'], [`x \\\\cdot \\\\ln ${a} = \\\\ln ${v}`, 'ln of both sides'], [`x = \\\\frac{\\\\ln ${v}}{\\\\ln ${a}}`, 'divide by ln ' + a], [`x = ${k}`, `because ${a}^${k} = ${v}`]] }; },\n      () => { const v = () => [r(-3, 5), r(-3, 5), r(-3, 5)], A = v(), B = v(), s = A[0] * B[0] + A[1] * B[1] + A[2] * B[2], pm = x => `\\\\begin{pmatrix} ${x[0]} \\\\\\\\ ${x[1]} \\\\\\\\ ${x[2]} \\\\end{pmatrix}`;\n        return { thema: 'A level · Vectors', formel: '\\\\vec a \\\\cdot \\\\vec b = a_1 b_1 + a_2 b_2 + a_3 b_3', erklaerung: 'The dot product is a number. If it is zero, the vectors are perpendicular.',\n        zeilen: [[`${pm(A)} \\\\cdot ${pm(B)}`, 'dot product'], [`${A[0]} \\\\cdot (${B[0]}) + ${A[1]} \\\\cdot (${B[1]}) + ${A[2]} \\\\cdot (${B[2]})`, 'multiply row by row'], [`${s}`, s === 0 ? 'zero: perpendicular' : 'not perpendicular']] }; },\n      () => { const n = r(4, 8), k = r(2, n - 2), f = x => x ? x * f(x - 1) : 1, C = f(n) / (f(k) * f(n - k)); return { thema: 'A level · Probability', formel: '\\\\binom{n}{k} = \\\\frac{n!}{k!\\\\,(n-k)!}', erklaerung: 'The binomial coefficient counts how many ways there are to choose k from n, ignoring order.',\n        zeilen: [[`\\\\binom{${n}}{${k}}`, `${k} from ${n}`], [`\\\\frac{${n}!}{${k}! \\\\cdot ${n - k}!}`, 'formula'], [`\\\\frac{${f(n)}}{${f(k)} \\\\cdot ${f(n - k)}}`, 'factorials'], [`${C}`, 'possibilities']] }; },\n      () => { const rr = r(2, 9), A = (Math.PI * rr * rr).toFixed(2).replace('.', '.'); return { thema: 'Circle', formel: 'A = \\\\pi \\\\cdot r^2', erklaerung: 'The area of a circle grows with the square of the radius. Double the radius means four times the area.',\n        zeilen: [[`A = \\\\pi \\\\cdot ${rr}^2`, `radius ${rr} cm`], [`A = \\\\pi \\\\cdot ${rr * rr}`, 'square it'], [`A \\\\approx ${A}\\\\,\\\\text{cm}^2`, 'with π ≈ 3.14159']] }; }\n    ];\n    let t; do { t = r(0, typen.length - 1); } while (t === this.letzter); this.letzter = t;\n    return typen[t]();\n  }\n  renderVals() { const s = this.state; return { zeilen: s.zeilen, opazitaet: s.opazitaet, thema: s.thema, erklaerung: s.erklaerung, formelRef: el => { this.formelEl = el; }, theme: this.props.theme ?? 'light', zeigeTafel: s.modus === 'tafel', zeigeFeld: s.modus === 'feld', feldV: s.feldV, feldFertig: () => this.feldFertig() }; }\n}\n</script>\n</body>\n</html>\n","AufgabenFeld":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<script src=\"./support.js\"></script>\n</head>\n<body>\n<x-dc>\n<helmet><script src=\"/entwurf/ds-base.js\"></script><style>body{margin:0}</style></helmet>\n<div data-feld=\"{{ uid }}\" style=\"width:448px;display:flex;flex-direction:column;gap:24px;color:var(--textPrimary);font-family:var(--font-sans)\">\n<div style=\"height:24px;display:flex;align-items:center\"><span class=\"t-beschriftung\" style=\"color:var(--accentText)\">{{ tag }}</span></div>\n<sc-if value=\"{{ is_g }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0;overflow:visible\" aria-hidden=\"true\"><path d=\"M0 144H442M224 288V6\" fill=\"none\" stroke=\"var(--textSecondary)\" stroke-width=\"1.5\"></path><path d=\"M436 139l7 5-7 5M219 12l5-7 5 7\" fill=\"none\" stroke=\"var(--textSecondary)\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"{{ g.ticks }}\" fill=\"none\" stroke=\"var(--textSecondary)\" stroke-width=\"1.5\"></path><path d=\"{{ g.d }}\" pathLength=\"1\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"stroke-dasharray:1;stroke-dashoffset:{{ g.off }};opacity:{{ g.op }};transition:{{ g.tr }}\"></path></svg>\n<sc-for list=\"{{ g.tl }}\" as=\"t\" hint-placeholder-count=\"10\"><span class=\"t-meta t-ziffern\" style=\"position:absolute;left:{{ t.x }}px;top:{{ t.y }}px;transform:translate(-50%,0);color:var(--textTertiary)\">{{ t.s }}</span></sc-for>\n<span class=\"t-meta\" style=\"position:absolute;left:430px;top:150px;font-style:italic;color:var(--textSecondary)\">x</span><span class=\"t-meta\" style=\"position:absolute;left:234px;top:-2px;font-style:italic;color:var(--textSecondary)\">y</span>\n<sc-for list=\"{{ g.pts }}\" as=\"p\" hint-placeholder-count=\"3\"><span style=\"position:absolute;left:{{ p.x }}px;top:{{ p.y }}px;width:12px;height:12px;margin:-6px 0 0 -6px;box-sizing:border-box;border-radius:var(--radius-full);background:var(--accent);opacity:{{ p.op }};transform:scale({{ p.sc }});transition:{{ p.tr }}\"></span><span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ p.lx }}px;top:{{ p.ly }}px;padding:2px 8px;font-weight:600;white-space:nowrap;color:var(--accentText);opacity:{{ p.op }};transition:{{ p.tr }}\">{{ p.s }}</span></sc-for></div>\n<div style=\"height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px\"><span class=\"t-ziffern\" style=\"font-size:34px;line-height:40px;font-weight:600;letter-spacing:-0.01em;opacity:{{ g.op }};transition:opacity .4s\">{{ g.eq }}</span><span class=\"t-klein\" style=\"color:var(--textSecondary);opacity:{{ g.hop }};transition:opacity .4s\">{{ g.hint }}</span></div></sc-if>\n<sc-if value=\"{{ is_z }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px\"><span class=\"t-fliesstext\" style=\"position:absolute;left:0;top:0;max-width:448px;color:var(--textSecondary);opacity:{{ z.op }};transition:opacity .4s\">{{ z.frage }}</span><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0;overflow:visible\" aria-hidden=\"true\"><path d=\"M0 224H448\" fill=\"none\" stroke=\"var(--textSecondary)\" stroke-width=\"2\"></path><path d=\"{{ z.ticks }}\" fill=\"none\" stroke=\"var(--textSecondary)\" stroke-width=\"1.5\"></path><path d=\"{{ z.d }}\" pathLength=\"1\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"4\" stroke-linecap=\"round\" style=\"stroke-dasharray:1;stroke-dashoffset:{{ z.off }};opacity:{{ z.op }};transition:{{ z.tr }}\"></path></svg>\n<sc-for list=\"{{ z.tl }}\" as=\"t\" hint-placeholder-count=\"5\"><span class=\"t-meta t-ziffern\" style=\"position:absolute;left:{{ t.x }}px;top:240px;transform:translate(-50%,0);color:var(--textTertiary)\">{{ t.s }}</span></sc-for>\n<span style=\"position:absolute;left:{{ z.x1 }}px;top:224px;width:14px;height:14px;margin:-7px 0 0 -7px;box-sizing:border-box;border-radius:var(--radius-full);background:var(--accent);opacity:{{ z.op }};transition:opacity .4s\"></span>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ z.xm }}px;top:{{ z.ly }}px;transform:translate(-50%,0);font-weight:600;color:var(--accentText);opacity:{{ z.lop }};transition:{{ z.ltr }}\">{{ z.sprung }}</span>\n<span style=\"position:absolute;left:{{ z.x2 }}px;top:224px;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:var(--radius-full);background:var(--success);opacity:{{ z.eop }};transform:scale({{ z.esc }});transition:{{ z.etr }}\"></span>\n<span class=\"t-titel t-ziffern\" style=\"position:absolute;left:{{ z.x2 }}px;top:176px;transform:translate(-50%,0);color:var(--successText);opacity:{{ z.eop }};transition:{{ z.etr }}\">{{ z.ziel }}</span></div>\n<div style=\"height:48px;display:flex;align-items:center;gap:14px\"><span class=\"t-ziffern\" style=\"font-size:34px;line-height:40px;font-weight:600;letter-spacing:-0.01em;opacity:{{ z.op }};transition:opacity .4s\">{{ z.eq }}</span><span class=\"t-ziffern\" style=\"font-size:34px;line-height:40px;font-weight:600;color:var(--successText);opacity:{{ z.eop }};transition:{{ z.etr }}\">= {{ z.ziel }}</span></div></sc-if>\n<sc-if value=\"{{ is_py }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px;opacity:{{ py.op }};transition:opacity .4s\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0;overflow:visible\" aria-hidden=\"true\"><polygon points=\"{{ py.sa }}\" stroke=\"var(--catGeometry)\" stroke-width=\"2\" stroke-linejoin=\"round\" style=\"fill:var(--catGeometry);fill-opacity:{{ py.fa }};transition:{{ py.tr }}\"></polygon><polygon points=\"{{ py.sb }}\" stroke=\"var(--catAnalysis)\" stroke-width=\"2\" stroke-linejoin=\"round\" style=\"fill:var(--catAnalysis);fill-opacity:{{ py.fb }};transition:{{ py.tr }}\"></polygon><polygon points=\"{{ py.sc }}\" stroke=\"var(--catAlgebra)\" stroke-width=\"2\" stroke-linejoin=\"round\" style=\"fill:var(--catAlgebra);fill-opacity:{{ py.fc }};transition:{{ py.tr }}\"></polygon><polygon points=\"{{ py.tri }}\" fill=\"none\" stroke=\"var(--textPrimary)\" stroke-width=\"2.5\" stroke-linejoin=\"round\"></polygon><path d=\"{{ py.ra }}\" fill=\"none\" stroke=\"var(--textPrimary)\" stroke-width=\"1.5\"></path></svg>\n<sc-for list=\"{{ py.labels }}\" as=\"l\" hint-placeholder-count=\"3\"><span style=\"position:absolute;left:{{ l.x }}px;top:{{ l.y }}px;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;opacity:{{ l.op }};transition:{{ py.tr }}\"><span class=\"t-ziffern\" style=\"font-size:{{ l.fs }}px;line-height:1.1;font-weight:600;color:var(--textPrimary)\">{{ l.s }}</span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">{{ l.n }}</span></span></sc-for></div>\n<div style=\"height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px\"><span class=\"t-ziffern\" style=\"font-size:34px;line-height:40px;font-weight:600;letter-spacing:-0.01em;opacity:{{ py.op }};transition:opacity .4s\">{{ py.eq }}</span><span class=\"t-ziffern\" style=\"font-size:22px;line-height:28px;font-weight:600;color:var(--accentText);opacity:{{ py.eop }};transition:{{ py.tr }}\">{{ py.rech }}</span></div></sc-if>\n<sc-if value=\"{{ is_w }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px;perspective:1000px;opacity:{{ w.op }};transition:{{ w.otr }}\"><div style=\"position:absolute;left:128px;top:96px;width:96px;height:96px;transform-style:preserve-3d;transform-origin:48px 48px -48px;transform:{{ w.scene }};transition:{{ w.str }}\">\n<div style=\"position:absolute;inset:0;box-sizing:border-box;border:2px solid color-mix(in srgb, var(--textPrimary) 30%, transparent);border-radius:6px;background:var(--error);transform-style:preserve-3d;display:flex;align-items:center;justify-content:center\"><span style=\"display:flex;color:#ffffff\"><svg width=\"34\" height=\"34\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z\"></path></svg></span>\n<div style=\"position:absolute;left:-2px;top:-98px;width:96px;height:96px;box-sizing:border-box;border:2px solid color-mix(in srgb, var(--textPrimary) 30%, transparent);border-radius:6px;background:color-mix(in srgb, var(--pairIndigo) 82%, var(--surface));display:flex;align-items:center;justify-content:center;transform-origin:50% 100%;transform:{{ w.f1 }};transition:{{ w.t1 }}\"><span class=\"t-ziffern\" style=\"font-family:var(--font-display);font-size:40px;line-height:1;font-weight:700;color:#ffffff\">1</span></div>\n<div style=\"position:absolute;left:-2px;top:94px;width:96px;height:96px;box-sizing:border-box;border:2px solid color-mix(in srgb, var(--textPrimary) 30%, transparent);border-radius:6px;background:color-mix(in srgb, var(--catGeometry) 82%, var(--surface));display:flex;align-items:center;justify-content:center;transform-origin:50% 0%;transform:{{ w.f6 }};transition:{{ w.t1 }}\"><span class=\"t-ziffern\" style=\"font-family:var(--font-display);font-size:40px;line-height:1;font-weight:700;color:#ffffff\">6</span></div>\n<div style=\"position:absolute;left:-98px;top:-2px;width:96px;height:96px;box-sizing:border-box;border:2px solid color-mix(in srgb, var(--textPrimary) 30%, transparent);border-radius:6px;background:color-mix(in srgb, var(--pairTeal) 82%, var(--surface));display:flex;align-items:center;justify-content:center;transform-origin:100% 50%;transform:{{ w.f2 }};transition:{{ w.t0 }}\"><span class=\"t-ziffern\" style=\"font-family:var(--font-display);font-size:40px;line-height:1;font-weight:700;color:#ffffff\">2</span></div>\n<div style=\"position:absolute;left:94px;top:-2px;width:96px;height:96px;box-sizing:border-box;border:2px solid color-mix(in srgb, var(--textPrimary) 30%, transparent);border-radius:6px;background:color-mix(in srgb, var(--warning) 82%, var(--surface));transform-style:preserve-3d;display:flex;align-items:center;justify-content:center;transform-origin:0% 50%;transform:{{ w.f4 }};transition:{{ w.t0 }}\"><span class=\"t-ziffern\" style=\"font-family:var(--font-display);font-size:40px;line-height:1;font-weight:700;color:#ffffff\">4</span>\n<div style=\"position:absolute;left:94px;top:-2px;width:96px;height:96px;box-sizing:border-box;border:2px solid color-mix(in srgb, var(--textPrimary) 30%, transparent);border-radius:6px;background:color-mix(in srgb, var(--catAlgebra) 82%, var(--surface));display:flex;align-items:center;justify-content:center;transform-origin:0% 50%;transform:{{ w.f5 }};transition:{{ w.t2 }}\"><span class=\"t-ziffern\" style=\"font-family:var(--font-display);font-size:40px;line-height:1;font-weight:700;color:#ffffff\">5</span><span style=\"position:absolute;inset:-2px;box-sizing:border-box;border:5px solid var(--success);border-radius:6px;opacity:{{ w.ring }};transition:opacity .35s\"></span></div></div>\n</div></div></div>\n<div style=\"height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px\"><span style=\"font-size:24px;line-height:32px;font-weight:600;letter-spacing:-0.01em\">What is opposite red?</span><span class=\"t-titel t-ziffern\" style=\"display:flex;align-items:center;gap:6px;color:var(--successText);opacity:{{ w.ring }};transition:opacity .35s\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"></path></svg>5</span></div></sc-if>\n<sc-if value=\"{{ is_q }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px;opacity:{{ q.op }};transition:{{ q.otr }}\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0;overflow:visible\" aria-hidden=\"true\"><sc-for list=\"{{ q.outline }}\" as=\"o\" hint-placeholder-count=\"3\"><polygon points=\"{{ o }}\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"1.5\" stroke-dasharray=\"5 4\" stroke-linejoin=\"round\"></polygon></sc-for><sc-for list=\"{{ q.cubes }}\" as=\"c\" hint-placeholder-count=\"24\"><g style=\"opacity:{{ c.op }};transform:{{ c.tf }};transition:{{ c.tr }}\"><polygon points=\"{{ c.top }}\" stroke=\"color-mix(in srgb, var(--catGeometry) 55%, var(--textPrimary))\" stroke-width=\"1.5\" stroke-linejoin=\"round\" style=\"fill:color-mix(in srgb, var(--catGeometry) 45%, var(--surface))\"></polygon><polygon points=\"{{ c.left }}\" stroke=\"color-mix(in srgb, var(--catGeometry) 55%, var(--textPrimary))\" stroke-width=\"1.5\" stroke-linejoin=\"round\" style=\"fill:color-mix(in srgb, var(--catGeometry) 78%, var(--surface))\"></polygon><polygon points=\"{{ c.right }}\" stroke=\"color-mix(in srgb, var(--catGeometry) 55%, var(--textPrimary))\" stroke-width=\"1.5\" stroke-linejoin=\"round\" style=\"fill:var(--catGeometry)\"></polygon></g></sc-for></svg>\n<sc-for list=\"{{ q.labels }}\" as=\"l\" hint-placeholder-count=\"3\"><span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ l.x }}px;top:{{ l.y }}px;transform:translate(-50%,-50%);font-weight:600;white-space:nowrap;color:var(--textSecondary)\">{{ l.s }}</span></sc-for></div>\n<div style=\"height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px\"><span class=\"t-ziffern\" style=\"font-size:34px;line-height:40px;font-weight:600;letter-spacing:-0.01em;opacity:{{ q.op }};transition:{{ q.otr }}\">{{ q.eq }}</span><span style=\"display:grid\"><span class=\"t-titel t-ziffern\" style=\"grid-area:1/1;justify-self:end;color:var(--textSecondary);opacity:{{ q.cop }};transition:opacity .3s\">{{ q.count }}</span><span class=\"t-ziffern\" style=\"grid-area:1/1;justify-self:end;font-size:34px;line-height:40px;font-weight:600;color:var(--successText);opacity:{{ q.rop }};transition:opacity .35s\">= {{ q.res }}</span></span></div></sc-if>\n<sc-if value=\"{{ is_k }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px;opacity:{{ k.op }};transition:{{ k.otr }}\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0;overflow:visible\" aria-hidden=\"true\"><sc-for list=\"{{ k.sectors }}\" as=\"s\" hint-placeholder-count=\"12\"><path d=\"{{ s.d }}\" stroke=\"{{ s.st }}\" stroke-width=\"1.5\" stroke-linejoin=\"round\" style=\"fill:{{ s.fill }};transform:{{ s.tf }};transition:{{ s.tr }}\"></path></sc-for><path d=\"M224 144H334\" stroke=\"var(--textPrimary)\" stroke-width=\"2.5\" stroke-linecap=\"round\" style=\"opacity:{{ k.rop }};transition:opacity .3s\"></path><circle cx=\"224\" cy=\"144\" r=\"4\" fill=\"var(--textPrimary)\" style=\"opacity:{{ k.rop }};transition:opacity .3s\"></circle><path d=\"{{ k.brace }}\" fill=\"none\" stroke=\"var(--textSecondary)\" stroke-width=\"1.5\" stroke-linecap=\"round\" style=\"opacity:{{ k.lop }};transition:opacity .35s\"></path></svg>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:279px;top:118px;transform:translate(-50%,-50%);font-weight:600;white-space:nowrap;color:var(--textPrimary);opacity:{{ k.rop }};transition:opacity .3s\">r = {{ k.r }} cm</span>\n<span class=\"t-klein-betont\" style=\"position:absolute;left:224px;top:{{ k.by }}px;transform:translate(-50%,0);font-weight:600;white-space:nowrap;color:var(--textSecondary);opacity:{{ k.lop }};transition:opacity .35s\">π · r</span>\n<span class=\"t-klein-betont\" style=\"position:absolute;left:{{ k.rx }}px;top:{{ k.ry }}px;transform:translate(-100%,-50%);font-weight:600;color:var(--textSecondary);opacity:{{ k.lop }};transition:opacity .35s\">r</span></div>\n<div style=\"height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px\"><span class=\"t-ziffern\" style=\"font-size:34px;line-height:40px;font-weight:600;letter-spacing:-0.01em;opacity:{{ k.op }};transition:{{ k.otr }}\">A = π · r²</span><span class=\"t-ziffern\" style=\"font-size:22px;line-height:28px;font-weight:600;color:var(--successText);opacity:{{ k.lop }};transition:opacity .35s\">≈ {{ k.area }} cm²</span></div></sc-if>\n<sc-if value=\"{{ is_ta }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0;overflow:visible\" aria-hidden=\"true\">\n<path d=\"M4 144H156M80 64V224M176 144H444M176 64V224\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"1.5\"></path><path d=\"M242 140v8M308 140v8M374 140v8M440 140v8\" stroke=\"var(--textTertiary)\" stroke-width=\"1.5\"></path>\n<circle cx=\"80\" cy=\"144\" r=\"68\" fill=\"none\" stroke=\"var(--textSecondary)\" stroke-width=\"2\"></circle>\n<g data-trig=\"a-grp\"><path data-trig=\"a-tcos\" fill=\"none\" stroke=\"var(--catGeometry)\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-opacity=\"0.55\"></path><path data-trig=\"a-tsin\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path data-trig=\"a-proj\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"1.5\" stroke-dasharray=\"4 4\"></path><path data-trig=\"a-arc\" fill=\"none\" stroke=\"var(--textSecondary)\" stroke-width=\"1.5\"></path><path data-trig=\"a-ray\" fill=\"none\" stroke=\"var(--textPrimary)\" stroke-width=\"2\"></path><path data-trig=\"a-cos\" fill=\"none\" stroke=\"var(--catGeometry)\" stroke-width=\"5\" stroke-linecap=\"round\"></path><path data-trig=\"a-sin\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"5\" stroke-linecap=\"round\"></path><circle data-trig=\"a-dot\" r=\"6\" fill=\"var(--textPrimary)\"></circle><circle data-trig=\"a-gdot\" r=\"6\" fill=\"var(--accent)\"></circle></g></svg>\n<span class=\"t-meta\" style=\"position:absolute;left:242px;top:150px;transform:translate(-50%,0);color:var(--textTertiary)\">½π</span><span class=\"t-meta\" style=\"position:absolute;left:308px;top:150px;transform:translate(-50%,0);color:var(--textTertiary)\">π</span><span class=\"t-meta\" style=\"position:absolute;left:374px;top:150px;transform:translate(-50%,0);color:var(--textTertiary)\">1½π</span><span class=\"t-meta\" style=\"position:absolute;left:432px;top:150px;transform:translate(-50%,0);color:var(--textTertiary)\">2π</span>\n<span class=\"t-klein-betont t-ziffern\" data-trig=\"a-vphi\" style=\"position:absolute;left:0;top:0;font-weight:600;color:var(--textSecondary)\"></span></div>\n<div style=\"height:48px;display:flex;align-items:center;gap:28px\"><span style=\"display:flex;align-items:center;gap:10px\"><span style=\"width:18px;height:5px;border-radius:3px;background:var(--accent)\"></span><span class=\"t-ziffern\" data-trig=\"a-vsin\" style=\"font-size:24px;line-height:32px;font-weight:600\"></span></span><span style=\"display:flex;align-items:center;gap:10px\"><span style=\"width:18px;height:5px;border-radius:3px;background:var(--catGeometry)\"></span><span class=\"t-ziffern\" data-trig=\"a-vcos\" style=\"font-size:24px;line-height:32px;font-weight:600\"></span></span></div></sc-if>\n<sc-if value=\"{{ is_te }}\" hint-placeholder-val=\"{{ false }}\"><div data-trig=\"e-all\" style=\"position:relative;width:448px;height:288px;overflow:hidden\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0\" aria-hidden=\"true\"><path data-trig=\"e-grid\" fill=\"none\" stroke=\"var(--divider)\" stroke-width=\"1.5\" stroke-linejoin=\"round\"></path><path data-trig=\"e-sin\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"3\" stroke-opacity=\"0.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path data-trig=\"e-cos\" fill=\"none\" stroke=\"var(--catGeometry)\" stroke-width=\"3\" stroke-opacity=\"0.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path data-trig=\"e-back\" fill=\"none\" stroke=\"var(--textPrimary)\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path data-trig=\"e-axes\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"1.5\"></path><path data-trig=\"e-front\" fill=\"none\" stroke=\"var(--textPrimary)\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path data-trig=\"e-drop\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"1.5\" stroke-dasharray=\"4 4\"></path><path data-trig=\"e-vec\" fill=\"none\" stroke=\"var(--textPrimary)\" stroke-width=\"2\"></path><circle data-trig=\"e-ds\" r=\"5\" fill=\"var(--accent)\"></circle><circle data-trig=\"e-dc\" r=\"5\" fill=\"var(--catGeometry)\"></circle><circle data-trig=\"e-dot\" r=\"6\" fill=\"var(--textPrimary)\"></circle></svg><span class=\"t-klein-betont\" data-trig=\"e-lre\" style=\"position:absolute;left:0;top:0;transform:translate(-50%,-50%);font-weight:600;color:var(--textSecondary)\">Re</span><span class=\"t-klein-betont\" data-trig=\"e-lim\" style=\"position:absolute;left:0;top:0;transform:translate(-50%,-50%);font-weight:600;color:var(--textSecondary)\">Im</span><span class=\"t-klein-betont\" data-trig=\"e-lphi\" style=\"position:absolute;left:0;top:0;transform:translate(-50%,-50%);font-weight:600;color:var(--textSecondary)\">φ</span><span class=\"t-klein-betont\" data-trig=\"e-view\" style=\"position:absolute;left:0;top:0;font-weight:600;color:var(--accentText)\"></span></div>\n<div style=\"height:48px;display:flex;align-items:center;gap:12px\"><span style=\"font-size:30px;line-height:40px;font-weight:600;letter-spacing:-0.01em;white-space:nowrap\">e<sup style=\"font-size:18px\">iφ</sup> = <span style=\"color:var(--catGeometry)\">cos φ</span> + i · <span style=\"color:var(--accent)\">sin φ</span></span></div></sc-if>\n<sc-if value=\"{{ is_tc }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px;overflow:hidden\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0;overflow:visible\" aria-hidden=\"true\">\n<path d=\"M4 144H156M80 64V224M180 144H444M180 8V280\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"1.5\"></path><path d=\"M136 8V280\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"1.5\"></path><path d=\"M245 8V280M375 8V280\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"1.5\" stroke-dasharray=\"3 5\"></path>\n<circle cx=\"80\" cy=\"144\" r=\"56\" fill=\"none\" stroke=\"var(--textSecondary)\" stroke-width=\"2\"></circle>\n<g data-trig=\"c-grp\"><path data-trig=\"c-trace\" fill=\"none\" stroke=\"var(--catAnalysis)\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path data-trig=\"c-proj\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"1.5\" stroke-dasharray=\"4 4\"></path><path data-trig=\"c-ext\" fill=\"none\" stroke=\"var(--textSecondary)\" stroke-width=\"1.5\" stroke-dasharray=\"5 4\"></path><path data-trig=\"c-ray\" fill=\"none\" stroke=\"var(--textPrimary)\" stroke-width=\"2\"></path><path data-trig=\"c-tan\" fill=\"none\" stroke=\"var(--catAnalysis)\" stroke-width=\"5\" stroke-linecap=\"round\"></path><circle data-trig=\"c-dot\" r=\"6\" fill=\"var(--textPrimary)\"></circle><circle data-trig=\"c-idot\" fill=\"var(--catAnalysis)\"></circle><circle data-trig=\"c-gdot\" fill=\"var(--catAnalysis)\"></circle></g></svg>\n<span class=\"t-meta\" style=\"position:absolute;left:245px;top:150px;transform:translate(-50%,0);color:var(--textTertiary)\">½π</span><span class=\"t-meta\" style=\"position:absolute;left:310px;top:150px;transform:translate(-50%,0);color:var(--textTertiary)\">π</span><span class=\"t-meta\" style=\"position:absolute;left:375px;top:150px;transform:translate(-50%,0);color:var(--textTertiary)\">1½π</span><span class=\"t-meta\" style=\"position:absolute;left:142px;top:268px;color:var(--textTertiary)\">x = 1</span>\n<span class=\"t-klein-betont t-ziffern\" data-trig=\"c-vphi\" style=\"position:absolute;left:0;top:0;font-weight:600;color:var(--textSecondary)\"></span></div>\n<div style=\"height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px\"><span style=\"display:flex;align-items:center;gap:10px\"><span style=\"width:18px;height:5px;border-radius:3px;background:var(--catAnalysis)\"></span><span class=\"t-ziffern\" data-trig=\"c-vtan\" style=\"font-size:24px;line-height:32px;font-weight:600\"></span></span><span class=\"t-klein-betont\" style=\"font-weight:600;color:var(--textSecondary)\">tan φ = sin φ : cos φ</span></div></sc-if>\n<sc-if value=\"{{ is_td }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px;overflow:hidden;opacity:{{ ed.op }};transition:opacity .4s\"><div style=\"position:absolute;left:224px;top:144px;width:0;height:0;transform-style:preserve-3d;transform:{{ ed.scene }};transition:{{ ed.tr }}\">\n<sc-for list=\"{{ ed.axis }}\" as=\"pt\" hint-placeholder-count=\"40\"><span style=\"position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:var(--radius-full);background:var(--textTertiary);transform:{{ pt.tf }};transition:{{ ed.tr }}\"></span></sc-for>\n<sc-for list=\"{{ ed.dots }}\" as=\"pt\" hint-placeholder-count=\"120\"><span style=\"position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:var(--radius-full);background:{{ pt.c }};transform:{{ pt.tf }};transition:{{ ed.tr }}\"></span></sc-for>\n<sc-for list=\"{{ ed.labels }}\" as=\"l\" hint-placeholder-count=\"3\"><span class=\"t-klein-betont\" style=\"position:absolute;left:0;top:0;width:40px;height:20px;margin:-10px 0 0 -20px;display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--textSecondary);transform:{{ l.tf }};transition:{{ ed.tr }}\">{{ l.s }}</span></sc-for>\n</div><sc-for list=\"{{ ed.views }}\" as=\"vw\" hint-placeholder-count=\"5\"><span class=\"t-klein-betont\" style=\"position:absolute;right:0;bottom:0;font-weight:600;color:var(--accentText);opacity:{{ vw.op }};transition:{{ vw.tr }}\">{{ vw.s }}</span></sc-for></div>\n<div style=\"height:48px;display:flex;align-items:center;gap:12px\"><span style=\"font-size:30px;line-height:40px;font-weight:600;letter-spacing:-0.01em;white-space:nowrap\">e<sup style=\"font-size:18px\">iφ</sup> = <span style=\"color:var(--catGeometry)\">cos φ</span> + i · <span style=\"color:var(--accent)\">sin φ</span></span></div></sc-if>\n<sc-if value=\"{{ is_p2 }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px;opacity:{{ p2.op }}\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0;overflow:visible\" aria-hidden=\"true\"><rect x=\"8\" y=\"18\" width=\"252\" height=\"252\" style=\"fill:color-mix(in srgb, var(--accent) 30%, var(--surface));opacity:{{ p2.obg }}\"></rect><polygon points=\"{{ p2.ha }}\" stroke=\"var(--catGeometry)\" stroke-width=\"2\" stroke-linejoin=\"round\" style=\"fill:color-mix(in srgb, var(--catGeometry) 34%, var(--surface));opacity:{{ p2.oab }}\"></polygon><polygon points=\"{{ p2.hb }}\" stroke=\"var(--catAnalysis)\" stroke-width=\"2\" stroke-linejoin=\"round\" style=\"fill:color-mix(in srgb, var(--catAnalysis) 34%, var(--surface));opacity:{{ p2.oab }}\"></polygon><polygon points=\"{{ p2.sqa }}\" stroke=\"var(--catGeometry)\" stroke-width=\"2\" stroke-linejoin=\"round\" style=\"fill:color-mix(in srgb, var(--catGeometry) 34%, var(--surface));opacity:{{ p2.osq }}\"></polygon><polygon points=\"{{ p2.sqb }}\" stroke=\"var(--catAnalysis)\" stroke-width=\"2\" stroke-linejoin=\"round\" style=\"fill:color-mix(in srgb, var(--catAnalysis) 34%, var(--surface));opacity:{{ p2.osq }}\"></polygon><polygon points=\"{{ p2.sqc }}\" stroke=\"var(--accent)\" stroke-width=\"2\" stroke-linejoin=\"round\" style=\"fill:color-mix(in srgb, var(--accent) 30%, var(--surface));opacity:{{ p2.osqc }}\"></polygon><sc-for list=\"{{ p2.tris }}\" as=\"t\" hint-placeholder-count=\"4\"><polygon points=\"{{ t.pts }}\" stroke=\"var(--catLinearAlgebra)\" stroke-width=\"2\" stroke-linejoin=\"round\" style=\"fill:color-mix(in srgb, var(--catLinearAlgebra) 40%, var(--surface));opacity:{{ t.op }}\"></polygon></sc-for><path d=\"{{ p2.ra }}\" fill=\"none\" stroke=\"var(--textPrimary)\" stroke-width=\"1.5\"></path><rect x=\"8\" y=\"18\" width=\"252\" height=\"252\" fill=\"none\" stroke=\"var(--textPrimary)\" stroke-width=\"2.5\" style=\"opacity:{{ p2.obg }}\"></rect></svg>\n<sc-for list=\"{{ p2.labels }}\" as=\"l\" hint-placeholder-count=\"9\"><span style=\"position:absolute;left:{{ l.x }}px;top:{{ l.y }}px;transform:translate(-50%,-50%);font-family:{{ l.ff }};font-size:{{ l.fs }}px;line-height:1;font-weight:{{ l.fw }};font-style:{{ l.st }};white-space:nowrap;color:var(--textPrimary);opacity:{{ l.op }}\">{{ l.s }}</span></sc-for>\n<div style=\"position:absolute;left:308px;top:18px;width:140px;height:252px\"><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;opacity:{{ p2.ot1 }}\"><span class=\"t-fliesstext\" style=\"text-wrap:pretty\">A right triangle with sides a, b and c.</span><span class=\"t-fliesstext\" style=\"color:var(--textSecondary);text-wrap:pretty;opacity:{{ p2.ot1b }}\">A square on each side.</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;opacity:{{ p2.ot2 }}\"><span class=\"t-fliesstext\" style=\"text-wrap:pretty\">Four such triangles in a square, arranged twice.</span><div style=\"display:flex;flex-direction:column;gap:6px\"><span class=\"t-beschriftung\" style=\"color:var(--textSecondary)\">Left free</span><span style=\"display:grid\"><span class=\"t-anzeige\" style=\"grid-area:1/1;font-size:40px;line-height:44px;white-space:nowrap;opacity:{{ p2.sc }}\">c²</span><span class=\"t-anzeige\" style=\"grid-area:1/1;font-size:40px;line-height:44px;white-space:nowrap;opacity:{{ p2.sab }}\">a² + b²</span></span></div></div></div></div>\n<div style=\"height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px\"><span class=\"t-ziffern\" style=\"font-size:34px;line-height:40px;font-weight:600;letter-spacing:-0.01em;white-space:nowrap;opacity:{{ p2.op }}\">a² + b² = c²</span><span class=\"t-ziffern\" style=\"font-size:22px;line-height:28px;font-weight:600;white-space:nowrap;color:var(--successText);opacity:{{ p2.ores }}\">{{ p2.rech }}</span></div></sc-if>\n<sc-if value=\"{{ is_zy }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px;overflow:hidden\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0;overflow:visible\" aria-hidden=\"true\"><g data-trig=\"zy-all\"><ellipse data-trig=\"zy-bot\" stroke=\"var(--textPrimary)\" stroke-width=\"2\" style=\"fill:color-mix(in srgb, var(--accent) 50%, var(--surface))\"></ellipse><sc-for list=\"{{ zyStrips }}\" as=\"i\" hint-placeholder-count=\"60\"><path data-trig=\"zy-s\" stroke-width=\"0.8\"></path></sc-for><path data-trig=\"zy-ebk\" fill=\"none\" stroke=\"var(--textPrimary)\" stroke-width=\"2\" stroke-dasharray=\"5 4\"></path><path data-trig=\"zy-edge\" fill=\"none\" stroke=\"var(--textPrimary)\" stroke-width=\"2.5\" stroke-linejoin=\"round\"></path><ellipse data-trig=\"zy-top\" stroke=\"var(--textPrimary)\" stroke-width=\"2.5\" style=\"fill:color-mix(in srgb, var(--accent) 50%, var(--surface))\"></ellipse><path data-trig=\"zy-rad\" fill=\"none\" stroke=\"var(--textPrimary)\" stroke-width=\"2\" stroke-linecap=\"round\"></path><circle data-trig=\"zy-c\" r=\"3.5\" fill=\"var(--textPrimary)\"></circle><path data-trig=\"zy-dim\" fill=\"none\" stroke=\"var(--textPrimary)\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></g></svg><span class=\"t-klein-betont t-ziffern\" data-trig=\"zy-lr\" style=\"position:absolute;left:0;top:0;transform:translate(0,-50%);font-weight:600;white-space:nowrap;color:var(--textSecondary)\"></span><span class=\"t-klein-betont t-ziffern\" data-trig=\"zy-lh\" style=\"position:absolute;left:0;top:0;transform:translate(0,-50%);font-weight:600;white-space:nowrap;color:var(--textSecondary)\"></span><span class=\"t-klein-betont\" data-trig=\"zy-lu\" style=\"position:absolute;left:0;top:0;transform:translate(-50%,-100%);font-weight:600;white-space:nowrap;color:var(--textPrimary)\">2π · r</span></div>\n<div style=\"height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px\"><span class=\"t-ziffern\" style=\"display:flex;align-items:baseline;gap:8px;font-size:26px;line-height:36px;font-weight:600;white-space:nowrap\">O =<span style=\"border-bottom:4px solid var(--accent)\">2 · πr²</span>+<span style=\"border-bottom:4px solid var(--catAnalysis)\">2πr · h</span></span><span class=\"t-ziffern\" data-trig=\"zy-res\" style=\"font-size:22px;line-height:28px;font-weight:600;white-space:nowrap;color:var(--successText);opacity:0;transition:opacity .35s\"></span></div></sc-if>\n<sc-if value=\"{{ is_pz }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px;opacity:{{ pz.op }};transition:{{ pz.otr }}\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0;overflow:visible\" aria-hidden=\"true\"><path d=\"M224 28V260\" stroke=\"var(--divider)\" stroke-width=\"2\"></path><sc-for list=\"{{ pz.arcs }}\" as=\"ar\" hint-placeholder-count=\"4\"><path d=\"{{ ar.d }}\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"opacity:{{ ar.op }};transition:opacity .4s\"></path></sc-for></svg>\n<div class=\"t-beschriftung\" style=\"position:absolute;left:96px;top:8px;width:108px;text-align:right;color:var(--textSecondary)\">Percent</div><div class=\"t-beschriftung\" style=\"position:absolute;left:244px;top:8px;color:var(--textSecondary)\">Euro</div>\n<sc-for list=\"{{ pz.rows }}\" as=\"rw\" hint-placeholder-count=\"3\"><div style=\"position:absolute;left:96px;right:96px;top:{{ rw.y }}px;height:48px;display:grid;grid-template-columns:1fr 1fr;align-items:center;opacity:{{ rw.op }};transform:translateY({{ rw.ty }}px);transition:opacity .45s, transform .45s\"><span class=\"t-ziffern\" style=\"font-size:26px;line-height:32px;font-weight:600;text-align:right;padding-right:20px;white-space:nowrap;color:{{ rw.c }}\">{{ rw.l }}</span><span class=\"t-ziffern\" style=\"font-size:26px;line-height:32px;font-weight:600;padding-left:20px;white-space:nowrap;color:{{ rw.c }}\">{{ rw.r }}</span></div></sc-for>\n<sc-for list=\"{{ pz.ops }}\" as=\"o2\" hint-placeholder-count=\"4\"><span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ o2.x }}px;top:{{ o2.y }}px;transform:translate(-50%,-50%);font-weight:600;white-space:nowrap;color:var(--accentText);opacity:{{ o2.op }};transition:opacity .4s\">{{ o2.s }}</span></sc-for></div>\n<div style=\"height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px\"><span class=\"t-ziffern\" style=\"font-size:34px;line-height:40px;font-weight:600;letter-spacing:-0.01em;opacity:{{ pz.op }};transition:{{ pz.otr }}\">{{ pz.eq }}</span><span class=\"t-ziffern\" style=\"font-size:34px;line-height:40px;font-weight:600;color:var(--successText);opacity:{{ pz.rop }};transition:opacity .35s\">{{ pz.res }}</span></div></sc-if>\n<sc-if value=\"{{ is_wa }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px;opacity:{{ wa.op }};transition:{{ wa.otr }}\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0\" aria-hidden=\"true\"><path d=\"M44 124H404\" stroke=\"var(--textPrimary)\" stroke-width=\"3\" stroke-linecap=\"round\"></path><path d=\"M224 124l-20 44h40z\" fill=\"var(--textSecondary)\"></path><path d=\"M44 170H404\" stroke=\"var(--divider)\" stroke-width=\"1.5\"></path></svg>\n<sc-for list=\"{{ wa.left }}\" as=\"it\" hint-placeholder-count=\"5\"><sc-if value=\"{{ it.box }}\" hint-placeholder-val=\"{{ true }}\"><span class=\"t-klein-betont\" style=\"position:absolute;left:{{ it.x }}px;top:{{ it.y }}px;width:30px;height:30px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-style:italic;font-weight:600;border-radius:6px;background:{{ it.bg }};color:#ffffff;transition:{{ wa.tr }}\">x</span></sc-if><sc-if value=\"{{ it.circ }}\" hint-placeholder-val=\"{{ false }}\"><span style=\"position:absolute;left:{{ it.x }}px;top:{{ it.y }}px;width:14px;height:14px;border-radius:var(--radius-full);background:var(--textSecondary);opacity:{{ it.op }};transform:{{ it.tf }};transition:{{ wa.tr }}\"></span></sc-if></sc-for>\n<sc-for list=\"{{ wa.right }}\" as=\"it\" hint-placeholder-count=\"11\"><span style=\"position:absolute;left:{{ it.x }}px;top:{{ it.y }}px;width:14px;height:14px;border-radius:var(--radius-full);background:{{ it.bg }};opacity:{{ it.op }};transform:{{ it.tf }};transition:{{ wa.tr }}\"></span></sc-for>\n<span class=\"t-klein\" style=\"position:absolute;left:0;right:0;top:200px;text-align:center;color:var(--textSecondary);opacity:{{ wa.nop }};transition:opacity .3s\">{{ wa.note }}</span></div>\n<div style=\"height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px\"><span class=\"t-ziffern\" style=\"font-size:34px;line-height:40px;font-weight:600;letter-spacing:-0.01em;color:{{ wa.eqc }};opacity:{{ wa.op }};transition:{{ wa.otr }}\">{{ wa.eq }}</span></div></sc-if>\n<sc-if value=\"{{ is_ur }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px;opacity:{{ ur.op }};transition:{{ ur.otr }}\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0\" aria-hidden=\"true\"><path d=\"M124 40h200v180a24 24 0 0 1-24 24H148a24 24 0 0 1-24-24z\" fill=\"none\" stroke=\"var(--textSecondary)\" stroke-width=\"2\" style=\"opacity:{{ ur.jop }};transition:opacity .4s\"></path></svg>\n<sc-for list=\"{{ ur.balls }}\" as=\"b\" hint-placeholder-count=\"8\"><span style=\"position:absolute;left:{{ b.x }}px;top:{{ b.y }}px;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:var(--radius-full);background:{{ b.c }};opacity:{{ b.dim }};transition:{{ ur.tr }}\"></span></sc-for>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:0;right:0;top:200px;text-align:center;font-weight:600;color:var(--successText);opacity:{{ ur.bop }};transition:opacity .35s\">{{ ur.nb }} of {{ ur.N }} balls are blue</span></div>\n<div style=\"height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px\"><span class=\"t-ziffern\" style=\"font-size:34px;line-height:40px;font-weight:600;letter-spacing:-0.01em;opacity:{{ ur.op }};transition:{{ ur.otr }}\">P(blue)</span><span class=\"t-ziffern\" style=\"font-size:34px;line-height:40px;font-weight:600;color:var(--successText);opacity:{{ ur.bop }};transition:opacity .35s\">{{ ur.res }}</span></div></sc-if>\n<sc-if value=\"{{ is_st }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px;opacity:{{ st.op }};transition:{{ st.otr }}\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0;overflow:visible\" aria-hidden=\"true\"><path d=\"M20 240H428\" stroke=\"var(--textSecondary)\" stroke-width=\"2\"></path><path d=\"{{ st.s2 }}\" stroke=\"var(--textTertiary)\" stroke-width=\"6\" stroke-linecap=\"round\"></path><path d=\"{{ st.s1 }}\" stroke=\"var(--catAnalysis)\" stroke-width=\"6\" stroke-linecap=\"round\"></path><path d=\"{{ st.ray }}\" stroke=\"var(--warning)\" stroke-width=\"1.5\" stroke-dasharray=\"5 5\"></path><path d=\"{{ st.small }}\" stroke=\"var(--catAnalysis)\" stroke-width=\"2\" stroke-linejoin=\"round\" style=\"fill:color-mix(in srgb, var(--catAnalysis) 30%, transparent);transform-box:view-box;transform-origin:{{ st.gx }}px {{ st.gy }}px;transform:scale({{ st.sc }});transition:{{ st.str }};opacity:{{ st.sop }}\"></path><path d=\"{{ st.tree }}\" stroke=\"var(--accent)\" stroke-width=\"6\" stroke-linecap=\"round\" stroke-dasharray=\"{{ st.dash }}\" style=\"opacity:{{ st.top }};transition:opacity .4s\"></path><circle cx=\"{{ st.px }}\" cy=\"{{ st.hy }}\" r=\"7\" fill=\"var(--textPrimary)\"></circle><path d=\"{{ st.body }}\" stroke=\"var(--textPrimary)\" stroke-width=\"3\" stroke-linecap=\"round\"></path></svg>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ st.tlx }}px;top:{{ st.tly }}px;transform:translate(-100%,-50%);font-weight:600;white-space:nowrap;color:{{ st.hc }}\">{{ st.hlab }}</span>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ st.plx }}px;top:{{ st.ply }}px;transform:translate(-100%,-50%);font-weight:600;white-space:nowrap;color:var(--textSecondary)\">{{ st.l1 }}</span>\n<span class=\"t-meta t-ziffern\" style=\"position:absolute;left:{{ st.m1 }}px;top:248px;transform:translateX(-50%);white-space:nowrap;color:var(--catAnalysis)\">{{ st.ls1 }}</span>\n<span class=\"t-meta t-ziffern\" style=\"position:absolute;left:{{ st.m2 }}px;top:266px;transform:translateX(-50%);white-space:nowrap;color:var(--textTertiary)\">Shadow {{ st.ls2 }}</span></div>\n<div style=\"height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px\"><span class=\"t-ziffern\" style=\"font-size:30px;line-height:40px;font-weight:600;letter-spacing:-0.01em;opacity:{{ st.op }};transition:{{ st.otr }}\">{{ st.eq }}</span><span class=\"t-ziffern\" style=\"font-size:30px;line-height:40px;font-weight:600;color:var(--successText);opacity:{{ st.rop }};transition:opacity .35s\">{{ st.res }}</span></div></sc-if>\n<sc-if value=\"{{ is_sp }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px;opacity:{{ sp.op }};transition:{{ sp.otr }}\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0;overflow:visible\" aria-hidden=\"true\"><path d=\"M0 144H442M224 288V6\" fill=\"none\" stroke=\"var(--textSecondary)\" stroke-width=\"1.5\"></path><path d=\"M436 139l7 5-7 5M219 12l5-7 5 7\" fill=\"none\" stroke=\"var(--textSecondary)\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"{{ sp.ticks }}\" fill=\"none\" stroke=\"var(--textSecondary)\" stroke-width=\"1.5\"></path><path d=\"{{ sp.path }}\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"2.5\" stroke-dasharray=\"5 5\" stroke-linecap=\"round\" style=\"opacity:{{ sp.gop }};transition:opacity .6s\"></path><path d=\"{{ sp.path }}\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"4\" stroke-linecap=\"round\" style=\"transform:{{ sp.tf }};transition:{{ sp.str }}\"></path></svg>\n<sc-for list=\"{{ sp.tl }}\" as=\"t\" hint-placeholder-count=\"10\"><span class=\"t-meta t-ziffern\" style=\"position:absolute;left:{{ t.x }}px;top:{{ t.y }}px;transform:translate(-50%,0);color:var(--textTertiary)\">{{ t.s }}</span></sc-for>\n<span style=\"position:absolute;left:{{ sp.vx }}px;top:{{ sp.vy }}px;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:var(--radius-full);background:var(--success);opacity:{{ sp.vop }};transition:opacity .35s\"></span><span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ sp.lx }}px;top:{{ sp.ly }}px;font-weight:600;white-space:nowrap;color:var(--successText);opacity:{{ sp.vop }};transition:opacity .35s\">{{ sp.vs }}</span></div>\n<div style=\"height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px\"><span class=\"t-ziffern\" style=\"font-size:30px;line-height:40px;font-weight:600;letter-spacing:-0.01em;white-space:nowrap;opacity:{{ sp.op }};transition:{{ sp.otr }}\">{{ sp.eq }}</span><span class=\"t-klein\" style=\"text-align:right;color:var(--textSecondary);opacity:{{ sp.hop }};transition:opacity .4s\">{{ sp.hint }}</span></div></sc-if>\n<sc-if value=\"{{ is_si }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px;opacity:{{ si.op }};transition:{{ si.otr }}\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0;overflow:visible\" aria-hidden=\"true\"><path d=\"M104 160H344M224 40V280\" stroke=\"var(--textTertiary)\" stroke-width=\"1.5\"></path><circle cx=\"224\" cy=\"160\" r=\"100\" fill=\"none\" stroke=\"var(--textSecondary)\" stroke-width=\"2\"></circle><path d=\"{{ si.arcA }}\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"2.5\"></path><path d=\"M224 160L{{ si.ax }} {{ si.ay }}\" stroke=\"var(--textPrimary)\" stroke-width=\"2\"></path><path d=\"{{ si.hA }}\" stroke=\"var(--accent)\" stroke-width=\"5\" stroke-linecap=\"round\" style=\"opacity:{{ si.hAop }};transition:opacity .4s\"></path><path d=\"{{ si.hA }}\" stroke=\"var(--textTertiary)\" stroke-width=\"2\" stroke-dasharray=\"4 4\" style=\"opacity:{{ si.qop }};transition:opacity .4s\"></path><g style=\"opacity:{{ si.bop }};transition:opacity .4s\"><path d=\"{{ si.arcB }}\" fill=\"none\" stroke=\"var(--catAnalysis)\" stroke-width=\"2.5\"></path><path d=\"M224 160L{{ si.bx }} {{ si.by }}\" stroke=\"var(--textPrimary)\" stroke-width=\"2\"></path><path d=\"{{ si.hB }}\" stroke=\"var(--catAnalysis)\" stroke-width=\"5\" stroke-linecap=\"round\"></path><circle cx=\"{{ si.bx }}\" cy=\"{{ si.by }}\" r=\"6\" fill=\"var(--textPrimary)\"></circle></g><path d=\"{{ si.mirror }}\" stroke=\"var(--textSecondary)\" stroke-width=\"1.5\" stroke-dasharray=\"4 4\" style=\"opacity:{{ si.mop }};transition:opacity .4s\"></path><circle cx=\"{{ si.ax }}\" cy=\"{{ si.ay }}\" r=\"6\" fill=\"var(--textPrimary)\"></circle></svg>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ si.lax }}px;top:{{ si.lay }}px;transform:translate(-50%,-50%);font-weight:600;white-space:nowrap;color:var(--accentText)\">{{ si.labA }}</span>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ si.lbx }}px;top:{{ si.lby }}px;transform:translate(-50%,-50%);font-weight:600;white-space:nowrap;color:var(--catAnalysis);opacity:{{ si.bop }};transition:opacity .4s\">{{ si.labB }}</span>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ si.vbx }}px;top:{{ si.vby }}px;transform:translate(0,-50%);font-weight:600;white-space:nowrap;color:var(--catAnalysis);opacity:{{ si.bop }};transition:opacity .4s\">{{ si.sv }}</span>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ si.vax }}px;top:{{ si.vby }}px;transform:translate(-100%,-50%);font-weight:600;white-space:nowrap;color:var(--textPrimary);opacity:{{ si.qop }};transition:opacity .4s\">?</span>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ si.vax }}px;top:{{ si.vby }}px;transform:translate(-100%,-50%);font-weight:600;white-space:nowrap;color:var(--successText);opacity:{{ si.hAop }};transition:opacity .4s\">{{ si.sv }}</span></div>\n<div style=\"height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px\"><span class=\"t-ziffern\" style=\"font-size:34px;line-height:40px;font-weight:600;letter-spacing:-0.01em;white-space:nowrap;opacity:{{ si.op }};transition:{{ si.otr }}\">{{ si.eq }}</span><span class=\"t-ziffern\" style=\"font-size:26px;line-height:40px;font-weight:600;white-space:nowrap;color:var(--successText);opacity:{{ si.hAop }};transition:opacity .35s\">{{ si.res }}</span></div></sc-if>\n<sc-if value=\"{{ is_bd }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px;opacity:{{ bd.op }};transition:{{ bd.otr }}\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0;overflow:visible\" aria-hidden=\"true\"><sc-for list=\"{{ bd.edges }}\" as=\"e\" hint-placeholder-count=\"6\"><path d=\"{{ e.d }}\" fill=\"none\" stroke=\"{{ e.c }}\" stroke-width=\"{{ e.w }}\" stroke-linecap=\"round\" style=\"opacity:{{ e.op }};transition:opacity .4s, stroke .4s\"></path></sc-for></svg>\n<sc-for list=\"{{ bd.edges }}\" as=\"e\" hint-placeholder-count=\"6\"><span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ e.lx }}px;top:{{ e.ly }}px;transform:translate(-50%,-50%);padding:0 4px;font-weight:600;color:{{ e.lc }};opacity:{{ e.op }};transition:opacity .4s\">½</span></sc-for>\n<sc-for list=\"{{ bd.nodes }}\" as=\"n\" hint-placeholder-count=\"7\"><span class=\"t-kartentitel\" style=\"position:absolute;left:{{ n.x }}px;top:{{ n.y }}px;width:40px;height:40px;margin:-20px 0 0 -20px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-weight:600;border-radius:var(--radius-full);background:{{ n.bg }};border:2px solid {{ n.bc }};color:var(--textPrimary);opacity:{{ n.op }};transition:opacity .4s, background .4s, border-color .4s\">{{ n.s }}</span></sc-for>\n<sc-for list=\"{{ bd.ends }}\" as=\"n\" hint-placeholder-count=\"4\"><span class=\"t-meta t-ziffern\" style=\"position:absolute;left:{{ n.x }}px;top:{{ n.y }}px;transform:translate(0,-50%);white-space:nowrap;color:{{ n.c }};opacity:{{ n.op }};transition:opacity .4s\">{{ n.s }}</span></sc-for></div>\n<div style=\"height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px\"><span class=\"t-ziffern\" style=\"font-size:34px;line-height:40px;font-weight:600;letter-spacing:-0.01em;white-space:nowrap;opacity:{{ bd.op }};transition:{{ bd.otr }}\">{{ bd.eq }}</span><span class=\"t-ziffern\" style=\"font-size:30px;line-height:40px;font-weight:600;white-space:nowrap;color:var(--successText);opacity:{{ bd.rop }};transition:opacity .35s\">{{ bd.res }}</span></div></sc-if>\n<sc-if value=\"{{ is_pr }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px;overflow:hidden\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0;overflow:visible\" aria-hidden=\"true\"><g data-trig=\"pr-all\"><path data-trig=\"pr-hid\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"1.5\" stroke-dasharray=\"5 4\"></path><path data-trig=\"pr-l\" stroke=\"none\" stroke-linejoin=\"round\" style=\"fill:color-mix(in srgb, var(--catAnalysis) 78%, var(--surface))\"></path><path data-trig=\"pr-r\" stroke=\"none\" stroke-linejoin=\"round\" style=\"fill:var(--catAnalysis)\"></path><path data-trig=\"pr-t\" stroke=\"none\" stroke-linejoin=\"round\" style=\"fill:color-mix(in srgb, var(--catAnalysis) 45%, var(--surface))\"></path><path data-trig=\"pr-vis\" fill=\"none\" stroke=\"var(--textPrimary)\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path data-trig=\"pr-arr\" d=\"M150 58Q224 -6 298 50M298 50l-13 -1M298 50l-6 -11\" fill=\"none\" stroke=\"var(--catAnalysis)\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"opacity:0\"></path></g></svg><span class=\"t-klein-betont t-ziffern\" data-trig=\"pr-lab\" style=\"position:absolute;left:0;top:0;white-space:nowrap;font-weight:600;color:var(--textSecondary)\"></span><span class=\"t-meta\" style=\"position:absolute;left:124px;top:270px;transform:translate(-50%,0);color:var(--textTertiary)\">Pyramid</span><span class=\"t-meta\" style=\"position:absolute;left:324px;top:270px;transform:translate(-50%,0);color:var(--textTertiary)\">Cuboid</span></div>\n<div style=\"height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px\"><span class=\"t-ziffern\" style=\"font-size:30px;line-height:40px;font-weight:600;letter-spacing:-0.01em;white-space:nowrap\">V = ⅓ · G · h</span><span style=\"display:grid\"><span class=\"t-titel t-ziffern\" data-trig=\"pr-cnt\" style=\"grid-area:1/1;justify-self:end;white-space:nowrap;color:var(--textSecondary);opacity:0;transition:opacity .3s\"></span><span class=\"t-ziffern\" data-trig=\"pr-res\" style=\"grid-area:1/1;justify-self:end;font-size:30px;line-height:40px;font-weight:600;white-space:nowrap;color:var(--successText);opacity:0;transition:opacity .35s\"></span></span></div></sc-if>\n</div>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script data-props=\"{&quot;$preview&quot;:{&quot;width&quot;:448,&quot;height&quot;:408},&quot;variante&quot;:{&quot;editor&quot;:null,&quot;tsType&quot;:&quot;string&quot;},&quot;onDone&quot;:{&quot;editor&quot;:null,&quot;tsType&quot;:&quot;() => void&quot;},&quot;index&quot;:{&quot;editor&quot;:null,&quot;tsType&quot;:&quot;number&quot;},&quot;halt&quot;:{&quot;editor&quot;:null,&quot;tsType&quot;:&quot;number&quot;},&quot;ende&quot;:{&quot;editor&quot;:null,&quot;tsType&quot;:&quot;number&quot;},&quot;loese&quot;:{&quot;editor&quot;:null,&quot;tsType&quot;:&quot;boolean&quot;},&quot;pool&quot;:{&quot;editor&quot;:null,&quot;tsType&quot;:&quot;number[]&quot;}}\">\nclass Component extends DCLogic {\n  uid = 'f' + Math.random().toString(36).slice(2, 9);\n  timers = {};\n  SPEC = { g: { d: [60, 1500, 2600, 500], n: 4 }, z: { d: [60, 1000, 2600, 500], n: 5 }, py: { d: [60, 700, 700, 800, 2600, 500], n: 3 }, w: { d: [60, 1400, 1500, 1900, 2800, 500], n: 1 }, q: { d: [60, 800, 2000, 2600, 500], n: 3 }, k: { d: [60, 1500, 1800, 2800, 500], n: 3 }, td: { d: [60, 2800, 2800, 2800, 2800, 2400, 500], n: 1 }, ta: { loop: 8000 }, tc: { loop: 8000 }, te: { loop: 16000 }, zy: { loop: 9000 }, pr: { loop: 9600 }, p2: { loop: 13900 }, pz: { d: [60, 1400, 1600, 2600, 500], n: 3 }, wa: { d: [60, 1500, 1800, 1800, 2600, 500], n: 3 }, ur: { d: [60, 1400, 1600, 2600, 500], n: 3 }, st: { d: [60, 1400, 1500, 1800, 2600, 500], n: 3 }, sp: { d: [60, 1400, 1600, 2600, 500], n: 3 }, si: { d: [60, 1500, 1700, 2600, 500], n: 3 }, bd: { d: [60, 1500, 1800, 2600, 500], n: 3 } };\n  ZS = Array.from({ length: 60 }, (_, i) => i);\n  ZO = Array.from({ length: 60 }, (_, i) => i).sort((a, b) => Math.cos(-Math.PI + 2 * Math.PI * (a + 0.5) / 60) - Math.cos(-Math.PI + 2 * Math.PI * (b + 0.5) / 60));\n  TAGS = {\"z\":\"Grade 7 · Rational numbers\",\"py\":\"Grade 8 · Pythagoras’ theorem\",\"w\":\"Solids · Cube net\",\"q\":\"Solids · Volume of a cuboid\",\"k\":\"Grade 8 · Circle\",\"ta\":\"Grade 10 · Sine and cosine\",\"te\":\"Outlook · Euler’s formula\",\"tc\":\"Grade 10 · Tangent\",\"td\":\"Outlook · Euler’s formula\",\"zy\":\"Solids · Cylinder\",\"pr\":\"Solids · Pyramid\",\"p2\":\"Grade 8 · Pythagoras’ theorem\",\"g\":\"Grade 8 · Linear functions\",\"pz\":\"Grade 7 · Percentages\",\"wa\":\"Grade 7 · Equations\",\"ur\":\"Grade 8 · Probability\",\"st\":\"Grade 9 · Intercept theorems\",\"sp\":\"Grade 9 · Quadratic functions\",\"si\":\"Grade 10 · Trigonometry\",\"bd\":\"Grade 10 · Random experiments\"};\n  state = { v: null, i: 0, p: 0, t: 0 };\n  cur() { return this.props.variante || this.state.auto || 'g'; }\n  componentDidMount() {\n    this.sichtbar = true;\n    const el = document.querySelector('[data-feld=\"' + this.uid + '\"]');\n    if (el && 'IntersectionObserver' in window) { this.io = new IntersectionObserver(es => { this.sichtbar = es.some(e => e.isIntersecting); }, { rootMargin: '200px' }); this.io.observe(el); }\n    this.start();\n  }\n  componentDidUpdate(pp) { if (pp.variante !== this.props.variante || pp.loese !== this.props.loese || pp.halt !== this.props.halt || pp.index !== this.props.index || JSON.stringify(pp.pool) !== JSON.stringify(this.props.pool)) this.start(); }\n  task() { return this.props.halt != null; }\n  componentWillUnmount() { this.dead = true; this.stop(); if (this.io) this.io.disconnect(); }\n  stop() { clearTimeout(this.timers.s); clearInterval(this.timers.q); cancelAnimationFrame(this.raf); }\n  done() {\n    if (this.dead) return;\n    if (this.props.onDone) { this.props.onDone(); return; }\n    const ks = Object.keys(this.SPEC).filter(k => k !== this.cur());\n    this.setState({ auto: ks[Math.floor(Math.random() * ks.length)] }, () => this.start());\n  }\n  start() {\n    this.stop();\n    if (!this.SPEC[this.cur()].loop) this.lastV = this.cur();\n    const v = this.cur(), sp = this.SPEC[v], task = this.task(), loese = !!this.props.loese, ix = +(this.props.index ?? 0), pool = Array.isArray(this.props.pool) && this.props.pool.length ? this.props.pool : null, pick = () => pool[Math.floor(Math.random() * pool.length)];\n    this.t0 = performance.now();\n    if (sp.loop) {\n      const rnd = a => a[Math.floor(Math.random() * a.length)], ZY = [[3, 5], [2, 6], [4, 4]], PR = [[6, 9], [3, 4], [6, 5]], P2 = [[3, 4, 5], [6, 8, 10], [9, 12, 15]];\n      this.zyN = task ? ZY[ix % 3] : pool ? ZY[pick() % 3] : rnd(ZY); this.prN = task ? PR[ix % 3] : pool ? PR[pick() % 3] : rnd(PR); this.p2N = task ? P2[ix % 3] : pool ? P2[pick() % 3] : rnd(P2);\n      this.setState({ v, i: 0, p: 0 });\n      if (!task && v === 'p2' && this.lastV === 'p2') this.t0 -= 3400;\n      this.lastV = v;\n      const halt = +this.props.halt || 0, ende = this.props.ende != null ? +this.props.ende : sp.loop;\n      if (task) this.t0 -= halt;\n      const loop = now => {\n        let t = now;\n        if (task) { if (!loese) t = this.t0 + halt; else if (now - this.t0 >= ende) { this.t0 = now - ende; } }\n        else if (now - this.t0 >= sp.loop) { this.done(); return; }\n        if (this.sichtbar !== false) { try { this.trig(v, t); } catch (e) {} }\n        this.raf = requestAnimationFrame(loop); };\n      this.raf = requestAnimationFrame(loop);\n      return;\n    }\n    if (task) {\n      const ende = this.props.ende != null ? +this.props.ende : sp.d.length - 2;\n      let p = +this.props.halt || 0;\n      const step = () => { this.setState({ v, i: ix % sp.n, p, t: Date.now() }); if (!loese || p >= ende) return; const d = sp.d[p]; p++; this.timers.s = setTimeout(step, d); };\n      step();\n      if (v === 'q') this.timers.q = setInterval(() => { if (this.state.p === 2 && this.sichtbar !== false) this.forceUpdate(); }, 60);\n      return;\n    }\n    let i = pool ? pick() % sp.n : Math.floor(Math.random() * sp.n), p = 0, rounds = 0;\n    const R = sp.n > 1 && !pool ? 2 : 1;\n    const step = () => { if (rounds >= R) { this.done(); return; } this.setState({ v, i, p, t: Date.now() }); const d = sp.d[p]; p++; if (p >= sp.d.length) { p = 0; i = (i + 1) % sp.n; rounds++; } this.timers.s = setTimeout(step, d); };\n    step();\n    if (v === 'q') this.timers.q = setInterval(() => { if (this.state.p === 2 && this.sichtbar !== false) this.forceUpdate(); }, 60);\n  }\n  trig(v, now) {\n    const T = 8000, el = (now - this.t0) % T, prog = Math.min(1, el / 6400), ph = prog * 2 * Math.PI, fade = el > 7500 ? Math.max(0, (T - el) / 500) : el < 250 ? el / 250 : 1;\n    const rt = document.querySelector('[data-feld=\"' + this.uid + '\"]'), all = s => rt ? rt.querySelectorAll('[data-trig=\"' + s + '\"]') : [];\n    const set = (s, a, val) => all(s).forEach(n => n.setAttribute(a, val));\n    const txt = (s, val) => all(s).forEach(n => { if (n.textContent !== val) n.textContent = val; });\n    const f2 = x => (x < -0.005 ? '−' : '') + Math.abs(x).toFixed(2).replace('.', '.');\n    const r1 = x => Math.round(x * 10) / 10, deg = Math.round(ph * 180 / Math.PI);\n    if (v === 'p2') { this.forceUpdate(); return; }\n    if (v === 'ta') {\n    // 3a\n    const cx = 80, cy = 144, R = 68, gx0 = 176, gw = 264, px = cx + R * Math.cos(ph), py = cy - R * Math.sin(ph), gx = gx0 + prog * gw;\n    let ds = '', dc = '';\n    for (let a = 0; a <= ph + 1e-6; a += 0.04) { const x = r1(gx0 + a / (2 * Math.PI) * gw); ds += (ds ? 'L' : 'M') + x + ' ' + r1(cy - R * Math.sin(a)); dc += (dc ? 'L' : 'M') + x + ' ' + r1(cy - R * Math.cos(a)); }\n    ds += `L${r1(gx)} ${r1(py)}`; dc += `L${r1(gx)} ${r1(cy - R * Math.cos(ph))}`;\n    all('a-grp').forEach(n => n.style.opacity = fade);\n    set('a-tsin', 'd', ds); set('a-tcos', 'd', dc);\n    set('a-ray', 'd', `M${cx} ${cy}L${r1(px)} ${r1(py)}`);\n    set('a-sin', 'd', `M${r1(px)} ${cy}L${r1(px)} ${r1(py)}`);\n    set('a-cos', 'd', `M${cx} ${cy}L${r1(px)} ${cy}`);\n    set('a-proj', 'd', `M${r1(px)} ${r1(py)}L${r1(gx)} ${r1(py)}`);\n    const ar = 20; set('a-arc', 'd', ph < 0.02 ? '' : `M${cx + ar} ${cy}A${ar} ${ar} 0 ${ph > Math.PI ? 1 : 0} 0 ${r1(cx + ar * Math.cos(ph))} ${r1(cy - ar * Math.sin(ph))}`);\n    set('a-dot', 'cx', r1(px)); set('a-dot', 'cy', r1(py)); set('a-gdot', 'cx', r1(gx)); set('a-gdot', 'cy', r1(py));\n    txt('a-vsin', 'sin φ = ' + f2(Math.sin(ph))); txt('a-vcos', 'cos φ = ' + f2(Math.cos(ph))); txt('a-vphi', 'φ = ' + deg + '°');\n    \n    }\n    if (v === 'tc') {\n    const cx = 80, cy = 144;\n    // 3c\n    const R2 = 56, X1 = cx + R2, g0 = 180, gw2 = 260, top = 8, bot = 280, clamp = y => Math.max(top, Math.min(bot, y));\n    const qx = cx + R2 * Math.cos(ph), qy = cy - R2 * Math.sin(ph), t = Math.tan(ph), iy = cy - R2 * t, inb = iy >= top && iy <= bot && Math.abs(Math.cos(ph)) > 0.01;\n    let dt = '', pen = false, last = null;\n    for (let a = 0; a <= ph + 1e-6; a += 0.012) { const y = cy - R2 * Math.tan(a), ok = y >= top - 40 && y <= bot + 40 && Math.abs(Math.cos(a)) > 0.02; if (ok && last !== null && Math.abs(y - last) > 200) pen = false; if (ok) { dt += (pen ? 'L' : 'M') + r1(g0 + a / (2 * Math.PI) * gw2) + ' ' + r1(y); pen = true; last = y; } else { pen = false; last = null; } }\n    all('c-grp').forEach(n => n.style.opacity = fade);\n    set('c-trace', 'd', dt);\n    set('c-ray', 'd', `M${cx} ${cy}L${r1(qx)} ${r1(qy)}`);\n    const ey = clamp(iy), ex = Math.abs(t) < 1e-9 ? X1 : cx + (cy - ey) / (t || 1e-9);\n    set('c-ext', 'd', Math.abs(Math.cos(ph)) < 0.01 ? `M${cx} ${cy}L${cx} ${Math.sin(ph) > 0 ? top : bot}` : `M${cx} ${cy}L${r1(inb ? X1 : ex)} ${r1(ey)}`);\n    set('c-tan', 'd', `M${X1} ${cy}L${X1} ${r1(ey)}`);\n    set('c-dot', 'cx', r1(qx)); set('c-dot', 'cy', r1(qy));\n    set('c-idot', 'cx', X1); set('c-idot', 'cy', r1(ey)); set('c-idot', 'r', inb ? 6 : 0);\n    const gq = g0 + prog * gw2; set('c-gdot', 'cx', r1(gq)); set('c-gdot', 'cy', r1(ey)); set('c-gdot', 'r', inb ? 6 : 0);\n    set('c-proj', 'd', inb ? `M${X1} ${r1(iy)}L${r1(gq)} ${r1(iy)}` : '');\n    txt('c-vtan', Math.abs(Math.cos(ph)) < 0.02 ? 'tan φ = undefined' : 'tan φ = ' + f2(t)); txt('c-vphi', 'φ = ' + deg + '°');\n    \n    }\n    if (v === 'te') {\n    // 3b Euler\n    const EL = 150, EA = 72, W = 104, ET = 16000, seg = 3200, et = (now - this.t0) % ET, si = Math.floor(et / seg), stt = et % seg;\n    const PO = [[90, 0, 'From the front: a circle'], [36, -22, 'At an angle: a helix'], [0, 0, 'From the side: sin φ'], [0, -90, 'From above: cos φ'], [-36, -22, 'At an angle: a helix']];\n    const ez = x => x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2, kk = stt < 1800 ? 0 : ez((stt - 1800) / 1400), A = PO[si], B = PO[(si + 1) % PO.length];\n    const yb = (A[0] + (B[0] - A[0]) * kk) * Math.PI / 180, pa = (A[1] + (B[1] - A[1]) * kk) * Math.PI / 180, cb = Math.cos(yb), sb = Math.sin(yb), ca = Math.cos(pa), sa = Math.sin(pa);\n    const pr = (x, y, zz) => { const x1 = x * cb + zz * sb, z1 = -x * sb + zz * cb, y2 = y * ca + z1 * sa, z2 = -y * sa + z1 * ca, f = 1800 / (1800 - z2); return [224 + x1 * f, 144 - y2 * f, z2]; };\n    const M = p => r1(p[0]) + ' ' + r1(p[1]), poly = pts => 'M' + pts.map(M).join('L');\n    const H = u => [-EL + u * 2 * EL, EA * Math.sin(u * 4 * Math.PI), EA * Math.cos(u * 4 * Math.PI)];\n    let dsn = '', dcs = '', dbk = '', dfr = '', prev = null, pz = null;\n    const N = 200;\n    for (let n = 0; n <= N; n++) { const u = n / N, [x, y, zz] = H(u), p = pr(x, y, zz);\n      dsn += (n ? 'L' : 'M') + M(pr(x, y, -W)); dcs += (n ? 'L' : 'M') + M(pr(x, -W, zz));\n      if (prev) { const front = (p[2] + pz) / 2 >= -10; const seg2 = 'M' + M(prev) + 'L' + M(p); if (front) dfr += seg2; else dbk += seg2; }\n      prev = p; pz = p[2]; }\n    set('e-sin', 'd', dsn); set('e-cos', 'd', dcs); set('e-back', 'd', dbk); set('e-front', 'd', dfr);\n    set('e-grid', 'd', poly([pr(-EL, -W, -W), pr(EL, -W, -W), pr(EL, W, -W), pr(-EL, W, -W)]) + 'Z' + poly([pr(-EL, -W, -W), pr(-EL, -W, W), pr(EL, -W, W), pr(EL, -W, -W)]));\n    set('e-axes', 'd', poly([pr(-EL - 20, 0, 0), pr(EL + 20, 0, 0)]) + poly([pr(-EL, 0, -W), pr(-EL, 0, W)]) + poly([pr(-EL, -W, 0), pr(-EL, W, 0)]));\n    const uu = ((now - this.t0) % 8000) / 8000, [hx, hy, hz] = H(uu), hp = pr(hx, hy, hz), ps = pr(hx, hy, -W), pc = pr(hx, -W, hz);\n    set('e-vec', 'd', 'M' + M(pr(hx, 0, 0)) + 'L' + M(hp)); set('e-drop', 'd', 'M' + M(hp) + 'L' + M(ps) + 'M' + M(hp) + 'L' + M(pc));\n    set('e-dot', 'cx', r1(hp[0])); set('e-dot', 'cy', r1(hp[1])); set('e-ds', 'cx', r1(ps[0])); set('e-ds', 'cy', r1(ps[1])); set('e-dc', 'cx', r1(pc[0])); set('e-dc', 'cy', r1(pc[1]));\n    const pos = (s2, p) => all(s2).forEach(n => { n.style.left = r1(p[0]) + 'px'; n.style.top = Math.max(40, r1(p[1])) + 'px'; });\n    pos('e-lre', pr(-EL, 0, W + 22)); pos('e-lim', pr(-EL, W + 18, 0)); pos('e-lphi', pr(EL + 36, 0, 0));\n    txt('e-view', kk < 0.5 ? A[2] : B[2]); all('e-view').forEach(n => n.style.opacity = stt < 1800 ? 1 : Math.abs(kk - 0.5) * 2);\n    all('e-all').forEach(n => n.style.opacity = Math.max(0, Math.min(1, (now - this.t0) / 400, (ET - (now - this.t0)) / 400)));\n\n    }\n    if (v === 'zy') {\n      const L = 9000, e = now - this.t0, E = x => x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2, PI = Math.PI;\n      const t = e < 1500 ? 0 : e < 3300 ? E((e - 1500) / 1800) : e < 6200 ? 1 : e < 7800 ? 1 - E((e - 6200) / 1600) : 0;\n      all('zy-all').forEach(n => n.style.opacity = Math.max(0, Math.min(1, e / 300, (L - e) / 400)));\n      const [rn, hn] = this.zyN || [3, 5], R1 = 40, Rr = R1 * (1.7 - 0.7 * t), Hh = 100 * (1.7 - 0.7 * t), ry = 0.32 * Rr, cx = 224, yT = 144 - Hh / 2;\n      const X = th => cx + (1 - t) * Rr * Math.sin(th) + t * Rr * th, OY = th => (1 - t) * ry * Math.cos(th);\n      all('zy-s').forEach((nd, k) => { const i = this.ZO[k], a0 = -PI + 2 * PI * i / 60, a1 = a0 + 2 * PI / 60, x0 = r1(X(a0)), x1 = r1(X(a1));\n        nd.setAttribute('d', 'M' + x0 + ' ' + r1(yT + OY(a0)) + 'L' + x1 + ' ' + r1(yT + OY(a1)) + 'L' + x1 + ' ' + r1(yT + Hh + OY(a1)) + 'L' + x0 + ' ' + r1(yT + Hh + OY(a0)) + 'Z');\n        const pc = Math.round(72 + (1 - t) * 24 * Math.sin((a0 + a1) / 2 + 0.5)), c = 'color-mix(in srgb, var(--catAnalysis) ' + pc + '%, var(--surface))';\n        if (nd._c !== c) { nd.style.fill = c; nd.style.stroke = c; nd._c = c; } });\n      const edge = (a, b, yy, st) => { let d = ''; for (let k = 0; k <= st; k++) { const th = a + (b - a) * k / st; d += (k ? 'L' : 'M') + r1(X(th)) + ' ' + r1(yy + OY(th)); } return d; };\n      let dE = edge(-PI, PI, yT, 90) + edge(-PI / 2, PI / 2, yT + Hh, 40), dB = '';\n      if (t > 0.02) dE += edge(-PI, -PI / 2, yT + Hh, 20) + edge(PI / 2, PI, yT + Hh, 20) + 'M' + r1(X(-PI)) + ' ' + r1(yT + OY(-PI)) + 'V' + r1(yT + Hh + OY(-PI)) + 'M' + r1(X(PI)) + ' ' + r1(yT + OY(PI)) + 'V' + r1(yT + Hh + OY(PI));\n      else { dB = edge(PI / 2, 1.5 * PI, yT + Hh, 40); dE += 'M' + r1(cx - Rr) + ' ' + r1(yT) + 'V' + r1(yT + Hh) + 'M' + r1(cx + Rr) + ' ' + r1(yT) + 'V' + r1(yT + Hh); }\n      set('zy-edge', 'd', dE); set('zy-ebk', 'd', dB);\n      const dry = ry + (Rr - ry) * t, tcy = yT - t * Rr, bcy = yT + Hh + t * Rr;\n      for (const [k, cyy] of [['zy-top', tcy], ['zy-bot', bcy]]) { set(k, 'cx', cx); set(k, 'cy', r1(cyy)); set(k, 'rx', r1(Rr)); set(k, 'ry', r1(dry)); }\n      set('zy-rad', 'd', 'M' + cx + ' ' + r1(tcy) + 'H' + r1(cx + Rr)); set('zy-c', 'cx', cx); set('zy-c', 'cy', r1(tcy));\n      const du = Math.max(0, Math.min(1, (t - 0.85) / 0.15)), w2 = PI * Rr - 10, ym = r1(yT + Hh / 2);\n      set('zy-dim', 'd', 'M' + r1(cx - w2) + ' ' + ym + 'H' + r1(cx + w2) + 'M' + r1(cx - w2 + 8) + ' ' + (ym - 6) + 'L' + r1(cx - w2) + ' ' + ym + 'L' + r1(cx - w2 + 8) + ' ' + (ym + 6) + 'M' + r1(cx + w2 - 8) + ' ' + (ym - 6) + 'L' + r1(cx + w2) + ' ' + ym + 'L' + r1(cx + w2 - 8) + ' ' + (ym + 6));\n      all('zy-dim').forEach(n => n.style.opacity = du);\n      const pos = (k, x, y, o) => all(k).forEach(n => { n.style.left = r1(x) + 'px'; n.style.top = r1(y) + 'px'; if (o !== undefined) n.style.opacity = o; });\n      pos('zy-lr', cx + Rr + 10, tcy); pos('zy-lh', cx + (1 - t) * Rr + t * PI * Rr + 12, yT + Hh / 2); pos('zy-lu', cx, ym - 8, du);\n      txt('zy-lr', 'r = ' + rn + ' cm'); txt('zy-lh', 'h = ' + hn + ' cm');\n      txt('zy-res', '≈ ' + (Math.round(2 * PI * rn * (rn + hn) * 10) / 10).toString().replace('.', '.') + ' cm²');\n      all('zy-res').forEach(n => n.style.opacity = e > 3300 && e < 6200 ? 1 : 0);\n    }\n    if (v === 'pr') {\n      const L = 9600, e = now - this.t0, E = x => x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;\n      all('pr-all').forEach(n => n.style.opacity = Math.max(0, Math.min(1, e / 300, (L - e) / 400)));\n      const [an, hn] = this.prN || [6, 9], u = 104, C = 0.866, hm = 1.3, oy = 144 - (u - hm * u) / 2;\n      const A = (x, y, z) => [124 + (x - y) * C * u, oy + (x + y) * 0.5 * u - z * u], B = (x, y, z) => [324 + (x - y) * C * u, oy + (x + y) * 0.5 * u - z * u];\n      const cyc = e < 800 ? -1 : Math.floor((e - 800) / 2000), ce = (e - 800) % 2000;\n      let Lp = 0, Lq = 0, pour = 0;\n      if (e >= 800 && e < 6800) { Lq = cyc / 3; if (ce < 900) Lp = E(ce / 900); else if (ce < 1900) { const f = E((ce - 900) / 1000); Lp = 1 - f; Lq = (cyc + f) / 3; pour = Math.sin(Math.PI * Math.min(1, (ce - 900) / 1000)); } else Lq = (cyc + 1) / 3; }\n      else if (e >= 6800) Lq = 1;\n      const pg = pts => 'M' + pts.map(p => r1(p[0]) + ' ' + r1(p[1])).join('L') + 'Z', ln = (a, b) => 'M' + r1(a[0]) + ' ' + r1(a[1]) + 'L' + r1(b[0]) + ' ' + r1(b[1]);\n      let dl = '', dr = '', dt = '';\n      if (Lp > 0.005) { const z = Lp * hm, q = 0.5 * Lp; dr += pg([A(1, 0, 0), A(1, 1, 0), A(1 - q, 1 - q, z), A(1 - q, q, z)]); dl += pg([A(0, 1, 0), A(1, 1, 0), A(1 - q, 1 - q, z), A(q, 1 - q, z)]); dt += pg([A(q, q, z), A(1 - q, q, z), A(1 - q, 1 - q, z), A(q, 1 - q, z)]); }\n      if (Lq > 0.005) { const z = Lq * hm; dr += pg([B(1, 0, 0), B(1, 1, 0), B(1, 1, z), B(1, 0, z)]); dl += pg([B(0, 1, 0), B(1, 1, 0), B(1, 1, z), B(0, 1, z)]); dt += pg([B(0, 0, z), B(1, 0, z), B(1, 1, z), B(0, 1, z)]); }\n      set('pr-l', 'd', dl); set('pr-r', 'd', dr); set('pr-t', 'd', dt);\n      const ap = A(0.5, 0.5, hm);\n      set('pr-hid', 'd', ln(A(0, 0, 0), A(1, 0, 0)) + ln(A(0, 0, 0), A(0, 1, 0)) + ln(A(0, 0, 0), ap) + ln(B(0, 0, 0), B(1, 0, 0)) + ln(B(0, 0, 0), B(0, 1, 0)) + ln(B(0, 0, 0), B(0, 0, hm)));\n      set('pr-vis', 'd', ln(A(0, 1, 0), A(1, 1, 0)) + ln(A(1, 0, 0), A(1, 1, 0)) + ln(A(0, 1, 0), ap) + ln(A(1, 1, 0), ap) + ln(A(1, 0, 0), ap) + ln(B(0, 1, 0), B(1, 1, 0)) + ln(B(1, 0, 0), B(1, 1, 0)) + ln(B(0, 1, 0), B(0, 1, hm)) + ln(B(1, 1, 0), B(1, 1, hm)) + ln(B(1, 0, 0), B(1, 0, hm)) + pg([B(0, 0, hm), B(1, 0, hm), B(1, 1, hm), B(0, 1, hm)]));\n      all('pr-arr').forEach(n => n.style.opacity = pour);\n      txt('pr-lab', 'a = ' + an + ' cm · h = ' + hn + ' cm');\n      txt('pr-cnt', 'Filling ' + Math.max(1, Math.min(3, cyc + 1)) + ' of 3'); txt('pr-res', '= ' + (an * an * hn / 3) + ' cm³');\n      all('pr-cnt').forEach(n => n.style.opacity = e >= 800 && e < 6800 ? 1 : 0); all('pr-res').forEach(n => n.style.opacity = e >= 6800 && e < 9200 ? 1 : 0);\n    }\n  }\n  renderVals() {\n    const fmt = n => (n < 0 ? '−' : '') + String(Math.abs(n)).replace('.', '.');\n    const r = n => Math.round(n * 10) / 10;\n    const ease = 'cubic-bezier(.3,.7,.2,1)', fold = 'cubic-bezier(.55,0,.2,1)';\n    const v = this.cur(), S = this.state.v === v ? this.state : { i: 0, p: 0, t: 0 };\n    const o = { uid: this.uid, tag: this.TAGS[v], zyStrips: this.ZS };\n    for (const k of Object.keys(this.SPEC)) o['is_' + k] = k === v;\n    if (v === 'g') {\n    // 1a Graph\n    const G = [\n      { eq: 'y = 2x + 1', tag: 'Grade 8 · Linear functions', f: x => 2 * x + 1, pts: [[0, 1], [-0.5, 0]], hint: 'slope 2' },\n      { eq: 'y = x² − 4', tag: 'Grade 9 · Parabolas', f: x => x * x - 4, pts: [[-2, 0], [2, 0], [0, -4]], hint: 'vertex (0 | −4)' },\n      { eq: 'y = −½x + 2', tag: 'Grade 8 · Linear functions', f: x => -0.5 * x + 2, pts: [[0, 2], [4, 0]], hint: 'zero x = 4' },\n      { eq: 'y = 2ˣ', tag: 'Grade 10 · Exponential functions', f: x => 2 ** x, pts: [[0, 1], [1, 2], [2, 4]], hint: 'doubles' }\n    ];\n    const gs = S, gd = G[gs.i % 4], U = 32, X = x => 224 + U * x, Y = y => 144 - U * y;\n    let d = '', pen = false;\n    for (let x = -7; x <= 7.0001; x += 0.05) { const y = gd.f(x); if (Math.abs(y) <= 4.4) { d += (pen ? 'L' : 'M') + r(X(x)) + ' ' + r(Y(y)); pen = true; } else pen = false; }\n    let ticks = '', tl = [];\n    for (const v of [-6, -4, -2, 2, 4, 6]) { ticks += `M${X(v)} 139V149`; tl.push({ x: X(v), y: 152, s: fmt(v) }); }\n    for (const v of [-4, -2, 2, 4]) { ticks += `M219 ${Y(v)}H229`; tl.push({ x: 210, y: Y(v) - 9, s: fmt(v) }); }\n    const g = { tag: gd.tag, eq: gd.eq, hint: gd.hint, d, ticks, tl, off: gs.p === 0 ? 1 : 0, op: gs.p === 3 ? 0 : 1, hop: gs.p === 2 ? 1 : 0, tr: gs.p === 0 ? 'none' : `stroke-dashoffset 1.4s ${ease}, opacity .4s` };\n    g.pts = gd.pts.map(([x, y], k) => { const px = X(x), py = Y(y), on = gs.p === 2; return { x: px, y: py, s: `(${fmt(x)} | ${fmt(y)})`, lx: px + (px > 330 ? -96 : 12), ly: py < 40 ? py + 10 : py - 34, op: on ? 1 : 0, sc: on ? 1 : 0.3, tr: on ? `opacity .35s ${k * 0.18}s, transform .45s cubic-bezier(.3,1.6,.5,1) ${k * 0.18}s` : 'opacity .3s, transform .3s' }; });\n    \n    o.g = g; o.tag = gd.tag;\n    }\n    if (v === 'z') {\n    // 1b Zahlenstrahl\n    const N = [[-9, 13], [6, -11], [-3, -8], [-12, 19], [11, -7]];\n    const zs = S, [a, b] = N[zs.i % 5], Z = v => 224 + 16 * v, x1 = Z(a), x2 = Z(a + b), h = Math.min(130, 20 + Math.abs(b) * 6);\n    let zt = ''; const ztl = [];\n    for (let v = -14; v <= 14; v++) { const big = v % 5 === 0; zt += `M${Z(v)} ${big ? 216 : 220}V${big ? 232 : 228}`; if (big) ztl.push({ x: Z(v), s: fmt(v) }); }\n    const zOn = zs.p === 2;\n    const z = { ticks: zt, tl: ztl, x1, x2, xm: (x1 + x2) / 2, ly: 224 - h - 40, d: `M${x1} 224Q${(x1 + x2) / 2} ${224 - 2 * h} ${x2} 224`,\n      frage: this.task() ? '' : `Account: ${fmt(a)} €. ${b > 0 ? 'You receive ' + b + ' €.' : 'You spend ' + Math.abs(b) + ' €.'}`,\n      eq: `${fmt(a)} ${b < 0 ? '−' : '+'} ${Math.abs(b)}`, ziel: fmt(a + b), sprung: (b > 0 ? '+' : '−') + Math.abs(b),\n      off: zs.p === 0 ? 1 : 0, op: zs.p === 3 ? 0 : 1, tr: zs.p === 0 ? 'none' : `stroke-dashoffset .9s ${ease}, opacity .4s`,\n      lop: zs.p === 1 || zOn ? 1 : 0, ltr: zs.p === 0 ? 'none' : 'opacity .3s .3s',\n      eop: zOn ? 1 : 0, esc: zOn ? 1 : 0.2, etr: zOn ? 'opacity .3s, transform .5s cubic-bezier(.3,1.7,.5,1)' : 'opacity .3s, transform .3s' };\n    \n    o.z = z;\n    }\n    if (v === 'py') {\n    // 1c Pythagoras\n    const P = [[3, 4, 5], [5, 12, 13], [8, 6, 10]];\n    const ps = S, [pa, pb, pc] = P[ps.i % 3];\n    const w = 2 * pa + pb, hh = pa + 2 * pb, s = Math.min(420 / w, 272 / hh), ox = (448 - w * s) / 2 + pa * s, oy = (288 - hh * s) / 2 + (pa + pb) * s;\n    const pt = (x, y) => [r(ox + x * s), r(oy + y * s)], pl = arr => arr.map(([x, y]) => pt(x, y).join(',')).join(' ');\n    const k = ps.p, q = Math.min(1, 10 / pa) * s;\n    const [cx, cy] = pt(0, 0), m = Math.min(14, s * 0.8);\n    const py = { sa: pl([[0, 0], [-pa, 0], [-pa, -pa], [0, -pa]]), sb: pl([[0, 0], [pb, 0], [pb, pb], [0, pb]]), sc: pl([[0, -pa], [pb, 0], [pb + pa, -pb], [pa, -pa - pb]]), tri: pl([[0, 0], [pb, 0], [0, -pa]]),\n      ra: `M${cx + m} ${cy}V${cy - m}H${cx}`,\n      fa: k >= 1 && k <= 4 ? 0.28 : 0, fb: k >= 2 && k <= 4 ? 0.28 : 0, fc: k >= 3 && k <= 4 ? 0.28 : 0,\n      op: k === 5 ? 0 : 1, tr: k === 0 ? 'none' : 'fill-opacity .5s, opacity .4s',\n      eq: this.task() && k < 3 ? 'a² + b² = c²' : `${pa}² + ${pb}² = ${pc}²`, rech: `${pa * pa} + ${pb * pb} = ${pc * pc}`, eop: k === 4 ? 1 : 0 };\n    const fs = side => Math.max(16, Math.min(34, side * s * 0.32));\n    py.labels = [[-pa / 2, -pa / 2, pa * pa, 'a²', 1, pa], [pb / 2, pb / 2, pb * pb, 'b²', 2, pb], [(pa + pb) / 2, -(pa + pb) / 2, pc * pc, 'c²', 3, pc]].map(([x, y, v, n, st, side]) => { const [lx, ly] = pt(x, y); return { x: lx, y: ly, s: String(v), n, fs: Math.round(fs(side)), op: k >= st && k <= 4 ? 1 : 0 }; });\n    \n    o.py = py;\n    }\n    if (v === 'w') {\n    // 2a Würfelnetz\n    const wp = S.p, fo = wp >= 3 && wp <= 4;\n    const wv = { op: wp === 0 || wp === 5 ? 0 : 1, otr: wp === 0 ? 'none' : 'opacity .4s',\n      scene: fo ? `translateX(48px) rotateX(26deg) rotateY(${wp === 4 ? -216 : -36}deg) scale(1.55)` : 'translateX(0px) rotateX(0deg) rotateY(0deg) scale(1)',\n      str: wp === 0 ? 'none' : `transform 1.5s ${fold}`,\n      f1: fo ? 'rotateX(-90deg)' : 'rotateX(0deg)', f6: fo ? 'rotateX(90deg)' : 'rotateX(0deg)', f2: fo ? 'rotateY(90deg)' : 'rotateY(0deg)', f4: fo ? 'rotateY(-90deg)' : 'rotateY(0deg)', f5: fo ? 'rotateY(-90deg)' : 'rotateY(0deg)',\n      t0: wp === 0 ? 'none' : `transform 1.1s ${fold}`, t1: wp === 0 ? 'none' : `transform 1.1s ${fold} .15s`, t2: wp === 0 ? 'none' : `transform 1.1s ${fold} .4s`,\n      ring: wp >= 2 && wp <= 4 ? 1 : 0 };\n    \n    o.w = wv;\n    }\n    if (v === 'q') {\n    // 2b Quader\n    const qs = S, qp = qs.p, [qa, qb, qc] = [[4, 3, 2], [3, 3, 3], [5, 2, 3]][qs.i % 3], NQ = qa * qb * qc, C = 0.866;\n    const u = Math.min(40, 340 / ((qa + qb) * C), 200 / ((qa + qb) * 0.5 + qc));\n    const qox = 224 - (qa - qb) * C * u / 2, qoy = 144 - ((qa + qb) * 0.5 * u - qc * u) / 2;\n    const P3 = (x, y, zz) => [r(qox + (x - y) * C * u), r(qoy + (x + y) * 0.5 * u - zz * u)], pp = a => a.map(v => P3(...v).join(',')).join(' ');\n    const shown = qp >= 2 && qp <= 3, D = 1.5 / NQ, cubes = [];\n    let idx = 0;\n    for (let zz = 0; zz < qc; zz++) for (let x = 0; x < qa; x++) for (let y = 0; y < qb; y++) {\n      cubes.push({ top: pp([[x, y, zz + 1], [x + 1, y, zz + 1], [x + 1, y + 1, zz + 1], [x, y + 1, zz + 1]]), left: pp([[x, y + 1, zz], [x + 1, y + 1, zz], [x + 1, y + 1, zz + 1], [x, y + 1, zz + 1]]), right: pp([[x + 1, y, zz], [x + 1, y + 1, zz], [x + 1, y + 1, zz + 1], [x + 1, y, zz + 1]]),\n        op: shown ? 1 : 0, tf: shown ? 'translateY(0px)' : 'translateY(-18px)', tr: qp === 2 ? `opacity .2s ${r(idx * D * 100) / 100}s, transform .4s cubic-bezier(.3,1.5,.5,1) ${r(idx * D * 100) / 100}s` : 'none' });\n      idx++;\n    }\n    const mid = (a, b2) => [(a[0] + b2[0]) / 2, (a[1] + b2[1]) / 2];\n    const la = mid(P3(0, qb, 0), P3(qa, qb, 0)), lb = mid(P3(qa, 0, 0), P3(qa, qb, 0)), lc = mid(P3(qa, 0, 0), P3(qa, 0, qc));\n    const qn = qp === 2 ? Math.min(NQ, Math.max(0, Math.floor((Date.now() - (qs.t || 0)) / (D * 1000)) + 1)) : NQ;\n    const qv = { op: qp === 0 || qp === 4 ? 0 : 1, otr: qp === 0 ? 'none' : 'opacity .4s', cubes,\n      outline: [pp([[0, 0, qc], [qa, 0, qc], [qa, qb, qc], [0, qb, qc]]), pp([[0, qb, 0], [qa, qb, 0], [qa, qb, qc], [0, qb, qc]]), pp([[qa, 0, 0], [qa, qb, 0], [qa, qb, qc], [qa, 0, qc]])],\n      labels: [{ x: la[0] - 14, y: la[1] + 22, s: qa + ' cm' }, { x: lb[0] + 14, y: lb[1] + 22, s: qb + ' cm' }, { x: lc[0] + 34, y: lc[1], s: qc + ' cm' }],\n      eq: `V = ${qa} · ${qb} · ${qc}`, count: qn + (qn === 1 ? ' cubes' : ' cubes'), res: NQ + ' cm³', cop: qp === 2 ? 1 : 0, rop: qp === 3 ? 1 : 0 };\n    \n    o.q = qv;\n    }\n    if (v === 'k') {\n    // 2c Kreis\n    const kp = S.p, kr = [4, 3, 5][S.i % 3], R = 110, sn = Math.sin(Math.PI / 12), cs = Math.cos(Math.PI / 12), ww = 2 * R * sn, kx0 = (448 - 6 * ww) / 2, base = 144 + R * cs / 2, lay = kp >= 2 && kp <= 3;\n    const kv = { op: kp === 0 || kp === 4 ? 0 : 1, otr: kp === 0 ? 'none' : 'opacity .4s', r: kr, area: fmt(r(Math.PI * kr * kr)),\n      wedge: `M0 0L${r(-R * sn)} ${r(-R * cs)}A${R} ${R} 0 0 1 ${r(R * sn)} ${r(-R * cs)}Z`,\n      rop: kp === 1 ? 1 : 0, lop: kp === 3 ? 1 : 0,\n      brace: `M${r(kx0)} ${r(base + 14)}v6H${r(kx0 + 6 * ww)}v-6M${r(kx0 - 14)} ${r(base)}h-6V${r(base - R * cs)}h6`,\n      by: r(base + 26), rx: r(kx0 - 26), ry: r(base - R * cs / 2) };\n    const wf = kv.wedge, wl = `M0 0L${r(-R * sn)} ${r(-R * cs)}A${R} ${R} 0 0 1 0 ${-R}Z`, wr = `M0 0L0 ${-R}A${R} ${R} 0 0 1 ${r(R * sn)} ${r(-R * cs)}Z`, ktop = r(base - R * cs);\n    const ktr = j => kp === 0 ? 'none' : `transform 1.3s ${fold} ${(j * 0.07).toFixed(2)}s`, circ = i => `translate(224px, 144px) rotate(${i * 30 + 15}deg)`;\n    kv.sectors = Array.from({ length: 11 }, (_, i) => { const A = i < 6, j = A ? i : i - 6;\n      return { d: wf, fill: A ? 'var(--accent)' : 'var(--catGeometry)', st: A ? 'color-mix(in srgb, var(--accent) 55%, var(--textPrimary))' : 'color-mix(in srgb, var(--catGeometry) 55%, var(--textPrimary))',\n        tf: lay ? (A ? `translate(${r(kx0 + j * ww + ww / 2)}px, ${r(base)}px) rotate(0deg)` : `translate(${r(kx0 + (j + 1) * ww)}px, ${ktop}px) rotate(180deg)`) : circ(i),\n        tr: ktr(j) }; });\n    kv.sectors.push({ d: wl, fill: 'var(--catGeometry)', st: 'color-mix(in srgb, var(--catGeometry) 55%, var(--textPrimary))', tf: lay ? `translate(${r(kx0)}px, ${ktop}px) rotate(180deg)` : circ(11), tr: ktr(0) });\n    kv.sectors.push({ d: wr, fill: 'var(--catGeometry)', st: 'color-mix(in srgb, var(--catGeometry) 55%, var(--textPrimary))', tf: lay ? `translate(${r(kx0 + 6 * ww)}px, ${ktop}px) rotate(180deg)` : circ(11), tr: ktr(5) });\n    \n    o.k = kv;\n    }\n    if (v === 'td') {\n      const pi = S.p === 0 ? 0 : Math.min(4, S.p - 1), poses = [[0, -90, 'From the front: a circle'], [-20, -38, 'At an angle: a helix'], [0, 0, 'From the side: sin φ'], [-90, 0, 'From above: cos φ'], [-20, -38, 'At an angle: a helix']];\n      const [ea, eb] = poses[pi], bb = 'rotateY(' + (-eb) + 'deg) rotateX(' + (-ea) + 'deg)', EA = 84, EL = 168;\n      const at = (x, y, zz) => 'translate3d(' + r(x) + 'px, ' + r(y) + 'px, ' + r(zz) + 'px) ' + bb;\n      const dots = [];\n      for (let n = 0; n <= 120; n++) { const f = n / 120 * 4 * Math.PI; dots.push({ tf: at(-EL + n / 120 * 2 * EL, -EA * Math.sin(f), -EA * Math.cos(f)), c: 'color-mix(in srgb, var(--accent) ' + Math.round(100 - n / 120 * 70) + '%, var(--catAnalysis))' }); }\n      const axis = [];\n      for (let x = -EL - 16; x <= EL + 16; x += 12) axis.push({ tf: at(x, 0, 0) });\n      for (let y = -100; y <= 100; y += 12) { axis.push({ tf: at(-EL, y, 0) }); axis.push({ tf: at(-EL, 0, y) }); }\n      o.ed = { op: S.p === 0 || S.p === 6 ? 0 : 1, scene: 'rotateX(' + ea + 'deg) rotateY(' + eb + 'deg)', tr: S.p === 0 ? 'none' : 'transform 1.6s cubic-bezier(.6,0,.2,1)', dots, axis,\n        labels: [{ s: 'Re', tf: at(-EL, 0, -120) }, { s: 'Im', tf: at(-EL, -106, 0) }, { s: 'φ', tf: at(EL + 34, 0, 0) }],\n        views: poses.map((p, i) => ({ s: p[2], op: i === pi ? 1 : 0, tr: i === pi ? 'opacity .3s .25s' : 'opacity .2s' })) };\n    }\n    if (v === 'p2') {\n      const e = this.t0 ? performance.now() - this.t0 : 0, L = 13900, [pa, pb, pc] = this.p2N || [3, 4, 5], a = 3, b = 4, SS = 7, u = 36, x0 = 8, y0 = 18;\n      const cl = x => Math.max(0, Math.min(1, x)), E = x => { x = cl(x); return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2; }, seg = (t0, d) => E((e - t0) / d), lp = (p, q, k) => p + (q - p) * k;\n      const tri = (Rx, Ry, rot, k) => { const c = Math.cos(rot * Math.PI / 180), sn = Math.sin(rot * Math.PI / 180); return [[0, 0], [b, 0], [0, a]].map(([x, y]) => [Rx + (x * c - y * sn) * k, Ry + (x * sn + y * c) * k]); };\n      const ps = pts => pts.map(([x, y]) => r(x) + ',' + r(y)).join(' '), G = (x, y) => [x0 + x * u, y0 + y * u];\n      const A1 = [[0, 0, 0], [SS, 0, 90], [SS, SS, 180], [0, SS, 270]], A2 = [[a, 0, 0], [a, a, 90], [SS, a, 180], [0, SS, 270]];\n      const RA = [112, 200], kA = 26, outA = seg(11800, 500), mv = seg(12300, 1300), cm = seg(4600, 1000) - mv, others = Math.min(seg(5000, 600), 1 - outA), st = [0, 900, 1800, 0];\n      const tris = A1.map(([x1, y1, rot], i) => { const [x2, y2] = A2[i], k = i === 3 ? 0 : seg(6800 + st[i], 900), bx = x0 + lp(x1, x2, k) * u, by = y0 + lp(y1, y2, k) * u;\n        if (i === 3) return { pts: ps(tri(lp(RA[0], bx, cm), lp(RA[1], by, cm), 270, lp(kA, u, cm))), op: 1 };\n        return { pts: ps(tri(bx, by, rot, u)), op: others }; });\n      const R = [lp(RA[0], x0, cm), lp(RA[1], y0 + SS * u, cm)], m = 10;\n      const Pa = [RA[0] + a * kA, RA[1]], Pb = [RA[0], RA[1] - b * kA];\n      const sq = (p1, p2, g, op) => { const dx = p2[0] - p1[0], dy = p2[1] - p1[1]; let nx = -dy, ny = dx; const mx = (p1[0] + p2[0]) / 2 - op[0], my = (p1[1] + p2[1]) / 2 - op[1]; if (nx * mx + ny * my < 0) { nx = -nx; ny = -ny; } return [p1, p2, [p2[0] + nx * g, p2[1] + ny * g], [p1[0] + nx * g, p1[1] + ny * g]]; };\n      const gBack = seg(13300, 600), ga = seg(1800, 600), gb = seg(2300, 600), gc = e > 13000 ? gBack : seg(2800, 600), fsq = 1 - seg(4500, 500);\n      const cen = q => [(q[0][0] + q[2][0]) / 2, (q[0][1] + q[2][1]) / 2], mix = (P, Q, k) => P.map((p, i) => [lp(p[0], Q[i][0], k), lp(p[1], Q[i][1], k)]);\n      const qa = sq(RA, Pa, ga, Pb), qb = sq(RA, Pb, gb, Pa), qc = sq(Pa, Pb, gc, RA), fa = sq(RA, Pa, 1, Pb), fb = sq(RA, Pb, 1, Pa), ca = cen(fa), cb = cen(fb), cc = cen(sq(Pa, Pb, 1, RA));\n      const gR = [lp(x0, RA[0], mv), lp(y0 + SS * u, RA[1], mv)], gk = lp(u, kA, mv), L2 = (x, y) => [gR[0] + x * gk, gR[1] + y * gk], la0 = lp(-SS, 0, seg(12300, 1000)), lb0 = lp(a, -b, seg(12500, 1100));\n      const ha = [L2(0, la0), L2(a, la0), L2(a, la0 + a), L2(0, la0 + a)], hb = [L2(lb0, -b), L2(lb0 + b, -b), L2(lb0 + b, 0), L2(lb0, 0)];\n      const inB = cl((e - 5600) / 400) - outA, it = 'italic', ff = 'var(--font-sans)', fd = 'var(--font-display)';\n      const sab = seg(9800, 500), endFade = this.props.onDone || !this.props.variante ? cl((L - e) / 400) : 1, fade = Math.min(cl(e / 300), endFade);\n      const back = seg(12800, 500);\n      o.p2 = { op: fade, obg: seg(4800, 800) - outA, oab: sab, osq: fsq, osqc: Math.max(fsq, gBack), sqa: ps(qa), sqb: ps(qb), sqc: ps(qc), tris, ha: ps(ha), hb: ps(hb),\n        ra: 'M' + r(R[0] + m) + ' ' + r(R[1]) + 'V' + r(R[1] - m) + 'H' + r(R[0]),\n        ot1: Math.max(Math.min(cl((e - 300) / 400), 1 - seg(4500, 400)), back), ot1b: Math.max(seg(1800, 500) * (1 - seg(4500, 400)), back), ot2: seg(5200, 500) - seg(11800, 400),\n        sc: Math.min(seg(5600, 400), 1 - seg(6700, 300)), sab: sab - seg(11800, 400), ores: e > 9800 && e < 11800 ? sab : 0, rech: (pa * pa) + ' + ' + (pb * pb) + ' = ' + (pc * pc),\n        labels: [\n          { s: 'a', x: RA[0] + a * kA / 2, y: RA[1] + 14, op: Math.min(cl((e - 600) / 400), 1 - ga), fs: 17, fw: 600, st: it, ff },\n          { s: 'b', x: RA[0] - 14, y: RA[1] - b * kA / 2, op: Math.min(cl((e - 600) / 400), 1 - gb), fs: 17, fw: 600, st: it, ff },\n          { s: 'c', x: (Pa[0] + Pb[0]) / 2 + 12, y: (Pa[1] + Pb[1]) / 2 - 8, op: Math.min(cl((e - 600) / 400), 1 - seg(2800, 600)), fs: 17, fw: 600, st: it, ff },\n          { s: 'a²', x: ca[0], y: ca[1], op: Math.min(ga, fsq), fs: 26, fw: 700, st: 'normal', ff: fd },\n          { s: 'b²', x: cb[0], y: cb[1], op: Math.min(gb, fsq), fs: 30, fw: 700, st: 'normal', ff: fd },\n          { s: 'c²', x: cc[0], y: cc[1], op: Math.max(Math.min(seg(2800, 600), fsq), gBack), fs: 34, fw: 700, st: 'normal', ff: fd },\n          { s: 'c²', x: x0 + SS / 2 * u, y: y0 + SS / 2 * u, op: Math.min(seg(5400, 400), 1 - seg(6700, 300)), fs: 40, fw: 700, st: 'normal', ff: fd },\n          { s: 'a²', x: cen(ha)[0], y: cen(ha)[1], op: sab, fs: lp(30, 26, mv), fw: 700, st: 'normal', ff: fd },\n          { s: 'b²', x: cen(hb)[0], y: cen(hb)[1], op: sab, fs: lp(36, 30, mv), fw: 700, st: 'normal', ff: fd },\n          { s: 'b', x: 21, y: 198, op: inB, fs: 15, fw: 600, st: it, ff }, { s: 'a', x: 62, y: 259, op: inB, fs: 15, fw: 600, st: it, ff }, { s: 'c', x: 45, y: 212, op: inB, fs: 15, fw: 600, st: it, ff }\n        ].map(l => ({ ...l, x: r(l.x), y: r(l.y), fs: r(l.fs), op: r(Math.max(0, l.op) * 100) / 100 })) };\n    }\n    if (v === 'pz') {\n      const [pp, G] = [[25, 80], [50, 120], [10, 250]][S.i % 3], p = S.p, dz = n => String(Math.round(n * 100) / 100).replace('.', '.'), W = pp * G / 100, Y = [68, 148, 228];\n      const row = (l, rr, st, res) => ({ y: Y[st] - 24, l, r: rr, op: p >= st + 1 ? 1 : 0, ty: p >= st + 1 ? 0 : 8, c: res && p >= 3 ? 'var(--successText)' : 'var(--textPrimary)' });\n      const arc = (x, out, y1, y2, st) => ({ d: `M${x} ${y1 + 26}Q${out} ${(y1 + y2) / 2} ${x} ${y2 - 26}M${x - 6} ${y2 - 34}L${x} ${y2 - 26}L${x + 6} ${y2 - 34}`, op: p >= st ? 1 : 0 });\n      const lbl = (x, y, s, st) => ({ x, y, s, op: p >= st ? 1 : 0 });\n      o.pz = { op: p === 0 || p === 4 ? 0 : 1, otr: p === 0 ? 'none' : 'opacity .4s',\n        rows: [row('100 %', dz(G) + ' €', 0), row('1 %', dz(G / 100) + ' €', 1), row(pp + ' %', dz(W) + ' €', 2, true)],\n        arcs: [arc(80, 46, Y[0], Y[1], 2), arc(368, 402, Y[0], Y[1], 2), arc(80, 46, Y[1], Y[2], 3), arc(368, 402, Y[1], Y[2], 3)],\n        ops: [lbl(34, (Y[0] + Y[1]) / 2, ': 100', 2), lbl(414, (Y[0] + Y[1]) / 2, ': 100', 2), lbl(34, (Y[1] + Y[2]) / 2, '· ' + pp, 3), lbl(414, (Y[1] + Y[2]) / 2, '· ' + pp, 3)],\n        eq: `${pp}% of ${dz(G)} €`, res: '= ' + dz(W) + ' €', rop: p >= 3 ? 1 : 0 };\n    }\n    if (v === 'wa') {\n      const [a, b, c] = [[3, 2, 11], [2, 5, 13], [4, 3, 19]][S.i % 3], x = (c - b) / a, p = S.p, BX = 30, CR = 14, g = 6;\n      const lw = a * BX + (a - 1) * g + (p >= 2 ? 0 : b * (CR + g)), lx0 = 120 - lw / 2, left = [];\n      for (let k = 0; k < a; k++) left.push({ box: true, circ: false, x: r(lx0 + k * (BX + g)), y: 110 - BX, bg: p === 3 && k === 0 ? 'var(--success)' : 'var(--accent)' });\n      for (let k = 0; k < b; k++) { const gone = p >= 2; left.push({ box: false, circ: true, x: r(lx0 + a * (BX + g) + k * (CR + g)), y: 110 - CR, op: gone ? 0 : 1, tf: gone ? 'translateY(-18px)' : 'none' }); }\n      const n = p >= 2 ? c - b : c, rw = n * CR + (n - 1) * 4 + (p >= 3 ? (a - 1) * 12 : 0), rx0 = 328 - rw / 2, right = [];\n      for (let k = 0; k < c; k++) { const gone = p >= 2 && k >= c - b, gi = Math.floor(k / x); right.push({ x: r(rx0 + k * (CR + 4) + (p >= 3 ? gi * 12 : 0)), y: 110 - CR, op: gone ? 0 : 1, tf: gone ? 'translateY(-18px)' : 'none', bg: p === 3 && gi === 0 && !gone ? 'var(--success)' : 'var(--textSecondary)' }); }\n      o.wa = { op: p === 0 || p === 5 ? 0 : 1, otr: p === 0 ? 'none' : 'opacity .4s', left, right, tr: p === 0 ? 'none' : `left .9s ${fold}, opacity .5s, transform .5s, background .4s`,\n        eq: p < 2 ? `${a}x + ${b} = ${c}` : p < 3 ? `${a}x = ${c - b}` : `x = ${x}`, eqc: p >= 3 ? 'var(--successText)' : 'var(--textPrimary)',\n        note: p === 1 ? 'Both sides weigh the same.' : p === 2 ? `take ${b} off both sides` : p === 3 ? `${a} equal boxes, ${c - b} weights: divide by ${a}` : '', nop: p >= 1 && p <= 3 ? 1 : 0 };\n    }\n    if (v === 'ur') {\n      const [nb, nr] = [[3, 5], [2, 4], [4, 6]][S.i % 3], N = nb + nr, p = S.p, JAR = [[165, 190], [205, 200], [245, 195], [285, 190], [185, 150], [225, 160], [265, 150], [175, 110], [215, 115], [255, 108]];\n      const row0 = 224 - (N * 44 - 8) / 2, balls = [];\n      for (let k = 0; k < N; k++) { const blue = k < nb, [jx, jy] = JAR[k], ln = p >= 2; balls.push({ x: ln ? row0 + k * 44 + 18 : jx, y: ln ? 150 : jy, c: blue ? 'var(--pairIndigo)' : 'var(--error)', dim: p >= 3 && !blue ? 0.3 : 1 }); }\n      o.ur = { op: p === 0 || p === 4 ? 0 : 1, otr: p === 0 ? 'none' : 'opacity .4s', balls, tr: p === 0 ? 'none' : `left 1s ${fold}, top 1s ${fold}, opacity .5s`, jop: p < 2 ? 1 : 0, bop: p >= 3 ? 1 : 0, nb, N, res: `= ${nb}/${N}` };\n    }\n    if (v === 'st') {\n      const [h1, s1, s2] = [[1.8, 3, 10], [1.5, 2, 8], [2, 4, 12]][S.i % 3], H = h1 * s2 / s1, p = S.p, u = Math.min(30, 300 / s2, 180 / H), gx = 388, gy = 240, dz = n => String(Math.round(n * 100) / 100).replace('.', '.');\n      const tx = r(gx - s2 * u), px = r(gx - s1 * u), th = H * u, ph = h1 * u;\n      o.st = { op: p === 0 || p === 5 ? 0 : 1, otr: p === 0 ? 'none' : 'opacity .4s', gx, gy, px, hy: r(gy - ph + 7),\n        s2: `M${tx} ${gy}H${gx}`, s1: `M${px} ${gy}H${gx}`, ray: `M${tx} ${r(gy - th)}L${gx} ${gy}`, small: `M${px} ${gy}V${r(gy - ph)}L${gx} ${gy}Z`, tree: `M${tx} ${gy}V${r(gy - th)}`, body: `M${px} ${r(gy - ph + 14)}V${gy}`,\n        sc: p >= 3 ? Math.round(s2 / s1 * 1000) / 1000 : 1, str: p === 0 ? 'none' : `transform 1.4s ${fold}, opacity .4s`, sop: p >= 2 ? 1 : 0, top: p >= 4 ? 1 : 0.6, dash: p >= 4 ? 'none' : '7 6',\n        hlab: p >= 4 ? dz(H) + ' m' : '?', hc: p >= 4 ? 'var(--successText)' : 'var(--textSecondary)', tlx: tx - 10, tly: r(gy - th / 2), plx: px - 12, ply: r(gy - ph / 2), l1: dz(h1) + ' m', ls1: s1 + ' m', ls2: s2 + ' m', m1: r((px + gx) / 2), m2: r((tx + gx) / 2),\n        eq: `h : ${s2} = ${dz(h1)} : ${s1}`, res: 'h = ' + dz(H) + ' m', rop: p >= 4 ? 1 : 0 };\n    }\n    if (v === 'sp') {\n      const [d, e] = [[2, 1], [-1, 2], [3, -2]][S.i % 3], p = S.p, U = 32, X = x => 224 + U * x, Y = y => 144 - U * y;\n      let path = ''; for (let x = -2.1; x <= 2.1001; x += 0.1) path += (path ? 'L' : 'M') + r(X(x)) + ' ' + r(Y(x * x));\n      let ticks = ''; const tl = [];\n      for (const t of [-6, -4, -2, 2, 4, 6]) { ticks += `M${X(t)} 139V149`; tl.push({ x: X(t), y: 152, s: fmt(t) }); }\n      for (const t of [-4, -2, 2, 4]) { ticks += `M219 ${Y(t)}H229`; tl.push({ x: 210, y: Y(t) - 9, s: fmt(t) }); }\n      o.sp = { op: p === 0 || p === 4 ? 0 : 1, otr: p === 0 ? 'none' : 'opacity .4s', path, ticks, tl, tf: p >= 2 ? `translate(${d * U}px, ${-e * U}px)` : 'translate(0px, 0px)', str: p === 0 ? 'none' : `transform 1.3s ${fold}`, gop: p >= 2 ? 0.5 : 0,\n        vx: X(d), vy: Y(e), lx: X(d) + 12, ly: Y(e) + 6, vop: p >= 3 ? 1 : 0, vs: `S(${fmt(d)} | ${fmt(e)})`,\n        eq: `y = (x ${d < 0 ? '+' : '−'} ${Math.abs(d)})² ${e < 0 ? '−' : '+'} ${Math.abs(e)}`, hint: `${Math.abs(d)} to the ${d < 0 ? 'left' : 'right'}, ${Math.abs(e)} ${e < 0 ? 'down' : 'up'}`, hop: p >= 2 ? 1 : 0 };\n    }\n    if (v === 'si') {\n      const [A, B] = [[150, 30], [120, 60], [135, 45]][S.i % 3], p = S.p, cx = 224, cy = 160, R = 100, rad = a => a * Math.PI / 180;\n      const P = (a, rr) => [r(cx + rr * Math.cos(rad(a))), r(cy - rr * Math.sin(rad(a)))], [ax, ay] = P(A, R), [bx, by] = P(B, R), sv = Math.sin(rad(B)).toFixed(2).replace('.', '.').replace(/0$/, '');\n      const arc = a => { const [ex, ey] = P(a, 36); return `M${cx + 36} ${cy}A36 36 0 0 0 ${ex} ${ey}`; }, [lax, lay] = P(A / 2, 54), [lbx, lby] = P(B / 2, 54);\n      o.si = { op: p === 0 || p === 4 ? 0 : 1, otr: p === 0 ? 'none' : 'opacity .4s', arcA: arc(A), arcB: arc(B), ax, ay, bx, by, hA: `M${ax} ${cy}V${ay}`, hB: `M${bx} ${cy}V${by}`, mirror: `M${ax} ${ay}H${bx}`,\n        bop: p >= 2 ? 1 : 0, mop: p >= 3 ? 1 : 0, hAop: p >= 3 ? 1 : 0, qop: p < 3 ? 1 : 0, labA: A + '°', labB: B + '°', sv, lax, lay, lbx, lby, vbx: bx + 10, vby: r((cy + by) / 2), vax: ax - 10,\n        eq: `sin ${A}°`, res: `= sin ${B}° = ${sv}` };\n    }\n    if (v === 'bd') {\n      const want = [['K', 'K'], ['Z', 'Z'], ['K', 'Z']][S.i % 3], p = S.p, hi = p >= 2, L1 = [['K', 72], ['Z', 216]], L2 = [[40, 104], [184, 248]];\n      const edges = [], nodes = [{ x: 60, y: 144, s: 'Start', on: true }], ends = [];\n      const edge = (x1, y1, x2, y2, on) => { const mx = (x1 + x2) / 2, my = (y1 + y2) / 2; edges.push({ d: `M${x1} ${y1}L${x2} ${y2}`, c: hi && on ? 'var(--accent)' : 'var(--textSecondary)', w: hi && on ? 4 : 2, op: hi && !on ? 0.25 : 1, lx: mx, ly: my - 10, lc: hi && on ? 'var(--accentText)' : 'var(--textSecondary)' }); };\n      L1.forEach(([s1, y1], i) => { const on1 = s1 === want[0]; edge(60, 144, 200, y1, on1); nodes.push({ x: 200, y: y1, s: s1, on: on1 });\n        ['K', 'Z'].forEach((s2, j) => { const y2 = L2[i][j], on2 = on1 && s2 === want[1]; edge(200, y1, 360, y2, on2); nodes.push({ x: 360, y: y2, s: s2, on: on2 }); ends.push({ x: 392, y: y2, s: s1 + s2 + (on2 ? '  ½ · ½ = ¼' : ''), c: on2 && hi ? 'var(--accentText)' : 'var(--textTertiary)', op: hi && !on2 ? 0.3 : 1 }); }); });\n      o.bd = { op: p === 0 || p === 4 ? 0 : 1, otr: p === 0 ? 'none' : 'opacity .4s', edges, ends,\n        nodes: nodes.map(n => ({ ...n, bg: hi && n.on ? 'var(--accentTint)' : 'var(--surface)', bc: hi && n.on ? 'var(--accent)' : 'var(--textSecondary)', op: hi && !n.on ? 0.3 : 1 })),\n        eq: `P(${want.join(', ')})`, res: '= ½ · ½ = ¼', rop: p >= 3 ? 1 : 0 };\n    }\n    return o;\n  }\n}\n</script>\n</body>\n</html>\n"}