/* Toybox Atelier — visual identity only; the focused navigation stays intact. */
:root {
  --focus-ink:#292844; --focus-muted:#626079; --focus-brand:#5b48cd;
  --focus-paper:#fffefa; --focus-bg:#f6f3ff; --focus-line:#ded8f1;
  --toy-purple:#6551df; --toy-purple-dark:#44339c; --toy-lavender:#eee9ff;
  --toy-mint:#dcf5e9; --toy-peach:#fff0dc; --toy-lip:#d8d0eb;
  --toy-shadow:0 5px 0 var(--toy-lip),0 16px 30px -22px #49416c55;
}
html[data-theme="night"] {
  --focus-ink:#f2efff; --focus-muted:#c0b9d7; --focus-brand:#c4b5ff;
  --focus-paper:#25223c; --focus-bg:#1a172b; --focus-line:#45405f;
  --toy-purple:#a18aef; --toy-purple-dark:#6b52b8; --toy-lavender:#393052;
  --toy-mint:#213e38; --toy-peach:#44352d; --toy-lip:#100e20;
}
html { background:var(--focus-bg); }
body {
  position:relative; isolation:isolate; font-family:'Readex Pro','IBM Plex Sans Arabic',sans-serif;
  background-color:var(--focus-bg);
  background-image:radial-gradient(circle at 16% 10%,#e0d8ff65,transparent 32%),radial-gradient(circle at 88% 48%,#ffe8cc35,transparent 28%),radial-gradient(#afa1cd25 .8px,transparent .8px);
  background-size:auto,auto,22px 22px;
  padding-top:20px;
}
.focus-header {
  max-width:1220px; min-height:88px; padding:16px 22px; gap:28px;
  background:var(--focus-paper); border:1.5px solid var(--focus-line); border-radius:24px;
  box-shadow:0 4px 0 var(--toy-lip),0 12px 32px -24px #44339c50;
  margin-bottom:46px;
}
.focus-logo { display:flex; align-items:center; gap:12px; font-size:17px; font-weight:700; line-height:1.8; }
.focus-logo > span { color:var(--focus-ink); }
.focus-logo b { font-family:'Fredoka',sans-serif; color:var(--toy-purple); letter-spacing:.5px; font-size:22px; }
.focus-logo small { display:block; font-weight:500; font-size:10px; color:var(--focus-muted); letter-spacing:.5px; direction:ltr; text-align:right; }
.focus-mark { width:45px; height:49px; flex-shrink:0; filter:drop-shadow(0 3px 0 #d4c9f5); }
.focus-nav { justify-content:center; gap:4px; }
.focus-nav a { font-size:13px; padding:11px 13px; border:1px solid transparent; transition:background .18s,transform .18s; white-space:nowrap; border-radius:12px; }
.focus-nav a:hover { color:var(--focus-brand); background:var(--toy-lavender); }
.focus-nav a[aria-current="page"] { color:var(--focus-brand); background:var(--toy-lavender); border-color:var(--focus-line); box-shadow:0 3px 0 var(--toy-lip); }
.focus-header .theme-toggle-btn { min-height:42px; border-radius:12px; background:var(--focus-bg); border:1.5px solid var(--focus-line); box-shadow:0 3px 0 var(--toy-lip); padding:9px 11px; font-size:11px; white-space:nowrap; }
.focus-main { position:relative; }
.focus-eyebrow { display:flex; gap:8px; align-items:center; font-size:12px; margin-bottom:14px; letter-spacing:0; }
.focus-eyebrow::before { content:''; width:8px; height:8px; border-radius:3px; background:#f6b957; box-shadow:0 0 0 4px #f6b95724; }
.focus-main h1 { font-size:clamp(29px,3vw,42px); line-height:1.65; font-weight:700; }
.focus-main h2 { font-size:20px; font-weight:600; }
.focus-main h3 { font-weight:600; }
.focus-main p { line-height:1.95; }
body[data-focus-route="home"] .focus-main > h1 { width:58%; font-size:clamp(32px,3.4vw,47px); line-height:1.6; }
body[data-focus-route="home"] .focus-main > h1 span { color:var(--toy-purple); position:relative; }
body[data-focus-route="home"] .focus-main > h1 span::after { content:''; position:absolute; height:8px; background:#f8c76a78; inset-inline:0; bottom:-1px; border-radius:20px; transform:rotate(-1deg); z-index:-1; }
.focus-hero { padding:12px 0 38px; max-width:58%; min-height:194px; }
.focus-hero > p { max-width:540px; font-size:15px; margin-bottom:24px; }
.toy-hero-art { position:absolute; width:405px; height:360px; left:12px; top:2px; pointer-events:none; }
.toy-hero-art svg { width:100%; height:calc(100% - 28px); overflow:visible; direction:ltr; }
.toy-hero-art svg text { direction:ltr; text-anchor:start; }
.toy-hero-caption { position:absolute; bottom:3px; left:0; right:0; text-align:center; font:500 11px 'JetBrains Mono',monospace; color:var(--focus-muted); letter-spacing:1px; }
.focus-primary,.focus-secondary {
  border-radius:13px; border-width:1.5px; font-family:'Readex Pro','IBM Plex Sans Arabic',sans-serif;
  font-size:13px; font-weight:500; min-height:45px; padding:11px 20px;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.focus-primary { background:#6551df; color:#fff; border-color:#5c48d1; box-shadow:0 4px 0 #44339c,inset 0 1px 0 #ffffff45; }
.focus-primary:hover { background:#5943d0; box-shadow:0 6px 0 #44339c,0 10px 18px -12px #6551df80; transform:translateY(-2px); }
.focus-secondary { background:var(--focus-paper); border-color:var(--focus-line); color:var(--focus-ink); box-shadow:0 3px 0 var(--toy-lip); }
.focus-secondary:hover { background:var(--toy-lavender); border-color:#b7a6e7; transform:translateY(-2px); box-shadow:0 5px 0 var(--toy-lip); }
.focus-primary:active,.focus-secondary:active { transform:translateY(3px); box-shadow:0 1px 0 var(--toy-lip); }
.focus-primary:disabled { opacity:.65; cursor:wait; transform:none; }
.focus-grid { gap:22px; margin:24px 0 34px; }
.focus-card { border:1.5px solid var(--focus-line); border-radius:23px; padding:27px; background:var(--focus-paper); box-shadow:var(--toy-shadow); position:relative; }
.focus-grid > .focus-card { border-top:4px solid #c5b7fa; display:flex; flex-direction:column; }
.focus-grid > .focus-card > .focus-number { align-self:flex-start; }
.focus-grid > .focus-card > .focus-primary,.focus-grid > .focus-card > .focus-secondary { align-self:flex-start; margin-top:auto; }
.focus-grid > .focus-card:nth-child(3n+2) { border-top-color:#efc58a; }
.focus-grid > .focus-card:nth-child(3n) { border-top-color:#a4d8c0; }
.focus-card p { font-size:13px; }
.focus-card h2,.focus-card h3 { margin-top:8px; }
.focus-number { display:inline-flex; min-height:29px; align-items:center; padding:5px 10px; background:var(--toy-lavender); color:var(--focus-brand); border-radius:8px; font-size:11px; margin-bottom:14px; }
.focus-grid > .focus-card:nth-child(3n+2) .focus-number { background:var(--toy-peach); color:#805620; }
.focus-grid > .focus-card:nth-child(3n) .focus-number { background:var(--toy-mint); color:#276048; }
html[data-theme="night"] .focus-number { color:var(--focus-ink) !important; }
.focus-tag { background:var(--toy-lavender); color:var(--focus-brand); border:1px solid var(--focus-line); border-radius:9px; font-size:11px; padding:5px 10px; }
.focus-card-top .focus-number { margin:0; background:transparent; }
.focus-resume {
  border-inline-start:1.5px solid var(--focus-line); border-radius:22px; padding:25px 29px;
  background:linear-gradient(105deg,var(--focus-paper) 45%,var(--toy-lavender));
}
.focus-resume::before { content:''; position:absolute; right:-2px; top:28px; width:5px; height:48px; background:var(--toy-purple); border-radius:5px; }
.focus-resume h2 { font-size:20px; }
.focus-resume .focus-eyebrow { margin:0 0 6px; }
.focus-resume .focus-eyebrow::before { display:none; }
.focus-path { gap:17px; }
.focus-path > .focus-card { padding:22px 26px; border-radius:20px; }
.focus-path .focus-number { width:46px; height:46px; justify-content:center; font-size:16px; border:1px solid var(--focus-line); box-shadow:0 3px 0 var(--toy-lip); margin:0; }
.focus-search { border:1.5px solid var(--focus-line); border-radius:14px; box-shadow:inset 0 2px 4px #29284408,0 3px 0 var(--toy-lip); margin:10px 0 28px; }
.focus-steps { gap:10px; margin:20px 0; }
.focus-steps span { border-radius:10px; background:var(--focus-paper); box-shadow:0 2px 0 var(--toy-lip); border-color:var(--focus-line); font-size:12px; padding:7px 14px; }
.focus-steps span:first-child { background:var(--toy-lavender); color:var(--focus-brand); }
.focus-lesson-bar { padding:0 4px; }
.focus-lesson-bar .smart-drop-trigger { border-radius:12px; box-shadow:0 3px 0 var(--toy-lip); }
.focus-intro .focus-card { padding:20px 24px; border-radius:18px; box-shadow:0 3px 0 var(--toy-lip); }
.focus-intro .focus-card p { margin-bottom:8px; }
#workspaceExplorer .code-xray-bay,#workspaceExplorer .sim-monitor { border-radius:22px; border:1.5px solid var(--focus-line); box-shadow:var(--toy-shadow); }
.code-xray-bay h1 { font-family:'Readex Pro',sans-serif; font-size:19px; }
.focus-scene {
  position:relative; overflow:hidden; border:1.5px solid var(--focus-line); border-radius:18px;
  background-color:var(--toy-lavender); background-image:radial-gradient(#a99ac72b 1px,transparent 1px),linear-gradient(180deg,transparent 65%,#c7bce831);
  background-size:18px 18px,auto; box-shadow:inset 0 2px 0 #ffffff65; padding:24px; min-height:248px;
}
.focus-scene > p { font-size:11px; position:relative; z-index:1; }
.focus-track { height:83px; border-bottom:4px solid #c3b3e4; margin-bottom:15px; }
.focus-player { width:34px; height:42px; background:#8b77e7; border:2px solid #6650b5; box-shadow:inset 3px 3px 0 #b8a5ff,0 3px 0 #6650b5; border-radius:10px 10px 5px 5px; }
.focus-player::before { content:''; position:absolute; width:20px; height:13px; top:9px; left:5px; border-radius:5px; background:#2b2947; }
.focus-player::after { content:'··'; color:#baf9df; position:absolute; top:-1px; left:9px; font:bold 22px monospace; letter-spacing:2px; }
.focus-code { border-radius:16px; padding:42px 22px 20px; border:2px solid #3c355d; background:#29263e; color:#eee7ff; box-shadow:0 4px 0 #171426,inset 0 1px 0 #ffffff18; position:relative; font-size:13px; }
.focus-code::before { content:'● ● ●     C# / UNITY'; position:absolute; top:11px; left:18px; color:#b3a2e5; font:10px 'JetBrains Mono',monospace; letter-spacing:1px; }
.focus-options { gap:13px; }
.focus-options button { padding:13px 16px; background:var(--focus-paper); }
.focus-options button[aria-pressed="true"] { background:var(--toy-lavender); border-color:var(--toy-purple); box-shadow:0 3px 0 var(--toy-purple-dark); color:var(--focus-brand); }
.focus-feedback { border-radius:12px; background:var(--toy-mint); color:var(--focus-ink); border:1px solid #8ec4ae; border-inline-start:4px solid #589b7c; font-size:13px; }
.focus-door { flex-shrink:0; width:80px; height:101px; background:linear-gradient(100deg,#eac594,#fce8c5); border-color:#ab8056; box-shadow:inset 0 0 0 4px #ffffff35,0 5px 0 #94694c; border-radius:28px 28px 5px 5px; position:relative; }
.focus-door::after { content:''; position:absolute; width:7px; height:7px; background:#86592f; border-radius:50%; right:8px; top:53%; box-shadow:0 1px 0 #fff6; }
.focus-door.open { background:linear-gradient(100deg,#c0ecd8,#e3fff0); border-color:#59977c; box-shadow:0 5px 0 #39765a; }
.focus-gate { font-size:15px; gap:20px; }
.focus-gate > span { background:var(--focus-paper); border:1px solid var(--focus-line); border-radius:10px; padding:9px 11px; box-shadow:0 3px 0 var(--toy-lip); }
.focus-counter { gap:20px; }
.focus-counter > div { min-width:96px; background:var(--focus-paper); padding:18px 12px; border:1.5px solid var(--focus-line); border-radius:17px; box-shadow:0 4px 0 var(--toy-lip); }
.focus-counter strong { font-size:37px; color:var(--focus-brand); margin-bottom:12px; }
.focus-counter code { font-size:12px; }
#focusExperiment { padding:16px 0 0; font-size:13px; line-height:2; }
#focusExperiment input[type="number"] { max-width:90px; padding:8px; margin:10px; border:1.5px solid var(--focus-line); background:var(--focus-paper); color:var(--focus-ink); border-radius:9px; }
#focusExperiment input { accent-color:var(--toy-purple); }
.focus-note { font-size:11px !important; }
.focus-row > a:not([class]) { color:var(--focus-brand); font-size:12px; }
.ux-toast-card { background:var(--focus-paper) !important; color:var(--focus-ink) !important; border-color:var(--focus-line) !important; }
html[data-theme="night"] body { background-image:radial-gradient(circle at 16% 10%,#6e51b422,transparent 36%),radial-gradient(#8e7baa22 .8px,transparent .8px); background-size:auto,22px 22px; }
html[data-theme="night"] .toy-hero-art svg { filter:brightness(.88) saturate(.9); }
html[data-theme="night"] .focus-hero > p { color:var(--focus-muted); }
@media(min-width:1200px) { .focus-main,.focus-lesson-bar { max-width:1140px; } }
@media(max-width:1100px) and (min-width:851px) { .focus-header { gap:14px; padding:16px; } .focus-logo { font-size:14px; gap:8px; } .focus-mark { width:35px; } .focus-nav a { padding:10px 8px; font-size:12px; } .toy-hero-art { width:350px; left:0; top:15px; } body[data-focus-route="home"] .focus-main > h1 { font-size:38px; } }
@media(max-width:850px) { body { padding-top:14px; } .focus-header { padding:16px 18px; margin-bottom:32px; gap:16px; border-radius:20px; } .focus-nav { justify-content:space-between; gap:3px; } .focus-nav a { padding:9px 10px; font-size:12px; } .toy-hero-art { width:40%; height:300px; left:0; top:30px; opacity:.98; } body[data-focus-route="home"] .focus-main > h1 { width:58%; font-size:32px; } .focus-hero { max-width:55%; padding-top:4px; } .focus-hero > p { font-size:13px; } .focus-grid { gap:18px; } }
@media(max-width:640px) { .toy-hero-art { position:relative; width:100%; max-width:350px; height:260px; top:auto; left:auto; margin:15px auto -5px; } body[data-focus-route="home"] .focus-main > h1 { width:100%; font-size:34px; } .focus-hero { max-width:100%; padding:8px 0 20px; min-height:0; } .focus-hero > p { max-width:100%; font-size:14px; } .toy-hero-caption { bottom:-2px; } .focus-resume { padding:23px; } .focus-main h1 { font-size:29px; } .focus-card { padding:23px; } }
@media(max-width:520px) { body { padding:12px 14px 40px; } .focus-header { margin-bottom:28px; padding:13px 12px; gap:12px; } .focus-logo { font-size:14px; gap:8px; } .focus-logo b { font-size:20px; } .focus-logo small { font-size:8px; } .focus-mark { width:38px; height:42px; } .focus-nav a { padding:9px 6px; font-size:11px; } .focus-header .theme-toggle-btn { font-size:10px; padding:8px; } .focus-grid { grid-template-columns:1fr; } .focus-primary,.focus-secondary { font-size:12px; } .focus-gate { gap:10px; font-size:12px; } .focus-gate > span { padding:8px; } .focus-scene { padding:18px; } .focus-code { font-size:12px; padding-inline:16px; } }
@media(prefers-reduced-motion:reduce) { .focus-primary:hover,.focus-secondary:hover { transform:none; } }