.w21sp{
  --w21sp-ink:#0d0b11;
  --w21sp-paper:#fff9e9;
  --w21sp-gold:#f5b914;
  --w21sp-gold2:#ffd95a;
  --w21sp-purple:#7123ad;
  --w21sp-muted:#706877;
  --w21sp-ease:cubic-bezier(.2,.8,.2,1);
  width:100%;
  margin:18px 0 24px;
  padding:18px;
  scroll-margin-top:calc(86px + env(safe-area-inset-top));
  border:2px solid var(--w21sp-ink);
  border-radius:26px;
  background:linear-gradient(145deg,#fffdf5,#f3e4ff);
  color:var(--w21sp-ink);
  box-shadow:7px 7px 0 var(--w21sp-purple),0 20px 48px rgba(13,11,17,.13);
  font-family:Inter,system-ui,-apple-system,sans-serif;
}
.w21sp *{box-sizing:border-box}
.w21sp__head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.w21sp__eyebrow{display:block;color:var(--w21sp-purple);font:800 8px/1.3 'Space Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase}
.w21sp h2{margin:5px 0 0;color:var(--w21sp-ink);font:400 clamp(38px,11vw,58px)/.88 'Bebas Neue',Impact,sans-serif;text-transform:uppercase}
.w21sp__check{display:grid;width:42px;height:42px;flex:0 0 42px;place-items:center;border:2px solid var(--w21sp-ink);border-radius:50%;background:var(--w21sp-gold);font-size:19px;font-weight:900;box-shadow:3px 3px 0 var(--w21sp-purple)}
.w21sp__intro{max-width:58ch;margin:11px 0 16px;color:var(--w21sp-muted);font-size:12px;line-height:1.55}
.w21sp__templates{min-width:0;margin:0 0 14px;padding:0;border:0}
.w21sp__templates legend{margin:0 0 8px;color:var(--w21sp-ink);font-size:12px;font-weight:900}
.w21sp__template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.w21sp__template{display:grid;min-width:0;min-height:72px;align-content:center;justify-items:center;gap:7px;padding:8px 5px;border:2px solid rgba(13,11,17,.24);border-radius:14px;background:rgba(255,249,233,.78);color:var(--w21sp-ink);font:800 10px/1.15 Inter,system-ui,sans-serif;text-align:center;cursor:pointer;touch-action:manipulation;transition:border-color .16s var(--w21sp-ease),background .16s var(--w21sp-ease),transform .16s var(--w21sp-ease),box-shadow .16s var(--w21sp-ease)}
.w21sp__template span{display:block;width:42px;height:25px;border:1px solid rgba(13,11,17,.2);border-radius:6px;background:linear-gradient(145deg,#17121d 0 55%,#f5b914 56% 74%,#7123ad 75%)}
.w21sp .w21sp__template strong{display:block;color:#0d0b11!important;font:800 10px/1.15 Inter,system-ui,sans-serif!important;text-transform:none!important}
.w21sp__template[data-template="chain"] span{background:linear-gradient(180deg,#f5b914 0 29%,#7123ad 30% 61%,#fff9e9 62% 100%)}
.w21sp__template[data-template="spotlight"] span{background:linear-gradient(145deg,#fff9e9 0 45%,#17121d 46% 75%,#7123ad 76%)}
.w21sp__template[aria-pressed="true"]{border-color:var(--w21sp-purple);background:#fff9e9;box-shadow:0 0 0 2px var(--w21sp-gold)}
.w21sp__template:focus-visible{outline:3px solid var(--w21sp-gold);outline-offset:3px}
.w21sp__preview-wrap{position:relative;display:grid;min-height:0;aspect-ratio:4/5;place-items:center;overflow:hidden;border:2px solid var(--w21sp-ink);border-radius:20px;background:#0d0b11;box-shadow:0 12px 30px rgba(13,11,17,.2)}
.w21sp__preview{display:block;width:100%;height:auto;max-height:70dvh;object-fit:contain;-webkit-touch-callout:default;user-select:auto}
.w21sp__preview:not([src]){visibility:hidden}
.w21sp__preparing{position:absolute;inset:0;display:grid;place-items:center;padding:20px;color:#fff9e9;font:800 10px/1.5 'Space Mono',ui-monospace,monospace;text-align:center}
.w21sp__preparing[hidden]{display:none}
.w21sp__caption-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 2px 7px}
.w21sp__caption-label{display:flex;align-items:center;gap:8px;margin:0;color:var(--w21sp-ink);font-size:12px;font-weight:900}
.w21sp__caption-label span{color:var(--w21sp-purple);font:800 8px 'Space Mono',ui-monospace,monospace;text-transform:uppercase}
.w21sp__caption-clear{min-width:72px;min-height:44px;padding:0 13px;border:2px solid var(--w21sp-ink);border-radius:999px;background:transparent;color:var(--w21sp-ink);font:900 11px Inter,system-ui,sans-serif;cursor:pointer;touch-action:manipulation}
.w21sp__caption-clear:active{transform:translateY(1px)}
.w21sp__caption-clear:focus-visible{outline:3px solid var(--w21sp-gold);outline-offset:2px}
.w21sp__caption{display:block!important;width:100%!important;min-height:156px!important;padding:14px!important;border:2px solid var(--w21sp-ink)!important;border-radius:17px!important;background:var(--w21sp-paper)!important;color:var(--w21sp-ink)!important;font:600 16px/1.48 Inter,system-ui,sans-serif!important;resize:vertical!important;appearance:none!important}
.w21sp__caption:focus{outline:3px solid var(--w21sp-gold);outline-offset:2px}
.w21sp__caption.is-over{border-color:#b83245!important;box-shadow:0 0 0 3px rgba(184,50,69,.12)}
.w21sp__caption-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:7px 2px 13px;color:var(--w21sp-muted);font-size:9px}
.w21sp__caption-meta b{flex:none;color:var(--w21sp-purple);font:800 9px 'Space Mono',ui-monospace,monospace}
.w21sp__caption-meta b.is-over{color:#b83245!important}
.w21sp__actions{display:grid;grid-template-columns:1fr;gap:9px}
.w21sp__button{display:flex;min-width:0;min-height:50px;align-items:center;justify-content:center;padding:0 14px;border:2px solid var(--w21sp-ink);border-radius:16px;color:var(--w21sp-ink);font:900 12px Inter,system-ui,sans-serif;text-align:center;text-decoration:none;cursor:pointer;touch-action:manipulation;transition:transform .16s var(--w21sp-ease),box-shadow .16s var(--w21sp-ease),filter .16s var(--w21sp-ease)}
.w21sp__button--share{background:var(--w21sp-purple);color:white;box-shadow:4px 4px 0 var(--w21sp-gold)}
.w21sp__button--copy{background:var(--w21sp-gold)}
.w21sp__button--x{background:var(--w21sp-ink);color:white}
.w21sp__button:disabled{cursor:wait;filter:saturate(.45);opacity:.62;box-shadow:none}
.w21sp__button:not(:disabled):active{transform:translateY(2px);box-shadow:none}
.w21sp__button:focus-visible{outline:3px solid var(--w21sp-gold);outline-offset:3px}
.w21sp__status{min-height:20px;margin:12px 2px 0;color:var(--w21sp-muted);font:700 9px/1.5 'Space Mono',ui-monospace,monospace}
.w21sp__status[data-kind="success"]{color:#3b6e17}
.w21sp__status[data-kind="warning"]{color:#8a3d18}

@media(min-width:700px){
  .w21sp{padding:24px}
  .w21sp__layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(300px,1.1fr);gap:22px}
  .w21sp__actions{grid-template-columns:1fr 1.25fr 1fr}
}

@media(hover:hover) and (pointer:fine){
  .w21sp__button:not(:disabled):hover{transform:translateY(-2px)}
  .w21sp__template:hover{transform:translateY(-2px);border-color:var(--w21sp-purple)}
}

@media(max-width:360px){
  .w21sp{padding:14px;border-radius:22px}
}

@media(prefers-reduced-motion:reduce){
  .w21sp,.w21sp *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}