/* DevHrytsenkoNet — shared styles ("repository README" look). Light by default, dark via [data-theme="dark"]. */
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
:root{
  --bg:#f6f8fa; --card:#ffffff; --line:#d0d7de; --text:#1f2328; --muted:#59636e; --link:#0969da;
  --green:#1a7f37; --red:#cf222e; --yellow:#bf8700; --codebg:#f0f3f6;
  --cur:#ddf4ff; --stripe:#fafbfc; --ok-bg:#dafbe1; --ok-bd:#4ac26b; --wip-bg:#fff8c5; --wip-bd:#d4a72c;
  --top:#f8fafd; --top-line:#e3e8ef; --pill-on-bg:#d3e3fd; --pill-on-fg:#0b57d0; --badge-l:#555;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --grid:rgba(26,127,55,.16); --glow:rgba(26,127,55,.14);
  --a0:#ebedf0; --a1:#9be9a8; --a2:#40c463; --a3:#30a14e; --a4:#216e39;
  color-scheme: light;
}
:root[data-theme="dark"]{
  --bg:#0d1117; --card:#161b22; --line:#30363d; --text:#e6edf3; --muted:#8d96a0; --link:#4493f8;
  --green:#3fb950; --red:#f85149; --yellow:#d29922; --codebg:#1c2128;
  --cur:rgba(56,139,253,.18); --stripe:#12171e; --ok-bg:rgba(46,160,67,.15); --ok-bd:#238636; --wip-bg:rgba(187,128,9,.15); --wip-bd:#9e6a03;
  --top:#0d1117; --top-line:#21262d; --pill-on-bg:rgba(56,139,253,.25); --pill-on-fg:#a8c7fa; --badge-l:#30363d;
  --grid:rgba(63,185,80,.13); --glow:rgba(63,185,80,.18);
  --a0:#161b22; --a1:#0e4429; --a2:#006d32; --a3:#26a641; --a4:#39d353;
  color-scheme: dark;
}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html{ scrollbar-width:none; -ms-overflow-style:none; }            /* hide the page scrollbar (scrolling still works) */
html::-webkit-scrollbar{ display:none; width:0; height:0; }
body{ font-family:var(--sans); font-size:15px; line-height:1.6; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; }
a{ color:var(--link); text-decoration:none; } a:hover{ text-decoration:underline; }
img{ display:block; max-width:100%; } button{ font:inherit; color:inherit; }

/* top bar: light, borderless, pill buttons (Play Console style) */
.topbar{ background:var(--top); color:var(--text); min-height:64px; padding:10px clamp(14px,3vw,28px); display:flex; align-items:center; justify-content:space-between; gap:8px 12px; flex-wrap:wrap; }
.topbar a{ color:var(--text); } .topbar a:hover{ text-decoration:none; }
.brand{ display:flex; align-items:center; gap:12px; font-size:20px; font-weight:500; letter-spacing:-.01em; }
.crumb{ color:var(--link); font-weight:400; }
.tools{ display:flex; align-items:center; gap:10px; }
.lang-switch{ display:flex; gap:6px; }
.lang-pill, .theme-btn{ appearance:none; cursor:pointer; background:transparent; color:var(--link); border:1px solid var(--muted); border-radius:999px; height:36px; font-size:14px; font-weight:500; line-height:1; transition:background .15s, border-color .15s; }
.lang-pill{ padding:0 16px; }
.theme-btn{ width:36px; font-size:16px; }
.lang-pill:hover, .theme-btn:hover{ background:var(--pill-on-bg); border-color:var(--pill-on-fg); }
.lang-pill.active{ background:var(--pill-on-bg); color:var(--pill-on-fg); border-color:var(--pill-on-bg); }

/* layout */
.layout{ max-width:1180px; margin:24px auto; padding:0 clamp(14px,3vw,28px); display:grid; grid-template-columns:240px 1fr; gap:24px; align-items:start; }
.layout > *{ min-width:0; }
.side{ position:sticky; top:16px; }
.side > :first-child{ margin-top:0; }
.box{ background:var(--card); border:1px solid var(--line); border-radius:8px; }
.contact .h{ padding:8px 10px; font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.about{ margin-top:16px; padding:16px; font-size:13.5px; }
.about img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; border:1px solid var(--line); margin-bottom:12px; }
.about .nm{ font-weight:700; font-size:16px; }
.about .un{ color:var(--muted); }
.contact{ margin-top:16px; padding:8px; }
.clink{ display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:8px; color:var(--text); }
.clink:hover{ background:var(--codebg); text-decoration:none; }
.clink svg{ flex:none; border-radius:6px; }
.clink .ct{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.clink small{ color:var(--muted); font-size:12px; }
.clink i{ font-style:normal; color:var(--muted); }

/* document */
.doc{ overflow:hidden; min-width:0; }
.doc-head{ display:flex; align-items:center; gap:10px; padding:10px 16px; background:var(--bg); border-bottom:1px solid var(--line); font-size:13px; color:var(--muted); font-family:var(--mono); }
.md{ padding:clamp(18px,3vw,36px); max-width:860px; }
.md h1, .md .headline{ font-size:clamp(24px,3.2vw,32px); line-height:1.2; padding-bottom:10px; border-bottom:1px solid var(--line); margin:0 0 18px; letter-spacing:-.02em; font-weight:700; }
.md h2{ font-size:21px; padding-bottom:8px; border-bottom:1px solid var(--line); margin:34px 0 14px; }
.md h3{ font-size:17px; margin:26px 0 8px; }
.md h4{ font-size:14.5px; margin:16px 0 6px; }
.md p{ margin-bottom:12px; }
.md ul, .md ol{ padding-left:24px; margin-bottom:14px; }
.md li{ margin-bottom:4px; }
.md blockquote{ border-left:4px solid var(--line); padding:2px 16px; color:var(--muted); margin:0 0 14px; }
.badges{ display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 20px; }
.badge{ display:inline-flex; font-size:12px; font-weight:600; border-radius:4px; overflow:hidden; line-height:1; }
.badge span{ padding:5px 8px; background:var(--badge-l); color:#fff; }
.badge b{ padding:5px 8px; color:#fff; background:var(--c, #0969da); }
code, pre{ font-family:var(--mono); font-size:13px; background:var(--codebg); border-radius:6px; }
code{ padding:2px 6px; }
table{ border-collapse:collapse; width:100%; margin-bottom:14px; font-size:14px; display:block; overflow:auto; }
th, td{ border:1px solid var(--line); padding:8px 13px; text-align:left; }
th{ background:var(--bg); font-weight:600; } tr:nth-child(even) td{ background:var(--stripe); }
.st{ font-size:12px; font-weight:600; padding:2px 8px; border-radius:999px; border:1px solid; white-space:nowrap; }
.st.ok{ color:var(--green); border-color:var(--ok-bd); background:var(--ok-bg); }
.st.wip{ color:var(--yellow); border-color:var(--wip-bd); background:var(--wip-bg); }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:6px; background:var(--green); color:#fff; font-weight:600; border:1px solid rgba(0,0,0,.1); }
.btn:hover{ filter:brightness(1.08); text-decoration:none; }
.cta-row{ margin:18px 0; }

/* components used by app / legal pages */
.section-tag{ display:inline-block; font-size:12px; font-weight:600; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:1px 10px; margin-bottom:12px; }
.byline{ color:var(--muted); font-size:13.5px; margin:-8px 0 18px; }
.content-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(18px,3vw,36px); align-items:start; }
.fact-box, .bug-box{ border:1px solid var(--line); border-radius:8px; padding:12px 16px; background:var(--bg); margin-bottom:14px; }
.fact-box-title{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:6px; }
.fact-row{ display:flex; justify-content:space-between; gap:14px; padding:7px 0; border-bottom:1px solid var(--line); font-size:14px; }
.fact-row:last-of-type{ border-bottom:0; }
.fact-row .k{ color:var(--muted); } .fact-row .v{ font-weight:600; text-align:right; }
.notice{ margin-top:10px; padding:10px 12px; border:1px solid var(--wip-bd); background:var(--wip-bg); border-radius:6px; font-size:13.5px; }
.stats-row{ display:flex; gap:12px; margin-bottom:14px; }
.stat-tile{ flex:1; border:1px solid var(--line); border-radius:8px; padding:12px; text-align:center; background:var(--bg); }
.stat-value{ font-size:28px; font-weight:800; line-height:1.1; }
.stat-label{ font-size:12px; color:var(--muted); }
.feature-list{ list-style:none; padding-left:0 !important; }
.feature-list li{ display:flex; gap:12px; padding:6px 0; border-bottom:1px solid var(--line); }
.feature-list li:last-child{ border-bottom:0; }
.feature-list .num{ flex:none; width:34px; font-family:var(--mono); color:var(--muted); }
.quote{ border-left:4px solid var(--line); padding:4px 16px; color:var(--muted); margin-bottom:12px; }
.trivia-box{ border:1px dashed var(--line); border-radius:8px; padding:12px 16px; margin:18px 0; }
.trivia-label{ font-weight:700; margin-right:6px; }
.last-updated{ display:block; color:var(--muted); font-size:13px; margin:0 0 16px; }
.doc-intro{ margin-bottom:8px; }
.doc-intro .fact-box{ max-width:520px; margin-top:6px; }
.policy .lang-block[hidden]{ display:none; }
.policy .intro{ color:var(--muted); }

.site-foot{ max-width:1180px; margin:0 auto 32px; padding:14px clamp(14px,3vw,28px) 0; font-size:12.5px; color:var(--muted); display:flex; flex-wrap:wrap; justify-content:center; align-items:center; text-align:center; gap:6px 22px; }
.site-foot a{ color:var(--muted); text-decoration:underline; } .site-foot a:hover{ color:var(--text); }

@media (max-width:560px){
  .crumb{ display:none; }
}
@media (max-width:820px){
  .layout{ grid-template-columns:1fr; }
  .side{ position:static; }
  .about{ display:flex; align-items:center; gap:14px; margin-top:0; padding:12px 14px; }
  .about img{ width:72px; height:72px; flex:none; margin-bottom:0; }
  .content-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:no-preference){
  @keyframes fi{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
  .doc, .side{ animation: fi .5s ease both; }
  .doc{ animation-delay:.08s; }
}

/* GitHub-style activity graph (main page) */
.activity{ border:1px solid var(--line); border-radius:8px; padding:14px 16px 12px; margin:6px 0 14px; background:var(--card); }
.act-title{ font-size:14px; margin-bottom:10px; }
.act-title b{ font-weight:600; }
.act-scroll{ overflow-x:auto; padding-bottom:4px; }
.act-months{ display:grid; grid-template-columns:repeat(53, 11px); gap:3px; font-size:11px; color:var(--muted); height:16px; margin-left:0; }
.act-months span{ white-space:nowrap; }
.act-grid{ display:grid; grid-template-rows:repeat(7, 11px); grid-auto-flow:column; grid-auto-columns:11px; gap:3px; }
.act-grid i, .act-legend i{ width:11px; height:11px; border-radius:2px; display:block; background:var(--a0); outline:1px solid rgba(27,31,36,.06); outline-offset:-1px; }
.act-grid i.l1, .act-legend i.l1{ background:var(--a1); } .act-grid i.l2, .act-legend i.l2{ background:var(--a2); }
.act-grid i.l3, .act-legend i.l3{ background:var(--a3); } .act-grid i.l4, .act-legend i.l4{ background:var(--a4); }
.act-legend{ display:flex; align-items:center; justify-content:flex-end; gap:4px; margin-top:8px; font-size:11px; color:var(--muted); }
.act-legend span:first-child{ margin-right:3px; } .act-legend span:last-child{ margin-left:3px; }

/* app card in the left column of app pages */
.app-card{ padding:16px; }
.app-icon{ width:56px; height:56px; border-radius:14px; background:var(--c, #0969da); color:#fff; display:grid; place-items:center; font-weight:800; font-size:18px; margin-bottom:12px; }
.app-title{ font-weight:700; font-size:16px; line-height:1.25; }
.app-short{ color:var(--muted); font-size:13.5px; margin:6px 0 12px; }
.app-card .stats-row{ margin-bottom:12px; }
.app-card .stat-value{ font-size:22px; }
.store-btn{ display:flex; align-items:center; gap:10px; background:#000; color:#fff; border:1px solid #a6a6a6; border-radius:8px; padding:8px 14px; }
.store-btn:hover{ text-decoration:none; filter:brightness(1.25); }
.store-btn svg{ width:26px; height:26px; flex:none; }
.store-btn span{ display:flex; flex-direction:column; line-height:1.15; }
.store-btn small{ font-size:10.5px; opacity:.85; letter-spacing:.02em; }
.store-btn b{ font-size:16px; font-weight:600; }
.store-btn.off{ opacity:.55; pointer-events:none; }
img.app-icon{ display:block; width:64px; height:64px; background:none; object-fit:cover; }

/* app card: bigger icon, everything centred */
.app-card{ text-align:center; }
.app-icon, img.app-icon{ width:128px; height:128px; border-radius:28px; margin:2px auto 14px; font-size:34px; box-shadow:0 8px 24px -10px rgba(0,0,0,.45); }
.app-title{ font-size:17px; }
.app-short{ margin:8px 0 14px; }
.store-btn{ justify-content:center; }
.app-card .notice{ text-align:center; }

/* facts table inside the side card (legal pages) */
.app-card .fact-box{ border:0; background:none; padding:0; margin:0 0 14px; text-align:left; }
.app-card .fact-row{ flex-direction:column; gap:1px; padding:8px 0; }
.app-card .fact-row .v{ text-align:left; word-break:break-word; }
.app-card .app-title + .fact-box{ margin-top:10px; }

/* dark theme: empty activity cells must stand out from the box */
:root[data-theme="dark"]{ --a0:#1f2630; }
:root[data-theme="dark"] .activity{ background:var(--bg); }
:root[data-theme="dark"] .act-grid i, :root[data-theme="dark"] .act-legend i{ outline-color:rgba(240,246,252,.06); }

/* background: faint line grid that fades out towards the bottom + a soft glow at the top */
body{ background-image: radial-gradient(900px 380px at 50% -120px, var(--glow), transparent 70%); background-repeat:no-repeat; }
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 0%, #000 25%, transparent 100%);
          mask-image: radial-gradient(ellipse 85% 75% at 50% 0%, #000 25%, transparent 100%);
}
:root:not([data-theme="dark"]) body::before{ display:none; }   /* no grid on the light theme */
:root:not([data-theme="dark"]) body{ background-image:none; }   /* ...and no glow */
.topbar, .layout, .site-foot{ position:relative; z-index:1; }

/* top bar stays at the top while scrolling */
.topbar{ position:sticky; top:0; z-index:100; }
.side{ top:66px; }   /* keep the left column clear of the sticky bar */


/* logo: the outline draws itself, then the three bars grow (replays on hover) */
.brand svg{ width:30px; height:30px; flex:none; overflow:visible; }
.lm-s{ stroke-dasharray:1 2; }
.lm-bar{ transform-box:fill-box; transform-origin:50% 100%; }
@media (prefers-reduced-motion: no-preference){
  @keyframes lmDraw{ from{ stroke-dashoffset:1.02; } to{ stroke-dashoffset:0; } }
  @keyframes lmFade{ from{ opacity:0; } to{ opacity:1; } }
  @keyframes lmGrow{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
  .logo-svg.draw .lm-s{ animation: lmDraw 1.25s linear both; }
  .logo-svg.draw .s1{ animation-delay:.05s; animation-duration:1.253s; } .logo-svg.draw .s2{ animation-delay:1.303s; animation-duration:1.185s; } .logo-svg.draw .s3{ animation-delay:2.488s; animation-duration:1.162s; }
  .logo-svg.draw .lm-ring{ animation: lmFade .3s 3.5s both; }
  .logo-svg.draw .lm-bar{ animation: lmGrow .65s cubic-bezier(.3,1.2,.5,1) both; }
  .logo-svg.draw .b1{ animation-delay:2.95s; } .logo-svg.draw .b2{ animation-delay:3.15s; } .logo-svg.draw .b3{ animation-delay:3.4s; }
}

/* app shelf in the top bar: icons of the apps + "more to come" */
.shelf{ display:flex; align-items:center; gap:10px; flex:1; justify-content:center; min-width:0; }
.shelf-ic{ position:relative; display:block; width:40px; height:40px; border-radius:10px; box-shadow:0 2px 8px -4px rgba(0,0,0,.5); transition:transform .15s; flex:none; }
.shelf-ic:hover{ transform:translateY(-2px); text-decoration:none; }
.shelf-ic > img{ width:40px; height:40px; border-radius:10px; object-fit:cover; }
.shelf-mark{ position:absolute; right:-4px; bottom:-4px; width:17px; height:17px; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:0 1px 3px rgba(0,0,0,.35); }
.shelf-mark img{ width:11px; height:11px; }
.shelf-slot{ width:40px; height:40px; border:2px dashed var(--muted); border-radius:10px; display:grid; place-items:center; color:var(--muted); font-family:var(--mono); font-size:16px; font-weight:700; opacity:.7; flex:none; }
.shelf-txt{ margin-left:4px; font-family:var(--mono); font-weight:700; font-size:15px; color:var(--text); white-space:nowrap; }
@media (max-width:900px){ .shelf-txt, .shelf-slot{ display:none; } .shelf{ justify-content:flex-start; } }
@media (max-width:620px){ .shelf{ display:none; } }