/* Title & Logo Studio — scoped software-style workspace, matching the Studio width. */
.tl { --tl-border:#604773; --tl-muted:#c9b8d7; }
.tl .tl-hero { display:flex; justify-content:space-between; gap:30px; align-items:center; padding:26px 0 30px; }
.tl .tl-hero h1 { font-size:clamp(30px,3.3vw,46px); margin:10px 0 14px; }
.tl .tl-hero p { max-width:780px; margin:0; font-size:15px; }
.tl .tl-hero-tags { display:grid; gap:8px; min-width:205px; }
.tl .tl-hero-tags span { font-size:12px; padding:7px 12px; background:#30213e; border:1px solid #6c4f80; border-radius:20px; }
.tl .tl-workspace { border:1px solid #725389; border-radius:18px; overflow:hidden; background:#1c1428; }
.tl .tl-command { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:14px 18px; border-bottom:1px solid var(--tl-border); background:#30203e; }
.tl .tl-command strong { display:block; font-size:15px; }
.tl .tl-command small { color:var(--tl-muted); font-size:11px; display:block; max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tl .tl-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.tl button,.tl .tl-file { display:inline-flex; align-items:center; justify-content:center; gap:6px; background:#342341; border:1px solid #725887; color:#f4eafa; border-radius:8px; min-height:36px; padding:8px 12px; font-size:12px; line-height:1.3; cursor:pointer; }
.tl button:hover,.tl .tl-file:hover { background:#4c315f; }
.tl button.tl-primary { background:#8551ba; border-color:#ba91e6; font-weight:700; }
.tl .tl-file input { position:absolute; width:1px; height:1px; opacity:0; }
.tl .tl-file:focus-within { outline:3px solid #e3c8ff; }
.tl .tl-layout { display:grid; grid-template-columns:220px minmax(0,1fr) 285px; min-height:650px; }
.tl .tl-library,.tl .tl-inspector { padding:16px; background:#241a30; min-width:0; max-height:760px; overflow:auto; }
.tl .tl-library { border-right:1px solid var(--tl-border); }
.tl .tl-inspector { border-left:1px solid var(--tl-border); }
.tl .tl-library h2 { font-size:16px; margin:0 0 6px; }
.tl .tl-library p { font-size:12px; line-height:1.5; margin:0 0 14px; }
.tl .tl-label { display:grid; gap:6px; font-size:12px; margin:0 0 14px; color:#e7d8f2; }
.tl input:not([type=checkbox]):not([type=range]),.tl select,.tl textarea { width:100%; min-width:0; background:#140e1e; border:1px solid #694f7d; color:#f7f0fc; padding:9px 10px; border-radius:7px; font:13px/1.5 'Segoe UI',sans-serif; }
.tl textarea { min-height:90px; resize:vertical; }
.tl input[type=color] { height:38px; padding:3px!important; }
.tl input[type=range] { width:100%; accent-color:#b784e6; }
.tl .tl-presets { display:grid; gap:10px; }
.tl .tl-preset { display:block; text-align:left; padding:0; width:100%; overflow:hidden; min-height:100px; }
.tl .tl-preset img { width:100%; display:block; aspect-ratio:16/9; object-fit:cover; background:#161020; }
.tl .tl-preset span { display:block; padding:8px 10px; font-size:12px; }
.tl .tl-preset[aria-pressed=true] { border:2px solid #d0a8f3; }
.tl .tl-center { min-width:0; padding:18px; display:flex; flex-direction:column; gap:12px; background:radial-gradient(ellipse at top,#32203e,#171020 70%); }
.tl .tl-preview-bar { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; align-items:center; }
.tl .tl-preview-bar>span { font-size:11px; color:var(--tl-muted); }
.tl .tl-stage { display:flex; align-items:center; justify-content:center; min-height:280px; flex:1; max-height:550px; overflow:hidden; border:1px solid #594168; border-radius:12px; background:repeating-conic-gradient(#251d30 0% 25%,#32273d 0% 50%) 0 0/24px 24px; }
.tl .tl-stage svg { display:block; width:100%; height:100%; max-height:550px; object-fit:contain; }
.tl .tl-stage [data-layer] { cursor:move; touch-action:none; }
.tl .tl-timeline { display:grid; grid-template-columns:auto 1fr 40px; gap:12px; align-items:center; color:var(--tl-muted); font-size:12px; }
.tl .tl-preview-help { margin:0; font-size:11px; line-height:1.5; }
.tl .tl-statusbar { display:flex; gap:10px; align-items:center; padding:10px 12px; background:#30213d; border-radius:8px; }
.tl .tl-statusbar p { margin:0; font-size:12px; line-height:1.5; flex:1; }
.tl .tl-warning { padding:10px; background:#493626; border:1px solid #aa8550; border-radius:8px; font-size:12px; }
.tl .tl-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-bottom:18px; }
.tl .tl-tabs button { padding:8px 4px; font-size:11px; }
.tl .tl-tabs [aria-selected=true] { background:#8351b3; border-color:#c59be9; }
.tl .tl-section { margin:20px 0 10px; font-size:14px; }
.tl .tl-pair { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tl .tl-check { display:flex; gap:10px; align-items:center; font-size:12px; margin:12px 0; }
.tl .tl-check input { accent-color:#ba86e8; }
.tl .tl-export-buttons { display:grid; gap:10px; }
.tl .tl-help { font-size:12px; line-height:1.6; color:var(--tl-muted); margin:12px 0; }
.tl .tl-code { height:170px; font-family:Consolas,monospace; }
.tl .tl-guide { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:26px 0; }
.tl .tl-guide article { padding:22px; background:#241a30; border:1px solid #5d456e; border-radius:14px; }
.tl .tl-guide span { font-size:11px; color:#dbb1f3; letter-spacing:1px; }
.tl .tl-guide h2 { font-size:18px; margin:10px 0; }
.tl .tl-guide p { font-size:13px; margin:0; }
.tl .tl-workspace:fullscreen { width:100%; height:100dvh; border:0; border-radius:0; display:flex; flex-direction:column; }
.tl .tl-workspace:fullscreen .tl-layout { flex:1; min-height:0; }
.tl .tl-workspace:fullscreen .tl-library,.tl .tl-workspace:fullscreen .tl-inspector { max-height:none; }
.tl .tl-workspace:fullscreen .tl-stage,.tl .tl-workspace:fullscreen .tl-stage svg { max-height:none; min-height:0; }
@media(max-width:1100px) { .tl .tl-layout { grid-template-columns:170px minmax(0,1fr) 240px; }.tl .tl-library,.tl .tl-inspector{padding:12px}.tl .tl-center{padding:12px} }
@media(max-width:850px) {
 .tl .tl-hero { display:block; }.tl .tl-hero-tags{display:flex;flex-wrap:wrap;margin-top:16px}
 .tl .tl-layout { display:flex; flex-direction:column; }.tl .tl-center{order:0;min-height:350px}.tl .tl-inspector{order:1;border:0;max-height:none}.tl .tl-library{order:2;border:0;max-height:500px}
 .tl .tl-stage { min-height:220px; }.tl .tl-stage svg{height:auto}.tl .tl-tabs{grid-template-columns:repeat(5,1fr)}.tl .tl-presets{grid-template-columns:repeat(2,minmax(0,1fr))}
 .tl .tl-command{flex-wrap:wrap}.tl .tl-guide{grid-template-columns:1fr}.tl .tl-workspace:fullscreen{overflow:auto;display:block}.tl .tl-workspace:fullscreen .tl-stage{min-height:220px}
}

.tl .tl-file { position:relative; }
.tl .tl-file input[type=file] { position:absolute; width:1px; height:1px; padding:0; opacity:0; clip-path:inset(50%); pointer-events:none; }
.tl button,.tl .tl-file { scroll-margin-top:110px; }


/* 1.1 · sliders, effects gallery, 2-column style library, stage without empty checkerboard bands */
.tl .tl-slide { display:grid; grid-template-columns:minmax(0,1fr) 64px; gap:8px; align-items:center; }
.tl .tl-slide input[type=number] { padding:6px 6px; text-align:center; }
.tl .tl-pair .tl-slide { grid-template-columns:minmax(0,1fr); }.tl .tl-pair .tl-slide input[type=number] { display:none; }
.tl .tl-label { font-size:12.5px; }
.tl .tl-tabs { grid-template-columns:repeat(3,1fr); }
.tl .tl-effects { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:14px; }
.tl .tl-effect { display:block; padding:0; overflow:hidden; text-align:left; }
.tl .tl-effect img { display:block; width:100%; aspect-ratio:640/300; object-fit:cover; background:#161020; }
.tl .tl-effect span { display:block; padding:5px 8px; font-size:11.5px; }
.tl .tl-effect[aria-pressed=true] { border:2px solid #d0a8f3; box-shadow:0 0 0 2px #8551ba55; }
.tl .tl-layout { grid-template-columns:250px minmax(0,1fr) 300px; }
.tl .tl-presets { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.tl .tl-preset { min-height:0; }.tl .tl-preset span { padding:5px 7px; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tl .tl-stage { background:#120c1a; padding:12px; }
.tl .tl-stage.tl-checker { background:repeating-conic-gradient(#251d30 0% 25%,#32273d 0% 50%) 0 0/24px 24px; }
.tl .tl-stage svg { width:auto; height:auto; max-width:100%; max-height:526px; border-radius:6px; box-shadow:0 10px 40px #0008; }
.tl .tl-workspace:fullscreen .tl-stage svg { max-height:calc(100dvh - 230px); }
@media(max-width:1100px){ .tl .tl-layout { grid-template-columns:200px minmax(0,1fr) 260px; }.tl .tl-presets { grid-template-columns:1fr; } }
@media(max-width:850px){ .tl .tl-presets { grid-template-columns:repeat(2,minmax(0,1fr)); }.tl .tl-effects { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:480px){ .tl .tl-effects { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* 1.2 · palettes, auto colors, grouped effects */
.tl .tl-palettes { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin-bottom:6px; }
.tl .tl-palette { min-height:30px; padding:0; border-radius:8px; border:1px solid #ffffff30; }
.tl .tl-palette:hover { transform:translateY(-1px); border-color:#fff; }
.tl .tl-auto { display:grid; grid-template-columns:1fr 52px; gap:4px 8px; align-items:center; margin:0 0 14px; }
.tl .tl-auto-label { grid-column:1/-1; font-size:12.5px; color:#e7d8f2; }
.tl .tl-auto .tl-check { margin:0; font-size:11.5px; }
.tl .tl-auto input[type=color]:disabled { opacity:.35; }
.tl .tl-inspector .tl-section { margin:18px 0 8px; font-size:13px; color:#e3cdf5; text-transform:uppercase; letter-spacing:.06em; }

/* 1.1 layout pass: hero steps, a workspace that fits the screen, compact tabs, phone order */
.tl .tl-hero { display:block; padding:20px 0 24px; }
.tl .tl-hero p { max-width:880px; font-size:16px; line-height:1.6; }
.tl .tl-steps { list-style:none; counter-reset:s; display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:18px 0 12px; }
.tl .tl-steps li { counter-increment:s; display:grid; grid-template-columns:30px 1fr; column-gap:12px; align-items:center; padding:10px 16px 10px 10px; border:1px solid #6c4f80; border-radius:12px; background:#241a30; flex:1 1 220px; max-width:330px; }
.tl .tl-steps li::before { content:counter(s); grid-row:span 2; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,#8a56dd,#c06cf2); color:#fff; font-weight:800; }
.tl .tl-steps b { font-size:14.5px; align-self:end; }.tl .tl-steps span { font-size:12.5px; color:var(--tl-muted); align-self:start; }
.tl .tl-hero-tags { display:flex; flex-wrap:wrap; gap:8px; min-width:0; }
.tl .tl-hero-tags span { font-size:12.5px; }
.tl .tl-workspace { scroll-margin-top:96px; display:flex; flex-direction:column; height:calc(100vh - 104px); min-height:600px; max-height:1000px; }
.tl .tl-command { padding:10px 14px; }
.tl .tl-layout { flex:1; min-height:0; }
.tl .tl-library,.tl .tl-inspector { max-height:none; overflow:auto; scrollbar-width:thin; scrollbar-color:#6b4d80 transparent; }
.tl .tl-center { min-height:0; padding:14px; gap:10px; }
.tl .tl-stage { min-height:0; max-height:none; }
.tl .tl-stage svg { max-height:100%; }
.tl .tl-preview-help { display:none; }
.tl .tl-tabs { position:sticky; top:-16px; z-index:2; margin:-16px -16px 14px; padding:12px 12px 10px; background:#241a30; border-bottom:1px solid var(--tl-border); grid-template-columns:repeat(6,1fr); gap:3px; }
.tl .tl-tabs button { min-height:30px; padding:4px 2px; font-size:11.5px; }
.tl textarea { min-height:64px; }
.tl .tl-library h2 { margin-top:0; }
@media(max-width:1100px){ .tl .tl-tabs { grid-template-columns:repeat(3,1fr); } }
@media(max-width:850px){
 .tl .tl-workspace { height:auto; max-height:none; min-height:0; }
 .tl .tl-layout { display:flex; flex-direction:column; }
 .tl .tl-library { order:1; max-height:none; overflow:visible; border-top:1px solid var(--tl-border); }
 .tl .tl-library p,.tl .tl-library .tl-label:first-of-type { display:none; }
 .tl .tl-presets { display:flex; overflow-x:auto; gap:8px; padding-bottom:6px; scroll-snap-type:x mandatory; }
 .tl .tl-preset { flex:0 0 140px; scroll-snap-align:start; }
 .tl .tl-inspector { order:2; overflow:visible; }
 .tl .tl-tabs { top:0; grid-template-columns:repeat(3,1fr); }
 .tl .tl-stage svg { max-height:60vh; }
 .tl .tl-steps li { max-width:none; }
}