/* "Try a throw" (js/demo.js): the app's three coins and the hexagram building above them. Shown only with JS. */
.demo { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(28px, 5vw, 64px); align-items: center; margin-top: clamp(48px, 7vw, 88px); padding: clamp(26px, 4vw, 48px); border-radius: var(--r-lg); }
html:not(.js) .demo { display: none; }
.demo h3 { margin-top: 14px; font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
.demo-copy p { margin-top: 14px; font-size: 1.02rem; }
.demo-copy .fine { margin-top: 12px; font-size: .9rem; color: var(--muted); }
.demo-stage { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 18px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface); }

/* the hexagram, top line first; drawn like the app's: solid ink yang, broken pale yin */
.demo-hex { display: flex; flex-direction: column; gap: 9px; padding: 6px 0 18px; }
.demo-hex i { position: relative; display: block; width: 128px; height: 7px; background: var(--line); }
.demo-hex i.yang { background: var(--yang); animation: line-in .4s ease-out; }
.demo-hex i.yin { background: linear-gradient(90deg, var(--yin) 0 35%, transparent 35% 65%, var(--yin) 65% 100%); animation: line-in .4s ease-out; }
.demo-hex i.changing { animation: line-in .4s ease-out, changing 2.5s ease-in-out .4s infinite; }
.demo-hex i.changing::after { content: ""; position: absolute; right: -16px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--accent); }
@keyframes line-in { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@keyframes changing { 50% { box-shadow: 0 0 9px rgba(var(--accent-rgb), .45); opacity: .7; } }

.demo-progress { font-size: .95rem; color: var(--text); }
/* the coins: round, with the square hole of old Chinese cash coins */
.demo-coins {
  display: flex; gap: 18px; margin: 18px 0 6px; padding: 10px 14px; border: 0; border-radius: var(--pill); background: transparent; cursor: pointer; perspective: 600px;
}
.demo-coins[aria-disabled="true"] { cursor: default; }
.demo-coins .coin {
  position: relative; display: block; width: 58px; height: 58px; border-radius: 50%; border: 1.5px dashed var(--ghost);
  background: var(--surface-2); color: var(--muted); transition: background-color .2s, border-color .2s;
}
.demo-coins .coin b { position: absolute; left: 0; right: 0; top: 50%; margin-top: -.6em; font-size: 15px; font-weight: 400; line-height: 1.2; }
.demo-coins .coin[data-face="heads"], .demo-coins .coin[data-face="tails"] { border-style: solid; border-width: 2px; }
.demo-coins .coin[data-face="heads"] { background: var(--text); border-color: var(--text); color: var(--bg); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.demo-coins .coin[data-face="tails"] { border-color: var(--ghost); color: var(--muted); }
.demo-coins .coin[data-face="heads"] b, .demo-coins .coin[data-face="tails"] b { top: 9px; margin-top: 0; font-size: 12px; }
.demo-coins .coin[data-face="heads"]::after, .demo-coins .coin[data-face="tails"]::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 1px;
}
.demo-coins .coin[data-face="heads"]::after { border: 1.5px solid var(--bg); }
.demo-coins .coin[data-face="tails"]::after { border: 1.5px solid var(--ghost); background: var(--bg); }
.demo-coins .coin.flip { animation: flip .6s ease-in-out both; }
@keyframes flip { 0% { transform: rotateY(0) scale(1); } 50% { transform: rotateY(180deg) scale(.85); } 100% { transform: rotateY(360deg) scale(1); } }
.demo-coins:focus-visible { outline-offset: 2px; }
.demo-result { min-height: 3.2em; margin-top: 6px; font-size: .93rem; color: var(--sub); }
.demo-result strong { display: block; font-family: var(--serif); font-size: 1.5rem; font-weight: 400; color: var(--head); }
.demo-result .to { display: block; margin: 4px 0 2px; font-family: var(--serif); font-size: 1.1rem; color: var(--water-text); }
.demo-again { margin-top: 10px; }
.demo-again[hidden] { display: none; }

@media (max-width: 920px) { .demo { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .demo-hex i.changing { box-shadow: 0 0 9px rgba(var(--accent-rgb), .45); } /* static, as the app does */
}

/* Former style="" attributes, now classes: the strict Content-Security-Policy blocks inline styles. */
.sx-c-accent { --c: var(--accent) !important; }
.sx-c-water { --c: var(--water) !important; }
.sx-957803e7 { background: var(--el-wood) !important; }
.sx-d27a433a { background: var(--el-fire) !important; }
.sx-9e67108e { background: var(--el-earth) !important; }
.sx-79af554b { background: var(--el-metal) !important; }
.sx-810c7a9e { background: var(--el-water) !important; }