/* StudyPuff — the living field guide.
   A screen-only finish over the shared layout. Native details, form controls
   and the complete document remain usable without the motion enhancement. */

@media screen {
  :root {
    --page-gutter: 60px;
    --paper-edge: #bcc6ad;
    --paper-shadow: 0 2px 0 #fffdf7, 0 3px 0 #d8ddc9, 0 8px 0 #eeeee0, 0 9px 0 #d8ddc9, 0 18px 32px #35432a08;
    --field-shadow: inset 0 2px 3px #35432a06;
    --hover-lift: -2px;
    --press-drop: 1px;
    --card-lift: -5px;
    --fan-turn: 3deg;
    --fan-shift: 5px;
    --fan-rise: -6px;
    --spark-turn: 2deg;
    --arrow-nudge: 2px;
  }

  /* Reading rhythm and a single, visible keyboard treatment. */
  body { text-rendering: optimizeLegibility; }
  ::selection { background: var(--lime); color: var(--deep); }
  :is(h1, h2, h3, legend) { text-wrap: balance; }
  :is(p, li, .answer-text) { overflow-wrap: break-word; }
  :is(button, a, input, textarea, select, summary):focus-visible {
    outline: 3px solid #95622c;
    outline-offset: 4px;
  }
  .small { font-size: .82rem; }
  .eyebrow { letter-spacing: .14em; }
  .mini-label { font-size: .67rem; }
  .hero-copy, .hero-art, .question-sheet, .collectible-card { animation: none; }

  /* The masthead keeps quiet mode near the task, without competing with it. */
  .site-header { min-height: 100px; padding-block: 23px; }
  .brand { min-height: 44px; align-items: center; }
  .brand > span:first-child { align-self: flex-start; margin-top: 6px; }
  .header-tools { display: flex; align-items: center; justify-content: flex-end; gap: 24px; }
  .header-link { min-height: 44px; font-size: .82rem; gap: 12px; }
  .motion-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #d0d6c3;
    border-radius: 5px;
    background: #f2f2e7;
    color: var(--forest);
    font-size: .76rem;
    line-height: 1.3;
    white-space: nowrap;
    transition: background .16s, border-color .16s;
  }
  .motion-toggle[hidden] { display: none; }
  .motion-indicator {
    display: inline-block;
    flex: none;
    width: 8px;
    height: 8px;
    border: 1px solid var(--forest);
    border-radius: 50%;
    background: var(--forest);
  }
  html[data-motion="quiet"] .motion-indicator { background: transparent; }
  .motion-toggle:hover { background: #e9eedc; border-color: #94a78a; }

  /* Pressable ink and paper. Shadows move; neighbouring content does not. */
  .primary, .secondary {
    min-height: 56px;
    padding: 16px 23px;
    border-radius: 5px;
    box-shadow: 0 3px 0 #173c2c;
    transition: background .16s, border-color .16s, box-shadow .16s, transform .16s;
  }
  .primary { border-color: #193e2c; }
  .secondary { background: var(--white); box-shadow: 0 3px 0 #d9dec9; }
  .primary:hover:not(:disabled) {
    background: var(--deep);
    transform: translateY(var(--hover-lift));
    box-shadow: 0 5px 0 #173c2c;
  }
  .secondary:hover:not(:disabled) {
    background: #edf4da;
    transform: translateY(var(--hover-lift));
    box-shadow: 0 5px 0 #cbd7b7;
  }
  .primary:active:not(:disabled), .secondary:active:not(:disabled) {
    transform: translateY(var(--press-drop));
    box-shadow: 0 1px 0 #49634a;
  }
  .primary:disabled, .secondary:disabled { transform: none; box-shadow: none; }
  .primary > .icon, .secondary > .icon, .button-icon > .icon {
    transition: translate .16s;
  }
  .primary:hover:not(:disabled) > .icon, .secondary:hover:not(:disabled) > .icon,
  .primary:hover:not(:disabled) .button-icon > .icon { translate: var(--arrow-nudge) 0; }
  .button-icon { width: 33px; height: 33px; border: 1px solid #b9d383; }
  .text-button, .back-button, .text-link { min-height: 44px; }
  .text-button, .back-button { text-decoration-thickness: 1px; }
  .text-button:hover, .text-link:hover { text-decoration-thickness: 2px; }

  /* Opening spread: character cards with an unmistakable printed edge. */
  .hero { padding-top: 68px; padding-bottom: 76px; }
  .hero-copy .pill { background: #f0f2e3; padding: 9px 13px; }
  .hero-lead { max-width: 375px; font-size: 1.06rem; }
  .hero-action { gap: 19px; }
  .hero-reassurance { font-size: .78rem; margin-top: 24px; }
  .hero-ticket {
    border-color: #264d3c4a;
    border-radius: 7px;
    box-shadow: 0 2px 0 #f8f6ed, 0 3px 0 #aeb99c, 0 17px 25px #35432a14;
  }
  .ticket-spark { box-shadow: 0 2px 0 #fffdf7, 0 3px 0 #b7bea8, 0 23px 35px #35432a1a; }
  .hero-art:hover .ticket-explorer { transform: rotate(calc(-15deg - var(--fan-turn))) translateX(calc(0px - var(--fan-shift))); }
  .hero-art:hover .ticket-builder { transform: rotate(calc(15deg + var(--fan-turn))) translateX(var(--fan-shift)); }
  .hero-art:hover .ticket-spark { transform: rotate(calc(-3deg + var(--spark-turn))) translateY(var(--fan-rise)); }
  .round-stamp { box-shadow: 2px 3px 0 #264d3c12; }
  .hero-note { color: #51653f; }
  .promise-strip { border-color: #aec37b; padding-block: 22px; }
  .promise-strip p { font-size: .7rem; letter-spacing: .12em; }
  .how-section { gap: clamp(38px, 7vw, 100px); padding-block: 92px; }
  .how-steps li { padding-block: 25px; gap: 22px; }
  .step-index {
    display: grid;
    place-items: center;
    flex: none;
    width: 37px;
    height: 37px;
    margin-top: 0;
    border: 1px solid #bfcaae;
    border-radius: 50%;
    color: var(--forest);
    font-size: .98rem;
  }
  .how-steps h3 { font-size: 1.1rem; margin-bottom: 9px; }
  .how-steps p { font-size: .91rem; }

  .guide-peek {
    max-width: 360px;
    margin-top: 28px;
    border: 1px solid var(--paper-edge);
    border-radius: 5px;
    background: var(--white);
    box-shadow: 3px 3px 0 #e7ead9;
  }
  .guide-peek > summary, .result-extra > summary {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 58px;
    list-style: none;
    cursor: pointer;
  }
  .guide-peek > summary { padding: 15px 17px; font-size: .86rem; font-weight: 600; }
  .guide-peek > summary::-webkit-details-marker, .result-extra > summary::-webkit-details-marker { display: none; }
  .guide-peek > summary::after, .result-extra > summary::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin: -4px 3px 0 auto;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .18s;
  }
  .guide-peek[open] > summary::after, .result-extra[open] > summary::after { transform: rotate(225deg); margin-top: 4px; }
  .guide-peek > summary:hover { background: #f0f3e4; }
  .guide-peek-body { margin-inline: 17px; padding: 18px 0 5px; border-top: 1px solid var(--line); }
  .guide-peek-body p { font-size: .87rem; line-height: 1.7; }
  .guide-peek-body p:not(.eyebrow):not(.small) { font-family: var(--serif); font-size: 1.1rem; color: var(--forest); }
  .guide-peek-body .eyebrow { font-size: .63rem; margin-bottom: 12px; }
  .guide-peek-body .small { font-size: .79rem; color: var(--muted); }

  .selves-section { padding-block: 78px 84px; background: #ecefdf; }
  .profile-gallery { gap: 20px; }
  .profile-preview {
    --preview-rest: 0px;
    --preview-hover: 0px;
    display: flex;
    flex-direction: column;
    border-color: #264d3c4a;
    border-radius: 6px;
    box-shadow: 0 3px 0 #f8f6ed, 0 4px 0 #bac3ac;
    transform: translateY(calc(var(--preview-rest) + var(--preview-hover)));
  }
  .profile-preview:nth-child(even) { --preview-rest: 14px; transform: translateY(calc(var(--preview-rest) + var(--preview-hover))); }
  .profile-preview:hover { --preview-hover: var(--card-lift); transform: translateY(calc(var(--preview-rest) + var(--preview-hover))); box-shadow: 0 3px 0 #f8f6ed, 0 4px 0 #bac3ac, 0 14px 25px #35432a10; }
  .profile-preview .preview-copy { flex: 1; }
  .profile-preview h3 { font-size: 1.56rem; }
  .profile-preview p { font-size: .83rem; min-height: 0; line-height: 1.65; }
  .profile-preview .card-foot { margin-top: auto; }
  .science-note { border: 1px solid #d6ced8; box-shadow: 3px 5px 0 #e3dfdb; }
  .science-section .text-link { line-height: 1.7; }
  .site-footer { padding-block: 28px 33px; }
  .site-footer nav { gap: 12px 24px; }
  .site-footer nav a, .footer-brand { display: inline-flex; align-items: center; min-height: 44px; }

  /* A clear place in the quiz, then one generous sheet of questions. */
  .quiz-page { padding-top: 30px; padding-bottom: 58px; }
  .quiz-heading .text-button { min-height: 44px; }
  .quiz-progress-copy { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; margin: 21px 0 12px; }
  .quiz-section-label { font-size: .68rem; letter-spacing: .13em; font-weight: 600; color: var(--forest); }
  .question-countdown { font-size: .79rem; line-height: 1.5; color: var(--muted); margin: 0; }
  .quiz-progress-track { height: 3px; background: #dce2ce; border-radius: 2px; overflow: hidden; }
  .quiz-progress-track > i {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--forest);
    transform: scaleX(var(--quiz-progress, 0));
    transform-origin: left;
    transition: transform .2s ease-out;
  }
  .question-journey { gap: 8px; margin: 13px 0 29px; }
  .journey-step {
    display: grid;
    place-items: center;
    min-height: 44px;
    padding: 4px;
    border: 1px solid #d6ddc9;
    border-radius: 4px;
    text-align: center;
    background: #f3f4e9;
    font-size: .74rem;
    transition: background .16s, border-color .16s;
  }
  .journey-step > span { width: 29px; height: 29px; }
  .journey-step.is-done { border-color: #9eb785; background: #e9efd9; }
  .journey-step.is-current { background: var(--forest); border-color: var(--forest); box-shadow: inset 0 0 0 3px var(--forest), inset 0 0 0 4px #f8f6ed40; }
  .journey-step.is-current > span { background: transparent; }
  .journey-step:hover:not(:disabled):not(.is-current) { border-color: var(--forest); background: #e1eacb; }
  .journey-step:disabled { opacity: .67; }
  .question-sheet { padding: 36px 40px 28px; border-color: var(--paper-edge); border-radius: 7px; box-shadow: var(--paper-shadow); }
  .sheet-topline { margin-bottom: 22px; }
  .sheet-topline .eyebrow { font-size: .69rem; letter-spacing: .12em; }
  #question-form legend { font-size: clamp(1.8rem, 2.6vw, 2.35rem); line-height: 1.35; }
  .question-hint { font-size: .91rem; max-width: 600px; margin-bottom: 27px; }
  .answer-list { gap: 11px; }
  .answer { min-height: 68px; padding: 16px 18px; border-color: #cdd4bd; border-radius: 5px; gap: 15px; background: #f8f8f0; }
  .answer:hover { border-color: #7f996e; background: #f0f4e5; }
  .answer:has(input:checked) { background: #e2efbf; border-color: var(--forest); box-shadow: inset 3px 0 0 var(--forest); }
  .answer:has(input:focus-visible) { outline-offset: 3px; }
  .answer-number { width: 29px; height: 29px; font-size: .75rem; background: var(--white); }
  .answer-text { flex: 1; min-width: 0; font-size: .96rem; line-height: 1.55; }
  .answer-check, .answer:has(input:checked) .answer-check {
    display: grid;
    place-items: center;
    flex: 0 0 21px;
    width: 21px;
    min-height: 24px;
    margin-left: 0;
    color: transparent;
  }
  .answer:has(input:checked) .answer-check { color: var(--forest); }
  .quiz-actions { margin-top: 28px; gap: 16px; }
  .quiz-actions .primary { min-height: 54px; font-size: .88rem; padding: 14px 18px; }
  .quiz-actions .back-button { font-size: .83rem; }
  .period-note { font-size: .77rem; margin-top: 25px; padding-top: 18px; gap: 10px; }
  .period-note .icon { width: 16px; height: 16px; }
  .quiz-privacy { font-size: .78rem; margin-top: 30px; gap: 8px; }

  /* A collectible cover, with the useful next action easy to find. */
  .result-hero { padding-top: 67px; padding-bottom: 76px; gap: 80px; }
  .result-intro { position: relative; }
  .result-name-prefix { display: block; }
  .result-mini-character { display: none; }
  .result-summary { font-size: 1rem; line-height: 1.75; }
  .result-quiet { font-size: .79rem; margin-top: 21px; }
  .collectible-card { border-radius: 7px; box-shadow: 0 2px 0 #fffdf7, 0 3px 0 #b9c2aa, 9px 12px 0 #e8ebdc, 10px 13px 0 #cad2b8, 0 22px 36px #35432a0b; }
  .card-download { margin-top: 29px; }
  .card-download .text-link { font-size: .84rem; }
  .result-nav { gap: 30px; padding-block: 12px; background: #f0f2e5; }
  .result-nav a { min-height: 44px; font-size: .88rem; gap: 11px; }
  .result-nav a span { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #c5d0b6; border-radius: 50%; font-size: .63rem; color: #53684a; }
  .result-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
  .result-invitation { display: flex; align-items: flex-start; gap: 12px; padding: 15px 18px; margin: 25px 0 0; border-left: 3px solid #94ae67; background: #edf2df; color: #476044; font-size: .9rem; line-height: 1.7; }
  .result-invitation p { margin: 0; }
  .result-invitation .icon { width: 20px; height: 20px; margin-top: 3px; }
  .snapshot-section { gap: 70px; padding-block: 70px; }
  .habit-panel { padding: 24px 28px; border-radius: 6px; background: #edf1e2; }
  .habit-panel > summary { min-height: 44px; font-size: .96rem; line-height: 1.65; padding-block: 10px; }
  .habit-panel[open] > summary { margin-bottom: 25px; }
  .habit-measure > p, .method-detail { font-size: .83rem; }
  .method-detail summary { min-height: 44px; padding-block: 11px; }
  .method-detail a { display: inline-flex; align-items: center; min-height: 44px; }
  .insight-pair p { font-size: .9rem; line-height: 1.75; }
  .boundary-note { font-size: .83rem; }

  .result-extra { border-top: 1px solid #cbd3bd; border-bottom: 1px solid #cbd3bd; background: #f1f2e6; }
  .result-extra + .result-extra { border-top: 0; }
  .result-extra > summary { max-width: 1300px; margin-inline: auto; padding: 23px var(--page-gutter); color: var(--forest); font-family: var(--serif); font-size: 1.35rem; line-height: 1.5; }
  .result-extra > summary:hover { background: #e9efdb; }
  .result-extra > summary .icon { width: 22px; height: 22px; order: -1; }
  .result-extra > summary > span { min-width: 0; }
  .result-extra[open] { background: var(--paper); }
  .result-extra[open] > summary { border-bottom: 1px solid #d0d8c2; background: #e9efdb; }
  .result-extra > .next-section { padding-block: 46px 52px; }
  .result-extra > .plan-section { padding-block: 43px 51px; }
  .plan-note p { font-size: .82rem; }
  #plan-form { padding: 30px; border-color: #c7cbb4; border-radius: 6px; background: #eeeddf; box-shadow: 0 4px 0 #e2e5d4; }
  .field-label { font-size: .87rem; }
  #plan-form .small { font-size: .78rem; line-height: 1.7; }
  .time-options { gap: 8px; }
  .time-options span { min-height: 49px; font-size: .86rem; transition: background .15s, border-color .15s; }
  .time-options label:has(input:checked) span { box-shadow: inset 0 -3px 0 #7e9a55; }
  .plan-ready { border-radius: 6px; background: #f1f5e5; padding: 28px; box-shadow: 3px 4px 0 #e3e8d5; }
  .plan-ready-heading .eyebrow { font-size: .65rem; }
  .session-meta { font-size: .74rem; }
  .session-list p { font-size: .88rem; line-height: 1.7; }
  .plan-ready > .small, .plan-downloads .text-link { font-size: .81rem; }
  .keep-section { padding-block: 56px; }
  .keep-copy > p:not(.eyebrow):not(.small) { font-size: .95rem; }
  .newsletter-block { border-radius: 6px; box-shadow: 0 4px 0 #e9eadc; }
  .newsletter-block .small { font-size: .81rem; }
  .email-delivery { border-radius: 6px; }
  .check-label { font-size: .87rem; }
  .result-footer > p { font-size: .79rem; }
  .result-footer .text-button { font-size: .8rem; }

  /* The working notebook: comfortable fields, clear checks, honest receipts. */
  .practice-section { padding-block: 63px 78px; }
  .practice-section-heading { gap: 50px; margin-bottom: 35px; }
  .practice-section-heading > p { line-height: 1.8; max-width: 430px; }
  .practice-workspace { overflow: visible; border-color: #b6c2a5; border-radius: 7px; box-shadow: var(--paper-shadow); }
  .practice-progress { gap: 38px; padding: 19px 42px; border-radius: 6px 6px 0 0; background: #edf1df; }
  .practice-progress li { font-size: .88rem; gap: 11px; }
  .practice-progress li > span { width: 31px; height: 31px; font-size: .67rem; background: #fafbf3; }
  .practice-progress li[aria-current] > span { box-shadow: 0 0 0 3px #edf1df, 0 0 0 4px #8ea777; }
  .practice-sheet { max-width: 900px; padding: 45px 45px 38px; }
  .practice-title { font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.3; max-width: 700px; }
  .practice-sheet .eyebrow { font-size: .69rem; letter-spacing: .12em; margin-bottom: 19px; }
  .practice-intro { font-size: 1rem; line-height: 1.8; margin-bottom: 26px; }
  .practice-sheet .field-label { font-size: .88rem; margin-top: 22px; }
  #plan-form input[type="text"], #plan-form input[type="date"], .email-row input,
  .practice-sheet input[type="text"], .practice-sheet input[type="date"], .practice-sheet textarea, .practice-sheet select {
    min-height: 51px;
    border-color: #a9b79a;
    border-radius: 4px;
    background: #fffef9;
    color: var(--ink);
    box-shadow: var(--field-shadow);
    font-size: 1rem;
    line-height: 1.55;
    transition: background .16s, border-color .16s;
  }
  .practice-sheet textarea { min-height: 116px; padding: 15px; }
  input::placeholder, textarea::placeholder { color: #748069; opacity: 1; }
  #plan-form input:focus-visible, .email-row input:focus-visible,
  .practice-sheet :is(input[type="text"], input[type="date"], textarea, select):focus-visible {
    background: #fffefc;
    border-color: var(--forest);
  }
  .practice-sheet [aria-invalid="true"], #plan-form input[aria-invalid="true"] { border-color: #a84432; box-shadow: inset 3px 0 0 #a84432; }
  .practice-sheet .field-hint { font-size: .84rem; line-height: 1.75; }
  .practice-sheet .small { font-size: .82rem; line-height: 1.75; }
  .field-error, .practice-sheet .field-error { font-size: .85rem; line-height: 1.7; }
  .mission-picker { margin-bottom: 24px; }
  .mission-picker summary, .practice-scratchpad summary { min-height: 44px; padding-block: 11px; font-size: .87rem; }
  .practice-choices { gap: 20px; margin-top: 26px; }
  .practice-choice {
    min-height: 214px;
    padding: 25px 27px 27px;
    border-color: #9db183;
    border-radius: 6px;
    background: #edf2df;
    box-shadow: 0 3px 0 #d7dfc8;
    transition: transform .18s, background .18s, box-shadow .18s;
  }
  .practice-choice:nth-child(2) { background: #f7ecdf; border-color: #bea98c; box-shadow: 0 3px 0 #e5d9c6; }
  .practice-choice:hover { transform: translateY(var(--hover-lift)); box-shadow: 0 5px 0 #c8d3b7; }
  .practice-choice:nth-child(2):hover { box-shadow: 0 5px 0 #ded0b8; }
  .practice-choice:active { transform: translateY(var(--press-drop)); box-shadow: 0 1px 0 #adb99b; }
  .choice-symbol { width: 43px; height: 43px; border: 1px solid #c5cfb3; margin-bottom: 22px; }
  .practice-choice:nth-child(2) .choice-symbol { border-color: #d1bea4; }
  .practice-choice strong { font-size: 1.12rem; letter-spacing: -.02em; }
  .practice-choice > span:not(.choice-symbol):not(.choice-arrow) { font-size: .89rem; line-height: 1.7; max-width: 260px; }
  .choice-arrow { color: #4a6640; top: 26px; right: 25px; transition: translate .18s; }
  .practice-choice:hover .choice-arrow { translate: var(--arrow-nudge) calc(0px - var(--arrow-nudge)); }
  .practice-actions { margin-top: 31px; gap: 18px; }
  .practice-actions .primary, .practice-actions .secondary { min-height: 54px; }
  .practice-actions > .text-button, .practice-bottom-actions .text-button { font-size: .86rem; }
  .example-passage { border-left-color: #8ea967; padding: 25px 29px; background: #edf1e2; }
  .example-passage > p { font-size: 1.26rem; line-height: 1.85; }
  .example-passage .mini-label, .question-to-keep .mini-label { font-size: .67rem; letter-spacing: .12em; }
  .question-to-keep { padding: 25px 27px 27px; margin-block: 28px; border: 1px solid #becaab; border-left: 3px solid #8ea967; border-radius: 0 5px 5px 0; background: #f5f6e9; box-shadow: 3px 3px 0 #e8ecda; }
  .question-to-keep > p { font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.65; margin-bottom: 0; }
  .reference-answer { padding: 25px 27px; border: 1px solid #c7d2b5; border-radius: 5px; background: #eef3df; }
  .reference-answer > p:not(.mini-label) { font-size: 1rem; line-height: 1.85; }
  .reference-answer > a { min-height: 44px; display: inline-flex; align-items: center; gap: 9px; font-size: .84rem; line-height: 1.65; overflow-wrap: anywhere; }
  .verification-choices { margin-top: 29px; }
  .verification-choices label { min-height: 75px; padding: 17px 18px; gap: 13px; border-color: #c7d0b9; font-size: .94rem; background: #fafaf3; }
  .verification-choices input { width: 20px; height: 20px; flex: none; margin-top: 4px; }
  .verification-choices label small { font-size: .82rem; line-height: 1.7; margin-top: 4px; }
  .verification-choices label:has(input:checked) { border-color: #78915e; background: #edf3df; box-shadow: inset 3px 0 0 #78915e; }
  .verification-choices label:has(input[value="unverified"]:checked) { background: #f7efdb; border-color: #ad9863; box-shadow: inset 3px 0 0 #ad9863; }
  .verification-choices label:has(input:focus-visible) { outline: 3px solid #95622c; outline-offset: 3px; }
  .practice-receipts { margin-top: 23px; gap: 10px; }
  .practice-receipts > span { padding: 9px 13px; font-size: .79rem; border-radius: 4px; }
  .practice-return-fields { gap: 24px; }
  .practice-file-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 18px; padding-top: 24px; margin: 27px 0 0; border-top: 1px solid #d4dcc5; color: var(--muted); font-size: .82rem; line-height: 1.7; }
  .practice-file-label .mini-label { color: var(--forest); margin: 0; }
  .practice-file-label + .keep-downloads { margin-top: 17px; }
  .download-receipt:not(:empty) { padding: 16px 18px; margin: 22px 0 0; border: 1px solid #c1ccae; border-left: 3px solid #7b9856; border-radius: 4px; background: #edf2dc; color: #3e5834; }
  .keep-instructions { margin-top: 31px; padding: 26px; border: 1px solid #ced6ba; border-radius: 5px; background: #f0f2e4; }
  .keep-instructions p { font-size: .87rem; line-height: 1.75; }
  .question-swap { border-color: #b2bda0; border-radius: 6px; background: #f2f3e6; }
  .question-swap p { font-size: .9rem; }
  .question-swap .small { font-size: .82rem; }
  .return-page { padding-block: 54px 88px; }
  .return-masthead { margin-bottom: 25px; }
  .return-page .practice-sheet { padding-block: 49px; }
  .return-page .practice-title { font-size: clamp(2rem, 4vw, 3.15rem); }
  .return-instructions { padding-left: 24px; }
  .return-instructions li { font-size: .95rem; padding-left: 7px; line-height: 1.8; margin-bottom: 17px; }
  .return-prompt, .return-source-note { border: 1px solid #cbd4bb; border-radius: 5px; }

  /* Quiet mode changes movement only. Static rotations and progress survive. */
  html[data-motion="quiet"] {
    --hover-lift: 0px;
    --press-drop: 0px;
    --card-lift: 0px;
    --fan-turn: 0deg;
    --fan-shift: 0px;
    --fan-rise: 0px;
    --spark-turn: 0deg;
    --arrow-nudge: 0px;
    scroll-behavior: auto;
  }
  html[data-motion="quiet"] *, html[data-motion="quiet"] *::before, html[data-motion="quiet"] *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media screen and (max-width: 1100px) {
  :root { --page-gutter: 38px; }
  .header-tools { gap: 17px; }
  .hero { padding-block: 58px 65px; }
  .profile-gallery { gap: 15px; }
  .profile-preview h3 { font-size: 1.4rem; }
  .profile-preview p { font-size: .8rem; }
  .result-hero { gap: 60px; }
  .question-sheet { padding: 32px; }
  .snapshot-section { gap: 45px; }
}

@media screen and (max-width: 847px) {
  .header-edition { display: none; }
  .site-header { padding-block: 18px; min-height: 88px; }
  .header-tools { gap: 14px; }
  .how-section { gap: 35px; }
  .how-steps li { gap: 16px; }
  .how-steps p { font-size: .87rem; }
  .result-hero { gap: 35px; }
  .practice-section-heading { grid-template-columns: 1fr; gap: 17px; }
  .practice-section-heading > p { max-width: 620px; }
  .practice-progress { padding-inline: 31px; }
  .practice-sheet { padding: 35px 31px 32px; }
  .practice-choice { padding-inline: 23px; }
  .snapshot-section { gap: 28px; }
}

@media screen and (max-width: 800px) {
  .hero { padding-block: 48px 51px; }
  .hero-lead { font-size: 1rem; }
  .hero-reassurance { flex-wrap: wrap; gap: 8px 16px; font-size: .73rem; }
  .how-section { padding-block: 65px; }
  .step-index { width: 33px; height: 33px; font-size: .89rem; }
  .profile-gallery { gap: 24px; }
  .profile-preview h3 { font-size: 1.75rem; }
  .profile-preview p { font-size: .9rem; }
  .profile-preview:nth-child(even) { --preview-rest: 12px; }
  .snapshot-section { padding-block: 58px; }
  .result-summary { font-size: .94rem; }
  .result-nav { gap: 25px; }
  .practice-section { padding-block: 51px 62px; }
  .plan-section { gap: 28px; }
}

@media screen and (max-width: 600px) {
  :root { --page-gutter: 23px; }
  .site-header { padding: 16px 23px; gap: 10px; flex-wrap: wrap; min-height: 84px; }
  .brand { font-size: 1.72rem; flex-shrink: 0; }
  .header-tools { gap: 9px; margin-left: auto; flex-shrink: 0; }
  .header-link { font-size: .75rem; gap: 6px; }
  .motion-toggle { font-size: .71rem; padding: 10px; gap: 7px; }
  .hero { padding-top: 39px; padding-bottom: 26px; }
  .hero-copy .pill { font-size: .62rem; padding: 8px 12px; margin-bottom: 24px; }
  .hero h1 { margin-bottom: 24px; }
  .hero-lead { font-size: 1rem; line-height: 1.75; max-width: 345px; margin-bottom: 28px; }
  .hero .primary { min-height: 57px; font-size: .96rem; }
  .hero-reassurance { flex-wrap: nowrap; font-size: .74rem; gap: 18px; margin-top: 22px; }
  .hero-art { margin-top: 23px; }
  .promise-strip { padding: 17px 18px; }
  .promise-strip p { flex-wrap: wrap; white-space: normal; gap: 7px 11px; font-size: .6rem; letter-spacing: .08em; text-align: center; line-height: 1.8; }
  .how-section { gap: 32px; padding-block: 55px 59px; }
  .section-heading .eyebrow, .section-topline .eyebrow, .science-section .eyebrow { font-size: .65rem; line-height: 1.8; }
  .section-heading > p:not(.eyebrow):not(.boundary-note) { font-size: .95rem; line-height: 1.75; }
  .how-steps li { padding-block: 22px; gap: 16px; }
  .how-steps h3 { font-size: 1.04rem; }
  .how-steps p { font-size: .9rem; }
  .how-steps .icon { width: 20px; height: 20px; }
  .guide-peek { max-width: none; margin-top: 24px; }
  .guide-peek > summary { font-size: .85rem; }
  .selves-section { padding-block: 55px 60px; }
  .section-topline { margin-bottom: 32px; }
  .section-topline > p { font-size: .9rem; line-height: 1.75; }
  .profile-gallery { gap: 14px; }
  .profile-preview { padding: 13px; }
  .profile-preview:nth-child(even) { --preview-rest: 10px; }
  .profile-preview h3 { font-size: 1.29rem; }
  .profile-preview p { font-size: .8rem; line-height: 1.65; min-height: 0; }
  .profile-preview .card-meta { font-size: .47rem; letter-spacing: .06em; }
  .profile-preview .card-foot { font-size: .45rem; line-height: 1.6; }
  .gallery-cta { margin-top: 42px; }
  .gallery-cta .secondary { min-height: 54px; font-size: .91rem; }
  .science-section { padding-block: 58px; }
  .science-section > div:nth-child(2) > p:not(.eyebrow) { font-size: .94rem; line-height: 1.8; }
  .science-section .text-link { font-size: .9rem; }
  .science-note > p { font-size: .88rem; }
  .site-footer { padding: 26px 23px; }
  .site-footer > p { font-size: .76rem; }
  .site-footer nav { font-size: .76rem; gap: 6px 20px; }

  .quiz-page { padding: 17px 18px 38px; }
  .quiz-heading .text-button { font-size: .83rem; min-height: 44px; }
  .quiz-progress-copy { gap: 12px; margin-top: 13px; }
  .quiz-section-label { font-size: .62rem; letter-spacing: .09em; }
  .question-countdown { font-size: .74rem; }
  .question-journey { gap: 7px; margin-bottom: 24px; }
  .journey-step { min-height: 44px; padding: 3px; font-size: .69rem; }
  .journey-step > span { width: 28px; height: 28px; }
  .question-sheet { padding: 25px 20px 23px; border-radius: 6px; }
  .sheet-topline { margin-bottom: 20px; }
  .sheet-topline .eyebrow { font-size: .64rem; }
  #question-form legend { font-size: 1.77rem; line-height: 1.38; }
  .question-hint { font-size: .86rem; line-height: 1.7; margin-bottom: 23px; }
  .answer-list { gap: 10px; }
  .answer { padding: 14px 12px; min-height: 65px; gap: 11px; }
  .answer-number { width: 27px; height: 27px; font-size: .73rem; }
  .answer-text { font-size: .9rem; line-height: 1.6; }
  .answer-check, .answer:has(input:checked) .answer-check { flex-basis: 19px; width: 19px; }
  .quiz-actions { margin-top: 25px; gap: 11px; flex-wrap: wrap; }
  .quiz-actions .primary { min-height: 53px; font-size: .86rem; padding: 14px; gap: 10px; }
  .quiz-actions .back-button { font-size: .8rem; }
  .period-note { font-size: .73rem; line-height: 1.75; margin-top: 24px; padding-top: 18px; }
  .period-note .icon { width: 15px; height: 15px; }
  .quiz-privacy { font-size: .74rem; line-height: 1.7; margin-top: 27px; padding-inline: 4px; }

  .result-hero { padding-top: 39px; padding-bottom: 48px; gap: 36px; }
  .result-name-prefix { display: flex; align-items: center; justify-content: space-between; }
  .result-mini-character { display: block; flex: none; width: 1.2em; height: 1.1em; object-fit: contain; mix-blend-mode: multiply; pointer-events: none; }
  .result-tagline { font-size: 1.27rem; line-height: 1.65; }
  .result-summary { font-size: .96rem; line-height: 1.8; }
  .result-quiet { font-size: .78rem; }
  .result-card-wrap { margin-top: 6px; }
  .card-download .text-link { font-size: .83rem; }
  .result-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-block: 12px; }
  .result-nav a { min-height: 53px; font-size: .77rem; gap: 6px; line-height: 1.45; }
  .result-nav a span { width: 22px; height: 22px; flex: none; font-size: .59rem; }
  .result-invitation { padding: 14px 16px; font-size: .85rem; }
  .snapshot-section { padding-block: 52px; gap: 26px; }
  .habit-panel { padding: 18px 20px; }
  .habit-panel > summary { font-size: .91rem; }
  .habit-label h3 { font-size: .9rem; }
  .habit-measure > p, .method-detail { font-size: .82rem; }
  .insight-pair { gap: 22px; }
  .insight-pair .mini-label { font-size: .64rem; line-height: 1.6; }
  .insight-pair p { font-size: .87rem; }
  .boundary-note { font-size: .81rem; }
  .result-extra > summary { min-height: 74px; padding-block: 19px; font-size: 1.2rem; }
  .result-extra > .next-section { padding-block: 33px 41px; }
  .result-extra > .plan-section { padding-block: 32px 40px; }
  .next-section .exercise-steps p, .tailored-tips article > div > p:last-child { font-size: .9rem; }
  #plan-form { padding: 23px 20px; }
  .field-label { font-size: .86rem; }
  .plan-fields { gap: 20px; }
  .plan-note p { font-size: .82rem; }
  #plan-form .small, .plan-ready > .small { font-size: .78rem; }
  .plan-ready { padding: 24px 20px; }
  .plan-ready-heading .eyebrow { font-size: .62rem; }
  .session-meta { font-size: .72rem; }
  .session-list h4 { font-size: .96rem; }
  .session-list p { font-size: .86rem; }
  .keep-section { padding-block: 42px; }
  .keep-copy > p:not(.eyebrow):not(.small) { font-size: .94rem; }
  .keep-copy > .small, .newsletter-block .small { font-size: .79rem; }
  .newsletter-block { padding: 27px 23px; }
  .newsletter-block > div > p:not(.eyebrow):not(.small), .email-delivery p { font-size: .91rem; }
  .newsletter-block .secondary { min-height: 54px; font-size: .9rem; }
  .check-label { font-size: .84rem; }
  .result-footer > p { font-size: .77rem; line-height: 1.8; }
  .result-footer .text-button { font-size: .78rem; }

  .practice-section { padding-block: 43px 56px; }
  .practice-section-heading { margin-bottom: 27px; }
  .practice-section-heading > p { font-size: .95rem; line-height: 1.8; }
  .practice-progress { padding: 16px 20px; gap: 25px; }
  .practice-progress li { font-size: .79rem; gap: 9px; }
  .practice-progress li > span { width: 28px; height: 28px; font-size: .62rem; }
  .practice-sheet { padding: 29px 21px 27px; }
  .practice-title { font-size: 1.9rem; line-height: 1.35; }
  .practice-sheet .eyebrow { font-size: .64rem; letter-spacing: .1em; line-height: 1.75; }
  .practice-intro { font-size: .95rem; line-height: 1.8; }
  .practice-choices { gap: 15px; margin-top: 23px; }
  .practice-choice { min-height: 129px; padding: 21px 21px 22px 70px; }
  .choice-symbol { position: absolute; width: 35px; height: 35px; left: 17px; top: 21px; margin: 0; }
  .practice-choice strong { font-size: 1.01rem; padding-right: 20px; }
  .practice-choice > span:not(.choice-symbol):not(.choice-arrow) { font-size: .87rem; max-width: none; }
  .choice-arrow { top: 21px; right: 17px; font-size: 1.25rem; }
  .practice-sheet .field-label { font-size: .85rem; }
  .practice-sheet .field-hint { font-size: .8rem; }
  .practice-sheet .small { font-size: .8rem; }
  .practice-sheet .field-error { font-size: .81rem; }
  .mission-picker summary, .practice-scratchpad summary { font-size: .84rem; }
  .practice-actions { gap: 15px; margin-top: 28px; }
  .practice-actions .primary, .practice-actions .secondary { font-size: .88rem; min-height: 54px; }
  .practice-actions > .text-button, .practice-bottom-actions .text-button { font-size: .8rem; }
  .example-passage { padding: 21px; }
  .example-passage > p { font-size: 1.1rem; line-height: 1.85; }
  .example-passage .mini-label, .question-to-keep .mini-label { font-size: .61rem; }
  .question-to-keep { padding: 21px; margin-block: 24px; }
  .question-to-keep > p { font-size: 1.34rem; }
  .reference-answer { padding: 21px; }
  .reference-answer > p:not(.mini-label) { font-size: .94rem; }
  .reference-answer > a { font-size: .8rem; }
  .verification-choices label { padding: 15px; font-size: .89rem; }
  .verification-choices label small { font-size: .79rem; }
  .practice-receipts > span { padding: 8px 11px; font-size: .74rem; }
  .practice-return-fields { gap: 0; }
  .keep-instructions { padding: 22px; margin-top: 27px; }
  .keep-instructions p { font-size: .83rem; }
  .question-swap { padding: 25px 22px; }
  .question-swap p { font-size: .88rem; }
  .return-page { padding-top: 34px; padding-bottom: 60px; }
  .return-page .practice-sheet { padding-block: 31px; }
  .return-page .practice-title { font-size: 2rem; line-height: 1.35; }
  .return-instructions { padding-left: 19px; }
  .return-instructions li { font-size: .92rem; }
}

@media screen and (max-width: 440px) {
  .question-journey { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
  .quiz-progress-copy { align-items: flex-start; }
  .question-countdown { text-align: right; max-width: 120px; }
  .header-tools { gap: 8px; }
  .motion-toggle { padding-inline: 9px; }
  .result-nav a { flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; font-size: .76rem; }
  .insight-pair { grid-template-columns: 1fr; gap: 23px; }
  .practice-progress { justify-content: space-between; gap: 10px; }
  .practice-progress li { gap: 7px; }
  .practice-actions .primary { flex-basis: 100%; }
  .keep-downloads .secondary { width: 100%; }
}

@media screen and (max-width: 360px) {
  .header-tools .header-link { display: none; }
}

@media screen and (max-width: 355px) {
  .hero h1 { font-size: 2.9rem; }
  .hero-reassurance { font-size: .69rem; gap: 14px; }
  .profile-preview { padding: 11px; }
  .profile-preview h3 { font-size: 1.13rem; }
  .profile-preview p { font-size: .78rem; }
  .profile-preview .card-meta { font-size: .43rem; gap: 7px; }
  .profile-preview .card-foot { font-size: .43rem; gap: 5px; }
  .quiz-page { padding-inline: 12px; }
  .question-sheet { padding: 23px 16px 21px; }
  #question-form legend { font-size: 1.66rem; }
  .answer { padding-inline: 10px; gap: 9px; }
  .answer-text { font-size: .86rem; }
  .quiz-actions .primary { width: 100%; }
  .practice-sheet { padding-inline: 18px; }
  .practice-progress { padding-inline: 18px; }
  .practice-progress li { font-size: .74rem; }
  .practice-progress li > span { width: 25px; height: 25px; }
  .practice-title { font-size: 1.76rem; }
  .practice-choice { padding-left: 62px; padding-right: 15px; }
  .choice-symbol { left: 14px; width: 33px; height: 33px; }
  .question-to-keep, .reference-answer, .example-passage { padding-inline: 18px; }
}

@media screen and (hover: none) {
  :root { --hover-lift: 0px; --card-lift: 0px; --fan-turn: 0deg; --fan-shift: 0px; --fan-rise: 0px; --spark-turn: 0deg; --arrow-nudge: 0px; }
}

@media screen and (prefers-reduced-motion: reduce) {
  :root { --hover-lift: 0px; --press-drop: 0px; --card-lift: 0px; --fan-turn: 0deg; --fan-shift: 0px; --fan-rise: 0px; --spark-turn: 0deg; --arrow-nudge: 0px; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .result-name-prefix { display: block; }
  .result-mini-character, .result-extra > summary { display: none !important; }
}