/* Fælles udtryk: papir, blæk, kobolt og highlighter-gul */
:root{
  --paper:#eef0f4;--ink:#11131a;--muted:#5a5f70;--card:#fff;
  --accent:#2f45ff;--on-accent:#fff;--mark:#ffe14d;--sh:#11131a;--r:8px;
  --font:"Avenir Next","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --display:"Avenir Next","Segoe UI Variable Display","Arial Black",system-ui,sans-serif;
  color-scheme:light}
@media(prefers-color-scheme:dark){:root{
  --paper:#0f1220;--ink:#e9ebf7;--muted:#9aa0bd;--card:#181c32;
  --accent:#8c9bff;--on-accent:#0f1220;--sh:#8c9bff;color-scheme:dark}}

/* Basis (lav specificitet, så værktøjers egen CSS vinder) */
:where(*){box-sizing:border-box}
:where(body){margin:0;min-height:100vh;background:var(--paper);color:var(--ink);font-family:var(--font);line-height:1.6}
:where(h1,h2,h3){font-family:var(--display);line-height:1.05;letter-spacing:-.03em;font-weight:800}
:where(a){color:var(--accent);text-underline-offset:.2em}
:where(button,.btn){font:inherit;font-weight:700;cursor:pointer;color:var(--on-accent);background:var(--accent);
  border:2px solid var(--ink);border-radius:var(--r);padding:.55em 1.1em;box-shadow:3px 3px 0 var(--sh);
  transition:transform .12s,box-shadow .12s}
:where(button,.btn):hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--sh)}
:where(button,.btn):active{transform:translate(2px,2px);box-shadow:0 0 0 var(--sh)}
:where(input,textarea,select){font:inherit;color:var(--ink);background:var(--card);border:2px solid var(--ink);
  border-radius:var(--r);padding:.55em .8em;max-width:100%}
:where(a,button,input,textarea,select):focus-visible{outline:3px solid var(--mark);outline-offset:2px}

/* Tilbage-knap, der indsættes automatisk i alle værktøjer */
.tk-back{position:fixed;top:max(12px,env(safe-area-inset-top));left:12px;z-index:9999;
  font:700 14px/1 var(--font);color:var(--ink);background:var(--mark);text-decoration:none;
  border:2px solid var(--ink);border-radius:999px;padding:9px 14px;box-shadow:3px 3px 0 var(--sh)}
.tk-back:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--sh)}

/* Forside */
.tk-wrap{max-width:1080px;margin:0 auto;padding:clamp(32px,8vw,88px) 20px 48px}
.tk-hero{margin-bottom:clamp(32px,6vw,64px)}
.tk-hero h1{margin:0 0 16px;font-size:clamp(3rem,12vw,7.5rem);font-weight:900;letter-spacing:-.05em;line-height:.9}
.tk-hero p{margin:0;max-width:34ch;font-size:clamp(1.05rem,2.4vw,1.3rem);color:var(--muted)}
.tk-grid{list-style:none;margin:0;padding:0;display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.tk-card{display:flex;flex-direction:column;gap:14px;height:100%;padding:20px;text-decoration:none;color:var(--ink);
  background:var(--card);border:2px solid var(--ink);border-radius:var(--r);box-shadow:5px 5px 0 var(--sh);
  transition:transform .15s,box-shadow .15s}
.tk-card:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--sh)}
.tk-card:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--sh)}
.tk-logo{width:64px;height:64px;display:grid;place-items:center;font-size:34px;background:var(--mark);color:#11131a;
  border:2px solid var(--ink);border-radius:var(--r);overflow:hidden}
.tk-logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.tk-card h2{margin:0;font-size:1.35rem;background:linear-gradient(var(--mark),var(--mark)) 0 92%/0 .38em no-repeat;
  transition:background-size .25s;align-self:flex-start}
.tk-card:hover h2{background-size:100% .38em}
.tk-card:hover h2{color:var(--ink)}
.tk-card p{margin:0;color:var(--muted);font-size:.95rem}
.tk-empty{font-size:1.1rem}
.tk-foot{margin-top:56px;font-size:.9rem}.tk-foot a{color:var(--muted)}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}