/* The product reveal borrows the real app's dark, compact workspace chrome. */
.platform-stage { background:#202020; }
.hop-platform { color:#c6c6c6; background:#202020; font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; }
.hop-navigation { width:13%; min-width:150px; background:#202020; border:0; }
.hop-nav-heading { height:35px; padding:0 10px; gap:7px; }
.hop-traffic { gap:6px; }
.hop-traffic i { width:12px; height:12px; }
.hop-nav-add { margin-left:auto; color:#999; font-size:22px; font-weight:300; }
.hop-nav-add svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.35; stroke-linecap:round; }
.hop-nav-heading>svg { margin-left:0; width:16px; flex:none; stroke:#999; }
.hop-favorites { display:flex; align-items:center; justify-content:space-between; height:29px; padding:0 12px 7px; gap:10px; color:#8d8d8d; }
.hop-favorites>svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.2; flex:none; }
.hop-favorites>span { display:grid; place-items:center; width:17px; height:17px; flex:none; }
.hop-favorites>span svg { width:17px; height:17px; display:block; }
.hop-favorite-code svg>rect { fill:#2868c7; }
.hop-favorite-code svg>path { fill:none; stroke:#fff; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.hop-favorite-agent { color:#cc795c; }
.hop-favorite-agent svg { fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; }
.hop-project-rail { width:34px; flex:0 0 34px; gap:11px; padding:2px 0; border-right:1px solid #292929; }
.hop-project-rail span { width:24px; height:24px; display:grid; place-items:center; }
.hop-project-rail svg { width:19px; height:19px; fill:currentColor; }
.hop-project-rail .is-current { border:0; width:28px; height:28px; background:#e9e0ff; border-radius:7px; }
.hop-project-rail .is-current img { width:20px; height:auto; }
.hop-project-rail .is-current { margin-bottom:8px; position:relative; }
.hop-project-rail .is-current:after { content:""; position:absolute; top:34px; left:3px; width:22px; height:1px; background:#3a3a3a; }
.hop-project-rail .hop-project-dots { color:#e77b36; }
.hop-project-rail .hop-project-petal { color:#299a78; }
.hop-project-rail .hop-project-spark { color:#e84342; }
.hop-project-rail .hop-add-space { border:1px dashed #505050; border-radius:6px; color:#777; }
.hop-project-rail .hop-add-space svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; }
.hop-tabs { padding:2px 6px 0 3px; }
.hop-tab { height:36px; padding:5px 6px; gap:5px; }
.hop-tab.is-active { background:#293a58; }
.hop-tab>span:last-child { min-width:0; }
.hop-tab-icon { display:block; width:14px; height:14px; color:#d88b68; flex:none; }
.hop-tab-icon svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; }
.hop-tab b { font-size:11px; font-weight:600; color:#d2d9e4; }
.hop-tab small { font-size:9px; color:#afbbcf; line-height:1.5; }
.hop-usage { display:grid; gap:15px; padding:14px 10px 12px; margin-top:auto; }
.hop-meter { display:flex; align-items:center; gap:9px; }
.hop-meter-icon { width:17px; height:18px; flex:none; color:#c8c8c8; text-align:center; }
.hop-meter-icon svg { width:17px; height:18px; display:block; }
.hop-meter-claude { color:#d47e60; }
.hop-meter-claude svg { fill:none; stroke:currentColor; stroke-width:1.35; stroke-linecap:round; }
.hop-meter-codex svg { fill:#f0f0f0; }
.hop-meter-codex .hop-codex-glyph { fill:none; stroke:#303030; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.hop-meter-cursor svg { fill:#c3c3c3; stroke:#303030; stroke-width:1.1; stroke-linejoin:round; }
.hop-meter>div { flex:1; min-width:0; }
.hop-meter div>span { display:flex; justify-content:space-between; gap:4px; font-size:10px; color:#b8b8b8; white-space:nowrap; }
.hop-meter b { font-size:10px; font-weight:600; color:#ccc; }
.hop-meter i { display:block; height:2px; background:#363636; margin-top:6px; position:relative; }
.hop-meter i:after { content:""; display:block; height:100%; width:var(--usage); background:#b9b9b9; }
.hop-meter:first-child i:after { background:#d47e60; }
.hop-main { background:#202020; padding:3px 0; gap:3px; }
.hop-terminal { background:#181818; border:1px solid #343434; border-radius:7px; }
.hop-terminal-content { padding:23px 16px; color:#d0d0d0; font-size:13px; line-height:1.45; scrollbar-width:thin; scrollbar-color:#444 transparent; }
.hop-terminal-title { gap:16px; color:#d6d6d6; }
.hop-terminal-title strong { font-size:14px; letter-spacing:.2px; }
.hop-terminal-title strong small { color:#777; }
.hop-terminal-title div>span { color:#a0a0a0; font-size:12px; }
.hop-mascot { width:47px; height:31px; background:#d58061; margin:6px 3px 8px; }
.hop-mascot:before { left:-7px; top:13px; width:61px; height:9px; border:0; background:#d58061; }
.hop-mascot:after { left:7px; bottom:-8px; width:4px; height:8px; background:#d58061; box-shadow:28px 0 #d58061; }
.hop-mascot i { top:8px; width:4px; height:8px; background:#181818; z-index:1; }
.hop-mascot i:first-child { left:8px; }
.hop-mascot i:nth-child(2) { right:8px; }
.hop-terminal-note { border-color:#ce795c; padding-left:12px; margin-top:27px; }
.hop-note-label { color:#b0b0b0; font-size:12px; }
.hop-terminal-note p { margin:3px 0; line-height:1.5; }
.hop-terminal-note small { font-size:11px; color:#9b9b9b; }
.hop-terminal-output { margin-top:30px; font-size:12px; }
.hop-terminal-output span { color:#8aab86; }
.hop-terminal-output .muted { color:#a0a0a0; }
.hop-terminal-bottom { border:0; margin:0 7px; font-size:12px; }
.hop-prompt { border-top:1px solid #6b6b6b; border-bottom:1px solid #6b6b6b; padding:9px 2px; color:#aaa; min-height:42px; align-items:center; gap:7px; }
.hop-prompt b { color:#ddd; font-size:16px; }
.hop-cursor { display:inline-block; width:6px; height:12px; border:1px solid #888; vertical-align:-2px; margin-left:4px; }
.hop-terminal-mode { padding:18px 7px 15px; color:#999; font-size:11px; gap:5px; }
.hop-terminal-mode b { color:#b58b38; font-weight:400; }
.hop-preview { border-radius:7px; box-shadow:0 0 0 1px #686868; }
.hop-tools { background:#202020; flex-basis:34px; width:34px; gap:5px; padding:7px 0 8px; }
.hop-tool { color:#b9b9b9; width:26px; height:26px; }
.hop-tool svg { width:18px; height:18px; }
.hop-tool-selected { background:#27364b; color:#83adea; }
.hop-tool-divider { display:block; width:20px; height:1px; margin:2px 0; background:#393939; flex:none; }
.hop-tools .hop-tool { margin-top:0; }
.hop-tool .hop-record-dot { fill:currentColor; stroke:none; }
.hop-tool-agent { margin-top:auto!important; color:#d58061; }
.hop-tool-agent svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; }
.hop-tool-layout { color:#9e9e9e; }
@media(max-width:1000px) {
  .hop-navigation { min-width:140px; }
  .hop-terminal-content { padding:18px 13px; font-size:12px; }
  .hop-terminal-title { flex-direction:column; align-items:flex-start; gap:10px; }
  .hop-terminal-title strong { font-size:13px; }
  .hop-terminal-title strong small { display:inline; }
  .hop-terminal-title div>span { font-size:11px; }
  .hop-terminal-note { padding-left:9px; margin-top:20px; }
  .hop-terminal-note br { display:none; }
  .hop-terminal-output { font-size:11px; }
  .hop-terminal-mode { font-size:10px; }
}
@media(max-width:600px) {
  .hop-navigation { min-width:38px; width:38px; }
  .hop-nav-heading { height:28px; padding:0 4px; gap:3px; flex-wrap:nowrap; }
  .hop-traffic { gap:3px; }
  .hop-traffic i { width:7px; height:7px; }
  .hop-nav-add,.hop-nav-heading>svg,.hop-favorites,.hop-tabs { display:none; }
  .hop-nav-body { flex-direction:column; }
  .hop-project-rail { flex-basis:auto; width:100%; gap:12px; padding-top:8px; }
  .hop-usage { padding:10px 6px; gap:13px; }
  .hop-meter { gap:0; flex-direction:column; }
  .hop-meter>div { width:100%; }
  .hop-meter div>span { display:none; }
  .hop-meter-icon { font-size:17px; }
  .hop-main { flex-direction:column; gap:3px; }
  .hop-terminal { flex:0 0 32%; min-height:160px; }
  .hop-preview { flex:1 1 0%; width:100%; }
  .hop-terminal-content { padding:10px 12px; font-size:9px; }
  .hop-terminal-title { flex-direction:row; align-items:center; gap:12px; }
  .hop-terminal-title strong { font-size:10px; }
  .hop-terminal-title div>span { font-size:9px; }
  .hop-mascot { transform:scale(.7); transform-origin:left center; margin-right:-10px; }
  .hop-terminal-note { margin-top:9px; padding-left:8px; }
  .hop-terminal-note p { margin:2px 0; }
  .hop-terminal-note small,.hop-terminal-output { display:none; }
  .hop-note-label { font-size:8px; }
  .hop-terminal-bottom { font-size:8px; margin:0 5px; }
  .hop-prompt { padding:5px 2px; min-height:24px; }
  .hop-terminal-mode { padding:6px 2px; font-size:7px; }
  .hop-tools { flex-basis:26px; width:26px; }
  .hop-tool { width:22px; height:24px; }
  .hop-tool svg { width:13px; height:13px; }
  .hop-tool-divider { width:16px; }
}

/* The three agent marks are traced once and shared by both rails. */
.hop-favorite-agent svg,.hop-meter-icon svg,.hop-tool-agent svg { fill:initial; stroke:none; }
.hop-favorite-code svg>path { fill:#b9cbe1; stroke:none; }
.hop-project-rail { border-right:0; }
.hop-project-rail .is-current { margin-bottom:0; }
.hop-project-rail .is-current:after { display:none; }
.hop-tabs { position:relative; }
.hop-tabs:before { content:""; position:absolute; left:9px; right:9px; top:0; height:1px; background:#393939; }
.hop-tools .hop-tool:nth-child(3) { color:#666; }
/* Match the reference's 1290 × 948 logical-pixel app, scaled as one system. */
.hop-platform { container-type:inline-size; }
@media(min-width:601px) {
  .hop-navigation { width:12.8%; min-width:0; flex:0 0 12.8%; }
  .hop-nav-heading { height:2.63566cqw; padding:0 0.77519cqw; gap:0.62016cqw; }
  .hop-traffic { gap:0.46512cqw; }
  .hop-traffic i { width:1.08527cqw; height:1.08527cqw; }
  .hop-nav-add svg { width:1.31783cqw; height:1.31783cqw; }
  .hop-nav-heading>svg { display:block; width:1.31783cqw; }
  .hop-favorites { height:2.32558cqw; padding:0 0.77519cqw; gap:0; }
  .hop-favorites>svg { width:1.24031cqw; height:1.24031cqw; }
  .hop-favorites>span,.hop-favorites>span svg { width:1.24031cqw; height:1.24031cqw; }
  .hop-favorite-design svg { width:0.77519cqw; height:0.93023cqw; }
  .hop-project-rail { width:3.10078cqw; flex:0 0 3.10078cqw; gap:0.15504cqw; padding:0; }
  .hop-project-rail span { width:2.17054cqw; height:2.17054cqw; }
  .hop-project-rail .is-current { width:2.17054cqw; height:2.17054cqw; border-radius:0.54264cqw; }
  .hop-project-rail .is-current img { width:1.55039cqw; }
  .hop-project-rail svg { width:1.24031cqw; height:1.24031cqw; }
  .hop-project-rail .hop-add-space { width:1.55039cqw; height:1.55039cqw; margin-top:0.31008cqw; border-radius:0.38760cqw; }
  .hop-project-rail .hop-add-space svg { width:1.00775cqw; height:1.00775cqw; }
  .hop-tabs { padding:1.00775cqw 0.46512cqw 0 0.15504cqw; }
  .hop-tabs:before { left:0.62016cqw; right:0.93023cqw; top:0.38760cqw; }
  .hop-tab { height:2.79070cqw; padding:0.46512cqw; gap:0.38760cqw; border-radius:0.46512cqw; }
  .hop-tab-icon,.hop-tab-icon svg { width:0.93023cqw; height:0.93023cqw; }
  .hop-tab b { font-size:0.85271cqw; }
  .hop-tab small { font-size:0.77519cqw; line-height:1.3; }
  .hop-usage { gap:1.31783cqw; padding:0.77519cqw 0.93023cqw 0.77519cqw; }
  .hop-meter { gap:0.93023cqw; height:1.62791cqw; }
  .hop-meter-icon,.hop-meter-icon svg { width:1.24031cqw; height:1.24031cqw; }
  .hop-meter div>span,.hop-meter b { font-size:0.77519cqw; line-height:1.2; }
  .hop-meter i { height:0.15504cqw; margin-top:0.54264cqw; }
  .hop-main { padding:0.23256cqw 0; gap:0.23256cqw; }
  .hop-terminal,.hop-preview { border-radius:0.54264cqw; }
  .hop-tools { width:3.10078cqw; flex:0 0 3.10078cqw; gap:0; padding:0.38760cqw 0 0.38760cqw; }
  .hop-tool { width:2.17054cqw; height:2.32558cqw; flex:0 0 2.32558cqw; border-radius:0.54264cqw; }
  .hop-tool svg { width:1.24031cqw; height:1.24031cqw; }
  .hop-tool-selected { height:2.17054cqw; flex-basis:2.17054cqw; }
  .hop-tool-divider { width:1.24031cqw; height:1px; margin:0.69767cqw 0 0.54264cqw; }
  .hop-tool-agent svg { width:1.00775cqw; height:1.00775cqw; }
}