.detail-page>section{margin-block:24px}.detail-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px;display:grid}.detail-actions{align-items:center;gap:var(--ui-gap);flex-wrap:wrap;margin-block:16px;display:flex}.detail-image,.template-preview>img,.toy-art>img{object-fit:contain;max-width:100%;height:auto}.template-preview{max-width:960px}.lesson-steps>li{padding:8px 0}.lesson-workbench{grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr);align-items:start;gap:24px;display:grid}.lesson-instructions,.lesson-player{min-width:0}.lesson-player{border:1px solid var(--border);background:var(--panel);border-radius:12px;padding:20px;position:sticky;top:16px}.lesson-player>h2,.lesson-instructions>h2{margin-top:0}.lesson-progress,.lesson-playback-note{color:var(--text-secondary)}.lesson-controls,.lesson-step-navigation{flex-wrap:wrap;gap:8px;margin-block:16px;display:flex}.lesson-steps{margin:0;padding:0;list-style:none}.lesson-step{border:1px solid var(--border);width:100%;color:var(--text);font:inherit;text-align:start;cursor:pointer;background:0 0;border-radius:8px;align-items:start;gap:12px;padding:12px;line-height:1.5;display:flex}.lesson-step[aria-current=step]{border-color:var(--accent);background:var(--raised)}.lesson-step-number{color:var(--text-secondary);flex:none;font-weight:700}.lesson-control-help{margin-block:16px}.lesson-control-help summary{cursor:pointer}.lesson-live-frame{min-width:0;overflow:hidden}@container (width<=760px){.lesson-workbench{flex-direction:column;display:flex}.lesson-player{box-sizing:border-box;order:-1;width:100%;padding:16px;position:static}}.page-header{align-items:center;gap:var(--ui-gap) 16px;border-bottom:1px solid var(--border);grid-template-columns:auto minmax(0,1fr) auto;margin-bottom:16px;padding-bottom:16px;display:grid}.page-header-art{background:var(--raised);border-radius:50%;width:72px;height:72px;overflow:hidden}.page-header-art>img,.page-header-art>svg{object-fit:cover;width:100%;height:100%}.page-header-text{min-width:0}.page-header-text>h1{overflow-wrap:anywhere;margin:0;font-size:1.6rem;line-height:1.2}.page-header-text>h1:focus{outline:none}.page-header-subtitle{color:var(--text-secondary);margin:4px 0 0}.page-header-actions{gap:var(--ui-gap);flex-wrap:wrap;justify-content:flex-end;display:flex}@container (width<=560px){.page-header{grid-template-columns:auto minmax(0,1fr)}.page-header-actions{grid-column:1/-1;justify-content:flex-start}}