:root{
  --primary:#0E81E2; --primary-600:#0C73C9; --primary-700:#0A64AE;
  --success:#10B981; --warn:#F59E0B; --danger:#EF4444;
  --ink-900:#0B1220; --ink-700:#2B3445; --ink-500:#6B7280;
  --line:#E5E7EB; --bg:#F8FAFC; --card:#FFFFFF;
  --radius-card:16px; --radius-btn:100px; --shadow-lg:0 10px 30px rgba(14,129,226,.08);
  --focus-ring:0 0 0 3px rgba(14,129,226,.25);
  --container:1400px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:40px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink-900);
  font-family:Poppins, sans-serif; scroll-behavior: smooth;}
a{color:var(--primary);text-decoration:none} a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}

.disabled-item {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed; /* Add a "not allowed" cursor to show that the item is disabled */
  position: relative; /* Make sure we can position an icon or other elements */
}

.ctl-container{max-width:var(--container);margin:0 auto;padding:0 16px}
.ctl-grid{display:grid;gap:var(--space-5)}
@media (min-width:980px){ .ctl-grid--2{grid-template-columns:minmax(0,1fr) 300px} }

.ctl-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(6px);border-bottom:1px solid var(--line)}
.ctl-header__inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.ctl-logo{font-weight:700;color:var(--ink-900)}
.ctl-nav a{color:var(--ink-700)}

.ctl-footer{border-top:1px solid var(--line);padding:24px 0;color:var(--ink-500);text-align:center}

.ctl-hero h1{font-size:32px;line-height:1.2;margin:6px 0}
.ctl-hero p{color:var(--ink-500);margin-top:8px}

.ctl-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--shadow-lg);padding:20px}

.ctl-aside{position:sticky;top:76px;align-self:start}
.ctl-badge{display:inline-block;background:var(--primary);color:#fff;padding:6px 10px;border-radius:999px;font-size:12px;margin-bottom:8px}

.ctl-btn{background:var(--primary);color:#fff;border:none;border-radius:var(--radius-btn); display: inline-block;
  padding:10px 20px;font-weight:400;cursor:pointer;transition:transform .03s ease,background .2s}
.ctl-btn:hover{background:var(--primary-600)} .ctl-btn:active{transform:translateY(1px)}
.ctl-btn--ghost{background:#fff;color:var(--ink-900);border:1px solid var(--line)}
.ctl-btn--ghost:hover{color: #fff;}

.ctl-in{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit;color:var(--ink-900)}
.ctl-help{font-size:12px;color:var(--ink-500);margin-top:6px}

.ctl-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#0b1220;color:#dbeafe;
  border-radius:12px;padding:14px;overflow:auto;border:1px solid #0E223F}

.u-mt-3{margin-top:var(--space-3)} .u-mt-4{margin-top:var(--space-4)} .u-mt-5{margin-top:var(--space-5)}
.u-flex{display:flex} .u-items-center{align-items:center} .u-gap-3{gap:var(--space-3)}