:root{
  --withifi-interaction-ink:#263447;
  --withifi-interaction-muted:#647286;
  --withifi-interaction-accent:#4f8f7d;
  --withifi-interaction-soft:#edf8f4;
  --withifi-interaction-surface:#fff;
  --withifi-interaction-border:rgba(54,79,92,.14);
  --withifi-interaction-shadow:0 14px 36px rgba(48,73,88,.1);
}

.withifi-renderer-gallery__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));
  gap:24px;
  margin-top:24px;
}

.withifi-renderer-gallery__card{
  padding:24px;
  border:1px solid #d9e3e0;
  border-radius:24px;
  background:#fff;
  box-shadow:0 12px 30px rgba(48,73,88,.08);
}

.withifi-renderer-gallery__card h2{margin-top:0;text-transform:capitalize}

.withifi-interaction{
  width:min(100%,760px);
  margin:0 auto;
  color:var(--withifi-interaction-ink);
  font:inherit;
}

.withifi-interaction *,
.withifi-interaction *::before,
.withifi-interaction *::after{box-sizing:border-box}

.withifi-interaction__prompt{
  max-width:28ch;
  margin:0 auto 24px;
  font-size:clamp(1.35rem,3.5vw,2.25rem);
  font-weight:800;
  line-height:1.18;
  text-align:center;
  text-wrap:balance;
}

.withifi-interaction__choices,
.withifi-interaction__token-bank,
.withifi-interaction__clock-controls,
.withifi-interaction__stepper{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
}

.withifi-interaction button{
  min-width:112px;
  min-height:60px;
  padding:14px 22px;
  border:2px solid var(--withifi-interaction-border);
  border-radius:17px;
  background:var(--withifi-interaction-surface);
  color:var(--withifi-interaction-ink);
  box-shadow:0 7px 18px rgba(48,73,88,.07);
  font:inherit;
  font-size:clamp(1.05rem,2.4vw,1.22rem);
  font-weight:750;
  line-height:1.38;
  letter-spacing:.005em;
  text-align:center;
  text-wrap:pretty;
  white-space:normal;
  overflow-wrap:anywhere;
  cursor:pointer;
  touch-action:manipulation;
}

.withifi-interaction button:hover,
.withifi-interaction button:focus-visible,
.withifi-interaction button.is-selected{
  border-color:var(--withifi-interaction-accent);
  background:var(--withifi-interaction-soft);
  color:#173b32;
  box-shadow:0 10px 24px rgba(48,73,88,.12);
}

.withifi-interaction button.is-selected,
.withifi-interaction button[aria-pressed="true"],
.withifi-interaction button[aria-checked="true"]{
  border-color:#2f7563;
  background:#dff3eb;
  color:#173b32;
}

.withifi-interaction button.is-correct,
.withifi-interaction button[data-state="correct"]{
  border-color:#2f7563;
  background:#dff3eb;
  color:#173b32;
}

.withifi-interaction button.is-retry,
.withifi-interaction button[data-state="retry"]{
  border-color:#9a7544;
  background:#fff6e8;
  color:#4f3820;
}

.withifi-interaction button:focus-visible{
  outline:3px solid color-mix(in srgb,var(--withifi-interaction-accent) 38%,transparent);
  outline-offset:3px;
}

.withifi-interaction button:disabled{
  opacity:1;
  color:var(--withifi-interaction-ink);
  cursor:default;
}

.withifi-interaction__choice{
  min-width:min(180px,100%);
  max-width:100%;
  flex:1 1 180px;
}

.withifi-interaction__image{display:block;max-width:100%;height:auto;margin:0 auto 8px;border-radius:12px}

.withifi-interaction__submit{
  display:block;
  min-width:min(230px,100%);
  margin:24px auto 0;
  border-color:transparent!important;
  background:var(--withifi-interaction-accent)!important;
  color:#fff!important;
}

.withifi-interaction__assignment{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:20px;
}

.withifi-interaction__items,
.withifi-interaction__targets{
  display:grid;
  align-content:start;
  gap:12px;
  padding:16px;
  border:1px solid var(--withifi-interaction-border);
  border-radius:22px;
  background:rgba(255,255,255,.7);
}

.withifi-interaction__target{display:grid;gap:3px;text-align:left}
.withifi-interaction__target small{color:var(--withifi-interaction-muted);font-size:.78rem;font-weight:600}
.withifi-interaction__status{grid-column:1/-1;margin:0;color:var(--withifi-interaction-muted);text-align:center}

.withifi-interaction__sequence{display:grid;gap:10px;max-width:620px;margin:0 auto;padding:0;list-style:none;counter-reset:step}
.withifi-interaction__sequence-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--withifi-interaction-border);border-radius:16px;background:#fff;counter-increment:step}
.withifi-interaction__sequence-item::before{content:counter(step);display:grid;place-items:center;flex:0 0 32px;height:32px;border-radius:50%;background:var(--withifi-interaction-soft);font-weight:800}
.withifi-interaction__sequence-item>span:first-of-type{flex:1}
.withifi-interaction__sequence-controls{display:flex;gap:6px}
.withifi-interaction__small{min-height:42px!important;padding:8px 12px!important;font-size:.88rem!important}

.withifi-interaction__count-stage{
  display:grid;
  grid-template-columns:repeat(var(--withifi-count-columns,4),minmax(42px,72px));
  justify-content:center;
  gap:12px;
  margin:0 auto 24px;
}
.withifi-interaction__count-object{display:grid;place-items:center;min-height:54px;font-size:clamp(1.7rem,5vw,3rem)}
.withifi-interaction__count-value{display:grid;place-items:center;min-width:80px;min-height:52px;border-radius:16px;background:var(--withifi-interaction-soft);font-size:1.5rem;font-weight:850}

.withifi-interaction__build-result{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  min-height:76px;
  margin:20px auto 0;
  padding:12px;
  border:2px dashed var(--withifi-interaction-border);
  border-radius:20px;
  background:rgba(255,255,255,.7);
}
.withifi-interaction__token{min-width:54px!important}
.withifi-interaction__placeholder{align-self:center;color:var(--withifi-interaction-muted)}

.withifi-interaction__pattern{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-bottom:24px}
.withifi-interaction__pattern-item,
.withifi-interaction__pattern-missing{display:grid;place-items:center;min-width:58px;min-height:58px;border-radius:16px;background:var(--withifi-interaction-soft);font-size:1.5rem;font-weight:800}
.withifi-interaction__pattern-missing{border:2px dashed var(--withifi-interaction-accent);background:#fff}

.withifi-interaction__number-line{position:relative;display:flex;justify-content:space-between;gap:8px;margin:38px auto 8px;padding-top:14px}
.withifi-interaction__number-line::before{content:"";position:absolute;z-index:0;top:0;left:20px;right:20px;height:4px;border-radius:99px;background:var(--withifi-interaction-accent)}
.withifi-interaction__number-point{position:relative;z-index:1;min-width:48px!important;padding-inline:10px!important}
.withifi-interaction__number-point::before{content:"";position:absolute;top:-19px;left:50%;width:3px;height:14px;background:var(--withifi-interaction-accent)}

.withifi-interaction__clock{position:relative;width:min(280px,72vw);aspect-ratio:1;margin:0 auto 24px;border:10px solid #477668;border-radius:50%;background:#fff;box-shadow:var(--withifi-interaction-shadow)}
.withifi-interaction__clock-mark{position:absolute;left:calc(50% - 1px);top:6px;width:2px;height:13px;background:#477668;transform-origin:1px calc(140px - 16px)}
.withifi-interaction__clock-hand{position:absolute;left:calc(50% - 3px);bottom:50%;width:6px;border-radius:99px;background:#477668;transform-origin:50% 100%}
.withifi-interaction__clock-hand.is-hour{height:27%}
.withifi-interaction__clock-hand.is-minute{height:38%;background:#d47b5d}
.withifi-interaction__clock-centre{position:absolute;left:calc(50% - 8px);top:calc(50% - 8px);width:16px;height:16px;border-radius:50%;background:#263447}

.withifi-interaction__memory{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px}
.withifi-interaction__memory-card{min-height:96px!important;background:var(--withifi-interaction-soft)!important}
.withifi-interaction__memory-card.is-open{background:#fff!important}

.withifi-interaction__scene{margin:0 auto 24px;text-align:center}
.withifi-interaction__scene img{display:block;max-width:100%;max-height:380px;margin:0 auto;border-radius:24px;object-fit:contain}
.withifi-interaction__scene figcaption{margin-top:10px;color:var(--withifi-interaction-muted)}

@media(max-width:680px){
  .withifi-interaction__assignment{grid-template-columns:1fr}
  .withifi-interaction__status{grid-column:auto}
  .withifi-interaction__choices{display:grid;grid-template-columns:1fr}
  .withifi-interaction button{width:100%;min-height:64px;padding:15px 18px;font-size:1.08rem}
  .withifi-interaction__choice{width:100%;min-width:0}
  .withifi-interaction__sequence-item{align-items:flex-start;flex-wrap:wrap}
  .withifi-interaction__sequence-controls{width:100%;justify-content:flex-end}
}

@media(prefers-reduced-motion:reduce){
  .withifi-interaction *,
  .withifi-interaction *::before,
  .withifi-interaction *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
}

@media(forced-colors:active){
  .withifi-interaction button,
  .withifi-interaction__items,
  .withifi-interaction__targets,
  .withifi-interaction__sequence-item{border:2px solid CanvasText}
}