/* Visitor experience: one questionnaire, one artwork, one queue ticket. */
.public-app { --blue: #0F218B; --yellow: #0F218B; --ink: #333; --muted: #666; --line: #ccc; --paper: #F2F2F2; --radius: 4px; display: block; height: auto; min-height: 100dvh; overflow: visible; background: var(--paper); color: var(--ink); }
.public-app::before, .public-app::after { display: none; }
.public-app .experience-layout, .public-app .stage-stack,
.public-app .experience-stage:not(.hidden), .public-app #choose-stage.experience-stage:not(.hidden) { height: auto; max-height: none; min-height: 0; overflow: visible; }
.public-app #survey-form { display: block; height: auto; padding: 0; }
.public-app .survey-pages, .public-app .survey-page, .public-app .survey-page-body { height: auto; max-height: none; overflow: visible; flex: none; }
.public-app .survey-page-body .question-block { display: block; flex: none; }
.public-app .survey-page-body .choice-grid { grid-auto-rows: auto; flex: none; }
.public-app .survey-progress-line { display: none; }
.public-app [hidden] { display: none !important; }
.public-app .public-header { position: relative; height: auto; min-height: 76px; padding: 18px 24px; border-bottom: 1px solid var(--blue); box-shadow: inset 0 -3px 0 var(--yellow); background: #fff; }
.public-app .public-header-meta, .public-app .ticket-rail { display: none !important; }
.public-app .public-main { display: block; width: min(100% - 32px, 760px); max-width: 760px; margin: 26px auto 48px; padding: 0; }
.public-app .experience-layout, .public-app .stage-stack { display: block; min-width: 0; }
.public-app .flow-nav { position: static; display: block; min-height: 0; margin: 0 0 22px; padding: 0; border: 0; box-shadow: none; background: none; width: auto; }
.public-app .flow-nav-intro, .public-app .flow-step small, .public-app .flow-step .flow-lock { display: none !important; }
.public-app .flow-nav ol { display: flex; align-items: center; width: 100%; padding: 0; margin: 0; }
.public-app .flow-item { flex: 1; min-width: 0; }
.public-app .flow-step { width: 100%; padding: 10px 4px; min-height: 46px; display: flex; gap: 7px; align-items: center; justify-content: center; background: #fff; border: 1px solid #ddd; border-radius: 4px; box-shadow: none; color: var(--muted); }
.public-app .flow-step > span { display: inline-grid; place-items: center; height: 25px; width: 25px; min-width: 25px; margin: 0; font: 700 11px/1 ui-monospace,Consolas,monospace; background: #e9e9e9; color: inherit; border: 0; border-radius: 3px; }
.public-app .flow-step b { font-size: 12px; }
.public-app .flow-step.active { color: var(--blue); border-color: #b9bfdc; background: #F1F2F9; box-shadow: inset 0 -3px 0 var(--yellow); }
.public-app .flow-step.active > span { background: var(--blue); color: white; }
.public-app .flow-step.complete > span { color: var(--blue); background: #fff; border: 1px solid var(--blue); }
.public-app .flow-step:disabled { color: var(--muted); background: #f7f7f7; opacity: 1; }
.public-app .flow-connector { flex: 0 0 10px; width: 10px; height: 1px; margin: 0; background: var(--line); }
.public-app .experience-panel { padding: 28px; border: 1px solid #ddd; border-radius: 4px; background: #fff; box-shadow: none; }
.public-app .panel-heading { gap: 15px; margin-bottom: 24px; padding: 0 0 0 14px; border: 0; box-shadow: inset 4px 0 0 var(--blue); }
.public-app .panel-heading::before { display: none; }
.public-app .panel-heading h2 { font-size: 25px; line-height: 1.4; color: #000; }
.public-app .panel-heading p { margin-top: 8px; font-size: 13px; line-height: 1.8; color: var(--muted); }
.public-app #survey-stage .panel-heading p { display: block; }
.public-app .panel-heading .section-code, .public-app .panel-heading > .panel-badge:not(.panel-progress-badge) { display: none; }
.public-app #survey-stage .panel-heading { align-items: start; }
.public-app .panel-progress-badge { width: auto; min-width: 62px; padding: 8px; border: 1px solid var(--blue); background: #F3F4FA; border-radius: 4px; color: var(--blue); box-shadow: inset 0 -3px 0 var(--yellow); }
.public-app .panel-progress-badge small { font-size: 10px; }
.public-app .panel-progress-badge b { font-size: 18px; }
.survey-optional { display: flex; align-items: center; justify-content: space-between; margin: -8px 0 20px; padding-bottom: 10px; border-bottom: 1px solid #ddd; font-size: 12px; color: var(--muted); }
.survey-optional button { font: inherit; font-size: 12px; color: var(--muted); background: none; border: 0; min-height: 44px; padding: 10px 0 10px 16px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.public-app .survey-pages { display: grid; gap: 24px; }
.public-app .survey-page { display: block !important; margin: 0; padding: 0 0 24px; min-height: 0; border-bottom: 1px solid #ddd; animation: none; }
.public-app .survey-page:last-child { border-bottom: 0; padding-bottom: 0; }
.public-app .survey-page-heading { display: none; }
.public-app .survey-page-body { display: block; min-height: 0; }
.public-app .question-block { border: 0; padding: 0; margin: 0; min-width: 0; }
.public-app .name-field { padding: 0 0 22px; margin-bottom: 22px; border-bottom: 1px solid #ddd; }
.public-app .name-field label { color: var(--ink); font-size: 14px; }
.public-app .name-field input { min-height: 46px; font-size: 16px; background: #fff; border: 1px solid #bbb; border-radius: 4px; }
.public-app .question-block legend { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 14px; padding: 0; width: 100%; }
.public-app .question-block legend strong { flex: 1; min-width: 0; font-size: 17px; line-height: 1.7; color: #000; }
.public-app .question-block legend > span { display: inline-grid; place-items: center; flex: 0 0 29px; height: 29px; font: 700 12px/1 ui-monospace,Consolas,monospace; color: var(--blue); background: #F0F1F8; border-radius: 4px; padding: 0; }
.public-app .question-block legend > b { flex-shrink: 0; margin: 3px 0 0 auto; padding: 3px 6px; font-size: 10px; line-height: 1.5; font-weight: 400; color: var(--muted); background: #f2f2f2; border-radius: 3px; }
.public-app .choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.public-app .choice-grid label { min-width: 0; }
.public-app .choice-grid label > span { position: relative; display: flex; align-items: center; justify-content: flex-start; min-height: 48px; height: 100%; padding: 11px 30px 11px 49px; line-height: 1.6; font-size: 15px; color: var(--ink); border: 1px solid #bfc1c8; border-radius: 4px; background: #fff; box-shadow: none; overflow-wrap: anywhere; }
.public-app .choice-grid label > span::before { content: attr(data-choice-code); position: absolute; top: 50%; left: 9px; display: grid; place-items: center; width: 29px; height: 29px; transform: translateY(-50%); border: 1px solid #bfc4df; border-radius: 4px; background: #F0F1F8; color: var(--blue); font: 700 12px/1 ui-monospace,Consolas,monospace; box-shadow: none; }
.public-app .choice-grid label > span::after { content: ''; position: absolute; display: block; top: 50%; right: 14px; width: 6px; height: 11px; border: solid var(--yellow); border-width: 0 3px 3px 0; transform: translateY(-65%) rotate(45deg); opacity: 0; }
.public-app .choice-grid label:hover > span { border-color: var(--blue); background: #F7F7FB; transform: none; box-shadow: none; }
.public-app .choice-grid input:checked + span { border-color: var(--blue); color: var(--blue); background: #F0F1F8; font-weight: 700; box-shadow: none; }
.public-app .choice-grid input:checked + span::before { color: #fff; background: var(--blue); border-color: var(--blue); }
.public-app .choice-grid input:checked + span::after { opacity: 1; }
.public-app .choice-grid input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: 2px; }
.public-app .other-field { margin-top: 10px; }
.public-app .survey-page-controls { display: block; position: static; margin-top: 26px; padding: 0; border: 0; background: none; box-shadow: none; }
.public-app #survey-next { width: 100%; min-height: 50px; border-radius: 4px; justify-content: center; }
.public-app .primary-button, .public-app .studio-cloud .studio-primary { border-radius: 4px; background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: inset 0 -3px 0 #0002; }
.public-app .primary-button:focus-visible, .public-app button:focus-visible, .public-app input:focus-visible, .public-app select:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.public-app .form-footer { justify-content: center; margin-top: 15px; font-size: 10px; }
.public-app .form-footer > span:last-child { display: none; }
.public-app #portrait-stage .portrait-footer-actions > [data-back] { display: none; }
.public-app .studio-cloud .studio-mobile-edition, .public-app .studio-cloud .studio-progress,
.public-app .studio-cloud .studio-mobile-settings, .public-app .studio-cloud .studio-views,
.public-app .studio-cloud .studio-layer-status, .public-app .studio-cloud [data-action="new-photo"],
.public-app .studio-cloud .studio-download-retry { display: none !important; }
.public-app .studio-cloud .studio-source-card { margin-top: 5px; }
.public-app .studio-cloud .studio-canvas { border: 0; border-radius: 4px; }
.public-app .studio-cloud .studio-canvas img { object-fit: contain; width: 100%; height: 100%; }
.public-app .studio-cloud:not(.is-ready) .studio-mobile-preview { display: none; }
.public-app .studio-cloud .studio-mobile-preview { padding: 12px; background: #F2F2F2; border-color: #ccc; border-radius: 4px; }
.public-app .studio-cloud .studio-image-caption { text-align: center; letter-spacing: .05em; color: var(--muted); }
.public-app .studio-cloud .studio-enlarge { font-size: 11px; padding: 6px 10px; }
.public-app .studio-cloud.is-ready .studio-mobile-fields, .public-app .studio-cloud.is-ready .studio-source-card { display: none; }
.public-app #portrait-stage:has(.studio-cloud.is-ready) .portrait-workbench { display: none; }
.public-app .studio-cloud.is-ready .studio-actions { margin: 0; }
.studio-image-retry { padding: 12px 0; width: 100%; background: transparent; border: 0; color: #10238d; text-decoration: underline; cursor: pointer; }
.public-app .queue-focus { display: flex; flex-direction: column; gap: 16px; padding: 0; border: 0; background: none; }
.public-app .focus-console-primary { padding: 0; background: none; border: 0; box-shadow: none; }
.public-app .focus-status-row { display: flex; gap: 10px; align-items: center; }
.public-app .focus-status-copy { flex: 1; min-width: 0; }
.public-app .focus-status-copy > strong { font-size: 20px; }
.public-app .focus-ticket { margin-left: auto; padding: 10px; min-width: 0; border: 1px solid var(--blue); background: #F3F4FA; border-radius: 4px; color: var(--blue); box-shadow: inset 0 -3px 0 var(--yellow); }
.public-app .focus-ticket b { font-size: 23px; }
.public-app .focus-identity, .public-app .focus-status-copy > span, .public-app .focus-status-copy > small { display: none; }
.public-app .focus-stage-track { margin-top: 22px; }
.public-app .focus-progress-block { padding: 16px; margin-top: 16px; border: 1px solid #ddd; background: #F2F2F2; border-radius: 4px; }
.public-app .focus-artwork { width: min(100%, 390px); margin: 0 auto; border: 1px solid #ccc; padding: 10px; border-radius: 4px; background: #F2F2F2; }
.public-app .focus-artwork-frame { height: auto; aspect-ratio: 1; }
.public-app .focus-artwork img { width: 100%; height: 100%; object-fit: contain; }
.public-app .focus-artwork figcaption { display: none; }
.public-app .focus-telemetry { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 0; border: 0; gap: 7px; background: none; }
.public-app .focus-telemetry > div { border: 1px solid #ddd; padding: 12px 5px; text-align: center; background: #F2F2F2; border-radius: 4px; }
.public-app .focus-telemetry strong { font-size: 15px; }
.public-app .focus-telemetry small { display: none; }
.public-app .queue-help { justify-content: center; font-size: 11px; border: 0; }
.public-app .queue-help b { display: none; }
.public-app .generation-progress { width: 100vw; max-width: none; height: 100dvh; max-height: none; inset: 0; margin: 0; padding: max(24px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom)); border: 0; border-radius: 0; color: #18264c; background: #f4f6fb; overflow: auto; }
.generation-progress::backdrop { background: #f4f6fb; }
.generation-sheet { max-width: 410px; min-height: 90%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.generation-eyebrow { font-size: 10px; font-weight: 600; color: #7e8aab; letter-spacing: .18em; }
.generation-art { position: relative; width: 165px; height: 180px; margin: 36px 0 20px; filter: drop-shadow(0 18px 24px #1a338416); }
.generation-art svg { width: 100%; height: 100%; }
.generation-art rect { fill: white; stroke: #d6dfee; stroke-width: 1; }
.generation-art path { stroke: #142989; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 300; animation: portrait-ink 4s ease-in-out infinite; }
.generation-sheet h2 { font-size: 25px; font-weight: 650; margin: 8px 0 12px; letter-spacing: -.03em; }
.generation-sheet > p { font-size: 13px; line-height: 1.9; color: #778198; min-height: 48px; margin: 0; }
.generation-track { width: 100%; height: 7px; margin-top: 25px; border-radius: 10px; background: #e1e7f2; overflow: hidden; }
.generation-track > span { position: relative; display: block; height: 100%; background: #162c96; border-radius: inherit; transition: width .8s ease; }
.generation-track > span::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,transparent,#ffffff65,transparent); animation: portrait-shimmer 2s ease-in-out infinite; }
.generation-steps { width: 100%; display: flex; justify-content: space-between; list-style: none; padding: 0; margin: 15px 0 26px; font-size: 11px; color: #a1a9bb; }
.generation-steps [data-state="active"], .generation-steps [data-state="done"] { color: #182e94; }
.generation-sheet > .generation-note { font-size: 11px; min-height: 0; }
#generation-background { margin-top: 32px; border: 0; background: none; padding: 12px; font-size: 12px; color: #7a86a0; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
@keyframes portrait-ink { 0% {stroke-dashoffset:300} 65%,100% {stroke-dashoffset:0} }
@keyframes portrait-shimmer { from {transform:translateX(-100%)} to {transform:translateX(100%)} }
@media (max-width:600px) {
  .public-app .public-header { min-height: 65px; padding: 15px 18px; }
  .public-app .public-brand { min-width: 0; }
  .public-app .brand-copy b { font-size: 13px; }
  .public-app .brand-copy small { font-size: 8px; }
  .public-app .public-main { width: calc(100% - 24px); margin: 16px auto 30px; }
  .public-app .experience-panel, .public-app #portrait-stage { padding: 22px 16px; border-radius: 4px; }
  .public-app .panel-heading h2 { font-size: 22px; }
  .public-app .panel-heading p { font-size: 12px; }
  .public-app .flow-nav { margin-bottom: 14px; }
  .public-app .flow-connector { flex-basis: 6px; }
  .public-app .flow-step { gap: 5px; }
  .public-app .choice-grid { grid-template-columns: 1fr; }
  .public-app .choice-grid label > span { min-height: 46px; }
  .public-app .question-block legend strong { font-size: 16px; }
}
@media (prefers-reduced-motion:reduce) { .generation-art path,.generation-track > span::after {animation:none} .generation-track > span {transition:none} }