:root { --bg: #090d11; --panel: #111820; --panel-hi: #18222c; --ink: #edf4ee; --muted: #8fa1a5; --line: #26333d; --signal: #ff5d4b; --mint: #80f0cd; --grid: rgba(140, 170, 181, .07); }
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { min-height: 100vh; margin: 0; color: var(--ink); background-color: var(--bg); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 32px 32px; font-family: "DM Mono", monospace; }
button, input, textarea { font: inherit; }
.topbar { position: relative; z-index: 1; height: 70px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 max(24px, 5vw); background: rgba(9, 13, 17, .94); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.brand { color: var(--ink); text-decoration: none; font: 700 30px/1 "Newsreader", serif; letter-spacing: 0; }.brand span { color: var(--signal); }
.live-state, .kicker, .item-meta, #item-count { font-size: 10px; letter-spacing: .14em; }.live-state { padding: 7px 10px; border: 1px solid rgba(128, 240, 205, .3); color: var(--mint); }.live-state i { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); animation: pulse 1.6s infinite; }
.refresh-button { justify-self: end; width: 36px; height: 36px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; font-size: 20px; transition: background .2s, color .2s, transform .2s; }.refresh-button:hover { background: var(--signal); color: #160a09; transform: rotate(90deg); }
main { width: min(1180px, 100% - 48px); margin: auto; padding: 0 0 80px; }.masthead { display: flex; align-items: center; min-height: 86px; padding: 25px 0 17px; border-bottom: 1px solid var(--line); }.kicker { margin: 0; color: var(--mint); }.kicker::before { content: "// "; color: var(--signal); }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }.filters { display: flex; gap: 8px; flex-wrap: wrap; }.filter { position: relative; padding: 8px 11px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; transition: border-color .2s, color .2s, background .2s; }.filter:hover { border-color: var(--line); color: var(--ink); }.filter.is-active { border-color: var(--mint); background: rgba(128, 240, 205, .09); color: var(--mint); }.filter.is-active::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 7px 1px 0; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); }
#item-count { flex: 0 0 auto; color: var(--muted); }.feed { min-width: 0; max-width: 920px; }.feed-status { padding: 36px 0; color: var(--muted); font-size: 12px; }
.news-item { position: relative; display: grid; grid-template-columns: 132px minmax(0, 1fr); column-gap: 26px; padding: 26px 22px 26px 0; border-bottom: 1px solid var(--line); transition: background .2s, padding-left .2s; animation: reveal .4s ease both; }.news-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--source-color); opacity: .8; }.news-item:hover { padding-left: 17px; background: rgba(24, 34, 44, .65); }.item-meta { grid-row: span 3; display: flex; align-items: start; flex-direction: column; gap: 8px; padding: 2px 0 0 18px; color: var(--muted); }.source-label { color: var(--source-color); font-weight: 500; }.news-item h2 { max-width: 720px; margin: 0; font: 700 clamp(24px, 2.5vw, 34px)/1.02 "Newsreader", serif; letter-spacing: 0; }.news-body { max-width: 660px; margin: 12px 0 0; color: #b9c6c2; font: 12px/1.7 "DM Mono", monospace; }.source-link { display: inline-block; width: fit-content; margin-top: 15px; padding-bottom: 3px; border-bottom: 1px solid var(--source-color); color: var(--ink); font-size: 10px; text-decoration: none; letter-spacing: .08em; }.source-link span { color: var(--source-color); }
.editor-page { width: min(720px, 100% - 48px); padding-top: 68px; }.editor-intro { padding-bottom: 22px; border-bottom: 1px solid var(--line); }.editor-intro h1 { margin: 14px 0 0; font: 700 clamp(42px, 6vw, 64px)/.95 "Newsreader", serif; }.composer { margin-top: 24px; padding: 28px; background: var(--panel); border: 1px solid var(--line); box-shadow: 10px 10px 0 rgba(128, 240, 205, .11); }.editor-composer { margin-top: 28px; }.composer label { display: block; margin: 18px 0 8px; color: var(--muted); font-size: 10px; letter-spacing: .12em; }.composer label span { color: #65747a; } input, textarea { width: 100%; border: 1px solid #34434e; border-radius: 0; padding: 13px; background: #0c1218; color: var(--ink); font-size: 12px; outline: none; transition: border-color .2s, box-shadow .2s; } input:focus, textarea:focus { border-color: var(--mint); box-shadow: inset 3px 0 var(--mint); } textarea { height: 144px; resize: vertical; }.form-message { min-height: 17px; margin: 13px 0 0; color: var(--mint); font-size: 10px; }.publish-button { width: 100%; margin-top: 10px; padding: 14px; border: 1px solid var(--signal); background: var(--signal); color: #180b0a; cursor: pointer; text-align: left; font-weight: 500; font-size: 11px; letter-spacing: .08em; transition: background .2s, color .2s; }.publish-button:hover { background: transparent; color: var(--signal); }.publish-button span { float: right; font-size: 16px; line-height: 10px; }.publish-button:disabled { opacity: .55; }.is-autoscrolling .composer { visibility: hidden; }
@keyframes pulse { 50% { opacity: .3; } } @keyframes reveal { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 720px) { .topbar { height: 60px; padding: 0 20px; }.brand { font-size: 27px; }.live-state { display: none; } main, .editor-page { width: min(100% - 32px, 1180px); }.masthead { min-height: 72px; padding: 19px 0 14px; }.toolbar { align-items: flex-start; flex-direction: column; gap: 12px; }.news-item { grid-template-columns: 1fr; gap: 12px; padding: 22px 12px; }.item-meta { grid-row: auto; flex-direction: row; align-items: center; padding: 0 0 0 8px; }.news-item:hover { padding-left: 12px; }.news-item h2 { font-size: 27px; }.editor-page { padding-top: 38px; }.composer { padding: 20px; } }