@font-face { font-family: "SUIT Variable"; src: url("fonts/SUIT-Variable.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }
:root {
  --ink: #121318;
  --ink-2: #1b1c23;
  --paper: #f6f6f2;
  --white: #fff;
  --line-dark: #3a3b44;
  --line-light: #dadbd8;
  --muted-dark: #a7a8b2;
  --muted-light: #71747a;
  --lime: #d8fa57;
  --orange: #ff825c;
  --pink: #ffa9c2;
  --mint: #9decc9;
  --lilac: #c9adff;
  --blue: #96c9ff;
  --focus: #2d5bff;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius-control: 2px;
  --motion-fast: 180ms;
  --motion-standard: 320ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --font: "SUIT Variable", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --display: "SUIT Variable", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--ink); color: var(--white); font-family: var(--font); font-synthesis: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
svg { width: 20px; height: 20px; flex: none; }
a { color: inherit; }
.skip-link { position: fixed; z-index: 100; top: -70px; left: 12px; padding: 12px 16px; background: var(--lime); color: var(--ink); }
.skip-link:focus { top: 12px; }

/* Mobile is the base layout. Wider canvases only add space and columns below. */
.site-header { position: sticky; z-index: 30; top: 0; border-bottom: 1px solid var(--line-dark); background: #121318f5; backdrop-filter: blur(16px); view-transition-name: site-header; }
.header-inner { display: flex; align-items: center; height: 62px; padding: 0 17px; }
.brand { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 0; border: 0; background: none; color: white; text-align: left; font-family: var(--display); font-size: 19px; font-weight: 850; letter-spacing: -.05em; line-height: .86; }
.brand-mark { display: block; width: 32px; height: 32px; flex: none; }
.brand-route-base { opacity: .3; }
.brand-route { stroke-dasharray: 1; stroke-dashoffset: 1; animation: brand-draw 700ms var(--ease-out) 120ms both; }
.brand-node { opacity: 0; transform-box: fill-box; transform-origin: center; animation: brand-arrive 280ms var(--ease-out) both; }
.brand-origin { opacity: 1; animation: none; }
.brand-destination-one { animation-delay: 660ms; }
.brand-destination-two { animation-delay: 780ms; }
html.brand-intro-done .brand-route { animation: none; stroke-dashoffset: 0; }
html.brand-intro-done .brand-node { animation: none; opacity: 1; transform: none; }
.header-nav { display: none; }
.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.lang-button { padding: 6px 0; border: 0; background: none; color: #dedee3; font-size: 10px; font-weight: 750; }
.ask-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--radius-control); background: var(--lime); color: var(--ink); font-size: 11px; font-weight: 850; white-space: nowrap; transition: transform var(--motion-fast) var(--ease-out), background var(--motion-fast); }
.ask-button:hover { background: #e6ff92; }
.ask-button > span:first-child { font-size: 17px; line-height: 1; }
.main-layout { display: block; }
.discovery-column { min-width: 0; background: var(--ink); }

.masthead { display: block; overflow: hidden; border-bottom: 1px solid var(--line-dark); }
.masthead-copy { position: relative; z-index: 1; padding: 25px 20px 26px; }
.eyebrow, .section-index, .detail-eyebrow, .dialog-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow { color: var(--lime); }
.eyebrow-dot, .live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.masthead h1 { margin: 14px 0 9px; font-family: var(--display); font-size: clamp(44px, 10vw, 64px); font-weight: 760; letter-spacing: -.055em; line-height: 1.08; word-break: keep-all; }
.masthead-copy p { max-width: 310px; margin: 0; color: #b7b8c0; font-size: 12px; line-height: 1.6; }
.demo-label { display: inline-block; margin-top: 13px; color: #90919b; font-size: 9px; font-weight: 700; }
.masthead-art { display: none; }

.wall-section { padding: 26px 12px 50px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 0 7px 20px; }
.section-index { color: var(--muted-dark); }
.section-heading h2 { margin: 7px 0 4px; font-size: 35px; font-weight: 760; letter-spacing: -.045em; line-height: 1.1; }
.section-heading p { max-width: 250px; margin: 0; color: var(--muted-dark); font-size: 11px; }
.result-count { padding-bottom: 4px; color: var(--lime); font-size: 9px; font-weight: 800; white-space: nowrap; }
.toolbar { display: flex; align-items: stretch; flex-direction: column; gap: var(--space-3); margin: 0 7px 14px; }
.topic-list { display: flex; flex-wrap: nowrap; gap: 5px; overflow-x: auto; margin-right: -19px; padding-right: 19px; scrollbar-width: none; }
.topic-list::-webkit-scrollbar { display: none; }
.topic-filter { padding: 8px 12px; border: 1px solid #54555d; border-radius: 30px; background: transparent; color: #dcdee2; font-size: 11px; font-weight: 700; white-space: nowrap; transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast); }
.topic-filter:hover { border-color: var(--lime); }
.topic-filter.active { border-color: var(--lime); background: var(--lime); color: var(--ink); }
.search-field { display: flex; align-items: center; gap: 7px; width: 100%; border-bottom: 1px solid #72737b; color: #aeb0b7; }
.search-field svg { width: 16px; height: 16px; }
.search-field input { width: 100%; min-width: 0; height: 34px; border: 0; outline: 0; background: transparent; color: white; font-size: 11px; }
.search-field input::placeholder { color: #aeb0b7; }
.question-wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(174px, auto); grid-auto-flow: dense; gap: 8px; }
.question-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; overflow: hidden; padding: 14px; border: 2px solid transparent; border-radius: var(--radius-control); color: var(--ink); text-align: left; isolation: isolate; transition: border-color var(--motion-fast), filter var(--motion-fast); }
.question-tile:hover { filter: brightness(1.045); }
.question-tile.is-selected { border-color: white; box-shadow: inset 0 0 0 2px var(--ink); }
.question-tile::before, .question-tile::after { content: ""; position: absolute; z-index: -1; right: -21px; bottom: -37px; width: 120px; height: 120px; border: 1px solid currentColor; border-radius: 50%; opacity: .14; }
.question-tile::after { right: 10px; bottom: -51px; opacity: .12; }
.shape-wide { grid-column: span 2; }.shape-tall { grid-column: span 1; grid-row: span 2; }.shape-standard { grid-column: span 2; }.shape-short { grid-column: span 1; }
.question-tile:last-child:nth-child(odd) { grid-column: span 2; }
.tone-lilac { background: var(--lilac); }.tone-mint { background: var(--mint); }.tone-orange { background: var(--orange); }.tone-pink { background: var(--pink); }.tone-cream { background: #f7f2e7; }.tone-blue { background: var(--blue); }.tone-lime { background: var(--lime); }.tone-rose { background: #efb1aa; }.tone-lavender { background: #dfd6ff; }
.tile-top, .tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; }
.tile-topic { padding: 4px 8px 3px; border: 1px solid currentColor; border-radius: 20px; font-size: 8px; font-weight: 850; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; }
.tile-index { font-size: 10px; font-weight: 850; letter-spacing: .12em; opacity: .62; }
.tile-title { display: block; max-width: 100%; margin: 10px 0 8px; font-family: var(--display); font-size: 25px; font-weight: 770; letter-spacing: -.052em; line-height: 1.19; word-break: keep-all; overflow-wrap: anywhere; }
.shape-wide .tile-title { font-size: 31px; }.shape-tall .tile-title { font-size: 29px; }.shape-short .tile-title { font-size: 20px; }
.question-tile .tile-title.is-long { font-size: clamp(19px, 5.8vw, 25px); line-height: 1.23; }
.tile-summary { display: block; min-width: 0; font-size: 9px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.tile-arrow { display: grid; place-items: center; width: 27px; height: 27px; flex: 0 0 auto; border-radius: 50%; background: var(--ink); color: white; transition: transform var(--motion-standard) var(--ease-out); }
.question-tile:hover .tile-arrow { transform: translateX(3px); }
.tile-arrow svg { width: 15px; height: 15px; }
.empty-state { grid-column: 1 / -1; display: grid; place-items: center; min-height: 200px; border: 1px dashed #72737b; color: var(--muted-dark); font-size: 14px; }
.principle { margin: 0 18px 40px; padding-top: 22px; border-top: 1px solid var(--line-dark); }.principle p { font-size: 12px; font-weight: 800; letter-spacing: -.02em; }
footer { margin: 0 18px 25px; color: #85868f; font-size: 10px; }

/* A question becomes a full reading surface on phones. */
.detail-pane { display: none; min-width: 0; min-height: calc(100vh - 62px); background: var(--paper); color: var(--ink); }
.site-shell.detail-open .discovery-column { display: none; }.site-shell.detail-open .detail-pane { display: block; }
.detail-inner { display: flex; flex-direction: column; min-height: 100%; }
.detail-top { display: flex; align-items: center; justify-content: space-between; padding: 19px 19px 0; }
.mobile-back { display: inline-block; margin-right: auto; padding: 0; border: 0; background: none; color: #4e4e55; font-size: 11px; font-weight: 750; }
.detail-eyebrow { display: none; color: #56565c; }.live-dot { color: #7257ff; }
.detail-num { color: #9a9ca2; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.detail-head { padding: 29px 20px 22px; }
.detail-topic { color: #6656b4; font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }.detail-topic span { padding: 0 6px; color: #b2b0bc; }
.detail-head h2 { max-width: 630px; margin: 14px 0 12px; font-size: clamp(41px, 10vw, 59px); font-weight: 760; letter-spacing: -.05em; line-height: 1.1; word-break: keep-all; }
.detail-head h2.is-long { font-size: clamp(29px, 7vw, 42px); line-height: 1.18; overflow-wrap: anywhere; }
.detail-head > p { max-width: 520px; margin: 0; color: #62656a; font-size: 13px; line-height: 1.6; }
.detail-actions { display: flex; align-items: center; gap: 9px; margin-top: 24px; }
.vote-button, .quiet-icon { display: inline-flex; align-items: center; justify-content: center; min-height: 37px; border: 1px solid #cdceca; background: transparent; color: var(--ink); transition: transform var(--motion-fast), background var(--motion-fast), color var(--motion-fast); }
.vote-button:hover, .quiet-icon:hover { background: #e9e8e3; }
.vote-button { gap: 6px; padding: 0 12px; font-size: 11px; font-weight: 800; }.vote-button span { font-size: 19px; font-weight: 500; line-height: 1; }
.vote-button.active, .quiet-icon.active { border-color: var(--ink); background: var(--ink); color: white; }.quiet-icon { width: 37px; }.quiet-icon svg { width: 17px; height: 17px; }
.detail-demo { margin-left: auto; color: #888b8c; font-size: 10px; font-weight: 700; }
.detail-tabs { display: flex; gap: var(--space-6); padding: 0 20px; border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
.detail-tabs button { display: flex; align-items: center; gap: 7px; min-height: 52px; padding: 0; border: 0; border-bottom: 3px solid transparent; background: none; color: #77797d; font-size: 12px; font-weight: 800; transition: color var(--motion-fast), border-color var(--motion-fast); }
.detail-tabs button.active { border-bottom-color: #6f50e9; color: var(--ink); }.detail-tabs button span { display: grid; place-items: center; min-width: 19px; height: 19px; border-radius: 50%; background: #e7e6e2; font-size: 9px; }
.detail-body { padding: 0 20px; animation: fade-in 220ms ease-out both; }
.thread-list { position: relative; }.thread-list::before { content: ""; position: absolute; top: 42px; bottom: 36px; left: 16px; width: 1px; background: #d0d2cd; }
.comment { position: relative; display: flex; gap: 13px; padding: 21px 0; border-bottom: 1px solid var(--line-light); }.comment.nested { padding-left: 20px; }.comment.nested::before { content: ""; position: absolute; top: 37px; left: 16px; width: 20px; height: 1px; background: #d0d2cd; }
.avatar { z-index: 1; display: grid; place-items: center; width: 33px; height: 33px; flex: 0 0 auto; border-radius: 50%; background: var(--lilac); color: var(--ink); font-size: 12px; font-weight: 850; }.avatar-1 { background: var(--mint); }.avatar-2 { background: var(--orange); }.avatar-3 { background: var(--blue); }
.comment-main { min-width: 0; }.comment-head { display: flex; align-items: center; gap: 10px; }.comment-head strong { font-size: 11px; }.comment-head span { color: #a0a2a2; font-size: 9px; }
.comment p { margin: 8px 0 10px; color: #3c3f42; font-size: 12px; line-height: 1.64; word-break: keep-all; overflow-wrap: anywhere; }.reply-button { padding: 0; border: 0; background: none; color: #77797b; font-size: 10px; font-weight: 750; }.reply-button:hover { color: #6f50e9; }
.comment-form { margin: 24px 20px 0; }.comment-form label, .branch-form label { display: block; margin-bottom: 10px; font-size: 11px; font-weight: 850; }
.comment-compose { display: flex; align-items: flex-end; gap: 8px; padding: 9px; border: 1px solid #c9cac5; background: white; }.comment-compose textarea { width: 100%; min-height: 52px; resize: vertical; padding: 7px; border: 0; outline: 0; color: var(--ink); font-size: 11px; line-height: 1.5; }
.comment-compose button, .branch-form button { display: grid; place-items: center; width: 33px; height: 33px; flex: 0 0 auto; border: 0; border-radius: 50%; background: var(--ink); color: white; }.comment-compose button svg, .branch-form button svg { width: 16px; height: 16px; }
.detail-note { display: flex; gap: 10px; margin: 24px 20px; padding: 15px; background: #ebeae5; color: #6e7072; }.detail-note span { font-size: 15px; line-height: 1; }.detail-note p { margin: 0; font-size: 10px; line-height: 1.55; }
.branch-list { padding: 14px 0; }.branch-row { position: relative; display: flex; align-items: center; gap: 14px; min-height: 76px; border-bottom: 1px solid var(--line-light); }
.branch-row::before { content: ""; position: absolute; left: 34px; right: 0; bottom: -1px; height: 1px; background: #8b78e8; transform: scaleX(0); transform-origin: left; animation: branch-grow 520ms var(--ease-out) both; }
.branch-node { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 1px solid #7668c5; border-radius: 50%; color: #695ab9; font-size: 10px; font-weight: 800; }.branch-row p { flex: 1; margin: 0; font-size: 13px; font-weight: 750; line-height: 1.4; }.branch-row button { border: 0; background: none; color: #5d4cc9; }.branch-empty { color: var(--muted-light); font-size: 12px; }
.branch-form { padding-top: 18px; }.branch-form > div { display: flex; align-items: center; gap: 7px; padding: 6px; border: 1px solid #c9cac5; background: white; }.branch-form input { flex: 1; min-width: 0; height: 34px; padding: 0 8px; border: 0; outline: 0; font-size: 11px; }

.modal-backdrop { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; overflow: auto; padding: 20px; background: #101118db; animation: fade-in 240ms both; }
.ask-dialog { position: relative; width: min(100%, 560px); padding: 28px 20px; background: var(--paper); color: var(--ink); box-shadow: 0 24px 70px #0005; animation: dialog-arrive 240ms var(--ease-out) both; }
.dialog-close { position: absolute; top: 23px; right: 23px; border: 0; background: none; color: var(--ink); }.dialog-kicker { color: #6252ae; }.ask-dialog h2 { margin: 15px 0 30px; font-size: 33px; letter-spacing: -.075em; line-height: 1.1; }
.ask-dialog label { display: block; margin: 18px 0 8px; font-size: 11px; font-weight: 850; }.ask-dialog input, .ask-dialog textarea, .ask-dialog select { width: 100%; padding: 12px; border: 1px solid #bfc1bd; border-radius: 0; background: white; color: var(--ink); font-size: 12px; }.ask-dialog textarea { resize: vertical; }.form-note { color: var(--muted-light); font-size: 10px; }
.dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 28px; }.cancel-button { border: 0; background: none; color: #5c5e61; font-size: 12px; font-weight: 750; }
#toast { position: fixed; z-index: 80; left: 50%; bottom: 28px; max-width: calc(100vw - 24px); padding: 12px 17px; background: var(--lime); color: var(--ink); font-size: 12px; font-weight: 750; opacity: 0; pointer-events: none; transform: translate(-50%, 15px); transition: opacity var(--motion-fast), transform var(--motion-fast); box-shadow: 0 6px 25px #0004; }
#toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* Larger phones show the full primary action. */
@media (min-width: 381px) { .header-actions .ask-button { padding-inline: 10px; } }
@media (max-width: 380px) { .header-inner { padding-inline: 10px; }.brand { gap: 3px; font-size: 17px; }.brand-mark { width: 26px; height: 26px; }.header-actions { gap: 5px; }.lang-button { font-size: 9px; }.header-actions .ask-button span:last-child { display: none; }.header-actions .ask-button { width: 36px; }.shape-short .tile-title { font-size: 18px; }.tile-title { font-size: 22px; } }

/* Tablet: a wider question wall, still one focused route at a time. */
@media (min-width: 641px) {
  .header-inner { height: 66px; padding: 0 20px; }.brand { font-size: 21px; }.brand-mark { width: 34px; height: 34px; }.header-actions { gap: 18px; }.lang-button { font-size: 12px; }.ask-button { min-height: 40px; padding: 0 16px; font-size: 12px; }
  .masthead { display: grid; grid-template-columns: 1fr 190px; min-height: 218px; }.masthead-copy { padding: 29px 28px; }.masthead h1 { font-size: 56px; }.masthead-copy p { max-width: 470px; font-size: 13px; }
  .masthead-art { position: relative; display: grid; place-items: center; overflow: hidden; border-left: 1px solid #34353d; background: linear-gradient(145deg, #1c1d25, #181920); }
  .branch-graphic { width: min(100%, 230px); height: auto; overflow: visible; }
  .branch-stem, .branch-arm { stroke: #a898ef; stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; animation: branch-trace 720ms var(--ease-out) forwards; }
  .branch-arm { animation-delay: 300ms; }.arm-two { stroke: var(--lime); }.arm-three { stroke: var(--mint); }
  .branch-point, .branch-end { fill: #d3c8ff; opacity: 0; animation: node-appear 240ms ease-out forwards; animation-delay: 310ms; }
  .branch-end { animation-delay: 940ms; }.end-two { fill: var(--lime); }.end-three { fill: var(--mint); }
  .branch-caption { position: absolute; right: 13px; bottom: 14px; color: #9a9ba6; font-size: 7px; font-weight: 750; letter-spacing: .12em; }
  .wall-section { padding: 33px 27px 70px; }.section-heading { margin: 0 0 25px; }.section-heading h2 { font-size: 42px; }.section-heading p { max-width: none; font-size: 12px; }.result-count { font-size: 11px; }
  .toolbar { margin: 0 0 15px; }.topic-list { flex-wrap: wrap; margin-right: 0; padding-right: 0; }.search-field { max-width: 260px; }
  .question-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(176px, auto); gap: 10px; }.shape-wide { grid-column: span 4; }.shape-tall { grid-column: span 2; grid-row: span 2; }.shape-standard { grid-column: span 3; }.shape-short { grid-column: span 2; }.question-tile:last-child:nth-child(odd) { grid-column: span 2; }.question-tile { padding: 17px 18px; }.tile-topic { font-size: 9px; }.tile-title { font-size: 27px; }.shape-wide .tile-title { font-size: 39px; }.shape-tall .tile-title { font-size: 38px; }.shape-short .tile-title { font-size: 23px; }.tile-summary { font-size: 10px; }
  .principle { margin: 0 27px 50px; }.principle p { font-size: 15px; }footer { margin: 0 27px 25px; }
  .detail-pane { min-height: calc(100vh - 66px); }.detail-top { padding: 22px 28px 0; }.detail-head { padding: 32px 36px 28px; }.detail-head h2 { font-size: 58px; }.detail-head > p { font-size: 14px; }.detail-tabs, .detail-body { padding-left: 36px; padding-right: 36px; }.comment-form { margin: 25px 36px 0; }.detail-note { margin: 25px 36px 26px; }
  .ask-dialog { padding: 34px 40px 36px; }.ask-dialog h2 { font-size: 41px; }
}

/* Desktop: simultaneous question wall and sticky reading pane. */
@media (min-width: 981px) {
  .header-inner { height: 78px; max-width: 1920px; margin: auto; padding: 0 26px; }.brand { min-width: 212px; font-size: 24px; }.brand-mark { width: 38px; height: 38px; }
  .header-nav { display: flex; align-items: center; gap: 36px; height: 100%; }.header-nav a { display: grid; place-items: center; height: 100%; border-bottom: 2px solid transparent; color: #c6c7ce; font-size: 13px; font-weight: 700; text-decoration: none; }.header-nav a:first-child { border-color: var(--lime); color: white; }.header-nav a:hover { color: var(--lime); }.header-actions { gap: 21px; }.ask-button { min-height: 44px; padding: 0 17px; font-size: 13px; }
  .main-layout { display: grid; grid-template-columns: minmax(0, 56%) minmax(400px, 44%); max-width: 1920px; margin: auto; }.site-shell.detail-open .discovery-column { display: block; }
  .masthead { grid-template-columns: 1fr 180px; min-height: 236px; }.masthead-copy { padding: 27px 24px 27px 38px; }.masthead h1 { font-size: clamp(42px, 4.4vw, 62px); }
  .wall-section { padding: 33px 26px 70px 38px; }.toolbar { flex-direction: column; }.search-field { max-width: none; }.question-wall { grid-auto-rows: minmax(190px, auto); }.tile-title { font-size: 23px; }.shape-wide .tile-title { font-size: 30px; }.shape-tall .tile-title { font-size: 31px; }.shape-short .tile-title { font-size: 20px; }
  .principle { margin: 0 26px 54px 38px; }footer { margin: 0 26px 22px 38px; }
  .detail-pane, .site-shell.detail-open .detail-pane { display: block; position: sticky; top: 78px; align-self: start; height: calc(100vh - 78px); min-height: 0; overflow-y: auto; border-left: 1px solid var(--line-light); }.mobile-back { display: none; }.detail-eyebrow { display: inline-flex; }
  .detail-head { padding: 32px 27px 28px; }.detail-head h2 { font-size: clamp(38px, 3.4vw, 60px); }.detail-tabs, .detail-body { padding-left: 27px; padding-right: 27px; }.comment-form { margin-left: 27px; margin-right: 27px; }.detail-note { margin-left: 27px; margin-right: 27px; }
}
@media (min-width: 1251px) {
  .main-layout { grid-template-columns: minmax(0, 58%) minmax(450px, 42%); }.masthead { grid-template-columns: 1fr 230px; }.masthead h1 { font-size: clamp(48px, 4.4vw, 70px); }.wall-section { padding-right: 26px; }.toolbar { flex-direction: row; align-items: center; justify-content: space-between; }.search-field { width: 230px; }.tile-title { font-size: clamp(20px, 2.1vw, 32px); }.shape-wide .tile-title { font-size: clamp(27px, 2.6vw, 39px); }.shape-tall .tile-title { font-size: clamp(30px, 3vw, 47px); }.shape-short .tile-title { font-size: clamp(18px, 1.7vw, 25px); }.detail-head { padding-left: 36px; padding-right: 36px; }.detail-tabs, .detail-body { padding-left: 36px; padding-right: 36px; }.comment-form { margin-left: 36px; margin-right: 36px; }.detail-note { margin-left: 36px; margin-right: 36px; }
}

@keyframes branch-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes brand-draw { to { stroke-dashoffset: 0; } }
@keyframes brand-arrive { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes branch-trace { to { stroke-dashoffset: 0; } }
@keyframes node-appear { to { opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialog-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes view-exit { to { opacity: 0; } }
@keyframes view-enter { from { opacity: 0; } }
::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none; }
html[data-transition]::view-transition-old(root) { animation: view-exit 150ms ease-in both; }
html[data-transition]::view-transition-new(root) { animation: view-enter 240ms ease-out both; }
@media (max-width: 980px) {
  html[data-transition="detail"]::view-transition-old(root),
  html[data-transition="back"]::view-transition-old(root) { animation: none; opacity: 0; }
  html[data-transition="detail"]::view-transition-new(root),
  html[data-transition="back"]::view-transition-new(root) { animation: none; opacity: 1; }
  html[data-transition="detail"] .question-tile.motion-source .tile-title,
  html[data-transition="back"] .question-tile.is-selected .tile-title,
  html[data-transition="detail"] .detail-head h2,
  html[data-transition="back"] .detail-head h2 { view-transition-name: active-question-title; }
  ::view-transition-old(active-question-title), ::view-transition-new(active-question-title) { animation-duration: 360ms; animation-timing-function: var(--ease-out); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
  ::view-transition-old(*), ::view-transition-new(*) { animation-duration: .01ms !important; }
  .branch-stem, .branch-arm { stroke-dashoffset: 0; }.branch-point, .branch-end { opacity: 1; }
}