/* Opomu Academy lesson components + recreated Claude desktop app screens. */
:root{
  --oa-ink:#1d1d1d; --oa-muted:#5c5c5c; --oa-soft:#f4f4f3; --oa-line:rgba(29,29,29,.13); --oa-mid:#afafaf;
  /* Claude desktop app (light) – kept to the real app's look */
  --cc-bg:#faf9f5; --cc-side:#f5f4ee; --cc-chrome:#efeee7; --cc-line:rgba(31,30,29,.13); --cc-ink:#141413; --cc-muted:#73726c;
  --cc-bubble:#f0eee6; --cc-accent:#d97757; --cc-accent-dk:#c6613f; --cc-ok:#5a8a5f;
}
.oa-goals,.oa-note,.oa-take,.oa-prompt,.oa-compare,.oa-table,.oa-uses,.oa-steps,.oa-yesno,.oa-rules,.oa-tree,.cc-fig{margin:1.4em 0}
.oa-label{font-size:12px!important;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--oa-muted);margin:0 0 .4em!important}
.oa-goals{background:var(--oa-soft);border-radius:14px;padding:18px 22px}
.oa-goals ul{margin:0;padding-left:1.2em}
.oa-goals li{margin:.2em 0}
.oa-inshort{border-left:3px solid var(--oa-ink);padding:2px 0 2px 18px;font-size:1.2em;line-height:1.5;font-weight:600}
.oa-note{border-radius:14px;padding:16px 20px;background:var(--oa-soft)}
.oa-note p{margin:.2em 0}
.oa-note-t{font-weight:700}
.oa-note.warn{background:transparent;border:1.5px solid var(--oa-ink)}
.oa-take{border:2px solid var(--oa-ink);border-radius:14px;padding:16px 20px}
.oa-take p:last-child{margin:0;font-size:1.12em;font-weight:600}
.oa-compare{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.oa-compare>div{border-radius:14px;padding:18px 20px;background:var(--oa-soft)}
.oa-compare>div.dark{background:var(--oa-ink);color:#fff}
.oa-compare p{margin:.2em 0}
.oa-c-t{font-weight:700;font-size:1.08em}
.oa-table{overflow-x:auto}
.oa-table table{border-collapse:collapse;width:100%;font-size:.95em}
.oa-table th,.oa-table td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--oa-line);vertical-align:top}
.oa-table th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--oa-muted)}
.oa-table td:first-child{font-weight:700}
.oa-uses,.oa-rules{list-style:none;margin-left:0!important;padding:0!important}
.oa-uses li,.oa-rules li{padding:12px 0;border-top:1px solid var(--oa-line);display:grid;gap:2px}
.oa-uses li:last-child,.oa-rules li:last-child{border-bottom:1px solid var(--oa-line)}
.oa-uses span,.oa-rules span{color:var(--oa-muted);font-size:.95em}
.oa-rules{counter-reset:r}
.oa-rules li{grid-template-columns:36px 1fr;column-gap:12px}
.oa-rules li::before{counter-increment:r;content:counter(r);grid-row:span 2;width:30px;height:30px;border-radius:50%;background:var(--oa-ink);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.oa-steps{list-style:none;margin-left:0!important;padding:0!important;counter-reset:s;display:grid;gap:10px}
.oa-steps li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start}
.oa-steps li::before{counter-increment:s;content:counter(s);width:30px;height:30px;border-radius:50%;background:var(--oa-ink);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.oa-yesno{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.oa-yesno>div{border:1px solid var(--oa-line);border-radius:14px;padding:16px 20px}
.oa-yesno ul{margin:.4em 0 0;padding-left:1.2em}
.oa-tree{background:var(--oa-soft);border-radius:12px;padding:16px 18px;font:14px/1.8 ui-monospace,Menlo,Consolas,monospace;white-space:pre;overflow-x:auto}
.oa-prompt{background:#1d1d1d;color:#f1f1f1;border-radius:14px;overflow:hidden}
.oa-prompt-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 10px 6px 18px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#a3a3a3;font-weight:700}
.oa-copy{font:700 13px system-ui,sans-serif;background:#fff;color:#1d1d1d;border:0;border-radius:999px;padding:7px 16px;cursor:pointer;letter-spacing:0;text-transform:none}
.oa-copy.ok{background:#afafaf}
.oa-prompt pre{margin:0;padding:6px 18px 18px;white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.65 ui-monospace,Menlo,Consolas,monospace;background:transparent;color:inherit;border:0;font-variant-ligatures:none}

/* ---------- Claude desktop app, recreated ---------- */
.cc-fig{display:grid;gap:8px}
.cc-fig figcaption{font-size:13.5px;color:var(--oa-muted)}
.cc-win{background:var(--cc-bg);color:var(--cc-ink);border:1px solid var(--cc-line);border-radius:12px;overflow:hidden;font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;box-shadow:0 18px 40px -24px rgba(20,20,19,.35);text-align:left}
.cc-bar{display:flex;align-items:center;gap:12px;background:var(--cc-chrome);border-bottom:1px solid var(--cc-line);padding:9px 14px}
.cc-dots{display:flex;gap:7px}.cc-dots i{width:11px;height:11px;border-radius:50%;background:#ff5f57}.cc-dots i:nth-child(2){background:#febc2e}.cc-dots i:nth-child(3){background:#28c840}
.cc-tabs{display:flex;gap:2px;margin:0 auto;background:rgba(31,30,29,.06);border-radius:8px;padding:2px}
.cc-tabs span{padding:3px 14px;border-radius:6px;font-size:12.5px;color:var(--cc-muted)}
.cc-tabs span.on{background:var(--cc-bg);color:var(--cc-ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.cc-bar-r{width:47px}
.cc-body{display:grid;grid-template-columns:200px minmax(0,1fr);min-height:260px}
.cc-side{background:var(--cc-side);border-right:1px solid var(--cc-line);padding:12px 10px;display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--cc-muted)}
.cc-new{color:var(--cc-ink);font-weight:600;padding:6px 8px;border-radius:8px}
.cc-lbl{font-size:11px;margin:12px 8px 4px}
.cc-s{padding:6px 8px;border-radius:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-s.on{background:rgba(31,30,29,.07);color:var(--cc-ink)}
.cc-main{display:flex;flex-direction:column;justify-content:space-between;min-width:0;padding:18px 22px 14px;gap:14px}
.cc-main.cc-center{justify-content:center;align-items:center;padding:36px 22px}
.cc-hello{font-family:"Copernicus","Tiempos Headline",Georgia,"Times New Roman",serif;font-size:26px;margin:0 0 18px!important;color:var(--cc-ink)}
.cc-chat{display:flex;flex-direction:column;gap:14px}
.cc-me{align-self:flex-end;max-width:82%;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.cc-bub{background:var(--cc-bubble);border-radius:14px;padding:9px 14px}
.cc-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--cc-line);background:#fff;border-radius:10px;padding:5px 10px 5px 5px;font-size:12px;margin-left:6px}
.cc-chip i{width:28px;height:28px;border-radius:6px;background:var(--cc-bubble);display:grid;place-items:center;font-style:normal;font-size:9px;font-weight:700;color:var(--cc-muted)}
.cc-chip small{display:block;color:var(--cc-muted);font-size:10.5px;line-height:1.2}
.cc-ai{display:flex;flex-direction:column;gap:6px;max-width:94%;font-family:"Anthropic Serif","Tiempos Text",Georgia,"Times New Roman",serif;font-size:15px;line-height:1.6}
.cc-ai p,.cc-ai ol{margin:0!important}
.cc-ai ol{padding-left:1.3em}
.cc-tool{font:12.5px/1.5 ui-monospace,Menlo,Consolas,monospace;color:var(--cc-muted);display:flex;gap:8px;align-items:baseline;min-width:0}
.cc-tool b{color:var(--cc-ok);font-weight:400;font-size:10px}
.cc-tool span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cc-perm{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-size:13.5px;border:1px solid var(--cc-line);border-radius:12px;background:#fff;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.cc-perm code{display:block;background:var(--cc-side);color:var(--cc-ink);border-radius:8px;padding:8px 10px;font-size:12.5px}
.cc-btns{display:flex;gap:8px;flex-wrap:wrap}
.cc-btns span{border:1px solid var(--cc-line);border-radius:8px;padding:5px 12px;font-size:12.5px}
.cc-btns span.pri{background:var(--cc-ink);color:var(--cc-bg);border-color:var(--cc-ink)}
.cc-composer{border:1px solid var(--cc-line);border-radius:16px;background:#fff;padding:12px 14px 10px;display:flex;flex-direction:column;gap:12px;box-shadow:0 1px 3px rgba(20,20,19,.05)}
.cc-composer.wide{width:min(560px,100%)}
.cc-ph{color:var(--cc-muted)}
.cc-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;color:var(--cc-muted)}
.cc-l{display:flex;align-items:center;gap:10px}
.cc-plus{width:26px;height:26px;border:1px solid var(--cc-line);border-radius:8px;display:grid;place-items:center;color:var(--cc-ink);font-size:15px}
.cc-folder::before{content:"▢ ";font-size:10px}
.cc-send{width:30px;height:30px;border-radius:9px;background:var(--cc-accent);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700}

@media (max-width:640px){
  .oa-compare,.oa-yesno{grid-template-columns:1fr}
  .cc-body{grid-template-columns:minmax(0,1fr)}
  .cc-side{display:none}
  .cc-main{padding:14px}
  .cc-me{max-width:94%}
  .cc-hello{font-size:21px}
  .oa-table table,.oa-table tbody,.oa-table tr,.oa-table td{display:block;width:100%}
  .oa-table thead{display:none}
  .oa-table tr{border-bottom:1px solid var(--oa-line);padding:10px 0}
  .oa-table td{border:0;padding:2px 0}
  .oa-table td[data-l]:not(:first-child):not([data-l=""])::before{content:attr(data-l) ": ";font-weight:700;color:var(--oa-muted);font-size:12.5px}
}