/* NexusHub TikTok Studio (8 Oct 2026): phone-first video editor. Same family as Cinematic Studio / Product Photo Maker:
   black space background, Outfit headings, one gradient accent (TikTok cyan to pink), white pills, few boxes.
   Everything is scoped to .tt-main so the shared site header stays white. */
html { background: #000; color-scheme: dark; }
html::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(0,0,0,.8), rgba(0,0,0,.93)), url("/assets/space-bg.webp?v=20260923") center / cover no-repeat, #000; filter: grayscale(1); }
body.tt-page { margin: 0; background: transparent !important; color: #f5f5f7; font-family: Inter, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
body.tt-locked { overflow: hidden; overscroll-behavior: none; }
.tt-main { --cy: #25f4ee; --pk: #fe2c55; --mut: #a1a1a6; --dim: #6e6e73; --line: rgba(255,255,255,.1); --glass: rgba(18,18,20,.82);
  --ease: cubic-bezier(.22,1,.36,1); --display: Outfit, Inter, system-ui, sans-serif; --grad: linear-gradient(100deg, var(--cy), #fff 48%, var(--pk)); }
.tt-main *, .tt-main *::before, .tt-main *::after { box-sizing: border-box; }
.tt-main [hidden] { display: none !important; }
.tt-main svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tt-main svg.fill { fill: currentColor; stroke: none; }
.tt-main h1, .tt-main h2 { margin: 0; font-family: var(--display); letter-spacing: -.03em; color: #f5f5f7; }
.tt-main em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tt-main :where(button, input, textarea) { font: inherit; color: inherit; }
.tt-main :where(button) { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tt-main :is(a, button, input, textarea, label):focus-visible { outline: 2px solid var(--cy); outline-offset: 2px; }
.tt-main a { color: var(--cy); }
.tt-muted { margin: 6px 0 0; color: var(--mut); font-size: 13px; line-height: 1.45; }

/* ---------- 1. Start ---------- */
.tt-start { width: min(720px, calc(100% - 32px)); margin: 0 auto; padding: 64px 0 80px; text-align: center; }
.tt-kick { margin: 0 0 12px; font-size: 14px; font-weight: 700; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tt-start h1 { font-size: clamp(40px, 11vw, 76px); font-weight: 900; line-height: 1; letter-spacing: -.05em; }
.tt-lead { max-width: 520px; margin: 18px auto 0; color: var(--mut); font-size: clamp(16px, 4.2vw, 19px); line-height: 1.5; font-weight: 500; }
.tt-start-btns { display: grid; gap: 12px; max-width: 360px; margin: 34px auto 0; }
.tt-big { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 0 28px; border: 0; border-radius: 999px;
  font: 700 17px/1 Inter, sans-serif; cursor: pointer; transition: transform .25s var(--ease); }
.tt-big:active { transform: scale(.97); }
.tt-big svg { width: 20px; height: 20px; stroke-width: 2.4; }
.tt-big-rec { background: #fff; color: #000; box-shadow: -4px 0 0 var(--cy), 4px 0 0 var(--pk); }
.tt-big-up { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.tt-recdot { width: 14px; height: 14px; border-radius: 50%; background: var(--pk); box-shadow: 0 0 0 4px rgba(254,44,85,.22); animation: ttPulse 1.6s infinite; }
@keyframes ttPulse { 50% { box-shadow: 0 0 0 8px rgba(254,44,85,0); } }
.tt-feats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 30px 0 0; padding: 0; list-style: none; color: #d4d4d8; font-size: 14px; font-weight: 600; }
.tt-small { max-width: 420px; margin: 28px auto 0; color: var(--dim); font-size: 12.5px; line-height: 1.5; }

/* ---------- shared full-screen app shells ---------- */
.tt-cam, .tt-edit { position: fixed; inset: 0; z-index: 2147483400; background: #000; height: 100dvh; overflow: hidden; touch-action: manipulation; }
.tt-round { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.35); color: #fff; }
.tt-round svg { width: 22px; height: 22px; stroke-width: 2.4; }

/* TikTok layout placeholders: sized from the frame with container units, so they match any screen. */
.tt-cam-frame, .tt-phone { container-type: size; }
.tt-ui { position: absolute; inset: 0; z-index: 3; pointer-events: none; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45); font-family: Inter, sans-serif; transition: opacity .25s; }
.tt-ui.off { opacity: 0; }
.tt-ui svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.tt-ui-top { position: absolute; top: 4.2cqh; left: 0; right: 0; display: flex; justify-content: center; gap: 4.5cqw; font-size: 4.1cqw; font-weight: 600; color: rgba(255,255,255,.7); }
.tt-ui-top b { color: #fff; font-weight: 800; position: relative; }
.tt-ui-top b::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: -1.1cqw; height: .55cqw; border-radius: 1cqw; background: #fff; }
.tt-ui-top svg { position: absolute; right: 4cqw; top: -.3cqw; width: 6cqw; height: 6cqw; stroke-width: 2.6; }
.tt-ui-rail { position: absolute; right: 2.4cqw; bottom: 17cqh; display: grid; justify-items: center; gap: 3.6cqw; font-size: 2.9cqw; font-weight: 700; }
.tt-ui-rail > div { display: grid; justify-items: center; gap: .6cqw; }
.tt-ui-rail svg { width: 8.6cqw; height: 8.6cqw; }
.tt-ui-av { position: relative; margin-bottom: 2cqw; }
.tt-ui-av img { width: 11cqw; height: 11cqw; border-radius: 50%; border: .5cqw solid #fff; object-fit: cover; background: #222; }
.tt-ui-av i { position: absolute; left: 50%; bottom: -2.2cqw; transform: translateX(-50%); width: 5cqw; height: 5cqw; border-radius: 50%; background: var(--pk); display: grid; place-items: center; font: 800 4cqw/1 Inter; font-style: normal; }
.tt-ui-disc { width: 10cqw; height: 10cqw; border-radius: 50%; background: radial-gradient(circle, #333 30%, #111 31%); display: grid; place-items: center; animation: ttSpin 5s linear infinite; }
.tt-ui-disc img { width: 5.5cqw; height: 5.5cqw; border-radius: 50%; }
@keyframes ttSpin { to { transform: rotate(360deg); } }
.tt-ui-info { position: absolute; left: 3.4cqw; right: 22cqw; bottom: 10.5cqh; font-size: 3.6cqw; line-height: 1.35; }
.tt-ui-info b { font-size: 4cqw; font-weight: 800; }
.tt-ui-info p { margin: 1cqw 0 1.6cqw; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tt-ui-snd { font-weight: 600; white-space: nowrap; }
.tt-ui-snd i { font-style: normal; }
.tt-ui-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 8cqh; display: flex; align-items: center; justify-content: space-around; background: #000; font-size: 2.8cqw; font-weight: 600; color: rgba(255,255,255,.85); text-shadow: none; }
.tt-ui-plus i { display: block; width: 11cqw; height: 7cqw; border-radius: 2cqw; background: #fff; box-shadow: -.9cqw 0 0 var(--cy), .9cqw 0 0 var(--pk); }

/* ---------- 2. Camera ---------- */
.tt-cam-frame { position: absolute; inset: 0; margin: auto; height: 100%; max-width: 100%; aspect-ratio: 9 / 16; overflow: hidden; background: #000; }
@media (min-width: 700px) { .tt-cam-frame { border-radius: 22px; height: calc(100% - 24px); box-shadow: 0 0 0 1px rgba(255,255,255,.1); } }
#tt-cam-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#tt-cam-video.mirror { transform: scaleX(-1); }
.tt-cam-tint { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; }
.tt-cam-soft { position: absolute; inset: 0; pointer-events: none; opacity: 0; -webkit-backdrop-filter: blur(5px) brightness(1.06); backdrop-filter: blur(5px) brightness(1.06); transition: opacity .3s; }
.tt-cam-soft.on { opacity: .55; }
.tt-cam .tt-ui-nav, .tt-cam .tt-ui-top { display: none; }
.tt-count { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; font: 900 30cqw/1 var(--display); color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,.6); }
.tt-cam-top { position: absolute; z-index: 7; top: max(10px, env(safe-area-inset-top)); left: 0; right: 0; width: min(100%, calc(100dvh * 9 / 16)); margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 0 12px; }
.tt-segs { position: relative; flex: 1; height: 5px; border-radius: 5px; background: rgba(255,255,255,.3); overflow: hidden; }
.tt-segs i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--pk); }
.tt-segs b { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; }
.tt-cam-time { min-width: 38px; font: 700 14px/1 Inter; text-align: right; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.tt-cam-side { position: absolute; z-index: 7; top: calc(max(10px, env(safe-area-inset-top)) + 50px); left: max(10px, calc(50% - 100dvh * 9 / 32 + 10px)); display: grid; gap: 14px; }
.tt-cam-side button { display: grid; justify-items: center; gap: 3px; padding: 0; border: 0; background: none; color: #fff; font-size: 11px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.tt-cam-side svg { width: 28px; height: 28px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.tt-cam-side button[aria-pressed=true] { color: var(--cy); }
.tt-cam-side button:disabled { opacity: .35; }
.tt-cam-filterstrip { position: absolute; z-index: 8; left: 0; right: 0; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 170px); display: flex; gap: 10px; overflow-x: auto; padding: 4px 16px; scrollbar-width: none; justify-content: safe center; }
.tt-cam-filterstrip::-webkit-scrollbar { display: none; }
.tt-cam-filterstrip button { flex: none; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(0,0,0,.5); color: #fff; font-size: 13px; font-weight: 700; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tt-cam-filterstrip button[aria-pressed=true] { background: #fff; color: #000; }
.tt-cam-bottom { position: absolute; z-index: 7; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 14px; }
.tt-durs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tt-durs button { min-height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: rgba(255,255,255,.75); font-size: 13px; font-weight: 700; }
.tt-durs button[aria-checked=true] { background: #fff; color: #000; }
.tt-durs.busy { visibility: hidden; }
.tt-cam-row { display: grid; grid-template-columns: 64px 84px 64px; align-items: center; justify-items: center; gap: 34px; }
.tt-cam-up { display: grid; justify-items: center; gap: 3px; color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.tt-cam-up svg { width: 34px; height: 34px; padding: 4px; border-radius: 9px; background: rgba(255,255,255,.18); }
.tt-shutter { position: relative; width: 84px; height: 84px; padding: 0; border: 5px solid rgba(255,255,255,.85); border-radius: 50%; background: none; }
.tt-shutter i { position: absolute; inset: 5px; border-radius: 50%; background: var(--pk); transition: inset .25s var(--ease), border-radius .25s var(--ease); }
.tt-shutter.rec i { inset: 22px; border-radius: 8px; }
.tt-cam-done { width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: var(--pk); color: #fff; display: grid; place-items: center; transition: opacity .2s, transform .2s var(--ease); }
.tt-cam-done svg { width: 24px; height: 24px; stroke-width: 3; }
.tt-cam-done:disabled { opacity: 0; transform: scale(.6); pointer-events: none; }
.tt-cam-hint { margin: 0; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.75); text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.tt-cam-msg { position: absolute; z-index: 9; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 30px; text-align: center; background: rgba(0,0,0,.88); font-size: 16px; line-height: 1.5; }
.tt-cam-msg b { font: 800 24px/1.2 var(--display); }

/* ---------- 3. Editor ---------- */
.tt-edit { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; padding-bottom: env(safe-area-inset-bottom); }
.tt-etop { display: flex; align-items: center; gap: 10px; padding: max(8px, env(safe-area-inset-top)) 12px 8px; }
.tt-etitle { flex: 1; font: 800 17px/1 var(--display); letter-spacing: -.02em; }
.tt-next { display: inline-flex; align-items: center; gap: 4px; min-height: 38px; padding: 0 14px 0 18px; border: 0; border-radius: 999px; background: var(--pk); color: #fff; font-weight: 800; font-size: 15px; }
.tt-next svg { width: 18px; height: 18px; stroke-width: 3; }
.tt-stagewrap { min-height: 0; display: grid; place-items: center; padding: 0 12px; }
.tt-phone { position: relative; height: 100%; max-width: 100%; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #111; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
#tt-view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tt-touch { position: absolute; inset: 0; z-index: 4; touch-action: none; }
.tt-playbig { position: absolute; z-index: 5; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.4); color: #fff; display: grid; place-items: center; pointer-events: none; transition: opacity .2s, transform .2s var(--ease); }
.tt-playbig svg { width: 30px; height: 30px; fill: #fff; stroke: none; margin-left: 4px; }
.tt-playbig.gone { opacity: 0; transform: scale(1.3); }
.tt-loading { position: absolute; z-index: 6; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; background: rgba(0,0,0,.75); font-size: 15px; text-align: center; padding: 20px; }
.tt-spin { width: 40px; height: 40px; border-radius: 50%; border: 3px solid rgba(255,255,255,.15); border-top-color: var(--pk); border-right-color: var(--cy); animation: ttSpin 1s linear infinite; }
.tt-src { position: fixed; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }

.tt-timeline { display: flex; align-items: center; gap: 10px; padding: 10px 14px 6px; }
.tt-play { flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; }
.tt-play svg { width: 16px; height: 16px; fill: #000; stroke: none; }
.tt-play .i-pause, .tt-play.on .i-play { display: none; }
.tt-play.on .i-pause { display: block; }
.tt-track { position: relative; flex: 1; height: 38px; border-radius: 8px; background: rgba(255,255,255,.08); touch-action: none; cursor: pointer; }
.tt-kept { position: absolute; top: 0; bottom: 0; border-radius: 8px; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 2px rgba(255,255,255,.85); }
.tt-marks { position: absolute; inset: 0; pointer-events: none; }
.tt-marks i { position: absolute; height: 6px; border-radius: 3px; }
.tt-marks i.vo { bottom: 5px; background: var(--pk); }
.tt-marks i.tx { top: 5px; background: var(--cy); }
.tt-handle { position: absolute; top: -3px; bottom: -3px; width: 14px; margin-left: -7px; border-radius: 6px; background: #fff; touch-action: none; cursor: ew-resize; }
.tt-handle::after { content: ""; position: absolute; left: 5px; right: 5px; top: 14px; bottom: 14px; border-radius: 2px; background: #000; opacity: .5; }
.tt-head { position: absolute; top: -6px; bottom: -6px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--pk); pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
.tt-time { flex: none; min-width: 74px; text-align: right; font: 600 12.5px/1 Inter; color: var(--mut); font-variant-numeric: tabular-nums; }

.tt-sheet { max-height: 36dvh; overflow-y: auto; overscroll-behavior: contain; padding: 6px 16px 10px; border-top: 1px solid var(--line); transition: max-height .3s var(--ease); }
.tt-sheet.shut { max-height: 0; padding-top: 0; padding-bottom: 0; }
.tt-tabs { display: flex; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--line); background: #000; }
.tt-tabs::-webkit-scrollbar { display: none; }
.tt-tabs button { flex: 1 0 auto; min-width: 62px; display: grid; justify-items: center; gap: 4px; padding: 9px 6px 8px; border: 0; background: none; color: var(--dim); font-size: 11px; font-weight: 700; }
.tt-tabs svg { width: 22px; height: 22px; }
.tt-tabs button[aria-selected=true] { color: #fff; }
.tt-tabs button[aria-selected=true] svg { color: var(--cy); }

/* sheet controls */
.tt-row-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 14px 0 8px; font-size: 14px; }
.tt-row-h small { color: var(--mut); font-size: 12px; text-align: right; }
.tt-voice-say { position: relative; margin-top: 8px; }
.tt-voice-say textarea, .tt-textin input, .tt-field input { width: 100%; border: 0; border-radius: 14px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px var(--line); padding: 12px 14px; font-size: 16px; resize: none; outline: none; }
.tt-voice-say textarea { padding-bottom: 26px; }
.tt-voice-say textarea:focus, .tt-textin input:focus, .tt-field input:focus { box-shadow: inset 0 0 0 1.5px var(--cy); }
.tt-count-c { position: absolute; right: 12px; bottom: 8px; font-size: 11px; color: var(--dim); }
.tt-ideas, .tt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tt-ideas { margin-top: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.tt-ideas::-webkit-scrollbar { display: none; }
.tt-ideas button, .tt-chips button { flex: none; min-height: 34px; padding: 0 13px; border: 0; border-radius: 999px; background: rgba(255,255,255,.08); color: #e5e5ea; font-size: 13px; font-weight: 600; }
.tt-chips button[aria-checked=true] { background: #fff; color: #000; }
.tt-chips button.danger { color: #ff6b81; }
.tt-voices { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.tt-vgroup { grid-column: 1 / -1; margin: 6px 0 0; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.tt-voice { position: relative; display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 7px 8px 7px 12px; border: 0; border-radius: 12px; background: rgba(255,255,255,.05); text-align: left; }
.tt-voice[aria-checked=true] { background: rgba(37,244,238,.12); box-shadow: inset 0 0 0 1.5px var(--cy); }
.tt-voice.locked { opacity: .55; }
.tt-voice span { flex: 1; min-width: 0; }
.tt-voice b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-voice small { display: block; color: var(--mut); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-voice .tt-vplay { flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; font-size: 11px; }
.tt-voice .tt-vplay.on { background: var(--pk); }
.tt-add { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 48px; margin-top: 14px; padding: 0 18px; border: 0; border-radius: 999px; background: #fff; color: #000; font-weight: 800; font-size: 15px; }
.tt-add:disabled { opacity: .45; }
.tt-ghost { min-height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font-weight: 700; font-size: 14px; }
.tt-status { min-height: 18px; margin: 8px 0 0; font-size: 13px; color: var(--mut); text-align: center; }
.tt-status.bad { color: #ff8095; }
.tt-status.good { color: var(--cy); }
.tt-list { display: grid; margin-top: 4px; }
.tt-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; }
.tt-item span { flex: 1; min-width: 0; }
.tt-item b { display: block; font-size: 13px; }
.tt-item small { display: block; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-item button { flex: none; min-height: 32px; padding: 0 11px; border: 0; border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font-size: 12px; font-weight: 700; }
.tt-item button.danger { color: #ff6b81; }
.tt-switch { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 14px; font-weight: 600; cursor: pointer; }
.tt-switch input { position: absolute; opacity: 0; pointer-events: none; }
.tt-switch span { flex: none; position: relative; width: 44px; height: 26px; border-radius: 26px; background: rgba(255,255,255,.18); transition: background .2s; }
.tt-switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); }
.tt-switch input:checked + span { background: var(--pk); }
.tt-switch input:checked + span::after { transform: translateX(18px); }
.tt-switch input:focus-visible + span { outline: 2px solid var(--cy); outline-offset: 2px; }
.tt-slide { display: grid; grid-template-columns: 112px 1fr 34px; align-items: center; gap: 10px; margin-top: 12px; font-size: 13.5px; font-weight: 600; }
.tt-slide b { text-align: right; font-size: 12.5px; color: var(--mut); font-variant-numeric: tabular-nums; }
.tt-main input[type=range] { width: 100%; height: 28px; margin: 0; background: none; accent-color: var(--pk); }
.tt-field { display: grid; gap: 6px; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--mut); }
.tt-filters { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0 4px; scrollbar-width: none; }
.tt-filters::-webkit-scrollbar { display: none; }
.tt-filter { flex: none; display: grid; justify-items: center; gap: 5px; width: 64px; padding: 0; border: 0; background: none; font-size: 11.5px; font-weight: 700; color: var(--mut); }
.tt-filter canvas { width: 64px; height: 86px; border-radius: 10px; background: #222; object-fit: cover; }
.tt-filter[aria-checked=true] { color: #fff; }
.tt-filter[aria-checked=true] canvas { box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--cy); }
.tt-glowbtns { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.tt-glowbtns .tt-add { margin: 0; flex: 1; }
.tt-fxgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; padding-top: 8px; }
.tt-fx { display: grid; justify-items: center; gap: 4px; padding: 12px 6px; border: 0; border-radius: 14px; background: rgba(255,255,255,.05); font-size: 12.5px; font-weight: 700; }
.tt-fx i { font-style: normal; font-size: 24px; line-height: 1; }
.tt-fx[aria-checked=true] { background: rgba(254,44,85,.16); box-shadow: inset 0 0 0 1.5px var(--pk); }
.tt-textin { display: flex; gap: 8px; margin-top: 8px; }
.tt-textin .tt-add { width: auto; margin: 0; min-height: 0; }
.tt-textin + .tt-chips { margin-top: 10px; }
.tt-dots { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.tt-dots button { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.tt-dots button[aria-checked=true] { box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff; }
.tt-tsel { margin-top: 6px; }

/* desktop: rail of tools on the left, panel on the right, like Image Studio */
@media (min-width: 900px) {
  .tt-edit { grid-template-columns: 84px minmax(0, 1fr) 380px; grid-template-rows: auto minmax(0, 1fr) auto; }
  .tt-etop { grid-column: 1 / -1; padding: 12px 18px; border-bottom: 1px solid var(--line); }
  .tt-tabs { grid-column: 1; grid-row: 2 / 4; flex-direction: column; overflow: auto; border-top: 0; border-right: 1px solid var(--line); padding: 8px 0; }
  .tt-tabs button { flex: none; padding: 12px 4px; }
  .tt-stagewrap { grid-column: 2; grid-row: 2; padding: 18px; }
  .tt-timeline { grid-column: 2; grid-row: 3; padding: 4px 24px 18px; }
  .tt-sheet { grid-column: 3; grid-row: 2 / 4; max-height: none; border-top: 0; border-left: 1px solid var(--line); padding: 8px 20px 24px; }
  .tt-sheet.shut { max-height: none; padding: 8px 20px 24px; }
  .tt-phone { border-radius: 22px; }
}

/* ---------- 4. Export ---------- */
.tt-done { position: fixed; inset: 0; z-index: 2147483450; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow-y: auto; }
.tt-making, .tt-ready { display: grid; justify-items: center; gap: 12px; width: min(400px, 100%); text-align: center; }
.tt-render { width: min(180px, 40vw); aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #111; box-shadow: 0 0 0 1px var(--line); }
.tt-render canvas { width: 100%; height: 100%; display: block; }
.tt-ring { position: relative; width: 70px; height: 70px; margin-top: 6px; }
.tt-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tt-ring circle { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 3; }
.tt-ring #tt-ring { stroke: var(--pk); stroke-dasharray: 0 100; transition: stroke-dasharray .2s; }
.tt-ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 16px/1 Inter; }
.tt-making h2, .tt-ready h2 { font-size: 24px; font-weight: 800; }
#tt-out { width: min(240px, 60vw); aspect-ratio: 9 / 16; border-radius: 16px; background: #111; object-fit: cover; }
.tt-share, .tt-pill { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 54px; border: 0; border-radius: 999px; font-weight: 800; font-size: 16px; }
.tt-share { background: #fff; color: #000; box-shadow: -3px 0 0 var(--cy), 3px 0 0 var(--pk); }
.tt-pill { background: rgba(255,255,255,.09); color: #fff; }
.tt-share svg, .tt-pill svg { width: 20px; height: 20px; stroke-width: 2.4; }
.tt-done-row { display: flex; gap: 8px; }

@media (prefers-reduced-motion: reduce) { .tt-ui-disc, .tt-recdot { animation: none; } }
.tt-cam .tt-ui:not(.off) { opacity: .8; }