:root {
    /* Cohere's softness is a scale used consistently, not one radius on
       everything. --radius-xs is the inline chip step that hero.css,
       turn.css and typography.css were each approximating by hand.

       Biomorphic, read as a rule rather than a decoration: a form that GREW is
       asymmetric and a form that was CONSTRUCTED is not. So no corner on this
       site matches the corner opposite it. The disagreement is about a third of
       the step — enough that a surface reads as having settled into its place,
       small enough that nobody calls it a mistake. Every card, panel, aside,
       code block and slide part inherits it from here; nothing is treated
       locally, or the site would have one organic block and nineteen machined
       ones.

       The -turn variants are the same shape against the grain. Repeating cards
       alternate between the two, because eight identical asymmetric corners
       stop reading as growth and start reading as a skewed template. */
    --radius-xs: 8px 3px 7px 4px;
    --radius-sm: 16px 6px 13px 7px;
    --radius: 28px 10px 23px 12px;
    --radius-lg: 48px 16px 38px 20px;

    --radius-xs-turn: 3px 8px 4px 7px;
    --radius-sm-turn: 6px 16px 7px 13px;
    --radius-turn: 10px 28px 12px 23px;
    --radius-lg-turn: 16px 48px 20px 38px;

}


/* ------------------------------------------------- continuous curvature -- */

/* The deepest biomorphic property, and the one this site did not have.
   A border-radius corner is a quarter of a circle: the edge runs straight,
   curvature is zero, and then at a single point it jumps to its maximum. That
   join is a construction seam. Nothing that grew has one — in a living
   boundary the curvature builds gradually into the corner, peaks, and eases
   off again, so the whole perimeter is one continuous curve (G2 continuity,
   which a superellipse gives by construction because it is a single
   differentiable equation).

   It is also the form-level answer to looking generated. Every page a machine
   lays out uses a circular border-radius, because that is what the property
   does by default. Nobody reads a corner and thinks "superellipse"; they read
   the surface as softer and less machined and cannot say why, which is exactly
   what a subtle systemic move should do.

   Progressive enhancement: where corner-shape is unsupported the asymmetric
   radii already in place stand on their own. Applied to everything that has a
   radius rather than to a chosen few, because a rule that holds for some
   surfaces is a decoration and a rule that holds for all of them is a world. */
@supports (corner-shape: superellipse(2)) {
    [class] {
        corner-shape: superellipse(2.4);
    }

    /* A pill and a disc are already continuous; a superellipse would square
       them off. */
    .btn,
    .btn-control,
    .sigil,
    .mobile-menu-toggle,
    .portal-window,
    .slide-dot,
    .timeline-marker,
    .firefly,
    .memory-mood,
    .title-slide-world {
        corner-shape: round;
    }
}