/* ============================================================================
   AETHER — glass over a hypercube.
   A visionOS-grade material layer for the app: one living dimensional field
   behind everything, and every surface above it made of vibrant glass.
   Nothing here moves the layout; it changes what the layout is made of.
   ========================================================================== */

/* ===========================================================================
   TWO APPEARANCES.
   The toggle in the header has to actually move the whole app, so nothing
   below this comment ever names a colour: every surface, hairline, shadow,
   fill and label is a token, and these two blocks are the only place an
   appearance is decided.

   LIGHT is the app's own original scheme — warm paper (42 35% 88%) with the
   terracotta primary (15 75% 55%) — rebuilt in the same materials as dark.
   DARK is the Apple deep-ink appearance.
   ========================================================================= */

/* ------------------------------------------------ appearance-independent */
:root{
  /* ---- geometry */
  --r-card:22px; --r-ctl:13px; --r-field:14px; --r-pill:980px;
  /* ---- motion: one spring, three speeds */
  --sp:cubic-bezier(.32,.72,0,1);
  --t-fast:.18s; --t:.34s; --t-slow:.55s;
  --sans:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Inter Fallback", system-ui, sans-serif;
  --mono:"SF Mono", ui-monospace, "Geist Mono", SFMono-Regular, Menlo, monospace;
  --radius:.9rem;
  /* a filled tint carries white in both appearances, the way iOS does */
  --on-tint:#FFFFFF;
  --knob:#FFFFFF;
}

/* ================================================================== LIGHT ==
   Warm paper. The same glass, hairlines and springs as dark — but the film is
   white over a bright ground, the labels are the original warm near-black,
   and the shadows are warm and shallow because paper does not swallow light.
   ========================================================================= */
:root, html.light{
  /* ---- ground */
  --ink0:#E8E0CD; --ink1:#F1ECE2; --ink2:#F8F5EF;
  /* ---- Apple system colours, light appearance (darkened where they have to
         survive as ink on paper) */
  --blue:#007AFF; --indigo:#5856D6; --purple:#AF52DE; --pink:#E01B48; --red:#D70015;
  --orange:#C24E00; --yellow:#B07800; --green:#248A3D; --teal:#0071A4; --cyan:#0A7EA4;
  --tint:#D2542A;                                   /* the original primary, 15 75% 55% */
  --c:var(--tint);                                  /* the live mode colour */

  /* ---- labels */
  --label:#33241A;
  --label2:rgba(51,36,26,.66);
  --label3:rgba(51,36,26,.40);
  --label4:rgba(51,36,26,.20);

  /* ---- glass: light vibrancy — a white film over the paper, so a panel reads
     the same whatever passes behind it */
  --glass:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.56)), rgba(250,246,239,.60);
  --glass-2:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.74)), rgba(253,251,247,.70);
  --glass-3:rgba(255,255,255,.84);
  --hair:rgba(74,54,34,.16);
  --hair-2:rgba(74,54,34,.27);
  --blur:30px; --sat:180%;

  /* ---- neutral fills, the iOS fill ramp */
  --fill1:rgba(74,54,34,.045); --fill2:rgba(74,54,34,.08);
  --fill3:rgba(74,54,34,.12);  --fill4:rgba(74,54,34,.18);
  --sheen:rgba(255,255,255,.9);

  /* ---- light and shadow */
  --spec:inset 0 1px 0 rgba(255,255,255,.9);
  --inset-s:inset 0 1px 2px rgba(74,54,34,.15);
  --drop-s:0 1px 2px rgba(74,54,34,.16);
  --drop-m:0 2px 10px rgba(74,54,34,.17);
  --lift:0 1px 1px rgba(74,54,34,.10), 0 8px 28px rgba(74,54,34,.15);
  --lift-2:0 2px 4px rgba(74,54,34,.10), 0 18px 56px rgba(74,54,34,.19);

  /* ---- fields, scrollbars, the scrim over the field */
  /* On paper a translucent wash cannot carry white text, so a tinted ACTION
     becomes a solid fill and a tinted SELECTION keeps an ink label. */
  --act:linear-gradient(180deg, color-mix(in srgb,var(--c) 86%,white), var(--c));
  --act-h:linear-gradient(180deg, color-mix(in srgb,var(--c) 96%,white), color-mix(in srgb,var(--c) 90%,black));
  --act-sel:linear-gradient(180deg, color-mix(in srgb,var(--c) 86%,white), var(--c));
  --on-act:#FFFFFF;
  --on-wash:color-mix(in srgb, var(--c, var(--tint)) 34%, #2A1F16);
  --rail:rgba(252,249,243,.72);                     /* the sidebar */
  --veil:rgba(250,246,239,.62);                     /* the sheet the rail sits on */
  --pop:rgba(252,250,245,.88);                      /* popovers, menus, tooltips */
  --field:rgba(255,255,255,.60);
  --field-f:rgba(255,255,255,.92);
  --sh:74,54,34;                                    /* every shadow is mixed from this */
  --glass-nav:linear-gradient(180deg,rgba(255,255,255,.90),rgba(255,255,255,.66)), rgba(250,247,241,.66);
  --label-body:color-mix(in srgb, var(--label) 90%, transparent);
  --scroll:rgba(74,54,34,.26); --scroll-h:rgba(74,54,34,.42);
  --scrim:
    radial-gradient(120% 90% at 50% 42%, transparent 40%, rgba(216,204,180,.58) 100%),
    linear-gradient(180deg, rgba(228,219,201,.62) 0%, transparent 17%, transparent 83%, rgba(220,209,188,.70) 100%);

  /* ---- shadcn tokens: his originals, kept, with the hairlines softened */
  --background:42 35% 88%;      --foreground:25 35% 15%;
  --card:42 30% 92%;            --card-foreground:25 35% 15%;
  --popover:42 30% 94%;         --popover-foreground:25 35% 15%;
  --primary:15 72% 49%;         --primary-foreground:0 0% 100%;
  --secondary:25 65% 60%;       --secondary-foreground:25 35% 15%;
  --muted:42 25% 82%;           --muted-foreground:25 22% 40%;
  --accent:42 25% 82%;          --accent-foreground:25 35% 15%;
  --destructive:0 84% 48%;      --destructive-foreground:0 0% 100%;
  --border:42 18% 68%;          --input:42 20% 72%;  --ring:15 72% 49%;
  --chart-1:15 72% 49%; --chart-2:173 58% 33%; --chart-3:197 40% 32%; --chart-4:43 74% 40%; --chart-5:27 82% 44%;
  --cyber-primary:15 72% 49%; --cyber-secondary:25 60% 46%; --cyber-accent:42 40% 42%;
  --cyber-glow:15 75% 55%; --cyber-surface:42 35% 88%; --cyber-glass:42 30% 92%/0.8;
  --neon-cyan:#0A7EA4; --neon-yellow:#B07800; --neon-green:#248A3D; --neon-blue:#007AFF; --neon-purple:#AF52DE;
  --sidebar-background:42 30% 90%; --sidebar-foreground:25 35% 15%; --sidebar-primary:15 72% 49%;
  --sidebar-primary-foreground:0 0% 100%; --sidebar-accent:25 35% 15%; --sidebar-accent-foreground:25 35% 15%;
  --sidebar-border:42 18% 68%; --sidebar-ring:15 72% 49%;
  color-scheme: light;
}

/* =================================================================== DARK ==
   Deep ink. A dark vibrancy material: a white film over a dark base.
   ========================================================================= */
html.dark, :root.dark, html:not(.dark) .dark{
  /* ---- ground */
  --ink0:#05060A; --ink1:#080A11; --ink2:#0E111A;
  /* ---- Apple system colours, dark appearance */
  --blue:#0A84FF; --indigo:#5E5CE6; --purple:#BF5AF2; --pink:#FF375F; --red:#FF453A;
  --orange:#FF9F0A; --yellow:#FFD60A; --green:#30D158; --teal:#40CBE0; --cyan:#64D2FF;
  --tint:var(--blue);
  --c:var(--tint);                                  /* the live mode colour */

  /* ---- labels */
  --label:#FFFFFF;
  --label2:rgba(235,235,245,.62);
  --label3:rgba(235,235,245,.35);
  --label4:rgba(235,235,245,.20);

  /* ---- glass */
  --glass:linear-gradient(180deg,rgba(255,255,255,.072),rgba(255,255,255,.022)), rgba(15,18,26,.56);
  --glass-2:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04)), rgba(19,23,32,.62);
  --glass-3:rgba(255,255,255,.13);
  --hair:rgba(255,255,255,.09);
  --hair-2:rgba(255,255,255,.14);
  --blur:30px; --sat:170%;

  /* ---- neutral fills */
  --fill1:rgba(255,255,255,.06); --fill2:rgba(255,255,255,.09);
  --fill3:rgba(255,255,255,.14); --fill4:rgba(255,255,255,.20);
  --sheen:rgba(255,255,255,.34);

  /* ---- light and shadow */
  --spec:inset 0 1px 0 rgba(255,255,255,.14);
  --inset-s:inset 0 1px 2px rgba(0,0,0,.28);
  --drop-s:0 1px 2px rgba(0,0,0,.30);
  --drop-m:0 2px 10px rgba(0,0,0,.30);
  --lift:0 1px 1px rgba(0,0,0,.28), 0 8px 28px rgba(0,0,0,.34);
  --lift-2:0 2px 4px rgba(0,0,0,.3), 0 18px 56px rgba(0,0,0,.46);

  /* ---- fields, scrollbars, the scrim over the field */
  --act:color-mix(in srgb, var(--c) 17%, var(--fill1));
  --act-h:color-mix(in srgb, var(--c) 28%, var(--fill1));
  --act-sel:color-mix(in srgb, var(--c) 20%, var(--fill1));
  --on-act:#FFFFFF;
  --on-wash:#FFFFFF;
  --rail:rgba(10,12,17,.55);                        /* the sidebar */
  --veil:rgba(12,14,20,.55);                        /* the sheet the rail sits on */
  --pop:rgba(16,18,26,.72);                         /* popovers, menus, tooltips */
  --field:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)), rgba(10,12,18,.5);
  --field-f:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)), rgba(12,15,22,.55);
  --sh:0,0,0;                                       /* every shadow is mixed from this */
  --glass-nav:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.035)), rgba(16,19,27,.66);
  --label-body:rgba(235,235,245,.86);
  --scroll:rgba(235,235,245,.18); --scroll-h:rgba(235,235,245,.32);
  --scrim:
    radial-gradient(120% 90% at 50% 42%, transparent 38%, rgba(4,5,9,.55) 100%),
    linear-gradient(180deg, rgba(5,6,10,.5) 0%, transparent 16%, transparent 84%, rgba(5,6,10,.6) 100%);

  /* ---- shadcn tokens, re-pointed */
  --background:225 33% 3%;      --foreground:0 0% 100%;
  --card:225 20% 8%;            --card-foreground:0 0% 100%;
  --popover:225 20% 9%;         --popover-foreground:0 0% 100%;
  --primary:211 100% 52%;       --primary-foreground:0 0% 100%;
  --secondary:283 85% 65%;      --secondary-foreground:0 0% 100%;
  --muted:225 12% 16%;          --muted-foreground:240 6% 65%;
  --accent:225 14% 18%;         --accent-foreground:0 0% 100%;
  --destructive:3 100% 61%;     --destructive-foreground:0 0% 100%;
  --border:0 0% 100%;           --input:0 0% 100%;  --ring:211 100% 52%;
  --chart-1:211 100% 52%; --chart-2:283 85% 65%; --chart-3:145 63% 51%; --chart-4:38 100% 52%; --chart-5:349 100% 61%;
  --cyber-primary:211 100% 52%; --cyber-secondary:283 85% 65%; --cyber-accent:145 63% 51%;
  --cyber-glow:211 100% 52%; --cyber-surface:225 33% 3%; --cyber-glass:225 20% 8%/0.6;
  --neon-cyan:#64D2FF; --neon-yellow:#FFD60A; --neon-green:#30D158; --neon-blue:#0A84FF; --neon-purple:#BF5AF2;
  --sidebar-background:0 0% 0%; --sidebar-foreground:0 0% 100%; --sidebar-primary:211 100% 52%;
  --sidebar-primary-foreground:0 0% 100%; --sidebar-accent:0 0% 100%; --sidebar-accent-foreground:0 0% 100%;
  --sidebar-border:0 0% 100%; --sidebar-ring:211 100% 52%;
  color-scheme: dark;
}

/* --------------------------------------------------------------- the field */
html, html body{ background:var(--ink0); color:var(--label); }
html body{ font-family:var(--sans); -webkit-font-smoothing:antialiased; letter-spacing:-.011em; }

/* the hypercube lives here, behind everything */
#aether-gl{
  position:fixed; inset:0; width:100vw; height:100vh; height:100dvh; display:block;
  z-index:0; opacity:0; transition:opacity 1.4s ease; background:var(--ink0);
}
#aether-gl.on{ opacity:1; }
html[data-aether-room="platform"] #aether-gl.on{ opacity:.42; }
html[data-aether-room="platform"] #aether-readout{ display:none; }
/* one scrim over the field so glass and type always sit on something calm */
#aether-scrim{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
var(--scrim);
}
/* everything the app draws floats above the field */
html body > div:not([id]){ position:relative; z-index:2; }
html body, html .viewport-container, html main, html [class*="bg-background"]:not(input):not(textarea),
html [class*="bg-black"]{ background-color:transparent!important; }
html main{ background:transparent!important; }

::selection{ background:color-mix(in srgb, var(--tint) 45%, transparent); }
html :focus-visible{ outline:none; box-shadow:0 0 0 4px color-mix(in srgb,var(--tint) 32%,transparent)!important; border-radius:10px; }

/* scrollbars, macOS overlay style */
html *::-webkit-scrollbar{ width:9px; height:9px; }
html *::-webkit-scrollbar-track{ background:transparent; }
html *::-webkit-scrollbar-thumb{ background:var(--scroll); border-radius:99px; border:2px solid transparent; background-clip:content-box; }
html *::-webkit-scrollbar-thumb:hover{ background:var(--scroll-h); background-clip:content-box; }
html .minimal-scrollbar{ scrollbar-width:thin; scrollbar-color:var(--scroll) transparent; }

/* the app zeroes every element's bottom padding with !important; give it back */
html div[class~="p-2"]{padding-bottom:.5rem!important} html div[class~="p-3"]{padding-bottom:.75rem!important}
html div[class~="p-4"],html section[class~="p-4"],html form[class~="p-4"],html li[class~="p-4"]{padding-bottom:1rem!important}
html div[class~="p-5"]{padding-bottom:1.25rem!important} html div[class~="p-6"],html section[class~="p-6"]{padding-bottom:1.5rem!important}
html div[class~="p-8"]{padding-bottom:2rem!important}
html div[class~="py-2"]{padding-bottom:.5rem!important} html div[class~="py-3"]{padding-bottom:.75rem!important}
html div[class~="py-4"]{padding-bottom:1rem!important} html div[class~="py-6"]{padding-bottom:1.5rem!important}
html div[class~="pb-2"]{padding-bottom:.5rem!important} html div[class~="pb-3"]{padding-bottom:.75rem!important}
html div[class~="pb-4"]{padding-bottom:1rem!important} html div[class~="pb-6"]{padding-bottom:1.5rem!important}

/* ------------------------------------------------------------------- type */
html h1, html h2, html h3, html h4,
html [class*="text-2xl"], html [class*="text-3xl"], html [class*="text-4xl"], html [class*="text-5xl"]{
  font-family:var(--sans); font-weight:600; letter-spacing:-.026em; line-height:1.08; color:var(--label);
}
html [class*="text-4xl"], html [class*="text-5xl"]{ letter-spacing:-.034em; font-weight:700; }
html h1[class*="text-lg"], html [class*="text-lg"][class*="font-semibold"]{ letter-spacing:-.016em; line-height:1.25; }
html p, html li, html span, html div{ letter-spacing:inherit; }
html [class*="text-muted-foreground"], html [class*="text-slate-400"], html [class*="text-slate-500"]{ color:var(--label2)!important; }
html code, html pre, html kbd, html [class*="font-mono"]{ font-family:var(--mono); letter-spacing:0; }
html [class*="text-3xl"][class*="font-bold"], html [class*="text-4xl"][class*="font-bold"], html [class*="tabular"]{
  font-variant-numeric:tabular-nums; letter-spacing:-.03em;
}

/* --------------------------------------------------------------- material */
/* glass: the one surface this app is made of */
html [class~="bg-card"], html [class*="bg-slate-900"], html [class*="bg-slate-800"], html [class*="bg-gray-900"],
html [class*="bg-gray-800"], html [class*="bg-zinc-900"], html [class~="bg-popover"], html [class~="bg-muted"],
html .neon-card, html [data-aether="glass"]{
  background:var(--glass)!important;
  -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat));
  backdrop-filter:blur(var(--blur)) saturate(var(--sat));
  border:1px solid var(--hair)!important;
  border-radius:var(--r-card);
  box-shadow:var(--lift), var(--spec);
  position:relative;
  transition:background var(--t) var(--sp), box-shadow var(--t) var(--sp), transform var(--t) var(--sp), border-color var(--t) var(--sp);
}
html .neon-card:hover, html [class~="bg-card"]:hover{
  background:var(--glass-2)!important; border-color:var(--hair-2)!important;
  box-shadow:var(--lift-2), var(--spec); transform:translateY(-2px);
}
/* colour is a soft glow at the top edge of the card, never a painted panel */
html .neon-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(120% 80% at 50% -20%, color-mix(in srgb,var(--c) 22%,transparent), transparent 62%);
  opacity:.7; transition:opacity var(--t) var(--sp);
}
html .neon-card:hover::before{ opacity:1; }
html .neon-card > *{ position:relative; }
html .neon-heading{ font-family:var(--sans); font-weight:600; letter-spacing:-.022em; color:var(--label)!important; }

/* fields: recessed vibrancy */
html input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
html textarea, html select, html [data-aether="field"]{
  background:var(--field)!important;
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--hair)!important; border-radius:var(--r-field);
  color:var(--label); box-shadow:inset 0 1px 2px rgba(var(--sh),.28);
  transition:border-color var(--t) var(--sp), box-shadow var(--t) var(--sp), background var(--t) var(--sp);
}
html input::placeholder, html textarea::placeholder{ color:var(--label3); }
html input:focus, html textarea:focus, html select:focus{
  outline:none; background:var(--field-f)!important;
  border-color:color-mix(in srgb,var(--tint) 60%,transparent)!important;
  box-shadow:inset 0 1px 2px rgba(var(--sh),.24), 0 0 0 4px color-mix(in srgb,var(--tint) 22%,transparent);
}

/* controls: glass keys */
html button[class*="border-input"], html a[class*="border-input"], html [role="combobox"], html select,
html button[class~="bg-secondary"], html [data-aether="key"]{
  background:var(--glass)!important;
  -webkit-backdrop-filter:blur(20px) saturate(var(--sat)); backdrop-filter:blur(20px) saturate(var(--sat));
  border:1px solid var(--hair)!important; border-radius:var(--r-ctl); color:var(--label);
  box-shadow:var(--spec), 0 1px 2px rgba(var(--sh),.3); font-weight:500;
  transition:background var(--t-fast) var(--sp), transform var(--t-fast) var(--sp), border-color var(--t-fast) var(--sp);
}
html button[class*="border-input"]:hover, html a[class*="border-input"]:hover, html [role="combobox"]:hover{
  background:var(--glass-2)!important; border-color:var(--hair-2)!important;
}
html button[class*="border-input"]:active, html a[class*="border-input"]:active{ transform:scale(.97); }

/* the filled action, iOS style */
html button[class*="bg-primary"]:not([class*="bg-gradient-to"]), html a[class*="bg-primary"]:not([class*="bg-gradient-to"]),
html [role="button"][class*="bg-primary"]:not([class*="bg-gradient-to"]), html [data-aether="cta"]{
  background:linear-gradient(180deg, color-mix(in srgb,var(--tint) 92%,white), var(--tint))!important;
  color:var(--on-tint)!important; border:0!important; border-radius:var(--r-ctl); font-weight:590;
  box-shadow:0 1px 1px rgba(var(--sh),.2), 0 6px 20px color-mix(in srgb,var(--tint) 34%,transparent), inset 0 1px 0 rgba(255,255,255,.28);
  transition:filter var(--t-fast) var(--sp), transform var(--t-fast) var(--sp), box-shadow var(--t) var(--sp);
}
html button[class*="bg-primary"]:hover, html a[class*="bg-primary"]:hover{ filter:brightness(1.08); box-shadow:0 1px 1px rgba(var(--sh),.2), 0 10px 30px color-mix(in srgb,var(--tint) 46%,transparent), inset 0 1px 0 rgba(255,255,255,.3); }
html button[class*="bg-primary"]:active, html a[class*="bg-primary"]:active{ transform:scale(.96); }
html button[class*="bg-primary"]:disabled{ filter:saturate(.2) brightness(.7); box-shadow:none; }

/* ghost / icon buttons */
html button[class*="hover:bg-accent"]:not([class*="border-input"]):not([class*="bg-primary"]):not([class*="h-32"]){
  color:var(--label2); border-radius:10px;
  transition:background var(--t-fast) var(--sp), color var(--t-fast) var(--sp), transform var(--t-fast) var(--sp);
}
html button[class*="hover:bg-accent"]:not([class*="border-input"]):not([class*="bg-primary"]):hover{
  color:var(--label); background:var(--fill2);
}
html button:active:not([class*="h-32"]){ transform:scale(.96); }

/* badges: soft tinted capsules */
html [class~="rounded-full"][class~="border"][class*="px-"]:not([class*="absolute"]):not([class*="h-2"]):not([class*="h-3"]):not([class*="w-2"]):not([class*="w-3"]),
html [data-aether="badge"]{
  background:color-mix(in srgb, var(--c) 16%, transparent)!important;
  border:1px solid color-mix(in srgb, var(--c) 26%, transparent)!important;
  color:var(--c)!important; border-radius:var(--r-pill);
  font-size:11.5px; font-weight:590; letter-spacing:-.005em; padding:3px 9px;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
/* status dots glow */
html [class~="rounded-full"][class~="h-2"], html [class~="rounded-full"][class~="h-3"],
html [class~="rounded-full"][class~="w-2"], html [class~="rounded-full"][class~="w-3"],
html [class~="rounded-full"][class~="h-1.5"]{ box-shadow:0 0 10px currentColor, 0 0 22px -4px currentColor; }

html [class~="border-t"], html [class~="border-b"], html [class~="border-r"], html [class~="border-l"],
html [role="separator"], html hr{ border-color:var(--hair)!important; }

/* ----------------------------------------------------------- app chrome */
/* the toolbar: macOS vibrancy with a hairline under it */
html [class*="bg-background/95"], html [class*="bg-background\\/95"]{
  background:var(--veil)!important;
  -webkit-backdrop-filter:blur(30px) saturate(180%); backdrop-filter:blur(30px) saturate(180%);
  box-shadow:0 1px 0 var(--hair); position:relative; z-index:6;
}
html button[title="Return to Welcome Screen"]{
  width:40px; height:40px; border-radius:12px; overflow:hidden; flex:none; display:grid; place-items:center;
  background:var(--glass); border:1px solid var(--hair); box-shadow:var(--spec);
  transition:transform var(--t-fast) var(--sp), background var(--t-fast) var(--sp);
}
html button[title="Return to Welcome Screen"]:hover{ background:var(--glass-2); transform:scale(1.04); }
html button[title="Return to Welcome Screen"] > div{ width:100%; height:100%; display:grid; place-items:center; }
html button[title="Return to Welcome Screen"] img{ width:30px; height:30px; object-fit:contain; }
html h1[class~="text-lg"]{ font-size:16px; font-weight:600; letter-spacing:-.018em; }
html h1[class~="text-lg"] + p{ font-size:12.5px; color:var(--label3); margin-top:1px; letter-spacing:-.008em; }

/* the rail */
html [data-sidebar="sidebar"]{
  background:var(--rail)!important;
  -webkit-backdrop-filter:blur(34px) saturate(180%); backdrop-filter:blur(34px) saturate(180%);
  box-shadow:1px 0 0 var(--hair);
}
html [data-sidebar="header"]{ box-shadow:0 1px 0 var(--hair); }
html [data-sidebar="footer"]{ box-shadow:0 -1px 0 var(--hair); }
html [data-sidebar="group-label"]{ font-size:11.5px; font-weight:590; letter-spacing:-.005em; color:var(--label3); text-transform:none; }
html [data-sidebar="menu-button"], html a[class*="ring-sidebar-ring"]{
  border-radius:10px; color:var(--label2); font-weight:500;
  transition:background var(--t-fast) var(--sp), color var(--t-fast) var(--sp);
}
html [data-sidebar="menu-button"]:hover, html a[class*="ring-sidebar-ring"]:hover{ color:var(--label); background:var(--fill2); }
html [data-sidebar="menu-button"][data-active="true"], html a[class*="ring-sidebar-ring"][data-active="true"]{
  background:color-mix(in srgb,var(--tint) 22%,transparent)!important; color:var(--on-wash)!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tint) 30%,transparent);
}

/* tabs: an iOS segmented control */
html [role="tablist"]{
  background:var(--fill1); border-radius:11px; padding:3px; gap:2px;
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); border:1px solid var(--hair);
}
html [role="tab"]{
  border-radius:9px; font-size:13px; font-weight:560; letter-spacing:-.01em; color:var(--label2);
  background:transparent; border:0; box-shadow:none; text-transform:none;
  transition:background var(--t) var(--sp), color var(--t) var(--sp);
}
html [role="tab"][data-state="active"]{ background:var(--fill3); color:var(--label); box-shadow:0 1px 2px rgba(var(--sh),.3), var(--spec); }

/* sheets and popovers float */
html [role="dialog"], html [data-radix-popper-content-wrapper] > *{
  background:var(--pop)!important;
  -webkit-backdrop-filter:blur(40px) saturate(180%); backdrop-filter:blur(40px) saturate(180%);
  border:1px solid var(--hair-2)!important; border-radius:20px; box-shadow:var(--lift-2)!important;
}

/* ==================== THE CHAT ==================== */
/* the app's own wireframe is retired: the field behind the page is the object now */
html main canvas{ opacity:0!important; }

html h2[class*="text-amber"], html h2[class*="dark:text-amber"]{
  color:var(--label); font-size:clamp(21px,2.2vw,28px); font-weight:600; letter-spacing:-.026em;
}
/* the five dimensions, as glass keys */
html button[class~="h-32"][class*="flex-col"]{
  background:var(--glass)!important; border:1px solid var(--hair)!important; border-radius:20px;
  color:var(--label2); box-shadow:var(--lift), var(--spec); position:relative; overflow:hidden;
  -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat)); backdrop-filter:blur(var(--blur)) saturate(var(--sat));
  transition:transform var(--t) var(--sp), background var(--t) var(--sp), border-color var(--t) var(--sp), box-shadow var(--t) var(--sp);
}
html button[class~="h-32"][class*="flex-col"]::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(120% 90% at 50% -25%, color-mix(in srgb,var(--c) 34%,transparent), transparent 60%);
  opacity:.55; transition:opacity var(--t) var(--sp);
}
html button[class~="h-32"][class*="flex-col"]:hover{
  transform:translateY(-4px) scale(1.015); background:var(--glass-2)!important; border-color:var(--hair-2)!important;
  box-shadow:var(--lift-2), var(--spec); color:var(--label);
}
html button[class~="h-32"][class*="flex-col"]:hover::before{ opacity:.9; }
html button[class~="h-32"][class*="flex-col"]:active{ transform:scale(.985); }
html button[class~="h-32"][class*="flex-col"] svg{
  color:var(--c); width:27px; height:27px; margin-bottom:10px;
  filter:drop-shadow(0 0 14px color-mix(in srgb,var(--c) 55%,transparent));
}
html button[class~="h-32"][class*="flex-col"] > div:first-of-type{ font-size:17px; font-weight:590; letter-spacing:-.018em; color:var(--label); }
html button[class~="h-32"][class*="flex-col"] > div:last-child{ font-size:12.5px; font-weight:400; letter-spacing:-.006em; color:var(--label3); opacity:1; margin-top:6px; text-transform:none; }
html button[class~="h-32"][class*="text-blue"],   html button[class~="h-32"][class*="bg-blue"]   { --c:var(--blue); }
html button[class~="h-32"][class*="text-purple"], html button[class~="h-32"][class*="bg-purple"] { --c:var(--purple); }
html button[class~="h-32"][class*="text-emerald"],html button[class~="h-32"][class*="bg-emerald"]{ --c:var(--green); }
html button[class~="h-32"][class*="text-orange"], html button[class~="h-32"][class*="bg-orange"] { --c:var(--orange); }
html button[class~="h-32"][class*="text-red"],    html button[class~="h-32"][class*="bg-red"]    { --c:var(--pink); }
/* the selected dimension is lit from inside */
html button[class~="h-32"][class*="bg-blue-500"], html button[class~="h-32"][class*="bg-purple-500"],
html button[class~="h-32"][class*="bg-emerald-500"], html button[class~="h-32"][class*="bg-orange-500"],
html button[class~="h-32"][class*="bg-red-500"], html button[class~="h-32"][class*="shadow-lg"]{
  background:var(--act-sel)!important; color:var(--on-act)!important;
  border-color:color-mix(in srgb, var(--c) 52%, transparent)!important;
  box-shadow:var(--lift-2), var(--spec), 0 0 34px -6px color-mix(in srgb,var(--c) 60%,transparent);
}
html button[class~="h-32"][class*="bg-blue-500"]::before, html button[class~="h-32"][class*="bg-purple-500"]::before,
html button[class~="h-32"][class*="bg-emerald-500"]::before, html button[class~="h-32"][class*="bg-orange-500"]::before,
html button[class~="h-32"][class*="bg-red-500"]::before, html button[class~="h-32"][class*="shadow-lg"]::before{ opacity:1; }

/* the console */
html form textarea[class*="min-h-[60px]"]{
  min-height:56px; padding:16px 86px 16px 18px; font-size:16px; line-height:1.45; border-radius:20px;
}
html button[class*="min-h-[60px]"]{ min-height:56px; border-radius:16px; font-weight:500; }
html button[class*="min-h-[60px]"] span{ font-size:12.5px; letter-spacing:-.006em; text-transform:none; }
html button[title="Generate Image"]{
  background:var(--glass)!important; border:1px solid var(--hair)!important; border-radius:var(--r-pill);
  color:var(--label2)!important; font-size:0; box-shadow:var(--spec);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
html button[title="Generate Image"]::after{ content:""; display:block; width:7px; height:7px; border-radius:50%; background:var(--orange); box-shadow:0 0 10px var(--orange); }
html form button[type="submit"]{ border-radius:var(--r-pill)!important; }
html span[class*="text-green-700"], html span[class*="dark:text-green-400"]{
  font-size:13px; font-weight:500; letter-spacing:-.008em; color:var(--green); text-transform:none;
}
html [class*="text-muted-foreground"] span[class~="capitalize"]{ color:var(--c); font-weight:590; }

/* the conversation */
html div[class*="max-w-[60%]"][class*="bg-primary"]{
  background:linear-gradient(180deg, color-mix(in srgb,var(--blue) 92%,white), var(--blue))!important;
  color:var(--on-tint)!important; border-radius:20px!important; padding:11px 16px!important;
  box-shadow:0 2px 10px color-mix(in srgb,var(--blue) 30%,transparent), inset 0 1px 0 rgba(255,255,255,.22);
}
html div[class*="max-w-[95%]"]{
  background:var(--glass)!important; border:1px solid var(--hair); border-radius:22px!important;
  padding:16px 20px 18px!important; box-shadow:var(--lift), var(--spec);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat)); backdrop-filter:blur(var(--blur)) saturate(var(--sat));
}
html p[class*="whitespace-pre-wrap"]{ font-size:15.5px; line-height:1.5; letter-spacing:-.011em; color:var(--label); }
html div[class*="max-w-[95%]"] p[class*="whitespace-pre-wrap"]{ color:var(--label-body); }
html span[class*="rounded-full"][class*="h-8"][class*="w-8"] > span{
  background:var(--glass)!important; color:var(--label2)!important;
  border:1px solid var(--hair); box-shadow:var(--spec); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
html div[class*="flex-row-reverse"] span[class*="rounded-full"] > span{
  background:color-mix(in srgb,var(--blue) 26%,transparent)!important; color:var(--on-wash)!important;
  border-color:color-mix(in srgb,var(--blue) 40%,transparent);
}
html [data-orientation="vertical"] > h3 > button{ font-size:13px; font-weight:500; letter-spacing:-.01em; color:var(--label2); text-transform:none; }
html [data-orientation="vertical"] > h3 > button:hover{ color:var(--label); }

/* ==================== THE PLATFORM ==================== */
html [class*="from-blue"], html [class*="text-blue"], html [class*="bg-blue"], html [class*="from-sky"], html [class*="from-indigo"]{ --c:var(--blue); }
html [class*="from-cyan"], html [class*="text-cyan"], html [class*="bg-cyan"]{ --c:var(--cyan); }
html [class*="from-emerald"], html [class*="from-green"], html [class*="from-teal"], html [class*="text-emerald"], html [class*="text-green"], html [class*="bg-emerald"], html [class*="bg-green"]{ --c:var(--green); }
html [class*="from-purple"], html [class*="from-violet"], html [class*="text-purple"], html [class*="text-violet"], html [class*="bg-purple"], html [class*="bg-violet"]{ --c:var(--purple); }
html [class*="from-orange"], html [class*="from-amber"], html [class*="text-orange"], html [class*="text-amber"], html [class*="bg-orange"]{ --c:var(--orange); }
html [class*="from-red"], html [class*="from-rose"], html [class*="from-pink"], html [class*="text-red"], html [class*="text-rose"], html [class*="bg-red"]{ --c:var(--pink); }

html [class*="bg-clip-text"]{ background-image:none!important; background:none!important; -webkit-text-fill-color:currentColor!important; color:var(--label)!important; }

/* tinted glass actions keep their meaning without the plastic gradient */
html a[class*="bg-gradient-to"]:not([class*="h-12"][class*="w-12"]):not([class*="h-10"][class*="w-10"]),
html button[class*="bg-gradient-to"]:not([class*="h-12"][class*="w-12"]):not([class*="h-10"][class*="w-10"]){
  background:var(--act)!important;
  border:1px solid color-mix(in srgb, var(--c) 30%, transparent)!important;
  color:var(--on-act)!important; border-radius:var(--r-ctl); font-weight:560; text-transform:none;
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  box-shadow:var(--spec), 0 2px 10px rgba(var(--sh),.28);
  transition:background var(--t-fast) var(--sp), transform var(--t-fast) var(--sp), box-shadow var(--t) var(--sp);
}
html a[class*="bg-gradient-to"]:hover, html button[class*="bg-gradient-to"]:hover{
  background:var(--act-h)!important;
  box-shadow:var(--spec), 0 8px 26px -6px color-mix(in srgb,var(--c) 55%,transparent);
}
html a[class*="bg-gradient-to"]:active, html button[class*="bg-gradient-to"]:active{ transform:scale(.97); }
/* app icons keep the Apple squircle-tile feel */
html [class*="h-12"][class*="w-12"][class*="bg-gradient-to"], html [class*="h-10"][class*="w-10"][class*="bg-gradient-to"]{
  background:linear-gradient(180deg, color-mix(in srgb,var(--c) 88%,white), var(--c))!important;
  border-radius:14px; box-shadow:0 6px 18px -4px color-mix(in srgb,var(--c) 50%,transparent), inset 0 1px 0 rgba(255,255,255,.3);
}
html [class*="h-12"][class*="w-12"][class*="bg-gradient-to"] svg, html [class*="h-10"][class*="w-10"][class*="bg-gradient-to"] svg{ color:var(--on-tint)!important; }
html .neon-card [class*="text-3xl"], html .neon-card [class*="text-4xl"]{ font-variant-numeric:tabular-nums; letter-spacing:-.032em; color:var(--label); font-weight:600; }
html .neon-card p[class*="text-sm"][class*="font-medium"]{ font-size:13px; font-weight:500; letter-spacing:-.008em; color:var(--label2); text-transform:none; }
html .instrument-grid-overlay{ opacity:.18; }

/* ---------------------------------------------------- failure and emptiness */
html div[class~="container"][class~="text-red-500"], html div[class~="container"][class~="text-destructive"]{
  max-width:620px; margin:96px auto; padding:26px 28px 28px; position:relative;
  background:var(--glass); border:1px solid var(--hair); border-radius:var(--r-card); box-shadow:var(--lift), var(--spec);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat)); backdrop-filter:blur(var(--blur)) saturate(var(--sat));
  color:var(--label3)!important; font-family:var(--mono); font-size:12px; line-height:1.6;
}
html div[class~="container"][class~="text-red-500"]::before{
  content:"Can’t reach the training backend"; display:block; margin-bottom:10px;
  font-family:var(--sans); font-size:19px; font-weight:600; letter-spacing:-.022em; color:var(--label);
}
html div[class~="container"][class~="text-red-500"]::after{
  content:"Live GPU statistics come from the training backend. Start it, or point NEXT_PUBLIC_BACKEND_URL at a running instance, and this panel fills itself in.";
  display:block; margin-top:14px; padding-top:14px; border-top:1px solid var(--hair);
  font-family:var(--sans); font-size:15px; line-height:1.47; letter-spacing:-.011em; color:var(--label2);
}
html [role="region"][aria-label*="Notification"] li{
  background:var(--pop)!important; border:1px solid var(--hair-2)!important; border-radius:18px;
  -webkit-backdrop-filter:blur(36px) saturate(180%); backdrop-filter:blur(36px) saturate(180%); box-shadow:var(--lift-2);
}

/* ------------------------------------------------------------ the readout */
#aether-readout{
  position:fixed; left:20px; bottom:18px; z-index:8; pointer-events:none;
  display:flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11px; letter-spacing:.01em; color:var(--label3);
  opacity:0; transition:opacity var(--t-slow) var(--sp);
}
#aether-readout.on{ opacity:1; }
#aether-readout i{ width:6px; height:6px; border-radius:50%; background:var(--c); box-shadow:0 0 10px var(--c); }

/* ------------------------------------------------------------ computing */
#aether-rail{
  position:fixed; left:0; right:0; top:0; height:2px; z-index:60; pointer-events:none; opacity:0;
  transition:opacity var(--t) var(--sp);
  background:linear-gradient(90deg,transparent, var(--c), transparent);
  background-size:34% 100%; background-repeat:no-repeat; background-position:-34% 0;
}
html.ae-busy #aether-rail{ opacity:1; animation:ae-rail 1.4s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes ae-rail{ from{ background-position:-34% 0 } to{ background-position:134% 0 } }
html.ae-busy form textarea[class*="min-h-[60px]"]{
  border-color:color-mix(in srgb,var(--c) 55%,transparent)!important;
  box-shadow:inset 0 1px 2px rgba(var(--sh),.24), 0 0 0 4px color-mix(in srgb,var(--c) 18%,transparent);
}

/* ---- integrated graphics: a shallower frost costs a fraction of a deep one,
       and the field renders below native resolution. The look survives. */
html.ae-tier-low{ --blur:12px; --sat:150%; }
html.ae-tier-low [role="dialog"], html.ae-tier-low [data-radix-popper-content-wrapper] > *{
  -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%);
}

/* ------------------------------------------------------------------ arrival */
html body{ animation:ae-in .55s cubic-bezier(.32,.72,0,1) both; }
@keyframes ae-in{ from{ opacity:0 } to{ opacity:1 } }

@media (prefers-reduced-motion:reduce){
  html *{ animation-duration:.001s!important; transition-duration:.06s!important; }
}
@media (max-width:900px){
  :root{ --r-card:18px; --blur:24px; }
  #aether-readout{ display:none; }
}

/* ==========================================================================
   MOBILE — the app pins several inner columns to the full viewport height
   while their parents are already shorter than that, so the console and the
   last dimension keys fall off the bottom with nothing to scroll. Every one of
   those columns is put back on its parent's height, and the chrome is moved
   inside the safe area.
   ========================================================================== */
html [class*="bg-background/95"], html [class*="bg-background\\/95"]{
  padding-top:calc(1rem + env(safe-area-inset-top))!important;
}
@media (max-width:900px){
  /* `.flex.h-full { height:100dvh!important }` pins this column to the whole
     window while its parent is already 55–73px shorter, so the console falls off
     the bottom. It has to be its parent's height, and nothing else. */
  html main .flex.h-full, html .mobile-viewport-height.flex.h-full,
  html .mobile-viewport-height{ height:100%!important; min-height:0!important; }
  html .mobile-viewport-fix, html .mobile-container{ min-height:0!important; height:100%!important; }
  html .mobile-chat-container{ height:100%!important; max-height:100%!important; min-height:0!important; }
  html .mobile-chat-panel{ height:auto!important; min-height:0!important; max-height:none!important; }
  html .mobile-chat-container .flex-1.min-h-0{ height:auto!important; min-height:0!important; }
  html .mobile-scroll-fix .flex.flex-col.gap-4{ min-height:0!important; }
  html .mobile-welcome{ margin-top:0!important; min-height:0!important; }
  html main[class*="h-screen"]{ height:100%!important; }

  /* the console clears the home indicator */
  html div[class*="mx-auto"][class*="p-4"][class*="flex-shrink-0"]{
    padding-bottom:env(safe-area-inset-bottom)!important;
  }
  /* five keys never fit across a phone: two up, and the whole column scrolls */
  html [class*="grid-cols-5"]{ grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  html button[class~="h-32"][class*="flex-col"]{ height:104px!important; border-radius:18px; }
  html button[class~="h-32"][class*="flex-col"] svg{ width:22px; height:22px; margin-bottom:6px; }
  html button[class~="h-32"][class*="flex-col"] > div:first-of-type{ font-size:15px; }
  html button[class~="h-32"][class*="flex-col"] > div:last-child{ font-size:11.5px; margin-top:3px; }
  html h2[class*="text-amber"], html h2[class*="dark:text-amber"]{ font-size:19px; }
  html form textarea[class*="min-h-[60px]"]{ min-height:48px; padding:13px 78px 13px 15px; font-size:16px; }
  html button[class*="min-h-[60px]"]{ min-height:48px; border-radius:14px; }
}

/* when the page has no room to spare, the field steps back to a whisper */
#aether-gl.on.ae-back{ opacity:.30; }
html[data-aether-room="platform"] #aether-gl.on.ae-back{ opacity:.2; }

/* ============================================================================
   REACHABILITY — the app pins html, body and the viewport container to
   overflow:hidden and then lets several pages grow past the fold, so their
   lower half is simply unreachable on every screen. The content region is
   given back its scroll, and the containers that were clipping it are opened.
   ========================================================================== */
/* the platform pages have no <main> at all: their content sits directly in
   .viewport-container, which the app pins to overflow:hidden while holding
   5780px of cards. That container is the real scroller. */
html[data-aether-room="platform"] .viewport-container{
  overflow-y:auto!important; overflow-x:hidden!important;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  scroll-padding-bottom:24px; scroll-behavior:smooth;
}
html[data-aether-room="platform"] main{ overflow:visible!important; height:auto!important; min-width:0!important; max-width:100%; }
html[data-aether-room="platform"] .viewport-container [class*="flex-1"]{ min-width:0; }
/* every page-level column pinned to the window height gets to grow instead, so
   the one scroller above can reach all of it */
html[data-aether-room="platform"] .viewport-container [class*="h-screen"],
html[data-aether-room="platform"] .viewport-container [class*="min-h-screen"],
html[data-aether-room="platform"] .viewport-container [class*="h-svh"]{
  height:auto!important; min-height:100%!important; max-height:none!important;
}
html[data-aether-room="platform"] .viewport-container [class*="overflow-hidden"]:not([data-sidebar]):not([class*="rounded"]){
  overflow:visible!important;
}
html[data-aether-room="platform"] [data-sidebar="sidebar"]{ height:100dvh!important; min-height:0!important; }
html[data-aether-room="platform"] main [class*="flex-1"][class*="overflow-hidden"],
html[data-aether-room="platform"] main [class*="grid"][class*="overflow-hidden"],
html[data-aether-room="platform"] main [class*="min-h-0"][class*="overflow-hidden"]{ overflow:visible!important; }
html[data-aether-room="platform"] main [class*="grid"][class*="flex-1"]{ flex:none!important; }
/* the last card must clear the bottom of the window */
html[data-aether-room="platform"] main > *:last-child{ padding-bottom:32px; }

/* ============================================================================
   TOUCH — nothing you are meant to press is smaller than a fingertip, and
   nothing you are meant to read is smaller than 11.5px.
   ========================================================================== */
@media (max-width:900px){
  html button, html a[class*="inline-flex"], html [role="button"], html [role="tab"], html [role="combobox"]{
    min-height:44px; min-width:44px;
  }
  html button[class*="w-7"], html button[class*="w-8"], html button[class*="h-7"], html button[class*="h-8"]{
    width:44px!important; height:44px!important; border-radius:12px;
  }
  html form button[type="submit"], html button[title="Generate Image"]{ min-width:36px; min-height:36px; }
  html [class*="text-[9px]"], html [class*="text-[10px]"], html [class*="text-[11px]"]{ font-size:11.5px!important; line-height:1.35!important; }
  html [class*="text-xs"]{ font-size:12.5px; }
  html [class*="text-[9px]"], html [class*="text-[10px]"]{ letter-spacing:0!important; }

  /* rows of controls wrap instead of running off the edge */
  html div[class*="items-center"][class*="gap-4"], html div[class*="items-center"][class*="gap-3"],
  html div[class*="items-center"][class*="justify-between"]{ flex-wrap:wrap; row-gap:8px; }

  /* tab strips and step rails scroll sideways with momentum instead of clipping */
  html div:has(> button[class*="border-b-2"]), html div:has(> [class*="min-w-[88px]"]),
  html [role="tablist"]{
    overflow-x:auto!important; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    flex-wrap:nowrap!important; scroll-snap-type:x proximity;
  }
  html div:has(> button[class*="border-b-2"])::-webkit-scrollbar,
  html [role="tablist"]::-webkit-scrollbar{ display:none; }
  html div:has(> button[class*="border-b-2"]) > button, html [role="tablist"] > *{ scroll-snap-align:start; flex:none; }

  /* the platform rails become sheets, inside the safe area */
  html [data-sidebar="sidebar"]{ padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); }
  html [data-sidebar="sidebar"] [data-sidebar="menu-button"]{ min-height:46px; }
  html main{ padding-bottom:env(safe-area-inset-bottom); }
  html [role="dialog"]{ border-radius:22px; margin:12px; max-width:calc(100vw - 24px); }
}

/* ============================================================================
   MATERIAL — the last 5%: a specular edge that catches the light at the top of
   every panel, and a whisper of grain so large frosted areas never band.
   ========================================================================== */
html .neon-card::after, html [class~="bg-card"]::after, html button[class~="h-32"][class*="flex-col"]::after,
html div[class*="max-w-[95%]"]::after{
  content:""; position:absolute; left:12%; right:12%; top:0; height:1px; border-radius:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--sheen), transparent);
}
html .neon-card, html [class~="bg-card"], html button[class~="h-32"][class*="flex-col"], html div[class*="max-w-[95%]"]{ isolation:isolate; }

/* long grids only paint what is on screen */
html [class*="grid"] > .neon-card{ content-visibility:auto; contain-intrinsic-size:auto 240px; }

/* ============================================================================
   TYPE — one optical ramp: the larger the size, the tighter the tracking.
   ========================================================================== */
html [class*="text-5xl"]{ letter-spacing:-.038em; }
html [class*="text-4xl"]{ letter-spacing:-.034em; }
html [class*="text-3xl"]{ letter-spacing:-.030em; }
html [class*="text-2xl"]{ letter-spacing:-.026em; }
html [class*="text-xl"]{ letter-spacing:-.022em; }
html [class*="text-lg"]{ letter-spacing:-.018em; }
html [class*="text-base"], html p{ letter-spacing:-.011em; }
html [class*="text-sm"]{ letter-spacing:-.008em; }
html [class*="text-xs"]{ letter-spacing:-.004em; }
html [class*="font-mono"], html code, html pre{ letter-spacing:0!important; }

/* the app squeezes its mobile header controls to 28px with !important; a control
   you press with a finger is 44px, and its glyph is 20 */
@media (max-width:900px){
  html .mobile-header button, html .mobile-header a, html .mobile-header [role="button"],
  html [class*="bg-background/95"] button, html [class*="bg-background/95"] a[class*="inline-flex"]{
    width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important;
    padding:0!important; border-radius:13px;
  }
  html .mobile-header button svg, html [class*="bg-background/95"] button svg{
    width:20px!important; height:20px!important; margin:0!important;
  }
  html [class*="bg-background/95"] button[title="Return to Welcome Screen"]{ width:44px!important; height:44px!important; }
  html [class*="bg-background/95"] button[title="Return to Welcome Screen"] img{ width:30px!important; height:30px!important; }
  /* the toolbar's own row keeps its controls on one line, scrolling if it must */
  html [class*="bg-background/95"] > div:last-child{ gap:6px; }
}

/* fixed-width controls sized for a desktop toolbar fill the phone instead of
   pushing the whole page sideways */
@media (max-width:900px){
  html [class*="w-[280px]"], html [class*="w-[300px]"], html [class*="w-[320px]"], html [class*="w-[360px]"],
  html [class*="min-w-[280px]"], html [class*="max-w-[280px]"]{ width:100%!important; max-width:100%!important; min-width:0!important; }
  html div[class*="flex"][class*="gap-2"]:not([class*="flex-col"]),
  html div[class*="flex"][class*="gap-3"]:not([class*="flex-col"]){ flex-wrap:wrap; }
  html h1[class*="text-3xl"], html h1[class*="text-4xl"]{ font-size:26px; }
  html [class*="grid-cols-4"]{ grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  html [class*="grid-cols-3"]{ grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  html [class*="lg:grid-cols-2"], html [class*="md:grid-cols-2"]{ grid-template-columns:minmax(0,1fr)!important; }
}

/* ============================================================================
   NAVIGATION — the platform's rail does not exist on a phone. This is the only
   way back, so it sits where a thumb already is.
   ========================================================================== */
#aether-nav{
  position:fixed; left:50%; bottom:calc(14px + env(safe-area-inset-bottom)); transform:translateX(-50%);
  z-index:70; display:flex; align-items:center; gap:2px; padding:5px;
  border-radius:var(--r-pill); border:1px solid var(--hair-2);
  background:var(--glass-nav);
  -webkit-backdrop-filter:blur(30px) saturate(180%); backdrop-filter:blur(30px) saturate(180%);
  box-shadow:0 2px 6px rgba(var(--sh),.34), 0 16px 44px rgba(var(--sh),.5), var(--spec);
  animation:ae-nav-in .5s cubic-bezier(.32,.72,0,1) both .25s;
}
@keyframes ae-nav-in{ from{ opacity:0; transform:translate(-50%,14px) scale(.94) } to{ opacity:1; transform:translate(-50%,0) scale(1) } }
#aether-nav button, #aether-nav a{
  width:52px!important; height:44px!important; min-width:52px!important; min-height:44px!important;
  display:grid; place-items:center; border:0; background:transparent; border-radius:var(--r-pill);
  color:var(--label2); cursor:pointer; padding:0!important;
  transition:background var(--t-fast) var(--sp), color var(--t-fast) var(--sp), transform var(--t-fast) var(--sp);
}
#aether-nav svg{ width:21px; height:21px; }
#aether-nav button:active, #aether-nav a:active{ transform:scale(.9); }
#aether-nav a:hover, #aether-nav button:hover{ color:var(--label); background:var(--fill2); }
/* the last card clears the capsule */
html.ae-has-nav[data-aether-room="platform"] .viewport-container{ padding-bottom:86px!important; }
@media (min-width:901px){ #aether-nav{ display:none; } }

/* desktop grids stack on a phone; a five-column instrument rail is not a phone
   layout, and the columns it makes are narrower than the words inside them */
@media (max-width:900px){
  html[data-aether-room="platform"] [class*="grid-cols-5"],
  html[data-aether-room="platform"] [class*="grid-cols-6"],
  html[data-aether-room="platform"] [class*="lg:grid-cols"],
  html[data-aether-room="platform"] [class*="xl:grid-cols"],
  html[data-aether-room="platform"] [class*="md:grid-cols"]{ grid-template-columns:minmax(0,1fr)!important; }
  html[data-aether-room="platform"] [class*="col-span-"]{ grid-column:auto!important; }
  html[data-aether-room="platform"] [class*="grid"] > *{ min-width:0; }
  /* panels sized for a tall desktop column get a sane height on a phone */
  html[data-aether-room="platform"] [class*="min-h-[700px]"],
  html[data-aether-room="platform"] [class*="h-[680px]"],
  html[data-aether-room="platform"] [class*="min-h-[600px]"]{ min-height:340px!important; height:auto!important; }
  html[data-aether-room="platform"] [class*="h-full"][class*="min-h-0"]{ height:auto!important; }
}

/* columns and panels carrying a desktop minimum width give it up on a phone;
   the two genuinely wide things (tables, diagrams) scroll sideways instead */
@media (max-width:900px){
  html[data-aether-room="platform"] .viewport-container [class*="col-span-"],
  html[data-aether-room="platform"] .viewport-container [style*="min-width"],
  html[data-aether-room="platform"] .controls-panel,
  html[data-aether-room="platform"] [class*="w-[400px]"], html[data-aether-room="platform"] [class*="w-[480px]"],
  html[data-aether-room="platform"] [class*="w-[180px]"]{
    min-width:0!important; width:auto!important; max-width:100%!important;
  }
  html div:has(> [class*="min-w-[600px]"]), html div:has(> [class*="min-w-[800px]"]),
  html div:has(> table){ overflow-x:auto!important; -webkit-overflow-scrolling:touch; }
  html [class*="min-w-[600px]"], html [class*="min-w-[800px]"]{ max-width:none!important; }
}

/* ============================================================================
   CONTROLS — switches, sliders, progress and checkboxes as iOS renders them.
   ========================================================================== */
html [role="switch"]{
  width:52px!important; height:32px!important; min-width:52px!important; min-height:32px!important;
  border-radius:var(--r-pill)!important; border:0!important; padding:2px!important; flex:none;
  background:var(--fill3)!important; box-shadow:inset 0 1px 2px rgba(var(--sh),.3);
  transition:background var(--t) var(--sp); position:relative; cursor:pointer;
}
html [role="switch"][data-state="checked"], html [role="switch"][aria-checked="true"]{
  background:var(--green)!important; box-shadow:inset 0 1px 2px rgba(var(--sh),.2), 0 0 18px -6px var(--green);
}
html [role="switch"] > span, html [role="switch"] [data-state]{
  display:block!important; width:28px!important; height:28px!important; border-radius:50%!important;
  background:var(--knob)!important; box-shadow:0 2px 5px rgba(var(--sh),.4), 0 1px 1px rgba(var(--sh),.25)!important;
  transform:translateX(0)!important; transition:transform var(--t) var(--sp)!important;
}
html [role="switch"][data-state="checked"] > span, html [role="switch"][aria-checked="true"] > span{
  transform:translateX(20px)!important;
}
html [role="slider"], html [data-orientation="horizontal"][role="slider"]{
  width:24px; height:24px; border-radius:50%; background:var(--knob);
  box-shadow:0 2px 6px rgba(var(--sh),.45), 0 0 0 1px rgba(var(--sh),.12); border:0;
}
html [data-orientation="horizontal"] > [class*="bg-secondary"], html [class*="SliderTrack"]{
  height:5px!important; border-radius:var(--r-pill); background:var(--fill3)!important;
}
html [class*="SliderRange"], html [data-orientation="horizontal"] [class*="bg-primary"]{
  background:var(--tint)!important; border-radius:var(--r-pill);
}
html [role="progressbar"]{ height:6px; border-radius:var(--r-pill); background:var(--fill3)!important; overflow:hidden; }
html [role="progressbar"] > *{ background:var(--tint)!important; border-radius:var(--r-pill); }
html [role="checkbox"], html input[type="checkbox"]{
  width:22px; height:22px; border-radius:7px; border:1px solid var(--hair-2)!important;
  background:var(--fill1)!important; accent-color:var(--tint);
}
html [role="checkbox"][data-state="checked"]{ background:var(--tint)!important; border-color:transparent!important; color:var(--on-tint); }
html [role="radio"]{ width:22px; height:22px; border-radius:50%; border:1px solid var(--hair-2)!important; }

@media (max-width:900px){
  /* a seven-character ellipsis is not a title: let panel headings wrap */
  html[data-aether-room="platform"] [class~="truncate"]{
    white-space:normal!important; overflow:visible!important; text-overflow:clip!important;
  }
}

/* the rail is a fixed column with its own scroll — releasing page heights must
   not release it, or its lower half becomes unreachable */
html[data-aether-room="platform"] [data-sidebar="sidebar"],
html[data-aether-room="platform"] [data-sidebar="sidebar"] > div,
html[data-aether-room="platform"] [class*="h-svh"][class*="fixed"]{
  height:100dvh!important; min-height:0!important; max-height:100dvh!important;
}
html[data-aether-room="platform"] [data-sidebar="content"]{
  overflow-y:auto!important; overscroll-behavior:contain; min-height:0!important; flex:1 1 auto!important;
}
/* a panel carrying a 500px desktop minimum inside a 470px column overflows the
   window on desktop too */
html[data-aether-room="platform"] .viewport-container [class*="col-span-"],
html[data-aether-room="platform"] .controls-panel,
html[data-aether-room="platform"] .viewport-container [style*="min-width"]{ min-width:0!important; }

/* the send key takes the live dimension's colour once there is something to send */
html form:has(textarea:not(:placeholder-shown)) button[type="submit"]:not(:disabled){
  background:linear-gradient(180deg, color-mix(in srgb,var(--c) 92%,white), var(--c))!important;
  box-shadow:0 1px 1px rgba(var(--sh),.2), 0 6px 22px color-mix(in srgb,var(--c) 40%,transparent), inset 0 1px 0 rgba(255,255,255,.3);
}

/* the console on a phone: the field gets the room, the two side keys get just
   enough, and the placeholder stops wrapping onto two lines */
@media (max-width:900px){
  /* the field gets a row of its own; the two side keys sit under it, the way a
     phone composer is built. Nothing has to squeeze. */
  html form div[class*="items-stretch"]{ flex-wrap:wrap!important; row-gap:8px; }
  html form div[class*="items-stretch"] > div[class*="flex-1"]{ order:-1; flex:1 0 100%!important; }
  html button[class*="min-h-[60px]"]{
    min-height:44px!important; height:44px!important; flex:1 1 auto!important; min-width:0!important;
    padding:0 14px!important; border-radius:14px;
  }
  html button[class*="min-h-[60px]"] span{ font-size:13px; }
  html form textarea[class*="min-h-[60px]"]{ padding:14px 78px 14px 15px; font-size:16px; min-height:52px; }
  html [data-sidebar="footer"] button, html [data-sidebar="header"] button{ flex:none!important; }
  html form button[type="submit"]{ width:34px!important; height:34px!important; min-width:34px!important; min-height:34px!important; right:8px!important; }
  html button[title="Generate Image"]{ width:32px!important; height:32px!important; min-width:32px!important; min-height:32px!important; right:46px!important; }
  /* rail footer controls keep a full target even when the rail is narrow */
  html [data-sidebar="footer"] button, html [data-sidebar="header"] button{ min-width:44px!important; }
}

/* The app still reserves 400px for the wireframe it no longer draws — the field
   behind the page took that job. On a phone that dead space is the difference
   between seeing the dimension keys and not. */
@media (max-width:900px){
  html main div[style*="min-height"]:has(canvas){
    min-height:0!important; height:0!important; overflow:hidden!important; margin:0!important;
  }
  html main div:has(> div[style*="min-height"] canvas){
    height:0!important; min-height:0!important; margin:0!important; padding:0!important;
  }
  html button[class~="h-32"][class*="flex-col"]{ height:96px!important; }
}

@media (max-width:900px){
  /* and the two outer wrappers the app pins to 300 and 320px for the same
     wireframe — all of it collapses, the field is behind the page now */
  html main [class~="h-48"], html .mobile-5d-viz, html .mobile-hypercube-container{
    height:0!important; min-height:0!important; margin:0!important; overflow:hidden!important;
  }
  html .mobile-welcome .flex.justify-center.items-center,
  html main div[class*="justify-center"][class*="items-center"]:has(canvas){
    min-height:0!important; height:0!important; margin:0!important; overflow:hidden!important;
  }
}

/* behind the glass, the field reads as depth rather than as a picture */
#aether-gl.on.ae-back{ opacity:.42; }
@media (max-width:900px){ #aether-gl.on.ae-back{ opacity:.5; } }

/* ------------------------------------------------------------- the composer
   `mx-auto` on a flex-column child makes it shrink to its content instead of
   stretching, so the app's max-w-5xl composer was collapsing to ~500px on a
   1440px screen and wrapping its own placeholder. Give it the width back. */
html div[class~="mx-auto"][class*="max-w-"]{ width:100%; }
html main form textarea{ min-height:56px; }

/* ---------------------------------------------------- the platform's own night
   The deep-learning section is wrapped in a `.dark` div and drawn for ink — that is
   the app's own design, and the sidebar says so. On a light page it therefore needs
   a ground of its own, or the paper shows through a panel built for night. */
html:not(.dark) .dark{ background:rgba(5,6,10,.955); color:var(--label); min-height:100dvh; }
html:not(.dark) .dark::selection{ background:color-mix(in srgb, var(--tint) 45%, transparent); }

/* --------------------------------------------- a button parked inside a field
   A text button positioned inside an input has to fit its own label, and the input
   has to leave room for it — otherwise the label spills past the right edge of a
   phone screen, which is exactly what the dataset search was doing. */
html button[class*="absolute"][class*="px-4"], html button[class*="absolute"][class*="px-6"]{
  width:max-content!important; min-width:max-content!important; white-space:nowrap;
  display:inline-flex!important; align-items:center; justify-content:center;
}
html input[class*="pr-12"]{ padding-right:108px!important; }

/* ============================================================================
   CONTINUITY — nothing cuts.
   The live colour is a typed property, so a mode change glides through every
   consumer of it at once; the appearance flips as one dissolve; and walking
   from one page to the next is a crossfade, not a flash.
   ========================================================================== */
@property --tint{ syntax:'<color>'; inherits:true; initial-value:#0A84FF; }
@property --c{ syntax:'<color>'; inherits:true; initial-value:#0A84FF; }
html{ transition:--tint .7s var(--sp), --c .7s var(--sp); }
@view-transition{ navigation:auto; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.5s; animation-timing-function:var(--sp); }
/* while the appearance dissolves, nothing underneath may run its own transition */
html.ae-theming *, html.ae-theming *::before, html.ae-theming *::after{ transition:none!important; }
/* the rail opens on the spring, not a straight line */
html .ease-linear{ transition-timing-function:var(--sp)!important; }
html .duration-200.ease-linear, html [class*="transition-[width]"], html [class*="transition-[left"]{ transition-duration:.45s!important; }
/* the heading reads over the object: the ground gathered softly behind the letters */
html h2[class*="text-amber"], html h2[class*="dark:text-amber"]{
  text-shadow:0 1px 2px var(--ink0), 0 2px 26px var(--ink0), 0 0 48px var(--ink0);
}
/* a frosted panel that travels must be re-blurred every frame, so on integrated
   graphics the cards and keys lift by light, not by distance */
html.ae-tier-low .neon-card:hover, html.ae-tier-low [class~="bg-card"]:hover,
html.ae-tier-low button[class~="h-32"][class*="flex-col"]:hover{ transform:none; }
html.ae-tier-low button[class~="h-32"][class*="flex-col"]:active{ transform:scale(.985); }
@media (prefers-reduced-motion:reduce){ html{ transition:none; } }