:root{
  --bg:#101113; --surface:#1a1b1d; --surface2:#222326; --border:#2c2e31;
  --accent:#14b8a6; --accent2:#1da06a; --accent3:#4a9eff; --accent-warm:#e8a23a;
  --accent-rgb:20,184,166;
  --key-pale:#34373d;
  --text:#e9ebed; --text2:#c6c9cc; --text3:#9aa0a5;
  --mono:'JetBrains Mono',monospace; --sans:'Syne',sans-serif; --radius:8px;
  --editor-fs:12px;
}
/* ── LIGHT THEME — high-contrast: dark chrome (header/toolbars/panels) over a
   light content area, with a pure-white editor. Not a "day/brightness" mode. ── */
html[data-theme="light"]{
  /* light content context (main area, editor, cards, modals) */
  --bg:#f2f2f2; --surface:#ffffff; --surface2:#e8e9ea; --border:#cdced1;
  --accent:#14b8a6; --accent2:#0f9d76; --accent3:#1558d4; --accent-warm:#c96410;
  --accent-rgb:20,184,166;
  --key-pale:#e8e9ea;
  --text:#1c1d1f; --text2:#4a4d51; --text3:#64676c;
  --stage:#cccdd0;
}
/* Dark chrome regions (a touch lighter than pure black): re-scope the tokens
   here so descendants flip to the light-on-dark palette automatically.
   Two shades create panel-to-panel contrast: the header/keypad/view-tabs/
   status-bar/bottom-tabs sit at the darker base tone, while panel-header
   (program.H + Learn row), ctx-panel (Undo/Redo row) and toolbar (Run/Stop
   row) sit one step lighter so they visually pop against their neighbors. */
html[data-theme="light"] header,
html[data-theme="light"] .toolbar,
html[data-theme="light"] .panel-header,
html[data-theme="light"] .view-tabs,
html[data-theme="light"] .status-bar,
html[data-theme="light"] .ctx-panel,
html[data-theme="light"] .keypad,
html[data-theme="light"] .mtab-bar,
html[data-theme="light"] #toolLegend,
html[data-theme="light"] #measureOverlay,
html[data-theme="light"] #learnCoach .coach-tip{
  color:#edeef0;
  --surface:#404346; --surface2:#404346; --key-pale:#373a3d;
  --border:#474a4e;
  --text:#edeef0; --text2:#cacccf; --text3:#9da0a5;
}
html[data-theme="light"] header,
html[data-theme="light"] .view-tabs,
html[data-theme="light"] .status-bar,
html[data-theme="light"] .keypad,
html[data-theme="light"] .mtab-bar{
  background:#26282b !important;
}
html[data-theme="light"] .panel-header,
html[data-theme="light"] .toolbar,
html[data-theme="light"] .ctx-panel{
  background:#35373a !important;
}
/* Field-editor values use --bg while the contextual panel re-scopes its text
   to the dark-chrome palette. Keep that shared value surface dark too, or the
   light theme produces white text on a near-white field for TOOL CALL and the
   other interactive builders. */
html[data-theme="light"] .ctx-panel{ --bg:#26282b; }
/* Header/toolbar action buttons — filled fill on the dark chrome */
html[data-theme="light"] .btn,
html[data-theme="light"] .tool-act-btn,
html[data-theme="light"] #themeToggle,
html[data-theme="light"] #aboutBtn{
  background:#404346; color:#edeef0; border-color:#55585e;
}
html[data-theme="light"] .btn:hover,
html[data-theme="light"] .tool-act-btn:hover,
html[data-theme="light"] #themeToggle:hover,
html[data-theme="light"] #aboutBtn:hover{ background:#4c4f53; color:#fff; }
/* ── PALE controls: editor control panel — path-function & program keys and the
   editor toolbar buttons — get a light fill so they pop against the dark chrome. ── */
html[data-theme="light"] .keypad .key,
html[data-theme="light"] .ctx-panel .btn,
html[data-theme="light"] .ph-btn{
  background:#d9dadd; color:#1c1f23; border-color:#b3b6ba;
}
html[data-theme="light"] .keypad .key:hover,
html[data-theme="light"] .ctx-panel .btn:hover:not(:disabled),
html[data-theme="light"] .ph-btn:hover{ background:#e9ebee; color:#101214; border-color:#9ea2a8; }
html[data-theme="light"] .ctx-panel .btn:disabled{ background:#4c4f53; color:#969aa0; border-color:#55585e; }
html[data-theme="light"] .keypad .key.off{ background:#c7c9cd; color:#2c2f33; border-color:#aaadb2; }
html[data-theme="light"] .keypad .key.off:hover{ background:#e0e2e5; color:#15171a; }
html[data-theme="light"] .keypad .key.prog{ background:#c7ece6; color:#0c5148; border-color:#8fd6ca; }
html[data-theme="light"] .keypad .key.prog:hover{ background:#d7f1ec; color:#083b34; }
html[data-theme="light"] .keypad .key.pi-key{ background:#f6ddc9; color:#9a4a12; border-color:#ecb98f; }
html[data-theme="light"] .keypad .key.pi-key:hover{ background:#fbe8d8; }
html[data-theme="light"] .keypad .key.pi{ background:#14b8a6; color:#062420; border-color:transparent; }
html[data-theme="light"] .keypad .key.on{ background:#14b8a6; color:#062420; border-color:transparent; }
/* semantic action buttons (Run / Step / Stop / Reset) — filled, readable */
html[data-theme="light"] .btn-run{ background:#1aa77e; color:#04150f; border-color:transparent; }
html[data-theme="light"] .btn-run:hover{ background:#22c493; color:#04150f; }
html[data-theme="light"] .btn-step{ background:#3f83e6; color:#04101f; border-color:transparent; }
html[data-theme="light"] .btn-step:hover{ background:#5a97f0; color:#04101f; }
html[data-theme="light"] .btn-stop{ background:#e0574f; color:#1a0402; border-color:transparent; }
html[data-theme="light"] .btn-stop:hover{ background:#ef6a62; color:#1a0402; }
html[data-theme="light"] .btn-reset{ background:#404346; color:#edeef0; border-color:#55585e; }
html[data-theme="light"] .btn-reset:hover{ background:#4c4f53; }
html[data-theme="light"] .learn-cta{ background:#14b8a6 !important; color:#062420 !important; border-color:#14b8a6 !important; }
/* segmented toggles (quality Def/High) */
html[data-theme="light"] .btn-group{ background:#303235; border-color:#474a4e; }
html[data-theme="light"] .btn-group .btn-tog{ color:#cacccf; border-right-color:#474a4e; }
html[data-theme="light"] .btn-group .btn-tog:hover{ background:#404346; color:#fff; }
html[data-theme="light"] .btn-group .btn-tog.active{ background:#14b8a6; color:#062420; font-weight:600; }
/* speed control */
html[data-theme="light"] .speed-ctrl{ background:#303235; border-color:#474a4e; }
html[data-theme="light"] .speed-btn{ color:#cacccf; }
html[data-theme="light"] .speed-btn:hover{ background:#404346; color:#fff; }
html[data-theme="light"] .speed-val{ color:#6df3dd; border-color:#474a4e; }
/* view tabs (3D view / XY toolpath / Tool Table) */
html[data-theme="light"] .tab{ background:#303235; color:#9da0a5; }
html[data-theme="light"] .tab:hover{ color:#cacccf; }
html[data-theme="light"] .tab.active{ background:rgba(20,184,166,.18); color:#6df3dd; border-bottom-color:#14b8a6; }
/* badges (incl. the "live" badge) */
html[data-theme="light"] .badge{ background:#404346; color:#cacccf; border-color:#55585e; }
html[data-theme="light"] .badge.green{ background:#0e5148; color:#6df3dd; border-color:transparent; }
html[data-theme="light"] .badge.blue{ background:#123a6b; color:#84b6ff; border-color:transparent; }
/* logo text on the dark header */
html[data-theme="light"] .logo-text{ color:#f3f4f6; }
html[data-theme="light"] .logo-sub{ color:#9da0a5; }
/* editor stays pure white; number gutter light */
html[data-theme="light"] .code-area-wrap{ background:#ffffff; }
html[data-theme="light"] .line-nums{ background:#e8eaed; }
html[data-theme="light"] .line-nums .ln.selected{ border-left-color:#14b8a6; }
/* 3D stage background (CSS fallback; JS sets the WebGL scene bg to match) */
html[data-theme="light"] #view3d{ background:var(--stage); }
/* syntax colours on the white editor (Q-params = info blue) */
html[data-theme="light"] .syn-comment{color:#2f9e57;}
html[data-theme="light"] .syn-tool{color:#c2440a;}
html[data-theme="light"] .syn-lbl{color:#1a52a8;}
html[data-theme="light"] .syn-qvar{color:#1558d4;}
html[data-theme="light"] .syn-cycle{color:#8a5a12;}
/* floating controls over the (light-gray) 3D stage — dark translucent + light text */
html[data-theme="light"] #pathToggle,
html[data-theme="light"] #stockToggle,
html[data-theme="light"] #measureBtn,
html[data-theme="light"] #refineBtnCanvas,
html[data-theme="light"] #toolLegend,
html[data-theme="light"] #measureOverlay{
  background:rgba(38,40,43,0.86) !important;
  color:#edeef0 !important;
  box-shadow:0 1px 6px rgba(0,0,0,0.18);
}
#stockToggle:disabled,#measureBtn:disabled{opacity:.42;cursor:not-allowed !important;}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{height:100%;}
body{background:var(--bg);color:var(--text);font-family:var(--sans);height:100%;display:flex;flex-direction:column;overscroll-behavior:none;-webkit-text-size-adjust:100%;}

/* Help mode overlay + popup */
/* help mode: popup only, no dimming */
header{padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.logo{display:flex;align-items:center;gap:10px;}
.logo-icon{width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.logo-heading{font:inherit;min-width:0;}
.logo-text{display:block;font-size:15px;font-weight:700;color:var(--text);line-height:1.2;}
.logo-sub{display:block;font-size:11px;color:var(--text2);font-weight:400;}
.header-badges{display:flex;gap:6px;flex-wrap:wrap;}
.badge{font-family:var(--mono);font-size:10px;padding:3px 8px;border-radius:4px;border:1px solid var(--border);color:var(--text2);}
.badge.green{border-color:var(--accent2);color:var(--accent2);}
.badge.blue{border-color:var(--accent3);color:var(--accent3);}
.whats-new-btn{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border:1px solid var(--border);
  border-radius:4px;background:var(--surface2);color:var(--text2);cursor:pointer;
  font-family:var(--mono);font-size:10px;font-weight:500;white-space:nowrap;}
.whats-new-btn[hidden]{display:none;}
.whats-new-btn:hover{background:var(--surface);border-color:var(--text3);color:var(--text);}
.whats-new-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12);}
.whats-new-overlay{position:fixed;inset:0;z-index:99997;background:rgba(0,0,0,.42);}
.whats-new-overlay[hidden]{display:none;}
.whats-new-card{position:absolute;top:64px;right:20px;width:min(420px,calc(100vw - 40px));
  max-height:calc(100vh - 84px);overflow-y:auto;background:var(--surface2);
  border:1px solid var(--border);border-radius:12px;
  box-shadow:0 14px 45px rgba(0,0,0,.5);}
.whats-new-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:16px 18px 13px;border-bottom:1px solid var(--border);}
.whats-new-eyebrow{display:block;margin-bottom:4px;font-family:var(--mono);font-size:9px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);}
.whats-new-head h2{font-size:19px;line-height:1.25;color:var(--text);}
.whats-new-close{margin:-5px -4px 0 0;padding:2px 5px;border:0;background:none;
  color:var(--text3);font-size:22px;line-height:1;cursor:pointer;}
.whats-new-close:hover{color:var(--text);}
.whats-new-body{padding:15px 18px 18px;}
.whats-new-body>p{margin:0 0 11px;color:var(--text2);font-size:13px;line-height:1.5;}
.whats-new-body ul{display:flex;flex-direction:column;gap:9px;list-style:none;}
.whats-new-body li{display:flex;align-items:flex-start;gap:9px;color:var(--text2);
  font-family:var(--mono);font-size:11px;line-height:1.5;}
.whats-new-body li>span:first-child{color:var(--accent);font-weight:800;flex:0 0 auto;}
.sim-container{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;}
.sim-main{display:flex;flex:1;overflow:hidden;min-height:0;}
.editor-panel{width:580px;min-width:260px;max-width:700px;display:flex;flex-direction:column;border-right:1px solid var(--border);background:var(--surface);position:relative;flex-shrink:0;container-type:inline-size;}
.panel-resize{position:absolute;right:-4px;top:0;bottom:0;width:8px;cursor:col-resize;z-index:10;background:transparent;}
.panel-resize:hover,.panel-resize.dragging{background:var(--accent3);opacity:0.5;}
.panel-header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 8px;padding:8px 12px;background:var(--surface2);border-bottom:1px solid var(--border);font-family:var(--mono);font-size:11px;color:var(--text2);flex-shrink:0;}
.panel-header span{display:flex;align-items:center;gap:6px;}
.ph-title{min-width:0;flex:0 1 auto;}
#progTitleName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ph-controls{grid-column:3;justify-self:end;justify-content:flex-end;flex-wrap:wrap;min-width:0;max-width:100%;}
.panel-header .ph-controls{gap:8px;}
.ph-actions{justify-content:flex-end;flex-wrap:wrap;min-width:0;max-width:100%;}
.ph-actions .ph-btn{flex:0 0 auto;white-space:nowrap;}
.ph-blocks{flex:0 0 auto;white-space:nowrap;}
.program-autosave-status{font-size:9px;color:var(--text3);white-space:nowrap;font-weight:400;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.program-autosave-status[hidden]{display:none !important;}
.program-autosave-status[data-state="saved"],.program-autosave-status[data-state="restored"]{color:#63c59b;}
.program-autosave-status[data-state="pending"],.program-autosave-status[data-state="saving"],.program-autosave-status[data-state="lesson"]{color:var(--text3);}
.program-autosave-status[data-state="error"]{color:var(--accent-warm);}
@container (max-width:620px){.panel-header .ph-actions{gap:3px;}}
@container (max-width:570px){.panel-header{grid-template-columns:auto minmax(0,1fr);}.ph-controls{grid-column:1/-1;grid-row:2;justify-self:end;}}
@container (max-width:320px){.panel-header .ph-title{display:none;}}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block;}
.editor-wrap{display:flex;flex:1;overflow:hidden;min-height:0;}
.line-nums{font-family:var(--mono);font-size:var(--editor-fs);line-height:1.8;color:var(--text3);background:var(--surface2);border-right:1px solid var(--border);min-width:52px;text-align:right;overflow-y:scroll;overflow-x:hidden;user-select:none;flex-shrink:0;scrollbar-width:none;}
.line-nums::-webkit-scrollbar{display:none;}
.line-nums .ln{height:calc(var(--editor-fs) * 1.8);line-height:calc(var(--editor-fs) * 1.8);display:flex;align-items:center;justify-content:flex-end;gap:2px;white-space:nowrap;padding-right:4px;}
.ln-del{opacity:0;border:none;background:none;color:var(--text3);cursor:pointer;font-size:10px;padding:0 2px;line-height:1.8;flex-shrink:0;transition:opacity .15s;}
.line-nums:hover .ln-del{opacity:0.5;}
.ln-del:hover{opacity:1!important;color:#ff5d5d;}
@media(pointer:coarse){.ln-del{opacity:0.4;}}
.code-area-wrap{position:relative;flex:1;min-width:0;overflow:hidden;background:var(--surface);}
#hlLayer{position:absolute;inset:0;margin:0;padding:10px 12px;font-family:var(--mono);font-size:var(--editor-fs);line-height:1.8;white-space:pre;overflow:hidden;pointer-events:none;tab-size:2;color:var(--text);z-index:1;}
textarea#code{position:absolute;inset:0;width:100%;height:100%;z-index:2;padding:10px 12px;font-family:var(--mono);font-size:var(--editor-fs);line-height:1.8;background:transparent;color:transparent;caret-color:var(--text);border:none;outline:none;resize:none;tab-size:2;min-height:0;white-space:pre;overflow-x:auto;word-wrap:normal;overflow-wrap:normal;-webkit-text-size-adjust:none;text-size-adjust:none;}
#hlLayer .learn-answer-line{display:inline-block;min-width:calc(100% + 24px);margin-left:-12px;padding-left:12px;
  box-sizing:border-box;background:rgba(240,169,74,.17);box-shadow:inset 4px 0 0 #f0a94a,inset 0 1px rgba(240,169,74,.30);}
#hlLayer .learn-answer-line.learn-answer-first{border-radius:0 6px 0 0;}
#hlLayer .learn-answer-line.learn-answer-last{border-radius:0 0 6px 0;box-shadow:inset 4px 0 0 #f0a94a,inset 0 -1px rgba(240,169,74,.42);}
.line-nums .ln.learn-target{background:rgba(240,169,74,.22);color:#f0a94a;
  box-shadow:inset 3px 0 0 #f0a94a;font-weight:700;}
html[data-theme="light"] #hlLayer .learn-answer-line{background:rgba(201,133,11,.16);}
html[data-theme="light"] .line-nums .ln.learn-target{background:rgba(201,133,11,.18);color:#9a6100;}
@media(pointer:fine){textarea#code{resize:both;min-height:80px;}}
textarea#code::selection{background:rgba(20,184,166,0.3);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
textarea#code:focus-visible{outline:none;}
/* Syntax highlight colors — vivid-on-dark by default, overridden for light theme below */
.syn-comment{color:#4ADE80;}
.syn-tool{color:#FB923C;}
.syn-lbl{color:#60A5FA;}
.syn-qvar{color:#C084FC;}
.syn-cycle{color:#C9A876;}
@keyframes refine-spin{ to{ transform:rotate(360deg); } }
html[data-theme="light"] .syn-comment{color:#2d7a4a;}
html[data-theme="light"] .syn-tool{color:#c2440a;}
html[data-theme="light"] .syn-lbl{color:#1a52a8;}
html[data-theme="light"] .syn-qvar{color:#7a2db0;}
html[data-theme="light"] .syn-cycle{color:#7a5520;}
.toolbar{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--border);background:var(--surface2);flex-shrink:0;flex-wrap:wrap;align-items:center;}
.toolbar>*{flex-shrink:0;}
.btn{font-family:var(--mono);font-size:11px;padding:7px 14px;border-radius:var(--radius);border:1px solid var(--border);background:transparent;color:var(--text2);cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .15s;white-space:nowrap;touch-action:manipulation;}
.btn:hover{border-color:var(--text3);color:var(--text);}
.btn:active{transform:scale(.97);}
.btn-run,.btn-step,.btn-stop{height:30px;padding:0 10px;justify-content:center;font-size:12px;border-radius:6px;gap:5px;}
.btn-reset{width:auto;height:30px;padding:0 10px;justify-content:center;font-size:12px;border-radius:6px;gap:5px;}
.btn-reset svg{width:18px;height:18px;}
@media(max-width:380px){.btn-label{display:none;}.btn-run,.btn-step,.btn-stop{width:30px;padding:0;}}
@media(pointer:coarse) and (max-width:380px){.btn-run,.btn-step,.btn-stop{width:44px;padding:0;}}
.btn-run{border-color:var(--accent2);color:var(--accent2);background:rgba(29,160,106,.16);}
.btn-run:hover{border-color:var(--accent2);color:#fff;background:var(--accent2);}
.btn-step{border-color:var(--accent3);color:var(--accent3);background:rgba(74,158,255,.16);}
.btn-step:hover{border-color:var(--accent3);color:#fff;background:var(--accent3);}
.btn-stop{border-color:#ff5d5d;color:#ff5d5d;background:rgba(255,93,93,.16);}
.btn-stop:hover{border-color:#ff5d5d;color:#fff;background:#ff5d5d;}
.btn-reset{width:auto;height:30px;padding:0 10px;justify-content:center;font-size:12px;border-radius:6px;gap:5px;border-color:var(--text3);color:var(--text2);background:var(--surface2);}
.btn-reset:hover{border-color:var(--text2);color:var(--text);background:var(--border);}
.btn.measure-active{border-color:var(--accent);color:var(--accent);background:rgba(20,184,166,.1);}
.btn-group{display:flex;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface);}
.btn-group .btn-tog{border:none;border-radius:0;border-right:1px solid var(--border);padding:7px 10px;font-size:10px;color:var(--text3);}
.btn-group .btn-tog:last-child{border-right:none;}
.btn-group .btn-tog.active{background:var(--surface2);color:var(--text);font-weight:500;}
.btn-group .btn-tog:hover{background:var(--surface2);color:var(--text2);}
.speed-ctrl{display:flex;align-items:center;gap:0;margin-left:auto;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface);}
.speed-btn{font-family:var(--mono);font-size:13px;padding:6px 11px;background:transparent;border:none;color:var(--text2);cursor:pointer;line-height:1;}
.speed-btn:hover{background:var(--surface2);color:var(--text);}
.speed-val{font-family:var(--mono);font-size:11px;padding:0 10px;color:var(--accent);min-width:44px;text-align:center;border-left:1px solid var(--border);border-right:1px solid var(--border);}
.canvas-panel{flex:1;display:flex;flex-direction:column;background:var(--bg);min-width:0;}
.view-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--surface2);flex-shrink:0;}
.tab{font-family:var(--mono);font-size:11px;padding:8px 16px;color:var(--text3);cursor:pointer;border-bottom:3px solid transparent;transition:all .15s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:var(--surface);}
.tab.active{color:var(--accent);border-bottom:3px solid var(--accent);background:rgba(20,184,166,.06);}
.tab:hover:not(.active){color:var(--text2);background:var(--border);}
.view-area{flex:1;position:relative;min-height:0;}
#view3d{position:absolute;inset:0;width:100%;height:100%;background:var(--bg);}
#view3d canvas{display:block;width:100%;height:100%;}
#view2d{position:absolute;inset:0;width:100%;height:100%;display:none;}
canvas#sim2d{width:100%;height:100%;display:block;}
.explain-btn{font-family:var(--mono);font-size:9px;padding:2px 7px;border:1px solid rgba(74,158,255,.4);border-radius:4px;background:none;color:rgba(74,158,255,.8);cursor:pointer;margin-left:6px;flex-shrink:0;}
.explain-btn:hover{background:rgba(74,158,255,.1);}
/* ── Tools tab ── */
#viewTools{position:absolute;inset:0;width:100%;height:100%;display:none;overflow-y:auto;background:var(--bg);padding:16px;}
.tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:1024px), (max-height:600px){.tools-grid{grid-template-columns:1fr;}}
.tools-table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11px;}
.tools-table th{text-align:left;padding:6px 10px;border-bottom:2px solid var(--border);color:var(--text3);font-weight:500;font-size:10px;text-transform:uppercase;letter-spacing:.05em;}
.tools-table td{padding:6px 10px;border-bottom:1px solid var(--border);color:var(--text2);vertical-align:middle;}
.tools-table tr.active-tool td{color:var(--accent);background:rgba(20,184,166,.06);}
.tools-table tr:hover td{background:var(--surface);}
.tools-table .tool-num{color:var(--accent);font-weight:600;width:36px;}
.tools-table .tool-actions{white-space:nowrap;text-align:right;}
.tool-act-btn{font-family:var(--mono);font-size:9px;padding:2px 7px;border:1px solid var(--border);border-radius:4px;background:none;color:var(--text3);cursor:pointer;margin-left:4px;}
.tool-act-btn:hover{color:var(--text);border-color:var(--text3);}
.tool-act-btn.del:hover{color:#ff5d5d;border-color:#ff5d5d;}
.tool-form{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:14px 16px;}
.tool-form h3{font-family:var(--mono);font-size:11px;color:var(--accent3);margin:0 0 12px;text-transform:uppercase;letter-spacing:.06em;}
.tool-field{display:flex;flex-direction:column;gap:3px;margin-bottom:10px;}
.tool-field label{font-family:var(--mono);font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;}
.tool-field input{font-family:var(--mono);font-size:12px;background:var(--bg);border:1px solid var(--border);border-radius:5px;color:var(--text);padding:5px 9px;outline:none;}
.tool-field input:focus{border-color:var(--accent3);}
.tool-field .field-desc{font-family:var(--mono);font-size:9px;color:var(--text3);margin-top:1px;}
.tool-form-btns{display:flex;gap:8px;margin-top:12px;}
.tool-btn-save{font-family:var(--mono);font-size:11px;padding:6px 16px;background:var(--accent);color:#fff;border:none;border-radius:5px;cursor:pointer;}
.tool-btn-cancel{font-family:var(--mono);font-size:11px;padding:6px 12px;background:none;border:1px solid var(--border);border-radius:5px;color:var(--text3);cursor:pointer;}
.tool-swatch{width:12px;height:12px;border-radius:50%;display:inline-block;margin-right:4px;vertical-align:middle;border:1px solid rgba(255,255,255,.15);}
.view-hint{position:absolute;bottom:10px;right:12px;font-family:var(--mono);font-size:10px;color:var(--text3);pointer-events:none;text-align:right;line-height:1.8;}
.status-bar #statusMsg{color:var(--text2);}
.status-bar #posDisplay{font-size:10px;letter-spacing:.04em;margin-left:auto;}
#estTime{margin-left:0 !important;}
.ph-btn{font-family:var(--mono);font-size:10px;padding:2px 8px;border:1px solid var(--border);border-radius:4px;background:none;color:var(--text3);cursor:pointer;}
.ph-btn:hover{color:var(--text2);background:var(--surface2);}
button.ph-btn[onclick="openBugReport()"]:hover{background:rgba(232,162,58,.24) !important;}
/* One-click bug report: problem / suggestion choice buttons */
.bug-choice{display:flex;gap:8px;}
.bug-choice-btn{flex:1;font-family:var(--mono);font-size:12px;padding:10px 8px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text3);cursor:pointer;transition:background .12s,border-color .12s,color .12s;}
.bug-choice-btn:hover{color:var(--text2);background:var(--surface2);}
.bug-choice-btn.on{border-color:var(--accent);color:var(--text);background:rgba(var(--accent-rgb),.14);}
#kpHelpBtn,#mCodesBtn,
button.ph-btn[onclick="exportProgram()"],
button.ph-btn[onclick="importProgram()"]{background:rgba(var(--accent-rgb),.14);border-color:rgba(var(--accent-rgb),.4);color:var(--accent);}
#kpHelpBtn:hover,#mCodesBtn:hover,
button.ph-btn[onclick="exportProgram()"]:hover,
button.ph-btn[onclick="importProgram()"]:hover{background:rgba(var(--accent-rgb),.24);}
.status-bar{display:flex;align-items:center;gap:8px;padding:6px 14px;border-top:1px solid var(--border);background:var(--surface2);font-family:var(--mono);font-size:11px;color:var(--text3);flex-shrink:0;flex-wrap:wrap;}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--accent2);display:inline-block;flex-shrink:0;}
.status-dot.run{background:var(--accent);animation:pulse 1s infinite;}
@keyframes pulse{50%{opacity:.3;}}
#statusMsg{color:var(--text2);flex:1;min-width:120px;}
#posDisplay{color:var(--text3);}
.info-section{background:var(--surface);border-top:1px solid var(--border);padding:32px 24px;}
.info-title{text-align:center;margin-bottom:28px;}
.info-title h1{font-size:22px;font-weight:700;color:var(--text);margin-bottom:6px;}
.info-title p{font-size:14px;color:var(--text2);}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;max-width:900px;margin:0 auto;}
.disclaimer{max-width:100%;padding:14px 18px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface2);}
.disclaimer-bar{padding:24px 24px 8px;background:var(--bg);border-top:1px solid var(--border);}
.disclaimer-bar p{font-family:var(--mono);font-size:10px;color:var(--text3);line-height:1.6;margin:0;}
.disclaimer p{font-size:12px;color:var(--text2);line-height:1.65;margin:0;}
.disclaimer b{color:var(--text);}
.info-card h3{font-size:13px;font-weight:600;color:var(--accent);margin-bottom:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;}
.info-card p,.info-card li{font-size:13px;color:var(--text2);line-height:1.7;}
.info-card ul{padding-left:16px;}
.info-card code{font-family:var(--mono);font-size:11px;background:var(--surface2);padding:1px 6px;border-radius:4px;color:var(--accent3);}
footer{background:var(--surface2);border-top:1px solid var(--border);padding:12px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
footer p{font-size:12px;color:var(--text3);}
footer a{color:var(--text);text-decoration:none;}
footer a:hover{text-decoration:underline;}
footer .footer-play-link{display:inline-flex;align-items:center;gap:5px;vertical-align:middle;}
footer .footer-play-icon{width:20px;height:20px;flex:none;fill:rgba(245,154,86,.18);stroke:rgb(245 154 86);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
html[data-theme="light"] footer .footer-play-icon{fill:rgba(243,136,59,.18);stroke:rgb(243 136 59);}
.line-nums .ln.err{color:#ff5d5d;font-weight:500;}
.line-nums .ln.warn{color:#e8a23a;}
.line-nums .ln.fixed{color:#e8a23a;font-weight:500;}
.line-nums .ln.active{background:rgba(20,184,166,0.18);color:var(--accent);font-weight:600;border-left:2px solid var(--accent);}
.line-nums .ln.selected{border-left:2px solid var(--accent3);}
@keyframes fixFlash{0%{background:rgba(232,162,58,0.5);}100%{background:transparent;}}
.line-nums .ln.flash{animation:fixFlash 1.2s ease-out forwards;}
.problems{flex-shrink:0;border-top:1px solid var(--border);background:var(--surface2);font-family:var(--mono);font-size:11px;max-height:140px;display:flex;flex-direction:column;}
.problems-head{display:flex;align-items:center;gap:8px;padding:6px 12px;cursor:pointer;color:var(--text2);user-select:none;}
.problems-head .pc-ok{color:var(--accent2);}
.problems-head .pc-err{color:#ff5d5d;}
.problems-validator-toggle{margin-left:auto;font-family:var(--mono);font-size:9px;padding:2px 7px;border:1px solid currentColor;border-radius:4px;background:none;cursor:pointer;color:#ff5d5d;}
.problems-validator-toggle.off{color:#e8a23a;}
.problems-list{overflow-y:auto;}
.problem{display:flex;gap:8px;padding:5px 12px;border-top:1px solid var(--border);cursor:pointer;color:var(--text2);align-items:baseline;}
.problem:hover{background:var(--surface);}
.problem .pl{color:var(--text3);min-width:40px;}
.problem.err .pi{color:#ff5d5d;}
.problem.warn .pi{color:#e8a23a;}
.problem.fixed{background:rgba(232,162,58,.08);border-left:2px solid #e8a23a;opacity:.8;}
.problem.fixed .pi{color:#e8a23a;}
.problem-fix{margin-left:auto;flex-shrink:0;font-family:var(--mono);font-size:9px;padding:2px 7px;border:1px solid currentColor;border-radius:4px;background:none;cursor:pointer;color:inherit;opacity:.7;}
.problem-fix:hover{opacity:1;}

.cycle-panel{border-bottom:1px solid var(--border);background:var(--surface2);overflow-y:auto;max-height:260px;}
.cycle-panel-head{padding:8px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.cycle-panel-title{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--text2);}
.cycle-panel-close{background:none;border:none;color:var(--text3);cursor:pointer;font-size:14px;}
.cycle-panel-body{padding:8px 12px;}
.cycle-list{display:flex;flex-direction:column;gap:5px;}
.cycle-list-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid var(--border);border-radius:5px;cursor:pointer;transition:border-color .15s,background .15s;}
.cycle-list-item:hover{border-color:var(--accent3);background:var(--surface);}
.cycle-list-num{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--accent3);min-width:32px;}
.cycle-list-info{flex:1;}
.cycle-list-name{font-family:var(--mono);font-size:11px;color:var(--text);font-weight:500;}
.cycle-list-desc{font-family:var(--mono);font-size:9px;color:var(--text3);margin-top:1px;}
.cycle-back{background:none;border:none;color:var(--accent3);cursor:pointer;font-family:var(--mono);font-size:10px;padding:0;margin-bottom:8px;display:flex;align-items:center;gap:3px;}
.cycle-param-table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:10px;}
.cycle-param-table th{text-align:left;color:var(--text3);font-weight:500;font-size:9px;padding:3px 6px;border-bottom:1px solid var(--border);}
.cycle-param-table td{padding:5px 6px;border-bottom:1px solid var(--border);vertical-align:top;}
.cycle-param-table tr:last-child td{border-bottom:none;}
.cpq{color:var(--accent3);font-weight:700;}
.cpname{color:var(--text);font-weight:500;}
.cpdesc{color:var(--text3);font-size:9px;margin-top:1px;}
.cpunit{color:var(--text3);}
.cycle-insert-btn{margin-top:10px;width:100%;padding:7px;background:var(--accent);color:#fff;border:none;border-radius:5px;font-family:var(--mono);font-size:11px;cursor:pointer;font-weight:500;}
.cycle-insert-btn:hover{background:#0ea99a;}
.cycle-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:200;display:none;align-items:center;justify-content:center;}
.cycle-overlay.open{display:flex;}
.cycle-modal{background:var(--surface2);border:1px solid var(--border);border-radius:10px;width:90%;max-width:520px;max-height:85vh;display:flex;flex-direction:column;overflow:hidden;}
.cycle-modal-head{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.cycle-modal-head h3{font-family:var(--mono);font-size:13px;color:var(--text);margin:0;}
.cycle-modal-body{overflow-y:auto;padding:12px 16px;flex:1;}
.cycle-close{background:none;border:none;color:var(--text3);cursor:pointer;font-size:18px;line-height:1;}
/* Step 1 — cycle list */
.cycle-list{display:flex;flex-direction:column;gap:6px;}
.cycle-list-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:border-color .15s,background .15s;}
.cycle-list-item:hover{border-color:var(--accent3);background:var(--surface);}
.cycle-list-num{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--accent3);min-width:36px;}
.cycle-list-info{flex:1;}
.cycle-list-name{font-family:var(--mono);font-size:11px;color:var(--text);font-weight:500;}
.cycle-list-desc{font-family:var(--mono);font-size:10px;color:var(--text3);margin-top:2px;}
/* Step 2 — param panel */
.cycle-back{background:none;border:none;color:var(--accent3);cursor:pointer;font-family:var(--mono);font-size:11px;padding:0;margin-bottom:12px;display:flex;align-items:center;gap:4px;}
.cycle-param-table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11px;}
.cycle-param-table th{text-align:left;color:var(--text3);font-weight:500;font-size:10px;padding:4px 8px;border-bottom:1px solid var(--border);}
.cycle-param-table td{padding:7px 8px;border-bottom:1px solid var(--border);vertical-align:top;}
.cycle-param-table tr:last-child td{border-bottom:none;}
.cpq{color:var(--accent3);font-weight:700;}
.cpname{color:var(--text);font-weight:500;}
.cpdesc{color:var(--text3);font-size:10px;margin-top:2px;}
.cpunit{color:var(--text3);}
.cycle-insert-btn{margin-top:14px;width:100%;padding:9px;background:var(--accent);color:#fff;border:none;border-radius:6px;font-family:var(--mono);font-size:12px;cursor:pointer;font-weight:500;}
.cycle-insert-btn:hover{background:#0ea99a;}
/* ---------- context panel (fixed height, never jumps) ---------- */
.ctx-panel{min-height:72px;flex-shrink:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface2);display:flex;flex-direction:column;justify-content:center;padding:4px 8px;gap:3px;overflow:visible;position:relative;z-index:50;}
.ctx-panel:has(#_idleUndo){min-height:0;}
.ctx-panel:has(#apprDepPicker){min-height:0;}
.ctx-panel:has(#_idleUndo) .btn{background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:4px 8px;color:var(--text2);position:relative;}
.ctx-panel:has(#_idleUndo) .btn+.btn::before{content:none;}
.ctx-panel:has(#_idleUndo) .btn:hover:not(:disabled){color:var(--accent3);border-color:var(--accent3);background:var(--surface2);}
.ctx-panel:has(#_idleUndo) .btn:disabled{opacity:.35;background:var(--surface);}
.appr-dep-picker{box-sizing:border-box;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:6px;width:100%;min-width:0;padding:0;background:var(--surface2);}
.appr-dep-picker-group{display:grid;grid-template-columns:28px repeat(4,minmax(0,1fr));align-items:center;gap:3px;min-width:0;}
.appr-dep-picker-label{font-family:var(--mono);font-size:9px;font-weight:700;color:var(--accent3);letter-spacing:.02em;}
.appr-dep-picker-btn{min-width:0;min-height:26px;padding:2px 1px;border:1px solid rgba(157,163,176,.35);border-radius:4px;background:var(--key-pale);color:var(--text2);font-family:var(--mono);font-size:9px;font-weight:600;cursor:pointer;touch-action:manipulation;}
.appr-dep-picker-btn:hover,.appr-dep-picker-btn:focus-visible{color:var(--text);border-color:rgba(157,163,176,.55);background:var(--surface);outline:none;}
.appr-dep-picker-btn:active{transform:translateY(1px);background:var(--surface2);}
.help-popup{position:fixed;z-index:9500;max-width:300px;background:var(--surface);border:1px solid var(--accent);border-radius:8px;padding:10px 14px;box-shadow:0 4px 24px rgba(0,0,0,.5);font-family:var(--mono);pointer-events:none;}
.help-popup-title{font-size:11px;color:var(--accent);font-weight:600;margin-bottom:6px;}
.help-popup-desc{font-size:11px;color:var(--text2);line-height:1.6;}
.help-popup-ex{margin-top:6px;font-size:10px;color:var(--text3);}
.help-popup-ex code{color:var(--accent3);}
@media(max-width:1024px), (max-height:600px){
  .help-popup{bottom:12px;left:12px;right:12px;max-width:none;top:auto !important;}
}
@media(max-width:1024px), (max-height:600px){
  /* iOS Safari auto-zooms when a focused input has font-size < 16px. Force 16px on touch.
     Editor (#code) is excluded — its size is controlled by the A-/A+ buttons. */
  input[type="text"], input[type="number"], input[type="search"] {
    font-size:16px !important;
  }
}
/* row styles inside ctx-panel */
.ctx-row1{display:flex;align-items:center;gap:4px;min-height:26px;}
.ctx-row2{display:flex;align-items:center;gap:6px;min-height:30px;flex-wrap:wrap;}
.ctx-row1 .fbar-crumb-btn{font-family:var(--mono);font-size:11px;padding:3px 9px;border:1px solid var(--border);border-radius:5px;background:var(--surface);color:var(--text3);cursor:pointer;}
.ctx-row1 .fbar-crumb-btn.active{background:var(--accent);color:#fff;border-color:transparent;}
.ctx-row1 .fbar-crumb-btn:hover:not(.active){color:var(--text);border-color:var(--text3);}
.ctx-row1 .fbar-done{margin-left:auto;font-family:var(--mono);font-size:12px;background:var(--accent);color:#fff;border:none;border-radius:6px;padding:4px 12px;cursor:pointer;}
/* reuse fbar-* classes for row2 content */
.help-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:50;padding:20px;}
.help-overlay.open{display:flex;}
.help-modal{background:var(--surface);border:1px solid var(--border);border-radius:12px;max-width:640px;width:100%;max-height:80vh;overflow-y:auto;}
.help-modal h2{font-size:16px;padding:16px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;color:var(--text);}
.help-close{cursor:pointer;color:var(--text2);font-size:22px;line-height:1;background:none;border:none;}
.help-body{padding:8px 20px 20px;}
.help-cmd{border-bottom:1px solid var(--border);padding:12px 0;}
.help-cmd:last-child{border-bottom:none;}
.help-cmd code{font-family:var(--mono);font-size:12px;color:var(--accent3);background:var(--surface2);padding:2px 8px;border-radius:4px;}
.help-cmd p{font-size:13px;color:var(--text2);margin-top:6px;line-height:1.6;}
.help-cmd .ex{font-family:var(--mono);font-size:11px;color:var(--text3);margin-top:4px;}
.keypad{flex-shrink:0;border-bottom:1px solid var(--border);background:var(--surface);padding:4px 8px 6px;}
.kp-legend{font-family:var(--mono);font-size:9.5px;color:var(--text3);display:flex;gap:14px;align-items:center;margin-bottom:8px;flex-wrap:wrap;}
.kp-legend i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:-1px;}
.kp-sec-title{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);margin:2px 0 4px;}
.kp-grid{display:grid;gap:4px;grid-template-columns:repeat(auto-fit,minmax(46px,1fr));}
.kp-row{display:flex;flex-wrap:wrap;gap:4px;}
.kp-row .key{flex:0 0 40px;min-height:30px;}
.kp-row .key.path-wide{flex-basis:72px;min-width:72px;white-space:nowrap;}
.kp-row .key.appr-dep-key{flex-basis:40px;min-width:0;}
.key.pi .kl{font-size:15px;}
.kp-grid.prog{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;}
.key{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 3px;border-radius:5px;cursor:pointer;border:1px solid var(--border);background:var(--surface2);color:var(--text2);font-family:var(--mono);transition:transform .08s,background .15s,color .15s,border-color .15s;user-select:none;touch-action:manipulation;}
.key:active{transform:translateY(1px);}
.key svg{width:14px;height:14px;}
.key .kl{font-size:9px;font-weight:500;line-height:1;text-align:center;}
.key.off{color:var(--text2);background:var(--key-pale);border-color:rgba(157,163,176,.22);box-shadow:0 1px 0 rgba(255,255,255,.04) inset;}
.key.off:hover{background:var(--surface);color:var(--text);border-color:rgba(157,163,176,.4);}
.key.off .kl{font-size:10px;}
.key.appr-dep-key .kl{display:flex;flex-direction:column;gap:0;width:100%;max-width:28px;font-size:9px;line-height:.9;letter-spacing:.02em;white-space:nowrap;}
.key.appr-dep-key .kl span{display:block;text-align:center;}
.key.appr-dep-key .kl span+span{margin-top:2px;padding-top:2px;border-top:1px solid currentColor;}
#apprDepKey[aria-expanded="true"]{color:var(--accent);border-color:var(--accent);background:rgba(var(--accent-rgb),.18);}
.key.dis{opacity:.25;cursor:not-allowed;filter:grayscale(1);pointer-events:none;}
.key.pi-key{border-color:rgba(232,162,58,.4);color:var(--accent-warm);background:rgba(232,162,58,.08);}
.key.pi-key:hover{border-color:var(--accent-warm);background:rgba(232,162,58,.16);}
.key.on{background:#dcdee1;color:#191b1d;border-color:transparent;}
.key.on:hover{background:#edeef0;}
.key.prog{min-height:24px;padding:4px 9px;background:rgba(var(--accent-rgb),.1);border-color:rgba(var(--accent-rgb),.35);box-shadow:0 1px 0 rgba(255,255,255,.05) inset;}
.key.prog:hover{background:rgba(var(--accent-rgb),.18);color:var(--accent);border-color:var(--accent);}
.key.pi{background:var(--accent);color:#fff;border-color:transparent;}
.key.pi:hover{background:#0ea99a;}

.fbar-nav{font-family:var(--mono);font-size:13px;background:transparent;border:1px solid var(--border);border-radius:6px;color:var(--text2);cursor:pointer;padding:5px 9px;flex-shrink:0;}
.fbar-nav:hover{color:var(--text);border-color:var(--text3);}
.fbar-label{font-size:12px;color:var(--text2);min-width:78px;}
.fbar-mode{font-family:var(--mono);font-size:10px;padding:3px 7px;border-radius:5px;font-weight:500;flex-shrink:0;}
.fbar-mode.abs{background:var(--surface);color:var(--text3);border:1px solid var(--border);}
.fbar-mode.incr{background:rgba(74,158,255,.15);color:var(--accent3);border:1px solid var(--accent3);}
.fbar-pfx{font-family:var(--mono);font-size:14px;color:var(--accent3);}
.fbar-val{font-family:var(--mono);font-size:14px;color:var(--text);flex:1;min-width:40px;padding:6px 8px;background:var(--bg);border:1px solid var(--accent3);border-radius:6px;}
input.fbar-val{width:0;box-sizing:border-box;outline:none;}
input.fbar-val:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(var(--accent-rgb),.18);}
input.fbar-val::placeholder{color:var(--text3);opacity:1;}
.fbar-dr{display:flex;gap:6px;flex:1;}
.fbar-drbtn{flex:1;font-family:var(--mono);font-size:13px;padding:6px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);cursor:pointer;}
.fbar-drbtn.sel{background:var(--accent);color:#fff;border-color:transparent;}
.fbar-done{font-family:var(--mono);font-size:12px;background:var(--accent);color:#fff;border:none;border-radius:6px;padding:6px 12px;cursor:pointer;flex-shrink:0;}
.fbar-sug{display:none;}
.fbar-fmax{font-family:var(--mono);font-size:11px;background:none;border:1px solid var(--accent);color:var(--accent);border-radius:4px;padding:4px 8px;cursor:pointer;flex-shrink:0;}
.fbar-fmax:hover{background:rgba(20,184,166,.1);}
.fbar-feedmode{font-family:var(--mono);font-size:11px;background:var(--bg);border:1px solid var(--accent);color:var(--accent);border-radius:4px;padding:4px 4px;cursor:pointer;flex-shrink:1;min-width:0;max-width:100px;}
.fbar-feedmenu-wrap{position:relative;flex-shrink:0;}
.fbar-feedmode-btn{min-width:58px;max-width:none;}
.fbar-feedmenu{display:none;position:absolute;right:0;top:calc(100% + 5px);z-index:100;min-width:118px;padding:4px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;box-shadow:0 5px 18px rgba(0,0,0,.32);}
.fbar-feedmenu.open{display:flex;flex-direction:column;gap:2px;}
.fbar-feedmenu button{font-family:var(--mono);font-size:11px;text-align:left;padding:6px 8px;border:0;border-radius:4px;background:transparent;color:var(--text2);cursor:pointer;white-space:nowrap;}
.fbar-feedmenu button:hover,.fbar-feedmenu button:focus-visible{background:var(--bg);color:var(--text);outline:none;}
.fbar-sug button{font-family:var(--mono);font-size:11px;padding:5px 10px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text2);cursor:pointer;}
.fbar-sug button:hover{background:var(--bg);color:var(--text);border-color:var(--accent3);}
.fbar-sug button.max{border-color:var(--accent);color:var(--accent);}

.fbar-crumb-btn{font-family:var(--mono);font-size:11px;padding:3px 9px;border:1px solid var(--border);border-radius:5px;background:var(--surface);color:var(--text3);cursor:pointer;}
.fbar-crumb-btn.active{background:var(--accent);color:#fff;border-color:transparent;}
.fbar-crumb-btn:hover:not(.active){color:var(--text);border-color:var(--text3);}
@media(max-width:1024px), (max-height:600px){
  /* Mobile = one long naturally-scrolling page. Override desktop's fixed-viewport layout. */
  html{height:auto;overflow:visible;}
  body{height:auto;min-height:100%;display:block;overflow-x:hidden;overflow-y:visible;}
  .sim-container{flex:none;display:block;overflow:visible;min-height:0;}
  .sim-main{display:block;flex:none;overflow:visible;min-height:0;}
  .editor-panel{width:100%;min-width:0;max-width:none;border-right:none;border-bottom:1px solid var(--border);display:block;}
  .editor-wrap{display:flex;height:auto;min-height:200px;max-height:60vh;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
  .canvas-panel{display:block;}
  .view-area{height:380px;min-height:380px;position:relative;overflow:hidden;}
  #view3d, #view2d, #viewTools{position:absolute;inset:0;width:100%;height:100%;}
  .disclaimer-bar{padding:16px 16px 8px;}
  .disclaimer-bar p{text-align:center;font-size:10px;line-height:1.7;}
  .header-badges{display:flex;}
  .header-badges .badge{display:none;}
  .logo-text{font-size:13px;}
  .toolbar{padding:8px 10px;gap:5px;flex-wrap:wrap;}
  .speed-ctrl{margin-left:0;}
  .btn{padding:8px 12px;font-size:11px;}
  .info-section{padding:20px 16px;}
  .kp-grid{grid-template-columns:repeat(auto-fit,minmax(62px,1fr));}
  .ph-title{display:none;}
  .ph-blocks{display:none;}
  .logo-sub{display:none;}
  .status-bar #posDisplay{display:none;}
  /* Running-block text (core/voxel-cutting.js updateStatus) varies wildly in
     length per source line; wrapping to 2 lines vs 1 made the bar jump height
     between blocks. Force one line + ellipsis so the bar height stays fixed. */
  .status-bar{flex-wrap:nowrap;}
  .status-bar #statusMsg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
  :root{--editor-fs:13px;}
  /* compact editor chrome: no icons in panel-header buttons, less height */
  .ph-ico{display:none;}
  .ph-btn{white-space:nowrap;}
  /* Path functions keys: one single row across the full width */
  .kp-row{flex-wrap:nowrap;}
  .kp-row .key{flex:1 1 0 !important;min-width:0;padding:2px 0;}
  .kp-row .key.path-wide{min-width:0;}
  /* 3D tab: transport buttons fill row 1, quality + speed fill row 2 */
  body[data-mtab="view"] .canvas-panel{overflow:hidden;}
  body[data-mtab="view"] .toolbar{overflow:hidden;}
  /* Capped so these keep growing proportionally on a phone but stop at a
     sane button size instead of stretching edge-to-edge on tablet widths
     (this layout applies up to 1024px, not just phones). */
  body[data-mtab="view"] .toolbar .btn-run,
  body[data-mtab="view"] .toolbar .btn-step,
  body[data-mtab="view"] .toolbar .btn-stop{flex:1 1 20%;max-width:150px;justify-content:center;height:34px;min-height:34px;padding:0 8px;font-size:11px;}
  body[data-mtab="view"] .toolbar .btn-reset{flex:0 1 auto;height:34px;min-height:34px;padding:0 10px;font-size:11px;}
  body[data-mtab="view"] .toolbar > div:has(#qualityGroup){flex:1 1 42%;max-width:260px;}
  body[data-mtab="view"] .toolbar #qualityGroup{display:flex;}
  body[data-mtab="view"] .toolbar #qualityGroup .btn-tog{flex:1;min-height:0;height:34px;padding:0 10px;display:flex;align-items:center;justify-content:center;}
  body[data-mtab="view"] .toolbar .speed-ctrl{flex:1 1 42%;max-width:260px;justify-content:space-between;height:36px;box-sizing:border-box;}
  body[data-mtab="view"] .toolbar .speed-btn{height:34px;padding:0 14px;display:flex;align-items:center;}
  body[data-mtab="view"] .toolbar .speed-val{display:flex;align-items:center;justify-content:center;}
  /* view switcher tabs (3D / XY toolpath / Tool Table) share the width evenly,
     capped so they don't stretch edge-to-edge on tablet widths (same issue as
     the transport/quality/speed controls above). */
  body[data-mtab="view"] .view-tabs .tab{flex:1;max-width:190px;text-align:center;padding-left:4px;padding-right:4px;}
  .panel-header{padding:5px 10px;}
  .ph-btn{padding:3px 9px !important;min-height:30px !important;}
  .ctx-panel:has(#_idleUndo) .btn{min-height:30px !important;padding:2px 8px !important;font-size:10px;}
  .ctx-panel{padding-top:4px;padding-bottom:4px;}
}
/* ── Touch targets ≥44px (Apple HIG / Material You) ────────── */
@media(pointer:coarse){
  .btn-run,.btn-step,.btn-stop{height:44px;padding:0 14px;}
  .btn-reset{width:auto;height:44px;padding:0 14px;}
  .btn-reset svg{width:22px;height:22px;}
  .btn{min-height:44px;padding:8px 14px;}
  .speed-btn{padding:10px 14px;}
  .tab{padding:12px 18px;}
  .key{min-height:44px;}
  .kp-row .key{flex:0 0 46px;min-height:44px;}
  .kp-row .key.appr-dep-key{flex-basis:46px;min-width:46px;}
  .appr-dep-picker-btn{min-height:30px;}
  .ph-btn{padding:6px 12px;min-height:36px;}
  .fbar-crumb-btn{padding:8px 14px;font-size:12px;}
  .fbar-drbtn{padding:10px 8px;}
  .fbar-nav{padding:9px 13px;font-size:14px;}
  .btn-group .btn-tog{padding:10px 12px;}
  .speed-val{min-width:52px;}
  /* toggleKpHelp() (core/help-popups.js) skips hover-help mode on pointer:coarse
     and opens the full reference modal instead, so tapping a column header does
     nothing there — hide the hint that describes the desktop-only hover flow. */
  .tt-help-hint{display:none;}
  .cycle-list-item{padding:14px 12px;}
}
/* ── Safe area insets — notch / home indicator (iOS & Android) */
@supports(padding:env(safe-area-inset-bottom)){
  header{
    padding-left:max(20px,env(safe-area-inset-left));
    padding-right:max(20px,env(safe-area-inset-right));
  }
  .status-bar{
    padding-bottom:max(6px,env(safe-area-inset-bottom));
    padding-left:max(14px,env(safe-area-inset-left));
    padding-right:max(14px,env(safe-area-inset-right));
  }
}

/* ── Learn mode — docked panel (course column, visually separate) ── */
html[data-theme="light"] #learnPanel,html[data-theme="light"] #learnMobileBar{--accent:#087f73;--accent2:#08745b;--accent-warm:#a84b08;--accent-rgb:8,127,115;}
.learn-cta{background:var(--accent) !important;color:#fff !important;border-color:var(--accent) !important;font-weight:500 !important;font-size:13px !important;padding:2px 8px !important;letter-spacing:.02em;}
.learn-cta:hover{filter:brightness(1.12);}
#learnPanel{width:400px;min-width:340px;max-width:460px;flex-shrink:0;display:flex;flex-direction:column;border-right:2px solid var(--accent);background:var(--surface2);overflow:hidden;}
.lp-head{display:flex;align-items:center;gap:8px;padding:10px 14px;background:linear-gradient(90deg,rgba(20,184,166,.18),transparent 70%);border-bottom:1px solid var(--border);flex-shrink:0;}
.lp-head .lp-title{font-family:var(--mono);font-size:13.5px;font-weight:600;color:var(--text);flex:1;line-height:1.35;}
.lp-head .lp-x{background:none;border:0;color:var(--text3);font-size:16px;cursor:pointer;padding:2px 6px;flex-shrink:0;}
.lp-body{flex:1;overflow-y:auto;padding:14px;}
.lp-foot{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--border);background:var(--surface2);flex-shrink:0;}
.lp-body p{font-size:14.5px;line-height:1.65;color:var(--text2);margin:0 0 11px;font-family:var(--sans);}
.lp-body p b{color:var(--text);font-weight:600;}
.lp-body code{font-family:var(--mono);font-size:13px;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:1px 5px;}
.learn-snippet{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:11px 13px;font-family:var(--mono);font-size:13px;line-height:1.65;margin:0 0 11px;overflow-x:auto;white-space:pre;}
.learn-svg{display:block;width:100%;margin:0 0 11px;}
.learn-svg text[font-size="8.5"],.learn-svg text[font-size="9"],.learn-svg text[font-size="9.5"]{font-size:10.5px;}
.learn-prog{display:flex;gap:5px;margin-bottom:12px;}
.learn-prog button{height:24px;flex:1;border:0;background:transparent;display:block;cursor:pointer;padding:0;position:relative;}
.learn-prog button:after{content:'';position:absolute;left:0;right:0;top:10px;height:4px;border-radius:2px;background:var(--border);}
.learn-prog button.on:after{background:var(--accent);}
.learn-list{display:flex;flex-direction:column;gap:7px;}
.learn-li{display:flex;width:100%;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:8px;background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;text-align:left;font-family:var(--sans);}
.learn-li:hover{border-color:var(--accent);background:var(--surface2);box-shadow:0 2px 8px rgba(0,0,0,.12);}
.learn-li:focus-visible,.learn-prog button:focus-visible,.lp-btn:focus-visible,.lp-x:focus-visible{outline:3px solid var(--accent3);outline-offset:2px;}
.learn-li.lock{opacity:.55;cursor:default;border-left-color:var(--border);}
.learn-li.lock:hover{border-color:var(--border);background:var(--surface);box-shadow:none;}
.learn-li .li-num{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--accent);min-width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;background:rgba(var(--accent-rgb),.14);border-radius:5px;flex-shrink:0;}
.learn-li .li-t{flex:1;font-size:14px;color:var(--text);line-height:1.35;}
.learn-li .li-st{font-family:var(--mono);font-size:11px;flex-shrink:0;}
/* "Start here" intro card — highlighted, sits apart from the numbered course */
.learn-li.intro{border-color:var(--accent);background:linear-gradient(90deg,rgba(var(--accent-rgb),.16),var(--surface) 62%);box-shadow:0 2px 12px rgba(var(--accent-rgb),.12);margin-bottom:4px;}
.learn-li.intro:hover{background:linear-gradient(90deg,rgba(var(--accent-rgb),.24),var(--surface2) 70%);}
.learn-li .li-num.intro{color:#fff;background:var(--accent);font-size:12px;}
.learn-li .li-eyebrow{display:block;font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.14em;color:var(--accent);margin-bottom:2px;}
.learn-summary{font-family:var(--mono);font-size:12px;color:var(--text2);padding:8px 10px;margin:0 0 10px;border-radius:7px;background:rgba(var(--accent-rgb),.10);border:1px solid rgba(var(--accent-rgb),.35);}
.lp-task-badge{display:inline-block;background:var(--accent);color:#fff;font-family:var(--mono);font-size:11px;font-weight:600;padding:3px 10px;border-radius:10px;margin-bottom:9px;letter-spacing:.04em;}
.lp-prompt{font-size:15.5px;line-height:1.55;color:var(--text);font-weight:600;margin:0 0 8px;font-family:var(--sans);}
.lp-check{display:flex;gap:8px;font-size:13px;color:var(--text2);align-items:flex-start;font-family:var(--mono);line-height:1.45;padding:3px 0;}
.lp-check .c-ic{width:14px;flex-shrink:0;text-align:center;}
.lp-check .c-lb{flex:1;min-width:0;}
.lp-check.ok .c-ic{color:#5dcaa5;}
.lp-check.bad .c-ic{color:#e24b4a;}
.lp-check .c-hint{display:block;color:#f0a94a;font-size:12px;margin-top:3px;line-height:1.4;}
.lp-success{display:flex;align-items:flex-start;gap:8px;margin-top:12px;padding:10px 13px;border-radius:7px;background:rgba(93,202,165,.14);border:1px solid rgba(93,202,165,.5);color:#5dcaa5;font-size:13.5px;font-weight:600;font-family:var(--sans);line-height:1.45;}
.lp-btn{font-family:var(--mono);font-size:12.5px;padding:8px 14px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--text2);cursor:pointer;white-space:nowrap;}
.lp-btn:hover{border-color:var(--text3);color:var(--text);}
.lp-btn.pri{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;}
.lp-btn.chk{background:#5dcaa5;border-color:#5dcaa5;color:#04342c;font-weight:700;}
html[data-theme="light"] .lp-btn.chk{background:#45b992;border-color:#27866d;color:#042c25;}
.lp-btn.grow{flex:1;text-align:center;}
.lp-slides{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:12px;}
.lp-slide-view{padding-right:2px;}
.lp-slide-n{font-family:var(--mono);font-size:11px;color:var(--text3);flex-shrink:0;}
.lp-slides-nav{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.lp-slides-nav .lp-btn{padding:6px 14px;font-size:16px;font-weight:700;color:var(--accent);border-color:var(--accent);line-height:1;}
.lp-slides-nav .learn-prog{flex:1;margin:0;}
.lp-slides-nav .lp-slide-arrow{width:44px;min-width:44px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:22px;}
.lp-slides-nav .lp-btn:hover:not(:disabled){background:var(--accent);color:#fff;}
.lp-slides-nav .lp-btn:disabled{opacity:.35;cursor:default;}
html[data-theme="light"] .learn-svg [fill="#f0a94a"]{fill:#945000;}
html[data-theme="light"] .learn-svg [stroke="#f0a94a"]{stroke:#945000;}
html[data-theme="light"] .learn-svg [fill="#5dcaa5"]{fill:#176b58;}
html[data-theme="light"] .learn-svg [stroke="#5dcaa5"]{stroke:#176b58;}
@media(pointer:coarse){ .lp-btn{min-height:40px;padding:8px 12px;} .learn-li{padding:13px 12px;} }
@media(max-width:1024px), (max-height:600px){
  #learnPanel{width:100%;min-width:0;max-width:none;border-right:none;border-bottom:2px solid var(--accent);}
  .lp-body{max-height:52vh;}
}


.ft-mini{display:none;}
@media(max-width:1024px), (max-height:600px){
  footer .ft-full{display:none !important;}
  footer{display:none;}
  .ft-mini{display:none;}
}
/* Scroll rail removed — the mobile 3D tab is a fixed (non-scrolling) layout now. */
.scroll-rail{display:none !important;}
/* ── Mobile bottom tabs: Editor / 3D / Learn (desktop untouched) ── */
@media(max-width:1024px), (max-height:600px){
  /* overflow-x:clip (unlike hidden) does NOT create a scroll container,
     so page scrolling stays with the document */
  html, body{overflow-x:clip;}
  .panel-header{flex-wrap:wrap;gap:6px 8px;justify-content:flex-start;}
  .panel-header > *{min-width:0;max-width:100%;}
  .toolbar{max-width:100%;}
}

.mtab-bar{display:none;}
#learnMobileBar{display:none;}
@media(max-width:1024px), (max-height:600px){
  .mtab-bar{position:fixed;left:0;right:0;bottom:0;z-index:8000;display:flex;background:var(--surface2);border-top:1px solid var(--border);height:calc(46px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);box-sizing:border-box;transform:translateZ(0);}
  .mtab-bar button{flex:1;background:none;border:none;border-top:3px solid transparent;color:var(--text3);font-family:var(--mono);font-size:9.5px;padding:3px 4px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;transition:background .15s,color .15s;text-decoration:none;box-sizing:border-box;}
  .mtab-bar button .mi{font-size:0;line-height:0;display:flex;}
  .mtab-bar button .mi svg{width:23px;height:23px;display:block;}
  .mtab-bar button.on{color:var(--accent);background:rgba(var(--accent-rgb),.14);border-top-color:var(--accent);font-weight:700;}
  .mtab-bar button.on .mi svg{transform:scale(1.08);}
  body{padding-bottom:50px;}
  /* tab visibility */
  body[data-mtab="editor"] .canvas-panel{display:none !important;}
  body[data-mtab="editor"] #learnPanel{display:none !important;}
  body[data-mtab="view"] #learnPanel{display:none !important;}
  body[data-mtab="view"] .editor-panel > :not(.toolbar){display:none !important;}
  body[data-mtab="view"] .editor-panel{border-bottom:none;}
  body[data-mtab="learn"] .editor-panel{display:none !important;}
  body[data-mtab="learn"] .canvas-panel{display:none !important;}
  /* Learn tab = full-height app-like layout (same pattern as the 3D tab), so
     #learnPanel fills down to just above the bottom tab bar instead of ending at
     its content height and leaving a strip of bare near-black page background
     below it. lp-body then flexes to fill (was capped at an arbitrary
     100svh-220px, which is what left the dead space at the bottom). */
  /* Once a mobile section is active, the bottom tabs are the final flex row
     instead of a viewport-fixed overlay. This keeps them visible while mobile
     browser chrome expands/collapses and lets --vvh track the true viewport. */
  body[data-mtab] .mtab-bar{position:relative;left:auto;right:auto;bottom:auto;flex-shrink:0;transform:none;}
  body[data-mtab="learn"]{height:100svh;height:var(--vvh,100dvh);overflow:hidden;display:flex;flex-direction:column;padding-bottom:0;box-sizing:border-box;}
  html:has(body[data-mtab="learn"]){overflow:hidden;height:100%;}
  body[data-mtab="learn"] .sim-container,
  body[data-mtab="learn"] .sim-main{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;}
  body[data-mtab="learn"] #learnPanel{flex:1;min-height:0;}
  body[data-mtab="learn"] #learnPanel .lp-body{max-height:none;flex:1;min-height:0;}
  /* 3D tab = fixed app-like layout (no page scroll). */
  body[data-mtab="view"]{height:100svh;height:var(--vvh,100dvh);overflow:hidden;display:flex;flex-direction:column;padding-bottom:0;box-sizing:border-box;}
  html:has(body[data-mtab="view"]){overflow:hidden;height:100%;}
  body[data-mtab="view"] .sim-container,
  body[data-mtab="view"] .sim-main{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;}
  body[data-mtab="view"] .canvas-panel{flex:1;display:flex;flex-direction:column;min-height:0;}
  body[data-mtab="view"] .view-area{flex:1;height:auto;min-height:0;}

  /* --- Editor tab: fixed chrome + a bounded, independently scrolling code
     viewport. The text begins below the controls and cannot pass behind them;
     opening/closing a context or practice row simply changes the remaining
     editor height. --- */
  body[data-mtab="editor"]{height:100svh;height:var(--vvh,100dvh);overflow:hidden;display:flex;flex-direction:column;padding-bottom:0;box-sizing:border-box;}
  html:has(body[data-mtab="editor"]){overflow:hidden;height:100%;}
  body[data-mtab="editor"] .sim-container,
  body[data-mtab="editor"] .sim-main{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;}
  /* Fixed editor column — the textarea below is the only scroll owner. */
  body[data-mtab="editor"] .editor-panel{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding-bottom:0;box-sizing:border-box;width:100%;}
  html.kbd-open body[data-mtab="editor"]{height:var(--vvh,100svh);padding-bottom:0;}
  html.kbd-open .mtab-bar{display:none;}
  /* Code fills exactly the space left between controls and bottom tabs. */
  body[data-mtab="editor"] .editor-wrap{display:flex;flex:1;height:auto !important;min-height:0;max-height:none !important;overflow:hidden !important;overscroll-behavior:contain !important;}
  body[data-mtab="editor"] .line-nums{min-height:0 !important;}
  body[data-mtab="editor"] .code-area-wrap{overflow:hidden;position:relative;}
  body[data-mtab="editor"] #code{position:absolute;inset:0;width:100%;height:100% !important;min-height:0;overflow:auto;resize:none;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:28px;}
  body[data-mtab="editor"] #hlLayer{position:absolute;inset:0;height:100%;padding-bottom:28px;}
  #editScrollRail{display:none !important;}

  /* Practice is a real flex row above the bounded code viewport. */
  #learnMobileBar.on{display:block;box-sizing:border-box;width:100%;background:var(--surface2);border:1px solid var(--accent);border-left:4px solid var(--accent);border-bottom-width:2px;border-radius:0 6px 6px 0;padding:7px 12px 8px;max-height:30vh;overflow-y:auto;scrollbar-gutter:stable;}
  body[data-mtab="editor"] .panel-header,
  body[data-mtab="editor"] .keypad,
  body[data-mtab="editor"] .cycle-panel,
  body[data-mtab="editor"] .ctx-panel,
  body[data-mtab="editor"] #learnMobileBar.on{position:relative;top:auto;flex-shrink:0;}
  /* Interactive editing panels stay in normal flow below the keypad. */
  #learnMobileBar.on .lp-prompt{color:var(--text);font-size:13.5px;line-height:1.35;margin:0;}
  #learnMobileBar.on .lp-theory{display:none;}
  #learnMobileBar .lp-foot{margin:7px -12px -8px;border-radius:0;}
  /* When the on-screen keyboard is open, hide the practice task panel so the
     editor is fully visible while typing. It reappears automatically the moment
     the keyboard is dismissed. Rides on the same visualViewport detection that
     hides the bottom tab bar, so no extra keyboard logic is needed. */
  html.kbd-open body[data-mtab="editor"] #learnMobileBar.on{display:none !important;}
  /* reclaim vertical space during practice: hide the app header on mobile */
  body.practice-on[data-mtab="editor"] > header{display:none;}
  /* and hide the Learn/Help/Export/Import row during practice (not needed there) */
  body.practice-on[data-mtab="editor"] .panel-header{display:none;}
}


/* ── Learn: progressive hints and first-run coach ───────────────────── */
.lp-hints{margin-top:8px;display:flex;flex-direction:column;gap:6px;}
.lp-hint-row{display:flex;gap:8px;align-items:flex-start;background:rgba(240,169,74,.07);
  border-left:2px solid #f0a94a;border-radius:0 6px 6px 0;padding:7px 9px;}
.lp-hint-n{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:#f0a94a;flex:0 0 auto;padding-top:2px;}
.lp-hint-b{font-size:12.5px;line-height:1.5;color:var(--text2);}
.lp-hint-b code{font-family:var(--mono);font-size:12px;}
.lp-btn.hint{border-color:rgba(240,169,74,.5);color:#f0a94a;}
.lp-btn.hint.spent{opacity:.35;}

#learnCoach{position:fixed;inset:0;z-index:9000;}
#learnCoach .coach-hole{position:fixed;border-radius:8px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(0,0,0,.66);outline:2px solid var(--accent);
  transition:left .2s,top .2s,width .2s,height .2s;}
#learnCoach .coach-tip{position:fixed;background:#211f1d;border:1px solid var(--accent);
  border-radius:10px;padding:12px 13px;box-shadow:0 12px 34px rgba(0,0,0,.5);}
#learnCoach .coach-n{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--text3);}
#learnCoach .coach-t{font-size:14px;font-weight:600;color:var(--text);margin:3px 0 5px;}
#learnCoach .coach-d{font-size:12.5px;line-height:1.55;color:var(--text2);}
#learnCoach .coach-btns{display:flex;gap:8px;margin-top:11px;}
#learnCoach .coach-btns .grow{flex:1;}

/* unified control heights in the toolbar (desktop pointers only) */
@media(pointer:fine){
  .toolbar .btn-group .btn-tog{height:30px;padding:0 10px;display:flex;align-items:center;}
  .toolbar .speed-btn{height:30px;padding:0 12px;display:flex;align-items:center;}
  .toolbar .speed-val{height:30px;display:inline-flex;align-items:center;justify-content:center;}
}

/* themed scrollbars (panels, editor, modals) */
*{scrollbar-width:thin;scrollbar-color:var(--border) transparent;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:5px;border:2px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:var(--text3);border:2px solid transparent;background-clip:content-box;}

/* ── Learn practice: one task card, one goal list, one pinned action row ──
   Colour carries meaning and nothing else: teal = structure and navigation,
   green = a goal that is met, amber = a hint. The task card is the only
   filled surface in the panel, so "what am I being asked?" is answered by
   looking, not by reading captions. */
.lp-head .lp-back{padding:2px 9px;font-size:17px;line-height:1;color:var(--accent);border-color:transparent;background:none;}
.lp-head .lp-back:hover{border-color:var(--accent);}
.lp-head .lp-cap{font-size:15px;}

.lp-task{border:1px solid rgba(var(--accent-rgb),.55);border-left:4px solid var(--accent);border-radius:9px;
  background:rgba(var(--accent-rgb),.10);padding:11px 13px 10px;}
.lp-task-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;}
.lp-task .lp-prompt{margin:0;font-size:15.5px;line-height:1.5;}
.lp-where{margin-top:8px;padding-top:8px;border-top:1px solid rgba(var(--accent-rgb),.25);
  font-family:var(--mono);font-size:11px;line-height:1.45;color:var(--text3);}
.lp-where code{font-size:11px;padding:0 3px;}

/* Theory during practice: reference behind one disclosure, never a slideshow */
.lp-theory{margin-top:10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);overflow:hidden;}
.lp-theory:not([open]){background:rgba(93,202,165,.075);border-color:rgba(93,202,165,.30);}
.lp-theory:not([open])>.lp-theory-sum{background:linear-gradient(90deg,rgba(93,202,165,.08),transparent);}
html[data-theme="light"] .lp-theory:not([open]){background:rgba(23,107,88,.075);border-color:rgba(23,107,88,.28);}
.lp-theory-sum{padding:9px 12px;cursor:pointer;list-style:none;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;color:var(--text2);user-select:none;}
.lp-theory-sum::-webkit-details-marker{display:none;}
.lp-theory-sum:before{content:'\203A';display:inline-block;width:12px;color:var(--accent);
  transform:rotate(90deg);transition:transform .15s;}
.lp-theory[open]>.lp-theory-sum:before{transform:rotate(-90deg);}
.lp-theory-sum:hover{color:var(--text);}
.lp-theory-sum:focus-visible{outline:3px solid var(--accent3);outline-offset:-3px;}
.lp-theory-body{padding:4px 12px 10px;border-top:1px solid var(--border);background:var(--bg);}
.lp-theory-sep{height:1px;background:var(--border);margin:14px 0;}

.lp-results{margin-top:10px;border:1px solid rgba(226,75,74,.42);border-radius:8px;padding:9px 10px;background:rgba(226,75,74,.045);}
.lp-results.all-ok{border-color:rgba(93,202,165,.45);background:rgba(93,202,165,.06);}
.lp-results-cap{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--text3);}
.lp-results-n{font-weight:800;letter-spacing:0;color:#e24b4a;}
.lp-results.all-ok .lp-results-n{color:#5dcaa5;}

.lp-foot .lp-solve{opacity:.22;border-color:transparent;padding:8px 7px;}
.lp-foot .lp-solve:hover{opacity:.5;}
.lp-practice-locked{justify-content:center;color:var(--text3);font-family:var(--mono);
  font-size:10.5px;text-align:center;line-height:1.4;}
.lp-quiet{font-size:11px;color:var(--text3);border-color:transparent;}
.learn-reset-row{text-align:center;margin-top:14px;}

.li-st.done{color:#5dcaa5;}
.li-st.part{color:var(--accent);}
.li-st.assisted{color:#f0a94a;}

.learn-answer-head{display:none;}
.lp-where{display:flex;align-items:center;gap:8px;}
.lp-where-arrow{display:inline-flex;width:20px;height:20px;flex:0 0 20px;align-items:center;justify-content:center;
  border-radius:50%;background:var(--accent);color:#fff;font-size:13px;font-weight:800;}
.lp-theory-sum{display:flex;align-items:center;gap:8px;min-height:52px;box-sizing:border-box;}
.lp-theory-sum-copy{display:flex;min-width:0;flex:1;flex-direction:column;gap:2px;}
.lp-theory-sum-title{color:var(--accent);font-weight:800;}
.lp-theory-sum-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2);
  font-family:var(--sans);font-size:12px;letter-spacing:0;}
.lp-theory-sum-meta{flex-shrink:0;color:var(--text3);font-family:var(--mono);font-size:9.5px;letter-spacing:0;}
.lp-theory-body{padding:10px;}
.lp-theory-slides{margin:0;border:0;border-radius:6px;background:transparent;padding:0;}
.lp-theory-slides .learn-prog{flex:1;margin-bottom:0;}
.lp-theory-slides .lp-slide-view{padding:2px 2px 0;}

/* Desktop practice: lesson, editor and result are equal thirds. The external
   question header mirrors the task directly above the code; core still renders
   practice once for every layout. */
@media (min-width:1025px) and (min-height:601px){
  body.learn-desktop-open:not(.learn-desktop-practice) #learnPanel{
    width:33.333333% !important;
    min-width:0;
    max-width:none;
    box-sizing:border-box;
  }
  body.learn-desktop-practice #learnPanel,
  body.learn-desktop-practice .editor-panel,
  body.learn-desktop-practice .canvas-panel{
    width:33.333333% !important;
    min-width:0;
    max-width:none;
    flex:0 0 33.333333%;
    box-sizing:border-box;
  }
  body.learn-desktop-practice #learnPanel{
    background:var(--surface);
  }
  body.learn-desktop-practice .editor-panel{
    border-right-color:rgba(var(--accent-rgb),.55);
  }
  body.learn-desktop-practice .panel-resize{display:none;}
  body.learn-desktop-practice .editor-panel>.panel-header{display:none;}
  body.learn-desktop-practice .learn-answer-head{
    display:flex;
    min-height:96px;
    flex-shrink:0;
    align-items:flex-start;
    padding:11px 15px 12px 17px;
    box-sizing:border-box;
    background:linear-gradient(135deg,rgba(240,169,74,.30),rgba(240,169,74,.12) 78%);
    border-top:1px solid rgba(240,169,74,.72);
    border-bottom:1px solid rgba(240,169,74,.85);
    box-shadow:inset 5px 0 0 #f0a94a;
  }
  .learn-answer-head .lah-copy{display:flex;min-width:0;width:100%;flex-direction:column;gap:5px;}
  .learn-answer-head .lah-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .learn-answer-head .lah-kicker{display:inline-flex;align-self:flex-start;font-family:var(--mono);
    font-size:10px;line-height:1;font-weight:800;letter-spacing:.12em;color:#17120a;
    background:#f0a94a;border:1px solid #ffc868;border-radius:999px;padding:5px 9px;}
  .learn-answer-head .lah-title{font-family:var(--sans);font-size:15px;line-height:1.42;font-weight:650;color:var(--text);}
  .learn-answer-head .lah-title code{font-family:var(--mono);font-size:.9em;color:var(--text);
    background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:1px 4px;}
  .learn-answer-head .lah-direction{display:block;margin-top:5px;padding:0;
    border:0;background:none;font-family:var(--mono);font-size:10px;
    line-height:1.35;font-weight:400;color:rgba(255,224,163,.78);}
  html[data-theme="light"] body.learn-desktop-practice .learn-answer-head{
    background:linear-gradient(135deg,#fff0ad,#fff8d9 78%);
    border-color:#b97708;
    box-shadow:inset 5px 0 0 #c9850b;
  }
  html[data-theme="light"] .learn-answer-head .lah-direction{color:#73551e;}
  body.learn-desktop-practice .editor-wrap{
    border-top:0;
    box-shadow:inset 4px 0 0 var(--accent),inset 0 0 0 1px rgba(var(--accent-rgb),.22);
  }
  body.learn-desktop-practice .line-nums{background:rgba(var(--accent-rgb),.045);}
  body.learn-desktop-practice .code-area-wrap{
    background:linear-gradient(180deg,rgba(var(--accent-rgb),.035),transparent 120px),var(--surface);
  }
  body.learn-desktop-practice #learnPanel .lp-body{padding:12px;}
  body.learn-desktop-practice .lp-task{
    display:none;
  }
  body.learn-desktop-practice .lp-theory{margin-top:0;}
}