:root { --bg:#fff; --text:#0f172a; --muted:#475569; --card:#fff; --border:#e2e8f0; --primary:#1394ef; --highlight:#f8ff14; }
:root.dark { --bg:#0b1220; --text:#f8fafc; --muted:#cbd5e1; --card:#0f172a; --border:#1f2937; }
* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body { font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji; background:var(--bg); color:var(--text); line-height:1.6; }
.container { max-width:1100px; margin:0 auto; padding:1rem; }
.header { position:sticky; top:0; z-index:20; backdrop-filter: blur(6px); background: color-mix(in oklab, var(--bg) 80%, transparent); border-bottom:1px solid var(--border); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.75rem 1rem; }
.brand { display:flex; align-items:center; gap:.5rem; font-weight:600; }
.actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.button { appearance:none; border:1px solid var(--border); background:var(--card); color:var(--text); padding:.5rem .8rem; border-radius:.75rem; font-size:.9rem; cursor:pointer; }
.button.primary { background: var(--primary); color:#fff; border-color: color-mix(in oklab, var(--primary) 80%, black); }
.button.ghost { background:transparent; }
.button:focus { outline:2px solid var(--primary); outline-offset:2px; }

.hero { padding: 2rem 1rem; }
.grid { display:grid; gap:1rem; grid-template-columns: 1fr; }
@media (min-width: 880px) { .grid { grid-template-columns: 1.2fr 0.8fr; } }

.card { background:var(--card); border:1px solid var(--border); border-radius:1rem; padding:1rem; box-shadow: 0 1px 0 rgba(0,0,0,.03); }
.badge { display:inline-block; padding:.25rem .6rem; border-radius:999px; border:1px solid var(--border); margin:.2rem .25rem 0 0; background: color-mix(in oklab, var(--card) 90%, var(--primary) 10%); font-size:.8rem; }
.kv { display:grid; grid-template-columns: repeat(4,1fr); gap:.6rem; }
.kv .card { text-align:center; }
.kv .value { font-size:1.25rem; font-weight:700; }
.kv .label { font-size:.75rem; color:var(--muted); }

.tabs { margin-top:1rem; }
.tabbar { display:grid; grid-template-columns: repeat(5,1fr); gap:.4rem; background: color-mix(in oklab, var(--primary) 8%, var(--card) 92%); padding:.35rem; border-radius: .9rem; }
.tabbar button { border-radius:.7rem; border:1px solid transparent; padding:.45rem .6rem; font-size:.9rem; cursor:pointer; background:transparent; color:var(--text); }
.tabbar button[aria-selected="true"] { background:var(--card); border-color:var(--border); box-shadow: 0 1px 0 rgba(0,0,0,.05); }
.tabpanel { margin-top: .8rem; }
/* Add extra top margin for tab panels to improve readability and spacing below the tab bar */
.tabpanel {
	margin-top: 1.5rem;
}
@media (max-width: 480px) {
	.tabpanel {
		margin-top: 1.2rem;
	}
}

.timeline { display:flex; flex-direction:column; gap:.9rem; }
.entry .meta { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:space-between; color:var(--muted); font-size:.9rem; }
.entry ul { margin:.4rem 0 .2rem 1.25rem; padding:0; }
.entry h4 { margin: .1rem 0; }

.accordion { display:flex; flex-direction:column; gap:.8rem; }
.accordion details { border:1px solid var(--border); border-radius:.75rem; padding:.6rem .8rem; background:var(--card); }
.accordion summary { cursor:pointer; font-weight:600; outline:none; }
.accordion summary::-webkit-details-marker { display:none; }

.row { display:grid; grid-template-columns: 1fr; gap:.8rem; }
@media (min-width: 640px) { .row { grid-template-columns: 1fr 1fr; } }
.input, .textarea { width:100%; padding:.6rem .75rem; border-radius:.6rem; border:1px solid var(--border); background:var(--card); color:var(--text); }
.textarea { min-height: 120px; }
.muted { color: var(--muted); font-size:.9rem; }

.footer { border-top:1px solid var(--border); padding: 1.25rem 1rem; margin-top:2rem; }
a.inline { color: var(--primary); text-decoration: none; }
a.inline:hover { text-decoration: underline; }

.mobile-stack { display:flex; gap:.5rem; flex-wrap:wrap; }

.blobs::before, .blobs::after { content:""; position:fixed; width:340px; height:340px; border-radius:50%; filter: blur(60px); opacity:.22; z-index:-1; pointer-events:none; }
.blobs::before { right:-8%; top:-6%; background:#1394ef; }
.blobs::after  { left:-8%; bottom:-8%; background:#f8ff14; opacity:.16; }

h1 { font-size:clamp(1.4rem, 3.5vw, 2.2rem); margin:.2rem 0; }
h2 { font-size:clamp(1.1rem, 3vw, 1.5rem); margin:.6rem 0 .4rem; }
h3 { font-size:1.05rem; }
small { font-size:.85rem; color:var(--muted); }

/* Mobile improvements: further enhancements for <480px */
@media (max-width: 480px) {
	.container {
		padding: 0.5rem;
		max-width: 100vw;
	}
	.header-inner {
		flex-direction: column;
		align-items: stretch;
		gap: 0.5rem;
		padding: 0.5rem 0.5rem;
		width: 100%;
	}
	.actions {
		flex-direction: column;
		align-items: stretch;
		gap: 0.3rem;
	}
	.button {
		font-size: 0.85rem;
		padding: 0.4rem 0.6rem;
		width: 100%;
		box-sizing: border-box;
	}
	.hero {
		padding: 1rem 0.5rem;
	}
	.card {
		padding: 0.7rem;
		margin-bottom: 0.7rem;
	}
	.kv {
		grid-template-columns: 1fr 1fr;
		gap: 0.4rem;
	}
	.kv .value {
		font-size: 1rem;
	}
	.kv .label {
		font-size: 0.7rem;
	}
	.tabbar {
		grid-template-columns: 1fr 1fr;
		gap: 0.2rem;
		padding: 0.2rem;
		overflow-x: auto;
		white-space: nowrap;
	}
	.tabbar button {
		font-size: 0.8rem;
		padding: 0.3rem 0.4rem;
		min-width: 90px;
	}
	.badge {
		font-size: 0.75rem;
		padding: 0.2rem 0.4rem;
		margin: 0.15rem 0.15rem 0 0;
		white-space: nowrap;
		overflow-x: auto;
		display: inline-block;
	}
	.timeline {
		gap: 0.5rem;
	}
	.entry .meta {
		font-size: 0.8rem;
		gap: 0.3rem;
	}
	.accordion details {
		padding: 0.4rem 0.5rem;
	}
	.row {
		gap: 0.5rem;
	}
	h1 {
		font-size: 1.3rem;
	}
	h2 {
		font-size: 1.1rem;
	}
	h3 {
		font-size: 1rem;
	}
	small {
		font-size: 0.8rem;
	}
	body {
		overflow-x: hidden;
	}
}