:root {
	color-scheme: dark;
	--bg: #121412;
	--panel: #171a17;
	--line: #30362f;
	--muted: #a0aa9b;
	--text: #edf0e8;
	--accent: #d2f597;
	--mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 13px;
	color: var(--text);
	background: var(--bg);
}
* {
	box-sizing: border-box;
}
body {
	margin: 0;
	overflow: hidden;
}
button,
input,
select {
	font: inherit;
}
button {
	cursor: pointer;
	color: inherit;
	border: 0;
	background: none;
}
button:disabled {
	opacity: 0.3;
	cursor: default;
}
button:not(:disabled):hover {
	background: #30392a;
}
button:focus-visible,
input:focus-visible,
select:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
}
svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.65;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
}
.svg-defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.app-shell {
	display: grid;
	grid-template-columns: 210px minmax(410px, 1fr) 280px;
	height: 100vh;
}
.sidebar,
.markers-panel {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	background: var(--panel);
}
.sidebar {
	border-right: 1px solid var(--line);
	padding: 24px 16px;
}
.sidebar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 32px;
}
.brand {
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: 21px;
	font-weight: 600;
}
.brand svg {
	color: var(--accent);
	width: 25px;
	height: 25px;
}
.icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 8px;
	flex-shrink: 0;
	color: var(--muted);
	border: 1px solid var(--line);
	border-radius: 6px;
}
h2 {
	font-size: 13px;
	font-weight: 500;
	margin: 0;
}
.sidebar-heading,
.markers-heading {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.sidebar-heading {
	color: var(--muted);
}
.sidebar-heading .icon-button {
	border: 0;
}
.recordings-list {
	flex: 1;
	overflow-y: auto;
	margin-top: 12px;
}
.empty-state {
	color: #89967f;
	font-size: 12px;
	margin: 24px 0;
}
.recording-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	text-align: left;
	padding: 13px 8px;
	border-radius: 6px;
	margin-bottom: 3px;
}
.recording-item.selected {
	background: #2a3224;
}
.recording-item svg {
	width: 16px;
	color: #a8bc96;
}
.recording-item div {
	min-width: 0;
}
.recording-item strong {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12px;
	font-weight: 500;
}
.recording-item small {
	display: block;
	color: var(--muted);
	font-size: 10px;
	margin-top: 6px;
}
main {
	padding: 30px 32px;
	min-width: 0;
	overflow-y: auto;
}
.session-heading {
	display: flex;
	gap: 14px;
	align-items: center;
	margin-bottom: 24px;
}
.session-heading input {
	flex: 1;
	min-width: 0;
	background: none;
	border: 0;
	color: var(--text);
	font-size: 19px;
	padding: 6px 0;
}
.format-badge {
	font: 10px var(--mono);
	color: var(--muted);
	white-space: nowrap;
}
.recorder-card {
	border: 1px solid #394232;
	border-radius: 9px;
	background: #1a2017;
	padding: 22px 24px 24px;
}
.recorder-top {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font: 11px var(--mono);
	color: var(--muted);
}
.status {
	display: flex;
	align-items: center;
	gap: 8px;
}
.status > span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
}
.status.recording {
	color: #f4a18e;
}
.status.recording > span {
	background: #f4a18e;
}
.status.paused {
	color: #edc789;
}
.status.paused > span {
	background: #edc789;
}
.time-display {
	font: 400 clamp(48px, 5.2vw, 72px) var(--mono);
	letter-spacing: -4px;
	text-align: center;
	margin: 44px 0 36px;
	font-variant-numeric: tabular-nums;
}
.time-display > span {
	color: #9fb58a;
}
canvas {
	width: 100%;
	height: 90px;
	display: block;
}
.wave-ticks {
	display: flex;
	justify-content: space-between;
	font: 9px var(--mono);
	color: #92a282;
	margin: 14px 0 30px;
}
.transport {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
}
.transport-button {
	width: 44px;
	height: 44px;
	background: #20291b;
}
.record-button {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--accent);
	color: #243319;
	border: 0;
}
.record-button svg {
	width: 28px;
	height: 28px;
}
.record-button:not(:disabled):hover {
	background: #e2ffb5;
}
.record-button.is-recording {
	background: #edb3a3;
	color: #632f22;
}
.record-button.is-recording:not(:disabled):hover {
	background: #f6c5b7;
}
.input-card {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 24px 0 20px;
	border-bottom: 1px solid var(--line);
}
.device-field {
	flex: 1;
	min-width: 0;
}
.input-card label {
	display: block;
	font-size: 11px;
	color: var(--muted);
	margin-bottom: 10px;
}
.input-card select {
	border: 0;
	background: var(--bg);
	color: var(--text);
	font-size: 12px;
	max-width: 100%;
	padding: 0 15px 0 0;
	cursor: pointer;
}
.channel-field {
	min-width: 78px;
}
#preview[aria-pressed='true'] {
	color: var(--accent);
	border-color: #627b4b;
	background: #26321e;
}
.level-row {
	display: flex;
	align-items: center;
	gap: 14px;
	font: 10px var(--mono);
	color: var(--muted);
	margin-top: 18px;
}
.level-track {
	flex: 1;
	height: 4px;
	background: repeating-linear-gradient(
		90deg,
		#30392a 0,
		#30392a 5px,
		transparent 5px,
		transparent 7px
	);
}
.level-track div {
	height: 100%;
	width: 0;
	max-width: 100%;
	background: var(--accent);
}
#db {
	min-width: 44px;
	text-align: right;
}
.main-footer {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	color: var(--muted);
}
.main-footer > svg {
	width: 16px;
	height: 16px;
}
#save-path {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font: 10px var(--mono);
}
.markers-panel {
	padding: 30px 22px 24px;
	border-left: 1px solid var(--line);
}
.markers-heading {
	min-height: 36px;
}
#marker-count {
	font: 11px var(--mono);
	color: var(--muted);
}
.marker-tools {
	display: flex;
	gap: 10px;
	margin-top: 24px;
}
.marker-tools .icon-button {
	flex: 1;
	height: 38px;
}
.keep {
	color: #c6ed94;
}
.retake {
	color: #e9be77;
}
.cut {
	color: #df958e;
}
.marker-list {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	margin-top: 12px;
}
.marker-row {
	border-bottom: 1px solid var(--line);
	padding: 15px 0;
}
.marker-row > div {
	display: flex;
	align-items: center;
	gap: 9px;
}
.kind-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--accent);
	flex-shrink: 0;
}
.kind-dot.keep {
	background: #c6ed94;
}
.kind-dot.retake {
	background: #e9be77;
}
.kind-dot.cut {
	background: #df958e;
}
.marker-time {
	font: 11px var(--mono);
	color: #d3e5bd;
	padding: 3px 0;
	border-radius: 3px;
}
.marker-kind {
	font-size: 9px;
	color: var(--muted);
	margin-left: auto;
}
.marker-label {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 4px;
	border: 1px solid transparent;
	border-radius: 3px;
	background: transparent;
	color: var(--text);
	font-size: 12px;
}
.marker-label:not(:read-only):hover {
	border-color: #546347;
}
.markers-footer {
	flex-shrink: 0;
	border-top: 1px solid var(--line);
	margin-top: 20px;
	padding-top: 20px;
}
.toggle-row {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 11px;
	color: #c4ceba;
	cursor: pointer;
}
.toggle-row input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.toggle {
	width: 27px;
	height: 16px;
	border-radius: 20px;
	border: 1px solid #59664c;
	background: #30392a;
	position: relative;
	flex-shrink: 0;
}
.toggle:after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #a6b29a;
}
.toggle-row input:checked + .toggle {
	background: var(--accent);
	border-color: var(--accent);
}
.toggle-row input:checked + .toggle:after {
	background: #2a3a1c;
	transform: translateX(11px);
}
.toggle-row input:focus-visible + .toggle {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}
.shortcut-hint {
	font: 10px/1.6 var(--mono);
	color: var(--muted);
	margin: 12px 0 0 36px;
}
.playback-section {
	margin-top: 26px;
	border-top: 1px solid var(--line);
	padding-top: 18px;
}
.playback-section > div {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	color: var(--muted);
}
.playback-section svg {
	width: 16px;
	height: 16px;
}
.playback-section audio {
	width: 100%;
	height: 35px;
	margin-top: 12px;
}
.notice {
	padding: 12px 14px;
	border: 1px solid #4b5b3d;
	background: #202a1a;
	font-size: 12px;
	line-height: 1.6;
	color: #d9eaca;
	border-radius: 6px;
	margin-top: 20px;
	overflow-wrap: anywhere;
}
.notice.error {
	border-color: #7c5346;
	background: #36231d;
	color: #f4cabc;
}
[hidden] {
	display: none !important;
}
@media (max-width: 1100px) {
	.app-shell {
		grid-template-columns: 180px minmax(410px, 1fr) 250px;
	}
	main {
		padding: 30px 22px;
	}
	.markers-panel {
		padding: 30px 18px 24px;
	}
	.format-badge {
		display: none;
	}
}
@media (min-width: 1400px) {
	.app-shell {
		grid-template-columns: 230px minmax(410px, 1fr) 300px;
	}
	main {
		padding: 36px 48px;
	}
	canvas {
		height: 120px;
	}
}
.account-button {
	text-decoration: none;
}
.account-button.signed-in {
	color: var(--accent);
	border-color: #627b4b;
}
.save-controls {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-top: 16px;
}
.save-controls > label {
	font-size: 11px;
	color: var(--muted);
	white-space: nowrap;
}
.save-controls > select {
	flex: 1;
	min-width: 0;
	color: var(--text);
	border: 1px solid var(--line);
	border-radius: 5px;
	background: var(--panel);
	padding: 9px;
}
.keyboard-hints {
	display: flex;
	justify-content: space-between;
	gap: 9px;
}
.keyboard-hints > span {
	display: flex;
	gap: 5px;
	align-items: center;
	color: var(--muted);
}
.keyboard-hints svg {
	width: 14px;
	height: 14px;
}
kbd {
	border: 1px solid var(--line);
	border-radius: 3px;
	padding: 3px 5px;
	font: 10px var(--mono);
}
#library-toggle,
.library-scrim {
	display: none;
}
@media (max-width: 900px) {
	.app-shell {
		grid-template-columns: minmax(0, 1fr) 250px;
	}
	.sidebar {
		display: none;
	}
	#library-toggle {
		display: inline-flex;
	}
	.sidebar.is-open {
		display: flex;
		position: fixed;
		z-index: 12;
		inset: 0 auto 0 0;
		width: 250px;
	}
	.library-scrim:not([hidden]) {
		display: block;
		position: fixed;
		z-index: 11;
		inset: 0;
		width: 100%;
		height: 100%;
		background: #0009;
		border: 0;
		border-radius: 0;
	}
}
@media (max-width: 680px) {
	body {
		overflow: auto;
	}
	.app-shell {
		display: block;
		height: auto;
		min-height: 100dvh;
	}
	main {
		padding: 18px;
		overflow: visible;
	}
	.session-heading {
		gap: 9px;
	}
	.session-heading input {
		font-size: 17px;
	}
	.recorder-card {
		padding: 18px;
	}
	.recorder-top {
		font-size: 10px;
	}
	.time-display {
		font-size: clamp(38px, 11vw, 64px);
		letter-spacing: -3px;
		margin: 32px 0;
	}
	canvas {
		height: 70px;
	}
	.input-card {
		gap: 12px;
	}
	.input-card select {
		font-size: 11px;
	}
	.channel-field {
		min-width: 66px;
	}
	.save-controls {
		gap: 7px;
	}
	.save-controls > select {
		font-size: 11px;
	}
	.markers-panel {
		border-left: 0;
		border-top: 1px solid var(--line);
		padding: 18px;
		min-height: 230px;
		max-height: 500px;
	}
	.marker-list {
		max-height: 320px;
	}
	.marker-tools {
		margin-top: 12px;
	}
}