* { box-sizing: border-box; }
    :root {
      color-scheme: light;
      --ui-scale: .8;
      --page: #f5f5f3;
      --panel: #f0f0ed;
      --surface: #ffffff;
      --work: #fcfcfb;
      --soft: #f8f8f7;
      --soft-2: #f2f2f1;
      --line: #e7e5e4;
      --line-2: #d6d3d1;
      --text: #1c1917;
      --muted: #78716c;
      --faint: #a8a29e;
      --black: #0c0a09;
      --rose: #e11d48;
      --blue: #5078ff;
      --shadow: 0 24px 72px rgba(15, 23, 42, .12);
      --shadow-soft: 0 18px 48px rgba(15, 23, 42, .09);
      --font: "SF Pro Display", "SF Pro Text", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    }
    html, body { height: 100%; overflow: hidden; }
    body {
      margin: 0;
      min-height: 100dvh;
      position: relative;
      isolation: isolate;
      background: #d8d6d2;
      color: var(--text);
      font-family: var(--font);
      letter-spacing: 0;
    }
    body::before {
      content: "";
      position: fixed;
      inset: -4%;
      z-index: -2;
      background:
        linear-gradient(rgba(245, 245, 243, .08), rgba(245, 245, 243, .08)),
        url("../../img/beijing.png") center center / cover no-repeat;
      transform: scale(1.08);
      transform-origin: center;
      filter: saturate(1.08) contrast(1.04) brightness(.94);
    }
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background:
        radial-gradient(circle at 18% 20%, rgba(56, 189, 248, .16), transparent 26%),
        radial-gradient(circle at 82% 16%, rgba(244, 114, 182, .14), transparent 24%),
        radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .06), transparent 30%),
        radial-gradient(circle at 50% 50%, transparent 54%, rgba(6, 10, 18, .28) 100%),
        linear-gradient(180deg, rgba(6, 10, 18, .08) 0%, rgba(6, 10, 18, .12) 100%);
    }
    .ui-scale-root {
      position: relative;
      z-index: 1;
      width: calc(100% / var(--ui-scale));
      height: calc(100% / var(--ui-scale));
      transform: scale(var(--ui-scale));
      transform-origin: top left;
    }
    button, input, select, textarea { font: inherit; letter-spacing: 0; }
    button { cursor: pointer; }
    button:disabled { cursor: not-allowed; opacity: .55; }
    a { color: inherit; text-decoration: none; }
    .hidden { display: none !important; }
    .app-shell {
      height: 100%;
      min-height: 0;
      overflow: hidden;
      padding: 12px;
      background: transparent;
    }
    .app-layout {
      margin: 0 auto;
      display: flex;
      height: 100%;
      min-height: 0;
      max-width: calc(1680px / var(--ui-scale));
      gap: 14px;
    }
    .rail {
      width: 100px;
      display: flex;
      flex-shrink: 0;
    }
    .rail-inner {
      display: flex;
      width: 100%;
      flex-direction: column;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 28px;
      background: rgba(240, 240, 237, .34);
      padding: 14px 10px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
      backdrop-filter: blur(16px);
    }
    .rail-stack {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
    .rail-item {
      display: flex;
      min-height: 82px;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 7px;
    }
    .rail-label {
      max-width: 72px;
      overflow: hidden;
      color: #57534e;
      font-size: 11px;
      font-weight: 600;
      line-height: 1;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .rail-btn.active + .rail-label { color: #292524; }
    .rail-btn, .icon-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      background: var(--surface);
      color: #57534e;
      transition: background .18s, color .18s, transform .18s, border-color .18s;
    }
    .rail-btn {
      width: 62px;
      height: 62px;
      border-radius: 20px;
      box-shadow: 0 1px 2px rgba(28, 25, 23, .05);
    }
    .rail-btn:hover, .icon-btn:hover { background: #fafaf9; color: #111827; }
    .rail-btn.active {
      background: var(--black);
      color: white;
      border-color: var(--black);
      box-shadow: 0 10px 24px rgba(28, 25, 23, .12);
    }
    .rail-bottom {
      margin-top: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }
    .studio-grid {
      display: grid;
      flex: 1;
      min-width: 0;
      min-height: 0;
      grid-template-columns: 320px minmax(0, 1fr);
      gap: 12px;
    }
    .history-panel {
      order: 0;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 28px;
      background: rgba(248, 248, 247, .34);
      box-shadow: var(--shadow-soft);
      backdrop-filter: blur(14px);
    }
    .history-inner {
      display: flex;
      height: 100%;
      min-height: 0;
      flex-direction: column;
    }
    .history-head {
      border-bottom: 1px solid rgba(231, 229, 228, .82);
      padding: 16px;
    }
    .history-title-row, .workspace-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    h1, h2, h3, p { margin: 0; }
    .history-title {
      font-size: 18px;
      font-weight: 650;
      color: var(--text);
    }
    .count-pill, .meta-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: white;
      color: var(--muted);
      font-size: 12px;
      font-weight: 550;
      line-height: 1;
      box-shadow: 0 1px 2px rgba(28, 25, 23, .05);
    }
    .count-pill { min-width: 32px; height: 28px; padding: 0 10px; }
    .history-actions {
      display: flex;
      gap: 8px;
      margin-top: 16px;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 1px solid transparent;
      border-radius: 18px;
      min-height: 44px;
      padding: 0 16px;
      background: white;
      color: #44403c;
      font-weight: 620;
      transition: background .18s, color .18s, border-color .18s, transform .18s;
    }
    .btn:hover:not(:disabled) { background: #fafaf9; color: #1c1917; }
    .btn-primary {
      background: var(--black);
      color: white;
      border-color: var(--black);
    }
    .btn-primary:hover:not(:disabled) { background: #292524; color: white; }
    .btn-outline { border-color: var(--line); background: white; }
    .btn-sm { min-height: 34px; border-radius: 999px; padding: 0 12px; font-size: 12px; }
    .history-list {
      min-height: 0;
      flex: 1;
      overflow-y: auto;
      padding: 12px 8px;
    }
    .history-empty {
      padding: 16px 12px;
      color: #44403c;
      font-size: 14px;
      line-height: 1.7;
    }
    .history-item {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      border: 1px solid transparent;
      border-radius: 22px;
      background: transparent;
      padding: 8px;
      text-align: left;
      transition: background .18s, border-color .18s, box-shadow .18s;
    }
    .history-item:hover { border-color: rgba(214, 211, 209, .8); background: rgba(255, 255, 255, .7); }
    .history-item.active {
      border-color: var(--line);
      background: white;
      box-shadow: 0 1px 3px rgba(28, 25, 23, .07);
    }
    .history-main {
      display: flex;
      min-width: 0;
      flex: 1;
      align-items: center;
      gap: 12px;
    }
    .thumb {
      display: flex;
      width: 56px;
      height: 56px;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: 16px;
      background: var(--soft-2);
      color: var(--faint);
    }
    .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .history-text {
      min-width: 0;
      flex: 1;
      border-radius: 18px;
      background: rgba(255, 255, 255, .16);
      padding: 10px 12px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26);
      backdrop-filter: blur(14px);
    }
    .history-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
    .mode-chip {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      background: var(--soft-2);
      padding: 2px 8px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 600;
      white-space: nowrap;
    }
    .time-chip {
      min-width: 0;
      overflow: hidden;
      color: var(--faint);
      font-size: 12px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .history-item-title {
      margin-top: 8px;
      overflow: hidden;
      color: #44403c;
      font-size: 14px;
      font-weight: 640;
      text-shadow: 0 1px 10px rgba(255, 255, 255, .22);
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .history-prompt {
      display: -webkit-box;
      margin-top: 4px;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.55;
      text-shadow: 0 1px 8px rgba(255, 255, 255, .2);
    }
    .history-delete {
      display: inline-flex;
      width: 32px;
      height: 32px;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: 12px;
      background: transparent;
      color: var(--faint);
      opacity: 0;
      transition: background .18s, color .18s, opacity .18s;
    }
    .history-item:hover .history-delete { opacity: 1; }
    .history-delete:hover { background: var(--soft-2); color: var(--rose); }
    .studio-grid.home-mode { grid-template-columns: minmax(0, 1fr); }
    .workspace {
      order: 1;
      display: flex;
      min-height: 0;
      min-width: 0;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 30px;
      background: rgba(255, 255, 255, .38);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
    }
    .workspace-header {
      flex-shrink: 0;
      border-bottom: 1px solid rgba(231, 229, 228, .82);
      background: rgba(255, 255, 255, .14);
      backdrop-filter: blur(18px);
      padding: 16px 20px;
    }
    .workspace-title-row { justify-content: flex-start; flex-wrap: wrap; }
    .workspace-title {
      font-size: 22px;
      font-weight: 680;
      color: #0c0a09;
    }
    .selected-title {
      max-width: 360px;
      overflow: hidden;
      border-radius: 999px;
      background: var(--soft-2);
      padding: 6px 12px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .header-spacer { flex: 1; }
    .key-state {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: white;
      padding: 9px 14px;
      color: #57534e;
      font-size: 13px;
      font-weight: 620;
    }
    .quick-api-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
      min-width: 320px;
    }
    .quick-api-input {
      height: 40px;
      border: 1px solid rgba(255, 255, 255, .78);
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(241,241,239,.96) 100%);
      color: #1c1917;
      outline: 0;
      padding: 0 14px;
      font-size: 13px;
      font-weight: 560;
      box-shadow: inset 5px 5px 10px rgba(199, 195, 189, .34), inset -6px -6px 12px rgba(255,255,255,.9), 0 10px 24px rgba(28, 25, 23, .05);
      transition: border-color .18s, box-shadow .18s, background .18s, transform .18s;
    }
    .quick-api-input:focus {
      border-color: rgba(80, 120, 255, .26);
      background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(247,247,245,.98) 100%);
      box-shadow: inset 4px 4px 8px rgba(198, 194, 188, .28), inset -5px -5px 10px rgba(255,255,255,.96), 0 0 0 4px rgba(80, 120, 255, .08), 0 14px 28px rgba(28, 25, 23, .07);
    }
    .quick-base-select {
      min-width: 150px;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      padding-right: 40px;
      background-image:
        linear-gradient(45deg, transparent 50%, #78716c 50%),
        linear-gradient(135deg, #78716c 50%, transparent 50%),
        linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(241,241,239,.96) 100%);
      background-position:
        calc(100% - 18px) calc(50% - 1px),
        calc(100% - 12px) calc(50% - 1px),
        0 0;
      background-size: 6px 6px, 6px 6px, 100% 100%;
      background-repeat: no-repeat;
    }
    .quick-base-input {
      min-width: 220px;
    }
    .home-screen {
      min-height: 0;
      flex: 1;
      overflow: auto;
      background:
        radial-gradient(circle at 12% 18%, rgba(56, 189, 248, .14), transparent 26%),
        radial-gradient(circle at 78% 10%, rgba(217, 70, 239, .12), transparent 24%),
        linear-gradient(180deg, rgba(255,255,255,.52) 0%, rgba(252,252,251,.38) 42%, rgba(248,248,246,.32) 100%);
    }
    .home-inner {
      display: flex;
      min-height: 100%;
      flex-direction: column;
      gap: 26px;
      padding: 24px;
    }
    .home-hero {
      border: 1px solid rgba(231, 229, 228, .9);
      border-radius: 36px;
      background: linear-gradient(180deg, rgba(255,255,255,.56) 0%, rgba(255,255,255,.34) 100%);
      padding: 30px;
      box-shadow: 0 28px 70px rgba(15, 23, 42, .06);
      backdrop-filter: blur(14px);
      overflow: hidden;
    }
    .home-grid-hero {
      display: grid;
      grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
      gap: 22px;
      align-items: stretch;
    }
    .home-hero-copy-col,
    .home-hero-panel-col {
      min-width: 0;
    }
    .home-hero-top {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid rgba(191, 219, 254, .95);
      border-radius: 999px;
      background: rgba(255, 255, 255, .9);
      padding: 10px 14px;
      color: #4f46e5;
      font-size: 12px;
      font-weight: 760;
      letter-spacing: .06em;
      text-transform: uppercase;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
    }
    .home-title-wrap {
      position: relative;
      margin-top: 18px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 18px 20px 20px;
      isolation: isolate;
    }
    .home-title-wrap::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 30px;
      background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.1) 100%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 14px 36px rgba(15, 23, 42, .05);
      backdrop-filter: blur(18px);
    }
    .home-title-eyebrow {
      color: #1c1917;
      font-size: 28px;
      font-weight: 760;
      line-height: 1.12;
      letter-spacing: -.02em;
      text-shadow: 0 1px 14px rgba(255, 255, 255, .18);
    }
    .home-title-main {
      margin: 0;
      max-width: 1140px;
      font-size: clamp(58px, 8vw, 112px);
      font-weight: 820;
      line-height: .95;
      letter-spacing: -.05em;
      background: linear-gradient(90deg, #22c1ee 0%, #6da7ff 32%, #9a65ff 65%, #ff4fb1 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      filter: drop-shadow(0 6px 20px rgba(255, 255, 255, .16));
    }
    .home-copy {
      margin-top: 18px;
      max-width: 960px;
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: 24px;
      background: rgba(255, 255, 255, .14);
      padding: 16px 18px;
      color: #57534e;
      font-size: 18px;
      line-height: 1.72;
      letter-spacing: -.01em;
      text-shadow: 0 1px 12px rgba(255, 255, 255, .22);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
      backdrop-filter: blur(16px);
    }
    .home-hero-flow {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 24px;
    }
    .home-flow-step {
      display: flex;
      min-height: 124px;
      flex-direction: column;
      gap: 8px;
      border: 1px solid rgba(214, 211, 209, .82);
      border-radius: 24px;
      background: rgba(255, 255, 255, .42);
      padding: 18px;
      box-shadow: 0 18px 40px rgba(15, 23, 42, .04);
      backdrop-filter: blur(14px);
    }
    .home-flow-index {
      color: #6366f1;
      font-size: 12px;
      font-weight: 780;
      letter-spacing: .08em;
    }
    .home-flow-step strong {
      color: #1c1917;
      font-size: 18px;
      font-weight: 760;
      line-height: 1.2;
    }
    .home-flow-step span:last-child {
      color: #78716c;
      font-size: 13px;
      line-height: 1.7;
    }
    .home-pill-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
      margin-top: 26px;
    }
    .home-pill {
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 76px;
      border: 1px solid rgba(214, 211, 209, .9);
      border-radius: 24px;
      background: rgba(255, 255, 255, .46);
      padding: 0 20px;
      font-size: 15px;
      font-weight: 670;
      box-shadow: 0 18px 40px rgba(15, 23, 42, .04);
      backdrop-filter: blur(14px);
    }
    .home-pill-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      flex-shrink: 0;
    }
    .home-cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 24px;
    }
    .home-cta-primary {
      border-radius: 999px;
      min-height: 58px;
      padding: 0 24px;
      background: linear-gradient(90deg, #3b82f6 0%, #5b5cf6 100%);
      color: white;
      border: 0;
      font-size: 15px;
      font-weight: 760;
      box-shadow: 0 18px 36px rgba(59, 130, 246, .26);
    }
    .home-cta-primary:hover:not(:disabled) {
      color: white;
      background: linear-gradient(90deg, #2563eb 0%, #4f46e5 100%);
    }
    .home-cta-secondary {
      min-height: 58px;
      padding: 0 22px;
      border-radius: 999px;
      border: 1px solid #dbeafe;
      background: rgba(255, 255, 255, .92);
      color: #57534e;
      font-size: 15px;
      font-weight: 700;
      box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
    }
    .home-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 16px;
      color: #78716c;
      font-size: 12px;
      font-weight: 620;
    }
    .home-hero-stats {
      margin-top: 18px;
    }
    .home-stat-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 36px;
      border: 1px solid rgba(231, 229, 228, .95);
      border-radius: 999px;
      background: rgba(255, 255, 255, .9);
      padding: 0 12px;
      backdrop-filter: blur(14px);
    }
    .home-product-panel {
      position: relative;
      display: flex;
      height: 100%;
      min-height: 100%;
      flex-direction: column;
      gap: 18px;
      border: 1px solid rgba(214, 211, 209, .82);
      border-radius: 32px;
      background: linear-gradient(180deg, rgba(19, 24, 39, .96) 0%, rgba(37, 44, 74, .92) 100%);
      padding: 22px;
      color: #f5f7ff;
      box-shadow: 0 30px 80px rgba(15, 23, 42, .16);
      overflow: hidden;
    }
    .home-product-panel::before {
      content: "";
      position: absolute;
      inset: auto -14% -18% auto;
      width: 240px;
      height: 240px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(99, 102, 241, .32) 0%, rgba(99, 102, 241, 0) 70%);
      pointer-events: none;
    }
    .home-product-head {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
    }
    .home-product-kicker {
      color: rgba(191, 219, 254, .88);
      font-size: 12px;
      font-weight: 760;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .home-product-title {
      margin-top: 8px;
      max-width: 360px;
      color: #ffffff;
      font-size: 28px;
      font-weight: 760;
      line-height: 1.16;
      letter-spacing: -.03em;
    }
    .home-product-badge {
      display: inline-flex;
      min-height: 34px;
      align-items: center;
      border-radius: 999px;
      background: rgba(255,255,255,.12);
      padding: 0 12px;
      color: #dbeafe;
      font-size: 12px;
      font-weight: 760;
      border: 1px solid rgba(255,255,255,.12);
      white-space: nowrap;
    }
    .home-product-preview {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 188px;
      gap: 14px;
      min-height: 340px;
    }
    .home-preview-orb {
      position: absolute;
      left: 18px;
      top: 22px;
      width: 180px;
      height: 180px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(34, 197, 255, .32) 0%, rgba(34, 197, 255, 0) 72%);
      filter: blur(8px);
      pointer-events: none;
    }
    .home-preview-window {
      position: relative;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 24px;
      background: rgba(255,255,255,.07);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
      backdrop-filter: blur(16px);
      overflow: hidden;
    }
    .home-preview-main {
      min-height: 340px;
    }
    .home-preview-window-head {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 14px 16px;
    }
    .home-preview-window-head span {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: rgba(255,255,255,.32);
    }
    .home-preview-canvas {
      position: relative;
      height: calc(100% - 36px);
      min-height: 280px;
      margin: 0 16px 16px;
      border-radius: 20px;
      overflow: hidden;
      background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
    }
    .home-preview-gradient {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 18% 24%, rgba(99, 102, 241, .62), transparent 28%),
        radial-gradient(circle at 78% 18%, rgba(34, 197, 255, .4), transparent 26%),
        linear-gradient(135deg, #191f36 0%, #232c52 32%, #362764 66%, #1d355b 100%);
    }
    .home-preview-overlay {
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      border-radius: 16px;
      background: rgba(255,255,255,.14);
      color: #f8fafc;
      font-size: 14px;
      font-weight: 720;
      letter-spacing: .04em;
      backdrop-filter: blur(18px);
    }
    .home-preview-side {
      display: flex;
      flex-direction: column;
      padding: 18px 16px;
    }
    .home-preview-side-title {
      color: #f8fafc;
      font-size: 14px;
      font-weight: 720;
    }
    .home-preview-list {
      display: flex;
      flex: 1;
      flex-direction: column;
      gap: 10px;
      margin-top: 14px;
    }
    .home-preview-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      border-radius: 16px;
      background: rgba(255,255,255,.08);
      padding: 12px;
      color: rgba(255,255,255,.9);
      font-size: 13px;
      line-height: 1.55;
    }
    .home-product-metrics {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .home-metric-card {
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.08);
      padding: 16px;
      backdrop-filter: blur(18px);
    }
    .home-metric-label {
      color: rgba(191, 219, 254, .78);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .04em;
    }
    .home-metric-value {
      margin-top: 6px;
      color: #ffffff;
      font-size: 16px;
      font-weight: 720;
      line-height: 1.45;
    }
    .home-card-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }
    .home-card-grid-refined {
      gap: 18px;
    }
    .home-card {
      min-height: 172px;
      border: 1px solid rgba(214, 211, 209, .9);
      border-radius: 28px;
      background: rgba(255, 255, 255, .44);
      padding: 22px;
      box-shadow: 0 16px 42px rgba(15, 23, 42, .04);
      backdrop-filter: blur(16px);
    }
    .home-card-refined {
      min-height: 188px;
      border-color: rgba(231, 229, 228, .92);
      background: linear-gradient(180deg, rgba(255,255,255,.56) 0%, rgba(255,255,255,.34) 100%);
      box-shadow: 0 20px 52px rgba(15, 23, 42, .05);
    }
    .home-card-kicker {
      color: #a8a29e;
      font-size: 13px;
      font-weight: 700;
    }
    .home-card-title {
      margin-top: 8px;
      color: #1c1917;
      font-size: 24px;
      font-weight: 760;
      line-height: 1.22;
      letter-spacing: -.02em;
    }
    .home-card-copy {
      margin-top: 12px;
      color: #78716c;
      font-size: 15px;
      line-height: 1.72;
      text-shadow: 0 1px 10px rgba(255, 255, 255, .2);
    }
    .home-showcase {
      display: grid;
      grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
      gap: 18px;
    }
    .home-showcase-card {
      border: 1px solid rgba(214, 211, 209, .9);
      border-radius: 30px;
      background: rgba(255, 255, 255, .42);
      padding: 24px;
      box-shadow: 0 18px 48px rgba(15, 23, 42, .05);
      backdrop-filter: blur(18px);
    }
    .home-showcase-primary,
    .home-showcase-secondary {
      background: linear-gradient(180deg, rgba(255,255,255,.56) 0%, rgba(255,255,255,.36) 100%);
    }
    .home-section-badge {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      border-radius: 999px;
      background: rgba(255,255,255,.88);
      border: 1px solid rgba(231,229,228,.9);
      padding: 0 12px;
      color: #6366f1;
      font-size: 12px;
      font-weight: 760;
      letter-spacing: .04em;
    }
    .home-showcase-title {
      margin-top: 14px;
      color: #1c1917;
      font-size: 24px;
      font-weight: 760;
      line-height: 1.2;
    }
    .home-showcase-copy {
      margin-top: 10px;
      color: #78716c;
      font-size: 15px;
      line-height: 1.72;
      text-shadow: 0 1px 10px rgba(255, 255, 255, .2);
    }
    .home-micro-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 18px;
    }
    .home-micro-card {
      border-radius: 22px;
      border: 1px solid rgba(255, 255, 255, .16);
      padding: 18px;
      color: #1c1917;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
      backdrop-filter: blur(14px);
    }
    .home-micro-card strong {
      display: block;
      font-size: 16px;
      font-weight: 740;
      line-height: 1.25;
    }
    .home-micro-card span {
      display: block;
      margin-top: 8px;
      color: #57534e;
      font-size: 13px;
      line-height: 1.65;
      text-shadow: 0 1px 8px rgba(255, 255, 255, .2);
    }
    .home-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 16px;
    }
    .home-list-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      border-radius: 22px;
      background: rgba(250, 250, 249, .46);
      border: 1px solid rgba(255, 255, 255, .16);
      padding: 16px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
      backdrop-filter: blur(14px);
    }
    .home-list-item strong {
      display: block;
      color: #1c1917;
      font-size: 15px;
      font-weight: 740;
    }
    .home-list-item span {
      display: block;
      margin-top: 6px;
      color: #78716c;
      font-size: 13px;
      line-height: 1.65;
      text-shadow: 0 1px 8px rgba(255, 255, 255, .2);
    }

    .home-product-layout {
      gap: 22px;
      padding: 22px;
    }
    .home-product-layout .home-hero,
    .home-product-section,
    .home-showcase-unified .home-showcase-card {
      border: 1px solid rgba(255, 255, 255, .34);
      background: linear-gradient(180deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .36) 100%);
      box-shadow: 0 28px 76px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255, 255, 255, .52);
      backdrop-filter: blur(20px);
    }
    .home-product-layout .home-hero {
      padding: 26px;
    }
    .home-product-hero {
      display: block;
    }
    .home-product-layout .home-hero-copy-col {
      max-width: 980px;
    }
    .home-product-layout .home-title-wrap {
      margin-top: 16px;
      padding: 16px 18px 18px;
    }
    .home-product-layout .home-title-eyebrow {
      color: #44403c;
      font-size: clamp(22px, 2.3vw, 34px);
    }
    .home-product-layout .home-title-main {
      max-width: 780px;
      font-size: clamp(54px, 7vw, 96px);
    }
    .home-product-layout .home-copy {
      max-width: 820px;
      color: #44403c;
      background: rgba(255, 255, 255, .28);
      border-color: rgba(255, 255, 255, .26);
    }
    .home-product-layout .home-stat-chip {
      color: #44403c;
      font-weight: 700;
    }
    .home-product-layout .home-product-panel {
      background: linear-gradient(160deg, rgba(17, 24, 39, .94) 0%, rgba(35, 43, 78, .91) 48%, rgba(53, 42, 94, .9) 100%);
      border-color: rgba(255, 255, 255, .18);
      box-shadow: 0 30px 80px rgba(15, 23, 42, .18), inset 0 1px 0 rgba(255, 255, 255, .08);
    }
    .home-product-section {
      border-radius: 34px;
      padding: 24px;
    }
    .home-section-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 22px;
      margin-bottom: 18px;
    }
    .home-section-head p {
      max-width: 520px;
      color: #57534e;
      font-size: 14px;
      line-height: 1.7;
      text-align: right;
    }
    .home-section-title {
      margin-top: 12px;
      color: #1c1917;
      font-size: 30px;
      font-weight: 780;
      line-height: 1.16;
      letter-spacing: -.03em;
    }
    .home-product-layout .home-card-grid {
      gap: 14px;
    }
    .home-product-layout .home-card {
      position: relative;
      min-height: 198px;
      overflow: hidden;
      border-color: rgba(255, 255, 255, .32);
      background: rgba(255, 255, 255, .4);
      box-shadow: 0 18px 48px rgba(15, 23, 42, .06), inset 0 1px 0 rgba(255, 255, 255, .42);
    }
    .home-card-index {
      position: absolute;
      right: 18px;
      top: 16px;
      color: rgba(99, 102, 241, .18);
      font-size: 42px;
      font-weight: 820;
      line-height: 1;
      letter-spacing: -.05em;
    }
    .home-product-layout .home-card-kicker,
    .home-product-layout .home-section-badge {
      color: #4f46e5;
    }
    .home-product-layout .home-card-title,
    .home-product-layout .home-showcase-title {
      color: #1c1917;
    }
    .home-product-layout .home-card-copy,
    .home-product-layout .home-showcase-copy,
    .home-product-layout .home-list-item span,
    .home-product-layout .home-micro-card span {
      color: #57534e;
    }
    .home-showcase-unified {
      align-items: stretch;
    }
    .home-showcase-unified .home-showcase-card {
      overflow: hidden;
    }
    .home-showcase-unified .home-micro-card,
    .home-showcase-unified .home-list-item {
      border: 1px solid rgba(255, 255, 255, .28);
      background: rgba(255, 255, 255, .34);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .36);
    }
    .home-showcase-unified .home-micro-card::before {
      content: "";
      display: block;
      width: 28px;
      height: 4px;
      border-radius: 999px;
      background: var(--accent);
      margin-bottom: 14px;
    }
    .quick-base-input { width: 230px; }
    .quick-key-input { width: 260px; }
    .quick-remember {
      display: inline-flex;
      height: 40px;
      align-items: center;
      gap: 6px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: white;
      padding: 0 12px;
      color: #57534e;
      font-size: 12px;
      font-weight: 620;
      white-space: nowrap;
    }
    .quick-remember input {
      width: 14px;
      height: 14px;
      margin: 0;
    }
    .key-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--faint);
    }
    .key-dot.ready { background: #16a34a; }
    .results-wrap {
      position: relative;
      min-height: 0;
      flex: 1;
      background: rgba(252, 252, 251, .08);
    }
    .results-viewport {
      height: 100%;
      min-height: 0;
      overflow-y: auto;
    }
    .empty-state {
      max-width: 1120px;
      margin: 0 auto;
      padding: 32px 24px;
    }
    .empty-icon {
      display: inline-flex;
      width: 56px;
      height: 56px;
      align-items: center;
      justify-content: center;
      border-radius: 20px;
      background: var(--black);
      color: white;
      box-shadow: 0 1px 2px rgba(28, 25, 23, .06);
    }
    .empty-title {
      margin-top: 24px;
      max-width: 760px;
      color: #0c0a09;
      font-size: clamp(32px, 4vw, 48px);
      font-weight: 680;
      line-height: 1.08;
    }
    .examples {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-top: 32px;
    }
    .example-card {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: white;
      text-align: left;
      transition: transform .18s, border-color .18s, box-shadow .18s;
    }
    .example-card:hover {
      transform: translateY(-2px);
      border-color: var(--line-2);
      box-shadow: 0 8px 22px rgba(28, 25, 23, .06);
    }
    .example-tone { height: 80px; background: linear-gradient(135deg, var(--tone-a), var(--tone-b), var(--tone-c)); }
    .example-cover {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
    .example-body { padding: 14px 16px; }
    .example-kicker {
      display: inline-flex;
      border-radius: 999px;
      background: var(--soft-2);
      padding: 3px 8px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 650;
    }
    .example-title { margin-top: 8px; color: #1c1917; font-size: 14px; font-weight: 680; }
    .example-prompt {
      display: -webkit-box;
      margin-top: 8px;
      min-height: 44px;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      color: #57534e;
      font-size: 14px;
      line-height: 1.55;
    }
    .example-hint {
      margin-top: 10px;
      border-top: 1px solid var(--line);
      padding-top: 8px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }
    .turns {
      display: flex;
      width: 100%;
      max-width: 1120px;
      margin: 0 auto;
      flex-direction: column;
      gap: 32px;
      padding: 32px 24px;
    }
    .turn { display: flex; flex-direction: column; gap: 16px; }
    .user-side { display: flex; justify-content: flex-end; }
    .user-bundle {
      display: flex;
      width: 100%;
      max-width: 78%;
      flex-direction: column;
      align-items: flex-end;
      gap: 16px;
    }
    .source-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
    .source-card {
      width: 136px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: white;
      box-shadow: 0 1px 3px rgba(28, 25, 23, .06);
    }
    .source-label {
      border-bottom: 1px solid #f5f5f4;
      padding: 8px 12px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 620;
    }
    .source-card img {
      display: block;
      width: 100%;
      height: 96px;
      object-fit: cover;
      background: #fafaf9;
    }
    .prompt-group {
      display: flex;
      max-width: 100%;
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
    }
    .prompt-bubble {
      min-width: 0;
      max-width: 100%;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      border-radius: 28px;
      background: rgba(255, 255, 255, .18);
      border: 1px solid rgba(255, 255, 255, .16);
      padding: 16px 20px;
      color: #44403c;
      font-size: 15px;
      line-height: 1.75;
      text-shadow: 0 1px 10px rgba(255, 255, 255, .2);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
      backdrop-filter: blur(16px);
    }
    .copy-prompt {
      display: inline-flex;
      height: 28px;
      align-items: center;
      gap: 4px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: white;
      padding: 0 10px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 620;
      opacity: 0;
      transition: opacity .18s, background .18s, color .18s;
    }
    .prompt-group:hover .copy-prompt { opacity: 1; }
    .assistant-head {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 4px;
    }
    .assistant-mark {
      display: inline-flex;
      width: 36px;
      height: 36px;
      align-items: center;
      justify-content: center;
      border-radius: 16px;
      background: var(--black);
      color: white;
    }
    .assistant-title { color: #1c1917; font-size: 14px; font-weight: 680; }
    .turn-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 0 4px;
      color: var(--muted);
      font-size: 12px;
    }
    .turn-meta span {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      background: rgba(255, 255, 255, .18);
      border: 1px solid rgba(255, 255, 255, .14);
      padding: 7px 12px;
      line-height: 1;
      backdrop-filter: blur(12px);
    }
    .result-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }
    .result-grid.single { grid-template-columns: 1fr; }
    .result-card {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: white;
      box-shadow: 0 1px 3px rgba(28, 25, 23, .06);
    }
    .result-card.fit { width: fit-content; max-width: 100%; }
    .result-image {
      display: block;
      width: auto;
      max-width: 100%;
      max-height: 360px;
      height: auto;
      cursor: zoom-in;
    }
    .result-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      border-top: 1px solid #f5f5f4;
      padding: 12px 16px;
    }
    .action-round, .scroll-bottom {
      display: inline-flex;
      width: 36px;
      height: 36px;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: white;
      color: #57534e;
      transition: background .18s, color .18s, border-color .18s;
    }
    .action-round:hover, .scroll-bottom:hover { background: var(--soft-2); color: #0c0a09; }
    .loading-box, .error-box {
      display: flex;
      min-height: 320px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 32px 24px;
      text-align: center;
    }
    .loading-box { background: #fafaf9; color: var(--muted); }
    .error-box { background: #fff1f2; color: #e11d48; white-space: pre-line; font-size: 14px; line-height: 1.75; }
    .spinner {
      width: 20px;
      height: 20px;
      border: 2px solid #d6d3d1;
      border-top-color: #57534e;
      border-radius: 999px;
      animation: spin .75s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .composer {
      flex-shrink: 0;
      border-top: 1px solid var(--line);
      background: white;
      padding: 12px 12px 16px;
    }
    .composer-inner {
      display: flex;
      max-width: 1120px;
      margin: 0 auto;
      flex-direction: column;
      gap: 12px;
    }
    .composer-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .mode-tabs {
      display: inline-flex;
      border-radius: 999px;
      background: var(--soft-2);
      padding: 4px;
    }
    .mode-tab {
      border: 0;
      border-radius: 999px;
      background: transparent;
      padding: 9px 18px;
      color: #57534e;
      font-size: 14px;
      font-weight: 640;
      transition: background .18s, color .18s, box-shadow .18s;
    }
    .mode-tab.active { background: var(--black); color: white; box-shadow: 0 1px 2px rgba(28, 25, 23, .08); }
    .control-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
    }
    .pill-select, .count-control {
      height: 40px;
      border: 1px solid rgba(255, 255, 255, .82);
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(241,241,239,.96) 100%);
      color: #44403c;
      font-size: 14px;
      font-weight: 620;
      outline: 0;
      box-shadow: inset 5px 5px 10px rgba(199, 195, 189, .32), inset -6px -6px 12px rgba(255,255,255,.94), 0 12px 26px rgba(28, 25, 23, .05);
      transition: border-color .18s, box-shadow .18s, background .18s, transform .18s;
    }
    .pill-select {
      padding: 0 36px 0 14px;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image:
        linear-gradient(45deg, transparent 50%, #78716c 50%),
        linear-gradient(135deg, #78716c 50%, transparent 50%),
        linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(241,241,239,.96) 100%);
      background-position:
        calc(100% - 18px) calc(50% - 1px),
        calc(100% - 12px) calc(50% - 1px),
        0 0;
      background-size: 6px 6px, 6px 6px, 100% 100%;
      background-repeat: no-repeat;
    }
    .pill-select:focus, .count-control:focus-within {
      border-color: rgba(80, 120, 255, .24);
      background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(247,247,245,.98) 100%);
      box-shadow: inset 4px 4px 8px rgba(198, 194, 188, .28), inset -5px -5px 10px rgba(255,255,255,.96), 0 0 0 4px rgba(80, 120, 255, .08), 0 14px 30px rgba(28, 25, 23, .07);
    }
    .count-control {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 0 10px 0 14px;
    }
    .count-control input {
      width: 44px;
      height: 32px;
      border: 0;
      border-radius: 999px;
      background: rgba(255, 255, 255, .55);
      color: #44403c;
      text-align: center;
      font-weight: 640;
      outline: 0;
      box-shadow: inset 2px 2px 6px rgba(199, 195, 189, .22), inset -2px -2px 5px rgba(255,255,255,.72);
    }
    .quota-pill {
      display: inline-flex;
      height: 32px;
      align-items: center;
      border-radius: 999px;
      background: var(--soft-2);
      padding: 0 12px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 620;
    }
    .prompt-box {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 28px;
      background: #fafaf9;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
    }
    .source-strip {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      border-bottom: 1px solid var(--line);
      padding: 12px 16px;
    }
    .input-source {
      width: 126px;
      flex-shrink: 0;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: white;
    }
    .input-source-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #f5f5f4;
      padding: 8px 12px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 640;
    }
    .input-source-head button {
      display: inline-flex;
      width: 22px;
      height: 22px;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--faint);
    }
    .input-source-head button:hover { background: var(--soft-2); color: var(--rose); }
    .input-source img {
      display: block;
      width: 100%;
      height: 80px;
      object-fit: cover;
      background: #fafaf9;
    }
    .prompt-area {
      width: 100%;
      min-height: 112px;
      max-height: 420px;
      resize: none;
      border: 0;
      background: transparent;
      padding: 16px 18px 6px;
      color: #1c1917;
      font-size: 15px;
      line-height: 1.75;
      outline: 0;
    }
    .prompt-area::placeholder { color: var(--faint); }
    .prompt-actions {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 12px;
      padding: 8px 16px 16px;
    }
    .left-tools {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
    }
    .submit-round {
      display: inline-flex;
      width: 40px;
      height: 40px;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: 999px;
      background: var(--black);
      color: white;
      transition: background .18s;
    }
    .submit-round:hover:not(:disabled) { background: #292524; }
    .submit-round:disabled { background: #d6d3d1; }
    .scroll-bottom {
      position: absolute;
      right: 20px;
      bottom: 20px;
      z-index: 10;
      width: 44px;
      height: 44px;
      box-shadow: 0 14px 28px rgba(168, 162, 158, .3);
    }
    .toast-stack {
      position: fixed;
      top: 18px;
      left: 50%;
      z-index: 100;
      display: flex;
      width: min(440px, calc(100vw - 32px));
      transform: translateX(-50%);
      flex-direction: column;
      gap: 8px;
      pointer-events: none;
    }
    .toast {
      border: 1px solid var(--line);
      border-radius: 16px;
      background: white;
      padding: 12px 14px;
      color: #44403c;
      font-size: 14px;
      line-height: 1.5;
      box-shadow: 0 18px 50px rgba(28, 25, 23, .12);
      pointer-events: auto;
    }
    .toast.error { border-color: #fecdd3; background: #fff1f2; color: #be123c; }
    .toast.success { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
    .modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 70;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, .86);
      padding: 24px;
      backdrop-filter: blur(8px);
    }
    .api-rule-panel {
      width: min(700px, calc(100vw - 48px));
      max-height: min(760px, calc(100dvh - 48px));
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .62);
      border-radius: 32px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(245,245,243,.66) 100%),
        radial-gradient(circle at top right, rgba(80, 120, 255, .14), transparent 34%),
        radial-gradient(circle at left bottom, rgba(244, 114, 182, .12), transparent 32%);
      box-shadow: 0 28px 90px rgba(15, 23, 42, .18), inset 0 1px 0 rgba(255,255,255,.7);
      backdrop-filter: blur(22px) saturate(1.12);
      -webkit-backdrop-filter: blur(22px) saturate(1.12);
    }
    .api-rule-inner {
      display: flex;
      min-height: 0;
      max-height: min(760px, calc(100dvh - 48px));
      flex-direction: column;
    }
    .api-rule-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      padding: 24px 24px 18px;
      border-bottom: 1px solid rgba(214, 211, 209, .66);
      background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.08) 100%);
    }
    .api-rule-kicker {
      color: #4f46e5;
      font-size: 12px;
      font-weight: 760;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .api-rule-title {
      margin-top: 6px;
      color: #0c0a09;
      font-size: 28px;
      font-weight: 760;
      line-height: 1.1;
    }
    .api-rule-subtitle {
      margin-top: 10px;
      color: #57534e;
      font-size: 14px;
      line-height: 1.7;
    }
    .api-rule-body {
      display: flex;
      min-height: 0;
      flex-direction: column;
      gap: 14px;
      overflow: auto;
      padding: 20px 24px 24px;
    }
    .api-rule-card {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .72);
      border-radius: 26px;
      background: linear-gradient(180deg, rgba(255,255,255,.76) 0%, rgba(255,255,255,.52) 100%);
      padding: 18px 18px 16px;
      box-shadow: 0 18px 46px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255,255,255,.68);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
    .api-rule-card::before {
      content: "";
      position: absolute;
      inset: 0 auto auto 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, rgba(255,255,255,.88), rgba(255,255,255,0));
      pointer-events: none;
    }
    .api-rule-card.top-active {
      border-color: rgba(80, 120, 255, .22);
      box-shadow: 0 24px 54px rgba(80, 120, 255, .12), inset 0 1px 0 rgba(255,255,255,.82);
    }
    .api-rule-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .api-rule-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 30px;
      border-radius: 999px;
      background: rgba(34, 197, 94, .12);
      padding: 0 12px;
      color: #15803d;
      font-size: 12px;
      font-weight: 760;
      white-space: nowrap;
    }
    .api-rule-name {
      margin-top: 10px;
      color: #111827;
      font-size: 22px;
      font-weight: 760;
      line-height: 1.18;
    }
    .api-rule-copy {
      margin-top: 10px;
      color: #57534e;
      font-size: 14px;
      line-height: 1.78;
      white-space: pre-line;
    }
    .api-rule-foot {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      padding: 0 24px 24px;
    }
    .settings-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--line);
      padding: 18px 20px;
    }
    .settings-title { font-size: 20px; font-weight: 680; color: #0c0a09; }
    .settings-body {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      padding: 20px;
    }
    .field { display: flex; flex-direction: column; gap: 8px; }
    .field.full { grid-column: 1 / -1; }
    .field label {
      color: #57534e;
      font-size: 13px;
      font-weight: 660;
    }
    .text-input, .select-input {
      width: 100%;
      height: 44px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fafaf9;
      padding: 0 12px;
      color: #1c1917;
      outline: 0;
    }
    .text-input:focus, .select-input:focus { border-color: #a8a29e; background: white; }
    .field-help { color: var(--muted); font-size: 12px; line-height: 1.55; }
    .checkline {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      color: #57534e;
      font-size: 13px;
      line-height: 1.5;
    }
    .checkline input { margin-top: 3px; }
    .settings-foot {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      border-top: 1px solid var(--line);
      padding: 16px 20px;
    }
    .about-panel {
      width: min(560px, 100%);
      max-height: min(720px, calc(100vh - 48px));
      overflow: auto;
      border: 1px solid var(--line);
      border-radius: 28px;
      background: white;
      box-shadow: 0 24px 80px rgba(28, 25, 23, .15);
    }
    .about-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--line);
      padding: 18px 20px;
    }
    .about-title { font-size: 20px; font-weight: 680; color: #0c0a09; }
    .about-subtitle { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.5; }
    .about-body {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 20px;
      color: #44403c;
      font-size: 14px;
      line-height: 1.7;
    }
    .about-section { display: flex; flex-direction: column; gap: 8px; }
    .about-section h3 { color: var(--text); font-size: 14px; font-weight: 700; }
    .about-list { margin: 0; padding-left: 18px; }
    .about-list li + li { margin-top: 4px; }
    .about-links { display: flex; flex-direction: column; gap: 8px; }
    .about-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 46px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fafaf9;
      padding: 0 14px;
      color: var(--text);
      font-weight: 650;
    }
    .about-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .about-note {
      border-radius: 16px;
      background: #f5f5f4;
      padding: 12px 14px;
      color: var(--muted);
      font-size: 13px;
    }
    .prompt-plaza-panel {
      width: min(1420px, calc(100vw - 48px));
      max-height: min(920px, calc(100vh - 48px));
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 32px;
      background:
        radial-gradient(circle at top right, rgba(80, 120, 255, .08), transparent 30%),
        linear-gradient(180deg, #fcfcfb 0%, #f7f7f5 100%);
      box-shadow: 0 28px 90px rgba(28, 25, 23, .16);
    }
    .prompt-plaza-inner {
      display: flex;
      max-height: min(920px, calc(100vh - 48px));
      min-height: 0;
      flex-direction: column;
    }
    .prompt-plaza-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      border-bottom: 1px solid rgba(231, 229, 228, .92);
      padding: 24px 24px 20px;
    }
    .prompt-plaza-kicker {
      color: var(--blue);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .prompt-plaza-title {
      margin-top: 6px;
      font-size: 28px;
      font-weight: 720;
      color: #0c0a09;
      line-height: 1.1;
    }
    .prompt-plaza-subtitle {
      margin-top: 10px;
      max-width: 920px;
      color: #57534e;
      font-size: 14px;
      line-height: 1.7;
    }
    .prompt-plaza-tools {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      padding: 18px 24px 0;
    }
    .prompt-plaza-search {
      flex: 1;
      min-width: 280px;
      height: 46px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(255, 255, 255, .92);
      padding: 0 14px;
      color: #1c1917;
      outline: 0;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
    }
    .prompt-plaza-search:focus {
      border-color: #a8a29e;
      background: white;
    }
    .prompt-plaza-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 46px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(255, 255, 255, .9);
      padding: 0 14px;
      color: #57534e;
      font-size: 13px;
      font-weight: 620;
      white-space: nowrap;
    }
    .prompt-plaza-body {
      display: flex;
      min-height: 0;
      flex: 1;
      flex-direction: column;
      gap: 16px;
      overflow: auto;
      padding: 18px 24px 24px;
    }
    .prompt-plaza-note-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }
    .prompt-note {
      border: 1px solid rgba(214, 211, 209, .9);
      border-radius: 20px;
      background: rgba(255, 255, 255, .92);
      padding: 14px 16px;
      box-shadow: 0 10px 30px rgba(15, 23, 42, .04);
    }
    .prompt-note-title {
      color: #1c1917;
      font-size: 13px;
      font-weight: 680;
    }
    .prompt-note-copy {
      margin-top: 6px;
      color: #78716c;
      font-size: 12px;
      line-height: 1.65;
    }
    .prompt-plaza-categories {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .prompt-category-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 34px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255, 255, 255, .88);
      padding: 0 12px;
      color: #57534e;
      font-size: 12px;
      font-weight: 650;
      transition: background .18s, color .18s, border-color .18s, transform .18s;
    }
    .prompt-category-chip:hover {
      background: white;
      color: #1c1917;
    }
    .prompt-category-chip.active {
      border-color: var(--black);
      background: var(--black);
      color: white;
      box-shadow: 0 10px 24px rgba(28, 25, 23, .12);
    }
    .prompt-source-links {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      color: #78716c;
      font-size: 12px;
      line-height: 1.6;
    }
    .prompt-source-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .86);
      padding: 6px 10px;
    }
    .prompt-plaza-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }
    .prompt-card {
      display: flex;
      min-height: 0;
      flex-direction: column;
      gap: 12px;
      border: 1px solid var(--line);
      border-radius: 24px;
      background: rgba(255, 255, 255, .96);
      padding: 18px;
      box-shadow: 0 18px 40px rgba(15, 23, 42, .05);
    }
    .prompt-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }
    .prompt-card-title {
      font-size: 18px;
      font-weight: 700;
      color: #1c1917;
      line-height: 1.2;
    }
    .prompt-card-tip {
      color: #78716c;
      font-size: 13px;
      line-height: 1.65;
    }
    .prompt-card-badges, .prompt-card-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .prompt-badge, .prompt-meta-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      padding: 0 10px;
      min-height: 28px;
      font-size: 12px;
      font-weight: 650;
      line-height: 1;
    }
    .prompt-badge {
      background: #111827;
      color: white;
    }
    .prompt-badge.soft {
      background: #eef2ff;
      color: #3730a3;
    }
    .prompt-meta-chip {
      border: 1px solid var(--line);
      background: #fafaf9;
      color: #57534e;
    }
    .prompt-snippet {
      min-height: 0;
      flex: 1;
      overflow: auto;
      border: 1px solid rgba(231, 229, 228, .9);
      border-radius: 18px;
      background: #fafaf9;
      padding: 14px;
      color: #292524;
      font-size: 13px;
      line-height: 1.72;
      white-space: pre-wrap;
    }
    .prompt-card-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .prompt-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .prompt-empty {
      border: 1px dashed var(--line-2);
      border-radius: 24px;
      background: rgba(255, 255, 255, .82);
      padding: 28px 24px;
      color: #78716c;
      font-size: 14px;
      line-height: 1.8;
      text-align: center;
    }
    .editor-modal {
      position: fixed;
      inset: 0;
      z-index: 60;
      background: rgba(255, 255, 255, .95);
      backdrop-filter: blur(8px);
    }
    .editor-inner { display: flex; height: 100%; min-height: 0; flex-direction: column; }
    .editor-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      border-bottom: 1px solid var(--line);
      padding: 16px 20px;
    }
    .editor-title-wrap { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .editor-title { font-size: 20px; font-weight: 680; color: #0c0a09; }
    .editor-name {
      max-width: 420px;
      overflow: hidden;
      color: var(--muted);
      font-size: 14px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .editor-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
    .editor-main {
      display: flex;
      min-height: 0;
      flex: 1;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      overflow: hidden;
      padding: 20px 24px;
    }
    .editor-help {
      width: min(1200px, 100%);
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fafaf9;
      padding: 12px 16px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.6;
    }
    .brush-row { float: right; display: inline-flex; align-items: center; gap: 12px; margin-left: 16px; }
    .brush-row input { width: 160px; }
    .editor-frame {
      display: flex;
      width: 100%;
      min-height: 0;
      flex: 1;
      align-items: center;
      justify-content: center;
      overflow: auto;
      border: 1px solid var(--line);
      border-radius: 28px;
      background: #f8f7f4;
      padding: 24px;
    }
    .editor-image-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      max-width: 100%;
      max-height: 100%;
      overflow: hidden;
      border-radius: 16px;
    }
    .editor-image {
      display: block;
      max-width: calc(100vw - 100px);
      max-height: calc(100vh - 300px);
      width: auto;
      height: auto;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: white;
      object-fit: contain;
      box-shadow: 0 24px 70px rgba(28, 25, 23, .10);
    }
    .mask-canvas {
      position: absolute;
      border-radius: 16px;
      touch-action: none;
    }
    .mask-canvas.disabled { pointer-events: none; }
    .mask-canvas.enabled { pointer-events: auto; cursor: none; }
    .brush-cursor {
      pointer-events: none;
      position: absolute;
      border: 1px solid rgba(28, 25, 23, .45);
      border-radius: 999px;
      background: rgba(28, 25, 23, .1);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, .8);
    }
    .editor-footer {
      border-top: 1px solid var(--line);
      padding: 18px 24px;
    }
    .editor-composer {
      display: flex;
      width: min(920px, 100%);
      margin: 0 auto;
      align-items: flex-end;
      gap: 14px;
      border: 1px solid var(--line);
      border-radius: 32px;
      background: white;
      padding: 14px 16px;
      box-shadow: 0 18px 48px rgba(28, 25, 23, .08);
    }
    .editor-prompt {
      min-height: 88px;
      flex: 1;
      resize: none;
      border: 0;
      background: transparent;
      padding: 4px;
      color: #1c1917;
      font-size: 15px;
      line-height: 1.75;
      outline: 0;
    }
    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(12, 10, 9, .78);
      padding: 24px;
    }
    .lightbox img {
      max-width: 100%;
      max-height: 100%;
      border-radius: 16px;
      background: white;
      box-shadow: 0 28px 90px rgba(0, 0, 0, .35);
    }
    .hide-scrollbar { scrollbar-width: none; }
    .hide-scrollbar::-webkit-scrollbar { display: none; }
    svg { width: 1em; height: 1em; stroke-width: 2; }
    .size-3 { font-size: 14px; }
    .size-4 { font-size: 20px; }
    .size-5 { font-size: 20px; }
    @media (max-width: 1280px) {
      :root { --ui-scale: .92; }
      .app-layout { max-width: 100%; }
      .studio-grid { grid-template-columns: 280px minmax(0, 1fr); }
      .home-grid-hero {
        grid-template-columns: 1fr;
      }
      .home-hero-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .home-product-preview { grid-template-columns: minmax(0, 1fr) 220px; }
      .home-pill-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .home-card-grid, .home-showcase { grid-template-columns: 1fr; }
      .home-section-head { align-items: flex-start; flex-direction: column; }
      .home-section-head p { max-width: none; text-align: left; }
      .prompt-plaza-note-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .quick-api-bar { min-width: 0; }
      .quick-base-input { width: 210px; }
      .quick-key-input { width: 230px; }
    }
    @media (max-width: 1024px) {
      :root { --ui-scale: 1; }
      html, body {
        overflow: auto;
      }
      .ui-scale-root {
        width: 100%;
        min-height: 100%;
        height: auto;
        transform: none;
      }
      .app-shell { padding: 10px; min-height: 100dvh; height: auto; }
      .app-layout {
        max-width: 100%;
        min-height: calc(100dvh - 20px);
        height: auto;
        flex-direction: column;
        gap: 10px;
      }
      .rail {
        width: 100%;
        flex-shrink: 0;
      }
      .rail-inner {
        flex-direction: row;
        align-items: stretch;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 24px;
      }
      .rail-stack {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        gap: 8px;
      }
      .rail-item {
        min-height: auto;
        flex: 1 1 0;
      }
      .rail-btn {
        width: 100%;
        max-width: 72px;
        height: 50px;
        border-radius: 16px;
      }
      .rail-label {
        max-width: none;
        white-space: normal;
        line-height: 1.2;
      }
      .studio-grid {
        flex: 1;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto minmax(0, 1fr);
        gap: 10px;
      }
      .studio-grid.home-mode {
        grid-template-rows: 1fr;
      }
      .workspace {
        order: 2;
        min-height: 0;
      }
      .history-panel {
        order: 3;
        min-height: 0;
        max-height: 260px;
      }
      .history-head,
      .workspace-header {
        padding: 14px;
      }
      .workspace-title-row {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 10px;
      }
      .workspace-title {
        font-size: 20px;
      }
      .selected-title {
        max-width: 100%;
        order: 4;
      }
      .header-spacer {
        display: none;
      }
      .quick-api-bar {
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
      }
      .quick-base-select,
      .quick-base-input,
      .quick-key-input {
        width: auto;
        min-width: 0;
        flex: 1 1 220px;
      }
      .quick-base-select {
        min-width: 180px;
      }
      .results-wrap {
        min-height: 360px;
      }
      .turns,
      .empty-state {
        padding: 24px 16px;
      }
      .user-bundle {
        max-width: 100%;
      }
      .result-grid {
        grid-template-columns: 1fr;
      }
      .result-image {
        max-height: 420px;
        margin: 0 auto;
      }
      .composer {
        padding: 10px 10px 12px;
      }
      .composer-top {
        align-items: stretch;
        flex-direction: column;
      }
      .control-row {
        justify-content: flex-start;
      }
      .pill-select {
        flex: 1 1 160px;
        min-width: 0;
      }
      .prompt-box {
        border-radius: 24px;
      }
      .home-inner {
        padding: 16px;
        gap: 18px;
      }
      .home-title-main {
        font-size: 68px;
      }
      .home-grid-hero,
      .home-showcase,
      .home-micro-grid,
      .home-product-metrics {
        grid-template-columns: 1fr;
      }
      .home-hero-flow {
        grid-template-columns: 1fr;
      }
      .home-product-preview {
        grid-template-columns: 1fr;
        min-height: auto;
      }
      .home-preview-main {
        min-height: 280px;
      }
      .prompt-plaza-panel {
        width: calc(100vw - 28px);
        max-height: calc(100dvh - 28px);
      }
      .api-rule-panel {
        width: calc(100vw - 28px);
        max-height: calc(100dvh - 28px);
      }
      .prompt-plaza-grid {
        grid-template-columns: 1fr;
      }
      .settings-body {
        grid-template-columns: 1fr;
      }
      .field.full {
        grid-column: auto;
      }
    }
    @media (max-width: 760px) {
      .app-shell { padding: 8px; min-height: 100dvh; }
      .app-layout {
        min-height: calc(100dvh - 16px);
        gap: 8px;
      }
      .rail-inner {
        padding: 8px;
        border-radius: 20px;
      }
      .rail-stack { gap: 6px; }
      .rail-item { gap: 6px; }
      .rail-btn {
        max-width: none;
        width: 100%;
        height: 46px;
      }
      .rail-label {
        font-size: 10px;
      }
      .workspace,
      .history-panel {
        border-radius: 22px;
      }
      .history-panel {
        max-height: 220px;
      }
      .history-actions {
        flex-wrap: wrap;
      }
      .history-actions .btn {
        flex: 1 1 0;
      }
      .workspace-header {
        padding: 12px;
      }
      .workspace-title-row {
        gap: 8px;
      }
      .workspace-title {
        width: 100%;
        order: 2;
        font-size: 18px;
      }
      .selected-title {
        width: 100%;
      }
      .quick-api-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        align-items: stretch;
        order: 5;
      }
      .quick-base-select,
      .quick-base-input,
      .quick-key-input {
        min-width: 0;
        width: 100%;
        flex: none;
        height: 38px;
      }
      .quick-base-select,
      .quick-base-input,
      .quick-key-input {
        grid-column: 1 / -1;
      }
      .quick-remember,
      .key-state {
        height: 38px;
      }
      .results-wrap {
        min-height: 300px;
      }
      .turns,
      .empty-state {
        padding: 18px 12px;
      }
      .source-row {
        justify-content: flex-start;
      }
      .source-card {
        width: 112px;
      }
      .source-card img {
        height: 84px;
      }
      .prompt-group {
        align-items: stretch;
      }
      .prompt-bubble {
        padding: 14px 16px;
        font-size: 14px;
        line-height: 1.68;
      }
      .turn-meta {
        gap: 6px;
      }
      .composer-inner {
        gap: 10px;
      }
      .mode-tabs {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .mode-tab {
        padding: 10px 8px;
      }
      .control-row {
        gap: 6px;
      }
      .pill-select,
      .count-control {
        flex: 1 1 calc(50% - 6px);
        width: 100%;
      }
      .quota-pill {
        width: 100%;
        justify-content: center;
      }
      .prompt-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
      }
      .left-tools {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .left-tools .btn {
        flex: 1 1 calc(50% - 8px);
      }
      .submit-round {
        width: 44px;
        height: 44px;
        align-self: flex-end;
      }
      .home-inner {
        padding: 12px;
        gap: 16px;
      }
      .home-hero {
        padding: 18px;
        border-radius: 24px;
      }
      .home-title-wrap {
        padding: 14px 14px 16px;
      }
      .home-title-eyebrow {
        font-size: 22px;
      }
      .home-title-main {
        font-size: clamp(38px, 14vw, 52px);
      }
      .home-copy {
        font-size: 15px;
      }
      .home-hero-flow,
      .home-pill-row,
      .home-card-grid,
      .home-showcase,
      .home-micro-grid,
      .home-product-metrics,
      .prompt-plaza-note-grid,
      .prompt-plaza-grid {
        grid-template-columns: 1fr;
      }
      .home-flow-step {
        min-height: auto;
        padding: 16px;
      }
      .home-product-panel {
        padding: 18px;
        border-radius: 24px;
      }
      .home-product-title {
        font-size: 22px;
      }
      .home-preview-main {
        min-height: 220px;
      }
      .home-preview-side {
        padding: 14px;
      }
      .home-pill {
        min-height: 64px;
        padding: 0 14px;
        font-size: 13px;
      }
      .home-card,
      .home-showcase-card {
        padding: 18px;
        border-radius: 22px;
      }
      .home-section-title {
        font-size: 24px;
      }
      .home-cta-row {
        flex-direction: column;
        align-items: stretch;
      }
      .home-cta-primary,
      .home-cta-secondary,
      .home-stat-chip {
        width: 100%;
        justify-content: center;
      }
      .prompt-plaza-head {
        padding: 16px 16px 14px;
      }
      .prompt-plaza-tools,
      .prompt-plaza-body {
        padding-left: 16px;
        padding-right: 16px;
      }
      .prompt-plaza-title {
        font-size: 20px;
      }
      .prompt-plaza-search {
        min-width: 100%;
      }
      .api-rule-head {
        padding: 18px 18px 14px;
      }
      .api-rule-title {
        font-size: 22px;
      }
      .api-rule-body {
        padding: 16px 18px 18px;
      }
      .api-rule-foot {
        padding: 0 18px 18px;
      }
      .api-rule-card {
        padding: 16px;
        border-radius: 22px;
      }
      .prompt-card {
        padding: 14px;
        border-radius: 20px;
      }
      .editor-header {
        align-items: flex-start;
        flex-direction: column;
      }
      .editor-actions {
        justify-content: flex-start;
      }
      .editor-main {
        padding: 12px;
      }
      .editor-footer {
        padding: 12px;
      }
      .editor-composer {
        flex-direction: column;
        align-items: stretch;
        border-radius: 24px;
      }
      .editor-image {
        max-width: calc(100vw - 48px);
        max-height: calc(100dvh - 360px);
      }
    }
    @media (max-width: 480px) {
      .studio-grid {
        gap: 8px;
      }
      .history-panel {
        max-height: 200px;
      }
      .history-item {
        padding: 6px;
      }
      .history-text {
        padding: 8px 10px;
      }
      .thumb {
        width: 48px;
        height: 48px;
      }
      .rail-inner {
        padding: 8px 6px;
      }
      .rail-stack {
        gap: 4px;
      }
      .rail-btn {
        height: 42px;
        border-radius: 14px;
      }
      .quick-api-bar {
        grid-template-columns: 1fr;
      }
      .quick-remember,
      .key-state {
        min-width: 0;
        width: 100%;
        justify-content: center;
      }
      .composer {
        padding: 8px 8px 10px;
      }
      .pill-select,
      .count-control {
        flex-basis: 100%;
      }
      .left-tools .btn {
        flex-basis: 100%;
      }
      .submit-round {
        width: 100%;
        border-radius: 16px;
      }
      .prompt-box {
        border-radius: 20px;
      }
      .prompt-area {
        min-height: 96px;
        font-size: 14px;
        padding: 14px 14px 4px;
      }
      .prompt-actions {
        padding: 8px 12px 12px;
      }
      .source-strip {
        padding: 10px 12px;
        gap: 8px;
      }
      .input-source,
      .source-card {
        width: 100px;
      }
      .input-source img,
      .source-card img {
        height: 72px;
      }
      .result-actions {
        padding: 10px 12px;
      }
      .scroll-bottom {
        right: 12px;
        bottom: 12px;
      }
      .home-title-wrap {
        padding: 14px;
      }
      .home-title-eyebrow {
        font-size: 18px;
      }
      .home-title-main {
        font-size: clamp(34px, 13vw, 44px);
      }
      .home-copy {
        padding: 12px 14px;
        font-size: 14px;
      }
      .home-card-title,
      .home-showcase-title,
      .home-section-title {
        font-size: 20px;
      }
      .prompt-plaza-panel {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
        border-radius: 24px;
      }
      .api-rule-panel {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
        border-radius: 24px;
      }
      .prompt-plaza-head,
      .prompt-plaza-tools,
      .prompt-plaza-body {
        padding-left: 12px;
        padding-right: 12px;
      }
      .prompt-plaza-body {
        padding-bottom: 16px;
      }
      .api-rule-head {
        padding: 16px 14px 12px;
      }
      .api-rule-title {
        font-size: 18px;
      }
      .api-rule-subtitle {
        font-size: 13px;
      }
      .api-rule-body {
        padding: 14px;
        gap: 10px;
      }
      .api-rule-card-head {
        flex-direction: column;
        align-items: flex-start;
      }
      .api-rule-name {
        margin-top: 8px;
        font-size: 18px;
      }
      .api-rule-copy {
        font-size: 13px;
        line-height: 1.7;
      }
      .api-rule-foot {
        padding: 0 14px 14px;
      }
      .prompt-plaza-card-title,
      .prompt-card-title {
        font-size: 16px;
      }
      .editor-help {
        font-size: 13px;
      }
      .brush-row {
        float: none;
        display: flex;
        width: 100%;
        margin: 10px 0 0;
      }
      .brush-row input {
        flex: 1;
        width: auto;
      }
      .editor-image {
        max-width: calc(100vw - 32px);
      }
    }