:root { --font-scale: 100%; --ink:#17212b; --muted:#68737d; --paper:#fffdf9; --wash:#f4f0e9; --line:#ddd5c9; --accent:#155e63; --note:#fff4bd; --pin:#e4f5f1; --danger:#9d302d; }
* { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); font:calc(1rem * var(--font-scale))/1.55 ui-serif, Georgia, serif; } button,input,textarea,select { font:inherit; } button { cursor:pointer; border:1px solid var(--line); background:white; color:var(--ink); padding:.42em .72em; border-radius:.3em; } button:hover { border-color:var(--accent); } button.primary { background:var(--accent); border-color:var(--accent); color:white; } button.quiet { color:var(--muted); } main { max-width:900px; margin:0 auto; padding:2.5rem 1.25rem 5rem; } .topbar { position:sticky; z-index:2; top:0; display:flex; gap:1rem; align-items:center; padding:.65rem 1.2rem; border-bottom:1px solid var(--line); background:rgba(255,253,249,.96); backdrop-filter:blur(8px); font-family:ui-sans-serif,system-ui,sans-serif; font-size:.88em; } .brand { color:var(--ink); font-weight:700; text-decoration:none; } .viewer-link { color:var(--accent); text-decoration:none; } .statusline { margin-left:auto; color:var(--muted); white-space:nowrap; } .dot { width:.65em; height:.65em; display:inline-block; border-radius:50%; margin-right:.35em; background:#d38d30; } .dot.connected { background:#2d8a50; } .dot.offline { background:#bb3d3d; } .type-controls { display:flex; gap:.2rem; } .type-controls button { padding:.12em .45em; } section { margin:2.8rem 0; } h1,h2 { line-height:1.15; margin:.1em 0 .55em; } h1 { font-size:2.2em; } h2 { font-size:1.45em; } .eyebrow { margin:0; color:var(--accent); font:700 .73em/1.4 ui-sans-serif,system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; } .muted,.empty { color:var(--muted); } .intro { border-bottom:2px solid var(--ink); padding-bottom:1.7rem; } .actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; align-items:center; } .cue { border-left:5px solid var(--accent); background:#eef7f5; padding:1rem 1.25rem; } .cue.unsupported { border-color:#c9822e; background:#fff5df; } .hidden { display:none; } .cards { display:grid; gap:.75rem; } .card { border:1px solid var(--line); border-radius:.45rem; padding:1rem; background:#fff; } .card.note { background:var(--note); border-color:#e4cf7d; } .card.pinned { background:var(--pin); border-color:#b5ddd5; } .card-head { display:flex; gap:.75rem; align-items:flex-start; } .card-title { flex:1; font-weight:700; } .stars { color:#c48114; letter-spacing:.08em; white-space:nowrap; font-size:.9em; } .source { color:var(--muted); font-family:ui-sans-serif,system-ui,sans-serif; font-size:.78em; margin:.25em 0 .75em; } .excerpt { margin:.3em 0 .9em; } .card-controls { display:flex; flex-wrap:wrap; gap:.45rem; font-family:ui-sans-serif,system-ui,sans-serif; font-size:.8em; } details { margin-top:.75rem; } details > div { overflow:auto; border-top:1px solid var(--line); margin-top:.5rem; padding-top:.75rem; } details table { border-collapse:collapse; } details td,details th { border:1px solid var(--line); padding:.35em; } .search { background:var(--wash); margin-left:-1.25rem; margin-right:-1.25rem; padding:1.5rem 1.25rem; } .searchline { display:flex; gap:.5rem; } input[type=search] { width:100%; padding:.5em .65em; border:1px solid var(--line); border-radius:.3em; background:white; } .transcript-line { border-left:2px solid var(--line); padding:.35em .75em; margin:.55rem 0; } .transcript-line.interviewer { border-color:var(--accent); } .transcript-line .speaker { font:700 .75em ui-sans-serif,system-ui,sans-serif; text-transform:uppercase; color:var(--muted); } .partial { color:var(--muted); font-style:italic; } .admin-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; background:var(--wash); padding:1.25rem; } textarea { width:100%; min-height:8rem; padding:.6em; border:1px solid var(--line); border-radius:.3em; background:white; } .public-warning { color:var(--danger); font-family:ui-sans-serif,system-ui,sans-serif; font-size:.88em; } .mode { font-family:ui-sans-serif,system-ui,sans-serif; font-size:.88em; } .note-editor { width:100%; min-height:4rem; margin:.6rem 0; } .event-history { font:normal .8em/1.5 ui-monospace,SFMono-Regular,monospace; color:var(--muted); } .event { padding:.3rem 0; border-bottom:1px solid var(--line); } @media (max-width:650px) { .topbar { gap:.55rem; padding:.55rem .7rem; } .viewer-link { display:none; } .statusline { font-size:.75em; } .admin-grid { grid-template-columns:1fr; } main { padding-top:1.75rem; } }