:root {
  --v21-night: #061526;
  --v21-deep: #0b2540;
  --v21-blue: #1777e6;
  --v21-cyan: #45d4ee;
  --v21-mint: #63e6ad;
}

html, body { max-width: 100%; }
body { overflow-wrap: anywhere; }
button, a, input, select, textarea { min-height: 44px; }
:focus-visible { outline: 3px solid #42d9f5; outline-offset: 3px; }

/* V21-001: typed, placeholder, error, focus, disabled and autofill states. */
.training-result-input,
.workout-body .field { color: var(--ink); }
.training-result-input :is(input, textarea, select),
.workout-body :is(input, textarea, select) {
  color: var(--ink) !important;
  background: color-mix(in srgb, var(--card, #fff) 92%, #dceeff) !important;
  border: 2px solid color-mix(in srgb, var(--ink) 28%, transparent) !important;
  caret-color: var(--ink);
  opacity: 1;
}
.training-result-input :is(input, textarea)::placeholder,
.workout-body :is(input, textarea)::placeholder { color: color-mix(in srgb, var(--ink) 64%, transparent); opacity: 1; }
.training-result-input :is(input, textarea, select):focus,
.workout-body :is(input, textarea, select):focus { border-color: var(--v21-blue) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--v21-blue) 22%, transparent); }
.training-result-input :is(input, textarea, select):disabled,
.workout-body :is(input, textarea, select):disabled { color: color-mix(in srgb, var(--ink) 62%, transparent) !important; background: color-mix(in srgb, var(--card, #fff) 78%, #8394a8) !important; }
.training-result-input input:-webkit-autofill,
.workout-body input:-webkit-autofill { -webkit-text-fill-color: var(--ink) !important; box-shadow: 0 0 0 1000px color-mix(in srgb, var(--card, #fff) 92%, #dceeff) inset !important; }
.training-result-input .error,
.workout-body .error { color: #c62b2b; font-weight: 800; }

/* Premium public shell. */
[data-v21-public] { background: radial-gradient(circle at 72% 8%, rgba(34,184,236,.18), transparent 30%), linear-gradient(180deg,#061526,#0a223b 56%,#071827); color:#eaf6ff; min-height:100vh; }
[data-v21-public] .public-nav { background:rgba(5,18,33,.82); border-color:rgba(140,207,255,.18); backdrop-filter:blur(18px); }
[data-v21-public] .public-hero::after { content:none !important; display:none !important; background:none !important; }
[data-v21-public] .public-nav-inner { max-width:1180px; }
[data-v21-public] .public-secondary { color:#d9ebf8; background:transparent; border-color:transparent; }
[data-v21-public] .public-hero { max-width:1180px; min-height:min(760px,calc(100vh - 74px)); align-items:center; padding-block:76px; }
[data-v21-public] .public-kicker { color:var(--v21-cyan); letter-spacing:.2em; }
[data-v21-public] .public-hero h1 { max-width:760px; font-size:clamp(2.75rem,6vw,5.4rem); line-height:.98; letter-spacing:-.055em; }
[data-v21-public] .public-hero p { max-width:680px; font-size:clamp(1.05rem,1.8vw,1.35rem); color:#b8cde0; }
[data-v21-public] .btn.primary { background:linear-gradient(135deg,var(--v21-blue),var(--v21-cyan)); color:#fff; border:0; }
.v21-preview-shell { border:1px solid rgba(127,200,255,.22); border-radius:24px; padding:14px; background:rgba(5,18,32,.7); box-shadow:0 30px 80px rgba(0,0,0,.36); }
.v21-preview-label { display:block; margin:0 0 10px; color:#9cc6e4; font-size:.72rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.v21-preview-shell .exercise-preview-host svg { width:100%; display:block; }
[data-v21-public] .public-section { max-width:1180px; padding-block:88px; }
.v21-steps, .v21-audiences { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.v21-step, .v21-audience { border:1px solid rgba(129,199,247,.18); border-radius:22px; padding:24px; background:linear-gradient(150deg,rgba(18,54,88,.78),rgba(7,27,47,.78)); }
.v21-step, .v21-audience,
.v21-step h3, .v21-audience h3 { color:#eef8ff; }
.v21-step p, .v21-audience p { color:#bfd3e4; }
.v21-step svg { width:42px; height:42px; fill:none; stroke:var(--v21-cyan); stroke-width:1.7; }
.v21-audience:first-child { grid-column:span 2; }
.v21-demo-teaser { display:flex; align-items:center; justify-content:space-between; gap:24px; border:1px solid rgba(99,230,173,.28); border-radius:28px; padding:34px; background:linear-gradient(125deg,rgba(23,119,230,.19),rgba(99,230,173,.1)); }
[data-v21-public] .public-footer { border-color:rgba(126,194,240,.17); }
.v21-public-demo { min-height:100vh; background:linear-gradient(180deg,#061526,#0b2540); color:#eef8ff; }
.v21-demo-main { max-width:1180px; margin:auto; padding:48px 20px 90px; }
.v21-demo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.v21-demo-card { border:1px solid rgba(131,202,250,.22); border-radius:24px; overflow:hidden; background:#0b2138; }
.v21-demo-card-visual { padding:12px; background:#061424; }
.v21-demo-card-visual svg { width:100%; display:block; }
.v21-demo-card-body { padding:22px; }
.v21-demo-card-body { color:#f4faff; }
.v21-public-demo .v21-demo-card .v21-demo-title { color:#f4faff !important; }
.v21-demo-card-body .v21-meta-row { color:#c9dceb; }
.v21-demo-card-body .v21-mini-description { color:#b8cee0; }
.v21-demo-title { margin:.35rem 0 .8rem; font-size:clamp(1.25rem,2vw,1.75rem); }

/* Canonical vertical exercise cards. */
.v21-exercise-card { display:flex; flex-direction:column; width:100%; overflow:visible; }
.v21-exercise-card .v21-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px 16px 8px; }
.v21-exercise-card .assignment-title { white-space:normal; overflow:visible; text-overflow:clip; font-size:clamp(1.08rem,2.2vw,1.32rem); line-height:1.2; margin:0; }
.v21-exercise-card .code-pill { display:inline-flex; font-size:.69rem; margin-top:5px; }
.v21-exercise-card .assignment-thumb { order:2; width:100%; height:auto; padding:8px 12px; background:transparent; border-radius:0; }
.v21-exercise-card .assignment-thumb svg,
.v21-exercise-card .exercise-preview-host svg { width:100%; height:auto; display:block; }
.v21-exercise-card .v21-card-meta { order:3; display:grid; gap:7px; padding:8px 16px 16px; }
.v21-meta-row { display:flex; gap:8px; flex-wrap:wrap; }
.v21-mini-description { margin:0; color:var(--muted); line-height:1.5; }

/* Compact authenticated mobile header. */
.mobile-profile-toggle { display:none; }
.mobile-profile-menu { display:none; }
.mobile-profile-menu.open { display:grid; }

/* Exercise network. */
.exercise-network-toolbar { display:grid; grid-template-columns:minmax(220px,2fr) repeat(4,minmax(150px,1fr)); gap:10px; }
.exercise-network-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:18px; margin-top:18px; }
.exercise-network-canvas { min-height:560px; border:1px solid var(--line); border-radius:20px; background:color-mix(in srgb,var(--card,#fff) 94%,#1e78cf); position:relative; overflow:auto; }
.exercise-network-canvas { cursor:grab; touch-action:pan-x pan-y; }
.exercise-network-canvas.is-panning { cursor:grabbing; user-select:none; }
.network-view-controls { align-items:center; }
.network-view-controls output { min-width:4ch; text-align:center; font-weight:800; }
.exercise-network-canvas svg { width:100%; min-width:760px; min-height:540px; display:block; }
.network-node { cursor:pointer; }
.network-node rect { fill:var(--card,#fff); stroke:#3c8be8; stroke-width:2; }
.network-node text { fill:var(--ink); font-size:13px; }
.network-edge-prerequisite { stroke:#3c8be8; }
.network-edge-easier { stroke:#45bb79; stroke-dasharray:8 5; }
.network-edge-variant { stroke:#a36be3; stroke-dasharray:3 4; }
.network-list { display:grid; gap:9px; align-content:start; }
.network-list-item { width:100%; display:grid; gap:4px; text-align:left; border:1px solid var(--line); border-radius:14px; padding:12px; background:var(--card,#fff); color:var(--ink); }
.network-status { font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.network-status.is-linked { color:#15803d; }
.network-status.is-isolated { color:#a16207; }

@media (max-width: 1100px) {
  .exercise-network-toolbar, .exercise-network-layout { grid-template-columns:1fr; }
  .exercise-network-layout > * { min-width:0; }
}

@media (max-width: 800px) {
  [data-v21-public] .public-links [data-wide-link] { display:none; }
  [data-v21-public] .public-hero { grid-template-columns:1fr; min-height:auto; padding:44px 18px 64px; }
  .v21-steps, .v21-audiences, .v21-demo-grid { grid-template-columns:1fr; }
  .v21-audience:first-child { grid-column:auto; }
  .v21-demo-teaser { align-items:flex-start; flex-direction:column; }
  .top { position:sticky; top:0; z-index:1200; }
  .topin { min-height:64px; padding:8px 12px; align-items:center !important; flex-wrap:nowrap; }
  .topin > div:first-child { min-width:0; }
  .brand-shell .version, #whoami, .header-actions > .global-rating, .header-actions > .nav { display:none !important; }
  .mobile-profile-toggle { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:0 0 44px; padding:0; border-radius:50%; white-space:nowrap; }
  .mobile-profile-toggle svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
  .mobile-profile-menu { position:absolute; right:12px; top:58px; width:min(280px,calc(100vw - 24px)); gap:8px; padding:12px; border:1px solid var(--line); border-radius:16px; background:var(--card,#fff); box-shadow:0 18px 50px rgba(0,0,0,.25); }
  .mobile-profile-menu .btn { width:100%; }
  .wrap { width:100%; max-width:100%; padding:12px 10px; }
  .section-tabs { max-width:100%; overflow-x:auto; overscroll-behavior-inline:contain; }
  .grid, .card, .item { min-width:0; max-width:100%; }
  .assignment-summary { display:flex; flex-direction:column; align-items:stretch; padding:0; gap:0; }
  .assignment-chevron { position:absolute; right:16px; top:16px; }
  .v21-exercise-card .v21-card-heading { padding-right:48px; }
  .exercise-network-canvas { min-height:420px; }
}

@media (max-width: 430px) {
  .public-nav-inner { padding-inline:12px; }
  [data-v21-public] .public-brand .bt-brand-lockup { width:118px; }
  [data-v21-public] .public-hero h1 { font-size:clamp(2.45rem,12vw,3.55rem); }
  [data-v21-public] .public-section { padding:64px 16px; }
  .v21-demo-main { padding-inline:12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}