*,*:before,*:after{box-sizing:border-box}*:not(dialog){margin:0}@media (prefers-reduced-motion: no-preference){html{interpolate-size:allow-keywords}}body{line-height:1.5}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}:root{color-scheme:light;--color-paper: oklch(97.2% .006 95);--color-paper-2: oklch(99.3% .004 95);--color-paper-3: oklch(93.5% .008 95);--color-ink: oklch(24% .012 60);--color-ink-2: oklch(49% .012 70);--color-ink-3: oklch(63% .01 70);--color-rule: oklch(83% .011 95);--color-accent: oklch(62% .165 145);--color-accent-strong: oklch(50% .135 148);--color-accent-ink: oklch(47% .13 148);--color-accent-tint: oklch(95.5% .03 145);--color-on-accent: oklch(99% .004 145);--color-warn: oklch(50% .11 62);--color-focus: oklch(56% .15 145);--color-accent-strong-hover: oklch(45% .13 148);--color-scrim: oklch(99.3% .004 95 / .9);--shadow-card: 0 1px 0 oklch(83% .011 95), 0 6px 18px oklch(24% .012 60 / .06);--shadow-preview: 0 2px 6px oklch(24% .012 60 / .2);--font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;--font-body: "Inter", -apple-system, system-ui, sans-serif;--font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;--text-xs: .75rem;--text-sm: .8125rem;--text-md: .9375rem;--text-lg: 1.0625rem;--text-xl: 1.375rem;--text-2xl: 1.75rem;--text-display: clamp(2.3rem, 8vw, 3.4rem);--space-3xs: .25rem;--space-2xs: .5rem;--space-xs: .75rem;--space-sm: 1rem;--space-md: 1.5rem;--space-lg: 2rem;--space-xl: 3rem;--space-2xl: 4.5rem;--space-3xl: 7rem;--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-in: cubic-bezier(.5, 0, .75, 0);--ease-in-out: cubic-bezier(.65, 0, .35, 1);--dur-short: .15s;--dur-med: .24s;--radius-card: 4px;--radius-input: 6px;--radius-pill: 999px;--rule-dash: 1px dashed var(--color-rule)}html{background:var(--color-paper);overflow-x:clip}body{font-family:var(--font-body);font-size:var(--text-md);max-width:680px;margin:0 auto;padding:0 var(--space-sm) var(--space-2xl);color:var(--color-ink);accent-color:var(--color-accent);overflow-x:clip;-webkit-text-size-adjust:100%}.masthead{background:var(--color-paper-2);margin:0 calc(var(--space-sm) * -1) var(--space-lg);padding:var(--space-md) var(--space-sm) calc(var(--space-md) + 9px);text-align:center;border:var(--rule-dash);border-top:0;--notch: 9px;-webkit-mask:radial-gradient(var(--notch) at 50% 100%,#0000 98%,#000) 0 0 / calc(var(--notch) * 2) 100% repeat-x;mask:radial-gradient(var(--notch) at 50% 100%,#0000 98%,#000) 0 0 / calc(var(--notch) * 2) 100% repeat-x}.brand{display:inline-flex;align-items:center;gap:var(--space-2xs);font-family:var(--font-display);font-weight:700;font-size:var(--text-xl);letter-spacing:-.01em;color:var(--color-ink);text-decoration:none}.brand-mark{width:26px;height:26px;border-radius:5px;background:var(--color-accent);color:var(--color-on-accent);display:grid;place-items:center;font-size:var(--text-md);font-weight:700}.masthead nav{display:flex;justify-content:center;gap:var(--space-2xs);margin-top:var(--space-sm)}.masthead nav a{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;padding:var(--space-3xs) var(--space-xs);border:1px solid transparent;border-radius:var(--radius-pill);color:var(--color-ink-2);text-decoration:none;transition:color var(--dur-short) var(--ease-out),background-color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out)}.masthead nav a:hover{color:var(--color-ink);background:var(--color-paper-3)}.masthead nav a[aria-current]{color:var(--color-accent-ink);border-color:var(--color-accent);background:var(--color-accent-tint)}.masthead nav a:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.page-header{margin-bottom:var(--space-lg)}.page-header h1{font-family:var(--font-display);font-size:var(--text-display);line-height:1.02;font-weight:700;letter-spacing:-.02em;margin-bottom:var(--space-2xs);overflow-wrap:anywhere}.page-header p{color:var(--color-ink-2);font-size:var(--text-lg);line-height:1.5;max-width:52ch}.mono-label{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--color-ink-2)}.picker{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs);margin-bottom:var(--space-sm);font-size:var(--text-sm)}.picker label{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--color-ink-2)}.picker select{font:inherit;font-size:var(--text-sm);padding:var(--space-3xs) var(--space-2xs);border:1px solid var(--color-rule);border-radius:var(--radius-input);background:var(--color-paper-2);color:var(--color-ink);cursor:pointer}.picker select:focus-visible{outline:2px solid var(--color-focus);outline-offset:1px}.picker .toggle{display:inline-flex;align-items:center;gap:var(--space-3xs);padding:var(--space-3xs) var(--space-2xs);border:1px solid var(--color-rule);border-radius:var(--radius-input);background:var(--color-paper-2);font-family:inherit;font-size:var(--text-sm);text-transform:none;letter-spacing:normal;color:var(--color-ink);cursor:pointer;-webkit-user-select:none;user-select:none}.picker .toggle-bold{font-weight:700}.picker .toggle:has(:checked){background:var(--color-ink);border-color:var(--color-ink);color:var(--color-paper)}.picker .toggle:focus-within{outline:2px solid var(--color-focus);outline-offset:1px}.picker .font-link{margin-left:auto;font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--color-accent-ink);text-decoration:none;border-bottom:1px dashed var(--color-accent);cursor:pointer}.picker .font-link:hover{color:var(--color-ink);border-bottom-color:var(--color-ink)}.text-toolbar{display:flex;justify-content:flex-end;margin-bottom:var(--space-3xs)}.text-link{background:none;border:0;padding:var(--space-3xs) var(--space-2xs);font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--color-ink-2);cursor:pointer;border-radius:3px}.text-link:hover{color:var(--color-ink);background:var(--color-paper-3)}textarea{width:100%;height:7rem;padding:var(--space-xs);font:var(--text-md) / 1.5 var(--font-body);border:1px solid var(--color-rule);border-radius:var(--radius-input);resize:vertical;background:var(--color-paper-2);color:var(--color-ink)}textarea:focus-visible{outline:2px solid var(--color-focus);outline-offset:1px}.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-sm) var(--space-md);margin:var(--space-md) 0}.controls label{display:flex;flex-direction:column;gap:var(--space-3xs);font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.07em;color:var(--color-ink-2)}.controls input[type=range]{width:100%}.controls .val{color:var(--color-ink);font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0;margin-left:var(--space-3xs)}.panel{position:relative;border:1px solid var(--color-rule);background:var(--color-paper-2);margin-top:var(--space-sm);box-shadow:var(--shadow-card)}.panel:before{content:"✂";position:absolute;top:-.62em;left:var(--space-md);padding:0 var(--space-3xs);background:var(--color-paper-2);color:var(--color-ink-3);font-size:var(--text-sm);line-height:1}.panel-body{padding:var(--space-md);display:flex;justify-content:center;border-top:var(--rule-dash);margin-top:.62em;overflow-x:auto}.paper{background:var(--color-paper-3);padding:0 40px;border-radius:var(--radius-card)}#preview{background:#fff;padding:8px;white-space:pre-wrap;width:384px;min-height:40px;color:#000;box-shadow:var(--shadow-preview);font-feature-settings:"calt" 1;overflow:hidden}#previewText{white-space:pre}.row{display:flex;gap:var(--space-xs);align-items:center;flex-wrap:wrap;margin-top:var(--space-md)}button{padding:var(--space-2xs) var(--space-sm);font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;background:var(--color-accent-strong);color:var(--color-on-accent);border:1px solid transparent;border-radius:var(--radius-input);cursor:pointer;transition:background-color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out)}button:hover{background:var(--color-accent-strong-hover)}button:active{transform:translateY(1px)}button:disabled{background:var(--color-paper-3);color:var(--color-ink-3);cursor:default}button:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}button.button-secondary{background:var(--color-paper-2);color:var(--color-ink-2);border-color:var(--color-rule)}button.button-secondary:hover{background:var(--color-accent-tint);color:var(--color-accent-ink);border-color:var(--color-accent)}small{color:var(--color-ink-2);font-family:var(--font-mono);font-size:var(--text-xs)}.site-footer{margin-top:var(--space-2xl);padding-top:var(--space-sm);border-top:var(--rule-dash)}.site-footer p{font-family:var(--font-mono);font-size:var(--text-xs);line-height:1.5;color:var(--color-ink-2);text-transform:uppercase;letter-spacing:.04em}@media (prefers-reduced-motion: reduce){*{transition-duration:.01ms!important}}