.result-panel.fields-panel{display:grid;grid-template-rows:auto minmax(0,1fr);gap:20px;max-height:500px;margin:auto 0;padding:8px 4px}
.fields-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fields-heading h2{margin:0;font:700 clamp(26px,7vw,34px)/1.25 SnapshotSans,sans-serif;letter-spacing:-.04em}
.fields-grid{list-style:none;padding:0;margin:0;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:20px 26px;align-items:center}
.fields-grid[data-fields="3"] .field-visual:last-child{grid-column:1/-1;width:calc((100% - 26px)/2);justify-self:center}
.field-visual{min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.field-ring{position:relative;flex-shrink:0;width:118px;height:118px}
.field-ring svg{display:block;width:100%;height:100%;overflow:visible}
.field-ring-track{fill:none;stroke:#ffffff16;stroke-width:7}
.field-ring-value{fill:none;stroke-width:7;stroke-linecap:round;animation:field-ring-draw 700ms cubic-bezier(.16,1,.3,1) var(--field-delay) both;filter:drop-shadow(0 0 5px #8cddff20)}
.field-ring-value[stroke-dasharray="0 100"]{stroke:none}
.field-score{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;gap:3px;color:white;font:700 38px/1 RankinoDisplay,SnapshotSans,sans-serif;letter-spacing:-.055em;font-variant-numeric:tabular-nums}
.field-score small{font-size:16px;font-weight:600;letter-spacing:-.02em;color:#c0deff;margin-top:10px}
.field-visual h3{margin:0;font:700 16px/1.4 SnapshotSans,sans-serif;letter-spacing:-.02em;color:white}
.field-rank{color:#c4eaff;font:700 19px/1.25 RankinoDisplay,SnapshotSans,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.field-rank small{font:600 14px SnapshotSans,sans-serif;margin-left:3px;color:#c0d7f7}
.field-position{width:76px;height:3px;margin-top:3px;border-radius:8px;background:linear-gradient(90deg,#bcefff60,#ffffff12);position:relative}
.field-position span{display:block;position:absolute;left:var(--field-position);top:50%;width:6px;height:6px;transform:translate(-50%,-50%);border-radius:50%;background:#c0f5ff;box-shadow:0 0 0 3px #b3eaff1c}
.field-visual.is-unanswered{opacity:.5}.field-visual.is-unanswered .field-position{visibility:hidden}
.result-panel[aria-hidden="true"] .field-ring-value{animation:none}
.result-dots{grid-template-columns:minmax(0,1fr) repeat(4,40px)}.result-dot{width:40px}
body[data-motion="fields"]:after{background:radial-gradient(ellipse at 92% 15%,#a6ebff24,transparent 40%);transform:scale(.8)}
@keyframes field-ring-draw{from{stroke-dasharray:0 100}}
@media(max-width:390px){.result-dots{grid-template-columns:minmax(0,1fr) repeat(4,32px)}.result-dot{width:32px}.fields-grid{column-gap:18px}.fields-grid[data-fields="3"] .field-visual:last-child{width:calc((100% - 18px)/2)}.field-ring{width:108px;height:108px}.field-visual h3{font-size:14px}}
@media(max-height:700px){.result-panel.fields-panel{gap:12px;max-height:410px}.fields-heading h2{font-size:27px}.fields-grid{row-gap:14px}.field-ring{width:88px;height:88px}.field-score{font-size:30px}.field-score small{font-size:14px;margin-top:7px}.field-visual{gap:5px}.field-visual h3{font-size:14px}.field-rank{font-size:18px}}
@media(max-height:600px){.result-panel.fields-panel{gap:10px}.fields-heading h2{font-size:24px}.fields-grid{row-gap:10px}.field-ring{width:70px;height:70px}.field-score{font-size:26px}.field-score small{margin-top:5px}.field-visual{gap:4px}.field-position{margin-top:1px}}
@media(orientation:landscape) and (max-height:600px){.result-panel.fields-panel{max-height:none}.fields-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:12px}.fields-grid[data-fields="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}.fields-grid[data-fields="3"] .field-visual:last-child{grid-column:auto;width:auto}.field-ring{width:80px;height:80px}.field-position{width:60px}}
@media(prefers-reduced-motion:reduce){.field-ring-value{animation:none}}