*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#1d232b;background:#e9edf1}
#viewer{position:fixed;inset:0}
#loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:50;color:#e6e9ee;background:radial-gradient(ellipse at 50% 42%,#3a414b 0%,#1d2127 50%,#0b0d10 100%);transition:opacity .35s}
#loading.done{opacity:0;pointer-events:none}
.ld-box{width:min(340px,86vw);text-align:center}
.ld-box h2{font-size:20px;margin:14px 0 4px;color:#fff}
#loadmsg{margin:0 0 14px;color:#b8c0ca;font-size:13.5px;min-height:20px}
#loading.failed #loadmsg{color:#ffb4a8}
.ld-bar{height:6px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.ld-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#c9962e,#f3d690);border-radius:4px;transition:width .2s}
.ld-foot{display:flex;justify-content:space-between;margin-top:6px;font-size:12px;color:#98a2ae}
#loadretry{margin-top:16px}
#loadretry.hidden{display:none}
.ld-chip{width:54px;height:54px;margin:0 auto;border-radius:8px;background:#2b2c30;box-shadow:0 0 0 2px #444a52,0 8px 24px rgba(0,0,0,.5);position:relative;animation:ldp 1.6s ease-in-out infinite}
.ld-chip i{position:absolute;width:8px;height:8px;border-radius:2px;background:#f3d690}
.ld-chip i:nth-child(1){left:-12px;top:12px}.ld-chip i:nth-child(2){left:-12px;bottom:12px}.ld-chip i:nth-child(3){right:-12px;top:12px}.ld-chip i:nth-child(4){right:-12px;bottom:12px}
@keyframes ldp{50%{transform:translateY(-4px);box-shadow:0 0 0 2px #e9b949,0 12px 28px rgba(0,0,0,.5)}}
.pgroup{margin:6px 0 8px}.pg-h{display:flex;gap:6px;align-items:baseline;margin-bottom:2px}
details.allpins{margin-top:8px}
aside{position:fixed;top:12px;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,.12);padding:14px 16px;overflow:auto;max-height:calc(100% - 24px)}
#left{left:12px;width:290px}
#panel{right:12px;width:340px}
#panel.hidden{display:none}
h1{font-size:20px;margin:0 0 4px}
h2{font-size:18px;margin:0 0 2px}
.sub,.hint{color:#5b6672;margin:4px 0 0;font-size:12.5px}
section{margin:14px 0}
input[type=range]{width:100%}
.layer{display:flex;gap:8px;align-items:flex-start;margin:6px 0}
.layer .sw{width:12px;height:12px;border-radius:3px;margin-top:4px;flex:none;border:1px solid rgba(0,0,0,.2)}
.layer small{display:block;color:#5b6672;font-size:12px}
.layer label{cursor:pointer}
#credit{font-size:11.5px;color:#5b6672;border-top:1px solid #dde2e7;padding-top:8px;margin-top:10px}
#credit a{color:#2a6fb0}
#closePanel{position:absolute;right:8px;top:6px;border:0;background:none;font-size:22px;cursor:pointer;color:#5b6672}
table{border-collapse:collapse;width:100%;margin:8px 0}
td{padding:3px 4px;border-bottom:1px solid #eef1f4;vertical-align:top;font-size:13px}
td:first-child{color:#5b6672;width:42%}
.tag{display:inline-block;background:#e6f0fa;color:#1f5f99;border-radius:10px;padding:1px 8px;font-size:12px;text-transform:capitalize}
.explain{background:#f6f8fa;border-radius:8px;padding:8px 10px;margin:8px 0}
.note{background:#fff7e0;border-radius:8px;padding:8px 10px;margin:8px 0}
.nets{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.net{border:1px solid #cfd6dd;background:#fff;border-radius:6px;padding:2px 6px;font-size:12px;cursor:pointer}
.net.active{background:#1f8a5b;color:#fff;border-color:#1f8a5b}
#hover{position:fixed;pointer-events:none;background:rgba(20,24,30,.85);color:#fff;padding:3px 8px;border-radius:6px;font-size:12px;display:none;z-index:5}


.layer .lt{flex:1}.layer details{display:inline}.layer details[open]{display:block}.layer summary{display:inline;cursor:pointer;list-style:none;color:#2a6fb0;font-size:13px}
.layer summary::-webkit-details-marker{display:none}

/* dark studio theme */
body.dark{background:#0d0f12;color:#e6e9ee}
body.dark #loading{background:#0d0f12;color:#cfd6de}
body.dark aside{background:rgba(22,25,30,.82);box-shadow:0 8px 32px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.06)}
body.dark .sub,body.dark .hint,body.dark .layer small,body.dark #credit,body.dark td:first-child,body.dark #closePanel{color:#98a2ae}
body.dark #credit{border-top-color:rgba(255,255,255,.08)}
body.dark #credit a,body.dark .layer summary{color:#7fb6ea}
body.dark td{border-bottom-color:rgba(255,255,255,.06)}
body.dark .tag{background:rgba(127,182,234,.15);color:#9cc8f0}
body.dark .explain{background:rgba(255,255,255,.05)}
body.dark .note{background:rgba(240,200,90,.12);color:#f3e2b5}
body.dark .net{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);color:#dfe4ea}
body.dark .net.active{background:#1f9a64;border-color:#1f9a64;color:#fff}
body.dark .layer .sw{border-color:rgba(255,255,255,.25)}
input[type=range],input[type=checkbox]{accent-color:#e9b949}

/* ---- learning UI ---- */
.learnbar{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 8px}
button{font:inherit;cursor:pointer;border-radius:8px;border:1px solid rgba(127,127,127,.35);background:rgba(127,127,127,.12);color:inherit;padding:6px 10px}
button:disabled{opacity:.4;cursor:default}
button.primary{background:#e9b949;border-color:#e9b949;color:#1a1408;font-weight:600}
button.big{font-size:16px;padding:10px 16px;width:100%}
.mode{display:block;font-size:13px}
.term{border-bottom:1px dashed currentColor;cursor:help;color:#9cc8f0}
body:not(.dark) .term{color:#1f5f99}
.sub2{font-weight:400;color:#98a2ae;font-size:15px}
details.more{margin-top:10px}details.more summary{cursor:pointer;color:#7fb6ea}
#coach{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);width:min(560px,calc(100% - 640px));min-width:360px;background:rgba(22,25,30,.92);color:#e6e9ee;border:1px solid rgba(255,255,255,.08);border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.5);padding:14px 18px;z-index:8;backdrop-filter:blur(8px)}
#coach.hidden{display:none}
#coach h3{margin:6px 0 6px;font-size:17px}
#coach p{margin:0 0 10px;line-height:1.5}
.coach-head{display:flex;align-items:center;gap:10px}
.coach-head .x{margin-left:auto;background:none;border:0;font-size:22px;padding:0 4px;color:#98a2ae}
.pill{background:rgba(233,185,73,.16);color:#f3d58a;border-radius:20px;padding:2px 10px;font-size:12px}
.score{font-size:12.5px;color:#cfd6de}
.coach-nav{display:flex;align-items:center;justify-content:space-between;gap:8px}
.coach-nav .dots{display:flex;gap:5px}.coach-nav .dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.2)}.coach-nav .dots span.on{background:#e9b949}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0}
.choices button.right{background:#1f9a64;border-color:#1f9a64;color:#fff}.choices button.wrong{background:#b03a3a;border-color:#b03a3a;color:#fff}
.feedback{min-height:0;margin:6px 0 10px;border-radius:8px;font-size:13.5px}
.feedback.good,.feedback.bad,.feedback.hint{padding:8px 10px}
.feedback.good{background:rgba(31,154,100,.2);color:#9ff0c8}.feedback.bad{background:rgba(176,58,58,.22);color:#ffc3c3}.feedback.hint{background:rgba(233,185,73,.14);color:#f3e2b5}
.feedback a{color:inherit;font-weight:600}
#termpop{position:fixed;z-index:20;background:#fff;color:#1d232b;border-radius:10px;padding:10px 12px;box-shadow:0 8px 30px rgba(0,0,0,.4);font-size:13px;line-height:1.45}
#termpop.hidden,#glossary.hidden,#welcome.hidden{display:none}
#glossary,#welcome{position:fixed;inset:0;z-index:15;background:rgba(5,7,10,.55);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.gl-box,.w-box{background:#171a1f;color:#e6e9ee;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:20px 24px;box-shadow:0 20px 60px rgba(0,0,0,.6);position:relative}
.gl-box{width:min(640px,92vw);max-height:80vh;overflow:auto}
.gl-box .x{position:absolute;right:10px;top:8px;background:none;border:0;font-size:24px;color:#98a2ae}
.gl-list dt{font-weight:700;margin-top:10px;color:#f3d58a}.gl-list dd{margin:2px 0 0;color:#cfd6de}
.w-box{width:min(460px,92vw);text-align:center}
.w-box h2{font-size:22px;margin:0 0 8px}.w-box p{color:#b8c1cc;margin:0 0 16px}
.w-row{display:flex;gap:8px;margin-top:8px}.w-row button{flex:1}
@media (max-width:1100px) and (min-width:761px){#coach{width:calc(100% - 24px);min-width:0;bottom:12px}}

/* ---- mobile / touch ---- */
#mbar,#menuClose{display:none}
.touch-only{display:none}
body.touch .touch-only{display:inline}body.touch .mouse-only{display:none}
body.touch #hover{display:none!important}
#viewer canvas{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html,body{overscroll-behavior:none;-webkit-text-size-adjust:100%}
#ctxlost{position:fixed;inset:0;z-index:60;background:rgba(5,7,10,.75);display:flex;align-items:center;justify-content:center}
#ctxlost.hidden{display:none}
@media (max-width:760px), (max-height:500px) and (pointer:coarse){
  html,body{font-size:15px}
  .sub,.hint{font-size:13.5px} td{font-size:14px}
  button{min-height:40px;padding:8px 12px}
  .net{padding:6px 10px;font-size:13px;min-height:34px}
  input[type=checkbox]{width:20px;height:20px;vertical-align:-4px}
  .layer{margin:10px 0}
  #mbar{display:flex;position:fixed;z-index:9;top:calc(8px + env(safe-area-inset-top));left:calc(8px + env(safe-area-inset-left));right:calc(8px + env(safe-area-inset-right));
    align-items:center;gap:6px;padding:6px;border-radius:12px;background:rgba(22,25,30,.86);border:1px solid rgba(255,255,255,.07);box-shadow:0 6px 20px rgba(0,0,0,.4)}
  #mbar .mtitle{font-weight:700;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #menuBtn{font-size:20px;width:44px;padding:0}
  #left{top:0;left:0;bottom:0;width:min(340px,88vw);max-height:none;border-radius:0 16px 16px 0;z-index:30;transform:translateX(-105%);transition:transform .25s ease;
    padding:calc(14px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));-webkit-overflow-scrolling:touch}
  body.menu-open #left{transform:none}
  #menuClose{display:block;position:absolute;right:8px;top:calc(6px + env(safe-area-inset-top));background:none;border:0;font-size:26px;color:#98a2ae;min-height:0}
  #panel,#coach{left:0;right:0;bottom:0;top:auto;width:auto;min-width:0;transform:none;max-height:44vh;overflow:auto;-webkit-overflow-scrolling:touch;
    border-radius:16px 16px 0 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right))}
  #panel{z-index:12} #coach{z-index:11}
  #panel::before,#coach::before{content:'';display:block;width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.22);margin:-4px auto 8px}
  #coach h3{font-size:16px;margin:4px 0} #coach p{font-size:14.5px;margin:0 0 8px}
  .coach-nav .dots{display:none}
  .choices{grid-template-columns:1fr}
  .w-box{padding:18px 16px}
  .gl-box{max-height:86vh;padding:18px 16px}
}
@media (max-height:500px) and (pointer:coarse){
  #mbar{right:auto;max-width:46vw}
  #panel,#coach{left:auto;top:calc(8px + env(safe-area-inset-top));right:calc(8px + env(safe-area-inset-right));bottom:calc(8px + env(safe-area-inset-bottom));width:min(360px,46vw);max-height:none;border-radius:16px;padding-bottom:12px}
  #panel::before,#coach::before{display:none}
  #coach{top:auto;max-height:calc(100% - 16px)}
}