* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #070707; color: #f4eee8; font-family: Geist, "SF Pro Display", "PingFang SC", sans-serif; }
:root { --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1); --ritual-opacity-duration: 180ms; --ritual-point-duration: 180ms; --ritual-line-duration: 520ms; --ritual-line-delay: 180ms; --ritual-label-duration: 180ms; --ritual-label-delay: 700ms; --ritual-stage-duration: 280ms; --ritual-stage-delay: 1540ms; --ritual-calibration-in-duration: 180ms; --ritual-calibration-out-duration: 280ms; --ritual-calibration-out-delay: 1120ms; --ritual-calibration-point-duration: 360ms; --ritual-calibration-point-delay: 180ms; --ritual-calibration-duration: 1400ms; --ritual-score-duration: 2800ms; }
button, input { font: inherit; }
#app, #measurement-app { width: 100%; height: 100%; }
.vision-debug-panel { position: fixed; z-index: 90; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); width: min(320px, calc(100vw - 24px)); padding: 10px 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(8,10,10,.86); color: #d8ece7; font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; box-shadow: 0 12px 36px rgba(0,0,0,.28); backdrop-filter: blur(12px); pointer-events: none; }
.vision-debug-panel > strong { color: #8ce0ca; font-size: 9px; letter-spacing: .15em; }
.vision-debug-panel dl { display: grid; gap: 3px; margin: 7px 0 0; }
.vision-debug-panel dl div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; }
.vision-debug-panel dt { color: #749088; }
.vision-debug-panel dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.skin-view { position: relative; width: 100%; height: 100%; overflow: hidden; }
.skin-brand { position: absolute; z-index: 10; top: max(18px, env(safe-area-inset-top)); left: max(24px, env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 6px; }
.skin-brand img { width: 156px; height: auto; display: block; }
.skin-brand small { font-size: 10px; letter-spacing: .15em; opacity: .62; }
.skin-eyebrow { color: var(--skin-accent); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.skin-error { position: absolute; z-index: 30; left: 50%; bottom: 96px; transform: translateX(-50%); display: flex; align-items: center; gap: 18px; padding: 12px 16px; border: 1px solid var(--skin-line); background: color-mix(in srgb, var(--skin-bg) 88%, transparent); color: var(--skin-text); box-shadow: 0 14px 40px rgba(0,0,0,.28); }
.skin-error button { padding: 8px 12px; border: 1px solid var(--skin-accent); background: transparent; color: inherit; cursor: pointer; }
[data-measurement-stage] { position: relative; overflow: hidden; }
.portrait-slot, .portrait-slot img { position: absolute; inset: 0; width: 100%; height: 100%; }
.portrait-slot { z-index: 1; }
.portrait-slot::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(rgba(0,0,0,.26), transparent 34%), radial-gradient(ellipse 90% 90% at 50% 42%, transparent 55%, rgba(0,0,0,.32)); pointer-events: none; }
.portrait-slot img { object-fit: cover; object-position: center; }
.portrait-slot .live-video { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; transform: scaleX(-1); }
.capture-guide { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; pointer-events: none; }
.capture-guide[hidden] { display: none; }
.capture-guide span { width: min(58%, 270px); aspect-ratio: .72; border: 1px solid color-mix(in srgb, var(--skin-accent) 88%, white); border-radius: 48% 48% 44% 44%; box-shadow: 0 0 0 999px color-mix(in srgb, var(--skin-bg) 34%, transparent), inset 0 0 26px color-mix(in srgb, var(--skin-accent) 10%, transparent), 0 0 22px color-mix(in srgb, var(--skin-accent) 25%, transparent); }
.capture-guide span::before, .capture-guide span::after { content: ""; position: absolute; left: 50%; width: 20px; height: 1px; background: var(--skin-accent); transform: translateX(-50%); }
.capture-guide span::before { top: 16%; }
.capture-guide span::after { bottom: 16%; }
.capture-guide p { position: absolute; left: 50%; bottom: 5%; width: 90%; margin: 0; transform: translateX(-50%); color: var(--skin-text); font-size: 12px; letter-spacing: .06em; text-align: center; text-shadow: 0 1px 8px #000; }
[data-measurement-overlay] { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.measurement-overlay-svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.measure-point { fill: var(--skin-accent); filter: drop-shadow(0 0 4px var(--skin-accent)); }
.measure-point--reference { fill: none; stroke: var(--skin-accent); }
.frame-contour { fill: none; stroke: color-mix(in srgb, var(--skin-line) 55%, transparent); stroke-width: .28; }
.lens-contour { fill: color-mix(in srgb, var(--skin-accent) 4%, transparent); stroke: color-mix(in srgb, var(--skin-accent) 82%, white 8%); stroke-width: .26; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--skin-accent) 45%, transparent)); animation: lensContourTrace 780ms var(--ease-in-out) 80ms forwards; }
.face-contour { fill: none; stroke: color-mix(in srgb, var(--skin-accent) 62%, transparent); stroke-width: .18; stroke-dasharray: 1.6 1.2; opacity: .72; }
.frame-reference { stroke: color-mix(in srgb, var(--skin-line) 42%, transparent); stroke-width: .2; fill: none; stroke-dasharray: 1.2 1.2; }
.measure-line { stroke: var(--skin-line); stroke-width: .32; fill: none; }
.measure-extension { stroke: color-mix(in srgb, var(--skin-line) 58%, transparent); stroke-width: .18; fill: none; }
.measure-label { fill: var(--skin-text); font-size: 2.4px; letter-spacing: .06em; }
[data-ritual-point] { opacity: 0; transform: scale(.95); transform-box: fill-box; transform-origin: center; }
[data-ritual-line] { stroke-dasharray: 1; stroke-dashoffset: 1; }
[data-ritual-label] { opacity: 0; transform: translateY(3px); }
[data-ritual-state="active"] [data-ritual-point] { animation: ritualPointIn var(--ritual-point-duration) var(--ease-out) forwards; }
[data-ritual-state="active"] [data-ritual-line] { animation: ritualLineIn var(--ritual-line-duration) var(--ease-in-out) var(--ritual-line-delay) forwards; }
[data-ritual-state="active"] [data-ritual-label] { animation: ritualLabelIn var(--ritual-label-duration) var(--ease-out) var(--ritual-label-delay) forwards; }
[data-ritual-state="active"] [data-ritual-group] { animation: ritualStageOut var(--ritual-stage-duration) var(--ease-out) var(--ritual-stage-delay) forwards; }
[data-calibration-group] { opacity: 0; }
[data-calibration-point] { fill: var(--skin-accent); opacity: 0; filter: drop-shadow(0 0 3px var(--skin-accent)); }
[data-calibration-beam] { stroke: var(--skin-accent); stroke-width: .18; opacity: 0; transform-box: fill-box; transform-origin: center; }
[data-ritual-state="calibrating"] [data-calibration-group] { animation: calibrationIn var(--ritual-calibration-in-duration) var(--ease-out) forwards, calibrationOut var(--ritual-calibration-out-duration) var(--ease-out) var(--ritual-calibration-out-delay) forwards; }
[data-ritual-state="calibrating"] [data-calibration-point] { animation: calibrationPoint var(--ritual-calibration-point-duration) var(--ease-out) var(--ritual-calibration-point-delay) forwards; }
[data-ritual-state="calibrating"] [data-calibration-beam] { animation: calibrationSweep var(--ritual-calibration-duration) var(--ease-in-out) forwards; }
.score-result { opacity: 0; transform-box: fill-box; transform-origin: center; }
[data-ritual-state="scoring"] .score-result { animation: scoreClimax var(--ritual-score-duration) var(--ease-out) forwards; }
.score-ring { fill: color-mix(in srgb, var(--skin-bg) 72%, transparent); stroke: var(--skin-accent); stroke-width: .32; stroke-dasharray: 100 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; }
[data-ritual-state="scoring"] .score-ring { animation: scoreRingFill var(--ritual-score-duration) var(--ease-out) forwards; }
.score-tick { stroke: var(--skin-accent); stroke-width: .24; opacity: .72; }
.score-number { fill: var(--skin-text); font: 400 12px/1 Georgia, serif; }
.score-label { fill: color-mix(in srgb, var(--skin-text) 72%, transparent); font-size: 2.4px; letter-spacing: .08em; }
.ritual-progress { height: 1px; overflow: hidden; background: #302a25; }
.ritual-progress [data-ritual-progress], .warm-progress [data-ritual-progress], .skin-view--chamber [data-ritual-progress] { display: block; width: 100%; height: 100%; background: var(--skin-accent); transform: scaleX(0); transform-origin: left; transition: transform 520ms var(--ease-out); }
@keyframes ritualPointIn { to { opacity: 1; transform: scale(1); } }
@keyframes ritualLineIn { to { stroke-dashoffset: 0; } }
@keyframes lensContourTrace { 0% { opacity: 0; stroke-dashoffset: 1; } 28% { opacity: .92; } 100% { opacity: .72; stroke-dashoffset: 0; } }
@keyframes ritualLabelIn { to { opacity: 1; transform: translateY(0); } }
@keyframes ritualStageOut { to { opacity: 0; transform: scale(.995); } }
@keyframes calibrationIn { to { opacity: 1; } }
@keyframes calibrationOut { to { opacity: 0; } }
@keyframes calibrationPoint { to { opacity: .82; } }
@keyframes calibrationSweep { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: .88; } 88% { opacity: .88; } 100% { opacity: 0; transform: translateY(23px); } }
@keyframes scoreClimax { 0% { opacity: 0; transform: scale(.9); } 34% { opacity: 1; transform: scale(1.045); } 55% { transform: scale(.99); } 72%, 100% { opacity: 1; transform: scale(1); } }
@keyframes scoreRingFill { to { stroke-dashoffset: calc(100 - var(--score-percent, 0)); } }

.skin-view--luxury { --skin-bg: #070707; --skin-text: #f4eee8; --skin-accent: #ddb087; --skin-line: #e7b88f; display: grid; grid-template-columns: minmax(170px, 16vw) minmax(520px, 1fr) minmax(250px, 23vw); align-items: center; gap: clamp(16px, 2vw, 30px); min-height: 100dvh; padding: 24px 3%; overflow: hidden; background: radial-gradient(circle at 50% 42%, rgba(216,168,126,.12), transparent 32%), #070707; color: #f4eee8; }
.skin-view--luxury .skin-brand { top: 24px; left: 3%; }
.skin-view--luxury .luxury-intro { position: static; align-self: center; }
.skin-view--luxury .luxury-intro h1 { margin: 18px 0; font: 400 clamp(32px, 4vw, 60px)/1.06 "Songti SC", Georgia, serif; letter-spacing: -.05em; }
.skin-view--luxury .luxury-intro p { max-width: 260px; color: #8f8983; font-size: 13px; line-height: 1.8; }
.skin-view--luxury .luxury-portrait { position: relative; width: min(100%, 550px); height: min(calc(100dvh - 48px), 780px); max-height: calc(100dvh - 48px); aspect-ratio: 3 / 4; justify-self: center; border: 1px solid rgba(227,184,147,.3); background: #111; box-shadow: 0 32px 90px rgba(0,0,0,.58); }
.skin-view--luxury .luxury-portrait::after { content: ""; position: absolute; inset: 14px; border-top: 1px solid rgba(226,185,150,.18); border-bottom: 1px solid rgba(226,185,150,.18); pointer-events: none; }
.skin-view--luxury .portrait-slot img, .skin-view--luxury .portrait-slot .live-video { filter: brightness(1.08) contrast(.94) saturate(1.06) sepia(.05); }
.skin-view--luxury .luxury-readout { min-width: 0; min-height: 0; overflow: hidden; display: grid; align-content: center; gap: 14px; }
.skin-view--luxury .luxury-readout h2 { margin: 12px 0 14px; font: 400 clamp(26px, 3vw, 42px)/1.1 "Songti SC", Georgia, serif; }
.luxury-groups { display: flex; gap: 10px; color: #74665d; font-size: 9px; letter-spacing: .13em; }
.luxury-groups [data-metric-group] { padding: 5px 0; border-bottom: 1px solid transparent; }
[data-ritual-phase="measuring-upper-face-width"] .skin-view--luxury, [data-ritual-phase="measuring-cheek-width"] .skin-view--luxury, [data-ritual-phase="measuring-jaw-width"] .skin-view--luxury, [data-ritual-phase="measuring-face-height"] .skin-view--luxury, [data-ritual-phase="measuring-chin-length"] .skin-view--luxury, [data-ritual-phase="measuring-pupil-distance"] .skin-view--luxury, [data-ritual-phase="measuring-pupil-lower-face"] .skin-view--luxury { --luxury-active-group: face; }
.luxury-current { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; min-height: 72px; padding: 14px 0; border-top: 1px solid #302a25; border-bottom: 1px solid #302a25; color: #b9a99d; }
.luxury-current span { font-size: 14px; }
.luxury-current strong { color: #f1d2b6; font: 400 clamp(30px, 3.3vw, 48px)/1 Georgia, serif; font-variant-numeric: tabular-nums; }
.luxury-current[hidden] { display: none; }
[data-ritual-phase^="measuring-"] .skin-view--luxury .luxury-current { animation: luxuryValueLand var(--ritual-opacity-duration) var(--ease-out) both; }
.skin-view--luxury .luxury-phase { padding: 12px 0; border-top: 1px solid #302a25; border-bottom: 1px solid #302a25; color: #bdab9d; font-size: 13px; }
.luxury-trail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; margin: 0; padding: 0; list-style: none; }
.luxury-trail li { display: none; justify-content: space-between; gap: 8px; min-width: 0; padding: 7px 0; border-bottom: 1px solid #282522; color: #77716b; font-size: 11px; }
.luxury-trail li[data-measured] { display: flex; animation: luxuryTrailIn 240ms var(--ease-out) both; }
.luxury-trail li[aria-current="step"] { color: #e8d0bd; border-bottom-color: color-mix(in srgb, var(--skin-accent) 58%, transparent); }
.luxury-trail b { color: #d8cdc3; font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.luxury-result { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; padding: 16px 0 0; border-top: 1px solid #302a25; transition: opacity var(--ritual-opacity-duration) var(--ease-out), transform var(--ritual-opacity-duration) var(--ease-out); }
.luxury-result[data-result-state="idle"] { opacity: 0; pointer-events: none; transform: translateY(8px); }
.luxury-result[data-result-state="active"] { opacity: 1; transform: translateY(0); }
.luxury-subscore { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: #8f8177; font-size: 11px; }
.luxury-subscore b { color: #e7c4a7; font: 400 22px Georgia, serif; }
.luxury-total { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; color: #bda991; }
.luxury-total strong { color: #f1d2b6; font: 300 54px Georgia, serif; }
.luxury-total em { color: #d8cdc3; font-style: normal; }
.luxury-result ul { grid-column: 1 / -1; display: grid; gap: 5px; margin: 0; padding-left: 16px; color: #93877e; font-size: 11px; line-height: 1.45; }
.luxury-verdict { grid-column: 1 / -1; margin: 2px 0 0; color: #e7c4a7; font-size: 13px; line-height: 1.6; }
[data-ritual-phase="completed"] .skin-view--luxury .luxury-live-analysis { opacity: .45; transform: scale(.985); transform-origin: top left; transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.skin-view--luxury .visual-estimate-note { position: static; max-width: 230px; margin: 0; color: #68625d; font-size: 11px; line-height: 1.6; text-align: left; }
@keyframes luxuryValueLand { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes luxuryTrailIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.skin-view--warm { --skin-bg: #eee8df; --skin-text: #251f1b; --skin-accent: #a47452; --skin-line: #ffc08b; background: #eee8df; color: #251f1b; }
.skin-view--warm .lens-contour { fill: rgba(164,116,82,.035); stroke: rgba(127,83,54,.72); stroke-width: .2; filter: none; }
.skin-view--warm .skin-brand { left: 2.5%; top: 18px; }
.skin-view--warm .skin-brand img { width: 138px; background: #090909; border-radius: 2px; }
.skin-view--warm .warm-layout { display: grid; grid-template-columns: minmax(380px, 7fr) minmax(360px, 5fr); gap: 5%; width: 94%; height: 78%; margin: 11% auto 0; }
.skin-view--warm .warm-portrait { width: min(100%, 430px); height: 100%; aspect-ratio: 3/4; justify-self: center; background: #1a1817; border-radius: 4px; box-shadow: 0 22px 60px rgba(61,46,34,.2); }
.skin-view--warm .portrait-slot img, .skin-view--warm .portrait-slot .live-video { filter: brightness(1.05) contrast(.95) saturate(1.05) sepia(.07); }
.skin-view--warm .warm-readout { min-width: 0; padding-top: 4%; }
.skin-view--warm .warm-readout h1 { margin: 16px 0 28px; font: 420 clamp(38px, 5vw, 68px)/1.02 "Songti SC", Georgia, serif; letter-spacing: -.06em; }
.skin-view--warm .warm-readout h1 em { color: #a46f4c; font-style: normal; }
.warm-progress { position: relative; display: flex; justify-content: space-between; border-bottom: 4px solid #d9d0c6; padding-bottom: 9px; color: #766b62; font-size: 13px; }
.warm-progress > b { position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; overflow: hidden; }
.warm-metrics { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 28px; }
.warm-metrics article { min-height: 82px; padding: 15px; background: rgba(255,255,255,.52); border: 1px solid rgba(80,59,44,.1); }
.warm-metrics span, .warm-result span { color: #887a70; font-size: 12px; }
.warm-metrics strong { display: block; margin-top: 14px; font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.warm-metrics [data-metric-value] { opacity: .28; transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out); transform: translateY(2px); }
.warm-metrics [data-measured] [data-metric-value] { opacity: 1; transform: translateY(0); }
.warm-metrics [aria-current="step"] { border-color: color-mix(in srgb, var(--skin-accent) 55%, transparent); }
.warm-result { display: flex; align-items: baseline; gap: 14px; margin-top: 24px; transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out); }
.warm-result[data-result-state="idle"] { opacity: .38; }
.warm-verdict { margin: 14px 0 0; color: #6b5a4d; font-size: 13px; line-height: 1.7; }
.warm-result strong { font-size: 40px; font-weight: 550; color: #a46f4c; }
.warm-result b { font-weight: 500; }
.skin-view--warm .warm-readout p { color: #887a70; font-size: 11px; line-height: 1.6; }
.warm-actions { display: flex; gap: 10px; margin-top: 28px; }
.warm-actions button { height: 46px; padding: 0 20px; border: 1px solid #2a211c; background: transparent; color: #2a211c; cursor: pointer; }
.warm-actions button:last-child { flex: 1; background: #2a211c; color: #fff; }

.skin-view--chamber { --skin-bg: #02080b; --skin-text: #d8f9f6; --skin-accent: #7ef8ed; --skin-line: #7ef8ed; background: radial-gradient(circle at 50% 42%, rgba(27,126,125,.28), transparent 35%), #02080b; color: #d8f9f6; }
.skin-view--chamber .lens-contour { fill: rgba(126,248,237,.045); stroke: #7ef8ed; stroke-width: .3; filter: drop-shadow(0 0 5px rgba(126,248,237,.72)); }
.skin-view--chamber::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.82), transparent 26% 74%, rgba(0,0,0,.82)); pointer-events: none; }
.skin-view--chamber .chamber-portrait { position: absolute; inset: 0 20%; }
.skin-view--chamber .portrait-slot img, .skin-view--chamber .portrait-slot .live-video { filter: saturate(.5) contrast(1.1) brightness(.72) hue-rotate(105deg); }
.skin-view--chamber .chamber-portrait::after { content: ""; position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(rgba(99,227,217,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(99,227,217,.15) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(circle, black 25%, transparent 72%); pointer-events: none; }
.skin-view--chamber .skin-brand { top: 24px; left: 4%; }
.skin-view--chamber .skin-brand img { width: 148px; }
.skin-view--chamber .chamber-steps { position: absolute; z-index: 5; top: 27%; left: 4%; display: flex; flex-direction: column; gap: 20px; color: rgba(167,232,227,.38); font-size: 13px; }
.skin-view--chamber .chamber-steps [data-phase-step] { font-weight: 400; transition: color 260ms var(--ease-out), transform 260ms var(--ease-out); }
.skin-view--chamber .chamber-steps [aria-current="step"] { color: #aefcf5; font-weight: 500; transform: translateX(6px); }
.skin-view--chamber .chamber-readout { position: absolute; z-index: 5; top: 29%; right: 4%; width: 19%; }
.skin-view--chamber .chamber-readout div { display: flex; justify-content: space-between; padding: 15px 0; border-top: 1px solid rgba(129,231,222,.18); color: #63928f; font-size: 12px; }
.skin-view--chamber .chamber-readout b { color: #c8f6f2; font-weight: 400; font-variant-numeric: tabular-nums; }
.skin-view--chamber footer { position: absolute; z-index: 5; bottom: 7%; left: 50%; transform: translateX(-50%); width: min(560px, 48vw); text-align: center; }
.skin-view--chamber footer > span { display: block; font-size: 16px; letter-spacing: .08em; }
.skin-view--chamber footer strong { display: block; margin-top: 10px; color: #aefcf5; font-size: 28px; font-weight: 300; }
.skin-view--chamber footer small { display: block; margin-top: 10px; color: #63928f; font-size: 10px; }
.skin-view--chamber footer > [data-phase-index] { margin-top: 6px; color: #63928f; font-size: 10px; }
.skin-view--chamber footer > [data-ritual-progress] { width: 120px; height: 1px; margin: 10px auto 0; }

#global-controls { position: fixed; z-index: 50; right: max(22px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 8px; }
#global-controls[hidden] { display: none; }
#global-controls button, #global-controls label { min-height: 42px; padding: 0 14px; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.45); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; backdrop-filter: blur(10px); }
#global-controls input { display: none; }
#global-status { max-width: 260px; color: rgba(255,255,255,.72); font-size: 11px; text-align: right; }
.entry-view { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(circle at 52% 43%, rgba(221,176,135,.14), transparent 29%), #070707; }
.entry-view::after { content: ""; position: absolute; inset: 12% 28%; border: 1px solid rgba(231,184,143,.18); pointer-events: none; }
.entry-logo { position: absolute; top: max(28px, env(safe-area-inset-top)); left: max(32px, env(safe-area-inset-left)); width: 178px; }
.entry-copy { position: absolute; z-index: 1; left: 10%; top: 50%; width: min(560px, 52vw); transform: translateY(-50%); }
.entry-copy > span { color: #ddb087; font-size: 11px; letter-spacing: .22em; }
.entry-copy h1 { margin: 22px 0; color: #f4eee8; font: 400 clamp(52px, 7vw, 92px)/.98 "Songti SC", Georgia, serif; letter-spacing: -.07em; }
.entry-copy p { max-width: 400px; margin: 0 0 28px; color: #a49b93; font-size: 14px; line-height: 1.8; }
.primary-action, .consent-actions button { min-height: 54px; padding: 0 26px; border: 1px solid #ddb087; background: #ddb087; color: #17110d; font-weight: 600; cursor: pointer; }
.entry-note { position: absolute; right: max(32px, env(safe-area-inset-right)); bottom: max(28px, env(safe-area-inset-bottom)); color: #6c645e; font-size: 11px; }
.consent-layer { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,.7); backdrop-filter: blur(10px); }
.consent-layer[hidden] { display: none; }
.consent-dialog { width: min(500px, 100%); padding: 34px; border: 1px solid rgba(221,176,135,.5); background: #0e0d0c; color: #f4eee8; box-shadow: 0 32px 100px rgba(0,0,0,.5); }
.consent-dialog > span { color: #ddb087; font-size: 10px; letter-spacing: .2em; }
.consent-dialog h2 { margin: 16px 0; font: 400 34px/1.1 "Songti SC", Georgia, serif; }
.consent-dialog p { color: #b4aaa1; font-size: 13px; line-height: 1.8; }
.consent-actions { display: flex; gap: 10px; margin-top: 28px; }
.consent-actions button:last-child { border-color: rgba(255,255,255,.3); background: transparent; color: #f4eee8; }
.camera-startup { position: fixed; z-index: 80; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; background: radial-gradient(circle at 50% 44%, rgba(221,176,135,.14), transparent 26%), #070707; color: #f4eee8; text-align: center; }
.camera-startup[hidden] { display: none; }
.camera-startup__pulse { width: 82px; height: 106px; border: 1px solid #ddb087; border-radius: 48% 48% 44% 44%; box-shadow: 0 0 34px rgba(221,176,135,.18); animation: cameraStartupPulse 1.4s ease-in-out infinite; }
.camera-startup strong { margin-top: 10px; font: 400 28px/1.2 "Songti SC", Georgia, serif; }
.camera-startup span { color: #93877e; font-size: 12px; letter-spacing: .04em; }
@keyframes cameraStartupPulse { 0%, 100% { opacity: .42; transform: scale(.96); } 50% { opacity: 1; transform: scale(1); } }
#skin-settings { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(0,0,0,.56); backdrop-filter: blur(12px); }
#skin-settings[hidden] { display: none; }
.settings-dialog { width: min(760px, 86vw); padding: 28px; background: #161414; color: #f7ede4; border: 1px solid rgba(226,185,150,.36); box-shadow: 0 22px 80px rgba(0,0,0,.5); }
.settings-dialog header { display: flex; align-items: flex-start; justify-content: space-between; }
.settings-dialog h2 { margin: 0; font: 400 30px "Songti SC", Georgia, serif; }
.settings-dialog p { margin: 8px 0 22px; color: #9d938c; font-size: 12px; }
.settings-dialog [data-skin-close] { border: 0; background: transparent; color: #d6b698; font-size: 24px; cursor: pointer; }
.skin-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.skin-option { min-height: 130px; padding: 15px; border: 1px solid rgba(255,255,255,.16); background: #211e1c; color: inherit; text-align: left; cursor: pointer; }
.skin-option[data-selected] { border-color: #ddb087; box-shadow: 0 0 0 1px #ddb087 inset; }
.skin-option strong { display: block; margin-bottom: 8px; font-size: 16px; font-weight: 500; }
.skin-option span { color: #9d938c; font-size: 11px; line-height: 1.5; }
.long-press-progress { height: 2px; margin-top: 20px; background: rgba(255,255,255,.1); overflow: hidden; }
.long-press-progress::after { content: ""; display: block; width: calc(var(--progress, 0) * 100%); height: 100%; background: #ddb087; }

@media (max-width: 1020px) {
  .skin-view--luxury { grid-template-columns: minmax(150px, 18vw) minmax(350px, 1fr) minmax(220px, 25vw); gap: 16px; padding-inline: 2.5%; }
  .skin-view--luxury .luxury-portrait { width: min(100%, 470px); }
  .skin-view--warm .warm-layout { width: 96%; gap: 3%; }
  .skin-view--warm .warm-readout h1 { font-size: 46px; }
  .skin-view--chamber .chamber-portrait { inset: 0 14%; }
  .entry-copy { left: 7%; width: 56vw; }
  .entry-copy h1 { font-size: clamp(46px, 7vw, 72px); }
}
@media (orientation: portrait) {
  #app::before { content: "请将 iPad 横置查看测量体验"; position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; background: #090909; color: #e7c4a7; font-size: 22px; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) {
  [data-ritual-point], [data-ritual-line], [data-ritual-label], [data-ritual-group], [data-calibration-group], [data-calibration-point], .score-result { animation-duration: 200ms !important; animation-delay: 0ms !important; opacity: 1; stroke-dashoffset: 0; transform: none; }
  .score-ring { animation-duration: 200ms !important; animation-delay: 0ms !important; }
  [data-calibration-beam] { display: none; }
  .skin-view--chamber .chamber-portrait::after { display: none; }
}