:root{
  --bg:#0a0e13; --bg2:#0e141b; --panel:#121a23; --panel2:#17212c; --line:#1f2b38; --line2:#2b3a4a;
  --tx:#dfe7ef; --mut:#8494a5; --dim:#5b6a7a;
  --c:#45b8ff; --c2:#1f7fc4; --g:#3ddc97; --o:#ffb86b; --p:#c792ea; --r:#ff6b6b;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--bg);color:var(--tx);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,a{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-decoration:none}
input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--c);outline-offset:3px}
.wrap{max-width:1220px;margin:0 auto;padding:0 24px;position:relative}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}
em{font-style:normal;color:var(--c)}
.cur{display:inline-block;width:.55em;height:.95em;background:var(--c);vertical-align:-.08em;margin-left:.08em;animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* клавиши вместо кнопок */
.key{display:inline-flex;align-items:center;gap:12px;padding:12px 18px 11px;font-family:var(--mono);font-weight:700;font-size:14px;background:var(--tx);color:var(--bg);border:1px solid #9fb0c2;border-bottom:5px solid #8a9bad;border-radius:7px;transition:transform .08s,border-bottom-width .08s}
.key:hover{background:#fff}
.key:active{transform:translateY(3px);border-bottom-width:2px}
.key kbd{font-family:var(--mono);font-size:11.5px;font-weight:700;padding:1px 6px;border:1px solid currentColor;border-radius:4px;opacity:.55}
.key.c{background:var(--c);border-color:#7fd0ff;border-bottom-color:var(--c2);color:#04121d}
.key.c:hover{background:#6bc8ff}
.key.sm{padding:7px 12px 6px;font-size:12.5px;border-bottom-width:4px}
.key[disabled]{opacity:.45;pointer-events:none}
.tl{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--mut);display:inline-flex;gap:8px;align-items:center}
.tl:hover{color:var(--c)}
.tl::before{content:"$";color:var(--g)}

/* полоса и шапка */
.strip{background:var(--bg2);border-bottom:1px solid var(--line);color:var(--mut);font-family:var(--mono);font-size:12px;text-align:center;padding:8px 16px}
.strip b{color:var(--o);font-weight:500}
.hdr{position:sticky;top:0;z-index:30;background:rgba(10,14,19,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top{display:flex;align-items:center;gap:34px;height:66px}
.wm{font-family:var(--mono);font-weight:800;font-size:21px;letter-spacing:-.02em;display:flex;align-items:center}
.wm::before{content:">";color:var(--c);margin-right:8px}
.nav{display:flex;gap:26px;margin-left:auto;font-family:var(--mono);font-size:13.5px;color:var(--mut)}
.nav a::before{content:"./";color:var(--dim)}
.nav a:hover{color:var(--tx)}
.hr{display:flex;align-items:center;gap:18px}
.lang{display:flex;font-family:var(--mono);font-size:12.5px;border:1px solid var(--line2);border-radius:6px;overflow:hidden}
.lang button{padding:4px 10px;color:var(--mut)}
.lang button[aria-pressed="true"]{background:var(--panel2);color:var(--c)}

/* первый экран */
.ov{font-family:var(--mono);font-size:13px;color:var(--dim)}
.ov b{color:var(--g);font-weight:500}
.stage{display:grid;grid-template-columns:1.12fr .88fr;grid-template-areas:"intro phone" "ops phone";column-gap:64px;padding:54px 0 90px;background-image:radial-gradient(rgba(69,184,255,.13) 1px,transparent 1px);background-size:26px 26px;background-position:-13px -13px}
.intro{grid-area:intro}
.ops{grid-area:ops;margin-top:44px}
h1{font-family:var(--mono);font-weight:800;font-size:clamp(34px,4.6vw,62px);line-height:1.06;letter-spacing:-.05em;margin:18px 0 22px}
.lead{font-size:18px;color:#b6c3d0;max-width:540px;margin-bottom:30px}
.acts{display:flex;flex-wrap:wrap;gap:24px;align-items:center}

/* панели: журнал и расписание */
.pane{border:1px solid var(--line2);border-radius:10px;background:var(--bg2);overflow:hidden}
.pane+.pane{margin-top:20px}
.ph{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--mut);background:var(--panel)}
.ph b{color:var(--tx);font-weight:500}
.ph .live{margin-left:auto;display:flex;align-items:center;gap:7px;color:var(--g)}
.ph .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--g);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.25}}
.log{height:224px;overflow-y:auto;padding:10px 14px;font-family:var(--mono);font-size:12.5px;line-height:1.7;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.lr{display:grid;grid-template-columns:62px 18px 150px 1fr;gap:6px;white-space:nowrap;animation:fadein .3s var(--ease)}
@keyframes fadein{from{opacity:0;transform:translateX(-6px)}}
.lr .ts{color:var(--dim)}
.lr .ev{color:var(--tx)}
.lr .dt{color:var(--mut);overflow:hidden;text-overflow:ellipsis}
.lr .dt q{color:var(--o);quotes:'"' '"'}
.lr.in .ar{color:var(--c)}.lr.out .ar{color:var(--p)}.lr.ok .ar{color:var(--g)}.lr.err .ar{color:var(--r)}.lr.sys .ar{color:var(--dim)}
.lr.ok .ev{color:var(--g)}.lr.err .ev{color:var(--r)}
.log .hint{color:var(--dim)}
.board{display:grid;grid-template-columns:58px repeat(5,1fr)}
.board>div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:36px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11.5px;text-align:center;padding:3px;line-height:1.2}
.board>div:nth-child(6n){border-right:0}
.board .th{color:var(--mut);background:var(--panel);min-height:32px}
.board .tm{color:var(--dim)}
.board .busy{background:repeating-linear-gradient(45deg,#18222d 0 4px,var(--bg2) 4px 8px)}
.board .new{background:var(--c);color:#04121d;font-weight:700;animation:pop .5s var(--ease)}
.board .ok{background:var(--g);color:#03170e;font-weight:700}
@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.08)}}
.legend{display:flex;flex-wrap:wrap;gap:16px;padding:9px 14px;font-family:var(--mono);font-size:11.5px;color:var(--mut);border-top:1px solid var(--line)}
.legend i{display:inline-block;width:11px;height:11px;vertical-align:-1px;margin-right:6px;border-radius:2px}
.slip{margin-top:20px;border:1px solid var(--line2);border-left:3px solid var(--c);border-radius:10px;background:var(--panel);padding:16px 18px;font-family:var(--mono);font-size:12.5px;animation:pop .45s var(--ease)}
.slip.ok{border-left-color:var(--g)}
.slip .sh{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.slip b{font-family:var(--sans);font-size:15px;font-weight:800;color:var(--tx)}
.slip .st{font-size:11px;padding:2px 8px;border-radius:4px;background:rgba(69,184,255,.14);color:var(--c)}
.slip.ok .st{background:rgba(61,220,151,.14);color:var(--g)}
.slip dl{display:grid;grid-template-columns:auto 1fr;gap:3px 14px}
.slip dt{color:var(--p)}.slip dt::after{content:":"}
.slip dd{color:var(--o)}
.slip .row{display:flex;gap:16px;align-items:center;margin-top:14px}
.slip .tl[disabled]{opacity:.35;pointer-events:none}
.slip-empty{margin-top:20px;border:1px dashed var(--line2);border-radius:10px;padding:14px 16px;font-family:var(--mono);font-size:12.5px;color:var(--dim)}
.slip-empty::before{content:"// ";color:var(--dim)}

/* телефон в рамке «инспектора» */
.phonecol{grid-area:phone;align-self:start;position:sticky;top:92px}
.phonewrap{position:relative;width:100%;max-width:378px;margin:22px auto 0}
.sel{position:absolute;inset:-14px;border:1px dashed var(--c);border-radius:4px;pointer-events:none}
.sel i{position:absolute;width:9px;height:9px;background:var(--bg);border:1.5px solid var(--c)}
.sel i:nth-child(1){left:-5px;top:-5px}.sel i:nth-child(2){right:-5px;top:-5px}.sel i:nth-child(3){left:-5px;bottom:-5px}.sel i:nth-child(4){right:-5px;bottom:-5px}
.dim{position:absolute;left:-14px;top:-40px;font-family:var(--mono);font-size:11.5px;background:var(--c);color:#04121d;padding:2px 8px;border-radius:3px;font-weight:700}
.dim span{font-weight:400;opacity:.75}
.shell{background:#000;border:1px solid #2d3a48;border-radius:48px;padding:10px}
.screen{height:700px;border-radius:38px;overflow:hidden;display:flex;flex-direction:column;background:#0f1620;position:relative}
.notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:104px;height:28px;background:#000;border-radius:999px;z-index:5}
.status{display:flex;justify-content:space-between;align-items:center;padding:14px 26px 8px;font-size:13px;font-weight:800;background:var(--panel)}
.status .ic{display:flex;gap:6px;align-items:center}
.status svg{height:11px;width:auto}
.chat-h{display:flex;align-items:center;gap:12px;padding:8px 16px 13px;background:var(--panel);border-bottom:1px solid var(--line)}
.ava{width:42px;height:42px;border-radius:50%;background:var(--c);color:#04121d;display:grid;place-items:center;font-family:var(--mono);font-weight:800;font-size:17px;flex:none}
.chat-h b{display:block;font-size:15.5px;line-height:1.2}
.chat-h small{font-family:var(--mono);font-size:11.5px;color:var(--g)}
.chat-h .rs{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--mut);border:1px solid var(--line2);border-radius:6px;padding:5px 9px}
.chat-h .rs:hover{color:var(--c);border-color:var(--c)}
.msgs{flex:1;overflow-y:auto;padding:14px 14px 10px;display:flex;flex-direction:column;gap:8px;scroll-behavior:smooth;background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);background-size:16px 16px}
.msgs::-webkit-scrollbar{width:0}
.day{align-self:center;font-family:var(--mono);font-size:11px;color:var(--mut);background:var(--panel2);padding:3px 10px;border-radius:999px;margin:2px 0 6px}
.m{max-width:86%;animation:rise .3s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
.m.bot{align-self:flex-start}
.m.me{align-self:flex-end}
.bub{padding:9px 13px 6px;font-size:14.5px;line-height:1.45;white-space:pre-line;border-radius:14px;background:#1a2532;border:1px solid #243243}
.bot .bub{border-bottom-left-radius:4px}
.me .bub{background:#1d5a86;border-color:#2a6c9c;border-bottom-right-radius:4px}
.bub time{display:block;text-align:right;font-family:var(--mono);font-size:10px;color:#8ea4b8;margin-top:2px}
.kb{display:grid;gap:6px;margin-top:7px}
.kb.c2{grid-template-columns:1fr 1fr}.kb.c3{grid-template-columns:repeat(3,1fr)}
.kb button{background:#142231;border:1px solid #2b4a66;border-bottom-width:3px;border-radius:8px;padding:9px 6px;font-size:13px;font-weight:700;color:#cfe9ff;transition:background .12s,transform .08s}
.kb button:hover{background:#1b2f44}
.kb button:active{transform:translateY(2px)}
.kb button.pick{background:var(--c);color:#04121d;border-color:var(--c2)}
.kb button[disabled]{opacity:.3;text-decoration:line-through;pointer-events:none}
.kb.lock{pointer-events:none}
.kb.lock button:not(.pick){opacity:.35}
.typing{align-self:flex-start;background:#1a2532;border:1px solid #243243;border-radius:14px;border-bottom-left-radius:4px;padding:12px 15px;display:flex;gap:5px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--mut);animation:dot 1s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{opacity:.25}30%{opacity:1}}
.inp{display:flex;gap:8px;padding:10px 12px 14px;background:var(--panel);border-top:1px solid var(--line)}
.inp input{flex:1;background:var(--bg2);border:1px solid var(--line2);border-radius:10px;padding:10px 14px;font-size:14.5px;outline:none}
.inp input:focus{border-color:var(--c)}
.inp button{width:44px;height:44px;background:var(--c);border-radius:10px;display:grid;place-items:center;flex:none;color:#04121d}
.inp button svg{width:19px;height:19px}
.home{height:5px;width:120px;border-radius:999px;background:var(--tx);margin:0 auto 7px;flex:none;opacity:.35}

/* разделы */
.sec{padding:110px 0;border-top:1px solid var(--line)}
.sec h2{font-family:var(--mono);font-weight:800;font-size:clamp(30px,4vw,52px);line-height:1.08;letter-spacing:-.05em;margin:14px 0 50px;max-width:820px}

/* сценарий как код */
.code2{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:start}
.flow{list-style:none;position:relative;padding-left:4px}
.flow::before{content:"";position:absolute;left:15px;top:18px;bottom:18px;width:1px;background:repeating-linear-gradient(180deg,var(--line2) 0 4px,transparent 4px 8px)}
.fn{position:relative;display:grid;grid-template-columns:24px 1fr;gap:16px;align-items:start;padding:10px 0}
.fn i{width:24px;height:24px;border-radius:50%;border:1px solid var(--line2);background:var(--bg);display:grid;place-items:center;z-index:1;font-style:normal;transition:all .3s}
.fn i::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--line2);transition:background .3s}
.fn code{font-family:var(--mono);font-size:14.5px;font-weight:700;color:var(--tx)}
.fn small{display:block;color:var(--mut);font-size:14px}
.fn.done i{border-color:var(--g)}.fn.done i::after{background:var(--g)}
.fn.now i{border-color:var(--c);box-shadow:0 0 0 5px rgba(69,184,255,.16)}.fn.now i::after{background:var(--c)}
.fn.now code{color:var(--c)}
.fhint{font-family:var(--mono);font-size:12.5px;color:var(--dim);margin-top:14px}
.editor{border:1px solid var(--line2);border-radius:10px;background:var(--bg2);overflow:hidden}
.tabs{display:flex;background:var(--panel);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12.5px}
.tabs span{padding:9px 16px;color:var(--mut);border-right:1px solid var(--line)}
.tabs span.on{color:var(--tx);background:var(--bg2);box-shadow:inset 0 2px 0 var(--c)}
pre{margin:0;padding:16px 0;font-family:var(--mono);font-size:13.5px;line-height:1.75;overflow-x:auto;counter-reset:ln}
pre .l{display:block;padding:0 18px 0 0;white-space:pre}
pre .l::before{counter-increment:ln;content:counter(ln);display:inline-block;width:42px;padding-right:16px;text-align:right;color:var(--dim)}
.k{color:var(--p)}.s{color:var(--o)}.n{color:var(--g)}.cm{color:var(--dim);font-style:italic}.pn{color:var(--mut)}

/* --help */
.term{border:1px solid var(--line2);border-radius:10px;background:#070a0e;overflow:hidden}
.term .ph{background:var(--panel)}
.tbody{padding:22px 24px 26px;font-family:var(--mono);font-size:14.5px;line-height:1.75}
.tbody .pr{color:var(--g)}.tbody .pr::before{content:"~/növbə $ ";color:var(--c)}
.tbody .us{color:var(--mut);margin:6px 0 14px}
.opt{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:7px 0;border-top:1px dashed #1a2430}
.opt code{color:var(--c);font-weight:700}
.opt span{color:#c3cfdb;font-family:var(--sans);font-size:15.5px;line-height:1.5}
.js .term.rv .opt{opacity:0}
.js .term.rv.in .opt{animation:optin .4s var(--ease) forwards}
@keyframes optin{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.term .end{margin-top:12px}

/* вопросы */
.faqw{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
.side2 p:not(.ov){color:#b6c3d0;font-size:17px;margin-top:-30px}
.faq{border-top:1px solid var(--line2)}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{list-style:none;cursor:pointer;font-weight:700;font-size:18px;display:grid;grid-template-columns:28px 1fr 20px;gap:8px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{font-family:var(--mono);color:var(--g)}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--c);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:8px 0 0 36px;color:#b6c3d0;font-size:16px;max-width:620px}
.faq p::before{content:"→ ";font-family:var(--mono);color:var(--dim)}

/* призыв */
.ctas{background:var(--c);color:#04121d;padding:96px 0}
.ctas .ov{color:#0b3a5c}
.ctas h2{font-family:var(--mono);font-weight:800;font-size:clamp(36px,5.6vw,84px);line-height:1.02;letter-spacing:-.06em;margin:14px 0 0;max-width:1000px}
.ctas h2 .cur{background:#04121d}
.ctas p{font-size:18px;margin:22px 0 32px;max-width:560px;color:#0b2c45}
.ctas .acts .tl{color:#04121d}.ctas .acts .tl::before{color:#0b3a5c}
.key.dk{background:#04121d;color:var(--c);border-color:#22384b;border-bottom-color:#000}
.key.dk:hover{background:#0b1d2c}

/* подвал */
.foot{padding:66px 0 0;overflow:hidden;border-top:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;padding-bottom:34px;border-bottom:1px solid var(--line);color:var(--mut)}
.fgrid h5{font-family:var(--mono);font-size:12px;color:var(--c);margin-bottom:14px;font-weight:500}
.fgrid h5::before{content:"// "}
.fgrid a{display:block;margin-bottom:9px;font-family:var(--mono);font-size:13.5px}
.fgrid a:hover{color:var(--tx)}
.fmeta{padding:20px 0;font-family:var(--mono);font-size:12px;color:var(--dim)}
.bigwm{font-family:var(--mono);font-weight:800;font-size:clamp(80px,18vw,270px);line-height:1;letter-spacing:-.07em;padding-bottom:22px;white-space:nowrap;color:var(--panel2)}
.bigwm .cur{background:var(--c);width:.42em;height:.09em;vertical-align:.02em}

@media(max-width:1060px){
  .nav{display:none}.hr{margin-left:auto}
  .stage{grid-template-columns:1fr;grid-template-areas:"intro" "phone" "ops";row-gap:56px}
  .ops{margin-top:0}
  .phonecol{position:relative;top:0}
  .code2,.faqw{grid-template-columns:1fr;gap:40px}
  .fgrid{grid-template-columns:1fr 1fr}.fgrid>div:first-child{grid-column:span 2}
}
@media(max-width:620px){
  .wrap{padding:0 16px}
  .hr .key{display:none}
  .screen{height:620px}
  .lr{grid-template-columns:54px 14px 1fr;font-size:11.5px}.lr .dt{grid-column:2/-1}
  .board{grid-template-columns:44px repeat(5,1fr)}.board>div{font-size:10px;min-height:32px}
  .opt{grid-template-columns:1fr;gap:2px}
  .sel,.dim{display:none}
  pre{font-size:12px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition-duration:.01s!important}.js .rv{opacity:1;transform:none}.js .term.rv .opt{opacity:1}}