/* Zylo learning room: decorative art and glass menus; no changes to learning logic. */
.zylo-subject-art { display:inline-block; width:140px; height:140px; flex:none; vertical-align:middle; }
.zylo-subject-sprite { display:block; width:100%; height:100%; background-image:url('../images/zylo-subject-atlas.png'); background-size:300% 300%; background-repeat:no-repeat; background-position:var(--sprite-x,0%) var(--sprite-y,0%); }
.zylo-art-matematik { --sprite-x:0%; --sprite-y:0%; }
.zylo-art-dansk { --sprite-x:50%; --sprite-y:0%; }
.zylo-art-engelsk { --sprite-x:100%; --sprite-y:0%; }
.zylo-art-biologi { --sprite-x:0%; --sprite-y:50%; }
.zylo-art-fysik { --sprite-x:50%; --sprite-y:50%; }
.zylo-art-historie { --sprite-x:100%; --sprite-y:50%; }
.zylo-art-geografi { --sprite-x:0%; --sprite-y:100%; }
.zylo-art-samfundsfag { --sprite-x:50%; --sprite-y:100%; }
.zylo-art-tysk { --sprite-x:100%; --sprite-y:100%; }
.zylo-subject-art.is-fallback { display:inline-grid; place-items:center; color:#c7e3fa; }
.zylo-subject-art.is-fallback svg { width:48px; height:48px; }
body.is-student {
  --zylo-glass:linear-gradient(140deg,#243a58ed,#15243cee 56%,#273152eb);
  --zylo-edge:linear-gradient(135deg,#65bfd3a6,#6172a65e 55%,#a18ae4b0);
  --zylo-shadow:inset 0 1px 0 #ffffff0d,0 9px 26px #050c1b4d;
}
body.is-student main {
  background:radial-gradient(ellipse at 85% 0%,#283c6a42,transparent 45%),radial-gradient(ellipse at 3% 52%,#25415b2e,transparent 50%);
}
body.is-student .site-header { background:#142138; border-bottom-color:#57719557; }
body.is-student :is(.student-subject-banner,.focus-panel.panel,.simple-disclosure,.science-hero,.science-topic,.student-profile-hero,.student-profile-subject,.student-profile-note,.student-upcoming,.student-empty,.science-note,.training-session-score,.training-goal,.timeline-setup,.progress-hero),
body.is-student .simple-home .student-subject-card,
body.is-student .student-subject-page .simple-disclosure,
body.is-student .science-shell .simple-disclosure {
  color:#f4f8ff; border:1px solid transparent; background:var(--zylo-glass) padding-box,var(--zylo-edge) border-box;
  box-shadow:var(--zylo-shadow); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
/* Main subject grid: generous artwork, compact copy, unchanged destinations. */
body.is-student .simple-home .student-subject-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
body.is-student .simple-home .student-subject-card {
  grid-template-columns:128px minmax(0,1fr); grid-template-rows:1fr auto;
  gap:14px 12px; padding:18px; min-height:234px; border-radius:23px;
  background:radial-gradient(ellipse at 10% 25%,#5cbfd516,transparent 60%),var(--zylo-glass) padding-box,var(--zylo-edge) border-box;
  transition:transform .2s ease,box-shadow .2s ease;
}
body.is-student .simple-home .simple-subject-icon {
  width:128px; height:128px; background:none; box-shadow:none; transform:none; border-radius:0;
}
body.is-student .simple-home .simple-subject-icon .zylo-subject-art { width:136px; height:136px; }
body.is-student .simple-home .student-subject-card h2 { font-size:1.35rem; line-height:1.25; margin-bottom:9px; }
body.is-student .simple-home .student-subject-card p { font-size:.86rem; color:#c2d3ec; line-height:1.55; }
body.is-student .student-subject-actions { gap:15px; }
body.is-student .simple-home .student-subject-card .student-subject-link { border-radius:14px; min-height:48px; padding:11px 16px; }
body.is-student .student-subject-explore { color:#e1ebff; font-size:.83rem; }
body.is-student .student-welcome { position:relative; gap:24px; }
body.is-student .student-welcome>div { min-width:0; flex:1; }
body.is-student .student-welcome h1 { font-size:clamp(30px,3.6vw,44px); overflow-wrap:anywhere; }
body.is-student .student-grade-link { flex:none; z-index:1; border-color:#7998be70; background:linear-gradient(140deg,#233653,#1a293f); border-radius:15px; }
/* Lightweight CSS orbit: decorative, does not intercept clicks or increase page width. */
.zylo-orbit { position:relative; display:block; flex:0 0 180px; width:180px; height:115px; pointer-events:none; }
.zylo-orbit-ring { position:absolute; width:166px; height:65px; top:34px; left:5px; border:13px solid #183467; border-top-color:#2d4f9b; border-bottom-color:#0d1b3e; border-radius:50%; transform:rotate(-24deg); box-shadow:inset 0 3px 5px #b0bbf39c,0 -2px 4px #7d89f59c,0 8px 18px #050b255e; }
.zylo-orbit-ball { position:absolute; display:block; border-radius:50%; box-shadow:inset -6px -8px 12px #0000003d,0 5px 10px #08132166; }
.zylo-orbit .ball-lime { width:46px; height:46px; top:7px; left:22px; background:radial-gradient(circle at 30% 22%,#f6ffc9,#b9ef42 50%,#63852a); }
.zylo-orbit .ball-blue { width:51px; height:51px; top:58px; left:75px; background:radial-gradient(circle at 30% 22%,#b0f3ff,#068df0 45%,#2142a4); }
.zylo-orbit .ball-purple { width:26px; height:26px; top:58px; right:0; background:radial-gradient(circle at 30% 22%,#edbdff,#9450e7 50%,#472272); }
/* Subject and chapter headers reuse the same artwork at every depth. */
body.is-student :is(.student-subject-banner,.science-hero) { overflow:hidden; min-height:175px; }
body.is-student :is(.student-subject-banner-copy,.science-hero>div) { min-width:0; }
body.is-student .student-banner-art { width:150px; height:150px; flex:none; background:none; box-shadow:none; transform:none; }
body.is-student .student-banner-art>span { position:static; transform:none; }
body.is-student .student-banner-art .zylo-subject-art { width:155px; height:155px; }
body.is-student .science-emblem { display:block; font-size:0; line-height:0; flex:none; }
body.is-student .science-emblem .zylo-subject-art { width:150px; height:150px; }
body.is-student :is(.focus-panel,.science-topic,.student-category-card) h2,
body.is-student .student-category-card h3 { color:#f4f8ff; }
body.is-student :is(.focus-panel,.science-topic)>p,
body.is-student .focus-panel p { color:#bfd0e8; }
body.is-student .student-category-card { border:1px solid transparent; background:var(--zylo-glass) padding-box,var(--zylo-edge) border-box; box-shadow:var(--zylo-shadow); border-radius:22px; }
body.is-student .student-practice-panel { background:#12223980; border-top-color:#7896bd40; }
body.is-student .student-category-symbol { background:linear-gradient(140deg,#3a557a,#273852); box-shadow:inset 0 1px 0 #bdd5fa45,0 3px 7px #08111f55; border:1px solid #8ca7ce55; }
body.is-student .science-topic { padding:24px; }
body.is-student :is(.science-topic,.simple-disclosure) summary { cursor:pointer; }
body.is-student .science-topic details { margin-bottom:18px; font-size:.88rem; color:#cbdbef; }
body.is-student .science-topic .science-stats { color:#bdcee7; }
body.is-student :is(.focus-panel,.science-grade,.science-topic,.student-practice-panel,.timeline-setup) .button-primary,
body.is-student .student-practice-panel .student-subject-link,
body.is-student .timeline-setup .timeline-primary { color:#16272c; background:#d9f56f; box-shadow:0 4px 0 #819c43; border-radius:13px; }
body.is-student :is(.focus-panel,.science-grade,.science-topic,.student-practice-panel,.timeline-setup) .button-primary:hover,
body.is-student .student-practice-panel .student-subject-link:hover,
body.is-student .timeline-setup .timeline-primary:hover { background:#e6ffa0; }
body.is-student :is(.focus-panel,.science-grade) .button-secondary { color:#e8f4ff; background:#223c56; border:1px solid #7198ba80; }
body.is-student :is(.science-grade,.student-practice-fields,.timeline-setup) select {
  color-scheme:dark; background:#13243c; color:#f4f8ff; border:1px solid #7996bb7a;
}
body.is-student .science-grade small { color:#bed0e9; }
/* Profile: glass around real statistics, with consistent miniature subject art. */
body.is-student .student-profile-subject-icon { width:80px; height:80px; border-radius:0; background:none; }
body.is-student .student-profile-subject-icon .zylo-subject-art { width:80px; height:80px; }
body.is-student .student-profile-subject-heading { gap:12px; }
body.is-student .student-profile-subject-heading>div { min-width:0; }
body.is-student .student-profile-avatar { background:linear-gradient(140deg,#526889,#2b3b5c); border:1px solid #a1b8df75; box-shadow:inset 0 2px 0 #ffffff33,0 5px 14px #060d2255; color:#f4f8ff; }
body.is-student .student-profile-footnote { border-top-color:#91acd34d; }
/* Progress charts and benchmark questions deliberately remain on pale reading panels. */
.zylo-progress-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.zylo-progress-hero>div { min-width:0; }
.zylo-progress-hero .zylo-subject-art { width:115px; height:115px; }
body.is-student .progress-shell .progress-hero { background:var(--zylo-glass) padding-box,var(--zylo-edge) border-box; }
body.is-student .progress-shell .progress-advanced { background:var(--zylo-glass) padding-box,var(--zylo-edge) border-box; color:#f4f8ff; }
body.is-student .progress-shell .progress-advanced .progress-filters>label,
body.is-student .progress-shell .progress-advanced .helper { color:#c4d5ed; }
body.is-student .progress-shell #progress-details .panel { padding:22px; border:1px solid #dfe6f1; box-shadow:none; }
/* Game setup and training sidebars match the menus. */
body.is-student .timeline-page .timeline-setup { background:var(--zylo-glass) padding-box,var(--zylo-edge) border-box; color:#f4f8ff; border:1px solid transparent; }
body.is-student .timeline-setup :is(h2,label) { color:#f4f8ff; }
body.is-student .timeline-setup :is(.timeline-setup-tip,.timeline-timer-note,.timeline-setup-heading p) { color:#c1d3ea; }
body.is-student .timeline-setup .eyebrow { color:#d9f56f; }
body.is-student .timeline-setup .timeline-stat { color:#f4f8ff; background:#14243b; border-color:#6b87ad55; }
body.is-student .timeline-setup .timeline-stat span { color:#c7d7ed; }
body.is-student .timeline-setup .timeline-stat strong { color:#d9f56f; }
body.is-student .timeline-setup .timeline-rules>div { background:#11223b; border-color:#809bc94d; }
body.is-student .timeline-setup .timeline-rules strong { color:#d9f56f; }
body.is-student .timeline-setup .timeline-rules span { color:#c2d2e9; }
body.is-student .timeline-setup .timeline-setup-tip { border-top-color:#7590b34d; }
body.is-student .timeline-visual { display:grid; place-items:center; width:220px; height:220px; }
body.is-student .timeline-visual .zylo-subject-art { width:220px; height:220px; }
body.is-student .training-heading-copy { flex:1; min-width:0; }
.training-subject-art .zylo-subject-art { width:90px; height:90px; }
body.is-student .training-session-score { border-radius:22px; }
body.is-student .training-session-score strong { color:#d9f56f; }
body.is-student .training-goal.goal-complete { background:linear-gradient(135deg,#274f43,#20394a); border-color:#73c69c; }
body.is-student :is(.student-subject-card,.student-category-card,.science-topic,.focus-panel,.timeline-setup) :focus-visible { outline:3px solid #d9f56f; outline-offset:4px; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  body.is-student .simple-home .student-subject-card:hover { transform:translateY(-4px); border-color:#90b0e9; box-shadow:inset 0 1px 0 #ffffff20,0 12px 28px #040b205e; }
  body.is-student .simple-home .student-subject-card:hover .simple-subject-icon { transform:translateY(-3px); }
}
@media(hover:none) {
  body.is-student .simple-home .student-subject-card:hover,
  body.is-student .simple-home .student-subject-card:hover .simple-subject-icon { transform:none; }
}
@media(max-width:1100px) {
  body.is-student .simple-home .student-subject-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .zylo-orbit { flex-basis:140px; transform:scale(.8); transform-origin:center; }
}
@media(max-width:780px) {
  body.is-student .student-welcome .zylo-orbit { display:none; }
  body.is-student .simple-home .student-subject-card { grid-template-columns:108px minmax(0,1fr); padding:18px; }
  body.is-student .simple-home .simple-subject-icon,
  body.is-student .simple-home .simple-subject-icon .zylo-subject-art { width:108px; height:108px; }
  body.is-student .student-subject-banner { gap:14px; }
  body.is-student .student-banner-art,
  body.is-student .student-banner-art .zylo-subject-art,
  body.is-student .science-emblem .zylo-subject-art { width:105px; height:105px; }
  .training-subject-art { display:none; }
}
@media(max-width:600px) {
  body.is-student .simple-home .student-subject-grid { grid-template-columns:minmax(0,1fr); gap:18px; }
  body.is-student .simple-home .student-subject-card { min-height:204px; grid-template-columns:110px minmax(0,1fr); gap:14px 12px; }
  body.is-student .simple-home .simple-subject-icon,
  body.is-student .simple-home .simple-subject-icon .zylo-subject-art { width:110px; height:110px; }
  body.is-student .simple-home .student-subject-card h2 { font-size:1.3rem; }
  body.is-student .simple-home .student-subject-card p { font-size:.84rem; }
  body.is-student .student-welcome { align-items:flex-start; }
  body.is-student .student-welcome h1 { font-size:30px; }
  body.is-student .student-grade-link { font-size:12px; padding:10px; }
  body.is-student :is(.student-banner-art,.science-emblem) { display:none; }
  .zylo-progress-hero { gap:14px; }
  .zylo-progress-hero .zylo-subject-art { width:76px; height:76px; }
  body.is-student .student-profile-subject-heading { gap:8px; }
  body.is-student .student-profile-subject-icon,
  body.is-student .student-profile-subject-icon .zylo-subject-art { width:65px; height:65px; }
  body.is-student .timeline-visual { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  body.is-student .simple-home .student-subject-card,
  body.is-student .simple-home .simple-subject-icon { transition:none; transform:none; }
}
/* Exercise surfaces share the portal's glass theme, including answer states. */
body.is-student .training-shell .question-card {
  --training-ink:#f4f8ff;
  --training-muted:#bfd0e8;
  color:#f4f8ff;
  border:1px solid transparent;
  background:var(--zylo-glass) padding-box,var(--zylo-edge) border-box;
  box-shadow:var(--zylo-shadow),0 16px 40px #030b1c38;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  color-scheme:dark;
}
body.is-student .training-shell .question-card :is(.helper,.attempt-label,.question-count,.training-pause,.loading-state) { color:#bfd0e8; }
body.is-student .training-shell .question-card .loading-state small { color:#bfd0e8; }
body.is-student .training-shell .question-card .question-kicker span { color:#e1d9ff; background:#51457a66; border:1px solid #ab99eb45; }
body.is-student .training-shell .question-card .question-kicker .question-count { border:none; background:none; color:#bfd0e8; }
body.is-student .training-shell .question-card .spelling-gap { color:#d9f56f; border-bottom-color:#b6c6ef; }
body.is-student .training-shell .answer-input {
  color:#f4f8ff; background:#11213a; border-color:#7389aa; caret-color:#d9f56f;
}
body.is-student .training-shell .answer-input::placeholder { color:#b7c5dc; opacity:1; }
body.is-student .training-shell .answer-input:focus { border-color:#d9f56f; outline-color:#d9f56f; box-shadow:0 0 0 4px #d9f56f20; }
body.is-student .training-shell .answer-input:disabled { color:#c7d7eb; -webkit-text-fill-color:#c7d7eb; background:#203149; opacity:1; }
body.is-student .training-shell .answer-input:-webkit-autofill { -webkit-text-fill-color:#f4f8ff; -webkit-box-shadow:0 0 0 1000px #11213a inset; }
body.is-student .training-shell .question-card .answer-symbols span { color:#bfd0e8; }
body.is-student .training-shell .question-card .answer-symbols button { background:#213c57; color:#f4f8ff; border-color:#7393b5; }
body.is-student .training-shell .choice { background:#13243c; color:#f4f8ff; border-color:#6682a8; }
body.is-student .training-shell .choice:hover { border-color:#b1c8ed; }
body.is-student .training-shell .choice-letter { background:#304767; color:#e8f2ff; }
body.is-student .training-shell .choice:has(input:checked) { background:#28473e; color:#f4f8ff; border-color:#d9f56f; }
body.is-student .training-shell .choice:has(input:checked) .choice-letter { background:#d9f56f; color:#16272c; }
body.is-student .training-shell .choice:has(input:focus-visible) { outline:3px solid #d9f56f; outline-offset:3px; }
body.is-student .training-shell .question-card .button-primary { background:#d9f56f; color:#16272c; box-shadow:0 4px 0 #819c43; }
body.is-student .training-shell .question-card .button-primary:hover { background:#e6ffa0; }
body.is-student .training-shell .question-card .button-secondary { background:#213c57; color:#f4f8ff; border:1px solid #7393b5; }
body.is-student .training-shell .question-card :is(button,a):focus-visible { outline:3px solid #d9f56f; outline-offset:4px; }
body.is-student .training-shell .speech-box { background:linear-gradient(135deg,#263d5bd9,#353356b3); border-color:#8b9fd366; box-shadow:inset 0 1px 0 #ffffff0d; }
body.is-student .training-shell .speech-button { background:#7054c6; color:#fff; border:1px solid #b39af07a; }
body.is-student .training-shell .speech-button:hover { background:#6145b4; }
body.is-student .training-shell .speech-button.is-speaking { background:#483681; }
body.is-student .training-shell :is(.speech-action>span,.speech-box small) { color:#d1def0; }
body.is-student .training-shell .feedback { color:#f4f8ff; }
body.is-student .training-shell .feedback-correct { background:#173d35; border-color:#68bda0; }
body.is-student .training-shell .feedback-wrong { background:#44371f; border-color:#d2aa58; }
body.is-student .training-shell .feedback-final { background:#34324e; border-color:#aa98d6; }
body.is-student .training-shell .feedback-correct .feedback-symbol { color:#b9f2d4; background:#285747; }
body.is-student .training-shell .feedback-wrong .feedback-symbol { color:#ffe0a0; background:#65512d; }
body.is-student .training-shell .feedback-final .feedback-symbol { color:#ece0ff; background:#51446e; }
body.is-student .training-shell .feedback .feedback-eyebrow { color:#c1edd7; }
body.is-student .training-shell .feedback-wrong :is(.feedback-eyebrow,small) { color:#ffe1a7; }
body.is-student .training-shell .feedback-final .feedback-eyebrow { color:#dfd3f8; }
body.is-student .training-shell :is(.feedback-reward,.streak-bonus) { color:#d9f56f; }
body.is-student .training-shell .solution { border-color:#8bbfaa66; }
body.is-student .training-shell .feedback-final .solution { border-color:#aa98d666; }
body.is-student .training-shell .solution :is(span,p),
body.is-student .training-shell .feedback-final .solution :is(span,p) { color:#d4e1ef; }
body.is-student .training-shell .question-card .notice-error { background:#4b2939; color:#ffe4ec; border:1px solid #cf849b; }
body.is-student .training-shell .question-card .notice-info { background:#243e57; color:#e4f2ff; border:1px solid #84acd0; }
body.is-student .training-shell .question-card .training-load-error { color:#f4f8ff; background:transparent; }
body.is-student .training-shell .question-card .training-empty-icon { background:#393557; color:#dfd3f8; }
body.is-student .training-shell .question-card .spinner { border-color:#8396b44d; border-top-color:#d9f56f; }
/* Language tasks: the sentence, punctuation buttons and selected word stay legible. */
body.is-student .training-shell .comma-style { background:#433c63; color:#eadfff; }
body.is-student .training-shell .comma-field legend { color:#d4e1ef; }
body.is-student .training-shell .comma-sentence { background:#14263f; border-color:#7189ad; }
body.is-student .training-shell .comma-gap { background:#243c59; color:#e0d8ff; border-color:#a599cf; }
body.is-student .training-shell .comma-gap[aria-pressed=true] { background:#d9f56f; color:#16272c; border-color:#d9f56f; }
body.is-student .training-shell .comma-gap.comma-missing { background:#654a20; color:#ffe5ae; border-color:#e9bc66; }
body.is-student .training-shell .comma-gap.comma-extra { background:#622f46; color:#ffd5e4; border-color:#ef9aba; }
body.is-student .training-shell .comma-token small { background:#14263f; color:#ffd5e4; }
body.is-student .training-shell .comma-reading { color:#d4e1ef; border-left-color:#b8a6ee; }
body.is-student .training-shell .wordclass-sentence { background:#163a39; border-color:#6faaa2; }
body.is-student .training-shell .wordclass-sentence mark { background:#d9f56f; color:#16272c; }
body.is-student .training-shell .solution-comma { background:#554775; color:#eee3ff; }
/* Diagrams retain their light plotting surface: their dark labels and lines are intentional. */
body.is-student .training-shell .figure-wrap { background:#f8faff; color:#202a42; border-color:#8297bb; color-scheme:light; }