/* Misma estética que Motionabi: un solo tema oscuro y un solo acento, el verde menta de itskeo sobre negro verdoso. */
@font-face{font-family:'Geist';font-weight:100 900;font-display:swap;src:url(/fonts/Geist.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-weight:100 900;font-display:swap;src:url(/fonts/GeistMono.woff2) format('woff2')}
/* fuentes de los bocetos */
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/InstrumentSerif-400-italic.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url(/fonts/Inter-600-normal.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-weight:800;font-display:swap;src:url(/fonts/InterTight-800-normal.woff2) format('woff2')}

:root{
  --bg:#0f1412; --surface:#151b18; --surface-2:#1d2521; --ink:#e9efeb; --muted:#95a39b; --line:#28322d;
  --accent:#72e5b2; --on-accent:#0a1a12; --bad:#ff8a80;
  --sans:'Geist',ui-sans-serif,system-ui,sans-serif; --mono:'Geist Mono',ui-monospace,'Cascadia Code',monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;padding-bottom:150px}
::selection{background:color-mix(in oklab,var(--accent) 28%,transparent)}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}
h1,h2,h3{letter-spacing:-.035em;line-height:1.04;font-weight:640;text-wrap:balance;margin:0}
p{text-wrap:pretty}
h1{font-size:clamp(40px,7vw,72px)}
h2{font-size:28px}
.wrap{max-width:1280px;margin:0 auto;padding:0 16px}
@media (min-width:768px){.wrap{padding:0 32px}}
.muted{color:var(--muted)}
.acento{color:var(--accent)}
.lede{font-size:17px;max-width:58ch;color:var(--muted);margin:18px 0 0}
.lede b{color:var(--ink);font-weight:500}
code,.mono{font-family:var(--mono);font-size:.9em}

/* cabecera */
.top{position:sticky;top:0;z-index:5;border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.top.scrolled{background:color-mix(in oklab,var(--bg) 80%,transparent);backdrop-filter:blur(20px);border-color:var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;height:68px}
.bar-l{display:flex;align-items:center;gap:8px}
@media (min-width:768px){.bar-l{gap:32px}}
.logo{font-size:22px;font-weight:600;letter-spacing:-.045em;text-decoration:none}
.logo b{color:var(--accent);font-weight:600}
.tabs{display:flex;align-items:center;overflow-x:auto}
.tabs a{text-decoration:none;padding:8px 16px;border-radius:999px;font-size:15px;color:var(--muted);white-space:nowrap;transition:color .2s}
.tabs a:hover{color:var(--ink)}
.tabs a.on{background:var(--surface-2);color:var(--ink)}
.chip-claude{display:inline-flex;height:44px;align-items:center;gap:10px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:0 16px;font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;transition:border-color .2s}
.chip-claude:hover{border-color:color-mix(in oklab,var(--ink) 40%,transparent)}
.punto{position:relative;width:10px;height:10px;flex:none}
.punto::before,.punto::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent)}
.punto::before{opacity:.6;animation:ping 1.6s var(--ease) infinite}
@keyframes ping{75%,100%{transform:scale(2.2);opacity:0}}
.punto.off::before{display:none}.punto.off::after{background:color-mix(in oklab,var(--muted) 60%,transparent);animation:pulso 1.6s ease-in-out infinite}
@keyframes pulso{50%{opacity:.4}}
@media (max-width:640px){.chip-claude span.t{display:none}.chip-claude{padding:0 14px}}

/* botones y campos */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:0 20px;font-weight:500;font-size:15px;text-decoration:none;transition:transform .15s var(--ease),background .2s,border-color .2s}
.btn:hover:not(:disabled){border-color:color-mix(in oklab,var(--ink) 35%,transparent)}
.btn:active:not(:disabled){transform:scale(.98)}
.btn:disabled{opacity:.45;cursor:default}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn.primary:hover:not(:disabled){background:color-mix(in oklab,var(--accent) 88%,white)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--bad)}
.btn.sm{height:34px;padding:0 14px;font-size:14px}
.field{width:100%;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:14px;padding:11px 14px;font:inherit}
.field::placeholder{color:color-mix(in oklab,var(--muted) 80%,transparent)}
.field:focus{outline:2px solid var(--accent);outline-offset:1px}
label.lbl{display:block;font-weight:500;font-size:14px;margin:16px 0 6px}
input[type=checkbox]{accent-color:var(--accent)}

/* biblioteca */
.hero{padding:56px 0 8px}
@media (min-width:768px){.hero{padding-top:80px}}
.filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:28px 0 8px}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 14px;font-size:14px;font-weight:500;color:var(--muted);transition:color .2s,border-color .2s}
.chip:hover{color:var(--ink)}
.chip.on{background:var(--surface-2);color:var(--ink);border-color:color-mix(in oklab,var(--accent) 45%,transparent)}
.search{flex:1;min-width:200px;max-width:340px;margin-left:auto;border-radius:999px}
.toggle{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.cat{margin-top:56px}
.cat h2{font-size:32px}
.cat-blurb{color:var(--muted);margin:8px 0 20px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;text-align:left;padding:0;transition:transform .3s var(--ease),border-color .2s}
button.card:hover{transform:translateY(-3px);border-color:color-mix(in oklab,var(--ink) 25%,transparent)}
.card.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.card.soon{cursor:help}
.card.soon .sk{opacity:.45}
.card .sk{background:var(--surface-2);display:grid;place-items:center;padding:16px 0;position:relative}
.card .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.card .code{font:500 13px var(--mono);color:var(--accent)}
.card .name{font-weight:600;letter-spacing:-.02em;line-height:1.25}
.card .what{font-size:14px;color:var(--muted);line-height:1.45}
.badge{position:absolute;top:10px;right:10px;font-size:12px;font-weight:500;padding:3px 10px;border-radius:999px;background:var(--bg);border:1px solid var(--line);color:var(--muted)}
.badge.add{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.vacio{padding:40px 0;color:var(--muted)}

/* bandeja: la receta que se está armando */
.tray{position:fixed;left:0;right:0;bottom:0;z-index:6;background:color-mix(in oklab,var(--surface) 92%,transparent);backdrop-filter:blur(20px);border-top:1px solid var(--line);animation:sube .35s var(--ease)}
@keyframes sube{from{transform:translateY(100%)}to{transform:none}}
.tray-in{display:grid;grid-template-columns:1fr auto;gap:6px 16px;padding-top:14px;padding-bottom:14px;align-items:center}
.tray-codes{display:flex;flex-wrap:wrap;gap:6px;min-width:0;align-items:center}
.tray-codes .pick{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:4px 6px 4px 12px;font:500 13px var(--mono)}
.tray-codes .pick span{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--line);font:500 12px var(--sans)}
.tray-msg{grid-column:1;font-size:14px;color:var(--muted)}
.tray-msg.bad{color:var(--bad)}
.tray-act{grid-column:2;grid-row:1 / span 2;display:flex;gap:8px}
@media (max-width:720px){.tray-in{grid-template-columns:1fr}.tray-act{grid-column:1;grid-row:auto}.tray-act .btn{flex:1;padding:0 12px}}

/* recetas */
.recetas{display:grid;gap:12px;margin-top:40px}
.receta{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:20px;display:grid;grid-template-columns:1fr auto;gap:8px 16px;align-items:start}
.receta .nombre{font-weight:600;font-size:18px;letter-spacing:-.02em}
.receta .notas{color:var(--muted);font-size:15px;margin-top:2px}
.receta .codes{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.receta .codes span{font:500 12.5px var(--mono);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.receta .acc{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.ab{font:500 15px var(--mono);background:var(--surface-2);color:var(--accent);border-radius:999px;padding:0 14px;height:34px;border:1px solid color-mix(in oklab,var(--accent) 40%,transparent)}
.ab.big{font-size:20px;height:48px;padding:0 20px}
@media (max-width:640px){.receta{grid-template-columns:1fr}.receta .acc{justify-content:flex-start}}

/* conectar */
.conectar{max-width:760px}
.nota{display:flex;gap:16px;border:1px solid color-mix(in oklab,var(--accent) 40%,transparent);background:var(--surface);border-radius:22px;padding:20px 24px;margin-top:40px}
.nota .ico{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:var(--accent);color:var(--on-accent)}
.nota p{margin:0}.nota .t{font-size:18px;font-weight:600;letter-spacing:-.02em}.nota .d{margin-top:4px;font-size:15.5px;color:var(--muted)}
.paso{margin-top:64px}
.paso > p{color:var(--muted);margin:12px 0 0}
.paso > p b{color:var(--ink);font-weight:500}
.code{position:relative;margin-top:20px;background:var(--surface-2);border:1px solid var(--line);border-radius:18px;padding:18px 64px 18px 20px;font:400 14px/1.8 var(--mono);white-space:pre-wrap;word-break:break-word}
.code .copy{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--muted)}
.code .copy:hover{color:var(--ink)}
.donde{margin-top:20px;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:12px 16px}
.donde summary{font-weight:500;font-size:15px;display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}
.donde summary .muted{font-weight:400;font-size:14px;font-family:var(--mono)}
.donde p{color:var(--muted);font-size:14.5px;margin:10px 0}
.aviso{display:flex;gap:10px;max-width:560px;flex-direction:column;border:1px solid var(--line);background:var(--surface-2);border-radius:14px;padding:16px;margin-top:16px}
.estado{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:12px 20px;font-size:15px;margin-top:24px}
.estado.ok{border-color:color-mix(in oklab,var(--accent) 50%,transparent)}
.estado b{font-weight:500}
.tools{display:grid;gap:16px;margin-top:32px}
@media (min-width:768px){.tools{grid-template-columns:1fr 1fr}}
.tool{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:24px}
.tool h3{font-size:19px;letter-spacing:-.02em;display:flex;align-items:center;gap:12px}
.tool h3 i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--surface-2);color:var(--accent);font-style:normal}
.tool dl{margin:20px 0 0;display:flex;flex-direction:column;gap:14px}
.tool dt{font:400 13px var(--mono)}
.tool dd{margin:2px 0 0;font-size:14.5px;color:var(--muted)}

/* diálogo y aviso */
dialog{border:1px solid var(--line);border-radius:28px;background:var(--surface);color:var(--ink);padding:28px;width:min(540px,calc(100vw - 24px))}
dialog::backdrop{background:rgb(8 12 10 / .62);backdrop-filter:blur(6px)}
dialog h3{font-size:28px;margin:0 0 8px}
dialog .row{display:flex;gap:8px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:130px;transform:translateX(-50%);z-index:9;background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;font-weight:500;font-size:14px}
.cargando{padding:80px 0}
.err{color:var(--bad)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* bocetos: colores fijos, son el dibujo de un cuadro de video */
.skv{height:200px;width:auto;display:block}
.skv .frame{fill:none;stroke:rgba(0,0,0,.18);stroke-width:.8}
.skv text{dominant-baseline:auto}
.skv .r{fill:#E7E2DA}.skv .f{fill:#A8A29A}.skv .fl{fill:#C9C4BC}.skv .flit{fill:#D8D2C8}.skv .o{stroke:#fff;stroke-width:1.6}.skv .oo{stroke:#fff;stroke-width:3}
.skv .wh{fill:#fff}.skv .st{stroke:#D9D2C6;stroke-width:.6}.skv .st2{stroke:#1D1A16;stroke-width:1}.skv .st0{fill:#fff;stroke:#CFC8BC;stroke-width:.6}
.skv .i{fill:#2A2622}.skv .m{fill:#C9C2B6}.skv .m2{fill:#9A9286}.skv .a{fill:#FAE67A}.skv .d{fill:#26231F}.skv .k{fill:#0B0A09}.skv .y{fill:#F7DD62}
.skv .b{fill:#CFE0F4}.skv .g{fill:#34C759}.skv .x{fill:#E5484D}.skv .cr{fill:#F4E9D2}.skv .car{fill:#C98B4E}.skv .pk{fill:#F6B7C9}.skv .ice{fill:#CFE8F5}
.skv .c1{fill:#7C6CF2}.skv .c2{fill:#2BB3A3}.skv .c3{fill:#F08A4B}.skv .c1t{fill:#7C6CF2}.skv .sky{fill:#BFD9EE}.skv .hill{fill:#7FAF8A}.skv .seat{fill:#5F6B7A}
.skv .blur{fill:#D3CCC1;opacity:.8}.skv .pat{fill:#EFE7DA}.skv .off{fill:#ECE8E1}.skv .offw{fill:#F6F4EF}.skv .lnk{fill:#2F6FDB}.skv .gl{fill:#FAE67A;opacity:.6}
.skv .imb{fill:#2F8BFF}.skv .glass{fill:rgba(255,255,255,.55);stroke:#fff;stroke-width:.6}.skv .ig2{fill:#1E88F5}.skv .ios{fill:#F2F2F7}.skv .pan{fill:#FAFAF8;stroke:#ECE8E1;stroke-width:.6}
.skv .paper{fill:#D9CDB8}.skv .tape{fill:rgba(250,240,200,.85)}.skv .mon{fill:#3A3632}.skv .kb{fill:#7C6CF2;opacity:.85}.skv .dark{fill:#2B3133}
.skv .warm{fill:#FFB25B;opacity:.18}.skv .sepia{fill:#B98A55;opacity:.22}.skv .teal{fill:#1E6F78;opacity:.28}
.skv .ol{stroke:#2A2622;stroke-width:.9;paint-order:stroke}.skv .dash{stroke:#2A2622;stroke-width:.7;stroke-dasharray:2 2}
.skv .sk{stroke:#2A2622;stroke-width:1}.skv .sk2{stroke:#2A2622;stroke-width:1.3}.skv .sm{stroke:#9A9286;stroke-width:.8}.skv .sw{stroke:#fff;stroke-width:1.4}
.skv .sg{stroke:#2E9E4F;stroke-width:1.3}.skv .sx{stroke:#E5484D;stroke-width:2.6;stroke-linecap:round}.skv .ring{stroke:#FAE67A;stroke-width:3;stroke-linecap:round}.skv .ringbg{stroke:rgba(255,255,255,.6);stroke-width:3}
.skv .glowl{stroke:#F5D53A;stroke-width:2;filter:drop-shadow(0 0 2px #F5D53A)}.skv .wl{stroke:#fff;stroke-width:1}.skv .wob{stroke:#fff;stroke-width:1.3;stroke-dasharray:3 1.2}.skv .wobf{fill:none;stroke:#fff;stroke-width:1}
.skv .gv{fill:#1F3A2C}.skv .gd{fill:#1F3A2C}.skv .gl2{fill:#8FB39A}.skv .wine{fill:#6B1036}.skv .wine2{fill:#6B1036}.skv .gtint{fill:#2E5E3E;opacity:.16}