.story, .grow, .home, .invite { max-width: 1200px; margin: 0 auto; padding-inline: var(--gutter); }
.story { padding-top: clamp(56px, 8vw, 104px); }
.grow, .home { margin-top: clamp(88px, 10vw, 136px); }

.story h2, .grow h2, .home h2, .invite h2 {
  margin: 0;
  font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.sec-head p { margin: 12px 0 0; color: var(--sage); font-size: 1.125rem; }


.frame {
  margin-top: 16px;
  padding: 8px;
  border-radius: 12px;
  background: var(--field-lift); 
}



.screen {
  --paper: #ffffff; --card: #ffffff; --ink: #37352f; --ink-soft: #6b6a65; --stem: #aeada8; --sap: #2e7556; --sap-ink: #1f5b41; --sap-wash: #dcebe2;
  --column: #f7f7f5; --track: #e3e2df; --dot: #d7d6d2; --e1: 0 0 0 1px rgba(15, 15, 15, 0.06), 0 1px 2px rgba(15, 15, 15, 0.08);
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
  border-radius: 13px;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.3;
}
@media (prefers-color-scheme: dark) {
  .screen {
    --paper: #191919; --card: #232323; --ink: #d6d6d4; --ink-soft: #9b9b98; --stem: #5a5a58; --sap: #6dbe95; --sap-ink: #bfe6cf; --sap-wash: #1f3329;
    --column: #1f1f1f; --track: #3a3a38; --dot: #333331; --e1: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.4);
  }
}
.screen p { margin: 0; }
.m-list { display: grid; gap: 4px; }
.m-head { padding: 4px 4px 4px; font-weight: 600; font-size: 0.9375rem; }
.m-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 5px 10px; border-radius: 6px; background: var(--card); box-shadow: var(--e1); }
.m-t { flex: 1; min-width: 0; }
.m-row small { display: block; color: var(--ink-soft); font-size: 0.8125rem; }
.m-row.is-new { box-shadow: 0 0 0 2px var(--sap); }

.m-ring { flex: none; width: 16px; height: 16px; border: 1.5px solid var(--ink-soft); border-radius: 50%; }
.m-ring.plain { border-style: dotted; border-width: 2px; }
.done > .m-ring { border-color: var(--sap); background: var(--sap) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.m-chip { flex: none; padding: 2px 7px; border-radius: 6px; background: var(--sap-wash); color: var(--sap-ink); font-size: 0.8125rem; }


.m-paper { padding: 14px 14px 6px; border-radius: 8px; background: var(--card); box-shadow: var(--e1); }
.m-title { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 600; }
.m-meta { display: flex; align-items: center; gap: 6px; margin: 6px 0 0 26px !important; color: var(--ink-soft); font-size: 0.8125rem; }
.m-meta .m-chip { margin-inline-end: 4px; }
.m-pring {
  width: 13px; height: 13px; border-radius: 50%;
  --fill: var(--p);
  background: conic-gradient(var(--sap) var(--fill), var(--track) 0);
  -webkit-mask: radial-gradient(circle, transparent 3.5px, #000 4px);
  mask: radial-gradient(circle, transparent 3.5px, #000 4px);
}
.m-progress { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: 10px;  color: var(--ink-soft); font-size: 0.8125rem; }
.m-progress i { width: 36px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--sap) var(--p), var(--track) var(--p)); }
.m-tree { position: relative; margin: 6px 0 0; padding: 0; padding-inline-start: 22px; list-style: none; }

.m-tree::before { content: ""; position: absolute; inset-inline-start: 7px; top: 0; bottom: 22px; border-inline-start: 2px solid var(--stem); }
.m-tree li { position: relative; display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; min-height: 44px; }
.m-line { display: flex; flex-basis: 100%; align-items: center; gap: 10px; min-height: 44px; }
.m-tree li::before { content: ""; position: absolute; inset-inline-start: -15px; top: 22px; width: 11px; border-top: 2px solid var(--stem); }
.m-tree .done { color: var(--ink-soft); text-decoration: line-through; }
.m-tree .m-tree { flex-basis: 100%; margin: 0 0 2px; }


@property --fill { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@media (prefers-reduced-motion: no-preference) {
  .grow-on .m-tree::before { transform-origin: top; animation: grow 1100ms var(--ease) both; animation-delay: calc(var(--i, 0) * 170ms); }
  .grow-on .m-tree li { animation: step-in 520ms var(--ease-out) both; animation-delay: calc(200ms + var(--i) * 170ms); }
  .grow-on .m-tree li::before { transform-origin: left; animation: reach 320ms var(--ease-out) both; animation-delay: calc(120ms + var(--i) * 170ms); }
  .grow-on .m-tree .done > .m-ring { animation: tick 460ms var(--ease-out) 1450ms both; }
  .grow-on .m-tree .done { animation: step-in 520ms var(--ease-out) calc(200ms + var(--i) * 170ms) both, strike 300ms var(--ease) 1550ms both; }
  .grow-on .m-pring { animation: ring-fill 700ms var(--ease-out) 1550ms both; }
  .grow-on:not(.is-growing) *, .grow-on:not(.is-growing) *::before { animation-play-state: paused; }
}
@keyframes reach { from { transform: scaleX(0); } }
@keyframes strike { from { text-decoration-color: transparent; } }
@keyframes ring-fill { from { --fill: 0%; } }


.m-canvas {
  position: relative;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  align-content: center;
  column-gap: clamp(18px, 3vw, 36px);
  min-height: 300px;
  background: radial-gradient(circle, var(--dot) 1px, transparent 1.4px) 0 0 / 14px 14px, var(--paper);
}
.m-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.m-lines path { fill: none; stroke: var(--stem); stroke-width: 1.5; }
.m-col { position: relative; display: grid; gap: 10px; }
.m-card { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 6px; background: var(--card); font-size: 0.875rem; box-shadow: var(--e1); }
.m-card.done { color: var(--ink-soft); text-decoration: line-through; }

.m-root { align-items: flex-start; font-weight: 600; }
.m-root .m-meta { margin: 4px 0 0 !important; font-weight: 400; }
.m-sum { grid-column: 1 / -1; margin-bottom: 4px; }


.m-board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: start; }
.m-column { display: grid; gap: 6px; padding: 8px; border-radius: 8px; background: var(--column); }
.m-chead { padding: 2px 2px 4px; font-size: 0.875rem; font-weight: 600; }
.m-chead span { margin-inline-start: 4px; color: var(--ink-soft); font-weight: 400; }
.m-bcard { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px; border-radius: 6px; background: var(--card); font-size: 0.875rem; box-shadow: var(--e1); }
.m-bcard.done { color: var(--ink-soft); text-decoration: line-through; }
.m-bcard .m-progress { flex-basis: 100%; margin-inline-start: 24px; }

.m-pager { display: none; }


.m-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; align-content: start; }
.m-tile { display: grid; gap: 8px; padding: 11px; border-radius: 8px; background: var(--card); font-size: 0.875rem; box-shadow: var(--e1); }
.m-thead { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.m-thead.done { color: var(--ink-soft); font-weight: 400; text-decoration: line-through; }
.m-titems { display: grid; gap: 6px; margin: 0; padding: 0 0 0 2px; list-style: none; }
.m-titems li { display: flex; align-items: center; gap: 8px; }
.m-titems .m-ring { width: 13px; height: 13px; }
.m-tnote { margin: 0; padding-inline-start: 24px; color: var(--ink-soft); line-height: 1.5; } 
.m-tfoot { display: flex; align-items: center; gap: 8px; padding-top: 2px; color: var(--ink-soft); font-size: 0.8125rem; }


.grow {
  display: grid;
  grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
  column-gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.grow-words p { margin: 16px 0 0; max-width: 42ch; color: var(--sage); }
.views-title { margin: 32px 0 0; font-size: 1.125rem; font-weight: 600; }

.views-title { margin-top: 0; }

.tabs { display: inline-flex; gap: 4px; margin-top: 12px; padding: 0; }
.tabs[hidden] { display: none; }
.tabs button {
  min-height: 44px;
  min-width: 44px; 
  padding: 0 18px;
  border: 0;
  border-radius: 6px 6px 0 0;
  background: transparent;
  color: var(--sage);
  font: 600 0.9375rem/1 var(--font);
  cursor: pointer;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.tabs button:hover { color: var(--ivory); background: var(--field-lift); }

.tabs [aria-selected="true"] { color: var(--ivory); box-shadow: inset 0 -2px var(--mint); }
.tabs:has(.tab-pill) { position: relative; }
.tabs:has(.tab-pill) button { position: relative; }
.tabs:has(.tab-pill) [aria-selected="true"] { box-shadow: none; }
.tab-pill { position: absolute; bottom: -1px; left: 0; z-index: 1; height: 2px; border-radius: 1px; background: var(--mint); pointer-events: none; }
.tab-pill.is-sliding { transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1), width 380ms cubic-bezier(0.16, 1, 0.3, 1); }
.panes { display: grid; gap: 20px; margin-top: 12px; }
.pane-name { margin: 4px 6px 8px; font-weight: 600; }
.pane-copy { margin: 14px 6px 6px; max-width: 54ch; color: var(--sage); }

.is-tabbed .pane { grid-area: 1 / 1; display: flex; flex-direction: column; transition: opacity 220ms var(--ease), visibility 0s; }
.is-tabbed .pane.is-off { opacity: 0; visibility: hidden; transition: opacity 160ms var(--ease), visibility 0s 160ms; }
.is-tabbed .pane-name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.is-tabbed .pane .screen { flex: 1; }

@media (scripting: enabled) {
  .tabs[hidden] { display: inline-flex; visibility: hidden; }
  .views .pane { grid-area: 1 / 1; display: flex; flex-direction: column; }
  .views:not(.is-tabbed) .pane:not(:first-child) { opacity: 0; visibility: hidden; }
  .views .pane-name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .views .pane .screen { flex: 1; }
}
.views-note { margin: 10px 0 0; color: var(--sage); font-size: 0.9375rem; }


.views-bar { display: flex; align-items: end; justify-content: space-between; gap: 8px; }
.views-reset {
  flex: none; min-height: 44px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent;
  color: var(--sage); font: 600 0.9375rem/1 var(--font); cursor: pointer;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.views-reset:hover { background: var(--field-lift); color: var(--ivory); }
@media (prefers-reduced-motion: no-preference) { .views-reset:not([hidden]) { animation: reset-in 220ms var(--ease-out) both; } }
@keyframes reset-in { from { opacity: 0; } }
.views .panes { padding: 6px; }
.views .screen { --card: #ffffff; --card-hover: #fbfbfa; --column: #efefed; --e1: none; padding: 18px; background: transparent; }
@media (prefers-color-scheme: dark) {
  .views .screen { --card: #2a2a2a; --card-hover: #303030; --column: #252525; }
}
.views .m-paper { padding: 0; background: none; box-shadow: none; }
.views .m-title { font-size: 1.0625rem; }
.views .m-canvas { background: radial-gradient(circle, var(--dot) 1px, transparent 1.4px) 0 0 / 14px 14px; }
.views .m-card, .views .m-bcard, .views .m-tile { box-shadow: none; }
.views .m-board { align-items: stretch; align-content: stretch; grid-template-rows: auto 1fr; } 
.views .m-column { align-content: start; min-height: 132px; transition: background-color 160ms var(--ease); }
.pane-hint { margin: 2px 18px 0; color: var(--ink-text); font-size: 0.9375rem; }
.views .pane-copy { margin: 6px 18px 14px; }


.m-tick {
  display: inline-flex; align-items: center; gap: inherit; min-height: 44px; margin: -4px; padding: 4px; border: 0;
  border-radius: 6px; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer;
}

.done > .m-tick, .done > .m-line > .m-tick { text-decoration: line-through; }
.views .m-titems .done { color: var(--ink-soft); }
.m-line > .m-tick, .m-tree li > .m-tick { gap: 10px; }
.m-thead > .m-tick, .m-titems .m-tick { gap: 8px; } 
.m-titems { gap: 0; }
.m-titems .m-tick { margin-block: 0; } 
.m-tick .m-ring { transition: border-color 160ms var(--ease), background-color 160ms var(--ease); }
.m-tick:hover .m-ring { border-color: var(--sap); }
.m-tick:focus-visible, .m-card:focus-visible, .m-bcard:focus-visible, .m-fold:focus-visible, .m-pager button:focus-visible { outline: 2px solid var(--sap); outline-offset: 1px; }
.done > .m-tick > .m-ring, .done > .m-line > .m-tick > .m-ring {
  border-color: var(--sap); background: var(--sap) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

.views :is(.doing > .m-ring, .doing > .m-tick > .m-ring, .doing > .m-line > .m-tick > .m-ring) {
  padding: 2px; border-color: var(--sap); background: conic-gradient(var(--sap) 0 50%, transparent 0) content-box;
}
.views .m-pring { transition: --fill 420ms var(--ease-out); }
.views .m-progress i { background: linear-gradient(var(--sap), var(--sap)) no-repeat 0 0 / var(--p) 100%, var(--track); transition: background-size 320ms var(--ease-out); }
[dir="rtl"] .views .m-progress i { background-position: 100% 0, 0 0; }


.m-fold {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin-block: -2px; padding: 0; border: 0;
  border-radius: 6px; background: none; color: var(--ink-soft); cursor: pointer; transition: background-color 160ms var(--ease);
}

.m-fold:hover { background: var(--column); color: var(--ink); }
.m-fold svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms var(--ease-out); }
.m-fold[aria-expanded="false"] svg { transform: rotate(-90deg); }
[dir="rtl"] .m-fold[aria-expanded="false"] svg { transform: rotate(90deg); }
.m-tree li.is-folded > .m-tree { display: none; }


.views .m-card { position: relative; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transition: background-color 160ms var(--ease); }
.views .m-card:hover { background: var(--card-hover); }
.views .m-card.is-dragging { z-index: 2; cursor: grabbing; box-shadow: 0 8px 24px rgba(15, 15, 15, 0.14); }


.views .m-bcard { cursor: pointer; user-select: none; -webkit-user-select: none; transition: background-color 160ms var(--ease); }
.views .m-bcard:hover { background: var(--card-hover); }
.views .m-bcard.is-dragging { position: relative; z-index: 3; cursor: grabbing; box-shadow: 0 8px 24px rgba(15, 15, 15, 0.16); }
.views .m-column.is-target { background: var(--sap-wash); }
.m-pager button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 6px; 
  background: none; color: var(--ink-soft); font: inherit; cursor: pointer;
}
.m-pager button span { color: var(--ink-soft); font-weight: 400; }
.m-pager button[aria-pressed="true"] { background: var(--column); color: var(--ink); font-weight: 600; }


.views .m-tile.done { color: var(--ink-soft); }


.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin: 24px 0 0; padding: 0; list-style: none; }
.facts li { color: var(--sage); max-width: 52ch; }
.facts strong { display: block; margin-bottom: 6px; color: var(--ivory); font-weight: 600; }


.invite { padding-top: clamp(72px, 8vw, 112px); padding-bottom: clamp(80px, 9vw, 128px); text-align: center; }
.invite h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); }
.invite p { margin: 14px auto 0; max-width: 34ch; color: var(--sage); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); }
.invite .again { margin-top: 32px; }

.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 12px var(--gutter) calc(16px + env(safe-area-inset-bottom));
  color: var(--sage);
  font-size: 0.875rem;
}
.foot span { color: var(--ivory); font-weight: 600; }
.foot a { display: inline-flex; align-items: center; min-height: 48px; min-width: 48px; justify-content: center; text-underline-offset: 3px; }
.foot a:hover { color: var(--ivory); }



.real { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 48px 0 0; }

@media (min-width: 900px) {
  .story-inner > .sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 56px); align-items: end; }
  .story-inner > .sec-head > p { margin: 0; }
  
  .story .story-inner { max-width: min(1296px, max(760px, (100svh - 250px) * 1040 / 640)); }
  .story .chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.chapters { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chapters button {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 4px; width: 100%; padding: 14px 16px;
  border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ivory); font: inherit; text-align: start; cursor: pointer;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease);
}
.chapters button:hover { background: var(--field-hover); }
.chapters button:focus-visible { outline-color: var(--mint); }
.chapters .n { grid-row: span 2; display: grid; place-items: center; width: 26px; height: 26px; border: 1.5px solid var(--hair); border-radius: 50%; color: var(--sage); font-size: 13px; font-weight: 600; transition: background-color 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease); }
.ch-name { font-size: 15px; font-weight: 600; line-height: 26px; }
.ch-copy { grid-column: 2 / -1; color: var(--ink-text);  font-size: 14px; line-height: 1.65; text-wrap: pretty; }
.chapters [aria-current] { background: var(--field-deep); } 
.chapters [aria-current] .n { border-color: var(--mint); background: var(--mint); color: var(--on-mint); }

.chapters button { position: relative; }
.chapters [aria-current]::after {
  content: ""; position: absolute; inset: auto 16px 0; height: 2px; border-radius: 2px;
  background: linear-gradient(var(--mint), var(--mint)) left / calc(var(--p, 0) * 100%) 100% no-repeat, var(--hair);
  transition: background-size 260ms linear;
}
:root:lang(he) .chapters [aria-current]::after { background-position: right; }
.real-figure { margin: 0; }

.real-frame { margin: 0; display: grid; }
.real-frame > * { grid-area: 1 / 1; }
.real-clip, .real-poster img { display: block; width: 100%; height: auto; aspect-ratio: 1040 / 640; border-radius: 8px; background: var(--field-deep); }
.real-poster img { object-fit: cover; }
.real-frame:not(.has-played) .real-clip { background: transparent; }
.real-frame.has-played .real-poster { visibility: hidden; }

.real-clip::-webkit-media-controls, .real-clip::-webkit-media-controls-enclosure, .real-clip::-webkit-media-controls-overlay-enclosure { background: transparent; }

.ch-now { display: none; }
.real-note { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; color: var(--sage); font-size: 13px; }

.real-play {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: var(--field-deep); color: var(--ivory); cursor: pointer;
  transition: background-color 160ms var(--ease), transform 160ms var(--ease);
}
.real-play svg { width: 16px; height: 16px; fill: currentColor; }
.real-play .i-pause, .real-play.is-playing .i-play { display: none; }
.real-play.is-playing .i-pause { display: block; }
.real-play:hover { background: var(--field-hover); }
.real-play:active { transform: scale(0.94); transition-duration: 80ms; }
.real-play:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.real-play[hidden] { display: none; }



.own { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 8%; align-items: start; max-width: 1440px; margin: 0 auto; padding: 96px var(--gutter) 72px; }
.own h2 { margin: 0; font: 600 clamp(34px, 3.6vw, 48px)/1.12 var(--display); letter-spacing: -.025em; text-wrap: balance; }
.own-words > p { max-width: 42ch; margin: 20px 0 0; color: var(--ink-text); font-size: 17px; line-height: 1.65; }

.own-words > .own-examples { display: none; max-width: 30rem; margin: 24px 0 0; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--sage); font-size: 15px; line-height: 1.4; }
@media (scripting: enabled) { .own-words > .own-examples { display: flex; } }
.own-examples > span:first-child { flex-basis: 100%; margin-block-end: 2px; } 
.own-examples button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 6px; background: var(--field-lift); color: var(--ivory); font: 600 15px/1 var(--font); cursor: pointer; transition: background-color 160ms var(--ease), transform 220ms var(--ease-out); }
.own-examples button:hover { background: var(--field-hover); }
.own-examples button:active { transform: scale(0.97); transition-duration: 80ms; }
.own-examples button:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.own-examples > .own-examples-back { display: none; margin: 0; }
.own-examples.is-away > :not(.own-examples-back) { display: none; }
.own-examples.is-away > .own-examples-back { display: block; animation: back-in 200ms var(--ease) both; }
@keyframes back-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .own-examples button { transition: none; } .own-examples.is-away > .own-examples-back { animation: none; } }
.own-form { display: grid; gap: 8px; max-width: 30rem; margin-top: 28px; }
.own-form label { margin-top: 10px; color: var(--ivory); font-size: 14px; font-weight: 600; }
.own-form label:first-child { margin-top: 0; }
.own-form input, .own-form textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 0; border-radius: 6px;
  background: var(--field-deep); color: var(--ivory); font: 16px/1.5 var(--font);
  transition: background-color 160ms var(--ease);
}
.own-form textarea { resize: none; field-sizing: content; min-height: 9.5em; tab-size: 2; } 
.own-form ::placeholder { color: var(--sage); opacity: 1; } 

.own-form input:hover, .own-form textarea:hover { background: var(--field-hover); }
.own-form input:focus-visible, .own-form textarea:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.own-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 12px 0 0; }
.own-act button {
  min-height: 44px; padding: 0 22px; border: 0; border-radius: 6px;
  background: var(--mint-tonal); color: var(--on-tonal); font: 600 15px/1 var(--font); cursor: pointer;
  transition: background-color 160ms var(--ease), transform 160ms var(--ease);
}
.own-act button:hover { background: var(--mint-tonal-hover); }
.own-act button:active { transform: scale(0.97); transition-duration: 80ms; }

.own-act button.is-ready { background: var(--mint); color: var(--on-mint); }
.own-act button.is-ready:hover { background: var(--mint-hover); }

.own-act { --sap: var(--mint); --ink: var(--ink-text); --wood: #7d6450; --leaf-new: #58b27a; }
@media (prefers-color-scheme: dark) { .own-act { --wood: #a88b70; --leaf-new: #8fd3a0; } }
.own-note { flex: 1 1 14rem; color: var(--sage); font-size: 13px; line-height: 1.6; }

.own-peek { display: none; }

.own-frame { position: sticky; top: 96px; margin-top: 0; padding: 0; background: none; }
.own-screen { --e1: none; --card: var(--field-lift); min-height: 300px; } 
.own-title { min-width: 0; overflow-wrap: anywhere; }
.own-tree li > span:last-child, .own-tree .m-line > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.own-next .m-t { overflow-wrap: anywhere; }
.own-none { padding: 10px; border-radius: 6px; background: var(--card); color: var(--ink-soft); }
.own-hint { margin: 10px 14px 2px; color: var(--sage); font-size: 15px; } 

.own-tick:hover .m-ring { background: var(--sap-wash); }
@media (prefers-reduced-motion: no-preference) {
  .own-tree .done .own-tick > .m-ring.is-new { animation: tick 460ms var(--ease-out) both; }
  .own-next .m-row.is-new { animation: step-in 420ms var(--ease-out) both; }
}


@media (max-width: 899px) {
  .grow { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .grow-words { max-width: 34rem; } 
  
  
  .real { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 32px; }
  @media (scripting: enabled) {
    .chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    
    .chapters button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 44px; padding: 8px 4px; background: var(--field-deep); }
    .chapters .n { width: 22px; height: 22px; flex: none; }
    .chapters .ch-name { font-size: 15px; line-height: 20px; text-align: center; text-wrap: balance; }
    
    @media (max-width: 379px) { .chapters .ch-name { font-size: 13px; white-space: nowrap; } }
    .ch-copy { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    
    .ch-now { display: block; min-height: 4.5em; margin: 6px 2px 8px; color: var(--sage); font-size: 13px; line-height: 1.5; }
    
    .real-figure { width: min(100%, calc((100svh - 230px) * 390 / 720 + 16px)); margin-inline: auto; }
    .story .frame.real-frame { padding: 8px; border-radius: 34px; background: var(--bezel); }
    .real-clip, .real-poster img { aspect-ratio: 390 / 720; border-radius: 26px; }
  }
  .own { grid-template-columns: minmax(0, 1fr); row-gap: 40px; padding-block: 72px 64px; }
  .own-words { max-width: 34rem; }
  .own-frame { position: static; }
  .own-next { display: none; } 
  .own-peek {
    display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px;
    margin: 0; padding: 10px 12px; border-radius: 6px; background: var(--mint-wash);
    color: var(--ivory); font-size: 15px; line-height: 1.45;
    transition: opacity 160ms var(--ease);
  }
  .own-peek-head { flex: none; padding: 1px 8px; border-radius: 4px; background: var(--mint); color: var(--on-mint); font-size: 13px; font-weight: 600; line-height: 1.5; }
  .own-peek-step { flex: 1 1 8rem; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
  .own-peek-count { flex: none; margin-inline-start: auto; color: var(--sage); font-size: 13px; }
  .own-peek-none { color: var(--sage); font-size: 14px; }
}

@media (max-width: 520px) {
  .screen { padding: 12px; }
  .own-hint { margin-inline: 12px; } 
  .m-board { grid-template-columns: minmax(0, 1fr); }
  .m-board .m-column + .m-column { display: none; }
  .m-pager { display: flex; justify-content: center; gap: 16px; padding: 2px 0 4px; color: var(--ink-soft); font-size: 0.8125rem; }
  .m-pager b { color: var(--ink); }
  .m-pager:has(button) { gap: 4px; }
  .views .m-board { align-content: start; grid-template-rows: none; }
  .views .m-board[data-show] .m-column { display: none; }
  
  .views .m-board[data-show="0"] .m-column:nth-child(1 of .m-column), .views .m-board[data-show="1"] .m-column:nth-child(2 of .m-column), .views .m-board[data-show="2"] .m-column:nth-child(3 of .m-column) { display: grid; }
  .views .screen { padding: 14px; }
  .pane-hint, .views .pane-copy { margin-inline: 14px; }
  
  .m-canvas { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, .9fr); column-gap: 10px; padding-inline: 4px; }
  
  .m-card { padding: 7px; font-size: 0.8125rem; gap: 5px; text-wrap: balance; }
  .m-card .m-ring { width: 12px; height: 12px; }
  .m-root .m-meta { font-size: 0.8125rem; }
  .m-grid { gap: 8px; }
  .m-tile { padding: 9px; font-size: 0.8125rem; }
  .tabs { display: flex; }
  @media (scripting: enabled) { .tabs[hidden] { display: flex; } }
  .tabs button { flex: auto; min-width: 44px; padding: 0 8px; } 
}