Something went wrong. Try again.
a love letter to tangled (android, iOS, and a search API)
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323:root { --bg: #0e0e0e; --surface: #1a1a1a; --border: #2a2a2a; --text: #e0e0e0; --text-dim: #888; --accent: #7aa2f7; --mark-bg: #7aa2f733; --mono: "Google Sans Mono", monospace; --sans: "Google Sans", sans-serif; --radius: 6px;}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--sans); background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column;}
a { color: var(--accent); text-decoration: none; }a:hover { text-decoration: underline; }
/* Nav */.nav { border-bottom: 1px solid var(--border); padding: .75rem 1rem;}.nav-inner { max-width: 720px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;}.nav-brand { font-family: var(--mono); font-weight: 700; font-size: 1.1rem; color: var(--text);}.nav-brand:hover { text-decoration: none; color: var(--accent); }.nav-links { display: flex; gap: 1.25rem; font-size: .9rem; }
/* Main */.main { max-width: 720px; width: 100%; margin: 0 auto; padding: 2rem 1rem; flex: 1; min-width: 0;}
/* Footer */.footer { border-top: 1px solid var(--border); padding: 1rem; font-size: .8rem; color: var(--text-dim);}
.footer-inner { max-width: 720px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem;}
.footer-right { display: flex; gap: 1rem; align-items: center;}
/* Search hero */.search-hero { margin-bottom: 1.5rem; }.search-hero h1 { font-size: 1.5rem; margin-bottom: 1rem; font-weight: 500; }.search-form { display: flex; gap: .5rem; margin-bottom: .75rem; }.search-input { flex: 1; padding: .6rem .75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: var(--sans); font-size: .95rem; outline: none;}.search-input:focus { border-color: var(--accent); }.search-input::placeholder { color: var(--text-dim); }
/* Buttons */.btn { padding: .6rem 1.1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: var(--sans); font-size: .9rem; cursor: pointer;}.btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }.btn:disabled { opacity: .5; cursor: default; }.btn-primary { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 500; }.btn-primary:hover { background: #6b93e8; color: var(--bg); }.btn-more { width: 100%; margin-top: .75rem; }
/* Filter bar */.filter-bar { display: flex; gap: .5rem; flex-wrap: wrap; }.filter-bar select,.filter-input { padding: .45rem .6rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: var(--sans); font-size: .85rem; outline: none;}.filter-bar select:focus,.filter-input:focus { border-color: var(--accent); }.filter-input { width: 140px; }.filter-input::placeholder { color: var(--text-dim); }
/* Messages */.msg { padding: 1rem; color: var(--text-dim); text-align: center; }.msg-error { color: #f7768e; }.msg-empty { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);}.msg-empty p:last-child { margin-bottom: 0; }
/* Result cards */.card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem 1rem; margin-bottom: .6rem; color: var(--text); transition: border-color .15s; min-width: 0;}.card:hover { border-color: var(--accent); text-decoration: none; }.card-head { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .35rem; flex-wrap: wrap; min-width: 0;}.badge { font-family: var(--mono); font-size: .7rem; padding: .15rem .45rem; background: var(--border); border-radius: 3px; text-transform: uppercase; color: var(--text-dim); white-space: nowrap;}.card-title { font-weight: 500; font-size: .95rem; min-width: 0; overflow-wrap: anywhere; word-break: break-word;}.card-snippet { font-size: .85rem; color: var(--text-dim); margin-bottom: .35rem; line-height: 1.5; overflow-wrap: anywhere; word-break: break-word;}.card-snippet mark { background: var(--mark-bg); color: var(--accent); padding: 0 .1rem; border-radius: 2px;}.card-meta { font-size: .78rem; color: var(--text-dim); display: flex; gap: .5rem; flex-wrap: wrap; min-width: 0;}.card-meta span { min-width: 0; overflow-wrap: anywhere; word-break: break-word;}.card-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem;}.btn-card { padding: .45rem .7rem; font-size: .82rem;}.meta-sep::before { content: "\00b7"; margin-right: .5rem; }.card-warning { margin-top: .6rem; padding: .55rem .65rem; border-radius: var(--radius); border: 1px solid #5c4b1f; background: #2a2416;}.warning-title { display: block; color: #f2c879; font-size: .78rem; line-height: 1.5;}.warning-uri { display: block; margin-top: .35rem; color: var(--text); overflow-wrap: anywhere; word-break: break-word;}.toast { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); padding: .65rem .85rem; border-radius: var(--radius); border: 1px solid var(--border); background: #111827; color: var(--text); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); opacity: 0; pointer-events: none;}.toast-visible { opacity: 1;}
/* Docs */.main h1 { font-size: 1.4rem; margin-bottom: 1rem; font-weight: 500; }.main h2 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; font-weight: 500; }.main h3 { font-size: .95rem; margin: 1rem 0 .4rem; font-weight: 500; }.main p { margin-bottom: .75rem; }.main table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: .85rem; display: block; overflow-x: auto;}.main th, .main td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--border);}.main th { color: var(--text-dim); font-weight: 500; }.main code { font-family: var(--mono); font-size: .85em; background: var(--surface); padding: .1rem .35rem; border-radius: 3px;}.main pre { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem 1rem; overflow-x: auto; margin-bottom: 1rem; font-size: .82rem; line-height: 1.5;}.main pre code { background: none; padding: 0; }.main p,.main li,.main code { overflow-wrap: anywhere; word-break: break-word;}.main th { white-space: nowrap;}.main td:not(:last-child) { white-space: nowrap;}.main td:last-child { overflow-wrap: anywhere; word-break: break-word;}
/* Mobile */@media (max-width: 640px) { .search-form { flex-direction: column; } .btn-primary { width: 100%; } .filter-bar { flex-direction: column; } .filter-input { width: 100%; } .card-meta { flex-wrap: wrap; }}