:root{--fm-bg: #ffffff;--fm-text: #0f0f0f;--fm-text-muted: #555555;--fm-text-faint: #888888;--fm-surface: #f7f7f7;--fm-surface-2: #fafafa;--fm-elevated: #ffffff;--fm-code-bg: #f6f8fa;--fm-border: rgba(127, 127, 127, .2);--fm-hover: rgba(127, 127, 127, .12);--fm-scrollbar: rgba(0, 0, 0, .22);--fm-scrollbar-hover: rgba(0, 0, 0, .38);--fm-accent: #4a90d9;--fm-accent-soft: rgba(80, 130, 255, .14);--fm-accent-strong: rgba(80, 130, 255, .2);--fm-selection: rgba(80, 130, 255, .3);--fm-mark: rgba(255, 213, 0, .32);--fm-link: #0969da;--fm-link-hover: #0a4f9e;--fm-danger: #b00000;--fm-overlay: rgba(0, 0, 0, .32);--fm-shadow: rgba(0, 0, 0, .25);font-family:Inter,Avenir,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.5;color:var(--fm-text);background-color:var(--fm-bg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--fm-radius-sm: 6px;--fm-radius-md: 8px;--fm-radius-lg: 12px;--fm-radius-pill: 999px;--fm-radius-full: 50%;--fm-space-1: .25rem;--fm-space-2: .5rem;--fm-space-3: .75rem;--fm-space-4: 1rem;--fm-space-5: 1.5rem;--fm-space-6: 2rem;--fm-space-7: 2.5rem;--fm-motion-fast: .12s;--fm-motion-medium: .2s;--fm-motion-slow: .6s;--fm-motion-flash: .75s;--fm-motion-dissipate: 2s}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--fm-bg: #1e1e1e;--fm-text: #e8e8e8;--fm-text-muted: #aaaaaa;--fm-text-faint: #888888;--fm-surface: #252525;--fm-surface-2: #222222;--fm-elevated: #2a2a2a;--fm-code-bg: #2a2a2a;--fm-border: rgba(127, 127, 127, .24);--fm-hover: rgba(127, 127, 127, .16);--fm-scrollbar: rgba(255, 255, 255, .22);--fm-scrollbar-hover: rgba(255, 255, 255, .36);--fm-accent: #5b9bff;--fm-accent-soft: rgba(90, 140, 255, .18);--fm-accent-strong: rgba(90, 140, 255, .28);--fm-selection: rgba(96, 148, 255, .42);--fm-mark: rgba(255, 199, 64, .24);--fm-link: #6cb6ff;--fm-link-hover: #9fd0ff;--fm-danger: #ff7b72;--fm-overlay: rgba(0, 0, 0, .5);--fm-shadow: rgba(0, 0, 0, .5)}}:root[data-theme=dark]{--fm-bg: #1e1e1e;--fm-text: #e8e8e8;--fm-text-muted: #aaaaaa;--fm-text-faint: #888888;--fm-surface: #252525;--fm-surface-2: #222222;--fm-elevated: #2a2a2a;--fm-code-bg: #2a2a2a;--fm-border: rgba(127, 127, 127, .24);--fm-hover: rgba(127, 127, 127, .16);--fm-scrollbar: rgba(255, 255, 255, .22);--fm-scrollbar-hover: rgba(255, 255, 255, .36);--fm-accent: #5b9bff;--fm-accent-soft: rgba(90, 140, 255, .18);--fm-accent-strong: rgba(90, 140, 255, .28);--fm-selection: rgba(96, 148, 255, .42);--fm-mark: rgba(255, 199, 64, .24);--fm-link: #6cb6ff;--fm-link-hover: #9fd0ff;--fm-danger: #ff7b72;--fm-overlay: rgba(0, 0, 0, .5);--fm-shadow: rgba(0, 0, 0, .5)}:root{background:#161214}body{margin:0;min-width:320px;background:#161214}.site-shell{--kreida-ink: #161214;--kreida-chalk: #f8f8f8;--kreida-blue: #4a90d9;--kreida-pink: #fd4190;min-height:100vh;min-height:100svh;position:relative;display:grid;grid-template-rows:auto 1fr auto;box-sizing:border-box;overflow:hidden;background:linear-gradient(115deg,rgba(255,255,255,.025),transparent 28%),var(--kreida-ink);color:var(--kreida-chalk);font-family:Inter,Avenir,Helvetica Neue,Helvetica,Arial,sans-serif}.site-header{position:relative;z-index:5;padding:max(1.25rem,env(safe-area-inset-top)) max(clamp(1.5rem,5vw,4rem),env(safe-area-inset-right)) 1.25rem max(clamp(1.5rem,5vw,4rem),env(safe-area-inset-left))}.site-brand{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;color:var(--kreida-chalk);text-decoration:none;font-size:1.65rem;font-weight:550;letter-spacing:-.07em;line-height:1}.site-footer{position:relative;z-index:5;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.25rem 2rem;border-top:1px solid rgb(248 248 248 / 8%);background:#f8f8f804;padding:.75rem max(1.5rem,env(safe-area-inset-right)) max(.75rem,env(safe-area-inset-bottom)) max(1.5rem,env(safe-area-inset-left))}.site-footer nav{display:flex;justify-content:center;flex-wrap:wrap;gap:.25rem 2rem}.site-footer a{display:inline-flex;align-items:center;min-height:44px;color:#aaa5a8;font-size:.875rem;text-decoration:none;text-underline-offset:.3em}.site-copyright{display:inline-flex;align-items:center;min-height:44px;margin:0;color:#aaa5a8;font-size:.875rem}.site-footer a:hover,.site-footer a[aria-current=page]{color:var(--kreida-chalk);text-decoration:underline}.site-shell a,.site-shell button{cursor:pointer;-webkit-tap-highlight-color:transparent}.site-shell a:focus-visible,.beta-button:focus-visible{outline:2px solid var(--kreida-blue);outline-offset:6px;border-radius:4px}.landing{position:relative;display:flex;align-items:center;justify-content:center;padding:1rem 1.5rem;min-width:0}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.landing-inner{position:relative;z-index:1;width:min(100%,36rem);text-align:center}.kreida-mark-stage{display:block;padding:0;border:0;background:transparent;color:inherit;touch-action:none;-webkit-tap-highlight-color:transparent;position:relative;width:min(76vw,48vh,29rem);width:min(76vw,48svh,29rem);aspect-ratio:1;margin:0 auto}.kreida-mark{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.kreida-layer{transform-origin:50% 50%;-webkit-user-select:none;user-select:none}.kreida-chalk{cursor:grab;outline:none}.chalk-hit-area{pointer-events:fill}.chalk-slot,.chalk-motion{pointer-events:none}.chalk-motion>path{pointer-events:visiblePainted}.kreida-chalk[aria-pressed=true] .chalk-motion>path{pointer-events:none}.chalk-slot{opacity:0;transition:opacity .4s ease}.chalk-motion{transform-origin:50% 50%;opacity:1;transform:translate(0) rotate(0);transition:transform .68s cubic-bezier(.22,1,.36,1),opacity .48s ease}.kreida-chalk[aria-pressed=true] .chalk-slot{opacity:.1}.kreida-chalk[aria-pressed=true] .chalk-motion{opacity:0;transform:translate(var(--chalk-away-x),var(--chalk-away-y)) rotate(var(--chalk-away-angle));transition-duration:.16s}@media(hover:hover)and (pointer:fine){.kreida-chalk[aria-pressed=false]:hover .chalk-motion{transform:translate(var(--chalk-lift-x),var(--chalk-lift-y)) rotate(var(--chalk-lift-angle))}}.kreida-chalk:focus-visible .chalk-motion{stroke:var(--kreida-chalk);stroke-width:5}.is-drawing{cursor:none;touch-action:none;-webkit-user-select:none;user-select:none}.is-drawing .kreida-mark-stage{touch-action:none}.site-shell.is-drawing a,.site-shell.is-drawing button{cursor:none}.chalk-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:10;pointer-events:none}.chalk-cursor{position:fixed;top:0;left:0;z-index:11;pointer-events:none;opacity:0;transition:opacity .16s ease;will-change:transform}.chalk-cursor>span{position:absolute;bottom:-3px;left:-6px;width:13px;height:46px;border-radius:3px 4px 2px 2px;background:var(--chalk-color);box-shadow:inset -3px 0 #0000001f,inset 2px 0 #ffffff26;transform-origin:50% 100%;transform:rotate(28deg)}@media(hover:none){.chalk-cursor{display:none}}.kreida-spine{--chalk-lift-x: -12px;--chalk-lift-y: -4px;--chalk-lift-angle: -.7deg;--chalk-away-x: -42px;--chalk-away-y: -12px;--chalk-away-angle: -3deg;z-index:1;animation:kreida-spine-arrive 1.65s cubic-bezier(.22,1,.36,1) both}.kreida-blue{--chalk-lift-x: 10px;--chalk-lift-y: -10px;--chalk-lift-angle: 1deg;--chalk-away-x: 32px;--chalk-away-y: -36px;--chalk-away-angle: 3deg;z-index:2;animation:kreida-blue-arrive 1.75s .12s cubic-bezier(.22,1,.36,1) both}.kreida-pink{--chalk-lift-x: 10px;--chalk-lift-y: 10px;--chalk-lift-angle: -1deg;--chalk-away-x: 32px;--chalk-away-y: 36px;--chalk-away-angle: -3deg;z-index:3;animation:kreida-pink-arrive 1.85s .24s cubic-bezier(.22,1,.36,1) both}.beta-signup{position:relative;z-index:5;margin-top:1.25rem}.beta-button{min-height:60px;max-width:100%;padding:1rem 2.25rem;border:1px solid rgb(248 248 248 / 80%);border-radius:10px;background:var(--kreida-chalk);color:var(--kreida-ink);font:inherit;font-size:1.0625rem;font-weight:600;line-height:1.4;letter-spacing:-.025em;transition:background .18s ease,box-shadow .18s ease}@media(hover:hover){.beta-button:hover{background:#fff;box-shadow:0 0 0 5px #f8f8f812}}.beta-button:active{background:#ddd9db}.beta-status{min-height:2.8em;margin:1rem 0 0;color:#bcb6ba;font-size:.875rem;line-height:1.4}.landing-dot{color:var(--kreida-pink)}.legal-page{box-sizing:border-box;width:min(100%,52rem);margin:0 auto;padding:clamp(3rem,10vh,7rem) 1.5rem}.legal-page h1{margin:0 0 1.5rem;font-size:clamp(2.25rem,6vw,3.5rem);line-height:1.1;font-weight:550;letter-spacing:-.055em}.legal-page p{color:#bcb6ba;font-size:1rem;line-height:1.6}.legal-page .legal-eyebrow{margin:0 0 .75rem;color:#aaa5a8;font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}.legal-page .legal-updated{margin:0 0 2.5rem;color:#aaa5a8;font-size:.875rem}.legal-page h2{margin:2.5rem 0 .75rem;color:var(--kreida-chalk);font-size:1.25rem;line-height:1.3;font-weight:550;letter-spacing:-.02em}.legal-page ul{margin:0 0 1rem;padding-left:1.25rem;color:#bcb6ba;font-size:1rem;line-height:1.6}.legal-page li+li{margin-top:.5rem}.legal-page p a,.legal-page li a{color:var(--kreida-chalk);text-underline-offset:.2em}.download-page .download-button{display:inline-flex;align-items:center;margin:1.5rem 0 1rem;text-decoration:none}.download-page .download-terms{color:#aaa5a8;font-size:.875rem}.back-home{display:inline-flex;align-items:center;min-height:44px;margin-top:2rem;color:var(--kreida-chalk);font-size:.875rem;text-underline-offset:.3em}.landing-rule{position:absolute;right:-18vw;width:48vw;height:1px;transform-origin:right center;opacity:0;pointer-events:none}.landing-rule-blue{top:11vh;background:linear-gradient(90deg,transparent,var(--kreida-blue));transform:rotate(-45deg) scaleX(0);animation:kreida-rule-blue 1.2s .25s cubic-bezier(.16,1,.3,1) both}.landing-rule-pink{bottom:8vh;background:linear-gradient(90deg,transparent,var(--kreida-pink));transform:rotate(45deg) scaleX(0);animation:kreida-rule-pink 1.2s .42s cubic-bezier(.16,1,.3,1) both}@keyframes kreida-spine-arrive{0%{opacity:0;transform:translate3d(-18vw,-90vh,0) rotate(-54deg)}to{opacity:1;transform:none}}@keyframes kreida-blue-arrive{0%{opacity:0;transform:translate3d(74vw,-58vh,0) rotate(42deg)}to{opacity:1;transform:none}}@keyframes kreida-pink-arrive{0%{opacity:0;transform:translate3d(82vw,64vh,0) rotate(-44deg)}to{opacity:1;transform:none}}@keyframes kreida-rule-blue{0%{opacity:0;transform:rotate(-45deg) scaleX(0)}45%{opacity:.8}to{opacity:0;transform:rotate(-45deg) scaleX(1)}}@keyframes kreida-rule-pink{0%{opacity:0;transform:rotate(45deg) scaleX(0)}45%{opacity:.8}to{opacity:0;transform:rotate(45deg) scaleX(1)}}@media(max-height:500px){.kreida-mark-stage{width:min(76vw,40vh,18rem);width:min(76vw,40svh,18rem)}.beta-signup{margin-top:0}}@media(prefers-reduced-motion:reduce){.chalk-motion,.chalk-slot,.chalk-cursor,.beta-button{transition:none}.landing .kreida-chalk[aria-pressed] .chalk-motion{transform:none}.kreida-mark-stage,.kreida-mark,.kreida-layer,.landing-rule{animation:none}}*{box-sizing:border-box}body{margin:0}.sg-page{min-height:100vh;background:var(--fm-bg);color:var(--fm-text);font-family:Inter,Avenir,Helvetica,Arial,sans-serif}.sg-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1.5rem;background:color-mix(in srgb,var(--fm-bg) 88%,transparent);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--fm-border)}.sg-title{margin:0;font-size:1.1rem;font-weight:600}.sg-main{max-width:960px;margin:0 auto;padding:2rem 1.5rem 5rem}.sg-section{margin-top:3rem}.sg-section:first-child{margin-top:1rem}.sg-section-title{font-size:1.4rem;font-weight:600;margin:0 0 .25rem}.sg-section-note{margin:0 0 1.25rem;color:var(--fm-text-muted);font-size:.9rem}.sg-group{margin-top:1.75rem}.sg-group-title{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--fm-text-faint);margin:0 0 .75rem}.sg-row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}.segmented{display:inline-flex;padding:2px;border-radius:var(--fm-radius-sm);background:var(--fm-surface);border:1px solid var(--fm-border)}.seg{appearance:none;border:none;background:transparent;color:var(--fm-text-muted);font:inherit;font-size:.85rem;padding:var(--fm-space-1) var(--fm-space-3);border-radius:var(--fm-radius-sm);cursor:pointer;transition:background var(--fm-motion-fast) ease,color var(--fm-motion-fast) ease}.seg:hover{color:var(--fm-text)}.seg.is-active{background:var(--fm-elevated);color:var(--fm-text);box-shadow:0 1px 2px var(--fm-shadow)}.btn-secondary{appearance:none;font:inherit;font-size:.9rem;padding:var(--fm-space-1) var(--fm-space-3);border-radius:var(--fm-radius-sm);border:1px solid var(--fm-border);background:var(--fm-surface);color:var(--fm-text);cursor:pointer;transition:background var(--fm-motion-fast) ease}.btn-secondary:hover{background:var(--fm-hover)}.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.75rem}.swatch-card{display:flex;gap:var(--fm-space-3);padding:var(--fm-space-2);border:1px solid var(--fm-border);border-radius:var(--fm-radius-md);background:var(--fm-surface-2)}.swatch-chip{width:44px;height:44px;flex:none;border-radius:var(--fm-radius-md);border:1px solid var(--fm-border)}.swatch-meta{min-width:0}.swatch-name{font-size:.85rem;font-weight:600}.swatch-var{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;color:var(--fm-text-muted);margin:.1rem 0 .35rem}.swatch-values{display:flex;flex-direction:column;gap:.15rem;font-size:.68rem;color:var(--fm-text-faint)}.swatch-values span{display:inline-flex;align-items:center;gap:.3rem}.swatch-dot{width:9px;height:9px;border-radius:var(--fm-radius-full);border:1px solid var(--fm-border)}.swatch-dot.light{background:#fff}.swatch-dot.dark{background:#1e1e1e}.ramp-name{font-size:.8rem;font-weight:600}.ramp-var{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.7rem;color:var(--fm-text-muted)}.ramp-value{font-size:.72rem;color:var(--fm-text-faint)}.radius-ramp{display:flex;flex-wrap:wrap;gap:1.25rem}.radius-step{display:flex;flex-direction:column;gap:.2rem}.radius-chip{width:64px;height:64px;background:var(--fm-accent-soft);border:1px solid var(--fm-accent);margin-bottom:.3rem}.space-ramp{display:flex;flex-direction:column;gap:.75rem}.space-step{display:flex;align-items:center;gap:1rem}.space-label{display:flex;align-items:baseline;gap:.5rem;min-width:200px}.space-label .ramp-var{display:inline}.space-bar{height:16px;background:var(--fm-accent);border-radius:3px;flex:none}.motion-ramp{display:flex;flex-wrap:wrap;gap:1.25rem}.motion-step{display:flex;flex-direction:column;gap:.2rem}.motion-swatch{width:64px;height:28px;border-radius:var(--fm-radius-sm);background:var(--fm-accent-soft);border:1px solid var(--fm-accent);margin-bottom:.3rem;transition-property:transform,background-color;transition-timing-function:ease}.motion-step:hover .motion-swatch{transform:translate(28px);background:var(--fm-accent)}@media(prefers-reduced-motion:reduce){.motion-step:hover .motion-swatch{transform:none}}.type-ramp h1{font-size:1.8em;margin:.6rem 0}.type-ramp h2,.type-ramp h3{margin:.6rem 0}.type-ramp p{margin:.5rem 0}.type-ramp .muted{color:var(--fm-text-muted)}.type-ramp .faint{color:var(--fm-text-faint)}.type-ramp a{color:var(--fm-link);text-decoration:none}.type-ramp a:hover{color:var(--fm-link-hover);text-decoration:underline}.type-ramp code,.swatch-var,.sg-section-note code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}.type-ramp :not(pre)>code,.sg-section-note code{background-color:#7f7f7f26;padding:.1em .35em;border-radius:var(--fm-radius-sm)}.tag-pill{display:inline-flex;align-items:baseline;gap:.05em;padding:.05em .5em;border:none;border-radius:var(--fm-radius-pill);background-color:var(--fm-accent-soft);color:var(--fm-link);font:inherit;font-size:.9em;line-height:1.4;cursor:pointer;white-space:nowrap}.tag-pill:hover{background-color:var(--fm-accent-strong)}.tag-pill-hash{opacity:.55}.task-list{list-style:none;padding-left:var(--fm-space-2);margin:0}.task-item{display:flex;align-items:center;margin:var(--fm-space-1) 0}.task-item.is-done{color:var(--fm-text-muted);text-decoration:line-through}.task-box{width:15px;height:15px;margin-right:var(--fm-space-2);border:1.5px solid var(--fm-text-muted);border-radius:var(--fm-radius-sm);background:transparent;position:relative;flex-shrink:0}.task-box.is-checked{background:var(--fm-accent);border-color:var(--fm-accent)}.task-box.is-checked:after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.codeblock{position:relative}.codeblock-lang{position:absolute;top:8px;right:12px;font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;color:var(--fm-text-faint);pointer-events:none}.codeblock pre{background-color:var(--fm-code-bg);padding:var(--fm-space-4);border-radius:var(--fm-radius-md);overflow-x:auto;margin:0}.codeblock code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}.callout{margin:var(--fm-space-3) 0;padding:var(--fm-space-2) var(--fm-space-4);border-radius:var(--fm-radius-md);border-left:3px solid var(--callout-color, var(--fm-accent));background:color-mix(in srgb,var(--callout-color, var(--fm-accent)) 10%,transparent)}.callout-title{font-weight:600;color:var(--callout-color, var(--fm-accent));margin-bottom:var(--fm-space-1)}.callout-note{--callout-color: var(--fm-accent)}.callout-warning{--callout-color: #d29922}.callout code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background-color:#7f7f7f26;padding:.1em .35em;border-radius:var(--fm-radius-sm)}.palette{width:min(420px,100%);display:flex;flex-direction:column;background-color:var(--fm-elevated);border-radius:var(--fm-radius-lg);box-shadow:0 12px 40px var(--fm-shadow);overflow:hidden;border:1px solid var(--fm-border)}.palette-input{border-bottom:1px solid var(--fm-border);padding:var(--fm-space-3) var(--fm-space-4);font-size:1rem;color:var(--fm-text-faint)}.palette-results{list-style:none;margin:0;padding:var(--fm-space-1)}.palette-result{display:flex;align-items:baseline;gap:var(--fm-space-2);padding:var(--fm-space-2) var(--fm-space-2);border-radius:var(--fm-radius-sm)}.palette-result.is-selected{background-color:var(--fm-accent-soft)}.palette-name{font-size:.95rem}.palette-path{font-size:.78rem;color:var(--fm-text-faint)}