@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;
    src:url(/portfolio/rakheat/inter-latin.woff2) format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;
    src:url(/portfolio/rakheat/inter-latin-ext.woff2) format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}


  :root{
    --bg:#0c0f14; --bg2:#11151c; --card:#151a23; --line:#232a36;
    --fg:#e8ecf2; --fg2:#a6b0c0; --fg3:#6f7b8c;
    --hot:#ff7a45; --hot2:#ffb088; --cool:#4ea8de; --ok:#4ade80; --warn:#fbbf24;
    --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    --sans:"Inter","Inter var",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --maxw:1120px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);
    font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  a{color:var(--hot2);text-decoration:none;border-bottom:1px solid rgba(255,176,136,.3)}
  a:hover{border-bottom-color:var(--hot2)}
  h1,h2,h3{line-height:1.2;letter-spacing:-.02em;margin:0}
  h1{font-size:clamp(2.1rem,5.5vw,4rem);font-weight:800}
  h2{font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:750;margin:0 0 .6em}
  h3{font-size:1.12rem;font-weight:700;margin:0 0 .4em}
  p{margin:0 0 1.1em}
  .mono{font-family:var(--mono);font-size:.88em}

  /* ---- ribad ---- */
  header.hero{position:relative;overflow:hidden;
    background:radial-gradient(1200px 500px at 15% -10%,rgba(255,122,69,.18),transparent 60%),
               radial-gradient(900px 420px at 88% 8%,rgba(78,168,222,.14),transparent 60%),
               var(--bg);
    border-bottom:1px solid var(--line)}
  .hero-inner{padding:clamp(56px,10vw,120px) 24px clamp(40px,6vw,72px)}
  .kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);
    font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--hot2);
    border:1px solid rgba(255,122,69,.35);border-radius:999px;padding:6px 14px;margin-bottom:26px}
  .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 12px var(--ok)}
  .lede{font-size:clamp(1.05rem,2.1vw,1.32rem);color:var(--fg2);max-width:62ch;margin-top:22px}
  .hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--hot) 5%,var(--hot2) 95%);
    -webkit-background-clip:text;background-clip:text;color:transparent}

  section{padding:clamp(52px,8vw,96px) 0;border-bottom:1px solid var(--line)}
  section.alt{background:var(--bg2)}
  .eyebrow{font-family:var(--mono);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--fg3);margin-bottom:14px}
  .narrow{max-width:72ch}

  /* ---- numbrid ---- */
  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px;margin-top:38px}
  .stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px}
  .stat .n{font-size:1.85rem;font-weight:800;letter-spacing:-.03em;line-height:1.1}
  .stat .n.hot{color:var(--hot2)} .stat .n.cool{color:var(--cool)} .stat .n.ok{color:var(--ok)}
  .stat .l{color:var(--fg3);font-size:.85rem;margin-top:6px;line-height:1.45}

  /* ---- kaardid ---- */
  .grid{display:grid;gap:18px}
  .g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
  .g3{grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
  .card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px}
  .card.hot{border-color:rgba(255,122,69,.3)}
  .card.ok{border-color:rgba(74,222,128,.25)}
  .card.cool{border-color:rgba(78,168,222,.28)}
  .card p:last-child{margin-bottom:0}
  .tag{display:inline-block;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
    text-transform:uppercase;padding:3px 9px;border-radius:6px;margin-bottom:12px}
  .tag.hot{background:rgba(255,122,69,.14);color:var(--hot2)}
  .tag.cool{background:rgba(78,168,222,.14);color:var(--cool)}
  .tag.ok{background:rgba(74,222,128,.13);color:var(--ok)}
  .tag.warn{background:rgba(251,191,36,.13);color:var(--warn)}

  /* ---- ajatelg ---- */
  .tl{position:relative;margin-top:34px;padding-left:34px}
  .tl:before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;
    background:linear-gradient(var(--line),rgba(255,122,69,.55),var(--line))}
  .tl-item{position:relative;padding-bottom:30px}
  .tl-item:last-child{padding-bottom:0}
  .tl-item:before{content:"";position:absolute;left:-30px;top:8px;width:12px;height:12px;border-radius:50%;
    background:var(--bg);border:2px solid var(--fg3)}
  .tl-item.hit:before{border-color:var(--hot);background:var(--hot);box-shadow:0 0 14px rgba(255,122,69,.6)}
  .tl-item.win:before{border-color:var(--ok);background:var(--ok);box-shadow:0 0 14px rgba(74,222,128,.5)}
  .tl-when{font-family:var(--mono);font-size:.8rem;color:var(--fg3);letter-spacing:.04em}
  .tl-what{font-weight:700;margin:2px 0 4px}
  .tl-body{color:var(--fg2);font-size:.97rem}

  /* ---- kood ---- */
  pre{background:#0a0d12;border:1px solid var(--line);border-radius:12px;padding:16px 18px;
    overflow-x:auto;font-family:var(--mono);font-size:.84rem;line-height:1.55;color:#cbd5e1;margin:0 0 1.1em}
  pre .c{color:var(--fg3)} pre .k{color:var(--hot2)} pre .v{color:var(--ok)}
  code{font-family:var(--mono);font-size:.88em;background:rgba(255,255,255,.055);
    padding:2px 6px;border-radius:5px;border:1px solid var(--line)}

  /* ---- tabel ---- */
  .tbl{width:100%;border-collapse:collapse;font-size:.94rem;margin-top:8px}
  .tbl th,.tbl td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
  .tbl th{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);font-weight:600}
  .tbl td.mono{font-family:var(--mono);font-size:.86rem;white-space:nowrap}
  .tbl tr:last-child td{border-bottom:none}
  .before{color:var(--fg3)} .after{color:var(--ok);font-weight:600}

  /* ---- skeem ---- */
  .diagram{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;margin-top:30px}
  .diagram .scroller{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .diagram svg{width:100%;height:auto;display:block}
  .diagram .hint{display:none;font-size:.78rem;color:var(--fg3);padding:2px 10px 8px}
  @media (max-width:760px){
    .diagram svg{min-width:640px}
    .diagram .hint{display:block}
  }
  .legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px;padding:0 10px 6px;
    font-size:.84rem;color:var(--fg3)}
  .legend i{display:inline-block;width:22px;height:3px;border-radius:2px;margin-right:7px;vertical-align:middle}

  ul.clean{list-style:none;padding:0;margin:0}
  ul.clean li{position:relative;padding-left:24px;margin-bottom:10px;color:var(--fg2)}
  ul.clean li:before{content:"";position:absolute;left:4px;top:.62em;width:7px;height:7px;
    border-radius:50%;background:var(--hot);opacity:.75}
  ul.clean li b{color:var(--fg)}

  .quote{border-left:3px solid var(--hot);background:rgba(255,122,69,.06);
    padding:18px 22px;border-radius:0 12px 12px 0;color:var(--fg2);font-size:1.02rem}
  .quote b{color:var(--fg)}

  footer{padding:52px 0 64px;color:var(--fg3);font-size:.9rem}
  .stack{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
  .chip{font-family:var(--mono);font-size:.78rem;color:var(--fg2);background:var(--card);
    border:1px solid var(--line);border-radius:8px;padding:6px 11px}
  @media (max-width:640px){
    body{font-size:16px}
    .tl{padding-left:26px} .tl-item:before{left:-23px}
    /* tabel → kaardid, sest kolm kitsast veergu murrab eesti sõnu keskelt */
    .tbl thead{display:none}
    .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
    .tbl tr{background:var(--card);border:1px solid var(--line);border-radius:13px;
      padding:13px 15px;margin-bottom:11px}
    .tbl td{border:none;padding:4px 0;overflow-wrap:break-word}
    .tbl td:first-child{font-weight:700;font-size:1rem;margin-bottom:5px;color:var(--fg)}
    .tbl td:not(:first-child):before{content:attr(data-l);display:block;
      font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);margin-bottom:1px}
    .tbl td.mono{white-space:normal}
  }

  /* ===== interaktiivsus ===== */
  #progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:99;
    background:linear-gradient(90deg,var(--hot),var(--hot2));box-shadow:0 0 10px rgba(255,122,69,.5)}
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
  .reveal.in{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

  /* juhtnupud */
  .ctrl{margin:18px 0}
  .ctrl label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
    font-size:.88rem;color:var(--fg2);margin-bottom:8px}
  .ctrl label b{font-family:var(--mono);font-size:1rem;color:var(--fg)}
  input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:99px;
    background:linear-gradient(90deg,var(--cool),var(--hot));outline:none;margin:0}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
    background:#fff;border:3px solid var(--hot);cursor:grab;box-shadow:0 2px 10px rgba(0,0,0,.5)}
  input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;
    border:3px solid var(--hot);cursor:grab}
  input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(255,122,69,.35)}

  .readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:18px}
  .ro{background:#0a0d12;border:1px solid var(--line);border-radius:11px;padding:13px 15px}
  .ro .v{font-family:var(--mono);font-size:1.3rem;font-weight:700;letter-spacing:-.02em}
  .ro .k{font-size:.74rem;color:var(--fg3);letter-spacing:.06em;text-transform:uppercase;margin-top:3px}
  .v.hot{color:var(--hot2)} .v.cool{color:var(--cool)} .v.ok{color:var(--ok)} .v.warn{color:var(--warn)}

  .verdict{margin-top:18px;border-radius:12px;padding:15px 18px;font-weight:650;
    display:flex;gap:12px;align-items:flex-start;line-height:1.5}
  .verdict .ic{font-size:1.25rem;line-height:1.2}
  .verdict.on{background:rgba(255,122,69,.1);border:1px solid rgba(255,122,69,.4);color:var(--hot2)}
  .verdict.off{background:rgba(78,168,222,.08);border:1px solid rgba(78,168,222,.3);color:var(--cool)}
  .verdict small{display:block;font-weight:400;color:var(--fg2);margin-top:4px;font-size:.87rem}

  .cond{display:flex;align-items:flex-start;gap:11px;padding:9px 0;border-bottom:1px solid var(--line);
    font-family:var(--mono);font-size:.85rem;color:var(--fg2)}
  .cond:last-of-type{border-bottom:none}
  .cond .mark{width:20px;flex:none;text-align:center;font-family:var(--sans);font-weight:700}
  .cond.yes .mark{color:var(--ok)} .cond.no .mark{color:var(--fg3)}
  .cond.no{opacity:.62}

  .chart{background:#0a0d12;border:1px solid var(--line);border-radius:12px;padding:10px 6px 4px;margin-top:6px}
  .chart svg{width:100%;height:auto;display:block}

  /* tabid */
  .tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
  .tab{font:600 .9rem var(--sans);color:var(--fg2);background:var(--card);border:1px solid var(--line);
    border-radius:10px;padding:9px 16px;cursor:pointer;transition:.18s}
  .tab:hover{color:var(--fg);border-color:#39455a}
  .tab[aria-selected=true]{background:rgba(255,122,69,.12);border-color:rgba(255,122,69,.5);color:var(--hot2)}
  .panel[hidden]{display:none}

  /* klikitav skeem */
  .node{cursor:pointer}
  .node rect{transition:stroke .18s, filter .18s}
  .node:hover rect,.node:focus rect{stroke:#ff7a45;stroke-opacity:1;filter:drop-shadow(0 0 10px rgba(255,122,69,.35))}
  .node:focus{outline:none}
  .node.sel rect{stroke:#ff7a45;stroke-opacity:1;filter:drop-shadow(0 0 14px rgba(255,122,69,.5))}
  #nodeinfo{background:#0a0d12;border:1px solid var(--line);border-left:3px solid var(--hot);
    border-radius:0 12px 12px 0;padding:16px 20px;margin-top:14px;min-height:92px}
  #nodeinfo h4{margin:0 0 6px;font-size:1rem}
  #nodeinfo p{margin:0;color:var(--fg2);font-size:.93rem}
  .anim-off .flowdash{animation:none}
  .flowdash{stroke-dasharray:9 7;animation:dash 1.1s linear infinite}
  @keyframes dash{to{stroke-dashoffset:-16}}

  /* mäng */
  .guess{display:grid;gap:10px;margin-top:16px}
  .opt{text-align:left;font:500 .95rem var(--sans);color:var(--fg2);background:var(--card);
    border:1px solid var(--line);border-radius:11px;padding:13px 16px;cursor:pointer;transition:.16s}
  .opt:hover{border-color:#41506a;color:var(--fg)}
  .opt.wrong{border-color:rgba(251,191,36,.45);background:rgba(251,191,36,.07);color:var(--warn);cursor:default}
  .opt.right{border-color:rgba(74,222,128,.55);background:rgba(74,222,128,.09);color:var(--ok);cursor:default}
  .opt .why{display:block;margin-top:6px;font-size:.85rem;font-weight:400;color:var(--fg3)}
  .opt.wrong .why,.opt.right .why{color:var(--fg2)}
  #guessdone{margin-top:14px}

  /* ===== hele teema ===== */
  html[data-theme="light"]{
    --bg:#faf9f7; --bg2:#f2f0ec; --card:#ffffff; --line:#e4e0d9;
    --fg:#12161d; --fg2:#4c5665; --fg3:#7b8593;
    --hot:#d9521a; --hot2:#b8451a; --cool:#1b6b9e; --ok:#15803d; --warn:#a16207;
  }
  html[data-theme="light"] .card{box-shadow:0 1px 2px rgba(20,25,35,.05),0 8px 24px -16px rgba(20,25,35,.18)}
  html[data-theme="light"] header.hero{
    background:radial-gradient(1200px 500px at 15% -10%,rgba(217,82,26,.10),transparent 60%),
               radial-gradient(900px 420px at 88% 8%,rgba(27,107,158,.09),transparent 60%),var(--bg)}
  html[data-theme="light"] .kicker{border-color:rgba(217,82,26,.4)}
  html[data-theme="light"] code{background:rgba(20,25,35,.05)}
  html[data-theme="light"] .ro,html[data-theme="light"] #nodeinfo,
  html[data-theme="light"] .chart{background:#101620;border-color:#28313f}
  html[data-theme="light"] .ro .k{color:#8b95a6}
  html[data-theme="light"] .diagram{background:#101620;border-color:#28313f}
  html[data-theme="light"] .diagram .legend{color:#8b95a6}
  html[data-theme="light"] #progress{box-shadow:0 0 10px rgba(217,82,26,.4)}

  /* ===== teema- ja navinupud ===== */
  #themebtn{position:fixed;top:14px;right:16px;z-index:60;width:40px;height:40px;border-radius:12px;
    background:var(--card);border:1px solid var(--line);color:var(--fg2);cursor:pointer;
    font-size:1.05rem;line-height:1;display:grid;place-items:center;transition:.18s}
  #themebtn:hover{color:var(--fg);border-color:var(--hot);transform:translateY(-1px)}
  #dotnav{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:55;
    display:flex;flex-direction:column;gap:13px}
  #dotnav a{display:block;width:9px;height:9px;border-radius:50%;background:var(--line);
    border:none;position:relative;transition:.2s}
  #dotnav a:hover{background:var(--fg3);transform:scale(1.25)}
  #dotnav a.on{background:var(--hot);box-shadow:0 0 0 4px rgba(255,122,69,.16)}
  #dotnav a span{position:absolute;right:20px;top:50%;transform:translateY(-50%) translateX(6px);
    white-space:nowrap;font-size:.76rem;color:var(--fg2);background:var(--card);
    border:1px solid var(--line);border-radius:7px;padding:3px 9px;opacity:0;pointer-events:none;transition:.18s}
  #dotnav a:hover span{opacity:1;transform:translateY(-50%)}
  @media (max-width:980px){#dotnav{display:none}}

  /* ===== kursori-valgusvihk ===== */
  .hero-inner{position:relative;z-index:2}
  #spot{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),rgba(255,122,69,.13),transparent 65%)}
  header.hero:hover #spot{opacity:1}
  #herocurve{position:absolute;left:0;right:0;bottom:0;width:100%;height:min(30vh,240px);
    opacity:.34;z-index:0;pointer-events:none}
  #herocap{position:absolute;right:24px;bottom:14px;z-index:1;font-family:var(--mono);
    font-size:.74rem;color:var(--fg3);letter-spacing:.04em;pointer-events:none}
  @media (max-width:820px){#herocap{display:none}}
  #herocurve path.line{fill:none;stroke:var(--hot);stroke-width:2.5;
    stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 2.6s .3s ease-out forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
  @media (prefers-reduced-motion:reduce){#herocurve path.line{animation:none;stroke-dashoffset:0}}
  @media (max-width:820px){#herocurve{display:none}}

  /* ===== kaardi valgusvihk ===== */
  .card{position:relative;overflow:hidden}
  .card:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
    background:radial-gradient(320px circle at var(--cx,50%) var(--cy,50%),rgba(255,122,69,.09),transparent 60%)}
  .card:hover:before{opacity:1}
  .card{transition:border-color .25s,transform .25s}
  .card:hover{border-color:#3a4658;transform:translateY(-2px)}
  html[data-theme="light"] .card:hover{border-color:#cfc8bd}

  /* ===== fookus ja ligipääs ===== */
  :focus-visible{outline:2px solid var(--hot);outline-offset:3px;border-radius:4px}
  .skip{position:absolute;left:-9999px;top:0;background:var(--card);color:var(--fg);
    padding:10px 16px;border:1px solid var(--hot);border-radius:0 0 10px 0;z-index:200}
  .skip:focus{left:0}

  /* ===== trükk ===== */
  @media print{
    #progress,#dotnav,#themebtn,#animtoggle,.tabs,#spot,#herocurve{display:none!important}
    body{background:#fff;color:#111;font-size:11pt}
    section{border:none;padding:18px 0;break-inside:avoid}
    .card,.ro,.chart,.diagram{background:#fff;border:1px solid #ccc;box-shadow:none;color:#111}
    .panel[hidden]{display:block!important}
    h1{font-size:24pt} h2{font-size:15pt} a{color:#111;border:none}
    .reveal{opacity:1!important;transform:none!important}
  }

  /* ===== kerimislugu ===== */
  .story{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:34px;align-items:start}
  .story-steps{display:flex;flex-direction:column;gap:0}
  .step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding:12px 0}
  .step h3{color:var(--fg3);transition:color .35s}
  .step p{color:var(--fg3);transition:color .35s;margin-bottom:0}
  .step.on h3{color:var(--fg)} .step.on p{color:var(--fg2)}
  .step .num{font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;color:var(--fg3);margin-bottom:8px}
  .step.on .num{color:var(--hot2)}
  .story-vis{position:sticky;top:12vh;height:76vh;display:flex;align-items:center}
  .vis-box{position:relative;width:100%;background:#0a0d12;border:1px solid var(--line);
    border-radius:16px;overflow:hidden;aspect-ratio:1/1.03}
  .vis-layer{position:absolute;inset:0;opacity:0;transition:opacity .5s;display:grid;place-items:center;padding:28px}
  .vis-layer.on{opacity:1}
  .vis-layer[data-l="f"]{padding:0}
  .vis-layer img{width:100%;height:100%;object-fit:cover;border-radius:0}
  .suspects{width:100%;display:flex;flex-direction:column;gap:12px}
  .susp{display:flex;align-items:center;gap:14px;padding:15px 18px;border-radius:12px;
    border:1px solid var(--line);background:var(--card);color:var(--fg3);transition:.35s;font-size:.95rem}
  .susp .ix{font-family:var(--mono);font-size:.8rem;opacity:.6}
  .susp.hot{border-color:rgba(255,122,69,.6);color:var(--fg);background:rgba(255,122,69,.08);
    transform:translateX(6px)}
  .susp.done{opacity:.45;text-decoration:line-through;text-decoration-color:rgba(251,191,36,.6)}
  .vis-cap{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;font-size:.84rem;
    background:linear-gradient(transparent,rgba(5,8,12,.94) 45%);color:var(--fg2)}
  @media (max-width:860px){
    .story{grid-template-columns:1fr;gap:18px}
    .story-vis{position:static;height:auto;margin-bottom:8px}
    .step{min-height:auto;padding:14px 0;border-bottom:1px solid var(--line)}
    .step h3,.step p{color:var(--fg)} .step p{color:var(--fg2)}
  }
  /* galerii */
  .gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:28px}
  figure{margin:0;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
  figure img{width:100%;display:block;aspect-ratio:3/4;object-fit:cover;cursor:zoom-in;transition:.4s}
  figure:hover img{transform:scale(1.03)}
  figcaption{padding:13px 16px;font-size:.86rem;color:var(--fg2);line-height:1.5}
  figcaption b{color:var(--fg)}
  #lightbox{position:fixed;inset:0;z-index:120;background:rgba(5,7,10,.94);display:none;
    place-items:center;padding:24px;cursor:zoom-out}
  #lightbox.on{display:grid}
  #lightbox img{max-width:min(96vw,1200px);max-height:92vh;border-radius:12px;object-fit:contain}
  #lightbox .x{position:absolute;top:18px;right:22px;color:#fff;font-size:1.6rem;background:none;border:none;cursor:pointer}

  /* ===== kordus ===== */
  .replay{background:#06090d;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:30px}
  .replay-bar{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line);
    background:rgba(255,255,255,.02)}
  .replay-bar .dots{display:flex;gap:6px}
  .replay-bar .dots i{width:10px;height:10px;border-radius:50%;display:block;background:#2b3442}
  .replay-title{font-family:var(--mono);font-size:.78rem;color:var(--fg3);letter-spacing:.05em}
  #replaybtn{margin-left:auto;font:600 .82rem var(--sans);color:var(--hot2);background:rgba(255,122,69,.12);
    border:1px solid rgba(255,122,69,.4);border-radius:8px;padding:6px 14px;cursor:pointer}
  #replaybtn:hover{background:rgba(255,122,69,.2)}
  .replay-body{padding:16px 18px;font-family:var(--mono);font-size:.84rem;line-height:1.85;
    min-height:280px;color:#cbd5e1}
  .rline{display:grid;grid-template-columns:62px 1fr;gap:14px;opacity:0;transform:translateY(6px);
    transition:opacity .35s,transform .35s}
  .rline.on{opacity:1;transform:none}
  .rline .tm{color:var(--fg3)}
  .rline .msg b{color:#fff;font-weight:600}
  .rline.hit .msg b{color:var(--hot2)}
  .rline.win .msg b{color:var(--ok)}
  .rline .out{color:var(--fg3)}
  .rcursor{display:inline-block;width:8px;height:1em;background:var(--hot);vertical-align:-2px;
    animation:blink 1s steps(2) infinite}
  @keyframes blink{50%{opacity:0}}
  @media (max-width:560px){.rline{grid-template-columns:52px 1fr;gap:9px} .replay-body{font-size:.76rem}}


          .box{fill:#151a23;stroke:#2b3442;stroke-width:1.5;rx:12}
          .box-p{fill:#1a1420;stroke:#ff7a45;stroke-opacity:.5}
          .box-c{fill:#111c26;stroke:#4ea8de;stroke-opacity:.5}
          .box-s{fill:#131820;stroke:#3a4658}
          .t{fill:#e8ecf2;font:600 14px sans-serif}
          .ts{fill:#8b95a6;font:400 11.5px ui-monospace,monospace}
          .tt{fill:#a6b0c0;font:400 12px sans-serif}
          .flow{stroke:#ff7a45;stroke-width:2.5;fill:none;marker-end:url(#ah)}
          .ret{stroke:#4ea8de;stroke-width:2.5;fill:none;marker-end:url(#ac)}
          .sig{stroke:#8b95a6;stroke-width:1.5;fill:none;marker-end:url(#ad)}
        
#langbtn{position:fixed;top:14px;right:64px;z-index:60;height:40px;padding:0 13px;border-radius:12px;
  background:var(--card);border:1px solid var(--line);color:var(--fg2);cursor:pointer;
  font:600 .82rem var(--sans);display:grid;place-items:center;transition:.18s;letter-spacing:.06em}
#langbtn:hover{color:var(--fg);border-color:var(--hot);transform:translateY(-1px)}