.visual-page{
  --v-bg:#151c2b;
  --v-card:#1c2737;
  --v-card-alt:#222f41;
  --v-fg:#f3f5f7;
  --v-muted:#aab4c4;
  --v-border:#354255;
  --v-accent:#a4e82f;
  --v-blue:#60a5fa;
  min-height:100vh;
  background:radial-gradient(circle at top,#1d2b40 0%,var(--v-bg) 45%,#101622 100%);
  color:var(--v-fg);
}
.visual-page.visual-light{
  color-scheme:light;
  --v-bg:#f5f7fb;
  --v-card:#fff;
  --v-card-alt:#eef2f8;
  --v-fg:#182234;
  --v-muted:#536174;
  --v-border:#cbd5e1;
  --v-accent:#4d7c0f;
  background:var(--v-bg);
}
.visual-wrap{width:min(1080px,100% - 28px);margin:0 auto}
.visual-hero{padding:30px 0 25px;background:radial-gradient(ellipse at 80% 15%,rgba(164,232,47,.18),transparent 36%),linear-gradient(128deg,#101925,#14283a 54%,#10271f);border-bottom:1px solid var(--v-border)}
.visual-hero h1{margin:12px 0 4px;font-size:clamp(2.1rem,6vw,3.8rem);line-height:1.04}
.visual-hero p{margin:8px 0 18px;color:#e2e8f0}
.visual-scoreboard{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.visual-scoreboard>div,.visual-theme-toggle{display:flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid rgba(255,255,255,.28);border-radius:12px;background:rgba(255,255,255,.08)}
.visual-scoreboard strong{font-size:1.2rem}
.visual-scoreboard span{color:#d5deeb;font-size:.88rem}
.visual-theme-toggle{min-height:44px;color:white}
.visual-page main{padding-top:14px}
.visual-filter-card,.visual-question-card,.visual-panel,.visual-exam-panel{
  margin:16px 0;padding:18px;border:1px solid var(--v-border);border-radius:18px;
  background:linear-gradient(180deg,var(--v-card),var(--v-card-alt));box-shadow:0 12px 25px rgba(0,0,0,.12)
}
.visual-filter-card h2,.visual-panel h2{margin:0 0 12px}
.visual-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:12px;align-items:end}
.visual-filters label,.visual-answer-label{display:grid;gap:5px;font-weight:700}
.visual-filters select,.visual-answer-area input[type=text]{
  width:100%;min-height:44px;padding:9px 11px;border:1px solid var(--v-border);border-radius:10px;
  background:var(--v-bg);color:var(--v-fg);font:inherit
}
.visual-muted{color:var(--v-muted);font-size:.9rem}
.visual-question-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.visual-kicker{color:var(--v-accent);font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.visual-question-top h2{margin:3px 0;font-size:1.2rem}
.visual-question-top code{max-width:48%;overflow-wrap:anywhere;color:var(--v-muted);font-size:.75rem}
.visual-prompt{font-size:1.12rem;font-weight:650}
.visual-diagram{display:flex;justify-content:center;min-height:170px;margin:12px 0;padding:10px;border:1px solid var(--v-border);border-radius:14px;background:color-mix(in srgb,var(--v-bg) 72%,transparent);overflow:hidden}
.visual-diagram svg{width:min(650px,100%);height:auto;min-height:170px;max-height:430px;color:var(--v-fg);overflow:visible;touch-action:manipulation}
.visual-diagram:has(svg.v-touch-coordinate,svg.v-touch-numberline,svg.v-touch-bar,svg.v-touch-percent-grid){justify-content:flex-start;overflow-x:auto}
.visual-diagram svg.v-touch-coordinate,.visual-diagram svg.v-touch-numberline{width:650px;max-width:none;max-height:none;flex-shrink:0}
.visual-diagram svg.v-touch-bar{width:650px;max-width:none;max-height:none;flex-shrink:0}
.visual-diagram svg.v-touch-percent-grid{width:450px;height:450px;min-height:450px;max-width:none;max-height:none;flex-shrink:0}
.visual-diagram .v-grid,.visual-diagram .v-polar{stroke:color-mix(in srgb,var(--v-muted) 35%,transparent);stroke-width:1;fill:none}
.visual-diagram .v-region{fill:color-mix(in srgb,var(--v-accent) 20%,transparent);stroke:var(--v-accent);stroke-width:2}
.visual-diagram .v-axis{stroke:var(--v-muted);stroke-width:1.5}
.visual-diagram .v-line{stroke:var(--v-blue);stroke-width:3;fill:none}
.visual-diagram .v-rise-run,.visual-diagram .v-angle{stroke:var(--v-accent);stroke-width:2;fill:none}
.visual-diagram .v-point{fill:var(--v-accent);stroke:var(--v-fg);stroke-width:1.3}
.visual-diagram .v-empty-point{fill:var(--v-card);stroke:var(--v-fg);stroke-width:2}
.visual-diagram .v-fill{fill:color-mix(in srgb,var(--v-accent) 72%,transparent);stroke:var(--v-accent);stroke-width:1}
.visual-diagram .v-empty{fill:color-mix(in srgb,var(--v-blue) 12%,transparent);stroke:var(--v-blue);stroke-width:1.4}
.visual-diagram .v-shade{fill:color-mix(in srgb,var(--v-accent) 20%,transparent);stroke:none}
.visual-diagram .v-outline{fill:color-mix(in srgb,var(--v-blue) 8%,transparent);stroke:var(--v-blue);stroke-width:3}
.visual-diagram .v-click-cell{fill:var(--v-card);stroke:var(--v-blue);stroke-width:2;cursor:pointer;touch-action:manipulation}
.visual-diagram .v-click-cell:hover,.visual-diagram .v-click-cell:focus,.visual-diagram .v-click-cell.v-selected{fill:color-mix(in srgb,var(--v-accent) 70%,transparent);outline:none}
.visual-diagram .v-click-target{fill:transparent;stroke:transparent}
.visual-diagram text{fill:currentColor;font-family:system-ui,sans-serif}
.visual-answer-area fieldset{display:grid;gap:8px;padding:0;border:0}
.visual-answer-area legend{margin-bottom:8px;font-weight:700}
.visual-option{display:flex;align-items:center;gap:8px;min-height:44px;padding:7px 10px;border:1px solid var(--v-border);border-radius:10px;cursor:pointer}
.visual-option input{width:20px;height:20px;accent-color:var(--v-accent)}
.visual-option:has(svg){align-items:center;flex-wrap:wrap}
.visual-option svg{width:min(190px,100%);height:auto;color:var(--v-fg)}
.visual-feedback{min-height:1.5em;font-weight:750}
.visual-actions,.visual-exam-controls{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.visual-page button{min-height:44px;padding:9px 14px;border:1px solid var(--v-border);border-radius:10px;background:var(--v-card-alt);color:var(--v-fg);font:inherit;font-weight:700;cursor:pointer}
.visual-page button:hover{border-color:var(--v-accent)}
.visual-page button:disabled{opacity:.55;cursor:not-allowed}
.visual-page .visual-primary,.visual-page #visual-start-exam{background:var(--v-accent);border-color:var(--v-accent);color:#172113}
.visual-secondary-actions button{font-size:.9rem}
.visual-hint{padding:10px 12px;border-left:4px solid var(--v-blue);background:color-mix(in srgb,var(--v-blue) 10%,var(--v-card));border-radius:8px}
.visual-explanation{margin:12px 0;padding:12px;border:1px solid var(--v-border);border-radius:12px}
.visual-explanation summary{min-height:30px;font-weight:800;cursor:pointer}
.visual-explanation li,.visual-review-card li{margin:5px 0}
.visual-support{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--v-border)}
.visual-support a{display:inline-flex;align-items:center;min-height:40px;padding:7px 10px;border:1px solid var(--v-border);border-radius:9px;text-decoration:none}
.visual-dashboard{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.visual-panel ul{padding-left:20px}
.visual-panel li{margin:7px 0}
.visual-panel li button{text-align:left}
.visual-exam-panel progress{width:100%;height:12px;accent-color:var(--v-accent)}
.visual-exam-top{display:flex;justify-content:space-between;gap:12px}
.visual-review-card{margin:12px 0;padding:14px;border:1px solid var(--v-border);border-radius:12px}
.visual-footer{padding:20px;text-align:center;color:var(--v-muted)}
[hidden]{display:none!important}
@media(max-width:700px){
  .visual-filters{grid-template-columns:1fr 1fr}
  .visual-filters button{grid-column:1/-1}
  .visual-dashboard{grid-template-columns:1fr}
  .visual-question-card,.visual-filter-card,.visual-panel,.visual-exam-panel{padding:14px}
}
@media(max-width:430px){
  .visual-wrap{width:calc(100% - 20px)}
  .visual-filters{grid-template-columns:1fr}
  .visual-filters button{grid-column:auto}
  .visual-diagram{min-height:140px;padding:5px}
  .visual-diagram svg{min-width:0}
  .visual-question-top{align-items:flex-start;flex-direction:column}
  .visual-question-top code{max-width:100%}
  .visual-actions button{flex:1 1 44%}
}
@media(prefers-reduced-motion:reduce){
  .visual-page *, .visual-page *::before,.visual-page *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
}