:root {
  --bg-primary: #000000;
  --bg-secondary: #0b1118;
  --bg-card: #152231;
  --text-primary: #f5fbff;
  --text-secondary: #b7c8d8;
  --accent-primary: #58d5ff;
  --danger: #ff8190;
  --success: #76e7ac;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 600px; height: 600px; margin: 0; overflow: hidden; background: var(--bg-primary); }
body { color: var(--text-primary); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
button { font: inherit; cursor: pointer; }
#app { position: relative; width: 600px; height: 600px; padding: 8px; }
.screen { width: 584px; height: 584px; display: flex; flex-direction: column; }
.hidden { display: none !important; }
.header { height: 64px; padding: 12px 16px; background: var(--bg-secondary); border-radius: 16px; display: flex; align-items: center; gap: 12px; flex: none; }
.header h1 { margin: 0; font-size: 28px; letter-spacing: -.03em; flex: 1; }
.status { font-size: 14px; font-weight: 700; color: var(--text-secondary); }
.status.ready { color: var(--success); }
.status.error { color: var(--danger); }
.home-content { min-height: 0; flex: 1; padding: 12px 0; display: flex; flex-direction: column; gap: 12px; }
.hero-panel { background: var(--bg-card); border-radius: 18px; padding: 22px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.eyebrow { color: var(--accent-primary); font-size: 14px; font-weight: 800; letter-spacing: .16em; }
.hero-panel h2 { margin: 16px 0; font-size: 37px; line-height: 1.08; }
.hero-panel p { color: var(--text-secondary); font-size: 16px; line-height: 1.35; margin: 0; }
.message { padding: 12px 16px; border-radius: 12px; background: #34202a; color: #ffe4e9; font-size: 15px; }
.home-actions { display: flex; flex-direction: column; gap: 8px; }
.action-button { width: 100%; height: 88px; border: 2px solid transparent; border-radius: 16px; background: var(--bg-secondary); color: var(--text-primary); font-size: 19px; font-weight: 750; transition: transform 475ms cubic-bezier(.6,0,.4,1), background 300ms; }
.action-button.primary { background: #173e55; }
.focusable:focus-visible, .focusable:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 20px rgba(0, 212, 255, .4); transform: scale(.94); }
.focusable:active { transform: scale(.91); }
.camera-content { flex: 1; padding: 8px 0; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.video-shell { height: 188px; flex: none; border-radius: 16px; overflow: hidden; background: var(--bg-secondary); border: 1px solid #244055; position: relative; }
.feed { display: block; width: 100%; height: 100%; object-fit: contain; }
.feed-message { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; color: var(--text-secondary); font-size: 17px; }
.camera-feedback { height: 24px; font-size: 14px; color: var(--text-secondary); text-align: center; flex: none; }
.direction-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 88px); gap: 8px; justify-items: stretch; align-content: end; }
.control { border: 2px solid transparent; border-radius: 18px; background: var(--bg-card); color: var(--text-primary); font-size: 34px; font-weight: 750; transition: transform 475ms cubic-bezier(.6,0,.4,1), background 300ms; }
.control span { display: block; font-size: 14px; margin-top: -4px; }
.control.up { grid-column: 2; grid-row: 1; }
.control.left { grid-column: 1; grid-row: 2; }
.control.stop { grid-column: 2; grid-row: 2; color: var(--danger); }
.control.right { grid-column: 3; grid-row: 2; }
.control.down { grid-column: 2; grid-row: 3; }