.typing-page { min-height:100vh; background:var(--paper); }
.typing-shell { width:min(1480px,calc(100% - 48px)); margin:0 auto; padding-bottom:36px; }
.typing-topbar { border-bottom-color:#cbd0c5; }
.typing-mode { display:flex; align-items:center; gap:8px; color:var(--green-dark); font:600 10px "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
.typing-mode i { width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px rgba(27,128,105,.12); }

.typing-intro { min-height:250px; display:grid; grid-template-columns:1.08fr .92fr; align-items:end; gap:70px; padding:44px 5.5% 38px; border-bottom:1px solid var(--line); }
.typing-intro h1 { margin:0; font:700 clamp(42px,5.4vw,70px)/.93 "Playfair Display",Georgia,serif; letter-spacing:-.05em; }
.typing-intro h1 em { color:var(--green); }
.typing-intro-copy { max-width:560px; justify-self:end; }
.typing-intro-copy > p { margin:0; color:#50605c; font-size:13px; line-height:1.72; }
.typing-controls { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:10px; margin-top:21px; }
.typing-controls label { min-width:0; }
.typing-controls label span { display:block; margin-bottom:7px; color:var(--muted); font:500 9px "DM Mono",monospace; letter-spacing:.09em; text-transform:uppercase; }
.typing-controls select { width:100%; min-height:43px; background-color:#f7f6ee; }
.typing-controls button { min-height:43px; padding:0 14px; border:1px solid var(--ink); background:transparent; color:var(--ink); font-size:10px; font-weight:800; white-space:nowrap; transition:background .15s,color .15s,transform .15s; }
.typing-controls button:hover { transform:translateY(-1px); background:var(--ink); color:var(--lime); }
.typing-controls button b { margin-left:7px; font-size:15px; }

.typing-stats { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line); }
.typing-stats > div { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:0 27px; border-right:1px solid var(--line); }
.typing-stats > div:last-child { border-right:0; }
.typing-stats span { color:var(--muted); font:500 9px "DM Mono",monospace; letter-spacing:.1em; text-transform:uppercase; }
.typing-stats strong { color:var(--ink); font:500 23px "DM Mono",monospace; font-variant-numeric:tabular-nums; }
.typing-stats strong b { font:inherit; }
.typing-stats strong small { color:var(--muted); font-size:8px; letter-spacing:0; text-transform:none; }

.typing-workspace { display:grid; grid-template-columns:minmax(0,1fr) 350px; align-items:stretch; border-bottom:1px solid var(--line); }
.typing-editor-panel { min-width:0; background:#101e25; color:#e7eee8; }
.dual-editor-head { min-height:82px; display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid #334549; }
.dual-editor-head > div { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:19px 22px; }
.dual-editor-head > div:first-child { border-right:1px solid #334549; }
.dual-editor-head .eyebrow { margin:0; color:var(--lime); }
.dual-editor-head span { color:#93a29d; font:500 9px "DM Mono",monospace; }
.dual-editors { display:grid; grid-template-columns:1fr 1fr; min-width:0; }
.code-pane { position:relative; min-width:0; min-height:640px; display:flex; flex-direction:column; overflow:hidden; }
.code-pane:first-child { border-right:1px solid #334549; }
.code-toolbar { min-height:45px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 16px; border-bottom:1px solid #2d4043; background:#13272a; color:#aab8b2; font:500 9px "DM Mono",monospace; }
.code-toolbar span { display:flex; align-items:center; gap:8px; }
.code-toolbar span i { width:7px; height:7px; border-radius:50%; background:#58bb9f; }
.reference-pane .code-toolbar span i { background:#8d9d98; }
.code-toolbar b { font-weight:500; }
.code-toolbar button { padding:5px 7px; border:1px solid #4d6262; background:transparent; color:#c6d2cd; font:500 8px "DM Mono",monospace; transition:border-color .15s,color .15s; }
.code-toolbar button:hover { border-color:var(--lime); color:var(--lime); }

.code-pane .CodeMirror { flex:1; width:100%; height:auto; min-height:595px; background:#0f2023; color:#e7eee8; font:500 12px/1.65 "DM Mono",monospace; }
.reference-pane .CodeMirror { background:#172a2c; color:#91a49f; }
.code-pane .CodeMirror-gutters { border-right:1px solid #2c3f42; background:#112326; }
.reference-pane .CodeMirror-gutters { background:#182d2f; }
.code-pane .CodeMirror-linenumber { padding:0 10px 0 7px; color:#5f7371; }
.code-pane .CodeMirror-lines { padding:15px 0 40px; }
.code-pane .CodeMirror pre.CodeMirror-line,.code-pane .CodeMirror pre.CodeMirror-line-like { padding:0 18px; }
.code-pane .CodeMirror-cursor { border-left:2px solid var(--lime); }
.code-pane .CodeMirror-selected { background:rgba(217,242,125,.14); }
.code-pane .CodeMirror-activeline-background { background:rgba(255,255,255,.025); }
.code-pane .CodeMirror-matchingbracket { color:var(--lime) !important; border-bottom:1px solid var(--lime); }
.code-pane .cm-keyword { color:#d9f27d; }
.code-pane .cm-def { color:#7fd0b9; }
.code-pane .cm-variable,.code-pane .cm-variable-2,.code-pane .cm-variable-3 { color:#dce8e2; }
.reference-pane .cm-variable,.reference-pane .cm-variable-2,.reference-pane .cm-variable-3 { color:#91a49f; }
.code-pane .cm-number { color:#f3bd76; }
.code-pane .cm-string { color:#d7b681; }
.code-pane .cm-comment { color:#728984; font-style:italic; }
.code-pane .cm-meta { color:#9bbbd1; }
.code-pane .cm-operator { color:#b7c6c0; }
.reference-pane .cm-reference-correct { background:rgba(72,183,143,.13); color:#d9e9e1; }
.reference-pane .cm-reference-wrong { background:rgba(191,74,62,.5); color:#fff4ef; text-decoration:underline wavy #ffb4a9; text-underline-offset:2px; }
.input-pane .cm-input-wrong { border-radius:1px; background:rgba(191,74,62,.64); color:#fff8f3; text-decoration:underline wavy #ffb4a9; text-underline-offset:2px; }
.reference-pane .cm-reference-next { border-bottom:2px solid var(--lime); background:rgba(217,242,125,.12); }
.reference-pane .cm-reference-line { background:rgba(217,242,125,.035); }

.focus-editor { position:absolute; z-index:8; top:94px; left:50%; display:flex; align-items:center; gap:10px; max-width:calc(100% - 30px); padding:10px 13px; transform:translateX(-50%); border:1px solid rgba(217,242,125,.55); background:rgba(13,28,31,.94); color:#e5eee9; text-align:left; box-shadow:0 12px 32px rgba(0,0,0,.22); }
.focus-editor:hover { border-color:var(--lime); }
.focus-editor > span { color:var(--lime); font-size:18px; }
.focus-editor strong,.focus-editor small { display:block; }
.focus-editor strong { font-size:10px; }
.focus-editor small { margin-top:2px; color:#879b95; font-size:8px; }
.input-pane.started .focus-editor { display:none; }

.typing-statusbar { min-height:43px; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:18px; padding:0 17px; border-top:1px solid #2d4043; background:#13272a; color:#8fa29c; font:500 8px "DM Mono",monospace; }
.typing-statusbar span:first-child { color:#c7d5cf; }
.typing-statusbar span:first-child i { display:inline-block; width:6px; height:6px; margin-right:7px; border-radius:50%; background:#81928e; }
.typing-statusbar span:first-child.running i { background:var(--lime); box-shadow:0 0 0 4px rgba(217,242,125,.08); }
.typing-statusbar span:first-child.complete i { background:#60c4a7; }
.typing-statusbar .has-errors { color:#f0a69b; }

.typing-side-panel { min-width:0; padding:28px 24px; border-left:1px solid var(--line); background:#e8ebdf; }
.algorithm-card { padding-bottom:23px; border-bottom:1px solid #c7cec0; }
.algorithm-level { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.algorithm-level span { color:var(--green-dark); font:500 9px "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
.algorithm-level b { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--ink); border-radius:50%; font:500 9px "DM Mono",monospace; }
.algorithm-card h2 { margin:13px 0 9px; font:700 27px/1.03 "Playfair Display",Georgia,serif; letter-spacing:-.04em; }
.algorithm-card > p { margin:0; color:#53625d; font-size:10px; line-height:1.55; }
.algorithm-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.algorithm-meta span { padding:5px 6px; border:1px solid #c3ccc0; background:#f5f5ed; color:#4d5e59; font:500 8px "DM Mono",monospace; }
.personal-best { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-top:18px; }
.personal-best span { color:var(--muted); font:500 8px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }
.personal-best strong { color:var(--green-dark); font:600 12px "DM Mono",monospace; }

.typing-guide { padding:24px 0; border-bottom:1px solid #c7cec0; }
.typing-guide ol { margin:0; padding:0; list-style:none; counter-reset:typing-guide; }
.typing-guide li { position:relative; padding:0 0 17px 30px; counter-increment:typing-guide; }
.typing-guide li:last-child { padding-bottom:0; }
.typing-guide li::before { content:"0" counter(typing-guide); position:absolute; top:1px; left:0; color:var(--green-dark); font:500 8px "DM Mono",monospace; }
.typing-guide li b,.typing-guide li span { display:block; }
.typing-guide li b { font-size:10px; }
.typing-guide li span { margin-top:4px; color:var(--muted); font-size:9px; line-height:1.45; }

.result-card { margin:22px -8px 0; padding:22px 20px; background:var(--ink); color:white; box-shadow:8px 8px 0 rgba(19,39,42,.1); }
.result-kicker { color:var(--lime); font:500 8px "DM Mono",monospace; letter-spacing:.11em; }
.result-card h2 { margin:9px 0 17px; color:white; font:700 25px/1 "Playfair Display",Georgia,serif; }
.result-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#405255; }
.result-grid div { padding:10px 7px; background:#1a3033; }
.result-grid strong,.result-grid span { display:block; }
.result-grid strong { color:white; font:500 15px "DM Mono",monospace; }
.result-grid span { margin-top:3px; color:#91a39e; font-size:7px; }
.result-card > p { min-height:30px; margin:14px 0 0; color:#b9c8c1; font-size:9px; line-height:1.5; }
.result-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:14px; }
.result-actions button { min-height:39px; border:1px solid #637476; background:transparent; color:white; font-size:9px; font-weight:800; }
.result-actions button:last-child { border-color:var(--lime); background:var(--lime); color:var(--ink); }

.custom-code { border-bottom:1px solid #c7cec0; }
.custom-code summary { min-height:51px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; color:var(--ink); font-size:10px; font-weight:800; list-style:none; }
.custom-code summary::-webkit-details-marker { display:none; }
.custom-code summary b { color:var(--green); font:500 18px "DM Mono",monospace; transition:transform .15s; }
.custom-code[open] summary b { transform:rotate(45deg); }
.custom-code > div { padding:0 0 20px; }
.custom-code label { display:block; margin:10px 0 6px; color:var(--muted); font:500 8px "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
.custom-code input,.custom-code textarea { width:100%; border:1px solid #bec7bb; border-radius:1px; background:#f8f8f1; color:var(--ink); outline:none; }
.custom-code input { padding:9px 10px; font:500 10px "Manrope",sans-serif; }
.custom-code textarea { padding:10px; resize:vertical; font:500 9px/1.5 "DM Mono",monospace; }
.custom-code input:focus,.custom-code textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(27,128,105,.1); }
.custom-code > div > button { width:100%; min-height:40px; display:flex; align-items:center; justify-content:space-between; margin-top:10px; padding:0 12px; border:0; background:var(--ink); color:var(--lime); font-size:9px; font-weight:800; }
.custom-error { margin:8px 0 0; color:var(--red); font-size:9px; line-height:1.4; }

.recent-results { padding-top:22px; }
.recent-results > div:first-child { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.recent-results .eyebrow { margin:0; }
.recent-results > div:first-child button { padding:0; border:0; border-bottom:1px solid #8b9991; background:transparent; color:var(--muted); font-size:8px; }
#history-list { margin-top:12px; }
.history-placeholder { margin:0; color:var(--muted); font-size:9px; line-height:1.5; }
.history-item { display:grid; grid-template-columns:1fr auto; gap:7px; padding:9px 0; border-top:1px solid #ced4ca; }
.history-item:first-child { border-top:0; }
.history-item strong,.history-item span,.history-item small { display:block; }
.history-item strong { overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.history-item small { margin-top:3px; color:var(--muted); font-size:7px; }
.history-item span { color:var(--green-dark); font:500 10px "DM Mono",monospace; white-space:nowrap; }

.typing-footer { min-height:70px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px 5.5%; color:var(--muted); font-size:9px; }
.typing-footer p { margin:0; }
.typing-footer p span { padding:3px 5px; border:1px solid #bcc5b8; background:#f8f7ef; color:var(--ink); font:500 8px "DM Mono",monospace; }
.typing-footer a { color:var(--green-dark); font-weight:800; text-decoration:none; }
.typing-toast { position:fixed; z-index:100; right:22px; bottom:22px; max-width:330px; padding:11px 14px; transform:translateY(18px); border-left:3px solid var(--lime); background:var(--ink); color:white; opacity:0; pointer-events:none; font-size:10px; line-height:1.4; transition:opacity .18s,transform .18s; box-shadow:0 14px 34px rgba(0,0,0,.22); }
.typing-toast.visible { transform:translateY(0); opacity:1; }

@media (max-width:1100px) {
  .typing-workspace { grid-template-columns:1fr; }
  .typing-side-panel { display:grid; grid-template-columns:1fr 1fr; gap:0 34px; border-top:1px solid var(--line); border-left:0; }
  .custom-code,.recent-results { grid-column:1/-1; }
  .typing-guide { border-bottom:0; }
}

@media (max-width:760px) {
  .typing-intro { grid-template-columns:1fr; gap:25px; align-items:start; }
  .typing-intro-copy { max-width:none; justify-self:stretch; }
  .dual-editor-head { display:none; }
  .dual-editors { grid-template-columns:1fr; }
  .code-pane:first-child { min-height:390px; border-right:0; border-bottom:1px solid #334549; }
  .code-pane:last-child { min-height:520px; }
  .code-pane .CodeMirror { min-height:345px; }
  .code-pane:last-child .CodeMirror { min-height:475px; }
  .typing-side-panel { grid-template-columns:1fr; }
  .typing-guide { border-bottom:1px solid #c7cec0; }
  .custom-code,.recent-results { grid-column:auto; }
}

@media (max-width:620px) {
  .typing-shell { width:100%; }
  .typing-topbar { height:72px; padding:0 18px; }
  .typing-topbar .typing-mode,.typing-topbar .atlas-link:not(:last-child) { display:none; }
  .typing-topbar .atlas-link:last-child { display:inline-block; }
  .typing-intro { min-height:auto; padding:37px 22px 31px; }
  .typing-intro h1 { font-size:43px; }
  .typing-controls { grid-template-columns:1fr; }
  .typing-controls button { width:100%; }
  .typing-stats { grid-template-columns:repeat(2,1fr); }
  .typing-stats > div { min-height:66px; padding:0 16px; }
  .typing-stats > div:nth-child(2) { border-right:0; }
  .typing-stats > div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .typing-stats strong { font-size:18px; }
  .code-toolbar { padding:0 12px; }
  .code-pane .CodeMirror { font-size:11px; line-height:1.65; }
  .code-pane .CodeMirror pre.CodeMirror-line,.code-pane .CodeMirror pre.CodeMirror-line-like { padding:0 12px; }
  .typing-statusbar { grid-template-columns:1fr auto; gap:10px; padding:0 12px; }
  #position-status { display:none; }
  .typing-side-panel { padding:27px 22px; }
  .typing-footer { align-items:flex-start; flex-direction:column; padding:22px; }
  .typing-toast { right:14px; bottom:14px; left:14px; max-width:none; }
}

@media (prefers-reduced-motion:reduce) {
  .typing-controls button,.typing-toast { transition:none; }
}