@font-face { font-family:Inter; font-weight:400; font-display:swap; src:url(/practices/vizhu/vendor/inter-latin-400-normal.woff) format('woff'); unicode-range:U+0000-00FF,U+2000-206F; }
@font-face { font-family:Inter; font-weight:400; font-display:swap; src:url(/practices/vizhu/vendor/inter-cyrillic-400-normal.woff) format('woff'); unicode-range:U+0400-04FF,U+2116; }
@font-face { font-family:Inter; font-weight:600; font-display:swap; src:url(/practices/vizhu/vendor/inter-latin-600-normal.woff) format('woff'); unicode-range:U+0000-00FF,U+2000-206F; }
@font-face { font-family:Inter; font-weight:600; font-display:swap; src:url(/practices/vizhu/vendor/inter-cyrillic-600-normal.woff) format('woff'); unicode-range:U+0400-04FF,U+2116; }
:root { --page:#f4f2ee; --paper:#fff; --ink:#3B2A2A; --taupe:#6B4F4F; --green:#176117; --tint:#edf4ec; --line:#ddd6d0; --danger:#b3372f; --ease:cubic-bezier(.2,.8,.2,1);
        --shadow:0 1px 2px rgb(0 0 0/.05),0 2px 8px rgb(0 0 0/.05); }
* { box-sizing:border-box; }
html,body { height:100%; margin:0; }
body { background:var(--page); color:var(--ink); font:14px/20px Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; display:flex; flex-direction:column; height:100dvh; overflow:hidden;
       -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:2px solid var(--green); outline-offset:2px; }

#top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 12px 0; }
.tools { display:flex; align-items:center; padding:2px; border-radius:12px; background:var(--paper); box-shadow:var(--shadow); }
#stats { display:flex; gap:24px; padding-right:4px; }
#stats div { display:flex; flex-direction:column; align-items:flex-end; }
#stats span { font-size:12px; line-height:16px; color:var(--taupe); }
#stats b { font-size:20px; line-height:24px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
#rival { align-self:center; margin:8px 12px 0; padding:6px 12px; border-radius:16px; background:var(--tint); color:var(--green); font-size:13px; font-weight:600; max-width:calc(100% - 24px); text-align:center; }
#rival[hidden] { display:none; }
#stage { flex:1; min-height:0; display:grid; place-items:center; margin:12px; container-type:size; }
#bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 12px; padding:0 12px calc(12px + env(safe-area-inset-bottom)); }
#lay { font-size:13px; color:var(--taupe); font-variant-numeric:tabular-nums; white-space:nowrap; }
.seg { display:flex; padding:2px; border-radius:12px; background:color-mix(in srgb,var(--ink) 7%,transparent); }
.seg button { min-width:44px; height:40px; padding:0 12px; border:0; border-radius:10px; background:transparent; color:var(--taupe); font:inherit; font-weight:600; font-variant-numeric:tabular-nums; cursor:pointer; transition:background .15s,color .15s; }
.seg button:hover { color:var(--ink); }
.seg button[aria-pressed=true] { background:var(--paper); color:var(--ink); box-shadow:0 1px 2px rgb(0 0 0/.08); }
.ic { width:44px; height:44px; border:0; border-radius:10px; background:transparent; color:var(--ink); cursor:pointer; display:grid; place-items:center; transition:background .15s; }
.tools .ic { width:40px; height:40px; }
.ic:hover { background:color-mix(in srgb,var(--ink) 8%,transparent); }
.ic:active { background:color-mix(in srgb,var(--ink) 14%,transparent); }
.ic svg, .btn svg, .gd-steps svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* The field: as big as the window allows, keeping its shape */
#field { position:relative; display:grid; gap:8px; grid-template-columns:repeat(var(--cols),minmax(0,1fr));
         width:min(100cqw,calc(100cqh*var(--ratio,1)),640px); aspect-ratio:var(--ratio,1); }
.links { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; fill:none; stroke:var(--green); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.links circle { fill:var(--green); stroke:none; animation:pop .3s var(--ease) both; }
.tile { position:relative; min-width:0; min-height:0; padding:0; border:0; border-radius:12px; background:var(--paper); color:var(--green); box-shadow:var(--shadow); cursor:pointer; font:inherit; display:grid; place-items:center; touch-action:manipulation; transition:transform .18s var(--ease),background .2s,box-shadow .2s; }
@media (hover:hover) { .tile:hover { transform:translateY(-1px); } }
.tile:active { transform:scale(.96); }
.tile svg { width:66%; height:66%; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.tile svg .dot, .sym svg .dot { fill:currentColor; stroke:none; }
.draw path, .draw circle:not(.dot) { stroke-dasharray:1; animation:draw var(--dur,.42s) ease-out both; animation-delay:calc(var(--i,0)*45ms); }
@keyframes draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes pop { from { opacity:0; transform:scale(.4); } }
@keyframes shake { 25% { transform:translateX(-4px); } 75% { transform:translateX(4px); } }
.shake { animation:shake .22s ease-in-out 2; }

/* Пара! */
.back { width:14%; aspect-ratio:1; border-radius:50%; border:1.5px solid color-mix(in srgb,var(--taupe) 45%,transparent); transition:opacity .15s; }
.face { position:absolute; inset:0; display:grid; place-items:center; }
.tile.up .back, .tile.got .back { opacity:0; }
.tile.up { box-shadow:0 0 0 1.5px var(--green); }
.tile.got { background:var(--tint); box-shadow:none; cursor:default; }
.finished .tile.got { background:var(--paper); }
/* Нить! */
.tile.num { color:var(--ink); font-size:clamp(18px,5.2vmin,30px); font-weight:600; font-variant-numeric:tabular-nums; }
.tile.num.done { background:var(--tint); color:color-mix(in srgb,var(--green) 55%,transparent); box-shadow:none; cursor:default; }
#field.finished .tile.num { background:transparent; color:color-mix(in srgb,var(--taupe) 22%,transparent); box-shadow:none; transition:all .6s ease; }
.links .grow { stroke-dasharray:1; animation:draw .34s ease-out both; }
.links .grow.fast { animation-duration:.18s; }
.links .grow.slow { animation-duration:2s; animation-timing-function:ease-in-out; }
.links circle.late { animation-delay:2s; }
/* Совпало! */
#table { position:relative; display:grid; gap:12px; width:min(100cqw,calc(50cqh - 6px),560px); }
@container (min-aspect-ratio:1/1) { #table { grid-template-columns:1fr 1fr; width:min(100cqw,calc(200cqh + 12px),960px); } }
.card { position:relative; aspect-ratio:1; border-radius:50%; background:var(--paper); box-shadow:var(--shadow); }
.sym { position:absolute; aspect-ratio:1; padding:0; border:0; border-radius:50%; background:transparent; color:var(--green); cursor:pointer; transform:translate(-50%,-50%) rotate(var(--rot)); touch-action:manipulation; transition:background .15s; }
.sym svg { display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.sym.hit { background:var(--tint); }
.sym.shake { animation:symshake .17s ease-in-out 2; color:var(--danger); }
@keyframes symshake { 25% { transform:translate(calc(-50% - 4px),-50%) rotate(var(--rot)); } 75% { transform:translate(calc(-50% + 4px),-50%) rotate(var(--rot)); } }
/* Штрих!, Росчерк!, Наоборот! */
.board { position:relative; display:grid; gap:12px; width:min(100cqw,calc(100cqh - 190px),460px); }
.pic { display:grid; place-items:center; aspect-ratio:1; border-radius:16px; background:var(--paper); box-shadow:var(--shadow); transition:background .2s; overflow:hidden; }
.pic svg { width:72%; height:72%; fill:none; stroke:var(--green); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
#pic svg { stroke-width:1.6; }
.answers { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ans { height:44px; border:0; border-radius:12px; background:var(--paper); color:var(--ink); font:inherit; font-weight:600; box-shadow:var(--shadow); cursor:pointer; }
.ans.ghost { background:color-mix(in srgb,var(--ink) 5%,transparent); box-shadow:none; cursor:default; }
.ans:disabled { cursor:default; color:var(--taupe); }
.ans { transition:transform .12s var(--ease),box-shadow .2s; touch-action:manipulation; }
.ans:not(:disabled):not(.ghost):hover { box-shadow:0 0 0 1px color-mix(in srgb,var(--green) 30%,transparent),0 0 14px color-mix(in srgb,var(--green) 22%,transparent); }
.ans:not(:disabled):not(.ghost):active { transform:scale(.97); box-shadow:0 0 0 1px var(--green),0 0 18px color-mix(in srgb,var(--green) 40%,transparent); }
.ans.right, .ans.right:disabled { --glow:var(--green); background:var(--tint); color:var(--green); box-shadow:0 0 0 1.5px var(--green),0 0 20px color-mix(in srgb,var(--green) 45%,transparent); animation:glow .6s var(--ease) both; }
.ans.wrong, .ans.wrong:disabled { --glow:var(--danger); color:var(--danger); box-shadow:0 0 0 1.5px var(--danger),0 0 20px color-mix(in srgb,var(--danger) 40%,transparent); animation:glow .6s var(--ease) both; }
@keyframes glow { from { box-shadow:0 0 0 1.5px var(--glow),0 0 36px 6px color-mix(in srgb,var(--glow) 70%,transparent); } }
.board.line { width:min(100cqw,calc(100cqh - 56px),560px); }
#fig { display:block; width:100%; aspect-ratio:1; border-radius:16px; background:var(--paper); box-shadow:var(--shadow); touch-action:none; cursor:pointer; user-select:none; }
#fig .edge { stroke:var(--line); stroke-width:1.5; stroke-linecap:round; }
#fig .way { fill:none; stroke:var(--green); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#fig .way.grow { stroke-dasharray:1; animation:draw .9s ease-out both; }
#fig .node { fill:var(--taupe); }
#fig .node.on { fill:var(--green); }
#redo { justify-self:center; }
.board.flipper { width:min(100cqw,calc(100cqh - 136px),440px); }
#rule { text-align:center; height:32px; font-size:22px; line-height:32px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
#rule.flip { color:var(--green); }
#pad.flip { background:var(--tint); }
#pad svg { width:100%; height:100%; }
#pad .stem path { fill:none; stroke:color-mix(in srgb,var(--green) 30%,transparent); stroke-width:.9; }
#pad .stem.done path { stroke:var(--green); stroke-width:.9; }
#pad .links-in path { stroke-width:3; }
#pad .grow { stroke-dasharray:1; animation:draw .16s ease-out both; }
.sides { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.side { display:grid; place-items:center; height:64px; border:0; border-radius:16px; background:var(--paper); color:var(--ink); box-shadow:var(--shadow); cursor:pointer; touch-action:manipulation; }
.side svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.side:active { transform:scale(.97); }
.side.good { background:var(--tint); color:var(--green); }
.side.bad { color:var(--danger); }
#go { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); padding:0 32px; height:52px; font-size:16px; box-shadow:0 4px 16px rgb(23 97 23/.28); }
#go:active { transform:translate(-50%,-50%) scale(.98); }

/* Guide and sheet dialogs: the same as in Вижу! */
dialog { border:0; padding:0; border-radius:16px; background:#fff; color:var(--ink); max-height:calc(100dvh - 24px); overflow:auto; box-shadow:0 4px 12px rgb(0 0 0/.08),0 16px 40px rgb(0 0 0/.14); }
dialog::backdrop { background:rgb(40 30 30/.4); }
dialog[open] { animation:rise .24s var(--ease); }
@keyframes rise { from { opacity:0; transform:translateY(8px) scale(.985); } }
#guide { width:min(600px,calc(100vw - 24px)); -webkit-user-select:text; user-select:text; }
.gd { position:relative; padding:24px; display:flex; flex-direction:column; gap:24px; }
.gd:focus { outline:none; }
.gd h1 { margin:0 0 8px; padding-right:44px; font-size:24px; line-height:32px; font-weight:600; letter-spacing:-.02em; }
.gd h3 { margin:0 0 12px; font-size:13px; line-height:20px; font-weight:600; color:var(--green); }
.gd p { margin:0; color:var(--taupe); }
.gd-lead { font-size:16px; line-height:24px; }
#guideClose, #xpClose { position:absolute; top:12px; right:12px; }
.gd-steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.gd-steps li { display:grid; grid-template-columns:40px 1fr; gap:12px; align-items:start; }
.gd-steps i { width:40px; height:40px; border-radius:50%; background:var(--tint); color:var(--green); display:grid; place-items:center; }
.gd b { display:block; font-weight:600; color:var(--ink); }
.gd-why { display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; }
.gd-note { font-size:13px; line-height:20px; }
.btn { display:flex; align-items:center; justify-content:center; gap:8px; min-width:0; height:44px; padding:0 12px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink); font:inherit; font-weight:600; cursor:pointer; transition:background .15s,transform .15s; }
.btn svg { width:18px; height:18px; flex:none; }
.btn:hover { background:#f6f3ef; } .btn:active { transform:scale(.98); }
.btn.main { background:var(--green); border-color:var(--green); color:#fff; } .btn.main:hover { background:#1e7a1e; }
.btn:disabled { opacity:.5; cursor:default; }
.btn[hidden] { display:none; }
#xp { width:min(800px,calc(100vw - 24px)); }
.xp-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); }
.xp-view { background:#f4f2ee; padding:24px; display:flex; align-items:center; justify-content:center; }
#xpSheet { display:block; width:100%; max-width:360px; aspect-ratio:210/297; background:#fff; border-radius:2px; box-shadow:0 1px 2px rgb(0 0 0/.06),0 8px 24px rgb(0 0 0/.1); }
.xp-side { padding:24px; display:flex; flex-direction:column; gap:12px; position:relative; }
.xp-side h2 { margin:0; padding-right:44px; font-size:24px; line-height:32px; font-weight:600; letter-spacing:-.02em; }
#xpSub { margin:-4px 0 0; color:var(--green); font-weight:600; }
#xpLine { margin:0; color:var(--taupe); font-size:13px; line-height:16px; letter-spacing:.06em; word-break:break-all; -webkit-user-select:text; user-select:text; }
.xp-field { display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; }
.xp-field input { font:inherit; font-size:16px; font-weight:400; color:var(--ink); height:44px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:#fff; -webkit-user-select:text; user-select:text; }
.xp-field input:hover { border-color:#c6bbb3; }
.xp-field input:focus { outline:2px solid var(--green); outline-offset:-1px; border-color:transparent; }
.xp-switch { position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:36px; font-weight:600; cursor:pointer; }
.xp-switch input { position:absolute; right:0; width:44px; height:26px; margin:0; opacity:0; cursor:pointer; }
.xp-switch i { flex:none; position:relative; width:44px; height:26px; border-radius:999px; background:#d8d1cb; transition:background .18s; }
.xp-switch i::after { content:""; position:absolute; left:3px; top:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgb(0 0 0/.2); transition:transform .18s var(--ease); }
.xp-switch input:checked + i { background:var(--green); } .xp-switch input:checked + i::after { transform:translateX(18px); }
.xp-switch input:focus-visible + i { outline:2px solid var(--green); outline-offset:2px; }
.xp-actions { margin-top:auto; display:flex; flex-direction:column; gap:8px; }
.xp-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#xpNote { min-height:20px; font-size:13px; color:var(--taupe); -webkit-user-select:text; user-select:text; overflow-wrap:anywhere; }
.xp-by { margin:0; font-size:12px; line-height:16px; color:var(--taupe); }
.xp-by a { color:inherit; }
@media (max-width:640px) {
  .gd { padding:16px; gap:20px; } .gd-why { grid-template-columns:1fr; gap:12px; }
  .xp-grid { grid-template-columns:1fr; } .xp-view { order:2; padding:16px; } #xpSheet { max-width:220px; } .xp-side { padding:16px; }
  /* On a phone the result and the challenge come first, the sheet follows */
  .xp-actions { order:1; margin-top:0; } .xp-field, .xp-switch { order:2; } .xp-by { order:3; }
  #lay { order:-1; width:100%; text-align:center; }
}
@media (prefers-reduced-motion:reduce) {
  dialog[open], .draw path, .draw circle, .links circle, .shake, .links path, #pad .grow, #fig .way.grow, .ans.right, .ans.wrong { animation:none !important; stroke-dashoffset:0 !important; }
}