/* Scenery is vector-based, lightweight, and adapts to the existing theme. */
html #root:before{content:"";position:fixed;inset:35% 0 0 35%;z-index:-1;background:url('./assets/mountains-v18.svg') right bottom/cover no-repeat;opacity:.15;pointer-events:none}
html #root>.bg-bg{background:rgb(var(--bg)/.93)}
html #root main .ap2-dashboard section.bg-navy{position:relative;isolation:isolate;padding-bottom:62px;background:rgb(var(--surface2));}
html .ap2-dashboard section.bg-navy:before{content:"";position:absolute;inset:0;z-index:-2;background:url('./assets/mountains-v18.svg') right center/cover no-repeat;pointer-events:none}
html .ap2-dashboard section.bg-navy:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(var(--surface)/.95) 0%,rgb(var(--surface)/.82) 47%,rgb(var(--surface)/.05) 100%);pointer-events:none}
html #root main .ap2-dashboard section.bg-navy>.grid-bg{opacity:1;background:radial-gradient(ellipse at 65% 30%,#fff8 0%,transparent 38%);width:120%;animation:ap2-clouds 18s ease-in-out infinite alternate;z-index:-1}
html #root main .ap2-dashboard section.bg-navy>svg{visibility:hidden}
html.dark .ap2-dashboard section.bg-navy:before{filter:brightness(.54) saturate(.7) hue-rotate(8deg)}
html.dark #root main .ap2-dashboard section.bg-navy>.grid-bg{opacity:.14}
@keyframes ap2-clouds{from{transform:translateX(-8%)}to{transform:translateX(4%)}}
html[data-scenery-paused=true] #root main .ap2-dashboard section.bg-navy>.grid-bg{animation-play-state:paused}
html .ap2-scenery-toggle{position:absolute;right:18px;bottom:16px;font-size:11px;padding:7px 11px;border-radius:999px;background:rgb(var(--surface)/.85);border:1px solid rgb(var(--line));color:rgb(var(--muted));backdrop-filter:blur(6px)}
/* Distinct colors for learning areas, including navigation and dashboard cards. */
html #root [data-testid=nav-dashboard] svg{color:#7662d8}html #root [data-testid=nav-lernmodule] svg{color:#168c8b}html #root [data-testid=nav-pruefung] svg{color:#bc6d29}html #root [data-testid=nav-fragen] svg{color:#cf6385}html #root [data-testid=nav-karten] svg{color:#8a68c9}html #root [data-testid=nav-rechner] svg{color:#338ac0}html #root [data-testid=nav-glossar] svg{color:#299473}html #root [data-testid=nav-fortschritt] svg{color:#c07a31}
html .ap2-dashboard button.group>span{width:48px;height:48px;border-radius:15px;box-shadow:0 3px 10px rgb(25 45 75 / .06)}
html .ap2-dashboard button.group:nth-child(6n+1)>span{background:#e0f3f6;color:#087880}html .ap2-dashboard button.group:nth-child(6n+2)>span{background:#eee6fa;color:#7650af}html .ap2-dashboard button.group:nth-child(6n+3)>span{background:#e4edff;color:#4069b6}html .ap2-dashboard button.group:nth-child(6n+4)>span{background:#ffecdc;color:#a76024}html .ap2-dashboard button.group:nth-child(6n+5)>span{background:#fbe5ed;color:#b14770}html .ap2-dashboard button.group:nth-child(6n+6)>span{background:#e5f3e5;color:#397940}
html.dark .ap2-dashboard button.group>span{filter:brightness(.85)}
html .ap2-dashboard [aria-label="Dein Fortschritt"] .grid>.bg-surface:nth-child(3n+1) svg{color:#168c8b}html .ap2-dashboard [aria-label="Dein Fortschritt"] .grid>.bg-surface:nth-child(3n+2) svg{color:#9271cb}html .ap2-dashboard [aria-label="Dein Fortschritt"] .grid>.bg-surface:nth-child(3n+3) svg{color:#c47d36}
html .ap2-tutor{margin:18px 0 22px;border:1px solid rgb(var(--accent)/.25);background:rgb(var(--surface));border-radius:18px;box-shadow:var(--friendly-shadow);scroll-margin-top:145px}
html .ap2-tutor summary{display:flex;align-items:center;gap:12px;cursor:pointer;padding:17px;list-style:none;color:rgb(var(--ink));border-radius:18px}
html .ap2-tutor summary::-webkit-details-marker{display:none}html .ap2-tutor summary:focus-visible{outline:3px solid rgb(var(--accent));outline-offset:3px}
html .ap2-tutor-symbol{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:13px;background:linear-gradient(135deg,#e6e1ff,#ddf6f1);color:#6351a8;font-size:25px}
html .ap2-tutor small{display:block;font-size:12px;color:rgb(var(--muted));margin-top:2px}html .ap2-tutor-tag{margin-left:auto;padding:4px 9px;border-radius:999px;background:rgb(var(--accent)/.08);color:rgb(var(--accent));font-size:11px}
html .ap2-tutor-inner{padding:0 18px 18px}html .ap2-tutor-intro{font-size:13px;color:rgb(var(--muted));margin-bottom:12px}
html .ap2-tutor-examples{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 16px}html .ap2-tutor-examples button{border:1px solid rgb(var(--line));border-radius:999px;padding:7px 11px;font-size:12px;color:rgb(var(--accent));background:rgb(var(--surface2)/.6)}
html .ap2-tutor textarea{width:100%;padding:12px;border:1px solid rgb(var(--line));background:rgb(var(--bg));color:rgb(var(--ink));font-size:15px;resize:vertical;min-height:90px;margin-top:7px}
html .ap2-tutor form>label{font-size:13px;font-weight:650}html .ap2-tutor-options{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;color:rgb(var(--muted));font-size:12px;margin:8px 0 12px}html .ap2-tutor-options label{display:flex;align-items:center;gap:7px}html .ap2-tutor-options input{accent-color:rgb(var(--accent));width:16px;height:16px}
html .ap2-tutor-actions{display:flex;flex-wrap:wrap;gap:8px}html .ap2-tutor-actions button{padding:9px 14px;border:1px solid rgb(var(--line));border-radius:11px;color:rgb(var(--ink));background:rgb(var(--surface));min-height:42px;font-size:13px;font-weight:600}html .ap2-tutor-actions .ap2-tutor-send{background:rgb(var(--accent));color:rgb(var(--accent-ink));border-color:rgb(var(--accent))}html .ap2-tutor-actions button:disabled{opacity:.55;cursor:wait}
html .ap2-tutor-status{font-size:13px;color:rgb(var(--accent));margin-top:10px;min-height:20px}html .ap2-tutor-footnote{font-size:11px;line-height:1.6;color:rgb(var(--muted));margin-top:8px}
html .ap2-tutor-messages{max-height:520px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}html .ap2-tutor-message{padding:14px;border:1px solid rgb(var(--line));border-radius:13px;margin-bottom:12px;font-size:14px;line-height:1.7;overflow-wrap:anywhere}html .ap2-tutor-message strong{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px;color:rgb(var(--muted))}html .ap2-tutor-message>div:first-of-type{white-space:pre-wrap}html .ap2-tutor-message.user{background:rgb(var(--accent)/.06);margin-left:24px}html .ap2-tutor-message[data-failed=true]{border-style:dashed}html .ap2-tutor-sources{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}html .ap2-tutor-sources a{color:rgb(var(--accent));text-decoration:underline;font-size:12px}
html .ap2-gv7-body .ap2-gv7-topic{display:inline-block;padding:8px 0;line-height:1.6}
@media(max-width:700px){html .ap2-tutor summary{padding:13px;gap:8px}html .ap2-tutor-tag{display:none}html .ap2-tutor-inner{padding:0 13px 13px}html .ap2-tutor-options>span{display:none}html .ap2-tutor-message.user{margin-left:10px}html .ap2-dashboard section.bg-navy:after{background:linear-gradient(90deg,rgb(var(--surface)/.95),rgb(var(--surface)/.66))}html .ap2-dashboard section.bg-navy:before{background-position:70% center}}
@media(prefers-reduced-motion:reduce){html #root main .ap2-dashboard section.bg-navy>.grid-bg{animation:none}}
