:root {
  --paper: #f0eadc;
  --paper-2: #e7dfcf;
  --ink: #24231f;
  --muted: #766f63;
  --line: rgba(36, 35, 31, .24);
  --red: #e6533e;
  --acid: #c8f43d;
  --black: #171814;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "PingFang SC", "Hiragino Sans GB", sans-serif;
  min-width: 320px;
}
button, input, textarea, select { font: inherit; }
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .2; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E"); }

.masthead { height: 86px; padding: 0 clamp(22px, 4vw, 68px); border-bottom: 1px solid var(--ink); display: flex; align-items: center; justify-content: space-between; }
.wordmark { display: flex; align-items: baseline; gap: 15px; }
.wordmark span { font-family: "STSong", "Songti SC", serif; font-size: 29px; font-weight: 900; letter-spacing: -.08em; }
.wordmark small, .run-stats, .kicker, .panel-label, legend, .ticket-head, footer { font-family: "Avenir Next Condensed", "DIN Condensed", sans-serif; letter-spacing: .13em; }
.wordmark small { font-size: 10px; }
.run-stats { display: flex; gap: 30px; font-size: 10px; text-transform: uppercase; }
.run-stats b { font-size: 17px; margin-right: 5px; letter-spacing: 0; }
.sync-indicator i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #55a847; box-shadow: 0 0 0 4px rgba(85,168,71,.14); margin-right: 8px; }

main { padding: 0 clamp(20px, 4vw, 68px) 90px; }
.intro { position: relative; display: grid; grid-template-columns: 1.45fr .55fr; gap: 7vw; padding: 72px 0 52px; align-items: end; }
.kicker { grid-column: 1/-1; margin: 0 0 8px; color: var(--red); font-size: 11px; font-weight: 800; }
h1, h2 { font-family: "STSong", "Songti SC", serif; margin: 0; line-height: .94; letter-spacing: -.07em; }
h1 { font-size: clamp(52px, 7.3vw, 114px); font-weight: 900; }
h1 em { font-style: normal; color: var(--red); position: relative; }
h1 em::after { content: ""; position: absolute; left: -3%; right: -5%; bottom: 3%; height: 8%; background: var(--acid); z-index: -1; transform: rotate(-2deg); }
.intro-copy { font-family: "STSong", "Songti SC", serif; font-size: clamp(15px, 1.4vw, 19px); line-height: 1.85; max-width: 410px; margin: 0 0 5px; }

.workbench { border: 1px solid var(--ink); background: rgba(255,255,255,.12); box-shadow: 13px 13px 0 var(--ink); }
.workflow { height: 79px; display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--ink); }
.flow-step { padding: 13px 17px; border-right: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; grid-template-rows: 18px 1fr; column-gap: 10px; align-items: center; color: var(--muted); }
.flow-step:last-child { border-right: 0; }
.flow-step b { grid-row: 1/3; font-family: Georgia, serif; font-size: 29px; font-weight: 400; }
.flow-step span { font: 700 9px "Avenir Next Condensed", sans-serif; letter-spacing: .14em; }
.flow-step strong { font: 600 13px "PingFang SC", sans-serif; color: var(--ink); }
.flow-step.active { background: var(--red); color: #fff; }
.flow-step.active strong { color: #fff; }

.studio-form { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(380px, .75fr); min-height: 760px; }
.canvas-panel { padding: 27px; border-right: 1px solid var(--ink); display: flex; flex-direction: column; min-width: 0; }
.panel-label { display: flex; align-items: center; gap: 10px; margin-bottom: 17px; font-size: 11px; font-weight: 800; }
.panel-label span { display: grid; place-items: center; width: 23px; height: 23px; background: var(--ink); color: var(--paper); }
.dropzone { flex: 1; min-height: 590px; border: 1px dashed var(--ink); position: relative; display: grid; place-items: center; overflow: hidden; cursor: pointer; background-color: rgba(255,255,255,.16); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 38px 38px; transition: .25s; }
.dropzone::before, .dropzone::after { content: ""; position: absolute; width: 34px; height: 34px; border-color: var(--red); border-style: solid; z-index: 2; }
.dropzone::before { left: 15px; top: 15px; border-width: 2px 0 0 2px; }
.dropzone::after { right: 15px; bottom: 15px; border-width: 0 2px 2px 0; }
.dropzone.dragging { background-color: rgba(200,244,61,.28); transform: scale(.995); }
.dropzone input, .reference-upload input { position: absolute; opacity: 0; pointer-events: none; }
.drop-copy { position: relative; z-index: 2; display: flex; flex-direction: column; text-align: center; align-items: center; gap: 10px; padding: 28px; background: var(--paper); border: 1px solid var(--ink); box-shadow: 7px 7px 0 var(--red); }
.drop-copy b { font-family: "STSong", serif; font-size: 23px; }
.drop-copy small { font-size: 10px; color: var(--muted); }
.drop-copy i { margin-top: 6px; font-style: normal; font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
#product-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; background: rgba(237,231,219,.9); transition: opacity .3s; }
.dropzone.has-image #product-preview { opacity: 1; }
.dropzone.has-image .drop-copy { transform: translateY(245px); opacity: .82; }

.output-stage { flex: 1; min-height: 590px; background: #181915; padding: 12px; display: flex; flex-direction: column; }
.output-tabs { display: flex; gap: 6px; padding: 4px 4px 11px; }
.output-tabs button { appearance: none; border: 1px solid #55564f; background: none; color: #999b91; padding: 8px 13px; font-size: 11px; cursor: pointer; }
.output-tabs button.active { background: var(--acid); color: #151612; border-color: var(--acid); }
.output-stage figure { margin: 0; flex: 1; min-height: 0; display: grid; place-items: center; position: relative; }
.output-stage figure img { width: 100%; height: 540px; object-fit: contain; animation: reveal .5s ease both; }
.output-stage figcaption { position: absolute; left: 8px; bottom: 8px; padding: 7px 9px; background: #f0eadc; color: #222; font-size: 10px; }

.ticket { padding: 27px; background: var(--paper-2); }
.ticket-head { display: flex; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 12px; margin-bottom: 22px; font-size: 10px; }
.ticket-head b { color: var(--red); }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field span, legend, .range-field span { font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--line); border-radius: 0; background: rgba(255,255,255,.25); color: var(--ink); padding: 11px 12px; outline: none; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--red); box-shadow: inset 3px 0 0 var(--red); }
.full { margin-bottom: 20px; }
fieldset { border: 0; padding: 0; margin: 0 0 20px; }
legend { margin-bottom: 9px; }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); }
.segmented input, .style-card input { position: absolute; opacity: 0; }
.segmented span { display: block; border: 1px solid var(--line); margin-right: -1px; padding: 10px 5px; text-align: center; font-size: 11px; cursor: pointer; background: rgba(255,255,255,.15); }
.segmented input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.style-card > span { display: flex; flex-direction: column; gap: 3px; padding: 7px; border: 1px solid transparent; cursor: pointer; }
.style-card i { display: block; height: 46px; margin-bottom: 3px; border: 1px solid rgba(0,0,0,.1); }
.style-card.cream i { background: radial-gradient(circle at 25% 40%, #e6533e 0 13%, transparent 14%), linear-gradient(135deg,#fbf4e5,#dcae78); }
.style-card.obsidian i { background: linear-gradient(120deg,transparent 30%,#c8f43d 31% 33%,transparent 34%), linear-gradient(135deg,#11141a,#384755); }
.style-card.botanic i { background: radial-gradient(ellipse at 70% 30%,#ffc967 0 17%,transparent 18%), linear-gradient(135deg,#e2ead7,#6f8e6e); }
.style-card b { font-size: 11px; }
.style-card small { color: var(--muted); font-size: 9px; }
.style-card input:checked + span { border-color: var(--ink); background: rgba(255,255,255,.3); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 13px; }
.reference-upload { display: block; position: relative; border: 1px dashed var(--line); padding: 11px 12px; cursor: pointer; margin-bottom: 16px; }
.reference-upload span { display: flex; flex-direction: column; gap: 3px; }
.reference-upload b { font-size: 11px; }
.reference-upload small { font-size: 9px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.range-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.range-field span { display: flex; justify-content: space-between; }
.range-field output { color: var(--red); }
.range-field input { accent-color: var(--red); }
.generate { width: 100%; border: 1px solid var(--ink); background: var(--red); color: white; padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; box-shadow: 6px 6px 0 var(--ink); transition: transform .15s, box-shadow .15s; }
.generate:hover { transform: translate(2px,2px); box-shadow: 4px 4px 0 var(--ink); }
.generate:disabled { opacity: .7; cursor: wait; }
.generate span { font-family: "STSong", serif; font-size: 18px; font-weight: 900; }
.generate small { font-size: 9px; letter-spacing: .1em; }
.generate.working small { animation: blink 1s infinite; }
.demo-note { font-size: 9px; line-height: 1.5; color: var(--muted); margin: 15px 0 0; }
.demo-note b { color: var(--ink); }

.results { padding-top: 110px; }
.results-head { display: flex; justify-content: space-between; align-items: end; border-bottom: 1px solid var(--ink); padding-bottom: 23px; }
h2 { font-size: clamp(42px, 5vw, 74px); }
.download { color: var(--ink); background: var(--acid); padding: 14px 16px; text-decoration: none; border: 1px solid var(--ink); font-weight: 700; font-size: 12px; box-shadow: 5px 5px 0 var(--ink); }
.deliverables { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 27px 0 56px; }
.deliverable { animation: rise .5s var(--delay) both; }
.deliverable > div { height: 440px; border: 1px solid var(--ink); background: #1a1b17; padding: 11px; margin-bottom: 12px; }
.deliverable img { width: 100%; height: 100%; object-fit: contain; }
.deliverable span { font: 800 10px "Avenir Next Condensed", sans-serif; letter-spacing: .12em; color: var(--red); }
.deliverable b { display: block; font-family: "STSong", serif; font-size: 20px; margin-top: 4px; }
.deliverable a { display: inline-block; color: var(--ink); font-size: 10px; margin-top: 8px; text-underline-offset: 3px; }
.audit-grid { display: grid; grid-template-columns: 1.35fr .8fr .85fr; border: 1px solid var(--ink); }
.audit-grid article { padding: 25px; border-right: 1px solid var(--ink); min-height: 230px; }
.audit-grid article:last-child { border-right: 0; }
.audit-grid article > p { margin: 0 0 24px; font: 800 11px "Avenir Next Condensed", sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.bar-row { display: grid; grid-template-columns: 100px 1fr 58px; gap: 9px; align-items: center; margin: 14px 0; font-size: 10px; }
.bar-row i { height: 12px; background: rgba(0,0,0,.09); }
.bar-row i b { display: block; height: 100%; background: var(--ink); }
.bar-row.ai i b { width: 6%; background: var(--red); transition: width .8s ease; }
.cost-card em { display: inline-block; color: var(--red); font-family: "STSong", serif; font-size: 19px; font-style: normal; margin-top: 20px; }
.ps-card { background: var(--acid); }
.ps-card ol { padding-left: 19px; font-family: "STSong", serif; line-height: 2.15; font-size: 14px; }
.log-card dl { margin: 0; }
.log-card dl div { border-top: 1px solid var(--line); padding: 9px 0; }
.log-card dt { font-size: 9px; color: var(--muted); }
.log-card dd { margin: 3px 0 0; font-size: 10px; word-break: break-all; }

footer { min-height: 84px; background: var(--black); color: var(--paper); display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 4vw, 68px); font-size: 9px; }
.toast { position: fixed; right: 25px; bottom: 25px; max-width: 390px; background: var(--black); color: white; padding: 15px 18px; font-size: 12px; transform: translateY(130%); opacity: 0; z-index: 30; transition: .3s; box-shadow: 6px 6px 0 var(--acid); }
.toast.show { transform: translateY(0); opacity: 1; }
.toast.error { box-shadow: 6px 6px 0 var(--red); }

@keyframes rise { from { opacity:0; transform:translateY(22px) } }
@keyframes reveal { from { opacity:0; transform:scale(.97) } }
@keyframes blink { 50% { opacity:.35 } }

@media (max-width: 900px) {
  .run-stats span:not(.sync-indicator) { display: none; }
  .intro { grid-template-columns: 1fr; padding-top: 50px; }
  .intro-copy { max-width: 570px; }
  .workflow { overflow-x: auto; grid-template-columns: repeat(5, minmax(140px, 1fr)); }
  .studio-form { grid-template-columns: 1fr; }
  .canvas-panel { border-right: 0; border-bottom: 1px solid var(--ink); }
  .dropzone { min-height: 480px; }
  .deliverables { grid-template-columns: 1fr; }
  .deliverable > div { height: 540px; }
  .audit-grid { grid-template-columns: 1fr; }
  .audit-grid article { border-right: 0; border-bottom: 1px solid var(--ink); }
}

@media (max-width: 560px) {
  .masthead { height: 70px; }
  .wordmark small { display: none; }
  main { padding-inline: 13px; }
  h1 { font-size: 51px; }
  .studio-form { min-height: auto; }
  .canvas-panel, .ticket { padding: 15px; }
  .dropzone, .output-stage { min-height: 410px; }
  .output-stage figure img { height: 360px; }
  .style-grid { grid-template-columns: 1fr; }
  .style-card > span { display: grid; grid-template-columns: 55px 1fr; }
  .style-card i { grid-row: 1/3; margin: 0 8px 0 0; }
  .two-col { grid-template-columns: 1fr; }
  .results-head { align-items: start; flex-direction: column; gap: 24px; }
  .deliverable > div { height: 430px; }
  footer { gap: 20px; flex-direction: column; align-items: start; padding-block: 25px; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto !important; animation:none !important; transition:none !important; } }