.brand-mark {
  display: block;
  width: 46px;
  height: 46px;
  object-fit: contain;
  flex: 0 0 46px;
}
.brand:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 5px;
  border-radius: 12px;
}
.home-page { overflow:clip; }
.home-page .inquiry-hero {
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(440px, 1.1fr);
  gap:clamp(var(--space-8), 6vw, 88px);
  align-items:center;
  min-height:560px;
  padding:clamp(48px, 7vw, 96px) max(var(--space-6), calc((100vw - 1220px) / 2));
  border-bottom:1px solid var(--paper-300);
  background-color:var(--paper-100);
  background-image:linear-gradient(var(--paper-200) 1px, transparent 1px), linear-gradient(90deg, var(--paper-200) 1px, transparent 1px);
  background-size:32px 32px;
}
.home-page .eyebrow {
  color:var(--forest-700);
  font:800 .75rem/1.4 var(--font-data);
  letter-spacing:.11em;
}
.home-page .inquiry-hero h1 {
  max-width:14ch;
  margin:var(--space-4) 0 var(--space-6);
  color:var(--ink-900);
  font:900 clamp(2.15rem, 3.8vw, 3.5rem)/1.08 var(--font-display);
  letter-spacing:-.035em;
}
.home-page .inquiry-hero h1 em {
  position:relative;
  z-index:0;
  color:var(--forest-700);
  font-style:normal;
}
.home-page .inquiry-hero h1 em::after {
  position:absolute;
  right:0;
  bottom:.05em;
  left:0;
  z-index:-1;
  height:.22em;
  border-radius:2px;
  background:var(--amber-100);
  content:"";
}
.home-page .inquiry-hero-copy p { max-width:52ch; margin:0; color:var(--ink-500); font-size:1.0625rem; }
.home-page .inquiry-cues { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-6); }
.home-page .inquiry-cues span { padding:var(--space-1) var(--space-3); border:1px solid var(--paper-300); border-radius:999px; background:var(--paper-50); color:var(--ink-700); font-size:.8125rem; font-weight:750; }
.home-page .inquiry-note {
  position:relative;
  padding:var(--space-6);
  border:1px solid var(--paper-300);
  border-left:5px solid var(--amber-500);
  border-radius:var(--radius-lg);
  background:var(--paper-50);
  box-shadow:16px 16px 0 var(--forest-100);
}
.home-page .inquiry-note-heading { display:flex; align-items:end; justify-content:space-between; gap:var(--space-4); }
.home-page .inquiry-note-heading label { color:var(--ink-900); font:900 1.35rem/1.25 var(--font-display); }
.home-page .inquiry-note-index { color:var(--amber-700); font:800 .75rem/1.3 var(--font-data); letter-spacing:.08em; }
.home-page .inquiry-note textarea {
  width:100%;
  min-height:168px;
  margin:var(--space-4) 0 var(--space-3);
  padding:var(--space-3) var(--space-4);
  resize:vertical;
  border:1px solid var(--paper-300);
  border-radius:var(--radius-md);
  background-color:var(--paper-50);
  background-image:repeating-linear-gradient(transparent, transparent 31px, var(--paper-200) 32px);
  color:var(--ink-900);
  font:400 1rem/2 var(--font-body);
}
.home-page .catalog {
  max-width:1220px;
  margin:auto;
  padding:clamp(48px, 6vw, 80px) var(--space-6);
}
.home-page .catalog-heading { grid-template-columns:minmax(0, 1fr) auto; }
.home-page .catalog-heading h2 { margin:var(--space-2) 0 0; font-size:clamp(1.75rem, 3vw, 2.25rem); }
.home-page .catalog-total { display:block; margin-top:var(--space-2); color:var(--forest-700); font-size:.875rem; font-weight:750; }
.home-page .catalog-tools { display:flex; align-items:end; gap:var(--space-3); margin-bottom:var(--space-4); padding:var(--space-4); box-shadow:none; }
.home-page .catalog-search { flex:1; }
.home-page .filters {
  margin:0 0 var(--space-6);
  padding:var(--space-2) 0;
  border-block:1px solid var(--paper-300);
}
.home-page .filters > div {
  display:flex;
  align-items:center;
  gap:var(--space-1);
  flex-wrap:wrap;
  min-height:50px;
  padding:var(--space-2);
}
.home-page .filters b { width:54px; color:var(--ink-700); font-size:.875rem; }
.home-page .filter {
  min-height:36px;
  padding:var(--space-1) var(--space-3);
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--ink-500);
  font:650 .875rem/1 var(--font-body);
  cursor:pointer;
}
.home-page .filter:hover { border-color:var(--paper-300); background:var(--paper-50); color:var(--forest-700); }
.home-page .filter.active { border-color:var(--forest-500); background:var(--forest-100); color:var(--forest-900); font-weight:800; }
.home-page .resource-grid {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--space-6);
}
.home-page .resource-grid[aria-busy="true"]:empty::before { grid-column:1 / -1; padding:var(--space-8); border:1px dashed var(--paper-300); border-radius:var(--radius-lg); background:var(--paper-50); color:var(--ink-500); content:"正在整理资源目录…"; text-align:center; }
.home-page .resource-card {
  position: relative;
  overflow:hidden;
  border:1px solid var(--paper-300);
  border-radius:var(--radius-md);
  background:var(--paper-50);
  color:inherit;
  text-decoration:none;
  transition:border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.home-page .resource-card-link { display:block; height:100%; color:inherit; text-decoration:none; }
.home-page .card-like-button { position:absolute; right:var(--space-3); bottom:var(--space-3); display:inline-flex; min-height:34px; align-items:center; gap:var(--space-1); padding:var(--space-1) var(--space-2); border:1px solid var(--paper-300); border-radius:999px; background:color-mix(in srgb, var(--paper-50) 94%, transparent); color:var(--ink-500); cursor:pointer; }
.home-page .card-like-button:hover, .home-page .card-like-button.is-liked { border-color:var(--red-700); color:var(--red-700); }
.home-page .card-like-button:focus-visible { outline:2px solid var(--amber-500); outline-offset:2px; }
.home-page .card-like-button b { font:700 .75rem/1 var(--font-data); }
.home-page .resource-card:hover { transform:translateY(-3px); border-color:var(--forest-500); box-shadow:var(--shadow-soft); }
.home-page .resource-card:focus-visible { outline:3px solid var(--amber-500); outline-offset:3px; }
.home-page .thumb {
  position:relative;
  overflow:hidden;
  aspect-ratio:16/9;
  border-bottom:1px solid var(--paper-300);
  background:var(--forest-100);
}
.home-page .thumb img { width:100%; height:100%; object-fit:cover; transition:transform 220ms ease; }
.home-page .resource-card:hover .thumb img { transform:scale(1.015); }
.home-page .thumb span {
  position:absolute;
  top:var(--space-3);
  left:var(--space-3);
  padding:var(--space-1) var(--space-2);
  border:1px solid var(--paper-300);
  border-radius:var(--radius-sm);
  background:var(--paper-50);
  color:var(--forest-700);
  font:800 .75rem/1.4 var(--font-data);
}
.home-page .card-copy { padding:var(--space-4) 5.5rem var(--space-4) var(--space-4); }
.home-page .card-copy h3 {
  display:-webkit-box;
  overflow:hidden;
  margin:0 0 var(--space-2);
  color:var(--ink-900);
  font:800 1.05rem/1.45 var(--font-display);
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.home-page .card-copy p { margin:0; color:var(--ink-500); font:650 .75rem/1.5 var(--font-data); }
.home-page .empty { margin-top:var(--space-6); }
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translate(-50%, 30px);
  background: var(--ink-900);
  color: var(--white);
  padding: 12px 18px;
  border-radius: 10px;
  opacity: 0;
  transition: 0.25s;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (max-width: 850px) {
  .home-page .inquiry-hero { grid-template-columns:1fr; min-height:auto; padding-inline:var(--space-6); }
  .home-page .inquiry-hero-copy p { max-width:65ch; }
  .home-page .resource-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .brand-mark {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
  .home-page .inquiry-hero { gap:var(--space-8); padding:var(--space-8) var(--space-4) 44px; background-size:24px 24px; }
  .home-page .inquiry-hero h1 { font-size:clamp(2rem, 9vw, 2.6rem); }
  .home-page .inquiry-note { padding:var(--space-4); box-shadow:8px 8px 0 var(--forest-100); }
  .home-page .catalog { padding:44px var(--space-4); }
  .home-page .catalog-tools { align-items:stretch; flex-direction:column; }
  .home-page .resource-grid {
    grid-template-columns: 1fr;
  }
}

.classes-page { max-width:1180px; margin:0 auto; padding:48px 24px 80px; }
.classes-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:28px; }
.classes-heading h1, .classes-heading h2 { margin:6px 0; color:var(--ink-900); font:700 clamp(2rem,4vw,3rem)/1.1 var(--font-display); }
.classes-heading p { margin:0; color:var(--ink-500); }
.class-search, .class-inline-form { display:flex; align-items:end; gap:12px; margin-bottom:24px; padding:18px; border:1px solid var(--paper-300); border-radius:var(--radius-lg); background:var(--paper-50); }
.class-search { flex-direction:column; align-items:stretch; font-weight:700; }
.class-search input, .class-inline-form input { min-height:46px; padding:10px 14px; border:1px solid var(--paper-300); border-radius:var(--radius-sm); background:white; }
.class-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; }
.class-card { padding:22px; border:1px solid var(--paper-300); border-radius:var(--radius-lg); background:var(--paper-50); box-shadow:var(--shadow-soft); }
.class-card h2, .class-card h3 { margin:10px 0; }.class-card a { color:inherit; }.class-card code, .class-code { display:inline-block; padding:7px 10px; border-radius:8px; background:var(--forest-100); color:var(--forest-800); font:800 1rem var(--font-data); letter-spacing:.12em; }
.class-status { color:var(--forest-700); font:700 .75rem var(--font-data); }.class-panel { margin:32px 0; padding:24px; border:1px solid var(--paper-300); border-radius:var(--radius-lg); background:var(--paper-50); }
.class-create-dialog { width:min(520px,calc(100vw - 32px)); border:0; border-radius:18px; }.class-create-dialog::backdrop { background:rgba(11,52,42,.48); }
@media(max-width:650px){.classes-heading,.class-inline-form{align-items:stretch;flex-direction:column}.classes-page{padding:32px 16px}.class-card-grid{grid-template-columns:1fr}}