:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}body{margin:0;font-size:14px}[hidden]{display:none!important}
#home{text-decoration:none;color:var(--ink)}

/* Layout: full-screen 3D world; HUD chips on top edge, lesson sheet slides up from bottom (right side on wide screens) */
:root{
  --paper:#ffffff; --ink:#34425a; --ink-soft:#6b7a90;
  --pink:#f2877e; --pink-soft:#fde8e5; --blue:#5fa8ea; --blue-soft:#e4f1fd;
  --mint:#6fcca0; --butter:#ffd86a; --lav:#cfe0f3; --lav-soft:#eef4fb; --line:rgba(52,66,90,.16);
  --shadow:#ffb3c9; --accent:#ff9ebb; --accent-soft:#ffe1ea;
  --f-display:"LXGW WenKai TC","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --f-body:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{background:#cfe6fd;color:var(--ink);font-family:var(--f-body);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
#gl{position:fixed;inset:0;width:100%;height:100%;touch-action:none;display:block}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

.chip{background:var(--paper);border:1.5px solid var(--line,rgba(52,66,90,.16));border-radius:999px;padding:7px 14px;box-shadow:0 4px 14px rgba(40,64,100,.14);font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:6px}
#hud{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));display:flex;justify-content:space-between;align-items:center;gap:8px;pointer-events:none;z-index:5}
#hud > *{pointer-events:auto}
#brand{font-family:var(--f-display);font-size:16px}
#brand b{background:var(--lav);border:1.5px solid var(--line,rgba(52,66,90,.16));border-radius:8px;padding:0 6px;font-family:var(--f-mono);font-size:12px}
.hud-r{display:flex;gap:8px}
#prog{font-family:var(--f-mono)}

#go{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 22px);z-index:5;background:var(--butter);border:1.5px solid var(--line,rgba(52,66,90,.16));border-radius:18px;padding:12px 20px;box-shadow:0 4px 14px rgba(40,64,100,.14);font-family:var(--f-display);font-size:17px;font-weight:700;white-space:nowrap;animation:bob 1.6s ease-in-out infinite}
#go small{display:block;font-family:var(--f-body);font-weight:500;font-size:11px;color:var(--ink-soft)}
@keyframes bob{50%{transform:translate(-50%,-4px)}}
#hint{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 62px);z-index:4;font-size:12px;background:rgba(255,251,247,.88);border:1.5px solid var(--line,rgba(52,66,90,.16));border-radius:12px;padding:6px 12px;white-space:nowrap;pointer-events:none;transition:opacity .6s}

#joy{position:fixed;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:1.5px solid var(--line,rgba(52,66,90,.16));background:rgba(205,188,242,.35);z-index:4;pointer-events:none}
#knob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--accent);border:1.5px solid var(--line,rgba(52,66,90,.16));box-shadow:0 2px 8px rgba(40,64,100,.14)}

/* start overlay */
#start{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px max(16px,env(safe-area-inset-right,0px)) 20px max(16px,env(safe-area-inset-left,0px));background:linear-gradient(180deg,rgba(255,217,232,.75),rgba(205,188,242,.75));backdrop-filter:blur(3px)}
.card{background:var(--paper);border:1.5px solid var(--line,rgba(52,66,90,.16));border-radius:22px;box-shadow:0 4px 14px rgba(40,64,100,.14);padding:24px 22px;max-width:420px;width:100%}
.card .eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--ink-soft)}
.card h1{font-family:var(--f-display);font-size:38px;line-height:1.1;margin:6px 0 10px;text-wrap:balance}
.card h1 span{background:linear-gradient(transparent 60%,var(--butter) 60%)}
.card p{font-size:14px;line-height:1.7;margin:0 0 14px}
.keys{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;font-size:13px;margin:0 0 18px}
.keys dt{font-family:var(--f-mono);font-weight:700;background:var(--lav-soft);border:1.5px solid var(--line,rgba(52,66,90,.16));border-radius:6px;padding:1px 6px;text-align:center}
.keys dd{margin:0;align-self:center}
.big{width:100%;background:var(--accent);border:1.5px solid var(--line,rgba(52,66,90,.16));border-radius:16px;padding:13px;font-family:var(--f-display);font-size:20px;font-weight:700;box-shadow:0 4px 14px rgba(40,64,100,.14)}
.big:active{transform:translate(2px,2px);box-shadow:0 2px 8px rgba(40,64,100,.14)}

/* chapter drawer */
#drawer{position:fixed;inset:0;z-index:15;background:rgba(52,66,90,.28);display:grid;place-items:center;padding:16px max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px))}
#drawer .card{max-height:86vh;overflow:auto;max-width:560px}
#drawer h2{font-family:var(--f-display);font-size:24px;margin:0 0 12px;display:flex;justify-content:space-between;align-items:center}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ch{text-align:left;background:var(--lav-soft);border:1.5px solid var(--line,rgba(52,66,90,.16));border-radius:14px;padding:10px 12px;display:flex;gap:10px;align-items:center;min-width:0}
.ch:hover{background:var(--pink-soft)}
.ch .n{font-family:var(--f-mono);font-weight:700;font-size:13px;background:var(--paper);border:1.5px solid var(--line,rgba(52,66,90,.16));border-radius:50%;width:34px;height:34px;display:grid;place-items:center;flex:none}
.ch.done .n{background:var(--butter)}
.ch .t{font-family:var(--f-display);font-weight:700;font-size:15px;line-height:1.2}
.ch .s{font-size:11px;color:var(--ink-soft)}
.x{background:var(--paper);border:1.5px solid var(--line,rgba(52,66,90,.16));border-radius:10px;width:36px;height:36px;font-size:18px;line-height:1;flex:none}

/* lesson sheet */
#sheet{position:fixed;left:0;right:0;bottom:0;height:56%;z-index:10;background:var(--paper);border-top:1.5px solid var(--line,rgba(52,66,90,.16));border-radius:24px 24px 0 0;box-shadow:0 -6px 24px rgba(40,64,100,.14);display:flex;flex-direction:column;transition:height .35s ease}
#sheet.mini{height:30%}
#sheet header{display:flex;align-items:center;gap:10px;padding:12px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));border-bottom:2px dashed var(--lav)}
#sheet .no{font-family:var(--f-mono);font-weight:700;font-size:12px;background:var(--lav);border:1.5px solid var(--line,rgba(52,66,90,.16));border-radius:8px;padding:2px 7px;flex:none}
#sheet h2{font-family:var(--f-display);font-size:22px;margin:0;flex:1;min-width:0;line-height:1.15}
#sheet h2 small{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;color:var(--ink-soft);font-weight:500}
#sbody{overflow-y:auto;padding:14px max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 20px) max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:14px;-webkit-overflow-scrolling:touch;user-select:text;-webkit-user-select:text}
.sum{margin:0;font-size:14px;line-height:1.75;max-width:62ch}
.formula{font-family:var(--f-mono);font-size:13.5px;background:var(--blue-soft);border:1.5px solid var(--line,rgba(52,66,90,.16));border-radius:12px;padding:9px 12px;line-height:1.8;overflow-x:auto}
.formula i{font-style:italic;font-family:"Times New Roman",serif;font-size:16px}
.ctrls{display:flex;flex-direction:column;gap:12px}
.rg label{display:flex;justify-content:space-between;font-size:13px;font-weight:700;margin-bottom:4px}
.rg output{font-family:var(--f-mono);background:var(--butter);border:1.5px solid var(--line,rgba(52,66,90,.16));border-radius:6px;padding:0 6px;font-variant-numeric:tabular-nums}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:26px;background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:6px;background:var(--lav-soft);border:1.5px solid var(--line,rgba(52,66,90,.16))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--accent);border:1.5px solid var(--line,rgba(52,66,90,.16));margin-top:-10px;box-shadow:0 2px 8px rgba(40,64,100,.14)}
input[type=range]::-moz-range-track{height:8px;border-radius:6px;background:var(--lav-soft);border:1.5px solid var(--line,rgba(52,66,90,.16))}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--pink);border:1.5px solid var(--line,rgba(52,66,90,.16))}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips .lb{width:100%;font-size:13px;font-weight:700}
.chips button{background:var(--paper);border:1.5px solid var(--line,rgba(52,66,90,.16));border-radius:999px;padding:5px 12px;font-size:13px}
.chips button[aria-pressed=true]{background:var(--mint);box-shadow:0 2px 8px rgba(40,64,100,.14);font-weight:700}
.dia{width:100%;height:240px;display:block;background:#fff;border:1.5px solid var(--line,rgba(52,66,90,.16));border-radius:14px}
.read{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.kv{background:var(--lav-soft);border:1.5px solid var(--line,rgba(52,66,90,.16));border-radius:10px;padding:6px 10px;min-width:0}
.kv span{display:block;font-size:11px;color:var(--ink-soft)}
.kv b{font-family:var(--f-mono);font-size:15px;font-variant-numeric:tabular-nums}
.kv.hot{background:var(--pink-soft)}
.tbl{overflow-x:auto;border:1.5px solid var(--line,rgba(52,66,90,.16));border-radius:12px;grid-column:1/-1}
.tbl table{border-collapse:collapse;width:100%;font-size:12px;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{padding:5px 8px;border-bottom:1px solid var(--lav);text-align:right;white-space:nowrap}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl thead th{background:var(--lav-soft);font-weight:700}
.tbl td{font-family:var(--f-mono)}
.tbl tr.sum td{background:var(--butter);font-weight:700}
.t{color:#2f7fd6}.c{color:#d6467a}
.quiz{border:1.5px solid var(--line,rgba(52,66,90,.16));border-radius:16px;padding:12px 14px;background:var(--accent-soft)}
.quiz h3{margin:0 0 8px;font-family:var(--f-display);font-size:16px}
.quiz .q{font-size:14px;margin:0 0 10px;line-height:1.6}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts button{background:var(--paper);border:1.5px solid var(--line,rgba(52,66,90,.16));border-radius:12px;padding:7px 14px;font-size:14px}
.opts button.ok{background:var(--mint);font-weight:700}
.opts button.no{background:#fff;text-decoration:line-through;opacity:.6}
.why{font-size:13px;margin:10px 0 0;line-height:1.6}
.nav{display:flex;justify-content:space-between;gap:10px}
.nav button{flex:1;background:var(--paper);border:1.5px solid var(--line,rgba(52,66,90,.16));border-radius:12px;padding:10px;font-weight:700;box-shadow:0 4px 14px rgba(40,64,100,.14)}
.step{display:flex;gap:8px;flex-wrap:wrap}
.step button{background:var(--butter);border:1.5px solid var(--line,rgba(52,66,90,.16));border-radius:12px;padding:7px 14px;font-weight:700;box-shadow:0 2px 8px rgba(40,64,100,.14)}
.note{font-size:11.5px;color:var(--ink-soft);margin:-6px 0 0}

@media (min-width:820px) and (min-height:500px){
  #sheet,#sheet.mini{left:auto;top:calc(env(safe-area-inset-top,0px) + 64px);right:max(12px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 12px);width:420px;height:auto;border:1.5px solid var(--line,rgba(52,66,90,.16));border-radius:22px;box-shadow:0 4px 14px rgba(40,64,100,.14)}
  #sheet header,#sbody{padding-left:16px;padding-right:16px}
  #mini{display:none}
}
@media (prefers-reduced-motion:reduce){#go{animation:none}#sheet{transition:none}}
#sbody>*{flex-shrink:0}
.chip{white-space:nowrap}
@media (max-width:440px){#brand b{display:none}#hud .chip{padding:6px 10px;font-size:13px}#hud{gap:6px}}

/* chapter sub-sections */
.secs{display:flex;flex-direction:column;gap:8px}
.secH{margin:4px 0 0;font-family:var(--f-display);font-size:17px}
.sec{border:1.5px solid var(--line,rgba(52,66,90,.16));border-radius:14px;background:var(--paper);overflow:hidden}
.sec>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;padding:9px 12px;font-weight:700;font-size:14.5px;background:var(--accent-soft)}
.sec>summary::-webkit-details-marker{display:none}
.sec>summary::after{content:"＋";margin-left:auto;font-family:var(--f-mono)}
.sec[open]>summary::after{content:"－"}
.sec .sn{font-family:var(--f-mono);font-size:11px;background:var(--paper);border:1.5px solid var(--line,rgba(52,66,90,.16));border-radius:6px;padding:0 5px;flex:none}
.sec .sb{padding:10px 12px 12px;font-size:13.5px;line-height:1.8;max-width:64ch}
.sec .sb p{margin:0 0 8px}.sec .sb ul,.sec .sb ol{margin:0 0 6px;padding-left:20px}
.sec .sb .formula{margin:4px 0 10px}
.sec .ex{border:2px dashed var(--lav);border-radius:12px;padding:8px 10px;background:var(--lav-soft)}
.sec .ex p b{display:inline-block;margin-right:6px;font-size:11px;background:var(--butter);border:1.5px solid var(--line,rgba(52,66,90,.16));border-radius:6px;padding:0 6px}
.sec .ans>summary{cursor:pointer;display:inline-block;font-weight:700;font-size:13px;background:var(--mint);border:1.5px solid var(--line,rgba(52,66,90,.16));border-radius:10px;padding:2px 12px;box-shadow:0 2px 8px rgba(40,64,100,.14);list-style:none}
.sec .ans>summary::-webkit-details-marker{display:none}
.sec .ans[open]>summary{margin-bottom:8px}
.sec .ans>div{font-family:var(--f-body);line-height:1.9}

/* 3D figures in sections */
.fig3d{margin:10px 0 4px;cursor:pointer}
.fig3d .fw{position:relative;border:1.5px solid var(--line,rgba(52,66,90,.16));border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#dbe7f5,#ffe1ea);aspect-ratio:16/10;max-width:100%;box-shadow:0 4px 14px rgba(40,64,100,.14)}
.fig3d img{display:block;width:100%;height:100%;object-fit:cover}
.fig3d img:not([src]){visibility:hidden}
.fig3d .go3d{position:absolute;right:8px;bottom:8px;font:700 12px var(--f-body);background:var(--butter);border:1.5px solid var(--line,rgba(52,66,90,.16));border-radius:999px;padding:2px 10px;box-shadow:0 2px 8px rgba(40,64,100,.14)}
.fig3d:hover .fw,.fig3d:focus-visible .fw{transform:translate(-1px,-1px);box-shadow:0 4px 14px rgba(40,64,100,.14)}
.fig3d figcaption{font-size:12.5px;color:var(--ink-soft);margin-top:5px;line-height:1.6}
.fig3d.nothumb .fw::after{content:"點擊在主畫面查看 3D 模型";position:absolute;inset:0;display:grid;place-items:center;font-weight:700;color:var(--ink)}
.figToast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 64px);transform:translateX(-50%);z-index:40;background:var(--paper);border:1.5px solid var(--line,rgba(52,66,90,.16));border-radius:14px;box-shadow:0 4px 14px rgba(40,64,100,.14);padding:7px 14px;font-weight:700;font-size:13px;white-space:nowrap;animation:figT 2.6s ease forwards}
@keyframes figT{0%{opacity:0;translate:0 -6px}10%,80%{opacity:1;translate:0 0}100%{opacity:0}}
.fig3d.on .fw{box-shadow:0 0 0 3px var(--butter),0 6px 18px rgba(40,64,100,.18)}
.figBack{position:fixed;left:12px;top:calc(env(safe-area-inset-top,0px) + 58px);z-index:35;font:700 13px var(--f-body);color:var(--ink);background:var(--butter);border:1.5px solid var(--line,rgba(52,66,90,.16));border-radius:999px;padding:7px 14px;box-shadow:0 4px 14px rgba(40,64,100,.14);cursor:pointer}
.figBack[hidden]{display:none}