:root { --aim-lab-enabled: 0; --aim-lab-page-margin-top: 160px; --aim-lab-page-padding: 12px; --aim-lab-hero-padding: 12px 14px; --aim-lab-hero-radius: 22px; --aim-lab-panel-radius: 18px; --aim-lab-bg-size: contain; --aim-lab-bg-position: center top; --aim-lab-enabled: 0; --license-page-margin-top: 160px; /* core */ --core-bg: #0b0d12; --core-bg-deep: #05070b; --core-overlay: rgba(6, 8, 14, 0.62); --core-shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.24); --core-shadow-panel: 0 24px 56px rgba(2, 4, 10, 0.34); /* theme bridge */ --web-panel: #101722; --web-panel-alt: #151e2d; --web-border: #d29011; --web-text: #f2e7a6; --web-text-soft: #cdbc80; --web-accent: #25d7e8; --web-success: #32e29f; --web-warning: #ffbf47; --web-danger: #ff6f7d; --web-focus: #f1bb54; /* surface */ --surface-page: rgba(5, 8, 14, 0.18); --surface-page-line: rgba(210, 144, 17, 0.72); --surface-panel: rgba(9, 14, 24, 0.88); --surface-panel-strong: rgba(8, 12, 20, 0.94); --surface-card: rgba(13, 20, 33, 0.78); --surface-card-strong: rgba(14, 22, 36, 0.9); --surface-border-soft: rgba(210, 144, 17, 0.2); /* text */ --text-strong: var(--web-text); --text-soft: rgba(255, 240, 180, 0.82); --text-muted: rgba(255, 240, 180, 0.62); --text-cyan: #d9fbff; --text-success: #e0ffee; --text-danger: #fff0f3; /* action */ --action-primary-start: rgba(241, 187, 84, 0.68); --action-primary-end: rgba(109, 61, 8, 0.84); --action-primary-line: rgba(255, 214, 124, 0.84); --action-primary-shadow: 0 18px 30px rgba(84, 48, 6, 0.28); /* hero */ --hero-title-fill: linear-gradient(180deg, #fffef9 0%, #fff6d4 16%, #ffd76b 35%, #fff0b9 52%, #efb247 74%, #fff4d8 100%); /* motion */ --motion-fast: 160ms ease; --motion-base: 180ms ease; /* layout */ --layout-page-width: min(1480px, calc(100vw - 28px)); --layout-shell-radius: 28px; --layout-hero-radius: 24px; --layout-panel-radius: 22px; --layout-card-radius: 16px; --layout-page-gap: 12px; --layout-main-gap: 12px; --layout-panel-padding: 14px; --layout-left-rail: minmax(280px, 320px); --layout-right-rail: minmax(220px, 248px); --layout-panel-min-height: 560px; --layout-question-min-height: 410px; --layout-button-min-height: 44px; --layout-button-min-width: 172px; --layout-chip-min-height: var(--intro-name-entry-input-min-height); --layout-copy-size: 14px; --layout-subtitle-size: 15px; --layout-title-size: clamp(4.35rem, 6.9vw, 6.2rem); /* web v1 token map */ --web-v1-bg: var(--core-bg); --web-v1-bg-deep: var(--core-bg-deep); --web-v1-overlay: var(--core-overlay); --web-v1-panel: var(--surface-panel); --web-v1-panel-strong: var(--surface-panel-strong); --web-v1-card: var(--surface-card); --web-v1-card-strong: var(--surface-card-strong); --web-v1-page-surface: var(--surface-page); --web-v1-page-line: var(--surface-page-line); --web-v1-border-soft: var(--surface-border-soft); --web-v1-text: var(--text-strong); --web-v1-text-soft: var(--text-soft); --web-v1-text-muted: var(--text-muted); --web-v1-text-cyan: var(--text-cyan); --web-v1-text-success: var(--text-success); --web-v1-text-danger: var(--text-danger); --web-v1-accent: var(--web-accent); --web-v1-focus: var(--web-focus); --web-v1-success: var(--web-success); --web-v1-warning: var(--web-warning); --web-v1-danger: var(--web-danger); --web-v1-border: var(--web-border); --web-v1-action-primary-start: var(--action-primary-start); --web-v1-action-primary-end: var(--action-primary-end); --web-v1-action-primary-line: var(--action-primary-line); --web-v1-action-primary-shadow: var(--action-primary-shadow); --web-v1-title-fill: var(--hero-title-fill); --web-v1-shadow-soft: var(--core-shadow-soft); --web-v1-shadow-panel: var(--core-shadow-panel); --web-v1-page-width: var(--layout-page-width); --web-v1-shell-radius: var(--layout-shell-radius); --web-v1-hero-radius: var(--layout-hero-radius); --web-v1-panel-radius: var(--layout-panel-radius); --web-v1-card-radius: var(--layout-card-radius); --web-v1-page-gap: var(--layout-page-gap); --web-v1-main-gap: var(--layout-main-gap); --web-v1-panel-padding: var(--layout-panel-padding); --web-v1-left-rail: var(--layout-left-rail); --web-v1-right-rail: var(--layout-right-rail); --web-v1-panel-min-height: var(--layout-panel-min-height); --web-v1-question-min-height: var(--layout-question-min-height); --web-v1-button-min-height: var(--layout-button-min-height); --web-v1-button-min-width: var(--layout-button-min-width); --web-v1-chip-min-height: var(--layout-chip-min-height); --web-v1-copy-size: var(--layout-copy-size); --web-v1-subtitle-size: var(--layout-subtitle-size); --web-v1-title-size: var(--layout-title-size); --web-v1-motion-fast: var(--motion-fast); --web-v1-motion-base: var(--motion-base); --web-v1-start-background: var(--web-start-background); --web-v1-start-overlay: var(--web-start-overlay); --web-v1-start-headline: var(--web-start-headline); --web-v1-start-subline: var(--web-start-subline); --web-v1-start-cta: var(--web-start-cta); --web-v1-link-panel: var(--web-link-panel); --web-v1-link-input: var(--web-link-input); --web-v1-link-cta: var(--web-link-cta); --web-v1-link-validation: var(--web-link-validation); --web-v1-completion-overlay: var(--web-completion-overlay); --web-v1-completion-headline: var(--web-completion-headline); --web-v1-completion-text: var(--web-completion-text); --web-v1-completion-highlight: var(--web-completion-highlight); } * { box-sizing: border-box; } .hidden { display: none !important; } .app-shell { position: relative; min-height: 100vh; } .intro-layer { position: relative; min-height: 100vh; display: grid; grid-template-rows: minmax(0, 1fr); align-items: end; padding: 24px; overflow: hidden; isolation: isolate; } .intro-backdrop { position: absolute; inset: 0; background: var(--web-v1-start-background); } .intro-background { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-start-background) 22%, transparent), color-mix(in srgb, var(--web-v1-start-overlay) 80%, var(--web-v1-start-background))), radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--web-v1-start-cta) 18%, transparent), transparent 24%), linear-gradient(180deg, color-mix(in srgb, var(--web-v1-start-background) 8%, transparent), color-mix(in srgb, var(--web-v1-start-background) 18%, transparent)), url("../assets/welcome.jpg") var(--intro-bg-welcome-position) / var(--intro-bg-welcome-size) no-repeat; opacity: 0; transform: translate3d(0, 0, 0) scale(1); filter: brightness(0.18) saturate(0.86); transition: opacity 2200ms linear, transform 2200ms cubic-bezier(0.18, 0.82, 0.22, 1), filter 2200ms linear; will-change: opacity, transform, filter; } .intro-shell { position: relative; z-index: 1; min-height: 100vh; width: min(100%, 1400px); margin: 0 auto; display: grid; align-items: end; justify-items: center; padding: clamp(28px, 6vh, 72px) 0 clamp(34px, 8vh, 88px); } .intro-start-panel { width: min(100%, 580px); display: grid; justify-items: stretch; opacity: 0; transform: translate3d(0, 24px, 0) scale(0.985); pointer-events: none; } .intro-panel { width: min(520px, 100%); display: grid; gap: 14px; padding: 32px 34px; align-self: center; justify-self: center; border: 1px solid color-mix(in srgb, var(--web-v1-link-cta) 32%, transparent); border-radius: 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-link-panel) 88%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-link-panel) 72%, var(--web-v1-bg-deep))), color-mix(in srgb, var(--web-v1-link-panel) 78%, var(--web-v1-bg-deep)); box-shadow: 0 26px 54px rgba(0, 0, 0, 0.38), inset 0 1px 0 color-mix(in srgb, var(--web-v1-start-headline) 8%, transparent); backdrop-filter: blur(16px); } .intro-panel-name { max-width: 520px; } .intro-kicker { font-size: 11px; font-weight: 900; letter-spacing: 0.28em; text-transform: uppercase; color: color-mix(in srgb, var(--web-v1-start-subline) 68%, transparent); } .intro-name-title { margin: 0; line-height: 0.92; text-transform: uppercase; color: var(--web-v1-start-headline); font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: 0.05em; } .intro-copy { margin: 0; max-width: 32ch; font-size: 14px; line-height: 1.5; color: color-mix(in srgb, var(--web-v1-start-subline) 76%, transparent); } .intro-field-label { font-size: 11px; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--web-v1-start-subline) 68%, transparent); } .intro-input { width: 100%; min-height: 56px; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--web-v1-link-input) 34%, var(--web-v1-link-cta)); border-radius: 10px; background: color-mix(in srgb, var(--web-v1-link-input) 92%, var(--web-v1-bg-deep)); color: var(--web-v1-completion-text); font: inherit; font-size: 18px; letter-spacing: 0.03em; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 3%, transparent); } .intro-input::placeholder { color: color-mix(in srgb, var(--web-v1-completion-text) 34%, transparent); } .intro-input:focus-visible { outline: 2px solid color-mix(in srgb, var(--web-v1-link-cta) 82%, transparent); outline-offset: 2px; border-color: color-mix(in srgb, var(--web-v1-link-cta) 72%, transparent); } .intro-error { margin: -4px 0 0; font-size: 13px; line-height: 1.4; color: var(--web-v1-link-validation); } .intro-cta { padding-right: 17px; position: relative; min-height: 78px; width: 100%; padding: 0 34px; border: 1px solid color-mix(in srgb, var(--web-v1-start-cta) 42%, transparent); border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-start-cta) 20%, var(--web-v1-start-overlay)), color-mix(in srgb, var(--web-v1-start-background) 90%, var(--web-v1-start-overlay) 10%)); color: color-mix(in srgb, var(--web-v1-start-headline) 96%, white); font: inherit; font-size: clamp(1.16rem, 2vw, 1.42rem); font-weight: 900; letter-spacing: 0.28em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.42); box-shadow: 0 28px 54px rgba(0, 0, 0, 0.42), 0 12px 28px color-mix(in srgb, var(--web-v1-start-cta) 14%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-start-headline) 10%, transparent), inset 0 -16px 28px rgba(0, 0, 0, 0.3); transition: transform 2200ms cubic-bezier(0.18, 0.82, 0.22, 1), border-color 420ms ease, box-shadow 420ms ease, color 420ms ease, background 420ms ease; } .intro-cta::before { content: ""; position: absolute; inset: 1px; border-radius: 20px; background: linear-gradient(180deg, rgba(255, 214, 124, 0.18), transparent 22%, transparent 72%, rgba(255, 168, 58, 0.12)), linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.05)); pointer-events: none; } .intro-cta::after { content: ""; position: absolute; inset: auto 28px 16px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 214, 124, 0.52), transparent); pointer-events: none; } .intro-cta:hover:not(:disabled), .intro-cta:focus-visible { transform: translate3d(0, -20px, 0); border-color: color-mix(in srgb, var(--web-v1-start-cta) 68%, transparent); color: color-mix(in srgb, var(--web-v1-start-headline) 92%, white); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-start-cta) 28%, var(--web-v1-start-overlay)), color-mix(in srgb, var(--web-v1-start-background) 84%, var(--web-v1-start-cta) 16%)); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.48), 0 18px 36px color-mix(in srgb, var(--web-v1-start-cta) 22%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-start-headline) 14%, transparent), inset 0 -14px 28px rgba(0, 0, 0, 0.26); } .intro-cta:focus-visible { outline: none; } .intro-cta:disabled { cursor: default; } body[data-app-view="intro_blackout"], body[data-app-view="intro_reveal"], body[data-app-view="intro_hold"], body[data-app-view="intro_ready"], body[data-app-view="name_entry"] { background: #000; } body[data-app-view="intro_blackout"]::before, body[data-app-view="intro_reveal"]::before, body[data-app-view="intro_hold"]::before, body[data-app-view="intro_ready"]::before { opacity: 0; } body[data-app-view="name_entry"]::before { opacity: 0.2; } body[data-app-view="intro_reveal"] .intro-background, body[data-app-view="intro_hold"] .intro-background, body[data-app-view="intro_ready"] .intro-background, body[data-app-view="name_entry"] .intro-background { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: brightness(0.94) saturate(1.04); } body[data-app-view="intro_ready"] .intro-start-panel { opacity: 1; transform: translate3d(0, 0, 0) scale(1); pointer-events: auto; transition: opacity 3000ms ease, transform 2200ms cubic-bezier(0.18, 0.82, 0.22, 1); } body[data-app-view="name_entry"] .intro-panel-name { display: grid; } body { margin: 0; font-family: Segoe UI, Arial, sans-serif; color: var(--web-v1-text); background: var(--web-v1-bg); min-height: 100vh; position: relative; --view-title-size: var(--web-v1-title-size); --view-panel-padding: var(--web-v1-panel-padding); --view-main-gap: var(--web-v1-main-gap); --view-panel-min-height: var(--web-v1-panel-min-height); --view-question-min-height: var(--web-v1-question-min-height); --view-chip-min-height: var(--web-v1-chip-min-height); --view-copy-size: var(--web-v1-copy-size); --view-subtitle-size: var(--web-v1-subtitle-size); --view-button-min-height: var(--web-v1-button-min-height); --view-button-min-width: var(--web-v1-button-min-width); } body[data-view="exam"] { --view-title-size: clamp(3.1rem, 5.2vw, 4.05rem); --view-panel-padding: 14px; --view-main-gap: 12px; --view-panel-min-height: 0px; --view-question-min-height: 0px; --view-chip-min-height: var(--intro-name-entry-cta-min-height); --view-copy-size: 13px; --view-subtitle-size: 14px; --view-button-min-height: 46px; --view-button-min-width: 160px; } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 14%, color-mix(in srgb, var(--web-v1-focus) 18%, transparent), transparent 32%), radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--web-v1-accent) 8%, transparent), transparent 24%), linear-gradient(180deg, color-mix(in srgb, var(--web-v1-bg-deep) 10%, transparent), color-mix(in srgb, var(--web-v1-bg-deep) 44%, transparent)); opacity: 0.42; } .page { width: var(--web-v1-page-width); margin: var(--license-page-margin-top) auto 12px; padding: var(--license-page-padding); border: 1px solid var(--web-v1-page-line); border-radius: var(--web-v1-shell-radius); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-panel) 14%, transparent), color-mix(in srgb, var(--web-v1-panel) 4%, transparent)), var(--web-v1-page-surface); backdrop-filter: blur(2px); box-shadow: 0 28px 60px rgba(0, 0, 0, 0.36); position: relative; overflow: hidden; } .page::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--web-v1-focus) 8%, transparent), transparent 28%), radial-gradient(circle at 50% 68%, color-mix(in srgb, var(--web-v1-accent) 4%, transparent), transparent 22%); opacity: 0.9; } .hero { position: relative; margin-bottom: 0; padding: var(--license-hero-padding); border: 1px solid color-mix(in srgb, var(--web-v1-border) 84%, transparent); border-radius: var(--license-hero-radius); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-panel-strong) 96%, var(--web-v1-bg-deep)) 0%, color-mix(in srgb, var(--web-v1-panel) 88%, var(--web-v1-bg-deep)) 58%, color-mix(in srgb, var(--web-v1-bg-deep) 90%, var(--web-v1-panel) 10%) 100%), radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--web-v1-focus) 18%, transparent), transparent 34%), radial-gradient(circle at 82% 16%, color-mix(in srgb, var(--web-v1-accent) 8%, transparent), transparent 24%), var(--web-v1-panel); box-shadow: 0 22px 44px rgba(0, 0, 0, 0.32), 0 10px 22px color-mix(in srgb, var(--web-v1-border) 10%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 8%, transparent), inset 0 -12px 28px rgba(0, 0, 0, 0.14); overflow: hidden; isolation: isolate; } .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-focus) 8%, transparent), color-mix(in srgb, var(--web-v1-focus) 2%, transparent) 20%, transparent 46%), linear-gradient(90deg, color-mix(in srgb, var(--web-v1-border) 14%, transparent), transparent 28%, transparent 72%, color-mix(in srgb, var(--web-v1-accent) 4%, transparent)); opacity: 0.96; } .hero::after { content: none; } .hero-shell, .status-strip, .panel, .question-panel, .feedback-panel, .answer-item, .module-item, .step-card, .chip, button { transition: border-color var(--web-v1-motion-base), box-shadow var(--web-v1-motion-base), background var(--web-v1-motion-base), transform var(--web-v1-motion-base), opacity var(--web-v1-motion-base); } .hero-shell { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(380px, 500px); gap: 16px; padding: 16px 18px; margin-bottom: 0; border: none; border-radius: var(--license-panel-radius); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-panel-strong) 96%, var(--web-v1-bg-deep)) 0%, color-mix(in srgb, var(--web-v1-panel) 88%, var(--web-v1-bg-deep)) 56%, color-mix(in srgb, var(--web-v1-bg-deep) 96%, var(--web-v1-panel) 4%) 100%), radial-gradient(circle at 18% 14%, color-mix(in srgb, var(--web-v1-focus) 16%, transparent), transparent 30%), radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--web-v1-accent) 4%, transparent), transparent 28%), linear-gradient(112deg, color-mix(in srgb, var(--web-v1-text) 8%, transparent), transparent 34%, color-mix(in srgb, var(--web-v1-border) 12%, transparent) 76%, color-mix(in srgb, var(--web-v1-bg-deep) 20%, transparent)); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.26), 0 8px 18px color-mix(in srgb, var(--web-v1-border) 8%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 14%, transparent), inset 0 -12px 24px rgba(0, 0, 0, 0.2); overflow: hidden; isolation: isolate; } .hero-shell::before { content: none; } .hero-copy, .hero-context, .status-strip, .section-title, .rail-copy, .focus-card, .list-label, .main-stage, .progress-copy, .progress-subtitle, .step-list, .actionbar-copy, .actionbar-buttons { position: relative; z-index: 1; } .hero-copy { display: flex; flex-direction: column; justify-content: center; gap: 4px; } .hero-eyebrow, .eyebrow, .section-title, .list-label, .detail-box-title, .question-progress, .focus-card-label, .actionbar-label, .status-strip-title, .hero-context-label { font-size: 11px; font-weight: 900; color: color-mix(in srgb, var(--web-v1-text-soft) 68%, transparent); text-transform: uppercase; letter-spacing: 0.1em; } .hero-eyebrow { margin-bottom: 4px; font-size: 11px; line-height: 1; letter-spacing: 0.24em; } .hero-title-row { display: block; margin-bottom: 2px; } .hero-title { margin: 0; font-size: clamp(2.2rem, 4vw, 3.35rem); line-height: 0.9; letter-spacing: 0.1em; font-weight: 900; color: var(--web-v1-text); display: inline-block; background: var(--web-v1-title-fill); background-size: 100% 180%; background-position: 50% 8%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.2px color-mix(in srgb, var(--web-v1-border) 34%, transparent); paint-order: stroke fill; text-shadow: 0 1px 0 color-mix(in srgb, var(--web-v1-text) 32%, white), 0 10px 20px rgba(0, 0, 0, 0.4), 0 0 16px color-mix(in srgb, var(--web-v1-focus) 8%, transparent); filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.34)); } .hero-mode { display: none; } .hero-subtitle { margin: 0; max-width: none; font-size: clamp(0.95rem, 1.5vw, 1.12rem); font-weight: 800; line-height: 1.25; letter-spacing: 0.18em; color: color-mix(in srgb, var(--web-v1-text-soft) 78%, transparent); text-transform: uppercase; } .status-strip { display: grid; grid-template-columns: 1fr; align-self: stretch; align-content: center; gap: 8px; min-height: 88px; padding: 11px 12px; border-radius: 12px; border-color: color-mix(in srgb, var(--web-v1-border) 32%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-card-strong) 96%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 78%, var(--web-v1-bg-deep))), linear-gradient(90deg, color-mix(in srgb, var(--web-v1-border) 9%, transparent), transparent 24%, transparent 76%, color-mix(in srgb, var(--web-v1-text-soft) 5%, transparent)); box-shadow: 0 18px 30px rgba(0, 0, 0, 0.2), inset 0 0 0 1px color-mix(in srgb, var(--web-v1-text) 2%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 5%, transparent); } .status-strip-title { margin-bottom: 0; padding-top: 0; max-width: 8ch; line-height: 1.15; color: color-mix(in srgb, var(--web-v1-text-soft) 70%, transparent); } .chip-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: center; } .chip { min-height: 58px; padding: 9px 11px; border-radius: 10px; border-color: color-mix(in srgb, var(--web-v1-text) 5%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-card-strong) 94%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 78%, var(--web-v1-bg-deep))); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--web-v1-text-soft) 38%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 3%, transparent), 0 12px 20px rgba(0, 0, 0, 0.16); opacity: 1; } .chip.accent { border-color: color-mix(in srgb, var(--web-v1-border) 34%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-border) 18%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 82%, var(--web-v1-border) 18%)); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--web-v1-border) 82%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 4%, transparent); } .chip.neutral { border-color: color-mix(in srgb, var(--web-v1-text-soft) 28%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-text-soft) 10%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 90%, var(--web-v1-text-soft) 10%)); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--web-v1-text-soft) 72%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2%, transparent); } .chip.success { border-color: color-mix(in srgb, var(--web-v1-success) 34%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-success) 16%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 84%, var(--web-v1-success) 16%)); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--web-v1-success) 74%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2%, transparent); } .chip.warning { border-color: color-mix(in srgb, var(--web-v1-warning) 40%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-warning) 18%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 82%, var(--web-v1-warning) 18%)); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--web-v1-warning) 78%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2%, transparent); } .chip.danger { border-color: color-mix(in srgb, var(--web-v1-danger) 42%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-danger) 20%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 80%, var(--web-v1-danger) 20%)); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--web-v1-danger) 78%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2%, transparent); } .chip-label { margin-bottom: 5px; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--web-v1-text-soft) 74%, transparent); } .chip-value { font-size: 14px; font-weight: 800; line-height: 1.24; } .chip.chip-primary { min-height: 60px; padding: 10px 12px; opacity: 1; } .chip.chip-primary.success { border-color: color-mix(in srgb, var(--web-v1-success) 50%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-success) 20%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 80%, var(--web-v1-success) 20%)), linear-gradient(90deg, color-mix(in srgb, var(--web-v1-success) 12%, transparent), transparent 56%); box-shadow: inset 6px 0 0 color-mix(in srgb, var(--web-v1-success) 88%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 3%, transparent), 0 16px 28px rgba(10, 38, 25, 0.24); } .chip.chip-primary.danger { border-color: color-mix(in srgb, var(--web-v1-danger) 56%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-danger) 20%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 80%, var(--web-v1-danger) 20%)), linear-gradient(90deg, color-mix(in srgb, var(--web-v1-danger) 12%, transparent), transparent 56%); box-shadow: inset 6px 0 0 color-mix(in srgb, var(--web-v1-danger) 92%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 3%, transparent), 0 16px 28px rgba(48, 12, 18, 0.26); } .chip.chip-primary .chip-label { margin-bottom: 5px; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--web-v1-text-soft) 74%, transparent); } .chip.chip-primary .chip-value { font-size: 14px; font-weight: 800; line-height: 1.24; } .main-grid { display: grid; gap: 14px; grid-template-columns: var(--web-v1-left-rail) minmax(0, 1fr) var(--web-v1-right-rail); grid-template-areas: "left main right"; align-items: start; } .panel-rail { grid-area: left; display: grid; align-content: start; gap: 6px; } .panel-stage { grid-area: main; padding: 14px; } .panel-progress { grid-area: right; display: grid; align-content: start; gap: 10px; } .panel { padding: var(--view-panel-padding); border-radius: var(--license-panel-radius); border-color: color-mix(in srgb, var(--web-v1-border) 30%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-panel) 90%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 72%, var(--web-v1-bg-deep))), var(--web-v1-panel); box-shadow: var(--web-v1-shadow-panel), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2.5%, transparent); } .panel::before { background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-border) 6%, transparent), transparent 18%, transparent 82%, color-mix(in srgb, var(--web-v1-text-soft) 6%, transparent)), repeating-linear-gradient(0deg, color-mix(in srgb, var(--web-v1-text) 1.2%, transparent) 0, color-mix(in srgb, var(--web-v1-text) 1.2%, transparent) 1px, transparent 1px, transparent 108px); opacity: 0.62; } .panel::after { content: ""; position: absolute; inset: 8px; pointer-events: none; border: 1px solid color-mix(in srgb, var(--web-v1-border) 5%, transparent); border-radius: 6px; } .section-title { margin-bottom: 6px; padding: 0 0 6px; display: flex; align-items: center; gap: 8px; color: color-mix(in srgb, var(--web-v1-text) 80%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--web-v1-border) 16%, transparent); } .section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--web-v1-border) 32%, transparent), transparent 80%); } .rail-copy, .progress-copy { margin-bottom: 7px; max-width: 30ch; font-size: 11px; line-height: 1.4; color: var(--web-v1-text-muted); } .progress-copy { margin-bottom: 4px; max-width: none; font-size: 11px; line-height: 1.4; } .list-label { margin-bottom: 6px; color: rgba(208, 192, 151, 0.72); } .module-list { display: grid; gap: 6px; max-height: none; overflow: visible; padding: 8px; border: 1px solid color-mix(in srgb, var(--web-v1-border) 14%, transparent); border-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-panel-strong) 92%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 84%, var(--web-v1-bg-deep))), linear-gradient(90deg, color-mix(in srgb, var(--web-v1-border) 4%, transparent), transparent 24%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--web-v1-text) 1.5%, transparent), inset 0 14px 20px rgba(0, 0, 0, 0.12); } .module-item { min-height: 88px; display: grid; align-content: start; gap: 4px; min-height: 68px; padding: 10px 11px 9px; border: 1px solid transparent; border-radius: 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-card-strong) 94%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 72%, var(--web-v1-bg-deep))); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--web-v1-text-soft) 42%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2%, transparent); } .module-item.status-neutral { border-color: color-mix(in srgb, var(--web-v1-text-soft) 26%, transparent); } .module-item.status-warning { border-color: color-mix(in srgb, var(--web-v1-warning) 34%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-warning) 18%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 82%, var(--web-v1-warning) 18%)); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--web-v1-warning) 72%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2%, transparent); } .module-item.status-success { border-color: color-mix(in srgb, var(--web-v1-success) 34%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-success) 16%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 84%, var(--web-v1-success) 16%)); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--web-v1-success) 70%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2%, transparent); } .module-item.status-danger { border-color: color-mix(in srgb, var(--web-v1-danger) 36%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-danger) 18%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 82%, var(--web-v1-danger) 18%)); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--web-v1-danger) 72%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2%, transparent); } .module-item.active { border-color: color-mix(in srgb, var(--web-v1-border) 56%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-border) 20%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 80%, var(--web-v1-border) 20%)); box-shadow: inset 5px 0 0 color-mix(in srgb, var(--web-v1-border) 94%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--web-v1-text) 8%, transparent), 0 16px 24px rgba(26, 16, 6, 0.28); } .module-item:hover { transform: none; border-color: color-mix(in srgb, var(--web-v1-border) 46%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-border) 10%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-panel) 72%, var(--web-v1-bg-deep))); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--web-v1-border) 74%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2%, transparent); } .module-item-title { font-size: 12px; font-weight: 800; line-height: 1.26; margin-bottom: 0; } .module-item-status-row { display: flex; align-items: center; gap: 6px; margin-bottom: 0; } .status-pill { min-height: 20px; padding: 2px 7px; border-radius: 4px; background: color-mix(in srgb, var(--web-v1-bg-deep) 74%, transparent); letter-spacing: 0.1em; font-size: 10px; line-height: 1.15; } .module-item-attempts { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--web-v1-text-muted); } .module-item-meta { display: none; } .module-item.active .module-item-meta { display: none; } color: color-mix(in srgb, var(--web-v1-text) 78%, transparent); } .main-stage { display: grid; gap: 10px; } .inner-card { display: grid; position: relative; gap: 10px; padding: 10px; border-radius: 10px; border-color: rgba(214, 170, 89, 0.22); background: linear-gradient(180deg, rgba(21, 27, 35, 0.99), rgba(10, 14, 20, 0.98)), linear-gradient(90deg, rgba(214, 170, 89, 0.05), transparent 30%, transparent 76%, rgba(113, 134, 151, 0.05)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 20px 34px rgba(0, 0, 0, 0.28); } .inner-card::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 28px; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, 0.22), transparent 34%, transparent 72%, rgba(255, 92, 18, 0.04)); opacity: 0.55; } .stage-title, .question-title, #feedback-title { margin-bottom: 4px; font-size: 25px; letter-spacing: -0.03em; } .stage-body { max-width: 64ch; font-size: 14px; line-height: 1.48; color: var(--web-v1-text-soft); } .main-stage[data-stage-view="module_intro"] { gap: 10px; } .main-stage[data-stage-view="module_intro"] .inner-card { min-height: 0; padding: 18px 18px 14px; border-color: rgba(255, 92, 18, 0.14); background: linear-gradient(180deg, rgba(5, 6, 8, 0.99), rgba(1, 2, 4, 0.99)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 18px 34px rgba(0, 0, 0, 0.38); } .main-stage[data-stage-view="module_intro"] .stage-title { font-size: 32px; } .main-stage[data-stage-view="module_intro"] .stage-body { max-width: 62ch; font-size: 17px; line-height: 1.46; } .main-stage[data-stage-view="completion"] { gap: 12px; } .main-stage[data-stage-view="completion"] .inner-card { padding: 14px 16px; border-color: rgba(113, 134, 151, 0.16); background: linear-gradient(180deg, rgba(18, 24, 32, 0.97), rgba(10, 14, 20, 0.95)), linear-gradient(90deg, rgba(113, 134, 151, 0.04), transparent 26%); } .main-stage[data-stage-view="completion"] .stage-title { font-size: 28px; } .main-stage[data-stage-view="completion"] .stage-body { max-width: 58ch; color: rgba(221, 213, 189, 0.82); } /* HOMESTAGE: dark panel override for the Intro / Home START box Purpose: remove cold/blue tint and apply dark ROAR panel look Keep text colors intact and avoid layout shifts. */ .main-stage[data-stage-view="home"] .inner-card, body[data-view="home"] .main-stage .inner-card { min-height: 0; /* match padding used in other stage-specific cards to avoid layout shifts */ padding: 18px 18px 14px; border-color: rgba(255, 92, 18, 0.18); background: linear-gradient(180deg, rgba(5, 6, 8, 0.98), rgba(1, 2, 4, 0.99)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 18px 34px rgba(0, 0, 0, 0.38); } .detail-box { grid-template-columns: repeat(3, minmax(0, 1fr)); display: grid; gap: 6px; padding: 7px 9px; border-radius: 6px; border-color: color-mix(in srgb, var(--web-v1-text-soft) 14%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-panel) 72%, transparent), color-mix(in srgb, var(--web-v1-bg-deep) 58%, transparent)), linear-gradient(90deg, color-mix(in srgb, var(--web-v1-text-soft) 4%, transparent), transparent 24%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--web-v1-text) 1.5%, transparent); } .main-stage[data-stage-view="module_intro"] .detail-box { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 7px 9px; border-color: color-mix(in srgb, var(--web-v1-text-soft) 16%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-panel) 76%, transparent), color-mix(in srgb, var(--web-v1-bg-deep) 62%, transparent)), linear-gradient(90deg, color-mix(in srgb, var(--web-v1-border) 5%, transparent), transparent 22%); } #stage-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; } .detail-line { min-height: 40px; display: flex; align-items: center; padding: 7px 9px; border-radius: 4px; border-color: color-mix(in srgb, var(--web-v1-text) 2%, transparent); background: color-mix(in srgb, var(--web-v1-panel) 82%, transparent); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--web-v1-text-soft) 44%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 1.5%, transparent); } .main-stage[data-stage-view="module_intro"] .detail-line { min-height: 40px; padding: 6px 8px; border-color: color-mix(in srgb, var(--web-v1-text) 3%, transparent); background: color-mix(in srgb, var(--web-v1-panel-strong) 90%, transparent); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--web-v1-border) 60%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 1.5%, transparent); } .main-stage[data-stage-view="exam"] .detail-box, .main-stage[data-stage-view="result"] .detail-box { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px 10px; border-color: rgba(113, 134, 151, 0.12); background: rgba(10, 13, 18, 0.54); } .main-stage[data-stage-view="exam"] .detail-line, .main-stage[data-stage-view="result"] .detail-line { min-height: 42px; padding: 7px 9px; } .lesson-summary-box { display: grid; gap: 10px; padding: 12px; border-radius: 8px; border-color: color-mix(in srgb, var(--web-v1-text-soft) 16%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-card-strong) 94%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 74%, var(--web-v1-bg-deep))), linear-gradient(90deg, color-mix(in srgb, var(--web-v1-text-soft) 5%, transparent), transparent 26%); } .main-stage[data-stage-view="module_intro"] .lesson-summary-box { gap: 10px; padding: 10px; border-color: color-mix(in srgb, var(--web-v1-border) 20%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-card-strong) 96%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 78%, var(--web-v1-bg-deep))), linear-gradient(90deg, color-mix(in srgb, var(--web-v1-border) 6%, transparent), transparent 18%, transparent 82%, color-mix(in srgb, var(--web-v1-text-soft) 4%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--web-v1-text) 2%, transparent), 0 20px 34px rgba(0, 0, 0, 0.24); } .main-stage[data-stage-view="module_intro"] .detail-box-title { color: rgba(181, 194, 206, 0.76); } .lesson-summary-header { display: grid; gap: 4px; } .briefing-scoreboard-box { display: grid; gap: 12px; padding: 12px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--web-v1-border) 22%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-card-strong) 96%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 78%, var(--web-v1-bg-deep))), linear-gradient(90deg, color-mix(in srgb, var(--web-v1-border) 6%, transparent), transparent 18%, transparent 82%, color-mix(in srgb, var(--web-v1-text-soft) 4%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--web-v1-text) 2%, transparent), 0 20px 34px rgba(0, 0, 0, 0.24); } .panel-progress .briefing-scoreboard-box { margin-top: 4px; padding: 10px; gap: 8px; border-color: color-mix(in srgb, var(--web-v1-border) 24%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-card-strong) 96%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 82%, var(--web-v1-bg-deep))), linear-gradient(90deg, color-mix(in srgb, var(--web-v1-border) 6%, transparent), transparent 24%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--web-v1-text) 1.5%, transparent), 0 18px 28px rgba(0, 0, 0, 0.22); } .briefing-scoreboard-header { display: grid; gap: 4px; } .briefing-scoreboard-intro { font-size: 13px; line-height: 1.45; color: color-mix(in srgb, var(--web-v1-text-soft) 76%, transparent); max-width: 64ch; } .briefing-scoreboard-list { display: grid; gap: 8px; } .panel-progress .briefing-scoreboard-intro { font-size: 10px; line-height: 1.25; color: color-mix(in srgb, var(--web-v1-text-soft) 64%, transparent); } .panel-progress .briefing-scoreboard-list { gap: 1px; } .briefing-scoreboard-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 11px 12px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--web-v1-text) 4%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-card-strong) 94%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 74%, var(--web-v1-bg-deep))); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--web-v1-text-soft) 42%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 1.5%, transparent); } .panel-progress .briefing-scoreboard-row { grid-template-columns: 40px minmax(0, 1fr); gap: 7px; align-items: start; padding: 7px 9px; border-radius: 7px; } .briefing-scoreboard-row.tone-success { border-color: color-mix(in srgb, var(--web-v1-success) 34%, transparent); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--web-v1-success) 82%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 1.5%, transparent); } .briefing-scoreboard-row.tone-warning { border-color: color-mix(in srgb, var(--web-v1-warning) 34%, transparent); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--web-v1-warning) 82%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 1.5%, transparent); } .briefing-scoreboard-row.tone-danger { border-color: color-mix(in srgb, var(--web-v1-danger) 36%, transparent); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--web-v1-danger) 82%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 1.5%, transparent); } .briefing-scoreboard-rank { font-size: 10px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(207, 192, 151, 0.66); } .briefing-scoreboard-player { min-width: 0; font-size: 13px; font-weight: 900; line-height: 1.08; color: var(--web-v1-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .panel-progress .briefing-scoreboard-player { white-space: normal; } .briefing-scoreboard-status { justify-self: start; } .panel-progress .briefing-scoreboard-status, .panel-progress .briefing-scoreboard-attempts { grid-column: 2; justify-self: start; } .briefing-scoreboard-attempts { justify-self: end; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--web-v1-text-muted); } .panel-progress .briefing-scoreboard-attempts { font-size: 10px; letter-spacing: 0.05em; } .lesson-summary-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; } .main-stage[data-stage-view="module_intro"] .lesson-summary-list { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px; } .lesson-summary-item { min-height: 84px; padding: 10px 10px 8px; border-radius: 8px; border-color: rgba(255, 255, 255, 0.04); background: linear-gradient(180deg, rgba(17, 22, 29, 0.98), rgba(10, 13, 18, 0.96)); box-shadow: inset 2px 0 0 rgba(113, 134, 151, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.015); } .main-stage[data-stage-view="module_intro"] .lesson-summary-item { min-height: 90px; padding: 11px 12px 10px; border-color: color-mix(in srgb, var(--web-v1-text) 5%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-card-strong) 96%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 76%, var(--web-v1-bg-deep))); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--web-v1-border) 52%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 1.5%, transparent); } .question-panel, .feedback-panel { display: grid; padding: 10px 12px; border-radius: 8px; } .question-panel { gap: 10px; border-color: color-mix(in srgb, var(--web-v1-border) 22%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-card-strong) 96%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-bg-deep) 78%, var(--web-v1-panel) 22%)), linear-gradient(90deg, color-mix(in srgb, var(--web-v1-border) 5%, transparent), transparent 24%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--web-v1-text) 2%, transparent), 0 18px 32px rgba(0, 0, 0, 0.26); } .question-helper { margin-top: 0; margin-bottom: 2px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--web-v1-text-muted); } .answer-list { display: grid; gap: 6px; } .answer-item { padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--web-v1-text) 4%, transparent); border-radius: 6px; cursor: pointer; border-color: color-mix(in srgb, var(--web-v1-text) 4%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-card-strong) 94%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 72%, var(--web-v1-bg-deep))); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--web-v1-text-soft) 42%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 1.5%, transparent); } .answer-item:hover { transform: none; border-color: color-mix(in srgb, var(--web-v1-border) 34%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-border) 10%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-panel) 72%, var(--web-v1-bg-deep))); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--web-v1-border) 68%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 1.5%, transparent); } .answer-item.active { border-color: color-mix(in srgb, var(--web-v1-accent) 82%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-accent) 20%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 80%, var(--web-v1-accent) 20%)), linear-gradient(90deg, color-mix(in srgb, var(--web-v1-accent) 12%, transparent), transparent 60%); color: color-mix(in srgb, var(--web-v1-text) 92%, white); box-shadow: inset 5px 0 0 color-mix(in srgb, var(--web-v1-accent) 96%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--web-v1-accent) 18%, transparent), 0 10px 20px rgba(4, 34, 39, 0.28); } .answer-item.correct { background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-success) 18%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 82%, var(--web-v1-success) 18%)); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--web-v1-success) 88%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--web-v1-success) 8%, transparent); } .answer-item.wrong { background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-danger) 20%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 80%, var(--web-v1-danger) 20%)); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--web-v1-danger) 88%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--web-v1-danger) 8%, transparent); } .feedback-panel { gap: 12px; border-color: color-mix(in srgb, var(--web-v1-border) 22%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-card-strong) 94%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-bg-deep) 82%, var(--web-v1-panel) 18%)), linear-gradient(90deg, color-mix(in srgb, var(--web-v1-border) 5%, transparent), transparent 24%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--web-v1-text) 2%, transparent), 0 16px 28px rgba(0, 0, 0, 0.24); } #feedback-badge { padding: 5px 9px; border-radius: 4px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(8, 11, 15, 0.82); } .progress-subtitle { margin-bottom: 0; font-size: 14px; font-weight: 900; line-height: 1.2; color: var(--web-v1-text); max-width: none; } .step-list { display: grid; position: relative; gap: 6px; padding-left: 14px; } .step-list::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-border) 42%, transparent), color-mix(in srgb, var(--web-v1-text-soft) 12%, transparent)); } .step-card { position: relative; padding: 8px 9px 8px 12px; border-radius: 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-card-strong) 92%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 70%, var(--web-v1-bg-deep))); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--web-v1-text-soft) 42%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2%, transparent); } .step-card::before { content: ""; position: absolute; left: -14px; top: 13px; width: 8px; height: 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--web-v1-text-soft) 32%, transparent); background: color-mix(in srgb, var(--web-v1-bg-deep) 98%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--web-v1-bg-deep) 92%, transparent); } .step-card.active { border-color: color-mix(in srgb, var(--web-v1-border) 42%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-border) 18%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 82%, var(--web-v1-border) 18%)); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--web-v1-border) 88%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--web-v1-text) 8%, transparent); } .step-card.active::before { border-color: color-mix(in srgb, var(--web-v1-border) 80%, transparent); background: color-mix(in srgb, var(--web-v1-border) 90%, transparent); } .step-card.done { border-color: color-mix(in srgb, var(--web-v1-text-soft) 24%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-text-soft) 10%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 90%, var(--web-v1-text-soft) 10%)); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--web-v1-text-soft) 48%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2%, transparent); } .step-card.done::before { border-color: color-mix(in srgb, var(--web-v1-text-soft) 52%, transparent); background: color-mix(in srgb, var(--web-v1-text-soft) 74%, transparent); } .step-card.warning { border-color: color-mix(in srgb, var(--web-v1-warning) 34%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-warning) 16%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 84%, var(--web-v1-warning) 16%)); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--web-v1-warning) 78%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2%, transparent); } .step-card.warning::before { border-color: color-mix(in srgb, var(--web-v1-warning) 72%, transparent); background: color-mix(in srgb, var(--web-v1-warning) 86%, transparent); } .step-card.upcoming { border-color: color-mix(in srgb, var(--web-v1-text-soft) 18%, transparent); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--web-v1-text-soft) 34%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2%, transparent); } .step-card.blocked { border-color: color-mix(in srgb, var(--web-v1-danger) 38%, transparent); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--web-v1-danger) 84%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--web-v1-danger) 8%, transparent); } .step-card.blocked::before { border-color: color-mix(in srgb, var(--web-v1-danger) 76%, transparent); background: color-mix(in srgb, var(--web-v1-danger) 90%, transparent); } .step-card:hover { transform: none; border-color: color-mix(in srgb, var(--web-v1-border) 34%, transparent); } .step-title { display: flex; gap: 6px; margin-bottom: 3px; } .step-index { min-width: 24px; padding: 2px 6px; border-radius: 4px; background: color-mix(in srgb, var(--web-v1-bg-deep) 78%, transparent); color: color-mix(in srgb, var(--web-v1-text-soft) 70%, transparent); font-size: 11px; } .step-name { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; } .step-detail { font-size: 11px; line-height: 1.3; color: color-mix(in srgb, var(--web-v1-text-soft) 72%, transparent); } .step-card.active .step-detail { color: color-mix(in srgb, var(--web-v1-text) 82%, transparent); } .actionbar { display: flex; align-items: center; gap: 8px; position: sticky; bottom: 8px; z-index: 3; margin-top: 10px; padding: 10px 12px; border-radius: 10px; border-color: color-mix(in srgb, var(--web-v1-border) 44%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-card-strong) 94%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 80%, var(--web-v1-bg-deep))), linear-gradient(90deg, color-mix(in srgb, var(--web-v1-border) 6%, transparent), transparent 28%, transparent 72%, color-mix(in srgb, var(--web-v1-text-soft) 5%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--web-v1-text) 2%, transparent), 0 18px 32px rgba(0, 0, 0, 0.28); } .actionbar::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--web-v1-border) 8%, transparent), transparent 32%, transparent 68%, color-mix(in srgb, var(--web-v1-text-soft) 5%, transparent)); } .actionbar-copy { display: grid; align-content: center; flex: 0 1 18ch; min-width: 0; } .actionbar-label { display: none; } .actionbar-summary { font-size: 12px; font-weight: 700; line-height: 1.1; color: var(--web-v1-text-muted); } .actionbar-buttons { display: flex; flex: 1 1 auto; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 6px; } .actionbar-buttons button { flex: 0 0 auto; } button { min-height: var(--view-button-min-height); padding: 9px 14px; border-radius: 6px; border-color: color-mix(in srgb, var(--web-v1-border) 26%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-card-strong) 96%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 74%, var(--web-v1-bg-deep))); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 3%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--web-v1-text) 1.5%, transparent); } button.secondary { border-color: color-mix(in srgb, var(--web-v1-text-soft) 22%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-bg-deep) 40%, transparent), color-mix(in srgb, var(--web-v1-bg-deep) 72%, transparent)), linear-gradient(180deg, color-mix(in srgb, var(--web-v1-card-strong) 94%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 72%, var(--web-v1-bg-deep))); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--web-v1-text-soft) 42%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 1.5%, transparent); min-width: 132px; } button.primary { border-color: var(--web-v1-action-primary-line); background: linear-gradient(180deg, var(--web-v1-action-primary-start), var(--web-v1-action-primary-end)), linear-gradient(90deg, rgba(255, 236, 191, 0.12), transparent 60%); color: #fff4d1; box-shadow: inset 4px 0 0 rgba(234, 201, 123, 0.5), inset 0 0 0 1px rgba(255, 236, 191, 0.14), var(--web-v1-action-primary-shadow); flex: 0 1 228px; min-width: 192px; max-width: 280px; } button:hover:not(:disabled) { transform: none; border-color: rgba(214, 170, 89, 0.48); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), inset 0 0 0 1px rgba(255, 255, 255, 0.015), 0 10px 18px rgba(0, 0, 0, 0.18); } button.primary:hover:not(:disabled) { border-color: rgba(234, 201, 123, 0.92); box-shadow: inset 4px 0 0 rgba(255, 225, 148, 0.6), inset 0 0 0 1px rgba(255, 236, 191, 0.18), 0 14px 24px rgba(74, 45, 10, 0.32); } button:focus-visible, .module-item:focus-visible, .answer-item:focus-visible { outline: 2px solid color-mix(in srgb, var(--web-v1-focus) 82%, transparent); outline-offset: 2px; } /* Desktop: Reserve stage height + tone down actionbar buttons to avoid layout jumps */ @media (min-width: 980px) { .main-stage[data-stage-view="module_intro"], .main-stage[data-stage-view="exam"], .main-stage[data-stage-view="result"] { min-height: 520px; } .main-stage[data-stage-view="exam"] .answer-list { min-height: 180px; } .feedback-panel { min-height: 88px; } .actionbar-buttons button { min-height: 44px; } .actionbar-buttons button.primary { flex: 0 0 auto; min-width: 160px; max-width: 240px; border-radius: 8px; box-shadow: inset 2px 0 0 rgba(234,201,123,0.22), inset 0 0 0 1px rgba(255,236,191,0.08), 0 10px 18px rgba(74,45,10,0.12); } } /* ROAR LOGIN BRIDGE GLOBAL 01 */ body[data-app-view="intro_briefing"], body[data-app-view="login_entry"], body[data-app-view="member_hub"] { background: #000 !important; } /* Slice tweaks: reserve feedback slot and stabilize stage height */ @media (min-width: 980px) { body[data-app-view="license"] #license-app { min-height: 1160px; } body[data-app-view="license"] #license-app .panel-stage { display: flex; flex-direction: column; height: auto; min-height: 828px; overflow: visible; } body[data-app-view="license"] #license-app #main-stage { flex: 1 0 auto; overflow: visible; min-height: 800px; } /* Ensure a reserved space for feedback so showing/hiding it doesn't change outer height */ body[data-app-view="license"] #feedback-panel { min-height: 124px; } body[data-app-view="license"] #feedback-panel.hidden { display: grid !important; visibility: hidden !important; min-height: 124px; height: 124px; pointer-events: none; } } /* Hide left rail textual start in HOME view when no active module to avoid CTA duplication */ body[data-app-view="license"] #module-rail-toggle .rail-toggle-label { white-space: nowrap; } body[data-app-view="intro_briefing"]::before, body[data-app-view="login_entry"]::before, body[data-app-view="member_hub"]::before { opacity: 0.14 !important; } body[data-app-view="intro_briefing"] .intro-background, body[data-app-view="login_entry"] .intro-background, body[data-app-view="member_hub"] .intro-background { opacity: 1 !important; transform: translate3d(0, 0, 0) scale(1) !important; filter: brightness(0.86) saturate(1.04) !important; } body[data-app-view="intro_briefing"] #roar-view-background-layer, body[data-app-view="login_entry"] #roar-view-background-layer, body[data-app-view="member_hub"] #roar-view-background-layer { opacity: 0 !important; background-image: none !important; } body[data-app-view="login_entry"] .intro-shell, body[data-app-view="member_hub"] .intro-shell { align-items: center !important; justify-items: center !important; padding: 24px !important; } body[data-app-view="intro_ready"] .intro-start-panel { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; } .intro-secondary-cta { min-height: 44px !important; width: min(320px, 68vw) !important; justify-self: center !important; border: 1px solid rgba(255, 244, 209, 0.26) !important; border-radius: 8px !important; background: rgba(4, 7, 14, 0.52) !important; color: rgba(255, 244, 209, 0.86) !important; font: inherit !important; font-size: 0.9rem !important; font-weight: 850 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .intro-field-label-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .intro-name-instruction { max-width: 27ch !important; margin: 0 auto 4px !important; color: #fff4d1 !important; font-size: 1rem !important; font-weight: 850 !important; line-height: 1.35 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .intro-panel-name .intro-input, .intro-panel-login .intro-input { width: min(100%, 300px) !important; min-height: 44px !important; border-radius: 8px !important; } .intro-panel-name .intro-input::placeholder, .intro-panel-login .intro-input::placeholder { color: rgba(255, 240, 180, 0.48) !important; text-transform: uppercase !important; } .intro-panel-name .intro-cta, .intro-panel-login .intro-cta, #aim-lab-entry-button.intro-warmup-button, #login-back-button.intro-warmup-button { width: min(100%, 320px) !important; border-radius: 8px !important; letter-spacing: 0 !important; } .intro-panel-login { width: min(520px, calc(100vw - 32px)) !important; max-width: 520px !important; gap: 12px !important; padding: 28px 32px 30px !important; border-radius: 8px !important; text-align: center !important; } .intro-login-title, .intro-login-copy, .intro-login-demo-note { margin: 0 auto !important; letter-spacing: 0 !important; } .intro-login-title { color: #fff4d1 !important; font-size: 1.9rem !important; font-weight: 900 !important; } .intro-login-copy { color: rgba(255, 244, 209, 0.82) !important; } .intro-login-demo-note { color: rgba(255, 183, 96, 0.86) !important; font-size: 0.82rem !important; } .member-hub { width: min(1180px, calc(100vw - 32px)) !important; min-height: min(680px, calc(100vh - 48px)) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(210px, 260px) !important; gap: 18px !important; align-self: center !important; justify-self: center !important; color: #fff4d1 !important; } .member-hub.hidden { display: none !important; } .member-hub-content, .member-hub-nav { border: 1px solid rgba(255, 122, 24, 0.22) !important; border-radius: 8px !important; background: rgba(4, 7, 14, 0.74) !important; box-shadow: 0 24px 54px rgba(0, 0, 0, 0.42) !important; backdrop-filter: blur(14px) !important; } .member-hub-content { display: grid !important; align-content: center !important; gap: 14px !important; padding: 34px !important; } .member-hub-card-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } .member-hub-card { min-height: 116px !important; display: grid !important; align-content: space-between !important; gap: 14px !important; padding: 18px !important; border: 1px solid rgba(255, 244, 209, 0.12) !important; border-radius: 8px !important; background: rgba(15, 18, 24, 0.78) !important; } .member-hub-notice { color: rgba(255, 183, 96, 0.9) !important; } .member-hub-title { margin: 0 !important; color: #fff4d1 !important; font-size: 2.4rem !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; } .member-hub-intro, .member-hub-copy, .member-hub-notice, .member-hub-card strong { margin: 0 !important; color: rgba(255, 244, 209, 0.84) !important; font-size: 1rem !important; line-height: 1.5 !important; letter-spacing: 0 !important; } .member-hub-eyebrow, .member-hub-card-label { color: rgba(255, 122, 24, 0.9) !important; font-size: 0.76rem !important; font-weight: 900 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .member-hub-nav { display: grid !important; align-content: start !important; gap: 8px !important; padding: 14px !important; } .member-hub-nav-button { min-height: 44px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 10px !important; padding: 0 12px !important; border: 1px solid rgba(255, 244, 209, 0.12) !important; border-radius: 8px !important; background: rgba(10, 14, 20, 0.66) !important; color: rgba(255, 244, 209, 0.8) !important; font: inherit !important; font-size: 0.84rem !important; font-weight: 850 !important; letter-spacing: 0 !important; text-align: left !important; text-transform: uppercase !important; } .member-hub-nav-button span { color: rgba(255, 183, 96, 0.72) !important; font-size: 0.68rem !important; font-weight: 750 !important; text-transform: none !important; } .member-hub-nav-button.active { border-color: rgba(255, 122, 24, 0.72) !important; background: rgba(255, 122, 24, 0.18) !important; color: #fff4d1 !important; } .member-hub-nav-button.locked { color: rgba(255, 244, 209, 0.58) !important; } .member-hub-nav-button.logout { margin-top: 8px !important; border-color: rgba(255, 112, 32, 0.62) !important; color: #fff4d1 !important; } .member-hub-nav-button:hover, .member-hub-nav-button:focus-visible { border-color: rgba(255, 122, 24, 0.7) !important; outline: none !important; } @media (max-width: 1280px) { .hero-shell { grid-template-columns: 1fr; } .main-grid { grid-template-columns: 1fr; grid-template-areas: "main" "right" "left"; } .panel { min-height: 0; } .hero-copy { display: flex; flex-direction: column; justify-content: center; gap: 4px; } @media (max-width: 760px) { .intro-layer { padding: 18px; } .intro-shell { padding: 20px 0 max(26px, env(safe-area-inset-bottom, 0px)); } .intro-start-panel { width: min(100%, 100vw - 36px); } .intro-panel { width: 100%; padding: 24px 20px; gap: 12px; } .intro-name-title { font-size: clamp(1.7rem, 8vw, 2.2rem); } .intro-copy { margin: 0; max-width: 32ch; font-size: 14px; line-height: 1.5; color: color-mix(in srgb, var(--web-v1-start-subline) 76%, transparent); } .completion-panel { --completion-visual-image: url("../assets/danke.jpg"); --completion-fade-image: url("../assets/danke.jpg"); display: grid; align-content: start; gap: 12px; padding: 20px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--web-v1-link-cta) 28%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-link-panel) 88%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-link-panel) 68%, var(--web-v1-bg-deep))), linear-gradient(90deg, color-mix(in srgb, var(--web-v1-link-cta) 7%, transparent), transparent 26%, color-mix(in srgb, var(--web-v1-text-soft) 5%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--web-v1-text) 2%, transparent), 0 18px 32px rgba(0, 0, 0, 0.24); } .completion-visual { min-height: 132px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--web-v1-link-cta) 22%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-link-panel) 16%, transparent), color-mix(in srgb, var(--web-v1-link-panel) 38%, transparent)), var(--completion-visual-image) center center / cover no-repeat; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 6%, transparent), 0 10px 22px rgba(0, 0, 0, 0.22); } .completion-note-list { display: grid; gap: 6px; } .completion-note { min-height: 0; display: flex; align-items: flex-start; padding: 10px 11px; border-radius: 7px; background: color-mix(in srgb, var(--web-v1-link-panel) 84%, var(--web-v1-bg-deep)); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--web-v1-link-cta) 58%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 1.5%, transparent); color: color-mix(in srgb, var(--web-v1-completion-text) 88%, transparent); font-size: 13px; line-height: 1.35; } .completion-form { display: grid; gap: 12px; } .completion-field-label { font-size: 11px; font-weight: 900; color: color-mix(in srgb, var(--web-v1-completion-text) 78%, transparent); text-transform: uppercase; letter-spacing: 0.14em; } .completion-input { min-height: 56px; padding: 0 14px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--web-v1-link-input) 28%, var(--web-v1-text-soft)); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-link-input) 92%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-link-input) 70%, var(--web-v1-bg-deep))); color: var(--web-v1-completion-text); font-size: 14px; box-shadow: inset 3px 0 0 color-mix(in srgb, var(--web-v1-link-cta) 44%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2%, transparent); } .completion-input::placeholder { color: color-mix(in srgb, var(--web-v1-completion-text) 42%, transparent); } .completion-error { margin: 0; font-size: 12px; color: var(--web-v1-link-validation); } .completion-actions { display: flex; justify-content: flex-start; } .completion-final-message { padding: 14px 15px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--web-v1-completion-highlight) 24%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-completion-highlight) 16%, var(--web-v1-link-panel)), color-mix(in srgb, var(--web-v1-bg-deep) 84%, var(--web-v1-completion-highlight) 16%)); color: color-mix(in srgb, var(--web-v1-completion-text) 92%, white); font-size: 14px; line-height: 1.45; box-shadow: inset 4px 0 0 color-mix(in srgb, var(--web-v1-completion-highlight) 80%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2%, transparent); } .completion-fade-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 6vh 4vw; pointer-events: none; z-index: 1200; background: color-mix(in srgb, var(--web-v1-completion-overlay) 82%, transparent); backdrop-filter: blur(5px); } .completion-fade-copy { width: min(1200px, 92vw); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; background: transparent; border: none; box-shadow: none; padding: 0; } .page.completion-active .panel-rail, .page.completion-active .panel-progress { pointer-events: none; opacity: 0.52; } .page.completion-faded .main-grid, .page.completion-faded .hero { opacity: 0; visibility: hidden; } .completion-fade-brand { font-size: clamp(1.2rem, 2.3vw, 1.9rem); font-weight: 900; letter-spacing: 0.34em; text-transform: uppercase; color: var(--web-v1-completion-headline); text-shadow: 0 0 10px color-mix(in srgb, var(--web-v1-completion-highlight) 22%, transparent), 0 0 24px color-mix(in srgb, var(--web-v1-completion-highlight) 14%, transparent); } .completion-fade-message { max-width: min(1100px, 90vw); font-size: clamp(2.8rem, 6.6vw, 6.4rem); line-height: 1.05; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--web-v1-completion-text); text-shadow: 0 0 12px color-mix(in srgb, var(--web-v1-completion-highlight) 30%, transparent), 0 0 28px color-mix(in srgb, var(--web-v1-completion-highlight) 18%, transparent), 0 0 54px rgba(0, 0, 0, 0.32); } /* name-entry redesign */ .intro-panel-name { width: min(520px, calc(100vw - 56px)); max-width: 520px; padding: 24px 26px 22px; gap: 10px; border: 1px solid color-mix(in srgb, var(--web-v1-link-cta) 18%, transparent); border-radius: 24px; background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-link-panel) 90%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-link-panel) 72%, var(--web-v1-bg-deep))), radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--web-v1-link-cta) 6%, transparent), transparent 34%), radial-gradient(circle at 82% 10%, color-mix(in srgb, var(--web-v1-accent) 3%, transparent), transparent 24%); box-shadow: 0 24px 54px rgba(0, 0, 0, 0.42), 0 12px 26px rgba(8, 11, 18, 0.22), inset 0 1px 0 color-mix(in srgb, var(--web-v1-completion-text) 6%, transparent); backdrop-filter: blur(16px); justify-items: center; text-align: center; } .intro-kicker { display: none; } .intro-name-title { margin: 0; max-width: 8ch; line-height: 0.92; text-transform: uppercase; color: var(--web-v1-completion-text); font-size: clamp(1.85rem, 3.5vw, 2.45rem); letter-spacing: 0.025em; font-weight: 900; text-align: center; } .intro-copy { margin: 4px 0 10px; max-width: 27ch; font-size: 12px; line-height: 1.45; color: color-mix(in srgb, var(--web-v1-completion-text) 80%, transparent); text-align: center; } .intro-field-label { width: min(100%, 220px); margin-top: 2px; font-size: 10px; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--web-v1-completion-text) 68%, transparent); text-align: left; justify-self: center; } .intro-input { width: min(100%, 220px); min-height: 38px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--web-v1-link-input) 34%, var(--web-v1-link-cta)); border-radius: 13px; background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-link-input) 94%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-link-input) 74%, var(--web-v1-bg-deep))); color: var(--web-v1-completion-text); font: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; text-align: left; justify-self: center; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2.5%, transparent), 0 8px 16px rgba(0, 0, 0, 0.14); } .intro-input::placeholder { color: color-mix(in srgb, var(--web-v1-completion-text) 34%, transparent); text-align: left; } .intro-input:focus-visible { outline: 2px solid color-mix(in srgb, var(--web-v1-link-cta) 76%, transparent); outline-offset: 2px; border-color: color-mix(in srgb, var(--web-v1-link-cta) 68%, transparent); } .intro-error { width: min(100%, 300px); min-height: 16px; margin: 2px 0 0; font-size: 11px; line-height: 1.3; color: var(--web-v1-link-validation); text-align: center; } .intro-panel-name .intro-cta { width: min(100%, 300px); min-height: 40px; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--web-v1-link-cta) 42%, transparent); border-radius: 15px; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-link-cta) 24%, var(--web-v1-link-panel)), color-mix(in srgb, var(--web-v1-bg-deep) 86%, var(--web-v1-link-cta) 14%)); color: color-mix(in srgb, var(--web-v1-completion-text) 98%, white); font: inherit; font-size: 0.82rem; font-weight: 900; letter-spacing: 0.10em; text-transform: uppercase; box-shadow: 0 14px 24px rgba(0, 0, 0, 0.24), 0 8px 14px color-mix(in srgb, var(--web-v1-link-cta) 12%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-completion-text) 10%, transparent), inset 0 -8px 16px rgba(0, 0, 0, 0.16); transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease, background 180ms ease; } .intro-panel-name .intro-cta::before { content: ""; position: absolute; inset: 1px; border-radius: 13px; background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-link-cta) 8%, transparent), transparent 28%, transparent 74%, color-mix(in srgb, var(--web-v1-link-cta) 5%, transparent)), linear-gradient(90deg, color-mix(in srgb, var(--web-v1-completion-text) 4%, transparent), transparent 18%, transparent 82%, color-mix(in srgb, var(--web-v1-completion-text) 3%, transparent)); pointer-events: none; } .intro-panel-name .intro-cta::after { content: ""; position: absolute; inset: auto 20px 11px; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--web-v1-link-cta) 28%, transparent), transparent); pointer-events: none; } .intro-panel-name .intro-cta:hover:not(:disabled), .intro-panel-name .intro-cta:focus-visible { transform: translate3d(0, -2px, 0); border-color: color-mix(in srgb, var(--web-v1-link-cta) 62%, transparent); color: color-mix(in srgb, var(--web-v1-completion-text) 92%, white); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-link-cta) 32%, var(--web-v1-link-panel)), color-mix(in srgb, var(--web-v1-bg-deep) 82%, var(--web-v1-link-cta) 18%)); box-shadow: 0 18px 30px rgba(0, 0, 0, 0.30), 0 10px 18px color-mix(in srgb, var(--web-v1-link-cta) 16%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-completion-text) 14%, transparent), inset 0 -10px 18px rgba(0, 0, 0, 0.18); } .intro-panel-name .intro-cta:focus-visible { outline: none; } @media (max-width: 760px) { .intro-panel-name { width: min(100%, calc(100vw - 24px)); padding: 20px 18px 18px; gap: 9px; } .intro-name-title { max-width: none; font-size: clamp(1.6rem, 7vw, 2.05rem); } .intro-copy { max-width: 26ch; font-size: 11px; } .intro-field-label, .intro-input { width: min(100%, 204px); } .intro-input { min-height: 36px; font-size: 13px; } .intro-panel-name .intro-cta { width: min(100%, 276px); min-height: 38px; font-size: 0.78rem; letter-spacing: 0.08em; } } /* config-driven intro layout vars */ :root { --aim-lab-enabled: 0; --aim-lab-enabled: 0; --license-page-margin-top: 160px; --intro-start-button-offset-y: -25px; --intro-start-button-width: 360px; --intro-start-button-min-height: 50px; --intro-name-entry-max-width: 600px; } /* config-driven intro layout */ .intro-start-panel { transform: translate3d(0, var(--intro-start-button-offset-y), 0) !important; } .intro-start-panel .intro-cta { width: min(var(--intro-start-button-width), 72vw) !important; max-width: var(--intro-start-button-width) !important; min-height: var(--intro-start-button-min-height) !important; } .intro-panel-name { max-width: var(--intro-name-entry-max-width) !important; } @media (max-width: 760px) { .intro-start-panel { transform: translate3d(0, calc(var(--intro-start-button-offset-y) + 6px), 0) !important; } .intro-start-panel .intro-cta { width: min(calc(var(--intro-start-button-width) - 60px), 74vw) !important; max-width: min(calc(var(--intro-start-button-width) - 60px), 74vw) !important; min-height: calc(var(--intro-start-button-min-height) - 4px) !important; } } /* start license button only */ .intro-start-panel { display: flex !important; justify-content: center !important; align-items: center !important; transform: translate3d(-3px, -30px, 0) !important; } .intro-start-panel .intro-cta { width: min(360px, 72vw) !important; max-width: 360px !important; min-height: 50px !important; padding: 0 18px !important; border-radius: 16px !important; font-size: 0.92rem !important; letter-spacing: 0.12em !important; margin-left: auto !important; margin-right: auto !important; } @media (max-width: 760px) { .intro-start-panel { transform: translate3d(-3px, -24px, 0) !important; } .intro-start-panel .intro-cta { width: min(300px, 74vw) !important; max-width: 300px !important; min-height: 46px !important; padding: 0 16px !important; font-size: 0.86rem !important; letter-spacing: 0.10em !important; } } /* name-entry input refine: smaller, left-aligned, real form style */ .intro-panel-name .intro-field-label { width: min(100%, 260px) !important; text-align: left !important; justify-self: center !important; } .intro-panel-name .intro-input { width: min(100%, 260px) !important; min-height: 44px !important; padding: 0 14px !important; font-size: 15px !important; font-weight: 600 !important; text-align: left !important; justify-self: center !important; } .intro-panel-name .intro-input::placeholder { text-align: left !important; color: rgba(255, 240, 180, 0.34) !important; } .intro-panel-name .intro-cta { width: min(100%, 360px) !important; min-height: 44px !important; font-size: 0.88rem !important; letter-spacing: 0.10em !important; } @media (max-width: 760px) { .intro-panel-name .intro-field-label { width: min(100%, 220px) !important; } .intro-panel-name .intro-input { width: min(100%, 220px) !important; min-height: 42px !important; font-size: 14px !important; } .intro-panel-name .intro-cta { width: min(100%, 300px) !important; min-height: 42px !important; font-size: 0.82rem !important; } } /* name-entry: input + button smaller in parallel */ .intro-panel-name .intro-field-label { width: min(100%, 232px) !important; } .intro-panel-name .intro-input { width: min(100%, 232px) !important; min-height: 40px !important; padding: 0 12px !important; font-size: 14px !important; } .intro-panel-name .intro-cta { width: min(100%, 320px) !important; min-height: 40px !important; padding: 0 16px !important; font-size: 0.84rem !important; letter-spacing: 0.09em !important; } @media (max-width: 760px) { .intro-panel-name .intro-field-label { width: min(100%, 206px) !important; } .intro-panel-name .intro-input { width: min(100%, 206px) !important; min-height: 38px !important; font-size: 13px !important; } .intro-panel-name .intro-cta { width: min(100%, 272px) !important; min-height: 38px !important; font-size: 0.78rem !important; letter-spacing: 0.08em !important; } } /* intro background fixed via real DOM layer */ .intro-layer { overflow: visible !important; } .intro-backdrop { position: fixed !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; } .intro-background { position: absolute !important; inset: 0 !important; } .intro-shell { position: relative !important; z-index: 1 !important; } .app-shell, #license-app { position: relative; z-index: 1; } /* license background fixed via single body layer */ body:not([data-app-view="intro_blackout"]):not([data-app-view="intro_reveal"]):not([data-app-view="intro_hold"]):not([data-app-view="intro_ready"]):not([data-app-view="name_entry"]) { background: linear-gradient(rgba(4, 7, 14, 0.18), rgba(6, 8, 14, 0.28)), var(--web-v1-bg) !important; } .page { position: relative; z-index: 1; } /* IA refactor overrides */ .page { padding: 10px; } .hero { margin-bottom: 10px; padding: 10px 12px; } .hero-shell { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px; padding: 16px 18px; } .hero-copy { gap: 8px; } .hero-subtitle { max-width: 60ch; font-size: 14px; line-height: 1.45; color: rgba(234, 225, 200, 0.8); } .status-strip { justify-self: end; padding: 0; border: none; background: transparent; box-shadow: none; } .chip-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .chip.chip-meta { min-width: 136px; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--web-v1-border) 22%, transparent); background: color-mix(in srgb, var(--web-v1-panel) 74%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 3%, transparent); } .chip.chip-meta .chip-label { margin-bottom: 4px; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--web-v1-text-soft) 62%, transparent); } .chip.chip-meta .chip-value { font-size: 13px; line-height: 1.3; color: color-mix(in srgb, var(--web-v1-text) 92%, white); } .main-grid { grid-template-columns: minmax(228px, 252px) minmax(0, 1fr) minmax(206px, 224px); gap: 12px; align-items: start; } .panel-stage { padding: 16px; } .panel-rail, .panel-progress { gap: 10px; } .rail-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--web-v1-border) 24%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-card-strong) 96%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 78%, var(--web-v1-bg-deep))); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2%, transparent); } .rail-toggle-copy { display: grid; gap: 3px; text-align: left; } .rail-toggle-label { font-size: 13px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--web-v1-text) 90%, white); } .rail-toggle-summary { font-size: 13px; line-height: 1.35; color: color-mix(in srgb, var(--web-v1-text-soft) 70%, transparent); } .rail-toggle-icon { width: 12px; height: 12px; display: inline-flex; align-items: center; justify-content: center; transform: rotate(0deg); transition: transform 180ms ease; } .rail-toggle-icon::before { content: ""; width: 8px; height: 8px; border-right: 2px solid color-mix(in srgb, var(--web-v1-focus) 84%, transparent); border-bottom: 2px solid color-mix(in srgb, var(--web-v1-focus) 84%, transparent); transform: rotate(45deg) translateY(-1px); } .rail-toggle[aria-expanded="true"] .rail-toggle-icon { transform: rotate(180deg); } .module-list-shell { display: grid; gap: 10px; padding: 10px; border: 1px solid color-mix(in srgb, var(--web-v1-border) 14%, transparent); border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-panel-strong) 90%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 86%, var(--web-v1-bg-deep))); } .module-list-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .module-list-heading, .module-list-meta { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; } .module-list-heading { color: color-mix(in srgb, var(--web-v1-text) 78%, transparent); } .module-list-meta { color: rgba(214, 206, 180, 0.58); } .module-list { padding: 0; border: none; border-radius: 0; background: none; box-shadow: none; max-height: min(54vh, 560px); overflow: auto; gap: 8px; } .module-item { min-height: 88px; min-height: 0; gap: 6px; padding: 10px 11px; border-radius: 12px; } .module-item-title { font-size: 17px; } .module-item-status { font-size: 14px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(214, 206, 180, 0.74); } .module-item.active .module-item-status { color: rgba(255, 235, 185, 0.84); } .module-item-meta { display: none; } } .main-stage { gap: 14px; } .inner-card { padding: 22px 24px 20px; border-radius: 18px; } .stage-title, .question-title, #feedback-title { font-size: clamp(2rem, 3.2vw, 2.75rem); } .stage-body { max-width: 56ch; font-size: 17px; line-height: 1.55; } .detail-box { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px 14px; border-radius: 14px; background: linear-gradient(180deg, rgba(11, 15, 21, 0.76), rgba(8, 11, 16, 0.66)); } #stage-details { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; } .detail-line { min-height: 0; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.4; } .lesson-summary-box { padding: 14px 16px; border-radius: 16px; } .lesson-summary-header { gap: 6px; } .lesson-summary-intro { font-size: 13px; line-height: 1.45; color: rgba(214, 206, 180, 0.72); } .lesson-summary-list { grid-template-columns: 1fr !important; gap: 10px; } .lesson-summary-item { min-height: 0; display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; } .lesson-summary-title { font-size: 14px; font-weight: 800; line-height: 1.4; } .lesson-summary-meta { font-size: 12px; line-height: 1.4; color: rgba(214, 206, 180, 0.72); } .question-panel, .feedback-panel { padding: 16px 18px; border-radius: 16px; } .question-panel { gap: 12px; } .question-prompt { font-size: 18px; line-height: 1.55; color: rgba(240, 246, 251, 0.92); } .question-helper { font-size: 11px; letter-spacing: 0.08em; } .answer-list { gap: 8px; } .answer-item { padding: 14px 16px; border-radius: 12px; } .answer-title { font-size: 15px; line-height: 1.45; } .panel-progress { padding: 14px 12px; } .progress-copy { margin-bottom: 4px; font-size: 11px; line-height: 1.2; color: rgba(214, 206, 180, 0.74); } .step-list { padding-left: 16px; gap: 8px; } .step-card { padding: 10px 10px 10px 14px; border-radius: 12px; } .step-card::before { left: -16px; top: 14px; } .step-name { font-size: 11px; } .step-detail { font-size: 11px; line-height: 1.35; } .actionbar { gap: 12px; margin-top: 12px; padding: 10px 12px; } .actionbar-copy { flex: 1 1 auto; } .actionbar-summary { font-size: 11px; color: rgba(214, 206, 180, 0.72); } .actionbar-buttons { gap: 8px; flex: 0 0 auto; } .actionbar-buttons button.primary { min-width: 220px; } .completion-panel { gap: 14px; padding: 18px; border-radius: 18px; } .completion-visual { min-height: 96px; opacity: 0.72; } .completion-note-list { gap: 8px; } .completion-note { padding: 11px 12px; border-radius: 12px; } .page.completion-active .panel-rail, .page.completion-active .panel-progress { opacity: 0.16; pointer-events: none; filter: saturate(0.6); } .page.completion-active .module-list-shell { display: none !important; } @media (max-width: 1280px) { .hero-shell { grid-template-columns: 1fr; } .status-strip { justify-self: start; } .chip-row { justify-content: flex-start; } .main-grid { grid-template-columns: 1fr; grid-template-areas: "main" "left" "right"; } .module-list { max-height: 320px; } .actionbar { flex-direction: column; align-items: stretch; } .actionbar-buttons { justify-content: stretch; width: 100%; } .actionbar-buttons button, .actionbar-buttons button.primary { width: 100%; max-width: none; } } @media (max-width: 760px) { .page { width: min(100vw - 12px, 100%); margin-top: max(90px, calc(var(--license-page-margin-top) * 0.55)); } .hero-shell, .inner-card, .detail-box, .lesson-summary-box, .question-panel, .feedback-panel, .completion-panel { padding-left: 14px; padding-right: 14px; } .hero-title { font-size: clamp(2.5rem, 12vw, 4.2rem); } .stage-title, .question-title, #feedback-title { font-size: clamp(1.7rem, 7vw, 2.3rem); } .status-strip { width: 100%; } .chip-row { width: 100%; } .chip.chip-meta { flex: 1 1 140px; } .module-list { max-height: 260px; } .completion-visual { min-height: 72px; } } .focus-card { display: none !important; } .panel-rail { gap: 12px !important; } .module-list-shell { margin-top: 2px !important; } .rail-toggle { min-height: 78px !important; padding: 16px 18px !important; border-radius: 14px !important; border: 1px solid color-mix(in srgb, var(--web-v1-border) 46%, transparent) !important; background: linear-gradient( 180deg, color-mix(in srgb, var(--web-v1-card-strong) 96%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 82%, var(--web-v1-bg-deep)) ) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--web-v1-text) 3%, transparent), 0 14px 26px rgba(0, 0, 0, 0.26) !important; } .rail-toggle-copy { display: flex !important; align-items: center; justify-content: center; gap: 6px !important; } .rail-toggle-label { display: block; width: 100%; text-align: center; color: color-mix(in srgb, var(--web-v1-text) 96%, white 4%) !important; font-size: 0.94rem !important; font-weight: 900 !important; line-height: 1.1 !important; letter-spacing: 0.08em !important; text-transform: uppercase; } .rail-toggle-summary { display: none !important; } .rail-toggle-icon { border-color: color-mix(in srgb, var(--web-v1-border) 40%, transparent) !important; background: color-mix(in srgb, var(--web-v1-bg-deep) 72%, transparent) !important; } .rail-toggle:hover, .rail-toggle:focus-visible { border-color: color-mix(in srgb, var(--web-v1-accent) 72%, white 28%) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--web-v1-accent) 10%, transparent), 0 0 14px color-mix(in srgb, var(--web-v1-accent) 18%, transparent), 0 14px 28px rgba(0, 0, 0, 0.3) !important; } .module-item { min-height: 84px !important; padding: 14px !important; border-radius: 14px !important; } .module-item-title { font-size: 18px !important; line-height: 1.12 !important; font-weight: 900 !important; } .module-item-status { font-size: 15px !important; line-height: 1.18 !important; font-weight: 800 !important; letter-spacing: 0.01em !important; text-transform: none !important; } .actionbar-buttons button.primary { position: relative; } :root { --guided-glow-border: var(--web-v1-action-primary-line); --guided-glow-start: var(--web-v1-action-primary-start); --guided-glow-end: var(--web-v1-action-primary-end); --guided-glow-text: #fff4d1; --guided-glow-shadow: var(--web-v1-action-primary-shadow); --guided-glow-inner-bar: rgba(234, 201, 123, 0.5); --guided-glow-inner-line: rgba(255, 236, 191, 0.14); --guided-glow-hover-border: rgba(234, 201, 123, 0.92); --guided-glow-hover-inner-bar: rgba(255, 225, 148, 0.6); --guided-glow-hover-inner-line: rgba(255, 236, 191, 0.18); --guided-glow-hover-shadow: 0 14px 24px rgba(74, 45, 10, 0.32); } button.primary { border-color: var(--guided-glow-border) !important; background: linear-gradient(180deg, var(--guided-glow-start), var(--guided-glow-end)), linear-gradient(90deg, rgba(255, 236, 191, 0.12), transparent 60%) !important; color: var(--guided-glow-text) !important; box-shadow: inset 4px 0 0 var(--guided-glow-inner-bar), inset 0 0 0 1px var(--guided-glow-inner-line), var(--guided-glow-shadow) !important; } button.primary:hover:not(:disabled), button.primary:focus-visible { border-color: var(--guided-glow-hover-border) !important; box-shadow: inset 4px 0 0 var(--guided-glow-hover-inner-bar), inset 0 0 0 1px var(--guided-glow-hover-inner-line), var(--guided-glow-hover-shadow) !important; } body.rail-guided .actionbar-buttons button, body.rail-guided .actionbar-buttons button.primary, body.module-guided .actionbar-buttons button, body.module-guided .actionbar-buttons button.primary { border-color: color-mix(in srgb, var(--web-v1-border) 26%, transparent) !important; background: linear-gradient( 180deg, color-mix(in srgb, var(--web-v1-card-strong) 96%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 74%, var(--web-v1-bg-deep)) ) !important; color: color-mix(in srgb, var(--web-v1-text) 92%, white 8%) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--web-v1-text) 4%, transparent), 0 8px 16px rgba(0, 0, 0, 0.18) !important; filter: none !important; } body.rail-guided .actionbar-buttons button.primary::before, body.rail-guided .actionbar-buttons button::before, body.rail-guided .actionbar-buttons button.primary::after, body.rail-guided .actionbar-buttons button::after, body.module-guided .actionbar-buttons button.primary::before, body.module-guided .actionbar-buttons button::before, body.module-guided .actionbar-buttons button.primary::after, body.module-guided .actionbar-buttons button::after { opacity: 0 !important; } body.rail-guided .rail-toggle { border-color: var(--guided-glow-border) !important; background: linear-gradient(180deg, var(--guided-glow-start), var(--guided-glow-end)), linear-gradient(90deg, rgba(255, 236, 191, 0.12), transparent 60%) !important; box-shadow: inset 4px 0 0 var(--guided-glow-inner-bar), inset 0 0 0 1px var(--guided-glow-inner-line), var(--guided-glow-shadow) !important; } body.rail-guided .rail-toggle-label { color: var(--guided-glow-text) !important; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.42), 0 0 8px color-mix(in srgb, var(--web-v1-accent) 22%, transparent), 0 0 16px color-mix(in srgb, var(--web-v1-accent) 12%, transparent) !important; } body.module-guided .rail-toggle, body.action-guided .rail-toggle { border-color: color-mix(in srgb, var(--web-v1-border) 42%, transparent) !important; background: linear-gradient( 180deg, color-mix(in srgb, var(--web-v1-card-strong) 96%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 82%, var(--web-v1-bg-deep)) ) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--web-v1-text) 3%, transparent), 0 10px 18px rgba(0, 0, 0, 0.18) !important; } body.module-guided .rail-toggle-label, body.action-guided .rail-toggle-label { color: color-mix(in srgb, var(--web-v1-text-soft) 86%, white 14%) !important; text-shadow: none !important; } body.module-guided .module-item.guided-target { border-color: var(--guided-glow-border) !important; background: linear-gradient(180deg, var(--guided-glow-start), var(--guided-glow-end)), linear-gradient(90deg, rgba(255, 236, 191, 0.12), transparent 60%) !important; box-shadow: inset 4px 0 0 var(--guided-glow-inner-bar), inset 0 0 0 1px var(--guided-glow-inner-line), var(--guided-glow-shadow) !important; } body.module-guided .module-item.guided-target .module-item-title, body.module-guided .module-item.guided-target .module-item-status { color: var(--guided-glow-text) !important; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.42) !important; } body.action-guided .actionbar-buttons button.primary { border-color: var(--guided-glow-border) !important; box-shadow: inset 4px 0 0 var(--guided-glow-inner-bar), inset 0 0 0 1px var(--guided-glow-inner-line), 0 0 14px color-mix(in srgb, var(--web-v1-accent) 28%, transparent), 0 0 30px color-mix(in srgb, var(--web-v1-accent) 18%, transparent), 0 18px 30px rgba(0, 0, 0, 0.3) !important; } /* Web UX direction: guided, calmer license flow */ .intro-panel-name { width: min(520px, calc(100vw - 28px)) !important; padding: 24px 28px 26px !important; gap: 12px !important; border-radius: 18px !important; } .intro-name-title { font-size: clamp(1.55rem, 3vw, 2.2rem) !important; line-height: 1.05 !important; } .intro-copy { max-width: 34ch !important; font-size: 0.92rem !important; line-height: 1.4 !important; } .intro-panel-name .intro-cta { width: min(100%, 360px) !important; min-height: 58px !important; } @media (min-width: 981px) { .main-grid { grid-template-columns: minmax(220px, 250px) minmax(420px, 1fr) minmax(218px, 250px) !important; grid-template-areas: "left main right" !important; gap: 12px !important; } .hero-shell { grid-template-columns: minmax(0, 1fr) minmax(180px, 260px) !important; } .panel-stage { min-height: 520px !important; } } .panel-stage { padding: 14px !important; background: linear-gradient(180deg, rgba(8, 12, 18, 0.94), rgba(4, 6, 10, 0.9)) !important; } .inner-card { min-height: 132px !important; padding: 18px 20px !important; } .detail-box { grid-template-columns: minmax(110px, 0.42fr) minmax(0, 1fr) !important; align-items: start !important; } #stage-details { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .lesson-summary-box { opacity: 0.86 !important; } .panel-progress { position: sticky !important; top: 12px !important; padding: 14px !important; } .progress-copy { margin: 4px 0 10px !important; font-size: 12px !important; line-height: 1.35 !important; } .step-list { gap: 10px !important; } .step-card { min-height: 62px !important; padding: 12px 12px 12px 15px !important; } .step-card.active { transform: translateX(2px); } .step-name { font-size: 12px !important; line-height: 1.2 !important; } .step-detail { font-size: 12px !important; } .actionbar { position: sticky !important; bottom: 10px !important; z-index: 20 !important; max-width: min(760px, calc(100vw - 32px)) !important; margin: 12px auto 0 !important; justify-content: center !important; background: linear-gradient(180deg, rgba(7, 10, 15, 0.96), rgba(4, 6, 10, 0.94)) !important; } .actionbar-copy { flex: 0 1 260px !important; } .actionbar-label { display: none !important; } .actionbar-summary { font-size: 12px !important; line-height: 1.3 !important; } .actionbar-buttons button.primary { min-width: 250px !important; min-height: 48px !important; } @media (max-width: 980px) { .main-grid { grid-template-columns: 1fr !important; grid-template-areas: "main" "right" "left" !important; } #stage-details { grid-template-columns: 1fr !important; } } /* Web UX correction: keep sticky CTA compact at 1280px layouts */ .actionbar { align-items: center !important; flex-direction: row !important; min-height: 68px !important; height: auto !important; } .actionbar-copy { flex: 0 0 auto !important; height: auto !important; } .actionbar-buttons { flex: 0 0 auto !important; } @media (max-width: 760px) { .actionbar { flex-direction: column !important; align-items: stretch !important; } } /* Web functional fix: let intro controls receive browser clicks */ .intro-shell { pointer-events: auto !important; } .intro-start-panel, .intro-panel, .intro-cta, .intro-input, .intro-warmup-button { pointer-events: auto !important; } /* Intro briefing between start and name entry */ body[data-app-view="intro_briefing"] { background: #000 !important; } body[data-app-view="intro_briefing"]::before { opacity: 0.2 !important; } body[data-app-view="intro_briefing"] .intro-background { opacity: 1 !important; transform: translate3d(0, 0, 0) scale(1) !important; filter: brightness(0.94) saturate(1.04) !important; } body[data-app-view="intro_briefing"] #roar-view-background-layer { opacity: 0 !important; background-image: none !important; } body[data-app-view="intro_briefing"] .intro-shell { align-items: center !important; justify-items: center !important; padding: 24px !important; } body[data-app-view="intro_briefing"] .intro-start-panel, body[data-app-view="intro_briefing"] .intro-panel-name { display: none !important; } body[data-app-view="intro_briefing"] .intro-panel-briefing { display: grid !important; } .intro-panel-briefing { width: min(720px, calc(100vw - 32px)) !important; max-width: 720px !important; gap: 16px !important; padding: 28px 30px 30px !important; border: 1px solid color-mix(in srgb, var(--web-v1-link-cta) 20%, transparent) !important; border-radius: 18px !important; background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-link-panel) 91%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-link-panel) 74%, var(--web-v1-bg-deep))), color-mix(in srgb, var(--web-v1-link-panel) 82%, var(--web-v1-bg-deep)) !important; box-shadow: 0 24px 54px rgba(0, 0, 0, 0.42), inset 0 1px 0 color-mix(in srgb, var(--web-v1-completion-text) 6%, transparent) !important; color: var(--web-v1-completion-text) !important; text-align: left !important; } .intro-briefing-eyebrow { margin: 0 !important; font-size: 0.72rem !important; font-weight: 900 !important; letter-spacing: 0 !important; text-transform: uppercase !important; color: color-mix(in srgb, var(--web-v1-link-cta) 78%, var(--web-v1-completion-text)) !important; } .intro-briefing-title { margin: 0 !important; max-width: 17ch !important; font-size: 2rem !important; line-height: 1.06 !important; letter-spacing: 0 !important; color: var(--web-v1-completion-text) !important; } .intro-briefing-copy { margin: 0 !important; max-width: 68ch !important; font-size: 0.95rem !important; line-height: 1.55 !important; color: color-mix(in srgb, var(--web-v1-completion-text) 78%, transparent) !important; } .intro-briefing-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } .intro-briefing-card { display: grid !important; gap: 6px !important; min-height: 112px !important; padding: 14px !important; border: 1px solid color-mix(in srgb, var(--web-v1-link-cta) 16%, transparent) !important; border-radius: 8px !important; background: color-mix(in srgb, var(--web-v1-bg-deep) 62%, transparent) !important; } .intro-briefing-card-index { font-size: 0.72rem !important; font-weight: 900 !important; letter-spacing: 0 !important; color: color-mix(in srgb, var(--web-v1-link-cta) 82%, var(--web-v1-completion-text)) !important; } .intro-briefing-card h3 { margin: 0 !important; font-size: 1rem !important; line-height: 1.18 !important; letter-spacing: 0 !important; color: var(--web-v1-completion-text) !important; } .intro-briefing-card p { margin: 0 !important; font-size: 0.86rem !important; line-height: 1.42 !important; color: color-mix(in srgb, var(--web-v1-completion-text) 72%, transparent) !important; } .intro-briefing-actions { display: grid !important; grid-template-columns: minmax(128px, 0.34fr) minmax(0, 1fr) !important; gap: 10px !important; align-items: stretch !important; } .intro-briefing-button { min-height: 44px !important; padding: 0 16px !important; border-radius: 10px !important; font: inherit !important; font-size: 0.85rem !important; font-weight: 900 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .intro-briefing-button-primary { border: 1px solid color-mix(in srgb, var(--web-v1-link-cta) 48%, transparent) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-link-cta) 26%, var(--web-v1-link-panel)), color-mix(in srgb, var(--web-v1-bg-deep) 84%, var(--web-v1-link-cta) 16%)) !important; color: color-mix(in srgb, var(--web-v1-completion-text) 96%, white) !important; } .intro-briefing-button-secondary { border: 1px solid color-mix(in srgb, var(--web-v1-completion-text) 18%, transparent) !important; background: color-mix(in srgb, var(--web-v1-bg-deep) 72%, transparent) !important; color: color-mix(in srgb, var(--web-v1-completion-text) 76%, transparent) !important; } .intro-briefing-button:hover, .intro-briefing-button:focus-visible { border-color: color-mix(in srgb, var(--web-v1-link-cta) 66%, transparent) !important; outline: none !important; transform: translate3d(0, -1px, 0) !important; } .intro-panel-name .intro-input[aria-invalid="true"] { border-color: var(--web-v1-link-validation) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--web-v1-link-validation) 32%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2.5%, transparent) !important; } @media (max-width: 760px) { .intro-panel-briefing { width: min(100%, calc(100vw - 24px)) !important; padding: 22px 18px 20px !important; gap: 13px !important; } .intro-briefing-title { max-width: none !important; font-size: 1.55rem !important; } .intro-briefing-copy { font-size: 0.88rem !important; } .intro-briefing-grid, .intro-briefing-actions { grid-template-columns: 1fr !important; } .intro-briefing-card { min-height: auto !important; } } /* Web-only guided license rework */ body[data-app-view="name_entry"] .intro-shell { align-items: center !important; justify-items: center !important; padding: 24px !important; } body[data-app-view="name_entry"] .intro-start-panel { display: none !important; } .intro-panel-name { width: min(520px, calc(100vw - 32px)) !important; max-width: 520px !important; gap: 12px !important; padding: 28px 32px 30px !important; border-radius: 18px !important; text-align: center !important; } .intro-name-title { font-size: clamp(2rem, 5vw, 3rem) !important; letter-spacing: 0.06em !important; } .intro-copy { max-width: none !important; margin: 0 auto 4px !important; font-size: 14px !important; } .intro-field-label { text-align: left !important; } .intro-entry-actions { display: grid !important; gap: 10px !important; } #name-entry-submit.intro-cta { min-height: 62px !important; font-size: clamp(1.35rem, 3vw, 2rem) !important; letter-spacing: 0.14em !important; } #aim-lab-entry-button.intro-warmup-button { min-height: 42px !important; width: min(340px, 100%) !important; justify-self: center !important; } #name-entry-submit:disabled, #aim-lab-entry-button:disabled { cursor: not-allowed !important; opacity: 0.42 !important; filter: saturate(0.45) brightness(0.72) !important; box-shadow: none !important; } .panel-rail > .section-title { display: none !important; } .panel-rail .focus-card { display: none !important; } body[data-view="home"] .main-stage { align-content: center !important; justify-content: center !important; min-height: 360px !important; } body[data-view="home"] .inner-card { max-width: 560px !important; margin: 0 auto !important; text-align: center !important; } body[data-view="home"] .detail-box, body[data-view="home"] .lesson-summary-box { display: none !important; } .actionbar { justify-content: center !important; } body:not([data-view="exam"]) #license-app .actionbar { width: min(260px, calc(100% - 32px)) !important; margin: 12px 12px 0 auto !important; padding: 0 !important; justify-content: flex-end !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } body:not([data-view="exam"]) #license-app .actionbar::before, body:not([data-view="exam"]) #license-app .actionbar-copy { display: none !important; } body:not([data-view="exam"]) #license-app .actionbar-buttons { width: 100% !important; display: grid !important; grid-template-columns: 1fr !important; } .actionbar-copy { flex: 0 1 220px !important; } .actionbar-buttons button.primary { min-width: min(360px, calc(100vw - 48px)) !important; min-height: 54px !important; } .actionbar-buttons button.secondary { min-height: 42px !important; opacity: 0.78 !important; } .step-card .step-name { word-break: normal !important; } @media (max-width: 760px) { .intro-panel-name { padding: 24px 18px !important; } .actionbar-copy { display: none !important; } } /* ROAR LICENSE CLEAN FINAL 01 Finaler kontrollierter Override-Block. Keine alten Background-/Masken-/Responsive-Fix-Ketten mehr. Mapping: - Intro bleibt bestehendes welcome.jpg-System. - Lizenz: assets/lizenz.jpg über #roar-view-background-layer. - Completion/Danke: assets/danke.jpg über #roar-view-background-layer. - AIM-Mapping liegt in aim-arena-screen.css. */ #roar-view-background-layer { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 0 !important; display: block !important; pointer-events: none !important; background-color: #000 !important; background-repeat: no-repeat !important; background-size: cover !important; background-position: center top !important; opacity: 0 !important; } #app-shell { position: relative !important; z-index: 1 !important; } /* Intro nutzt weiterhin .intro-background / welcome.jpg. */ body[data-app-view="intro_blackout"] #roar-view-background-layer, body[data-app-view="intro_reveal"] #roar-view-background-layer, body[data-app-view="intro_hold"] #roar-view-background-layer, body[data-app-view="intro_ready"] #roar-view-background-layer, body[data-app-view="name_entry"] #roar-view-background-layer { opacity: 0 !important; background-image: none !important; } /* Lizenz-Hintergrund. */ body[data-app-view="license"] #roar-view-background-layer { opacity: 1 !important; background-image: url("../assets/lizenz.jpg") !important; } /* Danke-/Completion-Hintergrund. */ body[data-app-view="completion"] #roar-view-background-layer { opacity: 1 !important; background-image: url("../assets/danke.jpg") !important; } /* Globale Blenden im Lizenz-/Completion-View aus. */ body[data-app-view="license"], body[data-app-view="completion"] { background: #000 !important; } body[data-app-view="license"]::before, body[data-app-view="license"]::after, body[data-app-view="completion"]::before, body[data-app-view="completion"]::after { opacity: 0 !important; background: none !important; background-image: none !important; } /* App-Container darf das Bild nicht übermalen. */ body[data-app-view="license"] #license-app, body[data-app-view="license"] #license-app.page, body[data-app-view="completion"] #license-app, body[data-app-view="completion"] #license-app.page { background: transparent !important; background-image: none !important; background-color: transparent !important; backdrop-filter: none !important; } /* Page-Pseudolayer aus. */ body[data-app-view="license"] #license-app::before, body[data-app-view="license"] #license-app::after, body[data-app-view="license"] .page::before, body[data-app-view="license"] .page::after, body[data-app-view="completion"] #license-app::before, body[data-app-view="completion"] #license-app::after, body[data-app-view="completion"] .page::before, body[data-app-view="completion"] .page::after { opacity: 0 !important; background: none !important; background-image: none !important; } /* Desktop-Lizenzlayout bleibt stabil. Mobile wird später kontrolliert neu gebaut. */ @media (max-width: 1280px), (max-width: 980px), (max-width: 760px) { body[data-app-view="license"] #license-app.page { width: var(--web-v1-page-width) !important; max-width: var(--web-v1-page-width) !important; min-width: var(--web-v1-page-width) !important; margin: var(--license-page-margin-top) auto 12px !important; padding: var(--license-page-padding) !important; } body[data-app-view="license"] #license-app .hero-shell { grid-template-columns: minmax(0, 1.06fr) minmax(380px, 500px) !important; } body[data-app-view="license"] #license-app .main-grid { grid-template-columns: minmax(220px, 0.7fr) minmax(480px, 1.45fr) minmax(220px, 0.72fr) !important; grid-template-areas: "left main right" !important; align-items: start !important; } body[data-app-view="license"] #license-app .panel-rail, body[data-app-view="license"] #license-app .panel-left { grid-area: left !important; } body[data-app-view="license"] #license-app .panel-stage, body[data-app-view="license"] #license-app #main-stage.main-stage { grid-area: main !important; } body[data-app-view="license"] #license-app .panel-progress, body[data-app-view="license"] #license-app .panel-right { grid-area: right !important; } } /* Stage selbst transparent. Nur Karten bleiben lesbar. */ body[data-app-view="license"] #main-stage { background: transparent !important; background-image: none !important; background-color: transparent !important; backdrop-filter: none !important; box-shadow: none !important; } body[data-app-view="license"] .hero, body[data-app-view="license"] #main-stage > .inner-card, body[data-app-view="completion"] #completion-panel { background: rgba(3, 4, 7, 0.42) !important; background-image: none !important; backdrop-filter: blur(1px) !important; } body[data-app-view="license"] #main-stage > .inner-card::before { opacity: 0 !important; background: none !important; background-image: none !important; } /* Linker Modulzugang-Button: Orange ohne Glow. */ #module-rail-toggle.rail-toggle { border: 1px solid rgba(255,135,42,0.85) !important; background: linear-gradient(180deg, #ff7a18 0%, #e85a00 52%, #7a2600 100%) !important; box-shadow: inset 3px 0 0 rgba(255,135,42,0.06), inset 0 0 0 1px rgba(255,244,209,0.08) !important; } #module-rail-toggle.rail-toggle .rail-toggle-label { color: #fff4d1 !important; text-shadow: 0 1px 0 rgba(0,0,0,0.42) !important; } #module-rail-toggle.rail-toggle .rail-toggle-summary { color: rgba(255,244,209,0.86) !important; } /* ROAR LICENSE OUTER FRAME GLASS 01 Nur der große äußere Lizenzkasten bekommt eine dezente schwarze Glas-Blende. Das Hintergrundbild soll durchscheinen. */ body[data-app-view="license"] #license-app.page { background: rgba(0, 0, 0, 0.28) !important; background-image: none !important; background-color: rgba(0, 0, 0, 0.28) !important; backdrop-filter: blur(1.5px) !important; -webkit-backdrop-filter: blur(1.5px) !important; } body[data-app-view="license"] #license-app.page::before, body[data-app-view="license"] #license-app.page::after, body[data-app-view="license"] #license-app::before, body[data-app-view="license"] #license-app::after { opacity: 0 !important; background: none !important; background-image: none !important; } /* ROAR LICENSE EXAM STATUS STRIP REMOVE 02 Entfernt nur die Prüfleiste mit Fragen-/Antworten-Status. Keine Login-, Prüfungs- oder Runtime-Logik ändern. */ body[data-app-view="license"] #license-app .exam-status-strip, body[data-app-view="license"] #license-app .exam-progress-strip, body[data-app-view="license"] #license-app .question-status-strip, body[data-app-view="license"] #license-app .question-progress-strip, body[data-app-view="license"] #license-app .stage-status-strip, body[data-app-view="license"] #license-app .stage-progress-strip, body[data-app-view="license"] #license-app .briefing-scoreboard-box { display: none !important; } body[data-app-view="license"] #license-app .main-stage .inner-card { row-gap: 12px !important; } /* ROAR LICENSE QUESTION PROMPT FOCUS 01 Hebt nur den eigentlichen Fragetext hervor. Keine Antwortoptionen, keine Prüfungslogik, keine Header-/Statusboxen. */ body[data-app-view="license"] #license-app #question-prompt { display: block !important; margin: 12px 0 16px !important; padding: 18px 20px 18px 22px !important; border-left: 5px solid rgba(255, 112, 32, 0.96) !important; border-radius: 16px !important; background: rgba(0, 0, 0, 0.58) !important; background-image: linear-gradient(90deg, rgba(255, 112, 32, 0.14), rgba(0, 0, 0, 0) 38%) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 14px 28px rgba(0, 0, 0, 0.28) !important; color: #fff4d1 !important; font-size: clamp(1.25rem, 2vw, 1.65rem) !important; font-weight: 850 !important; line-height: 1.34 !important; letter-spacing: 0.01em !important; } /* ROAR LOGIN BRIDGE + MEMBER HUB 01 */ body[data-app-view="intro_briefing"], body[data-app-view="login_entry"], body[data-app-view="member_hub"] { background: #000 !important; } body[data-app-view="intro_briefing"]::before, body[data-app-view="login_entry"]::before, body[data-app-view="member_hub"]::before { opacity: 0.14 !important; } body[data-app-view="intro_briefing"] .intro-background, body[data-app-view="login_entry"] .intro-background, body[data-app-view="member_hub"] .intro-background { opacity: 1 !important; transform: translate3d(0, 0, 0) scale(1) !important; filter: brightness(0.78) saturate(1.02) !important; } body[data-app-view="intro_briefing"] #roar-view-background-layer, body[data-app-view="login_entry"] #roar-view-background-layer, body[data-app-view="member_hub"] #roar-view-background-layer { opacity: 0 !important; background-image: none !important; } body[data-app-view="intro_ready"] .intro-start-panel { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; justify-items: stretch !important; } .intro-secondary-cta, .intro-panel-login .intro-warmup-button, .member-hub-nav-button { font: inherit !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .intro-secondary-cta { min-height: 44px !important; width: min(320px, 68vw) !important; justify-self: center !important; padding: 0 18px !important; border: 1px solid rgba(255, 244, 209, 0.26) !important; border-radius: 8px !important; background: rgba(4, 7, 14, 0.52) !important; color: rgba(255, 244, 209, 0.86) !important; font-size: 0.9rem !important; font-weight: 850 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 28px rgba(0, 0, 0, 0.26) !important; cursor: pointer !important; } .intro-secondary-cta:hover:not(:disabled), .intro-secondary-cta:focus-visible { border-color: rgba(255, 122, 24, 0.74) !important; color: #fff4d1 !important; outline: none !important; } .intro-field-label-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .intro-name-instruction, .intro-login-title, .intro-login-copy, .intro-login-demo-note { letter-spacing: 0 !important; } .intro-name-instruction { max-width: 27ch !important; margin: 0 auto 4px !important; color: #fff4d1 !important; font-size: 1rem !important; font-weight: 850 !important; line-height: 1.35 !important; text-transform: uppercase !important; } .intro-panel-name .intro-input, .intro-panel-login .intro-input { width: min(100%, 300px) !important; min-height: 44px !important; border-radius: 8px !important; text-transform: none !important; } .intro-panel-name .intro-input::placeholder, .intro-panel-login .intro-input::placeholder { color: rgba(255, 240, 180, 0.48) !important; text-transform: uppercase !important; } .intro-panel-name .intro-cta, .intro-panel-login .intro-cta { min-height: 48px !important; width: min(100%, 320px) !important; border-radius: 8px !important; font-size: 0.98rem !important; letter-spacing: 0 !important; } #aim-lab-entry-button.intro-warmup-button, #login-back-button.intro-warmup-button { min-height: 42px !important; width: min(100%, 320px) !important; border-radius: 8px !important; letter-spacing: 0 !important; } body[data-app-view="login_entry"] .intro-shell, body[data-app-view="member_hub"] .intro-shell { align-items: center !important; justify-items: center !important; padding: 24px !important; } .intro-panel-login { width: min(520px, calc(100vw - 32px)) !important; max-width: 520px !important; gap: 12px !important; padding: 28px 32px 30px !important; border-radius: 8px !important; text-align: center !important; } .intro-login-title { margin: 0 !important; color: #fff4d1 !important; font-size: 1.9rem !important; font-weight: 900 !important; line-height: 1.1 !important; } .intro-login-copy, .intro-login-demo-note { margin: 0 auto !important; max-width: 34ch !important; font-size: 0.92rem !important; line-height: 1.45 !important; color: rgba(255, 244, 209, 0.82) !important; } .intro-login-demo-note { color: rgba(255, 183, 96, 0.86) !important; font-size: 0.82rem !important; } .intro-panel-login .intro-input[aria-invalid="true"] { border-color: var(--web-v1-link-validation) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--web-v1-link-validation) 32%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2.5%, transparent) !important; } .member-hub { width: min(1180px, calc(100vw - 32px)) !important; min-height: min(680px, calc(100vh - 48px)) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(210px, 260px) !important; gap: 18px !important; align-self: center !important; justify-self: center !important; color: #fff4d1 !important; } .member-hub.hidden { display: none !important; } .member-hub-content, .member-hub-nav { border: 1px solid rgba(255, 122, 24, 0.22) !important; border-radius: 8px !important; background: rgba(4, 7, 14, 0.74) !important; box-shadow: 0 24px 54px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; } .member-hub-content { display: grid !important; align-content: center !important; gap: 14px !important; padding: 34px !important; } .member-hub-eyebrow, .member-hub-card-label { margin: 0 !important; color: rgba(255, 122, 24, 0.9) !important; font-size: 0.76rem !important; font-weight: 900 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .member-hub-title { margin: 0 !important; color: #fff4d1 !important; font-size: 2.4rem !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; } .member-hub-intro, .member-hub-copy, .member-hub-notice { margin: 0 !important; max-width: 66ch !important; color: rgba(255, 244, 209, 0.84) !important; font-size: 1rem !important; line-height: 1.55 !important; letter-spacing: 0 !important; } .member-hub-intro { color: #fff4d1 !important; font-weight: 800 !important; } .member-hub-card-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin-top: 6px !important; } .member-hub-card { min-height: 116px !important; display: grid !important; align-content: space-between !important; gap: 14px !important; padding: 18px !important; border: 1px solid rgba(255, 244, 209, 0.12) !important; border-radius: 8px !important; background: rgba(15, 18, 24, 0.78) !important; } .member-hub-card strong { color: #fff4d1 !important; font-size: 1rem !important; line-height: 1.35 !important; letter-spacing: 0 !important; } .member-hub-notice { min-height: 24px !important; color: rgba(255, 183, 96, 0.9) !important; } .member-hub-nav { display: grid !important; align-content: start !important; gap: 8px !important; padding: 14px !important; } .member-hub-nav-button { min-height: 44px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 10px !important; padding: 0 12px !important; border: 1px solid rgba(255, 244, 209, 0.12) !important; border-radius: 8px !important; background: rgba(10, 14, 20, 0.66) !important; color: rgba(255, 244, 209, 0.8) !important; font-size: 0.84rem !important; font-weight: 850 !important; text-align: left !important; cursor: pointer !important; } .member-hub-nav-button span { color: rgba(255, 183, 96, 0.72) !important; font-size: 0.68rem !important; font-weight: 750 !important; text-transform: none !important; } .member-hub-nav-button.active { border-color: rgba(255, 122, 24, 0.72) !important; background: rgba(255, 122, 24, 0.18) !important; color: #fff4d1 !important; } .member-hub-nav-button.locked { color: rgba(255, 244, 209, 0.58) !important; } .member-hub-nav-button.logout { margin-top: 8px !important; border-color: rgba(255, 112, 32, 0.62) !important; color: #fff4d1 !important; } .member-hub-nav-button:hover, .member-hub-nav-button:focus-visible { border-color: rgba(255, 122, 24, 0.7) !important; outline: none !important; } @media (max-width: 860px) { .member-hub { grid-template-columns: 1fr !important; min-height: auto !important; } .member-hub-nav { grid-row: 2 !important; } .member-hub-card-grid { grid-template-columns: 1fr !important; } .member-hub-content { padding: 24px !important; } } @media (max-width: 760px) { body[data-app-view="intro_ready"] .intro-start-panel { gap: 10px !important; } .intro-secondary-cta { width: min(280px, 74vw) !important; min-height: 42px !important; } .intro-name-instruction { font-size: 0.94rem !important; } .member-hub { width: min(100%, calc(100vw - 24px)) !important; } } /* Close the legacy 1280px media wrapper before the consolidated Entry system. */ } /* ROAR ENTRY UI SYSTEM 02 Single visual system for start, briefing, name entry, login, and member hub. Keeps runtime IDs and license/AIM flow logic untouched. */ :root { --entry-surface: rgba(4, 7, 13, 0.78); --entry-surface-strong: rgba(3, 5, 10, 0.9); --entry-surface-soft: rgba(12, 16, 22, 0.7); --entry-border: rgba(255, 112, 32, 0.34); --entry-border-soft: rgba(255, 244, 209, 0.13); --entry-text: #fff4d1; --entry-text-soft: rgba(255, 244, 209, 0.78); --entry-text-muted: rgba(255, 244, 209, 0.58); --entry-cyan: #3cc3bf; --entry-orange: #ff7020; --entry-panel-radius: 12px; --entry-card-radius: 8px; --entry-control-radius: 8px; --entry-control-height: 48px; --entry-control-height-compact: 44px; --entry-panel-shadow: 0 26px 62px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 244, 209, 0.045); --entry-focus-ring: 0 0 0 2px rgba(60, 195, 191, 0.44); } .intro-shell, .intro-start-panel, .intro-panel, .entry-button, .intro-input, .member-hub, .member-hub-nav-button { pointer-events: auto !important; } body[data-app-view="intro_briefing"], body[data-app-view="name_entry"], body[data-app-view="login_entry"], body[data-app-view="member_hub"] { background: #000 !important; } body[data-app-view="intro_briefing"]::before, body[data-app-view="name_entry"]::before, body[data-app-view="login_entry"]::before, body[data-app-view="member_hub"]::before { opacity: 0.10 !important; background: radial-gradient(circle at 50% 28%, rgba(255, 112, 32, 0.18), transparent 34%), radial-gradient(circle at 50% 52%, rgba(60, 195, 191, 0.08), transparent 26%), linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.54)) !important; } body[data-app-view="intro_briefing"] .intro-background, body[data-app-view="name_entry"] .intro-background, body[data-app-view="login_entry"] .intro-background, body[data-app-view="member_hub"] .intro-background { opacity: 1 !important; transform: translate3d(0, 0, 0) scale(1) !important; filter: brightness(0.82) saturate(1.08) contrast(1.04) !important; } body[data-app-view="intro_briefing"] #roar-view-background-layer, body[data-app-view="name_entry"] #roar-view-background-layer, body[data-app-view="login_entry"] #roar-view-background-layer, body[data-app-view="member_hub"] #roar-view-background-layer { opacity: 0 !important; background-image: none !important; } body[data-app-view="intro_briefing"] .intro-layer::after, body[data-app-view="name_entry"] .intro-layer::after, body[data-app-view="login_entry"] .intro-layer::after, body[data-app-view="member_hub"] .intro-layer::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.18) 64%, rgba(0, 0, 0, 0.3) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.34)); } body[data-app-view="intro_briefing"] .intro-shell, body[data-app-view="name_entry"] .intro-shell, body[data-app-view="login_entry"] .intro-shell, body[data-app-view="member_hub"] .intro-shell { align-items: center !important; justify-items: center !important; padding: clamp(18px, 3vw, 32px) !important; } body[data-app-view="intro_ready"] .intro-start-panel { width: min(420px, calc(100vw - 48px)) !important; display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; justify-items: stretch !important; } .entry-button { position: relative !important; min-height: var(--entry-control-height) !important; width: 100% !important; display: inline-grid !important; place-items: center !important; padding: 0 18px !important; border-radius: var(--entry-control-radius) !important; border: 1px solid var(--entry-border-soft) !important; overflow: hidden !important; font: inherit !important; font-size: 0.88rem !important; font-weight: 900 !important; line-height: 1.1 !important; letter-spacing: 0.08em !important; text-align: center !important; text-transform: uppercase !important; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45) !important; cursor: pointer !important; transform: none !important; transition: border-color 170ms ease, box-shadow 170ms ease, background 170ms ease, color 170ms ease, opacity 170ms ease, transform 170ms ease !important; } .entry-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: calc(var(--entry-control-radius) - 1px) !important; pointer-events: none !important; background: linear-gradient(180deg, rgba(255, 244, 209, 0.08), transparent 35%, rgba(255, 112, 32, 0.07)) !important; } .entry-button::after { content: "" !important; position: absolute !important; inset: auto 18px 9px !important; height: 1px !important; pointer-events: none !important; background: linear-gradient(90deg, transparent, rgba(255, 244, 209, 0.32), transparent) !important; } .entry-button-primary { border-color: rgba(255, 112, 32, 0.76) !important; background: linear-gradient(180deg, rgba(255, 122, 32, 0.58) 0%, rgba(113, 48, 13, 0.78) 56%, rgba(16, 10, 8, 0.92) 100%), linear-gradient(90deg, rgba(255, 244, 209, 0.1), transparent 58%) !important; color: var(--entry-text) !important; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(255, 244, 209, 0.035) inset, 0 -14px 26px rgba(0, 0, 0, 0.28) inset !important; } .entry-button-secondary, .entry-button-ghost { background: linear-gradient(180deg, rgba(14, 20, 25, 0.86), rgba(4, 7, 13, 0.82)) !important; color: var(--entry-text-soft) !important; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 244, 209, 0.04) !important; } .entry-button-secondary { border-color: rgba(60, 195, 191, 0.42) !important; } .entry-button-ghost { border-color: rgba(255, 244, 209, 0.18) !important; } .entry-button:hover:not(:disabled), .entry-button:focus-visible { transform: translate3d(0, -1px, 0) !important; outline: none !important; border-color: rgba(255, 122, 32, 0.86) !important; color: var(--entry-text) !important; box-shadow: 0 16px 32px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 244, 209, 0.06) inset, var(--entry-focus-ring) !important; } .entry-button:active:not(:disabled) { transform: translate3d(0, 0, 0) !important; } .entry-button:disabled { cursor: not-allowed !important; opacity: 0.46 !important; filter: saturate(0.55) brightness(0.76) !important; box-shadow: none !important; } #intro-start-button.entry-button { min-height: 54px !important; font-size: 1rem !important; letter-spacing: 0.22em !important; } #intro-login-button.entry-button { min-height: 46px !important; justify-self: stretch !important; width: 100% !important; font-size: 0.82rem !important; letter-spacing: 0.1em !important; } .intro-panel { border-radius: var(--entry-panel-radius) !important; border: 1px solid var(--entry-border) !important; background: linear-gradient(180deg, rgba(7, 10, 16, 0.92), rgba(3, 5, 10, 0.88)), linear-gradient(90deg, rgba(255, 112, 32, 0.07), transparent 36%, rgba(60, 195, 191, 0.045)) !important; box-shadow: var(--entry-panel-shadow) !important; color: var(--entry-text) !important; backdrop-filter: blur(16px) saturate(1.12) !important; -webkit-backdrop-filter: blur(16px) saturate(1.12) !important; } body[data-app-view="intro_briefing"] .intro-panel-briefing { display: grid !important; } .intro-panel-briefing { width: min(820px, calc(100vw - 40px)) !important; max-width: 820px !important; gap: 18px !important; padding: 32px 34px 30px !important; text-align: left !important; } .intro-briefing-eyebrow, .member-hub-eyebrow, .member-hub-card-label { margin: 0 !important; color: var(--entry-orange) !important; font-size: 0.72rem !important; font-weight: 900 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } .intro-briefing-title { margin: 0 !important; max-width: 24ch !important; color: var(--entry-text) !important; font-size: clamp(1.85rem, 3vw, 2.35rem) !important; font-weight: 950 !important; line-height: 1.08 !important; letter-spacing: 0 !important; } .intro-briefing-copy { margin: 0 !important; max-width: 72ch !important; color: var(--entry-text-soft) !important; font-size: 0.98rem !important; line-height: 1.58 !important; letter-spacing: 0 !important; } .intro-briefing-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } .intro-briefing-card, .member-hub-card { border: 1px solid var(--entry-border-soft) !important; border-radius: var(--entry-card-radius) !important; background: linear-gradient(180deg, rgba(14, 18, 24, 0.82), rgba(7, 10, 15, 0.74)) !important; box-shadow: inset 0 1px 0 rgba(255, 244, 209, 0.035) !important; } .intro-briefing-card { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; grid-template-rows: auto 1fr !important; column-gap: 12px !important; row-gap: 5px !important; min-height: 104px !important; padding: 15px !important; } .intro-briefing-card-index { grid-row: 1 / span 2 !important; width: 32px !important; height: 32px !important; display: grid !important; place-items: center !important; border-radius: 999px !important; border: 1px solid rgba(60, 195, 191, 0.34) !important; color: var(--entry-cyan) !important; font-size: 0.72rem !important; font-weight: 950 !important; letter-spacing: 0 !important; } .intro-briefing-card h3 { margin: 0 !important; color: var(--entry-text) !important; font-size: 1rem !important; font-weight: 900 !important; line-height: 1.22 !important; letter-spacing: 0 !important; } .intro-briefing-card p { margin: 0 !important; color: var(--entry-text-soft) !important; font-size: 0.88rem !important; line-height: 1.42 !important; letter-spacing: 0 !important; } .intro-briefing-actions { display: grid !important; grid-template-columns: minmax(132px, 0.32fr) minmax(0, 1fr) !important; gap: 10px !important; align-items: stretch !important; padding-top: 2px !important; } .intro-briefing-button { min-height: var(--entry-control-height) !important; } .intro-panel-name, .intro-panel-login { width: min(430px, calc(100vw - 40px)) !important; max-width: 430px !important; gap: 12px !important; padding: 28px 30px 30px !important; text-align: center !important; } .intro-panel-name { background: linear-gradient(180deg, rgba(7, 10, 16, 0.84), rgba(3, 5, 10, 0.8)), linear-gradient(90deg, rgba(255, 112, 32, 0.055), transparent 48%, rgba(60, 195, 191, 0.035)) !important; } .intro-name-instruction { max-width: 29ch !important; margin: 0 auto 2px !important; color: var(--entry-text) !important; font-size: 1.02rem !important; font-weight: 850 !important; line-height: 1.36 !important; letter-spacing: 0 !important; text-transform: none !important; } .intro-login-title { margin: 0 !important; color: var(--entry-text) !important; font-size: 1.75rem !important; font-weight: 950 !important; line-height: 1.08 !important; letter-spacing: 0 !important; text-transform: none !important; } .intro-login-copy, .intro-login-demo-note { margin: 0 auto !important; max-width: 34ch !important; color: var(--entry-text-soft) !important; font-size: 0.9rem !important; line-height: 1.45 !important; letter-spacing: 0 !important; } .intro-login-demo-note { color: rgba(255, 183, 96, 0.9) !important; font-size: 0.8rem !important; } .intro-input { width: 100% !important; min-height: var(--entry-control-height) !important; padding: 0 14px !important; border-radius: var(--entry-control-radius) !important; border: 1px solid rgba(255, 112, 32, 0.5) !important; background: linear-gradient(180deg, rgba(2, 4, 8, 0.92), rgba(6, 9, 14, 0.86)) !important; color: var(--entry-text) !important; font: inherit !important; font-size: 0.95rem !important; font-weight: 650 !important; letter-spacing: 0.02em !important; text-transform: none !important; box-shadow: inset 0 1px 0 rgba(255, 244, 209, 0.04) !important; } .intro-panel-name .intro-input, .intro-panel-login .intro-input { width: 100% !important; min-height: var(--entry-control-height) !important; } .intro-input::placeholder { color: rgba(255, 244, 209, 0.45) !important; font-weight: 650 !important; letter-spacing: 0.04em !important; } .intro-input:focus-visible { outline: none !important; border-color: rgba(60, 195, 191, 0.76) !important; box-shadow: var(--entry-focus-ring), inset 0 1px 0 rgba(255, 244, 209, 0.05) !important; } .intro-input[aria-invalid="true"], .intro-panel-name .intro-input[aria-invalid="true"], .intro-panel-login .intro-input[aria-invalid="true"] { border-color: var(--web-v1-link-validation) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--web-v1-link-validation) 28%, transparent), inset 0 1px 0 rgba(255, 244, 209, 0.04) !important; } .intro-entry-actions { display: grid !important; gap: 10px !important; margin-top: 2px !important; } .intro-panel-name .entry-button, .intro-panel-login .entry-button, #name-entry-submit.entry-button, #aim-lab-entry-button.entry-button, #login-submit-button.entry-button, #login-back-button.entry-button { min-height: var(--entry-control-height) !important; width: 100% !important; justify-self: stretch !important; font-size: 0.9rem !important; letter-spacing: 0.08em !important; } #login-back-button.entry-button, #aim-lab-entry-button.entry-button { min-height: var(--entry-control-height-compact) !important; } .intro-error { min-height: 18px !important; margin: -2px 0 0 !important; color: var(--web-v1-link-validation) !important; font-size: 0.8rem !important; line-height: 1.35 !important; text-align: left !important; } .intro-error.hidden { display: none !important; } .member-hub { width: min(1120px, calc(100vw - 40px)) !important; min-height: min(620px, calc(100vh - 56px)) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(224px, 248px) !important; gap: 14px !important; align-self: center !important; justify-self: center !important; color: var(--entry-text) !important; } .member-hub.hidden { display: none !important; } .member-hub-content, .member-hub-nav { border: 1px solid var(--entry-border) !important; border-radius: var(--entry-panel-radius) !important; background: linear-gradient(180deg, rgba(7, 10, 16, 0.88), rgba(3, 5, 10, 0.82)), linear-gradient(90deg, rgba(255, 112, 32, 0.055), transparent 42%, rgba(60, 195, 191, 0.035)) !important; box-shadow: var(--entry-panel-shadow) !important; backdrop-filter: blur(16px) saturate(1.1) !important; -webkit-backdrop-filter: blur(16px) saturate(1.1) !important; } .member-hub-content { display: grid !important; align-content: center !important; gap: 13px !important; padding: clamp(28px, 3vw, 38px) !important; } .member-hub-title { margin: 0 !important; color: var(--entry-text) !important; font-size: clamp(2.15rem, 4vw, 3rem) !important; font-weight: 950 !important; line-height: 0.98 !important; letter-spacing: 0 !important; } .member-hub-intro, .member-hub-copy, .member-hub-notice { margin: 0 !important; max-width: 68ch !important; color: var(--entry-text-soft) !important; font-size: 0.97rem !important; line-height: 1.55 !important; letter-spacing: 0 !important; } .member-hub-intro { color: var(--entry-text) !important; font-weight: 800 !important; } .member-hub-card-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin-top: 6px !important; } .member-hub-card { min-height: 104px !important; display: grid !important; align-content: space-between !important; gap: 12px !important; padding: 16px !important; } .member-hub-card strong { color: var(--entry-text) !important; font-size: 0.96rem !important; line-height: 1.35 !important; letter-spacing: 0 !important; } .member-hub-notice { min-height: 22px !important; color: rgba(255, 183, 96, 0.9) !important; } .member-hub-nav { display: grid !important; align-content: start !important; gap: 8px !important; padding: 12px !important; } .member-hub-nav-button { min-height: var(--entry-control-height-compact) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 10px !important; padding: 0 12px !important; border: 1px solid var(--entry-border-soft) !important; border-radius: var(--entry-control-radius) !important; background: rgba(6, 10, 15, 0.7) !important; color: var(--entry-text-soft) !important; font: inherit !important; font-size: 0.8rem !important; font-weight: 850 !important; letter-spacing: 0.04em !important; text-align: left !important; text-transform: uppercase !important; cursor: pointer !important; transform: none !important; box-shadow: inset 0 1px 0 rgba(255, 244, 209, 0.035) !important; } .member-hub-nav-button span { color: rgba(255, 183, 96, 0.72) !important; font-size: 0.66rem !important; font-weight: 750 !important; letter-spacing: 0 !important; text-transform: none !important; } .member-hub-nav-button.active { border-color: rgba(255, 112, 32, 0.78) !important; background: linear-gradient(180deg, rgba(255, 112, 32, 0.2), rgba(8, 10, 13, 0.78)) !important; color: var(--entry-text) !important; } .member-hub-nav-button.locked { color: var(--entry-text-muted) !important; } .member-hub-nav-button.logout { margin-top: 8px !important; border-color: rgba(60, 195, 191, 0.48) !important; color: var(--entry-text) !important; } .member-hub-nav-button:hover, .member-hub-nav-button:focus-visible { border-color: rgba(255, 112, 32, 0.76) !important; color: var(--entry-text) !important; outline: none !important; box-shadow: var(--entry-focus-ring), inset 0 1px 0 rgba(255, 244, 209, 0.04) !important; } @media (max-width: 860px) { .intro-panel-briefing { width: min(100%, calc(100vw - 28px)) !important; padding: 26px 22px 24px !important; } .intro-briefing-grid, .intro-briefing-actions, .member-hub, .member-hub-card-grid { grid-template-columns: 1fr !important; } .member-hub { width: min(100%, calc(100vw - 28px)) !important; min-height: auto !important; } .member-hub-nav { grid-row: 2 !important; } } @media (max-width: 560px) { body[data-app-view="intro_briefing"] .intro-shell, body[data-app-view="name_entry"] .intro-shell, body[data-app-view="login_entry"] .intro-shell, body[data-app-view="member_hub"] .intro-shell { padding: 14px !important; } body[data-app-view="intro_ready"] .intro-start-panel, .intro-panel-name, .intro-panel-login, .intro-panel-briefing, .member-hub { width: min(100%, calc(100vw - 24px)) !important; } .intro-panel-name, .intro-panel-login { padding: 24px 20px !important; } .intro-panel-briefing { padding: 24px 18px 20px !important; gap: 14px !important; } .intro-briefing-title { max-width: none !important; font-size: 1.55rem !important; } .intro-briefing-card { grid-template-columns: 1fr !important; min-height: auto !important; } .intro-briefing-card-index { grid-row: auto !important; } #intro-start-button.entry-button { min-height: 50px !important; font-size: 0.92rem !important; letter-spacing: 0.16em !important; } #intro-login-button.entry-button, .entry-button { min-height: 44px !important; } .member-hub-content { padding: 24px 20px !important; } } /* ROAR ENTRY FINAL POLISH 02 Final design pass for compact entry controls, quiet glow, shared panels, hub, and completion. Runtime IDs and flow logic stay unchanged. */ :root { --entry-surface: rgba(5, 8, 13, 0.82); --entry-surface-strong: rgba(3, 5, 9, 0.9); --entry-surface-soft: rgba(12, 16, 22, 0.68); --entry-border: rgba(255, 122, 32, 0.24); --entry-border-soft: rgba(255, 244, 209, 0.12); --entry-text-soft: rgba(255, 244, 209, 0.76); --entry-text-muted: rgba(255, 244, 209, 0.5); --entry-panel-radius: 10px; --entry-card-radius: 8px; --entry-control-radius: 9px; --entry-control-height: 44px; --entry-control-height-compact: 42px; --entry-panel-shadow: 0 22px 46px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 244, 209, 0.04); --entry-focus-ring: 0 0 0 2px rgba(60, 195, 191, 0.34), 0 0 0 1px rgba(255, 244, 209, 0.04) inset; } body[data-app-view="intro_ready"] .intro-start-panel { width: min(344px, calc(100vw - 48px)) !important; gap: 8px !important; } .entry-button { min-height: var(--entry-control-height) !important; padding: 0 16px !important; border-radius: var(--entry-control-radius) !important; border-color: var(--entry-border-soft) !important; font-size: 0.84rem !important; font-weight: 850 !important; letter-spacing: 0.06em !important; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.42) !important; } .entry-button::before { background: linear-gradient(180deg, rgba(255, 244, 209, 0.055), transparent 42%, rgba(255, 112, 32, 0.035)) !important; } .entry-button::after { inset: auto 22px 7px !important; background: linear-gradient(90deg, transparent, rgba(255, 244, 209, 0.2), transparent) !important; } .entry-button-primary { border-color: rgba(255, 122, 32, 0.56) !important; background: linear-gradient(180deg, rgba(219, 98, 28, 0.58) 0%, rgba(91, 39, 14, 0.74) 58%, rgba(12, 8, 7, 0.9) 100%), linear-gradient(90deg, rgba(255, 244, 209, 0.075), transparent 62%) !important; box-shadow: 0 10px 18px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 244, 209, 0.06), inset 0 -10px 18px rgba(0, 0, 0, 0.24) !important; } .entry-button-secondary, .entry-button-ghost { background: linear-gradient(180deg, rgba(13, 18, 23, 0.84), rgba(4, 7, 12, 0.82)) !important; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 244, 209, 0.035) !important; } .entry-button-secondary { border-color: rgba(60, 195, 191, 0.34) !important; } .entry-button-ghost { border-color: rgba(255, 244, 209, 0.16) !important; } .entry-button:hover:not(:disabled), .entry-button:focus-visible { border-color: rgba(255, 122, 32, 0.64) !important; box-shadow: 0 12px 22px rgba(0, 0, 0, 0.36), var(--entry-focus-ring) !important; } .entry-button:active:not(:disabled) { transform: translate3d(0, 0, 0) scale(0.995) !important; } .entry-button:disabled, .member-hub-nav-button.locked { opacity: 0.52 !important; filter: saturate(0.62) brightness(0.82) !important; } #intro-start-button.entry-button { min-height: 48px !important; font-size: 0.9rem !important; letter-spacing: 0.11em !important; } #intro-login-button.entry-button { min-height: 44px !important; font-size: 0.82rem !important; letter-spacing: 0.07em !important; } .intro-panel { border-color: var(--entry-border) !important; background: linear-gradient(180deg, rgba(7, 10, 15, 0.9), rgba(3, 5, 9, 0.86)), linear-gradient(90deg, rgba(255, 112, 32, 0.045), transparent 42%, rgba(60, 195, 191, 0.035)) !important; box-shadow: var(--entry-panel-shadow) !important; backdrop-filter: blur(14px) saturate(1.08) !important; -webkit-backdrop-filter: blur(14px) saturate(1.08) !important; } .intro-panel-briefing { width: min(780px, calc(100vw - 40px)) !important; gap: 16px !important; padding: 30px 32px 28px !important; } .intro-briefing-card, .member-hub-card { border-color: rgba(255, 244, 209, 0.115) !important; background: linear-gradient(180deg, rgba(13, 18, 23, 0.74), rgba(5, 8, 13, 0.66)) !important; box-shadow: inset 0 1px 0 rgba(255, 244, 209, 0.03) !important; } .intro-briefing-button { min-height: var(--entry-control-height) !important; border-radius: var(--entry-control-radius) !important; letter-spacing: 0.06em !important; } .intro-panel-name, .intro-panel-login { width: min(400px, calc(100vw - 40px)) !important; max-width: 400px !important; gap: 11px !important; padding: 26px 28px 28px !important; } .intro-name-instruction { max-width: 28ch !important; font-size: 0.98rem !important; } .intro-login-title { font-size: 1.55rem !important; } .intro-login-demo-note { display: inline-grid !important; min-height: 30px !important; place-items: center !important; padding: 0 12px !important; border: 1px solid rgba(255, 183, 96, 0.2) !important; border-radius: 999px !important; background: rgba(255, 183, 96, 0.055) !important; color: rgba(255, 220, 164, 0.86) !important; } .intro-input, .intro-panel-name .intro-input, .intro-panel-login .intro-input { min-height: var(--entry-control-height) !important; border-radius: var(--entry-control-radius) !important; border-color: rgba(255, 244, 209, 0.18) !important; background: linear-gradient(180deg, rgba(2, 4, 8, 0.9), rgba(6, 9, 14, 0.82)) !important; box-shadow: inset 0 1px 0 rgba(255, 244, 209, 0.035) !important; } .intro-input:focus-visible { border-color: rgba(60, 195, 191, 0.68) !important; box-shadow: var(--entry-focus-ring) !important; } .intro-panel-name .entry-button, .intro-panel-login .entry-button, #name-entry-submit.entry-button, #aim-lab-entry-button.entry-button, #login-submit-button.entry-button, #login-back-button.entry-button { min-height: var(--entry-control-height) !important; font-size: 0.84rem !important; letter-spacing: 0.06em !important; } #login-back-button.entry-button, #aim-lab-entry-button.entry-button { min-height: var(--entry-control-height-compact) !important; } .member-hub { width: min(1080px, calc(100vw - 40px)) !important; min-height: min(590px, calc(100vh - 56px)) !important; gap: 12px !important; } .member-hub-content, .member-hub-nav { border-color: var(--entry-border) !important; background: linear-gradient(180deg, rgba(7, 10, 15, 0.9), rgba(3, 5, 9, 0.84)), linear-gradient(90deg, rgba(255, 112, 32, 0.045), transparent 46%, rgba(60, 195, 191, 0.032)) !important; box-shadow: var(--entry-panel-shadow) !important; } .member-hub-content { gap: 12px !important; padding: clamp(26px, 2.8vw, 36px) !important; } .member-hub-card-grid { gap: 9px !important; } .member-hub-card { min-height: 96px !important; padding: 15px !important; } .member-hub-nav { gap: 7px !important; padding: 11px !important; } .member-hub-nav-button { min-height: var(--entry-control-height-compact) !important; border-color: var(--entry-border-soft) !important; border-radius: var(--entry-control-radius) !important; background: linear-gradient(180deg, rgba(11, 16, 21, 0.78), rgba(4, 7, 12, 0.74)) !important; font-size: 0.78rem !important; letter-spacing: 0.035em !important; } .member-hub-nav-button.active { border-color: rgba(255, 122, 32, 0.54) !important; background: linear-gradient(180deg, rgba(205, 88, 28, 0.17), rgba(7, 10, 14, 0.78)) !important; } .member-hub-nav-button.logout { border-color: rgba(60, 195, 191, 0.36) !important; background: linear-gradient(180deg, rgba(60, 195, 191, 0.075), rgba(4, 7, 12, 0.78)) !important; } .member-hub-nav-button:hover, .member-hub-nav-button:focus-visible { border-color: rgba(255, 122, 32, 0.58) !important; box-shadow: var(--entry-focus-ring) !important; } #license-app button.primary:not(.entry-button) { min-height: 50px !important; border-radius: 9px !important; border-color: rgba(255, 122, 32, 0.72) !important; background: linear-gradient(180deg, rgba(255, 124, 22, 0.88) 0%, rgba(180, 68, 7, 0.9) 50%, rgba(24, 7, 2, 0.96) 100%), linear-gradient(90deg, rgba(255, 244, 209, 0.1), transparent 62%) !important; color: #fff4d1 !important; box-shadow: inset 3px 0 0 rgba(255, 201, 123, 0.34), inset 0 0 0 1px rgba(255, 236, 191, 0.12), 0 10px 18px rgba(0, 0, 0, 0.28) !important; } #license-app button.primary:not(.entry-button):hover:not(:disabled), #license-app button.primary:not(.entry-button):focus-visible { box-shadow: inset 3px 0 0 rgba(255, 225, 148, 0.42), inset 0 0 0 1px rgba(255, 236, 191, 0.14), 0 12px 22px rgba(0, 0, 0, 0.3) !important; } #license-app button.secondary:not(.entry-button), #license-app .actionbar-buttons button.secondary { min-height: 48px !important; border-color: rgba(60, 195, 191, 0.46) !important; background: linear-gradient(180deg, rgba(12, 24, 31, 0.96), rgba(4, 8, 12, 0.96)), linear-gradient(90deg, rgba(60, 195, 191, 0.1), transparent 66%) !important; color: rgba(214, 252, 255, 0.9) !important; box-shadow: inset 3px 0 0 rgba(60, 195, 191, 0.34), inset 0 1px 0 rgba(214, 252, 255, 0.04), 0 8px 16px rgba(0, 0, 0, 0.24) !important; } #license-app button.secondary:not(.entry-button):hover:not(:disabled), #license-app .actionbar-buttons button.secondary:hover:not(:disabled) { border-color: rgba(60, 195, 191, 0.72) !important; box-shadow: inset 3px 0 0 rgba(60, 195, 191, 0.48), inset 0 1px 0 rgba(214, 252, 255, 0.06), 0 0 20px rgba(60, 195, 191, 0.18), 0 10px 20px rgba(0, 0, 0, 0.3) !important; } html body[data-app-view="completion"] #license-app #completion-panel.completion-panel { flex: 0 1 660px !important; width: min(660px, 100%) !important; min-width: min(660px, 100%) !important; justify-self: center !important; gap: 14px !important; padding: clamp(20px, 2.5vw, 28px) !important; border-radius: var(--entry-panel-radius) !important; border-color: rgba(255, 122, 32, 0.26) !important; background: linear-gradient(180deg, rgba(8, 11, 16, 0.90), rgba(2, 4, 8, 0.92)), radial-gradient(circle at 22% 0%, rgba(255, 112, 32, 0.08), transparent 32%), linear-gradient(90deg, rgba(255, 112, 32, 0.055), transparent 48%, rgba(60, 195, 191, 0.032)) !important; box-shadow: 0 24px 52px rgba(0, 0, 0, 0.44), 0 8px 22px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 244, 209, 0.06) !important; backdrop-filter: blur(12px) saturate(1.08) !important; -webkit-backdrop-filter: blur(12px) saturate(1.08) !important; } html body[data-app-view="completion"] #license-app #main-stage.main-stage > .inner-card { display: none !important; } html body[data-app-view="completion"] #license-app #main-stage.main-stage { display: flex !important; width: 100% !important; justify-content: center !important; align-items: flex-start !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html body[data-app-view="completion"] #license-app #completion-form { gap: 10px !important; padding: 14px !important; border-radius: var(--entry-panel-radius) !important; border-color: rgba(255, 244, 209, 0.12) !important; background: linear-gradient(180deg, rgba(4, 7, 12, 0.70), rgba(0, 0, 0, 0.42)) !important; } html body[data-app-view="completion"] #license-app #profile-link-input.completion-input, html body[data-app-view="completion"] #license-app #contact-email-input.completion-input { min-height: var(--entry-control-height) !important; border-radius: var(--entry-control-radius) !important; border-color: rgba(255, 244, 209, 0.14) !important; background: linear-gradient(180deg, rgba(2, 4, 7, 0.86), rgba(0, 0, 0, 0.68)) !important; box-shadow: inset 3px 0 0 rgba(255, 112, 32, 0.24), inset 0 1px 0 rgba(255, 244, 209, 0.045), 0 8px 18px rgba(0, 0, 0, 0.22) !important; } html body[data-app-view="completion"] #license-app .completion-input:focus { border-color: rgba(255, 122, 32, 0.56) !important; outline: none !important; box-shadow: inset 3px 0 0 rgba(255, 122, 32, 0.42), inset 0 1px 0 rgba(255, 244, 209, 0.07), 0 0 0 3px rgba(255, 122, 32, 0.12), 0 12px 24px rgba(0, 0, 0, 0.28) !important; } html body[data-app-view="completion"] #license-app #completion-submit.primary { width: 100% !important; min-height: var(--entry-control-height) !important; border-radius: var(--entry-control-radius) !important; border-color: rgba(255, 122, 32, 0.74) !important; background: linear-gradient(180deg, rgba(255, 140, 38, 0.98), rgba(222, 77, 14, 0.96)) !important; color: #170904 !important; font-size: 0.84rem !important; letter-spacing: 0.07em !important; box-shadow: inset 0 1px 0 rgba(255, 236, 191, 0.32), inset 0 -8px 18px rgba(93, 25, 0, 0.18), 0 12px 22px rgba(0, 0, 0, 0.32), 0 0 0 rgba(255, 112, 32, 0) !important; } html body[data-app-view="completion"] #license-app #completion-submit.primary:hover:not(:disabled), html body[data-app-view="completion"] #license-app #completion-submit.primary:focus-visible:not(:disabled) { transform: translateY(-1px) !important; border-color: rgba(255, 177, 72, 0.9) !important; background: linear-gradient(180deg, rgba(255, 166, 54, 1), rgba(239, 87, 15, 1)) !important; box-shadow: inset 0 1px 0 rgba(255, 244, 209, 0.42), inset 0 -8px 18px rgba(93, 25, 0, 0.14), 0 14px 28px rgba(0, 0, 0, 0.36), 0 0 28px rgba(255, 112, 32, 0.38) !important; } html body[data-app-view="completion"] #license-app #completion-submit.primary:active:not(:disabled) { transform: translateY(0) !important; box-shadow: inset 0 2px 8px rgba(93, 25, 0, 0.22), 0 8px 16px rgba(0, 0, 0, 0.28), 0 0 18px rgba(255, 112, 32, 0.28) !important; } html body[data-flow-state="faded"] #license-app .completion-panel, html body[data-flow-state="faded"] #license-app .panel-rail, html body[data-flow-state="faded"] #license-app .panel-progress, html body[data-flow-state="faded"] #license-app .actionbar { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } html body[data-flow-state="faded"] #license-app #completion-fade-overlay.completion-fade-overlay { position: fixed !important; inset: clamp(118px, 12vh, 150px) clamp(20px, 2.2vw, 34px) clamp(20px, 3vh, 34px) !important; z-index: 2000 !important; min-height: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; pointer-events: auto !important; isolation: isolate !important; background: radial-gradient(circle at 18% 34%, rgba(255, 112, 32, 0.12), transparent 34%), radial-gradient(circle at 84% 18%, rgba(60, 195, 191, 0.10), transparent 28%), linear-gradient(180deg, rgba(3, 5, 8, 0.82), rgba(0, 0, 0, 0.90)), linear-gradient(90deg, rgba(255, 112, 32, 0.11), rgba(0, 0, 0, 0) 42%, rgba(60, 195, 191, 0.06)) !important; border: 1px solid rgba(255, 122, 32, 0.28) !important; border-radius: var(--license-panel-radius) !important; box-shadow: inset 0 1px 0 rgba(255, 244, 209, 0.06), inset 0 0 70px rgba(255, 112, 32, 0.045), 0 28px 90px rgba(0, 0, 0, 0.58) !important; backdrop-filter: blur(10px) saturate(1.12) !important; -webkit-backdrop-filter: blur(10px) saturate(1.12) !important; } html body[data-flow-state="faded"] #license-app #completion-fade-overlay.completion-fade-overlay::before { content: "" !important; position: absolute !important; inset: clamp(18px, 2.4vw, 34px) !important; pointer-events: none !important; border-radius: calc(var(--license-panel-radius) - 6px) !important; border: 1px solid rgba(255, 244, 209, 0.055) !important; background: linear-gradient(90deg, rgba(255, 122, 32, 0.18), transparent 32%, transparent 72%, rgba(60, 195, 191, 0.12)), linear-gradient(180deg, rgba(255, 244, 209, 0.028), transparent 24%, transparent 78%, rgba(255, 112, 32, 0.055)) !important; mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 88%) !important; } html body[data-flow-state="faded"] #license-app .completion-fade-copy { position: relative !important; z-index: 2 !important; opacity: 1 !important; visibility: visible !important; width: min(1040px, 88%) !important; gap: clamp(13px, 1.55vw, 18px) !important; align-items: flex-start !important; text-align: left !important; padding: clamp(42px, 5.5vw, 82px) !important; } html body[data-flow-state="faded"] #license-app .completion-fade-brand { align-self: flex-start !important; padding: 7px 10px 7px 12px !important; border-left: 3px solid rgba(255, 122, 32, 0.72) !important; color: rgba(255, 244, 209, 0.84) !important; font-size: clamp(0.78rem, 1.15vw, 0.95rem) !important; font-weight: 950 !important; letter-spacing: 0.24em !important; background: linear-gradient(90deg, rgba(255, 112, 32, 0.12), transparent 82%) !important; text-shadow: 0 0 12px rgba(255, 112, 32, 0.18), 0 0 18px rgba(60, 195, 191, 0.10) !important; } html body[data-flow-state="faded"] #license-app .completion-fade-title { color: #fff4d1 !important; margin-top: clamp(4px, 0.8vw, 10px) !important; font-size: clamp(4.4rem, 8.6vw, 8.8rem) !important; font-weight: 950 !important; line-height: 0.86 !important; letter-spacing: 0 !important; text-transform: none !important; text-shadow: 0 0 18px rgba(255, 112, 32, 0.24), 0 0 42px rgba(255, 112, 32, 0.14), 0 20px 52px rgba(0, 0, 0, 0.48) !important; } html body[data-flow-state="faded"] #license-app .completion-fade-message, html body[data-flow-state="faded"] #license-app .completion-fade-contact { max-width: min(900px, 90vw) !important; color: #fff4d1 !important; font-size: clamp(1.75rem, 3.35vw, 3.35rem) !important; font-weight: 900 !important; line-height: 1.04 !important; letter-spacing: 0 !important; text-transform: none !important; text-shadow: 0 0 16px rgba(255, 112, 32, 0.18), 0 0 30px rgba(0, 0, 0, 0.38) !important; } html body[data-flow-state="faded"] #license-app .completion-fade-contact { color: rgba(255, 244, 209, 0.94) !important; font-size: clamp(1.22rem, 2.2vw, 2.1rem) !important; font-weight: 850 !important; max-width: min(820px, 90vw) !important; } html body[data-flow-state="faded"] #license-app .completion-fade-subcopy { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 22px !important; max-width: min(680px, 86vw) !important; margin: clamp(4px, 0.9vw, 12px) 0 0 !important; color: rgba(255, 244, 209, 0.88) !important; font-size: clamp(1rem, 1.45vw, 1.22rem) !important; font-weight: 800 !important; line-height: 1.42 !important; letter-spacing: 0 !important; text-shadow: 0 0 14px rgba(255, 112, 32, 0.20), 0 0 34px rgba(255, 112, 32, 0.12) !important; } html body[data-flow-state="faded"] #license-app .main-grid { position: relative !important; } @media (max-width: 560px) { body[data-app-view="intro_ready"] .intro-start-panel { width: min(320px, calc(100vw - 28px)) !important; } #intro-start-button.entry-button { min-height: 46px !important; font-size: 0.86rem !important; letter-spacing: 0.08em !important; } .entry-button, #intro-login-button.entry-button, .intro-panel-name .entry-button, .intro-panel-login .entry-button { min-height: 42px !important; } .intro-panel-name, .intro-panel-login { padding: 23px 18px !important; } html body[data-app-view="completion"] #license-app #completion-panel.completion-panel { padding: 20px 16px !important; } } /* ROAR final completion overlay refinement Keeps the license header visible, covers the remaining stage, and turns completion into a true end-state. */ .license-final-overlay, .license-completion-final, .completion-final-overlay, [data-license-final="true"] { position: relative; min-height: clamp(520px, 68vh, 760px); width: 100%; display: flex; align-items: stretch; justify-content: stretch; overflow: hidden; border-radius: 14px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.90) 48%, rgba(0, 0, 0, 0.72) 100%), radial-gradient(circle at 22% 28%, rgba(87, 218, 205, 0.10), transparent 34%), radial-gradient(circle at 76% 72%, rgba(240, 94, 15, 0.10), transparent 38%); border: 1px solid rgba(240, 94, 15, 0.42); box-shadow: inset 0 0 0 1px rgba(87, 218, 205, 0.05), 0 22px 80px rgba(0, 0, 0, 0.62); } .license-final-overlay::before, .license-completion-final::before, .completion-final-overlay::before, [data-license-final="true"]::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.88)), radial-gradient(circle at 15% 78%, rgba(255, 255, 255, 0.08), transparent 36%); opacity: 0.95; } .license-final-content, .license-completion-final__content, .completion-final-content, [data-license-final-content="true"] { position: relative; z-index: 1; width: min(980px, 92%); min-height: inherit; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(42px, 5vw, 76px); } .license-final-kicker, .license-completion-final__kicker, .completion-final-kicker { margin: 0 0 18px; color: rgba(87, 218, 205, 0.88); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.42em; text-transform: uppercase; } .license-final-title, .license-completion-final__title, .completion-final-title { margin: 0; max-width: 900px; color: #fff4d8; font-size: clamp(4.2rem, 8vw, 8.4rem); line-height: 0.86; font-weight: 950; letter-spacing: 0.03em; text-transform: uppercase; text-shadow: 0 0 18px rgba(255, 244, 216, 0.18), 0 0 34px rgba(240, 94, 15, 0.12); } .license-final-message, .license-completion-final__message, .completion-final-message { margin: 22px 0 0; max-width: 920px; color: #fff4d8; font-size: clamp(1.55rem, 2.8vw, 3.1rem); line-height: 1.05; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; } .license-final-subline, .license-completion-final__subline, .completion-final-subline { margin: 22px 0 0; max-width: 620px; color: rgba(255, 244, 216, 0.78); font-size: clamp(0.95rem, 1.2vw, 1.15rem); line-height: 1.55; letter-spacing: 0.02em; } .license-final-faceit-link { display: inline-flex; align-items: center; justify-content: center; min-height: 58px; min-width: min(280px, 100%); margin-top: 10px; padding: 0 38px; border-radius: 12px; border: 1px solid rgba(255, 154, 54, 0.86); background: linear-gradient(180deg, rgba(255, 170, 52, 1), rgba(255, 111, 22, 0.98) 52%, rgba(210, 61, 8, 0.98)); color: #170904; font-size: clamp(0.88rem, 1.15vw, 1.02rem); font-weight: 950; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 244, 209, 0.46), inset 0 -10px 18px rgba(93, 25, 0, 0.20), 0 16px 30px rgba(0, 0, 0, 0.38), 0 0 24px rgba(255, 112, 32, 0.22); transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease; } .license-final-faceit-link:hover, .license-final-faceit-link:focus-visible { transform: translateY(-1px); border-color: rgba(255, 177, 72, 0.9); background: linear-gradient(180deg, rgba(255, 190, 68, 1), rgba(255, 124, 25, 1) 52%, rgba(229, 70, 11, 1)); box-shadow: inset 0 1px 0 rgba(255, 244, 209, 0.56), inset 0 -10px 18px rgba(93, 25, 0, 0.16), 0 18px 34px rgba(0, 0, 0, 0.40), 0 0 38px rgba(255, 112, 32, 0.50); outline: none; } @media (max-width: 760px) { .license-final-overlay, .license-completion-final, .completion-final-overlay, [data-license-final="true"] { min-height: 560px; } .license-final-content, .license-completion-final__content, .completion-final-content, [data-license-final-content="true"] { width: 100%; padding: 34px 24px; } .license-final-title, .license-completion-final__title, .completion-final-title { font-size: clamp(3.3rem, 15vw, 5.4rem); } .license-final-message, .license-completion-final__message, .completion-final-message { font-size: clamp(1.2rem, 6vw, 2rem); letter-spacing: 0.08em; } } /* ROAR license flow stabilization: compact rail, direct module state, stable stage. */ #license-app .module-list-header, #license-app .module-list-meta, #license-app .focus-card, #license-app .panel-rail > .section-title { display: none !important; } #license-app .rail-toggle { min-height: 42px !important; padding: 8px 12px !important; border-radius: 8px !important; } #license-app .rail-toggle-label { font-size: 0.76rem !important; letter-spacing: 0.08em !important; } #license-app .module-list-shell { gap: 6px !important; margin-top: 0 !important; padding: 7px !important; border-radius: 8px !important; } #license-app .module-list { gap: 5px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } #license-app .module-item { min-height: 54px !important; padding: 8px 10px !important; border-radius: 7px !important; } #license-app .module-item-title { font-size: 11px !important; line-height: 1.18 !important; } #license-app .module-item-status { font-size: 10px !important; line-height: 1.1 !important; } #license-app .main-stage { align-content: start !important; } #license-app .main-stage[data-stage-view="module_intro"] .inner-card, #license-app .main-stage[data-stage-view="exam"] .inner-card { min-height: 0 !important; padding: 10px 16px !important; gap: 4px !important; align-content: center !important; } #license-app .main-stage[data-stage-view="module_intro"] .stage-title, #license-app .main-stage[data-stage-view="exam"] .stage-title { margin: 0 !important; font-size: clamp(1.28rem, 1.8vw, 1.72rem) !important; line-height: 1.05 !important; } #license-app .main-stage[data-stage-view="module_intro"] .eyebrow, #license-app .main-stage[data-stage-view="exam"] .eyebrow, #license-app .main-stage[data-stage-view="result"] .eyebrow { margin: 0 !important; font-size: 10px !important; line-height: 1 !important; letter-spacing: 0.14em !important; } #license-app .main-stage[data-stage-view="module_intro"] .stage-body { margin: 0 !important; font-size: 12px !important; line-height: 1.25 !important; } #license-app .lesson-summary-box, #license-app .question-panel, #license-app .feedback-panel { border-radius: 8px !important; } #license-app .lesson-summary-box { gap: 8px !important; padding: 10px !important; } #license-app .lesson-summary-list { gap: 6px !important; } #license-app .lesson-summary-item { min-height: 58px !important; padding: 8px 9px !important; } #license-app .question-panel { gap: 10px !important; padding: 12px 14px !important; } #license-app .answer-list { gap: 7px !important; } #license-app .answer-item { padding: 10px 12px !important; } #license-app .feedback-panel { min-height: 124px !important; gap: 9px !important; padding: 12px 14px !important; } body[data-view="exam"] #license-app #feedback-panel.hidden { display: grid !important; visibility: hidden !important; min-height: 124px !important; height: 124px !important; pointer-events: none !important; } @media (min-width: 980px) { body[data-app-view="license"] #license-app { min-height: auto !important; } #license-app .main-grid { align-items: stretch !important; } #license-app .panel-rail, #license-app .panel-stage { height: auto !important; min-height: 700px !important; } #license-app .panel-rail { align-content: start !important; gap: 7px !important; overflow: hidden !important; } #license-app .module-list-shell { min-height: 0 !important; overflow: hidden !important; } #license-app .module-list { max-height: 640px !important; overflow: auto !important; } #license-app .panel-stage { display: flex !important; flex-direction: column !important; overflow: visible !important; } #license-app #main-stage { flex: 1 0 auto !important; min-height: 672px !important; overflow: visible !important; padding-right: 0 !important; } #license-app .main-stage[data-stage-view="module_intro"], #license-app .main-stage[data-stage-view="exam"], #license-app .main-stage[data-stage-view="result"] { min-height: 672px !important; } #license-app .actionbar { position: relative !important; bottom: auto !important; z-index: 6 !important; } } /* Exam layout correction: keep the CTA near the question and reserve stable feedback space. */ body[data-view="exam"] #license-app { min-height: auto !important; } body[data-view="exam"] #license-app .hero { min-height: 180px !important; } body[data-view="exam"] #license-app .panel-stage { display: grid !important; grid-template-rows: auto auto !important; align-content: start !important; gap: 12px !important; } body[data-view="exam"] #license-app #main-stage { display: grid !important; grid-template-columns: 1fr !important; min-height: 0 !important; flex: 0 0 auto !important; gap: 12px !important; } body[data-view="exam"] #license-app .main-stage[data-stage-view="exam"] { min-height: 0 !important; } body[data-view="exam"] #license-app .main-stage[data-stage-view="exam"] .inner-card { grid-column: 1 / -1 !important; } body[data-view="exam"] #license-app .main-stage[data-stage-view="exam"] .inner-card { padding: 10px 16px !important; gap: 4px !important; } body[data-view="exam"] #license-app .main-stage[data-stage-view="exam"] .stage-title { font-size: clamp(1.28rem, 1.8vw, 1.72rem) !important; line-height: 1.05 !important; } body[data-view="exam"] #license-app .question-panel { min-height: 326px !important; align-content: start !important; gap: 10px !important; } body[data-view="exam"] #license-app .feedback-panel { min-height: 118px !important; height: 118px !important; align-content: center !important; overflow: hidden !important; } body[data-view="exam"] #license-app #feedback-panel.hidden { min-height: 118px !important; height: 118px !important; } body[data-view="exam"] #license-app .actionbar { width: min(250px, 100%) !important; max-width: 250px !important; justify-self: end !important; align-self: start !important; margin: 12px 0 0 auto !important; padding: 0 !important; flex-direction: column !important; align-items: stretch !important; background: transparent !important; border: 0 !important; box-shadow: none !important; position: relative !important; bottom: auto !important; } @media (min-width: 981px) { body[data-view="exam"] #license-app #main-stage > .actionbar { transform: translate( calc(100% + 26px), calc(-1 * clamp(240px, 30vh, 300px)) ) !important; } } body[data-view="exam"] #license-app .actionbar::before, body[data-view="exam"] #license-app .actionbar-copy, body[data-view="exam"] #license-app .actionbar-label, body[data-view="exam"] #license-app .actionbar-title, body[data-view="exam"] #license-app .actionbar-summary { display: none !important; } body[data-view="exam"] #license-app .actionbar-buttons { display: grid !important; grid-template-columns: 1fr !important; flex-wrap: nowrap !important; width: 100% !important; gap: 11px !important; justify-items: stretch !important; } body[data-view="exam"] #license-app .actionbar-buttons button { min-height: 50px !important; min-width: 0 !important; max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; justify-self: stretch !important; font-size: 13px !important; } body[data-view="exam"] #license-app .actionbar-buttons button.primary { min-width: 0 !important; order: 1 !important; } body[data-view="exam"] #license-app .actionbar-buttons button.secondary { order: 2 !important; } #license-app .panel-progress { gap: 12px !important; padding: 18px 16px !important; } #license-app .panel-progress .section-title { font-size: 13px !important; letter-spacing: 0.1em !important; } #license-app .progress-copy { margin-bottom: 8px !important; font-size: 12px !important; line-height: 1.45 !important; } #license-app .step-list { gap: 10px !important; padding-left: 18px !important; } #license-app .step-list::before { left: 8px !important; top: 10px !important; bottom: 10px !important; } #license-app .step-card { min-height: 76px !important; padding: 12px 12px 12px 15px !important; border-radius: 10px !important; } #license-app .step-card::before { left: -17px !important; top: 17px !important; width: 10px !important; height: 10px !important; } #license-app .step-title { gap: 8px !important; margin-bottom: 5px !important; } #license-app .step-index { min-width: 30px !important; padding: 3px 7px !important; font-size: 12px !important; font-weight: 900 !important; } #license-app .step-name { font-size: 13px !important; font-weight: 900 !important; line-height: 1.2 !important; } #license-app .step-detail { font-size: 12px !important; line-height: 1.42 !important; } @media (min-width: 980px) { body[data-view="exam"] #license-app .panel-stage { min-height: 626px !important; } body[data-view="exam"] #license-app .panel-rail, body[data-view="exam"] #license-app .panel-progress { min-height: 626px !important; } } @media (max-width: 720px) { body[data-view="exam"] #license-app #main-stage { grid-template-columns: 1fr !important; } body[data-view="exam"] #license-app .question-panel, body[data-view="exam"] #license-app .feedback-panel, body[data-view="exam"] #license-app .actionbar { grid-column: 1 !important; grid-row: auto !important; width: 100% !important; } body[data-view="exam"] #license-app .actionbar-buttons { flex-wrap: wrap !important; } } body[data-view="module_intro"] #license-app > .actionbar, body[data-view="home"] #license-app > .actionbar, body[data-view="result"] #license-app > .actionbar { width: min(260px, calc(100% - 32px)) !important; max-width: 260px !important; margin: 12px 12px 0 auto !important; padding: 0 !important; min-height: 0 !important; justify-content: flex-end !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } body[data-view="module_intro"] #license-app > .actionbar::before, body[data-view="home"] #license-app > .actionbar::before, body[data-view="result"] #license-app > .actionbar::before, body[data-view="module_intro"] #license-app > .actionbar .actionbar-copy, body[data-view="home"] #license-app > .actionbar .actionbar-copy, body[data-view="result"] #license-app > .actionbar .actionbar-copy { display: none !important; } body[data-view="module_intro"] #license-app > .actionbar .actionbar-buttons, body[data-view="home"] #license-app > .actionbar .actionbar-buttons, body[data-view="result"] #license-app > .actionbar .actionbar-buttons { width: 100% !important; display: grid !important; grid-template-columns: 1fr !important; } /* ROAR web start layout: side actions on the horizontal rails, primary license CTA below the icon row. */ body[data-app-view="intro_ready"] .intro-start-panel { width: min(1040px, calc(100vw - 48px)) !important; display: grid !important; grid-template-columns: minmax(148px, 0.86fr) minmax(220px, 1.08fr) minmax(148px, 0.86fr) !important; grid-template-rows: var(--entry-control-height-compact) 56px !important; column-gap: clamp(28px, 9vw, 152px) !important; row-gap: clamp(126px, 18vh, 166px) !important; align-items: center !important; justify-items: center !important; margin-bottom: 0 !important; } @keyframes roarIntroButtonInLeft { 0% { opacity: 0; transform: translate3d(-54px, 138px, 0) scale(0.72); } 82% { opacity: 1; transform: translate3d(-54px, 138px, 0) scale(0.98); } 94% { opacity: 1; transform: translate3d(-54px, 138px, 0) scale(1.025); } 100% { opacity: 1; transform: translate3d(-54px, 138px, 0) scale(1); } } @keyframes roarIntroButtonInRight { 0% { opacity: 0; transform: translate3d(70px, 138px, 0) scale(0.72); } 82% { opacity: 1; transform: translate3d(70px, 138px, 0) scale(0.98); } 94% { opacity: 1; transform: translate3d(70px, 138px, 0) scale(1.025); } 100% { opacity: 1; transform: translate3d(70px, 138px, 0) scale(1); } } @keyframes roarIntroButtonInCenter { 0% { opacity: 0; transform: translate3d(0, -10px, 0) scale(0.72); } 82% { opacity: 1; transform: translate3d(0, -10px, 0) scale(0.98); } 94% { opacity: 1; transform: translate3d(0, -10px, 0) scale(1.025); } 100% { opacity: 1; transform: translate3d(0, -10px, 0) scale(1); } } body[data-app-view="intro_ready"] #intro-login-button.entry-button, body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button { width: min(100%, 210px) !important; min-height: 40px !important; grid-row: 1 !important; border-radius: var(--entry-control-radius) !important; font-size: 0.78rem !important; letter-spacing: 0.06em !important; } body[data-app-view="intro_ready"] #intro-login-button.entry-button { grid-column: 1 !important; animation: roarIntroButtonInLeft 2600ms ease-out both !important; animation-delay: 0ms !important; } body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button { grid-column: 3 !important; animation: roarIntroButtonInRight 2600ms ease-out both !important; animation-delay: 0ms !important; } body[data-app-view="intro_ready"] #intro-start-button.entry-button { width: min(100%, 282px) !important; min-height: 52px !important; grid-column: 2 !important; grid-row: 2 !important; top: clamp(44px, calc(8vh - 10px), 64px) !important; font-size: 0.92rem !important; letter-spacing: 0.1em !important; animation: roarIntroButtonInCenter 2600ms ease-out both !important; animation-delay: 0ms !important; } body[data-app-view="intro_ready"] .entry-button { color: rgba(255, 244, 209, 0.9) !important; transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease !important; } body[data-app-view="intro_ready"] .entry-button-secondary { background: linear-gradient(180deg, rgba(12, 18, 22, 0.86), rgba(4, 8, 12, 0.84)), linear-gradient(90deg, rgba(60, 195, 191, 0.08), transparent 58%) !important; border-color: rgba(60, 195, 191, 0.38) !important; } body[data-app-view="intro_ready"] .entry-button-primary { border-color: rgba(255, 122, 32, 0.66) !important; box-shadow: 0 14px 24px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 244, 209, 0.08), inset 0 -10px 18px rgba(0, 0, 0, 0.24) !important; } body[data-app-view="intro_ready"] .entry-button:hover:not(:disabled) { transform: translate3d(0, -2px, 0) !important; border-color: rgba(255, 122, 32, 0.72) !important; filter: brightness(1.08) saturate(1.08) !important; box-shadow: 0 18px 30px rgba(0, 0, 0, 0.4), 0 0 24px rgba(255, 112, 32, 0.2), var(--entry-focus-ring) !important; } body[data-app-view="intro_ready"] .entry-button:focus-visible { border-color: rgba(255, 122, 32, 0.58) !important; box-shadow: 0 14px 24px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 244, 209, 0.06) !important; } body[data-app-view="intro_ready"] .entry-button-secondary:hover:not(:disabled) { border-color: rgba(60, 195, 191, 0.62) !important; box-shadow: 0 16px 28px rgba(0, 0, 0, 0.38), 0 0 22px rgba(60, 195, 191, 0.2), var(--entry-focus-ring) !important; } body[data-app-view="intro_ready"] .entry-button-secondary:focus-visible { border-color: rgba(60, 195, 191, 0.5) !important; } @media (prefers-reduced-motion: reduce) { body[data-app-view="intro_ready"] #intro-login-button.entry-button, body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button, body[data-app-view="intro_ready"] #intro-start-button.entry-button { animation: none !important; } } @media (max-width: 760px) { body[data-app-view="intro_ready"] .intro-start-panel { width: min(340px, calc(100vw - 28px)) !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: 44px 52px !important; column-gap: 10px !important; row-gap: 12px !important; margin-bottom: clamp(18px, 5vh, 44px) !important; } body[data-app-view="intro_ready"] #intro-login-button.entry-button, body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button { width: 100% !important; min-height: 42px !important; grid-row: 1 !important; font-size: 0.72rem !important; } body[data-app-view="intro_ready"] #intro-login-button.entry-button { grid-column: 1 !important; } body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button { grid-column: 2 !important; } body[data-app-view="intro_ready"] #intro-start-button.entry-button { width: min(100%, 280px) !important; grid-column: 1 / -1 !important; grid-row: 2 !important; min-height: 50px !important; top: 0 !important; font-size: 0.86rem !important; } } /* ROAR local fix: align intro side buttons with Discord rail lines. */ @media (min-width: 761px) { body[data-app-view="intro_ready"] #intro-login-button.entry-button { transform: translate3d(-54px, 138px, 0) !important; } body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button { transform: translate3d(70px, 138px, 0) !important; } body[data-app-view="intro_ready"] #intro-login-button.entry-button:hover:not(:disabled), body[data-app-view="intro_ready"] #intro-login-button.entry-button:focus-visible { transform: translate3d(-54px, 136px, 0) !important; } body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button:hover:not(:disabled), body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button:focus-visible { transform: translate3d(70px, 136px, 0) !important; } body[data-app-view="intro_ready"] #intro-start-button.entry-button:hover:not(:disabled) { transform: translate3d(0, -12px, 0) !important; } } /* ROAR exam actionbar fine tune: narrower and lower, layout unchanged. */ @media (min-width: 981px) { body[data-view="exam"] #license-app .actionbar { width: 86% !important; max-width: 218px !important; justify-self: end !important; margin-top: 42px !important; } body[data-view="exam"] #license-app .actionbar-buttons { width: 100% !important; } body[data-view="exam"] #license-app .actionbar-buttons button, body[data-view="exam"] #license-app .actionbar-buttons button.primary, body[data-view="exam"] #license-app .actionbar-buttons button.secondary { width: 100% !important; min-width: 0 !important; max-width: none !important; } }