:root{color-scheme:light;--bg:#f8f5ef;--sidebar:#fffdf8;--paper:#fffdf9;--ink:#30241e;--muted:#75665c;--line:#e9dfd3;--accent:#ab492a;--accent-dark:#8c381e;--wash:#f7e9df;--green:#39674a;--code:#30251f;--mono:"IBM Plex Mono",monospace;font-family:Inter,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);font-size:14px}
*{box-sizing:border-box}body{margin:0}button,a,input,textarea{font:inherit}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{cursor:pointer}button:disabled{opacity:.52;cursor:default}button:focus-visible,a:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid #b44d2c;outline-offset:3px}button{border:0}h1,h2,h3,p{margin:0}small{display:block}code,kbd{font-family:var(--mono)}progress{appearance:none;border:0;width:100%;height:7px;display:block;border-radius:9px;background:#ede1d5;overflow:hidden}progress::-webkit-progress-bar{background:#ede1d5}progress::-webkit-progress-value{background:#b55031;border-radius:9px}progress::-moz-progress-bar{background:#b55031}
.shell{min-height:100vh;display:grid;grid-template-columns:264px minmax(0,1fr)}.sidebar{background:var(--sidebar);border-right:1px solid var(--line);position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;gap:0;padding:26px 20px 20px;overflow:auto}.brand{display:flex;align-items:center;gap:12px;margin:0 6px 35px;font-size:19px;letter-spacing:-.055em;line-height:1.12;font-weight:800}.brand small{margin-top:7px;font-family:var(--mono);font-size:9px;letter-spacing:.065em;color:var(--muted);font-weight:500}.brand-icon{display:grid;place-items:center;width:39px;height:39px;border-radius:12px;color:white;background:#ad4b2c;font:600 22px var(--mono);letter-spacing:-3px;padding-right:5px;flex-shrink:0}.main-nav,.module-nav{display:grid;gap:4px}.main-nav a{display:flex;align-items:center;gap:11px;padding:11px 12px;color:var(--muted);font-weight:750;border-radius:9px}.main-nav a span{font-size:17px;width:19px;text-align:center;line-height:1}.main-nav a[aria-current],.main-nav a:hover{background:var(--wash);color:var(--accent-dark)}.sidebar-heading{display:flex;justify-content:space-between;align-items:center;gap:3px;padding:0 7px;font:600 10px var(--mono);letter-spacing:.09em;color:var(--muted);margin:29px 0 11px}.sidebar-heading span{color:var(--accent)}.module-nav a{display:flex;align-items:center;gap:10px;color:var(--muted);padding:9px 6px;border-radius:8px;font-size:12px;font-weight:700;line-height:1.2}.module-nav a:hover,.module-nav a.active{color:var(--accent-dark);background:#f8eee6}.module-nav .num{font:500 10px var(--mono);border:1px solid var(--line);min-width:25px;padding:4px 2px;text-align:center;border-radius:6px}.module-nav .active .num{color:white;background:#a94a2a;border-color:#a94a2a}.module-nav .check{margin-left:auto;color:var(--green)}.sidebar-foot{margin-top:auto;padding:0 7px 1px}.sidebar-foot .sidebar-heading{padding:0}.sidebar-foot .muted{font-size:11px;margin-top:8px}.muted{color:var(--muted)}
.main{min-width:0}.topbar{height:66px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;align-items:center;padding:0 34px;background:#fdfaf4;color:var(--muted)}.topbar strong{color:var(--ink)}.crumb-divider{margin:0 10px;color:#a28c7b}.local-pill{display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:6px 10px;border-radius:20px;font:500 10px var(--mono);white-space:nowrap}.local-pill i{height:7px;width:7px;background:#6a935d;border-radius:50%}.topbar .mobile-nav{display:none}.body-content{max-width:1390px;padding:26px 34px 44px;margin:auto}
.hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;min-height:171px;padding:28px 30px;border:1px solid #edd2bc;border-radius:17px;background:radial-gradient(ellipse at 83% 36%,#f4caaa 0,transparent 46%),linear-gradient(103deg,#fae7d8,#f8e1ce);margin-bottom:23px}.hero-content{z-index:1;max-width:75%}.eyebrow{font:600 10px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--accent-dark)}.hero h1{font-size:clamp(30px,4vw,48px);letter-spacing:-.062em;line-height:1.08;margin:9px 0 9px;font-weight:800}.hero p{color:#6b4d3a;font-weight:650;font-size:13px}.art{position:absolute;top:0;right:0;width:34%;height:100%;pointer-events:none;background-image:radial-gradient(#b7805b67 1px,transparent 1px);background-size:15px 15px;mask-image:linear-gradient(to right,transparent,#000 28%)}.art-ring{position:absolute;inset:50% auto auto 53%;width:199px;height:130px;border:1px solid #b15c3659;border-radius:50%;transform:translate(-50%,-50%) rotate(-26deg)}.art-ring:nth-child(2){width:221px;height:153px}.art-ring:nth-child(3){width:244px;height:178px}.art-chip{position:absolute;inset:50% auto auto 53%;width:115px;height:78px;display:grid;place-items:center;border:1px solid #bc6f4a;border-radius:13px;background:linear-gradient(130deg,#fff0e0,#f0bc98);color:#974528;box-shadow:0 8px 0 #c88562,0 10px 0 #a9603c,0 17px 25px #9e4d3144;font:600 26px var(--mono);transform:translate(-50%,-56%) rotate(-13deg)}.art-star{position:absolute;color:#a6502d;font:500 23px var(--mono);left:20%;top:23%}.art-star:last-child{left:78%;top:65%;font-size:16px}
.practice-grid{display:grid;grid-template-columns:minmax(0,1.66fr) minmax(245px,1fr);gap:20px;align-items:start}.card{background:var(--paper);border:1px solid var(--line);border-radius:15px;min-width:0}.task{overflow:hidden}.task-body{padding:22px 23px 17px}.task-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}.badge{font:600 10px var(--mono);color:var(--accent-dark);background:var(--wash);border-radius:6px;padding:5px 8px;white-space:nowrap}.task h2{font-size:25px;letter-spacing:-.04em;line-height:1.18;margin-bottom:9px}.task p,.lesson,.result-message{line-height:1.65;font-size:13px;color:var(--muted)}.task-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}.task-controls{margin-top:15px;justify-content:flex-start;flex-wrap:wrap}.task-controls .reset{margin-left:auto}.button,.text-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 13px;border-radius:8px;font-weight:800;min-height:37px;background:#fffaf4;color:var(--ink);border:1px solid var(--line);font-size:12px}.button:hover:not(:disabled){background:#fbede0}.primary{background:var(--accent);border-color:var(--accent);color:white}.primary:hover:not(:disabled){background:var(--accent-dark)}.text-button{background:transparent;border:0;color:var(--accent-dark);padding:6px}.text-button:hover:not(:disabled){text-decoration:underline}.editor{margin:0 23px;background:var(--code);color:#fae5d3;border-radius:10px;overflow:hidden}.editor-bar{display:flex;align-items:center;gap:7px;justify-content:space-between;padding:9px 12px;border-bottom:1px solid #574337;font:500 10px var(--mono);color:#ddbcaa}.editor-bar span:first-child{color:#ffe2cd}.edit-wrap{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:start;height:151px;overflow:hidden}.line-numbers{padding-top:10px;text-align:center;color:#b89c8c;white-space:pre;overflow:hidden;height:151px;line-height:22px;font:400 12px/22px var(--mono)}textarea{display:block;width:100%;resize:none;height:100%;border:0;background:none;color:#ffe8d6;padding:10px 12px 10px 4px;font:500 13px/22px var(--mono);tab-size:2;outline-offset:-2px!important}textarea::placeholder{color:#bea699}
.hints{padding:12px 23px 17px;background:#fbf5ec;border-top:1px solid var(--line)}.hint-button{color:#773d23;background:#fff1d9;border-color:#e8c5a4}.hint-count{font:500 10px var(--mono);color:var(--muted);white-space:nowrap}.outcome{margin:0 23px 15px}.outcome:empty{display:none}.result-message{padding:9px 10px;border-radius:7px;background:#f8eee3;margin-bottom:8px;color:#71432c}.result-message.success{color:#315840;background:#e9f3e7}.results{overflow:auto;max-height:254px;margin-top:8px}.results table{border-collapse:collapse;width:100%;font:400 11px var(--mono)}td,th{text-align:left;padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}th{background:#f7eee5;color:#6c4832;position:sticky;top:0}td.null{color:#826f59;font-style:italic}
.secondary-stack{display:grid;gap:15px}.context{padding:17px 16px}.context h3{font-size:15px;font-weight:800;letter-spacing:-.02em;margin-bottom:12px}.task-links{display:grid;gap:4px}.task-link{display:grid;grid-template-columns:24px 1fr auto;gap:7px;align-items:center;padding:7px 6px;border-radius:7px;color:var(--muted);font-size:11px;font-weight:750;min-height:35px}.task-link:hover,.task-link[aria-current]{background:var(--wash);color:var(--accent-dark)}.task-link span:first-child{font:500 10px var(--mono);padding:4px;text-align:center;border:1px solid var(--line);border-radius:5px}.task-link[aria-current] span:first-child{color:white;background:#a64b2d;border-color:#a64b2d}.task-link small{font-size:9px;color:var(--muted);font-weight:650}.task-link .done{color:var(--green)}.schema-row{border-top:1px solid var(--line);padding:7px 1px}.schema-row summary{cursor:pointer;color:var(--accent-dark);font:500 11px var(--mono);padding:3px 2px}.fields{padding:7px 0 2px;color:var(--muted);font:400 10px/1.6 var(--mono);overflow-wrap:anywhere}.schema-row .results{max-height:170px}.context .lesson{font-size:12px}
.subpage-title{margin:5px 0 22px}.subpage-title h1{font-size:clamp(31px,5vw,49px);letter-spacing:-.055em;margin:5px 0 8px}.subpage-title p{color:var(--muted);max-width:600px;line-height:1.6}.route-grid,.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.route-card{padding:20px}.route-card h2{font-size:20px;letter-spacing:-.03em;margin:7px 0}.route-card p{font-size:12px;line-height:1.5;margin-bottom:10px;color:var(--muted)}.route-card progress{margin:12px 0}.route-card .button{margin-top:3px}.stat-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:16px}.stat strong{font-size:32px;display:block;margin-top:5px;letter-spacing:-.06em}.progress-table{display:grid;gap:11px}.progress-row{display:grid;grid-template-columns:minmax(110px,1.2fr) 1fr 36px;align-items:center;gap:14px;font-size:12px}.progress-row a:hover{text-decoration:underline}.sources{max-width:740px;display:grid;gap:14px}.sources .route-card p{font-size:13px}
@media(max-width:1100px){.shell{grid-template-columns:228px minmax(0,1fr)}.sidebar{padding-inline:14px}.body-content,.topbar{padding-inline:23px}.practice-grid{gap:12px;grid-template-columns:minmax(0,1.6fr) minmax(220px,1fr)}.task-body,.hints{padding-inline:16px}.editor,.outcome{margin-inline:16px}.task-link small{display:none}}
@media(max-width:820px){.shell{grid-template-columns:minmax(0,1fr)}.sidebar{display:none;position:static;height:auto}.sidebar.open{display:flex}.sidebar-foot{margin-bottom:8px}.topbar{height:57px}.topbar .mobile-nav{display:inline-flex;padding:2px 6px;font-size:20px}.topbar #breadcrumbs{margin-right:auto}.brand{margin-bottom:16px}}
@media(max-width:595px){.body-content,.topbar{padding-inline:13px}.body-content{padding-top:14px}.hero{padding:20px 15px;min-height:138px}.hero-content{max-width:80%}.hero h1{font-size:29px}.hero p{font-size:11px}.art{opacity:.62;width:38%;transform:translateX(22%)}.art-chip{width:72px;height:51px;font-size:18px}.practice-grid,.route-grid{grid-template-columns:1fr}.stat-grid{gap:7px}.stat{padding:12px 8px}.stat .eyebrow{font-size:8px}.progress-row{gap:7px}.topbar{font-size:11px}.crumb-divider{margin-inline:5px}.task-link small{display:block}}

.visual-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.solution{margin-top:12px}
.solution pre{margin:10px 0 0;padding:12px;max-width:100%;overflow:auto;border-radius:8px;background:var(--code);color:#ffe8d6;white-space:pre-wrap;overflow-wrap:anywhere;font:500 12px/1.65 var(--mono)}
.mini-nav{display:none}
.telegram .shell{min-height:var(--tg-viewport-stable-height,100dvh)}
.telegram .body-content{padding-bottom:max(44px,var(--tg-safe-area-inset-bottom,0px))}
@media(max-width:820px){
  .mini-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:6px 13px;background:var(--sidebar);border-bottom:1px solid var(--line)}
  .mini-nav a{padding:8px 4px;text-align:center;border-radius:7px;font-size:12px;font-weight:750;color:var(--muted)}
  .mini-nav a[aria-current]{color:var(--accent-dark);background:var(--wash)}
  .telegram textarea{font-size:16px}
}