/* Engineer Tsai Practice Lab v0.1.7. Scope: branded #etxp practice surface only. */
:where(.et-surface){
  --et-color-ink:#06182e;--et-color-ink-deep:#04101f;--et-color-ink-raised:#0b2335;
  --et-color-paper:#f4f0e8;--et-color-paper-raised:#fffdf8;--et-color-paper-muted:#e9e4da;
  --et-color-text:#0a1b2c;--et-color-text-muted:#66727d;
  --et-color-line-light:rgba(6,24,46,.16);--et-color-cyan:#62d7e5;--et-color-blue:#1768f2;
  --et-color-copper:#dc7d4f;--et-color-success:#147556;--et-color-danger:#b54136;
  --et-font-sans:Inter,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --et-font-display:"Iowan Old Style",Baskerville,"Noto Serif TC","Times New Roman",serif;
  --et-radius-sm:.5rem;--et-radius-md:.875rem;--et-radius-pill:999px;
}
.et-surface #etxp{--ink:var(--et-color-text);--muted:var(--et-color-text-muted);--line:var(--et-color-line-light);--soft:var(--et-color-paper-muted);--paper:var(--et-color-paper-raised);--accent:var(--et-color-blue);--accent-ink:#fff;--ok:var(--et-color-success);--ok-soft:#e4f2ec;--bad:var(--et-color-danger);--bad-soft:#f8e9e6;--warn:#8b591b;--warn-soft:#f6ecd7;background:transparent;color:var(--et-color-text);font-family:var(--et-font-sans);max-width:none;padding:0}
.et-surface #etxp *{box-sizing:border-box}
.et-surface #etxp :where(button,select,input):focus-visible{outline:2px solid var(--et-color-cyan);outline-offset:3px;box-shadow:0 0 0 3px rgba(98,215,229,.34)}
.et-surface #etxp .x-switch{background:var(--et-color-paper-muted);border-color:var(--et-color-line-light);border-radius:var(--et-radius-pill);margin-bottom:1.5rem;padding:.25rem}
.et-surface #etxp .x-switch button{background:transparent;border-radius:var(--et-radius-pill);min-height:2.7rem}
.et-surface #etxp .x-switch button[aria-pressed="true"]{background:var(--et-color-ink);color:#fff}
.et-surface #etxp .x-meta{color:var(--et-color-text-muted)}
.et-surface #etxp .x-badge{background:transparent;border-left:2px solid var(--et-color-copper);border-radius:0;color:#8b4a2f;padding-left:.65rem}
.et-surface #etxp .x-tabs{border-bottom:1px solid var(--et-color-line-light);gap:1.5rem;margin:1.5rem 0 2rem}
.et-surface #etxp .x-tabs button{border-radius:0;color:var(--et-color-text-muted);font-size:.82rem;font-weight:800;padding:.9rem 0}
.et-surface #etxp .x-tabs button[aria-selected="true"]{border-bottom-color:var(--et-color-blue);color:var(--et-color-text)}
.et-surface #etxp h3{font-family:var(--et-font-display);font-size:clamp(1.9rem,4vw,3rem);font-weight:500;letter-spacing:-.025em;line-height:1.08}
.et-surface #etxp .x-items{gap:.65rem}
.et-surface #etxp .x-items label,.et-surface #etxp .x-q,.et-surface #etxp .x-wrong li{background:transparent;border-color:var(--et-color-line-light);border-radius:var(--et-radius-sm)}
.et-surface #etxp .x-items label{min-height:3.2rem;padding:.8rem 1rem;transition:background-color .14s ease,border-color .14s ease}
.et-surface #etxp .x-items label:hover,.et-surface #etxp .x-items label:has(input:checked){background:rgba(23,104,242,.06);border-color:var(--et-color-blue)}
.et-surface #etxp .x-q{border-top:1px solid var(--et-color-line-light);border-width:1px 0 0;padding:2rem 0 0}
.et-surface #etxp .x-stem{font-family:var(--et-font-display);font-size:clamp(1.35rem,3vw,1.8rem);line-height:1.35}
.et-surface #etxp .x-opt{border-color:var(--et-color-line-light);border-radius:var(--et-radius-sm);min-height:3.2rem;padding:.85rem 1rem}
.et-surface #etxp .x-opt:hover{border-color:var(--et-color-blue)}
.et-surface #etxp .x-opt[aria-pressed="true"]{background:rgba(23,104,242,.06);box-shadow:inset 3px 0 var(--et-color-blue)}
.et-surface #etxp .x-opt .k{font-size:.76rem;height:1.65rem;width:1.65rem}
.et-surface #etxp .x-btn{border-radius:var(--et-radius-pill);min-height:3rem;padding:.75rem 1.25rem}
.et-surface #etxp .x-btn.ghost{background:transparent}
.et-surface #etxp .x-unlock{background:var(--et-color-ink);border-color:var(--et-color-ink);border-radius:var(--et-radius-md);color:#fff;padding:1.5rem}
.et-surface #etxp .x-unlock .x-btn{background:var(--et-color-cyan);border-color:var(--et-color-cyan);color:var(--et-color-ink)}
.et-surface #etxp .x-table th{color:var(--et-color-text-muted);letter-spacing:.04em;text-transform:uppercase}
.et-surface #etxp .x-bar{background:rgba(255,253,248,.94);backdrop-filter:blur(12px)}
.et-surface #etxp .x-empty{border-color:var(--et-color-line-light);border-radius:var(--et-radius-md)}
@media (min-width:760px){.et-surface #etxp .x-items{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.et-surface #etxp .x-tabs{gap:1rem}.et-surface #etxp .x-tabs button{font-size:.76rem}.et-surface #etxp .x-q{padding-top:1.5rem}}
@media (prefers-reduced-motion:reduce){.et-surface #etxp *{transition:none!important}}
