@font-face {
  font-family: Geist;
  src: url('./assets/geist-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
:root {
  color-scheme: light;
  --canvas: #f3f5f2;
  --stage: #e5e9e3;
  --ink: #172019;
  --secondary: #58645b;
  --quiet: #69746b;
  --accent: #45621a;
  --signal: #d0f58a;
  --on-signal: #1c2b0d;
  --line: #c5cec2;
  --wash: #e6ecdf;
  --badge-field: #e6ebe1;
  --badge-disc: #c6d8b1;
  --focus: #45621a;
  --photo-opacity: .94;
  --shade: #d9e1d4;
  --ease: cubic-bezier(.22,.78,.18,1);
  --spring: cubic-bezier(.2,.85,.18,1.035);
  --duration: .5s;
  font-family: Geist, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-synthesis: none;
  color: var(--ink);
  background: var(--stage);
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --canvas: #101411;
  --stage: #0b0f0c;
  --ink: #edf2e9;
  --secondary: #a5b19f;
  --quiet: #92a18b;
  --accent: #d0f58a;
  --line: #3b4835;
  --wash: #1e281a;
  --badge-field: #1c2820;
  --badge-disc: #3a4e32;
  --focus: #d0f58a;
  --photo-opacity: .94;
  --shade: #080c08;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, textarea { font: inherit; }
button { border: 0; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; opacity: .3; }
button { transition: color .16s, transform .18s var(--spring); }
button:not(:disabled):active { transform: scale(.97); }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 1px solid var(--focus); outline-offset: 5px;
}
a { color: inherit; text-decoration: none; }
button:hover:not(:disabled) { color: var(--accent); }
button, a, summary { touch-action: manipulation; }
[hidden] { display: none !important; }
::selection { color: var(--canvas); background: var(--ink); }
.mono { font-variant-numeric: tabular-nums; }
.muted { color: var(--secondary); }
.eyebrow { font-size: 3cqw; color: var(--secondary); font-weight: 400; letter-spacing: 0; }
.brand-mark { font-family: Arial, sans-serif; font-weight: 800; letter-spacing: -3px; }
.lab-header { height: 72px; margin: 0 5%; display: flex; align-items: center; justify-content: space-between; }
.lab-brand { display: flex; align-items: center; gap: 18px; font-size: 11px; letter-spacing: .08em; }
.lab-brand .brand-mark { font-size: 30px; line-height: 1; }
.edition { color: var(--secondary); font-size: 11px; letter-spacing: .1em; }
.study { min-height: calc(100dvh - 116px); max-width: 1100px; padding: 16px 50px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 100px; }
.device-stage { position: relative; display: flex; align-items: center; justify-content: center; }
.device { height: min(790px, calc(100dvh - 148px)); aspect-ratio: 390 / 844; background: var(--canvas); }
.screen { position: relative; isolation: isolate; width: 100%; height: 100%; container-type: inline-size; perspective: 1500px; overflow: hidden; background: var(--canvas); touch-action: none; user-select: none; -webkit-user-select: none; outline: 0; --rotation: 0deg; --sheet-offset: 105%; --badge-lift: 0%; --badge-scale: 1; --context-opacity: 0; }
.badge-carrier { position: absolute; inset: 0; z-index: 1; transform: translate3d(0,var(--badge-lift),0) scale(var(--badge-scale)); transform-origin: center top; will-change: transform; }
.badge-rotor { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateY(var(--rotation)); will-change: transform; }
.badge-face { position: absolute; inset: 0; background: var(--canvas); backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.front { transform: translateZ(1.5px); background: var(--badge-field); }
.back { transform: rotateY(180deg) translateZ(1.5px); }
.badge-edge { position: absolute; top: 0; bottom: 0; width: 3px; background: linear-gradient(90deg,#66746e,#f5faf7 44%,#8b9a93); transform: translateX(-1.5px) rotateY(90deg); }
.edge-left { left: 0; }
.edge-right { left: 100%; }
.badge-face:after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(110deg,transparent 16%,#f6fff9 49%,transparent 76%); background-size: 220% 100%; background-position: var(--shine-x,50%) 0; opacity: var(--shine-opacity,0); }
.badge-geometry { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.geometry-disc { position: absolute; width: 148cqw; height: 148cqw; top: 15.5%; left: 10%; border-radius: 50%; background: var(--badge-disc); transform: translate3d(var(--disc-x,0px),var(--disc-y,0px),0) scale(var(--disc-scale,1)); }
.portrait-area { position: absolute; z-index: 1; inset: 18% -5% 20% 19%; overflow: visible; pointer-events: none; transform: translate3d(var(--portrait-x,0px),var(--portrait-y,0px),0); opacity: var(--portrait-visibility,1); }
.portrait { width: 100%; height: 100%; object-fit: contain; object-position: center top; filter: grayscale(1) contrast(1.04); opacity: var(--photo-opacity); pointer-events: none; user-select: none; }
.identity-plinth { position: absolute; z-index: 2; inset: 0; background: var(--canvas); clip-path: ellipse(165% 50% at 0% 108%); pointer-events: none; }
.portrait-shade { display: none; }
.face-brand { position: absolute; z-index: 3; top: 6.2%; left: 7.5%; }
.wordmark { font-size: 8cqw; font-weight: 700; letter-spacing: -.075em; line-height: 1; }
.wordmark-dot { color: var(--accent); }
.identity-block { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.identity-topline { position: absolute; inset: 17% 7.5% auto; display: flex; align-items: center; justify-content: space-between; color: var(--secondary); font-size: 2.8cqw; }
.employee-indicator { display: flex; align-items: center; gap: 6px; }
.employee-indicator i { display: inline-block; width: 3px; height: 3px; background: var(--accent); border-radius: 50%; }
.identity-name { position: absolute; top: 66.5%; left: 7%; right: 7.5%; transform: translate3d(var(--name-x,0px),var(--name-y,0px),0); }
.identity-name h1 { font-size: min(22cqw, 11.2dvh); line-height: 1.15; font-weight: 350; letter-spacing: -.085em; margin: 0; margin-left: -.04em; color: var(--accent); }
.latin-name { display: block; font-size: 3.7cqw; font-weight: 400; letter-spacing: .16em; margin: 4% 0 0 .1em; }
.identity-bottom { position: absolute; left: 7.5%; right: 7.5%; bottom: 8.2%; display: flex; justify-content: space-between; align-items: flex-end; }
.identity-bottom p { margin: 0 0 8px; font-size: 3.7cqw; font-weight: 400; }
.identity-bottom span { color: var(--secondary); font-size: 2.5cqw; letter-spacing: .03em; }
.identity-id { text-align: right; }
.identity-id p { font-size: 6cqw; font-weight: 350; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.employee-indicator { color: var(--accent); }
.employee-indicator i { width: 4px; height: 4px; }
.screen-menu-button { position: absolute; top: 4%; right: 4%; width: 13cqw; min-height: 44px; font-size: 5.5cqw; line-height: 1; letter-spacing: .08em; z-index: 3; }
.gesture-hint { position: absolute; left: 7.5%; right: 7.5%; bottom: 2.4%; display: flex; gap: 22px; font-size: 2.5cqw; color: var(--secondary); z-index: 3; pointer-events: none; transition: opacity .3s, transform .3s; }
.gesture-hint.dismissed { opacity: 0; transform: translateY(7px); }
.home-indicator { display: none; }
.screen.tasks-open .screen-menu-button, .screen.detail-open .screen-menu-button { opacity: 0; pointer-events: none; }
.back { padding: 13.5% 7.5% 10%; }
.back:before { content: ''; position: absolute; z-index: -1; width: 140cqw; height: 140cqw; top: -58cqw; left: -18cqw; background: var(--badge-field); border-radius: 50%; pointer-events: none; }
.back-heading { display: flex; align-items: center; justify-content: space-between; }
.back-heading > .mono { display: none; }
.pass-intro { margin-top: 22%; }
.pass-intro .eyebrow { font-size: 3cqw; }
.zone-button { display: flex; align-items: center; gap: 14px; padding: 4% 0 0; font-size: 10.5cqw; font-weight: 350; line-height: 1.3; letter-spacing: -.065em; }
.zone-button span { font-size: 4cqw; color: var(--secondary); }
.pass-intro p { margin: 4% 0 0; font-size: 3cqw; color: var(--secondary); }
.qr-section { position: relative; width: 76%; aspect-ratio: 1; margin: 19% auto 0; padding: 4%; background: #fff; }
.qr-image { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.qr-bracket { display: none; }
.pass-state { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 9%; font-size: 2.8cqw; color: var(--accent); }
.status-light { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.pass-owner { display: flex; justify-content: center; margin-top: 18%; }
.pass-owner-name { font-size: 4cqw; }
.pass-owner-name span { font-size: 2.7cqw; letter-spacing: .08em; margin-left: 10px; color: var(--secondary); }
.pass-bottom { text-align: center; margin-top: 5%; font-size: 2.8cqw; color: var(--secondary); }
.pass-disclaimer { position: absolute; bottom: 5%; left: 7.5%; right: 7.5%; font-size: 2.5cqw; color: var(--secondary); text-align: center; margin: 0; }
.qr-cover { position: absolute; inset: -1px; background: var(--canvas); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; font-size: 4.5cqw; }
.qr-cover button { min-height: 44px; padding: 8px 10px; color: var(--accent); font-size: 3.5cqw; }
.qr-cover.loading span:before { content: ''; display: block; height: 1px; width: 30px; background: var(--accent); margin: 0 auto 25px; animation: load-line 1s ease-in-out infinite; }
@keyframes load-line { 0%,100% { transform: scaleX(.4); opacity: .3; } 50% { transform: scaleX(1); opacity: 1; } }
.pass-state.is-expired { color: var(--secondary); }
.badge-shade { position: absolute; inset: 0; background: var(--shade); opacity: var(--shade-opacity,0); z-index: 2; pointer-events: none; }
.context-strip { position: absolute; top: 5.3%; left: 7.5%; right: 7.5%; display: flex; justify-content: space-between; align-items: center; opacity: var(--context-opacity); z-index: 5; pointer-events: none; }
.context-person { font-size: 4.3cqw; font-weight: 400; }
.context-person img { display: none; }
.context-person small { display: block; font-size: 2.5cqw; color: var(--secondary); margin-top: 6px; letter-spacing: .025em; }
.context-strip button { padding: 12px 0 12px 20px; min-height: 44px; font-size: 3cqw; color: var(--secondary); pointer-events: auto; }
.context-strip button span { margin-left: 8px; }
.task-sheet { position: absolute; inset: 0; background: var(--canvas); z-index: 4; clip-path: ellipse(165% var(--surface-radius,50%) at var(--surface-x,0%) var(--surface-y,108%)); opacity: var(--surface-opacity,0); transition: transform .42s var(--ease); display: flex; flex-direction: column; transform-origin: left center; }
.sheet-scroll { transform: translate3d(0,var(--content-y,38px),0); opacity: var(--content-opacity,0); }
.identity-bridge { position: absolute; top: 0; left: 0; z-index: 5; pointer-events: none; transform-origin: left top; white-space: nowrap; line-height: 1.15; visibility: hidden; }
.screen.identity-in-flight .identity-bridge { visibility: visible; }
.screen.identity-in-flight:not(.back-facing) .identity-name h1, .screen.identity-in-flight.back-facing .pass-owner-name, .screen.identity-in-flight #context-name { visibility: hidden; }
.screen.detail-open .identity-bridge { visibility: hidden; }
.screen.detail-open .task-sheet { transform: translate3d(-8%,0,0) scale(.97); opacity: .45; }
.screen.detail-open .context-strip { opacity: 0; }
.screen.tasks-open { touch-action: pan-y; }
.sheet-grip { flex-shrink: 0; height: 17.5%; width: 100%; cursor: grab; touch-action: none; padding: 0; }
.sheet-grip:active { cursor: grabbing; transform: none; }
.sheet-grip span { display: none; }
.sheet-grip:focus-visible { outline: none; }
.sheet-grip:focus-visible:after { content: ''; width: 20px; height: 1px; background: var(--focus); position: absolute; left: calc(50% - 10px); top: 13%; }
.sheet-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none; padding: 0 7.5% 9%; }
.sheet-scroll::-webkit-scrollbar, .detail-content::-webkit-scrollbar { display: none; }
.sheet-heading { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 10%; }
.sheet-heading h2 { font-size: 9cqw; font-weight: 350; letter-spacing: -.05em; line-height: 1.2; margin: 0; }
.sheet-date { display: flex; gap: 10px; align-items: baseline; font-size: 3.8cqw; font-weight: 350; }
.sheet-date small { font-size: 2.7cqw; color: var(--secondary); }
.today-row { display: flex; align-items: center; justify-content: space-between; color: var(--secondary); font-size: 2.8cqw; }
.attendance-summary { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; padding: 4% 0 5%; }
.attendance-time { font-size: 23cqw; line-height: 1.1; font-weight: 300; letter-spacing: -.085em; font-variant-numeric: tabular-nums; color: var(--accent); }
.attendance-time > span { padding: 0 2px; }
.attendance-status { color: var(--accent); font-size: 2.9cqw; text-align: right; }
.attendance-status i { display: none; }
.attendance-status small { display: block; font-size: 2.5cqw; color: var(--secondary); margin-top: 12px; }
.pending-task { width: 100%; display: flex; gap: 14px; align-items: center; padding: 5% 0; margin: 4% 0 7%; text-align: left; }
.pending-task:before { content: ''; width: 1px; height: 28px; background: var(--accent); }
.pending-number { display: none; }
.pending-copy { flex: 1; }
.pending-copy strong { display: block; font-size: 3.7cqw; font-weight: 400; margin-bottom: 9px; }
.pending-copy small { display: block; font-size: 2.7cqw; color: var(--secondary); }
.row-arrow { font-size: 4cqw; color: var(--secondary); }
.pending-task.completed:before { background: var(--line); }
.service-heading { color: var(--secondary); font-size: 2.8cqw; margin: 7% 0 3%; }
.service-list, .more-services { display: grid; grid-template-columns: 1fr 1fr; column-gap: 7%; row-gap: 4%; }
.service-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 5% 0; text-align: left; font-size: 4.1cqw; font-weight: 400; }
.service-index { display: none; }
.service-row .row-arrow { font-size: 3cqw; opacity: 0; transition: opacity .2s, transform .2s; }
.service-row:hover .row-arrow, .service-row:focus-visible .row-arrow { opacity: 1; transform: translate(2px,-2px); }
.all-services-button { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 6% 0 2%; margin-top: 4%; width: 100%; text-align: left; font-size: 2.9cqw; color: var(--secondary); }
.all-services-button > span:last-child { font-size: 4cqw; }
.more-services { padding: 5% 0; }
.detail-panel { position: absolute; inset: 0; background: var(--canvas); z-index: 6; transform: translateX(102%); transition: transform .42s var(--ease); overflow: hidden; display: flex; flex-direction: column; touch-action: pan-y; }
.screen.detail-open .detail-panel { transform: translateX(0); }
.detail-nav { display: flex; align-items: center; justify-content: space-between; padding: 10% 7.5% 4%; flex-shrink: 0; }
.back-button { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 5px 12px 5px 0; font-size: 3cqw; color: var(--secondary); }
.back-button > span { font-size: 5.5cqw; font-weight: 300; }
.detail-nav > .mono { display: none; }
.detail-content { position: relative; flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 9% 7.5% 12%; }
.detail-eyebrow { display: none; }
.detail-title { font-size: 11cqw; font-weight: 400; line-height: 1.25; letter-spacing: -.055em; margin: 0; outline: none; }
.detail-subtitle { font-size: 3cqw; line-height: 1.8; color: var(--secondary); margin: 5% 0 12%; }
.detail-hero-number { font-size: 25cqw; font-weight: 250; letter-spacing: -.08em; line-height: 1.1; margin: 17% 0 4%; font-variant-numeric: tabular-nums; }
.detail-hero-caption { font-size: 3.1cqw; color: var(--accent); }
.timeline { margin: 17% 0 12%; }
.timeline-item { display: grid; grid-template-columns: 2cqw 1fr; gap: 4%; padding-bottom: 12%; }
.timeline-point { width: 2px; height: 20px; background: var(--accent); margin-top: 4px; }
.timeline-item.upcoming .timeline-point { background: var(--line); }
.timeline-item strong { font-size: 3.6cqw; font-weight: 400; }
.timeline-item p { color: var(--secondary); font-size: 2.8cqw; margin: 9px 0 0; }
.primary-button { display: flex; justify-content: space-between; align-items: center; min-height: 50px; width: 100%; text-align: left; padding: 6% 0; background: transparent; color: var(--ink); font-size: 4cqw; font-weight: 450; white-space: nowrap; }
.primary-button:after { content: '↗'; display: grid; place-items: center; width: 10cqw; height: 10cqw; flex-shrink: 0; margin-left: 14px; background: var(--signal); color: var(--on-signal); border-radius: 50%; font-size: 5cqw; font-weight: 350; transition: transform .22s var(--spring); }
.primary-button:hover:not(:disabled):after { transform: rotate(45deg); }
.primary-button[data-action='tasks']:after { content: '↙'; }
.primary-button:disabled { opacity: .65; }
.primary-button:disabled:after { content: ''; width: 6cqw; height: 6cqw; background: transparent; border: 1px solid var(--line); border-top-color: var(--accent); animation: submitting-turn .75s linear infinite; }
@keyframes submitting-turn { to { transform: rotate(360deg); } }
.secondary-button { width: 100%; min-height: 48px; text-align: left; padding: 3% 0; color: var(--secondary); font-size: 3.2cqw; }
.detail-note { color: var(--secondary); font-size: 2.6cqw; line-height: 1.9; margin: 7% 0 0; }
.equipment-visual { position: relative; margin: 12% 0 9%; padding: 28% 0 8%; }
.equipment-type { position: absolute; top: 1%; left: -.03em; font-size: 23cqw; letter-spacing: -.09em; font-weight: 250; line-height: 1.1; color: var(--quiet); }
.equipment-visual strong { display: block; font-size: 4cqw; font-weight: 400; margin-top: 9%; }
.equipment-visual small { display: block; color: var(--secondary); font-size: 2.6cqw; margin-top: 8px; }
.detail-data-row { display: flex; justify-content: space-between; gap: 20px; padding: 5% 0; font-size: 3.3cqw; line-height: 1.7; }
.detail-data-row > span:first-child { color: var(--secondary); }
.detail-data-row:last-of-type { margin-bottom: 12%; }
.success-mark { color: var(--accent); font-size: 9cqw; margin: 18% 0 8%; }
.success-heading { font-size: 12cqw; }
.success-copy { color: var(--secondary); font-size: 3.3cqw; line-height: 2; margin: 6% 0 17%; }
.detail-code { padding: 5%; margin: 17% auto 9%; width: 77%; aspect-ratio: 1; background: #fff; }
.detail-code img { width: 100%; height: 100%; }
.detail-code-caption { font-size: 2.9cqw; color: var(--secondary); line-height: 1.9; text-align: center; margin-bottom: 13%; }
.plate { font-size: 9cqw; letter-spacing: -.02em; font-weight: 300; padding: 19% 0 17%; white-space: nowrap; }
.permission-item { padding: 8% 0; }
.permission-item-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 4cqw; }
.state-tag { font-size: 2.6cqw; color: var(--accent); white-space: nowrap; }
.permission-item p { color: var(--secondary); font-size: 2.9cqw; line-height: 1.9; margin: 4% 0 0; }
.feedback-label { display: block; color: var(--secondary); font-size: 3cqw; margin: 12% 0 6%; }
.feedback-input { width: 100%; min-height: 40cqw; resize: vertical; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0 0 7%; font-size: 3.8cqw; line-height: 1.9; outline: none; user-select: text; -webkit-user-select: text; }
.feedback-input::placeholder { color: var(--secondary); opacity: 1; }
.feedback-input:focus { border-color: var(--focus); }
.feedback-error { color: var(--ink); font-size: 3cqw; line-height: 1.8; margin: 15px 0; }
.screen-overlay { position: absolute; inset: 0; z-index: 7; display: flex; }
.overlay-scrim { position: absolute; inset: 0; background: var(--canvas); cursor: default; }
.overlay-dialog { width: 100%; height: 100%; position: relative; background: var(--canvas); padding: 16% 7.5% 12%; overflow-y: auto; overscroll-behavior: contain; outline: none; animation: overlay-in .3s var(--ease); }
@keyframes overlay-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.overlay-topline { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 0 0 9%; }
.overlay-topline h2 { font-size: 7.5cqw; font-weight: 350; line-height: 1.5; letter-spacing: -.04em; margin: 0; }
.close-overlay { display: flex; justify-content: flex-end; align-items: center; flex-shrink: 0; min-width: 44px; min-height: 44px; font-size: 6cqw; font-weight: 250; }
.help-intro { color: var(--secondary); font-size: 3.2cqw; line-height: 1.9; margin: 0 0 10%; }
.help-action { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; padding: 7% 0; font-size: 4.1cqw; }
.help-action small { display: block; color: var(--secondary); font-size: 2.8cqw; margin-top: 8px; }
.help-action .symbol { font-size: 6cqw; font-weight: 300; color: var(--secondary); }
.help-motion-label { display: flex; align-items: center; gap: 12px; font-size: 3.2cqw; margin-top: 9%; color: var(--secondary); }
.help-foot { color: var(--secondary); font-size: 2.7cqw; line-height: 1.9; margin: 9% 0 0; }
.assist-settings { margin-top: 5%; }
.assist-settings .help-action { padding: 4% 0; font-size: 3.3cqw; }
.language-switch { position: absolute; z-index: 8; top: 4%; right: 5%; min-width: 44px; min-height: 44px; padding: 0; font-size: 3cqw; color: var(--secondary); }
.screen-menu-button { right: 18%; }
.context-strip { right: 23%; }
.screen.assist-open .language-switch { opacity: 0; pointer-events: none; }
.back-button #detail-back-label { font-size: 3cqw; font-weight: 400; }
.lang-en .identity-name h1 { font-size: 14cqw; letter-spacing: -.065em; white-space: nowrap; }
.lang-en .identity-name { top: 69%; }
.lang-en .latin-name { letter-spacing: .02em; }
.lang-en .zone-button { font-size: 8.4cqw; letter-spacing: -.055em; }
.lang-en .detail-title { font-size: 9.3cqw; }
.lang-en .service-row { font-size: 3.7cqw; }
.lang-en .identity-bottom p { font-size: 3.5cqw; }
.lang-en .identity-id p { font-size: 5.1cqw; }
.fact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; margin: 13% 0; }
.fact-grid > div { min-width: 0; }
.fact-label { display: block; font-size: 2.8cqw; color: var(--secondary); line-height: 1.7; }
.fact-grid p { font-size: 3.7cqw; font-weight: 400; line-height: 1.7; margin: 8% 0 0; overflow-wrap: anywhere; }
.fact-grid .fact-time { font-size: 9cqw; font-weight: 300; letter-spacing: -.055em; line-height: 1.2; }
.fact-grid small { display: block; font-size: 2.7cqw; color: var(--secondary); margin-top: 6%; }
.origin-caption { color: var(--secondary); font-size: 2.7cqw; line-height: 1.8; margin: 10% 0 13%; }
.attendance-focus { margin: 19% 0 17%; }
.service-number { font-size: 29cqw; font-weight: 250; line-height: 1.05; letter-spacing: -.085em; font-variant-numeric: tabular-nums; margin-left: -.055em; }
.focus-caption { color: var(--accent); font-size: 3.1cqw; font-weight: 400; line-height: 1.8; margin: 5% 0 0; }
.attendance-points { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; }
.attendance-points span { display: block; font-size: 2.8cqw; color: var(--secondary); margin-bottom: 7%; }
.attendance-points strong { display: block; font-size: 6cqw; line-height: 1.5; font-weight: 350; font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.attendance-points .unrecorded { color: var(--secondary); font-size: 4.3cqw; font-weight: 350; padding-top: 1%; }
.equipment-focus { margin: 18% 0 13%; }
.equipment-model { font-size: 23cqw; line-height: 1.1; letter-spacing: -.075em; font-weight: 250; margin-left: -.04em; white-space: nowrap; }
.equipment-focus > p { font-size: 3.5cqw; color: var(--secondary); line-height: 1.8; margin: 7% 0 3%; }
.equipment-focus .focus-caption { display: block; margin-top: 3%; }
.equipment-facts { margin-top: 15%; margin-bottom: 10%; }
.empty-equipment { margin: 20% 0 12%; }
.empty-equipment .success-copy { margin-bottom: 10%; }
.text-selector { position: relative; display: flex; align-items: baseline; gap: 9%; overflow-x: auto; scrollbar-width: none; margin: 7% 0 14%; padding: 0 0 2%; }
.text-selector::-webkit-scrollbar { display: none; }
.text-selector button { flex-shrink: 0; min-height: 44px; padding: 3% 0; font-size: 3.5cqw; line-height: 1.5; color: var(--secondary); white-space: nowrap; }
.text-selector button[aria-selected='true'] { color: var(--accent); font-weight: 550; }
.selection-marker { position: absolute; bottom: 0; height: 2px; background: var(--accent); transform-origin: left center; pointer-events: none; }
.request-selector { margin-bottom: 16%; gap: 10%; }
.request-focus { min-height: 80cqw; }
.request-state { font-size: 16cqw; font-weight: 350; line-height: 1.2; letter-spacing: -.065em; margin-left: -.04em; color: var(--accent); }
.request-focus h3, .permission-focus h3 { font-size: 4.2cqw; line-height: 1.7; font-weight: 450; margin: 8% 0 0; }
.request-copy { font-size: 3.2cqw; line-height: 1.9; color: var(--secondary); margin: 5% 0 0; }
.request-journey { display: flex; justify-content: space-between; gap: 6%; margin: 17% 0 14%; font-size: 2.9cqw; color: var(--secondary); }
.request-journey span { line-height: 1.7; }
.request-journey .current { color: var(--accent); font-weight: 600; }
.request-journey .current:before { content: ''; display: block; width: 18px; height: 2px; background: currentColor; margin: -10px 0 8px; }
.request-facts { margin-bottom: 10%; }
.request-facts p { font-size: 3.1cqw; }
.permission-focus { margin: 18% 0 15%; }
.permission-focus .request-copy { margin-top: 7%; }
.completion-space { margin: 18% 0 16%; }
.completion-symbol { display: block; color: var(--accent); font-size: 16cqw; font-weight: 250; line-height: 1; }
.completion-space .success-copy { margin: 10% 0 12%; }
.reference-caption { font-size: 2.8cqw; color: var(--secondary); }
.correction-field { margin-top: 16%; }
.correction-field label { display: block; color: var(--secondary); font-size: 3cqw; margin-bottom: 7%; }
.time-input { width: 100%; font-size: 21cqw; font-weight: 250; letter-spacing: -.07em; font-variant-numeric: tabular-nums; padding: 0 0 5%; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; user-select: text; -webkit-user-select: text; }
.time-input:focus { border-color: var(--focus); }
.correction-reason { min-height: 25cqw; }
.feedback-input:focus-visible { outline: 1px solid var(--focus); outline-offset: 5px; }
.service-number, .equipment-model, .time-input { color: var(--accent); }
.service-number { font-weight: 300; }
.completion-symbol { display: grid; place-items: center; width: 24cqw; height: 24cqw; background: var(--signal); color: var(--on-signal); border-radius: 50%; font-size: 12cqw; transform-origin: center; }
.motion-snapshot { position: absolute !important; margin: 0 !important; pointer-events: none !important; z-index: 2; overflow: hidden !important; }
.zone-option { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 9% 0; text-align: left; font-size: 5cqw; font-weight: 350; }
.zone-option small { display: block; color: var(--secondary); font-size: 3cqw; margin-top: 10px; }
.confirm-copy { color: var(--secondary); font-size: 3.6cqw; line-height: 2; margin: 14% 0 22%; }
.is-dragging .badge-rotor, .is-dragging .badge-carrier, .is-dragging .task-sheet, .is-dragging .context-strip, .is-dragging .badge-shade { transition: none !important; }
.screen.reduced-motion *, .screen.resetting * { transition-duration: .01s !important; animation-duration: .01s !important; }
.screen.reduced-motion *:before, .screen.reduced-motion *:after { animation: none !important; transition: none !important; }
.screen.reduced-motion .badge-rotor { transition: none !important; }
.study-panel { max-width: 350px; padding-bottom: 10px; }
.study-panel > h2 { font-size: clamp(30px,3.2vw,42px); line-height: 1.4; letter-spacing: -.04em; font-weight: 350; margin: 0; }
.study-panel > h2 > span:first-child { color: var(--ink); }
.study-panel > h2 > span:last-child { color: var(--accent); }
.panel-description { font-size: 12px; color: var(--secondary); line-height: 2; margin: 22px 0 28px; }
.route-indicator { display: flex; font-size: 11px; color: var(--secondary); margin-bottom: 20px; }
.route-indicator > div, .route-line { display: none; }
.controls { display: flex; flex-direction: column; gap: 4px; }
.control-row { width: 100%; min-height: 76px; padding: 16px 0; display: flex; gap: 16px; align-items: center; text-align: left; }
.control-number { display: none; }
.control-copy { flex: 1; }
.control-copy strong { display: block; font-size: 14px; font-weight: 400; }
.control-copy small { display: block; margin-top: 9px; font-size: 10px; color: var(--secondary); }
.control-symbol { font-size: 25px; font-weight: 250; color: var(--secondary); transition: transform .2s; }
.control-row:hover:not(:disabled) .control-symbol { transform: translateX(5px); }
.study-options { display: flex; justify-content: space-between; gap: 16px; margin-top: 25px; color: var(--secondary); font-size: 10px; }
.study-options button { min-height: 44px; padding: 8px 0; }
.advanced-options { color: var(--secondary); font-size: 10px; margin-top: 12px; }
.advanced-options summary { display: flex; justify-content: space-between; padding: 14px 0; cursor: pointer; list-style: none; }
.advanced-options summary:after { content: '+'; font-size: 14px; font-weight: 300; }
.advanced-options[open] summary:after { content: '-'; }
.advanced-options > div { display: flex; justify-content: space-between; padding: 8px 0; }
.motion-option { display: flex; gap: 7px; align-items: center; }
.motion-option input { margin: 0; width: 12px; height: 12px; accent-color: var(--accent); }
.keyboard-hint { display: flex; align-items: center; gap: 5px; font-size: 9px; color: var(--secondary); margin: 17px 0 0; white-space: nowrap; }
.keyboard-hint > span { margin: 0 7px; }
kbd { font: inherit; }
.lab-footer { height: 44px; margin: 0 5%; display: flex; align-items: center; justify-content: space-between; color: var(--secondary); font-size: 9px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (min-width: 1600px) { .study { max-width: 1280px; gap: 140px; } .device { height: min(860px,calc(100dvh - 148px)); } }
@media (min-width: 768px) and (max-width: 1050px) { .study { padding: 16px 35px; gap: 45px; } .study-panel > h2 { font-size: 31px; } }
@media (min-width: 768px) and (max-height: 760px) {
  .lab-header { height: 58px; }
  .study { min-height: calc(100dvh - 94px); padding-top: 10px; padding-bottom: 10px; }
  .device { height: calc(100dvh - 120px); }
  .lab-footer { height: 36px; }
  .study-panel > h2 { font-size: 33px; line-height: 1.3; }
  .panel-description { margin: 15px 0 20px; }
  .control-row { min-height: 66px; padding: 12px 0; }
  .route-indicator { margin-bottom: 9px; }
  .study-options { margin-top: 16px; }
  .advanced-options { margin-top: 0; }
  .keyboard-hint { margin-top: 10px; }
}
@media (max-width: 767px) {
  :root { background: var(--canvas); }
  body { overflow: hidden; }
  .lab-header, .study-panel, .lab-footer { display: none; }
  .study { display: block; height: 100dvh; min-height: 100dvh; padding: 0; max-width: none; }
  .device-stage, .device { width: 100%; height: 100%; aspect-ratio: auto; }
  .face-brand { top: max(6.2%, calc(env(safe-area-inset-top) + 16px)); }
  .screen-menu-button { top: max(4%, calc(env(safe-area-inset-top) + 4px)); }
  .language-switch { top: max(4%, calc(env(safe-area-inset-top) + 4px)); }
  .back { padding-top: max(13.5%, calc(env(safe-area-inset-top) + 23px)); }
  .identity-bottom { bottom: max(8.2%, calc(env(safe-area-inset-bottom) + 32px)); }
  .context-strip { top: max(5.3%, calc(env(safe-area-inset-top) + 12px)); }
  .detail-nav { padding-top: max(10%, calc(env(safe-area-inset-top) + 12px)); }
  .sheet-scroll, .detail-content, .overlay-dialog { padding-bottom: max(10%, calc(env(safe-area-inset-bottom) + 25px)); }
}
@media (max-width: 359px) {
  .identity-name { top: 65%; }
  .identity-name h1 { font-size: min(22cqw, 11.2dvh); }
  .portrait-area { inset: 17% -5% 20% 19%; }
  .sheet-grip { height: 16%; }
  .sheet-heading { margin-bottom: 8%; }
  .pass-intro { margin-top: 17%; }
  .qr-section { margin-top: 16%; }
  .pass-owner { margin-top: 15%; }
}
@media (min-width: 520px) and (max-width: 767px) {
  :root { background: var(--stage); }
  .device-stage { display: flex; justify-content: center; align-items: center; }
  .device { width: calc(100dvh * 390 / 844); max-width: 100%; height: 100%; flex-shrink: 0; }
}
@media (max-width: 359px) and (max-height: 700px) {
  .detail-content { padding-top: 6%; }
  .detail-subtitle { margin-bottom: 9%; }
  .request-selector { margin-bottom: 10%; }
  .request-focus { min-height: 68cqw; }
  .request-journey { margin-top: 13%; margin-bottom: 10%; }
  .request-facts { margin-bottom: 6%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation-duration: .01s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; scroll-behavior: auto !important; }
}