/* Sary-OS Create interface (preview, owner 2026-10-16): a slim bar, the Create page, the tools page,
   the icon grid, and every panel and tool at full screen under the bar. Everything is scoped to
   html.saryos-create-ui (set in app.html), so ?ui=classic leaves the Portal exactly as it was.
   The frames are all sized from --portal-bar-core, --portal-side-w and --dash-gap (portal.css), so
   the full-screen move is those three numbers.

   The look is AI Chat Vault's skin, as liquid-glass.css draws it (owner, 2026-10-16: "Look at how the
   ai vault chat skinning is done and how that is animated. I want that. I want it to be cinematic and
   animated"; "smoke pouring through the glass"): Noir Platinum for Dark, Aurora for Light, read from
   the skin's own variables (--lg-*), with Noir's values when the skin is off. Smoke in the skin's
   colours rises behind everything (portal-create-smoke.js); every panel is glass it shows through,
   with the skin's turning GlowBorder rim, a light that follows the pointer, and the tier's metal on
   the buttons and icon tiles. Panels rise out of the smoke when a page comes on screen. */
/* Android, Firefox and weak devices run the site with html.perf-lite, whose perf-android.css switches
   off every animation, transition, shadow and backdrop blur on the page. The owner's own tablet is one
   of them, and this interface is meant to move (owner, 2026-10-16: "I want it to be cinematic and
   animated"), so its own animations and transitions carry !important on selectors heavier than
   perf-lite's, and its glass, shadows and radii go through the one heavy rule at the end. The rest of
   the site keeps perf-lite as it is. */
@property --sc-spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
/* A control's look (see the rule at the end): its own, never its parent's, so a button inside a glass
   panel does not take the panel's glass. */
@property --sc-fill { syntax: '*'; inherits: false; }
@property --sc-fg { syntax: '*'; inherits: false; }
@property --sc-border { syntax: '*'; inherits: false; }
@property --sc-sh { syntax: '*'; inherits: false; }
@property --sc-bf { syntax: '*'; inherits: false; }
@property --sc-r { syntax: '*'; inherits: false; }

:root:root.saryos-create-ui {
  --portal-bar-core: 64px;
  --portal-side-w: 0px;
  --dash-gap: 0px;
  --dash-head: 0px;
  --sc-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', Inter, 'Segoe UI', system-ui, sans-serif;
  --sc-ease: cubic-bezier(.2, .8, .2, 1);
}
/* ---- the skin (owner, 2026-10-16: "Yeah use effect"; "noir gold" for dark, "the translucent one too") ----
   The glass skin as the Mac app shows the site: liquid-glass.js draws the Fluid.metal aurora, the
   dust and the turning rim behind every page and panel; these are its colours here. The values are AI
   Chat Vault's Pro+ skins as recorded when they were copied from the Mac app (request 286, 2026-10-01).

   Dark = Noir Gold: Serenity Black (#050505 to #000), letters #F5F5F5 / #A3A3A3 / #737373, lines
   #303030, the gold aurora (#D4AF37, #8A6A14, #F5E6B8), gold dust drifting up through gloss-black
   glass, black letters on the gold. The skin's own variables are set too, so its aurora, dust, rim and
   every tool it styles turn gold with it. */
:root:root.saryos-create-ui[data-glass="dark"], :root:root.saryos-create-ui:not([data-glass]):not(.light-mode) {
  --lg-a1: #d4af37; --lg-a2: #8a6a14; --lg-a3: #f5e6b8; --lg-accent: #d4af37; --lg-ink: #0a0a0a;
  --lg-dust-rgb: 245, 214, 128;
  --sc-a1: #d4af37; --sc-a2: #8a6a14; --sc-a3: #f5e6b8;
  --sc-on-tier: #0a0a0a;
  --sc-ink: #f5f5f5; --sc-dim: #a3a3a3; --sc-faint: #737373;
  --sc-line: #303030;
  --sc-ground: linear-gradient(#050505, #000);
  /* Gloss black glass: the glossy top half, a bright top edge, black under it, the aurora and the gold
     dust seen through it. */
  --sc-glass-fill: linear-gradient(180deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, .035) 48%, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, .02) 100%), rgba(6, 6, 7, .58);
  --sc-glass-fill-hi: linear-gradient(180deg, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .05) 48%, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, .03) 100%), rgba(10, 10, 11, .62);
  --sc-glass-blur: blur(18px) saturate(1.4);
  --sc-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1px 0 rgba(0, 0, 0, .5), 0 0 0 .5px rgba(212, 175, 55, .16), 0 22px 60px rgba(0, 0, 0, .6);
  --sc-glass-shadow-hi: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -1px 0 rgba(0, 0, 0, .5), 0 0 0 .5px rgba(212, 175, 55, .4), 0 28px 70px rgba(0, 0, 0, .65), 0 0 46px rgba(212, 175, 55, .16);
  --sc-tier: linear-gradient(135deg, #f5e6b8 0%, #d4af37 34%, #8a6a14 70%, #d4af37 100%);
  --sc-tint: rgba(255, 255, 255, .07);
  --sc-bar: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 55%), rgba(5, 5, 5, .82);
  --sc-shade: 0 2px 30px rgba(0, 0, 0, .7);
}
/* Light = the Translucent glass with the Aurora (owner's choice of 2026-10-01, "exactly screenshot 2",
   and today "the translucent one too"): black 0.42 and a white sheen over what is behind, white
   letters, lines white 0.22, the aurora (#8B5CF6, #EC4899, #F59E0B) at 0.6, on the glass's own ground
   (#67626d to #4e5566). The secondary letters are a little brighter than the skin's 0.55 and every
   word on the page carries a shadow, so they read over the moving aurora (owner, same day: "can't even
   read the text on light mode"). */
:root:root.saryos-create-ui:is([data-glass="light"], .light-mode) {
  --sc-a1: #8b5cf6; --sc-a2: #ec4899; --sc-a3: #f59e0b;
  --sc-on-tier: #ffffff;
  --sc-ink: #ffffff; --sc-dim: rgba(255, 255, 255, .8); --sc-faint: rgba(255, 255, 255, .6);
  --sc-line: rgba(255, 255, 255, .22);
  --sc-ground: linear-gradient(#67626d, #4e5566);
  --sc-glass-fill: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .02) 55%), rgba(0, 0, 0, .42);
  --sc-glass-fill-hi: linear-gradient(135deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .04) 55%), rgba(0, 0, 0, .46);
  --sc-glass-blur: blur(20px) saturate(1.5);
  --sc-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 18px 44px rgba(0, 0, 0, .3);
  --sc-glass-shadow-hi: inset 0 1px 0 rgba(255, 255, 255, .4), 0 24px 56px rgba(0, 0, 0, .36), 0 0 40px rgba(139, 92, 246, .3);
  --sc-tier: linear-gradient(90deg, #8b5cf6, #ec4899 55%, #f59e0b);
  --sc-tint: rgba(255, 255, 255, .1);
  --sc-bar: rgba(0, 0, 0, .32);
  --sc-shade: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 24px rgba(0, 0, 0, .5);
}
/* Wallpaper None (owner, 2026-10-18: "add none which makes wallpaper plain black on dark mode and plain
   white on light mode"): a plain ground, no aurora, field, dust or rim. Before Default, so Default's own
   ground still wins when both are chosen. */
:root:root.saryos-create-ui:has(> body.portal-layer-none) { --sc-ground: #000; }
:root:root.saryos-create-ui:is([data-glass="light"], .light-mode):has(> body.portal-layer-none) { --sc-ground: #fff; }
:root:root.saryos-create-ui:has(> body.portal-layer-none) :is(#lg-aurora, #lg-dust, #lg-rim, #lg-aurora-bar, #portal-field) { display: none !important; }
/* White letters cannot sit on white: on Light with None the glass skin steps aside (liquid-glass.js
   plainLight) and the site's own light mode gives every tool black letters; here the Create interface's
   letters turn dark and its glass white, through the variables it and the skin read. The accents stay
   the Light look's violet, pink and amber. */
:root:root:root.saryos-create-ui.light-mode:has(> body.portal-layer-none) {
  --lg-bg: #ffffff; --lg-bg2: #ffffff;
  --lg-panel: rgba(255, 255, 255, .86); --lg-card: rgba(255, 255, 255, .9); --lg-raised: rgba(15, 15, 30, .045);
  --lg-line: rgba(15, 15, 30, .12); --lg-line2: rgba(15, 15, 30, .18);
  --lg-text: #111118; --lg-muted: rgba(17, 17, 24, .62); --lg-dim: rgba(17, 17, 24, .42);
  --lg-edge: rgba(15, 15, 30, .1);
  --lg-shadow: 0 18px 48px rgba(15, 15, 30, .12);
  --lg-solid: #ffffff; --lg-solid-deep: #ffffff; --lg-solid-side: #f6f6f8; --lg-solid-stage: #ffffff;
  --lg-solid-line: rgba(15, 15, 30, .12);
  --lg-bar: rgba(255, 255, 255, .92); --lg-menu: #ffffff; --lg-modal: rgba(255, 255, 255, .97);
  --lg-frame: #ffffff;
  --lg-spec: rgba(255, 255, 255, .9); --lg-spec-soft: rgba(255, 255, 255, .5); --lg-spec-glow: rgba(255, 255, 255, .4); --lg-spec-sweep: rgba(255, 255, 255, .3);
  --lg-ctl: linear-gradient(180deg, #ffffff, #f3f3f6); --lg-ctl-hover: linear-gradient(180deg, #ffffff, #ebebf0);
  --lg-ctl-line: rgba(15, 15, 30, .14);
  --lg-ctl-shadow: inset 0 1px 0 #ffffff, 0 4px 14px rgba(15, 15, 30, .08);
  --lg-bubble: linear-gradient(160deg, rgba(15, 15, 30, .05), rgba(15, 15, 30, .025));
  --lg-bubble-user: linear-gradient(160deg, color-mix(in srgb, var(--lg-a1) 16%, #fff), color-mix(in srgb, var(--lg-a2) 10%, #fff));
  --lg-tile-top: rgba(15, 15, 30, .03); --lg-tile-bottom: rgba(15, 15, 30, .01);
  --sc-ink: #111118; --sc-dim: rgba(17, 17, 24, .66); --sc-faint: rgba(17, 17, 24, .45);
  --sc-line: rgba(15, 15, 30, .12);
  --sc-glass-fill: linear-gradient(180deg, #ffffff, #fbfbfd);
  --sc-glass-fill-hi: linear-gradient(180deg, #ffffff, #f6f6fa);
  --sc-glass-shadow: inset 0 0 0 1px rgba(15, 15, 30, .08), 0 14px 36px rgba(15, 15, 30, .08);
  --sc-glass-shadow-hi: inset 0 0 0 1px rgba(139, 92, 246, .35), 0 18px 44px rgba(15, 15, 30, .12);
  --sc-tint: rgba(15, 15, 30, .05);
  --sc-bar: rgba(255, 255, 255, .94);
  --sc-shade: none;
  color-scheme: light;
}
/* Default (the menu's Solid; owner, 2026-10-16: "one universal solid which makes it no wallpaper and
   then colour match in every panel ... light mode or dark mode solid depending on theme. Call that one
   default"): no wallpaper, no aurora, dust or rim (liquid-glass.js keeps the frame off), and every panel
   one opaque colour, the same the skin gives every tool in Solid: Noir Gold's #050505 / #0a0a0a on Dark,
   the Translucent glass's own #4e5566 / #625e6b on Light. */
:root:root.saryos-create-ui:has(> body.portal-solid) {
  --sc-ground: #050505;
  --sc-glass-fill: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .02) 48%, rgba(255, 255, 255, 0) 52%), #0a0a0a;
  --sc-glass-fill-hi: linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .03) 48%, rgba(255, 255, 255, 0) 52%), #111;
  --sc-glass-blur: none;
  --sc-bar: #0a0a0a;
}
:root:root.saryos-create-ui:is([data-glass="light"], .light-mode):has(> body.portal-solid) {
  --sc-ground: #4e5566;
  --sc-glass-fill: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 50%), #625e6b;
  --sc-glass-fill-hi: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 50%), #6b6775;
  --sc-bar: #5a5868;
}
:root:root.saryos-create-ui:has(> body.portal-solid) :is(#lg-aurora, #lg-dust, #lg-rim, #lg-aurora-bar, #portal-field) { display: none !important; }

/* Crisp type everywhere the interface draws. */
:root.saryos-create-ui :is(#portal-bar, #sc-home, #sc-apps) { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1; }

/* ---- the skin's aurora, dust and rim over the whole screen under the bar ----
   liquid-glass.css sizes them to the classic frame (--dash-*), which here is the whole screen; only the
   frame's rounded corners go. The aurora is the app's band across the top, fading down; with Lines the
   field takes its place and the dust and rim stay. They run on perf-lite here too: the tablet shows what
   the Mac shows. */
:root:root.saryos-create-ui :is(#lg-aurora, #lg-dust, #lg-rim) { border-radius: 0 !important; }
:root:root.saryos-create-ui #lg-rim { animation: lg-spin 12s linear infinite !important; }
:root:root.saryos-create-ui.sc-wall-lines #lg-aurora { display: none !important; }
:root.saryos-create-ui #lg-sheen { display: none !important; }
/* Nothing else paints behind it: the site's ambience field and the wallpaper layers' hosts are hidden
   here (they showed as stray coloured dots through the Translucent ground, and drew for nothing). */
:root:root:root:root:root.saryos-create-ui :is(#live-wallpaper-container, #wallpaper-fallback, .ambience-host) { display: none !important; }

/* ---- the bar: brand, places, search, account; no tiles, no column of squares ---- */
:root:root:root.saryos-create-ui #portal-side,
:root:root:root.saryos-create-ui #portal-bar .portal-tabs,
:root:root:root.saryos-create-ui #portal-bar .portal-tools-btn,
:root:root:root.saryos-create-ui #portal-dashboard,
:root:root:root.saryos-create-ui #portal-dashboard-scrim,
:root:root:root.saryos-create-ui #portal-popout-btn,
:root:root:root.saryos-create-ui #portal-home-note,
:root:root:root.saryos-create-ui #sc-aura { display: none !important; }
:root.saryos-create-ui #portal-bar { align-items: center; gap: 6px; font-family: var(--sc-font); }
:root.saryos-create-ui #portal-bar .portal-brand { border-right: 0; height: 100%; }
:root.saryos-create-ui #portal-bar .portal-brand:has(.portal-brand-banner) { border-bottom: 0; padding: 8px 6px 8px 12px; }
:root.saryos-create-ui #portal-bar .portal-brand-banner { border-radius: 10px; }
:root:root.saryos-create-ui #portal-bar .portal-brand-label { color: var(--sc-ink); font-family: var(--sc-font); }
:root:root.saryos-create-ui #portal-bar .portal-brand:has(.portal-brand-label) { padding-top: 4px; padding-bottom: 4px; }
:root.saryos-create-ui .sc-nav { order: 2; display: flex; align-items: center; gap: 4px; margin-left: 18px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
:root.saryos-create-ui .sc-nav::-webkit-scrollbar { display: none; }
:root.saryos-create-ui .sc-nav-btn { --sc-fg: var(--sc-dim); --sc-r: 12px; appearance: none; cursor: pointer; font: 590 14.5px/1 var(--sc-font); letter-spacing: -.01em; padding: 11px 18px; white-space: nowrap; transition: color .2s !important; }
:root.saryos-create-ui .sc-nav-btn:hover { --sc-fg: var(--sc-ink); --sc-fill: var(--sc-tint); }
:root.saryos-create-ui .sc-nav-btn[aria-selected="true"] { --sc-fg: var(--sc-on-tier); --sc-fill: var(--sc-tier); --sc-sh: inset 0 1px 0 rgba(255, 255, 255, .5), 0 6px 22px color-mix(in srgb, var(--sc-a1) 28%, transparent); }
:root.saryos-create-ui #portal-bar .portal-talk-stack { order: 4; margin-left: auto; margin-right: 4px; }
:root.saryos-create-ui .sc-search {
  order: 5; display: inline-flex; align-items: center; gap: 10px; height: 40px; width: min(380px, 26vw); padding: 0 12px 0 14px; border-radius: 12px; margin-right: 8px; box-sizing: border-box;
  border: 1px solid var(--sc-line); background: var(--sc-glass-fill); color: var(--sc-dim);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1) !important; transition: border-color .2s, box-shadow .2s !important;
}
:root.saryos-create-ui .sc-search:focus-within { border-color: color-mix(in srgb, var(--sc-a1) 50%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 3px color-mix(in srgb, var(--sc-a1) 16%, transparent) !important; }
:root.saryos-create-ui .sc-search i { font-size: 14px; }
:root.saryos-create-ui .sc-search input { flex: 1; min-width: 0; font: 400 14px/1 var(--sc-font); }
:root.saryos-create-ui .sc-search input::placeholder { color: var(--sc-dim); }
:root.saryos-create-ui .sc-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
:root.saryos-create-ui .sc-kbd { font: 500 11px/1 var(--sc-font); color: var(--sc-dim); padding: 5px 7px; border-radius: 6px; border: 1px solid var(--sc-line); white-space: nowrap; }
:root.saryos-create-ui #portal-bar .portal-right { order: 6; border-left: 0; padding: 0 14px 0 4px; width: auto !important; }
:root.saryos-create-ui #portal-bar .portal-avatar { width: 38px; height: 38px; font-size: 15px; background: var(--sc-tier); color: var(--sc-on-tier); box-shadow: 0 0 0 2px rgba(255, 255, 255, .12) !important; }
:root.saryos-create-ui #portal-bar .portal-btn { border-radius: 11px; height: 36px; font-family: var(--sc-font); letter-spacing: .01em; }

/* ---- glass: the smoke seen through it ---- */
.sc-glass { position: relative; isolation: isolate; }
:root.saryos-create-ui .sc-glass {
  --sc-fill: var(--sc-glass-fill); --sc-border: 1px solid var(--sc-line); --sc-sh: var(--sc-glass-shadow); --sc-bf: var(--sc-glass-blur);
  overflow: hidden; transition: transform .35s var(--sc-ease), box-shadow .35s !important;
}
/* GlowBorder: the skin's slowly turning line of the tier's colours, with a gap. */
:root.saryos-create-ui .sc-glass::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.3px; z-index: 2; pointer-events: none;
  background: conic-gradient(from var(--sc-spin), var(--sc-a1), var(--sc-a2), transparent 40%, transparent 55%, var(--sc-a3), var(--sc-a1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .5s ease !important; animation: sc-spin 9s linear infinite !important;
}
@keyframes sc-spin { to { --sc-spin: 360deg; } }
/* The light in the glass, where the pointer is. */
:root.saryos-create-ui .sc-glass::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, -40%), color-mix(in srgb, var(--sc-a3) 16%, transparent), transparent 62%);
  opacity: 0; transition: opacity .4s ease !important;
}
:root.saryos-create-ui .sc-glass:is(:hover, :focus-visible, :focus-within)::before { opacity: 1; }
:root.saryos-create-ui .sc-glass:is(:hover, :focus-within)::after { opacity: 1; }
:root.saryos-create-ui button.sc-glass:is(:hover, :focus-visible) { --sc-fill: var(--sc-glass-fill-hi); --sc-sh: var(--sc-glass-shadow-hi); transform: translateY(-3px); outline: none; }
:root.saryos-create-ui button.sc-glass:active { transform: translateY(-1px) scale(.992); }

/* The tier's metal on an icon tile: platinum with dark glyphs on Noir, the aurora with white on Light. */
.sc-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; line-height: 0; }
:root.saryos-create-ui .sc-icon {
  position: relative; width: 56px; height: 56px; border-radius: 16px; font-size: 23px; color: var(--sc-on-tier); overflow: hidden;
  background: var(--sc-tier); background-size: 200% 200%; background-position: 0% 0%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 5px rgba(0, 0, 0, .28), 0 10px 26px rgba(0, 0, 0, .45), 0 0 22px color-mix(in srgb, var(--sc-a1) 18%, transparent) !important;
  transition: transform .4s var(--sc-ease), background-position 1.2s var(--sc-ease) !important;
}
:root.saryos-create-ui .sc-icon :is(i, svg) { position: relative; z-index: 1; color: var(--sc-on-tier) !important; -webkit-text-fill-color: var(--sc-on-tier) !important; }
:root.saryos-create-ui .sc-icon svg { width: 26px; height: 26px; stroke-width: 1.8; }
/* A glint runs over the metal as the pointer arrives. */
:root.saryos-create-ui .sc-icon::after { content: ''; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .75) 50%, transparent 60%); transform: translateX(-70%); transition: transform .9s var(--sc-ease) !important; }
:root.saryos-create-ui :is(.sc-glass, .sc-app, .sc-recent-item):hover .sc-icon { transform: scale(1.06) rotate(-2deg); background-position: 100% 100%; }
:root.saryos-create-ui :is(.sc-glass, .sc-app, .sc-recent-item):hover .sc-icon::after { transform: translateX(70%); }
:root.saryos-create-ui .sc-icon-plain { background: var(--sc-tint); color: var(--sc-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px var(--sc-line) !important; }
:root.saryos-create-ui .sc-icon-plain :is(i, svg) { color: var(--sc-ink) !important; -webkit-text-fill-color: var(--sc-ink) !important; }
:root.saryos-create-ui .sc-icon-sm { width: 38px; height: 38px; border-radius: 11px; font-size: 15px; }
:root.saryos-create-ui .sc-icon-sm svg { width: 18px; height: 18px; }

/* ---- the screen and its two pages ---- */
#sc-home { display: none; }
:root.saryos-create-ui #sc-home {
  position: fixed; inset: var(--portal-bar-h) 0 0 0; z-index: 100400; display: block; color: var(--sc-ink); font-family: var(--sc-font);
  opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s !important;
}
:root.saryos-create-ui.sc-idle #sc-home { opacity: 1; visibility: visible; transition: opacity .5s ease !important; }
#sc-home .sc-page { position: absolute; inset: 0; }
#sc-home[data-page="create"] .sc-page-tools, #sc-home[data-page="tools"] .sc-page-create { display: none; }

/* Entrance: panels rise out of the smoke in turn, in focus as they arrive. */
@keyframes sc-rise { from { opacity: 0; transform: translateY(26px) scale(.975); filter: blur(10px) !important; } to { opacity: 1; transform: none; filter: blur(0) !important; } }
@keyframes sc-fade { from { opacity: 0; filter: blur(12px) !important; letter-spacing: .02em; } to { opacity: 1; filter: blur(0) !important; } }
:root.saryos-create-ui .sc-enter :is(.sc-card, .sc-chip, .sc-tool, .sc-app) { animation: sc-rise .9s var(--sc-ease) both !important; animation-delay: calc(var(--i, 0) * 55ms + 180ms) !important; }
:root.saryos-create-ui .sc-enter :is(.sc-composer, .sc-recent, .sc-side, .sc-head) { animation: sc-rise 1s var(--sc-ease) both !important; animation-delay: 120ms !important; }
:root.saryos-create-ui .sc-enter .sc-composer { animation-delay: 620ms !important; }
:root.saryos-create-ui .sc-enter .sc-recent { animation-delay: 700ms !important; }
:root.saryos-create-ui .sc-enter :is(.sc-hero, .sc-hero-sub) { animation: sc-fade 1.3s var(--sc-ease) both !important; }
:root.saryos-create-ui .sc-enter .sc-hero-sub { animation-delay: 250ms !important; }

/* The Create page. */
#sc-home .sc-page-create { display: flex; justify-content: center; align-items: flex-start; overflow-y: auto; padding: clamp(30px, 8vh, 84px) 28px 44px; box-sizing: border-box; }
#sc-home .sc-wrap { width: min(1380px, 100%); }
#sc-home .sc-hero { margin: 0; text-align: center; font-size: clamp(34px, 4vw, 58px); font-weight: 700; letter-spacing: -.035em; line-height: 1.04; color: var(--sc-ink); text-shadow: var(--sc-shade) !important; }
/* "create" is cast in the tier's metal, a light running over it. */
#sc-home .sc-hero-word {
  background: linear-gradient(100deg, var(--sc-a2) 0%, var(--sc-a1) 30%, var(--sc-a3) 45%, var(--sc-a1) 60%, var(--sc-a2) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: sc-metal 6s ease-in-out infinite !important; text-shadow: none !important; filter: drop-shadow(0 0 22px color-mix(in srgb, var(--sc-a1) 35%, transparent)) !important;
}
@keyframes sc-metal { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0% 0; } }
#sc-home .sc-hero-sub { margin: 14px 0 40px; text-align: center; font-size: clamp(16px, 1.45vw, 20px); letter-spacing: -.005em; color: var(--sc-dim); }
#sc-home .sc-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
#sc-home .sc-card { --sc-r: 22px; appearance: none; display: flex; align-items: center; gap: 18px; padding: 28px 26px; min-height: 128px; box-sizing: border-box; font: inherit; text-align: left; cursor: pointer; }
#sc-home .sc-card-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#sc-home .sc-card-text b { font-size: 19px; font-weight: 640; letter-spacing: -.015em; color: var(--sc-ink); }
#sc-home .sc-card-text small { font-size: 13.5px; color: var(--sc-dim); }
#sc-home .sc-composer { --sc-r: 24px; margin-top: 36px; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 24px; }
/* The prompt keeps its rim turning: it is where things start. */
#sc-home .sc-composer::before { opacity: .55; }
#sc-home .sc-composer:focus-within::before { opacity: 1; animation-duration: 4s !important; }
#sc-home .sc-spark { color: var(--sc-a1); font-size: 20px; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--sc-a1) 60%, transparent)) !important; }
#sc-home .sc-input { --sc-r: 0; flex: 1 1 auto; min-width: 0; resize: none; font: 400 18px/1.4 var(--sc-font); letter-spacing: -.01em; padding: 15px 0; max-height: 160px; }
#sc-home .sc-input::placeholder { color: var(--sc-dim); }
#sc-home .sc-mic { --sc-r: 50%; appearance: none; font-size: 19px; width: 46px; height: 46px; cursor: pointer; }
#sc-home .sc-mic:hover { --sc-fill: var(--sc-tint); }
#sc-home .sc-mic.is-on { --sc-fill: #ef4444; --sc-fg: #fff; --sc-sh: 0 0 22px rgba(239, 68, 68, .7); animation: sc-pulse 1.4s ease-in-out infinite !important; }
@keyframes sc-pulse { 50% { transform: scale(1.08); } }
/* ThemedProminentStyle with the skin's Sheen: the tier's metal, its ink, a light crossing it. */
#sc-home .sc-go {
  --sc-r: 17px; --sc-fg: var(--sc-on-tier); --sc-fill: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%) 130% 0 / 250% 100% no-repeat, var(--sc-tier);
  --sc-sh: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 6px rgba(0, 0, 0, .22), 0 12px 32px rgba(0, 0, 0, .5), 0 0 30px color-mix(in srgb, var(--sc-a1) 30%, transparent);
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; height: 60px; padding: 0 32px; font: 650 18px/1 var(--sc-font); letter-spacing: -.01em;
  animation: sc-sheen 3.6s ease-in-out infinite !important; transition: transform .2s var(--sc-ease), filter .2s !important;
}
@keyframes sc-sheen { 0% { background-position: 130% 0, 0 0; } 60%, 100% { background-position: -40% 0, 0 0; } }
#sc-home .sc-go:hover { transform: translateY(-1px); filter: brightness(1.08) !important; }
#sc-home .sc-go:active { transform: translateY(1px) scale(.985); }
#sc-home .sc-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
#sc-home .sc-chip { --sc-r: 999px; appearance: none; cursor: pointer; padding: 13px 22px; font: 500 14.5px/1 var(--sc-font); letter-spacing: -.005em; }

/* The tools page. */
#sc-home .sc-page-tools { display: grid; grid-template-columns: 276px minmax(0, 1fr); }
#sc-home[data-page="create"] .sc-page-tools { display: none; }
#sc-home .sc-side { --sc-r: 0; display: flex; flex-direction: column; gap: 4px; padding: 18px 16px; box-sizing: border-box; overflow-y: auto; border-width: 0 1px 0 0 !important; }
#sc-home .sc-side::before { display: none; }
#sc-home .sc-back { --sc-r: 10px; appearance: none; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 8px 12px; margin: 0 0 14px; font: 560 13.5px/1 var(--sc-font); cursor: pointer; --sc-fg: var(--sc-dim); }
#sc-home .sc-back:hover { --sc-fg: var(--sc-ink); --sc-fill: var(--sc-tint); }
#sc-home .sc-side-h { font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--sc-dim); padding: 6px 12px 10px; display: flex; align-items: center; }
#sc-home .sc-side-h2 { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--sc-line); }
#sc-home .sc-side-add { --sc-r: 8px; --sc-border: 1px solid var(--sc-line); margin-left: auto; width: 28px; height: 28px; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
#sc-home .sc-side-add:hover { --sc-fill: var(--sc-tint); }
#sc-home :is(.sc-cat, .sc-proj) { --sc-r: 11px; --sc-border: 1px solid transparent; appearance: none; display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; font: 500 14.5px/1 var(--sc-font); letter-spacing: -.005em; text-align: left; cursor: pointer; }
#sc-home :is(.sc-cat, .sc-proj) i { width: 20px; text-align: center; font-size: 14px; color: var(--sc-dim) !important; -webkit-text-fill-color: var(--sc-dim) !important; transition: color .2s !important; }
#sc-home :is(.sc-cat, .sc-proj):hover { --sc-fill: var(--sc-tint); }
#sc-home .sc-cat[aria-current="true"] { --sc-fill: linear-gradient(90deg, color-mix(in srgb, var(--sc-a1) 18%, transparent), rgba(255, 255, 255, .04)); --sc-border: 1px solid color-mix(in srgb, var(--sc-a1) 30%, transparent); --sc-sh: inset 0 1px 0 rgba(255, 255, 255, .1); }
#sc-home .sc-cat[aria-current="true"] i { color: var(--sc-a1) !important; -webkit-text-fill-color: var(--sc-a1) !important; }
#sc-home .sc-proj span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sc-home .sc-ll-card { --sc-r: 18px; margin-top: auto; appearance: none; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; padding: 52px 14px 14px; font: inherit; text-align: left; cursor: pointer; }
#sc-home .sc-ll-card::before { opacity: .7; }
#sc-home .sc-ll-text { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
#sc-home .sc-ll-text b { font-size: 16px; font-weight: 640; letter-spacing: -.01em; }
#sc-home .sc-ll-text small { font-size: 12.5px; color: var(--sc-dim); display: flex; align-items: center; gap: 7px; }
#sc-home .sc-ll-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 10px #34d399 !important; animation: sc-breathe 2.4s ease-in-out infinite !important; }
@keyframes sc-breathe { 50% { opacity: .4; } }
#sc-home .sc-ll-bar { display: block; height: 3px; width: 62%; border-radius: 3px; margin-top: 4px; background: var(--sc-tier); background-size: 200% 100%; animation: sc-metal 4s ease-in-out infinite !important; }
#sc-home .sc-ll-go { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--sc-tier); color: var(--sc-on-tier); font-size: 12px; }
#sc-home .sc-ll-go i { color: var(--sc-on-tier) !important; -webkit-text-fill-color: var(--sc-on-tier) !important; }

#sc-home .sc-main { min-width: 0; overflow-y: auto; padding: 34px 40px 44px; box-sizing: border-box; display: flex; flex-direction: column; gap: 22px; }
#sc-home .sc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
#sc-home .sc-eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sc-dim); margin-bottom: 8px; }
#sc-home .sc-title { margin: 0; font-size: clamp(32px, 3.2vw, 48px); font-weight: 700; letter-spacing: -.03em; line-height: 1.04; color: var(--sc-ink); text-shadow: var(--sc-shade) !important; }
#sc-home .sc-sub { margin: 10px 0 0; font-size: 17px; letter-spacing: -.005em; color: var(--sc-dim); }
#sc-home .sc-head-tools { display: flex; align-items: center; gap: 12px; }
#sc-home .sc-seg { --sc-r: 14px; display: inline-flex; gap: 2px; padding: 4px; }
#sc-home .sc-seg-btn { --sc-r: 10px; --sc-fg: var(--sc-dim); appearance: none; font: 560 14px/1 var(--sc-font); padding: 10px 16px; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
#sc-home .sc-seg-btn:hover { --sc-fg: var(--sc-ink); }
#sc-home .sc-seg-btn[aria-pressed="true"] { --sc-fg: var(--sc-on-tier); --sc-fill: var(--sc-tier); --sc-sh: inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 14px rgba(0, 0, 0, .35); }
#sc-home .sc-select { --sc-r: 14px; display: inline-flex; align-items: center; }
#sc-home .sc-select select { --sc-r: 14px; appearance: none; -webkit-appearance: none; height: 48px; padding: 0 42px 0 18px; font: 560 14px/1 var(--sc-font); cursor: pointer; }
#sc-home .sc-select select option { background: var(--sc-ink); color: var(--sc-on-tier); }
:root.saryos-create-ui:is([data-glass="light"], .light-mode) #sc-home .sc-select select option { background: #fff; color: #1d1d1f; }
#sc-home .sc-select i { position: absolute; right: 16px; font-size: 11px; color: var(--sc-dim); pointer-events: none; z-index: 3; }

#sc-home .sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 16px; }
#sc-home .sc-tool { --sc-r: 18px; appearance: none; display: flex; flex-direction: column; gap: 16px; padding: 20px 20px 22px; box-sizing: border-box; min-height: 170px; font: inherit; text-align: left; cursor: pointer; }
#sc-home .sc-tool-top { display: flex; align-items: center; gap: 14px; }
#sc-home .sc-tool-name { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 auto; }
#sc-home .sc-tool-name b { font-size: 16.5px; font-weight: 640; letter-spacing: -.012em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--sc-ink); }
#sc-home .sc-tool-name small { font-size: 12.5px; color: var(--sc-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sc-home .sc-tool-go { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--sc-dim); border: 1px solid var(--sc-line); transition: transform .3s var(--sc-ease), background .3s, color .3s, border-color .3s !important; }
#sc-home .sc-tool:hover .sc-tool-go { transform: translateX(3px); background: var(--sc-tier); border-color: transparent; }
#sc-home .sc-tool:hover .sc-tool-go i { color: var(--sc-on-tier) !important; -webkit-text-fill-color: var(--sc-on-tier) !important; }
#sc-home .sc-tool-desc { font-size: 14px; line-height: 1.45; letter-spacing: -.005em; color: var(--sc-dim); }
#sc-home .sc-tool-add { --sc-border: 1px dashed color-mix(in srgb, var(--sc-ink) 26%, transparent); --sc-fill: rgba(255, 255, 255, .02); justify-content: center; }
/* List: one tool to a row, the line beside the name. */
#sc-home .sc-grid[data-view="list"] { grid-template-columns: 1fr; gap: 8px; }
#sc-home .sc-grid[data-view="list"] .sc-tool { flex-direction: row; align-items: center; min-height: 0; padding: 12px 18px 12px 12px; gap: 18px; }
#sc-home .sc-grid[data-view="list"] .sc-tool-top { flex: 0 0 360px; }
#sc-home .sc-grid[data-view="list"] .sc-icon { width: 44px; height: 44px; font-size: 18px; border-radius: 12px; }
#sc-home .sc-grid[data-view="list"] .sc-tool-desc { flex: 1 1 auto; }
#sc-home .sc-grid[data-view="list"] .sc-tool-add { justify-content: flex-start; }

#sc-home .sc-recent { --sc-r: 18px; padding: 16px 18px 18px; }
#sc-home .sc-recent-h { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 620; letter-spacing: -.005em; margin-bottom: 12px; }
#sc-home .sc-recent-all { --sc-r: 8px; --sc-fg: var(--sc-dim); appearance: none; font: 500 13px/1 var(--sc-font); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; }
#sc-home .sc-recent-all:hover { --sc-fg: var(--sc-ink); --sc-fill: var(--sc-tint); }
#sc-home .sc-recent-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
#sc-home .sc-recent-item { --sc-r: 13px; --sc-border: 1px solid var(--sc-line); --sc-fill: var(--sc-tint); appearance: none; display: flex; align-items: center; gap: 12px; padding: 10px 12px; font: inherit; text-align: left; cursor: pointer; transition: transform .25s var(--sc-ease) !important; }
#sc-home .sc-recent-item:hover { --sc-fill: var(--sc-tint); --sc-border: 1px solid color-mix(in srgb, var(--sc-a1) 34%, transparent); transform: translateY(-2px); }
#sc-home .sc-recent-item b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
#sc-home .sc-recent-item small { font-size: 12px; color: var(--sc-dim); }
#sc-home .sc-recent-empty { font-size: 13.5px; color: var(--sc-dim); padding: 6px 2px; }

/* ---- every tool, icon above, name underneath ---- */
#sc-apps { display: none; }
:root.saryos-create-ui #sc-apps {
  position: fixed; inset: var(--portal-bar-h) 0 0 0; z-index: 100450; display: flex; flex-direction: column; box-sizing: border-box;
  padding: 28px clamp(18px, 5vw, 80px) 40px; overflow-y: auto; color: var(--sc-ink); font-family: var(--sc-font);
  background: color-mix(in srgb, var(--sc-tint) 300%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transform: scale(1.04); transition: opacity .35s ease, transform .45s var(--sc-ease), visibility 0s linear .35s !important;
}
:root.saryos-create-ui #sc-apps.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease, transform .45s var(--sc-ease) !important; }
#sc-apps .sc-apps-head { display: flex; align-items: center; gap: 16px; width: min(1100px, 100%); margin: 0 auto 32px; }
#sc-apps h2 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.025em; color: var(--sc-ink); }
#sc-apps .sc-apps-find { --sc-r: 13px; flex: 1 1 auto; max-width: 380px; margin-left: auto; display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 44px; color: var(--sc-dim); }
#sc-apps .sc-apps-find input { flex: 1; min-width: 0; font: 400 15px/1 var(--sc-font); }
#sc-apps .sc-apps-done { --sc-r: 13px; --sc-fg: var(--sc-on-tier); --sc-fill: var(--sc-tier); --sc-sh: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 22px rgba(0, 0, 0, .4); appearance: none; cursor: pointer; height: 44px; padding: 0 22px; font: 650 15px/1 var(--sc-font); }
#sc-apps .sc-apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 32px 18px; width: min(1100px, 100%); margin: 0 auto; }
#sc-apps .sc-app { appearance: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 6px 0; font: inherit; }
#sc-apps .sc-app[hidden] { display: none; }
:root.saryos-create-ui #sc-apps .sc-icon-app { width: 78px; height: 78px; border-radius: 22.5%; font-size: 32px; }
:root.saryos-create-ui #sc-apps .sc-icon-app svg { width: 36px; height: 36px; }
#sc-apps .sc-app:hover .sc-icon { transform: translateY(-4px) scale(1.07); }
#sc-apps .sc-app:active .sc-icon { transform: scale(.93); }
#sc-apps .sc-app-name { font-size: 13.5px; font-weight: 500; letter-spacing: -.005em; color: var(--sc-ink); text-align: center; line-height: 1.25; max-width: 110px; text-shadow: var(--sc-shade) !important; }

/* ---- one rule paints every control, heavy enough to win ----
   The site's themes paint every button, input and select with forced colours, gloss, grayscale and
   radii (liquid-glass.css, the theme presets, button-shape.js: up to four id-weights and !important).
   The Create interface's controls carry five, and take their look from the variables above, so each
   state is just a change of variable. */
:root:root:root:root.saryos-create-ui body:is(*, #scx):is(*, #scx):is(*, #scx):is(*, #scx):is(*, #scx) :is(.sc-item, .sc-glass, .sc-input, .sc-search input, .sc-apps-find input, .sc-select select) {
  background: var(--sc-fill, transparent) !important;
  color: var(--sc-fg, var(--sc-ink)) !important; -webkit-text-fill-color: var(--sc-fg, var(--sc-ink)) !important;
  border: var(--sc-border, 0) !important; border-radius: var(--sc-r, 0) !important;
  box-shadow: var(--sc-sh, none) !important;
  backdrop-filter: var(--sc-bf, none) !important; -webkit-backdrop-filter: var(--sc-bf, none) !important;
  /* The Stealth theme greys every button (filter: grayscale(1) !important), which took the gold out. */
  filter: none !important; outline-color: transparent !important;
}
:root:root:root:root.saryos-create-ui body:is(*, #scx):is(*, #scx):is(*, #scx):is(*, #scx):is(*, #scx) :is(.sc-item, .sc-glass) :is(b, small, span):not(.sc-icon):not(.sc-icon *) { color: inherit !important; -webkit-text-fill-color: inherit !important; }
:root:root:root:root.saryos-create-ui body:is(*, #scx):is(*, #scx):is(*, #scx):is(*, #scx):is(*, #scx) :is(.sc-item, .sc-glass) :is(small, .sc-tool-desc) { color: var(--sc-dim) !important; -webkit-text-fill-color: var(--sc-dim) !important; }
:root:root:root:root.saryos-create-ui body:is(*, #scx):is(*, #scx):is(*, #scx):is(*, #scx):is(*, #scx) :is(.sc-nav-btn[aria-selected="true"], .sc-seg-btn[aria-pressed="true"], .sc-go, .sc-apps-done) :is(i, span, b) { color: var(--sc-on-tier) !important; -webkit-text-fill-color: var(--sc-on-tier) !important; }

/* Glyphs on the tier's metal take its ink (the Stealth theme forces every icon to #f5f5f5). */
:root:root:root:root.saryos-create-ui body:is(*, #scx):is(*, #scx):is(*, #scx):is(*, #scx):is(*, #scx) .sc-icon:not(.sc-icon-plain) :is(i, svg, svg *) { color: var(--sc-on-tier) !important; -webkit-text-fill-color: var(--sc-on-tier) !important; }
:root:root:root:root.saryos-create-ui body:is(*, #scx):is(*, #scx):is(*, #scx):is(*, #scx):is(*, #scx) .sc-icon svg :is(path, rect, circle, line, polyline, polygon) { stroke: currentColor !important; }
:root:root:root:root.saryos-create-ui body:is(*, #scx):is(*, #scx):is(*, #scx):is(*, #scx):is(*, #scx) .sc-icon svg { stroke: currentColor !important; fill: none !important; }
:root:root:root:root.saryos-create-ui body:is(*, #scx):is(*, #scx):is(*, #scx):is(*, #scx):is(*, #scx) :is(.sc-icon-plain, .sc-search, .sc-apps-find) :is(i, svg, svg *) { color: var(--sc-ink) !important; -webkit-text-fill-color: var(--sc-ink) !important; }
:root:root:root:root.saryos-create-ui body:is(*, #scx):is(*, #scx):is(*, #scx):is(*, #scx):is(*, #scx) :is(.sc-tool:hover .sc-tool-go, .sc-ll-go) i { color: var(--sc-on-tier) !important; -webkit-text-fill-color: var(--sc-on-tier) !important; }
:root:root:root:root.saryos-create-ui body:is(*, #scx):is(*, #scx):is(*, #scx):is(*, #scx):is(*, #scx) :is(.sc-cat, .sc-proj) i { color: var(--sc-dim) !important; -webkit-text-fill-color: var(--sc-dim) !important; }
:root:root:root:root.saryos-create-ui body:is(*, #scx):is(*, #scx):is(*, #scx):is(*, #scx):is(*, #scx) .sc-cat[aria-current="true"] i, :root:root:root:root.saryos-create-ui body:is(*, #scx):is(*, #scx):is(*, #scx):is(*, #scx):is(*, #scx) .sc-spark { color: var(--sc-a1) !important; -webkit-text-fill-color: var(--sc-a1) !important; }

/* Guide, Talk, Support and Record: one row in the slim bar. */
:root:root:root:root:root.saryos-create-ui #portal-bar .portal-talk-stack { display: flex !important; flex-direction: row; align-items: center; gap: 6px; margin: 0 4px 0 auto !important; min-width: 0; order: 4; }
:root:root:root:root:root.saryos-create-ui #portal-bar .portal-talk-stack > *[class], :root:root:root:root:root.saryos-create-ui #portal-bar .portal-talk-stack > #portal-record-btn#portal-record-btn { width: auto; height: 36px !important; min-height: 36px !important; max-height: 36px; padding: 0 13px !important; grid-area: auto; }
:root:root:root:root:root.saryos-create-ui #portal-bar .portal-talk-stack > *[class][class] { width: auto !important; min-width: max-content !important; max-width: none !important; flex: 0 0 auto !important; }
:root:root:root:root:root.saryos-create-ui #portal-bar .portal-talk-stack > .portal-guide-btn { order: 1; }
:root:root:root:root:root.saryos-create-ui #portal-bar .portal-talk-stack > .portal-narrate-btn { order: 2; }
:root:root:root:root:root.saryos-create-ui #portal-bar .portal-talk-stack > #portal-support-btn { order: 3; }
:root:root:root:root:root.saryos-create-ui #portal-bar .portal-talk-stack > #portal-record-btn { order: 4; }

/* ---- smaller screens ---- */
@media (max-width: 1100px) {
  #sc-home .sc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  #sc-home .sc-page-tools { grid-template-columns: 236px minmax(0, 1fr); }
  #sc-home .sc-main { padding: 26px 22px 30px; }
  :root.saryos-create-ui .sc-search { width: 200px; }
  :root.saryos-create-ui #portal-bar .portal-talk-stack > * span { display: none; }
}
@media (max-width: 700px) {
  :root:root.saryos-create-ui { --portal-bar-core: 58px; }
  :root.saryos-create-ui .sc-nav { margin-left: 4px; }
  :root.saryos-create-ui .sc-nav-btn { padding: 9px 11px; font-size: 13.5px; }
  :root.saryos-create-ui #portal-bar .portal-talk-stack, :root.saryos-create-ui .sc-search { display: none; }
  #sc-home .sc-page-create { padding-top: 22px; }
  #sc-home .sc-card { padding: 16px 14px; min-height: 92px; gap: 12px; flex-direction: column; align-items: flex-start; }
  :root.saryos-create-ui #sc-home .sc-card .sc-icon { width: 40px; height: 40px; font-size: 18px; border-radius: 12px; }
  #sc-home .sc-go { height: 48px; padding: 0 18px; font-size: 16px; }
  #sc-home .sc-page-tools { grid-template-columns: 1fr; }
  #sc-home .sc-side { display: none; }
  #sc-home .sc-main { padding: 20px 16px 28px; }
  #sc-home .sc-grid { grid-template-columns: 1fr; }
  #sc-apps .sc-apps-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 8px; }
  :root.saryos-create-ui #sc-apps .sc-icon-app { width: 60px; height: 60px; font-size: 26px; }
  #sc-apps .sc-app-name { font-size: 11.5px; }
  #sc-apps .sc-apps-head { flex-wrap: wrap; }
}
/* Still (the SaryOS menu's Animated / Still): nothing here moves; the smoke holds one frame. */
:root:root:root.saryos-create-ui.sc-still body:is(*, #scr):is(*, #scr) :is(.sc-glass, .sc-icon, #sc-home, #sc-apps, .sc-hero-word, .sc-go, .sc-ll-bar, .sc-ll-dot, .sc-mic, .sc-enter *),
:root:root:root.saryos-create-ui.sc-still body:is(*, #scr):is(*, #scr) .sc-glass::before,
:root:root:root.saryos-create-ui.sc-still body:is(*, #scr):is(*, #scr) #lg-rim { animation: none !important; }

/* No motion where it is asked for: the smoke holds one frame (portal-create-smoke.js), nothing here
   moves. Heavier than the rules above, which carry !important to stand against perf-lite. */
@media (prefers-reduced-motion: reduce) {
  :root:root:root.saryos-create-ui body:is(*, #scr):is(*, #scr) :is(.sc-glass, .sc-icon, #sc-home, #sc-apps, .sc-hero-word, .sc-go, .sc-ll-bar, .sc-ll-dot, .sc-mic, .sc-enter *),
  :root:root:root.saryos-create-ui body:is(*, #scr):is(*, #scr) .sc-glass::before, :root:root:root.saryos-create-ui body:is(*, #scr):is(*, #scr) .sc-icon::after,
  :root:root:root.saryos-create-ui body:is(*, #scr):is(*, #scr) #lg-rim { animation: none !important; }
}

/* ---- the bar, in the same glass ---- */
:root:root:root:root:root.saryos-create-ui #portal-bar {
  background: var(--sc-bar) !important; color: var(--sc-ink) !important;
  border-bottom: 1px solid var(--sc-line) !important;
  backdrop-filter: blur(24px) saturate(1.8) !important; -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--sc-a1) 14%, transparent), 0 8px 30px rgba(0, 0, 0, .18) !important;
}
:root:root:root:root:root.saryos-create-ui body:is(*, #scx):is(*, #scx) #portal-bar :is(.portal-talk-stack > *, .portal-signin, .portal-btn) {
  background: var(--sc-glass-fill) !important; color: var(--sc-ink) !important; -webkit-text-fill-color: var(--sc-ink) !important;
  border: 1px solid var(--sc-line) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14) !important; filter: none !important;
}
:root:root:root:root:root.saryos-create-ui body:is(*, #scx):is(*, #scx) #portal-bar :is(.portal-talk-stack > *, .portal-signin, .portal-btn) :is(i, span, b) { color: inherit !important; -webkit-text-fill-color: inherit !important; }
:root:root:root:root:root.saryos-create-ui body:is(*, #scx):is(*, #scx) #portal-bar #portal-record-btn i { color: #ef4444 !important; -webkit-text-fill-color: #ef4444 !important; }

/* ---- the SaryOS menu's Appearance: three pairs, side by side ---- */
:root.saryos-create-ui #portal-brand-menu .pbm-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 2px 8px 6px; }
:root.saryos-create-ui #portal-brand-menu .pbm-seg > button { justify-content: center; min-width: 0; white-space: nowrap; }
:root.saryos-create-ui #portal-brand-menu .pbm-seg[hidden] { display: none; }
:root.saryos-create-ui #portal-brand-menu { min-width: 290px; }

/* ---- behind everything: never the white page ----
   A dark ground under every panel (portal-create.js #sc-ground), so a stage or tool that lets the page
   through (LiveLoop's, whose welcome pills and title are white) never shows the browser's white. */
#sc-ground { display: none; }
:root.saryos-create-ui #sc-ground { display: block; position: fixed; inset: 0; z-index: -3; pointer-events: none; background: var(--sc-ground, #000); }
/* The backdrop's own black would cover the Translucent ground. */
:root:root:root:root:root.saryos-create-ui #portal-backdrop-site { background: transparent !important; }

/* ---- LiveLoop's sign-in pills: their own dark glass, readable over anything ---- */
:root:root:root:root.saryos-create-ui body:is(*, #scx):is(*, #scx) #portal-welcome .pw-pill:not(.pw-primary) {
  background: rgba(10, 10, 12, .74) !important; color: #f5f5f7 !important; -webkit-text-fill-color: #f5f5f7 !important;
  border: 1px solid rgba(255, 255, 255, .16) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 28px rgba(0, 0, 0, .35) !important;
  backdrop-filter: blur(16px) saturate(1.4) !important; -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
}
:root:root:root:root.saryos-create-ui body:is(*, #scx):is(*, #scx) #portal-welcome .pw-pill:not(.pw-primary) :is(.pw-label, .pw-label *, a) { color: #f5f5f7 !important; -webkit-text-fill-color: #f5f5f7 !important; }
:root:root:root:root.saryos-create-ui body:is(*, #scx):is(*, #scx) #portal-welcome .pw-pill:not(.pw-primary) .pw-subs { color: rgba(245, 245, 247, .62) !important; -webkit-text-fill-color: rgba(245, 245, 247, .62) !important; }
:root:root:root:root.saryos-create-ui body:is(*, #scx):is(*, #scx) #portal-welcome .pw-field input {
  background: rgba(255, 255, 255, .08) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; caret-color: #ffffff;
  border: 1px solid rgba(255, 255, 255, .22) !important; border-radius: 9px !important; padding: 9px 11px !important; box-shadow: none !important;
}
:root:root:root:root.saryos-create-ui body:is(*, #scx):is(*, #scx) #portal-welcome .pw-field input::placeholder { color: rgba(255, 255, 255, .5) !important; -webkit-text-fill-color: rgba(255, 255, 255, .5) !important; }
:root:root:root:root.saryos-create-ui body:is(*, #scx):is(*, #scx) #portal-welcome .pw-primary { background: #f5f5f7 !important; color: #0a0a0a !important; -webkit-text-fill-color: #0a0a0a !important; border-color: #f5f5f7 !important; }
:root:root:root:root.saryos-create-ui body:is(*, #scx):is(*, #scx) #portal-welcome .pw-primary :is(.pw-label, .pw-subs) { color: #0a0a0a !important; -webkit-text-fill-color: #0a0a0a !important; }
:root:root:root:root.saryos-create-ui body:is(*, #scx):is(*, #scx) #portal-welcome .pw-note { color: #f5f5f7 !important; -webkit-text-fill-color: #f5f5f7 !important; text-shadow: 0 2px 18px rgba(0, 0, 0, .7) !important; }
/* Welcome to Sary-OS in the purple of Flow's Start a flow (owner, 2026-10-24: "change this the same purple as in"
   Start a flow; saryos-desk.css .desk-flow-start). */
:root:root:root:root.saryos-create-ui body:is(*, #scx):is(*, #scx) #portal-welcome .pw-title {
  color: #7c5cff !important; background: linear-gradient(135deg, #7c5cff, #a855f7) !important;
  -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

/* ---- Lines: the field behind every page and panel ----
   Over the dark field the words that sit on the page itself (not on a glass panel) are white in either theme. */
:root:root.saryos-create-ui.sc-wall-lines #sc-home :is(.sc-hero, .sc-hero-sub, .sc-eyebrow, .sc-title, .sc-sub),
:root:root.saryos-create-ui.sc-wall-lines #sc-apps :is(h2, .sc-app-name) { color: #f5f5f7 !important; -webkit-text-fill-color: #f5f5f7 !important; text-shadow: 0 2px 24px rgba(0, 0, 0, .7) !important; }
:root:root.saryos-create-ui.sc-wall-lines #sc-home .sc-hero-word { -webkit-text-fill-color: transparent !important; }

/* ---- every tool's icon moves in its own way (owner, 2026-10-16: "can we animate each of the logos too
   for tools") ----
   The glyph inside each icon tile (.sc-icon[data-ic], the tool's id) loops a short motion of its own,
   mostly at rest with a beat every few seconds, staggered so the grid never moves in step; hover plays
   it faster. Transform only. Still and Reduce Motion hold them (below). */
:root.saryos-create-ui .sc-icon[data-ic] > :is(i, svg) { display: inline-block; transform-origin: 50% 50%; will-change: transform; animation: var(--ic-anim, none) !important; animation-delay: calc(var(--i, 0) * -.43s) !important; }
:root.saryos-create-ui :is(.sc-glass, .sc-app, .sc-recent-item):hover .sc-icon[data-ic] > :is(i, svg) { animation-duration: var(--ic-fast, 1.2s) !important; }
.sc-icon[data-ic="liveloop"]    { --ic-anim: ic-zap 3.2s ease-in-out infinite; }
.sc-icon[data-ic="split"]       { --ic-anim: ic-breathe 3s ease-in-out infinite; }
.sc-icon[data-ic="project"]     { --ic-anim: ic-tilt 4s ease-in-out infinite; }
.sc-icon[data-ic="chat"]        { --ic-anim: ic-bob 2.6s ease-in-out infinite; }
.sc-icon[data-ic="canvas"]      { --ic-anim: ic-turn 4.4s cubic-bezier(.7, 0, .3, 1) infinite; }
.sc-icon[data-ic="studio"]      { --ic-anim: ic-clap 3s ease-in-out infinite; transform-origin: 20% 80%; }
.sc-icon[data-ic="gallery"]     { --ic-anim: ic-zoom 4s ease-in-out infinite; }
.sc-icon[data-ic="video-gen"]   { --ic-anim: ic-roll 2.8s linear infinite; }
.sc-icon[data-ic="image-gen"]   { --ic-anim: ic-zoom 3.6s ease-in-out infinite; }
.sc-icon[data-ic="music"]       { --ic-anim: ic-bounce 1.8s ease-in-out infinite; }
.sc-icon[data-ic="player"]      { --ic-anim: ic-beat 1.6s ease-in-out infinite; }
.sc-icon[data-ic="voiceover"]   { --ic-anim: ic-speak 2.2s ease-in-out infinite; }
.sc-icon[data-ic="slides"]      { --ic-anim: ic-flip 5s ease-in-out infinite; }
.sc-icon[data-ic="podcast"]     { --ic-anim: ic-pulse 2s ease-in-out infinite; }
.sc-icon[data-ic="imagelab"]    { --ic-anim: ic-wave 2.4s ease-in-out infinite; transform-origin: 20% 80%; }
.sc-icon[data-ic="architect"]   { --ic-anim: ic-drop 3.4s cubic-bezier(.3, 1.4, .5, 1) infinite; }
.sc-icon[data-ic="game"]        { --ic-anim: ic-shake 3.2s ease-in-out infinite; }
.sc-icon[data-ic="doclab"]      { --ic-anim: ic-write 2.8s ease-in-out infinite; }
.sc-icon[data-ic="analysis"]    { --ic-anim: ic-scan 3.2s ease-in-out infinite; }
.sc-icon[data-ic="vault"]       { --ic-anim: ic-think 2.6s ease-in-out infinite; }
.sc-icon[data-ic="canvas-solo"] { --ic-anim: ic-expand 3.4s ease-in-out infinite; }
.sc-icon[data-ic="social"]      { --ic-anim: ic-pop 3s ease-in-out infinite; }
.sc-icon[data-ic="more"]        { --ic-anim: ic-turn 5s cubic-bezier(.7, 0, .3, 1) infinite; }
@keyframes ic-zap { 0%, 70%, 100% { transform: none; opacity: 1; } 74% { transform: scale(1.18) rotate(-8deg); } 77% { opacity: .55; } 80% { transform: scale(.94); opacity: 1; } 84% { transform: scale(1.1) rotate(4deg); } }
@keyframes ic-breathe { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.18); } }
@keyframes ic-tilt { 0%, 60%, 100% { transform: none; } 72% { transform: rotate(-10deg) translateY(-1px); } 84% { transform: rotate(4deg); } }
@keyframes ic-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px) rotate(-3deg); } }
@keyframes ic-turn { 0%, 55% { transform: rotate(0); } 75%, 100% { transform: rotate(90deg); } }
@keyframes ic-clap { 0%, 70%, 100% { transform: none; } 76% { transform: rotate(-14deg); } 82% { transform: rotate(2deg); } }
@keyframes ic-zoom { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes ic-roll { 0% { transform: translateX(-2px); } 50% { transform: translateX(2px); } 100% { transform: translateX(-2px); } }
@keyframes ic-bounce { 0%, 100% { transform: translateY(0) scale(1, 1); } 30% { transform: translateY(-5px) scale(.95, 1.06); } 55% { transform: translateY(0) scale(1.06, .94); } 70% { transform: translateY(-1px); } }
@keyframes ic-beat { 0%, 40%, 100% { transform: scale(1); } 10% { transform: scale(1.14); } 22% { transform: scale(1.04); } 30% { transform: scale(1.12); } }
@keyframes ic-speak { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.08, .94); } 40% { transform: scale(.96, 1.06); } 60% { transform: scale(1.06, .96); } }
@keyframes ic-flip { 0%, 60% { transform: perspective(80px) rotateY(0); } 80%, 100% { transform: perspective(80px) rotateY(360deg); } }
@keyframes ic-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: .82; } }
@keyframes ic-wave { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(14deg); } }
@keyframes ic-drop { 0%, 55% { transform: translateY(0); } 62% { transform: translateY(-7px); } 72%, 100% { transform: translateY(0); } }
@keyframes ic-shake { 0%, 70%, 100% { transform: none; } 73% { transform: rotate(-9deg); } 76% { transform: rotate(9deg); } 79% { transform: rotate(-6deg); } 82% { transform: rotate(4deg); } }
@keyframes ic-write { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-1.5px, 1px) rotate(-5deg); } 50% { transform: translate(1.5px, 0) rotate(3deg); } 75% { transform: translate(-1px, -1px) rotate(-2deg); } }
@keyframes ic-scan { 0%, 100% { transform: translate(-2px, -2px); } 25% { transform: translate(2px, -2px); } 50% { transform: translate(2px, 2px); } 75% { transform: translate(-2px, 2px); } }
@keyframes ic-think { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes ic-expand { 0%, 50%, 100% { transform: scale(1); } 65% { transform: scale(1.2); } 80% { transform: scale(.94); } }
@keyframes ic-pop { 0%, 65%, 100% { transform: scale(1); } 72% { transform: scale(1.25) rotate(-6deg); } 80% { transform: scale(.92); } 88% { transform: scale(1.05); } }
:root:root:root.saryos-create-ui.sc-still body:is(*, #scr):is(*, #scr) .sc-icon[data-ic] > :is(i, svg) { animation: none !important; }
@media (prefers-reduced-motion: reduce) { :root:root:root.saryos-create-ui body:is(*, #scr):is(*, #scr) .sc-icon[data-ic] > :is(i, svg) { animation: none !important; } }

/* ---- the Images page: Trending and Templates, Nano Banana card art, a composer that takes a photo ---- */
#sc-home:not([data-page="images"]) .sc-page-images, #sc-home:not([data-page="videos"]) .sc-page-videos,
#sc-home:is([data-page="images"], [data-page="videos"]) :is(.sc-page-create, .sc-page-tools) { display: none !important; }
#sc-home :is(.sc-page-images, .sc-page-videos) { overflow-y: auto; padding: 22px clamp(16px, 4vw, 56px) 200px; box-sizing: border-box; }
#sc-home .sc-img-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; width: min(1240px, 100%); margin: 0 auto 22px; }
#sc-home .sc-img-head .sc-back { margin: 0; }
#sc-home .sc-img-head .sc-title { font-size: clamp(28px, 2.6vw, 40px); margin-right: auto; }
#sc-home .sc-img-head .sc-seg-btn { padding: 11px 20px; font-size: 15px; }
#sc-home .sc-img-head .sc-seg-btn[aria-selected="true"] { --sc-fg: var(--sc-on-tier); --sc-fill: var(--sc-tier); --sc-sh: inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 14px rgba(0, 0, 0, .35); }
#sc-home .sc-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; width: min(1240px, 100%); margin: 0 auto; }
#sc-home .sc-style {
  appearance: none; position: relative; padding: 0; border: 0; cursor: pointer; aspect-ratio: 3 / 4; border-radius: 26px; overflow: hidden; isolation: isolate;
  background: #111; box-shadow: 0 14px 34px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: transform .3s var(--sc-ease), box-shadow .3s !important;
}
#sc-home .sc-style img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--sc-ease) !important; }
#sc-home .sc-style::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .62)); z-index: 1; pointer-events: none; }
#sc-home .sc-style-label { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; text-align: left; font: 600 19px/1.15 var(--sc-font); letter-spacing: -.01em; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .6) !important; }
#sc-home .sc-style-photo { position: absolute; top: 12px; right: 12px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; background: rgba(0, 0, 0, .45); backdrop-filter: blur(8px); }
#sc-home .sc-style:hover { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(0, 0, 0, .5), 0 0 0 1px color-mix(in srgb, var(--sc-a1) 50%, transparent) !important; }
#sc-home .sc-style:hover img { transform: scale(1.06); }
#sc-home .sc-style[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--sc-a1), 0 0 34px color-mix(in srgb, var(--sc-a1) 50%, transparent), 0 18px 40px rgba(0, 0, 0, .5) !important; transform: translateY(-2px); }
:root.saryos-create-ui .sc-enter .sc-style { animation: sc-rise .9s var(--sc-ease) both !important; animation-delay: calc(var(--i, 0) * 45ms + 120ms) !important; }
#sc-home .sc-img-composer {
  --sc-r: 28px; position: fixed; left: 50%; bottom: max(18px, var(--sa-bottom, 0px)); transform: translateX(-50%); z-index: 5;
  width: min(820px, calc(100% - 32px)); box-sizing: border-box; padding: 14px 14px 12px 20px; display: flex; flex-direction: column; gap: 6px;
}
#sc-home .sc-img-composer::before { opacity: .55; }
#sc-home .sc-img-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#sc-home .sc-img-chips:empty { display: none; }
#sc-home .sc-img-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 4px; border-radius: 12px; background: var(--sc-tint); border: 1px solid var(--sc-line); font-size: 13px; color: var(--sc-ink); }
#sc-home .sc-img-chip img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; }
#sc-home .sc-img-chip button { --sc-r: 50%; appearance: none; width: 22px; height: 22px; padding: 0; cursor: pointer; font-size: 15px; line-height: 1; }
#sc-home .sc-img-input { --sc-r: 0; resize: none; font: 400 18px/1.4 var(--sc-font); padding: 8px 0 4px; max-height: 140px; }
#sc-home .sc-img-input::placeholder { color: var(--sc-dim); }
#sc-home .sc-img-row { display: flex; align-items: center; gap: 8px; }
#sc-home .sc-img-hint { flex: 1; font-size: 13px; color: var(--sc-dim); }
#sc-home .sc-img-photo { --sc-r: 14px; --sc-border: 1px solid var(--sc-line); appearance: none; width: 46px; height: 46px; font-size: 20px; cursor: pointer; }
#sc-home .sc-img-photo.is-wanted { --sc-border: 1px solid var(--sc-a1); --sc-sh: 0 0 18px color-mix(in srgb, var(--sc-a1) 50%, transparent); animation: sc-pulse 1.4s ease-in-out infinite !important; }
#sc-home .sc-img-send { --sc-r: 50%; --sc-fg: var(--sc-on-tier); --sc-fill: var(--sc-tier); --sc-sh: inset 0 1px 0 rgba(255, 255, 255, .5), 0 6px 18px rgba(0, 0, 0, .35); appearance: none; width: 48px; height: 48px; font-size: 18px; cursor: pointer; }
:root:root:root:root.saryos-create-ui body:is(*, #scx):is(*, #scx):is(*, #scx):is(*, #scx):is(*, #scx) .sc-img-send i { color: var(--sc-on-tier) !important; -webkit-text-fill-color: var(--sc-on-tier) !important; }
:root:root:root:root.saryos-create-ui body:is(*, #scx):is(*, #scx):is(*, #scx):is(*, #scx):is(*, #scx) :is(.sc-img-input) { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--sc-ink) !important; -webkit-text-fill-color: var(--sc-ink) !important; outline: 0 !important; }
:root:root:root:root.saryos-create-ui body:is(*, #scx):is(*, #scx):is(*, #scx):is(*, #scx):is(*, #scx) .sc-style { background: #111 !important; border: 0 !important; filter: none !important; }
@media (max-width: 700px) {
  #sc-home .sc-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #sc-home .sc-style { border-radius: 20px; }
  #sc-home .sc-style-label { font-size: 16px; left: 14px; bottom: 12px; }
}

/* ---- the Video page: four ideas, each a moving card ---- */
#sc-home .sc-img-lede { width: min(1240px, 100%); margin: -8px auto 20px; font-size: 17px; color: var(--sc-dim); }
#sc-home .sc-styles-video { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#sc-home .sc-style video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease !important; }
#sc-home .sc-style video.is-ready { opacity: 1; }
/* Until a card's clip exists, its still moves: a slow push-in with a drift, each card its own way. */
@keyframes sc-kb-a { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.14) translate(-2%, -2%); } }
@keyframes sc-kb-b { from { transform: scale(1.12) rotate(-1.5deg); } to { transform: scale(1.02) rotate(1.5deg); } }
#sc-home .sc-styles-video .sc-style img { animation: sc-kb-a 7s ease-in-out infinite alternate !important; }
#sc-home .sc-styles-video .sc-style:nth-child(even) img { animation-name: sc-kb-b !important; animation-duration: 6s !important; }
:root.saryos-create-ui.sc-still #sc-home .sc-styles-video .sc-style img { animation: none !important; }
@media (max-width: 1100px) { #sc-home .sc-styles-video { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- the photo pop-up: Drive or Computer ---- */
#sc-photo-pick { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; }
#sc-photo-pick[hidden] { display: none; }
#sc-photo-pick .spp-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#sc-photo-pick .spp-card { --sc-r: 28px; position: relative; width: min(440px, calc(100% - 32px)); padding: 26px 24px 22px; text-align: center; transform: translateY(12px) scale(.97); opacity: 0; transition: transform .35s var(--sc-ease), opacity .3s ease !important; }
#sc-photo-pick.is-open .spp-card { transform: none; opacity: 1; }
#sc-photo-pick .spp-x { --sc-r: 50%; --sc-fill: var(--sc-tint); position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; font-size: 22px; line-height: 1; cursor: pointer; z-index: 3; }
#sc-photo-pick .spp-art { width: 96px; height: 128px; object-fit: cover; border-radius: 16px; box-shadow: 0 12px 30px rgba(0, 0, 0, .45); }
#sc-photo-pick h3 { margin: 14px 0 4px; font: 700 22px/1.2 var(--sc-font); color: var(--sc-ink); }
#sc-photo-pick .spp-sub { margin: 0 0 18px; font-size: 14.5px; color: var(--sc-dim); }
#sc-photo-pick .spp-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#sc-photo-pick .spp-btn { --sc-r: 18px; --sc-fill: var(--sc-tint); --sc-border: 1px solid var(--sc-line); appearance: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 10px; font: inherit; transition: transform .2s var(--sc-ease) !important; }
#sc-photo-pick .spp-btn i { font-size: 26px; color: var(--sc-a1) !important; -webkit-text-fill-color: var(--sc-a1) !important; }
#sc-photo-pick .spp-btn b { font-size: 16px; }
#sc-photo-pick .spp-btn small { font-size: 12.5px; color: var(--sc-dim) !important; -webkit-text-fill-color: var(--sc-dim) !important; }
#sc-photo-pick .spp-btn:hover { --sc-border: 1px solid var(--sc-a1); transform: translateY(-2px); }

/* ---- LiveLoop's toolbar, simpler (owner, 2026-10-16: "remove playtest, camera, visuals (remove it/off).
   Single mode/project mode, make it different colour when selected. From the left have New, Versions,
   Project, Download, Record ... then far right git, terminal, render, API etc. Then everything else in the
   middle ... Do same for project mode"). Layout only, from here: LiveLoop's own files are not touched (its
   freeze, 2026-10-07). Its buttons sit in one wrapping row (.liveloop-header-row1) and its tool group is
   unwrapped, so each button is ordered on its own: left, middle, right. Visuals is set off in app.html. */
:root.saryos-create-ui #liveloop-container :is(#liveloop-playtest-btn, #liveloop-camera-btn, #liveloop-visuals-btn) { display: none !important; }
:root.saryos-create-ui #liveloop-container .liveloop-header-row1 { flex-wrap: wrap !important; row-gap: 8px; align-items: center; }
:root.saryos-create-ui #liveloop-container :is(.liveloop-tools, #liveloop-project-tools:not(.hidden), .liveloop-report-anchor) { display: contents !important; }
/* LiveLoop's More (liveloop-layout.js) folds the tool row away below 900px only. The rule above unwraps
   its holder too, which put More on screen at every width doing nothing (owner, 2026-10-18: "whats the
   more button do on liveloop? I click it and nothing happens"); from 900px up it is hidden again. */
@media (min-width: 900px) { :root:root.saryos-create-ui #liveloop-container #liveloop-more-btn { display: none !important; } }
/* Left: the session, its mode, then New, Versions, Projects, Download, Record. */
:root.saryos-create-ui #liveloop-container .liveloop-title { order: 1; }
:root.saryos-create-ui #liveloop-container #liveloop-project-name { order: 2; }
:root.saryos-create-ui #liveloop-container .liveloop-mode { order: 3; }
:root.saryos-create-ui #liveloop-container #liveloop-context { order: 4; }
:root.saryos-create-ui #liveloop-container #liveloop-new-btn { order: 10; }
:root.saryos-create-ui #liveloop-container #liveloop-versions-btn { order: 11; }
:root.saryos-create-ui #liveloop-container #liveloop-compare-btn { order: 11; } /* Split preview, beside Versions (2026-10-19) */
:root.saryos-create-ui #liveloop-container :is(#liveloop-queue-btn, #liveloop-tasks-btn) { order: 11; } /* Queue and Tasks (2026-10-21) */
:root.saryos-create-ui #liveloop-container #liveloop-files-btn { order: 12; }
:root.saryos-create-ui #liveloop-container :is(#liveloop-download-btn, #liveloop-project-export) { order: 13; }
:root.saryos-create-ui #liveloop-container #liveloop-record-btn { order: 14; }
/* Middle: everything else, starting after a gap. */
:where(:root.saryos-create-ui #liveloop-container) :where(.liveloop-header-row1 > *, .liveloop-tools > *, #liveloop-project-tools > *, .liveloop-report-anchor > *) { order: 50; }
:root.saryos-create-ui #liveloop-container #liveloop-project-meta { order: 49; }
:root.saryos-create-ui #liveloop-container #liveloop-checkpoint-btn { order: 45; margin-left: auto !important; }
/* Right: Git, Terminal, Render, Connect AI, API keys, Today's work, then Back. */
:root.saryos-create-ui #liveloop-container #liveloop-git-btn { order: 90; margin-left: auto !important; }
:root.saryos-create-ui #liveloop-container #liveloop-bridge-btn { order: 91; }
:root.saryos-create-ui #liveloop-container #liveloop-render-btn { order: 92; }
:root.saryos-create-ui #liveloop-container #liveloop-mcp-btn { order: 93; }
:root.saryos-create-ui #liveloop-container #liveloop-byok-btn { order: 94; }
:root.saryos-create-ui #liveloop-container #liveloop-report-btn { order: 95; }
:root.saryos-create-ui #liveloop-container #liveloop-close-btn { order: 99; }
/* Single file / Project: the chosen one in the skin's metal, the other plain. */
:root:root:root:root.saryos-create-ui body:is(*, #scx):is(*, #scx):is(*, #scx) #liveloop-container .liveloop-mode > button[aria-pressed="true"] {
  background: var(--sc-tier) !important; color: var(--sc-on-tier) !important; -webkit-text-fill-color: var(--sc-on-tier) !important;
  border-color: transparent !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 14px color-mix(in srgb, var(--sc-a1) 35%, transparent) !important; font-weight: 700 !important;
  filter: none !important; /* the Stealth theme greys every button */
}
:root:root:root:root.saryos-create-ui body:is(*, #scx):is(*, #scx):is(*, #scx) #liveloop-container .liveloop-mode > button[aria-pressed="false"] {
  background: transparent !important; color: var(--sc-dim) !important; -webkit-text-fill-color: var(--sc-dim) !important; box-shadow: none !important;
}

/* The Category drop-down beside Grid / List is gone (owner, 2026-10-16: "remove the drop down box next to list
   view on all sections"); the sidebar's categories do the same. */
:root.saryos-create-ui #sc-home .sc-select { display: none !important; }

/* ---- the drop-down menu (owner, 2026-10-16: "change all drop down to better format than this ... on
   everything"). sary-select.js opens it for every select in the Create interface instead of the browser's
   own list: the skin's glass, compact rows, a tick on the chosen one, the accent on the one under the
   finger. Default (solid) gives it the panels' opaque colour. */
:root:root.saryos-create-ui .sary-select-menu {
  position: fixed; z-index: 2147483000; box-sizing: border-box;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 6px; border-radius: 14px;
  font: 500 14px/1.3 var(--sc-font); color: var(--sc-ink, #f5f5f5);
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 40%), rgba(10, 10, 12, .97);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid color-mix(in srgb, var(--sc-a1, #d4af37) 34%, rgba(255, 255, 255, .1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 18px 48px rgba(0, 0, 0, .55), 0 0 0 .5px rgba(0, 0, 0, .4);
  opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top center;
  transition: opacity .14s ease, transform .18s var(--sc-ease);
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
:root:root.saryos-create-ui .sary-select-menu.is-up { transform: translateY(4px) scale(.98); transform-origin: bottom center; }
:root:root.saryos-create-ui .sary-select-menu.is-open { opacity: 1; transform: none; }
:root:root.saryos-create-ui:is([data-glass="light"], .light-mode) .sary-select-menu {
  background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03) 55%), rgba(58, 56, 70, .97);
  border-color: rgba(255, 255, 255, .26);
}
:root:root.saryos-create-ui:has(> body.portal-solid) .sary-select-menu { -webkit-backdrop-filter: none; backdrop-filter: none; background: #0a0a0a; }
:root:root.saryos-create-ui:is([data-glass="light"], .light-mode):has(> body.portal-solid) .sary-select-menu { background: #625e6b; }
:root:root.saryos-create-ui .sary-select-item {
  position: relative; display: flex; align-items: center; min-height: 36px; box-sizing: border-box;
  padding: 8px 34px 8px 12px; border-radius: 9px; cursor: pointer; user-select: none; -webkit-user-select: none;
  color: var(--sc-ink, #f5f5f5); -webkit-tap-highlight-color: transparent;
}
:root:root.saryos-create-ui .sary-select-item.in-group { padding-left: 20px; }
:root:root.saryos-create-ui .sary-select-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root:root.saryos-create-ui .sary-select-item.is-active { background: rgba(255, 255, 255, .09); }
:root:root.saryos-create-ui .sary-select-item.is-selected { color: var(--sc-a3, #f5e6b8); font-weight: 650; }
:root:root.saryos-create-ui .sary-select-item.is-selected::after {
  content: ''; position: absolute; right: 13px; top: 50%; width: 5px; height: 10px; margin-top: -7px;
  border: solid var(--sc-a1, #d4af37); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
:root:root.saryos-create-ui:is([data-glass="light"], .light-mode) .sary-select-item.is-selected { color: #fff; }
:root:root.saryos-create-ui:is([data-glass="light"], .light-mode) .sary-select-item.is-selected::after { border-color: #fff; }
:root:root.saryos-create-ui:is([data-glass="light"], .light-mode) .sary-select-item.is-active { background: rgba(255, 255, 255, .16); }
:root:root.saryos-create-ui .sary-select-item.is-disabled { opacity: .4; cursor: default; }
:root:root.saryos-create-ui .sary-select-group {
  padding: 10px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sc-faint, #737373);
}
:root:root.saryos-create-ui .sary-select-group:first-child { padding-top: 4px; }
@media (pointer: coarse) { :root:root.saryos-create-ui .sary-select-item { min-height: 42px; font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { :root:root.saryos-create-ui .sary-select-menu { transition: none; } }

/* ---- LiveLoop, the flagship (owner, 2026-10-16: "It needs its own button, animated, with details about
   what it can do") ----
   A banner on the Create page above the cards: the loop drawing itself, the gold rim always turning (not
   only on hover), a live dot, the six things LiveLoop does, and Open LiveLoop in the metal. In the bar,
   LiveLoop carries a live dot and a slow sheen. Still and Reduce Motion hold all of it. */
@property --sc-flag-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
:root.saryos-create-ui #sc-home .sc-flagship {
  --sc-r: 24px; display: block; margin: 4px auto 26px; padding: 24px 26px 22px; text-align: left; border-radius: 24px;
  --sc-sh: var(--sc-glass-shadow-hi);
}
:root.saryos-create-ui #sc-home .sc-flagship::before { opacity: 1 !important; padding: 1.6px; animation-duration: 6s !important; }
:root.saryos-create-ui #sc-home .sc-flagship .sc-flag-hit { position: absolute; inset: 0; z-index: 1; border: 0; background: none !important; box-shadow: none !important; cursor: pointer; border-radius: inherit; }
:root.saryos-create-ui #sc-home .sc-flag-top { position: relative; z-index: 3; display: flex; align-items: center; gap: 22px; pointer-events: none; }
:root.saryos-create-ui #sc-home .sc-flag-top .sc-flag-go { pointer-events: auto; }
:root.saryos-create-ui #sc-home .sc-flag-mark {
  flex: 0 0 auto; width: 112px; height: 72px; display: grid; place-items: center; border-radius: 18px;
  background: radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--sc-a1) 26%, transparent), transparent 70%), rgba(0, 0, 0, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 34px color-mix(in srgb, var(--sc-a1) 26%, transparent);
}
:root.saryos-create-ui #sc-home .sc-flag-mark svg { width: 92px; height: 46px; overflow: visible; }
:root.saryos-create-ui #sc-home .sc-flag-mark path { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
:root.saryos-create-ui #sc-home .sc-flag-track { stroke: color-mix(in srgb, var(--sc-a1) 22%, transparent); }
:root.saryos-create-ui #sc-home .sc-flag-run {
  stroke: var(--sc-a3); stroke-dasharray: 46 230; filter: drop-shadow(0 0 6px var(--sc-a1));
  animation: sc-flag-run 2.6s linear infinite !important;
}
@keyframes sc-flag-run { from { stroke-dashoffset: 276; } to { stroke-dashoffset: 0; } }
:root.saryos-create-ui #sc-home .sc-flag-text { flex: 1 1 auto; min-width: 0; }
:root.saryos-create-ui #sc-home .sc-flag-eyebrow { display: flex; align-items: center; gap: 10px; font: 650 11.5px/1 var(--sc-font); letter-spacing: .14em; text-transform: uppercase; color: var(--sc-dim); }
:root.saryos-create-ui #sc-home .sc-flag-live { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 99px; color: var(--sc-on-tier); background: var(--sc-tier); letter-spacing: .1em; }
:root.saryos-create-ui #sc-home .sc-flag-live i, :root.saryos-create-ui .sc-nav-ll-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 0 rgba(255, 59, 48, .6);
  animation: sc-flag-pulse 1.8s ease-out infinite !important;
}
@keyframes sc-flag-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 59, 48, .6); } 70% { box-shadow: 0 0 0 8px rgba(255, 59, 48, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); } }
:root.saryos-create-ui #sc-home .sc-flag-title {
  margin: 8px 0 6px; font: 800 clamp(30px, 3.4vw, 46px)/1 var(--sc-font); letter-spacing: -.035em;
  background: linear-gradient(100deg, var(--sc-ink) 0%, var(--sc-ink) 40%, var(--sc-a3) 50%, var(--sc-ink) 60%, var(--sc-ink) 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: sc-flag-shine 5s ease-in-out infinite !important;
}
@keyframes sc-flag-shine { 0%, 30% { background-position: 100% 0; } 70%, 100% { background-position: 0% 0; } }
:root.saryos-create-ui #sc-home .sc-flag-lede { margin: 0; max-width: 62ch; font: 450 15px/1.45 var(--sc-font); color: var(--sc-dim); }
:root.saryos-create-ui #sc-home .sc-flag-go {
  --sc-r: 16px; --sc-fg: var(--sc-on-tier); --sc-fill: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%) 130% 0 / 250% 100% no-repeat, var(--sc-tier);
  --sc-sh: inset 0 1px 0 rgba(255, 255, 255, .6), 0 12px 32px rgba(0, 0, 0, .5), 0 0 30px color-mix(in srgb, var(--sc-a1) 34%, transparent);
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; padding: 16px 22px; cursor: pointer;
  font: 700 16px/1 var(--sc-font); white-space: nowrap; animation: sc-flag-sweep 3.6s ease-in-out infinite !important;
}
@keyframes sc-flag-sweep { 0%, 55% { background-position: 130% 0, 0 0; } 100% { background-position: -30% 0, 0 0; } }
:root.saryos-create-ui #sc-home .sc-flag-points {
  position: relative; z-index: 2; pointer-events: none; list-style: none; margin: 20px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px;
}
:root.saryos-create-ui #sc-home .sc-flag-points li { display: flex; gap: 11px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .06); }
:root.saryos-create-ui #sc-home .sc-flag-points li > i { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; font-size: 13px; color: var(--sc-on-tier); background: var(--sc-tier); animation: sc-flag-beat 6s ease-in-out infinite !important; animation-delay: calc(var(--i) * 1s) !important; }
@keyframes sc-flag-beat { 0%, 84%, 100% { transform: none; } 90% { transform: scale(1.14) rotate(-6deg); } 95% { transform: scale(.98); } }
:root.saryos-create-ui #sc-home .sc-flag-points b { display: block; font: 680 13.5px/1.2 var(--sc-font); color: var(--sc-ink); }
:root.saryos-create-ui #sc-home .sc-flag-points small { display: block; margin-top: 3px; font: 450 12.5px/1.35 var(--sc-font); color: var(--sc-dim); }
:root.saryos-create-ui #sc-home .sc-flagship:hover { transform: translateY(-2px); }
@media (max-width: 1100px) { :root.saryos-create-ui #sc-home .sc-flag-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  :root.saryos-create-ui #sc-home .sc-flag-top { flex-wrap: wrap; }
  :root.saryos-create-ui #sc-home .sc-flag-mark { width: 84px; height: 56px; }
  :root.saryos-create-ui #sc-home .sc-flag-go { width: 100%; justify-content: center; }
  :root.saryos-create-ui #sc-home .sc-flag-points { grid-template-columns: 1fr; }
}
/* The bar's LiveLoop: a live dot and a slow sheen of the tier's colour. */
:root.saryos-create-ui .sc-nav-btn.sc-nav-ll { display: inline-flex; align-items: center; gap: 8px; --sc-fg: var(--sc-ink); font-weight: 700; }
:root.saryos-create-ui .sc-nav-btn.sc-nav-ll:not([aria-selected="true"]) {
  --sc-fill: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--sc-a1) 34%, transparent) 50%, transparent 70%) 130% 0 / 250% 100% no-repeat, color-mix(in srgb, var(--sc-a1) 10%, transparent);
  --sc-sh: inset 0 0 0 1px color-mix(in srgb, var(--sc-a1) 40%, transparent);
  animation: sc-flag-sweep 4.2s ease-in-out infinite !important;
}
:root.saryos-create-ui .sc-nav-ll-dot { display: inline-block; flex: 0 0 auto; }
/* The style pages' way into the full studio. */
:root.saryos-create-ui #sc-home .sc-studio-btn {
  --sc-r: 14px; display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; text-align: left; order: 3;
  --sc-sh: var(--sc-glass-shadow-hi);
}
:root.saryos-create-ui #sc-home .sc-studio-btn::before { opacity: 1 !important; }
:root.saryos-create-ui #sc-home .sc-studio-btn > i:first-child { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: var(--sc-on-tier); background: var(--sc-tier); }
:root.saryos-create-ui #sc-home .sc-studio-btn b { display: block; font: 700 14.5px/1.15 var(--sc-font); color: var(--sc-ink); }
:root.saryos-create-ui #sc-home .sc-studio-btn small { display: block; margin-top: 2px; font: 450 12px/1.2 var(--sc-font); color: var(--sc-dim); }
:root.saryos-create-ui #sc-home .sc-studio-btn > i:last-child { color: var(--sc-dim); }
:root:root:root.saryos-create-ui.sc-still body:is(*, #scr):is(*, #scr) :is(.sc-flag-run, .sc-flag-live i, .sc-nav-ll-dot, .sc-flag-title, .sc-flag-go, .sc-flag-points li > i, .sc-nav-ll) { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  :root:root:root.saryos-create-ui body:is(*, #scr):is(*, #scr) :is(.sc-flag-run, .sc-flag-live i, .sc-nav-ll-dot, .sc-flag-title, .sc-flag-go, .sc-flag-points li > i, .sc-nav-ll) { animation: none !important; }
}
/* What LiveLoop makes, as a row of chips under the line (owner, 2026-10-16: "adverts, animations, logo,
   sketches, simulations ... web/mobile apps, music tools with sounds"). */
:root.saryos-create-ui #sc-home .sc-flag-makes { position: relative; z-index: 2; pointer-events: none; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 18px 0 0; }
:root.saryos-create-ui #sc-home .sc-flag-makes span { font: 700 11.5px/1 var(--sc-font); letter-spacing: .14em; text-transform: uppercase; color: var(--sc-dim); margin-right: 4px; }
:root.saryos-create-ui #sc-home .sc-flag-makes .sc-flag-make {
  font: 600 13px/1 var(--sc-font); font-style: normal; color: var(--sc-ink); padding: 8px 12px; outline: none !important; border-radius: 99px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
  animation: sc-flag-glint 7s ease-in-out infinite !important; animation-delay: calc(var(--i) * .55s) !important;
}
@keyframes sc-flag-glint { 0%, 86%, 100% { box-shadow: none; } 92% { box-shadow: 0 0 14px -2px var(--sc-a1); border-color: var(--sc-a1); } }
:root:root:root.saryos-create-ui.sc-still body:is(*, #scr):is(*, #scr) .sc-flag-makes .sc-flag-make { animation: none !important; }
@media (prefers-reduced-motion: reduce) { :root:root:root.saryos-create-ui body:is(*, #scr):is(*, #scr) .sc-flag-makes .sc-flag-make { animation: none !important; } }

/* The build pills above LiveLoop's prompt (portal-create.js mountLiveLoopPills; owner, 2026-10-24). */
#sc-ll-pills { position: fixed; z-index: 120; display: flex; flex-direction: column; gap: 8px; padding: 0 12px; box-sizing: border-box; pointer-events: none; }
#sc-ll-pills > * { pointer-events: auto; }
body:not(.liveloop-open) #sc-ll-pills, body.portal-tool-open:not(.liveloop-open) #sc-ll-pills { display: none !important; }
#sc-ll-pills .sc-ll-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* Clear of the Flow panel on the right while it is open (saryos-desk.js). */
body:has(#desk-flow.is-open) #sc-ll-pills > * { max-width: calc(100% - 370px); }
:root:root #sc-ll-pills .sc-ll-note { margin: 0; color: #111111 !important; font: 600 13.5px/1.4 var(--sc-font, Inter, system-ui, sans-serif); }
#sc-ll-pills[hidden] { display: none; }
/* The themes paint with forced rules: hence the weight here. */
:root:root #sc-ll-pills .sc-ll-pill {
  appearance: none; cursor: pointer; min-height: 0; padding: 8px 14px; border-radius: 999px !important;
  border: 1px solid rgba(20, 16, 40, .16) !important; background: #ffffff !important; color: #111111 !important;
  font: 500 13px/1.2 var(--sc-font, Inter, system-ui, sans-serif); box-shadow: 0 4px 14px rgba(0, 0, 0, .06) !important;
}
:root:root #sc-ll-pills .sc-ll-pill:hover { border-color: rgba(109, 40, 217, .5) !important; }