/* CD-011 only: an explanatory sieve, with the answer retained in HTML. */
.coffee-supremo-size { margin:28px 0 32px; padding:24px; border:1px solid var(--article-line); }
.coffee-supremo-size .sieve-heading p { font-family:var(--article-heading-font); font-size:1.5rem; line-height:1.7; margin:4px 0 14px; }
.coffee-supremo-size .sieve-intro { font-size:1rem; line-height:1.9; margin:0 0 18px; }
.coffee-supremo-size .sieve-controls { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.coffee-supremo-size .sieve-controls[hidden] { display:none; }
.coffee-supremo-size #supremo-screen-label { flex-basis:100%; font-size:1rem; line-height:1.8; margin:0; }
.coffee-supremo-size #supremo-screen-label span { display:inline-block; margin-left:10px; font-size:.875rem; color:var(--article-muted); }
.coffee-supremo-size .sieve-screens { display:flex; gap:6px; }
.coffee-supremo-size button { border:1px solid #bacbb0; border-radius:4px; min-height:48px; min-width:48px; padding:8px 13px; background:#142b21; color:#f1eee2; font-size:1rem; line-height:1.5; cursor:pointer; }
.coffee-supremo-size button[aria-pressed="true"] { color:#142b21; background:#efdfc8; border-color:#efdfc8; }
.coffee-supremo-size .sieve-action { margin-left:auto; color:#142b21; background:#dfc28f; border-color:#dfc28f; }
.coffee-supremo-size button:hover { border-color:#dfc28f; }
.coffee-supremo-size button:focus-visible { outline:3px solid #dfc28f; outline-offset:3px; }
.coffee-supremo-size .sieve-drawing { max-width:420px; margin:12px auto 0; }
.coffee-supremo-size svg { width:100%; height:auto; display:block; }
.coffee-supremo-size .sieve-board { fill:#d9cbad; stroke:#efdfc8; stroke-width:2; }
.coffee-supremo-size .sieve-holes ellipse { fill:#10281f; stroke:#10281f; stroke-width:2; transition:rx .3s; }
.coffee-supremo-size .sieve-bean-position { transform:translate(var(--bean-x),var(--bean-y)); transition:transform .65s cubic-bezier(.35,0,.45,1); }
.coffee-supremo-size .sieve-bean { fill:#bcc89e; stroke:#081b14; stroke-width:2; }
.coffee-supremo-size .sieve-seam { fill:none; stroke:#455c3b; stroke-width:2.5; stroke-linecap:round; }
.coffee-supremo-size figcaption .sieve-position-key { display:flex; flex-wrap:wrap; gap:2px 24px; font-size:.875rem; color:var(--article-muted); line-height:1.8; margin:0 0 12px; }
.coffee-supremo-size figcaption .sieve-status { font-size:1.0625rem; line-height:1.9; margin:0 0 12px; }
.coffee-supremo-size figcaption .sieve-note { font-size:.875rem; color:var(--article-muted); line-height:1.9; margin:0 0 14px; }
.coffee-supremo-size figcaption .sieve-next { font-size:1rem; line-height:1.9; margin:0; }
.coffee-supremo-size .sieve-next a { display:inline-block; max-width:100%; }
@media(max-width:700px) { .coffee-supremo-size { padding:18px 12px; } .coffee-supremo-size .sieve-action { flex:1 1 100%; margin-left:0; } }
@media(prefers-reduced-motion:reduce) { .coffee-supremo-size .sieve-bean-position,.coffee-supremo-size .sieve-holes ellipse { transition:none; } }