.kitty-shell { width: min(1380px, 100%); margin: 0 auto; display: grid; gap: 22px; padding: 14px 0 34px; }
.kitty-hero { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 34px 4px 10px; }
.kitty-kicker { margin-bottom: 8px; color: rgba(248,113,113,.75); font-size: .72rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.kitty-hero h1 { margin: 0; font-size: clamp(2.8rem,6vw,5.3rem); letter-spacing: -.065em; }
.kitty-hero h1 span { color: transparent; background: linear-gradient(90deg,#fb7185,#a78bfa); background-clip: text; -webkit-background-clip: text; }
.kitty-hero p:last-child { max-width: 620px; margin-top: 12px; font-size: 1.03rem; }
.kitty-status { padding: 9px 12px; border: 1px solid rgba(251,113,133,.24); border-radius: 999px; background: rgba(251,113,133,.08); color: #fecdd3; font-size: .72rem; font-weight: 850; text-transform: uppercase; }
.kitty-workspace { display: grid; grid-template-columns: 220px minmax(0,1fr) 260px; min-height: 610px; overflow: hidden; border: 1px solid var(--border); border-radius: 28px; background: rgba(5,11,25,.8); box-shadow: var(--shadow-dark); }
.ToolsBox,.AnimationTools { padding: 20px; background: rgba(9,17,32,.9); }
.ToolsBox { border-right: 1px solid var(--border); }
.AnimationTools { border-left: 1px solid var(--border); }
.panel-title { display: flex; justify-content: space-between; align-items: start; margin-bottom: 20px; }
.panel-title small,.screens-toolbar small { display: block; color: var(--muted); font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.panel-title h2 { margin-top: 4px; }
.panel-title>span { color: rgba(148,163,184,.35); font-size: 1.4rem; font-weight: 900; }
.tool-tile { width: 100%; display: flex; align-items: center; gap: 11px; margin-bottom: 9px; padding: 11px; text-align: left; }
.tool-tile>span { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 11px; background: rgba(251,113,133,.08); color: #fb7185; }
.tool-tile strong,.tool-tile small { display: block; }
.tool-tile small { margin-top: 2px; color: var(--muted); font-size: .68rem; }
.Screens { min-width: 0; display: flex; flex-direction: column; }
.screens-toolbar { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 18px; border-bottom: 1px solid var(--border); }
.screens-toolbar>span { color: var(--muted); font-family: var(--font-mono); font-size: .7rem; }
.Screen { position: relative; overflow: hidden; }
#Screen1 { flex: 1; min-height: 420px; display: grid; place-items: center; background: radial-gradient(circle at center,rgba(167,139,250,.12),transparent 35%),#050816; }
.signal-grid { position:absolute;inset:0;background-image:linear-gradient(rgba(148,163,184,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.06) 1px,transparent 1px);background-size:32px 32px; }
.signal-wave { position:absolute;inset:24% 0 auto;width:100%;height:48%;fill:none;stroke:#fb7185;stroke-width:3;filter:drop-shadow(0 0 10px rgba(251,113,133,.7));opacity:.8; }
.kitty-orb { position:relative;z-index:2;width:105px;height:105px;display:grid;place-items:center;border:1px solid rgba(251,113,133,.32);border-radius:34px;background:linear-gradient(145deg,rgba(251,113,133,.18),rgba(167,139,250,.13)),rgba(5,8,22,.86);box-shadow:0 24px 70px rgba(0,0,0,.5),0 0 55px rgba(251,113,133,.18);transform:rotate(-8deg); }
.kitty-orb span { color:#fda4af;font-size:3.2rem;transform:rotate(8deg); }
.screen-label { position:absolute;left:18px;bottom:16px;color:rgba(148,163,184,.6);font-family:var(--font-mono);font-size:.64rem;letter-spacing:.15em; }
#Screen2 { padding:13px 18px;border-top:1px solid var(--border);background:rgba(2,6,23,.4);font-size:.8rem; }
.AnimationTools label { display:block;margin-bottom:20px;color:var(--text);font-size:.78rem;font-weight:800; }
.AnimationTools label span { float:right;color:var(--muted); }
.AnimationTools input { margin:9px 0 0;padding:0;accent-color:#fb7185; }
.animation-note { display:flex;gap:10px;margin:25px 0;padding:13px;border:1px solid rgba(167,139,250,.16);border-radius:15px;background:rgba(167,139,250,.06); }
.animation-note span { flex:0 0 24px;height:24px;display:grid;place-items:center;border-radius:50%;background:rgba(167,139,250,.15);color:#c4b5fd;font-weight:900; }
.animation-note p { font-size:.72rem;line-height:1.55; }
.AnimationTools .btn { width:100%; }
@media(max-width:1000px){.kitty-workspace{grid-template-columns:180px 1fr}.AnimationTools{grid-column:1/-1;border-left:0;border-top:1px solid var(--border)}}
@media(max-width:680px){.kitty-hero{align-items:start;flex-direction:column}.kitty-workspace{grid-template-columns:1fr}.ToolsBox{border-right:0;border-bottom:1px solid var(--border)}#Screen1{min-height:350px}}