:root{
  --bg:#0a0c0b; --bg2:#0d100e; --panel:#131615; --panel-h:#191d1b;
  --line:#242a27; --line-h:#39443e; --txt:#e7ede9; --muted:#8a9791;
  --acc:#3ddc84; --acc-dim:#2a9d63; --acc-glow:rgba(61,220,132,.14);
  --warn:#e0b64f; --pink:#e07ba0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--txt);
  font:15px/1.6 'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  min-height:100vh;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:42px 42px;
  background-position:center -1px;
  background-attachment:fixed;
}
.mono{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.acc{color:var(--acc)}
a{color:inherit}
code{font-family:'IBM Plex Mono',monospace; background:rgba(61,220,132,.1); color:var(--acc); padding:1px 5px; border-radius:3px; font-size:.92em}

.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 22px; border-bottom:1px solid var(--line); background:var(--bg2);
  position:sticky; top:0; z-index:20; flex-wrap:wrap;
}
.wordmark{font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:15.5px; display:flex; align-items:center; gap:6px; text-decoration:none}
.wordmark .caret{color:var(--acc)}
.crumb{color:var(--muted); font-family:'IBM Plex Mono',monospace; font-size:13px}
.crumb a{color:var(--acc-dim); text-decoration:none}
.crumb a:hover{color:var(--acc)}
.btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; cursor:pointer;
  padding:8px 14px; border-radius:4px; font-size:13px; font-weight:600;
  color:var(--txt); background:var(--panel); border:1px solid var(--line); transition:.15s;
  font-family:'IBM Plex Mono',monospace;
}
.btn:hover{border-color:var(--acc-dim); background:var(--panel-h)}
.btn.primary{background:var(--acc); border-color:var(--acc); color:#06180d; font-weight:700}
.btn.primary:hover{background:#4ee893}

.wrap{max-width:1180px; margin:0 auto; padding:36px 22px 70px}
.rule{display:flex; align-items:center; gap:10px; color:var(--line-h); font-size:12px; margin:0 0 4px; user-select:none}
.rule::before, .rule::after{content:""; flex:1; height:1px; background:var(--line)}
.rule span{white-space:nowrap}

h1{font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:clamp(24px,4vw,34px); letter-spacing:-.01em; margin-bottom:10px}
.pitch{max-width:640px; color:var(--muted); font-size:15px; line-height:1.65; margin-bottom:8px}

.cat{
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); margin:36px 2px 14px; display:flex; align-items:center; gap:10px;
}
.cat::before{content:"#"; color:var(--acc-dim)}
.cat::after{content:""; flex:1; height:1px; background:var(--line)}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:14px; margin-top:18px}
.card{
  display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit;
  padding:18px 20px; border-radius:6px; background:var(--panel); border:1px solid var(--line);
  transition:border-color .15s, background .15s, transform .15s;
  min-height:110px;
}
.card:hover{border-color:var(--acc-dim); background:var(--panel-h); transform:translateY(-2px)}
.card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.card-top h3{font-family:'IBM Plex Mono',monospace; font-size:15px; font-weight:600}
.ico{font-size:18px; flex:none; opacity:.9}
.card p{font-size:13px; color:var(--muted); line-height:1.5; flex:1}
.card-foot{
  margin-top:2px; padding-top:11px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; font-size:12px;
  font-family:'IBM Plex Mono',monospace;
}
.tag2{color:var(--muted)}
.go{color:var(--acc); font-weight:600; display:flex; align-items:center; gap:4px}
.card:hover .go .arrow{transform:translateX(2px)}
.go .arrow{transition:.15s; display:inline-block}

.link-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:8px; margin-top:14px}
.linkcard{
  display:flex; flex-direction:column; gap:2px; text-decoration:none; color:inherit;
  padding:11px 14px; border-radius:5px; background:var(--panel); border:1px solid var(--line);
  transition:border-color .15s, background .15s;
}
.linkcard:hover{border-color:var(--acc-dim); background:var(--panel-h)}
.linkcard .lt{font-family:'IBM Plex Mono',monospace; font-size:13.5px; font-weight:600; display:flex; align-items:center; justify-content:space-between; gap:8px}
.linkcard .lt .arrow{color:var(--acc); opacity:0; transition:.15s}
.linkcard:hover .lt .arrow{opacity:1; transform:translateX(2px)}
.linkcard p{font-size:12.5px; color:var(--muted); line-height:1.4}
.subcat{font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--acc-dim); margin:22px 2px 4px}
.subcat:first-child{margin-top:4px}

/* ---------- toy chrome ---------- */
.toy-controls{
  display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center;
  padding:14px 18px; background:var(--panel); border:1px solid var(--line); border-radius:6px;
  margin-bottom:16px; font-family:'IBM Plex Mono',monospace; font-size:13px;
}
.toy-controls label{display:flex; align-items:center; gap:8px; color:var(--muted)}
.toy-controls input[type=range]{accent-color:var(--acc); width:110px}
.toy-canvas-wrap{border:1px solid var(--line); border-radius:6px; overflow:hidden; background:#000; line-height:0}
canvas{display:block; width:100%; height:auto; cursor:crosshair; touch-action:none}
.hint{font-size:12px; color:var(--muted); margin-top:10px; font-family:'IBM Plex Mono',monospace}
select{
  background:var(--bg2); color:var(--txt); border:1px solid var(--line); border-radius:4px;
  padding:5px 8px; font-family:'IBM Plex Mono',monospace; font-size:12.5px;
}