/* Ескіз 04. Кольори й шрифти: PixelKit 3.0 tokens (Paper / Charcoal), копія значень з Toolmap pack/_pk/tokens.css. */
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url("../fonts/JetBrainsMono-Regular.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:500;font-display:swap;src:url("../fonts/JetBrainsMono-Medium.woff2") format("woff2")}
@font-face{font-family:"Fixel Text";font-weight:400;font-display:swap;src:url("../fonts/FixelText-Regular.woff2") format("woff2")}
@font-face{font-family:"Fixel Text";font-weight:500;font-display:swap;src:url("../fonts/FixelText-Medium.woff2") format("woff2")}
:root{
  --pk-paper:#f3f3f2;--pk-card:#fbfbf7;--pk-ink:#191a1c;--pk-muted:#4c4e53;--pk-faint:#65676d;
  --pk-hair:rgba(20,22,26,.10);--pk-rule:rgba(20,22,26,.26);
  --pk-coral:#c04f31;--pk-blue:#3a6cbf;--pk-mint:#2f8f63;--pk-violet:#8256b8;
  --pk-mono:"JetBrains Mono",ui-monospace,SF Mono,Menlo,Consolas,monospace;
  --pk-sans:"Fixel Text",-apple-system,SF Pro Text,Inter,Segoe UI,system-ui,sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --pk-paper:#151517;--pk-card:#1c1c1f;--pk-ink:#d9d9d5;--pk-muted:#a8a9a5;--pk-faint:#83847f;
  --pk-hair:rgba(255,255,255,.10);--pk-rule:rgba(255,255,255,.26);
  --pk-coral:#d0603f;--pk-blue:#4a7dd6;--pk-mint:#379d70;--pk-violet:#9268cc;
}}
*{box-sizing:border-box}
body{margin:0;background:var(--pk-paper);color:var(--pk-ink);font:400 16px/1.5 var(--pk-sans);-webkit-text-size-adjust:100%}
:focus-visible{outline:2px solid var(--pk-blue);outline-offset:2px}
button{font:inherit;color:inherit;border-radius:0;cursor:pointer}
canvas{image-rendering:pixelated}

.top{display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;max-width:1240px;margin:0 auto;padding:18px 24px;font:500 13px/1.4 var(--pk-mono);border-bottom:1px solid var(--pk-hair)}
.top nav{display:flex;gap:6px 16px;flex-wrap:wrap}
.top a{color:var(--pk-faint);text-underline-offset:4px}
.top a[aria-current]{color:var(--pk-ink)}

main{max-width:1240px;margin:0 auto;padding:28px 24px 72px}
h1{font:500 28px/1.25 var(--pk-mono);margin:0 0 6px}
.lead{margin:0 0 20px;color:var(--pk-muted);max-width:640px}

/* вибір проблеми */
.pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.q{text-align:left;background:var(--pk-card);border:1px solid var(--pk-rule);padding:12px 14px;font:400 15px/1.4 var(--pk-sans);display:flex;flex-direction:column;gap:6px;justify-content:space-between}
.q small{font:400 11px/1.3 var(--pk-mono);color:var(--pk-faint)}
.q:hover{border-color:var(--pk-ink)}
.q[aria-pressed="true"]{border-color:var(--pk-ink);box-shadow:inset 0 0 0 1px var(--pk-ink)}
.q[aria-pressed="true"] small{color:var(--pk-ink)}

/* сцена */
.stage{margin-top:28px;padding-top:18px;border-top:1px solid var(--pk-rule);scroll-margin-top:8px}
.beats{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:4px 22px}
.beats button{background:none;border:0;border-bottom:2px solid transparent;padding:8px 0;font:500 13px/1.3 var(--pk-mono);color:var(--pk-faint);display:flex;align-items:center;gap:8px}
.beats button i{font-style:normal;display:grid;place-items:center;width:20px;height:20px;border:1px solid currentColor;font-size:11px}
.beats button:hover{color:var(--pk-ink)}
.beats button[aria-current]{color:var(--pk-ink);border-bottom-color:var(--pk-ink)}
.beats button[aria-current] i{background:var(--pk-ink);color:var(--pk-paper);border-color:var(--pk-ink)}

.pic{min-height:320px}
.lab{display:none;margin:0 0 8px;font:500 12px/1.3 var(--pk-mono);color:var(--pk-faint)}
.lab b{font-weight:500;color:var(--pk-ink)}
.row{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bw{position:relative}

/* картка кроку: рамку малює sketch.js за типом (людина - від руки, програма - рівно, модель - майже рівно) */
.st{position:relative;min-width:0;padding:24px 12px 10px}
.frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.frame .bg{fill:var(--pk-card)}
.frame .ln{fill:none;stroke:var(--pk-ink);stroke-linecap:round;stroke-linejoin:round}
.st.m>.frame .ln,.smp.m .ln{stroke-linecap:butt;stroke-linejoin:miter}
.frame .strike{fill:none;stroke:var(--pk-coral);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .45s ease-out;transition-delay:calc(var(--i,0)*90ms)}
.n{position:absolute;top:5px;left:9px;font:400 11px/1.3 var(--pk-mono);color:var(--pk-faint)}
.x2{position:absolute;top:5px;left:28px;font:500 11px/1.3 var(--pk-mono);opacity:0;transition:opacity .3s}
.x2::before,.tag i,.why i,.kind i,.legend i{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;background:var(--pk-coral);vertical-align:1px}
.st.twice .x2{opacity:1}
.body{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:start;transition:opacity .4s;transition-delay:calc(var(--i,0)*90ms)}
.sp{width:48px;height:48px;display:block}
.tx{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.who{font:500 12px/1.3 var(--pk-mono);overflow-wrap:anywhere}
.do{font:400 14px/1.35 var(--pk-sans);overflow-wrap:break-word}
.tool{font:400 11px/1.3 var(--pk-mono);color:var(--pk-muted);border:1px solid var(--pk-rule);background:var(--pk-paper);padding:1px 5px}
.tag{font:400 11px/1.3 var(--pk-mono);color:var(--pk-muted)}
.why{position:relative;margin:8px 0 0;font:500 11px/1.35 var(--pk-mono);color:var(--pk-ink);opacity:0;transition:opacity .4s;transition-delay:calc(var(--i,0)*90ms + .2s)}
.kind{font:400 11px/1.3 var(--pk-mono);color:var(--pk-muted)}
.kind.m i,.legend .m i{background:var(--pk-blue)}
.kind.a i,.legend .a i{background:var(--pk-violet)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* 1: зараз. Картки з'являються, коли до них доходить річ */
.before{padding-right:42px}
.before .st{opacity:0;transition:opacity .35s}
.before .st.seen{opacity:1}
.token{position:absolute;left:0;top:0;width:24px;height:24px;z-index:2;opacity:0;transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .2s}
.token.on{opacity:1}
.token.snap{transition:none}
.bracket{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.bracket path{fill:none;stroke:var(--pk-coral);stroke-width:1.6}
.bracket .bl{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s ease-in-out}
.bracket .ah{opacity:0;transition:opacity .2s .6s}
.backlab{position:absolute;left:0;top:0;font:500 11px/1.3 var(--pk-mono);background:var(--pk-paper);padding:4px 2px;white-space:nowrap;writing-mode:vertical-rl;transform:translate(-50%,-50%);opacity:0;transition:opacity .3s .5s}
.bw.back .bl{stroke-dashoffset:0}
.bw.back .ah,.bw.back .backlab{opacity:1}
.bw.noback .bracket,.bw.noback .backlab{display:none}

/* 2: зайве */
.b2 .st.cut .body{opacity:.34}
.b2 .st.cut .strike,.b3 .st.cut .strike{stroke-dashoffset:0}
.b2 .st.cut .why{opacity:1}

/* 3: було - короткий рядок квадратів, стало - нові кроки */
.b3 .lab{display:block}
.b3 .before{display:flex;flex-wrap:wrap;gap:6px;padding:0}
.b3 .before .st{width:30px;height:30px;padding:0;opacity:1}
.b3 .before .body,.b3 .before .why,.b3 .before .x2{display:none}
.b3 .before .n{position:relative;top:auto;left:auto;display:grid;place-items:center;height:100%;color:var(--pk-ink)}
.b3 .before .st.cut .n{color:var(--pk-faint)}
.b3 .bracket,.b3 .backlab,.b3 .token{display:none}
.afterwrap{display:none;margin-top:22px}
.b3 .afterwrap{display:block}
.aw{position:relative;padding-left:38px}
.rail{position:absolute;left:0;top:0;bottom:0;width:24px}
.rail::before{content:"";position:absolute;left:11px;top:4px;bottom:4px;border-left:1.5px solid var(--pk-ink)}
.rail i{position:absolute;left:8px;width:8px;height:8px;background:var(--pk-paper);border:1.5px solid var(--pk-ink)}
.rail i:first-child{top:0}.rail i:nth-child(2){bottom:0}
.cargo{position:absolute;left:0;top:calc(100% - 24px);width:24px;height:24px;animation:ridev 3.4s cubic-bezier(.45,0,.55,1) .9s 2 backwards}
@keyframes ridev{from{top:0}to{top:calc(100% - 24px)}}
@keyframes rideh{from{left:0}to{left:calc(100% - 24px)}}
.after .st{animation:stin .45s ease-out backwards;animation-delay:calc(.15s + var(--i,0)*.22s)}
@keyframes stin{from{opacity:0;transform:translateY(6px)}}
.after .do{font-size:15px}
.legend{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px;font:400 12px/1.3 var(--pk-mono);color:var(--pk-muted)}
.legend li{display:flex;align-items:center;gap:8px}
.smp{position:relative;width:30px;height:20px;flex:none}

.cap{margin:22px 0 14px;font:500 18px/1.4 var(--pk-sans);max-width:760px;min-height:2.8em}
.ctl{display:flex;flex-wrap:wrap;gap:8px}
.btn{background:var(--pk-card);border:1px solid var(--pk-rule);padding:9px 14px;min-height:42px;font:500 13px/1.3 var(--pk-mono)}
.btn:hover{border-color:var(--pk-ink)}
.btn[disabled]{color:var(--pk-faint);cursor:default;border-color:var(--pk-hair)}

/* широкий екран: кроки в один рядок */
@media (min-width:1000px){
  .pic{min-height:330px}
  .before{grid-template-columns:repeat(var(--n),minmax(0,1fr));padding:44px 0 0}
  .before .body,.after .body{grid-template-columns:minmax(0,1fr)}
  .backlab{writing-mode:horizontal-tb;padding:2px 8px}
  .aw{padding:34px 0 0;max-width:calc(var(--n)*236px)}
  .after{grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:20px}
  .after .st{padding:26px 16px 16px}
  .rail{left:0;right:0;top:0;bottom:auto;width:auto;height:24px}
  .rail::before{left:4px;right:4px;top:11px;bottom:auto;border-left:0;border-top:1.5px solid var(--pk-ink)}
  .rail i{left:auto;top:8px}
  .rail i:first-child{left:0;top:8px}.rail i:nth-child(2){right:0;bottom:auto}
  .cargo{top:0;left:calc(100% - 24px);animation-name:rideh}
}
@media (max-width:760px){
  .pick{grid-template-columns:minmax(0,1fr)}
  main{padding:22px 16px 56px}.top{padding:14px 16px}
  h1{font-size:23px}
}
@media (min-width:761px) and (max-width:999px){.pick{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}
@media print{.ctl,.pick{display:none}}