/* Direction contract lives in index.html, first child of . */
@font-face {
font-family: "Silkscreen";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/silkscreen-400.woff2") format("woff2");
}
@font-face {
font-family: "Silkscreen";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("fonts/silkscreen-700.woff2") format("woff2");
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/jetbrains-mono-400.woff2") format("woff2");
}
:root {
color-scheme: light dark;
--ground: #f2ede2;
--ink: #15130f;
--muted: #5b5648;
--rule: #15130f;
--accent: #c1272a;
--accent-ink: #f2ede2;
--rule-w: 2px;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--ground: #16140f;
--ink: #f2ede2;
--muted: #a39b85;
--rule: #f2ede2;
--accent: #e2453f;
--accent-ink: #16140f;
}
}
:root[data-theme="dark"] {
--ground: #16140f;
--ink: #f2ede2;
--muted: #a39b85;
--rule: #f2ede2;
--accent: #e2453f;
--accent-ink: #16140f;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--ground);
color: var(--ink);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.5;
}
.mono {
font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
.bitmap {
font-family: "Silkscreen", "JetBrains Mono", ui-monospace, monospace;
image-rendering: pixelated;
}
main {
max-width: 960px;
margin: 0 auto;
padding: 1.25rem 1.25rem 4rem;
}
/* ---- header ---- */
.site-header {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem;
padding: 1.25rem 0;
border-bottom: var(--rule-w) solid var(--rule);
margin-bottom: 1.5rem;
}
.wordmark {
font-size: clamp(1.3rem, 3vw, 1.7rem);
letter-spacing: 0.02em;
text-transform: uppercase;
}
.tagline {
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
}
/* ---- hero ---- */
.hero {
border: var(--rule-w) solid var(--rule);
padding: clamp(1.25rem, 4vw, 2.5rem);
margin-bottom: 1.5rem;
position: relative;
overflow: hidden;
}
.hero-grid {
position: relative;
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: clamp(1.5rem, 4vw, 3rem);
}
.hero-headline {
font-size: clamp(2.8rem, 9vw, 6rem);
line-height: 0.9;
text-transform: uppercase;
margin: 0 0 1.5rem;
letter-spacing: 0.01em;
}
.hero-claim {
max-width: 34rem;
font-size: clamp(1rem, 1.6vw, 1.15rem);
color: var(--muted);
margin: 0 0 1.5rem;
}
.tag-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.tag {
display: inline-flex;
align-items: center;
gap: 0.4rem;
border: 1px solid var(--rule);
padding: 0.3rem 0.6rem;
font-size: 0.68rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.tag::before {
content: "";
width: 6px;
height: 6px;
background: var(--accent);
flex: none;
}
.btn-primary,
.btn-secondary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.3rem;
font-size: 0.85rem;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
border: var(--rule-w) solid var(--rule);
}
.btn-primary {
background: var(--accent);
color: var(--accent-ink);
border-color: var(--accent);
font-weight: 700;
}
.btn-primary:disabled {
opacity: 0.55;
cursor: default;
}
.btn-secondary {
background: transparent;
color: var(--ink);
}
.dotfield {
position: absolute;
inset: 0;
background-image: radial-gradient(circle, var(--ink) 1.1px, transparent 1.6px);
background-size: 7px 7px;
-webkit-mask-image: radial-gradient(circle at 88% 12%, black 0%, black 12%, transparent 65%);
mask-image: radial-gradient(circle at 88% 12%, black 0%, black 12%, transparent 65%);
opacity: 0.4;
pointer-events: none;
}
/* ---- how it works ---- */
.modules {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
border: var(--rule-w) solid var(--rule);
margin-bottom: 1.5rem;
}
.module {
padding: 1.5rem;
border-left: var(--rule-w) solid var(--rule);
}
.module:first-child { border-left: none; }
.module h3 {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.6rem;
margin: 0 0 0.6rem;
font-size: 1.05rem;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.module-tag {
font-size: 0.65rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
font-weight: 400;
border: 1px solid var(--rule);
padding: 0.1rem 0.4rem;
}
.module p {
margin: 0;
color: var(--muted);
font-size: 0.92rem;
}
.module code {
font-family: "JetBrains Mono", ui-monospace, monospace;
background: var(--ink);
color: var(--ground);
padding: 0.05rem 0.3rem;
font-size: 0.85em;
}
/* ---- tool ---- */
.hero-tool {
border-left: var(--rule-w) solid var(--rule);
padding-left: clamp(1.5rem, 4vw, 3rem);
position: relative;
}
.dropzone {
display: flex;
align-items: center;
justify-content: center;
min-height: 7rem;
border: var(--rule-w) dashed var(--rule);
cursor: pointer;
text-align: center;
padding: 1rem;
margin-bottom: 1.25rem;
transition: background 0.15s ease;
font-family: "JetBrains Mono", ui-monospace, monospace;
text-transform: uppercase;
font-size: 0.85rem;
letter-spacing: 0.04em;
}
.dropzone.dragover {
background: color-mix(in srgb, var(--accent) 10%, transparent);
border-style: solid;
}
.dropzone input[type="file"] {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
overflow: hidden;
}
.filters {
border-top: 1px solid var(--rule);
padding-top: 1.25rem;
margin-bottom: 1.25rem;
}
.filters summary {
cursor: pointer;
font-family: "JetBrains Mono", ui-monospace, monospace;
text-transform: uppercase;
font-size: 0.78rem;
letter-spacing: 0.1em;
color: var(--muted);
}
.filters[open] summary { margin-bottom: 1rem; }
.filters-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 0.9rem;
}
.filters-grid label {
display: flex;
flex-direction: column;
gap: 0.35rem;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 0.72rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--muted);
}
.filters-grid label.checkbox {
flex-direction: row;
align-items: center;
gap: 0.5rem;
}
input[type="number"],
select {
padding: 0.5rem 0.6rem;
border: 1px solid var(--rule);
background: var(--ground);
color: var(--ink);
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 0.85rem;
}
button { font: inherit; }
#status {
min-height: 1.2rem;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 0.82rem;
color: var(--muted);
margin-top: 1rem;
}
#status.error { color: var(--accent); }
/* ---- results ---- */
.stat-line {
font-size: 0.78rem;
letter-spacing: 0.02em;
color: var(--muted);
font-variant-numeric: tabular-nums;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
padding: 0.6rem 0;
margin: 0 0 1.5rem;
}
.stat-line strong {
color: var(--ink);
font-weight: 700;
}
.results-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.75rem;
}
.results-header h2 {
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0;
}
.table-wrap {
border: var(--rule-w) solid var(--rule);
overflow-x: auto;
margin-bottom: 1.5rem;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 0.88rem;
}
th, td {
text-align: left;
padding: 0.55rem 0.8rem;
white-space: nowrap;
}
thead th {
background: var(--ink);
color: var(--ground);
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 0.68rem;
letter-spacing: 0.08em;
text-transform: uppercase;
position: sticky;
top: 0;
}
tbody tr {
border-top: 1px solid var(--rule);
}
tbody td.num {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-variant-numeric: tabular-nums;
color: var(--muted);
}
tbody td.word {
font-weight: 700;
}
tbody td.example {
color: var(--muted);
font-style: italic;
}
.pos-tag {
display: inline-block;
border: 1px solid var(--rule);
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 0.65rem;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 0.1rem 0.4rem;
color: var(--muted);
}
/* ---- footer ---- */
.site-footer {
border-top: var(--rule-w) solid var(--rule);
padding-top: 1.25rem;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 0.72rem;
color: var(--muted);
letter-spacing: 0.02em;
}
@media (max-width: 860px) {
.hero-grid { grid-template-columns: 1fr; }
.hero-tool {
border-left: none;
padding-left: 0;
border-top: var(--rule-w) solid var(--rule);
padding-top: 1.5rem;
margin-top: 1.5rem;
}
.dotfield {
-webkit-mask-image: radial-gradient(circle at 85% 90%, black 0%, black 14%, transparent 60%);
mask-image: radial-gradient(circle at 85% 90%, black 0%, black 14%, transparent 60%);
}
}
@media (max-width: 640px) {
.modules { grid-template-columns: 1fr; }
.module { border-left: none; border-top: var(--rule-w) solid var(--rule); }
.module:first-child { border-top: none; }
}