.tutorial-shell{min-height:100dvh;background:var(--paper)}.tutorial-shell .topbar{background:var(--paper);gap:16px}.topbar nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.topbar a{color:var(--sea)}.tutorial-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;min-height:calc(100dvh - 86px)}.tutorial-layout .viewport-wrap{min-height:480px;height:calc(100dvh - 218px)}.tutorial-journal{padding:24px;min-width:0;max-height:calc(100dvh - 86px);overflow:auto;border-left:1px solid var(--line)}.tutorial-journal h1{font:34px/1.08 var(--serif);margin:8px 0 16px}.tutorial-journal p{font-size:13px}.tutorial-journal details{margin:16px 0}.tutorial-journal summary{cursor:pointer;min-height:32px}.tutorial-controls{display:flex;flex-wrap:wrap;gap:5px;padding:8px;background:var(--paper)}.tutorial-controls button{min-width:44px}.tutorial-controls button[aria-pressed=true]{background:var(--sea);color:white}.tutorial-layout .command-bar{background:var(--paper-light);min-height:52px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--muted)}#lessons{padding-left:20px;font-size:12px;line-height:1.9}#lessons .current{font-weight:bold;color:var(--sea)}#lessons .done{color:var(--muted);text-decoration:line-through}.narration{border-top:1px solid var(--line);padding-top:10px}#speaker{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}#caption{font:19px/1.4 var(--serif);min-height:80px}.dialogue-controls{display:flex;align-items:center;gap:10px;margin:8px 0}.dialogue-controls label{font-size:12px}audio{width:100%;height:40px}#transcript{padding-left:20px;font-size:12px;max-height:250px;overflow:auto}#runtime-status{white-space:pre-wrap;font-size:10px}#fade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:4}#media-dialog{width:min(850px,94vw)}#media-dialog video{display:block;width:100%;max-height:54dvh;background:#000;margin:10px 0}#media-dialog select{display:block;margin:6px 0 12px;max-width:100%;min-height:44px}#media-dialog .scope-note{font-size:12px}.tutorial-layout #load-screen{gap:14px}.tutorial-layout canvas{touch-action:none}
@media(max-width:800px){.tutorial-layout{grid-template-columns:minmax(0,1fr)}.tutorial-layout .viewport-wrap{height:54dvh;min-height:300px}.tutorial-journal{max-height:none;border-left:0;border-top:1px solid var(--line);padding:20px}.tutorial-journal h1{font-size:28px}.topbar nav{gap:6px;font-size:11px}.topbar nav button{font-size:11px}.tutorial-controls{gap:4px}.tutorial-controls button{padding:7px 10px}.tutorial-journal #lessons{columns:2}#caption{min-height:0}.tutorial-shell .topbar{flex-wrap:wrap;justify-content:space-between}.tutorial-shell .wordmark small{font-size:8px}}
@media(max-height:500px) and (orientation:landscape){.tutorial-layout{grid-template-columns:minmax(0,1fr) 250px}.tutorial-layout .viewport-wrap{height:65dvh;min-height:240px}.tutorial-journal{max-height:none;padding:14px}.tutorial-journal #lessons{columns:1}.tutorial-controls{padding:4px}.tutorial-controls button{min-height:44px}.tutorial-shell .topbar{min-height:60px}}

.save-import{display:block;margin:12px 0}.save-import input{display:block;max-width:100%;margin-top:8px}#save-status{font-size:11px}