/* Hallmark · shape: app screen · genre: modern-minimal · theme: Coral · posture: restrained · scope: app · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V3 · weakest: V; the real gazebo and measured model bounds replace a generic dashboard. */
/* Hallmark · finish-review: subagent · fix · 1 finding resolved: mobile rotation hint has its own solid surface; recaptured at 390px. */
/* Hallmark · waive 39b · four 112px gazebo model cards include real renders and dimensions · the whole product card must be a single accessible selection target. */
/* Hallmark · dismissed 25 · the 36ch mobile line is a brief caption for the gazebo viewer, not long-form prose. */
@import url('/tokens.css');
@import url('/base.css');
:root { --font-body: 'Segoe UI', ui-sans-serif, system-ui, sans-serif; --font-display: var(--font-body); --color-stage: oklch(94% 0.012 65); --color-stage-line: oklch(88% 0.012 65); --color-selected: oklch(95% 0.021 40); --color-overlay: oklch(22% 0.012 38 / 0.35); --color-qr-paper: oklch(99% 0.005 65); --color-qr-ink: oklch(20% 0.01 38); --color-warning-paper: oklch(95% 0.027 75); --color-warning-ink: oklch(36% 0.05 60); --gutter: 40px; --container: 1480px; --color-accent: oklch(72% 0.137 32); --color-focus: oklch(52% 0.17 30); }
html, body { overflow-x: clip; }
body { font-synthesis: none; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.site-header { display: flex; align-items: center; gap: var(--space-xl); min-height: 96px; border-bottom: 1px solid var(--color-rule); }
.brand { display: flex; align-items: center; gap: var(--space-sm); text-decoration: none; font-size: var(--text-lg); font-weight: 600; line-height: 1.3; }
.brand-icon { width: 36px; height: 36px; stroke-width: 1.2; }
.brand-caption { display: block; color: var(--color-muted); font-size: var(--text-xs); font-weight: 400; margin-top: var(--space-2xs); }
nav { display: flex; align-items: center; gap: var(--space-lg); margin-left: auto; }
.nav-link, .text-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 44px; border: 0; padding: var(--space-2xs) 0; color: var(--color-ink-2); background: transparent; cursor: pointer; text-decoration: none; font-size: var(--text-sm); }
.prototype-label { color: var(--color-muted); font-size: var(--text-xs); border-left: 1px solid var(--color-rule); padding-left: var(--space-lg); }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-lg); padding-block: var(--space-xl) var(--space-lg); }
h1 { font-size: var(--text-2xl); max-width: none; font-weight: 600; line-height: 1.2; }
.page-heading p { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-xs); }
.heading-note { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); padding-bottom: var(--space-2xs); }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-xl); }
.stage { position: relative; min-width: 0; background: var(--color-stage); border-radius: var(--radius-card); min-height: 510px; display: flex; flex-direction: column; }
model-viewer { display: block; width: 100%; height: 510px; --poster-color: transparent; background: transparent; touch-action: pan-y; }
model-viewer:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.stage-top { position: absolute; inset: var(--space-md) var(--space-md) auto; z-index: var(--z-raised); display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.stage-top > * { pointer-events: auto; }
.stage-label { display: inline-flex; align-items: center; gap: var(--space-xs); padding-inline: var(--space-xs); color: var(--color-ink-2); font-size: var(--text-sm); }
.icon-button, .tool-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); border: 0; border-radius: var(--radius-input); color: var(--color-ink-2); background: transparent; min-width: 44px; min-height: 44px; cursor: pointer; }
.stage-top .icon-button { background: var(--color-paper); }
.stage-bottom { position: absolute; inset: auto var(--space-lg) var(--space-md); display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.stage-bottom p { display: flex; align-items: center; gap: var(--space-xs); color: var(--color-muted); background: var(--color-stage); padding: var(--space-2xs); border-radius: var(--radius-input); font-size: var(--text-xs); }
.stage-bottom p .icon { width: 16px; height: 16px; }
.viewer-tools { display: flex; align-items: center; gap: var(--space-2xs); background: var(--color-paper); padding: 0 var(--space-2xs); border-radius: var(--radius-input); }
.tool-button { font-size: var(--text-xs); padding-inline: var(--space-xs); }
.tool-button[aria-pressed='true'] { color: var(--color-accent-2); background: var(--color-selected); }
.viewer-state { position: absolute; inset: 64px 24px 72px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--space-sm); background: var(--color-stage); text-align: center; z-index: var(--z-raised); font-size: var(--text-sm); }
.viewer-state > span { color: var(--color-muted); }
.loading-mark { width: 30px; height: 30px; border: 2px solid var(--color-stage-line); border-top-color: var(--color-ink); border-radius: 50%; animation: load 1s linear infinite; }
@keyframes load { to { transform: rotate(360deg); } }
.dimension-strip { position: absolute; inset: auto 24px 72px; display: flex; justify-content: center; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); pointer-events: none; }
.dimension-strip span:first-child { border-block: 1px solid var(--color-muted); padding-block: var(--space-2xs); font-variant-numeric: tabular-nums; }
.dimension-strip span:last-child { font-size: var(--text-xs); color: var(--color-muted); }
.product-panel { padding-top: var(--space-xs); min-width: 0; }
.product-index { display: flex; align-items: center; justify-content: space-between; color: var(--color-muted); font-size: var(--text-xs); }
.product-panel h2 { font-size: var(--text-3xl); font-weight: 600; line-height: 1.2; margin-block: var(--space-md) var(--space-xs); }
.product-description { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.6; min-height: 44px; }
.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block: var(--space-lg); }
.specs > div { padding-inline: var(--space-md); border-left: 1px solid var(--color-rule); }
.specs > div:first-child { padding-left: 0; border: 0; }
.specs > div:last-child { padding-right: 0; }
.specs dt { color: var(--color-muted); font-size: var(--text-xs); }
.specs dd { margin: var(--space-2xs) 0 0; font-size: var(--text-lg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.scale-note { display: flex; align-items: flex-start; gap: var(--space-xs); font-size: var(--text-xs); line-height: 1.6; color: var(--color-warning-ink); padding: var(--space-sm); background: var(--color-warning-paper); border-radius: var(--radius-input); }
.scale-note .icon { width: 16px; height: 16px; margin-top: var(--space-3xs); }
.ar-action { margin-top: var(--space-lg); text-align: center; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); min-height: 48px; padding: var(--space-sm) var(--space-lg); border: 1px solid transparent; border-radius: var(--radius-input); font-size: var(--text-sm); font-weight: 600; text-decoration: none; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.primary { width: 100%; background: var(--color-accent); color: var(--color-accent-ink); }
.secondary { border-color: var(--color-muted); background: var(--color-paper); color: var(--color-ink); }
.button:active { transform: translateY(1px); }
.button:disabled, button[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; }
.button[aria-busy='true'] { cursor: progress; }
.ar-action > p { color: var(--color-muted); font-size: var(--text-xs); margin-top: var(--space-xs); }
.phone-link { margin-top: var(--space-xs); }
.camera-link { display: flex; font-size: var(--text-xs); min-height: 32px; }
.model-details { margin-top: var(--space-md); padding-block: var(--space-md); border-top: 1px solid var(--color-rule); font-size: var(--text-xs); color: var(--color-muted); }
summary { cursor: pointer; min-height: 32px; align-content: center; color: var(--color-ink-2); }
.model-details p { margin-block: var(--space-xs); }
.model-details a { color: var(--color-ink-2); }
.catalog { padding-top: var(--space-xl); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); }
.section-heading h2 { font-size: var(--text-md); font-weight: 600; }
.section-heading > span { color: var(--color-muted); font-size: var(--text-xs); }
.model-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
.model-card { text-align: left; position: relative; display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-xs); border: 1px solid var(--color-rule); background: transparent; color: var(--color-ink); border-radius: var(--radius-card); cursor: pointer; min-height: 112px; }
.model-card[aria-pressed='true'] { border-color: var(--color-accent-2); background: var(--color-selected); }
.model-card img { width: 100%; height: 88px; object-fit: contain; }
.model-card strong { font-size: var(--text-sm); display: block; font-weight: 600; }
.model-card small { display: block; font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-2xs); font-variant-numeric: tabular-nums; }
.selection-mark { position: absolute; top: var(--space-xs); right: var(--space-xs); width: 16px; height: 16px; color: var(--color-accent-2); visibility: hidden; }
[aria-pressed='true'] .selection-mark { visibility: visible; }
.page-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-lg); padding-block: var(--space-md) var(--space-lg); font-size: var(--text-xs); color: var(--color-muted); }
.page-footer > span { display: flex; align-items: center; gap: var(--space-xs); }
.page-footer .text-button { font-size: var(--text-xs); white-space: nowrap; }
dialog { background: var(--color-paper); color: var(--color-ink); border: 0; border-radius: var(--radius-card); width: min(600px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: var(--space-lg); position: fixed; inset: 0; margin: auto; height: fit-content; overflow-y: auto; }
dialog::backdrop { background: var(--color-overlay); }
.dialog-heading { display: flex; gap: var(--space-md); align-items: center; justify-content: space-between; }
.dialog-heading h2 { font-size: var(--text-xl); line-height: 1.3; }
.dialog-intro { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-xs); }
.phone-body { display: grid; grid-template-columns: 144px minmax(0, 1fr); align-items: center; gap: var(--space-lg); padding-block: var(--space-lg); }
.qr-placeholder { display: grid; place-items: center; background: var(--color-paper-3); border-radius: var(--radius-input); min-height: 144px; padding: var(--space-xs); }
.qr-placeholder > .icon { width: 56px; height: 56px; color: var(--color-muted); }
.qr-placeholder svg:not(.icon) { width: 100%; height: auto; }
.phone-body h3 { font-size: var(--text-lg); }
.phone-body p { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-xs); }
.phone-requirement { line-height: 1.7; }
label { font-size: var(--text-sm); display: block; margin-bottom: var(--space-xs); }
.input-row { display: flex; gap: var(--space-xs); }
input { min-width: 0; width: 100%; border: 1px solid var(--color-muted); border-radius: var(--radius-input); min-height: 48px; padding: var(--space-sm); font-size: var(--text-md); background: var(--color-paper); color: var(--color-ink); }
input[aria-invalid='true'] { border-color: var(--color-error); }
.input-row .button { flex-shrink: 0; padding-inline: var(--space-md); }
.field-help { min-height: 1lh; color: var(--color-muted); font-size: var(--text-xs); margin-top: var(--space-xs); }
.field-help.error { color: var(--color-error); }
.steps { margin: var(--space-lg) 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-md); }
.steps li { display: flex; gap: var(--space-sm); align-items: flex-start; }
.steps li > span { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; background: var(--color-paper-3); border-radius: var(--radius-input); font-size: var(--text-xs); }
.steps strong { font-size: var(--text-sm); font-weight: 600; }
.steps p { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-2xs); }
.notice { padding: var(--space-sm) var(--space-md); background: var(--color-warning-paper); color: var(--color-warning-ink); border-radius: var(--radius-input); font-size: var(--text-sm); margin-bottom: var(--space-md); }
.notice p { margin-top: var(--space-2xs); }
.dialog-footnote { font-size: var(--text-xs); color: var(--color-muted); padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); }
.stage:fullscreen { background: var(--color-stage); justify-content: center; }
.stage:fullscreen model-viewer { height: 100dvh; }
.stage.expanded-fallback { position: fixed; inset: var(--space-md); z-index: var(--z-modal); }
.stage.expanded-fallback model-viewer { height: calc(100dvh - 32px); }
.embed-mode .prototype-label, .embed-mode .heading-note { display: none; }
@media (hover: hover) { .primary:hover { background: var(--color-accent-2); color: var(--color-cotton); } .secondary:hover, .icon-button:hover, .tool-button:hover { background: var(--color-paper-3); } .model-card:hover { border-color: var(--color-muted); } .text-button:hover, .nav-link:hover { color: var(--color-accent-2); } }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
@media (max-width: 1150px) { .workspace { grid-template-columns: minmax(0, 1fr) 290px; gap: var(--space-lg); } .model-card { grid-template-columns: 80px minmax(0, 1fr); padding-right: var(--space-xs); } .prototype-label { display: none; } .stage-bottom p { max-width: 210px; } }
@media (max-width: 820px) { :root { --gutter: 24px; } .site-header { min-height: 80px; } .heading-note { display: none; } .workspace { grid-template-columns: minmax(0, 1fr); } .stage, model-viewer { min-height: 420px; height: 420px; } .product-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-lg); } .product-index, .product-panel h2, .product-description, .specs { grid-column: 1; } .scale-note { grid-column: 2; grid-row: 2 / 4; align-self: start; } .ar-action { grid-column: 2; grid-row: 4 / 6; margin-top: 0; } .model-details { grid-column: 1 / -1; margin-top: 0; } .model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .model-card { grid-template-columns: 100px minmax(0, 1fr); } }
@media (max-width: 540px) { :root { --gutter: 16px; } .site-header { gap: var(--space-xs); min-height: 76px; } .brand { font-size: var(--text-md); } .brand-icon { width: 28px; height: 28px; } .brand-caption { font-size: var(--text-xs); } nav { gap: var(--space-xs); } nav .text-button { display: none; } .nav-link { font-size: var(--text-xs); } .page-heading { padding-block: var(--space-lg) var(--space-md); } h1 { font-size: var(--text-xl); line-height: 1.3; } .page-heading p { font-size: var(--text-xs); max-width: 36ch; } .stage, model-viewer { min-height: 300px; height: 300px; } .stage-top { inset: var(--space-xs) var(--space-xs) auto; } .stage-label { font-size: var(--text-xs); } .stage-bottom { inset: auto var(--space-sm) var(--space-sm); } .stage-bottom p { max-width: 155px; line-height: 1.4; font-size: var(--text-xs); } .stage-bottom p .icon { display: none; } .viewer-tools { gap: 0; } .dimension-strip { flex-direction: column; gap: var(--space-2xs); } .product-panel { display: block; padding-top: 0; } .product-panel h2 { margin-top: var(--space-xs); font-size: var(--text-2xl); } .product-description { min-height: 0; } .specs { margin-block: var(--space-md); } .specs dd { font-size: var(--text-xl); } .ar-action { margin-top: var(--space-md); } .model-details { margin-top: var(--space-xs); padding-bottom: 0; } .catalog { padding-top: var(--space-lg); } .section-heading { align-items: flex-start; } .section-heading > span { max-width: 130px; text-align: right; } .model-card { grid-template-columns: minmax(0, 1fr); gap: 0; padding: var(--space-xs) var(--space-sm) var(--space-sm); min-height: 166px; } .model-card img { height: 100px; } .page-footer { flex-direction: column; align-items: flex-start; margin-top: var(--space-md); } .page-footer > span { align-items: flex-start; } dialog { padding: var(--space-md); } .dialog-heading h2 { font-size: var(--text-lg); } .phone-body { gap: var(--space-sm); grid-template-columns: 120px minmax(0, 1fr); } .qr-placeholder { min-height: 120px; } .input-row { flex-direction: column; } .input-row .button { align-self: flex-start; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }