:root {
  color-scheme: light dark;
  --bg: #f5f5f7;
  --surface: rgba(255, 255, 255, 0.74);
  --surface-solid: #ffffff;
  --surface-muted: #f0f1f3;
  --ink: #17191c;
  --ink-secondary: #5f6369;
  --ink-tertiary: #858990;
  --accent: #087a5b;
  --accent-hover: #06684e;
  --accent-ink: #ffffff;
  --accent-soft: #e0f2eb;
  --lime: #b7e653;
  --blue-soft: #e8f2ff;
  --danger: #c9342e;
  --danger-soft: #fff0ef;
  --line: rgba(25, 28, 32, 0.11);
  --line-strong: rgba(25, 28, 32, 0.2);
  --shadow-small: 0 1px 2px rgba(15, 18, 22, 0.04), 0 8px 24px rgba(15, 18, 22, 0.06);
  --shadow-large: 0 24px 70px rgba(15, 18, 22, 0.11), 0 2px 10px rgba(15, 18, 22, 0.05);
  --radius-small: 12px;
  --radius: 20px;
  --radius-large: 30px;
  --content: 1180px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--bg); color: var(--ink); font: 100%/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-optical-sizing: auto; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { min-height: 100vh; min-height: 100dvh; margin: 0; background: radial-gradient(circle at 11% 3%, rgba(183, 230, 83, 0.11), transparent 24rem), radial-gradient(circle at 94% 20%, rgba(35, 146, 112, 0.08), transparent 28rem), var(--bg); }
body, button, input, textarea, select { font: inherit; }
button, input, textarea, select { color: inherit; }
a { color: inherit; text-decoration: none; }
button, a, summary { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
button { cursor: pointer; }
img, svg { display: block; max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 3px; }

.skip-link { position: fixed; left: 1rem; top: 1rem; z-index: 100; padding: 0.7rem 1rem; border-radius: 999px; background: var(--ink); color: var(--bg); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: sticky; top: 0; z-index: 50; min-height: 64px; padding-top: env(safe-area-inset-top, 0px); background: color-mix(in srgb, var(--bg) 75%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); }
.site-header::after { content: ""; position: absolute; inset: 100% 0 auto; height: 12px; pointer-events: none; background: linear-gradient(to bottom, rgba(20, 23, 27, 0.045), transparent); opacity: 0.55; }
.header-inner { width: min(calc(100% - 2.5rem), var(--content)); min-height: 64px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: 0.65rem; font-size: 1.05rem; font-weight: 720; letter-spacing: -0.025em; }
.brand-mark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(145deg, #0b8966, #075b47); box-shadow: 0 6px 16px rgba(8, 122, 91, 0.22), inset 0 1px rgba(255, 255, 255, 0.25); }
.brand-mark svg { width: 22px; fill: white; }
.primary-nav, .primary-nav form { display: flex; align-items: center; gap: 0.35rem; margin: 0; }
.nav-link { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 0.8rem; border: 0; border-radius: 999px; background: transparent; color: var(--ink-secondary); font-size: 0.9rem; font-weight: 620; transition: color 160ms ease, background 160ms ease, transform 100ms ease-out; }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--ink); background: color-mix(in srgb, var(--surface-solid) 65%, transparent); }
.nav-link:active { transform: scale(0.96); }
.site-main { width: min(calc(100% - 2.5rem), var(--content)); min-height: calc(100vh - 176px); min-height: calc(100dvh - 176px); margin: 0 auto; padding: clamp(2.5rem, 6vw, 5.5rem) 0 7rem; }
.site-footer { width: min(calc(100% - 2.5rem), var(--content)); min-height: 112px; margin: 0 auto; padding: 2.2rem 0 calc(2.2rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 2rem; color: var(--ink-tertiary); font-size: 0.8rem; }
.site-footer div { display: grid; gap: 0.2rem; }
.site-footer strong { color: var(--ink); font-size: 0.95rem; }
.site-footer p { max-width: 34rem; text-align: right; }

.eyebrow, .overline, .section-label { display: block; color: var(--accent); font-size: 0.72rem; font-weight: 760; letter-spacing: 0.105em; line-height: 1.3; text-transform: uppercase; }
.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.68rem 1.05rem; border: 1px solid transparent; border-radius: 999px; font-size: 0.92rem; font-weight: 680; line-height: 1; white-space: nowrap; transition: transform 100ms ease-out, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: scale(0.97); transition-duration: 80ms; }
.button:disabled { cursor: not-allowed; opacity: 0.45; transform: none; }
.button-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 22px rgba(8, 122, 91, 0.16); }
.button-primary:hover { background: var(--accent-hover); box-shadow: 0 10px 26px rgba(8, 122, 91, 0.22); }
.button-secondary { border-color: var(--line-strong); background: color-mix(in srgb, var(--surface-solid) 78%, transparent); color: var(--ink); }
.button-secondary:hover { background: var(--surface-solid); border-color: color-mix(in srgb, var(--ink) 28%, transparent); }
.button-quiet { min-height: 38px; padding: 0.55rem 0.8rem; color: var(--accent); background: transparent; }
.button-quiet:hover { background: var(--accent-soft); }
.button-danger-quiet { color: var(--danger); background: transparent; }
.button-danger-quiet:hover { background: var(--danger-soft); }
.button-small { min-height: 38px; padding: 0.55rem 0.95rem; font-size: 0.86rem; }
.button-large { min-height: 52px; padding: 0.86rem 1.3rem; font-size: 1rem; }
.button-block { width: 100%; }
.is-submitting { opacity: 0.68; }
.notice { max-width: 760px; margin: -1.2rem auto 2rem; padding: 0.9rem 1rem; display: flex; align-items: center; gap: 0.75rem; border: 1px solid; border-radius: var(--radius-small); font-size: 0.92rem; font-weight: 600; }
.notice > span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-weight: 800; }
.notice-success { color: #155d45; border-color: #b8decf; background: #ebf8f3; }
.notice-success > span { color: white; background: var(--accent); }
.notice-error, .flash.error { color: #8a2420; border-color: #efc0bd; background: var(--danger-soft); }
.notice-error > span { color: white; background: var(--danger); }

/* Landing */
.hero { min-height: min(720px, calc(100vh - 118px)); display: grid; grid-template-columns: 1.06fr 0.94fr; align-items: center; gap: clamp(3rem, 8vw, 7rem); padding: 1rem 0 4rem; }
.hero-copy { max-width: 660px; }
.hero h1 { margin: 0.3em 0 0.34em; font-size: clamp(3.25rem, 6.6vw, 6.3rem); font-weight: 720; letter-spacing: -0.064em; line-height: 0.94; }
.hero-copy > p:not(.privacy-note) { max-width: 40rem; color: var(--ink-secondary); font-size: clamp(1.05rem, 1.7vw, 1.28rem); line-height: 1.55; }
.hero-actions, .form-actions, .card-actions, .action-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.65rem; }
.hero-actions { margin-top: 2rem; }
.privacy-note { margin-top: 1rem; display: flex; align-items: center; gap: 0.45rem; color: var(--ink-tertiary); font-size: 0.78rem; }
.privacy-note span { color: var(--accent); font-size: 0.58rem; }
.quest-preview { position: relative; padding: 1.1rem; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 34px; background: rgba(255, 255, 255, 0.58); box-shadow: var(--shadow-large); -webkit-backdrop-filter: saturate(150%) blur(24px); backdrop-filter: saturate(150%) blur(24px); transform: perspective(1200px) rotateY(-2deg) rotateX(1deg); }
.quest-preview::before { content: ""; position: absolute; z-index: -1; inset: 13% -9% -10% 14%; border-radius: 50%; background: rgba(183, 230, 83, 0.25); filter: blur(48px); }
.preview-toolbar, .preview-task, .preview-stats { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.preview-toolbar { padding: 0.25rem 0.35rem 0.9rem; color: var(--ink-secondary); font-size: 0.78rem; font-weight: 650; }
.live-dot { display: flex; align-items: center; gap: 0.4rem; color: var(--accent); }
.live-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent); }
.preview-map { position: relative; height: 292px; overflow: hidden; border-radius: 24px; background-color: #dfe9df; background-image: linear-gradient(32deg, transparent 43%, rgba(255,255,255,.72) 44% 48%, transparent 49%), linear-gradient(126deg, transparent 38%, rgba(255,255,255,.68) 39% 45%, transparent 46%), radial-gradient(circle at 68% 25%, #c9dbc5, transparent 34%), radial-gradient(circle at 25% 80%, #cbd9c7, transparent 36%); }
.map-route { position: absolute; width: 72%; height: 62%; left: 12%; top: 18%; border: 4px solid var(--accent); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(17deg); }
.map-node { position: absolute; width: 18px; height: 18px; border: 5px solid white; border-radius: 50%; background: var(--accent); box-shadow: 0 3px 10px rgba(0,0,0,.18); }
.node-one { left: 21%; bottom: 22%; }.node-two { left: 51%; top: 25%; }.node-three { right: 15%; top: 46%; }
.user-location { position: absolute; left: 42%; bottom: 28%; width: 42px; height: 42px; display: grid; place-items: center; border: 4px solid white; border-radius: 50%; background: #087a5b; color: white; box-shadow: 0 6px 18px rgba(8, 122, 91, .28); font-size: 1.35rem; }
.preview-task { padding: 1.1rem 0.35rem 0.8rem; }
.preview-task h2 { margin-top: 0.22rem; font-size: 1.15rem; letter-spacing: -0.02em; }
.preview-distance { color: var(--accent); font-size: 0.86rem; font-weight: 730; }
.preview-progress, .progress-track { height: 6px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.preview-progress span, .progress-track span { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #42ad75); }
.preview-stats { padding: 1rem 0.35rem 0.25rem; color: var(--ink-tertiary); font-size: 0.72rem; }
.preview-stats span { display: grid; gap: 0.05rem; }
.preview-stats strong { color: var(--ink); font-size: 0.98rem; }
.product-intro { padding: clamp(5rem, 10vw, 9rem) 0 1rem; }
.product-intro > h2 { max-width: 900px; margin: 0.35em 0 1.05em; font-size: clamp(2.5rem, 5.7vw, 5rem); font-weight: 700; letter-spacing: -0.055em; line-height: 1.02; }
.bento-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.bento-card { min-height: 280px; padding: clamp(1.5rem, 3vw, 2.3rem); border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--surface); box-shadow: var(--shadow-small); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.bento-card h3 { margin: 0.32rem 0 0.5rem; font-size: clamp(1.45rem, 2.4vw, 2.1rem); line-height: 1.08; letter-spacing: -0.035em; }
.bento-card p { max-width: 40rem; color: var(--ink-secondary); line-height: 1.6; }
.bento-large { min-height: 440px; grid-row: span 2; }
.bento-wide { grid-column: 1 / -1; min-height: 280px; flex-direction: row; align-items: flex-end; gap: 3rem; }
.accent-card { color: white; border-color: transparent; background: linear-gradient(145deg, #0b8060, #064938); box-shadow: 0 28px 70px rgba(5, 73, 55, 0.2); }
.accent-card .overline { color: #c9f58b; }.accent-card p { color: rgba(255,255,255,.75); }
.feature-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 20px; background: rgba(255,255,255,.13); box-shadow: inset 0 1px rgba(255,255,255,.2); font-size: 2rem; }
.analytics-icon { color: var(--accent); background: var(--accent-soft); }
.feature-number { color: var(--accent); font-size: 0.76rem; font-weight: 760; letter-spacing: .1em; }

/* Shared page structure */
.page-header, .form-page-header, .run-header, .result-hero { margin-bottom: 2.4rem; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.page-header > div { max-width: 760px; }
.page-header h1, .form-page-header h1, .run-title h1, .result-hero h1 { margin: 0.18em 0 0.18em; font-size: clamp(2.7rem, 6vw, 5.3rem); font-weight: 700; letter-spacing: -0.058em; line-height: 1; }
.page-header p, .form-page-header p, .result-hero p { max-width: 680px; color: var(--ink-secondary); font-size: 1.03rem; line-height: 1.6; }
.back-link { display: inline-flex; margin-bottom: 1.4rem; color: var(--ink-secondary); font-size: .88rem; font-weight: 640; }
.back-link:hover { color: var(--accent); }
.panel { border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--surface); box-shadow: var(--shadow-small); }
.panel.narrow { max-width: 40rem; margin: clamp(2rem, 8vw, 6rem) auto; padding: clamp(1.5rem, 4vw, 2.5rem); }
.panel.narrow p { margin: .65rem 0 1.5rem; color: var(--ink-secondary); }

/* Authentication */
.auth-layout { min-height: calc(100vh - 250px); display: grid; grid-template-columns: minmax(0, .92fr) minmax(390px, .7fr); align-items: center; gap: clamp(3rem, 10vw, 9rem); max-width: 1050px; margin: auto; }
.auth-context h1 { max-width: 640px; margin: .28em 0 .35em; font-size: clamp(2.7rem, 5vw, 4.8rem); letter-spacing: -.055em; line-height: 1; }
.auth-context > p { max-width: 560px; color: var(--ink-secondary); font-size: 1.08rem; line-height: 1.6; }
.auth-panel { padding: clamp(1.5rem, 4vw, 2.5rem); }
.panel-heading { margin-bottom: 1.5rem; }
.panel-heading h2 { font-size: 1.7rem; letter-spacing: -.03em; }
.panel-heading p { margin-top: .35rem; color: var(--ink-secondary); }
.panel-footnote { margin-top: 1.35rem; text-align: center; color: var(--ink-secondary); font-size: .9rem; }
.panel-footnote a { color: var(--accent); font-weight: 680; }
.auth-visual { position: relative; width: 260px; height: 170px; margin-top: 3rem; display: grid; place-items: center; }
.auth-visual > span { z-index: 2; width: 76px; height: 76px; display: grid; place-items: center; border-radius: 24px; background: var(--accent); color: white; box-shadow: 0 18px 42px rgba(8,122,91,.25); font-size: 2rem; font-weight: 800; }
.auth-visual i { position: absolute; border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 50%; }
.auth-visual i:nth-of-type(1) { width: 130px; height: 130px; }.auth-visual i:nth-of-type(2) { width: 205px; height: 205px; }.auth-visual i:nth-of-type(3) { width: 12px; height: 12px; right: 16px; top: 18px; background: var(--lime); border: 0; }
.benefit-list { margin: 2rem 0 0; padding: 0; display: grid; gap: .8rem; list-style: none; color: var(--ink-secondary); }
.benefit-list li { display: flex; align-items: center; gap: .7rem; }.benefit-list span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: .75rem; font-weight: 800; }

/* Forms */
.form-grid { display: grid; gap: 1.05rem; }
.form-grid.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: grid; gap: .42rem; }
.field label, .form-grid > label { font-size: .85rem; font-weight: 680; }
.field small, .form-grid small, .hint { color: var(--ink-tertiary); font-size: .76rem; line-height: 1.45; }
.field input, .field textarea, .field select, .form-grid > input, .form-grid > textarea, .form-grid > select, .answer-form > input { width: 100%; min-height: 48px; padding: .76rem .85rem; border: 1px solid var(--line-strong); border-radius: var(--radius-small); background: color-mix(in srgb, var(--surface-solid) 88%, transparent); box-shadow: inset 0 1px 2px rgba(20, 23, 27, .025); outline: none; transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.field textarea, .form-grid > textarea { resize: vertical; line-height: 1.55; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: color-mix(in srgb, var(--ink) 34%, transparent); }
.field input:focus, .field textarea:focus, .field select:focus, .form-grid > input:focus, .form-grid > textarea:focus, .form-grid > select:focus { border-color: var(--accent); background: var(--surface-solid); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); }
.field span[data-valmsg-for], .form-grid span[data-valmsg-for], .validation, .validation-summary { color: var(--danger); font-size: .78rem; }
.validation-summary:empty { display: none; }.validation-summary ul { margin: 0; padding-left: 1.2rem; }
.password-control { position: relative; }.password-control input { padding-right: 5.4rem; }.password-control button { position: absolute; right: .35rem; top: 50%; min-height: 36px; padding: 0 .55rem; border: 0; border-radius: 8px; background: transparent; color: var(--accent); font-size: .78rem; font-weight: 700; transform: translateY(-50%); }.password-control button:hover { background: var(--accent-soft); }
.check-row { display: flex !important; align-items: center; gap: .7rem; color: var(--ink-secondary); font-size: .84rem !important; font-weight: 500 !important; cursor: pointer; }.check-row input { width: 19px; height: 19px; margin: 0; accent-color: var(--accent); }
.form-page-header { max-width: 760px; margin-left: auto; margin-right: auto; }.form-page-header h1 { font-size: clamp(2.5rem, 5vw, 4.3rem); }
.form-panel { max-width: 820px; margin: auto; padding: clamp(1.4rem, 4vw, 2.7rem); }
.task-form-panel { max-width: 940px; }
.form-actions { margin-top: .7rem; }
.upload-field input { padding: .55rem; }
.attachment-current { margin-top: .7rem; display: flex; align-items: center; flex-wrap: wrap; gap: .65rem 1rem; font-size: .86rem; }.attachment-current > label { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink-secondary); }.attachment-current input { width: auto; padding: 0; }

/* Quest library */
.quest-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.quest-card { min-height: 390px; padding: clamp(1.3rem, 3vw, 2rem); display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--surface); box-shadow: var(--shadow-small); transition: transform 220ms var(--ease-out), box-shadow 220ms ease, border-color 220ms ease; }
.quest-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 24%, var(--line)); box-shadow: var(--shadow-large); }
.quest-card-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.quest-card-body { margin: 2rem 0 1.4rem; }.quest-card-body h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -.04em; line-height: 1.08; }.quest-card-body p { margin-top: .65rem; color: var(--ink-secondary); line-height: 1.55; }
.status-pill { min-height: 27px; display: inline-flex; align-items: center; gap: .42rem; padding: .28rem .62rem; border-radius: 999px; background: var(--surface-muted); color: var(--ink-secondary); font-size: .69rem; font-weight: 730; letter-spacing: .02em; white-space: nowrap; }
.status-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-live, .status-complete, .state-published { color: #126449; background: #e3f5ee; }.status-progress, .state-draft { color: #725400; background: #fff5ce; }.state-closed, .state-archived { color: #666a70; background: #ececef; }
.format-label { color: var(--ink-secondary); font-size: .78rem; font-weight: 650; }
.quest-meta { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }.quest-meta div { display: grid; gap: .15rem; }.quest-meta span, .team-code span, .access-code span { color: var(--ink-tertiary); font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; }.quest-meta strong { font-size: .87rem; }
.team-code { margin-top: 1rem; display: flex; align-items: center; justify-content: space-between; padding: .7rem .85rem; border-radius: 11px; background: var(--surface-muted); }.team-code code, .access-code code { color: var(--accent); font-size: .9rem; font-weight: 780; letter-spacing: .12em; }
.card-actions { margin-top: 1.15rem; }.card-actions .button-block { flex: 1; }.access-code { display: flex; align-items: center; gap: .55rem; }
.empty-state { min-height: 360px; padding: 3rem 1.5rem; display: grid; place-items: center; align-content: center; text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--radius-large); }.empty-state h2 { margin-top: 1rem; font-size: 1.7rem; letter-spacing: -.03em; }.empty-state p { max-width: 430px; margin: .45rem auto 1.4rem; color: var(--ink-secondary); }.empty-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 21px; background: var(--accent-soft); color: var(--accent); font-size: 1.8rem; }

/* Join */
.join-layout { max-width: 720px; margin: 0 auto; }.join-heading { margin-bottom: 2rem; }.join-heading h1 { margin: .22em 0 .2em; font-size: clamp(2.8rem, 6vw, 4.6rem); letter-spacing: -.055em; line-height: 1; }.join-heading p { max-width: 580px; color: var(--ink-secondary); line-height: 1.6; }
.join-panel { padding: clamp(1.4rem, 4vw, 2.5rem); }.code-input { height: 68px; text-align: center; text-transform: uppercase; letter-spacing: .2em; font-size: 1.6rem; font-weight: 760; }.team-disclosure { border: 1px solid var(--line); border-radius: var(--radius-small); background: color-mix(in srgb, var(--surface-solid) 60%, transparent); overflow: hidden; }.team-disclosure summary { min-height: 68px; padding: .9rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; }.team-disclosure summary::-webkit-details-marker { display: none; }.team-disclosure summary span { display: grid; gap: .15rem; }.team-disclosure summary small { color: var(--ink-tertiary); font-size: .75rem; font-weight: 450; }.team-disclosure summary i { font-style: normal; transition: transform 180ms var(--ease-out); }.team-disclosure[open] summary i { transform: rotate(180deg); }.team-options { padding: 0 1rem 1rem; display: grid; gap: 1rem; }

/* Run */
.run-header { max-width: 900px; margin-left: auto; margin-right: auto; }.run-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }.run-title h1 { font-size: clamp(2.6rem, 5vw, 4.6rem); }.run-score { display: grid; justify-items: end; flex: 0 0 auto; }.run-score strong { color: var(--accent); font-size: 2.4rem; letter-spacing: -.05em; line-height: 1; }.run-score span { color: var(--ink-tertiary); font-size: .72rem; }
.progress-summary { margin-top: 1.3rem; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; color: var(--ink-tertiary); font-size: .75rem; font-weight: 650; }.progress-track { height: 8px; }
.task-card { max-width: 900px; margin: auto; padding: clamp(1.5rem, 5vw, 3.5rem); border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--surface); box-shadow: var(--shadow-large); }
.task-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem 1.1rem; color: var(--ink-tertiary); font-size: .76rem; }.step-label { padding: .3rem .65rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 750; }.task-prompt { margin: clamp(2rem, 5vw, 3.4rem) 0; font-size: clamp(1.35rem, 2.7vw, 2rem); font-weight: 570; letter-spacing: -.025em; line-height: 1.42; white-space: pre-line; }.attachment { display: inline-flex; align-items: center; gap: .5rem; color: var(--accent); font-weight: 670; }.attachment span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--accent-soft); }
.answer-form { margin-top: 2rem; display: grid; gap: .8rem; }.choice-group { min-width: 0; margin: 0 0 .45rem; padding: 0; display: grid; gap: .65rem; border: 0; }.choice-group legend { margin-bottom: .7rem; color: var(--ink-secondary); font-size: .83rem; font-weight: 660; }.choice { min-height: 58px; padding: .8rem 1rem; display: flex; align-items: center; gap: .8rem; border: 1px solid var(--line-strong); border-radius: 14px; background: color-mix(in srgb, var(--surface-solid) 72%, transparent); cursor: pointer; transition: border-color 150ms ease, background 150ms ease, transform 100ms ease-out; }.choice:hover { border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); background: var(--surface-solid); }.choice:active { transform: scale(.99); }.choice input { position: absolute; opacity: 0; pointer-events: none; }.choice-control { width: 22px; height: 22px; flex: 0 0 auto; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--surface-solid); box-shadow: inset 0 0 0 5px var(--surface-solid); }.choice input[type="checkbox"] + .choice-control { border-radius: 7px; }.choice input:checked + .choice-control { border-color: var(--accent); background: var(--accent); }.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }.choice:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 2px; }
.gps-box { padding: 1rem; display: flex; align-items: center; gap: 1rem; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-muted); transition: border-color 180ms ease, background 180ms ease; }.gps-box p { margin-top: .2rem; color: var(--ink-secondary); font-size: .82rem; }.gps-marker { width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 15px; background: var(--accent); color: white; font-size: 1.4rem; box-shadow: 0 7px 18px rgba(8,122,91,.18); transition: transform 180ms var(--ease-out), background 180ms ease; }.gps-box[data-state="ready"] { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--accent-soft); }.gps-box[data-state="ready"] .gps-marker { transform: scale(1.04); }.gps-box[data-state="warning"], .gps-box[data-state="error"] { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); background: var(--danger-soft); }.gps-box[data-state="warning"] .gps-marker, .gps-box[data-state="error"] .gps-marker { background: var(--danger); }.gps-box[data-state="locating"] .gps-marker { animation: gps-pulse 1.15s ease-in-out infinite; }
@keyframes gps-pulse { 50% { transform: scale(.92); opacity: .72; } }
.completion-panel { max-width: 760px; margin: 0 auto; padding: clamp(2rem, 6vw, 4.5rem); text-align: center; }.completion-panel .eyebrow { margin-top: 1.2rem; }.completion-panel h2 { margin: .3rem 0 .5rem; font-size: clamp(2rem, 4vw, 3.3rem); letter-spacing: -.045em; }.completion-panel p { max-width: 520px; margin: 0 auto 1.6rem; color: var(--ink-secondary); }.completion-panel .form-actions { justify-content: center; }.completion-mark { width: 74px; height: 74px; margin: auto; display: grid; place-items: center; border-radius: 24px; background: var(--accent); color: white; box-shadow: 0 18px 38px rgba(8,122,91,.2); font-size: 2rem; font-weight: 800; }

/* Results and tables */
.result-hero { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 3rem; }.score-orb { width: 170px; height: 170px; display: grid; place-items: center; align-content: center; border-radius: 50%; background: linear-gradient(145deg, #0b8966, #055540); color: white; box-shadow: 0 24px 55px rgba(8,122,91,.22), inset 0 1px rgba(255,255,255,.2); }.score-orb strong { font-size: 3.7rem; letter-spacing: -.06em; line-height: 1; }.score-orb span { color: rgba(255,255,255,.7); font-size: .75rem; }
.responsibility-note { margin: 0 0 1.2rem; padding: 1rem 1.1rem; display: flex; align-items: flex-start; gap: .8rem; border: 1px solid #c7d9ed; border-radius: 15px; background: var(--blue-soft); color: #294e70; font-size: .85rem; line-height: 1.5; }.responsibility-note > span { width: 23px; height: 23px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #3d73a2; color: white; font-size: .75rem; font-weight: 800; }
.analytics-grid { margin-bottom: 1.2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 1rem; }.analytics-panel { padding: 1.5rem; }.analytics-panel h2 { margin: .35rem 0 1rem; font-size: 1.35rem; letter-spacing: -.03em; }.metric { padding: .85rem 0; display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); color: var(--ink-secondary); font-size: .85rem; }.metric strong { color: var(--ink); }.metric code { margin-right: .4rem; color: var(--accent); font-size: .7rem; }
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-small); }.table-wrap table { width: 100%; border-collapse: collapse; }.table-wrap th, .table-wrap td { padding: 1rem 1.2rem; text-align: left; border-bottom: 1px solid var(--line); }.table-wrap tr:last-child td { border-bottom: 0; }.table-wrap th { color: var(--ink-tertiary); font-size: .68rem; font-weight: 720; letter-spacing: .08em; text-transform: uppercase; }.table-wrap tbody tr { transition: background 150ms ease; }.table-wrap tbody tr:hover { background: color-mix(in srgb, var(--surface-solid) 72%, transparent); }.place span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--surface-muted); font-weight: 760; }.top-place .place span { background: var(--accent-soft); color: var(--accent); }.points { font-size: 1.05rem; }

/* Organizer */
.organizer-card { min-height: 410px; }.quest-editor-header { align-items: flex-start; }.title-status { margin-bottom: .9rem; display: flex; align-items: center; gap: .75rem; }.stats-strip { margin-bottom: 3rem; display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); gap: 1px; box-shadow: var(--shadow-small); }.stats-strip > div { min-height: 96px; padding: 1.1rem; display: grid; align-content: center; gap: .25rem; background: var(--surface-solid); }.stats-strip span { color: var(--ink-tertiary); font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; }.stats-strip strong { font-size: .9rem; }
.editor-section { margin-bottom: 1rem; padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--surface); box-shadow: var(--shadow-small); }.section-head { margin-bottom: 1.3rem; display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; }.section-head h2, .editor-actions h2 { margin: .28rem 0 .18rem; font-size: 1.7rem; letter-spacing: -.035em; }.section-head p { max-width: 620px; color: var(--ink-secondary); font-size: .88rem; }
.task-list { display: grid; gap: .65rem; }.task-list article { min-height: 76px; padding: .75rem; display: flex; align-items: center; gap: 1rem; border: 1px solid var(--line); border-radius: 15px; background: color-mix(in srgb, var(--surface-solid) 70%, transparent); }.task-number { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; background: var(--accent-soft); color: var(--accent); font-weight: 780; }.task-list-copy { min-width: 0; }.task-list-copy h3 { font-size: .98rem; }.task-list-copy p { margin-top: .15rem; color: var(--ink-tertiary); font-size: .76rem; }.task-list-copy p span { padding: 0 .25rem; }.row-actions { margin-left: auto; display: flex; align-items: center; gap: .25rem; }.row-actions form { margin: 0; }.inline-empty { padding: 3rem 1rem; text-align: center; color: var(--ink-secondary); }.inline-empty p { color: var(--ink); font-weight: 680; }.inline-empty span { font-size: .85rem; }
.section-head-actions, .order-actions { display: flex; align-items: center; gap: .45rem; }.order-button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-solid); color: var(--ink-secondary); font-weight: 760; transition: transform 100ms ease-out, border-color 160ms ease, color 160ms ease; }.order-button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }.order-button:active:not(:disabled) { transform: scale(.94); }.order-button:disabled { opacity: .28; cursor: default; }
.readiness-panel { margin: 1rem 0; padding: clamp(1.2rem, 3vw, 2rem); display: grid; grid-template-columns: minmax(0, .8fr) minmax(320px, 1.2fr); gap: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--surface); box-shadow: var(--shadow-small); }.readiness-copy h2 { margin: .28rem 0 .35rem; font-size: 1.7rem; letter-spacing: -.035em; }.readiness-copy p { max-width: 32rem; color: var(--ink-secondary); font-size: .88rem; }.readiness-list { margin: 0; padding: 0; display: grid; gap: .5rem; list-style: none; }.readiness-list li { min-height: 52px; padding: .6rem .75rem; display: flex; align-items: center; gap: .7rem; border-radius: 13px; background: color-mix(in srgb, var(--surface-solid) 70%, transparent); }.readiness-list li > span { width: 27px; height: 27px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; font-weight: 800; }.readiness-list strong { display: block; font-size: .86rem; }.readiness-list small { display: block; margin-top: .1rem; color: var(--ink-tertiary); font-size: .7rem; }.readiness-list .is-ready > span { color: white; background: var(--accent); }.readiness-list .is-blocking > span { color: white; background: var(--danger); }.readiness-list .is-warning > span { color: #7b6415; background: #f4df87; }
.preview-page-header { max-width: 820px; }.preview-notice { max-width: 820px; margin: 0 auto 1rem; padding: .8rem 1rem; display: flex; align-items: center; gap: .65rem; border-radius: 14px; color: var(--ink-secondary); background: var(--blue-soft); font-size: .84rem; }.preview-notice > span { color: var(--accent); }.scenario-preview { max-width: 820px; margin: auto; }.scenario-step { display: grid; grid-template-columns: 48px 1fr; }.scenario-rail { position: relative; display: flex; justify-content: center; }.scenario-rail::after { content: ""; position: absolute; z-index: -1; top: 42px; bottom: -10px; width: 2px; background: var(--line); }.scenario-step:last-child .scenario-rail::after { display: none; }.scenario-rail > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--accent); background: var(--accent-soft); font-weight: 780; }.scenario-card { margin: 0 0 1rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-small); }.scenario-card h2 { margin: 1rem 0 .45rem; font-size: clamp(1.35rem, 3vw, 1.85rem); letter-spacing: -.035em; }.scenario-prompt { color: var(--ink-secondary); white-space: pre-line; }.scenario-card .attachment { margin-top: 1rem; }.preview-answer-placeholder { margin-top: 1.2rem; padding: .8rem 1rem; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--ink-tertiary); font-size: .8rem; }.preview-bottom-actions { max-width: 772px; margin: 1.5rem auto 0; display: flex; justify-content: flex-end; }
.analytics-header { align-items: flex-end; }.export-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }.analytics-summary { margin-bottom: 1rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }.analytics-summary > div { min-height: 112px; padding: 1rem 1.1rem; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-small); }.analytics-summary span { color: var(--ink-tertiary); font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: .055em; }.analytics-summary strong { margin-top: .18rem; font-size: 2rem; line-height: 1; letter-spacing: -.045em; }.analytics-summary small { margin-top: .2rem; color: var(--ink-secondary); font-size: .72rem; }.analytics-section { margin-top: 1rem; padding: clamp(1rem, 2.5vw, 1.6rem); border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--surface); box-shadow: var(--shadow-small); }.analytics-section-head { margin-bottom: 1rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }.analytics-section-head h2 { margin-top: .25rem; font-size: 1.65rem; letter-spacing: -.035em; }.analytics-section-head > span { color: var(--ink-tertiary); font-size: .75rem; }.analytics-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 15px; background: color-mix(in srgb, var(--surface-solid) 70%, transparent); }.analytics-table { width: 100%; border-collapse: collapse; font-size: .84rem; }.analytics-table th { padding: .7rem .85rem; color: var(--ink-tertiary); font-size: .66rem; font-weight: 720; letter-spacing: .055em; text-align: left; text-transform: uppercase; background: var(--surface-muted); }.analytics-table td { padding: .8rem .85rem; border-top: 1px solid var(--line); vertical-align: middle; }.analytics-table td > strong, .analytics-table td > small { display: block; }.analytics-table td > small { margin-top: .15rem; color: var(--ink-tertiary); font-size: .68rem; }.analytics-table td:first-child { min-width: 180px; }.table-progress { width: 120px; height: 6px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--ink) 10%, transparent); }.table-progress span, .tag-progress span { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #42ad75); }.compact-empty { min-height: 280px; }.tag-analytics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }.tag-analytics-panel { padding: 1rem; }.tag-metric { margin-top: 1rem; }.tag-metric > div:first-child { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }.tag-metric span { color: var(--ink-secondary); font-size: .76rem; line-height: 1.35; }.tag-metric code { color: var(--accent); font-size: .66rem; font-weight: 720; }.tag-metric strong { font-size: .86rem; }.tag-progress { height: 7px; margin-top: .5rem; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--ink) 10%, transparent); }.tag-metric small { display: block; margin-top: .35rem; color: var(--ink-tertiary); font-size: .66rem; }
.management-header { align-items: flex-end; }.management-summary { margin-bottom: 1rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }.management-summary > div { min-height: 104px; padding: 1rem; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-small); }.management-summary span { color: var(--ink-tertiary); font-size: .7rem; font-weight: 680; letter-spacing: .055em; text-transform: uppercase; }.management-summary strong { margin-top: .15rem; font-size: 1.9rem; line-height: 1; letter-spacing: -.04em; }.management-summary small { margin-top: .2rem; color: var(--ink-secondary); font-size: .7rem; }.management-section { margin-top: 1rem; padding: clamp(1rem, 2.5vw, 1.6rem); border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--surface); box-shadow: var(--shadow-small); }.management-section-head { margin-bottom: 1rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }.management-section-head h2 { margin-top: .25rem; font-size: 1.65rem; letter-spacing: -.035em; }.management-section-head > span { color: var(--ink-tertiary); font-size: .74rem; }.team-management-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }.team-management-card { padding: 1rem; border: 1px solid var(--line); border-radius: 17px; background: color-mix(in srgb, var(--surface-solid) 72%, transparent); }.team-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }.team-card-head h3 { margin-top: .18rem; font-size: 1.2rem; letter-spacing: -.025em; }.team-join-code { text-align: right; }.team-join-code span { display: block; color: var(--ink-tertiary); font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; }.team-join-code code { color: var(--accent); font-size: 1rem; font-weight: 780; letter-spacing: .08em; }.team-progress-row { margin: 1rem 0; display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: .7rem; }.team-progress-row > div:first-child { display: grid; }.team-progress-row > div:first-child strong { font-size: 1.45rem; line-height: 1; }.team-progress-row > div:first-child span, .team-progress-row small { color: var(--ink-tertiary); font-size: .65rem; }.team-progress { height: 7px; margin-bottom: .28rem; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--ink) 10%, transparent); }.team-progress span { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #42ad75); }.team-roster { margin-bottom: .8rem; }.team-roster > span { color: var(--ink-secondary); font-size: .72rem; }.team-roster ul { margin: .55rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; }.team-roster li { padding: .28rem .55rem; border-radius: 999px; background: var(--surface-muted); font-size: .7rem; }.audit-timeline { margin: 0; padding: 0; list-style: none; }.audit-timeline li { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: .7rem; }.audit-timeline li:not(:last-child)::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: var(--line); }.audit-marker { z-index: 1; width: 12px; height: 12px; margin: .55rem 0 0 5px; border: 3px solid var(--surface-solid); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }.audit-event { margin-bottom: .55rem; padding: .65rem .8rem; border-radius: 13px; background: color-mix(in srgb, var(--surface-solid) 70%, transparent); }.audit-event > div { display: flex; justify-content: space-between; gap: 1rem; }.audit-event strong { font-size: .82rem; }.audit-event time, .audit-event small { color: var(--ink-tertiary); font-size: .66rem; }.audit-event p { margin: .2rem 0; color: var(--ink-secondary); font-size: .76rem; }
.editor-actions { padding: 1.4rem .2rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }.action-bar form { margin: 0; }
.tag-fieldset { margin: .7rem 0 0; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); }.tag-fieldset legend { padding: 0 .4rem; font-size: 1rem; font-weight: 720; }.tag-fieldset > p { margin-bottom: 1.2rem; color: var(--ink-secondary); font-size: .82rem; }.tag-fieldset h3 { margin: 1.2rem 0 .6rem; font-size: .9rem; }.tag-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }.tag-choice { min-height: 58px; padding: .65rem; display: flex; align-items: flex-start; gap: .65rem; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }.tag-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }.tag-choice input { width: 18px; height: 18px; flex: 0 0 auto; margin-top: .1rem; accent-color: var(--accent); }.tag-choice span { display: grid; gap: .1rem; color: var(--ink-secondary); font-size: .76rem; line-height: 1.35; }.tag-choice strong { color: var(--accent); font-size: .64rem; letter-spacing: .05em; }

/* Legacy compatibility */
.textCenter { max-width: 720px; margin: auto; text-align: center; }.textCenter form { display: grid; gap: 1rem; }.textCenter input:not([type="checkbox"]):not([type="button"]):not([type="submit"]), .textCenter textarea { width: 100%; min-height: 46px; padding: .75rem; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface-solid); }.OK_button, .mapButton, .btn { min-height: 44px; padding: .7rem 1rem; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent); color: white; font-weight: 680; }.btn-outline-secondary { background: transparent; color: var(--accent); }.form-group { margin-bottom: 1rem; display: grid; gap: .4rem; text-align: left; }.form-control { width: 100%; min-height: 46px; padding: .75rem; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface-solid); }.flash { padding: 1rem; border-radius: 14px; margin-bottom: 1rem; }.muted { color: var(--ink-secondary); }

@media (prefers-reduced-motion: no-preference) {
  .hero-copy, .quest-preview, .page-header, .auth-layout, .task-card, .form-page-header, .form-panel { animation: materialize 480ms var(--ease-out) both; }
  .quest-preview, .form-panel { animation-delay: 70ms; }
  @keyframes materialize { from { opacity: 0; transform: translateY(14px) scale(.992); } to { opacity: 1; transform: translateY(0) scale(1); } }
}

@media (max-width: 900px) {
  .hero { min-height: auto; grid-template-columns: 1fr; gap: 3.5rem; padding-top: 1rem; }.hero-copy { max-width: 760px; }.quest-preview { max-width: 650px; width: 100%; margin: auto; transform: none; }
  .auth-layout { grid-template-columns: 1fr; max-width: 660px; gap: 2rem; }.auth-context { text-align: center; }.auth-context > p { margin: auto; }.auth-visual { display: none; }.benefit-list { justify-items: start; width: fit-content; margin-left: auto; margin-right: auto; text-align: left; }
  .editor-actions { align-items: flex-start; flex-direction: column; }.action-bar { width: 100%; }.readiness-panel { grid-template-columns: 1fr; }.analytics-header, .management-header { align-items: flex-start; }.export-actions { justify-content: flex-start; }.tag-analytics-grid { grid-template-columns: 1fr; }.team-management-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .header-inner { width: min(calc(100% - 1.5rem), var(--content)); min-height: 60px; gap: .65rem; }.brand > span:last-child { display: none; }.brand-mark { width: 34px; height: 34px; }.primary-nav { flex: 1; justify-content: flex-end; }.nav-link { min-height: 40px; padding: 0 .58rem; font-size: .78rem; }.nav-logout { font-size: 0; }.nav-logout::after { content: "Выйти"; font-size: .78rem; }
  .site-main { width: min(calc(100% - 1.5rem), var(--content)); padding: 2rem 0 5rem; }.site-footer { width: min(calc(100% - 1.5rem), var(--content)); flex-direction: column; gap: 1rem; }.site-footer p { text-align: left; }
  .hero h1 { font-size: clamp(3rem, 14vw, 4.8rem); }.hero-copy > p:not(.privacy-note) { font-size: 1rem; }.hero-actions { align-items: stretch; }.hero-actions .button { flex: 1; }.preview-map { height: 230px; }
  .product-intro { padding-top: 5rem; }.bento-grid { grid-template-columns: 1fr; }.bento-large, .bento-wide { min-height: 300px; grid-row: auto; grid-column: auto; }.bento-wide { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .page-header { align-items: flex-start; flex-direction: column; }.page-header h1, .result-hero h1 { font-size: clamp(2.7rem, 13vw, 4.2rem); }.quest-grid { grid-template-columns: 1fr; }.quest-card { min-height: 360px; }
  .form-grid.two-col { grid-template-columns: 1fr; }.form-grid .full { grid-column: auto; }.form-panel { border-radius: var(--radius); }
  .run-title { align-items: flex-start; }.run-score strong { font-size: 2rem; }.task-card { margin-left: -.25rem; margin-right: -.25rem; border-radius: 24px; }.task-prompt { font-size: 1.35rem; }.gps-box { align-items: flex-start; }.gps-box + .button { width: 100%; }
  .result-hero { grid-template-columns: 1fr; align-items: start; }.score-orb { width: 132px; height: 132px; }.score-orb strong { font-size: 2.8rem; }
  .stats-strip { grid-template-columns: repeat(2, 1fr); }.section-head { align-items: flex-start; flex-direction: column; }.section-head-actions { width: 100%; flex-wrap: wrap; }.section-head-actions .button { flex: 1; }.task-list article { align-items: flex-start; flex-wrap: wrap; }.row-actions { width: 100%; margin-left: 58px; flex-wrap: wrap; }.editor-actions .button, .editor-actions form { width: 100%; }.editor-actions form .button { width: 100%; }.tag-grid { grid-template-columns: 1fr; }.analytics-summary, .management-summary { grid-template-columns: repeat(2, 1fr); }.export-actions { width: 100%; }.export-actions .button { flex: 1; }.analytics-section-head, .management-section-head { align-items: flex-start; flex-direction: column; }.analytics-table-wrap { overflow: visible; border: 0; background: transparent; }.analytics-table, .analytics-table tbody { display: block; }.analytics-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }.analytics-table tr { margin-bottom: .6rem; padding: .8rem; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface-solid) 72%, transparent); }.analytics-table td { padding: 0; border: 0; }.analytics-table td:first-child { min-width: 0; grid-column: 1 / -1; }.analytics-table td::before { content: attr(data-label); display: block; margin-bottom: .12rem; color: var(--ink-tertiary); font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }.table-progress { width: 100%; }.team-progress-row { grid-template-columns: auto 1fr; }.team-progress-row > small { grid-column: 1 / -1; }
  .leaderboard { border: 0; background: transparent; box-shadow: none; overflow: visible; }.leaderboard thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }.leaderboard table, .leaderboard tbody { display: block; }.leaderboard tr { margin-bottom: .65rem; padding: .85rem; display: grid; grid-template-columns: auto 1fr; gap: .6rem 1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }.leaderboard td { padding: 0; border: 0; }.leaderboard td::before { content: attr(data-label); display: block; color: var(--ink-tertiary); font-size: .63rem; text-transform: uppercase; letter-spacing: .06em; }.leaderboard .place { grid-row: span 2; }.leaderboard .place::before { display: none; }.leaderboard td:last-child { grid-column: 2; }
}

@media (pointer: coarse) {
  input, textarea, select { font-size: 16px; }
}

@media (hover: none) {
  .nav-link:hover:not([aria-current="page"]) { color: var(--ink-secondary); background: transparent; }
  .button:hover { transform: none; }
  .button-primary:hover { background: var(--accent); box-shadow: 0 8px 22px rgba(8, 122, 91, 0.16); }
  .button-secondary:hover { background: color-mix(in srgb, var(--surface-solid) 78%, transparent); border-color: var(--line-strong); }
  .choice:hover { border-color: var(--line-strong); background: color-mix(in srgb, var(--surface-solid) 72%, transparent); }
  .quest-card:hover { transform: none; border-color: var(--line); box-shadow: var(--shadow-small); }
}

@media (max-width: 430px) {
  .primary-nav { gap: .05rem; }.nav-link { padding: 0 .45rem; }.primary-nav .button-small { padding: 0 .7rem; }
  .hero-actions { display: grid; }.privacy-note { align-items: flex-start; }.quest-preview { padding: .75rem; border-radius: 26px; }.preview-map { height: 210px; }.preview-stats { gap: .6rem; }.preview-stats strong { font-size: .86rem; }
  .quest-card { padding: 1.2rem; }.quest-card-top { align-items: flex-start; }.format-label { text-align: right; }.card-actions { display: grid; }.stats-strip { grid-template-columns: 1fr 1fr; }.stats-strip > div { min-height: 82px; padding: .85rem; }.run-title h1 { font-size: 2.3rem; }.run-score strong { font-size: 1.7rem; }.task-meta { gap: .55rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .button:hover, .quest-card:hover { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header, .quest-preview, .panel, .quest-card, .bento-card { background: var(--surface-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --line: rgba(0,0,0,.4); --line-strong: rgba(0,0,0,.65); }
  .site-header, .panel, .quest-card, .bento-card, .task-card { background: var(--surface-solid); }
  .button { border-width: 2px; }
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #111214; --surface: rgba(35, 37, 41, .76); --surface-solid: #232529; --surface-muted: #2c2f34; --ink: #f5f5f7; --ink-secondary: #b1b4ba; --ink-tertiary: #858990; --accent: #39c795; --accent-hover: #50d8a8; --accent-ink: #08271d; --accent-soft: #173d32; --blue-soft: #192d40; --danger-soft: #3a201f; --line: rgba(255,255,255,.11); --line-strong: rgba(255,255,255,.2); --shadow-small: 0 10px 30px rgba(0,0,0,.18); --shadow-large: 0 30px 80px rgba(0,0,0,.32); }
  body { background: radial-gradient(circle at 10% 2%, rgba(57,199,149,.08), transparent 24rem), var(--bg); }
  .accent-card { background: linear-gradient(145deg, #12684f, #073d2f); }.preview-map { filter: brightness(.82) saturate(.85); }.quest-preview { border-color: rgba(255,255,255,.12); }.status-live, .status-complete, .state-published { color: #65dfb1; background: #173d32; }.status-progress, .state-draft { color: #e9c75b; background: #3d351c; }.notice-success { color: #8ce4c4; border-color: #285b49; background: #173d32; }.notice-error { color: #ffaaa5; border-color: #6b3431; }.responsibility-note { color: #9ac7ed; border-color: #31516d; }.site-header::after { opacity: .8; }
}