/* Интерактивы занятия 2 «Локи выходит на охоту». Только токены темы сайта (../../../assets/style.css). */

.trainer{position:relative;}
.trainer .z-intro{font-size:.92rem; margin:0 0 .8rem;}
.z-row{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .8rem; margin:.6rem 0;}
.z-row label{font-size:.85rem; color:var(--text-dim); display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; max-width:100%; min-width:0;}
.z-row input[type=range]{width:min(15rem, 100%); min-width:0; accent-color:var(--signal);}
.z-btn{
  font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.8rem;
  background:var(--tile); color:var(--text); border:1px solid var(--line);
  padding:.4rem .8rem; cursor:pointer;
}
.z-btn:hover{border-color:var(--signal);}
.z-btn:focus-visible, .z-chip:focus-visible{outline:2px solid var(--signal); outline-offset:1px;}
.z-btn[aria-pressed="true"], .z-btn.on{border-color:var(--signal); background:color-mix(in srgb, var(--signal) 14%, var(--tile));}
.z-btn:disabled{opacity:.45; cursor:default;}
.z-chip{
  font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.74rem;
  display:inline-flex; align-items:center; gap:.4rem;
  background:transparent; color:var(--text); border:1px solid var(--line);
  padding:.25rem .6rem; cursor:pointer;
}
.z-chip[aria-pressed="false"]{opacity:.45;}
.z-chip i{width:.7rem; height:.7rem; display:inline-block; border-radius:50%;}
.z-mono{font-family:Consolas,"SF Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums;}
.z-dim{color:var(--text-dim);}
.z-note{font-size:.8rem; color:var(--text-dim); margin:.5rem 0 0;}

/* категориальная палитра (проверена валидатором: фиолетовый, оранжевый, синий, розовый) */
.trainer, .z-fig{--c-openai:var(--nn); --c-anthropic:var(--signal); --c-google:var(--par); --c-other:var(--gd); --c-research:var(--text-dim);}
.dot-openai{fill:var(--c-openai);} .dot-anthropic{fill:var(--c-anthropic);}
.dot-google{fill:var(--c-google);} .dot-other{fill:var(--c-other);}
.dot-research{fill:var(--paper-2); stroke:var(--c-research); stroke-width:2;}
.bg-openai{background:var(--c-openai);} .bg-anthropic{background:var(--c-anthropic);}
.bg-google{background:var(--c-google);} .bg-other{background:var(--c-other);}
.bg-research{background:transparent; border:2px solid var(--c-research); box-sizing:border-box;}

/* общие элементы графиков */
.z-chart{width:100%; overflow-x:auto;}
.z-chart svg{display:block; width:100%; height:auto; min-width:520px; font-family:Consolas,"SF Mono",ui-monospace,monospace;}
.z-chart .ax{stroke:var(--text-dim); stroke-width:1;}
.z-chart .gr{stroke:var(--line); stroke-width:1;}
.z-chart .tk{fill:var(--text-dim); font-size:11px;}
.z-chart .lbl{fill:var(--text); font-size:11px;}
.z-chart .lbl-dim{fill:var(--text-dim); font-size:10.5px;}
.z-chart .hit{fill:transparent; cursor:pointer;}
.z-chart .sel{stroke:var(--text); stroke-width:2;}
.z-chart .band{fill:color-mix(in srgb, var(--text-dim) 12%, transparent);}
.z-chart .trend{stroke:var(--text); stroke-width:2; fill:none;}
.z-chart .trend-2{stroke:var(--text-dim); stroke-width:2; stroke-dasharray:6 4; fill:none;}
.z-chart .model-line{stroke:var(--signal); stroke-width:2; fill:none;}
.z-chart .cursor{stroke:var(--signal-ink); stroke-width:1.5; stroke-dasharray:3 3;}
.z-chart .ref{stroke:var(--line); stroke-width:1; stroke-dasharray:2 3;}
.z-chart .whisk{stroke:var(--text-dim); stroke-width:1.2;}

.z-tip{
  position:absolute; pointer-events:none; z-index:5; max-width:18rem;
  background:var(--paper); color:var(--text); border:1px solid var(--text-dim);
  padding:.35rem .55rem; font-size:.78rem; line-height:1.35;
  box-shadow:0 2px 8px color-mix(in srgb, var(--text) 18%, transparent);
}
.z-tip b{font-weight:600;}
.z-tip[hidden]{display:none;}

.z-legend{display:flex; flex-wrap:wrap; gap:.4rem .9rem; font-size:.78rem; color:var(--text-dim); margin:.4rem 0;}
.z-legend span{display:inline-flex; align-items:center; gap:.35rem;}
.z-legend i{width:.7rem; height:.7rem; border-radius:50%; display:inline-block;}

.z-readout{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(12rem, 1fr)); gap:.5rem; margin:.7rem 0;
}
.z-readout > div{border:1px solid var(--line); background:var(--tile); padding:.5rem .7rem;}
.z-readout .k{display:block; font-size:.72rem; color:var(--text-dim); font-family:Consolas,"SF Mono",ui-monospace,monospace; text-transform:uppercase; letter-spacing:.05em;}
.z-readout .v{display:block; font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:1.15rem; font-variant-numeric:tabular-nums;}
.z-readout .s{display:block; font-size:.78rem; color:var(--text-dim);}

details.z-table{margin:.6rem 0 0; font-size:.82rem;}
details.z-table summary{cursor:pointer; color:var(--text-dim); font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.76rem;}
details.z-table .wrap{max-height:18rem; overflow:auto; margin-top:.4rem;}
details.z-table table{border-collapse:collapse; width:100%;}
details.z-table th, details.z-table td{border-bottom:1px solid var(--line); padding:.2rem .5rem; text-align:left;}
details.z-table td.n{text-align:right; font-family:Consolas,"SF Mono",ui-monospace,monospace;}

/* Хронологические ленты (иллюстрации) */
.tl-fig{position:relative;}
.tl-fig .tl-lead{stroke-width:1.2;}
.tl-fig .lead-openai{stroke:var(--c-openai);} .tl-fig .lead-anthropic{stroke:var(--c-anthropic);}
.tl-fig .lead-google{stroke:var(--c-google);} .tl-fig .lead-other{stroke:var(--c-other);}
.tl-fig .lead-research{stroke:var(--c-research); stroke-dasharray:3 3;}
.tl-fig .tl-box rect{stroke-width:1.8;}
.tl-fig .box-openai rect{fill:color-mix(in srgb, var(--c-openai) 12%, var(--paper)); stroke:var(--c-openai);}
.tl-fig .box-anthropic rect{fill:color-mix(in srgb, var(--c-anthropic) 13%, var(--paper)); stroke:var(--c-anthropic);}
.tl-fig .box-google rect{fill:color-mix(in srgb, var(--c-google) 12%, var(--paper)); stroke:var(--c-google);}
.tl-fig .box-other rect{fill:color-mix(in srgb, var(--c-other) 11%, var(--paper)); stroke:var(--c-other);}
.tl-fig .box-research rect{fill:var(--paper); stroke:var(--c-research); stroke-dasharray:4 3;}
.tl-fig .tl-box:hover rect, .tl-fig .tl-box:focus rect{stroke-width:3;}
.tl-fig .tl-date{fill:var(--text-dim); font-size:11px; font-weight:700;}
.tl-fig .tl-name{fill:var(--text); font-size:12px; font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif; font-weight:600;}
.tl-fig .tl-who{fill:var(--text-dim); font-size:10.5px;}
.z-fig{position:relative;}
.z-fig .z-chart svg{min-width:640px;}
.z-fig figcaption{text-align:left; max-width:60rem; margin-left:auto; margin-right:auto;}

/* Закон в рамке с восклицательным знаком */
.law-box{
  display:flex; gap:1rem; align-items:center; margin:1.2rem 0; padding:.9rem 1.1rem;
  border:2px solid var(--signal); background:color-mix(in srgb, var(--signal) 9%, var(--paper));
}
.law-box .law-mark{
  flex:0 0 2.6rem; height:2.6rem; border-radius:50%; background:var(--signal); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-family:Rockwell,"Roboto Slab",Georgia,serif; font-size:1.7rem; font-weight:700; line-height:1;
}
.law-box .ln{
  display:block; font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.08em; color:var(--signal-ink); margin-bottom:.2rem;
}
.law-box .lt{font-family:Rockwell,"Roboto Slab",Georgia,serif; font-size:1.12rem; line-height:1.4;}

/* 4. Опыт Маркова */
.mk-text{
  border:1px solid var(--line); background:var(--paper); padding:.6rem .8rem; min-height:7.5em;
  font-family:Georgia,"Times New Roman",serif; font-size:1rem; line-height:1.55; white-space:pre-wrap;
}
.mk-text .v{color:var(--nn); font-weight:700;}
.mk-text .c{color:var(--signal-ink);}
.mk-text .cur{outline:2px solid var(--text); outline-offset:1px;}
.mk-text .todo{color:var(--text-dim); opacity:.55;}
.mk-cmp{width:100%; border-collapse:collapse; font-size:.86rem; margin:.6rem 0;}
.mk-cmp th, .mk-cmp td{border:1px solid var(--line); padding:.3rem .55rem; text-align:right; font-family:Consolas,"SF Mono",ui-monospace,monospace;}
.mk-cmp th:first-child, .mk-cmp td:first-child{text-align:left; font-family:inherit;}
.mk-cmp th{color:var(--text-dim); font-weight:400; font-size:.76rem;}
.mk-ok{color:var(--good);} .mk-no{color:var(--bad);}
.mk-gen{
  border:1px solid var(--line); background:var(--paper); padding:.6rem .8rem; min-height:6em;
  font-family:Georgia,"Times New Roman",serif; font-size:1.02rem; line-height:1.5; white-space:pre-wrap; word-break:break-word;
}
.mk-gen .ctx{color:var(--text-dim);}
.mk-gen .new{color:var(--text); background:color-mix(in srgb, var(--signal) 16%, transparent);}
.mk-gen .caret{display:inline-block; width:.5em; border-bottom:2px solid var(--signal);}
.mk-bars{display:grid; grid-template-columns:2.4rem 1fr 3.4rem; gap:.2rem .5rem; align-items:center; font-size:.8rem; margin:.6rem 0; max-width:30rem;}
.mk-bars .ch{font-family:Consolas,"SF Mono",ui-monospace,monospace; text-align:center; border:1px solid var(--line); background:var(--tile);}
.mk-bars .bar{height:.8rem; background:var(--nn); border-radius:0 4px 4px 0; min-width:2px;}
.mk-bars .bar.pick{background:var(--signal);}
.mk-bars .p{font-family:Consolas,"SF Mono",ui-monospace,monospace; text-align:right; color:var(--text-dim);}
.mk-split{display:grid; grid-template-columns:1fr; gap:1rem;}
.mk-part-title{font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); margin:1rem 0 .3rem;}

/* 5, 9. Схемы с бегущим маркером */
.z-flow svg{display:block; width:100%; height:auto; font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif;}
.z-flow .node rect{fill:var(--tile); stroke:var(--line); stroke-width:1.5;}
.z-flow .node.llm rect{stroke:var(--nn);}
.z-flow .node.human rect{stroke:var(--signal);}
.z-flow .node.env rect{stroke:var(--rl); stroke-dasharray:4 3;}
.z-flow .node.io rect{fill:var(--paper); stroke:var(--text-dim);}
.z-flow .node text{fill:var(--text); font-size:13px;}
.z-flow .node .sub{fill:var(--text-dim); font-size:11px;}
.z-flow .node.hot rect{fill:color-mix(in srgb, var(--signal) 22%, var(--tile)); stroke:var(--signal); stroke-width:2.5;}
.z-flow .node.done rect{fill:color-mix(in srgb, var(--signal) 8%, var(--tile));}
.z-flow .edge{stroke:var(--text-dim); stroke-width:1.5; fill:none;}
.z-flow .edge.dash{stroke-dasharray:5 4;}
.z-flow .edge.hot{stroke:var(--signal); stroke-width:2.5;}
.z-flow .elbl{fill:var(--text-dim); font-size:11px; font-family:Consolas,"SF Mono",ui-monospace,monospace;}
.z-flow .token{fill:var(--signal); stroke:var(--paper); stroke-width:2;}
.z-flow .dim{opacity:.35;}
.z-desc{font-size:.9rem; margin-top:.5rem;}
.z-desc b{font-weight:600;}
.z-log{font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.76rem; color:var(--text-dim); min-height:1.2em;}

/* 6. LoRA */
.lora-fig svg{display:block; width:100%; height:auto; max-height:320px; font-family:Consolas,"SF Mono",ui-monospace,monospace;}
.lora-fig .mx{fill:color-mix(in srgb, var(--nn) 22%, var(--tile)); stroke:var(--nn); stroke-width:1.5;}
.lora-fig .mu{fill:color-mix(in srgb, var(--signal) 30%, var(--tile)); stroke:var(--signal); stroke-width:1.5;}
.lora-fig .mv{fill:color-mix(in srgb, var(--par) 26%, var(--tile)); stroke:var(--par); stroke-width:1.5;}
.lora-fig text{fill:var(--text); font-size:13px;}
.lora-fig .op{fill:var(--text-dim); font-size:22px;}

/* 7. С рассуждением и без */
.cot-box{border:1px solid var(--line); background:var(--paper); padding:.6rem .8rem; font-size:.92rem; margin:.4rem 0;}
.cot-box .role{display:block; font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.7rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.2rem;}
.cot-box .added{background:color-mix(in srgb, var(--signal) 20%, transparent);}
.cot-box .demo{color:var(--text-dim);}
.cot-step{display:block; margin:.15rem 0;}
@media (prefers-reduced-motion: no-preference){
  .cot-step.hide{opacity:0; transform:translateY(.3rem);}
  .cot-step{transition:opacity .45s ease, transform .45s ease;}
}
.cot-verdict{font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.85rem; margin-top:.3rem;}

/* 8. Партия с наградой в конце */
.gr-group{display:grid; grid-template-columns:repeat(auto-fill, minmax(15.5rem, 1fr)); gap:.4rem; margin:.6rem 0;}
.gr-att{border:1px solid var(--line); background:var(--paper); padding:.4rem .55rem; font-size:.8rem; line-height:1.35;}
.gr-att .hd{display:flex; justify-content:space-between; gap:.5rem; font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.7rem; color:var(--text-dim);}
.gr-att .len{height:4px; background:var(--nn); margin:.3rem 0; border-radius:0 4px 4px 0;}
.gr-att .res{font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.76rem;}
.gr-att.ok{border-left:3px solid var(--good);} .gr-att.bad{border-left:3px solid var(--bad);}
.gr-att .adv.pos{color:var(--good);} .gr-att .adv.neg{color:var(--bad);}
@media (prefers-reduced-motion: no-preference){
  .gr-att{animation:grIn .35s ease both;}
  @keyframes grIn{from{opacity:0; transform:translateY(.3rem);} to{opacity:1; transform:none;}}
}
.gr-pol{display:grid; grid-template-columns:11rem 1fr 3.4rem; gap:.25rem .6rem; align-items:center; font-size:.82rem; max-width:34rem;}
.gr-pol .bar{height:.8rem; border-radius:0 4px 4px 0; min-width:2px; transition:width .4s ease;}
.gr-pol .p{font-family:Consolas,"SF Mono",ui-monospace,monospace; text-align:right;}

/* 10. Три двигателя */
.dr-fig svg{display:block; width:100%; height:auto; font-family:Consolas,"SF Mono",ui-monospace,monospace;}
.dr-fig .s1{fill:var(--nn);} .dr-fig .s2{fill:var(--par);}
.dr-fig .s3{fill:url(#dr-hatch); stroke:var(--signal); stroke-width:1.5;}
.dr-fig .rng{stroke:var(--text); stroke-width:1.5;}
.dr-fig text{fill:var(--text); font-size:12px;}
.dr-fig .tk{fill:var(--text-dim); font-size:11px;}

/* 9. Схемы агентов: вкладки */
.ag-tabs{display:flex; flex-wrap:wrap; gap:.35rem;}
.ag-meta{display:grid; grid-template-columns:repeat(auto-fit, minmax(14rem, 1fr)); gap:.6rem; margin-top:.6rem; font-size:.88rem;}
.ag-meta > div{border:1px solid var(--line); background:var(--tile); padding:.5rem .7rem;}
.ag-meta .k{display:block; font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); margin-bottom:.2rem;}

@media (max-width:640px){
  .gr-pol{grid-template-columns:8rem 1fr 3rem;}
}