/* Progressive enhancements of native readiness fields. */
.effects-native { display: none !important; }
.readiness-form { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 20px; }
.readiness-form > div { min-width: 0; }
.readiness-form .readiness-area { grid-column: span 2; }
.readiness-form .readiness-submit { align-self: end; grid-column: auto; }
.jelly-radio { display: flex; flex-wrap: wrap; gap: 7px; padding: 8px 5px; }
.jelly-radio__chip { border: 1px solid rgba(255,255,255,.13); border-radius: 15px; background: rgba(255,255,255,.055); color: #b9c4cd; min-height: 38px; min-width: 34px; padding: 6px 10px; transition: color .18s, background .18s, border-color .18s; }
.jelly-radio__chip[aria-checked="true"] { background: #a9f2d1; border-color: #a9f2d1; color: #10241e; box-shadow: 0 4px 20px #86efc322; }
.jelly-radio__chip:focus-visible, .comet-dial__ring:focus-visible, .ag-panel:focus-visible { outline: 2px solid #a9f2d1; outline-offset: 4px; }
.comet-field { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.comet-field > input { width: 88px; }
.comet-dial { position: relative; width: 150px; height: 150px; color: #a9f2d1; flex: 0 0 150px; }
.comet-dial__ring { width: 100%; height: 100%; touch-action: none; cursor: grab; border-radius: 50%; overflow: visible; }
.comet-dial__ring:active { cursor: grabbing; }
.comet-dial path { fill: none; stroke-linecap: round; }
.comet-dial__track { stroke: #ffffff14; }
.comet-dial__lit, .comet-dial__comet { stroke: currentColor; }
.comet-dial__head { fill: currentColor; filter: drop-shadow(0 0 5px #a9f2d1); }
.comet-dial__readout { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 3px; pointer-events: none; }
.comet-dial__figure { color: #effaf5; font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
.comet-dial__unit { color: #94a99e; font-size: 11px; }
.comet-field__hint { margin: 0; width: 100%; color: #91a39f; font-size: 11px; }
.practice-explore { margin: 26px 0; }
.practice-explore h3 { font-size: 20px; margin-top: 5px; }
.accordion-gallery { display: flex; gap: 12px; height: 250px; perspective: 1100px; }
.ag-panel { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 22px; color: white; text-decoration: none; border: 1px solid #ffffff12; transition: flex-grow .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1); transform: rotateY(-3deg); }
.ag-panel.is-active { flex-grow: 2.8; transform: rotateY(0); }
.ag-panel img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.65); transform: scale(1.12); transition: filter .65s, transform .8s cubic-bezier(.22,1,.36,1); }
.ag-panel.is-active img { filter: grayscale(0) brightness(.9); transform: scale(1); }
.ag-panel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,#00000005 20%,#050b13d9); }
.ag-panel__index { position: absolute; top: 18px; left: 18px; z-index: 1; font-size: 12px; color: #ffffffa0; }
.ag-panel__label { position: absolute; z-index: 1; bottom: 22px; left: 22px; right: 22px; display: grid; gap: 5px; }
.ag-panel__label strong { font-size: 20px; white-space: nowrap; }
.ag-panel__label small { color: #e2e9e0b3; opacity: 0; max-height: 0; transition: opacity .35s, max-height .35s; }
.ag-panel.is-active .ag-panel__label small { opacity: 1; max-height: 48px; }
.ag-panel__label > span { position: absolute; bottom: 0; right: 0; color: #baf6d8; }
body[data-motion="paused"] .accordion-gallery *, body[data-motion="paused"] .jelly-radio * { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .accordion-gallery *, .jelly-radio * { transition: none !important; } }
@media (max-width: 600px) {
    .readiness-form { grid-template-columns: 1fr; gap: 16px; }
    .readiness-form .readiness-area { grid-column: auto; }
    .accordion-gallery { flex-direction: column; height: 440px; gap: 9px; }
    .ag-panel { transform: none; flex-basis: 0; }
    .ag-panel.is-active { flex-grow: 2.4; }
    .ag-panel__label { bottom: 15px; left: 18px; right: 18px; }
    .ag-panel__label strong { font-size: 18px; }
    .ag-panel__index { top: 12px; left: auto; right: 18px; }
    .jelly-radio { gap: 6px; }
}