:root {
  color-scheme: light dark;
  --bg: #18171c;
  --surface: #211f26;
  --surface-2: #2a2730;
  --surface-3: #302c38;
  --text: #f4f1f6;
  --muted: #b8b1bd;
  --border: #393540;
  --accent: #b8a7ff;
  --accent-strong: #8069d8;
  --shadow: 0 24px 70px rgba(0, 0, 0, .22);
  --radius: 22px;
  --max: 1160px;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #faf8fc;
    --surface: #ffffff;
    --surface-2: #f3eff6;
    --surface-3: #ece6f0;
    --text: #211f24;
    --muted: #6f6874;
    --border: #e4dde8;
    --accent: #6750a4;
    --accent-strong: #5d46a8;
    --shadow: 0 24px 70px rgba(60, 42, 70, .10);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6}
a{color:inherit}
.site-header,main,.site-footer{width:min(var(--max),calc(100% - 36px));margin-inline:auto}
.site-header{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{font-size:1.25rem;font-weight:800;text-decoration:none;letter-spacing:-.03em}
nav{display:flex;align-items:center;gap:22px}
nav a{text-decoration:none;color:var(--muted)}
nav a:hover,.footer-links a:hover,.text-link:hover{color:var(--text)}
.github-link{padding:8px 12px;border:1px solid var(--border);border-radius:11px}
.hero{min-height:73vh;padding:70px 0 90px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:76px}
.eyebrow{display:inline-block;color:var(--accent);font-weight:800;letter-spacing:.15em;font-size:.74rem}
.hero h1{margin:.28em 0 .24em;font-size:clamp(3.4rem,8vw,7rem);line-height:.9;letter-spacing:-.065em}
.hero-copy>p{max-width:680px;font-size:1.12rem;color:var(--muted)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.button{display:inline-flex;justify-content:center;align-items:center;min-height:46px;padding:11px 18px;border-radius:13px;border:1px solid var(--border);text-decoration:none;font-weight:750}
.button.primary{border-color:transparent;background:var(--accent-strong);color:#fff}
.button.secondary{background:var(--surface)}
.hero-panel{display:flex;justify-content:center}
.mini-window{width:min(100%,460px);min-height:300px;padding:18px;border:1px solid var(--border);background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 15%,var(--surface)),var(--surface));border-radius:28px;box-shadow:var(--shadow);transform:rotate(2deg)}
.mini-topbar{display:flex;gap:7px}
.mini-topbar span{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--text) 25%,transparent)}
.mini-content{min-height:235px;display:flex;flex-direction:column;justify-content:flex-end;padding:26px 18px 18px}
.mini-label{color:var(--accent);text-transform:uppercase;letter-spacing:.13em;font-size:.72rem;font-weight:800}
.mini-content strong{margin-top:8px;font-size:2rem;line-height:1.05}
.mini-content p{margin-bottom:0;color:var(--muted)}
.section{padding:92px 0;border-top:1px solid var(--border)}
.section-heading{max-width:680px;margin-bottom:36px}
.section h2{margin:.22em 0;font-size:clamp(2rem,4vw,3.5rem);line-height:1.02;letter-spacing:-.045em}
.section-heading p,.body-copy p,.contact-card p,.site-footer p{color:var(--muted)}
.apps-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.app-card{min-height:320px;display:flex;flex-direction:column;padding:25px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.app-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:16px;font-weight:900;font-size:1.15rem;margin-bottom:28px}
.app-icon.codepad{background:#f3c94f;color:#241f12}
.app-icon.anti{background:#e9a166;color:#29180b}
.app-icon.pic{background:#8cb6e8;color:#102136}
.app-icon.more{background:var(--surface-2);color:var(--muted)}
.status{font-size:.73rem;font-weight:750;text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}
.app-card h3{margin:5px 0 7px;font-size:1.75rem;letter-spacing:-.035em}
.app-card p{margin-top:0;color:var(--muted)}
.app-actions{margin-top:auto;display:flex;align-items:center;gap:18px}
.text-link{color:var(--muted);text-decoration:none;font-weight:700}
.text-link.muted{opacity:.7}
.placeholder-card{border-style:dashed}
.split-section{display:grid;grid-template-columns:1fr 1fr;gap:76px}
.body-copy{font-size:1.06rem}
.contact-card{display:flex;align-items:center;justify-content:space-between;gap:40px}
.site-footer{padding:34px 0 48px;border-top:1px solid var(--border);display:grid;grid-template-columns:1fr auto auto;gap:28px;align-items:start;color:var(--muted)}
.site-footer strong{color:var(--text)}
.site-footer p{margin:4px 0 0}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}
.footer-links a{text-decoration:none}
@media (max-width:900px){
  .hero,.split-section{grid-template-columns:1fr}
  .hero{gap:42px}
  .apps-grid{grid-template-columns:1fr}
  .contact-card{align-items:flex-start;flex-direction:column}
  .site-footer{grid-template-columns:1fr}
}
@media (max-width:640px){
  .site-header{align-items:flex-start;padding:18px 0}
  nav{gap:10px;justify-content:flex-end;flex-wrap:wrap}
  nav a:not(.github-link){display:none}
  .hero{padding-top:38px}
  .hero h1{font-size:clamp(3rem,17vw,5.2rem)}
  .section{padding:68px 0}
  .app-card{min-height:290px}
}