/* Learn articles (/learn/<slug>/, 41 articles): the shared styles under every article's own
   article.css. Loaded only by those pages (main.learn); scoped under main.learn so nothing reaches the
   shared header, footer or mobile call bar. Built from the mockups' shared base and extra styles, limited
   to the classes the articles use. Animations use only transform, opacity, stroke-dashoffset and
   offset-distance. */
/* the site's own font files (as in main.css), declared here so the text does not rewrap when main.css arrives */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-v20-latin-variable.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:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url('/assets/fonts/jetbrains-mono-v24-latin-variable.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}
main.learn{display:block;background:#060910}
main.learn a{color:#4d9eff;text-decoration:none}
main.learn a:hover{color:#8bbcff}
main.learn *{box-sizing:border-box}
main.learn .wrap{max-width:1200px;margin:0 auto;padding:0 24px}
main.learn .m{font-family:'JetBrains Mono',monospace}
main.learn .sec{position:relative;padding:112px 0;overflow:hidden}
main.learn .alt{background:#070b14;border-top:1px solid rgba(120,170,255,.12);border-bottom:1px solid rgba(120,170,255,.12)}
main.learn .cnt{border:1px solid rgba(120,170,255,.35);padding:2px 7px;color:#e8edf5}
main.learn .h2{margin:0;font-size:clamp(34px,4.6vw,56px);font-weight:800;letter-spacing:-.035em;line-height:1.02}
main.learn .lead{margin:0;font-size:17px;line-height:1.65;color:#a3adbd}
main.learn .c{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px;background:rgba(9,14,24,.82);border:1px solid rgba(120,170,255,.14);border-radius:4px;color:#e8edf5;overflow:hidden;transition:transform .3s}
main.learn .c::before,main.learn .c::after{content:"";position:absolute;width:12px;height:12px;border-color:#f472b6;border-style:solid;opacity:.6;pointer-events:none}
main.learn .c::before{top:-1px;left:-1px;border-width:2px 0 0 2px}
main.learn .c::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0}
main.learn .n{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.18em;color:#7d92b3;text-transform:uppercase}
main.learn .t{margin:0;font-size:21px;font-weight:700;letter-spacing:-.015em;color:#e8edf5}
main.learn .p{margin:0;font-size:15px;line-height:1.6;color:#a3adbd}
main.learn .go{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#4d9eff}
main.learn .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:6px;font-weight:700;font-size:15px;transition:transform .2s}
main.learn .btn-p{background:#1d7bff;color:#fff;box-shadow:0 10px 30px -10px rgba(29,123,255,.7)}
main.learn .btn-p:hover{color:#fff;transform:translateY(-2px);box-shadow:0 16px 40px -10px rgba(29,123,255,.9)}
main.learn .btn-g{border:1px solid rgba(120,170,255,.3);color:#e8edf5;background:rgba(9,14,24,.6)}
main.learn .btn-g:hover{color:#fff;border-color:#4d9eff}
main.learn .pill{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;border:1px solid rgba(120,170,255,.22);border-radius:999px;font-size:13px;font-weight:600;color:#c9d2e0;background:rgba(5,8,16,.5)}
main.learn .pill i{width:6px;height:6px;border-radius:50%;background:#22c55e}
main.learn .dim{stroke:rgba(120,170,255,.35)}
main.learn .tog{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid rgba(120,170,255,.25);border-radius:5px;background:rgba(5,8,16,.6);color:#a9bddc;font:600 12px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
main.learn .tog:hover{border-color:#f472b6;color:#fff}
main.learn .tog.on{border-color:#f472b6;background:rgba(244,114,182,.14);color:#fff}
main.learn .tog.bad.on{border-color:#ff6b6b;background:rgba(255,107,107,.12);color:#ffb4b4}
main.learn .flow{stroke-dasharray:6 6;animation:flow 1.6s linear infinite}
main.learn .door .leaf{transform-box:view-box;transform-origin:234px 240px;transition:transform .7s cubic-bezier(.3,.7,.3,1)}
main.learn .door.open .leaf{transform:scaleX(.22)}
main.learn .door .gap{opacity:0;transition:opacity .5s}
main.learn .door.open .gap{opacity:1}
main.learn .door .card{transform-box:view-box;transform:translate(70px,60px);opacity:0;transition:transform .55s cubic-bezier(.3,.7,.3,1),opacity .3s}
main.learn .door .led{fill:#334155}
main.learn .door .strike{fill:rgba(244,114,182,.12);stroke:#f472b6}
main.learn .door.rel .strike{fill:#f472b6}
main.learn .door .ct{fill:#0b1324;stroke:#8bbcff}
main.learn .door.open .ct.b{transform:translateX(-8px)}
main.learn .door .alert{opacity:0;transition:opacity .25s}
main.learn .door .ring{transform-box:fill-box;transform-origin:center;animation:ring 1s ease-out infinite}
main.learn .door .pulse{stroke-dasharray:8 400;stroke-dashoffset:0;opacity:0}
main.learn .chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border:1px solid rgba(120,170,255,.2);border-radius:4px;background:transparent;color:#a9bddc;font:600 12.5px Inter,system-ui,sans-serif;cursor:pointer}
main.learn .chip:hover{border-color:#f472b6;color:#fff}
main.learn .chip.on{border-color:#f472b6;color:#fff;background:rgba(244,114,182,.1)}
main.learn .chip b{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:rgba(244,114,182,.18);color:#f9a8d4;font:700 10px 'JetBrains Mono',monospace}
main.learn .tap{animation:tap 3.2s ease-in-out infinite}
main.learn .cell{animation:cellon 4s infinite}
main.learn .scroll{animation:scroll 3s linear infinite}
main.learn .cred{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:120px;padding:16px 10px;border:1px solid rgba(120,170,255,.18);border-radius:6px;background:#070b14;color:#c9d2e0;font:700 15px Inter,system-ui,sans-serif;cursor:pointer}
main.learn .cred:hover{border-color:#f472b6;color:#fff}
main.learn .cred.on{border-color:#f472b6;background:rgba(244,114,182,.1);color:#fff;box-shadow:0 0 0 4px rgba(244,114,182,.1)}
main.learn .cred svg{width:64px;height:48px}
main.learn .row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:12px 0;border-top:1px dashed rgba(120,170,255,.16)}
main.learn .row .rk{font:600 11px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#7d92b3;padding-top:3px}
main.learn .row .rv{font-size:15.5px;line-height:1.55;color:#dfe6f2}
main.learn .meter{display:inline-grid;grid-template-columns:repeat(3,22px);gap:4px;vertical-align:middle;margin-right:10px}
main.learn .meter i{height:8px;border-radius:2px;background:rgba(120,170,255,.18)}
main.learn .meter i.on{background:#f5c46b}
main.learn .pw .mag{fill:#ff5a5a}
main.learn .pw .bat{opacity:.25;transition:opacity .3s}
main.learn .pw .bolt{opacity:1;transition:opacity .3s}
main.learn .pw .exit{opacity:0;transition:opacity .4s .2s}
main.learn .bad{background:rgba(255,107,107,.04);border-color:rgba(255,107,107,.22)}
main.learn .good{background:rgba(74,222,128,.04);border-color:rgba(74,222,128,.25)}
main.learn .mk{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:700 12px Inter,system-ui,sans-serif;flex:none}
main.learn .pt{display:flex;flex-direction:column;gap:8px;min-height:186px}
main.learn .pt svg{width:100%;height:66px}
main.learn .ans{margin:0 0 26px;max-width:720px;font-size:15.5px}
@media (max-width:760px){main.learn .row{grid-template-columns:minmax(0,1fr);gap:4px}}
@media (max-width:760px){main.learn .sec{padding:76px 0}}
main.learn .pk{stroke:#f472b6}
main.learn .pk{stroke:#f472b6}
main.learn .stage{transition:opacity .45s}
main.learn .stage.off{opacity:0}
main.learn .who{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:64px;padding:12px 14px;border:1px solid rgba(120,170,255,.18);border-radius:6px;background:#070b14;color:#c9d2e0;font:700 15px Inter,system-ui,sans-serif;text-align:left;cursor:pointer}
main.learn .who small{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.08em;color:#7d92b3;text-transform:uppercase}
main.learn .who:hover{border-color:#f472b6;color:#fff}
main.learn .who.on{border-color:#f472b6;background:rgba(244,114,182,.1);color:#fff;box-shadow:0 0 0 4px rgba(244,114,182,.08)}
main.learn .step{display:flex;flex-direction:column;gap:10px;padding:24px;border-top:2px solid rgba(244,114,182,.5);background:rgba(9,14,24,.6)}
main.learn .role{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border:1px solid rgba(120,170,255,.22);border-radius:5px;background:rgba(5,8,16,.6);color:#a9bddc;font:600 13px Inter,system-ui,sans-serif;cursor:pointer}
main.learn .role:hover{border-color:#f472b6;color:#fff}
main.learn .role.on{border-color:#f472b6;background:rgba(244,114,182,.14);color:#fff}
main.learn .role.bad.on{border-color:#ff6b6b;background:rgba(255,107,107,.12);color:#ffb4b4}
main.learn .role i{width:8px;height:8px;border-radius:50%}
main.learn .day{position:relative;height:46px;border:1px solid rgba(120,170,255,.16);border-radius:4px;overflow:hidden;display:flex}
main.learn .day span{height:100%}
main.learn .st{display:inline-flex;align-items:center;gap:8px;min-height:28px;padding:0 10px;border-radius:3px;font:700 11px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
main.learn .walk{animation:walk 3.4s ease-in-out infinite alternate}
main.learn .scan{animation:scan 2.6s linear infinite}
@keyframes cellon{0%,10%{opacity:.15}20%,100%{opacity:1}}
@keyframes flow{to{stroke-dashoffset:-48}}
@keyframes ring{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.2);opacity:0}}
@keyframes scan{0%{transform:translateY(0)}100%{transform:translateY(250px)}}
@keyframes scroll{0%{transform:translateY(0)}100%{transform:translateY(-36px)}}
@keyframes tap{0%,15%{transform:translateX(-30px);opacity:0}35%,65%{transform:none;opacity:1}85%,100%{transform:none;opacity:0}}
@keyframes walk{0%{transform:translateX(-40px)}100%{transform:translateX(40px)}}
main.learn [class$="-crumb"] a{text-decoration:underline;text-underline-offset:.18em}
/* the site's menu is fixed (72 px): the article starts below it, with the breadcrumb 16 px under the menu
   as on the service pages (the mockups sat under a placeholder header that took up space) */
main.learn{padding-top:var(--nav-h,72px)}
main.learn>header{margin-top:16px}
main.learn :is(p,li,dd,td,figcaption,blockquote) a:not([class]){text-decoration:underline;text-underline-offset:.18em}
main.learn .btn-p{background:#0060df}
main.learn .btn-p:hover{background:#0050c0}