:root{--bg:var(--direktly-bg);--panel:var(--direktly-surface-1);--ink:var(--direktly-ink);--muted:var(--direktly-muted);--accent:var(--direktly-accent-text);--docs-line:color-mix(in srgb,var(--ink) 12%,transparent);color-scheme:dark}
:root[data-theme=light]{color-scheme:light}
body{font-family:var(--font-sans)}
header [role=radio]{border:0;padding:0;background:none;cursor:pointer}
header [role=radio]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.nav-label{display:flex;align-items:center;gap:8px}
.nav-label svg{width:15px;height:15px;stroke-width:1.75;color:var(--muted)}
.nav-label{font-size:13px;font-weight:500;letter-spacing:0;line-height:1.5;gap:10px}
aside a{padding-left:35px}
@media(max-width:460px){header small{display:none}header nav a:last-child{font-size:0;gap:0;width:32px;height:32px;justify-content:center}header nav a:last-child svg{width:16px;height:16px}header nav>a:first-of-type{display:none}}
header,aside,.card,footer,.guide-outline,.mobile-guides{border-color:var(--docs-line)}
aside{height:auto;position:static;overflow:visible;scrollbar-width:auto}
html{scrollbar-width:thin;scrollbar-color:var(--muted) transparent}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--muted);border-radius:8px}
::-webkit-scrollbar-button{display:none}
.nav-label,section p{color:var(--ink)}
input{background:var(--panel);border-color:var(--docs-line)}
.card span{color:var(--muted);line-height:0}
.card svg,footer svg,header svg{width:16px;height:16px;stroke-width:1.75;vertical-align:middle}
header nav a:last-child{display:inline-flex;align-items:center;gap:8px;border-color:var(--docs-line)}
header small{border-color:var(--docs-line)}
.appearance{display:flex;align-items:center;gap:7px;position:relative;color:var(--muted)}
.appearance select{appearance:none;background:transparent;border:0;color:var(--ink);font:inherit;cursor:pointer;padding:8px 20px 8px 0}
.appearance>svg:last-child{position:absolute;right:0;pointer-events:none;width:12px}
.appearance option{background:var(--bg);color:var(--ink)}
.appearance select:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:5px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.brand-light{display:none}
html[data-theme=light] .brand-dark{display:none}
html[data-theme=light] .brand-light{display:block}
@media(max-width:800px){header nav{gap:10px}header>a:first-child{gap:8px}header small{padding-left:8px}.appearance>svg:first-child{display:none}header nav a:last-child{padding:6px 8px}header img.wordmark{width:80px}header{padding:0 16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Control states share the app's theme tokens in all three appearances. */
a,button,summary,input{transition:background-color 120ms ease-out,color 120ms ease-out,outline-color 120ms ease-out}
header nav>a,footer a,.guide-outline a{border-radius:8px;padding:6px 9px}
header nav>a:hover,footer a:hover,.guide-outline a:hover,.mobile-guides nav>a:hover{background:var(--direktly-surface-1);color:var(--ink)}
aside a:hover,.mobile-guides nav>a:hover{background:var(--direktly-surface-1);color:var(--ink)}
aside a[aria-current=page]{background:var(--direktly-surface-2);color:var(--accent);font-weight:500}
.card{padding-left:12px;padding-right:32px;border-radius:10px}
.card:hover{background:var(--direktly-surface-1)}
.card span{right:10px}
header nav>a:active,aside a:active,.card:active,footer a:active,.guide-outline a:active,.mobile-guides nav>a:active{background:var(--direktly-surface-2);color:var(--accent)}
header [role=radio]:hover{background:var(--direktly-surface-2)!important}
header [role=radio]:active{background:var(--direktly-surface-3)!important}
header [role=radio][aria-checked=true]{background:var(--direktly-surface-2)!important}
:where(a,button,summary,input):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
input:hover{border-color:var(--muted)}
input:focus-visible{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:3px}
button:disabled,input:disabled{opacity:.45;cursor:not-allowed}
button:disabled:hover,button:disabled:active{background:transparent!important}
.mobile-guides summary{border-radius:8px;padding:7px 8px;margin:-7px -8px;cursor:pointer}
.mobile-guides summary:hover,.mobile-guides[open] summary{background:var(--direktly-surface-1);color:var(--ink)}
.mobile-guides summary:active{background:var(--direktly-surface-2)}
.mobile-guides nav>a{padding:8px 10px;border-radius:8px}
@media(prefers-reduced-motion:reduce){a,button,summary,input{transition:none}}

/* Filled controls; no outlined button treatment. */
header nav>a:last-child{border:0;background:var(--direktly-surface-1)}
header nav>a:last-child:hover{background:var(--direktly-surface-2)}
header nav>a:last-child:active{background:var(--direktly-surface-3)}

.card{border:0}

.docs-search{position:relative;max-width:560px;margin:8px 0 22px}.docs-search>svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke-width:1.75;color:var(--muted);pointer-events:none}.docs-search input{margin:0;padding-left:40px;max-width:none}.docs-search:focus-within>svg{color:var(--accent)}