:root {
  --ink: #3f2d22;
  --muted: #806e5e;
  --paper: #f7eddc;
  --panel: #fffaf0;
  --line: #decbb2;
  --acid: #c9864f;
  --acid-dark: #79502f;
  --orange: #b96f40;
  --sand: #ead8bf;
  --cream: #fff7e8;
  --toast: #e7b978;
  --shadow: 0 18px 55px rgba(77, 51, 31, 0.10);
}

* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
html[data-theme="night"] { color-scheme: dark; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 72% 4%, rgba(206, 118, 89, 0.10), transparent 30rem),
    var(--paper);
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  min-width: 320px;
}
body.has-modal { overflow: hidden; }
button, input, select { font: inherit; }
button { color: inherit; }
a { color: inherit; }

.topbar {
  height: 76px;
  padding: 0 3vw;
  border-bottom: 1px solid rgba(24, 32, 25, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(247, 237, 220, 0.90);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; color: var(--acid-dark); border: 1px solid #dbcabe; border-radius: 13px; background: rgba(255,255,255,.72); box-shadow: 0 5px 16px rgba(90,61,45,.07); }
.brand-mark svg { width: 35px; height: 35px; overflow: visible; }
.brand-mark path, .brand-mark circle { stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.brand-mark .logo-panel { fill: #f3d5c7; }
.brand-mark .logo-panel:nth-child(2) { fill: #f9e8df; }
.brand-mark .logo-detail { fill: none; }
.brand-mark circle { fill: #c96f51; stroke: #fffaf6; stroke-width: 1.2; }
.brand strong { display: block; line-height: 1; font: 750 15px/1 Arial, sans-serif; letter-spacing: .13em; }
.brand small { display: block; margin-top: 5px; color: var(--muted); font: 600 9px/1 sans-serif; letter-spacing: .12em; }
.status-pill { font-size: 12px; color: var(--muted); border: 1px solid var(--line); background: rgba(255,255,255,.62); padding: 8px 12px; border-radius: 99px; }
.status-pill span { width: 7px; height: 7px; background: var(--acid); display: inline-block; border-radius: 50%; margin-right: 6px; box-shadow: 0 0 0 3px rgba(217,119,87,.14); }
.text-button { border: 0; background: transparent; cursor: pointer; font-weight: 650; font-size: 13px; padding: 9px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.text-link { padding: 8px 9px; color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 700; border-radius: 99px; }
.text-link:hover { background: rgba(255,255,255,.55); color: var(--ink); }
.theme-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 11px; border: 1px solid var(--line); border-radius: 99px; background: rgba(255,250,240,.76); cursor: pointer; }
.theme-toggle span { width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: #f0c684; color: #704720; font-size: 11px; }
.theme-toggle b { font-size: 9px; }

.workspace { width: min(1540px, 94vw); margin: 0 auto; padding: 42px 0 28px; }
.product-hero { margin: 0 0 26px; }
.hero-copy { display: grid; grid-template-columns: 190px minmax(420px, 760px) 1fr; align-items: end; margin-bottom: 30px; }
.hero-copy .eyebrow { color: var(--acid-dark); font: 700 10px/1.35 monospace; letter-spacing: .15em; margin: 0; align-self: start; padding-top: 11px; max-width: 150px; }
.hero-copy h1 { margin: 0; font-family: Georgia, "Noto Serif SC", "Songti SC", serif; font-size: clamp(38px, 5vw, 68px); font-weight: 500; letter-spacing: -.055em; line-height: .98; }
.hero-copy h1 em { color: var(--acid-dark); font-style: italic; }
.hero-copy > p:last-child { color: var(--muted); line-height: 1.75; font-size: 13px; max-width: 320px; margin: 0 0 4px auto; }
.product-modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.product-mode { min-height: 166px; padding: 19px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,250,240,.86); color: var(--ink); text-align: left; text-decoration: none; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; gap: 9px 12px; cursor: pointer; transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.product-mode:hover { transform: translateY(-2px); border-color: #b99582; box-shadow: 0 12px 32px rgba(77,55,43,.08); }
.product-mode.is-active { border-color: #b97b46; background: #f6dfbd; box-shadow: inset 0 0 0 1px rgba(126,77,38,.08), 0 12px 34px rgba(93,63,46,.06); }
.mode-index { color: var(--muted); font: 700 9px/1 monospace; letter-spacing: .12em; }
.mode-arrow { align-self: start; min-width: 43px; padding: 6px 8px; border: 1px solid #d8c8bd; border-radius: 999px; background: rgba(255,255,255,.7); color: var(--muted); font-size: 0; line-height: 1; text-align: center; }
.mode-arrow::after { content: "选择"; font-size: 8px; font-weight: 750; }
.product-mode.is-active .mode-arrow { border-color: #b9684f; background: #c87559; color: #fffaf6; }
.product-mode.is-active .mode-arrow::after { content: "已选择"; }
.mode-glyph { grid-column: 1 / -1; width: 68px; height: 48px; position: relative; display: block; color: var(--acid-dark); }
.mode-glyph::before, .mode-glyph::after, .mode-glyph i { content: ""; position: absolute; border: 1.5px solid currentColor; }
.box-glyph::before { width: 44px; height: 29px; left: 3px; bottom: 1px; border-radius: 9px 12px 8px 10px; background: #edc1ae; }
.box-glyph::after { width: 43px; height: 22px; left: 14px; top: 0; border-radius: 10px; transform: rotate(-12deg); background: #fbf8f3; }
.box-glyph i { width: 14px; height: 4px; left: 39px; top: 19px; border-radius: 4px; background: var(--acid); }
.tray-glyph::before { width: 55px; height: 34px; left: 4px; top: 7px; border-radius: 45% 38% 42% 36%; background: #edc1ae; box-shadow: inset 0 0 0 7px #fbf8f3; }
.tray-glyph::after { width: 38px; height: 19px; left: 12px; top: 15px; border-radius: 45%; border-color: #bd6246; }
.mode-copy { grid-column: 1 / -1; display: block; align-self: end; }
.mode-copy b, .mode-copy small { display: block; }
.mode-copy b { font-family: Georgia, "Noto Serif SC", "Songti SC", serif; font-size: 20px; font-weight: 600; }
.mode-copy small { margin-top: 6px; color: var(--muted); font-size: 9px; line-height: 1.5; max-width: 270px; }
.intro { display: grid; grid-template-columns: 210px minmax(420px, 760px) 1fr; align-items: end; margin-bottom: 30px; }
.intro .eyebrow { color: var(--acid-dark); font: 700 11px/1 monospace; letter-spacing: .18em; margin: 0 0 10px; align-self: start; padding-top: 10px; }
.intro h1 { font-size: clamp(32px, 4vw, 58px); letter-spacing: -.055em; line-height: .98; margin: 0; max-width: 730px; }
.intro > p:last-child { color: var(--muted); line-height: 1.7; font-size: 14px; max-width: 310px; margin: 0 0 4px auto; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-bottom: 0; background: rgba(255,255,255,.45); }
.step { min-height: 76px; padding: 15px 20px; border: 0; border-right: 1px solid var(--line); background: transparent; text-align: left; display: grid; grid-template-columns: 32px 1fr; grid-template-rows: 1fr 1fr; column-gap: 10px; cursor: pointer; position: relative; }
.step:last-child { border-right: 0; }
.step::after { content: ""; height: 3px; background: var(--acid); position: absolute; left: -1px; right: -1px; bottom: 0; transform: scaleX(0); transition: transform .25s ease; }
.step.is-active { background: rgba(184,242,61,.08); }
.step.is-active::after { transform: scaleX(1); }
.step span { grid-row: 1 / 3; font: 600 11px/1 monospace; color: #969b91; padding-top: 4px; }
.step b { font-size: 14px; align-self: end; }
.step small { color: var(--muted); font-size: 11px; padding-top: 4px; }

.app-shell { display: grid; grid-template-columns: 310px minmax(480px, 1fr) 270px; min-height: 820px; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; overflow: clip; box-shadow: var(--shadow); }
.control-panel, .result-panel { padding: 24px 20px; }
.control-panel { border-right: 1px solid var(--line); }
.result-panel { border-left: 1px solid var(--line); background: #fffdf9; }
.panel-heading { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 17px; }
.panel-heading.compact { margin-bottom: 12px; }
.section-number { font: 700 9px/1 monospace; color: #fff8f3; background: var(--acid); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; margin-top: 1px; }
.panel-heading h2 { margin: 0; font-size: 15px; letter-spacing: -.01em; }
.panel-heading p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }

.drop-zone { border: 1px dashed #b8aaa0; border-radius: 13px 13px 0 0; min-height: 126px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; text-align: center; padding: 16px; transition: .2s; outline: none; background: #fffefa; }
.drop-zone:hover, .drop-zone:focus-visible, .drop-zone.is-dragging { border-color: #bd6c52; background: #fff6f1; }
.upload-icon { width: 30px; height: 30px; border: 1px solid var(--ink); border-radius: 50%; display: grid; place-items: center; font-weight: 800; margin-bottom: 10px; }
.drop-zone strong { font-size: 12px; }
.drop-zone span { color: var(--muted); font-size: 9px; margin-top: 5px; }
.sample-button { width: 100%; border: 1px solid var(--line); border-top: 0; background: #fbf8f3; padding: 9px; display: flex; gap: 9px; align-items: center; text-align: left; cursor: pointer; }
.sample-button:hover { background: #faeee7; }
.sample-button img { width: 38px; height: 38px; object-fit: cover; border: 1px solid #ddd9d0; }
.heart-sample-button { border-top: 0; background: #faf3ee; }
.heart-sample-button img { object-fit: contain; padding: 4px; background: #fffaf6; }
.sample-button span { flex: 1; }
.sample-button b, .sample-button small { display: block; }
.sample-button b { font-size: 10px; }
.sample-button small { font-size: 9px; color: var(--muted); margin-top: 3px; }
.sample-button em { font-style: normal; font-weight: 800; }

.control-group { margin-top: 18px; }
.control-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.control-label label { font-size: 11px; font-weight: 700; }
.control-label output { font: 700 10px/1 monospace; background: #e9e6de; padding: 5px 7px; border-radius: 3px; }
input[type="range"] { width: 100%; accent-color: var(--acid); cursor: pointer; }
.control-group p { color: var(--muted); font-size: 9px; line-height: 1.5; margin: 6px 0 0; }
.section-note { color: var(--muted); font-size: 9px; line-height: 1.55; margin: 10px 0 0; }
.structure-warning { margin-top: 12px; padding: 11px 12px; border: 1px solid #d59548; background: #fff2de; color: #65380e; }
.structure-warning strong { display: block; font-size: 10px; }
.structure-warning p { margin: 5px 0 0; font-size: 9px; line-height: 1.55; }
.background-color-card { display: flex; align-items: center; gap: 10px; margin-top: 11px; padding: 9px 10px; border: 1px solid var(--line); background: #fff; }
.background-color-card > span { width: 31px; height: 31px; flex: 0 0 auto; border: 1px solid rgba(24,32,25,.24); background: #f8f8f4; box-shadow: inset 0 0 0 4px rgba(255,255,255,.55); }
.background-color-card small, .background-color-card b { display: block; }
.background-color-card small { color: var(--muted); font-size: 8px; line-height: 1.35; }
.background-color-card b { margin-top: 3px; font: 750 10px/1 monospace; }
.panel-divider { height: 1px; background: var(--line); margin: 22px -20px 18px; }
.mode-parameters[hidden] { display: none !important; }
.common-parameter-grid { grid-template-columns: 1fr; }
.shared-heading + .common-parameter-grid input { background: #f9f0e9; border-color: #c9ab99; }
.parameter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.parameter-grid label { color: var(--muted); font-size: 9px; }
.parameter-grid input { width: 100%; display: block; margin-top: 5px; border: 1px solid var(--line); background: #fff; padding: 9px 8px; font: 650 12px/1 monospace; outline: none; }
.parameter-grid select { width: 100%; display: block; margin-top: 5px; border: 1px solid var(--line); background: #fff; padding: 8px 7px; min-height: 35px; color: var(--ink); font: 650 9px/1.2 sans-serif; outline: none; }
.parameter-grid select:disabled { cursor: not-allowed; color: #857b73; background: #f2eee9; opacity: .72; }
.parameter-grid input:focus, .parameter-grid select:focus { border-color: #b35c40; box-shadow: 0 0 0 3px rgba(217,119,87,.17); }
.pattern-placement-card { margin-top: 12px; padding: 12px; border: 1px solid #d6b98f; border-radius: 12px; background: #fff3de; }
.pattern-placement-card label { display: block; margin-bottom: 7px; font-size: 9px; font-weight: 800; color: var(--acid-dark); }
.pattern-placement-card select { width: 100%; min-height: 37px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--cream); color: var(--ink); font-size: 10px; font-weight: 700; outline: none; }
.pattern-placement-card select:focus { border-color: var(--acid); box-shadow: 0 0 0 3px rgba(201,134,79,.17); }
.pattern-placement-card small { display: block; margin-top: 7px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.closure-picker { display: grid; gap: 8px; margin: 2px 0 13px; }
.closure-option { position: relative; display: block; cursor: pointer; }
.closure-option input { position: absolute; opacity: 0; pointer-events: none; }
.closure-option span { display: block; min-height: 57px; padding: 11px 12px 10px 41px; border: 1px solid #d6c5b3; border-radius: 13px; background: rgba(255,253,248,.82); position: relative; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.closure-option span::before { content: ""; position: absolute; left: 13px; top: 17px; width: 14px; height: 14px; border: 2px solid #b89069; border-radius: 50%; background: #fffaf1; box-shadow: inset 0 0 0 3px #fffaf1; }
.closure-option input:checked + span { border-color: #a9673e; background: #fff0d8; box-shadow: 0 5px 14px rgba(117,72,39,.08); transform: translateY(-1px); }
.closure-option input:checked + span::before { background: #c77945; border-color: #8c4f2d; }
.closure-option b, .closure-option small { display: block; }
.closure-option b { color: #563823; font-size: 10px; }
.closure-option small { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.detached-lid-options { margin: 12px 0; padding: 13px; border: 1px solid #d8bb92; border-radius: 14px; background: linear-gradient(145deg, #fff8e8, #f8e6c5); }
.detached-lid-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.detached-lid-heading b { color: #684128; font-size: 10px; }
.detached-lid-heading small { color: #997254; font-size: 8px; text-align: right; }
.detached-lid-options .section-note { margin-bottom: 0; }
.opening-control { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 16px; }
.resolution-control { margin-top: 14px; }
.palette-preview { min-height: 30px; display: flex; align-items: center; gap: 4px; margin: 8px 0 4px; padding: 5px; border: 1px solid var(--line); background: #fff; }
.palette-preview:empty::before { content: "等待图片分析"; color: var(--muted); font-size: 8px; padding-left: 4px; }
.palette-swatch { flex: 1; height: 18px; min-width: 8px; border: 1px solid rgba(24,32,25,.15); position: relative; cursor: help; }
.palette-swatch::after { content: attr(data-label); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); background: #182019; color: #fff; font: 700 8px/1 monospace; padding: 5px 6px; border-radius: 3px; opacity: 0; pointer-events: none; white-space: nowrap; transition: opacity .15s; z-index: 8; }
.palette-swatch:hover::after { opacity: 1; }

.stage-panel { min-width: 0; display: flex; flex-direction: column; background: #f2ece6; position: sticky; top: 76px; align-self: start; height: calc(100vh - 152px); min-height: 720px; }
.stage-toolbar { min-height: 54px; padding: 8px 14px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); background: #fffaf5; }
.view-switch { display: flex; padding: 3px; border: 1px solid var(--line); background: #ebe8e0; }
.view-switch button { border: 0; background: transparent; padding: 7px 11px; font-size: 10px; font-weight: 700; cursor: pointer; }
.view-switch button.is-active { background: #f4ddd2; color: #813b29; box-shadow: 0 1px 5px rgba(68,45,35,.08); }
.stage-meta { display: flex; gap: 14px; font: 600 9px/1 monospace; color: var(--muted); }
.stage-meta span + span { color: #9a4c35; }
.canvas-wrap { position: relative; flex: 1; min-height: 520px; overflow: hidden; background-color: #f2ece6; background-image: linear-gradient(rgba(88,66,53,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(88,66,53,.035) 1px, transparent 1px); background-size: 22px 22px; }
.canvas-wrap::after { content: ""; position: absolute; inset: 24px; border: 1px solid rgba(24,32,25,.08); pointer-events: none; }
canvas { width: 100%; height: 100%; position: absolute; inset: 0; display: block; touch-action: none; }
#modelCanvas { display: none; cursor: grab; }
#modelCanvas:active { cursor: grabbing; }
.empty-state { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 4; text-align: center; }
.empty-state.is-hidden { display: none; }
.empty-shape { width: 88px; height: 62px; border: 1px solid #9ca096; border-radius: 38% 52% 42% 48%; transform: rotate(-7deg); position: relative; margin-bottom: 18px; background: rgba(255,255,255,.28); }
.empty-shape::after { content: ""; position: absolute; width: 28px; height: 9px; border: 1px solid #9ca096; border-bottom: 0; border-radius: 12px 12px 0 0; left: 31px; top: -10px; }
.empty-shape span { width: 17px; height: 17px; background: var(--acid); border-radius: 50%; position: absolute; right: -5px; top: 8px; box-shadow: 0 0 0 6px rgba(184,242,61,.16); }
.empty-state strong { font-size: 15px; }
.empty-state p { color: var(--muted); font-size: 11px; margin: 6px 0 15px; }
.empty-state button { border: 1px solid var(--ink); background: var(--ink); color: #fff; padding: 9px 16px; font-size: 10px; cursor: pointer; }
.canvas-hint { position: absolute; z-index: 5; left: 50%; bottom: 14px; transform: translateX(-50%); border: 1px solid rgba(24,32,25,.2); background: rgba(255,253,248,.88); backdrop-filter: blur(10px); font-size: 9px; padding: 7px 11px; border-radius: 99px; pointer-events: none; display: none; }
#modelHint { display: none; }
.camera-controls { position: absolute; z-index: 6; left: 14px; display: none; width: 252px; padding: 9px; border: 1px solid rgba(24,32,25,.22); background: rgba(255,253,248,.92); backdrop-filter: blur(10px); box-shadow: 0 4px 14px rgba(24,32,25,.08); }
.camera-controls { top: 14px; }
.canvas-wrap.is-model .camera-controls { display: block; }
.overlay-control-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.overlay-control-title strong { font-size: 9px; }
.overlay-control-title output { color: var(--acid-dark); font: 750 9px/1 monospace; }
.camera-view-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.camera-view-grid button { min-height: 25px; padding: 0 5px; border: 1px solid var(--line); background: #fffdf8; color: var(--ink); font-size: 8px; font-weight: 700; cursor: pointer; }
.camera-view-grid button:hover, .camera-view-grid button.is-active { border-color: #a74e34; background: #efd0c1; }
.zoom-controls { position: absolute; z-index: 6; top: 14px; right: 14px; display: none; align-items: center; border: 1px solid rgba(24,32,25,.22); background: rgba(255,253,248,.9); backdrop-filter: blur(10px); box-shadow: 0 4px 14px rgba(24,32,25,.08); }
.canvas-wrap.is-model .zoom-controls { display: flex; }
.zoom-controls button { height: 32px; min-width: 34px; border: 0; border-right: 1px solid var(--line); background: transparent; font: 750 12px/1 monospace; cursor: pointer; }
.zoom-controls button:last-child { border-right: 0; }
.zoom-controls button:hover { background: var(--acid); }
#zoomReset { min-width: 50px; font-size: 9px; }
.hinge-card { min-height: 52px; padding: 10px 16px; display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--line); background: #fffaf5; }
.hinge-dot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid #9da199; }
.hinge-card.is-ready .hinge-dot { background: var(--acid); border-color: #5d8218; box-shadow: 0 0 0 4px rgba(184,242,61,.18); }
.hinge-card div { flex: 1; }
.hinge-card b, .hinge-card small { display: block; }
.hinge-card b { font-size: 10px; }
.hinge-card small { color: var(--muted); font-size: 9px; margin-top: 2px; }
.hinge-axis { font: 700 9px/1 monospace; color: var(--acid-dark); }
.stage-actions { min-height: 72px; display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); background: #fffaf5; }
.stage-actions button { border: 1px solid var(--ink); font-size: 11px; font-weight: 750; cursor: pointer; }
.stage-actions button:disabled, .download-group button:disabled { cursor: not-allowed; opacity: .36; }
.secondary-action { background: transparent; }
.primary-action { background: var(--acid); color: #fffaf5; display: flex; justify-content: space-between; align-items: center; padding: 0 18px; }
.primary-action:hover:not(:disabled) { background: #c86545; }
.primary-action b { font-size: 18px; }

.result-title { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 750; }
.result-title i { font-style: normal; color: var(--muted); background: #ebe8df; font: 700 8px/1 monospace; padding: 5px 7px; border-radius: 99px; }
.result-title i.is-good { color: #45670b; background: #e3f7bd; }
.preview-object { height: 112px; position: relative; perspective: 500px; margin: 8px 0 6px; }
.mini-base, .mini-lid { position: absolute; width: 94px; height: 54px; left: calc(50% - 47px); border: 1px solid #3c443a; background: #dcefa9; transform: rotateX(63deg) rotateZ(-18deg); border-radius: 42% 30% 38% 34%; }
.mini-base { top: 42px; box-shadow: 7px 10px 0 #8dad45; }
.mini-lid { top: 22px; transform-origin: top; transform: rotateX(72deg) rotateZ(-18deg) translateY(-16px); background: #f0ffca; }
.mini-hinge { position: absolute; width: 34px; height: 7px; background: var(--orange); border: 1px solid #8d361c; border-radius: 8px; left: calc(50% + 24px); top: 31px; transform: rotate(-18deg); }
.checks { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.checks li { display: flex; gap: 9px; align-items: center; min-height: 48px; border-bottom: 1px solid var(--line); }
.checks li > span { width: 18px; height: 18px; border: 1px solid #a9ada4; border-radius: 50%; display: grid; place-items: center; font-size: 10px; }
.checks li.is-good > span { color: #3e6600; border-color: #7daf22; background: var(--acid); }
.checks b, .checks small { display: block; }
.checks b { font-size: 10px; }
.checks small { font-size: 8px; color: var(--muted); margin-top: 3px; }
.model-summary { padding: 12px 0; border-bottom: 1px solid var(--line); }
.model-summary div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 9px; }
.model-summary span { color: var(--muted); }
.model-summary b { font: 700 9px/1 monospace; }
.download-group { display: grid; gap: 7px; margin-top: 14px; }
.download-group button { border: 1px solid var(--ink); background: #fffdf8; min-height: 38px; padding: 0 11px; display: flex; align-items: center; justify-content: space-between; font-size: 10px; font-weight: 700; cursor: pointer; }
.download-group button:not(:disabled):hover { background: #f0d5c7; }
.download-group .color-download { background: #f5e1d7; border-color: #b46850; color: #743927; }
.download-group .color-download:not(:disabled):hover { background: #efcfbf; }
.download-group .three-mf-download { background: #eee3d9; border-color: #9a7765; color: #5e4437; }
.download-group .three-mf-download:not(:disabled):hover { background: #e6d4c7; }
.download-group .polygon-download { border-color: #aa654e; background: #f3e6dc; color: #713e2c; }
.download-group .polygon-download:not(:disabled):hover { background: #ecd3c5; }
.download-group .three-mf-download.polygon-download { border-color: #9f705b; background: linear-gradient(90deg, #f3e6dc, #eee3d9); color: #674537; }
.export-status { margin-top: 10px; padding: 9px 10px; border: 1px solid #ae7964; background: #f7e6dc; color: #643e30; font-size: 9px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.export-status[hidden] { display: none; }
.export-note { font-size: 8px; line-height: 1.5; color: var(--muted); margin: 9px 0 0; }

footer { width: min(1540px, 94vw); margin: 0 auto; padding: 18px 0 30px; display: flex; justify-content: space-between; color: var(--muted); font: 600 9px/1 monospace; }

.decision-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; }
.decision-modal[hidden] { display: none; }
.decision-modal-backdrop { position: absolute; inset: 0; background: rgba(18,25,20,.56); backdrop-filter: blur(6px); }
.decision-modal-card { position: relative; width: min(560px, 94vw); max-height: 92vh; overflow: auto; padding: 25px; border: 1px solid #273128; background: #fffdf8; box-shadow: 0 28px 90px rgba(12,18,13,.34); }
.decision-kicker { color: #9b511b; font: 750 9px/1 monospace; letter-spacing: .16em; }
.decision-modal-card h2 { margin: 9px 0 8px; font-size: 24px; letter-spacing: -.03em; }
.decision-modal-card > p { color: var(--muted); font-size: 11px; line-height: 1.65; margin: 0 0 16px; }
.decision-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.decision-options button { min-height: 74px; padding: 12px; border: 1px solid var(--line); background: #fff; text-align: left; cursor: pointer; }
.decision-options button:hover { border-color: #6f971c; background: #f4ffe0; }
.decision-options strong, .decision-options small { display: block; }
.decision-options strong { font-size: 10px; }
.decision-options small { margin-top: 5px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.decision-options .recommended-decision { border-color: #78a52c; background: #eff9dc; }
.decision-options .risk-decision { border-color: #c68c63; background: #fff4e9; }
.decision-cancel { width: 100%; min-height: 36px; margin-top: 9px; border: 0; background: #ece9e1; font-size: 9px; font-weight: 750; cursor: pointer; }

.bread-brand-mark { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid #d8b987; border-radius: 14px; background: #fff4dc; box-shadow: 0 6px 18px rgba(101,64,30,.10); }
.bread-brand-mark svg { width: 37px; height: 37px; overflow: visible; }
.bread-brand-mark path, .bread-brand-mark circle { stroke: #75492c; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bread-brand-mark path:first-child { fill: #e5ae68; }
.bread-brand-mark path:not(:first-child), .bread-brand-mark circle { fill: none; }

.landing-main { width: min(1420px, 94vw); margin: 0 auto; padding: 58px 0 42px; }
.bread-hero { min-height: 350px; display: grid; grid-template-columns: 1.3fr .75fr .7fr; gap: 30px; align-items: center; padding: 42px 48px; border: 1px solid var(--line); border-radius: 30px; background: linear-gradient(135deg, #fff9ed 0%, #f4dfbb 100%); box-shadow: var(--shadow); overflow: hidden; position: relative; }
.bread-hero::before { content: ""; position: absolute; width: 330px; height: 330px; border-radius: 50%; right: 17%; top: -180px; border: 48px solid rgba(255,255,255,.20); }
.bread-hero .eyebrow { margin: 0 0 18px; color: var(--acid-dark); font: 800 10px/1.4 monospace; letter-spacing: .16em; }
.bread-hero h1 { margin: 0; font-family: Georgia, "Noto Serif SC", "Songti SC", serif; font-size: clamp(44px, 6vw, 82px); line-height: .96; letter-spacing: -.06em; font-weight: 500; }
.bread-hero h1 em { color: #8f5833; font-style: italic; }
.bread-hero-note { position: relative; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.9; max-width: 290px; }
.hero-loaf { width: min(300px, 26vw); aspect-ratio: 1.12; position: relative; border: 2px solid #7b4d2f; border-radius: 44% 46% 25% 25% / 45% 45% 20% 20%; background: linear-gradient(155deg, #f3c988, #d9924f 70%); box-shadow: inset 0 -18px 0 rgba(119,69,33,.13), 0 24px 46px rgba(110,64,31,.14); transform: rotate(-3deg); }
.hero-loaf::before, .hero-loaf::after { content: ""; position: absolute; width: 28%; height: 9%; top: 21%; border: 2px solid rgba(112,64,31,.55); border-width: 2px 0 0; border-radius: 50%; transform: rotate(-24deg); }
.hero-loaf::before { left: 18%; }
.hero-loaf::after { right: 18%; }
.loaf-score { position: absolute; width: 26%; height: 9%; top: 37%; border-top: 2px solid rgba(112,64,31,.55); border-radius: 50%; transform: rotate(-24deg); }
.score-one { left: 27%; }
.score-two { right: 9%; }
.loaf-face { position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%); color: #704429; font: 800 clamp(14px,2vw,24px)/1 monospace; white-space: nowrap; }

.independent-tools { padding: 70px 0 26px; }
.section-intro { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 24px; }
.section-intro span { color: var(--acid-dark); font: 800 10px/1 monospace; letter-spacing: .14em; }
.section-intro h2 { margin: 0; font-family: Georgia, "Noto Serif SC", "Songti SC", serif; font-size: clamp(28px,4vw,50px); font-weight: 500; letter-spacing: -.04em; }
.tool-card-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.tool-card { min-height: 310px; padding: 26px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; gap: 18px; border: 1px solid var(--line); border-radius: 24px; background: var(--panel); text-decoration: none; box-shadow: 0 12px 32px rgba(86,56,35,.06); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.tool-card:hover { transform: translateY(-5px); border-color: #b57a48; box-shadow: 0 22px 50px rgba(86,56,35,.12); }
.tool-number { color: var(--muted); font: 800 10px/1 monospace; letter-spacing: .14em; }
.bread-tool-icon { justify-self: end; width: 86px; height: 62px; position: relative; color: #74482c; transform: scale(1.16); transform-origin: top right; }
.bread-tool-icon::before, .bread-tool-icon::after, .bread-tool-icon i { content: ""; position: absolute; border: 1.5px solid currentColor; }
.tool-card > span:nth-of-type(3) { grid-column: 1 / -1; align-self: end; }
.tool-card b, .tool-card small { display: block; }
.tool-card b { font-family: Georgia, "Noto Serif SC", "Songti SC", serif; font-size: 28px; }
.tool-card small { margin-top: 8px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.tool-card em { grid-column: 1 / -1; font-style: normal; font-size: 10px; font-weight: 800; color: var(--acid-dark); }
.tool-card-box { background: linear-gradient(155deg, #fffaf0, #f4dfbd); }
.tool-card-tray { background: linear-gradient(155deg, #fffaf0, #ead4b2); }
.flow-promise { margin-top: 30px; display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: rgba(255,250,240,.62); }
.flow-promise div { min-height: 112px; padding: 24px; border-right: 1px solid var(--line); }
.flow-promise div:last-child { border-right: 0; }
.flow-promise b, .flow-promise span { display: block; }
.flow-promise b { font-size: 13px; }
.flow-promise span { margin-top: 7px; color: var(--muted); font-size: 9px; line-height: 1.65; }
.landing-page footer a { color: var(--acid-dark); text-decoration: none; font-weight: 800; }

.page-loading, .load-error { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--muted); }
.page-loading span { width: 58px; height: 46px; border: 2px solid #79502f; border-radius: 46% 46% 24% 24%; background: #e5ae68; animation: loaf-breathe 1s ease-in-out infinite alternate; }
.page-loading b { font-size: 12px; }
.load-error b { font-size: 20px; color: var(--ink); }
.load-error p { margin: 0; }
.load-error a { padding: 10px 14px; border-radius: 99px; background: var(--acid); color: #fff; text-decoration: none; }
@keyframes loaf-breathe { to { transform: translateY(-6px) scale(1.03); } }

.builder-tray .stage-actions { grid-template-columns: 1fr; }
.builder-tray .primary-action { grid-column: 1; }
[hidden] { display: none !important; }

html[data-theme="night"] {
  --ink: #f3dfc2;
  --muted: #bca68d;
  --paper: #211814;
  --panel: #2b201a;
  --line: #503b2f;
  --acid: #d69557;
  --acid-dark: #f0bd7b;
  --orange: #c47b48;
  --sand: #3c2b22;
  --cream: #34261e;
  --toast: #b86e3f;
  --shadow: 0 22px 64px rgba(0,0,0,.28);
}
html[data-theme="night"] body { background: radial-gradient(circle at 72% 4%, rgba(214,149,87,.12), transparent 30rem), var(--paper); }
html[data-theme="night"] .topbar { background: rgba(33,24,20,.92); border-color: var(--line); }
html[data-theme="night"] .brand-mark,
html[data-theme="night"] .bread-brand-mark,
html[data-theme="night"] .theme-toggle,
html[data-theme="night"] .status-pill { background: rgba(56,40,31,.86); border-color: var(--line); }
html[data-theme="night"] .theme-toggle span { background: #754e31; color: #f2c891; }
html[data-theme="night"] .product-mode,
html[data-theme="night"] .app-shell,
html[data-theme="night"] .control-panel,
html[data-theme="night"] .result-panel,
html[data-theme="night"] .stage-toolbar,
html[data-theme="night"] .hinge-card,
html[data-theme="night"] .stage-actions,
html[data-theme="night"] .drop-zone,
html[data-theme="night"] .sample-button,
html[data-theme="night"] .parameter-grid input,
html[data-theme="night"] .parameter-grid select,
html[data-theme="night"] .camera-view-grid button,
html[data-theme="night"] .download-group button,
html[data-theme="night"] .decision-modal-card { background: var(--panel); color: var(--ink); border-color: var(--line); }
html[data-theme="night"] .product-mode.is-active { background: #4b3324; border-color: #b97945; }
html[data-theme="night"] .sample-button:hover,
html[data-theme="night"] .drop-zone:hover { background: #372820; }
html[data-theme="night"] .stage-panel,
html[data-theme="night"] .canvas-wrap { background-color: #241a16; }
html[data-theme="night"] .canvas-wrap { background-image: linear-gradient(rgba(245,220,190,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(245,220,190,.035) 1px, transparent 1px); }
html[data-theme="night"] .pattern-placement-card { background: #3a2a20; border-color: #79583e; }
html[data-theme="night"] .structure-warning { background: #3d2a1c; border-color: #9e6837; color: #f2c897; }
html[data-theme="night"] .background-color-card,
html[data-theme="night"] .palette-preview,
html[data-theme="night"] .camera-controls,
html[data-theme="night"] .zoom-controls { background: rgba(47,34,27,.93); border-color: var(--line); }
html[data-theme="night"] .bread-hero { background: linear-gradient(135deg, #35261e, #4c3425); }
html[data-theme="night"] .bread-hero h1 em { color: #efb876; }
html[data-theme="night"] .tool-card-box { background: linear-gradient(155deg, #2d211b, #493224); }
html[data-theme="night"] .tool-card-tray { background: linear-gradient(155deg, #2d211b, #3f2d22); }

/* High-resolution model baking wait screen. The artwork is intentionally built
   from hard-edged SVG rectangles so it stays crisp like a hand-drawn pixel sprite. */
body.is-baking {
  overflow: hidden;
}

.bake-wait[hidden] {
  display: none;
}

.bake-wait {
  --bake-cycle: 8s;
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    radial-gradient(circle at 18px 18px, rgba(132, 73, 45, .12) 0 2px, transparent 2.5px) 0 0 / 36px 36px,
    rgba(250, 239, 218, .92);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity .18s ease;
}

.bake-wait.is-visible {
  opacity: 1;
}

.bake-wait-card {
  position: relative;
  width: min(460px, 100%);
  padding: 28px 34px 26px;
  overflow: hidden;
  border: 3px solid #6f3f2d;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.42) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(rgba(255,255,255,.42) 1px, transparent 1px) 0 0 / 20px 20px,
    #fff8e9;
  box-shadow:
    8px 8px 0 #d39a65,
    14px 14px 0 rgba(111, 63, 45, .12);
  text-align: center;
}

.bake-wait-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 10px;
  background: repeating-linear-gradient(90deg, #7c402c 0 22px, #e7aa6d 22px 44px, #f6cf91 44px 66px);
}

.bake-eyebrow {
  margin: 4px 0 10px;
  color: #a05438;
  font: 700 9px/1.4 "Courier New", monospace;
  letter-spacing: .16em;
}

.pixel-oven {
  width: 240px;
  max-width: 74%;
  margin: 0 auto -2px;
  filter: drop-shadow(0 7px 0 rgba(94, 48, 33, .16));
  image-rendering: pixelated;
}

.pixel-oven svg {
  display: block;
  width: 100%;
  height: auto;
  shape-rendering: crispEdges;
  overflow: visible;
}

.oven-shadow { fill: #d59d68; }
.oven-outline { fill: #633a2c; }
.oven-body { fill: #efbd7b; }
.oven-highlight { fill: #ffe0a5; }
.oven-panel { fill: #bf704c; }
.oven-knob { fill: #54332a; }
.oven-display { fill: #38453f; }
.oven-display-dot {
  fill: #d9f08a;
  animation: oven-display-blink 1.2s steps(1, end) infinite;
}
.oven-display-dot-late { animation-delay: .6s; }
.oven-door-outline { fill: #59362c; }
.oven-window { fill: #2e302e; }
.oven-glow {
  fill: #8a4932;
  animation: oven-glow var(--bake-cycle) steps(5, end) infinite;
}
.oven-foot { fill: #54332a; }

.pixel-loaf {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: loaf-bake-bounce 1.1s steps(2, end) infinite;
}

.loaf-outline { fill: #573328; }
.loaf-stage {
  transform-box: fill-box;
  transform-origin: center;
}
.loaf-dough {
  fill: #fff6dc;
  animation: loaf-dough-stage var(--bake-cycle) steps(1, end) infinite;
}
.loaf-golden {
  fill: #edb85f;
  opacity: 0;
  animation: loaf-golden-stage var(--bake-cycle) steps(1, end) infinite;
}
.loaf-toasted {
  fill: #c96f37;
  opacity: 0;
  animation: loaf-toasted-stage var(--bake-cycle) steps(1, end) infinite;
}
.loaf-scores { fill: #70402c; }

.oven-heat {
  fill: #f4c94d;
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: oven-flame .7s steps(2, end) infinite alternate;
}
.oven-heat-right { animation-delay: .35s; }
.pixel-steam {
  fill: #fff3d8;
  opacity: 0;
  transform-box: fill-box;
  animation: pixel-steam-rise 2.2s steps(5, end) infinite;
}
.steam-two { animation-delay: 1.1s; }

.bake-wait-card h2 {
  margin: 0;
  color: #4f3026;
  font-size: clamp(19px, 4vw, 25px);
  line-height: 1.25;
  letter-spacing: .04em;
}

.bake-wait-card > p:not(.bake-eyebrow) {
  max-width: 330px;
  margin: 9px auto 16px;
  color: #8a604b;
  font-size: 11px;
  line-height: 1.7;
}

.bake-progress {
  position: relative;
  height: 14px;
  overflow: hidden;
  border: 2px solid #6f3f2d;
  background: #f4dfbd;
  box-shadow: inset 0 0 0 2px #fff4dc;
}

.bake-progress span {
  position: absolute;
  inset: 2px;
  width: auto;
  background: repeating-linear-gradient(90deg, #e29c42 0 12px, #f3c86b 12px 24px);
  transform: scaleX(.04);
  transform-origin: left center;
  animation: bake-progress var(--bake-cycle) steps(18, end) infinite;
}

.bake-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
  color: #744833;
  font-size: 9px;
  letter-spacing: .04em;
}

.bake-steps i {
  width: 3px;
  height: 3px;
  background: #c47b4d;
  box-shadow: 5px 0 0 #e2aa6e;
}

.bake-wait-card > small {
  display: block;
  margin-top: 14px;
  color: #9c7b68;
  font-size: 9px;
  line-height: 1.6;
}

.bake-pixel-sprinkles i {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #db8f66;
  animation: sprinkle-pop 1.8s steps(2, end) infinite alternate;
}
.bake-pixel-sprinkles i:nth-child(1) { left: 24px; top: 43px; }
.bake-pixel-sprinkles i:nth-child(2) { right: 29px; top: 58px; background: #98bd87; animation-delay: .35s; }
.bake-pixel-sprinkles i:nth-child(3) { left: 44px; top: 150px; background: #e3b54b; animation-delay: .7s; }
.bake-pixel-sprinkles i:nth-child(4) { right: 46px; top: 171px; background: #c87379; animation-delay: 1.05s; }
.bake-pixel-sprinkles i:nth-child(5) { right: 22px; bottom: 60px; background: #98bd87; animation-delay: 1.4s; }

@keyframes loaf-dough-stage {
  0%, 27% { opacity: 1; }
  28%, 100% { opacity: 0; }
}

@keyframes loaf-golden-stage {
  0%, 27% { opacity: 0; }
  28%, 66% { opacity: 1; }
  67%, 100% { opacity: 0; }
}

@keyframes loaf-toasted-stage {
  0%, 66% { opacity: 0; }
  67%, 100% { opacity: 1; }
}

@keyframes loaf-bake-bounce {
  0% { transform: translateY(0) scale(1); }
  65% { transform: translateY(-1px) scale(1.02, .98); }
  100% { transform: translateY(-3px) scale(1.06, 1.02); }
}

@keyframes oven-glow {
  0% { fill: #7a4433; }
  32% { fill: #9d5531; }
  68% { fill: #b7662e; }
  100% { fill: #8d482f; }
}

@keyframes oven-flame {
  from { transform: scaleY(.75); opacity: .7; }
  to { transform: scaleY(1.15); opacity: 1; }
}

@keyframes pixel-steam-rise {
  0%, 12% { opacity: 0; transform: translateY(3px); }
  20%, 68% { opacity: .9; }
  100% { opacity: 0; transform: translateY(-10px); }
}

@keyframes oven-display-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: .25; }
}

@keyframes bake-progress {
  0% { transform: scaleX(.04); }
  40% { transform: scaleX(.48); }
  72% { transform: scaleX(.78); }
  100% { transform: scaleX(.96); }
}

@keyframes sprinkle-pop {
  from { transform: translateY(0) rotate(0); }
  to { transform: translateY(-4px) rotate(90deg); }
}

@media (max-width: 520px) {
  .bake-wait { padding: 16px; }
  .bake-wait-card { padding: 24px 20px 22px; box-shadow: 6px 6px 0 #d39a65; }
  .pixel-oven { width: 205px; }
  .bake-pixel-sprinkles i:nth-child(3),
  .bake-pixel-sprinkles i:nth-child(4) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bake-wait,
  .bake-wait *,
  .bake-wait *::before,
  .bake-wait *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .loaf-dough,
  .loaf-golden { opacity: 0; }
  .loaf-toasted { opacity: 1; }
  .bake-progress span { transform: scaleX(.82); }
}
html[data-theme="night"] .flow-promise { background: rgba(54,39,30,.68); }

.icon-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon-review-main { width: min(1360px, 94vw); margin: 0 auto; padding: 58px 0 48px; }
.icon-review-hero { display: grid; grid-template-columns: 180px minmax(420px,760px) 1fr; align-items: end; gap: 28px; margin-bottom: 56px; }
.icon-review-hero .eyebrow { margin: 0; color: var(--acid-dark); font: 800 10px/1.45 monospace; letter-spacing: .14em; }
.icon-review-hero h1 { margin: 0; font-family: Georgia, "Noto Serif SC", "Songti SC", serif; font-size: clamp(38px,5vw,67px); line-height: .98; letter-spacing: -.055em; font-weight: 500; }
.icon-review-hero h1 em { color: var(--acid-dark); font-style: italic; }
.icon-review-hero > p:last-child { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.icon-group { margin-top: 38px; padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,250,240,.74); box-shadow: 0 12px 38px rgba(86,56,35,.055); }
.icon-group-title { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 22px; }
.icon-group-title > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: var(--acid); color: #fff8ed; font: 800 9px/1 monospace; }
.icon-group-title h2 { margin: 0; font-size: 17px; }
.icon-group-title p { margin: 5px 0 0; color: var(--muted); font-size: 9px; }
.icon-proposal-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 10px; }
.icon-proposal-grid article { min-height: 168px; padding: 18px 12px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); text-align: center; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.icon-proposal-grid article:hover { transform: translateY(-3px); border-color: #b87a47; background: #fff1d6; }
.icon-proposal-grid svg { width: 58px; height: 58px; margin-bottom: 14px; fill: none; stroke: var(--acid-dark); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.icon-proposal-grid b { font-size: 11px; }
.icon-proposal-grid small { margin-top: 5px; color: var(--muted); font: 700 8px/1 monospace; letter-spacing: .05em; }
.icon-review-page footer a { color: var(--acid-dark); text-decoration: none; font-weight: 800; }
html[data-theme="night"] .icon-group { background: rgba(54,39,30,.72); }
html[data-theme="night"] .icon-proposal-grid article:hover { background: #402d22; }

@media (max-width: 1180px) {
  .hero-copy { grid-template-columns: 150px 1fr; }
  .hero-copy > p:last-child { display: none; }
  .intro { grid-template-columns: 150px 1fr; }
  .intro > p:last-child { display: none; }
  .app-shell { grid-template-columns: 300px minmax(460px,1fr); }
  .result-panel { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 180px 1fr 220px; gap: 20px; }
  .result-title, .preview-object { grid-column: 1; }
  .checks { grid-column: 2; grid-row: 1 / 3; }
  .model-summary, .download-group, .export-note { grid-column: 3; }
  .download-group { grid-row: 2; }
  .export-note { grid-row: 3; }
  .bread-hero { grid-template-columns: 1fr .72fr; }
  .bread-hero-note { grid-column: 1 / -1; max-width: 680px; }
  .icon-proposal-grid { grid-template-columns: repeat(4,1fr); }
  .icon-review-hero { grid-template-columns: 150px 1fr; }
  .icon-review-hero > p:last-child { grid-column: 1 / -1; max-width: 700px; }
}
@media (max-width: 780px) {
  .topbar { height: 62px; }
  .status-pill { display: none; }
  .topbar-actions { gap: 3px; }
  .topbar-actions .text-link { display: none; }
  .theme-toggle { padding: 0 8px; }
  .workspace { width: min(94vw, 620px); padding-top: 24px; }
  .hero-copy { display: block; margin-bottom: 22px; }
  .hero-copy h1 { font-size: 42px; margin-top: 12px; }
  .product-modes { grid-template-columns: 1fr; }
  .product-mode { min-height: 142px; }
  .intro { display: block; }
  .intro h1 { font-size: 37px; margin-top: 12px; }
  .steps { overflow-x: auto; grid-template-columns: repeat(3, 180px); }
  .app-shell { display: block; }
  .control-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .stage-panel { position: static; height: auto; min-height: 700px; }
  .canvas-wrap { min-height: 480px; }
  .result-panel { display: block; border-top: 1px solid var(--line); }
  .preview-object { height: 130px; }
  .decision-options { grid-template-columns: 1fr; }
  footer { display: block; line-height: 2; }
  .landing-main { padding-top: 22px; }
  .bread-hero { min-height: 0; display: block; padding: 30px 24px; border-radius: 22px; }
  .hero-loaf { width: min(230px,70vw); margin: 32px auto; }
  .bread-hero-note { max-width: none; }
  .section-intro { display: block; }
  .section-intro h2 { margin-top: 10px; }
  .tool-card-grid, .flow-promise { grid-template-columns: 1fr; }
  .flow-promise div { border-right: 0; border-bottom: 1px solid var(--line); }
  .flow-promise div:last-child { border-bottom: 0; }
  .icon-review-main { padding-top: 30px; }
  .icon-review-hero { display: block; }
  .icon-review-hero h1 { margin: 14px 0; }
  .icon-group { padding: 18px; border-radius: 18px; }
  .icon-proposal-grid { grid-template-columns: repeat(2,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Minimal workbench — compact type, generous whitespace, one clear focal point. */
.builder-page {
  --ink: #342a23;
  --muted: #82766c;
  --paper: #f6f3ee;
  --panel: #fffdf9;
  --line: #e5ded6;
  --acid: #bd7650;
  --acid-dark: #805035;
  --cream: #fbf7f1;
  --shadow: 0 12px 38px rgba(74, 52, 38, .055);
  background:
    radial-gradient(circle at 72% -12%, rgba(205, 157, 117, .11), transparent 34rem),
    var(--paper);
}

.builder-page .topbar {
  height: 60px;
  padding: 0 max(22px, 3vw);
  border-bottom-color: rgba(72, 55, 43, .09);
  background: rgba(246, 243, 238, .88);
}

.builder-page .brand {
  gap: 9px;
}

.builder-page .brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  box-shadow: none;
}

.builder-page .brand-mark svg {
  width: 28px;
  height: 28px;
}

.builder-page .brand strong {
  font-size: 12px;
  letter-spacing: .16em;
}

.builder-page .brand small {
  display: none;
}

.builder-page .topbar-actions {
  gap: 5px;
}

.builder-page .status-pill {
  padding: 0 9px 0 0;
  border: 0;
  background: transparent;
  font-size: 9px;
  letter-spacing: .02em;
}

.builder-page .status-pill span {
  width: 6px;
  height: 6px;
  margin-right: 5px;
  box-shadow: 0 0 0 3px rgba(189, 118, 80, .12);
}

.builder-page .theme-toggle {
  min-height: 30px;
  padding: 0 9px;
  background: rgba(255, 253, 249, .76);
}

.builder-page .theme-toggle span {
  width: 15px;
  height: 15px;
  font-size: 9px;
}

.builder-page .text-link,
.builder-page .text-button {
  padding: 7px 8px;
  font-size: 10px;
}

.builder-page .workspace {
  width: min(1480px, calc(100vw - 44px));
  padding: 24px 0 34px;
}

.builder-page .product-hero {
  margin: 0 0 17px;
}

.builder-page .hero-copy {
  grid-template-columns: minmax(0, 1fr) minmax(250px, 390px);
  gap: 42px;
  align-items: center;
  margin: 0 2px 17px;
}

.builder-page .hero-copy .eyebrow {
  grid-column: 1;
  align-self: end;
  max-width: none;
  margin: 0 0 7px;
  padding: 0;
  font-size: 8px;
  line-height: 1;
  letter-spacing: .17em;
}

.builder-page .hero-copy h1 {
  grid-column: 1;
  margin: 0;
  font-size: clamp(30px, 3.15vw, 44px);
  line-height: 1.03;
  letter-spacing: -.045em;
  font-weight: 550;
}

.builder-page .hero-copy > p:last-child {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  max-width: 360px;
  margin: 0;
  padding-left: 24px;
  border-left: 1px solid var(--line);
  font-size: 10px;
  line-height: 1.65;
}

.builder-page .product-modes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 253, 249, .56);
}

.builder-page .product-mode {
  min-height: 52px;
  padding: 9px 12px;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  grid-template-rows: 1fr;
  gap: 10px;
  align-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
}

.builder-page .product-mode:hover {
  transform: none;
  border-color: transparent;
  background: rgba(255, 255, 255, .7);
  box-shadow: none;
}

.builder-page .product-mode.is-active {
  border-color: transparent;
  background: var(--panel);
  box-shadow: 0 3px 12px rgba(74, 52, 38, .07);
}

.builder-page .mode-index {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 7px;
  letter-spacing: .06em;
}

.builder-page .product-mode.is-active .mode-index {
  border-color: rgba(189, 118, 80, .38);
  color: var(--acid-dark);
  background: #f7e9df;
}

.builder-page .mode-glyph {
  display: none;
}

.builder-page .mode-copy {
  grid-column: 2;
  min-width: 0;
  align-self: center;
}

.builder-page .mode-copy b {
  font-family: inherit;
  font-size: 13px;
  line-height: 1.1;
  font-weight: 780;
  letter-spacing: -.01em;
}

.builder-page .mode-copy small {
  margin-top: 3px;
  max-width: none;
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.builder-page .mode-arrow {
  align-self: center;
  min-width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
}

.builder-page .mode-arrow::after {
  content: "独立页";
  font-size: 8px;
  font-weight: 750;
}

.builder-page .product-mode.is-active .mode-arrow {
  border: 0;
  background: transparent;
  color: var(--acid-dark);
}

.builder-page .product-mode.is-active .mode-arrow::after {
  content: "本页";
}

.builder-page .app-shell {
  grid-template-columns: 286px minmax(480px, 1fr) 250px;
  gap: 14px;
  align-items: start;
  min-height: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.builder-page .control-panel,
.builder-page .result-panel,
.builder-page .stage-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 253, 249, .9);
  box-shadow: var(--shadow);
}

.builder-page .control-panel,
.builder-page .result-panel {
  padding: 19px 17px;
}

.builder-page .control-panel {
  border-right: 1px solid var(--line);
}

.builder-page .result-panel {
  position: sticky;
  top: 74px;
  max-height: calc(100vh - 88px);
  overflow-y: auto;
  border-left: 1px solid var(--line);
  background: rgba(255, 253, 249, .92);
  scrollbar-width: thin;
}

.builder-page .panel-heading {
  gap: 9px;
  margin-bottom: 13px;
}

.builder-page .panel-heading.compact {
  margin-bottom: 10px;
}

.builder-page .section-number {
  width: 20px;
  height: 20px;
  margin-top: 0;
  border: 1px solid rgba(189, 118, 80, .34);
  background: #f8ebe2;
  color: var(--acid-dark);
  font-size: 7px;
}

.builder-page .panel-heading h2 {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 800;
}

.builder-page .panel-heading p {
  margin-top: 3px;
  font-size: 8px;
}

.builder-page .drop-zone {
  min-height: 94px;
  padding: 12px;
  border-color: #cfc4ba;
  border-radius: 11px;
  background: #fbfaf8;
}

.builder-page .upload-icon {
  width: 25px;
  height: 25px;
  margin-bottom: 7px;
  border-color: #a99a8e;
  color: var(--acid-dark);
  font-size: 11px;
}

.builder-page .drop-zone strong {
  font-size: 10px;
}

.builder-page .drop-zone span {
  margin-top: 4px;
  font-size: 8px;
}

.builder-page .sample-button {
  margin-top: 7px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #faf8f5;
}

.builder-page .heart-sample-button {
  margin-top: 6px;
}

.builder-page .sample-button img {
  width: 32px;
  height: 32px;
  border-radius: 7px;
}

.builder-page .sample-button b {
  font-size: 9px;
}

.builder-page .sample-button small {
  margin-top: 2px;
  font-size: 7px;
}

.builder-page .sample-button em {
  color: var(--muted);
  font-size: 10px;
}

.builder-page .control-group {
  margin-top: 15px;
}

.builder-page .control-label {
  margin-bottom: 7px;
}

.builder-page .control-label label {
  font-size: 9px;
}

.builder-page .control-label output {
  padding: 4px 6px;
  border-radius: 6px;
  background: #f0ece7;
  font-size: 8px;
}

.builder-page .control-group p,
.builder-page .section-note {
  font-size: 8px;
  line-height: 1.55;
}

.builder-page .panel-divider {
  width: 38px;
  height: 1px;
  margin: 19px 0 15px;
  background: #d8cec5;
}

.builder-page .parameter-grid {
  gap: 9px 8px;
}

.builder-page .parameter-grid label {
  font-size: 8px;
}

.builder-page .parameter-grid input,
.builder-page .parameter-grid select {
  margin-top: 4px;
  padding: 8px;
  border-color: #e3ddd6;
  border-radius: 8px;
  background: #fbfaf8;
}

.builder-page .parameter-grid input {
  font-size: 11px;
}

.builder-page .shared-heading + .common-parameter-grid input {
  border-color: #ddc9bb;
  background: #fcf6f1;
}

.builder-page .pattern-placement-card {
  margin-top: 11px;
  padding: 10px;
  border-color: #e2d4c7;
  border-radius: 10px;
  background: #faf6f1;
}

.builder-page .pattern-placement-card label {
  margin-bottom: 6px;
  font-size: 8px;
}

.builder-page .pattern-placement-card select {
  min-height: 34px;
  border-color: #e0d8cf;
  background: var(--panel);
  font-size: 9px;
}

.builder-page .pattern-placement-card small {
  margin-top: 6px;
  font-size: 7px;
}

.builder-page .structure-warning,
.builder-page .background-color-card {
  border-radius: 10px;
}

.builder-page .structure-warning {
  border-color: #ead7bd;
  background: #fcf5e9;
  color: #6f4b2d;
}

.builder-page .stage-panel {
  top: 74px;
  height: calc(100vh - 88px);
  min-height: 620px;
  max-height: 920px;
  border-radius: 18px;
  background: #efebe6;
}

.builder-page .stage-toolbar {
  min-height: 48px;
  padding: 7px 12px;
  background: rgba(255, 253, 249, .94);
}

.builder-page .view-switch {
  padding: 2px;
  border: 0;
  border-radius: 9px;
  background: #f0ece7;
}

.builder-page .view-switch button {
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 9px;
}

.builder-page .view-switch button.is-active {
  background: var(--panel);
  box-shadow: 0 2px 8px rgba(74, 52, 38, .08);
}

.builder-page .stage-meta {
  gap: 10px;
  font-size: 8px;
}

.builder-page .canvas-wrap {
  min-height: 460px;
  background-color: #efebe6;
  background-image:
    linear-gradient(rgba(88, 66, 53, .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 66, 53, .026) 1px, transparent 1px);
  background-size: 32px 32px;
}

.builder-page .canvas-wrap::after {
  display: none;
}

.builder-page .empty-shape {
  width: 76px;
  height: 54px;
  margin-bottom: 15px;
  border-color: #b5aaa1;
}

.builder-page .empty-state strong {
  font-size: 13px;
}

.builder-page .empty-state p {
  margin: 5px 0 13px;
  font-size: 9px;
}

.builder-page .empty-state button {
  padding: 8px 14px;
  border: 0;
  border-radius: 9px;
  background: var(--ink);
  font-size: 9px;
}

.builder-page .camera-controls,
.builder-page .zoom-controls {
  border-color: rgba(83, 65, 52, .14);
  border-radius: 10px;
  box-shadow: 0 5px 18px rgba(74, 52, 38, .08);
}

.builder-page .hinge-card {
  min-height: 46px;
  padding: 8px 13px;
  background: rgba(255, 253, 249, .95);
}

.builder-page .stage-actions {
  min-height: 62px;
  gap: 8px;
  padding: 9px 12px;
  background: rgba(255, 253, 249, .95);
}

.builder-page .stage-actions button {
  border-radius: 9px;
  font-size: 10px;
}

.builder-page .secondary-action {
  border-color: #bdb2a9;
}

.builder-page .primary-action {
  border-color: var(--acid);
  border-radius: 9px;
  background: var(--acid);
  padding: 0 15px;
}

.builder-page .primary-action b {
  font-size: 15px;
}

.builder-page .result-title {
  font-size: 12px;
}

.builder-page .result-title i {
  padding: 4px 6px;
  background: #f0ece7;
  font-size: 7px;
}

.builder-page .preview-object {
  display: none;
}

.builder-page .checks {
  margin-top: 12px;
  border-top-color: #eee9e3;
}

.builder-page .checks li {
  min-height: 42px;
  border-bottom-color: #eee9e3;
}

.builder-page .checks li > span {
  width: 16px;
  height: 16px;
  font-size: 8px;
}

.builder-page .checks b {
  font-size: 9px;
}

.builder-page .checks small {
  font-size: 7px;
}

.builder-page .model-summary {
  padding: 10px 0;
  border-bottom-color: #eee9e3;
}

.builder-page .model-summary div {
  padding: 4px 0;
  font-size: 8px;
}

.builder-page .download-group {
  gap: 6px;
  margin-top: 12px;
}

.builder-page .download-group button {
  min-height: 36px;
  padding: 0 10px;
  border-color: #d3c8be;
  border-radius: 9px;
  background: #fbfaf8;
  font-size: 9px;
}

.builder-page .download-group .color-download,
.builder-page .download-group .three-mf-download,
.builder-page .download-group .polygon-download,
.builder-page .download-group .three-mf-download.polygon-download {
  border-color: #d6c0b2;
  background: #faf3ed;
  color: #674638;
}

.builder-page .export-note {
  margin-top: 8px;
  font-size: 7px;
}

.builder-page + footer,
.builder-page footer {
  width: min(1480px, calc(100vw - 44px));
  padding: 10px 0 24px;
  opacity: .75;
}

html[data-theme="night"] .builder-page {
  --ink: #f1e6db;
  --muted: #aa9b8f;
  --paper: #1e1916;
  --panel: #29221e;
  --line: #453a33;
  --acid: #c9835c;
  --acid-dark: #e7af88;
  --cream: #302824;
  --shadow: 0 14px 40px rgba(0, 0, 0, .2);
  background:
    radial-gradient(circle at 72% -12%, rgba(201, 131, 92, .1), transparent 34rem),
    var(--paper);
}

html[data-theme="night"] .builder-page .topbar {
  background: rgba(30, 25, 22, .9);
}

html[data-theme="night"] .builder-page .product-modes {
  background: rgba(41, 34, 30, .48);
}

html[data-theme="night"] .builder-page .product-mode:hover {
  background: rgba(49, 40, 35, .74);
}

html[data-theme="night"] .builder-page .product-mode.is-active,
html[data-theme="night"] .builder-page .control-panel,
html[data-theme="night"] .builder-page .result-panel,
html[data-theme="night"] .builder-page .stage-panel {
  background: var(--panel);
}

html[data-theme="night"] .builder-page .product-mode.is-active .mode-index,
html[data-theme="night"] .builder-page .section-number {
  background: #3a2b23;
}

html[data-theme="night"] .builder-page .view-switch,
html[data-theme="night"] .builder-page .control-label output,
html[data-theme="night"] .builder-page .result-title i {
  background: #352d28;
}

html[data-theme="night"] .builder-page .drop-zone,
html[data-theme="night"] .builder-page .sample-button,
html[data-theme="night"] .builder-page .parameter-grid input,
html[data-theme="night"] .builder-page .parameter-grid select,
html[data-theme="night"] .builder-page .pattern-placement-card,
html[data-theme="night"] .builder-page .download-group button {
  background: #2d2622;
}

html[data-theme="night"] .builder-page .canvas-wrap {
  background-color: #211c19;
  background-image:
    linear-gradient(rgba(245, 220, 190, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 220, 190, .025) 1px, transparent 1px);
}

@media (max-width: 1080px) {
  .builder-page .status-pill {
    display: none;
  }

  .builder-page .app-shell {
    grid-template-columns: 276px minmax(0, 1fr);
  }

  .builder-page .result-panel {
    position: static;
    grid-column: 1 / -1;
    max-height: none;
    display: grid;
    grid-template-columns: 160px minmax(240px, 1fr) minmax(210px, 260px);
    gap: 0 20px;
    overflow: hidden;
  }

  .builder-page .result-title {
    grid-column: 1;
  }

  .builder-page .checks {
    grid-column: 2;
    grid-row: 1 / 5;
    margin-top: 0;
  }

  .builder-page .model-summary,
  .builder-page .download-group,
  .builder-page .export-note,
  .builder-page .export-status {
    grid-column: 3;
  }
}

@media (max-width: 760px) {
  .builder-page .topbar {
    height: 56px;
    padding: 0 15px;
  }

  .builder-page .brand-mark {
    width: 31px;
    height: 31px;
  }

  .builder-page .topbar-actions .text-link {
    display: none;
  }

  .builder-page .workspace {
    width: min(100% - 28px, 650px);
    padding-top: 18px;
  }

  .builder-page .hero-copy {
    display: block;
    margin-bottom: 14px;
  }

  .builder-page .hero-copy .eyebrow {
    margin-bottom: 8px;
  }

  .builder-page .hero-copy h1 {
    margin: 0;
    font-size: clamp(28px, 9vw, 38px);
  }

  .builder-page .hero-copy > p:last-child {
    display: block;
    max-width: 540px;
    margin-top: 10px;
    padding: 0;
    border: 0;
    font-size: 9px;
  }

  .builder-page .product-modes {
    grid-template-columns: repeat(3, minmax(126px, 1fr));
    overflow-x: auto;
    scrollbar-width: none;
  }

  .builder-page .product-modes::-webkit-scrollbar {
    display: none;
  }

  .builder-page .product-mode {
    min-height: 48px;
    padding: 8px 9px;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 7px;
  }

  .builder-page .mode-index {
    width: 20px;
    height: 20px;
  }

  .builder-page .mode-copy small,
  .builder-page .mode-arrow {
    display: none;
  }

  .builder-page .app-shell {
    display: block;
  }

  .builder-page .control-panel,
  .builder-page .stage-panel,
  .builder-page .result-panel {
    border-radius: 14px;
  }

  .builder-page .control-panel {
    margin-bottom: 12px;
    border: 1px solid var(--line);
  }

  .builder-page .stage-panel {
    position: static;
    height: min(720px, calc(100vh - 24px));
    min-height: 590px;
    margin-bottom: 12px;
  }

  .builder-page .canvas-wrap {
    min-height: 420px;
  }

  .builder-page .result-panel {
    display: block;
    border: 1px solid var(--line);
  }

  .builder-page .checks {
    margin-top: 12px;
  }

  .builder-page .camera-controls {
    width: min(236px, calc(100% - 86px));
  }

  .builder-page footer {
    width: min(100% - 28px, 650px);
  }
}

/* Shared product-photo treatment. The watermark is a DOM overlay only and is
   deliberately kept outside every STL/3MF geometry and export path. */
.builder-page .canvas-wrap {
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 38%, #ffffff 0%, #fffefc 55%, #f1ede8 100%);
}

.builder-page .canvas-wrap::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 12%;
  right: 12%;
  bottom: 8%;
  height: 24%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(86, 61, 45, .12), transparent 68%);
  filter: blur(24px);
  pointer-events: none;
}

.builder-page #outlineCanvas,
.builder-page #modelCanvas {
  position: relative;
  z-index: 1;
}

.builder-page .model-watermark {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, .82);
  font: 400 clamp(34px, 5vw, 62px)/1 Georgia, "Times New Roman", serif;
  letter-spacing: .025em;
  text-shadow: 0 1px 2px rgba(54, 38, 30, .34), 0 0 16px rgba(255, 255, 255, .22);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 760px) {
  .builder-page .model-watermark {
    font-size: clamp(30px, 11vw, 48px);
  }
}

/* Cute pixel bakery typography and storage-icon wallpaper */
.builder-page {
  --cute-font: "YouYuan", "幼圆", "Microsoft YaHei UI", "PingFang SC", sans-serif;
  --pixel-font: "Courier New", Consolas, monospace;
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(247, 235, 215, .76), rgba(244, 229, 203, .82)),
    var(--pixel-storage-pattern, none),
    radial-gradient(circle, rgba(145, 91, 49, .12) 0 3px, transparent 3.5px);
  background-position: 0 0, 0 0, 0 0;
  background-size: auto, 106px 106px, 30px 30px;
  font-family: var(--cute-font);
  font-size: 14px;
  animation: storage-wallpaper-drift 28s linear infinite;
}

.builder-page .brand strong,
.builder-page .hero-copy h1,
.builder-page .intro h1,
.builder-page .mode-copy b,
.builder-page .panel-heading h2,
.builder-page .result-title,
.builder-page .decision-modal-card h2 {
  font-family: var(--cute-font);
  font-weight: 900;
  letter-spacing: .01em;
}

.builder-page .brand strong {
  font-size: 15px;
  text-shadow: 1px 1px 0 rgba(255,255,255,.72);
}

.builder-page .brand small,
.builder-page .hero-copy .eyebrow,
.builder-page .mode-index,
.builder-page .section-number,
.builder-page .stage-meta,
.builder-page footer {
  font-family: var(--pixel-font);
}

.builder-page .hero-copy h1 {
  letter-spacing: -.025em;
  line-height: 1.08;
  text-shadow: 2px 2px 0 rgba(255, 250, 237, .92), 4px 4px 0 rgba(128, 79, 44, .10);
}

.builder-page .hero-copy > p:last-child {
  font-size: 14px;
  font-weight: 650;
}

.builder-page .mode-copy b {
  font-size: 22px;
}

.builder-page .mode-copy small,
.builder-page .panel-heading p,
.builder-page .step small {
  font-size: 11px;
}

.builder-page .panel-heading h2 {
  font-size: 16px;
}

.builder-page .product-hero {
  background-image:
    linear-gradient(rgba(255, 248, 232, .86), rgba(255, 247, 226, .9)),
    var(--pixel-storage-pattern, none);
  background-size: auto, 94px 94px;
  background-position: 0 0, 22px 8px;
}

.builder-page .control-panel,
.builder-page .result-panel {
  background-image:
    linear-gradient(rgba(255, 248, 232, .95), rgba(255, 248, 232, .95)),
    var(--pixel-storage-pattern, none);
  background-size: auto, 88px 88px;
}

@keyframes storage-wallpaper-drift {
  to {
    background-position: 0 0, 106px 53px, 30px 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .builder-page {
    animation: none !important;
  }
}

@media (max-width: 430px) {
  .builder-page .theme-toggle b,
  .builder-page .text-button {
    display: none;
  }

  .builder-page .hero-copy h1 {
    font-size: 29px;
  }

  .builder-page .parameter-grid {
    grid-template-columns: 1fr 1fr;
  }

  .builder-page .stage-meta {
    display: none;
  }
}

/* Selected visual system: warm pixel bakery */
.builder-page {
  --ink: #412d22;
  --muted: #816b58;
  --paper: #f2e3c9;
  --panel: #fff8e9;
  --line: #cdb28d;
  --acid: #b96f40;
  --acid-dark: #6c432c;
  --cream: #fff2d5;
  --sand: #e8cfa7;
  --toast: #d99951;
  --shadow: 4px 4px 0 rgba(100, 63, 38, .10), 0 18px 42px rgba(76, 48, 31, .07);
  background:
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(91, 59, 37, .025) 80px),
    var(--paper);
}

.builder-page .topbar {
  border-bottom: 2px solid rgba(101, 63, 40, .18);
  background: rgba(247, 234, 211, .94);
}

.builder-page .brand-mark {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.builder-page .brand-mark canvas {
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: auto;
  image-rendering: pixelated;
}

.builder-page .brand strong {
  letter-spacing: .08em;
}

.builder-page .brand small {
  display: block;
  color: var(--muted);
  font-size: 7px;
  letter-spacing: .08em;
}

.builder-page .status-pill span {
  border-radius: 0;
  background: #6f9b72;
  box-shadow: 0 0 0 3px rgba(111, 155, 114, .13);
}

.builder-page .product-hero {
  position: relative;
  margin-bottom: 18px;
  padding: 31px 22px 18px;
  overflow: hidden;
  border: 1px solid rgba(104, 64, 39, .22);
  border-radius: 10px;
  background: rgba(255, 248, 232, .88);
  box-shadow: 4px 4px 0 rgba(100, 63, 38, .09);
}

.builder-page .product-hero::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 10px;
  background: repeating-linear-gradient(90deg, #70432c 0 28px, #d49a68 28px 56px);
  content: "";
}

.builder-page .hero-copy {
  margin-inline: 3px;
}

.builder-page .hero-copy h1 {
  font-family: Georgia, "Songti SC", "Times New Roman", serif;
  font-weight: 600;
}

.builder-page .hero-copy h1 em,
.builder-page .hero-copy .eyebrow {
  color: var(--acid-dark);
}

.builder-page .product-modes {
  border-color: rgba(109, 69, 43, .23);
  border-radius: 8px;
  background: #e5c79d;
  box-shadow: inset 0 0 0 3px rgba(255, 246, 226, .38);
}

.builder-page .product-mode {
  border-radius: 5px;
}

.builder-page .product-mode:hover {
  background: rgba(255, 247, 228, .74);
}

.builder-page .product-mode.is-active {
  background: #fff7e5;
  box-shadow: 3px 3px 0 rgba(97, 61, 38, .12);
}

.builder-page .mode-index,
.builder-page .section-number {
  border-radius: 2px;
}

.builder-page .product-mode.is-active .mode-index,
.builder-page .section-number {
  border-color: #b97948;
  background: #efd2a6;
  color: #68432c;
}

.builder-page .control-panel,
.builder-page .result-panel,
.builder-page .stage-panel {
  border-color: rgba(101, 63, 39, .25);
  border-radius: 9px;
  background: rgba(255, 248, 232, .94);
}

.builder-page .control-panel::before,
.builder-page .result-panel::before {
  display: block;
  height: 6px;
  margin: -19px -17px 16px;
  background: repeating-linear-gradient(90deg, #855137 0 18px, #dca26c 18px 36px);
  content: "";
}

.builder-page .panel-heading h2,
.builder-page .result-title,
.builder-page .mode-copy b {
  font-family: Georgia, "Songti SC", "Times New Roman", serif;
}

.builder-page .drop-zone,
.builder-page .sample-button,
.builder-page .parameter-grid input,
.builder-page .parameter-grid select,
.builder-page .pattern-placement-card,
.builder-page .background-color-card,
.builder-page .download-group button {
  border-color: #cbb28f;
  border-radius: 5px;
  background: #fffaf0;
  box-shadow: 2px 2px 0 rgba(93, 60, 38, .06);
}

.builder-page .drop-zone {
  border-style: dashed;
  background:
    linear-gradient(rgba(255, 250, 238, .91), rgba(255, 250, 238, .91)),
    repeating-linear-gradient(45deg, #ead2ad 0 6px, #f7e7c9 6px 12px);
}

.builder-page .upload-icon {
  border-radius: 3px;
  background: #efd09d;
}

.builder-page input[type="range"] {
  accent-color: var(--acid);
}

.builder-page .stage-panel {
  background: #dfc49e;
}

.builder-page .stage-toolbar,
.builder-page .stage-actions,
.builder-page .hinge-card {
  background: rgba(255, 248, 232, .96);
}

.builder-page .canvas-wrap {
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 38%, #ffffff 0%, #fffefc 55%, #f1ede8 100%);
}

.builder-page .view-switch {
  border-radius: 4px;
  background: #e5cfad;
}

.builder-page .view-switch button,
.builder-page .stage-actions button,
.builder-page .empty-state button,
.builder-page .download-group button {
  border-radius: 4px;
}

.builder-page .view-switch button.is-active {
  background: #fff7e4;
  box-shadow: 2px 2px 0 rgba(91, 58, 38, .10);
}

.builder-page .primary-action,
.builder-page .empty-state button {
  border-color: #6d432b;
  background: #805039;
  color: #fff8e9;
  box-shadow: 3px 3px 0 #4c3022;
}

.builder-page .download-group .color-download,
.builder-page .download-group .three-mf-download,
.builder-page .download-group .polygon-download,
.builder-page .download-group .three-mf-download.polygon-download {
  border-color: #bd8058;
  background: #f4d8b7;
  color: #5f3b28;
}

.builder-page footer {
  color: #7c654f;
}

html[data-theme="night"] .builder-page {
  --paper: #2c2019;
  --panel: #39281f;
  --line: #745238;
}

@media (max-width: 760px) {
  .builder-page .product-hero {
    padding: 27px 13px 13px;
  }

  .builder-page .brand small {
    display: none;
  }

  .builder-page .control-panel::before,
  .builder-page .result-panel::before {
    margin-inline: -13px;
  }
}

/* Final cute-pixel layer: keep the wallpaper and rounded type above legacy theme rules. */
.builder-page {
  background-color: #f6e7c9;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(91, 59, 37, .024) 79px 80px),
    linear-gradient(rgba(249, 239, 216, .74), rgba(244, 226, 195, .82)),
    var(--pixel-storage-pattern, none),
    radial-gradient(circle, rgba(176, 116, 69, .15) 0 2px, transparent 2.5px);
  background-position: 0 0, 0 0, 24px 12px, 0 0;
  background-size: auto, auto, 106px 106px, 30px 30px;
  font-family: var(--cute-font);
  font-size: 14px;
  animation: storage-wallpaper-drift 28s linear infinite;
}

.builder-page .brand strong,
.builder-page .hero-copy h1,
.builder-page .panel-heading h2,
.builder-page .result-title,
.builder-page .mode-copy b {
  font-family: var(--cute-font);
  font-weight: 900;
}

.builder-page .hero-copy h1 {
  letter-spacing: -.045em;
  text-shadow: 2px 2px 0 rgba(190, 128, 76, .17);
}

.builder-page .brand small,
.builder-page .eyebrow,
.builder-page .mode-index,
.builder-page .section-number,
.builder-page .status-pill,
.builder-page .mode-state {
  font-family: var(--pixel-font);
  font-weight: 700;
}

.builder-page .product-hero {
  background-color: rgba(255, 248, 232, .9);
  background-image:
    linear-gradient(rgba(255, 248, 232, .79), rgba(255, 247, 226, .84)),
    var(--pixel-storage-pattern, none);
  background-position: 0 0, 22px 8px;
  background-size: auto, 94px 94px;
}

.builder-page .control-panel,
.builder-page .result-panel {
  background-color: rgba(255, 248, 232, .95);
  background-image:
    linear-gradient(rgba(255, 248, 232, .9), rgba(255, 248, 232, .93)),
    var(--pixel-storage-pattern, none);
  background-size: auto, 86px 86px;
}

@media (prefers-reduced-motion: reduce) {
  .builder-page {
    animation: none;
  }
}

.builder-page .region-selector {
  position: relative;
  z-index: 9;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  margin: 8px 12px 0;
  padding: 9px 10px;
  border: 1px solid rgba(112, 67, 43, .28);
  border-radius: 8px;
  background:
    linear-gradient(rgba(255, 249, 235, .94), rgba(255, 246, 226, .94)),
    var(--pixel-storage-pattern, none);
  background-size: auto, 80px 80px;
  box-shadow: 3px 4px 0 rgba(95, 59, 37, .11);
  backdrop-filter: blur(7px);
}

.builder-page .stage-panel:has(.region-selector:not([hidden])) .canvas-wrap {
  min-height: 430px;
}

.builder-page .region-selector[hidden] {
  display: none;
}

.builder-page .region-selector-icon {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 2px solid #6f9817;
  border-radius: 50%;
  background: #dff39d;
  color: #4e7110;
  font: 900 19px/1 var(--pixel-font);
  box-shadow: inset 0 0 0 3px rgba(255, 252, 239, .72);
}

.builder-page .region-selector-copy {
  min-width: 0;
  flex: 1;
}

.builder-page .region-selector-copy b,
.builder-page .region-selector-copy strong,
.builder-page .region-selector-copy small {
  display: block;
}

.builder-page .region-selector-copy b {
  margin-bottom: 2px;
  color: #70432c;
  font: 900 9px/1 var(--pixel-font);
  letter-spacing: .05em;
}

.builder-page .region-selector-copy strong {
  overflow: hidden;
  color: #3d2b20;
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.builder-page .region-selector-copy small {
  margin-top: 2px;
  color: #806b58;
  font-size: 8px;
}

.builder-page .region-selector-actions {
  display: flex;
  gap: 6px;
}

.builder-page .region-selector-actions button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #a97c55;
  border-radius: 5px;
  background: #fff9e9;
  color: #65432e;
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
}

.builder-page .region-selector-actions button:last-child {
  border-color: #607f23;
  background: #dff0a8;
  color: #405b10;
}

.builder-page .region-selector-actions button:disabled {
  cursor: not-allowed;
  filter: grayscale(.4);
  opacity: .45;
}

@media (max-width: 760px) {
  .builder-page .stage-panel {
    position: relative;
  }

  .builder-page .region-selector {
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 7px 8px 0;
  }

  .builder-page .region-selector-copy {
    width: calc(100% - 48px);
    flex: none;
  }

  .builder-page .region-selector-copy strong {
    white-space: normal;
  }

  .builder-page .region-selector-actions {
    width: 100%;
  }

  .builder-page .region-selector-actions button {
    flex: 1;
  }

  .builder-page .stage-panel:has(.region-selector:not([hidden])) .canvas-wrap {
    min-height: 350px;
  }
}