@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url('./assets/ibm-plex-sans-cyrillic-1.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-style: normal; font-weight: 100 700; font-display: swap;
  src: url('./assets/ibm-plex-sans-latin-2.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;
}
:root { --paper:#f7f8fb; --ink:#18202d; --blue:#3158ed; --mint:#8ce0c2; --line:#dce1e9; --mono:Consolas,'Courier New',monospace; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; font:16px/1.55 'IBM Plex Sans',Arial,sans-serif; color:var(--ink); background:var(--paper); }
a { color:inherit; text-decoration:none; }
button, input, select { font:inherit; }
button, select { cursor:pointer; }
code { font-family:var(--mono); }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid #466dff; outline-offset:4px; }
.frame { width:min(1200px,calc(100% - 96px)); margin-inline:auto; }
.masthead { border-bottom:1px solid var(--line); }
.masthead-inner { min-height:88px; }
.masthead-inner,.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand { display:inline-flex; }
.brand img { width:166px; height:auto; }
.main-link { display:flex; align-items:center; gap:9px; font-weight:500; font-size:14px; }
.main-link:hover { color:var(--blue); }
.main-link span { font-size:22px; color:var(--blue); }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:clamp(42px,6vw,100px); padding-block:clamp(68px,11vh,126px) 84px; flex:1; }
.intro { padding-block:3px; }
.network { display:flex; align-items:center; gap:10px; color:var(--blue); font:600 12px/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.slash { color:#8995b2; }
.network-symbol { display:grid; place-items:center; width:24px; height:24px; border:1px solid #bdc9ff; border-radius:5px; line-height:1; font-size:14px; }
h1 { font-weight:500; font-size:clamp(52px,5.7vw,84px); line-height:1.02; letter-spacing:-.059em; margin:24px 0 21px; }
h1 span { color:var(--blue); }
.lead { margin:0; max-width:420px; font-size:18px; line-height:1.6; color:#515d6f; }
.access { border-top:1px solid var(--line); margin:33px 0 0; padding:16px 0 0; max-width:450px; font-size:14px; }
.access div { display:flex; align-items:baseline; gap:18px; padding:4px 0; }
.access dt { flex:0 0 120px; color:#596478; }
.access dd { margin:0; }
.access code { font-size:13px; }
.terminal { border:1px solid #25344a; border-radius:10px; background:#151e2b; color:#e8ecf3; box-shadow:0 22px 50px -18px #101c4240; overflow:hidden; }
.terminal-bar { display:flex; align-items:center; justify-content:space-between; height:44px; padding:0 19px; background:#1f2939; border-bottom:1px solid #354052; font:12px var(--mono); color:#bbc6d5; }
.terminal-bar b { font-weight:normal; color:#91a1b7; }
.lights { display:flex; gap:5px; }
.lights i { width:7px; height:7px; border-radius:50%; background:#f68b7d; }
.lights i:nth-child(2) { background:#f1c878; }
.lights i:last-child { background:#8fd6b5; }
.terminal-body { padding:clamp(23px,3vw,40px); }
form label { display:block; font-weight:500; margin-bottom:9px; }
form label small { font:12px var(--mono); color:#a5b2c6; margin-left:6px; }
.prompt-line,select { background:#101926; border:1px solid #435169; border-radius:5px; color:#f3f6fb; }
.prompt-line { height:58px; display:flex; align-items:center; gap:12px; padding-inline:14px; }
.prompt-line:focus-within { border-color:var(--mint); outline:1px solid var(--mint); }
.prompt-line:has([aria-invalid="true"]) { border-color:#ffaaa1; }
.prompt-line>span { color:var(--mint); }
#mac { width:100%; min-width:0; border:none; background:transparent; color:inherit; padding:10px 0; font:clamp(16px,1.7vw,23px) var(--mono); letter-spacing:.025em; outline:none; }
#mac::placeholder { color:#8593a9; }
.hint { font-size:13px; color:#aab7ca; margin:9px 0 24px; }
select { width:100%; padding:12px; color-scheme:dark; }
.run { display:flex; align-items:center; justify-content:space-between; background:var(--mint); border:0; border-radius:5px; color:#152e29; font-weight:600; margin-top:24px; width:100%; padding:12px 16px; }
.run:hover { background:#a1ecd1; }
.run span { font:21px var(--mono); }
#error { color:#ffc3b9; font-size:14px; }
#results { border-top:1px solid #374458; margin-top:25px; padding-top:20px; }
.result-heading { display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap; }
.result-heading h2 { margin:0; font-size:22px; font-weight:500; }
#result-mac { font:12px var(--mono); color:#aab7ca; }
.variant { margin-top:19px; }
.variant h3 { margin:0 0 6px; font-size:13px; font-weight:500; color:var(--mint); }
.password-row { display:flex; justify-content:space-between; align-items:center; gap:8px; border-bottom:1px solid #303c4d; padding:5px 0; font-size:13px; }
.password-row>span { color:#c1cbd9; }
.password-row button { display:inline-flex; align-items:center; gap:9px; border:0; border-radius:3px; color:#f0f4fa; background:#202d3e; padding:7px 9px; font:14px var(--mono); }
.password-row button:hover { background:#30435b; }
.password-row button span { font:15px Arial,sans-serif; color:var(--mint); }
.output-hint { margin:12px 0 0; }
#notice { margin:9px 0 0; color:var(--mint); font-size:13px; }
#notice:empty { display:none; }
footer { border-top:1px solid var(--line); color:#5e6a7d; font-size:13px; }
.footer-inner { min-height:66px; }
@media (max-width:850px) {
  .frame { width:min(630px,calc(100% - 40px)); }
  .workspace { grid-template-columns:1fr; gap:32px; padding-block:40px 50px; }
  .masthead-inner { min-height:70px; }
  .brand img { width:138px; }
  .access { margin-top:23px; }
}
@media (max-width:480px) {
  .frame { width:calc(100% - 32px); }
  .main-link { font-size:12px; }
  h1 { font-size:clamp(44px,12vw,57px); margin-block:18px; }
  .lead { font-size:16px; }
  .access div { gap:10px; }
  .access dt { flex-basis:106px; }
  .terminal-body { padding:20px 16px; }
  .footer-inner { flex-wrap:wrap; justify-content:flex-start; gap:2px 16px; padding-block:14px; }
}