/* The whole look of the website, in one sheet.
 *
 * THE THIRD REMAKE, at the founder's word of 2026-09-29: "just copy the same
 * fucking design cursor has used." So this file is that site's front page,
 * section for section, proportion for proportion, in HIS OWN COLOURS, which
 * is the one thing of ours that stays: a slim bar, a small headline set to
 * the LEFT with one line under it and two controls, one huge panel holding the
 * software with the product docked inside it, a quiet row of tiles naming the
 * applications, six wide bands one after another with the words on one side
 * and the product on the other, sides swapping band by band, a row of three
 * small tiles, and a foot in columns. Four of the bands are what Oba does; the
 * last two, at his word of 2026-09-29 evening, are WHERE IT SITS in the
 * application and what its Open in menu does, which is the product's own
 * ribbon drawn here until the screenshots come off the machine.
 *
 * THE NUMBERS ARE MEASURED OFF THAT PAGE AND NOT GUESSED (the shots and the
 * measurements are in docs/site-2026-09-29/build-3.md): the frame is 1300
 * wide with a 72 gutter, a band is 16 round with 16 of padding, the stage
 * inside it is inset 16 on three sides, the picture in it sits 42 off the top
 * of that panel and is held to its right edge, one band is 96 from the next,
 * the controls are pills 40 high, the headline is 34 and every heading under
 * it is 20, and a sentence beside a heading is 20 in the dim ink rather than
 * a size of its own.
 *
 * THE PAGE FOLLOWS THE SCREEN'S OWN SETTING, as that site's does (his word of
 * 2026-09-29, in the same breath as the design): the founder's charcoal is
 * the dark one and is what bare :root declares, and one block below swaps the
 * six grounds and inks for a cream page. THE ACCENT NEVER MOVES: the ochre is
 * the same in both, which is why neither ochre token is written twice.
 *
 * THE WINDOW IN EVERY FRAME IS THE PRODUCT AND NOT A PICTURE OF IT, and not
 * one rule in this file reaches inside it: the frame is sized to the width a
 * docked palette really opens at and that is the whole of what this sheet
 * says about it. Its own look is adapters/window/oba.css, which this campaign
 * does not touch, and it stays dark on a cream page exactly as that site's
 * own application windows keep their own look on its cream.
 *
 * AND IT IS SHOWN WHERE IT LIVES (his word of 2026-09-29: "why aren't the
 * pictures the software and Oba attached to it on the side like a copilot").
 * The opening and each of the six bands draw AutoCAD's own workspace around
 * it, in elements and rules and one inline drawing and nothing else: a title
 * strip with the drawing's name, a ribbon of quiet blocks under four short
 * words, the drawing tabs, the canvas in near black with the plan on it and a
 * UCS mark in its corner, the command line and a thin status bar, with the
 * real window docked down the right edge of the canvas at its true width and
 * the full height of it. No mark and no name belonging to anybody else: the
 * shape of the workspace and nothing more. It is dark in both settings,
 * because the application is.
 *
 * The founder's eight colours and no ninth (docs/look-pass-2026-09-05/
 * design-system.md), declared once below in his own order and with the same
 * comments the Oba window uses, so the two files read as one palette.
 *
 * THE OCHRE IS THE INVITATION, AND ON THE FRONT PAGE IT IS IN THREE REGIONS
 * (the founder's ruling of 2026-09-29: "as cursor.com does with its primary
 * button in the bar and the hero both"). Ochre is semantic: it means "the
 * agent did this / needs you", and the design system forbids it on generic
 * buttons, links, hovers and focus rings while allowing it on the primary
 * action of the one thing a surface asks a person to do, at most ONE BEARER
 * PER REGION. This site asks for exactly one thing, so that one thing is what
 * wears it, and the regions are named rather than counted loosely: the bar,
 * the opening and the closing row, one bearer each. Every page behind the
 * front door carries exactly one, the bar's; the repeat inside its own words
 * is the outlined shape. Every other link, hover, button and focus ring on
 * this site is chalk or steel.
 *
 * AND THAT IS WHERE THE COPY AND THE RULE MEET (build-3.md says it again):
 * the site being copied paints its "Learn about ..." links in its own accent.
 * Ours cannot, because the accent here is the ask and the founder set that
 * rule the same day. So the link under each band keeps that site's place, its
 * size and its arrow, and is drawn in chalk. What wears the ochre is what he
 * said wears it, three times on the front page and once on every other.
 *
 * Three radii, one spacing scale of seven steps, five type sizes, two font
 * stacks, and nothing else. What a person presses is a pill, what a panel is
 * takes the big corner, what a person types into takes the small one. No
 * gradient, no blur, no animation, no @font-face and no url() to anywhere:
 * this sheet is the only thing any page of this site loads, and it loads
 * nothing itself. Every shadow on this site is the same one that other site
 * draws under a floating window, in the page's own ground and never in a black
 * with an alpha on it. One focus ring, drawn in chalk, on every link, every
 * input and every button.
 *
 * NO CAPTION ANYWHERE (his word of 2026-09-29: "remove the 'an example'
 * note"). Every frame on the front page used to carry one line of steel under
 * it; they are all gone, and so is the rule that drew them.
 *
 * The wordmark is the lowercase word oba set in the sans stack, which is what
 * the window does today and what the design system asks for while the faces
 * are not locked. There is no image in this stylesheet, on any page of this
 * site, and no favicon: the brand files are parked at the founder's word and
 * land the day he says so. The one mark a reader sees on a page is the
 * founder's own beside the wordmark, inlined in every bar, the window's own
 * inside the frames on the front page, and the plans on the canvases and
 * behind the closing tiles, which are lines in one ink and carry no colour of
 * their own.
 */

/* THE GROUND IS ONE STEP DARKER THAN THE WINDOW'S (the founder, 2026-09-29:
 * "make the first layer the background color darker"). This site's eight are
 * the window's eight with that one change: the page's ground is #141414, one
 * step under the charcoal the product's own window is drawn on, so the panels,
 * the bands and the workspace all stand off it instead of sitting level with
 * it, and the window inside every frame reads as a thing ON the page rather
 * than a hole in it. The window keeps its own ground, which comes out of its
 * own stylesheet and never out of this one; the application's canvas below
 * takes the darker one too, which is what a drawing canvas looks like beside a
 * palette. scripts/site_proof.py holds this site to ITS eight and says in one
 * line why the first of them is not the window's, and the window's own ground
 * is a value this sheet may no longer write at all. The cream page is
 * unchanged. */
:root {
  --oba-slate:      #141414;   /* the page's ground, one step under the window */
  --oba-chalk:      #EBEBEB;   /* primary text, hairline rings, hovers */
  --oba-ochre:      #E8A400;   /* THE accent, semantic: the one thing asked */
  --oba-ochre-deep: #A67200;   /* light grounds; the same control, hovered */
  --oba-steel:      #9A9A9A;   /* secondary text, captions, disabled */
  --oba-surface-1:  #252526;   /* raised: the panels, the stage, the button */
  --oba-surface-2:  #2D2D2D;   /* higher: the inputs, an inline command */
  --oba-border:     #3C3C3C;   /* hairlines */
  --oba-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --oba-mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  /* Three radii and no fourth. The pill is what a person presses, the big one
     is what a panel is, and the small one is what a person types into or what
     holds the product itself. */
  --oba-r: 8px;
  --oba-r-big: 16px;
  --oba-r-pill: 999px;

  /* One spacing scale. Every margin, padding and gap on this site is one of
     these seven, so a stranger adding a rule has seven numbers to choose from
     and not an inch of taste. The last two are the page's own gutter and the
     air between one band and the next, both read off the page copied. */
  --oba-s1: 4px;
  --oba-s2: 8px;
  --oba-s3: 16px;
  --oba-s4: 24px;
  --oba-s5: 40px;
  --oba-s6: 72px;
  --oba-s7: 96px;

  /* The one width the whole page is drawn inside, which is that site's own. */
  --oba-page: 1300px;

  /* Five type sizes. The front page's one line is the largest and is used on
     that line and nowhere else; a page behind the front door heads itself with
     the next; then EVERY heading and every sentence beside one, which are the
     same size on the page being copied and differ by ink alone; then the body
     and the controls; then the bar, the labels and the small print. Nothing else on this site has a size of its own. */
  --oba-t0: 34px;
  --oba-t1: 28px;
  --oba-t2: 20px;
  --oba-t3: 16px;
  --oba-t4: 14px;

  /* THE APPLICATION THE PRODUCT IS DOCKED INSIDE, and the one set of inks on
     this site that does not follow the screen's setting: AutoCAD is dark, so
     the workspace drawn on this page stays dark on a cream page too, exactly
     as the product's own window inside it does. Every value here is one of the
     eight above, written again under a name of its own; what these names buy
     is that the light block below never swaps them. */
  --oba-app:      #141414;   /* the drawing canvas, near black */
  --oba-app-bar:  #252526;   /* the title strip, the ribbon, the status bar */
  --oba-app-high: #2D2D2D;   /* a tool block, the tab a drawing is open on */
  --oba-app-line: #3C3C3C;   /* the hairlines between the strips */
  --oba-app-ink:  #EBEBEB;   /* the drawing's own lines, and the live tab */
  --oba-app-dim:  #9A9A9A;   /* every word the application says */
}

/* THE SAME PAGE ON A SCREEN SET TO LIGHT, and the six values that change.
 * His word of 2026-09-29, beside the design itself: that site follows the
 * setting, so this one does. The charcoal above is the dark one and this is
 * the light one, and the swap is SIX GROUNDS AND INKS AND NOTHING ELSE:
 * neither ochre is written here, so the accent is the same colour on both and
 * cannot drift; every rule below names a token and never a colour, so not one
 * of them is repeated for the light page.
 *
 * THE PRODUCT INSIDE THE FRAMES STAYS DARK IN BOTH, which is what the site
 * being copied does with its own application windows on its cream.
 *
 * Five of the six are the founder's own (the cream, the white panel, the ink,
 * the dim and the hairline). The sixth, the higher surface a person types into
 * and an inline command sits on, he did not name; it is taken as a DEFAULT
 * here, his to confirm, in the same way the window's own light blue was, and
 * scripts/site_proof.py holds all six to exactly these values. */
@media (prefers-color-scheme: light) {
  :root {
    --oba-slate:     #F5F4EF;   /* the page's ground */
    --oba-chalk:     #1A1A1A;   /* primary text, hairline rings, hovers */
    --oba-steel:     #6B6B6B;   /* secondary text, captions, disabled */
    --oba-surface-1: #FFFFFF;   /* raised: the panels, the stage, the button */
    --oba-surface-2: #ECEAE2;   /* higher: the inputs, an inline command */
    --oba-border:    #E3E1DA;   /* hairlines */
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--oba-slate);
  color: var(--oba-chalk);
  font-family: var(--oba-sans);
  font-size: var(--oba-t3);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* -- the frame every page wears ------------------------------------------ */

/* THE PAGE IS 1300 WIDE WITH A 72 GUTTER, which is that site's own frame,
   measured off it. The bar, the words and the foot all stand inside it. */
.page {
  max-width: calc(var(--oba-page) + var(--oba-s6) + var(--oba-s6));
  margin: 0 auto;
  padding: 0 var(--oba-s6) var(--oba-s7);
}

/* -- the bar, and the wordmark ------------------------------------------- */

/* SLIM, AND IT STAYS. The wordmark on the left, the words in the MIDDLE and
   the one control the whole site asks for at the far right, which is that
   site's bar exactly: three columns, the outer two equal, so the words sit on
   the centre of the page and not on the centre of what is left over. */
.top {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--oba-slate);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--oba-s4);
  padding: var(--oba-s3) 0;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: var(--oba-s2);
  font-family: var(--oba-sans);
  font-size: var(--oba-t2);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
}

/* THE MARK BESIDE THE WORDMARK: the founder's own, inlined in every page's
   bar by scripts/mark_table.py from adapters/window/brand/still/
   oba-mark-small.svg, in its own ink on the bar's own ground with its one
   ochre ring. That ring is the one ochre on this site written as a hex rather
   than taken from the palette's token, and scripts/site_proof.py pins it to
   that one element and no other: outside the glyph no page carries an ochre hex
   at all. Sized to the wordmark's own type, so the two read as one thing. */
.mark-glyph {
  width: 1.2em;
  height: 1.2em;
  flex: none;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--oba-s5);
  font-size: var(--oba-t4);
}

/* The bar's own words are secondary and they say so: steel, no rule under
   them, chalk when the pointer is on one. */
.nav a {
  color: var(--oba-steel);
  text-decoration: none;
}

.nav a:hover {
  color: var(--oba-chalk);
}

/* -- the two shapes a control comes in ----------------------------------- */

/* THE ONE THING THE SITE ASKS YOU TO DO, and the only element on this site
   drawn in the accent. The ground is the accent and the word on it is the
   page's own dark, because chalk on ochre is two light things on top of each
   other. It is a pill 40 high, which is that site's own control, and a link
   rather than a button element, so it takes the one chalk focus ring with
   every other link and needs no ring of its own. */
.cta {
  display: inline-block;
  background: var(--oba-ochre);
  color: var(--oba-slate);
  border: 1px solid var(--oba-ochre);
  border-radius: var(--oba-r-pill);
  font-size: var(--oba-t3);
  font-weight: 500;
  line-height: 1.5;
  padding: var(--oba-s2) var(--oba-s4);
  text-decoration: none;
  white-space: nowrap;
}

.cta:hover {
  background: var(--oba-ochre-deep);
  border-color: var(--oba-ochre-deep);
}

/* AND THE QUIET ONE BESIDE IT. The same pill drawn in a hairline: the
   download for somebody who already has an invitation, and the repeat of the
   ask inside the words of each page behind the front door, whose own accent is
   the one in the bar. Nothing here is the agent doing anything, so nothing here
   is ochre. */
.ghost {
  display: inline-block;
  background: transparent;
  color: var(--oba-chalk);
  border: 1px solid var(--oba-border);
  border-radius: var(--oba-r-pill);
  font-size: var(--oba-t3);
  font-weight: 500;
  line-height: 1.5;
  padding: var(--oba-s2) var(--oba-s4);
  text-decoration: none;
  white-space: nowrap;
}

.ghost:hover {
  border-color: var(--oba-chalk);
}

/* The bar's own is the same control at the bar's own size, and it stands at
   the far right of its column. */
.top .cta {
  font-size: var(--oba-t4);
  padding: var(--oba-s1) var(--oba-s3);
  justify-self: end;
}

/* -- headings and prose -------------------------------------------------- */

/* A SENTENCE KEEPS ITS MEASURE. The frame is wide; a line of prose is not,
   because a line a reader's eye cannot come back from is a line nobody
   finishes. The front page takes this off below, where what fills the width
   is a band and never a paragraph. */
main {
  max-width: 40rem;
  margin: 0 auto;
}

h1 {
  font-size: var(--oba-t1);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: var(--oba-s7) 0 var(--oba-s4);
}

h2 {
  font-size: var(--oba-t2);
  font-weight: 500;
  line-height: 1.4;
  margin: var(--oba-s5) 0 var(--oba-s2);
}

p, ul {
  margin: 0 0 var(--oba-s3);
}

ul {
  padding-left: var(--oba-s4);
}

li {
  margin-bottom: var(--oba-s2);
}

/* The bullet is a mark of place and not a word, so it is steel. */
li::marker {
  color: var(--oba-steel);
}

/* The one line under a page's heading. Steel, because it is the second thing
   a person reads and not the first. */
.lead {
  font-size: var(--oba-t2);
  line-height: 1.5;
  color: var(--oba-steel);
  margin-bottom: var(--oba-s5);
}

.quiet {
  color: var(--oba-steel);
  font-size: var(--oba-t4);
}

/* -- links --------------------------------------------------------------- */

/* Chalk, underlined, and the hover is the underline going away. No accent
   colour, because a link on a website is not the agent doing something. */
a {
  color: var(--oba-chalk);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration: none;
}

/* ONE FOCUS IDIOM, everywhere, and it is ONE RULE: a chalk ring, off the
   border, on every link, every input and every button. It is never removed and
   never coloured. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--oba-chalk);
  outline-offset: 2px;
}

/* -- the front page ------------------------------------------------------ */

/* What fills a wide frame here is a band, so the measure comes off and each
   piece below sets its own. */
.front main {
  max-width: none;
}

/* THE OPENING. One line set to the LEFT, one line under it, two controls, and
   then the product in the panel below: the whole of what a person meets before
   they have scrolled, in that site's own order and at its own sizes. */
.opening {
  padding: var(--oba-s7) 0 0;
}

.hero {
  font-size: clamp(26px, 2.6vw, var(--oba-t0));
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 var(--oba-s3);
  max-width: 30rem;
}

.sub {
  font-size: var(--oba-t2);
  line-height: 1.5;
  color: var(--oba-steel);
  margin: 0 0 var(--oba-s4);
  max-width: 34rem;
}

/* The two controls, side by side, wrapping onto two lines on a narrow
   screen. */
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oba-s2);
  margin: 0 0 var(--oba-s5);
}

/* -- the panel the page opens on ----------------------------------------- */

/* THE HUGE ONE. Where that site puts a painting with its own windows floating
   over it, this puts THE WORKSPACE A DRAFTER KNOWS, drawn in this page with
   nothing but elements, rules and one inline drawing: the application dark
   behind it and the real Oba window docked down its right edge, the way the
   palette really sits in AutoCAD and the way that other assistant sits beside
   the code in its editor (the founder's own words, 2026-09-29: "why aren't the
   pictures the software and Oba attached to it on the side like a copilot").
   The panel is the page's own width, 16 round, one step off the ground. */
.opener,
.stage {
  position: relative;
  overflow: hidden;
  background: var(--oba-surface-1);
  border: 1px solid var(--oba-border);
  border-radius: var(--oba-r-big);
  margin: 0;
}

/* A COLUMN AND NOT A ROW, because the one sentence that keeps this page honest
   sits under the product on a narrow screen and beside nothing at all on a wide
   one: on a wide screen it is lifted out of the flow onto the panel's own
   corner, and on a narrow one it falls back into this column under the window.
   A row would have made it a second column beside the product. */
.opener {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--oba-s5) var(--oba-s3);
}

/* THE DRAWING, and it is drawn and not fetched: an inline <svg> of walls, door
   swings, dimension chains, window openings, furniture and a column grid,
   filling whatever it stands in. It carries no colour of its own, so on the
   page's own panel it is the dim ink and follows the screen's setting, and on
   the application's canvas below it is the chalk a drawing is drawn in. */
.plan {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--oba-steel);
  opacity: 0.62;
  pointer-events: none;
}

/* -- the workspace the product is docked inside -------------------------- */

/* ONE APPLICATION, DRAWN IN THE PAGE. A title strip with the drawing's name, a
   ribbon of quiet blocks under a few short words, the drawing tabs, the canvas
   with the plan on it and a UCS mark in its corner, the command line and a thin
   status bar. No mark and no name that belongs to anybody else: this is the
   SHAPE of the workspace and nothing more. Its inks are the six above, which
   the light block never swaps, so it is dark on a cream page as the
   application itself is.

   IT IS WIDER THAN A BAND'S PANEL ON PURPOSE. The workspace is 1180 across, the
   way a screen is; a panel holds the right of it and cuts the left, which is
   what that other site does with every screen inside one of its own bands, and
   it is the side that keeps the docked palette whole. */
.app {
  display: flex;
  flex-direction: column;
  flex: none;
  width: 1180px;
  max-width: 100%;
  background: var(--oba-app);
  border: 1px solid var(--oba-app-line);
  border-radius: var(--oba-r);
  box-shadow: 0 24px 60px var(--oba-slate);
  overflow: hidden;
  color: var(--oba-app-dim);
  font-size: var(--oba-t4);
  line-height: 1.2;
}

.app-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  background: var(--oba-app-bar);
  border-bottom: 1px solid var(--oba-app-line);
}

.app-ribbon {
  position: relative;
  background: var(--oba-app-bar);
  border-bottom: 1px solid var(--oba-app-line);
  padding: 0 var(--oba-s3);
}

/* THE RIBBON'S OWN DROP-DOWN, OPEN. The band about sending a drawing to
   another application shows the list a person really sees: the ten rows of
   adapters/autocad_com/panel/ObaRibbon.cs's OpenInMenu, in its order and in its
   words, with the one being picked lit. It hangs off the ribbon and over the
   canvas, clipped by the workspace's own corner, exactly where the application
   draws it. Plain rows and no icons: the pictures in that menu are Oba's own
   and this page draws nobody's mark. */
.ribbon-menu {
  position: absolute;
  top: 100%;
  left: 96px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 190px;
  padding: var(--oba-s1) 0;
  background: var(--oba-app-high);
  border: 1px solid var(--oba-app-line);
  border-radius: var(--oba-r);
  box-shadow: 0 12px 30px var(--oba-slate);
}

.ribbon-menu span {
  padding: var(--oba-s1) var(--oba-s3);
  white-space: nowrap;
}

.ribbon-menu .front {
  background: var(--oba-app-bar);
  color: var(--oba-app-ink);
}

.ribbon-words {
  display: flex;
  gap: var(--oba-s4);
  padding: var(--oba-s1) 0;
}

/* The one the ribbon is open on. */
.ribbon-words .front {
  color: var(--oba-app-ink);
}

/* THE TOOLS AS BLOCKS, because a row of invented icons would be a row of
   somebody else's icons. What a person recognises here is the rhythm: tall
   blocks first in a group, small ones after them, a hairline between groups. */
.ribbon-tools {
  display: flex;
  align-items: flex-end;
  gap: var(--oba-s1);
  height: 34px;
  overflow: hidden;
}

.tool {
  display: block;
  width: 26px;
  height: 14px;
  background: var(--oba-app-high);
  border-radius: 2px;
}

.tool.tall {
  height: 26px;
  width: 30px;
}

.tool.gap {
  width: 1px;
  height: 26px;
  background: var(--oba-app-line);
  border-radius: 0;
  margin: 0 var(--oba-s2);
}

.app-tabs {
  display: flex;
  gap: 1px;
  background: var(--oba-app-bar);
  border-bottom: 1px solid var(--oba-app-line);
  padding: 0 var(--oba-s3);
}

.app-tabs span {
  padding: var(--oba-s1) var(--oba-s3);
  background: var(--oba-app-bar);
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.app-tabs .front {
  background: var(--oba-app);
  color: var(--oba-app-ink);
}

/* THE CANVAS AND THE PALETTE BESIDE IT, which is the whole point of this
   picture: the drawing fills what is left and the product is docked down the
   right edge at the width it really opens at, the full height of the canvas. */
.app-body {
  display: flex;
  align-items: stretch;
  min-height: 0;
}

.app-canvas {
  position: relative;
  flex: 1;
  min-width: 0;
  background: var(--oba-app);
  overflow: hidden;
}

.app-canvas .plan {
  color: var(--oba-app-ink);
  opacity: 0.5;
}

/* The mark in the corner that says which way the drawing runs. */
.ucs {
  position: absolute;
  left: var(--oba-s4);
  bottom: var(--oba-s4);
  width: 54px;
  height: 54px;
  color: var(--oba-app-ink);
  opacity: 0.65;
}

.app-line {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 var(--oba-s3);
  background: var(--oba-app-high);
  border-top: 1px solid var(--oba-app-line);
}

.app-status {
  display: flex;
  justify-content: flex-end;
  gap: var(--oba-s4);
  height: 24px;
  align-items: center;
  padding: 0 var(--oba-s3);
  background: var(--oba-app-bar);
  border-top: 1px solid var(--oba-app-line);
}

/* The frame the window sits in, sized to the width a docked palette really
   opens at and shrinking with the page below that, which is the one thing
   that has to give on a narrow screen. It stands above the drawing with the
   one shadow on this site under it, which is the shadow that site draws under
   its own floating windows. NOTHING ELSE IS SAID ABOUT IT: what is inside it
   is the window's own stylesheet, untouched, and it stays dark on a cream
   page exactly as that site's windows keep their own look.

   THE SHADOW IS DRAWN IN THE PAGE'S OWN GROUND and not in a black with an
   alpha on it, because a colour written as rgba() is a ninth colour the
   census cannot read and the rule against one is older than this design. One
   declaration serves both settings: the ground is darker than the panel on a
   charcoal page and warmer than it on a cream one, so the window lifts off
   the panel either way. */
.window {
  position: relative;
  width: 460px;
  max-width: 100%;
  height: 640px;
  border: 1px solid var(--oba-border);
  border-radius: var(--oba-r);
  background: var(--oba-slate);
  box-shadow: 0 24px 60px var(--oba-slate);
  display: block;
}

/* DOCKED, and that means it has no frame of its own: a palette docked in an
   application shares the application's edge and takes the full height of the
   canvas beside it. So inside a workspace the window keeps its width and loses
   its corner, its shadow and three of its four sides. */
.app .window {
  flex: none;
  width: 460px;
  max-width: 50%;
  height: auto;
  align-self: stretch;
  border: 0;
  border-left: 1px solid var(--oba-app-line);
  border-radius: 0;
  box-shadow: none;
}

/* NO CAPTION UNDER ANY FRAME (the founder, 2026-09-29: "remove the 'an
   example' note"). Every frame on this page carried one line of steel saying
   the words in the window were an example; he took them all off, so the rule
   that drew them is gone with them and scripts/site_proof.py holds the page to
   having none at all. Nothing replaced them: the window in every frame is the
   preview stand-in, which says what it is the moment anybody types into it. */

/* -- the five applications ----------------------------------------------- */

/* THE QUIET ROW, where that other site shows the marks of the companies that
   use it: one small line over it, and under it five tiles of exactly that
   shape, one per application, the one a person can use today in chalk and the
   four that are built and waiting in steel. Nothing here is a control. */
.where {
  padding: var(--oba-s7) 0 0;
  text-align: center;
}

.row-head {
  color: var(--oba-steel);
  font-size: var(--oba-t4);
  margin: 0 0 var(--oba-s4);
}

.apps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--oba-s2);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--oba-s4);
  font-size: var(--oba-t2);
  letter-spacing: 0.01em;
}

.apps li {
  position: relative;
  /* A STACKING CONTEXT OF ITS OWN, so the two layers below can sit UNDER the
     name instead of over it: inside one, the tile's own ground paints first,
     then anything at a negative depth, then the word. Without it a positioned
     layer paints above the text whatever it is asked to do, which is why the
     tint used to wash over the name. */
  z-index: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  background: var(--oba-surface-1);
  border: 1px solid var(--oba-border);
  border-radius: var(--oba-r-big);
  margin: 0;
  color: var(--tile-ink);
  font-weight: 500;
}

/* EACH APPLICATION IN TWO COLOURS OF ITS OWN, AND NO LOGO (the founder,
   2026-09-29, twice over: first "each in the colour that application is known
   by", then "make the background the box for it a little design to do with its
   colors"). Where that other site puts the marks of the companies that use it,
   this row puts the five applications Oba opens inside, each tile a box tinted
   with that application's own colour and carrying a small design in its two
   shades. Not one mark, not one wordmark and not one letter of anybody's brand
   is drawn here: a tile, a tint, a band and the name.

   TEN COLOURS, TWO PER TILE, taken from the makers' own palettes: AutoCAD's
   red with its dark red, Rhino's red with its grey, Blender's orange with its
   dark, 3ds Max's blue teal with its dark, and Revit's blue with its dark. The
   values are written ONCE EACH, in the five rules at the foot of this comment
   and nowhere else in this file, this comment included: a colour named twice is
   a colour that can drift, and scripts/site_proof.py reads every other byte of
   every file of this site for all ten.

   Each tile declares them as two names of its own and nothing else. The shared
   rules under this comment are what SPEND them: the tint is the main shade at a
   seventh, laid under the name by a layer of its own rather than written as a
   colour mixed by hand, so the same declarations give the right tint on a
   charcoal panel and on a cream one; the band is a soft diagonal in the darker
   shade, also under the name. On a cream page the two swap roles, in the second
   light block below, which names no colour at all.

   These ten colours are the ONLY colours on this site that are not the
   founder's eight, they are allowed on these five tiles and nowhere else, and
   scripts/site_proof.py holds that by selector: one rule per tile, in the row's
   own order, each naming its own two colours and nothing else. A sixth tile, an
   eleventh colour, or one of the ten anywhere else on the site, is red. */
.apps li::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--tile-ink);
  opacity: 0.14;
  pointer-events: none;
}

/* THE LITTLE DESIGN: one soft diagonal band in the darker shade, low in the
   tile and running off both of its sides, clipped by the tile's own corner. It
   sits UNDER the name, which is what the stacking context above is for. */
.apps li::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -10%;
  bottom: -14px;
  width: 120%;
  height: 34px;
  background: var(--tile-deep);
  opacity: 0.7;
  transform: rotate(-7deg);
  pointer-events: none;
}

.apps li:nth-child(1) {
  --tile-ink: #E51050;
  --tile-deep: #770829;
}

.apps li:nth-child(2) {
  --tile-ink: #990000;
  --tile-deep: #858585;
}

.apps li:nth-child(3) {
  --tile-ink: #E87D0D;
  --tile-deep: #313131;
}

.apps li:nth-child(4) {
  --tile-ink: #39A5CC;
  --tile-deep: #36687F;
}

.apps li:nth-child(5) {
  --tile-ink: #176BFF;
  --tile-deep: #093E92;
}

/* THE SECOND LIGHT BLOCK, AND IT NAMES NO COLOUR. On a cream page the name is
   the darker shade and the band is the main one, which is the same pair read
   the other way round; both are var() references to the tile's own two names,
   so there is no third colour here and no value that could drift from the ten
   above. The block that carries the page's six grounds and inks is the FIRST
   one, far above, and it is the one scripts/site_proof.py pins to six tokens at
   six values; this one is pinned to naming nothing. */
@media (prefers-color-scheme: light) {
  .apps li {
    color: var(--tile-deep);
  }

  .apps li::after {
    background: var(--tile-ink);
    opacity: 0.55;
  }
}

/* AND ALL FIVE AT FULL STRENGTH (his word of 2026-09-29: Oba is an agent for
   more than one piece of software and this page may never read as though it
   were for one). The row used to dim four of the five to say which one ships
   today; it says nothing of the kind now. Five applications, ten colours, one
   strength, and no rule anywhere in this sheet that dims a tile. */

.where .quiet {
  margin: 0 auto;
  max-width: 34rem;
}

/* -- the four bands ------------------------------------------------------ */

/* ONE BAND IS ONE THING OBA DOES, and it is that site's own shape: the page's
   full width, the words on one side held in the middle of the height, the
   panel with the product in it filling the other side and inset 16 from the
   band's own edge, and the sides swapping band by band so the page has a
   rhythm going down it. */
.band {
  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  align-items: center;
  gap: 0;
  margin: var(--oba-s7) 0 0;
  padding: var(--oba-s3);
  background: var(--oba-surface-1);
  border: 1px solid var(--oba-border);
  border-radius: var(--oba-r-big);
}

.band.flip {
  grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
}

.band.flip .band-words {
  order: 2;
}

.band.flip .stage {
  order: 1;
}

/* THE WORDS SIT IN THE MIDDLE OF THEIR OWN COLUMN (the founder, 2026-09-29:
   "some wordings are stuck to the real life scenario images ... center it with
   its left and right"). The padding used to be 40 on one side and 4 on the
   other, which was fine on a band whose words are on the left and wrong on
   every flipped one: there the 4 was the side facing the workspace, so the
   sentence ran into the picture. It is ONE number on both sides now, so the
   column has the same room left and right whichever way the band faces, and
   the gap between the last word and the frame beside it is the same 40 on
   every band of the page. On a narrow screen the band is one column and the
   sides are the narrow gutter's own step, which lines the words up with the
   panel under them. */
.band-words {
  padding: var(--oba-s4) var(--oba-s5);
}

.band-words h2 {
  font-size: var(--oba-t2);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0;
}

.band-words p {
  font-size: var(--oba-t2);
  line-height: 1.45;
  color: var(--oba-steel);
  margin: 0;
  max-width: 24rem;
}

/* THE LINE UNDER THE WORDS, in that site's own place and at its own size, with
   its arrow. It is CHALK and not the accent: what the accent means here is the
   one thing the site asks a person to do, and a link that teaches is not that.
   The header of this file says it again. */
.more {
  display: inline-block;
  margin: var(--oba-s4) 0 0;
  font-size: var(--oba-t3);
  color: var(--oba-chalk);
  text-decoration: none;
}

.more:hover {
  text-decoration: underline;
}

/* THE PANEL THE WORKSPACE STANDS IN, and the workspace standing in it: the
   panel fills its side of the band, one step up off the band's own ground so it
   reads as a picture standing in it, and the application is held to its RIGHT
   edge with its left running off the panel and cut by it. That is exactly what
   that site does with the screen inside each of its own bands, and it is the
   side that has to be kept: what a person has to see here is the product docked
   down the right of the software, whole. */
.stage {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: var(--oba-surface-2);
  padding: 42px 32px 42px 0;
  min-height: 0;
}

/* How tall the canvas is, and therefore how tall the palette docked beside it
   is: one number per place the workspace stands, because the panel around it
   is the proportion measured off that other site and the chrome above and
   below the canvas is a fixed 154. */
.app-body {
  height: 540px;
}

.opener .app-body {
  height: 560px;
}

.band .window {
  width: 460px;
  max-width: none;
  flex: none;
}

/* -- the closing row of three -------------------------------------------- */

/* THREE SMALL TILES IN A ROW, which is the row that site closes on: a heading,
   a sentence, and under them either the product itself or the one thing this
   site asks for. The last of the three is the ask, and it is the third and
   last ochre element on this page. */
.close {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--oba-s4);
  margin: var(--oba-s7) 0 0;
}

.tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--oba-surface-1);
  border: 1px solid var(--oba-border);
  border-radius: var(--oba-r-big);
  padding: var(--oba-s3);
  min-height: 420px;
}

.tile h2 {
  font-size: var(--oba-t2);
  font-weight: 500;
  line-height: 1.35;
  margin: var(--oba-s1) 0 0 var(--oba-s1);
}

.tile p {
  font-size: var(--oba-t2);
  line-height: 1.45;
  color: var(--oba-steel);
  margin: 0 0 var(--oba-s4) var(--oba-s1);
}

/* The two that hold the product hold it the way the bands above do: a stage
   filling what is left of the tile, the window standing in it and running past
   its edge. IN A TILE THE PANEL IS A COLUMN, because the window is taller than
   what is left of the tile and is cut off by its bottom edge, which is what
   that site does with the picture in each of its own three. */
.tile .stage {
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--oba-s3) var(--oba-s3) 0;
}

.tile .window {
  width: 460px;
  height: 460px;
  max-width: none;
  flex: none;
}

/* THE ONE THAT ASKS stands on a panel of its own, so the row of three reads as
   three of the same thing: the two beside it hold the product on a drawing, and
   this one holds the control on one, at its own width and not the tile's. */
.stage.ask {
  align-items: center;
  justify-content: center;
}

.tile .cta {
  align-self: center;
  margin: 0;
}

/* -- the raised panels --------------------------------------------------- */

.note {
  background: var(--oba-surface-1);
  border: 1px solid var(--oba-border);
  border-radius: var(--oba-r-big);
  padding: var(--oba-s4);
  margin: 0 0 var(--oba-s4);
}

.note p:last-child {
  margin-bottom: 0;
}

/* A command to type, or the code one copy of Oba is waiting under, is the
   thing its panel is about, so inside a panel it is set at the body size and
   not at the small one. */
.note code {
  font-size: var(--oba-t3);
}

/* -- aligned numerics, and a command as a person types it ---------------- */

/* Monospace on every aligned numeric and nowhere else: the version, the byte
   count and the sha256 on the download page, the code a copy of Oba is
   waiting under, and the commands a person types in a terminal. */
.numeric,
code {
  font-family: var(--oba-mono);
  font-size: var(--oba-t4);
  overflow-wrap: anywhere;
}

code {
  background: var(--oba-surface-2);
  border-radius: var(--oba-r);
  padding: var(--oba-s1) var(--oba-s2);
}

dl.facts {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--oba-s2) var(--oba-s4);
}

dl.facts dt {
  color: var(--oba-steel);
  font-size: var(--oba-t4);
}

dl.facts dd {
  margin: 0;
  font-family: var(--oba-mono);
  font-size: var(--oba-t4);
  overflow-wrap: anywhere;
}

/* -- the forms ----------------------------------------------------------- */

/* THE SIGN IN BOX IS THE FIRST THING ON ITS PAGE, and it is a panel with the
   one field in it: a person arrives here from the Oba window with a code in
   the address, and what they came to do is type an address or six digits. */
.box {
  background: var(--oba-surface-1);
  border: 1px solid var(--oba-border);
  border-radius: var(--oba-r-big);
  padding: var(--oba-s5);
  margin: 0 0 var(--oba-s5);
  max-width: 34rem;
}

.box h2 {
  font-size: var(--oba-t2);
  margin: 0 0 var(--oba-s2);
}

.box p {
  color: var(--oba-steel);
  font-size: var(--oba-t4);
}

.box > :last-child {
  margin-bottom: 0;
}

.box p.said {
  color: var(--oba-chalk);
  font-size: var(--oba-t3);
}

.box form {
  margin: var(--oba-s4) 0 var(--oba-s3);
}

form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oba-s3);
  align-items: flex-end;
  margin: 0 0 var(--oba-s4);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--oba-s2);
  flex: 1 1 18rem;
}

label {
  color: var(--oba-steel);
  font-size: var(--oba-t4);
}

input {
  background: var(--oba-surface-2);
  color: var(--oba-chalk);
  border: 1px solid var(--oba-border);
  border-radius: var(--oba-r);
  font-family: var(--oba-sans);
  font-size: var(--oba-t3);
  padding: var(--oba-s3);
  min-width: 0;
}

button {
  background: var(--oba-surface-1);
  color: var(--oba-chalk);
  border: 1px solid var(--oba-border);
  border-radius: var(--oba-r-pill);
  font-family: var(--oba-sans);
  font-size: var(--oba-t3);
  font-weight: 500;
  padding: var(--oba-s2) var(--oba-s4);
  cursor: pointer;
}

button:hover {
  border-color: var(--oba-chalk);
}

/* -- the foot ------------------------------------------------------------ */

/* IN COLUMNS, as that other site's is: what the product is on the left, who
   is behind it beside that, each a small heading with its words under it. */
.foot {
  margin-top: var(--oba-s7);
  padding-top: var(--oba-s5);
  border-top: 1px solid var(--oba-border);
  color: var(--oba-steel);
  font-size: var(--oba-t4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--oba-s7);
}

.foot-col {
  display: flex;
  flex-direction: column;
  gap: var(--oba-s2);
}

.foot-head {
  color: var(--oba-chalk);
}

.foot a {
  color: var(--oba-steel);
  text-decoration: none;
}

.foot a:hover {
  color: var(--oba-chalk);
}

/* -- a narrower screen --------------------------------------------------- */

/* The gutter comes in, the bands stop being two columns and become one with
   the words first, and the row of three becomes a column, which is exactly
   what that site does at the same widths. */
@media (max-width: 78rem) {
  .page {
    padding: 0 var(--oba-s5) var(--oba-s7);
  }

  .band,
  .band.flip {
    grid-template-columns: 1fr;
  }

  .band-words,
  .band.flip .band-words {
    order: 0;
    padding: var(--oba-s4) var(--oba-s4) var(--oba-s5);
  }

  .band.flip .stage {
    order: 1;
  }

  /* THE PANEL BECOMES A COLUMN when the band is one: with the words above it
     there is no room beside the product for anything. */
  .stage,
  .tile .stage {
    flex-direction: column;
    align-items: center;
    padding: var(--oba-s5) var(--oba-s5) 0;
    min-height: 0;
  }

  .stage.ask {
    padding: var(--oba-s5);
  }

  .close {
    grid-template-columns: 1fr;
  }

  .tile {
    min-height: 0;
  }

  .stage.ask {
    min-height: 220px;
  }
}

/* -- a screen with no side to dock against ------------------------------- */

/* A PALETTE DOCKS AT THE SIDE OF A SCREEN THAT HAS ONE. Below this width the
   canvas beside it would be narrower than the palette itself, so the workspace
   stacks: the drawing on top, the product under it, full width, still inside
   the application's own strips. Nothing about the product changes; what
   changes is which edge it is attached to, which is what happens in the
   application too when the window is narrow. */
@media (max-width: 62rem) {
  .app-body,
  .opener .app-body {
    flex-direction: column;
    height: auto;
  }

  .app-canvas {
    flex: none;
    height: 340px;
  }

  .app .window {
    width: 100%;
    max-width: 100%;
    height: 520px;
    border-left: 0;
    border-top: 1px solid var(--oba-app-line);
  }
}

@media (max-width: 46rem) {
  .page {
    padding: 0 var(--oba-s3) var(--oba-s6);
  }

  .app-canvas {
    height: 260px;
  }

  .app .window {
    height: 480px;
  }

  .top {
    grid-template-columns: 1fr auto;
    gap: var(--oba-s3);
    padding: var(--oba-s2) 0;
  }

  .nav {
    order: 3;
    grid-column: 1 / -1;
    justify-content: flex-start;
    gap: var(--oba-s3);
  }

  .opening {
    padding: var(--oba-s6) 0 0;
  }

  .opener {
    padding: var(--oba-s5) var(--oba-s3) 0;
  }

  .where,
  .band,
  .close {
    margin-top: var(--oba-s6);
  }

  .apps {
    grid-template-columns: repeat(2, 1fr);
    font-size: var(--oba-t3);
  }

  .apps li {
    height: 72px;
  }

  .stage,
  .tile .stage {
    padding: var(--oba-s4) var(--oba-s3) 0;
  }

  .stage.ask {
    padding: var(--oba-s4) var(--oba-s3);
  }

  .window,
  .band .window,
  .tile .window {
    width: 100%;
    max-width: 100%;
    height: 560px;
  }

  .foot {
    gap: var(--oba-s5);
  }

  h1 {
    margin-top: var(--oba-s5);
  }
}