/* WS Design System · v1.0 · shared by all wsollers.dev project pages. */
@layer reset, tokens, layout, components, utilities;
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; }
  button, input { font: inherit; }
  img, svg { display: block; max-width: 100%; }
  a { color: inherit; }
  [hidden] { display: none !important; }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }
}
@layer tokens {
  :root {
    color-scheme: dark;
    --bg: #07121d; --bg-raised: #0b1a27;
    --surface: #0e2231; --surface-hover: #142d3d;
    --surface-glass: rgba(12,30,44,.76);
    --text: #f4f7fb; --text-secondary: #aebecb; --text-subtle: #758a9d;
    --border: rgba(157,185,207,.16); --border-emphasis: rgba(157,185,207,.32);
    --brand: #75d4e1; --brand-strong: #abeaf1; --brand-soft: rgba(117,212,225,.11);
    --violet: #abafff; --amber: #e8bd89; --good: #90d5ba;
    --shadow: 0 14px 50px rgba(0,0,0,.19);
    --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace;
    --r-sm: 10px; --r-md: 18px; --r-lg: 25px; --content: 1180px;
  }
  html[data-theme="light"] {
    color-scheme: light;
    --bg:#f5f8fa; --bg-raised:#f9fbfc; --surface:#ffffff; --surface-hover:#edf5f8;
    --surface-glass:rgba(255,255,255,.88); --text:#123044; --text-secondary:#496476;
    --text-subtle:#6c8292; --border:rgba(34,73,98,.15); --border-emphasis:rgba(34,73,98,.28);
    --brand:#006d87; --brand-strong:#005a74; --brand-soft:rgba(0,109,135,.08);
    --violet:#5f60b0; --amber:#aa7141; --good:#277b65;
    --shadow:0 18px 50px rgba(12,52,73,.07);
  }
}
@layer layout {
  body { min-height: 100dvh; font: 400 16px/1.65 var(--font-sans); background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; }
  body::before { content:""; position:fixed; pointer-events:none; inset:0; z-index:-1;
    background:radial-gradient(ellipse 60% 40% at 76% -18%,rgba(48,141,162,.19),transparent),radial-gradient(ellipse 48% 35% at -10% 30%,rgba(57,85,146,.10),transparent); }
  .shell { width:min(calc(100% - 48px),var(--content)); margin-inline:auto; }
  .site-header { position:sticky; top:0; z-index:30; background:var(--surface-glass); backdrop-filter:blur(17px); -webkit-backdrop-filter:blur(17px); border-bottom:1px solid var(--border); }
  .header-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:76px; }
  .header-actions, .site-nav { display:flex; align-items:center; gap:26px; }
  .site-nav { gap:28px; }
  .site-main { padding-bottom:88px; }
  .hero { padding:89px 0 59px; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(370px,.92fr); gap:clamp(42px,6vw,95px); align-items:center; }
  .hero--narrow { grid-template-columns:minmax(0,1fr) minmax(290px,.7fr); padding:76px 0 56px; }
  .section { margin-top:88px; scroll-margin-top:105px; }
  .section--tight { margin-top:60px; }
  .section-heading { display:flex; justify-content:space-between; align-items:end; flex-wrap:wrap; gap:16px; margin-bottom:23px; }
  .project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; }
  .info-grid { display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr); gap:18px; }
  .stack { display:grid; gap:16px; }
  .site-footer { border-top:1px solid var(--border); padding:33px 0 39px; }
  .footer-inner { display:flex; gap:18px; justify-content:space-between; align-items:center; flex-wrap:wrap; }
  @media(max-width:940px) {
    .hero,.hero--narrow { grid-template-columns:1fr; padding-top:67px; }
    .hero-art { max-width:680px; width:100%; }
    .project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .info-grid { grid-template-columns:1fr; }
  }
  @media(max-width:650px) {
    .shell { width:min(calc(100% - 34px),var(--content)); }
    .header-inner { min-height:68px; gap:10px; }
    .site-nav { gap:12px; }
    .site-nav .nav-optional { display:none; }
    .header-actions { gap:10px; }
    .project-grid { grid-template-columns:1fr; }
    .hero { padding:61px 0 33px; }
    .section { margin-top:65px; }
  }
}
@layer components {
  a { text-decoration-thickness:1px; text-underline-offset:4px; }
  a:hover { color:var(--brand-strong); }
  a:focus-visible,button:focus-visible { outline:3px solid var(--brand); outline-offset:4px; }
  .skip-link { position:absolute; left:15px; top:-100px; background:var(--text); color:var(--bg); padding:10px 17px; z-index:99; border-radius:var(--r-sm); }
  .skip-link:focus { top:12px; }
  .brand { display:inline-flex; align-items:center; gap:12px; text-decoration:none; font-weight:750; letter-spacing:-.036em; font-size:1.08rem; white-space:nowrap; }
  .brand:hover { color:var(--text); }
  .brand-mark { display:grid; place-items:center; width:35px; height:35px; border:1px solid rgba(117,212,225,.34); border-radius:11px; background:linear-gradient(135deg,rgba(117,212,225,.18),rgba(171,175,255,.09)); color:var(--brand); font-size:19px; font-family:var(--font-mono); font-weight:700; }
  .site-nav a { text-decoration:none; font-size:.87rem; color:var(--text-secondary); font-weight:570; transition:color .18s ease; }
  .site-nav a:hover,.site-nav a[aria-current="page"] { color:var(--brand); }
  .icon-button { cursor:pointer; display:grid; place-items:center; flex:0 0 auto; width:36px; height:36px; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text-secondary); }
  .icon-button:hover { background:var(--surface-hover); color:var(--text); }
  .eyebrow { display:flex; align-items:center; gap:10px; font-size:.74rem; letter-spacing:.16em; font-weight:800; text-transform:uppercase; color:var(--brand); margin-bottom:23px; }
  .eyebrow::before { content:""; width:23px; height:1px; background:currentColor; }
  h1,h2,h3,p { margin-top:0; }
  h1 { font-size:clamp(2.65rem,5.2vw,4.9rem); letter-spacing:-.068em; line-height:1.08; font-weight:760; margin-bottom:26px; }
  .hero--narrow h1 { font-size:clamp(2.7rem,4.9vw,4.4rem); }
  h1 .accent,h2 .accent { color:var(--brand); }
  h2 { font-size:clamp(1.7rem,2.5vw,2.35rem); letter-spacing:-.046em; line-height:1.22; font-weight:740; margin:0; }
  h3 { font-size:1.16rem; letter-spacing:-.028em; line-height:1.28; margin:0 0 9px; }
  p { color:var(--text-secondary); }
  .lede { max-width:630px; font-size:clamp(1.025rem,1.5vw,1.15rem); line-height:1.8; margin-bottom:30px; }
  .muted { color:var(--text-secondary); }
  .fine { font-size:.82rem; color:var(--text-subtle); }
  .section-intro { max-width:640px; margin:8px 0 0; font-size:.98rem; }
  .button-row { display:flex; flex-wrap:wrap; align-items:center; gap:11px; }
  .button { text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:10px 17px; border:1px solid var(--border-emphasis); border-radius:var(--r-sm); font-size:.87rem; font-weight:720; color:var(--text); background:var(--surface); transition:transform .16s ease,background .16s ease,border .16s ease; }
  .button:hover { transform:translateY(-2px); background:var(--surface-hover); color:var(--text); }
  .button--primary { color:#071922; background:var(--brand); border-color:var(--brand); }
  .button--primary:hover { background:var(--brand-strong); color:#071922; }
  .button--quiet { border-color:transparent; background:transparent; }
  .button svg,.text-link svg { width:15px; height:15px; }
  .text-link { display:inline-flex; align-items:center; gap:7px; font-size:.85rem; font-weight:720; color:var(--brand); text-decoration:none; }
  .text-link:hover { color:var(--brand-strong); }
  .panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow); }
  .card { position:relative; min-width:0; padding:26px; display:flex; flex-direction:column; min-height:260px; overflow:hidden; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
  .card:hover { border-color:var(--border-emphasis); transform:translateY(-3px); }
  .card p { max-width:42ch; font-size:.9rem; line-height:1.72; margin:0 0 19px; }
  .card .text-link { margin-top:auto; }
  .card-top { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:30px; }
  .card-icon { width:45px; height:45px; display:grid; place-items:center; border:1px solid var(--border); border-radius:14px; background:var(--bg-raised); color:var(--brand); }
  .card-icon svg { width:21px; height:21px; }
  .card-icon--violet{color:var(--violet)} .card-icon--amber{color:var(--amber)}
  .tag { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); border-radius:999px; color:var(--text-secondary); padding:5px 11px; font-size:.72rem; font-weight:690; letter-spacing:.025em; white-space:nowrap; }
  .tag--active { color:var(--good); background:rgba(88,178,143,.09); border-color:rgba(88,178,143,.22); }
  .tag-dot { display:block; width:6px; height:6px; border-radius:50%; background:currentColor; }
  .diagram { min-height:395px; position:relative; display:flex; flex-direction:column; justify-content:center; padding:29px; overflow:hidden; }
  .diagram::before { content:""; position:absolute; inset:0; opacity:.38; background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size:34px 34px; mask-image:radial-gradient(ellipse at center,#000 20%,transparent 77%); }
  .diagram > * { position:relative; z-index:1; }
  .diagram-head { display:flex; align-items:center; justify-content:space-between; color:var(--text-subtle); font:.7rem var(--font-mono); letter-spacing:.09em; text-transform:uppercase; margin-bottom:25px; }
  .diagram-flow { display:grid; gap:13px; }
  .diagram-node { display:flex; align-items:center; gap:12px; padding:13px 15px; border:1px solid var(--border); border-radius:13px; background:var(--bg-raised); }
  .diagram-node strong { font-size:.85rem; font-weight:690; }
  .diagram-node small { display:block; font-size:.72rem; color:var(--text-subtle); }
  .diagram-index { display:grid; place-items:center; flex:0 0 33px; width:33px; height:33px; border:1px solid var(--border); border-radius:10px; font:.72rem var(--font-mono); color:var(--brand); }
  .diagram-connector { border-left:1px dashed var(--border-emphasis); height:16px; margin:-12px 0 -12px 31px; }
  .diagram-caption { margin:24px 0 0; color:var(--text-subtle); font:.74rem var(--font-mono); }
  .profile { padding:25px; }
  .profile-top { display:flex; align-items:center; gap:14px; margin-bottom:19px; }
  .avatar { width:52px; height:52px; border:1px solid var(--border); border-radius:16px; object-fit:cover; background:var(--bg-raised); }
  .profile-name { margin:0; font-size:1.01rem; letter-spacing:-.025em; font-weight:730; }
  .profile-handle { display:block; font:.82rem var(--font-mono); color:var(--text-subtle); margin-top:2px; }
  .activity { list-style:none; padding:0; margin:6px 0 15px; }
  .activity li { display:flex; align-items:baseline; gap:13px; padding:13px 0; border-bottom:1px solid var(--border); color:var(--text-secondary); font-size:.83rem; line-height:1.5; }
  .activity li:last-child { border-bottom:0; }
  .activity-dot { flex:0 0 7px; width:7px; height:7px; background:var(--brand); border-radius:50%; }
  .activity li time { display:block; color:var(--text-subtle); font-size:.72rem; margin-top:4px; }
  .activity li a { font-weight:670; text-decoration:none; color:var(--text); }
  .activity li a:hover { color:var(--brand); }
  .note { padding:22px 24px; background:var(--brand-soft); border:1px solid rgba(117,212,225,.18); border-radius:var(--r-md); }
  .note p { margin:6px 0 0; font-size:.9rem; }
  .meta-list { margin:0; padding:0; list-style:none; }
  .meta-list li { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--border); font-size:.87rem; }
  .meta-list li:last-child { border:0; }
  .meta-list strong { font-weight:650; }
  .meta-list span { color:var(--text-secondary); text-align:right; }
  .crumbs { display:flex; gap:8px; align-items:center; color:var(--text-subtle); font-size:.8rem; margin:25px 0 0; }
  .crumbs a { color:var(--text-secondary); text-decoration:none; }
  .callout-list { display:grid; gap:12px; padding:0; margin:0; list-style:none; }
  .callout-list li { display:flex; gap:12px; align-items:flex-start; color:var(--text-secondary); font-size:.93rem; }
  .callout-list li::before { content:"→"; color:var(--brand); font-weight:800; }
  .footer-links { display:flex; flex-wrap:wrap; gap:20px; }
  .footer-links a { color:var(--text-secondary); text-decoration:none; font-size:.84rem; }
  .footer-links a:hover { color:var(--brand); }
}
@layer utilities {
  .visually-hidden { position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
  .mono { font-family:var(--font-mono); }
  .full { width:100%; }
  .space-top { margin-top:22px; }
  .margin-none { margin:0; }
}