/* Shared sound + offline code completion + transfer-code UI */
.tech-sound-float{
  position:fixed;right:16px;bottom:16px;z-index:9999;border:1px solid #c9d5e6;
  background:rgba(12,25,45,.94);color:#eef5ff;border-radius:999px;padding:9px 11px;
  box-shadow:0 10px 35px rgba(0,0,0,.22);cursor:pointer;font-weight:900;font-size:11px
}
.code-complete-pop{
  position:fixed;z-index:10000;min-width:210px;max-width:310px;background:#07101f;
  border:1px solid rgba(117,229,255,.28);border-radius:12px;box-shadow:0 20px 55px rgba(0,0,0,.45);
  overflow:hidden;padding:5px;color:#dcecff;font:11px/1.25 ui-monospace,SFMono-Regular,Menlo,monospace
}
.code-complete-pop[hidden]{display:none}
.code-complete-pop button{display:block;width:100%;text-align:left;border:0;background:transparent;color:inherit;padding:7px 9px;border-radius:7px;cursor:pointer}
.code-complete-pop button.active,.code-complete-pop button:hover{background:#13264b}
.code-complete-pop b{color:#69e5ff}.code-complete-pop small{display:block;color:#7587ad;margin-top:2px}
.code-editor-wrap{position:relative;min-width:0}
.code-editor-wrap>textarea{display:block}
.completion-badge{
  position:absolute;right:10px;top:8px;z-index:3;padding:4px 6px;background:rgba(6,13,29,.72);
  color:#7890bd;border:1px solid rgba(255,255,255,.1);border-radius:7px;font:800 9px ui-monospace;
  pointer-events:none
}
.transfer-code-deck{margin-top:18px;border:1px solid #ccd9ea;border-radius:18px;background:linear-gradient(145deg,#fff,#f7faff);overflow:hidden}
.transfer-code-head{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:17px;border-bottom:1px solid #dbe4f0}
.transfer-code-head h3{margin:.25rem 0 0}.transfer-skill-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.transfer-skill-tags span{padding:6px 8px;border-radius:999px;background:#eef4ff;color:#36527d;font-size:10px;font-weight:850}
.transfer-mode-tabs{display:flex;gap:6px;padding:9px 11px;border-bottom:1px solid #e0e7f2;background:#f7f9fd;overflow:auto}
.transfer-mode-tabs button{border:1px solid #cad6e6;background:#fff;color:#536681;border-radius:9px;padding:7px 9px;font-weight:800;font-size:11px;cursor:pointer;white-space:nowrap}
.transfer-mode-tabs button.active{background:#102a43;color:#fff;border-color:#102a43}
.transfer-code-grid{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:0}
.transfer-code-editor{min-width:0;border-right:1px solid #dbe4f0}.transfer-code-editor .code-editor{min-height:230px}
.transfer-code-result{padding:18px;background:#f8fbff;color:#425574}.transfer-code-result b{display:block;color:#18385e;margin-bottom:8px}.transfer-code-result p{margin:0;line-height:1.55}
@media(max-width:850px){.transfer-code-head{align-items:flex-start;flex-direction:column}.transfer-skill-tags{justify-content:flex-start}.transfer-code-grid{grid-template-columns:1fr}.transfer-code-editor{border-right:0;border-bottom:1px solid #dbe4f0}}

/* Interaction-first lesson order */
.lesson-main>.interactive-lab{border:1px solid #bfcfe4;box-shadow:0 18px 48px rgba(32,63,109,.10);border-radius:22px}
.lesson-theory{margin:18px 0;border:1px solid #d6e0ee;border-radius:18px;background:#f8fbff;overflow:hidden}
.lesson-theory>summary{list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px 18px;cursor:pointer;font-weight:800;color:#2e4566}
.lesson-theory>summary::-webkit-details-marker{display:none}.lesson-theory>summary span{color:#6d7d95;font-weight:700}.lesson-theory[open]>summary{border-bottom:1px solid #dce5f1;background:#f3f7fd}
.lesson-theory-body{padding:4px 0}.lesson-theory-body>.learning-card{margin:14px}
.compact-sequence .step-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
@media(max-width:700px){.lesson-theory>summary{align-items:flex-start;flex-direction:column}.lesson-theory-body>.learning-card{margin:9px}}


/* TechNova kid-friendly code editor: VS Code-inspired without external dependencies */
.tn-code-shell{
  --tn-editor-bg:#0b1220;--tn-editor-panel:#111a2b;--tn-editor-text:#d7e2f0;--tn-editor-muted:#72829a;
  --tn-editor-gutter:#0e1726;--tn-editor-border:#26344a;--tn-editor-current:rgba(78,119,190,.12);--tn-editor-error:rgba(255,91,114,.15);
  --tn-caret:#ffffff;--tn-selection:rgba(79,131,246,.32);--tn-line-height:1.65;--tn-font-size:13px;--tn-gutter-width:48px;
  width:100%;min-width:0;border:1px solid var(--tn-editor-border);border-radius:12px;overflow:hidden;background:var(--tn-editor-bg);box-shadow:0 12px 28px rgba(19,39,72,.10)
}
.tn-code-shell[data-theme="light"]{
  --tn-editor-bg:#fbfdff;--tn-editor-panel:#f1f5fa;--tn-editor-text:#213047;--tn-editor-muted:#7a8798;--tn-editor-gutter:#f4f7fb;
  --tn-editor-border:#cad6e5;--tn-editor-current:rgba(49,85,217,.07);--tn-editor-error:rgba(209,51,73,.09);--tn-caret:#172844;--tn-selection:rgba(49,85,217,.18)
}
.tn-code-shell[hidden]{display:none!important}
.tn-code-toolbar{height:36px;display:flex;align-items:center;gap:9px;padding:0 10px;background:var(--tn-editor-panel);border-bottom:1px solid var(--tn-editor-border);color:var(--tn-editor-muted);font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.03em}
.tn-code-toolbar strong{color:var(--tn-editor-text);font-size:10px}.tn-editor-tip{margin-left:auto;white-space:nowrap}.tn-code-toolbar button{border:1px solid var(--tn-editor-border);background:var(--tn-editor-bg);color:var(--tn-editor-text);border-radius:7px;padding:5px 8px;font:800 10px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;cursor:pointer}
.tn-editor-dots{display:flex;gap:4px}.tn-editor-dots i{width:7px;height:7px;border-radius:50%;display:block}.tn-editor-dots i:nth-child(1){background:#ff6b73}.tn-editor-dots i:nth-child(2){background:#ffca58}.tn-editor-dots i:nth-child(3){background:#55d7a0}
.tn-code-body{position:relative;overflow:hidden;resize:vertical;background:var(--tn-editor-bg)}
.tn-code-gutter,.tn-code-highlight,.tn-code-shell textarea.tn-code-input{font:var(--tn-font-size)/var(--tn-line-height) ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace!important;tab-size:4!important}
.tn-code-gutter{position:absolute;z-index:2;left:0;top:0;bottom:0;width:var(--tn-gutter-width);padding:16px 8px 16px 0;box-sizing:border-box;overflow:hidden;background:var(--tn-editor-gutter);border-right:1px solid var(--tn-editor-border);color:var(--tn-editor-muted);text-align:right;pointer-events:none;user-select:none}
.tn-code-gutter span{display:block;height:calc(var(--tn-font-size) * var(--tn-line-height));line-height:calc(var(--tn-font-size) * var(--tn-line-height));padding-right:5px}.tn-code-gutter span.is-current{color:#8fb4ff;font-weight:900}.tn-code-gutter span.is-error{color:#ff6d82;font-weight:900}
.tn-code-highlight{position:absolute;z-index:1;inset:0;margin:0!important;padding:16px 18px 16px calc(var(--tn-gutter-width) + 16px)!important;box-sizing:border-box;overflow:auto;white-space:pre!important;background:transparent!important;color:var(--tn-editor-text)!important;pointer-events:none;scrollbar-width:none}
.tn-code-highlight::-webkit-scrollbar{display:none}.tn-code-line{display:block;min-height:calc(var(--tn-font-size) * var(--tn-line-height));line-height:calc(var(--tn-font-size) * var(--tn-line-height));margin:0 -18px 0 calc(-1 * (var(--tn-gutter-width) + 16px));padding:0 18px 0 calc(var(--tn-gutter-width) + 16px)}.tn-code-line.is-current{background:var(--tn-editor-current)}.tn-code-line.is-error{background:var(--tn-editor-error);box-shadow:inset 3px 0 #ff5c73}
body .tn-code-shell textarea.tn-code-input{position:absolute!important;z-index:3!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;min-height:0!important;margin:0!important;padding:16px 18px 16px calc(var(--tn-gutter-width) + 16px)!important;box-sizing:border-box!important;border:0!important;border-radius:0!important;outline:0!important;resize:none!important;overflow:auto!important;background:transparent!important;color:transparent!important;-webkit-text-fill-color:transparent!important;caret-color:var(--tn-caret)!important;white-space:pre!important;letter-spacing:normal!important;box-shadow:none!important}
body .tn-code-shell textarea.tn-code-input::selection{background:var(--tn-selection)!important;color:transparent!important;-webkit-text-fill-color:transparent!important}
.tn-tok-keyword{color:#c792ea}.tn-tok-builtin{color:#82aaff}.tn-tok-string{color:#c3e88d}.tn-tok-number{color:#f78c6c}.tn-tok-comment{color:#718096;font-style:italic}.tn-tok-operator{color:#89ddff}.tn-tok-constant{color:#ffcb6b}.tn-tok-tag{color:#f07178}
.tn-code-shell[data-theme="light"] .tn-tok-keyword{color:#7c3aed}.tn-code-shell[data-theme="light"] .tn-tok-builtin{color:#155eef}.tn-code-shell[data-theme="light"] .tn-tok-string{color:#0f7b3e}.tn-code-shell[data-theme="light"] .tn-tok-number{color:#c2410c}.tn-code-shell[data-theme="light"] .tn-tok-comment{color:#738197}.tn-code-shell[data-theme="light"] .tn-tok-operator{color:#0369a1}.tn-code-shell[data-theme="light"] .tn-tok-constant{color:#9a6700}.tn-code-shell[data-theme="light"] .tn-tok-tag{color:#b42318}
.tn-indent-guide{box-shadow:inset 1px 0 currentColor;color:#25446d}.tn-indent-2{color:#514278}.tn-indent-3{color:#23664f}.tn-indent-4{color:#7a4b24}.tn-code-shell[data-theme="light"] .tn-indent-1{color:#b5c9eb}.tn-code-shell[data-theme="light"] .tn-indent-2{color:#d5c3ee}.tn-code-shell[data-theme="light"] .tn-indent-3{color:#b8dfd0}.tn-code-shell[data-theme="light"] .tn-indent-4{color:#ead2b6}
.tn-code-shell:focus-within{box-shadow:0 0 0 3px rgba(49,85,217,.14),0 12px 28px rgba(19,39,72,.10)}
@media(max-width:600px){.tn-code-shell{--tn-font-size:12px;--tn-gutter-width:42px}.tn-editor-tip{display:none}.tn-code-toolbar{height:34px}.tn-code-body{min-height:230px!important}}