:root {
  --background: #f7f8fa;
  --foreground: #0b0c0f;
  --muted: #687284;
  --muted-soft: #a1a9b6;
  --border: rgba(12, 16, 24, 0.11);
  --border-strong: rgba(12, 16, 24, 0.2);
  --surface: #fff;
  --navy: #274678;
  --blue: #2563eb;
  --orange: #ed7b28;
  --danger: #b42318;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", Times, serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --content-width: 1280px;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; background: var(--background); }
body { margin: 0; min-height: 100vh; color: var(--foreground); background: var(--background); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input { font: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

.site-header {
  position: relative;
  z-index: 20;
  height: 64px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(12,16,24,.08);
  background: rgba(250,250,249,.9);
  backdrop-filter: blur(12px);
}
.site-header-inner { width: min(var(--content-width),calc(100% - 64px)); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.header-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.header-brand strong { font-size: 16px; letter-spacing: -.01em; }
.logo-tile { position: relative; width: 36px; height: 36px; display: grid; flex: 0 0 auto; place-items: center; background: #0d0e11; }
.logo-tile::after { position: absolute; right: -4px; bottom: -4px; width: 100%; height: 4px; background: var(--orange); content: ""; }
.logo-tile-small { width: 30px; height: 30px; }
.hongli-mark { width: 27px; height: 27px; display: block; }
.logo-tile-small .hongli-mark { width: 22px; height: 22px; }
.back-link, .section-eyebrow, .secure-label, .product-lockup > span:last-child, .module-heading p, .paper-count, .site-footer { font-family: var(--font-mono); text-transform: uppercase; }
.back-link { position: relative; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9.5px; letter-spacing: .18em; line-height: 1.4; text-decoration: none; opacity: .68; transition: color 500ms ease-out,opacity 500ms ease-out; }
.back-link:hover, .back-link:focus-visible { color: var(--navy); opacity: .9; }
.back-link > span { font-size: 11px; line-height: 1; letter-spacing: 0; transform: translateY(-.5px); }

.scene-transition {
  --hero-scale: 1;
  --hero-y: 0px;
  --hero-z: 0px;
  --hero-tilt: 0deg;
  --hero-opacity: 1;
  --hero-blur: 0px;
  --preview-x: 0px;
  --preview-z: 0px;
  --auth-x: 0px;
  --auth-z: 0px;
  --resources-y: 82px;
  --resources-scale: .97;
  --resources-opacity: .12;
  --resources-blur: 1.2px;
  --ink-opacity: 1;
  --ink-saturation: 1;
  --ink-contrast: 1;
  --ink-brightness: 1;
  --ink-blur: 0px;
  --ink-veil: 0;
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  background: #f9fbfd;
}
.product-hero { position: sticky; top: 0; z-index: 2; min-height: 620px; height: 100svh; overflow: hidden; padding: clamp(30px,4.5vh,48px) clamp(24px,3vw,40px) 48px; border-bottom: 0; background: transparent; perspective: 1400px; perspective-origin: 50% 42%; }
.ink-canvas { position: fixed; z-index: 0; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); display: block; opacity: var(--ink-opacity); filter: saturate(var(--ink-saturation)) contrast(var(--ink-contrast)) brightness(var(--ink-brightness)) blur(var(--ink-blur)); background: #fff; pointer-events: none; will-change: opacity,filter; }
.ink-wash { position: fixed; z-index: 1; inset: 0; pointer-events: none; background: rgba(255,255,255,var(--ink-veil)); }
.hero-grid { position: relative; z-index: 2; width: min(var(--content-width),100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0,816px) minmax(374px,400px); gap: 64px; align-items: start; opacity: var(--hero-opacity); filter: blur(var(--hero-blur)); transform: translate3d(0,var(--hero-y),var(--hero-z)) rotateX(var(--hero-tilt)) scale(var(--hero-scale)); transform-origin: 50% 38%; transform-style: preserve-3d; backface-visibility: hidden; will-change: transform,opacity,filter; }
.preview-card, .login-card, .resource-card { border: 1px solid rgba(12,16,24,.085); background: rgba(250,251,252,.86); box-shadow: 0 18px 54px -44px rgba(11,12,15,.4); backdrop-filter: blur(6px); }
.preview-card { min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; transform: translate3d(var(--preview-x),0,var(--preview-z)); transform-style: preserve-3d; will-change: transform; }
.preview-copy { position: relative; z-index: 2; padding: 0 4px; }
.preview-copy::before { position: absolute; z-index: -1; inset: -14px -22px -12px; border-radius: 50%; background: radial-gradient(ellipse at 30% 46%,rgba(255,255,255,.2),rgba(255,255,255,.08) 52%,rgba(255,255,255,0) 80%); filter: blur(16px); content: ""; pointer-events: none; }
.preview-intro > .back-link { margin-bottom: 18px; }
.section-eyebrow { margin: 0 0 12px; color: var(--blue); font-size: 9px; font-weight: 600; letter-spacing: .2em; }
.preview-intro h1 { margin: 0; font-size: clamp(29px,2.15vw,34px); font-weight: 700; line-height: 1.08; letter-spacing: -.03em; }
.preview-intro > p:last-child { max-width: 760px; margin: 14px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.preview-links { display: flex; align-items: center; gap: 32px; margin: 17px 0 0; }
.preview-links a { display: inline-flex; align-items: center; gap: 7px; color: var(--blue); font-size: 12px; font-weight: 550; text-decoration: none; }
.preview-links svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.product-window { margin-top: clamp(14px,1.8vh,22px); padding: 6px; overflow: hidden; border: 1px solid rgba(255,255,255,.72); border-radius: 19px; background: linear-gradient(145deg,rgba(255,255,255,.38),rgba(239,245,252,.16)); box-shadow: 0 28px 64px -40px rgba(25,43,74,.46),inset 0 1px 0 rgba(255,255,255,.82); backdrop-filter: blur(22px) saturate(1.35); -webkit-backdrop-filter: blur(22px) saturate(1.35); }
.product-window img { width: 100%; aspect-ratio: 2 / 1; display: block; border-radius: 12px; object-fit: contain; }
.product-window .product-demo-media { aspect-ratio: 80 / 49; object-fit: contain; object-position: center; }
.contact-section { min-height: 104px; display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 32px; align-items: center; margin-top: 20px; padding: 20px 4px 16px; border-top: 1px solid rgba(12,16,24,.14); }
.contact-heading h2 { margin: 0; font-family: var(--font-serif); font-size: 25px; font-weight: 400; line-height: 1.05; letter-spacing: -.03em; }
.contact-heading p { max-width: 200px; margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.contact-flow { display: grid; grid-template-columns: minmax(0,1fr); margin: 0; padding: 0; list-style: none; }
.contact-flow li { position: relative; min-width: 0; display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 14px; align-items: start; }
.contact-flow li + li::before { position: absolute; top: 29px; left: -17px; color: rgba(104,114,132,.58); content: "→"; font-size: 16px; line-height: 1; transform: translateY(-50%); }
.contact-flow li > div { min-width: 0; display: grid; grid-template-rows: 12px 24px auto; align-content: start; }
.contact-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-top: 7px; border: 1px solid rgba(37,99,235,.1); border-radius: 50%; color: var(--blue); background: rgba(255,255,255,.34); box-shadow: inset 0 1px 0 rgba(255,255,255,.7),0 14px 28px -22px rgba(37,99,235,.75); backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35); }
.contact-icon-review { color: #7a55d9; background: rgba(122,85,217,.075); }
.contact-icon-invite { color: #168d73; background: rgba(22,141,115,.08); }
.contact-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.contact-step-number { height: 12px; display: block; color: var(--blue); font-family: var(--font-mono); font-size: 9px; font-weight: 650; letter-spacing: .12em; line-height: 12px; }
.contact-flow h3 { height: 24px; margin: 0; font-family: var(--font-serif); font-size: 18px; font-weight: 600; line-height: 24px; }
.contact-flow p, .contact-flow a { display: block; margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
.contact-flow a { color: var(--blue); font-weight: 600; }
.contact-flow .contact-icon-email + div a { font-size: 11px; white-space: nowrap; }
.window-chrome { height: 34px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 14px; border-bottom: 1px solid rgba(26,40,64,.1); color: #6d788a; background: linear-gradient(#e9edf3,#e3e8f0); font-size: 9px; font-weight: 650; letter-spacing: .04em; }
.window-dots { display: flex; align-items: center; gap: 7px; }
.window-dots span { width: 9px; height: 9px; border-radius: 50%; background: #ff6158; }
.window-dots span:nth-child(2) { background: #ffbd2e; }
.window-dots span:nth-child(3) { background: #28c840; }
.app-preview { height: 408px; display: grid; grid-template-columns: 184px minmax(0,1fr); background: #f3f6fb; }
.app-sidebar { position: relative; padding: 16px 12px; border-right: 1px solid #dbe2ec; background: rgba(255,255,255,.88); }
.app-brand-mini { display: flex; align-items: center; gap: 7px; min-height: 27px; font-size: 10px; }
.mini-brand-dot { width: 16px; height: 16px; border: 3px solid #2c65bb; border-top-color: #ed7b28; border-radius: 50%; }
.app-sidebar button { position: absolute; top: 12px; right: 10px; min-height: 24px; padding: 0 10px; border: 0; border-radius: 6px; color: white; background: var(--blue); font-size: 9px; }
.app-sidebar label { display: block; margin: 15px 0 6px; color: #778298; font-size: 8px; font-weight: 600; }
.mock-select, .mock-chat { min-height: 29px; display: flex; align-items: center; justify-content: space-between; padding: 0 9px; border: 1px solid #d7dfeb; border-radius: 6px; color: #293245; background: #fff; font-size: 8px; }
.mock-chat { justify-content: flex-start; }
.app-workspace { position: relative; min-width: 0; }
.app-toolbar { height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 13px; border-bottom: 1px solid #dbe2ec; background: rgba(255,255,255,.9); font-size: 9px; }
.app-toolbar > div { display: flex; align-items: center; gap: 9px; }
.toolbar-menu { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #dce3ec; border-radius: 5px; color: #617087; }
.toolbar-actions { gap: 5px !important; }
.toolbar-actions span { padding: 5px 7px; border: 1px solid #dbe2ec; border-radius: 5px; color: #5f6a7d; background: #fff; font-size: 7px; }
.assistant-stage { display: flex; align-items: flex-start; gap: 9px; padding: 20px 16px 72px; }
.assistant-avatar { width: 23px; height: 23px; display: grid; flex: 0 0 auto; place-items: center; border: 2px solid #2c65bb; border-radius: 50%; color: #ed7b28; background: #fff; font-size: 7px; font-weight: 800; }
.assistant-message { width: min(100%,480px); padding: 17px; border: 1px solid #e0e6ef; border-radius: 8px; background: white; box-shadow: 0 12px 28px -24px #33435f; }
.assistant-message strong { font-size: 10px; line-height: 1.45; }
.assistant-message p { margin: 12px 0 0; color: #59667a; font-size: 8px; line-height: 1.55; }
.assistant-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.assistant-actions span { padding: 7px 10px; border-radius: 5px; color: #fff; background: var(--blue); box-shadow: 0 5px 12px -8px rgba(37,99,235,.9); font-size: 7px; font-weight: 600; }
.mock-composer { position: absolute; right: 12px; bottom: 12px; left: 12px; min-height: 38px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 9px; padding: 4px 5px 4px 11px; border: 1px solid #d7e0ec; border-radius: 9px; color: #99a4b6; background: rgba(255,255,255,.9); box-shadow: 0 8px 24px -18px #33435f; font-size: 8px; }
.mock-composer i { color: #59677b; font-size: 13px; font-style: normal; }
.mock-composer strong { padding: 8px 12px; border-radius: 6px; color: white; background: var(--blue); font-size: 8px; }

.auth-column { width: 100%; padding-top: 56px; transform: translate3d(var(--auth-x),0,var(--auth-z)); transform-style: preserve-3d; will-change: transform; }
.login-card { position: relative; width: 100%; min-width: 0; padding: 24px; overflow: hidden; isolation: isolate; border: 1px solid rgba(255,255,255,.72); border-radius: 24px; background: linear-gradient(145deg,rgba(255,255,255,.36),rgba(242,247,252,.18)); box-shadow: 0 34px 76px -44px rgba(23,35,58,.42),0 14px 34px -27px rgba(39,70,120,.26),inset 0 1px 0 rgba(255,255,255,.88),inset 0 -1px 0 rgba(82,99,126,.07); backdrop-filter: blur(30px) saturate(1.46); -webkit-backdrop-filter: blur(30px) saturate(1.46); }
.login-card::before { position: absolute; z-index: 2; inset: 0; padding: 1px; border-radius: inherit; background: linear-gradient(132deg,rgba(255,107,107,.34),rgba(78,205,196,.22) 36%,rgba(255,255,255,.78) 57%,rgba(168,85,247,.2)); content: ""; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.login-card::after { position: absolute; z-index: 0; inset: 1px; border-radius: 23px; background: linear-gradient(180deg,rgba(255,255,255,.2),transparent 32%); box-shadow: inset 0 1px 0 rgba(255,255,255,.42); content: ""; pointer-events: none; }
.login-card > * { position: relative; z-index: 1; }
.login-card-header { display: grid; grid-template-columns: 62px minmax(0,1fr); align-items: center; gap: 16px; margin-bottom: 10px; }
.product-lockup { display: inline-flex; align-items: center; gap: 11px; }
.ai-rock-logo { width: 62px; height: 64px; display: block; flex: 0 0 auto; object-fit: contain; }
.product-lockup > span:last-child { color: var(--navy); font-size: 11.5px; font-weight: 650; letter-spacing: .19em; white-space: nowrap; }
.secure-label { color: var(--muted); font-size: 9px; letter-spacing: .2em; white-space: nowrap; }
.login-intro { margin: 0; text-align: left; }
.login-intro h2 { margin: 0; color: var(--navy); font-family: var(--font-sans); font-size: clamp(31px,2.35vw,36px); font-weight: 720; line-height: 1; letter-spacing: .025em; }
.login-intro p:not(.section-eyebrow) { max-width: 390px; margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.login-intro-copy { margin: 0 0 20px; }
.auth-mode { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; margin-bottom: 12px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: rgba(230,233,238,.58); }
.auth-mode button, .auth-mode a { min-height: 34px; display: flex; align-items: center; justify-content: center; padding: 0 12px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 500; text-decoration: none; }
.auth-mode button { color: var(--foreground); background: rgba(255,255,255,.84); box-shadow: 0 1px 4px rgba(11,12,15,.09); }
.auth-mode a { transition: color 180ms ease,background-color 180ms ease; }
.auth-mode a:hover { color: var(--foreground); background: rgba(255,255,255,.42); }
.auth-form { margin: 0; }
.form-module { padding: 16px; border: 1px solid rgba(255,255,255,.58); border-radius: 18px; background: rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.58); backdrop-filter: blur(20px) saturate(1.25); -webkit-backdrop-filter: blur(20px) saturate(1.25); }
.module-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 10px; }
.module-heading p { margin: 0; color: var(--muted); font-size: 9px; letter-spacing: .18em; }
.module-heading strong { display: block; margin: 0; font-size: 12px; font-weight: 550; }
.module-icon { width: 30px; height: 30px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: var(--muted); }
.module-icon svg, .password-toggle svg, .resource-icon svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.module-icon svg { width: 14px; height: 14px; stroke-width: 1.5; }
.field-group + .field-group { margin-top: 12px; }
.field-group label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 10px; font-weight: 500; }
.field-group label span { color: var(--orange); }
.field-group input { width: 100%; min-height: 42px; padding: 0 14px; border: 1px solid rgba(255,255,255,.72); border-radius: 12px; outline: none; color: var(--foreground); background: rgba(255,255,255,.44); box-shadow: inset 0 0 0 1px rgba(12,16,24,.055); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-size: 12.5px; transition: border-color 500ms ease-out,box-shadow 500ms ease-out,background-color 500ms ease-out; }
.field-group input::placeholder { color: var(--muted-soft); }
.field-group input:hover { border-color: var(--border-strong); }
.field-group input:focus { border-color: rgba(11,12,15,.74); background: var(--surface); box-shadow: 0 0 0 4px rgba(11,12,15,.08); }
.field-group input[aria-invalid="true"] { border-color: rgba(180,35,24,.58); box-shadow: 0 0 0 4px rgba(180,35,24,.08); }
.password-field { position: relative; }
.password-field input { padding-right: 46px; }
.password-toggle { position: absolute; top: 50%; right: 4px; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; transform: translateY(-50%); }
.password-toggle:hover { color: var(--foreground); background: rgba(11,12,15,.04); }
.password-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.forgot-link { display: block; width: max-content; margin: 8px 0 0 auto; color: rgba(39,70,120,.82); font-size: 10px; text-align: right; text-decoration: underline; text-underline-offset: 2px; }
.primary-button { width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; padding: 0 18px; border: 1px solid #090b0e; border-radius: 12px; color: #fff; background: #090b0e; box-shadow: 0 10px 20px -14px rgba(9,11,14,.8); font-size: 12px; font-weight: 600; cursor: pointer; transition: transform 500ms ease-out,opacity 500ms ease-out,box-shadow 500ms ease-out; }
.primary-button:hover { opacity: .94; box-shadow: 0 13px 23px -14px rgba(9,11,14,.9); }
.primary-button:active { transform: translateY(0); }
.primary-button:disabled { opacity: .55; cursor: wait; transform: none; }
.primary-button.is-loading span:first-child::after { width: 10px; height: 10px; display: inline-block; margin-left: 8px; border: 2px solid rgba(255,255,255,.42); border-top-color: #fff; border-radius: 50%; content: ""; vertical-align: -1px; animation: button-spin 700ms linear infinite; }
.auth-support { margin-top: 10px; color: var(--muted); font-size: 9.5px; line-height: 1.45; text-align: center; }
.auth-support p { margin: 0; }
.auth-inline-link { display: inline-block; color: rgba(39,70,120,.82); font-weight: 600; text-decoration: none; }
.message { min-height: 0; margin: 0; color: var(--danger); font-size: 11px; line-height: 1.45; }
.message:not(:empty) { margin-top: 12px; padding: 9px 11px; border: 1px solid rgba(180,35,24,.15); border-radius: 10px; background: rgba(180,35,24,.055); }
.mfa-back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 28px; padding: 0; border: 0; color: var(--muted); background: transparent; font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; cursor: pointer; }
.mfa-intro { margin: 20px 0 26px; }
.mfa-view .field-group input { font-family: var(--font-mono); font-size: 19px; letter-spacing: .2em; text-align: center; }

.learning-resources { position: relative; z-index: 4; width: min(var(--content-width),calc(100% - 64px)); margin: var(--resources-collapsed-margin,-122px) auto 0; padding: 30px 0 0; scroll-margin-top: 24px; }
.learning-resources.is-expanded { padding-bottom: 100px; }
.scene-transition:not(.resources-active) .resources-grid { pointer-events: none; }
.scene-transition.resources-focused .hero-grid { pointer-events: none; }
.resources-heading { width: 100%; display: flex; align-items: end; justify-content: space-between; gap: 48px; padding: 18px 4px 0; border-top: 1px solid rgba(12,16,24,.14); }
.resources-heading h2 { margin: 0; font-family: var(--font-serif); font-size: 24px; font-weight: 400; line-height: 1.12; letter-spacing: -.025em; }
.resources-heading p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.resources-heading-actions { display: flex; align-items: center; gap: 28px; padding-bottom: 2px; }
.resources-shortcuts { display: flex; align-items: center; gap: 50px; padding-bottom: 4px; }
.resources-shortcuts a { display: inline-flex; align-items: center; gap: 7px; color: var(--blue); font-size: 12px; text-decoration: none; white-space: nowrap; }
.resources-shortcuts svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.resources-toggle { width: 34px; height: 34px; display: grid; flex: 0 0 auto; place-items: center; padding: 0; border: 1px solid rgba(37,99,235,.14); border-radius: 50%; color: var(--blue); background: rgba(255,255,255,.52); box-shadow: 0 10px 22px -18px rgba(39,70,120,.7),inset 0 1px 0 rgba(255,255,255,.84); cursor: pointer; transition: color 500ms ease-out,background-color 500ms ease-out,border-color 500ms ease-out,box-shadow 500ms ease-out; }
.resources-toggle:hover { border-color: rgba(37,99,235,.28); background: rgba(255,255,255,.78); box-shadow: 0 13px 25px -18px rgba(39,70,120,.85),inset 0 1px 0 #fff; }
.resources-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform 500ms cubic-bezier(.16,1,.3,1); }
.learning-resources.is-expanded .resources-toggle svg { transform: rotate(180deg); }
.resources-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; opacity: 0; transition: grid-template-rows 620ms cubic-bezier(.16,1,.3,1),opacity 420ms ease-out,visibility 0s linear 620ms; }
.resources-panel-inner { min-height: 0; overflow: hidden; }
.learning-resources.is-expanded .resources-panel { grid-template-rows: 1fr; visibility: visible; opacity: 1; transition: grid-template-rows 620ms cubic-bezier(.16,1,.3,1),opacity 500ms ease-out 80ms,visibility 0s linear 0s; }
.resources-grid { display: grid; grid-template-columns: minmax(300px,.72fr) minmax(0,1.45fr); gap: 20px; align-items: stretch; margin-top: 88px; opacity: var(--resources-opacity); filter: blur(var(--resources-blur)); transform: translate3d(0,var(--resources-y),0) scale(var(--resources-scale)); transform-origin: 50% 0; will-change: transform,opacity,filter; }
.resource-card { padding: 24px; border-radius: 20px; background: rgba(255,255,255,.78); transition: transform 180ms ease,border-color 180ms ease,box-shadow 180ms ease; }
.resource-card-heading { display: flex; align-items: center; gap: 12px; }
.resource-card-heading .section-eyebrow { margin: 0; font-size: clamp(11.5px,.82vw,13px); font-weight: 800; letter-spacing: .15em; line-height: 1.2; }
.resource-icon { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(37,99,235,.12); border-radius: 50%; color: var(--blue); background: rgba(37,99,235,.055); }
.resource-icon svg { width: 18px; height: 18px; stroke-width: 1.55; }
.tutorial-card { min-height: 390px; display: flex; flex-direction: column; }
.publications-card { grid-column: 1 / -1; }
.tutorial-resource-inline { background: rgba(37,99,235,.035); }
.tutorial-resource-inline h3 { font-weight: 650; }
.tutorial-preview { position: relative; aspect-ratio: 16 / 9; display: block; margin: 20px 0 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.68); border-radius: 14px; background: rgba(237,242,249,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.7),0 18px 36px -30px rgba(17,34,68,.72); text-decoration: none; }
.tutorial-preview img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; filter: saturate(.84) contrast(.94) brightness(.92); transition: transform 700ms cubic-bezier(.16,1,.3,1),filter 700ms ease-out; }
.tutorial-preview-scrim { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(12,26,49,.02),rgba(12,26,49,.14)); }
.tutorial-preview-play { position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.78); border-radius: 50%; color: #fff; background: rgba(15,27,48,.5); box-shadow: 0 14px 30px -18px rgba(4,13,30,.82),inset 0 1px 0 rgba(255,255,255,.35); backdrop-filter: blur(12px); transform: translate(-50%,-50%); }
.tutorial-preview-play svg { width: 22px; height: 22px; fill: currentColor; stroke: currentColor; stroke-width: 1.2; }
.tutorial-preview-label { position: absolute; right: 14px; bottom: 12px; color: rgba(255,255,255,.94); font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: .16em; text-shadow: 0 1px 6px rgba(8,20,40,.46); }
.tutorial-preview:hover img, .tutorial-preview:focus-visible img { filter: saturate(.96) contrast(.98) brightness(.96); transform: scale(1.025); }
.tutorial-copy { margin: 0; padding: 0 0 18px; }
.tutorial-copy h3 { max-width: 420px; margin: 0; font-size: 18px; line-height: 1.3; letter-spacing: -.02em; }
.tutorial-copy p { margin: 0; color: var(--muted); font-size: 13px; }
.resource-primary-link { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font-size: 12px; font-weight: 600; text-decoration: none; }
.publications-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.paper-count { color: var(--muted); font-size: clamp(11px,.76vw,12.5px); font-weight: 750; letter-spacing: .16em; }
.paper-list { margin: 20px 0 0; padding: 0; border-top: 1px solid var(--border); list-style: none; }
.paper-list li { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 15px 0; }
.paper-list li + li { border-top: 1px solid var(--border); }
.paper-number { align-self: start; padding-top: 0; color: rgba(39,70,120,.72); font-family: var(--font-mono); font-size: clamp(12px,.82vw,13px); font-weight: 800; line-height: 1.4; }
.paper-copy h3 { margin: 0; font-size: 13px; font-weight: 620; line-height: 1.4; }
.paper-copy p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.paper-actions { display: flex; align-items: center; gap: 13px; }
.paper-actions a { color: var(--blue); font-size: 10.5px; font-weight: 700; letter-spacing: .045em; text-decoration: none; white-space: nowrap; }

.site-footer { width: min(var(--content-width),calc(100% - 64px)); min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 auto; border-top: 1px solid var(--border); color: var(--muted); font-size: 9px; letter-spacing: .14em; }
.site-footer a { text-transform: none; letter-spacing: 0; text-decoration: none; }
.underline-draw { position: relative; width: fit-content; }
.underline-draw::after { position: absolute; right: 0; bottom: -2px; left: 0; height: 1px; background: currentColor; content: ""; transform: scaleX(0); transform-origin: right; transition: transform 280ms cubic-bezier(.33,1,.68,1); }
.underline-draw:hover::after, .underline-draw:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.hover-lift:hover { transform: translateY(-2px); }
.fade-in-up { animation: fade-in-up 650ms cubic-bezier(.16,1,.3,1) backwards; }
.login-card.fade-in-up { animation-delay: 90ms; }
@keyframes fade-in-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes button-spin { to { transform: rotate(360deg); } }

@media (max-width: 1180px) {
  .hero-grid { grid-template-columns: minmax(0,1fr) minmax(360px,380px); gap: 42px; }
  .contact-section { grid-template-columns: 180px minmax(0,1fr); gap: 24px; }
  .app-preview { grid-template-columns: 145px minmax(0,1fr); }
  .toolbar-actions span:nth-child(2), .toolbar-actions span:nth-child(3) { display: none; }
  .paper-list li { grid-template-columns: 24px minmax(0,1fr); }
  .paper-actions { grid-column: 2; }
}
@media (min-width: 1041px) {
  body.login-page.resources-closed { height: 100svh; max-height: 100svh; overflow-y: hidden; }
  body.login-page.resources-open { height: auto; max-height: none; overflow-y: auto; }
}
@media (min-width: 1041px) and (max-height: 820px) {
  .product-hero { padding-top: clamp(22px,3.6vh,30px); }
  .product-window { margin-top: 14px; aspect-ratio: auto; }
  .product-window img { aspect-ratio: 2.12; }
  .contact-section { min-height: 96px; margin-top: 16px; padding-block: 16px 12px; }
}
@media (min-width: 1041px) and (max-height: 680px) {
  .product-hero { padding-top: 18px; }
  .preview-intro > .back-link { margin-bottom: 10px; }
  .preview-intro h1 { font-size: 30px; }
  .preview-intro > p:last-child { margin-top: 9px; font-size: 12.5px; line-height: 1.45; }
  .product-window { margin-top: 10px; }
  .product-window img { aspect-ratio: 2.34; }
  .contact-section { min-height: 76px; margin-top: 10px; padding-block: 10px 8px; }
  .contact-heading h2 { font-size: 23px; }
  .contact-heading p { margin-top: 5px; font-size: 10px; line-height: 1.35; }
  .contact-flow li { grid-template-columns: 42px minmax(0,1fr); gap: 12px; }
  .contact-icon { width: 42px; height: 42px; margin-top: 5px; }
}
@media (max-width: 1040px) {
  .site-header-inner, .learning-resources, .site-footer { width: min(100% - 40px,var(--content-width)); }
  .product-hero { position: relative; height: auto; padding: 24px 20px 40px; perspective: none; }
  .hero-grid { display: flex; flex-direction: column; opacity: 1; filter: none; transform: none; }
  .auth-column { order: 1; max-width: 560px; margin: 0 auto; padding-top: 0; transform: none; }
  .preview-card { order: 2; width: 100%; min-height: 0; transform: none; }
  .learning-resources { margin-top: 0; }
  .resources-heading { width: 100%; }
  .resources-grid { opacity: 1; filter: none; transform: none; }
  .scene-transition:not(.resources-active) .resources-grid { pointer-events: auto; }
  .resources-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
  .resources-heading-actions { width: 100%; justify-content: space-between; }
  .resources-grid { grid-template-columns: 1fr; }
  .tutorial-card { min-height: 260px; }
  .site-footer { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 22px; }
}
@media (max-width: 600px) {
  .site-header { height: auto; min-height: 62px; }
  .site-header-inner { width: calc(100% - 28px); }
  .back-link { max-width: 190px; justify-content: flex-end; text-align: right; font-size: 8px; }
  .product-hero { padding: 16px 14px 30px; }
  .login-card { padding: 19px; border-radius: 20px; }
  .preview-copy { align-items: flex-start; flex-direction: column; gap: 12px; }
  .product-window { margin-top: 28px; }
  .contact-section { margin-top: 22px; padding-top: 16px; }
  .contact-heading { display: block; }
  .contact-flow { grid-template-columns: 1fr; gap: 14px; }
  .contact-flow li + li::before { display: none; }
  .app-preview { height: 330px; grid-template-columns: 106px minmax(0,1fr); }
  .app-sidebar { padding: 12px 8px; }
  .app-sidebar button { display: none; }
  .app-brand-mini { font-size: 7px; }
  .app-toolbar { padding-inline: 8px; }
  .toolbar-actions span { display: none; }
  .assistant-stage { padding: 14px 9px 62px; }
  .assistant-message { padding: 12px; }
  .assistant-actions span { padding: 6px; }
  .login-card-header { grid-template-columns: 56px minmax(0,1fr); gap: 14px; }
  .ai-rock-logo { width: 56px; height: 58px; }
  .login-intro h2 { font-size: 31px; }
  .secure-label { display: none; }
  .learning-resources { width: calc(100% - 28px); padding: 46px 0 52px; }
  .learning-resources.is-expanded { padding-bottom: 52px; }
  .resources-heading h2 { font-size: 31px; }
  .resource-card { padding: 19px; }
  .paper-list li { grid-template-columns: 22px minmax(0,1fr); }
  .paper-actions { grid-column: 2; flex-wrap: wrap; }
  .site-footer { width: calc(100% - 28px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .product-hero { position: relative; height: auto; perspective: none; }
  .hero-grid, .preview-card, .auth-column, .resources-grid { opacity: 1; filter: none; transform: none; }
  .learning-resources { margin-top: 0; }
  .scene-transition:not(.resources-active) .resources-grid { pointer-events: auto; }
  .fade-in-up, .primary-button.is-loading span:first-child::after { animation: none; }
  .fade-in-up { opacity: 1; transform: none; }
  .hover-lift:hover { transform: none; }
  .underline-draw::after, .primary-button, .resource-card, .password-toggle, .auth-mode a, .field-group input, .resources-panel, .resources-toggle, .resources-toggle svg { transition-duration: .01ms; }
}

/* Access-flow states and StyleKit tilt-3d adaptation. */
.preview-card { perspective: 1200px; perspective-origin: 50% 45%; }
.product-window {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --tilt-scale: 1;
  --tilt-shine: 0;
  position: relative;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale3d(var(--tilt-scale),var(--tilt-scale),var(--tilt-scale));
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform;
  transition: transform 190ms cubic-bezier(.16,1,.3,1),box-shadow 280ms ease-out;
}
.product-window-shine { position: absolute; z-index: 2; inset: 6px; border-radius: 12px; background: radial-gradient(circle at var(--shine-x,50%) var(--shine-y,50%),rgba(255,255,255,.3),transparent 46%); opacity: var(--tilt-shine); pointer-events: none; mix-blend-mode: soft-light; transition: opacity 220ms ease-out; }

.auth-view[hidden] { display: none !important; }
.login-card { transition: min-height 420ms cubic-bezier(.16,1,.3,1),padding 420ms cubic-bezier(.16,1,.3,1); }
.login-card-header { position: relative; z-index: 3; }
.auth-state-switch { margin: 13px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; text-align: center; }
.auth-text-button, .auth-secondary-link { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; color: var(--blue); background: transparent; font: inherit; font-weight: 650; cursor: pointer; }
.auth-state-heading { margin: 4px 0 17px; }
.auth-state-heading h3 { margin: 0; color: var(--navy); font-size: 25px; font-weight: 720; line-height: 1.08; letter-spacing: -.025em; }
.auth-state-heading p { margin: 9px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.48; }
.access-form { display: grid; gap: 10px; }
.access-form .field-group + .field-group { margin-top: 0; }
.field-group select, .field-group textarea { width: 100%; border: 1px solid rgba(255,255,255,.72); border-radius: 12px; outline: none; color: var(--foreground); background: rgba(255,255,255,.44); box-shadow: inset 0 0 0 1px rgba(12,16,24,.055); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font: 12.5px/1.4 var(--font-sans); transition: border-color 500ms ease-out,box-shadow 500ms ease-out,background-color 500ms ease-out; }
.field-group select { min-height: 42px; padding: 0 38px 0 14px; }
.field-group textarea { min-height: 68px; resize: vertical; padding: 11px 14px; }
.field-group textarea::placeholder { color: var(--muted-soft); }
.field-group select:hover, .field-group textarea:hover { border-color: var(--border-strong); }
.field-group select:focus, .field-group textarea:focus { border-color: rgba(11,12,15,.74); background: var(--surface); box-shadow: 0 0 0 4px rgba(11,12,15,.08); }
.field-group select[aria-invalid="true"], .field-group textarea[aria-invalid="true"] { border-color: rgba(180,35,24,.58); box-shadow: 0 0 0 4px rgba(180,35,24,.08); }
.auth-state-actions { display: grid; justify-items: center; gap: 8px; margin-top: 14px; color: var(--muted); font-size: 11px; }
.auth-state-actions p { margin: 0; }
.auth-secondary-link { color: rgba(39,70,120,.82); font-size: 10px; }
.auth-result-view { padding: 18px 0 4px; text-align: center; }
.auth-result-view .auth-state-heading { margin: 18px 0 24px; }
.auth-result-view .auth-state-heading p { max-width: 320px; margin-inline: auto; }
.auth-success-mark { width: 66px; height: 66px; display: grid; place-items: center; margin: 2px auto 0; border-radius: 50%; color: #fff; background: #24c79a; box-shadow: 0 18px 38px -23px rgba(18,153,117,.82),inset 0 1px 0 rgba(255,255,255,.4); }
.auth-success-mark svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.login-card[data-auth-view="request"] .login-intro h2,
.login-card[data-auth-view="activate"] .login-intro h2,
.login-card[data-auth-view="request-success"] .login-intro h2,
.login-card[data-auth-view="activation-success"] .login-intro h2 { font-size: 30px; }

@media (max-width: 600px) {
  .auth-state-heading h3 { font-size: 23px; }
  .access-form { gap: 9px; }
}

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .product-window { transform: none !important; transition: none; }
  .product-window-shine { display: none; }
}
:focus-visible { outline: 2px solid rgba(39,70,120,.72); outline-offset: 3px; }

/* Existing status and recovery screens retain their established structure. */
.status-shell { width: min(1100px,calc(100% - 40px)); margin: 40px auto; }
.status-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 24px; }
.status-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 16px; }
.status-grid article { display: grid; gap: 12px; padding: 24px; border: 1px solid var(--border); border-radius: 14px; background: white; }
.status-grid span, .status-grid small { color: var(--muted); }
.status-grid strong { font-size: 1.4rem; }
.status-links { display: flex; align-items: center; gap: 18px; }
.status-links a, .recoveryPanel a { color: var(--navy); font-weight: 700; text-decoration: none; }
code, pre { display: block; padding: 14px; border-radius: 8px; background: var(--background); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 600px) { .status-header { align-items: flex-start; flex-direction: column; } .status-links { flex-wrap: wrap; } }

/* Final editorial composition: one fluid container, one geometry system. */
html, body { overflow-x: hidden; }
.product-hero {
  position: relative;
  min-height: 0;
  height: auto;
  overflow: visible;
  padding: clamp(24px,4.2vh,44px) clamp(24px,4vw,64px) 0;
}
.hero-grid {
  width: min(100%,1200px);
  display: grid;
  grid-template-columns: minmax(0,1.62fr) minmax(340px,370px);
  grid-template-rows: auto auto auto;
  column-gap: clamp(34px,3.7vw,54px);
  row-gap: 0;
  align-items: start;
}
.preview-copy { grid-column: 1 / -1; grid-row: 1; padding: 0; }
.preview-intro > .back-link { margin-bottom: clamp(22px,2.7vh,28px); }
.preview-intro h1 {
  font-family: var(--font-serif);
  font-size: clamp(30px,2.35vw,41px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.035em;
}
.preview-intro > p:last-child {
  max-width: none;
  margin-top: clamp(8px,1.1vh,12px);
  color: var(--navy);
  font-size: clamp(14px,.92vw,15px);
  line-height: 1.48;
}
.preview-card { grid-column: 1; grid-row: 2; }
.product-window { margin-top: clamp(14px,1.8vh,22px); }
.product-window img { aspect-ratio: 2 / 1; object-fit: contain; }
.auth-column {
  grid-column: 2;
  grid-row: 2;
  width: clamp(340px,24vw,370px);
  max-width: 370px;
  justify-self: end;
  align-self: end;
  padding-top: 0;
}
.login-card { padding: clamp(22px,2vw,30px); }
.login-card-header { grid-template-columns: 62px minmax(0,1fr); }
.ai-rock-logo { width: 62px; height: 64px; }
.login-intro h2 { font-size: clamp(31px,2.35vw,36px); }
.login-card .auth-view#loginView { margin-top: clamp(18px,2.1vh,24px); }
.login-card .auth-state-switch { margin-top: clamp(18px,2.2vh,26px); text-align: right; }
.scene-transition.local-desert-background {
  background: #d7c5b7 url('../images/auth/local-desert-background.png') center / cover fixed no-repeat;
}
.scene-transition.local-desert-background .ink-canvas {
  opacity: 0;
}
.scene-transition.local-desert-background .ink-wash {
  background: rgba(255,255,255,.16);
}
.contact-section {
  position: relative;
  isolation: isolate;
  grid-column: 1 / -1;
  grid-row: 3;
  min-height: 0;
  display: grid;
  grid-template-columns: 52px auto;
  align-items: center;
  gap: clamp(18px,2vw,28px);
  margin-top: clamp(26px,3.2vh,38px);
  padding: clamp(14px,1.8vh,18px) 0;
  border-top: 1px solid rgba(12,16,24,.14);
  border-bottom: 1px solid rgba(12,16,24,.14);
}
.contact-icon { width: 48px; height: 48px; margin: 0; }
.contact-section h2 {
  margin: 0;
  padding-right: 0;
  border-right: 0;
  font-family: var(--font-serif);
  font-size: clamp(24px,1.7vw,30px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.025em;
  white-space: nowrap;
}
.contact-email { display: inline-flex; align-items: center; gap: 12px; color: var(--muted); font-size: clamp(12px,.9vw,14px); text-decoration: none; white-space: nowrap; }
.contact-email strong { color: var(--blue); font-weight: 500; }
.contact-email > span:last-child { margin-left: 8px; color: var(--blue); font-size: 20px; line-height: 1; }
.learning-resources {
  position: relative;
  z-index: 2;
  isolation: isolate;
  width: min(calc(100% - clamp(48px,8vw,128px)),1200px);
  margin: clamp(24px,3.1vh,36px) auto 0;
  padding: 0 0 clamp(26px,4vh,44px);
  scroll-margin-top: 24px;
}
.learning-resources.is-expanded { padding-bottom: 90px; }
.resources-heading {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px,.72fr) minmax(520px,1.28fr);
  align-items: start;
  gap: clamp(42px,5vw,72px);
  padding: 0;
  border: 0;
}
.resources-heading h2 { font-size: clamp(24px,1.7vw,32px); }
.resources-heading p { font-size: clamp(11px,.82vw,13px); }
.resources-index { display: grid; }
.resources-index button {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: 42px minmax(190px,1fr) auto 28px;
  align-items: center;
  gap: 16px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(12,16,24,.13);
  color: var(--foreground);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 500ms ease-out,background-color 500ms ease-out;
}
.resources-index button:first-child { border-top: 1px solid rgba(12,16,24,.13); }
.resources-index button:hover, .resources-index button:focus-visible { color: var(--blue); background: rgba(255,255,255,.18); }
.resource-index-number { color: var(--muted); font-family: var(--font-mono); font-size: 11px; }
.resource-index-title { display: inline-flex; align-items: center; gap: 18px; }
.resource-index-title svg { width: 22px; height: 22px; fill: none; stroke: var(--blue); stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.resource-index-title > span { display: grid; gap: 3px; }
.resource-index-title strong { font-family: var(--font-serif); font-size: clamp(15px,1.05vw,18px); font-weight: 400; }
.resource-index-title small { color: var(--muted); font-size: clamp(11px,.82vw,13px); line-height: 1.25; }
.resource-index-count { color: var(--muted); font-size: clamp(12px,.9vw,14px); white-space: nowrap; }
.resource-index-arrow {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  justify-self: end;
  border: 1px solid rgba(37,99,235,.16);
  border-radius: 50%;
  color: var(--blue);
  background: rgba(255,255,255,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82),0 12px 24px -20px rgba(39,70,120,.68);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.resource-index-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform 500ms cubic-bezier(.16,1,.3,1); }
.learning-resources.is-expanded .resource-index-arrow svg { transform: rotate(180deg); }
.resources-panel { margin-top: 0; }
.resources-grid { margin-top: clamp(28px,4vh,48px); }
.resource-card {
  border-color: rgba(255,255,255,.66);
  background: linear-gradient(145deg,rgba(255,255,255,.46),rgba(241,247,252,.24));
  box-shadow: 0 28px 70px -46px rgba(23,35,58,.4),inset 0 1px 0 rgba(255,255,255,.82);
  backdrop-filter: blur(32px) saturate(1.42);
  -webkit-backdrop-filter: blur(32px) saturate(1.42);
}
.site-footer { display: none; }

@media (min-width: 961px) {
  body.login-page.resources-closed { height: 100svh; max-height: 100svh; overflow-y: hidden; }
  body.login-page.resources-closed.auth-flow-expanded { height: auto; max-height: none; overflow-y: auto; }
  body.login-page.resources-open { height: auto; max-height: none; overflow-y: auto; }
  body.login-page.resources-open .product-hero { position: sticky; top: 0; height: 100svh; overflow: hidden; }
}

@media (max-width: 1180px) {
  .hero-grid { grid-template-columns: minmax(0,1fr) minmax(340px,370px); column-gap: clamp(30px,3vw,42px); }
  .auth-column { width: clamp(340px,31vw,370px); }
  .login-card { padding: 22px; }
  .contact-section { grid-template-columns: 46px auto; gap: 16px; }
  .contact-icon { width: 44px; height: 44px; }
  .contact-section h2 { padding-right: 18px; }
  .contact-email { gap: 8px; }
  .resources-heading { grid-template-columns: minmax(270px,.65fr) minmax(500px,1.35fr); gap: 34px; }
}

@media (min-width: 961px) and (max-height: 820px) {
  .product-hero { padding-top: clamp(20px,3.2vh,28px); }
  .preview-intro > .back-link { margin-bottom: 14px; }
  .preview-intro > p:last-child { margin-top: 7px; }
  .product-window { margin-top: clamp(14px,2vh,20px); }
  .auth-column { padding-top: 0; }
  .contact-section { margin-top: clamp(16px,2.2vh,22px); padding-block: 11px; }
  .learning-resources { margin-top: clamp(16px,2.2vh,22px); }
  .resources-index button { min-height: 39px; }
}

@media (max-width: 960px) {
  .product-hero { padding: 24px clamp(20px,4vw,38px) 0; }
  .hero-grid { display: grid; grid-template-columns: 1fr; grid-template-rows: auto; gap: 0; transform: none; filter: none; opacity: 1; }
  .preview-copy { grid-column: 1; grid-row: 1; }
  .auth-column { grid-column: 1; grid-row: 2; width: min(100%,480px); max-width: 480px; justify-self: center; margin-top: 28px; padding-top: 0; transform: none; }
  .preview-card { grid-column: 1; grid-row: 3; margin-top: 34px; transform: none; }
  .product-window { margin-top: 0; }
  .contact-section { grid-column: 1; grid-row: 4; grid-template-columns: 48px auto 1fr; margin-top: 28px; }
  .contact-section > p { grid-column: 2 / -1; }
  .contact-email { grid-column: 2 / -1; justify-self: start; }
  .learning-resources { width: calc(100% - clamp(40px,8vw,76px)); margin-top: 24px; }
  .resources-heading { grid-template-columns: 1fr; gap: 22px; }
  .resources-grid { grid-template-columns: 1fr; opacity: 1; filter: none; transform: none; }
}

@media (max-width: 600px) {
  .preview-intro h1 { font-size: 30px; }
  .login-card-header { grid-template-columns: 56px minmax(0,1fr); }
  .ai-rock-logo { width: 56px; height: 58px; }
  .contact-section { grid-template-columns: 44px 1fr; gap: 12px 16px; }
  .contact-section h2 { padding-right: 0; border-right: 0; }
  .contact-section > p, .contact-email { grid-column: 1 / -1; }
  .contact-email { align-items: flex-start; flex-wrap: wrap; white-space: normal; }
  .resources-index button { grid-template-columns: 32px minmax(0,1fr) auto; gap: 10px; }
  .resource-index-title { gap: 10px; }
  .resource-index-count { grid-column: 2; }
  .resource-index-arrow { grid-column: 3; grid-row: 1 / span 2; }
}

/* Authentication attention model: stable shell, measured card morph, real-screen crossfade. */
.auth-column {
  --login-idle-y: 0px;
  align-self: start;
  transform: translate3d(var(--auth-x),var(--login-idle-y),var(--auth-z));
  transition: transform 425ms cubic-bezier(.22,.61,.36,1);
}
.preview-focus-layer {
  transform: scale(1);
  transform-origin: 50% 50%;
  filter: blur(0);
  opacity: 1;
  will-change: transform,filter,opacity;
  transition: opacity 425ms cubic-bezier(.22,.61,.36,1),transform 425ms cubic-bezier(.22,.61,.36,1),filter 425ms cubic-bezier(.22,.61,.36,1);
}
.preview-card[data-preview-state="login-idle"] .preview-focus-layer { transform: scale(1); filter: blur(0); opacity: 1; }
.preview-card[data-preview-state="login-engaged"] .preview-focus-layer,
.hero-grid:has(.login-card[data-auth-view="login"] #loginForm:focus-within) .preview-card[data-preview-state="login-idle"] .preview-focus-layer { transform: scale(.94); filter: blur(2.5px); opacity: .84; }
.preview-card[data-preview-state="request"] .preview-focus-layer { transform: scale(1); filter: blur(0); opacity: 1; }
.preview-card[data-preview-state="request-success"] .preview-focus-layer { transform: scale(.96); filter: blur(1px); opacity: .9; }
.preview-card[data-preview-state="activate"] .preview-focus-layer { transform: scale(.9); filter: blur(4px); opacity: .76; }
.preview-card[data-preview-state="activation-success"] .preview-focus-layer { transform: scale(.98); filter: blur(.5px); opacity: .96; }
.product-preview-stage { position: relative; width: 100%; aspect-ratio: 80 / 49; overflow: hidden; border-radius: 12px; background: rgba(248,250,253,.42); }
.preview-card[data-preview-state="login-idle"] .product-preview-stage,
.preview-card[data-preview-state="login-engaged"] .product-preview-stage { aspect-ratio: 2 / 1; }
.preview-card[data-preview-state="login-idle"] .product-window,
.preview-card[data-preview-state="login-engaged"] .product-window { margin-top: clamp(48px,5.7vh,58px); }
.login-card[data-auth-view="login"] { padding-block: 14px; }
.product-window .product-demo-layer { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; object-position: center; opacity: 0; filter: blur(1.5px); transform: scale(1.012); transition: opacity 500ms ease,transform 550ms cubic-bezier(.22,.61,.36,1),filter 550ms cubic-bezier(.22,.61,.36,1); }
.product-window .product-demo-layer.is-active { z-index: 1; opacity: 1; filter: blur(0); transform: scale(1); }

.login-card {
  transition: height 400ms cubic-bezier(.22,.61,.36,1),width 400ms cubic-bezier(.22,.61,.36,1),padding 400ms cubic-bezier(.22,.61,.36,1);
  will-change: height;
}
.login-card.is-morphing { overflow: hidden; }
.login-card-header { transform: translateZ(0); }
.auth-view { opacity: 1; transform: translateY(0); }
.auth-view.is-leaving { opacity: 0; transform: translateY(-4px); transition: opacity 120ms ease,transform 120ms ease; }
.auth-view.is-entering [style*="--enter-index"] { opacity: 0; transform: translateY(6px); }
.auth-view.is-entering.is-entering-active [style*="--enter-index"] {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 220ms ease-out calc(var(--enter-index) * 35ms),transform 260ms cubic-bezier(.22,.61,.36,1) calc(var(--enter-index) * 35ms);
}
.auth-state-heading-compact { margin-top: 2px; }
.auth-state-heading-compact h3 { font-size: 21px; }
.access-progress { margin: 2px 0 10px; color: rgba(39,70,120,.62); font-family: var(--font-mono); font-size: 10px; font-weight: 650; letter-spacing: .16em; line-height: 1.2; }
.field-group textarea { min-height: 78px; max-height: 88px; resize: none; }
.auth-result-view.is-entering .auth-success-mark { opacity: 0; transform: scale(.86); }
.auth-result-view.is-entering.is-entering-active .auth-success-mark { opacity: 1; transform: scale(1); transition: opacity 280ms ease-out 90ms,transform 310ms cubic-bezier(.22,.8,.3,1.12) 90ms; }

@media (max-width: 900px) {
  .login-card[data-auth-view="login"] { padding-block: 19px; }
  .preview-focus-layer,
  .preview-card[data-preview-state] .preview-focus-layer { transform: none; filter: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .preview-focus-layer,
  .product-window .product-demo-layer,
  .login-card,
  .auth-view,
  .auth-view [style*="--enter-index"],
  .auth-success-mark { transition-duration: 80ms !important; transition-delay: 0ms !important; transform: none !important; filter: none !important; }
}

/* 20261002: restored login composition; supplied static background only. */
body.login-page { height:auto; max-height:none; overflow-y:auto; }
#sceneTransition { background:#d4e9fa url('../images/auth/tima-geology-background.png') center top / cover fixed no-repeat; }
#sceneTransition .ink-canvas { display:none; }
#sceneTransition .ink-wash { background:rgba(255,255,255,.12); }
.product-hero { position:relative; height:auto; min-height:0; overflow:visible; padding-bottom:20px; }
.hero-grid { opacity:1 !important; filter:none !important; transform:none !important; }
.back-link { font-size:clamp(16px,1.3vw,20px); letter-spacing:.1em; }
.preview-intro > p:last-child { font-size:clamp(20px,1.55vw,26px); line-height:1.55; max-width:1250px; }
#showRequestAccess { font-size:clamp(18px,1.4vw,22px); }
.learning-resources { margin:0 auto; padding-top:16px; padding-bottom:32px; opacity:1 !important; filter:none !important; transform:none !important; }
.resources-grid { opacity:1 !important; filter:none !important; transform:none !important; pointer-events:auto !important; }
.scene-transition:not(.resources-active) .resources-grid { pointer-events:auto; }
.scene-transition.resources-focused .hero-grid { pointer-events:auto; }
@media(max-width:760px) { #sceneTransition { background-attachment:scroll; } .preview-intro > p:last-child { font-size:18px; } .learning-resources { width:calc(100% - 32px); } }

/* Keep form labels readable against the detailed static illustration. */
.login-card { background:rgba(255,255,255,.78); backdrop-filter:blur(20px); }
.contact-section .contact-email { display:inline-flex; align-items:center; gap:12px; color:#2457f5; text-decoration:none; font:600 15px system-ui; }
@media(max-width:600px) { .contact-section .contact-email { grid-column:2/-1; overflow-wrap:anywhere; } }

/* 20261004: plain white login and consistent research resource typography. */
:root { --background:#fff; }
html, body.login-page, #sceneTransition, .product-hero, .learning-resources { background:#fff; background-image:none; }
#sceneTransition .ink-wash, #sceneTransition .ink-canvas, .preview-copy::before { display:none; }
.preview-intro h1, .contact-section h2, .resource-index-title strong { font-family:var(--font-serif); font-size:28px; font-weight:400; line-height:1.25; letter-spacing:-.02em; }
.preview-intro > .back-link, .preview-intro > p:last-child { font-family:var(--font-sans); font-size:14px; line-height:1.6; letter-spacing:0; }
.preview-intro > .back-link { margin-bottom:12px; opacity:1; }
.preview-intro > p:last-child { max-width:900px; margin-top:12px; }
.login-card { background:#fff; backdrop-filter:none; border:1px solid var(--border); box-shadow:0 12px 40px -24px rgba(11,12,15,.25); }
.contact-section { grid-template-columns:46px auto 1fr; gap:16px; padding-block:18px; }
.contact-section h2 { padding-right:0; border-right:0; }
.contact-section .contact-email { justify-self:start; font-weight:400; }
.resources-heading { display:block; }
.resources-index { display:block; width:100%; }
.resource-index-trigger { width:100%; grid-template-columns:46px minmax(0,1fr) auto 34px; gap:16px; }
.resource-index-number { display:none; }
.resource-index-title { grid-column:1 / 3; gap:16px; }
.resource-index-title svg { width:46px; flex-shrink:0; }
.resource-index-count { grid-column:3; }
.resource-index-arrow { grid-column:4; }
@media(max-width:600px) {
 .preview-intro h1, .contact-section h2, .resource-index-title strong { font-size:24px; }
 .contact-section { grid-template-columns:32px 1fr; gap:12px; }
 .contact-section .contact-email { grid-column:2; }
 .resource-index-trigger { grid-template-columns:minmax(0,1fr) 34px; gap:12px; }
 .resource-index-title { grid-column:1; }
 .resource-index-title svg { width:32px; }
 .resource-index-count { display:none; }
 .resource-index-arrow { grid-column:2; }
}

.contact-section .contact-email { color:#0b0c0f; cursor:text; font-size:15px; }

/* Stable resting login position and balanced first-screen margins. */
@media(min-width:961px) {
 #sceneTransition { min-height:100svh; display:flex; flex-direction:column; justify-content:center; gap:24px; padding-block:32px; }
 .product-hero { padding-block:0; flex-shrink:0; }
 .learning-resources { margin:0 auto; padding-block:0; flex-shrink:0; }
 .auth-column { align-self:end; transform:none; transition:none; }
}

@media(min-width:961px) and (max-height:800px) {
 #sceneTransition { padding-block:24px; gap:16px; }
 .preview-card[data-preview-state] .product-window { margin-top:12px; }
 .contact-section { margin-top:12px; padding-block:12px; }
}
/* 20261019: unified heading hierarchy & readable form type. */
.preview-intro h1 { font-size:58px; }                                  /* L1 一级标题 */
.login-intro h2 { font-size:34px; }                                    /* L2 AI-ROCK 卡片标题 */
.contact-section h2, .resource-index-title strong { font-size:28px;letter-spacing:1px; }  /* L3 Contact Us / Tutorials */
.contact-section .contact-email { font-size:16px;letter-spacing:0.5px; }                    /* L4 联系邮箱 */
.field-group label, .forgot-link { font-size:13px; }                   /* 表单标签统一 + 忘记密码 */
.field-group input { font-size:15px; }                                 /* 输入框文字 */
.primary-button { font-size:14px; }                                    /* Sign In 按钮 */

@media(max-width:600px) {  /* 移动端等比缩放，保持层级 */
 .preview-intro h1 { font-size:28px; }
 .login-intro h2 { font-size:28px; }
 .contact-section h2, .resource-index-title strong { font-size:22px; }
 .contact-section .contact-email { font-size:14px; }
 .field-group label, .forgot-link { font-size:12px; }
 .field-group input { font-size:14px; }
 .primary-button { font-size:13px; }
}