/* Tutorial card: bottom left, over the page. It never blocks a control on the right. */
.tutor { position: fixed; left: 12px; bottom: 12px; width: min(400px, calc(100vw - 24px)); max-height: 60vh; overflow: auto; z-index: 50;
  background: var(--panel, #fff); color: var(--ink, #111); border: 2px solid var(--accent, #2563eb); border-radius: 10px;
  box-shadow: 0 8px 30px rgb(0 0 0 / .35); padding: 10px 12px; font: 13px/1.45 system-ui, sans-serif; }
.tutor header { display: flex; gap: 6px; align-items: center; }
.tutor header button { padding: 1px 7px; }
.tutor h4 { margin: 8px 0 4px; font-size: 14px; }
.tutor .text p { margin: 4px 0; }
.tutor .text ol, .tutor .text ul { margin: 4px 0; padding-left: 20px; }
.tutor .text code, .tutor .text kbd { font: 12px ui-monospace, Consolas, monospace; background: var(--bg, #f3f4f6); border: 1px solid var(--line, #d1d5db); border-radius: 3px; padding: 0 4px; }
.tutor .text pre { font: 12px ui-monospace, Consolas, monospace; background: var(--bg, #f3f4f6); border: 1px solid var(--line, #d1d5db); border-radius: 4px; padding: 6px; overflow: auto; margin: 4px 0; }
.tutor .st { margin: 6px 0; color: var(--muted, #6b7280); font-weight: 600; }
.tutor .st.ok { color: var(--ok, #15803d); }
.tutor footer { display: flex; gap: 6px; margin-top: 8px; }
.tutor .bar { height: 4px; background: var(--line, #d1d5db); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.tutor .bar span { display: block; height: 100%; background: var(--accent, #2563eb); transition: width .2s; }
.tutor.min { width: auto; padding: 4px; border-width: 1px; }
.tutor-ring { position: fixed; z-index: 49; pointer-events: none; border: 3px solid #f59e0b; border-radius: 8px;
  box-shadow: 0 0 0 4px rgb(245 158 11 / .3); animation: tutor-pulse 1.2s ease-in-out infinite; transition: all .15s; }
@keyframes tutor-pulse { 50% { box-shadow: 0 0 0 10px rgb(245 158 11 / .05); } }
@media (prefers-reduced-motion: reduce) { .tutor-ring { animation: none; } }
.tutor a { color: var(--accent, #2563eb); }
/* The editor has its run panel (210 px) at the bottom: the card goes above it. */
body:has(#runpanel) .tutor { bottom: 222px; max-height: calc(100vh - 300px); }