/* Ask page, Studio Graphite. Plain CSS with no build step. */

@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-stretch:75% 100%;font-display:swap;src:url(/assets/fonts/instrument-sans.woff2) format('woff2')}
@font-face{font-family:'Noto Serif Display';font-style:normal;font-weight:100 900;font-stretch:62.5% 100%;font-display:swap;src:url(/assets/fonts/noto-serif-display.woff2) format('woff2')}
@font-face{font-family:'Noto Serif Display';font-style:italic;font-weight:100 900;font-stretch:62.5% 100%;font-display:swap;src:url(/assets/fonts/noto-serif-display-italic.woff2) format('woff2')}

:root{
  --ink:#0B0B0C;
  --paper:#FFFFFF;
  --mute:#666A70;
  --line:#E2E4E7;
  --soft:#C9CCD1;
  --serif:'Noto Serif Display','Bodoni 72',Didot,Georgia,serif;
  --sans:'Instrument Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --pad:clamp(20px,5vw,72px);
  --out:cubic-bezier(0.23,1,0.32,1);
}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper)}
[hidden]{display:none !important}
a{color:var(--ink)}
a:hover{color:#4A4D52}
::selection{background:var(--ink);color:var(--paper)}
.on-dark ::selection,.top ::selection{background:var(--paper);color:var(--ink)}
.chat ::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:1.5px solid currentColor;outline-offset:4px}

.page{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-80px;z-index:50;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* Top band */
.top{position:relative;background:var(--ink);color:var(--paper)}
.top a{color:var(--paper)}
.bar{max-width:1296px;margin:0 auto;padding:0 var(--pad);box-sizing:content-box;height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.wordmark{display:inline-flex;align-items:center;min-height:44px;font-family:var(--serif);font-stretch:62.5%;font-weight:600;font-size:clamp(21px,6.2vw,27px);letter-spacing:0.04em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.btn{transition:transform 160ms var(--out),background-color 240ms ease}
.btn:active{transform:scale(0.97)}
.top a.btn-paper{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;background:var(--paper);color:var(--ink);font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap}

/* Layout */
.ask-grid{max-width:1296px;margin:0 auto;padding:clamp(24px,3.4vw,48px) var(--pad) clamp(40px,5.4vw,78px);box-sizing:content-box;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);grid-template-areas:"intro chat" "more chat";grid-template-rows:auto 1fr;column-gap:clamp(32px,5vw,72px);row-gap:28px}
.ask-intro{grid-area:intro;display:flex;flex-direction:column;gap:clamp(18px,2vw,26px);min-width:0}
.ask-more{grid-area:more;align-self:end;display:flex;flex-wrap:wrap;gap:0 22px}
.page-title{margin:0;font-family:var(--serif);font-stretch:62.5%;font-weight:600;font-size:clamp(72px,11.39vw,164px);line-height:0.92;letter-spacing:0.01em;text-transform:uppercase}
.intro-copy{display:flex;flex-direction:column;gap:clamp(18px,2vw,26px);animation-delay:120ms}
.lede{margin:0;max-width:14em;font-family:var(--serif);font-size:clamp(27px,2.7vw,39px);line-height:1.18;letter-spacing:-0.012em;font-weight:400;text-wrap:balance}
.intro-p{margin:0;max-width:26em;font-size:clamp(16.5px,1.25vw,18px);line-height:1.55;color:var(--soft);text-wrap:pretty}

/* Chat panel */
.chat{grid-area:chat;--th:clamp(420px,36vw,520px);display:flex;flex-direction:column;min-width:0;background:var(--paper);color:var(--ink);animation-delay:200ms}
.top .chat a{color:var(--ink)}
.chat-head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:0 clamp(18px,2vw,28px);border-bottom:1px solid var(--ink)}
.chat-title{margin:0;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(21px,1.9vw,26px);line-height:1.1;letter-spacing:-0.01em;text-wrap:balance}
.chat-reset{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:transparent;color:var(--ink);font-family:inherit;font-size:14.5px;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;white-space:nowrap;cursor:pointer}

.thread{position:relative;height:var(--th);overflow-y:auto;overscroll-behavior:contain;padding:22px clamp(18px,2vw,28px);scrollbar-width:thin;scrollbar-color:var(--soft) transparent}
.thread::-webkit-scrollbar{width:10px}
.thread::-webkit-scrollbar-thumb{background:var(--soft);border:3px solid var(--paper)}
.thread:focus-visible{outline-offset:-3px}
.hello{display:flex;flex-direction:column;gap:12px}
.notice{margin:0;padding:10px 14px;border:1px solid var(--ink);font-size:15px;line-height:1.45}

.turn{display:flex;flex-direction:column;gap:14px;padding-top:26px}
.turn-last{box-sizing:border-box;min-height:calc(var(--th) + 28px)}
.you{align-self:flex-end;max-width:82%;padding:12px 16px;background:var(--ink);color:var(--paper);font-size:16.5px;line-height:1.4;overflow-wrap:anywhere}
.pending{display:flex;flex-direction:column;gap:6px}
.answer{display:flex;flex-direction:column;gap:12px}
.ai-label{font-size:13px;font-weight:600;color:var(--mute)}
.ai-p{margin:0;max-width:34em;font-size:17px;line-height:1.55;overflow-wrap:anywhere}

.chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.chips-top{padding-top:6px}
.chip-light{display:inline-flex;align-items:center;min-height:48px;padding:8px 16px;border:1px solid #85898F;border-radius:0;background:var(--paper);color:var(--ink);font-family:inherit;font-size:15.5px;line-height:1.3;text-align:left;cursor:pointer;transition:transform 160ms var(--out),background-color 200ms ease,border-color 200ms ease}
.chip-light:active{transform:scale(0.97)}
.chip-light:disabled{color:var(--mute);border-color:var(--soft);cursor:default;transform:none}
.next{display:flex;flex-direction:column;gap:10px;padding-top:6px}

.src-row{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px;padding-top:6px;border-top:1px solid var(--line)}
.src{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.src-tag{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:600}
.retry{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:transparent;color:var(--ink);font-family:inherit;font-size:15px;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;cursor:pointer}

.composer{position:relative;display:flex;margin:0;border-top:1px solid var(--ink)}
.ask-field{flex:1 1 0;width:100%;min-width:0;box-sizing:border-box;height:64px;margin:0;padding:0 clamp(18px,2vw,28px);background:var(--paper);border:0;border-radius:0;color:var(--ink);font-family:inherit;font-size:17px;text-overflow:ellipsis;caret-color:var(--ink);-webkit-appearance:none;appearance:none}
.ask-field::placeholder{color:var(--mute);opacity:1}
.ask-field:focus-visible{outline-offset:-4px}
.ask-go{flex:none;height:64px;margin:0;padding:0 34px;border:0;border-radius:0;background:var(--ink);color:var(--paper);font-family:inherit;font-size:16px;font-weight:700;cursor:pointer}
.ask-go:focus-visible{outline:2px solid var(--paper);outline-offset:-6px}
.ask-go:disabled{background:#4A4D52;cursor:default;transform:none}
.chat-foot{margin:0;padding:12px clamp(18px,2vw,28px) 14px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.45;color:var(--mute)}

/* Thinking dots and entrances */
.dots{display:inline-flex;align-items:center;gap:6px;height:28px}
.dots span{width:6px;height:6px;background:var(--ink);opacity:0.25;animation:dot 1100ms ease-in-out infinite}
.dots span:nth-child(2){animation-delay:180ms}
.dots span:nth-child(3){animation-delay:360ms}
@keyframes dot{0%,100%{opacity:0.22;transform:translateY(0)}50%{opacity:0.9;transform:translateY(-3px)}}
@keyframes msgin{from{opacity:0;transform:translateY(8px)}}
@keyframes fadein{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.msg-in{animation:msgin 260ms var(--out) both}
.fade{animation:fadein 1100ms ease both}
.rise{animation:rise 800ms var(--out) both}

/* Footer */
.foot{max-width:1296px;margin:0 auto;padding:0 var(--pad) clamp(28px,3vw,40px);box-sizing:content-box}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 28px;padding-top:18px;font-size:12.5px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--mute)}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 28px}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}

/* Not found page */
.lost{min-height:100vh;min-height:100dvh}
.lost-body{max-width:1296px;margin:0 auto;padding:clamp(24px,3.4vw,48px) var(--pad) clamp(40px,5.4vw,78px);box-sizing:content-box;display:flex;flex-direction:column;gap:clamp(18px,2vw,26px)}
.lost .lede{max-width:20em}
.lost-links{margin:0;display:flex;flex-wrap:wrap;gap:0 22px}

@media (hover:hover) and (pointer:fine){
  .top a.btn-paper:hover{background:#E9EBEE;color:var(--ink)}
  .ask-go:hover:not(:disabled){background:#2A2C30}
  .chip-light:hover:not(:disabled){background:#F1F2F4;border-color:var(--ink)}
  .chat-reset:hover,.retry:hover{color:#4A4D52}
  .top a:hover{color:#D5D8DC}
  .top .chat a:hover{color:#4A4D52}
}
@media (max-width:900px){
  .ask-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "chat" "more";grid-template-rows:auto;row-gap:24px}
}
@media (max-width:600px){
  .hide-phone{display:none !important}
  .chips{grid-template-columns:minmax(0,1fr)}
  .chat-title{font-size:18.5px}
  .chat{--th:440px}
  .you{font-size:16px}
  .ai-p{font-size:16.5px}
  .chip-light{font-size:15px;padding:8px 14px}
  .ask-field{font-size:16px}
  .ask-go{padding:0 24px}
}
@media (max-width:420px){
  .page-title{font-size:18.4vw}
}
@media (max-width:359px){
  .top a.btn-paper{padding:0 12px;font-size:14px}
  .bar{gap:12px}
}
@media (prefers-reduced-motion:reduce){
  .dots span,.msg-in,.fade,.rise{animation:none !important}
  .btn,.chip-light{transition:none}
}