:root {
  --ink: #17263a;
  --muted: #5f7080;
  --paper: #f6f8f8;
  --panel: #ffffff;
  --line: #e3e9ec;
  --accent: #b84f3b;
  --accent-dark: #923c2e;
  --shadow: 0 16px 42px rgba(22, 38, 58, .06);
}
html { font-family: "Avenir Next", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { background: radial-gradient(circle at 14% 3%, #fff6ee 0, transparent 27%), radial-gradient(circle at 90% 22%, #eaf2f5 0, transparent 32%), var(--paper); }
button, input, select { transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
:focus-visible { outline: 3px solid #eb9b78; outline-offset: 3px; }
.topbar { height: 78px; background: #101c2f; border-bottom: 1px solid #ffffff1c; padding: 0 max(28px, calc((100vw - 1510px) / 2)); position: sticky; top: 0; z-index: 40; }
.brand { gap: 12px; letter-spacing: normal; }
.brand-mark { width: 43px; height: 43px; display: block; flex: none; background: transparent; border-radius: 10px; }
.brand-type { display: flex; flex-direction: column; gap: 2px; }
.brand-type strong { font-size: 15px; line-height: 1.1; letter-spacing: .19em; font-weight: 800; color: #fff; }
.brand-type small { font-size: 11px; line-height: 1.3; letter-spacing: .025em; font-weight: 500; color: #b7c3cf; }
.local-badge { color: #b5c4d0; font-size: 11px; }
.top-actions select { min-width: 172px; max-width: 205px; background: #1b2b40; border: 1px solid #425267; color: #f6f7f8; border-radius: 10px; padding: 11px 12px; }
.ghost { border-color: #56677b; border-radius: 10px; padding: 11px 15px; font-weight: 700; }
.ghost:hover { background: #ffffff13; }
main { max-width: 1510px; padding: 29px 28px 18px; }
.intro { min-height: 296px; position: relative; isolation: isolate; align-items: flex-start; padding: 39px 43px; margin: 0 0 21px; background: linear-gradient(116deg, #fffdfa 0%, #fff 54%, #f4f0ea 100%); border: 1px solid #e9e4de; border-radius: 24px; box-shadow: 0 18px 52px rgba(31, 43, 57, .055); overflow: hidden; }
.intro::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 82% 8%, #f8cfb567, transparent 35%), linear-gradient(115deg, transparent 72%, #edf2f3aa); }
.intro > div:first-child { position: relative; z-index: 2; }
.eyebrow { color: #a74734; font-size: 10px; letter-spacing: .2em; }
h1 { font-family: "Avenir Next", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: clamp(43px, 4.1vw, 66px); font-weight: 680; letter-spacing: -.055em; line-height: 1.02; margin-bottom: 17px; }
h1 em { font-family: "Iowan Old Style", Baskerville, Georgia, serif; font-weight: 400; color: #b95643; letter-spacing: -.045em; }
.intro-copy { max-width: 600px; color: #516273; font-size: 15px; line-height: 1.65; }
.step-chip { position: absolute; right: 35px; bottom: 27px; z-index: 3; margin: 0; border-color: #e7ded5; background: #fffdfae8; box-shadow: 0 9px 25px #26344710; color: #536274; }
.step-chip span { color: #a94936; }
.hero-visual { position: absolute; width: 330px; height: 198px; right: 51px; top: 20px; pointer-events: none; }
.visual-card { position: absolute; width: 160px; height: 137px; border: 7px solid #fff; border-radius: 19px; box-shadow: 0 14px 29px #1423392c; overflow: hidden; }
.visual-card-back { left: 34px; top: 34px; transform: rotate(-10deg); background: linear-gradient(142deg, #dfeaec, #a3c4c5 67%, #809ca6); }
.visual-card-front { left: 140px; top: 16px; transform: rotate(9deg); background: linear-gradient(138deg, #e9b8a6, #eb8066 60%, #b44f4f); }
.visual-sun { position: absolute; width: 37px; height: 37px; right: 20px; top: 20px; border-radius: 50%; background: #fff9e0; opacity: .88; }
.visual-hill { position: absolute; width: 172px; height: 70px; left: -10px; bottom: -10px; border-radius: 60% 60% 0 0; transform: rotate(-12deg); background: #6f9798; }
.visual-glow { position: absolute; width: 120px; height: 120px; left: 16px; top: 13px; border-radius: 50%; background: #ffded177; filter: blur(7px); }
.visual-play { position: absolute; left: 55px; top: 35px; width: 59px; height: 59px; background: #fffaf3; border-radius: 50%; box-shadow: 0 7px 20px #7e373d38; }
.visual-play::after { content: ""; position: absolute; left: 23px; top: 18px; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 18px solid #cd5e4d; }
.visual-trail { position: absolute; height: 4px; border-radius: 10px; background: #d47a66; opacity: .45; transform: rotate(-19deg); }
.visual-trail-one { width: 47px; left: 5px; top: 73px; }
.visual-trail-two { width: 31px; left: 16px; top: 89px; }
.mode-choice { gap: 15px; margin: 0 0 19px; }
.mode-card { min-height: 92px; gap: 16px; padding: 17px 20px; border-radius: 17px; background: #fff; border: 1px solid #e2e8eb; box-shadow: 0 11px 31px #16263a0b; }
.mode-card:hover { transform: translateY(-2px); border-color: #c98573; box-shadow: 0 16px 37px #16263a12; }
.mode-card.active { border-color: #c86b55; background: linear-gradient(115deg, #fff7f2, #fff); box-shadow: inset 0 0 0 1px #d9766140, 0 15px 34px #99483712; }
.mode-card strong { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.mode-card small { font-size: 12px; margin-top: 5px; }
.mode-icon { width: 49px; height: 49px; flex: none; background: #f5e8e1; color: #a84c3b; border-radius: 13px; }
.mode-icon svg { width: 29px; height: 29px; }
.mode-card.active .mode-icon { background: #bd5842; color: #fff; box-shadow: 0 7px 17px #a2493d2a; }
.mode-arrow { margin-left: auto; align-self: center; font-size: 20px; color: #aab3bc; }
.mode-card.active .mode-arrow { color: #b84f3b; }
.workspace { grid-template-columns: minmax(250px, 300px) minmax(390px, 1fr) minmax(250px, 300px); gap: 17px; }
.panel, .stage-panel { border-radius: 20px; border-color: var(--line); box-shadow: var(--shadow); }
.panel-section { padding: 23px; }
.section-heading { gap: 11px; margin-bottom: 18px; }
.step-number { width: 32px; height: 32px; border-radius: 9px; background: #faeae3; color: #a74937; font-size: 11px; }
.section-heading h2, .stage-top h2, .selection-panel h3 { font-family: "Avenir Next", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 680; letter-spacing: -.035em; }
.section-heading h2 { font-size: 20px; margin: 0 0 2px; }
.section-heading p { font-size: 11px; line-height: 1.4; }
.field-label { color: #34475a; font-size: 11px; margin-top: 18px; }
.panel input[type=text], .field-select { background: #fbfcfc; border: 1px solid #dce4e8; border-radius: 10px; height: 43px; color: #1e3045; }
.panel input[type=text]:focus, .field-select:focus { border-color: #b95a45; box-shadow: 0 0 0 3px #db806430; outline: none; }
.upload-box { min-height: 137px; margin-top: 21px; border-radius: 13px; border: 1.5px dashed #c88e7e; background: linear-gradient(145deg, #fff9f5, #fffdfb); }
.upload-box:hover, .upload-inline:hover { background: #fff4ed; border-color: #a84937; }
.upload-icon { color: #b4523d; font-size: 31px; }
.helper { color: #657483; font-size: 11px; line-height: 1.55; }
.scenario-card { border-radius: 11px; min-height: 57px; }
.scenario-card.active { background: #fff6f1; border-color: #bf6b56; box-shadow: inset 0 0 0 1px #cf877244; }
.scenario-card .scenario-symbol { background: #f4ebe7; border-radius: 9px; }
.photo-item { border-radius: 10px; background: #f8fafb; }
.photo-controls button { border-radius: 6px; }
.stage-panel { padding: 24px 24px 14px; }
.stage-top { margin-bottom: 17px; }
.stage-top h2 { font-size: 23px; }
.stage-switch { border-radius: 10px; background: #f0f3f4; }
.stage-switch button { border-radius: 8px; }
.stage-shell { min-height: 602px; border-radius: 15px; background: radial-gradient(circle at 50% 15%, #fff8f2 0, #eaf0f2 52%, #dce5e9 100%); border: 1px solid #e2e9ec; }
.stage-shell canvas { height: min(67vh, 650px); border-radius: 12px; box-shadow: 0 21px 45px #26374836, 0 2px 9px #2637481b; }
.stage-hint { font-size: 11px; bottom: 22px; background: #14253be8; box-shadow: 0 7px 23px #101b2b38; }
.stage-footer { color: #70808e; }
.tool-button { border-radius: 11px; min-height: 69px; height: auto; background: #f9fafb; border-color: #e2e8eb; color: #384a59; }
.tool-button:hover { background: #fff5ef; border-color: #c17963; }
.tool-button span { color: #a84d3a; }
.upload-inline { border-radius: 10px; background: #fffdfb; }
.primary, .secondary { height: 47px; border-radius: 10px; font-size: 12px; letter-spacing: .01em; }
.primary { background: linear-gradient(135deg, #b84f3b, #a94437); box-shadow: 0 10px 23px #ab483a30; }
.primary:hover { background: linear-gradient(135deg, #ae4837, #873529); transform: translateY(-1px); box-shadow: 0 13px 26px #ab483a3b; }
.secondary { border-color: #dbe3e7; color: #31465a; }
.secondary:hover { border-color: #aebec7; background: #f8fafb; }
footer { border-top: 1px solid #e2e7e8; margin-top: 19px; color: #75828c; }
footer span:first-child { color: #243649; letter-spacing: .2em; }
@media (max-width: 1180px) {
  .intro { min-height: 273px; }
  .hero-visual { right: 32px; transform: scale(.82); transform-origin: right top; }
  .intro-copy { max-width: 540px; }
}
@media (max-width: 880px) {
  .hero-visual { display: none; }
  .intro { min-height: auto; }
  .step-chip { position: static; display: inline-block; margin-top: 21px; }
}
@media (max-width: 760px) {
  .topbar { height: 65px; padding: 0 14px; }
  .brand-mark { width: 36px; height: 36px; }
  .brand-type strong { font-size: 12px; letter-spacing: .14em; }
  .brand-type small { display: none; }
  .top-actions select { min-width: 0; width: 106px; max-width: 106px; padding: 8px; }
  .ghost { padding: 8px 10px; }
  main { padding: 17px 13px 12px; }
  .intro { padding: 27px 23px; margin-bottom: 14px; border-radius: 19px; }
  h1 { font-size: clamp(39px, 11vw, 54px); }
  .intro-copy { font-size: 13px; }
  .step-chip { font-size: 10px; padding: 8px 12px; }
  .mode-choice { gap: 9px; margin-bottom: 13px; }
  .mode-card { min-height: 76px; padding: 13px 15px; border-radius: 14px; }
  .mode-icon { width: 42px; height: 42px; }
  .mode-icon svg { width: 24px; height: 24px; }
  .mode-card strong { font-size: 14px; }
  .mode-card small { font-size: 11px; }
  .panel, .stage-panel { border-radius: 17px; }
  .panel-section { padding: 21px; }
  .stage-panel { padding: 17px; }
  .stage-shell { min-height: auto; }
  .stage-shell canvas { height: min(64vh, 610px); }
}
@media (max-width: 420px) {
  .topbar .top-actions select { width: 92px; max-width: 92px; }
  .brand { gap: 7px; }
  .brand-mark { width: 32px; height: 32px; }
  .brand-type strong { font-size: 11px; letter-spacing: .12em; }
  .ghost { font-size: 10px; padding: 8px 7px; }
  .mode-arrow { display: none; }
}