/* Keep every editor surface hidden from first paint until requireUser resolves.
   This stylesheet blocks rendering, so the gate also covers slow module downloads. */
html:not(.auth-ready) body > * { visibility: hidden !important; }

/* The Home and Library tabs (src/home.js, src/library.js) and the tabs themselves. A black frame floats on a pixel-art
   sky (assets/pixel-sky.webp, see scripts/make-pixel-sky.py): an icon rail on the left, and a rounded panel that shows the
   same sky, lighter. Home has a dark headline on the sky, a black prompt card with a coloured edge, glass presets, tiles. */

.home, .library, .h-top {
  --ink: #f4f2f6; --ink2: #b5b0bc; --ink3: #8a8792; --page: #111116; --card: #17161b;
  --glass: rgba(27, 23, 35, 0.94); --chip: #2a2631; --chip2: #393540; --accent: #7c60fa;
  --display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', Inter, 'Helvetica Neue', Arial, sans-serif;
  --sky-ink: #0e1012; --sky-ink2: rgba(14, 16, 18, 0.8);      /* text directly on the sky */
  --pane: rgba(58, 72, 74, 0.58);                               /* glass on the sky */
  --gap: 18px; --rail: 64px; --ring: 6px;                       /* the frame: outer margin, rail width, edge around the panel */
}
.on-home body, .on-library body { background: #66787a url('pixel-sky.webp') left bottom / cover no-repeat; }
.home, .library { display: none; }
.on-home .home, .on-library .library {
  position: fixed; z-index: 40; isolation: isolate;
  top: calc(var(--gap) + var(--ring)); right: calc(var(--gap) + var(--ring)); bottom: calc(var(--gap) + var(--ring)); left: calc(var(--gap) + var(--rail));
  display: flex; flex-direction: column; overflow: auto; border-radius: 24px;
  /* the edge around the panel, and the same edge pushed left so the corners next to the rail stay black */
  box-shadow: 0 0 0 var(--ring) #000, -30px 0 0 var(--ring) #000, 0 40px 90px -30px rgba(10, 20, 24, 0.55);
  background: linear-gradient(rgba(226, 236, 236, 0.16), rgba(226, 236, 236, 0.16)), #8fa5a7 url('pixel-sky.webp') center bottom / cover no-repeat;
  color: var(--ink); font: 14px/1.5 var(--sans);
}
.on-library .library { background: linear-gradient(rgba(11, 13, 15, 0.84), rgba(11, 13, 15, 0.84)), #1a2022 url('pixel-sky.webp') center bottom / cover no-repeat; }
.on-home .app, .on-library .app { visibility: hidden; } /* still laid out, so the editor keeps drawing underneath */

/* The rail, shared by Home and Library: the mark and the tabs as icons on top, language and account at the bottom */
.h-top { display: none; }
.on-home .h-top, .on-library .h-top {
  position: fixed; z-index: 45; top: var(--gap); bottom: var(--gap); left: var(--gap); width: var(--rail);
  display: flex; flex-direction: column; align-items: center; padding: 16px 0 14px; border-radius: 30px 0 0 30px;
  background: #000; color: #fff; font: 14px/1.5 var(--sans);
}
.h-left { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.h-mark { width: 30px; height: 30px; color: #fff; flex: none; }
.h-right { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.h-badge { position: absolute; z-index: 2; top: 16px; left: 50%; transform: translateX(-50%); margin: 0; display: inline-flex; align-items: center; gap: 10px; height: 32px; padding: 0 5px 0 14px; border-radius: 99px; background: var(--pane); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); color: #fff; font: 500 13px var(--sans); letter-spacing: -0.006em; white-space: nowrap; }
.h-badge b { height: 22px; padding: 0 9px; border-radius: 99px; background: #fff; color: #000; font: 600 12px/22px var(--sans); letter-spacing: 0; }

/* Settings and Profile at the bottom of the rail (src/rail.js): round buttons, a small black panel beside the rail */
.r-wrap { position: relative; }
.r-btn-icon { position: relative; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; font: 600 13px var(--sans); cursor: pointer; transition: background-color 0.15s, transform 0.12s; }
.r-btn-icon:hover, .r-btn-icon[aria-expanded="true"] { background: #232326; }
.r-btn-icon:active { transform: scale(0.95); }
.r-btn-icon:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.r-gear::before, .r-person::before { content: ""; position: absolute; inset: 11px; background: #8d8d94; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; transition: background-color 0.15s, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.r-gear[aria-expanded="true"]::before { transform: rotate(60deg); }
.r-gear:hover::before, .r-gear[aria-expanded="true"]::before, .r-person:hover::before, .r-person[aria-expanded="true"]::before { background: #fff; }
.r-gear { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E"); }
.r-person { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.6'/%3E%3Cpath d='M5 20c1-3.6 3.8-5.5 7-5.5s6 1.9 7 5.5'/%3E%3C/svg%3E"); }
.r-me::after { content: ""; position: absolute; inset: 5px; z-index: -1; border-radius: 50%; background: conic-gradient(from 210deg, #ff5ca8, #8b6cff, #3fc8ff, #ffc35a, #ff5ca8); }
.r-me { isolation: isolate; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.r-pop { position: absolute; z-index: 70; left: calc(100% + 16px); bottom: 0; width: 300px; padding: 8px; border-radius: 16px; background: #0b0b0d; color: #f4f4f6; box-shadow: inset 0 0 0 1px #232326, 0 24px 60px -18px rgba(0, 0, 0, 0.6); transform-origin: left bottom; }
/* Opening, in the website's easing: the panel grows out of the rail, then its rows follow one after another */
.r-pop.in { animation: rPop 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
.r-pop.in > * { animation: rRow 0.36s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.r-pop.in > :nth-child(2) { animation-delay: 0.04s; }
.r-pop.in > :nth-child(3) { animation-delay: 0.08s; }
.r-pop.in > :nth-child(n + 4) { animation-delay: 0.12s; }
@keyframes rPop { from { opacity: 0; transform: scale(0.94) translateX(-6px); filter: blur(4px); } }
@keyframes rRow { from { opacity: 0; transform: translateX(-4px); } }
.r-title { margin: 4px 8px 8px; font-weight: 600; font-size: 13.5px; }
.r-text { margin: 0 8px 12px; color: #9a9aa2; font-size: 13px; line-height: 1.45; }
.r-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; color: #b9b9c0; font-size: 13px; }
.r-seg { display: inline-flex; padding: 2px; border-radius: 9px; background: #18181b; }
.r-seg button { height: 26px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: #8d8d94; font: 500 12.5px var(--sans); cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.r-seg button:hover { color: #fff; }
.r-seg button[aria-checked="true"] { background: #2c2c30; color: #fff; }
.r-item { width: 100%; height: 36px; margin-top: 2px; padding: 0 8px; border: 0; border-radius: 9px; background: transparent; color: #e8e8ec; text-align: left; font: 13.5px var(--sans); cursor: pointer; }
.r-item:hover, .r-item:focus-visible { background: #18181b; outline: none; }
a.r-item { display: flex; align-items: center; text-decoration: none; }
.r-who { display: flex; align-items: center; gap: 11px; padding: 6px 8px 10px; margin-bottom: 4px; border-bottom: 1px solid #1d1d20; min-width: 0; }
.r-who > span:last-child { min-width: 0; }
.r-who b { display: block; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-who small { display: block; color: #8d8d94; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-avatar { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(from 210deg, #ff5ca8, #8b6cff, #3fc8ff, #ffc35a, #ff5ca8); color: #fff; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.r-actions { display: flex; gap: 6px; padding: 0 4px 4px; }
.r-btn { flex: 1; height: 34px; display: grid; place-items: center; border-radius: 99px; background: #fff; color: #000; font: 600 13px var(--sans); text-decoration: none; }
.r-btn:hover { background: #e6e6ea; }
.r-btn.ghost { background: transparent; box-shadow: inset 0 0 0 1px #2c2c30; color: #fff; }
.r-btn.ghost:hover { background: #18181b; }
.r-pill { height: 26px; padding: 0 11px; border: 0; border-radius: 99px; background: #fff; color: #000; font: 600 12.5px var(--sans); cursor: pointer; }
.r-pill:hover { background: #e6e6ea; }
.r-claude { display: inline-flex; align-items: center; gap: 8px; }
.r-on { display: inline-flex; align-items: center; gap: 6px; color: #e8e8ec; font-size: 12.5px; }
.r-on::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; }
.r-link { padding: 0; border: 0; background: none; color: #8d8d94; font: 12.5px var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.r-link:hover { color: #fff; }
.r-note { margin: -2px 8px 6px; color: #77777f; font-size: 12px; line-height: 1.45; }
.r-note a { color: #b9b9c0; }
.r-key { display: flex; gap: 6px; padding: 2px 8px 8px; }
.r-key input { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: #18181b; color: #f2f2f4; font: 13px var(--mono); outline: none; box-shadow: inset 0 0 0 1px #26262a; }
.r-key input:focus { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.r-key button { height: 32px; padding: 0 12px; border: 0; border-radius: 99px; background: #fff; color: #000; font: 600 12.5px var(--sans); cursor: pointer; }
.r-avatar { position: relative; overflow: hidden; }
.r-me img, .r-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.r-me img { inset: 5px; width: auto; height: auto; }
label.r-item { display: flex; align-items: center; }
.r-busy { margin: 0; display: flex; align-items: center; color: #8d8d94; cursor: default; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The tabs: icons in the rail here, the editor's segments in the Creator Lab */
.tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; flex: none; }
.tabs button { height: 31px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--dim); font: 500 14px var(--sans); cursor: pointer; white-space: nowrap; transition: color 0.15s, background-color 0.15s, transform 0.12s; }
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { background: var(--seg-on); color: var(--text); }
.tabs button:active { transform: scale(0.97); }
.h-top .tabs { flex-direction: column; gap: 10px; padding: 0; }
.h-top .tabs button { position: relative; width: 42px; height: 42px; padding: 0; border-radius: 50%; font-size: 0; color: transparent; overflow: hidden; }
.h-top .tabs button::before { content: ""; position: absolute; inset: 11px; background: #8d8d94; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; transition: background-color 0.15s; }
.h-top .tabs button:hover { background: #151517; }
.h-top .tabs button:hover::before, .h-top .tabs button[aria-selected="true"]::before { background: #fff; }
.h-top .tabs button[aria-selected="true"] { background: #232326; }
.h-top .tabs button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.h-top [data-view="home"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.4 12 4l8 6.4V19a1 1 0 0 1-1 1h-4.6v-5.4H9.6V20H5a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.h-top [data-view="lab"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='3.2'/%3E%3Cpath d='M10.2 9.3v5.4l4.6-2.7z'/%3E%3C/svg%3E"); }
.h-top [data-view="library"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6.6' height='6.6' rx='2'/%3E%3Crect x='13.4' y='4' width='6.6' height='6.6' rx='2'/%3E%3Crect x='4' y='13.4' width='6.6' height='6.6' rx='2'/%3E%3Crect x='13.4' y='13.4' width='6.6' height='6.6' rx='2'/%3E%3C/svg%3E"); }
.bar .tabs { padding: 2px; border-radius: 8px; background: var(--panel2); }
.bar .tabs button { height: 26px; padding: 0 11px; font-size: 12.5px; border-radius: 6px; }
.h-top .lang-btn { width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: 50%; color: #fff; }
.h-top .lang-btn > :not(.flag) { display: none; }
.h-top .lang-btn:hover, .h-top .lang-btn[aria-expanded="true"] { background: #232326; }
.h-top .lang-menu, .h-top .acct-menu { top: auto; bottom: 0; right: auto; left: calc(100% + 14px); }
.h-top .acct-btn { width: 32px; height: 32px; background: conic-gradient(from 210deg, #ff5ca8, #8b6cff, #3fc8ff, #ffc35a, #ff5ca8); font-size: 13px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }

/* Hero */
.h-hero { flex: 1; width: min(720px, 100% - 32px); margin: 0 auto; padding: clamp(72px, 12vh, 170px) 0 56px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.h-title { margin: 0 0 30px; width: max-content; max-width: calc(100vw - var(--rail) - 2 * var(--gap) - 64px); color: var(--sky-ink); font: 550 clamp(38px, 4.8vw, 68px)/1.05 var(--display); letter-spacing: -0.018em; }
.h-title em { display: block; font-style: normal; color: #fff; }

.h-ask { width: 100%; display: flex; flex-direction: column; align-items: center; }
.h-modes { align-self: flex-start; display: flex; gap: 6px; margin-bottom: 10px; }
.h-mode { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 0; border-radius: 99px; background: var(--pane); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); color: #fff; font: 500 13.5px var(--sans); cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.h-mode:hover { background: rgba(40, 50, 52, 0.7); }
.h-mode[aria-checked="true"] { background: #000; box-shadow: none; color: #fff; font-weight: 600; }
.h-mode:disabled { opacity: 0.5; cursor: default; }
/* Black with a coloured edge that glows inward: magenta at the top, blue at the bottom */
.h-card { border: 1.5px solid transparent; border-radius: 22px; background: linear-gradient(#050506, #050506) padding-box, linear-gradient(165deg, #b02a78, #2a1228 34%, #0d0d1a 60%, #3b4fe6) border-box; box-shadow: inset 0 26px 36px -30px rgba(214, 44, 140, 0.85), inset 0 -26px 36px -30px rgba(70, 92, 255, 0.9), 0 30px 70px -28px rgba(8, 18, 22, 0.6); }
.h-card { width: 100%; margin: 0; text-align: left; transition: box-shadow 0.2s; }
.h-card:focus-within { box-shadow: inset 0 26px 36px -26px rgba(214, 44, 140, 0.95), inset 0 -26px 36px -26px rgba(70, 92, 255, 1), 0 0 0 3px rgba(255, 255, 255, 0.25), 0 30px 70px -28px rgba(8, 18, 22, 0.6); }
.h-card textarea { display: block; width: 100%; min-height: 103px; padding: 17px 19px 4px; border: 0; background: transparent; resize: none; color: var(--ink); font: 16px/24px var(--sans); outline: none; }
.home .h-card textarea:focus-visible { outline: none; }
.h-card textarea::placeholder { color: #84848c; }
.h-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 15px 15px 15px; }
.h-card .refs { padding: 0 15px 12px; }
.h-card.dropping { box-shadow: inset 0 26px 36px -26px rgba(214, 44, 140, 0.95), inset 0 -26px 36px -26px rgba(70, 92, 255, 1), 0 0 0 3px rgba(255, 255, 255, 0.45); }
.h-me-refs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.h-me-refs span { padding: 2px 8px; border-radius: 7px; background: rgba(14, 16, 18, 0.07); color: var(--sky-ink2); font-size: 12.5px; }
.h-hint { color: #9a9aa2; font: 12.5px var(--sans); }
.h-send { margin-left: auto; height: 33px; padding: 0 6px 0 14px; border: 0; border-radius: 99px; background: #fff; color: #000; display: inline-flex; align-items: center; gap: 8px; font: 600 14px var(--sans); cursor: pointer; flex: none; transition: background-color 0.15s, transform 0.12s; }
.h-send kbd { margin: 0; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.08); box-shadow: none; color: #000; font: 500 11px var(--mono); }
.h-send:hover:not(:disabled) { background: #e6e6ea; }
.h-send:active:not(:disabled) { transform: scale(0.97); }
.h-send:disabled { background: #1c1c1f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); color: #77777f; cursor: default; }
.h-send:disabled kbd { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); color: #76747e; }

/* "Start from": presets in a row under the card, aligned to its edge */
.h-start { width: 100%; margin-top: 24px; display: flex; align-items: flex-start; gap: 12px; text-align: left; }
.h-label { flex: none; padding-top: 5px; color: var(--sky-ink); font: 600 14px/20px var(--sans); }
.h-ideas { display: flex; flex-wrap: wrap; gap: 6px; }
.h-chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 5px 0 10px; border: 0; border-radius: 10px; background: var(--pane); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); color: #fff; font: 500 13.5px var(--sans); letter-spacing: -0.006em; cursor: pointer; transition: background-color 0.15s, transform 0.12s; }
.h-chip:hover { background: rgba(40, 50, 52, 0.72); }
.h-chip:active { transform: scale(0.97); }
.h-len { height: 20px; padding: 0 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.12); color: #e4eaea; font: 11.5px/20px var(--mono); letter-spacing: 0; }
.h-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* Recent (the open project) | Templates: one row of video tiles under the prompt, aligned to the card */
.h-files { width: 100%; margin-top: 51px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 13px; row-gap: 15px; text-align: left; }
.h-sec { margin: 0; color: var(--sky-ink); font: 600 14px/20px var(--sans); }
.h-sec-recent, .h-continue { grid-column: 1; }
.h-sec-tpl, .h-tpls { grid-column: 2 / -1; }
.h-files:has(.h-continue[hidden]) :is(.h-sec-tpl, .h-tpls) { grid-column: 1 / -1; }
.h-tpls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.h-files:has(.h-continue[hidden]) .h-tpls { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.h-tile { width: 100%; min-width: 0; display: flex; flex-direction: column; padding: 0; border: 0; background: none; color: var(--sky-ink); text-align: left; cursor: pointer; }
.h-tile-thumb { position: relative; display: block; margin-bottom: 10px; border-radius: 14px; overflow: hidden; background: #0c0c0f; box-shadow: 0 14px 30px -16px rgba(8, 18, 22, 0.55); transition: box-shadow 0.15s; }
.h-tile-thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); }
.h-tile:hover .h-tile-thumb, .h-tile:focus-visible .h-tile-thumb { box-shadow: 0 0 0 2px #000, 0 14px 30px -16px rgba(8, 18, 22, 0.55); }
.home .h-tile:focus-visible { outline: none; }
.h-thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.h-dur { position: absolute; right: 5px; bottom: 5px; padding: 0 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.62); color: #fff; font: 500 12px/20px var(--mono); }
.h-tile b { font-size: 14px; line-height: 20px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-tile small { color: var(--sky-ink2); font-size: 13px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Building: the video as it is so far, and the steps */
/* Building: a plain conversation on the sky, like a chat. Your prompt on the right, then the mark and the progress as text. */
#home[data-stage="build"] .h-title { display: none; }
.h-build { width: 100%; display: flex; flex-direction: column; gap: 22px; text-align: left; }
.h-me { align-self: flex-end; max-width: 80%; padding: 11px 17px; border-radius: 20px; background: rgba(255, 255, 255, 0.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--sky-ink); font-size: 15.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.h-ai { display: flex; align-items: flex-start; gap: 14px; }
.h-ai-mark { width: 30px; height: 30px; flex: none; padding: 6px; border-radius: 9px; background: #000; color: #fff; }
.h-ai-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.h-status { margin: 0; color: var(--sky-ink); font-size: 15.5px; line-height: 1.5; }
.h-status.working { width: max-content; color: transparent; background: linear-gradient(90deg, rgba(14, 16, 18, 0.5) 0 40%, #0e1012 50%, rgba(14, 16, 18, 0.5) 60% 100%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; animation: hShimmer 1.6s linear infinite; }
@keyframes hShimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.h-status.done { font-weight: 600; }
.h-status.err { padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.78); color: #a5281f; }
.h-status a { color: inherit; font-weight: 600; }
.h-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.h-steps li { display: flex; align-items: center; gap: 9px; color: var(--sky-ink2); font-size: 14px; animation: hIn 0.32s cubic-bezier(0.23, 1, 0.32, 1) backwards; }
.h-steps li::before { content: ""; width: 15px; height: 15px; flex: none; background: var(--sky-ink2); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 14px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 14px no-repeat; }
@keyframes hIn { from { opacity: 0; transform: translateY(4px); } }
.h-after .h-btn { background: #0e1012; color: #fff; }
.h-after .h-btn:hover { background: #2a2c30; }
.h-after .h-btn.ghost { background: rgba(255, 255, 255, 0.72); box-shadow: none; color: var(--sky-ink); }
.h-after .h-btn.ghost:hover { background: #fff; }
.h-after { display: flex; flex-wrap: wrap; gap: 8px; }
.h-btn { display: inline-flex; align-items: center; height: 33px; padding: 0 15px; border: 0; border-radius: 99px; background: #fff; color: #000; font: 600 13.5px var(--sans); text-decoration: none; cursor: pointer; transition: background-color 0.15s, transform 0.12s; }
.h-btn:hover { background: #e6e6ea; }
.h-btn.ghost { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); color: var(--ink); }
.h-btn.ghost:hover { background: rgba(255, 255, 255, 0.06); }
.h-btn:active { transform: scale(0.97); }

/* Library */
.l-wrap { width: min(1160px, 100% - 40px); margin: 0 auto; padding: 44px 0 64px; }
.l-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 26px; }
.l-title { display: flex; align-items: baseline; gap: 12px; }
.l-title h1 { margin: 0; font: 700 30px/1.15 var(--sans); letter-spacing: -0.03em; color: #fff; }
.l-title span { color: var(--ink3); font-size: 14px; }
.l-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.l-search { display: inline-flex; align-items: center; gap: 8px; width: 250px; height: 33px; padding: 0 11px; border-radius: 10px; background: var(--card); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); color: var(--ink3); }
.l-search:focus-within { box-shadow: 0 0 0 1.5px rgba(124, 96, 250, 0.8); }
.l-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: var(--ink); font: 13.5px var(--sans); }
.l-search input::placeholder { color: var(--ink3); }
.library :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.library .l-search input:focus-visible { outline: none; }
#lib-sort { height: 33px; padding: 0 10px; border: 0; border-radius: 10px; background: var(--card); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); color: var(--ink); font: 13.5px var(--sans); cursor: pointer; }
.l-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 26px 20px; }
.l-card { position: relative; min-width: 0; }
.l-ghost { aspect-ratio: 16 / 13; border-radius: 12px; background: var(--card); }
.l-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #0c0c0f; cursor: pointer; transition: box-shadow 0.15s; }
.l-thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); }
.l-thumb:hover { box-shadow: 0 0 0 2px var(--accent); }
.l-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.l-src, .l-now { position: absolute; top: 7px; height: 21px; padding: 0 7px; border-radius: 6px; font: 500 11.5px/21px var(--sans); color: #fff; }
.l-src { left: 7px; background: rgba(0, 0, 0, 0.62); }
.l-now { right: 7px; background: var(--accent); }
.l-body { padding-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.l-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.l-name { flex: 1; min-width: 0; font-size: 14.5px; line-height: 22px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-rename { flex: 1; min-width: 0; height: 24px; padding: 0 6px; border: 0; border-radius: 6px; outline: none; background: var(--card); box-shadow: 0 0 0 1.5px rgba(124, 96, 250, 0.8); color: var(--ink); font: 600 14.5px var(--sans); }
.l-more { flex: none; width: 26px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: var(--ink3); cursor: pointer; }
.l-more:hover, .l-more[aria-expanded="true"] { background: var(--chip); color: #fff; }
.l-meta, .l-dates { color: var(--ink3); font-size: 13px; line-height: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-dates { font-size: 12.5px; }
.l-prompt { margin: 3px 0 2px; color: var(--ink2); font-size: 13px; line-height: 18px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.l-menu { position: absolute; z-index: 5; right: 0; top: calc(100% - 4px); min-width: 216px; padding: 6px; display: flex; flex-direction: column; }
.l-menu button { height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); text-align: left; font: 13.5px var(--sans); cursor: pointer; }
.l-menu button:hover, .l-menu button:focus-visible { background: var(--chip); outline: none; }
.l-menu .danger { color: var(--danger); }
.l-note { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 90px 16px; text-align: center; color: var(--ink2); }
.l-note b { color: #fff; font-size: 17px; font-weight: 600; }
.l-note .h-btn { margin-top: 10px; }
.l-none { grid-column: 1 / -1; margin: 40px 0; text-align: center; color: var(--ink3); }

@media (max-width: 760px) {
  /* no frame: the rail becomes a bar on top */
  .on-home .h-top, .on-library .h-top { top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 58px; flex-direction: row; padding: 0 12px; border-radius: 0; }
  .h-left, .h-top .tabs { flex-direction: row; gap: 6px; }
  .h-left { gap: 14px; }
  .h-right { margin: 0 0 0 auto; flex-direction: row; }
  .h-top .r-pop { top: calc(100% + 10px); bottom: auto; left: auto; right: 0; transform-origin: right top; }
  .r-pop.in { animation-name: rPopDown; }
  @keyframes rPopDown { from { opacity: 0; transform: scale(0.94) translateY(-6px); filter: blur(4px); } }
  .on-home .home, .on-library .library { top: 58px; right: 0; bottom: 0; left: 0; border-radius: 0; box-shadow: none; }
  .h-badge { display: none; }
  .h-title { max-width: calc(100vw - 32px); }
  .h-hint { display: none; }
  .h-start { flex-direction: column; gap: 8px; }
  .h-files { grid-template-columns: 1fr 1fr; }
  .h-sec-recent, .h-continue { grid-column: 1 / -1; }
  .h-continue { max-width: calc(50% - 7px); }
  .h-sec-tpl, .h-tpls { grid-column: 1 / -1; }
  .h-tpls, .h-files:has(.h-continue[hidden]) .h-tpls { grid-template-columns: 1fr 1fr; }
  .h-mode { padding: 0 10px; }
  .l-search { width: 100%; }
  .l-tools { width: 100%; }
}
.calm .h-status.working { animation: none; color: var(--sky-ink2); background: none; }
.calm .r-pop.in, .calm .r-pop.in > *, .calm .h-steps li { animation: none; }
.calm .r-gear::before { transition: background-color 0.15s; }
@media (prefers-reduced-motion: reduce) {
  .h-status.working { animation: none; color: var(--sky-ink2); background: none; }
  .r-pop.in, .r-pop.in > *, .h-steps li { animation: none; }
  .r-gear::before { transition: background-color 0.15s; }
}