:root {
	--ground: #74541f;
	--cream: #efebe1;
	--dim: #dcd5c4;
	--line: rgba(239, 235, 225, 0.55);
	--faint: rgba(239, 235, 225, 0.3);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
	margin: 0;
	background: var(--ground);
	color: var(--cream);
	font-family: 'Inter Tight', system-ui, sans-serif;
	font-weight: 300;
}

main {
	max-width: 480px;
	margin: 0 auto;
	padding: 14px 16px 40px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

@media (display-mode: standalone) {
	main { padding-top: 24px; }
}

h1 { margin: 0; font-size: 34px; font-weight: 300; line-height: 1; }
.title { display: flex; align-items: center; gap: 10px; }
h2 { margin: 0 0 10px; font-size: 22px; font-weight: 300; }
section { display: flex; flex-direction: column; gap: 10px; }
section > h2:not(:first-child) { margin-top: 14px; }
p { margin: 0; line-height: 1.45; }
.dim { color: var(--dim); }
.small { font-size: 13px; }
.big { font-size: 22px; font-weight: 400; }
.split { display: flex; justify-content: space-between; align-items: baseline; }

button, select, input { font-family: inherit; font-weight: 400; font-size: 15px; }
button { height: 52px; cursor: pointer; }
.primary { border: none; background: var(--cream); color: var(--ground); }
.primary:disabled { opacity: 0.5; cursor: default; }
.outline { border: 1px solid var(--line); background: transparent; color: var(--cream); height: 48px; }
.outline-dark { border: 1px solid var(--ground); background: transparent; color: var(--ground); height: 48px; }
.link { border: none; background: transparent; color: var(--cream); height: 44px; text-decoration: underline; }

.row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; border-bottom: 1px solid var(--line); }
.row select { color-scheme: dark; flex: 1; max-width: 280px; height: 40px; border: none; background: transparent; color: var(--cream); font-weight: 300; text-align: right; }

.combo { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 12px 16px; border: 1px solid var(--line); }
.keys { display: flex; align-items: center; gap: 14px; }
.keys > span:not(.plus) { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 17px; }
.plus { font-size: 32px; padding-bottom: 26px; }

.panel { padding: 16px; background: var(--cream); color: var(--ground); gap: 12px; }
.panel .dim { color: var(--ground); }
.meter { display: flex; align-items: center; gap: 2px; height: 52px; }
.meter span { flex: 1; background: var(--ground); min-height: 2px; }
.stages { display: flex; flex-direction: column; gap: 7px; }
.stage { display: grid; grid-template-columns: 70px minmax(0, 1fr) 48px; gap: 8px; align-items: center; font-size: 13px; font-weight: 400; }
.bar { height: 8px; border: 1px solid var(--ground); }
.bar span { display: block; height: 6px; background: var(--ground); }
.stage .count { text-align: right; }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.tile { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13px; }
.tile.on { background: var(--cream); color: var(--ground); font-weight: 400; }
.num { font-size: 40px; line-height: 1.05; font-weight: 300; }

.name-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--faint); }
.name-row .slot { width: 42px; flex-shrink: 0; display: flex; flex-direction: column; line-height: 1; }
.name-row .slot b { font-size: 24px; font-weight: 300; }
.name-row input[type="text"] { flex: 1; min-width: 0; height: 44px; padding: 0; border: none; border-bottom: 1px solid var(--line); background: transparent; color: var(--cream); font-weight: 300; font-size: 19px; }
.name-row input::placeholder { color: var(--dim); }
.name-row.skipped .slot, .name-row.skipped input[type="text"] { opacity: 0.4; }
#name-list { border-top: 1px solid var(--line); }

a { color: var(--cream); }
.top { display: flex; gap: 10px; }
.top.split { align-items: flex-end; }
main > p:empty { display: none; }
.center { align-items: center; }
.grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tiny { font-size: 10px; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.stack { display: flex; flex-direction: column; gap: 24px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.badge { background: var(--cream); color: var(--ground); padding: 1px 6px; font-size: 12px; font-weight: 400; white-space: nowrap; }

.square { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--line); background: transparent; color: var(--cream); }
.square.dark { border-color: var(--ground); color: var(--ground); }
.round { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--line); border-radius: 22px; background: transparent; color: var(--cream); }
.round.playing { background: var(--cream); color: var(--ground); }
.round:disabled, .play-big:disabled { opacity: 0.35; cursor: default; }
.icon-text { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; }
.button-like { display: flex; align-items: center; justify-content: center; font-weight: 400; font-size: 15px; cursor: pointer; }
.pair { flex-direction: row; }
.pair > * { flex: 1; }

.actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.action { display: flex; flex-direction: column; gap: 12px; padding: 14px 12px 12px; border: 1px solid var(--line); text-decoration: none; }
.action.disabled { opacity: 0.45; }
.action img { pointer-events: none; }
.action .big { font-weight: 300; line-height: 1; }
.small-keys { display: flex; align-items: center; gap: 4px; font-size: 20px; }

.kit { display: grid; touch-action: manipulation; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.kit button { display: flex; align-items: center; height: auto; min-height: 48px; padding: 6px 9px; border: none; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; color: var(--cream); text-align: left; font-weight: 300; font-size: 17px; }
.kit button:active { background: var(--cream); color: var(--ground); }

.chips { display: flex; gap: 6px; }
.chips.wrap { flex-wrap: wrap; }
#filters { flex-wrap: wrap; justify-content: flex-end; margin-left: 12px; }
.chip { white-space: nowrap; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 16px; background: transparent; color: var(--cream); font-size: 12px; }
.chip.on { border-color: var(--cream); background: var(--cream); color: var(--ground); }
.chip.add { width: 90px; border-style: dashed; font-family: inherit; font-weight: 400; font-size: 13px; }
.chip.add::placeholder { color: var(--cream); }
.chip.suggest { border-style: dashed; color: var(--dim); }

.search { width: 100%; height: 40px; margin-bottom: 8px; padding: 0; border: none; border-bottom: 1px solid var(--line); background: transparent; color: var(--cream); font: inherit; font-weight: 300; font-size: 17px; }
.search::placeholder { color: var(--dim); }
.search:focus { outline: none; border-bottom-color: var(--cream); }
.search::-webkit-search-cancel-button { -webkit-appearance: none; width: 14px; height: 14px; background: var(--cream); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2 2 12' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat; cursor: pointer; }
#patterns { border-top: none; }
.list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.pattern-row { display: flex; align-items: center; gap: 8px; padding: 10px 2px; border-bottom: 1px solid var(--faint); }
.pattern-row.selected { background: rgba(239, 235, 225, 0.1); }
.check { display: flex; align-items: center; justify-content: center; width: 32px; height: 44px; flex-shrink: 0; }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--cream); }
.pattern-link { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; text-decoration: none; }
.pattern-link .name { font-size: 17px; }
.pattern-link .split { gap: 8px; }
.meta { display: flex; gap: 6px; align-items: center; }
.strip { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 2px; }
.strip span { height: 12px; border: 1px solid rgba(239, 235, 225, 0.35); }
.strip span:nth-child(4n):not(:last-child) { margin-right: 3px; }
.strip .hit { border-color: var(--cream); background: var(--cream); }
.strip .accent, .grid .accent, .legend .accent { border-color: var(--cream); background: repeating-linear-gradient(135deg, var(--cream) 0 1.5px, transparent 1.5px 3.5px); }

.set-row { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 0 2px; border-bottom: 1px solid var(--faint); }
.inline-name { height: 30px; padding: 0; border: none; background: transparent; color: var(--cream); font-weight: 300; font-size: 17px; }
.inline-name::placeholder { color: var(--cream); }

.selection { position: sticky; bottom: 16px; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; background: var(--cream); color: var(--ground); }
.selection span { flex: 1; font-size: 15px; font-weight: 400; }

.title-input { width: 100%; height: 52px; padding: 0; border: none; border-bottom: 1px solid var(--line); background: transparent; color: var(--cream); font-weight: 300; font-size: 34px; }
.title-input::placeholder, .field input::placeholder { color: var(--dim); }
.grid-box { padding: 12px 10px; border: 1px solid var(--line); }
.grid { display: grid; grid-template-columns: 54px repeat(16, minmax(0, 1fr)); gap: 3px; align-items: center; }
.grid .num { font-size: 9px; text-align: center; color: var(--dim); }
.grid .num.now { color: var(--cream); font-weight: 500; }
.grid .gap { margin-right: 3px; }
.row-label { display: flex; flex-direction: column; line-height: 1.15; font-size: 12px; min-width: 0; }
.row-label.rule { font-size: 13px; }
.grid .rule { margin-top: 6px; }
.step { height: 26px; border: 1px solid var(--faint); display: flex; align-items: center; justify-content: center; }
.step.short { height: 14px; }
.step.now { border-color: var(--cream); background: rgba(239, 235, 225, 0.18); }
.step.hit, .legend .hit { border-color: var(--cream); background: var(--cream); color: var(--ground); }
.step b, .legend b { font-size: 10px; font-weight: 500; }
.dot { width: 6px; height: 6px; border-radius: 3px; background: var(--ground); }
.step.fx::after, .legend .fx::after { content: ''; width: 100%; height: 2px; background: var(--cream); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 6px; }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend i { width: 11px; height: 11px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.legend b { font-size: 8px; }
.legend .dot { width: 4px; height: 4px; }

.transport { flex-direction: row; align-items: center; gap: 16px; }
.play-big { width: 72px; height: 72px; flex-shrink: 0; border: none; border-radius: 36px; background: var(--cream); color: var(--ground); display: flex; align-items: center; justify-content: center; }
.play-big svg { width: 24px; height: 24px; }
.field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.field input { color-scheme: dark; width: 100%; height: 44px; padding: 0; border: none; border-bottom: 1px solid var(--line); background: transparent; color: var(--cream); font-weight: 300; font-size: 28px; }
.nowrap { white-space: nowrap; }

.header-actions { display: flex; gap: 8px; }
#share-link .icon-text { justify-content: center; }
.set-row.selected { background: rgba(239, 235, 225, 0.1); }
.set-row .meta { flex-wrap: wrap; }
.links { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-top: 8px; border-top: 1px solid var(--faint); }
.links a { color: var(--dim); }
.links p { flex-basis: 100%; margin: 0; }
.links .credit { margin-top: 16px; text-align: center; }

.connections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.connection { display: flex; flex-direction: column; align-items: center; gap: 10px; height: auto; padding: 16px 8px 12px; border: 1px solid var(--line); background: transparent; color: var(--cream); font-weight: 300; }
.connection .label { font-size: 17px; font-weight: 400; }
.connection[aria-pressed="true"] { border-color: var(--cream); background: var(--cream); color: var(--ground); }
.kit button:disabled { opacity: 0.35; }
.kit button.named { flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 7px; font-size: 13px; }

.center-text { text-align: center; }
.center-content { justify-content: center; }
.slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.slots .slot { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; height: auto; min-height: 66px; padding: 6px 7px; border: none; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; color: rgba(239, 235, 225, 0.5); text-align: left; font-weight: 300; min-width: 0; }
.slots .slot .n { font-size: 18px; line-height: 1; margin-bottom: auto; }
.slots .slot .name { font-size: 12px; font-weight: 400; line-height: 1.2; max-width: 100%; overflow-wrap: anywhere; }
.slots .slot .was { font-size: 10px; line-height: 1.2; opacity: 0.8; max-width: 100%; overflow-wrap: anywhere; }
.slots .slot.filled { background: var(--cream); color: var(--ground); }
.slots .slot.picking { outline: 2px solid var(--cream); outline-offset: -4px; }
.slots .slot.filled.picking { outline-color: var(--ground); }
.pending { display: flex; align-items: center; gap: 8px; padding: 0 0 0 12px; background: var(--cream); color: var(--ground); font-size: 14px; font-weight: 400; }
.pending span { flex: 1; padding: 10px 0; }
.pending .link { color: var(--ground); }
.picker { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); }
.picker .list { max-height: 50vh; overflow-y: auto; }
.pick-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; height: auto; min-height: 52px; padding: 8px 4px; border: none; border-bottom: 1px solid var(--faint); background: transparent; color: var(--cream); text-align: left; font-weight: 300; font-size: 16px; }
.pick-row.on { background: var(--cream); color: var(--ground); }
.pick-row.on .dim { color: var(--ground); }
.option { display: flex; align-items: center; gap: 10px; min-height: 56px; border-bottom: 1px solid var(--faint); }
.option input { width: 20px; height: 20px; margin: 0; accent-color: var(--cream); flex-shrink: 0; }
.option select { color-scheme: dark; max-width: 40%; height: 36px; border: 1px solid var(--line); background: transparent; color: var(--cream); font-weight: 300; }
.option select:disabled { opacity: 0.4; }
.row-connection { flex-direction: row; justify-content: flex-start; min-height: 56px; padding: 6px 10px; font-size: 15px; font-weight: 400; }
.progress { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 3px; }
.progress span { height: 18px; border: 1px solid var(--ground); }
.progress .on { background: var(--ground); }
.selection .add { display: flex; align-items: center; height: 44px; padding: 0 14px; border: none; background: var(--ground); color: var(--cream); font-size: 14px; }
.outline:disabled { opacity: 0.4; cursor: default; }
.pattern-link .split > .dim { white-space: nowrap; }