:root{
--bru-canvas:#f4f1e9;--bru-ink:#14110d;--bru-accent:#e5421f;--bru-action:#1f5c54;
--bru-critical:#6b1622;--bru-warning:#a8650f;--bru-success:#1f6f3c;
--bru-canvas-rgb:244 241 233;--bru-ink-rgb:20 17 13;--bru-action-rgb:31 92 84;
--bru-accent-rgb:229 66 31;--bru-warning-rgb:168 101 15;
--bru-panel:rgb(var(--bru-canvas-rgb)/.64);
--bru-ink-05:rgb(var(--bru-ink-rgb)/.05);--bru-ink-10:rgb(var(--bru-ink-rgb)/.10);
--bru-ink-30:rgb(var(--bru-ink-rgb)/.30);--bru-ink-60:rgb(var(--bru-ink-rgb)/.60);
--bru-action-10:rgb(var(--bru-action-rgb)/.10);--bru-warning-10:rgb(var(--bru-warning-rgb)/.10);
--bru-font-sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
--bru-font-serif:"IBM Plex Serif",Georgia,serif;
--bru-font-mono:"IBM Plex Mono",ui-monospace,"Courier New",monospace;
--bru-shadow:6px 6px 0 0 var(--bru-ink);--bru-shadow-sm:4px 4px 0 0 var(--bru-ink);--bru-shadow-xs:2px 2px 0 0 var(--bru-ink);
--bru-radius:4px;--bru-prose:40rem;--bru-lift:-2px;--bru-press:1px;
--bru-ease:cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bru-canvas);color:var(--bru-ink);
font-family:var(--bru-font-sans);font-size:1rem;line-height:1.625;-webkit-font-smoothing:antialiased}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.04;
background-image:linear-gradient(var(--bru-ink) 1px,transparent 1px),linear-gradient(90deg,var(--bru-ink) 1px,transparent 1px);
background-size:24px 24px}
a{color:var(--bru-action);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{color:var(--bru-ink);margin:0 0 .6em;letter-spacing:-.01em}
h2{font-size:1.5rem;font-weight:600}
h3{font-size:1.25rem;font-weight:600}
code{font-family:var(--bru-font-mono);font-size:.9em;background:var(--bru-ink-05);padding:.1em .35em;border-radius:2px}

.site-header{display:flex;align-items:center;justify-content:space-between;
padding:1rem 1.5rem;border-bottom:2px solid var(--bru-ink)}
.brand{font-family:var(--bru-font-mono);font-weight:700;font-size:1.15rem;color:var(--bru-ink)}
.brand:hover{text-decoration:none}
.dim{color:var(--bru-ink-30)}
.site-main{max-width:46rem;margin:0 auto;padding:2.5rem 1.5rem}

.hero{margin-bottom:2.5rem}
.hero h1{font-size:clamp(2.25rem,6vw,3.75rem);font-weight:800;letter-spacing:-.02em;line-height:1.05;margin:0 0 1rem}
.mark{color:var(--bru-accent)}
.sub{font-family:var(--bru-font-serif);font-size:1.2rem;color:var(--bru-ink-60);max-width:var(--bru-prose);margin:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
font-family:var(--bru-font-sans);font-weight:600;font-size:.9rem;line-height:1;
padding:.65rem 1.1rem;border:2px solid var(--bru-ink);border-radius:var(--bru-radius);
background:var(--bru-canvas);color:var(--bru-ink);box-shadow:var(--bru-shadow-sm);
cursor:pointer;text-decoration:none;
transition:transform .1s var(--bru-ease),box-shadow .1s var(--bru-ease),background-color .15s var(--bru-ease)}
.btn:hover{text-decoration:none}
.btn:active{transform:translate(var(--bru-press),var(--bru-press));box-shadow:none}
.btn:focus-visible{outline:2px solid var(--bru-action);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.btn:hover{transform:translate(0,var(--bru-lift));box-shadow:var(--bru-shadow)}}
.btn-cta{background:var(--bru-action);color:#fff;border-color:var(--bru-ink)}
.btn-critical{background:var(--bru-critical);color:#fff;border-color:var(--bru-ink)}
.btn-dense{padding:0 .7rem;height:28px;font-size:.8rem;border-width:1px;box-shadow:none}
@media (hover:hover) and (pointer:fine){.btn-dense:hover{transform:none;box-shadow:none;background:var(--bru-ink-05)}}

.paste{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.paste-area{width:100%;min-height:18rem;resize:vertical;
font-family:var(--bru-font-mono);font-size:.85rem;line-height:1.5;
border:2px solid var(--bru-ink);border-radius:var(--bru-radius);box-shadow:var(--bru-shadow-sm);
padding:.85rem;background:#fff;color:var(--bru-ink)}
.paste-area:focus{outline:none;box-shadow:var(--bru-shadow)}

.manage{background:var(--bru-panel);border:2px solid var(--bru-ink);border-radius:var(--bru-radius);
padding:1.5rem;margin-bottom:1.5rem}
.manage h1{font-size:1.75rem;font-weight:800;letter-spacing:-.01em}
.manage .sub{font-size:1rem}
.field-label{display:block;margin:1rem 0 .35rem;font-family:var(--bru-font-mono);
font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--bru-ink-60)}
.link-box{width:100%;font-family:var(--bru-font-mono);font-size:.82rem;
padding:.55rem .65rem;border:2px solid var(--bru-ink);border-radius:var(--bru-radius);
background:#fff;color:var(--bru-ink)}
.link-box:focus{outline:none;box-shadow:var(--bru-shadow-xs)}
.link-secret{border-color:var(--bru-warning);background:var(--bru-warning-10)}
.manage-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.keep-form{margin-top:.5rem}
.edit-block .paste-area{min-height:10rem}
.manage.danger{border-color:var(--bru-critical)}
.manage.danger h2{color:var(--bru-critical)}

.status{display:inline-block;font-size:.85rem;font-weight:600;
padding:.3rem .6rem;border:2px solid var(--bru-ink);border-radius:var(--bru-radius);margin:.25rem 0 1rem}
.status-free{background:var(--bru-warning-10);border-color:var(--bru-warning);color:var(--bru-ink)}
.status-paid{background:var(--bru-action-10);border-color:var(--bru-action);color:var(--bru-ink)}

/* ── landing: steps / comparison / edges ─────────────── */
.block{margin:3rem 0}
.block h2{font-size:1.5rem;font-weight:800;letter-spacing:-.01em;margin:0 0 1.25rem;padding-bottom:.5rem;border-bottom:2px solid var(--bru-ink)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.step{background:var(--bru-panel);border:2px solid var(--bru-ink);border-radius:var(--bru-radius);padding:1.1rem;box-shadow:var(--bru-shadow-sm)}
.step .n{font-family:var(--bru-font-mono);font-size:.75rem;font-weight:700;color:var(--bru-action)}
.step h3{margin:.35rem 0 .4rem;font-size:1.1rem}
.step p{margin:0;font-size:.92rem;color:var(--bru-ink-60)}
.table-wrap{overflow-x:auto;border:2px solid var(--bru-ink);border-radius:var(--bru-radius);box-shadow:var(--bru-shadow-sm)}
.compare{width:100%;border-collapse:collapse;font-size:.9rem;min-width:34rem}
.compare th,.compare td{padding:.6rem .8rem;text-align:left;border-bottom:1px solid var(--bru-ink-10);border-right:1px solid var(--bru-ink-10)}
.compare thead th{background:var(--bru-ink);color:var(--bru-canvas);font-weight:600;border-color:var(--bru-ink)}
.compare tbody th{font-weight:600;color:var(--bru-ink)}
.compare td{color:var(--bru-ink-60)}
.compare .us{background:var(--bru-action-10);color:var(--bru-ink);font-weight:600}
.compare thead .us{background:var(--bru-action);color:#fff}
.foot{margin:.6rem 0 0;font-family:var(--bru-font-mono);font-size:.72rem;color:var(--bru-ink-60)}
.edges{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.edge{background:var(--bru-panel);border:2px solid var(--bru-ink);border-radius:var(--bru-radius);padding:1.1rem}
.edge h3{margin:0 0 .4rem;font-size:1.05rem}
.edge p{margin:0;font-size:.92rem;color:var(--bru-ink-60)}
.edge code{font-size:.85em}
@media (max-width:640px){.steps,