/* Tasked pixel workspace — framework-independent RetroUI visual adapter.
   Hard edges and tactile controls; body copy retains a readable Cyrillic font. */
:root,[data-theme="light"] {
  --bg:#f6f2e8; --bg-soft:#ebe8db; --card:#fffdf7; --card-2:#eeeadd;
  --ink:#242b27; --muted:#535e54; --faint:#626d61;
  --line:#343d35; --line-soft:#d5d7c9; --line-strong:#242b27;
  --btn:#b9e4be; --btn-ink:#202b23; --acc:#376346; --acc-soft:#d9efd8;
  --green:#285c3c; --green-bg:#d9efd8; --green-line:#376346;
  --red:#983b31; --red-bg:#fbe3db; --red-line:#ba6454;
  --purple:#685071; --purple-soft:#e9ddec; --orange:#805315; --orange-soft:#f9e7b4;
  --font-d:'Inter',system-ui,sans-serif; --font-m:'Inter',system-ui,sans-serif;
  --radius:3px; --radius-s:2px; --radius-l:4px;
  --pixel-shadow:#343d35; --pixel-grid:rgba(52,61,53,.06);
}
[data-theme="dark"] {
  --bg:#202722; --bg-soft:#2b342d; --card:#303b32; --card-2:#3a453c;
  --ink:#f6f2e8; --muted:#d3d7c9; --faint:#bac4b6;
  --line:#9aa68e; --line-soft:#53634f; --line-strong:#d3ddc4;
  --btn:#c0e6ac; --btn-ink:#202b23; --acc:#c0e6ac; --acc-soft:#3d5640;
  --green:#c0e6ac; --green-bg:#354c38; --green-line:#91ba84;
  --red:#ffb2a2; --red-bg:#543c35; --red-line:#d58e7c;
  --purple:#dac0df; --purple-soft:#4a3d50; --orange:#f3d189; --orange-soft:#534a32;
  --pixel-shadow:#121813; --pixel-grid:rgba(246,242,232,.04);
}
body { background-color:var(--bg); background-image:linear-gradient(var(--pixel-grid) 1px,transparent 1px),linear-gradient(90deg,var(--pixel-grid) 1px,transparent 1px); background-size:24px 24px; }
button,a,input,textarea,select { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid var(--acc); outline-offset:4px; }
.topbar { border-bottom:2px solid var(--line); min-height:74px; box-shadow:none; }
.brand .word { font-family:'Courier New',monospace; font-weight:900; font-size:27px; letter-spacing:-1.8px; }
.brand img,.footer img,.auth-box .logo,#langGate .logo { image-rendering:pixelated; }
.main { max-width:1380px; padding:34px clamp(20px,4vw,56px) 84px; }
.sidebar { top:74px; max-height:calc(100vh - 74px); width:242px; border-right:2px solid var(--line); background:var(--card); }
.side-item { min-height:46px; border-radius:2px; border:2px solid transparent; }
.side-item:hover { background:var(--card-2); transform:none; }
.side-item.active { background:var(--acc-soft); border:2px solid var(--line); color:var(--ink); box-shadow:3px 3px 0 var(--pixel-shadow); }
.sidebar .side-title,.card .eyebrow,.hero .eyebrow,.kicker,.task-num,.preview-eyebrow,.preview-kicker { font-family:'Courier New',monospace; font-size:12px; font-weight:800; letter-spacing:.08em; }
.side-item .cnt,.status-pill,.level-pill,.task-format { border:1px solid var(--line); border-radius:2px; background:var(--card-2); }
.hero { min-height:340px; border:2px solid var(--line); border-radius:4px; background:var(--card); padding:38px clamp(24px,4vw,46px) 30px; box-shadow:7px 7px 0 var(--pixel-shadow); margin-bottom:38px; }
.hero::before,.hero::after,.hero .ring2 { display:none; }
.hero h1 { font-size:clamp(32px,3.6vw,49px); max-width:18ch; letter-spacing:-.045em; font-weight:800; line-height:1.14; }
.hero p { max-width:56ch; font-size:16px; line-height:1.7; }
.hero .eyebrow { border:1px solid var(--line); padding:6px 10px; border-radius:2px; color:var(--ink); background:var(--orange-soft); }
.hero .cta-row { gap:14px; }
.steps { gap:12px; margin-top:28px; border-top:2px solid var(--line-soft); }
.step + .step { border-color:var(--line-soft); }
.step .n { display:inline-flex; justify-content:center; align-items:center; width:29px; height:27px; color:var(--ink); background:var(--acc-soft); border:1px solid var(--line); font-family:'Courier New',monospace; margin-bottom:3px; }
.step .t { font-weight:800; }
.hero-mascot { position:absolute; width:106px; height:106px; top:34px; right:30px; color:var(--ink); image-rendering:pixelated; pointer-events:none; animation:pixel-float 4s steps(4,end) infinite; }
.hero-mascot svg { width:100%; height:100%; overflow:visible; }
.hero-mascot .pixel-eye { transform-origin:50% 50%; animation:pixel-blink 7s steps(1,end) infinite; }
.grid { gap:20px; }
.card,.theory-card,.task-card,.attempts,.auth-box,.stat-box,.modal,.empty-box,.skel,.preview-page,.preview-task { border:2px solid var(--line); border-radius:3px; background:var(--card); box-shadow:4px 4px 0 var(--pixel-shadow); }
[data-theme="light"] .card,[data-theme="light"] .theory-card,[data-theme="light"] .task-card,[data-theme="light"] .attempts { box-shadow:4px 4px 0 var(--pixel-shadow); }
.card { padding:22px; transition:transform .15s ease,box-shadow .15s ease; }
.card.clickable:hover { border-color:var(--line); transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--pixel-shadow); }
.card.clickable:active { transform:translate(3px,3px); box-shadow:1px 1px 0 var(--pixel-shadow); }
.card h3 { font-size:17px; line-height:1.4; font-weight:800; }
.tile,.tile.t1,.tile.t2,.tile.t3,[data-theme="light"] .tile.t1,[data-theme="light"] .tile.t2,[data-theme="light"] .tile.t3 { background:var(--acc-soft); color:var(--ink); border:2px solid var(--line); border-radius:2px; box-shadow:2px 2px 0 var(--pixel-shadow); }
.tile.t2,[data-theme="light"] .tile.t2 { background:var(--orange-soft); }
.tile.t3,[data-theme="light"] .tile.t3 { background:var(--purple-soft); }
.btn,.btn.small,.theme-btn { min-height:44px; border:2px solid var(--line); border-radius:2px; background:var(--card); color:var(--ink); box-shadow:3px 3px 0 var(--pixel-shadow); font-weight:750; transition:transform .12s ease,box-shadow .12s ease,background .12s ease; }
.btn.primary,.hero .btn.primary { background:var(--btn); border-color:var(--line); color:var(--btn-ink); }
.btn.primary:hover,[data-theme="light"] .btn.primary:hover { background:var(--btn); border-color:var(--line); color:var(--btn-ink); }
.btn:not(:disabled):hover,.theme-btn:hover { transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--pixel-shadow); }
.btn:not(:disabled):active,.theme-btn:active { transform:translate(3px,3px); box-shadow:0 0 0 var(--pixel-shadow); }
.btn:disabled { opacity:.55; transform:none; box-shadow:none; cursor:not-allowed; }
.btn.ghost { border-color:transparent; box-shadow:none; }
.btn.ghost:hover { border-color:var(--line); box-shadow:2px 2px 0 var(--pixel-shadow); }
.btn.danger { border-color:var(--red-line); background:var(--red-bg); color:var(--red); }
.theme-btn { min-width:44px; height:44px; }
.lang-switch { border:2px solid var(--line); border-radius:2px; gap:3px; padding:3px; }
.lang-switch button,.lang-switch button.active { border-radius:1px; min-height:34px; }
.lang-switch button.active { background:var(--btn); color:var(--btn-ink); }
input,textarea,select,.topbar .search input { min-height:44px; border:2px solid var(--line); border-radius:2px; background:var(--card); color:var(--ink); font-size:16px; }
input::placeholder,textarea::placeholder { color:var(--faint); opacity:1; }
input:focus,textarea:focus,select:focus,.topbar .search input:focus { border-color:var(--line); box-shadow:3px 3px 0 var(--pixel-shadow); outline:2px solid var(--acc); outline-offset:2px; }
label { font-weight:700; }
.theory-card,.task-card { padding:clamp(22px,3vw,36px); }
.theory-card .body { line-height:1.8; }
.theory-block,.theory-example,.callout,.feedback,.preview-option { border-radius:2px; }
.theory-example { border-left:4px solid var(--acc); }
.stepper .s { border-radius:2px; border:2px solid var(--line-soft); background:var(--card); }
.stepper .s.now { border-color:var(--line); background:var(--acc-soft); color:var(--ink); box-shadow:3px 3px 0 var(--pixel-shadow); }
.stepper .dot { border-radius:0; }
.opts .opt { border:2px solid var(--line); border-radius:2px; min-height:52px; box-shadow:2px 2px 0 var(--pixel-shadow); }
.opts .opt:has(input:checked) { border-color:var(--line); background:var(--acc-soft); box-shadow:4px 4px 0 var(--pixel-shadow); }
.opts .opt::before,.opts .opt:has(input:checked)::before { border-radius:2px; }
.auth-page { background:transparent; padding:36px 20px; }
.auth-box { padding:34px; }
.auth-box .logo,[data-theme="light"] .auth-box .logo { filter:none; }
.auth-tabs,.auth-tabs button,.auth-tabs button.active { border-radius:2px; }
.auth-tabs { border:2px solid var(--line); background:var(--card-2); }
.auth-tabs button.active { background:var(--btn); color:var(--btn-ink); }
#langGate { background:var(--bg); background-image:linear-gradient(var(--pixel-grid) 1px,transparent 1px),linear-gradient(90deg,var(--pixel-grid) 1px,transparent 1px); background-size:24px 24px; }
#langGate .box { padding:34px; border:2px solid var(--line); background:var(--card); box-shadow:7px 7px 0 var(--pixel-shadow); border-radius:3px; max-width:540px; }
.lang-pick button { border:2px solid var(--line); border-radius:2px; box-shadow:3px 3px 0 var(--pixel-shadow); background:var(--acc-soft); color:var(--ink); min-height:70px; }
.lang-pick button:hover { background:var(--orange-soft); color:var(--ink); border-color:var(--line); transform:translate(-1px,-1px); }
.modal-bg { background:rgba(25,33,27,.56); backdrop-filter:blur(3px); }
.modal { width:min(880px,calc(100vw - 32px)); max-width:calc(100vw - 32px); animation:pixel-enter .18s ease-out; }
.modal-head { background:var(--card-2); border-bottom:2px solid var(--line); }
.lesson-preview .modal-head { border-bottom:2px solid var(--line); }
.preview-actions { border-top:2px solid var(--line); }
#voiceFab { border:2px solid var(--line); border-radius:2px; box-shadow:4px 4px 0 var(--pixel-shadow); background:var(--btn); color:var(--btn-ink); }
#voiceFab:hover { transform:translate(-1px,-1px); }
#voicePanel,.voice-panel { border:2px solid var(--line); border-radius:3px; box-shadow:5px 5px 0 var(--pixel-shadow); }
.footer { border-top:2px solid var(--line-soft); margin-top:38px; line-height:1.5; }
.footer a { text-underline-offset:4px; }
table { background:var(--card); }
th { background:var(--acc-soft); color:var(--ink); }
th,td { padding:12px 14px; }
.loading-dots span,.skel .row { border-radius:1px; }
.loading-spinner { border-radius:2px; animation:spin 1.6s steps(8,end) infinite; }
@keyframes pixel-float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)} }
@keyframes pixel-blink { 0%,92%,96%,100%{opacity:1}93%,95%{opacity:0} }
@keyframes pixel-enter { from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)} }
@media(min-width:1200px) { .hero { padding-right:155px; } }
@media(max-width:1199px) { .hero-mascot { width:70px;height:70px;right:22px;top:26px; } .hero .eyebrow { max-width:calc(100% - 80px); } }
@media(max-width:860px) { .topbar { min-height:66px; gap:10px; padding:10px 18px; flex-wrap:wrap; } .layout { flex-direction:column; } .sidebar { width:100%; position:static; max-height:none; border-right:0;border-bottom:2px solid var(--line); padding:14px 18px; } .sidebar .stat-box { display:none; } .main { width:100%; padding:24px 18px 88px; } .hero { padding:28px 24px; } .topbar .search { order:3; flex-basis:100%;max-width:none; } .side-item { width:100%; } .hero-mascot { width:62px;height:62px;right:18px;top:22px; } .grid { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); } .create-grid { grid-template-columns:1fr !important; } }
@media(max-width:600px) { .brand .word {font-size:25px;} .brand img {width:28px;height:28px;} .top-actions { gap:8px; flex-wrap:wrap; } .topbar .user .name,.topbar .user .role {display:none;} .topbar .btn.small {padding:0 10px;} .topbar .lang-switch button {padding:6px 8px;} .hero h1 {font-size:34px;max-width:100%;} .hero .eyebrow {max-width:calc(100% - 66px); font-size:10px;} .hero-mascot {width:52px;height:52px;} .hero p {font-size:15px;} .hero .cta-row { flex-direction:column;align-items:stretch; } .hero .cta-row .btn {white-space:normal;} .steps {display:grid; grid-template-columns:1fr;gap:12px;} .step,.step + .step {border:0;padding:0;display:grid;grid-template-columns:32px 1fr;column-gap:10px;} .step .n {grid-row:1/3;} .step .t,.step .d {grid-column:2;} .grid {grid-template-columns:1fr;} .auth-box {padding:26px 22px;} #langGate .box {margin:20px; padding:26px 22px;} .lang-pick {flex-direction:column;} .footer {flex-wrap:wrap;} .footer .spacer {display:none;} .modal-head {gap:10px;} .stat-cards {grid-template-columns:1fr;} .stepper {flex-wrap:wrap;gap:10px;} .theory-navigation {flex-wrap:wrap;gap:12px;} .theory-navigation .btn {flex:1;} }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
@media print { body {background:#fff;color:#000;} .theory-card,.task-card {box-shadow:none;border:1px solid #555;} .hero-mascot {display:none;} }
/* OriginKit Pixel Trail remains below every label and control. */
.hero { isolation:isolate; }
.hero > .origin-pixel-trail { position:absolute; inset:0; z-index:-1; display:grid; align-content:start; pointer-events:none; overflow:hidden; }
.origin-pixel-trail > span { aspect-ratio:1; background:var(--btn); opacity:0; }
.hero > :not(.origin-pixel-trail) { z-index:1; }
@media(max-width:860px) {
  .sidebar { overflow-x:auto; scrollbar-width:thin; padding-bottom:18px; }
  .sidebar .side-item { width:auto; min-width:max-content; flex:0 0 auto; }
}
@media(max-width:600px) {
  .hero .steps { display:grid; }
  .step + .step { border:0; padding:0; margin:0; }
  .modal-bg { align-items:center; }
  .modal { overflow-y:auto; }
}
.btn.primary i,.btn.primary svg,#voiceFab i,#voiceFab svg { color:var(--btn-ink); }
@media(max-width:640px) {
  #voiceFab { bottom:calc(16px + env(safe-area-inset-bottom,0px)); }
  #voiceStatus { bottom:calc(76px + env(safe-area-inset-bottom,0px)); }
  body:has(#voiceFab) > .main { padding-bottom:124px; }
}
/* Compact mobile workspace; every section stays reachable from a real menu. */
.pixel-menu-trigger,.pixel-menu-close,.pixel-menu-backdrop { display:none; }
@media(max-width:860px) {
 .topbar { flex-wrap:wrap; min-height:64px; padding:10px 16px;gap:10px; }
 .brand {margin-right:auto;}
 .brand .word {font-size:28px;}
 .top-actions {margin-left:0;flex-wrap:nowrap;gap:10px;}
 .pixel-menu-trigger {display:inline-flex;align-items:center;justify-content:center;order:1;width:44px;height:44px;border:2px solid var(--line);background:var(--btn);color:var(--btn-ink);box-shadow:3px 3px 0 var(--pixel-shadow);font-size:24px;cursor:pointer;}
 .top-actions {order:2;}
 .topbar .search {order:3;margin-top:2px;}
 .sidebar {position:fixed;inset:0 0 0 auto;top:0;width:min(340px,calc(100vw - 28px));max-height:100dvh;height:100dvh;z-index:301;transform:translateX(110%);visibility:hidden;pointer-events:none;overflow:auto;border-left:2px solid var(--line);border-right:0;border-bottom:0;box-shadow:-6px 0 0 var(--pixel-shadow);padding:22px;display:flex;flex-direction:column;align-items:stretch;gap:10px;transition:transform .18s steps(4,end),visibility .18s;}
 .sidebar .side-title {display:block;}
 .sidebar #cats {display:block;}
 .sidebar .side-item {width:100%;min-width:0;white-space:normal;flex:none;min-height:48px;}
 .sidebar .lang-switch {align-self:flex-start;margin:8px 0;}
 .pixel-menu-close {display:flex;align-self:stretch;}
 .pixel-nav-open {overflow:hidden;}
 .pixel-nav-open .sidebar {transform:translateX(0);visibility:visible;pointer-events:auto;}
 .pixel-menu-backdrop {position:fixed;inset:0;z-index:300;background:rgba(24,34,26,.46);border:0;cursor:pointer;}
 .pixel-nav-open .pixel-menu-backdrop {display:block;}
 .main {padding:22px 16px 84px;}
 .hero {padding:24px 24px;min-height:0;margin-bottom:28px;}
 .hero h1 {font-size:36px;line-height:1.12;margin:16px 0 12px;}
 .hero p {font-size:15px;line-height:1.55;}
 .hero .eyebrow {font-size:11px;padding:4px 7px;}
 .hero .steps {display:none;}
 .hero .cta-row {gap:10px;margin-top:18px;}
 .hero .cta-row .btn {min-height:46px;}
 .hero-mascot {width:44px;height:44px;top:22px;right:20px;}
 .section-head {margin-top:24px;}
 .section-title {font-size:26px;}
 .stat-cards {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
 .stat-cards .card {padding:16px;gap:10px;flex-direction:column;align-items:flex-start;}
 .stat-cards .big {font-size:29px;}
 .stat-cards .muted {font-size:13px;line-height:1.4;}
 .stat-cards .tile {width:34px;height:34px;}
}
@media(max-width:380px) {
 .brand img {display:none;}
 .topbar {padding:10px 12px;gap:8px;}
 .top-actions {gap:8px;}
 .hero {padding:22px 20px;}
 .hero h1 {font-size:32px;}
}
/* Self-hosted OFL Tiny5 includes Cyrillic, unlike many Latin-only pixel faces. */
@font-face {font-family:'Tasked Pixel';src:url('/fonts/Tiny5-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
:root,[data-theme="light"],[data-theme="dark"] {--font-d:'Tasked Pixel',monospace;}
.brand .word,.auth-box .brand-name,.hero h1,.section-title,.theory-card h1,.auth-box h1,#langGate h1,.card h3,.modal-head h3,.stat-cards .big {font-family:var(--font-d);font-weight:400;letter-spacing:0;}
.brand .word {font-size:34px;}
.hero h1 {font-size:clamp(42px,4.7vw,64px);line-height:1.03;max-width:22ch;}
.section-title {font-size:32px;line-height:1.1;}
.card h3 {font-size:25px;line-height:1.2;}
.theory-card h1 {font-size:40px;line-height:1.1;}
.auth-box h1,#langGate h1 {font-size:38px;line-height:1.1;}
.modal-head h3 {font-size:25px;}
.btn,.btn.small,.lang-switch button,.side-item,.hero .eyebrow {font-family:var(--font-d);font-weight:400;letter-spacing:0;}
.btn,.btn.small {font-size:22px;}
.side-item {font-size:22px;line-height:1.15;}
.lang-switch button {font-size:22px;line-height:1;}
.hero .eyebrow {font-size:18px;}
.hero .cta-row .btn {min-height:48px;}
@media(max-width:860px) {
 .brand .word {font-size:32px;}
 .hero h1 {font-size:42px;line-height:1.02;max-width:20ch;}
 .hero .eyebrow {font-size:16px;}
 .hero .cta-row {flex-direction:row;}
 .hero .cta-row .btn {flex:1 1 140px;}
 .hero .cta-row #heroAuth {display:none !important;}
 .section-title {font-size:30px;}
 .card h3 {font-size:25px;}
 .stat-cards .big {font-size:34px;}
 .sidebar .side-item {font-size:24px;}
 .theory-card h1 {font-size:36px;}
 .btn.small {font-size:20px;}
}
@media(max-width:380px) {.hero h1 {font-size:38px;}}
/* OriginKit ambient pixels are visible without hover, including on phones. */
body {position:relative;isolation:isolate;}
.origin-workspace-grid {position:fixed;inset:0;z-index:-1;display:grid;align-content:start;pointer-events:none;overflow:hidden;opacity:.85;}
.origin-workspace-grid span {aspect-ratio:1;background:var(--acc);opacity:0;}
.hero > .origin-pixel-trail {opacity:.65;}
.origin-pixel-trail > span {background:var(--btn);}
@media(prefers-reduced-motion:reduce){.origin-workspace-grid,.origin-pixel-trail{display:none !important;}}
:root,[data-theme="light"],[data-theme="dark"] {--font-m:'Tasked Pixel',monospace;}
body {font-family:var(--font-m);font-size:20px;line-height:1.45;font-weight:400;}
.hero p {font-size:22px;line-height:1.4;}
.card p,.theory-card .body,.theory-block p,.preview-page p,.preview-task p,.muted {font-size:20px;line-height:1.4;}
input,textarea,select,.topbar .search input {font-family:var(--font-m);font-size:21px;line-height:1.3;font-weight:400;}
.card .meta,.side-title,.footer,.stat-cards .muted {font-family:var(--font-m);font-size:18px;line-height:1.3;}
.task-text {font-size:24px;font-weight:400;line-height:1.35;}
.theory-example,.theory-key {font-size:21px;}
label,.card h3,.card .head h3 {font-weight:400;}
@media(max-width:860px) {.hero p {font-size:21px;}.card p,.muted {font-size:20px;}.stat-cards .muted {font-size:18px;}}
.pixel-mobile-summary {display:none;}
.pixel-mobile-summary [lang="kk"] {display:none;}
html[lang="kk"] .pixel-mobile-summary [lang="ru"] {display:none;}
html[lang="kk"] .pixel-mobile-summary [lang="kk"] {display:inline;}
@media(max-width:860px){.hero > p[data-i18n="heroP"]{display:none;}.hero .pixel-mobile-summary{display:block;max-width:26ch;font-size:21px;line-height:1.35;}.hero h1{font-size:40px;line-height:1;}.hero{padding:22px 24px;}.hero .cta-row{margin-top:16px;}}
.origin-blinking-background {position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.origin-blinking-hero {position:absolute !important;inset:0;z-index:-1 !important;pointer-events:none;overflow:hidden;}
.origin-blinking-background canvas,.origin-blinking-hero canvas {display:block;image-rendering:pixelated;}
/* The ambient canvas replaces the sparse global trail; hero hover remains live. */
.origin-workspace-grid {display:none;}
/* Instant sheet visibility keeps focus deterministic on low-power phones. */
@media(max-width:860px){.sidebar{transition:none;}.hero h1{overflow-wrap:break-word;}}
.sidebar .side-title,.card .eyebrow,.kicker,.task-num,.preview-eyebrow,.preview-kicker {font-family:var(--font-d);font-size:18px;font-weight:400;letter-spacing:0;}
#authModal p,#authMsg {font-size:19px !important;line-height:1.35;}
@media(max-width:380px){.hero h1{font-size:38px;}.hero .eyebrow{font-size:15px;}}