/* ── shared form parts (also used by sheets) ── */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field > span { display: flex; justify-content: space-between; gap: 8px; }
.cnt { font-size: 10px; color: var(--grey); letter-spacing: 0; text-transform: none; }
.cnt.is-near { color: var(--warn); }
.sub-h { margin: 6px 0 -4px; font: 700 16.5px/1.2 var(--sans); color: var(--white); }
.hint { margin: 0; font-size: 16px; line-height: 1.5; color: var(--grey-2); }
.rows { display: grid; gap: 10px; }
.row { margin: 0; padding: 12px; border: 1px solid var(--char-line); border-radius: 14px; min-width: 0; }
.row-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.row-grid .field.wide { grid-column: 1 / -1; }
.row-tools { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.tool { min-height: 44px; padding: 0 12px; border-radius: 10px; font: 600 16px/1.2 var(--sans); color: var(--grey-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(183,180,173,.4); }
.tool:hover { background: var(--char-3); color: var(--white); }
.add { min-height: 54px; border-radius: 12px; border: 1px dashed #55565c; color: var(--accent); font: 700 16px/1 var(--sans); transition: border-color .2s, background .2s; }
.add:hover { border-color: var(--accent); background: rgba(255,229,0,.05); }
.textarea.sm { min-height: 62px; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--grey) 50%), linear-gradient(135deg, var(--grey) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags:empty { display: none; }
.tag { display: inline-flex; align-items: center; gap: 2px; padding: 5px 5px 5px 14px; border-radius: 999px; background: var(--char-3); font-size: 16px; }
.tag button { width: 32px; height: 32px; border-radius: 50%; font-size: 15px; color: var(--grey-2); }
.tag button:hover { color: var(--white); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 46px; padding: 10px 14px; border-radius: 12px; text-align: left; font: 500 16px/1.3 var(--sans); box-shadow: inset 0 0 0 1px var(--char-line); color: var(--grey-2); transition: box-shadow .15s, background .15s, color .15s; }
.chip:hover { color: var(--white); }
.chip[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--accent); background: rgba(255,229,0,.07); color: var(--white); }



/* Sheets used here */
.paste-t, .ex-t { margin: 0 0 6px; font: 800 24px/1.1 var(--sans); letter-spacing: -.02em; }
.paste-s { margin: 0 0 14px; color: var(--grey-2); font-size: 16px; }
.paste .textarea { min-height: 220px; margin-bottom: 14px; }
.ex { display: grid; gap: 10px; }
.ex-warn, .ex-ok { padding: 12px 14px; border-radius: 12px; font-size: 16px; line-height: 1.45; }
.ex-warn { background: rgba(255,111,89,.1); box-shadow: inset 0 0 0 1px rgba(255,111,89,.3); }
.ex-ok { background: rgba(41,196,106,.1); box-shadow: inset 0 0 0 1px rgba(41,196,106,.3); }
.ex-help { margin: -2px 0 6px; font-size: 16px; line-height: 1.45; color: var(--grey); }
.ex-status { margin: 0; font-size: 16px; color: var(--grey-2); min-height: 1em; }
.menu { display: grid; gap: 8px; }
.menu-b { display: grid; gap: 3px; padding: 14px 16px; border-radius: 14px; text-align: left; box-shadow: inset 0 0 0 1px var(--char-line); }
.menu-b:hover { background: var(--char-3); }
.menu-b b { font: 700 17px/1.2 var(--sans); }
.menu-b span { font-size: 16px; line-height: 1.4; color: var(--grey-2); }
.menu-b.is-danger b { color: var(--warn); }

/* Checkout sheet */
.co { text-align: center; }
.co-kicker { margin: 0; font-size: 11px; letter-spacing: .16em; color: var(--accent); }
.co-price { margin: 10px 0 0; font: 900 clamp(76px, 20vw, 96px)/.9 var(--sans); letter-spacing: -.05em; }
.co-once { margin: 10px 0 20px; font-size: 12px; letter-spacing: .12em; color: var(--grey-2); }
.co-list { list-style: none; margin: 0 0 22px; padding: 0; text-align: left; display: grid; }
.co-list li { padding: 10px 0 10px 28px; border-bottom: 1px solid var(--char-line); font-size: 15px; position: relative; }
.co-list li::before { content: "✓"; position: absolute; left: 4px; color: var(--accent); font-weight: 700; }
.co-small { margin: 12px 0 0; font-size: 13px; color: var(--grey); }
.co-small:empty { display: none; }
.co-test { margin: 14px 0 0; font-size: 12px; line-height: 1.45; color: var(--grey); }
.co-test b { padding: 3px 7px; border-radius: 6px; background: var(--accent); color: var(--char); font-size: 10.5px; letter-spacing: .1em; }
.co-test.center { text-align: center; margin-bottom: 8px; }
.co-wallet { display: grid; gap: 10px; }
.co-row { display: flex; justify-content: space-between; padding: 14px 2px; border-bottom: 1px solid var(--char-line); font-weight: 600; }
.co-row.muted { color: var(--grey-2); font-weight: 400; }
.co-cancel { min-height: 46px; width: 100%; font: 600 14px/1 var(--sans); color: var(--grey); }
.spin { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(18,19,20,.25); border-top-color: var(--char); animation: spin .7s linear infinite; }



/* "new CV era unlocked." */
.unlock { position: fixed; inset: 0; z-index: 120; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; background: var(--char); animation: fade .35s both; }
.unlock.out { animation: fade .35s reverse both; }
.unlock-tick { width: 76px; height: 76px; color: var(--accent); }
.unlock-tick svg { width: 100%; height: 100%; }
.unlock-tick circle { stroke-dasharray: 190; stroke-dashoffset: 190; animation: draw .7s var(--ease) .1s forwards; }
.unlock-tick path { stroke-dasharray: 50; stroke-dashoffset: 50; animation: draw .45s var(--ease) .65s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.unlock-t { margin: 8px 0 0; padding: 0 16px; font: 900 clamp(26px, 8.5vw, 56px)/1 var(--sans); letter-spacing: -.04em; text-wrap: balance; }
.unlock-s { margin: 0; font-size: 12px; color: var(--grey); }



/* Checkout additions: consent, discount, seller line */
.co-was { color: var(--grey); font-size: .45em; font-weight: 700; text-decoration-thickness: 3px; vertical-align: middle; }
.co-consent { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--char-line); text-align: left; font-size: 13px; line-height: 1.45; color: var(--grey-2); cursor: pointer; }
.co-consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); }
.co-consent:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--accent); }
.co-legal { margin: 10px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--grey); }
.co .btn[disabled] { opacity: .45; }

/* ═════════ THE STUDIO: a workspace with the CV at its centre ═════════
   Desktop: stages | the CV | the editor (appears when something is tapped).
   Phones: the CV full screen, stages along the bottom, editors in a bottom sheet. */
.ws { --top: calc(64px + var(--safe-t)); --rail: 312px; --pw: 0px;
  height: 100dvh; display: grid; grid-template-columns: var(--rail) minmax(0, 1fr) 0px; grid-template-rows: var(--top) minmax(0, 1fr) 64px;
  position: relative; overflow: hidden; overflow: clip; background: var(--char); }   /* clip: nothing can scroll the frame itself, not even scrollIntoView */
.ws.has-panel { grid-template-columns: var(--rail) minmax(0, 1fr) 460px; }

/* top bar */
.ws-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: var(--safe-t) 16px 0 18px; border-bottom: 1px solid var(--char-line); background: var(--char); z-index: 20; }
.st-brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 6px 0 0; font: 900 16px/1 var(--sans); letter-spacing: -.02em; }
.st-brand img { flex: none; border-radius: 7px; }
.st-brand { min-width: 44px; }
.st-caret { font-size: 11px; color: var(--grey); }
.ws-saved { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 99px; font: 500 16px/1 var(--sans); color: var(--grey-2); }
.ws-saved:hover { background: var(--char-2); color: var(--grey-2); }
.ws-saved-d { width: 7px; height: 7px; border-radius: 50%; background: var(--green); transition: transform .3s var(--spring); }
.ws-saved.is-pulse .ws-saved-d { transform: scale(1.6); }
.ws-saved.is-bad { color: var(--warn); }
.ws-saved.is-bad .ws-saved-d { background: var(--warn); }
.ws-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.ws-icon { min-width: 40px; min-height: 40px; font: 400 19px/1 var(--sans); }
.ws-icon:disabled { opacity: .28; pointer-events: none; }
.ws-pbtn, .ws-help { min-height: 44px; padding: 0 16px; margin-left: 6px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--char-line); font: 600 16px/1 var(--sans); color: var(--grey-2); }
.ws-pbtn:hover, .ws-help:hover { color: var(--white); box-shadow: inset 0 0 0 1px var(--grey); }
.ws-pbtn[aria-pressed="true"] { background: var(--white); color: var(--char); box-shadow: none; }
.ws-export { margin-left: 4px; }

/* left: stages */
.ws-rail { grid-column: 1; grid-row: 2 / 4; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 14px; padding: 16px 14px 18px; border-right: 1px solid var(--char-line); }
.ws-job { margin-top: auto; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 10px; padding: 10px 12px; border-radius: 14px; text-align: left; }
.ws-job > span:first-child { grid-column: 1 / -1; font-size: 16px; color: var(--grey-2); }
.ws-job b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 16.5px/1.25 var(--sans); }
.ws-job-c { font: 600 16px/1 var(--sans); color: var(--accent); }
.ws-job:hover { background: var(--char-3); }
.stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.stage-h { width: 100%; min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; text-align: left; transition: background .2s; }
.stage-h:hover { background: var(--char-2); }
.stage-n { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px #4a4b50; font: 700 16px/1 var(--sans); color: var(--grey-2); transition: background .3s, color .3s, box-shadow .3s; }
.stage.is-on .stage-n { background: var(--accent); color: var(--char); box-shadow: none; }
.stage.is-done .stage-n { background: var(--green); color: var(--char); box-shadow: none; }
.stage.is-on.is-done .stage-n { box-shadow: 0 0 0 3px rgba(255,229,0,.5); }
.stage-t { display: grid; gap: 3px; min-width: 0; }
.stage-t b { font: 700 18px/1.2 var(--sans); letter-spacing: -.01em; }
.stage-t > span { font-size: 16px; line-height: 1.35; color: var(--grey-2); }
.items { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 2px; }
.stage-b { padding: 0 0 6px 16px; }
.stage-b.is-enter { animation: arrive .35s var(--ease) both; }
.stage-q { margin: -2px 0 6px 40px; font-size: 16px; line-height: 1.4; color: var(--grey-2); }
.stage-sheet .items { padding: 0; margin-top: 14px; }
.item { width: 100%; min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 6px; border-radius: 12px; text-align: left; transition: background .15s; }
.item:hover { background: var(--char-2); }
.item.is-cur { background: var(--char-3); }
.item-m { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 800 11px/1 var(--sans); color: var(--char); box-shadow: inset 0 0 0 1.5px #5a5b60; transition: background .3s, box-shadow .3s, transform .3s var(--spring); }
.item.is-done .item-m { background: var(--green); box-shadow: none; }
.item.is-cur .item-m { background: var(--accent); box-shadow: none; }
.item-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.item-t b { font: 600 16.5px/1.25 var(--sans); }
.item-t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; color: var(--grey-2); }
.rule { padding: 6px 8px 0 36px; font-size: 16px; line-height: 1.4; color: var(--grey-2); }
.ws-fit { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: 12px; background: rgba(255,111,89,.12); box-shadow: inset 0 0 0 1px rgba(255,111,89,.4); color: var(--warn); font: 600 16px/1.25 var(--sans); text-align: left; }
.ws-fit span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--warn); color: var(--char); font-size: 12px; font-weight: 800; }
.ws-nextup { position: sticky; bottom: 0; z-index: 2; flex: none; margin-top: 10px; padding: 16px 2px 0; border-top: 1px solid var(--char-line); background: var(--char); box-shadow: 0 -10px 14px 6px var(--char); }
.ws-next-k { margin: 0 0 8px 4px; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-2); }
.ws-next { width: 100%; min-height: 52px; padding: 12px 18px 12px 20px; gap: 10px; justify-content: space-between; border-radius: 14px; font: 700 16.5px/1.2 var(--sans); letter-spacing: -.005em; text-transform: none; white-space: normal; text-align: left; }
.ws-next-t { min-width: 0; }
.ws-next-a { flex: none; font-size: 17px; line-height: 1; transition: transform .25s var(--spring); }
.ws-next-note { margin: 8px 4px 0; font-size: 14px; line-height: 1.4; color: var(--grey-2); }
.ws-next:hover .ws-next-a { transform: translateX(3px); }

/* centre: the CV */
.ws-canvas { grid-column: 2; grid-row: 2; position: relative; overflow-anchor: none; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y; background: #0B0C0D; padding: 28px 32px 32px; scroll-padding: 24px; }
/* Room to scroll a section up while it's in focus. On the pages, not the canvas: padding on a grid item can force it taller than its row. */
.ws-canvas.is-framing .ws-pages { padding-bottom: 75vh; }
.ws-pages { display: grid; gap: 40px; justify-items: center; }
.ws-page { display: grid; gap: 10px; justify-items: center; }
.ws-plab { margin: 0; font-size: 16px; color: #9b988f; }
.ws-pages .a4frame { display: flex; justify-content: center; }
.ws-pages .a4 { zoom: var(--z, .8); box-shadow: 0 40px 100px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.05); transition: box-shadow .4s; }
/* Tappable parts of the page: quiet until you point at them. */
.ws-pages .hit { cursor: pointer; outline: 1.5px solid transparent; outline-offset: 3px; border-radius: 3px; transition: outline-color .18s, background-color .18s; }
.ws-pages .hit:hover { outline-color: rgba(255,229,0,.55); }
.ws-pages .hit:focus-visible { outline: 2.5px solid var(--accent); }
.ws-pages .hit.is-sel { outline: 2.5px solid var(--accent); outline-offset: 4px; }
.ws-pages .og .hit:hover, .ws-pages .og .hit.is-sel { outline-color: var(--accent-ink); }
.ws-pages .num.hit:hover { transform: translateY(-2px); transition: transform .25s var(--spring), outline-color .18s; }
.ws-pages .is-over { outline: 2px solid var(--warn) !important; outline-offset: 3px; }
.ws-pages .hit.is-settle { animation: settle .5s var(--spring); }
@keyframes settle { 0% { transform: scale(.965); } 55% { transform: scale(1.015); } 100% { transform: none; } }
.ws.is-clean .ws-pages .a4 { box-shadow: 0 50px 120px -30px rgba(0,0,0,1), 0 0 0 1px rgba(255,255,255,.08); }
.ws.is-clean .ws-plab::after { content: ", exactly as it downloads"; color: var(--accent); }

/* the editor */
.ws-panel { grid-column: 3; grid-row: 2 / 4; position: relative; z-index: 15; width: 460px; min-height: 0; display: flex; flex-direction: column; background: #17181A; border-left: 1px solid var(--char-line); transform-origin: 50% 50%; }
.ws-panel:not(.is-open) { visibility: hidden; pointer-events: none; }   /* a closing sheet never swallows a tap */
.ws-panel.is-swap .ed-head, .ws-panel.is-swap .ed-body { animation: swap-in .32s var(--ease) both; }
@keyframes swap-in { from { opacity: 0; transform: translateY(8px); } }
.ed-grip { display: none; }
.ed-head { padding: 24px 64px 6px 28px; }
.ed-kicker { margin: 0 0 6px; font: 700 17px/1.2 var(--sans); color: var(--accent); }
.ed-title { margin: 0; font: 800 30px/1.08 var(--sans); letter-spacing: -.025em; text-wrap: balance; }
.ed-lede { margin: 10px 0 0; font-size: 18px; line-height: 1.45; color: var(--grey-2); text-wrap: pretty; }
.ed-x { position: absolute; top: 16px; right: 14px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; color: var(--grey); }
.ed-x:hover { background: var(--char-3); color: var(--white); }
.ed-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 20px; padding: 18px 28px 32px; }
.ed-foot { display: flex; justify-content: flex-end; padding: 12px 20px calc(12px + var(--safe-b)); border-top: 1px solid var(--char-line); }
.ed-done { min-width: 120px; }
.ed-seg { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }

/* fields, calmer */
.field-l { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; font: 600 17px/1.25 var(--sans); color: var(--white); }
.input.is-long { min-height: 0; resize: vertical; line-height: 1.5; }
.ws .input, .sheet .buff .input { min-height: 52px; font-size: 17px; }
.ws .input::placeholder, .sheet .buff .input::placeholder { color: #8f8d87; }
.err { min-height: 0; font-size: 16px; line-height: 1.4; color: var(--warn); }
.err:empty { display: none; }
.input[aria-invalid="true"] { border-color: var(--warn); }
.coach { padding: 12px 14px; border-radius: 4px 16px 16px 16px; background: var(--char-3); }
.coach p { margin: 0; font-size: 17px; line-height: 1.5; }
.coach .coach-eg { margin-top: 8px; color: var(--grey-2); font-size: 16px; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.presets .chip { min-height: 44px; padding: 8px 12px; font-size: 16px; }
.paste-b { justify-self: start; }
.alt-b { justify-self: start; min-height: 44px; padding: 0 2px; font: 600 16.5px/1.3 var(--sans); color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.row-h { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0; margin-bottom: 8px; font: 700 16px/1 var(--sans); color: var(--grey-2); }
.row-tools { margin: 0; }
.sub-h { margin: 4px 0 -8px; }

/* "What are you proud of?" */
.kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.kind { min-height: 46px; padding: 0 16px; border-radius: 99px; box-shadow: inset 0 0 0 1px #3c3d42; font: 600 16px/1 var(--sans); color: var(--grey-2); transition: background .2s, color .2s, box-shadow .2s, transform .2s var(--spring); }
.kind:hover { color: var(--white); box-shadow: inset 0 0 0 1px var(--grey); }
.kind:active { transform: scale(.96); }
.kind[aria-checked="true"] { background: var(--accent); color: var(--char); box-shadow: none; }
.sq-edit { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 16px; align-items: start; }
.sq-mini { aspect-ratio: 1 / .92; display: flex; flex-direction: column; justify-content: space-between; padding: 12px 11px; border-radius: 4px; background: var(--char-2); box-shadow: inset 0 0 0 1px var(--char-line); perspective: 400px; }
.sq-mini.is-first { background: var(--accent); box-shadow: none; color: var(--char); }
.sq-mini strong { font: 800 28px/1 var(--sans); letter-spacing: -.04em; white-space: nowrap; overflow: hidden; }
.sq-mini[data-fit="l"] strong { font-size: 23px; } .sq-mini[data-fit="m"] strong { font-size: 19px; }
.sq-mini span { font: 400 12px/1.3 var(--mono); color: var(--grey-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sq-mini.is-first span { color: rgba(18,19,20,.72); }
.sq-mini.is-example strong, .sq-mini.is-example span { opacity: .45; }
.sq-mini.is-shuffle { animation: shuffle .42s var(--ease); }
@keyframes shuffle { 0% { transform: none; } 40% { transform: rotateY(80deg) scale(.96); } 41% { transform: rotateY(-80deg) scale(.96); } 100% { transform: none; } }
.sq-fields { display: grid; gap: 12px; }
.sq-value { font: 800 24px/1 var(--sans); letter-spacing: -.03em; }
.sq-tip { margin-top: -6px; }
.sq-mini[data-fit="wrap"] strong { font-size: 20px; line-height: 1.03; white-space: normal; }
.sq-mini[data-fit="wrap-s"] strong { font-size: 15px; line-height: 1.08; white-space: normal; }
.ideas { margin: 0; font-size: 16px; line-height: 1.5; color: var(--grey-2); }
.ideas b { color: var(--white); font-weight: 600; }
.honest { margin: 0; padding-left: 12px; border-left: 2px solid var(--violet); font-size: 16px; line-height: 1.45; color: var(--grey-2); }
.sq-nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 10px; padding-top: 6px; border-top: 1px solid var(--char-line); font-size: 16px; color: var(--grey-2); }
.sq-nav-b { display: flex; gap: 4px; }
.sq-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -10px; }

/* sections and tone */
.mods { display: flex; flex-wrap: wrap; gap: 6px; }
.mods .chip[aria-checked="true"], .job-results .chip:focus-visible { box-shadow: inset 0 0 0 1.5px var(--accent); background: rgba(255,229,0,.08); color: var(--white); }
.chip em { font-style: normal; color: var(--accent); font-size: 14px; }
.chip.is-hide { color: var(--grey); }
.chip.is-hide[aria-checked="true"] { box-shadow: inset 0 0 0 1.5px var(--grey); color: var(--white); }
.mod-fields { display: grid; gap: 14px; }
.mod-pick { border-radius: 14px; background: var(--char-2); }
.mod-pick summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 16px; }
.mod-pick summary::-webkit-details-marker { display: none; }
.mod-k { font-size: 16px; color: var(--grey-2); }
.mod-cur { font: 700 16.5px/1.2 var(--sans); }
.mod-change { margin-left: auto; font: 600 16px/1 var(--sans); color: var(--accent); }
.mod-pick[open] .mod-change { color: var(--grey); }
.mod-pick .mods { padding: 0 12px 14px; }
.tones { display: grid; gap: 8px; }
.tone-c { display: grid; gap: 6px; padding: 14px 16px; border-radius: 16px; text-align: left; box-shadow: inset 0 0 0 1px var(--char-line); transition: box-shadow .2s, background .2s; }
.tone-c:hover { box-shadow: inset 0 0 0 1px var(--grey); }
.tone-c[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--accent); background: rgba(255,229,0,.06); }
.tone-n { font: 800 18px/1.1 var(--sans); color: var(--white); }
.tone-n em { font: 600 16px/1 var(--sans); color: var(--accent); }
.tone-c b { font: 800 16px/1.2 var(--sans); letter-spacing: -.01em; color: var(--grey-2); }
.tone-h { font-size: 16px; line-height: 1.4; color: var(--grey-2); }
.job-results { display: flex; flex-wrap: wrap; gap: 6px; }
.job-results:empty { display: none; }
.job-results .chip.is-custom { color: var(--accent); }

/* photo */
.photo { display: flex; gap: 18px; align-items: center; }
.ph-prev { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center; background: var(--char-3); box-shadow: 0 0 0 3px #17181A, 0 0 0 5px var(--accent); }
.ph-prev img { width: 100%; height: 100%; object-fit: cover; animation: snap-in .45s var(--spring); }
.ph-none { font-size: 28px; color: var(--grey); }
@keyframes snap-in { from { transform: scale(1.25); opacity: 0; } }
.photo-b { display: grid; gap: 6px; justify-items: start; }
.photo label.btn { cursor: pointer; }
.ph-prev { padding: 0; cursor: pointer; }
.photo-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.photo.is-compact { gap: 14px; padding: 12px 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--char-line); }
.photo.is-compact .ph-prev { width: 56px; height: 56px; box-shadow: 0 0 0 2px #17181A, 0 0 0 3.5px var(--accent); }
.photo.is-compact .ph-none { font-size: 22px; }
.photo-k { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; }
.photo-k .tag { font: 500 12px/1 var(--sans); padding: 4px 8px; border-radius: 999px; background: var(--char-3); color: var(--grey-2); }
/* framing a photo: the circle is exactly what the CV shows */
.photo-crop { display: grid; gap: 14px; justify-items: center; text-align: center; }
.photo-crop .ed-lede { margin: 0; max-width: 34ch; }
.crop-stage { position: relative; width: 240px; height: 240px; border-radius: 50%; overflow: hidden; background: #2A2B2F; cursor: grab; touch-action: none; user-select: none; outline-offset: 6px; }
.crop-stage.is-drag { cursor: grabbing; }
.crop-img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.crop-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--accent); pointer-events: none; }
.crop-z { display: flex; align-items: center; gap: 12px; width: min(260px, 100%); color: var(--grey-2); font-size: 20px; }
.crop-zoom { flex: 1; accent-color: var(--accent); min-height: 44px; }
.crop-on { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--grey-2); }
.crop-mini { position: relative; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: #2A2B2F; box-shadow: 0 0 0 2px #17181A, 0 0 0 3.5px var(--accent); }
.crop-mini img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; }
.crop-acts { display: grid; gap: 6px; width: min(320px, 100%); justify-items: center; }
.crop-cancel { min-height: 44px; }

/* review */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.check button { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border-radius: 14px; text-align: left; font-size: 16px; line-height: 1.4; box-shadow: inset 0 0 0 1px var(--char-line); }
.check.is-need button, .check.is-fit button { background: rgba(255,111,89,.08); box-shadow: inset 0 0 0 1px rgba(255,111,89,.35); }
.check button:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.check-m { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--warn); color: var(--char); font: 800 12px/1 var(--sans); }
.check.is-check .check-m { background: var(--char-3); color: var(--grey-2); }
.check-go { margin-left: auto; color: var(--grey); }
.all-good { margin: 0; padding: 14px 16px; border-radius: 14px; background: rgba(41,196,106,.1); box-shadow: inset 0 0 0 1px rgba(41,196,106,.35); font-size: 16.5px; line-height: 1.45; }
.all-good span { color: var(--green); font-weight: 800; }

/* the first minute */
.welcome { position: relative; z-index: 25; grid-column: 3; grid-row: 2 / 4; align-self: center; justify-self: center; width: calc(100% - 28px); display: grid; gap: 14px; padding: 30px 30px 28px; border-radius: 26px;
  background: rgba(23,24,26,.94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 50px 120px -30px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.07); animation: wl-in .55s var(--ease) both; }
@keyframes wl-in { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.welcome.is-out { animation: fade .3s reverse both; }
.wl-skip { position: absolute; top: 14px; right: 14px; min-height: 44px; padding: 0 16px; border-radius: 99px; font: 600 16px/1 var(--sans); color: var(--grey-2); }
.wl-skip:hover { color: var(--white); background: var(--char-3); }
.wl-k { margin: 0; font: 600 16px/1.2 var(--sans); color: var(--accent); }
.wl-h { margin: 0; font: 900 clamp(30px, 3.4vw, 40px)/1 var(--sans); letter-spacing: -.035em; text-transform: uppercase; text-wrap: balance; }
.wl-h span { color: var(--accent); }
.wl-h.is-sm { font-size: clamp(24px, 2.6vw, 30px); text-transform: none; letter-spacing: -.025em; }
.wl-l { margin-top: 6px; font: 600 17px/1.2 var(--sans); color: var(--white); }
.wl-row { display: flex; gap: 8px; }
.wl-row .input { flex: 1; min-width: 0; }
.wl-in { min-height: 54px; font-size: 18px; }
.wl-row .btn { min-height: 54px; flex: none; }
.wl-row .btn:disabled { opacity: .4; }
.wl-s { margin: 0; font-size: 17px; line-height: 1.5; color: var(--grey-2); }
.wl-link { justify-self: start; min-height: 44px; font: 600 16px/1 var(--sans); color: var(--grey-2); text-decoration: underline; text-underline-offset: 3px; }
.wl-btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* Desktop: guidance | the whole page | the editor, all visible at once. The page is sized to fit, so nothing
   has to step aside. Only small laptops (under 1200px) fold the steps away while an editor is open. */
@media (min-width: 900px) and (max-width: 1599px) {
  .ws { --rail: 296px; }
  .ws.has-panel { grid-template-columns: var(--rail) minmax(0, 1fr) 440px; }
  .ws-panel { width: 440px; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .ws.has-panel { grid-template-columns: 0px minmax(0, 1fr) 440px; }
  .ws.has-panel .ws-rail { visibility: hidden; }
}
/* The first minute gets its own column, so the page it's talking about stays in full view. */
@media (min-width: 900px) { .ws.is-welcome { grid-template-columns: var(--rail) minmax(0, 1fr) 480px; } }
@media (min-width: 900px) and (max-width: 1199px) { .ws.is-welcome { grid-template-columns: 0px minmax(0, 1fr) 480px; } .ws.is-welcome .ws-rail { visibility: hidden; } }
/* Both pages side by side when the screen is wide enough. */
.ws-pages.is-side { grid-auto-flow: column; justify-content: center; align-items: start; gap: 40px; }
/* Page size: its own strip under the canvas, so no toolbar ever sits on the CV. It only changes this preview, never the finished A4. */
.ws-zoom { grid-column: 2; grid-row: 3; z-index: 12; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 2px; padding: 0 10px; background: var(--char); border-top: 1px solid var(--char-line); }
.ws-zoom button { min-height: 44px; padding: 0 13px; border-radius: 99px; font: 600 16px/1 var(--sans); color: var(--grey-2); white-space: nowrap; }
.ws-zoom button:hover { color: var(--white); }
.ws-zoom button[aria-pressed="true"] { background: var(--white); color: var(--char); }
.ws-zoom button[hidden] { display: none; }
.ws-zoom-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--char-line); }
/* Larger than the canvas: the page scrolls both ways rather than being cropped by centring. */
.ws-pages.is-big { justify-items: start; width: max-content; min-width: 100%; }
/* What a part of the page is, before you click it (mouse only). */
.ws-tip { position: absolute; top: 0; left: 0; z-index: 6; pointer-events: none; padding: 7px 11px; border-radius: 8px; background: var(--accent); color: var(--char); font: 700 16px/1 var(--sans); white-space: nowrap;
  opacity: 0; transition: opacity .15s; box-shadow: 0 6px 18px -6px rgba(0,0,0,.6); }
.ws-tip.is-on { opacity: 1; }
/* Editor footer: the next step on the left, Done on the right. */
.ed-foot { justify-content: space-between; gap: 12px; align-items: center; }
.ed-next { flex: 1; min-width: 0; min-height: 48px; display: flex; align-items: center; gap: 6px; padding: 0 6px; border-radius: 10px; text-align: left; font: 600 16px/1.25 var(--sans); color: var(--grey-2); }
.ed-next:hover { color: var(--white); background: var(--char-3); }
.ed-next b { flex: none; color: var(--accent); }
.ed-next span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-next[hidden] { display: none; }
.ed-skip { flex: 1; min-width: 0; min-height: 48px; padding: 0 6px; border-radius: 10px; text-align: left; font: 500 15px/1.25 var(--sans); color: var(--grey-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--char-line); }
.ed-skip:hover { color: var(--white); background: var(--char-3); }
.ed-skip[hidden] { display: none; }

/* phones and small tablets */
.ws-mbar { display: none; }
@media (max-width: 899px) {
  .ws, .ws.has-panel { --top: calc(56px + var(--safe-t)); grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--top) minmax(0, 1fr) 54px calc(72px + var(--safe-b)); }
  .ws-top { padding: var(--safe-t) 8px 0 12px; gap: 6px; }
  .ws-rail { display: none; }
  .ws-tip { display: none; }
  .ws-zoom { grid-column: 1; }
  .ws-zoom [data-z="page"], .ws-zoom-sep { display: none; }
  .ws-zoom [aria-label^="Go to"] { display: none; }
  .ws.has-panel .ws-zoom { visibility: hidden; }
  .ws-canvas { grid-column: 1; padding: 16px 12px 24px; }
  .ws.has-panel .ws-pages { padding-bottom: 66vh; }
  .ws-saved { min-width: 36px; padding: 0 8px; justify-content: center; }
  .ws-saved-t { display: none; }
  .ws-pbtn, .ws-help { padding: 0 12px; margin-left: 0; }
  .ws-panel { position: fixed; left: 0; right: 0; bottom: var(--kb, 0px); width: auto; z-index: 60; max-height: min(60vh, calc(var(--vvh, 100dvh) * .66)); border: 0; border-radius: 24px 24px 0 0;
    box-shadow: 0 -24px 60px -10px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.06); transform: translateY(105%); transition: transform .42s var(--ease), visibility 0s .42s; }
  .ws-panel.is-open { transform: none; transition: transform .42s var(--ease); }
  .ed-grip { display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--char-line); margin: 10px auto 0; }
  .ed-head { padding: 12px 60px 4px 20px; }
  .ed-title { font-size: 25px; }
  .ed-lede { font-size: 17px; }
  .ed-x { top: 12px; right: 8px; }
  .ed-body { padding: 14px 20px 20px; }
  .ed-foot { padding: 10px 16px calc(10px + var(--safe-b)); }
  .ws-mbar { grid-row: 4; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 6px 6px calc(6px + var(--safe-b)); border-top: 1px solid var(--char-line); background: var(--char); z-index: 30; }
  .mb { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 58px; min-width: 0; border-radius: 12px; font: 600 14px/1.1 var(--sans); color: var(--grey-2); text-align: center; }
  .mb-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px #4a4b50; font-size: 13.5px; color: var(--grey-2); }
  .mb[aria-current="step"] { color: var(--white); }
  .mb[aria-current="step"] .mb-n { background: var(--accent); color: var(--char); box-shadow: none; }
  .mb-next { background: var(--accent); color: var(--char); }
  .mb-next .mb-n { box-shadow: none; color: var(--char); font-size: 15px; }
  .welcome { position: fixed; left: 10px; right: 10px; bottom: calc(76px + var(--safe-b)); width: auto; align-self: auto; justify-self: auto; padding: 24px 20px 20px; border-radius: 22px; }
  .wl-h { font-size: 27px; }
  .sq-edit { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  .sq-mini strong { font-size: 22px; } .sq-mini[data-fit="l"] strong { font-size: 18px; } .sq-mini[data-fit="m"] strong { font-size: 15px; }
}
@media (max-width: 480px) {
  .ws-pbtn { display: none; }   /* Download opens the exact preview on small phones */
  .st-brand span:not(.st-caret) { display: none; }
  .ws-icon { min-width: 36px; }
  .ws .ws-export { padding: 0 12px; font-size: 16px; }
  .ws-zoom button { padding: 0 12px; }
}
@media (max-width: 420px) {
  .two, .row-grid { grid-template-columns: 1fr; }
  .wl-row { flex-direction: column; }
}
.tool:disabled { opacity: .35; pointer-events: none; }

/* ═════════ THE HUMAN UPGRADE ═════════
   Interface copy reads at 15px and up: instructions 17–18, labels 16, secondary 15. Grey on charcoal is --grey-2 (9:1).
   Sentence case instead of tiny uppercase. The A4 page itself is untouched: it has a zoom instead. */
.ws .btn, .sheet .buff .btn { text-transform: none; letter-spacing: 0; font-size: 17px; }
.ws .btn.sm { font-size: 16px; }
.buff .btn[disabled] { opacity: .45; }

/* readiness */
.ready { width: 100%; flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; text-align: left; }
.ready:hover { background: var(--char-2); }
.rd-t { display: grid; gap: 2px; }
.rd-t b { font: 700 16.5px/1.2 var(--sans); }
.rd-t span { font-size: 16px; color: var(--grey-2); }
.rd-ring { width: 44px; height: 44px; flex: none; transform: rotate(-90deg); overflow: visible; }
.rd-ring circle { fill: none; stroke: #3c3d42; stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 22 78; transition: stroke .5s var(--ease), stroke-width .5s var(--spring); }
.rd-ring circle.is-started { stroke: #8f8d87; }
.rd-ring circle.is-review { stroke: var(--violet); }
.rd-ring circle.is-done { stroke: var(--accent); stroke-width: 5.5; }
.ready.is-pop .rd-ring, .ws-rd.is-pop .rd-ring { animation: rd-pop .6s var(--spring); }
@keyframes rd-pop { 0% { scale: 1; } 35% { scale: .86; } 100% { scale: 1; } }
.ws-rd { display: none; place-items: center; width: 44px; height: 44px; }
.ws-rd .rd-ring { width: 32px; height: 32px; }
.rd-list { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; gap: 4px; }
.rd-row { width: 100%; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 10px; border-radius: 12px; text-align: left; }
.rd-row:hover { background: var(--char-3); }
.rd-dot { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px #5a5b60; font: 800 14px/1 var(--sans); }
.rd-dot.is-done { background: var(--accent); color: var(--char); box-shadow: none; }
.rd-dot.is-review { background: var(--violet); box-shadow: none; }
.rd-dot.is-started { box-shadow: inset 0 0 0 2px var(--grey-2); }
.rd-n { display: grid; gap: 2px; }
.rd-n b { font: 700 17px/1.2 var(--sans); }
.rd-n span { font-size: 16px; color: var(--grey-2); }

/* completing a stage: it presses in, the tick settles, and the next thing lifts */
.stage.is-settled .stage-n, .mb.is-settled .mb-n { animation: tick-in .6s var(--spring); }
.stage.is-settled .stage-h, .mb.is-settled { animation: press .5s var(--ease); }
@keyframes tick-in { 0% { transform: scale(.4); opacity: .3; } 60% { transform: scale(1.12); } 100% { transform: none; } }
@keyframes press { 0% { transform: none; } 30% { transform: scale(.975); } 100% { transform: none; } }
.ws-next.is-nudge { animation: nudge .9s var(--ease); }
@keyframes nudge { 30% { transform: translateY(-3px); box-shadow: 0 16px 34px -10px rgba(255,229,0,.7); } }

/* more options */
.stage-more { margin-top: 2px; }
.stage-more summary { min-height: 44px; display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font: 600 16px/1.2 var(--sans); color: var(--grey-2); }
.stage-more summary::-webkit-details-marker { display: none; }
.stage-more summary::before { content: "›"; font-size: 20px; line-height: 1; transition: transform .2s var(--ease); }
.stage-more[open] summary::before { transform: rotate(90deg); }
.stage-more summary:hover { color: var(--white); }
.stage-sheet .stage-more { margin-top: 8px; }

/* help beside a concept */
.why { border-radius: 12px; background: var(--char-2); }
.why summary { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 8px 14px; cursor: pointer; list-style: none; font: 600 16px/1.3 var(--sans); }
.why summary::-webkit-details-marker { display: none; }
.why-m { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--char-3); color: var(--accent); font: 800 14px/1 var(--sans); }
.why p { margin: 0; padding: 0 14px 14px 48px; font-size: 16px; line-height: 1.5; color: var(--grey-2); }
.more-f summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font: 600 16px/1.3 var(--sans); color: var(--grey-2); text-decoration: underline; text-underline-offset: 3px; }
.more-f .field { margin-top: 10px; }

/* length is guidance, not a wall */
.soft { display: block; margin-top: 6px; font-size: 16px; line-height: 1.4; color: var(--accent); }
.soft[hidden] { display: none; }
.soft-b { font: 600 16px/1.3 var(--sans); color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.field > .hint { display: block; margin-top: 6px; }
.field > .tags { margin-bottom: 8px; }
.reuse { align-items: center; margin-top: 10px; }
.reuse > span { font-size: 16px; color: var(--grey-2); width: 100%; }

/* work and experience */
.work { padding: 0; }
.work-h { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 14px; cursor: pointer; list-style: none; }
.work-h::-webkit-details-marker { display: none; }
.work-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.work-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 16.5px/1.25 var(--sans); }
.work-t span { font-size: 16px; color: var(--grey-2); }
.work-t span:empty { display: none; }
.work-c { color: var(--grey-2); transition: transform .2s var(--ease); }
.work[open] .work-c { transform: rotate(180deg); }
.work-b { display: grid; gap: 16px; padding: 4px 14px 14px; }
.work-b .row-tools { justify-content: flex-start; flex-wrap: wrap; }
.kinds.is-sm .kind { min-height: 44px; padding: 0 13px; font-size: 16px; }
.check-l { display: flex; align-items: center; gap: 12px; min-height: 44px; font: 600 16.5px/1.2 var(--sans); cursor: pointer; }
.check-l input { width: 24px; height: 24px; margin: 0; accent-color: var(--accent); }

/* a long square */
.sq-split:empty { display: none; }
.sq-split p { margin: 0 0 8px; font-size: 16px; color: var(--grey-2); }
.sq-split-b { display: grid; gap: 4px; width: 100%; padding: 12px 14px; border-radius: 12px; text-align: left; box-shadow: inset 0 0 0 1.5px var(--accent); background: rgba(255,229,0,.06); }
.sq-split-b b { font: 800 21px/1.1 var(--sans); }
.sq-split-b span { font-size: 16px; color: var(--grey-2); }

/* tone: what changed */
.tone-report:empty { display: none; }
.tone-report { display: grid; gap: 10px; }
.tr-h { margin: 0; font: 700 17px/1.35 var(--sans); }
.tr-h span { color: var(--accent); }
.tr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tr-list button { width: 100%; display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px; text-align: left; background: var(--char-2); }
.tr-list button:hover { background: var(--char-3); }
.tr-list b { font: 600 16px/1.3 var(--sans); color: var(--grey-2); }
.tr-was { font-size: 16px; color: var(--grey-2); text-decoration: line-through; text-decoration-color: rgba(183,180,173,.5); }
.tr-now { font: 700 16px/1.3 var(--sans); color: var(--accent); }
@keyframes toned { from { background-color: rgba(255,229,0,.7); box-shadow: 0 0 0 7px rgba(255,229,0,.35); } }
@keyframes spark { 0% { opacity: 0; transform: scale(.4) rotate(-30deg); } 30% { opacity: 1; transform: scale(1.2); } 100% { opacity: .85; transform: none; } }
.welcome .tones { gap: 8px; }
.welcome .tone-c { padding: 12px 14px; }
.ex-what { margin: 0; font-size: 16.5px; line-height: 1.45; }

/* the writing assistant */
.buff-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.buff-b { min-height: 44px; padding: 0 14px; border-radius: 99px; background: rgba(255,229,0,.1); box-shadow: inset 0 0 0 1px rgba(255,229,0,.45); color: var(--accent); font: 800 16px/1 var(--sans); letter-spacing: .01em; transition: background .2s, transform .2s var(--spring); }
.buff-b:hover { background: rgba(255,229,0,.18); }
.buff-b:active { transform: scale(.97); }
.buff-back[hidden] { display: none; }
.buff { display: grid; gap: 14px; }
.buff-top { display: flex; align-items: center; gap: 14px; padding-right: 34px; }
.buff-top .ed-lede { margin-top: 6px; }
.buff-face { flex: none; display: block; width: 48px; }
.buff-face.is-sm { width: 30px; }
.buff-face svg { width: 100%; height: auto; overflow: visible; }
.buff-eyes { transform-box: fill-box; transform-origin: center; animation: blink 5.5s infinite; }
@keyframes blink { 0%, 95%, 100% { transform: none; } 97% { transform: scaleY(.1); } }
.buff-face.is-wave { animation: buff-in .6s var(--spring); }
@keyframes buff-in { from { transform: translateY(10px) rotate(-8deg); opacity: 0; } }
.buff-orig { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--char-2); font-size: 16.5px; line-height: 1.5; color: var(--grey-2); max-height: 150px; overflow: auto; }
.buff-status { margin: 0; min-height: 1.4em; font-size: 16px; line-height: 1.4; color: var(--grey-2); }
.buff-out[hidden] { display: none; }
.buff-foot { display: flex; gap: 10px; align-items: center; }
.buff-foot .btn { flex: 1; }
.buff-foot .co-cancel { flex: 1; font-size: 16px; color: var(--grey-2); }
.dump-out { display: grid; gap: 10px; }
.dump-out:empty { display: none; }
.dump-list { display: grid; gap: 6px; }
.dump-l { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; padding: 12px 14px; border-radius: 12px; background: var(--char-2); font-size: 16.5px; line-height: 1.4; cursor: pointer; }
.dump-l input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); }
.dump-l:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--accent); }
.disc { display: grid; gap: 12px; }
.disc-n { margin: 0; font-size: 16px; color: var(--grey-2); }
.disc-q { margin: 0; font: 700 23px/1.25 var(--sans); letter-spacing: -.01em; text-wrap: balance; }
.disc-b { display: flex; gap: 10px; margin-top: 6px; }
.disc-b .btn { flex: 1; }
.help-q { display: grid; gap: 6px; }
.help-b { min-height: 52px; padding: 10px 14px; border-radius: 12px; text-align: left; font: 600 16.5px/1.3 var(--sans); background: var(--char-2); }
.help-b:hover { background: var(--char-3); }
.help-a p { margin: 0 0 6px; font-size: 17px; line-height: 1.5; }
.help-a:empty { display: none; }
.help-left { list-style: none; margin: 0; padding: 0; display: grid; }
.nudge { display: grid; grid-template-columns: 30px 1fr; gap: 6px 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--char-3); animation: arrive .35s var(--ease) both; }
.nudge p { margin: 0; font-size: 16px; line-height: 1.4; }
.nudge-b { grid-column: 2; display: flex; gap: 4px; }
@media (prefers-reduced-motion: reduce) { .buff-eyes { animation: none; } }
@media (max-width: 480px) {
  .ws-top { gap: 2px; padding-right: 6px; }
  .ws-saved { min-width: 24px; padding: 0 4px; }
  .ws-rd { width: 40px; }
  .ws-actions { gap: 0; }
}
@media (max-width: 360px) { .ws-icon[aria-label="Redo"] { display: none; } .st-caret { display: none; } }
@media (max-width: 899px) { .ws-rd { display: grid; } .mb.is-done .mb-n { background: var(--green); color: var(--char); box-shadow: none; } }

/* ═════════ FOCUS MODE ═════════
   One dim, softly blurred layer per page, with holes for what's being edited. It sits beside the A4, outside it, ignores
   the pointer (so any quieter part is still one tap away) and is never in an export. Blur is optional; the dim isn't. */
.ws-pages .a4frame { position: relative; }
.fx-veil { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: rgba(11,12,13,.4); -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px); transition: opacity .42s var(--ease); }
.fx-veil.is-on { opacity: 1; }
.ws.no-blur .fx-veil { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(11,12,13,.62); }
.fx-ring { position: absolute; z-index: 4; pointer-events: none; opacity: 0; border-radius: 10px; box-shadow: 0 0 0 2px var(--accent), 0 0 0 7px rgba(255,229,0,.13); transition: opacity .3s var(--ease); }
.fx-ring.is-on { opacity: 1; }
.fx-ring::before { content: attr(data-tag); position: absolute; left: -2px; bottom: calc(100% + 8px); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 7px 12px; border-radius: 9px; background: var(--accent); color: var(--char); font: 700 16px/1.2 var(--sans); }
.ws.is-focus .ws-pages .hit.is-sel { outline-color: transparent; }
.ws.is-focus .ws-pages .num.hit.is-sel { outline: 2px solid var(--accent); outline-offset: 2px; }
.ws-canvas.is-framing { scrollbar-width: thin; }
.ws-whole { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; padding: 0 16px; background: var(--char-3); color: var(--white); font-weight: 700; }
.ws-whole[hidden] { display: none; }
.ws.has-panel .ws-zoom [aria-label^="Go to"], .ws.has-panel .ws-zoom-sep, .ws.is-focus .ws-zoom [data-z="page"] { display: none; }
/* Done: a tick settles on the finished part, then the page is whole again. */
.fx-done { position: absolute; z-index: 5; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; pointer-events: none; background: var(--accent); color: var(--char); font: 800 16px/1 var(--sans); animation: fx-tick 1.4s var(--ease) both; }
@keyframes fx-tick { 0% { transform: scale(.4); opacity: 0; } 18% { transform: scale(1.12); opacity: 1; } 30% { transform: none; } 75% { opacity: 1; } 100% { opacity: 0; } }
/* What to do next, on the page itself. */
.ws-pages .is-nextup { outline: 2px solid var(--accent) !important; outline-offset: 4px; animation: nextup 1.1s var(--ease) 2; }
@keyframes nextup { 50% { outline-color: rgba(255,229,0,.15); } }

/* What just changed: only what really did, glowing for a moment, with a small label saying what happened. */
.ws-pages [data-edit], .ws-pages [data-tone] { transition: outline-color .18s, background-color .9s var(--ease), box-shadow .9s var(--ease); }
.ws-pages .is-changed { background-color: rgba(255,229,0,.24); box-shadow: 0 0 0 4px rgba(255,229,0,.24); border-radius: 3px; transition: background-color .15s, box-shadow .15s; }
.ws-chg { position: absolute; top: 0; left: 0; z-index: 8; display: flex; align-items: center; gap: 2px; max-width: min(420px, calc(100% - 24px)); padding: 4px 4px 4px 14px; border-radius: 12px; background: var(--white); color: var(--char); font: 600 16px/1.3 var(--sans); box-shadow: 0 14px 30px -12px rgba(0,0,0,.8); opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.ws-chg.is-on { opacity: 1; visibility: visible; transition: opacity .2s; }
.ws-chg span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 6px; }
.ws-chg button { flex: none; min-height: 40px; padding: 0 10px; border-radius: 9px; font: 700 16px/1 var(--sans); color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.ws-chg button:hover { background: rgba(0,0,0,.07); }

/* Editing prompts never print, so they can be sized for the screen: they stay readable whatever the page's size. */
.ws-pages .ph { opacity: .95; }
.ws-pages .what-p .ph, .ws-pages .add-slot b { font-size: min(calc(16px / var(--z, 1)), 28px); line-height: 1.3; }
.ws-pages .num.is-add span { font-size: min(calc(15px / var(--z, 1)), 22px); line-height: 1.25; }
.ws-pages .og .ph { font-size: min(calc(13px / var(--z, 1)), 16px); }
.ws-pages .add-opt { font-size: min(calc(13px / var(--z, 1)), 18px); letter-spacing: 0; text-transform: none; font-family: var(--sans); }

/* ═════════ BUFF ═════════
   In the rail on desktop, above the bottom bar on phones: he never sits on the CV. Still unless something happens. */
.bd-brow { transform-box: fill-box; }
.bd-q { display: grid; gap: 4px; }
.bd-qb { min-height: 46px; padding: 8px 12px; border-radius: 11px; text-align: left; font: 600 16px/1.3 var(--sans); background: rgba(255,255,255,.05); }
.bd-qb:hover { background: rgba(255,255,255,.11); }
.bd-a { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--char); }
.bd-a:empty { display: none; }
.bd-a p { margin: 0; font-size: 16.5px; line-height: 1.45; }
.bd-a .bd-small { font-size: 16px; color: var(--grey-2); }
.bd-a .bd-eg-1 { padding-left: 10px; border-left: 2px solid var(--violet); }
.bd-eg { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 16px; line-height: 1.35; }
.bd-go { justify-self: start; min-height: 44px; font: 700 16px/1.25 var(--sans); color: var(--accent); text-align: left; text-decoration: underline; text-underline-offset: 3px; }
/* The walkthrough points with a calm ring. */
.is-spot { outline: 3px solid var(--accent) !important; outline-offset: 4px; }
@media (max-width: 899px) {
  .ws-zoom { grid-row: 3; justify-content: flex-start; padding: 0 6px; overflow-x: auto; scrollbar-width: none; }
  .ws-whole { display: none; }
}
@media (max-width: 374px) { .mb { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .fx-veil, .fx-ring, .ws-pages [data-edit], .ws-pages [data-tone], .ws-chg { transition: none; } .fx-done, .ws-pages .is-nextup { animation: none; } }
@media (forced-colors: active) { .fx-veil { display: none; } .fx-ring { outline: 3px solid Highlight; } }
@media print { .fx-veil, .fx-ring, .fx-done { display: none !important; } }

.ws .seg button { font-size: 16px; }
/* Very short screens (a phone on its side, or 200% browser zoom): the box being typed in comes first. */
@media (max-height: 520px) { .ed-kicker, .ed-lede { display: none; } .ed-head { padding-top: 10px; padding-bottom: 0; } .ed-title { font-size: 20px; } .ed-x { top: 2px; } .ed-body { padding-top: 8px; } }
@media (max-height: 520px) and (max-width: 899px) { .ws-panel { max-height: 72vh; } }
/* Phones: the mute button earns its place in the top bar (sound is on from the start); Redo steps aside for it. */
@media (max-width: 480px) { .ws-icon[aria-label="Redo"] { display: none; } .ws .top-sound { width: 40px; height: 40px; } .ws-rd { flex: none; } }
@media (max-width: 359px) { .ws-saved { display: none; } .ws .ws-export { padding: 0 10px; } }
@media (max-width: 359px) { .ws-top { padding-left: 6px; } .st-brand { min-width: 40px; } .ws-icon, .ws .top-sound, .ws-help { min-width: 38px; width: 38px; } .ws-rd { width: 38px; } .ws .ws-export { padding: 0 8px; } }

/* ═════════ ONE QUESTION, STACKED CHOICES ═════════
   Full-width cards in one column, the whole card clickable. Selected: yellow outline and a ticked radio.
   Suggested: a separate purple label. Cards grow as text wraps; nothing is clipped or truncated. */
.choices { display: grid; gap: 10px; }
.choice { width: 100%; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 18px; border-radius: 16px; text-align: left; background: rgba(255,255,255,.025); box-shadow: inset 0 0 0 1px var(--char-line); transition: box-shadow .18s, background .18s; }
.choice:hover { box-shadow: inset 0 0 0 1px var(--grey); }
.choice[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--accent); background: rgba(255,229,0,.07); }
.choice:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.choice-mark { width: 26px; height: 26px; margin-top: -1px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 2px #6b6c72; font: 800 15px/1 var(--sans); color: transparent; transition: background .18s, box-shadow .18s; }
.choice[aria-checked="true"] .choice-mark { background: var(--accent); box-shadow: none; color: var(--char); }
.choice-b { display: grid; gap: 6px; min-width: 0; }
.choice-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.choice-t { font: 800 18px/1.25 var(--sans); color: var(--white); letter-spacing: -.01em; }
.choice-badge { padding: 3px 10px; border-radius: 99px; font: 700 16px/1.25 var(--sans); color: #CFC6FF; box-shadow: inset 0 0 0 1.5px var(--violet); }
.choice-badge.is-quiet { color: var(--grey-2); box-shadow: inset 0 0 0 1px var(--char-line); }
.choice-d { font-size: 16px; line-height: 1.45; color: var(--grey-2); }
.choice-more { display: grid; gap: 0; }
.choice-more[hidden] { display: none; }
.choice-back { justify-self: start; }
.mod-pick .choices { padding: 0 12px 14px; }
/* The first-minute questions scroll inside their card on short screens, so Continue never sits on an option. */
.welcome { max-height: calc(100% - 28px); overflow-y: auto; overscroll-behavior: contain; }
.wl-cont { width: 100%; }
@media (max-width: 899px) { .welcome { max-height: calc(100dvh - var(--top) - 96px - var(--safe-b)); } }
/* Phones: while the first questions are up, they're the only thing asking for attention. */
@media (max-width: 899px) {
  .ws.is-welcome .ws-mbar, .ws.is-welcome .ws-zoom { visibility: hidden; }
  .ws.is-welcome .welcome { bottom: calc(10px + var(--safe-b)); max-height: calc(100dvh - var(--top) - 20px - var(--safe-b)); }
}
/* A question in the panel: Continue is the one way forward, and on phones the sheet is tall enough to show whole cards. */
.ed-skip[hidden] + .ed-next[hidden] + .ed-done { flex: 1; }
@media (max-width: 899px) { .ws-panel.is-choice { max-height: min(80vh, calc(var(--vvh, 100dvh) - var(--top) - 16px)); } .ws-panel.is-choice .ed-lede { font-size: 16px; } }
/* The kind of a square or an experience: the same cards, folded to one line once chosen. */
.kind-pick .choices { padding: 0 12px 14px; }
.row.work .kind-pick { margin-bottom: 4px; }
/* Narrower canvases (small laptops, or 150% browser zoom): the zoom strip keeps every size but tightens up; Buff keeps his face. */
@media (max-width: 1279px) and (min-width: 900px) { .ws-zoom button { padding: 0 10px; } .ws-zoom-sep { margin: 0 2px; } .ws-whole { padding: 0 12px; margin-right: 2px; } }

/* ═════════ WRITE IT OUT ═════════ */
.sq-fit { display: block; margin-top: 6px; font-size: 16px; line-height: 1.4; color: var(--warn); }
.sq-fit:empty { display: none; }
.sq-fields .hint { display: block; margin-top: 6px; }
.sq-more { margin-top: 6px; }
.sq-more[hidden] { display: none; }
.wr-draft { min-height: 210px; font-size: 17px; line-height: 1.5; }
.wr-count { display: block; margin-top: -10px; }
.wr-count:empty { display: none; }
.wr-back { justify-self: start; }
.wr-sug { font-size: 17px; }
.wr-fit { margin: 0; font-size: 16px; line-height: 1.4; }
.wr-fit.is-ok { color: var(--green); }
.wr-fit.is-over { color: var(--warn); }
/* The square exactly as it prints (same width, font and wrapping), enlarged so it can be read here. */
.wr-proof-box { display: grid; justify-items: center; padding: 18px 12px; border-radius: 14px; background: #0B0C0D; overflow: clip; }   /* clip, not hidden: a hidden box in the panel's grid may shrink below its content */
.wr-proof .wr-page { position: static; width: auto !important; height: auto !important; overflow: visible; background: none; }
.wr-proof .nums-row { margin: 0; }
/* The panel scrolls, so nothing in it ever needs to squash: every row keeps its full height (boxes and previews included). */
.ed-body { grid-auto-rows: max-content; }

/* ═════════ INK SETTLE ═════════
   One thin line under the line just written, after a pause. Beside the page, never in it: no layout space, never on the letters. */
.ink-line { position: absolute; z-index: 5; height: 1.5px; border-radius: 1px; pointer-events: none; opacity: 0; transform-origin: 0 50%; background: var(--accent); }
.ink-line.is-on { opacity: .42; }
.ink-line.on-paper { background: #B39500; }
.ink-line.on-paper.is-on { opacity: .5; }
@media print { .ink-line { display: none !important; } }
/* Reduced motion: the site-wide rule shortens transitions to .01ms on every property, which still draws one frame of each
   change. Mid-layout the CV briefly resets a height before measuring it, so on the pages transitions must be truly off. */
@media (prefers-reduced-motion: reduce) { .ws-pages, .ws-pages * { transition: none !important; } }

/* ── tooltips ── */
.bd-small { margin: 0; font-size: 16px; line-height: 1.45; color: var(--grey-2); }
.bd-pref { display: grid; gap: 2px; justify-items: start; min-height: 44px; padding: 10px 12px; border-radius: 11px; text-align: left; box-shadow: inset 0 0 0 1px var(--char-line); }
.bd-pref b { font: 600 16px/1.3 var(--sans); color: var(--white); }
.bd-pref span { font-size: 16px; line-height: 1.35; color: var(--grey-2); }
.bd-pref:hover { box-shadow: inset 0 0 0 1px var(--grey); }
.bd-tips { margin: 0; display: grid; gap: 2px; }
.bd-tips dt { font: 700 16px/1.3 var(--sans); color: var(--white); margin-top: 6px; }
.bd-tips dt:first-child { margin-top: 0; }
.bd-tips dd { margin: 0; font-size: 16px; line-height: 1.4; color: var(--grey-2); }
.tip { position: fixed; z-index: 400; max-width: 280px; padding: 9px 12px; border-radius: 10px; background: #F2F3F5; color: #121314; font: 500 16px/1.35 var(--sans); box-shadow: 0 12px 30px -10px rgba(0,0,0,.7); pointer-events: none; opacity: 0; transition: opacity .12s ease-out; }
.tip.is-on { opacity: 1; }
.tip[hidden] { display: none; }

/* ── the squares, explained where they're written ── */
.sq-intro { display: grid; gap: 6px; padding: 14px 16px; border-radius: 14px; background: rgba(255,229,0,.06); box-shadow: inset 0 0 0 1px rgba(255,229,0,.2); }
.sq-intro p { margin: 0; }
.sq-lead { font: 700 18px/1.3 var(--sans); color: var(--white); }
.sq-what { font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.88); }
.sq-stick { font-size: 16px; line-height: 1.5; color: var(--grey-2); }
.sq-intro .alt-b { margin-top: 2px; }
@media (max-height: 640px), (max-width: 899px) { .sq-stick { display: none; } }     /* phones: the lead and the rule are enough; examples carry the rest */
.sq-intro.is-compact .sq-what, .sq-intro.is-compact .sq-stick { display: none; }
.sq-intro.is-compact { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 10px 14px; }
.sq-intro.is-compact .alt-b { margin-top: 0; }
.sq-egs { display: grid; gap: 12px; padding: 14px; border-radius: 14px; background: #0B0C0D; box-shadow: inset 0 0 0 1px var(--char-line); outline: none; }
.sq-egs[hidden] { display: none; }
.sq-egs:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.sq-egs-k { margin: 0; font: 700 16px/1.3 var(--sans); color: var(--accent); }
.sq-egs .hint { font-size: 16px; }
.sq-eg { margin: 0; display: grid; gap: 8px; min-width: 0; }
/* the example tile: a CVBUFFED square sized for the panel (the CV's own .num is untouched) */
.sq-eg-tile { box-sizing: border-box; width: 100%; max-width: 360px; min-height: 148px; display: grid; align-content: space-between; gap: 18px; padding: 16px 18px 18px; border-radius: 6px; background: var(--char-2); box-shadow: inset 0 0 0 1px var(--char-line); }
.sq-eg-tile.is-first { background: var(--accent); box-shadow: none; }
.sq-eg-tile strong { display: block; font: 800 30px/1.02 var(--sans); letter-spacing: -.035em; color: var(--white); overflow-wrap: break-word; }
.sq-eg-tile span { display: block; font: 400 16px/1.45 var(--mono); color: var(--grey-2); overflow-wrap: break-word; }
.sq-eg-tile.is-first strong { color: var(--char); }
.sq-eg-tile.is-first span { color: rgba(18,19,20,.86); }
.sq-eg-more .sq-eg-tile { min-height: 132px; }
.sq-eg-more .sq-eg-tile strong { font-size: 26px; }
.sq-eg figcaption { font-size: 16px; line-height: 1.4; color: var(--grey-2); }
.sq-eg figcaption b { color: var(--white); font-weight: 600; }
.sq-eg-more { display: grid; gap: 16px 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.sq-eg-back { justify-self: start; }
.sq-eg-rest { display: grid; gap: 10px; }
.sq-fields { display: grid; gap: 14px; }
.sq-label { resize: none; overflow: hidden; }
.sq-count { display: block; margin-top: 6px; font: 600 16px/1.3 var(--sans); color: var(--grey-2); font-variant-numeric: tabular-nums; }
.sq-count:empty { display: none; }
.sq-count.is-over { color: var(--warn); }
.sq-block { display: block; margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(255,229,0,.07); box-shadow: inset 0 0 0 1px rgba(255,229,0,.32); }
.sq-block[hidden] { display: none; }
.sq-block p { margin: 0; font-size: 16px; line-height: 1.45; }
.sq-block-t { font-weight: 600; color: var(--white); }
.sq-block-kept { margin-top: 4px !important; color: var(--grey-2); }
.sq-block-b { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.sq-others:empty { display: none; }
.sq-others { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: rgba(255,111,89,.1); }
.sq-others p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--white); }
.sq-others-b { display: grid; justify-items: start; }
.ideas[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .tip { transition: none; } }
@media print { .bd, .gd, .tip, .sq-egs { display: none !important; } }
/* Phones: Help keeps its word; Redo steps aside (Undo stays; ⌘/Ctrl + Shift + Z still redoes), and the saved dot shows only if saving fails. */
@media (max-width: 420px) { .ws-icon[aria-label="Redo"] { display: none; } .ws-saved:not(.is-bad) { display: none; } .ws .ws-export { padding: 0 12px; } .ws .ws-icon { min-width: 36px; width: 36px; } }
/* Below 375px there's only room for the character; the button keeps its accessible name, “Help”. */
@media (max-width: 374px) { .ws-help { width: 40px; min-width: 40px; padding: 0; display: inline-grid; place-items: center; } .ws-help-t { display: none; } .ws-help::before { content: "?"; font: 700 19px/1 var(--sans); } }

/* ── the guide's appearances (src/studio/guide.js): one moment, one line, then gone ── */
.gd { position: relative; display: grid; grid-template-columns: var(--gd-art, 64px) minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 44px 12px 10px; border-radius: 16px; background: #1D1E21; box-shadow: inset 0 0 0 1px rgba(255,229,0,.26); outline: none; }
.gd.no-art { grid-template-columns: minmax(0, 1fr); padding-left: 16px; }
.gd.is-md { --gd-art: 118px; }
.gd.is-md .gd-art { margin-top: -38px; }     /* he stands on the bubble's edge, a little taller than it */
.gd:not(.is-md):not(.no-art) .gd-art { margin-top: -16px; }
.gd.is-help { padding: 16px 48px 16px 16px; gap: 12px; }
.gd-art { position: relative; width: var(--gd-art, 64px); aspect-ratio: 1122 / 1402; align-self: end; margin-bottom: -4px; transform-origin: 50% 100%; }
.gd[data-pose="lean"] .gd-art { transform: rotate(3deg); }     /* curious: leaning toward what he's offering */
.gd-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; filter: none; }
.gd-body { display: grid; gap: 8px; min-width: 0; }
.gd-k { margin: 0; font: 700 16px/1.25 var(--sans); color: var(--accent); }
.gd-line { margin: 0; font: 500 17px/1.4 var(--sans); color: var(--white); }
.gd-body .sq-block-kept { margin: 0; font-size: 16px; line-height: 1.45; color: var(--grey-2); }
.gd-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gd-no { min-height: 44px; padding: 0 12px; border-radius: 10px; font: 600 16px/1 var(--sans); color: var(--grey-2); }
.gd-no:hover { background: var(--char-3); color: var(--white); }
.gd-x { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: var(--grey-2); }
.gd-x:hover { background: var(--char-3); color: var(--white); }
.gd.is-pinned { position: fixed; z-index: 80; box-shadow: 0 24px 60px -16px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,229,0,.26); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.gd.is-help.is-pinned { box-shadow: 0 24px 60px -16px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.1); }
.gd.is-docked { position: fixed; z-index: 80; left: 12px; right: 12px; top: calc(62px + var(--safe-t, 0px)); }
.ed-body > .gd, .field + .gd { margin-top: 2px; }
.welcome > .gd.is-edge { margin: 40px -4px 14px; }
/* entrance: a small object settling into frame, the arm coming up once; then still */
.gd.is-in { animation: gd-in .24s cubic-bezier(.16, 1, .3, 1) both; }
.gd.is-in[data-pose="lean"] .gd-art { animation: gd-lean .55s cubic-bezier(.2,.75,.25,1) both; }
.gd.is-in[data-pose="nod"] .gd-art { animation: gd-nod .8s cubic-bezier(.3,.7,.3,1) both; }
.welcome > .gd.is-edge.is-in, .welcome > .gd.is-edge.is-in .gd-art { animation-delay: .5s; }
/* The words come into focus as he arrives (the motion library's blur-in): together, at once, never typed out. */
@keyframes gd-in { from { opacity: 0; filter: blur(6px); } }
@keyframes gd-lean { 0% { opacity: 0; transform: translateY(6px); } 55% { opacity: 1; transform: translateY(-1px); } 100% { transform: rotate(3deg); } }
@keyframes gd-nod { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: 1; transform: none; } 62% { transform: translateY(2px) rotate(2.5deg); } 82% { transform: translateY(-1px); } 100% { transform: none; } }
.gd.is-out { opacity: 0; transform: translateY(4px); transition: opacity .15s ease-in, transform .15s ease-in; }
@media (prefers-reduced-motion: reduce) { .gd, .gd *, .gd.is-out { animation: none !important; transition: none !important; } }
.field-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.field-top .sq-eg-open { min-height: 32px; font-size: 16px; }
.sq-block.has-guide { padding: 0; background: none; box-shadow: none; }

/* ── the bear's welcome (src/studio/welcome.js): one scene after purchase, then he's small ── */
.bw { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: max(24px, var(--safe-t, 0px)) 24px max(24px, var(--safe-b, 0px)); overflow: auto; background: var(--char); color: var(--white); }
.bw.is-out { opacity: 0; transition: opacity .24s ease-in; }
.bw-stage { width: 100%; max-width: 1120px; display: grid; grid-template-columns: minmax(0, clamp(300px, 34vw, 480px)) minmax(0, 560px); justify-content: center; align-items: center; gap: clamp(28px, 4.5vw, 72px); }
.bw-art { position: relative; justify-self: center; width: min(100%, calc((100dvh - 96px) * 1122 / 1402)); aspect-ratio: 1122 / 1402; }
.bw-art.is-missing { display: none; }
.bw-bear { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 96%; opacity: 0; user-select: none; -webkit-user-drag: none; }
.bw-floor { position: absolute; left: 16%; right: 24%; bottom: 0; height: 5%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), rgba(0,0,0,0)); opacity: 0; }
/* the entrance: he rises with a little weight, settles, then leans in toward you and holds */
.bw-art.is-in .bw-bear { animation: bw-enter 1.45s both; }
.bw-art.is-in .bw-floor { animation: bw-floor .5s ease-out .1s both; }
.bw-art.is-still .bw-bear { opacity: 1; transform: rotate(1.6deg); }
.bw-art.is-still .bw-floor { opacity: 1; }
@keyframes bw-enter {
  0% { opacity: 0; transform: translateY(20px) scale(.94); animation-timing-function: cubic-bezier(.2,.9,.25,1); }
  12.4% { opacity: 1; }
  27.6% { transform: translateY(-3px) scale(1.02, .99); animation-timing-function: cubic-bezier(.35,0,.25,1); }
  40% { opacity: 1; transform: translateY(1px) scale(.995, 1.005); animation-timing-function: ease-out; }
  51.7% { opacity: 1; transform: none; }
  65.5% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.3,.6,.3,1); }
  100% { opacity: 1; transform: rotate(1.6deg); }
}
@keyframes bw-floor { from { opacity: 0; transform: scaleX(.8); } }
.bw-copy { display: grid; gap: 18px; justify-items: start; }
.bw-k { margin: 0; font: 600 16px/1 var(--mono); letter-spacing: .12em; color: var(--accent); }
.bw-h { margin: 0; font: 900 clamp(40px, 5.4vw, 78px)/.94 var(--sans); letter-spacing: -.045em; text-transform: uppercase; text-wrap: balance; }
.bw-h span { color: var(--accent); }
.bw-line { margin: 4px 0 0; max-width: 30ch; padding-left: 14px; border-left: 3px solid var(--accent); font: 500 clamp(19px, 1.7vw, 23px)/1.42 var(--sans); color: rgba(255,255,255,.9); }
.bw-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; }
.bw-acts .btn { min-height: 56px; }
@media (max-width: 720px) {
  .bw { align-items: safe center; padding: 20px 16px max(20px, var(--safe-b, 0px)); }
  .bw-stage { grid-template-columns: minmax(0, 1fr); gap: 14px; text-align: center; }
  .bw-copy { display: contents; }
  .bw-k { order: 1; justify-self: center; }
  .bw-h { order: 2; font-size: clamp(32px, 10vw, 46px); }
  .bw-art { order: 3; width: min(64vw, calc((100dvh - 360px) * 1122 / 1402)); min-width: 140px; }
  .bw-line { order: 4; justify-self: center; text-align: left; }
  .bw-acts { order: 5; justify-content: center; width: 100%; }
  .bw-acts .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .bw-art .bw-bear, .bw-art .bw-floor { animation: none !important; } .bw-art .bw-bear { opacity: 1; transform: rotate(1.6deg); } .bw-art .bw-floor { opacity: 1; } .bw.is-out { transition: none; } }
@media print { .bw { display: none !important; } }
/* Very short screens (a laptop at 200% zoom, a phone on its side): side by side, so the heading and both actions stay in view */
@media (max-height: 520px) {
  .bw { align-items: center; padding: 12px 16px; }
  .bw-stage { grid-template-columns: auto minmax(0, 1fr); gap: 16px; text-align: left; }
  .bw-copy { display: grid; gap: 8px; }
  .bw-art { order: 0; min-width: 0; width: min(30vw, calc((100dvh - 32px) * 1122 / 1402)); }
  .bw-h { font-size: clamp(22px, 7vh, 36px); }
  .bw-line { font-size: 16px; margin: 0; justify-self: start; }
  .bw-k { justify-self: start; }
  .bw-acts { justify-content: flex-start; margin-top: 2px; gap: 8px; }
  .bw-acts .btn { flex: 0 0 auto; min-height: 44px; }
}
.add.is-first { border: 0; background: var(--accent); color: var(--char); }
.add.is-first:hover { background: #fff04d; }
.alt-row { display: grid; gap: 8px; justify-items: start; margin-top: 4px; }
/* Scrolled panels fade at the top edge, so a line half under the heading reads as “more above”, not as an overlap. */
.ed-body { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px); mask-image: linear-gradient(to bottom, transparent 0, #000 14px); }
/* “Show me around”: the film, in the welcome scene or on its own. The CV button sits under the picture from the first frame. */
.bw.is-film { align-items: safe center; }
.film { width: min(100%, 1040px, calc((100dvh - 230px) * 16 / 9)); min-width: min(100%, 300px); display: grid; gap: 14px; justify-items: stretch; }
.film-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 4px; }
.film-k { margin: 0; flex-basis: 100%; font-size: 13px; letter-spacing: .12em; color: var(--accent); text-transform: uppercase; }
.film-h { margin: 0; font: 900 clamp(24px, 3vw, 36px)/1 var(--sans); letter-spacing: -.03em; }
.film-note { margin: 0; font-size: 14px; color: rgba(255,255,255,.7); }
.film-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 24px 60px rgba(0,0,0,.45); }
.film-v { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.film-v::cue { font: 600 clamp(15px, 2.1vw, 22px)/1.35 var(--sans); background: rgba(0,0,0,.78); color: #fff; }
.film-play { position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; display: flex; gap: 10px; align-items: center; padding: 16px 26px; border: 0; border-radius: 999px; background: var(--accent); color: var(--char); font: 800 18px/1 var(--sans); cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.film-play[hidden] { display: none; }
.film-failed { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; padding: 24px; text-align: center; font: 600 18px/1.4 var(--sans); color: rgba(255,255,255,.85); background: #16171a; }
.film-failed[hidden] { display: none; }
.film-frame.is-failed .film-v { visibility: hidden; }
.film-frame.is-failed { aspect-ratio: auto; min-height: 120px; }
.film-acts { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.film-acts .btn { min-height: 52px; }
.film-again[hidden] { display: none; }
.film-tx { font-size: 15px; color: rgba(255,255,255,.85); margin-left: 6px; }
.film-tx[open] { flex-basis: 100%; margin-left: 0; }
.film-tx summary { cursor: pointer; width: max-content; padding: 6px 0; font-weight: 700; color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.film-tx ol { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 4px; max-width: 70ch; line-height: 1.45; }
.film-x { position: fixed; top: max(14px, var(--safe-t, 0px)); right: 14px; z-index: 1; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: var(--white); font-size: 26px; line-height: 1; cursor: pointer; }
.film-x:hover { background: rgba(255,255,255,.18); }
@media (max-width: 720px) {
  .film { width: 100%; gap: 12px; }
  .film-frame { border-radius: 10px; }
  .film-acts .btn { flex: 1 1 100%; }
}
@media (max-height: 520px) {
  .film { width: min(100%, calc((100dvh - 120px) * 16 / 9)); gap: 8px; }
  .film-h, .film-note { display: none; }
  .film-acts .btn { min-height: 44px; flex: 0 0 auto; }
}
/* The phone cut is 9:16: as tall as the screen allows, with “Start my CV” still in view below it. */
.film.is-phone { justify-items: center; }
.film.is-phone .film-head, .film.is-phone .film-acts, .film.is-phone .film-tx { justify-self: stretch; }
.film.is-phone .film-frame { aspect-ratio: 9 / 16; width: min(100%, calc((100dvh - 214px) * 9 / 16)); min-width: 200px; }
.film.is-phone .film-v::cue { font-size: 15px; }

/* ── Preview's optional suggestion (src/studio/ideas.js) and the idle moment over the workspace ── */
.ws-idea:empty { display: none; }
.ws-nextup > .ws-idea { margin: 0 0 16px; }       /* in the sticky foot of the sidebar, just above "Next up": always in view */
.ws-idea.is-foot { width: min(560px, 100%); margin: 28px auto 0; padding: 0; }
.gd.is-idea { --gd-art: 56px; grid-template-columns: var(--gd-art) minmax(0, 1fr); align-items: start; padding: 14px 40px 14px 10px; }
.gd.is-idea .gd-art { margin-top: -18px; align-self: start; }
.gd.is-idea .gd-k { font-size: 15.5px; color: var(--white); }
.gd.is-idea .gd-line { font: 400 14.5px/1.45 var(--sans); color: var(--grey-2); }
.gd.is-idea .gd-acts { margin-left: calc(-1 * (var(--gd-art) + 12px)); margin-right: -26px; }
.gd.is-idea.no-art .gd-acts { margin-left: 0; }
.gd.is-idea .gd-acts { gap: 4px; }
.gd.is-idea .gd-no { padding: 0 10px; font-size: 15px; }
.bd-ideas { flex: 1 1 100%; display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.bd-idea { width: 100%; min-height: 46px; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 11px; text-align: left; font: 600 15px/1.3 var(--sans); background: rgba(255,255,255,.05); color: var(--white); }
.bd-idea:hover { background: rgba(255,255,255,.11); }
.bd-idea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bd-idea > span:first-child { flex: 1; }
.bd-idea-a { color: var(--accent); }
.gd.is-centre { box-shadow: 0 28px 70px -18px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,229,0,.3); }
/* The one small question, when an idea opened this part. */
.idea-ask { margin: 0 0 18px; padding: 14px 16px; border-radius: 12px; background: rgba(255,229,0,.07); box-shadow: inset 0 0 0 1px rgba(255,229,0,.28); }
.idea-k { margin: 0; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.idea-q { margin: 8px 0 0; font: 700 19px/1.3 var(--sans); color: var(--white); }
.idea-h { margin: 6px 0 0; font: 400 14px/1.4 var(--sans); color: var(--grey-2); }

/* ── The idle card: its own surface, centred (assistant.js overlay). Opaque, bordered, everything inside it. ── */
.gd.is-overlay { --gd-art: 112px; position: fixed; z-index: 80; grid-template-columns: var(--gd-art) minmax(0, 1fr); gap: 20px; align-items: center;
  padding: 24px 24px 22px; border-radius: 20px; background: #1C1D20; border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.92), inset 0 0 0 1px rgba(255,229,0,.10); max-height: calc(100dvh - 24px); overflow-y: auto; }
.gd.is-overlay:not(.no-art) .gd-art { margin: 0; align-self: center; }   /* inside the card, never standing on its edge */
.gd.is-overlay[data-pose="lean"] .gd-art { transform: rotate(2deg); }
.gd.is-overlay .gd-body { gap: 14px; }
.gd.is-overlay .gd-line { padding-right: 36px; font: 700 20px/1.3 var(--sans); text-wrap: balance; }   /* clear of the close button */
.gd.is-overlay .gd-x { top: 12px; right: 12px; }
.gd.is-overlay .gd-acts { gap: 8px; }
.gd.is-overlay .gd-eg { display: grid; gap: 6px; padding-right: 36px; }
.gd.is-overlay .gd-eg-k { margin: 0; font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.gd.is-overlay .gd-eg-t { margin: 0; font: 600 17px/1.4 var(--sans); color: var(--white); overflow-wrap: anywhere; }
.gd.is-overlay .bd-small { margin: 0; }
/* Narrow: a compact card; the bear stays recognisable, the actions stack full width under the words. */
.gd.is-overlay.is-narrow { --gd-art: 68px; gap: 12px; padding: 14px 14px 12px; align-items: center; }
.gd.is-overlay.is-narrow .gd-acts { gap: 4px; }
.gd.is-overlay.is-narrow .gd-no { min-height: 44px; }
.gd.is-overlay.is-narrow .gd-body { display: contents; }          /* the bear and the words share a row; the actions get their own */
.gd.is-overlay.is-narrow .gd-line { font-size: 18px; }
.gd.is-overlay.is-narrow .gd-acts { grid-column: 1 / -1; flex-direction: column; align-items: stretch; }
.gd.is-overlay.is-narrow .gd-acts > * { width: 100%; justify-content: center; }

/* ═════════ BUFF IT UP: the inline panel (13 Nov) ═════════
   Sits right under the field it helps with, so the draft stays in view. Yellow marks the one likely next step. */
.bp { margin-top: 10px; padding: 14px 16px 16px; border-radius: 14px; background: var(--char-2); box-shadow: inset 0 0 0 1px rgba(255,229,0,.28); display: grid; gap: 12px; min-width: 0; overflow-wrap: anywhere; }
.bp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bp-h { margin: 0; font: 800 18px/1.2 var(--sans); color: var(--white); }
.bp-x { flex: none; width: 44px; height: 44px; margin: -10px -10px -10px 0; border-radius: 50%; font-size: 24px; line-height: 1; color: var(--grey-2); }
.bp-x:hover { background: var(--char-3); color: var(--white); }
.bp-lede, .bp-small, .bp-note { margin: 0; font-size: 16px; line-height: 1.45; color: var(--grey-2); }
.bp-small { font-size: 15px; }
.bp-note { padding-left: 12px; border-left: 2px solid var(--violet); }
.bp-frag { font-family: var(--mono); font-size: 14.5px; color: var(--white); quotes: "“" "”"; }
.bp-q { margin: 0; font: 700 17px/1.35 var(--sans); color: var(--white); }
.bp-eg { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--char); font-size: 16px; line-height: 1.45; color: var(--grey-2); }
.bp-eg b { color: var(--white); font-weight: 700; }
.bp-k { display: block; margin: 0 0 -6px; font: 600 16px/1.25 var(--sans); color: var(--white); }
.bp-orig { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--char); font-size: 16px; line-height: 1.45; color: var(--grey-2); max-height: 132px; overflow: auto; white-space: pre-wrap; }
.bp .input { width: 100%; min-height: 0; }
.bp-acts, .bp-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bp-act { min-height: 44px; padding: 0 16px; border-radius: 99px; box-shadow: inset 0 0 0 1px #4a4b51; font: 600 16px/1.2 var(--sans); color: var(--white); transition: background .15s, box-shadow .15s, transform .2s var(--spring); }
.bp-act:hover { background: var(--char-3); box-shadow: inset 0 0 0 1px var(--grey); }
.bp-act:active { transform: scale(.97); }
.ws .bp .btn.sm.bp-main { min-height: 44px; padding: 0 18px; font-size: 16px; }
.bp .btn[disabled] { opacity: 1; background: var(--char-3); color: #8f8d87; box-shadow: none; }
.buff-orig { overflow-wrap: anywhere; }
/* Write it out: pick your strongest line */
.wr-pick { display: grid; gap: 8px; }
.wr-pick .field-l { margin: 0; }
.wr-lines { display: grid; gap: 6px; }
.wr-line { width: 100%; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .bp-act, .bp-act:active { transition: none; transform: none; } }

/* ═════════ Tell us what you do → Pick what to keep (13 Nov) ═════════ */
.dump-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dump-tools .btn { flex: 1 1 220px; }
.dk { display: grid; gap: 0; border-radius: 12px; background: var(--char-3); overflow-wrap: anywhere; }
.dk .dump-l, .dk-l { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; padding: 12px 14px; font-size: 16.5px; line-height: 1.4; cursor: pointer; }
.dk-l input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); }
.dk.is-on { box-shadow: inset 0 0 0 1.5px var(--accent); }
.dk-ed { display: grid; gap: 12px; padding: 0 14px 14px; }
.dk-ed[hidden] { display: none; }
.dk-orig { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--char); font-size: 15.5px; line-height: 1.45; color: var(--grey-2); }
.dk-orig b { color: var(--white); }
.dk-note { margin: 0; padding-left: 12px; border-left: 2px solid var(--violet); font-size: 15.5px; line-height: 1.45; color: var(--grey-2); }
.dk-msg { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--grey-2); }
.dk-msg:empty { display: none; }
.dk-msg.is-bad { color: #ffb4a8; }
.dk-prompt { display: grid; gap: 6px; }
.dk-ed select.input { appearance: auto; }
.dk-proof { overflow: hidden; }
.dk-fin { margin: 0; }
.dump-foot { display: grid; gap: 10px; padding: 14px 0 2px; margin-top: 4px; border-top: 1px solid var(--char-line); }
.dump .btn[disabled] { opacity: 1; background: var(--char-3); color: #8f8d87; box-shadow: none; }
.dump-foot[hidden] { display: none; }
.dump-adds { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 15.5px; line-height: 1.45; color: var(--grey-2); overflow-wrap: anywhere; }
.dump-adds b { color: var(--white); }
.dump-foot .co-cancel { min-height: 44px; font-size: 16px; color: var(--grey-2); }
.bp-act[hidden] { display: none; }

/* ═════════ How to, at the point of use (13 Nov) ═════════ */
.ht { display: grid; gap: 8px; margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: var(--char-2); box-shadow: inset 3px 0 0 var(--accent); }
.ht-do { margin: 0; font: 600 16.5px/1.4 var(--sans); color: var(--white); }
.ht-row { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.ht-b { min-height: 40px; padding: 0 2px; font: 600 16px/1.3 var(--sans); color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-align: left; }
.ht-b:hover { color: var(--white); }
.ht-egbox[hidden] { display: none; }
.ht-eg { display: grid; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--char); }
.ht-eg p { margin: 0; display: grid; gap: 2px; font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.ht-k { font: 500 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--grey-2); }
.ht-from { color: var(--grey-2); }
.ht-to { color: var(--white); }
.is-short .short-v { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; }
.short-failed { display: grid; gap: 10px; padding: 16px; border-radius: 12px; background: var(--char-2); }
.short-failed[hidden] { display: none; }
.short-failed p { margin: 0; color: var(--white); }
/* the short, offered at a stuck moment: a clear secondary action beside the main one */
.gd-watch { min-height: 44px; padding: 0 12px; border-radius: 10px; font: 600 16px/1.2 var(--sans); color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-align: left; }
.gd-watch:hover { background: var(--char-3); }