/* Supplemental landing beats. Every selector is scoped to feature-/memory-. */
html:not(.js) .feature-note-tabs { display: none; }
.memory-node:disabled { cursor: default; }
.memory-node:disabled:hover { transform: none; }
.feature-panel code { font: .88em var(--mono); color: var(--mint); }
.feature-panel .eyebrow { margin-bottom: 22px; }
.feature-panel:nth-of-type(even) .section-copy { justify-self: end; }
.feature-panel .section-copy { max-width: 610px; }
.feature-console,
.feature-voice-stage,
.feature-import-receipt,
.feature-card-workbench,
.memory-curve-card,
.feature-index {
  width: 100%; border: .5px solid var(--line); border-top-color: var(--line-lit); border-radius: 26px;
  background: linear-gradient(145deg, rgba(51,51,52,.46), rgba(24,24,25,.24));
  box-shadow: 0 30px 85px rgba(0,0,0,.24), inset 0 .5px rgba(250,250,250,.04);
}
.feature-console-bar {
  min-height: 52px; padding: 0 18px; display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; align-items: center;
  border-bottom: .5px solid var(--line); color: var(--ink-32); font: 9px var(--mono); letter-spacing: .07em; text-transform: uppercase;
}
.feature-console-bar b { justify-self: center; color: var(--ink-52); font-weight: 400; }
.feature-console-dots { display: flex; gap: 6px; }
.feature-console-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(250,250,250,.17); }

/* bulk */
.feature-bulk-console { max-width: 720px; justify-self: end; overflow: hidden; }
.feature-build-count { color: var(--mint); }
.feature-command {
  min-height: 88px; padding: 24px; display: flex; align-items: center; gap: 11px; color: var(--ink-75); font: 13px/1.5 var(--mono);
  border-bottom: .5px solid var(--line);
}
.feature-command > span { color: var(--mint); }
.feature-command i { width: 1px; height: 17px; background: var(--mint); }
.feature-visible .feature-command i { animation: feature-caret 1s steps(1) infinite; }
@keyframes feature-caret { 50% { opacity: 0; } }
.feature-build-rows { padding: 8px 22px; }
.feature-build-row {
  min-height: 76px; display: grid; grid-template-columns: 32px minmax(0,1fr) 92px 104px; gap: 15px; align-items: center;
  border-bottom: .5px solid rgba(250,250,250,.06); opacity: 1; transform: none;
}
.js .feature-build-row { opacity: 0; transform: translateY(9px); transition: opacity .42s ease, transform .5s var(--ease); }
.js .feature-bulk.in-view .feature-build-row { opacity: 1; transform: none; }
.js .feature-bulk.in-view .feature-build-row:nth-child(1) { transition-delay: .24s; }
.js .feature-bulk.in-view .feature-build-row:nth-child(2) { transition-delay: .43s; }
.js .feature-bulk.in-view .feature-build-row:nth-child(3) { transition-delay: .62s; }
.feature-build-row:last-child { border-bottom: 0; }
.feature-build-index { color: var(--ink-32); font: 9px var(--mono); }
.feature-build-row div { min-width: 0; }
.feature-build-row strong { display: block; overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-size: 16px; font-weight: 500; white-space: nowrap; }
.feature-build-row small { display: block; margin-top: 2px; color: var(--ink-52); font-size: 12px; }
.feature-build-kind { color: var(--ink-32); font: 9px var(--mono); text-transform: uppercase; }
.feature-build-state { padding: 5px 8px; border: .5px solid var(--line-lit); border-radius: 999px; color: var(--mint); font: 9px var(--mono); text-align: center; white-space: nowrap; }
.feature-console-foot { min-height: 48px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; border-top: .5px solid var(--line); color: var(--ink-32); font: 9px var(--mono); }
.feature-console-foot b { color: var(--ink-52); font-weight: 400; text-transform: uppercase; }

/* generated voices */
.feature-voices { grid-template-columns: minmax(0,7fr) minmax(0,5fr); }
.feature-voice-stage { max-width: 720px; overflow: hidden; }
.feature-voice-list { padding: 18px; display: grid; gap: 10px; }
.feature-voice-button {
  width: 100%; min-height: 78px; padding: 12px 18px; display: grid; grid-template-columns: 42px minmax(0,1fr) 78px; gap: 14px; align-items: center;
  border: .5px solid var(--line); border-top-color: rgba(250,250,250,.14); border-radius: 17px; background: rgba(250,250,250,.027); color: var(--ink); text-align: left;
  transition: transform .25s var(--ease), border-color .25s, background .25s;
}
.feature-voice-button:hover { transform: translateX(4px); border-color: var(--line-lit); background: rgba(214,239,220,.035); }
.feature-voice-button.is-playing { border-color: rgba(214,239,220,.38); background: rgba(214,239,220,.05); }
.feature-speaker { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(214,239,220,.055); color: var(--mint); }
.feature-speaker svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.feature-voice-button > span:nth-child(2) { min-width: 0; }
.feature-voice-button b { display: block; overflow: hidden; text-overflow: ellipsis; font-weight: 500; white-space: nowrap; }
.feature-voice-button small { display: block; margin-top: 2px; color: var(--ink-32); font: 9px var(--mono); text-transform: uppercase; }
.feature-wave { height: 28px; display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.feature-wave em { width: 2px; height: 8px; border-radius: 2px; background: rgba(214,239,220,.3); }
.feature-visible .feature-voice-button.is-playing .feature-wave em { animation: feature-wave .72s ease-in-out infinite alternate; background: var(--mint); }
.feature-visible .feature-voice-button.is-playing .feature-wave em:nth-child(2) { animation-delay: -.25s; height: 16px; }
.feature-visible .feature-voice-button.is-playing .feature-wave em:nth-child(3) { animation-delay: -.5s; height: 24px; }
.feature-visible .feature-voice-button.is-playing .feature-wave em:nth-child(4) { animation-delay: -.15s; height: 14px; }
.feature-visible .feature-voice-button.is-playing .feature-wave em:nth-child(5) { animation-delay: -.4s; height: 20px; }
@keyframes feature-wave { to { transform: scaleY(.38); opacity: .45; } }
.feature-stage-note { padding: 0 20px 18px; color: var(--ink-32); font: 9px var(--mono); }

/* import */
.feature-import-receipt { max-width: 700px; justify-self: end; padding: 26px; }
.feature-import-file { display: grid; grid-template-columns: 42px 1fr auto; gap: 14px; align-items: center; }
.feature-file-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: rgba(250,250,250,.035); color: var(--ink-52); }
.feature-file-icon svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.feature-import-file b { display: block; font-weight: 500; }
.feature-import-file small { display: block; margin-top: 3px; color: var(--ink-32); font: 9px var(--mono); }
.feature-import-ready { padding: 5px 9px; border-radius: 999px; background: rgba(214,239,220,.055); color: var(--mint); font: 9px var(--mono); }
.feature-import-progress { height: 2px; margin: 24px 0 10px; overflow: hidden; border-radius: 99px; background: rgba(250,250,250,.06); }
.feature-import-progress i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--moss), var(--mint)); transform-origin: left; }
.js .feature-import-progress i { transform: scaleX(0); transition: transform 1.1s var(--ease) .18s; }
.js .feature-import.in-view .feature-import-progress i { transform: scaleX(1); }
.feature-import-rows { margin: 0; }
.feature-import-rows > div { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: .5px solid rgba(250,250,250,.06); }
.feature-import-rows dt { color: var(--ink-75); }
.feature-import-rows dd { margin: 0; color: var(--mint); font: 10px var(--mono); }
.feature-import-rows dd span { margin-right: 6px; }
.feature-import-rows .feature-import-report { color: var(--amber); }
.feature-import-foot { margin-top: 18px; color: var(--ink-32); font: 9px/1.55 var(--mono); }

/* notes, image, edit and flag */
.feature-notes { grid-template-columns: minmax(0,7fr) minmax(0,5fr); }
.feature-card-workbench { max-width: 710px; overflow: hidden; }
.feature-workbench-head { min-height: 78px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; border-bottom: .5px solid var(--line); }
.feature-workbench-head b { display: block; font-size: 22px; font-weight: 500; }
.feature-workbench-head small { display: block; color: var(--ink-52); }
.feature-workbench-head > span:last-child { color: var(--ink-32); font: 9px var(--mono); text-transform: uppercase; }
.feature-note-tabs { padding: 10px; display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; background: rgba(10,10,11,.14); }
.feature-note-tabs button { min-height: 39px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-32); font-size: 12px; }
.feature-note-tabs button[aria-selected="true"] { background: rgba(250,250,250,.055); color: var(--ink); box-shadow: inset 0 .5px rgba(250,250,250,.1); }
.feature-workbench-body { min-height: 292px; padding: 28px; }
.feature-tool-panel { animation: feature-panel-in .35s var(--ease); }
@keyframes feature-panel-in { from { opacity: 0; transform: translateY(8px); } }
.feature-tool-label { display: block; margin-bottom: 18px; color: var(--ink-32); font: 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.feature-fake-input { min-height: 96px; padding: 18px; border: .5px solid var(--line); border-top-color: rgba(250,250,250,.15); border-radius: 15px; background: rgba(10,10,11,.18); color: var(--ink-75); }
.feature-saved-state { display: block; margin-top: 15px; color: var(--mint); font: 9px var(--mono); }
.feature-image-choice { min-height: 174px; padding: 18px; display: grid; grid-template-columns: 170px 1fr; gap: 22px; align-items: center; border: .5px solid var(--line); border-radius: 17px; background: rgba(10,10,11,.16); }
.feature-image-choice svg { width: 100%; max-height: 130px; color: var(--ink-52); }
.feature-image-choice b { display: block; font-weight: 500; }
.feature-image-choice small { display: block; margin-top: 7px; color: var(--ink-32); }
.feature-edit-line { min-height: 104px; padding: 18px; display: grid; grid-template-columns: 90px 1fr 1fr; gap: 15px; align-items: center; border: .5px solid var(--line); border-radius: 15px; background: rgba(10,10,11,.16); }
.feature-edit-line span { color: var(--ink-32); font: 9px var(--mono); text-transform: uppercase; }
.feature-edit-line s { color: var(--ink-32); }
.feature-edit-line b { color: var(--mint); font-weight: 500; }
.feature-tool-panel > p:last-child:not(.feature-fake-input) { margin-top: 15px; color: var(--ink-52); font-size: 12px; }
.feature-flag-options { margin-top: 15px; display: flex; gap: 7px; }
.feature-flag-options span { padding: 6px 10px; border: .5px solid var(--line); border-radius: 999px; color: var(--ink-32); font: 9px var(--mono); }
.feature-flag-options .is-selected { border-color: var(--line-lit); color: var(--mint); background: rgba(214,239,220,.04); }
.feature-workbench-note { padding: 0 22px 18px; color: var(--ink-32); font: 9px var(--mono); }

/* memory connections */
.memory-map { position: relative; width: min(100%, 720px); aspect-ratio: 1.2; justify-self: end; }
.memory-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.memory-lines path { fill: none; stroke: rgba(214,239,220,.18); stroke-width: 1; stroke-dasharray: 3 5; }
.memory-lines circle { fill: rgba(214,239,220,.018); stroke: rgba(214,239,220,.1); stroke-width: 1; }
.memory-center { position: absolute; left: 50%; top: 50%; width: 190px; height: 190px; transform: translate(-50%,-50%); display: grid; place-content: center; text-align: center; border: .5px solid var(--line-lit); border-radius: 50%; background: rgba(35,35,36,.74); box-shadow: 0 0 70px rgba(214,239,220,.05); }
.memory-center span, .memory-node span { color: var(--ink-32); font: 9px var(--mono); text-transform: uppercase; }
.memory-center b { margin-top: 8px; font-size: 25px; font-weight: 500; }
.memory-center small { color: var(--ink-52); }
.memory-node { position: absolute; width: 164px; min-height: 106px; padding: 15px; display: grid; place-content: center; justify-items: center; border: .5px solid var(--line); border-top-color: rgba(250,250,250,.15); border-radius: 18px; background: rgba(43,43,44,.6); color: var(--ink); text-align: center; transition: transform .25s var(--ease), border-color .25s, background .25s; }
.memory-node:hover, .memory-node.is-selected { transform: translateY(-3px); border-color: rgba(214,239,220,.4); background: rgba(214,239,220,.055); }
.memory-node b { margin-top: 7px; font-size: 14px; font-weight: 500; }
.memory-node svg { width: 46px; max-height: 46px; margin-top: 8px; fill: none; stroke: var(--ink-52); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.memory-meaning { left: 1%; top: 5%; }.memory-sound { right: 1%; top: 5%; }.memory-picture { left: 1%; bottom: 4%; }.memory-context { right: 1%; bottom: 4%; width: 190px; }
.memory-context b { font-size: 12px; line-height: 1.4; }

/* spacing */
.memory-spacing { grid-template-columns: minmax(0,7fr) minmax(0,5fr); }
.memory-curve-card { max-width: 760px; padding: 22px; }
.memory-curve-head { display: flex; justify-content: space-between; gap: 20px; color: var(--ink-52); font-size: 13px; }
.memory-curve-head b { color: var(--ink-32); font: 9px var(--mono); font-weight: 400; text-transform: uppercase; }
.memory-curve-card svg { display: block; width: 100%; margin-top: 10px; }
.memory-axis { stroke: rgba(250,250,250,.1); stroke-width: 1; }
.memory-threshold { stroke: rgba(250,250,250,.16); stroke-width: 1; stroke-dasharray: 4 6; }
.memory-chart-label, .memory-intervals { fill: rgba(250,250,250,.36); font: 11px var(--mono); }
.memory-no-review { fill: none; stroke: rgba(250,250,250,.15); stroke-width: 1.4; stroke-dasharray: 4 6; }
.memory-review-path { fill: none; stroke: rgba(214,239,220,.68); stroke-width: 2; }
.memory-review-points circle { fill: var(--mint); filter: drop-shadow(0 0 6px rgba(214,239,220,.45)); }
.memory-intervals { text-anchor: middle; }
.memory-curve-card > p { padding: 13px 8px 2px; color: var(--ink-32); font: 9px/1.55 var(--mono); }
.feature-source-link { margin-top: 26px; padding: 14px 0; display: flex; justify-content: space-between; gap: 20px; border-top: .5px solid var(--line); border-bottom: .5px solid var(--line); color: var(--ink-52); font-size: 12px; }
.feature-source-link b { color: var(--mint); font-weight: 400; }

/* compact feature index */
.memory-inside { grid-template-columns: minmax(0,4fr) minmax(0,8fr); }
.feature-index { padding: 10px 24px; }
.feature-index article { min-height: 76px; display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 20px; align-items: center; border-bottom: .5px solid rgba(250,250,250,.06); }
.feature-index article:last-child { border-bottom: 0; }
.feature-index article > span { color: var(--mint); font: 9px var(--mono); }
.feature-index b { font-size: 14px; font-weight: 500; }
.feature-index p { color: var(--ink-52); font-size: 12px; }

/* immersion */
.memory-immersion { grid-template-columns: minmax(0,7fr) minmax(0,5fr); }
.memory-immersion-art { width: min(100%, 740px); display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.memory-channel { min-height: 118px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; border: .5px solid var(--line); border-top-color: rgba(250,250,250,.15); border-radius: 18px; background: rgba(46,46,47,.32); }
.memory-channel span, .memory-habitat span { color: var(--ink-32); font: 9px var(--mono); text-transform: uppercase; }
.memory-channel b { max-width: 14ch; font-size: 15px; font-weight: 500; }
.memory-flow { grid-column: 1 / -1; min-height: 54px; display: flex; align-items: center; gap: 13px; color: var(--ink-32); font: 9px var(--mono); text-transform: uppercase; }
.memory-flow i { flex: 1; height: .5px; background: linear-gradient(90deg, transparent, var(--line-lit)); }
.memory-flow i:last-child { background: linear-gradient(90deg, var(--line-lit), transparent); }
.memory-habitat { grid-column: 1 / -1; min-height: 205px; padding: 30px; display: grid; grid-template-columns: 88px 1fr; grid-template-rows: auto 1fr; gap: 5px 22px; align-items: center; border: .5px solid var(--line-lit); border-radius: 24px; background: radial-gradient(circle at 18% 50%, rgba(214,239,220,.09), transparent 38%), rgba(31,31,32,.5); }
.memory-habitat img { grid-row: 1 / 3; width: 70px; height: auto; }
.memory-habitat b { align-self: start; max-width: 25ch; font-size: 24px; font-weight: 500; line-height: 1.15; }
.memory-return { grid-column: 1 / -1; color: var(--ink-52); font: 10px var(--mono); text-align: center; }
.memory-return span { margin-right: 8px; color: var(--mint); }

@media (max-height: 820px) and (min-width: 1001px) {
  .feature-build-row { min-height: 63px; }
  .feature-voice-button { min-height: 62px; }
  .feature-workbench-body { min-height: 232px; padding: 20px 26px; }
  .feature-fake-input { min-height: 74px; }
  .feature-index article { min-height: 62px; }
  .memory-habitat { min-height: 165px; }
}

@media (max-width: 1000px) {
  .feature-panel, .feature-voices, .feature-notes, .memory-spacing, .memory-inside, .memory-immersion { grid-template-columns: minmax(0,1fr); }
  .feature-voices .section-copy, .feature-notes .section-copy, .memory-spacing .section-copy, .memory-immersion .section-copy { order: -1; }
  .feature-panel:nth-of-type(even) .section-copy { justify-self: start; }
  .feature-bulk-console, .feature-import-receipt, .memory-map { justify-self: center; }
  .feature-voice-stage, .feature-card-workbench, .memory-curve-card, .memory-immersion-art { margin: 0 auto; }
  .memory-map { width: min(100%, 680px); }
  .feature-index { max-width: 780px; margin: 0 auto; }
}

@media (max-width: 620px) {
  .feature-console-bar { grid-template-columns: 52px 1fr auto; padding: 0 13px; }
  .feature-command { min-height: 96px; padding: 18px; font-size: 11px; }
  .feature-build-rows { padding: 5px 14px; }
  .feature-build-row { min-height: 77px; grid-template-columns: 22px minmax(0,1fr) auto; gap: 9px; }
  .feature-build-kind { display: none; }
  .feature-build-state { padding: 5px 7px; font-size: 8px; }
  .feature-console-foot { padding: 0 14px; }
  .feature-voice-list { padding: 12px; }
  .feature-voice-button { min-height: 70px; grid-template-columns: 38px minmax(0,1fr) 35px; gap: 10px; padding: 10px 12px; }
  .feature-wave { gap: 3px; }
  .feature-import-receipt { padding: 18px; }
  .feature-import-file { grid-template-columns: 36px 1fr auto; gap: 10px; }
  .feature-import-file b { font-size: 13px; }
  .feature-import-rows > div { min-height: 62px; font-size: 13px; }
  .feature-note-tabs { gap: 3px; }
  .feature-note-tabs button { font-size: 11px; }
  .feature-workbench-body { min-height: 300px; padding: 20px; }
  .feature-image-choice { grid-template-columns: 1fr; gap: 10px; text-align: center; }
  .feature-image-choice svg { height: 95px; }
  .feature-edit-line { grid-template-columns: 1fr 1fr; }
  .feature-edit-line span { grid-column: 1 / -1; }
  .memory-map { min-height: 520px; aspect-ratio: auto; }
  .memory-lines { display: none; }
  .memory-center { width: 156px; height: 156px; }
  .memory-node, .memory-context { width: min(154px, calc(50% - 6px)); min-height: 90px; padding: 11px; }
  .memory-meaning { left: 0; top: 0; }.memory-sound { right: 0; top: 0; }.memory-picture { left: 0; bottom: 0; }.memory-context { right: 0; bottom: 0; }
  .memory-curve-card { padding: 13px; overflow-x: auto; }
  .memory-curve-card svg { min-width: 610px; }
  .memory-curve-head { position: sticky; left: 0; font-size: 11px; }
  .feature-source-link { flex-direction: column; gap: 5px; }
  .feature-index { padding: 8px 16px; }
  .feature-index article { grid-template-columns: 28px 1fr; gap: 10px; padding: 14px 0; }
  .feature-index article div { display: contents; }
  .feature-index b { grid-column: 2; }
  .feature-index p { grid-column: 2; }
  .memory-immersion-art { grid-template-columns: 1fr; }
  .memory-channel, .memory-flow, .memory-habitat, .memory-return { grid-column: 1; }
  .memory-channel { min-height: 92px; }
  .memory-channel b { max-width: none; }
  .memory-habitat { grid-template-columns: 64px 1fr; min-height: 180px; padding: 22px; }
  .memory-habitat img { width: 54px; }
  .memory-habitat b { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .feature-command i, .feature-voice-button.is-playing .feature-wave em { animation: none; }
  .js .feature-build-row { opacity: 1; transform: none; transition: none; }
  .js .feature-import-progress i { transform: scaleX(1); transition: none; }
  .feature-tool-panel { animation: none; }
}