/* SPARK desktop authentication system.
   Deliberately scoped above 780px so the finished mobile entry remains untouched. */
@media (min-width: 781px) {
  :root {
    --desk-blue: #315fdb;
    --desk-blue-2: #4a83e2;
    --desk-ink: #17233c;
    --desk-dim: #6f7b8e;
    --desk-line: rgba(49, 95, 219, .13);
    --desk-paper: #f6f8fc;
    --desk-card: rgba(255, 255, 255, .92);
  }

  body.login-auth-page,
  body.registration-page,
  body.reset-page {
    min-height: 100vh;
    overflow: auto;
    color: var(--desk-ink);
    background:
      radial-gradient(60% 52% at 4% 96%, rgba(95, 168, 220, .10), transparent 72%),
      radial-gradient(52% 46% at 96% 0%, rgba(49, 95, 219, .11), transparent 72%),
      var(--desk-paper);
  }

  body.login-auth-page::after,
  body.registration-page::after,
  body.reset-page::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .34;
    background-image: radial-gradient(rgba(49, 95, 219, .18) .7px, transparent .7px);
    background-size: 24px 24px;
    mask-image: linear-gradient(110deg, #000, transparent 42%, transparent 70%, #000);
  }

  .auth-bg,
  .auth-spot,
  .auth-barrage,
  .ai-orb,
  .ai-orb-panel,
  .auth-live,
  .auth-command,
  .auth-script-peek,
  .auth-dock { display: none !important; }

  .atelier-wordmark {
    position: fixed !important;
    top: 26px !important;
    left: 34px !important;
    z-index: 70 !important;
    padding: 0 !important;
    color: var(--desk-ink) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .atelier-wordmark__mark { width: 38px !important; height: 38px !important; }
  .atelier-wordmark .spark-tile { fill: var(--desk-blue) !important; }
  .atelier-wordmark__copy strong { color: var(--desk-blue) !important; letter-spacing: .18em !important; }

  .auth-shell,
  .registration-layout,
  .reset-shell {
    width: min(1220px, calc(100% - 96px)) !important;
    min-height: 100vh !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
    padding: 92px 0 48px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) 430px !important;
    align-items: center !important;
    gap: clamp(58px, 7vw, 112px) !important;
  }

  .auth-copy,
  .registration-brand,
  .reset-context {
    position: relative;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .desktop-book-scene {
    position: relative;
    width: min(100%, 590px);
    height: 250px;
    margin: 0 0 26px;
    perspective: 1100px;
    isolation: isolate;
  }
  .desktop-book-scene::before {
    content: "";
    position: absolute;
    left: 9%;
    top: 13%;
    width: 74%;
    height: 70%;
    border-radius: 50%;
    background: rgba(73, 125, 231, .14);
    filter: blur(52px);
    transform: rotate(-5deg);
  }
  .desktop-book-shadow {
    position: absolute;
    left: 12%;
    bottom: 20px;
    width: 62%;
    height: 38px;
    border-radius: 50%;
    background: rgba(35, 61, 112, .18);
    filter: blur(16px);
  }
  .desktop-book-cover,
  .desktop-book-page {
    position: absolute;
    top: 35px;
    width: 36%;
    height: 172px;
    transform-style: preserve-3d;
    backface-visibility: hidden;
  }
  .desktop-book-cover {
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, .28);
    background: linear-gradient(145deg, var(--desk-blue-2), var(--desk-blue));
    box-shadow: 0 20px 45px rgba(49, 95, 219, .16);
  }
  .desktop-book-cover.left { left: 13%; border-radius: 28px 7px 10px 34px; transform: rotateY(10deg) rotateZ(-3deg); transform-origin: right center; }
  .desktop-book-cover.right { left: 49%; border-radius: 7px 28px 34px 10px; transform: rotateY(-10deg) rotateZ(3deg); transform-origin: left center; }
  .desktop-book-page {
    z-index: 3;
    background: linear-gradient(90deg, #e5ecf8, #fff 78%);
    border: 1px solid rgba(67, 96, 148, .13);
    box-shadow: 0 14px 28px rgba(41, 67, 112, .08);
  }
  .desktop-book-page::after {
    content: "";
    position: absolute;
    inset: 18% 15%;
    opacity: .46;
    background: repeating-linear-gradient(180deg, rgba(80, 104, 146, .19) 0 1px, transparent 1px 15px);
  }
  .desktop-book-page.left { left: 14%; border-radius: 26px 5px 8px 30px; transform: translateY(-5px) rotateY(8deg) rotateZ(-2deg); transform-origin: right center; }
  .desktop-book-page.right { left: 50%; border-radius: 5px 26px 30px 8px; transform: translateY(-5px) rotateY(-8deg) rotateZ(2deg); transform-origin: left center; }
  .desktop-book-spine {
    position: absolute;
    left: 50%;
    top: 44px;
    z-index: 6;
    width: 2px;
    height: 158px;
    background: linear-gradient(180deg, transparent, rgba(49, 95, 219, .36) 18% 82%, transparent);
  }
  .desktop-book-spark {
    position: absolute;
    left: 50%;
    top: 104px;
    z-index: 7;
    width: 42px;
    height: 42px;
    fill: var(--desk-blue);
    filter: drop-shadow(0 10px 14px rgba(49, 95, 219, .18));
    transform: translate(-50%, -50%);
  }
  .desktop-structure {
    position: absolute;
    z-index: 5;
    padding: 8px 11px;
    border: 1px solid var(--desk-line);
    border-radius: 11px;
    color: #5f6f89;
    background: rgba(255, 255, 255, .62);
    box-shadow: 0 10px 28px rgba(42, 65, 104, .06);
    backdrop-filter: blur(10px);
    font-size: 10px;
    letter-spacing: .08em;
    white-space: nowrap;
  }
  .desktop-structure::before {
    content: "";
    position: absolute;
    width: 48px;
    height: 1px;
    top: 50%;
    background: linear-gradient(90deg, rgba(49, 95, 219, .35), transparent);
  }
  .desktop-structure.s1 { left: 0; top: 30px; }
  .desktop-structure.s1::before { left: 100%; }
  .desktop-structure.s2 { right: 0; top: 24px; }
  .desktop-structure.s2::before { right: 100%; transform: scaleX(-1); }
  .desktop-structure.s3 { right: 3%; bottom: 31px; }
  .desktop-structure.s3::before { right: 100%; transform: scaleX(-1); }

  /* Six-format product story: one shared frame, six clearly different workflows. */
  .desktop-mode-showcase {
    width: min(100%, 590px);
    margin: 0 0 24px;
    color: var(--desk-ink);
  }
  .dms-top {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 42px;
    margin-bottom: 10px;
  }
  .dms-count {
    min-width: 58px;
    color: var(--desk-blue);
    font-family: var(--font-m);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
  }
  .dms-top > div { display: flex; align-items: baseline; gap: 10px; }
  .dms-en { color: #8794a9; font-family: var(--font-m); font-size: 9px; letter-spacing: .16em; }
  .dms-name { color: var(--desk-ink); font-size: 19px; line-height: 1; }
  .dms-window {
    overflow: hidden;
    border: 1px solid rgba(49, 95, 219, .14);
    border-radius: 18px;
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 20px 50px rgba(38, 55, 91, .10);
  }
  .dms-windowbar {
    height: 30px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border-bottom: 1px solid rgba(49, 95, 219, .09);
    background: rgba(242, 246, 252, .84);
  }
  .dms-windowbar i { width: 5px; height: 5px; border-radius: 50%; background: #c7d2e5; }
  .dms-windowbar i:first-child { background: var(--desk-blue); }
  .dms-windowbar span { margin-left: auto; color: #9aa5b7; font-family: var(--font-m); font-size: 7px; letter-spacing: .12em; }
  .dms-visual { position: relative; height: 176px; overflow: hidden; background: linear-gradient(145deg, rgba(247, 250, 255, .96), rgba(235, 241, 251, .78)); }
  .dms-desc { min-height: 42px; margin: 12px 0 6px; color: #64738a; font-size: 12px; line-height: 1.65; }
  .dms-result { color: var(--desk-blue); font-family: var(--font-m); font-size: 9px; font-weight: 650; letter-spacing: .05em; }
  .dms-dots { display: flex; align-items: center; gap: 6px; margin-top: 13px; }
  .dms-dots button { width: 18px; height: 4px; padding: 0; border: 0; border-radius: 99px; background: #ccd6e7; cursor: pointer; transition: width .22s ease, background .22s ease; }
  .dms-dots button.active { width: 34px; background: var(--desk-blue); }
  .desktop-mode-showcase.is-changing .dms-visual > *,
  .desktop-mode-showcase.is-changing .dms-desc,
  .desktop-mode-showcase.is-changing .dms-result { animation: dmsReveal .46s cubic-bezier(.22, 1, .36, 1) both; }
  @keyframes dmsReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

  /* Novel: chapter rail + a calm long-form page. */
  .dms-side { position: absolute; left: 18px; top: 18px; bottom: 18px; width: 92px; display: grid; align-content: start; gap: 8px; padding: 12px; box-sizing: border-box; border-radius: 11px; background: rgba(49, 95, 219, .06); }
  .dms-side i { height: 7px; border-radius: 3px; background: rgba(67, 88, 126, .16); }
  .dms-side i:nth-child(2) { background: var(--desk-blue); opacity: .72; }
  .dms-paper { position: absolute; left: 130px; right: 72px; top: 15px; bottom: 15px; padding: 18px 23px; box-sizing: border-box; border-radius: 7px; background: #fff; box-shadow: 0 14px 32px rgba(43, 65, 105, .08); }
  .dms-paper b { display: block; width: 42%; height: 9px; margin-bottom: 18px; border-radius: 4px; background: #2d3a52; opacity: .72; }
  .dms-paper span { display: block; height: 5px; margin: 9px 0; border-radius: 3px; background: #d8dfeb; }
  .dms-paper span:nth-of-type(2) { width: 89%; }.dms-paper span:nth-of-type(4) { width: 68%; }
  .dms-paper em { position: absolute; right: 18px; bottom: 14px; width: 33px; height: 3px; background: var(--desk-blue); opacity: .55; }
  .dms-tags { position: absolute; right: 14px; top: 28px; display: grid; gap: 9px; }
  .dms-tags i { width: 38px; height: 22px; border: 1px solid var(--desk-line); border-radius: 8px; background: rgba(255,255,255,.68); }

  /* Short drama: compact episode cards and a visible hook pulse. */
  .dms-episodes { position: absolute; left: 18px; right: 18px; top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .dms-episodes article { position: relative; height: 104px; padding: 12px; box-sizing: border-box; border: 1px solid rgba(49,95,219,.11); border-radius: 12px; background: #fff; box-shadow: 0 10px 22px rgba(44,67,106,.06); }
  .dms-episodes b { color: var(--desk-blue); font-family: var(--font-m); font-size: 10px; }
  .dms-episodes i { display: block; height: 30px; margin: 10px 0 9px; border-radius: 6px; background: linear-gradient(135deg, #bcd0fb, #e8effc); }
  .dms-episodes span { display: block; width: 72%; height: 5px; border-radius: 3px; background: #d6deeb; }
  .dms-hook { position: absolute; left: 20%; right: 20%; bottom: 14px; height: 5px; border-radius: 99px; background: #d9e3f3; }
  .dms-hook i { position: absolute; left: 61%; top: -3px; width: 11px; height: 11px; border-radius: 50%; background: var(--desk-blue); box-shadow: 0 0 0 6px rgba(49,95,219,.10); }

  /* Long drama: parallel A/B story tracks and a relationship lock. */
  .dms-track { position: absolute; left: 28px; right: 35px; display: flex; align-items: center; gap: 0; }
  .dms-track.a { top: 42px; }.dms-track.b { top: 96px; }
  .dms-track b { width: 28px; color: var(--desk-blue); font-family: var(--font-m); font-size: 11px; }
  .dms-track i { position: relative; flex: 1; height: 7px; margin-right: 8px; border-radius: 99px; background: #b9cdf8; }
  .dms-track i::after { content: ""; position: absolute; right: -6px; top: 2px; width: 6px; height: 1px; background: #9eb2d7; }
  .dms-track.b i { background: #d9e4f4; }
  .dms-rel { position: absolute; right: 26px; bottom: 15px; display: flex; gap: 6px; }
  .dms-rel span { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid #adc3ef; }

  /* Film: film strip, beat river and a scene marker. */
  .dms-filmstrip { position: absolute; left: 18px; right: 18px; top: 22px; display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; padding: 8px; border-radius: 9px; background: #23314a; }
  .dms-filmstrip i { height: 66px; border-radius: 4px; background: linear-gradient(145deg,#6e8bc4,#dbe5f6); border: 3px solid #f0f4fb; }
  .dms-filmstrip i:nth-child(2) { background: linear-gradient(145deg,#b0c2e4,#596f9b); }.dms-filmstrip i:nth-child(3) { background: linear-gradient(145deg,#e7edf8,#7293d4); }
  .dms-beats { position: absolute; left: 45px; right: 45px; bottom: 22px; display: flex; align-items: center; justify-content: space-between; }
  .dms-beats::before { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: #bdcce5; }
  .dms-beats span { position: relative; z-index: 1; width: 10px; height: 10px; border: 3px solid #f0f5fc; border-radius: 50%; background: var(--desk-blue); }

  /* Interactive film: real choice graph, not VR/AR. */
  .dms-node { position: absolute; z-index: 3; width: 58px; height: 34px; border: 1px solid rgba(49,95,219,.22); border-radius: 8px; background: linear-gradient(145deg,#fff,#dce7f9); box-shadow: 0 8px 18px rgba(45,68,108,.08); }
  .dms-node::after { content: ""; position: absolute; inset: 7px; border-radius: 4px; background: linear-gradient(135deg,#8ca9dc,#d7e2f4); }
  .dms-node.root { left: calc(50% - 29px); top: 17px; }.dms-node.n1 { left: 17%; bottom: 22px; }.dms-node.n2 { left: calc(50% - 29px); bottom: 22px; }.dms-node.n3 { right: 17%; bottom: 22px; }
  .dms-branch { position: absolute; top: 58px; width: 31%; height: 57px; border-top: 2px solid #9db5df; }
  .dms-branch.l { left: 22%; border-left: 2px solid #9db5df; transform: skewX(-28deg); }.dms-branch.r { right: 22%; border-right: 2px solid #9db5df; transform: skewX(28deg); }
  .dms-choice { position: absolute; left: calc(50% - 42px); top: 65px; z-index: 4; width: 84px; padding: 6px 0; border-radius: 99px; color: #fff; background: var(--desk-blue); font-family: var(--font-m); font-size: 8px; text-align: center; }

  /* Commerce: a product, selling points and shootable storyboard. */
  .dms-product { position: absolute; left: 28px; top: 22px; width: 86px; height: 126px; border-radius: 14px; background: linear-gradient(145deg,#dce8fb,#9eb9ed); box-shadow: inset 0 0 0 10px rgba(255,255,255,.58); }
  .dms-product::after { content: ""; position: absolute; left: 28px; top: 29px; width: 30px; height: 62px; border-radius: 7px 7px 11px 11px; background: #fff; box-shadow: 0 8px 18px rgba(42,68,112,.12); }
  .dms-selling { position: absolute; left: 132px; top: 23px; display: grid; gap: 8px; }
  .dms-selling i { width: 72px; height: 9px; border-radius: 99px; background: #b5caf3; }.dms-selling i:nth-child(2){width:56px;background:#d1dced}
  .dms-storyboard { position: absolute; left: 132px; right: 18px; bottom: 28px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
  .dms-storyboard span { height: 65px; border-radius: 9px; border: 1px solid rgba(49,95,219,.12); background: linear-gradient(145deg,#fff,#dfe8f7); }
  .dms-wave { position: absolute; right: 20px; top: 27px; height: 28px; display: flex; align-items: center; gap: 3px; }
  .dms-wave i { width: 3px; height: 30%; border-radius: 99px; background: var(--desk-blue); }.dms-wave i:nth-child(2),.dms-wave i:nth-child(4){height:80%}.dms-wave i:nth-child(3){height:52%}

  .auth-stage { width: min(100%, 620px) !important; }
  .auth-kicker,
  .registration-eyebrow,
  .entry-kicker {
    margin: 0 0 13px !important;
    color: var(--desk-blue) !important;
    font-family: var(--font-m) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
  }
  .auth-kicker::before { display: none !important; }
  .auth-title,
  .registration-brand h1,
  .reset-context h1 {
    margin: 0 0 15px !important;
    color: var(--desk-ink) !important;
    font-family: var(--font-s) !important;
    font-size: clamp(42px, 4.4vw, 64px) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -.045em !important;
    text-shadow: none !important;
  }
  .auth-title::before,
  .auth-title::after { display: none !important; }
  .title-accent,
  .registration-brand h1 em,
  .reset-context h1 em {
    display: inline !important;
    width: auto !important;
    margin: 0 !important;
    color: var(--desk-blue) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    -webkit-text-stroke: 0 !important;
    font-style: normal !important;
    animation: none !important;
  }
  .title-accent::after { display: none !important; }
  .auth-lead,
  .registration-brand-copy,
  .reset-context > p {
    max-width: 560px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--desk-dim) !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
  }
  .auth-value-list { display: none !important; }
  .auth-mode-list,
  .registration-types {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 20px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  .auth-mode-list span,
  .registration-types li {
    padding: 7px 11px !important;
    border: 1px solid var(--desk-line) !important;
    border-radius: 999px !important;
    color: #63728a !important;
    background: rgba(255, 255, 255, .55) !important;
    font-size: 10px !important;
    letter-spacing: .05em !important;
  }
  .registration-brand-mark { display: none !important; }

  .auth-right { width: 100% !important; display: block !important; }
  .auth-card,
  .registration-form,
  .reset-card {
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 34px !important;
    overflow: visible !important;
    border: 1px solid rgba(49, 95, 219, .12) !important;
    border-radius: 24px !important;
    background: var(--desk-card) !important;
    box-shadow: 0 26px 72px rgba(38, 55, 91, .12) !important;
    backdrop-filter: blur(18px) !important;
    transform: none !important;
    animation: deskCardIn .62s cubic-bezier(.22, 1, .36, 1) both !important;
  }
  .auth-card::before,
  .auth-card::after,
  .registration-form::before,
  .reset-card::before { display: none !important; }
  @keyframes deskCardIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

  .auth-form-title,
  .registration-form h2,
  .reset-card h2 {
    margin: 0 0 7px !important;
    color: var(--desk-ink) !important;
    font-family: var(--font-s) !important;
    font-size: 27px !important;
    font-weight: 750 !important;
    letter-spacing: -.03em !important;
  }
  .auth-sub,
  .registration-form header span,
  .reset-card .subtitle {
    margin: 0 0 24px !important;
    color: var(--desk-dim) !important;
    font-size: 12px !important;
  }
  .auth-tabs {
    gap: 5px !important;
    margin-bottom: 20px !important;
    padding: 4px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #eef3fb !important;
  }
  .auth-tab { min-height: 40px !important; border-radius: 9px !important; font-size: 12px !important; }
  .auth-tab.active { color: var(--desk-blue) !important; background: #fff !important; box-shadow: 0 7px 18px rgba(49, 95, 219, .11) !important; }

  .auth-field label,
  .registration-field label,
  .reset-card .form-group label {
    color: #65738b !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    letter-spacing: .04em !important;
  }
  .auth-field input,
  .registration-field input,
  .reset-card input {
    min-height: 48px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(66, 86, 122, .16) !important;
    border-radius: 12px !important;
    color: var(--desk-ink) !important;
    background: #fbfcff !important;
    box-shadow: none !important;
  }
  .auth-field input:focus,
  .registration-field input:focus,
  .reset-card input:focus {
    border-color: rgba(49, 95, 219, .48) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(49, 95, 219, .09) !important;
    transform: none !important;
  }
  .auth-code-btn,
  .registration-code-button,
  .reset-code-row button,
  .auth-eye-btn,
  .registration-eye {
    border-color: rgba(49, 95, 219, .18) !important;
    border-radius: 11px !important;
    color: var(--desk-blue) !important;
    background: rgba(49, 95, 219, .065) !important;
  }
  .auth-btn,
  .registration-submit,
  #verifyCodeBtn,
  #resetPasswordBtn {
    min-height: 49px !important;
    border: 0 !important;
    border-radius: 12px !important;
    color: #fff !important;
    background: var(--desk-blue) !important;
    box-shadow: 0 13px 28px rgba(49, 95, 219, .22) !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
  }
  .auth-btn:hover,
  .registration-submit:hover,
  #verifyCodeBtn:hover,
  #resetPasswordBtn:hover {
    background: #2855cd !important;
    box-shadow: 0 17px 34px rgba(49, 95, 219, .27) !important;
    transform: translateY(-1px) !important;
  }
  .auth-forgot a { padding: 8px 2px !important; border: 0 !important; color: #77849a !important; background: transparent !important; }
  .auth-foot a,
  .registration-foot a,
  .back-link a { color: var(--desk-blue) !important; }

  .reset-context .entry-assurance {
    margin-top: 22px !important;
    border: 1px solid var(--desk-line) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .56) !important;
  }
  .reset-progress span.active { background: var(--desk-blue) !important; }

  /* Desktop-only opening sequence on the first login visit of a session. */
  .desktop-auth-intro {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--desk-ink);
    background:
      radial-gradient(44% 36% at 50% 44%, rgba(73, 125, 231, .14), transparent 75%),
      #f6f8fc;
    transition: opacity .7s ease, visibility .7s ease;
  }
  .desktop-auth-intro.is-leaving { opacity: 0; visibility: hidden; }
  .desktop-auth-intro-inner { display: grid; place-items: center; width: min(720px, 80vw); text-align: center; }
  .desktop-auth-intro .desktop-book-scene {
    width: 620px;
    max-width: 78vw;
    height: 290px;
    margin: 0;
    animation: desktopBookArrive 2.35s cubic-bezier(.22, 1, .36, 1) both;
  }
  .desktop-auth-intro .desktop-book-cover.left { animation: desktopCoverLeft 1.18s cubic-bezier(.22, 1, .36, 1) .18s both; }
  .desktop-auth-intro .desktop-book-cover.right { animation: desktopCoverRight 1.18s cubic-bezier(.22, 1, .36, 1) .18s both; }
  .desktop-auth-intro .desktop-book-page.left { animation: desktopPageLeft .96s cubic-bezier(.22, 1, .36, 1) .48s both; }
  .desktop-auth-intro .desktop-book-page.right { animation: desktopPageRight .96s cubic-bezier(.22, 1, .36, 1) .58s both; }
  .desktop-auth-intro .desktop-book-spine,
  .desktop-auth-intro .desktop-book-spark { animation: desktopSparkIn .65s ease 1.02s both; }
  .desktop-auth-intro .desktop-structure { animation: desktopStructureIn .7s ease 1.35s both; }
  .desktop-mode-showcase--intro {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(610px, 72vw);
    margin: 0;
    text-align: left;
    opacity: 0;
    transform: translate(-50%, -45%);
    animation: desktopShowcaseTakeover .72s cubic-bezier(.22,1,.36,1) 1.42s forwards;
  }
  .desktop-auth-intro:has(.desktop-mode-showcase--intro) .desktop-book-scene { animation: desktopBookArrive 1.35s cubic-bezier(.22,1,.36,1) both, desktopBookYield .58s ease 1.28s forwards; }
  .desktop-mode-showcase--intro .dms-visual { height: 196px; }
  .desktop-mode-showcase--intro .dms-desc { min-height: 20px; font-size: 13px; }
  .desktop-mode-showcase--intro .dms-dots button { pointer-events: none; }
  .desktop-auth-intro-wordmark {
    margin-top: -12px;
    color: var(--desk-blue);
    font-family: var(--font-m);
    font-size: 13px;
    font-weight: 850;
    letter-spacing: .48em;
    transform: translateX(.24em);
    animation: desktopWordmarkIn .7s ease 1.1s both;
  }
  .desktop-auth-intro-skip {
    position: absolute;
    right: 30px;
    bottom: 26px;
    padding: 8px 11px;
    border: 0;
    color: #7b879a;
    background: transparent;
    font-size: 11px;
    cursor: pointer;
  }
  @keyframes desktopBookArrive {
    0% { opacity: 0; transform: translateY(24px) scale(.82); filter: blur(10px); }
    32% { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: none; }
  }
  @keyframes desktopBookYield { to { opacity: 0; transform: translateY(-22px) scale(.92); filter: blur(8px); } }
  @keyframes desktopShowcaseTakeover { from { opacity: 0; transform: translate(-50%,-41%) scale(.97); } to { opacity: 1; transform: translate(-50%,-45%) scale(1); } }
  @keyframes desktopCoverLeft { from { transform: rotateY(78deg) rotateZ(-1deg); } to { transform: rotateY(10deg) rotateZ(-3deg); } }
  @keyframes desktopCoverRight { from { transform: rotateY(-78deg) rotateZ(1deg); } to { transform: rotateY(-10deg) rotateZ(3deg); } }
  @keyframes desktopPageLeft { from { opacity: .35; transform: translateY(-2px) rotateY(70deg); } to { opacity: 1; transform: translateY(-5px) rotateY(8deg) rotateZ(-2deg); } }
  @keyframes desktopPageRight { from { opacity: .35; transform: translateY(-2px) rotateY(-70deg); } to { opacity: 1; transform: translateY(-5px) rotateY(-8deg) rotateZ(2deg); } }
  @keyframes desktopSparkIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes desktopStructureIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
  @keyframes desktopWordmarkIn { from { opacity: 0; transform: translateY(10px) translateX(.24em); } to { opacity: 1; transform: translateX(.24em); } }

  html:not(.theme-light) body.login-auth-page,
  html:not(.theme-light) body.registration-page,
  html:not(.theme-light) body.reset-page {
    --desk-ink: #edf2fa;
    --desk-dim: #9aa8ba;
    --desk-line: rgba(154, 184, 255, .14);
    --desk-paper: #0f1622;
    --desk-card: rgba(19, 28, 43, .94);
    background: radial-gradient(58% 50% at 94% 0, rgba(49, 95, 219, .17), transparent 72%), #0f1622;
  }
  html:not(.theme-light) .auth-card,
  html:not(.theme-light) .registration-form,
  html:not(.theme-light) .reset-card { border-color: rgba(255, 255, 255, .09) !important; box-shadow: 0 28px 74px rgba(0, 0, 0, .28) !important; }
  html:not(.theme-light) .auth-tabs { background: rgba(255, 255, 255, .05) !important; }
  html:not(.theme-light) .auth-tab.active { background: #263247 !important; color: #9ab8ff !important; }
  html:not(.theme-light) .auth-field input,
  html:not(.theme-light) .registration-field input,
  html:not(.theme-light) .reset-card input { color: #edf2fa !important; background: rgba(255, 255, 255, .04) !important; border-color: rgba(255, 255, 255, .11) !important; }
  html:not(.theme-light) .desktop-structure,
  html:not(.theme-light) .auth-mode-list span,
  html:not(.theme-light) .registration-types li { color: #aab6c8 !important; background: rgba(255, 255, 255, .045) !important; }
  html:not(.theme-light) .desktop-auth-intro { color: #edf2fa; background: radial-gradient(44% 36% at 50% 44%, rgba(73, 125, 231, .18), transparent 75%), #0f1622; }

  @media (max-width: 1050px) {
    .auth-shell,
    .registration-layout,
    .reset-shell { width: min(920px, calc(100% - 64px)) !important; grid-template-columns: minmax(0, 1fr) 390px !important; gap: 46px !important; }
    .desktop-book-scene { height: 220px; transform: scale(.88); transform-origin: left bottom; margin-bottom: 10px; }
    .auth-title,
    .registration-brand h1,
    .reset-context h1 { font-size: 44px !important; }
  }

  @media (prefers-reduced-motion: reduce) {
    .auth-card,
    .registration-form,
    .reset-card,
    .desktop-auth-intro:not(.force-motion) * { animation: none !important; transition: none !important; }
  }
}

/* Desktop refinement v13: cinematic pencil-board details for the film mode. */
@media (min-width: 781px) {
  .film-scenes article { position: relative; }
  .film-scenes article::before {
    position: absolute;
    top: 5px;
    right: 6px;
    z-index: 4;
    padding: 2px 4px;
    border-radius: 3px;
    color: #536d9e;
    background: rgba(250,252,255,.76);
    font-family: var(--font-m);
    font-size: 5px;
    font-style: normal;
    letter-spacing: .08em;
  }
  .film-scenes article:nth-child(1)::before { content: "WIDE / 01"; }
  .film-scenes article:nth-child(2)::before { content: "MED / 02"; }
  .film-scenes article:nth-child(3)::before { content: "INSERT / 03"; }
  .film-scenes article:nth-child(4)::before { content: "REVERSE / 04"; }
  .film-scenes article::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 5px;
    z-index: 4;
    width: 8px;
    height: 8px;
    border-top: 1px solid rgba(64,86,126,.52);
    border-left: 1px solid rgba(64,86,126,.52);
  }
  .film-scenes i.film-sketch {
    background:
      linear-gradient(98deg,transparent 0 48%,rgba(75,99,142,.035) 49%,transparent 51%),
      repeating-linear-gradient(0deg,transparent 0 12px,rgba(84,108,151,.045) 12px 13px),
      linear-gradient(145deg,#fcfdff,#eef3fb) !important;
  }
  .film-sketch::before,
  .film-sketch::after,
  .film-sketch > span,
  .film-sketch > span::before,
  .film-sketch > span::after {
    filter: drop-shadow(.65px .45px 0 rgba(70,91,130,.18));
  }
  .film-sketch.station > span::after {
    left: -8px;
    top: -5px;
    width: calc(100% + 17px);
    height: 1px;
    background: #61769b;
    transform: rotate(-2deg);
  }
  .film-sketch.station::after {
    box-shadow: 0 3px 0 rgba(97,118,155,.32);
  }

  .film-sketch.figure::before {
    left: calc(48% - 27px);
    top: 7px;
    width: 54px;
    height: 18px;
    border: 1.5px solid #61769b;
    border-bottom: 0;
    border-radius: 52% 52% 0 0;
    transform: rotate(-4deg) skewX(-5deg);
  }
  .film-sketch.figure > span::before {
    box-shadow: 7px 11px 0 -5px #61769b;
  }
  .film-sketch.figure > span::after {
    border-radius: 10% 12% 48% 52%;
    transform: rotate(-2deg) skewX(-5deg);
  }

  .film-sketch.envelope::before {
    left: 8%;
    bottom: 8px;
    width: 42%;
    height: 18px;
    border-top: 1.5px solid #61769b;
    border-radius: 50%;
    transform: rotate(8deg);
  }
  .film-sketch.envelope > span {
    box-shadow: 2px 2px 0 rgba(97,118,155,.15);
  }
  .film-sketch.envelope > span::after {
    box-shadow: 5px 5px 0 -4px #61769b;
  }

  .film-sketch.profile::before {
    left: -12px;
    bottom: -13px;
    width: 46px;
    height: 63px;
    border-right: 1.5px solid #61769b;
    border-radius: 0 60% 50% 0;
    background: linear-gradient(90deg,rgba(97,118,155,.11),transparent 78%);
    transform: rotate(4deg);
  }
  .film-sketch.profile > span::before {
    box-shadow: -5px -5px 0 -4px #61769b;
  }
  .film-sketch.profile::after {
    right: 8%;
    top: 26px;
    width: 24%;
    height: 1px;
    background: linear-gradient(90deg,#61769b,transparent);
    transform: rotate(-3deg);
  }
}

/* Desktop refinement v10: readable product previews instead of skeleton blocks. */
@media (min-width: 781px) {
  .dms-mini-ui {
    position: absolute;
    inset: 9px 11px;
    min-width: 0;
    box-sizing: border-box;
    color: #344158;
    font-family: var(--font-s);
    font-size: 9px;
    line-height: 1.38;
  }
  .dms-mini-ui *,
  .dms-mini-ui *::before,
  .dms-mini-ui *::after { box-sizing: border-box; }
  .dms-mini-ui b,
  .dms-mini-ui h4,
  .dms-mini-ui p { margin: 0; }
  .dms-mini-ui h4 { color: #202d43; font-size: 10px; line-height: 1.45; }
  .dms-mini-ui small,
  .dms-mini-ui em { color: var(--desk-blue); font-style: normal; font-family: var(--font-m); font-size: 7px; letter-spacing: .04em; }

  .dms-ui-novel { display: grid; grid-template-columns: 112px minmax(0,1fr) 92px; gap: 8px; }
  .dms-ui-novel > * { min-width: 0; padding: 9px; border: 1px solid rgba(49,95,219,.10); border-radius: 9px; background: rgba(255,255,255,.86); }
  .dms-ui-novel aside,
  .dms-ui-novel section { display: grid; align-content: start; gap: 6px; }
  .dms-ui-novel aside b,
  .dms-ui-novel section b { margin-bottom: 2px; color: #243249; font-size: 9px; }
  .dms-ui-novel aside span,
  .dms-ui-novel section span { padding: 4px 5px; overflow: hidden; border-radius: 5px; color: #68758a; text-overflow: ellipsis; white-space: nowrap; }
  .dms-ui-novel aside span.active { color: var(--desk-blue); background: rgba(49,95,219,.09); }
  .dms-ui-novel section span { border: 1px solid rgba(49,95,219,.09); background: #f7f9fd; text-align: center; }
  .dms-ui-novel main { padding: 10px 13px; }
  .dms-ui-novel main h4 { margin: 6px 0 8px; }
  .dms-ui-novel main p { margin-top: 6px; color: #6a778a; font-size: 8px; line-height: 1.55; }

  .dms-ui-short { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
  .dms-ui-short article { min-width: 0; padding: 10px; border: 1px solid rgba(49,95,219,.11); border-radius: 10px; background: rgba(255,255,255,.90); box-shadow: 0 8px 18px rgba(44,67,106,.05); }
  .dms-ui-short header { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
  .dms-ui-short header b { color: var(--desk-blue); font-family: var(--font-m); font-size: 8px; }
  .dms-ui-short header em { padding: 2px 4px; border-radius: 4px; background: rgba(49,95,219,.07); }
  .dms-ui-short h4 { min-height: 29px; margin: 10px 0 12px; }
  .dms-ui-short p { padding-top: 8px; border-top: 1px solid rgba(49,95,219,.09); color: #728096; font-size: 8px; }

  .dms-ui-interactive { display: grid; grid-template-rows: 52px 1fr; gap: 10px; }
  .choice-root { position: relative; width: min(250px,62%); margin: 0 auto; padding: 7px 12px; border: 1px solid rgba(49,95,219,.16); border-radius: 9px; background: #fff; text-align: center; box-shadow: 0 7px 16px rgba(44,67,106,.06); }
  .choice-root small { display: block; }
  .choice-root b { display: block; margin: 2px 0; color: #26354d; font-size: 9px; }
  .choice-root span { color: #79869a; font-size: 7px; }
  .choice-branches { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
  .choice-branches::before { content: ""; position: absolute; left: 16.5%; right: 16.5%; top: -6px; height: 1px; background: #a9bee8; }
  .choice-branches article { position: relative; padding: 8px 7px; border: 1px solid rgba(49,95,219,.11); border-radius: 8px; background: rgba(255,255,255,.88); text-align: center; }
  .choice-branches article::before { content: ""; position: absolute; left: 50%; top: -7px; width: 1px; height: 7px; background: #a9bee8; }
  .choice-branches em { display: inline-grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; color: #fff; background: var(--desk-blue); }
  .choice-branches b { display: block; margin: 4px 0 2px; color: #2d3a51; font-size: 8px; }
  .choice-branches span { color: #728096; font-size: 7px; }

  .dms-ui-film { display: grid; grid-template-rows: 1fr 32px; gap: 7px; }
  .film-scenes { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
  .film-scenes article { overflow: hidden; border: 1px solid rgba(49,95,219,.10); border-radius: 8px; background: #fff; }
  .film-scenes i { display: block; height: 54px; background: linear-gradient(145deg,#8ca7d8,#e2eafa); }
  .film-scenes article:nth-child(2) i { background: linear-gradient(145deg,#d8e4f6,#667da8); }
  .film-scenes article:nth-child(3) i { background: linear-gradient(145deg,#6f8bc0,#edf2fa); }
  .film-scenes article:nth-child(4) i { background: linear-gradient(145deg,#d9e4f6,#8aa5d7); }
  .film-scenes b,
  .film-scenes span { display: block; padding: 3px 6px 0; }
  .film-scenes b { color: #2c3a51; font-size: 8px; }
  .film-scenes span { padding-top: 0; color: #7a8799; font-size: 7px; }
  .film-beat { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 10px; border-radius: 7px; color: #6c7a8f; background: rgba(49,95,219,.07); }
  .film-beat b { color: var(--desk-blue); font-size: 8px; }

  .dms-ui-long { display: grid; grid-template-rows: 26px 1fr 1fr 24px; gap: 6px; }
  .dms-ui-long header,
  .dms-ui-long footer { display: flex; align-items: center; gap: 12px; padding: 0 9px; border-radius: 7px; background: rgba(255,255,255,.78); }
  .dms-ui-long header b { color: #27364e; }
  .dms-ui-long header span { color: #758297; }
  .dms-ui-long header em { margin-left: auto; }
  .story-track { display: flex; align-items: center; min-width: 0; gap: 6px; padding: 0 9px; border: 1px solid rgba(49,95,219,.10); border-radius: 7px; background: rgba(255,255,255,.85); }
  .story-track b { width: 25px; color: var(--desk-blue); }
  .story-track span { padding: 3px 6px; border-radius: 5px; color: #53637a; background: rgba(49,95,219,.07); white-space: nowrap; }
  .story-track i { flex: 1; min-width: 10px; height: 1px; background: #b7c9ec; }
  .story-track.secondary span { background: #f0f3f8; }
  .dms-ui-long footer { justify-content: space-between; color: #68778d; font-size: 7px; }

  .dms-ui-commerce { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 9px; }
  .dms-ui-commerce > * { min-width: 0; padding: 9px; border: 1px solid rgba(49,95,219,.10); border-radius: 9px; background: rgba(255,255,255,.88); }
  .dms-ui-commerce aside { display: grid; align-content: start; gap: 4px; text-align: center; }
  .product-thumb { height: 65px; display: grid; place-items: center; margin-bottom: 3px; border-radius: 8px; color: var(--desk-blue); background: linear-gradient(145deg,#dce8fb,#afc5ee); font-weight: 750; }
  .dms-ui-commerce aside b { color: #29384f; }
  .dms-ui-commerce aside span { color: #778499; font-size: 7px; }
  .dms-ui-commerce main { display: grid; grid-template-rows: 20px 1fr 30px; gap: 6px; }
  .dms-ui-commerce main header { display: flex; align-items: center; justify-content: space-between; }
  .dms-ui-commerce main header b { color: #29384f; }
  .dms-ui-commerce main header span { color: var(--desk-blue); font-size: 7px; }
  .dms-ui-commerce ul { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
  .dms-ui-commerce li { padding: 7px; border-radius: 7px; color: #5e6d82; background: #f5f7fb; font-size: 8px; }
  .dms-ui-commerce li em { display: block; margin-bottom: 4px; }
  .commerce-shots { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
  .commerce-shots span { display: grid; place-items: center; border: 1px solid rgba(49,95,219,.10); border-radius: 6px; color: #66758b; background: rgba(49,95,219,.045); font-size: 7px; }

  .desktop-mode-showcase--intro { width: min(720px,80vw); }
  .desktop-mode-showcase--intro .dms-visual { height: 184px; }

  html:not(.theme-light) .dms-mini-ui { color: #b8c3d3; }
  html:not(.theme-light) .dms-mini-ui h4,
  html:not(.theme-light) .dms-mini-ui b { color: #e1e7f1; }
  html:not(.theme-light) .dms-mini-ui > *,
  html:not(.theme-light) .dms-ui-novel > *,
  html:not(.theme-light) .dms-ui-short article,
  html:not(.theme-light) .choice-root,
  html:not(.theme-light) .choice-branches article,
  html:not(.theme-light) .story-track,
  html:not(.theme-light) .dms-ui-long header,
  html:not(.theme-light) .dms-ui-long footer,
  html:not(.theme-light) .dms-ui-commerce > * { background: rgba(20,29,44,.88); border-color: rgba(255,255,255,.08); }

  @media (max-height: 820px) {
    .desktop-mode-showcase--intro .dms-visual { height: 174px; }
  }
  @media (max-height: 680px) {
    .desktop-mode-showcase--intro { width: min(660px,78vw); }
    .desktop-mode-showcase--intro .dms-visual { height: 148px; }
    .dms-mini-ui { inset: 7px 9px; font-size: 8px; }
    .dms-ui-novel { grid-template-columns: 96px minmax(0,1fr) 82px; }
    .film-scenes i { height: 42px; }
  }
}

/* Desktop refinement v6: crossfaded formats and a separate SPARK finale page. */
@media (min-width: 781px) {
  .dms-visual-layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translate3d(18px,0,0) scale(.985);
    filter: blur(4px);
    transition: opacity .58s ease, transform .68s cubic-bezier(.16,1,.3,1), filter .58s ease;
    will-change: opacity, transform, filter;
  }
  .dms-visual-layer.is-current { opacity: 1; transform: none; filter: blur(0); }
  .dms-visual-layer.is-leaving { opacity: 0; transform: translate3d(-12px,0,0) scale(.992); filter: blur(4px); transition-duration: .24s !important; }
  .desktop-mode-showcase.is-changing .dms-visual > * { animation: none !important; }
  .desktop-mode-showcase.is-changing .dms-top > div,
  .desktop-mode-showcase.is-changing .dms-count,
  .desktop-mode-showcase.is-changing .dms-desc { animation: dmsTextSettle .46s cubic-bezier(.16,1,.3,1) both; }
  @keyframes dmsTextSettle { from { opacity: .35; transform: translateY(5px); filter: blur(2px); } to { opacity: 1; transform: none; filter: blur(0); } }

  .desktop-auth-intro::after {
    content: "";
    position: fixed;
    inset: -18%;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(104deg,transparent 28%,rgba(255,255,255,.96) 47%,rgba(220,232,255,.78) 53%,transparent 72%);
    transform: translateX(-105%) skewX(-8deg);
  }
  .desktop-auth-intro.is-transitioning::after { animation: desktopIntroPageWash .92s cubic-bezier(.65,0,.25,1) both; }
  .desktop-auth-intro.is-transitioning .desktop-mode-showcase--intro {
    animation: desktopScenePageFold .92s cubic-bezier(.55,0,.2,1) forwards !important;
    transform-origin: center center;
  }
  @keyframes desktopIntroPageWash {
    0% { opacity: 0; transform: translateX(-105%) skewX(-8deg); }
    24% { opacity: 1; }
    76% { opacity: 1; }
    100% { opacity: 0; transform: translateX(105%) skewX(-8deg); }
  }
  @keyframes desktopScenePageFold {
    0% { opacity: 1; transform: translate(-50%,-45%) perspective(1200px) rotateY(0) scale(1); filter: blur(0); }
    52% { opacity: .8; transform: translate(-50%,-47%) perspective(1200px) rotateY(-6deg) scale(.92); filter: blur(1px); }
    100% { opacity: 0; transform: translate(-50%,-50%) perspective(1200px) rotateY(-18deg) scale(.72); filter: blur(9px); }
  }

  .desktop-auth-intro.is-ready .desktop-mode-showcase--intro { opacity: 0 !important; visibility: hidden !important; animation: none !important; }
  .desktop-intro-finish {
    position: fixed;
    inset: 0;
    z-index: 5;
    width: auto;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 13px;
    padding: 24px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transform: none;
    background:
      radial-gradient(42% 34% at 50% 46%,rgba(73,125,231,.12),transparent 72%),
      radial-gradient(24% 20% at 50% 46%,rgba(255,255,255,.86),transparent 76%),
      #f6f8fc;
    transition: opacity .54s ease, visibility .54s ease;
  }
  .desktop-auth-intro.is-ready .desktop-intro-finish { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .desktop-intro-final-mark { display: grid; justify-items: center; gap: 18px; margin-bottom: 8px; }
  .desktop-intro-final-mark > svg {
    width: 66px;
    height: 66px;
    fill: var(--desk-blue);
    opacity: 0;
    transform: scale(.5) rotate(-10deg);
    filter: blur(7px) drop-shadow(0 13px 22px rgba(49,95,219,.18));
  }
  .desktop-intro-final-wordmark { display: flex; align-items: center; gap: 15px; }
  .desktop-intro-final-wordmark i { display: block; width: 42px; height: 1px; background: linear-gradient(90deg,transparent,rgba(49,95,219,.55)); opacity: 0; transform: scaleX(.25); }
  .desktop-intro-final-wordmark i:last-child { transform: scaleX(-.25); }
  .desktop-intro-final-wordmark span {
    color: var(--desk-blue);
    font-family: var(--font-m);
    font-size: 17px;
    font-weight: 850;
    letter-spacing: .46em;
    transform: translateX(.23em);
    opacity: 0;
  }
  .desktop-intro-finish strong { color: var(--desk-ink); font-family: var(--font-s); font-size: 25px; letter-spacing: -.025em; opacity: 0; transform: translateY(9px); }
  .desktop-intro-finish button {
    min-width: 132px;
    min-height: 40px;
    margin-top: 8px;
    padding: 0 18px;
    border-radius: 10px;
    font-size: 12px;
    opacity: 0;
    transform: translateY(9px);
  }
  .desktop-auth-intro.is-ready .desktop-intro-final-mark > svg { animation: desktopMobileSparkIn .86s cubic-bezier(.16,1,.3,1) .12s forwards; }
  .desktop-auth-intro.is-ready .desktop-intro-final-wordmark span { animation: desktopMobileWordmarkIn .68s ease .38s forwards; }
  .desktop-auth-intro.is-ready .desktop-intro-final-wordmark i { animation: desktopMobileRuleIn .62s ease .48s forwards; }
  .desktop-auth-intro.is-ready .desktop-intro-finish strong { animation: desktopFinalCopy .58s ease .62s forwards; }
  .desktop-auth-intro.is-ready .desktop-intro-finish button { animation: desktopFinalCopy .58s cubic-bezier(.16,1,.3,1) .78s forwards; }
  @keyframes desktopMobileSparkIn {
    0% { opacity: 0; transform: scale(.5) rotate(-10deg); filter: blur(7px) drop-shadow(0 13px 22px rgba(49,95,219,.18)); }
    70% { opacity: 1; transform: scale(1.08) rotate(2deg); filter: blur(0) drop-shadow(0 16px 24px rgba(49,95,219,.20)); }
    100% { opacity: 1; transform: scale(1) rotate(0); filter: blur(0) drop-shadow(0 11px 18px rgba(49,95,219,.16)); }
  }
  @keyframes desktopMobileWordmarkIn { from { opacity: 0; letter-spacing: .18em; filter: blur(4px); } to { opacity: 1; letter-spacing: .46em; filter: blur(0); } }
  @keyframes desktopMobileRuleIn { to { opacity: 1; transform: scaleX(1); } }
  .desktop-auth-intro.is-ready .desktop-intro-final-wordmark i:last-child { animation-name: desktopMobileRuleInReverse; }
  @keyframes desktopMobileRuleInReverse { to { opacity: 1; transform: scaleX(-1); } }

  @media (max-height: 720px) {
    .desktop-intro-final-mark { gap: 12px; margin-bottom: 3px; }
    .desktop-intro-final-mark > svg { width: 54px; height: 54px; }
    .desktop-intro-finish strong { font-size: 21px; }
    .desktop-intro-finish button { min-height: 36px; margin-top: 4px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .desktop-auth-intro:not(.force-motion).is-transitioning::after,
    .desktop-auth-intro:not(.force-motion).is-transitioning .desktop-mode-showcase--intro { animation: none !important; }
    .desktop-auth-intro:not(.force-motion).is-ready .desktop-intro-final-mark > svg,
    .desktop-auth-intro:not(.force-motion).is-ready .desktop-intro-final-wordmark span,
    .desktop-auth-intro:not(.force-motion).is-ready .desktop-intro-final-wordmark i,
    .desktop-auth-intro:not(.force-motion).is-ready .desktop-intro-finish strong,
    .desktop-auth-intro:not(.force-motion).is-ready .desktop-intro-finish button { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
    .desktop-auth-intro:not(.force-motion).is-ready .desktop-intro-final-wordmark span { transform: translateX(.23em) !important; }
    .desktop-auth-intro:not(.force-motion).is-ready .desktop-intro-final-wordmark i:last-child { transform: scaleX(-1) !important; }
  }
}

/* Final intro beat: the six workflows converge into the SPARK identity. */
@media (min-width: 781px) {
  .login-auth-page .auth-copy { transform: translateY(-20px); }

  .desktop-intro-finish {
    top: 50%;
    bottom: auto;
    gap: 8px;
    transform: translate(-50%,-42%) scale(.94);
  }
  .desktop-intro-final-brand { display: flex; align-items: center; gap: 15px; margin-bottom: 10px; }
  .desktop-intro-final-brand img {
    width: 58px;
    height: 58px;
    opacity: 0;
    transform: rotate(-12deg) scale(.45);
    filter: blur(7px) drop-shadow(0 14px 22px rgba(49,95,219,.20));
  }
  .desktop-intro-final-brand span {
    color: var(--desk-blue);
    font-family: var(--font-m);
    font-size: 27px;
    font-weight: 820;
    letter-spacing: .08em;
    opacity: 0;
    transform: translateX(-18px);
    filter: blur(6px);
  }
  .desktop-intro-finish small,
  .desktop-intro-finish strong,
  .desktop-intro-finish button { opacity: 0; transform: translateY(12px); }
  .desktop-auth-intro.is-ready .desktop-mode-showcase--intro {
    animation: desktopWorkflowConverge 1.05s cubic-bezier(.7,0,.2,1) forwards !important;
  }
  .desktop-auth-intro.is-ready .desktop-intro-finish {
    transform: translate(-50%,-50%) scale(1);
    transition-delay: .38s;
  }
  .desktop-auth-intro.is-ready .desktop-intro-final-brand img { animation: desktopSparkForm .88s cubic-bezier(.16,1,.3,1) .46s forwards; }
  .desktop-auth-intro.is-ready .desktop-intro-final-brand span { animation: desktopWordmarkForm .82s cubic-bezier(.16,1,.3,1) .62s forwards; }
  .desktop-auth-intro.is-ready .desktop-intro-finish small { animation: desktopFinalCopy .55s ease .82s forwards; }
  .desktop-auth-intro.is-ready .desktop-intro-finish strong { animation: desktopFinalCopy .62s ease .93s forwards; }
  .desktop-auth-intro.is-ready .desktop-intro-finish button { animation: desktopFinalCopy .62s cubic-bezier(.16,1,.3,1) 1.08s forwards; }
  @keyframes desktopWorkflowConverge {
    0% { opacity: 1; transform: translate(-50%,-45%) scale(1); filter: blur(0); }
    48% { opacity: .72; transform: translate(-50%,-47%) scale(.78); filter: blur(1px); }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(.18); filter: blur(12px); }
  }
  @keyframes desktopSparkForm {
    0% { opacity: 0; transform: rotate(-12deg) scale(.45); filter: blur(7px) drop-shadow(0 14px 22px rgba(49,95,219,.20)); }
    68% { opacity: 1; transform: rotate(2deg) scale(1.08); filter: blur(0) drop-shadow(0 16px 24px rgba(49,95,219,.22)); }
    100% { opacity: 1; transform: rotate(0) scale(1); filter: blur(0) drop-shadow(0 12px 20px rgba(49,95,219,.18)); }
  }
  @keyframes desktopWordmarkForm {
    from { opacity: 0; transform: translateX(-18px); filter: blur(6px); letter-spacing: .08em; }
    to { opacity: 1; transform: none; filter: blur(0); letter-spacing: .28em; }
  }
  @keyframes desktopFinalCopy { to { opacity: 1; transform: none; } }

  @media (max-height: 820px) {
    .login-auth-page .auth-copy { transform: translateY(-10px); }
    .desktop-intro-final-brand { margin-bottom: 5px; }
    .desktop-intro-final-brand img { width: 48px; height: 48px; }
    .desktop-intro-final-brand span { font-size: 22px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .desktop-auth-intro:not(.force-motion).is-ready .desktop-mode-showcase--intro { opacity: 0 !important; }
    .desktop-auth-intro:not(.force-motion).is-ready .desktop-intro-final-brand img,
    .desktop-auth-intro:not(.force-motion).is-ready .desktop-intro-final-brand span,
    .desktop-auth-intro:not(.force-motion).is-ready .desktop-intro-finish small,
    .desktop-auth-intro:not(.force-motion).is-ready .desktop-intro-finish strong,
    .desktop-auth-intro:not(.force-motion).is-ready .desktop-intro-finish button { opacity: 1 !important; transform: none !important; filter: none !important; }
  }
}

@media (max-width: 780px) {
  .desktop-book-scene,
  .desktop-auth-intro,
  .desktop-replay-intro { display: none !important; }
}

/* Desktop refinement v3: single-screen fit, richer controls and differentiated auth pages. */
@media (min-width: 781px) {
  html { height: 100%; }
  body.login-auth-page,
  body.registration-page,
  body.reset-page {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    overflow: hidden !important;
  }

  .auth-shell,
  .registration-layout,
  .reset-shell {
    width: min(1220px, calc(100% - 72px)) !important;
    height: 100dvh !important;
    min-height: 0 !important;
    padding: clamp(68px, 8vh, 86px) 0 clamp(18px, 3vh, 34px) !important;
    overflow: visible !important;
  }
  .registration-layout {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .atelier-wordmark { top: 20px !important; left: 28px !important; }

  /* The product promise leads; the format demonstration now follows it. */
  .login-auth-page .auth-stage { display: flex; flex-direction: column; width: min(100%, 620px) !important; }
  .login-auth-page .auth-kicker { order: 1; margin-bottom: 8px !important; }
  .login-auth-page .auth-title { order: 2; margin-bottom: 9px !important; font-size: clamp(38px, 3.8vw, 55px) !important; }
  .login-auth-page .auth-lead { order: 3; max-width: 590px !important; font-size: 13px !important; line-height: 1.65 !important; }
  .login-auth-page .auth-value-list { order: 4; }
  .login-auth-page .auth-mode-list { display: none !important; }
  .login-auth-page .desktop-mode-showcase { order: 5; margin: 18px 0 0; }

  .dms-top { min-height: 34px; margin-bottom: 7px; }
  .dms-name { font-size: 17px; }
  .dms-window { border-radius: 15px; }
  .dms-visual { height: clamp(128px, 19vh, 166px); }
  .dms-desc { min-height: 20px; margin: 8px 0 3px; font-size: 11px; line-height: 1.55; }
  .dms-result { font-size: 8px; }
  .dms-actions { display: flex; align-items: center; gap: 5px; margin-left: auto; }
  .dms-actions button {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(49,95,219,.13);
    border-radius: 9px;
    color: #667792;
    background: rgba(255,255,255,.62);
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
  }
  .dms-actions button:hover { color: var(--desk-blue); border-color: rgba(49,95,219,.30); background: #fff; transform: translateY(-1px); }
  .dms-tabs { display: flex; align-items: center; gap: 5px; margin-top: 8px; }
  .dms-tabs button {
    min-height: 26px;
    flex: 1;
    padding: 0 7px;
    border: 1px solid rgba(49,95,219,.10);
    border-radius: 8px;
    color: #748198;
    background: rgba(255,255,255,.48);
    font-size: 9px;
    white-space: nowrap;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
  }
  .dms-tabs button:hover { transform: translateY(-1px); color: var(--desk-blue); }
  .dms-tabs button.active { color: #fff; border-color: var(--desk-blue); background: var(--desk-blue); box-shadow: 0 7px 16px rgba(49,95,219,.16); }
  .desktop-mode-showcase:focus-visible { outline: 2px solid rgba(49,95,219,.42); outline-offset: 7px; border-radius: 14px; }

  /* Large, soft open-book silhouette behind the login card. */
  .login-auth-page .auth-right { position: relative; isolation: isolate; }
  .desktop-login-book-watermark {
    position: absolute !important;
    z-index: 0 !important;
    left: -260px !important;
    top: -240px !important;
    width: 760px !important;
    height: 420px !important;
    margin: 0 !important;
    opacity: .20;
    transform: rotate(-3deg) !important;
    pointer-events: none;
    filter: blur(.15px);
  }
  .desktop-login-book-watermark::before { left: 4%; top: 4%; width: 92%; height: 90%; opacity: .8; }
  .desktop-login-book-watermark .desktop-book-cover,
  .desktop-login-book-watermark .desktop-book-page { top: 35px; width: 46%; height: 300px; box-shadow: none; }
  .desktop-login-book-watermark .desktop-book-cover { background: rgba(82,126,225,.20); border-color: rgba(255,255,255,.22); }
  .desktop-login-book-watermark .desktop-book-cover.left { left: 4%; }
  .desktop-login-book-watermark .desktop-book-cover.right { left: 50%; }
  .desktop-login-book-watermark .desktop-book-page { background: linear-gradient(105deg,rgba(231,239,253,.86),rgba(255,255,255,.90)); }
  .desktop-login-book-watermark .desktop-book-page.left { left: 5%; }
  .desktop-login-book-watermark .desktop-book-page.right { left: 50%; }
  .desktop-login-book-watermark .desktop-book-page::after { opacity: .12; }
  .desktop-login-book-watermark .desktop-book-spine { top: 46px; height: 280px; }
  .desktop-login-book-watermark .desktop-book-spark { top: 184px; width: 64px; height: 64px; opacity: .65; }
  .desktop-login-book-watermark .desktop-book-shadow { display: none; }
  .login-auth-page .auth-card { position: relative; z-index: 2; }

  .desktop-replay-intro {
    position: fixed;
    z-index: 80;
    top: 25px;
    right: 30px;
    padding: 7px 11px;
    border: 1px solid rgba(49,95,219,.13);
    border-radius: 9px;
    color: #65758f;
    background: rgba(255,255,255,.60);
    backdrop-filter: blur(12px);
    font-size: 10px;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, transform .18s ease;
  }
  .desktop-replay-intro:hover { color: var(--desk-blue); border-color: rgba(49,95,219,.30); transform: translateY(-1px); }

  /* Replayable opening: all animation is tied to is-playing, so it can restart cleanly. */
  .desktop-auth-intro { opacity: 0; visibility: hidden; will-change: opacity, visibility; }
  .desktop-auth-intro.is-playing { opacity: 1; visibility: visible; }
  .desktop-auth-intro.is-playing.is-leaving { opacity: 0; visibility: hidden; }
  .desktop-auth-intro.is-hidden { display: none !important; }
  .desktop-auth-intro .desktop-book-scene,
  .desktop-auth-intro .desktop-book-cover,
  .desktop-auth-intro .desktop-book-page,
  .desktop-auth-intro .desktop-book-spine,
  .desktop-auth-intro .desktop-book-spark,
  .desktop-auth-intro .desktop-structure,
  .desktop-auth-intro .desktop-mode-showcase--intro,
  .desktop-auth-intro .desktop-auth-intro-wordmark { animation: none !important; }
  .desktop-auth-intro.is-playing .desktop-book-scene {
    animation: desktopBookArriveSmooth 1.55s cubic-bezier(.16,1,.3,1) both, desktopBookYieldSmooth .92s cubic-bezier(.4,0,.2,1) 1.46s forwards !important;
  }
  .desktop-auth-intro.is-playing .desktop-book-cover.left { animation: desktopCoverLeft 1.25s cubic-bezier(.16,1,.3,1) .12s both !important; }
  .desktop-auth-intro.is-playing .desktop-book-cover.right { animation: desktopCoverRight 1.25s cubic-bezier(.16,1,.3,1) .12s both !important; }
  .desktop-auth-intro.is-playing .desktop-book-page.left { animation: desktopPageLeft 1.05s cubic-bezier(.16,1,.3,1) .34s both !important; }
  .desktop-auth-intro.is-playing .desktop-book-page.right { animation: desktopPageRight 1.05s cubic-bezier(.16,1,.3,1) .44s both !important; }
  .desktop-auth-intro.is-playing .desktop-book-spine,
  .desktop-auth-intro.is-playing .desktop-book-spark { animation: desktopSparkIn .72s ease .88s both !important; }
  .desktop-auth-intro.is-playing .desktop-structure { animation: desktopStructureIn .7s ease .95s both !important; }
  .desktop-auth-intro.is-playing .desktop-mode-showcase--intro { animation: desktopShowcaseTakeoverSmooth 1s cubic-bezier(.16,1,.3,1) 1.58s forwards !important; }
  .desktop-auth-intro.is-playing .desktop-auth-intro-wordmark { animation: desktopWordmarkIn .72s ease .78s both !important; }
  .desktop-mode-showcase--intro .dms-actions { display: none; }
  .desktop-mode-showcase--intro .dms-tabs { pointer-events: none; }
  @keyframes desktopBookArriveSmooth {
    0% { opacity: 0; transform: translateY(34px) scale(.76); filter: blur(14px); }
    42% { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  }
  @keyframes desktopBookYieldSmooth { to { opacity: 0; transform: translateY(-28px) scale(1.06); filter: blur(10px); } }
  @keyframes desktopShowcaseTakeoverSmooth {
    from { opacity: 0; transform: translate(-50%,-39%) scale(.94); filter: blur(8px); }
    to { opacity: 1; transform: translate(-50%,-45%) scale(1); filter: blur(0); }
  }

  /* Registration keeps the book, but becomes a compact account-opening story. */
  .registration-page .desktop-book-scene { height: 190px; margin: 0 0 10px; transform: scale(.82); transform-origin: left center; }
  .registration-page .registration-brand h1 { margin-bottom: 10px !important; font-size: clamp(36px,3.7vw,50px) !important; }
  .registration-page .registration-brand-copy { font-size: 12px !important; }
  .registration-page .registration-types { margin-top: 14px !important; }

  /* Password recovery deliberately stops repeating the book and uses a short task path. */
  .reset-flow-visual { display: flex; align-items: center; width: min(100%,540px); margin: 0 0 36px; }
  .reset-flow-visual span { min-width: 106px; padding: 14px 13px; border: 1px solid rgba(49,95,219,.12); border-radius: 13px; color: #66748a; background: rgba(255,255,255,.58); font-size: 11px; text-align: center; box-shadow: 0 10px 26px rgba(38,55,91,.05); }
  .reset-flow-visual span b { display: block; margin-bottom: 5px; color: var(--desk-blue); font-family: var(--font-m); font-size: 9px; letter-spacing: .12em; }
  .reset-flow-visual i { flex: 1; height: 1px; background: linear-gradient(90deg,rgba(49,95,219,.36),rgba(49,95,219,.10)); }
  .reset-page .reset-context h1 { font-size: clamp(36px,3.8vw,50px) !important; }

  html:not(.theme-light) .dms-actions button,
  html:not(.theme-light) .dms-tabs button,
  html:not(.theme-light) .desktop-replay-intro,
  html:not(.theme-light) .reset-flow-visual span { color: #aab6c8; background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.09); }
  html:not(.theme-light) .dms-tabs button.active { color: #fff; background: var(--desk-blue); border-color: var(--desk-blue); }

  @media (max-width: 1280px) {
    .auth-shell,
    .registration-layout,
    .reset-shell { width: min(1120px, calc(100% - 52px)) !important; grid-template-columns: minmax(0,1fr) 390px !important; gap: 46px !important; }
    .login-auth-page .auth-title { font-size: 42px !important; }
    .desktop-login-book-watermark { left: -300px !important; }
  }

  @media (max-height: 820px) {
    .auth-shell,
    .registration-layout,
    .reset-shell { padding-top: 62px !important; padding-bottom: 14px !important; }
    .atelier-wordmark { top: 14px !important; }
    .desktop-replay-intro { top: 17px; }
    .login-auth-page .auth-kicker { margin-bottom: 5px !important; }
    .login-auth-page .auth-title { margin-bottom: 6px !important; font-size: 37px !important; }
    .login-auth-page .auth-lead { font-size: 11px !important; line-height: 1.5 !important; }
    .login-auth-page .desktop-mode-showcase { margin-top: 10px; }
    .dms-top { min-height: 29px; margin-bottom: 5px; }
    .dms-name { font-size: 15px; }
    .dms-visual { height: clamp(112px,18vh,136px); }
    .dms-desc { margin-top: 5px; font-size: 10px; }
    .dms-tabs { margin-top: 5px; }
    .dms-tabs button { min-height: 23px; font-size: 8px; }
    .auth-card,
    .registration-form,
    .reset-card { padding: 24px 26px !important; }
    .auth-sub,
    .registration-form header span,
    .reset-card .subtitle { margin-bottom: 15px !important; }
    .auth-tabs { margin-bottom: 13px !important; }
    .auth-field { margin-bottom: 10px !important; }
    .auth-field input,
    .registration-field input,
    .reset-card input { min-height: 42px !important; }
    .registration-page .desktop-book-scene { height: 146px; margin-bottom: 0; transform: scale(.68); }
    .registration-page .registration-brand h1 { font-size: 38px !important; }
    .registration-page .registration-types { margin-top: 9px !important; }
    .registration-form header { margin-bottom: 12px !important; }
    .registration-field { margin-bottom: 8px !important; }
    .registration-submit { min-height: 43px !important; }
    .reset-flow-visual { margin-bottom: 24px; }
  }

  @media (max-height: 680px) {
    .auth-shell,
    .registration-layout,
    .reset-shell { padding-top: 52px !important; gap: 34px !important; }
    .atelier-wordmark__mark { width: 32px !important; height: 32px !important; }
    .login-auth-page .auth-title { font-size: 32px !important; }
    .dms-visual { height: 104px; }
    .dms-desc { display: none; }
    .auth-card,
    .registration-form,
    .reset-card { padding: 19px 22px !important; }
    .auth-form-title,
    .registration-form h2,
    .reset-card h2 { font-size: 23px !important; }
    .registration-page .desktop-book-scene { display: none; }
    .registration-types { display: none !important; }
    .reset-flow-visual { margin-bottom: 15px; }
  }
}

/* Desktop refinement v4: calmer hierarchy and a deliberate end to the intro. */
@media (min-width: 781px) {
  .login-auth-page .auth-title { margin-top: 0 !important; }
  .login-auth-page .desktop-mode-showcase { margin-top: 16px; }
  .dms-interaction-hint { margin-left: auto; color: #8a96a9; font-size: 9px; letter-spacing: .03em; }
  .desktop-mode-showcase--intro .dms-interaction-hint { display: none; }
  .dms-tabs { margin-top: 9px; }
  .dms-tabs button { border-radius: 999px; }

  .desktop-intro-finish {
    position: absolute;
    left: 50%;
    bottom: clamp(32px, 7vh, 70px);
    z-index: 4;
    display: grid;
    justify-items: center;
    gap: 7px;
    width: min(520px, 80vw);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 18px);
    transition: opacity .65s ease, transform .65s cubic-bezier(.16,1,.3,1), visibility .65s ease;
  }
  .desktop-intro-finish small { color: #78869c; font-size: 11px; letter-spacing: .08em; }
  .desktop-intro-finish strong { color: var(--desk-ink); font-family: var(--font-s); font-size: 22px; letter-spacing: -.02em; }
  .desktop-intro-finish button {
    min-width: 180px;
    min-height: 46px;
    margin-top: 7px;
    padding: 0 24px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: var(--desk-blue);
    box-shadow: 0 14px 30px rgba(49,95,219,.24);
    font-size: 14px;
    font-weight: 720;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  }
  .desktop-intro-finish button:hover { transform: translateY(-2px); background: #2855cd; box-shadow: 0 18px 36px rgba(49,95,219,.29); }
  .desktop-auth-intro.is-ready .desktop-intro-finish { opacity: 1; visibility: visible; transform: translate(-50%,0); }
  .desktop-auth-intro.is-ready .desktop-mode-showcase--intro { transform: translate(-50%,-54%) scale(.96); transition: transform .75s cubic-bezier(.16,1,.3,1), opacity .75s ease; }
  .desktop-auth-intro.is-ready .desktop-auth-intro-skip { opacity: 0; pointer-events: none; }

  /* Password recovery is a focused utility page rather than a second landing page. */
  .reset-page .reset-shell {
    width: min(500px, calc(100% - 48px)) !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .reset-page .reset-context { display: none !important; }
  .reset-page .reset-card { width: 100% !important; }

  /* A desktop monitor gets a genuinely larger composition instead of a small laptop layout centered in empty space. */
  @media (min-width: 1560px) and (min-height: 820px) {
    .login-auth-page .auth-shell,
    .registration-page .registration-layout { width: min(1500px, calc(100% - 112px)) !important; grid-template-columns: minmax(0,1fr) 490px !important; gap: 100px !important; }
    .login-auth-page .auth-stage { width: min(100%, 760px) !important; }
    .login-auth-page .auth-title { font-size: 60px !important; }
    .login-auth-page .auth-lead { max-width: 700px !important; font-size: 15px !important; }
    .login-auth-page .desktop-mode-showcase { width: min(100%,760px); margin-top: 24px; }
    .login-auth-page .dms-top { min-height: 44px; }
    .login-auth-page .dms-name { font-size: 22px; }
    .login-auth-page .dms-count { font-size: 12px; }
    .login-auth-page .dms-en { font-size: 10px; }
    .login-auth-page .dms-visual { height: 220px; }
    .login-auth-page .dms-desc { margin-top: 11px; font-size: 14px; }
    .login-auth-page .dms-tabs button { min-height: 32px; font-size: 11px; }
    .login-auth-page .auth-card { padding: 40px !important; }
    .login-auth-page .auth-form-title { font-size: 32px !important; }
    .login-auth-page .auth-sub { font-size: 14px !important; }
    .login-auth-page .auth-field label { font-size: 12px !important; }
    .login-auth-page .auth-field input { min-height: 54px !important; font-size: 16px !important; }
    .login-auth-page .auth-btn { min-height: 54px !important; font-size: 14px !important; }
  }

  @media (max-height: 820px) {
    .login-auth-page .auth-title { font-size: 35px !important; }
    .login-auth-page .auth-lead { max-width: 560px !important; }
    .login-auth-page .desktop-mode-showcase { margin-top: 9px; }
    .dms-interaction-hint { display: none; }
    .desktop-intro-finish { bottom: 22px; }
    .desktop-intro-finish strong { font-size: 18px; }
    .desktop-intro-finish button { min-height: 40px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .desktop-auth-intro:not(.force-motion) { display: grid !important; opacity: 1 !important; visibility: visible !important; }
    .desktop-auth-intro.is-hidden { display: none !important; }
    .desktop-auth-intro:not(.force-motion) .desktop-book-scene { display: none !important; }
    .desktop-auth-intro:not(.force-motion) .desktop-mode-showcase--intro { opacity: 1 !important; transform: translate(-50%,-54%) scale(.96) !important; filter: none !important; }
    .desktop-auth-intro:not(.force-motion).is-ready .desktop-intro-finish { opacity: 1 !important; visibility: visible !important; transform: translate(-50%,0) !important; }
  }
}

/* Desktop refinement v7: fit short laptops and give large monitors real scale. */
@media (min-width: 781px) {
  .registration-page .registration-brand { overflow: visible !important; }
  .registration-page .registration-brand::before,
  .registration-page .registration-brand::after { display: none !important; }
  .registration-page .registration-types { border: 0 !important; }
}

@media (min-width: 781px) and (max-height: 820px) {
  .login-auth-page .dms-visual { height: 152px; }
  .login-auth-page [data-mode="commerce"] .dms-product {
    left: 24px;
    top: 14px;
    width: 72px;
    height: 112px;
  }
  .login-auth-page [data-mode="commerce"] .dms-product::after {
    left: 23px;
    top: 24px;
    width: 26px;
    height: 54px;
  }
  .login-auth-page [data-mode="commerce"] .dms-selling { left: 112px; top: 17px; gap: 6px; }
  .login-auth-page [data-mode="commerce"] .dms-storyboard { left: 112px; right: 16px; bottom: 15px; }
  .login-auth-page [data-mode="commerce"] .dms-storyboard span { height: 52px; }
  .login-auth-page [data-mode="commerce"] .dms-wave { right: 18px; top: 18px; }
}

@media (min-width: 781px) and (max-height: 680px) {
  .login-auth-page .dms-visual { height: 122px; }
  .login-auth-page [data-mode="commerce"] .dms-product {
    left: 20px;
    top: 10px;
    width: 60px;
    height: 92px;
    border-radius: 12px;
  }
  .login-auth-page [data-mode="commerce"] .dms-product::after {
    left: 19px;
    top: 20px;
    width: 22px;
    height: 44px;
  }
  .login-auth-page [data-mode="commerce"] .dms-selling { left: 94px; top: 13px; }
  .login-auth-page [data-mode="commerce"] .dms-storyboard { left: 94px; right: 14px; bottom: 12px; gap: 6px; }
  .login-auth-page [data-mode="commerce"] .dms-storyboard span { height: 40px; }
  .login-auth-page [data-mode="commerce"] .dms-wave { top: 14px; }
}

@media (min-width: 1560px) and (min-height: 820px) {
  .registration-page .registration-layout {
    width: min(1560px, calc(100% - 120px)) !important;
    grid-template-columns: minmax(720px, 1fr) 520px !important;
    gap: 112px !important;
  }
  .registration-page .registration-brand {
    width: 100%;
    max-width: 780px;
    justify-self: start;
  }
  .registration-page .desktop-book-scene {
    width: 680px;
    height: 250px;
    margin-bottom: 20px;
    transform: scale(1.04);
    transform-origin: left center;
  }
  .registration-page .registration-eyebrow { font-size: 11px !important; }
  .registration-page .registration-brand h1 {
    margin-bottom: 14px !important;
    font-size: 58px !important;
  }
  .registration-page .registration-brand-copy {
    max-width: 650px;
    font-size: 15px !important;
    line-height: 1.7 !important;
  }
  .registration-page .registration-types { margin-top: 20px !important; }
  .registration-page .registration-types li {
    padding: 8px 13px !important;
    font-size: 11px !important;
  }
  .registration-page .registration-form { padding: 40px !important; }
  .registration-page .registration-form h2 { font-size: 32px !important; }
  .registration-page .registration-form header span { font-size: 14px !important; }
  .registration-page .registration-field { margin-bottom: 15px !important; }
  .registration-page .registration-field label { font-size: 12px !important; }
  .registration-page .registration-field input {
    min-height: 54px !important;
    font-size: 16px !important;
  }
  .registration-page .registration-code-button,
  .registration-page .registration-submit { min-height: 54px !important; }
}

/* Desktop refinement v8: one continuous handoff into and out of the SPARK finale. */
@media (min-width: 781px) {
  .login-auth-page .auth-shell {
    transition: opacity .86s cubic-bezier(.22,1,.36,1), transform .92s cubic-bezier(.22,1,.36,1), filter .86s ease !important;
    transform-origin: center center;
  }
  .login-auth-page.desktop-intro-active .auth-shell {
    opacity: .22;
    transform: translateY(8px) scale(.985);
    filter: blur(10px);
  }

  .desktop-auth-intro {
    transition: opacity .86s cubic-bezier(.4,0,.2,1), visibility .86s linear !important;
  }
  .desktop-auth-intro.is-playing.is-leaving {
    opacity: 0 !important;
    visibility: visible !important;
    pointer-events: none;
  }

  .desktop-intro-finish {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 24px !important;
    place-content: center !important;
    gap: 13px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(12px) scale(.985) !important;
    filter: blur(7px);
    transition: opacity .82s cubic-bezier(.16,1,.3,1), transform .92s cubic-bezier(.16,1,.3,1), filter .82s ease, visibility .82s linear !important;
  }
  .desktop-auth-intro.is-transitioning .desktop-intro-finish {
    visibility: visible !important;
  }
  .desktop-auth-intro.is-ready .desktop-intro-finish {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: blur(0);
    transition-delay: 0s !important;
  }

  .desktop-auth-intro.force-motion.is-ready .desktop-intro-final-mark > svg {
    animation: desktopFinalSparkSettle 1.05s cubic-bezier(.16,1,.3,1) .12s forwards !important;
  }
  .desktop-auth-intro.force-motion.is-ready .desktop-intro-final-wordmark span {
    animation: desktopFinalWordSettle .82s cubic-bezier(.16,1,.3,1) .38s forwards !important;
  }
  .desktop-auth-intro.force-motion.is-ready .desktop-intro-final-wordmark i {
    animation: desktopFinalRuleSettle .72s cubic-bezier(.16,1,.3,1) .48s forwards !important;
  }
  .desktop-auth-intro.force-motion.is-ready .desktop-intro-final-wordmark i:last-child {
    animation-name: desktopFinalRuleSettleReverse !important;
  }
  .desktop-auth-intro.force-motion.is-ready .desktop-intro-finish strong {
    animation: desktopFinalTextSettle .72s cubic-bezier(.16,1,.3,1) .66s forwards !important;
  }
  .desktop-auth-intro.force-motion.is-ready .desktop-intro-finish button {
    animation: desktopFinalTextSettle .72s cubic-bezier(.16,1,.3,1) .84s forwards !important;
  }

  .desktop-auth-intro.is-ready.is-leaving .desktop-intro-finish {
    opacity: 0 !important;
    visibility: visible !important;
    transform: translateY(-14px) scale(1.018) !important;
    filter: blur(9px);
    transition-duration: .86s !important;
  }

  @keyframes desktopFinalSparkSettle {
    0% { opacity: 0; transform: translateY(14px) scale(.42) rotate(-9deg); filter: blur(10px) drop-shadow(0 13px 22px rgba(49,95,219,.18)); }
    66% { opacity: 1; transform: translateY(-2px) scale(1.07) rotate(1.5deg); filter: blur(0) drop-shadow(0 17px 25px rgba(49,95,219,.21)); }
    100% { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 11px 18px rgba(49,95,219,.16)); }
  }
  @keyframes desktopFinalWordSettle {
    from { opacity: 0; transform: translateY(7px) translateX(.23em); letter-spacing: .16em; filter: blur(5px); }
    to { opacity: 1; transform: translateX(.23em); letter-spacing: .46em; filter: blur(0); }
  }
  @keyframes desktopFinalRuleSettle { to { opacity: 1; transform: scaleX(1); } }
  @keyframes desktopFinalRuleSettleReverse { to { opacity: 1; transform: scaleX(-1); } }
  @keyframes desktopFinalTextSettle {
    from { opacity: 0; transform: translateY(12px); filter: blur(4px); }
    to { opacity: 1; transform: none; filter: blur(0); }
  }
}

/* Desktop refinement v9: the finale moves from product promise to welcome. */
@media (min-width: 781px) {
  .desktop-intro-final-copy {
    position: relative;
    display: grid;
    place-items: center;
    min-width: min(520px, 82vw);
    min-height: 36px;
  }
  .desktop-intro-final-copy strong {
    grid-area: 1 / 1;
    margin: 0;
    text-align: center;
    white-space: nowrap;
    transition: opacity .66s cubic-bezier(.4,0,.2,1), transform .72s cubic-bezier(.16,1,.3,1), filter .66s ease, letter-spacing .72s ease !important;
  }
  .desktop-intro-final-welcome {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: .34em;
    opacity: 0 !important;
    transform: translateY(12px) !important;
    filter: blur(5px) !important;
    animation: none !important;
  }
  .desktop-auth-intro.is-ready.is-welcome .desktop-intro-final-slogan {
    opacity: 0 !important;
    transform: translateY(-10px) !important;
    filter: blur(5px) !important;
  }
  .desktop-auth-intro.is-ready.is-welcome .desktop-intro-final-welcome {
    opacity: 1 !important;
    transform: none !important;
    filter: blur(0) !important;
    letter-spacing: -.025em;
    animation: none !important;
    transition-delay: .18s !important;
  }
  .desktop-intro-final-welcome > span {
    display: inline-block;
    opacity: 0;
    transform: translateY(9px);
    filter: blur(4px);
    will-change: opacity, transform, filter, letter-spacing;
  }
  .desktop-intro-welcome-brand {
    position: relative;
    color: var(--desk-blue);
    font-family: var(--font-m);
    font-size: .88em;
    font-weight: 850;
    letter-spacing: .28em;
    text-indent: .28em;
  }
  .desktop-intro-welcome-brand::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -.34em;
    height: 1px;
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(49,95,219,.72), transparent);
    transform: scaleX(.2);
  }
  .desktop-auth-intro.force-motion.is-ready.is-welcome .desktop-intro-welcome-lead {
    animation: desktopWelcomeLeadIn .66s cubic-bezier(.16,1,.3,1) .22s forwards;
  }
  .desktop-auth-intro.force-motion.is-ready.is-welcome .desktop-intro-welcome-brand {
    animation: desktopWelcomeBrandIn .92s cubic-bezier(.16,1,.3,1) .42s forwards;
  }
  .desktop-auth-intro.force-motion.is-ready.is-welcome .desktop-intro-welcome-brand::after {
    animation: desktopWelcomeBrandRule .82s ease .72s forwards;
  }
  .desktop-auth-intro.force-motion.is-ready.is-welcome .desktop-intro-welcome-world {
    animation: desktopWelcomeWorldIn .76s cubic-bezier(.16,1,.3,1) .68s forwards;
  }
  @keyframes desktopWelcomeLeadIn {
    from { opacity: 0; transform: translateY(9px); filter: blur(4px); }
    to { opacity: 1; transform: none; filter: blur(0); }
  }
  @keyframes desktopWelcomeBrandIn {
    0% { opacity: 0; transform: translateY(7px) scale(.94); filter: blur(5px); letter-spacing: .48em; text-shadow: 0 0 0 rgba(49,95,219,0); }
    68% { opacity: 1; transform: translateY(-1px) scale(1.035); filter: blur(0); text-shadow: 0 0 22px rgba(49,95,219,.30); }
    100% { opacity: 1; transform: none; filter: blur(0); letter-spacing: .28em; text-shadow: 0 0 12px rgba(49,95,219,.14); }
  }
  @keyframes desktopWelcomeBrandRule {
    0% { opacity: 0; transform: scaleX(.2); }
    55% { opacity: .9; }
    100% { opacity: .45; transform: scaleX(1); }
  }
  @keyframes desktopWelcomeWorldIn {
    from { opacity: 0; transform: translateY(9px); filter: blur(5px); letter-spacing: .08em; }
    to { opacity: 1; transform: none; filter: blur(0); letter-spacing: normal; }
  }

  @media (prefers-reduced-motion: reduce) {
    .desktop-auth-intro:not(.force-motion).is-ready .desktop-intro-final-welcome { opacity: 0 !important; }
    .desktop-auth-intro:not(.force-motion).is-ready.is-welcome .desktop-intro-final-slogan { opacity: 0 !important; }
    .desktop-auth-intro:not(.force-motion).is-ready.is-welcome .desktop-intro-final-welcome {
      opacity: 1 !important;
      transform: none !important;
      filter: none !important;
    }
    .desktop-auth-intro:not(.force-motion).is-ready.is-welcome .desktop-intro-final-welcome > span {
      opacity: 1;
      transform: none;
      filter: none;
    }
  }
}

/* Keep the textual workflow previews fully framed on notebook-height screens. */
@media (min-width: 781px) {
  .desktop-mode-showcase--intro { width: min(720px,80vw); }
  .desktop-mode-showcase--intro .dms-visual { height: 184px; }
  @media (max-height: 820px) {
    .desktop-mode-showcase--intro .dms-visual { height: 174px; }
  }
  @media (max-height: 680px) {
    .desktop-mode-showcase--intro { width: min(660px,78vw); }
    .desktop-mode-showcase--intro .dms-visual { height: 148px; }
  }
}

/* Desktop refinement v11: a single wordmark and a threshold-style exit. */
@media (min-width: 781px) {
  .desktop-intro-final-mark,
  .desktop-intro-final-copy { position: relative; z-index: 3; }
  .desktop-intro-welcome-world {
    color: var(--desk-blue);
    font-weight: 780;
    letter-spacing: .035em;
    text-shadow: 0 0 14px rgba(49,95,219,.12);
  }
  .desktop-auth-intro.force-motion.is-ready.is-welcome .desktop-intro-welcome-world {
    animation-delay: .44s;
  }

  .desktop-intro-door {
    position: fixed;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    perspective: 1500px;
    transform-style: preserve-3d;
  }
  .desktop-intro-door > span {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    background:
      radial-gradient(34% 58% at 50% 50%, rgba(255,255,255,1), rgba(210,228,255,.94) 42%, rgba(81,130,232,.30) 72%, transparent 100%),
      #f6f8fc;
    transform: scale(.72);
    filter: blur(12px);
  }
  .desktop-intro-door > i {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: block;
    width: calc(50% + 1px);
    backface-visibility: hidden;
    box-shadow: inset 0 0 70px rgba(49,95,219,.035);
    transform: rotateY(0);
  }
  .desktop-intro-door > i.left {
    left: 0;
    transform-origin: left center;
    background: radial-gradient(70% 45% at 100% 50%,rgba(73,125,231,.08),transparent 74%),#f6f8fc;
  }
  .desktop-intro-door > i.right {
    right: 0;
    transform-origin: right center;
    background: radial-gradient(70% 45% at 0 50%,rgba(73,125,231,.08),transparent 74%),#f6f8fc;
  }
  .desktop-intro-door::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 16%;
    bottom: 16%;
    z-index: 2;
    width: 1px;
    opacity: 0;
    background: linear-gradient(transparent,rgba(86,137,238,.72),#fff,rgba(86,137,238,.72),transparent);
    box-shadow: 0 0 18px rgba(73,125,231,.36);
    transform: translateX(-50%) scaleY(.45);
  }

  .desktop-auth-intro.force-motion.is-playing.is-leaving { opacity: 1 !important; visibility: visible !important; }
  .desktop-auth-intro.force-motion.is-ready.is-leaving .desktop-intro-finish {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .desktop-auth-intro.force-motion.is-leaving .desktop-intro-final-mark,
  .desktop-auth-intro.force-motion.is-leaving .desktop-intro-final-copy {
    animation: desktopCrossThreshold .52s cubic-bezier(.4,0,.2,1) forwards !important;
  }
  .desktop-auth-intro.force-motion.is-leaving .desktop-intro-door > span {
    animation: desktopThresholdLight .92s cubic-bezier(.16,1,.3,1) forwards;
  }
  .desktop-auth-intro.force-motion.is-leaving .desktop-intro-door > i.left {
    animation: desktopDoorLeft .92s cubic-bezier(.62,0,.2,1) forwards;
  }
  .desktop-auth-intro.force-motion.is-leaving .desktop-intro-door > i.right {
    animation: desktopDoorRight .92s cubic-bezier(.62,0,.2,1) forwards;
  }
  .desktop-auth-intro.force-motion.is-leaving .desktop-intro-door::after {
    animation: desktopDoorSeam .72s ease forwards;
  }
  @keyframes desktopCrossThreshold {
    to { opacity: 0; transform: translateZ(90px) scale(1.035); filter: blur(7px); }
  }
  @keyframes desktopThresholdLight {
    0% { opacity: 0; transform: scale(.72); filter: blur(12px); }
    42% { opacity: .82; }
    100% { opacity: 1; transform: scale(1.12); filter: blur(0); }
  }
  @keyframes desktopDoorLeft {
    0% { transform: rotateY(0); }
    100% { transform: rotateY(-82deg) translateX(-2%); }
  }
  @keyframes desktopDoorRight {
    0% { transform: rotateY(0); }
    100% { transform: rotateY(82deg) translateX(2%); }
  }
  @keyframes desktopDoorSeam {
    0% { opacity: 0; transform: translateX(-50%) scaleY(.45); }
    34% { opacity: 1; }
    100% { opacity: 0; transform: translateX(-50%) scaleY(1.2); }
  }

  @media (prefers-reduced-motion: reduce) {
    .desktop-auth-intro:not(.force-motion) .desktop-intro-door { display: none; }
  }
}

/* Desktop refinement v12: notebook-safe previews, drawn film frames, and a flat doorway. */
@media (min-width: 781px) {
  @media (max-height: 900px) {
    .login-auth-page .desktop-mode-showcase:not(.desktop-mode-showcase--intro) .dms-visual { height: 184px; }
  }
  @media (max-height: 700px) {
    .login-auth-page .desktop-mode-showcase:not(.desktop-mode-showcase--intro) .dms-visual { height: 154px; }
    .choice-root { height: 46px; padding-block: 5px; }
    .dms-ui-interactive { grid-template-rows: 46px 1fr; gap: 7px; }
    .choice-branches article { padding-block: 5px; }
  }

  .film-scenes article {
    border-color: rgba(70,91,126,.18);
    border-radius: 6px 9px 7px 8px;
    box-shadow: 1px 2px 0 rgba(80,103,145,.06);
  }
  .film-scenes article:nth-child(odd) { transform: rotate(-.35deg); }
  .film-scenes article:nth-child(even) { transform: rotate(.35deg); }
  .film-scenes i.film-sketch {
    position: relative;
    display: block;
    height: 62px;
    overflow: hidden;
    border: 0;
    border-bottom: 1px solid rgba(72,93,130,.20);
    border-radius: 0;
    background:
      repeating-linear-gradient(0deg,transparent 0 12px,rgba(84,108,151,.045) 12px 13px),
      linear-gradient(145deg,#fcfdff,#eef3fb);
  }
  .film-scenes article:nth-child(1) i.film-sketch,
  .film-scenes article:nth-child(2) i.film-sketch,
  .film-scenes article:nth-child(3) i.film-sketch,
  .film-scenes article:nth-child(4) i.film-sketch {
    background:
      repeating-linear-gradient(0deg,transparent 0 12px,rgba(84,108,151,.045) 12px 13px),
      linear-gradient(145deg,#fcfdff,#eef3fb) !important;
  }
  .film-sketch::before,
  .film-sketch::after,
  .film-sketch > span,
  .film-sketch > span::before,
  .film-sketch > span::after {
    position: absolute;
    display: block;
    content: "";
    border-color: #61769b;
  }
  .film-sketch.station::before {
    inset: 0;
    opacity: .34;
    background: repeating-linear-gradient(115deg,transparent 0 9px,#7890b8 9px 10px,transparent 10px 18px);
  }
  .film-sketch.station > span {
    left: 18%;
    top: 17px;
    width: 48%;
    height: 24px;
    border: 1.5px solid #61769b;
    border-bottom: 0;
    transform: rotate(-1deg) skewX(-4deg);
  }
  .film-sketch.station > span::before {
    left: 13%; top: 9px; width: 1px; height: 25px;
    background: #61769b;
    box-shadow: 42px 1px 0 #61769b;
  }
  .film-sketch.station::after {
    left: 8%; right: 5%; bottom: 8px; height: 8px;
    border-top: 1.5px solid #61769b;
    border-bottom: 1px solid #8495b3;
    transform: skewX(-24deg) rotate(-1deg);
  }

  .film-sketch.figure > span {
    left: 48%; top: 9px; width: 13px; height: 13px;
    border: 1.5px solid #61769b;
    border-radius: 48% 52% 45% 55%;
    transform: translateX(-50%) rotate(-4deg);
  }
  .film-sketch.figure > span::before {
    left: 5px; top: 12px; width: 1.5px; height: 27px;
    background: #61769b;
    transform: rotate(3deg);
  }
  .film-sketch.figure > span::after {
    left: -9px; top: 21px; width: 31px; height: 17px;
    border: 1.5px solid #61769b;
    border-top: 0;
    border-radius: 0 0 50% 50%;
    transform: rotate(2deg);
  }
  .film-sketch.figure::after {
    left: 12%; right: 10%; bottom: 8px; height: 1px;
    background: #8294b2;
    transform: rotate(-1deg);
  }

  .film-sketch.envelope > span {
    left: 50%; top: 50%; width: 50px; height: 31px;
    border: 1.5px solid #61769b;
    border-radius: 2px 4px 3px 2px;
    transform: translate(-50%,-47%) rotate(-7deg);
  }
  .film-sketch.envelope > span::before,
  .film-sketch.envelope > span::after {
    top: 5px; width: 29px; height: 1.5px;
    background: #61769b;
  }
  .film-sketch.envelope > span::before { left: 0; transform: rotate(31deg); transform-origin: left; }
  .film-sketch.envelope > span::after { right: 0; transform: rotate(-31deg); transform-origin: right; }
  .film-sketch.envelope::after {
    left: 18%; right: 14%; bottom: 8px; height: 1px;
    background: #8a9ab5;
    transform: rotate(1deg);
  }

  .film-sketch.profile > span {
    left: 43%; top: 8px; width: 24px; height: 30px;
    border: 1.5px solid #61769b;
    border-left-color: transparent;
    border-radius: 48% 52% 45% 55%;
    transform: rotate(-5deg);
  }
  .film-sketch.profile > span::before {
    right: -3px; top: 13px; width: 7px; height: 5px;
    border-top: 1.5px solid #61769b;
    border-right: 1.5px solid #61769b;
    transform: skewX(25deg);
  }
  .film-sketch.profile > span::after {
    left: -17px; top: 27px; width: 53px; height: 29px;
    border: 1.5px solid #61769b;
    border-bottom: 0;
    border-radius: 50% 50% 0 0;
  }

  .desktop-intro-door > span {
    background: linear-gradient(90deg,#eaf1ff 0%,#f8fbff 34%,#fff 50%,#f8fbff 66%,#eaf1ff 100%);
    transform: scaleX(.015);
    transform-origin: center;
    filter: blur(4px);
  }
  .desktop-intro-door > i.left,
  .desktop-intro-door > i.right {
    background:
      linear-gradient(90deg,transparent,rgba(49,95,219,.035)),
      repeating-linear-gradient(0deg,transparent 0 52px,rgba(49,95,219,.025) 52px 53px),
      #f6f8fc;
  }
  .desktop-auth-intro.force-motion.is-leaving .desktop-intro-door > span {
    animation: desktopFlatThresholdLight .9s cubic-bezier(.16,1,.3,1) forwards;
  }
  .desktop-auth-intro.force-motion.is-leaving .desktop-intro-door > i.left {
    animation: desktopPaperDoorLeft .9s cubic-bezier(.65,0,.22,1) forwards;
  }
  .desktop-auth-intro.force-motion.is-leaving .desktop-intro-door > i.right {
    animation: desktopPaperDoorRight .9s cubic-bezier(.65,0,.22,1) forwards;
  }
  @keyframes desktopFlatThresholdLight {
    0% { opacity: 0; transform: scaleX(.015); filter: blur(4px); }
    28% { opacity: 1; }
    100% { opacity: 1; transform: scaleX(1); filter: blur(0); }
  }
  @keyframes desktopPaperDoorLeft {
    0% { transform: translateX(0) rotateY(0); }
    100% { transform: translateX(-101%) rotateY(-7deg); }
  }
  @keyframes desktopPaperDoorRight {
    0% { transform: translateX(0) rotateY(0); }
    100% { transform: translateX(101%) rotateY(7deg); }
  }
}

/* Preserve the pencil-board finish after the notebook compatibility layer. */
@media (min-width: 781px) {
  .film-scenes article:nth-child(1) i.film-sketch,
  .film-scenes article:nth-child(2) i.film-sketch,
  .film-scenes article:nth-child(3) i.film-sketch,
  .film-scenes article:nth-child(4) i.film-sketch {
    background:
      linear-gradient(98deg,transparent 0 48%,rgba(75,99,142,.035) 49%,transparent 51%),
      repeating-linear-gradient(0deg,transparent 0 12px,rgba(84,108,151,.045) 12px 13px),
      linear-gradient(145deg,#fcfdff,#eef3fb) !important;
  }
  .film-sketch.figure > span::after {
    border-radius: 10% 12% 48% 52%;
    transform: rotate(-2deg) skewX(-5deg);
  }
}

/* Desktop refinement v14: the automatic opening begins at the SPARK welcome;
   the replay button still runs the complete book-and-workflow introduction. */
@media (min-width: 781px) {
  .desktop-auth-intro.is-short-intro .desktop-auth-intro-inner {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
  }
  .desktop-auth-intro.is-short-intro .desktop-book-scene,
  .desktop-auth-intro.is-short-intro .desktop-mode-showcase--intro {
    display: none !important;
    animation: none !important;
  }
  .desktop-auth-intro.is-short-intro .desktop-intro-finish {
    position: fixed !important;
    inset: 0 !important;
    display: grid !important;
    place-content: center !important;
    justify-items: center !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    transform: none !important;
    background:
      radial-gradient(36% 30% at 50% 48%, rgba(49,95,219,.09), transparent 76%),
      linear-gradient(180deg, rgba(248,250,255,.18), rgba(242,246,253,.12));
  }
  .desktop-auth-intro.is-short-intro .desktop-intro-final-mark,
  .desktop-auth-intro.is-short-intro .desktop-intro-final-copy {
    position: relative !important;
    inset: auto !important;
    margin-inline: auto !important;
  }
  .desktop-auth-intro.is-short-intro.is-ready.is-leaving .desktop-intro-finish {
    transform: none !important;
  }
  .desktop-auth-intro.is-short-intro.force-motion.is-leaving .desktop-intro-final-mark,
  .desktop-auth-intro.is-short-intro.force-motion.is-leaving .desktop-intro-final-copy {
    animation: desktopShortFinalFade .46s ease forwards !important;
  }
  .desktop-auth-intro.is-short-intro.force-motion.is-ready .desktop-intro-final-mark > svg {
    animation-delay: .08s !important;
  }
  .desktop-auth-intro.is-short-intro.force-motion.is-ready .desktop-intro-final-wordmark span {
    animation-delay: .28s !important;
  }
  .desktop-auth-intro.is-short-intro.force-motion.is-ready .desktop-intro-final-wordmark i {
    animation-delay: .38s !important;
  }
  .desktop-auth-intro.is-short-intro.force-motion.is-ready.is-welcome .desktop-intro-welcome-lead {
    animation-delay: .52s !important;
  }
  .desktop-auth-intro.is-short-intro.force-motion.is-ready.is-welcome .desktop-intro-welcome-world {
    animation-delay: .72s !important;
  }
  @keyframes desktopShortFinalFade {
    from { opacity: 1; filter: blur(0); }
    to { opacity: 0; filter: blur(5px); }
  }
}

/* Desktop refinement v15: one responsive scale for login, registration and
   password reset. Phone layouts remain owned by their existing mobile rules. */
@media (min-width: 781px) {
  .auth-shell,
  .registration-layout,
  .reset-shell {
    width: min(1380px, calc(100% - clamp(56px, 7vw, 144px))) !important;
    grid-template-columns: minmax(0, 1fr) clamp(390px, 29vw, 450px) !important;
    gap: clamp(48px, 6vw, 104px) !important;
  }
  .auth-card,
  .registration-form,
  .reset-card { padding: clamp(30px, 2.2vw, 38px) !important; }
  .registration-page .registration-field input { font-size: 14px !important; }
  .registration-page .registration-field input::placeholder { font-size: 14px !important; }
  .registration-page .registration-password input { padding-right: 68px !important; }
  .registration-page .registration-eye {
    top: 50% !important;
    right: 7px !important;
    height: 28px !important;
    padding: 0 10px !important;
    transform: translateY(-50%) !important;
    border-radius: 9px !important;
    line-height: 28px !important;
  }
}

/* Common notebook and compact desktop viewport. */
@media (min-width: 1041px) and (max-width: 1599px) {
  .auth-shell,
  .registration-layout,
  .reset-shell {
    width: min(1120px, calc(100% - 64px)) !important;
    padding: 72px 0 30px !important;
    grid-template-columns: minmax(0, 1fr) 390px !important;
    gap: clamp(42px, 5vw, 66px) !important;
  }
  .auth-title,
  .registration-brand h1,
  .reset-context h1 { font-size: clamp(38px, 3.7vw, 52px) !important; }
  .desktop-book-scene { height: 205px; margin-bottom: 18px; transform: scale(.84); transform-origin: left center; }
  .desktop-mode-showcase { margin-bottom: 16px; }
  .desktop-mode-showcase:not(.desktop-mode-showcase--intro) .dms-visual { height: 154px; }
  .auth-card,
  .registration-form,
  .reset-card { padding: 28px !important; border-radius: 20px !important; }
  .auth-form-title,
  .registration-form h2,
  .reset-card h2 { font-size: 24px !important; }
}

/* Full desktop monitors can use more canvas without inflating the form. */
@media (min-width: 1800px) and (min-height: 901px) {
  .auth-shell,
  .registration-layout,
  .reset-shell {
    width: min(1480px, calc(100% - 160px)) !important;
    grid-template-columns: minmax(0, 1fr) 460px !important;
    gap: clamp(96px, 7vw, 136px) !important;
  }
  .auth-title,
  .registration-brand h1,
  .reset-context h1 { font-size: clamp(62px, 3.7vw, 72px) !important; }
  .registration-page .registration-brand {
    width: min(100%, 620px) !important;
    max-width: 620px !important;
    justify-self: end !important;
  }
  .registration-page .registration-eyebrow { font-size: 12px !important; }
  .registration-page .registration-brand h1 { font-size: 64px !important; }
  .registration-page .registration-brand-copy { max-width: 580px !important; font-size: 14px !important; }
  .registration-page .registration-form { padding: 36px !important; }
  .registration-page .registration-field { margin-bottom: 12px !important; }
  .registration-page .registration-field input,
  .registration-page .registration-code-button,
  .registration-page .registration-submit { min-height: 48px !important; }
}

/* Short desktop windows: keep the two sides visually grouped and make every
   account form fit without clipping its primary action or footer. */
@media (min-width: 781px) and (max-height: 820px) {
  .auth-shell,
  .registration-layout {
    width: min(980px, calc(100% - 56px)) !important;
    padding: 54px 0 18px !important;
    grid-template-columns: minmax(0, 1fr) 390px !important;
    gap: 44px !important;
  }
  .auth-copy { width: min(100%, 540px) !important; justify-self: end !important; }
  .registration-brand { width: min(100%, 430px) !important; justify-self: end !important; }
  .reset-shell { padding-top: 54px !important; padding-bottom: 18px !important; }
  .auth-card,
  .registration-form,
  .reset-card { padding: 23px 25px !important; }
  .registration-page .desktop-book-scene { height: 120px; margin-bottom: 0; transform: scale(.58); }
  .registration-page .registration-brand h1 { font-size: 40px !important; }
  .registration-page .registration-brand-copy { max-width: 410px !important; font-size: 12px !important; line-height: 1.6 !important; }
  .registration-page .registration-types { display: none !important; }
  .registration-form header { margin-bottom: 10px !important; }
  .registration-field { margin-bottom: 7px !important; }
  .registration-field input { min-height: 40px !important; padding-block: 8px !important; }
  .registration-submit { min-height: 41px !important; }
  .registration-foot { margin-top: 8px !important; }
}

@media (min-width: 781px) and (max-height: 680px) {
  .auth-shell,
  .registration-layout { width: min(920px, calc(100% - 44px)) !important; padding-top: 44px !important; gap: 34px !important; }
  .registration-brand { width: min(100%, 390px) !important; }
  .registration-page .desktop-book-scene { display: none !important; }
  .registration-page .registration-brand h1 { font-size: 31px !important; }
  .auth-card,
  .registration-form,
  .reset-card { padding: 17px 21px !important; }
  .registration-form h2 { font-size: 22px !important; }
  .registration-field { margin-bottom: 5px !important; }
  .registration-field label { margin-bottom: 3px !important; }
  .registration-field input { min-height: 36px !important; }
  .registration-submit { min-height: 38px !important; }
}

/* Laptop screens often combine a wide panel with limited CSS height because
   of display scaling. Keep the registration story visually equal to the form
   instead of shrinking it like a short utility panel. */
@media (min-width: 1041px) and (min-height: 681px) and (max-height: 820px) {
  .registration-page .registration-layout {
    width: min(1220px, calc(100% - 64px)) !important;
    grid-template-columns: minmax(0, 1fr) 390px !important;
    gap: clamp(54px, 5vw, 78px) !important;
  }
  .registration-page .registration-brand {
    width: min(100%, 570px) !important;
    max-width: 570px !important;
    justify-self: end !important;
  }
  .registration-page .desktop-book-scene {
    width: 590px !important;
    height: 164px !important;
    margin-bottom: 5px !important;
    transform: scale(.78) !important;
    transform-origin: left center !important;
  }
  .registration-page .registration-eyebrow {
    margin-bottom: 12px !important;
    font-size: 11px !important;
  }
  .registration-page .registration-brand h1 {
    margin-bottom: 13px !important;
    font-size: 52px !important;
    line-height: 1.08 !important;
  }
  .registration-page .registration-brand-copy {
    max-width: 540px !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
  }
}

@media (min-width: 1041px) and (min-height: 541px) and (max-height: 680px) {
  .registration-page .registration-layout {
    width: min(1120px, calc(100% - 48px)) !important;
    padding: 34px 0 10px !important;
    grid-template-columns: minmax(0, 1fr) 390px !important;
    gap: clamp(42px, 4vw, 58px) !important;
  }
  .registration-page .registration-brand {
    width: min(100%, 520px) !important;
    max-width: 520px !important;
    justify-self: end !important;
  }
  .registration-page .desktop-book-scene {
    display: block !important;
    width: 590px !important;
    height: 180px !important;
    margin-bottom: 12px !important;
    transform: scale(.64) !important;
    transform-origin: left center !important;
  }
  .registration-page .registration-eyebrow {
    margin-bottom: 9px !important;
    font-size: 10px !important;
  }
  .registration-page .registration-brand h1 {
    margin-bottom: 9px !important;
    font-size: 46px !important;
    line-height: 1.06 !important;
  }
  .registration-page .registration-brand-copy {
    max-width: 500px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
}

@media (min-width: 1600px) and (min-height: 821px) and (max-height: 900px) {
  .registration-page .registration-brand {
    max-width: 790px !important;
  }
  .registration-page .registration-eyebrow {
    margin-bottom: 14px !important;
    font-size: 13px !important;
  }
  .registration-page .registration-brand h1 {
    margin-bottom: 16px !important;
    font-size: 68px !important;
    line-height: 1.06 !important;
  }
  .registration-page .registration-brand-copy {
    max-width: 680px !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
  }
}