* {box-sizing: border-box;}
html {scroll-behavior: smooth; scroll-padding-top: 24px;}
body {margin: 0; background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased;}
a {color: inherit; text-decoration: none;}
button, input {font: inherit;}
button, a, input { -webkit-tap-highlight-color: transparent; }
button {cursor: pointer;}
button:disabled {cursor: default;}
button, input {color: inherit;}
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible {outline: 3px solid var(--cyan); outline-offset: 5px;}
::selection {background: #59408a; color: white;}
img, svg, canvas {max-width: 100%;}
h1,h2,h3,p,figure {margin: 0;}
h1,h2,h3 {line-height: 1.15; letter-spacing: -.035em; font-weight: 720;}
h1 {font-size: clamp(2.35rem,4vw,3.5rem);}
h2 {font-size: clamp(1.7rem,2.7vw,2.3rem);}
h3 {font-size: 1.25rem;}
p {color: var(--muted);}
small {font-size: .82rem;}
[hidden] {display:none !important;}
.container {max-width: calc(var(--max) + 160px); margin: 0 auto; padding: 0 clamp(32px,6.5vw,80px);}
.skip-link {position: fixed; left: 16px; top: -100px; z-index: 50; background: var(--cyan); color: var(--bg); padding: 12px 20px; border-radius: 8px;}
.skip-link:focus {top: 12px;}
.site-header {border-bottom: 1px solid transparent;}
.header-inner {min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 36px;}
.brand {font-size: 1.65rem; font-weight: 760; letter-spacing: -.05em; white-space: nowrap; line-height: 1.3;}
.brand span {color: var(--violet);}
.navigation {display:flex; align-items: center; gap: 36px; font-size:.94rem;}
.navigation a {color: var(--muted); transition: color .15s;}
.navigation a:hover, .navigation a[aria-current] {color: var(--text);}
.navigation a[aria-current] {text-decoration: underline; text-decoration-color: var(--violet); text-underline-offset: 9px;}
.navigation .support-link {border:1px solid var(--subtle);border-radius:10px;padding:7px 23px;color:var(--text);}
.navigation .support-link:hover {border-color:var(--violet);}
.language-switch {border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:.8rem;color:var(--muted);line-height:1.4;}
.language-switch:hover {border-color:var(--violet);color:var(--text);}
.header-inner>.navigation {margin-left:auto;}
.support-panel {background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;margin-top:32px;}
.prose .support-panel h2 {margin-top:0;}
.support-panel .external-note {font-size:.85rem;margin:18px 0;color:var(--subtle);}
.support-panel .button {margin:22px 0 0;}
.menu-toggle {display: none; background: transparent; border: 1px solid var(--line); padding: 8px 12px; border-radius: 8px; font-size: .9rem;}
.button {display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:48px; padding:11px 23px; border:1px solid transparent; border-radius:10px; font-size:.94rem; font-weight:600; line-height:1.4; transition: background .15s,border-color .15s,transform .15s;}
.button:hover {transform: translateY(-1px);}
.button-primary {background:#7c4de3;color:white;border-color:#a17aff; box-shadow:0 3px 12px #0002;}
.button-primary:hover {background:#7949df;}
.button-secondary {background:transparent; border-color:var(--subtle); color:var(--text);}
.button-secondary:hover {background:var(--surface);border-color:var(--violet);}
.button-quiet {padding-left:0;padding-right:0;color:var(--muted);background:transparent;}
.button-quiet:hover {color:var(--text);}
.arrow {width:19px;height:19px; flex-shrink:0;}
.hero {display:grid;grid-template-columns:1.2fr 1fr;gap:16px;align-items:center;min-height:450px;padding:24px 0;}
.hero h1 {font-size:clamp(2.7rem,5.4vw,4.1rem); line-height:1.06; letter-spacing:-.045em; max-width:660px;width:110%;position:relative;z-index:1;}
.hero h1 span {color:var(--violet);}
.hero-copy>p {font-size:1.3rem;line-height:1.65;max-width:500px;margin-top:28px;}
.hero-actions {display:flex;align-items:center;flex-wrap:wrap;gap:26px;margin-top:32px;}
.hero-figure {align-self:stretch;min-width:0;display:flex;flex-direction:column;justify-content:center;}
.hero-figure canvas {width:100%;aspect-ratio:1.05;display:block;}
.hero-caption {text-align:right;font-size:.82rem;padding-right:16px; color:var(--muted); margin-top:-30px;position:relative;}
.hero-caption strong {display:block;color:var(--text);font-weight:500;}
.section {padding:36px 0;border-top:1px solid var(--line);}
.section-heading {display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:30px;}
.section-heading h2,.steps h2 {font-size:clamp(1.7rem,3.5vw,2.3rem);}
.section-heading p {margin-top:12px;font-size:1.06rem;}
.text-link {color:var(--violet);display:inline-flex;align-items:center;gap:9px;font-weight:600;}
.text-link:hover {color:#c5a6ff;}
.experiment-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.experiment-card {background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:10px;display:flex;flex-direction:column;transition:border-color .15s,transform .15s;min-width:0;}
.experiment-card:hover {border-color:#66728c;transform:translateY(-3px);}
.card-preview {background:var(--canvas);border-radius:8px;aspect-ratio:1.25;width:100%;display:block;}
.card-content {padding:16px 10px 8px;display:flex;flex-direction:column;flex:1;}
.card-content h3 {line-height:1.3; font-size:1.2rem;}
.card-subject {margin-top:6px;font-size:.9rem;}
.card-description {font-size:.92rem;line-height:1.6;margin-top:11px;}
.card-meta {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:12px;font-size:.85rem;color:var(--muted);}
.card-meta .duration {display:flex;gap:8px;align-items:center;}
.card-meta svg {width:17px;height:17px;}
.card-status {font-size:.75rem;color:var(--mint);}
.card-action {border-top:1px solid var(--line);margin-top:16px;padding-top:15px;}
.steps {padding:32px 0;}
.step-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:34px;}
.step+.step {border-left:1px solid var(--line);padding-left:30px;}
.step-number {display:block;font-size:2.15rem;font-weight:700;line-height:1.2;color:var(--cyan);letter-spacing:-.04em;margin-bottom:10px;}
.step:nth-child(2) .step-number {color:var(--violet);}
.step p {font-size:.94rem;margin-top:8px;}
.site-footer {border-top:1px solid var(--line);}
.footer-inner {padding-top:24px;padding-bottom:28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;}
.footer-inner .brand {font-size:1.3rem;}
.footer-inner p {font-size:.82rem;margin-top:3px;}
.footer-links {display:flex;flex-wrap:wrap;gap:28px;font-size:.85rem;color:var(--muted);}
.footer-links a:hover {color:var(--text);}
.page-heading {padding:40px 0 34px;}
.page-heading p {margin-top:16px;font-size:1.12rem;max-width:740px;}
.breadcrumb {display:flex;gap:10px;flex-wrap:wrap;font-size:.85rem;color:var(--subtle);margin-bottom:18px;}
.breadcrumb a {color:var(--muted);}
.breadcrumb a:hover {color:var(--violet);}
.catalog-tools {display:flex;gap:24px;align-items:end;justify-content:space-between;margin:0 0 28px;}
.search-field {display:flex;flex-direction:column;gap:8px;max-width:430px;flex:1;font-size:.85rem;color:var(--muted);}
.search-field input {background:var(--surface);border:1px solid var(--line);border-radius:10px;width:100%;min-height:48px;padding:10px 15px;font-size:1rem;}
input::placeholder {color:var(--subtle);opacity:1;}
.filters {display:flex;gap:8px;flex-wrap:wrap;}
.filter {background:transparent;border:1px solid var(--line);padding:9px 18px;min-height:45px;border-radius:8px;font-size:.9rem;}
.filter[aria-pressed=true] {background:#8b5cf624;border-color:var(--violet);color:#d1b7ff;}
.result-count {margin-bottom:18px;font-size:.85rem;color:var(--subtle);}
.empty-state {text-align:center;border:1px dashed var(--line);padding:60px 24px;border-radius:var(--radius);}
.empty-state p {margin:12px auto 24px;max-width:460px;}
.page-content {padding-bottom:64px;min-height:50vh;}
.notice {font-size:.88rem;padding:12px 16px;border:1px solid #947b49;background:#6b54172b;border-radius:8px;color:#ead4a3;margin:20px 0;}
.prose {max-width:760px;}
.prose h2 {font-size:1.65rem;margin:36px 0 14px;}
.prose p+p {margin-top:16px;}
.prose ul {color:var(--muted);padding-left:22px;}
.prose li {margin:8px 0;}
.prose .button {margin-top:24px;}
.mission {font-size:1.4rem;line-height:1.6;color:var(--text);max-width:740px;padding:0 0 32px;border-bottom:1px solid var(--line);}
.progress-summary {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--line);padding:28px 0;margin-bottom:36px;gap:24px;}
.progress-number {display:block;font-size:2.5rem;font-weight:700;letter-spacing:-.04em;color:var(--cyan);line-height:1.2;}
.progress-summary p {margin-top:8px;font-size:.9rem;}
.progress-list {display:grid;gap:14px;}
.progress-row {display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);}
.progress-row h2 {font-size:1.2rem;}
.progress-row p {font-size:.88rem;margin:8px 0 12px;}
.progress-track {height:5px;border-radius:6px;background:#394459;max-width:400px;overflow:hidden;}
.progress-track span {display:block;height:100%;background:var(--cyan);}
.progress-review {font-size:.85rem;color:var(--muted);margin-top:8px;}
.progress-footer {display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:36px;font-size:.87rem;}
.danger {color:var(--error);border-color:#77535e;}
dialog {background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:var(--radius);padding:30px;max-width:460px;width:calc(100% - 40px);}
dialog::backdrop {background:#050912c9;}
dialog h2 {font-size:1.5rem;}
dialog p {margin:16px 0 24px;}
.dialog-actions {display:flex;gap:12px;justify-content:flex-end;}
.error-page {padding:90px 0 120px;max-width:650px;}
.error-page .code {font-size:1rem;color:var(--violet);letter-spacing:.12em;margin-bottom:20px;}
.error-page p {margin:24px 0;}
@media (min-width:1400px) {.hero {min-height:530px;}.hero h1 {font-size:4.1rem;}}
@media (max-width:1000px) {
  .navigation {gap:24px;}.header-inner {min-height:88px;}.hero {gap:16px;min-height:450px;}.hero h1 {font-size:3rem;}.hero-actions {gap:14px;}.hero-actions .button {font-size:.85rem;padding:11px 16px;}.hero-copy>p {font-size:1.05rem;}.hero-caption {margin-top:-16px;}.experiment-grid {gap:16px;}.card-content {padding:16px 5px 10px;}.card-content h3 {font-size:1.08rem;}
}
@media (max-width:700px) {
  .container {padding:0 22px;}.header-inner {min-height:80px;gap:16px;flex-wrap:wrap;position:relative;}.brand {font-size:1.45rem;}.menu-toggle {display:block;}.navigation {display:none;width:100%;padding:8px 0 22px;gap:10px;align-items:stretch;flex-direction:column;}.navigation.is-open {display:flex;}.navigation a {padding:9px 0;}.navigation .support-link {align-self:flex-start;padding:7px 20px;}.hero {grid-template-columns:1fr;padding:38px 0 42px;gap:24px;}.hero h1 {font-size:clamp(2.65rem,9vw,3.6rem);max-width:560px;}.hero-copy>p {font-size:1.06rem;margin-top:22px;}.hero-actions {gap:20px;margin-top:26px;}.hero-actions .button {font-size:.9rem;}.hero-figure {width:100%;max-width:440px;margin:auto;}.hero-figure canvas {aspect-ratio:1.2;}.hero-caption {margin-top:-28px;font-size:.75rem;}.section {padding:34px 0;}.section-heading {margin-bottom:24px;align-items:start;flex-direction:column;gap:16px;}.section-heading h2 {font-size:1.7rem;}.section-heading p {font-size:.95rem;}.experiment-grid {grid-template-columns:1fr;gap:20px;}.card-preview {aspect-ratio:1.9;}.card-content {padding:18px 10px 12px;}.card-content h3 {font-size:1.25rem;}.step-grid {grid-template-columns:1fr;gap:24px;margin-top:28px;}.step+.step {padding:24px 0 0;border-left:0;border-top:1px solid var(--line);}.step-number {font-size:1.8rem;}.steps {padding-bottom:36px;}.footer-inner {align-items:start;flex-direction:column;gap:20px;padding-top:24px;padding-bottom:28px;}.page-heading {padding:28px 0;}.page-heading p {font-size:1rem;}.catalog-tools {align-items:stretch;flex-direction:column;gap:18px;}.search-field {max-width:none;}.filter {padding:9px 14px;}.page-content {padding-bottom:40px;}.progress-summary {gap:12px;padding:24px 0;}.progress-number {font-size:2rem;}.progress-summary p {font-size:.77rem;}.progress-row {grid-template-columns:1fr;padding:20px;gap:18px;}.progress-row .button {justify-self:start;}.progress-footer {flex-direction:column;align-items:start;}.mission {font-size:1.2rem;}.prose h2 {font-size:1.4rem;}
}
@media (prefers-reduced-motion:reduce) {html {scroll-behavior:auto;}*,*::before,*::after {transition:none!important;animation:none!important;}}
@media (max-width:700px) {.hero h1 {width:100%;}.hero-copy>p {font-size:1.06rem;}.card-preview {aspect-ratio:1.9;}}
@media (max-width:700px) {.header-inner .brand {order:0;}.language-switch {order:1;margin-left:auto;}.menu-toggle {order:2;}.header-inner>.navigation {order:3;margin-left:0;}.support-panel {padding:22px;}.footer-links {flex-wrap:wrap;}}
@media (min-width:701px) and (max-width:900px) {
  .header-inner {min-height:80px;gap:16px;flex-wrap:wrap;}
  .header-inner .brand {order:0;}
  .language-switch {order:1;margin-left:auto;}
  .menu-toggle {display:block;order:2;}
  .header-inner>.navigation {display:none;order:3;width:100%;margin-left:0;padding:8px 0 22px;gap:10px;align-items:stretch;flex-direction:column;}
  .header-inner>.navigation.is-open {display:flex;}
  .navigation a {padding:9px 0;}
  .navigation .support-link {align-self:flex-start;padding:7px 20px;}
}