@import"https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css";@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial}}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.top-1\/2{top:50%}.top-1\/4{top:25%}.top-\[-20px\]{top:-20px}.right-1\/4{right:25%}.bottom-1\/4{bottom:25%}.bottom-\[-6px\]{bottom:-6px}.bottom-full{bottom:100%}.left-1\/2{left:50%}.left-1\/3{left:33.3333%}.left-1\/4{left:25%}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-50{z-index:50}.container{width:100%}.mx-auto{margin-inline:auto}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.h-\[300px\]{height:300px}.h-full{height:100%}.max-h-\[240px\]{max-height:240px}.max-h-\[320px\]{max-height:320px}.min-h-\[150px\]{min-height:150px}.min-h-\[160px\]{min-height:160px}.min-h-\[200px\]{min-height:200px}.min-h-\[220px\]{min-height:220px}.min-h-\[250px\]{min-height:250px}.min-h-\[300px\]{min-height:300px}.min-h-\[320px\]{min-height:320px}.min-h-\[350px\]{min-height:350px}.min-h-\[400px\]{min-height:400px}.min-h-\[500px\]{min-height:500px}.w-1\/2{width:50%}.w-2\/3{width:66.6667%}.w-full{width:100%}.w-px{width:1px}.max-w-\[80\%\]{max-width:80%}.max-w-\[200px\]{max-width:200px}.min-w-\[54px\]{min-width:54px}.min-w-\[250px\]{min-width:250px}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.scale-105{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x)var(--tw-scale-y)}.scale-110{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x)var(--tw-scale-y)}.scale-125{--tw-scale-x:125%;--tw-scale-y:125%;--tw-scale-z:125%;scale:var(--tw-scale-x)var(--tw-scale-y)}.rotate-45{rotate:45deg}.rotate-90{rotate:90deg}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-help{cursor:help}.cursor-move{cursor:move}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-wait{cursor:wait}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.self-center{align-self:center}.self-start{align-self:flex-start}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded-full{border-radius:3.40282e38px}.rounded-none{border-radius:0}.rounded-tl-none{border-top-left-radius:0}.rounded-tr-none{border-top-right-radius:0}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-4{border-style:var(--tw-border-style);border-width:4px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-l-2{border-left-style:var(--tw-border-style);border-left-width:2px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-dotted{--tw-border-style:dotted;border-style:dotted}.bg-gradient-to-b{--tw-gradient-position:to bottom in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-tr{--tw-gradient-position:to top right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-\[url\(\'https\:\/\/www\.transparenttextures\.com\/patterns\/dark-matter\.png\'\)\]{background-image:url(https://www.transparenttextures.com/patterns/dark-matter.png)}.to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-\[8px\]{font-size:8px}.text-\[10px\]{font-size:10px}.whitespace-pre-wrap{white-space:pre-wrap}.text-transparent{color:#0000}.uppercase{text-transform:uppercase}.italic{font-style:italic}.underline{text-decoration-line:underline}.opacity-0{opacity:0}.opacity-20{opacity:.2}.opacity-30{opacity:.3}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-80{opacity:.8}.opacity-100{opacity:1}.shadow-\[0_0_15px_rgba\(244\,63\,94\,0\.3\)\]{--tw-shadow:0 0 15px var(--tw-shadow-color,#f43f5e4d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[0_0_15px_rgba\(245\,158\,11\,0\.3\)\]{--tw-shadow:0 0 15px var(--tw-shadow-color,#f59e0b4d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[0_0_20px_rgba\(16\,185\,129\,0\.1\)\]{--tw-shadow:0 0 20px var(--tw-shadow-color,#10b9811a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[0_0_50px_rgba\(225\,29\,72\,0\.8\)\]{--tw-shadow:0 0 50px var(--tw-shadow-color,#e11d48cc);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-4{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(4px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-offset-2{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.blur-\[2px\]{--tw-blur:blur(2px);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.grayscale{--tw-grayscale:grayscale(100%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.delay-100{transition-delay:.1s}.delay-200{transition-delay:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.duration-700{--tw-duration:.7s;transition-duration:.7s}.duration-1000{--tw-duration:1s;transition-duration:1s}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}@media(hover:hover){.group-hover\:scale-125:is(:where(.group):hover *){--tw-scale-x:125%;--tw-scale-y:125%;--tw-scale-z:125%;scale:var(--tw-scale-x)var(--tw-scale-y)}.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}.hover\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x)var(--tw-scale-y)}.hover\:-rotate-1:hover{rotate:-1deg}.hover\:underline:hover{text-decoration-line:underline}}.focus\:ring-1:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.active\:scale-95:active{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x)var(--tw-scale-y)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:opacity-60:disabled{opacity:.6}:root{--primary:220 90% 56%;--primary-dark:220 90% 45%;--primary-light:220 90% 96%;--secondary:260 80% 60%;--bg-app:210 20% 98%;--bg-surface:0 0% 100%;--bg-glass:0 0% 100%/.8;--text-main:220 20% 20%;--text-muted:220 10% 45%;--text-light:220 10% 60%;--border-light:220 20% 90%;--shadow-sm:0 2px 8px -2px #0000000d;--shadow-md:0 8px 24px -6px #00000014;--shadow-lg:0 20px 48px -12px #3b82f626;--radius-lg:16px;--radius-md:12px;--radius-sm:8px}*{box-sizing:border-box;margin:0;padding:0}ul,ol{list-style:none}body{background-color:hsl(var(--bg-app));color:hsl(var(--text-main));-webkit-font-smoothing:antialiased;font-family:Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;line-height:1.6}.app-container{flex-direction:column;height:100vh;display:flex;overflow:hidden}.layout-grid{flex:1;display:flex;overflow:hidden}.site-header{border-bottom:1px solid hsl(var(--border-light));z-index:20;height:60px;box-shadow:var(--shadow-sm);background:#fff;justify-content:center;align-items:center;display:flex}.header-inner{justify-content:space-between;align-items:center;width:100%;max-width:1200px;padding:0 1.5rem;display:flex}.logo-area{color:hsl(var(--text-main));align-items:center;gap:.75rem;font-size:1.2rem;font-weight:700;display:flex}.logo-icon{color:hsl(var(--primary));align-items:center;display:flex}.logo-text span{color:hsl(var(--primary))}.nav-link{color:hsl(var(--text-muted));font-size:.9rem;font-weight:500;text-decoration:none;transition:color .2s}.nav-link:hover{color:hsl(var(--primary))}.tab-container{background:hsl(var(--bg-surface));border-right:1px solid hsl(var(--border-light));z-index:10;flex-direction:column;flex-shrink:0;width:260px;padding:1.5rem 1rem;display:flex;overflow-y:auto}.tab-group-title{text-transform:uppercase;letter-spacing:.05em;color:hsl(var(--primary));opacity:1;align-items:center;margin:2.5rem 0 .8rem;padding:0 .8rem;font-size:.85rem;font-weight:800;display:flex}.tab-group-title:before{content:"";background:hsl(var(--secondary));border-radius:2px;width:4px;height:12px;margin-right:8px;display:inline-block}.tab-group-title:first-child{margin-top:0}.tab-btn{text-align:left;width:100%;color:hsl(var(--text-muted));cursor:pointer;background:0 0;border:none;border-radius:6px;align-items:center;margin-bottom:2px;padding:.6rem .8rem;font-size:.9rem;font-weight:500;transition:all .2s;display:flex;position:relative}.tab-btn:hover{background:hsl(var(--bg-app));color:hsl(var(--text-main))}.tab-btn.active{background:hsl(var(--primary)/.08);color:hsl(var(--primary));font-weight:600}.tab-btn.active:before{content:"";background:hsl(var(--primary));border-radius:0 4px 4px 0;width:3px;height:60%;position:absolute;top:50%;left:0;transform:translateY(-50%)}.main-content{background:radial-gradient(circle at top right,hsl(var(--primary-light)/.5),transparent 40%);flex:1;padding:2rem 3rem;overflow-y:auto}.content-area{max-width:900px;margin:0 auto;padding-bottom:4rem}h1,h2,h3,h4{color:hsl(var(--text-main));letter-spacing:-.02em;font-weight:700;line-height:1.3}.content-area h1{background:linear-gradient(135deg,hsl(var(--primary)),hsl(var(--secondary)));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:1.5rem;padding-bottom:.5rem;font-size:2.8rem}.content-area h2{border-bottom:2px solid hsl(var(--border-light));margin:3.5rem 0 1.5rem;padding-bottom:.5rem;font-size:1.8rem}.content-area table{border-collapse:separate;border-spacing:0;border-radius:var(--radius-md);border:1px solid hsl(var(--border-light));width:100%;box-shadow:var(--shadow-sm);margin:2rem 0;overflow:hidden}.content-area th,.content-area td{text-align:left;border-bottom:1px solid hsl(var(--border-light));padding:1rem 1.5rem}.content-area th{background:hsl(var(--bg-app));color:hsl(var(--text-main));text-transform:uppercase;letter-spacing:.05em;font-size:.95rem;font-weight:700}.content-area tr:last-child td{border-bottom:none}.content-area tr:nth-child(2n){background:hsl(var(--bg-app)/.3)}.content-area tr:hover{background:hsl(var(--primary-light))}.content-area h3{color:hsl(var(--text-main));align-items:center;margin:2rem 0 .8rem;font-size:1.4rem;display:flex}.content-area h3:before{content:"#";color:hsl(var(--primary));opacity:.6;margin-right:.5rem;font-weight:400}.content-area p{color:hsl(var(--text-muted));word-break:keep-all;margin-bottom:1.5rem;font-size:1.1rem;line-height:1.75}.content-area strong{color:hsl(var(--primary));background:linear-gradient(to top,hsl(var(--primary)/.1)50%,transparent 50%);font-weight:700}.content-area ul,.content-area ol{margin-bottom:1.5rem;padding-left:1.5rem}.content-area ul{list-style:none}.content-area ul li{color:hsl(var(--text-muted));margin-bottom:.5rem;padding-left:1.5rem;line-height:1.6;position:relative}.content-area ul li:before{content:"•";color:hsl(var(--primary));font-size:1.2em;line-height:1;position:absolute;left:0}.content-area ol{color:hsl(var(--text-muted));list-style:decimal}.content-area ol li{margin-bottom:.5rem;padding-left:.5rem}.content-area blockquote{background:hsl(var(--bg-surface));border-left:4px solid hsl(var(--primary));border-radius:0 var(--radius-md)var(--radius-md)0;box-shadow:var(--shadow-sm);color:hsl(var(--text-main));margin:2rem 0;padding:1.2rem 1.5rem;font-style:italic}.content-area blockquote p:last-child{margin-bottom:0}.content-area pre{color:#f8fafc;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);background:#1e293b;margin:2rem 0;padding:3rem 1.5rem 1.5rem;font-size:.95em;line-height:1.6;position:relative;overflow-x:auto}.content-area pre:before{content:"";background:#ff5f56;border-radius:50%;width:12px;height:12px;position:absolute;top:1rem;left:1rem;box-shadow:20px 0 #ffbd2e,40px 0 #27c93f}.content-area code{color:inherit;background:0 0;padding:0;font-family:Fira Code,monospace}.content-area p code,.content-area li code{background:hsl(var(--primary)/.1);color:hsl(var(--primary-dark));border-radius:4px;padding:.2rem .4rem;font-size:.9em;font-weight:500}.demo-card{background:hsl(var(--bg-surface));border:1px solid hsl(var(--border-light));border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin:2rem 0;padding:2rem;transition:transform .2s,box-shadow .2s;overflow:hidden}.demo-card:hover{box-shadow:var(--shadow-lg);border-color:hsl(var(--primary)/.3)}.demo-title{text-align:center;color:hsl(var(--text-main));border-bottom:1px solid hsl(var(--border-light));margin-bottom:1.5rem;padding-bottom:1rem;font-size:1.25rem;font-weight:700}.badge{text-transform:uppercase;border-radius:999px;align-items:center;padding:.25rem .75rem;font-size:.75rem;font-weight:700;display:inline-flex}.badge-primary{background:hsl(var(--primary)/.1);color:hsl(var(--primary))}.badge-secondary{background:hsl(var(--secondary)/.1);color:hsl(var(--secondary))}.btn{border-radius:var(--radius-md);cursor:pointer;border:none;justify-content:center;align-items:center;padding:.6rem 1.2rem;font-size:.95rem;font-weight:600;transition:all .2s;display:inline-flex}.btn-primary{background:hsl(var(--primary));color:#fff;box-shadow:0 4px 12px hsl(var(--primary)/.3)}.btn-primary:hover{background:hsl(var(--primary-dark));transform:translateY(-1px)}.btn-secondary{border:1px solid hsl(var(--border-light));color:hsl(var(--text-main));background:#fff}.btn-secondary:hover{background:hsl(var(--bg-app))}.animate-fade-in{animation:.4s ease-out forwards fadeIn}@media(max-width:768px){.layout-grid{flex-direction:column;position:relative}.tab-container{background:hsl(var(--bg-surface));z-index:50;width:280px;height:100vh;box-shadow:var(--shadow-lg);border-right:1px solid hsl(var(--border-light));padding-top:0;transition:transform .3s cubic-bezier(.4,0,.2,1);position:fixed;top:0;left:0;overflow-y:auto;transform:translate(-100%)}.tab-container.open{transform:translate(0)}.main-content{width:100%;padding:1.5rem}h1{font-size:1.8rem}.mobile-menu-header{border-bottom:1px solid hsl(var(--border-light));background:hsl(var(--bg-surface));z-index:10;justify-content:space-between;align-items:center;margin-bottom:1rem;padding:1rem;display:flex;position:sticky;top:0}.mobile-menu-title{color:hsl(var(--text-main));font-size:1.1rem;font-weight:700}.mobile-close-btn{color:hsl(var(--text-muted));cursor:pointer;background:0 0;border:none;padding:.2rem .5rem;font-size:1.5rem}}.mobile-menu-btn{cursor:pointer;color:hsl(var(--text-main));border-radius:var(--radius-sm);background:0 0;border:none;margin-right:.5rem;padding:.5rem;display:none}.mobile-menu-btn:hover{background:hsl(var(--bg-app))}.mobile-menu-header{display:none}.mobile-backdrop{z-index:40;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#00000080;width:100%;height:100%;animation:.2s ease-out fadeIn;position:fixed;top:0;left:0}@media(max-width:768px){.mobile-menu-btn{justify-content:center;align-items:center;display:flex}}.interactive-box{border:2px solid hsl(var(--border-light));border-radius:var(--radius-md);text-align:center;cursor:default;background:#fff;padding:1rem}.interactive-box.active{border-color:hsl(var(--primary));background-color:hsl(var(--primary-light));color:hsl(var(--primary-dark))}.arrow-connection{color:hsl(var(--text-light));justify-content:center;align-items:center;font-size:1.5rem;display:flex}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}:root{--card-bg: #1e293b;--card-bg-gradient-start: #1e293b;--card-bg-gradient-end: #0f172a;--card-border: #334155;--card-text: #f8fafc;--card-text-secondary: #cbd5e1;--card-text-muted: #94a3b8;--accent-primary: #3b82f6;--accent-primary-hover: #2563eb;--accent-primary-content: #eff6ff;--accent-success: #22c55e;--accent-warning: #eab308;--accent-danger: #ef4444;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem}.interactive-card{background:linear-gradient(145deg,var(--card-bg-gradient-start) 0%,var(--card-bg-gradient-end) 100%);border:1px solid var(--card-border);border-radius:16px;box-shadow:0 4px 6px -1px #0000004d,0 10px 15px -3px #0000004d,inset 0 1px #ffffff0d;margin-bottom:3rem;overflow:hidden;color:var(--card-text);font-family:Inter,system-ui,-apple-system,sans-serif;transition:transform .2s ease,box-shadow .2s ease}.interactive-card:hover{border-color:#475569;box-shadow:0 20px 25px -5px #0006}.card-header{background:#0003;padding:var(--space-lg);border-bottom:1px solid var(--card-border);display:flex;justify-content:space-between;align-items:center}.header-title-group{display:flex;align-items:center;gap:var(--space-md)}.header-icon{color:var(--accent-primary);filter:drop-shadow(0 0 8px rgba(59,130,246,.5))}.interactive-card .header-title{font-size:1.25rem;font-weight:700;margin:0;color:var(--card-text);letter-spacing:-.025em}.btn-reset{background:transparent;border:1px solid var(--card-border);color:var(--card-text-secondary);padding:.4rem .8rem;border-radius:6px;cursor:pointer;font-size:.95rem;display:flex;align-items:center;gap:.5rem;transition:all .2s}.btn-reset:hover{background:#ffffff0d;color:var(--card-text);border-color:var(--card-text-secondary)}.card-body{padding:var(--space-xl);position:relative;z-index:1}.description-text{color:var(--card-text-secondary);font-size:1rem;line-height:1.6;margin-bottom:var(--space-xl);background:#0000001a;padding:var(--space-md);border-radius:8px;border-left:3px solid var(--accent-primary)}.flex-center{display:flex;align-items:center;justify-content:center}.status-badge{padding:.35rem .8rem;border-radius:99px;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;display:inline-block}.status-badge.info{background:#3b82f626;color:#bfdbfe;border:1px solid rgba(59,130,246,.3)}.status-badge.success{background:#22c55e26;color:#bbf7d0;border:1px solid rgba(34,197,94,.3)}.control-group-title{font-size:1.05rem;font-weight:700;color:var(--card-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:1rem;padding-left:.2rem}.control-options{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:.5rem}.control-btn{background:#1e293b80;border:1px solid var(--card-border);color:var(--card-text-secondary);padding:.6rem 1rem;border-radius:8px;cursor:pointer;font-size:1.05rem;transition:all .2s ease;font-weight:500}.control-btn:hover{background:#3b82f61a;border-color:var(--accent-primary);color:var(--card-text)}.control-btn.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff;box-shadow:0 4px 12px #3b82f64d}.flex-playground{display:grid;grid-template-columns:1fr;gap:var(--space-xl)}@media(min-width:768px){.flex-playground{grid-template-columns:250px 1fr}}.flex-container-preview{background:#0000004d;border:2px dashed var(--card-border);border-radius:12px;min-height:300px;padding:var(--space-md);transition:all .3s ease}.flex-item-box{width:60px;height:60px;background:linear-gradient(135deg,var(--accent-primary),#60a5fa);border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:1.2rem;box-shadow:0 4px 6px #0003;border:1px solid rgba(255,255,255,.2);margin:4px}.trio-controls{display:flex;gap:var(--space-md);margin-bottom:var(--space-xl);justify-content:center}.trio-preview{background:#fff;border-radius:12px;height:300px;position:relative;overflow:hidden;box-shadow:0 0 0 1px #cbd5e1}.preview-controls{background:#e2e8f0;padding:.8rem;display:flex;gap:8px;border-bottom:1px solid #cbd5e1}.toggle-btn-group{display:inline-flex;background:#0003;padding:4px;border-radius:10px}.toggle-btn{padding:6px 16px;border-radius:6px;border:none;background:transparent;color:var(--card-text-muted);cursor:pointer;font-weight:500}.toggle-btn.active{background:var(--card-text);color:var(--card-bg);box-shadow:0 2px 4px #0000001a}@media(max-width:640px){.card-header{flex-direction:column;align-items:flex-start;gap:1rem}.btn-reset{width:100%;justify-content:center}.flex-playground{grid-template-columns:1fr}}.interactive-card .header-title:before{content:none!important;display:none!important}.skill-tree{display:flex;flex-direction:column;gap:var(--space-xl)}.skill-tree-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}.skill-tree-node{flex:0 1 110px;min-width:96px;max-width:140px;padding:1rem .75rem;border-radius:14px;border:1px solid rgba(51,65,85,.8);background:#0f172a73;color:var(--card-text-muted);display:flex;flex-direction:column;align-items:center;gap:.6rem;cursor:pointer;text-align:center;font:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:transform .2s ease,border-color .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease}.skill-tree-node:hover{background:#33415559;border-color:#64748b;color:var(--card-text-secondary)}.skill-tree-node.active{background:#3b82f633;border-color:#60a5facc;color:var(--card-text);box-shadow:0 10px 20px #3b82f633}.skill-tree-node:focus-visible{outline:2px solid rgba(96,165,250,.9);outline-offset:2px}.skill-tree-node-icon{background:#0f172a99;border-radius:12px;padding:.65rem;display:flex;align-items:center;justify-content:center;color:#94a3b8;transition:background .2s ease,color .2s ease}.skill-tree-node.active .skill-tree-node-icon{background:#ffffff2e;color:#fff}.skill-tree-node-label{font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.interactive-card .skill-tree-detail{background:#1e3a8a40;border:1px solid rgba(59,130,246,.45);padding:1.5rem;border-radius:18px}.skill-tree-detail-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}.skill-tree-detail-icon{padding:.5rem;background:#3b82f6;border-radius:10px;color:#fff;box-shadow:0 6px 12px #3b82f64d}.interactive-card .skill-tree-detail-title{font-size:1.25rem;font-weight:700;color:#dbeafe;text-transform:uppercase;letter-spacing:-.01em}.interactive-card .skill-tree-detail-desc{color:#bfdbfe;line-height:1.7;font-weight:500}.skill-tree-detail-note{margin-top:1rem;display:flex;align-items:center;gap:.5rem;color:#93c5fd;font-size:.95rem;font-weight:700}.skill-tree-empty{text-align:center;padding:1.5rem;border:2px dashed rgba(51,65,85,.7);border-radius:18px;color:var(--card-text-muted);background:#0f172a40;font-weight:600}.quiz-question{font-size:1.4rem;font-weight:700;margin-bottom:2rem;line-height:1.5;text-align:center;color:#fff}.quiz-options{display:flex;flex-direction:column;gap:1rem}.quiz-btn{width:100%;padding:1.25rem 1.5rem;text-align:left;background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:14px;color:var(--card-text-muted);font-size:1.05rem;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;justify-content:space-between;align-items:center;position:relative;overflow:hidden}.quiz-btn:hover:not(:disabled){background:#ffffff14;border-color:#fff3;transform:translate(6px)}.quiz-btn.selected{background:#60a5fa26;border-color:var(--accent-primary);color:#fff;box-shadow:0 0 20px #3b82f633}.quiz-btn.correct{background:#22c55e26;border-color:var(--accent-success);color:#4ade80;box-shadow:0 0 20px #22c55e33}.quiz-btn.wrong{background:#ef444426;border-color:var(--accent-danger);color:#f87171;box-shadow:0 0 20px #ef444433}.explanation-box{margin-top:2rem;padding:1.5rem;background:#0f172a99;border-radius:12px;border:1px solid var(--card-border);border-left:4px solid var(--accent-primary);box-shadow:inset 0 2px 10px #0003}.steps-container{display:flex;flex-direction:column;height:auto;min-height:400px}.step-viewer{flex:1;background:#0000004d;border-radius:16px;margin-bottom:1.5rem;padding:2.5rem;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border:1px solid var(--card-border);position:relative;overflow:hidden;box-shadow:inset 0 2px 20px #0006}.step-viewer:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--accent-primary),var(--accent-success),var(--accent-warning))}.step-title{font-size:1.8rem;color:#fff;margin-bottom:1.5rem;font-weight:800;background:linear-gradient(to right,#fff,#cbd5e1);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.step-desc{color:var(--card-text-muted);font-size:1.15rem;line-height:1.7;max-width:85%}.step-controls{display:flex;justify-content:space-between;align-items:center}.nav-btn{background:var(--accent-primary);color:#fff;border:none;border-radius:10px;padding:.8rem 1.5rem;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:.6rem;transition:all .2s;box-shadow:0 4px 15px #3b82f64d}.nav-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #3b82f666;background:#60a5fa}.nav-btn:disabled{background:#ffffff0d;color:#fff3;cursor:not-allowed;box-shadow:none}.step-indicators{display:flex;gap:.6rem}.step-dot{width:12px;height:12px;border-radius:50%;background:#ffffff26;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);border:2px solid transparent}.step-dot.active{background:var(--accent-primary);width:32px;border-radius:20px;box-shadow:0 0 10px #3b82f680}.step-dot:hover:not(.active){background:#ffffff4d;border-color:#ffffff80}.trio-controls{display:flex;justify-content:center;gap:1rem;margin-bottom:2.5rem;flex-wrap:wrap}.toggle-btn{padding:.75rem 1.25rem;border-radius:12px;font-size:1.05rem;font-weight:700;background:#ffffff0d;color:#94a3b8;border:1px solid rgba(255,255,255,.1);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:.5rem}.toggle-btn:hover{background:#ffffff1a;border-color:#ffffff4d;color:#fff}.toggle-btn.active{transform:translateY(-2px);box-shadow:0 8px 20px -4px #00000080;border-color:transparent;color:#fff}.toggle-btn.active.orange{background:linear-gradient(135deg,#ea580c,#f97316);box-shadow:0 8px 15px -3px #ea580c66}.toggle-btn.active.blue{background:linear-gradient(135deg,#2563eb,#3b82f6);box-shadow:0 8px 15px -3px #2563eb66}.toggle-btn.active.yellow{background:linear-gradient(135deg,#ca8a04,#eab308);box-shadow:0 8px 15px -3px #ca8a0466}.preview-box{background:#f8fafc;border-radius:12px;min-height:250px;display:flex;flex-direction:column;align-items:center;position:relative;color:#1e293b;overflow:hidden;box-shadow:0 20px 40px -10px #00000080;border:1px solid #e2e8f0}.preview-box:before{content:"";display:flex;width:100%;height:36px;background:#e2e8f0;border-bottom:1px solid #cbd5e1}.preview-box:after{content:"Browser Preview";position:absolute;top:9px;left:0;right:0;text-align:center;font-size:.85rem;font-weight:600;color:#64748b;letter-spacing:.05em;pointer-events:none}.preview-label{display:none}.file-explorer{display:flex;gap:1.5rem;height:350px}.sidebar{width:35%;background:#0003;border-radius:12px;padding:1rem;border:1px solid var(--card-border)}.file-list{list-style:none;padding:0;margin:0}.file-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;border-radius:8px;color:var(--card-text-muted);cursor:pointer;transition:all .2s;background:transparent;width:100%;border:none;text-align:left}.file-item:hover{background:#ffffff0d}.file-item.active{background:#3b82f626;color:#93c5fd}.code-viewer{flex:1;background:#1e1e1e;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--card-border)}.code-header{background:#2d2d2d;padding:.5rem 1rem;font-size:.9rem;color:#ccc;border-bottom:1px solid #333}.code-content{padding:1rem;color:#d4d4d4;font-family:Fira Code,monospace;font-size:1rem;overflow:auto;flex:1}.code-annotation{padding:1rem;background:#3b82f61a;border-top:1px solid rgba(59,130,246,.2);color:#bfdbfe;font-size:1rem}.devtools-container{display:flex;flex-direction:column;height:400px;border-radius:12px;overflow:hidden;border:1px solid var(--card-border)}.browser-mock{height:50%;background:#fff;position:relative;display:flex;flex-direction:column}.url-bar{background:#f1f5f9;padding:.5rem;display:flex;align-items:center;gap:.5rem;border-bottom:1px solid #e2e8f0}.url-input{background:#fff;flex:1;border-radius:4px;padding:.1rem .5rem;font-size:.85rem;color:#64748b;text-align:center;border:1px solid #e2e8f0}.browser-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:#000}.devtools-pane{height:50%;background:#242424;color:#e0e0e0;display:flex;flex-direction:column;font-family:Menlo,Monaco,monospace;font-size:.85rem}.devtools-tabs{display:flex;background:#333;border-bottom:1px solid #444}.dt-tab{padding:.4rem .8rem;background:transparent;border:none;color:#aaa;cursor:pointer;display:flex;align-items:center;gap:.4rem}.dt-tab:hover{background:#444}.dt-tab.active{color:#89b4fa;border-bottom:2px solid #89b4fa}.dt-content{padding:.5rem;overflow:auto;line-height:1.5}.tag{color:#569cd6}.attr{color:#9cdcfe}.val{color:#ce9178}.comment{color:#6a9955}@media(max-width:768px){.file-explorer{flex-direction:column;height:auto}.sidebar{width:100%}}.flow-stage{background:#ffffff0d;border-radius:12px;padding:2rem;position:relative;min-height:250px;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--card-border);overflow:hidden}.flow-actor{display:flex;flex-direction:column;align-items:center;gap:.5rem;position:relative;z-index:2;color:var(--card-text-muted)}.flow-actor.active{color:var(--accent-primary)}.flow-actor-icon{transition:all .3s}.flow-actor-label{font-size:.95rem;font-weight:700}.flow-actor-sub{font-size:.85rem;font-family:monospace;color:#64748b;background:#0003;padding:2px 6px;border-radius:4px}.flow-path{flex:1;height:100%;position:relative;display:flex;justify-content:center;align-items:center}.flow-arrow{display:flex;flex-direction:column;align-items:center;gap:.2rem;font-size:.9rem;font-weight:600}.flow-arrow-label{margin-bottom:2px}.flow-message{font-weight:700;font-size:1rem;text-shadow:0 2px 4px rgba(0,0,0,.5)}.demo-controls{margin-top:2rem;display:flex;flex-direction:column;align-items:center;gap:1rem}.demo-btn{background:var(--accent-primary);color:#fff;font-weight:700;padding:.8rem 2rem;border-radius:12px;border:none;cursor:pointer;font-size:1rem;transition:all .2s;box-shadow:0 4px 12px #3b82f64d}.demo-btn:hover:not(:disabled){background:#60a5fa;transform:translateY(-2px);box-shadow:0 6px 16px #3b82f666}.demo-btn:disabled{background:#ffffff1a;color:#ffffff4d;cursor:not-allowed;box-shadow:none}.demo-status-text{color:var(--card-text-muted);font-size:1rem;text-align:center;min-height:1.5em}.dns-container{height:300px;position:relative}.dns-actor{position:absolute;display:flex;flex-direction:column;align-items:center;width:100px}.dns-actor.browser{left:5%;top:50%;transform:translateY(-50%)}.dns-actor.dns{top:10%;left:50%;transform:translate(-50%)}.dns-actor.server{right:5%;top:50%;transform:translateY(-50%)}.dns-message{position:absolute;font-size:.95rem;font-weight:700;background:#0f172acc;padding:.5rem 1rem;border-radius:8px;border:1px solid var(--accent-primary);color:#fff;z-index:10}.url-input-container{position:relative;margin-bottom:2rem}.url-input{width:100%;padding:1rem 1rem 1rem 3rem;background:#ffffff0d;border:1px solid var(--card-border);border-radius:12px;font-family:monospace;font-size:1.05rem;color:#fff;outline:none;transition:all .2s}.url-input:focus{border-color:var(--accent-primary);background:#ffffff14;box-shadow:0 0 0 2px #3b82f633}.url-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--card-text-muted)}.url-examples{display:flex;gap:.5rem;margin-bottom:2rem;overflow-x:auto;padding-bottom:.5rem}.url-example-btn{font-size:.9rem;background:#ffffff0d;border:1px solid transparent;color:var(--card-text-muted);padding:.3rem .8rem;border-radius:99px;cursor:pointer;white-space:nowrap;transition:all .2s}.url-example-btn:hover{background:#ffffff1a;color:#fff}.url-breakdown{display:grid;grid-template-columns:1fr;gap:1rem}@media(min-width:768px){.url-breakdown{grid-template-columns:1fr 1fr}}.url-part{padding:1rem;border-radius:12px;border:1px solid transparent;background:#ffffff08}.url-part-label{font-weight:800;text-transform:uppercase;font-size:.85rem;margin-bottom:.5rem;opacity:.8}.url-part-value{font-family:monospace;font-size:1.1rem;font-weight:700;margin-bottom:.5rem;word-break:break-all}.url-part-desc{font-size:.9rem;opacity:.7;line-height:1.4}.url-part.protocol{background:#ef44440d;border-color:#ef444433;color:#f87171}.url-part.domain{background:#3b82f60d;border-color:#3b82f633;color:#60a5fa}.url-part.path{background:#22c55e0d;border-color:#22c55e33;color:#4ade80}.url-part.query{background:#a855f70d;border-color:#a855f733;color:#c084fc}.url-visual{margin-top:2rem;background:#0f172a;border:1px solid var(--card-border);border-radius:12px;padding:1.5rem;text-align:center;font-family:monospace;font-size:1rem;word-break:break-all}.https-toggle-container{display:flex;justify-content:center;margin-bottom:2rem}.https-toggle{display:flex;align-items:center;gap:.75rem;padding:.8rem 2rem;border-radius:99px;font-weight:700;border:2px solid transparent;cursor:pointer;transition:all .3s}.https-toggle.secure{background:#22c55e1a;color:#4ade80;border-color:#4ade80;box-shadow:0 0 20px #22c55e33}.https-toggle.insecure{background:#ef44441a;color:#f87171;border-color:#f87171;box-shadow:0 0 20px #ef44441a}.https-packet{position:relative;background:#0f172a;border:1px solid var(--card-border);border-radius:12px;padding:2rem;text-align:center;overflow:hidden}.packet-label{font-size:.9rem;color:#64748b;margin-bottom:1rem}.packet-content{font-family:monospace;font-size:1.5rem;font-weight:700;color:#fff}.packet-overlay{position:absolute;inset:0;background:#ef44441a;border:2px solid #ef4444;border-radius:12px;pointer-events:none;display:flex;align-items:center;justify-content:center;font-weight:800;color:#ef4444;text-transform:uppercase;letter-spacing:.1em;font-size:2rem;opacity:0;transition:opacity .3s}.packet-overlay.visible{opacity:1}.event-grid{display:grid;grid-template-columns:1fr;gap:2rem}@media(min-width:768px){.event-grid{grid-template-columns:1fr 1fr}}.event-box{background:#ffffff08;border:1px solid var(--card-border);border-radius:12px;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.event-title{font-weight:700;font-size:1rem;color:var(--card-text-muted)}.event-btn{background:var(--accent-primary);color:#fff;border:none;padding:.8rem;border-radius:8px;font-weight:600;cursor:pointer;transition:transform .1s}.event-btn:active{transform:scale(.98)}.event-input{background:#0003;border:1px solid rgba(255,255,255,.1);padding:.8rem;border-radius:8px;color:#fff;outline:none}.event-input:focus{border-color:var(--accent-primary)}.event-area{height:80px;border:2px dashed rgba(255,255,255,.2);border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--card-text-muted);transition:all .2s;cursor:crosshair}.event-area:hover{background:#ffffff0d;border-color:var(--accent-primary);color:var(--accent-primary)}.console-window{background:#0f172a;border:1px solid var(--card-border);border-radius:12px;height:300px;display:flex;flex-direction:column;overflow:hidden;font-family:monospace;font-size:.95rem}.console-header{background:#1e293b;padding:.5rem 1rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.1);color:#94a3b8}.console-clear{font-size:.85rem;color:#64748b;cursor:pointer}.console-clear:hover{color:#fff}.console-body{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.5rem}.log-entry{color:#4ade80;animation:fadeIn .3s ease}.log-arrow{color:#3b82f6;margin-right:.5rem}.component-showcase{display:flex;flex-direction:column;align-items:center;gap:1.5rem}.user-card{background:#fffffff2;border-radius:16px;padding:1.25rem;display:flex;align-items:center;gap:1.25rem;width:300px;transition:transform .2s;color:#1e293b}.user-card:hover{transform:translateY(-5px)}.user-avatar{width:3rem;height:3rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:1.2rem}.user-info-name{font-weight:800;font-size:1.1rem}.user-info-role{font-size:.85rem;font-weight:700;text-transform:uppercase}.user-card.blue{background:#eff6ff;border:2px solid #bfdbfe}.user-card.blue .user-avatar{background:#3b82f6}.user-card.blue .user-info-role{color:#2563eb}.user-card.green{background:#f0fdf4;border:2px solid #bbf7d0}.user-card.green .user-avatar{background:#22c55e}.user-card.green .user-info-role{color:#16a34a}.user-card.gray{background:#f8fafc;border:2px solid #e2e8f0}.user-card.gray .user-avatar{background:#64748b}.user-card.gray .user-info-role{color:#475569}.component-code{background:#0f172a;border:1px solid var(--card-border);border-radius:12px;padding:1.5rem;width:100%;max-width:400px;margin-top:1rem;font-family:monospace;font-size:.95rem;color:#94a3b8;line-height:1.6}.cicd-stage-container{display:flex;justify-content:center;align-items:center;gap:1rem;margin:2rem 0}.cicd-stage{display:flex;flex-direction:column;align-items:center;gap:.5rem;transition:all .3s;opacity:.5;transform:scale(.95)}.cicd-stage.active{opacity:1;transform:scale(1.1)}.cicd-node{width:3rem;height:3rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#ffffff0d;border:2px solid var(--card-border);color:#64748b;transition:all .3s}.cicd-stage.active .cicd-node{box-shadow:0 0 15px #3b82f64d}.cicd-stage.building.active .cicd-node{border-color:#3b82f6;color:#3b82f6;background:#3b82f61a}.cicd-stage.testing.active .cicd-node{border-color:#a855f7;color:#a855f7;background:#a855f71a}.cicd-stage.deploying.active .cicd-node{border-color:#f59e0b;color:#f59e0b;background:#f59e0b1a}.cicd-stage.done .cicd-node,.cicd-node.done{border-color:#22c55e;color:#22c55e;background:#22c55e1a}.cicd-connector{width:2rem;height:2px;background:#ffffff1a}.cicd-status-text{text-align:center;font-family:monospace;color:var(--card-text-muted);min-height:1.5em;font-size:1.05rem}.http-req-controls{display:flex;justify-content:center;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}.http-method-group{display:flex;background:#ffffff0d;padding:.3rem;border-radius:8px;border:1px solid var(--card-border)}.http-method-btn{padding:.5rem 1rem;border-radius:6px;font-size:.95rem;font-weight:700;color:var(--card-text-muted);cursor:pointer;transition:all .2s;background:transparent;border:none}.http-method-btn.active.GET{background:#3b82f633;color:#60a5fa}.http-method-btn.active.POST{background:#22c55e33;color:#4ade80}.http-action-btn{padding:.6rem 1.2rem;border-radius:8px;font-weight:700;font-size:1rem;cursor:pointer;border:1px solid transparent;transition:all .2s}.http-action-btn.send{background:var(--accent-primary);color:#fff}.http-action-btn.send:hover{background:#2563eb}.http-action-btn.fail{background:#ef44441a;color:#f87171;border-color:#ef44444d}.http-action-btn.fail:hover{background:#ef444433}.http-visual{display:grid;grid-template-columns:1fr;gap:1.5rem}@media(min-width:768px){.http-visual{grid-template-columns:1fr 1fr}}.http-box{background:#ffffff08;border:1px solid var(--card-border);border-radius:12px;padding:1.5rem;font-family:monospace;font-size:.95rem;min-height:200px}.http-box-header{color:#64748b;font-weight:700;font-size:.85rem;text-transform:uppercase;margin-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.05);padding-bottom:.5rem}.http-line{margin-bottom:.3rem;color:#cbd5e1}.http-line.highlight{color:var(--accent-primary);font-weight:700}.http-line.success{color:var(--accent-success);font-weight:700}.http-line.error{color:var(--accent-danger);font-weight:700}.token-steps{display:flex;flex-direction:column;gap:1.5rem;align-items:center}.token-step-card{width:100%;max-width:450px;background:#ffffff08;border:1px solid var(--card-border);border-radius:16px;padding:1.25rem;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:1rem;opacity:.6}.token-step-card:hover{background:#ffffff0d;opacity:.8}.token-step-card.active{opacity:1;background:#3b82f60d;border-color:#3b82f6;box-shadow:0 0 20px #3b82f61a;transform:scale(1.02)}.token-step-card.token-active{background:#a855f70d;border-color:#a855f7;box-shadow:0 0 20px #a855f71a}.token-step-card.access-active{background:#22c55e0d;border-color:#22c55e;box-shadow:0 0 20px #22c55e1a}.token-icon-box{background:#ffffff1a;padding:.6rem;border-radius:10px;display:flex;align-items:center;justify-content:center}.token-step-info h4{margin:0;font-size:1.05rem;font-weight:700;color:#fff}.token-step-info p{margin:.2rem 0 0;font-size:.9rem;color:#94a3b8}.token-action-btn{margin-left:auto;background:var(--accent-primary);color:#fff;border:none;padding:.4rem 1rem;font-size:.9rem;font-weight:700;border-radius:6px;cursor:pointer}.folder-layout{display:grid;grid-template-columns:1fr;gap:1.5rem}@media(min-width:768px){.folder-layout{grid-template-columns:1fr 2fr}}.file-explorer{background:#0000004d;border:1px solid var(--card-border);border-radius:12px;padding:1rem}.file-root{display:flex;align-items:center;gap:.5rem;color:#facc15;font-weight:700;font-size:1rem;margin-bottom:1rem}.file-list{list-style:none;padding:0;margin:0;border-left:1px solid rgba(255,255,255,.1);margin-left:.6rem;padding-left:.5rem}.file-item-btn{display:flex;align-items:center;gap:.6rem;width:100%;padding:.6rem;background:transparent;border:none;color:#94a3b8;cursor:pointer;border-radius:6px;font-size:1rem;transition:all .2s;text-align:left}.file-item-btn:hover{background:#ffffff0d;color:#cbd5e1}.file-item-btn.active{background:#3b82f626;color:#60a5fa;font-weight:600}.file-viewer{background:#0f172a;border:1px solid var(--card-border);border-radius:12px;display:flex;flex-direction:column;overflow:hidden;height:400px}.editor-header{background:#1e293b;padding:.5rem 1rem;display:flex;justify-content:space-between;align-items:center;font-size:.9rem;color:#94a3b8;border-bottom:1px solid rgba(255,255,255,.05)}.editor-dots{display:flex;gap:6px}.dot{width:10px;height:10px;border-radius:50%}.editor-content{flex:1;padding:1.5rem;font-family:monospace;font-size:1rem;line-height:1.6;color:#e2e8f0;overflow-y:auto}.editor-info{padding:1rem;background:#3b82f61a;border-top:1px solid rgba(59,130,246,.2)}.info-title{color:#60a5fa;font-weight:700;font-size:.95rem;margin-bottom:.3rem;display:block}.info-desc{font-size:1rem;margin-bottom:.5rem}.info-note{background:#0000004d;padding:.5rem;border-radius:6px;font-size:.9rem;color:#94a3b8}.trio-controls{display:flex;justify-content:center;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}.trio-toggle{padding:.8rem 1.5rem;border-radius:99px;background:#ffffff0d;border:1px solid var(--card-border);color:var(--card-text-muted);font-weight:600;cursor:pointer;transition:all .2s}.trio-toggle:hover{background:#ffffff1a}.trio-toggle.active.orange{background:#f9731633;color:#fb923c;border-color:#fb923c}.trio-toggle.active.blue{background:#3b82f633;color:#60a5fa;border-color:#60a5fa}.trio-toggle.active.yellow{background:#eab30833;color:#facc15;border-color:#facc15}.trio-preview{background:#fffffff2;border-radius:12px;padding:2rem;min-height:300px;color:#1e293b;position:relative;border:1px solid var(--card-border)}.preview-controls{position:absolute;top:1rem;left:1rem;display:flex;gap:6px}.analogy-card{background:#eab3080d;border:1px solid rgba(234,179,8,.2);border-radius:16px;padding:1.5rem;margin:2rem 0;position:relative;overflow:hidden}.analogy-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent-warning)}.analogy-header{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}.analogy-icon{color:var(--accent-warning)}.analogy-header h3{margin:0;color:var(--accent-warning);font-size:1.1rem;font-weight:700}.analogy-text{font-size:1.05rem;line-height:1.7;color:#e2e8f0}.analogy-text strong{color:var(--accent-warning)}.tab-nav{display:flex;flex-direction:column;height:100%;padding-right:1rem}.tab-group-title{font-size:.9rem;text-transform:uppercase;color:var(--card-text-muted);font-weight:800;margin-bottom:.8rem;padding-left:.8rem;opacity:.7}.tab-list{list-style:none;padding:0;margin:0}.tab-btn{width:100%;text-align:left;padding:.75rem 1rem;margin-bottom:.2rem;border-radius:8px;color:#94a3b8;background:transparent;border:none;cursor:pointer;transition:all .2s;font-size:1rem;position:relative;display:flex;align-items:center}.tab-btn:hover{background:#f1f5f9;color:#0f172a}.tab-btn.active{background:#3b82f61a;color:var(--accent-primary);font-weight:600}.tab-indicator{position:absolute;left:0;top:.5rem;bottom:.5rem;width:3px;background:var(--accent-primary);border-radius:0 4px 4px 0}.selector-lab{display:grid;gap:1.5rem}.selector-lab-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}.selector-lab-btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;border:1px solid rgba(51,65,85,.7);padding:.5rem 1rem;font-size:.95rem;font-weight:700;color:var(--card-text-secondary);background:#0f172a73;cursor:pointer;transition:all .2s ease}.selector-lab-btn:hover{color:var(--card-text);background:#1e293b99}.selector-lab-btn.active{color:#fff;box-shadow:0 10px 20px #0000004d}.selector-lab-btn.type-tag.active{border-color:#60a5fae6;background:#3b82f6e6}.selector-lab-btn.type-class.active{border-color:#34d399e6;background:#10b981e6}.selector-lab-btn.type-id.active{border-color:#fbbf24e6;background:#f59e0be6}.selector-lab-code{border:1px solid rgba(51,65,85,.6);background:#02061799;border-radius:16px;padding:1rem;font-family:Fira Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.95rem;color:#e2e8f0}.selector-lab-grid{display:grid;gap:.75rem;grid-template-columns:repeat(1,minmax(0,1fr))}.selector-lab-item{position:relative;min-height:7rem;border-radius:16px;border:1px solid rgba(51,65,85,.6);background:#0f172a66;color:#94a3b8;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.5rem;transition:all .2s ease}.selector-lab-item.selected{color:#e2e8f0}.selector-lab-item.selected.type-tag{border-color:#60a5fae6;background:#3b82f62e;box-shadow:0 0 0 2px #3b82f659}.selector-lab-item.selected.type-class{border-color:#34d399e6;background:#10b9812e;box-shadow:0 0 0 2px #10b98159}.selector-lab-item.selected.type-id{border-color:#fbbf24e6;background:#f59e0b2e;box-shadow:0 0 0 2px #f59e0b59}.selector-lab-label{position:absolute;top:.7rem;left:.75rem;font-size:.75rem;font-family:Fira Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-weight:600;opacity:.7}.selector-lab-check{width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 12px 18px #00000059}.selector-lab-check.type-tag{background:#3b82f6}.selector-lab-check.type-class{background:#10b981}.selector-lab-check.type-id{background:#f59e0b}.selector-lab-selected-text{font-size:.7rem;letter-spacing:.18em;font-weight:700;text-transform:uppercase}.selector-lab-placeholder{width:3rem;height:3rem;border-radius:999px;border:2px dashed rgba(51,65,85,.6);display:flex;align-items:center;justify-content:center;opacity:.35}.selector-lab-placeholder-dot{width:.5rem;height:.5rem;border-radius:999px;background:#94a3b8e6}@media(min-width:640px){.selector-lab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:1024px){.selector-lab-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}.flex-playground{display:flex;flex-direction:column;gap:1.5rem}.flex-container-preview{background:#ffffff0d;border:2px dashed rgba(255,255,255,.2);border-radius:12px;min-height:250px;padding:1rem;transition:all .3s}.flex-item-box{width:60px;height:60px;background:var(--accent-primary);border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:1.2rem;box-shadow:0 4px 6px #0000001a;transition:all .3s}.flex-item-box:nth-child(2){background:#a855f7}.flex-item-box:nth-child(3){background:#22c55e}.flex-item-box:nth-child(4){background:#f59e0b}.flex-item-box:nth-child(5){background:#ef4444}.control-group-title{font-size:.9rem;text-transform:uppercase;color:var(--card-text-muted);font-weight:700;margin-bottom:.5rem}.control-options{display:flex;gap:.5rem;flex-wrap:wrap}.control-btn{padding:.4rem .8rem;background:#ffffff0d;border:1px solid var(--card-border);border-radius:6px;color:#94a3b8;font-size:.95rem;cursor:pointer;transition:all .2s}.control-btn:hover{background:#ffffff1a;color:#fff}.control-btn.active{background:#3b82f633;color:#60a5fa;border-color:#60a5fa}.grid-playground{display:grid;gap:1px;background:#ffffff1a;border-radius:12px;padding:1rem;min-height:250px;border:1px solid var(--card-border)}.grid-item-box{background:#3b82f633;border:1px solid rgba(59,130,246,.3);border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#93c5fd}.typo-preview{background:#fff;padding:2rem;border-radius:12px;color:#1e293b;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;transition:all .2s}.slider-container{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.slider-label{width:100px;font-size:.95rem;color:var(--card-text-muted)}.slider-input{flex:1;accent-color:var(--accent-primary)}.slider-value{width:40px;text-align:right;font-family:monospace;font-size:1rem;color:#fff}.color-mixer{display:flex;flex-direction:column;gap:2rem}.color-swatch{height:120px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.2);box-shadow:0 10px 30px #0003;transition:background-color .1s}.color-code{background:#00000080;padding:.5rem 1rem;border-radius:8px;font-family:monospace;color:#fff;font-weight:700;margin-top:.5rem}.responsive-frame-container{width:100%;height:400px;background:#0f172a;border-radius:16px;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative;border:1px solid var(--card-border)}.responsive-frame{background:#fff;height:90%;transition:width .5s cubic-bezier(.4,0,.2,1);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 0 50px #00000080;position:relative}.responsive-frame-header{height:24px;background:#e2e8f0;display:flex;align-items:center;padding-left:.5rem;gap:4px}.frame-dot{width:8px;height:8px;border-radius:50%;background:#cbd5e1}.responsive-content{flex:1;padding:1rem;display:flex;flex-direction:column;gap:.5rem;color:#334155}.mock-grid{display:grid;gap:.5rem;grid-template-columns:repeat(1,1fr)}.mock-grid.tablet{grid-template-columns:repeat(2,1fr)}.mock-grid.desktop{grid-template-columns:repeat(3,1fr)}.mock-card{height:60px;background:#f1f5f9;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:#94a3b8}.device-btn{position:absolute;bottom:1rem;display:flex;gap:.5rem;background:#0009;padding:.5rem;border-radius:99px;z-index:10}.npm-terminal{background:#1e1e1e;border-radius:12px;padding:1rem 1.5rem;font-family:Fira Code,Menlo,monospace;font-size:1rem;color:#e0e0e0;min-height:250px;display:flex;flex-direction:column;border:1px solid var(--card-border)}.npm-output{flex:1;margin-bottom:1rem;overflow-y:auto;color:#94a3b8;white-space:pre-wrap;line-height:1.5}.npm-input-line{display:flex;align-items:center;gap:.5rem;color:#fff}.npm-prompt{color:#22c55e;font-weight:700}.npm-input{background:transparent;border:none;color:#fff;font-family:inherit;font-size:inherit;flex:1;outline:none}.package-json-preview{margin-top:1rem;background:#0f172a;padding:1rem;border-radius:8px;font-size:.9rem;border:1px solid #334155;color:#93c5fd}.json-split-view{display:grid;grid-template-columns:1fr;gap:1.5rem}@media(min-width:768px){.json-split-view{grid-template-columns:1fr 1fr}}.json-editor-pane,.json-visual-pane{background:#ffffff0d;border:1px solid var(--card-border);border-radius:12px;padding:1rem;min-height:250px}.json-textarea{width:100%;height:100%;background:transparent;border:none;color:#fff;font-family:monospace;font-size:1rem;resize:none;outline:none}.kv-list{display:flex;flex-direction:column;gap:.5rem}.kv-item{display:flex;justify-content:space-between;padding:.5rem;background:#0003;border-radius:6px;font-size:1rem}.kv-key{color:#facc15;font-weight:600}.kv-value{color:#a5f3fc;font-family:monospace}.kv-value.number{color:#f87171}.kv-value.boolean{color:#a78bfa}.state-viz-container{display:flex;flex-direction:column;gap:2rem;align-items:center}.state-box{background:#0f172a;border:2px solid #3b82f6;border-radius:12px;padding:1.5rem;text-align:center;position:relative;width:200px}.state-label{position:absolute;top:-12px;left:50%;transform:translate(-50%);background:#3b82f6;color:#fff;padding:.2rem .8rem;border-radius:99px;font-size:.85rem;font-weight:700}.state-value{font-size:3rem;font-weight:800;color:#fff}.ui-arrow{font-size:2rem;color:#64748b;animation:bounce 1s infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(10px)}}.ui-render-box{background:#fff;padding:2rem;border-radius:12px;width:250px;text-align:center;color:#334155;box-shadow:0 10px 25px #0003}.counter-btn{background:#3b82f6;color:#fff;border:none;width:40px;height:40px;border-radius:50%;font-size:1.2rem;cursor:pointer;margin:0 .5rem;transition:transform .1s}.counter-btn:active{transform:scale(.9)}.sql-login-box{max-width:400px;margin:0 auto;background:#ffffff0d;padding:2rem;border-radius:16px;border:1px solid var(--card-border)}.sql-query-preview{background:#1e1e1e;color:#d4d4d4;padding:1rem;border-radius:8px;font-family:monospace;font-size:.95rem;margin-bottom:2rem;line-height:1.6;border-left:4px solid #ef4444}.sql-input-group{margin-bottom:1rem}.sql-input-label{display:block;font-size:.9rem;color:#94a3b8;margin-bottom:.4rem}.sql-input{width:100%;background:#0000004d;border:1px solid rgba(255,255,255,.1);color:#fff;padding:.8rem;border-radius:8px;font-family:monospace}.sql-input:focus{border-color:#ef4444;outline:none}.sql-hack-btn{background:transparent;border:1px dashed #ef4444;color:#ef4444;width:100%;padding:.8rem;border-radius:8px;margin-top:1rem;font-size:.9rem;cursor:pointer}.sql-hack-btn:hover{background:#ef44441a}.sql-result{margin-top:1rem;padding:1rem;border-radius:8px;text-align:center;font-weight:700}.preview-item-wrapper:hover .remove-btn{opacity:1}.preview-h1{font-size:1.5rem;font-weight:800;margin:0}.preview-p{font-size:1rem;margin:0;color:#475569}.preview-div{background:#e0f2fe;padding:.5rem;border-radius:4px;color:#0369a1;font-size:1rem}.preview-button{background:#3b82f6;color:#fff;border:none;padding:.4rem 1rem;border-radius:4px}.media-demo-group{display:flex;flex-direction:column;gap:2rem}.demo-section{background:#ffffff08;padding:1.5rem;border-radius:12px;border:1px solid var(--card-border)}.demo-section h4{margin-bottom:1rem;font-family:monospace;color:#e2e8f0;font-size:1.1rem;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:.5rem}.control-row{display:flex;gap:1rem;align-items:center;margin-bottom:1rem}.toggle-btn{background:#334155;color:#cbd5e1;border:none;padding:.5rem 1rem;border-radius:6px;cursor:pointer;font-size:.95rem;transition:all .2s}.toggle-btn.active{background:#3b82f6;color:#fff}.checkbox-label{display:flex;align-items:center;gap:.5rem;color:#cbd5e1;font-size:1rem;cursor:pointer}.url-input{flex:1;background:#0000004d;border:1px solid var(--card-border);color:#fff;padding:.6rem;border-radius:6px;font-family:monospace}.code-snippet{background:#0f172a;padding:.8rem;border-radius:6px;font-family:monospace;color:#a5f3fc;font-size:.95rem;white-space:pre-wrap;border-left:3px solid #3b82f6;margin-bottom:1rem}.visual-result.media-box{background:#1e1e1e;min-height:120px;display:flex;align-items:center;justify-content:center;border-radius:8px;border:1px dashed #475569}.fake-img{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:#fff}.fake-img.broken{color:#f87171}.broken-icon{opacity:.5}.alt-text{background:#fff;color:#000;padding:.2rem .5rem;font-size:.9rem;border:1px solid #999}.error-text{font-size:.9rem;opacity:.7;font-style:italic}.demo-link{display:inline-flex;align-items:center;gap:.5rem;color:#60a5fa;text-decoration:underline;font-size:1.1rem}.hint-text{margin-top:.5rem;font-size:.9rem;color:#64748b}.tab-control-bar{display:flex;background:#0003;padding:.3rem;border-radius:8px;margin-bottom:1.5rem}.nav-seg-btn{flex:1;background:transparent;border:none;color:#94a3b8;padding:.6rem;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:1rem;transition:all .2s}.nav-seg-btn.active{background:#3b82f6;color:#fff;font-weight:600}.demo-stage{background:#fff;border-radius:12px;padding:1.5rem;color:#1e293b;min-height:250px}.sub-controls{display:flex;gap:1.5rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid #e2e8f0}.radio-label{display:flex;align-items:center;gap:.5rem;font-size:1rem;font-weight:600;cursor:pointer}.code-snippet.small{background:#f1f5f9;color:#334155;border-left-color:#cbd5e1;font-size:.9rem}.list-box{padding-left:1rem}.demo-ul{list-style-type:disc;padding-left:1.5rem}.demo-ol{list-style-type:decimal;padding-left:1.5rem}.demo-ul li,.demo-ol li{margin-bottom:.5rem;font-size:1.1rem}.demo-table{width:100%;border-collapse:collapse}.demo-table th,.demo-table td{padding:.8rem;text-align:left}.demo-table.bordered th,.demo-table.bordered td{border:1px solid #cbd5e1}.demo-table th{background:#f8fafc;font-weight:700}.form-demo-grid{display:grid;gap:2rem}.form-group h5{font-family:monospace;color:#60a5fa;margin-bottom:.5rem;font-size:1rem}.form-group .desc{font-size:.95rem;color:#94a3b8;margin-bottom:1rem}.input-wrapper{position:relative;max-width:300px}.input-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#64748b}.demo-input{width:100%;background:#0f172a;border:1px solid #334155;color:#fff;padding:.7rem .7rem .7rem 2.5rem;border-radius:8px;font-size:1rem}.eye-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:#64748b;font-size:.9rem;cursor:pointer}.radio-group,.check-group{display:flex;gap:1rem}.radio-card{background:#ffffff0d;border:1px solid transparent;padding:.8rem 1.2rem;border-radius:8px;display:flex;align-items:center;gap:.5rem;cursor:pointer;transition:all .2s}.radio-card.selected{background:#3b82f633;border-color:#3b82f6;color:#60a5fa}.radio-card input{display:none}.checkbox-row{display:flex;align-items:center;gap:.5rem;padding:.5rem;cursor:pointer;color:#e2e8f0}.semantic-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;gap:1rem;flex-wrap:wrap}.instruction{font-size:1rem;color:#94a3b8;margin:0}.xray-btn{display:flex;align-items:center;gap:.5rem;background:#334155;border:none;padding:.6rem 1.2rem;border-radius:99px;color:#fff;cursor:pointer;transition:all .3s}.xray-btn.active{background:#ef4444;box-shadow:0 0 15px #ef444466}.layout-preview{background:#fff;border-radius:12px;padding:1rem;display:flex;flex-direction:column;gap:10px;color:#1e293b;border:4px solid #334155}.semantic-stack{display:grid;gap:.6rem}.semantic-title{font-weight:700;font-size:.95rem}.semantic-body{font-size:.9rem;color:#475569}.semantic-box{border:1px solid #e2e8f0;padding:1rem;border-radius:4px;position:relative;transition:all .3s}.tag-label{position:absolute;top:0;left:0;background:#ef4444;color:#fff;font-size:.8rem;padding:.1rem .4rem;font-family:monospace;opacity:0;transition:opacity .3s;z-index:10}.xray-active .tag-label{opacity:1}.xray-active .semantic-box{border:2px dashed #ef4444;background:#ef44440d}.layout-preview header{height:60px;display:flex;align-items:center;background:#f8fafc;font-weight:700}.layout-preview nav{height:40px;display:flex;align-items:center;background:#f1f5f9;font-size:1rem}.main-area{display:flex;gap:10px;min-height:200px}.layout-preview main{flex:3;background:#fff}.layout-preview aside{flex:1;background:#f8fafc;font-size:1rem;color:#64748b}.layout-preview footer{height:50px;display:flex;align-items:center;justify-content:center;background:#1e293b;color:#fff;font-size:.9rem}@media(max-width:640px){.semantic-controls{flex-direction:column;align-items:flex-start}.main-area{flex-direction:column}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fadeIn .3s ease-out forwards}@keyframes bounceIn{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.1);opacity:1}to{transform:scale(1)}}.animate-bounce-in{animation:bounceIn .5s cubic-bezier(.175,.885,.32,1.275) forwards}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.animate-shake{animation:shake .3s ease-in-out}.delay-100{animation-delay:.1s}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-slide-up{animation:slideUp .4s ease-out forwards}.interactive-card h3:before,.interactive-card h4:before{content:none!important;display:none!important}.toolkit-container{display:grid;grid-template-columns:1fr;gap:1.5rem}@media(min-width:768px){.toolkit-container{grid-template-columns:1fr 1fr}}.tool-palette{background:#0f172a66;border:1px solid var(--card-border);border-radius:12px;padding:1rem}.tool-list{display:flex;flex-direction:column;gap:.75rem}.tool-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;border-radius:8px;border:1px solid var(--card-border);background:#1e293b80;cursor:grab;transition:all .2s}.tool-item:hover:not(.placed){border-color:var(--card-text-secondary);background:#1e293bcc;transform:translateY(-2px);box-shadow:0 4px 6px #0003}.tool-item.placed{opacity:.4;cursor:not-allowed;background:transparent;border-style:dashed}.tool-icon-wrapper{padding:.5rem;border-radius:6px;display:flex;align-items:center;justify-content:center}.tool-label{font-size:.9rem;font-weight:600;color:var(--card-text)}.drop-zone{border:2px dashed var(--card-border);border-radius:12px;padding:1.5rem;min-height:300px;display:flex;flex-direction:column;align-items:center;background:#0f172a33;transition:all .3s}.drop-zone.active{border-color:var(--accent-primary);background:#3b82f60d;transform:scale(1.02)}.drop-zone.success{border-color:var(--accent-success);border-style:solid;background:#22c55e0d}.placed-tools-list{width:100%;display:flex;flex-direction:column;gap:.5rem}.empty-slot{height:3rem;border:2px dashed var(--card-border);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--card-text-muted);font-size:.8rem}.placed-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;border-radius:8px;border:1px solid var(--card-border);background:#0f172a99}.placed-label{flex:1;font-size:.9rem;color:var(--card-text)}.placed-check{color:var(--accent-success)}.success-message{text-align:center;padding:2rem}.success-icon{width:64px;height:64px;background:var(--accent-success);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;color:#fff;box-shadow:0 0 20px #22c55e66}.success-title{font-size:1.5rem;color:#86efac;margin-bottom:.5rem}.success-desc{color:var(--card-text-secondary);margin-bottom:1.5rem}.btn-retry{background:var(--card-bg);border:1px solid var(--card-border);color:var(--card-text-secondary);padding:.5rem 1rem;border-radius:6px;font-size:.85rem;cursor:pointer;transition:all .2s}.btn-retry:hover{background:#ffffff0d;color:#fff}.selector-lab{display:flex;flex-direction:column;gap:1.5rem}.selector-lab-controls{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}.selector-lab-btn{display:flex;align-items:center;gap:.5rem;border-radius:99px;padding:.5rem 1rem;font-size:.9rem;font-weight:700;border:1px solid var(--card-border);background:#1e293b80;color:var(--card-text-muted);cursor:pointer;transition:all .2s}.selector-lab-btn:hover{background:#ffffff0d;color:#fff}.selector-lab-btn.tag.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff;box-shadow:0 4px 12px #3b82f64d}.selector-lab-btn.class.active{background:var(--accent-success);border-color:var(--accent-success);color:#fff;box-shadow:0 4px 12px #22c55e4d}.selector-lab-btn.id.active{background:var(--accent-warning);border-color:var(--accent-warning);color:#fff;box-shadow:0 4px 12px #eab3084d}.selector-lab-code{background:#0f172acc;border:1px solid var(--card-border);border-radius:12px;padding:1rem;font-family:monospace;font-size:.9rem;color:#e2e8f0;text-align:center}.selector-lab-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem}.selector-lab-item{position:relative;height:120px;border:1px solid var(--card-border);background:#1e293b66;border-radius:12px;display:flex;align-items:center;justify-content:center;transition:all .3s}.selector-lab-item.selected.tag{border-color:var(--accent-primary);background:#3b82f626;box-shadow:0 0 0 2px #3b82f64d}.selector-lab-item.selected.class{border-color:var(--accent-success);background:#22c55e26;box-shadow:0 0 0 2px #22c55e4d}.selector-lab-item.selected.id{border-color:var(--accent-warning);background:#eab30826;box-shadow:0 0 0 2px #eab3084d}.selector-lab-label{position:absolute;top:8px;left:8px;font-size:.75rem;font-family:monospace;color:var(--card-text-muted)}.selector-lab-selected{display:flex;flex-direction:column;align-items:center;gap:.5rem}.selector-lab-check{padding:.5rem;border-radius:50%;color:#fff;display:flex}.selector-lab-check.tag{background:var(--accent-primary)}.selector-lab-check.class{background:var(--accent-success)}.selector-lab-check.id{background:var(--accent-warning)}.selector-lab-selected-text{font-size:.75rem;font-weight:700;text-transform:uppercase;color:#fff}.selector-lab-placeholder{width:48px;height:48px;border:2px dashed rgba(255,255,255,.1);border-radius:50%;display:flex;align-items:center;justify-content:center}.selector-lab-placeholder-dot{width:6px;height:6px;background:#fff3;border-radius:50%}