:root { --bg:#f5f5f0; --ink:#101114; --muted:#6b6e76; --paper:#fff; --line:#d9d9d2; --violet:#7157ff; --lime:#d7ff58; --orange:#ff7855; --shadow:0 24px 70px rgba(20,20,24,.12) }
* { box-sizing:border-box }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif }
.i2i-wrap { width:min(1180px,calc(100% - 32px)); margin:auto }
.i2i-hero { padding:68px 0 44px; overflow:hidden }
.i2i-hero-grid { display:grid; grid-template-columns:.88fr 1.12fr; gap:52px; align-items:center }
.eyebrow {
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:1px solid var(--line);
    border-radius:999px;
    padding:8px 12px;
    background:rgba(255,255,255,.65);
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase
}
.eyebrow i { width:8px; height:8px; border-radius:50%; background:var(--violet); box-shadow:0 0 0 5px rgba(113,87,255,.14) }
h1 { font-size:clamp(48px,6.2vw,88px); line-height:.94; letter-spacing:-.065em; margin:24px 0 22px; max-width:690px }
.i2i-lead { font-size:18px; line-height:1.72; color:var(--muted); max-width:610px }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px }
.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:50px;
    padding:0 22px;
    border-radius:14px;
    border:1px solid var(--ink);
    font-weight:800;
    text-decoration:none;
    color:var(--ink);
    background:transparent;
    cursor:pointer
}
.btn.primary { background:var(--ink); color:white }
.btn:hover { transform:translateY(-2px) }
.orbit-stage { position:relative; min-height:590px }
.orbit-core {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:min(74%,480px);
    aspect-ratio:1;
    border-radius:44px;
    background:#111;
    box-shadow:var(--shadow);
    overflow:hidden;
    border:8px solid #fff
}
.orbit-core img { width:100%; height:100%; object-fit:cover; display:block }
.orbit-core:after {
    content:"REMIXED";
    position:absolute;
    right:14px;
    bottom:14px;
    background:var(--lime);
    color:#111;
    padding:8px 11px;
    border-radius:999px;
    font:800 11px/1 system-ui;
    letter-spacing:.1em
}
.orbit-ring { position:absolute; inset:7%; border:1px dashed rgba(16,17,20,.22); border-radius:50%; animation:spin 28s linear infinite }
.orbit-ring.two { inset:20%; animation-direction:reverse; animation-duration:20s }
.source-chip {
    position:absolute;
    width:126px;
    padding:9px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:22px;
    box-shadow:0 15px 38px rgba(20,20,24,.13);
    z-index:2
}
.source-chip img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:15px; display:block }
.source-chip b { display:block; font-size:11px; margin-top:7px }
.chip-a { left:2%; top:9%; transform:rotate(-7deg) }
.chip-b { right:0; top:23%; transform:rotate(7deg) }
.chip-c { left:5%; bottom:8%; transform:rotate(5deg) }
.orbit-note {
    position:absolute;
    right:2%;
    bottom:8%;
    width:180px;
    background:var(--violet);
    color:white;
    padding:18px;
    border-radius:22px;
    box-shadow:var(--shadow);
    font-size:13px;
    line-height:1.45
}
.orbit-note strong { display:block; font-size:18px; margin-bottom:5px }
@keyframes spin {
    to { transform:rotate(360deg) }
}
.section { padding:64px 0 }
.section-head { display:flex; justify-content:space-between; gap:24px; align-items:end; margin-bottom:28px }
.section-head h2 { font-size:clamp(34px,4vw,58px); line-height:1; letter-spacing:-.045em; margin:0 }
.section-head p { max-width:560px; color:var(--muted); line-height:1.65; margin:0 }
.remix-builder { background:#111; color:#fff; border-radius:38px; padding:28px; box-shadow:var(--shadow) }
.mode-rail { display:flex; gap:8px; overflow:auto; padding-bottom:16px }
.mode-pill { border:1px solid #333; background:#1a1a1d; color:#c9c9cf; border-radius:999px; padding:11px 16px; white-space:nowrap; font-weight:750; cursor:pointer }
.mode-pill.active { background:var(--lime); color:#111; border-color:var(--lime) }
.builder-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:24px }
.source-board { display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.drop-tile {
    position:relative;
    min-height:200px;
    border:1px dashed #57575f;
    border-radius:24px;
    background:#17171a;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:18px;
    overflow:hidden;
    cursor:pointer
}
.drop-tile input { display:none }
.drop-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none }
.drop-tile.has img { display:block }
.drop-tile.has .drop-copy { display:none }
.drop-copy b { display:block; font-size:16px }
.drop-copy small { color:#94949e }
.instruction-panel { background:#fff; color:#111; border-radius:27px; padding:22px }
.instruction-panel textarea { width:100%; min-height:128px; border:0; outline:0; resize:vertical; font:600 17px/1.55 inherit }
.quick-row { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 }
.quick { border:1px solid #ddd; border-radius:999px; background:#fafafa; padding:8px 11px; font-size:12px; font-weight:750; cursor:pointer }
.settings { display:grid; grid-template-columns:repeat(3,1fr); gap:10px }
.settings select { width:100%; padding:12px; border:1px solid #ddd; border-radius:12px; background:white }
.builder-go { width:100%; margin-top:14px; border:0; border-radius:16px; background:var(--violet); color:#fff; padding:16px; font-weight:850; font-size:16px; cursor:pointer }
.use-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px }
.use-card { background:#fff; border:1px solid var(--line); border-radius:24px; padding:20px; min-height:190px; position:relative; overflow:hidden }
.use-card .num { font-size:12px; font-weight:900; color:var(--violet) }
.use-card h3 { font-size:23px; letter-spacing:-.03em; margin:38px 0 8px }
.use-card p { color:var(--muted); line-height:1.55; font-size:14px }
.use-card:nth-child(2) { background:var(--lime) }
.use-card:nth-child(3) { background:#19191c; color:#fff }
.use-card:nth-child(3) p { color:#aaa }
.cases { display:grid; grid-template-columns:repeat(2,1fr); gap:18px }
.case { background:#fff; border-radius:28px; border:1px solid var(--line); padding:14px }
.case-media { display:grid; grid-template-columns:92px 1fr; gap:10px; min-height:340px }
.case-sources { display:flex; flex-direction:column; gap:8px }
.case-sources img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:15px }
.case-result { width:100%; height:100%; object-fit:cover; border-radius:20px }
.case-copy { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:14px 4px 4px }
.case-copy h3 { margin:0; font-size:18px }
.case-copy button { border:0; background:#eee; border-radius:999px; padding:9px 12px; font-weight:800; cursor:pointer }
.manifesto { background:var(--orange); border-radius:40px; padding:46px; display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center }
.manifesto h2 { font-size:clamp(40px,5vw,70px); line-height:.95; letter-spacing:-.055em; margin:0 }
.manifesto p { font-size:18px; line-height:1.7 }
.faq { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.faq details { background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px }
.faq summary { font-weight:800; cursor:pointer }
.faq p { color:var(--muted); line-height:1.6 }
.creator-shell { padding:52px 0 80px }
.creator-top { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:20px }
.creator-top h1 { font-size:clamp(38px,5vw,68px); margin:0 }
.canvas-shell { background:#121214; color:white; border-radius:32px; padding:18px; box-shadow:var(--shadow) }
.canvas-toolbar { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:4px 4px 16px; flex-wrap:wrap }
.tool-tabs { display:flex; gap:7px }
.tool-tabs button { border:1px solid #38383d; background:#1c1c20; color:#bbb; padding:9px 13px; border-radius:999px; font-weight:750 }
.tool-tabs button.active { background:var(--lime); color:#111 }
.canvas-grid { display:grid; grid-template-columns:260px 1fr 320px; gap:14px }
.canvas-panel { background:#1b1b1f; border:1px solid #303037; border-radius:22px; padding:15px }
.canvas-sources .mini-upload {
    height:150px;
    border:1px dashed #555;
    border-radius:18px;
    margin-bottom:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#aaa;
    text-align:center;
    position:relative;
    overflow:hidden
}
.canvas-sources input { display:none }
.canvas-sources img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none }
.mini-upload.has img { display:block }
.mini-upload.has span { display:none }
.canvas-preview {
    min-height:620px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
    background:radial-gradient(circle at 50% 40%,#2c2c34,#141416 68%);
    border-radius:22px
}
.preview-empty { text-align:center; color:#8e8e98 }
.preview-empty strong { display:block; color:white; font-size:28px; margin-bottom:8px }
.canvas-control label { display:block; font-size:12px; color:#999; margin:14px 0 7px; font-weight:800; text-transform:uppercase; letter-spacing:.07em }
.canvas-control textarea,.canvas-control select { width:100%; border:1px solid #3b3b42; background:#121215; color:white; border-radius:13px; padding:12px }
.canvas-control textarea { min-height:150px; resize:vertical }
.canvas-control .generate { width:100%; border:0; background:var(--violet); color:white; border-radius:15px; padding:15px; margin-top:15px; font-weight:850 }
.status-note { font-size:12px; color:#aaa; line-height:1.5; margin-top:12px }
@media(max-width:900px) {
    .i2i-hero-grid,.builder-grid,.manifesto { grid-template-columns:1fr }
    .orbit-stage { min-height:520px }
    .use-grid { grid-template-columns:repeat(2,1fr) }
    .cases { grid-template-columns:1fr }
    .canvas-grid { grid-template-columns:1fr }
    .canvas-preview { min-height:430px }
    .canvas-sources { display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
    .canvas-sources .mini-upload { height:120px }
    .creator-top { align-items:start; flex-direction:column }
}
@media(max-width:600px) {
    .i2i-wrap { width:min(100% - 20px,1180px) }
    .i2i-hero { padding-top:42px }
    .orbit-stage { min-height:430px }
    .orbit-core { width:72%; border-radius:30px }
    .source-chip { width:88px; padding:6px; border-radius:15px }
    .orbit-note { width:140px; padding:12px }
    .source-board { grid-template-columns:repeat(3,1fr) }
    .drop-tile { min-height:126px; padding:8px }
    .drop-copy b { font-size:12px }
    .drop-copy small { display:none }
    .settings { grid-template-columns:1fr }
    .use-grid { grid-template-columns:1fr }
    .case-media { min-height:260px }
    .manifesto { padding:28px }
    .faq { grid-template-columns:1fr }
    .canvas-sources .mini-upload { height:92px }
    .canvas-shell { padding:10px }
    .canvas-preview { min-height:360px }
}


/* direct result rendering */
.drop-tile{transition:.2s ease}
.drop-tile:hover{border-color:#7c7cf8;background:#1a1b22}
.drop-tile .tile-clear{position:absolute;top:10px;right:10px;width:30px;height:30px;border:0;border-radius:999px;background:rgba(10,10,13,.76);color:#fff;font-weight:900;font-size:18px;display:none;align-items:center;justify-content:center;cursor:pointer;z-index:3;box-shadow:0 10px 24px rgba(0,0,0,.22)}
.drop-tile.has .tile-clear{display:flex}
.instruction-panel{display:flex;flex-direction:column}
.instruction-panel textarea{background:#cfe3cf;border-radius:12px;padding:14px 16px}
.builder-go[disabled]{opacity:.68;cursor:not-allowed}
.remix-inline-status{margin-top:10px;font-size:12px;line-height:1.45;color:#5d5d66;font-weight:650}
.remix-output-panel{grid-column:1 / -1;margin-top:18px;background:#0f1015;color:#fff;border-radius:30px;padding:18px;box-shadow:var(--shadow)}
.remix-output-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;padding:6px 2px 16px}
.remix-output-head small{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:#a7abc2;font-weight:900;margin-bottom:6px}
.remix-output-head h3{margin:0;font-size:clamp(26px,3vw,38px);letter-spacing:-.045em;line-height:1.02}
.remix-output-head p{margin:8px 0 0;color:#a9adbd;font-size:14px;line-height:1.65}
.remix-output-actions{display:flex;gap:10px;flex-wrap:wrap}
.remix-output-actions button{border:1px solid #363742;background:#181922;color:#fff;border-radius:999px;padding:10px 14px;font-weight:800;cursor:pointer}
.remix-output-actions button[hidden]{display:none!important}
.remix-result-zone{min-height:280px}
.remix-result-empty{position:relative;min-height:220px;border:1px dashed #363842;border-radius:24px;background:radial-gradient(circle at 18% 22%,rgba(130,128,255,.15),transparent 24%),radial-gradient(circle at 80% 78%,rgba(200,255,90,.13),transparent 24%),linear-gradient(135deg,#151720,#101116);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:26px;overflow:hidden}
.remix-result-empty strong{display:block;font-size:24px;letter-spacing:-.04em;line-height:1.08}
.remix-result-empty span{display:block;max-width:580px;margin-top:10px;color:#aab0c2;font-size:14px;line-height:1.65}
.remix-empty-glow{position:absolute;right:-40px;bottom:-50px;width:180px;height:180px;border-radius:50%;background:rgba(119,104,255,.16);filter:blur(28px)}
.remix-result-grid{display:grid;gap:14px;align-items:stretch}
.remix-result-grid[hidden]{display:none!important}
.remix-result-grid[data-count="1"]{grid-template-columns:minmax(260px,360px);justify-content:center}
.remix-result-grid[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.remix-result-grid[data-count="3"],.remix-result-grid[data-count="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.remix-result-card{position:relative;display:flex;flex-direction:column;border-radius:28px;overflow:hidden;background:#191a22;border:1px solid #2c2e3c;min-height:330px;aspect-ratio:9/16}
.remix-result-card.single{max-width:360px}
.remix-result-media{position:relative;flex:1;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#1f202b,#13141b)}
.remix-result-media img{width:100%;height:100%;object-fit:cover;background:#111}
.remix-result-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;background:linear-gradient(180deg,rgba(8,9,12,.88),rgba(9,10,15,.75));padding:18px;z-index:2}
.remix-result-placeholder[hidden]{display:none!important}
.remix-result-placeholder .ph{max-width:210px}
.remix-result-placeholder .spinner{width:44px;height:44px;border:3px solid rgba(255,255,255,.16);border-top-color:#fff;border-radius:50%;animation:i2iSpin .9s linear infinite;margin:0 auto 14px}
.remix-result-placeholder strong{display:block;font-size:22px;letter-spacing:-.04em;line-height:1.05}
.remix-result-placeholder span{display:block;margin-top:8px;color:#cfd2df;font-size:13px;line-height:1.5}
.remix-result-card.failed .remix-result-placeholder{background:linear-gradient(180deg,rgba(52,16,24,.93),rgba(28,12,17,.88))}
.remix-result-foot{position:absolute;right:12px;bottom:12px;display:flex;gap:8px;z-index:3}
.remix-icon-btn{width:44px;height:44px;border:0;border-radius:999px;background:rgba(250,250,252,.96);color:#111;font-size:18px;font-weight:900;display:grid;place-items:center;cursor:pointer;box-shadow:0 12px 25px rgba(0,0,0,.22)}
.remix-icon-btn[hidden]{display:none!important}
@keyframes i2iSpin{to{transform:rotate(360deg)}}
@media(max-width:1100px){.remix-result-grid[data-count="3"],.remix-result-grid[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.remix-output-panel{padding:14px}.remix-result-grid[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.remix-output-panel{border-radius:24px}.remix-result-grid[data-count="1"]{grid-template-columns:1fr}.remix-result-grid,.remix-result-grid[data-count="2"],.remix-result-grid[data-count="3"],.remix-result-grid[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}.remix-result-card{border-radius:22px;min-height:250px}.remix-result-grid[data-count="1"] .remix-result-card{grid-column:1/-1;max-width:320px;justify-self:center}.remix-output-head h3{font-size:24px}}


/* 1-6 source image strip layout: desktop always 3 columns */
.source-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-content:start}
.source-board .drop-tile{aspect-ratio:9/16;min-height:0;max-height:460px;border-radius:24px}
.source-board .drop-tile.is-empty-tail{display:none}
.source-board::after{display:none!important}
.remix-add-source{appearance:none;color:#d4d4dc;font:inherit}
.remix-add-source .drop-copy b{font-size:34px;line-height:1}
.remix-add-source[hidden]{display:none!important}
@media(max-width:900px){
  .source-board{grid-template-columns:repeat(3,minmax(0,1fr))}
  .source-board .drop-tile{max-height:none}
}
@media(max-width:600px){
  .source-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .source-board .drop-tile{border-radius:18px}
}


/* v5 layout tuning */
.builder-grid{align-items:stretch}
.source-board{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  align-self:stretch;
  align-content:stretch;
  height:100%;
  margin-block:0;
}
.source-board .drop-tile{
  aspect-ratio:auto;
  min-height:430px;
  height:100%;
  max-height:none;
  border-radius:24px;
}
.source-board[data-count="0"] .drop-tile,
.source-board[data-count="1"] .drop-tile,
.source-board[data-count="2"] .drop-tile{min-height:412px}
.settings{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  margin-top:12px;
}
.setting-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.setting-field span{
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#666a73;
  line-height:1;
  padding-left:2px;
}
.setting-field select,
.settings select{
  width:100%;
  min-width:0;
  height:42px;
  padding:0 34px 0 12px;
  border:1px solid #dbdde5;
  border-radius:12px;
  background:#fff;
  color:#111318;
  font:700 14px/1.1 inherit;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23212631' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:14px 14px;
}
.setting-field select:focus{outline:none;border-color:#8d82ff;box-shadow:0 0 0 3px rgba(141,130,255,.14)}
@media(max-width:900px){
  .source-board .drop-tile{min-height:280px}
  .settings{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .setting-field span{font-size:9px}
  .setting-field select{height:40px;padding:0 28px 0 10px;font-size:12px;background-position:right 9px center}
}
@media(max-width:600px){
  .source-board{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin-block:20px;
  }
  .source-board .drop-tile{
    min-height:196px;
    border-radius:18px;
  }
  .drop-copy b{font-size:13px}
  .drop-copy small{display:block;font-size:11px}
  .settings{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
}


/* v6 micro refinements */
.source-board .drop-copy{
  position:relative;
  z-index:1;
  display:flex;
  min-height:86px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:10px 6px;
  line-height:1.2;
}
.source-board .drop-copy b{
  font-size:16px;
  font-weight:850;
  letter-spacing:-.01em;
}
.source-board .drop-copy small{
  font-size:12px;
  color:#a7a9b4;
}
.source-board[data-count="0"] .drop-tile,
.source-board[data-count="1"] .drop-tile,
.source-board[data-count="2"] .drop-tile{
  min-height:438px;
}
@media(max-width:900px){
  .source-board[data-count="0"] .drop-tile,
  .source-board[data-count="1"] .drop-tile,
  .source-board[data-count="2"] .drop-tile{
    min-height:305px;
  }
}
@media(max-width:600px){
  .source-board{
    margin-top:20px;
    margin-bottom:20px;
  }
  .source-board .drop-tile,
  .source-board[data-count="0"] .drop-tile,
  .source-board[data-count="1"] .drop-tile,
  .source-board[data-count="2"] .drop-tile{
    min-height:214px;
  }
  .source-board .drop-copy{
    min-height:72px;
    gap:3px;
    padding:8px 4px;
  }
  .source-board .drop-copy b{
    font-size:13px;
  }
  .source-board .drop-copy small{
    display:block;
    font-size:10px;
  }
  .settings{
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:7px;
  }
  .setting-field:nth-child(1),
  .setting-field:nth-child(2),
  .setting-field:nth-child(3){
    grid-column:span 2;
  }
  .setting-field:nth-child(4),
  .setting-field:nth-child(5){
    grid-column:span 3;
  }
  .setting-field select{
    height:39px;
    padding-left:9px;
    padding-right:27px;
    font-size:12px;
  }
}


/* v7 source visibility and proportion fix */
.source-board .drop-tile[hidden]{display:none!important}
.source-board[data-visible="3"]{grid-template-rows:1fr}
.source-board[data-visible="3"] .drop-tile{min-height:438px;height:100%}
.source-board[data-visible="4"],
.source-board[data-visible="5"],
.source-board[data-visible="6"]{grid-template-rows:repeat(2,minmax(0,1fr))}
.source-board[data-visible="4"] .drop-tile,
.source-board[data-visible="5"] .drop-tile,
.source-board[data-visible="6"] .drop-tile{min-height:218px;height:auto}
@media(max-width:900px){
  .source-board[data-visible="3"] .drop-tile{min-height:305px}
  .source-board[data-visible="4"] .drop-tile,
  .source-board[data-visible="5"] .drop-tile,
  .source-board[data-visible="6"] .drop-tile{min-height:190px}
}
@media(max-width:600px){
  .source-board[data-visible="3"] .drop-tile{min-height:214px}
  .source-board[data-visible="4"] .drop-tile,
  .source-board[data-visible="5"] .drop-tile,
  .source-board[data-visible="6"] .drop-tile{min-height:188px}
}

/* v8 control simplification */
.mode-rail,.quick-row{display:none!important}
.instruction-panel{gap:12px}
.panel-note{font-size:12px;line-height:1.45;color:#70747f;margin-top:2px}
.prompt-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px}
.prompt-head small{font-size:11px;font-weight:850;letter-spacing:.1em;text-transform:uppercase;color:#666a73}
.sample-btn{border:1px solid #d6d9e3;background:#fff;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:800;cursor:pointer;color:#151821}
.sample-btn:hover{border-color:#9d93ff;color:#5c49ff}
.remix-credit{margin-top:10px;font-size:13px;line-height:1.45;color:#2f3340;font-weight:700}
.remix-credit a{color:#5c49ff;text-decoration:none;font-weight:800}
.remix-settings-grid,
.settings{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:0;
}
.setting-field{min-width:0}
.setting-field span{font-size:10px;letter-spacing:.09em;color:#6d717d}
.setting-field select,
.settings select{
  height:40px;
  border-radius:10px;
  border:1px solid #d9dce6;
  padding:0 30px 0 10px;
  font-size:13px;
  font-weight:700;
}
.builder-go{margin-top:2px}
@media(max-width:900px){
  .remix-settings-grid,
  .settings{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
  .setting-field select,.settings select{font-size:12px;padding:0 28px 0 9px}
}
@media(max-width:600px){
  .remix-settings-grid,
  .settings{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .instruction-panel{padding:18px}
}


/* v8.1 micro tune */
.builder-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:22px}
.source-board{gap:14px}
.instruction-panel{padding:20px 20px 18px;border:1px solid rgba(12,16,30,.08);box-shadow:0 18px 36px rgba(24,28,40,.08)}
.remix-settings-grid{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:8px;row-gap:9px}
.remix-settings-grid .setting-field:nth-child(5){grid-column:1 / span 2}
.remix-settings-grid .setting-field:nth-child(6){grid-column:3 / span 2}
.setting-field span{margin-bottom:5px;display:block}
.setting-field select{height:38px;border-radius:9px;padding:0 28px 0 10px;font-size:12.5px;background:#fff}
.panel-note{font-size:11.5px;color:#7a7f89;margin-top:-2px}
.prompt-head{margin-top:2px}
.instruction-panel textarea{min-height:108px;border:1px solid rgba(138,160,136,.24);font-size:15px;line-height:1.5}
#modeHint{font-size:11.5px;line-height:1.45;color:#70747f;margin-top:-4px}
.builder-go{height:50px;border-radius:14px;font-size:15px;margin-top:0}
.remix-credit{margin-top:8px;padding-top:8px;border-top:1px solid #eceef4;font-size:12.5px}
.remix-inline-status{margin-top:4px;font-size:11.5px;color:#696e78}
.remix-output-panel{margin-top:20px}
@media(max-width:900px){.builder-grid{grid-template-columns:1fr;gap:18px}.remix-settings-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.remix-settings-grid .setting-field:nth-child(5){grid-column:1 / span 2}.remix-settings-grid .setting-field:nth-child(6){grid-column:3 / span 2}}
@media(max-width:600px){.instruction-panel{padding:17px 16px}.remix-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.remix-settings-grid .setting-field:nth-child(5),.remix-settings-grid .setting-field:nth-child(6){grid-column:auto}.instruction-panel textarea{min-height:96px}.builder-go{height:48px}.remix-credit{font-size:12px}}

/* v8.2 compact product panel */
.builder-grid{align-items:start;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:20px}
.instruction-panel{padding:16px 17px 15px;gap:9px;border-radius:24px}
.remix-settings-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.remix-settings-grid .setting-field:nth-child(5),
.remix-settings-grid .setting-field:nth-child(6),
.remix-settings-grid .setting-field:nth-child(7){grid-column:auto}
.setting-field span{margin-bottom:3px;font-size:9px;letter-spacing:.08em}
.setting-field select{height:36px;border-radius:9px;padding:0 27px 0 9px;font-size:12px;background-position:right 8px center}
.prompt-head{margin-top:1px}
.prompt-head small{font-size:10px}
.sample-btn{padding:6px 11px;font-size:11px}
.instruction-panel textarea{min-height:82px;max-height:132px;padding:11px 13px;font-size:14px;line-height:1.45;border-radius:11px}
.builder-go{height:46px;padding:0 14px;border-radius:12px;font-size:14px}
.remix-meta-row{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding-top:8px;border-top:1px solid #eceef4}
.remix-credit,.remix-inline-status{margin:0;padding:0;border:0;font-size:11.5px;line-height:1.4}
.remix-inline-status{text-align:right;color:#6e7380}
.source-board[data-visible="3"] .drop-tile,
.source-board[data-count="0"] .drop-tile,
.source-board[data-count="1"] .drop-tile,
.source-board[data-count="2"] .drop-tile{min-height:365px;height:365px}
.source-board[data-visible="4"] .drop-tile,
.source-board[data-visible="5"] .drop-tile,
.source-board[data-visible="6"] .drop-tile{min-height:180px}
@media(max-width:900px){
  .builder-grid{grid-template-columns:1fr;gap:16px}
  .source-board[data-visible="3"] .drop-tile{min-height:285px;height:285px}
  .remix-settings-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:600px){
  .instruction-panel{padding:14px}
  .remix-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .source-board[data-visible="3"] .drop-tile{min-height:205px;height:205px}
  .source-board[data-visible="4"] .drop-tile,
  .source-board[data-visible="5"] .drop-tile,
  .source-board[data-visible="6"] .drop-tile{min-height:176px}
  .remix-meta-row{grid-template-columns:1fr;gap:3px}
  .remix-inline-status{text-align:left}
}

/* Tool67 image-page dark compatibility patch — visual only */
html[data-theme="dark"],body.dark{--bg:#0b0e13;--ink:#f4f6f8;--muted:#a3acb8;--paper:#0b0e13;--line:#303846;--shadow:0 18px 48px rgba(0,0,0,.28);}
body.dark .source-chip,body.dark .instruction-panel,body.dark .use-card,body.dark .case,body.dark .faq details,body.dark .setting-field select,body.dark .settings select,body.dark .sample-btn{background:#151a22!important;border-color:#303846!important;color:#e5e7eb;}
body.dark input,body.dark select,body.dark textarea{background-color:#111722;color:#e5e7eb;border-color:#303846;}
body.dark input::placeholder,body.dark textarea::placeholder{color:#7f8a99;}

/* Tool67 targeted dark correction */
body.dark .i2i-hero,body.dark .i2i-library,body.dark .i2i-how,body.dark .i2i-faq{background:transparent;color:var(--ink);}
body.dark .eyebrow{background:rgba(21,26,34,.78);}
body.dark .i2i-lead,body.dark .i2i-how p,body.dark .i2i-faq p{color:var(--muted);}