@import "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap";:root{--bg-0:#08070f;--surface:#ffffff0d;--surface-2:#ffffff14;--border:#ffffff1a;--border-strong:#fff3;--ink:#f4f2ff;--muted:#a8a2c8;--gold:#ecc075;--violet:#b49bff;--accent:var(--gold);--radius:18px;--shadow:0 24px 60px -24px #000000bf;--font-ui:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;--font-display:"Cormorant Garamond", Georgia, "Times New Roman", serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html{-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{font-family:var(--font-ui);color:var(--ink);background:radial-gradient(1100px 720px at 12% -12%, #b49bff33, transparent 58%), radial-gradient(900px 620px at 112% 8%, #ecc07524, transparent 55%), radial-gradient(900px 820px at 50% 130%, #7850d22e, transparent 60%), var(--bg-0);-webkit-tap-highlight-color:transparent;background-attachment:fixed;min-height:100vh;margin:0;line-height:1.6;overflow-x:clip}a{color:var(--violet);text-decoration:none}a:hover{text-decoration:underline}header{text-align:center;padding:48px 20px 12px}h1{font-family:var(--font-display);letter-spacing:.5px;background:linear-gradient(100deg, #fff 8%, var(--gold) 52%, var(--violet) 96%);color:#0000;-webkit-background-clip:text;background-clip:text;margin:0 0 10px;font-size:clamp(36px,6vw,58px);font-weight:600;line-height:1.05}h1 .spark{-webkit-text-fill-color:var(--gold);color:var(--gold);vertical-align:middle;opacity:.85;font-size:.62em}.sub{color:var(--muted);max-width:640px;margin:0 auto;font-size:15px}.toolbar{z-index:5;border:1px solid var(--border);-webkit-backdrop-filter:blur(16px);max-width:1040px;box-shadow:var(--shadow);background:#0e0b1c8c;border-radius:999px;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin:24px auto 10px;padding:12px 16px;display:flex;position:sticky;top:12px}.tabs{border:1px solid var(--border);background:#ffffff0d;border-radius:999px;gap:4px;padding:5px;display:flex}.tab{color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:9px 18px;font-size:14px;font-weight:500;transition:all .18s}.tab:hover{color:var(--ink)}.tab.active{color:#241803;background:linear-gradient(#f1cd84,#dca54e);font-weight:600;box-shadow:0 6px 18px -6px #ecc07599}button,select,input{font:inherit}.btn{border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;padding:10px 18px;transition:all .18s}.btn:hover{border-color:var(--gold);background:var(--surface-2);transform:translateY(-1px)}.btn.big{color:#241803;background:linear-gradient(#f1cd84,#dca54e);border:0;padding:13px 26px;font-size:15px;font-weight:600;box-shadow:0 12px 32px -10px #ecc07599}.btn.big:hover{filter:brightness(1.05);transform:translateY(-2px)}.btn.big:disabled{opacity:.55;cursor:default;filter:none;transform:none}select,input[type=search]{background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:999px;outline:none;padding:10px 16px;transition:all .18s}select:hover,input[type=search]:focus{border-color:var(--border-strong)}input[type=search]{min-width:220px}.count{color:var(--muted);font-size:13px}main{max-width:1180px;margin:0 auto;padding:10px 16px 80px}.spread{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:14px;margin-top:14px;display:grid}.slot{aspect-ratio:.7;cursor:pointer;perspective:1000px;background:0 0;border:0;border-radius:14px;padding:0}.inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.7,.2,1);position:relative}.slot.flipped .inner{transform:rotateY(180deg)}.face{backface-visibility:hidden;box-shadow:var(--shadow);border-radius:14px;position:absolute;inset:0;overflow:hidden}.back{border:1px solid var(--border);background:var(--surface-2);justify-content:center;align-items:center;display:flex}.back img{object-fit:cover;width:100%;height:100%}.front{border:1px solid #ecc07580;transform:rotateY(180deg)}.front img{object-fit:cover;width:100%;height:100%}.slot:hover .inner{transform:translateY(-6px)}.slot.flipped:hover .inner{transform:rotateY(180deg)}.stage-hint{color:var(--muted);text-align:center;max-width:760px;margin:12px auto 0;font-size:13px}.stage{aspect-ratio:670/540;border:1px solid var(--border);width:100%;max-width:780px;box-shadow:inset 0 0 90px #0009, var(--shadow);background:radial-gradient(120% 120% at 50% 18%,#b49bff1f,#0000 55%),#0807118c;border-radius:22px;margin:14px auto 0;position:relative;overflow:hidden}.pile-card{aspect-ratio:.7;cursor:pointer;perspective:600px;background:0 0;border:0;width:6.3%;padding:0;transition:transform .15s;position:absolute}.pile-card:hover{transform:scale(1.9);z-index:950!important}.pile-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s;position:relative}.pile-card.flipped .pile-inner{transform:rotateY(180deg)}.pile-face{backface-visibility:hidden;border-radius:6px;position:absolute;inset:0;overflow:hidden;box-shadow:0 3px 9px #0000008c}.pile-front{border:1px solid #ecc07580;transform:rotateY(180deg)}.pile-face img{object-fit:cover;width:100%;height:100%;display:block}.grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;margin-top:14px;display:grid}.tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);flex-direction:column;transition:all .18s;display:flex;overflow:hidden}.tile:hover{box-shadow:var(--shadow);border-color:#ecc07580;transform:translateY(-3px)}.tile img{background:#0003;width:100%;display:block}.tile .cap{padding:12px 14px}.tile .nm{font-size:15px;font-weight:600}.tile .kw{color:var(--gold);font-size:13px}.tile .badge{color:var(--muted);font-size:11px}.empty{color:var(--muted);text-align:center;padding:60px}.overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;background:#06050e99;justify-content:center;align-items:center;padding:18px;display:flex;position:fixed;inset:0}.modal{-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);border:1px solid var(--border-strong);width:100%;max-width:940px;max-height:92vh;box-shadow:var(--shadow);background:#141026d9;border-radius:24px;overflow:auto}.modal .toprow{padding:16px 18px 0}.modal .row{grid-template-columns:minmax(0,380px) 1fr;gap:0;display:grid}.modal .img{background:#00000040;justify-content:center;align-items:center;padding:22px;display:flex}.modal .img img{max-width:100%;height:auto;box-shadow:var(--shadow);border-radius:14px}.modal .body{padding:22px 28px 28px}.modal .badge{color:var(--muted);border:1px solid var(--border);border-radius:999px;margin-bottom:12px;padding:4px 12px;font-size:12px;display:inline-block}.modal h2{font-family:var(--font-display);margin:0 0 4px;font-size:34px;font-weight:600}.modal .kw{color:var(--gold);margin-bottom:16px;font-size:16px;font-weight:500}.modal .text{white-space:pre-wrap;color:#e8e5f8;font-size:16px;line-height:1.7}.modal .close{float:right;border:1px solid var(--border);background:var(--surface);color:var(--ink);cursor:pointer;border-radius:10px;padding:9px 16px;transition:all .18s}.modal .close:hover{border-color:var(--gold)}footer{color:var(--muted);text-align:center;max-width:680px;margin:0 auto;padding:40px 16px 60px;font-size:12.5px;line-height:1.7}.loading{text-align:center;color:var(--muted);padding:120px 20px}.topnav{justify-content:center;align-items:center;gap:8px;padding:16px 14px 0;font-size:14px;display:flex}.navlink{color:var(--muted);border-radius:999px;padding:7px 15px;transition:all .18s}.navlink:hover{color:var(--ink);background:var(--surface);text-decoration:none}.navlink.active{color:var(--gold);background:var(--surface)}.navsep{display:none}.chooser{grid-template-columns:1fr 1fr;gap:22px;max-width:920px;margin:30px auto;padding:0 18px;display:grid}.choice{color:var(--ink);background:var(--surface);border:1px solid var(--border);text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:24px;padding:40px 28px 34px;transition:transform .22s cubic-bezier(.2,.7,.2,1),border-color .22s,box-shadow .22s;display:block;position:relative;overflow:hidden}.choice:before{content:"";opacity:0;background:radial-gradient(120% 80% at 50% -10%,#b49bff2e,#0000 60%);transition:opacity .22s;position:absolute;inset:0}.choice:hover{box-shadow:var(--shadow);border-color:#ecc07580;text-decoration:none;transform:translateY(-5px)}.choice:hover:before{opacity:1}.choice-emoji{border:1px solid var(--border);background:radial-gradient(circle at 32% 26%,#ecc07547,#b49bff1f);border-radius:50%;justify-content:center;align-items:center;width:86px;height:86px;margin:0 auto 16px;font-size:44px;line-height:1;display:flex;position:relative}.choice h2{font-family:var(--font-display);margin:8px 0;font-size:28px;font-weight:600;position:relative}.choice p{color:var(--muted);margin:0;font-size:14px;position:relative}.iching-wrap{grid-template-columns:240px 1fr;align-items:start;gap:34px;max-width:760px;margin:14px auto 0;padding:0 18px;display:grid}.hex-build{background:var(--surface);border:1px solid var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:22px}.hexline{align-items:center;gap:12px;height:20px;margin:9px 0;display:flex}.bar-wrap{gap:12px;width:160px;display:flex}.bar{background:linear-gradient(#fff,#cfc9ee);border-radius:7px;flex:auto;height:14px;box-shadow:0 2px 8px -2px #00000080}.bar.half{flex:0 0 calc(50% - 6px)}.bar.ph{background:var(--border);box-shadow:none}.hexline.blank{opacity:.45}.hexline.changing .bar{background:linear-gradient(#f3cd84,#d9a94e);box-shadow:0 0 14px #ecc07599}.marker{width:18px;color:var(--gold);text-align:center;font-weight:700}.hex-label{color:var(--muted);text-align:center;margin-top:14px;font-size:12px}.iching-controls{flex-direction:column;align-items:center;gap:16px;display:flex}.coins{gap:18px;display:flex}.coin{perspective:320px;width:62px;height:62px}.coin-3d{width:100%;height:100%;transform-style:preserve-3d;will-change:transform;transition:transform .75s cubic-bezier(.2,.85,.25,1);position:relative}.coin-face{backface-visibility:hidden;color:var(--c-text);background:radial-gradient(circle at 35% 28%, var(--c-hi), var(--c-lo) 78%);border-radius:50%;justify-content:center;align-items:center;font-weight:800;display:flex;position:absolute;inset:0;box-shadow:inset 0 2px 3px #ffffff8c,inset 0 -9px 16px #00000052,0 7px 18px -7px #000000a6}.coin-face:before{content:"";border:1px solid #0000002e;border-radius:50%;position:absolute;inset:7px}.coin-face b{text-shadow:0 1px #ffffff59;font-size:23px;line-height:1}.coin-heads{transform:rotateX(0)}.coin-tails{transform:rotateX(180deg)}.coin-chinese{--c-hi:#f6d898;--c-lo:#bf8c2f;--c-text:#3a2600}.coin-euro{--c-hi:#f1f3f6;--c-lo:#9aa3af;--c-text:#262b31}.coin-penny{--c-hi:#e7ad7d;--c-lo:#8f4f2a;--c-text:#2a1305}.toss-info{color:var(--ink);text-align:center;min-height:21px;font-size:14px;font-weight:500}.coinstyle{color:var(--muted);font-size:13px}.legend{color:var(--muted);text-align:center;max-width:340px;margin:0;font-size:12px;line-height:1.6}.hex-result{background:var(--surface);border:1px solid var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:760px;box-shadow:var(--shadow);border-radius:24px;grid-template-columns:auto 1fr;align-items:center;gap:26px;margin:28px auto;padding:28px;display:grid}.hexcard{align-items:center;gap:18px;display:flex}.hex-glyph{background:linear-gradient(160deg, var(--gold), var(--violet));color:#0000;-webkit-background-clip:text;background-clip:text;font-size:92px;line-height:1}.hex-glyph.small{vertical-align:middle;font-size:42px}.hex-num{font-family:var(--font-display);font-size:24px;font-weight:600}.hex-tri{color:var(--muted);font-size:14px}.hex-becomes{margin-top:10px}.placeholder-note{color:var(--muted);background:var(--surface-2);border:1px dashed var(--border-strong);border-radius:12px;padding:12px 14px;font-size:13px}.placeholder-note code{color:var(--violet)}@media (width<=620px){header{padding:30px 16px 6px}h1{font-size:clamp(30px,9vw,44px)}.sub{font-size:14px}.toolbar{border-radius:20px;gap:8px;margin:14px 10px 8px;padding:10px 12px;top:8px}.tabs{flex-wrap:wrap;justify-content:center;width:100%}.tab{white-space:nowrap;flex:none;padding:8px 13px;font-size:12.5px}select,.btn{font-size:13px}input[type=search]{width:100%;min-width:0}.count{text-align:center;width:100%}main{padding:8px 12px 64px}.spread{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px}.grid{grid-template-columns:repeat(2,1fr);gap:12px}.tile .nm{font-size:14px}.stage{border-radius:18px}.pile-card{width:11%}.overlay{padding:12px}.modal{border-radius:18px;max-height:92vh}.modal .row{grid-template-columns:1fr}.modal .img{padding:14px}.modal .img img{width:auto;max-height:44vh}.modal .body{padding:18px 20px 24px}.modal h2{font-size:26px}.modal .text{font-size:15px}.topnav{flex-wrap:wrap;gap:4px;padding:12px 12px 0}.chooser{grid-template-columns:1fr;gap:16px;margin:22px auto}.choice{padding:30px 22px 28px}.choice h2{font-size:26px}.iching-wrap{grid-template-columns:1fr;justify-items:center;gap:22px}.hex-build{width:100%;max-width:340px}.hex-result{text-align:center;grid-template-columns:1fr;margin:22px 12px;padding:22px 18px}.hexcard{flex-wrap:wrap;justify-content:center}.hex-glyph{font-size:74px}}@media (width<=400px){.spread{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}.pile-card{width:12.5%}.coin{width:54px;height:54px}.coin-face b{font-size:19px}.bar-wrap{width:132px}.modal h2{font-size:23px}}
