:root { --bg:#11110f; --surface:#191916; --surface-2:#20201b; --text:#efeee7; --muted:#9d9b8e; --line:#37362d; --accent:#f5b042; --accent-soft:rgba(245,176,66,.12); --shadow:0 18px 50px rgba(0,0,0,.22); }
html[data-theme="light"] { --bg:#f8f4ea; --surface:#fffdf7; --surface-2:#f3ead7; --text:#28251f; --muted:#716b5d; --line:#e1d6bd; --accent:#ae6200; --accent-soft:rgba(174,98,0,.09); --shadow:0 18px 50px rgba(89,63,20,.1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; color:var(--text); background:var(--bg); font-family:Inter,system-ui,sans-serif; line-height:1.55; overflow-x:hidden; }
a { color:var(--accent); text-decoration:none; border-bottom:1px dotted color-mix(in srgb,var(--accent) 60%,transparent); transition:color .2s,border-color .2s; }
a:hover { color:var(--text); border-color:var(--text); }
.grain { position:fixed; inset:0; pointer-events:none; opacity:.035; z-index:5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.topbar { position:sticky; top:0; z-index:10; width:min(1180px,92vw); margin:1rem auto; padding:.8rem 1rem; display:flex; align-items:center; gap:1rem; background:color-mix(in srgb,var(--surface) 92%,transparent); border:1px solid var(--line); box-shadow:var(--shadow); backdrop-filter:blur(12px); }
.brand { display:flex; align-items:center; gap:.6rem; color:var(--text); border:0; margin-right:auto; } .brand-mark { font-size:1.35rem; color:var(--accent); } .brand strong,.brand small { display:block; } .brand small { color:var(--muted); font: .7rem "JetBrains Mono",monospace; }
nav { display:flex; gap:.9rem; } nav a { color:var(--muted); border:0; font:.75rem "JetBrains Mono",monospace; text-transform:uppercase; } nav a:hover { color:var(--accent); }
.theme-toggle { border:1px solid var(--line); background:transparent; color:var(--text); cursor:pointer; padding:.45rem .65rem; font-size:1rem; transition:background .2s,transform .2s; } .theme-toggle:hover { background:var(--accent-soft); transform:rotate(-12deg); }
.shell { width:min(1180px,92vw); margin:3rem auto; }
.intro { display:flex; justify-content:space-between; align-items:end; gap:2rem; padding:4rem 0 3rem; border-bottom:1px solid var(--line); }
.kicker,.section-label,.category { color:var(--accent); font: .7rem "JetBrains Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:1rem; font-size:clamp(2.8rem,7vw,6rem); line-height:.95; letter-spacing:-.08em; font-weight:600; } h1 em { color:var(--accent); font-style:normal; } h2 { margin:.25rem 0 0; font-size:clamp(1.6rem,3vw,2.4rem); letter-spacing:-.06em; } h3 { margin:.55rem 0 .4rem; font-size:1.2rem; } .intro-copy { color:var(--muted); }
.status-panel { min-width:210px; padding:1rem; border-left:2px solid var(--accent); background:var(--accent-soft); } .status-panel p { margin:.55rem 0; font-weight:600; } .live-dot { color:var(--accent); font: .7rem "JetBrains Mono",monospace; } .mono { color:var(--muted); font: .7rem "JetBrains Mono",monospace; }
.now-grid { display:grid; grid-template-columns:140px 1fr; gap:2rem; padding:2rem 0; border-bottom:1px solid var(--line); } .now-list { display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; } .now-item { display:flex; align-items:center; gap:.8rem; padding:1rem; border:1px solid var(--line); color:var(--text); background:var(--surface); border-bottom:1px solid var(--line); transition:transform .25s,border-color .25s,background .25s; } .now-item:hover { transform:translateY(-4px); border-color:var(--accent); background:var(--surface-2); } .now-item span:nth-child(2) { display:grid; gap:.15rem; flex:1; } .now-item small { color:var(--muted); font: .68rem "JetBrains Mono",monospace; text-transform:uppercase; } .now-item strong { font-size:.9rem; } .now-item i { color:var(--muted); font-size:.75rem; font-weight:400; } .now-icon { font-size:1.3rem; } .arrow { color:var(--accent); }
.content-grid { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:3rem; padding-top:3rem; } .main-column,.side-column { display:grid; gap:3rem; align-content:start; } .section-heading { display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:1.5rem; }
.log-entry { border-top:1px solid var(--line); padding:1.25rem 0; } .log-entry time { display:block; color:var(--accent); font:.7rem "JetBrains Mono",monospace; text-transform:uppercase; } .log-entry h3 { font-size:1.7rem; font-weight:500; } .log-body { color:var(--muted); } .log-body p { margin:.3rem 0; } .signature { color:var(--accent); margin-top:1rem !important; } details summary { display:grid; grid-template-columns:135px 1fr 20px; align-items:center; cursor:pointer; list-style:none; } details summary::-webkit-details-marker { display:none; } details summary span { font-size:1.15rem; } details summary b { color:var(--accent); text-align:right; font-weight:400; font-size:1.2rem; } details[open] summary b { transform:rotate(45deg); }
.filters { display:flex; gap:.35rem; flex-wrap:wrap; justify-content:end; } .filter { border:1px solid var(--line); background:transparent; color:var(--muted); padding:.35rem .55rem; cursor:pointer; font: .68rem "JetBrains Mono",monospace; text-transform:uppercase; } .filter:hover,.filter.active { color:var(--text); background:var(--accent-soft); border-color:var(--accent); }
.software-list { display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; } .software-card { min-height:175px; padding:1rem; border:1px solid var(--line); background:var(--surface); transition:transform .25s,border-color .25s; } .software-card:hover { transform:translateY(-5px); border-color:var(--accent); } .software-card p { color:var(--muted); font-size:.88rem; } .software-card a { font: .7rem "JetBrains Mono",monospace; }
.side-panel { padding:1.2rem; border:1px solid var(--line); background:var(--surface); } .like-list { list-style:none; padding:0; margin:1.2rem 0; } .like-list li { padding:.35rem 0; color:var(--muted); border-bottom:1px solid var(--line); font-size:.85rem; } .like-list li::before { content:"// "; color:var(--accent); } .tags { display:flex; flex-wrap:wrap; gap:.4rem; } .tags span { color:var(--muted); background:var(--surface-2); padding:.25rem .4rem; font:.65rem "JetBrains Mono",monospace; } .supporter p { margin:1rem 0 .5rem; color:var(--muted); } .supporter img { width:100px; border:0; filter:grayscale(.3); transition:filter .2s,transform .2s; } .supporter img:hover { filter:none; transform:scale(1.04); }
.banners { margin-top:3rem; padding-top:2rem; border-top:1px solid var(--line); } .banner-window { overflow:hidden; border:1px solid var(--line); padding:.7rem 0; background:var(--surface); } .banner-track { display:flex; gap:12px; width:max-content; animation:scroll 24s linear infinite; } .banner-window:hover .banner-track { animation-play-state:paused; } .banner-track img { width:88px; height:31px; image-rendering:pixelated; }
footer { width:min(1180px,92vw); margin:2rem auto; padding:1.2rem 0 3rem; display:flex; justify-content:space-between; border-top:1px solid var(--line); color:var(--muted); font-size:.8rem; }
.toast { position:fixed; right:1rem; bottom:1rem; padding:.7rem 1rem; color:var(--text); background:var(--surface-2); border:1px solid var(--accent); opacity:0; transform:translateY(1rem); transition:.25s; z-index:20; } .toast.show { opacity:1; transform:none; }
[data-reveal] { opacity:0; transform:translateY(18px); transition:opacity .6s,transform .6s; } [data-reveal].is-visible { opacity:1; transform:none; }
@keyframes scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (max-width:800px) { .topbar { flex-wrap:wrap; } nav { order:3; width:100%; justify-content:space-between; } .intro { display:block; padding-top:2rem; } .status-panel { margin-top:2rem; } .now-grid,.content-grid { grid-template-columns:1fr; gap:1rem; } .now-list,.software-list { grid-template-columns:1fr; } .section-heading { align-items:start; flex-direction:column; } .filters { justify-content:start; } details summary { grid-template-columns:100px 1fr 20px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } [data-reveal] { opacity:1; transform:none; } }