/* ───────────────────────────────────────────────────────────────────────────────────────────────────────────────── osyrin.com — the business site. ⭐ SAME TYPE AND PALETTE AS osysharp.com, A DIFFERENT LAYOUT (owner, 2026-09-14). The first version shared osysharp's layout grammar and read "like you just removed some things from the osysharp site". So the two share what makes them one family — Inter and JetBrains Mono, and osysharp's `cerulean` palette itself (Platform.Tools.SiteGen/Palettes.cs, the default there since 2026-09-17) and the language's own dark ground — and share NO layout device. osysharp.com: a left-aligned editorial column, numbered mono eyebrows, hairline chapter rules, orange-bar pull quotes, code panels on the right, one paper ground. osyrin.com: centred; rounded SHEETS of alternating ground (paper · ink · tint · one ember); the ring of the mark as the visual idea (the hero orbit, the flow's stops, the doors' knobs, the tiles' corner rings); a floating capsule header; a giant wordmark to close. ⚑ Keep it that way: before adding an osysharp component here, draw this page's own version of it. ───────────────────────────────────────────────────────────────────────────────────────────────────────────── */ :root{ --paper:#eef3f3; --card:#ffffff; --wash:#dbe8e8; --rule:#c1d4d4; --rule-2:#98b3b3; --ink:#0b1f25; --ink-2:#3d585f; --ink-3:#6b878d; --accent:#00566f; --accent-wash:#d7ecf3; --tint:#e6eeee; --glow:rgba(0,86,111,.13); /* the dark sheets, and what reads on them */ --sheet-ink:#08161b; --on-ink:#e7f1f2; --on-ink-2:#9fbdc1; --on-ink-3:#6e8f96; --accent-on-ink:#5fc8e8; /* the ACCENT sheet, and what reads on it. Still spelled `ember` throughout: the class is a layout role — the one saturated sheet — not a colour name, and renaming it would touch the markup for nothing. */ --on-ember:#f2fafc; --on-ember-2:rgba(242,250,252,.88); --on-ember-3:rgba(242,250,252,.66); /* the language's own identity, used only where Osy# appears (osysharp's cerulean, dark register) */ --osy-ground:#08161b; --osy-ink:#e7f1f2; --osy-ink-2:#9fbdc1; --osy-accent:#5fc8e8; --sans:'Inter',system-ui,-apple-system,sans-serif; --mono:'JetBrains Mono',ui-monospace,Menlo,monospace; --display:'opsz' 32; --page:1180px; --air:clamp(88px,11vw,160px); --gutter:clamp(10px,1.4vw,20px); --sheet-radius:clamp(24px,3.2vw,44px); } @media (prefers-color-scheme:dark){ :root{ --paper:#08161b; --card:#0f2229; --wash:#163038; --rule:#22444f; --rule-2:#34606e; --ink:#e7f1f2; --ink-2:#9fbdc1; --ink-3:#6e8f96; --accent:#5fc8e8; --accent-wash:#0a2a35; --tint:#0c1e24; --glow:rgba(95,200,232,.10); --sheet-ink:#040e12; /* the accent is a LIGHT cyan in dark mode, so what reads on the accent sheet inverts with it */ --on-ember:#062028; --on-ember-2:rgba(6,32,40,.86); --on-ember-3:rgba(6,32,40,.60); } } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6; font-variation-settings:'opsz' 14;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} h1,h2,h3{font-variation-settings:var(--display);margin:0;color:inherit;text-wrap:balance} p{margin:0} a{color:inherit} b{font-weight:600} img,svg{max-width:100%} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px} .in{max-width:var(--page);margin-inline:auto;padding-inline:32px} .in.narrow{max-width:920px} /* centred is the default here; the few left-aligned places say so */ .in:not(.duo){text-align:center} .in > h2{margin-inline:auto} h2{font-weight:800;letter-spacing:-.045em;line-height:1.02;font-size:clamp(34px,4.8vw,64px);max-width:20ch} .chip + h2{margin-top:22px} .big{font-size:clamp(18px,1.5vw,21px);line-height:1.6;color:var(--ink-2);max-width:60ch;margin:24px auto 0;text-wrap:pretty} .big b{color:var(--ink)} /* the label — a pill with the mark's ring in it (osysharp's is a mono eyebrow; this page has none) */ .chip{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;line-height:1;padding:8px 15px 8px 11px; border-radius:999px;background:var(--card);border:1px solid var(--rule);color:var(--ink-2)} .chip::before{content:"";width:9px;height:9px;border-radius:50%;border:2.5px solid var(--accent)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:16px;line-height:1; text-decoration:none;border-radius:999px;padding:15px 24px;white-space:nowrap;transition:background .15s,color .15s,box-shadow .15s,filter .15s} .btn.sm{padding:11px 17px;font-size:14.5px} .btn.f{background:var(--ink);color:var(--paper)} .btn.f:hover{background:var(--accent);color:var(--on-ember)} .btn.o{box-shadow:inset 0 0 0 1.5px var(--rule-2);color:var(--ink)} .btn.o:hover{box-shadow:inset 0 0 0 1.5px var(--ink)} .btn.e{background:var(--accent);color:var(--on-ember)} .btn.e:hover{filter:brightness(1.08)} .btn.ghost{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--on-ink) 30%,transparent);color:var(--on-ink)} .btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--on-ink)} .ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:36px} .tag{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:3px 9px;border-radius:20px; color:var(--accent);background:var(--accent-wash);margin-left:8px;vertical-align:2px} .wm{font-weight:800;letter-spacing:-.04em} .wm .hash{font-family:var(--mono);font-weight:500;color:var(--accent)} .em{color:var(--accent)} /* sheets — the page is built from these, not from full-width bands divided by rules */ .sheet{margin-inline:var(--gutter);border-radius:var(--sheet-radius);padding-block:var(--air)} .sheet + .sheet{margin-top:var(--gutter)} .ink{background:var(--sheet-ink);color:var(--on-ink)} .ink .big{color:var(--on-ink-2)} .ink .big b{color:var(--on-ink)} .ink .quiet{color:var(--on-ink-3)} .ink .chip{background:color-mix(in srgb,var(--on-ink) 6%,transparent);border-color:color-mix(in srgb,var(--on-ink) 14%,transparent);color:var(--on-ink-2)} .ink .chip::before{border-color:var(--accent-on-ink)} .ink .em{color:var(--accent-on-ink)} .tint{background:var(--tint)} .ember{background:var(--accent);color:var(--on-ember)} @media (prefers-color-scheme:dark){.ink{box-shadow:inset 0 0 0 1px #26282c}} /* header — a floating capsule ────────────────────────────────────────────────────────────────────────────────── */ .bar{position:sticky;top:0;z-index:50;padding:12px var(--gutter) 0;pointer-events:none} .capsule{pointer-events:auto;max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:20px;padding:7px 7px 7px 18px; border-radius:999px;border:1px solid var(--rule);background:color-mix(in srgb,var(--paper) 84%,transparent); -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px); box-shadow:0 14px 34px -22px rgba(28,26,24,.35)} .brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;font-size:19px;letter-spacing:-.02em; font-variation-settings:var(--display);color:var(--ink)} .mark{width:26px;height:26px;color:var(--accent);flex:none} .mark rect{fill:var(--ink)} .capsule nav{display:flex;gap:2px;margin-left:auto;font-size:14.5px} .capsule nav a{text-decoration:none;color:var(--ink-2);padding:9px 13px;border-radius:999px} .capsule nav a:hover{background:var(--wash);color:var(--ink)} .capsule nav a.ext::after{content:" ↗";color:var(--ink-3)} @media (max-width:860px){.capsule nav{display:none}.capsule .btn{margin-left:auto}} /* hero — centred, and the orbit ──────────────────────────────────────────────────────────────────────────────── */ .hero{padding-top:clamp(56px,8vw,112px);overflow:hidden} .hero h1{font-weight:800;letter-spacing:-.05em;line-height:.93;font-size:clamp(50px,8.6vw,128px);margin:26px auto 30px} .lede{font-size:clamp(18px,1.8vw,23px);line-height:1.5;color:var(--ink-2);max-width:40ch;margin:0 auto;text-wrap:pretty} .lede b{color:var(--ink)} h2 + .lede, h1 + .lede{margin-top:clamp(18px,2vw,26px)} /* The orbit is a half disc standing on the dark sheet below it: three rings centred on the bottom edge. Every size is a share of the orbit's width, so the picture is the same at any width. ⭐ IT READS OUTWARDS FROM OSYRIN (owner, 2026-09-17). The core is the product; the middle band is the three ways to get it, one wedge each; the outer band is the applications it carries, one wedge each. The first version read inwards — the visitor's app at the centre, wrapped in Osyrin, wrapped in the cloud — which is a fine idea and put the product third in its own picture. The bands are cut into wedges by a conic MASK rather than by drawing arcs: the fill, the border and the glow are all masked together, so a wedge is one shape and there is no second thing to keep in step. The angles are derived, not guessed — a boundary at θ from the +x axis is at conic angle (90 − θ), gaps are 2.5° wide, and the bottom half (conic 90°–270°) is below the horizon and clipped by the orbit's own overflow. */ .orbit{position:relative;width:min(1120px,calc(100% - 2 * var(--gutter)));aspect-ratio:2/1;margin:clamp(56px,7vw,96px) auto 0;overflow:hidden} .ring{position:absolute;left:50%;top:100%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%)} .r3{width:100%;border:1.5px solid var(--rule);background:radial-gradient(closest-side,transparent 62%,var(--glow))} .r2{width:70%;background:var(--accent-wash);border:1.5px solid color-mix(in srgb,var(--accent) 32%,transparent)} .r1{width:38%;background:var(--sheet-ink)} /* ⛔ THE DIVISIONS ARE LINES, NOT WEDGES. The first cut of this used a conic mask to slice each band into filled wedges with gaps between them, and the owner's verdict was a "saw blade" (2026-09-17) — which is exactly what a ring of gapped wedges is. A division only needs a line. So: both bands are continuous again, and the SVG below draws two dividers across BOTH of them for the three ways to run it, plus one lighter tick inside each for the two applications it holds. Six applications, not eight, and every one of them belongs to a named way of running. ⚑ The outer ring used to turn, 180s to the revolution. It cannot now: the slices mean something and the names are fixed to them. A diagram that carries meaning holds still. */ .cuts{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible} /* ⚠ A DIVIDER IS NOT ONE LINE — it is two, because it crosses two different things. Drawn at one weight the whole way out it cut the accent band clean in three: "way too hard sliced" (owner, 2026-09-17). Across the BAND it is barely there, just enough to say the three parts are distinct; across the RIM, where the slices carry names and must actually be told apart, it is plain, and a step stronger than the tick that splits each one in two. */ .div{fill:none} .div.in{stroke:color-mix(in srgb,var(--accent) 16%,transparent);stroke-width:.34} .div.out{stroke:var(--rule-2);stroke-width:.45} .tick{stroke:var(--rule-2);stroke-width:.3;fill:none;opacity:.6} /* The names sit ON the arc, which is the whole point of drawing them in SVG: a straight label laid over a curve reads as a sticker. Sized in viewBox units so the whole picture scales as one thing — 2.5 units is 14px at the orbit's full 1120px. Below the width where the chips withdraw they would be too small to read, so they go too. */ .an{fill:var(--ink-2);font-family:var(--mono);font-size:2.5px;letter-spacing:.18px;text-transform:uppercase;text-anchor:middle} .core{position:absolute;left:50%;top:76%;transform:translateX(-50%);color:var(--on-ink);font-weight:800;letter-spacing:-.035em; line-height:1;font-size:clamp(17px,2.9vw,40px);text-align:center;font-variation-settings:var(--display)} /* ⚠ EVERY DIMENSION HERE IS IN `em`, DELIBERATELY. The band is a share of the orbit's width; a chip in fixed pixels keeps its size while the band closes around it, and below ~720px "Enterprise" crossed both edges of its band at once. Caught by the geometry check, not by eye — the failure is a couple of pixels wide and lives in a 20px window of viewport width. */ .orb{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:.55em;white-space:nowrap; background:var(--card);border:1px solid var(--rule);border-radius:999px;padding:.6em 1.05em .6em .8em; font-size:clamp(12px,1.25vw,15px);font-weight:600;line-height:1;color:var(--ink);box-shadow:0 14px 30px -20px rgba(11,31,37,.4)} .orb::before{content:"";width:.55em;height:.55em;border-radius:50%;border:.14em solid var(--accent);flex:none} /* One chip per wedge, at the wedge's middle angle on the band's mid-radius (27% of the width — the band runs 19% to 35%). left = 50 + 27·cos θ; top = 100 − 54·sin θ, because the box is half as tall as it is wide. ⚠ A chip is placed by its CENTRE but clears by its nearest CORNER: at 27% the corner nearest the middle still sits well outside the inner disc at every width, which is the bug the four feature chips had here before. */ .w1{left:26.62%;top:73%} /* self-host, 150° */ .w2{left:50%;top:46%} /* public cloud, 90° */ .w3{left:73.38%;top:73%} /* enterprise, 30° */ .caps{display:none} /* 760, not 700: the chips are withdrawn while the band is still comfortably wider than they are, rather than at the width where they finally break. The caps list below carries the same three words from here down. */ @media (max-width:760px){ .orb{display:none} .an{display:none} .caps{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;margin:0 auto;padding:22px 16px 40px} .caps li{background:var(--card);border:1px solid var(--rule);border-radius:999px;padding:8px 13px;font-size:14px;font-weight:600} } /* ── THE HERO GRAPHIC — every application present, on one operating system, anywhere ───────────────────────── A dark card inside the paper hero. It REPLACES the four-layer ring below (kept at /preview/hero/). Rebuilt from a design-canvas mockup's arithmetic rather than copied: every dimension is cqw against a 1280-wide frame (1px = 1/12.8cqw), so the composition scales as ONE object. ⚑ IT WAS 300vh OF STICKY SCROLL AND IS NOT ANY MORE (owner, 2026-09-19). The field arrived as you scrolled and read its brightest at the END — so this is that end state, held: all 36 present, the bar at full glow. What is left moving is the reel in the bar, which is the part that made it feel alive. The scroll cost three screens before anything below the hero and paid for one reveal. ⚑ AND IT IS A CARD INSIDE .hero, NOT A BAND AFTER IT. As a band it put two dark blocks back to back with a 20px hairline between them, which reads as one broken block rather than two sections. ⚠ ITS GLOW IS --hd-glow, NOT --glow. `--glow` is ALREADY a site token (a shadow colour, .r3/.pr-a/.card), and naming this one --glow shadowed it for every descendant. Nothing broke only because none of those live inside .hd — which is luck, and this file has spent three bugs this month on exactly that. */ .hd{--ink-ground:#08161b;--tile:color-mix(in srgb,var(--on-ink) 7%,#0d1b21); --tile-line:color-mix(in srgb,var(--on-ink) 18%,transparent); --bar-ground:color-mix(in srgb,var(--on-ink) 5%,#0b1920); --wire:color-mix(in srgb,var(--accent-on-ink) 40%,transparent); --hd-glow:.62;margin:clamp(34px,4vw,60px) auto 0;padding:0; width:min(1120px,calc(100% - 2 * var(--gutter)));color:var(--on-ink)} .hd-card{background:var(--ink-ground);border-radius:var(--sheet-radius);overflow:clip; padding:clamp(14px,1.6vw,24px) clamp(12px,1.4vw,22px)} .hd-stage{position:relative;aspect-ratio:1280/632;width:100%; container-type:inline-size;font-family:var(--sans)} .hd-cap{margin:clamp(22px,2.6vw,36px) auto 0;max-width:46ch;text-align:center;color:var(--ink); font-weight:700;letter-spacing:-.025em;line-height:1.25;font-size:clamp(19px,2.1vw,28px);text-wrap:balance} .hd-cap span{color:var(--accent)} /* ── the field of applications ─────────────────────────────────────────────────────────────────────────────── */ .hd-tile{position:absolute;box-sizing:border-box;left:var(--l);top:var(--t);width:var(--w);height:var(--h); padding:var(--p);border-radius:var(--r);background:var(--tile);border:1px solid var(--tile-line); display:flex;flex-direction:column;justify-content:space-between; opacity:var(--a)} .hd-tile em{width:var(--d);height:var(--d);border-radius:50%;background:var(--accent-on-ink); animation:hd-pulse 2.4s ease-in-out infinite;animation-delay:var(--dl)} .hd-tile b{font-size:var(--fs);font-weight:600;letter-spacing:-.01em;white-space:nowrap} .hd-tile i{width:55%;height:var(--bh);border-radius:2px;background:var(--tile-line)} @keyframes hd-pulse{0%,100%{opacity:1}50%{opacity:.3}} /* ── the operating system, one bar under all of them ───────────────────────────────────────────────────────── */ .hd-wire{position:absolute;width:1px;background:var(--wire);opacity:calc(.45 + var(--hd-glow))} .hd-plate{position:absolute;left:17.969cqw;top:29.180cqw;width:64.062cqw;height:14.500cqw;box-sizing:border-box; background:#060f13;border:1px solid color-mix(in srgb,var(--on-ink) 10%,transparent);border-radius:1.406cqw} .hd-os{position:absolute;left:17.969cqw;top:28.400cqw;width:64.062cqw;height:14.500cqw;box-sizing:border-box; padding:1.719cqw 2.500cqw;background:var(--bar-ground);border:1px solid var(--tile-line);border-radius:1.406cqw; overflow:hidden;display:flex;flex-direction:column;justify-content:space-between; box-shadow:0 -0.938cqw 4.688cqw rgba(95,200,232,var(--hd-glow)), 0 -2.344cqw 10.938cqw rgba(95,200,232,calc(var(--hd-glow) * .55))} /* the bar's own top edge lights as the field fills, so the glow has a source rather than being a haze */ .hd-os::after{content:"";position:absolute;left:0;right:0;top:0;height:1px; background:linear-gradient(90deg,transparent,var(--accent-on-ink) 22%,var(--accent-on-ink) 78%,transparent); opacity:calc(var(--hd-glow) * 1.35)} .hd-os::before{content:"";position:absolute;left:0;top:0;width:12.500cqw;height:1px;z-index:1; background:linear-gradient(90deg,transparent,var(--accent-on-ink),transparent); animation:hd-sweep 5s linear infinite} @keyframes hd-sweep{from{transform:translateX(-12.500cqw)}to{transform:translateX(64.062cqw)}} .hd-os-h{display:flex;justify-content:space-between;align-items:baseline;gap:1.250cqw} .hd-os-h .n{display:flex;align-items:baseline;gap:1.250cqw} .hd-os-h .n strong{font-size:2.500cqw;font-weight:800;letter-spacing:-.03em;line-height:1; font-variation-settings:var(--display)} .hd-os-h .n span,.hd-os-h .r{font-family:var(--mono);font-size:0.938cqw;letter-spacing:.18em;text-transform:uppercase} .hd-os-h .n span{color:var(--accent-on-ink)} .hd-os-h .r{color:var(--on-ink-2);font-size:0.859cqw;letter-spacing:.16em} .hd-os-w{overflow:hidden;margin:0 -1.094cqw} .hd-os-g{display:flex;width:100%;align-items:flex-start; transform:translateX(calc(var(--i,0) * -25%));transition:transform .62s cubic-bezier(.65,0,.35,1)} .hd-os-g.snap{transition:none} .hd-os-g > div{flex:0 0 25%} .hd-os-g > div{display:flex;align-items:flex-start;gap:0.781cqw;padding:0 1.094cqw;box-sizing:border-box} .hd-os-g p{margin:0;font-size:0.898cqw;line-height:1.45;color:var(--on-ink-2)} .hd-os-g b{display:block;font-size:1.172cqw;line-height:1.3;font-weight:650;color:var(--on-ink);letter-spacing:-.01em;margin-bottom:0.234cqw} .hd-os-g > div + div{border-left:1px solid var(--tile-line)} .hd-os-g svg{width:1.406cqw;height:1.406cqw;margin-top:0.156cqw;flex:none;fill:none;stroke:var(--accent-on-ink);stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} /* ── where it runs ─────────────────────────────────────────────────────────────────────────────────────────── */ .hd-runs{position:absolute;left:17.969cqw;top:44.700cqw;width:64.062cqw;display:grid; grid-template-columns:repeat(3,minmax(0,1fr));justify-items:center} .hd-runs b{display:flex;align-items:center;gap:0.781cqw;padding:0.703cqw 1.406cqw; border:1px solid color-mix(in srgb,var(--on-ink) 22%,transparent);border-radius:999px; font-size:1.328cqw;font-weight:600;white-space:nowrap} .hd-runs b.soon{border-style:dashed} .hd-runs b::before{content:"";width:0.547cqw;height:0.547cqw;border:0.234cqw solid var(--accent-on-ink);border-radius:50%} .hd-runs b i{font-style:normal;margin-left:.3em;font-family:var(--mono);font-size:0.859cqw;font-weight:500;letter-spacing:.18em; text-transform:uppercase;color:var(--on-ink-2)} .hd-sm b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--on-ink-2);opacity:.75;margin-bottom:6px;font-weight:500} .hd-sm{display:none;font-size:14.5px;line-height:1.55;color:var(--on-ink-2);margin:14px 0 0} /* ⚠ Below 900px the stage's type falls under 10px and the field becomes texture rather than information. */ @media (max-width:900px){ .hd-stage{width:100%;aspect-ratio:auto;display:flex;flex-direction:column} .hd-card{padding:clamp(16px,4vw,22px)} .hd-stage > *{position:static!important} .hd-sm{order:-1;margin:0 0 16px} .hd-tile,.hd-wire,.hd-plate{display:none} .hd-sm{display:block} .hd-os{width:auto;height:auto;padding:18px;border-radius:16px;box-shadow:none;gap:18px} .hd-os-w{margin:0} .hd-os-g{display:grid;grid-template-columns:1fr;gap:14px 0;width:auto;transform:none!important} .hd-os-g > div{flex:none;padding:0;border-left:0!important;gap:10px} .hd-os-g > div.clone{display:none} .hd-os-g p{font-size:13px;line-height:1.5} .hd-os-g b{font-size:15px;margin-bottom:2px} .hd-os-g svg{width:18px;height:18px} .hd-os-h{flex-direction:column;align-items:flex-start;gap:6px} .hd-os-h .n{flex-direction:column;align-items:flex-start;gap:4px} .hd-os-h .n strong{font-size:26px} .hd-os-h .n span{font-size:11px} .hd-os-h .r{display:none} .hd-runs{width:auto;margin-top:14px;grid-template-columns:1fr;gap:9px;justify-items:stretch} .hd-runs b{font-size:15px;padding:10px 16px} .hd-runs b i{font-size:10px} } @media (prefers-reduced-motion:reduce){ .hd-tile em,.hd-os::before{animation:none} } /* ── THE PLATFORM GRAPHIC — four layers, reading OUTWARD from the core ───────────────────────────────────────── Brief, owner 2026-09-18. The radial idea is kept because it is the distinctive one; what changes is that the graphic now carries the HIERARCHY instead of a taxonomy: core Osyrin — the application operating system model one application model: data, UI, workflows, security, APIs, AI deployment where that same model runs: public cloud · enterprise · self-host applications what you build on it: six domains that are plainly EXAMPLES, not products ⚠ The old `.orbit` rules below are NOT dead: `/preview/hero/` still renders the two alternatives on them. This is a new set of names rather than an edit of those, so choosing differently later costs nothing. ⚑ ONE COORDINATE SYSTEM. The rings are CSS circles centred on the bottom-middle; the SVG is a 200×100 viewBox with the same centre, so 1 viewBox unit = 0.5% of the width in both. Every position below is computed from left = 50 + R·cosθ and top = 100 − 2R·sinθ (the box is half as tall as it is wide), never eyeballed. */ .plat{margin:clamp(56px,7vw,96px) 0 0;padding:0} .plat-w{position:relative;width:min(1120px,calc(100% - 2 * var(--gutter)));aspect-ratio:2/1;margin-inline:auto; overflow:hidden;container-type:inline-size} /* ⛔ NOT `vw` FOR ANYTHING INSIDE. The graphic is min(1120px, …), so past 1120px the viewport keeps growing and the circle does not — a vw-sized label drifts off its ring. Container units track the ring itself. */ .pr{position:absolute;left:50%;top:100%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%)} .pr-a{width:100%;border:1.5px solid var(--rule);background:radial-gradient(closest-side,transparent 62%,var(--glow))} .pr-d{width:78%;background:var(--card);border:1px solid var(--rule)} .pr-m{width:50%;background:var(--accent-wash);border:1.5px solid color-mix(in srgb,var(--accent) 30%,transparent)} .pr-c{width:32%;background:var(--sheet-ink)} /* ⭐ THE SEMICIRCLE IS DELIBERATE, AND THIS LINE IS WHAT SAYS SO. Cropped without it the circle reads as an accident of the viewport; sitting on a rule it reads as a foundation the page stands on. */ .plat-w::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px; background:linear-gradient(90deg,transparent,var(--rule-2) 12%,var(--rule-2) 88%,transparent)} .plat-cuts{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible} /* A divider only needs a line — a ring of gapped wedges is a saw blade (owner, 2026-09-17). Each band is divided at its own weight: the model band barely, the deployment band plainly, the rim in between. */ .tk{fill:none} .tk.m{stroke:color-mix(in srgb,var(--accent) 22%,transparent);stroke-width:.34} .tk.d{stroke:var(--rule-2);stroke-width:.4} .tk.a{stroke:var(--rule);stroke-width:.45} .mn{fill:var(--accent);opacity:.72;font-family:var(--mono);font-size:2.35px;letter-spacing:.2px; text-transform:uppercase;text-anchor:middle} .plat-core{position:absolute;left:50%;top:79%;transform:translateX(-50%);width:28%;text-align:center; color:var(--on-ink);font-weight:800;letter-spacing:-.035em;line-height:1;font-variation-settings:var(--display); font-size:max(20px,3.25cqw)} .plat-core small{display:block;margin-top:.5em;font-family:var(--mono);font-size:max(9px,.3em);font-weight:500; letter-spacing:.1em;text-transform:uppercase;line-height:1.35;color:var(--accent-on-ink); font-variation-settings:normal} /* Deployment and applications are two different KINDS of thing, so they are two different objects: a pill with a ring bullet for an environment, a card with an icon for something you build. */ .dep,.app{position:absolute;left:var(--l);top:var(--t);transform:translate(-50%,-50%); display:inline-flex;align-items:center;white-space:nowrap;border-radius:999px;background:var(--card); color:var(--ink);line-height:1} .dep{gap:.58em;padding:.6em 1.05em .6em .82em;font-weight:700;font-size:max(12px,1.28cqw); box-shadow:0 14px 30px -20px rgba(11,31,37,.42),inset 0 0 0 1.5px var(--rule-2)} .dep::before{content:"";width:.56em;height:.56em;border-radius:50%;border:.15em solid var(--accent);flex:none} .app{gap:.5em;padding:.52em .9em;font-weight:600;font-size:max(11px,1.1cqw);border-radius:.85em; box-shadow:0 10px 24px -18px rgba(11,31,37,.4),inset 0 0 0 1px var(--rule)} .app svg{width:1.18em;height:1.18em;flex:none;color:var(--accent);fill:none;stroke:currentColor; stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round} .plat-cap{margin:clamp(26px,3vw,40px) auto 0;max-width:46ch;font-weight:700;letter-spacing:-.025em; font-size:clamp(17px,1.9vw,24px);color:var(--ink);text-wrap:balance} /* A gentle one-time emergence — the layers arrive from the core outward. Never a rotation: the slices carry meaning now, and a diagram that means something holds still. */ @media (prefers-reduced-motion:no-preference){ .pr,.plat-cuts,.plat-core,.dep,.app{animation:plat-rise .7s cubic-bezier(.22,1,.36,1) both} .pr-c{animation-delay:.04s} .pr-m{animation-delay:.12s} .pr-d{animation-delay:.2s} .pr-a{animation-delay:.28s} .plat-cuts{animation-delay:.3s} .plat-core{animation-delay:.1s} .dep{animation-delay:.34s} .app{animation-delay:.42s} } @keyframes plat-rise{from{opacity:0;transform:translate(-50%,-50%) scale(.965)}} .plat-core{animation-name:plat-rise-c} @keyframes plat-rise-c{from{opacity:0;transform:translateX(-50%) translateY(6px)}} .plat-cuts{animation-name:plat-fade} @keyframes plat-fade{from{opacity:0}} /* ── under 900px the ring cannot carry its own words, so it is REPLACED rather than emptied ─────────────────── ⛔ MEASURED on the previous graphic: below 760px every arc label and every chip was `display:none` and a phone got three empty circles. Owner, 2026-09-18: "without anything in the org it just looks like an eye and doesnt say anything". The same four layers, same four grounds, same order — outward from the core, as rows. */ .plat-sm{display:none} @media (max-width:900px){ .plat-w,.plat-cap{display:none} .plat-sm{display:grid;gap:10px;max-width:440px;margin:0 auto;text-align:left} .ps{border-radius:16px;padding:15px 16px} .ps p{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)} .ps span{display:block;margin-top:6px;font-size:14.5px;line-height:1.5;color:var(--ink-2)} .ps-c{background:var(--sheet-ink);text-align:center;padding:20px 16px} .ps-c b{display:block;font-weight:800;letter-spacing:-.035em;font-size:27px;line-height:1.05;color:var(--on-ink); font-variation-settings:var(--display)} .ps-c span{margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase; color:var(--accent-on-ink)} .ps-m{background:var(--accent-wash);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 30%,transparent)} .ps-d{background:var(--card);box-shadow:inset 0 0 0 1px var(--rule)} .ps-a{background:var(--tint);box-shadow:inset 0 0 0 1px var(--rule)} .plat-smc{margin:18px 0 0;font-weight:700;letter-spacing:-.02em;font-size:19px;color:var(--ink);text-align:center} } /* the shift ─────────────────────────────────────────────────────────────────────────────────────────────────── */ .shift h2{max-width:17ch} .move{max-width:1120px;margin:clamp(56px,7vw,100px) auto 0;padding-inline:32px;text-align:center} .move .lead{color:var(--on-ink-2);font-size:clamp(17px,1.5vw,20px)} .track{display:grid;grid-template-columns:auto minmax(40px,1fr) auto;align-items:center;gap:clamp(16px,2.4vw,34px);margin-top:26px} .end{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left} .end .w{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--on-ink-3)} .end .v{font-weight:800;letter-spacing:-.045em;line-height:1;font-size:clamp(28px,4.4vw,62px);font-variation-settings:var(--display)} .from .v{color:var(--on-ink-3)} .to .v{color:var(--accent-on-ink)} .track .line{position:relative;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--on-ink-3),var(--accent-on-ink))} .track .line::after{content:"";position:absolute;right:0;top:50%;width:12px;height:12px;border-top:2px solid var(--accent-on-ink); border-right:2px solid var(--accent-on-ink);transform:translateY(-50%) rotate(45deg)} @media (max-width:760px){ .track{grid-template-columns:1fr;justify-items:center} .end{align-items:center;text-align:center} .track .line{width:2px;height:52px;background:linear-gradient(180deg,var(--on-ink-3),var(--accent-on-ink))} .track .line::after{right:auto;top:auto;left:50%;bottom:0;transform:translateX(-50%) rotate(135deg)} } /* how it works — the argument holds still, the picture converges ─────────────────────────────────────────────── */ .how{padding-block:var(--air)} .duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start} .stick{position:sticky;top:110px} .duo h2{max-width:17ch} .duo .big{margin-inline:0} .converge figure{margin:0} .converge figcaption{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:18px;text-align:center} .unified figcaption{color:var(--accent)} .scatter{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 10px;padding:6px} .scatter span{border:1.5px dashed var(--rule-2);background:var(--card);border-radius:999px;padding:10px 16px;font-size:15px;color:var(--ink-2)} .scatter span:nth-child(4n+1){transform:rotate(-4deg) translateY(4px)} .scatter span:nth-child(4n+2){transform:rotate(3deg)} .scatter span:nth-child(4n+3){transform:rotate(-2deg) translateY(-3px)} .scatter span:nth-child(4n){transform:rotate(5deg) translateY(5px)} .cap{font-size:15px;color:var(--ink-3);text-align:center;margin:18px auto 0;max-width:40ch;line-height:1.5} .funnel{display:block;width:100%;height:clamp(70px,8vw,110px);margin:20px 0} .funnel path{fill:none;stroke:var(--rule-2);stroke-width:1.5;stroke-dasharray:4 5;vector-effect:non-scaling-stroke} .disc{width:min(100%,460px);aspect-ratio:1;border-radius:50%;margin:0 auto;padding:13%;display:flex;flex-direction:column;align-items:center; justify-content:center;text-align:center;background:var(--accent-wash);border:1.5px solid color-mix(in srgb,var(--accent) 32%,transparent); box-shadow:0 40px 100px -60px var(--glow)} .dt{font-weight:800;letter-spacing:-.035em;line-height:1;font-size:clamp(26px,2.8vw,38px);font-variation-settings:var(--display)} .ds{color:var(--ink-2);margin-top:6px} .disc ul{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:7px} .disc li{background:var(--card);border-radius:999px;padding:6px 13px;font-size:14px;line-height:1.3} .dop{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-top:18px;max-width:26ch;line-height:1.5} @media (max-width:900px){.duo{grid-template-columns:1fr}.stick{position:static}} /* build · run · we run it — one line, three stops ─────────────────────────────────────────────────────────────── */ .flow{list-style:none;padding:0;margin:clamp(52px,6vw,84px) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 clamp(24px,3vw,48px);position:relative} .flow::before{content:"";position:absolute;top:20px;left:16.67%;right:16.67%;height:2px; background:repeating-linear-gradient(90deg,var(--rule-2) 0 7px,transparent 7px 14px)} .flow li{position:relative;display:flex;flex-direction:column;align-items:center} .node{position:relative;z-index:1;width:42px;height:42px;border-radius:50%;background:var(--tint);border:7px solid var(--rule-2);margin-bottom:28px} .flow .main .node{border-color:var(--accent);box-shadow:0 0 0 9px color-mix(in srgb,var(--accent) 14%,transparent)} .verb{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)} .flow .main .verb{color:var(--accent)} .flow h3{font-weight:800;letter-spacing:-.04em;line-height:1;font-size:clamp(34px,3.6vw,50px);margin:14px 0 10px} .role{font-weight:600;font-size:16px} .txt{color:var(--ink-2);font-size:16.5px;line-height:1.55;max-width:34ch;margin-top:14px} .more{margin-top:16px;font-weight:600;text-decoration:none;font-size:15px} .more:hover{color:var(--accent)} @media (max-width:820px){ .flow{grid-template-columns:1fr;gap:48px} .flow::before{left:20px;right:auto;top:21px;bottom:21px;width:2px;height:auto; background:repeating-linear-gradient(180deg,var(--rule-2) 0 7px,transparent 7px 14px)} .flow li{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:22px;align-items:start;text-align:left} .flow li > :not(.node){grid-column:2} .node{grid-column:1;grid-row:1 / span 6;margin:0} } /* four outcomes — tiles of different sizes and grounds ──────────────────────────────────────────────────────── */ .outcomes{padding-block:var(--air)} .bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);margin-top:clamp(52px,6vw,84px);text-align:left} .tile{position:relative;overflow:hidden;border-radius:clamp(22px,2.4vw,32px);padding:clamp(28px,3vw,44px);min-height:clamp(250px,22vw,320px); display:flex;flex-direction:column;justify-content:flex-end} /* each tile carries the ring, large and faint, off its corner */ .tile::after{content:"";position:absolute;width:240px;aspect-ratio:1;border-radius:50%;border:34px solid currentColor;opacity:.07;right:-80px;top:-80px} .tile h3{font-weight:800;letter-spacing:-.035em;line-height:1.04;font-size:clamp(26px,2.6vw,36px);max-width:16ch} .tile p{margin-top:14px;font-size:16.5px;line-height:1.55;max-width:46ch} .t1{grid-column:span 2;background:var(--accent);color:var(--on-ember)} .t1 p{color:var(--on-ember-2)} .t2{background:var(--card);border:1px solid var(--rule)} .t2 p,.t4 p{color:var(--ink-2)} .t3{background:var(--sheet-ink);color:var(--on-ink)} .t3 p{color:var(--on-ink-2)} .t4{grid-column:span 2;background:var(--tint)} .t1 h3,.t4 h3{font-size:clamp(30px,3.4vw,48px)} @media (max-width:820px){.bento{grid-template-columns:1fr}.t1,.t4{grid-column:auto}.tile{min-height:0}} /* the category line — the one ember sheet ───────────────────────────────────────────────────────────────────── */ .statement{padding-block:clamp(84px,10vw,150px)} .statement p{font-weight:800;letter-spacing:-.04em;line-height:1.07;font-size:clamp(32px,5vw,72px);text-wrap:balance;font-variation-settings:var(--display)} .statement .quiet{color:var(--on-ember-3)} /* ownership — doors, drawn as doors ─────────────────────────────────────────────────────────────────────────── */ .own{padding-block:var(--air)} .doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:clamp(52px,6vw,84px)} /* ⚠ The arch is a FIXED radius, never 999px: when corner radii add up past the box, CSS shrinks ALL four by the same factor, so a 999px top would crush the 28px bottom corners to a few pixels. */ .door{position:relative;background:var(--card);border:1px solid var(--rule);border-radius:200px 200px 28px 28px; padding:clamp(104px,9.5vw,136px) clamp(24px,2.6vw,36px) clamp(30px,3vw,40px)} .door::before{content:"";position:absolute;left:50%;top:clamp(40px,3.8vw,54px);width:36px;height:36px;border-radius:50%; border:6.5px solid var(--accent);transform:translateX(-50%)} .door h3{font-size:clamp(22px,2vw,26px);font-weight:700;letter-spacing:-.02em;line-height:1.15} .door p{margin-top:12px;color:var(--ink-2);font-size:16px;line-height:1.55} .assure{margin-top:clamp(14px,2vw,24px);background:var(--tint);border-radius:28px;padding:clamp(28px,3.4vw,48px); display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 48px;align-items:center;text-align:left} .assure h3{font-weight:800;letter-spacing:-.035em;font-size:clamp(26px,2.8vw,38px);line-height:1.05} .assure p{font-size:clamp(17px,1.4vw,19px);line-height:1.6;color:var(--ink-2);text-wrap:pretty} @media (max-width:820px){.doors{grid-template-columns:1fr}.assure{grid-template-columns:1fr}} /* the language, in its own clothes ──────────────────────────────────────────────────────────────────────────── */ .osy{background:var(--osy-ground);color:var(--osy-ink);padding-block:clamp(64px,8vw,110px)} .osy .big-wm{font-size:clamp(56px,7vw,96px);line-height:1;margin-bottom:20px;font-variation-settings:var(--display)} .osy .big-wm .hash{color:var(--osy-accent)} .osy .line{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--osy-ink-2);max-width:52ch;margin:0 auto} .osy .line b{color:var(--osy-ink)} .btn.osybtn{background:var(--osy-accent);color:#06212a;margin-top:30px} .btn.osybtn:hover{background:#ffa266} @media (prefers-color-scheme:dark){.osy{background:#0b0d12;box-shadow:inset 0 0 0 1px #2a2f3d}} /* plans ─────────────────────────────────────────────────────────────────────────────────────────────────────── */ .plans h2{max-width:18ch} /* ⚠ AN ACCENT BUTTON ON A DARK SHEET TAKES THE DARK REGISTER'S ACCENT, like everything else that sits there (.ink .em, the bullets). On the light register it was the DIMMEST thing on the sheet — the opposite of what a primary call is for. It showed up when the palette went cerulean, whose light accent is a deep teal; with the old ember it was merely lucky. */ .ink .btn.e{background:var(--accent-on-ink);color:var(--sheet-ink)} .owns{margin:clamp(44px,5vw,68px) auto 0;font-weight:800;letter-spacing:-.035em;line-height:1.12;font-size:clamp(24px,2.8vw,38px);max-width:26ch; text-wrap:balance;font-variation-settings:var(--display)} .fine{margin:18px auto 0;font-size:14.5px;line-height:1.55;color:var(--ink-3);max-width:72ch} /* ⚠ `.fine` is --ink-3, which on a DARK sheet is near-invisible rather than merely quiet. It first landed on one when the enterprise summary moved onto an ink sheet; a screenshot caught it, nothing else would have. */ .ink .fine{color:var(--on-ink-3)} .more{margin:clamp(26px,3vw,40px) auto 0} .more a{font-weight:600;font-size:17px;text-decoration:none;color:var(--accent)} .more a:hover{text-decoration:underline;text-underline-offset:3px} /* why now ───────────────────────────────────────────────────────────────────────────────────────────────────── */ .why h2{max-width:18ch} .claim{margin:30px auto 0;font-weight:800;letter-spacing:-.03em;line-height:1.15;font-size:clamp(24px,2.6vw,34px);font-variation-settings:var(--display)} /* two sentences, two lines — wrapped as one, the second began on the first line ("…the software. We / sell the…") */ .owns .em,.claim .em{display:block} /* footer — the wordmark, large ──────────────────────────────────────────────────────────────────────────────── */ .foot{padding-top:clamp(56px,7vw,90px);overflow:hidden} .foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:14px 32px;text-align:left} .arch{font-size:15px;color:var(--ink-2);text-wrap:pretty} .arch b{color:var(--ink)} .links{display:flex;flex-wrap:wrap;gap:22px;font-size:14.5px} .links a{color:var(--ink-3);text-decoration:none} .links a:hover{color:var(--accent)} /* The page ends on the wordmark standing on its baseline: only the descender of the "y" runs off the bottom. With line-height .8 the crop went through the middle of every letter and read as a rendering fault. */ .giant{margin:clamp(20px,3vw,40px) 0 -.2em;font-weight:800;letter-spacing:-.065em;line-height:1;font-size:clamp(92px,22vw,340px); text-align:center;white-space:nowrap;color:var(--wash);user-select:none;font-variation-settings:var(--display)} @media (max-width:620px){ .in,.move{padding-inline:22px} .capsule{padding-left:14px} .hero h1{margin:22px auto 24px} .btn{padding:14px 20px} .door{border-radius:170px 170px 24px 24px} } /* ── /plans/ ───────────────────────────────────────────────────────────────────────────────────────────────────── The home page carries the four columns as a summary; this page is where each of them is actually explained, and where Enterprise gets the room it needs. It reuses the sheets and the chips from the home page rather than inventing a second vocabulary — a second page of a site is not a second site. */ .phero{padding:clamp(120px,14vw,190px) 0 clamp(40px,5vw,64px)} .phero h1{font-weight:800;letter-spacing:-.05em;line-height:.96;font-size:clamp(42px,6.4vw,92px);margin:26px auto 26px;max-width:16ch} .phero .lede{margin-inline:auto} /* enterprise — a grid of what it includes, because "talk to us" tells a buyer nothing about whether to */ .ekit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);margin-top:clamp(40px,5vw,64px);text-align:left} /* `.ekit` is three columns, so FOUR cards strand the fourth on a row of its own. Four reads as 2x2 or not at all. */ .ekit.two{grid-template-columns:repeat(2,minmax(0,1fr))} .ekit article{background:color-mix(in srgb,var(--on-ink) 5%,transparent);border:1px solid color-mix(in srgb,var(--on-ink) 12%,transparent); border-radius:clamp(16px,1.8vw,22px);padding:clamp(20px,2.2vw,28px)} .ekit h3{font-size:18px;font-weight:700;letter-spacing:-.015em;line-height:1.25;margin:0} .ekit p{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--on-ink-2)} /* the open questions, two up */ .qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,40px) clamp(28px,3.4vw,56px); margin-top:clamp(40px,5vw,64px);text-align:left} .qa h3{font-size:18px;font-weight:700;letter-spacing:-.015em;line-height:1.3;margin:0} .qa p{margin:9px 0 0;font-size:16px;line-height:1.6;color:var(--ink-2)} .qa p b{color:var(--ink)} @media (max-width:900px){ .ekit{grid-template-columns:1fr} .qa{grid-template-columns:1fr} } /* ───────────────────────────────────────────────────────────────────────────── /start — THE DEVELOPER JOURNEY. ⛔ EVERY COMMAND ON THAT PAGE WAS RUN, NOT REMEMBERED (owner, 2026-09-18: "we know what the verbs look like, we have the source code so I dont think the fact that you cannot download it is a reason to not build it"). The terminal panels quote real `osy` output. If a verb changes, the page is wrong — re-run it, do not patch the prose. The step whose product does not exist yet carries `.soon`, which is the only honest way to show a journey whose last mile is not open. ───────────────────────────────────────────────────────────────────────────── */ .shero{padding-top:clamp(52px,7vw,96px);padding-bottom:clamp(30px,4vw,54px)} .shero h1{font-weight:800;letter-spacing:-.045em;line-height:1.02;font-size:clamp(38px,5.2vw,74px); max-width:19ch;margin:26px auto 0} .shero .lede{max-width:56ch;margin:22px auto 0;font-size:clamp(17px,1.45vw,20px);line-height:1.62;color:var(--ink-2);text-wrap:pretty} .shero .rule{width:64px;height:2px;background:var(--accent);margin:34px auto 0;opacity:.5} /* the honest status strip: what of this journey runs today */ .today{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px} .today span{font-family:var(--mono);font-size:12px;letter-spacing:.06em;padding:7px 13px;border-radius:999px; background:var(--wash);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--rule)} .today span b{font-weight:500;color:var(--accent)} /* ── the numbered steps ─────────────────────────────────────────────────────── */ .steps{list-style:none;margin:0;padding:0;counter-reset:s;text-align:left;max-width:860px;margin-inline:auto} .steps > li{counter-increment:s;position:relative;padding-left:76px;padding-bottom:52px} .steps > li::before{content:counter(s);position:absolute;left:0;top:-6px;width:48px;height:48px;border-radius:50%; display:grid;place-items:center;font-family:var(--mono);font-size:17px;font-weight:500; color:var(--accent);background:var(--card);box-shadow:inset 0 0 0 1.5px var(--rule-2)} /* the spine, drawn between the markers rather than behind them */ .steps > li::after{content:"";position:absolute;left:23.25px;top:48px;bottom:8px;width:1.5px;background:var(--rule)} .steps > li:last-child{padding-bottom:0} .steps > li:last-child::after{display:none} .steps h3{font-size:clamp(20px,1.7vw,25px);margin:0;letter-spacing:-.02em} .steps .sub{margin:9px 0 0;color:var(--ink-2);line-height:1.62;max-width:60ch;text-wrap:pretty} .steps .sub + .sub{margin-top:11px} .steps .soon{display:inline-block;margin-left:11px;vertical-align:2px;font-family:var(--mono);font-size:10.5px; letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--accent); padding:4px 9px;border-radius:999px;background:var(--accent-wash)} /* ── terminal panels ────────────────────────────────────────────────────────── */ .term{margin-top:18px;border-radius:14px;background:var(--sheet-ink);padding:18px 20px;overflow-x:auto; font-family:var(--mono);font-size:13.5px;line-height:1.75;-webkit-overflow-scrolling:touch} .term div{white-space:pre;color:var(--on-ink-2)} .term .p{color:var(--on-ink)} /* a command you type */ .term .p::before{content:"$ ";color:var(--accent-on-ink)} .term .ok{color:var(--accent-on-ink)} /* the tool's own success line */ .term .c{color:var(--on-ink-3);font-style:italic} /* our annotation, never output */ .term.win .p::before{content:"> "} /* ── what you never do ──────────────────────────────────────────────────────── */ .never{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;margin-top:38px;text-align:left} .never li{list-style:none;padding:16px 18px;border-radius:13px;background:var(--card); box-shadow:inset 0 0 0 1px var(--rule);color:var(--ink-2);font-size:15px;line-height:1.5} .never li b{display:block;color:var(--ink);font-weight:600;margin-bottom:3px} /* ── the sample table ───────────────────────────────────────────────────────── */ .samp{margin-top:30px;text-align:left;border-collapse:collapse;width:100%;font-size:15px} .samp td{padding:11px 14px;border-top:1px solid var(--rule);vertical-align:top;color:var(--ink-2)} .samp tr:first-child td{border-top:0} .samp td:first-child{font-family:var(--mono);font-size:13.5px;color:var(--accent);white-space:nowrap;width:1%} @media (max-width:700px){ .steps > li{padding-left:0} .steps > li::before{position:static;margin-bottom:14px} .steps > li::after{display:none} .term{font-size:12.5px;padding:15px 16px} } /* ── /start, second pass: the quick-start, the screenshot, and the panels ──────────────────────────────────────── Review asked for the first successful application to come BEFORE the compiler explanation, and for a real picture of it. Both are load-bearing: the reader decides whether this is worth their afternoon from the screenshot, not from step 4. ⛔ The screenshot is a REAL RUN of the `todo` sample, driven and captured with Playwright, not a mockup — replace it by re-running the capture, never by editing the image. */ .quick{padding-block:clamp(34px,4.5vw,60px)} .qgrid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(24px,3.4vw,52px);align-items:start;text-align:left} .qgrid h2{margin:0 0 14px;text-align:left} .qstep{margin-top:22px} .qstep .k{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px} .qstep .term{margin-top:0} /* the prompt you hand the agent — a said thing, not a typed thing, so it must not look like a terminal */ .ask{margin:0;padding:15px 18px;border-radius:12px;background:var(--accent-wash); border-left:3px solid var(--accent);color:var(--ink);font-size:15.5px;line-height:1.6;text-wrap:pretty} .ask em{color:var(--ink-2);font-style:normal;display:block;margin-top:7px;font-size:13.5px} /* the shot itself */ .shot{margin:0;border-radius:14px;overflow:hidden;box-shadow:0 1px 0 var(--rule),0 18px 44px -24px rgba(8,22,27,.42)} .shot img{display:block;width:100%;height:auto} .shot img.dk{display:none} @media (prefers-color-scheme:dark){.shot img.lt{display:none}.shot img.dk{display:block}} .shotcap{margin:14px 0 0;font-size:13.5px;color:var(--ink-3);line-height:1.6;text-align:left;max-width:none; text-wrap:pretty} .shotcap b{color:var(--ink-2);font-weight:600} .shotcap code{font-family:var(--mono);font-size:12.5px;color:var(--ink-2)} /* ── "what you need" / "why start locally" panels ──────────────────────────────────────────────────────────── */ .need{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:12px;margin-top:30px;text-align:left; list-style:none;padding:0} .need li{padding:15px 17px;border-radius:12px;background:var(--card);box-shadow:inset 0 0 0 1px var(--rule); color:var(--ink-2);font-size:14.8px;line-height:1.5;display:flex;gap:11px;align-items:flex-start} .need li::before{content:"";flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-top:7px} .need li b{color:var(--ink);font-weight:600} /* the stack list — what you define vs what the platform provides */ .stackl{list-style:none;margin:30px 0 0;padding:0;text-align:left;display:grid;gap:1px;background:var(--rule); border-radius:14px;overflow:hidden} .stackl li{background:var(--paper);padding:16px 20px;display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:baseline} .stackl b{color:var(--accent);font-weight:600;font-size:15.5px} .stackl span{color:var(--ink-2);font-size:15px;line-height:1.55} @media (max-width:640px){.stackl li{grid-template-columns:1fr;gap:5px}} /* an expandable full transcript, so step 4 stays short in the flow */ details.more-out{margin-top:12px} details.more-out summary{cursor:pointer;font-size:13.5px;color:var(--accent);font-weight:600;list-style:none} details.more-out summary::-webkit-details-marker{display:none} details.more-out summary::before{content:"▸ ";font-size:11px} details.more-out[open] summary::before{content:"▾ "} details.more-out .term{margin-top:12px} @media (max-width:860px){ .qgrid{grid-template-columns:1fr} } /* The samples table's first column is `white-space:nowrap` so a command never wraps mid-flag — which pushes the page 95px wider than a phone. Below 640px each row becomes two stacked blocks instead. Measured, not guessed: scrollWidth was 485 against a 390 viewport. */ @media (max-width:640px){ .samp, .samp tbody, .samp tr, .samp td{display:block;width:auto} .samp tr{border-top:1px solid var(--rule);padding:13px 0} .samp tr:first-child{border-top:0} .samp td{border-top:0;padding:0} .samp td:first-child{white-space:normal;overflow-wrap:anywhere;width:auto;margin-bottom:5px} } /* ── BETA: one message, no prices ─────────────────────────────────────────────────────────────────────────────── ⛔ NO FIGURE EVER REACHES THE MARKUP (owner, 2026-09-18: "we should not publish prices at this point in time"). A CSS blur is decoration, NOT redaction — a number left in the DOM is published the moment anyone opens devtools. The blurred placeholders that stood in for prices are gone too: the owner's second call the same day was that a tier table adds no value while nothing can be bought, so there is no longer a price-shaped hole to fill. What is left is this note, and it says the one thing that is true and actionable: it is free right now. */ .beta-note{display:flex;gap:12px;align-items:flex-start;max-width:62ch;margin:0 auto 34px;padding:15px 19px; border-radius:14px;background:var(--accent-wash);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 24%,transparent); text-align:left;color:var(--ink-2);font-size:15px;line-height:1.55;text-wrap:pretty} .beta-note b{color:var(--ink)} .beta-note::before{content:"";flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:var(--accent);margin-top:7px} /* ── /enterprise/ ─────────────────────────────────────────────────────────────────────────────────────────────── The org-governance story: two developer populations, and a boundary an app cannot widen. Sourced from the org design work on the `osysharp-harness` tree and the zone model on `osysharp-aos`; written present tense per the owner (SITE-27) because it is what enterprise buys when enterprise is sold. ⛔ The two-column `.pops` table IS the argument — org declares, apps consume and can never widen. Keep those two columns visibly unequal in authority; do not "balance" them into a feature comparison. */ .pops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);margin-top:clamp(34px,4vw,52px);text-align:left} .pops article{padding:clamp(20px,2.2vw,28px);border-radius:clamp(16px,1.8vw,22px);background:var(--card); box-shadow:inset 0 0 0 1px var(--rule)} .pops article.gov{background:var(--accent-wash);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 30%,transparent)} .pops .who{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin:0 0 9px} .pops article.gov .who{color:var(--accent)} .pops h3{font-size:clamp(19px,1.6vw,23px);margin:0 0 12px;letter-spacing:-.02em} .pops ul{margin:0;padding-left:19px;color:var(--ink-2);font-size:15.3px;line-height:1.6} .pops li + li{margin-top:7px} .pops li b{color:var(--ink);font-weight:600} @media (max-width:760px){ .pops{grid-template-columns:1fr} } /* the one-line consequence under it, set as a statement */ .consequence{max-width:54ch;margin:clamp(30px,3.4vw,44px) auto 0;font-size:clamp(19px,1.9vw,25px);line-height:1.4; letter-spacing:-.02em;color:var(--accent);text-wrap:balance;font-variation-settings:var(--display)} /* capability rows on the paper ground (the plans page's .ekit is for the dark sheet) */ .caps2{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:clamp(12px,1.4vw,18px); margin-top:clamp(34px,4vw,52px);text-align:left} .caps2 article{padding:clamp(19px,2vw,25px);border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1px var(--rule)} .caps2 h3{font-size:17.5px;font-weight:700;letter-spacing:-.015em;line-height:1.25;margin:0;color:var(--ink)} .caps2 p{margin:9px 0 0;font-size:15px;line-height:1.55;color:var(--ink-2)} .caps2 .src{display:block;margin-top:11px;font-family:var(--mono);font-size:11px;letter-spacing:.08em; text-transform:uppercase;color:var(--ink-3)} /* ── /enterprise/, second pass ────────────────────────────────────────────────────────────────────────────────── ⛔ THE PAGE'S DIFFERENTIATION IS AN ARCHITECTURAL IDEA, NOT A FEATURE LIST. Everything below exists to show a RELATIONSHIP — organisation → policy → application → agent → data — because isolated cards cannot. If a future edit turns any of this back into a three-up grid of capabilities, it has lost the argument. */ /* a core product statement, set as a statement. `.claim` on paper, `.claim.on-ink` on a dark sheet. */ .claim{max-width:26ch;margin:clamp(26px,3vw,40px) auto;font-size:clamp(23px,2.7vw,38px);line-height:1.18; letter-spacing:-.03em;color:var(--accent);text-wrap:balance;font-weight:800;font-variation-settings:var(--display)} .claim.on-ink{color:var(--accent-on-ink)} .claim.wide{max-width:34ch} /* four cards read as 2×2; auto-fit strands the fourth on its own row at 1440 */ .caps2.two{grid-template-columns:repeat(2,minmax(0,1fr))} @media (max-width:720px){ .caps2.two{grid-template-columns:1fr} } /* ── the security flow: one column, because it IS a sequence and a row of cards reads as alternatives ───────── */ .secflow{max-width:560px;margin:clamp(34px,4vw,52px) auto 0;text-align:left} .secflow .sf{position:relative;padding:17px 20px;border-radius:14px;background:var(--card); box-shadow:inset 0 0 0 1px var(--rule)} .secflow .sf + .sf{margin-top:34px} /* the connector, drawn in the gap rather than as a character so it scales with the gap */ .secflow .sf + .sf::before{content:"";position:absolute;left:50%;top:-34px;width:1.5px;height:34px; background:linear-gradient(var(--rule-2),var(--accent))} .secflow .sf + .sf::after{content:"";position:absolute;left:50%;top:-11px;width:7px;height:7px; transform:translateX(-50%) rotate(45deg);border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent)} .secflow .k{margin:0;font-size:16.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink)} .secflow .d{margin:6px 0 0;font-size:14.8px;line-height:1.55;color:var(--ink-2)} .secflow .sf.gate{background:var(--accent-wash);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 34%,transparent)} .secflow .sf.gate .k{color:var(--accent)} .secflow .sf.end{background:var(--sheet-ink);box-shadow:none} .secflow .sf.end .k{color:var(--on-ink)} .secflow .sf.end .d{color:var(--on-ink-2)} /* what it is NOT — the distinction the whole section turns on */ .notthis{max-width:560px;margin:22px auto 0;padding:14px 18px;border-radius:12px;text-align:left; border:1px dashed var(--rule-2);color:var(--ink-3);font-size:14.5px;line-height:1.55} .notthis b{color:var(--ink-2)} /* ── operations, grouped into four rather than listed as twelve ─────────────────────────────────────────────── */ .opsg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule); border-radius:16px;overflow:hidden;margin-top:clamp(32px,3.8vw,48px);text-align:left} .opsg article{background:var(--paper);padding:clamp(20px,2.2vw,28px)} .opsg h3{margin:0;font-size:12px;font-family:var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--accent)} .opsg p{margin:12px 0 0;font-size:15.5px;line-height:1.6;color:var(--ink-2)} @media (max-width:700px){ .opsg{grid-template-columns:1fr} } /* ── enterprise integrations ──────────────────────────────────────────────────────────────────────────────────── The argument is OWNERSHIP, not breadth — so the named kits are a compact strip and the reasoning carries the section. A future edit that grows this into a logo wall has swapped the argument for a catalogue. */ .kitg{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:var(--rule); border-radius:16px;overflow:hidden;margin-top:clamp(32px,3.8vw,48px);text-align:left} .kitg article{background:var(--paper);padding:clamp(18px,2vw,24px);display:flex;flex-direction:column} .kitg h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-.015em;color:var(--ink)} .kitg p{margin:8px 0 0;font-size:14.6px;line-height:1.55;color:var(--ink-2)} .kitg .pkg{display:block;margin-top:auto;padding-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.07em;color:var(--ink-3)} .kitg .pkg::after{content:" · MIT";color:var(--accent)} /* ── standalone vs organisation ───────────────────────────────────────────────────────────────────────────────── Two cards, one accented, because the point is a COMPARISON and a plain pair reads as two unrelated features. The accented side is what the enterprise licence buys; the plain side must never look diminished, because the whole argument is that it is not. */ .vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,18px); margin-top:clamp(34px,4vw,52px);text-align:left} .vs article{padding:clamp(20px,2.2vw,28px);border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1px var(--rule)} .vs article.org{background:var(--accent-wash);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 34%,transparent)} .vs h3{margin:0;font-size:12px;font-family:var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)} .vs article.org h3{color:var(--accent)} .vs .t{margin:11px 0 0;font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.3;color:var(--ink)} .vs p:not(.t){margin:9px 0 0;font-size:15.2px;line-height:1.6;color:var(--ink-2)} @media (max-width:720px){ .vs{grid-template-columns:1fr} } /* ── "why run your enterprise on Osyrin" — three arguments, as rows ────────────────────────────────────────────── ⛔ ROWS, NOT A THREE-UP. These are three steps of one argument (software got cheap → the estate needs a catalogue → an agent inside the catalogue must still be bound), and a card grid would read as three unrelated features — which is exactly the shape this page exists to avoid. Each row gets room for a real paragraph. */ .whyg{margin-top:clamp(40px,5vw,64px);text-align:left;display:grid;gap:1px;background:var(--rule); border-radius:18px;overflow:hidden} /* numeral · claim · argument — three columns, so the row uses the width the page gives it rather than leaving a third of every row empty. `display:contents` lifts the wrapper's children into the row's own grid. */ .whyg article{background:var(--paper);padding:clamp(24px,2.8vw,38px); display:grid;grid-template-columns:auto minmax(0,23ch) minmax(0,1fr);gap:clamp(16px,2.2vw,34px);align-items:start} .whyg article > div{display:contents} .whyg .n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--accent);padding-top:7px} .whyg h3{margin:0;font-size:clamp(20px,1.85vw,25px);font-weight:800;letter-spacing:-.03em;line-height:1.18; color:var(--ink);text-wrap:balance;font-variation-settings:var(--display)} .whyg p{margin:0;font-size:16.2px;line-height:1.62;color:var(--ink-2);text-wrap:pretty} .whyg p b{color:var(--ink)} @media (max-width:860px){ .whyg article{grid-template-columns:auto minmax(0,1fr)} .whyg h3{grid-column:2} .whyg p{grid-column:2;margin-top:12px} } @media (max-width:620px){ .whyg article{grid-template-columns:1fr;gap:10px} .whyg .n{padding-top:0} .whyg h3,.whyg p{grid-column:1} } /* ── /enterprise/, third pass: outcome → capability → proof ────────────────────────────────────────────────────── ⛔ THE PAGE'S ORDER IS THE ARGUMENT. Every section states the enterprise OUTCOME first, the platform capability second, and the mechanism last. A future edit that promotes a mechanism back to a headline has undone the revision — the old page led with "the boundary is compiled into the application", which is true, load-bearing, and answers a question the reader has not asked yet. */ /* the hero's capability strip — what this page is ABOUT, readable in one second */ .capstrip{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:clamp(30px,3.4vw,44px) auto 0;max-width:72ch} .capstrip span{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase; padding:7px 13px;border-radius:20px;color:var(--ink-2);background:var(--card);box-shadow:inset 0 0 0 1px var(--rule)} /* what the platform team controls — a list that reads as a boundary, not as six features */ .ctrl{margin-top:clamp(30px,3.4vw,44px);text-align:left;display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;background:var(--rule);border-radius:16px;overflow:hidden} .ctrl div{background:var(--paper);padding:clamp(17px,1.9vw,23px) clamp(19px,2.1vw,26px)} .tint .ctrl div{background:var(--card)} .ctrl b{display:block;font-size:16.5px;letter-spacing:-.01em;color:var(--ink)} .ctrl span{display:block;margin-top:5px;font-size:14.8px;line-height:1.5;color:var(--ink-2)} @media (max-width:700px){ .ctrl{grid-template-columns:1fr} } /* the systems, named — set in type rather than as logos, because we have no right to anyone's mark */ .srcs{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 26px; margin:clamp(26px,3vw,38px) auto 0;max-width:70ch} .srcs span{font-size:clamp(17px,1.7vw,22px);font-weight:700;letter-spacing:-.02em;color:var(--ink)} .ink .srcs span{color:var(--on-ink)} .srcs .sep{color:var(--rule-2);font-weight:400} .ink .srcs .sep{color:var(--on-ink-3)} /* a mechanism, demoted to proof: quieter than the claim above it, and explicitly labelled */ .proof{max-width:62ch;margin:clamp(24px,2.8vw,36px) auto 0;padding-top:clamp(20px,2.2vw,28px); border-top:1px solid var(--rule);text-align:left;font-size:15.2px;line-height:1.6;color:var(--ink-2)} .ink .proof{border-top-color:color-mix(in srgb,var(--on-ink) 16%,transparent);color:var(--on-ink-2)} .proof .lbl{display:block;margin-bottom:9px;font-family:var(--mono);font-size:11px;letter-spacing:.11em; text-transform:uppercase;color:var(--ink-3)} .ink .proof .lbl{color:var(--on-ink-3)} .proof b{color:var(--ink)} .ink .proof b{color:var(--on-ink)} /* ── /#how, third movement: the one model REACHES OUT ──────────────────────────────────────────────────────────── ⭐ The converge graphic said "many pieces become one model" and stopped there, which leaves the strongest thing Osyrin has as a footnote on another page. Brief: "not 'we integrate with things', but ONE APPLICATION MODEL THAT REACHES ACROSS YOUR EXISTING DATA" — and it runs BOTH WAYS, which is what makes it not a logo wall. ⛔ So the two-way arrow is not decoration. If a future edit drops it, the section is back to claiming a hook. */ .reach{margin-top:clamp(34px,4vw,54px);padding-top:clamp(26px,3vw,38px);border-top:1px solid var(--rule)} .reach figcaption{color:var(--accent)} .both{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;margin:0 auto 20px;max-width:420px} .both span{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap} .both .ln{position:relative;height:1.5px;background:linear-gradient(90deg,var(--accent),var(--rule-2),var(--accent))} .both .ln::before,.both .ln::after{content:"";position:absolute;top:-3px;width:7px;height:7px; transform:rotate(45deg);border-color:var(--accent)} .both .ln::before{left:0;border-left:1.5px solid;border-bottom:1.5px solid} .both .ln::after{right:0;border-right:1.5px solid;border-top:1.5px solid} .sysrow{display:flex;flex-wrap:wrap;justify-content:center;gap:8px} .sysrow span{font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink);background:var(--card); border-radius:999px;padding:8px 14px;box-shadow:inset 0 0 0 1px var(--rule)} .reachl{list-style:none;padding:0;margin:clamp(22px,2.6vw,32px) 0 0;display:grid;gap:13px;text-align:left} .reachl li{position:relative;padding-left:23px;font-size:15.2px;line-height:1.55;color:var(--ink-2)} .reachl li::before{content:"";position:absolute;left:1px;top:.46em;width:8px;height:8px;border-radius:50%; border:2px solid var(--accent)} .reachl b{color:var(--ink)}