/* ===== Design tokens ===== */
:root{
  --bg:hsl(0 0% 100%);
  --surface:hsl(0 0% 98%);
  --text:hsl(220 20% 18%);
  --muted:hsl(220 10% 45%);
  --primary:hsl(260 70% 55%);
  --primary-weak:hsl(260 70% 96%);
  --accent:hsl(200 80% 50%);
  --border:hsl(220 15% 90%);
  --ok:hsl(140 65% 38%);
  --warn:hsl(30 90% 45%);
  --err:hsl(0 80% 50%);
  --radius:20px;
  --shadow:0 8px 30px rgba(0,0,0,.08);
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
html[data-theme="dark"]{
  --bg:hsl(220 15% 10%);
  --surface:hsl(220 15% 12%);
  --text:hsl(0 0% 98%);
  --muted:hsl(220 10% 70%);
  --primary:hsl(260 70% 62%);
  --primary-weak:hsl(260 70% 16%);
  --accent:hsl(200 80% 60%);
  --border:hsl(220 10% 26%);
  --shadow:0 8px 30px rgba(0,0,0,.35);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text); font:16px/1.5 var(--font);
}
img{max-width:100%; height:auto}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px; margin:0 auto; padding:24px}
.grid{display:grid; gap:16px}
.grid.cards{grid-template-columns:repeat(12,minmax(0,1fr)); gap:20px}
.cards>[role="listitem"]{grid-column:span 4}
@media (max-width:900px){.cards>[role="listitem"]{grid-column:span 6}}
@media (max-width:640px){.cards>[role="listitem"]{grid-column:span 12}}

.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:20px;
}
.section-head{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:12px}
.controls{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{background:var(--primary-weak); color:var(--text); border:1px solid var(--border); padding:6px 10px; border-radius:999px; display:inline-flex; gap:6px; align-items:center}
.chip button{border:none;background:transparent; cursor:pointer}
.badge{padding:2px 8px; border-radius:999px; font-size:12px; border:1px solid var(--border); color:var(--muted)}
.muted{color:var(--muted)}
.warn{color:var(--warn)}
.ok{color:var(--ok)}

.site-header{position:relative; overflow:hidden}
.hero-bg{position:absolute; inset:0; pointer-events:none}
.hero{padding:64px 24px 32px}
.brand{display:flex; align-items:center; gap:10px}
.logo{border-radius:12px}
.main-nav{display:flex; align-items:center; gap:10px}
.navlink{padding:8px 10px; border-radius:10px}
.navlink:focus{outline:2px solid var(--accent); outline-offset:2px}

.btn{border:1px solid var(--border); background:var(--surface); padding:10px 14px; border-radius:12px; cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--primary); color:white; border-color:transparent}
.btn.ghost{background:transparent}
.btn.small{font-size:14px; padding:6px 10px}
.btn.close{position:absolute; right:10px; top:10px}

input, select{
  background:var(--bg); border:1px solid var(--border); padding:9px 10px; border-radius:10px; color:var(--text);
}
input[type="range"]{accent-color:var(--accent)}

.hero h1{font-size:clamp(28px,4vw,48px); margin:0}
.baseline{color:var(--muted); margin:.5rem 0 1rem}

.card .panel{background:var(--bg); border:1px dashed var(--border); border-radius:16px; padding:14px}
.chart{background:var(--surface); border:1px dashed var(--border); border-radius:16px; padding:10px}
.timeline{background:var(--bg); border:1px solid var(--border); border-radius:16px; padding:10px; min-height:160px; overflow:auto}
.panel-body p{margin:.25rem 0}

.tabpane{padding:12px 0}
.tabs{display:flex; gap:8px; margin-bottom:6px}
.tab{border:1px solid var(--border); background:var(--bg); padding:8px 12px; border-radius:10px; cursor:pointer}
.tab.active{background:var(--primary); color:white; border-color:transparent}
.hidden{display:none}

.card-item{
  background:var(--bg); border:1px solid var(--border); border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:6px;
}
.card-item header{display:flex; align-items:center; justify-content:space-between; gap:10px}
.card-item .meta{display:flex; gap:8px; flex-wrap:wrap}
.card-item .actions{display:flex; gap:8px; margin-top:8px}
.svg-dino{width:100%; height:90px}

dialog{border:none; border-radius:20px; padding:0; width:min(800px,90vw); }
dialog::backdrop{background:rgba(0,0,0,.35)}
dialog article{padding:24px 18px}
dialog h3{margin-top:0}
.table{width:100%; border-collapse:collapse; font-size:14px}
.table th,.table td{border-bottom:1px solid var(--border); padding:6px 8px; text-align:left}
.kbd{font-family:var(--mono); font-size:12px; background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:2px 6px}

.note{background:var(--surface); padding:8px 12px; border-radius:12px; border:1px solid var(--border)}

.toast{position:fixed; right:12px; bottom:12px; background:var(--text); color:var(--bg); padding:10px 12px; border-radius:12px; opacity:0; transform:translateY(8px); transition:.2s}
.toast.show{opacity:1; transform:translateY(0)}

.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; background:var(--text); color:var(--bg); padding:8px 10px; border-radius:10px}

.sr-only{position:absolute; left:-9999px}

/* Focus visible */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}