/* Общие стили анимированных превью LDS (светлая тема приложения). Шрифты берутся из сайта: ../assets/fonts. Если их нет — подставятся системные. */ @font-face{font-family:'IBM Plex Sans';font-weight:100 700;font-display:swap;src:url(../assets/fonts/ibm-plex-sans-cyrillic-wght-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'IBM Plex Sans';font-weight:100 700;font-display:swap;src:url(../assets/fonts/ibm-plex-sans-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215} @font-face{font-family:'JetBrains Mono';font-weight:100 800;font-display:swap;src:url(../assets/fonts/jetbrains-mono-cyrillic-wght-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'JetBrains Mono';font-weight:100 800;font-display:swap;src:url(../assets/fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215} /* ---------------- Страница (палитра сайта) ---------------- */ :root{--green:#087a52;--ink:#111513;--muted:#737a76;--line:#dfe4e1;--bg:#f8faf9;--bg-soft:#eef2f0; --site-sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --site-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace} *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--site-sans);-webkit-font-smoothing:antialiased} .wrap{max-width:1232px;margin:0 auto;padding:36px 16px 72px} .back{font-size:14px;color:var(--muted);text-decoration:none} .back:hover{color:var(--green)} .eyebrow{margin-top:22px;font:600 12px/1 var(--site-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--green)} h1{font-size:clamp(28px,4vw,42px);line-height:1.1;letter-spacing:-.02em;margin:12px 0 10px} .lead{color:var(--muted);max-width:720px;margin:0} .demo{margin-top:30px} .vp{position:relative;width:100%;overflow:hidden;border-radius:14px;background:#eef0f3; box-shadow:0 0 0 1px rgba(8,20,15,.10),0 30px 60px -28px rgba(8,20,15,.35)} .under{display:flex;align-items:center;gap:16px;margin-top:18px} .cap{flex:1;min-height:26px;font-size:15px;transition:opacity .18s,transform .18s} .cap.out{opacity:0;transform:translateY(4px)} .pause{width:38px;height:38px;flex:none;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink)} .pause:hover{border-color:var(--green);color:var(--green)} .pause svg{width:14px;height:14px}.pause .i-play{display:none} .pause.is-paused .i-play{display:block}.pause.is-paused .i-pause{display:none} .steps{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px;margin-top:14px} .step{all:unset;cursor:pointer;display:block;padding:12px 0 0;border-top:2px solid var(--line);position:relative;color:var(--muted);transition:color .2s} .step::before{content:"";position:absolute;left:0;top:-2px;height:2px;width:calc(var(--f,0)*100%);background:var(--green)} .step b{display:block;font:600 11px var(--site-mono);letter-spacing:.06em} .step span{font-size:15px;font-weight:500;line-height:1.3} .step.is-on,.step:hover{color:var(--ink)} .step:focus-visible{outline:2px solid var(--green);outline-offset:4px} @media (max-width:640px){.step span{font-size:12.5px}.cap{font-size:14px}.steps{gap:8px}} /* ---------------- Приложение: светлая тема (токены из LDS css/main.css) ---------------- */ .stage{--bg-app:#eef0f3;--bg-panel:#fff;--bg-panel-alt:#f4f5f8;--bg-raised:#fff;--bg-rail:#12151d;--bg-rail-line:#232936; --border:#dfe2e8;--border-strong:#c7cbd4;--divider:#e0e3e8;--text:#10131a;--text-dim:#4c5566;--text-mute:#8890a0; --accent:#1f63d6;--accent-soft:rgba(31,99,214,.10);--accent-2:#0f8f82;--gate-and:#2f6fd1;--gate-or:#0f8f82; --warn:#b5720a;--danger:#c53a30;--ok:#0f8f6f;--shadow-pop:0 18px 44px rgba(20,25,40,.18); --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;--sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; position:absolute;left:0;top:0;width:1440px;height:860px;transform-origin:0 0;overflow:hidden; display:flex;flex-direction:column;background:var(--bg-app);color:var(--text);font:13px/1.35 var(--sans);user-select:none} .stage.is-paused *,.stage.is-paused *::before{animation-play-state:paused!important} .no-tr,.no-tr *{transition:none!important} .mono{font-family:var(--mono)}.dim{color:var(--text-mute)}.acc{color:var(--accent)}.acc2{color:var(--accent-2)} .off{display:none!important} svg.ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none} .winbar{height:32px;flex:none;display:flex;align-items:center;gap:8px;padding:0 14px;background:#e4e7ec;border-bottom:1px solid #d3d7de;position:relative} .winbar i{width:12px;height:12px;border-radius:50%} .winbar i:nth-child(1){background:#ec6a5e}.winbar i:nth-child(2){background:#f4bf4f}.winbar i:nth-child(3){background:#61c554} .winbar span{position:absolute;inset:0;display:grid;place-items:center;color:#7a828f;font-size:12px} .app{flex:1;display:flex;min-height:0} .rail{width:72px;flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 0;background:var(--bg-rail);border-right:1px solid var(--bg-rail-line)} .rail__logo{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:8px;background:#087a52;color:#fff;font:800 13px/1 var(--sans);letter-spacing:-1.3px} /* как логотип сайта (.logo, assets/logo.png) */ .rail__btn{width:60px;height:50px;border-radius:8px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#7a8396;transition:background .25s,color .25s} .rail__btn svg.ic{width:19px;height:19px} .rail__btn span{font-size:9.5px;font-weight:600;line-height:1.1} .rail__btn.is-active{background:rgba(79,139,255,.18);color:#7eaaff} .rail__btn.is-active::before{content:"";position:absolute;left:-6px;top:12px;bottom:12px;width:3px;border-radius:2px;background:#4f8bff} .rail__sep{width:36px;height:1px;margin:6px 0;background:var(--bg-rail-line)} .main{flex:1;min-width:0;display:flex;flex-direction:column} .topbar{height:48px;flex:none;display:flex;align-items:center;gap:12px;padding:0 14px;background:var(--bg-panel);border-bottom:1px solid var(--border)} .menubtn{display:flex;align-items:center;gap:7px;height:32px;padding:0 8px;border-radius:6px;font-weight:600;font-size:13.5px} .tsep{width:1px;height:22px;background:var(--border)} .crumbs{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:14px;color:var(--text-dim)} .crumbs b{color:var(--text);font-weight:600}.crumbs .sl{color:var(--text-mute)}.crumbs .mono{font-size:13px;color:var(--text)} .search{flex:0 1 420px;height:32px;margin-left:6px;display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid var(--border-strong);border-radius:6px;color:var(--text-mute);font-size:12.5px;white-space:nowrap;overflow:hidden;background:var(--bg-panel-alt)} .kbd{margin-left:auto;padding:1px 5px;border:1px solid var(--border-strong);border-radius:4px;font:11px var(--mono);background:#fff} .tb-act{margin-left:auto;display:flex;gap:6px} .ib{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--border-strong);border-radius:6px;color:var(--text-dim);background:#fff;transition:all .2s} .ib.off2{opacity:.4}.ib.sm{width:30px;height:30px} .ib.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)} .workspace{flex:1;min-height:0;display:flex} .left{width:250px;flex:none;overflow:hidden;background:var(--bg-panel);border-right:1px solid var(--border)} .views{flex:1;min-width:0;position:relative} .view{position:absolute;inset:0;display:flex;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s} .view.is-active{opacity:1;visibility:visible;transition:opacity .35s} .center{flex:1;min-width:0;display:flex;flex-direction:column;position:relative} .aside{width:300px;flex:none;padding:16px;background:var(--bg-panel);border-left:1px solid var(--border);position:relative;overflow:hidden} .aside--flush{padding:0} .sbar{height:26px;flex:none;display:flex;align-items:center;gap:12px;padding:0 14px;font-size:12px;color:var(--text-mute);background:var(--bg-panel);border-top:1px solid var(--border)} .sbar .ok{display:flex;align-items:center;gap:6px;color:var(--ok)} .sbar .ok svg.ic{width:14px;height:14px} .sbar .r{margin-left:auto;font-family:var(--mono)} /* ---------------- Проводник ---------------- */ .ex__proj{padding:12px 14px 10px;border-bottom:1px solid var(--border)} .ex__pname{display:block;font-weight:700;font-size:14px} .ex__psub{display:block;font-size:11.5px;color:var(--text-mute);margin-top:2px} .ex__sec{display:flex;align-items:center;gap:6px;padding:12px 14px 6px;font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--text-dim)} .ex__sec .cnt{margin-left:auto;font:10.5px var(--mono);color:var(--text-mute)} .ex__sec .chev{color:var(--text-mute);font-size:8px} .ex__it{position:relative;display:flex;align-items:center;gap:6px;height:28px;padding-right:10px;font-size:12.5px;color:#2b3240;white-space:nowrap;overflow:hidden;transition:background .25s,opacity .25s} .ex__it.l0{padding-left:14px}.ex__it.l1{padding-left:26px}.ex__it.l2{padding-left:44px} .ex__it .eid{font:10.5px var(--mono);color:var(--text-mute);flex:none} .ex__it .ev{margin-left:auto;font:10.5px var(--mono);color:var(--accent-2);flex:none;padding-left:6px} .ex__it .tx{overflow:hidden;text-overflow:ellipsis} .ex__it.is-active{background:var(--accent-soft);color:#0b1a33} .ex__it.is-active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent)} .ex__it.dragging{opacity:.45} .bdg{flex:none;width:16px;height:16px;border-radius:3px;display:grid;place-items:center;font:700 9px var(--mono)} .bdg--sys{background:rgba(155,79,209,.13);color:#8a43c2}.bdg--sub{background:rgba(15,143,130,.13);color:var(--accent-2)} .is-press{filter:brightness(.92)} /* ---------------- Общие элементы ---------------- */ .dtabs{height:40px;flex:none;display:flex;align-items:stretch;background:var(--bg-panel);border-bottom:1px solid var(--border)} .dtab{display:flex;align-items:center;gap:8px;padding:0 14px;max-width:290px;border-bottom:2px solid var(--accent);font-size:13px;white-space:nowrap} .dtab .mono{font-size:11.5px;color:var(--accent)}.dtab .x{color:var(--text-mute);margin-left:8px} .dtab .tx{overflow:hidden;text-overflow:ellipsis} .dadd{width:40px;display:grid;place-items:center;color:var(--text-mute);border-left:1px solid var(--border);border-right:1px solid var(--border);font-size:18px} .dhint{margin-left:auto;align-self:center;padding-right:16px;font-size:12px;color:var(--text-mute)} .sb__h{margin-bottom:8px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)} .sb__p{margin:0 0 10px;font-size:12.5px;color:var(--text-mute)} .sb__div{height:1px;margin:16px 0;background:var(--border)} .btn{height:36px;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--border-strong);border-radius:4px;background:#fff;font-size:13px;color:var(--text-dim)} .btn--pri{background:var(--accent);border-color:var(--accent);color:#fff} .tbtn{height:32px;display:inline-flex;align-items:center;gap:7px;padding:0 12px;border:1px solid var(--border-strong);border-radius:4px;background:#fff;font-size:12.5px;color:var(--text-dim);white-space:nowrap;transition:all .25s} .tbtn svg.ic{width:14px;height:14px} .tbtn.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)} .tbtn--b{color:var(--text);font-weight:600} .tbtn--pri{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600} .pill{padding:2px 8px;border-radius:10px;background:rgba(15,143,130,.12);color:var(--accent-2);font-size:11.5px;font-weight:600} .kind{display:flex;align-items:center;gap:8px;margin-bottom:4px;font-size:12px} .lbl{display:block;margin:10px 0 4px;font-size:11px;color:var(--text-mute)} .inp{height:32px;display:flex;align-items:center;gap:6px;padding:0 10px;overflow:hidden;white-space:nowrap;background:#fff;border:1px solid var(--border-strong);border-radius:4px;font-size:12.5px;transition:border-color .2s,box-shadow .2s} .inp.ro{background:var(--bg-panel-alt)} .inp.focus,td.focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,99,214,.18)} td.focus{box-shadow:inset 0 0 0 2px var(--accent)!important;background:#fff!important} .inp .chev{margin-left:auto;color:var(--text-mute)} .inp .ph{color:var(--text-mute)} .has .ph{display:none} .selx{background:rgba(31,99,214,.25)} .caret{display:none;width:1px;height:15px;margin-left:-4px;background:var(--text);animation:blink 1s steps(1) infinite;vertical-align:middle} .focus .caret{display:inline-block} @keyframes blink{50%{opacity:0}} .g2{display:grid;grid-template-columns:1fr 1fr;gap:10px} .cb{flex:none;display:inline-grid;place-items:center;width:15px;height:15px;border:1.5px solid var(--border-strong);border-radius:3px;background:#fff;color:#fff;transition:all .15s} .cb::after{content:"";width:7px;height:4px;margin-top:-2px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);opacity:0} .cb.on{background:var(--accent);border-color:var(--accent)} .cb.on::after{opacity:1} table{width:100%;border-collapse:collapse;table-layout:fixed} th{padding:10px 12px;text-align:left;vertical-align:top;font-size:12px;font-weight:600;line-height:1.3;color:var(--text-dim);background:var(--bg-panel-alt);border-bottom:1px solid var(--border);border-right:1px solid var(--border)} td{height:38px;padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#fff;border-bottom:1px solid #e7e9ee;border-right:1px solid #e7e9ee;transition:background .6s} tr{transition:opacity .35s} tr.hid{opacity:0} td.num,th.num{text-align:right} td.num{font-family:var(--mono)} .twrap{flex:1;min-height:0;overflow:hidden} /* Всплывающие меню и подсказки: живут прямо в сцене, позиция задаётся из JS */ .pop{position:absolute;z-index:45;min-width:200px;padding:5px;background:var(--bg-raised);border:1px solid var(--border-strong);border-radius:6px;box-shadow:var(--shadow-pop);opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .2s,transform .2s} .pop.show{opacity:1;transform:none} .pop__t{padding:6px 10px 4px;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-mute)} .mi{display:flex;align-items:center;gap:10px;min-height:32px;padding:0 10px;border-radius:4px;font-size:12.5px;color:var(--text);white-space:nowrap} .mi small{margin-left:auto;padding-left:14px;color:var(--text-mute);font-family:var(--mono)} .mi.hov,.mi.is-press{background:var(--accent-soft);filter:none} .mi .mono{font-size:11px;color:var(--accent)} .msep{height:1px;margin:4px 6px;background:var(--border)} /* Подсветки изменений */ .calc{animation:flC .9s ease-out} .chg{animation:flW 1.5s ease-out} @keyframes flC{0%{box-shadow:0 0 0 0 rgba(15,143,130,0)}25%{box-shadow:0 0 0 4px rgba(15,143,130,.35)}100%{box-shadow:0 0 0 0 rgba(15,143,130,0)}} @keyframes flW{0%{box-shadow:0 0 0 0 rgba(181,114,10,0)}20%{box-shadow:0 0 0 4px rgba(214,140,20,.45)}100%{box-shadow:0 0 0 0 rgba(181,114,10,0)}} td.cellflash{animation:cellf 1.6s ease-out} @keyframes cellf{0%,35%{background:#ffefc7}} tr.newrow td{animation:newrow 2s ease-out} @keyframes newrow{0%,40%{background:#dff3ef}} /* ---------------- Оверлеи сцены ---------------- */ .cursor{position:absolute;left:0;top:0;z-index:60;width:22px;height:22px;pointer-events:none;transition-property:transform;transition-timing-function:cubic-bezier(.45,.05,.25,1);transform:translate(1180px,760px)} .cursor svg{position:absolute;left:-3px;top:-2px;width:22px;height:26px;transition:transform .12s;transform-origin:3px 2px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))} .cursor.is-down svg{transform:scale(.84)} .ghost{position:absolute;left:16px;top:20px;display:flex;align-items:center;gap:8px;padding:7px 12px;white-space:nowrap;background:#fff;border:1px solid var(--accent);border-radius:5px;box-shadow:0 10px 24px rgba(20,25,40,.2);font-size:12.5px;opacity:0;transform:scale(.9);transition:opacity .2s,transform .2s} .ghost.show{opacity:.96;transform:none} .ghost .mono{font-size:11px} .rip{position:absolute;z-index:59;width:34px;height:34px;margin:-17px 0 0 -17px;border:2px solid rgba(31,99,214,.7);border-radius:50%;pointer-events:none;animation:rip .55s ease-out forwards} @keyframes rip{from{transform:scale(.3);opacity:1}to{transform:scale(1.25);opacity:0}} .key{position:absolute;z-index:61;padding:4px 9px;border-radius:5px;background:#10131a;color:#fff;font:600 11px var(--mono);box-shadow:0 2px 0 #4c5566;opacity:0;pointer-events:none} .key.show{animation:key .9s ease-out} @keyframes key{0%{opacity:0;transform:translateY(4px)}15%,70%{opacity:1;transform:none}100%{opacity:0}} .toast{position:absolute;right:20px;bottom:42px;z-index:55;display:flex;align-items:center;gap:12px;max-width:520px;padding:12px 16px 12px 12px;background:#fff;border:1px solid var(--border-strong);border-left:3px solid var(--ok);border-radius:8px;box-shadow:var(--shadow-pop);opacity:0;transform:translateY(12px);transition:opacity .35s,transform .35s} .toast.show{opacity:1;transform:none} .toast .ti{width:34px;height:34px;flex:none;border-radius:6px;display:grid;place-items:center;background:rgba(15,143,111,.12);color:var(--ok);font-weight:700} .toast .ti.doc{height:40px;background:#2b5cb8;color:#fff;font:700 15px var(--sans)} .toast b{display:block;font-size:13px}.toast span{font-size:12px;color:var(--text-dim)} .reduced .cursor{display:none} /* ---------------- Встраивание на страницы сайта (