*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;}body{margin:0;font-family:inherit;line-height:inherit;}ul:not([class]),ol:not([class]),.prose ul,.prose ol,ul,ol{list-style:revert;padding-left:2rem;margin:0.5rem 0;}ul li,ol li{margin-bottom:0.25rem;}/** * @section Button Base */ /** @public Base button - apply this first,then add variant */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);white-space:nowrap;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--font-medium);transition:all var(--transition-base);cursor:pointer;border:1px solid transparent;padding:var(--spacing-2) var(--spacing-4);height:2.5rem;line-height:1;}.btn:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px;}.btn:disabled{pointer-events:none;opacity:0.5;}.btn.btn-icon-start{flex-direction:row;}.btn.btn-icon-start i,.btn.btn-icon-start .icon{margin-right:var(--spacing-1);}.btn.btn-icon-end{flex-direction:row-reverse;}.btn.btn-icon-end i,.btn.btn-icon-end .icon{margin-left:var(--spacing-1);}.btn.btn-icon i,.btn.btn-icon .icon{margin:0;}/** * @section Button Variants */ /** @public Primary action button - filled with brand color */ .btn-default{background-color:hsl(var(--primary));color:hsl(var(--primary-foreground));}.btn-default:hover{background-color:hsl(var(--primary) / 0.9);}/** @public Alias for btn-default (v1 compatibility) */ .btn-primary{background-color:hsl(var(--primary));color:hsl(var(--primary-foreground));}.btn-primary:hover{background-color:hsl(var(--primary) / 0.9);}/** @public Secondary action button - light fill */ .btn-secondary{background-color:hsl(var(--secondary));color:hsl(var(--secondary-foreground));}.btn-secondary:hover{background-color:hsl(var(--secondary) / 0.8);}/** @public Destructive action button - delete/danger (red) */ .btn-destructive{background-color:hsl(var(--destructive));color:hsl(var(--destructive-foreground));}.btn-destructive:hover{background-color:hsl(var(--destructive) / 0.9);}/** @public Outlined border button */ .btn-outline{border:1px solid hsl(var(--border));background-color:transparent;color:hsl(var(--foreground));}.btn-outline:hover{background-color:hsl(var(--muted));color:hsl(var(--muted-foreground));}/** @public Transparent button with subtle hover */ .btn-ghost,.btn-icon:not(.btn-subtle):not(.btn-default):not(.btn-primary):not(.btn-secondary):not(.btn-destructive):not(.btn-outline){background-color:transparent;color:hsl(var(--foreground));}.btn-ghost:hover,.btn-icon:not(.btn-subtle):not(.btn-default):not(.btn-primary):not(.btn-secondary):not(.btn-destructive):not(.btn-outline):hover{background-color:hsl(var(--muted));color:hsl(var(--muted-foreground));}/** @public Transparent default,muted hover,primary when active - perfect for navigation/tabs/filters */ .btn-subtle{background-color:transparent;color:hsl(var(--foreground));border:1px solid transparent;height:auto;padding:var(--spacing-2) var(--spacing-4);font-size:var(--text-sm);}.btn-subtle:hover{background-color:hsl(var(--muted));}.btn-subtle.active,.btn-subtle:active{color:hsl(var(--primary-foreground));background-color:hsl(var(--primary));}.btn-subtle.btn-sm{height:auto;padding:var(--spacing-2) var(--spacing-4);font-size:var(--text-sm);}/** @public Text link style button with underline */ .btn-link{background-color:transparent;color:hsl(var(--primary));text-decoration:underline;text-underline-offset:4px;}.btn-link:hover{text-decoration:none;}/** @public Accent-colored link with underline (not a button) */ .link{background-color:transparent;color:hsl(var(--accent));text-decoration:underline;text-underline-offset:4px;cursor:pointer;transition:all var(--transition-base);}.link:hover{color:hsl(var(--accent) / 0.8);text-decoration:none;}/** * @section Button Sizes */ /** @public Small button (2rem height) */ .btn-sm{height:2rem;padding:var(--spacing-1) var(--spacing-3);font-size:var(--text-xs);}/** @public Large button (3rem height) */ .btn-lg{height:3rem;padding:var(--spacing-3) var(--spacing-6);font-size:var(--text-base);}/** @public Square icon button (2.5rem × 2.5rem) */ .btn-icon{width:2.5rem;height:2.5rem;padding:0;}/** @public Small square icon button (2rem × 2rem) */ .btn-icon-sm{width:2rem;height:2rem;padding:0;}/** @public Large square icon button (3rem × 3rem) */ .btn-icon-lg{width:3rem;height:3rem;padding:0;}/** * @section Special Attention Variants */ /** @public Gold shimmer gradient button with animation */ .btn-golden{background:linear-gradient(135deg,hsl(43,80%,53%) 0%,hsl(36,90%,62%) 50%,hsl(43,80%,53%) 100%);color:hsl(var(--golden-foreground));box-shadow:0 2px 8px hsla(43 80% 53% / 0.4);background-size:200% 200%;animation:gradient-shift 3s ease infinite;}.btn-golden:hover{transform:translateY(-1px);box-shadow:0 4px 12px hsla(43 80% 53% / 0.5);}/** @public Yellow highlight gradient button with animation */ .btn-attention{background:linear-gradient(135deg,hsl(45,93%,47%) 0%,hsl(48,95%,53%) 50%,hsl(45,93%,47%) 100%);color:hsl(var(--attention-foreground));box-shadow:0 2px 8px hsla(45 93% 47% / 0.4);background-size:200% 200%;animation:gradient-shift 3s ease infinite;}.btn-attention:hover{transform:translateY(-1px);box-shadow:0 4px 12px hsla(45 93% 47% / 0.5);}/** @public Purple highlight gradient button with animation */ .btn-attention-violet{background:linear-gradient(135deg,hsl(267,76%,57%) 0%,hsl(280,84%,65%) 50%,hsl(267,76%,57%) 100%);color:hsl(var(--attention-violet-foreground));box-shadow:0 2px 8px hsla(267 76% 57% / 0.4);background-size:200% 200%;animation:gradient-shift 3s ease infinite;}.btn-attention-violet:hover{transform:translateY(-1px);box-shadow:0 4px 12px hsla(267 76% 57% / 0.5);}/** @public Red highlight gradient button with animation */ .btn-attention-red{background:linear-gradient(135deg,hsl(0,84%,60%) 0%,hsl(350,89%,65%) 50%,hsl(0,84%,60%) 100%);color:hsl(var(--attention-red-foreground));box-shadow:0 2px 8px hsla(0 84% 60% / 0.4);background-size:200% 200%;animation:gradient-shift 3s ease infinite;}.btn-attention-red:hover{transform:translateY(-1px);box-shadow:0 4px 12px hsla(0 84% 60% / 0.5);}/** @public Muted dashed button (de-emphasized) */ .btn-not-attention{background:linear-gradient(135deg,hsl(var(--muted)) 0%,hsl(var(--muted) / 0.8) 50%,hsl(var(--muted)) 100%);color:hsl(var(--muted-foreground));border:1px dashed hsl(var(--border));background-size:200% 200%;animation:gradient-shift 4s ease infinite;}.btn-not-attention:hover{border-style:solid;}@keyframes gradient-shift{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}/** * @section Button States */ /** @public Disabled button state */ .btn-disabled,.btn[disabled]{background:hsl(var(--muted));color:hsl(var(--muted-foreground));cursor:not-allowed;pointer-events:none;border:1px solid hsl(var(--border));box-shadow:none;animation:none;}.btn-disabled:hover,.btn[disabled]:hover,.btn-disabled:focus,.btn[disabled]:focus{transform:none;box-shadow:none;}.btn-disabled.btn-golden,.btn[disabled].btn-golden,.btn-disabled.btn-attention,.btn[disabled].btn-attention,.btn-disabled.btn-attention-violet,.btn[disabled].btn-attention-violet,.btn-disabled.btn-attention-red,.btn[disabled].btn-attention-red,.btn-disabled.btn-not-attention,.btn[disabled].btn-not-attention{background:hsl(var(--muted));animation:none;}/** @public Loading state with spinner animation */ .btn-loading{position:relative;cursor:wait;pointer-events:none;}.btn-loading > *{visibility:hidden;}.btn-loading::before{content:'';position:absolute;inset:0;border-radius:inherit;background-color:inherit;}.btn-loading::after{content:'';position:absolute;width:1rem;height:1rem;top:50%;left:50%;margin-left:-0.5rem;margin-top:-0.5rem;border:2px solid;border-radius:50%;border-right-color:transparent;animation:button-loading-spinner 0.75s linear infinite;}.btn-loading.btn-default::after,.btn-loading.btn-primary::after{border-color:hsl(var(--primary-foreground));border-right-color:transparent;}.btn-loading.btn-secondary::after{border-color:hsl(var(--secondary-foreground));border-right-color:transparent;}.btn-loading.btn-destructive::after{border-color:hsl(var(--destructive-foreground));border-right-color:transparent;}.btn-loading.btn-outline::after,.btn-loading.btn-ghost::after,.btn-loading.btn-icon:not(.btn-subtle):not(.btn-default):not(.btn-primary):not(.btn-secondary):not(.btn-destructive):not(.btn-outline)::after{border-color:hsl(var(--foreground));border-right-color:transparent;}.btn-loading.btn-link::after{border-color:hsl(var(--primary));border-right-color:transparent;}@keyframes button-loading-spinner{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}/** * @section Button Modifiers */ /** @public Full width button */ .btn-block{width:100%;}/** * @section Card Base */ /** @public Base card with subtle shadow and border */ .card{border-radius:var(--radius-lg);border:1px solid hsl(var(--border));background-color:hsl(var(--card));color:hsl(var(--card-foreground));box-shadow:var(--shadow-sm);padding:var(--spacing-6);}/** @public Card header section with spacing */ .card-header{display:flex;flex-direction:column;gap:var(--spacing-2);margin-bottom:var(--spacing-6);}/** @public Card title - large semibold heading */ .card-title{font-size:var(--text-lg);font-weight:var(--font-semibold);line-height:var(--leading-tight);margin:0;}/** @public Card description - muted text below title */ .card-description{font-size:var(--text-sm);color:hsl(var(--muted-foreground));margin:0;}/** @public Card content section - main body */ .card-content + .card-footer{margin-top:var(--spacing-6);}/** @public Card footer section - typically for actions/buttons */ .card-footer{display:flex;align-items:center;margin-top:var(--spacing-6);}/** * @section Card Variants */ /** @public Elevated card with enhanced shadow and hover effect */ .card-elevated{box-shadow:var(--shadow-md);transition:box-shadow var(--transition-base);}.card-elevated:hover{box-shadow:var(--shadow-lg);}/** @public Interactive card - clickable with lift effect */ .card-interactive{cursor:pointer;transition:all var(--transition-base);}.card-interactive:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}/** @public Card with 2px border and no shadow */ .card-bordered{border:2px solid hsl(var(--border));box-shadow:none;}/** @public Transparent card with no border or shadow */ .card-ghost{border:none;box-shadow:none;background-color:transparent;}/** @public Card with muted background */ .card-muted{background-color:hsl(var(--muted));border-color:hsl(var(--muted));}/** * @section Card Modifiers */ /** @public Remove card padding (adds to children instead) */ .card-no-padding{padding:0;}.card-no-padding > .card-header,.card-no-padding > .card-content,.card-no-padding > .card-footer{padding:var(--spacing-6);}.card-no-padding > .card-header + .card-content{padding-top:0;}.card-no-padding > .card-content + .card-footer{padding-top:0;}/** * @section Input Base */ /** @public Base input field */ .input{display:flex;height:2.5rem;width:100%;border-radius:var(--radius-md);border:1px solid hsl(var(--input));background-color:hsl(var(--background));padding:var(--spacing-2) var(--spacing-3);font-size:var(--text-sm);transition:all var(--transition-base);color:hsl(var(--foreground));position:relative;}.input::-moz-placeholder{color:hsl(var(--muted-foreground));}.input::placeholder{color:hsl(var(--muted-foreground));}.input:focus{outline:none;box-shadow:0 0 0 2px hsl(var(--ring));border-color:hsl(var(--ring));}.input:disabled{cursor:not-allowed;opacity:0.5;}.input[readonly]{background-color:hsl(var(--muted));cursor:default;}.input.input-loading{cursor:wait;}.input.input-loading::after{content:'';position:absolute;right:var(--spacing-3);top:50%;transform:translateY(-50%);width:1rem;height:1rem;border:2px solid hsl(var(--muted));border-top-color:hsl(var(--foreground));border-radius:50%;animation:spin 0.75s linear infinite;}select.input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--spacing-2) center;background-size:1rem;padding-right:var(--spacing-8);}.dark select.input,[data-theme="dark"] select.input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");}/** @public Multi-line textarea */ .textarea{display:flex;min-height:5rem;width:100%;border-radius:var(--radius-md);border:1px solid hsl(var(--input));background-color:hsl(var(--background));padding:var(--spacing-3);font-size:var(--text-sm);transition:all var(--transition-base);color:hsl(var(--foreground));resize:vertical;}.textarea::-moz-placeholder{color:hsl(var(--muted-foreground));}.textarea::placeholder{color:hsl(var(--muted-foreground));}.textarea:focus{outline:none;box-shadow:0 0 0 2px hsl(var(--ring));border-color:hsl(var(--ring));}.textarea:disabled{cursor:not-allowed;opacity:0.5;}/** * @section Input Variants */ /** @public Error state input */ .input-error,textarea.input-error{border-color:hsl(var(--destructive));}.input-error:focus,textarea.input-error:focus{box-shadow:0 0 0 2px hsl(var(--destructive));border-color:hsl(var(--destructive));}/** @public Success state input */ .input-success,textarea.input-success{border-color:hsl(var(--success));}.input-success:focus,textarea.input-success:focus{box-shadow:0 0 0 2px hsl(var(--success));border-color:hsl(var(--success));}/** @public Warning state input */ .input-warning,textarea.input-warning{border-color:hsl(var(--warning));}.input-warning:focus,textarea.input-warning:focus{box-shadow:0 0 0 2px hsl(var(--warning));border-color:hsl(var(--warning));}/** @public Outlined input - transparent background,2px border */ .input-outlined{background-color:transparent;border-width:2px;}/** @public Borderless input - muted background */ .input-borderless{border-color:transparent;background-color:hsl(var(--muted));}.input-borderless:focus{border-color:transparent;box-shadow:none;background-color:hsl(var(--muted));}/** * @section Input Sizes */ /** @public Small input */ .input-sm{height:2rem;padding:var(--spacing-1) var(--spacing-2);font-size:var(--text-xs);}/** @public Large input */ .input-lg{height:3rem;padding:var(--spacing-3) var(--spacing-4);font-size:var(--text-base);}/** * @section Form Elements */ /** @public Form label */ .label{font-size:var(--text-sm);font-weight:var(--font-medium);color:hsl(var(--foreground));margin-bottom:var(--spacing-2);display:block;}/** @public Form group container */ .form-group{display:flex;flex-direction:column;gap:var(--spacing-2);margin-bottom:var(--spacing-4);}/** @public Input group with addons */ .input-group{display:flex;position:relative;width:100%;/** @public Input addon - left side */ /** @public Input addon - right side */ /** @public Input icon - left side */}.input-group .input{position:relative;flex:1 1 auto;width:1%;min-width:0;}.input-group .input-addon-start,.input-group .input-addon-end{display:flex;align-items:center;padding:0 var(--spacing-3);font-size:var(--text-sm);background-color:hsl(var(--muted));border:1px solid hsl(var(--input));color:hsl(var(--muted-foreground));}.input-group .input-addon-start{border-right:0;border-top-left-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md);}.input-group .input-addon-end{border-left:0;border-top-right-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md);}.input-group .btn{position:relative;z-index:1;}.input-group .btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px;}.input-group .btn:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-1px;}.input-group .input-addon-start + .input,.input-group .btn:not(:first-child) + .input{border-top-left-radius:0;border-bottom-left-radius:0;}.input-group .input:has(+ .input-addon-end),.input-group .input:has(+ .btn){border-top-right-radius:0;border-bottom-right-radius:0;}.input-group .input:focus,.input-group .btn:focus{z-index:2;}.input-group .input-icon-start,.input-group .input-icon-end{position:absolute;top:50%;transform:translateY(-50%);color:hsl(var(--muted-foreground));pointer-events:none;display:flex;align-items:center;justify-content:center;width:var(--spacing-10);height:100%;padding:0 var(--spacing-3);z-index:3;}.input-group .input-icon-start{left:0;}.input-group .input-icon-start + .input{padding-left:var(--spacing-10);}.input-group .input-icon-end{right:0;}.input-group .input:has(+ .input-icon-end){padding-right:var(--spacing-10);}/** @public Input group with separated buttons - buttons maintain their own edges */ .input-group-separated{display:flex;position:relative;width:100%;}.input-group-separated .input{position:relative;flex:1 1 auto;width:1%;min-width:0;}.input-group-separated .input-addon-start,.input-group-separated .input-addon-end{display:flex;align-items:center;padding:0 var(--spacing-3);font-size:var(--text-sm);background-color:hsl(var(--muted));border:1px solid hsl(var(--input));color:hsl(var(--muted-foreground));}.input-group-separated .input-addon-start{border-right:0;border-top-left-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md);}.input-group-separated .input-addon-end{border-left:0;border-top-right-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md);}.input-group-separated .btn{position:relative;z-index:1;}.input-group-separated .input-addon-start + .input{border-top-left-radius:0;border-bottom-left-radius:0;}.input-group-separated .input:has(+ .input-addon-end){border-top-right-radius:0;border-bottom-right-radius:0;}.input-group-separated .input:focus,.input-group-separated .btn:focus{z-index:2;}.input-group-separated .input-icon-start,.input-group-separated .input-icon-end{position:absolute;top:50%;transform:translateY(-50%);z-index:10;display:flex;align-items:center;justify-content:center;color:hsl(var(--muted-foreground));pointer-events:none;}.input-group-separated .input-icon-start i,.input-group-separated .input-icon-end i{font-size:var(--text-sm);}.input-group-separated .input-icon-start{left:var(--spacing-3);}.input-group-separated .input-icon-end{right:var(--spacing-3);}.input-group-separated .input:has(+ .input-icon-end),.input-group-separated .input-icon-start + .input{padding-left:calc(var(--spacing-3) * 2 + 1rem);}.input-group-separated .input:has(+ .input-icon-end){padding-right:calc(var(--spacing-3) * 2 + 1rem);}/** @public Form help text */ .form-help{font-size:var(--text-xs);color:hsl(var(--muted-foreground));}/** @public Form error message */ .form-error{font-size:var(--text-xs);color:hsl(var(--destructive));}/** * @section Spinner Loader */ /** @public Base spinner loader */ .loader{display:inline-flex;width:1.5rem;height:1.5rem;border:2px solid hsl(var(--muted));border-right-color:hsl(var(--foreground));border-radius:50%;animation:loader-spin 0.75s linear infinite;}.loader.loader-sm{width:1rem;height:1rem;border-width:2px;}.loader.loader-lg{width:2rem;height:2rem;border-width:3px;}.loader.loader-xl{width:3rem;height:3rem;border-width:4px;}.loader.loader-primary{border-color:hsl(var(--primary) / 0.3);border-right-color:hsl(var(--primary));}.loader.loader-secondary{border-color:hsl(var(--secondary) / 0.3);border-right-color:hsl(var(--secondary));}.loader.loader-success{border-color:hsl(var(--success) / 0.3);border-right-color:hsl(var(--success));}.loader.loader-destructive{border-color:hsl(var(--destructive) / 0.3);border-right-color:hsl(var(--destructive));}/** @public Centered loader container - min-height 100px */ .loader-center{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:100px;}/** @public Three dots loader with span between pseudo-elements */ .loader-dots{display:inline-flex;align-items:center;gap:0.5rem;}.loader-dots::before,.loader-dots::after{content:"";width:0.5rem;height:0.5rem;background:currentColor;border-radius:50%;animation:loader-dots 0.8s ease-in-out infinite;}.loader-dots::before{animation-delay:-0.3s;}.loader-dots::after{animation-delay:-0.15s;}.loader-dots span{width:0.5rem;height:0.5rem;background:currentColor;border-radius:50%;animation:loader-dots 0.8s ease-in-out infinite;}.loader-dots.loader-sm{gap:0.25rem;}.loader-dots.loader-sm::before,.loader-dots.loader-sm::after,.loader-dots.loader-sm span{width:0.25rem;height:0.25rem;}.loader-dots.loader-lg{gap:0.75rem;}.loader-dots.loader-lg::before,.loader-dots.loader-lg::after,.loader-dots.loader-lg span{width:0.75rem;height:0.75rem;}@keyframes loader-spin{to{transform:rotate(360deg);}}@keyframes loader-dots{0%,80%,100%{transform:scale(0);opacity:0.5;}40%{transform:scale(1);opacity:1;}}/** * @section Skeleton Base */ /** @public Base skeleton with shimmer animation */ .skeleton{position:relative;background-color:hsl(var(--muted));border-radius:var(--radius-sm);overflow:hidden;min-height:1rem;/** * @section Skeleton Variants */ /** @public Text line skeleton - 100% width */ /** @public Title skeleton - 50% width */ /** @public Avatar skeleton - circle 3rem */ /** @public Button skeleton - 5rem x 2.5rem */ /** @public Card skeleton - 200px height */ /** @public Image skeleton - 16:9 aspect ratio */}.skeleton::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,hsl(var(--muted-foreground) / 0.1) 20%,hsl(var(--muted-foreground) / 0.2) 50%,hsl(var(--muted-foreground) / 0.1) 80%,transparent 100%);animation:skeleton-shimmer 1.5s ease-in-out infinite;}.skeleton.skeleton-text{width:100%;height:1em;margin-bottom:0.5em;}.skeleton.skeleton-text:last-child{width:80%;}.skeleton.skeleton-title{width:50%;height:1.75em;margin-bottom:1em;}.skeleton.skeleton-avatar{width:3rem;height:3rem;border-radius:50%;}.skeleton.skeleton-avatar.skeleton-sm{width:2rem;height:2rem;}.skeleton.skeleton-avatar.skeleton-lg{width:4rem;height:4rem;}.skeleton.skeleton-button{width:5rem;height:2.5rem;border-radius:var(--radius-md);}.skeleton.skeleton-card{width:100%;height:200px;border-radius:var(--radius-lg);}.skeleton.skeleton-image{width:100%;height:0;padding-bottom:56.25%;border-radius:var(--radius-md);}@keyframes skeleton-shimmer{0%{transform:translateX(-100%);}50%{transform:translateX(0%);}100%{transform:translateX(100%);}}/** * @section Badge Base */ /** @public Badge base - apply this first,then add variant */ .badge{display:inline-flex;align-items:center;border-radius:var(--radius-full);padding:var(--spacing-1) var(--spacing-3);font-size:var(--text-xs);font-weight:var(--font-semibold);transition:all var(--transition-base);border:1px solid transparent;}/** * @section Badge Variants */ /** @public Primary badge */ .badge-default{background-color:hsl(var(--primary));color:hsl(var(--primary-foreground));}/** @public Secondary badge */ .badge-secondary{background-color:hsl(var(--secondary));color:hsl(var(--secondary-foreground));}/** @public Destructive/error badge */ .badge-destructive{background-color:hsl(var(--destructive));color:hsl(var(--destructive-foreground));}/** @public Success badge */ .badge-success{background-color:hsl(var(--success));color:hsl(var(--success-foreground));}/** @public Warning badge */ .badge-warning{background-color:hsl(var(--warning));color:hsl(var(--warning-foreground));}/** @public Info badge */ .badge-info{background-color:hsl(var(--info));color:hsl(var(--info-foreground));}/** @public Outline badge */ .badge-outline{background-color:transparent;border:1px solid hsl(var(--border));color:hsl(var(--foreground));}/** @public Ghost badge - muted appearance */ .badge-ghost{background-color:hsl(var(--muted));color:hsl(var(--muted-foreground));}/** * @section Badge Sizes */ /** @public Small badge */ .badge-sm{padding:var(--spacing-1) var(--spacing-2);font-size:0.625rem;}/** @public Large badge */ .badge-lg{padding:var(--spacing-2) var(--spacing-4);font-size:var(--text-sm);}/** * @section Alert Base */ /** @public Alert container - notification box */ .alert{position:relative;width:100%;border-radius:var(--radius-lg);border:1px solid hsl(var(--border));padding:var(--spacing-4);display:flex;gap:var(--spacing-3);}/** @public Alert icon container */ .alert-icon{flex-shrink:0;width:1.25rem;height:1.25rem;}/** @public Alert content wrapper */ .alert-content{flex:1;min-width:0;overflow:hidden;}/** @public Alert title */ .alert-title{font-weight:var(--font-medium);font-size:var(--text-sm);margin-bottom:var(--spacing-2);line-height:var(--leading-tight);}/** @public Alert description text */ .alert-description{font-size:var(--text-sm);color:hsl(var(--muted-foreground));line-height:var(--leading-relaxed);}.alert-description pre{overflow-x:auto;max-width:100%;}.alert-description code{word-break:break-word;}/** * @section Alert Variants */ /** @public Default alert */ .alert-default{background-color:hsl(var(--card));color:hsl(var(--foreground));border-color:hsl(var(--border));}/** @public Destructive/error alert */ .alert-destructive{border-color:hsl(var(--destructive));background-color:hsl(0,84.2%,95%);color:hsl(0,84.2%,30%);}.alert-destructive .alert-description{color:hsl(0,84.2%,35%);}.dark .alert-destructive,[data-theme="dark"] .alert-destructive{background-color:hsl(0,84.2%,15%);color:hsl(0,84.2%,85%);border-color:hsl(var(--destructive) / 0.6);}.dark .alert-destructive .alert-description,[data-theme="dark"] .alert-destructive .alert-description{color:hsl(0,84.2%,75%);}/** @public Success alert */ .alert-success{border-color:hsl(var(--success));background-color:hsl(142.1,76.2%,92%);color:hsl(142.1,76.2%,25%);}.alert-success .alert-description{color:hsl(142.1,76.2%,28%);}.dark .alert-success,[data-theme="dark"] .alert-success{background-color:hsl(142.1,76.2%,12%);color:hsl(142.1,76.2%,80%);border-color:hsl(var(--success) / 0.6);}.dark .alert-success .alert-description,[data-theme="dark"] .alert-success .alert-description{color:hsl(142.1,76.2%,70%);}/** @public Warning alert */ .alert-warning{border-color:hsl(var(--warning));background-color:hsl(38,92%,90%);color:hsl(38,92%,25%);}.alert-warning .alert-description{color:hsl(38,92%,28%);}.dark .alert-warning,[data-theme="dark"] .alert-warning{background-color:hsl(38,92%,15%);color:hsl(38,92%,80%);border-color:hsl(var(--warning) / 0.6);}.dark .alert-warning .alert-description,[data-theme="dark"] .alert-warning .alert-description{color:hsl(38,92%,70%);}/** @public Info alert */ .alert-info{border-color:hsl(var(--info));background-color:hsl(221.2,83.2%,92%);color:hsl(221.2,83.2%,30%);}.alert-info .alert-description{color:hsl(221.2,83.2%,35%);}.dark .alert-info,[data-theme="dark"] .alert-info{background-color:hsl(221.2,83.2%,15%);color:hsl(221.2,83.2%,80%);border-color:hsl(var(--info) / 0.6);}.dark .alert-info .alert-description,[data-theme="dark"] .alert-info .alert-description{color:hsl(221.2,83.2%,70%);}/** * @section Block & Section */ /** @public Block container with gap and padding */ .block{display:flex;flex-direction:column;gap:var(--gap-md);padding:var(--spacing-6);border-radius:var(--radius-lg);background-color:hsl(var(--card));border:1px solid hsl(var(--border));}/** @public Section container with responsive padding */ .section{--section-padding:var(--spacing-8);--section-gap:var(--gap-lg);--section-margin:var(--spacing-8);display:flex;flex-direction:column;gap:var(--section-gap);padding:var(--section-padding);margin-bottom:var(--section-margin);}@media (max-width:768px){.section{--section-padding:var(--spacing-4);--section-gap:var(--gap-md);--section-margin:var(--spacing-4);}}@media (max-width:480px){.section{--section-padding:var(--spacing-3);--section-gap:var(--gap-sm);--section-margin:var(--spacing-3);}}.toc{list-style:none;padding:0;margin:0;}.toc li{padding:var(--spacing-2) 0;border-bottom:1px solid hsl(var(--border));}.toc li:last-child{border-bottom:none;}.toc li a{color:hsl(var(--foreground));text-decoration:none;transition:color var(--transition-base);}.toc li a:hover{color:hsl(var(--primary));}.toc ul{padding-left:var(--spacing-4);margin-top:var(--spacing-2);}/** * @section Icon Sizes */ /** @public Base icon size */ .icon{display:inline-block;font-size:1.25em;line-height:1;vertical-align:middle;color:inherit;}/** @public Extra small icon */ .icon-xs{display:inline-block;font-size:var(--text-xs);line-height:1;vertical-align:middle;color:inherit;}/** @public Small icon */ .icon-sm{display:inline-block;font-size:var(--text-sm);line-height:1;vertical-align:middle;color:inherit;}/** @public Medium icon */ .icon-md{display:inline-block;font-size:var(--text-base);line-height:1;vertical-align:middle;color:inherit;}/** @public Large icon */ .icon-lg{display:inline-block;font-size:var(--text-lg);line-height:1;vertical-align:middle;color:inherit;}/** @public Extra large icon */ .icon-xl{display:inline-block;font-size:var(--text-xl);line-height:1;vertical-align:middle;color:inherit;}/** @public 2XL icon */ .icon-2xl{display:inline-block;font-size:var(--text-2xl);line-height:1;vertical-align:middle;color:inherit;}/** @public 3XL icon */ .icon-3xl{display:inline-block;font-size:var(--text-3xl);line-height:1;vertical-align:middle;color:inherit;}/** @public 4XL icon */ .icon-4xl{display:inline-block;font-size:var(--text-4xl);line-height:1;vertical-align:middle;color:inherit;}/** * @section Keyboard Key */ /** @public Keyboard key display - monospace with 3D appearance */ .kbd{display:inline-flex;align-items:center;justify-content:center;min-width:1.75rem;height:1.75rem;padding:var(--spacing-1) var(--spacing-2);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-medium);line-height:1;color:hsl(var(--foreground));background-color:hsl(var(--muted));border:1px solid hsl(var(--border));border-radius:var(--radius-sm);box-shadow:0 1px 0 0 hsl(var(--border)),inset 0 1px 0 0 hsl(var(--background) / 0.1);text-transform:uppercase;letter-spacing:0.025em;white-space:nowrap;}.dark .kbd,[data-theme="dark"] .kbd{background-color:hsl(var(--muted) / 0.5);border-color:hsl(var(--border) / 0.7);box-shadow:0 1px 0 0 hsl(var(--border) / 0.5),inset 0 1px 0 0 hsl(var(--foreground) / 0.05);}/** @public Small keyboard key */ .kbd-sm{min-width:1.5rem;height:1.5rem;padding:var(--spacing-0-5) var(--spacing-1);font-size:0.625rem;}/** @public Large keyboard key */ .kbd-lg{min-width:2rem;height:2rem;padding:var(--spacing-1) var(--spacing-3);font-size:var(--text-sm);}/** * @section Definition List Base */ /** @public Definition list container */ .dl{display:flex;flex-direction:column;gap:var(--spacing-4);width:100%;/** @public Definition list item pair */ /** @public Definition term */ /** @public Definition description */}.dl .dl-item{display:flex;flex-direction:column;gap:var(--spacing-1);}.dl .dl-term{font-weight:var(--font-medium);color:hsl(var(--foreground));font-size:var(--text-sm);}.dl .dl-desc{color:hsl(var(--muted-foreground));font-size:var(--text-sm);line-height:var(--leading-relaxed);}/** * @section Definition List Variants */ /** @public Horizontal layout - side-by-side (term 25% width,right-aligned) */ .dl-horizontal .dl-item{flex-direction:row;align-items:baseline;gap:var(--spacing-4);}.dl-horizontal .dl-item .dl-term{flex:0 0 25%;text-align:right;}.dl-horizontal .dl-item .dl-desc{flex:1;}/** @public Compact spacing for dense information */ .dl-compact{gap:var(--spacing-2);}.dl-compact .dl-item{gap:var(--spacing-0-5);}/** @public Dark mode definition list styles */ .dark .dl .dl-term{color:hsl(var(--foreground));}.dark .dl .dl-desc{color:hsl(var(--muted-foreground));}/** * @section Tree */ /** @public CLI-style hierarchical list */ .tree{--tree-indent:var(--spacing-4);list-style:none;padding:0;margin:0;font-family:var(--font-mono,monospace);font-size:var(--text-sm);line-height:1.8;color:hsl(var(--foreground));}.tree ul{list-style:none;margin:0;padding-left:var(--tree-indent);position:relative;}.tree ul::before{content:'';position:absolute;left:0.5rem;top:0;bottom:0.5em;width:1px;background:hsl(var(--foreground));}.tree li{position:relative;margin:0;padding-left:var(--tree-indent);}.tree li::before{content:'';position:absolute;top:0.9em;left:0.5rem;width:calc(var(--tree-indent) - 0.5rem - 0.25rem);height:1px;background:hsl(var(--foreground));}.tree li:last-child > ul::before{display:none;}.tree i,.tree .icon{margin-right:var(--spacing-2);color:hsl(var(--muted-foreground));}/** * @section Toast Container */ /** @public Toast container - fixed top-right */ .toast-container{position:fixed;top:var(--spacing-6);right:var(--spacing-6);z-index:9999;width:100%;max-width:420px;pointer-events:none;/* Allow absolutely positioned (hidden) overflow to sit on top without shifting layout */}@media (max-width:640px){.toast-container{left:var(--spacing-4);right:var(--spacing-4);max-width:unset;}}/** * @section Toast Base */ /** @public Toast notification */ .toast{position:relative;pointer-events:auto;display:flex;gap:var(--spacing-3);align-items:flex-start;padding:var(--spacing-4);border-radius:var(--radius-lg);border:1px solid hsl(var(--border));background:hsl(var(--card));box-shadow:var(--shadow-lg);min-height:48px;margin-bottom:var(--spacing-3);transition:transform 0.3s cubic-bezier(0.16,1,0.3,1),opacity 0.3s cubic-bezier(0.16,1,0.3,1),box-shadow 0.2s ease;animation:toast-slide-in 0.35s cubic-bezier(0.16,1,0.3,1);/* When JS hides overflow toasts it sets absolute + opacity 0;ensure no layout flicker */}.toast:hover{box-shadow:var(--shadow-xl);}.toast.toast-exit{animation:toast-slide-out 0.25s ease-in forwards;}.toast.toast-hidden{position:absolute !important;opacity:0 !important;pointer-events:none !important;}.dark .toast,[data-theme="dark"] .toast{background:hsl(var(--card));border-color:hsl(var(--border));}/** @public Toast icon container */ .toast-icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:16px;}/** @public Toast content wrapper */ .toast-content{flex:1;display:flex;flex-direction:column;gap:var(--spacing-1);min-width:0;}/** @public Toast title */ .toast-title{font-weight:600;font-size:14px;line-height:1.4;color:hsl(var(--foreground));}.dark .toast-title,[data-theme="dark"] .toast-title{color:hsl(var(--foreground));}/** @public Toast description text */ .toast-description{font-size:14px;line-height:1.4;color:hsl(var(--muted-foreground));}.dark .toast-description,[data-theme="dark"] .toast-description{color:hsl(var(--muted-foreground));}/** @public Toast close button */ .toast-close{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;color:hsl(var(--muted-foreground));border-radius:var(--radius-sm);padding:0;opacity:0.7;transition:opacity 0.15s,background-color 0.15s;}.toast-close:hover{opacity:1;background:hsl(var(--accent) / 0.1);}.dark .toast-close,[data-theme="dark"] .toast-close{color:hsl(var(--muted-foreground));}.dark .toast-close:hover,[data-theme="dark"] .toast-close:hover{background:hsl(var(--accent) / 0.15);}/** @public Toast action button container */ .toast-action{margin-top:var(--spacing-2);}.toast-action .btn{height:auto;padding:var(--spacing-1) var(--spacing-3);font-size:13px;}/** * @section Toast Variants */ /** @public Default toast */ .toast-default{background:hsl(var(--card));border-color:hsl(var(--border));color:hsl(var(--foreground));}.toast-default .toast-icon{color:hsl(var(--foreground));}.dark .toast-default,[data-theme="dark"] .toast-default{background:hsl(var(--card));border-color:hsl(var(--border));}/** @public Success toast */ .toast-success{border-color:hsl(var(--success));background-color:hsl(142.1,76.2%,92%);color:hsl(142.1,76.2%,25%);}.toast-success .toast-icon{color:hsl(142.1,76.2%,25%);}.toast-success .toast-title{color:hsl(142.1,76.2%,25%);}.toast-success .toast-description{color:hsl(142.1,76.2%,28%);}.dark .toast-success,[data-theme="dark"] .toast-success{background-color:hsl(142.1,76.2%,12%);color:hsl(142.1,76.2%,80%);border-color:hsl(var(--success) / 0.6);}.dark .toast-success .toast-icon,[data-theme="dark"] .toast-success .toast-icon{color:hsl(142.1,76.2%,80%);}.dark .toast-success .toast-title,[data-theme="dark"] .toast-success .toast-title{color:hsl(142.1,76.2%,80%);}.dark .toast-success .toast-description,[data-theme="dark"] .toast-success .toast-description{color:hsl(142.1,76.2%,70%);}/** @public Error/destructive toast */ .toast-error,.toast-destructive{border-color:hsl(var(--destructive));background-color:hsl(0,84.2%,95%);color:hsl(0,84.2%,30%);}.toast-error .toast-icon,.toast-destructive .toast-icon{color:hsl(0,84.2%,30%);}.toast-error .toast-title,.toast-destructive .toast-title{color:hsl(0,84.2%,30%);}.toast-error .toast-description,.toast-destructive .toast-description{color:hsl(0,84.2%,35%);}.dark .toast-error,.dark .toast-destructive,[data-theme="dark"] .toast-error,[data-theme="dark"] .toast-destructive{background-color:hsl(0,84.2%,15%);color:hsl(0,84.2%,85%);border-color:hsl(var(--destructive) / 0.6);}.dark .toast-error .toast-icon,.dark .toast-destructive .toast-icon,[data-theme="dark"] .toast-error .toast-icon,[data-theme="dark"] .toast-destructive .toast-icon{color:hsl(0,84.2%,85%);}.dark .toast-error .toast-title,.dark .toast-destructive .toast-title,[data-theme="dark"] .toast-error .toast-title,[data-theme="dark"] .toast-destructive .toast-title{color:hsl(0,84.2%,85%);}.dark .toast-error .toast-description,.dark .toast-destructive .toast-description,[data-theme="dark"] .toast-error .toast-description,[data-theme="dark"] .toast-destructive .toast-description{color:hsl(0,84.2%,75%);}/** @public Warning toast */ .toast-warning{border-color:hsl(var(--warning));background-color:hsl(38,92%,90%);color:hsl(38,92%,25%);}.toast-warning .toast-icon{color:hsl(38,92%,25%);}.toast-warning .toast-title{color:hsl(38,92%,25%);}.toast-warning .toast-description{color:hsl(38,92%,28%);}.dark .toast-warning,[data-theme="dark"] .toast-warning{background-color:hsl(38,92%,15%);color:hsl(38,92%,80%);border-color:hsl(var(--warning) / 0.6);}.dark .toast-warning .toast-icon,[data-theme="dark"] .toast-warning .toast-icon{color:hsl(38,92%,80%);}.dark .toast-warning .toast-title,[data-theme="dark"] .toast-warning .toast-title{color:hsl(38,92%,80%);}.dark .toast-warning .toast-description,[data-theme="dark"] .toast-warning .toast-description{color:hsl(38,92%,70%);}/** @public Info toast */ .toast-info{border-color:hsl(var(--info));background-color:hsl(221.2,83.2%,92%);color:hsl(221.2,83.2%,30%);}.toast-info .toast-icon{color:hsl(221.2,83.2%,30%);}.toast-info .toast-title{color:hsl(221.2,83.2%,30%);}.toast-info .toast-description{color:hsl(221.2,83.2%,35%);}.dark .toast-info,[data-theme="dark"] .toast-info{background-color:hsl(221.2,83.2%,15%);color:hsl(221.2,83.2%,80%);border-color:hsl(var(--info) / 0.6);}.dark .toast-info .toast-icon,[data-theme="dark"] .toast-info .toast-icon{color:hsl(221.2,83.2%,80%);}.dark .toast-info .toast-title,[data-theme="dark"] .toast-info .toast-title{color:hsl(221.2,83.2%,80%);}.dark .toast-info .toast-description,[data-theme="dark"] .toast-info .toast-description{color:hsl(221.2,83.2%,70%);}@keyframes toast-slide-in{from{transform:translateX(100%);opacity:0;}to{transform:translateX(0);opacity:1;}}@keyframes toast-slide-out{from{transform:translateX(0);opacity:1;}to{transform:translateX(100%);opacity:0;}}/** * @section Dropdown Base */ /** @public Dropdown container - relative positioning for absolute submenu */ .dropdown{position:relative;display:inline-block;/** @public Dropdown trigger element */ /** @public Dropdown content - the submenu that appears */ /** @public Dropdown item - menu item in dropdown */ /** @public Dropdown label - non-interactive header */ /** @public Dropdown separator */ /** @public Dropdown shortcut text */ /** @public Right-aligned dropdown (e.g.,for user menu in top-right) */ /** @public Center-aligned dropdown */ /** @public Animated dropdown - opt-in for slide/fade animations */}.dropdown .dropdown-trigger{cursor:pointer;display:inline-flex;align-items:center;gap:var(--spacing-2);}.dropdown .dropdown-trigger::after{content:'';display:inline-block;width:0;height:0;margin-left:var(--spacing-1);border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid currentColor;}.dropdown .dropdown-trigger:hover::after,.dropdown .dropdown-trigger:focus::after{transform:rotate(180deg);}.dropdown[data-dropdown-initialized] .dropdown-trigger:hover::after,.dropdown[data-dropdown-initialized] .dropdown-trigger:focus::after{transform:rotate(0deg);}.dropdown[data-dropdown-initialized].open .dropdown-trigger::after{transform:rotate(180deg);}.dropdown .dropdown-content{position:absolute;top:100%;left:0;z-index:50;min-width:12rem;margin-top:var(--spacing-2);opacity:0;visibility:hidden;background:hsl(var(--popover));border:1px solid hsl(var(--border));border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--spacing-1);overflow:hidden;}.dropdown:hover .dropdown-content,.dropdown:focus-within .dropdown-content{opacity:1;visibility:visible;}.dropdown[data-dropdown-initialized]:hover .dropdown-content{opacity:0;visibility:hidden;}.dropdown[data-dropdown-initialized].open .dropdown-content{opacity:1;visibility:visible;}.dropdown[data-dropdown-initialized].open .dropdown-trigger.btn-subtle{color:hsl(var(--primary-foreground));background-color:hsl(var(--primary));}.dropdown[data-dropdown-initialized]:focus-within .dropdown-content{opacity:1;visibility:visible;}.dropdown .dropdown-item{display:flex;align-items:center;gap:var(--spacing-2);width:100%;padding:var(--spacing-2) var(--spacing-4);font-size:var(--text-sm);font-weight:var(--font-medium);color:hsl(var(--popover-foreground));background:transparent;border:none;border-radius:var(--radius-md);cursor:pointer;text-align:left;text-decoration:none;transition:all var(--transition-base);white-space:nowrap;}.dropdown .dropdown-item:hover,.dropdown .dropdown-item:focus{background:hsl(var(--muted));color:hsl(var(--muted-foreground));outline:none;}.dropdown .dropdown-item i,.dropdown .dropdown-item .icon{width:1rem;font-size:var(--text-sm);opacity:0.7;}.dropdown .dropdown-item.active{color:hsl(var(--primary-foreground));background:hsl(var(--primary));}.dropdown .dropdown-item.active:hover,.dropdown .dropdown-item.active:focus{background:hsl(var(--primary) / 0.9);color:hsl(var(--primary-foreground));}.dropdown .dropdown-item:disabled,.dropdown .dropdown-item.disabled{opacity:0.5;cursor:not-allowed;pointer-events:none;}.dropdown .dropdown-item.dropdown-item-destructive{color:hsl(var(--destructive));}.dropdown .dropdown-item.dropdown-item-destructive:hover,.dropdown .dropdown-item.dropdown-item-destructive:focus{background:hsl(var(--destructive) / 0.9);color:hsl(var(--destructive-foreground));}.dropdown .dropdown-item.dropdown-item-primary{color:hsl(var(--primary));}.dropdown .dropdown-item.dropdown-item-primary:hover,.dropdown .dropdown-item.dropdown-item-primary:focus{background:hsl(var(--primary) / 0.9);color:hsl(var(--primary-foreground));}.dropdown .dropdown-item.dropdown-item-secondary{color:hsl(var(--secondary-foreground));}.dropdown .dropdown-item.dropdown-item-secondary:hover,.dropdown .dropdown-item.dropdown-item-secondary:focus{background:hsl(var(--secondary) / 0.8);color:hsl(var(--secondary-foreground));}.dropdown .dropdown-label{padding:var(--spacing-2) var(--spacing-4);font-size:var(--text-xs);font-weight:var(--font-semibold);color:hsl(var(--muted-foreground));text-transform:uppercase;letter-spacing:0.05em;}.dropdown .dropdown-separator{height:1px;margin:var(--spacing-1) 0;background:hsl(var(--border));}.dropdown .dropdown-shortcut{margin-left:auto;font-size:var(--text-xs);color:hsl(var(--muted-foreground));opacity:0.6;}.dropdown.dropdown-right .dropdown-content{left:auto;right:0;}.dropdown.dropdown-center .dropdown-content{left:50%;transform:translateX(-50%);}.dropdown.dropdown-animated .dropdown-trigger::after{transition:transform var(--transition-base);}.dropdown.dropdown-animated .dropdown-content{transform:translateY(-8px);transition:opacity var(--transition-base),transform var(--transition-base),visibility 0s linear 0.2s;}.dropdown.dropdown-animated:hover .dropdown-content,.dropdown.dropdown-animated:focus-within .dropdown-content,.dropdown.dropdown-animated[data-dropdown-initialized].open .dropdown-content,.dropdown.dropdown-animated[data-dropdown-initialized]:focus-within .dropdown-content{transform:translateY(0);transition-delay:0s;}.dropdown.dropdown-animated[data-dropdown-initialized]:hover .dropdown-content{transform:translateY(-8px);}.dropdown.dropdown-animated.dropdown-center .dropdown-content{transform:translateX(-50%) translateY(-8px);}.dropdown.dropdown-animated.dropdown-center:hover .dropdown-content,.dropdown.dropdown-animated.dropdown-center:focus-within .dropdown-content,.dropdown.dropdown-animated.dropdown-center[data-dropdown-initialized].open .dropdown-content,.dropdown.dropdown-animated.dropdown-center[data-dropdown-initialized]:focus-within .dropdown-content{transform:translateX(-50%) translateY(0);}.dropdown.dropdown-animated.dropdown-center[data-dropdown-initialized]:hover .dropdown-content{transform:translateX(-50%) translateY(-8px);}/** @public Dropdown group - nested dropdown items */ .dropdown-group{display:flex;flex-direction:column;gap:var(--spacing-1);}nav .dropdown .dropdown-trigger{padding:var(--spacing-2) var(--spacing-4);border-radius:var(--radius-md);transition:background var(--transition-base);}.btn.dropdown-trigger::after{margin-left:var(--spacing-2);}.dropdown-item.btn-default:hover,.dropdown-item.btn-primary:hover,.dropdown-item.btn-default:focus,.dropdown-item.btn-primary:focus{background:hsl(var(--primary) / 0.9);color:hsl(var(--primary-foreground));}.dropdown-item.btn-secondary:hover,.dropdown-item.btn-secondary:focus{background:hsl(var(--secondary) / 0.8);color:hsl(var(--secondary-foreground));}.dropdown-item.btn-destructive:hover,.dropdown-item.btn-destructive:focus{background:hsl(var(--destructive) / 0.9);color:hsl(var(--destructive-foreground));}.dropdown-item.btn-outline{border:1px solid hsl(var(--border));background-color:transparent;color:hsl(var(--foreground));}.dropdown-item.btn-outline:hover,.dropdown-item.btn-outline:focus{background:hsl(var(--muted));color:hsl(var(--muted-foreground));}.dropdown-item.btn-ghost:hover,.dropdown-item.btn-ghost:focus,.dropdown-item.btn-icon:not(.btn-subtle):not(.btn-default):not(.btn-primary):not(.btn-secondary):not(.btn-destructive):not(.btn-outline):hover,.dropdown-item.btn-icon:not(.btn-subtle):not(.btn-default):not(.btn-primary):not(.btn-secondary):not(.btn-destructive):not(.btn-outline):focus{background:hsl(var(--muted));color:hsl(var(--muted-foreground));}.dropdown-item.btn-link{background:transparent;color:hsl(var(--primary));text-decoration:underline;text-underline-offset:4px;}.dropdown-item.btn-link:hover,.dropdown-item.btn-link:focus{text-decoration:none;}a.dropdown-trigger{text-decoration:none;}a.dropdown-trigger:hover{text-decoration:none;}@media (max-width:768px){.dropdown .dropdown-content{left:0;width:-moz-fit-content;width:fit-content;right:0;min-width:100%;}}/** @public Dark mode dropdown styles */ .dark .dropdown-content,[data-theme="dark"] .dropdown-content{box-shadow:var(--shadow-xl);}/** * Table of Contents * Clean sidebar navigation with active state tracking * * Desktop:Sticky sidebar on the right * Mobile:Horizontal bar inline with content */ /** * @section Table of Contents */ /** @public Table of contents container */ .toc{padding:var(--spacing-3) 0;/** @public TOC title */ /** @public TOC list container */ /** @public TOC link */}.toc-title{font-size:var(--text-sm);font-weight:var(--font-semibold);color:hsl(var(--foreground));margin-bottom:var(--spacing-4);padding:0 var(--spacing-3);}.toc-list{display:flex;flex-direction:column;gap:var(--spacing-1);list-style:none;padding:0;margin:0;}.toc-link{display:block;padding:var(--spacing-2) var(--spacing-3);font-size:var(--text-sm);color:hsl(var(--muted-foreground));text-decoration:none;border-radius:var(--radius-md);transition:all 0.15s ease;line-height:1.5;position:relative;/** @public Nested TOC link (h3) */}.toc-link:hover{color:hsl(var(--foreground));background:hsl(var(--accent) / 0.1);}.toc-link.active{color:hsl(var(--foreground));background:hsl(var(--accent) / 0.15);font-weight:var(--font-medium);}.toc-link--nested{padding-left:var(--spacing-6);font-size:var(--text-sm);color:hsl(var(--muted-foreground) / 0.8);}@media (min-width:1025px){.toc{position:sticky;top:100px;max-height:calc(100vh - 120px);overflow-y:auto;width:240px;flex-shrink:0;align-self:flex-start;}}@media (max-width:1024px){.toc{position:static;width:100%;max-height:none;overflow-x:auto;overflow-y:visible;margin:var(--spacing-6) 0;padding:var(--spacing-4);background:hsl(var(--muted) / 0.2);border:1px solid hsl(var(--border));border-radius:var(--radius-lg);}.toc-title{margin-bottom:var(--spacing-3);}.toc-list{flex-wrap:wrap;display:flex;flex-direction:row;gap:var(--gap-md);flex-wrap:nowrap;gap:var(--spacing-2);}.toc-list li{border:none;margin:0;}.toc-link{padding:var(--spacing-2) var(--spacing-3);white-space:nowrap;background:hsl(var(--background));border:1px solid hsl(var(--border));}.toc-link:hover{background:hsl(var(--accent) / 0.1);}.toc-link.active{background:hsl(var(--background));}.toc-link--nested{padding-left:var(--spacing-3);padding-right:var(--spacing-3);font-size:var(--text-sm);opacity:0.9;}}/** @public TOC mobile anchor - hidden on desktop */ @media (min-width:1025px){.toc-mobile-anchor{display:none;}}/** @public TOC sidebar container - hidden on mobile */ .toc-sidebar div[data-toc]{position:sticky;top:80px;}@media (max-width:1024px){.toc-sidebar{display:none;}}/** * @section Progress Bar */ /** @public Base progress container */ .progress{width:100%;height:6px;background:hsl(var(--muted) / 0.3);border-radius:var(--radius-full);overflow:hidden;position:relative;}/** @public Small progress bar (4px) */ .progress-sm{height:4px;}/** @public Medium progress bar (6px) - default */ .progress-md{height:6px;}/** @public Large progress bar (8px) */ .progress-lg{height:8px;}/** @public Extra large progress bar (12px) */ .progress-xl{height:12px;}/** @public Progress bar fill */ .progress-bar{height:100%;border-radius:var(--radius-full);background:hsl(var(--primary));transition:width 0.3s ease;}/** @public Primary color progress bar */ .progress-bar-primary{background:hsl(var(--primary));}/** @public Success color progress bar */ .progress-bar-success{background:hsl(var(--success));}/** @public Warning color progress bar */ .progress-bar-warning{background:hsl(var(--warning));}/** @public Destructive color progress bar */ .progress-bar-destructive{background:hsl(var(--destructive));}/** @public Blue progress bar */ .progress-bar-blue{background:hsl(221,83%,53%);}/** @public Orange progress bar */ .progress-bar-orange{background:hsl(25,95%,53%);}/** @public Green progress bar */ .progress-bar-green{background:hsl(84,81%,44%);}/** @public Indeterminate animated progress bar */ .progress-indeterminate .progress-bar{width:40% !important;animation:progress-indeterminate 1.5s ease-in-out infinite;}@keyframes progress-indeterminate{0%{transform:translateX(-100%);}100%{transform:translateX(350%);}}/** * @section Segmented Indicator */ /** @public Segmented indicator container */ .indicator-segments{display:flex;gap:4px;align-items:center;}/** @public Individual segment (24x6px) */ .indicator-segment{width:24px;height:6px;background:hsl(var(--muted) / 0.3);border-radius:var(--radius-sm);transition:background 0.2s ease;}.indicator-segment.active{background:hsl(var(--success));}/** @public Small segment (16x4px) */ .indicator-segment-sm{width:16px;height:4px;}/** @public Large segment (32x8px) */ .indicator-segment-lg{width:32px;height:8px;}/** @public Primary color segment */ .indicator-segment-primary.active{background:hsl(var(--primary));}/** @public Success color segment */ .indicator-segment-success.active{background:hsl(var(--success));}/** @public Warning color segment */ .indicator-segment-warning.active{background:hsl(var(--warning));}/** @public Destructive color segment */ .indicator-segment-destructive.active{background:hsl(var(--destructive));}/** @public Blue color segment */ .indicator-segment-blue.active{background:hsl(221,83%,53%);}/** @public Orange color segment */ .indicator-segment-orange.active{background:hsl(25,95%,53%);}/** @public Green color segment */ .indicator-segment-green.active{background:hsl(84,81%,44%);}/** * @section Containers */ /** @public Fluid container with responsive padding */ .container{--container-padding-x:clamp(var(--spacing-4),6vw,var(--spacing-8));width:100%;margin-left:auto;margin-right:auto;padding-left:var(--container-padding-x);padding-right:var(--container-padding-x);}/** @public Small container - 640px max-width */ .container-sm{--container-padding-x:clamp(var(--spacing-4),6vw,var(--spacing-8));width:100%;margin-left:auto;margin-right:auto;padding-left:var(--container-padding-x);padding-right:var(--container-padding-x);max-width:640px;}/** @public Medium container - 768px max-width */ .container-md{--container-padding-x:clamp(var(--spacing-4),6vw,var(--spacing-8));width:100%;margin-left:auto;margin-right:auto;padding-left:var(--container-padding-x);padding-right:var(--container-padding-x);max-width:768px;}/** @public Large container - 1024px max-width */ .container-lg{--container-padding-x:clamp(var(--spacing-4),6vw,var(--spacing-8));width:100%;margin-left:auto;margin-right:auto;padding-left:var(--container-padding-x);padding-right:var(--container-padding-x);max-width:1024px;}/** @public Extra large container - 1280px max-width */ .container-xl{--container-padding-x:clamp(var(--spacing-4),6vw,var(--spacing-8));width:100%;margin-left:auto;margin-right:auto;padding-left:var(--container-padding-x);padding-right:var(--container-padding-x);max-width:1280px;}/** @public 2XL container - 1536px max-width */ .container-2xl{--container-padding-x:clamp(var(--spacing-4),6vw,var(--spacing-8));width:100%;margin-left:auto;margin-right:auto;padding-left:var(--container-padding-x);padding-right:var(--container-padding-x);max-width:1536px;}/** * @section Page Layout */ /** @public Full-height page wrapper */ .page{min-height:100vh;display:flex;flex-direction:column;}/** @public Page header section */ .page-header{border-bottom:1px solid hsl(var(--border));background-color:hsl(var(--background));padding:var(--spacing-4);}/** @public Main content area - grows to fill space */ .page-main{flex:1;padding:var(--spacing-6);}/** @public Page footer section */ .page-footer{border-top:1px solid hsl(var(--border));background-color:hsl(var(--background));padding:var(--spacing-4);}/** * @section Sidebar Layout */ /** @public Grid layout with sidebar */ .layout-with-sidebar{display:grid;grid-template-columns:250px 1fr;gap:0;min-height:100vh;}/** @public Sidebar container */ .sidebar{border-right:1px solid hsl(var(--border));background-color:hsl(var(--background));padding:var(--spacing-6);overflow-y:auto;}/** @public Sidebar navigation list */ .sidebar-nav{display:flex;flex-direction:column;gap:var(--spacing-2);}@media (max-width:768px){.layout-with-sidebar{grid-template-columns:1fr;}.sidebar{display:none;}.sidebar.mobile-visible{display:block;}}/** * @section Sections */ /** @public Section container with responsive spacing */ .section{--section-padding:var(--spacing-8);--section-gap:var(--gap-lg);--section-margin:var(--spacing-8);display:flex;flex-direction:column;gap:var(--section-gap);padding:var(--section-padding);margin-bottom:var(--section-margin);}@media (max-width:768px){.section{--section-padding:var(--spacing-4);--section-gap:var(--gap-md);--section-margin:var(--spacing-4);}}@media (max-width:480px){.section{--section-padding:var(--spacing-3);--section-gap:var(--gap-sm);--section-margin:var(--spacing-3);}}/** @public Bordered section variant */ .section-bordered{border:1px solid hsl(var(--border));border-radius:var(--radius-lg);}/** @public Card-style section */ .section-card{background-color:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);}/** @public Elevated section with stronger shadow */ .section-elevated{background-color:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius-lg);box-shadow:var(--shadow-md);}/** @public Muted background section */ .section-muted{background-color:hsl(var(--muted));border-radius:var(--radius-lg);}/** @public Compact section - reduced padding */ .section-compact{--section-padding:var(--spacing-6);--section-gap:var(--gap-md);}@media (max-width:768px){.section-compact{--section-padding:var(--spacing-3);--section-gap:var(--gap-sm);}}@media (max-width:480px){.section-compact{--section-padding:var(--spacing-2);--section-gap:var(--gap-xs);}}/** @public Spacious section - increased padding */ .section-spacious{--section-padding:var(--spacing-12);--section-gap:var(--gap-xl);}@media (max-width:768px){.section-spacious{--section-padding:var(--spacing-6);--section-gap:var(--gap-lg);}}@media (max-width:480px){.section-spacious{--section-padding:var(--spacing-4);--section-gap:var(--gap-md);}}/** @public Narrow section - max 768px centered */ .section-narrow{max-width:768px;margin-left:auto;margin-right:auto;}/** @public Full width section */ .section-full{padding-left:var(--spacing-4);padding-right:var(--spacing-4);}/** @public Section with no gap */ .section-no-gap{gap:0;}/** @public Horizontal section layout */ .section-horizontal{flex-direction:row;align-items:center;}/** * @section Legacy v1 Patterns */ /** @public Narrow container - v1 compatible */ .narrow{--container-padding-x:clamp(var(--spacing-4),6vw,var(--spacing-8));max-width:768px;margin-left:auto;margin-right:auto;padding-left:var(--container-padding-x);padding-right:var(--container-padding-x);}/** @public Layout wrapper - v1 compatible */ .layout{min-height:100vh;display:flex;flex-direction:column;}/** @public Centered layout modifier */ .layout--centered{align-items:center;justify-content:center;}/** @public Fullscreen layout modifier */ .layout--fullscreen{height:100vh;}/** @public Fixed header layout modifier */ .layout--fixed-header .layout-header{position:fixed;top:0;left:0;right:0;z-index:40;}.layout--fixed-header .layout-main{margin-top:64px;}/** @public Sidebar left layout modifier */ .layout--sidebar-left,.layout--sidebar-right{flex-direction:row;}.layout--sidebar-left .layout-sidebar,.layout--sidebar-right .layout-sidebar{width:250px;flex-shrink:0;}.layout--sidebar-left .layout-main,.layout--sidebar-right .layout-main{flex:1;}/** @public Sidebar right layout modifier */ .layout--sidebar-right{flex-direction:row-reverse;}@media (max-width:768px){.layout--stack{flex-direction:column;}.layout--hide-sidebar .layout-sidebar{display:none;}}/** @public Layout header */ .layout-header{padding:var(--spacing-4);border-bottom:1px solid hsl(var(--border));background-color:hsl(var(--background));}/** @public Layout main content */ .layout-main{flex:1;padding:var(--spacing-6);overflow:auto;}/** @public Layout footer */ .layout-footer{padding:var(--spacing-4);border-top:1px solid hsl(var(--border));background-color:hsl(var(--background));}/** @public Layout sidebar */ .layout-sidebar{padding:var(--spacing-3);border-right:1px solid hsl(var(--border));background-color:hsl(var(--background));overflow:auto;transition:transform 0.3s ease,width 0.3s ease;}/** @public Compact layout sidebar */ .layout-sidebar--compact{padding:var(--spacing-1);}.sidebar-nav{display:flex;flex-direction:column;gap:var(--spacing-1);}.sidebar-nav .btn{justify-content:flex-start;width:100%;text-align:left;}.sidebar-nav .btn i{margin-right:var(--spacing-2);width:1.25rem;text-align:center;}/** @public Collapsed sidebar layout */ .layout--sidebar-collapsed .layout-sidebar{width:60px;padding:var(--spacing-4);}.layout--sidebar-collapsed .layout-sidebar .sidebar-nav{gap:var(--spacing-1);}.layout--sidebar-collapsed .layout-sidebar .sidebar-nav .btn{justify-content:center;padding:var(--spacing-3);width:100%;min-width:unset;}.layout--sidebar-collapsed .layout-sidebar .sidebar-nav .btn span{display:none;}.layout--sidebar-collapsed .layout-sidebar .sidebar-nav .btn i{margin-right:0;}.layout--sidebar-collapsed .layout-sidebar .sidebar-header{text-align:center;display:flex;justify-content:center;padding:0;margin-bottom:var(--spacing-4) !important;}.layout--sidebar-collapsed .layout-sidebar .sidebar-header h1,.layout--sidebar-collapsed .layout-sidebar .sidebar-header h2,.layout--sidebar-collapsed .layout-sidebar .sidebar-header h3,.layout--sidebar-collapsed .layout-sidebar .sidebar-header h4,.layout--sidebar-collapsed .layout-sidebar .sidebar-header h5,.layout--sidebar-collapsed .layout-sidebar .sidebar-header h6,.layout--sidebar-collapsed .layout-sidebar .sidebar-header p,.layout--sidebar-collapsed .layout-sidebar .sidebar-header div{display:none;}.layout--sidebar-collapsed .layout-sidebar .sidebar-header .btn{display:flex;}.layout--sidebar-collapsed .layout-sidebar .sidebar-header .btn i{transform:rotate(180deg);}.layout--sidebar-collapsed .layout-sidebar .sidebar-footer{text-align:center;}.layout--sidebar-collapsed .layout-sidebar .sidebar-footer h1,.layout--sidebar-collapsed .layout-sidebar .sidebar-footer h2,.layout--sidebar-collapsed .layout-sidebar .sidebar-footer h3,.layout--sidebar-collapsed .layout-sidebar .sidebar-footer h4,.layout--sidebar-collapsed .layout-sidebar .sidebar-footer h5,.layout--sidebar-collapsed .layout-sidebar .sidebar-footer h6,.layout--sidebar-collapsed .layout-sidebar .sidebar-footer p{display:none;}/** @public Mobile-only elements (hidden on desktop) */ .mobile-only{display:none;}@media (max-width:768px){.mobile-only{display:flex;}/** @public Mobile sidebar layout with overlay */ .layout--sidebar-mobile .layout-sidebar{position:fixed;top:0;left:0;height:100vh;z-index:9999;transform:translateX(-100%);box-shadow:var(--shadow-lg);}.layout--sidebar-mobile.sidebar-open .layout-sidebar{transform:translateX(0);}.layout--sidebar-mobile.sidebar-open::before{content:'';position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:9998;cursor:pointer;}.layout--sidebar-right.layout--sidebar-mobile .layout-sidebar{left:auto;right:0;transform:translateX(100%);}.layout--sidebar-right.layout--sidebar-mobile.sidebar-open .layout-sidebar{transform:translateX(0);}}/** @public Layout navigation bar */ .layout-nav{display:flex;gap:var(--spacing-4);padding:var(--spacing-4);background-color:hsl(var(--card));border-bottom:1px solid hsl(var(--border));}/** * @section Marketing Patterns */ /** @public Feature row - horizontal feature display */ .feature-row{display:flex;align-items:center;gap:var(--spacing-8);padding:var(--spacing-8);background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius-lg);transition:var(--transition-base);}.feature-row:hover{box-shadow:var(--shadow-soft);}/** @public Feature row reversed - icon/image on right */ .feature-row-reverse{flex-direction:row-reverse;}/** @public Feature icon - colored icon container */ .feature-icon{width:3.5rem;height:3.5rem;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;color:white;box-shadow:var(--shadow-soft);flex-shrink:0;}/** @public Hero card - large gradient card for landing pages */ .card-hero{background:var(--gradient-muted-card,linear-gradient(135deg,hsl(var(--muted)),hsl(var(--card))));color:hsl(var(--card-foreground));border-radius:var(--radius-xl);box-shadow:var(--shadow-hero,0 8px 32px 0 rgba(0,0,0,0.08));padding:var(--spacing-12) var(--spacing-10);min-height:420px;margin-bottom:var(--spacing-2);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}/** @public Hero card body - content wrapper */ .card-hero-body{width:100%;max-width:700px;margin:0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-6);}.card-hero .row{margin-top:var(--spacing-2);}.card-hero .btn{margin-right:var(--spacing-2);}/** @public Avatar stack - overlapping avatars */ .avatar-stack{display:flex;}.avatar-stack .avatar{width:2.5rem;height:2.5rem;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:0.875rem;color:white;border:3px solid hsl(var(--background));box-shadow:var(--shadow-soft);background:linear-gradient(135deg,hsl(var(--primary)),hsl(var(--accent)));}.avatar-stack .avatar + .avatar{margin-left:-0.75rem;}/** @public Icon tile - feature tile with icon */ .icon-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:3.25rem;padding:var(--spacing-2) var(--spacing-4);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);background:hsl(var(--card));color:hsl(var(--card-foreground));font-weight:500;font-size:var(--text-sm);gap:var(--spacing-1);transition:box-shadow var(--transition-base),transform var(--transition-base);}.icon-tile:hover{box-shadow:var(--shadow-md);transform:translateY(-2px) scale(1.03);}.icon-tile i{font-size:1.25rem;margin-bottom:var(--spacing-1);}.icon-tile.gradient-green,.icon-tile.gradient-fuchsia,.icon-tile.gradient-cyan,.icon-tile.gradient-rose,.icon-tile.gradient-mint,.icon-tile.gradient-primary-accent{color:#fff;}/** @public Small icon tile */ .icon-tile-sm{min-width:2rem;min-height:2rem;}/** @public Medium icon tile */ .icon-tile-md{min-width:2.5rem;min-height:2.5rem;}/** @public Full rounded corners - duplicate utility */ .rounded-full{border-radius:var(--radius-full);}/** * @section Display */ /** @public Block display */ .block{display:block;}/** @public Inline-block display */ .inline-block{display:inline-block;}/** @public Inline display */ .inline{display:inline;}/** @public Hide element (display:none) */ .hidden{display:none;}/** @public Invisible (visibility:hidden) */ .invisible{visibility:hidden;}/** @public Vanish - hide with both display and visibility */ .vanish{display:none !important;visibility:hidden !important;}/** * @section Position */ /** @public Relative positioning */ .relative{position:relative;}/** @public Absolute positioning */ .absolute{position:absolute;}/** @public Fixed positioning */ .fixed{position:fixed;}/** @public Sticky positioning */ .sticky{position:sticky;}/** * @section Size */ /** @public Full width (100%) */ .full-width{width:100%;}/** @public Full height (100%) */ .full-height{height:100%;}/** @public Full viewport height */ .full-viewport-height{height:100vh;}/** @public Full viewport width */ .full-viewport-width{width:100vw;}/** @public Max full width */ .max-full-width{max-width:100%;}/** @public Min full height */ .min-full-height{min-height:100%;}/** @public Full width - v1 compat */ .full-x{width:100%;}/** @public Full height - v1 compat */ .full-y{height:100%;}/** @public Full width and height - v1 compat */ .full{width:100%;height:100%;}/** * @section Overflow */ /** @public Auto overflow */ .overflow-auto{overflow:auto;}/** @public Hidden overflow */ .overflow-hidden{overflow:hidden;}/** @public Visible overflow */ .overflow-visible{overflow:visible;}/** @public Scroll overflow */ .overflow-scroll{overflow:scroll;}/** * @section Cursor */ /** @public Pointer cursor */ .cursor-pointer{cursor:pointer;}/** @public Default cursor */ .cursor-default{cursor:default;}/** @public Not-allowed cursor */ .cursor-not-allowed{cursor:not-allowed;}/** * @section User Select */ /** @public Disable text selection */ .select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none;}/** @public Enable text selection */ .select-text{-webkit-user-select:text;-moz-user-select:text;user-select:text;}/** @public Select all text */ .select-all{-webkit-user-select:all;-moz-user-select:all;user-select:all;}/** * @section Pointer Events */ /** @public Disable pointer events */ .pointer-events-none{pointer-events:none;}/** @public Enable pointer events */ .pointer-events-auto{pointer-events:auto;}/** * @section Z-Index */ /** @public Z-index 0 */ .z-0{z-index:0;}/** @public Z-index 10 */ .z-10{z-index:10;}/** @public Z-index 20 */ .z-20{z-index:20;}/** @public Z-index 30 */ .z-30{z-index:30;}/** @public Z-index 40 */ .z-40{z-index:40;}/** @public Z-index 50 */ .z-50{z-index:50;}/** * @section Borders */ /** @public 1px border all sides */ .border{border:1px solid hsl(var(--border));}/** @public Top border */ .border-t{border-top:1px solid hsl(var(--border));}/** @public Right border */ .border-r{border-right:1px solid hsl(var(--border));}/** @public Bottom border */ .border-b{border-bottom:1px solid hsl(var(--border));}/** @public Left border */ .border-l{border-left:1px solid hsl(var(--border));}/** @public Horizontal borders */ .border-x{border-left:1px solid hsl(var(--border));border-right:1px solid hsl(var(--border));}/** @public Vertical borders */ .border-y{border-top:1px solid hsl(var(--border));border-bottom:1px solid hsl(var(--border));}/** @public No border */ .border-none{border:none;}/** @public 0px border */ .border-0{border:0 solid hsl(var(--border));}/** @public 2px border */ .border-2{border:2px solid hsl(var(--border));}/** @public 4px border */ .border-4{border:4px solid hsl(var(--border));}/** @public 8px border */ .border-8{border:8px solid hsl(var(--border));}/** @public Solid border style */ .border-solid{border-style:solid;}/** @public Dashed border style */ .border-dashed{border-style:dashed;}/** @public Dotted border style */ .border-dotted{border-style:dotted;}/** @public Double border style */ .border-double{border-style:double;}/** @public Dashed border shortcut */ .dash{border:1px dashed hsl(var(--border));}/** @public Dotted border shortcut */ .dotted{border:1px dotted hsl(var(--border));}/** @public Medium border radius */ .rounded{border-radius:var(--radius-md);}/** @public Small border radius */ .rounded-sm{border-radius:var(--radius-sm);}/** @public Large border radius */ .rounded-lg{border-radius:var(--radius-lg);}/** @public Extra large border radius */ .rounded-xl{border-radius:var(--radius-xl);}/** @public 2XL border radius */ .rounded-2xl{border-radius:var(--radius-2xl);}/** @public Full/circle border radius */ .rounded-full{border-radius:var(--radius-full);}/** @public No border radius */ .rounded-none{border-radius:0;}/** @public Rounded top */ .rounded-t{border-top-left-radius:var(--radius-md);border-top-right-radius:var(--radius-md);}/** @public Rounded right */ .rounded-r{border-top-right-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md);}/** @public Rounded bottom */ .rounded-b{border-bottom-left-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md);}/** @public Rounded left */ .rounded-l{border-top-left-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md);}/** @public Rounded top-left corner */ .rounded-tl{border-top-left-radius:var(--radius-md);}/** @public Rounded top-right corner */ .rounded-tr{border-top-right-radius:var(--radius-md);}/** @public Rounded bottom-right corner */ .rounded-br{border-bottom-right-radius:var(--radius-md);}/** @public Rounded bottom-left corner */ .rounded-bl{border-bottom-left-radius:var(--radius-md);}/** * @section Aspect Ratio */ /** @public Square aspect ratio (1:1) */ .aspect-square{aspect-ratio:1 / 1;}/** @public Video aspect ratio (16:9) */ .aspect-video{aspect-ratio:16 / 9;}/** * @section Dividers */ /** @public Horizontal divider */ .divider{height:1px;background-color:hsl(var(--border));margin:var(--spacing-4) 0;position:relative;display:flex;align-items:center;justify-content:center;}.divider:has(span)::before,.divider:has(span)::after{content:'';flex:1;height:1px;background-color:hsl(var(--border));}.divider:has(span) span{padding:0 var(--spacing-3);font-size:var(--text-sm);color:hsl(var(--muted-foreground));background-color:hsl(var(--card));white-space:nowrap;}/** @public Vertical divider */ .divider-vertical{width:1px;height:100%;background-color:hsl(var(--border));margin:0 var(--spacing-4);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;}.divider-vertical:has(span)::before,.divider-vertical:has(span)::after{content:'';flex:1;width:1px;background-color:hsl(var(--border));}.divider-vertical:has(span) span{padding:var(--spacing-2) 0;font-size:var(--text-xs);color:hsl(var(--muted-foreground));background-color:hsl(var(--card));white-space:nowrap;}.divider-vertical.divider-vertical-text span{writing-mode:vertical-rl;text-orientation:mixed;padding:var(--spacing-3);font-size:var(--text-sm);}/** * @section Effects */ /** @public Sunken surface effect */ .sunken-surface{background-color:#f5f5f5;border-radius:8px;box-shadow:inset 2px 2px 4px rgba(0,0,0,0.1),inset -2px -2px 4px rgba(255,255,255,0.7);}/* Dark mode override */ .dark .sunken-surface{background-color:#222222;box-shadow:inset 2px 2px 4px rgba(0,0,0,0.6),inset -2px -2px 4px rgba(255,255,255,0.1);}/** @public Surface separator - thin sunken divider */ .surface-separator{background-color:#f5f5f5;border-radius:8px;box-shadow:inset 2px 2px 4px rgba(0,0,0,0.1),inset -2px -2px 4px rgba(255,255,255,0.7);height:3px;}/** @public Full-screen overlay */ .overlay{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;background-color:rgba(0,0,0,0.5);backdrop-filter:blur(2px);z-index:50;}/** @public Glassmorphism effect */ .glass{background:rgba(255,255,255,0.25);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,0.3);box-shadow:0 8px 32px 0 rgba(31,38,135,0.15);}.dark .glass,[data-theme="dark"] .glass{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.18);box-shadow:0 8px 32px 0 rgba(0,0,0,0.3);}/** @public Tooltip with data-tooltip attribute */ .tooltip{position:relative;cursor:help;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px;}.tooltip::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background-color:hsl(var(--foreground));color:hsl(var(--background));padding:var(--spacing-2) var(--spacing-3);border-radius:var(--radius-md);font-size:var(--text-sm);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.2s ease,transform 0.2s ease;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,0.15);}.tooltip::before{content:'';position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:hsl(var(--foreground));opacity:0;pointer-events:none;transition:opacity 0.2s ease,transform 0.2s ease;z-index:100;}.tooltip:hover::after{opacity:1;transform:translateX(-50%) translateY(-4px);}.tooltip:hover::before{opacity:1;transform:translateX(-50%) translateY(-4px);}/** * @section Scroll */ /** @public Auto scroll with smooth scrolling */ .scroll{overflow:auto;-webkit-overflow-scrolling:touch;}/** @public Horizontal scroll only */ .scroll-x{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}/** @public Vertical scroll only */ .scroll-y{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;}/** * @section Layout Helpers */ /** @public Center with auto margin */ .centered{margin-left:auto;margin-right:auto;}/** @public Contents display mode */ .contents{display:contents;}/** * @section Text Utilities */ /** @public Text truncate with ellipsis */ .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}/** @public Clamp text to 1 line */ .text-clamp-1{display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}/** @public Clamp text to 2 lines */ .text-clamp-2{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}/** @public Clamp text to 3 lines */ .text-clamp-3{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}/** @public Clamp text to 4 lines */ .text-clamp-4{display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}/** @public Clamp text to 5 lines */ .text-clamp-5{display:-webkit-box;-webkit-line-clamp:5;line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;}/** @public Clamp text to 6 lines */ .text-clamp-6{display:-webkit-box;-webkit-line-clamp:6;line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;}/** @public Flex grow/shrink - v1 compat */ .flex{flex:1 1 0%;}/** @public Locked flex (no grow/shrink) - v1 compat */ .flex-locked{flex:0 0 auto;}/** @public Display flex - v1 compat */ .x-flex{display:flex;}/** @public Default gap - v1 compat */ .gap{gap:var(--gap-md);}/** * @section Opacity */ /** @public Opacity 0 */ .opacity-0{opacity:0;}/** @public Opacity 25% */ .opacity-25{opacity:0.25;}/** @public Opacity 50% */ .opacity-50{opacity:0.5;}/** @public Opacity 75% */ .opacity-75{opacity:0.75;}/** @public Opacity 100% */ .opacity-100{opacity:1;}/** * @section Background */ /** @public Transparent background */ .bg-transparent{background-color:transparent;}/** @public Translucent surface background */ .bg-surface-translucent{background:hsl(var(--background) / 0.85);}/** @public Subtle muted background */ .bg-muted-subtle{background:hsl(var(--muted) / 0.3);}/** @public Left text alignment */ .text-left{text-align:left;}/** @public Center text alignment */ .text-center{text-align:center;}/** @public Right text alignment */ .text-right{text-align:right;}/** @public Justify text alignment */ .text-justify{text-align:justify;}/** * @section Text Transform */ /** @public Uppercase text */ .uppercase{text-transform:uppercase;}/** @public Lowercase text */ .lowercase{text-transform:lowercase;}/** @public Capitalize text */ .capitalize{text-transform:capitalize;}/** @public Normal case (no transform) */ .normal-case{text-transform:none;}/** * @section Letter Spacing */ /** @public Tighter tracking */ .tracking-tighter{letter-spacing:-0.025em;}/** @public Tight tracking */ .tracking-tight{letter-spacing:-0.05em;}/** @public Normal tracking */ .tracking-normal{letter-spacing:0em;}/** @public Wide tracking */ .tracking-wide{letter-spacing:0.05em;}/** @public Wider tracking */ .tracking-wider{letter-spacing:0.1em;}/** @public Widest tracking */ .tracking-widest{letter-spacing:0.15em;}/** * @section Font Style */ /** @public Italic font style */ .italic{font-style:italic;}/** @public Not italic */ .not-italic{font-style:normal;}/** * @section Text Decoration */ /** @public Underline text */ .underline{text-decoration:underline;}/** @public Line-through text */ .line-through{text-decoration:line-through;}/** @public No underline */ .no-underline{text-decoration:none;}/** * @section Whitespace */ /** @public Normal whitespace */ .whitespace-normal{white-space:normal;}/** @public No-wrap whitespace */ .whitespace-nowrap{white-space:nowrap;}/** @public Pre whitespace */ .whitespace-pre{white-space:pre;}/** @public Pre-wrap whitespace */ .whitespace-pre-wrap{white-space:pre-wrap;}/** * @section List Style */ /** @public No list style */ .list-none{list-style-type:none;}/** @public Disc list style */ .list-disc{list-style-type:disc;}/** @public Decimal list style */ .list-decimal{list-style-type:decimal;}/** * @section Object Fit */ /** @public Object fit contain */ .object-contain{-o-object-fit:contain;object-fit:contain;}/** @public Object fit cover */ .object-cover{-o-object-fit:cover;object-fit:cover;}/** @public Object fit fill */ .object-fill{-o-object-fit:fill;object-fit:fill;}/** @public Object fit none */ .object-none{-o-object-fit:none;object-fit:none;}/** @public Object fit scale-down */ .object-scale-down{-o-object-fit:scale-down;object-fit:scale-down;}/** * @section Object Position */ /** @public Object position center */ .object-center{-o-object-position:center;object-position:center;}/** @public Object position top */ .object-top{-o-object-position:top;object-position:top;}/** @public Object position bottom */ .object-bottom{-o-object-position:bottom;object-position:bottom;}/** @public Object position left */ .object-left{-o-object-position:left;object-position:left;}/** @public Object position right */ .object-right{-o-object-position:right;object-position:right;}/** * @section Transform Origin */ /** @public Transform origin center */ .origin-center{transform-origin:center;}/** @public Transform origin top */ .origin-top{transform-origin:top;}/** @public Transform origin bottom */ .origin-bottom{transform-origin:bottom;}/** @public Transform origin left */ .origin-left{transform-origin:left;}/** @public Transform origin right */ .origin-right{transform-origin:right;}/** * @section Scale */ /** @public Scale to 0 */ .scale-0{transform:scale(0);}/** @public Scale to 50% */ .scale-50{transform:scale(0.5);}/** @public Scale to 75% */ .scale-75{transform:scale(0.75);}/** @public Scale to 90% */ .scale-90{transform:scale(0.9);}/** @public Scale to 95% */ .scale-95{transform:scale(0.95);}/** @public Scale to 100% */ .scale-100{transform:scale(1);}/** @public Scale to 105% */ .scale-105{transform:scale(1.05);}/** @public Scale to 110% */ .scale-110{transform:scale(1.1);}/** @public Scale to 125% */ .scale-125{transform:scale(1.25);}/** @public Scale to 150% */ .scale-150{transform:scale(1.5);}/** * @section Rotate */ /** @public Rotate 0 degrees */ .rotate-0{transform:rotate(0deg);}/** @public Rotate 45 degrees */ .rotate-45{transform:rotate(45deg);}/** @public Rotate 90 degrees */ .rotate-90{transform:rotate(90deg);}/** @public Rotate 180 degrees */ .rotate-180{transform:rotate(180deg);}/** @public Rotate 270 degrees */ .rotate-270{transform:rotate(270deg);}/** @public Rotate -45 degrees */ .-rotate-45{transform:rotate(-45deg);}/** @public Rotate -90 degrees */ .-rotate-90{transform:rotate(-90deg);}/** @public Rotate -180 degrees */ .-rotate-180{transform:rotate(-180deg);}/** * @section Ring & Outline */ /** @public Ring (focus ring) */ .ring{box-shadow:0 0 0 3px hsl(var(--ring) / 0.5);}/** @public Inset ring */ .ring-inset{box-shadow:inset 0 0 0 3px hsl(var(--ring) / 0.5);}/** @public No ring */ .ring-none{box-shadow:none;}/** @public No outline */ .outline-none{outline:2px solid transparent;outline-offset:2px;}/** @public Outline */ .outline{outline:2px solid hsl(var(--ring));outline-offset:2px;}/** @public Dashed outline */ .outline-dashed{outline:2px dashed hsl(var(--ring));outline-offset:2px;}/** @public Inner shadow */ .shadow-inner{box-shadow:inset 0 2px 4px 0 rgba(0,0,0,0.06);}/** * @section Image & Media */ /** @public Crisp image rendering */ .image-crisp{image-rendering:crisp-edges;image-rendering:-webkit-optimize-contrast;}/** @public Auto image rendering */ .image-auto{image-rendering:auto;}/** * @section Mix Blend Mode */ /** @public Normal blend mode */ .mix-blend-normal{mix-blend-mode:normal;}/** @public Multiply blend mode */ .mix-blend-multiply{mix-blend-mode:multiply;}/** @public Screen blend mode */ .mix-blend-screen{mix-blend-mode:screen;}/** @public Overlay blend mode */ .mix-blend-overlay{mix-blend-mode:overlay;}/** * @section Backdrop Filter */ /** @public Small backdrop blur */ .backdrop-blur-sm{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}/** @public Medium backdrop blur */ .backdrop-blur{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}/** @public Large backdrop blur (12px) */ .backdrop-blur-md{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}/** @public Extra large backdrop blur (16px) */ .backdrop-blur-lg{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}/** @public 2XL backdrop blur (24px) */ .backdrop-blur-xl{backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);}/** @public No backdrop blur */ .backdrop-blur-none{backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);}/** * @section Vertical Alignment */ /** @public Baseline vertical alignment */ .align-baseline{vertical-align:baseline;}/** @public Top vertical alignment */ .align-top{vertical-align:top;}/** @public Middle vertical alignment */ .align-middle{vertical-align:middle;}/** @public Bottom vertical alignment */ .align-bottom{vertical-align:bottom;}/** @public Text-top vertical alignment */ .align-text-top{vertical-align:text-top;}/** @public Text-bottom vertical alignment */ .align-text-bottom{vertical-align:text-bottom;}/** * @section Word Break */ /** @public Normal break behavior */ .break-normal{overflow-wrap:normal;word-break:normal;}/** @public Break words */ .break-words{overflow-wrap:break-word;}/** @public Break all */ .break-all{word-break:break-all;}/** * @section Resize */ /** @public No resize */ .resize-none{resize:none;}/** @public Both resize */ .resize{resize:both;}/** @public Horizontal resize */ .resize-x{resize:horizontal;}/** @public Vertical resize */ .resize-y{resize:vertical;}/** * @section Touch Action */ /** @public Auto touch action */ .touch-auto{touch-action:auto;}/** @public No touch action */ .touch-none{touch-action:none;}/** @public Pan-x touch action */ .touch-pan-x{touch-action:pan-x;}/** @public Pan-y touch action */ .touch-pan-y{touch-action:pan-y;}/** * @section Performance */ /** @public Auto will-change */ .will-change-auto{will-change:auto;}/** @public Will-change scroll */ .will-change-scroll{will-change:scroll-position;}/** @public Will-change contents */ .will-change-contents{will-change:contents;}/** @public Will-change transform */ .will-change-transform{will-change:transform;}/** * @section UI Components */ /** @public Section label - uppercase small heading */ .section-label{font-size:var(--text-xs);font-weight:var(--font-medium);color:hsl(var(--muted-foreground));text-transform:uppercase;letter-spacing:0.1em;line-height:var(--leading-tight);}/** @public Dotted grid background */ .bg-dotted{background-image:radial-gradient(circle,hsl(var(--border)) 1px,transparent 1px);background-size:10px 10px;background-position:0 0;}/** @public Demo dish - presentation wrapper */ .demo-dish{padding:var(--spacing-6);margin-top:var(--spacing-3);border:2px dashed hsl(var(--border));border-radius:var(--radius-lg);background:hsl(var(--muted) / 0.2);position:relative;background-image:radial-gradient(circle,hsl(var(--border)) 1px,transparent 1px);background-size:10px 10px;background-position:0 0;}.demo-dish::before{content:'Demo';position:absolute;top:calc(-1 * var(--spacing-2));left:var(--spacing-4);background:hsl(var(--background));padding:0 var(--spacing-2);font-size:var(--text-xs);font-weight:var(--font-medium);color:hsl(var(--muted-foreground));text-transform:uppercase;letter-spacing:0.05em;}/** @public Compact demo dish */ .demo-dish-compact{padding:var(--spacing-4);}/** @public Spacious demo dish */ .demo-dish-spacious{padding:var(--spacing-8);}/** * @section Responsive Visibility */ @media (max-width:480px){/** @public Hide on extra small screens */ .xs-hide{display:none !important;}/** @public Show on extra small screens */ .xs-show{display:block !important;}}@media (max-width:640px){/** @public Hide on small screens */ .sm-hide{display:none !important;}/** @public Show on small screens */ .sm-show{display:block !important;}}@media (max-width:768px){/** @public Hide on medium screens */ .md-hide{display:none !important;}/** @public Show on medium screens */ .md-show{display:block !important;}}@media (max-width:1024px){/** @public Hide on large screens */ .lg-hide{display:none !important;}/** @public Show on large screens */ .lg-show{display:block !important;}}@media (max-width:640px){/** @public Hide on mobile (deprecated) */ .md-hidden{display:none !important;}/** @public Show on mobile (deprecated) */ .md-visible{display:block !important;}}@media (max-width:768px){/** @public Hide on tablet (deprecated) */ .tablet-hidden{display:none !important;}/** @public Show on tablet (deprecated) */ .tablet-visible{display:block !important;}}@media (max-width:1024px){/** @public Hide on desktop (deprecated) */ .desktop-hidden{display:none !important;}/** @public Show on desktop (deprecated) */ .desktop-visible{display:block !important;}}/** * @section Prose Typography */ /** @public Rich typography for article content */ .prose{line-height:var(--leading-normal);max-width:65ch;}.prose h1{font-size:var(--text-4xl);font-weight:var(--font-bold);line-height:var(--leading-tight);margin-bottom:var(--spacing-6);margin-top:var(--spacing-8);}.prose h2{font-size:var(--text-xl);font-weight:var(--font-semibold);line-height:var(--leading-tight);margin-bottom:var(--spacing-4);margin-top:var(--spacing-8);}.prose h3{font-size:var(--text-lg);font-weight:var(--font-semibold);line-height:var(--leading-tight);margin-bottom:var(--spacing-4);margin-top:var(--spacing-6);}.prose h4{font-size:var(--text-base);font-weight:var(--font-semibold);margin-bottom:var(--spacing-2);margin-top:var(--spacing-6);}.prose h5,.prose h6{font-size:var(--text-base);font-weight:var(--font-medium);margin-bottom:var(--spacing-2);margin-top:var(--spacing-4);}.prose p{margin-bottom:var(--spacing-6);}.prose p + p{margin-top:calc(-1 * var(--spacing-2));}.prose ul,.prose ol{margin-bottom:var(--spacing-6);padding-left:var(--spacing-6);}.prose li{margin-bottom:var(--spacing-2);}.prose li ul,.prose li ol{margin-top:var(--spacing-2);margin-bottom:var(--spacing-2);}.prose blockquote{border-left:4px solid hsl(var(--border));padding-left:var(--spacing-4);margin-left:0;margin-right:0;margin-bottom:var(--spacing-6);font-style:italic;color:hsl(var(--muted-foreground));}.prose code{background-color:hsl(var(--muted));color:hsl(var(--destructive));padding:var(--spacing-1) var(--spacing-2);border-radius:var(--radius-sm);font-size:0.875em;font-family:var(--font-mono);}.prose pre{margin-bottom:var(--spacing-6);}.prose pre code{display:block;background-color:hsl(var(--foreground));color:hsl(var(--background));padding:var(--spacing-6);border-radius:var(--radius-md);overflow-x:auto;font-size:0.875em;}.prose hr{border:0;height:1px;background-color:hsl(var(--border));margin:var(--spacing-8) 0;}.prose table{width:100%;border-collapse:collapse;margin-bottom:var(--spacing-6);}.prose table th{border-bottom:2px solid hsl(var(--border));padding:var(--spacing-2) var(--spacing-4);text-align:left;font-weight:var(--font-semibold);}.prose table td{border-bottom:1px solid hsl(var(--border));padding:var(--spacing-2) var(--spacing-4);}.prose table tr:last-child td{border-bottom:none;}.prose a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:0.15em;transition:color var(--transition-base);}.prose a:hover{opacity:0.8;}.prose img{max-width:100%;height:auto;margin-bottom:var(--spacing-6);border-radius:var(--radius-sm);}.prose figure{margin:0 0 var(--spacing-6) 0;}.prose figure figcaption{font-size:var(--text-sm);color:hsl(var(--muted-foreground));margin-top:var(--spacing-2);text-align:center;}/** @public Small prose variant */ .prose-sm{line-height:var(--leading-normal);max-width:65ch;font-size:var(--text-sm);}.prose-sm h1{font-size:var(--text-4xl);font-weight:var(--font-bold);line-height:var(--leading-tight);margin-bottom:var(--spacing-6);margin-top:var(--spacing-8);}.prose-sm h2{font-size:var(--text-xl);font-weight:var(--font-semibold);line-height:var(--leading-tight);margin-bottom:var(--spacing-4);margin-top:var(--spacing-8);}.prose-sm h3{font-size:var(--text-lg);font-weight:var(--font-semibold);line-height:var(--leading-tight);margin-bottom:var(--spacing-4);margin-top:var(--spacing-6);}.prose-sm h4{font-size:var(--text-base);font-weight:var(--font-semibold);margin-bottom:var(--spacing-2);margin-top:var(--spacing-6);}.prose-sm h5,.prose-sm h6{font-size:var(--text-base);font-weight:var(--font-medium);margin-bottom:var(--spacing-2);margin-top:var(--spacing-4);}.prose-sm p{margin-bottom:var(--spacing-6);}.prose-sm p + p{margin-top:calc(-1 * var(--spacing-2));}.prose-sm ul,.prose-sm ol{margin-bottom:var(--spacing-6);padding-left:var(--spacing-6);}.prose-sm li{margin-bottom:var(--spacing-2);}.prose-sm li ul,.prose-sm li ol{margin-top:var(--spacing-2);margin-bottom:var(--spacing-2);}.prose-sm blockquote{border-left:4px solid hsl(var(--border));padding-left:var(--spacing-4);margin-left:0;margin-right:0;margin-bottom:var(--spacing-6);font-style:italic;color:hsl(var(--muted-foreground));}.prose-sm code{background-color:hsl(var(--muted));color:hsl(var(--destructive));padding:var(--spacing-1) var(--spacing-2);border-radius:var(--radius-sm);font-size:0.875em;font-family:var(--font-mono);}.prose-sm pre{margin-bottom:var(--spacing-6);}.prose-sm pre code{display:block;background-color:hsl(var(--foreground));color:hsl(var(--background));padding:var(--spacing-6);border-radius:var(--radius-md);overflow-x:auto;font-size:0.875em;}.prose-sm hr{border:0;height:1px;background-color:hsl(var(--border));margin:var(--spacing-8) 0;}.prose-sm table{width:100%;border-collapse:collapse;margin-bottom:var(--spacing-6);}.prose-sm table th{border-bottom:2px solid hsl(var(--border));padding:var(--spacing-2) var(--spacing-4);text-align:left;font-weight:var(--font-semibold);}.prose-sm table td{border-bottom:1px solid hsl(var(--border));padding:var(--spacing-2) var(--spacing-4);}.prose-sm table tr:last-child td{border-bottom:none;}.prose-sm a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:0.15em;transition:color var(--transition-base);}.prose-sm a:hover{opacity:0.8;}.prose-sm img{max-width:100%;height:auto;margin-bottom:var(--spacing-6);border-radius:var(--radius-sm);}.prose-sm figure{margin:0 0 var(--spacing-6) 0;}.prose-sm figure figcaption{font-size:var(--text-sm);color:hsl(var(--muted-foreground));margin-top:var(--spacing-2);text-align:center;}.prose-sm h1{font-size:var(--text-xl);}.prose-sm h2{font-size:var(--text-lg);}.prose-sm h3{font-size:var(--text-base);}/** @public Large prose variant */ .prose-lg{line-height:var(--leading-normal);max-width:65ch;font-size:var(--text-lg);}.prose-lg h1{font-size:var(--text-4xl);font-weight:var(--font-bold);line-height:var(--leading-tight);margin-bottom:var(--spacing-6);margin-top:var(--spacing-8);}.prose-lg h2{font-size:var(--text-xl);font-weight:var(--font-semibold);line-height:var(--leading-tight);margin-bottom:var(--spacing-4);margin-top:var(--spacing-8);}.prose-lg h3{font-size:var(--text-lg);font-weight:var(--font-semibold);line-height:var(--leading-tight);margin-bottom:var(--spacing-4);margin-top:var(--spacing-6);}.prose-lg h4{font-size:var(--text-base);font-weight:var(--font-semibold);margin-bottom:var(--spacing-2);margin-top:var(--spacing-6);}.prose-lg h5,.prose-lg h6{font-size:var(--text-base);font-weight:var(--font-medium);margin-bottom:var(--spacing-2);margin-top:var(--spacing-4);}.prose-lg p{margin-bottom:var(--spacing-6);}.prose-lg p + p{margin-top:calc(-1 * var(--spacing-2));}.prose-lg ul,.prose-lg ol{margin-bottom:var(--spacing-6);padding-left:var(--spacing-6);}.prose-lg li{margin-bottom:var(--spacing-2);}.prose-lg li ul,.prose-lg li ol{margin-top:var(--spacing-2);margin-bottom:var(--spacing-2);}.prose-lg blockquote{border-left:4px solid hsl(var(--border));padding-left:var(--spacing-4);margin-left:0;margin-right:0;margin-bottom:var(--spacing-6);font-style:italic;color:hsl(var(--muted-foreground));}.prose-lg code{background-color:hsl(var(--muted));color:hsl(var(--destructive));padding:var(--spacing-1) var(--spacing-2);border-radius:var(--radius-sm);font-size:0.875em;font-family:var(--font-mono);}.prose-lg pre{margin-bottom:var(--spacing-6);}.prose-lg pre code{display:block;background-color:hsl(var(--foreground));color:hsl(var(--background));padding:var(--spacing-6);border-radius:var(--radius-md);overflow-x:auto;font-size:0.875em;}.prose-lg hr{border:0;height:1px;background-color:hsl(var(--border));margin:var(--spacing-8) 0;}.prose-lg table{width:100%;border-collapse:collapse;margin-bottom:var(--spacing-6);}.prose-lg table th{border-bottom:2px solid hsl(var(--border));padding:var(--spacing-2) var(--spacing-4);text-align:left;font-weight:var(--font-semibold);}.prose-lg table td{border-bottom:1px solid hsl(var(--border));padding:var(--spacing-2) var(--spacing-4);}.prose-lg table tr:last-child td{border-bottom:none;}.prose-lg a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:0.15em;transition:color var(--transition-base);}.prose-lg a:hover{opacity:0.8;}.prose-lg img{max-width:100%;height:auto;margin-bottom:var(--spacing-6);border-radius:var(--radius-sm);}.prose-lg figure{margin:0 0 var(--spacing-6) 0;}.prose-lg figure figcaption{font-size:var(--text-sm);color:hsl(var(--muted-foreground));margin-top:var(--spacing-2);text-align:center;}.prose-lg h1{font-size:calc(var(--text-4xl) * 1.1);}.prose-lg h2{font-size:calc(var(--text-xl) * 1.1);}.prose-lg h3{font-size:calc(var(--text-lg) * 1.1);}/** @public Prose layout - max-width constraint */ .prose-layout{max-width:65ch;}/** @public Reset prose styles */ .no-prose{max-width:none !important;line-height:var(--leading-normal) !important;}.no-prose *{margin:0 !important;padding:0 !important;}/** * @section Gradient Backgrounds */ /** @public Primary to accent gradient */ .gradient-primary-accent{background:linear-gradient(135deg,hsl(var(--primary)),hsl(var(--accent)));}/** @public Green gradient */ .gradient-green{background:linear-gradient(135deg,#10b981,#34d399);}/** @public Purple gradient */ .gradient-purple{background:linear-gradient(135deg,#8b5cf6,#a78bfa);}/** @public Amber gradient */ .gradient-amber{background:linear-gradient(135deg,#f59e0b,#fbbf24);}/** @public Blue gradient */ .gradient-blue{background:linear-gradient(135deg,#3b82f6,#60a5fa);}/** @public Pink gradient */ .gradient-pink{background:linear-gradient(135deg,#ec4899,#f472b6);}/** @public Indigo gradient */ .gradient-indigo{background:linear-gradient(135deg,#667eea,#764ba2);}/** @public Fuchsia gradient */ .gradient-fuchsia{background:linear-gradient(135deg,#f093fb,#f5576c);}/** @public Cyan gradient */ .gradient-cyan{background:linear-gradient(135deg,#4facfe,#00f2fe);}/** @public Mint gradient */ .gradient-mint{background:linear-gradient(135deg,#43e97b,#38f9d7);}/** @public Rose gradient */ .gradient-rose{background:linear-gradient(135deg,#fa709a,#fee140);}/** @public Muted to card gradient */ .gradient-muted-card{background:linear-gradient(135deg,hsl(var(--muted)),hsl(var(--card)));}/** * @section Demo Utilities */ /** @public Example frame for demo containers */ .example-frame{border:2px solid hsl(var(--border));border-radius:var(--radius-md);overflow:hidden;position:relative;background:transparent;}.example-frame.border-dashed{border-style:dashed;}/** @public 300px height helper */ .h-300{height:300px;}/** @public 400px height helper */ .h-400{height:400px;}:root{--transition-fast:150ms cubic-bezier(0.4,0,0.2,1);--transition-base:200ms cubic-bezier(0.4,0,0.2,1);--transition-slow:300ms cubic-bezier(0.4,0,0.2,1);}/** * @section Transitions */ /** @public No transition */ .transition-none{transition:none;}/** @public Transition all properties */ .transition-all{transition:all var(--transition-base);}/** @public Transition colors only */ .transition-colors{transition:color var(--transition-base),background-color var(--transition-base),border-color var(--transition-base);}/** @public Transition opacity only */ .transition-opacity{transition:opacity var(--transition-base);}/** @public Transition transform only */ .transition-transform{transition:transform var(--transition-base);}/** @public Hover lift effect - raises element */ .hover-lift{transition:transform var(--transition-base),box-shadow var(--transition-base);}.hover-lift:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}/** @public Hover scale effect - grows slightly */ .hover-scale{transition:transform var(--transition-base);}.hover-scale:hover{transform:scale(1.05);}/** @public Focus ring - accessibility outline */ .focus-ring:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px;}/** * @section Flex Containers */ /** @public Horizontal flex with gap,wraps */ .row{display:flex;flex-direction:row;gap:var(--gap-md);flex-wrap:wrap;}/** @public Horizontal flex,no wrap */ .row-nowrap{display:flex;flex-direction:row;gap:var(--gap-md);flex-wrap:nowrap;}/** @public Vertical flex column with gap */ .col{display:flex;flex-direction:column;gap:var(--gap-md);}/** * @section Alignment Shortcuts */ /** @public Center both axes */ .center{display:flex;justify-content:center;align-items:center;}/** @public Center horizontally */ .center-x{display:flex;justify-content:center;}/** @public Center vertically */ .center-y{display:flex;align-items:center;}/** @public Flex-start both axes */ .start{display:flex;justify-content:flex-start;align-items:flex-start;}/** @public Flex-start horizontally */ .start-x{display:flex;justify-content:flex-start;}/** @public Flex-start vertically */ .start-y{display:flex;align-items:flex-start;}/** @public Flex-end both axes */ .end{display:flex;justify-content:flex-end;align-items:flex-end;}/** @public Flex-end horizontally */ .end-x{display:flex;justify-content:flex-end;}/** @public Flex-end vertically */ .end-y{display:flex;align-items:flex-end;}/** @public Space-between with center-y */ .between{display:flex;justify-content:space-between;align-items:center;}/** @public Space-between horizontally */ .between-x{display:flex;justify-content:space-between;}/** @public Space-around with center-y */ .around{display:flex;justify-content:space-around;align-items:center;}/** @public Space-evenly with center-y */ .evenly{display:flex;justify-content:space-evenly;align-items:center;}/** * @section Flex Items */ /** @public Grow/shrink equally */ .flex-1{flex:1 1 0%;}/** @public Grow/shrink to content */ .flex-auto{flex:1 1 auto;}/** @public Don't flex */ .flex-none{flex:none;}/** @public Allow growing */ .flex-grow{flex-grow:1;}/** @public Allow shrinking */ .flex-shrink{flex-shrink:1;}/** @public Prevent shrinking */ .flex-no-shrink{flex-shrink:0;}/** @public Enable flex wrap */ .wrap{flex-wrap:wrap;}/** @public Disable flex wrap */ .nowrap{flex-wrap:nowrap;}/** * @section Small Gap Variants */ /** @public Horizontal flex with small gap,wraps */ .row-xs{display:flex;flex-direction:row;gap:var(--gap-sm);flex-wrap:wrap;}/** @public XS screen no-wrap row */ .row-xs-nowrap{display:flex;flex-direction:row;gap:var(--gap-sm);flex-wrap:nowrap;}/** @public Vertical flex column with small gap */ .col-xs{display:flex;flex-direction:column;gap:var(--gap-sm);}/** * @section Responsive Variants */ @media (max-width:768px){/** @public Direction change to column @768px */ .md-col{flex-direction:column;}/** @public Direction change to row @768px */ .md-row{flex-direction:row;}/** @public Center both axes @768px */ .md-center{justify-content:center;align-items:center;}}@media (max-width:480px){/** @public Direction change to column @480px */ .xs-col{flex-direction:column;}/** @public Direction change to row @480px */ .xs-row{flex-direction:row;}/** @public Center both axes @480px */ .xs-center{display:flex;justify-content:center;align-items:center;}/** @public Center horizontally @480px */ .xs-center-x{display:flex;justify-content:center;}/** @public Center vertically @480px */ .xs-center-y{display:flex;align-items:center;}/** @public Flex-start both axes @480px */ .xs-start{display:flex;justify-content:flex-start;align-items:flex-start;}/** @public Flex-start horizontally @480px */ .xs-start-x{display:flex;justify-content:flex-start;}/** @public Flex-start vertically @480px */ .xs-start-y{display:flex;align-items:flex-start;}/** @public Flex-end both axes @480px */ .xs-end{display:flex;justify-content:flex-end;align-items:flex-end;}/** @public Flex-end horizontally @480px */ .xs-end-x{display:flex;justify-content:flex-end;}/** @public Flex-end vertically @480px */ .xs-end-y{display:flex;align-items:flex-end;}/** @public Space-between with center-y @480px */ .xs-between{display:flex;justify-content:space-between;align-items:center;}/** @public Space-between horizontally @480px */ .xs-between-x{display:flex;justify-content:space-between;}/** @public Space-around with center-y @480px */ .xs-around{display:flex;justify-content:space-around;align-items:center;}/** @public Space-around horizontally @480px */ .xs-around-x{display:flex;justify-content:space-around;}/** @public Space-evenly with center-y @480px */ .xs-evenly{display:flex;justify-content:space-evenly;align-items:center;}/** @public Space-evenly horizontally @480px */ .xs-evenly-x{display:flex;justify-content:space-evenly;}}/** * @section Grid Base */ /** @public Display grid with gap */ .grid{display:grid;gap:var(--gap-md);}/** * @section Column Layouts */ /** @public 1 column grid */ .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));}/** @public 2 column grid */ .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}/** @public 3 column grid */ .grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}/** @public 4 column grid */ .grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}/** @public 6 column grid */ .grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr));}/** @public 12 column grid */ .grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr));}/** * @section Auto Layouts */ /** @public Responsive auto-fit (min 250px) */ .grid-auto-fit{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--gap-md);}/** @public Responsive auto-fill (min 250px) */ .grid-auto-fill{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--gap-md);}/** * @section Item Spanning */ /** @public Span 1 column */ .col-span-1{grid-column:span 1 / span 1;}/** @public Span 2 columns */ .col-span-2{grid-column:span 2 / span 2;}/** @public Span 3 columns */ .col-span-3{grid-column:span 3 / span 3;}/** @public Span 4 columns */ .col-span-4{grid-column:span 4 / span 4;}/** @public Span 6 columns */ .col-span-6{grid-column:span 6 / span 6;}/** @public Span all columns */ .col-span-full{grid-column:1 / -1;}/** * @section Responsive */ @media (max-width:768px){.grid-cols-2,.grid-cols-3,.grid-cols-4,.grid-cols-6,.grid-cols-12{grid-template-columns:repeat(1,minmax(0,1fr));}/** @public Override to 2 columns @768px */ .md-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}.md-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr)) !important;}}/** * @section Flexible Space */ /** @public Flex-grow spacer */ .spacer{flex-grow:1;}/** * @section Fixed Height Spacers */ /** @public Fixed height spacer (4px) */ .spacer-h-1{height:var(--spacing-1);}/** @public Fixed height spacer (8px) */ .spacer-h-2{height:var(--spacing-2);}/** @public Fixed height spacer (16px) */ .spacer-h-4{height:var(--spacing-4);}/** @public Fixed height spacer (32px) */ .spacer-h-8{height:var(--spacing-8);}/** * @section Fixed Width Spacers */ /** @public Fixed width spacer (4px) */ .spacer-w-1{width:var(--spacing-1);}/** @public Fixed width spacer (8px) */ .spacer-w-2{width:var(--spacing-2);}/** @public Fixed width spacer (16px) */ .spacer-w-4{width:var(--spacing-4);}/** @public Fixed width spacer (32px) */ .spacer-w-8{width:var(--spacing-8);}/** * @section Responsive Spacers */ @media (max-width:480px){/** @public Flex-grow spacer @480px */ .xs-spacer{flex-grow:1;}/** @public Fixed height (4px) @480px */ .xs-spacer-h-1{height:var(--spacing-1);}/** @public Fixed height (8px) @480px */ .xs-spacer-h-2{height:var(--spacing-2);}/** @public Fixed height (16px) @480px */ .xs-spacer-h-4{height:var(--spacing-4);}/** @public Fixed height (32px) @480px */ .xs-spacer-h-8{height:var(--spacing-8);}/** @public Fixed width (4px) @480px */ .xs-spacer-w-1{width:var(--spacing-1);}/** @public Fixed width (8px) @480px */ .xs-spacer-w-2{width:var(--spacing-2);}/** @public Fixed width (16px) @480px */ .xs-spacer-w-4{width:var(--spacing-4);}/** @public Fixed width (32px) @480px */ .xs-spacer-w-8{width:var(--spacing-8);}}/** * @section Vertical Spacing */ /** @public Default vertical gap */ .stack{display:flex;flex-direction:column;gap:var(--spacing-2);}/** @public Extra small vertical gap */ .stack-xs{display:flex;flex-direction:column;gap:var(--spacing-0);}/** @public Small vertical gap */ .stack-sm{display:flex;flex-direction:column;gap:var(--spacing-1);}/** @public Medium vertical gap */ .stack-md{display:flex;flex-direction:column;gap:var(--spacing-2);}/** @public Large vertical gap */ .stack-lg{display:flex;flex-direction:column;gap:var(--spacing-4);}/** @public Extra large vertical gap */ .stack-xl{display:flex;flex-direction:column;gap:var(--spacing-5);}@media (max-width:480px){/** @public Column layout with gap @480px */ .xs-stack{display:flex;flex-direction:column;gap:var(--spacing-2);}}/** @public Stack on screens wider than XS */ @media (min-width:600px){.gt-xs-stack{display:flex;flex-direction:column;gap:var(--spacing-2);}}:root{--background:0 0% 100%;--foreground:222.2 84% 4.9%;--card:0 0% 100%;--card-foreground:222.2 84% 4.9%;--popover:0 0% 100%;--popover-foreground:222.2 84% 4.9%;--primary:222.2 47.4% 11.2%;--primary-foreground:210 40% 98%;--secondary:210 40% 96.1%;--secondary-foreground:222.2 47.4% 11.2%;--muted:210 40% 96.1%;--muted-foreground:215.4 16.3% 46.9%;--accent:217 91% 60%;--accent-foreground:210 40% 98%;--destructive:0 84.2% 60.2%;--destructive-foreground:210 40% 98%;--border:214.3 31.8% 91.4%;--input:214.3 31.8% 91.4%;--ring:222.2 84% 4.9%;--radius:0.5rem;--slate-50:210 40% 98%;--slate-100:210 40% 96.1%;--slate-200:214.3 31.8% 91.4%;--slate-300:212.7 26.8% 83.9%;--slate-400:215 20.2% 65.1%;--slate-500:215.4 16.3% 46.9%;--slate-600:215.3 19.3% 34.5%;--slate-700:215.3 25% 26.7%;--slate-800:217.2 32.6% 17.5%;--slate-900:222.2 47.4% 11.2%;--slate-950:229 84% 5%;--success:142.1 76.2% 36.3%;--success-foreground:210 40% 98%;--info:221.2 83.2% 53.3%;--info-foreground:210 40% 98%;--warning:38 92% 50%;--warning-foreground:222.2 47.4% 11.2%;--golden:43 74% 49%;--golden-foreground:210 40% 98%;--attention:45 93% 47%;--attention-foreground:0 0% 0%;--attention-violet:267 76% 57%;--attention-violet-foreground:210 40% 98%;--attention-red:0 84% 60%;--attention-red-foreground:210 40% 98%;}/** @public Dark mode color scheme */ .dark,[data-theme="dark"]{--background:222.2 84% 4.9%;--foreground:210 40% 98%;--card:222.2 84% 4.9%;--card-foreground:210 40% 98%;--popover:222.2 84% 4.9%;--popover-foreground:210 40% 98%;--primary:210 40% 98%;--primary-foreground:222.2 47.4% 11.2%;--secondary:217.2 32.6% 17.5%;--secondary-foreground:210 40% 98%;--muted:217.2 32.6% 17.5%;--muted-foreground:215 20.2% 65.1%;--accent:217 91% 70%;--accent-foreground:222.2 84% 4.9%;--destructive:0 72% 51%;--destructive-foreground:210 40% 98%;--border:217.2 32.6% 17.5%;--input:217.2 32.6% 17.5%;--ring:212.7 26.8% 83.9%;--slate-50:229 84% 5%;--slate-100:222.2 47.4% 11.2%;--slate-200:217.2 32.6% 17.5%;--slate-300:215.3 25% 26.7%;--slate-400:215.3 19.3% 34.5%;--slate-500:215.4 16.3% 46.9%;--slate-600:215 20.2% 65.1%;--slate-700:212.7 26.8% 83.9%;--slate-800:214.3 31.8% 91.4%;--slate-900:210 40% 96.1%;--slate-950:210 40% 98%;}/** * @section Background Colors */ /** @public Page background color */ .bg-background{background-color:hsl(var(--background));}/** @public Foreground as background (inverted) */ .bg-foreground{background-color:hsl(var(--foreground));}/** @public Card background */ .bg-card{background-color:hsl(var(--card));}/** @public Primary brand color background */ .bg-primary{background-color:hsl(var(--primary));}/** @public Secondary color background */ .bg-secondary{background-color:hsl(var(--secondary));}/** @public Muted/subtle background */ .bg-muted{background-color:hsl(var(--muted));}/** @public Accent brand color background */ .bg-accent{background-color:hsl(var(--accent));}/** @public Destructive/error background */ .bg-destructive{background-color:hsl(var(--destructive));}/** @public Success/positive background */ .bg-success{background-color:hsl(var(--success));}/** @public Info background */ .bg-info{background-color:hsl(var(--info));}/** @public Warning background */ .bg-warning{background-color:hsl(var(--warning));}/** * @section Text Colors */ /** @public Main text color */ .text-foreground{color:hsl(var(--foreground));}/** @public Primary brand color text */ .text-primary{color:hsl(var(--primary));}/** @public Secondary text color */ .text-secondary{color:hsl(var(--secondary-foreground));}/** @public Muted/subtle text */ .text-muted{color:hsl(var(--muted-foreground));}/** @public Accent brand color text */ .text-accent{color:hsl(var(--accent));}/** @public Destructive/error text */ .text-destructive{color:hsl(var(--destructive));}/** @public Success/positive text */ .text-success{color:hsl(var(--success));}/** @public Info text */ .text-info{color:hsl(var(--info));}/** @public Warning text */ .text-warning{color:hsl(var(--warning));}/** * @section Border Colors */ /** @public Default border color */ .border-default{border-color:hsl(var(--border));}/** @public Input border color */ .border-input{border-color:hsl(var(--input));}/** @public Primary border color */ .border-primary{border-color:hsl(var(--primary));}/** @public Dark text - v1 compat */ .text-dark{color:hsl(var(--foreground));}/** @public Light text - v1 compat */ .text-light{color:hsl(var(--muted-foreground));}/** @public Dark background - v1 compat */ .bg-dark{background-color:hsl(var(--foreground));}/** @public Light background - v1 compat */ .bg-light{background-color:hsl(var(--background));}/** * @section Slate Scale (50-950) */ /** @public Slate 50 text - lightest */ .text-50{color:hsl(var(--slate-50));}/** @public Slate 100 text */ .text-100{color:hsl(var(--slate-100));}/** @public Slate 200 text */ .text-200{color:hsl(var(--slate-200));}/** @public Slate 300 text */ .text-300{color:hsl(var(--slate-300));}/** @public Slate 400 text */ .text-400{color:hsl(var(--slate-400));}/** @public Slate 500 text - mid-tone */ .text-500{color:hsl(var(--slate-500));}/** @public Slate 600 text */ .text-600{color:hsl(var(--slate-600));}/** @public Slate 700 text */ .text-700{color:hsl(var(--slate-700));}/** @public Slate 800 text */ .text-800{color:hsl(var(--slate-800));}/** @public Slate 900 text */ .text-900{color:hsl(var(--slate-900));}/** @public Slate 950 text - darkest */ .text-950{color:hsl(var(--slate-950));}/** @public Slate 50 background - lightest */ .bg-50{background-color:hsl(var(--slate-50));}/** @public Slate 100 background */ .bg-100{background-color:hsl(var(--slate-100));}/** @public Slate 200 background */ .bg-200{background-color:hsl(var(--slate-200));}/** @public Slate 300 background */ .bg-300{background-color:hsl(var(--slate-300));}/** @public Slate 400 background */ .bg-400{background-color:hsl(var(--slate-400));}/** @public Slate 500 background - mid-tone */ .bg-500{background-color:hsl(var(--slate-500));}/** @public Slate 600 background */ .bg-600{background-color:hsl(var(--slate-600));}/** @public Slate 700 background */ .bg-700{background-color:hsl(var(--slate-700));}/** @public Slate 800 background */ .bg-800{background-color:hsl(var(--slate-800));}/** @public Slate 900 background */ .bg-900{background-color:hsl(var(--slate-900));}/** @public Slate 950 background - darkest */ .bg-950{background-color:hsl(var(--slate-950));}:root{--shadow-sm:0 1px 2px 0 rgba(0,0,0,0.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -4px rgba(0,0,0,0.1);--shadow-xl:0 20px 25px -5px rgba(0,0,0,0.1),0 8px 10px -6px rgba(0,0,0,0.1);--shadow-2xl:0 25px 50px -12px rgba(0,0,0,0.25);--shadow-none:0 0 #0000;--shadow-soft:0 2px 8px rgba(0,0,0,0.15);--shadow-float:0 4px 12px rgba(0,0,0,0.12);--shadow-focus:0 4px 20px rgba(0,0,0,0.18);--shadow-hero:0 20px 60px rgba(0,0,0,0.15);}/** * @section Box Shadow */ /** @public No shadow */ .shadow-none{box-shadow:var(--shadow-none);}/** @public Small shadow - subtle depth */ .shadow-sm{box-shadow:var(--shadow-sm);}/** @public Medium shadow - moderate elevation */ .shadow-md{box-shadow:var(--shadow-md);}/** @public Large shadow - strong elevation */ .shadow-lg{box-shadow:var(--shadow-lg);}/** @public Extra large shadow - prominent elevation */ .shadow-xl{box-shadow:var(--shadow-xl);}/** @public 2XL shadow - maximum elevation */ .shadow-2xl{box-shadow:var(--shadow-2xl);}/** @public Soft shadow - diffused */ .shadow-soft{box-shadow:var(--shadow-soft);}/** @public Float shadow - floating effect */ .shadow-float{box-shadow:var(--shadow-float);}/** @public Focus shadow - emphasis */ .shadow-focus{box-shadow:var(--shadow-focus);}/** @public Hero shadow - dramatic marketing effect */ .shadow-hero{box-shadow:var(--shadow-hero);}:root{--spacing-0:0;--spacing-0-5:0.125rem;--spacing-1:0.25rem;--spacing-2:0.5rem;--spacing-3:0.75rem;--spacing-4:1rem;--spacing-5:1.25rem;--spacing-6:1.5rem;--spacing-8:2rem;--spacing-10:2.5rem;--spacing-12:3rem;--spacing-16:4rem;--spacing-20:5rem;--spacing-24:6rem;--gap-xs:var(--spacing-1);--gap-sm:var(--spacing-2);--gap-md:var(--spacing-4);--gap-lg:var(--spacing-6);--gap-xl:var(--spacing-8);}/** * @section Gap Utilities */ /** @public No gap */ .gap-0{gap:var(--spacing-0);}/** @public 4px gap */ .gap-1{gap:var(--spacing-1);}/** @public 8px gap */ .gap-2{gap:var(--spacing-2);}/** @public 12px gap */ .gap-3{gap:var(--spacing-3);}/** @public 16px gap */ .gap-4{gap:var(--spacing-4);}/** @public 24px gap */ .gap-6{gap:var(--spacing-6);}/** @public 32px gap */ .gap-8{gap:var(--spacing-8);}/** @public Extra small gap */ .gap-xs{gap:var(--gap-xs);}/** @public Small gap */ .gap-sm{gap:var(--gap-sm);}/** @public Medium gap */ .gap-md{gap:var(--gap-md);}/** @public Large gap */ .gap-lg{gap:var(--gap-lg);}/** @public Extra large gap */ .gap-xl{gap:var(--gap-xl);}/** * @section Padding Utilities */ /** @public No padding */ .p-0{padding:var(--spacing-0);}/** @public 4px padding all sides */ .p-1{padding:var(--spacing-1);}/** @public 8px padding all sides */ .p-2{padding:var(--spacing-2);}/** @public 12px padding all sides */ .p-3{padding:var(--spacing-3);}/** @public 16px padding all sides */ .p-4{padding:var(--spacing-4);}/** @public 24px padding all sides */ .p-6{padding:var(--spacing-6);}/** @public 32px padding all sides */ .p-8{padding:var(--spacing-8);}/** * @section Horizontal/Vertical Padding */ /** @public No horizontal padding */ .px-0{padding-left:var(--spacing-0);padding-right:var(--spacing-0);}/** @public 4px horizontal padding */ .px-1{padding-left:var(--spacing-1);padding-right:var(--spacing-1);}/** @public 8px horizontal padding */ .px-2{padding-left:var(--spacing-2);padding-right:var(--spacing-2);}/** @public 12px horizontal padding */ .px-3{padding-left:var(--spacing-3);padding-right:var(--spacing-3);}/** @public 16px horizontal padding */ .px-4{padding-left:var(--spacing-4);padding-right:var(--spacing-4);}/** @public 24px horizontal padding */ .px-6{padding-left:var(--spacing-6);padding-right:var(--spacing-6);}/** @public 32px horizontal padding */ .px-8{padding-left:var(--spacing-8);padding-right:var(--spacing-8);}/** @public No vertical padding */ .py-0{padding-top:var(--spacing-0);padding-bottom:var(--spacing-0);}/** @public 4px vertical padding */ .py-1{padding-top:var(--spacing-1);padding-bottom:var(--spacing-1);}/** @public 8px vertical padding */ .py-2{padding-top:var(--spacing-2);padding-bottom:var(--spacing-2);}/** @public 12px vertical padding */ .py-3{padding-top:var(--spacing-3);padding-bottom:var(--spacing-3);}/** @public 16px vertical padding */ .py-4{padding-top:var(--spacing-4);padding-bottom:var(--spacing-4);}/** @public 24px vertical padding */ .py-6{padding-top:var(--spacing-6);padding-bottom:var(--spacing-6);}/** @public 32px vertical padding */ .py-8{padding-top:var(--spacing-8);padding-bottom:var(--spacing-8);}/** @public 40px vertical padding */ .py-10{padding-top:var(--spacing-10);padding-bottom:var(--spacing-10);}/** @public 48px vertical padding */ .py-12{padding-top:var(--spacing-12);padding-bottom:var(--spacing-12);}/** @public 64px vertical padding */ .py-16{padding-top:var(--spacing-16);padding-bottom:var(--spacing-16);}/** * @section Individual Side Padding */ /** @public 8px top padding */ .pt-2{padding-top:var(--spacing-2);}/** @public 16px top padding */ .pt-4{padding-top:var(--spacing-4);}/** @public 24px top padding */ .pt-6{padding-top:var(--spacing-6);}/** @public 32px top padding */ .pt-8{padding-top:var(--spacing-8);}/** @public 48px top padding */ .pt-12{padding-top:var(--spacing-12);}/** @public 8px bottom padding */ .pb-2{padding-bottom:var(--spacing-2);}/** @public 16px bottom padding */ .pb-4{padding-bottom:var(--spacing-4);}/** @public 24px bottom padding */ .pb-6{padding-bottom:var(--spacing-6);}/** @public 32px bottom padding */ .pb-8{padding-bottom:var(--spacing-8);}/** @public 48px bottom padding */ .pb-12{padding-bottom:var(--spacing-12);}/** @public 8px left padding */ .pl-2{padding-left:var(--spacing-2);}/** @public 16px left padding */ .pl-4{padding-left:var(--spacing-4);}/** @public 24px left padding */ .pl-6{padding-left:var(--spacing-6);}/** @public 32px left padding */ .pl-8{padding-left:var(--spacing-8);}/** @public 8px right padding */ .pr-2{padding-right:var(--spacing-2);}/** @public 16px right padding */ .pr-4{padding-right:var(--spacing-4);}/** @public 24px right padding */ .pr-6{padding-right:var(--spacing-6);}/** @public 32px right padding */ .pr-8{padding-right:var(--spacing-8);}/** * @section Margin Utilities */ /** @public No margin */ .m-0{margin:var(--spacing-0);}/** @public 4px margin all sides */ .m-1{margin:var(--spacing-1);}/** @public 8px margin all sides */ .m-2{margin:var(--spacing-2);}/** @public 12px margin all sides */ .m-3{margin:var(--spacing-3);}/** @public 16px margin all sides */ .m-4{margin:var(--spacing-4);}/** @public 24px margin all sides */ .m-6{margin:var(--spacing-6);}/** @public 32px margin all sides */ .m-8{margin:var(--spacing-8);}/** @public Auto margin - centers elements */ .m-auto{margin:auto;}/** @public Auto horizontal margin - centers block */ .mx-auto{margin-left:auto;margin-right:auto;}/** @public Auto vertical margin */ .my-auto{margin-top:auto;margin-bottom:auto;}/** * @section Horizontal/Vertical Margin */ /** @public No horizontal margin */ .mx-0{margin-left:var(--spacing-0);margin-right:var(--spacing-0);}/** @public 4px horizontal margin */ .mx-1{margin-left:var(--spacing-1);margin-right:var(--spacing-1);}/** @public 8px horizontal margin */ .mx-2{margin-left:var(--spacing-2);margin-right:var(--spacing-2);}/** @public 12px horizontal margin */ .mx-3{margin-left:var(--spacing-3);margin-right:var(--spacing-3);}/** @public 16px horizontal margin */ .mx-4{margin-left:var(--spacing-4);margin-right:var(--spacing-4);}/** @public 24px horizontal margin */ .mx-6{margin-left:var(--spacing-6);margin-right:var(--spacing-6);}/** @public 32px horizontal margin */ .mx-8{margin-left:var(--spacing-8);margin-right:var(--spacing-8);}/** @public No vertical margin */ .my-0{margin-top:var(--spacing-0);margin-bottom:var(--spacing-0);}/** @public 4px vertical margin */ .my-1{margin-top:var(--spacing-1);margin-bottom:var(--spacing-1);}/** @public 8px vertical margin */ .my-2{margin-top:var(--spacing-2);margin-bottom:var(--spacing-2);}/** @public 12px vertical margin */ .my-3{margin-top:var(--spacing-3);margin-bottom:var(--spacing-3);}/** @public 16px vertical margin */ .my-4{margin-top:var(--spacing-4);margin-bottom:var(--spacing-4);}/** @public 24px vertical margin */ .my-6{margin-top:var(--spacing-6);margin-bottom:var(--spacing-6);}/** @public 32px vertical margin */ .my-8{margin-top:var(--spacing-8);margin-bottom:var(--spacing-8);}/** * @section Individual Side Margin */ /** @public 8px top margin */ .mt-2{margin-top:var(--spacing-2);}/** @public 16px top margin */ .mt-4{margin-top:var(--spacing-4);}/** @public 24px top margin */ .mt-6{margin-top:var(--spacing-6);}/** @public 32px top margin */ .mt-8{margin-top:var(--spacing-8);}/** @public 48px top margin */ .mt-12{margin-top:var(--spacing-12);}/** @public 8px bottom margin */ .mb-2{margin-bottom:var(--spacing-2);}/** @public 16px bottom margin */ .mb-4{margin-bottom:var(--spacing-4);}/** @public 24px bottom margin */ .mb-6{margin-bottom:var(--spacing-6);}/** @public 32px bottom margin */ .mb-8{margin-bottom:var(--spacing-8);}/** @public 48px bottom margin */ .mb-12{margin-bottom:var(--spacing-12);}/** @public 4px left margin */ .ml-1{margin-left:var(--spacing-1);}/** @public 8px left margin */ .ml-2{margin-left:var(--spacing-2);}/** @public 12px left margin */ .ml-3{margin-left:var(--spacing-3);}/** @public 16px left margin */ .ml-4{margin-left:var(--spacing-4);}/** @public 4px right margin */ .mr-1{margin-right:var(--spacing-1);}/** @public 8px right margin */ .mr-2{margin-right:var(--spacing-2);}/** @public 12px right margin */ .mr-3{margin-right:var(--spacing-3);}/** @public 16px right margin */ .mr-4{margin-right:var(--spacing-4);}/** @public -12px left margin (negative spacing) */ .-ml-3{margin-left:calc(var(--spacing-3) * -1);}:root{--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;--text-xs:0.618rem;--text-sm:0.75rem;--text-base:1rem;--text-lg:1.25rem;--text-xl:1.618rem;--text-2xl:2rem;--text-3xl:2.618rem;--text-4xl:3.236rem;--leading-none:1;--leading-tight:1.25;--leading-snug:1.375;--leading-normal:1.5;--leading-relaxed:1.625;--leading-loose:2;--font-light:300;--font-normal:400;--font-medium:500;--font-semibold:600;--font-bold:700;}@media (max-width:768px){:root{--text-xl:1.5rem;--text-2xl:1.75rem;--text-3xl:2.25rem;--text-4xl:2.75rem;}}@media (max-width:480px){:root{--text-lg:1.125rem;--text-xl:1.375rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;}}body{font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-normal);color:hsl(var(--foreground));background-color:hsl(var(--background));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}h1,h2,h3,h4,h5,h6{font-weight:var(--font-semibold);line-height:var(--leading-tight);color:hsl(var(--foreground));}h1,.text-h1{font-size:var(--text-4xl);margin-bottom:var(--spacing-6);}h2,.text-h2{font-size:var(--text-3xl);margin-bottom:var(--spacing-5);}h3,.text-h3{font-size:var(--text-2xl);margin-bottom:var(--spacing-4);}h4,.text-h4{font-size:var(--text-xl);margin-bottom:var(--spacing-3);}h5,.text-h5{font-size:var(--text-lg);margin-bottom:var(--spacing-3);}h6,.text-h6{font-size:var(--text-base);margin-bottom:var(--spacing-2);}/** * @section Text Size */ /** @public Extra small text - ~10px */ .text-xs{font-size:var(--text-xs);}/** @public Small text - 12px */ .text-sm{font-size:var(--text-sm);}/** @public Base text - 16px */ .text-base{font-size:var(--text-base);}/** @public Large text - 20px */ .text-lg{font-size:var(--text-lg);}/** @public Extra large text - ~26px */ .text-xl{font-size:var(--text-xl);}/** @public 2XL text - 32px */ .text-2xl{font-size:var(--text-2xl);}/** @public 3XL text - ~42px */ .text-3xl{font-size:var(--text-3xl);}/** @public 4XL text - ~52px */ .text-4xl{font-size:var(--text-4xl);}/** * @section Font Weight */ /** @public Light weight */ .font-light{font-weight:var(--font-light);}/** @public Normal weight */ .font-normal{font-weight:var(--font-normal);}/** @public Medium weight */ .font-medium{font-weight:var(--font-medium);}/** @public Semi-bold weight */ .font-semibold{font-weight:var(--font-semibold);}/** @public Bold weight */ .font-bold{font-weight:var(--font-bold);}/** @public Lighter font weight - v1 compat */ .lighter{font-weight:100;}/** @public Light font weight - v1 compat */ .light{font-weight:200;}/** @public Normal font weight - v1 compat */ .normal{font-weight:normal;}/** @public Bold font weight - v1 compat */ .bold{font-weight:bold;}/** @public Bolder font weight - v1 compat */ .bolder{font-weight:bolder;}/** @public Heavy font weight - v1 compat */ .heavy{font-weight:900;}/** @public Monospace font family */ .font-mono{font-family:var(--font-mono);}/** * @section Line Height */ /** @public No line height spacing */ .leading-none{line-height:var(--leading-none);}/** @public Tight line height */ .leading-tight{line-height:var(--leading-tight);}/** @public Normal line height */ .leading-normal{line-height:var(--leading-normal);}/** @public Relaxed line height */ .leading-relaxed{line-height:var(--leading-relaxed);}/** * @section Text Alignment */ /** @public Center text */ .text-center{text-align:center;}/** @public Left align text */ .text-left{text-align:left;}/** @public Right align text */ .text-right{text-align:right;}/** @public Title style - v1 compat */ .title{font-size:var(--text-2xl);font-weight:var(--font-semibold);line-height:var(--leading-tight);margin:0;}/** * @section Semantic Typography */ /** @public Title style - large,bold,spaced */ .text-title{font-size:var(--text-3xl);font-weight:var(--font-bold);line-height:var(--leading-tight);margin-bottom:var(--spacing-6);padding-top:var(--spacing-2);letter-spacing:0.01em;word-spacing:0.05em;}/** @public Headline style - prominent heading */ .text-headline{font-size:var(--text-2xl);font-weight:var(--font-semibold);line-height:var(--leading-tight);margin-bottom:var(--spacing-5);padding-top:var(--spacing-1);letter-spacing:0.005em;word-spacing:0.03em;}/** @public Lead style - intro paragraph */ .text-lead{font-size:var(--text-xl);font-weight:var(--font-medium);line-height:var(--leading-normal);margin-bottom:var(--spacing-4);padding-top:var(--spacing-1);letter-spacing:0.003em;word-spacing:0.02em;}/** @public Body style - standard paragraph */ .text-body{font-size:var(--text-base);font-weight:var(--font-normal);line-height:var(--leading-normal);margin-bottom:var(--spacing-3);letter-spacing:0.002em;word-spacing:0.01em;}/** @public Caption style - small descriptive text */ .text-caption{font-size:var(--text-sm);font-weight:var(--font-normal);line-height:var(--leading-normal);margin-bottom:var(--spacing-2);letter-spacing:0.001em;word-spacing:0.005em;}/** @public Label style - form labels and tags */ .text-label{font-size:var(--text-xs);font-weight:var(--font-medium);line-height:var(--leading-tight);margin-bottom:var(--spacing-1);letter-spacing:0.001em;word-spacing:0.003em;}:root{--radius-none:0;--radius-sm:0.125rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-full:9999px;}/** * @section Border Radius */ /** @public No border radius */ .rounded-none{border-radius:var(--radius-none);}/** @public Small border radius - 2px */ .rounded-sm{border-radius:var(--radius-sm);}/** @public Medium border radius - 6px */ .rounded-md{border-radius:var(--radius-md);}/** @public Large border radius - 8px */ .rounded-lg{border-radius:var(--radius-lg);}/** @public Extra large border radius - 12px */ .rounded-xl{border-radius:var(--radius-xl);}/** @public 2XL border radius - 16px */ .rounded-2xl{border-radius:var(--radius-2xl);}/** @public Full circle/pill shape */ .rounded-full{border-radius:var(--radius-full);}*,::before,::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x:;--tw-pan-y:;--tw-pinch-zoom:;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position:;--tw-gradient-via-position:;--tw-gradient-to-position:;--tw-ordinal:;--tw-slashed-zero:;--tw-numeric-figure:;--tw-numeric-spacing:;--tw-numeric-fraction:;--tw-ring-inset:;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur:;--tw-brightness:;--tw-contrast:;--tw-grayscale:;--tw-hue-rotate:;--tw-invert:;--tw-saturate:;--tw-sepia:;--tw-drop-shadow:;--tw-backdrop-blur:;--tw-backdrop-brightness:;--tw-backdrop-contrast:;--tw-backdrop-grayscale:;--tw-backdrop-hue-rotate:;--tw-backdrop-invert:;--tw-backdrop-opacity:;--tw-backdrop-saturate:;--tw-backdrop-sepia:;--tw-contain-size:;--tw-contain-layout:;--tw-contain-paint:;--tw-contain-style:;}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x:;--tw-pan-y:;--tw-pinch-zoom:;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position:;--tw-gradient-via-position:;--tw-gradient-to-position:;--tw-ordinal:;--tw-slashed-zero:;--tw-numeric-figure:;--tw-numeric-spacing:;--tw-numeric-fraction:;--tw-ring-inset:;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur:;--tw-brightness:;--tw-contrast:;--tw-grayscale:;--tw-hue-rotate:;--tw-invert:;--tw-saturate:;--tw-sepia:;--tw-drop-shadow:;--tw-backdrop-blur:;--tw-backdrop-brightness:;--tw-backdrop-contrast:;--tw-backdrop-grayscale:;--tw-backdrop-hue-rotate:;--tw-backdrop-invert:;--tw-backdrop-opacity:;--tw-backdrop-saturate:;--tw-backdrop-sepia:;--tw-contain-size:;--tw-contain-layout:;--tw-contain-paint:;--tw-contain-style:;}/*! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com */ /* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) */ *,::before,::after{box-sizing:border-box;/* 1 */ border-width:0;/* 2 */ border-style:solid;/* 2 */ border-color:#e5e7eb;/* 2 */}::before,::after{--tw-content:'';}/* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. 7. Disable tap highlights on iOS */ html,:host{line-height:1.5;/* 1 */ -webkit-text-size-adjust:100%;/* 2 */ -moz-tab-size:4;/* 3 */ -o-tab-size:4;tab-size:4;/* 3 */ font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";/* 4 */ font-feature-settings:normal;/* 5 */ font-variation-settings:normal;/* 6 */ -webkit-tap-highlight-color:transparent;/* 7 */}/* 1. Remove the margin in all browsers. 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. */ body{margin:0;/* 1 */ line-height:inherit;/* 2 */}/* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Ensure horizontal rules are visible by default. */ hr{height:0;/* 1 */ color:inherit;/* 2 */ border-top-width:1px;/* 3 */}/* Add the correct text decoration in Chrome,Edge,and Safari. */ abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}/* Remove the default font size and weight for headings. */ h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;}/* Reset links to optimize for opt-in styling instead of opt-out. */ a{color:inherit;text-decoration:inherit;}/* Add the correct font weight in Edge and Safari. */ b,strong{font-weight:bolder;}/* 1. Use the user's configured `mono` font-family by default. 2. Use the user's configured `mono` font-feature-settings by default. 3. Use the user's configured `mono` font-variation-settings by default. 4. Correct the odd `em` font sizing in all browsers. */ code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;/* 1 */ font-feature-settings:normal;/* 2 */ font-variation-settings:normal;/* 3 */ font-size:1em;/* 4 */}/* Add the correct font size in all browsers. */ small{font-size:80%;}/* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-0.25em;}sup{top:-0.5em;}/* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088,https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729,https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default. */ table{text-indent:0;/* 1 */ border-color:inherit;/* 2 */ border-collapse:collapse;/* 3 */}/* 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. 3. Remove default padding in all browsers. */ button,input,optgroup,select,textarea{font-family:inherit;/* 1 */ font-feature-settings:inherit;/* 1 */ font-variation-settings:inherit;/* 1 */ font-size:100%;/* 1 */ font-weight:inherit;/* 1 */ line-height:inherit;/* 1 */ letter-spacing:inherit;/* 1 */ color:inherit;/* 1 */ margin:0;/* 2 */ padding:0;/* 3 */}/* Remove the inheritance of text transform in Edge and Firefox. */ button,select{text-transform:none;}/* 1. Correct the inability to style clickable types in iOS and Safari. 2. Remove default button styles. */ button,input:where([type='button']),input:where([type='reset']),input:where([type='submit']){-webkit-appearance:button;/* 1 */ background-color:transparent;/* 2 */ background-image:none;/* 2 */}/* Use the modern Firefox focus style for all focusable elements. */:-moz-focusring{outline:auto;}/* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */:-moz-ui-invalid{box-shadow:none;}/* Add the correct vertical alignment in Chrome and Firefox. */ progress{vertical-align:baseline;}/* Correct the cursor style of increment and decrement buttons in Safari. */::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto;}/* 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type='search']{-webkit-appearance:textfield;/* 1 */ outline-offset:-2px;/* 2 */}/* Remove the inner padding in Chrome and Safari on macOS. */::-webkit-search-decoration{-webkit-appearance:none;}/* 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */::-webkit-file-upload-button{-webkit-appearance:button;/* 1 */ font:inherit;/* 2 */}/* Add the correct display in Chrome and Safari. */ summary{display:list-item;}/* Removes the default spacing and border for appropriate elements. */ blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0;}fieldset{margin:0;padding:0;}legend{padding:0;}ol,ul,menu{list-style:none;margin:0;padding:0;}/* Reset default styling for dialogs. */ dialog{padding:0;}/* Prevent resizing textareas horizontally by default. */ textarea{resize:vertical;}/* 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 2. Set the default placeholder color to the user's configured gray 400 color. */ input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;/* 1 */ color:#9ca3af;/* 2 */}input::placeholder,textarea::placeholder{opacity:1;/* 1 */ color:#9ca3af;/* 2 */}/* Set the default cursor for buttons. */ button,[role="button"]{cursor:pointer;}/* Make sure disabled buttons don't get the pointer cursor. */:disabled{cursor:default;}/* 1. Make replaced elements `display:block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align:middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ img,svg,video,canvas,audio,iframe,embed,object{display:block;/* 1 */ vertical-align:middle;/* 2 */}/* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) */ img,video{max-width:100%;height:auto;}/* Make elements with the HTML hidden attribute stay hidden by default */ [hidden]:where(:not([hidden="until-found"])){display:none;}