/* preceptoros.org · the landing. Born 2026-10-25 with the recency decree: the entry shows only the
   work built in the last days. It loads none of the older shared sheets and no script but the PWA.
   No raw colour lives here (barrido ratchet) and no on-demand module is pulled to the door
   (test_atlas): the page is ink on paper in the system's own colours, light or dark as the
   reader's device asks. */
:root{--fg:CanvasText;--bg:Canvas;--radius:8px;color-scheme:light dark}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
:root{--soft:color-mix(in srgb,var(--fg) 72%,var(--bg));--line:color-mix(in srgb,var(--fg) 20%,transparent)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--fg);font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif}
.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:8px;padding:8px 12px;background:var(--fg);color:var(--bg)}
main{max-width:40rem;margin:0 auto;padding:24px 16px 32px}
.mark{display:block;width:48px;height:48px}
h1{font-size:1.9rem;line-height:1.15;margin:16px 0 6px}
.lead{margin:0 0 20px;color:var(--soft)}
.door{display:block;min-height:44px;padding:14px 16px;margin:12px 0;border:2px solid currentColor;border-radius:var(--radius);color:var(--fg);text-decoration:none}
.door b{display:block;font-size:1.15rem;text-decoration:underline}
.door span{display:block;color:var(--soft)}
.door:hover b{text-decoration-thickness:3px}
.door:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.note{margin:20px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:.92rem;color:var(--soft)}
/* P3 [1d] (2026-10-26): the three doors in the house bubble language. landing_doors.js draws a speech
   bubble with the title in comic letters on each door; the plain title stays for screen readers and
   for anyone without JavaScript. Until every bubble is drawn, the doors look exactly as before. */
.door-art{display:block;width:100%;max-width:320px;height:auto;margin:0 auto 2px}
.con-burbujas .door{border:0;padding:6px 4px 10px;text-align:center}
.con-burbujas .door b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* [2] (2026-10-26): the web and the app, two speech bubbles facing each other, drawn by the same
   landing_doors.js. Without JavaScript they are two plain paragraphs. */
#web-app h2{font-size:1.25rem;margin:28px 0 8px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.side{margin:0;padding:12px;border:2px solid var(--line);border-radius:var(--radius)}
.side b{display:block;font-size:1.1rem}
.side span{display:block;color:var(--soft)}
.con-burbujas .side{border:0;padding:0 2px 6px;text-align:center}
.con-burbujas .side b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.tech{margin:12px 0 0;color:var(--soft);font-size:.92rem}
.tech summary{cursor:pointer;padding:12px 0;min-height:44px}
.tech a{color:var(--fg)}
@media (max-width:480px){.pair{grid-template-columns:1fr}}
/* North D1 (2026-10-26): /get-the-app/, the app's install guide, and its link under the web/app pair.
   Same ink on paper; fingerprints wrap so they never push the page sideways on a phone. */
.get-app{margin:12px 0 0;text-align:center}
.get-app a{display:inline-block;min-height:44px;padding:10px 16px;border:2px solid currentColor;border-radius:var(--radius);color:var(--fg)}
.guide h2{font-size:1.2rem;margin:26px 0 8px}
.guide li{margin:6px 0}
.guide code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}
.guide .sha{display:inline-block;max-width:100%;overflow-wrap:anywhere;padding:2px 4px;border:1px solid var(--line);border-radius:var(--radius)}
.guide .aviso{padding:10px 12px;border-left:3px solid currentColor;color:var(--soft)}
.guide a{color:var(--fg)}
.pruebas{width:100%;border-collapse:collapse;font-size:.92rem}
.pruebas th,.pruebas td{text-align:left;vertical-align:top;padding:6px 8px;border-bottom:1px solid var(--line)}
/* North N2 (2026-10-26): /aduana/ mounts the node-card checker; its buttons keep the 44 px touch target. */
#comprueba button{min-height:44px;margin:6px 8px 6px 0;padding:8px 14px;border:2px solid currentColor;border-radius:var(--radius);background:var(--bg);color:var(--fg);font:inherit}
#comprueba button:disabled{opacity:.55}
#comprueba [role=status]{margin:8px 0;color:var(--soft)}