/* Academy composition; shared visual roles and assets come from the canonical export. */
html { scroll-behavior:auto; }
[hidden] { display:none!important; }
.review-shell { max-width:1400px; margin:auto; padding:var(--space-4); }
.page-header { display:flex; gap:var(--space-4); justify-content:space-between; margin-bottom:var(--space-4); }
h1 { font-size:1.6rem; line-height:1.2; margin:var(--space-2) 0; }
.intro,footer,.state-note { color:var(--on-surface-variant); }
.intro,.eyebrow { margin:0; }
.navigation,.transport-row,.timeline-row { display:flex; gap:var(--space-3); align-items:center; }
.navigation { margin-bottom:var(--space-3); align-items:end; }
.screen-picker { display:grid; flex:1; gap:var(--space-1); font-size:.85rem; }
select { width:100%; padding:.65rem; font:inherit; background:var(--surface-container-lowest); color:var(--on-surface); border:1px solid var(--outline); border-radius:var(--radius-sm); }
.btn { min-height:44px; }
.btn:disabled { opacity:.5; }
.transport { padding:var(--space-3); margin-bottom:var(--space-3); background:var(--surface); border:1px solid var(--outline-variant); border-radius:var(--radius-md); }
.transport-row { flex-wrap:wrap; }
.replica-badge { font-size:.8rem; color:var(--on-surface-variant); }
#time { font: .9rem var(--font-mono); }
.motion-choice { margin-left:auto; display:flex; align-items:center; gap:var(--space-1); font-size:.85rem; }
.timeline-row { margin-top:var(--space-2); }
#timeline { width:100%; min-width:60px; flex:1; height:28px; accent-color:var(--primary); }
.seek-label { display:flex; gap:var(--space-2); align-items:center; font-size:.85rem; }
#seek-time { width:78px; padding:.3rem; background:var(--surface-container-lowest); color:var(--on-surface); border:1px solid var(--outline); border-radius:var(--radius-sm); font:inherit; }
#play-status { font-size:.85rem; margin:var(--space-1) 0 0; }
#viewer { padding:var(--space-3); background:var(--surface-container-low); border:1px solid var(--outline-variant); border-radius:var(--radius-lg); }
.viewer-heading { display:flex; gap:var(--space-3); align-items:center; justify-content:space-between; margin-bottom:var(--space-2); min-height:44px; }
.viewer-heading .eyebrow { font-size:.75rem; }
h2 { margin:3px 0 0; font-size:1rem; }
#action { font: .85rem var(--font-mono); color:var(--on-surface); }
#stage-frame { position:relative; width:min(100%,calc((100dvh - 280px) * 2.222222)); aspect-ratio:1600/720; margin-inline:auto; overflow:hidden; border:1px solid var(--outline-variant); border-radius:var(--radius-sm); background:#fff; }
#motion-stage { position:absolute; width:1600px; height:720px; transform-origin:0 0; background:#fff; color-scheme:light; }
.replica { position:absolute; left:0; top:0; width:1512px; height:771px; transform-origin:0 0; pointer-events:none; color-scheme:light; }
#overview { z-index:1; }
#zoom { position:absolute; overflow:hidden; visibility:hidden; z-index:2; background:#fff; border-radius:4px; opacity:1; }
#cursor { position:absolute; left:0; top:0; width:28px; height:34px; z-index:4; pointer-events:none; }
#click-ring { position:absolute; width:36px; height:36px; border:3px solid #0759c7; border-radius:50%; box-shadow:0 0 0 1px #fff; pointer-events:none; z-index:3; }
.caption-band { margin-top:var(--space-2); padding:var(--space-3) var(--space-4); min-height:76px; display:flex; align-items:center; border-radius:var(--radius-md); background:var(--primary-container); color:var(--on-primary-container); }
#caption { font-size:clamp(1.2rem,1.9vw,1.65rem); line-height:1.3; margin:0; }
#context { font: .8rem/1.4 var(--font-mono); margin:var(--space-1) 0 0; overflow-wrap:anywhere; }
.state-details { margin-top:var(--space-2); font-size:.85rem; }
.state-details summary { color:var(--on-surface-variant); cursor:pointer; }
.state-note { font-size:.9rem; }
.element-notes { display:grid; gap:var(--space-2); }
.element-note { padding:var(--space-2); background:var(--surface-container); border-radius:var(--radius-sm); overflow-wrap:anywhere; }
footer { margin-top:var(--space-4); font-size:.9rem; line-height:1.5; }
#error { padding:var(--space-4); background:var(--error-container); color:var(--on-error-container); margin-bottom:var(--space-3); }
.sr-only,.presentation #play-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.presentation .page-header,.presentation .navigation,.presentation footer { display:none; }
.presentation .review-shell { padding:var(--space-3); }
.presentation .transport { padding:var(--space-2); margin-bottom:var(--space-2); }
/* Existing local contrast adaptation, applied to the property label only. */
.df-plabel.is-set { color:#0759c7; }
@media(max-width:760px) {
 .review-shell { padding:var(--space-2); }
 .page-header { display:block; }
 .navigation { flex-wrap:wrap; }
 .screen-picker { order:-1; flex-basis:100%; }
 .motion-choice { margin-left:0; }
 #stage-frame { width:100%; }
 .viewer-heading { flex-direction:column; align-items:start; }
 .replica-badge { flex-basis:100%; }
 #action { font-size:.75rem; }
}

/* Approved Classes presentation,21Oct2026; local media fixture, not a Kit edit. */
.df-site{padding:24px;color:#111111}.df-site-container{position:relative;left:auto;top:auto;width:100%;max-width:960px;margin:0 auto;padding:16px}.df-site-container::before{content:'Classi: condivise, indipendenti, combinate';display:block;font-size:20px;line-height:28px;margin-bottom:48px}.df-site-wrapper{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:160px;gap:16px;padding-left:0;align-items:stretch}.df-site-el{width:auto;height:160px;min-width:0}.df-site-text{font-size:20px;line-height:28px;color:#111111;max-width:100%;overflow-wrap:anywhere}