/* Option 6 hero console: Option 3's console on Option 4/5 tokens, in the hero's right half
   over the background image. Theme-aware through the shared semantic variables. */
.home-hero > .wrap { display: grid; align-items: center; }

.console { border: var(--border-hairline) solid var(--border); border-radius: var(--radius-lg); background: var(--canvas); box-shadow: var(--shadow-overlay); overflow: hidden; }
.console-bar { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); background: var(--surface); border-bottom: var(--border-hairline) solid var(--border); }
.console-mark { width: var(--space-xl); height: var(--space-xl); object-fit: contain; }
.ctitle { margin-left: var(--space-sm); font-size: var(--type-body-sm-font-size); font-weight: var(--font-weight-semibold); color: var(--text-2); }
.console-body { padding: var(--space-xl); }
.cstate { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: var(--type-body-sm-font-size); font-weight: var(--font-weight-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.cprompt { display: flex; align-items: center; gap: var(--space-xs); min-height: var(--space-3xl); margin-top: var(--space-md); padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-lg); border: var(--border-hairline) solid var(--border); border-radius: var(--radius-md); background: var(--canvas); color: var(--text); text-decoration: none; }
.console .ctext { flex: 1; min-width: 0; width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--text); font-family: inherit; font-size: var(--type-body-font-size); line-height: inherit; caret-color: var(--blue); }
/* Neutral, not CTA blue: the hero already has its one primary action. */
.csend { border: 0; font-family: inherit; cursor: pointer; margin-left: auto; flex: 0 0 auto; display: grid; place-items: center; width: var(--space-2xl); height: var(--space-2xl); border-radius: var(--radius-sm); background: var(--text); color: var(--canvas); font-size: var(--type-body-sm-font-size); }
.cchips { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); margin: var(--space-lg) 0 0; padding: 0; list-style: none; }
.cchips button { font-family: inherit; line-height: inherit; text-align: left; cursor: pointer; max-width: 100%; display: inline-block; padding: var(--space-sm) var(--space-md); border: var(--border-hairline) solid var(--border); border-radius: var(--radius-full); background: var(--surface); color: var(--text-2); font-size: var(--type-body-sm-font-size); text-decoration: none; transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.cchips button:hover { color: var(--text); border-color: var(--text-2); }
.cchips button[aria-pressed="true"] { color: var(--ink-blue); background: color-mix(in srgb, var(--blue) 10%, transparent); border-color: color-mix(in srgb, var(--blue) 40%, transparent); }



@media (max-width: 520px) { .console-body { padding: var(--space-lg); } }

.console-response { margin-top: var(--space-lg); font-size: var(--type-body-sm-font-size); color: var(--text-2); }
.console-response .text-link { display: inline-block; margin-top: var(--space-sm); }

.cfield { position: relative; flex: 1; min-width: 0; }
.cidle-cursor { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none; overflow: hidden; font-family: inherit; font-size: var(--type-body-font-size); line-height: inherit; }
.cmirror { visibility: hidden; white-space: pre; overflow: hidden; }
.ccaret { flex: 0 0 2px; height: 1.2em; background: var(--blue); animation: console-caret 1.1s step-end infinite; }
.cfield:focus-within .cidle-cursor { visibility: hidden; }
@keyframes console-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ccaret { animation: none; } }