/* YOUR RECKONING MOMENT (4 Oct 2026): the question in the hero and at the top of Think; see site/moment.js */
.mo{position:relative;max-width:620px;margin:6px 0 26px;padding:18px 20px 16px;border-radius:18px;font-family:Jost,Arial,sans-serif;color:#f2efe8;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(227,200,120,.22),0 18px 44px -24px rgba(0,0,0,.7);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:opacity .6s ease,transform .6s ease}
.mo[hidden]{display:none}
.mo.mo-gone{opacity:0;transform:translateY(-6px)}
.mo-think{max-width:none;margin:0 0 34px}
.mo-k{margin:0 0 8px;font:600 11px/1.3 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;color:#e3c878}
.mo-q{margin:0 0 14px;font:500 clamp(18px,2.1vw,22px)/1.35 Jost,Arial,sans-serif;color:#fff;transition:opacity .38s ease,transform .38s ease;min-height:2.7em}
.mo-q.mo-out{opacity:0;transform:translateY(4px)}
.mo-qs{min-height:0;font-size:15px;color:rgba(242,239,232,.7)}
.mo-f{display:flex;gap:10px}
.mo-i{flex:1;min-width:0;min-height:46px;padding:11px 15px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.25);color:#fff;
  font:16px/1.3 Arial,"Helvetica Neue",Helvetica,sans-serif;outline:none;transition:border-color .2s,box-shadow .2s}
.mo-i::placeholder{color:rgba(242,239,232,.45)}
.mo-i:focus{border-color:rgba(227,200,120,.7);box-shadow:0 0 0 3px rgba(227,200,120,.16)}
.mo-b,.mo-in{flex:none;min-height:46px;padding:0 20px;border:0;border-radius:999px;cursor:pointer;font:600 15px Jost,Arial,sans-serif;color:#1a1408;
  background:linear-gradient(180deg,#f1d98f,#d9b25a);box-shadow:0 8px 22px -10px rgba(227,200,120,.8)}
.mo-b:disabled{opacity:.6;cursor:default}
.mo-in{min-height:40px;font-size:14px}
.mo-m{margin:8px 0 0;font-size:13.5px;color:#ffb4a0}.mo-m:empty{display:none}
.mo-a{margin:0 0 12px;padding:2px 0 2px 16px;border-left:2px solid #e3c878;font:500 19px/1.45 Jost,Arial,sans-serif;color:#fff}
.mo-own{margin:0;font-size:13px;color:rgba(242,239,232,.6)}
.mo-e{margin-left:6px;padding:0;border:0;background:none;color:#e3c878;font:inherit;text-decoration:underline;cursor:pointer}
.mo-thx{margin:0;font:500 17px/1.4 Jost,Arial,sans-serif;color:#fff}
.mo-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:600px){.mo{padding:16px}.mo-f{flex-direction:column}.mo-b{width:100%}}
@media (prefers-reduced-motion:reduce){.mo,.mo-q{transition:none}}

/* no placeholder words, only a caret that breathes (Victor, 4 Oct 2026: "remove this phrasing and just leave the (beautiful)
   blinking cursor"); the drawn caret steps aside the moment the box has focus or text, and the real caret is gold too */
.mo-f{position:relative}
.mo-i{caret-color:#e3c878}
.mo-caret{position:absolute;left:16px;top:50%;width:2px;height:22px;margin-top:-11px;border-radius:2px;background:#e3c878;pointer-events:none;
  box-shadow:0 0 8px rgba(227,200,120,.7);animation:mo-blink 1.1s steps(1,end) infinite}
.mo-i:focus ~ .mo-caret,.mo-i:not(:placeholder-shown) ~ .mo-caret{display:none}
@keyframes mo-blink{0%,55%{opacity:1}56%,100%{opacity:0}}
@media (max-width:600px){.mo-caret{top:23px}}
/* thanks, the record and its actions (4 Oct 2026, Victor: "thank you a green checkmark of sorts, and show them where
   their answer lives on record ... allow them to edit, expand or delete it") */
.mo-ok{display:flex;align-items:flex-start;gap:10px;margin:2px 0 12px;font:500 16px/1.45 Jost,Arial,sans-serif;color:#eafff1;animation:mo-in .5s ease both}
.mo-ok svg{flex:none;width:26px;height:26px;fill:#22c55e;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 10px rgba(34,197,94,.55))}
.mo-ok svg circle{stroke:none}
.mo-go{color:#7ee2a2;font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.mo-go:hover{color:#a6f0c0}
@keyframes mo-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.mo-own{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.mo-own span{margin-right:auto}
.mo-a1{padding:6px 12px;border-radius:999px;border:1px solid rgba(227,200,120,.4);background:rgba(227,200,120,.08);color:#f1d98f;font:500 13.5px Jost,Arial,sans-serif;cursor:pointer}
.mo-a1:hover{background:rgba(227,200,120,.18)}
.mo-a1d{border-color:rgba(255,140,120,.35);background:none;color:#ffb4a0}
.mo-a1d:hover{background:rgba(255,140,120,.12)}
.mo-x{flex:none;min-height:46px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:none;color:#f2efe8;font:500 14px Jost,Arial,sans-serif;cursor:pointer}
.mo-more{margin:-4px 0 12px;padding-left:18px;font:16px/1.6 Arial,"Helvetica Neue",sans-serif;color:rgba(242,239,232,.86)}
.mo-ta{width:100%;box-sizing:border-box;margin:0 0 10px;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.25);color:#fff;
  font:16px/1.55 Arial,"Helvetica Neue",sans-serif;resize:vertical;outline:none;caret-color:#e3c878}
.mo-ta:focus{border-color:rgba(227,200,120,.7);box-shadow:0 0 0 3px rgba(227,200,120,.16)}
.mo-ta::placeholder{color:rgba(242,239,232,.4)}
.mo-row{display:flex;align-items:center;gap:10px}
.mo-n{margin-left:auto;font:12px "IBM Plex Mono",monospace;color:rgba(242,239,232,.5)}
.mo-cf{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;font:15px Jost,Arial,sans-serif;color:#ffd2c6}
.mo-del{min-height:40px;padding:0 18px;border:0;border-radius:999px;background:#e5533d;color:#fff;font:600 14px Jost,Arial,sans-serif;cursor:pointer}
.mo-cf .mo-x{min-height:40px}
.mo-think{scroll-margin-top:140px;transition:box-shadow .6s ease}
.mo-think.mo-hl{box-shadow:inset 0 0 0 1px rgba(34,197,94,.7),0 0 0 6px rgba(34,197,94,.12),0 18px 44px -24px rgba(0,0,0,.7)}
@media (max-width:600px){.mo-own span{flex-basis:100%}.mo-x{width:100%}}

/* the answer box grows with its text; editing puts the whole answer on top and the buttons beneath */
textarea.mo-i{display:block;resize:none;overflow:hidden;line-height:1.45;min-height:46px;font-family:Arial,"Helvetica Neue",Helvetica,sans-serif}
.mo-f{align-items:flex-start}
.mo-f-ed{flex-wrap:wrap}
.mo-f-ed textarea.mo-i{flex:1 1 100%;min-height:96px;font-size:17px;padding:14px 16px}
.mo-f-ed .mo-b{margin-left:auto}
.mo-caret{top:23px;margin-top:-11px}
@media (max-width:600px){.mo-f textarea.mo-i,.mo-f-ed textarea.mo-i{flex:none;width:100%;box-sizing:border-box;align-self:stretch}.mo-f{align-items:stretch}}