*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); background-color: var(--color-bg-base); color: var(--color-text-base); line-height: 1.6; }
h1, h2, h3, h4 { margin: 0 0 var(--space-4) 0; font-family: var(--font-display); line-height: 1.1; font-weight: 700; }
p { margin: 0 0 var(--space-4) 0; }
a { color: inherit; text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-accent); }
img { display: block; max-width: 100%; height: auto; }
ul { padding: 0; margin: 0; list-style: none; }
.wrapper { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-4); }
@media (min-width: 768px) { .wrapper { padding: 0 var(--space-8); } }
.site-header { border-bottom: 1px solid var(--color-border); position: sticky; top: 0; background-color: var(--color-bg-base); z-index: 100; }
.header-inner { display: flex; justify-content: space-between; align-items: center; height: 64px; }
.logo { display: flex; flex-direction: column; line-height: 1; }
.logo-mark { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; }
.logo-tag { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-accent); text-transform: uppercase; }
.primary-nav ul { display: flex; gap: var(--space-6); align-items: center; }
.primary-nav a { font-family: var(--font-mono); font-size: var(--text-sm); text-transform: uppercase; }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-3) var(--space-6); font-family: var(--font-mono); font-size: var(--text-sm); text-transform: uppercase; cursor: pointer; border: 1px solid transparent; }
.btn-primary { background-color: var(--color-accent); color: var(--color-bg-base); }
.btn-outline { border-color: var(--color-border); color: var(--color-text-base); }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }
@media (min-width: 768px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.section-py { padding-top: var(--space-24); padding-bottom: var(--space-24); }
.box-panel { background-color: var(--color-bg-surface); border: 1px solid var(--color-border); padding: var(--space-6); }
.tool-container { background-color: var(--color-bg-surface-elevated); border: 1px solid var(--color-border); padding: var(--space-8); }
.tool-input { width: 100%; padding: var(--space-3); background: var(--color-bg-base); border: 1px solid var(--color-border); color: var(--color-text-base); }
.tool-result { padding: var(--space-4); background: var(--color-accent-dim); border-left: 2px solid var(--color-accent); }
.tool-result-val { font-size: var(--text-3xl); font-family: var(--font-display); color: var(--color-accent); display: block; }
.site-footer { border-top: 1px solid var(--color-border); padding: var(--space-16) 0 var(--space-8) 0; background-color: var(--color-bg-surface); margin-top: var(--space-32); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-8); }
.footer-heading { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-4); display: block; }
.quick-links a { display: inline-block; padding: 2px 6px; background: var(--color-bg-base); border: 1px solid var(--color-border); font-size: var(--text-xs); margin: 2px; }
.text-accent { color: var(--color-accent); }