@view-transition{navigation:auto}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;--bg: light-dark(#ffffff, #0a0a0a);--text: light-dark(#1a1a1a, #efefef);--text-secondary: light-dark(#666, #999);--accent: light-dark(#007bff, #3399ff);--accent-hover: light-dark(#0056b3, #5badff);--border: light-dark(#e0e0e0, #333);--card-bg: light-dark(#f9f9f9, #1a1a1a);--success: #22c55e;color:var(--text);background-color:var(--bg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@supports (scrollbar-width: thin){:root{--scrollbar-track: light-dark(#f0f0f0, #1a1a1a);--scrollbar-thumb: light-dark(#888, #555)}*{scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);scrollbar-width:thin}}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:light-dark(#666,#777)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background-color:var(--bg);color:var(--text)}#root{min-height:100vh;display:flex;flex-direction:column}a{font-weight:500;color:var(--accent);text-decoration:inherit;transition:color .2s}a:hover{color:var(--accent-hover)}h1,h2,h3,h4,h5,h6{margin:0;line-height:1.2}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.5rem}button{border-radius:8px;border:1px solid var(--border);padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--card-bg);color:var(--text);cursor:pointer;transition:all .25s}button:hover{border-color:var(--accent);background-color:light-dark(#f0f0f0,#2a2a2a)}button:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.home{max-width:900px;margin:0 auto}.hero{text-align:center;padding:3rem 0;margin-bottom:4rem}.hero-title{font-size:3.5rem;font-weight:800;margin-bottom:1rem;background:linear-gradient(135deg,var(--accent) 0%,light-dark(#3399ff,#66b3ff) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{font-size:1.5rem;color:var(--text-secondary);margin-bottom:2rem;font-weight:600}.hero-description{font-size:1.125rem;line-height:1.8;color:var(--text-secondary);margin-bottom:1rem;max-width:700px;margin-left:auto;margin-right:auto}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-bottom:4rem}.feature-card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:2rem;text-decoration:none;color:inherit;transition:all .3s;display:flex;flex-direction:column;position:relative;overflow:hidden}.feature-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--accent),light-dark(#3399ff,#66b3ff));transform:scaleX(0);transform-origin:left;transition:transform .3s}.feature-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px light-dark(rgba(0,0,0,.1),rgba(0,0,0,.3));border-color:var(--accent)}.feature-card:hover:before{transform:scaleX(1)}.feature-icon{font-size:3rem;margin-bottom:1rem}.feature-title{font-size:1.5rem;margin-bottom:1rem;color:var(--text)}.feature-description{color:var(--text-secondary);line-height:1.6;margin-bottom:1.5rem;flex:1}.feature-snippet{background:light-dark(#f0f0f0,#1a1a1a);border:1px solid var(--border);border-radius:6px;padding:1rem;margin-top:auto}.feature-snippet code{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.875rem;color:var(--accent)}.benefits{margin-top:4rem;padding-top:4rem;border-top:1px solid var(--border)}.benefits h2{text-align:center;margin-bottom:3rem;font-size:2.5rem}.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}.benefit-item{text-align:center;padding:1.5rem}.benefit-item h3{font-size:1.5rem;margin-bottom:1rem;color:var(--text)}.benefit-item p{color:var(--text-secondary);line-height:1.6}.home-footer{margin-top:4rem;padding-top:3rem;border-top:1px solid var(--border);text-align:center}.home-footer p{color:var(--text-secondary);font-size:.95rem}.home-footer a{color:var(--accent);text-decoration:none;font-weight:600;transition:color .2s}.home-footer a:hover{color:light-dark(#3399ff,#66b3ff);text-decoration:underline}@media(max-width:768px){.hero-title{font-size:2.5rem}.hero-subtitle{font-size:1.25rem}.features-grid{grid-template-columns:1fr}}.view-transitions-page{max-width:900px;margin:0 auto}.demo-card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:2rem}.demo-card h2{margin-bottom:1rem;color:var(--text)}.demo-card p{color:var(--text-secondary);line-height:1.7;margin-bottom:1rem}.highlight{background:light-dark(#e8f2ff,#1a2a3a);border-left:4px solid var(--accent);padding:1rem;border-radius:6px;margin:1.5rem 0}.demo-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}.demo-button{padding:.75rem 1.5rem;background:var(--accent);color:#fff;text-decoration:none;border-radius:8px;font-weight:600;transition:all .2s;border:none;cursor:pointer;display:inline-block}.demo-button.secondary{background:var(--card-bg);color:var(--text);border:1px solid var(--border)}.demo-button.secondary:hover{background:light-dark(#f0f0f0,#2a2a2a);box-shadow:0 4px 12px light-dark(rgba(0,0,0,.1),rgba(255,255,255,.1))}.code-section{background:light-dark(#f8f8f8,#1a1a1a);border:1px solid var(--border);border-radius:12px;padding:2rem}.code-section h3{margin-bottom:1rem;color:var(--text)}.explanation-section h3{margin-bottom:1.5rem;color:var(--text)}.feature-list code{background:light-dark(#e8e8e8,#2a2a2a);padding:.2rem .4rem;border-radius:4px;font-size:.9em;font-family:Monaco,Menlo,Ubuntu Mono,monospace}.example-elements{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:2rem}.example-elements h3{margin-bottom:1rem;color:var(--text)}.example-elements p{color:var(--text-secondary);line-height:1.7;margin-bottom:1.5rem}.hero-demo{background:linear-gradient(135deg,var(--accent),light-dark(#3399ff,#66b3ff));color:#fff;padding:2rem;border-radius:12px;text-align:center}.hero-demo h4{margin-bottom:1rem;font-size:1.5rem}.hero-demo p{color:#ffffffe6;margin:0}@media(max-width:768px){.page-header h1{font-size:2rem}.demo-actions{flex-direction:column}.demo-button{width:100%;text-align:center}}.scroll-animations-page{max-width:900px;margin:0 auto}.page-header{text-align:center;padding:2rem 0 3rem;margin-bottom:1rem}.scroll-progress-indicator{position:fixed;top:0;left:0;width:100%;height:4px;background:light-dark(#e0e0e0,#333);z-index:1000;transform-origin:left;animation:linear progress both;animation-timeline:scroll();animation-range:0% 100%}@keyframes progress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.demo-section{margin-bottom:4rem;display:flex;flex-direction:column;gap:2rem}.scroll-demo-section{margin-top:4rem}.scroll-demo-section h2{text-align:center;margin-bottom:1rem;color:var(--text)}.demo-instructions{text-align:center;color:var(--text-secondary);margin-bottom:3rem;font-size:1.125rem}.scroll-spacer{height:60vh}.scroll-spacer-large{height:100vh}.reveal-card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:2rem;display:flex;gap:2rem;align-items:center;margin-bottom:2rem;box-shadow:0 4px 12px light-dark(rgba(0,0,0,.1),rgba(0,0,0,.3))}.reveal-card-1{view-timeline-name:--revealing-card-1;view-timeline-axis:block;animation:linear reveal-fade both;animation-timeline:--revealing-card-1;animation-range:entry 25% cover 50%}@keyframes reveal-fade{0%{opacity:0;clip-path:inset(45% 20% 45% 20%)}to{opacity:1;clip-path:inset(0% 0% 0% 0%)}}.reveal-card-2{view-timeline-name:--revealing-card-2;view-timeline-axis:block;animation:linear reveal-slide both;animation-timeline:--revealing-card-2;animation-range:entry 0% cover 50%}@keyframes reveal-slide{0%{opacity:0;transform:translateY(60px)}to{opacity:1;transform:translateY(0)}}.reveal-card-3{view-timeline-name:--revealing-card-3;view-timeline-axis:block;animation:linear reveal-scale both;animation-timeline:--revealing-card-3;animation-range:entry 25% cover 50%}@keyframes reveal-scale{0%{opacity:0;transform:scale(.8) rotate(-5deg)}to{opacity:1;transform:scale(1) rotate(0)}}.card-image{width:200px;height:150px;background:linear-gradient(135deg,var(--accent),light-dark(#3399ff,#66b3ff));border-radius:8px;flex-shrink:0}.card-content h3{margin-bottom:1rem;color:var(--text);font-size:1.5rem}.card-content p{color:var(--text-secondary);line-height:1.7;margin:0}.product-card-demo{margin-top:2rem}.product-card-demo h2{text-align:center;margin-bottom:1rem;color:var(--text)}.product-card{--product-card-radius: 16px;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--product-card-radius);overflow:hidden;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 8px 24px light-dark(rgba(0,0,0,.12),rgba(0,0,0,.35));view-timeline-name:--product-card;view-timeline-axis:block}.product-card__image-wrap{position:relative;aspect-ratio:4 / 3;overflow:hidden;animation:linear product-image-reveal both;animation-timeline:--product-card;animation-range:entry 0% cover 40%}@keyframes product-image-reveal{0%{opacity:0;clip-path:inset(0 100% 0 0);filter:saturate(.3)}to{opacity:1;clip-path:inset(0 0% 0 0);filter:saturate(1)}}.product-card__image{width:100%;height:100%;background:linear-gradient(145deg,#1a1a2e 0%,#16213e 40%,var(--accent) 100%)}.product-card__badge{position:absolute;top:1rem;left:1rem;padding:.35em .75em;background:var(--accent);color:#fff;font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:6px;animation:linear product-badge-pop both;animation-timeline:--product-card;animation-range:entry 15% cover 35%}@keyframes product-badge-pop{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.product-card__body{padding:2rem;display:flex;flex-direction:column;gap:.75rem;animation:linear product-body-reveal both;animation-timeline:--product-card;animation-range:entry 20% cover 55%}@keyframes product-body-reveal{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:translate(0)}}.product-card__category{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}.product-card__title{margin:0;font-size:1.5rem;color:var(--text);line-height:1.25}.product-card__desc{margin:0;color:var(--text-secondary);font-size:.95rem;line-height:1.6;flex:1}.product-card__footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.5rem;padding-top:1rem;border-top:1px solid var(--border)}.product-card__price{font-size:1.5rem;font-weight:700;color:var(--text)}.product-card__cta{padding:.6em 1.25em;background:var(--accent);color:#fff;border:none;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.product-card__cta:hover{transform:translateY(-2px);box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 40%,transparent)}.product-card__cta:active{transform:translateY(0)}@media(max-width:768px){.product-card{grid-template-columns:1fr}.product-card__image-wrap{aspect-ratio:16 / 10}.product-card__body{padding:1.5rem}}.progress-demo{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:2rem;text-align:center;margin-top:2rem}.progress-demo h3{margin-bottom:1rem;color:var(--text)}.progress-demo p{color:var(--text-secondary);line-height:1.7}@media(max-width:768px){.page-header h1{font-size:2rem}.reveal-card{flex-direction:column}.card-image{width:100%;height:200px}.scroll-spacer{height:40vh}}@supports not (animation-timeline: scroll()){.scroll-progress-indicator{display:none}.reveal-card-1,.reveal-card-2,.reveal-card-3{animation:none;opacity:1;transform:none;clip-path:none}.product-card__image-wrap,.product-card__badge,.product-card__body{animation:none;opacity:1;transform:none;clip-path:none;filter:none}}.dark-mode-page{max-width:900px;margin:0 auto}.demo-section{display:flex;flex-direction:column;gap:2rem}.info-banner{background:linear-gradient(135deg,var(--accent),light-dark(#3399ff,#66b3ff));color:#fff;padding:1.5rem;border-radius:12px;text-align:center}.info-banner p{margin:0;line-height:1.7;color:#fff}.comparison-section{margin-top:2rem}.comparison-section h2{text-align:center;margin-bottom:2rem;color:var(--text)}.comparison-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.comparison-card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:2rem;display:flex;flex-direction:column}.comparison-card h3{margin-bottom:1.5rem;font-size:1.5rem}.comparison-code{background:light-dark(#f0f0f0,#1a1a1a);border:1px solid var(--border);border-radius:8px;padding:1rem;overflow-x:auto;margin:0 0 1.5rem;flex:1}.comparison-code code{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.85rem;line-height:1.6;color:var(--text);display:block;white-space:pre}.issues-list,.benefits-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}.issues-list li{padding-left:1.5rem;position:relative;color:var(--text-secondary)}.issues-list li:before{content:"✗";position:absolute;left:0;color:#e74c3c;font-weight:700}.benefits-list li{padding-left:1.5rem;position:relative;color:var(--text-secondary)}.benefits-list li:before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}.explanation-section{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:2rem;margin-top:2rem}.theme-demo{margin-top:3rem;padding-top:3rem;border-top:1px solid var(--border)}.theme-demo h2{text-align:center;margin-bottom:1rem;color:var(--text)}.theme-demo>p{text-align:center;color:var(--text-secondary);margin-bottom:2rem}.demo-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.theme-card{padding:2rem;border-radius:12px;border:1px solid var(--border)}.card-primary{background:var(--card-bg)}.card-secondary{background:light-dark(#f8f8f8,#1a1a1a);border-color:var(--border)}.card-accent{background:linear-gradient(135deg,light-dark(rgba(0,123,255,.1),rgba(51,153,255,.2)),light-dark(rgba(51,153,255,.05),rgba(102,179,255,.1)));border-color:var(--accent)}.theme-card h3{margin-bottom:.75rem;color:var(--text);font-size:1.25rem}.theme-card p{color:var(--text-secondary);margin:0;line-height:1.6}@media(max-width:768px){.page-header h1{font-size:2rem}.comparison-grid,.demo-cards-grid{grid-template-columns:1fr}}.popover-page{max-width:900px;margin:0 auto}[popover]{border:1px solid var(--border);padding:1rem;border-radius:8px;background:var(--card-bg);box-shadow:0 8px 24px light-dark(rgba(0,0,0,.15),rgba(0,0,0,.4));color:var(--text);max-width:400px}[popover]:not(:popover-open){display:none}.basic-popover{margin-top:.5rem}.basic-popover h4{margin:0 0 .5rem;color:var(--text);font-size:1.125rem}.basic-popover p{margin:0;color:var(--text-secondary);line-height:1.6}.dropdown-menu{margin-top:.5rem;padding:.5rem 0;min-width:200px}.menu-item{width:100%;padding:.75rem 1rem;text-align:left;background:transparent;border:none;color:var(--text);cursor:pointer;transition:background .2s;border-radius:0;font-size:.95rem;display:block}.menu-item:hover{background:light-dark(#f0f0f0,#2a2a2a)}.menu-item.danger{color:#e74c3c}.menu-item.danger:hover{background:light-dark(#fee,#3a1a1a)}.dropdown-menu hr{border:none;border-top:1px solid var(--border);margin:.5rem 0}.modal-dialog{max-width:500px;width:90vw;padding:0;margin:auto;border-radius:12px;overflow:hidden}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid var(--border)}.modal-header h4{margin:0;color:var(--text);font-size:1.25rem}.close-button{background:transparent;border:none;font-size:1.5rem;color:var(--text-secondary);cursor:pointer;padding:0;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}.close-button:hover{background:light-dark(#f0f0f0,#2a2a2a);color:var(--text)}.modal-body{padding:1.5rem}.modal-body p{margin:0;color:var(--text-secondary);line-height:1.7}.modal-footer{display:flex;gap:1rem;justify-content:flex-end;padding:1.5rem;border-top:1px solid var(--border);background:light-dark(#f8f8f8,#1a1a1a)}.secondary-button{padding:.5rem 1rem;background:transparent;border:1px solid var(--border);color:var(--text)}.secondary-button:hover{background:light-dark(#f0f0f0,#2a2a2a)}.primary-button{padding:.5rem 1rem;background:var(--accent);border:none;color:#fff}.primary-button:hover{background:var(--accent-hover)}.interactive-demos{margin-top:4rem}.interactive-demos h2{text-align:center;margin-bottom:2rem;color:var(--text)}.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.demo-card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:2rem;display:flex;flex-direction:column;gap:1rem}.demo-card h3{margin:0;color:var(--text);font-size:1.25rem}.demo-card p{margin:0;color:var(--text-secondary);line-height:1.6}.demo-button{padding:.75rem 1.5rem;background:var(--accent);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s;align-self:flex-start}.demo-button:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 4px 12px #007bff4d}.tooltip-container{position:relative;display:inline-block}.tooltip-content{position:absolute;bottom:calc(100% + .5rem);left:50%;transform:translate(-50%);background:light-dark(#000,#1a1a1a);color:#fff;padding:.75rem 1rem;border-radius:6px;font-size:.875rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;z-index:1000}.tooltip-container:hover .tooltip-content{opacity:1}.tooltip-content:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:light-dark(#000,#1a1a1a)}.features-section{margin-top:4rem;padding-top:4rem;border-top:1px solid var(--border)}.features-section h2{text-align:center;margin-bottom:2rem;color:var(--text)}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem}.feature-item{text-align:center;padding:1.5rem}.feature-item h3{margin-bottom:1rem;color:var(--text);font-size:1.25rem}.feature-item p{color:var(--text-secondary);line-height:1.6;margin:0}@media(max-width:768px){.page-header h1{font-size:2rem}.demo-grid{grid-template-columns:1fr}.modal-footer{flex-direction:column}.modal-footer button{width:100%}}.container-queries-page{max-width:900px;margin:0 auto}.page-header{text-align:center;padding:2rem 0;margin-bottom:3rem}.page-header h1{font-size:3rem;margin-bottom:1rem;color:var(--text)}.subtitle{font-size:1.25rem;color:var(--text-secondary)}.demo-section{display:flex;flex-direction:column;gap:2rem;margin-bottom:4rem}.code-section{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:2rem}.code-section h2{margin-bottom:1rem;color:var(--text)}.code-block{background:light-dark(#000,#0a0a0a);border-radius:8px;padding:1.5rem;overflow-x:auto;margin:0}.code-block code{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9rem;line-height:1.6;color:light-dark(#e8e8e8,#e0e0e0);display:block;white-space:pre}.explanation-section{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:2rem}.explanation-section h2{margin-bottom:1.5rem;color:var(--text)}.feature-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1.5rem}.feature-list li{padding-left:2rem;position:relative;color:var(--text-secondary);line-height:1.7}.feature-list li:before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700;font-size:1.2rem}.interactive-demo{margin-top:4rem}.interactive-demo h2{text-align:center;margin-bottom:1rem;color:var(--text)}.demo-instructions{text-align:center;color:var(--text-secondary);margin-bottom:3rem;line-height:1.7}.demo-layouts{display:flex;flex-direction:column;gap:3rem;margin-bottom:4rem}.layout-sidebar,.layout-medium,.layout-wide{border:2px dashed var(--border);border-radius:12px;padding:1.5rem;background:light-dark(#fafafa,#151515)}.layout-sidebar h3,.layout-medium h3,.layout-wide h3{margin:0 0 1.5rem;color:var(--text-secondary);font-size:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.card-wrapper{container-type:inline-size;container-name:card-container}.adaptive-card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:all .3s;display:flex;flex-direction:column}@container card-container (max-width: 400px){.adaptive-card{flex-direction:column}.card-image-small,.card-image-medium,.card-image-large{width:100%;height:150px}.card-content{padding:1.5rem}}@container card-container (min-width: 400px) and (max-width: 600px){.adaptive-card{display:grid;grid-template-columns:180px 1fr;gap:1.5rem}.card-image-small,.card-image-medium{width:100%;height:100%;min-height:150px}.card-image-large{width:100%;height:200px}.card-content{padding:1.5rem;display:flex;flex-direction:column;justify-content:center}}@container card-container (min-width: 600px){.adaptive-card{display:grid;grid-template-columns:250px 1fr;gap:2rem;padding:1.5rem}.card-image-small,.card-image-medium,.card-image-large{width:100%;height:100%;min-height:200px;border-radius:8px}.card-content{padding:0;display:flex;flex-direction:column;justify-content:center}.card-content h4{font-size:1.5rem}}.card-image-small,.card-image-medium,.card-image-large{background:linear-gradient(135deg,var(--accent),light-dark(#3399ff,#66b3ff));flex-shrink:0;object-fit:cover}.card-content h4{margin:0 0 .75rem;color:var(--text);font-size:1.25rem}.card-content p{margin:0;color:var(--text-secondary);line-height:1.6}.layout-sidebar .card-wrapper{width:250px;margin:0 auto}.layout-medium .card-wrapper{width:500px;max-width:100%;margin:0 auto}.layout-wide .card-wrapper{width:800px;max-width:100%;margin:0 auto}.grid-demo{margin-top:4rem;padding-top:4rem;border-top:1px solid var(--border)}.grid-demo h3{text-align:center;margin-bottom:1rem;color:var(--text)}.grid-demo>p{text-align:center;color:var(--text-secondary);margin-bottom:2rem}.responsive-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}.responsive-grid .grid-item{width:100%}@media(max-width:768px){.page-header h1{font-size:2rem}.layout-sidebar .card-wrapper,.layout-medium .card-wrapper,.layout-wide .card-wrapper{width:100%}.responsive-grid{grid-template-columns:1fr}}@supports not (container-type: inline-size){.adaptive-card{flex-direction:column}.card-image-small,.card-image-medium,.card-image-large{width:100%;height:200px}.card-content{padding:1.5rem}}.temporal-page{max-width:900px;margin:0 auto}.temporal-page .page-header{text-align:center;padding:2rem 0;margin-bottom:3rem}.temporal-page .page-header h1{font-size:3rem;margin-bottom:1rem;color:var(--text)}.temporal-page .subtitle{font-size:1.25rem;color:var(--text-secondary)}.temporal-page .demo-section{display:flex;flex-direction:column;gap:2rem}.temporal-page .info-banner{background:linear-gradient(135deg,var(--accent),light-dark(#3399ff,#66b3ff));color:#fff;padding:1.5rem;border-radius:12px;text-align:center}.temporal-page .info-banner p{margin:0;line-height:1.7;color:#fff}.temporal-demo-card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:2rem}.temporal-demo-card h2{margin-bottom:1.5rem;color:var(--text);font-size:1.5rem}.demo-label{display:block;margin-bottom:.75rem;font-weight:600;color:var(--text)}.demo-date-input{width:100%;max-width:240px;padding:.75rem 1rem;font-size:1rem;font-family:inherit;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);margin-bottom:1rem}.demo-date-input:focus{outline:2px solid var(--accent);outline-offset:2px}.trial-result{margin:1rem 0 0;padding:1rem;background:light-dark(rgba(0,123,255,.08),rgba(51,153,255,.15));border-radius:8px;color:var(--text)}.trial-result strong{color:var(--accent);font-size:1.1rem}.trial-error{margin:1rem 0 0;padding:1rem;background:light-dark(rgba(231,76,60,.1),rgba(231,76,60,.2));border-radius:8px;color:#e74c3c}.temporal-page .code-section{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:2rem}.temporal-page .code-section h2{margin-bottom:1rem;color:var(--text)}.temporal-page .code-block{background:light-dark(#000,#0a0a0a);border-radius:8px;padding:1.5rem;overflow-x:auto;margin:0}.temporal-page .code-block code{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9rem;line-height:1.6;color:light-dark(#e8e8e8,#e0e0e0);display:block;white-space:pre}.temporal-page .comparison-section{margin-top:2rem}.temporal-page .comparison-section h2{text-align:center;margin-bottom:2rem;color:var(--text)}.temporal-page .comparison-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.temporal-page .comparison-card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:2rem;display:flex;flex-direction:column}.temporal-page .comparison-card h3{margin-bottom:1.5rem;font-size:1.5rem}.temporal-page .issues-list,.temporal-page .benefits-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}.temporal-page .issues-list li{padding-left:1.5rem;position:relative;color:var(--text-secondary);line-height:1.5}.temporal-page .issues-list li:before{content:"✗";position:absolute;left:0;color:#e74c3c;font-weight:700}.temporal-page .benefits-list li{padding-left:1.5rem;position:relative;color:var(--text-secondary);line-height:1.5}.temporal-page .benefits-list li:before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}.temporal-page .explanation-section{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:2rem;margin-top:2rem}.temporal-page .explanation-section h2{margin-bottom:1.5rem;color:var(--text)}.temporal-page .explanation-section p{color:var(--text-secondary);line-height:1.7;margin-bottom:1rem}.temporal-page .explanation-section p:last-child{margin-bottom:0}.support-note{font-size:.95rem}.support-note a{color:var(--accent)}@media(max-width:768px){.temporal-page .page-header h1{font-size:2rem}.temporal-page .comparison-grid{grid-template-columns:1fr}}.editcontext-page{max-width:900px;margin:0 auto}.editcontext-page .page-header{text-align:center;padding:2rem 0;margin-bottom:3rem}.editcontext-page .page-header h1{font-size:3rem;margin-bottom:1rem;color:var(--text)}.editcontext-page .subtitle{font-size:1.25rem;color:var(--text-secondary)}.editcontext-page .demo-section{display:flex;flex-direction:column;gap:2rem}.editcontext-page .info-banner{background:linear-gradient(135deg,var(--accent),light-dark(#3399ff,#66b3ff));color:#fff;padding:1.5rem;border-radius:12px;text-align:center}.editcontext-page .info-banner p{margin:0;line-height:1.7;color:#fff}.editcontext-demo-card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:2rem}.editcontext-demo-card h2{margin-bottom:.5rem;color:var(--text);font-size:1.5rem}.demo-hint{color:var(--text-secondary);font-size:.95rem;margin-bottom:1rem}.editcontext-editor{min-height:120px;padding:1rem 1.25rem;font-size:1rem;line-height:1.6;font-family:inherit;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);outline:none;white-space:pre-wrap;word-wrap:break-word}.editcontext-editor:focus{border-color:var(--accent);box-shadow:0 0 0 2px light-dark(rgba(0,123,255,.2),rgba(51,153,255,.25))}.editcontext-editor .hashtag{color:var(--accent);font-weight:600}.unsupported-message{color:var(--text-secondary);margin:0;font-size:.95rem}.editcontext-page .code-section{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:2rem}.editcontext-page .code-section h2{margin-bottom:1rem;color:var(--text)}.editcontext-page .code-block{background:light-dark(#000,#0a0a0a);border-radius:8px;padding:1.5rem;overflow-x:auto;margin:0}.editcontext-page .code-block code{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9rem;line-height:1.6;color:light-dark(#e8e8e8,#e0e0e0);display:block;white-space:pre}.editcontext-page .comparison-section{margin-top:2rem}.editcontext-page .comparison-section h2{text-align:center;margin-bottom:2rem;color:var(--text)}.editcontext-page .comparison-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.editcontext-page .comparison-card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:2rem;display:flex;flex-direction:column}.editcontext-page .comparison-card h3{margin-bottom:1.5rem;font-size:1.5rem}.editcontext-page .issues-list,.editcontext-page .benefits-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}.editcontext-page .issues-list li{padding-left:1.5rem;position:relative;color:var(--text-secondary);line-height:1.5}.editcontext-page .issues-list li:before{content:"✗";position:absolute;left:0;color:#e74c3c;font-weight:700}.editcontext-page .benefits-list li{padding-left:1.5rem;position:relative;color:var(--text-secondary);line-height:1.5}.editcontext-page .benefits-list li:before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}.editcontext-page .explanation-section{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:2rem;margin-top:2rem}.editcontext-page .explanation-section h2{margin-bottom:1.5rem;color:var(--text)}.editcontext-page .explanation-section p{color:var(--text-secondary);line-height:1.7;margin-bottom:1rem}.editcontext-page .explanation-section p:last-child{margin-bottom:0}.editcontext-page .support-note{font-size:.95rem}.editcontext-page .support-note a{color:var(--accent)}@media(max-width:768px){.editcontext-page .page-header h1{font-size:2rem}.editcontext-page .comparison-grid{grid-template-columns:1fr}}.speculation-page{max-width:900px;margin:0 auto}.speculation-page .page-header{text-align:center;padding:2rem 0;margin-bottom:3rem}.speculation-page .page-header h1{font-size:3rem;margin-bottom:1rem;color:var(--text)}.speculation-page .subtitle{font-size:1.25rem;color:var(--text-secondary)}.speculation-page .demo-section{display:flex;flex-direction:column;gap:2rem}.speculation-page .info-banner{background:linear-gradient(135deg,var(--accent),light-dark(#3399ff,#66b3ff));color:#fff;padding:1.5rem;border-radius:12px;text-align:center}.speculation-page .info-banner p{margin:0;line-height:1.7;color:#fff}.speculation-page .info-banner a{color:#fff;text-decoration:underline;text-underline-offset:2px}.speculation-page .info-banner code{background:#ffffff40;padding:.15em .4em;border-radius:4px;font-size:.95em}.prefetch-demo-card{background:var(--card-bg);border:2px solid var(--accent);border-radius:12px;padding:2rem}.prefetch-demo-card h2{margin-bottom:.5rem;color:var(--text);font-size:1.5rem}.prefetch-demo-card .demo-hint{color:var(--text-secondary);font-size:.95rem;margin-bottom:1.25rem}.prefetch-demo-card .demo-hint code{background:var(--bg);padding:.1em .35em;border-radius:4px;font-size:.9em}.prefetch-links{display:flex;flex-wrap:wrap;gap:1rem}.prefetch-link{display:inline-block;padding:.85rem 1.5rem;background:var(--accent);color:#fff;font-weight:600;text-decoration:none;border-radius:8px;transition:transform .15s ease,box-shadow .15s ease}.prefetch-link:hover{box-shadow:0 4px 12px light-dark(rgba(0,123,255,.35),rgba(51,153,255,.4));transform:translateY(-1px)}.speculation-demo-card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:2rem}.speculation-demo-card h2{margin-bottom:.5rem;color:var(--text);font-size:1.5rem}.speculation-demo-card .demo-hint{color:var(--text-secondary);font-size:.95rem;margin-bottom:1rem}.speculation-demo-card .demo-hint code{background:var(--bg);padding:.1em .35em;border-radius:4px;font-size:.9em}.speculation-page .code-section{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:2rem}.speculation-page .code-section h2{margin-bottom:1rem;color:var(--text)}.speculation-page .spec-list{margin:0;padding-left:1.5rem;color:var(--text-secondary);line-height:1.7}.speculation-page .spec-list li{margin-bottom:.5rem}.speculation-page .code-block{background:light-dark(#000,#0a0a0a);border-radius:8px;padding:1.5rem;overflow-x:auto;margin:0}.speculation-page .code-block code{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9rem;line-height:1.6;color:light-dark(#e8e8e8,#e0e0e0);display:block;white-space:pre}.speculation-page .comparison-section{margin-top:2rem}.speculation-page .comparison-section h2{text-align:center;margin-bottom:2rem;color:var(--text)}.speculation-page .comparison-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.speculation-page .comparison-card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:2rem;display:flex;flex-direction:column}.speculation-page .comparison-card h3{margin-bottom:1.5rem;font-size:1.5rem}.speculation-page .issues-list,.speculation-page .benefits-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}.speculation-page .issues-list li{padding-left:1.5rem;position:relative;color:var(--text-secondary);line-height:1.5}.speculation-page .issues-list li:before{content:"✗";position:absolute;left:0;color:#e74c3c;font-weight:700}.speculation-page .benefits-list li{padding-left:1.5rem;position:relative;color:var(--text-secondary);line-height:1.5}.speculation-page .benefits-list li:before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}.speculation-page .explanation-section{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:2rem;margin-top:2rem}.speculation-page .explanation-section h2{margin-bottom:1.5rem;color:var(--text)}.speculation-page .explanation-section p{color:var(--text-secondary);line-height:1.7;margin-bottom:1rem}.speculation-page .explanation-section code{background:var(--bg);padding:.1em .35em;border-radius:4px;font-size:.9em}.speculation-page .explanation-section p:last-child{margin-bottom:0}.speculation-page .support-note{font-size:.95rem}.speculation-page .support-note a{color:var(--accent)}@media(max-width:768px){.speculation-page .page-header h1{font-size:2rem}.speculation-page .comparison-grid{grid-template-columns:1fr}}.anchor-page{max-width:900px;margin:0 auto}.anchor-page .page-header{text-align:center;padding:2rem 0;margin-bottom:3rem}.anchor-page .page-header h1{font-size:3rem;margin-bottom:1rem;color:var(--text)}.anchor-page .subtitle{font-size:1.25rem;color:var(--text-secondary)}.anchor-page .demo-section{display:flex;flex-direction:column;gap:2rem;margin-bottom:4rem}.anchor-page .code-section{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:2rem}.anchor-page .code-section h2{margin-bottom:1rem;color:var(--text)}.anchor-page .code-block{background:light-dark(#000,#0a0a0a);border-radius:8px;padding:1.5rem;overflow-x:auto;margin:0}.anchor-page .code-block code{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9rem;line-height:1.6;color:light-dark(#e8e8e8,#e0e0e0);display:block;white-space:pre}.anchor-page .explanation-section{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:2rem}.anchor-page .explanation-section h2{margin-bottom:1.5rem;color:var(--text)}.anchor-page .feature-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1.5rem}.anchor-page .feature-list li{padding-left:2rem;position:relative;color:var(--text-secondary);line-height:1.7}.anchor-page .feature-list li:before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700;font-size:1.2rem}.anchor-page .feature-list code{background:var(--bg);padding:.1em .35em;border-radius:4px;font-size:.9em}.anchor-page .interactive-demo{margin-top:2rem}.anchor-page .interactive-demo h2{text-align:center;margin-bottom:1rem;color:var(--text)}.anchor-page .demo-instructions{text-align:center;color:var(--text-secondary);margin-bottom:2rem;line-height:1.7}.anchor-demo-container{display:flex;justify-content:center;align-items:center;min-height:280px;padding:2rem}.avatar-wrapper{position:relative}.profile-avatar{anchor-name:--avatar;width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--accent),light-dark(#3399ff,#66b3ff));display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s ease}.profile-avatar:hover{transform:scale(1.05)}.avatar-initial{font-size:1.25rem;font-weight:600;color:#fff}.status-popup{position:fixed;position-anchor:--avatar;top:anchor(bottom);left:anchor(center);translate:-50% 0;position-try-options:flip-block,flip-inline;display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--card-bg);border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 12px #00000026;font-size:.9rem;color:var(--text);opacity:0;pointer-events:none;transition:opacity .2s ease}.avatar-wrapper:hover .status-popup{opacity:1}.status-dot{width:8px;height:8px;border-radius:50%}.status-dot.online{background:#22c55e}@supports not (anchor-name: --avatar){.avatar-wrapper{position:relative}.status-popup{position:absolute;top:100%;left:50%;translate:-50% 0;margin-top:.5rem}}.anchor-page .support-note{margin-top:2rem;text-align:center;font-size:.95rem;color:var(--text-secondary)}.anchor-page .support-note a{color:var(--accent)}@media(max-width:768px){.anchor-page .page-header h1{font-size:2rem}}.has-page{max-width:900px;margin:0 auto}.has-page .page-header{text-align:center;padding:2rem 0;margin-bottom:3rem}.has-page .page-header h1{font-size:3rem;margin-bottom:1rem;color:var(--text)}.has-page .subtitle{font-size:1.25rem;color:var(--text-secondary)}.has-page .demo-section{display:flex;flex-direction:column;gap:2rem;margin-bottom:4rem}.has-page .code-section{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:2rem}.has-page .code-section h2{margin-bottom:1rem;color:var(--text)}.has-page .code-block{background:light-dark(#000,#0a0a0a);border-radius:8px;padding:1.5rem;overflow-x:auto;margin:0}.has-page .code-block code{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9rem;line-height:1.6;color:light-dark(#e8e8e8,#e0e0e0);display:block;white-space:pre}.has-page .explanation-section{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:2rem}.has-page .explanation-section h2{margin-bottom:1.5rem;color:var(--text)}.has-page .feature-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1.5rem}.has-page .feature-list li{padding-left:2rem;position:relative;color:var(--text-secondary);line-height:1.7}.has-page .feature-list li:before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700;font-size:1.2rem}.has-page .feature-list code{background:var(--bg);padding:.1em .35em;border-radius:4px;font-size:.9em}.has-page .interactive-demo{margin-top:2rem}.has-page .interactive-demo h2{text-align:center;margin-bottom:1rem;color:var(--text)}.has-page .demo-instructions{text-align:center;color:var(--text-secondary);margin-bottom:2rem;line-height:1.7}.form-container{max-width:400px;margin:0 auto;padding:2rem;background:var(--card-bg);border:1px solid var(--border);border-radius:12px;display:flex;flex-direction:column;gap:1.25rem}.field-group{display:flex;flex-direction:column;gap:.5rem}.field-group label{font-size:.9rem;font-weight:500;color:var(--text)}.terms-group label{display:flex;align-items:center;gap:.5rem;cursor:pointer}.input{padding:.75rem 1rem;border:1px solid var(--border);border-radius:8px;font-size:1rem;font-family:inherit;background:var(--bg);color:var(--text)}.input:focus{outline:2px solid var(--accent);outline-offset:2px}.submit-btn{margin-top:.5rem;padding:.85rem 1.5rem;background:var(--accent);color:#fff;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:opacity .2s,filter .2s}.submit-btn:hover:not(:disabled){filter:brightness(1.1)}.form-container:has(.input:invalid,#terms:not(:checked)) .submit-btn{opacity:.5;pointer-events:none;filter:grayscale(1)}@media(max-width:768px){.has-page .page-header h1{font-size:2rem}}.user-valid-page{max-width:900px;margin:0 auto}.user-valid-page .page-header{text-align:center;padding:2rem 0;margin-bottom:3rem}.user-valid-page .page-header h1{font-size:3rem;margin-bottom:1rem;color:var(--text)}.user-valid-page .subtitle{font-size:1.25rem;color:var(--text-secondary)}.user-valid-page .demo-section{display:flex;flex-direction:column;gap:2rem;margin-bottom:4rem}.user-valid-page .code-section{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:2rem}.user-valid-page .code-section h2{margin-bottom:1rem;color:var(--text)}.user-valid-page .code-block{background:light-dark(#000,#0a0a0a);border-radius:8px;padding:1.5rem;overflow-x:auto;margin:0}.user-valid-page .code-block code{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9rem;line-height:1.6;color:light-dark(#e8e8e8,#e0e0e0);display:block;white-space:pre}.user-valid-page .explanation-section{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:2rem}.user-valid-page .explanation-section h2{margin-bottom:1.5rem;color:var(--text)}.user-valid-page .feature-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1.5rem}.user-valid-page .feature-list li{padding-left:2rem;position:relative;color:var(--text-secondary);line-height:1.7}.user-valid-page .feature-list li:before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700;font-size:1.2rem}.user-valid-page .feature-list code{background:var(--bg);padding:.1em .35em;border-radius:4px;font-size:.9em}.user-valid-page .interactive-demo{margin-top:2rem}.user-valid-page .interactive-demo h2{text-align:center;margin-bottom:1rem;color:var(--text)}.user-valid-page .demo-instructions{text-align:center;color:var(--text-secondary);margin-bottom:2rem;line-height:1.7}.user-valid-form{max-width:400px;margin:0 auto;padding:2rem;background:var(--card-bg);border:1px solid var(--border);border-radius:12px;display:flex;flex-direction:column;gap:1.5rem}.field-wrapper{display:flex;flex-direction:column;gap:.5rem}.field-wrapper label{font-size:.9rem;font-weight:500;color:var(--text)}.input-field{padding:.75rem 1rem .75rem 2.5rem;border:2px solid var(--border);border-radius:8px;font-size:1rem;font-family:inherit;background:var(--bg);color:var(--text);background-repeat:no-repeat;background-position:.75rem center;background-size:1.25rem}.input-field:focus{outline:2px solid var(--accent);outline-offset:2px}.input-field:user-valid{border-color:var(--success);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2322c55e'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E")}.error-hint{display:none;font-size:.85rem;color:#e74c3c}.input-field:user-invalid+.error-hint{display:block;animation:slideIn .2s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@supports not selector(:user-valid){.input-field:valid{border-color:var(--success);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2322c55e'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E")}.input-field:invalid:not(:placeholder-shown)+.error-hint{display:block;animation:slideIn .2s ease-out}}@media(max-width:768px){.user-valid-page .page-header h1{font-size:2rem}}.style-queries-page{max-width:900px;margin:0 auto}.style-queries-page .page-header{text-align:center;padding:2rem 0;margin-bottom:3rem}.style-queries-page .page-header h1{font-size:3rem;margin-bottom:1rem;color:var(--text)}.style-queries-page .subtitle{font-size:1.25rem;color:var(--text-secondary)}.style-queries-page .demo-section{display:flex;flex-direction:column;gap:2rem;margin-bottom:4rem}.style-queries-page .code-section{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:2rem}.style-queries-page .code-section h2{margin-bottom:1rem;color:var(--text)}.style-queries-page .code-block{background:light-dark(#000,#0a0a0a);border-radius:8px;padding:1.5rem;overflow-x:auto;margin:0}.style-queries-page .code-block code{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9rem;line-height:1.6;color:light-dark(#e8e8e8,#e0e0e0);display:block;white-space:pre}.style-queries-page .explanation-section{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:2rem}.style-queries-page .explanation-section h2{margin-bottom:1.5rem;color:var(--text)}.style-queries-page .feature-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1.5rem}.style-queries-page .feature-list li{padding-left:2rem;position:relative;color:var(--text-secondary);line-height:1.7}.style-queries-page .feature-list li:before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700;font-size:1.2rem}.style-queries-page .feature-list code{background:var(--bg);padding:.1em .35em;border-radius:4px;font-size:.9em}.style-queries-page .interactive-demo{margin-top:2rem}.style-queries-page .interactive-demo h2{text-align:center;margin-bottom:1rem;color:var(--text)}.style-queries-page .demo-instructions{text-align:center;color:var(--text-secondary);margin-bottom:2rem;line-height:1.7}.style-queries-page .demo-instructions code{background:var(--bg);padding:.1em .35em;border-radius:4px;font-size:.9em}.card-wrapper{--component-state: "idle";container-type:inline-size;container-name:card;background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:1.5rem;transition:border-color .2s ease}.card-wrapper:hover{--component-state: "active";border-color:var(--accent)}.card-wrapper.state-idle{--component-state: "idle"}.card-wrapper.state-active{--component-state: "active";border-color:var(--accent)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.card-header h4{margin:0;font-size:1.1rem;color:var(--text)}.dot-indicator{width:12px;height:12px;border-radius:50%;background:var(--border);transition:background .2s,box-shadow .2s}@container card style(--component-state: "active"){.dot-indicator{background-color:#22c55e;box-shadow:0 0 10px #22c55e}}.card-wrapper:hover .dot-indicator,.card-wrapper.state-active .dot-indicator{background-color:#22c55e;box-shadow:0 0 10px #22c55e}.style-demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin-bottom:3rem}.comparison-section{padding-top:2rem;border-top:1px solid var(--border)}.comparison-section h3{text-align:center;margin-bottom:.5rem;color:var(--text)}.comparison-section .demo-hint{text-align:center;font-size:.9rem;color:var(--text-secondary);margin-bottom:1.5rem}.comparison-section .demo-hint code{background:var(--bg);padding:.1em .35em;border-radius:4px}.comparison-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;max-width:500px;margin:0 auto}.comparison-cards .card-wrapper{cursor:default}.comparison-cards .card-wrapper:hover{--component-state: "idle";border-color:var(--border)}.comparison-cards .card-wrapper.state-active:hover{--component-state: "active";border-color:var(--accent)}.style-queries-page .card-wrapper p{margin:0;font-size:.9rem;color:var(--text-secondary);line-height:1.5}@media(max-width:768px){.style-queries-page .page-header h1{font-size:2rem}.comparison-cards{grid-template-columns:1fr}}.app{min-height:100vh;display:flex;flex-direction:column}.main-nav{background-color:light-dark(#ffffff,#0a0a0a);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:light-dark(rgba(255,255,255,.9),rgba(10,10,10,.9))}.nav-container{max-width:1200px;margin:0 auto;padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;gap:2rem}.nav-logo{font-size:1.25rem;font-weight:700;color:var(--accent);text-decoration:none}.nav-links{display:flex;list-style:none;margin:0;padding:0;gap:1.5rem;flex-wrap:wrap}.nav-links a{color:var(--text-secondary);text-decoration:none;padding:.5rem 1rem;border-radius:6px;transition:all .2s;position:relative}.nav-links a:hover{color:var(--accent);background-color:light-dark(#f0f0f0,#1a1a1a)}.nav-links a.active{color:var(--accent);background-color:light-dark(#e8f2ff,#1a2a3a)}.main-content{flex:1;max-width:1200px;width:100%;margin:0 auto;padding:2rem}@media(max-width:768px){.nav-container{flex-direction:column;align-items:flex-start;padding:1rem}.nav-links{width:100%;flex-direction:column;gap:.5rem}.main-content{padding:1rem}}