:root{font-family:Georgia,'Times New Roman',serif;color:#f3e9d5;background:#0d2323;color-scheme:dark}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% 2%,#31534b 0,#173633 42%,#0d2323 100%)}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}a{color:inherit}.page{width:min(100% - 32px,1080px);margin:auto}.site-nav{display:flex;align-items:center;gap:25px;min-height:76px;border-bottom:1px solid #c9aa7755;font:14px Arial,sans-serif}.site-nav a{text-decoration:none;color:#d5d3c8}.site-nav a:hover,.site-nav a:focus-visible{color:#fff}.site-nav .brand{margin-right:auto;color:#f1ce91;font:700 19px Georgia,serif}.site-nav [aria-current]{color:#f1ce91}.hero{text-align:center;padding:68px 8px 44px}.eyebrow{font:700 12px Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#d9bb83}.hero h1{margin:16px 0 20px;font-size:clamp(43px,7vw,78px);font-weight:400;line-height:1.08}.hero h1 em{font-weight:400;color:#e9c78e}.intro{max-width:690px;margin:0 auto 28px;font-size:clamp(17px,2vw,20px);line-height:1.65;color:#d2ded4}.topic-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:min(100%,680px);min-inline-size:0;margin:0 auto;padding:0;border:0;text-align:left}.topic-picker legend{width:100%;margin:0 0 10px;text-align:center;font:700 14px Arial,sans-serif;color:#e6d6b6}.topic-picker label{position:relative;cursor:pointer}.topic-picker input{position:absolute;opacity:0}.topic-picker span{display:block;height:100%;padding:16px;border:1px solid #8da69477;border-radius:14px;background:#1d3b37;font-family:Arial,sans-serif}.topic-picker b{display:block;color:#eac68b;font:30px Georgia,serif}.topic-picker strong{display:block;margin:4px 0}.topic-picker small{display:block;color:#b9c9c0;line-height:1.4}.topic-picker input:checked+span{border-color:#f1c47e;background:#2d5248;box-shadow:0 0 0 1px #f1c47e55}.topic-picker input:focus-visible+span{outline:2px solid #fff;outline-offset:3px}.hero-actions{display:grid;justify-items:center;gap:12px;margin:28px auto 0}.primary{border:1px solid #f5d6a4;border-radius:100px;padding:16px 32px;background:#eac58b;color:#16332e;font:700 16px Arial,sans-serif;box-shadow:0 10px 32px #0004;transition:transform .18s,background .18s}.primary:hover:not(:disabled){transform:translateY(-2px);background:#f7d9a8}.hero-actions .primary{min-width:min(100%,300px);font-size:18px}.timer,.subnote{font:14px/1.5 Arial,sans-serif;color:#c2d2c7}.subnote{margin:15px 0 0}.notice{max-width:780px;margin:0 auto 20px;padding:15px 18px;border:1px solid #f0b8a8;border-radius:12px;background:#512c2e;color:#fff;font:15px/1.5 Arial,sans-serif}.notice.success{border-color:#a4d6af;background:#245044}.oracle{position:relative;min-height:310px;padding:30px clamp(16px,4vw,50px) 46px;border:1px solid #dfc08a7a;border-radius:28px;background:radial-gradient(circle at 50% 0,#2e5449,#15332f 65%,#112b2a);box-shadow:0 30px 80px #0005;text-align:center}.oracle:before{content:'';pointer-events:none;position:absolute;inset:12px;border:1px solid #e5ca9d3b;border-radius:19px}.oracle-top{position:relative}.seal{display:inline-grid;place-items:center;width:55px;height:55px;border:1px solid #e2bf86;border-radius:50%;color:#f3d5a6;font-size:32px}.oracle-top p{margin:18px 0 26px;color:#e3d7bf;font-size:21px}.casting{position:relative}.coins{display:flex;justify-content:center;gap:15px;margin:12px auto 22px}.coins span{display:grid;place-items:center;width:74px;height:74px;border:3px solid #e9c98f;border-radius:50%;background:radial-gradient(circle at 33% 25%,#f5dcad,#b08045);box-shadow:0 8px 18px #0006,inset 0 0 0 3px #876032;color:#714d24;font-size:32px}.coins.tossing span{animation:toss .55s ease-in-out}.coins.tossing span:nth-child(2){animation-delay:.06s}.coins.tossing span:nth-child(3){animation-delay:.12s}@keyframes toss{50%{transform:translateY(-32px) rotateY(180deg)}}.cast-progress{font:15px Arial,sans-serif;color:#d5d4c6}.hexagrams{display:grid;grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr);align-items:center;gap:12px}.hexagram-panel{min-width:0;padding:22px 18px;border:1px solid #c6b38b66;border-radius:18px;background:#102d2aba}.panel-label{font:700 12px Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#d8ba87}.hexagram-lines{display:grid;gap:8px;width:158px;max-width:100%;margin:20px auto 18px}.line{display:flex;align-items:center;gap:12px;height:14px}.line .part{display:block;height:10px;border-radius:3px;background:#e8cb97;flex:1}.line.moving .part{background:#f5e5b7;box-shadow:0 0 12px #f1d184aa}.line .mark{position:absolute;transform:translateX(173px);color:#f7d9a8;font:700 17px Arial,sans-serif}.hexagram-panel h2{font-size:clamp(21px,3vw,31px);font-weight:400;color:#f4d7a4;margin:10px 0}.hexagram-panel p{font:15px/1.6 Arial,sans-serif;color:#d2dfd4;max-width:330px;margin:0 auto}.change-arrow{font-size:31px;color:#edcb92}.moving-note{font:14px/1.6 Arial,sans-serif;color:#c8d8cd}.paid-teaser{margin:34px auto 0;max-width:670px;padding:24px;border-top:1px solid #b6ae8c66}.paid-teaser h2{font-size:clamp(23px,4vw,34px);font-weight:400;margin:12px 0}.paid-teaser p{font:16px/1.6 Arial,sans-serif;color:#d0dfd2}.paid-teaser small{display:block;margin-top:12px;color:#b9cdbf;font:13px Arial,sans-serif}.reading{max-width:790px;margin:32px auto 0;padding:25px 30px;text-align:left;border:1px solid #cfaf7a;border-radius:18px;background:#0d2926;font:16px/1.75 Arial,sans-serif}.reading h2,.reading h3{font-family:Georgia,serif;font-weight:400;color:#f0ce94}.reading h2{font-size:29px}.reading h3{font-size:23px}.reading strong{color:#f3d59d}.reading-caveat{font-size:13px;color:#b7c7b9}.history,.guide{max-width:820px;margin:55px auto 0}.history h2,.guide h2{font-size:30px;font-weight:400;color:#f0ce94}.history button{padding:12px 16px;margin:5px;border:1px solid #b99a68;border-radius:10px;background:#1d3b37;color:#f1d5a7}.guide{padding:30px;border:1px solid #c2aa7c66;border-radius:20px;background:#1b3934}.guide p,.guide li{font:16px/1.75 Arial,sans-serif;color:#d1ded2}.guide ol{padding-left:24px}footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:55px;padding:23px 0;border-top:1px solid #a8b49a55;font:13px Arial,sans-serif;color:#aabfb3}dialog{width:min(92vw,460px);padding:30px;border:1px solid #dbb880;border-radius:20px;background:#173b35;color:#f4ebd9;box-shadow:0 25px 100px #000b}dialog::backdrop{background:#06130edb}dialog form{display:grid;gap:15px}dialog h2{font-weight:400;margin:0}dialog p,dialog small{font:14px/1.5 Arial,sans-serif}dialog label{font:14px Arial,sans-serif}dialog input{padding:13px;border:1px solid #a3b7a9;border-radius:9px;background:#0d2723;color:#fff}.close{position:absolute;right:16px;top:8px;border:0;background:none;color:#fff;font-size:30px}@media(max-width:650px){.site-nav{flex-wrap:wrap;gap:10px 15px;padding:14px 0}.site-nav .brand{width:100%}.hero{padding-top:42px}.topic-picker{grid-template-columns:1fr}.topic-picker span{display:grid;grid-template-columns:35px 1fr;gap:2px 8px;padding:10px 14px}.topic-picker b{grid-row:span 2}.topic-picker small{margin:0}.oracle{padding:23px 16px}.hexagrams{grid-template-columns:1fr}.change-arrow{transform:rotate(90deg)}.coins span{width:64px;height:64px}.guide{padding:22px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.line{position:relative}.line .mark{left:100%;margin-left:8px;transform:none}
.secondary{border:1px solid #eac58b;border-radius:100px;padding:13px 24px;background:#244a40;color:#f5ddb0;font:700 15px Arial,sans-serif;box-shadow:0 8px 25px #0003}.secondary:hover:not(:disabled){background:#326052}.hero-actions .timer{margin:0}.hero-actions .secondary{min-width:min(100%,300px)}
.guide h3{margin:25px 0 8px;color:#eacb96;font-size:22px;font-weight:400}