/* Lotzy Academy: lesson pages and the drawn Lotzy screens (ac-*). */
.ac-hero, .ac-head { text-align:center; max-width:780px; margin:0 auto 34px; }
.ac-hero h1, .ac-head h1 { font-size:clamp(36px, 5.6vw, 60px); line-height:1.05; letter-spacing:-.02em; text-wrap:balance; }
.ac-hero-note { margin-top:18px; color:var(--text-2); }
.ac-hero-note a, .ac-crumbs a, .ac-pager a, .ac-tip a { color:var(--accent-text); }
.ac-grid { list-style:none; margin:0 auto; padding:0; max-width:1080px; display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:18px; }
.ac-lcard { display:grid; gap:10px; height:100%; padding:22px; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface, rgba(255,255,255,.02)); color:var(--text); text-decoration:none; transition:border-color .2s, transform .2s; }
.ac-lcard:hover { border-color:var(--text-2); transform:translateY(-2px); }
.ac-lnum { color:var(--accent-text); font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.ac-lcard h2 { margin:0; font-size:22px; line-height:1.2; }
.ac-lcard p { margin:0; color:var(--text-2); font-size:15px; line-height:1.55; }
.ac-lmeta { color:var(--text-2); font-size:13px; }
.ac-mini { margin:6px 0 0; height:170px; overflow:hidden; border-radius:14px; background:linear-gradient(160deg,#2a2d35,#15161a); display:grid; place-items:center; }
.ac-mini > * { zoom:.62; }
.ac-crumbs { display:flex; gap:8px; justify-content:center; margin:0 auto 16px; color:var(--text-2); font-size:14px; }
.ac-learn { max-width:920px; margin:0 auto 34px; padding:18px 22px; border-radius:18px; border:1px solid var(--line); background:var(--surface, rgba(255,255,255,.02)); }
.ac-learn b { display:block; margin-bottom:8px; }
.ac-learn ul { margin:0; padding-left:20px; color:var(--text-2); display:grid; gap:4px; }
.ac-steps { list-style:none; margin:0 auto; padding:0; max-width:1040px; display:grid; gap:18px; }
.ac-step { display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:28px; align-items:center; padding:24px; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface, rgba(255,255,255,.02)); }
.ac-num { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--accent); color:#111; font-weight:700; }
.ac-step h3 { margin:12px 0 8px; font-size:22px; }
.ac-step p { margin:0; color:var(--text-2); font-size:16px; line-height:1.6; }
.ac-step p b { color:var(--text); }
.ac-step code, .ac-tip code { font:13px ui-monospace, Consolas, monospace; padding:1px 6px; border-radius:6px; background:var(--bg-alt, rgba(255,255,255,.06)); }
.ac-fig { margin:0; min-height:230px; display:grid; place-items:center; padding:20px; border-radius:16px; background:linear-gradient(160deg,#2a2d35,#15161a); overflow:hidden; }
.ac-tip { max-width:1040px; margin:22px auto 0; display:flex; gap:14px; padding:18px 22px; border-radius:18px; border:1px solid rgba(245,176,65,.35); background:rgba(245,176,65,.06); }
.ac-tip > b { flex:none; color:#f5c06a; }
.ac-tip p { margin:0; color:var(--text-2); line-height:1.6; }
.ac-tip p b { color:var(--text); }
.ac-pager { max-width:1040px; margin:34px auto 0; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ac-pager a { display:grid; gap:4px; padding:18px 20px; border-radius:18px; border:1px solid var(--line); text-decoration:none; }
.ac-pager a:hover { border-color:var(--text-2); }
.ac-pager a.next { text-align:right; grid-column:2; }
.ac-pager small { color:var(--text-2); font-size:13px; }
.ac-pager b { color:var(--text); font-size:17px; }
.ac-dots { display:flex; justify-content:center; gap:8px; margin:26px 0 0; }
.ac-dots a { width:10px; height:10px; border-radius:50%; background:var(--line); }
.ac-dots a[aria-current] { background:var(--accent); }
@media (max-width:820px) { .ac-step { grid-template-columns:1fr; } .ac-pager { grid-template-columns:1fr; } .ac-pager a.next { grid-column:1; } }

/* ---------- Drawn Lotzy screens ---------- */
.ac-fig, .ac-mini { --u-bg:#0d0d0f; --u-panel:#151517; --u-line:#2a2a2e; --u-text:#f2f2f2; --u-mute:#8b8b92; font-family:var(--font, -apple-system, "Segoe UI", sans-serif); }
.ac-fig *, .ac-mini * { box-sizing:border-box; }
.ac-hl { box-shadow:0 0 0 2px #f2b23e, 0 0 16px 2px rgba(242,178,62,.5) !important; position:relative; z-index:1; }
.ac-thumb { display:block; width:100%; height:100%; border-radius:inherit; }
.ac-duo { display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap; justify-content:center; }
.ac-appbar { width:100%; max-width:470px; display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; background:#0a0a0b; border:1px solid var(--u-line); color:var(--u-text); font-size:12px; }
.ac-logo { width:16px; height:16px; border-radius:4px; background:linear-gradient(140deg,#ff4b3e,#a30c12); }
.ac-tabs { display:flex; padding:2px; border-radius:8px; border:1px solid var(--u-line); background:var(--u-panel); }
.ac-tabs b { padding:4px 10px; border-radius:6px; color:var(--u-mute); font-weight:600; }
.ac-tabs b.on { background:#2a2a2e; color:#fff; box-shadow:0 0 0 2px #f2b23e; }
.ac-project { display:grid; text-align:center; margin:0 auto; font-weight:650; }
.ac-project small { color:var(--u-mute); font-size:8px; letter-spacing:.12em; }
.ac-pill { padding:4px 8px; border-radius:7px; border:1px solid var(--u-line); color:#cfcfd4; font-size:10px; white-space:nowrap; }
.ac-side { width:220px; padding:10px 8px; border-radius:12px; background:var(--u-panel); border:1px solid var(--u-line); color:var(--u-text); font-size:12px; }
.ac-side-head { display:flex; justify-content:space-between; align-items:center; padding:0 6px 8px; color:var(--u-mute); font-size:9.5px; font-weight:700; letter-spacing:.1em; }
.ac-plus { display:grid; place-items:center; width:20px; height:20px; border-radius:6px; color:#fff; font-size:15px; }
.ac-row { position:relative; display:flex; align-items:center; gap:6px; height:28px; padding-right:8px; border-radius:8px; color:#c9c9ce; }
.ac-row.on { background:linear-gradient(90deg, rgba(232,22,28,.22), transparent); color:#fff; }
.ac-row em { margin-left:auto; color:var(--u-mute); font-style:normal; font-size:10px; }
.ac-caret { width:10px; color:var(--u-mute); font-size:9px; }
.ac-folder { width:13px; height:10px; border-radius:2px; border:1.5px solid currentColor; opacity:.8; }
.ac-row.drop-inside { background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.4), 0 0 0 2px #f2b23e; }
.ac-side-foot { display:grid; gap:4px; margin-top:10px; padding-top:8px; border-top:1px solid var(--u-line); color:#c9c9ce; }
.ac-side-foot span { padding:5px 6px; border-radius:6px; }
.ac-prompt { width:100%; max-width:480px; padding:12px; border-radius:14px; background:linear-gradient(180deg,#18181a,#0e0e0f); border:1px solid var(--u-line); color:var(--u-text); font-size:12px; }
.ac-prompt-top { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.ac-prompt-title { font-weight:650; }
.ac-see { padding:3px 7px; border-radius:6px; border:1px solid var(--u-line); color:#c9c9ce; font-size:10.5px; }
.ac-type { display:flex; margin-left:auto; padding:2px; border-radius:7px; border:1px solid var(--u-line); background:var(--u-bg); }
.ac-type b { padding:3px 8px; border-radius:5px; color:var(--u-mute); font-weight:600; font-size:10.5px; }
.ac-type b.on { background:#2a2a2e; color:#fff; }
.ac-text { position:relative; min-height:42px; color:#e6e6ea; font-size:13px; line-height:1.55; }
.ac-text.tall { min-height:120px; }
.ac-tag { display:inline-flex; align-items:center; gap:4px; padding:0 5px 0 2px; border-radius:5px; background:rgba(255,255,255,.1); color:#fff; }
.ac-tag .ac-thumb { width:14px; height:14px; border-radius:3px; }
.ac-mention { position:absolute; left:40px; top:24px; z-index:2; width:200px; padding:4px; border-radius:10px; background:#1a1a1c; border:1px solid var(--u-line); box-shadow:0 12px 30px rgba(0,0,0,.6); }
.ac-mention div { display:flex; align-items:center; gap:8px; padding:5px; border-radius:7px; font-size:11.5px; }
.ac-mention div.on { background:rgba(255,255,255,.1); box-shadow:0 0 0 2px #f2b23e; }
.ac-mention .ac-thumb { width:22px; height:22px; border-radius:5px; flex:none; }
.ac-chips { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
.ac-addref, .ac-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 8px 4px 4px; border-radius:8px; border:1px solid var(--u-line); color:#c9c9ce; font-size:10.5px; }
.ac-addref { padding-left:8px; border-style:dashed; }
.ac-chip .ac-thumb { width:18px; height:18px; border-radius:4px; }
.ac-chip i { color:var(--u-mute); font-style:normal; }
.ac-controls, .ac-settings { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; }
.ac-settings { margin-top:10px; padding-top:10px; border-top:1px solid var(--u-line); }
.ac-field { display:grid; gap:4px; }
.ac-field.grow { flex:1; min-width:110px; }
.ac-field small { color:var(--u-mute); font-size:8.5px; font-weight:700; letter-spacing:.08em; }
.ac-select, .ac-cost, .ac-seg { padding:6px 9px; border-radius:8px; border:1px solid var(--u-line); background:var(--u-bg); white-space:nowrap; }
.ac-cost { font-weight:700; }
.ac-seg { display:flex; padding:2px; }
.ac-seg b { padding:3px 8px; border-radius:6px; color:var(--u-mute); }
.ac-seg b.on { background:#2a2a2e; color:#fff; }
.ac-gen { padding:7px 12px; border-radius:8px; background:linear-gradient(140deg,#ff4b3e,#e8161c 46%,#a30c12); color:#fff; font-weight:650; }
.ac-draft { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:99px; border:1px solid var(--u-line); color:#c9c9ce; font-weight:600; }
.ac-draft i { width:7px; height:7px; border-radius:50%; background:var(--u-mute); }
.ac-draft.on { border-color:rgba(245,176,65,.6); background:rgba(245,176,65,.12); color:#fff; }
.ac-draft.on i { background:#f5b041; box-shadow:0 0 8px rgba(245,176,65,.8); }
.ac-canvas { position:relative; display:flex; flex-wrap:wrap; gap:14px; justify-content:center; width:100%; max-width:480px; padding:16px; border-radius:14px; background:#0b0b0c radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.5px) 0 0/16px 16px; border:1px solid var(--u-line); }
.ac-card { width:200px; border-radius:10px; overflow:hidden; background:#121213; border:1px solid var(--u-line); color:var(--u-text); font-size:10.5px; }
.ac-card.sel { border-color:#e8161c; box-shadow:0 0 0 1px #e8161c; }
.ac-card-title { display:flex; align-items:center; gap:5px; height:24px; padding:0 8px; color:#c9c9ce; white-space:nowrap; overflow:hidden; }
.ac-card-title span:first-child { overflow:hidden; text-overflow:ellipsis; }
.ac-link { display:inline-grid; place-items:center; width:15px; height:15px; border-radius:4px; background:rgba(95,180,245,.18); color:#8ccdfb; font-size:9px; }
.ac-film { margin-left:auto; padding:0 4px; border-radius:4px; }
.ac-media { position:relative; height:112px; }
.ac-play { position:absolute; left:50%; top:50%; width:26px; height:26px; margin:-13px; border-radius:50%; background:rgba(0,0,0,.5); }
.ac-play::after { content:''; position:absolute; left:10px; top:7px; border:6px solid transparent; border-left:9px solid #fff; }
.ac-costb, .ac-draftb, .ac-finalb, .ac-badge { position:absolute; top:6px; display:inline-flex; align-items:center; gap:5px; padding:2px 6px; border-radius:99px; background:rgba(8,8,9,.9); border:1px solid rgba(255,255,255,.14); color:#fff; font-size:9.5px; font-weight:600; }
.ac-costb { left:6px; }
.ac-draftb { right:6px; padding-right:2px; color:#ddd; }
.ac-draftb b { padding:1px 6px; border-radius:99px; background:rgba(255,255,255,.12); color:#fff; }
.ac-finalb { right:6px; border-color:rgba(61,220,132,.55); color:#6ee7a1; }
.ac-job { height:100%; display:grid; place-items:center; align-content:center; gap:8px; color:#c9c9ce; background:radial-gradient(circle at 50% 40%, rgba(232,22,28,.18), transparent 70%); }
.ac-spin { width:22px; height:22px; border-radius:50%; border:2px solid rgba(255,255,255,.15); border-top-color:#ff4b3e; }
.ac-note { background:#3a2f12; border-color:#6a5420; }
.ac-note p { margin:0; padding:8px 10px 12px; color:#f1e2b8; font-size:11px; line-height:1.45; }
.ac-gesture { position:absolute; right:14px; bottom:10px; font-size:24px; }
.ac-marquee { position:absolute; left:8px; top:8px; width:66%; height:150px; border:1px dashed #e8161c; background:rgba(232,22,28,.06); }
.ac-drop { position:absolute; right:12px; bottom:12px; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#f2b23e; color:#111; font-weight:800; }
.ac-menu { width:230px; padding:5px; border-radius:11px; background:#161618; border:1px solid var(--u-line); box-shadow:0 18px 40px rgba(0,0,0,.55); color:var(--u-text); font-size:12px; }
.ac-menu > div { display:flex; align-items:center; padding:7px 9px; border-radius:7px; }
.ac-menu > div.danger { color:#ff9b9b; }
.ac-menu kbd { margin-left:auto; color:var(--u-mute); font:10px var(--font, sans-serif); }
.ac-menu > i { display:block; height:1px; margin:4px 6px; background:var(--u-line); }
.ac-modal { width:100%; max-width:330px; padding:16px; border-radius:16px; background:linear-gradient(180deg,#19191b,#101011); border:1px solid var(--u-line); color:var(--u-text); font-size:12px; box-shadow:0 20px 50px rgba(0,0,0,.6); }
.ac-modal > b { font-size:15px; }
.ac-modal p { margin:6px 0 10px; color:var(--u-mute); line-height:1.5; }
.ac-input { display:block; padding:8px 10px; border-radius:8px; border:1px solid #3a3a3f; background:var(--u-bg); color:#fff; }
.ac-kv { display:flex; justify-content:space-between; margin-top:8px; padding:8px 10px; border-radius:8px; border:1px solid var(--u-line); color:var(--u-mute); }
.ac-kv b { color:#fff; }
.ac-choices { display:grid; gap:6px; margin:10px 0 4px; }
.ac-choices div { display:grid; gap:2px; padding:9px 10px; border-radius:10px; border:1px solid var(--u-line); }
.ac-choices span { color:var(--u-mute); font-size:11px; }
.ac-choices div.danger b { color:#ff9b9b; }
.ac-modal-actions { display:flex; justify-content:flex-end; gap:6px; margin-top:10px; }
.ac-modal-actions span { padding:6px 12px; border-radius:8px; background:#232326; }
.ac-modal-actions span.primary { background:linear-gradient(140deg,#ff4b3e,#e8161c 46%,#a30c12); color:#fff; font-weight:650; }
.ac-tl { position:relative; width:100%; max-width:480px; padding:8px 8px 10px; border-radius:12px; background:#0d0d0f; border:1px solid var(--u-line); color:var(--u-text); font-size:10px; }
.ac-ruler { display:flex; justify-content:space-between; margin:0 0 6px 36px; color:var(--u-mute); font:9px ui-monospace, monospace; }
.ac-track { display:flex; align-items:center; height:34px; }
.ac-track-name { width:36px; color:var(--u-mute); font-weight:700; }
.ac-lane { position:relative; flex:1; height:28px; border-top:1px solid #19191b; }
.ac-clip { position:absolute; top:3px; bottom:3px; display:flex; align-items:center; gap:5px; overflow:hidden; border-radius:5px; background:#1d2633; border:1px solid #2f3b4d; white-space:nowrap; }
.ac-clip .ac-thumb { width:28px; height:100%; border-radius:0; flex:none; }
.ac-clip b { padding-right:6px; font-weight:600; overflow:hidden; text-overflow:ellipsis; }
.ac-clip.text { padding-left:6px; background:#3a2a10; border-color:#6a4f1c; color:#f5d38a; }
.ac-clip.aud { padding-left:6px; background:#12301f; border-color:#1f5a38; color:#8ee0b0; }
.ac-clip.vid:not(:has(.ac-thumb)) { padding-left:6px; background:repeating-linear-gradient(135deg,#1b1b1e 0 6px,#232327 6px 12px); border-style:dashed; color:#c9c9ce; }
.ac-playhead { position:absolute; top:4px; bottom:4px; width:2px; background:#e8161c; }
.ac-agents { width:100%; max-width:300px; padding:10px; border-radius:12px; background:var(--u-panel); border:1px solid var(--u-line); color:var(--u-text); font-size:11.5px; }
.ac-agent-tabs { display:flex; gap:4px; margin-bottom:8px; }
.ac-agent-tabs b { flex:1; padding:6px; border-radius:7px; text-align:center; color:var(--u-mute); }
.ac-agent-tabs b.on { background:#232326; color:#fff; }
.ac-agent-pick { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.ac-agent-pick span { display:grid; gap:2px; padding:8px; border-radius:9px; border:1px solid var(--u-line); color:var(--u-mute); font-size:10px; }
.ac-agent-pick span b { color:#fff; font-size:11.5px; }
.ac-agent-pick span.on { border-color:#5a5a62; background:rgba(255,255,255,.04); }
.ac-agent-input { margin-top:8px; min-height:52px; padding:8px; border-radius:8px; border:1px solid var(--u-line); background:var(--u-bg); color:#e6e6ea; }
.ac-agent-run { display:flex; justify-content:flex-end; margin-top:8px; }
.ac-agent-run span { padding:6px 12px; border-radius:8px; background:linear-gradient(140deg,#ff4b3e,#e8161c 46%,#a30c12); color:#fff; font-weight:650; }
.ac-agent-result { margin-top:8px; padding:8px; border-radius:8px; background:rgba(61,220,132,.08); border:1px solid rgba(61,220,132,.3); color:#bdf0d3; }
.ac-undo { margin-left:6px; text-decoration:underline; color:#fff; }
.ac-set { width:100%; max-width:330px; padding:12px; border-radius:12px; background:var(--u-panel); border:1px solid var(--u-line); color:var(--u-text); font-size:11.5px; }
.ac-set-tabs { display:flex; gap:4px; margin-bottom:10px; }
.ac-set-tabs b { padding:5px 8px; border-radius:7px; color:var(--u-mute); }
.ac-set-tabs b.on { background:#232326; color:#fff; }
.ac-set label { display:flex; gap:10px; padding:10px; border-radius:10px; border:1px solid var(--u-line); }
.ac-set label i { flex:none; width:16px; height:16px; margin-top:1px; border-radius:4px; border:1.5px solid #5a5a62; }
.ac-set label i.on { background:#e8161c; border-color:#e8161c; }
.ac-set label span { display:grid; gap:3px; color:var(--u-mute); }
.ac-set label span b { color:#fff; }
.ac-edit { width:100%; max-width:480px; display:grid; gap:6px; padding:8px; border-radius:12px; background:var(--u-bg); border:1px solid var(--u-line); color:var(--u-text); font-size:10.5px; }
.ac-edit-tools { display:flex; justify-content:space-between; color:var(--u-mute); }
.ac-export { padding:3px 8px; border-radius:6px; background:#e8161c; color:#fff; }
.ac-edit-main { display:flex; gap:6px; }
.ac-preview { flex:1; height:110px; border-radius:6px; overflow:hidden; }