.bone-image { display:block; width:100%; aspect-ratio:1; background-color:#000; background-image:url('assets/bone-faces-v4.png'); background-size:200% 200%; background-repeat:no-repeat; }
.bone-1 { background-position:0 0; }
.bone-3 { background-position:100% 0; }
.bone-4 { background-position:0 100%; }
/* Koon sits high and left within its sprite quadrant; center its visible silhouette. */
.bone-6 { background-position:96.8% 94.4%; }
.title-with-info { display:flex; align-items:center; gap:12px; }
.astragalus-casting { padding-top:12px; }
.astragalus-casting .breadcrumbs { margin-bottom:12px; }
.astragalus-casting .cabinet-header { padding-bottom:12px; margin-bottom:12px; }
.astragalus-casting .cabinet-header .eyebrow { margin:0 0 4px; }
.astragalus-casting .cabinet-header h1 { margin:4px 0 8px; }
.astragalus-casting .cabinet-header .intro { margin:0; line-height:1.45; }
.astragalus-casting .oracle-workspace { margin-top:12px; }
.info-link { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:44px; height:44px; border-radius:50%; }
.info-link svg { width:25px; height:25px; }
.info-link:hover { background:var(--panel); }
a.pattern-button { display:inline-flex; align-items:center; text-decoration:none; }
.face { overflow:hidden; padding-top:0; }
.face > .bone-image { width:calc(100% + 36px); margin:0 -18px 20px; }
.face h3 { margin-top:12px; }
.source-note { color:var(--muted); font-size:.8rem; line-height:1.65; }
main a { color:var(--gold); text-underline-offset:3px; }
.method-section { margin-top:48px; }
.casting-steps { padding-left:24px; max-width:720px; }
.casting-steps li { padding:0 0 12px 8px; line-height:1.6; }
.casting-steps li::marker { color:var(--gold); }
.worked-example { margin-top:32px; padding:28px; background:var(--panel); border:1px solid var(--line); border-radius:16px; }
.example-bones { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); padding:16px 8px; border-radius:10px; background:#000; }
.example-bones > div { min-width:0; text-align:center; color:#c8aa6a; font:1.25rem Georgia,serif; }
.pattern-equation { font:clamp(1.2rem,4vw,1.8rem)/1.6 Georgia,serif; color:var(--gold); text-align:center; }
.meaning-examples { margin-top:24px; border-top:1px solid var(--line); }
.meaning-examples h3 { font-size:1.3rem; }
.meaning-examples dl > div { display:grid; grid-template-columns:minmax(180px,1fr) 1.3fr; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); }
.meaning-examples dt { font-weight:600; }
.meaning-examples dd { margin:0; color:var(--muted); }
.source-details { margin-top:32px; color:var(--muted); font-size:.86rem; line-height:1.6; }
.source-details summary { cursor:pointer; padding:12px 0; color:var(--gold); }
.source-details summary:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
@media(max-width:680px) { .worked-example { padding:20px 16px; } .meaning-examples dl > div { grid-template-columns:1fr; gap:7px; } }
.oracle-workspace { margin:32px 0 48px; padding:28px; border:1px solid var(--line); border-radius:16px; background:var(--panel); }
.cast-inputs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin:24px 0; }
.cast-face { display:grid; gap:10px; min-width:0; color:var(--muted); font-size:.8rem; }
.cast-face .bone-image { border-radius:8px; }
.cast-face select { width:100%; min-height:44px; padding:8px; border:1px solid var(--line); border-radius:6px; font:inherit; }
.cast-actions { display:flex; gap:12px; flex-wrap:wrap; }
.cast-actions button { min-height:44px; padding:12px 20px; cursor:pointer; border:1px solid var(--gold); border-radius:8px; font:600 .9rem system-ui; color:var(--primary-ink); background:var(--primary); }
.cast-actions .secondary { color:var(--ink); background:transparent; }
.cast-actions button:disabled { opacity:.45; cursor:not-allowed; }
.cast-actions button:focus-visible,.pattern-button:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
.oracle-result { margin-top:24px; padding:24px; border-top:1px solid var(--gold); }
.oracle-result h3 { font-size:2rem; margin:12px 0; }
.oracle-meaning { font:1.3rem/1.6 Georgia,serif; }
.cast-equation { color:var(--muted); }
.table-scroll { overflow-x:auto; }
.oracle-table { width:100%; border-collapse:collapse; text-align:left; }
.oracle-table caption { text-align:left; margin:12px 0; }
.oracle-table th,.oracle-table td { padding:12px 8px; border-bottom:1px solid var(--line); }
.pattern-button { color:var(--gold); cursor:pointer; min-height:44px; background:transparent; border:1px solid var(--line); border-radius:6px; padding:8px 12px; font:inherit; }
@media(max-width:680px) { .oracle-workspace { padding:20px 14px; } .cast-inputs { grid-template-columns:repeat(2,minmax(0,1fr)); } .cast-face:last-child { grid-column:1 / -1; width:calc(50% - 6px); justify-self:center; } .oracle-result { padding:20px 0; } }

.reading-actions { display:flex; flex-wrap:wrap; gap:12px; margin:16px 24px 0; }
.reading-actions[hidden] { display:none!important; }
.reading-actions button { width:auto; min-height:44px; padding:12px 20px; font:600 .9rem/1.3 system-ui,sans-serif; }
@media(max-width:680px) { .reading-actions { margin-inline:0; } .reading-actions button { flex:1 1 160px; } }