@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--ease-in:cubic-bezier(.4,0,1,1);--ease-out:cubic-bezier(0,0,.2,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.collapse{visibility:collapse}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.static{position:static}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.table{display:table}.shrink{flex-shrink:1}.grow{flex-grow:1}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.resize{resize:both}.flex-wrap{flex-wrap:wrap}.border{border-style:var(--tw-border-style);border-width:1px}.lowercase{text-transform:lowercase}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.grayscale{--tw-grayscale:grayscale(100%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.sepia{--tw-sepia:sepia(100%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}}:root{--bg:#f8fafc;--surface:#fff;--surface-alt:#f1f5f9;--text:#142038;--muted:#56627a;--border:#dde4ef;--primary:#305bea;--cyan:#087d94;--shadow:0 6px 32px #172a4d06;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--bg:#0b101d;--surface:#111827;--surface-alt:#172133;--text:#edf2ff;--muted:#a3b0ca;--border:#29364b;--primary:#7897ff;--cyan:#59d9e9;--shadow:0 6px 32px #0002;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:15px;line-height:1.65}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}button,input,select,textarea{color:inherit}button{border:0}h1,h2,h3,h4,p{margin-top:0}h1,h2,h3,h4{letter-spacing:-.035em;line-height:1.2}h1{font-size:clamp(2.4rem,5.3vw,4.6rem);font-weight:750}h2{font-size:clamp(1.7rem,3vw,2.25rem);font-weight:700}h3{font-size:1.12rem;font-weight:650}p{color:var(--muted)}:focus-visible{outline:3px solid var(--primary);outline-offset:4px}::selection{background:#527dff35}.container{width:min(1184px,100% - 64px);margin-inline:auto}.header{border-bottom:1px solid var(--border);background:var(--surface);z-index:20;height:82px;position:relative}.header-inner{align-items:center;gap:64px;height:100%;display:flex}.brand{letter-spacing:-1.1px;align-items:center;gap:9px;font-size:26px;font-weight:800;line-height:1;display:inline-flex}.brand-icon{color:#fff;background:#305bea;border-radius:10px;place-items:center;width:34px;height:34px;display:grid}.brand-dot{color:var(--primary);margin-left:-9px}.desktop-nav{align-items:center;gap:28px;font-size:13px;font-weight:550;display:flex}.desktop-nav a:hover{color:var(--primary)}.new-dot{background:#1bbb91;border-radius:50%;width:5px;height:5px;margin:0 0 7px 3px;display:inline-block}.header-actions{align-items:center;gap:18px;margin-left:auto;display:flex}.search-trigger{background:var(--bg);border:1px solid var(--border);color:var(--muted);border-radius:7px;align-items:center;gap:9px;padding:7px 10px;font-size:12px;display:flex}.search-trigger kbd{border:1px solid var(--border);border-radius:4px;margin-left:22px;padding:0 4px;font-size:10px}.icon-button{color:var(--muted);background:0 0;border-radius:6px;place-items:center;padding:7px;display:inline-grid}.button{white-space:nowrap;border-radius:7px;justify-content:center;align-items:center;gap:9px;padding:12px 21px;font-size:13px;font-weight:600;line-height:1.5;transition:background .15s,transform .15s;display:inline-flex}.button:hover{transform:translateY(-1px)}.button-primary{color:#fff;background:#305bea;box-shadow:0 3px 7px #305bea18}.button-primary:hover{background:#254bd0}.button-secondary{background:var(--surface);border:1px solid var(--border);color:var(--text)}.button-ghost{color:var(--muted);background:0 0}.button-sm{padding:8px 13px;font-size:12px}.button-icon{padding:9px}.mobile-toggle,.mobile-nav{display:none}.eyebrow{letter-spacing:1.5px;text-transform:uppercase;color:var(--primary);align-items:center;gap:9px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;font-weight:600;display:flex}.eyebrow:before{content:"";background:currentColor;width:16px;height:2px}.hero{background:var(--surface);border-bottom:1px solid var(--border);position:relative;overflow:hidden}.hero:before{content:"";background-image:radial-gradient(var(--border).8px,transparent .8px);pointer-events:none;background-size:22px 22px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(90deg,#0000 35%,#000 100%);mask-image:linear-gradient(90deg,#0000 35%,#000 100%)}.hero-inner{grid-template-columns:1fr 1fr;align-items:center;gap:55px;padding-block:79px 75px;display:grid;position:relative}.hero h1{letter-spacing:-3.6px;max-width:580px;margin:19px 0 22px;line-height:1.085}.hero h1 span{color:var(--primary)}.hero-copy>p{max-width:440px;font-size:16px;line-height:1.85}.hero-actions{gap:12px;margin-top:28px;display:flex}.hero-notes{color:var(--muted);gap:22px;margin-top:25px;font-size:11px;display:flex}.hero-notes span{align-items:center;gap:5px;display:flex}.hero-notes svg{color:#179d7e}.browser-card{color:#c4d2ee;background:#111827;border:1px solid #33405b;border-radius:12px;overflow:hidden;transform:rotate(-1.3deg);box-shadow:0 22px 65px #18294b20}.browser-chrome{background:#182033;border-bottom:1px solid #26314a;align-items:center;gap:5px;padding:13px 15px;font-size:10px;display:flex}.browser-chrome i{background:#f07178;border-radius:50%;width:7px;height:7px}.browser-chrome i:nth-child(2){background:#e8c064}.browser-chrome i:nth-child(3){background:#52c5a4}.browser-chrome span{color:#8998b6;margin-left:45px}.browser-chrome b{color:#74d1b1;align-items:center;gap:4px;margin-left:auto;font-weight:400;display:flex}.code-tabs{color:#7988a4;border-bottom:1px solid #26314a;gap:25px;padding:11px 19px;font-family:ui-monospace,monospace;font-size:10px;display:flex}.code-tabs strong{color:#a5b8ff;font-weight:400}.demo-code{white-space:pre;color:#b5c4e1;margin:0;padding:20px 23px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;line-height:2.05;overflow:auto}.demo-code em{color:#9daeff;font-style:normal}.demo-code b{color:#7ed8c7;font-weight:400}.line-number{color:#536079;-webkit-user-select:none;user-select:none;width:26px;display:inline-block}.demo-preview{background:linear-gradient(120deg,#e5e9ff,#e5f8f7);border-radius:5px;justify-content:center;align-items:center;min-height:125px;margin:0 15px 15px;padding:27px;display:flex}.demo-chip{color:#23334f;text-align:center;background:#fff;border-radius:10px;padding:14px 22px;transform:rotate(1.3deg);box-shadow:0 6px 20px #2d477c15}.demo-chip strong{font-size:14px}.demo-chip p{color:#6e7e98;margin:3px 0 0;font-size:10px}.demo-chip svg{vertical-align:middle;color:#4265e8;margin-right:5px}.browser-caption{color:var(--muted);justify-content:space-between;margin-top:17px;padding:0 8px;font-size:10px;display:flex}.trust-strip{border-bottom:1px solid var(--border);background:var(--surface)}.trust-inner{color:var(--muted);justify-content:center;align-items:center;gap:55px;padding:20px 0;font-size:11px;display:flex}.trust-inner span{align-items:center;gap:8px;display:flex}.trust-inner svg{width:15px;height:15px;color:var(--primary)}.section{padding-block:65px}.section-heading{justify-content:space-between;align-items:end;gap:20px;margin-bottom:30px;display:flex}.section-heading h2{margin:8px 0 9px}.section-heading p{margin:0;font-size:13px}.text-link{color:var(--primary);align-items:center;gap:6px;font-size:12px;font-weight:600;display:inline-flex}.directory-controls{justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px;display:flex}.category-tabs{flex-wrap:wrap;gap:7px;display:flex}.category-tab{color:var(--muted);background:0 0;border:1px solid #0000;border-radius:6px;align-items:center;gap:7px;padding:7px 14px;font-size:12px;display:flex}.category-tab.active{background:var(--surface);border-color:var(--border);color:var(--text);font-weight:600;box-shadow:0 2px 5px #11203c05}.category-tab.active svg{color:var(--primary)}.directory-search{background:var(--surface);border:1px solid var(--border);color:var(--muted);border-radius:6px;align-items:center;gap:8px;padding:7px 11px;display:flex}.directory-search input{background:0 0;border:0;outline:0;width:170px;font-size:11px}.tool-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;display:grid}.tool-card{background:var(--surface);border:1px solid var(--border);min-height:214px;box-shadow:var(--shadow);border-radius:9px;flex-direction:column;padding:23px;transition:border-color .2s,transform .2s;display:flex;position:relative}.tool-card:hover{border-color:var(--primary);transform:translateY(-3px)}.tool-card-top{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.tool-icon{color:#4766dd;background:#eff3ff;border:1px solid #e1e7fb;border-radius:10px;place-items:center;width:39px;height:39px;display:grid}.tool-icon.design{color:#8b5cce;background:#f2edff;border-color:#e9e1f9}.tool-icon.database{color:#178b6c;background:#e9f8f3;border-color:#d4eee6}.tool-icon.git{color:#cb7842;background:#fff2e9;border-color:#f5e4d8}.tool-icon.practice{color:#3486ba;background:#e9f6fd;border-color:#d5eaf7}.tool-status{letter-spacing:.3px;color:var(--muted);background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:3px 7px;font-size:9px;font-weight:500}.tool-card h3{margin:0 0 9px;font-size:16px}.tool-card p{max-width:280px;margin-bottom:21px;font-size:12px;line-height:1.75}.tool-card-bottom{color:var(--muted);justify-content:space-between;align-items:center;margin-top:auto;font-size:10px;display:flex}.tool-card-bottom svg{color:var(--primary)}.directory-bottom{text-align:center;color:var(--muted);margin-top:28px;font-size:11px}.feature-band{border-block:1px solid var(--border);background:var(--surface)}.feature-grid{grid-template-columns:1fr 1fr;align-items:center;gap:100px;display:grid}.feature-copy h2{margin:16px 0;font-size:35px;line-height:1.22}.feature-copy>p{max-width:400px;font-size:13px}.feature-list{color:var(--muted);gap:13px;margin:24px 0 28px;font-size:12px;display:grid}.feature-list span{align-items:center;gap:10px;display:flex}.feature-list svg{width:16px;height:16px;color:var(--primary)}.design-demo{border:1px solid var(--border);background:var(--bg);border-radius:12px;padding:32px}.design-demo-top{justify-content:space-between;margin-bottom:20px;font-size:11px;display:flex}.design-demo-top small{color:var(--muted)}.gradient-preview{background:linear-gradient(135deg,#4164ef,#af7aeb 55%,#efbad4);border-radius:8px;place-items:center;height:172px;display:grid;position:relative}.gradient-preview span{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;background:#ffffff20;border:1px solid #ffffff45;border-radius:7px;padding:9px 17px;font-size:12px}.gradient-swatches{gap:8px;margin:18px 0;display:flex}.gradient-swatches i{border:3px solid var(--surface);outline:1px solid var(--border);border-radius:50%;width:21px;height:21px;display:block}.gradient-swatches .swatch-label{color:var(--muted);align-self:center;margin-left:auto;font-family:ui-monospace,monospace;font-size:9px}.design-demo code{background:var(--surface);border:1px solid var(--border);color:var(--muted);border-radius:5px;padding:12px;font-size:10px;line-height:1.8;display:block}.why-grid{grid-template-columns:repeat(3,1fr);gap:60px;margin-top:43px;display:grid}.why-grid svg{color:var(--primary);width:23px;height:23px;margin-bottom:20px}.why-grid h3{margin-bottom:10px;font-size:15px}.why-grid p{font-size:12px;line-height:1.85}.center-heading{text-align:center}.center-heading .eyebrow{justify-content:center}.center-heading h2{margin:13px 0}.center-heading p{font-size:13px}.cta{border:1px solid var(--border);background:var(--surface);border-radius:12px;justify-content:space-between;align-items:center;gap:30px;margin:0 0 64px;padding:35px 43px;display:flex}.cta h2{margin-bottom:9px;font-size:25px}.cta p{margin:0;font-size:12px}.footer{border-top:1px solid var(--border);background:var(--surface);padding:48px 0 0}.footer-top{justify-content:space-between;gap:60px;padding-bottom:40px;display:flex}.footer-top .brand{font-size:22px}.footer-top .brand-icon{width:29px;height:29px}.footer-top p{margin:17px 0 0;font-size:12px;line-height:1.8}.footer-links{gap:85px;display:flex}.footer-links>div{color:var(--muted);flex-direction:column;gap:9px;font-size:11px;display:flex}.footer-links strong{color:var(--text);margin-bottom:6px;font-weight:600}.footer-links a:hover{color:var(--primary)}.footer-bottom{border-top:1px solid var(--border);color:var(--muted);justify-content:space-between;gap:20px;padding:20px 0;font-size:10px;display:flex}.local-indicator{align-items:center;gap:7px;display:flex}.local-indicator>span{background:#19a885;border-radius:50%;width:5px;height:5px}.badge{border:1px solid var(--border);background:var(--surface-alt);color:var(--muted);border-radius:5px;padding:3px 8px;font-size:10px;display:inline-flex}.page-heading{padding:52px 0 30px}.page-heading h1{letter-spacing:-1.5px;margin:12px 0 15px;font-size:40px}.page-heading p{max-width:690px;font-size:14px}.breadcrumbs{color:var(--muted);align-items:center;gap:7px;margin-bottom:20px;font-size:11px;display:flex}.prose{max-width:760px;padding-bottom:60px}.prose h2{margin:35px 0 15px;font-size:24px}.prose h3{margin:25px 0 10px}.prose p,.prose li{color:var(--muted);font-size:14px;line-height:1.9}.prose ul{padding-left:22px;list-style:outside}.prose a{color:var(--primary);text-decoration:underline}.notice{border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:8px;margin-block:18px;padding:15px 19px;font-size:12px}.workspace{background:var(--surface);border:1px solid var(--border);border-radius:10px;margin-bottom:30px;overflow:hidden}.toolbar{border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:8px;padding:12px 16px;display:flex}.toolbar .status{color:var(--muted);margin-left:auto;font-size:11px}.field{flex-direction:column;gap:7px;margin-bottom:15px;font-size:12px;display:flex}.field>span{color:var(--muted)}input:not([type=range],[type=color],[type=checkbox]),select,textarea{border:1px solid var(--border);background:var(--bg);border-radius:6px;min-width:0;padding:9px 11px}input[type=range]{width:100%;accent-color:var(--primary)}input[type=color]{border:1px solid var(--border);background:var(--surface);border-radius:5px;width:43px;height:34px;padding:3px}textarea{resize:vertical}.output-code{white-space:pre-wrap;overflow-wrap:anywhere;color:#c4d1ef;background:#10192c;border-radius:7px;padding:20px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;line-height:1.85}.empty-state{text-align:center;padding:55px}.empty-state p{font-size:13px}.command-dialog{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:12px;width:min(560px,100% - 32px);max-height:75vh;padding:0;box-shadow:0 30px 120px #0004}.command-dialog::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#07122680}.command-search{border-bottom:1px solid var(--border);align-items:center;gap:12px;padding:16px;display:flex}.command-search input{outline:none;flex:1;background:0 0!important;border:0!important;padding:8px 0!important}.command-results{max-height:50vh;padding:8px;overflow:auto}.command-results a,.command-results button{background:0 0;border-radius:5px;align-items:center;gap:10px;width:100%;padding:10px 12px;font-size:13px;display:flex}.command-results a:hover,.command-results button:hover{background:var(--surface-alt)}.command-results small{color:var(--muted);margin-left:auto;font-size:10px}.command-footer{border-top:1px solid var(--border);color:var(--muted);justify-content:space-between;padding:13px 19px;font-size:10px;display:flex}.skip-link{z-index:100;background:var(--primary);color:#fff;padding:10px 20px;position:fixed;top:-100px;left:15px}.skip-link:focus{top:10px}.error-panel{padding:40px}.error-panel h2{font-size:23px}@media (min-width:1500px){.hero-inner{padding-block:105px}.container{width:min(1240px,100% - 100px)}}@media (max-width:1050px){.header-inner{gap:30px}.header-actions{gap:9px}.search-trigger span,.search-trigger kbd{display:none}.hero-inner{gap:35px}.hero h1{letter-spacing:-2.5px;font-size:54px}.feature-grid{gap:50px}.footer-links{gap:45px}.hero-notes{gap:12px}.trust-inner{gap:30px}}@media (max-width:760px){.container{width:calc(100% - 36px)}.header{height:68px}.desktop-nav,.header-cta{display:none}.mobile-toggle{display:inline-grid}.mobile-nav{background:var(--surface);border-bottom:1px solid var(--border);flex-direction:column;gap:16px;padding:20px;font-size:13px;display:flex}.header-inner{gap:10px}.brand{font-size:24px}.hero-inner{grid-template-columns:1fr;gap:40px;padding:50px 0}.hero h1{max-width:540px;font-size:52px}.hero-copy>p{font-size:14px}.browser-card{max-width:530px}.trust-inner{flex-wrap:wrap;gap:14px 25px;padding:19px 0;font-size:10px}.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tool-card{padding:18px}.section{padding-block:43px}.section-heading{align-items:start}.directory-controls{flex-direction:column;align-items:stretch}.category-tabs{gap:3px}.category-tab{padding:6px 10px}.directory-search input{width:100%}.feature-grid{grid-template-columns:1fr;gap:30px}.feature-copy h2{font-size:30px}.why-grid{gap:22px}.why-grid h3{font-size:14px}.why-grid p{font-size:11px}.cta{flex-direction:column;align-items:start;margin-bottom:40px;padding:25px}.cta h2{font-size:22px}.footer-top{flex-direction:column;gap:30px}.footer-links{justify-content:space-between;gap:15px}.footer-bottom{flex-direction:column;gap:8px}.page-heading h1{font-size:33px}}@media (max-width:430px){.tool-grid{grid-template-columns:1fr}.tool-card{min-height:195px}.hero h1{font-size:46px}.hero-notes{gap:12px;font-size:10px}.hero-actions .button{padding:11px 15px}.section-heading{flex-direction:column}.why-grid{grid-template-columns:1fr;gap:16px}.why-grid>div{padding-left:40px;position:relative}.why-grid svg{position:absolute;top:3px;left:0}.why-grid p{font-size:12px}.hero h1{letter-spacing:-2.5px}.design-demo{padding:20px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.settings-grid{grid-template-columns:1fr 1fr;gap:22px;padding-bottom:45px;display:grid}.settings-grid .workspace{margin:0}.settings-card{padding:28px}.settings-card h2{margin-bottom:16px;font-size:20px}.settings-title{color:var(--primary);align-items:center;gap:10px;display:flex}.settings-title h2{color:var(--text);margin:0}.settings-copy{margin:14px 0;font-size:12px;line-height:1.85}.storage-counts>div{border-bottom:1px solid var(--border);justify-content:space-between;padding:9px 0;font-size:12px;display:flex}.storage-counts dt{color:var(--muted)}.storage-counts dd{font-family:ui-monospace,monospace}.settings-actions{flex-wrap:wrap;gap:10px;display:flex}.settings-card hr{border:0;border-top:1px solid var(--border);margin:25px 0}.settings-card input[type=file]{clip-path:inset(50%);width:1px;height:1px;position:absolute}.settings-feedback{min-height:25px;color:var(--primary);grid-column:1/-1;font-size:13px}.check-field{align-items:center;gap:9px;margin:15px 0;font-size:12px;display:flex}.check-field input{accent-color:var(--primary)}@media (max-width:760px){.settings-grid{grid-template-columns:1fr}}.generator-grid{grid-template-columns:300px minmax(0,1fr);display:grid}.generator-controls{border-right:1px solid var(--border);max-height:700px;padding:22px;overflow:auto}.generator-controls h2{margin-bottom:24px;font-size:15px}.generator-field .field{margin-bottom:14px}.field>span{justify-content:space-between;gap:10px;display:flex}.field output{color:var(--text);font-family:ui-monospace,monospace;font-size:11px}.field-help{margin:-7px 0 17px;font-size:10px;line-height:1.7}.color-control{align-items:center;gap:12px;justify-content:start!important;display:flex!important}.color-control code{font-size:11px}.array-field{border:1px solid var(--border);border-radius:7px;min-width:0;margin:18px 0;padding:12px}.array-field legend{padding:0 5px;font-size:12px;font-weight:600}.array-field legend small{color:var(--muted);margin-left:5px;font-weight:400}.array-field details{border-bottom:1px solid var(--border);margin-bottom:12px;padding-bottom:10px}.array-field summary{cursor:pointer;color:var(--muted);margin-bottom:13px;font-size:11px}.generator-result{min-width:0;padding:23px}.preview-label{color:var(--muted);justify-content:space-between;margin-bottom:14px;font-size:10px;display:flex}.preview-label>span:first-child{align-items:center;gap:6px;display:flex}.preview-label i{background:#20ad87;border-radius:50%;width:5px;height:5px}.css-preview{background-color:var(--bg);background-image:radial-gradient(var(--border).8px,transparent .8px);border:1px solid var(--border);isolation:isolate;background-size:15px 15px;border-radius:8px;justify-content:center;align-items:center;height:295px;padding:30px;display:flex;overflow:hidden}.demo-shape{color:#fff;text-align:center;background:linear-gradient(135deg,#4164ef,#9c7fe6);border-radius:12px;place-items:center;width:190px;height:165px;padding:20px;font-size:13px;display:grid}.demo-typography{letter-spacing:-1px;color:var(--text);font-size:32px;font-weight:700}.demo-layout{width:100%;min-height:220px}.demo-child{color:var(--primary);background:#4164ef17;border:1px solid #4164ef45;border-radius:5px;place-items:center;min-height:50px;padding:10px;font-family:ui-monospace,monospace;font-size:12px;display:grid}.glass-preview{background:radial-gradient(at 15% 20%,#f3a7d1,#0000 60%),linear-gradient(140deg,#425fe8,#53c6d8)}.color-preview{text-align:center;border-radius:7px;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:15px;font-size:12px;display:flex}.color-preview strong{font-size:66px;line-height:1.3}.color-preview p{margin:10px 0;font-size:10px}.palette-results{margin-top:20px}.palette-swatches{border-radius:6px;display:flex;overflow:hidden}.palette-swatches>div{flex:1;height:63px;position:relative}.palette-swatches span{color:#142038;background:#fff;border-radius:3px;padding:1px 4px;font-family:ui-monospace,monospace;font-size:8px;position:absolute;bottom:5px;left:5px}.palette-results dl>div{gap:12px;margin:5px 0;font-size:11px;display:flex}.palette-results dt{width:55px;color:var(--muted)}.palette-results dd{font-family:ui-monospace,monospace}.palette-results p{margin-top:13px;font-size:10px;line-height:1.7}.code-heading{justify-content:space-between;align-items:center;margin:24px 0 10px;display:flex}.code-heading h2{margin:0;font-size:13px}.code-heading span{color:var(--muted);font-size:10px}.generator-result .output-code{max-height:300px;margin:0;font-size:11px;overflow:auto}.generator-handoff{align-items:center;gap:15px;margin-top:15px;display:flex}.generator-handoff>span{color:var(--muted);font-size:10px}.tool-feedback{border-top:1px solid var(--border);color:var(--muted);background:var(--bg);overflow-wrap:anywhere;padding:12px 20px;font-size:11px}.feedback-error{color:#d14646}.manual-copy{padding:20px}.preset-panel{border-bottom:1px solid var(--border);background:var(--bg);grid-template-columns:1fr 2fr;gap:25px;padding:20px;display:grid}.preset-panel input[type=file]{max-width:100%;font-size:10px}.preset-list{flex-wrap:wrap;align-content:start;gap:10px;display:flex}.preset-list>div{border:1px solid var(--border);background:var(--surface);border-radius:6px;display:flex}.preset-list button{overflow-wrap:anywhere;background:0 0;padding:8px 12px;font-size:11px}.preview-width{margin-top:16px}.bezier-chart{border:1px solid var(--border);border-radius:6px;width:150px;height:150px}.tool-article{grid-template-columns:minmax(0,760px) 1fr;gap:65px;margin-top:40px;display:grid}.prose ol{padding-left:22px;list-style:decimal}.prose li{margin-bottom:10px;padding-left:4px}.related-tools{padding:30px 0}.related-tools h2{margin:16px 0 22px;font-size:18px}.related-tools>a{border-bottom:1px solid var(--border);justify-content:space-between;padding:12px 0;font-size:12px;display:flex}.related-tools>a span{color:var(--primary)}.related-tools p{margin-top:28px;font-size:11px;line-height:1.8}.related-tools p a{color:var(--primary)}@media (max-width:900px){.generator-grid{grid-template-columns:250px minmax(0,1fr)}.generator-result{padding:16px}.generator-handoff{flex-wrap:wrap}.tool-article{grid-template-columns:2fr 1fr;gap:30px}}@media (max-width:650px){.generator-grid{grid-template-columns:1fr}.generator-controls{border-right:0;border-bottom:1px solid var(--border);max-height:360px}.css-preview{height:250px;padding:20px}.tool-article{grid-template-columns:1fr;gap:0}.related-tools{padding:0 0 35px}.preset-panel{grid-template-columns:1fr}.toolbar .status,.code-heading span{display:none}}.git-builder-grid{grid-template-columns:270px minmax(0,1fr);display:grid}.git-goals{border-right:1px solid var(--border);max-height:800px;padding:20px;overflow:auto}.git-goals h2{letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:25px 0 10px;font-family:ui-monospace,monospace;font-size:10px}.git-goals button{text-align:left;background:0 0;border:1px solid #0000;border-radius:6px;flex-direction:column;align-items:start;width:100%;margin-bottom:3px;padding:9px 12px;display:flex}.git-goals button.active{background:var(--surface-alt);border-color:var(--border)}.git-goals button span{font-size:12px}.git-goals button code{color:var(--muted);font-size:9px}.git-command{padding:30px}.command-title h2{margin:13px 0;font-size:25px}.command-title p{font-size:13px}.command-fields{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin:24px 0 12px;display:grid}.field small{color:var(--muted);font-size:10px;line-height:1.8}.command-flags{border:1px solid var(--border);border-radius:7px;margin-bottom:22px;padding:10px 18px}.command-flags legend{color:var(--muted);padding:0 5px;font-size:11px}.command-flags .check-field{align-items:start}.command-flags small{color:var(--muted);font-size:10px;line-height:1.8;display:block}.command-flags input{margin-top:5px}.command-output-heading{justify-content:space-between;align-items:center;gap:20px;display:flex}.command-output-heading select{font-size:11px}.danger-badge{border:1px solid var(--border);text-transform:capitalize;border-radius:5px;align-items:center;gap:6px;padding:4px 10px;font-size:11px;display:inline-flex}.danger-badge.safe{color:#11836a;background:#20a8860c}.danger-badge.caution{color:#a26a16;background:#d49d2410}.danger-badge.destructive{color:#cf4848;background:#cf48480d}.git-warning{color:#a26a16;background:#d49d240a;border:1px solid #d1a24f55;border-radius:7px;gap:12px;margin:18px 0;padding:16px;display:flex}.git-warning.destructive{color:#cf4848;background:#cf48480a;border-color:#cf484855}.git-warning>svg{flex:none;margin-top:2px}.git-warning strong{font-size:12px}.git-warning p{color:inherit;margin:7px 0 0;font-size:11px;line-height:1.8}.danger-confirm{margin:18px 0;font-size:11px;font-weight:600}.command-explanation{color:var(--muted);margin-top:25px;font-size:12px}.command-explanation summary{cursor:pointer}.command-explanation li{margin-top:10px;font-size:11px;line-height:1.9}.graph-layout{grid-template-columns:270px minmax(0,1fr);display:grid}.graph-controls{border-right:1px solid var(--border);padding:23px}.graph-controls>.eyebrow{letter-spacing:.6px;margin-bottom:25px;font-size:10px}.graph-controls input[type=file]{max-width:100%;font-size:10px}.graph-controls hr{border:0;border-top:1px solid var(--border);margin:25px 0}.graph-result{min-width:0}.graph-canvas{background-image:radial-gradient(var(--border).7px,transparent .7px);background-size:17px 17px;min-height:300px;max-height:560px;padding:15px;overflow:auto}.graph-canvas svg{width:100%;min-width:560px}.history-controls{border-block:1px solid var(--border);justify-content:center;align-items:center;gap:22px;padding:15px;display:flex}.history-controls>span{color:var(--muted);font-size:11px}.graph-snapshots{grid-template-columns:repeat(3,1fr);gap:15px;padding:20px;font-size:10px;display:grid}.graph-snapshots details{min-width:0}.graph-snapshots summary{cursor:pointer;color:var(--muted)}.graph-snapshots pre{white-space:pre-wrap;font-size:10px}.comparison-intro{border-bottom:1px solid var(--border);padding:20px 25px}.comparison-intro p{max-width:700px;margin:15px 0;font-size:12px}.graph-controls .field{margin-bottom:20px}@media (max-width:760px){.git-builder-grid,.graph-layout{grid-template-columns:1fr}.git-goals{border-right:0;border-bottom:1px solid var(--border);max-height:260px}.git-command{padding:22px}.graph-controls{border-right:0;border-bottom:1px solid var(--border)}.graph-snapshots{grid-template-columns:1fr}}.project-bar{border-bottom:1px solid var(--border);background:var(--bg);flex-wrap:wrap;align-items:center;gap:20px;padding:13px 18px;display:flex}.project-bar label{color:var(--muted);align-items:center;gap:10px;font-size:10px;display:flex}.project-bar input{width:230px;font-size:12px}.project-bar select{font-size:11px}.project-bar .text-link{background:0 0;margin-left:auto}.inline-toggle{color:var(--muted);align-items:center;gap:6px;font-size:11px;display:inline-flex}.inline-toggle input{accent-color:var(--primary)}.playground-layout{grid-template-columns:var(--editor-split,52%)minmax(0,1fr);display:grid}.editor-panel{border-right:1px solid var(--border);background:#1e1e1e;min-width:0}.editor-tabs{background:#182034;gap:4px;padding:0 10px;display:flex}.editor-tabs button{color:#8798b9;background:0 0;border-bottom:2px solid #0000;align-items:center;gap:6px;padding:12px 16px;font-family:ui-monospace,monospace;font-size:10px;display:flex}.editor-tabs button.active{color:#d5e0ff;background:#202b43;border-color:#6f94ff}.editor-tabs .copy-source{margin-left:auto}.editor-accessibility{color:#a5b6d6;background:#202838;justify-content:space-between;align-items:center;height:26px;padding:0 14px;font-size:9px;display:flex}.editor-accessibility button{color:#a5b6d6;background:0 0;padding:0;font-size:9px}.plain-editor{resize:vertical;tab-size:2;width:100%;height:320px;display:block;color:#d2ddf5!important;background:#111b2d!important;border:0!important;border-radius:0!important;padding:18px!important;font-family:ui-monospace,SFMono-Regular,Consolas,monospace!important;font-size:12px!important;line-height:1.8!important}.editor-loading{height:320px;color:var(--muted);background:var(--surface);place-items:center;font-size:12px;display:grid}.playground-preview{background:var(--bg);min-width:0;padding:15px}.preview-iframe{display:block}.preview-stopped{color:var(--muted);border:1px dashed var(--border);background:var(--surface);border-radius:6px;place-items:center;font-size:12px;display:grid}.split-control{color:var(--muted);border-block:1px solid var(--border);align-items:center;gap:15px;padding:7px 18px;font-size:10px;display:flex}.split-control input{max-width:180px}.console-heading{border-bottom:1px solid var(--border);align-items:center;gap:14px;padding:8px 17px;display:flex}.console-heading h2{margin:0;font-size:11px}.console-heading h2 span{color:var(--muted);margin-left:7px;font-family:ui-monospace,monospace;font-size:9px;font-weight:400}.console-heading select{margin-left:auto;font-size:10px;padding:3px 8px!important}.console-entries{background:var(--bg);min-height:80px;max-height:180px;padding:8px 17px;overflow:auto}.console-entries>p{margin:13px 0;font-size:10px}.console-entry{border-bottom:1px solid var(--border);align-items:baseline;gap:14px;padding:5px 0;font-size:11px;display:flex}.console-entry>span{color:var(--muted);flex:none;width:35px;font-size:9px}.console-entry code{white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}.console-entry.error{color:#da5252}.console-entry.warn{color:#ac781f}.console-entry.info{color:var(--primary)}.export-bar{border-top:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:9px;padding:14px 17px;display:flex}.project-import{border:1px solid var(--border);cursor:pointer;border-radius:5px;align-items:center;gap:8px;padding:5px 9px;font-size:11px;display:flex}.project-import input{max-width:150px;font-size:9px}.projects-panel{border-bottom:1px solid var(--border);background:var(--bg);padding:20px}.projects-panel h2{margin-bottom:15px;font-size:15px}.projects-panel p{margin:14px 0 0;font-size:11px}.projects-list>div{border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:10px;padding:8px 0;display:flex}.projects-list>div>button:first-child{text-align:left;overflow-wrap:anywhere;max-width:400px;color:var(--primary);background:0 0;margin-right:auto;font-size:12px}.projects-list small{color:var(--muted);font-size:10px}.responsive-toolbar{border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:8px;padding:12px;display:flex}.responsive-toolbar label:not(.check-field){align-items:center;gap:5px;font-size:10px;display:flex}.responsive-toolbar input[type=number]{width:65px;font-size:10px;padding:5px!important}.responsive-toolbar select{font-size:10px;padding:4px!important}.responsive-toolbar .check-field{margin:0;font-size:10px}.breakpoint-ruler{color:var(--muted);border-bottom:1px solid var(--border);background:repeating-linear-gradient(to right,transparent 0,transparent 9px,var(--border)9px,var(--border)10px)bottom/100% 4px no-repeat;justify-content:space-between;padding:6px 18px;font-family:ui-monospace,monospace;font-size:9px;display:flex}.device-stage{background:var(--surface-alt);gap:24px;padding:25px;display:flex;overflow:auto}.device-column{flex:none}.device-label{color:var(--muted);margin-bottom:10px;font-size:10px}.media-inspector{border-top:1px solid var(--border);background:var(--surface);padding:20px}.media-inspector h3{letter-spacing:0;margin-bottom:14px;font-size:12px}.media-inspector>div{align-items:center;gap:10px;margin:8px 0;font-size:10px;display:flex}.media-inspector>div>span{border:1px solid var(--border);min-width:62px;color:var(--muted);border-radius:4px;padding:2px 6px;font-size:9px}.media-inspector .query-active{color:#11836a;background:#11836a10}.media-inspector p{margin:12px 0 0;font-size:10px}.responsive-source{grid-template-columns:repeat(3,1fr);gap:15px;padding:20px;display:grid}.responsive-source textarea{font-family:ui-monospace,monospace;font-size:11px;line-height:1.8}.playground-preview .device-stage{padding:15px}.playground-preview .responsive-toolbar{padding:0 0 12px}.playground-preview .media-inspector{padding:15px}@media (max-width:850px){.playground-layout{grid-template-columns:1fr}.editor-panel{border-right:0}.playground-preview{border-top:1px solid var(--border)}.split-control{display:none}.responsive-source{grid-template-columns:1fr}.project-bar{gap:12px}.project-bar input{width:190px}}@media (max-width:500px){.project-bar .text-link{margin-left:0}.export-bar{gap:7px}.project-import{justify-content:space-between;width:100%}.responsive-toolbar .button{padding:6px}.device-stage{padding:15px}}.editor-slot{border-bottom:1px solid #32415b}.editor-slot .plain-editor{min-height:160px}.editor-slot .editor-loading{height:160px}@media (max-width:850px){.editor-slot:not(.active){display:none}.editor-slot .monaco-editor,.editor-slot .plain-editor{min-height:240px}}.guide-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:55px;display:grid}.guide-card{background:var(--surface);border:1px solid var(--border);border-radius:9px;flex-direction:column;align-items:start;min-height:230px;padding:27px;display:flex}.guide-card>svg{color:var(--primary);margin-bottom:20px}.guide-card small{color:var(--muted);margin-bottom:15px;font-family:ui-monospace,monospace;font-size:10px}.guide-card h2,.guide-card h3{margin-bottom:13px;font-size:19px}.guide-card p{font-size:12px;line-height:1.85}.guide-card>span{color:var(--primary);align-items:center;gap:7px;margin-top:auto;font-size:11px;display:flex}.guide-card:hover{border-color:var(--primary)}.guide-prose{max-width:800px;margin:auto}.guide-prose pre{color:#d0dcf6;background:#10192c;border-radius:7px;padding:20px;font-size:12px;line-height:1.9;overflow:auto}.guide-prose p code,.guide-prose li code{background:var(--surface-alt);overflow-wrap:anywhere;border-radius:3px;padding:2px 4px;font-size:.88em}.embedded-example{padding:35px 0 65px}.embedded-example .section-heading h2{font-size:25px}.recent-tools{border-top:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:22px;padding-top:25px;display:flex}.recent-tools h3{max-width:130px;margin:0;font-size:13px}.recent-tools>a:not(.text-link){font-size:11px}.recent-tools small{color:var(--muted);font-size:9px;display:block}.consent-banner{z-index:99;border:1px solid var(--border);background:var(--surface);border-radius:10px;max-width:430px;padding:23px;position:fixed;bottom:20px;left:20px;box-shadow:0 8px 45px #0002}.consent-banner strong{font-size:15px}.consent-banner p{margin:10px 0;font-size:12px;line-height:1.8}.consent-banner>label{margin:8px 0;font-size:12px;display:block}.consent-banner>div{gap:10px;margin-top:15px;display:flex}.sponsor-slot{border:1px solid var(--border);background:var(--surface);border-radius:8px;min-height:150px;margin:35px 0 50px;padding:25px}.sponsor-slot>small{letter-spacing:1.5px;color:var(--muted);margin-bottom:15px;font-size:9px;display:block}.sponsor-slot p{font-size:12px}.theme-toggle{min-width:33px;font-size:22px;line-height:1}.category-tab[hidden],.command-results a[hidden]{display:none}@media (max-width:760px){.guide-grid{grid-template-columns:1fr}.guide-card{min-height:200px}.embedded-example .section-heading,.recent-tools{align-items:start}.recent-tools h3{width:100%;max-width:none}.consent-banner{max-width:none;bottom:15px;left:15px;right:15px}}.related-tools p a,.field-help a,.notice a{text-underline-offset:3px;text-decoration:underline}.danger-badge.safe{color:#0c735b}.danger-badge.caution,.git-warning{color:#87560c}:root[data-theme=dark] .danger-badge.safe{color:#65d5ad}:root[data-theme=dark] .git-warning,:root[data-theme=dark] .danger-badge.caution{color:#eac378}.css-loading{height:804.15px}.css-workspace{min-height:804.15px}.generator-grid{min-height:700px}@media (max-width:650px){.css-loading{height:1050px}.generator-grid{min-height:0}.css-workspace{min-height:900px}}.ad-slot{border:1px solid var(--border);border-radius:8px;min-height:280px;margin:40px 0;padding:15px}.ad-slot>span{color:var(--muted);margin-bottom:10px;font-size:10px;display:block}.inline-field{color:var(--muted);align-items:center;gap:8px;font-size:11px;display:flex}.inline-field select{font-size:11px;padding:6px 9px!important}.data-table-scroll{border:1px solid var(--border);background:var(--surface);border-radius:7px;max-height:420px;overflow:auto}.data-table{border-collapse:collapse;white-space:nowrap;width:100%;font-family:ui-monospace,monospace;font-size:11px}.data-table caption{text-align:left;background:var(--surface-alt);color:var(--muted);padding:11px 14px;font-family:ui-sans-serif,system-ui;font-size:10px}.data-table th{background:var(--bg);text-align:left;color:var(--text);font-weight:600;position:sticky;top:0}.data-table td,.data-table th{border-bottom:1px solid var(--border);padding:10px 13px}.data-table td{color:var(--muted);text-overflow:ellipsis;max-width:400px;overflow:hidden}.data-table td em{color:var(--muted);opacity:1;font-size:9px;font-style:normal}.data-table tr.row-highlight td{color:var(--primary);background:#4164ef13}.table-empty{padding:15px;font-size:11px}.join-controls{border-bottom:1px solid var(--border);align-items:end;gap:25px;padding:22px;display:flex}.join-controls .field{flex:1;min-width:150px}.join-indicator{width:180px;height:85px}.source-tables{grid-template-columns:1fr 1fr;gap:20px;padding:22px;display:grid}.join-result{padding:0 22px 22px}.join-result h2{font-size:18px}.join-result p{font-size:11px}.join-result .history-controls{border:0;padding:0}.join-compare{grid-template-columns:repeat(5,1fr);gap:10px;margin:22px 0;display:grid}.join-compare button{color:var(--muted);border:1px solid var(--border);background:var(--bg);border-radius:6px;padding:9px;font-size:10px}.join-compare button[aria-pressed=true]{color:var(--primary);border-color:var(--primary)}.join-compare strong{margin-top:4px;font-family:ui-monospace,monospace;font-size:12px;display:block}.editable-tables{border-bottom:1px solid var(--border);grid-template-columns:1fr 1fr;gap:18px;padding:22px;display:grid}.editable-tables textarea{font-family:ui-monospace,monospace;font-size:11px}.clause-layout{grid-template-columns:300px minmax(0,1fr);display:grid}.clause-layout>aside{border-right:1px solid var(--border);padding:25px}.clause-layout .output-code{font-size:10px}.clause-steps{border-bottom:1px solid var(--border);flex-wrap:wrap;gap:7px;padding:20px;display:flex}.clause-steps button{background:var(--bg);border:1px solid var(--border);border-radius:5px;align-items:center;gap:7px;padding:7px 10px;font-size:10px;display:flex}.clause-steps button.active{border-color:var(--primary);color:var(--primary)}.clause-steps span{opacity:.6;font-family:ui-monospace,monospace}.clause-steps small{color:var(--muted);font-size:9px}.clause-output{padding:25px}.clause-output h2{font-size:21px}.clause-output p{font-size:12px}.clause-output .settings-actions{margin-top:20px}.relationship-canvas{background:var(--bg)}.relationship-canvas .react-flow__controls button{background:var(--surface);color:var(--text);fill:currentColor}.sql-workspace-settings{border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:18px;padding:18px 22px;display:flex}.sql-workspace-settings .field{flex:1;min-width:180px;margin:0}.sql-secondary-toolbar{border-block:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:8px;padding:13px 20px;display:flex}.sql-results{padding:22px}.sql-results>p{font-size:12px}.sql-results>section+section{margin-top:20px}.sql-results h2{font-size:20px}.plan-tree{border-left:1px solid var(--border);margin:15px 0;padding-left:20px;font-family:ui-monospace,monospace;font-size:11px}.plan-tree summary{cursor:pointer;color:var(--primary)}.plan-tree dl{color:var(--muted);margin:10px 0;font-size:10px}.plan-tree dl>div{gap:15px;margin:4px 0;display:flex}.plan-tree dd{margin:0}.sql-exercises{border-top:1px solid var(--border);background:var(--bg);padding:22px}.sql-exercises h2{font-size:17px}.sql-exercises p,.sql-exercises details{font-size:12px}.sql-exercises details{margin-top:18px}.sql-loading{min-height:600px}@media (max-width:760px){.source-tables,.editable-tables,.clause-layout{grid-template-columns:1fr}.join-controls{flex-wrap:wrap;gap:15px}.join-controls .field{min-width:120px}.join-indicator{width:140px;height:60px}.clause-layout>aside{border-right:0;border-bottom:1px solid var(--border)}.join-compare{gap:5px}.join-compare button{padding:7px 4px;font-size:9px}.join-result .section-heading{align-items:start}}.typing-loading{min-height:650px}.duration-buttons{border:1px solid var(--border);background:var(--bg);border-radius:6px;gap:3px;padding:3px;display:flex}.duration-buttons button{color:var(--muted);background:0 0;border-radius:4px;padding:5px 11px;font-family:ui-monospace,monospace;font-size:11px}.duration-buttons button.active{background:var(--surface);color:var(--primary);box-shadow:0 1px 4px #0001}.typing-metrics{border-bottom:1px solid var(--border);grid-template-columns:repeat(4,1fr);gap:25px;padding:28px 35px;display:grid}.typing-metrics>div{flex-direction:column;align-items:center;display:flex}.typing-metrics strong{letter-spacing:-1.5px;color:var(--primary);font-family:ui-monospace,monospace;font-size:34px;font-weight:600;line-height:1.2}.typing-metrics strong small{margin-left:3px;font-size:17px}.typing-metrics>div>span{color:var(--muted);margin-top:7px;font-size:10px}.typing-target{border:1px solid var(--border);background:var(--bg);letter-spacing:.2px;white-space:pre-wrap;overflow-wrap:break-word;scroll-behavior:auto;border-radius:9px;max-height:190px;margin:28px 32px 22px;padding:22px 25px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:20px;line-height:1.9;position:relative;overflow:auto}.typing-target.code-target{tab-size:2;max-height:245px;font-size:15px}.pending-char{color:var(--muted)}.correct-char{color:#087e66}.incorrect-char{color:#bd3030;background:#de4a4a1c;border-bottom:2px solid #bd3030}.current-char{color:var(--text);border-left:2px solid var(--primary);background:#4164ef12;margin-left:-2px}.newline-marker{opacity:.7;font-size:.75em}.typing-input-area{padding:0 32px 24px}.typing-input{resize:none;min-height:68px;font-family:ui-monospace,monospace;font-size:13px;line-height:1.8}.typing-input:disabled{opacity:.7}.typing-input-bottom{justify-content:space-between;align-items:center;gap:15px;display:flex}.typing-input-bottom>span{color:var(--muted);font-size:10px}.typing-summary{border-top:1px solid var(--border);background:var(--bg);padding:30px 32px}.typing-summary h2{margin:15px 0;font-size:26px}.typing-summary p{font-size:12px}.typing-summary h3{margin:28px 0 18px;font-size:15px}.keyboard-map{flex-direction:column;gap:6px;max-width:650px;display:flex}.keyboard-row{justify-content:center;gap:5px;display:flex}.keyboard-key{border:1px solid var(--border);background:var(--surface);min-width:39px;min-height:43px;color:var(--text);border-radius:5px;flex-direction:column;justify-content:center;align-items:center;font-family:ui-monospace,monospace;font-size:12px;display:flex}.keyboard-key small{color:var(--muted);font-size:9px}.keyboard-key.has-errors{color:#a52727;background:#c93d3d14;border-color:#c93d3d45}.keyboard-key.has-errors small{color:inherit}.keyboard-key.wide{min-width:130px}.mistake-list{grid-template-columns:1fr 1fr;gap:9px 25px;max-width:620px;margin-top:20px;padding:0;list-style:none;display:grid}.mistake-list li{color:var(--muted);justify-content:space-between;font-size:11px;display:flex}.mistake-list code{color:var(--text)}.typing-history{border-top:1px solid var(--border);padding:27px 32px}.typing-history h2{font-size:19px}.typing-history .section-heading p{max-width:600px;font-size:11px}.typing-chart{min-height:270px;margin-bottom:25px}.custom-practice{background:var(--bg);border-bottom:1px solid var(--border);padding:22px 30px}.custom-practice textarea{font-family:ui-monospace,monospace;font-size:12px}.custom-practice p{margin:12px 0 0}:root[data-theme=dark] .correct-char{color:#63d6b0}:root[data-theme=dark] .incorrect-char,:root[data-theme=dark] .keyboard-key.has-errors{color:#ff9292}@media (max-width:760px){.typing-metrics{gap:12px;padding:25px 15px}.typing-metrics strong{font-size:27px}.typing-metrics>div>span{text-align:center;font-size:9px}.typing-target{margin:20px 18px;padding:15px;font-size:17px}.typing-input-area,.typing-summary,.typing-history{padding:20px 18px}.typing-input-area{padding-top:0}.keyboard-key{min-width:26px;min-height:38px;font-size:10px}.keyboard-row{gap:3px}.keyboard-key.wide{min-width:100px}.mistake-list{grid-template-columns:1fr}.typing-input-bottom{align-items:start}.duration-buttons button{padding:5px 8px}}.relationship-canvas .react-flow__attribution{background:var(--surface)}.relationship-canvas .react-flow__attribution a{color:var(--muted)}.utility-workspace{padding:24px}.utility-columns{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px;margin-top:20px;display:grid}.utility-columns label{gap:10px;font-size:13px;font-weight:600;display:grid}.utility-columns textarea{width:100%;min-height:220px}.utility-workspace select,.utility-workspace input:not([type=checkbox]):not([type=file]){border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:6px;padding:7px}.utility-output{border:1px solid var(--border);white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface);border-radius:8px;width:100%;min-height:240px;max-height:540px;padding:16px;font:12px/1.8 ui-monospace,monospace;display:block;overflow:auto}.utility-status{white-space:pre-wrap;padding:14px 0}.diff-line.added{color:#14532d;background:#dcfce7}.diff-line.removed{color:#7f1d1d;background:#fee2e2}.diff-line>span:first-child{width:20px;display:inline-block}.utility-workspace .notice{margin-top:20px}.design-controls{gap:12px;display:grid}.design-controls label{gap:7px;display:grid}.design-controls input[type=range]{width:100%;accent-color:var(--primary)}.design-controls output{color:var(--muted);font:12px ui-monospace,monospace}.design-preview{border:1px solid var(--border);background:repeating-conic-gradient(var(--surface)0% 25%,var(--bg)0% 50%)50%/24px 24px;border-radius:12px;place-items:center;min-height:350px;display:grid;overflow:hidden}.design-preview-object{color:#fff;background:linear-gradient(140deg,#4164ef,#153185);border-radius:22px;width:210px;height:240px;padding:24px;position:relative}.design-preview-object span{letter-spacing:3px;font-size:10px}.design-preview-object strong{margin-top:22px;font-size:27px;line-height:1.2;display:block}.design-preview-object i{background:#59d9e9;border-radius:50%;width:100px;height:100px;display:block;position:absolute;bottom:-20px;right:-20px}.token-swatches{flex-wrap:wrap;gap:18px;margin-top:20px;font-size:12px;display:flex}.token-swatches span{border:1px solid var(--border);border-radius:8px;height:45px;margin-bottom:6px;display:block}.tool-card-wrap{min-width:0;position:relative}.tool-card-wrap>.tool-card{height:100%}.favorite-toggle{border:1px solid var(--border);background:var(--surface);width:30px;height:30px;color:var(--text);cursor:pointer;border-radius:7px;font-size:19px;position:absolute;top:18px;right:65px}.favorite-toggle[aria-pressed=true]{color:var(--primary);background:var(--surface-alt)}.personal-tool-controls{flex-wrap:wrap;align-items:center;gap:16px;margin:0 0 20px;font-size:12px;display:flex}.personal-tool-controls label{align-items:center;gap:10px;display:flex}.personal-tool-controls select{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:7px;padding:8px}.personal-tool-controls>button{color:var(--muted);text-decoration:underline}.personal-tool-controls p{min-height:18px;color:var(--muted)}.shortcut-dialog{border:1px solid var(--border);background:var(--surface);width:calc(100% - 36px);max-width:560px;color:var(--text);border-radius:16px;padding:24px}.shortcut-dialog::backdrop{background:#10182b99}.shortcut-dialog dl>div{border-bottom:1px solid var(--border);grid-template-columns:140px 1fr;gap:14px;padding:12px 0;font-size:13px;display:grid}.shortcut-dialog p,.workspace-subpanel p{color:var(--muted);font-size:13px;line-height:1.8}.workspace-subpanel{border:1px solid var(--border);border-radius:10px;margin:14px 0;padding:18px}.workspace-subpanel summary{cursor:pointer;font-size:14px;font-weight:700}.workspace-subpanel input,.workspace-subpanel select{max-width:100%;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:7px}.workspace-subpanel .plain-editor{width:100%;min-height:120px;margin:10px 0}.revision-list{gap:10px;padding:0;list-style:none;display:grid}.revision-list li{flex-wrap:wrap;align-items:center;gap:18px;font-size:13px;display:flex}.revision-list button{text-align:left}.revision-list button:hover{text-decoration:underline}@media (max-width:600px){.shortcut-dialog dl>div{grid-template-columns:100px 1fr}.shortcut-trigger{width:28px}.header-actions{gap:6px}}.practice-goals{border-top:1px solid var(--border);padding:24px}.practice-goals h2{margin-bottom:16px;font-size:20px}.practice-goals label{gap:6px;font-size:12px;display:grid}.practice-goals input{border:1px solid var(--border);background:var(--surface);width:100px;color:var(--text);border-radius:6px;padding:7px}.practice-goals p{color:var(--muted);font-size:12px;line-height:1.8}.goal-calendar{grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin:18px 0;display:grid}.goal-calendar>div{text-align:center;border:1px solid var(--border);border-radius:8px;gap:8px;padding:10px 4px;font-size:10px;display:grid}.goal-calendar progress{width:100%;height:8px;accent-color:var(--primary)}@media (max-width:600px){.goal-calendar{grid-template-columns:repeat(4,minmax(0,1fr))}.practice-goals{padding:18px}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}