:root { --black:#12283a; --papper:#f7f8f6; --ytvatten:#e8f1f7; --ytvatten-djup:#dce9f2; --grundvatten:#106a99; --djupvatten:#0c4668; --moran:#d9dcd6; --oxid:#9c3b2e; --radie:6px; }
* { box-sizing: border-box; }
body { margin:0; background:var(--papper); color:color-mix(in srgb, var(--black) 88%, transparent); font:16px/1.5 system-ui, sans-serif; }
header { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; padding:.6rem 1rem; background:var(--djupvatten); color:var(--papper); font-family:ui-monospace, monospace; font-size:.8rem; }
header nav { display:flex; flex-wrap:wrap; gap:.8rem; flex:1; }
header a { color:var(--papper); }
header a[aria-current] { text-decoration-thickness:3px; }
header form { display:flex; gap:.5rem; align-items:center; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline:3px solid var(--grundvatten); outline-offset:2px; }
header a:focus-visible, header button:focus-visible { outline-color:var(--moran); }
main { max-width:72rem; margin:0 auto; padding:1rem 16px 3rem; }
h1 { font-size:1.5rem; } h2 { font-size:1.15rem; margin-top:2rem; }
a { color:var(--grundvatten); }
table { width:100%; border-collapse:collapse; font-size:.92rem; }
th, td { text-align:left; vertical-align:top; padding:.4rem .5rem; border-bottom:1px solid var(--moran); }
th { font-family:ui-monospace, monospace; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; }
tr:nth-child(even) td { background:var(--ytvatten); }
.card { background:var(--ytvatten); border-radius:var(--radie); padding:.8rem 1rem; margin:.6rem 0; }
.msg { padding:.5rem .7rem; border-radius:var(--radie); margin:.4rem 0; white-space:pre-wrap; }
.msg.user { background:var(--ytvatten-djup); }
.msg.assistant { background:#fff; border:1px solid var(--moran); }
.meta, .mono { font-family:ui-monospace, monospace; font-size:.78rem; color:color-mix(in srgb, var(--black) 72%, transparent); }
.warn { color:var(--oxid); font-weight:600; }
button { font:inherit; padding:.35rem .8rem; border:0; border-radius:var(--radie); background:var(--grundvatten); color:#fff; cursor:pointer; }
button.secondary { background:transparent; color:var(--grundvatten); border:1px solid var(--grundvatten); }
header button { background:transparent; border:1px solid var(--papper); }
form.inline { display:inline; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(12rem, 1fr)); gap:.8rem; }
.num { font-family:ui-monospace, monospace; font-size:1.6rem; }