/* Before: Media queries respond to VIEWPORT size *//* Problem: A card looks different in sidebar vs main content area *//* After: Container queries respond to PARENT size! */.card-container{container-type:inline-size;container-name:card;}/* The card styles itself based on its container's width */@containercard(min-width:400px){.card{display:grid;grid-template-columns:200px1fr;gap:1rem;}.card-image{grid-row:span2;}}@containercard(max-width:399px){.card{flex-direction:column;}.card-image{max-height:200px;}}/* Practical: Component that adapts to ANY container */.responsive-component{container-type:inline-size;}@container(min-width:300px){/* Medium layout */}@container(min-width:500px){/* Wide layout */}@container(min-width:800px){/* Full layout */}/* Container query units */.widget{container-type:inline-size;padding:2cqw;/* % of container width */font-size:2cqh;/* % of container height */margin-inline:1cqi;/* % of container inline size */block-size:20cqb;/* % of container block size */}

/* FINALLY select a parent based on its children! *//* Card has featured badge → add border */.card:has(.featured-badge){border:2pxsolidgold;box-shadow:04px12pxrgba(255,215,0,0.3);}/* Form has invalid input → show error state on form group */.form-group:has(:invalid){border-color:#e74c3c;background-color:#fef6f6;}.form-group:has(:invalid)::after{content:'⚠ Please fix the errors above';color:#e74c3c;font-size:0.875rem;}/* List has only one item → center it */.list-container:has(li:only-child){justify-content:center;}/* Image inside link → add icon overlay */a:has(>img){position:relative;}a:has(>img)::after{content:'🔗';position:absolute;top:8px;right:8px;}/* Complex combinations */.card:has(img):has(h2){/* Card has both image AND heading */display:grid;}/* :has() with NOT */.navbar:has(.search-bar:focus).nav-links{opacity:0.5;/* Dim other nav items when searching */}/* Practical: Empty state detection */.results:has(.result-item):empty::after{content:'No results found';padding:2rem;text-align:center;color:#666;}

/* No more nested selector hell! */.card{background:white;border-radius:8px;&.title{/* = .card .title */font-size:1.25rem;font-weight:700;}&.body{/* = .card .body */color:#333;line-height:1.6;&p+p{/* = .card .body p + p */margin-top:1em;}}&:hover{/* = .card:hover */transform:translateY(-2px);box-shadow:04px12pxrgba(0,0,0,0.15);}&.featured{/* = .card.featured */border-left:4pxsolidgold;}@media(max-width:768px){&{/* = @media context for .card */margin:0.5rem0;}}}/* @scope limits where styles apply */@scope(.component-a){h2{color:blue;}/* Only h2 inside .component-a */p{line-height:1.5;}/* Only p inside .component-a */}/* h2 outside .component-A is NOT affected! */

:root{/* OKLCH — perceptually uniform colors (better than HSL!) */--primary:oklch(65%0.25250);--secondary:oklch(80%0.15180);--accent:oklch(75%0.2850);/* Color-mix() — blend colors dynamically */--hover-color:color-mix(inoklch,var(--primary),white20%);--disabled-color:color-mix(insrgb,var(--primary),#ccc70%);/* Light/dark mode from single definition */--bg:light-dark(#ffffff,#1a1a2e);--text:light-dark(#1a1a2e,#e0e0e0);--surface:light-dark(#f5f5f5,#16213e);/* Relative color syntax */--button-bg:hsl(fromvar(--primary)hsl/85%);//Slightlylighter--border:hsl(fromvar(--primary)hsl/60%);//Moremuted/* Gradient text */--gradient-text:linear-gradient(135deg,oklch(70%0.25250),oklch(70%0.25330));}.gradient-heading{background:var(--gradient-text);-webkit-background-clip:text;background-clip:text;color:transparent;}/* color-contrast() for accessibility */.button{background:var(--primary);color:color-contrast(var(--primary)vswhite,black);/* Automatically picks white or black based on contrast ratio! */}

.grid-layout{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}.card{/* Child grid inherits parent's column tracks! */display:grid;grid-template-rows:subgrid;grid-row:span3;/* Spans same rows as parent's implicit rows */gap:inherit;/* Inherits parent's gap *//* Header and body align perfectly across cards */header{grid-row:1;}body{grid-row:2;}footer{grid-row:3;}}/* Text wrapping control */.title{text-wrap:balance;/* Balanced wrapping (no orphan words!)
/* vs text-wrap: pretty — also avoids short last lines */}.body{text-wrap:wrap;/* Normal wrapping (default) */}/* Line-clamp made easy */.description{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;/* Or simply: line-clamp: 3; (newer browsers) */}/* Initial letter effect */.article:first-letter{font-size:4em;font-weight:bold;float:left;margin-right:0.5em;line-height:1;color:var(--primary);}/* Field-sizing for form inputs */input[type="text"],input[type="email"],textarea{field-sizing:content;/* Input sizes to content, not fixed!
min-width: 200px; /* But at least this wide */max-width:100%;/* Don't overflow container */}

/* View transitions (page transitions without JS!) */@media(prefers-reduced-motion:no-preference){::view-transition-old(root){animation:fade-out0.3sease-in;}::view-transition-new(root){animation:fade-in0.3sease-out;}}@keyframesfade-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}@keyframesfade-out{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(-10px);}}/* Scroll-driven animations */@keyframesreveal-up{from{opacity:0;transform:translateY(50px);}to{opacity:1;transform:translateY(0);}}.reveal-element{animation:reveal-uplinearboth;animation-timeline:view();/* Tied to scroll position */animation-range:entry0%entry100%;/* Animate while entering viewport */}/* Individual property transitions */.button{transition:background-color0.2sease,transform0.15sease,box-shadow0.2sease;}.button:hover{background-color:var(--hover-color);transform:scale(1.02);box-shadow:04px12pxrgba(0,0,0,0.2);}/* Transition starting value (no more flash of unstyled content!) */.modal{transition:opacity0.3sease,visibility0.3sstep-end;transition-behavior:allow-discrete;/* Respects display:none toggle */}/* Smooth height animation (the holy grail!) */.accordion-content{grid-template-rows:1fr;transition:grid-template-rows0.3sease;}.accordion-content[aria-expanded="false"]{grid-template-rows:0fr;}.accordion-content>div{overflow:hidden;}

/* :is() — simplify grouped selectors *//* Before: */.cardh2,.cardh3,.cardh4,.asideh2,.asideh3,.asideh4{...}/* After: */:is(.card,.aside):is(h2,h3,h4){...}/* :where() — like :is() but specificity is ZERO */:where(.card,.sidebar).title{/* specificity = 0 + 0 + 1 = 1 */}/* :not() can now take complex selectors */p:not(.intro,.footer-text,[class*="special"]){/* All paragraphs EXCEPT these */}/* :nth-of() for patterns */li:nth-of(3n){/* Every 3rd item */}tr:nth-of(even){/* Even rows */}img:nth-of(-n+5){/* First 5 images */}/* Form pseudo-classes */input:placeholder-shown{/* Placeholder is visible */}input:user-invalid{/* Invalid AND user interacted */}:autofill{/* Browser autofilled */}/* Focus-visible (keyboard vs click focus) */button:focus{outline:none;}/* Remove all focus outlines */button:focus-visible{/* Show ONLY for keyboard */outline:2pxsolidvar(--primary);outline-offset:2px;}/* Selection styling */::selection{background:oklch(80%0.2250);color:white;}