/* Design system for the orz-markdown site (markdown.orz.how). Light, calm,
   brand-green led. Two widths: .wrap (prose) and .wide (showcase). */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&display=swap');
:root {
  --paper:#fcfcfa; --surface:#fff; --ink:#1b1d1a; --ink-2:#52574d; --ink-3:#6c7064;
  --line:#e7e7df; --line-2:#efefe8;
  --brand:#5f9e44; --brand-d:#4e8638; --brand-ink:#356a2a; --brand-wash:#f1f7ec;
  --brand-solid:#3f7a2c; --brand-solid-d:#34631f;       /* white text passes AA */
  --display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --code-bg:#1f2329; --code-fg:#e8ebef;
  --radius:14px; --shadow:0 1px 2px rgba(20,30,15,.04), 0 6px 20px -8px rgba(20,30,15,.10);
  --shadow-lg:0 2px 6px rgba(20,30,15,.05), 0 18px 50px -16px rgba(20,30,15,.18);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink);
  font:17px/1.65 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a { color:var(--brand-ink); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:2px; }
.wrap { max-width:760px; margin:0 auto; padding:0 22px; }
.wide { max-width:1080px; margin:0 auto; padding:0 22px; }
img { max-width:100%; }

/* ---- nav ---- */
nav.top { position:sticky; top:0; z-index:20; background:rgba(252,252,250,.82);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line); }
nav.top .bar { max-width:1080px; margin:0 auto; padding:0 22px; display:flex; align-items:center; gap:20px; height:60px; }
nav.top .brand { display:flex; align-items:center; gap:10px; font-weight:750; font-size:1.05rem; color:var(--ink); letter-spacing:-.01em; }
nav.top .brand:hover { text-decoration:none; }
nav.top .brand img { height:27px; width:auto; display:block; }
nav.top .links { margin-left:auto; display:flex; align-items:center; gap:5px; font-size:.95rem; }
nav.top .links a { color:var(--ink-2); padding:7px 11px; border-radius:9px; }
nav.top .links a:hover { color:var(--ink); background:var(--line-2); text-decoration:none; }
nav.top .links a.here { color:var(--brand-ink); font-weight:600; }
nav.top .links a.cta { color:#fff; background:var(--brand-solid); padding:8px 15px; font-weight:600; }
nav.top .links a.cta:hover { background:var(--brand-solid-d); color:#fff; }
@media (max-width:620px){ nav.top .links a:not(.cta){ display:none; } }

/* ---- type ---- */
main { padding:0 0 90px; }
h1 { font-family:var(--display); font-size:clamp(2.2rem,4.6vw,3.1rem); line-height:1.04; letter-spacing:-.015em; margin:0 0 .25em; font-weight:600; }
h2 { font-family:var(--display); font-size:1.7rem; line-height:1.18; letter-spacing:-.005em; margin:2.4em 0 .55em; font-weight:600; }
h3 { font-family:var(--display); font-size:1.18rem; margin:1.6em 0 .35em; font-weight:600; letter-spacing:-.005em; }
.eyebrow { text-transform:uppercase; letter-spacing:.08em; font-size:.76rem; font-weight:700; color:var(--brand-ink); margin:0 0 .8em; }
.lead { color:var(--ink-2); font-size:clamp(1.1rem,2vw,1.28rem); line-height:1.5; margin:.2em 0 1.5em; }
p { margin:.7em 0; }

/* ---- hero ---- */
.hero { position:relative; padding:64px 0 30px; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(1100px 380px at 18% -8%, var(--brand-wash), transparent 70%); }
.hero-grid { display:grid; grid-template-columns:1.04fr 1fr; gap:40px; align-items:center; }
@media (max-width:880px){ .hero-grid{ grid-template-columns:1fr; gap:30px; } }

/* ---- buttons ---- */
.btn { display:inline-flex; align-items:center; gap:7px; background:var(--brand-solid); color:#fff;
  padding:11px 19px; border-radius:11px; font-weight:650; font-size:1rem; box-shadow:var(--shadow); }
.btn:hover { background:var(--brand-solid-d); color:#fff; text-decoration:none; transform:translateY(-1px); transition:transform .12s; }
.btn.ghost { background:var(--surface); color:var(--ink); border:1px solid var(--line); box-shadow:none; }
.btn.ghost:hover { background:var(--line-2); border-color:var(--ink-3); }
.btns { display:flex; flex-wrap:wrap; gap:12px; margin:1.5em 0; align-items:center; }

/* ---- cards / grid ---- */
.grid { display:grid; gap:18px; }
.grid.c3 { grid-template-columns:repeat(3,1fr); }
.grid.c2 { grid-template-columns:repeat(2,1fr); }
@media (max-width:780px){ .grid.c3,.grid.c2{ grid-template-columns:1fr; } }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.card.link:hover { border-color:var(--brand); box-shadow:var(--shadow-lg); transform:translateY(-2px);
  transition:transform .14s, box-shadow .14s, border-color .14s; text-decoration:none; }
.card .ico { width:24px; height:24px; color:var(--brand-ink); display:inline-flex; align-items:center;
  justify-content:center; flex:0 0 auto; margin-bottom:11px; }
.card .chd { display:flex; align-items:center; gap:10px; margin-bottom:7px; }
.card .chd .ico { margin-bottom:0; }
.card .chd h3 { margin:0; }
.card .ico svg { width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.card h3 { margin:0 0 .3em; }
.card p { margin:0; color:var(--ink-2); font-size:.97rem; }
.card .more { margin-top:auto; padding-top:12px; font-size:.92rem; font-weight:600; }
.ext { display:inline-block; font:650 .78rem ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--brand-ink);
  background:var(--brand-wash); padding:3px 9px; border-radius:7px; letter-spacing:.01em; }

/* ---- live demo (source -> rendered output) ---- */
.demo { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:var(--surface); margin:1.2em 0; }
.demo.split { display:grid; grid-template-columns:1fr 1fr; }
@media (max-width:760px){ .demo.split{ grid-template-columns:1fr; } }
.demo .src { background:var(--code-bg); color:var(--code-fg); margin:0; padding:16px 18px; overflow:auto;
  font:13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; }
/* the source is a <code>; override the global inline-code pill so it isn't light-on-light, and let it wrap */
.demo .srctext { display:block; white-space:pre-wrap; overflow-wrap:anywhere; background:none; color:inherit;
  padding:0; border:0; font:inherit; border-radius:0; }
.demo .src .cap, .demo .out .cap { display:block; font:600 .7rem ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.07em; text-transform:uppercase; opacity:.55; margin-bottom:9px; }
.demo .out { padding:18px 20px; min-width:0; border-left:1px solid var(--line); }
.demo.split .out { background:var(--surface); }
@media (max-width:760px){ .demo .out{ border-left:0; border-top:1px solid var(--line); } }

/* ---- rendered orz-markdown output (curated, on-brand, no full theme) ---- */
.render { font-size:.96rem; }
.render > :first-child { margin-top:0; } .render > :last-child { margin-bottom:0; }
.render h1,.render h2,.render h3 { font-family:inherit; margin:.9em 0 .35em; line-height:1.25; letter-spacing:-.01em; font-weight:700; }
.render h1 { font-size:1.5rem; } .render h2 { font-size:1.22rem; border:0; padding:0; } .render h3 { font-size:1.05rem; }
.render p { margin:.6em 0; } .render ul,.render ol { padding-left:1.3em; margin:.5em 0; }
.render li { margin:.2em 0; }
.render code { background:#f1f1ec; padding:1px 6px; border-radius:5px; font-size:.88em; }
.render pre { background:var(--code-bg); color:var(--code-fg); padding:12px 14px; border-radius:10px; overflow:auto; }
.render pre code { background:none; padding:0; color:inherit; }
.render blockquote { margin:.6em 0; padding:.2em 0 .2em 1em; border-left:3px solid var(--brand); color:var(--ink-2); }
.render table { border-collapse:collapse; width:100%; font-size:.92rem; margin:.6em 0; }
.render th,.render td { border:1px solid var(--line); padding:6px 10px; text-align:left; }
.render th { background:var(--brand-wash); }
.render a { color:var(--brand-ink); text-decoration:underline; text-underline-offset:2px; }
.render img { border-radius:8px; }
.render hr { border:0; border-top:1px solid var(--line); margin:1em 0; }
/* semantic containers */
.render .info,.render .success,.render .warning,.render .danger,.render .note {
  border-radius:10px; padding:11px 14px; margin:.7em 0; font-size:.95rem; border:1px solid; }
.render .info { background:#eef4fb; border-color:#cfe0f3; }
.render .success { background:#eaf6ec; border-color:#c5e6cb; }
.render .warning { background:#fdf6e3; border-color:#efe2bf; }
.render .danger { background:#fbecec; border-color:#f1cfcf; }
/* layout containers */
.render .cols { display:flex; gap:16px; flex-wrap:wrap; } .render .cols > * { flex:1; min-width:0; }
.render .center { text-align:center; } .render .right { text-align:right; }
/* colored spans + marks */
.render .red{color:#c0392b;} .render .green{color:#2e8b3d;} .render .blue{color:#2e6db5;}
.render .orange{color:#c87f17;} .render .purple{color:#7a4bb5;}
.render mark,.render .mark { background:#fdeb9c; padding:0 3px; border-radius:3px; }
.render .katex-display { margin:.6em 0; overflow-x:auto; overflow-y:hidden; }
.render .qrcode svg, .render .mermaid svg { max-width:160px; height:auto; }
.render canvas { max-width:100%; height:auto; }

/* ---- feature rows / misc ---- */
.section { padding:8px 0; } .section + .section { margin-top:8px; }
.kbd { font:600 .82em ui-monospace,monospace; background:#fff; border:1px solid var(--line);
  border-bottom-width:2px; border-radius:6px; padding:1px 6px; }
.callout { background:var(--brand-wash); border:1px solid #d8e8cd; border-radius:12px; padding:16px 18px; font-size:.97rem; }
.callout.amber { background:#fdf6e3; border-color:#efe2bf; }
.callout strong { color:var(--ink); }
ul.compact { padding-left:1.15em; } ul.compact li { margin:.4em 0; color:var(--ink-2); }
ul.compact li strong { color:var(--ink); }
code { background:#f1f1ec; padding:1px 6px; border-radius:5px; font-size:.9em; }
pre { background:var(--code-bg); color:var(--code-fg); padding:14px 16px; border-radius:11px; overflow:auto; font-size:.86rem; line-height:1.6; }
pre code { background:none; padding:0; color:inherit; }
table { border-collapse:collapse; width:100%; font-size:.95rem; margin:.7em 0; }
th,td { border:1px solid var(--line); padding:8px 11px; text-align:left; vertical-align:top; }
th { background:var(--brand-wash); }

/* progressive disclosure */
details.reveal { border:1px solid var(--line); border-radius:12px; padding:2px 18px; margin:.8em 0; background:var(--surface); }
details.reveal[open] { box-shadow:var(--shadow); }
details.reveal > summary { cursor:pointer; font-weight:650; padding:13px 0; list-style:none; display:flex; align-items:center; justify-content:space-between; }
details.reveal > summary::-webkit-details-marker { display:none; }
details.reveal > summary::after { content:"+"; font-weight:400; font-size:1.3rem; color:var(--ink-3); }
details.reveal[open] > summary::after { content:"–"; }
details.reveal > summary:hover { color:var(--brand-ink); }
details.reveal .body { padding:0 0 16px; }

/* tabs (CSS-only via radios) */
.tabs-ui { margin:1.2em 0; }
.tabs-ui input { position:absolute; opacity:0; pointer-events:none; }
.tabs-ui .labels { display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom:14px; }
.tabs-ui label { padding:8px 14px; border-radius:9px 9px 0 0; cursor:pointer; color:var(--ink-2); font-weight:600; font-size:.95rem; }
.tabs-ui label:hover { color:var(--ink); background:var(--line-2); }
.tabs-ui .panel { display:none; }

/* device mockups */
.mock { border:1px solid var(--line); border-radius:13px; overflow:hidden; box-shadow:var(--shadow-lg); background:#fff; }
.mock .chrome { background:#f4f4ee; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:7px; padding:9px 13px; }
.mock .chrome i { width:10px; height:10px; border-radius:50%; background:#dcdcd2; }
.mock .chrome span { margin-left:8px; font:600 .72rem ui-monospace,monospace; color:var(--ink-3); }
.mock .screen { padding:18px 20px; }
.slide { aspect-ratio:16/9; border-radius:13px; box-shadow:var(--shadow-lg); padding:26px 30px; color:#fff;
  background:linear-gradient(135deg,#3b6b2e,#26421d); display:flex; flex-direction:column; justify-content:center; }
.slide .t { font-family:var(--display); font-weight:600; margin:0 0 .4em; font-size:1.5rem; letter-spacing:-.01em; } .slide ul { margin:0; padding-left:1.1em; opacity:.92; }
.slide ul li { margin:.25em 0; }
.page { background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow-lg); aspect-ratio:1/1.3;
  padding:24px 26px; display:flex; flex-direction:column; font-size:.78rem; color:var(--ink-2); }
.page .ttl { font-size:1.05rem; font-weight:700; color:var(--ink); text-align:center; margin-bottom:4px; }
.page .meta { text-align:center; color:var(--ink-3); margin-bottom:14px; }
.page .body2 { columns:2; column-gap:16px; flex:1; }
.page .ln { height:6px; background:#ecece4; border-radius:3px; margin:0 0 7px; }
.page .pn { text-align:center; color:var(--ink-3); margin-top:8px; }

footer { border-top:1px solid var(--line); color:var(--ink-3); font-size:.92rem; padding:26px 0 0; margin-top:60px; }
footer a { color:var(--ink-2); } footer .row { display:flex; gap:18px; flex-wrap:wrap; align-items:center; }