.hop-platform{--preview-width:0%;--preview-content-width:780px;--toolbar-progress:0;display:flex;width:100%;height:100%;overflow:hidden;color:#313131;background:#ededed;font-family:"DM Sans",ui-sans-serif,system-ui,sans-serif;border:1px solid #bdbdbd;border-radius:14px;box-shadow:0 14px 42px #1a1a1a22;font-size:12px;line-height:1.25}
.hop-platform *{box-sizing:border-box}.hop-platform svg{display:block}.hop-navigation{width:15%;min-width:154px;background:#e8e8e8;border-right:1px solid #d8d8d8;display:flex;flex-direction:column;overflow:hidden}.hop-nav-heading{height:43px;padding:0 13px;display:flex;align-items:center;gap:10px}.hop-nav-heading strong{font-size:13px}.hop-nav-heading>svg{margin-left:auto;width:17px;stroke:#777;fill:none;stroke-width:1.5}.hop-traffic{display:flex;gap:7px}.hop-traffic i{width:15px;height:15px;border-radius:50%;background:#ff5b5d}.hop-traffic i:nth-child(2){background:#ffbd28}.hop-traffic i:nth-child(3){background:#28c740}.hop-workspace{height:36px;display:flex;align-items:center;gap:11px;padding:0 11px;font-size:13px}.hop-app-mark{width:31px;height:31px;border:2px solid #373737;border-radius:9px;display:grid;place-items:center;color:#e954a9;background:#fafafa;box-shadow:inset 0 0 0 2px #f1b6d4}.hop-app-mark b{font-size:13px}.hop-nav-body{display:flex;min-height:0;flex:1}.hop-project-rail{width:42px;display:flex;flex-direction:column;align-items:center;gap:14px;padding:9px 0;color:#888;font-size:17px}.hop-project-rail span{line-height:20px}.hop-project-rail span:nth-child(2){color:#ec782e}.hop-project-rail span:nth-child(3){color:#22a66f}.hop-project-rail .is-current{border-radius:7px;color:#e64b9d;border:2px solid #5d5d5d;width:29px;height:30px;display:grid;place-items:center}.hop-project-rail i{height:1px;width:23px;background:#d5d5d5;margin:1px 0}.hop-tabs{min-width:0;flex:1;padding:1px 7px 0 0}.hop-tab{height:48px;border-radius:6px;padding:6px 7px;display:flex;align-items:flex-start;gap:5px;position:relative}.hop-tab.is-active{background:#d5d5d5}.hop-tab-icon{color:#777}.hop-tab b,.hop-tab small,.hop-new b,.hop-new small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hop-tab b{font-size:11px}.hop-tab small,.hop-new small{font-size:9px;color:#777}.hop-tab em{width:6px;height:6px;border-radius:50%;background:#28a35b;margin-left:auto}.hop-new{padding:10px 8px}.hop-new b{font-size:11px}.hop-plan{padding:13px 13px 15px;border-top:1px solid #ddd;display:flex;align-items:center;gap:9px;color:#777;white-space:nowrap}.hop-plan span{font-size:22px;color:#ec775a}.hop-plan small{font-size:10px}
.hop-main{min-width:0;flex:1;display:flex;background:#f7f7f7}.hop-terminal{min-width:0;flex:1 1 0%;background:#fbfbfb;display:flex;flex-direction:column;overflow:hidden}.hop-terminal-content{padding:25px 20px;color:#5f5f5f;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;min-width:344px}.hop-terminal-title{display:flex;gap:17px;align-items:center;color:#333}.hop-terminal-title strong{font-size:14px;letter-spacing:-.2px}.hop-terminal-title strong small{font-weight:400;color:#777}.hop-terminal-title div>span{display:block;color:#777;line-height:1.42}.hop-mascot{width:72px;height:40px;background:#df7655;display:block;position:relative}.hop-mascot:before{content:"";position:absolute;left:-10px;top:10px;border:10px solid transparent;border-right-color:#df7655}.hop-mascot:after{content:"";position:absolute;left:10px;bottom:-10px;width:4px;height:10px;background:#df7655;box-shadow:43px 0 #df7655}.hop-mascot i{position:absolute;width:5px;height:9px;background:#262626;top:10px}.hop-mascot i:first-child{left:14px}.hop-mascot i:nth-child(2){right:12px}.hop-terminal-note{border-left:2px solid #9c9c9c;padding-left:15px;line-height:1.4;margin:25px 0 0}.hop-terminal-output{margin-top:34px;line-height:1.5}.hop-terminal-output p{margin:0 0 12px}.hop-terminal-output span{color:#4e9d6a}.hop-terminal-output .muted{color:#9a9a9a}.hop-terminal-bottom{margin-top:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;border-top:1px solid #aaa}.hop-update{height:44px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #aaa;color:#4e965b}.hop-prompt{height:42px;display:flex;align-items:center;padding:0 12px;gap:10px;border-bottom:1px solid #aaa;color:#aaa}.hop-prompt b{color:#333;font-size:18px}.hop-terminal-mode{padding:11px 19px;color:#777;display:flex;gap:8px}.hop-terminal-mode b{color:#b58231}
.hop-preview{flex:0 0 var(--preview-width);min-width:0;overflow:hidden;border-left:1px solid #aaa;background:#20271e}.hop-preview-inner{width:var(--preview-content-width);height:100%;display:flex;flex-direction:column}.hop-site-canvas{flex:1;background:#20271e;color:#f5f6ed;padding:41px 43px 28px;overflow:hidden}.hop-site-canvas header{display:none}.hop-preview-body{position:relative}.hop-arch{position:absolute;right:0;top:13px;width:106px;height:59px;fill:#ffcf08}.hop-site-canvas h2{margin:0;font-size:37px;line-height:1.02;letter-spacing:-2.3px}.hop-site-canvas h2 em{color:#bec7b3;font-style:normal}.hop-preview-intro{width:535px;max-width:100%;margin:37px 0 61px;color:#aeb8a7;font-size:13px;line-height:1.65}.hop-preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:31px}.hop-preview-grid article{position:relative;padding-top:46px;color:#aeb8a7}.hop-grid-rule{position:absolute;top:0;left:0;right:0;height:1px;background:#4c5548}.hop-preview-grid i{position:absolute;top:26px;right:3px;font-size:26px;font-style:normal}.hop-yellow{color:#ffd000}.hop-green{color:#4fd287}.hop-pink{color:#ed9baa}.hop-preview-grid small{font-size:8px;letter-spacing:1.25px}.hop-preview-grid h3{color:#f5f5ed;font-size:19px;line-height:1.04;letter-spacing:-.9px;margin:39px 0 25px}.hop-preview-grid p{font-size:11px;line-height:1.7;margin:0}.hop-site-canvas footer{border-top:1px solid #4c5548;margin-top:62px;padding-top:25px;color:#909b8b;font-size:9px;letter-spacing:.8px;display:flex;justify-content:space-between}.hop-site-canvas footer span:last-child{letter-spacing:0;text-align:right}.hop-preview-footer{height:83px;background:#fff;color:#898989;display:flex;align-items:center;gap:22px;padding:0 37px;font-size:10px;white-space:nowrap}.hop-preview-footer b{font-size:34px;letter-spacing:-4px;color:#8655e8}.hop-preview-footer span:last-child{margin-left:auto;font-size:8px}
.hop-tools{width:39px;flex:0 0 39px;background:#eee;border-left:1px solid #d1d1d1;padding-top:11px;display:flex;flex-direction:column;align-items:center;gap:8px}.hop-tool{width:28px;height:28px;display:grid;place-items:center;border-radius:5px;color:#666;opacity:calc(.25 + var(--toolbar-progress) * .75);transform:scale(calc(.82 + var(--toolbar-progress) * .18))}.hop-tool svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.hop-tool-selected{color:#4d7df7;background:#dce5ff}.hop-tool:nth-child(5){margin-top:10px}.hop-tool:nth-child(6){margin-top:12px}
@media(max-width:700px){.hop-platform{font-size:10px;border-radius:9px}.hop-navigation{min-width:98px;width:19%}.hop-nav-heading{height:33px;padding:0 8px;gap:6px}.hop-traffic{gap:4px}.hop-traffic i{width:9px;height:9px}.hop-nav-heading strong{font-size:10px}.hop-nav-heading>svg{width:13px}.hop-workspace{padding:0 7px;height:30px;font-size:10px;gap:6px}.hop-app-mark{width:24px;height:24px}.hop-nav-body{overflow:hidden}.hop-project-rail{width:27px;gap:8px;font-size:11px;padding-top:7px}.hop-project-rail .is-current{width:22px;height:22px}.hop-tabs{padding-right:3px}.hop-tab{height:42px;padding:5px;font-size:8px}.hop-tab b,.hop-new b{font-size:8px}.hop-tab small,.hop-new small{font-size:7px}.hop-new{padding:7px 5px}.hop-plan{padding:8px 7px;gap:4px}.hop-plan span{font-size:14px}.hop-plan small{font-size:7px}.hop-terminal-content{padding:16px 11px;min-width:230px;font-size:9px}.hop-terminal-title{gap:9px}.hop-mascot{width:47px;height:27px}.hop-mascot:after{left:7px;bottom:-7px;height:7px;box-shadow:29px 0 #df7655}.hop-mascot:before{left:-7px;top:7px;border-width:7px}.hop-mascot i{top:7px;width:3px;height:6px}.hop-mascot i:first-child{left:9px}.hop-mascot i:nth-child(2){right:8px}.hop-terminal-title strong{font-size:10px}.hop-terminal-note{margin-top:16px;padding-left:8px}.hop-terminal-output{margin-top:20px}.hop-terminal-bottom{font-size:8px}.hop-update{height:30px}.hop-prompt{height:31px;padding:0 7px}.hop-terminal-mode{padding:7px 9px}.hop-site-canvas{padding:23px 24px 14px}.hop-site-canvas h2{font-size:27px}.hop-arch{width:70px;height:39px;top:8px}.hop-preview-intro{font-size:9px;margin:23px 0 37px;width:390px}.hop-preview-grid{gap:17px}.hop-preview-grid article{padding-top:31px}.hop-preview-grid i{top:15px;font-size:18px}.hop-preview-grid small{font-size:6px}.hop-preview-grid h3{font-size:14px;margin:25px 0 15px}.hop-preview-grid p{font-size:8px}.hop-site-canvas footer{margin-top:33px;padding-top:15px;font-size:6px}.hop-preview-footer{height:53px;padding:0 20px;gap:10px;font-size:7px}.hop-preview-footer b{font-size:23px}.hop-tools{width:27px;flex-basis:27px;gap:4px;padding-top:6px}.hop-tool{width:21px;height:21px}.hop-tool svg{width:13px;height:13px}.hop-tool:nth-child(5){margin-top:5px}.hop-tool:nth-child(6){margin-top:6px}}

/* The panels keep their own edges as the same terminal gives room to the preview. */
.hop-main { padding: 5px 0; gap: 5px; }
.hop-terminal { border-radius: 6px; border: 1px solid #e0e0e0; }
.hop-preview { border: 0; border-radius: 6px; box-shadow: inset 0 0 0 1px #8e9388; }
.hop-tools { border: 0; }
.hop-preview-footer img { width: 45px; height: auto; flex-shrink: 0; }
.hop-site-canvas footer { gap: 22px; }
.hop-site-canvas footer span:first-child { white-space: nowrap; }
@media (max-width: 800px) {
  .hop-navigation { min-width: 0; width: 16%; }
  .hop-nav-heading { padding: 0 6px; gap: 5px; }
  .hop-nav-heading > svg { display: none; }
  .hop-project-rail { flex: 0 0 22px; }
  .hop-tab { padding: 5px 3px; }
  .hop-tab-icon, .hop-tab em { display: none; }
  .hop-plan { padding: 8px 5px; }
  .hop-plan small { font-size: 6px; overflow: hidden; text-overflow: ellipsis; }
  .hop-terminal-content { min-width: 0; padding: 18px 10px; font-size: 9px; }
  .hop-terminal-title { align-items: flex-start; flex-direction: column; gap: 15px; }
  .hop-terminal-title strong { font-size: 11px; }
  .hop-terminal-title strong small { display: none; }
  .hop-terminal-bottom { font-size: 9px; }
  .hop-terminal-note { padding-left: 6px; }
  .hop-preview-inner { container-type: inline-size; }
  .hop-site-canvas { padding: 22px 16px 15px; }
  .hop-site-canvas h2 { font-size: clamp(20px, 7cqw, 30px); letter-spacing: -1px; padding-top: 48px; }
  .hop-arch { width: 50px; height: 29px; top: 0; }
  .hop-preview-intro { margin: 20px 0 25px; font-size: 9px; line-height: 1.55; }
  .hop-preview-grid { grid-template-columns: 1fr; gap: 20px; }
  .hop-preview-grid article { padding-top: 16px; }
  .hop-preview-grid i { top: 12px; }
  .hop-preview-grid small { font-size: 6px; }
  .hop-preview-grid h3 { margin: 14px 0 8px; font-size: 15px; line-height: 1.1; }
  .hop-preview-grid h3 br { display: none; }
  .hop-preview-grid p { font-size: 8px; line-height: 1.5; }
  .hop-site-canvas footer { margin-top: 22px; padding-top: 14px; font-size: 6px; display: block; }
  .hop-site-canvas footer span:last-child { display: block; margin-top: 7px; text-align: left; }
  .hop-preview-footer { padding: 0 12px; height: 46px; gap: 9px; font-size: 6px; }
  .hop-preview-footer img { width: 29px; }
  .hop-preview-footer span:last-child { display: none; }
}
@media (max-width: 480px) {
  .hop-nav-heading { flex-wrap: wrap; height: 44px; align-content: center; row-gap: 5px; }
  .hop-nav-heading strong { font-size: 8px; }
  .hop-traffic i { width: 7px; height: 7px; }
  .hop-workspace { padding: 0 5px; justify-content: center; }
  .hop-workspace > strong { display: none; }
  .hop-nav-body { flex-direction: column; }
  .hop-project-rail { width: 100%; gap: 13px; }
  .hop-tabs { padding: 12px 3px; }
  .hop-tab { height: 35px; }
  .hop-tab b, .hop-new b { font-size: 7px; }
  .hop-tab small, .hop-new small { display: none; }
  .hop-plan { justify-content: center; }
  .hop-plan small { display: none; }
  .hop-tools { flex-basis: 23px; width: 23px; }
  .hop-tool { width: 20px; height: 23px; }
  .hop-main { gap: 3px; }
  .hop-terminal-content { padding: 16px 7px; font-size: 9px; }
  .hop-terminal-title strong { font-size: 9px; }
  .hop-mascot { width: 39px; }
  .hop-terminal-bottom { font-size: 9px; }
  .hop-terminal-mode { padding: 9px 5px; }
  .hop-update { justify-content: flex-start; padding-left: 5px; }
  .hop-prompt { padding: 0 5px; gap: 4px; }
  .hop-site-canvas { padding: 17px 12px 12px; }
  .hop-site-canvas h2 { font-size: 20px; padding-top: 40px; }
  .hop-preview-intro { font-size: 8px; margin: 17px 0 20px; }
  .hop-preview-grid { gap: 15px; }
  .hop-preview-grid h3 { font-size: 13px; margin-top: 13px; }
  .hop-preview-grid p { font-size: 7px; }
  .hop-site-canvas footer { margin-top: 15px; }
  .hop-preview-footer > span { white-space: normal; }
}

/* The terminal is one shrinking surface: its content wraps rather than escaping it. */
.hop-terminal-content { min-width:0; min-height:0; flex:1 1 auto; overflow-y:auto; overflow-x:hidden; white-space:normal; overflow-wrap:anywhere; word-break:break-word; line-height:1.45; }
.hop-terminal-title { min-width:0; }
.hop-terminal-title > div { min-width:0; overflow-wrap:anywhere; }
.hop-mascot { flex:none; }
.hop-terminal-note, .hop-terminal-output p { overflow-wrap:anywhere; }
.hop-terminal-bottom { min-width:0; flex:0 0 auto; white-space:normal; line-height:1.35; overflow-wrap:anywhere; }
.hop-update { min-height:44px; height:auto; padding:7px 12px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0 4px; text-align:center; }
.hop-prompt { min-height:42px; height:auto; padding:7px 12px; align-items:flex-start; }
.hop-prompt b { flex:none; line-height:1; }
.hop-prompt span, .hop-terminal-mode span { min-width:0; overflow-wrap:anywhere; }
.hop-terminal-mode { align-items:flex-start; flex-wrap:wrap; gap:3px 8px; }
@media (max-width:800px) { .hop-update, .hop-prompt { min-height:34px; height:auto; padding:6px 8px; justify-content:flex-start; text-align:left; } .hop-terminal-mode { padding:7px 8px; } }