@layer canon.reset{*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;tab-size:4}body{font-family:var(--font-sans);font-size:var(--text-md);line-height:var(--leading-normal);color:var(--color-content);background-color:var(--color-surface);-webkit-font-smoothing:antialiased}img,video,svg{max-width:100%;display:block}button,input,select,textarea{font:inherit;color:inherit}input[type=checkbox],input[type=radio],progress{accent-color:var(--color-brand)}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}h1,h2,h3,h4,h5,h6{line-height:var(--leading-tight);font-weight:var(--weight-bold)}h1{font-family:var(--font-display);font-size:var(--text-3xl);letter-spacing:-.015em}h2{font-family:var(--font-display);font-size:var(--text-2xl);letter-spacing:-.01em}h3{font-size:var(--text-xl);letter-spacing:-.01em}h4{font-size:var(--text-lg)}h5{font-size:var(--text-md)}h6{font-size:var(--text-sm)}a{color:var(--color-brand);text-decoration-skip-ink:auto}nav a{color:var(--color-content-subtle);font-weight:var(--weight-medium);font-size:var(--text-sm);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);transition:color var(--duration-fast) var(--ease-default), background-color var(--duration-fast) var(--ease-default);text-decoration:none}nav a:hover{color:var(--color-content);background-color:var(--color-surface-raised)}@media (prefers-reduced-motion:no-preference){nav a{background-image:linear-gradient(var(--color-accent), var(--color-accent));transition:background-size var(--duration-normal) var(--ease-default), color var(--duration-fast) var(--ease-default), background-color var(--duration-fast) var(--ease-default);background-position:0 calc(100% - 1px);background-repeat:no-repeat;background-size:0% 2px}nav a:hover{background-size:100% 2px}}nav a[aria-current=page]{color:var(--color-content);box-shadow:inset 0 -2px 0 var(--color-accent);border-radius:var(--radius-sm) var(--radius-sm) 0 0}ul,ol{padding-inline-start:1.5em}:is(ul:has(input),ol:has(input)){padding-inline-start:0;list-style:none}li+li{margin-top:var(--space-xs)}blockquote{border-inline-start:3px solid var(--color-accent);padding:var(--space-xs) var(--space-lg);font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-content-subtle)}code,pre,kbd,samp{font-family:var(--font-mono)}code{background-color:var(--color-surface-sunken);border-radius:var(--radius-sm);padding:.125em .375em;font-size:.875em}pre{background-color:var(--color-surface-sunken);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-md);font-size:var(--text-sm);overflow-x:auto}pre code{font-size:inherit;background:0 0;padding:0}::selection{background-color:var(--color-accent-subtle)}:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}}@layer canon.tokens{:root{--space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2.5rem;--space-2xl:4rem;--text-xs:.75rem;--text-sm:.875rem;--text-md:1rem;--text-lg:1.125rem;--text-xl:1.5rem;--text-2xl:2rem;--text-3xl:3rem;--font-sans:"Avenir Next", Avenir, "Segoe UI Variable", "Segoe UI", "Helvetica Neue", sans-serif;--font-display:"Charter", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;--font-mono:ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;--color-brand:#1c1917;--color-brand-subtle:#f0eeed;--color-accent:#c2410c;--color-accent-subtle:#f7e9e3;--color-surface:#fdfcfb;--color-surface-raised:#f7f5f2;--color-surface-sunken:#f0ede9;--color-content:#1c1917;--color-content-subtle:#78716c;--color-content-inverse:#fff;--color-border:#e7e3de;--color-border-strong:#d3cec7;--color-success:#15803d;--color-warning:#a16207;--color-error:#b91c1c;--color-info:#1d4ed8;--color-success-subtle:#e6f0e8;--color-warning-subtle:#f4ede3;--color-error-subtle:#f8eae9;--color-info-subtle:#ebeef8;--width-prose:65ch;--width-content:768px;--width-wide:1200px;--radius-sm:.25rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-full:9999px;--shadow-sm:0 1px 2px #1c19170d;--shadow-md:0 2px 4px #1c19170d, 0 4px 8px #1c19170d;--shadow-lg:0 4px 8px #1c19170f, 0 12px 24px #1c191717;--weight-normal:400;--weight-medium:500;--weight-bold:600;--leading-tight:1.2;--leading-normal:1.5;--leading-loose:1.75;--ease-default:cubic-bezier(.4, 0, .2, 1);--duration-fast:.15s;--duration-normal:.2s;--duration-slow:.3s}[data-theme=dark]{--color-brand:#f5f4f2;--color-brand-subtle:#242220;--color-accent:#e8593a;--color-accent-subtle:#301a14;--color-surface:#12100e;--color-surface-raised:#1c1917;--color-surface-sunken:#0c0a09;--color-content:#f5f4f2;--color-content-subtle:#a8a29e;--color-content-inverse:#1c1917;--color-border:#2c2825;--color-border-strong:#44403c;--color-success:#4ade80;--color-warning:#fbbf24;--color-error:#f87171;--color-info:#60a5fa;--color-success-subtle:#132617;--color-warning-subtle:#31220c;--color-error-subtle:#371311;--color-info-subtle:#151f3e}}@layer canon.layouts{[data-layout=stack]{flex-direction:column;display:flex}[data-layout=row]{flex-direction:row;display:flex}[data-layout=row][data-wrap]{flex-wrap:wrap}[data-layout=grid]{display:grid}[data-layout=grid][data-cols="1"]{grid-template-columns:repeat(1,1fr)}[data-layout=grid][data-cols="2"]{grid-template-columns:repeat(2,1fr)}[data-layout=grid][data-cols="3"]{grid-template-columns:repeat(3,1fr)}[data-layout=grid][data-cols="4"]{grid-template-columns:repeat(4,1fr)}[data-layout=grid][data-cols=auto]{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}[data-layout=sidebar]{grid-template-columns:240px 1fr;min-height:100vh;display:grid}[data-layout=sidebar]>[data-slot=sidebar]{background-color:var(--color-surface-raised);border-right:1px solid var(--color-border);height:100vh;position:sticky;top:0;overflow-y:auto}[data-layout=sidebar]>[data-slot=main]{overflow-y:auto}[data-layout=centered]{width:100%;padding-inline:var(--space-md);margin-inline:auto}[data-layout=centered][data-width=prose]{max-width:var(--width-prose)}[data-layout=centered][data-width=content]{max-width:var(--width-content)}[data-layout=centered][data-width=wide],[data-layout=centered]:not([data-width]){max-width:var(--width-wide)}[data-layout=hero]{text-align:center;min-height:100svh;padding:var(--space-2xl) var(--space-md);flex-direction:column;justify-content:center;align-items:center;display:flex}[data-layout=split]{grid-template-columns:1fr 1fr;display:grid}[data-gap=xs]{gap:var(--space-xs)}[data-gap=sm]{gap:var(--space-sm)}[data-gap=md]{gap:var(--space-md)}[data-gap=lg]{gap:var(--space-lg)}[data-gap=xl]{gap:var(--space-xl)}[data-gap="2xl"]{gap:var(--space-2xl)}[data-align=start]{align-items:flex-start}[data-align=center]{align-items:center}[data-align=end]{align-items:flex-end}[data-align=stretch]{align-items:stretch}[data-justify=start]{justify-content:flex-start}[data-justify=center]{justify-content:center}[data-justify=end]{justify-content:flex-end}[data-justify=between]{justify-content:space-between}[data-justify=around]{justify-content:space-around}@media (max-width:1024px){[data-layout=grid][data-cols="4"]{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){[data-layout=grid][data-cols="3"],[data-layout=grid][data-cols="4"]{grid-template-columns:repeat(2,1fr)}[data-layout=split],[data-layout=sidebar]{grid-template-columns:1fr}[data-layout=sidebar]>[data-slot=sidebar]{border-right:none;border-bottom:1px solid var(--color-border);height:auto;position:static}}@media (max-width:480px){[data-layout=grid][data-cols="2"],[data-layout=grid][data-cols="3"],[data-layout=grid][data-cols="4"]{grid-template-columns:1fr}}}@layer canon.components{[data-component=button]{justify-content:center;align-items:center;gap:var(--space-xs);border-radius:var(--radius-md);font-weight:var(--weight-medium);cursor:pointer;white-space:nowrap;transition:background-color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);padding:var(--space-sm) var(--space-md);font-size:var(--text-md);border:1px solid #0000;text-decoration:none;display:inline-flex}[data-component=button][data-size=sm]{padding:var(--space-xs) var(--space-sm);font-size:var(--text-sm)}[data-component=button][data-size=lg]{padding:var(--space-md) var(--space-lg);font-size:var(--text-lg)}[data-component=button]:active{transform:translateY(1px)}[data-component=button]:not([data-variant]),[data-component=button][data-variant=primary]{background-color:var(--color-brand);color:var(--color-content-inverse)}[data-component=button][data-variant=primary]:hover,[data-component=button]:not([data-variant]):hover{background-color:color-mix(in srgb, var(--color-brand) 82%, var(--color-surface))}[data-component=button][data-variant=secondary]{background-color:var(--color-surface-raised);color:var(--color-content);border-color:var(--color-border-strong)}[data-component=button][data-variant=secondary]:hover{background-color:var(--color-surface-sunken)}[data-component=button][data-variant=ghost]{color:var(--color-content-subtle);background-color:#0000}[data-component=button][data-variant=ghost]:hover{background-color:var(--color-surface-raised);color:var(--color-content)}[data-component=button][data-variant=danger]{background-color:var(--color-error);color:var(--color-content-inverse)}[data-component=button][data-variant=danger]:hover{background-color:color-mix(in srgb, var(--color-error) 82%, var(--color-surface))}[data-component=button][data-variant=link]{color:var(--color-brand);text-underline-offset:3px;background-color:#0000;padding-inline:0;text-decoration:underline}[data-component=button]:disabled,[data-component=button][aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}[data-component=card]{background-color:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);flex-direction:column;display:flex;overflow:hidden}[data-component=card]>[data-slot=header]{padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--color-border);font-weight:var(--weight-medium)}[data-component=card]>[data-slot=header] :is(h1,h2,h3,h4,h5,h6),[data-component=card]>[data-slot=header] :is(h1,h2,h3,h4,h5,h6) *{font-family:var(--font-sans);font-size:var(--text-md);letter-spacing:0}[data-component=card]>[data-slot=media]{aspect-ratio:16/9;background-color:var(--color-surface-sunken);overflow:hidden}[data-component=card]>[data-slot=media] img{object-fit:cover;width:100%;height:100%}[data-component=card]>[data-slot=body]{padding:var(--space-lg);flex:1}[data-component=card]>[data-slot=footer]{padding:var(--space-md) var(--space-lg);border-top:1px solid var(--color-border);align-items:center;gap:var(--space-sm);background-color:var(--color-surface-sunken);display:flex}[data-component=card]:not(:has(>[data-slot])){padding:var(--space-lg)}[data-component=card][data-variant=featured]{border-color:var(--color-accent);box-shadow:var(--shadow-md)}[data-component=badge]{align-items:center;gap:var(--space-xs);width:fit-content;padding:.125rem var(--space-sm);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--weight-medium);white-space:nowrap;line-height:1.5;display:inline-flex}[data-component=badge]:not([data-variant]),[data-component=badge][data-variant=neutral]{background-color:var(--color-surface-raised);color:var(--color-content-subtle);border:1px solid var(--color-border)}[data-component=badge][data-variant=brand]{background-color:var(--color-brand-subtle);color:var(--color-brand)}[data-component=badge][data-variant=success]{background-color:var(--color-success-subtle);color:var(--color-success)}[data-component=badge][data-variant=warning]{background-color:var(--color-warning-subtle);color:color-mix(in srgb, var(--color-warning) 80%, black)}[data-component=badge][data-variant=error]{background-color:var(--color-error-subtle);color:var(--color-error)}[data-component=badge][data-variant=info]{background-color:var(--color-info-subtle);color:var(--color-info)}[data-component=input],[data-component=textarea],[data-component=select]{background-color:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);width:100%;color:var(--color-content);transition:border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);padding:var(--space-sm) var(--space-md);font-size:var(--text-md);display:block}[data-component=input][data-size=sm],[data-component=textarea][data-size=sm],[data-component=select][data-size=sm]{padding:var(--space-xs) var(--space-sm);font-size:var(--text-sm)}[data-component=input][data-size=lg],[data-component=textarea][data-size=lg],[data-component=select][data-size=lg]{padding:var(--space-md) var(--space-lg);font-size:var(--text-lg)}[data-component=input]:focus,[data-component=textarea]:focus,[data-component=select]:focus{border-color:var(--color-brand);box-shadow:0 0 0 3px color-mix(in srgb, var(--color-brand) 15%, transparent);outline:none}[data-component=input][data-state=error],[data-component=textarea][data-state=error]{border-color:var(--color-error)}[data-component=input][data-state=error]:focus,[data-component=textarea][data-state=error]:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--color-error) 15%, transparent)}[data-component=input][data-state=success],[data-component=textarea][data-state=success]{border-color:var(--color-success)}[data-component=textarea]{resize:vertical;min-height:100px}[data-component=select]{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-md) center;padding-right:var(--space-2xl);cursor:pointer}[data-component=topbar]{align-items:center;gap:var(--space-lg);padding:0 var(--space-lg);background-color:color-mix(in srgb, var(--color-surface) 85%, transparent);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--color-border);z-index:100;grid-template-columns:auto 1fr auto;height:60px;display:grid;position:sticky;top:0}[data-component=topbar]>[data-slot=brand]{align-items:center;gap:var(--space-sm);font-weight:var(--weight-bold);font-size:var(--text-lg);color:var(--color-content);text-decoration:none;display:flex}[data-component=topbar]>[data-slot=brand] a{color:inherit;text-decoration:none}[data-component=topbar]>[data-slot=nav]{align-items:center;gap:var(--space-xs);display:flex}[data-component=topbar]>[data-slot=actions]{align-items:center;gap:var(--space-sm);justify-content:flex-end;display:flex}[data-component=topbar]>[data-slot=menu]{display:none;position:relative}[data-component=topbar]>[data-slot=menu]>summary{cursor:pointer;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-md);font-size:var(--text-xl);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;line-height:1;list-style:none;display:inline-flex}[data-component=topbar]>[data-slot=menu]>summary::-webkit-details-marker{display:none}[data-component=topbar]>[data-slot=menu][open]>summary{background-color:var(--color-surface-raised)}[data-component=topbar]>[data-slot=menu]>nav{right:0;top:calc(100% + var(--space-sm));gap:var(--space-xs);min-width:240px;padding:var(--space-sm);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:150;flex-direction:column;display:flex;position:absolute}@media (max-width:640px){[data-component=topbar]{gap:var(--space-sm);height:auto;padding:var(--space-sm) var(--space-md);grid-template-columns:auto 1fr}[data-component=topbar]>[data-slot=brand]{grid-area:1/1/2/2}[data-component=topbar]>[data-slot=actions]{grid-area:1/2/2/3}[data-component=topbar]>[data-slot=nav]{gap:var(--space-md);flex-wrap:wrap;grid-area:2/1/3/3}}@media (max-width:768px){[data-component=topbar]>[data-slot=menu]{display:block}[data-component=topbar]:has(>[data-slot=menu])>[data-slot=nav]{display:none}[data-component=topbar]:has(>[data-slot=menu]){align-items:center;gap:var(--space-sm);height:60px;padding:0 var(--space-md);display:flex}[data-component=topbar]:has(>[data-slot=menu])>[data-slot=actions]{margin-left:auto}}[data-component=modal]{padding:var(--space-md);z-index:200;background-color:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}[data-component=modal]>[data-slot=panel]{background-color:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);flex-direction:column;width:100%;max-width:480px;max-height:90vh;display:flex;overflow:auto}[data-component=modal]>[data-slot=panel]>[data-slot=header]{padding:var(--space-lg);border-bottom:1px solid var(--color-border);font-weight:var(--weight-bold);font-size:var(--text-lg);justify-content:space-between;align-items:center;display:flex}[data-component=modal] [data-slot=header] :is(h1,h2,h3,h4,h5,h6){font-family:var(--font-sans);font-size:var(--text-lg);letter-spacing:0}[data-component=modal]>[data-slot=panel]>[data-slot=body]{padding:var(--space-lg);flex:1}[data-component=modal]>[data-slot=panel]>[data-slot=footer]{padding:var(--space-md) var(--space-lg);border-top:1px solid var(--color-border);justify-content:flex-end;gap:var(--space-sm);background-color:var(--color-surface-sunken);display:flex}[data-component=avatar]{border-radius:var(--radius-full);background-color:var(--color-brand-subtle);color:var(--color-brand);font-weight:var(--weight-bold);width:2.5rem;height:2.5rem;font-size:var(--text-sm);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;overflow:hidden}[data-component=avatar][data-size=sm]{width:2rem;height:2rem;font-size:var(--text-xs)}[data-component=avatar][data-size=lg]{width:3.5rem;height:3.5rem;font-size:var(--text-lg)}[data-component=avatar] img{object-fit:cover;width:100%;height:100%}[data-component=stat]{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--weight-bold);line-height:var(--leading-tight);letter-spacing:-.01em;display:block}[data-component=table]{border-collapse:collapse;width:100%;font-size:var(--text-sm);text-align:left}[data-component=table] th{color:var(--color-content-subtle);font-weight:var(--weight-medium);padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--color-border-strong)}[data-component=table] td{padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--color-border)}[data-component=table] tbody tr{transition:background-color var(--duration-fast) var(--ease-default)}[data-component=table] tbody tr:hover{background-color:var(--color-surface-raised)}@media (max-width:768px){[data-component=table]{display:block;overflow-x:auto}}[data-component=divider]{border:none;border-top:1px solid var(--color-border);margin:0}[data-component=divider][data-variant=strong]{border-top-color:var(--color-border-strong)}}@layer canon.utilities{.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}[data-truncate]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}[data-padding=xs]{padding:var(--space-xs)}[data-padding=sm]{padding:var(--space-sm)}[data-padding=md]{padding:var(--space-md)}[data-padding=lg]{padding:var(--space-lg)}[data-padding=xl]{padding:var(--space-xl)}[data-padding="2xl"]{padding:var(--space-2xl)}[data-tone=subtle]{color:var(--color-content-subtle)}[data-tone=brand]{color:var(--color-brand)}[data-tone=accent]{color:var(--color-accent)}[data-tone=success]{color:var(--color-success)}[data-tone=error]{color:var(--color-error)}[data-mono]{font-family:var(--font-mono)}[data-full]{width:100%}@media (min-width:769px){[data-hide=desktop]{display:none}}@media (max-width:768px){[data-hide=mobile]{display:none}}@media (prefers-reduced-motion:no-preference){[data-motion=rise]{animation:canon-rise .48s var(--ease-default) both}[data-motion=float]{animation:6s ease-in-out infinite canon-float}[data-motion=pulse]{animation:canon-pulse 2.4s var(--ease-default) infinite}[data-motion=lift]{transition:transform var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default)}[data-motion=lift]:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}}@keyframes canon-rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes canon-float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes canon-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}}
[data-component=topbar]>[data-slot=brand]{font-family:var(--font-display);font-size:var(--text-xl);gap:0}pre{background:var(--color-surface-sunken);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-md);font-size:var(--text-sm);overflow-x:auto}code{font-family:var(--font-mono)}table{border-collapse:collapse;width:100%;font-size:var(--text-sm)}th,td{text-align:left;padding:var(--space-sm);border-bottom:1px solid var(--color-border)}th{color:var(--color-content-subtle);font-weight:var(--weight-medium)}.demo{border:1px dashed var(--color-border-strong);border-radius:var(--radius-md);padding:var(--space-md)}.demo-tile [data-layout]>div{background:var(--color-brand-subtle);border-radius:var(--radius-sm);padding:var(--space-sm);text-align:center;font-size:var(--text-sm)}.playground-editor{font-family:var(--font-mono);font-size:var(--text-sm);resize:vertical;min-height:480px}.playground-preview{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);width:100%;min-height:480px}.swatch{border-radius:var(--radius-sm);border:1px solid var(--color-border);vertical-align:middle;width:1.25rem;height:1.25rem;margin-right:var(--space-sm);display:inline-block}