:root{color-scheme:light;--green:#083e35;--cream:#fff8e9;--ink:#183d34;--gold:#e5b65d}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:Georgia,'Times New Roman',serif}header{background:var(--green);color:var(--cream);padding:19px 22px;display:flex;justify-content:space-between;gap:20px;align-items:center}.brand{font-size:14px;letter-spacing:2px;line-height:1.5}.brand b{font-size:17px;letter-spacing:1px}.edition{font-family:Arial,sans-serif;font-size:12px;line-height:1.6;text-align:right;letter-spacing:1px;color:#edcf94}main{max-width:850px;margin:auto;padding:0 20px 25px}.intro{text-align:center;padding:25px 0 0}.eyebrow{font-family:Arial,sans-serif;font-size:12px;letter-spacing:2px;font-weight:700;color:#746026;margin:0 0 10px}h1{font-size:clamp(30px,6vw,44px);line-height:1.1;font-weight:normal;margin:0 0 12px}.intro>p:last-child{font-size:17px;line-height:1.5;margin:0}.table-scene{position:relative;margin:14px auto 0;max-width:520px}.willow{width:100%;display:block}.choices{position:absolute;display:flex;justify-content:center;gap:4px;bottom:24%;left:13%;right:13%}.pick{width:18%;aspect-ratio:0.62;padding:0;border:2px solid #e4be6c;border-radius:7px;background:#10264a url('assets/back.webp') center/cover;box-shadow:0 6px 12px #0006;cursor:pointer;transition:transform .2s,box-shadow .2s;transform:rotate(var(--tilt))}.pick:hover,.pick:focus-visible{transform:translateY(-14px) rotate(var(--tilt));box-shadow:0 0 0 3px var(--cream),0 7px 15px #0007}.pick:disabled{cursor:wait;opacity:.8}#load-status{text-align:center;font-family:Arial,sans-serif;font-size:14px;min-height:20px;margin:0 0 10px}button{font-family:Arial,sans-serif;font-size:16px;min-height:48px;touch-action:manipulation}.secondary,.primary{display:block;padding:13px 26px;border:1px solid var(--green);border-radius:28px;margin:0 auto;background:transparent;color:var(--green);cursor:pointer}.primary{background:var(--green);color:var(--cream);margin-top:25px}.secondary:disabled{opacity:.4}.text-button{background:none;border:0;border-bottom:1px solid #9baa98;padding:8px 0;cursor:pointer;color:var(--green);margin:12px 0 22px;font-size:14px}#reading>.eyebrow,#reading>h1{text-align:center}.reveal{position:relative;display:flex;align-items:end;justify-content:center;gap:18px;padding:14px 0 25px;max-width:600px;margin:auto}#card-image{width:50%;max-width:280px;border-radius:11px;box-shadow:0 12px 24px #173d3425;transition:opacity .3s}#card-image.reversed{transform:rotate(180deg)}.guide{width:38%;max-width:240px;max-height:380px;object-fit:contain}.meaning{max-width:600px;margin:auto;border-top:1px solid #cbbd9f;padding:22px 0 0}.meaning h2{font-size:24px;font-weight:normal;margin:0 0 12px}.meaning>p:not(.eyebrow){font-size:18px;line-height:1.7;white-space:pre-line;margin-top:0}#affirmation-wrap{margin-top:27px}#affirmation{font-size:21px;line-height:1.5;font-style:italic;margin:0}footer{text-align:center;background:var(--green);padding:22px 15px;color:#eddfbf;font-family:Arial,sans-serif;font-size:12px;line-height:1.8}button:focus-visible{outline:3px solid #bf8526;outline-offset:5px}[hidden]{display:none!important}@media(min-width:700px){header{padding:22px max(25px,calc((100vw - 900px)/2))}.intro{padding-top:35px}.table-scene{max-width:520px}#reading{padding-top:10px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Celestial backdrop from Roxy's website */
:root{color-scheme:dark;--green:#c59dea;--cream:#fff4e2;--ink:#fff4e2;--gold:#eed49e}
body{background:#080a19 url('assets/website-stars.jpg') center top/cover fixed;color:var(--ink)}
header{background:rgba(11,9,28,.78);border-bottom:1px solid #b38bc440}
.brand{color:#f3d8fc}.edition{color:#efd8b1}
.eyebrow{color:#efd39e}
.secondary{color:#fff4e2;border-color:#cda9e4;background:#181125c9}
.primary{background:#56326f;color:#fff8ee;border-color:#cda9e4}
.text-button{color:#f4d5fd;border-color:#cda9e4}
.meaning{border-top-color:#c9a2d477;background:rgba(9,10,25,.88);padding:24px 22px 26px;border-radius:0 0 18px 18px}
#card-image{box-shadow:0 12px 35px #0009}
.guide{filter:drop-shadow(0 8px 12px #0005)}
footer{background:rgba(9,9,25,.82);border-top:1px solid #b38bc440;color:#e1cfe5}
button:focus-visible{outline-color:#f6d590}
@media(max-width:600px){body{background-attachment:scroll;background-size:auto 2100px}.meaning{padding:22px 16px}}

/* Cloud and curtain header with a white reading surface */
header{min-height:120px;display:flex;flex-direction:column;justify-content:center;gap:6px;text-align:center;padding:18px 20%;background:#fff2d6 url('assets/curtain-clouds.png') center/100% auto no-repeat;border-bottom:1px solid #d7ba85}
.brand{font-family:Arial,sans-serif;color:#5274f0;font-size:23px;font-weight:700;line-height:1.25;letter-spacing:1px}
.brand b{font-size:23px;font-weight:700;letter-spacing:1px}
.edition{color:#293f9d;text-align:center;font-size:12px;line-height:1.35;letter-spacing:1.3px}
.edition br{display:none}
.meaning{color:#18244b;background:#fff;border-top:3px solid #5274f0;border-radius:14px;padding:25px 24px}
.meaning .eyebrow{color:#334bb2}
.meaning h2{color:#334bb2}
@media(min-width:700px){header{padding:20px 20%;min-height:140px}.brand,.brand b{font-size:27px}}
@media(max-width:400px){header{padding:16px 17%}.brand,.brand b{font-size:20px}.edition{font-size:11px}.meaning{padding:22px 18px}}

/* Keep the header artwork proportional and one chosen card prominent. */
header{background-size:max(100%,420px) auto}
.edition{word-spacing:.18em}
.pick{position:relative;transform-origin:center bottom;transition:transform .28s,box-shadow .28s,opacity .28s}
.pick.featured,.pick:hover,.pick:focus-visible,.pick.selected{z-index:2;transform:translateY(-20px) scale(1.45) rotate(0deg);box-shadow:0 0 0 2px #fff4e2,0 12px 24px #0008}
.choices:has(.pick:hover) .pick.featured:not(:hover),.choices:has(.pick:focus-visible) .pick.featured:not(:focus-visible){z-index:0;transform:rotate(var(--tilt));box-shadow:0 6px 12px #0006}
.pick.selected:disabled{opacity:1;cursor:wait}
@media(prefers-reduced-motion:reduce){.pick{transition:none}}

.choices:has(.pick.selected) .pick:not(.selected){z-index:0;transform:rotate(var(--tilt));box-shadow:0 6px 12px #0006}