/* The live Game of Thrones demo on the GPT-2 case study: a violet box with a question field, example questions, the answer, the book passages behind it and one line of state. Needs the page's .world-gpt2 colours. */
.try-it { padding-bottom: 52px; } /* space before the next section */
.try-it-box { padding: clamp(20px, 3vw, 32px); border-radius: var(--radius); background: var(--world-background); color: var(--world-on-color); } /* the violet card */
.try-it h2 { margin-bottom: 8px; } /* title sits close to its line */
.case-section .try-it-box p { color: inherit; } /* white text on violet, beating the grey section text */
.case-section .try-it-box p.try-it-intro { margin-bottom: 18px; font-size: 17px; line-height: 1.5; } /* what the box is */
.try-it-form { display: none; gap: 12px; } /* hidden without scripts, so nobody sees a dead form */
.js .try-it-form { display: grid; } /* shown when scripts run */
.try-it-form textarea { width: 100%; min-height: 78px; padding: 13px 15px; border: 0; border-radius: 12px; background: #fff; color: #17102f; font: 500 17px/1.4 var(--body); resize: vertical; } /* the question field */
.try-it-form textarea::placeholder { color: #6b6485; } /* hint text, still readable on white */
.try-it-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; } /* Ask button and the state sentence */
.try-it-actions .button:disabled { opacity: 0.6; cursor: wait; transform: none; } /* busy look */
.case-section .try-it-box p.try-it-status { display: flex; align-items: center; gap: 9px; flex: 1 1 220px; font: 500 14px/1.4 var(--body); } /* one-line state */
.try-it-status::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #fff; } /* state dot, white while checking */
[data-state="ready"] .try-it-status::before { background: var(--live); box-shadow: 0 0 0 3px rgb(87 217 139 / 0.3); } /* green: the model is awake */
[data-state="waking"] .try-it-status::before, [data-state="asking"] .try-it-status::before { background: var(--amber); box-shadow: 0 0 0 3px rgb(242 181 68 / 0.3); } /* amber: working on it */
[data-state="down"] .try-it-status::before { background: var(--recording); box-shadow: 0 0 0 3px rgb(255 106 85 / 0.3); } /* red: not answering */
.try-it-examples { display: flex; flex-wrap: wrap; gap: 8px; } /* the tap-to-ask questions */
.try-it-examples button { padding: 8px 14px; border: 0; border-radius: 99px; background: rgb(255 255 255 / 0.16); color: inherit; font: 500 14px/1.3 var(--body); text-align: left; cursor: pointer; transition: background 0.2s; } /* one example pill */
.try-it-examples button:hover { background: rgb(255 255 255 / 0.28); } /* brightens on hover */
.try-it-answer { margin-top: 18px; padding: 18px 20px; border-radius: 14px; background: var(--world-deep); } /* the answer panel, darker violet */
.case-section .try-it-box p.try-it-asked { color: var(--world-tint); font: 500 12.5px/1.4 var(--mono); letter-spacing: 0.03em; } /* the question that was asked */
.case-section .try-it-box p.try-it-reply { margin: 8px 0; padding-left: 14px; border-left: 3px solid var(--amber); font: 500 clamp(18px, 2vw, 21px)/1.45 var(--body); } /* what the model said */
.case-section .try-it-box p.try-it-seconds { color: var(--world-tint); font: 500 12.5px var(--mono); } /* how long it took */
.case-section .try-it-box p.try-it-more { margin-top: 18px; font: 600 15px var(--body); } /* link to the full demo */
.try-it-more a { text-underline-offset: 4px; } /* readable link */
.try-it-sources { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / 0.16); } /* the book passages behind the answer, set apart by a thin line */
.case-section .try-it-box p.try-it-sources-title { margin: 0; color: var(--world-tint); font: 500 12.5px/1.4 var(--mono); letter-spacing: 0.03em; } /* "Book passages it read first" */
.try-it-source-list { display: grid; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; } /* one entry per place in the books */
.try-it-source-place { display: block; font: 600 14.5px/1.4 var(--body); } /* "A Game of Thrones, Catelyn (chapter 2)" */
.try-it-source-snippet { display: block; margin-top: 3px; color: var(--world-tint); font: italic 400 14.5px/1.5 var(--body); quotes: "\201C" "\201D"; } /* the short quote, at most 25 words */
.case-section .try-it-box .try-it-sources + p.try-it-seconds { margin-top: 14px; } /* air between the last passage and the answer time */