.csf-lab-design{--lab-bg:#080f1c;--lab-panel:#101d2d;--lab-inset:#0b1625;--lab-line:#2b3d53;--lab-text:#eaf0f7;--lab-muted:#aebcd0;--lab-accent:#d6b36e;--lab-focus:#7bd5df;background:var(--lab-bg);color:var(--lab-text);font-family:var(--csf-font);min-height:70vh;color-scheme:dark}.csf-lab-design .csf-lab-content{max-width:1440px;margin:0 auto;padding:clamp(16px,3vw,32px)}.csf-lab-design .csf-lab-content>:first-child{background:transparent!important;background-image:none!important;min-height:0!important;color:var(--lab-text)}.csf-lab-design [data-lab-surface],.csf-lab-design [data-slot=card]:not([class*=green]):not([class*=red]):not([class*=yellow]):not([class*=amber]){background:var(--lab-panel)!important;background-image:none!important;border:1px solid var(--lab-line)!important;border-radius:16px!important;box-shadow:0 8px 24px #00000010!important;color:var(--lab-text)}.csf-lab-design :where(h1,h2,h3,h4){font-family:var(--csf-font)!important;color:var(--lab-text)!important;text-shadow:none!important;letter-spacing:-.025em!important;line-height:1.3}.csf-lab-design h1{font-size:clamp(1.6rem,3vw,2.3rem)!important;font-weight:700!important}.csf-lab-design :where(h2,[data-slot=card-title]){font-size:1.25rem;font-weight:650}.csf-lab-design :where(p,li){line-height:1.7}.csf-lab-design :where(p+p,p+ul,p+ol,ul+p,ol+p){margin-top:1rem}.csf-lab-design [data-slot=card-description]{color:var(--lab-muted);line-height:1.65}.csf-lab-design :where(button,input,textarea,select){font-family:var(--csf-font)}.csf-lab-design :where(input:not([type=radio]):not([type=checkbox]),textarea,select):not(.font-mono){background-color:var(--lab-inset);color:var(--lab-text);border-color:var(--lab-line);border-radius:8px}.csf-lab-design :where(button,a,input,textarea,select,summary):focus-visible{outline:2px solid var(--lab-focus)!important;outline-offset:3px}.csf-lab-design button{transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease}.csf-lab-design button:disabled{cursor:not-allowed;opacity:.5}.csf-lab-design .csf-lab-sections>[role=tablist],.csf-lab-design [data-lab-tabs],.csf-lab-design .csf-lab-tabs,.csf-lab-design .csf-lab-compat-nav>[role=tablist]{display:flex!important;align-items:center;justify-content:flex-start;gap:6px;overflow-x:auto;max-width:100%;width:100%;height:auto;min-height:56px;background:var(--lab-inset)!important;border:1px solid var(--lab-line)!important;border-radius:12px;padding:6px!important;margin:20px 0;scrollbar-width:thin}.csf-lab-design .csf-lab-sections>[role=tablist]>button,.csf-lab-design [data-lab-tabs]>button,.csf-lab-design [data-lab-tab],.csf-lab-design .csf-lab-tabs>button,.csf-lab-design .csf-lab-compat-nav [role=tab]{flex:0 0 auto!important;white-space:nowrap;height:auto;min-height:44px;padding:10px 16px!important;border:1px solid transparent!important;border-radius:8px!important;background:transparent!important;color:var(--lab-muted)!important;font-family:var(--csf-font)!important;font-size:14px!important;font-weight:600;letter-spacing:normal!important;text-transform:none;text-shadow:none!important;box-shadow:none!important}.csf-lab-design .csf-lab-sections>[role=tablist]>button[data-state=active],.csf-lab-design [data-lab-tab][aria-pressed=true],.csf-lab-design .csf-lab-tabs>button[aria-selected=true],.csf-lab-design .csf-lab-compat-nav [role=tab][data-state=active]{color:var(--lab-accent)!important;background:#d6b36e15!important;border-color:#d6b36e55!important}.csf-lab-design :where(.csf-lab-tabs,[data-lab-tabs],.csf-lab-sections>[role=tablist]) button:not(:disabled):hover{background:#7bd5df12!important;border-color:var(--lab-line)!important}.csf-lab-design [role=tabpanel]{min-width:0}.csf-lab-design [hidden]{display:none!important}.csf-lab-design .csf-lab-compat-nav{max-width:1440px;margin:auto;background:transparent;border:0;padding:16px 32px 0;display:block}.csf-lab-design .csf-lab-compat-nav a{font-size:14px;color:var(--lab-muted)}.csf-lab-design .csf-lab-foot{color:var(--lab-muted);font-size:13px;align-items:center;padding:16px 0;border-top:1px solid var(--lab-line)}.csf-lab-design :where(.csf-lab-foot button,.csf-action){color:var(--lab-accent);background:var(--lab-panel);border:1px solid var(--lab-line);border-radius:9px;min-height:44px;padding:10px 16px}.csf-lab-design .csf-guide{background:var(--lab-panel);border-color:var(--lab-line)}.csf-lab-design .csf-guide p{color:var(--lab-muted)}.csf-lab-design .csf-lab-shell{background:transparent;padding:0}@media (max-width:640px){.csf-lab-design .csf-lab-compat-nav{padding:16px 16px 0}.csf-lab-design .csf-lab-content,.csf-lab-design [data-lab-surface]{padding:16px}.csf-lab-design .csf-lab-foot{align-items:stretch;flex-direction:column}}@media (prefers-reduced-motion:reduce){.csf-lab-design button{transition:none}}.csf-lab-design .csf-lab-content{min-width:0;overflow-x:auto}.csf-lab-design .csf-lab-sections>[role=tabpanel]{overflow-x:auto}.csf-lab-design .csf-lab-sections{min-width:0;max-width:100%}.csf-lab-design .csf-lab-content{width:100%;box-sizing:border-box}.csf-lab-design .csf-lab-compat{min-width:0;max-width:100%}:root{--csf-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--csf-mono:"JetBrains Mono",ui-monospace,monospace;--csf-bg:#080f1c;--csf-panel:#101d2d;--csf-ink:#eaf0f7;--csf-muted:#aebcd0;--csf-line:#2b3d53;--csf-gold:#d6b36e;--csf-cyan:#7bd5df;--csf-header-height:84px}.csf-platform{font-family:var(--csf-font);min-height:100vh;background:var(--csf-bg);color:var(--csf-ink);--font-sans:var(--csf-font);--font-mono:var(--csf-mono)}.csf-platform :where(h1,h2,h3,h4,h5,h6,p,label,button,input,select,textarea,a){font-family:var(--csf-font)}.csf-platform :where(code,pre,kbd,.font-mono,.terminal,.terminal-output){font-family:var(--csf-mono)}.csf-platform :where(p,li){line-height:1.65}.csf-platform :where(h1,h2,h3){text-wrap:balance;letter-spacing:-.025em}.csf-platform :where(button,a,input,select,textarea,summary):focus-visible{outline:2px solid var(--csf-cyan);outline-offset:4px}.csf-header{position:sticky;top:0;z-index:60;background:#080f1cf5;border-bottom:1px solid var(--csf-line);color:var(--csf-ink);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);font-family:var(--csf-font)}.csf-header-inner{max-width:1600px;margin:auto;padding:12px 24px;display:flex;align-items:center;gap:24px;min-height:var(--csf-header-height)}.csf-header a{text-decoration:none;color:inherit}.csf-brand{display:flex;align-items:center;gap:10px;flex-shrink:0}.csf-brand img{width:54px;height:48px;object-fit:contain}.csf-brand span{font-size:12px;font-weight:800;letter-spacing:.08em}.csf-brand small{display:block;color:var(--csf-muted);font-weight:400;letter-spacing:.03em;margin-top:4px}.csf-header nav{display:flex;align-items:center;gap:4px;flex:1;justify-content:center}.csf-header nav a,.csf-account button,.csf-action{padding:9px 10px;border:1px solid transparent;border-radius:9px;font-size:13px;white-space:nowrap;background:transparent;cursor:pointer}.csf-header nav a:hover,.csf-header nav a[aria-current=page]{color:var(--csf-gold);background:#d6b36e12;border-color:#d6b36e35}.csf-account{display:flex;align-items:center;gap:8px}.csf-identity{max-width:150px;font-size:12px}.csf-identity strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.csf-identity small{color:var(--csf-cyan)}.csf-account .csf-action{border-color:#d6b36e80;color:var(--csf-gold)}.csf-account button{color:var(--csf-muted)}.csf-menu-toggle{display:none}.csf-skip{position:absolute;left:16px;top:-100px;padding:12px;background:var(--csf-panel);z-index:100}.csf-skip:focus{top:12px}.csf-content{scroll-margin-top:100px}.csf-content:focus{outline:none}.csf-lab-shell{background:var(--csf-bg);color:var(--csf-ink);padding:24px;min-height:70vh}.csf-lab-shell>div{max-width:1280px;margin:auto}.csf-lab-tabs{display:flex;gap:6px;overflow-x:auto;border-bottom:1px solid var(--csf-line);padding:8px 0;margin:20px 0}.csf-lab-tabs button{padding:12px 18px;white-space:nowrap;border:1px solid transparent;border-radius:10px 10px 0 0;color:var(--csf-muted);background:transparent}.csf-lab-tabs button[aria-selected=true]{color:var(--csf-gold);background:var(--csf-panel);border-color:var(--csf-line)}.csf-lab-tabs button:disabled{opacity:.5;cursor:not-allowed}.csf-guide{border:1px solid var(--csf-line);border-radius:18px;background:var(--csf-panel);padding:clamp(18px,3vw,32px);max-width:900px;margin:20px auto}.csf-guide h2{font-size:24px;margin-bottom:12px}.csf-guide p{margin:10px 0;color:var(--csf-muted)}.csf-guide ol{list-style:decimal;padding-left:24px}.csf-guide li{margin:14px 0}.csf-guide details{margin:12px 0;border:1px solid var(--csf-line);border-radius:12px;padding:16px}.csf-guide summary{cursor:pointer;color:var(--csf-cyan);font-weight:600}.csf-guide .csf-label{color:var(--csf-gold);font-size:12px;text-transform:uppercase;letter-spacing:.1em}.csf-lab-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:24px}.csf-lab-foot button{border:1px solid var(--csf-line);border-radius:10px;padding:12px 18px}.csf-lab-foot button:disabled{opacity:.5}@media (max-width:1250px){.csf-header-inner{flex-wrap:wrap;gap:12px}.csf-menu-toggle{display:block;margin-left:auto;border:1px solid var(--csf-line);border-radius:8px;padding:8px 12px}.csf-header nav{display:none;order:3;flex-basis:100%;justify-content:flex-start;flex-wrap:wrap}.csf-header nav.is-open{display:flex}.csf-account{margin-left:auto}}@media (max-width:600px){.csf-header-inner{padding:10px 14px}.csf-brand span{font-size:10px}.csf-brand img{width:40px}.csf-account{width:100%;justify-content:flex-end}.csf-identity{margin-right:auto}.csf-lab-shell{padding:16px}.csf-header nav a{flex-basis:45%}}@media (prefers-reduced-motion:reduce){.csf-header *{scroll-behavior:auto;transition:none!important}}.csf-course-learning-nav{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 24px;border-bottom:1px solid var(--csf-line);background:var(--csf-panel);color:var(--csf-ink)}.csf-course-learning-nav a{padding:8px 12px;border-radius:8px;text-decoration:none}.csf-course-learning-nav a:hover,.csf-course-learning-nav a[aria-current=page]{background:#d6b36e18;color:var(--csf-gold)}.csf-course-learning-nav span{font-size:12px;color:var(--csf-muted)}.csf-lab-compat-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 24px;border-bottom:1px solid var(--csf-line);background:var(--csf-panel)}.csf-lab-compat [hidden]{display:none!important}.csf-platform :where(h1,h2,h3,h4,h5,h6,p,label,button,input,select,textarea,a):not(.font-mono,.font-mono *,pre *,code *,kbd *,.terminal,.terminal *){font-family:var(--csf-font)!important}.csf-lab-shell [hidden]{display:none!important}
