/* Old-school skin: square corners, hard ink borders and offset shadows, muted paper colors. */
* { border-radius: 0 !important; }
body { background-image: repeating-linear-gradient(0deg, rgba(30, 60, 10, .04) 0 1px, transparent 1px 3px); }
.chip, .gbtn, .sleep, .tabs, .pop, .dock, .tog, .faq, select, .sheet { border: 2px solid var(--line); }
.chip, .gbtn, .sleep, .tog { box-shadow: 2px 2px 0 var(--line); }
.chip:active, .gbtn:active, .sleep:active, .tog:active { transform: translate(2px, 2px); box-shadow: none; }
.chip.sel, .chip[aria-pressed="true"] { background: var(--acc); color: var(--on); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .4); transform: translate(2px, 2px); }
.chip.sel::before { content: "\25B6\00a0"; font-size: .7em; }
.dock, .pop { box-shadow: 4px 4px 0 var(--line); }
.sheet { box-shadow: 0 -4px 0 var(--line); }
@media (min-width: 700px) { .sheet { box-shadow: 5px 5px 0 var(--line); } }
.tog { border-width: 2px; }
.orb { color: hsl(var(--h) 32% 30%); }
.card.on .tog { background: hsl(var(--h) 34% 76%); border-color: var(--line); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .25); transform: translate(2px, 2px); }
.card.on .orb, .card.on .nm { color: hsl(var(--h) 40% 14%); }
[data-theme="dark"] .orb { color: hsl(var(--h) 30% 68%); }
[data-theme="dark"] .card.on .tog { background: hsl(var(--h) 24% 30%); border-color: hsl(var(--h) 30% 62%); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .45); }
[data-theme="dark"] .card.on .orb, [data-theme="dark"] .card.on .nm { color: hsl(var(--h) 35% 88%); }
.play { box-shadow: 3px 3px 0 var(--line); border: 2px solid var(--line); }
.play:active { transform: translate(3px, 3px); box-shadow: none; }
body.playing .play { animation: none; }
.vol::-webkit-slider-runnable-track { height: 6px; border: 1px solid var(--line); background: var(--bg); }
.vol::-moz-range-track { height: 6px; border: 1px solid var(--line); background: var(--bg); }
.vol::-webkit-slider-thumb { border: 2px solid var(--line); border-radius: 0; background: var(--acc); }
.vol::-moz-range-thumb { border: 2px solid var(--line); border-radius: 0; background: var(--acc); }
.tabs button[aria-selected="true"], .chip.go { box-shadow: none; }
.brand img { filter: sepia(.35) saturate(.8); }
.upd { border-width: 2px; box-shadow: 3px 3px 0 var(--line); }
.step input { border-bottom: 2px solid var(--line); }
.tabs { position: sticky; top: 0; z-index: 1; background: var(--card); }
/* Pixel cursors, no text selection, square scrollbars. */
* { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input#tmin { -webkit-user-select: text; user-select: text; }
* { cursor: url(../img/cursor.png) 0 0, default; }
button, a, summary, select, .tog, .chip, .vol, label, [role=button] { cursor: url(../img/cursor-link.png) 10 0, pointer; }
input#tmin { cursor: text; }
button *, a *, summary *, .tog *, .chip *, label * { cursor: inherit; pointer-events: none; }
* { scrollbar-width: thin; scrollbar-color: var(--acc) var(--card); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--card); border-left: 2px solid var(--line); }
::-webkit-scrollbar-thumb { background: var(--acc); border: 2px solid var(--line); }
::-webkit-scrollbar-thumb:hover { background: var(--ink); }