/* Linear의 차분한 다크 표면과 정보 위계를 참고한 itslabtime.com 테마. */
:root {
  color-scheme: dark;
  --bg: #08090b; --surface: #111216; --surface-raised: #191a20;
  --line: #26272e; --line-strong: #3a3b45;
  --text: #eeeef0; --text-sub: #b1b2bd; --text-mute: #8b8d9b;
  --physics: #a5a4ff; --physics-soft: #202033;
  --chemistry: #ddba93; --chemistry-soft: #2b241e;
  --biology: #9dc9ae; --biology-soft: #1d2b23;
  --earth: #9cbfd7; --earth-soft: #1c2831;
  --radius: 12px; --max: 1280px; --explorer-width: 236px;
}
html { scroll-behavior: smooth; scrollbar-color: #383941 var(--bg); }
body { background: var(--bg); color: var(--text); letter-spacing: -.012em; }
::selection { background: #575688; color: white; }
button, input, select { color: inherit; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }
.btn { justify-content: center; height: 42px; padding-inline: 18px; border-radius: 7px; border-color: var(--line-strong); background: #17181d; font-size: 13px; font-weight: 550; color: var(--text); }
.btn:hover { transform: none; background: #22232b; box-shadow: none; border-color: #50515e; }
.btn-primary { background: #e9e9ed; border-color: #e9e9ed; color: #141419; }
.btn-primary:hover { background: #fff; border-color: #fff; }
.hero { padding: 78px 0 32px; text-align: left; }
.hero > .container { max-width: 1120px; padding-inline: 48px; }
.eyebrow { padding: 0; margin-bottom: 24px; border: 0; border-radius: 0; font-size: 10px; font-weight: 550; letter-spacing: .14em; color: var(--text-mute); }
.hero h1 { max-width: 850px; font-size: clamp(38px, 5.3vw, 68px); font-weight: 550; line-height: 1.18; letter-spacing: -.065em; }
.hero h1 .hl { color: #94959f; background: none; }
.hero p { max-width: 590px; margin: 24px 0 0; color: var(--text-mute); font-size: 16px; line-height: 1.85; }
.hero-actions { justify-content: start; gap: 10px; margin-top: 28px; }
.hero-actions .btn:last-child { color: var(--text-sub); background: transparent; border-color: transparent; }
.home-preview { max-width: 1024px; margin: 44px auto 0; overflow: hidden; border: 1px solid #35363e; border-radius: 10px; background: #101115; box-shadow: 0 -1px 0 rgb(255 255 255 / 5%), 0 30px 100px #0009; }
.preview-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--text-mute); }
.preview-toolbar b { font-weight: 500; color: var(--text-sub); }
.preview-toolbar span:last-child { display: inline-flex; align-items: center; gap: 6px; }
.preview-toolbar i { width: 5px; height: 5px; border-radius: 50%; background: var(--biology); }
.preview-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(210px, 1fr); }
.preview-stage { display: flex; flex-direction: column; padding: 20px 24px 12px; min-width: 0; border-right: 1px solid var(--line); background: radial-gradient(ellipse at 50% 45%, #20212a55, transparent 70%); }
.preview-stage h2 { font-size: 12px; font-weight: 500; color: var(--text-sub); }
.preview-stage svg { display: block; width: 100%; max-height: 260px; }
.preview-readouts { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.preview-readouts span { display: flex; flex-direction: column; gap: 3px; color: var(--text-mute); font-size: 10px; }
.preview-readouts b { color: var(--text); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.preview-notebook { display: flex; flex-direction: column; gap: 16px; padding: 24px; font-size: 12px; }
.preview-notebook .preview-label { color: var(--text-mute); font-size: 10px; letter-spacing: .05em; }
.preview-notebook h3 { font-size: 15px; font-weight: 550; }
.preview-notebook p { margin: 0; color: var(--text-mute); font-size: 12px; }
.preview-todo { display: flex; gap: 8px; color: var(--text-sub); font-size: 11px; }
.preview-todo i { color: var(--biology); font-style: normal; }
.preview-notebook .btn { margin-top: auto; align-self: start; min-height: 36px; font-size: 11px; }
.home-caption { max-width: 1024px; margin: 12px auto 0; font-size: 10px; color: var(--text-mute); letter-spacing: .02em; }
.section { padding: 52px 0 64px; }
.section > .container { max-width: 1120px; padding-inline: 48px; }
.section-head { margin-bottom: 24px; }
.section-head h2 { font-size: 23px; font-weight: 550; letter-spacing: -.04em; }
.section-head p { font-size: 12px; }
.categories { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cat-card { gap: 16px; padding: 24px; min-height: 244px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: linear-gradient(145deg, #131419, #0d0e12); }
.cat-card:last-child { border-right: 0; }
.cat-card:hover { transform: none; background: #191a20; box-shadow: none; }
.cat-icon { width: 34px; height: 34px; border: 0; border-radius: 0; background: transparent; color: var(--accent, var(--text-sub)); }
.cat-icon svg { width: 29px; height: 29px; }
.cat-card h3 { font-size: 18px; font-weight: 550; }
.cat-card h3 small { display: block; margin: 3px 0 0; font-size: 10px; font-weight: 400; }
.cat-card p { font-size: 12px; line-height: 1.8; color: var(--text-mute); }
.cat-card .tags { display: none; }
.cat-arrow { top: 26px; right: 20px; width: 22px; height: 22px; border: 0; border-radius: 4px; }
.cat-card:hover .cat-arrow { background: transparent; color: var(--text); }
.features { gap: 0; }
.feature { padding: 20px 24px; border-radius: 0; border-left: 1px solid var(--line); background: transparent; }
.feature b { font-size: 13px; font-weight: 550; }
.feature span { font-size: 12px; color: var(--text-mute); }
.home-intro { border-top: 1px solid var(--line); }
.home-intro > .container { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 44px; }
.intro-heading .eyebrow { margin-bottom: 14px; }
.intro-heading h2 { font-size: clamp(25px, 3vw, 36px); font-weight: 500; line-height: 1.4; letter-spacing: -.045em; }
.intro-copy p { color: var(--text-sub); font-size: 14px; line-height: 1.95; }
.intro-copy p + p { margin-top: 18px; }
.intro-link { display: inline-flex; gap: 12px; margin-top: 24px; font-size: 12px; color: var(--text); }
.intro-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.page-hero { padding-top: 48px; }
.page-hero h1 { font-size: 36px; font-weight: 550; letter-spacing: -.05em; }
.page-hero p { font-size: 14px; color: var(--text-mute); }
.page-hero .cat-icon { background: transparent !important; }
.exp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.exp-card { gap: 12px; min-height: 190px; padding: 22px; border-color: var(--line); border-radius: 9px; background: linear-gradient(145deg, #14151a, #101115); }
.exp-card:hover { border-color: var(--line-strong); background: #1a1b21; box-shadow: none; }
.exp-card h4 { font-size: 16px; font-weight: 550; }
.exp-card p { color: var(--text-mute); font-size: 13px; line-height: 1.8; }
.exp-card .meta { font-size: 11px; }
.exp-card .topic { font-size: 10px; font-weight: 500; }
.filters { gap: 6px; }
.filter { padding: 7px 13px; border-radius: 6px; font-size: 12px; background: transparent; }
.filter.active { color: var(--text); background: #272830; border-color: #3b3c46; }
.site-footer { padding: 24px 0; font-size: 11px; }
.site-footer .footer-links { color: var(--text-mute); font-size: 11px; }
.site-footer .container { gap: 14px; }
.skip-link { color: #15151b; }
.experiment-explorer { padding: 24px 14px 18px; background: #0e0f12; }
.explorer-eyebrow { color: var(--text-mute); font-size: 9px; letter-spacing: .1em; }
.explorer-heading h2 { font-size: 15px; font-weight: 550; }
.explorer-heading h2 span { color: var(--text-sub); background: #23242b; }
.explorer-search-field { background: #17181d; border-color: #2d2e36; color: var(--text-mute); min-height: 36px; border-radius: 6px; }
.explorer-search-field input { font-size: 11px; padding-block: 8px; }
.explorer-search-field:focus-within { border-color: #7778a8; box-shadow: 0 0 0 2px #7475bc20; }
.explorer-search-hint { color: var(--text-mute); font-size: 10px; }
.explorer-home { min-height: 36px; font-size: 11px; font-weight: 500; }
.explorer-home[aria-current], .explorer-home:hover, .experiment-explorer summary:hover, .explorer-experiment:hover { background: #1c1d24; color: var(--text); }
.experiment-explorer summary { min-height: 36px; padding: 8px 9px; font-size: 12px; font-weight: 500; }
.explorer-category[open] > summary { background: #1b1c24; }
.explorer-category-dot { width: 6px; height: 6px; border-radius: 2px; }
.explorer-count, .explorer-chevron, .explorer-search-hint, .explorer-note, .explorer-experiment small, .explorer-result-count { color: var(--text-mute); }
.explorer-topics { border-color: var(--line); }
.explorer-category-all, .explorer-topic > summary, .explorer-experiment, .explorer-bottom > div { color: var(--text-sub); }
.explorer-category-all { font-size: 10px; }
.explorer-topic > summary { min-height: 32px; font-size: 11px; }
.explorer-experiment { font-size: 11px; }
.explorer-experiment[aria-current] { background: #272738; color: #ceceff; box-shadow: inset 2px 0 #a5a4ff; }
.explorer-bottom { padding-inline: 6px; }
.explorer-note { font-size: 10px; }
.explorer-bottom > div { font-size: 11px; }
.explorer-close, .explorer-clear, .explorer-empty p { color: var(--text-sub); }
.info-page a:not(.info-crumb a) { color: #b9b9ff; }
.info-date, .info-crumb, .info-contact dt { color: var(--text-mute); }
.info-page h1 { font-weight: 550; }
.info-page h2 { font-weight: 550; }
.info-summary { background: #14151a; }
.lab .bench, .lab .controls, .lab .guide, .lab .work { background: var(--surface); }
.lab .param select, .lab input[type=number] { background: #1d1e25; color: var(--text); }
.lab .feedback.good, .lab .option.right { background: #1c2b23; color: #a4dfb8; border-color: #3e7653; }
.lab .feedback.warn, .lab .option.wrong { background: #302120; color: #efb2aa; border-color: #85524b; }
.lab .option[aria-pressed=true], .lab .tip { color: var(--text); }
.lab .formula b, .lab .formula span { color: var(--text-sub); }
.lab .graph .grid { stroke: #292b34; }
.lab .graph .axis { stroke: #6d707e; }
.lab .toggle[aria-pressed=true] { background: #2c2d38; border-color: #67687b; }
.sfx-toggle { background: var(--surface); }
@media (max-width: 1280px) {
  .categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-card:nth-child(2) { border-right: 0; }
  .cat-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .hero > .container, .section > .container { padding-inline: 32px; }
  .exp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .explorer-launcher { padding: 5px 20px; background: #101115; }
  .explorer-shortcut { color: var(--text-mute); }
  .experiment-explorer { background: #101115; }
  .explorer-experiment { min-height: 42px; font-size: 13px; }
  .explorer-search-field input { font-size: 16px; }
  .explorer-open-button { font-size: 12px; }
}
@media (max-width: 600px) {
  .home-intro > .container { grid-template-columns: 1fr; gap: 22px; }
  .hero { padding-top: 42px; }
  .hero > .container, .section > .container { padding-inline: 20px; }
  .hero h1 { font-size: clamp(34px, 8vw, 48px); }
  .hero p { font-size: 14px; }
  .hero .eyebrow { margin-bottom: 20px; font-size: 9px; }
  .home-preview { margin-top: 32px; }
  .preview-toolbar { padding: 11px 13px; font-size: 9px; }
  .preview-body { grid-template-columns: 1fr; }
  .preview-stage { padding: 16px; border-right: 0; }
  .preview-notebook { border-top: 1px solid var(--line); padding: 16px; gap: 10px; }
  .preview-notebook .preview-todo, .preview-notebook p { display: none; }
  .preview-notebook .btn { width: 100%; }
  .categories { grid-template-columns: 1fr; }
  .cat-card { display: grid; grid-template-columns: 36px 1fr; gap: 6px 16px; min-height: 0; padding: 22px; border-right: 0; border-bottom: 1px solid var(--line); }
  .cat-card:last-child { border-bottom: 0; }
  .cat-card .cat-icon { grid-row: span 2; }
  .cat-card h3 small { display: inline; margin-left: 8px; }
  .cat-card p { grid-column: 2; }
  .cat-arrow { top: 20px; }
  .features { grid-template-columns: 1fr; gap: 20px; }
  .section-head { gap: 6px; }
  .section-head h2 { font-size: 21px; }
  .exp-grid { grid-template-columns: 1fr; }
  .page-hero { padding-top: 30px; }
  .page-hero h1 { font-size: 30px; }
  .has-explorer .exp-grid { grid-template-columns: 1fr; }
  .exp-card { min-height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}