:root{--color-bg:#f6f7f9;--color-surface:#fff;--color-surface-alt:#eef0f4;--color-border:#dfe3ea;--color-text:#14171f;--color-text-muted:#5b6373;--color-primary:#4338ca;--color-on-primary:#fff;--color-danger:#b91c1c;--color-code-keyword:#6d28d9;--color-code-string:#0f766e;--color-code-number:#b45309;--color-code-name:#be123c;--color-code-attr:#1d4ed8;--radius:12px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--color-bg:#0f1117;--color-surface:#181b24;--color-surface-alt:#232735;--color-border:#2c3142;--color-text:#f2f4f8;--color-text-muted:#a3abbd;--color-primary:#a5b4fc;--color-on-primary:#14171f;--color-danger:#fca5a5;--color-code-keyword:#c4b5fd;--color-code-string:#5eead4;--color-code-number:#fcd34d;--color-code-name:#fda4af;--color-code-attr:#93c5fd}}*{box-sizing:border-box}html,body{overscroll-behavior:none}body{background:var(--color-bg);color:var(--color-text);margin:0;font-family:Poppins,Noto Sans TC,system-ui,sans-serif;font-size:1rem;line-height:1.5}.page{flex-direction:column;gap:32px;max-width:880px;margin:0 auto;padding:24px 16px 64px;display:flex}.intro{flex-direction:column;gap:8px;display:flex}h1{margin:0;font-size:1.75rem;font-weight:600}h2{margin:0;font-size:1.125rem;font-weight:600}p{color:var(--color-text-muted);margin:0}.buttons{flex-wrap:wrap;gap:8px;display:flex}button{border:1px solid var(--color-border);background:var(--color-surface-alt);min-height:44px;color:var(--color-text);font-variant-numeric:normal;cursor:pointer;border-radius:8px;padding:8px 16px;font-family:inherit;font-size:.875rem;font-weight:500;line-height:1.5}button:disabled{opacity:.5;cursor:default}button:hover:not(:disabled){border-color:var(--color-primary)}button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}button.primary{border-color:var(--color-primary);background:var(--color-primary);color:var(--color-on-primary)}.tabs{border-bottom:1px solid var(--color-border);gap:8px;display:flex}button.tab{color:var(--color-text-muted);background:0 0;border:0;border-bottom:2px solid #0000;border-radius:0}button.tab[aria-selected=true]{border-bottom-color:var(--color-primary);color:var(--color-primary)}.grid{grid-template-columns:1fr;gap:16px;display:grid}@media (width>=768px){.grid{gap:24px}}.card{border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);flex-direction:column;gap:16px;min-width:0;padding:24px;display:flex}.card-head{flex-direction:column;gap:4px;display:flex}.card-head p{font-size:.875rem}.card-title{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;display:flex}.example{flex-direction:column;gap:8px;min-width:0;display:flex}.stage{font-variant-numeric:tabular-nums;flex-wrap:wrap;align-items:center;gap:8px;min-height:64px;font-size:2rem;font-weight:600;line-height:1.2;display:flex}.stage>:first-child{margin-right:auto}.stage.hero{min-height:96px;font-size:3rem}.params{grid-template-columns:1fr;gap:12px 24px;display:grid}@media (width>=768px){.params{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}.field{flex-direction:column;gap:4px;min-width:0;font-size:.875rem;font-weight:500;display:flex}.field-label{justify-content:space-between;gap:8px;display:flex}.field-label output{color:var(--color-text-muted);font-variant-numeric:tabular-nums}.field input[type=text],.field select{border:1px solid var(--color-border);background-color:var(--color-surface-alt);width:100%;min-height:44px;color:var(--color-text);font:inherit;border-radius:8px;padding:8px 12px}.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%237b8494' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;padding-right:40px}.field input[type=range]{width:100%;min-height:44px;accent-color:var(--color-primary);margin:0}.field input:focus-visible,.field select:focus-visible,.toggle input:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.toggle{cursor:pointer;align-items:center;gap:8px;min-height:44px;font-size:.875rem;font-weight:500;display:flex}.toggle input{width:20px;height:20px;accent-color:var(--color-primary);margin:0}.stage .note{color:var(--color-text-muted);font-size:.875rem;font-weight:400}pre{background:var(--color-surface-alt);color:var(--color-text);border-radius:8px;margin:0;padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8125rem;line-height:1.6;overflow-x:auto}.token.comment{color:var(--color-text-muted);font-style:italic}.token.keyword,.token.builtin{color:var(--color-code-keyword)}.token.string,.token.attr-value{color:var(--color-code-string)}.token.number,.token.boolean{color:var(--color-code-number)}.token.tag,.token.class-name,.token.function{color:var(--color-code-name)}.token.attr-name,.token.property{color:var(--color-code-attr)}.token.punctuation,.token.operator,.token.script{color:var(--color-text)}.token.attr-value .token.punctuation{color:inherit}.demo-container{background:var(--color-surface-alt);border-radius:8px;padding:4px 12px}.demo-char{background:var(--color-primary);color:var(--color-on-primary);border-radius:6px;margin:0 2px}.demo-separator{color:var(--color-text-muted)}.demo-value{text-decoration:underline}.demo-number{padding:0 6px}.demo-number-slot{font-style:italic}