.code-playground{overflow:hidden;border-radius:calc(var(--radius) - 2px);border-width:1px;border-color:hsl(var(--primary)/.2);background-color:hsl(var(--secondary)/.3)}.code-playground-header{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;border-color:hsl(var(--primary)/.2);padding:1rem}.code-playground-tabs{display:flex;overflow-x:auto}.code-playground-tab{border-bottom-width:2px;border-color:transparent;padding:.25rem .75rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.875rem;line-height:1.25rem}.code-playground-tab:hover{color:hsl(var(--primary))}.code-playground-tab.active{border-color:hsl(var(--primary));color:hsl(var(--primary))}.code-playground-actions,.code-playground-toggle{display:flex;align-items:center}.code-playground-toggle-label{margin-right:.5rem;font-size:.75rem;line-height:1rem}.code-playground-toggle-slider{position:relative;display:inline-block;height:1.25rem;width:2.5rem;border-radius:9999px;background-color:hsl(var(--secondary));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.code-playground-toggle-slider:before{content:"";position:absolute;left:.25rem;top:.25rem;height:.75rem;width:.75rem;border-radius:9999px;background-color:hsl(var(--muted-foreground));transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.code-playground-toggle-input:checked+.code-playground-toggle-slider{background-color:hsl(var(--primary)/.3)}.code-playground-toggle-input:checked+.code-playground-toggle-slider:before{--tw-translate-x:1.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));background-color:hsl(var(--primary))}.code-playground-content{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:1rem;padding:1rem}@media (min-width:768px){.code-playground-content{grid-template-columns:repeat(2,minmax(0,1fr))}}.keyword{color:rgb(192 132 252/var(--tw-text-opacity,1))}.keyword,.string{--tw-text-opacity:1}.string{color:rgb(74 222 128/var(--tw-text-opacity,1))}.number{color:rgb(250 204 21/var(--tw-text-opacity,1))}.comment,.number{--tw-text-opacity:1}.comment{color:rgb(107 114 128/var(--tw-text-opacity,1))}.stack-diagram{position:relative;height:100%;width:100%}.stack-connection{position:absolute;left:50%;width:.25rem;--tw-translate-x:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));background-color:hsl(var(--primary)/.2)}.stack-layer{position:absolute;left:10%;width:80%;cursor:pointer;border-radius:calc(var(--radius) - 2px);border-width:1px;border-color:hsl(var(--primary)/.2);padding:1rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s;animation-duration:.3s;min-height:80px}.site-map{position:relative;height:100%;width:100%;overflow:hidden;border-radius:var(--radius);border-width:1px;border-color:hsl(var(--primary)/.2);background-color:hsl(var(--secondary)/.1)}.site-connection{height:.125rem;transform-origin:left;background-color:hsl(var(--primary)/.3);transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.site-connection,.site-node{position:absolute;animation-duration:.3s}.site-node{width:200px;cursor:pointer;border-radius:calc(var(--radius) - 2px);border-width:1px;border-color:hsl(var(--primary)/.2);padding:.5rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.quality-dashboard{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:1rem}@media (min-width:640px){.quality-dashboard{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:768px){.quality-dashboard{grid-template-columns:repeat(4,minmax(0,1fr))}}.quality-metric{border-radius:calc(var(--radius) - 2px);border-width:1px;border-color:hsl(var(--primary)/.2);background-color:hsl(var(--secondary)/.5);padding:1rem}.quality-value{margin-top:.5rem;margin-bottom:.5rem;font-size:1.875rem;line-height:2.25rem;font-weight:700}.quality-label{font-size:.875rem;line-height:1.25rem;font-weight:500}.accessibility-showcase{margin-top:2rem;display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:1.5rem}@media (min-width:768px){.accessibility-showcase{grid-template-columns:repeat(3,minmax(0,1fr))}}.accessibility-view{overflow:hidden;border-radius:calc(var(--radius) - 2px);border-width:1px;border-color:hsl(var(--primary)/.2);background-color:hsl(var(--secondary)/.5)}.accessibility-header{border-bottom-width:1px;border-color:hsl(var(--primary)/.2);background-color:hsl(var(--secondary)/.8);padding:.75rem}.accessibility-content,.error-page{padding:1rem}.error-page{display:flex;min-height:100vh;flex-direction:column;align-items:center;justify-content:center;text-align:center}.error-code{font-size:10rem;font-weight:700;line-height:1;color:hsl(var(--primary)/.2)}.error-terminal{margin-left:auto;margin-right:auto;margin-top:2rem;width:100%;max-width:42rem}.error-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}:root{--webdev-primary:#61dafb;--webdev-accent:#00b7ff;--security-primary:#64ffda;--security-accent:#00ff41}.webdev-section{background:linear-gradient(135deg,rgba(97,218,251,.1),rgba(10,25,47,0))}.security-section{background:linear-gradient(135deg,rgba(100,255,218,.1),rgba(10,25,47,0))}