@import url("/public/assets/design-system.css");
@import url("/public/assets/components.css");
:root{
  --bg:var(--lz-bg);--card:var(--lz-surface);--text:var(--lz-text);--muted:var(--lz-muted);--line:var(--lz-line);--accent:var(--lz-primary);--danger:var(--lz-danger);--success:var(--lz-success);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
}
a{color:var(--accent)}
.container{max-width:1120px;margin:0 auto;padding:28px 18px}
.topbar{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  padding:14px 20px;
  border-bottom:1px solid var(--line);
  background:#fff;
}
.hero{margin-bottom:18px}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:18px;
}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px;
  box-shadow:0 3px 14px rgba(0,0,0,.04);
}
.card.narrow{
  max-width:460px;
  margin:8vh auto;
}
h1,h2{line-height:1.2}
h1{margin-top:0}
h2{font-size:1.08rem}
.muted{color:var(--muted)}
label{display:block;margin:14px 0;font-weight:600}
input{
  width:100%;
  margin-top:6px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:9px;
  font:inherit;
}
button,.button{
  display:inline-block;
  border:0;
  border-radius:9px;
  background:var(--accent);
  color:white;
  padding:11px 16px;
  text-decoration:none;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.button.secondary{background:#4b5563}
.alert{
  padding:10px 12px;
  border-radius:9px;
  margin:12px 0;
}
.alert.error{background:#fff0f0;color:var(--danger)}
.alert.success{background:#edf9f0;color:var(--success)}
.badge{
  display:inline-block;
  padding:2px 7px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:.78rem;
  color:var(--muted);
}
.stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 16px;
}
.stats dt{color:var(--muted)}
.stats dd{margin:0;font-weight:650}
table{width:100%;border-collapse:collapse}
th,td{
  padding:9px 6px;
  text-align:left;
  border-bottom:1px solid var(--line);
}
@media(max-width:600px){
  .topbar{align-items:flex-start;flex-direction:column}
  .card.narrow{margin:20px 12px}
}

.installer{max-width:820px;margin:36px auto;padding:0 18px}
.installer-head{text-align:center;margin-bottom:18px}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:0 0 18px}
.step{font-size:.8rem;color:var(--muted);text-align:center;padding:8px 4px}
.step span{display:flex;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);align-items:center;justify-content:center;margin:0 auto 5px;background:#fff}
.step.active{font-weight:700;color:var(--text)}
.step.active span{background:var(--accent);color:#fff;border-color:var(--accent)}
.step.done span{border-color:var(--accent);color:var(--accent)}
.actions{margin-top:18px}
@media(max-width:650px){
 .steps{grid-template-columns:1fr}
 .step{display:none}
 .step.active{display:block}
}

select{
  width:100%;
  margin-top:6px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:9px;
  font:inherit;
  background:#fff;
}
.alert.warn{background:#fff8df;color:#6e5510}
.child-shell{
  max-width:780px;
  margin:0 auto;
  padding:40px 18px;
}
.child-welcome{
  text-align:center;
}
.child-welcome h1{
  font-size:clamp(2rem,6vw,4rem);
  margin-bottom:10px;
}
.child-welcome h2{
  font-size:clamp(1.2rem,4vw,2rem);
  margin-bottom:28px;
}
.eyebrow{
  color:var(--muted);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.mood-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.mood-button{
  min-height:130px;
  background:#fff;
  color:var(--text);
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:1.05rem;
}
.mood-button:hover{
  border-color:var(--accent);
}
.stars{
  font-size:1.5rem;
  letter-spacing:.08em;
}
.big-copy{font-size:1.35rem}
@media(max-width:600px){
  .mood-grid{grid-template-columns:1fr}
}

.lesson-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:28px}
.lesson-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;text-align:left}
.lesson-card h2{margin-top:4px}
.exercise-shell{max-width:720px;margin:0 auto;padding:30px 18px}
.exercise-top{display:flex;justify-content:space-between;gap:15px;color:var(--muted);margin-bottom:10px}
.progress-track{height:10px;background:#e9ebef;border-radius:999px;overflow:hidden;margin-bottom:24px}
.progress-fill{height:100%;background:currentColor;border-radius:999px}
.exercise-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(22px,5vw,48px);text-align:center}
.math-question{font-size:clamp(3rem,12vw,6rem);margin:30px 0}
.answer-form{max-width:360px;margin:0 auto}
.answer-input{font-size:2rem;text-align:center;padding:16px}
.answer-feedback{text-align:center;font-size:1.25rem;font-weight:700;margin:15px}
.confirm-grid,.difficulty-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:25px}
.result-number{font-size:3.5rem;font-weight:800;margin:25px 0}
.result-number small{font-size:1rem;font-weight:500;display:block;color:var(--muted)}
@media(max-width:600px){.confirm-grid,.difficulty-grid{grid-template-columns:1fr}}

.confirm-question{
  font-size:clamp(2.5rem,10vw,5rem);
  font-weight:800;
  margin:10px 0 22px;
}
.review-box{
  margin:28px 0;
  text-align:left;
  border-top:1px solid var(--line);
  padding-top:20px;
}
.review-box h2{
  text-align:center;
  margin-bottom:16px;
}
.review-item{
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.review-question{
  font-size:1.5rem;
  font-weight:800;
  margin-bottom:6px;
}
.all-correct{
  margin:28px 0;
  padding:18px;
  border:1px solid var(--line);
  border-radius:14px;
  font-size:1.3rem;
  font-weight:800;
}

.reward-progress-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:20px 22px;
  margin-bottom:28px;
}
.reward-track{
  height:16px;
  background:#e9ebef;
  border-radius:999px;
  overflow:hidden;
  margin:14px 0 8px;
}
.reward-fill{
  height:100%;
  background:currentColor;
  border-radius:999px;
  min-width:0;
}
.reward-result{
  margin:28px 0;
  padding:18px;
  border:1px solid var(--line);
  border-radius:14px;
}
.parent-child-card{margin-bottom:20px}
.compact-form{
  display:grid;
  grid-template-columns:2fr 2fr 1fr auto;
  gap:10px;
  align-items:end;
  margin-bottom:18px;
}
.compact-form label{margin:0}
@media(max-width:800px){
  .compact-form{grid-template-columns:1fr}
}

.inline-form{display:inline-block;margin:2px}
.button.danger{background:#a61b1b}
.link-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:8px 0;
  border-bottom:1px solid var(--line);
}
.parent-points-summary{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:16px 0;
}
.parent-points-summary>div{
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
}
.metric-label{
  display:block;
  color:var(--muted);
  font-size:.85rem;
  margin-bottom:4px;
}
@media(max-width:700px){
  .parent-points-summary{grid-template-columns:1fr}
}

.section-divider{
  border:0;
  border-top:1px solid var(--line);
  margin:24px 0 18px;
}

.learning-summary{
  margin:10px 0 14px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
}
.mastery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:8px;
  margin:12px 0 22px;
}
.mastery-grid>div{
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
}
.mastery-grid span,.mastery-grid small{
  display:block;
  margin-top:3px;
}
.mastery-grid span{color:var(--muted)}
.history-details{margin-top:24px}
.history-details summary{
  cursor:pointer;
  font-weight:700;
  padding:12px 0;
}

.subject-analysis{
  margin:12px 0 22px;
}
.subject-analysis h4{
  margin-bottom:6px;
}

.mood-note{
  margin-top:22px;
  font-size:.9rem;
}

.subject-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.subject-card,.nav-card{display:block;text-decoration:none;color:inherit}
.subject-card{background:#fff;border:1px solid #dfe5ec;border-radius:22px;padding:24px;box-shadow:0 8px 22px rgba(0,0,0,.05)}
.subject-card:hover,.nav-card:hover{transform:translateY(-1px)}
.subject-icon{font-size:2.2rem;display:block;margin-bottom:10px}
.button-look{display:inline-block;margin-top:8px;font-weight:700}
.choice-grid{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:18px 0}
.choice-button{min-width:72px;font-size:1.35rem}
.ordering-selected{padding:16px;border:2px dashed #cbd5e1;border-radius:14px;margin:14px 0;text-align:center;cursor:pointer}


/* Rendering-Modul 0.5.4.1 */
.renderer-prompt,
.confirmation-prompt{
  margin:10px 0 24px;
}

.ordering-instruction{
  font-size:clamp(1.8rem,5vw,3rem);
  margin:12px 0 8px;
}

.choice-grid-large .choice-button{
  min-width:88px;
  min-height:62px;
  font-size:1.6rem;
}

.ordering-widget{
  margin-top:18px;
}

.ordering-answer-area{
  padding:18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#f8fafc;
}

.ordering-answer-label,
.ordering-source-label{
  font-weight:800;
  margin-bottom:12px;
}

.ordering-source-label{
  margin-top:24px;
}

.ordering-slots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}

.ordering-slot{
  min-width:92px;
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px dashed #b9c4d0;
  border-radius:14px;
  background:#fff;
  font-size:1.35rem;
  font-weight:800;
}

.ordering-slot.filled{
  border-style:solid;
}

.ordering-arrow{
  font-size:1.4rem;
  font-weight:800;
}

.ordering-source{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

.ordering-chip{
  min-width:112px;
  min-height:62px;
  padding:12px 16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  color:var(--text);
  font-size:1.3rem;
  font-weight:800;
}

.ordering-chip:hover:not(:disabled){
  border-color:var(--accent);
  transform:translateY(-1px);
}

.ordering-chip.used,
.ordering-chip:disabled{
  opacity:.3;
}

.ordering-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:24px;
}

@media(max-width:650px){
  .ordering-slot{
    min-width:72px;
    min-height:54px;
    font-size:1.05rem;
  }

  .ordering-arrow{
    font-size:1rem;
  }

  .ordering-chip{
    min-width:96px;
    min-height:54px;
    font-size:1.1rem;
  }
}

/* Content Studio 0.6.0 */
.content-filter{display:flex;gap:16px;align-items:end;flex-wrap:wrap}.content-filter label{min-width:220px;flex:1}
.content-studio-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.8fr);gap:20px;margin:20px 0}
.content-tree{display:flex;flex-direction:column;gap:6px}.content-tree-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 8px;border-bottom:1px solid var(--line)}
.content-tree-main{display:flex;align-items:center;gap:8px;min-width:0}.tree-indent{width:calc(var(--depth) * 28px);flex:0 0 auto}.content-tree-actions{display:flex;gap:6px;align-items:center}.content-tree-actions form{display:flex;gap:4px;margin:0}.button.small{padding:7px 10px;font-size:.88rem}
.stack{display:flex;flex-direction:column;gap:13px}.stack label{display:flex;flex-direction:column;gap:5px}.stack .checkbox-row{flex-direction:row;align-items:center}
.unit-assignment-list{display:flex;flex-direction:column}.unit-assignment-row{display:grid;grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.unit-assignment-row small{display:block;margin-top:3px}
@media(max-width:800px){.content-studio-grid{grid-template-columns:1fr}.content-tree-row{align-items:flex-start;flex-direction:column}.content-tree-actions{margin-left:calc(var(--depth) * 28px)}.unit-assignment-row{grid-template-columns:1fr}}

/* Content Studio 0.6.1 */
.content-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 18px}.content-context{padding:10px 12px;background:rgba(127,127,127,.08);border-radius:10px}.narrow-wide{max-width:720px;margin:20px auto}.documentation{max-width:980px}.documentation .card{margin-bottom:18px}.doc-flow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0}.doc-flow span{padding:8px 12px;border:1px solid var(--line);border-radius:10px}.doc-defs{display:grid;grid-template-columns:160px 1fr;gap:10px 16px}.doc-defs dt{font-weight:700}.doc-defs dd{margin:0}
@media(max-width:700px){.doc-defs{grid-template-columns:1fr}.content-tree-actions{flex-wrap:wrap}}

/* Content Studio 0.6.1.1 */
.content-overview{margin-top:20px}.content-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.content-section-head h2{margin-top:0}.content-node-link{text-decoration:none;color:inherit}.content-node-link:hover{text-decoration:underline}.content-breadcrumb{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0;color:var(--muted)}.content-breadcrumb a{color:inherit}.hero.compact{padding-bottom:12px}.content-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:4px 0 20px}.content-tabs a{padding:11px 15px;text-decoration:none;color:inherit;border-radius:10px 10px 0 0}.content-tabs a.active{font-weight:700;border:1px solid var(--line);border-bottom-color:var(--bg);margin-bottom:-1px}.content-tabs span{font-size:.8em;opacity:.7}.detail-list{display:flex;flex-direction:column}.detail-list-row{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:14px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}.detail-list-row small{display:block;margin-top:4px;color:var(--muted)}
@media(max-width:700px){.content-section-head,.detail-list-row{align-items:flex-start;flex-direction:column}.content-tabs{overflow-x:auto}}

/* LernZeit Design System 0.7.0 */
body{font-family:var(--lz-font);background:var(--lz-bg);color:var(--lz-text)}
.card,.lesson-card,.subject-card,.reward-progress-card,.exercise-card{border-radius:var(--lz-radius-lg);box-shadow:var(--lz-shadow-card)}
button,.button,input,select{border-radius:var(--lz-radius-sm)}
[data-age-theme="kids"] .child-shell{position:relative}
[data-age-theme="kids"] .child-welcome h1{letter-spacing:-.025em}
[data-age-theme="kids"] .subject-card{border-top:5px solid var(--lz-subject)}
[data-age-theme="junior"] .subject-card{border-left:4px solid var(--lz-subject)}
[data-age-theme="teen"] .subject-card{box-shadow:none;border-radius:var(--lz-radius-md)}
.season-panel{background:var(--lz-season-soft,#f6f6fa);border:1px solid color-mix(in srgb,var(--lz-season) 24%, white);border-radius:var(--lz-radius-lg)}
.ds-controls{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:14px;margin:18px 0}.ds-swatch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}.ds-swatch{border-radius:var(--lz-radius-md);padding:18px;border:1px solid var(--lz-line);background:var(--lz-surface)}.ds-swatch i{display:block;height:38px;border-radius:8px;margin-bottom:8px}.ds-preview{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}.ds-task{font-size:clamp(2rem,6vw,4rem);font-weight:800;text-align:center;margin:28px 0}.ds-note{padding:14px 16px;border-left:4px solid var(--lz-season);background:var(--lz-season-soft,#f6f6fa);border-radius:var(--lz-radius-sm)}
@media(max-width:760px){.ds-controls,.ds-preview{grid-template-columns:1fr}}

/* Design System 0.7.1 – device simulation and richer live preview */
.ds-controls{grid-template-columns:repeat(4,minmax(150px,1fr))}
.ds-device-shell{margin:18px auto 0;max-width:var(--lz-preview-max);transition:max-width .2s ease}.ds-device-shell.device-desktop{max-width:1180px}.ds-device-shell.device-tablet{max-width:820px}.ds-device-shell.device-mobile{max-width:390px}.ds-device-label{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 4px 8px;color:var(--lz-muted);font-size:.84rem}.ds-device-frame{position:relative;border:1px solid color-mix(in srgb,var(--lz-line) 75%,var(--lz-subject));border-radius:calc(var(--lz-radius-lg) + 5px);padding:clamp(10px,2vw,20px);background:color-mix(in srgb,var(--lz-bg) 94%,var(--lz-season));overflow:hidden}.ds-device-frame::after{content:"";position:absolute;right:-35px;top:-45px;width:150px;height:150px;border-radius:50%;background:var(--lz-season);opacity:.07;pointer-events:none}
.ds-learning-preview{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:center}.ds-learning-preview h2{margin:.25rem 0}.ds-task-card{margin-top:16px;padding:clamp(18px,4vw,34px);background:var(--lz-surface);border:1px solid var(--lz-line);border-radius:var(--lz-radius-lg);box-shadow:var(--lz-shadow-card)}.ds-task-card .ds-task{margin:16px 0 20px}.ds-answer{display:flex;justify-content:center;gap:10px;align-items:center;flex-wrap:wrap}.ds-answer input{width:110px;max-width:100%;font:inherit;font-size:1.35rem;text-align:center;padding:11px 12px;border:1px solid var(--lz-line);background:var(--lz-surface)}.ds-state-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.ds-preview-secondary{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
[data-age-theme="kids"] .ds-device-frame{background:linear-gradient(145deg,var(--lz-season-soft),var(--lz-bg) 62%)}[data-age-theme="kids"] .ds-task-card{border-width:2px}[data-age-theme="kids"] .ds-task{letter-spacing:-.04em}
[data-age-theme="teen"] .ds-device-frame{box-shadow:none}[data-age-theme="teen"] .ds-task-card{box-shadow:none}
.device-tablet .ds-learning-preview{grid-template-columns:1fr auto}.device-mobile .ds-learning-preview{grid-template-columns:1fr}.device-mobile .lz-progress-ring{margin:0 auto}.device-mobile .ds-task-card{padding:18px 14px}.device-mobile .ds-answer{flex-direction:column}.device-mobile .ds-answer input,.device-mobile .ds-answer .lz-button{width:100%}.device-mobile .ds-state-grid{grid-template-columns:1fr}.device-mobile .ds-preview-secondary{grid-template-columns:1fr}.device-mobile .ds-task{font-size:2.5rem}.device-mobile .ds-device-label span:last-child{display:none}
@media(max-width:760px){.ds-controls{grid-template-columns:1fr 1fr}.ds-preview-secondary{grid-template-columns:1fr}}
@media(max-width:460px){.ds-controls{grid-template-columns:1fr}.ds-device-frame{padding:8px}.ds-device-shell.device-mobile{max-width:100%}}

/* Design System 0.7.2 – visual pass inspired by the approved LernZeit mock-ups */
.ds-device-frame{isolation:isolate;min-height:390px;background:linear-gradient(145deg,var(--lz-season-soft),var(--lz-bg) 68%);border-color:color-mix(in srgb,var(--lz-season) 24%,var(--lz-line));}
.ds-device-frame>*{position:relative;z-index:2}
.ds-device-frame::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.78;background-repeat:no-repeat}
.ds-device-frame::after{z-index:1;width:210px;height:210px;right:-55px;top:-70px;opacity:.13;background:var(--lz-season-glow);box-shadow:-760px 330px 0 15px color-mix(in srgb,var(--lz-season-glow) 75%,transparent)}
[data-season="spring"] .ds-device-frame::before{background-image:radial-gradient(circle at 8% 16%,#fff 0 3px,transparent 4px),radial-gradient(circle at 11% 20%,#f2b8cf 0 4px,transparent 5px),radial-gradient(circle at 92% 72%,#fff 0 3px,transparent 4px),radial-gradient(circle at 88% 77%,#a9d69d 0 5px,transparent 6px)}
[data-season="summer"] .ds-device-frame::before{background-image:radial-gradient(circle at 91% 14%,#ffd66f 0 26px,transparent 27px),radial-gradient(ellipse at 8% 86%,#b8ddf0 0 24px,transparent 25px),radial-gradient(ellipse at 15% 88%,#d8edf7 0 31px,transparent 32px)}
[data-season="autumn"] .ds-device-frame::before{background-image:radial-gradient(ellipse at 7% 18%,#e7a06e 0 8px,transparent 9px),radial-gradient(ellipse at 11% 23%,#c86d3c 0 7px,transparent 8px),radial-gradient(ellipse at 92% 80%,#d99b56 0 9px,transparent 10px),radial-gradient(ellipse at 87% 85%,#b86138 0 7px,transparent 8px)}
[data-season="winter"] .ds-device-frame::before{background-image:radial-gradient(circle at 8% 17%,#fff 0 3px,transparent 4px),radial-gradient(circle at 13% 29%,#fff 0 2px,transparent 3px),radial-gradient(circle at 91% 22%,#fff 0 3px,transparent 4px),radial-gradient(circle at 85% 79%,#fff 0 4px,transparent 5px),radial-gradient(circle at 20% 84%,#fff 0 2px,transparent 3px)}

[data-age-theme="kids"] .ds-device-frame{padding:clamp(18px,3vw,30px);border-radius:34px;border-width:2px;box-shadow:0 18px 48px rgba(76,59,115,.10)}
[data-age-theme="kids"] .ds-learning-preview h2{font-size:clamp(1.65rem,3vw,2.35rem);letter-spacing:-.035em;color:color-mix(in srgb,var(--lz-subject) 72%,var(--lz-text))}
[data-age-theme="kids"] .ds-task-card{border:2px solid color-mix(in srgb,var(--lz-subject) 18%,white);border-radius:30px;box-shadow:0 18px 36px rgba(70,55,105,.10);background:color-mix(in srgb,#fff 96%,var(--lz-season-soft))}
[data-age-theme="kids"] .ds-task{font-size:clamp(3rem,7vw,5rem);color:#343550;text-shadow:0 2px 0 #fff}
[data-age-theme="kids"] .lz-button{min-height:48px;padding-inline:22px;border-radius:16px;box-shadow:0 6px 14px color-mix(in srgb,var(--lz-primary) 22%,transparent)}
[data-age-theme="kids"] .lz-button.secondary{box-shadow:none;background:#fff;border:1px solid var(--lz-line)}
[data-age-theme="kids"] .lz-progress-ring{filter:drop-shadow(0 9px 12px color-mix(in srgb,var(--lz-subject) 18%,transparent))}
[data-age-theme="kids"] .lz-progress-ring::before{box-shadow:inset 0 0 0 4px #fff}
[data-age-theme="kids"] .lz-season-mark{background:#fff;padding:7px 11px;border-radius:999px;box-shadow:0 5px 15px rgba(65,54,90,.07)}

[data-age-theme="junior"] .ds-device-frame{border-radius:24px;box-shadow:0 12px 34px rgba(48,54,85,.07)}
[data-age-theme="junior"] .ds-learning-preview h2{font-size:clamp(1.45rem,2.6vw,2rem);letter-spacing:-.025em}
[data-age-theme="junior"] .ds-task-card{border-radius:20px;border-left:5px solid color-mix(in srgb,var(--lz-subject) 75%,white)}
[data-age-theme="junior"] .ds-task{font-size:clamp(2.7rem,6vw,4.3rem)}
[data-age-theme="junior"] .lz-button{border-radius:12px}

[data-age-theme="teen"] .ds-device-frame{border-radius:16px;background:linear-gradient(160deg,color-mix(in srgb,var(--lz-season-soft) 38%,var(--lz-bg)),var(--lz-bg) 56%);border-color:var(--lz-line);min-height:350px}
[data-age-theme="teen"] .ds-device-frame::before{opacity:.22;filter:grayscale(.35)}
[data-age-theme="teen"] .ds-device-frame::after{opacity:.035}
[data-age-theme="teen"] .ds-learning-preview h2{font-size:1.55rem;letter-spacing:-.02em}
[data-age-theme="teen"] .ds-learning-preview .muted{max-width:560px}
[data-age-theme="teen"] .ds-task-card{border-radius:12px;box-shadow:0 2px 8px rgba(20,30,45,.035);border-color:#dfe4ea;background:rgba(255,255,255,.94)}
[data-age-theme="teen"] .ds-task{font-size:clamp(2.4rem,5vw,3.6rem);font-weight:720;letter-spacing:-.025em}
[data-age-theme="teen"] .lz-button{border-radius:8px;box-shadow:none;min-height:42px}
[data-age-theme="teen"] .lz-season-mark{font-size:.82rem;opacity:.72}
[data-age-theme="teen"] .lz-progress-ring{filter:saturate(.78)}

[data-age-theme="studio"] .ds-device-frame::before,[data-age-theme="studio"] .ds-device-frame::after{display:none}
[data-age-theme="studio"] .ds-device-frame{background:#f3f4f7;border-radius:14px}

.ds-answer input{border:2px solid color-mix(in srgb,var(--lz-subject) 18%,var(--lz-line));outline:none;transition:.15s ease}.ds-answer input:focus{border-color:var(--lz-subject);box-shadow:0 0 0 4px color-mix(in srgb,var(--lz-subject) 12%,transparent)}
.lz-feedback{position:relative;overflow:hidden}.lz-feedback::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:currentColor;opacity:.45}
[data-age-theme="kids"] .lz-feedback{border-radius:18px;padding:15px 17px}[data-age-theme="teen"] .lz-feedback{border-radius:8px}
.ds-device-label strong{color:var(--lz-text)}

.device-tablet .ds-device-frame{min-height:430px}.device-tablet .ds-task-card{margin-top:22px}.device-mobile .ds-device-frame{min-height:610px}.device-mobile .ds-learning-preview{text-align:center}.device-mobile .ds-learning-preview .muted{margin-inline:auto}.device-mobile .lz-season-mark{justify-content:center}.device-mobile .ds-task-card{margin-top:22px}.device-mobile .ds-task{margin:26px 0}.device-mobile .lz-progress-ring{order:-1}.device-mobile .ds-learning-preview>div:first-child{order:2}
[data-age-theme="kids"] .device-mobile .ds-device-frame{border-radius:30px;padding:20px 14px}[data-age-theme="teen"] .device-mobile .ds-device-frame{border-radius:14px;padding:14px 10px}


/* Design System 0.7.3 – learning states and interaction previews */
.ds-learning-states,.ds-task-types{margin-top:18px}
.ds-state-demo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.ds-mini-task,.ds-type-card{min-height:150px;padding:16px;border:1px solid var(--lz-line);border-radius:var(--lz-radius-md);background:var(--lz-surface);display:flex;flex-direction:column;gap:11px;justify-content:center;transition:.15s ease}
.ds-mini-label{font-size:.76rem;font-weight:800;letter-spacing:.035em;text-transform:uppercase;color:var(--lz-muted)}
.ds-mini-question,.ds-type-question{font-size:1.25rem;font-weight:800;color:var(--lz-text)}
.ds-state-input{width:100%;max-width:180px;border:2px solid var(--lz-line);border-radius:var(--lz-radius-sm);padding:10px 12px;background:var(--lz-surface);color:var(--lz-text);font:inherit;font-weight:750;outline:none}
.ds-mini-task.is-selected{border-color:var(--lz-subject);box-shadow:0 0 0 3px color-mix(in srgb,var(--lz-subject) 11%,transparent)}
.ds-mini-task.is-selected .ds-state-input{border-color:var(--lz-subject)}
.ds-mini-task.is-correct{border-color:color-mix(in srgb,var(--lz-success) 38%,var(--lz-line));background:color-mix(in srgb,#eef9f3 70%,var(--lz-surface))}.ds-mini-task.is-correct .ds-inline-feedback{color:var(--lz-success)}
.ds-mini-task.is-wrong{border-color:color-mix(in srgb,var(--lz-danger) 38%,var(--lz-line));background:color-mix(in srgb,#fff1f3 72%,var(--lz-surface))}.ds-mini-task.is-wrong .ds-inline-feedback{color:var(--lz-danger)}
.ds-mini-task.is-hint{border-color:color-mix(in srgb,var(--lz-warning) 45%,var(--lz-line));background:color-mix(in srgb,#fff8e8 72%,var(--lz-surface))}.ds-mini-task.is-hint .ds-inline-feedback{color:#8a611f}
.ds-inline-feedback{font-size:.9rem;font-weight:750}.ds-mini-task.is-disabled{opacity:.52}.ds-mini-task .lz-button:disabled{cursor:not-allowed;filter:grayscale(.3)}
.ds-type-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}.ds-choice-row{display:flex;gap:8px;flex-wrap:wrap}.ds-choice{border:1px solid var(--lz-line);border-radius:var(--lz-radius-sm);background:var(--lz-surface-soft);padding:10px 13px;color:var(--lz-text);font:inherit;font-weight:750}.ds-choice.is-selected{border-color:var(--lz-subject);background:color-mix(in srgb,var(--lz-subject) 10%,white);color:color-mix(in srgb,var(--lz-subject) 78%,#111)}.ds-order-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.ds-order-row span{padding:10px 12px;border:1px solid color-mix(in srgb,var(--lz-subject) 22%,var(--lz-line));border-radius:var(--lz-radius-sm);background:var(--lz-surface-soft);font-weight:800}.ds-order-row b{color:var(--lz-muted)}
[data-age-theme="kids"] .ds-mini-task,[data-age-theme="kids"] .ds-type-card{border-radius:20px;padding:18px}[data-age-theme="kids"] .ds-choice,[data-age-theme="kids"] .ds-order-row span,[data-age-theme="kids"] .ds-state-input{border-radius:14px}[data-age-theme="teen"] .ds-mini-task,[data-age-theme="teen"] .ds-type-card{border-radius:9px;box-shadow:none}[data-age-theme="teen"] .ds-choice,[data-age-theme="teen"] .ds-order-row span,[data-age-theme="teen"] .ds-state-input{border-radius:7px}
.device-mobile~.ds-learning-states{}
@media(max-width:900px){.ds-state-demo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ds-type-grid{grid-template-columns:1fr}}
@media(max-width:560px){.ds-state-demo-grid{grid-template-columns:1fr}.ds-mini-task,.ds-type-card{min-height:auto}.ds-choice-row{flex-direction:column}.ds-choice{width:100%}}

/* LernZeit 0.7.4 – real child experience */
body[data-age-theme]{min-height:100vh;background-color:var(--lz-bg);background-position:center bottom;background-size:cover;background-attachment:fixed;background-repeat:no-repeat}
body[data-season="spring"]{background-image:none}
body[data-season="summer"]{background-image:none}
body[data-season="autumn"]{background-image:none}
body[data-season="winter"]{background-image:none}
[data-age-theme="junior"]{background-blend-mode:screen;background-color:rgba(255,255,255,.18)}
[data-age-theme="teen"]{background-blend-mode:screen;background-color:rgba(245,247,250,.62)}
.child-topbar{background:rgba(255,255,255,.84);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.65);box-shadow:0 4px 20px rgba(55,65,81,.04)}
.child-topbar a{color:var(--lz-text);text-decoration:none;font-weight:700}.child-topbar strong{font-size:1.08rem}
.child-shell{max-width:1040px;position:relative;z-index:1;padding-top:clamp(26px,5vw,58px);padding-bottom:120px}
.child-welcome{max-width:720px;margin:0 auto 28px}.child-welcome h1{color:var(--lz-text);letter-spacing:-.035em}.child-welcome .big-copy{color:var(--lz-muted)}
.subject-grid,.lesson-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:28px}
.subject-card,.lesson-card,.reward-progress-card{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-color:rgba(255,255,255,.72)}
.subject-card,.lesson-card{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.subject-card:hover,.lesson-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(51,51,80,.10)}
.subject-icon{display:inline-flex;width:54px;height:54px;align-items:center;justify-content:center;border-radius:18px;background:color-mix(in srgb,var(--lz-subject) 12%,white);font-size:1.7rem}
.button-look{display:inline-block;margin-top:6px;color:var(--lz-subject);font-weight:800}
.reward-progress-card{max-width:760px;margin-inline:auto}
.mood-button{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:2px solid rgba(255,255,255,.78);box-shadow:var(--lz-shadow-card);border-radius:var(--lz-radius-lg);transition:.15s ease}.mood-button:hover{transform:translateY(-2px);border-color:var(--lz-subject)}

/* Real exercise layout */
.exercise-shell{max-width:1040px;position:relative;z-index:1;padding:clamp(20px,4vw,46px) 18px 110px}
.exercise-header{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;margin-bottom:22px;padding:14px 18px;border-radius:var(--lz-radius-lg);background:rgba(255,255,255,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.72)}
.exercise-meta{min-width:0}.exercise-meta .eyebrow{margin:0 0 3px}.exercise-unit{font-weight:850;font-size:clamp(1rem,2vw,1.25rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lz-progress-ring.real-progress{--progress:0;width:104px;height:104px;flex:0 0 104px;background:conic-gradient(var(--lz-subject) calc(var(--progress)*1%),color-mix(in srgb,var(--lz-subject) 11%,#e9edf2) 0);border-radius:50%;display:grid;place-items:center;position:relative}
.lz-progress-ring.real-progress::before{content:"";position:absolute;inset:10px;border-radius:50%;background:rgba(255,255,255,.96)}
.real-progress .lz-progress-ring-inner{position:relative;z-index:1;text-align:center;line-height:1.05}.real-progress strong{display:block;font-size:1.35rem}.real-progress span{font-size:.72rem;color:var(--lz-muted);font-weight:750}
.exercise-card{max-width:780px;margin:0 auto;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:rgba(255,255,255,.78);box-shadow:0 20px 48px rgba(55,50,85,.10);border-radius:var(--lz-radius-lg)}
.renderer-prompt .math-question{color:var(--lz-text);letter-spacing:-.045em}.answer-form button:not(.button),.answer-form>button{margin-top:16px;min-height:48px;padding:12px 22px;border-radius:var(--lz-radius-sm);background:var(--lz-primary)}
.answer-input{border:2px solid color-mix(in srgb,var(--lz-subject) 22%,var(--lz-line));border-radius:var(--lz-radius-md);background:#fff;outline:none}.answer-input:focus{border-color:var(--lz-subject);box-shadow:0 0 0 5px color-mix(in srgb,var(--lz-subject) 12%,transparent)}
.answer-feedback{max-width:780px;margin:0 auto 16px;padding:13px 17px;border-radius:var(--lz-radius-md);background:rgba(255,255,255,.92);backdrop-filter:blur(8px);font-size:1rem}.answer-feedback.is-correct{color:var(--lz-success);border:1px solid color-mix(in srgb,var(--lz-success) 28%,white)}.answer-feedback.is-wrong{color:var(--lz-danger);border:1px solid color-mix(in srgb,var(--lz-danger) 24%,white)}
.choice-grid-large{gap:12px}.choice-button{min-height:58px;background:color-mix(in srgb,var(--lz-subject) 9%,white);color:var(--lz-text);border:2px solid color-mix(in srgb,var(--lz-subject) 18%,var(--lz-line));border-radius:var(--lz-radius-md);box-shadow:none}.choice-button:hover{background:color-mix(in srgb,var(--lz-subject) 16%,white);border-color:var(--lz-subject);transform:translateY(-1px)}
.ordering-answer-area,.ordering-source{background:color-mix(in srgb,var(--lz-subject) 5%,white);border-radius:var(--lz-radius-md)}
.ordering-chip,.ordering-slot{border-radius:var(--lz-radius-sm)}

[data-age-theme="kids"] .child-topbar{border-bottom:0}.child-shell{}
[data-age-theme="kids"] .subject-card,[data-age-theme="kids"] .lesson-card,[data-age-theme="kids"] .reward-progress-card,[data-age-theme="kids"] .mood-button{border-radius:26px}
[data-age-theme="kids"] .exercise-header{border-radius:26px}[data-age-theme="kids"] .exercise-card{border-radius:32px;padding:clamp(24px,6vw,54px)}[data-age-theme="kids"] .lz-progress-ring.real-progress{filter:drop-shadow(0 10px 14px color-mix(in srgb,var(--lz-subject) 18%,transparent))}[data-age-theme="kids"] .choice-button{border-radius:17px}
[data-age-theme="junior"] .subject-card,[data-age-theme="junior"] .lesson-card{border-radius:20px}[data-age-theme="junior"] .exercise-card{border-radius:22px}
[data-age-theme="teen"] .child-topbar{background:rgba(255,255,255,.90)}[data-age-theme="teen"] .subject-card,[data-age-theme="teen"] .lesson-card,[data-age-theme="teen"] .reward-progress-card{border-radius:12px;box-shadow:0 3px 12px rgba(30,40,55,.04)}[data-age-theme="teen"] .exercise-header{border-radius:12px;background:rgba(255,255,255,.88)}[data-age-theme="teen"] .exercise-card{border-radius:12px;box-shadow:0 5px 18px rgba(30,40,55,.05)}[data-age-theme="teen"] .lz-progress-ring.real-progress{width:88px;height:88px;flex-basis:88px;filter:saturate(.75)}[data-age-theme="teen"] .lz-progress-ring.real-progress::before{inset:8px}

@media(max-width:700px){body[data-age-theme]{background-attachment:scroll;background-position:center bottom}.child-topbar{padding:11px 14px;flex-direction:row;align-items:center}.child-topbar>div:last-child{font-size:.88rem}.child-shell{padding:28px 14px 100px}.subject-grid,.lesson-grid{grid-template-columns:1fr}.exercise-shell{padding:14px 12px 90px}.exercise-header{grid-template-columns:1fr auto;padding:11px 12px;gap:10px}.lz-progress-ring.real-progress{width:78px;height:78px;flex-basis:78px}.lz-progress-ring.real-progress::before{inset:8px}.real-progress strong{font-size:1.05rem}.real-progress span{font-size:.62rem}.exercise-card{padding:24px 16px}.math-question{font-size:clamp(3rem,18vw,5rem);margin:22px 0}.answer-form{max-width:100%}.answer-form button:not(.button),.answer-form>button{width:100%}.choice-grid-large{grid-template-columns:1fr}.choice-button{width:100%}.ordering-actions{flex-direction:column}.ordering-actions button{width:100%}}
@media(max-width:430px){.child-topbar>div:last-child a:not(:last-child){display:none}.exercise-meta .eyebrow{font-size:.68rem}.exercise-unit{font-size:.95rem}}

/* LernZeit 0.7.6 – managed theme media */
body[data-age-theme][style*="--lz-theme-background"]{background-image:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.04)),var(--lz-theme-background);background-position:center center;background-size:cover;background-repeat:no-repeat}
[data-age-theme="junior"][style*="--lz-theme-background"]{background-image:linear-gradient(rgba(248,250,252,.30),rgba(248,250,252,.30)),var(--lz-theme-background)}
[data-age-theme="teen"][style*="--lz-theme-background"]{background-image:linear-gradient(rgba(248,250,252,.58),rgba(248,250,252,.58)),var(--lz-theme-background)}
.media-upload{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;align-items:end}.media-upload label{display:grid;gap:6px}.theme-assignment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.theme-season{border:1px solid var(--lz-line);border-radius:14px;padding:16px}.theme-slot{display:grid;grid-template-columns:90px minmax(0,1fr);gap:8px 12px;align-items:center;padding:12px 0;border-top:1px solid var(--lz-line)}.theme-slot:first-of-type{border-top:0}.theme-slot img{grid-column:2;width:100%;max-height:120px;object-fit:cover;border-radius:10px}.theme-slot small{grid-column:2}.theme-slot form{grid-column:2;display:flex;gap:8px;align-items:center}.theme-slot select{min-width:0}.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}.media-card{border:1px solid var(--lz-line);border-radius:14px;padding:10px;display:grid;gap:10px}.media-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px}.media-card div{display:grid;gap:3px}.media-card small{color:var(--lz-muted)}
@media(max-width:760px){.media-upload,.theme-assignment-grid{grid-template-columns:1fr}.theme-slot{grid-template-columns:74px minmax(0,1fr)}}
/* 0.7.7 media file manager */
.media-breadcrumb{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 14px}.media-toolbar{display:flex;gap:18px;justify-content:space-between;align-items:flex-end;flex-wrap:wrap}.media-inline{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}.media-file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}.media-folder-card,.media-card{border:1px solid var(--lz-border,#ddd);border-radius:var(--lz-radius-card,16px);padding:12px;background:var(--lz-surface,#fff)}.media-folder-open{display:flex;gap:10px;align-items:center;min-height:70px;text-decoration:none}.media-folder-icon{font-size:32px}.media-card img{width:100%;height:135px;object-fit:cover;border-radius:12px}.media-card small{display:block;margin-top:4px}.media-card details{margin-top:10px}.media-manage{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}.media-manage input,.media-manage select{min-width:0;flex:1}


/* LernZeit 0.7.7.1 – managed backgrounds are the only landscape source */
.ds-device-frame[style*="--lz-theme-background"]{background-image:linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,.06)),var(--lz-theme-background)!important;background-position:center center!important;background-size:cover!important;background-repeat:no-repeat!important}
.ds-device-frame[style*="--lz-theme-background"]::before,.ds-device-frame[style*="--lz-theme-background"]::after{display:none!important}
[data-age-theme="junior"] .ds-device-frame[style*="--lz-theme-background"]{background-image:linear-gradient(rgba(248,250,252,.30),rgba(248,250,252,.30)),var(--lz-theme-background)!important}
[data-age-theme="teen"] .ds-device-frame[style*="--lz-theme-background"]{background-image:linear-gradient(rgba(248,250,252,.58),rgba(248,250,252,.58)),var(--lz-theme-background)!important}

/* 0.7.7.2: managed preview backgrounds are real media elements, not CSS fallbacks. */
.ds-device-frame.has-media-background{background:var(--lz-bg)!important}
.ds-device-frame.has-media-background::before,.ds-device-frame.has-media-background::after{display:none!important}
.ds-theme-background{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important;z-index:0!important;display:block!important}
.ds-device-frame.has-media-background>*:not(.ds-theme-background){position:relative;z-index:2}
.ds-device-frame.has-media-background::after{content:"";position:absolute;inset:0;z-index:1;display:block!important;background:rgba(255,255,255,.08);pointer-events:none}
[data-age-theme="junior"] .ds-device-frame.has-media-background::after{background:rgba(248,250,252,.30)}
[data-age-theme="teen"] .ds-device-frame.has-media-background::after{background:rgba(248,250,252,.58)}


/* LernZeit 0.7.7.4 – reusable readability surface for text over variable media */
.lz-info-surface{
  background:rgba(255,255,255,.80);
  border:1px solid rgba(255,255,255,.76);
  border-radius:var(--lz-radius-lg);
  box-shadow:0 8px 28px rgba(31,41,55,.10);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:clamp(14px,2.2vw,22px);
  color:var(--lz-text);
}
.lz-info-surface .muted{color:color-mix(in srgb,var(--lz-text) 72%,#667085)}
.lz-info-surface .eyebrow{color:color-mix(in srgb,var(--lz-subject) 72%,var(--lz-text))}
[data-age-theme="kids"] .lz-info-surface{border-radius:24px;background:rgba(255,255,255,.82)}
[data-age-theme="junior"] .lz-info-surface{border-radius:18px;background:rgba(255,255,255,.84)}
[data-age-theme="teen"] .lz-info-surface{border-radius:12px;background:rgba(255,255,255,.88);box-shadow:0 5px 18px rgba(30,40,55,.07)}
/* exercise-header keeps only its layout; visual surface comes from lz-info-surface */
.exercise-header.lz-info-surface{padding:14px 18px}
.ds-learning-preview>.lz-info-surface{max-width:680px}
.device-mobile .ds-learning-preview>.lz-info-surface{padding:16px}

/* Content Studio 0.8.0 – reusable learning-unit/task-source editor */
.unit-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0}.unit-summary-grid>div{padding:16px;border:1px solid var(--line);border-radius:14px;background:rgba(127,127,127,.05)}.unit-summary-grid strong,.unit-summary-grid span{display:block}.unit-summary-grid strong{font-size:1.25rem}.unit-summary-grid span{margin-top:4px;color:var(--muted)}.task-source-choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}.task-source-card{padding:20px;border:1px solid var(--line);border-radius:16px;background:rgba(127,127,127,.04)}.task-source-card h3{margin-top:0}.task-source-card p{min-height:48px;color:var(--muted)}.task-source-add{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}.inline-actions{display:flex;gap:8px;flex-wrap:wrap}.inline-actions form{margin:0}@media(max-width:700px){.task-source-choice,.unit-summary-grid{grid-template-columns:1fr}.task-source-card p{min-height:auto}}

/* 0.8.4: learning viewport — a normal laptop should show one complete task without routine scrolling. */
.analog-clock-visual{width:min(70vw,320px,32vh);height:auto}
.task-context{display:grid;gap:6px;margin:10px auto 4px;max-width:620px}
.task-context p{margin:0;padding:8px 12px;border-radius:var(--lz-radius-sm);background:color-mix(in srgb,var(--lz-subject) 9%,white);font-weight:700}

@media (min-width:701px) and (max-height:900px){
  .exercise-shell{min-height:100dvh;box-sizing:border-box;padding:12px 18px 18px;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:10px;align-content:start}
  .exercise-header{padding:8px 14px;min-height:0}
  .exercise-header .eyebrow{margin:0 0 2px}
  .exercise-unit{font-size:clamp(1rem,2.2vh,1.25rem)}
  .lz-progress-ring.real-progress{width:70px;height:70px;flex-basis:70px}
  .lz-progress-ring.real-progress::before{inset:7px}
  .real-progress strong{font-size:1rem}.real-progress span{font-size:.58rem}
  .exercise-card,[data-age-theme="kids"] .exercise-card{width:100%;box-sizing:border-box;padding:clamp(12px,2.2vh,22px) clamp(16px,3vw,30px);align-self:start}
  .exercise-card>.eyebrow{margin:0 0 4px}
  .renderer-prompt .math-question,.confirmation-prompt .math-question{font-size:clamp(1.35rem,3.1vh,2rem);margin:4px 0 8px}
  .analog-clock-visual{width:min(250px,29vh);margin:6px auto!important}
  .answer-form{margin-top:8px}
  .answer-form .answer-input{min-height:44px}
  .answer-form button:not(.button),.answer-form>button{margin-top:8px;min-height:44px}
  .exercise-card>.muted{margin:8px 0 0;font-size:.82rem}
  .answer-feedback{margin:0 auto;padding:9px 14px;position:sticky;top:6px;z-index:5}
  .task-context{margin:6px auto 2px}.task-context p{padding:6px 10px}
}
@media (min-width:701px) and (max-height:700px){
  .exercise-shell{padding-top:8px;gap:7px}
  .lz-progress-ring.real-progress{width:58px;height:58px;flex-basis:58px}
  .real-progress span{display:none}
  .analog-clock-visual{width:min(210px,26vh)}
  .exercise-card,[data-age-theme="kids"] .exercise-card{padding-top:10px;padding-bottom:10px}
}