.site-tools {
display: flex;
align-items: center;
gap: var(--space-md);
margin-left: auto;
}
.site-header {
position: sticky;
top: 8px;
z-index: 200;
width: min(calc(100% - 2 * var(--page-gutter)), 1540px);
min-height: 66px;
margin: var(--space-md) auto var(--space-md);
padding: var(--space-md) var(--space-lg);
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: var(--space-xl);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent 58%),
color-mix(in srgb, var(--surface-solid) 84%, transparent);
box-shadow: var(--elevation-raised);
backdrop-filter: blur(22px) saturate(160%);
-webkit-backdrop-filter: blur(22px) saturate(160%);
}
.site-brand {
justify-self: start;
flex: none;
min-width: 0;
display: inline-flex;
align-items: center;
gap: var(--space-lg);
color: var(--text);
text-decoration: none;
}
.site-brand-mark {
width: 40px;
height: 40px;
display: grid;
place-items: center;
flex: none;
border-radius: var(--radius-md);
color: #fff;
background: var(--gradient);
box-shadow: 0 7px 24px color-mix(in srgb, var(--accent) 32%, transparent);
}
.site-brand-mark svg {
width: 22px;
height: 22px;
}
.site-brand-copy {
display: grid;
}
.site-brand strong {
font-size: var(--font-size-md);
line-height: 1.2;
letter-spacing: -0.01em;
}
.site-brand small {
margin-top: var(--space-2xs);
color: var(--text-faint);
font-size: var(--font-size-2xs);
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.site-nav {
min-width: 0;
display: flex;
align-items: center;
gap: var(--space-xl);
justify-content: center;
justify-self: center;
}
.site-nav-link {
position: relative;
min-height: var(--control-h-compact);
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
padding: var(--space-xs) 0;
border: 0;
border-radius: 0;
color: var(--text-dim);
background: transparent;
font: inherit;
font-size: var(--font-size-2xs);
font-weight: 700;
line-height: 1;
text-decoration: none;
white-space: nowrap;
}
.site-nav-link {
cursor: pointer;
transition: color var(--motion-base) var(--ease-out);
}
.site-nav-link:hover,
.site-nav-link:focus-visible {
color: var(--text);
}
.site-nav-link::after {
content: "";
position: absolute;
right: 0;
bottom: 1px;
left: 0;
height: 1px;
background: var(--accent-2);
transform: scaleX(0);
transform-origin: right;
transition: transform var(--motion-base) var(--ease-out);
}
.site-nav-link:hover::after,
.site-nav-link:focus-visible::after,
.site-nav-link.active::after {
transform: scaleX(1);
transform-origin: left;
}
.site-nav-link.active {
color: var(--accent-2-text);
}
.site-theme {
font-size: var(--font-size-xs);
width: var(--control-h-compact);
height: var(--control-h-compact);
min-width: var(--control-h-compact);
display: grid;
place-items: center;
flex: none;
border: 1px solid var(--border);
border-radius: var(--radius-md);
color: var(--text-dim);
background: var(--surface);
cursor: pointer;
transition: background var(--motion-base), border-color var(--motion-base), color var(--motion-base),
transform var(--motion-base);
}
.site-theme:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
.site-theme:hover {
border-color: var(--border-strong);
background: var(--surface-hover);
color: var(--text);
transform: translateY(-1px);
}
}
.site-theme svg {
width: 17px;
height: 17px;
}
[data-theme="dark"] .site-theme-moon,
[data-theme="light"] .site-theme-sun {
display: none;
}
.app {
position: relative;
z-index: 1;
width: min(calc(100% - 2 * var(--page-gutter)), 1540px);
height: calc(100vh - 100px);
min-height: 620px;
margin: 0 auto var(--space-xl);
display: grid;
grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
gap: var(--space-xl);
}
.sidebar {
width: var(--sidebar-w);
min-width: var(--sidebar-w);
max-height: 100%;
overflow-y: auto;
overflow-x: hidden;
padding: var(--space-2xl) var(--space-xl) var(--space-2xl);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.04), transparent 40%),
color-mix(in srgb, var(--surface-solid) 87%, transparent);
box-shadow: var(--elevation-raised);
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
}
.main {
min-width: 0;
padding: var(--space-lg) var(--space-md) var(--space-4xl) var(--space-md);
overflow-y: auto;
max-height: 100%;
}
.sidebar, .main {
scrollbar-width: thin;
scrollbar-color: var(--border-strong) transparent;
}
.sidebar::-webkit-scrollbar, .main::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb, .main::-webkit-scrollbar-thumb {
background: var(--border-strong);
border-radius: var(--radius-xs);
}
.control-deck-intro {
margin-bottom: var(--space-xl);
padding: var(--space-2xs) var(--space-xs) var(--space-xl);
border-bottom: 1px solid var(--border);
}
.control-deck-intro > span {
color: var(--accent-2-text);
font-size: var(--font-size-2xs);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.14em;
}
.control-deck-intro h2 {
margin-top: var(--space-sm);
font-size: var(--font-size-xl);
line-height: 1.05;
letter-spacing: -0.035em;
}
.control-deck-intro p {
margin-top: var(--space-md);
color: var(--text-dim);
font-size: var(--font-size-2xs);
line-height: 1.55;
}