.wi {
  --wi-ink: #171718;
  --wi-card: #222224;
  --wi-panel: #303033;
  --wi-cream: #fffaf0;
  --wi-gold: #ffc754;
  --wi-muted: #ded8ce;
  width: 95%;
  max-width: 600px;
  color: var(--wi-ink);
  text-align: left;
  font-family: Roboto, system-ui, sans-serif;
  overflow-wrap: anywhere;
}
.wi *, .wi *::before, .wi *::after { box-sizing: border-box; }
.wi [hidden] { display: none !important; }
.wi h2 { margin: 0 0 .45rem; font-size: clamp(1.45rem, 5vw, 2rem); font-weight: 800; }
.wi h3 { margin: 0 0 .5rem; font-size: 1rem; font-weight: 800; }
.wi p { margin: 0 0 .9rem; }
.wi-card {
  padding: clamp(1rem, 4.5vw, 1.9rem);
  color: var(--wi-cream);
  background: var(--wi-card);
  border: 1px solid #161616;
  border-top: 5px solid var(--wi-gold);
  border-radius: 14px;
  box-shadow: 0 9px 24px #0002;
}
.wi-date { color: var(--wi-gold); font-weight: 700; }
.wi-card p, .wi-card small { color: var(--wi-muted); }
.wi .wi-date { color: var(--wi-gold); }
.wi form { display: grid; gap: .8rem; }
.wi label, .wi legend { font-weight: 700; }
.wi label { display: block; margin: 0; }
.wi input:not([type="radio"]):not([type="checkbox"]), .wi textarea {
  display: block;
  width: 100%;
  margin-top: .32rem;
  min-height: 46px;
  padding: .65rem .75rem;
  border: 2px solid #c9bda8;
  border-radius: 8px;
  color: var(--wi-ink);
  background: var(--wi-cream);
  font: inherit;
  font-size: 16px;
}
.wi textarea { min-height: 72px; resize: vertical; }
.wi :focus-visible { outline: 3px solid var(--wi-gold); outline-offset: 3px; }
.wi-btn {
  min-height: 46px;
  padding: .55rem 1rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--wi-gold);
  color: var(--wi-ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.wi-btn:disabled, .wi-link:disabled { opacity: .65; cursor: wait; }
.wi-link {
  min-height: 44px;
  justify-self: start;
  padding: .35rem 0;
  color: var(--wi-gold);
  background: transparent;
  border: 0;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.wi-panel { margin: 0; padding: .85rem; border: 1px solid #77716a; border-radius: 9px; background: var(--wi-panel); }
.wi-panel legend { float: none; width: auto; margin: 0; padding: 0 .35rem; font-size: 1.04rem; }
.wi-panel ul { margin: .35rem 0 .75rem; padding-left: 1.25rem; }
.wi-panel p { margin-bottom: .25rem; }
.wi-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.wi-choices label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  padding: .45rem .3rem;
  min-height: 44px;
  border: 1px solid #aaa398;
  border-radius: 7px;
  color: var(--wi-cream);
  font-size: .9rem;
  text-align: center;
  cursor: pointer;
}
.wi-choices label:has(:checked) { background: var(--wi-gold); border-color: var(--wi-gold); color: var(--wi-ink); }
.wi input[type="radio"], .wi input[type="checkbox"] { accent-color: #8a5000; flex: none; }
.wi .wi-opt-in { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; }
.wi-opt-in input { margin-top: .3rem; }
.wi .wi-status { margin-top: .8rem; color: var(--wi-gold); font-weight: 700; }
.wi .wi-status:empty { display: none; }
.wi .wi-status[data-error="true"] { color: #ffb7ae; }
.wi-history { margin-top: .7rem; border-top: 1px solid #77716a; padding-top: .75rem; }
.wi-history summary { color: var(--wi-gold); font-weight: 700; cursor: pointer; }
.wi-history ul { margin: .55rem 0 0; padding-left: 1.25rem; }
.wi-history li + li { margin-top: .5rem; }
.wi-board { margin-top: 1rem; padding: 1rem; background: #faf6ed; border: 1px solid #d7cbb6; border-radius: 12px; }
.wi-board h2 { font-size: 1.25rem; }
.wi-board p { margin: 0; color: #494337; }
.wi-board ol { margin: .65rem 0 0; padding-left: 1.65rem; }
.wi-board li { padding: .28rem .3rem .28rem .05rem; }
.wi-board li span { display: inline-block; margin-left: .55rem; color: #5c451c; font-weight: 700; }
.wi-ad { margin-block: 26px !important; line-height: 1.35 !important; }
.wi-art { display: block; max-width: 600px; width: 95%; }
.wi-art img { display: block; width: 100%; border: 2px solid #000; border-radius: 8px; box-shadow: 3px 3px 6px #0006; }
@media (max-width: 370px) {
  .wi-choices { grid-template-columns: 1fr; }
}