html, body { margin: 0 }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px) }
[hidden] { display: none !important }
img { max-width: 100% }

/* Palette: Electric Lime #C7FF25 + Deep Black #111111 + Hot Pink #FF3D9A.
   Lime is a fill (always with black text on it); pink marks AI and highlights. */
:root {
  --lime: #c7ff25; --pink: #ff3d9a; --black: #111111;
  --bg: #ffffff; --card: #f5f5f7; --surface: rgba(255, 255, 255, .72); --surface-solid: #ffffff; --soft: #e8e8ed;
  --fg: #111111; --muted: #6e6e73; --line: rgba(17, 17, 17, .1);
  --accent: var(--lime); --accent-fg: #111111; --ring: #111111; --link: #111111;
  --tabs-bg: rgba(245, 245, 247, .82); --pill: #111111; --pill-fg: #ffffff;
  --ai: #d6006f; --star: #d6006f; --ok: #6fae00; --danger: #e5484d;
  --o-views: #9bd400; --o-followers: #ff3d9a; --o-saves: #111111; --o-trust: #a1a1a6;
  --glow-a: rgba(199, 255, 37, .35); --glow-b: rgba(255, 61, 154, .18);
  --font-brand: "Fraunces", Georgia, "Times New Roman", serif;
  --brand-ink: #111111;
  --font-title: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: var(--font-body);
  --spring: cubic-bezier(.34, 1.36, .5, 1); --ease: cubic-bezier(.2, .8, .2, 1);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #000000; --card: #111111; --surface: rgba(17, 17, 17, .72); --surface-solid: #1c1c1e; --soft: #2c2c2e;
  --fg: #f5f5f7; --muted: #8e8e93; --line: rgba(255, 255, 255, .1);
  --ring: var(--lime); --link: var(--lime);
  --tabs-bg: rgba(28, 28, 30, .72); --pill: #f5f5f7; --pill-fg: #111111;
  --ai: var(--pink); --star: var(--pink); --ok: var(--lime);
  --o-views: var(--lime); --o-followers: var(--pink); --o-saves: #f5f5f7; --o-trust: #8e8e93;
  --glow-a: rgba(199, 255, 37, .16); --glow-b: rgba(255, 61, 154, .16); --brand-ink: var(--lime); color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #000000; --card: #111111; --surface: rgba(17, 17, 17, .72); --surface-solid: #1c1c1e; --soft: #2c2c2e;
  --fg: #f5f5f7; --muted: #8e8e93; --line: rgba(255, 255, 255, .1);
  --ring: var(--lime); --link: var(--lime);
  --tabs-bg: rgba(28, 28, 30, .72); --pill: #f5f5f7; --pill-fg: #111111;
  --ai: var(--pink); --star: var(--pink); --ok: var(--lime);
  --o-views: var(--lime); --o-followers: var(--pink); --o-saves: #f5f5f7; --o-trust: #8e8e93;
  --glow-a: rgba(199, 255, 37, .16); --glow-b: rgba(255, 61, 154, .16); --brand-ink: var(--lime); color-scheme: dark }

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; overflow-x: clip }
body {
  background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 16px; line-height: 1.5; letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 0 96px;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg) }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit }
button { cursor: pointer }
::selection { background: var(--lime); color: #111 }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px }
.wrap { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px }
.mono { font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: 0 }
.label { font-size: 13px; color: var(--muted); letter-spacing: 0 }
.sub { margin: 4px 0 0; color: var(--muted); font-size: 15px; max-width: 56ch; text-wrap: pretty }

/* top bar */
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 16px }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-brand); font-weight: 800; font-size: 21px; letter-spacing: -.035em; font-variation-settings: "opsz" 24, "SOFT" 50; color: var(--brand-ink); text-decoration: none }
.mark { width: 22px; height: 28px; color: var(--brand-ink); display: grid; place-items: center; flex: none }
.mark svg { width: 22px; height: 28px; overflow: visible }
.wordmark { white-space: nowrap }
/* the pink period is a small rounded square, as in the logo */
.dot { display: inline-block; width: .2em; height: .2em; margin-left: .05em; border-radius: .05em; background: var(--pink); transform: rotate(18deg); color: transparent; overflow: hidden; font-size: inherit; line-height: 0; vertical-align: baseline }
.icon-btn { width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; background: var(--soft); color: var(--fg); display: grid; place-items: center; font-size: 20px; line-height: 1; transition: transform .3s var(--spring) }
.icon-btn:hover { transform: scale(1.06) }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.sync { display: inline-flex; align-items: center; gap: 7px; color: var(--muted) }
.sync::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted) }
.sync[data-on]::before { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent) }

/* hero */
.hero { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; padding-block: clamp(36px, 9vw, 96px) 8px }
.hero::before { content: ""; position: absolute; z-index: -1; inset: -40px 0 auto; height: 120%; pointer-events: none;
  background: radial-gradient(40% 50% at 30% 40%, var(--glow-a), transparent 70%), radial-gradient(35% 45% at 72% 55%, var(--glow-b), transparent 70%); filter: blur(30px) }
.hero h1 { font-family: var(--font-title); font-weight: 800; font-size: clamp(44px, 10vw, 104px); line-height: .98; letter-spacing: -.055em; margin: 0; text-wrap: balance }
.hl { background: var(--lime); color: #111; padding: 0 .14em; border-radius: .14em; -webkit-box-decoration-break: clone; box-decoration-break: clone }
.hero p { margin: 0; color: var(--muted); font-size: clamp(17px, 2.2vw, 21px); line-height: 1.45; max-width: 40ch; text-wrap: balance }
.hero .row { justify-content: center; gap: 10px }

/* the flow: idea → draft → ready → recorded */
.pipe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
.pipe button:last-child { grid-column: 1 / -1 }
@media (min-width: 760px) { .pipe { grid-template-columns: repeat(3, minmax(0, 1fr)) } .pipe button:last-child { grid-column: auto } }
.pipe button { position: relative; border: 0; background: var(--card); border-radius: 22px; padding: 16px 16px 15px; text-align: left; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 2px 10px; min-width: 0;
  transition: transform .4s var(--spring), background .2s }
.pipe button:hover { transform: translateY(-2px) }
.pipe .step { grid-column: 1 / -1; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 8px }
.pipe .t { font-weight: 600; font-size: 17px; letter-spacing: -.02em }
.pipe .t, .pipe .d { grid-column: 1 }
.pipe .n { grid-row: 3 / 5; grid-column: 2; align-self: center; font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums }
.pipe .d { color: var(--muted); font-size: 13px; line-height: 1.35 }
.pipe button[data-on] { background: var(--lime); color: #111 }
.pipe button[data-on] .step, .pipe button[data-on] .d { color: rgba(17, 17, 17, .62) }

/* segmented control */
.tabs-bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; padding-block: 10px; margin-block: -10px }
.tabs { position: relative; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--tabs-bg);
  backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); border: 1px solid var(--line); width: fit-content; max-width: 100%; margin: 0 auto }
.tab { position: relative; z-index: 1; border: 0; background: transparent; padding: 8px 20px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--muted); transition: color .3s }
.tab[aria-selected="true"] { color: var(--pill-fg) }
.tab:hover:not([aria-selected="true"]) { color: var(--fg) }
.tab .count { font-size: 12px; font-weight: 500; opacity: .6; margin-left: 5px; font-variant-numeric: tabular-nums }
.pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; border-radius: 999px; background: var(--pill);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .4); transition: transform .6s var(--spring), width .6s var(--spring) }
.pane[hidden] { display: none }
.pane { display: flex; flex-direction: column; gap: 32px; animation: paneIn .5s var(--ease) both }
@keyframes paneIn { from { opacity: 0; transform: translateY(8px); filter: blur(6px) } to { opacity: 1; transform: none; filter: none } }

/* cards */
.card { background: var(--card); border-radius: 28px; padding: clamp(18px, 3.5vw, 28px); min-width: 0 }
.card h2, .sec-h h2 { font-family: var(--font-title); font-weight: 700; font-size: clamp(24px, 3.4vw, 30px); margin: 0; letter-spacing: -.035em; line-height: 1.1; text-wrap: balance }
.sec-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap }
.field-label { font-size: 13px; font-weight: 600; color: var(--muted) }

/* buttons + chips */
a.btn { text-decoration: none; color: inherit }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: var(--soft);
  padding: 10px 18px; border-radius: 999px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; transition: transform .3s var(--spring), background .2s, opacity .2s, box-shadow .2s; white-space: nowrap }
.btn:hover { transform: translateY(-1px) }
.btn:active { transform: scale(.96) }
.btn:disabled { opacity: .4; cursor: default; transform: none }
.btn.primary { background: var(--fg); color: var(--bg) }
.btn.accent { background: var(--lime); color: #111 }
.btn.accent:hover:not(:disabled) { box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--lime) 80%, transparent) }
.btn.ghost { background: transparent }
.btn.ghost:hover { background: var(--soft) }
.btn.danger { color: var(--danger) }
.btn.ai { color: var(--ai); background: color-mix(in srgb, var(--pink) 12%, transparent) }
.btn.ai:hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--pink) 16%, transparent) }
.btn.sm { padding: 7px 13px; font-size: 13.5px }
.btn.lg { padding: 14px 26px; font-size: 17px }
.chips { display: flex; flex-wrap: wrap; gap: 6px }
.chip { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 6px 13px; font-size: 13.5px; font-weight: 500; color: var(--muted);
  display: inline-flex; align-items: center; gap: 7px; transition: all .2s }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--muted)) }
.chip.plain::before { display: none }
.chip:hover { color: var(--fg); border-color: color-mix(in srgb, var(--fg) 25%, transparent) }
.chip[aria-pressed="true"] { color: var(--bg); background: var(--fg); border-color: var(--fg) }
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted) }
.tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--muted)) }

/* composer */
.paste { display: flex; flex-direction: column; gap: 14px }
.paste textarea, .field { width: 100%; border: 1px solid transparent; background: var(--surface-solid); border-radius: 16px; padding: 14px 16px; font-size: 16px; line-height: 1.6; transition: border-color .2s, box-shadow .2s }
.paste textarea { min-height: 130px; max-height: 50vh; resize: vertical }
.paste textarea:focus, .field:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ring) 14%, transparent) }
.paste-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap }
.ai-note { color: var(--ai) }
.kbd { color: var(--muted); font-size: 13px }

/* folders */
.folders { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 40px 8px 6px; margin: -24px -8px 0; scrollbar-width: none }
.folders::-webkit-scrollbar { display: none }
.folder-slot { scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none }
.folder-slot .hint { font-size: 13px; font-weight: 600; color: var(--fg); opacity: 0; transition: opacity .3s; display: inline-flex; align-items: center; gap: 6px }
.folder-slot .hint::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 30%, transparent) }
.folder-slot[data-active] .hint { opacity: 1 }
@media (min-width: 1000px) { .folders { justify-content: space-between; overflow: visible } }

/* feed */
.feed { display: grid; grid-template-columns: 1fr; gap: 12px }
@media (min-width: 680px) { .feed { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (min-width: 1000px) { .feed { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
.item { text-align: left; border: 0; background: var(--card); border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; position: relative; overflow: hidden;
  transition: transform .45s var(--spring), box-shadow .3s }
.item:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -24px rgba(0, 0, 0, .45) }
.item-title { font-family: var(--font-title); font-size: 19px; line-height: 1.25; font-weight: 700; letter-spacing: -.025em; text-wrap: balance; overflow-wrap: anywhere }
.item-peek { color: var(--muted); font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.item-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted) }
.empty { border: 1.5px dashed var(--line); border-radius: 22px; padding: 36px 20px; text-align: center; color: var(--muted) }
.empty strong { display: block; color: var(--fg); font-size: 19px; font-weight: 700; letter-spacing: -.025em; margin-bottom: 4px }

/* hooks */
.hook { display: flex; flex-direction: column; gap: 14px }
.hook q { font-family: var(--font-title); font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -.03em; quotes: "“" "”"; text-wrap: balance; overflow-wrap: anywhere }
.hook-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.star[aria-pressed="true"] { color: var(--star); background: color-mix(in srgb, var(--pink) 12%, transparent) }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
.row > .field { flex: 1 1 220px; min-width: 0; width: auto }
.ai-out { display: flex; flex-direction: column; gap: 8px }
.ai-out:empty { display: none }
.sug { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 16px;
  background: color-mix(in srgb, var(--pink) 8%, var(--surface-solid)); animation: paneIn .4s var(--ease) both }
.sug span { overflow-wrap: anywhere; min-width: 0 }
.thinking { color: var(--ai); font-size: 14px; font-weight: 600; background: linear-gradient(90deg, var(--ai) 30%, color-mix(in srgb, var(--ai) 30%, transparent) 50%, var(--ai) 70%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 1.4s linear infinite }
@keyframes shimmer { to { background-position: -200% 0 } }
.err { color: var(--danger); font-size: 14px }

/* script sheet */
.sheet { position: fixed; inset: 0; z-index: 50; background: var(--bg); overflow-y: auto; overscroll-behavior: contain;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 48px) max(16px, env(safe-area-inset-left, 0px));
  animation: sheetIn .45s var(--ease) both }
@keyframes sheetIn { from { transform: translateY(24px); opacity: 0 } to { transform: none; opacity: 1 } }
.sheet-in { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px }
.sheet-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 2; padding-block: 8px;
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px) }
.doc-title { width: 100%; border: 0; background: transparent; font-family: var(--font-title); font-weight: 800; font-size: clamp(30px, 6vw, 44px); line-height: 1.08; letter-spacing: -.045em; padding: 0; resize: none; overflow: hidden }
.doc-title:focus { outline: none }
.doc-body { width: 100%; min-height: 50vh; border: 1px solid transparent; border-radius: 22px; background: var(--card); padding: 22px; font-size: 17px; line-height: 1.75; resize: vertical }
.doc-body:focus { outline: none; border-color: var(--ring) }
.doc-actions { display: flex; flex-wrap: wrap; gap: 8px }
.status-pill { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--soft) }
.done-banner { border-radius: 22px; padding: 18px; background: color-mix(in srgb, var(--lime) 16%, var(--card)); display: flex; flex-direction: column; gap: 10px }
.done-banner textarea { width: 100%; min-height: 80px; border: 0; border-radius: 14px; background: var(--surface-solid); padding: 12px }

/* teleprompter: always dark, like a real prompter */
.tp { position: fixed; inset: 0; z-index: 60; background: #000; color: #f5f5f7; display: flex; flex-direction: column }
.tp-scroll { flex: 1; overflow-y: auto; padding: 45vh max(20px, env(safe-area-inset-right, 0px)) 60vh max(20px, env(safe-area-inset-left, 0px)); scrollbar-width: none }
.tp-scroll::-webkit-scrollbar { display: none }
.tp-text { max-width: 900px; margin: 0 auto; font-family: var(--font-body); font-weight: 600; line-height: 1.4; letter-spacing: -.015em; white-space: pre-wrap; overflow-wrap: anywhere }
.tp[data-mirror] .tp-text { transform: scaleX(-1) }
.tp-guide { position: fixed; left: 0; right: 0; top: 38vh; height: 2px; background: rgba(199, 255, 37, .55); pointer-events: none }
.tp-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 12px max(12px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 12px) max(12px, env(safe-area-inset-left, 0px));
  background: rgba(17, 17, 17, .92); border-top: 1px solid rgba(255, 255, 255, .08) }
.tp-bar button { border: 0; background: rgba(255, 255, 255, .1); color: #f5f5f7; border-radius: 999px; padding: 9px 15px; font-size: 14px; font-weight: 600 }
.tp-bar button.go { background: var(--lime); color: #111; min-width: 100px }
.tp-bar .v { font-size: 13px; color: #8e8e93; align-self: center; min-width: 56px; text-align: center; font-variant-numeric: tabular-nums }

.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); transform: translate(-50%, 20px); opacity: 0; z-index: 80;
  background: var(--fg); color: var(--bg); padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; transition: all .35s var(--spring); pointer-events: none; max-width: calc(100vw - 32px) }
.toast[data-on] { opacity: 1; transform: translate(-50%, 0) }

/* password gate */
.gate { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: grid; place-items: center; padding: 24px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); overflow: hidden }
.gate::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40% 35% at 35% 40%, var(--glow-a), transparent 70%), radial-gradient(35% 30% at 65% 60%, var(--glow-b), transparent 70%); filter: blur(30px) }
.gate form { position: relative; width: min(100%, 380px); display: flex; flex-direction: column; gap: 14px; align-items: stretch; text-align: center }
.gate .brand { justify-content: center; font-size: 34px; gap: 12px }
.gate .brand .mark, .gate .brand .mark svg { width: 34px; height: 43px }
.gate p { margin: -4px 0 14px; color: var(--muted); font-size: 17px }
.gate input { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 14px 18px; font-size: 16px; text-align: center }
.gate input:focus { outline: none; border-color: var(--ring) }
.gate .err { min-height: 1.2em }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } }

/* ---- Glass Folder (ported from glass-folder-cards.tsx) ---- */
.gf-root{--gf-px:0;--gf-py:0;--gf-ease:cubic-bezier(.2,.8,.2,1);--gf-spring:cubic-bezier(.34,1.36,.5,1);--gf-hinge:0deg;--gf-lift:42px;--gf-spread:0px;--gf-fan:0deg;--gf-stack:15px;--gf-ink:#141416;--gf-ink-soft:rgba(20,20,22,.55);position:relative;display:inline-block;flex:none;vertical-align:top;font-family:var(--font-body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;isolation:isolate}
.gf-root[data-tone="dark"]{--gf-ink:#f5f5f7;--gf-ink-soft:rgba(245,245,247,.58)}
.gf-root:hover,.gf-root:focus-within{--gf-hinge:-11deg;--gf-lift:-34px;--gf-spread:8px;--gf-fan:1.4deg;--gf-stack:10px}
.gf-root[data-open]{--gf-hinge:-24deg;--gf-lift:-96px;--gf-spread:40px;--gf-fan:5deg;--gf-stack:30px}
.gf-stage{position:absolute;left:0;top:0;width:340px;height:272px;transform-origin:0 0}
.gf-tilt{position:absolute;inset:0;transform:perspective(1400px) rotateX(calc(var(--gf-py) * -3deg)) rotateY(calc(var(--gf-px) * 4deg));transition:transform .9s var(--gf-ease)}
.gf-shadow{position:absolute;left:18px;right:18px;bottom:-6px;height:60px;border-radius:40px;background:rgba(16,18,24,.34);filter:blur(22px);transform:translateX(calc(var(--gf-px) * -8px));transition:transform .9s var(--gf-ease),opacity .9s var(--gf-ease)}
.gf-root[data-tone="dark"] .gf-shadow{background:rgba(0,0,0,.62)}
.gf-back{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#f3f3f4 0%,#e3e3e6 100%)}
.gf-root[data-tone="dark"] .gf-back{background:linear-gradient(180deg,#2a2a2e 0%,#121214 100%)}
.gf-art{position:absolute;left:-12px;top:-12px;max-width:none;object-fit:cover;transform:translate(calc(var(--gf-px) * -7px),calc(var(--gf-py) * -6px)) scale(1.02);transition:transform 1.1s var(--gf-ease),opacity 1.2s var(--gf-ease),filter 1.2s var(--gf-ease)}
canvas.gf-art{opacity:0;filter:blur(14px) saturate(.6)}
canvas.gf-art[data-ready]{opacity:1;filter:none}
.gf-back-sheen{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 22%),radial-gradient(120% 80% at 80% 0%,rgba(255,255,255,.16),rgba(255,255,255,0) 60%);pointer-events:none}
.gf-rim{position:absolute;left:0;top:0;max-width:none;overflow:visible;pointer-events:none;fill:none}
.gf-back-rim{width:340px;height:272px}
.gf-back-rim path{stroke:rgba(255,255,255,.45);stroke-width:1}
.gf-root[data-tone="dark"] .gf-back-rim path{stroke:rgba(255,255,255,.16)}
.gf-files{position:absolute;inset:0;z-index:5;pointer-events:none;clip-path:inset(-400px -400px 10px -400px)}
.gf-sheet-slot{display:contents}
.gf-sheet{all:unset;box-sizing:border-box;position:absolute;left:34px;top:96px;width:272px;height:184px;border-radius:16px;overflow:hidden;cursor:pointer;pointer-events:auto;background:linear-gradient(180deg,#ffffff 0%,#f2f2f0 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 .5px rgba(0,0,0,.1),0 10px 26px -8px rgba(10,12,20,.28);transform-origin:50% 100%;transform:translate(calc(var(--gf-jx) + var(--gf-slot) * var(--gf-spread)),calc(var(--gf-lift) + var(--gf-depth) * var(--gf-stack) * -1)) rotate(calc(var(--gf-jr) + var(--gf-slot) * var(--gf-fan)));transition:transform .75s var(--gf-spring) calc(var(--gf-depth) * 40ms),box-shadow .4s var(--gf-ease),translate .9s var(--gf-ease),opacity .9s var(--gf-ease)}
.gf-root[data-tone="dark"] .gf-sheet{background:linear-gradient(180deg,#2c2c30 0%,#1c1c1f 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 .5px rgba(255,255,255,.08),0 12px 28px -8px rgba(0,0,0,.7)}
.gf-root[data-open] .gf-sheet:hover,.gf-root[data-open] .gf-sheet:focus-visible{transform:translate(calc(var(--gf-jx) + var(--gf-slot) * var(--gf-spread)),calc(var(--gf-lift) + var(--gf-depth) * var(--gf-stack) * -1 - 18px)) rotate(calc(var(--gf-slot) * var(--gf-fan) * .6));box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 .5px rgba(0,0,0,.1),0 22px 40px -12px rgba(10,12,20,.42);transition-delay:0s}
.gf-sheet:focus-visible{outline:2px solid #4c8dff;outline-offset:2px}
.gf-sheet-head{position:absolute;left:14px;right:14px;top:11px;z-index:1;display:flex;align-items:baseline;justify-content:space-between;gap:10px;white-space:nowrap}
.gf-sheet-name{overflow:hidden;text-overflow:ellipsis;font-size:12.5px;font-weight:500;letter-spacing:-.005em;color:#18181b}
.gf-sheet-meta{flex:none;font-family:var(--font-mono);font-size:10px;letter-spacing:.02em;color:rgba(24,24,27,.5)}
.gf-root[data-tone="dark"] .gf-sheet-name{color:#fafafa}
.gf-root[data-tone="dark"] .gf-sheet-meta{color:rgba(250,250,250,.66)}
.gf-lines{position:absolute;left:14px;right:14px;top:40px;display:flex;flex-direction:column;gap:9px}
.gf-lines i{display:block;height:5px;border-radius:3px;background:rgba(24,24,27,.08)}
.gf-lines i:first-child{height:9px;margin-bottom:4px;background:rgba(24,24,27,.14)}
.gf-root[data-tone="dark"] .gf-lines i{background:rgba(255,255,255,.08)}
.gf-root[data-tone="dark"] .gf-lines i:first-child{background:rgba(255,255,255,.16)}
.gf-sheet--drop{animation:gf-drop .85s var(--gf-ease) both}
@keyframes gf-drop{0%{translate:0 -190px;rotate:-9deg;opacity:0}35%{opacity:1}72%{translate:0 10px;rotate:1deg}100%{translate:0 0;rotate:0deg;opacity:1}}
.gf-front{position:absolute;left:0;top:74px;width:340px;height:198px;z-index:10;-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);transform-origin:50% 100%;transform:perspective(760px) rotateX(var(--gf-hinge));transition:transform .8s var(--gf-spring),translate 1s var(--gf-ease),opacity 1s var(--gf-ease)}
.gf-front--bump{animation:gf-bump .7s var(--gf-ease) .38s both}
@keyframes gf-bump{0%{scale:1}35%{scale:1.018 .975}70%{scale:.996 1.006}100%{scale:1}}
.gf-tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.5) 42%,rgba(252,252,252,.93) 100%)}
.gf-root[data-tone="dark"] .gf-tint{background:linear-gradient(180deg,rgba(18,18,20,.18) 0%,rgba(14,14,16,.62) 46%,rgba(8,8,10,.94) 100%)}
.gf-spec{position:absolute;inset:0;background:radial-gradient(260px 200px at calc(50% + var(--gf-px) * 46%) calc(30% + var(--gf-py) * 40%),rgba(255,255,255,.5),rgba(255,255,255,0) 70%);mix-blend-mode:soft-light;opacity:.9;pointer-events:none}
.gf-root[data-tone="dark"] .gf-spec{mix-blend-mode:screen;opacity:.16}
.gf-front-rim{width:340px;height:198px}
.gf-front-rim path{stroke-width:2.4;transition:stroke-width .3s var(--gf-ease)}
.gf-root[data-tone="dark"] .gf-front-rim{opacity:.55}
.gf-hit{all:unset;position:absolute;inset:0;z-index:1;cursor:pointer}
.gf-hit:focus-visible ~ .gf-label .gf-title{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.gf-front:has(.gf-hit:focus-visible) .gf-front-rim path{stroke-width:5}
.gf-label{position:absolute;z-index:2;display:flex;flex-direction:column;gap:4px;max-width:200px;pointer-events:none;color:var(--gf-ink)}
.gf-root[data-place="bottom-left"] .gf-label{left:28px;bottom:32px}
.gf-title{font-family:var(--font-title);font-size:24px;font-weight:500;line-height:1.1;letter-spacing:-.012em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gf-meta{font-family:var(--font-mono);font-size:12px;letter-spacing:.03em;color:var(--gf-ink-soft);white-space:nowrap;animation:gf-roll .5s var(--gf-ease) both}
@keyframes gf-roll{from{opacity:0;translate:0 7px;filter:blur(3px)}to{opacity:1;translate:0 0;filter:blur(0)}}
.gf-key{all:unset;box-sizing:border-box;position:absolute;right:22px;bottom:22px;z-index:12;width:58px;height:58px;border-radius:18px;display:grid;place-items:center;cursor:pointer;transition:transform .35s var(--gf-spring),box-shadow .35s var(--gf-ease),opacity .6s var(--gf-ease) .7s,scale .7s var(--gf-spring) .7s}
.gf-key:hover{transform:translateY(-2px)}
.gf-key:active{transform:translateY(0) scale(.93);transition-duration:.12s}
.gf-key:focus-visible{outline:2px solid #4c8dff;outline-offset:3px}
.gf-key--add{color:#fff;background:radial-gradient(120% 90% at 50% 0%,#3a3a3f 0%,#121214 55%,#050506 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -3px 8px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.75),0 14px 22px -8px rgba(0,0,0,.55),0 3px 6px -2px rgba(0,0,0,.35)}
.gf-root[data-tone="dark"] .gf-key--add{color:#111113;background:radial-gradient(120% 90% at 50% 0%,#ffffff 0%,#ececee 55%,#d2d2d6 100%);box-shadow:inset 0 1px 0 #fff,inset 0 -3px 8px rgba(0,0,0,.14),0 0 0 1px rgba(0,0,0,.4),0 14px 22px -8px rgba(0,0,0,.7)}
.gf-glyph{display:block;max-width:none;fill:none;stroke:currentColor;stroke-linecap:round}
.gf-glyph--plus{width:26px;height:26px;stroke-width:1.6}
.gf-root:not([data-entered]) .gf-back,.gf-root:not([data-entered]) .gf-back-rim{translate:0 22px;opacity:0}
.gf-root:not([data-entered]) .gf-sheet{translate:0 -120px;opacity:0}
.gf-root:not([data-entered]) .gf-front{translate:0 46px;opacity:0}
.gf-root:not([data-entered]) .gf-key{opacity:0;scale:.6}
.gf-root:not([data-entered]) .gf-shadow{opacity:0}
.gf-back,.gf-back-rim{transition:translate 1s var(--gf-ease),opacity .9s var(--gf-ease)}
.gf-root[data-entered] .gf-sheet{transition-delay:calc(var(--gf-depth) * 40ms),0s,calc(.18s + var(--gf-depth) * 90ms),calc(.18s + var(--gf-depth) * 90ms)}
.gf-root[data-entered] .gf-front{transition-delay:0s,.42s,.42s}
@media (prefers-reduced-motion:reduce){.gf-tilt{transform:none}}
/* content juice touches on the glass folders */
.gf-title{font-weight:700;letter-spacing:-.035em}
.gf-meta{font-size:13px;letter-spacing:0;font-variant-numeric:tabular-nums}
.gf-key--add,.gf-root[data-tone="dark"] .gf-key--add{color:#111;background:radial-gradient(120% 90% at 50% 0%,#e4ff8a 0%,#c7ff25 55%,#a6dc00 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -3px 8px rgba(60,90,0,.35),0 0 0 1px rgba(17,17,17,.25),0 14px 22px -8px rgba(80,120,0,.55)}

/* ============================================================ the universe: nav, pages, new sections */
.top { position: relative; z-index: 30 }
.top-right { display: flex; align-items: center; gap: 8px }
.mainnav { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--tabs-bg); border: 1px solid var(--line);
  backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6) }
.mainnav a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px; transition: color .2s, background .2s; white-space: nowrap }
.mainnav a:hover { color: var(--fg) }
.mainnav a[aria-current="page"] { background: var(--pill); color: var(--pill-fg) }
.mainnav .ic { width: 20px; height: 20px }
@media (max-width: 899px) {
  .sync { display: none }
  .mainnav { position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); width: min(calc(100% - 20px), 480px); justify-content: space-between; padding: 6px; box-shadow: 0 12px 34px -14px rgba(0, 0, 0, .45) }
  .mainnav a { flex: 1; flex-direction: column; gap: 3px; padding: 7px 2px; font-size: 10.5px; font-weight: 600; justify-content: center; min-width: 0 }
  .mainnav a span { overflow: hidden; text-overflow: ellipsis; max-width: 100% }
  .mainnav .ic { width: 24px; height: 24px }
}
.page { display: flex; flex-direction: column; gap: 40px; animation: paneIn .5s var(--ease) both }
.page-head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-block: clamp(28px, 6vw, 64px) 0 }
.page-head h1 { font-family: var(--font-title); font-weight: 800; font-size: clamp(42px, 7.5vw, 76px); line-height: 1; letter-spacing: -.055em; margin: 0 }
.page-head p { margin: 0; color: var(--muted); font-size: clamp(17px, 2.2vw, 21px); line-height: 1.45; max-width: 46ch; text-wrap: pretty }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--pink); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: 0 }
.note { color: var(--muted); font-size: 14px; margin: -16px 0 0; text-align: center }
.grid2 { display: grid; grid-template-columns: 1fr; gap: 12px }
@media (min-width: 640px) { .grid2 { grid-template-columns: 1fr 1fr } }
.lbl { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
select.field { appearance: none; -webkit-appearance: none; padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat }
textarea.field { resize: vertical }
.link { border: 0; background: none; padding: 0; color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px }
.link:hover { color: var(--fg) }

/* segmented radio control */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--soft); max-width: 100% }
.seg.center { align-self: center }
.seg button { border: 0; background: transparent; padding: 7px 15px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; transition: background .25s, color .25s }
.seg.sm button { padding: 5px 12px; font-size: 13px }
.seg button[aria-checked="true"] { background: var(--surface-solid); color: var(--fg); box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .25) }
.composer .sec-h { align-items: flex-start }
.card .paste { gap: 14px }

/* stats */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)) } }
.stat { background: var(--card); border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.stat .v { font-weight: 800; font-size: clamp(26px, 4vw, 36px); line-height: 1.05; letter-spacing: -.045em; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.stat .k { color: var(--muted); font-size: 13.5px; font-weight: 500 }
.stat.hot { background: var(--lime); color: #111 }
.stat.hot .k { color: rgba(17, 17, 17, .62) }
.bar { height: 8px; border-radius: 99px; background: var(--soft); overflow: hidden; margin-top: 8px }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--lime); transition: width .8s var(--ease) }
.stat.hot .bar { background: rgba(17, 17, 17, .14) }
.stat.hot .bar i { background: #111 }

/* calendar */
.cal { display: flex; flex-direction: column; gap: 10px }
.cal-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px }
.cal-head h2::first-letter { text-transform: uppercase }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px }
.cal-dow span { text-align: center; font-size: 12px; font-weight: 600; color: var(--muted) }
.day { position: relative; min-height: 76px; border: 0; border-radius: 14px; background: var(--surface-solid); padding: 7px; text-align: left; display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow: hidden; transition: transform .3s var(--spring), box-shadow .2s }
.day:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .4) }
.day .dn { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums }
.day.out { opacity: .38 }
.day.today .dn { background: var(--fg); color: var(--bg); border-radius: 99px; width: 24px; height: 24px; display: grid; place-items: center; margin: -2px }
.day.past:not(.today) .dn { color: var(--muted) }
.ev { display: block; font-size: 11.5px; font-weight: 600; line-height: 1.25; padding: 3px 6px; border-radius: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--lime); color: #111 }
.ev.post { background: var(--pink); color: #fff }
.ev.more { background: transparent; color: var(--muted); padding: 0 2px }
@media (max-width: 640px) {
  .day { min-height: 54px; padding: 5px; align-items: center }
  .day .ev { width: 7px; height: 7px; padding: 0; border-radius: 50%; font-size: 0; display: inline-block }
  .day .evs { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center }
  .day .ev.more { display: none }
}
.evs { display: flex; flex-direction: column; gap: 3px; min-width: 0 }
.legend { display: flex; gap: 16px; justify-content: flex-end; margin-top: 4px }
.legend .tag::before { background: var(--c) }
.cols { display: grid; grid-template-columns: 1fr; gap: 32px }
@media (min-width: 860px) { .cols { grid-template-columns: 1fr 1fr } }
.cols > div { display: flex; flex-direction: column; gap: 16px; min-width: 0 }
.list { display: flex; flex-direction: column; gap: 8px }
.li { border: 0; background: var(--card); border-radius: 18px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; text-align: left; min-width: 0; transition: transform .3s var(--spring) }
.li:hover { transform: translateX(3px) }
.li .when { flex: none; width: 48px; text-align: center; display: flex; flex-direction: column; line-height: 1.05 }
.li .when b { font-size: 22px; font-weight: 800; letter-spacing: -.04em }
.li .when small { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase }
.li .what { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 }
.li .what strong { font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.li .what span { color: var(--muted); font-size: 13px }

/* posts */
.post-views { font-weight: 800; font-size: 30px; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums }
.post-views small { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-left: 4px }
.verdict { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--soft); color: var(--muted); white-space: nowrap }
.verdict.win { background: var(--lime); color: #111 }
.verdict.low { background: color-mix(in srgb, var(--pink) 16%, transparent); color: var(--ai) }
.verdict.mid { background: var(--soft); color: var(--fg) }
.insight-row { display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto; align-items: center; gap: 12px; font-size: 14px }
.insight-row .bar { margin: 0; height: 10px }
.insights { display: flex; flex-direction: column; gap: 12px; margin-top: 14px }
.mtable { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums }
.mtable th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 6px 8px }
.mtable td { padding: 8px; border-top: 1px solid var(--line) }
.mgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
@media (min-width: 640px) { .mgrid { grid-template-columns: repeat(6, minmax(0, 1fr)) } }
.mgrid .field { padding: 10px 12px; font-size: 15px }
.mgrid .field-label { font-size: 12px }
.scroll-x { overflow-x: auto }
.platform { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted) }

/* edición (preview) */
.drop { border: 2px dashed color-mix(in srgb, var(--fg) 18%, transparent); background: var(--card); border-radius: 32px; padding: clamp(36px, 8vw, 72px) 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--muted); font-size: 15px; transition: border-color .2s, transform .3s var(--spring) }
.drop:hover { border-color: var(--lime); transform: scale(1.005) }
.drop strong { color: var(--fg); font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; letter-spacing: -.04em }
.drop .btn { margin-top: 8px }
.drop-icon { width: 64px; height: 64px; border-radius: 50%; background: transparent; border: 1.5px solid var(--line); color: var(--fg); display: grid; place-items: center; margin-bottom: 6px }
.drop-icon .ic { width: 26px; height: 26px }
.steps3 { display: grid; grid-template-columns: 1fr; gap: 10px }
@media (min-width: 760px) { .steps3 { grid-template-columns: repeat(3, 1fr) } }
.steps3 > div { background: var(--card); border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 4px }
.steps3 .num { width: 28px; height: 28px; border-radius: 50%; background: var(--fg); color: var(--bg); display: grid; place-items: center; font-weight: 700; font-size: 14px; margin-bottom: 6px }
.steps3 strong { font-size: 17px; letter-spacing: -.02em }
.steps3 p { margin: 0; color: var(--muted); font-size: 14px }
.lib { cursor: default }
.lib-ic { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--line); color: var(--fg) }
.lib-ic svg { width: 20px; height: 20px }
textarea:disabled { opacity: .6 }

/* style lab */
.tone-card .row { justify-content: flex-start }
.tone-desc { color: var(--muted); font-size: 14.5px; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden }
.default-pill { display: inline-flex; padding: 4px 10px; border-radius: 999px; background: var(--lime); color: #111; font-size: 12px; font-weight: 700 }
details.more summary { cursor: pointer; font-weight: 600; font-size: 14.5px; color: var(--ai); list-style: none }
details.more summary::-webkit-details-marker { display: none }
details.more summary::before { content: "✦ " }
.style-prev { height: 120px; border-radius: 16px; position: relative; overflow: hidden; display: grid; place-items: end start; padding: 12px; color: #fff; font-weight: 800; font-size: 20px; letter-spacing: -.03em }

/* settings + small panels */
.set-sec { display: flex; flex-direction: column; gap: 12px }
.set-sec + .set-sec { border-top: 1px solid var(--line); padding-top: 24px }
.set-sec h3 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.025em }
.provider { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.provider button { border: 2px solid var(--line); background: var(--surface-solid); border-radius: 18px; padding: 14px; text-align: left; display: flex; flex-direction: column; gap: 2px; transition: border-color .2s }
.provider button strong { font-size: 16px }
.provider button span { color: var(--muted); font-size: 13px }
.provider button[aria-checked="true"] { border-color: var(--fg) }
.fmt-chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 6px 6px 13px; border-radius: 999px; background: var(--soft); font-size: 13.5px; font-weight: 500 }
.fmt-chip button { border: 0; background: transparent; width: 22px; height: 22px; border-radius: 50%; color: var(--muted); display: grid; place-items: center; font-size: 15px; line-height: 1 }
.fmt-chip button:hover { background: var(--line); color: var(--fg) }
.ok-line { color: var(--ok); font-weight: 600; font-size: 14px }
.panel-in { max-width: 640px }

/* gate: sign in / sign up */
.gate input[type="email"], .gate input[type="password"] { text-align: left }
.gate .google { background: var(--surface-solid); border: 1px solid var(--line); gap: 10px }
.gate .google svg { width: 20px; height: 20px }
.gate .or { color: var(--muted); font-size: 13px }
.gate-links { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap }
.gate .ok { color: var(--fg); font-size: 14.5px; background: color-mix(in srgb, var(--lime) 30%, transparent); padding: 10px 14px; border-radius: 14px }

/* subfolders (inside Borradores / Grabados): dark memo cards with liquid art and a folder tab */
.subs { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 2px 14px; margin: -8px -2px -18px; scrollbar-width: none }
.subs::-webkit-scrollbar { display: none }
.subf { position: relative; flex: none; width: 196px; height: 178px; border: 0; padding: 0; border-radius: 26px; overflow: hidden; background: #0c0c0c; color: #f5f5f7; text-align: left; scroll-snap-align: start;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 14px 30px -18px rgba(0, 0, 0, .6); transition: transform .5s var(--spring), box-shadow .3s }
.subf:hover { transform: translateY(-5px) rotate(-1deg) }
.subf:active { transform: scale(.96) }
.subf.on { box-shadow: 0 0 0 3px var(--lime), 0 18px 34px -16px color-mix(in srgb, var(--lime) 60%, transparent) }
.subf-art { position: absolute; inset: 0 0 auto; height: 62%; overflow: hidden }
.subf-art canvas { width: 100% !important; height: 100% !important; object-fit: cover; transform: scale(1.08); transition: transform .8s var(--ease), opacity 1s var(--ease); opacity: 0 }
.subf-art canvas[data-ready] { opacity: 1 }
.subf:hover .subf-art canvas { transform: scale(1.18) }
.subf-front { position: absolute; inset: 38% 0 0; background: linear-gradient(180deg, rgba(28, 28, 30, .86), #141414 40%); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  clip-path: polygon(0 12px, 2% 4px, 6% 0, 44% 0, 50% 6px, 56% 22px, 100% 22px, 100% 100%, 0 100%); border-radius: 0 0 26px 26px;
  display: flex; flex-direction: column; padding: 16px 16px 14px; gap: 1px }
.subf-name { font-weight: 700; font-size: 16px; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.subf-sub { font-size: 12.5px; color: rgba(245, 245, 247, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.subf-foot { margin-top: auto; display: flex; align-items: baseline; gap: 6px; font-size: 13px; color: rgba(245, 245, 247, .7) }
.subf-foot b { font-size: 30px; font-weight: 800; letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums }
.subf.on .subf-foot b { color: var(--lime) }

/* icons */
.ic { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none }
.ic svg { width: 100%; height: 100%; display: block }
.pipe .ic { grid-column: 1 / -1; width: 20px; height: 20px; margin-bottom: 14px; color: var(--muted) }
.pipe button[data-on] .ic { color: rgba(17, 17, 17, .7) }
.pipe .step { margin-bottom: 4px }
/* ============================================================ widget glow + motion (UI first) */
:root { --glow-card: radial-gradient(120% 90% at 0% 0%, rgba(199, 255, 37, .16), transparent 55%), radial-gradient(110% 80% at 100% 100%, rgba(255, 61, 154, .1), transparent 55%) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --glow-card: radial-gradient(120% 90% at 0% 0%, rgba(199, 255, 37, .11), transparent 55%), radial-gradient(110% 80% at 100% 100%, rgba(255, 61, 154, .12), transparent 55%) } }
:root[data-theme="dark"] { --glow-card: radial-gradient(120% 90% at 0% 0%, rgba(199, 255, 37, .11), transparent 55%), radial-gradient(110% 80% at 100% 100%, rgba(255, 61, 154, .12), transparent 55%) }
.card, .stat:not(.hot), .pipe button:not([data-on]), .steps3 > div { background: var(--glow-card), var(--card); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) }
.stat.hot, .pipe button[data-on] { background: radial-gradient(120% 100% at 100% 0%, rgba(255, 255, 255, .55), transparent 50%), var(--lime); box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--lime) 90%, transparent) }

/* cards lift like a card picked up from a stack, with a light that follows the pointer */
.item, .stat, .pipe button, .li, .day { will-change: transform }
.item { transition: transform .55s var(--spring), box-shadow .35s var(--ease) }
.item:hover { transform: translateY(-6px) rotate(-.6deg) scale(1.01); box-shadow: 0 28px 50px -26px rgba(0, 0, 0, .55), 0 0 0 1px color-mix(in srgb, var(--lime) 35%, transparent) }
.item:active, .pipe button:active, .stat:active, .li:active { transform: scale(.97); transition-duration: .15s }
.item::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(360px 180px at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--lime) 14%, transparent), transparent 70%) }
.item:hover::after { opacity: 1 }
.stat { transition: transform .5s var(--spring) }
.stat:hover { transform: translateY(-3px) }

/* reveal on scroll, staggered */
.rv { opacity: 0; transform: translateY(18px) scale(.97); filter: blur(4px) }
.rv.in { opacity: 1; transform: none; filter: none; transition: opacity .7s var(--ease) var(--d, 0s), transform .8s var(--spring) var(--d, 0s), filter .7s var(--ease) var(--d, 0s) }
.hero h1 { animation: heroIn 1.1s var(--spring) both }
.hero p { animation: heroIn 1.1s var(--spring) .12s both }
.hero .row { animation: heroIn 1.1s var(--spring) .24s both }
.hl { color: var(--fg); background-size: 0% 100%; background-image: linear-gradient(var(--lime), var(--lime)); background-repeat: no-repeat; background-color: transparent; animation: hlIn 1s var(--ease) .5s forwards }
@keyframes heroIn { from { opacity: 0; transform: translateY(26px) scale(.96); filter: blur(8px) } to { opacity: 1; transform: none; filter: none } }
@keyframes hlIn { from { color: var(--fg) } to { background-size: 100% 100%; color: #111 } }
.page-head > * { animation: heroIn .9s var(--spring) both }
.page-head > :nth-child(2) { animation-delay: .06s } .page-head > :nth-child(3) { animation-delay: .12s } .page-head > :nth-child(4) { animation-delay: .18s }
.btn.accent { position: relative; overflow: hidden }
.btn.accent::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); transform: translateX(-120%); transition: transform .8s var(--ease) }
.btn.accent:hover::after { transform: translateX(120%) }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; filter: none } .hl { background-size: 100% 100%; color: #111 } }

/* months: tall cards that stack as you scroll, giant month name over the brand art */
.months { display: flex; flex-direction: column; gap: 14px; padding-bottom: 20px }
.month { position: sticky; top: calc(14px + var(--i, 0) * 12px); height: clamp(190px, 30vw, 250px); border: 0; padding: 0; border-radius: 30px; overflow: hidden; background: #0c0c0c; color: #fff; text-align: left;
  box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .1); transition: transform .55s var(--spring) }
.month:hover { transform: scale(1.012) }
.month:active { transform: scale(.98) }
.month-art { position: absolute; inset: 0 }
.month-art img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.4s var(--ease) }
.month:hover .month-art img { transform: scale(1.1) }
.month-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .45)) }
.month-pill { position: absolute; left: 16px; top: 16px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: 13px; font-weight: 600; border: 1px solid rgba(255, 255, 255, .22) }
.month-go { position: absolute; right: 16px; top: 16px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .22); font-size: 17px; transition: transform .4s var(--spring) }
.month:hover .month-go { transform: rotate(45deg); background: var(--lime); color: #111 }
.month-stat { position: absolute; right: 18px; bottom: 18px; font-size: 14px; font-weight: 600; text-align: right; text-shadow: 0 1px 8px rgba(0, 0, 0, .5) }
.month-stat b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.04em }
.month-name { position: absolute; left: 10px; bottom: -.16em; font-size: clamp(72px, 15vw, 150px); font-weight: 800; letter-spacing: -.065em; line-height: 1; color: rgba(255, 255, 255, .9); text-shadow: 0 8px 40px rgba(0, 0, 0, .35); text-transform: capitalize }
.month.empty-m .month-pill { opacity: .8 }

/* welcome: an envelope opens and a pink invitation rises, like getting into a private club */
.welcome { position: fixed; inset: 0; z-index: 120; background: #050505; display: grid; place-items: center; overflow: hidden; padding: 20px; perspective: 1200px }
.welcome.out { animation: wlOut .7s var(--ease) forwards }
.wl-glow { position: absolute; width: 900px; height: 700px; left: 50%; top: 52%; transform: translate(-50%, -50%) scale(.6); opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 61, 154, .55), rgba(255, 61, 154, .12) 55%, transparent), radial-gradient(closest-side at 50% 70%, rgba(199, 255, 37, .18), transparent);
  filter: blur(20px); animation: wlGlow 2.4s var(--ease) .9s forwards }
.env { position: relative; width: min(92vw, 460px); height: min(62vw, 290px); margin-top: 170px; animation: envIn 1s var(--spring) both; transform-style: preserve-3d }
.env-back, .env-front, .env-flap { position: absolute; inset: 0; border-radius: 18px }
.env-back { background: linear-gradient(180deg, #2a2a2c, #161617) }
.env-front { z-index: 3; background: linear-gradient(160deg, #262628, #111112 70%); clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) }
.env-front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(32deg, transparent 49.6%, rgba(255, 255, 255, .06) 50%, transparent 50.4%), linear-gradient(-32deg, transparent 49.6%, rgba(255, 255, 255, .06) 50%, transparent 50.4%) }
.env-flap { z-index: 4; height: 62%; background: linear-gradient(180deg, #333336, #1d1d1f); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; border-radius: 18px 18px 0 0;
  animation: flapOpen .9s var(--ease) .75s forwards }
.env-seal { position: absolute; z-index: 5; left: 50%; top: 56%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffb8d9, #ff3d9a 55%, #b8005c); box-shadow: 0 6px 16px rgba(255, 61, 154, .45); animation: sealPop .5s var(--ease) .55s forwards }
.letter { position: absolute; z-index: 2; left: 5%; right: 5%; bottom: 10px; height: calc(100% - 22px); overflow: hidden; border-radius: 20px; padding: 26px 24px; text-align: center; color: #fff;
  background: radial-gradient(120% 80% at 50% 0%, #ff8cc3, #ff3d9a 45%, #c4005e); box-shadow: 0 30px 60px -20px rgba(255, 61, 154, .6);
  display: flex; flex-direction: column; align-items: center; gap: 12px; animation: letterUp 1.3s var(--spring) 1.6s forwards }
.letter > * { opacity: 0; animation: wlText .8s var(--ease) forwards }
.letter > :nth-child(1) { animation-delay: 2.3s } .letter > :nth-child(2) { animation-delay: 2.45s } .letter > :nth-child(3) { animation-delay: 2.6s } .letter > :nth-child(4) { animation-delay: 2.8s }
.wl-brand { font-family: var(--font-brand); font-weight: 800; font-size: 17px; letter-spacing: -.03em; font-variation-settings: "opsz" 24, "SOFT" 50 }
.wl-brand .dot { background: var(--lime) }
.letter h2 { margin: 4px 0 0; font-size: clamp(30px, 7vw, 40px); font-weight: 800; letter-spacing: -.05em; line-height: 1.02; text-wrap: balance }
.letter p { margin: 0; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .88); max-width: 34ch }
.letter .btn { margin-top: 6px; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .45) }
@keyframes envIn { from { opacity: 0; transform: translateY(60px) rotateX(18deg) scale(.9) } to { opacity: 1; transform: none } }
@keyframes sealPop { to { transform: scale(0); opacity: 0 } }
@keyframes flapOpen { 0% { transform: rotateX(0) } 100% { transform: rotateX(180deg); z-index: 1 } }
@keyframes letterUp { to { height: 410px; transform: translateY(-34px) } }
@keyframes wlText { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@keyframes wlGlow { to { opacity: 1; transform: translate(-50%, -50%) scale(1) } }
@keyframes wlOut { to { opacity: 0; transform: scale(1.06); filter: blur(10px) } }
@media (prefers-reduced-motion: reduce) { .letter { height: 410px; transform: translateY(-34px) } .letter > *, .wl-glow { opacity: 1 } .env-flap, .env-seal { display: none } }

@media (max-width: 1099px) { .sync { display: none } }

/* ============================================================ Inicio: hero + dock */
.back-home { margin-right: auto; margin-left: 14px; padding: 7px 14px; border-radius: 999px; background: var(--soft); color: var(--fg); text-decoration: none; font-size: 14px; font-weight: 600; transition: transform .3s var(--spring) }
.back-home:hover { transform: translateX(-2px) }
.hero.home { padding-block: clamp(56px, 14vh, 140px) 12px }
.eyebrow { font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0; animation: heroIn 1s var(--spring) both }
.dock { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 980px; width: 100%; margin: 0 auto }
.dock .dock-item:first-child { grid-column: 1 / -1 }
@media (min-width: 820px) { .dock { grid-template-columns: repeat(5, minmax(0, 1fr)) } .dock .dock-item:first-child { grid-column: auto } }
.dock-item { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px 18px 18px; border-radius: 24px; text-decoration: none; color: var(--fg);
  background: var(--glow-card), var(--card); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); transition: transform .5s var(--spring), box-shadow .3s }
.dock-item:hover { transform: translateY(-5px); box-shadow: 0 24px 44px -26px rgba(0, 0, 0, .6), 0 0 0 1px color-mix(in srgb, var(--lime) 40%, transparent) }
.dock-item:active { transform: scale(.97) }
.dock-item .ic { width: 22px; height: 22px; margin-bottom: 18px; color: var(--fg) }
.dock-item strong { font-size: 17px; letter-spacing: -.02em }
.dock-item span:last-child { font-size: 13px; color: var(--muted); line-height: 1.35 }

/* ============================================================ Guiones: three folders + collections */
.vault3 { display: grid; grid-template-columns: 1fr; gap: 40px 24px; padding: 12px 0 8px }
@media (min-width: 1000px) { .vault3 { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
.vcol { display: flex; flex-direction: column; gap: 16px; min-width: 0 }
.vfolder { display: flex; justify-content: center }
.vcol .gf-root { filter: drop-shadow(0 0 26px color-mix(in srgb, var(--acc) 32%, transparent)) }
.vcol .gf-front-rim path { stroke: color-mix(in srgb, var(--acc) 75%, transparent) }
.vcol .gf-back-rim path { stroke: color-mix(in srgb, var(--acc) 45%, transparent) }
.vcol .gf-tint { background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 14%, rgba(18, 18, 20, .25)) 0%, rgba(14, 14, 16, .7) 46%, color-mix(in srgb, var(--acc) 12%, rgba(8, 8, 10, .95)) 100%) !important }
.vcol .gf-key--add { color: #111 !important; background: radial-gradient(120% 90% at 50% 0%, #fff 0%, var(--acc) 55%, color-mix(in srgb, var(--acc) 70%, #000) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -3px 8px rgba(0, 0, 0, .25), 0 0 0 1px rgba(0, 0, 0, .3), 0 10px 26px -6px color-mix(in srgb, var(--acc) 70%, transparent) !important }
.vcol[data-sec="scripts"] .gf-key--add { color: #fff !important }
.vhead { display: flex; align-items: center; gap: 12px; border: 0; background: transparent; color: var(--fg); padding: 2px 4px; text-align: left; border-top: 1px solid var(--line); padding-top: 18px }
.vhead strong { font-size: 22px; font-weight: 700; letter-spacing: -.03em }
.vdot { width: 16px; height: 16px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 14px color-mix(in srgb, var(--acc) 70%, transparent); flex: none }
.vmeta { margin-left: auto; font-size: 13px; color: var(--muted) }
.vchev { font-size: 24px; line-height: 1; color: var(--muted); transition: transform .3s var(--spring) }
.vhead:hover .vchev { transform: translateX(3px); color: var(--fg) }
.vsubs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.vsubs .subf { width: auto; height: 176px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 30%, transparent), 0 14px 30px -18px rgba(0, 0, 0, .6) }
.vsubs .subf.on { box-shadow: inset 0 0 0 1.5px var(--acc), 0 0 30px -6px color-mix(in srgb, var(--acc) 55%, transparent) }
.vsubs .subf-foot b, .vsubs .subf.on .subf-foot b { color: var(--acc) }
.vsubs .subf-front { background: linear-gradient(180deg, rgba(22, 22, 24, .84), #0e0e0f 45%) }
#scripts, #hooks, #ideas { scroll-margin-top: 20px }

/* ============================================================ collection view (Borradores, Virales…) */
.coll { padding-top: calc(env(safe-area-inset-top, 0px) + 12px) }
.coll-in { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px }
.coll-bar { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 3; padding-block: 8px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px) }
.coll-crumb { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 600 }
.coll-crumb::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 12px color-mix(in srgb, var(--acc) 70%, transparent) }
.coll .pane { gap: 24px }
.coll-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-top: 8px }
.coll-kicker { font-size: 14px; font-weight: 600; color: var(--acc) }
.coll-head h1 { margin: 2px 0 0; font-size: clamp(38px, 6.5vw, 64px); font-weight: 800; letter-spacing: -.055em; line-height: 1 }
.coll-head .sub { margin-top: 6px }
.coll-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.coll-tools .search { flex: 1 1 240px; width: auto; border-radius: 999px; padding: 11px 18px; background: var(--card) }
.chip-n { font-size: 12px; opacity: .55; font-variant-numeric: tabular-nums }

/* script files: dark document tiles with a real text preview and a colored badge */
.files { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 26px 20px }
@media (min-width: 700px) { .files { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) } }
.file { border: 0; background: none; padding: 0; color: var(--fg); text-align: left; display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.file-sheet { position: relative; aspect-ratio: 3 / 3.6; border-radius: 20px; background: linear-gradient(180deg, #262628, #1d1d1f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 16px 30px -20px rgba(0, 0, 0, .7);
  padding: 18px 16px; display: flex; flex-direction: column; gap: 8px; overflow: visible; transition: transform .5s var(--spring), box-shadow .3s }
.file:hover .file-sheet { transform: translateY(-6px) rotate(-1deg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 26px 40px -22px rgba(0, 0, 0, .8), 0 0 0 1px color-mix(in srgb, var(--acc, var(--lime)) 40%, transparent) }
.file:active .file-sheet { transform: scale(.96) }
.file-title { font-size: 10.5px; font-weight: 700; color: #e5e5ea; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.file-text { font-size: 8px; line-height: 1.55; color: #8e8e93; display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line }
.badge-f { position: absolute; right: -10px; bottom: 16px; padding: 6px 11px; border-radius: 9px; background: var(--c); color: #111; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .6); max-width: calc(100% + 4px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.file-name { font-size: 15px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.file-meta { font-size: 12.5px; color: var(--muted) }
:root:not([data-theme="dark"]) .file-sheet { background: linear-gradient(180deg, #2a2a2c, #1c1c1e) }
.doc-kicker .badge-f { position: static; display: inline-block }

/* ============================================================ script view: read first, record next */
.sheet-in.doc { max-width: 720px; padding-bottom: 40px }
.doc-head { display: flex; flex-direction: column; gap: 10px; padding-top: 18px }
.doc-kicker { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; font-weight: 600 }
.doc .doc-title { font-size: clamp(34px, 6.5vw, 52px); letter-spacing: -.05em }
.doc-meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 14px; font-weight: 500 }
.doc-time { color: var(--fg) }
.reader { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 12px }
.reader-block { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: baseline; padding: 14px 16px 14px 0; border-radius: 18px; transition: background .2s }
.reader-block:hover { background: color-mix(in srgb, var(--fg) 4%, transparent) }
.reader-at { text-align: right; font-size: 12.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums }
.reader p { margin: 0; font-size: clamp(19px, 2.4vw, 23px); line-height: 1.62; letter-spacing: -.012em; white-space: pre-wrap; overflow-wrap: anywhere; text-wrap: pretty }
.hook-block { background: color-mix(in srgb, var(--lime) 13%, transparent); padding-block: 18px }
.hook-block:hover { background: color-mix(in srgb, var(--lime) 18%, transparent) }
.hook-block .reader-at { color: var(--fg); text-transform: uppercase; font-size: 11.5px; letter-spacing: .06em }
.hook-block p { font-weight: 700; font-size: clamp(22px, 2.8vw, 27px); letter-spacing: -.025em }
.reader-label { margin: 16px 0 0 66px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted) }
.reader-empty { color: var(--muted); font-size: 17px }
@media (max-width: 560px) { .reader-block { grid-template-columns: 1fr; gap: 4px; padding: 12px 14px } .reader-at { text-align: left } .reader-label { margin-left: 14px } }
.doc .doc-body { min-height: 50vh; font-size: 19px; line-height: 1.7; padding: 22px 24px }
.doc-dock { position: sticky; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); z-index: 3; display: flex; gap: 8px; align-items: center; padding: 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--card) 80%, transparent); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6), inset 0 0 0 1px var(--line) }
.doc-dock .rec { flex: 1 }
.doc-dock .icon-btn { width: 48px; height: 48px }
.fold { padding: 0 }
.fold summary { cursor: pointer; list-style: none; padding: 18px 22px; font-weight: 700; font-size: 16px; letter-spacing: -.02em; display: flex; justify-content: space-between; align-items: center }
.fold summary::-webkit-details-marker { display: none }
.fold summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--muted); transition: transform .3s var(--spring) }
.fold[open] summary::after { transform: rotate(45deg) }
.fold-in { display: flex; flex-direction: column; gap: 12px; padding: 0 22px 22px }

/* ============================================================ teleprompter polish */
.tp-scroll { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 72%, transparent 100%) }
.tp-text { letter-spacing: -.01em }
.tp-progress { position: fixed; z-index: 2; left: 0; right: 0; top: 0; height: 3px; background: rgba(255, 255, 255, .08) }
.tp-progress i { display: block; height: 100%; width: 0; background: var(--lime); transition: width .2s linear }
.tp-count { position: fixed; inset: 0; z-index: 3; display: grid; place-items: center; font-size: clamp(120px, 30vw, 260px); font-weight: 800; letter-spacing: -.06em; color: var(--lime); background: rgba(0, 0, 0, .55); animation: tpCount .8s var(--ease) both }
@keyframes tpCount { from { opacity: 0; transform: scale(1.3) } 30% { opacity: 1; transform: scale(1) } to { opacity: .2; transform: scale(.85) } }

/* the section menu shows on every page except Inicio (on phones it sits at the bottom) */
.mainnav[hidden] { display: none !important }
@media (max-width: 899px) { body.has-nav { padding-bottom: 120px } body.has-nav .toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 92px) } body.has-nav .doc-dock { bottom: calc(env(safe-area-inset-bottom, 0px) + 92px) } body.has-nav .sheet { padding-bottom: 130px } }

/* ============================================================ header stays on top; full-screen views open below it so the menu is always there */
:root { --top-h: 64px }
.top { position: sticky; top: 0; z-index: 55; margin-inline: -16px; padding: 12px 16px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4) }
.sheet { top: calc(env(safe-area-inset-top, 0px) + var(--top-h)); padding-top: 8px }
.tp { z-index: 90 }
@media (max-width: 899px) { .mainnav { z-index: 60 } }
.coll { display: block }
.coll-bar { top: var(--top-h) }

/* Guiones home: create bar + Style Lab link above the three folders */
.guiones-home { display: flex; flex-direction: column; gap: 22px }
.create-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 10px 10px 22px; border-radius: 999px;
  background: var(--glow-card), var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -26px rgba(0, 0, 0, .6) }
.create-label { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; letter-spacing: -.02em }
.create-opts { display: flex; gap: 8px; flex-wrap: wrap }
@media (max-width: 560px) { .create-bar { border-radius: 26px; padding: 16px } .create-opts { width: 100% } .create-opts .btn { flex: 1 } }
.lab-link { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 20px; text-decoration: none; color: var(--fg); background: color-mix(in srgb, var(--pink) 9%, var(--card)); transition: transform .4s var(--spring) }
.lab-link:hover { transform: translateY(-2px) }
.lab-link > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; flex: 1 }
.lab-link strong { font-size: 15.5px; letter-spacing: -.01em }
.lab-link span span { font-size: 13.5px; color: var(--muted) }
.lab-link .ic { color: var(--pink) }

/* inside a folder: the two collections as switch cards */
.coll-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 14px; --acc: inherit }
.coll-switch .subf { width: auto; height: 170px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 30%, transparent) }
.coll-switch .subf.on { box-shadow: inset 0 0 0 1.5px var(--acc), 0 0 30px -6px color-mix(in srgb, var(--acc) 55%, transparent) }
.coll-switch .subf-foot b, .coll-switch .subf.on .subf-foot b { color: var(--acc) }

/* script chat */
.chat-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap }
.chat-tone { width: auto; padding: 9px 36px 9px 14px; font-size: 14px; border-radius: 999px; background-color: var(--card) }
.chat-log { display: flex; flex-direction: column; gap: 12px; min-height: 40vh; padding: 8px 0 120px }
.msg { max-width: 82%; padding: 13px 17px; border-radius: 22px; font-size: 16px; line-height: 1.55; white-space: pre-wrap; animation: paneIn .35s var(--ease) both }
.msg.ai { align-self: flex-start; background: var(--card); border-bottom-left-radius: 8px }
.msg.me { align-self: flex-end; background: var(--lime); color: #111; border-bottom-right-radius: 8px }
.msg.script { align-self: stretch; max-width: none; background: var(--glow-card), var(--card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lime) 35%, transparent); display: flex; flex-direction: column; gap: 8px; white-space: normal; padding: 18px 20px }
.msg-k { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted) }
.msg-title { font-size: 22px; letter-spacing: -.03em }
.reader.mini p { font-size: 17px }
.reader.mini .hook-block p { font-size: 19px }
.chat-bar { position: sticky; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); display: flex; gap: 8px; align-items: flex-end; padding: 8px 8px 8px 18px; border-radius: 28px;
  background: color-mix(in srgb, var(--card) 85%, transparent); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6), inset 0 0 0 1px var(--line) }
.chat-input { flex: 1; border: 0; background: transparent; resize: none; font-size: 16px; line-height: 1.5; padding: 9px 0; max-height: 180px }
.chat-input:focus { outline: none }
@media (max-width: 899px) { body.has-nav .chat-bar { bottom: calc(env(safe-area-inset-bottom, 0px) + 92px) } }

/* import past videos */
.imp-list { display: flex; flex-direction: column; gap: 8px }
.imp-row { display: grid; grid-template-columns: auto 1fr 170px; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; background: var(--card); cursor: pointer }
.imp-row.dup { opacity: .55 }
.imp-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--lime) }
.imp-main { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.imp-main .field { padding: 9px 12px; font-size: 15px }
.imp-url { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
@media (max-width: 600px) { .imp-row { grid-template-columns: auto 1fr } .imp-row > .field { grid-column: 2 } }

/* ============================================================ Planning: calendar + side list, drag to schedule */
.plan-layout { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start }
@media (min-width: 1000px) { .plan-layout { grid-template-columns: minmax(0, 1fr) 300px } .plan-side { position: sticky; top: calc(var(--top-h) + 16px) } }
.plan-side { display: flex; flex-direction: column; gap: 12px }
.plan-side h2 { font-size: 22px }
.post-days { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -4px 0 6px }
.days7 { display: flex; gap: 4px }
.d7 { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: transparent; font-size: 12.5px; font-weight: 700; color: var(--muted); transition: all .2s }
.d7[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg) }
.hint-gap { font-size: 12.5px }
@media (max-width: 700px) { .hint-gap { display: none } }
.day { cursor: pointer }
.day.gap { background: repeating-linear-gradient(135deg, transparent 0 8px, color-mix(in srgb, var(--lime) 7%, transparent) 8px 16px), var(--surface-solid); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--lime) 35%, transparent) }
.gap-tag { margin-top: auto; font-size: 10.5px; font-weight: 700; color: color-mix(in srgb, var(--lime) 70%, var(--fg)); text-transform: uppercase; letter-spacing: .06em }
:root:not([data-theme="dark"]) .gap-tag { color: #5f8f00 }
body.dragging .day:not(.past), .day.pickable:not(.past) { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fg) 25%, transparent) }
.day.drop-on { box-shadow: inset 0 0 0 2px var(--lime), 0 0 24px -6px var(--lime) !important; transform: scale(1.04) }
.ev { cursor: grab }
.ev small { display: block; font-size: 10.5px; font-weight: 600; opacity: .7 }
.ev.is-drag, .li.is-drag { opacity: .4 }
.cal-grid.week { grid-template-columns: repeat(7, minmax(0, 1fr)) }
.cal-grid.week .day { min-height: 300px; align-items: stretch }
.cal-grid.week .dn { text-transform: capitalize; font-size: 13px; margin-bottom: 6px }
.cal-grid.week .ev { white-space: normal; padding: 8px 9px; font-size: 12.5px; line-height: 1.3; border-radius: 10px }
@media (max-width: 760px) { .cal-grid.week { grid-template-columns: 1fr } .cal-grid.week .day { min-height: 0; flex-direction: row; flex-wrap: wrap; gap: 8px } .cal-grid.week .evs { flex: 1 } }
@media (max-width: 640px) { .cal-grid.week .day .ev { width: auto; height: auto; font-size: 12.5px; padding: 6px 9px; border-radius: 8px; display: block } }
.li.drag { cursor: grab; padding: 12px 12px 12px 10px }
.li.drag .grip { color: var(--muted); font-size: 14px; letter-spacing: -2px; flex: none }
.li.drag:hover { transform: none; box-shadow: inset 0 0 0 1px var(--line) }
.li.picked { box-shadow: inset 0 0 0 2px var(--lime) }
.pill-dot { width: 10px; height: 10px; border-radius: 50%; flex: none }
.pick-banner { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--lime) 18%, var(--card)); font-size: 14px; font-weight: 600 }
.cal-grid.week .day.today .dn { width: auto; height: auto; padding: 3px 10px; margin: 0 0 6px; justify-self: start; align-self: flex-start }

/* ============================================================ connect your AI */
.ai-cards { display: grid; grid-template-columns: 1fr; gap: 14px }
@media (min-width: 640px) { .ai-cards { grid-template-columns: 1fr 1fr } }
.ai-card { display: flex; align-items: center; gap: 16px; padding: 22px; border-radius: 26px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s }
.ai-card.on { box-shadow: inset 0 0 0 1.5px var(--lime) }
.ai-card strong { font-size: 21px; font-weight: 600; letter-spacing: -.02em; flex: 1 }
.ai-logo { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; flex: none; font-weight: 800; font-size: 20px }
.ai-logo svg { width: 30px; height: 30px }
.ai-logo.sm { width: 40px; height: 40px; border-radius: 12px; font-size: 16px; margin-left: -10px; box-shadow: 0 0 0 3px var(--bg) }
.ai-logo.sm:first-child { margin-left: 0 }
.ai-connect { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 30%, transparent) }
.ai-card.on .ai-connect { color: var(--lime); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lime) 60%, transparent) }
:root:not([data-theme="dark"]) .ai-card.on .ai-connect { color: #5f8f00 }
.ai-other { display: flex; align-items: center; justify-content: center; gap: 18px; border: 0; background: transparent; color: var(--muted); font-size: 16px; padding: 14px; border-radius: 20px }
.ai-other:hover { color: var(--fg); background: var(--card) }
.ai-stack { display: flex }
.steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 15.5px; line-height: 1.5 }
.steps code { font-size: 13.5px; padding: 2px 7px; border-radius: 7px; background: var(--soft); word-break: break-all }
.key-form { display: flex; flex-direction: column; gap: 12px }
.key-form .provider { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) }
.connect-cta { align-items: flex-start }

.ai-name { display: flex; flex-direction: column; gap: 2px; flex: 1 }
.ai-name strong { flex: none }
.ai-pref { font-size: 12.5px; font-weight: 600; color: var(--muted) }
.pref-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap }
.connect-cta .ai-logo { width: 44px; height: 44px; border-radius: 13px }
.connect-cta .ai-logo svg { width: 24px; height: 24px }
.ai-logo svg { width: 32px; height: 32px }
.ai-logo.sm svg { width: 24px; height: 24px }
.ai-logo { box-shadow: inset 0 0 0 1px var(--line) }