.lesson-listing[data-astro-cid-iomaid3d]{min-width:0;max-width:70ch;margin:24px 0 32px}.listing-caption[data-astro-cid-iomaid3d]{font:16px/1.5 var(--h-font-ui);flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-bottom:12px;display:flex}.listing-caption[data-astro-cid-iomaid3d] label[data-astro-cid-iomaid3d]{font-weight:600}.listing-changes[data-astro-cid-iomaid3d]{color:var(--h-ink-muted)}.listing-editor[data-astro-cid-iomaid3d]{background:var(--h-ground);border-block:1px solid var(--h-line);min-width:0;position:relative}.listing-editor[data-astro-cid-iomaid3d]:focus-within{outline:2px solid var(--h-spot);outline-offset:3px}.listing-editor[data-astro-cid-iomaid3d]>textarea[data-astro-cid-iomaid3d],.listing-editor[data-astro-cid-iomaid3d]>pre[data-astro-cid-iomaid3d]{box-sizing:border-box;letter-spacing:normal;tab-size:4;white-space:pre;word-wrap:normal;text-transform:none;text-align:left;border:0;border-radius:0;width:100%;font:18px/30px var(--h-font-mono)!important;margin:0!important;padding:20px 24px!important}.listing-editor[data-astro-cid-iomaid3d]>textarea[data-astro-cid-iomaid3d]{resize:none;color:var(--h-ink);caret-color:var(--h-ink);background:0 0;outline:none;min-height:130px;display:block;position:relative;overflow:auto}.listing-editor[data-astro-cid-iomaid3d]>pre[data-astro-cid-iomaid3d]{pointer-events:none;color:var(--h-ink);background:0 0;position:absolute;inset:0;overflow:hidden}.listing-editor[data-astro-cid-iomaid3d].highlighted>textarea[data-astro-cid-iomaid3d]{color:#0000;-webkit-text-fill-color:transparent}.listing-editor[data-astro-cid-iomaid3d]>textarea[data-astro-cid-iomaid3d]::selection{background:color-mix(in srgb,var(--h-spot) 20%,transparent)}.listing-editor[data-astro-cid-iomaid3d] mark{color:inherit;background:color-mix(in srgb,var(--h-spot) 11%,var(--h-ground));text-decoration:underline;text-decoration-color:var(--h-spot);text-underline-offset:5px}.listing-actions[data-astro-cid-iomaid3d]{flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:16px;display:flex}.listing-actions[data-astro-cid-iomaid3d] button[data-astro-cid-iomaid3d]{font:600 16px/1.5 var(--h-font-ui);border-radius:0}.listing-status[data-astro-cid-iomaid3d],.listing-hint[data-astro-cid-iomaid3d]{font:16px/1.6 var(--h-font-ui);color:var(--h-ink-muted);margin:0}.listing-hint[data-astro-cid-iomaid3d]{max-width:65ch;margin-top:12px}.listing-options[data-astro-cid-iomaid3d]{font:16px/1.5 var(--h-font-ui);margin-top:16px}.listing-options[data-astro-cid-iomaid3d] summary[data-astro-cid-iomaid3d]{cursor:pointer;text-underline-offset:4px;width:fit-content;min-height:44px;padding-block:10px;text-decoration:underline}.listing-options[data-astro-cid-iomaid3d]>div[data-astro-cid-iomaid3d]{flex-wrap:wrap;gap:12px;display:flex}.listing-options[data-astro-cid-iomaid3d] button[data-astro-cid-iomaid3d]{font:16px/1.5 var(--h-font-ui);border:1px solid var(--h-line);background:var(--h-ground);color:var(--h-ink);border-radius:0;padding:8px 12px}.listing-options[data-astro-cid-iomaid3d] p[data-astro-cid-iomaid3d]{margin:20px 0 8px;font-weight:600}.listing-options[data-astro-cid-iomaid3d] pre[data-astro-cid-iomaid3d]{font:16px/1.7 var(--h-font-mono);white-space:pre-wrap;overflow-wrap:anywhere;background:0 0;padding:0}.listing-error[data-astro-cid-iomaid3d]{font:16px/1.6 var(--h-font-ui);color:var(--h-ink);border-top:2px solid var(--h-spot);overflow-wrap:anywhere;margin:16px 0 0;padding-top:12px}@media (width<=600px){.listing-editor[data-astro-cid-iomaid3d]>textarea[data-astro-cid-iomaid3d],.listing-editor[data-astro-cid-iomaid3d]>pre[data-astro-cid-iomaid3d]{padding:16px 12px!important;font-size:16px!important;line-height:28px!important}.listing-caption[data-astro-cid-iomaid3d]{font-size:14px}}@media (forced-colors:active){.listing-editor[data-astro-cid-iomaid3d]>pre[data-astro-cid-iomaid3d]{display:none}.listing-editor[data-astro-cid-iomaid3d].highlighted>textarea[data-astro-cid-iomaid3d]{color:canvastext;-webkit-text-fill-color:CanvasText}}.basic-playground{min-width:0;margin:32px 0}.basic-playground [hidden]{display:none!important}.basic-playground button{min-height:48px;font:600 1rem/1.5 var(--h-font-ui);border:1px solid var(--h-line);background:var(--h-ground);color:var(--h-ink);cursor:pointer;border-radius:0;padding:10px 16px}.basic-playground button:disabled{opacity:.55;cursor:default}.basic-playground .primary-action{background:var(--h-spot);border-color:var(--h-spot);color:#fff}.basic-playground :is(button,textarea,canvas,summary):focus-visible{outline:2px solid var(--h-spot);outline-offset:4px}.basic-playground .listing-editor textarea:focus-visible{outline:none}.lesson-machine .machine-heading{justify-content:space-between;align-items:start;gap:16px;display:flex}.lesson-machine .machine-heading h2{font:700 1.5rem/1.3 var(--h-font-ui);margin:0}.lesson-machine .machine-heading p{font:1rem/1.5 var(--h-font-mono);margin:8px 0}.lesson-machine p,.lesson-machine details{font:1rem/1.6 var(--h-font-ui)}.lesson-machine .live-machine canvas{width:352px;height:auto;image-rendering:pixelated;background:var(--h-ground);max-width:100%;display:block}.lesson-machine .machine-controls{border-block:1px solid var(--h-line);flex-wrap:wrap;gap:8px;padding:16px 0;display:flex}.lesson-machine .machine-controls label{font:1rem var(--h-font-ui);align-items:center;gap:8px;display:flex}.lesson-machine summary{cursor:pointer;min-height:44px;padding:12px 0}.lesson-machine .machine-transcript{width:352px;max-width:100%;margin-inline:auto}.lesson-machine .machine-transcript pre{white-space:pre-wrap;font:14px/1.5 var(--h-font-mono)}body.machine-active{overflow:hidden}dialog.lesson-machine{box-sizing:border-box;width:608px;max-width:calc(100vw - 48px);max-height:calc(100dvh - 48px);color:var(--h-ink);background:var(--h-page);overscroll-behavior:contain;border:0;border-radius:0;margin:auto;padding:32px;position:fixed;inset:0;overflow:auto;box-shadow:0 16px 48px -12px #1b1a1780}dialog.lesson-machine:not([open]){display:none}dialog.lesson-machine::backdrop{background:#1b1a17b3}.lesson-machine .machine-heading{border-top:0;padding-top:0}.lesson-machine .live-machine{width:352px;margin:24px auto}.lesson-machine .machine-controls,.lesson-machine .machine-status,.lesson-machine .machine-help,.lesson-machine .paused-note{width:352px;max-width:100%;margin-inline:auto}.lesson-machine .machine-heading button{border-radius:0;font-size:16px}@media (width<=767px){dialog.lesson-machine{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:16px}.lesson-machine .machine-heading{flex-wrap:wrap}.lesson-machine .machine-heading button{margin-left:auto}.lesson-machine .live-machine{margin-block:24px}}@media (width<=351px){dialog.lesson-machine{padding:12px}.lesson-machine .live-machine,.lesson-machine .machine-controls,.lesson-machine .machine-status,.lesson-machine .machine-help,.lesson-machine .paused-note{width:100%}}@media (prefers-reduced-motion:no-preference){dialog.lesson-machine[open]{animation:.18s cubic-bezier(.16,1,.3,1) modal-arrives}@keyframes modal-arrives{0%{box-shadow:0 4px 16px -8px #1b1a1740}to{box-shadow:0 16px 48px -12px #1b1a1780}}}.lesson-machine .edit-basic{border:1px solid var(--h-line);background:var(--h-ground);width:352px;max-width:100%;color:var(--h-ink);font:600 16px/1.5 var(--h-font-ui);border-radius:0;margin:16px auto 0;padding:10px 12px;display:block}.lesson-machine .machine-failure{width:352px;max-width:100%;font:16px/1.5 var(--h-font-ui);margin:16px auto}.machine-failure pre{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.6 var(--h-font-mono)}.lesson-machine .machine-input{width:352px;max-width:100%;font:16px/1.5 var(--h-font-ui);margin:16px auto}.machine-input summary{cursor:pointer;min-height:44px;padding-block:10px;font-weight:600}.machine-input-keys{border:0;flex-wrap:wrap;gap:8px;margin:8px 0;padding:0;display:flex}.machine-input-keys button{border:1px solid var(--h-line);background:var(--h-ground);min-width:48px;min-height:48px;color:var(--h-ink);font:16px/1.5 var(--h-font-ui);border-radius:0;padding:8px 12px}@media (width<=383px){dialog.lesson-machine{padding-inline:0}.lesson-machine .machine-heading{padding-inline:12px}.lesson-machine .live-machine{width:min(352px,100vw)}.lesson-machine :is(.machine-controls,.machine-status,.machine-help,.paused-note,.machine-input,.machine-transcript,.machine-failure){box-sizing:border-box;padding-inline:12px}}
