sergio/takana
> Una distribución Linux construida con un laboratorio funcional y hermético en el > sótano, y una terminal mutable, clásica y anárquica en el piso de arriba — diseñada > desde el suelo para que una IA programadora entienda, modifique y co…
firefox: RLBox ENCENDIDO — --without-wasm-sandboxed-libraries -> --with-wasi-sysroot
1<!DOCTYPE html>
2<html lang="es">
3<head>
4<meta charset="utf-8">
5<title>atuq</title>
6<style>
7/* La paleta es la MISMA que `chrome/atuq.css`, muestreada del medallón. Está duplicada acá y no
8 importada porque esta página vive en la extensión y aquélla en el chrome: son dos mundos que no
9 comparten hoja de estilo. Si cambian los tokens, cambian en los dos sitios — está anotado en el
10 README para que no se desincronicen en silencio. */
11:root {
12 --naranja: #c15728;
13 --teal: #1b6470;
14 --noche: #04161d;
15 --crema: #f5ecde;
16}
17* { box-sizing: border-box; }
18html, body { height: 100%; margin: 0; }
19body {
20 display: flex; flex-direction: column; align-items: center; justify-content: center;
21 gap: 1.6rem;
22 background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--teal) 45%, var(--noche)), var(--noche));
23 color: var(--crema);
24 font: 16px/1.5 system-ui, sans-serif;
25}
26img { width: 132px; height: 132px; }
27h1 { margin: 0; font-size: 2.6rem; font-weight: 600; letter-spacing: .02em; }
28form { width: min(560px, 82vw); display: flex; }
29input {
30 flex: 1; padding: .85rem 1.1rem; font: inherit;
31 color: var(--crema); background: color-mix(in srgb, var(--noche) 70%, transparent);
32 border: 1px solid color-mix(in srgb, var(--crema) 28%, transparent);
33 border-radius: 999px; outline: none;
34}
35input::placeholder { color: color-mix(in srgb, var(--crema) 55%, transparent); }
36input:focus { border-color: var(--naranja); box-shadow: 0 0 0 3px color-mix(in srgb, var(--naranja) 30%, transparent); }
37p { margin: 0; font-size: .82rem; color: color-mix(in srgb, var(--crema) 55%, transparent); }
38@media (prefers-reduced-motion: no-preference) { img { transition: transform .2s } img:hover { transform: scale(1.04) } }
39</style>
40</head>
41<body>
42 <img src="atuq128.png" alt="">
43 <h1>atuq</h1>
44 <form id="f" autocomplete="off">
45 <input id="q" type="text" placeholder="Buscá o escribí una dirección" autofocus>
46 </form>
47 <p id="motor"></p>
48 <script src="inicio.js"></script>
49</body>
50</html>