[hidden]{display:none!important}main{padding-bottom:4rem}form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;max-width:850px}label{display:grid;gap:.5rem}input,select,button{font:inherit;padding:.8rem;border:1px solid #33434b;border-radius:7px;background:#131f25;color:#e5eded;min-width:0}button{cursor:pointer}button:hover{border-color:#8fc6ad}button:disabled{opacity:.5;cursor:wait}.capital-summary{display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding:1.5rem 0}.capital-summary strong{font-size:2rem;color:#9bceb8}.capital-row{padding:1.3rem 0;border-bottom:1px solid #29383f}.capital-row h3{margin:0 0 .6rem}.capital-row p{margin:.5rem 0}.capital-row ul{padding-left:1.3rem}#history li{padding:.6rem 0}#message:empty{display:none}#account{overflow-wrap:anywhere}@media(max-width:650px){form,.capital-summary{grid-template-columns:1fr}.cycle-hero h1{font-size:2.8rem}}

label.remember{display:flex;align-items:center;gap:.6rem}label.remember input{width:auto;accent-color:#9bceb8}

#dialog-form{display:flex;flex-direction:column;max-width:900px}textarea{font:inherit;background:#131f25;color:#e5eded;border:1px solid #33434b;border-radius:7px;padding:1rem;resize:vertical;max-width:100%;box-sizing:border-box}.dialog-suggestions{display:flex;flex-wrap:wrap;gap:.6rem}.dialog-turn{border:1px solid #33434b;border-radius:10px;padding:1.2rem;margin:1rem 0}.dialog-turn p{white-space:pre-wrap;overflow-wrap:anywhere}.dialog-turn blockquote{border-left:2px solid #8fc6ad;padding-left:1rem;margin-left:0;overflow-wrap:anywhere;white-space:pre-wrap}.dialog-turn summary{cursor:pointer}.dialog-meta{font-size:.85rem;opacity:.7}

.dialog-table-wrap{overflow-x:auto;margin:1rem 0}.dialog-table{width:100%;border-collapse:collapse}.dialog-table th,.dialog-table td{text-align:right;padding:.6rem;border-bottom:1px solid var(--line,#ddd);white-space:nowrap}.dialog-table th:first-child,.dialog-table td:first-child{text-align:left;white-space:normal;min-width:10rem}
/* Dialog section (req:site-navigation): the page fits the screen and does not scroll;
   the history scrolls inside its own window and the input stays at the bottom. */
body.dialog-mode{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column}
body.dialog-mode>nav{flex:none}
body.dialog-mode>.page-heading,body.dialog-mode>footer{display:none}
body.dialog-mode>main{flex:1;min-height:0;display:flex;flex-direction:column;padding-bottom:0;overflow:hidden}
body.dialog-mode #message{flex:none;margin:.5rem 0;padding:.4rem .8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.dialog-mode #login-section:not([hidden]){flex:1;min-height:0;overflow-y:auto}
body.dialog-mode #workspace:not([hidden]){flex:1;min-height:0;display:flex;flex-direction:column}
body.dialog-mode #workspace>.section-head{flex:none;margin:0 0 .25rem}
body.dialog-mode #dialog{flex:1;min-height:0;display:flex;flex-direction:column;margin:0;padding-top:.25rem;padding-bottom:.75rem;border-top:0}
body.dialog-mode #dialog>.eyebrow,body.dialog-mode #dialog>h2,body.dialog-mode #dialog>p:not(#dialog-status){display:none}
body.dialog-mode .dialog-suggestions{flex:none;display:flex;flex-wrap:nowrap;gap:.5rem;overflow-x:auto;padding-bottom:.25rem}
body.dialog-mode .dialog-suggestions button{flex:none;white-space:nowrap}
body.dialog-mode #dialog-history{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--line,#25343d);border-radius:10px;padding:.75rem 1rem;margin:.5rem 0}
body.dialog-mode #dialog-form{flex:none;max-width:none;gap:.5rem}
body.dialog-mode #dialog-form textarea{resize:none;min-height:3.2em;max-height:30vh}
body.dialog-mode #dialog-form .remember{font-size:12px}
body.dialog-mode #dialog-status{flex:none;font-size:12px;margin:.25rem 0 0;color:var(--muted,#93a6b0)}
/* Dialog: compact chrome so the history window keeps most of the screen. */
body.dialog-mode #message,body.dialog-mode #workspace>.section-head{display:none}
body.dialog-mode .dialog-suggestions button{padding:.3rem .65rem;font-size:13px}
body.dialog-mode #dialog-form{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:.4rem .6rem}
body.dialog-mode #dialog-form>label:first-child{font-size:0;gap:0}
body.dialog-mode #dialog-form textarea{font-size:15px;min-height:2.8em;padding:.6rem .8rem}
body.dialog-mode #dialog-form button[type=submit]{min-height:2.8em;white-space:nowrap}
body.dialog-mode #dialog-form .remember{grid-column:1/-1;grid-row:2;font-size:11px;line-height:1.35}
body.dialog-mode #dialog-status{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11px;line-height:1.35}
/* agr:dialog-hints: two overlay layers cross-fade the hint over the empty field (2 s). */
.hint-wrap{position:relative;display:grid}
.hint-wrap.has-overlay textarea::placeholder{color:transparent}
.hint-overlay{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hint-overlay span{position:absolute;inset:0;border:1px solid transparent;box-sizing:border-box;white-space:pre-wrap;overflow:hidden;color:#6b7c85;
 /* same box as the textarea so a server-rendered hint is aligned before any script runs */
 font-family:inherit;font-size:15px;line-height:1.6;padding:1rem;
 /* outgoing: drops at once and fast, easing out, lifting slightly — nearly gone by 0.6 s */
 opacity:0;transform:translateY(-.35em);transition:opacity .8s cubic-bezier(.15,.7,.35,1),transform .8s cubic-bezier(.3,.3,.5,1)}
/* incoming: starts once the old one is almost gone, rises from below and settles by 2 s */
.hint-overlay span.on{opacity:1;transform:none;transition:opacity 1.5s cubic-bezier(.4,0,.2,1) .5s,transform 1.5s cubic-bezier(.2,.7,.3,1) .5s}
/* the next layer is placed below without animation before it comes in */
.hint-overlay span.prep{transition:none;opacity:0;transform:translateY(.35em)}
#dialog-form textarea::placeholder{color:#6b7c85;opacity:1}
/* must outrank the rule above: the overlay owns the visible hint, the placeholder only serves assistive technology */
#dialog-form .hint-wrap.has-overlay textarea::placeholder{color:transparent}
.hint-overlay span.on{opacity:1}
.hint-wrap.typing .hint-overlay{display:none}
.hint-overlay span.on.instant{transition:none}
body.dialog-mode .hint-overlay span{padding:.6rem .8rem}
/* Dialog: shimmering dots while the answer is being prepared. */
.thinking-dots span{display:inline-block;animation:thinking-dot 1.4s ease-in-out infinite;opacity:.2}
.thinking-dots span:nth-child(2){animation-delay:.2s}
.thinking-dots span:nth-child(3){animation-delay:.4s}
@keyframes thinking-dot{0%,80%,100%{opacity:.2;transform:none}40%{opacity:1;transform:translateY(-.12em)}}
@media (prefers-reduced-motion:reduce){.thinking-dots span{animation:none;opacity:.7}}