/* The island fills the available screen; controls stay in native CSS pixels. */
body.lesson-project-open{background:#489cce;padding-bottom:0!important;min-height:0;overflow:hidden}
.lesson-project-open :is(.ic-head,#lpBack,#lpReview,footer,.scope,.strands){display:none!important}
.lesson-project-open main,.lesson-project-open :is(#trail,#metro,#climb){margin:0!important;padding:0!important;max-width:none!important;width:auto!important}
.cp-app{--cp-ink:#19374b;--cp-muted:#516c78;--cp-paper:#fffaf0;--cp-purple:#8062c4;--cp-green:#3c8968;
  position:fixed;inset:0 0 var(--cp-dock,86px) var(--dw-nav-inset,0px);height:var(--cp-height,calc(100dvh - 86px));
  color:var(--cp-ink);font-family:'Zen Kaku Gothic New',sans-serif;display:grid;
  grid-template-rows:auto auto auto minmax(80px,1fr) auto;isolation:isolate;overflow:auto;overscroll-behavior:contain;
  background:linear-gradient(#fffaf0 0 95px,#489cce 165px)}
.cp-app *{box-sizing:border-box}
.cp-app button,.cp-app a{font:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.cp-app button{cursor:pointer}
.cp-app a{text-decoration:none;color:inherit}
.cp-app svg{width:22px;height:22px;flex:none}
.cp-app button:disabled{cursor:default}
.cp-app :is(button,a):focus-visible{outline:3px solid #7543b1;outline-offset:3px}
.cp-header,.cp-context,.cp-goal,.cp-panel{width:min(100%,540px);margin-inline:auto;position:relative;z-index:2}
.cp-header{color:var(--cp-ink);display:flex;align-items:center;gap:10px;min-height:56px;padding:calc(5px + env(safe-area-inset-top,0px)) 14px 3px;background:var(--cp-paper)}
.cp-back,.cp-arrow{display:grid;place-items:center;width:44px;height:44px;border:0;background:transparent;color:var(--cp-ink);flex:none;border-radius:14px}
.cp-back:hover,.cp-arrow:not(:disabled):hover{background:#e7ece7}
.cp-brand{display:flex;flex-direction:column;gap:1px;margin-right:auto;line-height:1.1}
.cp-brand b{letter-spacing:2.4px;font-family:'Atkinson Hyperlegible',sans-serif;font-size:16px}
.cp-brand span{font-family:'Atkinson Hyperlegible',sans-serif;font-size:11px;letter-spacing:.4px;color:var(--cp-muted)}
.cp-wallet{display:flex;gap:5px;align-items:center;font-size:16px;font-weight:700;padding:7px 9px;background:#f5eee1;border:1px solid #e8ddc9;border-radius:12px;line-height:1.2}
.cp-wallet svg{width:23px;height:23px}
.cp-context{display:flex;align-items:center;padding:0 14px;min-height:44px;gap:6px}
.cp-arrow{height:44px;width:44px;color:#496a7c}
.cp-arrow:disabled{opacity:.28}
.cp-module{min-width:0;min-height:44px;flex:1;border:0;background:transparent;color:var(--cp-ink);font-weight:700!important;display:flex;justify-content:center;align-items:center;gap:8px;padding:4px 6px;line-height:1.25;border-radius:12px}
.cp-module span{min-width:0;overflow-wrap:anywhere}
.cp-module svg{width:15px;height:15px}
.cp-goal{width:min(calc(100% - 28px),512px);padding:11px 14px;display:flex;align-items:center;gap:11px;border:1px solid #f0e7d4;background:#fffaf0f5;border-radius:18px;box-shadow:0 3px 0 #184f6320;margin-top:7px;margin-bottom:0}
.cp-goal>svg{width:29px;height:29px;color:#a16b47}
.cp-goal>div{min-width:0;flex:1}
.cp-eyebrow{display:block;font:700 10px 'Atkinson Hyperlegible','Zen Kaku Gothic New',sans-serif;letter-spacing:1.2px;color:#75828a;margin-bottom:3px}
.cp-goal h1{font-family:inherit;font-size:16px;line-height:1.3;margin:0;color:var(--cp-ink);overflow-wrap:anywhere;font-weight:700}
.cp-count{white-space:nowrap;font:400 15px 'Atkinson Hyperlegible',sans-serif;color:var(--cp-muted)}
.cp-count b{color:var(--cp-ink);font-size:23px;font-family:system-ui,sans-serif;font-variant-numeric:tabular-nums}
.cp-hero{position:relative;min-height:80px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-top:-4px}
.cp-scene{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.cp-scene canvas{display:block;width:100%;height:100%}
.cp-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.cp-greet{position:absolute;right:12px;bottom:6px;min-width:80px;min-height:44px;border:1px solid #ffffffa8;border-radius:16px;background:#fffaf0ee;color:#715496;font-size:11px!important;font-weight:700!important;padding:8px 10px;box-shadow:0 2px 8px #24496320}
.cp-greet:hover{background:#fffaf0}
.cp-greet[hidden]{display:none}
.cp-scene-caption{position:absolute;bottom:9px;left:12px;max-width:calc(100% - 116px);font-size:11px;font-weight:700;letter-spacing:.4px;color:#224455;background:#fffaf0f2;border:1px solid #ffffff9c;border-radius:50px;padding:6px 14px;box-shadow:0 2px 9px #134e6d18;text-align:center;line-height:1.35}
.cp-panel{background:var(--cp-paper);border-radius:26px 26px 0 0;padding:7px 14px 10px;box-shadow:0 -5px 20px #144b5e12}
.cp-stops{position:relative;display:grid;grid-template-columns:repeat(var(--cp-stops),minmax(0,1fr));gap:2px;padding:1px 0 8px}
.cp-stop{position:relative!important;min-width:0;min-height:62px;display:flex;align-items:center;flex-direction:column;gap:4px;line-height:1.1;padding:4px 0 2px;border-radius:12px;font-size:12px!important;text-align:center}
.cp-stop::before{content:'';position:absolute;height:3px;background:#dce3de;left:-50%;right:50%;top:21px;z-index:0}
.cp-stop:first-child::before{display:none}
.cp-stop.done::before,.cp-stop.active::before{background:#71ad8c}
.cp-stop-dot{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:2px solid #fffdf6;background:#e5eae5;box-shadow:0 0 0 1px #d0d9d2;color:#697c7d;font:700 16px 'Atkinson Hyperlegible',sans-serif;z-index:1}
.cp-stop.done .cp-stop-dot{background:var(--cp-green);color:white;box-shadow:0 0 0 1px #9dc4a6}
.cp-stop.active .cp-stop-dot{background:var(--cp-purple);color:#fff;box-shadow:0 0 0 3px #dfd2f2,0 3px 9px #67409624}
.cp-stop.locked{color:#708183}
.cp-stop.active .cp-stop-label{color:#654396;font-weight:700}
.cp-stop-label{position:relative;max-width:100%;overflow-wrap:anywhere;line-height:1.3;min-height:13px}
.cp-stars{display:flex;gap:1px;line-height:1;color:#d5dbd3;font-size:8px;min-height:8px}
.cp-stars .earned{color:#92622a}
.cp-actions{border-top:1px solid #e7e4d8;padding-top:10px}
.cp-next{margin:0;text-align:center;font-size:13px;font-weight:700;line-height:1.45;overflow-wrap:anywhere}
.cp-lesson-title{margin:4px 0 0;text-align:center;font:400 11px 'Atkinson Hyperlegible','Zen Kaku Gothic New',sans-serif;color:var(--cp-muted);line-height:1.3;overflow-wrap:anywhere}
.cp-lesson-title span{white-space:nowrap;margin-left:5px}
.cp-primary{display:flex;align-items:center;justify-content:center;gap:10px;position:relative;background:#13849c;color:#fff!important;border:1px solid #047287;border-radius:17px;min-height:48px;line-height:1.3;padding:10px 32px;margin-top:9px;font-size:16px!important;font-weight:700!important;box-shadow:inset 0 1px 0 #ffffff35,0 3px 0 #17637a;transition:background .15s,transform .15s}
.cp-primary svg{position:absolute;right:12px;width:18px}
.cp-primary:hover{background:#0d748c}
.cp-primary:active{transform:translateY(2px);box-shadow:inset 0 1px 0 #ffffff35,0 1px 0 #17637a}
.cp-tools{display:flex;gap:6px;align-items:center;margin-top:8px;min-height:44px}
.cp-quiet{display:flex;align-items:center;justify-content:center;gap:5px;min-height:44px;min-width:44px;border:1px solid #e1e2d8;border-radius:13px;background:#fffdf7;color:#3c5867!important;padding:7px 9px;font-size:11px!important;white-space:normal;line-height:1.2;flex:1;font-weight:700!important}
.cp-quiet svg{width:18px;height:18px}
.cp-quiet.on{background:#e7def6;color:#573b88!important;border-color:#b49ad6}
.cp-reward{min-height:44px;min-width:66px;display:flex;align-items:center;gap:3px;justify-content:center;border:0;border-radius:13px;padding:6px;background:transparent;color:#985735;font:700 14px 'Atkinson Hyperlegible',sans-serif!important}
.cp-reward svg{width:26px;height:26px}
.cp-reward.opened{font-size:10px!important;color:#56685f}
.cp-reward.claimable{background:#f4e5d4;box-shadow:inset 0 0 0 1px #c99b72}
.cp-locked-note{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;min-height:48px;margin-top:9px;line-height:1.5;padding:5px 12px;background:#edeedf;border-radius:14px}
.cp-app[data-project-celebrate] .cp-scene-caption{animation:cp-arrival .7s ease-out both;background:#fffaf0;color:#346b50}
/* the first-paint still (founder ruling 2026-09-21): above the canvas until scene-ready, then fades out */
.cp-still{z-index:1;transition:opacity .55s ease-out}
.cp-still.cp-fade{opacity:0;pointer-events:none}
.cp-art-previous{z-index:1;transition:opacity 1.1s ease-in-out}
.cp-art-previous.cp-fade{opacity:0}
@keyframes cp-arrival{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@media(min-width:880px){
  .cp-app{grid-template-columns:minmax(0,1fr) minmax(310px,400px);grid-template-rows:auto auto minmax(0,1fr);padding:18px 24px 24px;gap:0 24px;background:#489cce}
  .cp-header{grid-column:1/-1;width:100%;max-width:1080px;background:#fffaf0;border-radius:20px;padding:8px 14px;min-height:60px}
  .cp-context{grid-column:2;grid-row:2;margin-top:14px;background:#fffaf0;border-radius:17px 17px 0 0;width:100%;padding:2px 8px}
  .cp-goal{grid-column:1;grid-row:2;width:min(100%,440px);margin-top:14px;align-self:center}
  .cp-hero{grid-column:1;grid-row:3;min-height:220px;margin:0 -24px 0 -20px}
  .cp-scene{mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
  .cp-panel{grid-column:2;grid-row:3;border-radius:0 0 24px 24px;align-self:start;width:100%;padding:14px 18px 18px;box-shadow:0 12px 30px #17597720}
  .cp-stops{padding:16px 0 22px}
  .cp-stop{font-size:12px!important}
  .cp-next{font-size:16px;padding:10px 0 6px}
  .cp-primary{min-height:54px;margin-top:16px}
  .cp-tools{margin-top:14px}
}
@media(max-width:879px) and (max-height:720px){

  .cp-header{min-height:48px;padding-top:env(safe-area-inset-top,0px)}
  .cp-goal{padding:7px 12px;margin-top:2px;border-radius:15px}
  .cp-goal h1{font-size:14px}.cp-eyebrow{font-size:9px;margin-bottom:1px}
  .cp-panel{padding-top:4px;padding-bottom:4px}.cp-stops{padding-bottom:4px}.cp-stop{min-height:56px}
  .cp-actions{padding-top:6px}.cp-next{font-size:12px}.cp-primary{min-height:44px;margin-top:6px;font-size:15px!important}
  .cp-tools{margin-top:5px}.cp-lesson-title{margin-top:2px;font-size:10px}.cp-scene-caption{bottom:5px;padding:4px 10px;font-size:10px}
}
@media(max-width:359px){.cp-header,.cp-context{padding-inline:8px}.cp-panel{padding-inline:9px}.cp-goal{width:calc(100% - 18px);gap:8px}.cp-goal h1{font-size:14px}.cp-quiet{padding-inline:5px;font-size:10px!important}.cp-reward{min-width:58px}}
@media(max-width:879px) and (orientation:landscape) and (max-height:500px){
  .cp-app{grid-template-columns:1fr 1fr;grid-template-rows:auto auto minmax(110px,1fr);column-gap:12px;padding:0 12px}
  .cp-header{grid-column:1;grid-row:1}.cp-context{grid-column:2;grid-row:1}
  .cp-goal{grid-column:1;grid-row:2;width:100%}.cp-hero{grid-column:1;grid-row:3;margin:0 -12px}
  .cp-panel{grid-column:2;grid-row:2/4;align-self:center;border-radius:20px;padding:5px 10px}
  .cp-scene-caption{display:none}.cp-open-count{display:none}
}
@media(prefers-reduced-motion:reduce){.cp-app *, .cp-app *::before{animation:none!important;transition:none!important}}

/* Course identity follows the residents while the shell remains shared. */
.cp-app[data-project-track="business"]{--cp-purple:#327da9}
.cp-app[data-project-track="toeic"]{--cp-purple:#94602c}
.cp-app[data-project-track="business"] :is(.cp-greet,.cp-stop.active .cp-stop-label){color:#286586}
.cp-app[data-project-track="toeic"] :is(.cp-greet,.cp-stop.active .cp-stop-label){color:#80532c}
.cp-app[data-project-track="business"] .cp-stop.active .cp-stop-dot{box-shadow:0 0 0 3px #c9e4f2}
.cp-app[data-project-track="toeic"] .cp-stop.active .cp-stop-dot{box-shadow:0 0 0 3px #f3d99a}
/* The seven-lesson vocabulary module keeps all seven 44px targets. */
.cp-app[data-project-total="7"] .cp-stops{grid-template-columns:repeat(7,minmax(0,1fr))}
@media(max-width:369px){
 .cp-app[data-project-total="7"] .cp-stops{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:0}
 .cp-app[data-project-total="7"] .cp-stop{min-height:44px;flex-direction:row;justify-content:center;flex-wrap:wrap;gap:2px;padding:3px 1px}
 .cp-app[data-project-total="7"] .cp-stop::before{display:none}
 .cp-app[data-project-total="7"] .cp-stop-dot{width:24px;height:24px;font-size:12px}
 .cp-app[data-project-total="7"] .cp-stop-label{font-size:10px}
 .cp-app[data-project-total="7"] .cp-stars{width:100%;justify-content:center;font-size:7px}
}