/* Base theme */
:root{
  --bg:#f6f7f9;
  --panel:#ffffff;
  --text:#111318;
  --muted:#5b616b;
  --border:rgba(0,0,0,.10);
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --wire: color-mix(in srgb, var(--text) 28%, transparent);
  --wire-hi: #10b981;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0c10;
    --panel:#12131a;
    --text:#e7e7e7;
    --muted:#a7a7a7;
    --border:rgba(255,255,255,.12);
    --shadow:0 8px 28px rgba(0,0,0,.35);
  }
}

*{ box-sizing:border-box }

body{
  margin:0;
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100svh;
  padding:24px;              /* keep page padding */
  /* Removed grid centering so content starts at the top */
}

/* ---- Top profile card (new) ---- */
.profile-card{
  position: sticky; top: 0; z-index: 10;
  display:flex; align-items:center; gap:12px;
  width:100%; max-width:920px; margin:0 auto 16px;
  padding:12px 16px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  backdrop-filter: blur(8px); /* optional; remove if you prefer */
}

/* One place to control size, responsive */
:root { --avatar-size: clamp(64px, 12vw, 96px); }

/* Wrapper: perfect square + shadow (standard web avatar look) */
.avatar-wrap{
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  overflow: hidden;              /* keeps the image round */
  box-shadow: 0 6px 18px rgba(0,0,30,.18);
  flex: 0 0 auto;                /* prevents flexbox stretching */
}

/* Image: fill the wrapper without distortion */
.avatar{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;             /* crop to cover, never squish */
  border-radius: 50%;            /* optional (wrapper already clips) */
}

/* Slightly stronger shadow in dark mode */
@media (prefers-color-scheme: dark){
  .avatar-wrap{ box-shadow: 0 10px 28px rgba(0,0,0,.45); }
}


/* Stronger in dark mode */
@media (prefers-color-scheme: dark){
  .avatar-wrap{ box-shadow: 0 10px 28px rgba(0,0,30,.45); }
}

h1{ margin:0; font-size:clamp(22px,3.5vw,28px); font-weight:800; letter-spacing:.2px }
.links{ display:flex; gap:10px; flex-wrap:wrap }
.btn{
  appearance:none; border:1px solid var(--border); background:transparent; color:inherit;
  padding:10px 14px; border-radius:10px; text-decoration:none; font-weight:600;
  transition:background .15s ease, transform .06s ease, border-color .15s ease;
}
.btn:hover{ background:rgba(127,127,127,.08); transform:translateY(-1px) }

/* Main card container */
.card{
  width:100%;
  max-width:920px;
  margin-inline:auto;      /* center horizontally */
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:20px;
}

/* Layout */
.layout{ display:grid; gap:16px; padding-top:16px; grid-template-columns: 260px 1fr }
@media (max-width:740px){ .layout{ grid-template-columns: 1fr } }

/* Tabs */
.tabs{ display:flex; flex-direction:column; gap:8px }
.tabs h2{
  margin:0 0 6px; font-size:14px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
}
.tab{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:12px 14px; border:1px solid var(--border); border-radius:10px;
  background:transparent; color:inherit; text-align:left; font-weight:600; cursor:pointer;
}
.tab[aria-selected="true"]{
  outline:2px solid transparent;
  border-color:color-mix(in srgb, var(--text) 14%, transparent);
  background:color-mix(in srgb, var(--text) 6%, transparent);
}
.tab:focus-visible{ outline:2px solid color-mix(in srgb, var(--text) 30%, transparent) }

/* Pure-CSS panels toggling (no JS) */
[role="tabpanel"]{ display:none; }
[role="tabpanel"]:not([hidden]){ display:block; }      /* default visible (panel 1) */
:target[role="tabpanel"]{ display:block; }             /* show targeted panel */

/* Highlight the active tab using :has(...) */
.layout:not(:has([role="tabpanel"]:target)) .tab[href="#panel-p1"],
.layout:has(#panel-p1:target) .tab[href="#panel-p1"],
.layout:has(#panel-p2:target) .tab[href="#panel-p2"],
.layout:has(#panel-p3:target) .tab[href="#panel-p3"]{
  border-color:color-mix(in srgb, var(--text) 14%, transparent);
  background:color-mix(in srgb, var(--text) 6%, transparent);
}

/* Panel look */
.panel{
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  min-height:180px;
}
.panel h3{ margin:0 0 6px; font-size:18px }
.panel p{ margin:.5rem 0; color:var(--muted) }

/* Reorder tabs first on mobile */
@media (max-width:740px){ .tabs{ order:-1 } .tab{ min-height:44px } }

/* --- Circuit panel as a responsive ratio box --- */
.panel--circuit{
  position: relative;
  padding: 0;      /* SVG will fill; no inner padding */
  min-height: 0;   /* override .panel’s min-height */
  overflow: hidden;
}
.panel--circuit::before{
  content: "";
  display: block;
  /* viewBox 1600×560 → 35% */
  padding-top: calc(560 / 1600 * 100%);
}
.panel--circuit > .circuit{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* Prevent text selection inside the circuit */
.panel--circuit, .panel--circuit * {
  -webkit-user-select: none;
  user-select: none;
}

/* Wires, nodes, gates */
.wire{ stroke: var(--wire, color-mix(in srgb, var(--text) 28%, transparent)); stroke-width:3; fill:none; stroke-linecap:butt }
.wire.high{ stroke: var(--wire-hi) }
.node{ fill: color-mix(in srgb, var(--text) 28%, transparent) }
.node.high{ fill: var(--wire-hi) }
.bit-rect{ fill: var(--panel); stroke: var(--border) }
.bit-label{
  font-weight:700; font-size:16px; dominant-baseline:middle; text-anchor:middle;
  user-select:none; pointer-events:none; fill: var(--text);
}
.bit{ cursor:pointer }
.bit:hover .bit-rect{ filter: brightness(1.03) }
.bit:focus-visible .bit-rect{ stroke: color-mix(in srgb, var(--text) 40%, transparent); stroke-width:3 }
.gate-shape{ stroke: var(--border); stroke-width:2; fill:none }
.gate-shape.high { stroke: var(--wire-hi); }

/* Glow when an input bit is ON */
.bit.active .bit-rect{
  stroke: var(--wire-hi);
  filter: drop-shadow(0 0 0.45rem color-mix(in srgb, var(--wire-hi) 55%, transparent));
}
.bit.active .bit-label{
  fill: var(--wire-hi);
  text-shadow: 0 0 8px color-mix(in srgb, var(--wire-hi) 60%, transparent);
}