/* Motion belongs to the examples; reading and text entry stay still. */
:root { --motion-press: var(--dur-1,140ms); --motion-state: var(--dur-2,260ms); }
h1, h2 { text-wrap: balance; }
.intro { max-width: 660px; }
.workspace { isolation: isolate; }
.tabs { position: relative; isolation: isolate; }
.tabs::before {
  content: '';
  position: absolute;
  inset: 4px auto 4px 4px;
  width: calc(50% - 4px);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 2px 6px #0000000d;
  transition: transform var(--motion-state) var(--ease);
  z-index: -1;
}
.tabs:has([data-mode=example][aria-selected=true])::before { transform: translateX(100%); }
html[dir=rtl] .tabs::before { inset:4px 4px 4px auto; }
html[dir=rtl] .tabs:has([data-mode=example][aria-selected=true])::before { transform:translateX(-100%); }
.home-next :is(.story-heading,.meaning-copy,.extension-copy,.section-heading,.connection-options article,.flow-source,.flow-result,.paid-options article,.suggestion,.example-copy,.feed-post){min-width:0;overflow-wrap:break-word}
.home-next :is(h1,h2,h3){overflow-wrap:break-word}
.home-next .phrase[hidden]{display:none!important}
html[dir=rtl] :is(.example-copy,.suggestion,.feed-post,.story-heading,.meaning-copy,.extension-copy,.faq,.home-plans,.connections){text-align:start}
html[dir=rtl] .flow-bridge span{display:inline-block;transform:scaleX(-1)}
html[dir=rtl] .revision-line{transform-origin:right center}
html[dir=rtl] .old-word::after{transform-origin:right}
.home-next .writing-bottom output{direction:ltr;unicode-bidi:isolate}
html[dir=rtl] .home-next :is(.logo,.brand,.mini-brand){direction:ltr;unicode-bidi:isolate}
@media(max-width:540px){.home-next .workspace-actions{flex-wrap:wrap}.home-next .workspace-actions .primary{white-space:normal;height:auto;min-height:48px}.home-next .revision-line{padding-inline:0!important;flex-wrap:wrap}.home-next .tabs button{white-space:normal;font-size:13px}.home-next .writing-bottom{gap:12px}.home-next .post-heading{flex-wrap:wrap}.home-next .plan-composition{min-width:0}}
.tabs button { flex: 1; min-width: 120px; }
.tabs button[aria-selected=true] { background: transparent; box-shadow: none; }
.example-copy { max-width: 76ch; }
.phrase { border-radius: 2px; transition: background 160ms ease, border-color 160ms ease; }
.phrase.fixed { color: var(--ink); }
.example-link { border: 0; background: none; color: inherit; font: inherit; min-height: 44px; padding: 0; text-align: start; }
.example-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
.under-editor { align-items: center; margin-top: 14px; }
.under-editor a { display: inline-flex; align-items: center; min-height: 44px; }
.suggestion { min-height: 278px; }
.suggestion-type { display: inline-block; }
.small-button, .primary, .secondary { transition: transform var(--motion-press) var(--ease), background 160ms ease, color 160ms ease; }
.primary:hover, .secondary:hover { transform: none; }
.primary > span, .secondary > span { transition: transform var(--motion-state) var(--ease); }
.primary:active, .secondary:active, .small-button:active { transform: scale(.98); }
.feed-scene { perspective: 1200px; }
.feed-post { transform-origin: center 60%; }
.feed-underlay { box-shadow: 0 18px 40px -28px #20273444; }
.post-badge { transition: background 160ms ease, color 160ms ease; }
.post-badge[aria-expanded=true] { background: var(--ink); color: var(--surface); }
.post-footer { min-height: 48px; }
.faq summary { transition: color 160ms ease; }
.faq summary:hover, .faq details[open] summary { color: var(--accent); }
.faq summary::after { content: '+'; transition: transform var(--motion-state) var(--ease); }
.faq details[open] summary::after { content: '+'; transform: rotate(45deg); }
.mobile-menu { display: none; }

@media (hover: hover) and (pointer: fine) {
  .primary:hover:not(:disabled), .secondary:hover { transform: translateY(-2px); }
  .primary:hover > span, .secondary:hover > span { transform: translate(2px, -2px); }
}
@media (max-width: 800px) {
  .story-heading { padding-bottom: 0; }
  .suggestion { min-height: 0; }
  .revision-scene, .feed-scene { perspective: none; }
  .scene-caption { margin-top: 24px; }
}
@media (max-width: 540px) {
  .header { gap: 12px; flex-wrap: wrap; height: auto; min-height: 72px; padding-block: 12px; }
  .header .brand { font-size: 23px; }
  .header .login { padding-inline: 14px; }
  .theme-button { font-size: 11px; min-width: 44px; margin-left: 0; }
  .mobile-menu { display: block; position: relative; margin-left: auto; }
  .mobile-menu summary { padding: 12px 0; min-height: 44px; font-size: 12px; }
  .mobile-menu summary::after { display: none; }
  .header .mobile-menu nav {
    position: absolute; top: 46px; right: -105px; z-index: 10;
    display: flex; flex-direction: column; gap: 0; width: 230px;
    padding: 10px; border-radius: 12px; background: var(--surface);
    box-shadow: 0 12px 36px -12px #20273450;
  }
  .header .mobile-menu nav a { display: block; padding: 14px; font-size: 14px; }
  .tabs button { min-width: 0; }
  .under-editor { flex-direction: column; gap: 0; }
  .example-link { text-align: center; font-size: 13px; }
  .under-editor a { font-size: 12px; }
  .writing-bottom { align-items: flex-start; }
  .writing-bottom > span { max-width: 185px; }
  .new-word { font-size: 30px; }
  .revision-line.third { padding-left: 40px; }
  .next-step h2 { max-width: 12ch; }
}
/* Keyboard users get immediate feedback, without an animated focus target. */
html[data-input=keyboard] .tabs::before,
html[data-input=keyboard] .faq summary::after { transition: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .primary:hover, .secondary:hover, .primary:active, .secondary:active, .small-button:active { transform: none; }
}