.jr-ritual {--jr-paper: var(--surface,#fffdf8); --jr-ink: var(--ink,#1f2f24); --jr-line: var(--line,#dedbce); --jr-accent: var(--accent,#91632b); background: var(--jr-paper); color: var(--jr-ink); border: 1px solid var(--jr-line); border-radius: 24px; padding: clamp(20px,4vw,48px); font: var(--ds-text-body,14px)/1.7 var(--ds-font-sans,system-ui,sans-serif); max-width: 1040px; margin: auto; box-sizing: border-box; overflow: hidden;}
[data-theme=dark] .jr-ritual {--jr-paper: var(--mds-surface); --jr-ink: var(--mds-ink); --jr-line: var(--mds-line); --jr-accent: var(--mds-gold);}
.jr-ritual * {box-sizing: border-box;}
.jr-ritual [hidden] {display: none;}
.jr-ritual h2 {font: 500 var(--ds-text-h2,32px)/1.2 var(--ds-font-serif,Georgia,serif); max-width: 24ch; margin: 8px 0 16px; text-wrap: balance;}
.jr-ritual h3 {font: 500 var(--ds-text-h2,32px)/1.2 var(--ds-font-serif,Georgia,serif); margin: 0 0 8px; text-wrap: balance;}
.jr-ritual h4 {font-size: var(--ds-text-title,16px); margin: 16px 0 4px;}
.jr-eyebrow {font-size: var(--ds-text-body,14px); font-weight: 700; letter-spacing: .1em; color: var(--jr-accent); margin: 0;}
.jr-intro {max-width: 62ch;}
.jr-moods,.jr-actions {display: flex; flex-wrap: wrap; gap: var(--ds-space-2,8px); margin: 24px 0;}
.jr-button {font: 600 var(--ds-text-cta,14px)/1.5 var(--ds-font-sans,system-ui,sans-serif); min-height: 48px; max-width: 100%; padding: 12px 18px; border: 1px solid var(--jr-line); border-radius: 999px; color: var(--jr-ink); background: transparent; cursor: pointer;}
.jr-button[aria-pressed=true] {border-color: var(--jr-accent); box-shadow: inset 0 0 0 1px var(--jr-accent);}
.jr-primary {color: var(--jr-paper); background: var(--jr-ink); border-color: var(--jr-ink);}
.jr-button:focus-visible,.jr-privacy summary:focus-visible {outline: 3px solid var(--jr-accent); outline-offset: 4px;}
.jr-button:disabled {cursor: default; opacity: .65;}
.jr-stage {text-align: center; padding: 24px 0;}
.jr-fan {display: flex; justify-content: center; align-items: center; min-height: 260px; gap: 12px; transition: transform 600ms ease;}
.jr-fan img {height: 230px; width: min(28%,150px); object-fit: contain; filter: drop-shadow(0 14px 12px #0002);}
.jr-fan img:first-child {transform: rotate(-9deg);}
.jr-fan img:last-child {transform: rotate(9deg);}
.jr-turning {transform: rotate(5deg) scale(.96);}
.jr-promise {font-family: var(--ds-font-serif,Georgia,serif); font-size: var(--ds-text-title,16px); max-width: 36ch; margin: 24px auto 0;}
.jr-status {min-height: 1.7em;}
.jr-result {display: grid; grid-template-columns: minmax(180px,.7fr) minmax(0,1.3fr); gap: clamp(20px,4vw,48px); margin-top: 24px; outline-offset: 8px;}
.jr-cover {display: grid; place-items: center; align-self: start; min-height: 340px; border-radius: 20px; background: radial-gradient(ellipse at 35% 25%,#d7b57a30,transparent 70%); padding: 24px;}
.jr-cover img {max-width: 100%; height: 320px; object-fit: contain; filter: drop-shadow(0 20px 14px #0003);}
.jr-copy {min-width: 0;}
.jr-author {margin: 8px 0 24px;}
.jr-bookmark {padding: 20px 24px; border-left: 3px solid var(--jr-accent); background: color-mix(in srgb,var(--jr-accent) 7%,var(--jr-paper)); border-radius: 0 16px 16px 0;}
.jr-bookmark>p:not(.jr-eyebrow),.jr-bookmark blockquote {font: 400 var(--ds-text-price,24px)/1.5 var(--ds-font-serif,Georgia,serif); margin: 12px 0 0; overflow-wrap: anywhere;}
.jr-caution {border-top: 1px solid var(--jr-line); padding-top: 12px;}
.jr-exercise {margin-top: 20px;}
.jr-consent {display: flex; align-items: center; min-height: 48px; gap: 12px; margin-top: 24px;}
.jr-consent input {width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--jr-accent);}
.jr-privacy {border-top: 1px solid var(--jr-line); margin-top: 16px; padding-top: 8px;}
.jr-privacy summary {display: list-item; min-height: 48px; padding: 12px 0; cursor: pointer;}
.jr-privacy p {max-width: 70ch;}
.jr-ritual p,.jr-ritual h3 {overflow-wrap: anywhere;}
@media (max-width:600px) {.jr-result {grid-template-columns: minmax(0,1fr);}.jr-cover {min-height: 250px; padding: 12px;}.jr-cover img {height: 260px;}.jr-fan {min-height: 200px;}.jr-fan img {height: 170px;}.jr-moods {gap: 8px;}.jr-button {padding: 12px 14px;}.jr-bookmark {padding: 16px 20px;}}
@media (prefers-reduced-motion:reduce) {.jr-fan {transition: none;}.jr-turning {transform: none;}}
.jr-fan {position: relative; width: min(100%,360px); height: 360px; min-height: 0; margin: auto; border-radius: 50%; border: 1px solid var(--jr-line); background: radial-gradient(circle,var(--jr-paper) 20%,color-mix(in srgb,var(--jr-accent) 12%,var(--jr-paper)) 70%); transition: transform 600ms cubic-bezier(.2,.7,.2,1);}
.jr-fan img {position: absolute; left: 50%; top: 50%; width: 94px; height: 130px; margin: -65px 0 0 -47px; object-fit: contain;}
.jr-fan img:first-child {transform: translateY(-94px) rotate(-8deg);}
.jr-fan img:nth-child(2) {transform: translate(86px,54px) rotate(12deg);}
.jr-fan img:last-child {transform: translate(-86px,54px) rotate(-12deg);}
.jr-turning {transform: rotate(360deg) scale(.96);}
.jr-result:not([hidden]) {animation: jr-open 240ms ease-out;}
.jr-bookmark {animation: jr-bookmark 240ms ease-out;}
@keyframes jr-open { 
  from {opacity: 0; transform: translateY(12px);} 
  to {opacity: 1; transform: none;} 
}
@keyframes jr-bookmark { 
  from {opacity: .4; transform: translateX(8px);} 
  to {opacity: 1; transform: none;} 
}
@media (max-width:600px) {.jr-fan {width: 280px; max-width: 100%; height: 280px; min-height: 0;}.jr-fan img {width: 76px; height: 104px; margin: -52px 0 0 -38px;}.jr-fan img:first-child {transform: translateY(-74px) rotate(-8deg);}.jr-fan img:nth-child(2) {transform: translate(66px,40px) rotate(12deg);}.jr-fan img:last-child {transform: translate(-66px,40px) rotate(-12deg);}}
@media (prefers-reduced-motion:reduce) {.jr-fan {transition: none;}.jr-turning {transform: none;}.jr-result:not([hidden]),.jr-bookmark {animation: none;}}
.jr-moods {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); max-width: 840px;}
.jr-moods .jr-button {border-radius: 16px; text-align: left; min-height: 60px; white-space: normal; text-wrap: balance;}
.jr-need-hint {max-width: 66ch; min-height: 3.4em; margin: 0;}
.jr-ritual h2 {max-width: 28ch;}
@media (max-width:600px) {.jr-moods {grid-template-columns: repeat(2,minmax(0,1fr)); margin: 20px 0 12px;}.jr-moods .jr-button {min-height: 72px; padding: 12px;}.jr-need-hint {min-height: 5.1em;}}
@layer ds-contract {.jr-ritual .jr-moods .jr-button {white-space: normal; min-width: 0; min-height: 64px; height: auto; line-height: 1.45; overflow-wrap: normal; word-break: normal;}@media (max-width:600px) {.jr-ritual .jr-moods .jr-button {min-height: 72px;}}}
.jr-cover {position: relative; isolation: isolate;}
.jr-cover:before {content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: radial-gradient(ellipse,color-mix(in srgb,var(--jr-accent) 24%,transparent),transparent 72%); animation: jr-arrival-light 800ms ease-out 1 both;}
@keyframes jr-light { 
  0% {opacity: 0; transform: scale(.65);} 
  55% {opacity: .85; transform: scale(1.1);} 
  100% {opacity: 0; transform: scale(1.25);} 
}
@keyframes jr-arrival-light { 
  0% {opacity: 0; transform: scale(.85);} 
  40% {opacity: .8; transform: scale(1.08);} 
  100% {opacity: .2; transform: scale(1);} 
}
@media (prefers-reduced-motion:reduce), (forced-colors:active) {.jr-glow {display: none;}.jr-unsealing .jr-glow,.jr-cover:before {animation: none;}.jr-cover:before {opacity: 0;}}
.jr-purpose select {width: 100%; min-height: 48px; padding: 12px;}
.jr-purpose-results,.jr-journal {margin-top: 24px;}
.jr-journal>button {margin: 8px 12px 8px 0;}
.jr-ritual .jr-privacy a {display: inline-flex; align-items: center; min-height: 48px;}
.jr-ritual .jr-result {margin-bottom: 24px;}
.jr-chest {position: relative; isolation: isolate; width: min(100%,340px); height: 260px; margin: 12px auto 28px; perspective: 900px; --wood: #704124; --wood-dark: #351e18; --metal: #d8b36c; --edge: #976e35;}
.jr-chest-shadow {position: absolute; left: 5%; right: 5%; bottom: 6px; height: 28px; border-radius: 50%; background: #1a100c35; filter: blur(12px);}
.jr-chest-body {position: absolute; z-index: 3; left: 6%; right: 6%; top: 112px; height: 119px; border: 2px solid var(--edge); border-radius: 5px 5px 22px 22px; background: linear-gradient(90deg,transparent 12%,#dfbb72 12% 15%,#76501e 15% 16%,transparent 16% 84%,#76501e 84% 85%,#dfbb72 85% 88%,transparent 88%),repeating-linear-gradient(0deg,#0000 0 27px,#27130e66 28px 30px),linear-gradient(110deg,#9e6740,var(--wood) 42%,var(--wood-dark)); box-shadow: inset 0 5px 4px #fff2,inset 0 -12px 18px #170a0844,0 16px 22px #0003;}
.jr-chest-body:after {content: ''; position: absolute; inset: 8px; border: 1px solid #e3b56b44; border-radius: 0 0 14px 14px; pointer-events: none;}
.jr-chest-lid {position: absolute; z-index: 5; left: 6%; right: 6%; top: 47px; height: 77px; border: 2px solid var(--edge); border-bottom: 5px solid #e1b86f; border-radius: 66px 66px 7px 7px; background: linear-gradient(90deg,transparent 12%,#e8c780 12% 15%,#8f672c 15% 16%,transparent 16% 84%,#8f672c 84% 85%,#e8c780 85% 88%,transparent 88%),repeating-linear-gradient(0deg,#0000 0 22px,#25120d55 23px 25px),linear-gradient(170deg,#b47c4e,#754124 65%,#41251b); box-shadow: inset 0 6px 12px #ffe2a640,0 4px 5px #170c0a55; transform-origin: 50% 100%; transition: transform 1000ms cubic-bezier(.2,.65,.25,1); backface-visibility: visible;}
.jr-chest-crest {display: grid; place-items: center; position: absolute; left: calc(50% - 23px); top: 17px; width: 46px; height: 46px; border: 1px solid #f2d58d; border-radius: 50%; color: #fff0be; background: linear-gradient(135deg,#b58a48,#644119); font: italic 26px Georgia,serif; box-shadow: 0 2px 5px #0004,inset 0 0 0 4px #56331855;}
.jr-chest-lock {position: absolute; z-index: 4; left: calc(50% - 13px); top: -8px; width: 26px; height: 35px; border: 2px solid #eac982; border-radius: 3px 3px 9px 9px; background: linear-gradient(100deg,#f0d28c,#ac7b35); box-shadow: 0 3px 4px #0005; transition: transform 250ms ease,opacity 250ms ease;}
.jr-chest-lock:after {content: ''; position: absolute; left: 8px; top: 9px; width: 6px; height: 12px; border-radius: 5px 5px 1px 1px; background: #42291b;}
.jr-chest-inscription {position: absolute; top: 49px; left: 17%; right: 17%; font: 600 11px/1.5 var(--ds-font-sans,system-ui,sans-serif); letter-spacing: .14em; color: #f4d7a5; text-shadow: 0 1px 2px #0008;}
.jr-chest-inner {position: absolute; z-index: 2; top: 99px; left: 7%; right: 7%; height: 40px; border: 5px solid #a67c42; border-radius: 50%; background: radial-gradient(ellipse,#ffe7ad,#f8bb55 45%,#3c231b 75%); opacity: 0; transition: opacity 350ms ease;}
.jr-chest .jr-glow {position: absolute; z-index: 4; left: 0; right: 0; top: -22px; height: 230px; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 75%,#fff5cfdd, #ffd17a70 30%,#f4b64720 52%,transparent 70%); filter: blur(9px); transform-origin: 50% 90%;}
.jr-chest.jr-unsealing .jr-chest-lid {transform: rotateX(-115deg);}
.jr-chest.jr-unsealing .jr-chest-lock {transform: translateY(8px); opacity: 0;}
.jr-chest.jr-unsealing .jr-chest-inner {opacity: 1;}
.jr-chest.jr-unsealing .jr-glow {animation: jr-chest-light 1250ms ease-out 1 both;}
@keyframes jr-chest-light { 
  0%,15% {opacity: 0; transform: scale(.6);} 
  55%,80% {opacity: 1; transform: scale(1);} 
  100% {opacity: 0; transform: scale(1.12);} 
}
@media (max-width:600px) {.jr-chest {height: 245px;}.jr-chest-inscription {font-size: 13px; letter-spacing: .08em;}}
@media (prefers-reduced-motion:reduce) {.jr-chest * {transition: none; animation: none;}.jr-chest .jr-glow {display: none;}}
@media (forced-colors:active) {.jr-chest-body,.jr-chest-lid,.jr-chest-lock {border-color: CanvasText; background: Canvas;}.jr-chest-crest,.jr-chest-inscription {color: CanvasText;}.jr-chest .jr-glow {display: none;}}