:root{color-scheme:dark light}

body{
  --ca2-border-strong: color-mix(in oklab,var(--border) 60%,rgba(14,165,233,.38) 40%);
  --ca2-border-soft: color-mix(in oklab,var(--border) 72%,rgba(59,130,246,.28) 28%);
  --ca2-surface-overlay: linear-gradient(165deg,color-mix(in oklab,var(--surface) 92%,rgba(14,165,233,.12) 8%),color-mix(in oklab,var(--surface) 88%,rgba(56,189,248,.1) 12%));
  --ca2-muted: color-mix(in oklab,var(--muted) 85%,rgba(59,130,246,.35) 15%);
  --ca2-heading: color-mix(in oklab,var(--text) 94%,white 6%);
  --ca2-chip: color-mix(in oklab,var(--surface) 70%,rgba(59,130,246,.25) 30%);
  --ca2-focus: rgba(45,212,191,.45);
}

@media (prefers-color-scheme: light){
  body:not(.dark){
    --ca2-surface-overlay: linear-gradient(175deg,color-mix(in oklab,var(--surface) 96%,rgba(14,165,233,.08) 4%),color-mix(in oklab,var(--surface) 92%,rgba(56,189,248,.08) 8%));
  }
}

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) 14%,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(14,165,233,.3) 32%);color:var(--ca2-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(--ca2-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(--ca2-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(--ca2-heading);border-color:color-mix(in oklab,var(--accent) 40%,var(--border) 60%)}
.practice-header__link.is-active{color:var(--ca2-heading);border-color:color-mix(in oklab,var(--accent) 55%,var(--border) 45%);background:color-mix(in oklab,var(--surface) 72%,rgba(56,189,248,.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,.26) 32%);border-radius:12px;padding:8px 12px;color:var(--ca2-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 .lead{color:var(--ca2-muted)}

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

.ca2-shell__controls{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:24px}
.ca2-shell__spacer{flex:1 1 32px}
.ca2-jump{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ca2-muted)}
.ca2-jump input{width:90px;padding:8px 10px;border-radius:10px;border:1px solid var(--ca2-border-soft);background:color-mix(in oklab,var(--surface) 94%,transparent);color:var(--ca2-heading);text-align:right;font-variant-numeric:tabular-nums}
.ca2-jump input:focus-visible{outline:none;border-color:color-mix(in oklab,var(--accent) 55%,var(--border) 45%);box-shadow:0 0 0 3px rgba(45,212,191,.28)}

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

.ca2-shell__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr);gap:24px;margin-bottom:26px}
.ca2-pane{border:1px solid var(--ca2-border-soft);border-radius:20px;padding:20px;background:color-mix(in oklab,var(--surface) 92%,rgba(14,165,233,.12) 8%);box-shadow:0 14px 28px rgba(15,23,42,.18);display:flex;flex-direction:column;gap:18px}
.ca2-pane h3{margin:0;color:var(--ca2-heading);font-size:16px;font-weight:700;letter-spacing:.02em}
.ca2-case-title{margin:4px 0 0;font-weight:700;color:color-mix(in oklab,var(--accent) 62%,var(--text) 38%);letter-spacing:.02em}

.ca2-dataset h3,.ca2-questions h3{margin:0}
.ca2-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;border:1px solid var(--ca2-border-soft);border-radius:14px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.ca2-table th,.ca2-table td{padding:9px 12px;border-bottom:1px solid color-mix(in oklab,var(--border) 70%,rgba(14,165,233,.26) 30%);border-right:1px solid color-mix(in oklab,var(--border) 70%,rgba(14,165,233,.26) 30%)}
.ca2-table tr:last-child th,.ca2-table tr:last-child td{border-bottom:none}
.ca2-table tr th:last-child,.ca2-table tr td:last-child{border-right:none}
.ca2-table th{width:42%;text-align:left;color:var(--ca2-muted);font-weight:600;background:color-mix(in oklab,var(--surface) 82%,rgba(14,165,233,.16) 18%)}
.ca2-table .subhead{color:color-mix(in oklab,var(--accent) 55%,var(--muted) 45%);font-weight:700}
.ca2-table .indent{padding-left:18px}

.ca2-questions{border-top:1px dashed color-mix(in oklab,var(--border) 60%,rgba(59,130,246,.3) 40%);padding-top:8px}
.ca2-qrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px dashed color-mix(in oklab,var(--border) 60%,rgba(59,130,246,.3) 40%)}
.ca2-qrow:last-child{border-bottom:none}
.ca2-qrow b{color:color-mix(in oklab,var(--accent) 60%,var(--text) 40%)}
.ca2-ans{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ca2-input{width:180px;padding:10px 12px;border-radius:12px;border:1px solid var(--ca2-border-soft);background:color-mix(in oklab,var(--surface) 94%,transparent);color:var(--ca2-heading);text-align:right;font-variant-numeric:tabular-nums;transition:border .18s ease,box-shadow .18s ease}
.ca2-input:focus-visible{outline:none;border-color:color-mix(in oklab,var(--accent) 58%,var(--border) 42%);box-shadow:0 0 0 3px rgba(45,212,191,.28)}

.ca2-calc-table{width:100%;border-collapse:collapse;font-size:14px}
.ca2-calc-table th,.ca2-calc-table td{padding:9px 10px;border-bottom:1px solid color-mix(in oklab,var(--border) 70%,rgba(59,130,246,.24) 30%)}
.ca2-calc-table th{font-weight:600;text-align:left;color:var(--ca2-muted)}
.ca2-calc-table td:last-child{text-align:right;color:color-mix(in oklab,var(--ca2-muted) 80%,var(--text) 20%);width:42px}
.ca2-calc-actions,.ca2-memo-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}

.ca2-textarea{width:100%;max-width:100%;min-height:160px;padding:12px;border-radius:14px;border:1px solid var(--ca2-border-soft);background:color-mix(in oklab,var(--surface) 94%,transparent);color:var(--ca2-heading);line-height:1.6;resize:vertical}
.ca2-textarea:focus-visible{outline:none;border-color:color-mix(in oklab,var(--accent) 58%,var(--border) 42%);box-shadow:0 0 0 3px rgba(59,130,246,.25)}

.ca2-explain{position:relative;z-index:1;border:1px solid var(--ca2-border-soft);border-radius:20px;padding:20px;background:color-mix(in oklab,var(--surface) 90%,rgba(59,130,246,.12) 10%);box-shadow:0 12px 28px rgba(15,23,42,.18)}
.ca2-explain h3{margin:0 0 10px;font-size:16px;font-weight:700;color:var(--ca2-heading)}
.ca2-explain p{margin:10px 0}
.box{border:1px solid color-mix(in oklab,var(--accent) 46%,var(--border) 54%);border-radius:14px;padding:12px;background:color-mix(in oklab,var(--surface) 92%,rgba(59,130,246,.1) 8%);margin:6px 0 14px}
.ok{color:color-mix(in oklab,var(--accent-2) 70%,#16a34a 30%);font-weight:700}
.ng{color:color-mix(in oklab,#fb7185 80%,var(--accent) 20%);font-weight:700}

@media (max-width:960px){
  .practice-header__inner{padding:20px 0}
  .practice-header__top{flex-direction:column;align-items:flex-start}
  .practice-header__nav{justify-content:flex-start}
  .ca2-shell{padding:22px;border-radius:20px}
  .ca2-shell::after{inset:12px}
  .ca2-shell__grid{grid-template-columns:1fr;gap:18px}
  .ca2-ans{justify-content:flex-start}
  .ca2-input{width:100%;max-width:220px}
  .ca2-jump{width:100%;justify-content:flex-start}
}

@media (max-width:600px){
  .ca2-shell__controls{gap:10px}
  .ca2-btn{width:100%;justify-content:center}
  .ca2-shell__spacer{display:none}
  .ca2-qrow{flex-direction:column;align-items:flex-start}
  .ca2-calc-actions,.ca2-memo-actions{justify-content:flex-start}
}

@media (prefers-reduced-motion: reduce){
  .ca2-btn,.practice-header__link{transition:none}
  .ca2-btn:hover{transform:none}
}
