:root {
  --bg:#f4f5f7; --surface:#fff; --ink:#1a1a1a;
  --amber:#f0c571; --green:#36b700; --blue:#0b81a2;
  --pink:#e25759; --purple:#7E4794;
  --shadow:4px 4px 0px 0px var(--ink);
  --wobble:255px 15px 225px 15px/15px 225px 15px 255px;
  --blackboard: #2d4133;
  --chalk: rgba(255, 255, 255, 0.85);
  --paper: #fffef0;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;padding:2rem;background-image:radial-gradient(var(--ink) 0.5px,transparent 0.5px);background-size:20px 20px}
.container{max-width:1400px;margin:0 auto}
.back-btn{display:inline-block;margin-bottom:1rem;text-decoration:none;font-family:Lexend;font-weight:800;font-size:.8rem;background:var(--ink);color:#fff;padding:.5rem 1rem;border-radius:8px;box-shadow:3px 3px 0px var(--ink)}
header{background:var(--surface);border:3px solid var(--ink);padding:2rem;border-radius:var(--wobble);box-shadow:var(--shadow);margin-bottom:2rem;text-align:center}
h1{font-family:'Lexend',sans-serif;font-size:2.2rem;margin-bottom:.5rem}
header>p{font-weight:500;opacity:.8}

/* THEORY SCRAPBOOK STYLE */
.theory-section {
  background: var(--blackboard);
  background-image: url('https://www.transparenttextures.com/patterns/chalkboard.png');
  border: 4px solid var(--ink);
  border-radius: 24px;
  box-shadow: 8px 8px 0px var(--ink);
  margin-bottom: 2rem;
  overflow: hidden;
  position: relative;
}

.theory-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 3px dashed rgba(255, 255, 255, 0.2);
  user-select: none;
  gap: 1rem;
  color: #fff;
}

.theory-header.open {
  border-bottom-style: solid;
  border-bottom-color: rgba(255, 255, 255, 0.4);
}

.theory-header h2 {
  font-family: 'Lexend', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
}

.theory-body {
  display: none;
  padding: 2.5rem 2rem;
  gap: 2.5rem;
  flex-wrap: wrap;
  justify-content: center;
  perspective: 1000px;
}

.theory-body.open {
  display: flex;
}

.theory-card {
  flex: 1;
  min-width: 300px;
  background: var(--paper);
  color: var(--ink);
  border: none;
  border-radius: 2px;
  padding: 2rem 1.5rem;
  box-shadow: 5px 5px 20px rgba(0,0,0,0.3);
  position: relative;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Washi Tape on catalog theor-card */
.theory-card::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 100px;
  height: 30px;
  background: rgba(100, 181, 246, 0.6); /* Default blue tape */
  z-index: 2;
  border-left: 2px dotted rgba(0,0,0,0.05);
  border-right: 2px dotted rgba(0,0,0,0.05);
}

.theory-card:nth-child(even)::before {
  background: rgba(255, 183, 77, 0.6); /* Amber tape */
  transform: translateX(-50%) rotate(2deg);
}

.theory-card:hover {
  transform: scale(1.05) rotate(0deg) !important;
  box-shadow: 10px 10px 30px rgba(0,0,0,0.4);
  z-index: 10;
}

.theory-card h3 {
  font-family: 'Lexend', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 1rem;
  text-transform: uppercase;
  border-bottom: 2px solid rgba(0,0,0,0.05);
  padding-bottom: 0.5rem;
}

.class-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  margin-top: 1rem;
}

.class-item {
  background: rgba(0,0,0,0.02);
  border: 1px solid rgba(0,0,0,0.08);
  padding: 0.6rem;
  font-size: 0.8rem;
  border-radius: 4px;
}
.pillar-list{display:flex;flex-direction:column;gap:.4rem;margin-top:.6rem}
.pillar-item{background:#fff;border:2px solid var(--ink);border-radius:8px;padding:.5rem .7rem;font-size:.8rem;line-height:1.4}
.pillar-item strong{font-family:'Lexend',sans-serif;display:block;font-size:.72rem;text-transform:uppercase;margin-bottom:.1rem}

/* DISCLAIMER */
.disclaimer{background:var(--amber);border:3px solid var(--ink);border-radius:14px;padding:.9rem 1.2rem;margin-bottom:1.5rem;font-size:.82rem;font-weight:600;display:flex;align-items:flex-start;gap:.6rem;box-shadow:3px 3px 0px var(--ink)}

/* CONTROLS */
.controls-row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;justify-content:center;margin-bottom:.7rem}
.controls-label{font-family:'Lexend',sans-serif;font-weight:800;font-size:.7rem;text-transform:uppercase;opacity:.6;letter-spacing:.05em}
.btn{background:var(--surface);border:3px solid var(--ink);padding:.55rem 1.1rem;font-family:'Lexend',sans-serif;font-weight:800;cursor:pointer;border-radius:12px;box-shadow:4px 4px 0px var(--ink);transition:.1s;text-transform:uppercase;font-size:.78rem}
.btn:active{box-shadow:0px 0px 0px var(--ink);transform:translate(4px,4px)}
.btn.active{background:var(--ink);color:#fff}
.type-select, .search-box {
  background: var(--surface);
  border: 3px solid var(--ink);
  padding: 0.55rem 1rem;
  border-radius: 12px;
  font-family: 'Lexend', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  outline: none;
  box-shadow: 4px 4px 0px var(--ink);
}
.search-box { width: 280px; }

.footer-email {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  opacity: 0.8;
  transition: 0.2s;
  border-bottom: 2px solid transparent;
}
.footer-email:hover {
  opacity: 1;
  border-bottom-color: var(--blue);
}

/* TABLE */
.table-container{background:var(--surface);border:3px solid var(--ink);border-radius:20px;box-shadow:var(--shadow);overflow:hidden;overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:1150px}
th{background:var(--amber);padding:1rem 1.1rem;text-align:left;border-bottom:3px solid var(--ink);font-family:'Lexend',sans-serif;text-transform:uppercase;font-size:.7rem;letter-spacing:.05em;white-space:nowrap}
td{padding:.95rem 1.1rem;border-bottom:2px solid var(--ink);vertical-align:top;font-size:.85rem;line-height:1.5}
tr:last-child td{border-bottom:none}
tr:hover{background:#fffcf0}
tr{transition:opacity .2s}
.hidden{display:none!important}

/* NEW ROW */
tr.is-new{border-left:4px solid #22c55e}

/* TOOL INFO */
.tool-info strong{font-family:'Lexend',sans-serif;font-size:.98rem;display:block;margin-bottom:.2rem}
.tool-link{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:#0066cc;text-decoration:none}
.tool-link:hover{text-decoration:underline}
.multi-tag{display:inline-block;margin-top:.3rem;font-family:'JetBrains Mono',monospace;font-size:.63rem;background:#f0f0f0;border:1px solid #ccc;border-radius:4px;padding:.1rem .4rem;color:#555}
.badge-new{display:inline-block;background:#22c55e;color:#fff;border:1.5px solid var(--ink);border-radius:4px;padding:.05rem .35rem;font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:800;margin-left:.3rem;vertical-align:middle}

/* FAVORITE BUTTON */
.fav-btn{background:none;border:none;font-size:1.2rem;cursor:pointer;padding:0;flex-shrink:0;transition:transform .2s;line-height:1}
.fav-btn:hover{transform:scale(1.15)}
.fav-btn:active{transform:scale(0.95)}

/* LEVEL BADGES */
.badge{display:inline-block;padding:.28rem .65rem;border-radius:8px;border:2px solid var(--ink);font-size:.67rem;font-weight:800;font-family:'JetBrains Mono',monospace}
.level-p{background:var(--amber);color:var(--ink)}
.level-i{background:#d0ebff;color:var(--ink)}
.level-a{background:#ffdeeb;color:var(--ink)}

/* TYPE BADGES */
.type-badge{display:inline-block;padding:.22rem .55rem;border-radius:6px;border:2px solid var(--ink);font-size:.63rem;font-weight:800;font-family:'JetBrains Mono',monospace;white-space:nowrap;line-height:1.2}
.t-llm{background:#e0e7ff;color:#3730a3}
.t-lit{background:#cffafe;color:#0e7490}
.t-mapeo{background:#d1fae5;color:#065f46}
.t-cod{background:#ede9fe;color:#6d28d9}
.t-pred{background:#fef3c7;color:#92400e}
.t-nosup{background:#dcfce7;color:#15803d}
.t-vis{background:#fce7f3;color:#9d174d}
.t-multi{background:#ccfbf1;color:#0f766e}
.t-estr{background:#dbeafe;color:#1e40af}
.t-gen{background:#f3e8ff;color:#6b21a8}
.t-rag{background:#fef9c3;color:#854d0e}
.t-vizsci{background:#e0f2fe;color:#075985}
.t-clin{background:#ffe4e6;color:#9f1239}
.t-demo{background:#fef3c7;color:#92400e}
.t-seg{background:#f1f5f9;color:#334155}
.t-eval{background:#f0fdf4;color:#166534}
.t-orch{background:#fff1f2;color:#881337}

.risk-text{font-size:.8rem;opacity:.85;line-height:1.5}
.empty-state{text-align:center;padding:3rem;font-family:'Lexend',sans-serif;font-weight:800;opacity:.4;font-size:1.1rem}

/* FOOTER */
footer{margin-top:4rem;text-align:center;padding:2rem;font-family:'Lexend',sans-serif;font-weight:600;opacity:.7}
.bmc-btn{display:inline-flex;align-items:center;gap:.4rem;background:#FFDD00;color:#000;border:2px solid var(--ink);border-radius:30px;padding:.35rem .85rem;font-family:'Lexend',sans-serif;font-weight:800;font-size:.72rem;text-decoration:none;box-shadow:2px 2px 0px var(--ink);transition:.2s;white-space:nowrap;margin-top:1rem}
.bmc-btn:hover{transform:translateY(-2px);box-shadow:3px 3px 0px var(--ink)}
.bmc-btn svg{width:16px;height:16px;flex-shrink:0}

@media(max-width:768px){
  body{padding:0.75rem}
  header{padding:1.5rem;border-radius:20px;margin-bottom:1.5rem}
  header h1 { font-size: 1.5rem; }
  
  .controls-row { flex-direction: column; align-items: stretch; gap: 1rem; }
  .btn{padding:.5rem .8rem;font-size:.7rem;box-shadow:2px 2px 0px var(--ink); width: 100%; text-align: center; }
  .search-box{width:100%;box-shadow:2px 2px 0px var(--ink)}
  .type-select { width: 100%; }

  .theory-body {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 1.5rem 1rem;
    gap: 1.2rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scroll-snap-type: x mandatory;
  }
  .theory-card {
    min-width: 85vw; /* Show most of the card and a peek of the next */
    flex: 0 0 auto;
    scroll-snap-align: center;
    padding: 1.5rem 1rem;
    transform: rotate(0deg) !important; /* Remove rotation on mobile for readability */
    box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
  }
  .class-grid {
    grid-template-columns: 1fr;
  }

  .table-container {
    border-radius: 12px;
    border-width: 3px;
    margin: 1.5rem 0;
  }
  
  table { 
    min-width: 900px; /* Standardize scrollable width */
  }

  footer { padding: 2rem 1rem; margin-top: 2rem; }
}