:root{
 --bg:#fbfcfb;--surface:#fff;--ink:#1f2e27;--muted:#6b7b73;--line:#e3e9e5;--soft:#f1f5f2;
 --brand:#2f5d4a;--brand-2:#8fa98c;--accent:#3f7d6a;--accent-soft:#e6f0eb;--warn:#a5692f;--warn-soft:#f8efe4;
 --matter:#5e8fa6;--motion:#c1874c;--energy:#8a7bb5;--life:#5f9a6a;--earth:#4f7fb0;--math:#b0687d;--activity:#8b958f;
 --water:#cfe5e6;--water-line:#7fb0ae;--obj:#d9b07c;--obj-2:#8fb3a3;--obj-stroke:#9a7547;--ground:#c6d0ca;--ray:#d29a3a;--force:#2f5d4a;
 --heat:#e7a46b;--cold:#9cc7de;--acid:#e48a6d;--neutral-ph:#9ccf8f;--base:#7a8fd1;--dark-trait:#5a4636;--light-trait:#e8d3a6;
 --sky:#cfe3f3;--sun:#f2c14e;--night:#2b3550;--earth-fill:#8fb38f;
 --radius:20px;--shadow:0 10px 32px #1f3a2e0d;
 font-family:system-ui,-apple-system,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR','PingFang SC','Microsoft YaHei',sans-serif;
 color:var(--ink);background:var(--bg);font-synthesis:none;-webkit-text-size-adjust:100%;
}
@media (prefers-color-scheme:dark){:root{
 --bg:#121715;--surface:#18201c;--ink:#e6ece8;--muted:#9aaaa2;--line:#2a3530;--soft:#1e2723;
 --brand:#9cc9b2;--brand-2:#6f8f78;--accent:#8cc5ae;--accent-soft:#1f3029;--warn:#e0a86b;--warn-soft:#2c241b;
 --water:#22424a;--water-line:#4f8c8e;--obj:#b8925e;--obj-2:#5f8a79;--obj-stroke:#d6b483;--ground:#3d4a44;--ray:#e4b25a;--force:#a9dcc4;
 --dark-trait:#3a2c22;--light-trait:#cdb889;--sky:#29435a;--sun:#e8b54a;--night:#141a2b;--earth-fill:#4f7350;--shadow:none}}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);min-height:100vh}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:10px 18px;min-height:44px;transition:background .15s,border-color .15s}
button:hover{background:var(--soft)}button:disabled{opacity:.45;cursor:not-allowed}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
a{color:var(--accent)}
.srOnly{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.muted{color:var(--muted);font-size:14px}
/* top bar */
.topbar{display:flex;justify-content:flex-end;padding:14px clamp(12px,3vw,28px)}
nav{display:flex;gap:4px;align-items:center}
.navButton,.iconOnly{border:0;background:transparent;display:inline-flex;align-items:center;gap:6px;color:var(--ink);padding:8px 12px}
.iconOnly{width:44px;padding:0;justify-content:center}
.navButton span{font-size:15px}
@media (max-width:520px){.navButton span{display:none}.navButton{width:44px;padding:0;justify-content:center}}
main{width:min(880px,calc(100% - 32px));margin:0 auto;padding-bottom:64px}
/* search */
.searchStage{padding-top:clamp(56px,16vh,170px);transition:padding .25s ease}
h1{text-align:center;margin:0 0 30px}
.brand{font-size:clamp(46px,7vw,64px);font-weight:700;letter-spacing:-.06em;text-decoration:none;color:var(--brand)}
.brand span{color:var(--brand-2)}
.searching .searchStage{padding-top:4px}.searching .brand{font-size:32px}.searching h1{margin-bottom:16px}
#askForm{display:flex;align-items:center;gap:10px;max-width:680px;margin:0 auto;border:1px solid var(--line);background:var(--surface);border-radius:32px;padding:6px 8px 6px 20px;box-shadow:var(--shadow);transition:border-color .2s}
#askForm:focus-within{border-color:var(--accent)}
.searchIcon{color:var(--muted);display:flex}
#question{border:0;outline:0;min-width:0;flex:1;padding:12px 0;font-size:17px;background:transparent}
#question::placeholder{color:var(--muted)}
.searchSubmit{border:0;width:44px;min-width:44px;height:44px;padding:0;display:grid;place-items:center;background:var(--accent-soft);color:var(--brand)}
.ghostIcon{border:0;background:transparent;width:44px;height:44px;padding:0;display:inline-grid;place-items:center}
.ghostIcon.small{width:36px;height:36px;min-height:36px}
.aiToggle{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:12px;font-size:13px;color:var(--muted)}
#status{text-align:center;font-size:14px;color:var(--warn);margin:10px 0}#status:empty{display:none}
.continueLine{display:flex;gap:8px;align-items:center;margin:18px auto 0;border:0;background:transparent;color:var(--muted);font-size:15px}
.continueLine strong{color:var(--ink);font-weight:600}
/* surfaces */
.surface{position:relative;margin-top:22px;padding:clamp(18px,4vw,30px);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);animation:reveal .22s ease-out}
.surface:focus{outline:none}
@keyframes reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
h2{font-size:clamp(20px,3vw,24px);letter-spacing:-.02em;margin:0 0 10px;line-height:1.3}
h3{font-size:17px;margin:0 0 4px}
.eyebrow{margin:0 0 4px;font-size:13px;color:var(--muted);letter-spacing:.02em}
.fieldLabel{display:block;font-size:13px;color:var(--muted);margin:16px 0 8px;font-weight:600}
.close{position:absolute;right:10px;top:10px}
.origin{color:var(--muted);font-size:14px;margin:0 0 10px}
.tag{display:inline-block;font-size:12px;padding:3px 10px;border-radius:999px;background:var(--accent-soft);color:var(--brand)}
.tag.muted{background:var(--soft);color:var(--muted)}
.chip{font-size:12px;padding:4px 10px;border-radius:999px;background:var(--soft);color:var(--muted)}
.chip.ok{background:var(--accent-soft);color:var(--brand)}.chip.warn{background:var(--warn-soft);color:var(--warn)}
.primary{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.primary:hover{background:var(--accent)}
@media (prefers-color-scheme:dark){.primary{color:#10201a}}
.wide{width:100%;margin-top:18px}
.pill{padding:6px 14px;min-height:36px;font-size:14px}
.pill.on{background:var(--accent-soft);border-color:var(--accent);color:var(--brand)}
.quiet{border:0;background:transparent;color:var(--muted);margin-top:14px}
.linkButton{border:0;background:transparent;color:var(--accent);display:inline-flex;align-items:center;gap:6px;padding-left:0}
.hint{font-size:14px;color:var(--muted);margin:8px 0 0}.hint:empty{display:none}
.notice{background:var(--soft);border-radius:14px;padding:12px 14px;font-size:15px}
/* answer */
.answer{padding-right:clamp(18px,6vw,56px)}
.answer .conversation{padding-right:24px}
.aiAnswer{font-size:18px;line-height:1.6;margin:6px 0 14px}
.turn{border-left:3px solid var(--line);padding-left:12px;margin:8px 0}.turn p{margin:0;color:var(--muted)}
.questionLanguage{margin:4px 0 14px}.englishQuestion{font-size:16px;color:var(--brand);margin:0 0 6px}
.verbs{display:flex;flex-wrap:wrap;gap:6px}
.verb summary,.fold summary{cursor:pointer}
.verb{background:var(--soft);border-radius:12px;padding:4px 10px;font-size:14px}.verb p{margin:4px 0}
.reply label{display:block;font-weight:600;margin:6px 0 8px}.replyRow{display:flex;gap:8px}.replyRow input{flex:1;min-width:0}
input:not([type=checkbox]):not([type=range]),select,textarea{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface);min-height:44px;width:100%}
.candidates{display:grid;gap:4px}
.candidate{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.candidate p{margin:2px 0;color:var(--muted);font-size:14px}
@media (max-width:520px){.candidate{grid-template-columns:40px 1fr}.candidate .primary{grid-column:1/-1}}
.labMark{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff;background:var(--activity)}
.labMark.matter{background:var(--matter)}.labMark.motion{background:var(--motion)}.labMark.energy{background:var(--energy)}.labMark.life{background:var(--life)}.labMark.earth{background:var(--earth)}.labMark.math{background:var(--math)}
/* studio */
.studioHead{display:flex;gap:8px;align-items:flex-start;margin:-6px 0 8px -10px}
.studioGrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;margin-top:10px}
@media (max-width:760px){.studioGrid{grid-template-columns:1fr}}
.stageCard{background:var(--soft);border-radius:18px;padding:12px;align-self:start}
.stageTop{display:flex;justify-content:space-between;align-items:center}
.scene{width:100%;height:auto;display:block}
.conditions{font-size:14px;margin:6px 4px 0}.fixed{font-size:13px;color:var(--muted);margin:4px 4px 0}
.prediction{border:0;padding:0;margin:0}.prediction legend{font-weight:600;margin-bottom:8px}.prediction small{color:var(--muted)}
.segmented{display:flex;flex-wrap:wrap;gap:6px}
.segmented button{padding:8px 14px;min-height:40px;font-size:14px}
.segmented button.on{background:var(--brand);border-color:var(--brand);color:#fff}
@media (prefers-color-scheme:dark){.segmented button.on{color:#10201a}}
.presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.field{margin-top:4px}.field .fieldLabel{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.unit{font-weight:400}.badge{color:var(--accent);font-weight:400}
.numberRow{display:grid;grid-template-columns:1fr 110px;gap:10px;align-items:center}
.numberRow input[type=number]{text-align:right}
input[type=range]{width:100%;accent-color:var(--accent);min-height:32px}
.results{margin-top:6px}.results:empty{display:none}
.outcome{margin-top:22px;padding:18px;border-radius:18px;border:1px solid var(--line)}
.outcome.isPreview{border-style:dashed}
.headline{font-size:22px;font-weight:700;margin:0 0 6px}
.english{font-size:17px;color:var(--brand);margin:0 0 8px}
.detail{font-size:16px;margin:0 0 8px;font-variant-numeric:tabular-nums}
.myPrediction{font-size:14px;color:var(--muted);margin:0 0 10px}
.metrics{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.metric{background:var(--soft);border-radius:14px;padding:10px 12px;display:grid;gap:2px}
.metric span{font-size:13px;color:var(--muted)}.metric strong{font-size:18px}.metric small{font-size:12px;color:var(--muted)}
.compare{margin-top:12px;padding:12px 14px;border-left:3px solid var(--accent)}.compare p{margin:4px 0 0;font-size:14px;color:var(--muted)}
.trialRow .trials{display:flex;flex-wrap:wrap;gap:6px}
.fold{border-top:1px solid var(--line);padding:12px 0}.fold summary{font-weight:600}.fold textarea{margin:10px 0 8px}
.words{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:10px 0 0}.words dt{font-weight:700;color:var(--brand)}.words dd{margin:0}
@media (max-width:420px){.words{grid-template-columns:1fr}.words dd{margin-bottom:6px}}
.formula{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--soft);padding:8px 10px;border-radius:10px;overflow-x:auto}
.nextBox{margin-top:8px;display:grid;gap:8px}
.nextCard{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;border-radius:16px;padding:14px 16px;width:100%}
.nextCard span{display:grid;gap:2px}.nextCard small{color:var(--muted)}
.nextCard.hero{background:var(--accent-soft);border-color:transparent;margin:6px 0 10px}
/* CLIL frames & tables */
.english.small{font-size:14px;margin:8px 0 0}
.frame{font-size:18px;color:var(--brand);margin:10px 0}
.wordBank{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.fold input[lang=en]{margin-top:10px}
.tableWrap{overflow-x:auto;margin-top:10px;-webkit-overflow-scrolling:touch}
.trialTable{border-collapse:collapse;font-size:13px;min-width:100%}
.trialTable th,.trialTable td{padding:6px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.trialTable th{color:var(--muted);font-weight:600}.trialTable th:first-child,.trialTable td:first-child{text-align:left}
.trialTable tr.on td{background:var(--accent-soft)}.trialTable tr.clickable{cursor:pointer}.trialTable tr.clickable:hover td{background:var(--soft)}
/* path & free lab */
.viewHead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.unit{margin-top:18px}.unit h3{font-size:15px;color:var(--muted)}
.steps{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:6px}
.step{width:100%;display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;text-align:left;border-radius:16px;padding:8px 12px 8px 8px}
.step.isNext{border-color:var(--accent);background:var(--accent-soft)}
.stepText{display:grid}.stepText small{color:var(--muted)}
.tried{font-size:12px;color:var(--muted)}
.filters{margin:12px 0}
.labGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.labCard{display:grid;gap:6px;justify-items:start;text-align:left;border-radius:18px;padding:16px}
.labCard span{color:var(--muted);font-size:14px;line-height:1.4}
/* activity */
.facts{display:grid;gap:4px}.facts dt{font-weight:600;margin-top:10px}.facts dd{margin:0;color:var(--muted)}
.activity textarea{margin:6px 0 10px}.activity small[role=status]{margin-left:12px}.sources{padding-left:18px;font-size:14px}
/* dialogs & notebook */
dialog{border:0;border-radius:var(--radius);padding:0;width:min(560px,calc(100% - 24px));max-height:88vh;background:var(--surface);color:var(--ink);box-shadow:0 20px 60px #0003}
dialog::backdrop{background:#1f2e2740}
dialog form,.dialogBody{padding:24px;display:grid;gap:6px}
dialog label{font-weight:600;font-size:14px;margin-top:8px}dialog small{color:var(--muted)}
.dialogActions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.notebookHead{display:flex;gap:8px;align-items:center}.notebookHead h2{flex:1;margin:0}
.entry{border-top:1px solid var(--line);padding:14px 0;display:grid;gap:6px}
.runLine{text-align:left;border-radius:12px;font-size:14px;padding:8px 12px}
pre{white-space:pre-wrap;word-break:break-word;font-size:12px;max-height:240px;overflow:auto}
/* scene palette (used by public/scenes). Stroke-only rules come first so a combined
   "fill + stroke" class pair keeps its fill (later rule wins at equal specificity). */
.scene .sc-ground,.scene .sc-frame{stroke:var(--ground);fill:none}
.scene .sc-waterline{stroke:var(--water-line);fill:none}
.scene .sc-obj-stroke{stroke:var(--obj-stroke);fill:none}
.scene .sc-accent{stroke:var(--accent);fill:none}
.scene .sc-force{stroke:var(--force);fill:none}.scene .sc-ray{stroke:var(--ray);fill:none}
.scene .sc-ghost{stroke:var(--muted);fill:none;stroke-dasharray:5 5}
.scene .sc-water{fill:var(--water)}
.scene .sc-obj{fill:var(--obj)}.scene .sc-obj2{fill:var(--obj-2)}
.scene .sc-accent-fill{fill:var(--accent)}.scene .sc-muted{fill:var(--ground)}
.scene .sc-label{fill:var(--muted);font-size:13px;font-family:system-ui,sans-serif}
.scene .sc-heat{fill:var(--heat)}.scene .sc-cold{fill:var(--cold)}
.scene .sc-acid{fill:var(--acid)}.scene .sc-neutral{fill:var(--neutral-ph)}.scene .sc-base{fill:var(--base)}
.scene .sc-dark{fill:var(--dark-trait)}.scene .sc-light{fill:var(--light-trait)}
.scene .sc-sky{fill:var(--sky)}.scene .sc-sun{fill:var(--sun)}.scene .sc-night{fill:var(--night)}.scene .sc-earth{fill:var(--earth-fill)}