/* Every color is sampled from Brian Gratwicke's photo "Army Ants Genus: Eciton"
   (Wikimedia Commons, CC BY 2.0): Eciton workers carrying white brood over moss and
   dark soil. Soil for the page, brood for the text, a lit ant for the controls, soil in
   the light for the buttons and lines, and moss for focus rings. The 3D scene keeps its
   own photographic colors. */
:root {
    --bg: #221a08;           /* soil in shade */
    --text: #eee1d6;         /* brood */
    --text-2: rgba(238, 225, 214, 0.78);
    --text-3: rgba(238, 225, 214, 0.55);
    --soil: #3a2916;         /* soil in the light: buttons and lines */
    --accent: #d4834e;       /* a lit ant: controls */
    --accent-ink: #221a08;
    --moss: #9aa23b;         /* focus rings */
    --overlay: rgba(34, 26, 8, 0.82);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --text-col: 648px;
    --page-col: 1100px;
    color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 17px/1.65 var(--font);
}

a { color: inherit; text-underline-offset: 2px; }

nav.site, .title, .prose { max-width: var(--text-col); margin-left: auto; margin-right: auto; }

nav.site { max-width: var(--page-col); padding: 14px 16px 0; font-size: 13px; }
nav.site a { color: var(--text-3); text-decoration: none; }
nav.site a:hover { color: var(--text); }

.title { padding: 48px 16px 24px; }
.title h1 { margin: 0 0 10px; font-size: clamp(34px, 6vw, 48px); line-height: 1.1; }
.description { margin: 0; font-size: 20px; line-height: 1.5; color: var(--text-2); }

/* --- Demo */

.demo { max-width: var(--page-col); margin: 0 auto; padding: 0 16px; }

.viewport {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--bg);
    border-radius: 6px;
    overflow: hidden;
}

#view { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#view:active { cursor: grabbing; }

.status, .note {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    border-radius: 4px;
    background: var(--overlay);
    color: var(--text);
    font-size: 14px;
    pointer-events: none;
    max-width: calc(100% - 32px);
    text-align: center;
}

.status { top: 45%; }
.note { top: 14px; transition: opacity 0.6s; }
.note.fade { opacity: 0; }

.hint {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    margin: 0;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text-3);
    text-align: center;
    pointer-events: none;
}

.panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    padding: 14px 0 0;
}

.readouts { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.readout { display: flex; flex-direction: column; min-width: 70px; }
.readout .value { font-size: 24px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.readout .label { font-size: 13px; color: var(--text-3); }

.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.group { display: flex; align-items: center; gap: 4px; }
.group-label { font-size: 14px; color: var(--text-2); margin-right: 4px; }

button {
    font: inherit;
    font-size: 14px;
    padding: 6px 11px;
    border: none;
    border-radius: 4px;
    background: var(--soil);
    color: var(--text-2);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}
button:hover { color: var(--text); }
button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
button:focus-visible, input:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }

.slider { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.slider input { accent-color: var(--accent); width: 120px; }
.slider output { min-width: 3ch; text-align: right; color: var(--text); }

/* --- Prose */

.prose { padding: 40px 16px 80px; color: var(--text-2); }
.prose h2 { color: var(--text); font-size: 24px; margin: 36px 0 8px; line-height: 1.3; }
.prose p { margin: 0 0 16px; }
.prose ol, .prose ul { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin: 0 0 8px; }
.prose strong { color: var(--text); font-weight: 600; }
.prose table { border-collapse: collapse; margin: 0 0 16px; font-variant-numeric: tabular-nums; font-size: 15px; width: 100%; }
.prose th, .prose td { padding: 6px 10px; text-align: right; border-bottom: 1px solid var(--soil); }
.prose th:first-child, .prose td:first-child { text-align: left; }
.prose th { color: var(--text); font-weight: 600; }
.prose .credits { margin-top: 36px; font-size: 14px; color: var(--text-3); }

@media (max-width: 640px) {
    body { font-size: 16px; }
    .title { padding-top: 32px; }
    .description { font-size: 18px; }
    .viewport { aspect-ratio: 4 / 3.6; }
    .hint { font-size: 12px; }
    .readouts { gap: 8px 20px; }
    .readout .value { font-size: 20px; }
}