Something went wrong. Try again.
a love letter to tangled (android, iOS, and a search API)
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235:root { --app-background: #212337; --app-surface: #323449; --app-surface-raised: #3b4261; --app-border: #a1abe0; --app-text: #ebfafa; --app-text-muted: #a1abe0; --app-accent: #39ddfd; --app-accent-contrast: #212337; --app-danger: #f16c75; --app-warning: #f7c67f; --app-success: #37f499; --app-focus: #04d1f9;
--font-body: 'Commissioner Variable', Commissioner, ui-sans-serif, system-ui, sans-serif; --font-display: var(--font-body); --font-landing-display: 'Instrument Sans Variable', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; --font-mono: 'Azeret Mono Variable', 'Azeret Mono', ui-monospace, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.35rem; --text-2xl: 1.75rem;
--space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; --space-10: 4rem; --space-12: 6rem; --radius-sm: 0.5rem; --radius-md: 0.875rem; --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px);
--ion-font-family: var(--font-body); --ion-background-color: var(--app-background); --ion-text-color: var(--app-text); --ion-toolbar-background: var(--app-surface); --ion-toolbar-color: var(--app-text); --ion-item-background: var(--app-surface); --ion-card-background: var(--app-surface);}
*,*::before,*::after { box-sizing: border-box;}
html,body { font-family: var(--font-body); background: var(--app-background);}
body { color: var(--app-text); font-synthesis: none;}
code,kbd,samp { font-family: var(--font-mono); font-variant-ligatures: none;}
button,input,select,textarea { font: inherit;}
a { color: var(--app-accent); text-underline-offset: 0.2em;}
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--app-focus); outline-offset: 3px;}
ion-split-pane { --border: 1px solid var(--app-border); --side-max-width: 17.5rem; --side-min-width: 17.5rem; --side-width: 17.5rem;}
ion-menu { --width: 17.5rem; --min-width: 17.5rem; --max-width: 17.5rem;}
ion-toolbar { --border-color: var(--app-border); --min-height: 3.5rem; padding-inline-start: var(--safe-left); padding-inline-end: var(--safe-right);}
ion-title { font-family: var(--font-display); font-weight: 750;}
ion-menu-button,ion-back-button { --color: var(--app-text);}
.page-frame { inline-size: min(100%, 84rem); margin-inline: auto; padding: clamp(var(--space-6), 5vw, var(--space-10)) max(var(--space-5), var(--safe-right)) calc(var(--space-12) + var(--safe-bottom)) max(var(--space-5), var(--safe-left));}
.page-frame--narrow { max-inline-size: 64rem;}
.section-label { margin: 0 0 var(--space-3); color: var(--app-accent); font-size: var(--text-sm); font-weight: 700; font-family: var(--font-mono);}
.route-notice { max-inline-size: 42rem; border-inline-start: 3px solid var(--app-accent); padding: var(--space-3) var(--space-5);}
.route-notice p { margin: var(--space-1) 0 0; color: var(--app-text-muted); line-height: 1.55;}
.recovery-state { display: flex; align-items: flex-start; gap: var(--space-4); max-inline-size: 44rem; border: 1px solid var(--app-border); border-radius: var(--radius-md); padding: var(--space-5); background: var(--app-surface);}
.recovery-state > ion-icon { flex: 0 0 auto; color: var(--app-warning); font-size: 1.5rem;}
.recovery-state h2,.recovery-state p { margin: 0;}
.recovery-state p { margin-block-start: var(--space-2); color: var(--app-text-muted); line-height: 1.55;}
.recovery-state__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-block-start: var(--space-4);}
.skip-link { position: fixed; z-index: 100; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); padding: var(--space-3) var(--space-4); color: var(--app-accent-contrast); background: var(--app-accent); transform: translateY(-160%);}
.skip-link:focus { transform: translateY(0);}
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }}
@media (max-width: 959px) { ion-content { --padding-bottom: calc(3.75rem + var(--safe-bottom)); }
.page-frame { padding-block-end: calc(var(--space-10) + 3.75rem + var(--safe-bottom)); }}