/* Stella chrome — the SMEI "Modern Calm" shell. Self-contained: tokens + the
   header / rail / footer / content classes the Rust shell() emits. Fonts are
   self-hosted (see /fonts) — never a third-party CDN on a PHI surface. */

:root {
  --ink:#0b2a31; --ink-soft:#46606a; --ink-faint:#7a949c;
  --line:#dde7e7; --line-soft:#eaf1f1;
  --surface:#fff; --bg:#eaf1f1; --bg-2:#f5f9f9;
  --accent:#10b3a3; --accent-deep:#0a8d80; --accent-press:#07786d;
  --accent-tint:#e4f7f4; --accent-tint2:#d3f1ec;
  --petrol:#0a242b;
  --radius:14px; --radius-sm:10px;
  --rail-w:15rem;
  --font-display:'Unbounded',system-ui,sans-serif;
  --font-body:'Onest',system-ui,-apple-system,sans-serif;
  --shadow:0 10px 30px -18px rgba(10,36,43,.4);
}

* { box-sizing:border-box; margin:0; padding:0; }
[hidden] { display:none !important; }

html { -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font-body); color:var(--ink); line-height:1.5;
  min-height:100dvh; display:flex; flex-direction:column;
  background:
    radial-gradient(900px 600px at 82% -12%, var(--accent-tint), rgba(228,247,244,0) 55%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
}
a { color:inherit; text-decoration:none; }

/* ---- header ---- */
.sm-header { position:sticky; top:0; z-index:30; background:var(--petrol); color:#fff; }
.sm-nav { }
.sm-nav-inner {
  max-width:1140px; margin:0 auto; padding:0 20px; height:60px;
  display:flex; align-items:center; gap:22px;
}
.sm-brand { display:flex; align-items:center; gap:11px; }
.sm-mark {
  width:32px; height:32px; border-radius:9px; background:var(--accent); flex:none;
  display:grid; place-items:center; font-family:var(--font-display);
  font-weight:700; font-size:15px; color:#06231f;
}
.sm-word { font-size:14.5px; font-weight:600; line-height:1.15; }
.sm-tag { display:block; font-size:11px; color:#9fc4c2; font-weight:400; letter-spacing:.01em; }

.sm-links { display:flex; align-items:center; gap:4px; margin-left:8px; }
.sm-link {
  padding:7px 12px; border-radius:9px; font-size:14px; font-weight:500;
  color:#cfe4e2; white-space:nowrap;
}
.sm-link:hover { color:#fff; background:rgba(255,255,255,.07); }
.sm-link.active { color:#fff; background:rgba(16,179,163,.24); }

.sm-right { display:flex; align-items:center; gap:8px; margin-left:auto; }
.sm-btn {
  padding:8px 15px; border-radius:10px; font-size:14px; font-weight:600; white-space:nowrap;
  border:1px solid transparent; cursor:pointer;
}
.sm-btn-ghost { color:#dff0ee; border-color:rgba(255,255,255,.18); }
.sm-btn-ghost:hover { border-color:var(--accent); color:#fff; }
.sm-btn-primary { background:var(--accent); color:#06231f; }
.sm-btn-primary:hover { background:#14c6b4; }

.sm-lang { display:flex; gap:2px; margin-right:4px; }
.sm-lang-item { padding:5px 8px; border-radius:8px; font-size:12px; color:#9fc4c2; text-transform:uppercase; }
.sm-lang-item.active { color:#fff; background:rgba(255,255,255,.12); }

/* ---- main content ---- */
.sm-main { flex:1 0 auto; width:100%; }
.container { max-width:1140px; margin:0 auto; padding:34px 20px; }
.section { padding:8px 0 20px; }

.sm-hero { padding:56px 20px 40px; max-width:1140px; margin:0 auto; }
.sm-hero h1 {
  font-family:var(--font-display); font-weight:600; font-size:clamp(28px,5vw,44px);
  letter-spacing:-.015em; line-height:1.08; color:var(--ink); max-width:16ch;
}
.sm-hero p { margin-top:14px; font-size:17px; color:var(--ink-soft); max-width:52ch; }
.sm-hero .sm-cta {
  display:inline-flex; align-items:center; gap:8px; margin-top:22px;
  background:var(--accent); color:#fff; padding:13px 22px; border-radius:var(--radius);
  font-weight:600; box-shadow:0 12px 26px -12px rgba(16,179,163,.85);
}
.sm-hero .sm-cta:hover { background:var(--accent-deep); }

.card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow);
}
h1,h2,h3 { font-family:var(--font-display); font-weight:600; letter-spacing:-.01em; color:var(--ink); }
h2 { font-size:22px; margin-bottom:10px; }
p { color:var(--ink-soft); }

/* ---- app shell (rail + main) ---- */
.sm-app { flex:1 0 auto; display:grid; grid-template-columns:var(--rail-w) 1fr; max-width:1240px; margin:0 auto; width:100%; }
.sm-rail { background:var(--bg-2); border-right:1px solid var(--line); min-height:60vh; }
.sm-rail-nav { display:flex; flex-direction:column; padding:16px 12px; gap:2px; position:sticky; top:60px; }
.sm-rail-item { padding:10px 14px; border-radius:10px; font-size:14px; font-weight:500; color:var(--ink-soft); }
.sm-rail-item:hover { background:var(--accent-tint); color:var(--ink); }
.sm-rail-item.active { background:var(--petrol); color:#fff; }
.sm-app-main { padding:26px 28px; min-width:0; }

/* ---- footer ---- */
.sm-footer { flex:none; background:var(--petrol); color:#c7dedb; margin-top:48px; }
.sm-footer-inner {
  max-width:1140px; margin:0 auto; padding:34px 20px 14px;
  display:flex; flex-wrap:wrap; gap:40px;
}
.sm-footer-col { min-width:140px; display:flex; flex-direction:column; gap:9px; }
.sm-footer-label { font-family:var(--font-display); font-weight:500; font-size:13px; color:#fff; margin-bottom:3px; }
.sm-footer-link { font-size:13.5px; color:#a8c8c4; }
.sm-footer-link:hover { color:#fff; }
.sm-footer-note {
  max-width:1140px; margin:0 auto; padding:14px 20px 26px; border-top:1px solid rgba(255,255,255,.08);
  font-size:12px; color:#7fa39e;
}

@media (max-width:860px) {
  .sm-links { display:none; }
  .sm-app { grid-template-columns:1fr; }
  .sm-rail { border-right:none; border-bottom:1px solid var(--line); }
  .sm-rail-nav { flex-direction:row; flex-wrap:wrap; position:static; }
}