/* Same tokens as the project sites, plus the landing page's panels, stage and shadows. */
:root {
  --bg:#fff; --fg:#1b1f1a; --muted:#5b625a; --line:#e3e6e1; --accent:#8bd62a; --accent-dark:#3f6b0c; --callout:#f3f4ee;
  --hero:linear-gradient(135deg, #f3f4ee 0%, #e9ece3 100%);
  --header:rgba(255,255,255,.85);
  --glow:rgba(139,214,42,.35);
  --lift:0 18px 44px rgba(27,31,26,.14);
  --scrim:rgba(18,20,17,.8);
  --ph-a:#e6e9e1; --ph-b:#d9ddd3; --ph-fg:#2f352c; --ph-muted:#6a7265; --ph-line:rgba(47,53,44,.18); --ph-hatch:rgba(47,53,44,.05);
}

/* Product renders and photos have white backdrops, so they always sit on a light, softly lit stage. */
:root { --stage:radial-gradient(120% 90% at 50% 40%, #fff 0%, #eef0ec 55%, #dde1d8 100%); --radius:18px; --page:80rem; --gutter:2.5rem; --edge:max(var(--gutter), calc((100vw - var(--page)) / 2 + var(--gutter))); }

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--fg); font:17px/1.7 "Inter", system-ui, -apple-system, sans-serif; }
a { color:inherit; }
img { display:block; max-width:100%; }

.wrap { max-width:var(--page); margin:0 auto; padding:0 var(--gutter) 4rem; }

/* Header */
.top { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.25rem var(--edge); background:var(--header); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.mark { width:28px; height:36px; background:var(--accent); border-radius:2px; }
.brand .name { font-size:2rem; font-weight:800; letter-spacing:-.04em; line-height:1; }
.brand .sub { font:.8rem/1.2 ui-monospace, Menlo, monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border-left:1px solid var(--line); padding-left:.9rem; }

/* Hero carousel */
.hero { position:relative; margin:0; border-radius:var(--radius); overflow:hidden; background:var(--hero); border:1px solid var(--line); }
.slides { position:relative; min-height:540px; }
.slide { position:absolute; inset:0; display:grid; grid-template-columns:1fr 1.35fr; align-items:center; gap:2.5rem; padding:0 0 0 4rem; opacity:0; visibility:hidden; transition:opacity .7s ease, visibility .7s; }
.slide.is-active { opacity:1; visibility:visible; }
.slide-text { max-width:30rem; }
.eyebrow { display:block; color:var(--accent-dark); font:700 .75rem/1.4 ui-monospace, Menlo, monospace; letter-spacing:.3em; text-transform:uppercase; }
.slide h1, .slide .h1 { margin:.75rem 0 1rem; font-size:clamp(2.6rem, 6vw, 4.6rem); line-height:1; letter-spacing:-.045em; font-weight:800; }
.slide p { color:var(--muted); margin:0 0 2rem; font-size:1.05rem; }
/* Pictures fill the right side: one large render with two smaller views beside it. */
.visual { align-self:stretch; display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; gap:.9rem; padding:1.25rem 1.25rem 1.25rem 0; min-height:0; }
.v { margin:0; position:relative; overflow:hidden; border-radius:calc(var(--radius) - 4px); background:var(--stage); }
.v.main { grid-row:span 2; }
.v img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; transform:scale(calc(var(--zoom, 1) * .94)) translateY(10px); opacity:.6; transition:transform 1.2s cubic-bezier(.2,.7,.2,1), opacity .9s; }
.v.photo img { filter:brightness(1.1) contrast(1.04); }
.slide.is-active .v img { transform:scale(var(--zoom, 1)); opacity:1; }
.slide.is-active .v.sub img { transition-delay:.15s; }
.slide.is-active .v.sub + .v.sub img { transition-delay:.3s; }
.v:hover img { transform:scale(calc(var(--zoom, 1) * 1.05)); }
.pill { display:inline-flex; align-items:center; gap:.6rem; padding:.8rem 1.4rem; border:1.5px solid var(--accent-dark); border-radius:999px; color:var(--accent-dark); text-decoration:none; font-weight:700; font-size:.95rem; box-shadow:0 0 22px var(--glow); transition:background .2s, color .2s, border-color .2s, gap .2s; }
.pill:hover { background:var(--accent); border-color:var(--accent); color:#1b1f1a; gap:.9rem; }
.hero-controls { position:absolute; left:4rem; bottom:1.6rem; display:flex; align-items:center; gap:1rem; }
.arrow { width:42px; height:42px; border-radius:50%; border:1.5px solid var(--muted); background:transparent; color:var(--fg); font-size:1.5rem; line-height:1; cursor:pointer; transition:background .2s, border-color .2s; }
.arrow:hover { border-color:var(--accent-dark); color:var(--accent-dark); }
.dots { display:flex; gap:.55rem; }
.dots button { width:8px; height:8px; padding:0; border-radius:50%; border:0; background:var(--muted); opacity:.5; cursor:pointer; transition:width .3s, background .3s, opacity .3s; }
.dots button[aria-selected="true"] { width:26px; border-radius:4px; background:var(--accent); opacity:1; }

/* Projects panel: same tint, radius and border as the carousel, so the two read as one block. */
.projects { margin-top:1.25rem; padding:2.25rem; border-radius:var(--radius); background:var(--hero); border:1px solid var(--line); }
.projects-head { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem 3rem; margin-bottom:1.75rem; }
.projects-head h2 { margin:.5rem 0 0; font-size:2rem; line-height:1.1; letter-spacing:-.035em; }
.projects-head p { max-width:28rem; margin:0; color:var(--muted); font-size:.95rem; }

/* Project cards, each with its own photo gallery */
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); gap:1.4rem; }
.card { --mx:50%; --my:30%; position:relative; display:flex; flex-direction:column; border-radius:calc(var(--radius) - 4px); overflow:hidden; background:var(--bg); border:1.5px solid var(--line); transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; }
.card::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:0; background:radial-gradient(420px circle at var(--mx) var(--my), var(--glow), transparent 60%); transition:opacity .3s; }
.card:hover, .card:focus-within { transform:translateY(-8px); border-color:var(--accent); box-shadow:var(--lift), 0 0 0 1px var(--accent), 0 0 34px var(--glow); }
.card:hover::after { opacity:.45; }
/* The card for the slide on screen in the carousel. */
.card.is-current { border-color:var(--accent); }

.card-gallery { position:relative; aspect-ratio:1/1; background:var(--stage); }
.track { display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.track::-webkit-scrollbar { display:none; }
.shot { flex:0 0 100%; height:100%; padding:0; border:0; background:none; overflow:hidden; scroll-snap-align:start; cursor:zoom-in; }
.shot img { width:100%; height:100%; object-fit:contain; padding:8%; mix-blend-mode:multiply; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
/* Renders carry wide white margins; crop in so the hardware fills the frame. */
.shot.render img { padding:0; transform:translate(var(--tx, 0%), var(--ty, 0%)) scale(var(--zoom, 1.28)); }
/* Photos have off-white backdrops; lift them to white so multiply blends them into the stage. */
.shot.photo img, .lightbox.photo img { filter:brightness(1.1) contrast(1.04); }
.card:hover .shot img { transform:scale(1.06); }
.card:hover .shot.render img { transform:translate(var(--tx, 0%), var(--ty, 0%)) scale(calc(var(--zoom, 1.28) * 1.06)); }

.g-arrow { position:absolute; top:50%; z-index:1; width:38px; height:38px; margin-top:-19px; border-radius:50%; border:0; background:rgba(18,20,17,.6); color:#fff; font-size:1.4rem; line-height:1; cursor:pointer; opacity:0; transition:opacity .25s, background .2s; }
.g-arrow[data-dir="-1"] { left:.75rem; }
.g-arrow[data-dir="1"] { right:.75rem; }
.g-arrow:hover { background:rgba(18,20,17,.85); }
.card:hover .g-arrow, .g-arrow:focus-visible { opacity:1; }
.g-dots { position:absolute; left:0; right:0; bottom:.9rem; display:flex; justify-content:center; gap:.4rem; pointer-events:none; }
.g-dots span { width:7px; height:7px; border-radius:4px; background:rgba(27,31,26,.3); transition:width .3s, background .3s; }
.g-dots span.on { width:20px; background:var(--accent-dark); }
.card-gallery.single .g-arrow, .card-gallery.single .g-dots { display:none; }

.card-link { position:relative; display:block; padding:1.4rem 1.5rem 1.6rem; color:inherit; text-decoration:none; }
.card-title { display:block; margin:.35rem 0 .4rem; font-size:1.75rem; font-weight:800; letter-spacing:-.03em; }
.card-text { display:block; color:var(--muted); font-size:.95rem; padding-right:2.5rem; }
.card-go { position:absolute; right:1.4rem; bottom:1.5rem; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; border:1.5px solid var(--line); font-size:1.1rem; transition:transform .3s, background .3s, border-color .3s, color .3s; }
.card-link:hover .card-go, .card-link:focus-visible .card-go { transform:translateX(4px); background:var(--accent); border-color:var(--accent); color:#1b1f1a; }
.card-link:hover .card-title { color:var(--accent-dark); }

/* Lightbox */
.lightbox { width:min(92vw, 1100px); max-height:92vh; padding:0; border:0; border-radius:var(--radius); background:var(--stage); overflow:visible; }
.lightbox::backdrop { background:var(--scrim); backdrop-filter:blur(6px); }
.lightbox figure { margin:0; padding:2.5rem 4rem 1.25rem; }
.lightbox img { width:100%; max-height:72vh; object-fit:contain; mix-blend-mode:multiply; }
.lightbox figcaption { margin-top:.75rem; text-align:center; color:#2c3128; font-weight:600; }
.lb-close { position:absolute; top:.6rem; right:.9rem; border:0; background:none; font-size:2rem; line-height:1; color:#2c3128; cursor:pointer; }
.lb-arrow { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:0; background:rgba(18,20,17,.75); color:#fff; font-size:1.6rem; line-height:1; cursor:pointer; }
.lb-arrow[data-dir="-1"] { left:.8rem; }
.lb-arrow[data-dir="1"] { right:.8rem; }
.lightbox.single .lb-arrow { display:none; }

/* Footer */
.foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; padding:1.75rem var(--edge); border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; }
.foot-links { display:flex; gap:1.25rem; }
.foot-links a { text-decoration:none; }
.foot-links a:hover { color:var(--accent-dark); }

@media (max-width:900px) {
  :root { --gutter:1rem; }
  .top { padding-top:1rem; padding-bottom:1rem; }
  .brand .sub { display:none; }
  .brand .name { font-size:1.6rem; }
  .mark { width:22px; height:28px; }
  .slides { min-height:720px; }
  .slide { grid-template-columns:1fr; grid-template-rows:300px auto; padding:0 0 5rem; gap:1.25rem; align-items:start; }
  .slide-text { padding:0 1.5rem; }
  .visual { order:-1; padding:.75rem; grid-template-columns:2fr 1fr; }
  .slide p { margin-bottom:1.25rem; }
  .hero-controls { left:1.5rem; bottom:1.25rem; }
  .g-arrow { opacity:1; }
  .projects { padding:1.25rem 1rem; }
  .projects-head { flex-direction:column; align-items:flex-start; }
  .lightbox figure { padding:2.5rem 1rem 1rem; }
}
@media (max-width:420px) {
  .top { padding:.85rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition:none !important; }
  html { scroll-behavior:auto; }
}

/* Layout: edge to edge. Section backgrounds and the media fill the browser width;
   every section uses the same modest side padding (--edge) for text and controls. */
:root { --gutter:clamp(1.25rem, 3.2vw, 3rem); --edge:var(--gutter); }
main.page { padding-bottom:3.5rem; }

/* Carousel: 35% text, 65% media. The media slot is 16:9, the shape of the project videos. */
.hero { margin:0; border:0; border-radius:0; }
.slides { display:grid; min-height:0; }
.slide { position:relative; inset:auto; grid-area:1 / 1; grid-template-columns:minmax(0, 35fr) minmax(0, 65fr); gap:clamp(1.75rem, 3.5vw, 3.5rem); align-items:center; padding:clamp(1.25rem, 2.5vw, 2.25rem) var(--edge); }
.slide-text { max-width:none; padding-bottom:4.5rem; }
.slide p { max-width:36rem; }
.slide h1, .slide .h1 { font-size:clamp(2.2rem, 3.6vw, 3.4rem); }
.slide p { margin-bottom:1.6rem; }
.visual { display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; gap:.9rem; padding:0; aspect-ratio:16 / 10; align-self:center; }
.hero-controls { left:var(--edge); bottom:clamp(1.25rem, 2.5vw, 2.25rem); }

/* Placeholders for media that is not ready yet: same size and place as the final asset. */
.slot-ph { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.55rem; text-align:center; padding:1rem; color:var(--ph-fg);
  background-image:repeating-linear-gradient(45deg, var(--ph-hatch) 0 1px, transparent 1px 22px), linear-gradient(135deg, var(--ph-a) 0%, var(--ph-b) 100%); background-size:auto; }
.slot-ph::before { content:""; position:absolute; inset:14px; border:1px dashed var(--ph-line); border-radius:calc(var(--radius) - 10px); pointer-events:none; }
.ph-icon { display:grid; place-items:center; width:54px; height:54px; border-radius:50%; border:1.5px solid var(--ph-line); background:var(--ph-a); }
.ph-icon svg { width:22px; height:22px; fill:var(--ph-fg); }
.ph-name { margin-top:.35rem; font-weight:800; font-size:1.15rem; letter-spacing:-.02em; color:var(--ph-fg); }
.ph-note { font:600 .72rem/1.4 ui-monospace, Menlo, monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--ph-muted); }

/* Photos and video: tabs per project, one player, a photo grid. Same side padding as every section. */
.media { padding:3rem var(--edge) .5rem; }
.media-head { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem 2rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.media-head h2 { margin:.5rem 0 0; font-size:clamp(1.6rem, 2.4vw, 2.1rem); line-height:1.1; letter-spacing:-.035em; }
.mtabs { display:flex; gap:.35rem; padding:.3rem; border-radius:999px; border:1px solid var(--line); background:var(--callout); }
.mtabs button { padding:.55rem 1.1rem; border:0; border-radius:999px; background:none; color:var(--muted); font:600 .9rem/1 inherit; font-family:inherit; cursor:pointer; }
.mtabs button[aria-selected="true"] { background:var(--bg); color:var(--fg); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.mtabs button:hover { color:var(--fg); }
.mgrid { display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr); gap:clamp(.9rem, 1.4vw, 1.25rem); align-items:start; }
.mvideo { position:relative; margin:0; aspect-ratio:16 / 9; border-radius:calc(var(--radius) - 4px); overflow:hidden; background:#0d0f0c; }
.mvideo video { width:100%; height:100%; display:block; object-fit:cover; background:#0d0f0c; }
.mvideo > img { width:100%; height:100%; display:block; object-fit:cover; }
.clips { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.75rem; margin-top:.75rem; }
.clip { display:flex; align-items:center; gap:.65rem; padding:.4rem .7rem .4rem .4rem; border:1.5px solid var(--line); border-radius:12px; background:var(--bg); color:var(--fg); font:600 .85rem/1.25 inherit; font-family:inherit; text-align:left; cursor:pointer; }
.clip img { width:64px; aspect-ratio:16 / 9; object-fit:cover; border-radius:7px; flex:none; }
.clip.on { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.clip:hover { border-color:var(--accent-dark); }
.mphotos { display:grid; grid-template-columns:1fr 1fr; gap:clamp(.6rem, 1vw, .9rem); }
.mphoto { position:relative; margin:0; aspect-ratio:4 / 3; border-radius:calc(var(--radius) - 6px); overflow:hidden; background:var(--ph-b); }
.mphoto img { width:100%; height:100%; object-fit:cover; display:block; }
.mphoto figcaption { position:absolute; left:.6rem; bottom:.6rem; padding:.25rem .55rem; border-radius:6px; background:rgba(18,20,17,.62); color:#f2f4ef; font-size:.75rem; font-weight:600; }
.mstrip { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:clamp(.6rem, 1vw, .9rem); margin-top:clamp(.6rem, 1vw, .9rem); }
.mnote { margin:.9rem 0 0; color:var(--muted); font-size:.85rem; }
.mnote .mdesc::before { content:"Now playing: "; color:var(--fg); font-weight:600; }
.slot-ph.sm .ph-icon { width:40px; height:40px; } .slot-ph.sm .ph-icon svg { width:17px; height:17px; }
.slot-ph.sm .ph-name { font-size:.95rem; margin-top:.1rem; } .slot-ph.sm .ph-note { font-size:.62rem; }
.mpanel[id="media-umi"] .mvideo, .mpanel[id="media-neck"] .mvideo { background:var(--ph-b); }

/* Projects: same side padding, no outer panel. */
.projects { margin-top:0; padding:2.75rem var(--edge) 0; background:none; border:0; border-radius:0; }
.projects-head h2 { font-size:clamp(1.6rem, 2.4vw, 2.1rem); }
.cards { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(1rem, 1.6vw, 1.6rem); }

@media (max-width:900px) {
  .slide { grid-template-columns:1fr; grid-template-rows:auto; gap:1.25rem; padding:1rem var(--edge) 5rem; align-items:start; }
  .slide-text { padding:0; }
  .visual { order:-1; }
  .hero-controls { left:var(--edge); bottom:1.25rem; }
  .projects { padding:2rem var(--edge) 0; }
  .cards { grid-template-columns:1fr; }
  .media { padding:2rem var(--edge) 0; }
  .mgrid { grid-template-columns:1fr; }
  .mstrip { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .clips { grid-template-columns:1fr; }
  .mtabs { width:100%; justify-content:space-between; } .mtabs button { flex:1; padding-inline:.4rem; }
}
@media (min-width:901px) and (max-width:1100px) {
  .cards { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:420px) {
  .top { padding-inline:var(--edge); }
}

/* Intro video: the page opens on a full-screen film (an operator wearing DexUMI, dissolving into the
   robot running the trained policy). It slides under the sticky header, which turns clear over it. */
:root { --top-h:77px; }
.top { transition:background-color .35s, border-color .35s, color .35s; }
.top.over-video { background:transparent; border-bottom-color:transparent; backdrop-filter:none; color:#fff; }
.top.over-video .brand .sub { color:#fff; border-left-color:rgba(255,255,255,.32); }
.top.over-video .brand .name, .top.over-video .brand .sub { text-shadow:0 1px 2px rgba(0,0,0,.5), 0 0 12px rgba(0,0,0,.55); }
/* Dark glass while the video's last rows, or the night sky below them, are under the header. */
.top.over-edge, .top.over-sky { background:rgba(6,7,9,.74); border-bottom-color:rgba(232,240,224,.08); backdrop-filter:blur(14px); color:#f3f5f0; }
.top.over-edge .brand .sub, .top.over-sky .brand .sub { color:rgba(243,245,240,.78); border-left-color:rgba(243,245,240,.25); }

.iv { position:relative; isolation:isolate; height:100vh; height:100svh; min-height:32rem; margin-top:calc(-1 * var(--top-h)); overflow:hidden; background:#0b0d0a; color:#f3f5f0; }
.iv-media { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.iv-shade { position:absolute; inset:0; z-index:-1; pointer-events:none; background:
  linear-gradient(180deg, rgba(9,11,8,.7) 0, rgba(9,11,8,.45) var(--top-h), rgba(9,11,8,0) calc(var(--top-h) + 5rem)),
  radial-gradient(85% 70% at 0% 100%, rgba(9,11,8,.6) 0%, rgba(9,11,8,0) 72%),
  linear-gradient(0deg, rgba(9,11,8,.82) 0%, rgba(9,11,8,.5) 24%, rgba(9,11,8,.12) 48%, rgba(9,11,8,0) 60%); }
/* The film's last rows fade into the night sky's colour, so the film runs straight into the sky below.
   The fade sits in the shade layer, under the scroll cue and the pause button. */
.iv-shade::after { content:""; position:absolute; left:0; right:0; bottom:0; height:clamp(5rem, 13vh, 9rem); background:linear-gradient(0deg, #0b0d0a 0, rgba(11,13,10,.86) 25%, rgba(11,13,10,0) 100%); }
.iv-inner { position:absolute; left:0; right:0; bottom:0; padding:0 var(--edge) clamp(4.75rem, 11vh, 7rem); }
.iv-copy { max-width:none; text-shadow:0 1px 2px rgba(0,0,0,.3), 0 0 28px rgba(0,0,0,.25); }
.iv-copy h1 { max-width:13.5em; margin:.7rem 0 .9rem; font-size:clamp(2.4rem, 4.6vw, 4.6rem); line-height:1; letter-spacing:-.045em; font-weight:800; text-wrap:balance; }

.iv-toggle { position:absolute; right:var(--edge); bottom:1.25rem; width:40px; height:40px; opacity:calc((.9 - var(--iv-out)) * 12); display:grid; place-items:center; padding:0; border-radius:50%; border:1.5px solid rgba(243,245,240,.45); background:rgba(9,11,8,.35); color:#fff; cursor:pointer; transition:border-color .2s, background .2s; }
.iv-toggle:hover, .iv-toggle:focus-visible { border-color:var(--accent); background:rgba(9,11,8,.6); }
.iv-toggle svg { width:16px; height:16px; fill:currentColor; }
.iv-toggle .i-play, .iv-toggle.is-paused .i-pause { display:none; }
.iv-toggle.is-paused .i-play { display:block; }
.iv.no-video .iv-toggle { display:none; }
.iv-scroll { position:absolute; left:50%; bottom:1.1rem; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.2rem; color:rgba(243,245,240,.82); text-decoration:none; font:600 .7rem/1.2 ui-monospace, Menlo, monospace; letter-spacing:.22em; text-transform:uppercase; white-space:nowrap; opacity:calc(1 - var(--iv-out) * 3); }
.iv-scroll svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; animation:iv-nudge 1.8s ease-in-out 2; }
.iv-scroll:hover { color:var(--accent); }
@keyframes iv-nudge { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(5px); } }
.hero { scroll-margin-top:var(--top-h); }

@media (max-width:900px) {
  :root { --top-h:61px; }
  .iv-copy h1 { font-size:clamp(2.1rem, 9vw, 3.2rem); }
}
@media (prefers-reduced-motion: reduce) {
  .iv-scroll svg { animation:none; }
}

/* Intro entrance, and a soft exit while scrolling away (--iv-out runs 0 -> 1 as the intro leaves). */
.iv { --iv-out:0; }
.iv-media { transform:scale(calc(1 + var(--iv-out) * .06)); filter:brightness(calc(1 - var(--iv-out) * .35)); }
.iv-inner { opacity:calc(1 - var(--iv-out) * 2.4); transform:translateY(calc(var(--iv-out) * -4rem)); }
.iv-copy > * { animation:iv-rise .9s cubic-bezier(.2,.7,.2,1) both; }
.iv-copy h1 { animation-delay:.12s; }
@keyframes iv-rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
  .iv-copy > * { animation:none; }
  .iv-media, .iv-inner { transform:none; filter:none; }
}
@media (orientation:landscape) and (max-height:520px) {
  .iv { min-height:0; }
  .iv-media { object-position:50% 12%; }
  .iv-copy h1 { font-size:clamp(1.7rem, 8vh, 2.4rem); max-width:9em; margin:.45rem 0 0; }
  .iv-inner { padding-bottom:4.25rem; }
}
@media (pointer:coarse) {
  .iv-toggle { width:44px; height:44px; }
}

/* Why we built them: the three prototypes on a night sky, black in both colour schemes. A canvas draws
   sparse, slowly twinkling stars and an occasional faint shooting star, and fades them out behind the
   text; the products float in their own faint light. */
.ns {
  --ns-bg:#050608; --ns-fg:#eef1ea; --ns-text:#c5cbbf; --ns-muted:#9ea698; --ns-line:rgba(232,240,224,.14);
  --ns-accent:#8bd62a; --ns-ease:cubic-bezier(.2,.7,.2,1);
  position:relative; isolation:isolate; overflow:clip; color:var(--ns-fg); color-scheme:dark;
  padding:calc(var(--top-h) + clamp(1rem, 3.5vh, 2.75rem)) 0 clamp(4.5rem, 7vw, 7rem);
  background:linear-gradient(180deg, #0b0d0a 0, rgba(11,13,10,0) 14rem), var(--ns-bg);
}
.ns .sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Sky: a viewport-sized canvas that sticks while the section scrolls past, so only what is on screen is drawn. */
.ns-sky { position:absolute; inset:0; z-index:-1; overflow:clip; pointer-events:none; }
.ns-canvas { position:sticky; top:0; display:block; width:100%; height:100vh; height:100lvh; max-height:100%; }

/* Intro: a large one-line heading, then the two lead paragraphs side by side. */
.ns-intro { padding:0 var(--edge); }
.ns-kicker { margin:0; color:var(--ns-accent); font:700 .75rem/1.4 ui-monospace, Menlo, monospace; letter-spacing:.3em; text-transform:uppercase; }
.ns-title { margin:1rem 0 0; font-size:clamp(2.75rem, 5.6vw, 6rem); line-height:.93; letter-spacing:-.055em; font-weight:800; text-wrap:balance;
  background:linear-gradient(180deg, #fbfcf9 30%, #c9d3c0 100%); -webkit-background-clip:text; background-clip:text; color:transparent; padding-bottom:.06em; }
.ns-lead { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.9rem clamp(2rem, 5vw, 6rem); margin-top:clamp(1rem, 2vw, 1.75rem); }
.ns-lead p { max-width:40rem; margin:0; color:var(--ns-text); font-size:clamp(1rem, 1.2vw, 1.18rem); line-height:1.62; text-align:justify; hyphens:auto; -webkit-hyphens:auto; }
/* A dark halo under the small text, on top of the sky's star-free zones behind it. */
.ns-lead p { text-shadow:0 0 3px #050608, 0 0 14px #050608; }

@media (max-width:1023px) {
  .ns-lead { grid-template-columns:minmax(0, 1fr); margin-top:1.5rem; }
}
@media (max-width:640px) {
  .ns-title { font-size:clamp(2.75rem, 13vw, 3.6rem); }
  .ns-lead p { text-align:left; }   /* a phone-width column leaves wide gaps when justified */
}

/* Motion (only when the visitor allows it; the script adds .ns-anim). The heading rows reveal as they
   come up the screen; each column reveals as one, its rows staggered through --ns-d. */
.ns.ns-anim :is(.ns-intro > *, .ns-surface) { opacity:0; transform:translateY(22px); transition:opacity .9s var(--ns-ease) var(--ns-d, 0ms), transform 1.1s var(--ns-ease) var(--ns-d, 0ms), filter .3s; }
.ns.ns-anim :is(.ns-intro > *, .ns-surface).is-in { opacity:1; transform:none; }

@media print {
  .ns.ns-anim :is(.ns-intro > *, .ns-surface) { opacity:1 !important; transform:none !important; }
}

/* Intro: heading on the left, a hairline, then the two lead paragraphs. */
.ns-intro { display:grid; grid-template-columns:auto 1px minmax(0, 1fr); align-items:center; column-gap:clamp(1.75rem, 3.2vw, 3.25rem); }
.ns-intro::before { content:""; grid-column:2; grid-row:1; align-self:stretch; background:var(--ns-line); }
.ns-head { grid-column:1; grid-row:1; }
.ns-intro .ns-lead { grid-column:3; grid-row:1; margin-top:0; gap:.9rem clamp(1.5rem, 3vw, 3.25rem); }
.ns-intro .ns-lead p { font-size:clamp(.92rem, 1vw, 1.02rem); text-align:left; hyphens:manual; -webkit-hyphens:manual; }
.ns-intro .ns-title { font-size:clamp(2.6rem, 4.6vw, 5rem); white-space:nowrap; }
@media (max-width:1023px) {
  .ns-intro { grid-template-columns:minmax(0, 1fr); }
  .ns-intro::before { content:none; }
  .ns-head, .ns-intro .ns-lead { grid-column:1; grid-row:auto; }
  .ns-intro .ns-title { white-space:normal; }
  .ns-intro .ns-lead { margin-top:1.5rem; }
}

/* Studio band: the three renders together on one continuous seamless-paper background, edge to edge.
   One is selected at a time (the script keeps the last pick); the others step back a little. */
@property --bob { syntax:'<number>'; inherits:false; initial-value:0; }
@property --amp { syntax:'<number>'; inherits:true; initial-value:4; }
.ns-studio { position:relative; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); margin-top:clamp(2rem, 3.6vw, 3.25rem); padding:0 var(--edge);
  background:radial-gradient(70% 120% at 50% 0%, #e2e4e7 0%, rgba(226,228,231,0) 70%), linear-gradient(180deg, #d4d6da 0%, #cbced2 58%, #c3c6cb 100%); }
.ns-pick { --amp:4; position:relative; display:grid; grid-template-rows:auto 1fr; justify-items:center; padding:clamp(1.25rem, 2.2vw, 2rem) .5rem clamp(1rem, 2vw, 1.75rem); border:0; background:none; color:inherit; font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:--amp .8s ease; }
.ns-pick-name { position:relative; padding-bottom:.55rem; color:#565b61; font-weight:800; font-size:clamp(1.15rem, 1.75vw, 1.75rem); letter-spacing:-.035em; line-height:1.1; transition:color .4s ease; }
.ns-pick-name::after { content:""; position:absolute; left:50%; bottom:0; width:2.6em; height:3px; border-radius:2px; background:var(--ns-accent); transform:translateX(-50%) scaleX(0); transition:transform .45s var(--ns-ease); }
.ns-pick-stage { position:relative; display:block; width:100%; height:clamp(13rem, 21vw, 21rem); margin-top:clamp(.75rem, 1.6vw, 1.5rem); }
/* A soft contact shadow, so each render rests on the paper. */
.ns-pick-stage::after { content:""; position:absolute; left:50%; bottom:2%; width:46%; height:9%; border-radius:50%; transform:translateX(-50%); background:radial-gradient(closest-side, rgba(40,44,50,.32), rgba(40,44,50,0)); transition:opacity .6s ease, transform .8s var(--ns-ease); opacity:.75; }
.ns-pick-scale { position:absolute; inset:0; display:block; transform:scale(.9); transform-origin:50% 88%; filter:saturate(.62) contrast(.9) brightness(1.04); transition:transform .8s var(--ns-ease), filter .6s ease; }
.ns-pick-float { position:absolute; inset:0; display:block; transform:translate3d(0, calc(var(--bob) * var(--amp) * -1px), 0); }
.ns-pick img { position:absolute; left:50%; bottom:6%; transform:translateX(-50%); width:auto; height:auto; max-width:var(--w, 80%); max-height:var(--h, 92%); filter:drop-shadow(0 10px 14px rgba(30,34,40,.12)); }
.ns-umi { --w:60%; --h:90%; } .ns-dexumi { --w:92%; --h:86%; } .ns-neck { --w:60%; --h:90%; }
.ns-pick[aria-selected="true"] { --amp:6; }
.ns-pick[aria-selected="true"] .ns-pick-name { color:#1d2024; }
.ns-pick[aria-selected="true"] .ns-pick-name::after { transform:translateX(-50%) scaleX(1); }
.ns-pick[aria-selected="true"] .ns-pick-scale { transform:scale(1.04); filter:none; }
.ns-pick[aria-selected="true"] .ns-pick-stage::after { opacity:1; transform:translateX(-50%) scale(1.08); }
.ns-pick:focus-visible { outline:none; }
.ns-pick:focus-visible .ns-pick-name { outline:2px solid #3f6b0c; outline-offset:4px; border-radius:3px; }
/* Slow, gentle float in place, out of step with each other. */
@keyframes ns-bob { from { --bob:0; } to { --bob:1; } }
.ns-pick .ns-pick-float { animation:ns-bob 5.8s ease-in-out infinite alternate; }
.ns-umi .ns-pick-float { animation-duration:6.2s; animation-delay:-1.4s; }
.ns-dexumi .ns-pick-float { animation-duration:5.6s; animation-delay:-3.1s; }
.ns-neck .ns-pick-float { animation-duration:6.6s; animation-delay:-2.2s; }
.ns.ns-off .ns-pick-float { animation-play-state:paused; }

/* Shared information area: the selected project's text left, its technical notes right. All three
   share one grid cell, so the area keeps the tallest one's height and the page never jumps. */
.ns-info { display:grid; padding:clamp(2rem, 3.6vw, 3.25rem) var(--edge) 0; }
.ns-panel { grid-area:1 / 1; display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); column-gap:clamp(2rem, 6vw, 7rem); align-items:start; transition:opacity .45s ease, visibility 0s linear .45s; }
.ns-panel[aria-hidden="true"] { opacity:0; visibility:hidden; }
.ns-panel[aria-hidden="false"] { transition:opacity .45s ease .05s, visibility 0s; }
.ns-meta { margin:0; color:var(--ns-text); font:600 .78rem/1.4 ui-monospace, Menlo, monospace; letter-spacing:.2em; text-transform:uppercase; }
.ns-name { margin:.5rem 0 0; font-size:clamp(2.3rem, 4vw, 3.9rem); line-height:1; letter-spacing:-.05em; font-weight:800; color:#fff; }
.ns-why { max-width:38rem; margin:1rem 0 0; color:#d6dccf; font-size:clamp(1.05rem, 1.35vw, 1.3rem); line-height:1.5; text-wrap:pretty; }
.ns-why strong { color:#fff; font-weight:700; }
.ns-link { display:inline-flex; align-items:center; gap:.55rem; margin-top:1.6rem; padding:.3rem 0; color:var(--ns-accent); font-weight:700; font-size:1.02rem; text-decoration:none;
  background:linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition:background-size .35s var(--ns-ease), gap .3s var(--ns-ease), color .2s; }
.ns-link svg { width:1.15rem; height:1.15rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ns-link:hover, .ns-link:focus-visible { background-size:100% 1.5px; gap:.85rem; color:#b4ef6a; }
.ns-link:focus-visible { outline:2px solid var(--ns-accent); outline-offset:4px; border-radius:2px; }
.ns-tech-title { margin:.35rem 0 0; color:#fff; font-size:1.3rem; font-weight:700; letter-spacing:-.02em; }
.ns-notes { margin:.85rem 0 0; padding:0; list-style:none; }
.ns-notes li { color:#d0d6c9; font-size:clamp(1rem, 1.2vw, 1.12rem); line-height:1.45; }
.ns-notes li + li { margin-top:.5rem; }
.ns-notes li strong { color:#fff; font-weight:700; }
.ns-specs { display:grid; grid-template-columns:repeat(auto-fit, minmax(10.5rem, 1fr)); align-items:baseline; gap:.6rem 1.75rem; margin:1.2rem 0 0; padding-top:1.1rem; border-top:1px solid var(--ns-line); color:var(--ns-text); font-size:.98rem; line-height:1.4; }
.ns-specs b { display:block; color:#fff; font-size:1.45rem; font-weight:800; letter-spacing:-.02em; line-height:1.15; }
.ns-spec { font-size:.9rem; line-height:1.35; }
.ns-dot { display:none; }
.ns-soon { margin:.85rem 0 0; color:var(--ns-muted); font:600 .78rem/1.5 ui-monospace, Menlo, monospace; letter-spacing:.18em; text-transform:uppercase; }
.ns-meta, .ns-why, .ns-notes li, .ns-specs { text-shadow:0 0 3px #050608, 0 0 14px #050608; }

/* Phones: the three renders stay side by side on the paper (tap to pick); the details stack below. */
@media (max-width:760px) {
  .ns-studio { padding:0 max(8px, calc(var(--edge) - 12px)); }
  .ns-pick { padding:1rem .15rem .9rem; }
  .ns-pick-name { font-size:clamp(.82rem, 3.6vw, 1rem); letter-spacing:-.02em; white-space:nowrap; }
  .ns-pick-stage { height:clamp(7.5rem, 30vw, 10rem); margin-top:.6rem; }
  .ns-umi { --w:74%; } .ns-dexumi { --w:100%; } .ns-neck { --w:74%; }
  .ns-panel { grid-template-columns:minmax(0, 1fr); row-gap:1.75rem; }
  .ns-name { font-size:clamp(2.2rem, 10vw, 2.9rem); }
}

@media (prefers-reduced-motion: reduce) {
  .ns-pick .ns-pick-float { animation:none; }
  .ns-pick, .ns-pick-scale, .ns-pick-stage::after, .ns-pick-name::after, .ns-panel { transition:none; }
}

/* GEAR UMI photos are shot on white: blend them into the card background so each tile keeps its edge. */
#media-umi .mphoto, #media-umi .mvideo { background:#e9ece5; }  /* fixed light tint: the photos stay light in dark mode too */
#media-umi .mphoto img, #media-umi .mvideo > img { mix-blend-mode:multiply; }

/* Page colour flow: Why we built them -> carousel -> See the hardware -> Build the hardware.
   Each section's background ends on the colour the next one starts with, and every change is
   spread across the section itself (no strips or spacers). Light studio panels stay light. */
:root { --flow-ns:#1c201b; --flow-car:#474c43; --flow-media:#f1f3ee; }

.ns { background:linear-gradient(180deg, #0b0d0a 0, rgba(11,13,10,0) 14rem), linear-gradient(0deg, var(--flow-ns) 0, transparent min(28rem, 40%)), var(--ns-bg); }

.hero {
  --fg:#eef1ea; --muted:#b3baad; --line:rgba(232,240,224,.16); --accent-dark:#9ee04a; --glow:rgba(139,214,42,.28);
  background:linear-gradient(180deg, var(--flow-ns) 0%, color-mix(in oklab, var(--flow-ns) 55%, var(--flow-car)) 55%, var(--flow-car) 100%);
  color:var(--fg); color-scheme:dark;
}
.hero .pill:hover { color:#11140f; }
.hero .arrow { border-color:rgba(232,240,224,.5); }
.hero .dots button { background:#c5cbbf; }
.hero .dots button[aria-selected="true"] { background:var(--accent); }

.media { background:linear-gradient(180deg, var(--flow-car) 0%, color-mix(in oklab, var(--flow-car) 90%, var(--flow-media)) 16%,
  color-mix(in oklab, var(--flow-car) 55%, var(--flow-media)) 42%, color-mix(in oklab, var(--flow-car) 18%, var(--flow-media)) 70%, var(--flow-media) 100%); }
.projects { background:linear-gradient(180deg, var(--flow-media) 0, var(--bg) min(24rem, 60%)); }

/* Light mode: the media header sits on the graphite start of the section, so it uses light text. */


/* With the Build the hardware section removed, the media section's colour flow ends on the page white. */
.media { padding-bottom:clamp(2.5rem, 5vw, 4.5rem); background:linear-gradient(180deg, var(--flow-car) 0%, color-mix(in oklab, var(--flow-car) 90%, var(--flow-media)) 14%,
  color-mix(in oklab, var(--flow-car) 55%, var(--flow-media)) 36%, color-mix(in oklab, var(--flow-car) 18%, var(--flow-media)) 58%, var(--flow-media) 78%, var(--bg) 100%); }

/* Carousel: the text column shows the project's exploded CAD view (it links to the documentation). */
.slide-ex { align-self:stretch; display:flex; flex-direction:column; }
.slide-ex .v.ex { display:block; flex:1; min-height:clamp(14rem, 24vw, 24rem); aspect-ratio:1 / 1; max-height:100%; }
.slide-ex .v.ex img { transition:transform 1.2s cubic-bezier(.2,.7,.2,1), opacity .9s; }
.slide.is-active .slide-ex .v.ex img { transform:scale(var(--zoom, 1)); opacity:1; }
.slide-ex .v.ex:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media (max-width:900px) {
  .slide-ex .v.ex { flex:none; width:min(100%, 22rem); min-height:0; }
}
.hero .sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }


/* Why we built them: one connected surface. The selected render's silver studio tile and the shared
   details panel are a single shape (an L at the ends, a T in the middle); the other renders stand on the
   charcoal. The tile slides between the fixed columns; small concave fillets soften the inner corners. */
.ns-surface { --r:18px; --sv-top:#e3e5e8; --sv:#d5d8dc; --k:0; position:relative; margin:clamp(2rem, 3.6vw, 3.25rem) var(--edge) 0; }
.ns-surface .ns-studio { margin:0; padding:0; background:none; isolation:isolate; }
.ns-hl { position:absolute; z-index:-1; left:0; top:0; bottom:-1px; width:calc(100% / 3); border-radius:var(--r) var(--r) 0 0;
  background:linear-gradient(180deg, var(--sv-top) 0%, var(--sv) 100%); transform:translateX(calc(var(--k) * 100%)); transition:transform .6s var(--ns-ease); }
.ns-hl::before, .ns-hl::after { content:""; position:absolute; bottom:1px; width:var(--r); height:var(--r); transition:opacity .25s ease; }
.ns-hl::before { right:100%; background:radial-gradient(circle at 0 0, transparent calc(var(--r) - .5px), var(--sv) var(--r)); }
.ns-hl::after { left:100%; background:radial-gradient(circle at 100% 0, transparent calc(var(--r) - .5px), var(--sv) var(--r)); }
.ns-surface[data-k="0"] .ns-hl::before, .ns-surface[data-k="2"] .ns-hl::after { opacity:0; }
.ns-surface .ns-info { position:relative; padding:clamp(1.75rem, 3vw, 2.75rem) clamp(1.5rem, 3.2vw, 3.25rem) clamp(1.75rem, 3vw, 2.5rem); border-radius:var(--r); background:var(--sv);
  transition:border-radius .3s ease; }
.ns-surface[data-k="0"] .ns-info { border-top-left-radius:0; }
.ns-surface[data-k="2"] .ns-info { border-top-right-radius:0; }

/* Renders: moderate size; the ones on charcoal step back a little. */
.ns-surface .ns-pick { padding:clamp(1.1rem, 2vw, 1.75rem) .75rem clamp(.9rem, 1.6vw, 1.4rem); }
.ns-surface .ns-pick-stage { height:clamp(11.5rem, 17vw, 17rem); }
.ns-surface .ns-pick-stage::after { background:radial-gradient(closest-side, rgba(30,34,40,.3), rgba(30,34,40,0)); }
.ns-surface .ns-pick[aria-selected="false"] .ns-pick-stage::after { opacity:0; }
.ns-surface .ns-pick-name { color:#9aa29a; transition:color .45s ease; }
.ns-surface .ns-pick[aria-selected="true"] .ns-pick-name { color:#1b1e21; }
.ns-surface .ns-pick-scale { filter:saturate(.66) brightness(.93) contrast(.94); }
.ns-surface .ns-pick[aria-selected="true"] .ns-pick-scale { filter:none; }
.ns-surface .ns-pick:focus-visible .ns-pick-name { outline-color:var(--ns-accent); }
.ns-surface .ns-pick[aria-selected="true"]:focus-visible .ns-pick-name { outline-color:#3f6b0c; }

/* Details on the silver surface: dark text. */
.ns-surface .ns-meta { color:#535950; text-shadow:none; }
.ns-surface .ns-name { color:#14171a; }
.ns-surface .ns-why { color:#30352f; text-shadow:none; }
.ns-surface .ns-why strong, .ns-surface .ns-notes li strong { color:#14171a; }
.ns-surface .ns-tech-title { color:#14171a; }
.ns-surface .ns-notes li { color:#30352f; text-shadow:none; }
.ns-surface .ns-specs { color:#3c4239; border-top-color:rgba(20,23,26,.14); text-shadow:none; }
.ns-surface .ns-specs b { color:#14171a; }
.ns-surface .ns-link { color:#335a08; }
.ns-surface .ns-link:hover, .ns-surface .ns-link:focus-visible { color:#22400a; }
.ns-surface .ns-link:focus-visible { outline-color:#335a08; }

@media (max-width:760px) {
  .ns-surface { --r:14px; margin-left:max(10px, calc(var(--edge) - 8px)); margin-right:max(10px, calc(var(--edge) - 8px)); }
  .ns-surface .ns-pick { padding:.85rem .2rem .7rem; }
  .ns-surface .ns-pick-stage { height:clamp(7.5rem, 28vw, 9.5rem); }
  .ns-surface .ns-info { padding:1.5rem 1.25rem 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ns-hl, .ns-hl::before, .ns-hl::after, .ns-surface .ns-info, .ns-surface .ns-pick-name { transition:none; }
}

/* Mockup alignment: names below the renders, larger renders and details type. */
.ns-surface .ns-pick { grid-template-rows:1fr auto; padding:clamp(1.25rem, 2.2vw, 2rem) .75rem clamp(1.1rem, 2vw, 1.75rem); }
.ns-surface .ns-pick-stage { grid-row:1; margin-top:0; height:clamp(14rem, 22vw, 22rem); }
.ns-surface .ns-pick-name { grid-row:2; margin-top:clamp(.6rem, 1.2vw, 1rem); padding-bottom:.6rem; color:#f1f3ef; font-size:clamp(1.15rem, 1.6vw, 1.6rem); }
.ns-surface .ns-pick-name::after { width:4.2em; height:4px; }
.ns-surface .ns-umi { --w:62%; --h:96%; } .ns-surface .ns-dexumi { --w:88%; --h:82%; } .ns-surface .ns-neck { --w:52%; --h:84%; }
.ns-surface .ns-pick-scale { filter:saturate(.6) contrast(.92) brightness(1.03); }
.ns-surface .ns-info { padding-bottom:clamp(1.5rem, 2.6vw, 2.25rem); }
.ns-surface .ns-meta { font-size:.85rem; letter-spacing:.16em; }
.ns-surface .ns-name { font-size:clamp(2.5rem, 4.2vw, 4.1rem); }
.ns-surface .ns-why { font-size:clamp(1.12rem, 1.5vw, 1.45rem); line-height:1.42; }
.ns-surface .ns-link { font-size:clamp(1.02rem, 1.25vw, 1.2rem); }
.ns-surface .ns-tech-title { font-size:clamp(1.3rem, 1.75vw, 1.7rem); letter-spacing:-.025em; }
.ns-surface .ns-notes li { font-size:clamp(1rem, 1.3vw, 1.22rem); }
.ns-surface .ns-specs { gap:.55rem 1.6rem; }
.ns-surface .ns-specs b { display:inline; font-size:clamp(1.3rem, 1.8vw, 1.7rem); margin-right:.3rem; }
.ns-surface .ns-spec { font-size:clamp(.92rem, 1.1vw, 1.05rem); }
@media (max-width:760px) {
  .ns-surface .ns-pick-stage { height:clamp(8rem, 30vw, 10rem); }
  .ns-surface .ns-pick-name { font-size:clamp(.82rem, 3.6vw, 1rem); padding-bottom:.45rem; }
  .ns-surface .ns-pick-name::after { height:3px; width:3.4em; }
  .ns-surface .ns-umi { --w:76%; } .ns-surface .ns-dexumi { --w:100%; } .ns-surface .ns-neck { --w:66%; }
}
.ns-surface .ns-specs { display:flex; flex-wrap:wrap; column-gap:2rem; row-gap:.5rem; }
.ns-surface .ns-spec { white-space:nowrap; }
@media (max-width:520px) { .ns-surface .ns-spec { white-space:normal; } }


/* ===================== Light theme and spacing rhythm =====================
   One light palette for the whole landing page: soft off-white, pale neutral grey and silver, charcoal
   text, medium-grey secondary text, and a darkened green for links and selected states. Neighbouring
   sections use closely related tones that blend within each section, never through spacers.
   Spacing uses three proportional steps: --s-sec (top and bottom of every section), --s-head (a heading
   to its content) and --s-gap (between pictures in a grid). */
:root {
  color-scheme:light;
  --bg:#f5f6f3; --fg:#1d2220; --muted:#5c635c; --line:#dde0da; --accent:#8bd62a; --accent-dark:#3d6a0b; --callout:#eceee9;
  --paper:#f5f6f3; --tint:#eceee9; --silver:#e2e5e0;
  --header:rgba(245,246,243,.86); --glow:transparent; --lift:0 14px 34px rgba(29,34,32,.12); --scrim:rgba(29,34,32,.78);
  --ph-a:#eceee9; --ph-b:#e2e5e0; --ph-fg:#2f352c; --ph-muted:#6a7265; --ph-line:rgba(47,53,44,.18); --ph-hatch:rgba(47,53,44,.05);
  --s-sec:clamp(3.25rem, 5.5vw, 5.5rem); --s-head:clamp(1.5rem, 2.6vw, 2.5rem); --s-gap:clamp(.75rem, 1.2vw, 1.1rem);
}
body { background:var(--bg); color:var(--fg); }
main.page { padding-bottom:0; }

/* Header: light glass everywhere; over the film it stays clear, with charcoal type. */
.top { background:var(--header); border-bottom-color:var(--line); color:var(--fg); }
.top.over-edge, .top.over-sky { background:var(--header); border-bottom-color:var(--line); backdrop-filter:blur(12px); color:var(--fg); }
.top.over-edge .brand .sub, .top.over-sky .brand .sub { color:var(--muted); border-left-color:var(--line); }
.top.over-video { background:transparent; border-bottom-color:transparent; color:var(--fg); }
.top.over-video .brand .sub { color:var(--fg); border-left-color:rgba(29,34,32,.25); }
.top.over-video .brand .name, .top.over-video .brand .sub { text-shadow:0 0 10px rgba(245,246,243,.7); }

/* Intro film: light scrims instead of dark ones; the film itself is not filtered. */
.iv { background:var(--bg); color:var(--fg); }
.iv-shade { background:
  linear-gradient(180deg, rgba(245,246,243,.72) 0, rgba(245,246,243,.4) var(--top-h), rgba(245,246,243,0) calc(var(--top-h) + 5rem)),
  radial-gradient(85% 70% at 0% 100%, rgba(245,246,243,.62) 0%, rgba(245,246,243,0) 72%),
  linear-gradient(0deg, rgba(245,246,243,.9) 0%, rgba(245,246,243,.55) 22%, rgba(245,246,243,.12) 46%, rgba(245,246,243,0) 58%); }
.iv-shade::after { background:linear-gradient(0deg, var(--bg) 0, rgba(245,246,243,.86) 25%, rgba(245,246,243,0) 100%); }
.iv-copy { text-shadow:0 0 18px rgba(245,246,243,.65); }
.iv-media { filter:none; }
.iv-toggle { border-color:rgba(29,34,32,.3); background:rgba(245,246,243,.7); color:var(--fg); }
.iv-toggle:hover, .iv-toggle:focus-visible { border-color:var(--accent-dark); background:rgba(245,246,243,.92); }
.iv-scroll { color:var(--muted); }
.iv-scroll:hover { color:var(--accent-dark); }

/* Why we built them: off-white, no star field or glows; the connected surface is a deeper silver. */
.ns { --ns-fg:var(--fg); --ns-text:#3d433c; --ns-muted:var(--muted); --ns-line:var(--line); --ns-accent:var(--accent-dark); color:var(--fg); color-scheme:light;
  padding:calc(var(--top-h) * 0 + var(--s-sec)) 0 var(--s-sec); background:linear-gradient(180deg, var(--paper) 0%, var(--paper) 55%, var(--tint) 100%); }
.ns-sky { display:none; }
.ns-title { background:none; color:var(--fg); -webkit-text-fill-color:currentColor; }
.ns-lead p { color:#3d433c; text-shadow:none; }
.ns-surface { --sv-top:#e9ebe8; --sv:#e1e4df; margin-top:var(--s-head); }
.ns-surface .ns-pick-name { color:#6a7169; }
.ns-surface .ns-pick[aria-selected="true"] .ns-pick-name { color:var(--fg); }
.ns-surface .ns-pick-name::after { background:var(--accent-dark); }
.ns-surface .ns-pick-stage::after { background:radial-gradient(closest-side, rgba(30,34,40,.22), rgba(30,34,40,0)); }
.ns-surface .ns-pick[aria-selected="false"] .ns-pick-stage::after { opacity:.55; }
.ns-surface .ns-pick-scale { filter:saturate(.6) contrast(.92) brightness(1.02) opacity(.82); }
.ns-surface .ns-pick:focus-visible .ns-pick-name { outline-color:var(--accent-dark); }
.ns-surface .ns-specs { border-top-color:rgba(29,34,32,.12); }

/* Carousel: pale silver band continuing from the section above; charcoal type; no glows. */
.hero { --fg:#1d2220; --muted:#5c635c; --line:var(--line); --accent-dark:#3d6a0b; --glow:transparent; color:var(--fg); color-scheme:light;
  background:linear-gradient(180deg, var(--tint) 0%, #e8eae5 55%, #e6e9e3 100%); }
.slide { padding-block:var(--s-sec); column-gap:var(--s-gap); }
.visual { gap:var(--s-gap); }
.hero-controls { bottom:var(--s-sec); }
.hero .arrow { border-color:rgba(29,34,32,.35); color:var(--fg); background:rgba(245,246,243,.6); }
.hero .arrow:hover, .hero .arrow:focus-visible { border-color:var(--accent-dark); color:var(--accent-dark); }
.hero .dots button { background:#9aa198; }
.hero .dots button[aria-selected="true"] { background:var(--accent-dark); }
.pill { box-shadow:none; }
.pill:hover { color:#fff; background:var(--accent-dark); border-color:var(--accent-dark); }

/* See the hardware: from the carousel's silver back to off-white; light tabs and chips. */
.media { padding:var(--s-sec) var(--edge); background:linear-gradient(180deg, #e6e9e3 0%, #eef0eb 35%, var(--paper) 75%, var(--paper) 100%); }
.media-head { margin-bottom:var(--s-head); }
.mtabs { background:var(--tint); border-color:var(--line); }
.mtabs button { color:var(--muted); }
.mtabs button[aria-selected="true"] { background:#fff; color:var(--fg); box-shadow:0 1px 3px rgba(29,34,32,.12); }
.mtabs button:hover { color:var(--fg); }
.mgrid, .mphotos, .mstrip { gap:var(--s-gap); }
.clips, .mstrip { margin-top:var(--s-gap); }
.mnote { margin-top:var(--s-gap); }
.clip { background:#fff; border-color:var(--line); }
.clip.on { border-color:var(--accent-dark); box-shadow:0 0 0 1px var(--accent-dark); }
.mphoto figcaption { background:rgba(245,246,243,.88); color:var(--fg); }

/* Footer on the same off-white. */
.foot { background:var(--paper); padding-block:var(--s-head); }

/* Refinements: the film keeps its natural colours (only a short fade into the page and a soft halo behind
   the title); every section boundary is one step, --s-sec, split evenly between the two sections. */
:root { --s-sec:clamp(4rem, 7vw, 7rem); --s-half:calc(var(--s-sec) / 2); }
.iv-shade { background:
  radial-gradient(60% 45% at 18% 88%, rgba(245,246,243,.78) 0%, rgba(245,246,243,.5) 45%, rgba(245,246,243,0) 100%); }
.iv-shade::after { height:clamp(3rem, 8vh, 5.5rem); background:linear-gradient(0deg, var(--bg) 0, rgba(245,246,243,0) 100%); }
.top.over-video { background:rgba(245,246,243,.72); border-bottom-color:transparent; backdrop-filter:blur(12px); }
.top.over-video .brand .name, .top.over-video .brand .sub { text-shadow:none; }
.iv-toggle { bottom:calc(var(--s-half) * .6); }
.iv-scroll { bottom:calc(var(--s-half) * .5); }
.ns { padding:var(--s-sec) 0 var(--s-half); }
.ns-surface { margin-top:var(--s-head); }
.slide { padding-block:var(--s-half); }
.hero-controls { bottom:var(--s-half); }
.media { padding:var(--s-half) var(--edge) var(--s-sec); }
.media-head { margin-bottom:var(--s-head); }
.foot { padding-block:var(--s-head); }

/* Why we built them: 3D view of the selected prototype. The canvas sits exactly over the picture (same
   floating wrapper), fades in once its model is ready; the picture stays as the poster and fallback. */
.ns-3d-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; cursor:grab; touch-action:none; transition:opacity .5s ease; filter:drop-shadow(0 10px 14px rgba(30,34,40,.12)); }
.ns-3d-canvas:active { cursor:grabbing; }
.ns-pick.has-3d .ns-3d-canvas { opacity:1; }
.ns-pick img { transition:opacity .5s ease; }
.ns-pick.has-3d img { opacity:0; }
.ns-pick.is-handled .ns-pick-float { animation-play-state:paused; }
/* Controls: over the selected tile's top-right corner. */
.ns-3d { --k:0; position:absolute; z-index:2; top:.7rem; left:calc((var(--k) + 1) * 100% / 3 - .7rem); transform:translateX(-100%); display:flex; align-items:center; gap:.3rem; }
.ns-3d[hidden] { display:none; }
.ns-3d-hint { margin-right:.35rem; color:#5c635c; font:600 .72rem/1 ui-monospace, Menlo, monospace; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.ns-3d button { display:grid; place-items:center; min-width:34px; height:34px; padding:0 .6rem; border:1px solid rgba(29,34,32,.18); border-radius:999px; background:rgba(255,255,255,.75); color:var(--fg); font:600 .78rem/1 Inter, system-ui, sans-serif; cursor:pointer; transition:border-color .2s, background .2s, color .2s; }
.ns-3d button svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.ns-3d button:hover { border-color:var(--accent-dark); color:var(--accent-dark); background:#fff; }
.ns-3d button:focus-visible { outline:2px solid var(--accent-dark); outline-offset:2px; }
@media (max-width:760px) {
  .ns-3d { top:calc(var(--sh, 0px) + .7rem); left:auto; right:.8rem; transform:none; }
  .ns-3d-hint { display:none; }
  .ns-3d button { min-width:30px; height:30px; padding:0 .5rem; }
}
@media (prefers-reduced-motion: reduce) { .ns-3d-canvas, .ns-pick img { transition:none; } }
@media (max-width:760px) { .ns-surface .ns-info { padding-top:3.5rem; } }

/* Smooth 3D: no CSS filter on the WebGL canvas (it would re-filter every frame; the contact shadow
   under each render stays), and the float runs on the compositor as a plain transform animation. */
.ns-3d-canvas { filter:none; }
.ns-pick .ns-pick-float { transform:none; animation:ns-float4 5.8s ease-in-out infinite alternate; will-change:transform; }
.ns-umi .ns-pick-float { animation-duration:6.2s; animation-delay:-1.4s; }
.ns-dexumi .ns-pick-float { animation-duration:5.6s; animation-delay:-3.1s; }
.ns-neck .ns-pick-float { animation-duration:6.6s; animation-delay:-2.2s; }
@keyframes ns-float4 { from { transform:translate3d(0, 0, 0); } to { transform:translate3d(0, -4px, 0); } }
/* The selected render floats a little further: an extra 2 px on its stage, starting from rest (no jump). */
.ns-pick-stage { will-change:transform; }
.ns-pick[aria-selected="true"] .ns-pick-stage { animation:ns-float2 6.4s ease-in-out infinite alternate; }
@keyframes ns-float2 { from { transform:translate3d(0, 0, 0); } to { transform:translate3d(0, -2px, 0); } }
.ns.ns-off .ns-pick-float, .ns.ns-off .ns-pick-stage, .ns-pick.is-handled .ns-pick-float, .ns-pick.is-handled .ns-pick-stage { animation-play-state:paused; }
@media (prefers-reduced-motion: reduce) { .ns-pick .ns-pick-float, .ns-pick[aria-selected="true"] .ns-pick-stage { animation:none; } }

/* One spacing rhythm: the gap between sections equals the gap between pictures in the gallery. */
:root { --s-sec:var(--s-gap); --s-half:calc(var(--s-gap) / 2); --s-head:var(--s-gap); }
.ns { padding-top:clamp(2.5rem, 4vw, 3.5rem); }   /* clear of the film's fade */
.media { padding-bottom:var(--s-sec); }

/* Intro carousel: videos stacked; the shown one fades in. Controls sit beside the pause button. */
.iv-media { opacity:0; transition:opacity .8s ease; }
.iv-media.is-on { opacity:1; }
.iv-nav { position:absolute; right:calc(var(--edge) + 52px); bottom:calc(var(--s-half) * .6); display:flex; align-items:center; gap:.45rem; height:40px; opacity:calc((.9 - var(--iv-out)) * 12); }
.iv-arrow { display:grid; place-items:center; width:32px; height:32px; padding:0; border-radius:50%; border:1.5px solid rgba(29,34,32,.3); background:rgba(245,246,243,.7); color:var(--fg); cursor:pointer; transition:border-color .2s, background .2s; }
.iv-arrow svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.iv-arrow:hover, .iv-arrow:focus-visible { border-color:var(--accent-dark); background:rgba(245,246,243,.92); }
.iv-dot { width:8px; height:8px; padding:0; border:0; border-radius:4px; background:rgba(29,34,32,.35); cursor:pointer; transition:width .3s, background .3s; }
.iv-dot[aria-current] { width:24px; background:var(--accent-dark); }
.iv-arrow:focus-visible, .iv-dot:focus-visible { outline:2px solid var(--accent-dark); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { .iv-media { transition:none; } }
@media (max-width:700px) {
  .iv-scroll { font-size:0; letter-spacing:0; }
}

/* A video marked data-fit (none at the moment) is shown whole: full width under the header,
   never cropped, and without the bottom fade, so its labels and badges stay readable. */
.iv-media[data-fit] { top:var(--top-h); height:calc(100% - var(--top-h)); object-fit:contain; object-position:50% 0; }
.iv-shade::after { transition:opacity .6s ease; }
.iv.is-fit .iv-shade::after { opacity:0; }

/* The GEAR UMI and GEAR Neck films each have a label box in a top corner. On wider screens they fill the full width
   but start below the header, so the label stays clear of the header; any crop comes off the bottom. The page title
   and its fade show over them like the DexUMI film. On phones they fill the tall intro frame like the other film. */
@media (min-width:701px) { .iv-media[data-below], .iv-media[data-neck] { top:var(--top-h); height:calc(100% - var(--top-h)); object-fit:cover; object-position:50% 0; } }

/* Project tabs in the header: GEAR DexUMI, GEAR UMI, GEAR Neck. They take the header's text colour; over the
   intro video they sit on a light frosted strip so they stay readable. On phones the "GEAR " prefix is dropped.
   Kept no taller than the logo so the header height does not change. */
.top-tabs { display:flex; align-items:center; gap:.15rem; padding:.15rem; border-radius:999px; }
.top-tabs a { display:block; padding:.38rem .85rem; border-radius:999px; color:inherit; text-decoration:none; font-weight:600; font-size:.9rem; line-height:1.2; white-space:nowrap; transition:background-color .2s; }
.top-tabs a:hover { background:color-mix(in srgb, currentColor 9%, transparent); }
.top-tabs a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.top.over-video .top-tabs { background:rgba(245,246,243,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
@media (max-width:700px) {
  .top-tabs .pre { display:none; }
  .top-tabs a { padding:.38rem .6rem; }
}

/* Links to the original UMI and DexUMI projects inside "Why we built them": text colour, green underline. */
.ns-why a { color:inherit; text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:3px; }
.ns-why a:hover { color:var(--accent-dark); }

/* "Source on GitHub" under the "Why we built them" heading: an outlined pill in the section's text colour. */
.gh-btn { display:inline-flex; align-items:center; gap:.5rem; margin-top:1rem; padding:.5rem 1rem; border:1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius:999px; color:inherit; text-decoration:none; font-weight:600; font-size:.92rem; line-height:1.2; transition:background-color .2s, border-color .2s; }
.gh-btn svg { width:1.05em; height:1.05em; fill:currentColor; flex:none; }
.gh-btn:hover { background:color-mix(in srgb, currentColor 8%, transparent); border-color:color-mix(in srgb, currentColor 50%, transparent); }
.gh-btn:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
/* The smallest phones (320 px): logo and project tabs share one row. */
@media (max-width:360px) {
  .brand .name { font-size:1.4rem; }
  .top-tabs a { padding:.38rem .5rem; }
}