:root{color-scheme:dark light}

body{
  --ca3-border-strong: color-mix(in oklab,var(--border) 60%,rgba(59,130,246,.32) 40%);
  --ca3-border-soft: color-mix(in oklab,var(--border) 70%,rgba(37,99,235,.22) 30%);
  --ca3-surface-overlay: linear-gradient(165deg,color-mix(in oklab,var(--surface) 94%,rgba(59,130,246,.12) 6%),color-mix(in oklab,var(--surface) 88%,rgba(37,99,235,.10) 12%));
  --ca3-muted: color-mix(in oklab,var(--muted) 86%,rgba(59,130,246,.28) 14%);
  --ca3-heading: color-mix(in oklab,var(--text) 94%,white 6%);
  --ca3-chip: color-mix(in oklab,var(--surface) 72%,rgba(37,99,235,.25) 28%);
  --ca3-focus: rgba(59,130,246,.32);
}

@media (prefers-color-scheme: light){
  body:not(.dark){
    --ca3-surface-overlay: linear-gradient(175deg,color-mix(in oklab,var(--surface) 96%,rgba(59,130,246,.08) 4%),color-mix(in oklab,var(--surface) 90%,rgba(37,99,235,.08) 10%));
  }
}

main{margin-bottom:80px}

.practice-header{background:linear-gradient(135deg,color-mix(in oklab,var(--bg) 92%,transparent),color-mix(in oklab,var(--accent-2) 16%,transparent));border-bottom:1px solid color-mix(in oklab,var(--border) 70%,transparent);backdrop-filter:blur(12px)}
.practice-header__inner{width:min(1100px,92%);margin-inline:auto;padding:22px 0;display:flex;flex-direction:column;gap:18px}
.practice-header__top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.practice-header__brand{display:flex;flex-direction:column;gap:6px}
.practice-header__badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:color-mix(in oklab,var(--surface) 68%,rgba(37,99,235,.28) 32%);color:var(--ca3-heading);font-size:12px;font-weight:700;letter-spacing:.05em}
.practice-header__title{font-size:clamp(22px,3.6vw,32px);font-weight:800;letter-spacing:.035em;color:var(--ca3-heading)}
.practice-header__nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.practice-header__link{display:inline-flex;align-items:center;padding:8px 14px;border-radius:12px;border:1px solid transparent;text-decoration:none;color:var(--ca3-muted);background:color-mix(in oklab,var(--surface) 88%,transparent);font-weight:600;transition:background .18s ease,border .18s ease,color .18s ease}
.practice-header__link:hover{color:var(--ca3-heading);border-color:color-mix(in oklab,var(--accent) 42%,var(--border) 58%)}
.practice-header__link.is-active{color:var(--ca3-heading);border-color:color-mix(in oklab,var(--accent) 55%,var(--border) 45%);background:color-mix(in oklab,var(--surface) 72%,rgba(37,99,235,.22) 28%)}
.theme-toggle{background:color-mix(in oklab,var(--surface) 82%,transparent);border:1px solid color-mix(in oklab,var(--border) 68%,rgba(59,130,246,.24) 32%);border-radius:12px;padding:8px 12px;color:var(--ca3-heading);cursor:pointer;transition:transform .18s ease}
.theme-toggle:hover{transform:translateY(-1px)}

.page-title{width:min(1100px,92%);margin:22px auto 18px}
.page-title h1{margin:.2em 0;font-size:clamp(28px,4.2vw,38px)}
.page-title .lead{color:var(--ca3-muted);margin:0}

.ca3-shell{position:relative;width:min(1100px,92%);margin-inline:auto;margin-bottom:56px;padding:26px;border-radius:24px;border:1px solid var(--ca3-border-strong);background:var(--ca3-surface-overlay);box-shadow:var(--shadow,0 20px 44px rgba(15,23,42,.26));backdrop-filter:blur(10px)}
.ca3-shell::after{content:"";position:absolute;inset:18px;border-radius:20px;border:1px solid color-mix(in oklab,var(--border) 62%,rgba(59,130,246,.24) 38%);pointer-events:none;opacity:.55}
.ca3-shell__meta{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:18px}
.ca3-meta__index{font-size:15px;font-weight:700;color:var(--ca3-heading);letter-spacing:.04em}
.ca3-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--ca3-chip);color:var(--ca3-muted);font-size:13px;font-weight:600;box-shadow:0 2px 8px rgba(15,23,42,.16)}

.ca3-shell__controls{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:24px}
.ca3-shell__spacer{flex:1 1 32px}
.ca3-controls-block{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.ca3-btn{appearance:none;border-radius:12px;border:1px solid var(--ca3-border-soft);background:color-mix(in oklab,var(--surface) 92%,transparent);color:var(--ca3-heading);padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;box-shadow:var(--shadow,0 12px 28px rgba(15,23,42,.18));transition:transform .18s ease,background .18s ease,border .18s ease,box-shadow .18s ease}
.ca3-btn:hover:not(:disabled){transform:translateY(-1px);background:color-mix(in oklab,var(--surface) 80%,rgba(59,130,246,.18) 20%);border-color:color-mix(in oklab,var(--accent) 45%,var(--border) 55%)}
.ca3-btn:focus-visible{outline:3px solid var(--ca3-focus);outline-offset:3px}
.ca3-btn--primary{background:linear-gradient(135deg,color-mix(in oklab,var(--accent) 78%,#1d4ed8 22%),color-mix(in oklab,var(--accent-2) 70%,#0f172a 30%));border-color:transparent;color:#f8fafc;box-shadow:0 16px 34px rgba(14,116,144,.28)}
.ca3-btn--sub{background:color-mix(in oklab,var(--surface) 86%,rgba(59,130,246,.18) 14%)}
.ca3-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

.ca3-file{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px dashed color-mix(in oklab,var(--border) 68%,rgba(59,130,246,.32) 32%);color:var(--ca3-muted);background:color-mix(in oklab,var(--surface) 90%,transparent);font-weight:600;cursor:pointer;transition:border .18s ease,background .18s ease,color .18s ease}
.ca3-file:hover{color:var(--ca3-heading);border-color:color-mix(in oklab,var(--accent) 48%,var(--border) 52%);background:color-mix(in oklab,var(--surface) 82%,rgba(59,130,246,.18) 18%)}
.ca3-file input{display:none}

.ca3-shell__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr);gap:24px;margin-bottom:24px}
.ca3-pane{border:1px solid color-mix(in oklab,var(--border) 60%,rgba(59,130,246,.26) 40%);border-radius:20px;padding:20px;background:color-mix(in oklab,var(--surface) 92%,rgba(59,130,246,.10) 8%);box-shadow:0 14px 28px rgba(15,23,42,.18);display:flex;flex-direction:column;gap:18px}
.ca3-pane h2,.ca3-pane h3{margin:0;color:var(--ca3-heading);font-weight:700;letter-spacing:.02em}
.ca3-section{display:flex;flex-direction:column;gap:12px;margin-bottom:10px}
.ca3-section:last-child{margin-bottom:0}

.statement h2{font-size:18px}
.materials h3{font-size:16px;color:var(--ca3-muted)}
.materials ul{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:8px;color:var(--ca3-heading)}
.materials li strong{color:color-mix(in oklab,var(--accent) 62%,var(--text) 38%)}

.materials-table{width:100%;border-collapse:collapse;margin:.4rem 0;font-size:.95rem;font-variant-numeric:tabular-nums;background:var(--surface);border:1px solid color-mix(in oklab,var(--border) 70%,rgba(59,130,246,.22) 30%);border-radius:10px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.materials-table caption{caption-side:top;text-align:left;font-weight:700;color:var(--ca3-muted);padding:8px 10px}
.materials-table thead th{background:color-mix(in oklab,var(--surface) 80%,rgba(59,130,246,.18) 20%);text-align:center}
.materials-table th,.materials-table td{padding:6px 8px;border-bottom:1px solid color-mix(in oklab,var(--border) 70%,rgba(59,130,246,.18) 30%);border-right:1px solid color-mix(in oklab,var(--border) 70%,rgba(59,130,246,.18) 30%)}
.materials-table tr:last-child th,.materials-table tr:last-child td{border-bottom:none}
.materials-table th:last-child,.materials-table td:last-child{border-right:none}
.materials-table tbody th{text-align:left;background:color-mix(in oklab,var(--surface) 86%,rgba(59,130,246,.12) 14%)}
.materials-table td{text-align:right;white-space:nowrap}
.materials-table tbody tr:nth-child(even) td{background:color-mix(in oklab,var(--surface) 96%,rgba(59,130,246,.08) 4%)}

.tables{display:flex;flex-direction:column;gap:16px}
.table-card{border:1px solid color-mix(in oklab,var(--border) 68%,rgba(59,130,246,.24) 32%);border-radius:12px;overflow:hidden;background:var(--surface);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.table-card header{background:color-mix(in oklab,var(--surface) 80%,rgba(59,130,246,.16) 20%);padding:10px 14px;font-weight:700;color:var(--ca3-heading);border-bottom:1px solid color-mix(in oklab,var(--border) 70%,rgba(59,130,246,.2) 30%)}
.table-card table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.table-card th,.table-card td{border:1px solid color-mix(in oklab,var(--border) 72%,rgba(59,130,246,.22) 28%);padding:8px 10px;text-align:right;background:var(--surface)}
.table-card th:first-child,.table-card td:first-child{text-align:left;white-space:nowrap}
.table-card input{width:100%;padding:8px 10px;border-radius:10px;border:1px solid color-mix(in oklab,var(--border) 68%,rgba(59,130,246,.26) 32%);background:color-mix(in oklab,var(--surface) 94%,transparent);color:var(--ca3-heading);text-align:right;font-variant-numeric:tabular-nums}
.table-card input:focus{outline:3px solid var(--ca3-focus);border-color:color-mix(in oklab,var(--accent) 55%,var(--border) 45%)}

.ca3-score{font-weight:700;color:var(--ca3-heading)}
.ca3-explain{border:1px solid color-mix(in oklab,var(--border) 60%,rgba(59,130,246,.28) 40%);border-radius:14px;padding:12px;background:color-mix(in oklab,var(--surface) 90%,rgba(59,130,246,.12) 10%);box-shadow:0 6px 18px rgba(15,23,42,.18)}
.ca3-explain summary{cursor:pointer;font-weight:700;color:var(--ca3-heading)}
.ca3-explain[open]{border-color:color-mix(in oklab,var(--accent) 45%,var(--border) 55%)}
.ca3-explain pre{margin:12px 0 0;white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.95rem;color:var(--ca3-heading)}

.ca3-memo h3{font-size:16px}
.ca3-memo textarea{width:100%;max-width:100%;min-height:360px;border-radius:14px;border:1px solid var(--ca3-border-soft);background:color-mix(in oklab,var(--surface) 94%,transparent);color:var(--ca3-heading);padding:12px;line-height:1.6;resize:vertical}
.ca3-memo textarea:focus-visible{outline:3px solid var(--ca3-focus);border-color:color-mix(in oklab,var(--accent) 55%,var(--border) 45%)}

.cell-correct{background:rgba(16,185,129,.18)!important}
.cell-wrong{background:rgba(248,113,113,.18)!important}
.cell-locked{background:color-mix(in oklab,var(--surface) 92%,rgba(148,163,184,.16) 8%);color:var(--ca3-muted)}

.ca3-note{font-size:.9rem;color:var(--ca3-muted)}

.site-footer{margin-top:60px;background:color-mix(in oklab,var(--surface) 96%,transparent);border-top:1px solid var(--border);padding:32px 0}
.footer-inner{display:flex;flex-direction:column;gap:12px}
.footer-brand{font-weight:700;color:var(--ca3-heading)}
.footer-links{display:flex;flex-wrap:wrap;gap:14px}
.footer-links a{text-decoration:none;color:var(--ca3-muted)}
.footer-links a:hover{color:var(--ca3-heading)}
.footer-copy{color:var(--ca3-muted);font-size:.9rem}

@media (max-width:960px){
  .practice-header__inner{padding:18px 0}
  .practice-header__top{flex-direction:column;align-items:flex-start}
  .practice-header__nav{justify-content:flex-start}
  .ca3-shell{padding:22px;border-radius:20px}
  .ca3-shell::after{inset:12px}
  .ca3-shell__grid{grid-template-columns:1fr;gap:18px}
  .ca3-shell__controls{flex-direction:column;align-items:flex-start}
  .ca3-shell__spacer{display:none}
  .ca3-controls-block{width:100%;justify-content:flex-start}
  .ca3-btn,.ca3-file{width:100%;justify-content:center}
  .ca3-memo textarea{min-height:280px}
}

@media (max-width:600px){
  .page-title{margin:18px auto}
  .ca3-shell{padding:20px}
  .ca3-shell__controls{gap:10px}
}