/* Tonband's tokens (editions/tonband/look/tokens.json), and the design system's web section. */
@font-face { font-family: 'Instrument Sans'; font-weight: 400; font-display: swap; src: url(/fonts/InstrumentSans-400.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 500; font-display: swap; src: url(/fonts/InstrumentSans-500.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 600; font-display: swap; src: url(/fonts/InstrumentSans-600.woff2) format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-weight: 400; font-display: swap; src: url(/fonts/GeistMono-400.woff2) format('woff2'); }

:root {
	color-scheme: light dark;
	--face: #f6f5f2;
	--body: #ecebe7;
	--well: #e4e2dd;
	--key: #fbfaf8;
	--rule: #d9d7d1;
	--ink: #2b2a28;
	--ink-2: #615f5a;
	--dot-off: #c4c1ba;
	--record: #e2571e;
	--ready: #3f7f35;
	--s1: #3b6488;
	--s2: #7a5a36;
	--s3: #2c716d;
	--shadow-key: 0 1px 1px #0000001f, inset 0 0 0 1px #d9d7d1;
	--shadow-inset: inset 0 1px 2px #0000001f;
	--sans: 'Instrument Sans', -apple-system, system-ui, sans-serif;
	--mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
}
@media (prefers-color-scheme: dark) {
	:root {
		--face: #2c2b29;
		--body: #262624;
		--well: #211f1e;
		--key: #3a3936;
		--rule: #44423e;
		--ink: #ecebe7;
		--ink-2: #a6a39c;
		--dot-off: #55534e;
		--record: #f06a30;
		--ready: #6cb35d;
		--s1: #8db3d6;
		--s2: #cfae84;
		--s3: #7cc2bb;
		--shadow-key: 0 1px 1px #00000066, inset 0 0 0 1px #44423e;
		--shadow-inset: inset 0 1px 2px #00000080;
	}
}

html[lang='en'] [lang='sv'],
html:not([lang='en']) [lang='en'] { display: none; }

* { box-sizing: border-box; }
body {
	margin: 0;
	background: var(--face);
	color: var(--ink);
	font: 400 15px/24px var(--sans);
	-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--rule); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }

.bar, main, .foot { max-width: 1040px; margin: 0 auto; padding: 0 24px; }

/* The title bar: the wordmark leading, the language switch trailing. */
.bar { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.wordmark { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 500 22px/1 var(--sans); letter-spacing: -0.015em; }
.wordmark svg { width: 38px; height: 24px; }
.wordmark .dot { fill: var(--record); }

.switch { display: flex; padding: 2px; border-radius: 8px; background: var(--well); box-shadow: var(--shadow-inset); }
.switch button {
	min-width: 40px; height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: none;
	color: var(--ink-2); font: 600 11px/14px var(--sans); letter-spacing: 0.08em; cursor: pointer;
}
.switch button[aria-pressed='true'] { background: var(--key); color: var(--ink); box-shadow: var(--shadow-key); }

/* The hero: words beside the deck. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 56px; align-items: center; padding: 56px 0 72px; }
.legend { margin: 0; font: 600 11px/14px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
h1 { margin: 16px 0 0; font: 500 64px/64px var(--sans); letter-spacing: -0.035em; text-wrap: balance; }
.lede { margin: 20px 0 0; max-width: 34em; font-size: 18px; line-height: 28px; }
.get { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 32px; }

/* The one action: a raised key, as the app's default key. Orange is only for recording. */
.key {
	display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px;
	border-radius: 6px; background: var(--key); box-shadow: var(--shadow-key);
	font: 500 16px/1 var(--sans); text-decoration: none;
	transition: transform 80ms cubic-bezier(0.2, 0, 0, 1);
}
.key svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.key:active { transform: translateY(1px); }
.facts { margin: 0; color: var(--ink-2); font-size: 13px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.needs { margin: 20px 0 0; max-width: 34em; color: var(--ink-2); font-size: 13px; line-height: 20px; }

/* The deck: the app's instrument face, drawn with its tokens. */
.deck { width: 100%; height: auto; display: block; }
.deck .housing { fill: var(--body); }
.deck .well { fill: var(--well); }
.deck .flange { fill: none; stroke: var(--ink); stroke-width: 6; }
.deck .pack { fill: var(--dot-off); }
.deck .notch { fill: var(--well); }
.deck .tape-line { stroke: var(--ink); stroke-width: 6; stroke-linecap: round; }
.deck .ink { fill: var(--ink); }
.deck .rec { fill: var(--record); }
#vu .on { fill: var(--ink); }
#vu .off { fill: var(--dot-off); }
.deck .off { fill: var(--dot-off); }

/* The screen under the deck: what it does now, then what was said, then the minutes. */
.player { display: grid; gap: 16px; }
.screen { min-height: 132px; }
.status { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--ink-2); font: 600 11px/14px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
.status .lamp { flex: none; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 2px var(--rule); }
.status.recording .lamp { background: var(--record); }
.status.done .lamp { background: var(--ready); }
.status .time { margin-left: auto; font: 400 12px/14px var(--mono); letter-spacing: 0; }
.tape { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tape li { display: flex; align-items: baseline; gap: 10px; font-size: 14px; line-height: 20px; animation: land 400ms cubic-bezier(0.2, 0, 0, 1) both; }
.tape .minute .legend { flex: none; width: 7.5em; }
@keyframes land { from { opacity: 0; transform: translateY(4px); } }

/* A section: a legend, one line that says it, then the proof beside it. */
.block { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 56px; padding: 48px 0; border-top: 1px solid var(--rule); }
.intro p { margin: 12px 0 0; max-width: 32em; }
.say { font: 500 24px/30px var(--sans); letter-spacing: -0.01em; text-wrap: balance; }
h3 { margin: 0; font: 500 15px/24px var(--sans); }

/* The benchmark: bars like the app's meters, ink for Tonband, ink-2 for the others. */
.bench { margin: 0; }
.figures { display: grid; gap: 24px 32px; }
.figures p { margin: 0; max-width: 28em; }
.big { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px !important; }
.big .mono { font-size: 56px; line-height: 60px; letter-spacing: -0.03em; }
.big .of { font-weight: 500; }
.more { margin-top: 28px; border-top: 1px solid var(--rule); padding-top: 12px; }
.more summary { cursor: pointer; color: var(--ink-2); font-size: 13px; line-height: 20px; }
.more summary:hover { color: var(--ink); }
.more .cap { margin: 16px 0 8px; }
.row { display: grid; grid-template-columns: 9.5em 1fr 3em; align-items: center; gap: 16px; padding: 8px 0; }
.row .name { color: var(--ink-2); }
.row.us .name { color: var(--ink); font-weight: 500; }
.track { height: 12px; border-radius: 6px; background: var(--well); box-shadow: var(--shadow-inset); overflow: hidden; }
.fill { display: block; height: 100%; width: calc(var(--v) / 16 * 100%); background: var(--ink-2); border-radius: 6px; }
.us .fill { background: var(--ink); }
.num { text-align: right; font-size: 15px; }
.source { margin: 16px 0 0; color: var(--ink-2); font-size: 12px; line-height: 16px; }

/* The sample minutes, set as the app's reading column on a sheet. */
.sheet { padding: 28px 32px; border-radius: 12px; background: var(--key); box-shadow: 0 0 0 1px var(--rule), 0 10px 28px #2b2a2814; }
.sheet h3 { margin-top: 8px; font: 500 28px/34px var(--sans); letter-spacing: -0.015em; }
.sheet .sub { margin-top: 24px; margin-bottom: 6px; }
.sheet p { margin: 0; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--rule); }
.steps li:first-child { border-top: 0; }
.code { display: inline-flex; align-items: center; gap: 5px; min-width: 44px; padding: 1px 6px; border-radius: 4px; background: var(--face); box-shadow: var(--shadow-key); font: 600 11px/18px var(--sans); }
.code i { width: 7px; height: 7px; border-radius: 1px; }
.when { color: var(--ink-2); font-size: 12px; }

/* The loop. */
.turns { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: none; }
.turns li { position: relative; }
.turns .n { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-bottom: 12px; border-radius: 50%; background: var(--key); box-shadow: var(--shadow-key); font-size: 12px; }
.turns li:not(:last-child)::after { content: ''; position: absolute; top: 14px; left: 40px; right: -12px; height: 1px; background: var(--rule); }
.turns p { margin: 4px 0 0; }

/* Yours. */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 32px; }
.grid h3 { display: flex; align-items: center; gap: 8px; }
.grid p { margin: 4px 0 0; }
kbd { font: 400 12px/1 var(--mono); padding: 2px 6px; border-radius: 4px; background: var(--key); box-shadow: var(--shadow-key); white-space: nowrap; }
.light { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ready); box-shadow: 0 0 0 2px var(--rule); }

.again { display: flex; justify-content: center; padding: 48px 0 56px; border-top: 1px solid var(--rule); }

.foot .inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 24px 0 40px; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: 13px; line-height: 20px; }
.sep { margin: 0 8px; }
.foot p { margin: 0; }

@media (max-width: 820px) {
	.hero { grid-template-columns: 1fr; gap: 40px; padding: 32px 0 48px; }
	h1 { font-size: 44px; line-height: 46px; }
	.block { grid-template-columns: 1fr; padding: 40px 0; }
	.turns { grid-template-columns: 1fr; }
	.turns li::after { display: none; }
}
@media (max-width: 480px) {
	.screen { min-height: 196px; }
	.bar, main, .foot { padding: 0 16px; }
	.foot .inner { padding-bottom: 32px; }
	.key { width: 100%; justify-content: center; }
	.grid, .figures { grid-template-columns: 1fr; }
	.sheet { padding: 20px; }
	.row { grid-template-columns: 7.5em 1fr 2.5em; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
	.key { transition: none; }
	.tape li { animation: none; }
}