.demo-backdrop{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:var(--scrim)}.demo-backdrop--modal{background:color-mix(in srgb,var(--scrim) 55%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:120}.demo-sheet.study-panel{max-width:none;margin:0;position:relative;transform:translateZ(0);display:flex;flex-direction:column;width:100%;height:100dvh;overflow:hidden;background:var(--canvas);color:var(--ink)}.demo-header{position:relative;flex:none;display:flex;align-items:center;gap:12px;height:64px;padding:8px max(var(--space-16),8px) 8px 8px;padding-top:calc(8px + var(--safe-top));box-sizing:content-box;border-bottom:1px solid var(--line)}.demo-header>strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--type-subheading);line-height:var(--leading-subheading)}.demo-progress{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--line)}.demo-progress>span{display:block;height:100%;background:var(--orange);transition:width .25s var(--ease)}.demo-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--space-24) var(--space-24) calc(120px + var(--safe-bottom))}.demo-body>*{max-width:608px;margin-inline:auto}.demo-body .completion-state{min-height:0;gap:var(--space-16)}.demo-body .completion-state .primary{margin-top:var(--space-8)}.demo-body.study-screen{display:block;width:auto;min-height:0;margin:0;padding-top:var(--space-24)}.demo-body.study-screen .exercise{padding-bottom:0}.demo-sheet .lesson-brief>.primary{left:50%;right:auto;translate:-50% 0;width:min(var(--col-read),calc(100% - 48px));max-width:none}@media(min-width:768px){.demo-sheet.study-panel{width:min(720px,calc(100vw - 48px));height:min(820px,calc(100dvh - 48px));border-radius:var(--radius-24, 24px);box-shadow:var(--shadow)}.demo-header{padding-top:8px}}.demo-sheet .exercise{animation:none}.demo-body .exercise form{padding-bottom:0}.demo-header .session-close{width:48px;height:48px;flex:none;display:grid;place-items:center;border:0;border-radius:var(--radius-pill);background:var(--paper);color:var(--ink)}.demo-body .completion-state{display:flex;flex-direction:column;align-items:stretch;text-align:left;padding:0;border:0;box-shadow:none;background:transparent}.demo-body .completion-title{margin:0;font-size:var(--type-subheading);line-height:var(--leading-subheading);font-weight:700}.demo-body .completion-state h1{margin:0;font-size:var(--type-title);line-height:var(--leading-title)}.demo-body .round-actions{position:static;inset:auto;max-width:none;margin:0}.demo-body .row{display:flex;flex-wrap:wrap;gap:var(--space-8)}.demo-body>.small.muted{margin-bottom:var(--space-16)}