:root{color-scheme:dark;--bg:#101f1b;--gold:#dfbf78;--cream:#f6eedc;--muted:#c4cabc}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 52%,#294237 0%,var(--bg) 70%);color:var(--cream);font-family:Arial,sans-serif;min-height:100svh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #ffe0a1;outline-offset:7px}header{max-width:1400px;margin:auto;padding:30px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dfbf7825}.brand{font-family:Georgia,serif;font-size:24px;color:var(--cream);text-decoration:none}.brand span{display:block;font-family:Arial,sans-serif;font-size:12px;letter-spacing:.24em;margin-top:9px;color:var(--gold)}.edition{font-size:14px;color:var(--muted)}main{max-width:1330px;margin:auto;padding:34px 4% 0}.intro{text-align:center}.eyebrow{font-size:12px;letter-spacing:.2em;color:var(--gold);font-weight:600}h1{font:normal clamp(34px,4.4vw,58px)/1.1 Georgia,serif;margin:15px 0} .intro>p:last-child{font-size:16px;line-height:1.7;color:var(--muted)}.deck{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;margin:24px auto 30px;max-width:1160px;perspective:1400px}.card{position:relative;border:none;padding:0;background:transparent;aspect-ratio:2/3;border-radius:11px;transition:transform .3s}.card:hover{transform:translateY(-6px)}.inner{display:block;height:100%;width:100%;position:relative;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.7,.2,1)}.card.flipped .inner{transform:rotateY(180deg)}.back,.front{position:absolute;inset:0;backface-visibility:hidden;border-radius:11px;overflow:hidden}.back{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;border:1px solid #cba963;background:repeating-linear-gradient(45deg,transparent,transparent 12px,#dfbf7805 12px,#dfbf7805 13px),linear-gradient(135deg,#263f35,#12271f);box-shadow:0 13px 24px #0005;color:var(--gold)}.back:before{content:'';position:absolute;inset:9px;border:1px solid #dfbf7866;border-radius:6px}.back:after{content:'';position:absolute;inset:15px;border:1px solid #dfbf7824;border-radius:3px}.seal{width:64%;aspect-ratio:1;border:1px solid #cba96399;border-radius:50%;display:grid;place-items:center;position:relative}.seal:before{content:'';position:absolute;inset:9%;border:1px solid #cba96355;transform:rotate(45deg)}.seal span{font:italic 54px Georgia,serif}.back-word{font:14px/1.5 Georgia,serif;letter-spacing:.08em;text-align:center}.star{font-size:21px}.front{transform:rotateY(180deg);background:#233d31;display:flex;align-items:center}.front img{width:100%;height:auto}.controls{text-align:center;padding-top:12px}.shuffle,.return{background:transparent;color:var(--cream);border:1px solid #dfbf7880;border-radius:50px;padding:13px 25px;min-height:48px;transition:background .2s}.shuffle:hover,.return:hover{background:#dfbf781c}.controls p{font-size:14px;color:var(--muted);min-height:20px;margin-top:20px}footer{text-align:center;color:#aeb7aa;font:italic 16px Georgia,serif;padding:24px 16px 30px}dialog{padding:0;border:1px solid #cba96388;border-radius:16px;background:#182d25;color:var(--cream);width:min(1000px,92vw);max-height:92svh;overflow:auto;box-shadow:0 30px 100px #000a}dialog::backdrop{background:#07140ee8;backdrop-filter:blur(8px)}.close{position:absolute;right:12px;top:12px;background:#0c1e16d9;border:1px solid #eedbb555;border-radius:50%;color:white;width:42px;height:42px;z-index:2}.reading-grid{display:grid;grid-template-columns:1.12fr 1fr}.art{align-self:center;line-height:0;background:#12221b}.art img{width:100%;height:auto;display:block}.message{padding:55px 38px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.message h2{font:normal clamp(36px,4vw,54px)/1.15 Georgia,serif;margin:12px 0 24px}.rule{width:45px;height:1px;background:var(--gold)}.question{font:normal 27px/1.4 Georgia,serif;color:#f3dcaa;margin:25px 0 12px}.invitation{font-size:16px;line-height:1.7;color:var(--muted);margin-bottom:32px}.shuffling .card{pointer-events:none;transition:none;will-change:transform}.shuffle:disabled{cursor:wait;opacity:.7}@media(max-width:800px){header{padding:22px 6%}.edition{display:none}.deck{grid-template-columns:repeat(3,minmax(0,1fr));max-width:560px;gap:16px;margin:28px auto}.card:nth-child(n){transform:none}.card:hover{transform:translateY(-5px)}main{padding-top:24px}.back{gap:12px}.seal span{font-size:40px}.back-word{font-size:13px}.reading-grid{grid-template-columns:1fr}.art img{max-height:50svh;object-fit:contain}.message{padding:26px}.message h2{font-size:36px;margin:8px 0 18px}.question{font-size:24px;margin:18px 0 8px}.invitation{margin-bottom:22px}.star{font-size:16px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.card-details{font-size:1rem;line-height:1.75;color:var(--cream);width:100%;overflow-wrap:break-word}
.card-details section{margin:1.75rem 0}
.card-details h3{font:normal 1.4rem/1.35 Georgia,serif;color:var(--gold);margin:0 0 .75rem}
.card-details p{margin:.75rem 0}
.card-details .unique-job{color:var(--gold);font-size:.9rem;line-height:1.65}
.card-details .related{font-size:.95rem;color:var(--muted)}
.card-details ul{padding-left:1.25rem;margin:.75rem 0}
.card-details li{padding-left:.2rem;margin:.8rem 0}
.card-details .permission{border-left:2px solid var(--gold);padding-left:1.2rem}
.long-reading .reading-grid{grid-template-columns:.85fr 1.15fr}
.long-reading .message{justify-content:flex-start;min-width:0;padding-top:3rem}
.long-reading .art{align-self:start;position:sticky;top:0}
.long-reading .question{font-style:italic}
.long-reading .return{margin-top:.5rem}
@media(max-width:800px){.long-reading .reading-grid{grid-template-columns:1fr}.long-reading .art{position:static}.long-reading .message{padding-top:1.6rem}}

@media(max-width:480px){.deck{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.back-word{font-size:14px}.controls p{line-height:1.5}}

.back::before,.back::after{display:none}.back img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

.card{touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.card img{-webkit-user-drag:none;pointer-events:none}
.input-help{text-align:center;font-size:.875rem;line-height:1.5;color:var(--muted);margin:8px auto 0}
.deck{scroll-margin-top:1rem}
.controls{position:sticky;top:0;z-index:4;background:#101f1bf5;padding:12px 12px 6px;border-radius:12px;backdrop-filter:blur(8px)}
.controls p{margin:10px 0 4px;line-height:1.5}
@media(pointer:coarse){.input-help{display:none}.card:hover{transform:none}}

/* Keep more of the deck in view while each card stays easy to select. */
header{padding-top:20px;padding-bottom:20px}
main{padding-top:18px}
.intro .eyebrow{margin:0 0 10px}
h1{font-size:clamp(34px,4.4vw,48px);margin:10px 0}
.intro>p:last-child{margin:10px 0 12px}
.controls{padding-top:8px}
.controls p{margin-top:8px}
.input-help{margin-top:6px}
.deck{grid-template-columns:repeat(6,minmax(0,1fr));max-width:1120px;gap:16px;margin:18px auto 28px}
@media(max-width:1024px){.deck{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}}
@media(max-width:800px){.deck{grid-template-columns:repeat(4,minmax(0,1fr));max-width:680px}}
@media(max-width:560px){
  header{padding-top:18px;padding-bottom:18px}
  main{padding-top:16px}
  .deck{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
}
@media(max-width:340px){.deck{grid-template-columns:repeat(2,minmax(0,1fr))}}

.header-actions{display:flex;align-items:center;gap:24px;flex-shrink:0}
.save-deck{border:1px solid #dfbf7866;background:transparent;color:var(--cream);border-radius:24px;padding:10px 16px;min-height:44px;font-size:13px}
.save-deck:hover{background:#dfbf781c}
.install-guide{width:min(600px,92vw);padding:34px;line-height:1.65}
.install-heading{display:flex;gap:18px;align-items:center;padding-right:20px}
.install-heading img{flex-shrink:0;border-radius:12px;border:1px solid #dfbf7866}
.install-heading .eyebrow{font-size:10px;margin:0 0 8px}
.install-heading h2{font:normal 28px/1.2 Georgia,serif;margin:0}
.install-guide>p{color:var(--muted)}
.install-guide details{border-top:1px solid #dfbf7833;padding:4px 0}
.install-guide summary{cursor:pointer;color:var(--gold);padding:12px 2px;font-size:17px;font-family:Georgia,serif}
.install-guide summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.install-guide ol{margin:0 0 16px;padding-left:24px}
.install-guide li{padding-left:3px;margin:10px 0}
.install-guide details p{margin:0 0 16px}
.install-guide .install-note{font-size:14px;margin:22px 0}
.install-guide .install-status{border-left:2px solid var(--gold);padding-left:14px;color:var(--cream)}
.install-guide #install-now{margin:0 0 18px}
@media(max-width:680px){
  header{flex-wrap:wrap;gap:12px}
  .header-actions{width:100%;justify-content:flex-end}
  .save-deck{font-size:12px;padding:8px 14px}
  .install-guide{padding:56px 22px 26px}
  .install-heading{gap:12px}
  .install-heading img{width:48px;height:48px}
  .install-heading h2{font-size:24px}
}