/* Fabulous — the whole look of the product. * * THREE RULES DECIDE EVERYTHING HERE. * * 1. THE VIEWER IS THE HERO. The type sits directly on the geometry, at the * edges, and gets out of the way the moment there is a model to look at. * * 2. THIS IS THE FABER *SITE*'S SYSTEM, and that is a change. Until * 2026-08-26 this file was `crazyshit/src/crazyshit/ui/static/app.css` * and `fab/apps/desktop/ui/static/styles.css`, token for token — a cool * graphite void with a CREAM accent, on the written grounds that the two * internal apps had already settled it. What that argument never covered * is the one surface a customer actually meets: `faber-website`, whose * own stylesheet carries the accent in a comment naming it — * * --accent is Faber's accent colour: acid lime #d8ef62. It is the * colour of every action (primary buttons, nav hover, active link, * live state) across the whole site. * * So the product now wears the site's palette rather than the two tools'. * Jules's call, 2026-08-26, off the design handoff; the values below are * that handoff's "Palette du chrome sombre" and the site's `globals.css`, * value for value, and `dev/gate.py` holds them there. * * THE CHROME STAYS DARK and that was re-decided, not inherited: the * viewer needs a black room, and three light alternatives were tried and * dropped. The six dark tones are the site's own ink `#17332c` walked * down, so the room is in the same green family as the paper rather than * in a second neutral one. * * 3. NO ROUNDING, ANYWHERE. The site has not a single `border-radius`, and * its shadows are hard offsets with no blur. It is the most recognisable * thing about the system, so `--radius` is 0 and stays 0. */ :root { /* SPACE-separated, and that is not cosmetic: `rgb(var(--ink-rgb) / 0.22)` is the modern syntax and it requires space-separated channels. With commas the whole declaration is REJECTED — measured in crazyshit, where a border asked for at 22% had silently been rendering fully opaque. */ --ink-rgb: 255 255 255; --accent-rgb: 216 239 98; /* #d8ef62 — the site's acid, and the only accent */ /* The room. `--ground` is the product's field, `--lift` the one pool of light in it, `--panel` every rectangle that holds something (receipt, scale, mark bar), `--rule` their contour. THE GROUND IS THE CONSTELLATION'S, AND THAT IS THE THIRD ANSWER TO THE SAME QUESTION. It went #08130f (the handoff's derivation of the site's ink) → #080b0a (`.workflow-demo`, the ground the site's own product video plays on) → here. Jules, 2026-08-26, on seeing the second: *"c'est le fond noir/galaxie en dégradé"*. That is not a colour on the marketing pages at all — it is `app/constellation.css`, the HOMEPAGE's own visual world: `--void: #060608` under a field of stars and four nebulae, with the acid unchanged on top of it (`constellationData.ts` carries the same #d8ef62, and says so). So the room is the site's SKY. Every value below is read out of that file rather than derived, and the composition is in `#stage`. THE PANELS COME FROM THE SAME WORLD, for the same reason one level down: #102d26 is the MARKETING pages' panel, and a green rectangle on a violet and blue galaxy is two houses in one frame. `--void-panel` (#0d0d11) and `--hair` are the constellation's own. */ --ground: #060608; --ground-rgb: 6 6 8; /* the same, for the scrims that sit over geometry */ --lift: rgb(240 220 180 / 0.20); /* the warm glow the site throws from below */ --panel: rgb(13 13 17 / 0.86); /* --void-panel #0d0d11, ground showing through */ --rule: rgb(226 216 192 / 0.16); /* --hair, one step up so a panel has an edge */ --ink: #ffffff; /* titles and live labels */ --ink-soft: #a9c0b6; /* inactive labels, second rank */ --ink-mute: #809b8f; /* mono labels — quota, formats, graduations */ /* Controls sit ON the ground rather than on a panel, so their contour is white-with-alpha and not the panel filet. Two weights: the resting one, and the one an ON switch is drawn at. */ --line: rgb(var(--ink-rgb) / 0.22); --line-live: rgb(var(--ink-rgb) / 0.40); /* THE ACCENT IS SPENT ON WHAT YOU PRESS and on three or four state marks — never decoratively. `--on-accent` is the site's ink, and it is the only colour type is ever set in on top of the acid: white on #d8ef62 is unreadable, and this pair is the site's own button. */ --accent-deep: rgb(var(--accent-rgb) / 1); --accent-soft: rgb(var(--accent-rgb) / 0.38); --on-accent: #17332c; /* ZERO. See rule 3 above; this is the system's signature. */ --radius: 0px; /* THE SITE'S FACES, and nothing is vendored so nothing is downloaded. Arial for everything, Georgia ITALIC for the one emphasised word in a title (the site sets `h1 em` that way and nowhere else), mono for every label — a byte count, a quota, a graduation, a format list. */ --sans: Arial, Helvetica, sans-serif; --serif: Georgia, "Times New Roman", serif; --mono: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas, "DejaVu Sans Mono", monospace; --wake: 180ms cubic-bezier(0.2, 0.7, 0.3, 1); --dim: 280ms cubic-bezier(0.2, 0.7, 0.3, 1); --enter: 320ms cubic-bezier(0.2, 0.8, 0.2, 1); } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* The viewer draws its own colours; nothing here may be re-tinted by the browser's own dark-mode heuristics. */ color-scheme: dark; } ::selection { background: rgb(var(--accent-rgb) / 0.28); color: var(--ink); } /* ------------------------------------------------------------------- the stage */ /* THE SKY, AND IT IS THE SITE'S OWN — `app/constellation.css`, the homepage. Four nebulae and a vignette, at that file's own stops and its own alphas; nothing here is invented and nothing is a hex nobody can point at: blue rgba(146,174,222,.12) `#agent` violet rgba(183,154,216,.13) `#stack` gold rgba(226,193,132,.11) `#stack` warm rgba(240,220,180,.20) `.cv-waitlist`, thrown from below veil rgba(6,6,8,.62) `.cv-hero-veil`, verbatim THE VEIL IS ON TOP AND IT IS LOAD-BEARING. Every cluster of chrome on this page lives at an EDGE — the wordmark, the quota, the layer switches, the scale, Download STEP — and a nebula running out to a corner puts coloured light under 11 px of mono. The site's own vignette darkens exactly the ring they sit in, which is why it is copied rather than approximated. A flat black field makes a dark grey part look like a hole; this is the opposite problem answered the same way. Under the canvas the viewer paints, so it only ever shows where there is no model. */ #stage { position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 52%, rgb(var(--ground-rgb) / 0) 48%, rgb(var(--ground-rgb) / 0.62) 100%), radial-gradient(ellipse 900px 500px at 50% 40%, rgb(146 174 222 / 0.12), transparent 68%), radial-gradient(ellipse 820px 420px at 82% 14%, rgb(183 154 216 / 0.13), transparent 70%), radial-gradient(ellipse 700px 420px at 8% 88%, rgb(226 193 132 / 0.11), transparent 70%), radial-gradient(ellipse 1100px 520px at 50% 118%, var(--lift), transparent 66%), var(--ground); } /* THE STARS. This layer used to be a drawing-office grid — 44 px minor, 220 px major — on the argument that the paper this product's own inputs are drawn on is a better ground than a void. The sky replaced it rather than joining it: two ground textures is one idea too many, and the grid was OURS where this is the site's. IT IS A SEEDED FIELD AND NOT A RANDOM ONE. The site draws 320 stars on a canvas with a per-load `Math.random()` and twinkles them; here the sky is generated once, deterministically, so every screenshot and every check sees the same one. The density is the site's — 320 over 1440x900 is one star per 4 050 px², and this tile is 760² carrying 143 — and the radii (.2–1.3), the alphas (.08–.53) and the cream (#f2ede2, the constellation's own CREAM) are its numbers too. NO TWINKLE, AND THAT IS THIS PRODUCT'S RULE RATHER THAN A SHORTCUT. On the site the stars are the hero of an empty page. Here motion means something is HAPPENING, and a field that breathes behind a compass is a second thing moving during the one moment this product asks somebody to wait. UNLIKE THE GRID IT DOES NOT GO AT THE FIRST BUILD. The sky is the room, and a room that empties when the work arrives is a splash screen. It is under the canvas the viewer paints, so it only ever shows around the part. */ #stage::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22760%22 height=%22760%22%3E%3Cg fill=%22%23f2ede2%22%3E%3Ccircle cx=%22360.6%22 cy=%22459.1%22 r=%221.11%22 opacity=%220.36%22/%3E%3Ccircle cx=%22117.1%22 cy=%22156.1%22 r=%220.33%22 opacity=%220.11%22/%3E%3Ccircle cx=%2282.4%22 cy=%22664.4%22 r=%220.43%22 opacity=%220.12%22/%3E%3Ccircle cx=%2224.3%22 cy=%22303.1%22 r=%220.46%22 opacity=%220.13%22/%3E%3Ccircle cx=%22661.7%22 cy=%22496.2%22 r=%221.05%22 opacity=%220.30%22/%3E%3Ccircle cx=%2293.1%22 cy=%22627.0%22 r=%221.05%22 opacity=%220.11%22/%3E%3Ccircle cx=%22590.0%22 cy=%22552.5%22 r=%220.84%22 opacity=%220.20%22/%3E%3Ccircle cx=%22752.0%22 cy=%22575.2%22 r=%221.06%22 opacity=%220.21%22/%3E%3Ccircle cx=%22408.6%22 cy=%22724.3%22 r=%220.52%22 opacity=%220.24%22/%3E%3Ccircle cx=%22398.0%22 cy=%22352.7%22 r=%221.11%22 opacity=%220.44%22/%3E%3Ccircle cx=%22702.2%22 cy=%22324.1%22 r=%221.04%22 opacity=%220.19%22/%3E%3Ccircle cx=%22637.0%22 cy=%22268.9%22 r=%221.29%22 opacity=%220.13%22/%3E%3Ccircle cx=%22297.1%22 cy=%22437.7%22 r=%220.90%22 opacity=%220.12%22/%3E%3Ccircle cx=%2295.4%22 cy=%22525.2%22 r=%220.67%22 opacity=%220.18%22/%3E%3Ccircle cx=%22542.0%22 cy=%22366.2%22 r=%220.22%22 opacity=%220.46%22/%3E%3Ccircle cx=%22357.5%22 cy=%22226.3%22 r=%221.05%22 opacity=%220.45%22/%3E%3Ccircle cx=%22130.2%22 cy=%22424.4%22 r=%220.99%22 opacity=%220.29%22/%3E%3Ccircle cx=%22127.1%22 cy=%22434.6%22 r=%220.53%22 opacity=%220.49%22/%3E%3Ccircle cx=%2217.5%22 cy=%22659.6%22 r=%220.65%22 opacity=%220.46%22/%3E%3Ccircle cx=%22192.4%22 cy=%2294.4%22 r=%220.49%22 opacity=%220.48%22/%3E%3Ccircle cx=%22391.3%22 cy=%2246.9%22 r=%220.37%22 opacity=%220.22%22/%3E%3Ccircle cx=%22698.5%22 cy=%22353.0%22 r=%220.88%22 opacity=%220.33%22/%3E%3Ccircle cx=%22217.4%22 cy=%22715.0%22 r=%221.20%22 opacity=%220.46%22/%3E%3Ccircle cx=%22332.9%22 cy=%22418.5%22 r=%220.23%22 opacity=%220.37%22/%3E%3Ccircle cx=%2292.0%22 cy=%22391.6%22 r=%220.58%22 opacity=%220.43%22/%3E%3Ccircle cx=%2276.3%22 cy=%22546.4%22 r=%220.95%22 opacity=%220.26%22/%3E%3Ccircle cx=%22396.5%22 cy=%22608.3%22 r=%220.95%22 opacity=%220.47%22/%3E%3Ccircle cx=%22539.4%22 cy=%22716.0%22 r=%220.47%22 opacity=%220.32%22/%3E%3Ccircle cx=%22517.6%22 cy=%22129.4%22 r=%220.54%22 opacity=%220.20%22/%3E%3Ccircle cx=%22334.2%22 cy=%2277.0%22 r=%220.69%22 opacity=%220.09%22/%3E%3Ccircle cx=%22329.6%22 cy=%22390.8%22 r=%220.45%22 opacity=%220.39%22/%3E%3Ccircle cx=%229.0%22 cy=%22204.2%22 r=%220.75%22 opacity=%220.48%22/%3E%3Ccircle cx=%22152.9%22 cy=%22370.3%22 r=%220.86%22 opacity=%220.31%22/%3E%3Ccircle cx=%22405.9%22 cy=%22561.0%22 r=%220.24%22 opacity=%220.17%22/%3E%3Ccircle cx=%22197.3%22 cy=%22737.4%22 r=%221.13%22 opacity=%220.14%22/%3E%3Ccircle cx=%22607.2%22 cy=%22374.0%22 r=%220.55%22 opacity=%220.39%22/%3E%3Ccircle cx=%22370.1%22 cy=%22143.1%22 r=%221.29%22 opacity=%220.25%22/%3E%3Ccircle cx=%22203.0%22 cy=%22233.9%22 r=%221.20%22 opacity=%220.43%22/%3E%3Ccircle cx=%22109.4%22 cy=%22332.3%22 r=%220.32%22 opacity=%220.38%22/%3E%3Ccircle cx=%22654.5%22 cy=%22608.9%22 r=%220.42%22 opacity=%220.29%22/%3E%3Ccircle cx=%22451.1%22 cy=%22118.9%22 r=%221.05%22 opacity=%220.23%22/%3E%3Ccircle cx=%22172.3%22 cy=%22173.0%22 r=%220.38%22 opacity=%220.49%22/%3E%3Ccircle cx=%22457.9%22 cy=%22675.5%22 r=%220.67%22 opacity=%220.28%22/%3E%3Ccircle cx=%22758.3%22 cy=%2247.6%22 r=%220.42%22 opacity=%220.39%22/%3E%3Ccircle cx=%22669.3%22 cy=%22535.1%22 r=%221.21%22 opacity=%220.10%22/%3E%3Ccircle cx=%2264.7%22 cy=%22134.7%22 r=%220.37%22 opacity=%220.36%22/%3E%3Ccircle cx=%22104.4%22 cy=%22141.3%22 r=%220.84%22 opacity=%220.11%22/%3E%3Ccircle cx=%22661.3%22 cy=%22190.8%22 r=%221.12%22 opacity=%220.31%22/%3E%3Ccircle cx=%22304.3%22 cy=%2233.8%22 r=%221.06%22 opacity=%220.46%22/%3E%3Ccircle cx=%22150.2%22 cy=%22391.8%22 r=%220.25%22 opacity=%220.43%22/%3E%3Ccircle cx=%22658.4%22 cy=%22388.8%22 r=%221.11%22 opacity=%220.53%22/%3E%3Ccircle cx=%228.7%22 cy=%22388.5%22 r=%220.24%22 opacity=%220.13%22/%3E%3Ccircle cx=%22610.4%22 cy=%22325.1%22 r=%221.01%22 opacity=%220.37%22/%3E%3Ccircle cx=%22446.2%22 cy=%22420.7%22 r=%221.18%22 opacity=%220.37%22/%3E%3Ccircle cx=%22663.3%22 cy=%22687.6%22 r=%220.54%22 opacity=%220.35%22/%3E%3Ccircle cx=%22104.3%22 cy=%22544.9%22 r=%221.13%22 opacity=%220.41%22/%3E%3Ccircle cx=%2255.5%22 cy=%22488.7%22 r=%220.45%22 opacity=%220.31%22/%3E%3Ccircle cx=%22437.0%22 cy=%22150.5%22 r=%220.27%22 opacity=%220.29%22/%3E%3Ccircle cx=%22456.7%22 cy=%22299.2%22 r=%221.09%22 opacity=%220.49%22/%3E%3Ccircle cx=%22484.5%22 cy=%22671.7%22 r=%220.26%22 opacity=%220.20%22/%3E%3Ccircle cx=%22647.0%22 cy=%22113.3%22 r=%220.82%22 opacity=%220.26%22/%3E%3Ccircle cx=%22109.1%22 cy=%22629.0%22 r=%220.91%22 opacity=%220.16%22/%3E%3Ccircle cx=%22516.1%22 cy=%22467.6%22 r=%220.70%22 opacity=%220.22%22/%3E%3Ccircle cx=%22243.4%22 cy=%2248.5%22 r=%221.09%22 opacity=%220.51%22/%3E%3Ccircle cx=%22526.6%22 cy=%2291.2%22 r=%221.09%22 opacity=%220.35%22/%3E%3Ccircle cx=%227.4%22 cy=%22521.1%22 r=%220.82%22 opacity=%220.23%22/%3E%3Ccircle cx=%22197.7%22 cy=%22441.9%22 r=%220.46%22 opacity=%220.35%22/%3E%3Ccircle cx=%22386.5%22 cy=%22142.8%22 r=%221.05%22 opacity=%220.26%22/%3E%3Ccircle cx=%22664.0%22 cy=%22753.5%22 r=%221.06%22 opacity=%220.34%22/%3E%3Ccircle cx=%22250.9%22 cy=%22338.0%22 r=%220.61%22 opacity=%220.28%22/%3E%3Ccircle cx=%22676.6%22 cy=%22546.1%22 r=%220.68%22 opacity=%220.29%22/%3E%3Ccircle cx=%22479.5%22 cy=%22552.6%22 r=%220.41%22 opacity=%220.09%22/%3E%3Ccircle cx=%22394.5%22 cy=%22704.6%22 r=%220.85%22 opacity=%220.27%22/%3E%3Ccircle cx=%22681.6%22 cy=%22316.3%22 r=%220.77%22 opacity=%220.35%22/%3E%3Ccircle cx=%2298.6%22 cy=%22701.1%22 r=%220.59%22 opacity=%220.53%22/%3E%3Ccircle cx=%22107.7%22 cy=%22522.5%22 r=%221.05%22 opacity=%220.20%22/%3E%3Ccircle cx=%22502.7%22 cy=%22625.8%22 r=%221.16%22 opacity=%220.11%22/%3E%3Ccircle cx=%22259.8%22 cy=%22269.4%22 r=%220.65%22 opacity=%220.23%22/%3E%3Ccircle cx=%22437.4%22 cy=%22231.9%22 r=%221.17%22 opacity=%220.27%22/%3E%3Ccircle cx=%22357.8%22 cy=%22663.8%22 r=%220.84%22 opacity=%220.29%22/%3E%3Ccircle cx=%22298.3%22 cy=%22141.5%22 r=%220.67%22 opacity=%220.14%22/%3E%3Ccircle cx=%22732.4%22 cy=%224.1%22 r=%220.26%22 opacity=%220.20%22/%3E%3Ccircle cx=%22213.1%22 cy=%22372.5%22 r=%220.43%22 opacity=%220.42%22/%3E%3Ccircle cx=%22733.2%22 cy=%22165.7%22 r=%220.32%22 opacity=%220.38%22/%3E%3Ccircle cx=%22476.3%22 cy=%22257.9%22 r=%220.51%22 opacity=%220.16%22/%3E%3Ccircle cx=%22207.1%22 cy=%2232.6%22 r=%220.56%22 opacity=%220.41%22/%3E%3Ccircle cx=%22362.8%22 cy=%22302.4%22 r=%220.85%22 opacity=%220.29%22/%3E%3Ccircle cx=%22706.9%22 cy=%22593.5%22 r=%220.63%22 opacity=%220.15%22/%3E%3Ccircle cx=%22592.0%22 cy=%22594.2%22 r=%221.19%22 opacity=%220.32%22/%3E%3Ccircle cx=%22404.2%22 cy=%22605.1%22 r=%220.58%22 opacity=%220.16%22/%3E%3Ccircle cx=%22619.6%22 cy=%22758.2%22 r=%220.21%22 opacity=%220.42%22/%3E%3Ccircle cx=%2279.4%22 cy=%22248.6%22 r=%220.45%22 opacity=%220.18%22/%3E%3Ccircle cx=%22734.0%22 cy=%22423.3%22 r=%220.53%22 opacity=%220.25%22/%3E%3Ccircle cx=%22670.9%22 cy=%22704.5%22 r=%221.23%22 opacity=%220.45%22/%3E%3Ccircle cx=%22570.5%22 cy=%22449.8%22 r=%221.05%22 opacity=%220.23%22/%3E%3Ccircle cx=%22403.7%22 cy=%22372.7%22 r=%221.02%22 opacity=%220.52%22/%3E%3Ccircle cx=%22340.0%22 cy=%22531.9%22 r=%220.43%22 opacity=%220.10%22/%3E%3Ccircle cx=%22700.4%22 cy=%22410.3%22 r=%221.04%22 opacity=%220.33%22/%3E%3Ccircle cx=%22660.5%22 cy=%22615.0%22 r=%220.38%22 opacity=%220.31%22/%3E%3Ccircle cx=%22413.1%22 cy=%22174.2%22 r=%220.45%22 opacity=%220.43%22/%3E%3Ccircle cx=%22364.5%22 cy=%22254.3%22 r=%220.29%22 opacity=%220.49%22/%3E%3Ccircle cx=%22171.8%22 cy=%22614.2%22 r=%220.95%22 opacity=%220.33%22/%3E%3Ccircle cx=%22405.6%22 cy=%22367.2%22 r=%220.60%22 opacity=%220.41%22/%3E%3Ccircle cx=%22150.8%22 cy=%2256.5%22 r=%220.69%22 opacity=%220.09%22/%3E%3Ccircle cx=%22514.8%22 cy=%22352.8%22 r=%220.65%22 opacity=%220.13%22/%3E%3Ccircle cx=%22367.1%22 cy=%2246.1%22 r=%221.04%22 opacity=%220.46%22/%3E%3Ccircle cx=%22536.9%22 cy=%22550.5%22 r=%220.22%22 opacity=%220.46%22/%3E%3Ccircle cx=%22579.2%22 cy=%22273.4%22 r=%220.73%22 opacity=%220.51%22/%3E%3Ccircle cx=%22374.2%22 cy=%22241.6%22 r=%220.44%22 opacity=%220.37%22/%3E%3Ccircle cx=%22620.0%22 cy=%22711.9%22 r=%221.25%22 opacity=%220.35%22/%3E%3Ccircle cx=%2279.3%22 cy=%22324.0%22 r=%220.44%22 opacity=%220.40%22/%3E%3Ccircle cx=%22580.4%22 cy=%22511.4%22 r=%220.26%22 opacity=%220.47%22/%3E%3Ccircle cx=%2265.1%22 cy=%22369.2%22 r=%220.95%22 opacity=%220.37%22/%3E%3Ccircle cx=%2274.4%22 cy=%22699.6%22 r=%220.49%22 opacity=%220.49%22/%3E%3Ccircle cx=%22748.4%22 cy=%2225.6%22 r=%220.20%22 opacity=%220.48%22/%3E%3Ccircle cx=%228.3%22 cy=%22135.4%22 r=%220.77%22 opacity=%220.46%22/%3E%3Ccircle cx=%22114.9%22 cy=%22285.5%22 r=%220.56%22 opacity=%220.41%22/%3E%3Ccircle cx=%22177.2%22 cy=%22572.4%22 r=%220.26%22 opacity=%220.11%22/%3E%3Ccircle cx=%22233.7%22 cy=%22479.8%22 r=%220.68%22 opacity=%220.52%22/%3E%3Ccircle cx=%22330.8%22 cy=%22657.5%22 r=%221.09%22 opacity=%220.37%22/%3E%3Ccircle cx=%22156.6%22 cy=%22471.6%22 r=%220.36%22 opacity=%220.32%22/%3E%3Ccircle cx=%22611.6%22 cy=%22752.6%22 r=%220.66%22 opacity=%220.41%22/%3E%3Ccircle cx=%22295.7%22 cy=%22537.5%22 r=%220.35%22 opacity=%220.12%22/%3E%3Ccircle cx=%22526.6%22 cy=%22558.5%22 r=%221.12%22 opacity=%220.13%22/%3E%3Ccircle cx=%2272.1%22 cy=%22545.5%22 r=%220.28%22 opacity=%220.09%22/%3E%3Ccircle cx=%22475.0%22 cy=%2225.1%22 r=%220.84%22 opacity=%220.18%22/%3E%3Ccircle cx=%22547.7%22 cy=%22476.1%22 r=%220.27%22 opacity=%220.15%22/%3E%3Ccircle cx=%22756.0%22 cy=%22539.0%22 r=%220.43%22 opacity=%220.21%22/%3E%3Ccircle cx=%22183.9%22 cy=%2253.0%22 r=%220.72%22 opacity=%220.27%22/%3E%3Ccircle cx=%22139.1%22 cy=%22518.7%22 r=%221.16%22 opacity=%220.40%22/%3E%3Ccircle cx=%2240.0%22 cy=%22527.0%22 r=%220.89%22 opacity=%220.33%22/%3E%3Ccircle cx=%22166.4%22 cy=%22214.0%22 r=%220.68%22 opacity=%220.47%22/%3E%3Ccircle cx=%22129.2%22 cy=%22127.9%22 r=%220.76%22 opacity=%220.35%22/%3E%3Ccircle cx=%22665.0%22 cy=%22706.4%22 r=%220.58%22 opacity=%220.53%22/%3E%3Ccircle cx=%22111.9%22 cy=%22675.5%22 r=%221.11%22 opacity=%220.11%22/%3E%3Ccircle cx=%22509.5%22 cy=%22267.6%22 r=%221.26%22 opacity=%220.11%22/%3E%3Ccircle cx=%22144.9%22 cy=%22587.7%22 r=%221.10%22 opacity=%220.27%22/%3E%3Ccircle cx=%2257.2%22 cy=%22241.3%22 r=%220.41%22 opacity=%220.29%22/%3E%3Ccircle cx=%22609.1%22 cy=%22664.8%22 r=%220.39%22 opacity=%220.12%22/%3E%3Ccircle cx=%22677.6%22 cy=%2255.5%22 r=%221.16%22 opacity=%220.39%22/%3E%3Ccircle cx=%22157.3%22 cy=%22692.2%22 r=%220.99%22 opacity=%220.20%22/%3E%3Ccircle cx=%22219.9%22 cy=%2292.3%22 r=%220.33%22 opacity=%220.12%22/%3E%3Ccircle cx=%2258.6%22 cy=%22670.9%22 r=%220.23%22 opacity=%220.13%22/%3E%3C/g%3E%3C/svg%3E"); background-repeat: repeat; /* The same ring the veil darkens: no star sits under a corner cluster. */ -webkit-mask-image: radial-gradient(ellipse 74% 68% at 50% 46%, #000 0%, transparent 86%); mask-image: radial-gradient(ellipse 74% 68% at 50% 46%, #000 0%, transparent 86%); pointer-events: none; } /* The viewer's own canvas fills the stage; its wrapper insists on a width. */ #stage .tcv_cad_view, #stage canvas { max-width: none !important; } /* NOTHING ON THE STAGE IS TEXT TO BE SELECTED, and saying so is what removes a panel this product does not draw. Reported by Jules 2026-08-29 with a screenshot: a plain left click on the viewer's background made Firefox put its own little rounded card on the page, over the part. That card is the shortcut a browser offers for a SELECTION, and a click in a page whose text is selectable starts one. The vendored sheet already says `user-select: none` on `body`; this says it where it actually matters and where a later rule cannot quietly take it back. `comets.js` is what happens instead. */ #stage, #stage * { user-select: none; -webkit-user-select: none; } /* THE COMETS. Above the stage and under everything that can be pressed: the pins layer is 4, the veil 5, and the chrome above that. It takes no pointer — it is drawn BY the click, it never receives one — and it is created on the first comet rather than at boot, so a session where nobody clicks the sky pays nothing for it. */ #comets { position: fixed; inset: 0; z-index: 3; pointer-events: none; } /* --------------------------------------------------------------- the veil * * The first viewport when there is nothing built, and the drag frame at every * other moment. * * THIS USED TO BE THREE LINES OF TYPE AND NOTHING ELSE, and the whole window * was the only drop target. On mesh2cad that reads fine — the mesh appears the * instant it is opened, so the drop confirms itself. On draw2cad it does not: * a drawing goes to `/api/file`, the stage has nothing to put on it, and the * screen for the minutes before the first build is bit-for-bit the screen from * before the drop. There was no zone, no upload confirmation, and no moment * the user decided anything. * * WHAT MAKES IT A COMPOSITION RATHER THAN A COLUMN, since two attempts at this * were "a logo, a title, a subtitle and a dashed box" and both looked like a * template: * * - DEPTH. The mark is not an item in the stack, it is a watermark BEHIND * the stack at 4% — so the screen has a foreground and a background. * - ONE LIGHT. A single warm pool from above-centre, on the stage, on the * grid's mask, on the top edge of the card and along the top of the * letterforms. Everything is lit by the same lamp, which is what makes a * dark interface look built instead of unfinished. * - GRAIN. 2.8% fractal noise over the veil. It is the single cheapest thing * that separates an expensive-looking dark surface from a flat one, and it * is on the PAPER only — the geometry stays clean, which is also the * honest split. * - A REAL CARD instead of a dashed rectangle. A dashed border is the * universal mark of an unstyled file input. This one has a hairline, a * specular top edge, an elevation shadow and a footer caption below it. * - TYPE THAT COMMITS. 68 px, weight 600, -0.045em, in a top-lit silver — * against a 16 px humanist italic. Two faces doing two jobs, with a real * jump between them, rather than one face at four sizes. */ #veil { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 5; transition: opacity 700ms ease; } /* GRAIN. Generated in the URL — no asset, no request, and it tiles. Kept low enough to be felt and not seen: at 0.05 it is visibly dirty, at 0.015 it does nothing. It rides the veil, so it is over the paper and never over somebody's part. */ #veil::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.028; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* LEFT-ALIGNED, AND THAT IS THE SITE'S DOING. Every composition on faber-website is a column against a left margin with the measure running out to the right — a centred stack of five things is a template, and two attempts at this screen were exactly that. The width is the handoff's 700, which is also about the measure the title wants at 64 px. */ #veil-inner { position: relative; z-index: 2; width: min(700px, 88vw); text-align: left; padding: 0; animation: fade-up 600ms cubic-bezier(.2, .8, .2, 1); transition: opacity 500ms ease, transform 700ms cubic-bezier(.2, .8, .2, 1); } @keyframes fade-up { from { opacity: 0; transform: translateY(6px); } } /* With a model on screen the composition is spent; while the agent is working the compass takes its place. `pointer-events` goes with the opacity or the zone stays clickable through an invisible layer — a click that reopens a file picker over a model somebody is orbiting. */ body:not(.empty) #veil-inner, body.working #veil-inner { opacity: 0; transform: translateY(-14px); pointer-events: none; } /* ...AND BEFORE ANY OF THAT IS KNOWN. `boot()` has to ask the server what this page is before it can say, and for the second that takes, a refresh of a project in progress painted the home screen over the part that was about to arrive — reported 2026-08-29 and reproduced in a browser on the first try. `animation: none` rather than `opacity: 0` alone: the composition arrives on `fade-up`, and killing the animation is what makes it play when the class comes off instead of having already played behind it. */ body.booting #veil-inner { opacity: 0; animation: none; pointer-events: none; } /* AND THE CHILD THAT OPTED BACK IN HAS TO OPT BACK OUT. `pointer-events: none` on a parent is not inherited the way opacity is: a descendant declaring `auto` — which `#drop` does, because it has to be clickable while the stage IS empty — re-enables hit-testing on itself and goes on being clicked through the invisible layer above. The rule above says `pointer-events` goes with the opacity, and it did, on the wrong element. Reported from production 2026-08-19: with a mesh on screen, double-clicking anywhere near the middle of the viewer opened a file browser. The card is `min(452px, 86vw)` centred, so "near the middle" is most of where somebody orbits. */ body:not(.empty) #drop, body.working #drop { pointer-events: none; } /* ...AND ONE 26 PX CHILD OPTS BACK IN, WHICH IS THE RULE ABOVE RUN IN REVERSE AND HAS TO EARN IT. The rule above is the fix for a production bug — a double-click near the middle of a mesh opened a file browser — and it works by killing the WHOLE card, receipt included. That is right for the card and wrong for the cross on it: a mesh staged over a finished model puts the receipt back on screen (`body.staged #veil-inner`), and with the card pointer-dead the only way off that receipt was pointer-dead with it. Found by driving it, 2026-08-31: Playwright reported `#veil-inner` swallowing the click, which is what a `pointer-events: none` descendant looks like from the outside. IT IS SAFE BECAUSE IT IS NOT THE CARD. Only while a file is staged, only the cross, and it opens no picker — `drop.js` stops the click before it reaches `#drop`'s own handler. `body.working` is deliberately not covered: a turn is running, and the file that started it is not being changed. */ body.staged:not(.working) #staged-change { pointer-events: auto; } /* THE TITLE IS THE PRODUCT'S SENTENCE, NOT ITS NAME — and that is the one structural thing the redesign moved. The word "Fabulous" used to be the h1, with the sentence set under it as a subtitle; the site does the opposite, and it is right: the name says nothing to somebody who has just arrived with a drawing in their hand, and the sentence says the whole product. The wordmark went to the corner, where the site keeps it (`#mark-live`). One word is emphasised and it is the word the product is about. Georgia ITALIC, which is the site's `h1 em` and the only place a serif appears at all — nothing else in the chrome is ever set in it. */ #mark { margin: 0 0 34px; font-family: var(--sans); font-size: clamp(38px, 4.6vw, 64px); font-weight: 500; line-height: 0.91; letter-spacing: -0.08em; color: var(--ink); text-wrap: pretty; } #mark .accent { font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: -0.03em; } /* THE EYEBROW, and it is one of the three or four state marks the accent is allowed outside a pressable: it names what this thing eats, which is the first question anybody standing on this screen has. */ #line { margin: 0 0 19px; font-family: var(--mono); font-size: 10px; font-weight: 700; line-height: 1.1; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); } /* ------------------------------------------------------------------ the card * * One rectangle with two faces — the invitation, and then what landed in it — * so confirming an upload does not move the page under the cursor that is * about to press the button. * * NOT DASHED. A dashed border is what an unstyled `` looks * like, and this is the object the whole screen is built around. It is a * surface: a hairline, a 1 px specular highlight along the top edge (the lamp * again), a long soft shadow underneath, and a gradient that is fractionally * brighter at the top than at the bottom. */ #drop { position: relative; width: 100%; margin: 0; padding: 17px 18px; border: 1px solid var(--rule); border-radius: var(--radius); /* A PANEL, NOT A FLOATING SLAB. The specular top edge and the long soft shadow that used to be here are both blurs, and this system has none: its shadows are hard offsets. What separates a rectangle from the ground is its filet and its fill, and nothing else. */ background: var(--panel); /* The uploading hairline below sweeps +/-42% of this width; without a clip it runs out past both edges of the rectangle it belongs to. */ overflow: hidden; pointer-events: auto; cursor: pointer; transition: border-color var(--wake), background var(--wake), box-shadow var(--wake), transform var(--dim); } #drop:hover, #drop:focus-visible { border-color: var(--line-live); outline: none; } /* Under a dragged file the card is the target, and says so loudly enough to be read out of the corner of an eye that is on the file, not on the page: the hairline goes acid and the lamp above it brightens. */ body.dragging #drop { border-color: var(--accent-deep); box-shadow: inset 3px 0 0 var(--accent-deep); } body.dragging #drop-verb { color: rgb(var(--accent-rgb) / 0.9); } /* Holding a file: no longer an invitation, so it stops behaving like one. */ body.staged #drop { cursor: default; } /* Nobody is signed in, so a drop would be refused before it left the browser. Saying that with the card costs no words. */ body.need-auth #drop { opacity: 0.3; pointer-events: none; } #drop-face { display: flex; flex-direction: column; align-items: center; gap: 11px; } #drop-glyph { color: rgb(var(--ink-rgb) / 0.42); transition: color var(--wake), transform var(--dim); } #drop:hover #drop-glyph { color: rgb(var(--ink-rgb) / 0.62); } body.dragging #drop-glyph { color: rgb(var(--accent-rgb) / 0.9); } #drop-verb { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: -0.005em; color: var(--ink-soft); } #drop-verb .or { display: block; margin-top: 7px; font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); } /* The caption under the card, not a fourth block inside it. */ #hint { margin: 0; text-align: right; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: #6f8a7e; line-height: 1.7; } /* The bytes are in flight. A 40 MB drawing over a slow line is several seconds of a card that looks exactly like a card nothing was dropped on, and the receipt below cannot be drawn until a 200 comes back — so the wait gets its own hairline, running along the bottom edge of the rectangle the file was let go of on. No words: the file's name is about to be the words. */ #drop::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0) 0%, var(--accent-deep) 50%, rgb(var(--accent-rgb) / 0) 100%); opacity: 0; transition: opacity 160ms ease; } body.uploading #drop::after { opacity: 1; animation: uploading 1.1s ease-in-out infinite; } @keyframes uploading { 0% { transform: translateX(-42%) scaleX(0.4); } 50% { transform: translateX(42%) scaleX(0.4); } 100% { transform: translateX(-42%) scaleX(0.4); } } /* A SECOND FILE DROPPED ONTO A FINISHED MODEL HAS TO BE CONFIRMABLE TOO, and the receipt lives inside the composition that went away when the model arrived — so without this the drop would upload, stage, and show nothing at all, which is the exact failure this whole change exists to remove. The name and the line stay gone: those are a title page, not a control. */ body.staged #veil-inner { opacity: 1; transform: none; pointer-events: auto; } body.staged:not(.empty) #mark, body.staged:not(.empty) #line, body.staged:not(.empty) #hint { display: none; } body.staged:not(.empty) #drop { margin-top: 0; } /* ...and it needs a ground of its own, because a hairline card over a lit solid is a card nobody can read. */ body.staged:not(.empty) #veil { background: rgb(var(--ground-rgb) / 0.66); backdrop-filter: blur(4px); } /* ------------------------------------------------------- what actually landed * * THE ANSWER TO "DID MY UPLOAD WORK", and it is a real answer rather than a * hopeful one: the name is the one the SERVER wrote to disk (so a collision * shows up as `plate-2.pdf` here, where it is readable, instead of surprising * the agent), the byte count is what the server counted, and the thumbnail is * the file's own pixels. Nothing here is drawn until a 200 comes back. */ #staged[hidden] { display: none !important; } #drop-face[hidden] { display: none !important; } #staged { animation: staged-in var(--enter); } /* FROM the invisible state, never TO it. A visible state that lives only in a keyframe is `opacity: 0` until the animation completes, and an animation outranks a plain declaration — which is how `#refused` spent a session invisible. This way a keyframe that never runs costs a fade, not the card. */ @keyframes staged-in { from { opacity: 0; transform: translateY(7px); } } #staged-row { display: flex; align-items: center; gap: 14px; text-align: left; } #staged-thumb { flex: none; width: 54px; height: 54px; border: 1px solid var(--rule); border-radius: var(--radius); background-color: rgb(0 0 0 / 0.35); background-size: cover; background-position: center; display: grid; place-items: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--ink-mute); overflow: hidden; } #staged-text { min-width: 0; flex: 1; } #staged-name { display: block; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: var(--ink); /* A long CAD filename must not push the tick off the card. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #staged-meta { display: block; margin-top: 5px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: #bed1c8; } /* A FILLED SQUARE, not a ring. The tick is the whole answer to "did my upload work", and on this system the thing that says yes is the accent itself — the same paint as the button under it. */ #staged-tick { flex: none; position: relative; width: 26px; height: 26px; border-radius: var(--radius); background: var(--accent-deep); } /* Drawn rather than typed: a check mark character is whatever the user's fallback font decides, and on a machine without one it is a box. */ #staged-tick::after { content: ""; position: absolute; left: 9.5px; top: 6px; width: 5px; height: 11px; border: solid var(--on-accent); border-width: 0 2.4px 2.4px 0; transform: rotate(45deg); } /* THE WAY OFF THE RECEIPT. Quiet on purpose: it is beside a tick that says the upload worked, and the mistake it undoes is "wrong file", not "something went wrong". The tick's own 26 px height so the row keeps its rhythm, and no ground until the pointer is on it — this card is a receipt, not a toolbar. IT IS THE LAST CONTROL IN THE ROW AND IT IS NOT THE CARD. A click on it must not also be a click on `#drop`, whose handler would ask for the picker a second time, so `drop.js` stops the event here. */ #staged-change { flex: none; height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--ink-mute); font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer; transition: background var(--wake), color var(--wake), border-color var(--wake); } #staged-change:hover { background: rgb(var(--ink-rgb) / 0.10); border-color: var(--line-live); color: var(--ink); } /* ----------------------------------------------------------- the confirmation * * The only filled control in the product, and the only thing on the page that * starts work. ACID because the acid is the site's one accent and it is spent * on what you press — this is the site's own primary button, brought over * whole: the fill, the ink on it, the 27 px gap and the arrow after the * label. */ /* ONE RULE FOR THE TWO BUTTONS THAT MATTER, and it is the site's `.button` verbatim: 15/17 of padding, a 27 px gap, 12 px at 750, and a 16 px glyph after the label. The gap is what makes it the site's button rather than a generic filled rectangle — the label and the arrow are pushed apart, not set beside each other. Build the CAD and Download STEP never appear on the same screen, so wearing the same paint costs nothing and saying the same thing twice in two idioms would. */ #go, #step { display: inline-flex; align-items: center; gap: 27px; padding: 15px 17px; border: none; border-radius: var(--radius); background: var(--accent-deep); color: var(--on-accent); font-family: inherit; font-size: 12px; font-weight: 750; letter-spacing: 0; text-decoration: none; cursor: pointer; pointer-events: auto; transition: background var(--wake), transform 120ms ease; } /* THE ARROW IS A PSEUDO-ELEMENT AND NOT A SPAN, and that is not a tidiness preference: `app.js` writes `#mark-send`'s label with `textContent` on every change to what is pinned ("Send 2 pins + a note"), which would wipe a child element on the first pin — and `dev/try/try_send.py` reads that label back and asserts it is exactly `Send`. Drawn in CSS, the glyph survives both. */ #go::after, #step::after { content: "\2192"; font-size: 16px; line-height: 1; } #step::after { content: "\2193"; } /* THE BUTTON AND THE FORMAT LIST SHARE ONE ROW, at the two ends of the measure. They answer the same question from opposite sides — "press this" and "with what" — and stacking them made the second read as a footnote to the first rather than as its condition. */ #commit { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; } #go[hidden], #step[hidden] { display: none !important; } /* Nothing brighter than the acid exists in this palette, so hover cannot go up. It goes to the site's own `--accent-bright`, which is the acid lifted towards paper. */ #go:hover, #step:hover { background: #e5f5a8; } #go:active, #step:active { transform: translateY(1px); } #go:focus-visible, #step:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.34); } #auth { margin: 28px auto 0; max-width: 320px; pointer-events: auto; text-align: left; } #auth[hidden], #quota[hidden], #auth-err[hidden] { display: none !important; } /* THE TWO DOORS, AND WE PAINT BOTH OF THEM NOW. * * Google's widget used to be the thing on the page: a white card, its own * radius, its own font, and — for anybody with a live Google session — the * PERSONALIZED variant, which is taller than the button it sits above, says * "Se connecter en tant que Jules" in the browser's language on an English * page, and prints the address back at the person who came to type nothing. * Reported by Jules, 2026-08-31. None of it is configurable: `renderButton` * takes a theme and a size and decides the rest. * * So the widget is still the CLICK and no longer the PICTURE. `#google-slot` * holds Google's real button at exactly the face's size, transparent, on top * — the press is theirs, on their element, with the user gesture intact and * not one line of click-forwarding in the normal path. `#google-face` is what * a person sees: the same 320x40 as the Microsoft door, the house font, the * house zero radius, and the official G. Google's branding guidance is what * makes this legitimate rather than a trick — it publishes the rules for a * custom button precisely so a product can use its own; the mark and the * words are the part that must not change, and neither does. * * WHY THE WRAPPER CLIPS: the personalized variant renders TALLER than the * 40px it was asked for. Un-clipped, its invisible overflow lies across the * Microsoft button underneath and swallows presses meant for it — one door * silently eating the other, which is the exact failure this page cannot * have. `overflow: hidden` clips hit-testing as well as paint. */ #google-btn { position: relative; width: 320px; height: 40px; margin: 0 auto; overflow: hidden; } #google-slot { position: absolute; inset: 0; opacity: 0; } /* Google sizes its own button from `renderButton`'s `width`, so this only has to hold the wrapper it puts around it. */ #google-slot > * { width: 100% !important; } #google-face { position: absolute; inset: 0; } /* THE KEYBOARD STILL PRESSES GOOGLE'S BUTTON, not ours: the face is `aria-hidden` and out of the tab order, the real control is focusable where it always was, and the ring is painted on the thing that is visible. */ #google-btn:focus-within #google-face { box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.34); } /* ONE BUTTON, TWO DOORS. They were 4px-rounded white slabs matching Google's widget — the one exemption the zero-radius rule carried. Nothing needs matching now, so both join the system. Each keeps its own mark and its own words, which is the half of a brand's guidance that is not negotiable, and both marks are inline SVG: a veil that waits on a third-party image is a veil with a hole in it. */ .door-btn { display: none; align-items: center; justify-content: center; gap: 12px; width: 320px; height: 40px; font: 500 14px/1 var(--sans); color: var(--ink); background: rgb(var(--ink-rgb) / 0.06); border: 1px solid var(--rule); border-radius: var(--radius); cursor: pointer; transition: background var(--wake); } .door-btn.on { display: flex; } .door-btn:hover { background: rgb(var(--ink-rgb) / 0.12); } .door-btn:disabled { opacity: .55; cursor: default; } .door-btn svg { width: 18px; height: 18px; flex: none; } #ms-btn { margin: 10px auto 0; } /* UNDER the button, not over it, and set as a sentence rather than as a control: pressing the button is the acceptance, so a second thing to press first would be a second decision where there is one. */ #auth-consent { margin: 14px 0 0; text-align: center; /* `#auth` is left-aligned for the error line */ font-family: var(--sans); font-size: 11.5px; line-height: 1.5; color: var(--ink-mute); } #auth-consent a { color: rgb(var(--ink-rgb) / 0.62); text-decoration: underline; text-underline-offset: 2px; transition: color var(--wake); } #auth-consent a:hover { color: rgb(var(--accent-rgb) / 0.92); } #auth-err { margin: 10px 0 0; color: var(--accent-deep); font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; } /* The window at large is still a drop target, and under a dragged file it says so with one inset hairline rather than a modal. Quieter than the card: the card is the loud one, and two things shouting is a flicker. */ #veil::after { content: ""; position: absolute; inset: 16px; border: 1px solid rgb(var(--accent-rgb) / 0); border-radius: var(--radius); transition: border-color var(--wake), background var(--wake); } body.dragging #veil::after { border-color: rgb(var(--accent-rgb) / 0.13); } /* --------------------------------------------------------------- the compass * * WHAT THE AGENT WORKING LOOKS LIKE. The two-pixel hairline at the very top of * a full-bleed viewer was the whole answer before this, and on a draw2cad job * — where the stage stays empty until the first build lands, which is minutes * — the honest reading of that screen is that nothing is happening. * * It is the watermark from the veil, drawn by a compass and withdrawn again: * axis line, envelope arc, inner arcs, cote. The backdrop coming alive. The * model's own line sits under it; under that, one product sentence about * how long a turn can take. Not agent prose — ours, and it stays. */ #thinking { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 11; display: flex; flex-direction: column; align-items: center; gap: 20px; opacity: 0; pointer-events: none; transition: opacity 420ms ease, top 620ms cubic-bezier(.2, .8, .2, 1), transform 620ms cubic-bezier(.2, .8, .2, 1); } body.working #thinking { opacity: 1; } #thinking-mark { width: 168px; height: 168px; transition: width 620ms cubic-bezier(.2, .8, .2, 1), height 620ms cubic-bezier(.2, .8, .2, 1); } #elapsed { font-family: var(--mono); font-size: 11px; letter-spacing: 0.26em; color: rgb(var(--ink-rgb) / 0.34); font-variant-numeric: tabular-nums; /* The cluster becomes a row once `empty` comes off (first build). A long thought must shrink, not shove the clock off the edge of the page. */ flex-shrink: 0; } /* The one line under the compass. Sized and coloured to be READ WITHOUT BEING LOOKED AT: a line that competes with the geometry is a chat panel by another name. IT WAS `white-space: nowrap` IN A 30ch BOX, and that was the bug. The server trims a thought to `loop._THINKING_MAX`; this box then trimmed THAT to about thirty characters with an ellipsis of its own, so a reader got two clauses' worth of set-up and none of the verb — every line on screen ended mid sentence. It now wraps to two lines, which is what the server's cap is sized for, and `line-clamp` is the backstop rather than the rule. The height is RESERVED, both lines of it, whether or not there is anything on them. The cluster is a centred flex column and the compass sits on top of this element: a line that grew from one row to two would shove a 168 px mark up and down the screen every few seconds. */ #thought { max-width: min(64ch, 78vw); height: calc(2 * 1.55em); font-size: 12px; line-height: 1.55; letter-spacing: 0.01em; color: rgb(var(--ink-rgb) / 0.34); text-align: center; text-wrap: balance; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; opacity: 0; transition: opacity 260ms ease; } #thought.in { opacity: 1; } /* ...and the words arrive one at a time. THIS IS WHERE THE STREAMING IS VISIBLE. The frames come off the wire in bursts on the model's schedule — three sentences can close in the same millisecond — so the rhythm a person reads is not the wire's, it is this: `app.js::paintThought` gives every word its own delay and the cascade is short enough (520 ms, capped) that the line is never still arriving when it is being read. A swap with no reveal at all was the other half of the flicker. */ #thought .w { animation: thought-word 300ms cubic-bezier(.2, .8, .2, 1) both; } @keyframes thought-word { from { opacity: 0; filter: blur(1.5px); } to { opacity: 1; filter: blur(0); } } /* Somebody who asked not to be moved gets the line and not the cascade. */ @media (prefers-reduced-motion: reduce) { #thought .w { animation: none; } } /* Under the thought, and it is not a thought. The line above is replaced every few seconds and emptied when the turn ends; this one has to stay for the whole of it, including the minutes before any thought arrives. Opacity rides `#thinking` itself (`body.working`), so there is no second clock and no script to forget to call. Quieter than the thought, same ink, so it cannot compete with a sentence that is about THIS step. */ #wait { max-width: min(64ch, 78vw); font-size: 11px; line-height: 1.45; letter-spacing: 0.01em; color: rgb(var(--ink-rgb) / 0.28); text-align: center; text-wrap: balance; } /* ...AND IT GOES AT THE FIRST BUILD. Jules's call, 2026-08-29. The whole of what it answers is "ten minutes of a turning compass and nothing on screen — has this died?", and that question only exists while the stage is empty. Once there is geometry the screen answers it every time a version lands, and a paragraph about how long a turn CAN take, printed along the top edge over a part that is visibly being worked on, is the product talking about itself. Same line the compass moves on (`body.empty`), so the two change together. WHICH ALSO MEANS IT NEVER APPEARS ON MESH2CAD OR A POINT CLOUD, and Jules asked for that by name. It falls out rather than needing a second rule: a geometry drop opens in the viewer at once (`drop.openGeometry` → `refreshModel` → `loadModel`), so `empty` is off before the turn is even started — measured in a browser, `body.className` is `staged` with the mesh ghosted on screen. Only draw2cad keeps `empty` through a first turn, because there really is nothing to look at. If a wedge ever staged a mesh WITHOUT drawing it, this rule would stop covering that and the note would be back. */ body:not(.empty) #wait { display: none; } /* THE WAY OUT — one corner, in both layouts, and the corner is the whole reason it is not inside `#thinking`. That cluster is centred with a `transform`, and a transformed ancestor becomes the containing block for a `position: fixed` child: `right: 26px` in there is 26 px from the CLUSTER's right edge, which put the button in the middle of the screen while the computed style read exactly what was asked for. Measured in a browser, x = 612 on a 1280 px page. Held still on purpose, too. The cluster's width is the sum of its children and one of them is a sentence replaced every few seconds, so a Stop inside it slides ~70 px sideways while somebody is reaching for it — the last thing the one control that ends a turn may do. It lives in `#session-actions` beside Sign out — one flex row, no fixed corner of its own. Quiet enough to be ignored for the whole of a turn that is going fine, and findable in the one second somebody wants it: no fill, no border until the pointer is on it, and the acid reserved for that moment. It is not styled as a danger — nothing is lost by pressing it, the model on screen is kept. */ #session-actions { display: flex; align-items: center; gap: 10px; pointer-events: auto; } /* ONE SIZE FOR THE ROW. The padding and the type below make the two the same HEIGHT; this is what makes them the same rectangle, because their labels are not the same length and a 55 px Stop beside a 71 px Sign out is still two different buttons. 72 is Sign out's own natural width — 71.1 measured in Chromium 2026-08-29, rounded up to the pixel — so this pushes nothing out and only pulls Stop up to it. If that label ever changes, this changes with it. NOT on `#stop` in general: between turns that button collapses to a zero width so Sign out keeps the corner alone, and a floor under it would hold the row open around nothing. `body.working` is exactly when it is there. */ #signout, body.working #stop { min-width: 72px; } #stop { /* Not `display: none` — the fade runs both ways. Out of the flex row while hidden so Sign out keeps its corner alone between turns. */ opacity: 0; visibility: hidden; pointer-events: none; width: 0; padding: 0; margin: 0; border-width: 0; overflow: hidden; white-space: nowrap; transition: opacity 420ms ease, visibility 0s linear 420ms, color var(--wake), border-color var(--wake), background var(--wake), width 420ms ease, padding 420ms ease, border-width 420ms ease; border: 1px solid transparent; border-radius: var(--radius); background: none; color: rgb(var(--ink-rgb) / 0.52); font-family: inherit; /* SET AS SIGN OUT IS, and that is the point rather than a coincidence: the two share one row, and a Stop at 63x28 beside a Sign out at 71x32 read as a smaller, lesser control — which is the opposite of what the one button that ends a turn should look like. Same size, same case, same tracking; only the paint differs, and the acid is still reserved for the hover. */ font-size: 11px; font-weight: 700; letter-spacing: 0; cursor: pointer; } body.working #stop { opacity: 1; visibility: visible; pointer-events: auto; width: auto; padding: 9px 13px; border-width: 1px; border-color: rgb(var(--accent-rgb) / 0.46); background: rgb(var(--ink-rgb) / 0.10); color: var(--ink); transition: opacity 420ms ease, visibility 0s, color var(--wake), border-color var(--wake), background var(--wake), width 420ms ease, padding 420ms ease, border-width 420ms ease; } #stop:not(:disabled):hover { border-color: rgb(var(--accent-rgb) / 0.62); background: rgb(var(--accent-rgb) / 0.12); color: var(--accent-deep); } /* Pressed, and the turn is unwinding: the request is in, the thread stops at its next frame. Dead rather than gone — a control that vanishes on click reads as a misfire. */ #stop:disabled { opacity: 0.4; cursor: default; } /* A stop can be refused: the turn ended in the moment between the button being there and the click landing. Same idiom as the layer switches — the border says no and the reason is in the console — but its own keyframes, because this button has no resting border to take AWAY. The visible state is still the plain declaration above; only the flash lives in here. */ #stop.refused { animation: refuse-stop 700ms ease; } @keyframes refuse-stop { 0%, 100% { border-color: transparent; } 30%, 70% { border-color: rgb(var(--accent-rgb) / 0.34); } } /* ...and once there is geometry, it gets out of the way of it. Top centre is the only edge of this page not already spoken for — wordmark, quota, layers and the STEP hold the four corners, and `#nav` left that band on 2026-08-29 because this row is what it kept colliding with. GRID, not a flex row, for the third column: the thought is the only thing here that may grow, and `minmax(0, …)` is what lets it shrink instead of shoving the clock off the edge. It carried a second row for the wait note until the note stopped appearing on this layout at all. */ body.working:not(.empty) #thinking { top: 14px; transform: translate(-50%, 0); display: grid; grid-template-columns: auto auto minmax(0, min(52ch, 44vw)); grid-template-areas: "mark elapsed thought"; column-gap: 12px; align-items: center; } body.working:not(.empty) #thinking-mark { grid-area: mark; width: 46px; height: 46px; } body.working:not(.empty) #elapsed { grid-area: elapsed; } body.working:not(.empty) #thought { grid-area: thought; } /* With geometry on screen the cluster is a ROW along the top edge, so the line has the compass and the clock beside it rather than above: narrower, and quieter still. Two lines, same as the centred layout — one line here would put the cut back, just at 52 characters instead of thirty. */ body.working:not(.empty) #thought { max-width: min(52ch, 44vw); font-size: 11px; line-height: 1.5; text-align: left; /* NO reserved height here, and that is not an oversight: this is the ROW, where the 46 px mark sets the cluster's height and `align-items: center` puts whatever the line is against the middle of it. Reserving two lines instead makes a one-line thought sit at the TOP of an empty two-line box, a few pixels above the clock beside it — visible, and wrong the moment a tool verb replaces a sentence. The column layout below the compass is the one that needs the reservation, because there the line is what the mark is standing on. */ height: auto; min-width: 0; } body.working:not(.empty) #elapsed { font-size: 10px; letter-spacing: 0.18em; flex-shrink: 0; } /* ----------------------------------------------------------- coming back * * THE ONE WAIT IN THIS PRODUCT THAT IS NOT A TURN, and it had no screen at * all. Opening a saved project pulls its files out of the store, puts the * process on them and RELOADS this page — so what a person saw between * clicking a project and seeing it was the project they were leaving, then a * flash of empty page, then the drop zone, for as long as the whole thing * took. Every one of those screens says the same wrong thing: nothing is * happening. * * OPAQUE, and that is the point rather than a style: it is the only element * here that has to survive a navigation, so it is armed before the POST, held * across the reload out of `sessionStorage`, and taken down when the geometry * is actually on screen. The vocabulary is the turn's — the same compass, the * same clock, the same quiet mono — because a person waiting on this product * should not have to learn a second thing that means "wait". */ #opening { position: fixed; inset: 0; z-index: 20; /* over the veil (5), the compass (11) and the projects overlay (14) — and UNDER the refusal, which went to 22 for exactly that reason */ display: grid; place-items: center; background: radial-gradient(56% 46% at 50% 42%, rgb(var(--accent-rgb) / 0.030) 0%, transparent 70%), var(--ground); opacity: 1; transition: opacity 340ms ease; } /* Faded rather than cut, because the geometry arriving underneath is the whole reward and a hard swap steals it. `hidden` follows on the transition's end (`app.js::endOpening`), so nothing is left taking the pointer. */ #opening.out { opacity: 0; } #opening[hidden] { display: none; } #opening-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 0 6vw; animation: fade-up 500ms cubic-bezier(.2, .8, .2, 1); } #opening-mark { width: 132px; height: 132px; } /* THE NAME IS THE MESSAGE. It is the one thing a person wants confirmed — that the thing coming back is the thing they clicked — so it is the biggest type on the screen. It was in the SERIF until 2026-08-26, on the argument that the serif is the product's own voice; that argument went with the system. Georgia is the site's `h1 em` and nothing else, so a sentence set in it reads as a pull quote rather than as the product speaking. */ #opening-name { font-family: var(--sans); font-size: 21px; font-weight: 700; letter-spacing: -0.02em; color: rgb(var(--ink-rgb) / 0.82); max-width: min(38ch, 80vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ...and under it, what is being done and for how long. Mono, at the chrome's own weight: a verb and a clock, never a progress bar — there is no honest percentage to draw, and a bar that guesses is worse than a number that is true. */ #opening-note { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--ink-rgb) / 0.30); font-variant-numeric: tabular-nums; min-height: 1.4em; } #opening-clock:not(:empty)::before { content: " · "; color: rgb(var(--ink-rgb) / 0.22); } @media (prefers-reduced-motion: reduce) { #opening, #opening-inner { transition: none; animation: none; } } /* ------------------------------------------------------------- the live mark */ /* THE WORDMARK, and it is in the corner on EVERY screen now — the title is the product's sentence and no longer its name, so this is the only place the name appears at all. It was ink-at-50% and hidden until there was a model; it is the site's own wordmark and always up. It is a control: the same New project action as `#places-new`, quiet, no new chrome. */ /* ONE ROW, and the row is what is positioned. Two fixed elements stacking put the pastille across the bottom half of the wordmark on the empty screen, because each was placed against the viewport and neither could know how tall the other was. */ #brand { position: fixed; top: 26px; left: 26px; z-index: 9; display: flex; align-items: center; gap: 18px; pointer-events: none; } body.empty:not(.booting) #brand { top: 33px; left: 40px; } #mark-live { /* A