* { box-sizing: border-box; }
html { background: var(--ma-color-bg-page); color: var(--ma-color-text-primary); font-family: var(--ma-font); }
body { margin: var(--ma-space-0); min-width: 320px; min-height: 100dvh; background: var(--ma-color-bg-page); font-size: var(--ma-body-size); line-height: var(--ma-body-line); }
button, input, textarea, select { color: inherit; font: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: var(--ma-border-selected) solid var(--ma-color-focus); outline-offset: var(--ma-space-2); }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
h1, h2, h3, p { margin-top: var(--ma-space-0); }
h1 { margin-bottom: var(--ma-space-4); font-size: var(--ma-h1-size); line-height: var(--ma-h1-line); letter-spacing: -0.015em; }
h2 { margin-bottom: var(--ma-space-3); font-size: var(--ma-h2-size); line-height: var(--ma-h2-line); letter-spacing: -0.01em; }
h3 { margin-bottom: var(--ma-space-2); font-size: var(--ma-h3-size); line-height: var(--ma-h3-line); }
.skip-link { position: fixed; z-index: var(--ma-z-toast); inset-inline-start: var(--ma-space-4); top: var(--ma-space-4); padding: var(--ma-space-3); border-radius: var(--ma-radius-sm); background: var(--ma-color-olive-900); color: var(--ma-color-text-inverse); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(var(--ma-space-0)); }
.app-shell { width: 100%; max-width: var(--ma-page-max); min-height: 100dvh; margin: auto; padding: max(var(--ma-space-4), env(safe-area-inset-top)) var(--ma-space-5) calc(var(--ma-space-12) + env(safe-area-inset-bottom)); overflow-wrap: anywhere; }
.topbar { display: flex; min-height: var(--ma-control-lg); align-items: center; justify-content: space-between; gap: var(--ma-space-3); margin-bottom: var(--ma-space-4); }
.topbar-navigation { display: flex; flex: 0 0 auto; gap: var(--ma-space-2); }
.topbar-title { min-width: var(--ma-space-0); flex: 1; text-align: center; font-size: var(--ma-small-size); font-weight: 700; }
.topbar-step { display: flex; min-height: var(--ma-touch); align-items: center; justify-content: center; margin: calc((var(--ma-body-line) - var(--ma-touch)) / 2) auto; padding: var(--ma-space-0) var(--ma-space-2); border: var(--ma-space-0); background: transparent; color: var(--ma-color-olive-700); font-size: var(--ma-label-size); font-weight: 400; }
.topbar-actions { display: flex; flex: 0 0 auto; gap: var(--ma-space-2); }
.icon-button { display: inline-grid; min-width: var(--ma-touch); min-height: var(--ma-touch); place-items: center; border: var(--ma-border-hairline) solid var(--ma-color-border-default); border-radius: var(--ma-radius-sm); background: var(--ma-color-bg-card); }
.home-link { width: var(--ma-touch); height: var(--ma-touch); overflow: hidden; padding: var(--ma-space-0); border-radius: var(--ma-radius-pill); }
.home-logo { display: block; width: 100%; height: 100%; object-fit: cover; }
.eyebrow { margin-bottom: var(--ma-space-2); color: var(--ma-color-olive-700); font-size: var(--ma-label-size); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.say-aloud { margin-bottom: var(--ma-space-2); color: var(--ma-color-danger-700); font-size: var(--ma-label-size); font-weight: 700; text-align: center; }
.lead { color: var(--ma-color-olive-700); }
.stack { display: grid; gap: var(--ma-space-3); }
.section { margin-bottom: var(--ma-space-6); }
.card { padding: var(--ma-space-4); border: var(--ma-border-hairline) solid var(--ma-color-border-default); border-radius: var(--ma-radius-lg); background: var(--ma-color-bg-card); box-shadow: var(--ma-shadow-card); }
.card-olive { background: var(--ma-color-olive-100); }
.card-blue { background: var(--ma-color-bluegray-100); }
.card-bronze { background: var(--ma-color-bronze-100); }
.card-dark { border-color: var(--ma-color-olive-900); background: var(--ma-color-olive-900); color: var(--ma-color-text-inverse); }
.card-row { display: flex; min-height: 64px; align-items: center; gap: var(--ma-space-3); width: 100%; text-align: left; }
.card-row strong, .card-row span { display: block; }
.card-row span { color: var(--ma-color-text-primary); font-size: var(--ma-small-size); line-height: var(--ma-small-line); }
.card-row.card-dark span { color: var(--ma-color-text-inverse); }
.grid-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ma-space-3); }
.grid-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ma-space-2); }
.grid-three .choice { padding-inline: var(--ma-space-2); text-align: center; }
.grid-three .choice-full { grid-column: 1 / -1; text-align: left; }
.choice { position: relative; width: 100%; min-height: var(--ma-touch); padding: var(--ma-space-3) var(--ma-space-4); border: var(--ma-border-hairline) solid var(--ma-color-border-default); border-radius: var(--ma-radius-md); background: var(--ma-color-bg-card); text-align: left; }
.choice[aria-checked="true"], .choice[aria-pressed="true"], .choice.selected { border-width: var(--ma-border-selected); border-color: var(--ma-color-olive-500); background: var(--ma-color-olive-100); }
.choice[aria-checked="true"]::after, .choice.selected::after { content: "✓"; position: absolute; inset-inline-end: var(--ma-space-3); color: var(--ma-color-olive-700); font-weight: 700; }
.choice:active, .action:active, .icon-button:active { background: var(--ma-color-olive-100); transform: translateY(var(--ma-border-hairline)); }
.help-button, .help-button:active { border-color: var(--ma-color-danger-500); background: var(--ma-color-danger-100); color: var(--ma-color-danger-700); font-weight: 700; }
.choice:disabled, .action:disabled { border-color: var(--ma-color-border-default); background: var(--ma-color-bg-disabled); color: var(--ma-color-text-secondary); }
.action { display: inline-flex; min-height: var(--ma-touch); align-items: center; justify-content: center; gap: var(--ma-space-2); padding: var(--ma-space-3) var(--ma-space-4); border: var(--ma-border-hairline) solid var(--ma-color-border-default); border-radius: var(--ma-radius-md); background: var(--ma-color-bg-card); font-weight: 600; text-decoration: none; }
.action-primary, .action-inline-primary { border-color: var(--ma-color-olive-500); background: var(--ma-color-olive-500); color: var(--ma-color-text-inverse); }
.action-primary:active, .action-inline-primary:active { background: var(--ma-color-olive-700); }
.app-shell main .action-primary { position: fixed; z-index: var(--ma-z-sticky); left: 50%; bottom: max(var(--ma-space-3), env(safe-area-inset-bottom)); width: min(calc(100% - var(--ma-space-10)), calc(var(--ma-page-max) - var(--ma-space-10))); box-shadow: var(--ma-shadow-floating); transform: translateX(-50%); }
.app-shell:has(.bottom-nav) main .action-primary { bottom: calc(var(--ma-control-lg) + max(var(--ma-space-3), env(safe-area-inset-bottom))); }
.app-shell main .action-primary:active { transform: translateX(-50%) translateY(var(--ma-border-hairline)); }
.action-destructive { border-color: var(--ma-color-danger-500); background: var(--ma-color-danger-100); color: var(--ma-color-danger-700); }
.action-full { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: var(--ma-space-2); }
.actions > .action { flex: 1 1 calc(50% - var(--ma-space-2)); }
.pager { display: grid; grid-template-columns: 1fr auto 1fr; }
.pager > .action { min-width: var(--ma-space-0); padding-inline: var(--ma-space-2); white-space: nowrap; font-size: var(--ma-label-size); }
.context-strip { display: grid; gap: var(--ma-space-0); margin-bottom: var(--ma-space-3); padding: var(--ma-space-2); border-radius: var(--ma-radius-md); background: var(--ma-color-olive-50); color: var(--ma-color-olive-700); font-size: var(--ma-label-size); line-height: var(--ma-label-line); }
.context-strip strong { color: var(--ma-color-text-primary); }
.context-strip-result { grid-template-columns: minmax(var(--ma-space-0), 1fr) auto; align-items: center; gap: var(--ma-space-2); }
.context-values { display: grid; gap: var(--ma-space-0); }
.context-logo { display: block; width: var(--ma-control-lg); height: var(--ma-control-lg); object-fit: contain; -webkit-touch-callout: none; user-select: none; }
.result-metrics .card { padding: var(--ma-space-3); }
.result-metrics h2 { margin-bottom: var(--ma-space-0); font-size: var(--ma-h3-size); line-height: var(--ma-h3-line); }
.tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--ma-space-1); padding: var(--ma-space-1); border-radius: var(--ma-radius-md); background: var(--ma-color-bg-disabled); }
.tab { min-height: var(--ma-touch); border: var(--ma-space-0); border-radius: var(--ma-radius-sm); background: transparent; font-size: var(--ma-small-size); }
.tab[aria-selected="true"] { background: var(--ma-color-bg-elevated); box-shadow: var(--ma-shadow-card); font-weight: 600; }
.field { display: grid; gap: var(--ma-space-2); }
.field > span, .label { color: var(--ma-color-olive-700); font-size: var(--ma-label-size); font-weight: 600; letter-spacing: .04em; }
.field input, .field textarea, .field select { width: 100%; min-height: var(--ma-touch); padding: var(--ma-space-3); border: var(--ma-border-hairline) solid var(--ma-color-border-strong); border-radius: var(--ma-radius-md); background: var(--ma-color-bg-elevated); }
.field textarea { min-height: 120px; resize: vertical; }
.range-row { display: grid; grid-template-columns: 1fr var(--ma-control-lg); align-items: center; gap: var(--ma-space-3); }
.range-row output { display: grid; min-height: var(--ma-control-lg); place-items: center; border-radius: var(--ma-radius-md); background: var(--ma-color-olive-100); font-weight: 700; }
input[type="range"] { width: 100%; accent-color: var(--ma-color-olive-500); }
.drum-stage { position: relative; width: min(var(--ma-drum-full), 100%); aspect-ratio: 1; margin: var(--ma-space-2) auto; }
.drum-stage.compact { width: var(--ma-drum-compact); }
.drum-stage img, .hit-layer { position: absolute; inset: var(--ma-space-0); width: 100%; height: 100%; object-fit: contain; }
.drum-stage, .drum-stage img, .hit-layer { -webkit-touch-callout: none; user-select: none; }
.hit-layer { touch-action: none; }
.tongue-zone { fill: transparent; stroke: transparent; stroke-width: var(--ma-border-selected); cursor: pointer; }
.tongue-zone:hover, .tongue-zone:focus, .tongue-zone.selected { fill: var(--ma-color-olive-100); fill-opacity: .24; stroke: var(--ma-color-olive-500); }
.tongue-zone.disabled { cursor: not-allowed; fill: var(--ma-color-bg-disabled); fill-opacity: .36; pointer-events: none; }
.melody-target { fill: var(--ma-color-danger-500); stroke: var(--ma-color-bg-elevated); stroke-width: 6; pointer-events: none; }
.eft-stage { position: relative; width: min(calc(var(--ma-drum-compact) * 2), 100%); aspect-ratio: 2 / 3; margin: var(--ma-space-3) auto; overflow: hidden; border-radius: var(--ma-radius-lg); background: var(--ma-color-bg-card); box-shadow: var(--ma-shadow-card); }
.eft-stage img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-touch-callout: none; user-select: none; }
.eft-point { position: absolute; width: var(--ma-space-4); height: var(--ma-space-4); border-radius: var(--ma-radius-pill); transform: translate(-50%, -50%); pointer-events: none; }
.eft-point.active { background: var(--ma-color-danger-500); box-shadow: 0 0 0 var(--ma-space-1) var(--ma-color-danger-100), 0 0 var(--ma-space-3) var(--ma-color-danger-500); }
.eft-point[data-point="crown"] { left: 49.5%; top: 8.2%; }
.eft-point[data-point="brow"] { left: 54%; top: 25.6%; }
.eft-point[data-point="side_eye"] { left: 65.6%; top: 27.9%; }
.eft-point[data-point="under_eye"] { left: 60.3%; top: 31.3%; }
.eft-point[data-point="right_collarbone"] { left: 31.8%; top: 62.5%; }
.eft-point[data-point="chest"] { left: 50%; top: 72.1%; }
.eft-repeat-label { margin-bottom: var(--ma-space-2); color: var(--ma-color-olive-700); font-size: var(--ma-label-size); font-weight: 600; text-align: center; }
.eft-tap-instruction { margin-top: var(--ma-space-3); }
.binary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ma-space-3); }
.binary .choice { min-height: var(--ma-control-lg); text-align: center; font-weight: 700; }
.toggle-row { display: flex; min-height: var(--ma-touch); align-items: center; justify-content: space-between; gap: var(--ma-space-3); }
.toggle { position: relative; width: var(--ma-control-lg); height: var(--ma-touch); border: var(--ma-space-0); background: transparent; }
.toggle::before { content: ""; position: absolute; inset: var(--ma-space-2) var(--ma-space-0); border: var(--ma-border-hairline) solid var(--ma-color-border-strong); border-radius: var(--ma-radius-pill); background: var(--ma-color-bg-disabled); }
.toggle::after { content: ""; position: absolute; width: var(--ma-space-5); height: var(--ma-space-5); inset: var(--ma-space-3) auto auto var(--ma-space-1); border-radius: var(--ma-radius-pill); background: var(--ma-color-bg-elevated); box-shadow: var(--ma-shadow-card); transition: transform var(--ma-motion-normal) var(--ma-easing); }
.toggle[aria-checked="true"]::before { background: var(--ma-color-olive-500); }
.toggle[aria-checked="true"]::after { transform: translateX(var(--ma-space-6)); }
.status { padding: var(--ma-space-3); border-radius: var(--ma-radius-md); background: var(--ma-color-bluegray-100); font-size: var(--ma-small-size); line-height: var(--ma-small-line); }
.status-error { background: var(--ma-color-danger-100); color: var(--ma-color-danger-700); }
.status-offline { background: var(--ma-color-bronze-100); }
.summary { width: 100%; border-collapse: collapse; }
.summary th, .summary td { padding: var(--ma-space-3) var(--ma-space-2); border-bottom: var(--ma-border-hairline) solid var(--ma-color-border-default); text-align: left; vertical-align: top; }
.summary th { width: 36%; color: var(--ma-color-olive-700); font-size: var(--ma-small-size); font-weight: 400; }
.stepper { display: flex; justify-content: center; gap: var(--ma-space-2); margin-bottom: var(--ma-space-4); }
.stepper span { width: var(--ma-space-2); height: var(--ma-space-2); border-radius: var(--ma-radius-pill); background: var(--ma-color-border-strong); }
.stepper .active { width: var(--ma-space-6); background: var(--ma-color-olive-500); }
.bottom-nav { position: sticky; z-index: var(--ma-z-sticky); bottom: var(--ma-space-0); display: grid; grid-template-columns: repeat(3, 1fr); margin: var(--ma-space-8) calc(var(--ma-space-5) * -1) calc(var(--ma-space-12) * -1); padding: var(--ma-space-2) var(--ma-space-1) max(var(--ma-space-2), env(safe-area-inset-bottom)); border-top: var(--ma-border-hairline) solid var(--ma-color-border-default); background: var(--ma-color-bg-elevated); }
.bottom-nav button { min-height: var(--ma-touch); border: var(--ma-space-0); background: transparent; color: var(--ma-color-text-secondary); font-size: var(--ma-label-size); }
.bottom-nav button[aria-current="page"] { color: var(--ma-color-olive-700); font-weight: 700; }
.modal-backdrop { position: fixed; z-index: var(--ma-z-modal-backdrop); inset: var(--ma-space-0); display: grid; place-items: end center; padding: var(--ma-space-4); background: var(--ma-color-overlay); }
.modal { z-index: var(--ma-z-modal); width: min(100%, var(--ma-page-max)); max-height: calc(100dvh - var(--ma-space-8)); overflow: auto; padding: var(--ma-space-6); border: var(--ma-space-0); border-radius: var(--ma-radius-xxl); background: var(--ma-color-bg-elevated); box-shadow: var(--ma-shadow-modal); }
.more-menu-header { display: flex; align-items: start; justify-content: space-between; gap: var(--ma-space-3); }
.more-menu-header h2 { margin-bottom: var(--ma-space-0); }
.more-link { display: block; color: inherit; text-decoration: none; }
.choice-note { display: block; margin-top: var(--ma-space-1); color: var(--ma-color-text-secondary); font-size: var(--ma-label-size); }
.skeleton { min-height: var(--ma-touch); border-radius: var(--ma-radius-md); background: var(--ma-color-bg-disabled); }
.gallery { width: min(1200px, 100%); margin: auto; padding: var(--ma-space-6); }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--ma-space-6); }
.gallery-card { padding: var(--ma-space-4); border-radius: var(--ma-radius-lg); background: var(--ma-color-bg-card); box-shadow: var(--ma-shadow-card); }
.gallery-card img { display: block; width: 100%; height: auto; border: var(--ma-border-hairline) solid var(--ma-color-border-default); }
.eye-movement-guide figure { margin: var(--ma-space-0); }
.eye-movement-guide .eye-scene-primary { width: calc(100% - var(--ma-space-8)); margin-inline: auto; }
.app-shell:has(.embedded-app-frame) { padding-bottom: var(--ma-space-0); }
.app-shell:has(.embedded-app-frame) .topbar { margin-bottom: var(--ma-space-0); }
.embedded-app-frame { display: block; width: calc(100% + var(--ma-space-10)); height: calc(100dvh - var(--ma-control-lg) - max(var(--ma-space-4), env(safe-area-inset-top))); min-height: calc(var(--ma-control-lg) * 10); margin-inline: calc(var(--ma-space-5) * -1); border: var(--ma-space-0); background: var(--ma-color-bg-card); }
.visually-hidden { position: absolute; width: var(--ma-border-hairline); height: var(--ma-border-hairline); padding: var(--ma-space-0); margin: calc(var(--ma-border-hairline) * -1); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: var(--ma-space-0); }
@media (max-width: 374px) { .app-shell { padding-inline: var(--ma-radius-md); } .bottom-nav, .embedded-app-frame { margin-inline: calc(var(--ma-radius-md) * -1); } .embedded-app-frame { width: calc(100% + var(--ma-space-7)); } .grid-two:not([data-positive-emotions]):not([data-respect-actions]) { grid-template-columns: 1fr; } }
@media (min-width: 375px) and (max-width: 410px) { .app-shell { padding-inline: var(--ma-radius-lg); } .bottom-nav, .embedded-app-frame { margin-inline: calc(var(--ma-radius-lg) * -1); } .embedded-app-frame { width: calc(100% + var(--ma-space-6) + var(--ma-space-3)); } }
@media (min-width: 411px) and (max-width: 480px) { .app-shell { padding-inline: var(--ma-space-5); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0ms !important; animation-duration: 0ms !important; } }