:root{--codeff-charcoal:#212728;--codeff-brown:#6b5e3e;--codeff-surface:#303637;--codeff-blue:#1eaedb;--codeff-silver:#e0e0e0;--codeff-muted:#aeb7b9;--codeff-border:rgba(255,255,255,.14)}
html{background:var(--codeff-charcoal)}body{margin:0!important;background:linear-gradient(135deg,var(--codeff-brown),var(--codeff-charcoal) 42%) fixed!important;color:var(--codeff-silver)!important;font-family:"DM Sans","Open Sans",Arial,sans-serif!important;min-height:100vh}.codeff-app{min-height:100vh;background:transparent!important;color:var(--codeff-silver);padding-bottom:48px}.codeff-app-header{min-height:72px;padding:12px clamp(18px,5vw,72px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--codeff-border);background:rgba(33,39,40,.9);backdrop-filter:blur(12px);position:relative;z-index:5}.codeff-brand{display:flex;align-items:center;gap:10px;color:#fff!important;text-decoration:none!important;font-weight:700;font-size:20px}.codeff-brand img{width:40px;height:40px;object-fit:contain}.codeff-app-header nav{display:flex;gap:10px}.codeff-app-header nav a{color:var(--codeff-silver)!important;text-decoration:none!important;padding:9px 13px;border-radius:8px;font-size:14px}.codeff-app-header nav a:hover{background:rgba(30,174,219,.12);color:#fff!important}.codeff-app-main{width:min(1180px,calc(100% - 36px));margin:0 auto;padding:64px 0}.codeff-kicker{color:var(--codeff-blue);font-weight:700;text-transform:uppercase;letter-spacing:1.7px;font-size:12px}.codeff-app h1{color:#fff!important;font-size:clamp(36px,5vw,64px)!important;line-height:1.05!important;margin:12px 0 16px!important}.codeff-lead{color:var(--codeff-muted)!important;font-size:18px!important;line-height:1.6!important;max-width:650px;margin:0 0 44px!important}.codeff-demo-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px!important}.codeff-demo-card{display:block!important;margin:0!important;padding:14px!important;background:rgba(48,54,55,.88);border:1px solid var(--codeff-border);border-radius:14px;text-decoration:none!important;transition:transform .25s,border-color .25s,box-shadow .25s}.codeff-demo-card:hover{transform:translateY(-5px);border-color:var(--codeff-blue);box-shadow:0 22px 45px rgba(0,0,0,.22)}.codeff-demo-card img{width:100%!important;height:170px!important;object-fit:cover!important;border-radius:9px!important;margin:0!important}.codeff-demo-card p{color:#fff!important;text-align:left!important;font-weight:700!important;font-size:17px!important;margin:16px 4px 8px!important}.codeff-demo-card p:after{content:" ↗";color:var(--codeff-blue)}.codeff-tool-shell{width:min(1540px,calc(100% - 40px));margin:28px auto;background:rgba(48,54,55,.93)!important;border:1px solid var(--codeff-border);border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.22)}.codeff-tool-shell h1{font-size:clamp(30px,4vw,48px)!important}.codeff-tool-shell input,.codeff-tool-shell textarea{color:#fff!important}.codeff-tool-shell a{color:var(--codeff-blue)!important}@media(max-width:700px){.codeff-app-header{align-items:flex-start}.codeff-app-header nav{gap:0;flex-direction:column;text-align:right}.codeff-app-header nav a{padding:4px 8px}.codeff-app-main{padding-top:42px}.codeff-demo-grid{grid-template-columns:1fr}.codeff-tool-shell{width:calc(100% - 20px);margin:10px auto}.codeff-tool-shell>div{width:100%!important;display:block!important;height:auto!important;min-height:0!important}.codeff-tool-shell .js-plotly-plot{height:55vh!important}}