/* sensor.love wears the app's look (WebUI/home.html), in its light theme: Departure Mono on its 11 px grid (sizes in its multiples:
   22 to read, 44 / 88 / 176 to shout), ink on the app's light ground. Single sections stand on paper white or on red (the user's
   call); otherwise red only where data is going out. --dim is decoration only, never words to read. Outside this, only the
   Palestinian flag's colours, with its words, at the bottom. */
@font-face { font-family:"Departure Mono"; src:url("/fonts/DepartureMono-Regular.woff2") format("woff2"); font-display:swap; }
:root { --bg:#c6c0b0; --tile:#c1bbab; --line:#b0a998; --grain:#b9b2a1; --fg:#2b2722; --mid:#524c42; --dim:#8a8477; --faint:#5c564a; --lit:#14120f; --accent:#e0533a;
  --paper:#f3f0e8; --side:max(22px, 4vw); color-scheme:light; }   /* the app's light theme; --paper a warm white for a section's ground */

* { box-sizing:border-box; margin:0; padding:0; }
html { background:var(--bg); color:var(--fg); font:22px/33px "Departure Mono", ui-monospace, monospace; -webkit-font-smoothing:none; -moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { min-height:100vh; background:radial-gradient(circle at 2px 2px, var(--grain) .95px, transparent 1.2px) 0 0 / 4px 4px; }   /* the app's unlit dots */
body.home { touch-action:pan-x pan-y; --side:max(22px, 4vw, 50vw - 660px); }   /* an app on a phone: no pinch, no double-tap zoom (site.js stops Safari's pinch; the docs still zoom); on a wide screen it keeps to a middle 1320 px, its bands still edge to edge */
a { color:inherit; text-decoration:underline dotted 2px; text-underline-offset:6px; }
a:hover { color:var(--lit); }
:focus-visible { outline:2px solid var(--mid); outline-offset:4px; }
h1, h2, h3 { font-weight:normal; }
strong, b { font-weight:normal; color:var(--lit); }
code { font:inherit; color:var(--lit); overflow-wrap:anywhere; }   /* a long address breaks where it must; in a table it keeps its line (nowrap) */

/* the hero: the app itself, alive (monitor.html in the page's own phone, zoomed to fit by site.js), and its name */
.hero { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:44px 88px; align-items:center; min-height:100svh; padding:66px var(--side); }
.hero h1 { font-size:88px; line-height:88px; }
.hero .brand { display:block; font-size:16.5px; line-height:22px; color:var(--faint); margin-bottom:22px; }
.hero .say { font-size:22px; line-height:33px; max-width:30em; margin-top:33px; }
.hero .price { margin-top:22px; color:var(--faint); }
.hero .down { margin-top:44px; }
.monitor { display:block; width:390px; height:844px; border:0; border-radius:44px; margin:11px; box-shadow:0 0 0 11px var(--lit); }   /* a phone's dark rim on the light ground */

/* SENSORLOVE EXPERIENCE (site/xp.js): the whole screen, dark; in it the game, its one line at the top, the sound in its corner,
   the console and the cards to play, cut like the app's sensor cards (WebUI/home.html .tile: the corner off, a notch on the side, an LED red on the one
   playing). Dragged, a card brings up the card reader; dropped in its slot, it loads */
.win { height:100svh; min-height:560px; display:flex; flex-direction:column; background:var(--bg); color:var(--fg);
  --bg:#0a0908; --tile:#0f0e0c; --line:#23211d; --grain:#1a1916; --fg:#d6cebd; --mid:#9a9384; --dim:#514c44; --faint:#807868; --lit:#e2dacb; }   /* night: the app's dark theme, for the window only */
.win { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }   /* a long press plays: no copy, no callout */
.screen { position:relative; flex:1; min-height:0; overflow:hidden; }
.start { position:absolute; left:0; right:0; top:0; bottom:130px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:33px; padding:0 var(--side); text-align:center; }   /* the door: its name, TRY, the cards under it */
.start[hidden] { display:none; }
.start h2 { font-size:66px; line-height:66px; margin:0; color:var(--lit); }
.try { font:inherit; font-size:22px; line-height:33px; color:var(--lit); background:none; border:2px solid var(--lit); padding:11px 66px; cursor:pointer; }
.try:hover, .try:focus-visible { background:var(--lit); color:var(--bg); outline:none; }
.ask { font-size:11px; line-height:16.5px; color:var(--faint); }
@media (pointer:fine) { .ask { display:none; } }   /* only a phone asks */
.xp { position:absolute; inset:0; width:100%; height:100%; display:block; outline:none; touch-action:pan-y; }   /* a finger across plays, up and down still scrolls the page */
.xp:focus-visible { box-shadow:inset 0 0 0 2px var(--mid); }
.osc { position:absolute; left:var(--side); bottom:22px; font-size:11px; line-height:16.5px; color:var(--mid); pointer-events:none; }
.osc .k { color:var(--fg); margin-bottom:6px; }
.osc pre { font:inherit; min-height:4lh; padding:0; background:none; border:0; }
.osc .n { color:var(--faint); margin-top:6px; }
.sound { position:absolute; top:6px; right:calc(var(--side) - 7px); z-index:3; width:44px; height:44px; display:grid; place-items:center; padding:0; border:0; background:none; color:var(--mid); cursor:pointer; }   /* a speaker in dots: waves while it sounds, a cross when it does not */
.sound svg { width:30px; height:21px; fill:currentColor; }
.sound[aria-pressed="true"] { color:var(--lit); }
.sound[aria-pressed="true"] .x, .sound[aria-pressed="false"] .w { display:none; }
.sound:focus-visible { outline:2px solid var(--mid); outline-offset:-4px; }
.reader { position:absolute; left:50%; top:44%; width:280px; height:150px; margin:-75px 0 0 -140px; border:2px dashed var(--mid); border-radius:16px; background:var(--bg);
  opacity:0; translate:0 40px; pointer-events:none; transition:opacity .2s, translate .3s cubic-bezier(.2,.7,.2,1), border-color .15s; }
.reader.show { opacity:1; translate:0 0; }
.reader.hot { border-color:var(--accent); }
.rslot { position:absolute; left:44px; right:44px; top:26px; height:14px; border:2px solid var(--fg); border-radius:3px; }   /* the slot the card goes into */
.rled { position:absolute; right:22px; bottom:22px; width:8px; height:8px; background:var(--dim); }
.reader.hot .rled { background:var(--accent); }
.reader span { position:absolute; left:22px; bottom:38px; font-size:11px; line-height:14px; color:var(--faint); }
.reader .rsay { bottom:20px; color:var(--fg); }
.carts { position:absolute; left:0; right:0; bottom:22px; display:flex; justify-content:center; gap:16px; pointer-events:none; }
.cart { --n:12px; pointer-events:auto; position:relative; width:128px; height:84px; padding:0; border:0; font:inherit; color:inherit; text-align:left; cursor:grab; touch-action:none; background:var(--line);
  clip-path:polygon(0 0,calc(100% - var(--n)) 0,100% var(--n),100% 100%,0 100%,0 40px,4px 40px,4px 28px,0 28px); transition:translate .25s cubic-bezier(.2,.7,.2,1), transform .25s cubic-bezier(.2,.7,.2,1), background .2s, opacity .2s; }
.cart::before { content:""; position:absolute; inset:2px; background:var(--tile); clip-path:polygon(0 0,calc(100% - var(--n)) 0,100% var(--n),100% 100%,0 100%,0 38px,2px 38px,2px 24px,0 24px); }
.cart > * { position:relative; }
.cart .cn { position:absolute; left:12px; top:9px; font-size:11px; line-height:14px; color:var(--fg); }
.cart .cs { position:absolute; left:12px; top:23px; font-size:11px; line-height:14px; color:var(--faint); }
.cart canvas { position:absolute; left:12px; bottom:9px; width:96px; height:28px; }
.cart .cled { position:absolute; right:16px; top:11px; width:7px; height:7px; background:var(--dim); }
.cart:hover { background:var(--dim); }
.cart[aria-pressed="true"] { background:color-mix(in srgb, var(--accent) 60%, var(--tile)); translate:0 -8px; }   /* the one playing */
.cart[aria-pressed="true"] .cled { background:var(--accent); }
.cart.going { animation:insert .5s cubic-bezier(.2,.7,.2,1); }
@keyframes insert { 40% { translate:0 -26px; } 100% { translate:0 -8px; } }
.cart.held { z-index:5; transition:none; cursor:grabbing; }
.cart.into { transition:transform .35s ease-in, opacity .35s ease-in; opacity:0; }   /* down into the slot */
.cart:focus-visible { outline:2px solid var(--mid); outline-offset:3px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* the rest of the page: big words, one idea a section */
main > section:not(.hero) { padding:110px var(--side); border-top:2px solid var(--line); }
main > section.xpwin { padding:0; border-top:0; }
main > section.free { background:var(--accent); color:var(--lit); border-top:0; }   /* the price, on red */
main > section.how, main > section.sensors { background:var(--paper); border-top:0; }
section h2 { font-size:44px; line-height:55px; margin-bottom:44px; }
main > section p { max-width:36em; }
p + p { margin-top:22px; }
.giant { font-size:176px; line-height:176px; margin-bottom:44px; }
.big { font-size:44px; line-height:55px; max-width:24em; }
.steps { list-style:none; display:grid; gap:33px; max-width:44em; }
.steps li { display:grid; grid-template-columns:3ch 1fr; gap:22px; align-items:baseline; }
.steps .n { font-size:44px; color:var(--faint); }
.out { color:var(--lit); overflow-wrap:anywhere; }   /* a value on its way out: red dots run into it (red text would not read on paper) */
.out::before { content:""; display:inline-block; width:22px; height:2px; margin:0 11px 6px 0; background:linear-gradient(90deg, var(--accent) 2px, transparent 2px) 0 0 / 6px 2px; animation:flow .5s steps(3) infinite; }
@keyframes flow { to { background-position:6px 0; } }
.more { margin-top:44px; }
.more a { display:inline-block; margin:0 33px 11px 0; }
.names { list-style:none; display:grid; grid-template-columns:repeat(auto-fill, minmax(11em, 1fr)); gap:11px 44px; }
.soon { color:var(--faint); }
.support { display:grid; grid-template-columns:auto 1fr; gap:44px 88px; align-items:center; }
.wiz { position:relative; width:330px; padding-top:66px; }   /* he stands low, his bubble beside his hat */
.wizard { display:block; width:204px; height:216px; }   /* 12 px a dot */
.wizard .lit, .wizard .eyes { fill:var(--fg); }
.wizard .shade { fill:var(--dim); }
.wizard .eyes { animation:blink 5s steps(1) infinite; }
@keyframes blink { 96% { opacity:1; } 97%, 100% { opacity:0; } }
.bubble { position:absolute; left:132px; top:0; padding:6px 16px; white-space:nowrap; border:3px dotted var(--fg); border-radius:16px; background:var(--bg); }

footer { padding:44px var(--side) 66px; border-top:2px solid var(--line); color:var(--faint); font-size:16.5px; line-height:27px; }
footer nav { display:flex; flex-wrap:wrap; gap:8px 33px; margin-bottom:22px; font-size:22px; }
footer nav a { color:var(--mid); text-decoration:none; }
.ps { margin-top:44px; color:var(--mid); }
.ps .first { color:var(--fg); }
.flag { display:inline-block; width:24px; height:12px; vertical-align:0; margin-right:11px; shape-rendering:crispEdges; }
.flag .k { fill:#000; } .flag .w { fill:#fff; } .flag .g { fill:#149954; } .flag .r { fill:#e4312b; }

/* the docs: one page each, from docs/*.md (GitHub shows the same files) */
header.back { padding:22px var(--side); border-bottom:2px solid var(--line); }
header.back a { color:var(--mid); text-decoration:none; }
body.doc { --side:max(22px, 4vw, 50vw - 440px); }   /* a doc keeps to a middle 880 px on a wide screen, its back link and footer with it */
article.doc { padding:44px var(--side) 88px; }
.doc h1 { font-size:44px; line-height:55px; margin-bottom:44px; }
.doc h2 { font-size:33px; line-height:44px; margin:66px 0 22px; }
.doc h3 { font-size:22px; color:var(--lit); margin:44px 0 11px; }
.doc p, .doc ul, .doc ol, .doc pre, .doc details, .doc .table { margin-bottom:22px; }
.doc ul, .doc ol { padding-left:2ch; }
.doc li { margin-bottom:8px; }
li::marker { color:var(--faint); }
pre { padding:22px; overflow-x:auto; background:var(--tile); border:2px solid var(--line); }
.table { overflow-x:auto; }
table { border-collapse:collapse; font-size:16.5px; line-height:27px; }
th { text-align:left; font-weight:normal; color:var(--faint); }
th, td { padding:4px 33px 4px 0; border-bottom:1px solid var(--line); vertical-align:top; white-space:nowrap; }
td:last-child { color:var(--mid); padding-right:0; }
details { background:var(--tile); border:2px solid var(--line); }
summary { padding:11px 22px; color:var(--mid); cursor:pointer; list-style:none; }
summary::-webkit-details-marker { display:none; }
summary::before { content:"+ "; color:var(--faint); }
details[open] > summary::before { content:"- "; }
details > .table { margin:0 22px 22px; }
.lost { padding:110px var(--side); text-align:center; }
.lost h1 { font-size:44px; line-height:55px; margin:44px 0 22px; }
.frog { display:block; width:216px; height:128px; margin:0 auto; fill:var(--fg); shape-rendering:crispEdges; }

@media (max-width:999px) {   /* no room beside the phone: the words, then it */
  .hero { grid-template-columns:minmax(0, 1fr); min-height:0; }
  .monitor { justify-self:center; }
}
@media (max-width:1100px) {   /* the cards reach the console's corner: it goes over them */
  .osc { bottom:128px; }
}
@media (pointer:coarse) {   /* a finger plays the app in the phone as on a phone; no mouse to follow */
  .mouse { display:none; }
}
@media (max-width:760px) {
  .hero { padding:33px var(--side) 44px; gap:33px; }
  .hero h1 { font-size:44px; line-height:44px; }
  .osc { left:12px; bottom:106px; }   /* a phone: the console over the cards */
  .carts { gap:8px; bottom:14px; }
  .cart { width:108px; height:76px; }
  .cart canvas { width:70px; }
  .cart .cled { top:auto; right:12px; bottom:12px; }   /* by the drawing: the names take the card's width */
  .reader { width:240px; margin-left:-120px; }
  .start { bottom:110px; gap:22px; }
  .start h2 { font-size:44px; line-height:44px; }
  .wiz { width:100%; }
  section h2, .doc h1 { font-size:44px; line-height:55px; }
  .giant { font-size:88px; line-height:88px; }
  .big { font-size:22px; line-height:33px; }
  main > section:not(.hero, .xpwin) { padding:66px var(--side); }   /* the experience stays the whole screen, its cards on it */
  .support { grid-template-columns:1fr; }
  .doc h2 { font-size:22px; line-height:33px; }
}
@media (prefers-reduced-motion: reduce) { .out::before, .wizard .eyes, .cart.going { animation:none; } .cart, .reader { transition:none; } }