@layer base,components,utilities,animations,app;:root{--font-family-primary: "Manrope", sans-serif;--font-weight-default: 400;--font-weight-semibold: 600;--font-size-sm: .875rem;--font-size-md: 1rem;--font-size-lg: 1.2rem;--font-size-xl: 1.5rem;--font-size-xxl: 2rem;--line-height-default: 1.5rem;--line-height-higher: 1.75rem;--container-lg: 72rem;--container-xl: 80rem;--border-default: 1px solid var(--border-color);--border-radius: .5rem;--border-radius-mild: .3rem;--border-radius-top: .5rem .5rem 0 0;--gap-xs: .25rem;--gap-sm: .5rem;--gap-md: 1rem;--gap-lg: 1.5rem;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--transition-fade: .2s ease;--hamburger-angle: 38deg;--hamburger-scale: 1.27;--focus-ring: 2px solid var(--accent-subtle);--focus-offset: 2px;--btn-size-sm: 1rem;--btn-size-md: 2rem;--btn-size-lg: 2.5rem;--icon-scale: .6;color-scheme:light;--light-bg-dark: oklch(85% 0 0);--light-bg: oklch(90% 0 0);--light-bg-light: oklch(95% 0 0);--light-bg-hover: oklch(100% 0 0);--light-text: oklch(15% 0 0);--light-text-muted: oklch(45% 0 0);--light-text-destructive: var(--light-clr-error);--light-border-color: oklch(45% 0 0);--light-accent-strong: oklch(55% .12 250);--light-accent-subtle: oklch(70% .1 250);--light-accent-hover: oklch(85% .09 250);--light-bg-selection: oklch(68% .15 48);--light-text-selection: oklch(30% .15 250);--light-clr-success: oklch(45% .1 145);--light-clr-error: oklch(55% .22 25);--light-progress-bar-fill: linear-gradient( to right in oklch, oklch(80% .12 145), oklch(79% .13 145), oklch(78% .19 150) );--dark-bg-dark: oklch(22% 0 0);--dark-bg: oklch(26% 0 0);--dark-bg-light: oklch(33% 0 0);--dark-bg-hover: oklch(40% 0 0);--dark-text: oklch(95% 0 0);--dark-text-muted: oklch(75% 0 0);--dark-text-destructive: var(--dark-clr-error);--dark-border-color: oklch(55% 0 0);--dark-accent-strong: oklch(40% .13 250);--dark-accent-subtle: oklch(50% .12 250);--dark-accent-hover: oklch(65% .1 250);--dark-bg-selection: oklch(68% .15 48);--dark-text-selection: oklch(30% .15 250);--dark-clr-success: oklch(45% .1 145);--dark-clr-error: oklch(55% .22 25);--dark-progress-bar-fill: linear-gradient( to right in oklch, oklch(88% .11 145), oklch(82% .12 145), oklch(78% .19 150) );--bg-dark: var(--light-bg-dark);--bg: var(--light-bg);--bg-light: var(--light-bg-light);--bg-hover: var(--light-bg-hover);--text: var(--light-text);--text-muted: var(--light-text-muted);--text-destructive: var(--light-text-destructive);--text-inverse: var(--dark-text);--border-color: var(--light-border-color);--gradient: linear-gradient(0deg, var(--bg) 95%, var(--bg-light));--accent-strong: var(--light-accent-strong);--accent-subtle: var(--light-accent-subtle);--accent-hover: var(--light-accent-hover);--bg-selection: var(--light-bg-selection);--text-selection: var(--light-text-selection);--clr-success: var(--light-clr-success);--clr-error: var(--light-clr-error);--progress-bar-fill: var(--light-progress-bar-fill);@media (prefers-color-scheme: dark){color-scheme:dark;--bg-dark: var(--dark-bg-dark);--bg: var(--dark-bg);--bg-light: var(--dark-bg-light);--bg-hover: var(--dark-bg-hover);--text: var(--dark-text);--text-muted: var(--dark-text-muted);--text-destructive: var(--dark-text-destructive);--text-inverse: var(--light-text);--border-color: var(--dark-border-color);--gradient: linear-gradient(0deg, var(--bg) 95%, var(--bg-light));--accent-strong: var(--dark-accent-strong);--accent-subtle: var(--dark-accent-subtle);--accent-hover: var(--dark-accent-hover);--bg-selection: var(--dark-bg-selection);--text-selection: var(--dark-text-selection);--clr-success: var(--dark-clr-success);--clr-error: var(--dark-clr-error);--progress-bar-fill: var(--dark-progress-bar-fill)}}:root:has([value=sun]:checked),:root[data-theme=light]{color-scheme:light;--bg-dark: var(--light-bg-dark);--bg: var(--light-bg);--bg-light: var(--light-bg-light);--bg-hover: var(--light-bg-hover);--text: var(--light-text);--text-muted: var(--light-text-muted);--text-destructive: var(--light-text-destructive);--text-inverse: var(--dark-text);--border-color: var(--light-border-color);--gradient: linear-gradient(0deg, var(--bg) 95%, var(--bg-light));--accent-strong: var(--light-accent-strong);--accent-subtle: var(--light-accent-subtle);--accent-hover: var(--light-accent-hover);--bg-selection: var(--light-bg-selection);--text-selection: var(--light-text-selection);--clr-success: var(--light-clr-success);--clr-error: var(--light-clr-error);--progress-bar-fill: var(--light-progress-bar-fill)}:root:has([value=moon]:checked),:root[data-theme=dark]{color-scheme:dark;--bg-dark: var(--dark-bg-dark);--bg: var(--dark-bg);--bg-light: var(--dark-bg-light);--bg-hover: var(--dark-bg-hover);--text: var(--dark-text);--text-muted: var(--dark-text-muted);--text-destructive: var(--dark-text-destructive);--text-inverse: var(--light-text);--border-color: var(--dark-border-color);--gradient: linear-gradient(0deg, var(--bg) 95%, var(--bg-light));--accent-strong: var(--dark-accent-strong);--accent-subtle: var(--dark-accent-subtle);--accent-hover: var(--dark-accent-hover);--bg-selection: var(--dark-bg-selection);--text-selection: var(--dark-text-selection);--clr-success: var(--dark-clr-success);--clr-error: var(--dark-clr-error);--progress-bar-fill: var(--dark-progress-bar-fill)}@layer base{:root{tab-size:4;color-scheme:light dark}html{font-family:var(--font-family-primary);font-weight:var(--font-weight-default);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,:host{line-height:var(--line-height-default);-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit;color:var(--text);font-family:var(--font-family-primary);font-weight:var(--font-weight-default);font-size:var(--font-size-md)}*,:before,:after,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border-width:0;border-style:solid;border-color:var(--border-color, #e5e7eb)}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,[type=button],[type=submit],[type=reset]{font:inherit;color:inherit;background:transparent;border:0;padding:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;box-shadow:none}select{font:inherit;color:inherit}ol,ul,menu{list-style:none}button,input,select,optgroup,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit}::placeholder,.placeholder-text{color:var(--text-muted)}a{text-decoration:none;color:inherit}[hidden]{display:none!important}}@layer components{.btn{display:inline-flex;align-items:center;justify-content:center;user-select:none;padding:var(--space-sm) var(--space-md);border:var(--border-default);border-radius:var(--border-radius);gap:var(--gap-sm)}.btn-icon{display:inline-flex;align-items:center;justify-content:center;padding:0;width:var(--btn-size-md);height:var(--btn-size-md)}.btn,.btn-icon{cursor:pointer}.btn:focus-visible,.btn-icon:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}.btn[disabled],.btn-icon[disabled],.btn[aria-disabled=true],.btn-icon[aria-disabled=true]{opacity:.6;cursor:not-allowed;pointer-events:none}.btn:active{transform:translateY(1px);filter:brightness(.9)}@media (hover: hover){.btn-primary:hover{background-color:var(--accent-hover)}.btn-secondary:hover{background-color:var(--bg-hover)}.btn-destructive:hover{color:var(--bg-light);background-color:var(--text-destructive)}}.btn-primary{background-color:var(--accent-subtle)}.btn-secondary{background-color:var(--bg-light)}.btn-destructive{color:var(--text-destructive);border-color:var(--text-destructive)}.btn-icon svg{pointer-events:none;width:calc(var(--btn-size-md) * var(--icon-scale));height:calc(var(--btn-size-md) * var(--icon-scale))}.btn-round{border-radius:50%}.btn-square{border-radius:var(--border-radius)}.btn-lg{width:var(--btn-size-lg);height:var(--btn-size-lg)}.btn-lg svg{width:calc(var(--btn-size-lg) * var(--icon-scale));height:calc(var(--btn-size-lg) * var(--icon-scale))}.profile-modal[open]{display:flex;flex-direction:column;gap:var(--gap-md)}dialog{background-color:var(--bg);padding:var(--space-xl);top:5%;left:50%;transform:translate(-50%);max-height:90vh;overflow:hidden;border:none;border-radius:var(--border-radius);box-shadow:0 4px 20px #0000004d}dialog[open]{display:flex;flex-direction:column;gap:var(--gap-sm)}dialog[open] .modal-header{border-bottom:2px solid var(--border-color)}dialog[open] .modal-body{overflow-y:auto;flex:1;min-height:0;padding:var(--space-xs)}dialog::backdrop{background-color:#00000080;backdrop-filter:blur(10px)}.modal-close{position:absolute;inset:1rem 1rem auto auto;padding:var(--space-xs) var(--space-sm);color:var(--text-muted);background:transparent;border:none;font-size:var(--font-size-xl)}.modal-close:hover{color:var(--text-destructive)}.tooltip-popup{position:relative;border:var(--border-default);border-radius:var(--border-radius);background-color:color-mix(in srgb,var(--text) 90%,transparent);color:var(--bg);overflow-wrap:break-word;padding:4px;margin-top:8px;max-width:28ch}.tooltip-popup:not(#no-after):after{content:"";position:absolute;left:var(--carrot-pos, 50%);transform:translate(-50%,-40%);border:.4rem solid transparent;border-bottom-color:color-mix(in srgb,var(--text) 90%,transparent);opacity:1;top:-.4rem}.card-dashboard{padding:1.5rem;align-self:stretch;border-radius:var(--border-radius);box-shadow:0 4px 6px -1px #0000001a;background-color:var(--bg);border:var(--border-default);position:relative;display:flex;flex-direction:column;gap:var(--gap-md)}form input:not([type=checkbox]):not([type=radio]):user-valid{outline:2px solid var(--clr-success)}form input:not([type=checkbox]):not([type=radio]):user-invalid{outline:2px solid var(--clr-error)}.form-column{display:flex;flex-direction:column;gap:var(--gap-sm)}.form-column div:has(>label){display:flex;flex-direction:column}.form-actions{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:var(--gap-sm)}.form-actions>*{min-width:8rem}input,select,textarea{background-color:var(--bg-light);color:var(--text);border:var(--border-default);border-radius:var(--border-radius);padding:.5rem .75rem;accent-color:var(--accent-subtle)}:where(input,select,textarea):focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}.input-inline{padding-block:var(--space-xs);border:none;border-bottom:var(--border-default);font-size:var(--font-size-sm)}.radio-row{display:flex;flex-direction:row;gap:var(--gap-sm)}.table-cell.delete-cell{border:none;padding:0;width:0;background-color:var(--bg)}.table-empty{text-align:center;color:var(--text-muted);font-style:italic;padding:var(--space-sm) 0}.table-standard{caption-side:top;table-layout:auto;border-collapse:collapse;width:100%;font-size:.875rem}.table-standard th,.table-standard td{padding:var(--space-sm);border:var(--border-default)}.table-header th{background-color:var(--accent-subtle);font-weight:var(--font-weight-semibold)}.table-row{transition:background-color 25ms ease-out}.table-row .row-actions{visibility:hidden}.table-row:hover .row-actions{visibility:visible}.table-row:nth-child(2n){background-color:var(--bg-light)}.table-row:hover{background-color:var(--accent-hover)}.context-menu{background-color:var(--bg);border:var(--border-default);border-radius:var(--border-radius);position:fixed;max-width:50%;z-index:200}.context-menu>li{padding:var(--space-sm) var(--space-md)}.context-menu>li:first-child:hover{border-radius:var(--border-radius) var(--border-radius) 0 0}.context-menu>li:last-child:hover{border-radius:0 0 var(--border-radius) var(--border-radius)}.context-menu>li:only-child:hover{border-radius:var(--border-radius)}.context-menu>li:hover{background-color:var(--accent-hover);cursor:pointer}.card-title{position:absolute;top:-.9rem;left:1rem;background:linear-gradient(to bottom,var(--bg-dark) 48%,var(--bg) 52%);display:flex;align-items:center;gap:var(--gap-sm);padding:0 .05rem}.card-title h2{font-size:var(--font-size-lg);line-height:var(--line-height-higher);font-weight:var(--font-weight-semibold);pointer-events:none}#toast-container{position:fixed;display:flex;flex-direction:column-reverse;gap:var(--gap-sm);top:calc(1.3 * var(--min-navbar-height));right:1rem;z-index:400;border-radius:var(--border-radius-mild);box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.toast{border-radius:var(--border-radius-mild);border:solid 1px transparent;padding:var(--gap-xs) var(--gap-sm)}.toast-success{background-color:color-mix(in srgb,var(--clr-success) 10%,white);color:var(--clr-success);border-color:var(--clr-success)}.toast-error{background-color:color-mix(in srgb,var(--clr-error) 10%,white);color:var(--clr-error);border-color:var(--clr-error)}.item-list{display:grid;gap:var(--gap-sm)}.item-row{display:flex;align-items:center;gap:var(--gap-sm)}.item.completed .item-title{text-decoration:line-through;color:var(--text-muted)}footer{text-align:center;padding:10px;font-size:var(--font-size-sm)}.tab-group{display:flex;align-items:stretch;padding:var(--space-xs);gap:var(--gap-xs);background-color:var(--bg-light)}.tab{flex:1;display:inline-flex;align-items:center;gap:var(--gap-xs);padding:var(--space-sm)}.tab svg{width:1em;height:1em}.tab-group,.tab{border-radius:var(--border-radius)}.tab:hover{background-color:var(--bg-hover);filter:brightness(.9)}.tab:active{background-color:var(--bg-hover);transform:translateY(1px);filter:brightness(.9)}.tab.active{background-color:var(--accent-subtle);transform:translateY(1px);filter:brightness(1.2)}.dropdown{position:relative}.dropdown-toggle{background-color:var(--bg-light);border:var(--border-default);border-radius:var(--border-radius);padding:var(--space-sm);white-space:nowrap;display:inline-flex;align-items:center;gap:var(--gap-sm);cursor:pointer}.dropdown-toggle-chevron svg{width:1em;height:1em;transition:transform .2s ease}.dropdown-menu{display:none;flex-direction:column;position:absolute;background-color:var(--bg);border:var(--border-default);border-radius:var(--border-radius)}.dropdown:hover svg{transform:rotate(180deg)}.dropdown:hover .dropdown-menu{display:flex}.dropdown-menu{background-color:var(--bg-light);border:var(--border-default);border-radius:var(--border-radius);box-shadow:0 4px 20px #0000004d;position:fixed;max-width:50%;z-index:200}.dropdown-menu>button{padding:var(--space-sm) var(--space-md);text-align:left}.dropdown-menu>button:first-child:hover{border-radius:var(--border-radius) var(--border-radius) 0 0}.dropdown-menu>button:last-child:hover{border-radius:0 0 var(--border-radius) var(--border-radius)}.dropdown-menu>button:only-child:hover{border-radius:var(--border-radius)}.dropdown-menu>button:hover{background-color:var(--accent-hover);cursor:pointer}}@layer components{.hamburger-btn .line1,.hamburger-btn .line2,.hamburger-btn .line3{transform-box:fill-box;transition:transform .2s ease-out}.hamburger-btn .line2{transition:opacity var(--transition-fade, .2s ease-out)}.hamburger-btn.is-open .line1{transform-origin:left center;transform:rotate(var(--hamburger-angle)) scaleX(var(--hamburger-scale))}.hamburger-btn.is-open .line3{transform-origin:left bottom;transform:rotate(calc(-1 * var(--hamburger-angle))) scaleX(var(--hamburger-scale))}.hamburger-btn.is-open .line2{opacity:0}.nav-desktop{display:flex;gap:var(--gap-lg)}.nav-link{border-radius:calc(.6 * var(--border-radius));padding:var(--space-sm);flex-shrink:1;white-space:nowrap;position:relative}.nav-link:after{content:"";position:absolute;width:0;height:3px;left:0;bottom:0;background:var(--accent-subtle);transition:width .1s ease}.nav-link:hover:after,.nav-link.active:after{width:100%}.nav-link:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}nav{min-height:var(--min-navbar-height);background-color:var(--accent-strong);padding:var(--space-md);position:relative;z-index:250}.nav-anchor{position:relative}.navbar-content{display:flex;align-items:center;justify-content:flex-start;max-width:80rem;margin:0 auto}.nav-left,.nav-right{display:flex;align-items:center;gap:clamp(var(--gap-sm),1.5vw,var(--gap-md))}.nav-right{margin-left:auto}.branding{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin-right:var(--space-lg)}.nav-mobile-container{position:absolute;inset:100% 0 auto;z-index:201;background-color:var(--accent-strong);padding:var(--space-xs);opacity:0;pointer-events:none;transform:translateY(-300px) scaleY(.95);transform-origin:top center;transition:transform .2s cubic-bezier(.25,.8,.25,1)}.nav-mobile-container.is-open{display:flex;flex-direction:column;gap:var(--gap-lg);opacity:1;pointer-events:auto;transform:translateY(0) scaleY(1)}.nav-mobile{display:flex;flex-direction:column;align-items:center;width:100%;gap:var(--gap-lg)}.nav-mobile a{display:block;width:100%;text-align:center;padding:var(--space-md) var(--space-md)}}@layer utilities{._stack-md{display:flex;flex-direction:column;gap:var(--gap-md)}._stack-lg{display:flex;flex-direction:column;gap:var(--gap-lg)}._grid-2col{display:grid;grid-template-columns:1fr 1fr}._inline-flex-sm{display:flex;align-items:center;gap:var(--gap-sm)}._inline-flex-md{display:flex;align-items:center;gap:var(--gap-md)}._sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}._text-right{text-align:right}}@layer animations{@keyframes followPath{to{offset-distance:100%}}@keyframes tumble{0%{transform:translate(-50%,-50%) scale(var(--scale)) rotateX(0) rotateY(0)}to{transform:translate(-50%,-50%) scale(var(--scale)) rotateX(720deg) rotateY(540deg)}}@keyframes pulse{0%,to{filter:brightness(1)}50%{filter:brightness(1.2)}}@keyframes surge{0%{left:0}to{left:100%}}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}.animate-wiggle{animation:wiggle .4s ease-in-out 1}}:root{--min-navbar-height: 4rem;--confetti-size-base: .375rem}::selection{background-color:var(--bg-selection)}legend{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}h3{font-size:var(--font-size-lg)}@media (width <= 768px){.nav-desktop,.desktop-only{display:none}.nav-link:after{display:none}.nav-link:hover{background-color:var(--accent-subtle)}}@media (width > 768px){.hamburger-btn,.nav-mobile-container{display:none}}@media (prefers-reduced-motion: reduce){.nav-desktop{transition:none}.icon-wiggle{animation:none;transition:none}.progress-bar-fill.surging,.progress-bar-fill.surging:after{animation:none!important}.progress-bar-fill.surging:after{background:none!important}}.shoppinglist-item{position:relative}.shoppinglist-item button{cursor:pointer}.shoppinglist-item svg{width:100%;height:100%;pointer-events:none}.inline-delete{display:flex;align-items:center;justify-content:center;position:absolute;left:-1.4rem;top:50%;transform:translateY(-50%);width:20px;height:20px;border:1px solid var(--clr-error);opacity:0;transition:opacity var(--transition-fade)}.shoppinglist-item:hover .inline-delete,.shoppinglist-item:hover .qty-controls button{opacity:1}.qty-controls{display:flex;gap:var(--gap-sm);align-items:center}.qty-controls button{opacity:0;transition:opacity var(--transition-fade);color:var(--accent-subtle);width:20px;height:20px;background:transparent;border:1px solid var(--accent-subtle);border-radius:50%}.wrapper{min-height:100vh;display:flex;flex-direction:column;gap:calc(1.5 * var(--gap-lg));background-color:var(--bg-dark)}.content{flex:1 0 auto;width:100%;max-width:clamp(35rem,90vw,90rem);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem);display:flex;flex-direction:column;gap:var(--gap-lg)}.content--narrow{max-width:clamp(35rem,90vw,50rem)}#greeting-card{position:relative;height:clamp(150px,15vh,300px)}#sky-canvas{position:absolute;inset:0;height:100%;width:100%;z-index:0}.greeting-content{position:relative;width:100%;display:flex;justify-content:space-between;z-index:1}.weather-info{display:flex;flex-direction:column;place-items:right}.weather-info{position:relative;display:flex;justify-content:right;z-index:1}.highlight-label{font-weight:var(--font-weight-semibold)}.progress-bar,.progress-bar-fill{height:1.25rem}.progress-bar{background-color:#cecece;border-radius:var(--border-radius);border:var(--border-default);overflow:hidden;width:80%;max-width:300px}.progress-bar-fill{position:relative;background:var(--progress-bar-fill);transform:scaleX(0);transform-origin:left;transition:transform .2s ease-in-out;overflow:hidden}.progress-bar-fill:after{content:"";position:absolute;top:0;left:0;height:100%;width:50%}.progress-bar-fill.surging{animation:pulse 1.5s ease-in-out infinite}.progress-bar-fill.surging:after{background:linear-gradient(to right,transparent,rgba(255,255,255,.4),transparent);animation:surge 1.5s ease-in-out infinite}#confetti-layer{position:fixed;pointer-events:none;top:0;left:0;width:100vw;height:100vh;z-index:50;overflow:visible}.dot{position:absolute;pointer-events:none;top:50%;left:50%;height:var(--confetti-size-base);width:var(--confetti-size-base);transform:translate(-50%,-50%);offset-rotate:0deg}.star{background:gold;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}.circle{background:green;border-radius:50%}.diamond{background:purple;clip-path:polygon(50% 0%,84% 46%,50% 100%,15% 47%)}.parallelogram{background:orange;clip-path:polygon(25% 0%,100% 0%,75% 100%,0% 100%)}.triangle{background:#00f;clip-path:polygon(50% 0%,0% 100%,100% 100%)}.password-input-group{position:relative}.password-input-group input{width:100%;padding-right:2rem}.password-input-group>button{position:absolute;top:50%;transform:translateY(-50%);right:.5rem}.password-toggle .slash{stroke-dasharray:26;stroke-dashoffset:26;transition:stroke-dashoffset .2s ease}.password-toggle[aria-pressed=true] .slash{stroke-dashoffset:0}.landing-content{overflow:hidden;align-items:center;padding:var(--space-xl) var(--space-md)}.landing-content p{max-width:60ch;color:var(--text-muted)}.landing-content h1{font-size:var(--font-size-xxl);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-sm)}.landing-content a{text-align:center}.error-page{display:flex;flex-direction:column;gap:var(--gap-md);text-align:center;align-items:center}.error-page>h1{font-size:var(--font-size-xxl)}.icon-wiggle{width:clamp(12rem,30vw,20rem);height:auto;display:block}.context-menu-positioning{position:relative}html[data-page="devtools.style_reference"] .btn-icon{border:1px solid red}.demo-section,.demo-subsection,.demo-grid-container{display:grid;gap:var(--gap-md)}.demo-section{grid-template-rows:auto 1fr}.demo-subsection{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.demo-grid-container{grid-template-columns:repeat(auto-fit,minmax(40px,1fr));align-items:center}.token-container{border:4px solid var(--border-color)}.tile,.stepped-bg,.stepped-accents{border:var(--border-default);border-radius:var(--border-radius)}.tile{aspect-ratio:1;display:flex;align-items:center;justify-content:center;max-width:100px}.stepped-bg,.stepped-accents{grid-column:1 / -1;display:flex;justify-content:space-evenly;align-items:center;height:80px}.stepped-bg{background:linear-gradient(to right in oklch,var(--bg-dark) 0%,var(--bg-dark) 25%,var(--bg) 25%,var(--bg) 50%,var(--bg-light) 50%,var(--bg-light) 75%,var(--bg-hover) 75%,var(--bg-hover) 100%)}.stepped-accents{background:linear-gradient(to right in oklch,var(--accent-strong) 0%,var(--accent-strong) 33%,var(--accent-subtle) 33%,var(--accent-subtle) 66%,var(--accent-hover) 66%,var(--accent-hover) 100%)}.progbar{grid-column:1 / -1;border:var(--border-default);align-items:center;height:80px}.progbar.one{background:linear-gradient(to right in oklch,#a9deaa,#7bd77f);border-radius:var(--border-radius)}.progbar.two{background:linear-gradient(to right in oklch,#c8dfc8,#71c575);border-radius:var(--border-radius)}.progbar.three{background:linear-gradient(to right in oklch,#a8f878,oklch(65% .2 150));border-radius:var(--border-radius)}.progbar.four{background:linear-gradient(to right in oklch,#e0b771,#71c575,#45ba50);border-radius:var(--border-radius)}.progbar.five{background:linear-gradient(to right in oklch,#92dfd0,#61b565);border-radius:var(--border-radius)}.progbar.six{background:linear-gradient(to right in oklch,#b3e8b3,#91d993,#40d872);border-radius:var(--border-radius)}.progbar.seven{background:linear-gradient(to right in oklch,#f0c781,#96c979,#67bb6b);border-radius:var(--border-radius)}.progbar.seven{background:linear-gradient(to right in oklch,#b1d092,#39d570);border-radius:var(--border-radius)}