.practice-page { --practice-sage: #8fd29b; --practice-gold: #d4af37; font-weight: 400; letter-spacing: .01em; }
.practice-page h1, .practice-page h2, .practice-page h3, .practice-page h4, .practice-delete-dialog h2 { text-transform: none; letter-spacing: .01em; }
.practice-page h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); line-height: 1.15; }
.practice-page h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.practice-page h3 { font-size: 1.3rem; }
.practice-page p, .practice-page li { color: #bdc8bf; line-height: 1.8; }
.practice-page a:not(.btn) { color: var(--practice-sage); text-decoration: underline; text-underline-offset: .2em; }
.practice-page :is(button, a, summary, textarea):focus-visible, .practice-delete-dialog button:focus-visible { outline: 3px solid #d4af37; outline-offset: 4px; }
.practice-page .btn, .practice-delete-dialog .btn { text-transform: none; letter-spacing: .01em; font-size: .9rem; min-height: 46px; }
.practice-page .btn[disabled] { opacity: .55; cursor: not-allowed; }
.practice-return-today { color: #8fd29b; text-decoration: underline; text-underline-offset: .2em; margin-top: .8rem; min-height: 36px; font-size: .85rem; }
#practice-session-title { scroll-margin-top: 100px; }
.practice-skip { position: fixed; left: 1rem; top: -100px; z-index: 10000; background: #f8f9fa; color: #0b0f0d; padding: 1rem; }
.practice-skip:focus { top: 1rem; }
.practice-intro { padding-top: 120px; padding-bottom: 36px; display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.practice-intro > div { max-width: 760px; }
.practice-intro p { font-size: 1.05rem; max-width: 60ch; margin: 1.2rem 0 0; }
.practice-jump { white-space: nowrap; font-size: .84rem; margin-bottom: .35rem; }
.practice-notice { background: #252719; border-left: 3px solid #d4af37; padding: 1rem 1.25rem; margin: 0 0 1rem; line-height: 1.75; color: #e1dec8; }
.practice-desk { border: 1px solid #39443c; background: #121a16; border-radius: 8px; }
.practice-desk-heading { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.5rem 2rem; border-bottom: 1px solid #39443c; }
.practice-desk-heading p { margin: 0; text-align: right; font-size: .9rem; }
.practice-desk-heading .practice-small { display: block; }
.practice-reading { display: grid; grid-template-columns: minmax(190px, .7fr) minmax(0, 1.4fr); gap: clamp(2rem, 5vw, 4.5rem); padding: 2.5rem; align-items: start; }
.practice-draw { text-align: center; }
.practice-card { width: 190px; min-height: 285px; margin: 0 auto 1.5rem; }
.practice-card > picture, .practice-card > picture img { width: 100%; display: block; aspect-ratio: 2/3; object-fit: cover; border-radius: 10px; }
.practice-card .tarot-card-static { --card-width: 190px; --card-height: 285px; }
.practice-card--reversed .tarot-card-static__picture { transform: rotate(180deg); }
.practice-draw .btn { width: 100%; max-width: 285px; }
.practice-draw p { margin: .8rem auto 0; max-width: 30ch; }
.practice-page .practice-small { font-size: .8rem; line-height: 1.7; color: #aebaae; }
.practice-page .practice-label { color: #8fd29b; font-size: .85rem; margin-bottom: .7rem; }
.practice-question h3 { font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.4; margin-bottom: 1rem; }
.practice-exercise { border-left: 2px solid #617c4f; padding-left: 1.1rem; margin: 1.6rem 0; }
.practice-exercise h4 { color: #e1d6a9; font-size: 1rem; margin-bottom: .5rem; }
.practice-card-reading { border-top: 1px solid #39443c; padding-top: 1.25rem; margin-top: 1.5rem; }
.practice-card-reading h4 { font-size: 1.2rem; margin-bottom: .6rem; }
.practice-card-reading a { display: inline-block; margin: .4rem 0 1rem; }
.practice-writing { border-top: 1px solid #39443c; padding: 2rem; background: #161d18; }
.practice-writing-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .9rem; }
.practice-writing label { display: block; color: #dce5de; margin-bottom: .7rem; line-height: 1.7; font-size: .94rem; }
.practice-writing textarea { width: 100%; resize: vertical; min-height: 190px; max-height: 700px; background: #0b100d; color: #f8f9fa; border: 1px solid #63735f; border-radius: 4px; padding: 1rem; font: inherit; font-size: 1rem; line-height: 1.8; }
.practice-writing textarea::placeholder { color: #829383; }
.practice-writing textarea[disabled] { border-color: #39443c; opacity: .6; }
.practice-writing #practice-note-privacy { max-width: 95ch; margin: .8rem 0 1rem; }
.practice-writing-actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.practice-writing-actions .practice-small { flex: 1; min-width: 180px; }
.practice-workbook { padding: 1.6rem 0; display: flex; gap: 2rem; align-items: center; justify-content: space-between; border-bottom: 1px solid #39443c; }
.practice-workbook h2 { font-size: 1.25rem; margin-bottom: .5rem; }
.practice-workbook p { font-size: .88rem; margin: 0; max-width: 70ch; }
.practice-workbook > a { font-size: .88rem; min-width: 180px; text-align: right; }
.practice-history { padding: 60px 0; scroll-margin-top: 85px; }
.practice-history-heading { display: flex; justify-content: space-between; align-items: start; gap: 2rem; }
.practice-history-heading h2 { margin-bottom: .7rem; }
.practice-history-heading p { font-size: .9rem; }
.practice-export { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: end; }
.practice-export .btn { padding: .6rem .9rem; font-size: .82rem; }
.practice-backups { margin: 1.3rem 0; padding-block: .4rem; border-block: 1px solid #344a38; }
.practice-backups summary { padding: .8rem 0; cursor: pointer; color: #bfd4ad; }
.practice-backups summary:focus-visible { outline: 2px solid #bfd4ad; outline-offset: 4px; }
.practice-backups .practice-export { justify-content: start; margin: 1rem 0; }
.practice-copy-export { display: inline-block; margin: .5rem 0 .5rem 1rem; padding: .4rem; color: #8fd29b; text-decoration: underline; text-underline-offset: .2em; }
.practice-export-text { display: block; width: 100%; min-height: 180px; max-height: 360px; margin-top: 1rem; padding: 1rem; color: #f8f9fa; background: #0b100d; border: 1px solid #63735f; font: inherit; line-height: 1.6; }
.practice-entries { margin-top: 1.5rem; }
.practice-entry { border-top: 1px solid #39443c; }
.practice-entry:last-child { border-bottom: 1px solid #39443c; }
.practice-entry summary { cursor: pointer; padding: 1.2rem .2rem; line-height: 1.6; color: #dce5de; font-size: .94rem; }
.practice-entry-date { color: #f8f9fa; margin-right: 1rem; }
.practice-entry-body { padding: .3rem 1.2rem 1.5rem; }
.practice-entry-body .practice-entry-note { white-space: pre-wrap; overflow-wrap: anywhere; background: #131b15; padding: 1.25rem; border-left: 2px solid #617c4f; color: #e1e8e2; }
.practice-entry-body .practice-entry-question { font-size: .92rem; }
.practice-entry-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .65rem 1rem; margin-top: 1rem; font-size: .85rem; }
.practice-entry-actions button { padding: .6rem; color: #e4b0a7; text-decoration: underline; text-underline-offset: .2em; }
.practice-entry-actions .practice-edit-entry { color: #8fd29b; }
.practice-how { display: grid; grid-template-columns: 1fr .95fr; gap: clamp(2rem, 6vw, 5rem); padding-top: 20px; padding-bottom: 60px; }
.practice-how h2 { margin-bottom: 1.25rem; }
.practice-how ol { list-style: decimal; padding-left: 1.2rem; margin: 1.3rem 0; }
.practice-how li { padding-left: .3rem; margin-bottom: 1rem; font-size: .95rem; }
.practice-how li::marker { color: #d4af37; }
.practice-example { padding: 2rem; background: #121a16; align-self: start; border-left: 2px solid #b1944f; }
.practice-example h3 { margin-bottom: 1rem; }
.practice-example p { font-size: .92rem; }
.practice-privacy { padding-bottom: 65px; max-width: 850px; }
.practice-privacy h2 { margin-bottom: 1.2rem; }
.practice-privacy p { font-size: .92rem; }
.practice-delete-dialog { width: min(560px, calc(100% - 32px)); margin: auto; padding: 2rem; color: #f8f9fa; background: #161d18; border: 1px solid #63735f; border-radius: 8px; }
.practice-delete-dialog::backdrop { background: #000b; }
.practice-delete-dialog h2 { font-size: 1.7rem; margin-bottom: 1rem; }
.practice-delete-dialog div { display: flex; gap: 1rem; margin-top: 1.5rem; }
#practice-delete-confirm { background: #722e27; color: #fff; }
.practice-page [hidden] { display: none !important; }
.practice-dialog { width: min(640px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; margin: auto; padding: 2rem; color: #f8f9fa; background: #161d18; border: 1px solid #63735f; border-radius: 8px; }
.practice-dialog::backdrop { background: #000b; }
.practice-dialog h2 { font-size: clamp(1.4rem, 4vw, 1.85rem); line-height: 1.3; margin-bottom: 1rem; text-transform: none; letter-spacing: .01em; }
.practice-dialog p, .practice-dialog li { color: #bdc8bf; font-size: .94rem; line-height: 1.7; overflow-wrap: anywhere; }
.practice-dialog .btn { min-height: 46px; font-size: .85rem; text-transform: none; letter-spacing: .01em; white-space: normal; }
.practice-dialog .btn[disabled] { opacity: .5; cursor: not-allowed; }
.practice-dialog :is(button, input):focus-visible { outline: 3px solid #d4af37; outline-offset: 4px; }
.practice-dialog-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }
.practice-dialog [hidden] { display: none !important; }
.practice-import-preview { list-style: none; max-height: 180px; overflow: auto; padding: .9rem 1rem; margin: 1rem 0; background: #0b100d; border: 1px solid #39443c; border-radius: 4px; }
.practice-import-preview:empty { display: none; }
.practice-import-preview li + li { margin-top: .7rem; }
.practice-import-choice { display: flex; align-items: start; gap: .75rem; color: #e1e8e2; line-height: 1.6; font-size: .95rem; }
.practice-import-choice input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: .2rem; accent-color: #8fd29b; }
.practice-dialog .practice-dialog-small { font-size: .83rem; }
.practice-import-status { border-left: 2px solid #d4af37; padding-left: 1rem; }
.practice-dialog-small + .practice-import-status { margin-top: 1rem; }
.practice-page ~ .footer a { margin-left: 1rem; }
@media (max-width: 800px) {
  .practice-intro, .practice-history-heading { display: block; }
  .practice-intro { padding-top: 105px; }
  .practice-jump { display: inline-block; margin-top: 1.2rem; }
  .practice-reading { gap: 1.7rem; padding: 1.5rem; grid-template-columns: 160px minmax(0, 1fr); }
  .practice-card, .practice-card .tarot-card-static { width: 145px; min-height: 218px; --card-width: 145px; --card-height: 218px; }
  .practice-export { justify-content: start; margin: 1rem 0; }
  .practice-how { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .practice-page > .container, .practice-how, .practice-privacy { padding-inline: 18px; }
  .practice-intro h1 { font-size: 2.1rem; }
  .practice-desk-heading { display: block; padding: 1.2rem; }
  .practice-desk-heading p { text-align: left; margin-top: .6rem; }
  .practice-reading { display: flex; flex-direction: column; padding: 1.2rem; gap: 1.5rem; }
  .practice-draw { display: grid; grid-template-columns: 105px 1fr; column-gap: 1rem; align-items: center; width: 100%; }
  .practice-card { width: 105px; min-height: 158px; grid-row: span 2; margin: 0; }
  .practice-card .tarot-card-static { --card-width: 105px; --card-height: 158px; width: 105px; min-height: 158px; }
  .practice-draw .btn { align-self: end; padding-inline: .6rem; font-size: .85rem; }
  .practice-draw p { align-self: start; font-size: .73rem !important; }
  .practice-question h3 { font-size: 1.4rem; }
  .practice-writing { padding: 1.2rem; }
  .practice-writing-heading { display: block; }
  .practice-writing-heading .practice-small { display: block; margin-top: .5rem; }
  .practice-writing textarea { min-height: 220px; }
  .practice-writing-actions { display: block; }
  .practice-writing-actions .btn { width: 100%; }
  .practice-writing-actions .practice-small { display: block; margin-top: .8rem; }
  .practice-workbook { display: block; }
  .practice-workbook > a { display: inline-block; margin-top: 1rem; text-align: left; }
  .practice-entry summary span { display: block; }
  .practice-entry-body { padding-inline: .3rem; }
  .practice-entry-actions { align-items: start; }
  .practice-example { padding: 1.3rem; }
  .practice-delete-dialog { padding: 1.5rem; }
  .practice-delete-dialog div { flex-wrap: wrap; }
  .practice-dialog { padding: 1.3rem; }
  .practice-dialog-actions .btn { flex: 1 1 140px; }
}
@media (prefers-reduced-motion: reduce) { .practice-page *, .practice-page *::before, .practice-page *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }