@layer tokens{:root{--bg:oklch(95% 0 0);--surface:oklch(100% 0 0);--surface-2:oklch(97% 0 0);--surface-hover:oklch(94% 0 0);--surface-header:oklch(96% 0 0);--border:oklch(88% 0 0);--border-dim:oklch(92% 0 0);--text:oklch(12% 0 0);--text-bright:oklch(8% 0 0);--text-2:oklch(32% 0 0);--text-3:oklch(46% 0 0);--text-code:oklch(30% 0 0);--muted:oklch(46% 0 0);--accent:oklch(38% .12 260);--accent-dim:color-mix(in oklch, var(--accent) 10%, transparent);--accent-border:color-mix(in oklch, var(--accent) 30%, transparent);--green:oklch(40% .14 155);--green-dim:color-mix(in oklch, var(--green) 10%, transparent);--green-border:color-mix(in oklch, var(--green) 30%, transparent);--safe-bg:color-mix(in oklch, var(--green) 10%, var(--surface));--safe-border:color-mix(in oklch, var(--green) 30%, transparent);--blocked:oklch(38% .15 34);--blocked-dim:color-mix(in oklch, var(--blocked) 10%, transparent);--blocked-border:color-mix(in oklch, var(--blocked) 25%, transparent);--blocked-bg:color-mix(in oklch, var(--blocked) 10%, var(--surface));--blue:var(--accent);--blue-dim:var(--accent-dim);--blue-border:var(--accent-border);--yellow:oklch(52% .12 80);--yellow-dim:color-mix(in oklch, var(--yellow) 10%, transparent);--yellow-border:color-mix(in oklch, var(--yellow) 30%, transparent);--purple:oklch(46% .15 300);--purple-dim:color-mix(in oklch, var(--purple) 10%, transparent);--purple-border:color-mix(in oklch, var(--purple) 30%, transparent);--sans:system-ui, -apple-system, "Segoe UI", sans-serif;--mono:"JetBrains Mono", "Fira Code", "Cascadia Code", monospace}}@layer base{*{box-sizing:border-box;margin:0;padding:0}.app-body{background:var(--bg);color:var(--text);font-family:var(--sans);min-height:100dvh;font-size:.8125rem;line-height:1.5}.site-header{border-bottom:1px solid var(--border);align-items:center;gap:1.5rem;padding:.75rem 1.75rem;display:flex}.site-logo{letter-spacing:.05em;color:var(--text-bright);border:none;font-size:.875rem;font-weight:700;text-decoration:none}.site-logo-accent{color:var(--accent)}.site-nav{gap:1.25rem;margin-inline-start:auto;display:flex}.site-nav-link{color:var(--muted);border:none;font-size:.75rem;text-decoration:none;transition:color .15s}.site-nav-link:hover{color:var(--text)}.site-main{max-width:53.75rem;margin:0 auto;padding:2rem 1.75rem}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}.skip-link{background:var(--surface);color:var(--accent);border:2px solid var(--accent);z-index:100;border-radius:3px;padding:.4rem .8rem;font-size:.82rem;font-weight:600;text-decoration:none;position:absolute;top:-100%;left:1rem}.skip-link:focus{top:.5rem}}@layer utilities{.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}@layer components{.card{border:1px solid var(--border);background:var(--surface);border-radius:.375rem;overflow:hidden}.card-header{background:var(--surface-header);border-bottom:1px solid var(--border);color:var(--muted);text-transform:uppercase;letter-spacing:.09em;align-items:center;gap:.5rem;padding:.375rem .875rem;font-size:.625rem;display:flex}.card-body{padding:.75rem .875rem}.demo-btn{background:var(--border);border:1px solid var(--border);color:var(--text);font-family:var(--mono);cursor:pointer;border-radius:.25rem;padding:.4375rem .875rem;font-size:.75rem;transition:background .15s}.demo-btn:hover{background:var(--text-dim,var(--border))}.lab-btn{cursor:pointer;font-size:1rem;font-family:var(--mono);background:var(--border);border:1px solid var(--border);color:var(--text);border-radius:.25rem;padding:.5rem 1.5rem;transition:background .15s}.lab-btn:hover{background:var(--text-dim,var(--border))}.lab-btn-row{text-align:center;margin-top:1rem}csp-creature{display:block}.creature-panel{margin-block:0}.creature-row{border:1px solid var(--border);border-radius:6px;grid-template-columns:1fr 1fr;gap:0;margin-block-end:.75rem;display:grid;overflow:hidden}.creature-row .creature-panel{border:none;border-radius:0;padding:1rem}.creature-row .creature-panel+.creature-panel{border-left:1px solid var(--border-dim)}.creature-row .creature-panel.ran{background:var(--safe-bg)}.creature-row .creature-panel.blocked,.creature-row .creature-panel.xss{background:var(--blocked-bg)}.creature-stage{align-items:center;gap:1rem;min-height:2.5rem;display:flex}.creature{color:var(--muted);white-space:pre;font-size:1.125rem;line-height:1;transition:color .2s}.creature.ran{color:var(--green);animation:.4s ease-out creature-bounce}.creature.blocked{color:var(--blocked);animation:.4s ease-out creature-shake}.creature.xss{color:var(--blocked);animation:.4s ease-out creature-bounce}.creature-speech{color:var(--muted);opacity:0;font-size:.75rem;transition:opacity .3s .2s}.creature-speech.ran{color:var(--green);opacity:1}.creature-speech.blocked,.creature-speech.xss{color:var(--blocked);opacity:1}@keyframes creature-bounce{0%{transform:translateY(0)}30%{transform:translateY(-6px)}60%{transform:translateY(2px)}to{transform:translateY(0)}}@keyframes creature-shake{0%{transform:translate(0)}20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}to{transform:translate(0)}}.mode-strip{border-top:1px solid var(--border-dim);margin-block-end:1rem;display:flex}.mode-tab{font-family:var(--sans);border:none;border-right:1px solid var(--border-dim);color:var(--text-3);cursor:pointer;background:0 0;padding:.55rem 1.1rem;font-size:.8rem;text-decoration:none;transition:color .1s,background .1s;position:relative}.mode-tab:last-child{border-right:none}.mode-tab:hover{color:var(--text);background:var(--bg)}.mode-tab[aria-selected=true].unsafe{color:var(--blocked);background:0 0;font-weight:600}.mode-tab[aria-selected=true].unsafe:after{content:"";background:var(--blocked);height:2px;position:absolute;bottom:-1px;left:0;right:0}.mode-tab[aria-selected=true].safe{color:var(--green);background:0 0;font-weight:600}.mode-tab[aria-selected=true].safe:after{content:"";background:var(--green);height:2px;position:absolute;bottom:-1px;left:0;right:0}.script-box{margin-block-end:1rem}.script-box .card-header{color:var(--text-3)}.script-pre{overflow-x:auto}.script-code{font-family:var(--mono);color:var(--text-code);white-space:pre-wrap;word-break:break-all;font-size:.6875rem}.script-comment{color:var(--muted)}.nonce-token{color:var(--green);background:var(--green-dim);border-radius:.1875rem;padding:.0625rem .25rem}.nonce-missing{color:var(--blocked)}.hash-note{color:var(--muted);word-break:break-all;margin-block-start:.625rem;font-size:.6875rem}.info-box{margin-block-end:1rem}.info-box .card-header{color:var(--text-3)}.info-code{font-family:var(--mono);color:var(--text-2);word-break:break-all;font-size:.75rem;line-height:1.75}.info-box.muted .info-code{color:var(--muted)}.info-code-muted{color:var(--muted);font-style:normal}.report-panel{font-family:var(--mono);font-size:.6875rem;line-height:1.7;display:block}.report-panel-skeleton{flex-direction:column;gap:.25rem;display:flex}.skeleton-field{align-items:baseline;gap:.5rem;display:flex}.skeleton-key{color:var(--text-3);flex-shrink:0;min-width:11rem}.skeleton-bar{background:var(--border);border-radius:2px;height:.65rem;animation:1.6s ease-in-out infinite rp-pulse}.skeleton-bar--xs{width:2rem}.skeleton-bar--sm{width:4rem}.skeleton-bar--md{width:7rem}.skeleton-bar--lg{width:12rem}.skeleton-bar--xl{width:18rem}@keyframes rp-pulse{0%,to{opacity:.6}50%{opacity:1}}.notice{border-left:2px solid var(--accent);background:var(--accent-dim);color:var(--text-2);margin-top:.5rem;padding:.5rem .75rem;font-size:.6875rem;line-height:1.55}.notice strong{font-family:var(--mono);color:var(--accent);font-weight:600}.report-json{white-space:pre-wrap;word-break:break-all;display:block}.j-line{align-items:baseline;display:flex}.j-line-prefix{flex-shrink:0}.j-line-value{word-break:break-all;flex:1;min-width:0}.j-key{color:var(--accent)}.j-string{color:var(--green)}.j-keyword{color:var(--blocked)}.j-url{color:var(--text-2)}.j-number{color:var(--yellow)}.j-punct{color:var(--muted)}.j-line-focus{background:color-mix(in oklch, var(--accent) 8%, transparent);border-left:2px solid var(--accent);margin-inline-start:-.75rem;padding-inline-start:calc(.75rem - 2px)}.j-line-focus .j-key,.j-line-focus .j-string,.j-line-focus .j-url,.j-line-focus .j-keyword{font-weight:600}.demo-surface{display:contents}.demo-box{border-left:3px solid var(--border);margin-block-end:1rem}.input-row{align-items:center;gap:.5rem;display:flex}.demo-input{border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:.875rem;font-family:var(--mono);border-radius:.25rem;flex:1;padding:.375rem .625rem}.output{margin-block-end:1rem}.output-code{font-family:var(--mono);color:var(--text-code);word-break:break-all;font-size:.6875rem}.back{color:var(--muted);border:none;margin-block-end:1.25rem;font-size:.6875rem;text-decoration:none;transition:color .15s;display:inline-block}.back:hover{color:var(--text)}.example-header{margin-block-end:1.25rem}.example-title{color:var(--text-bright);margin-block-end:.375rem;font-size:1.0625rem;font-weight:700}.example-desc{color:var(--text);font-size:.75rem;line-height:1.65}.example-desc-code{font-family:var(--mono);color:var(--yellow);font-size:.6875rem}.row{flex-direction:column;align-items:flex-start;gap:.75rem;margin-block-end:1rem;display:flex}.demo-panel{border:1px solid var(--border);background:var(--surface);border-radius:0;margin-block-end:.75rem;overflow:hidden}.demo-row{border-bottom:1px solid var(--border-dim);padding:.5rem .75rem}.demo-row:first-child{background:var(--surface-2)}.demo-row-label{font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-block-end:.25rem;font-size:.5625rem}.demo-row-value{font-family:var(--mono);color:var(--text-2);word-break:break-all;font-size:.75rem;line-height:1.55}.demo-row-value.pre{white-space:pre-wrap}.demo-row-value.muted{color:var(--muted);font-style:italic}.demo-divider{background:var(--border);height:2px;transition:background .2s,opacity .2s}.demo-divider.blocked,.demo-divider.xss{background:var(--blocked);opacity:.5}.demo-divider.ran{background:var(--green);opacity:.5}.demo-result{background:oklch(92% 0 0);padding:.875rem .75rem;transition:background .2s}.demo-result.ran,.demo-result.blocked,.demo-result.xss{background:oklch(92% 0 0)}.demo-result .creature-panel{background:0 0;border:none;border-radius:0;margin:0}.demo-result .creature-panel .card-body{padding:0}.demo-result .creature-row{border:none;border-radius:0;grid-template-columns:1fr 1fr;gap:0;margin-block-end:0;display:grid}.demo-result .creature-row .creature-panel{padding:0}.demo-result .creature-row .creature-panel+.creature-panel{border-left:1px solid var(--border-dim);padding-left:.75rem}.demo-result .creature-row .creature-panel.ran,.demo-result .creature-row .creature-panel.blocked,.demo-result .creature-row .creature-panel.xss{background:0 0}.demo-result.demo-result-dual{grid-template-columns:1fr 1fr;padding:0;display:grid}.dual-creature-col{padding:.875rem .75rem}.dual-creature-col+.dual-creature-col{border-left:1px solid var(--muted)}.dual-creature-label{font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);margin-block-end:.4rem;font-size:.5625rem}.console-hint{color:var(--muted);margin-block-start:.5rem;font-size:.75rem}.hero{border-bottom:1px solid var(--border);margin-block-end:1.25rem;padding:2rem 0 1.75rem}.hero-title{font-family:var(--sans);letter-spacing:-.02em;color:var(--text-bright);margin-block-end:.45rem;font-size:1.5rem;font-weight:700;line-height:1.2}.hero-sub{font-family:var(--sans);color:var(--text-2);font-size:.9rem;line-height:1.55}.example-grid{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.example-card{background:var(--surface);border:1px solid var(--border);border-radius:0;padding:.875rem 1rem;text-decoration:none;transition:border-color .12s,background .12s;display:block}.example-card:hover{background:var(--surface-2);border-color:var(--border)}.card-title{font-family:var(--sans);color:var(--text-bright);margin-block-end:.15rem;font-size:.875rem;font-weight:600}.card-directive{font-family:var(--mono);color:var(--accent);margin-block-end:.3rem;font-size:.7rem;display:block}.card-desc{font-family:var(--sans);color:var(--text-3);font-size:.78rem;line-height:1.45}.card-desc code{font-family:var(--mono);color:var(--accent);font-size:.75em}.reporting-section{margin-block-start:1.75rem}.reporting-section-heading{letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-block-end:.6rem;font-size:.7rem;font-weight:600}}@layer examples;