/* On-Off Group — AI Prompting Essentials */
:root{
  --petrol:#0C3B38;
  --teal:#2C6E66;
  --pale:#DCE8E2;
  --paper:#F7F6F2;
  --amber:#E3B45C;
  --ink:#1E2A28;
  --muted:#62706B;
  --card:#FFFFFF;
  --line:#E2E7E3;
  --good:#2C6E66;
  --bad:#B4553B;
  --sans:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --shadow:0 1px 2px rgba(12,59,56,.04),0 8px 30px rgba(12,59,56,.06);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:300;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:780px;margin:0 auto;padding:20px 18px 72px;}

/* topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 2px 20px;}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--petrol);letter-spacing:-.01em;}
.ring{width:16px;height:16px;border-radius:50%;border:3px solid var(--teal);position:relative;}
.ring::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--amber);}
.course-tag{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}

/* progress ticks */
.ticks{display:flex;gap:5px;margin:0 2px 18px;}
.ticks i{height:4px;flex:1;background:var(--pale);border-radius:2px;transition:background .3s ease;}
.ticks i.on{background:var(--teal);}
.ticks i.done{background:var(--petrol);}

/* cards + screens */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:32px 30px;box-shadow:var(--shadow);}
.screen{animation:fade .25s ease;}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);font-weight:600;margin:0 0 14px;}
h1{font-weight:600;letter-spacing:-.02em;font-size:clamp(26px,5vw,38px);line-height:1.1;margin:0 0 14px;color:var(--petrol);}
h2{font-weight:600;letter-spacing:-.01em;font-size:clamp(22px,4vw,28px);line-height:1.15;margin:0 0 12px;color:var(--petrol);}
h3{font-weight:600;font-size:18px;margin:0 0 8px;color:var(--petrol);}
.lede{font-size:17px;color:var(--muted);margin:0 0 24px;max-width:56ch;}
.fineprint{font-size:12.5px;color:var(--muted);margin:18px 0 0;}
p{margin:0 0 14px;}

/* buttons */
.btn{appearance:none;border:none;cursor:pointer;font-family:var(--sans);
  background:var(--petrol);color:#fff;font-size:15px;font-weight:500;letter-spacing:.01em;
  padding:14px 24px;border-radius:9px;transition:background .15s ease,transform .05s ease;}
.btn:hover{background:#0a302d;}
.btn:active{transform:translateY(1px);}
.btn[disabled]{opacity:.45;cursor:default;}
.btn.amber{background:var(--amber);color:var(--petrol);font-weight:600;}
.btn.amber:hover{background:#d9a648;}
.btn.ghost{background:transparent;color:var(--petrol);border:1px solid var(--line);}
.btn.ghost:hover{background:var(--paper);}
.link{background:none;border:none;cursor:pointer;font-family:var(--sans);color:var(--muted);font-size:14px;padding:8px 2px;}
.link:hover{color:var(--ink);}
.link[disabled]{opacity:.3;cursor:default;}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:4px;}

/* forms */
.stack{display:grid;gap:16px;}
.field{display:grid;gap:6px;}
.field>span,legend{font-size:14px;font-weight:500;color:var(--ink);}
input,select,textarea{font-family:var(--sans);font-size:15px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:12px 13px;width:100%;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);background:#fff;}
textarea{min-height:120px;resize:vertical;line-height:1.5;}
.err{color:var(--bad);font-size:13.5px;margin:2px 0 0;min-height:1em;}

/* 1–5 scale */
.scale{border:none;padding:0;margin:0;}
.scale-row{display:flex;gap:8px;}
.scale-row button{flex:1;background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:12px 0;font-size:16px;font-weight:500;cursor:pointer;color:var(--ink);}
.scale-row button.sel{background:var(--teal);color:#fff;border-color:var(--teal);}
.scale-ends{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:5px;}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px;}

/* narration player + word-synced caption */
.vo-block{margin:0 0 22px;}
.vo{display:flex;align-items:center;gap:12px;background:var(--pale);border-radius:11px;padding:10px 14px;margin:0 0 12px;}
.vo .vo-play{flex:none;width:38px;height:38px;border-radius:50%;border:none;background:var(--petrol);color:#fff;cursor:pointer;font-size:14px;display:grid;place-items:center;}
.vo .vo-meta{font-size:12.5px;color:var(--muted);line-height:1.3;}
.vo .vo-meta b{color:var(--petrol);font-weight:600;display:block;font-size:13px;}
.vo .vo-switch{margin-left:auto;background:#fff;border:1px solid var(--line);color:var(--petrol);font-size:12.5px;cursor:pointer;font-family:var(--sans);border-radius:20px;padding:7px 13px;}
.vo .vo-switch:hover{background:var(--paper);border-color:var(--teal);}
.caption{font-size:16px;line-height:1.8;}
.mode-read .caption{color:var(--ink);}
.mode-listen .caption{color:var(--muted);}
.caption span{border-radius:3px;padding:0 1px;transition:background .08s ease,color .08s ease;}
.mode-listen .caption span.cap-on{background:var(--amber);color:var(--petrol);}

/* listen / read chooser (welcome) */
.mode-choose{margin-top:22px;}
.mc-q{font-weight:600;color:var(--petrol);font-size:15px;margin:0 0 12px;}
.mode-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.mode-btns button{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;cursor:pointer;font-family:var(--sans);transition:border-color .12s,background .12s,transform .05s;}
.mode-btns button:hover{border-color:var(--teal);background:var(--paper);}
.mode-btns button:active{transform:translateY(1px);}
.mode-btns button .mc-ico{font-size:22px;}
.mode-btns button b{color:var(--petrol);font-size:16px;font-weight:600;}
.mode-btns button .mc-sub{color:var(--muted);font-size:13px;line-height:1.4;}
.mc-note{font-size:12.5px;color:var(--muted);margin:14px 0 0;}
@media (max-width:560px){ .mode-btns{grid-template-columns:1fr;} }

/* single-focus callout under a step */
.note{background:#fff;border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:10px;padding:14px 16px;font-size:14.5px;line-height:1.5;margin-top:16px;color:var(--ink);}
.note b{color:var(--petrol);font-weight:600;}

/* step heading block */
.step-kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);font-weight:600;margin:0 0 10px;}

/* bad vs good columns */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:6px 0 18px;}
.vs.solo{grid-template-columns:1fr;}
.vs .col{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;}
.vs .col .tag{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:9px 14px;color:#fff;}
.vs .bad .tag{background:var(--bad);}
.vs .good .tag{background:var(--good);}
.vs .prompt{font-size:13.5px;background:var(--paper);padding:12px 14px;border-bottom:1px dashed var(--line);color:var(--ink);}
.vs .prompt,.vs .out{transition:box-shadow .2s ease,background .2s ease;}
.cue-on{box-shadow:inset 0 0 0 2px var(--amber),0 0 0 4px rgba(227,180,92,.16);border-radius:6px;position:relative;z-index:1;}
.vs .out.cue-on,.vs .prompt.cue-on{background:#fdf4e6;}
.vs .prompt .lbl,.vs .out .lbl{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;font-weight:500;}
.vs .out{font-size:13.5px;padding:12px 14px;white-space:pre-wrap;color:var(--ink);}
.why{background:var(--pale);border-radius:11px;padding:16px 18px;font-size:14.5px;color:var(--ink);}
.why b{color:var(--petrol);}

/* ingredient builder */
.builder{display:grid;gap:18px;}
.ing-buttons{display:flex;flex-wrap:wrap;gap:8px;}
.ing-buttons button{background:#fff;border:1px solid var(--line);border-radius:20px;padding:8px 15px;font-size:13.5px;cursor:pointer;color:var(--ink);font-family:var(--sans);display:flex;align-items:center;gap:7px;}
.ing-buttons button .n{width:18px;height:18px;border-radius:50%;background:var(--pale);color:var(--petrol);font-size:11px;display:grid;place-items:center;font-weight:600;}
.ing-buttons button.on{background:var(--teal);color:#fff;border-color:var(--teal);}
.ing-buttons button.on .n{background:rgba(255,255,255,.25);color:#fff;}
.prompt-live{background:var(--petrol);color:#eaf2ef;border-radius:12px;padding:18px 18px;font-size:14.5px;line-height:1.6;min-height:96px;}
.prompt-live .seg{opacity:0;max-height:0;overflow:hidden;transition:opacity .3s ease;}
.prompt-live .seg.show{opacity:1;max-height:200px;}
.prompt-live .seg.base{opacity:1;max-height:none;}
.prompt-live .seg.role{color:#ffd98a;}
.prompt-live .seg.context{color:#bfe0d8;}
.prompt-live .seg.task{color:#eaf2ef;}
.prompt-live .seg.format{color:#cfe6de;}
.prompt-live .seg.examples{color:#f3c98a;}
.ing-hint{font-size:13.5px;color:var(--muted);}
.source-note{font-size:13px;color:var(--muted);margin:20px 0 0;border-top:1px solid var(--line);padding-top:14px;line-height:1.5;}
.source-note a{color:var(--teal);text-decoration:none;border-bottom:1px solid var(--pale);white-space:nowrap;}
.source-note a:hover{border-color:var(--teal);}

/* gallery cards */
.gallery{display:grid;gap:12px;}
.gcard{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;}
.gcard>button{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:16px 18px;font-family:var(--sans);color:var(--ink);}
.gcard .gtitle{font-weight:600;color:var(--petrol);font-size:15px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;}
.gcard .gtitle .chev{color:var(--muted);font-size:13px;}
.gcard .pair{display:grid;gap:8px;}
.gcard .mini{font-size:13.5px;padding:10px 12px;border-radius:8px;}
.gcard .mini.bad{background:#fbeee9;border:1px solid #f0d6cc;}
.gcard .mini.good{background:#e7f1ee;border:1px solid #cfe4dd;}
.gcard .mini .lbl{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;display:block;margin-bottom:3px;}
.gcard .mini.bad .lbl{color:var(--bad);}
.gcard .mini.good .lbl{color:var(--good);}
.gcard .gwhy{padding:0 18px 16px;font-size:13.5px;color:var(--muted);}
.gcard .gbody{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.gcard.open .gbody{max-height:600px;}
.gcard .chev{transition:transform .2s ease;}
.gcard.open .chev{transform:rotate(180deg);}

/* diagnose (active practice) */
.diag-q{font-size:14.5px;font-weight:600;color:var(--petrol);margin:20px 0 10px;}
.diag-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px;}
.diag-chips button{background:#fff;border:1px solid var(--line);border-radius:20px;padding:9px 16px;font-size:14px;cursor:pointer;color:var(--ink);font-family:var(--sans);transition:background .12s,border-color .12s,color .12s;}
.diag-chips button:hover{border-color:var(--teal);}
.diag-chips button.on{background:var(--teal);color:#fff;border-color:var(--teal);}
.diag-chips button.correct{background:var(--good);color:#fff;border-color:var(--good);}
.diag-chips button.wrong{background:#fff;color:var(--muted);border-color:var(--line);text-decoration:line-through;}
.diag-chips button:disabled{cursor:default;}
.diag-result{background:var(--pale);border-radius:11px;padding:16px 18px;margin:16px 0;}
.diag-score{font-size:15px;color:var(--petrol);margin-bottom:10px;}
.diag-score b{font-weight:700;}
.diag-tags{display:flex;flex-wrap:wrap;gap:7px;}
.diag-tag{font-size:12.5px;border-radius:16px;padding:5px 11px;font-weight:500;}
.diag-tag.got{background:var(--good);color:#fff;}
.diag-tag.miss{background:#fff;color:var(--bad);border:1px solid #f0d6cc;}
.diag-already{font-size:13px;color:var(--muted);margin-top:12px;}

/* exercise + playground + final */
.panel{border:1px solid var(--line);border-radius:12px;background:#fff;padding:20px;margin:0 0 16px;}
.brief{background:var(--pale);border-radius:11px;padding:16px 18px;font-size:15px;margin:0 0 16px;}
.brief b{color:var(--petrol);}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px;}
.provider-pick{display:flex;flex-wrap:wrap;gap:7px;}
.provider-pick button{background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 13px;font-size:13.5px;cursor:pointer;font-family:var(--sans);color:var(--ink);}
.provider-pick button.on{background:var(--petrol);color:#fff;border-color:var(--petrol);}
.run-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px;}
.ai-out{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-size:14px;white-space:pre-wrap;margin-top:14px;line-height:1.5;}
.ai-out.empty{color:var(--muted);font-weight:300;}
.spinner{display:inline-block;width:15px;height:15px;border:2px solid var(--pale);border-top-color:var(--teal);border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px;}
@keyframes spin{to{transform:rotate(360deg)}}

/* heuristic checklist */
.checklist{display:grid;gap:8px;margin-top:14px;}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;padding:9px 12px;border-radius:9px;background:var(--paper);border:1px solid var(--line);}
.check .mk{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px;color:#fff;font-weight:600;}
.check.ok .mk{background:var(--good);}
.check.no .mk{background:#c9a13a;}
.check .ct b{color:var(--petrol);font-weight:600;}
.check .ct .tip{color:var(--muted);font-size:13px;}
.score-line{font-size:15px;font-weight:500;margin:14px 0 4px;color:var(--petrol);}

/* final grade result */
.grade{display:grid;gap:18px;margin-top:6px;}
.grade-top{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.ring-score{--p:0;width:104px;height:104px;border-radius:50%;flex:none;
  background:conic-gradient(var(--teal) calc(var(--p)*1%), var(--pale) 0);
  display:grid;place-items:center;position:relative;}
.ring-score::before{content:"";position:absolute;inset:11px;background:#fff;border-radius:50%;}
.ring-score span{position:relative;font-size:26px;font-weight:600;color:var(--petrol);}
.ring-score span small{font-size:12px;color:var(--muted);font-weight:400;}
.dims{display:grid;gap:7px;flex:1;min-width:220px;}
.dim{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:center;font-size:13px;}
.dim .bar{height:8px;background:var(--pale);border-radius:4px;overflow:hidden;}
.dim .bar i{display:block;height:100%;background:var(--teal);border-radius:4px;}
.gblock h3{font-size:14px;}
.gblock ul{margin:0;padding-left:18px;font-size:14px;color:var(--ink);}
.gblock ul li{margin-bottom:5px;}
.improved{background:var(--petrol);color:#eaf2ef;border-radius:11px;padding:16px 18px;font-size:14px;white-space:pre-wrap;line-height:1.55;}
.improved .lbl{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-bottom:8px;font-weight:600;}

/* certificate */
.cert-wrap{text-align:center;}
.certificate{border:3px solid var(--petrol);border-radius:14px;padding:38px 30px;background:linear-gradient(180deg,#fff,#f4f8f6);margin:6px 0 18px;position:relative;}
.certificate .ring{width:34px;height:34px;border-width:5px;margin:0 auto 14px;}
.certificate .ck{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);font-weight:600;}
.certificate .cname{font-size:30px;font-weight:600;color:var(--petrol);margin:10px 0 6px;letter-spacing:-.01em;}
.certificate .cdesc{font-size:15px;color:var(--muted);max-width:44ch;margin:0 auto 14px;}
.certificate .cmeta{font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;margin-top:8px;}
.certificate .cscore{color:var(--petrol);font-weight:600;}

.callout{background:var(--pale);border-radius:11px;padding:16px 18px;font-size:14.5px;margin:16px 0 0;}

/* five-ingredient reminder */
.reminder{background:var(--pale);border-radius:11px;padding:16px 18px;margin:0 0 16px;}
.reminder-h{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);font-weight:600;margin:0 0 10px;}
.reminder ul{margin:0;padding-left:18px;font-size:14px;color:var(--ink);}
.reminder ul li{margin-bottom:5px;}
.reminder ul.compact{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.reminder ul.compact li{margin:0;background:#fff;border:1px solid var(--line);border-radius:16px;padding:5px 12px;font-size:13px;}
.cert-wrap .reminder{text-align:left;margin-top:18px;}
.cpass{color:var(--good)!important;font-weight:600;}

.gate-msg{color:var(--bad);font-size:14px;font-weight:500;margin:16px 0 0;padding:11px 14px;background:#fbeee9;border:1px solid #f0d6cc;border-radius:9px;}

/* orientation (welcome) */
.objective{background:var(--pale);border-radius:11px;padding:16px 18px;margin:6px 0 16px;font-size:15px;color:var(--ink);}
.objective-h{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);font-weight:600;margin-bottom:6px;}
.roadmap{border:1px solid var(--line);border-radius:11px;padding:16px 18px;margin:0 0 6px;}
.roadmap-h{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 10px;}
.roadmap ol{margin:0;padding-left:20px;font-size:14.5px;color:var(--ink);}
.roadmap ol li{margin-bottom:5px;}

/* progress label */
.progress-label{font-size:12px;color:var(--muted);margin:-10px 2px 18px;letter-spacing:.02em;}

/* knowledge check */
.quiz{display:grid;gap:22px;}
.qnum{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);font-weight:600;margin:0 0 8px;}
.qtext{font-size:16px;font-weight:500;color:var(--petrol);margin:0 0 12px;line-height:1.4;}
.qopts{display:grid;gap:9px;}
.qopt{text-align:left;background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px 15px;font-size:14.5px;color:var(--ink);font-family:var(--sans);cursor:pointer;transition:border-color .12s,background .12s;}
.qopt:hover{border-color:var(--teal);}
.qopt.sel{border-color:var(--teal);background:var(--paper);}
.qopt.right{background:#e7f1ee;border-color:var(--good);color:var(--petrol);font-weight:500;}
.qopt.wrong{background:#fbeee9;border-color:#f0d6cc;color:var(--bad);}
.qopt:disabled{cursor:default;}

/* certificate extra link */
.cert-extra{text-align:center;font-size:13.5px;color:var(--muted);margin:14px 0 0;}
.cert-extra a{color:var(--teal);text-decoration:none;border-bottom:1px solid var(--pale);}
.cert-extra a:hover{border-color:var(--teal);}

.sitefoot{text-align:center;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:30px;}

[hidden]{display:none!important;}

@media (max-width:600px){
  .card{padding:24px 18px;}
  .vs{grid-template-columns:1fr;}
  .dim{grid-template-columns:96px 1fr;}
  .wrap{padding:16px 14px 60px;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}

/* print — certificate only */
@page{ size: landscape; margin: 12mm; }
@media print{
  html,body{background:#fff;height:auto;}
  .topbar,#progress,.nav,.vo-block,.caption,.sitefoot,.run-row,.fineprint,.restart,.reminder{display:none!important;}
  .wrap{max-width:none;padding:0;margin:0;}
  .card,.screen{border:none;box-shadow:none;padding:0;background:none;}
  .cert-wrap{display:block;min-height:auto;}
  .certificate{
    box-sizing:border-box;max-width:none;width:100%;min-height:90vh;margin:0;
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    padding:6vh 8vw;border-width:4px;border-radius:10px;
  }
  .certificate .ring{width:48px;height:48px;border-width:7px;margin-bottom:22px;}
  .certificate .ck{font-size:15px;}
  .certificate .cname{font-size:clamp(40px,7vw,64px);margin:14px 0 10px;}
  .certificate .cdesc{font-size:clamp(18px,2.4vw,24px);max-width:60ch;margin-bottom:20px;}
  .certificate .cmeta{font-size:15px;}
}