@fractaldesign/fractalstyler 0.0.0-stage → 0.9.0

package/dist/css/fractalstyler.min.css

@@ -0,0 +1,2 @@
+/*! fractalstyler v0.9.0 | MIT | compose in markup */
+:root{--shade-xs: var(--shadow-rim), 0 1px 1px rgb(var(--shadow-color) / 0.14), 0 0px 0px rgb(var(--shadow-color) / 0);--shade-sm: var(--shadow-rim), 0 1px 2px rgb(var(--shadow-color) / 0.12), 0 1px 3px rgb(var(--shadow-color) / 0.02);--shade-md: var(--shadow-rim), 0 2px 4px rgb(var(--shadow-color) / 0.09), 0 3px 6px rgb(var(--shadow-color) / 0.04);--shade-bs: var(--shadow-rim), 0 2px 4px rgb(var(--shadow-color) / 0.06), 0 6px 14px rgb(var(--shadow-color) / 0.06);--shade-lg: var(--shadow-rim), 0 4px 8px rgb(var(--shadow-color) / 0.04), 0 12px 24px rgb(var(--shadow-color) / 0.08);--shade-xl: var(--shadow-rim), 0 6px 12px rgb(var(--shadow-color) / 0.03), 0 20px 36px rgb(var(--shadow-color) / 0.09);--shade-2xl: var(--shadow-rim), 0 8px 16px rgb(var(--shadow-color) / 0.02), 0 28px 48px rgb(var(--shadow-color) / 0.09);--shade-3xl: var(--shadow-rim), 0 12px 24px rgb(var(--shadow-color) / 0.02), 0 36px 64px rgb(var(--shadow-color) / 0.08)}@font-face{font-family:"General Sans";src:url("/fonts/generalsans.woff2") format("woff2");font-weight:300 700;font-style:normal;font-optical-sizing:auto}@font-face{font-family:"Satoshi";src:url("/fonts/satoshi.woff2") format("woff2");font-weight:300 800;font-style:normal;font-optical-sizing:auto}@font-face{font-family:"Stack Sans";src:url("/fonts/stacksans.woff2") format("woff2");font-weight:300 800;font-style:normal;font-optical-sizing:auto}[data-mode=dark]{color-scheme:dark;--white-fixed: #FFFFFF;--black-fixed: #171717;--bg: #101010;--bg-surface: #202021;--bg-panel: #1f1f20;--bg-sunken: #1f1f20;--bg-raised: #3a3a3a;--bg-extra: #111111;--bg-input: #1c1c1d;--bg-button: #171818;--text-primary: #EDF2F7;--text-secondary: #c7c7c7;--text-muted: #7c7c7c;--text-inverse: #7c7c7c;--state-surface:#7c7c7c;--state-hover: #4a4a4b;--state-selected: #666668;--border: #2f2f2f;--border-subtle: #1e1e1f;--border-strong: #7c7c7c;--theme-color: #2F9E44;--theme-color-alt: #36731d;--success: #34D399;--success-hover: #6EE7B7;--warning: #FBBF24;--warning-hover: #FCD34D;--danger: #b21a1a;--danger-hover: #FCA5A5;--info: #60A5FA;--info-hover: #93C5FD;--ring: rgba(16, 185, 129, 0.4);--shadow-color: 0 0 0;--shadow-umbra: rgb(0 0 0 / 0.50);--shadow-rim: inset 0 1px 0 rgba(255, 255, 255, 0.09);--shadow-xs: 0 1px 2px rgb(var(--shadow-color) / 0.14);--shadow-sm: 0 1px 2px rgb(var(--shadow-color) / 0.10), 0 2px 4px rgb(var(--shadow-color) / 0.06);--shadow-md: 0 2px 4px rgb(var(--shadow-color) / 0.06), 0 8px 16px rgb(var(--shadow-color) / 0.06);--shadow-bs: 0 2px 4px rgb(var(--shadow-color) / 0.06), 0 6px 14px rgb(var(--shadow-color) / 0.06);--shadow-lg: 0 4px 8px rgb(var(--shadow-color) / 0.06), 0 12px 24px rgb(var(--shadow-color) / 0.06);--shadow-xl: 0 8px 16px rgb(var(--shadow-color) / 0.06), 0 20px 36px rgb(var(--shadow-color) / 0.06);--shadow-2xl: 0 12px 24px rgb(var(--shadow-color) / 0.06), 0 28px 48px rgb(var(--shadow-color) / 0.06);--shadow-3xl: 0 16px 32px rgb(var(--shadow-color) / 0.06), 0 36px 64px rgb(var(--shadow-color) / 0.06)}[data-mode=light]{color-scheme:light;--white-fixed: #FFFFFF;--black-fixed: #171717;--bg: #ffffff;--bg-surface: #FBFBF9;--bg-panel: #FBFBF9;--bg-sunken: #F7F6F0;--bg-raised: #F4F4F5;--bg-extra: rgb(247, 248, 249);--bg-input: #f8f9fa;--bg-button: #CED8D3;--text-primary: #262627;--text-secondary: #777777;--text-muted: #a3a4a7;--text-inverse: #ffffff;--state-surface: #F2EFE9;--state-hover: #ECE7DF;--state-selected: #E4DFD5;--border: #d8d8d8;--border-subtle: #eceaea;--border-strong: #cfcfcf;--theme-color: #ff4400;--theme-color-alt: #be2f00;--theme-color-sub: #feb18a;--success: #10B981;--success-hover: #059669;--warning: #F59E0B;--warning-hover: #D97706;--danger: #bf2a2a;--danger-hover: #DC2626;--info: #3B82F6;--info-hover: #2563EB;--ring: rgba(0, 127, 78, 0.35);--shadow-color: 15 13 42;--shadow-rim: transparent;--shadow-xs: 0 1px 2px rgb(var(--shadow-color) / 0.14);--shadow-sm: 0 1px 2px rgb(var(--shadow-color) / 0.10), 0 2px 4px rgb(var(--shadow-color) / 0.06);--shadow-md: 0 2px 4px rgb(var(--shadow-color) / 0.06), 0 8px 16px rgb(var(--shadow-color) / 0.06);--shadow-bs: 0 2px 4px rgb(var(--shadow-color) / 0.06), 0 6px 14px rgb(var(--shadow-color) / 0.06);--shadow-lg: 0 4px 8px rgb(var(--shadow-color) / 0.06), 0 12px 24px rgb(var(--shadow-color) / 0.06);--shadow-xl: 0 8px 16px rgb(var(--shadow-color) / 0.06), 0 20px 36px rgb(var(--shadow-color) / 0.06);--shadow-2xl: 0 12px 24px rgb(var(--shadow-color) / 0.06), 0 28px 48px rgb(var(--shadow-color) / 0.06);--shadow-3xl: 0 16px 32px rgb(var(--shadow-color) / 0.06), 0 36px 64px rgb(var(--shadow-color) / 0.06)}:root{--font-sans: "Timeless Sans", sans-serif;--timeless-sans: "Timeless Sans", sans-serif;--timeless-grotesk: "Timeless Grotesk", sans-serif;--text-scaling: 1.25;--text-xs: 0.67rem;--text-sm: 0.75rem;--text-md: 0.875rem;--text-bs: 1rem;--text-lg: calc(var(--text-bs) * var(--text-scaling));--text-xl: calc(var(--text-lg) * var(--text-scaling));--text-2xl: calc(var(--text-xl) * var(--text-scaling));--text-3xl: calc(var(--text-2xl) * var(--text-scaling));--text-4xl: calc(var(--text-3xl) * var(--text-scaling));--text-5xl: calc(var(--text-4xl) * var(--text-scaling));--unit-space: 0.25rem;--space-xs: var(--unit-space);--space-sm: calc(var(--unit-space) * 2);--space-md: calc(var(--unit-space) * 3);--space-bs: calc(var(--unit-space) * 4);--space-lg: calc(var(--unit-space) * 6);--space-xl: calc(var(--unit-space) * 8);--space-2xl: calc(var(--unit-space) * 12);--space-3xl: calc(var(--unit-space) * 16);--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-bs: 16px;--radius-lg: 32px;--radius-full: 9999px;--control-h-sm: 21px;--control-h-bs: 32px;--control-h-lg: 38px;--avatar-size: 32px;--switch-w: 40px;--switch-h: 22px;--switch-thumb: 16px;--transin1: cubic-bezier(0.470, 0.000, 0.745, 0.715);--transin2: cubic-bezier(0.550, 0.055, 0.675, 0.190);--transin3: cubic-bezier(0.755, 0.050, 0.855, 0.060);--transout1: cubic-bezier(0.390, 0.575, 0.565, 1.000);--transout2: cubic-bezier(0.215, 0.610, 0.355, 1.000);--transout3: cubic-bezier(0.230, 1.000, 0.320, 1.000);--speed0: 50ms;--speed1: 90ms;--speed2: 140ms;--speed3: 220ms;--motionin1: var(--speed0) var(--transin1);--motionout1: var(--speed1) var(--transout1);--motionin2: var(--speed2) var(--transin2);--motionout2: var(--speed2) var(--transout2);--motionin3: var(--speed3) var(--transin3);--motionout3: var(--speed3) var(--transout3);--header-height: 64px;--footer-height: 32px;--fit-height: calc(var(--header-height) + var(--footer-height));--prose-clamp: 65ch;--content-clamp: 1600px;--app-inline: var(--space-lg);--card-min: 240px;--height-sm: 16px;--height-md: 20px;--height-bs: 27px;--height-lg: 32px;--sidebar-width: 280px;--sidebar-width-left: 280px;--sidebar-width-right: 280px;--z-sticky: 100;--z-raised: 200;--z-modal: 300;--z-toast: 500;--greenpop1: #70e000;--greenpop2: #00df89;--greenpop3: #69ff97;--greenpop4: #00e676;--orangepop1: #ff7700;--orangepop2: #ff4400;--orangepop3: #ff0055;--orangepop4: #ff5e36;--orangepop5: #ff9966;--orangepop6: #ff9f1c}@font-face{font-family:"Google Sans Flex";src:url("/fonts/GoogleSansFlex.woff2") format("woff2");font-weight:300 800;font-style:normal;font-optical-sizing:auto}@font-face{font-family:"Google Sans Flex";src:url("/fonts/GoogleSansFlex.woff2") format("woff2");font-weight:300 800;font-style:italic;font-optical-sizing:auto}@font-face{font-family:"Google Sans";src:url("/fonts/GoogleSans.woff2") format("woff2");font-weight:400 700;font-style:normal;font-optical-sizing:auto}@font-face{font-family:"Google Sans";src:url("/fonts/GoogleSans-Italic.woff2") format("woff2");font-weight:400 700;font-style:italic;font-optical-sizing:auto}@font-face{font-family:"Google Sans Code";src:url("/fonts/googlesanscode.woff2") format("woff2");font-weight:300 800;font-style:normal;font-optical-sizing:auto}@font-face{font-family:"Timeless Sans";src:url("/fonts/TimelessSansVF.woff2") format("woff2");font-weight:300 800;font-style:normal}@font-face{font-family:"Timeless Sans";src:url("/fonts/TimelessSansVF.woff2") format("woff2");font-weight:300 800;font-style:italic}@font-face{font-family:"Timeless Grotesk";src:url("/fonts/TimelessSansVF.woff2") format("woff2");font-weight:300 800;font-style:normal}@font-face{font-family:"Timeless Grotesk";src:url("/fonts/TimelessSansVF.woff2") format("woff2");font-weight:300 800;font-style:italic}*,*::before,*::after{box-sizing:border-box}*{margin:0}body,html{color:var(--text-primary);font-family:var(--font-sans);font-size:var(--text-bs);background:var(--bg-surface);box-sizing:border-box;margin:0;padding:0}img,video,svg{display:block;max-width:100%}button,input,select,textarea{font:inherit;color:inherit}p,li,h6,h5,h4,h3,h2,h1{margin:0}p,li{text-wrap:pretty}h1,h2,h3,h4,h5{text-wrap:balance}a{color:inherit;text-decoration:none}.bdr{border:1px solid red}ul,ol{list-style-type:none}::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}html.mode-wipe::view-transition-old(root),html.mode-wipe::view-transition-new(root){animation:none}.gap-xs{gap:var(--space-xs)}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-bs{gap:var(--space-bs)}.gap-lg{gap:var(--space-lg)}.gap-xl{gap:var(--space-xl)}.gap-2xl{gap:var(--space-2xl)}.gap-3xl{gap:var(--space-3xl)}.rgap-xs{row-gap:var(--space-xs)}.rgap-sm{row-gap:var(--space-sm)}.rgap-md{row-gap:var(--space-md)}.rgap-bs{row-gap:var(--space-bs)}.rgap-lg{row-gap:var(--space-lg)}.rgap-xl{row-gap:var(--space-xl)}.rgap-2xl{row-gap:var(--space-2xl)}.rgap-3xl{row-gap:var(--space-3xl)}.cgap-xs{column-gap:var(--space-xs)}.cgap-sm{column-gap:var(--space-sm)}.cgap-md{column-gap:var(--space-md)}.cgap-bs{column-gap:var(--space-bs)}.cgap-lg{column-gap:var(--space-lg)}.cgap-xl{column-gap:var(--space-xl)}.cgap-2xl{column-gap:var(--space-2xl)}.cgap-3xl{column-gap:var(--space-3xl)}.pad-xs{padding:var(--space-xs)}.pad-sm{padding:var(--space-sm)}.pad-md{padding:var(--space-md)}.pad-bs{padding:var(--space-bs)}.pad-lg{padding:var(--space-lg)}.pad-xl{padding:var(--space-xl)}.pad-2xl{padding:var(--space-2xl)}.pad-3xl{padding:var(--space-3xl)}.px-xs{padding-inline:var(--space-xs)}.px-sm{padding-inline:var(--space-sm)}.px-md{padding-inline:var(--space-md)}.px-bs{padding-inline:var(--space-bs)}.px-lg{padding-inline:var(--space-lg)}.px-xl{padding-inline:var(--space-xl)}.px-2xl{padding-inline:var(--space-2xl)}.px-3xl{padding-inline:var(--space-3xl)}.py-xs{padding-block:var(--space-xs)}.py-sm{padding-block:var(--space-sm)}.py-md{padding-block:var(--space-md)}.py-bs{padding-block:var(--space-bs)}.py-lg{padding-block:var(--space-lg)}.py-xl{padding-block:var(--space-xl)}.py-2xl{padding-block:var(--space-2xl)}.py-3xl{padding-block:var(--space-3xl)}.pt-xs{padding-top:var(--space-xs)}.pt-sm{padding-top:var(--space-sm)}.pt-md{padding-top:var(--space-md)}.pt-bs{padding-top:var(--space-bs)}.pt-lg{padding-top:var(--space-lg)}.pt-xl{padding-top:var(--space-xl)}.pt-2xl{padding-top:var(--space-2xl)}.pt-3xl{padding-top:var(--space-3xl)}.pr-xs{padding-right:var(--space-xs)}.pr-sm{padding-right:var(--space-sm)}.pr-md{padding-right:var(--space-md)}.pr-bs{padding-right:var(--space-bs)}.pr-lg{padding-right:var(--space-lg)}.pr-xl{padding-right:var(--space-xl)}.pr-2xl{padding-right:var(--space-2xl)}.pr-3xl{padding-right:var(--space-3xl)}.pb-xs{padding-bottom:var(--space-xs)}.pb-sm{padding-bottom:var(--space-sm)}.pb-md{padding-bottom:var(--space-md)}.pb-bs{padding-bottom:var(--space-bs)}.pb-lg{padding-bottom:var(--space-lg)}.pb-xl{padding-bottom:var(--space-xl)}.pb-2xl{padding-bottom:var(--space-2xl)}.pb-3xl{padding-bottom:var(--space-3xl)}.pl-xs{padding-left:var(--space-xs)}.pl-sm{padding-left:var(--space-sm)}.pl-md{padding-left:var(--space-md)}.pl-bs{padding-left:var(--space-bs)}.pl-lg{padding-left:var(--space-lg)}.pl-xl{padding-left:var(--space-xl)}.pl-2xl{padding-left:var(--space-2xl)}.pl-3xl{padding-left:var(--space-3xl)}.mar-xs{margin:var(--space-xs)}.mar-sm{margin:var(--space-sm)}.mar-md{margin:var(--space-md)}.mar-bs{margin:var(--space-bs)}.mar-lg{margin:var(--space-lg)}.mar-xl{margin:var(--space-xl)}.mar-2xl{margin:var(--space-2xl)}.mar-3xl{margin:var(--space-3xl)}.mx-xs{margin-inline:var(--space-xs)}.mx-sm{margin-inline:var(--space-sm)}.mx-md{margin-inline:var(--space-md)}.mx-bs{margin-inline:var(--space-bs)}.mx-lg{margin-inline:var(--space-lg)}.mx-xl{margin-inline:var(--space-xl)}.mx-2xl{margin-inline:var(--space-2xl)}.mx-3xl{margin-inline:var(--space-3xl)}.my-xs{margin-block:var(--space-xs)}.my-sm{margin-block:var(--space-sm)}.my-md{margin-block:var(--space-md)}.my-bs{margin-block:var(--space-bs)}.my-lg{margin-block:var(--space-lg)}.my-xl{margin-block:var(--space-xl)}.my-2xl{margin-block:var(--space-2xl)}.my-3xl{margin-block:var(--space-3xl)}.mt-xs{margin-top:var(--space-xs)}.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-bs{margin-top:var(--space-bs)}.mt-lg{margin-top:var(--space-lg)}.mt-xl{margin-top:var(--space-xl)}.mt-2xl{margin-top:var(--space-2xl)}.mt-3xl{margin-top:var(--space-3xl)}.mr-xs{margin-right:var(--space-xs)}.mr-sm{margin-right:var(--space-sm)}.mr-md{margin-right:var(--space-md)}.mr-bs{margin-right:var(--space-bs)}.mr-lg{margin-right:var(--space-lg)}.mr-xl{margin-right:var(--space-xl)}.mr-2xl{margin-right:var(--space-2xl)}.mr-3xl{margin-right:var(--space-3xl)}.mb-xs{margin-bottom:var(--space-xs)}.mb-sm{margin-bottom:var(--space-sm)}.mb-md{margin-bottom:var(--space-md)}.mb-bs{margin-bottom:var(--space-bs)}.mb-lg{margin-bottom:var(--space-lg)}.mb-xl{margin-bottom:var(--space-xl)}.mb-2xl{margin-bottom:var(--space-2xl)}.mb-3xl{margin-bottom:var(--space-3xl)}.ml-xs{margin-left:var(--space-xs)}.ml-sm{margin-left:var(--space-sm)}.ml-md{margin-left:var(--space-md)}.ml-bs{margin-left:var(--space-bs)}.ml-lg{margin-left:var(--space-lg)}.ml-xl{margin-left:var(--space-xl)}.ml-2xl{margin-left:var(--space-2xl)}.ml-3xl{margin-left:var(--space-3xl)}.radius-xs{border-radius:var(--radius-xs)}.radius-sm{border-radius:var(--radius-sm)}.radius-md{border-radius:var(--radius-md)}.radius-bs{border-radius:var(--radius-bs)}.radius-lg{border-radius:var(--radius-lg)}.radius-full{border-radius:var(--radius-full)}.wfull{width:100%}.hfull{height:100%}.full{width:100%;height:100%}.minw0{min-width:0}.minh0{min-height:0}.min0{min-width:0;min-height:0}.h-sm{height:var(--height-sm)}.h-md{height:var(--height-md)}.h-bs{height:var(--height-bs)}.h-lg{height:var(--height-lg)}.hfull-vh{min-height:100vh}.hfull-vh-fitted{min-height:var(--fit-height)}.text-xs{font-size:var(--text-xs)}.text-sm{font-size:var(--text-sm)}.text-md{font-size:var(--text-md)}.text-bs{font-size:var(--text-bs)}.text-lg{font-size:var(--text-lg)}.text-xl{font-size:var(--text-xl)}.text-2xl{font-size:var(--text-2xl)}.text-3xl{font-size:var(--text-3xl)}.text-4xl{font-size:var(--text-4xl)}.text-5xl{font-size:var(--text-5xl)}.text-body{font-size:var(--text-bs);line-height:1.5}.text-body-lg{font-size:var(--text-lg);line-height:1.5}.text-body-sm{font-size:var(--text-sm);line-height:1.5}.page-title{font-size:var(--text-3xl);line-height:1.1;font-weight:700;letter-spacing:-0.02rem}.page-desc{font-size:var(--text-lg);line-height:1.2}.page-heading-xl{font-size:var(--text-xl);line-height:1.1;font-weight:600;letter-spacing:-0.03rem}.page-heading-lg{font-size:var(--text-lg);line-height:1.1;font-weight:600;letter-spacing:-0.03rem}.page-heading-bs{font-size:var(--text-bs);line-height:1.1;font-weight:600;letter-spacing:-0.02rem}.card-title{font-size:var(--text-lg);font-weight:600;line-height:1.2}.card-desc{font-size:var(--text-md);line-height:1.2}.breadcrumb-link,.breadcrumb-spacer{color:var(--text-muted);font-size:var(--text-xs);text-transform:uppercase}.breadcrumb-link:hover{color:var(--theme-color)}.breadcrumb{display:flex;justify-content:flex-start;margin-left:-0.5rem}.nav-link{font-size:var(--text-md);line-height:1.2}.nav-link-sm{font-size:var(--text-sm);line-height:1.2}.nav-header{font-size:var(--text-sm);line-height:1.1;font-weight:500;padding:var(--space-sm)}.header-nav a{text-transform:uppercase;font-size:var(--text-md);font-weight:500}.header-nav a:hover{color:var(--theme-color)}.lh11{line-height:1.1}.lh12{line-height:1.2}.lh13{line-height:1.3}.lh14{line-height:1.4}.lh15{line-height:1.5}.lh16{line-height:1.6}.ls-tight-bs{letter-spacing:-0.01rem}.ls-tight-lg{letter-spacing:-0.02rem}.ls-tight-xl{letter-spacing:-0.03rem}.ls-wide-bs{letter-spacing:.01rem}.ls-wide-lg{letter-spacing:.02rem}.ls-wide-xl{letter-spacing:.03rem}.weight-300{font-weight:300}.weight-400{font-weight:400}.weight-500{font-weight:500}.weight-600{font-weight:600}.weight-700{font-weight:700}.weight-800{font-weight:800}.tt-u{text-transform:uppercase}.tt-c{text-transform:capitalize}.ta-c{text-align:center}@media(max-width: 1024px){.ta-c.mleft{text-align:left}}.ta-l{text-align:left}.ta-r{text-align:right}@media(max-width: 1024px){.ta-r.mleft{text-align:left}}.mono{font-family:var(--font-mono)}.sans{font-family:var(--font-sans)}.truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.box{display:flex;flex-direction:column}.box.xcenter{align-items:center;text-align:center}.box.xleft{align-items:flex-start;text-align:left}.box.xright{align-items:flex-end;text-align:right}.box.ycenter{justify-content:center}.box.ytop{justify-content:flex-start}.box.ybot{justify-content:flex-end}.box.ybetween{justify-content:space-between}.box.yevenly{justify-content:space-evenly}.box.yaround{justify-content:space-around}.row{display:flex;flex-direction:row}.row.xleft{justify-content:flex-start}.row.xcenter{justify-content:center}.row.xright{justify-content:flex-end}.row.xbetween{justify-content:space-between}.row.xevenly{justify-content:space-evenly}.row.xaround{justify-content:space-around}.row.ycenter{align-items:center}.row.ytop{align-items:flex-start}.row.ybot{align-items:flex-end}.grid{display:grid}.grid.center{place-items:center}.grid.xcenter{justify-items:center;text-align:center}.grid.xleft{justify-items:start;text-align:left}.grid.xright{justify-items:end;text-align:right}.grid.xstretch{justify-items:stretch}.grid.ycenter{align-items:center}.grid.ytop{align-items:start}.grid.ybot{align-items:end}.grid.ystretch{align-items:stretch}.grid.xbetween{justify-content:space-between}.grid.xevenly{justify-content:space-evenly}.grid.xaround{justify-content:space-around}.grid.ybetween{align-content:space-between}.grid.yevenly{align-content:space-evenly}.grid.yaround{align-content:space-around}.wrap{flex-wrap:wrap}.grow{flex:1 1 0%}.shrink-0{flex-shrink:0}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}.scroll-y{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}.scroll-x{overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain}.card{padding:var(--space-bs);border:1px solid var(--border);background:var(--bg-panel)}.card svg.arrow{color:var(--theme-color);transition:transform var(--speed1) var(--transout1)}.card footer{margin-top:auto}.card[data-shape=modern]{border-radius:var(--radius-sm)}.card:hover svg{transform:translateX(2rem)}.chip{font-size:var(--text-xs);font-weight:500;letter-spacing:.01rem;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-md)}.prose-section{display:flex;flex-direction:column;gap:var(--space-lg)}.nav-section{display:flex;flex-direction:column;gap:var(--space-xs)}.page-header{display:flex;flex-direction:column;padding-bottom:var(--space-2xl);gap:var(--space-sm)}.inputs-wrapper{display:flex;gap:var(--space-xs)}.inputs-wrapper label{font-size:var(--text-sm);color:var(--text-muted)}.checkbox-wrapper{display:flex;align-items:center;gap:var(--space-xs)}.checkbox-wrapper span{font-size:var(--text-sm);font-weight:500}.grid-1{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr))}.grid-2{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr))}@media(min-width: 1025px){.grid-2{grid-template-columns:repeat(2, minmax(0, 1fr))}}.grid-3{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr))}@media(min-width: 1025px){.grid-3{grid-template-columns:repeat(3, minmax(0, 1fr))}}.grid-4{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr))}@media(min-width: 1025px){.grid-4{grid-template-columns:repeat(2, minmax(0, 1fr))}}@media(min-width: 1281px){.grid-4{grid-template-columns:repeat(4, minmax(0, 1fr))}}.grid-6{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr))}@media(min-width: 1025px){.grid-6{grid-template-columns:repeat(3, minmax(0, 1fr))}}@media(min-width: 1281px){.grid-6{grid-template-columns:repeat(6, minmax(0, 1fr))}}.cspan-1{grid-column:span 1}.cspan-2{grid-column:span 2}.cspan-3{grid-column:span 3}.cspan-4{grid-column:span 4}.cspan-5{grid-column:span 5}.cspan-6{grid-column:span 6}.cspan-7{grid-column:span 7}.cspan-8{grid-column:span 8}.card-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(var(--card-min), 100%), 1fr))}.prose{max-width:var(--prose-clamp);margin-inline:auto;display:flex;flex-direction:column;gap:var(--space-sm)}.prose h1:first-child,.prose h2:first-child,.prose h3:first-child,.prose h4:first-child{margin-top:0}.frame-16-9{aspect-ratio:16 / 9;overflow:hidden;position:relative}.frame-16-9 img,.frame-16-9 video,.frame-16-9 iframe,.frame-16-9 svg{width:100%;height:100%;object-fit:cover}.frame-9-16{aspect-ratio:9 / 16;overflow:hidden;position:relative}.frame-9-16 img,.frame-9-16 video,.frame-9-16 iframe,.frame-9-16 svg{width:100%;height:100%;object-fit:cover}.frame-4-3{aspect-ratio:4 / 3;overflow:hidden;position:relative}.frame-4-3 img,.frame-4-3 video,.frame-4-3 iframe,.frame-4-3 svg{width:100%;height:100%;object-fit:cover}.frame-3-4{aspect-ratio:3 / 4;overflow:hidden;position:relative}.frame-3-4 img,.frame-3-4 video,.frame-3-4 iframe,.frame-3-4 svg{width:100%;height:100%;object-fit:cover}.frame-3-2{aspect-ratio:3 / 2;overflow:hidden;position:relative}.frame-3-2 img,.frame-3-2 video,.frame-3-2 iframe,.frame-3-2 svg{width:100%;height:100%;object-fit:cover}.frame-2-3{aspect-ratio:2 / 3;overflow:hidden;position:relative}.frame-2-3 img,.frame-2-3 video,.frame-2-3 iframe,.frame-2-3 svg{width:100%;height:100%;object-fit:cover}.frame-1-1{aspect-ratio:1 / 1;overflow:hidden;position:relative}.frame-1-1 img,.frame-1-1 video,.frame-1-1 iframe,.frame-1-1 svg{width:100%;height:100%;object-fit:cover}.reel{display:flex;flex-direction:row;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:inline mandatory}.reel>*{flex:0 0 auto;scroll-snap-align:start}.app-shell{display:flex;flex-direction:column;position:relative;min-height:100vh}.app-header{display:flex;flex-direction:row;align-items:center;position:sticky;top:0;z-index:var(--z-sticky);height:var(--header-height);padding-inline:var(--app-inline);background:var(--bg-surface)}.app-header.clamped{width:var(--content-clamp);margin-inline:auto}.app-main{flex:1 1 0%;min-width:0;min-height:calc(100dvh - var(--fit-height));display:flex;flex-direction:row;padding-inline:var(--app-inline)}.app-main.clamped{width:var(--content-clamp);margin-inline:auto}.main-section{flex:1 1 0%;min-width:0}.sidebar-left,.sidebar-right{display:none;flex-shrink:0;position:sticky;top:var(--header-height);height:calc(100dvh - var(--fit-height));overflow-y:auto;padding-block:var(--space-2xl)}.sidebar-left ul,.sidebar-left ol,.sidebar-right ul,.sidebar-right ol{margin-left:0;padding-left:0}.sidebar-left{width:var(--sidebar-width-left)}.sidebar-right{width:var(--sidebar-width-right)}@media(max-width: 1024px){.app-shell.open .sidebar-left{display:block;position:fixed;left:0;z-index:var(--z-modal);height:var(--fit-height)}}@media(min-width: 1025px){.sidebar-left{display:block}}@media(min-width: 1281px){.sidebar-right{display:block}}.app-footer{display:flex;flex-direction:row;align-items:center;padding-inline:var(--app-inline);min-height:var(--footer-height)}.content-section{width:100%;padding:var(--space-2xl) 0}.content-section.null{padding:0 var(--space-bs)}@media(min-width: 769px){.content-section{padding:var(--space-2xl) var(--space-bs)}.content-section.narrow-half{padding:var(--space-2xl) 0;width:640px;margin-inline:auto}.content-section.narrow-wide{padding:var(--space-2xl) 0;width:720px;margin-inline:auto}}@media(min-width: 1025px){.content-section{padding:var(--space-2xl) var(--space-bs)}.content-section.narrow-full{width:640px;margin-inline:auto}.content-section.narrow-half{width:750px;padding-right:25px}.content-section.narrow-wide{width:750px}}@media(min-width: 1281px){.content-section.narrow-full{width:680px}.content-section.narrow-half{width:800px;padding-right:120px}.content-section.narrow-wide{width:1024px}}@media(min-width: 1441px){.content-section.narrow-wide{width:1280px}}.input{display:block;width:100%;height:var(--height-lg);padding-inline:var(--space-bs);font-size:var(--text-md);background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius-sm)}.input:focus-visible{outline:none;border-color:var(--theme-color);box-shadow:0 0 0 2px var(--ring)}.input.small{height:var(--height-bs);font-size:var(--text-sm)}.select{display:block;width:100%;height:var(--height-lg);padding-inline:var(--space-bs);font-size:var(--text-md);background-color:var(--bg-input);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius-sm);appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23697080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;cursor:pointer}.select:focus-visible{outline:none;border-color:var(--theme-color);box-shadow:0 0 0 2px var(--ring)}.select.small{height:var(--height-bs);font-size:var(--text-sm)}.link{color:var(--theme-color);text-decoration:none;transition:color var(--motionin1)}.link:hover{color:var(--theme-color-alt)}.link-plain{color:var(--text-primary);text-decoration:none;transition:color var(--motionin1)}.link-plain:hover{color:var(--theme-color)}.link-parent{color:var(--text-primary);text-decoration:none}.link-parent .link-title{transition:color var(--motionin1)}.link-parent:hover .link-title{color:var(--theme-color)}a.nav-link{padding:var(--space-sm);border-radius:var(--radius-sm)}a.nav-link:hover{background:var(--state-hover)}button{display:flex;align-items:center;justify-content:center;height:var(--height-bs);font-size:var(--text-md);color:var(--text-primary);text-decoration:none;cursor:pointer;user-select:none;transition:background var(--motionin1),border-color var(--motionin1),color var(--motionin1);padding-inline:var(--space-md)}button:focus-visible{outline:2px solid var(--ring);outline-offset:1px}button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}button.icon{height:24px;width:24px;border:1px solid rgba(0,0,0,0);background:rgba(0,0,0,0);padding:0}button.icon:hover{background:var(--state-hover)}button.modern{border-radius:var(--space-xs)}button.primary{background:var(--theme-color)}button[data-variant=primary]{background:var(--theme-color);color:var(--white-fixed);border:1px solid var(--theme-color)}button[data-variant=primary]:hover{background:var(--theme-color-alt);border:1px solid var(--theme-color-alt)}button[data-variant=secondary]{background:var(--state-surface);color:var(--text-primary);border:1px solid var(--border-strong)}button[data-variant=secondary]:hover{background:var(--state-hover)}button[data-variant=soft]{background:var(--theme-color-sub);color:var(--white-fixed);border:1px solid var(--theme-color-sub)}button[data-variant=soft]:hover{border:1px solid var(--text-primary);color:var(--text-primary)}button[data-variant=outline]{background:var(--bg);color:var(--text-primary);border:1px solid var(--text-primary)}button[data-variant=outline]:hover{background:var(--state-hover)}button[data-variant=ghost]{background:rgba(0,0,0,0);color:var(--text-primary);border:none}button[data-variant=ghost]:hover{background:var(--state-hover)}button[data-variant=link]{background:rgba(0,0,0,0);color:var(--theme-color);border:none}button[data-variant=link]:hover{text-decoration:underline}button[data-variant=destructive]{background:var(--danger);color:var(--white-fixed);border:1px solid var(--danger)}button[data-variant=destructive]:hover{animation:vibrating 60ms infinite forwards}button[data-shape=modern]{border-radius:var(--radius-sm)}button[data-shape=curved]{border-radius:var(--radius-md)}button[data-shape=round]{border-radius:var(--radius-full)}button[data-size=sm]{height:var(--height-sm);font-size:var(--text-sm)}button[data-size=md]{height:var(--height-md);font-size:var(--text-md)}button[data-size=bs]{height:var(--height-bs);font-size:var(--text-bs)}button[data-size=lg]{height:var(--height-lg);font-size:var(--text-bs)}@keyframes vibrating{0%{transform:scale(0)}50%{transform:scale(1.03)}100%{transform:scale(0)}}a.primary{background:var(--theme-color);font-size:var(--text-lg);color:var(--white-fixed);height:40px;align-items:center;justify-content:center;display:flex;min-width:6rem;box-shadow:var(--shadow-sm);transition:box-shadow var(--motionin1)}a.primary.modern{border-radius:var(--space-xs)}a.primary:hover{box-shadow:var(--shadow-bs)}a.outline{background:rgba(0,0,0,0);font-size:var(--text-lg);color:var(--text-primary);align-items:center;justify-content:center;display:flex;min-width:6rem;height:40px;box-shadow:var(--shadow-sm);border:1px solid var(--text-primary);transition:box-shadow var(--motionin1)}a.outline.modern{border-radius:var(--space-xs)}a.outline:hover{box-shadow:var(--shadow-bs)}.bg{background:var(--bg)}.surface{background:var(--bg-surface)}.panel{background:var(--bg-panel)}.sunken{background:var(--bg-sunken)}.raised{background:var(--bg-raised)}.extra{background:var(--bg-extra)}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-muted{color:var(--text-muted)}.text-inverse{color:var(--text-inverse)}.text-white{color:var(--white-fixed)}.text-black{color:var(--black-fixed)}.text-theme{color:var(--theme-color)}.text-success{color:var(--success)}.text-warning{color:var(--warning)}.text-danger{color:var(--danger)}.text-info{color:var(--info)}.bg-success{background:var(--success)}.bg-warning{background:var(--warning)}.bg-danger{background:var(--danger)}.bg-info{background:var(--info)}.border{border:1px solid var(--border)}.border-subtle{border:1px solid var(--border-subtle)}.border-strong{border:1px solid var(--border-strong)}.bt{border-top:1px solid var(--border)}.br{border-right:1px solid var(--border)}.bb{border-bottom:1px solid var(--border)}.bl{border-left:1px solid var(--border)}.bt-str{border-top:1px solid var(--border-strong)}.br-str{border-right:1px solid var(--border-strong)}.bb-str{border-bottom:1px solid var(--border-strong)}.bl-str{border-left:1px solid var(--border-strong)}.bt-sub{border-top:1px solid var(--border-subtle)}.br-sub{border-right:1px solid var(--border-subtle)}.bb-sub{border-bottom:1px solid var(--border-subtle)}.bl-sub{border-left:1px solid var(--border-subtle)}.shadow-xs{box-shadow:var(--shadow-xs)}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-bs{box-shadow:var(--shadow-bs)}.shadow-lg{box-shadow:var(--shadow-lg)}.shadow-xl{box-shadow:var(--shadow-xl)}.shadow-2xl{box-shadow:var(--shadow-2xl)}.shadow-3xl{box-shadow:var(--shadow-3xl)}@media(max-width: 1024px){.hide-mobile{display:none}}@media(min-width: 1025px){.hide-desktop{display:none}}.orange1{color:var(--orangepop1)}.orange2{color:var(--orangepop2)}.orange3{color:var(--orangepop3)}.orange4{color:var(--orangepop4)}.orange5{color:var(--orangepop5)}.orange6{color:var(--orangepop6)}.site-logomotif{height:48px;transform-origin:center center;transition:transform 210ms var(--transin2)}.site-logomotif:hover{transform:scale(1.2)}.logotype{height:28px}.project-circle{border-radius:24px;width:16px;height:16px}.mascot{display:inline-block;position:relative;flex:none;line-height:0;perspective:var(--mascot-persp, 400px)}.mascot-bob,.mascot-tilt{display:block}.mascot-bobs .mascot-bob{animation:mascot-bob 3.6s ease-in-out infinite alternate}.mascot-tilt{position:relative;transform:rotateX(var(--mascot-rx, 0deg)) rotateY(var(--mascot-ry, 0deg));will-change:transform}.mascot-base{display:block;user-select:none;-webkit-user-drag:none}.mascot-overlay{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.mascot-mask{mask-type:alpha}.mascot-pupil-l{transform:translate(calc(var(--mascot-plx, 0) * 1px), calc(var(--mascot-ply, 0) * 1px))}.mascot-pupil-r{transform:translate(calc(var(--mascot-prx, 0) * 1px), calc(var(--mascot-pry, 0) * 1px))}.mascot-gloss{opacity:.42;transform:translate(calc(var(--mascot-gx, 400) * 1px), calc(var(--mascot-gy, 400) * 1px))}.mascot-shade{opacity:.55;transform:translate(calc((1024 - var(--mascot-gx, 400)) * 1px), calc((1120 - var(--mascot-gy, 400)) * 1px))}.mascot-blinks .mascot-lid{animation:mascot-blink 5.2s ease-in-out infinite}@keyframes mascot-blink{0%,93%,100%{transform:translateY(0)}96%{transform:translateY(232px)}}@keyframes mascot-bob{from{transform:translateY(0)}to{transform:translateY(-3%)}}@media(prefers-reduced-motion: reduce){.mascot-bobs .mascot-bob,.mascot-blinks .mascot-lid{animation:none}.mascot-tilt{transform:none}}.mascotgl{display:inline-block;position:relative;flex:none;line-height:0}.mascotgl-spacer{display:block}.mascotgl-canvas{position:absolute;left:50%;top:50%;width:160%;height:160%;transform:translate(-50%, -50%);pointer-events:none;opacity:0}.mascotgl-ready{opacity:1}.mascotgl-compact .mascotgl-canvas{width:130%;height:130%}h3,h2,h1{font-weight:600}.hero-name{font-weight:800;font-size:calc(var(--text-5xl)*2);letter-spacing:-0.2rem}.accordion{display:flex;flex-direction:column;gap:var(--space-xs)}.accordion-item{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-surface)}.accordion-item .accordion-content{display:grid;grid-template-rows:0fr;padding:0;transition:grid-template-rows var(--speed2) var(--transout1)}.accordion-item .accordion-panel{overflow:hidden;min-height:0}.accordion-item.open .accordion-content{grid-template-rows:1fr;padding:var(--space-xs)}.accordion-trigger{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;min-height:var(--control-h-md);padding:var(--space-xs);font-weight:500;font-size:var(--text-sm);text-align:left;background:rgba(0,0,0,0);border:0;cursor:pointer;user-select:none}.accordion-trigger:hover{background:var(--bg-raised)}.accordion-trigger:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * fractalstyler — canonical styling system.
+ * The class registry is the public API: compose in markup, write no stylesheet.
+ */
+export declare const name = "fractalstyler";
+export declare const version = "0.9.0";

package/dist/index.js

@@ -0,0 +1,6 @@
+/**
+ * fractalstyler — canonical styling system.
+ * The class registry is the public API: compose in markup, write no stylesheet.
+ */
+export const name = 'fractalstyler';
+export const version = '0.9.0';

package/dist/styles/_00_config.sass

@@ -0,0 +1,29 @@
+@use 'sass:map'
+
+$steps: ('xs' 'sm' 'md' 'bs' 'lg' 'xl' '2xl' '3xl')
+$gap-families: (gap: gap, rgap: row-gap, cgap: column-gap)
+$pad-families: (pad: padding, px: padding-inline, py: padding-block, pt: padding-top, pr: padding-right, pb: padding-bottom, pl: padding-left)
+$mar-families: (mar: margin, mx: margin-inline, my: margin-block, mt: margin-top, mr: margin-right, mb: margin-bottom, ml: margin-left)
+$frame-ratios: ('16-9': '16 / 9', '9-16': '9 / 16', '4-3': '4 / 3', '3-4': '3 / 4', '3-2': '3 / 2', '2-3': '2 / 3', '1-1': '1 / 1')
+$breakpoints: (md: 768px, bs: 1024px, lg: 1280px)
+
+// Step index:             xs     sm     md     bs     lg     xl     2xl    3xl
+// Key Alpha (tight):     0.14   0.12   0.09   0.06   0.04   0.03   0.02   0.02
+// Ambient Alpha (wide):  0.00   0.02   0.04   0.06   0.08   0.09   0.09   0.08
+// Key Blur (px):           1      2      4      4      8     12     16     24
+// Ambient Blur (px):       0      3      6     16     24     36     48     64
+
+$shadow-specs: (
+  'xs':  (y1: 1px,  b1: 1px,  a1: 0.14,  y2: 0px,   b2: 0px,   a2: 0.00),
+  'sm':  (y1: 1px,  b1: 2px,  a1: 0.12,  y2: 1px,   b2: 3px,   a2: 0.02),
+  'md':  (y1: 2px,  b1: 4px,  a1: 0.09,  y2: 3px,   b2: 6px,   a2: 0.04),
+  'bs':  (y1: 2px,  b1: 4px,  a1: 0.06,  y2: 6px,   b2: 14px,  a2: 0.06),
+  'lg':  (y1: 4px,  b1: 8px,  a1: 0.04,  y2: 12px,  b2: 24px,  a2: 0.08),
+  'xl':  (y1: 6px,  b1: 12px, a1: 0.03,  y2: 20px,  b2: 36px,  a2: 0.09),
+  '2xl': (y1: 8px,  b1: 16px, a1: 0.02,  y2: 28px,  b2: 48px,  a2: 0.09),
+  '3xl': (y1: 12px, b1: 24px, a1: 0.02,  y2: 36px,  b2: 64px,  a2: 0.08)
+)
+
+:root
+  @each $step, $val in $shadow-specs
+    --shade-#{$step}: var(--shadow-rim), 0 #{map.get($val, y1)} #{map.get($val, b1)} rgb(var(--shadow-color) / #{map.get($val, a1)}), 0 #{map.get($val, y2)} #{map.get($val, b2)} rgb(var(--shadow-color) / #{map.get($val, a2)})

package/dist/styles/_00_fonts.sass

@@ -0,0 +1,58 @@
+@font-face
+	font-family: 'Google Sans Flex'
+	src: url('/fonts/GoogleSansFlex.woff2') format('woff2')
+	font-weight: 300 800
+	font-style: normal
+	font-optical-sizing: auto
+
+@font-face
+	font-family: 'Google Sans Flex'
+	src: url('/fonts/GoogleSansFlex.woff2') format('woff2')
+	font-weight: 300 800
+	font-style: italic
+	font-optical-sizing: auto
+
+@font-face
+	font-family: 'Google Sans'
+	src: url('/fonts/GoogleSans.woff2') format('woff2')
+	font-weight: 400 700
+	font-style: normal
+	font-optical-sizing: auto
+
+@font-face
+	font-family: 'Google Sans'
+	src: url('/fonts/GoogleSans-Italic.woff2') format('woff2')
+	font-weight: 400 700
+	font-style: italic
+	font-optical-sizing: auto
+
+@font-face
+	font-family: 'Google Sans Code'
+	src: url('/fonts/googlesanscode.woff2') format('woff2')
+	font-weight: 300 800
+	font-style: normal
+	font-optical-sizing: auto
+
+@font-face
+	font-family: 'Timeless Sans'
+	src: url('/fonts/TimelessSansVF.woff2') format('woff2')
+	font-weight: 300 800
+	font-style: normal
+
+@font-face
+	font-family: 'Timeless Sans'
+	src: url('/fonts/TimelessSansVF.woff2') format('woff2')
+	font-weight: 300 800
+	font-style: italic
+
+@font-face
+	font-family: 'Timeless Grotesk'
+	src: url('/fonts/TimelessSansVF.woff2') format('woff2')
+	font-weight: 300 800
+	font-style: normal
+
+@font-face
+	font-family: 'Timeless Grotesk'
+	src: url('/fonts/TimelessSansVF.woff2') format('woff2')
+	font-weight: 300 800
+	font-style: italic

package/dist/styles/_00_tokens.sass

@@ -0,0 +1,211 @@
+@font-face
+	font-family: 'General Sans'
+	src: url('/fonts/generalsans.woff2') format('woff2')
+	font-weight: 300 700
+	font-style: normal
+	font-optical-sizing: auto
+
+@font-face
+	font-family: 'Satoshi'
+	src: url('/fonts/satoshi.woff2') format('woff2')
+	font-weight: 300 800
+	font-style: normal
+	font-optical-sizing: auto
+
+@font-face
+	font-family: 'Stack Sans'
+	src: url('/fonts/stacksans.woff2') format('woff2')
+	font-weight: 300 800
+	font-style: normal
+	font-optical-sizing: auto
+	
+=light-theme-tokens
+	color-scheme: light
+	--white-fixed: #FFFFFF
+	--black-fixed: #171717
+	--bg: #ffffff
+	--bg-surface: #FBFBF9
+	--bg-panel: #FBFBF9
+	--bg-sunken: #F7F6F0
+	--bg-raised: #F4F4F5
+	--bg-extra: rgb(247, 248, 249)
+	--bg-input: #f8f9fa
+	--bg-button: #CED8D3
+	--text-primary: #262627
+	--text-secondary: #777777
+	--text-muted: #a3a4a7
+	--text-inverse: #ffffff
+	--state-surface: #F2EFE9
+	--state-hover: #ECE7DF
+	--state-selected: #E4DFD5
+	--border: #d8d8d8
+	--border-subtle: #eceaea
+	--border-strong: #cfcfcf
+	--theme-color: #ff4400
+	--theme-color-alt: #be2f00
+	--theme-color-sub: #feb18a
+	--success: #10B981
+	--success-hover: #059669
+	--warning: #F59E0B
+	--warning-hover: #D97706
+	--danger: #bf2a2a
+	--danger-hover: #DC2626
+	--info: #3B82F6
+	--info-hover: #2563EB
+	--ring: rgba(0, 127, 78, 0.35)
+	--shadow-color: 15 13 42
+	--shadow-rim: transparent
+	--shadow-xs: 0 1px 2px rgb(var(--shadow-color) / 0.14)
+	--shadow-sm: 0 1px 2px rgb(var(--shadow-color) / 0.10), 0 2px 4px rgb(var(--shadow-color) / 0.06)
+	--shadow-md: 0 2px 4px rgb(var(--shadow-color) / 0.06), 0 8px 16px rgb(var(--shadow-color) / 0.06)
+	--shadow-bs: 0 2px 4px rgb(var(--shadow-color) / 0.06), 0 6px 14px rgb(var(--shadow-color) / 0.06)
+	--shadow-lg: 0 4px 8px rgb(var(--shadow-color) / 0.06), 0 12px 24px rgb(var(--shadow-color) / 0.06)
+	--shadow-xl: 0 8px 16px rgb(var(--shadow-color) / 0.06), 0 20px 36px rgb(var(--shadow-color) / 0.06)
+	--shadow-2xl: 0 12px 24px rgb(var(--shadow-color) / 0.06), 0 28px 48px rgb(var(--shadow-color) / 0.06)
+	--shadow-3xl: 0 16px 32px rgb(var(--shadow-color) / 0.06), 0 36px 64px rgb(var(--shadow-color) / 0.06)
+
+=dark-theme-tokens
+	color-scheme: dark
+	--white-fixed: #FFFFFF
+	--black-fixed: #171717
+	--bg: #101010
+	--bg-surface: #202021
+	--bg-panel: #1f1f20
+	--bg-sunken: #1f1f20
+	--bg-raised: #3a3a3a
+	--bg-extra: #111111
+	--bg-input: #1c1c1d
+	--bg-button: #171818
+	--text-primary: #EDF2F7
+	--text-secondary: #c7c7c7
+	--text-muted: #7c7c7c
+	--text-inverse: #7c7c7c
+	--state-surface:#7c7c7c
+	--state-hover: #4a4a4b
+	--state-selected: #666668
+	--border: #2f2f2f
+	--border-subtle: #1e1e1f
+	--border-strong: #7c7c7c
+	--theme-color: #2F9E44
+	--theme-color-alt: #36731d
+	--success: #34D399
+	--success-hover: #6EE7B7
+	--warning: #FBBF24
+	--warning-hover: #FCD34D
+	--danger: #b21a1a
+	--danger-hover: #FCA5A5
+	--info: #60A5FA
+	--info-hover: #93C5FD
+	--ring: rgba(16, 185, 129, 0.4)
+	--shadow-color: 0 0 0
+	--shadow-umbra: rgb(0 0 0 / 0.50)
+	--shadow-rim:  inset 0 1px 0 rgba(255, 255, 255, 0.09)
+	--shadow-xs: 0 1px 2px rgb(var(--shadow-color) / 0.14)
+	--shadow-sm: 0 1px 2px rgb(var(--shadow-color) / 0.10), 0 2px 4px rgb(var(--shadow-color) / 0.06)
+	--shadow-md: 0 2px 4px rgb(var(--shadow-color) / 0.06), 0 8px 16px rgb(var(--shadow-color) / 0.06)
+	--shadow-bs: 0 2px 4px rgb(var(--shadow-color) / 0.06), 0 6px 14px rgb(var(--shadow-color) / 0.06)
+	--shadow-lg: 0 4px 8px rgb(var(--shadow-color) / 0.06), 0 12px 24px rgb(var(--shadow-color) / 0.06)
+	--shadow-xl: 0 8px 16px rgb(var(--shadow-color) / 0.06), 0 20px 36px rgb(var(--shadow-color) / 0.06)
+	--shadow-2xl: 0 12px 24px rgb(var(--shadow-color) / 0.06), 0 28px 48px rgb(var(--shadow-color) / 0.06)
+	--shadow-3xl: 0 16px 32px rgb(var(--shadow-color) / 0.06), 0 36px 64px rgb(var(--shadow-color) / 0.06)
+
+[data-mode='dark']
+	+dark-theme-tokens
+
+[data-mode='light']
+	+light-theme-tokens
+
+:root
+	--font-sans: "Timeless Sans", sans-serif
+	--timeless-sans: "Timeless Sans", sans-serif
+	--timeless-grotesk: "Timeless Grotesk", sans-serif 
+	--text-scaling: 1.25
+	--text-xs: 0.67rem
+	--text-sm: 0.75rem
+	--text-md: 0.875rem
+	--text-bs: 1rem
+	--text-lg: calc(var(--text-bs) * var(--text-scaling))
+	--text-xl: calc(var(--text-lg) * var(--text-scaling))
+	--text-2xl: calc(var(--text-xl) * var(--text-scaling))
+	--text-3xl: calc(var(--text-2xl) * var(--text-scaling))
+	--text-4xl: calc(var(--text-3xl) * var(--text-scaling))
+	--text-5xl: calc(var(--text-4xl) * var(--text-scaling))
+
+	--unit-space: 0.25rem
+	--space-xs: var(--unit-space)
+	--space-sm: calc(var(--unit-space) * 2)
+	--space-md: calc(var(--unit-space) * 3)
+	--space-bs: calc(var(--unit-space) * 4)
+	--space-lg: calc(var(--unit-space) * 6)
+	--space-xl: calc(var(--unit-space) * 8)
+	--space-2xl: calc(var(--unit-space) * 12)
+	--space-3xl: calc(var(--unit-space) * 16)
+
+	--radius-xs: 2px
+	--radius-sm: 4px
+	--radius-md: 8px
+	--radius-bs: 16px
+	--radius-lg: 32px
+	--radius-full: 9999px
+
+	--control-h-sm: 21px
+	--control-h-bs: 32px
+	--control-h-lg: 38px
+
+	// Avatar and switch channels. The switch numbers are load-bearing: the thumb
+	// must travel exactly the 18px hard-coded on .switch-track.checked, and the
+	// track is border-box (1px border + 2px padding), so w = 16 + 18 + 4 + 2.
+	--avatar-size: 32px
+	--switch-w: 40px
+	--switch-h: 22px
+	--switch-thumb: 16px
+
+	// Motion language (registry v1) — durations and easings all compositions read.
+	--transin1: cubic-bezier(0.470, 0.000, 0.745, 0.715)
+	--transin2: cubic-bezier(0.550, 0.055, 0.675, 0.190)
+	--transin3: cubic-bezier(0.755, 0.050, 0.855, 0.060)
+	--transout1: cubic-bezier(0.390, 0.575, 0.565, 1.000)
+	--transout2: cubic-bezier(0.215, 0.610, 0.355, 1.000)
+	--transout3: cubic-bezier(0.230, 1.000, 0.320, 1.000)
+	--speed0: 50ms
+	--speed1: 90ms
+	--speed2: 140ms
+	--speed3: 220ms
+	--motionin1: var(--speed0) var(--transin1)
+	--motionout1: var(--speed1) var(--transout1)
+	--motionin2: var(--speed2) var(--transin2)
+	--motionout2: var(--speed2) var(--transout2)
+	--motionin3: var(--speed3) var(--transin3)
+	--motionout3: var(--speed3) var(--transout3)
+
+	--header-height: 64px
+	--footer-height: 32px
+	--fit-height: calc(var(--header-height) + var(--footer-height))
+	--prose-clamp: 65ch
+	--content-clamp: 1600px
+	--app-inline: var(--space-lg)
+	--card-min: 240px
+	--height-sm: 16px
+	--height-md: 20px
+	--height-bs: 27px
+	--height-lg: 32px
+
+	--sidebar-width: 280px
+	--sidebar-width-left: 280px
+	--sidebar-width-right: 280px
+	--z-sticky: 100
+	--z-raised: 200
+	--z-modal: 300
+	--z-toast: 500
+
+	--greenpop1: #70e000
+	--greenpop2: #00df89
+	--greenpop3: #69ff97
+	--greenpop4: #00e676
+
+	--orangepop1: #ff7700
+	--orangepop2: #ff4400
+	--orangepop3: #ff0055
+	--orangepop4: #ff5e36
+	--orangepop5: #ff9966
+	--orangepop6: #ff9f1c

package/dist/styles/_01_base.sass

@@ -0,0 +1,58 @@
+*,
+*::before,
+*::after
+	box-sizing: border-box
+
+*
+	margin: 0
+
+body, html
+	color: var(--text-primary)
+	font-family: var(--font-sans)
+	font-size: var(--text-bs)
+	background: var(--bg-surface)
+	box-sizing: border-box
+	margin: 0
+	padding: 0
+
+img,
+video,
+svg
+	display: block
+	max-width: 100%
+
+button,
+input,
+select,
+textarea
+	font: inherit
+	color: inherit
+
+p, li, h6, h5, h4, h3, h2, h1
+	margin: 0
+
+p, li
+	text-wrap: pretty
+
+h1, h2, h3, h4, h5
+	text-wrap: balance
+
+a
+	color: inherit
+	text-decoration: none
+
+//debug class
+.bdr
+	border: 1px solid red
+
+ul, ol
+	list-style-type: none
+
+::view-transition-old(root),
+::view-transition-new(root)
+	animation: none
+	mix-blend-mode: normal
+
+html.mode-wipe::view-transition-old(root),
+html.mode-wipe::view-transition-new(root)
+	animation: none

package/dist/styles/_02_dimensions.sass

@@ -0,0 +1,70 @@
+// ============================================================================
+// dimensions — L1. The loop-generated half of the registry: 17 space families,
+// radius, size, viewport heights, shadows — each class in three bands (base,
+// -mob, -desk) per Contract 7. Presets are token-routed; literals are px.
+// ============================================================================
+
+@use 'sass:string'
+@use 'sass:list'
+@use 'sass:math'
+@use '00_config' as *
+@use '00_tokens' as *
+
+// --- Base band ---------------------------------------------------------------
+@each $name, $prop in $gap-families
+	@each $step in $steps
+		.#{$name}-#{$step}
+			#{$prop}: var(--space-#{$step})
+
+@each $name, $prop in $pad-families
+	@each $step in $steps
+		.#{$name}-#{$step}
+			#{$prop}: var(--space-#{$step})
+
+@each $name, $prop in $mar-families
+	@each $step in $steps
+		.#{$name}-#{$step}
+			#{$prop}: var(--space-#{$step})
+
+.radius-xs
+	border-radius: var(--radius-xs)
+.radius-sm
+	border-radius: var(--radius-sm)
+.radius-md
+	border-radius: var(--radius-md)
+.radius-bs
+	border-radius: var(--radius-bs)
+.radius-lg
+	border-radius: var(--radius-lg)
+.radius-full
+	border-radius: var(--radius-full)
+
+.wfull
+	width: 100%
+.hfull
+	height: 100%
+.full
+	width: 100%
+	height: 100%
+.minw0
+	min-width: 0
+.minh0
+	min-height: 0
+.min0
+	min-width: 0
+	min-height: 0
+
+.h-sm
+	height: var(--height-sm)
+.h-md
+	height: var(--height-md)
+.h-bs
+	height: var(--height-bs)
+.h-lg
+	height: var(--height-lg)
+
+// Viewport heights
+.hfull-vh
+	min-height: 100vh
+.hfull-vh-fitted
+	min-height: var(--fit-height)