:root {
  --bg: #0e0e12;
  --panel: #16161c;
  --panel2: #1d1d25;
  --line: #2a2a35;
  --text: #ecebf0;
  --muted: #9a98a6;
  --lime: #c8ff3d;
  --pink: #ff4fa3;
  --link: #9fd0ff;
  --code: #1f1f29;
  --display: "Unbounded", system-ui, sans-serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-text-size-adjust: 100%; }
a { color: var(--link); }
button, input, textarea { font: inherit; color: inherit; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 14px;
  background: var(--lime); color: #111; font-family: var(--display); font-weight: 700; font-size: 15px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .12s ease, filter .12s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--line); }
.btn.small { min-height: 38px; padding: 0 14px; font-size: 13px; border-radius: 11px; }

.spin {
  width: 46px; height: 46px; border-radius: 50%;
  border: 5px solid rgba(255,255,255,.18); border-top-color: #fff;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- читалка */
body.reader { height: 100dvh; overflow: hidden; }
.split { display: flex; flex-direction: column; height: 100dvh; }
.rot { position: relative; flex: none; height: 42dvh; background: #000; overflow: hidden; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.rot-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pane { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--panel); }
@media (min-width: 760px) and (min-aspect-ratio: 1/1) {
  .split { flex-direction: row; }
  .rot { height: 100dvh; width: min(44vw, 56.25dvh); }
}

.snd {
  position: absolute; z-index: 3; top: 10px; left: 10px; width: 40px; height: 40px;
  border: 0; border-radius: 12px; background: rgba(10,10,16,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center; cursor: pointer;
}
.snd svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.snd .spk { fill: #fff; }
.snd .wave { display: none; }
.snd.on .wave { display: inline; }
.snd.on .x { display: none; }

.buf {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(0,0,0,.55); backdrop-filter: grayscale(.8) blur(1.5px); -webkit-backdrop-filter: grayscale(.8) blur(1.5px);
  pointer-events: none;
}
.buf[hidden] { display: none; }
.buf-hint {
  font-family: var(--display); font-weight: 700; font-size: clamp(13px, 3.6vw, 17px); text-align: center; padding: 0 20px;
  color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.buf.idle .buf-hint::after { content: " ↓"; display: inline-block; animation: nudge 1s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(5px); } }

.topbar {
  flex: none; display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 16px;
  border-bottom: 1px solid var(--line); background: var(--panel); font-size: 13px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.bar { position: relative; flex: 1; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; transition: width .3s linear; }
.bar .seen { width: calc(var(--seen, 0) * 100%); background: rgba(200,255,61,.25); }
.bar .got { width: calc(var(--got, 0) * 100%); background: var(--lime); }
.pct { color: var(--text); font-weight: 700; min-width: 3.2em; text-align: right; }
.left { min-width: 3.5em; text-align: right; }

.doc { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; outline: none; -webkit-overflow-scrolling: touch; }
.art {
  max-width: 44rem; margin: 0 auto; padding: 22px 18px 0;
  font-size: 17.5px; line-height: 1.62; color: #e6e4ea; overflow-wrap: break-word;
}
.art .doc-head { margin-bottom: 18px; }
.art .doc-title { margin: 0 0 6px; }
.art .doc-src { font-size: 13px; color: var(--muted); text-decoration: none; }
.art .doc-src:hover { color: var(--link); }
.art h1, .art h2, .art h3, .art h4 { line-height: 1.25; margin: 1.6em 0 .55em; color: #fff; }
.art h1 { font-family: var(--display); font-size: 1.6em; font-weight: 700; margin-top: .4em; letter-spacing: -0.01em; }
.art h2 { font-size: 1.35em; }
.art h3 { font-size: 1.15em; }
.art h4 { font-size: 1em; }
.art p { margin: 0 0 1em; }
.art p.dt { font-weight: 700; margin-bottom: .2em; }
.art blockquote { margin: 0 0 1em; padding: .2em 0 .2em 1em; border-left: 3px solid var(--pink); color: #cfcdd8; }
.art .li { display: flex; gap: .6em; margin: 0 0 .45em; padding-left: calc(var(--d, 0) * 1.4em + .2em); }
.art .li-m { flex: none; min-width: 1.1em; color: var(--lime); font-weight: 700; font-variant-numeric: tabular-nums; }
.art .li-t { min-width: 0; }
.art code { font-family: var(--mono); font-size: .86em; background: var(--code); padding: .12em .35em; border-radius: 5px; }
.art pre { margin: 0 0 1.1em; padding: 14px 16px; background: var(--code); border-radius: 12px; overflow-x: auto; font-size: 14px; line-height: 1.5; }
.art pre code { background: none; padding: 0; font-size: inherit; white-space: pre; }
.art figure { margin: 0 0 1.1em; }
.art img { max-width: 100%; height: auto; border-radius: 10px; background: #fff1; display: block; }
.art .tbl { margin: 0 0 1.1em; overflow-x: auto; }
.art table { border-collapse: collapse; font-size: 14.5px; line-height: 1.4; }
.art th, .art td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; }
.art th { background: var(--panel2); }

.end { max-width: 44rem; margin: 10px auto 0; padding: 26px 18px 34vh; text-align: center; }
.end[hidden] { display: block; visibility: hidden; }
.end-big { font-family: var(--display); font-weight: 900; font-size: clamp(36px, 9vw, 56px); color: var(--lime); }
.end-time { font-size: 18px; margin: 6px 0 2px; }
.end-note { color: var(--muted); margin: 0 0 18px; }
.end-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

.gate {
  position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center;
  background: rgba(22,22,28,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 20px 16px;
  overflow-y: auto;
}
.gate[hidden] { display: none; }
.gate-in { width: 100%; max-width: 30rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.gate-title { font-family: var(--display); font-size: clamp(20px, 5.4vw, 28px); line-height: 1.2; margin: 0 0 8px; font-weight: 700; overflow-wrap: anywhere; }
.gate-meta { color: var(--muted); margin: 0 0 18px; font-variant-numeric: tabular-nums; }
.gate-form { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.gate-form input {
  min-height: 48px; padding: 0 16px; border-radius: 14px; border: 2px solid var(--line); background: var(--panel2); outline: none; font-size: 16px;
}
.gate-form input:focus { border-color: var(--lime); }
.gate-note { color: var(--muted); font-size: 14px; line-height: 1.45; margin: 14px 0 0; }

.back { position: absolute; z-index: 4; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.back[hidden] { display: none; }
.back:active { transform: translateX(-50%) scale(.97); }

/* ---------------------------------------------------------------- главная */
.home { max-width: 1080px; margin: 0 auto; padding: 22px 16px 60px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 900; font-size: 20px; text-decoration: none; color: var(--text); }
.brand img { width: 30px; height: 30px; }
.hero { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; margin-top: 26px; }
@media (min-width: 860px) { .hero { grid-template-columns: 1.3fr .7fr; gap: 48px; margin-top: 48px; } }
.hero h1 { font-family: var(--display); font-weight: 900; font-size: clamp(30px, 6.4vw, 56px); line-height: 1.06; margin: 0 0 16px; letter-spacing: -0.02em; }
.hero h1 em { font-style: normal; color: var(--lime); }
.hero h1 b { color: var(--pink); }
.hero .sub { font-size: 17.5px; line-height: 1.55; color: #cfcdd8; margin: 0 0 24px; max-width: 36em; }

.make { display: flex; flex-direction: column; gap: 10px; }
.make .row { display: flex; gap: 10px; }
.make input, .make textarea {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 16px; border-radius: 14px; border: 2px solid var(--line); background: var(--panel); outline: none; font-size: 16px;
}
.make textarea { padding: 14px 16px; min-height: 160px; resize: vertical; line-height: 1.45; }
.make input:focus, .make textarea:focus { border-color: var(--lime); }
.make .alt { align-self: flex-start; background: none; border: 0; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 4px 0; font-size: 14px; }
.make .err { color: #ff7a7a; font-size: 14.5px; margin: 0; min-height: 1.2em; }
@media (max-width: 520px) { .make .row { flex-direction: column; } }

.result { margin-top: 18px; padding: 18px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; }
.result[hidden] { display: none; }
.linkbox label { display: block; font-size: 13.5px; color: var(--muted); margin-bottom: 6px; }
.linkbox .row { display: flex; gap: 8px; flex-wrap: wrap; }
.linkbox output { flex: 1 1 220px; min-width: 0; display: flex; align-items: center; min-height: 38px; padding: 0 12px; border-radius: 11px; background: var(--panel2); font-family: var(--mono); font-size: 13.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.result .note { color: var(--muted); font-size: 13.5px; margin: 0; line-height: 1.45; }

.phone {
  position: relative; justify-self: center; width: min(100%, 340px); aspect-ratio: 9 / 16.5; border-radius: 38px; padding: 10px;
  background: #050507; box-shadow: 0 0 0 2px #2a2a35, 0 30px 80px rgba(200,255,61,.08);
}
.phone .scr { position: relative; height: 100%; border-radius: 30px; overflow: hidden; display: flex; flex-direction: column; background: var(--panel); }
.phone .rot { height: 48%; cursor: pointer; }
.phone .txt { flex: 1; padding: 14px 16px; font-size: 12.5px; line-height: 1.55; color: #d6d4de; overflow: hidden; position: relative; }
.phone .txt h3 { font-size: 14px; margin: 0 0 6px; color: #fff; }
.phone .txt p { margin: 0 0 8px; }
.phone .txt::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40px; background: linear-gradient(transparent, var(--panel)); }
.phone .mini-bar { height: 4px; background: var(--line); }
.phone .mini-bar i { display: block; height: 100%; width: 38%; background: var(--lime); }

.how { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 56px; }
@media (min-width: 760px) { .how { grid-template-columns: repeat(3, 1fr); } }
.how div { padding: 18px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.how b { display: block; font-family: var(--display); font-size: 16px; margin-bottom: 6px; }
.how b span { color: var(--lime); margin-right: 8px; }
.how p { margin: 0; color: #cfcdd8; line-height: 1.5; }

.mine { margin-top: 40px; }
.mine[hidden] { display: none; }
.mine h2, .stats h2 { font-family: var(--display); font-size: 18px; margin: 0 0 12px; }
.mine ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mine li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.mine li .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mine li .when { color: var(--muted); font-size: 13px; }
footer.foot { margin-top: 60px; color: var(--muted); font-size: 13px; }
footer.foot a { color: var(--muted); }

/* ---------------------------------------------------------------- статистика */
.stats { max-width: 760px; margin: 0 auto; padding: 22px 16px 60px; }
.stats h1 { font-family: var(--display); font-size: clamp(20px, 5vw, 28px); line-height: 1.2; margin: 26px 0 6px; overflow-wrap: anywhere; }
.stats .src { color: var(--muted); font-size: 14px; }
.stats .share { margin: 20px 0 28px; }
.readers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.readers li { padding: 14px 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.readers .top { display: flex; align-items: baseline; gap: 10px; }
.readers .who { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.readers .who.anon { color: var(--muted); font-weight: 400; }
.readers .p { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; }
.readers .p.done { color: var(--lime); }
.readers .bar { margin: 10px 0 8px; }
.readers .meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.empty { color: var(--muted); }