/* Flat, low-saturation illustrations. Scoped to GESP topic practice; navigation and whiteboard are unchanged. */
html.page--problem_main .ti-practice.ti-tech {
  --plain-ink:#34434b;--plain-muted:#65737b;--plain-line:#e0e5e8;--plain-bg:#fff;--plain-soft:#f7f8f8;--plain-selected:#e8eef0;padding:24px 28px 28px;
}

html.page--problem_main .ti-practice.ti-tech .ti-sw {
  gap:9px;padding:6px 0;
}

html.page--problem_main .ti-practice.ti-tech .ti-sw__label {
  min-width:72px;margin-right:6px;color:var(--plain-muted);font-size:14px;font-weight:650;opacity:1;
}

html.page--problem_main .ti-practice.ti-tech .ti-sw a.ti-sw__item {
  display:inline-flex;align-items:center;gap:9px;position:relative;box-sizing:border-box;min-height:54px;padding:9px 13px;border:1px solid var(--plain-line);border-radius:11px;background:var(--plain-soft);box-shadow:none;color:var(--plain-ink);font-size:16px;font-weight:550;line-height:1.45;text-decoration:none;opacity:1;transition:background-color .15s,border-color .15s;
}

html.page--problem_main .ti-practice.ti-tech .ti-sw a.ti-tech-kind {
  min-width:140px;
}

html.page--problem_main .ti-practice.ti-tech .ti-tech-kind-art {
  display:block;flex:none;width:32px;height:32px;border:0;border-radius:7px;object-fit:contain;
}

html.page--problem_main .ti-practice.ti-tech .ti-sw a.ti-tech-level {
  min-width:104px;gap:8px;
}

html.page--problem_main .ti-practice.ti-tech .ti-tech-level-art {
  position:relative;display:block;flex:none;width:32px;height:32px;
}

html.page--problem_main .ti-practice.ti-tech .ti-tech-level-art img {
  display:block;width:32px;height:32px;border-radius:7px;
}

html.page--problem_main .ti-practice.ti-tech .ti-tech-level-art small {
  position:absolute;right:-2px;bottom:-2px;border-radius:3px;padding:0 3px;background:#e4e9eb;color:#55646d;font-size:9px;line-height:1.5;font-weight:650;
}

html.page--problem_main .ti-practice.ti-tech .ti-sw a.ti-sw__item:hover {
  background:#eef2f3;border-color:#bfcbd1;box-shadow:none;transform:none;
}

html.page--problem_main .ti-practice.ti-tech .ti-sw a.ti-sw__item--active,
html.page--problem_main .ti-practice.ti-tech .ti-sw a.ti-sw__item--active:hover,
html.page--problem_main .ti-practice.ti-tech .ti-sw a.ti-sw__item--active:visited,
html.page--problem_main .ti-practice.ti-tech .ti-sw a.ti-sw__item--active:focus {
  background:var(--plain-selected);border-color:#99aab3;color:#34434b;box-shadow:none;font-weight:700;
}

html.page--problem_main .ti-practice.ti-tech .ti-tech-selected {
  display:inline-grid;place-items:center;flex:none;width:15px;height:15px;border-radius:50%;background:#d6e0e4;color:#40545e;font-size:10px;line-height:1;
}

html.page--problem_main .ti-practice.ti-tech .ti-sw a.ti-sw__item--empty:not(.ti-sw__item--active) {
  opacity:.55;
}

html.page--problem_main .ti-practice.ti-tech .ti-practice__rule {
  margin-top:18px;padding:13px 16px;border:1px solid var(--plain-line);border-radius:10px;background:var(--plain-soft);color:var(--plain-muted);font-size:14px;line-height:1.75;
}

html.page--problem_main .ti-practice.ti-tech .ti-practice__rule strong {
  color:#53666f;font-size:14px;
}

html.page--problem_main .ti-practice.ti-tech .ti-practice__topics {
  margin-top:22px;padding-top:22px;border-color:var(--plain-line);
}

html.page--problem_main .ti-practice.ti-tech .ti-practice__heading h2 {
  color:var(--plain-ink);font-size:20px;
}

html.page--problem_main .ti-practice.ti-tech .ti-practice__hint {
  color:var(--plain-muted);font-size:14px;opacity:1;
}

html.page--problem_main .ti-practice.ti-tech .ti-topic-list {
  grid-template-columns:repeat(auto-fill,minmax(min(100%,285px),1fr));gap:12px;margin-top:18px;
}

html.page--problem_main .ti-practice.ti-tech .ti-topic-list li {
  display:flex;min-width:0;
}

html.page--problem_main .ti-practice.ti-tech .ti-topic-list .ti-topic {
  display:flex;align-items:center;gap:14px;position:relative;box-sizing:border-box;min-width:0;width:100%;min-height:98px;padding:15px;border:1px solid var(--plain-line);border-radius:12px;background:var(--plain-bg);box-shadow:none;color:var(--plain-ink);opacity:1;text-decoration:none;transition:background-color .15s,border-color .15s;
}

html.page--problem_main .ti-practice.ti-tech .ti-topic::after {
  content:none;
}

html.page--problem_main .ti-practice.ti-tech .ti-tech-topic-art {
  display:block;flex:none;width:62px;height:62px;border:0;border-radius:10px;background:#f0f3f4;box-shadow:none;overflow:hidden;
}

html.page--problem_main .ti-practice.ti-tech .ti-tech-topic-art img {
  display:block;width:100%;height:100%;object-fit:contain;
}

html.page--problem_main .ti-practice.ti-tech .ti-tech-topic-copy {
  display:flex;flex:1;flex-direction:column;gap:9px;min-width:0;
}

html.page--problem_main .ti-practice.ti-tech .ti-tech-topic-name {
  font-size:17px;font-weight:650;line-height:1.5;overflow-wrap:anywhere;color:inherit;
}

html.page--problem_main .ti-practice.ti-tech .ti-tech-topic-meta {
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:7px;
}

html.page--problem_main .ti-practice.ti-tech .ti-tech-topic-count {
  padding:0;background:none;color:var(--plain-muted);font-size:12px;line-height:1.6;font-variant-numeric:tabular-nums;
}

html.page--problem_main .ti-practice.ti-tech .ti-tech-topic-action {
  color:#607780;font-size:12px;font-weight:500;line-height:1.6;white-space:nowrap;
}

html.page--problem_main .ti-practice.ti-tech .ti-topic-list a.ti-topic:hover {
  background:var(--plain-soft);border-color:#b8c5cb;box-shadow:none;transform:none;
}

html.page--problem_main .ti-practice.ti-tech .ti-topic-list a.ti-topic--active,
html.page--problem_main .ti-practice.ti-tech .ti-topic-list a.ti-topic--active:hover,
html.page--problem_main .ti-practice.ti-tech .ti-topic-list a.ti-topic--active:visited,
html.page--problem_main .ti-practice.ti-tech .ti-topic-list a.ti-topic--active:focus {
  background:var(--plain-selected);border-color:#99aab3;color:var(--plain-ink);box-shadow:none;
}

html.page--problem_main .ti-practice.ti-tech .ti-topic-list .ti-topic--empty {
  opacity:.5;cursor:not-allowed;
}

html.page--problem_main .ti-practice.ti-tech a.ti-topic:focus-visible,
html.page--problem_main .ti-practice.ti-tech .ti-sw a:focus-visible {
  outline:2px solid #758b97;outline-offset:3px;
}
@media(max-width:640px){
html.page--problem_main .ti-practice.ti-tech {
  padding:18px 16px 22px;
}

html.page--problem_main .ti-practice.ti-tech .ti-sw {
  gap:8px;
}

html.page--problem_main .ti-practice.ti-tech .ti-sw__label {
  flex-basis:100%;min-width:0;
}

html.page--problem_main .ti-practice.ti-tech .ti-sw a.ti-tech-kind {
  flex:1;min-width:0;gap:6px;padding:7px;font-size:15px;
}

html.page--problem_main .ti-practice.ti-tech .ti-tech-kind-art {
  width:28px;height:28px;
}

html.page--problem_main .ti-practice.ti-tech .ti-sw a.ti-tech-level {
  flex:0 0 calc((100% - 16px)/3);min-width:0;gap:7px;padding:7px;font-size:15px;
}

html.page--problem_main .ti-practice.ti-tech .ti-tech-selected {
  position:absolute;top:4px;right:4px;width:10px;height:10px;font-size:7px;
}

html.page--problem_main .ti-practice.ti-tech .ti-practice__rule {
  display:block;padding:12px;
}

html.page--problem_main .ti-practice.ti-tech .ti-practice__rule strong {
  display:block;margin-bottom:5px;
}

html.page--problem_main .ti-practice.ti-tech .ti-topic-list {
  grid-template-columns:1fr;gap:10px;
}

html.page--problem_main .ti-practice.ti-tech .ti-topic-list .ti-topic {
  min-height:90px;padding:13px;gap:13px;
}

html.page--problem_main .ti-practice.ti-tech .ti-tech-topic-art {
  width:56px;height:56px;
}
}
@media(max-width:360px){
html.page--problem_main .ti-practice.ti-tech .ti-sw a.ti-tech-kind {
  font-size:14px;gap:4px;
}

html.page--problem_main .ti-practice.ti-tech .ti-tech-kind-art {
  width:24px;height:24px;
}

html.page--problem_main .ti-practice.ti-tech .ti-sw a.ti-tech-level {
  flex-basis:calc((100% - 8px)/2);
}
}
@media(prefers-reduced-motion:reduce){
html.page--problem_main .ti-practice.ti-tech .ti-sw a,
html.page--problem_main .ti-practice.ti-tech .ti-topic-list a {
  transition:none;
}
}