.sn-board{--notice-success-fill:#168413;--notice-on-success:#f5f8f3;--notice-shadow:0 6px 16px rgb(0 0 0 / .16);gap:28px}
.dark .sn-board{--notice-success-fill:#256b2d;--notice-on-success:#e0eddf;--notice-shadow:0 0 0 1px rgb(255 255 255 / .08),0 6px 16px rgb(0 0 0 / .2)}
.sn-section{display:grid;gap:12px;min-width:0}.sn-section>div>p{font-size:13px;margin-top:4px}.sn-stage{display:grid;gap:12px;background:var(--raised);border:1px solid var(--line);border-radius:12px;padding:24px 16px 16px;min-width:0}
.sn-toast{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;max-width:560px;margin-inline:auto;min-height:52px;padding:6px 8px 6px 16px;border-radius:6px;background:var(--notice-success-fill);color:var(--notice-on-success);box-shadow:var(--notice-shadow);font-size:14px;line-height:22px}.sn-toast[hidden]{display:none}.sn-toast>span{min-width:0;overflow-wrap:anywhere}
.specimen .sn-toast button{min-height:40px;flex-shrink:0}.specimen .sn-toast .sn-dismiss{width:40px;height:40px;padding:0;background:transparent;border:0;color:inherit;display:grid;place-items:center}.specimen .sn-toast .sn-dismiss:hover{background:rgb(255 255 255 / .12)}
.specimen .sn-toast .sn-action{background:var(--notice-on-success);color:#243023;border:0;border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600}.specimen .sn-toast .sn-action:hover{filter:brightness(.94)}.sn-stage-caption{font-size:11px;color:var(--muted);text-align:center;margin-top:8px}
.sn-banner{display:flex;align-items:center;gap:12px;border:1px solid color-mix(in srgb,var(--notice-tone),transparent 65%);background:color-mix(in srgb,var(--notice-tone),var(--bg) 89%);padding:12px 16px;border-radius:12px;color:var(--ink);font-size:13px;line-height:20px}.sn-banner>span:not(.sn-symbol){flex:1;min-width:0}.sn-banner>.icon,.sn-symbol{flex-shrink:0;color:var(--notice-tone)}.sn-symbol{display:grid;place-items:center;width:16px;height:16px;border:1.5px solid currentColor;border-radius:50%;font-size:11px;font-weight:700}.sn-warning{--notice-tone:var(--warning)}.sn-info{--notice-tone:var(--info)}.sn-error{--notice-tone:var(--danger)}.sn-resolved{--notice-tone:var(--success)}.sn-banner button{min-height:40px;margin-left:auto}.sn-replay-state{font-size:12px;color:var(--muted)}
.sn-guidance{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:20px;font-size:13px;line-height:22px}.sn-guidance a{color:var(--info);text-underline-offset:3px}.specimen .sn-content-dialog{width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 48px);padding:24px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px}.sn-content-dialog::backdrop{background:rgb(0 0 0 / .45)}.sn-content-dialog>p{font-size:13px;margin-top:8px}.sn-content-list{display:grid;margin-block:20px}.sn-content-list>div{display:flex;align-items:center;gap:12px;padding-block:12px;border-top:1px solid var(--line);font-size:13px}.sn-content-list>div>span:not(.pill){flex:1}.sn-board button:focus-visible,.sn-board a:focus-visible{outline:2px solid var(--info);outline-offset:3px}.sn-toast button:focus-visible{outline-color:var(--notice-on-success)}
@container(max-width:520px){.sn-board{padding:16px}.sn-stage{padding:16px 8px}.sn-toast{gap:8px}.sn-toast:has(.sn-action){flex-wrap:wrap;padding:12px 16px}.sn-toast .sn-action{margin-left:auto}.sn-banner{flex-wrap:wrap}.sn-banner>span:not(.sn-symbol){flex-basis:75%}.sn-content-list>div{flex-wrap:wrap}}