:root{
    --bg: #f8f7f2;
    --paper:#fbfaf6;
    --ink:#0e0f10;
    --muted:#5a5d63;
    --edge:#e7e3da;
    --accent:#6b7cff;
    --accent-2:#00b894;
    --card:#ffffff;
    --shadow: 0 8px 24px rgba(12,14,16,.06), 0 2px 6px rgba(12,14,16,.05);
    --radius: 18px;
    --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Helvetica, Arial, sans-serif;
    --font-serif: "Literata", Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
@media (prefers-color-scheme: dark) {
    :root{
        --bg:#0e0f10; --paper:#0f1114; --ink:#eaeef2; --muted:#9aa2ab; --edge:#1b1d22; --card:#121419;
        --shadow: 0 8px 24px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);
    }
}
html[data-theme="light"]{--bg:#f8f7f2; --paper:#fbfaf6; --ink:#0e0f10; --muted:#5a5d63; --edge:#e7e3da; --card:#ffffff;}
html[data-theme="dark"] {--bg:#0e0f10; --paper:#0f1114; --ink:#eaeef2; --muted:#9aa2ab; --edge:#1b1d22; --card:#121419;}
*{box-sizing:border-box}
body{
    margin:0; color:var(--ink); background: var(--bg);
    font: 16px/1.6 var(--font-sans);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.container{
    max-width: 980px; margin: 36px auto 72px; padding: 0 20px;
    background:
            radial-gradient(ellipse at top left, rgba(0,0,0,.04), transparent 35%),
            radial-gradient(ellipse at bottom right, rgba(0,0,0,.05), transparent 40%),
            var(--paper);
    border: 1px solid var(--edge);
    border-radius: calc(var(--radius) + 8px);
    box-shadow: var(--shadow);
    position: relative;
    overflow: clip;
}
.container:before, .container:after{
    content:""; position:absolute; inset:10px; pointer-events:none; border-radius: calc(var(--radius) + 2px);
    background:
            conic-gradient(from 90deg at top left, transparent 0 25%, rgba(0,0,0,.06) 0 26%, transparent 0) top left/16px 16px no-repeat,
            conic-gradient(from 0deg at bottom right, transparent 0 25%, rgba(0,0,0,.06) 0 26%, transparent 0) bottom right/16px 16px no-repeat;
    opacity:.25;
}
header.site{
    display:flex; align-items:center; gap:16px; padding:22px 28px; border-bottom:1px dashed var(--edge); position:sticky; top:0; background:linear-gradient(var(--paper),var(--paper));
    z-index:3;
}
.brand{ display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit; }
.brand-stamp{
    width:42px; height:42px; border-radius:12px; display:grid; place-items:center; position:relative;
    background: linear-gradient(135deg, var(--ink) 0%, #4954ff 100%);
    color:white; font: 700 18px/1 var(--font-mono); letter-spacing:.6px;
    box-shadow: 0 8px 16px rgba(0,0,0,.18), inset 0 -2px 8px rgba(255,255,255,.15);
}
.brand h1{ font: 800 22px/1.2 var(--font-serif); margin:0; }
.brand small{ display:block; color:var(--muted); font: 600 11px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; margin-top:4px; }
header .spacer{flex:1}
.controls{display:flex; gap:10px; align-items:center;}
.theme-toggle{
    border:1px solid var(--edge); background:var(--card); color:inherit; border-radius:12px; padding:8px 12px; cursor:pointer;
    display:flex; align-items:center; gap:8px; font: 600 12px/1 var(--font-mono);
}
.theme-toggle svg{width:16px;height:16px}
kbd{
    font: 600 11px/1 var(--font-mono); border:1px solid var(--edge); border-bottom-width:2px; padding:3px 6px; border-radius:8px; background:var(--card); color:var(--muted);
}

.breadcrumbs{
    padding:14px 28px; color:var(--muted); font: 12px/1 var(--font-mono); letter-spacing:.02em; border-bottom:1px dashed var(--edge);
}
.breadcrumbs a{color:inherit; text-decoration:none}
.breadcrumbs .sep{opacity:.35; padding:0 6px}

.search{
    padding:22px 28px; display:grid; grid-template-columns: 1fr 220px 220px auto auto; gap:10px; align-items:center; border-bottom:1px dashed var(--edge);
}
.search input[type="search"], .search input[type="text"]{
    border:1px solid var(--edge); background:var(--card); color:inherit; border-radius:12px; padding:12px 12px;
    font: 14px/1.2 var(--font-sans); outline: none;
}
.search button, .search a.button{
    border:1px solid var(--edge); background:var(--ink); color:#fff; font-weight:700; border-radius:12px; padding:12px 16px; cursor:pointer; text-decoration:none; display:inline-block;
}
.search .hint{color:var(--muted); font: 12px/1 var(--font-mono); grid-column: 1 / -1}

.main{ padding: 10px 28px 36px; }

.meta{ color: var(--muted); }

.quote-card{
    position:relative; margin:18px 0; padding:18px 18px 18px 22px; background:var(--card);
    border: 1px solid var(--edge); border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.quote-card:before{
    content:"“"; position:absolute; left:14px; top:-18px; font: 700 80px/1 var(--font-serif); color: var(--accent); opacity:.1; pointer-events:none;
}
blockquote{ margin: 0 0 10px 0; font: 600 22px/1.35 var(--font-serif); }
.quote-meta{ display:flex; gap:12px; align-items:center; color:var(--muted); font: 13px/1 var(--font-sans); }
.quote-meta a{ color: inherit; text-decoration:none; border-bottom:1px dotted var(--edge); }
.tools{
    position:absolute; top:-8px; right:10px; display:flex; gap:8px;
}
.tools button, .tools a.tool{
    border:1px solid var(--edge); background:var(--paper); color:inherit; border-radius:10px; padding:6px 10px; font: 600 12px/1 var(--font-mono); cursor:pointer; text-decoration:none;
}
.tools button:hover, .tools a.tool:hover{ filter:brightness(1.02) }
.tools .ok{ color: var(--accent-2) }

.section{ margin: 28px 0 10px; padding-top:2px; }
.section h3{
    margin: 14px 0 10px; font: 800 14px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color: var(--muted);
}
.pills{ display:flex; flex-wrap:wrap; gap:8px; margin: 10px 0 0}
.pills a{
    text-decoration:none; color:inherit; border:1px solid var(--edge); background:var(--card); padding:8px 12px; border-radius:999px; font: 600 13px/1 var(--font-sans);
}
.pills a:hover{ border-color: var(--accent); }

.pagination{
    display:flex; align-items:center; gap:10px; padding: 14px 0 6px; margin: 14px 0 0; border-top:1px dashed var(--edge);
}
.pagination .page{ color: var(--muted); font: 600 12px/1 var(--font-mono); }
.pagination a{
    text-decoration:none; border:1px solid var(--edge); padding:8px 12px; border-radius:10px; background:var(--card); color:inherit; font: 600 13px/1 var(--font-sans);
}
footer.site{
    padding: 18px 28px 28px; border-top:1px dashed var(--edge); color: var(--muted); font: 13px/1.4 var(--font-sans);
}
footer .colophon{ font-family: var(--font-mono); font-size:12px }

@media (max-width: 980px){
    .search{ grid-template-columns: 1fr; }
}

@media print {
    header.site, .tools, .search, .breadcrumbs, .pagination, footer.site { display:none !important; }
    .container{ border:0; box-shadow:none; background:white }
    .quote-card{ break-inside: avoid; border-color:#ddd }
}
html { font-optical-sizing: auto; }
.search button,
.search a.button {
    border: 1px solid var(--edge);
    background: var(--ink);   /* background uses ink */
    color: var(--bg);         /* text uses background */
    font-weight: 700;
    border-radius: 12px;
    font-size: 14px !important;
    padding: 12px 16px !important;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}