@font-face{font-family:Nunito;src:url(/fonts/Nunito/Nunito-VariableFont_wght.woff2) format("woff2-variations");font-weight:200 1000;font-style:normal;font-display:swap}@font-face{font-family:Nunito;src:url(/fonts/Nunito/Nunito-Italic-VariableFont_wght.woff2) format("woff2-variations");font-weight:200 1000;font-style:italic;font-display:swap}@font-face{font-family:Source Code Pro;src:url(/fonts/Source_Code_Pro/SourceCodePro-VariableFont_wght.woff2) format("woff2-variations");font-weight:200 900;font-style:normal;font-display:swap}@font-face{font-family:Source Code Pro;src:url(/fonts/Source_Code_Pro/SourceCodePro-Italic-VariableFont_wght.woff2) format("woff2-variations");font-weight:200 900;font-style:italic;font-display:swap}:root{--warm-orange: hsl(32, 76%, 37%);--soft-orange: hsl(35, 83%, 74%);--peach-background: hsl(32, 41%, 90%);--cream-white: hsl(32, 100%, 98%);--dark-brown: hsl(28, 45%, 16%);--medium-brown: hsl(22, 22%, 34%);--light-brown: hsl(24, 18%, 53%);--hybit-gray: hsl(220, 12%, 57%);--teal-accent: hsl(168, 28%, 44%);--success-green: hsl(102, 41%, 56%);--warning-red: hsl(349, 71%, 64%);--teal-darker: hsl(168, 34%, 33%);--orange-darker: hsl(32, 61%, 35%);--orange-darkest: hsl(32, 64%, 31%);--success-darker: hsl(142, 76%, 36%);--success-green-accessible: hsl(102, 37%, 43%);--error-darker: hsl(0, 73%, 50%);--success-bg-light: hsl(138, 76%, 97%);--error-bg-light: hsl(0, 86%, 97%);--teal-bg-light: hsl(168, 56%, 89%);--warning-bg-light: hsl(48, 100%, 90%);--warning-border: hsl(45, 100%, 51%);--code-bg-dark: hsl(0, 0%, 18%);--code-bg-darker: hsl(217, 33%, 17%);--code-text-light: hsl(60, 30%, 96%);--code-text-lighter: hsl(210, 40%, 91%);--ui-border-light: hsl(0, 0%, 87%);--text-muted: hsl(0, 0%, 40%);--teal-hover: hsl(168, 39%, 30%);--shadow-sm: 0 4px 6px hsl(28, 45%, 16% / .06);--shadow-md: 0 8px 12px hsl(28, 45%, 16% / .08);--radius: 16px;--radius-lg: 24px;--readable-width: 75ch;--readable-width-narrow: 65ch;--readable-width-wide: 85ch;--demo-bg: hsl(0, 0%, 100%);--demo-text: hsl(0, 0%, 10%);--demo-border: hsl(0, 0%, 85%);--demo-accent: hsl(210, 100%, 30%);--demo-success: hsl(142, 70%, 35%);--demo-warning: hsl(45, 100%, 30%);--demo-error: hsl(0, 75%, 45%);--demo-gray-bg: hsl(0, 0%, 96%);--demo-gray-text: hsl(0, 0%, 18%);--demo-gray-muted: hsl(0, 0%, 33%);--demo-gray-helper: hsl(0, 0%, 40%);--demo-gray-border: hsl(0, 0%, 88%);--demo-gray-light: hsl(0, 0%, 98%);--demo-error-red: hsl(0, 65%, 51%);--demo-success-green: hsl(123, 43%, 30%);--demo-success-border: hsl(122, 39%, 49%);--demo-success-bg: hsl(122, 39%, 93%);--demo-success-text: hsl(123, 44%, 33%);--demo-success-tint: hsl(140, 33%, 95%);--demo-link-blue: hsl(207, 79%, 35%);--demo-link-visited: hsl(211, 76%, 30%);--demo-warning-orange: hsl(22, 100%, 45%);--demo-warning-border: hsl(36, 100%, 50%);--demo-warning-bg: hsl(36, 100%, 94%);--demo-cf-gray-bg: hsl(0, 0%, 96%);--demo-cf-gray-text: hsl(0, 0%, 18%);--demo-cf-gray-dark: hsl(0, 0%, 10%);--demo-cf-gray-label: hsl(0, 0%, 20%);--demo-cf-gray-muted: hsl(0, 0%, 33%);--demo-cf-gray-helper: hsl(0, 0%, 40%);--demo-cf-gray-border: hsl(0, 0%, 88%);--demo-cf-gray-light: hsl(0, 0%, 98%);--demo-cf-gray-border-dark: hsl(0, 0%, 60%);--demo-cf-blue: hsl(207, 79%, 35%);--demo-cf-blue-hover: hsl(207, 82%, 32%);--demo-cf-blue-active: hsl(211, 88%, 28%);--demo-cf-gold-bg: hsl(45, 100%, 95%);--demo-cf-orange-border: hsl(36, 100%, 50%);--demo-cf-green-bg: hsl(122, 39%, 93%);--demo-cf-green-border: hsl(122, 39%, 49%);--demo-cf-green-text: hsl(123, 44%, 33%);--demo-cf-red-bg: hsl(0, 65%, 97%);--demo-cf-red-text: hsl(0, 68%, 47%);--demo-fe-cream-bg: var(--cream-white);--demo-fe-orange-border: var(--warm-orange);--demo-fe-heading: var(--dark-brown);--demo-fe-body: hsl(0, 0%, 40%);--demo-fe-label: var(--dark-brown);--demo-fe-slider-track: hsl(0, 0%, 87%);--demo-fe-slider-thumb: var(--warm-orange);--demo-fe-slider-thumb-border: hsl(0, 0%, 100%);--demo-fe-slider-focus: var(--teal-darker);--demo-fe-shadow-light: hsl(0, 0%, 0%, .15);--demo-fe-shadow-medium: hsl(0, 0%, 0%, .2);--demo-fe-btn-bg: hsl(0, 0%, 100%);--demo-fe-btn-text: var(--dark-brown);--demo-fe-btn-hover-bg: var(--warm-orange);--demo-fe-btn-hover-text: hsl(0, 0%, 100%);--demo-fe-perf-excellent: hsl(120, 48%, 33%);--demo-fe-perf-good: hsl(93, 40%, 39%);--demo-fe-perf-moderate: hsl(32, 95%, 44%);--demo-fe-perf-expensive: hsl(0, 61%, 48%);--demo-fe-code-bg: hsl(0, 0%, 18%);--demo-fe-code-text: hsl(60, 30%, 96%);--demo-fe-code-tag: var(--warm-orange);--demo-fe-code-attr: hsl(172, 30%, 51%);--demo-fe-code-value: hsl(27, 100%, 70%);--demo-fe-code-comment: hsl(30, 20%, 72%);--demo-fe-copy-btn-bg: hsl(36, 64%, 35%);--demo-fe-copy-btn-hover: hsl(36, 64%, 30%);--demo-fe-copy-btn-copied: hsl(120, 48%, 33%);--demo-fe-copy-btn-text: hsl(0, 0%, 100%);--demo-gb-cream-bg: var(--cream-white);--demo-gb-white-bg: hsl(0, 0%, 100%);--demo-gb-orange-border: var(--warm-orange);--demo-gb-gray-border: hsl(0, 0%, 88%);--demo-gb-heading: var(--dark-brown);--demo-gb-body-muted: hsl(0, 0%, 40%);--demo-gb-white-text: hsl(0, 0%, 100%);--demo-gb-tab-bg: hsl(0, 0%, 100%);--demo-gb-tab-text: var(--warm-orange);--demo-gb-tab-hover-bg: var(--peach-background);--demo-gb-tab-active-bg: hsl(36, 64%, 35%);--demo-gb-tab-active-text: hsl(0, 0%, 100%);--demo-gb-btn-primary-bg: hsl(36, 64%, 35%);--demo-gb-btn-primary-hover: hsl(36, 64%, 30%);--demo-gb-btn-secondary-bg: var(--teal-darker);--demo-gb-btn-secondary-hover: hsl(166, 34%, 28%);--demo-gb-btn-remove-bg: hsl(6, 78%, 57%);--demo-gb-btn-remove-hover: hsl(6, 63%, 45%);--demo-gb-shadow-medium: hsl(0, 0%, 0%, .15);--demo-gb-code-bg: hsl(0, 0%, 18%);--demo-gb-code-text: hsl(60, 30%, 96%);--demo-gb-code-tag: var(--warm-orange);--demo-gb-code-attr: hsl(172, 30%, 51%);--demo-gb-code-value: hsl(27, 100%, 70%);--demo-gb-code-comment: hsl(30, 20%, 72%);--demo-gb-copy-btn-bg: var(--warm-orange);--demo-gb-copy-btn-hover: hsl(36, 60%, 56%);--demo-gb-copy-btn-copied: hsl(145, 63%, 42%);--demo-gb-tips-bg: hsl(37, 100%, 94%);--demo-gb-tips-border: var(--warm-orange);--demo-gb-warning-bg: hsl(48, 100%, 90%);--demo-gb-warning-border: hsl(45, 100%, 51%);--demo-gb-warning-text: hsl(45, 95%, 27%);--demo-gb-spinner-code-bg: hsl(0, 0%, 98%);--demo-scb-body-text: hsl(0, 0%, 18%);--demo-scb-heading: hsl(0, 0%, 10%);--demo-scb-text-muted: hsl(0, 0%, 40%);--demo-scb-intro-text: hsl(0, 0%, 33%);--demo-scb-body-bg: hsl(0, 0%, 96%);--demo-scb-card-bg: hsl(0, 0%, 100%);--demo-scb-light-bg: hsl(0, 0%, 98%);--demo-scb-toggle-bg: hsl(0, 0%, 94%);--demo-scb-border-default: hsl(0, 0%, 88%);--demo-scb-border-light: hsl(0, 0%, 85%);--demo-scb-pass-border: hsl(122, 39%, 49%);--demo-scb-pass-text: hsl(123, 46%, 30%);--demo-scb-pass-bg: hsl(120, 38%, 93%);--demo-scb-fail-border: hsl(4, 90%, 58%);--demo-scb-fail-text: hsl(0, 69%, 46%);--demo-scb-fail-bg: hsl(0, 100%, 96%);--demo-scb-interactive: hsl(207, 77%, 40%);--demo-scb-interactive-hover: hsl(207, 77%, 35%);--demo-scb-suggestion-border: hsl(36, 100%, 50%);--demo-scb-suggestion-text: hsl(18, 100%, 45%);--demo-scb-suggestion-bg: hsl(37, 100%, 94%);--demo-scb-copied-bg: hsl(123, 46%, 34%);--demo-scb-dark-bg: hsl(0, 0%, 10%);--demo-scb-dark-text: hsl(0, 0%, 95%);--demo-scb-dark-surface: hsl(0, 0%, 12%);--demo-scb-dark-border: hsl(0, 0%, 25%);--demo-scb-shadow: hsl(0, 0%, 0%, .1);--demo-scb-shadow-thumb: hsl(0, 0%, 0%, .2)}.gradient-builder .radio-group{display:flex;gap:1rem;flex-wrap:wrap}.gradient-builder .radio-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;padding:.5rem;min-height:44px}.gradient-builder .radio-label input[type=radio]{cursor:pointer;width:20px;height:20px}.gradient-builder input[type=range]{min-height:44px;cursor:pointer}.gradient-builder .hsl-input{min-height:44px;padding:.5rem;font-size:1rem}.gradient-builder .color-picker{min-width:60px;min-height:60px}.gradient-builder .slider-control,.gradient-builder .color-input-group{margin:.5rem 0}.status-color-builder .bg-toggle-controls{margin-top:1rem;padding:.75rem;background:var(--demo-scb-toggle-bg);border-radius:4px}.status-color-builder .bg-toggle-controls>label:first-of-type{font-weight:600;margin-right:1rem}.status-color-builder .bg-toggle-controls>label:nth-of-type(2){margin-right:1rem}.status-color-builder .bg-toggle-controls>span{margin-left:1rem;font-size:.9rem;color:var(--demo-scb-text-muted)}.status-color-builder .preview-intro{margin-bottom:1rem;font-size:.95rem;color:var(--demo-scb-intro-text)}.status-color-builder .suggestion{display:none}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Nunito,system-ui,sans-serif;background:linear-gradient(135deg,var(--peach-background) 0%,hsl(36,50%,94%) 100%);color:var(--dark-brown);line-height:1.7;min-height:100vh}.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:var(--dark-brown);color:var(--cream-white);padding:.5rem .75rem;border-radius:4px;z-index:9999;text-decoration:none;font-weight:600}.header{background:var(--cream-white);border-radius:0 0 var(--radius-lg) var(--radius-lg);box-shadow:var(--shadow-sm);padding:clamp(1rem,4vw,2rem);margin-bottom:3rem;text-align:center;position:relative;overflow:hidden}.header:before{content:"";position:absolute;top:-50%;right:-10%;width:min(400px,150vw);height:min(400px,150vw);background:radial-gradient(circle,var(--warm-orange) 0%,transparent 70%);opacity:.08}.header-content{position:relative;z-index:1;max-width:1200px;margin:0 auto}.hybit-welcome{display:flex;align-items:center;justify-content:center;gap:2rem;flex-wrap:wrap;margin-bottom:2rem}.hybit-avatar{width:120px;height:120px;background:linear-gradient(135deg,var(--hybit-gray) 0%,hsl(220,14%,66%) 100%);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden;box-shadow:var(--shadow-md);position:relative}.hybit-avatar img{width:100%;height:100%;object-fit:cover;display:block}.hybit-avatar:after{content:"🟠";position:absolute;top:-10px;right:-10px;font-size:1.5rem}@keyframes gentle-float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}@keyframes spin360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.hybit-avatar.hybit-mode{animation:spin360 2s ease-in-out}.hybit-insight-dialog{max-width:600px;width:90%;margin:auto;border:3px solid var(--warm-orange);border-radius:var(--radius-lg);padding:0;box-shadow:0 20px 60px hsl(28,45%,16% / .25);background:var(--cream-white);inset:0}.hybit-insight-dialog::backdrop{background:hsl(28,45%,16% / .5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;background:linear-gradient(135deg,var(--soft-orange) 0%,var(--warm-orange) 100%);border-radius:var(--radius-lg) var(--radius-lg) 0 0}.hybit-badge{background:#fff;border-radius:50%;padding:.5rem;box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center}.hybit-badge img{border-radius:50%}.dialog-close{background:#ffffffe6;border:none;border-radius:50%;width:36px;height:36px;font-size:clamp(20px,3vw,24px);line-height:1;cursor:pointer;transition:all .2s;color:var(--dark-brown);font-weight:700}.dialog-close:hover{background:#fff;transform:scale(1.1)}.dialog-content{padding:2rem;max-height:60vh;overflow-y:auto}.dialog-content h3{margin-top:0;margin-bottom:1rem;color:var(--dark-brown)}.dialog-content p{margin-bottom:1rem;line-height:1.7}.dialog-content code{background:hsl(32,76%,63% / .15);padding:.2rem .5rem;border-radius:4px;font-family:monospace;font-size:clamp(.85em,1.5vw,.9em);color:var(--dark-brown);word-break:break-word;overflow-wrap:break-word}.dialog-content ul{margin:1rem 0;padding-left:1.5rem;list-style-type:disc}.dialog-content li{margin-bottom:.5rem;line-height:1.6}h1{color:var(--warm-orange);font-size:clamp(1.75rem,4vw + 1rem,2.5rem);font-weight:800;margin-bottom:.5rem}h2{font-size:clamp(1.3rem,3vw + .5rem,1.8rem);font-weight:700}h3{font-size:clamp(1.1rem,2.5vw + .5rem,1.5rem);font-weight:600}h4{font-size:clamp(1rem,2vw + .5rem,1.25rem);font-weight:600}.subtitle{color:var(--medium-brown);font-size:clamp(1rem,2vw + .5rem,1.25rem);margin-bottom:1rem}.intro-box{background:var(--peach-background);border-radius:var(--radius);padding:1.5rem;margin:2rem auto;max-width:800px;border:2px solid var(--soft-orange);display:flex;gap:1.5rem;align-items:flex-start;text-align:left}.intro-hap-image{flex-shrink:0;border-radius:var(--radius);box-shadow:var(--shadow-sm)}.intro-text{flex:1}.hap-note-callout{background:linear-gradient(135deg,var(--cream-white) 0%,var(--peach-background) 100%);border-radius:var(--radius);padding:1.5rem;margin:2rem auto;border:2px solid var(--warm-orange);display:flex;gap:1.5rem;align-items:center;justify-content:center;max-width:900px}.hap-note-image{flex-shrink:0;border-radius:var(--radius);box-shadow:var(--shadow-sm)}.hap-note-content{flex:1}.hap-note-content h3{color:var(--dark-brown);margin-bottom:.5rem;font-size:clamp(1.1rem,2vw + .5rem,1.25rem);margin-inline:auto}.hap-note-content p{color:var(--medium-brown);line-height:1.6;margin-inline:auto}.hap-info-grid{background:linear-gradient(135deg,var(--cream-white) 0%,var(--peach-background) 100%);border-radius:var(--radius);padding:1.5rem;margin:2rem auto;border:2px solid var(--warm-orange);max-width:900px}.hap-info-grid h4{color:var(--dark-brown);margin-top:1.5rem;margin-bottom:.75rem;font-size:clamp(1rem,2vw + .5rem,1.15rem)}.hap-info-grid h4:first-child{margin-top:0}.hap-info-grid ul{list-style-position:outside;padding-left:1.5rem;margin:.5rem 0}.hap-info-grid li{margin-bottom:.5rem;line-height:1.6;color:var(--dark-brown)}.hap-info-grid p{color:var(--dark-brown);line-height:1.6;margin-bottom:.75rem}.hap-info-grid p:last-child{margin-bottom:0}.hap-info-grid strong{color:var(--dark-brown);font-weight:700}.lighthouse-checks-grid{display:grid;grid-template-columns:auto 1fr;gap:1rem 1.5rem;background:linear-gradient(135deg,var(--cream-white) 0%,var(--peach-background) 100%);border-radius:var(--radius);padding:1.5rem;margin:2rem auto;border:2px solid var(--warm-orange);max-width:900px;align-items:start}.check-type{font-weight:700;color:var(--dark-brown);font-size:clamp(.95rem,2vw,1.05rem);padding-right:.5rem}.check-reason{color:var(--dark-brown);line-height:1.6}@media(max-width:768px){.lighthouse-checks-grid{grid-template-columns:1fr;gap:1rem}.check-type{padding-right:0;padding-bottom:.25rem;border-bottom:2px solid var(--soft-orange)}.check-reason{padding-bottom:1rem;margin-bottom:.5rem}.check-reason:last-of-type{padding-bottom:0;margin-bottom:0}}@media(min-width:769px){.intro-box{flex-direction:row-reverse}}@media(max-width:768px){.intro-box,.hap-note-callout{flex-direction:column;align-items:center;justify-content:center;text-align:center}.hap-note-callout ul{text-align:left}.intro-hap-image,.hap-note-image{margin-bottom:1rem}}.bordered-box{margin-top:1.5rem;padding:1rem;border:2px solid;border-color:var(--peach-background);border-radius:8px}.nav-tabs{display:flex;justify-content:center;gap:1rem;margin:2rem 0;flex-wrap:wrap}.nav-tab{padding:.75rem 1.5rem;min-height:80px;background:var(--cream-white);color:var(--dark-brown);border:2px solid var(--soft-orange);border-radius:var(--radius);font-size:clamp(.9rem,2vw + .5rem,1.2rem);font-weight:600;cursor:pointer;transition:all .3s ease}.nav-tab:hover{background:var(--soft-orange);transform:translateY(-2px);box-shadow:var(--shadow-sm)}.nav-tab.active{background:var(--warm-orange);color:var(--peach-background);border-color:var(--warm-orange)}.content-container{max-width:1200px;margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}.tab-panel{display:none;animation:fadeIn .5s ease}.tab-panel.active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.overview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:2rem;margin:2rem 0}.insight-card{background:var(--cream-white);border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow-md);transition:all .3s ease;border:2px solid transparent}.insight-card:hover{box-shadow:var(--shadow-md);border-color:var(--soft-orange);transform:translateY(-4px)}.insight-card h3{color:var(--dark-brown);margin-bottom:1rem;font-size:clamp(1.2rem,2.5vw + .5rem,1.5rem);display:flex;align-items:center;gap:.5rem}.insight-icon{font-size:clamp(1.2rem,2.5vw + .5rem,1.5rem)}.topic-section{background:var(--cream-white);border-radius:var(--radius-lg);padding:2rem;margin:2rem 0;box-shadow:var(--shadow-md)}.topic-header{display:flex;align-items:center;gap:1rem;margin-bottom:2rem;padding-bottom:1rem;border-bottom:3px solid var(--peach-background)}.topic-icon{width:60px;height:60px;background:var(--soft-orange);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:clamp(1.2rem,2.5vw + .5rem,1.5rem)}.topic-title{flex:1}.topic-title h2{color:var(--dark-brown);font-size:clamp(1.4rem,3.5vw + .5rem,1.8rem);margin-bottom:.25rem}.topic-author{color:var(--medium-brown);font-style:italic}.analysis-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:1.5rem;margin:2rem 0}.analysis-point{background:var(--peach-background);border-radius:var(--radius);padding:1.5rem;border-left:4px solid var(--warm-orange)}.analysis-point h3{color:var(--dark-brown);margin-bottom:.5rem;font-size:clamp(1rem,2vw + .5rem,1.1rem)}.topic-section p,.content-section p{max-width:var(--readable-width)}.analysis-point p{max-width:var(--readable-width-narrow)}.intro-text p{max-width:var(--readable-width-wide)}.prompt-box{background:linear-gradient(135deg,#4c4038,#6a5244);color:var(--cream-white);border-radius:var(--radius);padding:1.5rem;margin:1.5rem 0;font-family:Courier New,monospace;position:relative;overflow-x:auto;overflow-y:hidden;word-break:break-word;overflow-wrap:break-word}.prompt-box:before{content:"🟠";position:absolute;top:1rem;right:1rem;font-size:1.5rem;opacity:.5}.prompt-label{font-size:clamp(.8rem,1.5vw,.875rem);opacity:.8;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:1px}.prompt-box ol,.prompt-box ul{padding-left:1.5rem;margin:.5rem 0}.prompt-box li{margin-bottom:.5rem;line-height:1.6}.interactive-demo{max-width:var(--readable-width);margin-inline:auto}.tips-container{background:var(--cream-white);border-radius:var(--radius-lg);padding:2rem;margin:2rem 0;box-shadow:var(--shadow-md)}.tip-card{background:linear-gradient(135deg,var(--teal-accent) 0%,hsl(168,32%,44%) 100%);color:var(--cream-white);border-radius:var(--radius);padding:1.5rem;margin:1rem 0;display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:start}.tip-number{width:2.5rem;height:2.5rem;background:var(--cream-white);color:var(--teal-accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:clamp(1rem,2vw + .5rem,1.2rem);flex-shrink:0}.station-description{margin-top:.5rem;color:var(--medium-brown)}.station-cta{margin-top:1rem;font-weight:600;color:var(--teal-darker)}.footer-tagline{color:var(--medium-brown);margin-top:.5rem}.footer{background:var(--cream-white);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:2rem;margin-top:4rem;text-align:center;box-shadow:var(--shadow-md)}.footer-copyright{display:flex;align-items:flex-start;gap:1rem;margin-top:1.5rem;padding-top:1.5rem;border-top:2px solid var(--peach-background);text-align:left;max-width:800px;margin-left:auto;margin-right:auto}.footer-hybit{width:80px;height:80px;border-radius:50%;flex-shrink:0;box-shadow:var(--shadow-sm)}.footer-copyright p{color:var(--medium-brown);font-size:clamp(.85rem,1.5vw,.9rem);margin:.25rem 0;line-height:1.5}.image-comparison{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin:2rem 0;padding:2rem;background:var(--peach-background);border-radius:var(--radius);border:2px solid var(--soft-orange)}.topic-image{width:100%;max-width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow-md);border:3px solid var(--cream-white);transition:all .3s ease}.topic-image:hover{transform:scale(1.02);box-shadow:var(--shadow-md)}.image-caption{text-align:center;margin-top:1rem;padding:1rem;background:var(--cream-white);border-radius:var(--radius);border-left:4px solid var(--warm-orange)}.image-caption h4{color:var(--dark-brown);margin-bottom:.5rem;font-size:clamp(1rem,2vw + .5rem,1.1rem)}.image-caption p{color:var(--medium-brown);font-size:clamp(.85rem,1.5vw,.9rem)}.warning-box{background:linear-gradient(135deg,#fff5cc,#ffeda3);border:2px solid hsl(40,80%,73%);border-left:6px solid hsl(32,76%,63%);border-radius:var(--radius);padding:1.5rem;margin:2rem 0}.warning-box h3{color:var(--dark-brown);margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.warning-box ul{list-style-position:inside;margin-top:1rem;color:var(--dark-brown)}.warning-box li{margin:.5rem 0}.try-it-callout{background-color:#eef2f6;border:2px solid hsl(210,40%,70%);border-left:4px solid hsl(210,70%,50%);border-radius:6px;padding:1rem 1.25rem;margin:1.5rem 0}.try-it-callout h3{margin:0 0 .5rem;font-size:1.05rem;color:#2e4d6b}.try-it-callout p{margin:.25rem 0}.try-it-callout a{color:#2273c3;font-weight:700}.try-it-callout a:hover{text-decoration:underline}.demo-banner{position:sticky;top:0;z-index:100;background-color:#1f3347;color:#f2f2f2;padding:.5rem 1rem;display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.9rem;border-bottom:2px solid hsl(32,76%,63%)}.demo-banner-icon{font-size:1.1rem}.demo-banner-link{color:#e8a559;font-weight:700;text-decoration:none}.demo-banner-link:hover{text-decoration:underline}.single-image-container{text-align:center;margin:2rem 0;padding:2rem;background:var(--peach-background);border-radius:var(--radius);border:2px solid var(--soft-orange)}.page-navigation{max-width:1200px;margin:2rem auto;padding:0 2rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}.page-navigation.top-nav{margin-top:1rem;margin-bottom:1rem}.page-navigation.bottom-nav{margin-top:3rem;margin-bottom:2rem;padding-top:2rem;border-top:2px solid var(--soft-orange)}.nav-link{padding:.75rem 1.5rem;background:var(--cream-white);color:var(--dark-brown);text-decoration:none;border:2px solid var(--soft-orange);border-radius:var(--radius);font-weight:600;transition:all .3s ease;display:inline-block}.nav-link:hover{background:var(--soft-orange);transform:translateY(-2px);box-shadow:var(--shadow-sm)}.nav-link.hub-link{background:var(--soft-orange);border-color:var(--soft-orange)}.nav-link.hub-link:hover{background:var(--warm-orange);color:var(--peach-background);border-color:var(--warm-orange)}.page-position{color:var(--medium-brown);font-weight:600;font-size:clamp(.85rem,1.5vw,.9rem)}.content-section{margin:3rem 0}.section-heading-centered{text-align:center;color:var(--dark-brown);margin-bottom:2rem}.footer-reminder{color:var(--medium-brown);margin-top:.5rem}.stat-large{font-size:clamp(1.2rem,2.5vw + .5rem,1.5rem);font-weight:700;color:var(--orange-darker);margin:.5rem 0}.stat-success{font-size:clamp(1.5rem,3.5vw + .5rem,2rem);font-weight:800;color:var(--success-green-accessible);margin:1rem 0}.station-card-link{text-decoration:none;color:inherit}.code-display{padding:.75rem;border-radius:8px;margin:1rem 0;font-family:monospace;font-size:clamp(.8rem,1.5vw,.85rem);overflow-x:auto;word-break:break-word;overflow-wrap:break-word}code,pre{word-break:break-word;overflow-wrap:break-word}pre{white-space:pre-wrap;overflow-x:auto}.read-length{max-width:var(--readable-width);margin-inline:auto}.mt-0-5{margin-top:.5rem}.mt-1{margin-top:1rem}.mt-1-5{margin-top:1.5rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}.mb-0-5{margin-bottom:.5rem}.mb-1{margin-bottom:1rem}.mb-1-5{margin-bottom:1.5rem}.mb-2{margin-bottom:2rem}.text-bold{font-weight:700;font-size:1.01em}.text-left{text-align:left}.content-box{padding:1.5rem;background:#fff;border-radius:16px}.copy-btn{position:absolute;top:10px;right:1rem;background:var(--teal-darker);color:#fff;border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer;font-weight:600;transition:all .2s ease;z-index:10}.copy-btn:hover{background:#2f6a5e;transform:translateY(-1px)}.display-button{padding:.75rem 1.5rem;background:var(--cream-white);color:var(--dark-brown);border:2px solid var(--soft-orange);border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s ease;font-size:clamp(.9rem,2vw,1rem)}.display-button.active{background:var(--warm-orange);color:var(--peach-background);border-color:var(--orange-darkest)}.display-button:hover{background:var(--soft-orange);transform:translateY(-1px)}.timeline-step{padding:1rem;background:var(--cream-white);border-radius:8px;margin:.5rem 0;border-left:4px solid var(--warm-orange)}.timeline-step.timeline-foit,.timeline-step.timeline-good,.timeline-step.timeline-fout{color:var(--dark-brown)}.loading-example{background:var(--peach-background);padding:1.5rem;border-radius:8px;margin:1rem 0;border:2px solid var(--soft-orange);color:var(--dark-brown)}.support-yes{color:var(--success-darkest);font-weight:700}.total-size{padding:1rem;background:var(--teal-darker);color:#fff;text-align:center;font-weight:700;font-size:1.25rem;border-radius:4px;margin-top:1rem}.device-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin:2rem 0}.device-frame{border:3px solid var(--medium-brown);border-radius:16px;padding:1rem;box-shadow:0 4px 12px hsl(0,0%,0% / .1);background:#fff}.device-frame h4{text-align:center;color:var(--dark-brown);margin-bottom:.5rem}.device-frame .device-label{text-align:center;font-size:clamp(.85rem,1.5vw,.9rem);color:var(--medium-brown);margin-bottom:1rem}.device-image{width:100%;height:100%;object-fit:cover;transition:all .5s ease}.device-caption{margin-top:.5rem;font-size:clamp(.8rem,1.5vw,.85rem);color:var(--medium-brown);text-align:center}.demo-grid-3col{grid-template-columns:repeat(3,1fr)}.demo-button-container{text-align:center;margin:2rem 0}.demo-button{padding:1rem 2rem;font-size:clamp(1rem,2vw + .5rem,1.1rem);background:var(--teal-darker);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600;transition:all .3s ease}.demo-button:hover{background:#4c9486;transform:translateY(-2px);box-shadow:var(--shadow-sm)}.demo-status{color:var(--medium-brown);font-weight:600}.aspect-ratio-16-9{aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:#f0f0f0}.aspect-ratio-4-3{aspect-ratio:4/3;overflow:hidden;border-radius:8px;background:#f0f0f0}.aspect-ratio-9-16{aspect-ratio:9/16;overflow:hidden;border-radius:8px;background:#f0f0f0}@media(max-width:480px){.header{padding:1rem}.content-container{padding:0 1rem}.nav-tab{padding:.5rem 1rem;min-height:60px}.intro-box,.hap-note-callout{padding:1rem}.topic-section{padding:1.5rem}.page-navigation{padding:0 1rem}.tip-card{grid-template-columns:1fr;text-align:center}.tip-number{margin:0 auto 1rem}}@media(max-width:768px){.hybit-welcome{flex-direction:column}.analysis-grid{grid-template-columns:1fr}.nav-tabs{flex-direction:column;align-items:center}.nav-tab{width:100%;text-align:center}.image-comparison{grid-template-columns:1fr;gap:1rem}.demo-grid-3col{grid-template-columns:1fr}.page-navigation{flex-direction:column;gap:.75rem}.page-navigation.bottom-nav{gap:1rem}.nav-link{width:100%;text-align:center}.footer-copyright{flex-direction:column;align-items:center;text-align:center}.footer-hybit{margin-bottom:.5rem}}.demo-card-small,.demo-card-medium,.demo-card-large{border:2px solid var(--teal-accent);border-radius:8px}.demo-card-small{padding:1rem}.demo-card-medium{padding:1.5rem}.demo-card-large{padding:2rem}.demo-card-title{margin:0 0 .5rem;font-size:clamp(.85rem,1.5vw,.9rem)}.demo-card-title-large{margin:0 0 .75rem;font-size:clamp(1.1rem,2.5vw,1.3rem)}.demo-card-price{margin:0;font-weight:600;color:var(--orange-darkest)}.demo-card-price-medium{margin:0;font-weight:600;font-size:clamp(1.1rem,2vw,1.2rem);color:var(--orange-darkest)}.demo-card-price-large{margin:0;font-weight:600;font-size:clamp(1.3rem,2.5vw,1.5rem);color:var(--orange-darkest)}.demo-card-desc{margin:.5rem 0 0;font-size:clamp(.8rem,1.5vw,.85rem);color:var(--medium-brown)}.demo-card-desc-large{margin:1rem 0 0;font-size:clamp(.95rem,2vw,1.05rem)}.demo-card-label{margin-top:1rem;text-align:center;font-size:clamp(.8rem,1.5vw,.85rem);font-weight:600}.demo-card-medium .demo-card-label{margin-top:1.5rem}.demo-card-large .demo-card-label{margin-top:2rem}.code-highlight{color:var(--teal-accent);font-weight:600}.code-comment{font-style:italic}.image-credit{font-size:clamp(.7rem,1.2vw,.75rem);margin-top:.5rem;color:var(--medium-brown)}.stat-orange{color:var(--orange-darker)}.stat-teal{color:var(--teal-darker)}.stat-brown{color:var(--medium-brown)}.text-success{color:var(--success-darkest)}.text-error{color:var(--error-darker)}.list-inside{list-style-position:inside}.demo-container{background:var(--cream-white);border-radius:var(--radius-lg);padding:2rem;margin:2rem auto;max-width:900px;box-shadow:var(--shadow-md)}.demo-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-bottom:2rem}.color-input-group{display:flex;flex-direction:column;gap:.5rem}.color-input-group label{font-weight:600;color:var(--dark-brown);font-size:clamp(.9rem,2vw,1rem)}.color-picker-wrapper{display:flex;gap:.75rem;align-items:center}.color-picker-wrapper input[type=color]{width:60px;height:50px;border:2px solid var(--soft-orange);border-radius:8px;cursor:pointer;transition:all .2s ease}.color-picker-wrapper input[type=color]:hover{border-color:var(--warm-orange);transform:scale(1.05)}.color-picker-wrapper input[type=text]{flex:1;padding:.75rem;border:2px solid var(--soft-orange);border-radius:8px;font-family:Source Code Pro,monospace;font-size:clamp(.9rem,2vw,1rem);color:var(--dark-brown);background:var(--peach-background);transition:all .2s ease;text-transform:uppercase}.color-picker-wrapper input[type=text]:focus{outline:none;border-color:var(--warm-orange);box-shadow:0 0 0 3px hsl(32,76%,63% / .2)}.demo-preview{background:var(--peach-background);border-radius:var(--radius);padding:2rem;margin-bottom:2rem;border:2px solid var(--soft-orange);min-height:150px;display:flex;align-items:center;justify-content:center}.preview-text-sample{width:100%;text-align:center}.preview-text-sample p{margin:.75rem 0;max-width:100%}.preview-normal{font-size:1rem;font-weight:400}.preview-large{font-size:1.5rem;font-weight:400;margin-top:1.5rem}.demo-results{background:linear-gradient(135deg,var(--peach-background) 0%,var(--cream-white) 100%);border-radius:var(--radius);padding:1.5rem;margin-bottom:2rem}.result-ratio{text-align:center;padding-bottom:1.5rem;margin-bottom:1.5rem;border-bottom:2px solid var(--soft-orange)}.result-label{display:block;font-size:clamp(.9rem,2vw,1rem);color:var(--medium-brown);font-weight:600;margin-bottom:.5rem}.result-value{display:block;font-size:clamp(2rem,5vw,3rem);font-weight:800;color:var(--dark-brown);font-family:Source Code Pro,monospace}.result-compliance{display:grid;gap:1rem}.compliance-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:#fff;border-radius:8px;border:2px solid var(--soft-orange);flex-wrap:wrap;gap:.5rem}.compliance-item *{display:inline-block}.compliance-label{font-weight:600;color:var(--dark-brown);font-size:clamp(.85rem,1.8vw,.95rem);width:60%}.compliance-status{font-weight:600;font-size:clamp(.85rem,1.8vw,.95rem);display:flex;align-items:center;gap:.5rem;min-width:25%}.compliance-status.pass{color:var(--success-darkest-accessible)}.compliance-status.fail{color:var(--error-darker)}.status-icon{font-size:1.25rem;line-height:1}@media(max-width:768px){.demo-container{padding:1.5rem}.demo-controls{grid-template-columns:1fr}.compliance-item{flex-direction:column;text-align:center}.result-value{font-size:2.5rem}}@media(max-width:480px){.demo-container{padding:1rem}.color-picker-wrapper{flex-direction:column;align-items:stretch}.color-picker-wrapper input[type=color]{width:100%}}.line-length{max-width:1024px}.line-length-example{margin:2rem 0;padding:1.5rem;background:var(--peach-background);border-radius:var(--radius);border:2px solid var(--soft-orange)}.demo-label{font-size:clamp(1rem,2vw + .5rem,1.1rem);font-weight:700;color:var(--dark-brown);margin-bottom:1rem;text-align:center}.demo-container .line-narrow{max-width:30ch;margin:0 auto 1rem;padding:1rem;background:#fff;border-radius:8px;line-height:1.6}.demo-container .line-optimal{max-width:65ch;margin:0 auto 1rem;padding:1rem;background:#fff;border-radius:8px;line-height:1.6}.demo-container .line-wide{max-width:90ch;margin:0 auto 1rem;padding:1rem;background:#fff;border-radius:8px;line-height:1.6}.demo-container .hap-comment{font-style:italic;color:var(--orange-darkest);font-size:clamp(.9rem,1.8vw,1rem);text-align:center;margin:0;padding:.75rem;background:hsl(32,76%,63% / .1);border-radius:8px}.rem-px-demo{max-width:1024px}.slider-label{display:block;font-weight:600;color:var(--dark-brown);font-size:clamp(1rem,2vw,1.1rem);margin-bottom:1rem;text-align:center}#base-size-display{color:var(--orange-darkest);font-family:Source Code Pro,monospace}#font-size-slider{width:100%;height:8px;background:linear-gradient(to right,var(--soft-orange),var(--warm-orange));border-radius:8px;outline:none;-webkit-appearance:none;appearance:none;cursor:pointer}#font-size-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;background:var(--dark-brown);border:3px solid var(--warm-orange);border-radius:50%;cursor:pointer;transition:all .2s ease}#font-size-slider::-webkit-slider-thumb:hover{transform:scale(1.2);background:var(--warm-orange);color:var(--peach-background)}#font-size-slider::-moz-range-thumb{width:24px;height:24px;background:var(--dark-brown);border:3px solid var(--warm-orange);border-radius:50%;cursor:pointer;transition:all .2s ease}#font-size-slider::-moz-range-thumb:hover{transform:scale(1.2);background:var(--warm-orange);color:var(--peach-background)}.slider-help{text-align:center;color:var(--medium-brown);font-size:clamp(.85rem,1.8vw,.95rem);margin-top:.75rem;font-style:italic}.comparison-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:2rem}.comparison-column{display:flex;flex-direction:column;gap:1rem}.comparison-label{font-size:clamp(1rem,2vw,1.15rem);font-weight:700;color:var(--dark-brown);text-align:center;margin:0}.preview-box{background:#fff;border:2px solid var(--soft-orange);border-radius:var(--radius);padding:1.5rem;min-height:150px;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.px-text{font-size:16px;line-height:1.6;color:var(--dark-brown);text-align:center;margin:0}.rem-text{font-size:1rem;line-height:1.6;color:var(--dark-brown);text-align:center;margin:0}.demo-code{text-align:center;margin:0}.demo-code code{background:var(--peach-background);padding:.5rem 1rem;border-radius:8px;font-family:Source Code Pro,monospace;font-size:clamp(.85rem,1.8vw,.95rem);color:var(--dark-brown);border:1px solid var(--soft-orange)}@media(max-width:768px){.comparison-grid{grid-template-columns:1fr}}.calculator-container{background:var(--cream-white);border:2px solid var(--warm-orange);border-radius:8px;padding:1.5rem;margin:1.5rem 0}.calculator-inputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1.5rem}.input-group{display:flex;flex-direction:column}.input-group label{font-weight:600;margin-bottom:.5rem;color:var(--teal-darker)}.input-group input,.input-group select{padding:.5rem;border:1px solid var(--warm-orange);border-radius:4px;font-size:1rem}.scale-preview{display:grid;gap:1rem;margin:1.5rem 0}.scale-item{border-left:4px solid var(--warm-orange);padding-left:1rem}.scale-label{font-size:.875rem;color:var(--teal-darker);font-weight:600;margin-bottom:.25rem}.scale-value{font-family:Courier New,monospace;color:var(--orange-darkest);font-size:.875rem}.css-output{background:var(--code-bg-dark);color:var(--code-text-light);padding:1rem;border-radius:4px;font-family:Courier New,monospace;font-size:.875rem;overflow-x:auto;margin-top:1rem}.comparison-column.comparison-bad{border-color:var(--error-darker)}.comparison-column.comparison-good{border-color:var(--success-darkest)}.comparison-column{border:2px solid var(--warm-orange);border-radius:8px;padding:1.5rem}.comparison-column h3{margin-top:0;text-align:center}.random-h1{font-size:42px}.random-h2{font-size:28px}.random-h3{font-size:22px}.random-p{font-size:15px}.scale-h1{font-size:2.488rem}.scale-h2{font-size:2.074rem}.scale-h3{font-size:1.728rem}.scale-p{font-size:1rem}.rhythm-container{position:relative;padding:2rem;background:var(--cream-white);border-radius:8px;margin:1.5rem 0}.rhythm-grid{position:absolute;inset:0;background-image:repeating-linear-gradient(transparent,transparent 23px,hsl(13,100%,70% / .3) 23px,hsl(13,100%,70% / .3) 24px);pointer-events:none;opacity:0;transition:opacity .3s;border-radius:8px}.rhythm-grid.visible{opacity:1}.rhythm-toggle{background:var(--warm-orange);color:var(--peach-background);font-size:1.25em;border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer;font-weight:600;margin-bottom:1rem}.rhythm-content h3,.rhythm-content p{line-height:1.5;margin:0 0 1.5rem}.format-table{width:100%;border-collapse:collapse;margin:1.5rem 0;background:#fff}.format-table th,.format-table td{padding:.75rem;text-align:left;border-bottom:1px solid var(--warm-orange)}.format-table th{background:var(--warm-orange);color:var(--peach-background);font-weight:600}.format-table tr:hover{background:var(--cream-white)}.format-winner{background:var(--success-bg-light);font-weight:600}.display-demo-container{background:var(--cream-white);border:2px solid var(--warm-orange);border-radius:8px;padding:1.5rem;margin:1.5rem 0}.display-controls{display:flex;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}.preview-box{background:#fff;border:2px solid var(--ui-border-light);border-radius:4px;padding:2rem;min-height:100px;display:flex;align-items:center;justify-content:center;font-size:2rem;position:relative}.preview-status{position:absolute;top:.5rem;right:.5rem;font-size:.875rem;padding:.25rem .5rem;border-radius:4px}.loading-comparison{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin:1.5rem 0}.loading-example{border:2px solid var(--warm-orange);border-radius:8px;padding:1rem;background:#fff}.loading-example h3{margin-top:0;color:var(--teal-darker);font-size:clamp(1rem,2vw + .5rem,1.15rem)}.loading-timeline{margin:1rem 0;font-family:monospace;font-size:.875rem}.timeline-step{border-left:3px solid var(--warm-orange);padding:.25rem 0 .25rem .5rem;margin-bottom:.5rem}.timeline-foit{color:var(--error-darker);font-weight:600}.timeline-fout{color:var(--orange-darkest);font-weight:600}.timeline-good{color:var(--success-darkest);font-weight:600}.code-comparison{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0}@media(max-width:768px){.code-comparison{grid-template-columns:1fr}}.code-block{background:var(--code-bg-dark);color:var(--code-text-light);padding:1rem;border-radius:4px;font-family:Courier New,monospace;font-size:.875rem;overflow-x:auto}.code-label{font-weight:600;margin-bottom:.5rem;color:var(--teal-darker)}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1.5rem 0}.metric-card{background:var(--cream-white);border-left:4px solid var(--warm-orange);padding:1rem;border-radius:4px}.metric-value{font-size:2rem;font-weight:700;color:var(--teal-darker);margin:.5rem 0}.metric-label{font-size:.875rem;color:var(--text-muted)}.playground-container{background:var(--cream-white);border:2px solid var(--warm-orange);border-radius:8px;padding:1.5rem;margin:1.5rem 0}.playground-controls{display:grid;gap:1.5rem;margin-bottom:2rem}.slider-group{display:flex;flex-direction:column}.slider-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;font-weight:600;color:var(--teal-darker)}.slider-value{font-family:monospace;color:var(--orange-darkest);font-size:.875rem}.slider{-webkit-appearance:none;appearance:none;width:100%;height:12px;background:linear-gradient(to right,var(--warm-orange) 0%,var(--warm-orange) 0%,var(--ui-border-light) 0%,var(--ui-border-light) 100%);border-radius:6px;outline:none;transition:all .2s ease}.slider:focus{box-shadow:0 0 0 3px hsl(32,76%,63% / .2)}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;background:var(--warm-orange);color:var(--peach-background);border:3px solid hsl(0,0%,100%);border-radius:50%;cursor:pointer;box-shadow:0 2px 6px hsl(0,0%,0% / .2);transition:all .2s ease}.slider::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 3px 8px hsl(0,0%,0% / .3)}.slider::-webkit-slider-thumb:active{transform:scale(1.05)}.slider::-moz-range-thumb{width:28px;height:28px;background:var(--warm-orange);color:var(--peach-background);border:3px solid hsl(0,0%,100%);border-radius:50%;cursor:pointer;box-shadow:0 2px 6px hsl(0,0%,0% / .2);transition:all .2s ease}.slider::-moz-range-thumb:hover{transform:scale(1.15);box-shadow:0 3px 8px hsl(0,0%,0% / .3)}.slider::-moz-range-thumb:active{transform:scale(1.05)}.preview-text{background:#fff;border:2px solid var(--ui-border-light);border-radius:4px;padding:2rem;font-family:Recursive,sans-serif;font-size:3rem;text-align:center;line-height:1.2;margin:1.5rem 0;min-height:120px;display:flex;align-items:center;justify-content:center;transition:all .15s ease-out}.css-output-box{background:var(--code-bg-dark);color:var(--code-text-light);padding:1rem;border-radius:4px;font-family:Courier New,monospace;font-size:.875rem;overflow-x:auto;margin-top:1rem;position:relative}.comparison-chart{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin:2rem 0}@media(max-width:768px){.comparison-chart{grid-template-columns:1fr}}.chart-column{border:2px solid var(--warm-orange);border-radius:8px;padding:1.5rem;background:#fff}.chart-bad{border-color:var(--error-darker)}.chart-good{border-color:var(--success-darkest)}.file-list{list-style:none;padding:0;margin:1rem 0}.file-item{margin:.25rem 0;background:var(--cream-white);border-left:3px solid var(--warm-orange);padding:.5rem .5rem .5rem .75rem;font-family:monospace;font-size:.875rem}.file-size{float:right;color:var(--teal-darker);font-weight:600}.animation-demo{border:2px solid var(--warm-orange);border-radius:8px;padding:2rem;background:#fff;margin:1.5rem 0}.hover-demo{font-family:Recursive,sans-serif;font-size:3rem;font-variation-settings:"wght" 400;transition:font-variation-settings .3s ease;cursor:pointer;text-align:center;padding:1rem;user-select:none}.hover-demo:hover{font-variation-settings:"wght" 1000}.scroll-demo-container{height:300px;overflow-y:scroll;border:2px solid var(--ui-border-light);border-radius:4px;padding:2rem;background:linear-gradient(to bottom,white,var(--cream-white))}.scroll-demo-text{font-family:Recursive,sans-serif;font-size:2.5rem;text-align:center;margin:2rem 0;font-variation-settings:"wght" 300}.axes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin:1.5rem 0}.axis-card{border:2px solid var(--warm-orange);border-radius:8px;padding:1rem;background:#fff}.axis-demo{font-family:Recursive,sans-serif;font-size:2rem;margin:1rem 0;text-align:center;padding:1rem;background:var(--cream-white);border-radius:4px}.support-table{width:100%;border-collapse:collapse;margin:1.5rem 0;background:#fff}.support-table th,.support-table td{padding:.75rem;text-align:left;border-bottom:1px solid var(--warm-orange)}.support-table th{background:var(--teal-darker);color:#fff;font-weight:600}.support-no{color:var(--error-darker);font-weight:700}.pairing-gallery{display:grid;gap:2rem;margin:2rem 0}.pairing-example{border:2px solid var(--soft-orange);border-radius:8px;padding:2rem;background:var(--cream-white)}.pairing-example.good-pairing{border-color:var(--success-darkest);background:var(--success-bg-light)}.pairing-example.bad-pairing{border-color:var(--error-darker);background:var(--error-bg-light)}.pairing-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;font-weight:600}.pairing-good-badge{background:var(--success-darkest);padding:.25rem .75rem;border-radius:4px;font-size:.875rem}.pairing-bad-badge{background:var(--error-darker);color:#fff;padding:.25rem .75rem;border-radius:4px;font-size:.875rem}.pairing-preview{padding:1.5rem;background:#fff;border-radius:4px;margin-bottom:1rem}.pairing-preview h3{margin-top:0;margin-bottom:.5rem}.pairing-preview p{margin:.5rem 0}.pairing-meta{display:flex;gap:2rem;font-size:.875rem;color:var(--text-muted);margin-top:1rem}.pairing-fonts{font-weight:600}.pairing-reason{background:var(--warning-bg-light);border-left:4px solid var(--warning-border);padding:1rem;margin-top:1rem;border-radius:4px}.pairing-reason.good{background:var(--teal-bg-light);border-color:var(--success-darkest)}.principles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin:2rem 0}.principle-card{background:var(--cream-white);border:2px solid var(--soft-orange);border-radius:8px;padding:1.5rem}.principle-icon{font-size:2rem;margin-bottom:.5rem}.principle-title{font-weight:600;margin-bottom:.5rem;color:var(--teal-darker)}.opentype-demo{background:var(--cream-white);border:2px solid var(--soft-orange);border-radius:8px;padding:2rem;margin:2rem 0}.feature-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:2rem}.feature-toggle{display:flex;align-items:center;gap:.5rem;padding:.75rem;background:#fff;border:1px solid var(--soft-orange);border-radius:4px}.feature-toggle input[type=checkbox]{width:20px;height:20px;cursor:pointer}.feature-toggle label{cursor:pointer;font-weight:500;flex:1}.opentype-preview{font-family:EB Garamond,serif;font-size:2rem;line-height:1.4;padding:2rem;background:#fff;border-radius:4px;border:2px solid var(--soft-orange);min-height:150px}.opentype-css-output{background:var(--code-bg-darker);color:var(--code-text-lighter);padding:1.5rem;border-radius:4px;font-family:Courier New,monospace;font-size:.875rem;overflow-x:auto;margin-top:1rem}.text-wrap-demo{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin:2rem 0}.wrap-example{border:2px solid var(--soft-orange);border-radius:8px;padding:1.5rem;background:var(--cream-white)}.wrap-example h3{margin-top:0;font-size:1.5rem;line-height:1.3}.wrap-balanced h3{text-wrap:balance}.wrap-label{display:inline-block;background:var(--teal-darker);color:#fff;padding:.25rem .75rem;border-radius:4px;font-size:.75rem;font-weight:600;margin-bottom:1rem}@media(max-width:768px){.text-wrap-demo{grid-template-columns:1fr}}.feature-showcase{background:var(--cream-white);border:2px solid var(--soft-orange);border-radius:8px;padding:2rem;margin:2rem 0}.feature-comparison{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:1rem}.feature-column{padding:1rem;background:#fff;border-radius:4px;border:2px solid var(--soft-orange)}.feature-column h4{margin-top:0;color:var(--teal-darker)}.feature-text{font-size:1.5rem;line-height:1.6;font-family:EB Garamond,serif}@media(max-width:768px){.feature-comparison{grid-template-columns:1fr}}.hap-intro-card{background:linear-gradient(135deg,var(--cream-white) 0%,var(--peach-background) 100%);border-radius:var(--radius);padding:1.5rem;margin:2rem auto;max-width:900px;border:2px solid var(--soft-orange)}.metric-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin:2rem 0}.metric-card-feature{background:var(--cream-white);border:2px solid var(--soft-orange);border-radius:8px;padding:1.5rem;text-align:center}.metric-value-feature{font-size:2.5rem;font-weight:800;color:var(--orange-darkest);margin-bottom:.5rem}.metric-label-feature{font-weight:600;color:var(--dark-brown);margin-bottom:.5rem}.metric-context{font-size:.875rem;color:var(--medium-brown)}.checklist-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin:2rem 0}.checklist-item{background:var(--cream-white);border:2px solid var(--soft-orange);border-radius:8px;padding:1rem}.next-station-card,.hub-return-card{background:var(--cream-white);border:2px solid var(--soft-orange);border-radius:8px;padding:1.5rem;margin:1rem 0}.cta-link{color:var(--teal-darker);font-weight:600;text-decoration:none}.cta-link:hover{text-decoration:underline}.system-status{background:var(--cream-white);border:2px solid var(--warm-orange);border-radius:12px;padding:1.5rem;margin-bottom:2rem;text-align:center}.system-status p{margin:.5rem 0;font-size:1.125rem}#system-mode{color:#c27d2e;font-weight:700;font-size:1.25rem}#mode-icon{font-size:1.5rem;margin-left:.5rem}.hint{color:var(--dark-brown);font-size:.9375rem;font-style:italic}.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:2rem}@media(max-width:768px){.preview-grid{grid-template-columns:1fr;gap:1.5rem}}.preview-card{border-radius:12px;padding:1.5rem;box-shadow:0 4px 6px hsl(0,0%,0% / .1);transition:transform .2s}.preview-card:hover{transform:translateY(-2px)}.preview-card h3{margin:0 0 1rem;font-size:1.125rem;text-align:center;padding-bottom:.75rem}.sample-content{display:flex;flex-direction:column;gap:1rem}.sample-content p{margin:0;line-height:1.6}.force-light{background:#fff;color:#1a1a1a;border:2px solid hsl(0 0% 85%)}.force-light h3{border-bottom:2px solid hsl(0 0% 85%)}.force-dark{background:#1a1a1a;color:#e6e6e6;border:2px solid hsl(0 0% 25%)}.force-dark h3{border-bottom:2px solid hsl(0 0% 25%)}.force-light .sample-button{background:#004d99;color:#fff;border:none;padding:.625rem 1.25rem;border-radius:6px;cursor:pointer;font-size:1rem;font-weight:600;transition:opacity .2s}.force-light .sample-button:hover{opacity:.9}.force-light .sample-link{color:#004d99;text-decoration:underline;font-weight:500}.force-dark .sample-button{background:#39f;color:#1a1a1a;border:none;padding:.625rem 1.25rem;border-radius:6px;cursor:pointer;font-size:1rem;font-weight:600;transition:opacity .2s}.force-dark .sample-button:hover{opacity:.9}.force-dark .sample-link{color:#66b3ff;text-decoration:underline;font-weight:500}.status-row{display:flex;gap:1rem;flex-wrap:wrap}.status{font-weight:600;font-size:.9375rem}.force-light .status.success{color:#17823e}.force-light .status.warning{color:#806000}.force-light .status.error{color:#b31919}.force-dark .status.success{color:#52e086}.force-dark .status.warning{color:#ffd24d}.force-dark .status.error{color:#e96363}.comparison-section{background:var(--cream-white);border-radius:12px;padding:2rem;margin-bottom:2rem}.comparison-section h3{margin:0 0 1.5rem;color:var(--dark-brown);font-size:1.375rem}.comparison-table{width:100%;border-collapse:collapse;margin-bottom:1.5rem}.comparison-table th,.comparison-table td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--peach-background)}.comparison-table th{background:var(--peach-background);font-weight:700;color:var(--dark-brown)}.comparison-table code{background:var(--peach-background);padding:.25rem .5rem;border-radius:4px;font-size:.875rem;color:var(--orange-darkest)}.stayed-same{color:var(--dark-brown);font-weight:600}.output-section{background:var(--cream-white);border-radius:12px;padding:2rem;margin-bottom:2rem}.output-section h3{margin:0 0 1rem;color:var(--dark-brown);font-size:1.25rem}.output-section pre{background:#2e2e2e;border-radius:8px;padding:1.5rem;overflow-x:auto;position:relative;margin-bottom:1rem}.output-section code{font-family:Courier New,Courier,monospace;font-size:.9375rem;line-height:1.6}.demo-copy-btn{background:var(--warm-orange);color:var(--peach-background);border:none;padding:.75rem 1.5rem;border-radius:8px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s}.demo-copy-btn:hover{background:var(--soft-orange);transform:translateY(-1px);box-shadow:0 4px 8px #e8a5594d}.demo-copy-btn:active{transform:translateY(0)}.demo-copy-btn.copied{background:var(--teal-darker);color:#fff}.tips-box{background:linear-gradient(135deg,var(--cream-white) 0%,var(--peach-background) 100%);border-left:4px solid var(--warm-orange);border-radius:8px;padding:1.5rem;margin-bottom:2rem}.tips-box h3{margin:0 0 1rem;color:var(--dark-brown);font-size:1.25rem}.tips-box ul{margin:0;padding-left:1.5rem}.tips-box li{margin-bottom:.75rem;line-height:1.6;color:var(--dark-brown)}.tips-box li:last-child{margin-bottom:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.sr-only:focus{position:fixed;top:0;left:0;width:auto;height:auto;padding:1rem 1.5rem;margin:.5rem;overflow:visible;clip:auto;white-space:normal;background:var(--warm-orange);color:var(--peach-background);font-weight:700;text-decoration:none;border-radius:8px;box-shadow:0 4px 6px #0000001a;z-index:9999}.page-navigation a{padding:.75rem 1.5rem;background:var(--cream-white);color:var(--dark-brown);text-decoration:none;border-radius:8px;font-weight:600;transition:all .2s;border:2px solid transparent}.page-navigation a:hover{background:var(--warm-orange);color:var(--peach-background);border-color:var(--soft-orange);transform:translateY(-2px);box-shadow:0 4px 8px hsl(32,76%,63% / .3)}.page-navigation a:focus{outline:3px solid var(--warm-orange);outline-offset:2px}@media(prefers-reduced-motion:reduce){.preview-card,.demo-copy-btn,.page-navigation a{transition-duration:.01ms!important}}.color-alone-demo{background:var(--demo-gray-bg);color:var(--demo-gray-text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;padding:1rem;min-height:100vh}.color-alone-demo .container{max-width:800px;margin:0 auto}@media(min-width:768px){.color-alone-demo{padding:2rem}}.color-alone-demo header{background:#fff;padding:1.5rem;border-radius:8px;margin-bottom:1.5rem;box-shadow:0 2px 4px hsl(0,0%,0% / .1)}.color-alone-demo h1{font-size:1.5rem;margin-bottom:.5rem;color:#1a1a1a}.color-alone-demo .intro{color:var(--demo-gray-muted);font-size:.95rem}.color-alone-demo .problem-card{background:#fff;padding:1.5rem;border-radius:8px;margin-bottom:1.5rem;box-shadow:0 2px 4px hsl(0,0%,0% / .1)}.color-alone-demo .problem-card h2{font-size:1.1rem;margin-bottom:1rem;color:#1a1a1a}@media(min-width:768px){.color-alone-demo h1{font-size:2rem}.color-alone-demo .problem-card h2{font-size:1.25rem}}.color-alone-demo .problem-example{background:var(--demo-gray-light);padding:1rem;border-radius:4px;border:2px solid var(--demo-gray-border);margin-bottom:1rem}.color-alone-demo .problem-example.fixed{border-color:var(--demo-success-border);border-width:3px}.color-alone-demo .error-text{color:var(--demo-error-red)}.color-alone-demo .success-text{color:var(--demo-success-green)}.color-alone-demo .link-example{color:var(--demo-link-blue);cursor:pointer}.color-alone-demo .link-example.fixed{text-decoration:underline}.color-alone-demo .link-example.fixed:visited{color:var(--demo-link-visited)}.color-alone-demo .required-asterisk{color:var(--demo-error-red)}.color-alone-demo .required-field label{display:block;margin-bottom:.25rem}.color-alone-demo .required-field input{width:100%;padding:.5rem;border:1px solid hsl(0,0%,80%);border-radius:4px;font-size:1rem}.color-alone-demo .required-text{font-size:.85rem;color:var(--demo-gray-helper);margin-top:.25rem}.color-alone-demo .fix-controls{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--demo-gray-border)}.color-alone-demo .fix-controls h3{font-size:.9rem;margin-bottom:.5rem;color:var(--demo-gray-muted)}.color-alone-demo .fix-option{display:block;margin-bottom:.5rem;cursor:pointer;user-select:none}.color-alone-demo .fix-option input[type=checkbox]{margin-right:.5rem}.color-alone-demo .feedback{margin-top:.75rem;padding:.75rem;border-radius:4px;font-size:.9rem;display:none}.color-alone-demo .feedback.show{display:block}.color-alone-demo .feedback.success{background:var(--demo-success-bg);color:var(--demo-success-text);border-left:4px solid var(--demo-success-border)}.color-alone-demo .feedback.partial{background:var(--demo-warning-bg);color:var(--demo-warning-orange);border-left:4px solid var(--demo-warning-border)}.color-alone-demo .icon-before:before{margin-right:.25rem;font-weight:700}.color-alone-demo .error-icon:before{content:"✕ "}.color-alone-demo .success-icon:before{content:"✓ "}.color-alone-demo :where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--demo-link-blue);outline-offset:2px}.color-alone-demo input[type=checkbox]:focus-visible{outline:2px solid var(--demo-link-blue);outline-offset:2px}@media(prefers-reduced-motion:reduce){.color-alone-demo .problem-example,.color-alone-demo .feedback{transition-duration:.01ms!important}}.contrast-fixer-demo{background:var(--demo-cf-gray-bg);color:var(--demo-cf-gray-text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;padding:1rem;min-height:100vh}.contrast-fixer-demo .container{max-width:800px;margin:0 auto}@media(min-width:768px){.contrast-fixer-demo{padding:2rem}}.contrast-fixer-demo header{background:#fff;padding:1.5rem;border-radius:8px;margin-bottom:1.5rem;box-shadow:0 2px 4px hsl(0,0%,0% / .1)}.contrast-fixer-demo h1{font-size:1.5rem;margin-bottom:.5rem;color:var(--demo-cf-gray-dark)}.contrast-fixer-demo .intro{color:var(--demo-cf-gray-muted);font-size:.95rem}.contrast-fixer-demo .demo-section{background:#fff;padding:1.5rem;border-radius:8px;margin-bottom:1.5rem;box-shadow:0 2px 4px hsl(0,0%,0% / .1)}.contrast-fixer-demo .demo-section h2{font-size:1.1rem;margin-bottom:1rem;color:var(--demo-cf-gray-dark)}@media(min-width:768px){.contrast-fixer-demo h1{font-size:2rem}.contrast-fixer-demo .demo-section h2{font-size:1.25rem}}.contrast-fixer-demo .text-preview{background:#fff;padding:2rem 1.5rem;border-radius:4px;border:2px solid var(--demo-cf-gray-border);margin-bottom:1.5rem;min-height:150px;display:flex;flex-direction:column;justify-content:center}.contrast-fixer-demo .preview-text{font-size:1rem;line-height:1.6;margin-bottom:1rem}.contrast-fixer-demo .preview-text-large{font-size:1.5rem;font-weight:700;line-height:1.4}.contrast-fixer-demo .controls{margin-bottom:1.5rem}.contrast-fixer-demo .control-group{margin-bottom:1.25rem}.contrast-fixer-demo .control-group label{display:block;font-size:.9rem;font-weight:600;margin-bottom:.5rem;color:var(--demo-cf-gray-label)}.contrast-fixer-demo .slider-container{display:flex;align-items:center;gap:1rem}.contrast-fixer-demo input[type=range]{flex:1;height:8px;border-radius:4px;background:var(--demo-cf-gray-border);outline:none;-webkit-appearance:none}.contrast-fixer-demo input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--demo-cf-blue);cursor:pointer;border:2px solid hsl(0,0%,100%);box-shadow:0 2px 4px hsl(0,0%,0% / .2)}.contrast-fixer-demo input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--demo-cf-blue);cursor:pointer;border:2px solid hsl(0,0%,100%);box-shadow:0 2px 4px hsl(0,0%,0% / .2)}.contrast-fixer-demo .slider-value{min-width:50px;font-weight:600;color:var(--demo-cf-blue);font-size:.95rem}.contrast-fixer-demo .ratio-display{background:var(--demo-cf-gray-light);padding:1.25rem;border-radius:4px;border-left:4px solid var(--demo-cf-gray-border-dark);margin-bottom:1rem}.contrast-fixer-demo .ratio-display.pass-aa{background:var(--demo-cf-gold-bg);border-color:var(--demo-cf-orange-border)}.contrast-fixer-demo .ratio-display.pass-aaa{background:var(--demo-cf-green-bg);border-color:var(--demo-cf-green-border)}.contrast-fixer-demo .ratio-number{font-size:2rem;font-weight:700;color:var(--demo-cf-gray-dark);margin-bottom:.25rem}.contrast-fixer-demo .ratio-label{font-size:.85rem;color:var(--demo-cf-gray-helper);margin-bottom:.75rem}.contrast-fixer-demo .wcag-status{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem;margin-top:.75rem}.contrast-fixer-demo .status-badge{padding:.5rem .75rem;border-radius:4px;font-size:.85rem;font-weight:600;text-align:center}.contrast-fixer-demo .status-badge.fail{background:var(--demo-cf-red-bg);color:var(--demo-cf-red-text)}.contrast-fixer-demo .status-badge.pass{background:var(--demo-cf-green-bg);color:var(--demo-cf-green-text)}.contrast-fixer-demo .color-values{background:var(--demo-cf-gray-light);padding:1rem;border-radius:4px;font-family:Courier New,monospace;font-size:.85rem}.contrast-fixer-demo .color-values div{margin-bottom:.5rem}.contrast-fixer-demo .color-values div:last-child{margin-bottom:0}.contrast-fixer-demo .color-label{color:var(--demo-cf-gray-helper);display:inline-block;min-width:80px}.contrast-fixer-demo .color-value{color:var(--demo-cf-blue);font-weight:600}.contrast-fixer-demo .reset-button{background:var(--demo-cf-blue);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:4px;font-size:.95rem;font-weight:600;cursor:pointer;width:100%;margin-top:1rem}.contrast-fixer-demo .reset-button:hover{background:var(--demo-cf-blue-hover)}.contrast-fixer-demo .reset-button:active{background:var(--demo-cf-blue-active)}@media(min-width:768px){.contrast-fixer-demo .reset-button{width:auto}}.contrast-fixer-demo :where(button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--demo-cf-blue);outline-offset:2px}.contrast-fixer-demo input[type=range]:focus-visible{outline:2px solid var(--demo-cf-blue);outline-offset:2px}@media(prefers-reduced-motion:reduce){.contrast-fixer-demo .ratio-display,.contrast-fixer-demo .status-badge{transition-duration:.01ms!important}}.filter-playground{max-width:900px;margin:2rem auto;padding:0 1rem}.demo-header{text-align:center;margin-bottom:2rem}.demo-header h1{color:var(--demo-fe-heading);font-size:2rem;margin-bottom:.5rem}.demo-header p{color:var(--demo-fe-body);font-size:1rem;line-height:1.6}.filter-playground .preview-section{background:var(--demo-fe-cream-bg);border:2px solid var(--demo-fe-orange-border);border-radius:12px;padding:2rem;margin-bottom:2rem;text-align:center}.filter-playground .preview-section h2{color:var(--demo-fe-heading);font-size:1.25rem;margin-bottom:1rem}.filter-playground #filter-target{max-width:100%;height:auto;border-radius:8px;display:block;margin:0 auto;box-shadow:0 4px 12px var(--demo-fe-shadow-light);transition:filter .1s ease}.filter-playground .controls-section{background:var(--demo-fe-cream-bg);border:2px solid var(--demo-fe-orange-border);border-radius:12px;padding:1.5rem;margin-bottom:2rem}.filter-playground .controls-section h2{color:var(--demo-fe-heading);font-size:1.25rem;margin-bottom:1rem}.filter-playground .controls-grid{display:grid;grid-template-columns:1fr;gap:1.25rem}@media(min-width:768px){.filter-playground .controls-grid{grid-template-columns:1fr 1fr}}.filter-playground .filter-control{display:flex;flex-direction:column;gap:.5rem}.filter-playground .filter-control label{font-weight:600;color:var(--demo-fe-label);font-size:.9rem}.filter-playground .slider-row{display:flex;align-items:center;gap:.75rem}.filter-playground .filter-control output{min-width:4rem;text-align:right;font-weight:600;color:var(--demo-fe-label);font-size:.9rem}.filter-playground .filter-control input[type=range]{flex:1;height:8px;border-radius:4px;background:linear-gradient(to right,var(--demo-fe-slider-track) 0%,var(--demo-fe-slider-thumb) 50%,var(--demo-fe-slider-track) 100%);outline:none;-webkit-appearance:none}.filter-playground .filter-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--demo-fe-slider-thumb);cursor:pointer;border:3px solid var(--demo-fe-slider-thumb-border);box-shadow:0 2px 6px var(--demo-fe-shadow-medium)}.filter-playground .filter-control input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--demo-fe-slider-thumb);cursor:pointer;border:3px solid var(--demo-fe-slider-thumb-border);box-shadow:0 2px 6px var(--demo-fe-shadow-medium)}.filter-playground .filter-control input[type=range]:focus::-webkit-slider-thumb{outline:2px solid var(--demo-fe-slider-focus);outline-offset:2px}.filter-playground .filter-control input[type=range]:focus::-moz-range-thumb{outline:2px solid var(--demo-fe-slider-focus);outline-offset:2px}.filter-playground .action-buttons{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2rem}.filter-playground .action-buttons button,.filter-playground .action-buttons select{padding:.75rem 1.5rem;border:2px solid var(--demo-fe-orange-border);border-radius:8px;background:var(--demo-fe-btn-bg);color:var(--demo-fe-btn-text);font-weight:600;cursor:pointer;transition:all .2s ease;font-size:1rem}.filter-playground .action-buttons button:hover,.filter-playground .action-buttons select:hover{background:var(--demo-fe-btn-hover-bg);color:var(--demo-fe-btn-hover-text)}.filter-playground .action-buttons button:active{transform:scale(.98)}.filter-playground .action-buttons select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%233D2817' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;padding-right:2.5rem}.filter-playground .performance-indicator{background:var(--demo-fe-cream-bg);border:2px solid var(--demo-fe-orange-border);border-radius:8px;padding:1rem 1.5rem;margin-bottom:2rem}.filter-playground .performance-indicator h3{color:var(--demo-fe-heading);font-size:1rem;margin-bottom:.5rem}.filter-playground .performance-indicator p{margin:0;font-size:.95rem;line-height:1.6}.filter-playground .perf-excellent{color:var(--demo-fe-perf-excellent);font-weight:600}.filter-playground .perf-good{color:var(--demo-fe-perf-good);font-weight:600}.filter-playground .perf-moderate{color:var(--demo-fe-perf-moderate);font-weight:600}.filter-playground .perf-expensive{color:var(--demo-fe-perf-expensive);font-weight:600}.filter-playground .output-section{background:var(--demo-fe-cream-bg);border:2px solid var(--demo-fe-orange-border);border-radius:12px;padding:1.5rem;margin-bottom:2rem}.filter-playground .output-section h2{color:var(--demo-fe-heading);font-size:1.25rem;margin-bottom:1rem}.filter-playground .output-section pre{background:var(--demo-fe-code-bg);border-radius:8px;padding:1rem;overflow-x:auto;position:relative;margin-bottom:1rem;--code-text: var(--demo-fe-code-text);--code-tag: var(--demo-fe-code-tag);--code-attr: var(--demo-fe-code-attr);--code-value: var(--demo-fe-code-value);--code-comment: var(--demo-fe-code-comment);--code-punctuation: var(--demo-fe-code-comment)}.filter-playground .output-section pre code{color:var(--code-text)}.filter-playground #copy-btn{background:var(--demo-fe-copy-btn-bg);color:var(--demo-fe-copy-btn-text);border:none;padding:.75rem 1.5rem;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s ease;font-size:1rem}.filter-playground #copy-btn:hover{background:var(--demo-fe-copy-btn-hover);transform:translateY(-1px)}.filter-playground #copy-btn:active{transform:translateY(0)}.filter-playground #copy-btn.copied{background:var(--demo-fe-copy-btn-copied)}.filter-playground .tips-section{margin-top:2rem}.filter-playground .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media(prefers-contrast:more){.filter-playground .preview-section,.filter-playground .controls-section,.filter-playground .output-section,.filter-playground .performance-indicator{border-width:3px}}@media(prefers-reduced-motion:reduce){.filter-playground *{transition-duration:.01ms!important}.filter-playground #filter-target{transition:none!important}}.gradient-builder{max-width:900px;margin:2rem auto;padding:0 1rem}.gradient-builder .demo-header{text-align:center;margin-bottom:2rem}.gradient-builder .demo-header h1{font-size:clamp(1.5rem,3vw,2rem);color:var(--demo-gb-heading);margin-bottom:.5rem}.gradient-builder .demo-header p{color:var(--demo-gb-body-muted)}.gradient-builder .tab-controls{display:flex;gap:0;margin-bottom:2rem;border-bottom:2px solid var(--demo-gb-orange-border)}.gradient-builder .tab{background:var(--demo-gb-tab-bg);border:2px solid var(--demo-gb-orange-border);border-bottom:none;padding:.75rem 1.5rem;font-size:1.125rem;font-weight:700;color:var(--demo-gb-heading);cursor:pointer;transition:all .2s ease;border-radius:8px 8px 0 0;margin-right:-2px}.gradient-builder .tab:hover{background:var(--demo-gb-tab-hover-bg)}.gradient-builder .tab.active{background:var(--demo-gb-tab-active-bg);color:var(--demo-gb-tab-active-text);position:relative;z-index:1}.gradient-builder .preview-section{margin-bottom:2rem}.gradient-builder .preview-section h2{font-size:1.25rem;color:var(--demo-gb-heading);margin-bottom:1rem}.gradient-builder .gradient-preview{width:100%;max-width:400px;height:400px;margin:0 auto;border-radius:8px;box-shadow:0 4px 12px var(--demo-gb-shadow-medium);border:2px solid var(--demo-gb-orange-border);background:linear-gradient(135deg,#2680d9,#a347d1)}.gradient-builder .controls-panel{background:var(--demo-gb-cream-bg);border:2px solid var(--demo-gb-orange-border);border-radius:8px;padding:1.5rem;margin-bottom:2rem}.gradient-builder .controls-panel.hidden{display:none}.gradient-builder .control-group{margin-bottom:1.5rem}.gradient-builder .control-group:last-child{margin-bottom:0}.gradient-builder .control-group label{display:block;font-weight:600;color:var(--demo-gb-heading);margin-bottom:.5rem}.gradient-builder .slider-control{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center}.gradient-builder .slider-control input[type=range]{width:100%}.gradient-builder .slider-control output{font-weight:600;color:var(--demo-gb-heading);min-width:60px;text-align:right}.gradient-builder .color-stops{display:flex;flex-direction:column;gap:1rem}.gradient-builder .color-stop{background:var(--demo-gb-white-bg);border:2px solid var(--demo-gb-gray-border);border-radius:8px;padding:1rem}.gradient-builder .color-stop-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.gradient-builder .color-stop-label{font-weight:600;color:var(--demo-gb-heading)}.gradient-builder .remove-stop{background:var(--demo-gb-btn-remove-bg);color:var(--demo-gb-white-text);border:none;padding:.25rem .75rem;border-radius:4px;font-size:.875rem;cursor:pointer;transition:background .2s}.gradient-builder .remove-stop:hover{background:var(--demo-gb-btn-remove-hover)}.gradient-builder .color-input-group{display:grid;grid-template-columns:60px 1fr;gap:1rem;align-items:center;margin-bottom:.75rem}.gradient-builder .color-input-group input[type=color]{width:60px;height:60px;border:2px solid var(--demo-gb-gray-border);border-radius:4px;cursor:pointer}.gradient-builder .color-input-group input[type=text]{padding:.5rem;border:2px solid var(--demo-gb-gray-border);border-radius:4px;font-family:monospace}.gradient-builder .btn{background:var(--demo-gb-btn-primary-bg);color:var(--demo-gb-white-text);border:none;padding:.75rem 1.5rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s}.gradient-builder .btn:hover{background:var(--demo-gb-btn-primary-hover)}.gradient-builder .btn-secondary{background:var(--demo-gb-btn-secondary-bg)}.gradient-builder .btn-secondary:hover{background:var(--demo-gb-btn-secondary-hover)}.gradient-builder .action-buttons{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2rem}.gradient-builder select.preset-select{padding:.75rem;border:2px solid var(--demo-gb-orange-border);border-radius:8px;font-size:1rem;background:var(--demo-gb-white-bg);cursor:pointer}.gradient-builder .output-section{background:var(--demo-gb-cream-bg);border:2px solid var(--demo-gb-orange-border);border-radius:8px;padding:1.5rem;margin-bottom:2rem}.gradient-builder .output-section h2{font-size:1.25rem;color:var(--demo-gb-heading);margin-bottom:1rem}.gradient-builder .output-section pre{background:var(--demo-gb-code-bg);border-radius:8px;padding:1rem;overflow-x:auto;position:relative;--code-text: var(--demo-gb-code-text);--code-tag: var(--demo-gb-code-tag);--code-attr: var(--demo-gb-code-attr);--code-value: var(--demo-gb-code-value);--code-comment: var(--demo-gb-code-comment);--code-punctuation: var(--demo-gb-code-comment)}.gradient-builder .output-section pre code{color:var(--code-text)}.gradient-builder .copy-button{position:absolute;top:1rem;right:1rem;background:var(--demo-gb-copy-btn-bg);color:var(--demo-gb-white-text);border:none;padding:.5rem 1rem;border-radius:4px;font-size:.875rem;cursor:pointer;transition:background .2s}.gradient-builder .copy-button:hover{background:var(--demo-gb-copy-btn-hover)}.gradient-builder .copy-button.copied{background:var(--demo-gb-copy-btn-copied)}.gradient-builder .tips-box{background:var(--demo-gb-tips-bg);border-left:4px solid var(--demo-gb-tips-border);padding:1rem;border-radius:4px;margin-bottom:2rem}.gradient-builder .tips-box h3{color:var(--demo-gb-heading);margin-bottom:.5rem}.gradient-builder .tips-box ul{margin:0;padding-left:1.5rem}.gradient-builder .tips-box li{margin-bottom:.25rem}.gradient-builder .spinner-demo{background:var(--demo-gb-cream-bg);border:2px solid var(--demo-gb-orange-border);border-radius:8px;padding:1.5rem;margin-bottom:2rem}.gradient-builder .spinner-demo h3{color:var(--demo-gb-heading);margin-bottom:1rem;font-size:1.25rem}.gradient-builder .spinner-demo-content{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}.gradient-builder .spinner-preview{--spinner-speed: 1s;width:150px;height:150px;margin:0 auto;border-radius:50%;background:conic-gradient(from 0deg at 50% 50%,#2680d9,#2680d900 50%);animation:spin var(--spinner-speed) linear infinite;position:relative}@keyframes spin{to{transform:rotate(360deg)}}.gradient-builder .spinner-code{background:var(--demo-gb-spinner-code-bg);border-radius:4px;padding:1rem;font-family:Source Code Pro,monospace;font-size:.85rem;line-height:1.6}.gradient-builder .spinner-code code,.gradient-builder .spinner-code strong{color:var(--demo-gb-heading)}.gradient-builder .spinner-code-header{margin-bottom:.5rem;font-weight:600;color:var(--demo-gb-heading)}.gradient-builder .spinner-code-footer{margin-top:1rem;font-size:.875rem;color:var(--demo-gb-body-muted);line-height:1.6}.gradient-builder .spinner-controls{text-align:center;margin-top:1rem}.gradient-builder .spinner-controls label{display:block;font-weight:600;color:var(--demo-gb-heading);margin-bottom:.5rem;font-size:.875rem}.gradient-builder .speed-control{display:flex;align-items:center;justify-content:center;gap:1rem}.gradient-builder .speed-control input[type=range]{width:200px}.gradient-builder .speed-control output{font-weight:600;color:var(--demo-gb-heading);min-width:50px}.gradient-builder .contrast-warning{background:var(--demo-gb-warning-bg);border-left:4px solid var(--demo-gb-warning-border);padding:1rem;border-radius:4px;margin-bottom:1rem;display:none}.gradient-builder .contrast-warning.show{display:block}.gradient-builder .contrast-warning p{margin:0;color:var(--demo-gb-warning-text);font-weight:600}.gradient-builder .sr-only{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}@media(prefers-contrast:more){.gradient-builder .tab,.gradient-builder .gradient-preview,.gradient-builder .controls-panel,.gradient-builder .output-section{border-width:3px}}@media(prefers-reduced-motion:reduce){.gradient-builder *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.gradient-builder .spinner-preview{animation:none!important}.gradient-builder .spinner-preview:after{content:"⏸";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2rem;color:#fff}}@media(max-width:768px){.gradient-builder .tab{padding:.5rem 1rem;font-size:.875rem}.gradient-builder .gradient-preview{height:300px}.gradient-builder .color-input-group{grid-template-columns:1fr}.gradient-builder .action-buttons{flex-direction:column}.gradient-builder .spinner-demo-content{grid-template-columns:1fr}.gradient-builder .spinner-preview{margin-bottom:1rem}.gradient-builder .speed-control input[type=range]{width:150px}}.status-color-builder *{margin:0;padding:0;box-sizing:border-box}.status-color-builder{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;color:var(--demo-scb-body-text);background:var(--demo-scb-body-bg);padding:1rem}.status-color-builder .container{max-width:900px;margin:0 auto}.status-color-builder header{background:var(--demo-scb-card-bg);padding:1.5rem;border-radius:8px;margin-bottom:1.5rem;box-shadow:0 2px 4px var(--demo-scb-shadow)}.status-color-builder h1{font-size:1.5rem;margin-bottom:.5rem;color:var(--demo-scb-heading)}.status-color-builder .intro{color:var(--demo-scb-intro-text);font-size:.95rem}.status-color-builder .color-picker-section{background:var(--demo-scb-card-bg);padding:1.5rem;border-radius:8px;margin-bottom:1.5rem;box-shadow:0 2px 4px var(--demo-scb-shadow)}.status-color-builder .color-picker-section h2{font-size:1.1rem;margin-bottom:1rem;color:var(--demo-scb-heading)}.status-color-builder .color-controls{display:grid;gap:1.5rem;margin-bottom:1.5rem}.status-color-builder .color-control{border:2px solid var(--demo-scb-border-default);border-radius:8px;padding:1rem;background:var(--demo-scb-card-bg)}.status-color-builder .color-control.pass{border-color:var(--demo-scb-pass-border);border-width:3px}.status-color-builder .color-control.fail{border-color:var(--demo-scb-fail-border);border-width:3px}.status-color-builder .color-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem;flex-wrap:wrap;gap:.5rem}.status-color-builder .color-name{font-weight:600;font-size:1rem}.status-color-builder .status-indicator{padding:.25rem .75rem;border-radius:4px;font-size:.85rem;font-weight:600}.status-color-builder .status-indicator.pass{background:var(--demo-scb-pass-bg);color:var(--demo-scb-pass-text)}.status-color-builder .status-indicator.fail{background:var(--demo-scb-fail-bg);color:var(--demo-scb-fail-text)}.status-color-builder .sliders{display:grid;gap:.75rem;margin-bottom:.75rem}.status-color-builder .slider-group{display:grid;grid-template-columns:60px 1fr 60px;align-items:center;gap:.75rem}.status-color-builder .slider-label{font-size:.85rem;color:var(--demo-scb-text-muted);font-weight:600}.status-color-builder input[type=range]{width:100%;height:8px;border-radius:4px;background:var(--demo-scb-border-default);outline:none;-webkit-appearance:none}.status-color-builder input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--demo-scb-interactive);cursor:pointer;border:2px solid var(--demo-scb-card-bg);box-shadow:0 2px 4px var(--demo-scb-shadow-thumb)}.status-color-builder input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--demo-scb-interactive);cursor:pointer;border:2px solid var(--demo-scb-card-bg);box-shadow:0 2px 4px var(--demo-scb-shadow-thumb)}.status-color-builder .slider-value{font-size:.85rem;font-weight:600;color:var(--demo-scb-interactive);text-align:right}.status-color-builder .action-buttons{display:flex;gap:1rem;margin-top:1.5rem;flex-wrap:wrap}.status-color-builder .btn{padding:.75rem 1.5rem;border:none;border-radius:4px;font-size:.9rem;font-weight:600;cursor:pointer;transition:background .2s}.status-color-builder .btn-primary{background:var(--demo-scb-interactive);color:var(--demo-scb-card-bg)}.status-color-builder .btn-primary:hover{background:var(--demo-scb-interactive-hover)}.status-color-builder .btn-secondary{background:var(--demo-scb-border-default);color:var(--demo-scb-heading)}.status-color-builder .btn-secondary:hover{background:var(--demo-scb-text-muted);color:var(--demo-scb-card-bg)}.status-color-builder .color-preview{padding:.75rem;border-radius:4px;margin-bottom:.75rem;font-weight:600;text-align:center;background:var(--demo-scb-light-bg);border:1px solid var(--demo-scb-border-default)}.status-color-builder .ratio-info{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--demo-scb-text-muted)}.status-color-builder .ratio-number{font-weight:700;color:var(--demo-scb-heading);font-size:1rem}.status-color-builder .suggestion{background:var(--demo-scb-suggestion-bg);border-left:4px solid var(--demo-scb-suggestion-border);padding:.75rem;margin-top:.75rem;border-radius:4px;font-size:.85rem;color:var(--demo-scb-suggestion-text);display:none}.status-color-builder .preview-section{background:var(--demo-scb-card-bg);padding:1.5rem;border-radius:8px;margin-bottom:1.5rem;box-shadow:0 2px 4px var(--demo-scb-shadow)}.status-color-builder .preview-section h2{font-size:1.1rem;margin-bottom:1rem;color:var(--demo-scb-heading)}.status-color-builder .preview-grid{display:grid;gap:1rem}.status-color-builder .message-preview{padding:1rem;border-radius:4px;border-left:4px solid}.status-color-builder .message-preview:before{font-weight:700;margin-right:.5rem}.status-color-builder .preview-samples{background:var(--demo-scb-card-bg);padding:1.5rem;border-radius:8px;transition:background .3s ease}.status-color-builder .preview-samples.dark-bg{background:var(--demo-scb-dark-bg);color:var(--demo-scb-dark-text)}.status-color-builder .preview-samples.dark-bg .message-preview{background:var(--demo-scb-dark-surface);border-color:var(--demo-scb-dark-border)}.status-color-builder .preview-samples:not(.dark-bg) .message-preview{background:var(--demo-scb-card-bg);border-color:var(--demo-scb-border-light)}.mode-dark .status-color-builder .color-preview{background:var(--demo-scb-dark-bg);border-color:var(--demo-scb-dark-border);color:var(--demo-scb-dark-text)}.status-color-builder .summary{background:var(--demo-scb-light-bg);padding:1.25rem;border-radius:4px;margin-top:1rem}.status-color-builder .summary h3{font-size:.95rem;margin-bottom:.75rem;color:var(--demo-scb-heading)}.status-color-builder .code-block-wrapper{position:relative;margin-top:.75rem}.status-color-builder pre[class*=language-]{margin:0;border-radius:4px;font-size:.85rem}.status-color-builder code[class*=language-]{font-size:.85rem}.status-color-builder .copy-button{background:var(--demo-scb-interactive);color:var(--demo-scb-card-bg);border:none;padding:.75rem 1.5rem;border-radius:4px;font-size:.9rem;font-weight:600;cursor:pointer;margin-top:1rem}.status-color-builder .copy-button:hover{background:var(--demo-scb-interactive-hover)}.status-color-builder .copy-button.copied{background:var(--demo-scb-copied-bg)}.status-color-builder .sr-only{position:absolute;left:-9999px}@media(min-width:768px){.status-color-builder{padding:2rem}.status-color-builder h1{font-size:2rem}.status-color-builder .color-picker-section h2,.status-color-builder .preview-section h2{font-size:1.25rem}.status-color-builder .color-controls{grid-template-columns:repeat(2,1fr)}}:not(pre)>code{background-color:hsl(32,76%,63% / .15);padding:.2rem .5rem;border-radius:4px;font-family:Source Code Pro,Consolas,Monaco,monospace;font-size:clamp(.85em,1.5vw,.9em);word-break:break-word;overflow-wrap:break-word}.code-block-wrapper{border:var(--medium-brown) 2px solid;border-radius:var(--radius, 16px);padding:1.5rem;margin:1.5rem 0;position:relative;overflow-x:auto;overflow-y:hidden;word-break:break-word;overflow-wrap:break-word}:root{--astro-code-color-text: var(--cream-white);--astro-code-color-background: transparent;--astro-code-token-constant: var(--warm-orange);--astro-code-token-string: var(--teal-accent);--astro-code-token-comment: hsl(32, 35%, 75%);--astro-code-token-keyword: var(--warm-orange);--astro-code-token-parameter: var(--soft-orange);--astro-code-token-function: var(--soft-orange);--astro-code-token-string-expression: var(--teal-accent);--astro-code-token-punctuation: hsl(30, 20%, 72%);--astro-code-token-link: var(--teal-accent)}.prompt-box{--astro-code-color-text: var(--cream-white);--astro-code-token-constant: var(--warm-orange);--astro-code-token-string: var(--teal-accent);--astro-code-token-comment: hsl(32, 35%, 88%);--astro-code-token-keyword: var(--warm-orange);--astro-code-token-function: var(--soft-orange);--astro-code-token-punctuation: hsl(30, 20%, 72%)}.warning-box{--astro-code-color-text: var(--dark-brown);--astro-code-token-constant: hsl(32, 62%, 47%);--astro-code-token-string: hsl(172, 33%, 36%);--astro-code-token-comment: hsl(30, 18%, 36%);--astro-code-token-keyword: hsl(32, 62%, 47%);--astro-code-token-function: hsl(33, 66%, 54%);--astro-code-token-punctuation: hsl(30, 14%, 48%)}.tip-card{--astro-code-color-text: var(--cream-white);--astro-code-token-constant: var(--soft-orange);--astro-code-token-string: hsl(45, 100%, 81%);--astro-code-token-comment: hsl(0, 0%, 100%);--astro-code-token-keyword: var(--soft-orange);--astro-code-token-function: hsl(45, 100%, 91%);--astro-code-token-punctuation: var(--peach-background)}pre.astro-code{padding:1rem;margin:0;overflow:auto;border-radius:5px;font-family:Source Code Pro,Consolas,Monaco,monospace;font-size:clamp(.8rem,1.5vw,.85rem);line-height:1.7;tab-size:4;background:transparent}@media(max-width:768px){.code-block-wrapper{padding:1rem}}@media(max-width:480px){.code-block-wrapper{padding:.75rem}}.prompt-box pre.astro-code,.warning-box pre.astro-code,.tip-card pre.astro-code{background:transparent;margin:.5em 0 0;position:relative}.copy-button{position:absolute;top:.5rem;right:.5rem;padding:.4rem .8rem;background:var(--teal-accent, hsl(168, 28%, 54%));color:var(--cream-white, hsl(32, 100%, 97%));border:none;border-radius:4px;cursor:pointer;font-size:.75rem;font-weight:600;opacity:0;transition:opacity .2s ease,background .2s ease;z-index:10}.code-block-wrapper:hover .copy-button,.prompt-box:hover .copy-button,.warning-box:hover .copy-button,.tip-card:hover .copy-button{opacity:1}.copy-button:hover{background:var(--warm-orange, hsl(32, 76%, 63%))}.copy-button:active{transform:scale(.95)}.copy-button.copied{background:var(--warm-orange, hsl(32, 76%, 63%))}