:root{--ink-900:#0c1720;--ink-800:#12212f;--ink-700:#1a2e40;--ink-600:#243d52;--ink-500:#35566f;--ink-400:#587790;--ink-300:#8ba2b4;--ink-200:#c3d0da;--paper-100:#fffdf8;--paper-200:#f8f5ee;--paper-300:#f0ebe0;--paper-400:#e5dccc;--cinnabar:#b5382a;--cinnabar-dark:#93291d;--cinnabar-tint:#f0d9d4;--celadon:#3d6a5c;--celadon-tint:#d9e5e0;--ochre:#9a6f22;--ochre-tint:#f0e5cc;--bg:var(--paper-200);--surface:var(--paper-100);--surface-sunken:var(--paper-300);--text:var(--ink-800);--text-soft:var(--ink-500);--text-faint:var(--ink-400);--text-inverse:var(--paper-100);--accent:var(--cinnabar);--line:#12212f1f;--line-strong:#12212f38;--font-serif:"Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", Georgia, serif;--font-sans:"Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;--font-mono:"IBM Plex Mono", "SF Mono", "Menlo", "Consolas", monospace;--step--1:.8rem;--step-0:1rem;--step-1:1.25rem;--step-2:1.563rem;--step-3:1.953rem;--step-4:2.441rem;--step-5:3.052rem;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--radius-sm:3px;--radius:6px;--radius-lg:10px;--shadow-sm:0 1px 2px #0c17200f;--shadow:0 2px 8px #0c172014, 0 1px 2px #0c17200d;--shadow-lg:0 12px 32px #0c17201f}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{background:var(--bg);min-width:320px;color:var(--text);font-family:var(--font-sans);font-size:var(--step-0);font-synthesis:none;-webkit-font-smoothing:antialiased;background-image:repeating-linear-gradient(135deg,#12212f04 0 1px,#0000 1px 5px);margin:0;line-height:1.65}h1,h2,h3,h4{font-family:var(--font-serif);letter-spacing:.01em;margin:0;font-weight:600;line-height:1.3}p{margin:0}a{color:var(--ink-700);text-underline-offset:3px}button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}:focus-visible{outline:2px solid var(--cinnabar);outline-offset:2px}.hidden{display:none!important}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-link{z-index:200;background:var(--ink-800);color:var(--text-inverse);border-radius:var(--radius);padding:10px 16px;text-decoration:none;transition:top .18s;position:fixed;top:-60px;left:16px}.skip-link:focus{top:12px}.seal{background:var(--cinnabar);width:2.15em;height:2.15em;color:var(--paper-100);font-family:var(--font-serif);letter-spacing:0;border-radius:2px;flex:none;place-items:center;font-size:.86em;font-weight:600;display:inline-grid;box-shadow:inset 0 0 0 1px #ffffff2e}.seal-sm{width:1.7em;height:1.7em;font-size:.78em}.eyebrow{align-items:center;gap:var(--space-2);font-family:var(--font-sans);font-size:var(--step--1);letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint);font-weight:600;display:inline-flex}.eyebrow:before{content:"";border-top:2px solid var(--cinnabar);width:14px;height:0}.rule-v{background:var(--line);align-self:stretch;width:1px}.rule-h{background:var(--line);border:0;height:1px;margin:0}.sheet{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}.code-plate{padding:var(--space-3) var(--space-4);background:var(--paper-100);border:1.5px solid var(--ink-700);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--step-4);letter-spacing:.22em;text-indent:.22em;color:var(--ink-800);box-shadow:3px 3px 0 var(--ink-700);align-items:center;gap:.08em;font-weight:600;display:inline-flex}.btn{justify-content:center;align-items:center;gap:var(--space-2);border-radius:var(--radius);font-size:var(--step-0);border:1px solid #0000;padding:11px 20px;font-weight:500;text-decoration:none;transition:background .16s,color .16s,border-color .16s,transform .16s;display:inline-flex}.btn:active:not(:disabled){transform:translateY(1px)}.btn-primary{background:var(--ink-700);color:var(--text-inverse)}.btn-primary:hover:not(:disabled){background:var(--ink-800)}.btn-accent{background:var(--cinnabar);color:var(--paper-100)}.btn-accent:hover:not(:disabled){background:var(--cinnabar-dark)}.btn-ghost{border-color:var(--line-strong);color:var(--ink-700);background:0 0}.btn-ghost:hover:not(:disabled){background:var(--paper-300)}.btn-text{color:var(--text-soft);font-size:var(--step--1);text-underline-offset:3px;background:0 0;border:0;padding:4px 6px;text-decoration:underline}.btn-text:hover{color:var(--cinnabar)}.btn-block{width:100%}.field{gap:var(--space-2);display:grid}.field-label{font-size:var(--step--1);letter-spacing:.04em;color:var(--text-soft);font-weight:600}.input,.textarea{background:var(--paper-100);border:1px solid var(--line-strong);border-radius:var(--radius);width:100%;padding:11px 13px;transition:border-color .16s,box-shadow .16s}.input:focus,.textarea:focus{border-color:var(--ink-500);outline:none;box-shadow:0 0 0 3px #35566f1f}.textarea{min-height:130px;font-family:var(--font-mono);font-size:var(--step--1);resize:vertical;line-height:1.7}.tag{font-size:var(--step--1);border-radius:999px;align-items:center;gap:5px;padding:2px 9px;font-weight:500;line-height:1.7;display:inline-flex}.tag-demo{background:var(--ochre-tint);color:var(--ochre)}.tag-live{background:var(--celadon-tint);color:var(--celadon)}.tag-muted{background:var(--paper-300);color:var(--text-faint)}.tag-guest{background:var(--cinnabar-tint);color:var(--cinnabar-dark)}.demo-banner{justify-content:center;align-items:center;gap:var(--space-2);padding:7px var(--space-4);background:var(--ochre-tint);color:var(--ochre);font-size:var(--step--1);letter-spacing:.04em;border-bottom:1px solid #9a6f2240;font-weight:600;display:flex}.notice{padding:10px var(--space-4);border-left:3px solid var(--line-strong);border-radius:0 var(--radius) var(--radius) 0;background:var(--paper-300);font-size:var(--step--1);color:var(--text-soft)}.notice-error{border-left-color:var(--cinnabar);background:var(--cinnabar-tint);color:var(--cinnabar-dark)}.notice-ok{border-left-color:var(--celadon);background:var(--celadon-tint);color:var(--celadon)}.empty-state{padding:var(--space-6) var(--space-4);text-align:center;color:var(--text-faint);font-size:var(--step--1)}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.rise{animation:.42s cubic-bezier(.22,.85,.3,1) both rise}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}
