:root {
  --ink: #091d3b;
  --muted: #607089;
  --line: rgba(24, 63, 114, 0.13);
  --paper: #f6f8fb;
  --white: #fff;
  --cobalt: #0054c7;
  --asset-accent: #1769ff;
  --asset-accent-soft: #dbe8ff;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 4% 0%, rgba(41,199,239,.09), transparent 24rem), linear-gradient(180deg,#fbfcfe,#f3f6fa); color: var(--ink); }
button { color: inherit; font: inherit; }
[hidden] { display: none !important; }
.review-shell { min-height: 100vh; padding: 22px clamp(18px,3.4vw,58px) 26px; }
.topbar { align-items: center; display: flex; justify-content: space-between; min-height: 38px; }
.brand-lockup { align-items: center; display: flex; gap: 11px; letter-spacing: -.02em; }
.brand-orbit { border: 2px solid var(--cobalt); border-radius: 50%; display: inline-grid; height: 27px; place-items: center; position: relative; transform: rotate(-12deg) scaleX(1.18); width: 27px; }
.brand-orbit::after { background: var(--paper); content: ""; height: 7px; left: -3px; position: absolute; top: 8px; transform: rotate(12deg); width: 31px; }
.brand-orbit span { background: var(--cobalt); border-radius: 50%; height: 5px; position: relative; width: 5px; z-index: 1; }
.brand-name { color: var(--cobalt); font-size: 14px; font-weight: 760; letter-spacing: .12em; }
.brand-divider { background: var(--line); height: 22px; width: 1px; }
.brand-unit { color: #42566f; font-size: 12px; font-weight: 520; }
.test-badge { align-items: center; background: rgba(255,255,255,.72); border: 1px solid var(--line); border-radius: 999px; color: #52657d; display: flex; font-size: 11px; font-weight: 620; gap: 8px; padding: 8px 12px; }
.test-dot { background: #ff6d62; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,109,98,.12); height: 6px; width: 6px; }
.review-header { align-items: end; display: grid; gap: 38px; grid-template-columns: minmax(0,1fr) minmax(280px,410px); margin: clamp(42px,6vh,76px) 0 30px; }
.eyebrow { color: var(--cobalt); font-size: 11px; font-weight: 720; letter-spacing: .16em; margin: 0 0 9px; text-transform: uppercase; }
.review-header h1 { font-size: clamp(32px,4.2vw,62px); font-weight: 590; letter-spacing: -.052em; line-height: .98; margin: 0; max-width: 760px; }
.intro-copy { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 3px; }
.model-tabs { display: grid; gap: 10px; grid-template-columns: repeat(3,minmax(0,1fr)); margin-bottom: 12px; }
.model-tab { align-items: center; background: rgba(255,255,255,.64); border: 1px solid var(--line); border-radius: 16px; cursor: pointer; display: grid; gap: 10px; grid-template-columns: auto auto minmax(0,1fr) auto; min-height: 66px; padding: 10px 14px; text-align: left; transition: 180ms ease; }
.model-tab:hover { border-color: rgba(0,84,199,.28); transform: translateY(-1px); }
.model-tab:focus-visible,.viewer-controls button:focus-visible { outline: 3px solid rgba(23,105,255,.28); outline-offset: 2px; }
.model-tab.is-active { background: #fff; border-color: color-mix(in srgb,var(--asset-accent) 30%,white); box-shadow: 0 10px 30px rgba(40,74,118,.09); }
.tab-index { color: #91a0b4; font: 10px ui-monospace,monospace; }
.tab-icon,.viewer-icon { align-items: center; background: #edf2f8; border-radius: 11px; color: #738198; display: flex; font: 700 10px ui-monospace,monospace; height: 36px; justify-content: center; width: 36px; }
.is-active .tab-icon,.viewer-icon { background: var(--asset-accent-soft); color: var(--asset-accent); }
.tab-copy { display: grid; gap: 2px; min-width: 0; }
.tab-copy strong { font-size: 13px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-copy small { color: #8491a4; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-state { background: #d7dee8; border-radius: 50%; height: 7px; width: 7px; }
.is-active .tab-state { background: var(--asset-accent); box-shadow: 0 0 0 5px color-mix(in srgb,var(--asset-accent) 13%,transparent); }
.workspace-grid { display: grid; gap: 12px; grid-template-columns: minmax(0,1.8fr) minmax(300px,.78fr); min-height: 620px; }
.viewer-card,.details-card { background: rgba(255,255,255,.78); border: 1px solid rgba(23,68,122,.12); border-radius: 24px; box-shadow: 0 22px 60px rgba(26,62,105,.08); }
.viewer-card { background: linear-gradient(180deg,rgba(255,255,255,.68),rgba(235,242,250,.5)),#eef3f8; isolation: isolate; min-height: 620px; overflow: hidden; position: relative; }
.stage-glow { border-radius: 50%; opacity: .58; pointer-events: none; position: absolute; z-index: -1; }
.stage-glow-one { background: radial-gradient(circle,var(--asset-accent-soft),transparent 68%); height: 70%; left: 8%; top: 3%; width: 68%; }
.stage-glow-two { background: radial-gradient(circle,rgba(41,199,239,.22),transparent 70%); bottom: -22%; height: 70%; right: -4%; width: 58%; }
.stage-grid { background-image: linear-gradient(rgba(24,76,135,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(24,76,135,.055) 1px,transparent 1px); background-size: 54px 54px; bottom: -38%; height: 67%; left: -10%; mask-image: linear-gradient(to bottom,transparent,#000 58%); opacity: .65; pointer-events: none; position: absolute; transform: rotateX(64deg) scale(1.3); width: 120%; }
.viewer-label { align-items: center; display: flex; gap: 10px; left: 20px; position: absolute; top: 20px; z-index: 5; }
.viewer-icon { border: 1px solid color-mix(in srgb,var(--asset-accent) 16%,white); height: 38px; width: 38px; }
.viewer-label>span:last-child { display: grid; gap: 1px; }
.viewer-label small { color: #728097; font-size: 9px; letter-spacing: .11em; text-transform: uppercase; }
.viewer-label strong { font-size: 12px; font-weight: 650; }
.model-viewer { height: 100%; inset: 0; outline: none; position: absolute; width: 100%; z-index: 2; --poster-color: transparent; --progress-bar-color: var(--asset-accent); --progress-bar-height: 2px; }
.model-pending { align-items: center; display: flex; flex-direction: column; inset: 50% auto auto 50%; max-width: 330px; position: absolute; text-align: center; transform: translate(-50%,-47%); width: calc(100% - 48px); z-index: 1; }
.pending-object { align-items: center; background: rgba(255,255,255,.68); border: 1px solid rgba(23,75,136,.11); border-radius: 50%; display: flex; height: 104px; justify-content: center; margin-bottom: 18px; position: relative; width: 104px; }
.pending-object::before,.pending-object::after { border: 1px solid color-mix(in srgb,var(--asset-accent) 24%,transparent); border-radius: 50%; content: ""; inset: -11px; position: absolute; }
.pending-object::after { inset: -23px; opacity: .45; }
.pending-cube { border: 2px solid var(--asset-accent); border-radius: 8px; display: block; height: 39px; transform: rotate(30deg) skewY(-8deg); width: 39px; }
.model-pending strong { font-size: 16px; font-weight: 650; }
.model-pending p { color: #718098; font-size: 12px; line-height: 1.55; margin: 7px 0 0; }
.viewer-status { align-items: center; background: rgba(255,255,255,.78); border: 1px solid rgba(23,68,122,.1); border-radius: 999px; color: #617087; display: flex; font-size: 10px; gap: 7px; padding: 7px 10px; position: absolute; right: 18px; top: 18px; z-index: 6; }
.status-live,.status-wait,.status-error { background: #27b67a; border-radius: 50%; height: 6px; width: 6px; }
.status-wait { background: #f49b52; }.status-error { background: #e55f5f; }
.viewer-controls { align-items: center; backdrop-filter: blur(18px); background: rgba(255,255,255,.82); border: 1px solid rgba(27,68,117,.13); border-radius: 15px; bottom: 22px; box-shadow: 0 12px 32px rgba(31,65,105,.12); display: flex; left: 50%; overflow: hidden; padding: 4px; position: absolute; transform: translateX(-50%); z-index: 7; }
.viewer-controls button { align-items: center; background: transparent; border: 0; border-radius: 11px; color: #53647b; cursor: pointer; display: flex; font-size: 11px; font-weight: 610; gap: 7px; min-height: 38px; padding: 0 13px; white-space: nowrap; }
.viewer-controls button:hover,.viewer-controls button.is-on { background: color-mix(in srgb,var(--asset-accent-soft) 62%,white); color: var(--asset-accent); }
.viewer-controls svg { fill: none; height: 17px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 17px; }
.gesture-hint { bottom: 72px; color: #8290a4; font-size: 9px; left: 50%; letter-spacing: .03em; margin: 0; position: absolute; transform: translateX(-50%); white-space: nowrap; z-index: 6; }
.details-card { align-self: stretch; padding: clamp(22px,2.4vw,32px); }
.detail-heading { align-items: center; display: grid; gap: 14px; grid-template-columns: auto minmax(0,1fr); }
.asset-number { align-items: center; background: var(--asset-accent-soft); border-radius: 14px; color: var(--asset-accent); display: flex; font: 650 12px ui-monospace,monospace; height: 46px; justify-content: center; width: 46px; }
.detail-heading p { color: var(--asset-accent); font-size: 9px; font-weight: 690; letter-spacing: .11em; margin: 0 0 3px; text-transform: uppercase; }
.detail-heading h2 { font-size: 20px; font-weight: 620; letter-spacing: -.035em; line-height: 1.08; margin: 0; }
.detail-description { color: #5e6e85; font-size: 12px; line-height: 1.62; margin: 22px 0; }
.review-note { align-items: flex-start; background: #fff8ee; border: 1px solid #f6dfbd; border-radius: 14px; color: #a76822; display: flex; gap: 10px; padding: 12px; }
.review-note>span { border: 1px solid currentColor; border-radius: 50%; flex: 0 0 auto; font: 700 10px serif; height: 18px; line-height: 16px; text-align: center; width: 18px; }
.review-note p { color: #8a653b; font-size: 10px; line-height: 1.5; margin: 0; }.review-note strong { color: #7a511f; }
.spec-section { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 19px; }
.spec-section h3 { color: #223d60; font-size: 10px; font-weight: 710; letter-spacing: .12em; margin: 0 0 11px; text-transform: uppercase; }.spec-section dl { margin: 0; }
.spec-row { align-items: baseline; display: grid; gap: 12px; grid-template-columns: minmax(80px,.85fr) minmax(120px,1.45fr); padding: 6px 0; }
.spec-row dt,.spec-row dd { font-size: 10px; line-height: 1.4; margin: 0; }.spec-row dt { color: #8a97a9; }.spec-row dd { color: #334a68; font-weight: 560; text-align: right; }
.cost-box { align-items: end; background: #f2f6fb; border-radius: 13px; display: flex; justify-content: space-between; padding: 12px 13px; }.cost-box span { color: var(--asset-accent); font-size: 14px; font-weight: 680; }.cost-box small { color: #8b98aa; font-size: 8px; max-width: 120px; text-align: right; }
.quality-checks { border-top: 1px solid var(--line); display: grid; gap: 8px; margin-top: 22px; padding-top: 18px; }.quality-checks p { align-items: center; color: #567084; display: flex; font-size: 10px; gap: 8px; margin: 0; }.quality-checks p span { color: #2cab7a; font-weight: 800; }.quality-checks .is-pending span { color: #d5a04d; }
.review-footer { color: #8491a3; display: flex; font-size: 9px; justify-content: space-between; letter-spacing: .05em; padding: 18px 4px 0; text-transform: uppercase; }
.viewer-card:fullscreen { border: 0; border-radius: 0; height: 100vh; width: 100vw; }
@media (max-width:980px) { .review-header { align-items:start; gap:18px; grid-template-columns:1fr; }.workspace-grid { grid-template-columns:1fr; }.viewer-card { min-height:min(68vh,660px); }.details-card { display:grid; gap:0 24px; grid-template-columns:repeat(2,minmax(0,1fr)); }.detail-heading,.detail-description,.review-note,.quality-checks { grid-column:1/-1; } }
@media (max-width:680px) { .review-shell { padding:16px 12px 20px; }.brand-divider,.brand-unit { display:none; }.test-badge { font-size:0; gap:0; padding:10px; }.review-header { margin:34px 3px 24px; }.review-header h1 { font-size:clamp(32px,10vw,46px); }.intro-copy { font-size:13px; }.model-tabs { gap:6px; }.model-tab { display:flex; flex-direction:column; gap:7px; justify-content:center; min-height:86px; padding:8px 5px; text-align:center; }.tab-index,.tab-copy small,.tab-state { display:none; }.tab-icon { height:31px; width:31px; }.tab-copy strong { font-size:11px; }.workspace-grid,.viewer-card { min-height:0; }.viewer-card { border-radius:20px; height:61vh; min-height:450px; }.viewer-label { left:14px; top:14px; }.viewer-label>span:last-child,.viewer-status { display:none; }.viewer-controls { bottom:14px; width:calc(100% - 28px); }.viewer-controls button { flex:1; justify-content:center; min-height:44px; padding:0 8px; }.viewer-controls button span { font-size:9px; }.gesture-hint { bottom:68px; }.details-card { border-radius:20px; display:block; padding:22px 18px; }.review-footer { gap:14px; }.review-footer span:last-child { text-align:right; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; } }