/* Meet the robot: Apple's highlights explorer in our flat shapes, on home,
   Why us and Prototype. Self-contained: Prototype does not load site.css.
   Glass pills over the drawing; a pill opens into its card and the camera
   flies to that part. static/js/meet.js, drawing in _robot.html. */
/* The site's two faces, the heading's and the text's (his call, 2026-10-05:
   every word in the same type, the explorer's included). Declared here as
   well, because /prototype/ loads this sheet without site.css. */
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/newsreader-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/eb-garamond-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* the explorer's highlight is white, not yellow (his call, 2026-10-04) */
.meet { --ink: #F4F4F0; --mute: rgba(244, 244, 240, .62); --line: rgba(244, 244, 240, .13); --hi: #F4F4F0; --blue: #3D63FF; --fail: #FF5A1F; --m-sans: "EB Garamond", "Garamond Fallback", Georgia, serif; --m-pad: var(--pad, 20px); color: var(--ink); font-family: var(--m-sans); -webkit-font-smoothing: antialiased; --glass: rgba(244, 244, 240, .1); --glass-hi: rgba(244, 244, 240, .16); --pill: #242429; --pill-hi: #303036; --pill-on: #18181C; --list-x: clamp(88px, 8vw, 124px); position: relative; }
.meet__stage { position: relative; height: clamp(620px, 84svh, 840px); overflow: hidden; border-radius: clamp(28px, 3vw, 44px); background: radial-gradient(120% 95% at 66% 38%, #1a1b20 0%, #0e0e10 58%, #070708 100%); box-shadow: inset 0 0 0 1px var(--line); isolation: isolate; }
.meet__stage::after { content: ""; position: absolute; inset: auto 0 0; height: 28%; background: linear-gradient(to top, rgba(5, 5, 5, .55), transparent); pointer-events: none; }
.meet__tag { position: absolute; right: clamp(20px, 2.4vw, 32px); bottom: clamp(18px, 2.2vw, 28px); z-index: 2; padding: 5px 9px; border: 1.5px solid var(--hi); border-radius: 6px; font: 400 14px/1 var(--m-sans); letter-spacing: .04em; color: var(--hi); }

/* the drawing */
.rb { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* moved by meet.js through their transform attributes */
.rb__scene, .rb__elbow, .rb__wrist, .rb__finger--l, .rb__finger--r { transform-origin: 0 0; }
.rb__floor { fill: none; stroke: rgba(244, 244, 240, .14); stroke-width: 2; }
.rb__frame { fill: #1f1f23; }
.rb__bench { fill: #2b2b30; }
.rb__leg { fill: #1f1f23; }
.rb [data-part] { transition: opacity .6s cubic-bezier(.22, .61, .36, 1); }
.rb__cable { fill: none; stroke: #34343a; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.rb__cable--thin { stroke-width: 3; }
.rb__pulse { fill: var(--hi); opacity: 0; }
.rb__brain { fill: #2b2b30; }
.rb__fin { fill: #3a3a41; }
.rb__screen { fill: #0A0A0A; }
.rb__bar { fill: #26262b; transition: fill .3s ease; }
.rb__bar.is-lit { fill: var(--hi); }
.rb__led { fill: #26262b; transition: fill .15s ease; }
.rb__led.is-on { fill: var(--blue); }
.rb__belt { fill: #151518; stroke: #3a3a41; stroke-width: 2; }
.rb__tread { fill: none; stroke: rgba(244, 244, 240, .22); stroke-width: 2; stroke-dasharray: 6 16; }
.rb__roller { fill: #3a3a41; }
.rb__bin { fill: none; stroke: rgba(244, 244, 240, .5); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.rb__label { font: 400 23px/1 var(--m-sans); fill: var(--mute); text-anchor: middle; }
.rb__display { fill: #121214; stroke: rgba(244, 244, 240, .16); stroke-width: 2; }
.rb__check circle { fill: none; stroke: rgba(244, 244, 240, .3); stroke-width: 2; transition: fill .2s ease, stroke .2s ease; }
.rb__check text { font: 400 20px/1 var(--m-sans); fill: var(--mute); }
.rb__mark { fill: none; stroke: #0A0A0A; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rb__check.is-ok circle { fill: var(--hi); stroke: var(--hi); }
.rb__check.is-bad circle { fill: var(--fail); stroke: var(--fail); }
.rb__check.is-ok text, .rb__check.is-bad text { fill: var(--ink); }
.rb__mast { fill: #4a4a52; }
.rb__lamp { fill: #26262b; transition: fill .12s ease; }
.rb__lamp--run.is-on { fill: var(--blue); }
.rb__lamp--pass.is-on { fill: var(--hi); }
.rb__lamp--fail.is-on { fill: var(--fail); }
.rb__cone { fill: var(--hi); opacity: 0; }
.rb__cone--up, .rb__cone--down { transition: none; }
.rb__scan { fill: none; stroke: var(--hi); stroke-width: 3; stroke-linecap: round; opacity: 0; }
.rb__lock { fill: none; stroke: var(--hi); stroke-width: 3.5; stroke-linecap: round; opacity: 0; }
.rb__cam { fill: #F4F4F0; }
.rb__lens { fill: var(--blue); }
.rb__iris { fill: #0A0A0A; }
.rb__carriage { fill: #34343a; }
.rb__upper { fill: var(--blue); }
.rb__fore, .rb__grip { fill: #F4F4F0; }
.rb__finger { fill: #BEBEB6; }
.rb__joint { fill: var(--hi); }
.rb__pin { fill: #0A0A0A; }
.rb__wj { fill: var(--blue); }
.rb__puck { fill: var(--blue); transition: fill .12s ease; }
.rb__puck.is-on { fill: #8FA6FF; }
.rb__ring { fill: none; stroke: var(--blue); stroke-width: 3; opacity: 0; }
.rb__part { transition: none; }
.rb__wcam { fill: #F4F4F0; }
.rb__wlens { fill: var(--blue); }
/* a pallet: the plate with its raised end, the board, its header and the plug */
.rb__pallet, .rb__plug { transition: none; }
.rb__plate { fill: #5A5F68; }
.rb__board { fill: var(--blue); }
.rb__header { fill: #0A0A0A; }
/* the unit turned on edge, and the units standing in the tote: plug colour over board colour */
.rb__cap { fill: #F4F4F0; }
.rb__packed { fill: url(#rb-bar); }
.rb__stop { stop-opacity: 1; }
.rb__stop--top { stop-color: #F4F4F0; }
.rb__stop--body { stop-color: var(--blue); }
.meet[data-shape="six"] .rb__board, .meet[data-shape="six"] .rb__stop--body { fill: #9AA1A9; stop-color: #9AA1A9; }
.meet[data-shape="six"] .rb__cap, .meet[data-shape="six"] .rb__stop--top { fill: var(--blue); stop-color: var(--blue); }
.meet[data-shape="round"] .rb__cap, .meet[data-shape="round"] .rb__stop--top { fill: #9AA1A9; stop-color: #9AA1A9; }
/* the packer on the beam */
.rb__car, .rb__rod, .rb__clamp { fill: #9AA1A9; }
/* the locked reject bin under the bench; its lid is orange only while a unit fails */
.rb__slot { fill: #0A0A0A; }
.rb__vault { fill: #2b2b30; stroke: rgba(244, 244, 240, .5); stroke-width: 5; }
.rb__lid { fill: #3a3a41; transition: fill .15s ease; }
.rb__lid.is-on { fill: var(--fail); }
.rb__padlock { fill: #BEBEB6; transition: fill .1s ease; }
.rb__padlock.is-on { fill: var(--hi); }
.rb__dock { fill: #F4F4F0; }

/* what stays lit when a part is picked; everything else steps back */
.meet[data-focus] .rb [data-part] { opacity: .06; }
.meet[data-focus="part"] .rb :is([data-part="part"], [data-part="arm"]),
.meet[data-focus="vision"] .rb :is([data-part="vision"], [data-part="part"], [data-part="arm"]),
.meet[data-focus="touch"] .rb :is([data-part="touch"], [data-part="arm"], [data-part="part"]),
.meet[data-focus="tester"] .rb :is([data-part="tester"], [data-part="part"]),
.meet[data-focus="brain"] .rb [data-part="brain"],
.meet[data-focus="reset"] .rb :is([data-part="reset"], [data-part="part"]) { opacity: 1; }

/* the list: glass pills over the drawing */
.meet__list { position: absolute; top: 0; bottom: 0; left: var(--list-x); z-index: 3; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; list-style: none; pointer-events: none; }
/* the pills are solid: the drawing zooms in behind them and must not
   read through the words */
.meet__item { overflow: hidden; border-radius: 30px; background: var(--pill); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); pointer-events: auto; transition: background .25s ease; }
.meet__item:hover { background: var(--pill-hi); }
.meet__item.is-on { background: var(--pill-on); }
.meet__pill { display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 32px 0 16px; border: 0; background: none; color: var(--ink); font: 400 21px/1 var(--m-sans); letter-spacing: 0; white-space: nowrap; cursor: pointer; animation: meet-in .45s .12s both; }
.meet__plus { display: grid; width: 26px; height: 26px; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.meet__plus svg { width: 100%; height: 100%; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.meet__item:hover .meet__plus { transform: rotate(90deg); }
.meet__dot { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--dot, var(--hi)); box-shadow: inset 0 -1.5px 0 rgba(255, 255, 255, .6), 0 0 0 1px rgba(255, 255, 255, .12); transition: background .3s ease; }
.meet__name { display: block; }
.meet__card { display: none; width: min(27rem, calc(100vw - 2 * var(--m-pad) - var(--list-x) - 40px)); padding: 26px 30px 28px; outline: none; }
.meet__text { font: 400 21px/1.45 var(--m-sans); letter-spacing: 0; color: rgba(244, 244, 240, .74); }
.meet__text b { font-weight: inherit; color: inherit; }
.meet__item.is-on .meet__pill { display: none; }
/* the item clips its content, so the ring is drawn inside */
.meet__pill:focus-visible, .meet__card:focus-visible { outline-offset: -4px; border-radius: 30px; }
.meet__item.is-on .meet__card { display: block; animation: meet-in .5s .14s both; }
.meet__swatches { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.meet__swatch { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--c); box-shadow: inset 0 -1.5px 0 rgba(255, 255, 255, .55), 0 0 0 2px transparent; cursor: pointer; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease; }
.meet__swatch:hover { transform: scale(1.1); }
.meet__swatch[aria-checked="true"] { box-shadow: inset 0 -1.5px 0 rgba(255, 255, 255, .55), 0 0 0 3px #1c1c20, 0 0 0 5px var(--ink); }
.meet__swname { margin-left: 6px; font: 400 18px/1 var(--m-sans); color: var(--mute); }
@keyframes meet-in { from { opacity: 0; filter: blur(3px); transform: translateY(6px); } to { opacity: 1; filter: none; transform: none; } }

/* up, down and close: they arrive when a card is open */
.meet__btn { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: var(--glass); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: var(--ink); cursor: pointer; transition: background .2s ease, opacity .3s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1), visibility 0s linear .5s; }
.meet__btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.meet__btn:hover { background: var(--glass-hi); }
.meet__btn:active { transform: scale(.94); }
.meet__btn:disabled { opacity: .35; cursor: default; }
.meet__prev, .meet__next { flex: none; }
.meet__nav { position: absolute; top: 50%; left: clamp(22px, 2.4vw, 36px); z-index: 3; display: flex; flex-direction: column; gap: 10px; transform: translateY(-50%); }
.meet__nav .meet__btn { opacity: 0; visibility: hidden; transform: translateY(18px); }
.meet__close { position: absolute; top: clamp(18px, 2vw, 26px); right: clamp(18px, 2vw, 26px); z-index: 3; opacity: 0; visibility: hidden; transform: scale(.4) rotate(-90deg); }
.meet[data-open] .meet__nav .meet__btn:not(:disabled), .meet[data-open] .meet__close { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.meet[data-open] .meet__nav .meet__btn:disabled { opacity: .35; visibility: visible; transform: none; transition-delay: 0s; }

/* without JS: the cards stand under the drawing */
.meet:not(.is-live) .meet__list { position: static; margin-top: 24px; pointer-events: auto; }
.meet:not(.is-live) .meet__pill, .meet:not(.is-live) .meet__nav, .meet:not(.is-live) .meet__close, .meet:not(.is-live) .meet__swatches { display: none; }
.meet:not(.is-live) .meet__card { display: block; }

@media (max-width: 899px) {
    .meet__stage { height: clamp(300px, 92vw, 520px); }
    .meet__list { position: relative; inset: auto; flex-direction: row; justify-content: flex-start; align-items: flex-end; gap: 10px; margin: 16px calc(-1 * var(--m-pad)) 0; padding: 4px var(--m-pad) 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--m-pad); scrollbar-width: none; pointer-events: auto; }
    .meet__list::-webkit-scrollbar { display: none; }
    .meet__item { flex: none; scroll-snap-align: start; }
    .meet[data-open] .meet__list { scroll-padding-inline: 0; }
    .meet[data-open] .meet__item { width: min(86%, 27rem); scroll-snap-align: center; transition: background .25s ease, opacity .3s ease; }
    .meet[data-open] .meet__item:first-child { margin-left: calc((100% - min(86%, 27rem)) / 2); }
    .meet[data-open] .meet__item:last-child { margin-right: calc((100% - min(86%, 27rem)) / 2); }
    .meet[data-open] .meet__item:not(.is-on) { opacity: .45; }
    .meet[data-open] .meet__pill { display: none; }
    .meet[data-open] .meet__card { display: block; width: auto; animation: none; }
    .meet__pill { height: 56px; padding: 0 26px 0 14px; font-size: 18px; }
    .meet__text { font-size: 19px; }
    .meet__nav { display: none; }
    .meet:not(.is-live) .meet__list { flex-direction: column; align-items: stretch; margin-inline: 0; padding-inline: 0; overflow: visible; }
}

/* A phone on its side: the drawing fits the screen under the bar (centred,
   it clears the bar too), and the
   pills and the open card stand beside it instead of under it, so opening a
   card never pushes the drawing off the screen. */
@media (max-width: 899px) and (orientation: landscape) and (max-height: 540px) {
    .meet.is-live { --m-h: calc(100svh - 2 * var(--nav, 64px) - 8px); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; align-items: center; }
    .meet__stage { height: var(--m-h); }
    .meet.is-live .meet__list { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; max-height: var(--m-h); margin: 0; padding: 0; overflow-x: hidden; overflow-y: auto; scroll-snap-type: none; }
    .meet.is-live .meet__item, .meet[data-open] .meet__item { width: auto; margin: 0; opacity: 1; }
    .meet[data-open] .meet__item:first-child, .meet[data-open] .meet__item:last-child { margin: 0; }
    .meet[data-open] .meet__item:not(.is-on) { opacity: 1; }
    .meet[data-open] .meet__pill { display: flex; }
    .meet[data-open] .meet__item.is-on .meet__pill { display: none; }
    .meet[data-open] .meet__card { display: none; }
    .meet[data-open] .meet__item.is-on .meet__card { display: block; }
    .meet__pill { height: 42px; padding: 0 20px 0 10px; font-size: 17px; }
    .meet__plus, .meet__dot { width: 22px; height: 22px; }
    .meet__card { width: auto; padding: 14px 18px 16px; }
    .meet__text { font-size: 16.5px; line-height: 1.4; }
    .meet__swatches { margin-top: 12px; }
    .meet__swatch { width: 28px; height: 28px; }
    .meet__close { top: 12px; right: auto; left: calc((100% - 14px) * .6 - 58px); }
}

/* home and Prototype: the section around the explorer */
.meet-sec { position: relative; padding: clamp(96px, 16vh, 180px) max(var(--pad, 20px), calc((100% - 1280px) / 2 + var(--pad, 20px))); background: #050505; color: #F4F4F0; font-family: "EB Garamond", "Garamond Fallback", Georgia, serif; }
.meet-sec__h { max-width: 16ch; margin: 0 0 clamp(36px, 6vh, 72px); font: 400 clamp(32px, 3.5vw, 52px)/1.08 "Newsreader", "Newsreader Fallback", ui-serif, Georgia, serif; letter-spacing: -.012em; text-wrap: balance; color: #F4F4F0; }
.meet-sec__h em { font-style: normal; color: inherit; }
.meet :focus-visible { outline: 2px solid #F4F4F0; outline-offset: 4px; }
.meet p { margin: 0; }
.meet ul { margin: 0; padding: 0; }
.embed .meet-sec { display: none; }

/* under the robot on home and Why us: the way into the prototype */
.meet-cta { display: flex; justify-content: center; margin: clamp(28px, 5vh, 48px) 0 0; }
.meet-cta__btn { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 28px; border-radius: 999px; background: #F4F4F0; color: #0A0A0A; font: 400 17px/1 "EB Garamond", "Garamond Fallback", Georgia, serif; letter-spacing: .02em; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.meet-cta__btn span { transition: transform .3s cubic-bezier(.22, .61, .36, 1); }
.meet-cta__btn:hover { background: #FFFFFF; }
.meet-cta__btn:hover span { transform: translateX(5px); }
.meet-cta__btn:active { transform: scale(.97); }
.meet-cta__btn:focus-visible { outline: 2px solid #F4F4F0; outline-offset: 4px; }