@font-face { font-family: 'AlgoArt Marker'; src: url('../fonts/AlgoArt-Marker-Regular.woff2?v=kern-v2-20261010') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
.brand,.intro-copy h1,.intro-principles strong,.intro-systems span,.intro-actions button,.inspector-head strong,.section-title span,.mode-card strong,.ethos-toast strong,.stage-index strong,.description-head strong,.variations-head strong,.actions button,.actions .gallery-nav,.tab {font-family:'AlgoArt Marker',sans-serif;font-weight:400;font-style:normal;font-variant-ligatures:contextual;font-feature-settings:"calt" 1;font-kerning:normal;letter-spacing:0;}
.brand{font-size:30px;line-height:1;letter-spacing:0;}
.intro-copy h1{font-size:76px;line-height:1;letter-spacing:0;}
.intro-phi{font-family:'AlgoArt Marker',sans-serif;font-weight:400;letter-spacing:0;font-size:300px;}
.intro-principles strong{font-size:16px;line-height:1.2;}
.intro-principles>div{grid-template-columns:30px 180px 1fr;}
.intro-systems span{font-size:13px;}
.intro-actions button{font-size:16px;}
.inspector-head strong{font-size:19px;letter-spacing:0;}
.section-title span{font-size:18px;letter-spacing:0;}
.mode-card strong{font-size:13px;line-height:1.15;}
.actions button,.actions .gallery-nav{font-size:14px;letter-spacing:0;}
.tab{font-size:13px;letter-spacing:0;padding-left:3px;padding-right:3px;}
.description-head strong,.variations-head strong{font-size:13px;}
.stage-index strong{font-size:13px;line-height:1.2;}
@media(max-width:700px){.brand{font-size:23px;}.intro-copy h1{font-size:55px;}.intro-phi{font-size:130px;}.intro-principles>div{grid-template-columns:28px 1fr;}.intro-principles strong{font-size:18px;}.inspector-head strong{font-size:19px;}}

/* Keep the Greek symbol lowercase even where controls normally uppercase text. */
#geometry,#introReveal,.tab[data-tab="phi"]{text-transform:none;}
@media(max-width:820px){.brand{font-size:23px;}}
@media(max-width:390px){.brand{font-size:20px;}}

.brand-meta b,#statsText{ text-transform:none; }

@media(max-width:820px){.actions .gallery-nav{white-space:normal;text-align:center;line-height:1.05;}}

/* Match the base control selectors so their small-size rules cannot win. */
.actions #mutate,.actions #randomise,.actions #describe,.actions #variations,.actions #geometry,.actions .gallery-nav{font-size:14px;}
@media(max-width:1100px){.actions #mutate,.actions #randomise,.actions #describe,.actions #variations,.actions #geometry,.actions .gallery-nav{font-size:13px;}}

/* Allocate extra room to the longer labels at display size. */
@media(min-width:701px){.tabs{display:grid;grid-template-columns:1.25fr .65fr .8fr 1fr 1.15fr 1.15fr;}}

/* Give the action bar its own row before the desktop header becomes crowded. */
@media(min-width:821px) and (max-width:1250px){
  :root{--header:110px;}
  .toolbar{display:grid;grid-template-columns:230px minmax(0,1fr);grid-template-rows:48px 60px;}
  .brand-lockup{grid-column:1;grid-row:1;width:auto;min-width:0;}
  .formula-strip{display:none;}
  .seed{grid-column:2;grid-row:1;min-width:0;width:100%;border-right:0;}
  .actions{grid-column:1 / -1;grid-row:2;margin:0;width:100%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;padding:8px 9px;border-top:1px solid var(--ink);}
  .actions #mutate,.actions #randomise,.actions #describe,.actions #variations,.actions #geometry,.actions .gallery-nav{display:grid;place-items:center;width:100%;min-width:0;min-height:36px;padding:6px 4px;white-space:normal;text-align:center;line-height:1.15;}
}

/* Match ID selectors in the base stylesheet: tracking can suppress contextual shaping. */
.actions #mutate,.actions #randomise,.actions #describe,.actions #variations,.actions #geometry,.actions .gallery-nav{letter-spacing:0;font-feature-settings:"calt" 1;}
.tab span{letter-spacing:0;}