:root {
      --navy: #071a2f;
      --navy-2: #0c2746;
      --blue: #1769d2;
      --blue-2: #0f5fc6;
      --cyan: #20a4c9;
      --teal: #159b88;
      --purple: #6b5dd3;
      --orange: #f08a24;
      --red: #c93d4a;
      --ink: #132238;
      --muted: #64748b;
      --line: #dce4ee;
      --soft: #f5f8fc;
      --white: #ffffff;
      --shadow: 0 18px 50px rgba(15, 35, 65, .10);
      --shadow-sm: 0 10px 26px rgba(15, 35, 65, .08);
      --radius: 18px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: linear-gradient(180deg, #f7faff 0%, #eef4fb 100%);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      min-height: 100vh;
    }
    button, input, textarea, select { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    a { color: inherit; text-decoration: none; }
    .hidden { display: none !important; }

    .topbar {
      height: 74px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 44px;
      color: white;
      background: rgba(7, 26, 47, .97);
      border-bottom: 1px solid rgba(255,255,255,.08);
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(12px);
    }
    .brand { display: flex; align-items: center; gap: 14px; cursor: pointer; }
    .brand-mark {
      width: 42px; height: 42px; border-radius: 50%;
      background: radial-gradient(circle at 36% 33%, #fff 0 4%, transparent 5%),
                  radial-gradient(circle at 62% 60%, rgba(255,255,255,.9) 0 2%, transparent 3%),
                  linear-gradient(145deg, #1d76e8, #0c3f91);
      position: relative;
      box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
      display: grid; place-items: center;
      font-weight: 800; font-size: 12px; letter-spacing: .5px;
    }
    .brand-mark::after {
      content: ""; position: absolute; width: 48px; height: 14px;
      border: 2px solid rgba(255,255,255,.72); border-left-color: transparent; border-right-color: transparent;
      border-radius: 50%; transform: rotate(-24deg);
    }
    .brand-title { font-size: 18px; font-weight: 750; letter-spacing: -.2px; }
    .brand-sub { font-size: 11px; color: #a8bdd4; margin-top: 1px; }
    .nav { display: flex; align-items: center; gap: 8px; }
    .nav a {
      color: #c8d7e7; padding: 10px 13px; border-radius: 10px;
      font-size: 14px; font-weight: 650; transition: .2s;
    }
    .nav a:hover, .nav a.active { background: rgba(255,255,255,.10); color: white; }
    .nav .manage-link { border: 1px solid rgba(255,255,255,.20); margin-left: 6px; }

    .page { min-height: calc(100vh - 74px); }
    .container { width: min(1220px, calc(100% - 56px)); margin: 0 auto; }

    .hero {
      position: relative;
      overflow: hidden;
      padding: 92px 0 78px;
      background:
        radial-gradient(circle at 84% 22%, rgba(32,164,201,.25), transparent 30%),
        radial-gradient(circle at 14% 88%, rgba(107,93,211,.18), transparent 30%),
        linear-gradient(145deg, #071a2f 0%, #0b2a4b 63%, #103d66 100%);
      color: white;
    }
    .hero::before {
      content: ""; position: absolute; inset: 0;
      background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
      background-size: 34px 34px; opacity: .18;
      mask-image: linear-gradient(90deg, #000, transparent 75%);
    }
    .hero-grid { display: grid; grid-template-columns: 1.18fr .82fr; align-items: center; gap: 68px; position: relative; }
    .hero-grid > * { min-width: 0; }
    .eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 7px 11px; border-radius: 999px; background: rgba(255,255,255,.09); color: #cbe8ff; border: 1px solid rgba(255,255,255,.14); font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .11em; }
    .eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: #42d6b9; box-shadow: 0 0 0 5px rgba(66,214,185,.12); }
    h1 { font-size: clamp(42px, 5vw, 68px); line-height: 1.02; letter-spacing: -2.6px; margin: 22px 0 20px; max-width: 780px; }
    .hero-copy { color: #c3d4e7; font-size: 19px; line-height: 1.72; max-width: 740px; }
    .hero-actions { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
    .btn {
      border: 0; border-radius: 11px; padding: 12px 18px; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center; gap: 9px;
      font-size: 14px; font-weight: 750; transition: transform .18s, box-shadow .18s, background .18s;
    }
    .btn:hover { transform: translateY(-1px); }
    .btn:disabled { cursor: wait; opacity: .72; transform: none; }
    .btn-primary { background: var(--blue); color: white; box-shadow: 0 10px 26px rgba(23,105,210,.28); }
    .btn-primary:hover { background: var(--blue-2); }
    .btn-secondary { background: white; color: var(--navy); }
    .btn-outline { background: transparent; color: var(--blue); border: 1px solid #9fc0eb; }
    .btn-soft { background: #edf4ff; color: #135fb9; }
    .btn-danger { background: var(--red); color: white; }
    .btn-dark { background: var(--navy); color: white; }
    .btn-teal { background: #137f75; color: white; }
    .btn-sm { padding: 9px 13px; border-radius: 9px; font-size: 13px; }
    .btn-lg { padding: 14px 22px; font-size: 15px; }
    .icon { width: 17px; height: 17px; display: inline-block; }

    .hero-card {
      background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 22px;
      padding: 25px; box-shadow: 0 22px 70px rgba(0,0,0,.24); backdrop-filter: blur(10px);
    }
    .hero-card-title { font-weight: 800; margin-bottom: 18px; }
    .flow-step { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: center; margin: 13px 0; }
    .flow-num { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.13); }
    .flow-title { font-size: 14px; font-weight: 750; }
    .flow-desc { font-size: 12px; color: #aec3d8; margin-top: 2px; }
    .flow-line { height: 16px; border-left: 1px dashed rgba(255,255,255,.28); margin-left: 19px; }
    .runtime-pill { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 12px; background: rgba(10, 20, 35, .32); color: #cce0f3; font-size: 12px; }

    .section { padding: 72px 0; }
    .section-sm { padding: 44px 0; }
    .section-title-row { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 28px; }
    .section-kicker { color: var(--blue); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
    h2 { margin: 7px 0 0; font-size: 34px; letter-spacing: -1px; }
    .section-sub { color: var(--muted); margin-top: 10px; line-height: 1.65; max-width: 760px; }

    .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: -36px; position: relative; z-index: 3; }
    .stat-card { background: white; padding: 22px; border-radius: 15px; box-shadow: var(--shadow-sm); border: 1px solid #e6edf5; }
    .stat-value { font-size: 28px; font-weight: 850; letter-spacing: -1px; }
    .stat-value-wide { font-size: 21px; letter-spacing: 0; white-space: nowrap; }
    .stat-label { color: var(--muted); margin-top: 5px; font-size: 13px; }

    .cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
    .experiment-card {
      background: white; border: 1px solid #dfe7f1; border-radius: var(--radius); overflow: hidden;
      box-shadow: 0 8px 22px rgba(15,35,65,.05); transition: transform .2s, box-shadow .2s;
      display: flex; flex-direction: column; min-height: 355px;
    }
    .experiment-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
    .card-banner { height: 112px; padding: 20px; color: white; position: relative; overflow: hidden; }
    .card-banner::after { content:""; position:absolute; width:150px; height:150px; right:-45px; top:-56px; border-radius:50%; background:rgba(255,255,255,.12); }
    .tone-1 { background: linear-gradient(135deg, #1c6bd2, #194995); }
    .tone-2 { background: linear-gradient(135deg, #7558cf, #4d3ba6); }
    .tone-3 { background: linear-gradient(135deg, #148e80, #0e655f); }
    .tone-4 { background: linear-gradient(135deg, #dc7a1f, #a84a12); }
    .tone-5 { background: linear-gradient(135deg, #0d7894, #075064); }
    .tone-6 { background: linear-gradient(135deg, #b44b6b, #7e2f49); }
    .tone-7 { background: linear-gradient(135deg, #5274ba, #273e78); }
    .tone-8 { background: linear-gradient(135deg, #677783, #354651); }
    .banner-icon { font-size: 28px; }
    .banner-label { position: absolute; bottom: 17px; left: 20px; font-size: 12px; font-weight: 750; color: rgba(255,255,255,.86); letter-spacing: .08em; text-transform: uppercase; }
    .card-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
    .card-title { font-size: 21px; font-weight: 820; letter-spacing: -.4px; margin: 0 0 9px; }
    .card-desc { color: var(--muted); line-height: 1.6; font-size: 14px; min-height: 67px; }
    .tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 20px; }
    .tag { background: #eef4fb; color: #345574; border: 1px solid #dbe6f2; border-radius: 999px; padding: 5px 9px; font-size: 11px; font-weight: 700; }
    .card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 17px; border-top: 1px solid #edf1f5; }
    .status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: #426178; font-weight: 650; }
    .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #2ab891; box-shadow: 0 0 0 4px rgba(42,184,145,.12); }
    .status-dot.draft { background: #dba12f; box-shadow: 0 0 0 4px rgba(219,161,47,.12); }
    .status-dot.off { background: #9aa7b4; box-shadow: 0 0 0 4px rgba(154,167,180,.12); }

    .page-head { padding: 52px 0 28px; background: white; border-bottom: 1px solid var(--line); }
    .page-head-inner { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
    .page-head-inner > div:first-child { min-width: 0; max-width: 100%; }
    .page-head h1 { color: var(--ink); font-size: 44px; letter-spacing: -1.6px; margin: 0 0 10px; }
    .page-head p { color: var(--muted); max-width: 760px; margin: 0; line-height: 1.65; }
    .crumb { color: #70849a; font-size: 12px; font-weight: 650; margin-bottom: 13px; }
    .head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

    .builder-page { background: #f4f7fb; }
    .builder-page .page-head { padding: 36px 0 25px; }
    .builder-page .page-head h1 { font-size: 38px; }
    .builder-section { padding: 34px 0 72px; }
    .builder-container { max-width: 1080px; }
    .builder-message > div:last-child { min-width: 0; }
    .builder-mark, .builder-avatar { display: grid; place-items: center; flex: 0 0 auto; color: white; background: linear-gradient(145deg, #1769d2, #159b88); font-weight: 850; }
    .builder-mark { width: 46px; height: 46px; border-radius: 8px; font-size: 13px; box-shadow: 0 8px 18px rgba(23,105,210,.16); }
    .builder-avatar { width: 38px; height: 38px; border-radius: 9px; font-size: 11px; }
    .builder-shell { overflow: hidden; border-radius: 8px; box-shadow: 0 12px 34px rgba(15,35,65,.08); }
    .builder-shell-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 21px 24px; border-bottom: 1px solid #e1e8f0; }
    .builder-tool-identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
    .builder-tool-identity h2 { margin: 0 0 3px; font-size: 20px; letter-spacing: 0; }
    .builder-tool-identity p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
    .builder-ready { display: flex; align-items: center; gap: 9px; color: #3e5b53; font-size: 12px; font-weight: 750; white-space: nowrap; }
    .builder-workspace { min-height: 410px; padding: 30px 32px 26px; background: white; }
    .builder-message { display: flex; align-items: flex-start; gap: 13px; padding-bottom: 23px; border-bottom: 1px solid #e6edf5; }
    .builder-message strong { color: #253b52; font-size: 15px; }
    .builder-message p { color: var(--muted); line-height: 1.55; margin: 5px 0 0; font-size: 13px; overflow-wrap: anywhere; }
    .repository-field { margin-top: 26px; }
    .repository-field label { display: block; color: #3c536b; font-size: 13px; font-weight: 780; margin-bottom: 9px; }
    .repository-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: stretch; }
    .repository-input-row input { width: 100%; min-width: 0; border: 1px solid #c7d5e4; border-radius: 8px; background: white; padding: 13px 14px; outline: none; color: #1f344a; }
    .repository-input-row input:focus { border-color: #75a9e4; box-shadow: 0 0 0 4px rgba(23,105,210,.08); }
    .builder-error { color: #b62f3d; min-height: 18px; margin-top: 8px; font-size: 12px; font-weight: 650; }
    .builder-chat { min-height: 350px; display: flex; flex-direction: column; gap: 24px; }
    .chat-thread, .builder-inspecting, .builder-error-state, .builder-agent-complete { display: grid; gap: 16px; }
    .chat-message { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
    .chat-message.user { justify-content: flex-end; }
    .chat-bubble { min-width: 0; max-width: 720px; padding: 15px 17px; border: 1px solid #dce6f0; border-radius: 8px; color: #314b63; background: #f7f9fc; overflow-wrap: anywhere; }
    .chat-message.user .chat-bubble { max-width: 78%; border-color: #1769d2; color: white; background: #1769d2; }
    .chat-bubble strong { display: block; color: #233b52; font-size: 14px; }
    .chat-speaker { display: block; margin-bottom: 5px; color: #6a8096; font-size: 11px; font-weight: 780; }
    .chat-message.user .chat-bubble strong { color: white; }
    .chat-bubble p { margin: 5px 0 0; font-size: 13px; line-height: 1.58; }
    .chat-message.user .chat-bubble p { margin: 0; }
    .agent-composer { margin-top: auto; padding-top: 20px; border-top: 1px solid #e6edf5; }
    .agent-composer label { display: block; margin-bottom: 8px; color: #3c536b; font-size: 12px; font-weight: 780; }
    .agent-composer textarea { width: 100%; min-height: 102px; resize: vertical; padding: 14px 15px; border: 1px solid #bfcfde; border-radius: 8px; color: #1f344a; background: white; outline: none; line-height: 1.55; }
    .agent-composer textarea:focus { border-color: #75a9e4; box-shadow: 0 0 0 4px rgba(23,105,210,.08); }
    .agent-composer-footer { min-height: 46px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-top: 10px; }
    .agent-composer-footer > div { flex: 1; min-width: 0; }
    .agent-composer-footer .builder-error { margin-top: 3px; }
    .composer-note { color: #8293a4; font-size: 11px; }
    .inspection-working { display: flex; align-items: center; gap: 9px; margin-top: 12px; color: #58728a; font-size: 12px; font-weight: 700; }
    .inspection-working span { width: 16px; height: 16px; border: 2px solid #b9cce0; border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; }
    .agent-thinking { display: flex; align-items: center; gap: 9px; color: #58728a; font-size: 12px; font-weight: 700; }
    .agent-thinking span { width: 15px; height: 15px; border: 2px solid #b9cce0; border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .builder-error-state > .btn { justify-self: end; }
    .builder-agent-complete .redirect-note { text-align: center; }
    .builder-agent-complete .builder-followup { margin-top: 8px; }
    .chat-bubble.completion { display: flex; align-items: flex-start; gap: 12px; max-width: 760px; padding: 18px; border-color: #bde4da; background: #f1fbf8; }
    .chat-bubble.completion .btn { margin-top: 15px; }
    .completion-check { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--teal); font-size: 16px; font-weight: 850; }
    .builder-progress-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin: 24px 0 13px; }
    .builder-progress-head h3 { margin: 0; color: #243b52; font-size: 20px; }
    .builder-progress-head p { color: var(--muted); margin: 5px 0 0; font-size: 13px; }
    #builder-progress-percent { color: var(--blue); font-size: 14px; font-weight: 820; }
    .builder-progress-track { height: 7px; overflow: hidden; border-radius: 7px; background: #e7edf4; margin-bottom: 20px; }
    #builder-progress-fill { height: 100%; width: 0; border-radius: 7px; background: linear-gradient(90deg, #1769d2, #159b88); transition: width .4s ease; }
    .builder-steps { display: grid; gap: 8px; }
    .builder-step { min-height: 48px; display: grid; grid-template-columns: 27px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 9px 11px; border: 1px solid transparent; border-radius: 8px; color: #718397; }
    .builder-step.active { color: #24425f; border-color: #bcd4ef; background: #f2f7fd; }
    .builder-step.complete { color: #28584f; }
    .builder-step-icon { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #edf1f5; font-size: 12px; font-weight: 850; }
    .builder-step.active .builder-step-icon { color: white; background: var(--blue); animation: pulse 1.4s infinite; }
    .builder-step.complete .builder-step-icon { color: white; background: var(--teal); }
    .builder-step small { font-size: 11px; color: #8393a5; }
    .builder-progress-actions { display: flex; justify-content: flex-end; margin-top: 22px; }
    .builder-complete { display: flex; min-height: 330px; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
    .builder-complete-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--teal); font-size: 24px; font-weight: 850; margin-bottom: 18px; box-shadow: 0 0 0 8px rgba(21,155,136,.10); }
    .builder-complete h2 { font-size: 30px; margin: 7px 0 9px; }
    .builder-complete > p { color: var(--muted); margin: 0 0 19px; }
    .prepared-repository { width: min(620px, 100%); display: grid; gap: 5px; padding: 12px 14px; margin-bottom: 20px; border: 1px solid #dfe7f1; border-radius: 8px; background: #f7f9fc; text-align: left; overflow-wrap: anywhere; }
    .prepared-repository span { color: #7b8da0; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
    .prepared-repository strong { color: #30485f; font-size: 12px; }
    .redirect-note { color: #8393a5; font-size: 11px; margin-top: 12px; }
    .source-row { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin: 2px 0 12px; }
    .source-row a { color: var(--blue); font-size: 12px; font-weight: 750; }
    .source-row a:hover { text-decoration: underline; }
    .source-status { display: inline-flex; align-items: center; color: #257060; background: #eaf8f4; border: 1px solid #bde4da; border-radius: 999px; padding: 5px 8px; font-size: 11px; font-weight: 800; }

    .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 26px 0; }
    .search-wrap { position: relative; flex: 1; max-width: 560px; }
    .search-wrap input { width: 100%; padding: 13px 15px 13px 42px; border: 1px solid #cfdbe8; border-radius: 11px; background: white; color: var(--ink); outline: none; }
    .search-wrap input:focus { border-color: #7eaee5; box-shadow: 0 0 0 4px rgba(23,105,210,.08); }
    .search-icon { position: absolute; left: 14px; top: 13px; color: #8193a7; }
    .filter-pills { display: flex; gap: 8px; }
    .filter-pill { padding: 9px 12px; border-radius: 999px; background: white; border: 1px solid #d6e1ec; color: #617489; font-size: 12px; font-weight: 700; cursor: pointer; }
    .filter-pill.active { color: white; background: var(--navy); border-color: var(--navy); }

    .detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 30px; padding: 42px 0 72px; align-items: start; }
    .panel { background: white; border: 1px solid #dfe7f1; border-radius: 16px; box-shadow: 0 8px 22px rgba(15,35,65,.045); }
    .detail-main { padding: 31px; }
    .detail-top { display: flex; align-items: flex-start; gap: 20px; padding-bottom: 27px; border-bottom: 1px solid #e8eef5; }
    .detail-icon { width: 72px; height: 72px; flex: 0 0 auto; border-radius: 18px; display: grid; place-items: center; color: white; font-size: 31px; box-shadow: 0 10px 25px rgba(23,105,210,.18); }
    .detail-title { font-size: 34px; line-height: 1.14; letter-spacing: -1px; margin: 0 0 10px; }
    .detail-short { color: var(--muted); font-size: 15px; line-height: 1.65; }
    .detail-section { padding: 27px 0; border-bottom: 1px solid #e8eef5; }
    .detail-section:last-child { border-bottom: 0; padding-bottom: 0; }
    .detail-section h3 { margin: 0 0 12px; font-size: 18px; }
    .detail-section p { color: #53677d; line-height: 1.75; margin: 0; }
    .workflow-list { display: grid; gap: 11px; margin-top: 16px; }
    .workflow-item { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
    .workflow-item .n { width: 28px; height: 28px; border-radius: 8px; background: #edf4ff; color: #1769d2; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
    .workflow-item div:last-child { color: #4d6278; font-size: 14px; line-height: 1.5; padding-top: 3px; }
    .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .info-box { padding: 14px; border-radius: 11px; background: #f7f9fc; border: 1px solid #e6edf5; }
    .info-label { color: #7b8da0; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
    .info-value { margin-top: 5px; font-size: 14px; font-weight: 700; color: #253b52; }

    .launch-panel { padding: 24px; position: sticky; top: 94px; }
    .launch-panel h3 { margin: 0 0 8px; font-size: 21px; }
    .launch-panel p { color: var(--muted); font-size: 13px; line-height: 1.6; }
    .launch-facts { display: grid; gap: 12px; margin: 20px 0; }
    .launch-fact { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 11px; border-bottom: 1px solid #e8eef5; font-size: 13px; }
    .launch-fact span:first-child { color: #7b8da0; }
    .launch-fact span:last-child { font-weight: 750; color: #30485f; text-align: right; }
    .launch-btn { width: 100%; margin-top: 4px; }
    .mode-launch-list { display: grid; gap: 12px; }
    .mode-launch-card { border: 1px solid #dfe7f1; border-radius: 13px; padding: 14px; background: #f8fbff; }
    .mode-launch-card.active { background: #f3fbf9; border-color: #b9e2d9; }
    .mode-launch-card.stopping { background: #fff8ee; border-color: #eccb91; }
    .mode-launch-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
    .mode-title { color: #21384f; font-size: 14px; font-weight: 820; }
    .mode-subtitle { color: #74869a; font-size: 11px; line-height: 1.45; margin-top: 3px; }
    .mode-status { color: #49667f; background: white; border: 1px solid #dbe6f2; border-radius: 999px; padding: 5px 8px; font-size: 11px; font-weight: 800; white-space: nowrap; }
    .mode-actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .mode-actions .launch-btn { margin-top: 0; }
    .fine-print { color: #8292a4; font-size: 11px; line-height: 1.5; margin-top: 13px; }

    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    .about-card { padding: 28px; }
    .org-card { display: grid; grid-template-columns: 72px 1fr; gap: 18px; align-items: center; }
    .org-logo { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; color: white; font-weight: 850; background: linear-gradient(145deg, #1769d2, #0b3a82); position: relative; overflow: hidden; }
    .org-logo.radiant { border-radius: 17px; background: linear-gradient(145deg, #735fd5, #20a4c9); font-size: 26px; }
    .org-title { font-size: 20px; font-weight: 820; margin-bottom: 7px; }
    .org-copy { color: var(--muted); line-height: 1.65; font-size: 14px; }
    .quote-panel { padding: 30px; background: linear-gradient(145deg, #0a2441, #0e3d67); color: white; border: 0; }
    .quote-panel p { color: #c5d7ea; line-height: 1.8; font-size: 16px; }

    .manage-layout { padding: 34px 0 72px; }
    .manage-note { background: #fff8e9; border: 1px solid #f2d69e; color: #795a18; padding: 13px 16px; border-radius: 11px; font-size: 13px; margin-bottom: 20px; }
    .table-card { overflow: hidden; }
    table { width: 100%; border-collapse: collapse; }
    th { background: #f5f8fc; color: #6e8093; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; text-align: left; padding: 14px 18px; }
    td { padding: 16px 18px; border-top: 1px solid #e8eef5; font-size: 13px; vertical-align: middle; }
    .row-title { font-weight: 800; color: #263c52; }
    .row-sub { color: #7a8a9b; font-size: 11px; margin-top: 3px; }
    .actions { display: flex; gap: 7px; justify-content: flex-end; }

    .form-wrap { padding: 34px 0 72px; }
    .form-card { padding: 28px; }
    .form-section { padding: 0 0 27px; margin-bottom: 27px; border-bottom: 1px solid #e8eef5; }
    .form-section:last-child { margin-bottom: 0; border-bottom: 0; }
    .form-section h3 { margin: 0 0 18px; font-size: 19px; }
    .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
    .field.full { grid-column: 1 / -1; }
    .field label { display: block; margin-bottom: 7px; color: #485f76; font-size: 12px; font-weight: 750; }
    .field input, .field textarea, .field select { width: 100%; border: 1px solid #cad7e4; border-radius: 10px; background: white; padding: 12px 13px; outline: none; color: #1f344a; }
    .field textarea { min-height: 118px; resize: vertical; line-height: 1.55; }
    .field input:focus, .field textarea:focus, .field select:focus { border-color: #75a9e4; box-shadow: 0 0 0 4px rgba(23,105,210,.07); }
    .help { color: #8a99a8; font-size: 11px; margin-top: 6px; }
    .toggle-row { display: flex; gap: 22px; flex-wrap: wrap; }
    .check { display: inline-flex; align-items: center; gap: 9px; color: #4b6279; font-size: 13px; font-weight: 650; }
    .check input { width: 16px; height: 16px; }
    .form-actions { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; }
    .right-actions { display: flex; gap: 10px; }

    .launch-screen { min-height: calc(100vh - 74px); background: linear-gradient(145deg, #071a2f, #0e345b); color: white; padding: 62px 0; }
    .launch-box { width: min(760px, calc(100% - 44px)); margin: 0 auto; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 22px; padding: 34px; box-shadow: 0 30px 90px rgba(0,0,0,.25); }
    .launch-box h1 { font-size: 36px; letter-spacing: -1px; margin: 0 0 8px; }
    .launch-box > p { color: #b9cde1; margin: 0 0 27px; }
    .progress-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; margin-bottom: 25px; }
    .progress-fill { height: 100%; width: 22%; background: linear-gradient(90deg, #35c6a7, #23a6d5); border-radius: 999px; transition: width .5s ease; }
    .progress-fill.failed { background: linear-gradient(90deg, #c93d4a, #f08a24); }
    .launch-steps { display: grid; gap: 10px; }
    .launch-step { display: grid; grid-template-columns: 30px 1fr auto; gap: 11px; align-items: center; padding: 12px 13px; border-radius: 11px; background: rgba(255,255,255,.045); color: #b9cde1; }
    .launch-step.done { color: white; }
    .launch-step.active { background: rgba(35,166,213,.15); border: 1px solid rgba(35,166,213,.35); color: white; }
    .launch-step.failed { background: rgba(201,61,74,.14); border: 1px solid rgba(201,61,74,.38); color: white; }
    .step-icon { width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: rgba(255,255,255,.10); }
    .launch-step.done .step-icon { background: #1d9d84; }
    .launch-step.active .step-icon { background: #1c84c8; animation: pulse 1.4s infinite; }
    .launch-step.failed .step-icon { background: #c93d4a; }
    @keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(28,132,200,.12); } }
    .step-time { font-size: 11px; color: #8fa9c1; }
    .launch-ready { display: none; margin-top: 24px; padding: 18px; border-radius: 13px; background: rgba(35,183,148,.12); border: 1px solid rgba(35,183,148,.30); }
    .launch-ready strong { display: block; margin-bottom: 6px; }
    .launch-ready.error { background: rgba(201,61,74,.14); border-color: rgba(201,61,74,.38); }
    .launch-ready.stopped { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
    .launch-ready.stopping { background: rgba(240,138,36,.12); border-color: rgba(240,138,36,.35); }
    .launch-detail { color: #badfd6; font-size: 13px; line-height: 1.55; margin-bottom: 13px; overflow-wrap: anywhere; }
    .launch-ready.error .launch-detail { color: #ffd1d6; }

    .jupyter { height: calc(100vh - 74px); background: #f4f5f7; display: grid; grid-template-columns: 270px 1fr; }
    .j-side { background: #ffffff; border-right: 1px solid #d5dbe2; padding: 15px 12px; overflow: auto; }
    .j-brand { display: flex; align-items: center; gap: 10px; padding: 8px 7px 15px; border-bottom: 1px solid #e5e8ec; font-weight: 800; }
    .j-logo { width: 31px; height: 31px; border-radius: 50%; border: 3px solid #ef7e22; position: relative; }
    .j-logo:before, .j-logo:after { content:""; position:absolute; background:#6d747b; border-radius:50%; width:5px; height:5px; }
    .j-logo:before { top:-8px; left:11px; } .j-logo:after { bottom:-8px; right:4px; }
    .file-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 7px 8px; font-size: 12px; font-weight: 750; color: #596673; }
    .file-row { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: 7px; font-size: 12px; color: #344350; }
    .file-row.active { background: #eaf2fb; color: #155fae; font-weight: 700; }
    .j-main { min-width: 0; display: flex; flex-direction: column; }
    .j-tabs { height: 42px; background: #fff; border-bottom: 1px solid #d5dbe2; display: flex; align-items: end; padding-left: 8px; }
    .j-tab { padding: 10px 15px; border: 1px solid #d5dbe2; border-bottom: 0; border-radius: 7px 7px 0 0; font-size: 12px; background: #fafafa; }
    .j-toolbar { height: 45px; background: white; border-bottom: 1px solid #d8dde4; display: flex; align-items: center; gap: 11px; padding: 0 14px; color: #4b5965; font-size: 12px; }
    .kernel-pill { margin-left: auto; border: 1px solid #b8c4d1; border-radius: 6px; padding: 5px 8px; color: #263b50; background: #fff; }
    .notebook { flex: 1; overflow: auto; padding: 24px 38px 60px; }
    .nb-title { font-size: 22px; font-weight: 750; margin-bottom: 20px; }
    .cell { display: grid; grid-template-columns: 62px 1fr; gap: 8px; margin: 14px 0; }
    .cell-count { color: #666; font-family: monospace; font-size: 12px; text-align: right; padding-top: 10px; }
    .cell-body { background: white; border: 1px solid #ccd4dc; border-left: 4px solid #4a90e2; border-radius: 3px; overflow: hidden; }
    .cell-code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; padding: 12px 14px; font-size: 12px; line-height: 1.65; background: #f8fafc; color: #293847; white-space: pre-wrap; }
    .cell-output { border-top: 1px solid #e4e7eb; padding: 12px 14px; font-size: 12px; background: white; color: #384a59; }
    .markdown-cell { background: transparent; border: 0; border-left: 4px solid transparent; }
    .markdown-cell .cell-code { background: transparent; font-family: inherit; font-size: 14px; line-height: 1.7; }

    .modal-backdrop { position: fixed; inset: 0; background: rgba(5,15,28,.68); display: grid; place-items: center; z-index: 100; padding: 20px; }
    .modal { width: min(480px, 100%); background: white; border-radius: 17px; padding: 26px; box-shadow: 0 32px 90px rgba(0,0,0,.32); }
    .modal h3 { margin: 0 0 9px; font-size: 21px; }
    .modal p { color: var(--muted); line-height: 1.65; font-size: 14px; }
    .modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 23px; }

    .footer { background: #061728; color: #9eb3c8; padding: 24px 0; font-size: 12px; }
    .footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 18px; }

    @media (max-width: 980px) {
      .topbar { padding: 0 20px; }
      .brand-sub { display: none; }
      .hero-grid, .detail-layout, .about-grid { grid-template-columns: 1fr; }
      .hero-card { max-width: 640px; }
      .cards-grid { grid-template-columns: repeat(2, 1fr); }
      .stats { grid-template-columns: repeat(2, 1fr); }
      .launch-panel { position: static; }
      .jupyter { grid-template-columns: 220px 1fr; }
    }
    @media (max-width: 700px) {
      .container { width: min(100% - 28px, 1220px); }
      .topbar { height: auto; min-height: 70px; flex-wrap: wrap; gap: 7px; padding-top: 10px; padding-bottom: 10px; }
      .brand { width: 100%; min-width: 0; }
      .brand > div:last-child { min-width: 0; }
      .brand-title { font-size: 16px; overflow-wrap: anywhere; }
      .nav { width: 100%; justify-content: center; gap: 3px; flex-wrap: wrap; }
      .nav a { padding: 7px 4px; font-size: 10px; }
      .nav .manage-link { margin-left: 0; }
      .hero { padding: 60px 0; }
      h1 { font-size: 42px; }
      .hero h1 { max-width: 100%; font-size: 38px; line-height: 1.08; letter-spacing: 0; }
      .hero-copy { max-width: 100%; overflow-wrap: anywhere; }
      .hero-card { width: 100%; }
      .page-head h1 { font-size: 34px; line-height: 1.12; }
      .cards-grid, .stats, .field-grid, .info-grid { grid-template-columns: 1fr; }
      .page-head-inner, .section-title-row, .toolbar, .footer-inner { align-items: flex-start; flex-direction: column; }
      .page-head-inner > div:first-child { width: 100%; }
      .head-actions { width: 100%; }
      .builder-page .page-head { padding-top: 30px; }
      .builder-page .page-head h1 { font-size: 32px; }
      .builder-shell-head { align-items: flex-start; padding: 18px; }
      .builder-ready { margin-top: 4px; }
      .builder-workspace { min-height: 390px; padding: 22px 18px; }
      .repository-input-row { grid-template-columns: 1fr; }
      .repository-input-row .btn { width: 100%; }
      .chat-message.user .chat-bubble { max-width: 90%; }
      .agent-composer-footer { align-items: stretch; flex-direction: column; }
      .agent-composer-footer .btn { width: 100%; }
      .chat-bubble.completion { flex-direction: column; }
      .builder-step { grid-template-columns: 27px minmax(0, 1fr); }
      .builder-step small { grid-column: 2; }
      .filter-pills { flex-wrap: wrap; }
      .detail-main { padding: 22px; }
      .detail-top { flex-direction: column; }
      table, thead, tbody, th, td, tr { display: block; }
      thead { display: none; }
      tr { border-top: 1px solid #e8eef5; padding: 10px; }
      td { border: 0; padding: 7px 9px; }
      .actions { justify-content: flex-start; }
      .jupyter { grid-template-columns: 1fr; }
      .j-side { display: none; }
      .notebook { padding: 18px 10px; }
    }