@layer components{.sf{flex-direction:column;align-items:center;gap:16px;display:flex}@media (max-width:1023px){.sf{min-height:max(420px,100svh - 190px)}.sf .sf-stage{flex:1;justify-content:center}}@media (max-width:767px) and (max-height:700px){.sf{min-height:max(360px,100svh - 190px)}.sf .sf-box{width:256px}.sf .sf-box.ready{min-height:220px}.sf .sf-hourglass{width:96px;height:96px}}.sf-stage{flex-direction:column;align-items:center;gap:10px;width:100%;display:flex}.sf-count{color:var(--color-ink);align-items:baseline;gap:6px;display:flex}.sf-count .w{color:var(--color-mute)}.sf-box{aspect-ratio:3/2;justify-content:center;align-items:center;width:320px;max-width:100%;display:flex}@media (min-width:1024px){.sf-box{width:400px}}.sf-box .flag{aspect-ratio:4/3;width:auto;height:100%}.sf-box.ready{text-align:center;flex-direction:column;gap:8px;min-height:280px}.sf-hourglass{width:128px;height:128px}.sf-penalty{border-radius:var(--radius-chip);background:var(--color-card);color:var(--color-mute);padding:4px 10px}.sf-opts{grid-template-columns:minmax(0,1fr);gap:8px;width:100%;min-width:0;display:grid}@media (min-width:1024px){.sf-opts{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}.sf-opts.busy{pointer-events:none}.sf-opts .sf-opt{border-radius:var(--radius-ctl);background:var(--color-card);width:100%;min-width:0;height:auto;min-height:56px;color:var(--color-ink);text-align:left;cursor:pointer;align-items:center;gap:10px;padding:12px 16px;font-size:16px;font-weight:500;line-height:1.25;display:flex}.sf-opts .sf-opt .lbl{white-space:normal;overflow-wrap:anywhere;flex:1;min-width:0}.sf-opts .sf-opt .ic{flex:none;display:inline-flex}@media (hover:hover) and (pointer:fine){.sf-opts .sf-opt[data-state=idle]:hover{background:var(--color-line)}}.sf-opts .sf-opt[data-state=right]{background:var(--color-ink);color:var(--color-paper)}.sf-opts .sf-opt[data-state=wrong]{background:var(--color-ember);color:var(--color-paper)}.sf .sf-start{width:100%;height:56px}.sf-time{text-align:center;padding:24px 0 8px}@media (max-width:1023px){.sf.done{min-height:0}}.sf-res{text-align:center;flex-direction:column;align-items:center;gap:4px;display:flex}.sf-res .best{color:var(--color-mute)}}@supports not (color:color-mix(in srgb, red, blue)){.sf:not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer){flex-direction:column;align-items:center;gap:16px;display:flex}@media (max-width:1023px){.sf:not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer){min-height:max(420px,100vh - 190px)}.sf .sf-stage:not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer){flex:1;justify-content:center}}@media (max-width:767px) and (max-height:700px){.sf:not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer){min-height:max(360px,100vh - 190px)}.sf .sf-box:not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer){width:256px}.sf .sf-box.ready:not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer){min-height:220px}.sf .sf-hourglass:not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer){width:96px;height:96px}}.sf-stage:not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer){flex-direction:column;align-items:center;gap:10px;width:100%;display:flex}.sf-count:not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer){color:var(--color-ink);align-items:baseline;gap:6px;display:flex}.sf-count .w:not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer){color:var(--color-mute)}.sf-box:not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer){aspect-ratio:3/2;justify-content:center;align-items:center;width:320px;max-width:100%;display:flex}@media (min-width:1024px){.sf-box:not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer){width:400px}}.sf-box .flag:not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer){aspect-ratio:4/3;width:auto;height:100%}.sf-box.ready:not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer){text-align:center;flex-direction:column;gap:8px;min-height:280px}.sf-hourglass:not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer){width:128px;height:128px}.sf-penalty:not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer){border-radius:var(--radius-chip);background:var(--color-card);color:var(--color-mute);padding:4px 10px}.sf-opts:not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer){grid-template-columns:minmax(0,1fr);gap:8px;width:100%;min-width:0;display:grid}@media (min-width:1024px){.sf-opts:not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer){grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}.sf-opts.busy:not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer){pointer-events:none}.sf-opts .sf-opt:not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer){border-radius:var(--radius-ctl);background:var(--color-card);width:100%;min-width:0;height:auto;min-height:56px;color:var(--color-ink);text-align:left;cursor:pointer;align-items:center;gap:10px;padding:12px 16px;font-size:16px;font-weight:500;line-height:1.25;display:flex}.sf-opts .sf-opt .lbl:not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer){white-space:normal;overflow-wrap:anywhere;flex:1;min-width:0}.sf-opts .sf-opt .ic:not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer){flex:none;display:inline-flex}@media (hover:hover) and (pointer:fine){.sf-opts .sf-opt[data-state=idle]:hover:not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer){background:var(--color-line)}}.sf-opts .sf-opt[data-state=right]:not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer){background:var(--color-ink);color:var(--color-paper)}.sf-opts .sf-opt[data-state=wrong]:not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer){background:var(--color-ember);color:var(--color-paper)}.sf .sf-start:not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer){width:100%;height:56px}.sf-time:not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer){text-align:center;padding:24px 0 8px}@media (max-width:1023px){.sf.done:not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer){min-height:0}}.sf-res:not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer){text-align:center;flex-direction:column;align-items:center;gap:4px;display:flex}.sf-res .best:not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer):not(#__cv_layer){color:var(--color-mute)}}