@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: light;
  --paper: #eeeae2;
  --surface: #faf8f2;
  --ink: #192620;
  --muted: #647268;
  --line: #cbd1c6;
  --mint: #bdff68;
  --violet: #8076ef;
  --coral: #ff755e;
  font-family: 'DM Sans', 'Noto Sans JP', sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 10% 0%, #f9f3e8, transparent 43%), var(--paper); }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, pre:focus-visible { outline: 3px solid var(--violet); outline-offset: 4px; }
h1, h2, h3, p { margin-top: 0; }
.page { max-width: 1660px; margin-inline: auto; padding: 36px clamp(18px, 3.4vw, 54px); }
.hero { padding: 5px 6px 34px; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0; color: #007d69; font: 500 11px 'DM Mono', monospace; letter-spacing: .1em; }
.brand-mark { position: relative; width: 20px; height: 20px; border: 2px solid var(--violet); border-radius: 6px; }
.brand-mark::after { content: ''; position: absolute; left: 7px; top: 7px; width: 14px; height: 14px; border-radius: 5px; background: var(--mint); z-index: -1; }
h1 { margin: 24px 0 22px; font-size: clamp(40px, 5vw, 83px); line-height: 1.03; letter-spacing: 0; font-weight: 800; }
h1 > span { color: var(--violet); }
.title-break { display: none; }
.hero-bottom { display: flex; justify-content: space-between; align-items: end; gap: 25px; }
.lead { margin: 0; font-size: clamp(17px, 1.5vw, 22px); font-weight: 600; line-height: 1.65; }
.lead strong { font-weight: 800; }
.quiet-button { flex: none; min-height: 42px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 11px; font-weight: 800; transition: translate .18s, box-shadow .18s; }
.quiet-button:hover { translate: 0 -2px; box-shadow: 0 4px 0 #19262025; }
.lab, .code-section, .guide { overflow: clip; border: 1px solid var(--line); border-radius: 25px; background: var(--surface); box-shadow: 0 14px 36px #19262008; }
.lab { container: studio / inline-size; }
.section-heading { display: flex; align-items: center; gap: 16px; padding: 20px 25px; border-bottom: 1px solid var(--line); }
.section-symbol { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--coral); color: #fff; font-size: 28px; font-weight: 700; }
.section-symbol.violet { background: var(--violet); font-size: 18px; }
.section-symbol.dark { background: var(--ink); color: var(--mint); font: 500 22px 'DM Mono', monospace; }
.kicker { margin: 0 0 6px; color: #00816a; font: 500 11px 'DM Mono', monospace; letter-spacing: .09em; }
.section-heading h2 { margin: 0; font-size: clamp(18px, 1.8vw, 27px); line-height: 1.35; }
.browser-status { margin-left: auto; padding: 9px 12px; border-radius: 100px; background: #e7ede3; color: #467052; font-size: 10px; font-weight: 800; white-space: nowrap; }
.browser-status[data-supported='false'] { background: #fff0d7; color: #8b5627; }
.lab-grid { display: grid; grid-template-columns: 265px minmax(0, 1fr); }
.controls { background: #f3f1e9; border-right: 1px solid var(--line); }
.control-section { padding: 22px 19px; border-bottom: 1px solid var(--line); }
.control-section h3 { margin: 0 0 15px; font-size: 16px; font-weight: 800; }
.mode-list { position: relative; display: grid; gap: 7px; }
.mode-list button { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 57px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fcfaf4; color: var(--ink); text-align: left; transition: border-color .18s, translate .18s; }
.mode-list button:hover { border-color: #748b73; translate: 2px 0; }
.mode-list button[aria-pressed='true'] { border-color: var(--ink); background: var(--ink); color: white; }
.mode-list button > span:last-child { display: grid; gap: 3px; }
.mode-list strong { font-size: 12px; }
.mode-list small { color: var(--muted); font-size: 10px; }
.mode-list button[aria-pressed='true'] small { color: #bdcdbb; }
.mode-icon { display: grid; place-items: center; flex: none; width: 31px; height: 31px; border-radius: 8px; background: #e6ece1; color: var(--ink); font-size: 23px; }
.mode-list button[aria-pressed='true'] .mode-icon { background: var(--mint); }
.switch-row { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 42px; font-size: 12px; font-weight: 800; cursor: pointer; }
.switch-row input { position: absolute; right: 0; width: 42px; height: 24px; margin: 0; opacity: 0; cursor: pointer; }
.switch-track { position: relative; width: 40px; height: 23px; border: 1px solid #9ca99d; border-radius: 100px; background: #dce3d8; pointer-events: none; transition: background .18s; }
.switch-track::before { content: ''; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: white; box-shadow: 0 1px 3px #19262030; transition: translate .18s; }
.switch-row input:checked + .switch-track { background: #1c5b46; border-color: #1c5b46; }
.switch-row input:checked + .switch-track::before { translate: 17px 0; background: var(--mint); }
.switch-row input:focus-visible + .switch-track { outline: 3px solid var(--violet); outline-offset: 4px; }
.switch-row:has(input:disabled) { opacity: .45; cursor: default; }
.control-note { margin: 10px 0 0; color: var(--muted); font-size: 10px; line-height: 1.8; }
.range-label { display: block; margin-bottom: 17px; font-size: 12px; font-weight: 800; }
.range-label > span { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
output { color: #665ad0; font: 500 11px 'DM Mono', monospace; }
input[type='range'] { width: 100%; margin: 0; accent-color: var(--violet); }
.segmented { position: relative; display: flex; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: #e7ebe3; }
.segmented button { position: relative; z-index: 1; flex: 1; min-height: 33px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: #617064; font-size: 10px; font-weight: 800; white-space: nowrap; }
.segmented button:hover { color: var(--ink); }
.segmented button[aria-pressed='true'] { color: #554cbe; background: #fff; box-shadow: 0 2px 5px #23342415; }
@supports (anchor-name: --selection) {
  .segmented { anchor-scope: --selection; }
  .segmented button[aria-pressed='true'] { anchor-name: --selection; background: transparent; box-shadow: none; }
  .segmented::before { content: ''; position: absolute; position-anchor: --selection; top: anchor(top); left: anchor(left); width: anchor-size(width); height: anchor-size(height); border-radius: 7px; background: #fff; box-shadow: 0 2px 5px #23342415; transition: top .2s, left .2s, width .2s, height .2s; }
}
.control-actions { padding: 20px 19px; }
.control-actions button { width: 100%; }
.workspace { min-width: 0; display: flex; flex-direction: column; background: #e1e8df; }
.workspace-toolbar { display: flex; align-items: center; gap: 11px; min-height: 45px; padding: 10px 17px; border-bottom: 1px solid #bac8ba; color: #536b59; background: #d1dbce; font: 500 10px 'DM Mono', monospace; }
.window-dots { display: flex; flex: none; gap: 5px; }
.window-dots i { width: 8px; height: 8px; border-radius: 50%; background: #ff7362; }
.window-dots i:nth-child(2) { background: #ffc975; }
.window-dots i:nth-child(3) { background: #54c998; }
.route-kind { margin-left: auto; letter-spacing: .08em; }
.stage-wrap { display: grid; align-items: start; flex: 1; padding: clamp(16px, 2.4vw, 35px); background-image: linear-gradient(#b9c9b840 1px, transparent 1px), linear-gradient(90deg, #b9c9b840 1px, transparent 1px); background-size: 23px 23px; }
.demo-site { min-width: 0; border: 2px solid #243328; border-radius: 18px; background: #fffdf5; box-shadow: 8px 9px 0 #34483126; container: site / inline-size; }
.site-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 63px; padding: 14px 25px; border-bottom: 1px solid #d3d9ca; border-radius: 16px 16px 0 0; background: #fffdf5; }
.site-brand { display: flex; align-items: center; gap: 9px; color: #172b21; font-size: 14px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.site-brand > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--mint); font-size: 21px; }
.site-header > span { font: 500 10px 'DM Mono', monospace; letter-spacing: .05em; color: #687b69; }
.page-content { display: flex; flex-direction: column; padding: 28px; border-radius: 0 0 16px 16px; background: #fffdf5; min-height: calc(360px + 27cqi); }
.site-kicker { margin: 0 0 10px; color: #57745d; font: 500 10px 'DM Mono', monospace; letter-spacing: .1em; }
.gallery-heading { margin-bottom: 26px; }
.gallery-heading h2 { margin: 0 0 10px; font-size: clamp(31px, 4cqi, 46px); font-weight: 800; line-height: 1.06; }
.gallery-heading h2 span { color: #7d6ada; }
.gallery-heading > p:last-child { margin: 0; color: #6b7a6b; font-size: 11px; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 26px; }
.project-card { min-width: 0; text-decoration: none; }
.image-frame { position: relative; margin-bottom: 15px; }
.project-image { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 16px; }
.image-frame::after { content: ''; position: absolute; inset: 0; border: 1px solid #2038291f; border-radius: 16px; pointer-events: none; }
.open-arrow { position: absolute; right: 9px; bottom: 9px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fffaf0; color: #20352a; font-size: 17px; transition: rotate .2s, background .2s; }
.project-card:hover .open-arrow { rotate: 45deg; background: var(--mint); }
.project-category { margin: 0 0 9px; color: #648068; font: 500 10px 'DM Mono', monospace; line-height: 1.5; letter-spacing: .03em; }
.project-card h3 { margin: 0 0 7px; width: fit-content; font-size: clamp(15px, 2.3cqi, 24px); font-weight: 800; line-height: 1.1; }
.project-caption { margin: 0; color: #6f7c6b; font-size: 10px; }
.site-bottom { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; border-top: 1px solid #d4dccc; color: #70806c; font: 500 10px 'DM Mono', monospace; line-height: 1.5; }
.back-link { display: inline-block; margin-bottom: 22px; color: #54705b; font-size: 11px; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); align-items: start; gap: 27px; margin-bottom: 26px; }
.detail-image { border: 1px solid #20382915; }
.detail-copy { padding-top: 7px; }
.detail-copy h2 { width: fit-content; margin: 0 0 20px; font-size: clamp(28px, 4.4cqi, 49px); line-height: 1.03; font-weight: 800; }
.detail-description { margin: 0 0 18px; color: #506353; font-size: 12px; line-height: 1.9; }
.project-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.project-tags > span { padding: 5px 8px; border-radius: 100px; color: #5c715c; background: #ecf0e4; font-size: 10px; }
.detail-rule { height: 1px; margin: 23px 0; background: #d5dfcd; }
.detail-concept { color: #6a7c68; font-size: 11px; line-height: 1.9; }
.detail-back { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 20px; padding: 12px 13px; border: 1px solid #2f4a37; border-radius: 9px; color: #2f4a37; font-size: 10px; font-weight: 800; text-decoration: none; transition: background .18s; }
.detail-back:hover { background: #dfffaf; }
.detail-back > span { font-size: 20px; }
.workspace-footer { display: flex; align-items: center; gap: 15px; padding: 15px 23px; border-top: 1px solid #cad5c7; }
.journey { display: flex; align-items: center; flex: none; gap: 7px; color: #687d69; font-size: 10px; }
.journey b { padding: 6px 10px; border: 1px solid #bccbb7; border-radius: 100px; }
.journey .current { color: #263c2b; background: var(--mint); border-color: #7baf49; }
.journey i { font-style: normal; }
.workspace-footer p { margin: 0; color: #566a57; font-size: 10px; line-height: 1.6; }
.environment-note { margin: 0; padding: 14px 24px; border-top: 1px solid #e0c591; background: #fff3db; color: #876126; font-size: 12px; }
.code-section, .guide { margin-top: 24px; }
.code-grid { display: grid; grid-template-columns: minmax(260px, 30%) minmax(0, 1fr); }
.code-explanation { padding: 28px; border-right: 1px solid var(--line); background: #f3f1e9; }
.code-explanation h3 { margin: 0 0 15px; font-size: 22px; line-height: 1.4; }
.code-explanation > p { color: #5a6d5c; font-size: 12px; line-height: 1.9; }
code { overflow-wrap: anywhere; }
.connection-diagram { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin: 25px 0; }
.connection-diagram > div { display: grid; flex: 1; justify-items: center; gap: 9px; padding: 13px 9px; border: 1px solid #c4d3bb; border-radius: 12px; background: #fcfbf5; font-size: 10px; font-weight: 700; }
.connection-diagram i { display: block; width: 43px; height: 32px; border-radius: 7px; background: var(--mint); }
.connection-diagram > div:last-child i { width: 56px; height: 42px; background: #c4b6ff; }
.connection-diagram code { color: #60725c; font: 500 10px 'DM Mono', monospace; }
.download-button { display: block; width: 100%; min-height: 45px; margin-top: 22px; padding: 10px; border: 1px solid #7b9d50; border-radius: 10px; background: var(--mint); color: var(--ink); font-size: 12px; font-weight: 800; transition: translate .18s, box-shadow .18s; }
.download-button:hover { translate: 0 -2px; box-shadow: 0 4px 0 #7091423b; }
.code-panel { min-width: 0; padding: 28px; background: #1e2d25; color: #f5f8ee; }
.code-panel-head { display: flex; align-items: end; justify-content: space-between; gap: 15px; }
.code-panel .kicker { color: var(--mint); }
.code-panel h3 { margin: 0; font-size: 21px; }
.code-tabs { min-width: 130px; border-color: #53614e; background: #40513e; }
.code-tabs button { font-size: 11px; color: #cad6c1; }
.code-tabs button[aria-pressed='true'] { color: #203820; }
.code-panel > p { margin: 17px 0 12px; color: #b9cbb3; font-size: 11px; }
.code-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 10px 8px 18px; border: 1px solid #50684e; border-bottom: 0; border-radius: 11px 11px 0 0; background: #334d36; color: #b3c7a7; font: 500 11px 'DM Mono', monospace; }
.code-toolbar button { min-height: 34px; padding: 0 12px; border: 0; border-radius: 7px; background: #f8faf0; color: #213721; font-size: 11px; font-weight: 800; transition: background .18s; }
.code-toolbar button:hover { background: var(--mint); }
.code-panel pre { height: 360px; margin: 0; padding: 21px; overflow: auto; border: 1px solid #50684e; border-radius: 0 0 11px 11px; background: #142119; color: #c4e4b3; font: 400 11px/1.65 'DM Mono', monospace; white-space: pre; tab-size: 2; }
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.guide article { padding: 28px; border-right: 1px solid var(--line); }
.guide article:last-child { border-right: 0; }
.guide h3 { margin: 0 0 12px; font-size: 17px; }
.guide article p { margin: 0; color: #61745e; font-size: 12px; line-height: 1.9; }
.sources { margin: 0; padding: 0 28px 25px; color: #637760; font-size: 11px; line-height: 1.8; }
.sources a { text-underline-offset: 3px; }
.page-footer { display: flex; justify-content: space-between; gap: 15px; padding: 26px 7px 0; color: #6c7d65; font: 500 10px 'DM Mono', monospace; }
.toast { position: fixed; z-index: 5; bottom: 25px; left: 50%; max-width: calc(100% - 32px); margin: 0; padding: 12px 17px; border: 1px solid #4d7043; border-radius: 10px; background: #203b23; color: #f4ffe9; box-shadow: 0 8px 25px #172a1c30; font-size: 12px; opacity: 0; translate: -50% 8px; pointer-events: none; transition: opacity .2s, translate .2s; }
.toast[data-visible='true'] { opacity: 1; translate: -50% 0; }

@container studio (width < 970px) {
  .lab-grid { display: flex; flex-direction: column; }
  .workspace { order: 0; }
  .controls { order: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-right: 0; border-top: 1px solid var(--line); }
  .control-section { border-right: 1px solid var(--line); }
  .control-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 15px; }
  .control-actions button { width: auto; }
  .control-actions p { margin: 0; }
  .browser-status { display: none; }
}
@container studio (width < 650px) {
  .controls { display: block; }
  .mode-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mode-list button { align-items: start; }
  .mode-list small { font-size: 10px; line-height: 1.5; }
  .mode-icon { width: 26px; height: 26px; }
  .stage-wrap { padding: 15px; }
  .workspace-toolbar { padding: 10px 13px; }
  .route-kind { display: none; }
  .workspace-footer { padding: 13px 15px; align-items: start; flex-direction: column; gap: 10px; }
  .control-section { border-right: 0; }
  .control-actions { display: block; }
  .control-actions button { width: 100%; }
  .control-actions p { margin-top: 10px; }
}
@container site (width < 680px) {
  .page-content { padding: 23px; }
  .site-header { padding: 13px 23px; }
  .site-header > span { display: none; }
  .project-grid { gap: 12px; }
  .project-category { font-size: 10px; }
  .gallery-heading h2 { font-size: 38px; }
  .detail-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; }
  .detail-copy h2 { font-size: 32px; }
  .detail-description { font-size: 11px; }
  .detail-rule { margin: 15px 0; }
  .detail-concept { font-size: 10px; }
  .site-bottom { flex-wrap: wrap; }
}
@container site (width < 450px) {
  .page-content { min-height: 0; }
  .project-grid { grid-template-columns: 1fr; gap: 28px; }
  .project-card h3 { font-size: 24px; }
  .gallery-heading h2 { font-size: 32px; }
  .image-frame { margin-bottom: 12px; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-copy h2 { font-size: 38px; }
  .detail-copy { padding-top: 0; }
  .detail-description { font-size: 12px; }
  .detail-concept { font-size: 11px; }
}
@media (width < 850px) {
  .page { padding: 26px 17px; }
  .hero-bottom { align-items: start; flex-direction: column; gap: 17px; }
  .code-grid, .guide-grid { grid-template-columns: 1fr; }
  .code-explanation { border-right: 0; border-bottom: 1px solid var(--line); }
  .connection-diagram { max-width: 310px; }
  .guide article { border-right: 0; border-bottom: 1px solid var(--line); }
  .guide article:last-child { border-bottom: 0; }
}
@media (width < 520px) {
  .page { padding: 23px 13px; }
  h1 { margin-top: 24px; font-size: 42px; overflow-wrap: anywhere; }
  .eyebrow { font-size: 10px; line-height: 1.6; }
  .lead { font-size: 17px; }
  .section-heading { gap: 12px; padding: 16px; }
  .section-symbol { width: 39px; height: 39px; border-radius: 11px; }
  .section-heading h2 { font-size: 18px; }
  .lab, .code-section, .guide { border-radius: 19px; }
  .code-explanation, .code-panel, .guide article { padding: 23px 19px; }
  .code-panel-head { align-items: start; flex-direction: column; }
  .sources { padding: 5px 19px 23px; }
  .page-footer { flex-direction: column; font-size: 10px; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}