/* The home page: one box, like a search engine. Loaded after home.css, whose .ap tokens, pandas
   and sample styles (.tr-*) it reuses. Asking moves the box up and shows the answer under it. */

.search-page { overflow-x: clip; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
.s-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px clamp(16px, 3vw, 28px); font-size: 14px; }
.s-top nav, .s-top-end { display: flex; align-items: center; gap: 4px; }
.s-top a { padding: 7px 12px; border-radius: 999px; color: var(--ink-2); }
.s-top a:hover { background: var(--hover); color: var(--ink); }
.s-top .s-pill { background: var(--ink); color: #fff; }
.s-top .s-pill:hover { background: #33332f; color: #fff; }

/* The sidebar, like a chat assistant's: docked on a wide screen (it pushes the page over), a drawer otherwise */
.s-side { position: fixed; z-index: 70; top: 12px; bottom: 12px; left: 12px; width: 264px; display: flex; flex-direction: column; gap: 2px; padding: 12px 10px 12px; background: #fffdf8cc; -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); border-radius: 24px; box-shadow: inset 0 0 0 1px #ffffff99, 0 0 0 1px #0000000d, 0 1px 2px #0000000a, 0 24px 60px -30px #0000004d; overflow-y: auto; overscroll-behavior: contain; transform: translateX(-100%); opacity: 0; visibility: hidden; transition: transform .32s var(--a-ease), opacity .32s var(--a-ease), visibility .32s, background-color .8s var(--a-ease); }
.side-open .s-side { transform: none; opacity: 1; visibility: visible; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .s-side, .has-office .s-side { background: #fffdf8; } }
.s-side { transform: translateX(calc(-100% - 24px)); }
.s-side-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 8px 6px; }
.s-side-logo { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.s-side-logo > span:last-child span { font-weight: 400; }
.s-side-logo .pd { width: 26px; }
.s-side-x, .s-side-btn { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 10px; background: none; color: var(--ink-2); }
.s-side-x:hover, .s-side-btn:hover { background: var(--hover); color: var(--ink); }
.s-side-x svg, .s-side-btn svg { width: 22px; height: 22px; }
.s-side-new { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border: 0; border-radius: 12px; background: none; font-size: 14.5px; font-weight: 600; color: var(--ink); text-align: left; }
.s-side-new:hover { background: var(--hover); }
.s-side-new svg { width: 20px; height: 20px; }
.s-side-k { margin: 14px 0 4px; padding: 0 10px; font-size: 12px; font-weight: 600; color: var(--ink-4); }
.s-side-list { display: grid; gap: 1px; }
.s-side-list > button, .s-side-list > a { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 6px 10px; border: 0; border-radius: 12px; background: none; font-size: 14px; color: var(--ink); text-align: left; min-width: 0; }
.s-side-list > button:hover, .s-side-list > a:hover { background: var(--hover); }
/* What's open: a soft tint, the words stay dark, the icon turns orange */
.s-side-list > [aria-current="true"] { background: #f3eee3; color: var(--ink); }
.s-side-list > [aria-current="true"] b { font-weight: 600; }
.s-side-list > [aria-current="true"] > svg:first-child { color: #f0883e; }
.s-chev { flex: none; width: 16px !important; height: 16px !important; margin-left: auto; color: var(--ink-4) !important; transition: transform .2s var(--a-ease); }
.s-paper[aria-expanded="false"] .s-chev { transform: rotate(-90deg); }
.s-side-list i { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--surface-2); }
.s-side-list i .pd { width: 22px; }
.s-side-list span { display: grid; min-width: 0; }
.s-side-list b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-side-list small { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-side-list .s-side-t { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-side-list svg { flex: none; width: 18px; height: 18px; color: var(--ink-3); }
/* Headquarters: a room per department, each panda at a desk. Only real work moves (working = a
   running job); idle pandas sit still, ready. */
.s-hq-btn[aria-current="true"] { background: #f3eee3; }
.s-hq-btn[aria-current="true"] svg { color: #f0883e; }
.s-hq-btn small { display: flex !important; align-items: center; gap: 5px; }
/* The sidebar, kept simple: one line per service, Headquarters as one button */
.s-compact > button, .s-compact > a:not(.s-side-more) { min-height: 34px; padding: 4px 10px; }
.s-compact i { width: 24px !important; height: 24px !important; border-radius: 8px !important; }
.s-compact i .pd { width: 19px !important; }
.s-hq-btn { height: auto !important; min-height: 46px; margin-top: 2px; }
.s-hq-btn svg { flex: none; width: 20px; height: 20px; }
.s-hq-btn span { display: grid; min-width: 0; }
.s-hq-btn b { font-weight: 600; }
.s-hq-btn small { display: flex !important; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 400; color: var(--ink-3); }
/* Headquarters: the isometric office on a night stage, like the app's */
@keyframes hq-type { to { transform: translateY(-1.5px) rotate(-4deg); } }
.s-hqv-hire { justify-self: start; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff !important; font-size: 14px; font-weight: 600; }
/* Headquarters opens inside the office (office-zoom), so the hero fades like it does there */
.s-hqv-empty, .s-hqv-note { font-size: 13.5px; color: var(--ink-3); }
.s-hqv-note { max-width: 640px; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .s-hqv-desk.working > i .pd { animation: none; } }
.s-desk { position: relative; width: 22px; height: 22px; }
.s-desk .pd { width: 22px; }
.s-desk.working .pd { animation: s-type .7s ease-in-out infinite alternate; }
.s-desk.working::after { content: ""; position: absolute; right: -1px; bottom: 0; width: 7px; height: 7px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 1.5px #fff; }
.s-desk.waiting::after { content: ""; position: absolute; right: -1px; bottom: 0; width: 7px; height: 7px; border-radius: 50%; background: #ff9f0a; box-shadow: 0 0 0 1.5px #fff; }
@keyframes s-type { to { transform: translateY(-2px) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .s-desk.working .pd { animation: none; } }
.s-dot { flex: none; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #c7c2b6; }
.s-dot.working { background: #34c759; box-shadow: 0 0 0 3px #34c75926; }
.s-dot.waiting { background: #ff9f0a; }
/* Your pandas, by department */
.s-dept summary { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; list-style: none; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-2); border-radius: 9px; }
.s-dept summary::-webkit-details-marker { display: none; }
.s-dept summary:hover { background: var(--hover); }
.s-dept summary i { width: 8px; height: 8px; border-radius: 3px; }
.s-dept summary em { margin-left: auto; font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--ink-4); }
.s-pandas .s-dept a { display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 14px; border-radius: 12px; font-size: 13.5px; color: var(--ink); }
.s-pandas .s-dept a:hover { background: var(--hover); }
.s-pandas .s-dept a > i { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #fff; }
.s-pandas .s-dept a > i .pd { width: 21px; }
.s-pandas .s-dept a > span { display: grid; min-width: 0; flex: 1; }
.s-pandas b { font-weight: 500; }
.s-pandas small { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-pandas .s-model { color: #8b5cf6; }
.s-side-more { display: block !important; min-height: 0 !important; padding: 6px 10px !important; font-size: 12.5px !important; font-weight: 600; color: var(--ink-3) !important; }
.s-side-more:hover { color: var(--ink) !important; }
/* Deliverables: how the results come back */
.s-cat { font-style: normal; font-size: 15px; background: #fff !important; }
#sideDeliver a > em { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--ink-4); }

/* A project, and when it's open, its folders: Research, Insights, Files, Papers */
.s-side-list > .s-paper[aria-current="true"] { border-radius: 12px 12px 4px 4px; }
.s-folders { display: grid; gap: 1px; margin: 2px 0 8px 18px; padding-left: 8px; border-left: 1.5px solid #d9d3c5; }
.s-fold summary { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border-radius: 10px; list-style: none; cursor: pointer; font-size: 13.5px; color: var(--ink); }
.s-fold summary::-webkit-details-marker { display: none; }
.s-fold summary:hover { background: var(--hover); }
.s-fold summary svg { flex: none; width: 17px; height: 17px; color: var(--ink-3); }
.s-fold[open] summary svg { color: #f0883e; }
.s-fold summary b { flex: 1; font-weight: 500; }
.s-fold summary em { font-style: normal; font-size: 11.5px; color: var(--ink-4); min-width: 18px; text-align: right; }
.s-fold-in { display: grid; gap: 1px; padding: 2px 0 6px 10px; }
.s-fold-in p { padding: 4px 8px; font-size: 12.5px; line-height: 1.4; color: var(--ink-4); }
.s-fold-in > a, .s-fold-in > button, .s-fold-ver > button, .s-fold-file { display: grid; gap: 1px; padding: 6px 8px; border: 0; border-radius: 9px; background: none; text-align: left; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); overflow-wrap: anywhere; }
.s-fold-in > a:hover, .s-fold-in > button:hover, .s-fold-ver > button:hover { background: var(--hover); color: var(--ink); }
.s-fold-in small { font-size: 11px; color: var(--ink-4); }
.s-fold-in > button { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.s-fold-in > button small { display: block; }
.s-fold-file { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.s-fold-file i { white-space: nowrap; padding: 1px 5px; border-radius: 5px; background: #fff; font-size: 9.5px; font-style: normal; font-weight: 700; color: var(--ink-3); }
.s-fold-file b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-fold-ver { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; border-radius: 9px; }
.s-fold-ver[aria-current="true"] { background: #fff; box-shadow: 0 1px 2px #0000000f; }
.s-fold-ver > span { display: flex; gap: 3px; padding: 6px 4px 0 0; }
.s-fold-ver > span button { height: 20px; padding: 0 6px; border: 0; border-radius: 6px; background: var(--surface-2); font-size: 9.5px; font-weight: 700; letter-spacing: .03em; color: var(--ink-3); }
.s-fold-ver > span button:hover { background: var(--ink); color: #fff; }
.s-side-empty { padding: 4px 10px; font-size: 13px; line-height: 1.4; color: var(--ink-4); }
.s-side-foot { margin-top: auto; padding: 14px 10px 0; display: grid; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
.s-side-foot p:empty { display: none; }
.s-side-foot b { color: var(--ink); }
.s-side-foot nav { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.s-side-foot a { color: var(--ink-3); }
.s-side-foot a:hover { color: var(--ink); }
.s-scrim { position: fixed; inset: 0; z-index: 69; background: #0000004d; opacity: 0; pointer-events: none; transition: opacity .28s; }
@media (min-width: 1100px) {
  .search-page { transition: padding-left .28s var(--a-ease); }
  .side-open.search-page { padding-left: 288px; }
  .side-open .s-side-btn { display: none; }
  .side-open .s-top { min-height: 0; padding: 10px 0 0; }
}
@media (max-width: 1099px) {
  .side-open .s-scrim { opacity: 1; pointer-events: auto; }
  .side-open { overflow: hidden; }
}
.s-top nav { display: none; }
.s-top { min-height: 60px; }
/* The account, at the bottom of the sidebar */
.s-acct { position: relative; display: flex; gap: 6px; }
.s-acct-in, .s-acct-up { flex: 1; display: grid; place-items: center; height: 38px; border-radius: 12px; font-size: 14px; font-weight: 600; }
.s-acct-in { background: var(--surface-2); color: var(--ink); }
.s-acct-up { background: var(--ink); color: #fff !important; }
.s-acct .s-me { width: 100%; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 10px 0 6px; border: 0; border-radius: 14px; background: none; text-align: left; font-size: 14px; color: var(--ink); }
.s-acct .s-me:hover, .s-acct .s-me[aria-expanded="true"] { background: var(--hover); }
.s-acct .s-me span { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; }
.s-acct .s-me b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.s-acct .s-me b small { display: block; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 400; color: var(--ink-3); }
.s-acct .s-me b small:empty { display: none; }
.s-acct .s-me svg { flex: none; width: 16px; height: 16px; color: var(--ink-3); }
.s-me-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 5; display: grid; gap: 2px; padding: 6px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 .5px #0000001a, 0 16px 40px -14px #00000059; animation: pp-pop .18s var(--a-ease); }
.s-me-menu[hidden] { display: none; }
.s-me-menu p { padding: 6px 10px 8px; font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
.s-me-menu a, .s-me-menu button { display: block; padding: 9px 10px; border: 0; border-radius: 10px; background: none; text-align: left; font-size: 14px; color: var(--ink) !important; }
.s-me-menu a:hover, .s-me-menu button:hover { background: var(--hover); }
.s-me-menu #meOut { color: #c0392b !important; }
/* Your companies: the one you're working in is checked */
.s-me-orgs { display: grid; gap: 2px; padding-bottom: 2px; margin-bottom: 2px; border-bottom: 1px solid var(--line); }
.s-me-menu .s-me-k { padding: 6px 10px 2px; margin: 0; border: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.s-me-menu [role="menuitemradio"] { display: flex; align-items: center; justify-content: space-between; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-me-menu [role="menuitemradio"][aria-checked="true"]::after { content: "✓"; font-weight: 700; color: var(--bamboo); }

.s-main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 0 16px 48px; }
.s-hero { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; padding-top: clamp(14vh, 22vh, 220px); transition: padding .6s var(--a-ease); }
.asked .s-hero { padding-top: 28px; }
.s-logo { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 30px; transition: transform .6s var(--a-ease), margin .6s var(--a-ease); }
.s-logo-pd .pd { width: clamp(64px, 9vw, 88px); }
.s-word { font-size: clamp(44px, 7vw, 68px); font-weight: 700; letter-spacing: -.045em; color: var(--ink); }
.s-word span { font-weight: 400; }
.asked .s-logo { transform: scale(.62); margin-bottom: 6px; }

.s-box { position: relative; width: 100%; display: grid; gap: 4px; padding: 14px 12px 10px 18px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 28px; box-shadow: 0 1px 2px #0000000d, 0 10px 30px -18px #00000040; transition: box-shadow .25s, border-color .25s; }
.s-box:hover { box-shadow: 0 1px 3px #00000014, 0 14px 36px -18px #00000055; }
.s-box:focus-within { border-color: var(--ink-4); box-shadow: 0 1px 3px #00000014, 0 18px 44px -18px #00000066; }
.s-glass { display: none; width: 20px; height: 20px; color: var(--ink-4); flex: none; }
/* The composer, like Claude's: what you add sits in the box, the text grows, the tools sit underneath */
.s-box textarea { width: 100%; min-height: 30px; max-height: 240px; padding: 4px 2px; border: 0; outline: 0; resize: none; background: transparent; font: inherit; font-size: 18px; line-height: 1.45; color: var(--ink); overflow-y: hidden; }
.s-box textarea::placeholder { color: var(--ink-4); }
.s-box-bar { display: flex; align-items: center; gap: 8px; }
.s-box-hint { flex: 1; font-size: 12.5px; color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-box .s-attach { width: 36px; height: 36px; margin-left: -6px; border: 1px solid var(--line-2); }
.s-box .s-go { width: 38px; height: 38px; }
.s-plus { position: static; }
.s-plus-menu { position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 30; padding: 8px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px #0000000f, 0 30px 70px -20px #00000059; max-height: min(60vh, 460px); overflow: auto; animation: s-menu .3s var(--a-ease); }
@keyframes s-menu { from { opacity: 0; transform: translateY(-6px); filter: blur(4px); } }
.s-plus-menu[hidden], .s-plus-main[hidden], .s-plus-projects[hidden] { display: none; }
.s-plus-main, .s-plus-projects { display: grid; gap: 2px; }
.s-plus-menu button[role="menuitem"], .s-plus-back { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 6px 12px; border: 0; border-radius: 14px; background: none; text-align: left; color: var(--ink); min-width: 0; }
.s-plus-menu button[role="menuitem"]:hover, .s-plus-menu button[role="menuitem"]:focus-visible, .s-plus-back:hover { background: #0000000a; }
.s-plus-menu i { flex: none; width: 24px; display: grid; place-items: center; font-style: normal; color: var(--ink-2); }
.s-plus-menu i svg { width: 20px; height: 20px; }
.s-plus-menu .pi-cam { color: #8b5cf6; }
.s-plus-menu .pi-link { color: #3b82f6; }
.s-plus-menu .pi-proj { color: #f0883e; }
.s-plus-menu .pi-hq { color: #4f8a3b; }
.s-plus-menu b { flex: none; font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.s-plus-menu small { min-width: 0; font-size: 14.5px; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-plus-menu em { margin-left: auto; font-style: normal; font-size: 18px; color: var(--ink-4); }
.s-plus-back { min-height: 38px; font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.s-plus-empty { padding: 12px; font-size: 14px; color: var(--ink-3); }
.s-plus-cam { display: none !important; }
@media (pointer: coarse) { .s-plus-cam { display: flex !important; } }
.s-plus-link { display: flex; gap: 6px; padding: 6px 4px 2px; }
.s-plus-link[hidden] { display: none; }
.s-plus-link input { flex: 1; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 10px; font-size: 16px; outline: none; }
.s-plus-link button { height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 600; }
/* Files waiting to go: photos as thumbnails, everything else as a card */
.s-box .s-files { margin: 0 0 6px; padding: 0; }
.s-fthumb { position: relative; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; background: var(--surface-2); box-shadow: 0 0 0 1px var(--line); }
.s-fthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-fcard { position: relative; display: flex; align-items: center; gap: 10px; width: 210px; max-width: 100%; height: 64px; padding: 0 30px 0 10px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.s-fcard > i { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--k); color: #fff; font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; }
.s-fcard > span { display: grid; min-width: 0; }
.s-fcard b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-fcard small { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-fcard.is-bad small { color: #c0392b; }
.s-fcard.is-bad, .s-fthumb.is-bad { box-shadow: 0 0 0 1px #f3c4bd; }
.s-fthumb button, .s-fcard button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%; display: grid; place-items: center; background: #1d1d1fcc; color: #fff; font-size: 14px; line-height: 1; }
.s-fcard button { background: var(--surface-2); color: var(--ink-3); }
/* Drop files anywhere */
.s-drop { position: fixed; inset: 0; z-index: 90; display: none; place-items: center; background: #f5f2eacc; backdrop-filter: blur(6px); pointer-events: none; }
.is-dragging .s-drop { display: grid; }
.s-drop p { display: grid; gap: 6px; padding: 40px 56px; border: 2px dashed #f0883e; border-radius: 28px; background: #fffdf8; text-align: center; }
.s-drop b { font-size: 20px; }
.s-drop span { font-size: 14px; color: var(--ink-3); }
/* Files: the + in the box, and the files waiting to go with the job */
.s-attach { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; background: none; color: var(--ink-3); transition: background .2s, color .2s; }
.s-attach:hover { background: var(--hover); color: var(--ink); }
.s-attach svg { width: 22px; height: 22px; }
.s-box.is-drop, .s-reply-box.is-drop { border-color: #f0883e; box-shadow: 0 0 0 4px #f0883e2e; }
.s-files { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; margin-top: 10px; padding: 0 6px; }
.s-files[hidden] { display: none; }
.s-file { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 36px; padding: 0 4px 0 6px; border-radius: 12px; background: var(--surface); box-shadow: 0 1px 2px #0000000f; font-size: 13.5px; }
.s-file i { flex: none; padding: 3px 6px; border-radius: 7px; background: var(--surface-2); font-size: 10.5px; font-style: normal; font-weight: 700; letter-spacing: .04em; color: var(--ink-3); }
.s-file b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.s-file em { flex: none; font-style: normal; font-size: 12px; color: #c0392b; }
.s-file.is-bad { box-shadow: inset 0 0 0 1px #f3c4bd; }
.s-file button { flex: none; width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; font-size: 17px; line-height: 1; color: var(--ink-3); }
.s-file button:hover { background: var(--hover); color: var(--ink); }
.s-reply-box .s-attach { width: 34px; height: 34px; margin-left: -8px; }
.s-go { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--ink); color: #fff; transition: transform .2s var(--a-ease), background .2s; }
.s-go:hover { background: #33332f; }
.s-go:active { transform: scale(.94); }
.s-go svg { width: 20px; height: 20px; }

.s-box { z-index: 6; }
/* The tray under the box (ChatGPT's drawer): tucked under the box's bottom edge */
.s-tray { position: relative; z-index: 1; display: flex; align-items: center; gap: 2px; width: calc(100% - 32px); margin-top: -24px; padding: 30px 10px 7px; border-radius: 0 0 22px 22px; background: #ece6da; color: var(--ink-2); }
.s-tray svg { flex: none; width: 18px; height: 18px; }
.s-tray-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; border: 0; border-radius: 10px; background: none; font-size: 14px; color: inherit; white-space: nowrap; }
.s-tray-btn:hover { background: #0000000d; color: var(--ink); }
.s-tray .s-meter { margin-left: auto; padding: 0 8px; white-space: nowrap; }
.s-for { display: inline-flex; align-items: center; gap: 7px; padding-left: 10px; font-size: 14px; color: inherit; }
.s-for input { width: min(190px, 40vw); height: 34px; padding: 0 10px; border-radius: 999px; border: 1px solid transparent; background: transparent; font-size: 14px; color: var(--ink); transition: border-color .2s, background .2s; }
.s-for input:hover { background: #0000000a; }
.s-for input:focus { outline: none; background: var(--surface); border-color: var(--line-2); }
.s-meter { font-size: 13px; color: var(--ink-3); }
.s-meter b { color: var(--ink); }
.s-meter a { color: var(--a-link); }
.s-sub { margin-top: 26px; font-size: 15px; color: var(--ink-3); text-align: center; }
/* Under the box: the cards and the suggestions share one spot and cross-fade (no jump in the layout) */
.s-below { width: 100%; min-width: 0; display: grid; margin-top: 22px; }
.s-below > * { grid-area: 1 / 1; min-width: 0; }
.s-ideas { width: 100%; min-width: 0; display: grid; align-content: start; padding: 0 16px; opacity: 0; visibility: hidden; transform: translateY(6px); filter: blur(6px); transition: opacity .3s var(--a-ease), filter .35s var(--a-ease), transform .35s var(--a-ease), visibility 0s .35s; }
.typing .s-ideas, .show-ideas .s-ideas { opacity: 1; visibility: visible; transform: none; filter: none; transition: opacity .3s var(--a-ease), filter .35s var(--a-ease), transform .35s var(--a-ease), visibility 0s; }
.s-try { min-width: 0; transition: opacity .3s var(--a-ease), filter .35s var(--a-ease), transform .35s var(--a-ease), visibility 0s; }
.typing .s-try, .show-ideas .s-try, .try-closed .s-try { opacity: 0; visibility: hidden; transform: translateY(-6px); filter: blur(6px); pointer-events: none; transition: opacity .25s var(--a-ease), filter .3s var(--a-ease), transform .3s var(--a-ease), visibility 0s .3s; }
.s-try header { display: flex; align-items: center; gap: 10px; padding: 0 4px 12px 8px; font-size: 15px; color: #e6e7ea; }
.s-try header b { font-weight: 600; }
.s-try-nav { margin-left: auto; display: flex; gap: 4px; }
.s-try-nav button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: #a9adb6; }
.s-try-nav button:hover { background: #ffffff17; color: #fff; }
.s-try-nav svg { width: 16px; height: 16px; }
.s-try-win { overflow: hidden; margin: -10px; padding: 10px; }
.s-try-track { --p: 0; display: flex; gap: 12px; transform: translateX(calc(var(--p) * -1 * (100% + 12px))); transition: transform .6s cubic-bezier(.22,.8,.2,1); }
.s-tcard { flex: 0 0 calc((100% - 24px) / 3); min-width: 0; display: grid; align-content: start; gap: 4px; min-height: 148px; padding: 14px 14px 16px 16px; border: 0; border-radius: 22px; background: #ffffff12; -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: inset 0 0 0 1px #ffffff1c; color: #f4f2ec; text-align: left; transition: background .2s, transform .25s var(--a-ease), box-shadow .2s; }
.s-tcard:hover, .s-tcard:focus-visible { background: #ffffff1f; transform: translateY(-2px); box-shadow: inset 0 0 0 1px #ffffff2e, 0 18px 40px -20px #000; }
.s-tcard-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.s-tcard i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--c); color: #fff; box-shadow: inset 0 1px 0 #ffffff40; }
.s-tcard i svg { width: 20px; height: 20px; }
.s-tcard em { font-style: normal; padding: 5px 13px; border-radius: 999px; background: #ffffff1a; font-size: 13px; font-weight: 600; }
.s-tcard:hover em { background: #f6f4ef; color: #1b1b1a; }
.s-tcard b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.s-tcard small { font-size: 13.5px; line-height: 1.4; color: #a9adb6; }
.s-idea[aria-selected="true"] { background: #ffffff14; color: #fff; }
.s-idea mark { background: none; color: #fff; font-weight: 600; }
.s-idea em { margin-left: auto; padding-left: 12px; font-style: normal; font-size: 12.5px; color: #8d929c; white-space: nowrap; }
.s-idea { display: flex; min-width: 0; align-items: center; gap: 14px; min-height: 46px; padding: 6px 12px; border: 0; border-radius: 14px; background: none; font-size: 15.5px; color: var(--ink-3); text-align: left; transition: background .2s, color .2s; }
.s-idea:hover, .s-idea:focus-visible { background: #0000000a; color: var(--ink); }
.s-idea i { flex: none; width: 22px; height: 22px; display: grid; place-items: center; color: var(--ink-2); }
.s-idea i svg { width: 20px; height: 20px; }
.s-idea span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asked .s-below, .asked .s-sub, .asked .s-tray { display: none; }

/* Signed in: who you are, and your papers under the box */
.s-top .s-me { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; background: var(--surface); box-shadow: 0 1px 2px #0000000f; }
.s-me span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; }
.s-papers { width: 100%; margin-top: 22px; display: grid; gap: 6px; }
.s-papers .s-k { padding-left: 14px; color: var(--ink-4); }
.s-papers button { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 16px; border: 0; border-radius: 16px; background: var(--surface); text-align: left; font-size: 15px; color: var(--ink); box-shadow: 0 1px 2px #0000000a; transition: transform .2s var(--a-ease), box-shadow .2s; }
.s-papers button:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -12px #0005; }
.s-papers button b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-papers button span { flex: none; font-size: 13px; color: var(--ink-3); }
.asked .s-papers { display: none; }

/* Signed out: save it, like a chat assistant asks you to log in */
.s-save { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 14px 14px 20px; border-radius: 22px; background: var(--surface); box-shadow: 0 1px 2px #0000000d, 0 14px 36px -20px #00000055; }
.s-save p { flex: 1 1 260px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.s-save p b { color: var(--ink); }
.s-save a { display: grid; place-items: center; height: 42px; padding: 0 18px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.s-save-main { background: var(--ink); color: #fff; }
.s-save-x { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-3); font-size: 18px; line-height: 1; }
.s-save-x:hover { background: var(--hover); color: var(--ink); }
.s-save p { padding-right: 34px; }
.s-save-main:hover { background: #33332f; }
.s-save-alt { border: 1px solid var(--line-2); color: var(--ink); }
.s-save-alt:hover { background: var(--hover); }

/* The finished work, as a document */
.s-you { justify-self: end; display: inline-flex; gap: 10px; align-items: baseline; max-width: 85%; padding: 10px 16px; border-radius: 18px 18px 4px 18px; background: var(--ink); color: #fff; font-size: 15px; }
.s-you span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #ffffff99; }
.s-doc { background: #fff; border-radius: 22px; box-shadow: var(--a-shadow); overflow: hidden; }
.s-doc-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 14px; }
.s-doc-tools { display: flex; gap: 6px; }
.s-doc-tools button { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-size: 13px; font-weight: 500; }
.s-doc-tools button:hover { background: var(--hover); }
.s-md { padding: clamp(22px, 4vw, 44px); font-size: 16px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.s-md > * + * { margin-top: .8em; }
.s-md h2 { font-size: 28px; line-height: 1.15; letter-spacing: -.025em; }
.s-md h3 { font-size: 19px; letter-spacing: -.01em; margin-top: 1.4em; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.s-md h4 { font-size: 16px; margin-top: 1.1em; }
.s-md ul, .s-md ol { padding-left: 1.3em; }
.s-md li + li { margin-top: .3em; }
.s-md a { color: var(--a-link); text-decoration: underline; text-underline-offset: 2px; }
.s-md blockquote { padding-left: 14px; border-left: 3px solid var(--line-2); color: var(--ink-2); }
.s-md hr { border: 0; border-top: 1px solid var(--line); }
.s-md code { font-size: .9em; }
.md-table { overflow-x: auto; }
.s-md table { border-collapse: collapse; width: 100%; font-size: 14px; }
.s-md th, .s-md td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.s-md th { font-weight: 600; background: var(--surface-2); }
mark.blank { background: #fff3c4; color: #7a5a00; border-radius: 4px; padding: 0 4px; font-weight: 500; }
.s-blanks { padding: 12px 18px 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); line-height: 1.9; }
.s-blanks span { color: var(--ink-3); }
.s-reply-box { display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 6px 0 18px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; box-shadow: 0 1px 2px #0000000d, 0 10px 30px -18px #00000040; }
.s-reply-box:focus-within { border-color: var(--ink-4); }
.s-reply-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--ink); }
.s-reply-box .s-go { width: 42px; height: 42px; }

@media print {
  body.search-page > *:not(main), .s-hero, .s-who, .s-job, .s-reply, .s-you, .s-next, .s-reply-box, .s-doc-bar, .s-blanks, .s-meter { display: none !important; }
  @page { size: letter; margin: 0; }
  body.search-page, .s-main { background: #fff; padding: 0; max-width: none; }
  .s-doc { box-shadow: none; border-radius: 0; }
  .s-md { padding: 0; }
  mark.blank { background: none; border-bottom: 1px dotted #999; }
}

/* A job, done: who did it, the job, the work, and what's next */
.s-turn { display: grid; gap: 14px; }
.s-who { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-3); }
.s-who .pd { width: 34px; }
.s-who b { color: var(--ink); }
.s-job { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.1; letter-spacing: -.03em; }
.s-turn .s-reply { margin-top: 0; }
.s-work .tr-posts { grid-template-columns: 1fr; }
.s-work .tr-post { min-height: 0; }
.s-work .tr-doc { max-width: none; }
.s-next { display: grid; gap: 12px; padding: 18px 20px; border-radius: 20px; background: var(--surface); font-size: 15px; color: var(--ink-2); }
.s-next .s-actions { margin-top: 0; }
button.a-more { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: var(--a-link); font-weight: 500; }
.s-card-limit .s-card-team .pd { width: 90px; }

/* The answer */
.s-answer { margin-top: 28px; display: grid; gap: 18px; scroll-margin-top: 16px; animation: s-in .6s var(--a-ease); }
@keyframes s-in { from { opacity: 0; transform: translateY(14px); filter: blur(8px); } }
.s-follow { position: fixed; z-index: 40; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14.5px; font-weight: 600; box-shadow: 0 10px 26px -10px #0008; animation: s-in .3s var(--a-ease); }
.s-follow[hidden] { display: none; }
.s-hint { margin-top: 8px; font-size: 14px; color: var(--ink-3); text-align: center; }
.s-thinking { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 28px; color: var(--ink-3); }
.s-thinking .pd { width: 44px; animation: pd-boop 1.2s var(--a-ease) infinite; }
.s-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; align-items: start; padding: clamp(22px, 3vw, 32px); background: var(--surface); border-radius: 28px; box-shadow: var(--a-shadow); }
.s-card-team .pd { width: 100%; filter: drop-shadow(0 16px 20px #0000001f); }
.s-k { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c, var(--ink-4)); }
.s-card h2 { margin-top: 6px; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.1; letter-spacing: -.03em; }
.s-reply { margin-top: 10px; font-size: 18px; line-height: 1.45; color: var(--ink-2); }
.s-price { margin-top: 10px; font-size: 14px; color: var(--ink-3); }
.s-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 20px; }
.s-actions .a-more { font-size: 15px; }

.s-card-dark { grid-template-columns: 1fr; background: #0b0b0c; color: #f5f5f7; }
.s-card-dark h2 { color: #fff; }
.s-card-dark .s-k { color: #a1a1a6; }
.s-card-dark .s-reply { color: #d2d2d7; }
.s-card-dark .s-price { color: #a1a1a6; }
.s-card-dark .a-btn-ghost { color: #fff; box-shadow: inset 0 0 0 1px #48484a; }
.s-crowd { display: flex; flex-wrap: wrap; }
.s-crowd .pd { width: 52px; margin-right: -10px; }
.s-card-none .s-card-team .pd { width: 90px; opacity: .8; }
.s-today { margin-top: 22px; color: var(--ink-4); }
.s-today-list { display: grid; gap: 8px; margin-top: 10px; }
.s-today-list a { display: grid; grid-template-columns: 40px auto 1fr; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: var(--bg); transition: background .2s; }
.s-today-list a:hover { background: var(--hover); }
.s-today-list .pd { width: 36px; }
.s-today-list span { color: var(--ink-3); font-size: 14px; }

.s-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; padding: 16px clamp(16px, 3vw, 28px); font-size: 13px; color: var(--ink-4); border-top: 1px solid var(--line); }
.s-foot-links { display: flex; gap: 18px; }
.s-foot a:hover { color: var(--ink); }

@media (max-width: 640px) {
  /* Phones: the box sits in the upper third, then one tidy column you can reach with a thumb */
  .s-top { padding: 10px 12px; }
  .s-top nav a:not(:first-child) { display: none; }
  .s-top .s-pill { display: none; }
  .s-hero { padding-top: 9vh; }
  .s-logo { gap: 10px; margin-bottom: 22px; }
  .s-logo-pd .pd { width: 52px; }
  .s-word { font-size: 40px; }
  .s-box { padding: 12px 10px 8px 14px; border-radius: 24px; }
  .s-box textarea { font-size: 16px; }
  .s-box-hint { display: none; }
  .s-box-bar { justify-content: space-between; }
  .s-go { width: 42px; height: 42px; }
  .s-tray { flex-wrap: wrap; padding: 30px 8px 8px; width: calc(100% - 20px); }
  .s-for { flex: 1 1 100%; }
  .s-for input { flex: 1; width: auto; font-size: 16px; }
  .s-meter { flex: 1 1 100%; order: 5; padding: 2px 10px 0; margin: 0; }
  .s-below { margin-top: 16px; }
  .s-ideas { padding: 0 2px; }
  .s-try-nav [data-try="prev"], .s-try-nav [data-try="next"] { display: none; }
  .s-try-win { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .s-try-win::-webkit-scrollbar { display: none; }
  .s-try-track { transform: none !important; }
  .s-tcard { flex: 0 0 74%; scroll-snap-align: start; min-height: 132px; }
  .s-idea { font-size: 15px; }
  .s-toasts { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: auto; }
  .s-toast:nth-child(n+2) { display: none; }
  .s-sub { margin-top: 22px; font-size: 14px; padding: 0 12px; }
  .s-foot { justify-content: center; text-align: center; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); font-size: 12.5px; }
  .s-foot-links { gap: 16px; flex-wrap: wrap; justify-content: center; }
  .s-card { grid-template-columns: 1fr; }
  .s-card-team .pd { width: 110px; }
  .s-today-list a { grid-template-columns: 36px 1fr; }
  .s-today-list span { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .s-hero, .s-logo, .s-answer { transition: none; animation: none; } }

/* The footer's popups, like okaycompany.com: a card over a blurred page; the contents come out of a blur */
.pop { position: fixed; inset: 0; z-index: 200; overflow-y: auto; overscroll-behavior: contain; padding: clamp(40px, 9vh, 96px) clamp(12px, 3vw, 24px); background: #0c0c0e61; backdrop-filter: blur(18px) saturate(.85); -webkit-backdrop-filter: blur(18px) saturate(.85); opacity: 0; transition: opacity .35s ease; }
.pop[hidden] { display: none; }
.pop.show { opacity: 1; }
.pop-card { position: relative; max-width: 640px; margin: 0 auto; border-radius: 28px; background: var(--surface); color: var(--ink); box-shadow: 0 50px 120px -30px #000b, 0 0 0 1px #ffffff14; transform: translateY(48px) scale(.98); filter: blur(10px); transition: transform .65s var(--a-ease), filter .5s ease; }
.pop.show .pop-card { transform: none; filter: none; }
.pop-body { display: grid; gap: 14px; padding: 56px clamp(24px, 6vw, 56px) 44px; }
@keyframes pop-in { from { opacity: 0; filter: blur(12px); transform: translateY(14px); } }
.pop.show .pop-body > * { animation: pop-in .8s var(--a-ease) backwards; animation-delay: calc(.12s + var(--i, 0) * .07s); }
.pop-x { position: absolute; top: 18px; right: 18px; z-index: 2; width: 34px; height: 34px; border: 0; background: none; color: var(--ink); opacity: .55; font: 300 28px/1 var(--a-sans, Inter, sans-serif); transition: opacity .2s, transform .3s var(--a-ease); }
.pop-x:hover { opacity: 1; transform: rotate(90deg); }
.pop-k { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #f0883e; }
.pop-body h2 { font-family: inherit; font-weight: 800; font-size: clamp(28px, 4vw, 38px); line-height: 1.08; letter-spacing: -.035em; }
.pop-body p, .pop-body li { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.pop-body ul { display: grid; gap: 8px; padding-left: 1.1em; }
.pop-body b { color: var(--ink); }
.pop-small { font-size: 13px !important; color: var(--ink-3) !important; }
.pop-mail { font-size: 20px; font-weight: 600; color: var(--ink); }
.pop-more a { font-weight: 600; color: var(--a-link); }
.pop-legal { display: grid; gap: 10px; }
.pop-legal h2 { font-family: inherit; font-weight: 700; margin-top: 18px; font-size: 19px; letter-spacing: -.01em; }
.pop-legal h3 { margin-top: 8px; font-size: 16px; }
.pop-legal a { color: var(--a-link); }
html.pop-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .pop, .pop-card { transition: none; } .pop.show .pop-body > * { animation: none; } }

/* The open project's folders in the sidebar: one row each, opening on the right */
.s-folders { display: grid; gap: 1px; margin: 2px 0 8px 18px; padding-left: 8px; border-left: 1.5px solid #d9d3c5; }
.s-fold-row { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border: 0; border-radius: 10px; background: none; text-align: left; font-size: 13.5px; color: var(--ink); }
.s-fold-row:hover { background: var(--hover); }
.s-fold-row[aria-current="true"] { background: #f3eee3; font-weight: 600; }
.s-fold-row[aria-current="true"] svg { color: #f0883e; }
.s-fold-row svg { flex: none; width: 17px; height: 17px; color: var(--ink-3); }
.s-fold-row b { flex: 1; font-weight: 500; }
.s-fold-row em { font-style: normal; font-size: 11.5px; color: var(--ink-4); }

/* A project, like Notes: a gallery per folder, its chat and its numbers, and a box to ask */
.has-proj .s-hero, .has-proj #answer { display: none !important; }
.has-proj .s-main { max-width: 1240px; }
.pj { display: grid; gap: 18px; margin-top: 4px; padding-bottom: 160px; animation: s-in .35s var(--a-ease); }
.pj[hidden] { display: none; }
.pj-head { display: grid; gap: 6px; }
.pj-back { justify-self: start; padding: 4px 0; border: 0; background: none; font-size: 14px; font-weight: 600; color: var(--a-link); }
.pj-head h2 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.08; letter-spacing: -.035em; }
.pj-sub { font-size: 14px; color: var(--ink-3); }
.pj-tabs { display: flex; gap: 4px; margin-top: 8px; padding: 3px; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.pj-tabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: none; font-size: 14px; color: var(--ink-2); }
.pj-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px #0000001f; }
.pj-tabs em { font-style: normal; font-size: 12px; color: var(--ink-4); }
.pj-group { margin: 6px 0 -4px; font-size: 18px; letter-spacing: -.01em; }
.pj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px 16px; }
.pj-wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.pj-card { display: grid; gap: 4px; align-content: start; min-width: 0; color: var(--ink); cursor: pointer; text-align: left; }
.pj-card b { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-card small { font-size: 12.5px; color: var(--ink-3); }
.pj-thumb { position: relative; display: block; margin-bottom: 6px; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 10px 24px -18px #0007; transition: box-shadow .2s, transform .2s var(--a-ease); }
.pj-paper:hover .pj-thumb { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--line), 0 18px 34px -18px #0008; }
.pj-paper.is-cur .pj-thumb { box-shadow: 0 0 0 2.5px #f0883e, 0 10px 24px -18px #0007; }
.pj-mini { width: 100% !important; box-shadow: none !important; border-radius: 0 !important; }
.pj-mini .pp-sheet { aspect-ratio: 8.5 / 7 !important; }
.pj-get { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity .2s; }
.pj-paper:hover .pj-get, .pj-paper:focus-within .pj-get { opacity: 1; }
@media (hover: none) { .pj-get { opacity: 1; } }
.pj-get button { height: 24px; padding: 0 8px; border: 0; border-radius: 7px; background: #1d1d1fcc; color: #fff; font-size: 10.5px; font-weight: 700; }
.pj-src, .pj-note, .pj-file { padding: 14px; border-radius: 18px; background: var(--surface); box-shadow: 0 1px 2px #0000000d; transition: box-shadow .2s; }
.pj-src:hover, .pj-note:hover { box-shadow: 0 1px 2px #0000000d, 0 14px 30px -18px #0006; }
.pj-src b, .pj-note p { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pj-fav { width: 32px; height: 32px; display: grid; place-items: center; margin-bottom: 6px; border-radius: 10px; background: var(--surface-2); font-weight: 800; color: var(--ink-3); }
.pj-note p { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); -webkit-line-clamp: 6; }
.pj-who { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, #4f8a3b 14%, #fff); }
.pj-who .pd { width: 24px; }
.pj-kind { justify-self: start; padding: 3px 8px; border-radius: 7px; background: var(--surface-2); font-size: 11px; font-weight: 800; color: var(--ink-3); }
.pj-file b { white-space: normal; overflow-wrap: anywhere; }
/* A file card: the photo's thumbnail, a document's first lines, or its kind; tap to open it */
button.pj-file { display: grid; gap: 10px; align-content: start; border: 0; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
button.pj-file:hover { box-shadow: 0 1px 2px #0000000d, 0 14px 30px -18px #00000059; }
.pj-file-t { display: grid; gap: 4px; min-width: 0; }
.pj-thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: var(--surface-2); }
.pj-excerpt { display: block; height: 96px; overflow: hidden; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 11.5px; line-height: 1.45; color: var(--ink-3); white-space: pre-wrap; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.pj-fileicon { display: grid; place-items: center; height: 96px; border-radius: 12px; background: var(--surface-2); font-size: 15px; font-weight: 800; letter-spacing: .04em; color: var(--ink-3); }
.pj-fileicon[data-k="PDF"] { color: #e5484d; background: #e5484d14; }
/* The file popup: frosted backdrop, the file large */
.s-fpv { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; background: #0b0c0f66; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: s-fade .25s var(--a-ease); }
.s-fpv[hidden] { display: none; }
@keyframes s-fade { from { opacity: 0; } }
.s-fpv-card { width: min(920px, 100%); max-height: calc(100dvh - 48px); display: flex; flex-direction: column; border-radius: 24px; background: var(--surface); box-shadow: 0 40px 100px -30px #000c; overflow: hidden; animation: s-pop3 .35s var(--a-ease); }
@keyframes s-pop3 { from { opacity: 0; transform: translateY(10px) scale(.98); filter: blur(6px); } }
.s-fpv-card header { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px 18px; border-bottom: 1px solid var(--line); }
.s-fpv-card header div { flex: 1; min-width: 0; }
.s-fpv-card header b { display: block; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-fpv-card header small { font-size: 12.5px; color: var(--ink-3); }
.s-fpv-dl { height: 32px; display: inline-grid; place-items: center; padding: 0 14px; border-radius: 999px; background: var(--surface-2); font-size: 13px; font-weight: 600; color: var(--ink); }
.s-fpv-x { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); }
.s-fpv-x svg { width: 14px; height: 14px; }
.s-fpv-body { flex: 1; min-height: 0; overflow: auto; display: grid; place-items: center; padding: 16px; background: var(--bg); }
.s-fpv-body img { max-width: 100%; max-height: calc(100dvh - 200px); border-radius: 12px; box-shadow: 0 10px 30px -16px #0006; }
.s-fpv-body.is-pdf { padding: 0; }
.s-fpv-body iframe { width: 100%; height: calc(100dvh - 140px); border: 0; background: #fff; }
.s-fpv-body pre { justify-self: stretch; align-self: start; margin: 0; padding: 18px 20px; border-radius: 14px; background: var(--surface); font: 13.5px/1.6 var(--a-sans, Inter, sans-serif); color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.s-fpv-note { margin-top: 10px; font-size: 12.5px; color: var(--ink-3); text-align: center; }
.s-fpv-empty { display: grid; justify-items: center; gap: 12px; padding: 30px 10px; max-width: 360px; text-align: center; font-size: 14px; color: var(--ink-3); }
.s-fpv-empty i { font-style: normal; padding: 18px 22px; border-radius: 16px; background: var(--surface); font-weight: 800; color: var(--ink-3); }
@media (max-width: 640px) { .s-fpv { padding: 0; place-items: end stretch; } .s-fpv-card { max-height: 92dvh; border-radius: 24px 24px 0 0; } }
.pj-empty { max-width: 520px; padding: 30px 0; font-size: 15px; line-height: 1.5; color: var(--ink-3); }
/* Chat: everything asked and done on the project, with the pandas' work live */
.pj-chat { display: grid; gap: 14px; width: min(720px, 100%); justify-self: center; }
.pj-msg { display: flex; gap: 10px; }
.pj-msg p { font-size: 15px; line-height: 1.5; }
.pj-msg time { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-4); }
.pj-msg.you { flex-direction: column; align-items: flex-end; gap: 0; text-align: right; }
.pj-msg.you p { display: inline-block; max-width: 520px; padding: 10px 15px; border-radius: 20px 20px 6px 20px; background: #ebe3d3; color: var(--ink); text-align: left; }
.pj-msg.you.quiet p { background: var(--surface-2); color: var(--ink-2); }
.pj-msg.panda > div { max-width: 600px; padding: 11px 15px; border-radius: 20px 20px 20px 6px; background: var(--surface); box-shadow: 0 0 0 1px #0000000a, 0 8px 24px -16px #00000040; }
.pj-msg.live p { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.pj-chip { margin-top: 8px; height: 28px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--surface-2); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.pj-chip:hover { background: var(--hover); }
/* Activity: the project's own numbers */
.pj-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.pj-kpi { display: grid; gap: 2px; padding: 16px; border-radius: 18px; background: var(--surface); box-shadow: 0 1px 2px #0000000d; }
.pj-kpi b { font-size: 28px; letter-spacing: -.03em; }
.pj-kpi small { font-size: 12.5px; color: var(--ink-3); }
.pj-panel { display: grid; gap: 12px; padding: 18px; border-radius: 22px; background: var(--surface); box-shadow: 0 1px 2px #0000000d; }
.pj-panel h3 { font-size: 15px; }
.pj-bars { display: flex; align-items: end; gap: 6px; height: 140px; }
.pj-bars span { flex: 1; max-width: 48px; height: 100%; display: grid; grid-template-rows: 1fr auto; gap: 4px; }
.pj-bars i { align-self: end; height: var(--h); border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #f0883e, #f6b27e); }
.pj-bars em { font-style: normal; font-size: 11px; text-align: center; color: var(--ink-4); }
.pj-time { list-style: none; display: grid; gap: 2px; }
.pj-time li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.pj-time time { font-size: 12.5px; color: var(--ink-3); }
.pj-time span { display: grid; }
.pj-time small { font-size: 12.5px; color: var(--ink-3); }
.pj-small { font-size: 12.5px; color: var(--ink-4); }
/* The project's chat box, always at hand */
/* The project's composer: one frosted card, the mode as a segmented control above what you type */
.pj-ask { position: fixed; z-index: 40; bottom: max(16px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(720px, calc(100% - 32px)); display: grid; gap: 2px; padding: 8px 8px 6px; border-radius: 28px; background: #fffdf8d9; -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); box-shadow: inset 0 0 0 1px #ffffffb3, 0 0 0 1px #00000012, 0 24px 60px -24px #00000059; }
.has-proj .s-foot { display: none; }
@media (min-width: 1100px) { .side-open .pj-ask { left: calc(50% + 144px); } }
.pj-modes { display: flex; gap: 2px; justify-self: start; padding: 3px; border-radius: 999px; background: #0000000a; }
.pj-modes button { height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: none; font-size: 13px; font-weight: 500; color: var(--ink-3); transition: background .2s, color .2s, box-shadow .2s; }
.pj-modes button:hover { color: var(--ink); }
.pj-modes button[aria-checked="true"] { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px #0000001f, 0 2px 8px -4px #0000002e; }
.pj-ask-box { display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 0 0 12px; }
.pj-ask-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; color: var(--ink); }
.pj-ask-box .s-go { width: 40px; height: 40px; }
@media (max-width: 640px) {
  .pj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .pj-wide { grid-template-columns: minmax(0, 1fr); }
  .pj-time li { grid-template-columns: 80px 1fr; }
  .pj-modes button { padding: 0 10px; font-size: 12.5px; }
}

/* Search in the sidebar and the top bar (phones), and the command bar itself (⌘K) */
.s-side-search { color: var(--ink-2); font-weight: 500 !important; }
.s-side-search svg { width: 18px !important; height: 18px !important; }
.s-side-search kbd { margin-left: auto; padding: 1px 6px; border-radius: 6px; background: var(--surface-2); font: 600 11px var(--a-sans, Inter, sans-serif); color: var(--ink-4); }
.s-top-search { display: none; }
@media (max-width: 1099px) { .s-top-search { display: grid; margin-left: auto; } .s-top { justify-content: flex-start; } }
.ck { position: fixed; inset: 0; z-index: 210; display: grid; align-items: start; justify-items: center; padding: min(14vh, 120px) 12px 20px; background: #0c0c0e40; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .18s; }
.ck[hidden] { display: none; }
.ck.show { opacity: 1; }
.ck-card { width: min(640px, 100%); max-height: min(70vh, 640px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border-radius: 22px; background: #fffdf8; box-shadow: 0 0 0 1px #0000001a, 0 40px 100px -30px #000a; overflow: hidden; transform: translateY(-8px) scale(.985); transition: transform .25s var(--a-ease); }
.ck.show .ck-card { transform: none; }
.ck-in { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.ck-in svg { flex: none; width: 18px; height: 18px; color: var(--ink-4); }
.ck-in input { flex: 1; min-width: 0; height: 58px; border: 0; outline: 0; background: none; font-size: 18px; color: var(--ink); }
.ck kbd { padding: 1px 6px; border-radius: 6px; background: var(--surface-2); font: 600 11px var(--a-sans, Inter, sans-serif); color: var(--ink-3); }
.ck-list { overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.ck-k { padding: 10px 10px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); }
.ck-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border: 0; border-radius: 12px; background: none; text-align: left; color: var(--ink); }
.ck-item[aria-selected="true"] { background: var(--ink); color: #fff; }
.ck-item[aria-selected="true"] small { color: #ffffffb3; }
.ck-item[aria-selected="true"] mark { background: #f0883e; color: #fff; }
.ck-item > i { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-2); font-style: normal; font-size: 14px; color: var(--ink-2); }
.ck-item[aria-selected="true"] > i { background: #ffffff1f; color: #fff; }
.ck-item > span { display: grid; min-width: 0; flex: 1; }
.ck-item b { font-size: 14.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-item small { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-item mark { background: #ffe58a; color: inherit; border-radius: 3px; padding: 0 1px; }
.ck-empty { padding: 22px 12px; font-size: 14px; color: var(--ink-3); text-align: center; }
.ck-foot { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-4); }
.ck-foot span { display: inline-flex; align-items: center; gap: 4px; }
html.ck-open { overflow: hidden; }
@media (max-width: 640px) { .ck { padding-top: 10px; } .ck-in input { font-size: 16px; } .ck-foot { display: none; } .ck-card { max-height: 80vh; } }

/* Presentations (deck.js): a slide is 16:9 and scales with its width (container units), so the stage, the
   sorter's thumbnails and full-screen Present are the same slide. Font, accent and tint come from the paper. */
.dk-slide { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--pp-bg, #fff); color: #1c1c1e; font-family: var(--pp-font, inherit); text-align: left; }
/* The slide is the container; its frame measures against it, so a thumbnail is the same slide, smaller */
.dk-in { position: absolute; inset: 0; display: grid; align-content: center; gap: 2.4cqw; padding: 7.5cqw; }
.dk-slide [data-f] { outline: none; border-radius: .4cqw; }
.dk-slide [contenteditable]:hover { box-shadow: 0 0 0 .2cqw color-mix(in srgb, var(--pp-accent) 35%, transparent); }
.dk-slide [contenteditable]:focus { box-shadow: 0 0 0 .3cqw var(--pp-accent); }
.dk-slide [contenteditable]:empty::before { content: "Type here"; color: #b6b0a5; }
.dk-title { font-size: 4.8cqw; font-weight: 800; line-height: 1.05; letter-spacing: -.035em; }
.dk-subtitle { font-size: 2.1cqw; line-height: 1.4; color: #6b6863; }
.dk-bar { width: 6.6cqw; height: .65cqw; border-radius: 1cqw; background: var(--pp-accent); }
.dk-slide[data-kind="title"] .dk-title { font-size: 6cqw; }
.dk-slide[data-kind="section"] { background: var(--pp-accent); color: #fff; }
.dk-slide[data-kind="section"] .dk-subtitle { color: #ffffffcc; }
.dk-slide[data-kind="closing"] .dk-in { align-content: center; justify-items: center; text-align: center; }
.dk-slide[data-kind="closing"] .dk-title { font-size: 5.4cqw; }
.dk-slide[data-kind="points"] .dk-in, .dk-slide[data-kind="numbers"] .dk-in { align-content: start; }
.dk-slide[data-kind="points"] .dk-title, .dk-slide[data-kind="numbers"] .dk-title { font-size: 3.6cqw; padding-bottom: 1.6cqw; border-bottom: .15cqw solid var(--pp-accent); }
.dk-points { display: grid; gap: 1.6cqw; padding: 0; list-style: none; }
.dk-points li { position: relative; padding-left: 3cqw; font-size: 2.3cqw; line-height: 1.35; }
.dk-points li::before { content: ""; position: absolute; left: .4cqw; top: .85cqw; width: 1cqw; height: 1cqw; border-radius: 50%; background: var(--pp-accent); }
.dk-nums { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3cqw; margin-top: 4cqw; }
.dk-num { display: grid; gap: .8cqw; }
.dk-num b { font-size: 6.6cqw; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--pp-accent); }
.dk-num span { font-size: 1.9cqw; color: #6b6863; }
.dk-slide[data-kind="quote"] .dk-in { padding-left: 12cqw; }
.dk-mark { position: absolute; left: 5cqw; top: 9cqw; font-size: 14cqw; line-height: 1; font-weight: 800; color: var(--pp-accent); }
.dk-slide[data-kind="quote"] .dk-title { font-size: 3.6cqw; font-weight: 500; line-height: 1.3; letter-spacing: -.015em; }
[data-t="elegant"] .dk-title, [data-t="invite"] .dk-title { font-weight: 400; }
/* The editor: back, title, Present and exports; the sorter on the left, the stage on the right */
.has-deck .s-hero, .has-deck #answer { display: none !important; }
.has-deck .s-main { max-width: 1400px; }
.dk { margin-top: 4px; padding-bottom: 40px; animation: s-in .35s var(--a-ease); }
.dk[hidden] { display: none; }
.dk-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 16px; margin-bottom: 16px; }
.dk-head .pj-back { grid-column: 1 / -1; }
.dk-titlebar h2 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -.03em; line-height: 1.1; }
.dk-titlebar span { font-size: 14px; color: var(--ink-3); }
.dk-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.dk-actions button { height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line-2); font-size: 14px; font-weight: 600; color: var(--ink); }
.dk-actions .dk-play { background: #f0883e; box-shadow: 0 8px 20px -10px #f0883ecc; color: #fff; }
.dk-main { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; align-items: start; }
.dk-sorter { position: sticky; top: 12px; display: grid; gap: 10px; max-height: calc(100vh - 40px); overflow-y: auto; padding: 4px; list-style: none; }
.dk-sorter .dk-item { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 6px; align-items: start; cursor: pointer; }
.dk-n { font-size: 11.5px; color: var(--ink-4); text-align: right; padding-top: 2px; }
.dk-thumb { display: block; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 6px 14px -10px #0006; pointer-events: none; }
.dk-sorter .dk-item[aria-current="true"] .dk-thumb { box-shadow: 0 0 0 2.5px #f0883e, 0 6px 14px -10px #0006; }
.dk-sorter .dk-item > button { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: #1d1d1fcc; color: #fff; font-size: 13px; line-height: 1; opacity: 0; transition: opacity .2s; }
.dk-sorter .dk-item:hover > button { opacity: 1; }
.dk-add { display: block !important; padding-left: 24px; }
.dk-add button { width: 100%; height: 34px; border: 1.5px dashed var(--line-2); border-radius: 10px; background: none; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.dk-stagewrap { display: grid; gap: 12px; }
.dk-kinds { display: flex; gap: 4px; flex-wrap: wrap; }
.dk-kinds button { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-size: 13px; color: var(--ink-2); }
.dk-kinds button[aria-checked="true"] { background: #f3eee3; box-shadow: 0 0 0 1.5px #f0883e; color: var(--ink); font-weight: 600; }
.dk-stage { border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -30px #0007; }
.dk-tools { display: flex; gap: 6px; min-height: 0; }
.dk-tools button { height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-size: 13px; font-weight: 600; }
.dk-notes { display: grid; gap: 6px; }
.dk-notes span { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.dk-notes textarea { width: 100%; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font: inherit; font-size: 15px; line-height: 1.5; resize: vertical; outline: none; }
.dk-notes textarea:focus { box-shadow: 0 0 0 2px #f0883e; }
.dk-mini { display: block; }
.pj-deck .pj-thumb { background: #000; }
.pj-badge { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 7px; background: #1d1d1fcc; color: #fff; font-size: 11px; font-weight: 700; }
/* Present: the slide as big as the screen allows, on black */
.dk-show { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: #000; cursor: pointer; }
.dk-showslide { width: min(100vw, calc(100vh * 16 / 9)); }
.dk-showbar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #ffffff1a; }
.dk-showbar i { display: block; height: 100%; background: var(--pp-accent); transition: width .3s var(--a-ease); }
.dk-showcount { position: absolute; right: 18px; bottom: 14px; font-size: 13px; color: #ffffff80; }
.dk-showx { position: absolute; top: 14px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #ffffff14; color: #fff; font-size: 24px; opacity: .5; }
.dk-showx:hover { opacity: 1; }
@media (max-width: 760px) {
  .dk-main { grid-template-columns: minmax(0, 1fr); }
  .dk-sorter { position: static; grid-auto-flow: column; grid-auto-columns: 130px; overflow-x: auto; max-height: none; order: 2; }
  .dk-add { padding-left: 0; }
  .dk-head { grid-template-columns: minmax(0, 1fr); }
}

/* The home page on the office: the night stage of Headquarters behind everything, the office spread across
   the lower half, the logo and the box in light over it; the floating sidebar and the box stay white */
/* The home page's backdrop: Headquarters at night, lit like a diorama. It fades in out of a blur on the
   home view and back out when a job starts; no labels, softened colors, and its top melts into the dark so
   nothing collides with the box. The sidebar, chips and the continue card are frosted glass over it. */
.s-office { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: 0; visibility: hidden; background: radial-gradient(70% 55% at 50% 88%, #282c38 0%, #16181e 55%, #0b0c0f 100%); transition: opacity .8s var(--a-ease), visibility 0s .8s; }
.has-office .s-office { opacity: 1; visibility: visible; transition: opacity .8s var(--a-ease), visibility 0s; }
.s-office::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(38% 26% at 50% 86%, #f0883e1a, transparent 70%); }
.s-office::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 60% at 50% 45%, #0b0c0f8c 0%, #0b0c0f59 60%, #0b0c0f33 100%); transition: opacity 1s var(--a-ease); }
.s-office svg { position: absolute; max-width: none; left: 50%; top: 50%; width: 130vw; height: 100vh; transform: translate(-50%, -50%) scale(1.06); opacity: 0; transition: transform 1.25s cubic-bezier(.22,.8,.2,1), opacity 1.1s var(--a-ease), left 1.1s var(--a-ease); }
.has-office .s-office svg { transform: translate(-50%, -50%); opacity: 1; }
/* The focus: a frosted veil over the office (a fixed blur, so nothing re-blurs while it moves). Walking in
   dissolves it while the office glides closer, like a camera pulling focus. */
.s-veil { position: absolute; inset: 0; pointer-events: none; background: #0b0c0f1f; -webkit-backdrop-filter: blur(10px) saturate(1.05); backdrop-filter: blur(10px) saturate(1.05); transition: opacity 1s cubic-bezier(.3,.7,.2,1) .05s; }
.office-zoom .s-veil { opacity: 0; transition: opacity .9s cubic-bezier(.3,.7,.2,1) .12s; }
@media (max-width: 640px) { .s-veil { -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); } }
/* Behind the box the office is a blurred backdrop, so it holds still (a moving layer under a blur is redrawn
   every frame); it comes alive again when you walk in */
.has-office:not(.office-zoom) .s-office * { animation-play-state: paused !important; }
@media (min-width: 1100px) { .side-open .s-office svg { left: calc(50% + 144px); } }
.s-office .hq-bub text { font: 500 8.5px Inter, system-ui, sans-serif; fill: #1b1b1a; }
.search-page { transition: background-color .8s var(--a-ease); }
.has-office.search-page { background: #0b0c0f; }
.has-office .s-main, .has-office .s-foot, .has-office .s-top { position: relative; z-index: 1; }
.has-office .s-hero { padding: 0 0 6vh; min-height: calc(100vh - 64px); min-height: calc(100dvh - 64px); align-content: center; }
.has-office .s-logo { margin-bottom: 26px; }
.has-office .s-logo-pd .pd { width: clamp(52px, 6.5vw, 68px); }
.has-office .s-word { font-size: clamp(40px, 5.6vw, 56px); color: #f4f2ec; }
.has-office .s-sub { display: none; }
.has-office .s-for, .has-office .s-meter { color: #a9adb6; }
.has-office .s-meter b { color: #fff; }
.has-office .s-for input { color: #fff; }
.has-office .s-for input::placeholder { color: #7d828c; }
.has-office .s-for input:hover, .has-office .s-for input:focus { background: #ffffff12; border-color: #ffffff1f; }
@media (min-width: 1100px) { .has-office.side-open .s-meter { display: none; } }
.has-office .s-tray { background: #ffffff12; color: #c9ccd3; -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: inset 0 0 0 1px #ffffff14; }
.has-office .s-tray-btn:hover { background: #ffffff14; color: #fff; }
.has-office .s-idea { color: #9da2ab; }
.has-office .s-idea i { color: #c9ccd3; }
.has-office .s-idea:hover, .has-office .s-idea:focus-visible { background: #ffffff0f; color: #fff; }
/* Continue where you left off: toasts at the bottom right, like notifications, each closable */
.s-toasts { position: fixed; z-index: 25; right: 20px; bottom: 64px; display: grid; gap: 10px; width: min(360px, calc(100vw - 32px)); transition: opacity .4s var(--a-ease), filter .4s var(--a-ease), translate .4s var(--a-ease); }
.asked .s-toasts, .office-zoom .s-toasts { opacity: 0; filter: blur(8px); translate: 0 12px; visibility: hidden; pointer-events: none; }
.s-toast { position: relative; display: flex; align-items: center; border-radius: 20px; background: #2a2c33d9; color: #f4f2ec; -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); box-shadow: inset 0 0 0 1px #ffffff1f, 0 24px 60px -24px #000; animation: s-toast .7s var(--a-ease) backwards; animation-delay: calc(.9s + var(--i) * .15s); transition: opacity .25s, translate .25s var(--a-ease); }
.s-toast.bye { opacity: 0; translate: 24px 0; }
@keyframes s-toast { from { opacity: 0; translate: 0 18px; filter: blur(8px); } }
.s-toast-open { flex: 1; min-width: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 0 12px; align-items: center; padding: 12px 4px 12px 12px; border: 0; background: none; color: inherit; text-align: left; }
.s-toast-open i { grid-row: span 2; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: #ffffff14; color: #c9ccd3; }
.s-toast-open i svg { width: 20px; height: 20px; }
.s-toast-open span { display: grid; min-width: 0; line-height: 1.3; }
.s-toast-open small { font-size: 12px; color: #9da2ab; }
.s-toast-open b { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-toast-open em { grid-column: 2; font-style: normal; font-size: 12px; color: #8d929c; }
.s-toast-x { flex: none; align-self: flex-start; width: 28px; height: 28px; margin: 8px 8px 0 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: #ffffff14; color: #c9ccd3; opacity: .7; transition: opacity .2s, background .2s; }
.s-toast:hover .s-toast-x, .s-toast-x:focus-visible { opacity: 1; }
.s-toast-x:hover { background: #ffffff2b; color: #fff; }
.s-toast-x svg { width: 14px; height: 14px; }
.has-office .s-box { border-color: #ffffff2e; box-shadow: 0 0 0 1px #ffffff14, 0 40px 90px -30px #000; }
.has-office .s-foot { border-top-color: #ffffff0f; color: #7d828c; }
.has-office .s-foot a { color: #a9adb6; }
.has-office .s-foot a:hover { color: #fff; }
.has-office .s-top .s-side-btn { color: #e6e7ea; }
.has-office .s-top .s-side-btn:hover { background: #ffffff14; }
/* Walking into the office: tap it and the box, the chips and the footer fade up into a blur while the office
   grows to fill the page, lights up and drops its fade; every panda can be picked. Esc or Back leaves. */
.has-office .s-office svg { pointer-events: auto; cursor: zoom-in; }
.has-office:not(.office-zoom) .s-main { pointer-events: none; }
.has-office:not(.office-zoom) .s-hero > * { pointer-events: auto; }
.s-foot { transition: opacity .5s var(--a-ease), filter .6s var(--a-ease), transform .7s var(--a-ease); }
/* The search lifts away piece by piece (logo, box, tray, ideas), each fading up out of focus; coming back,
   they settle down in the same order once the office has pulled back */
.has-office .s-hero > * { transition: opacity .5s var(--a-ease), filter .55s var(--a-ease), transform .7s cubic-bezier(.22,.8,.2,1), box-shadow .25s, border-color .25s; }
.office-zoom .s-hero > * { opacity: 0; filter: blur(12px); transform: translateY(-28px) scale(.98); }
.office-zoom .s-hero > :nth-child(2) { transition-delay: .04s; }
.office-zoom .s-hero > :nth-child(3) { transition-delay: .08s; }
.office-zoom .s-hero > :nth-child(n+4) { transition-delay: .12s; }
.office-back .s-hero > * { transition-delay: .32s; }
.office-back .s-hero > :nth-child(2) { transition-delay: .38s; }
.office-back .s-hero > :nth-child(3) { transition-delay: .44s; }
.office-back .s-hero > :nth-child(n+4) { transition-delay: .5s; }
/* Inside, the page's columns are see-through to the pointer: every drag, scroll and pinch reaches the office */
.office-zoom .s-main, .office-zoom .s-hero, .office-zoom .s-top { pointer-events: none; }
.office-zoom .s-top .s-side-btn { pointer-events: auto; }
.office-zoom .s-foot { opacity: 0; filter: blur(12px); transform: translateY(16px); pointer-events: none; }
.office-zoom .s-office::after { opacity: 0; }
.office-zoom .s-office svg { transform: translate(-50%, -50%) scale(1.15); cursor: grab; touch-action: none; }
.office-in .s-office svg { filter: none; }
.office-zoom .s-office svg.panning { cursor: grabbing; }
.office-zoom { -webkit-user-select: none; user-select: none; }
.office-zoom input, .office-zoom textarea { -webkit-user-select: text; user-select: text; }
@media (min-width: 1100px) { .side-open.office-zoom .s-office svg { left: calc(50% + 144px); } }
.s-obar { position: fixed; z-index: 30; bottom: calc(24px + var(--bar-up, 0px)); left: 50%; box-sizing: border-box; width: min(520px, calc(100vw - 24px)); display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: 999px; background: #ffffff14; box-shadow: inset 0 0 0 1px #ffffff1f, 0 20px 50px -24px #000; -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); color: #e6e7ea; font-size: 13.5px; white-space: nowrap; opacity: 0; visibility: hidden; transform: translate(-50%, 12px); filter: blur(6px); transition: opacity .5s var(--a-ease), transform .7s var(--a-ease), filter .6s var(--a-ease), bottom .35s var(--a-ease), visibility 0s .7s; }
@media (min-width: 1100px) { .side-open .s-obar { left: calc(50% + 144px); } }
.office-zoom .s-obar { opacity: 1; visibility: visible; transform: translate(-50%, 0); filter: none; transition: opacity .6s var(--a-ease) .25s, transform .8s var(--a-ease) .25s, filter .6s var(--a-ease) .25s, visibility 0s; }
.s-obar button { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: #ffffff14; color: #fff; font-size: 13.5px; font-weight: 600; }
.s-obar button:hover { background: #ffffff26; }
.s-obar-back { padding-left: 10px !important; }
.s-obar-back svg { width: 16px; height: 16px; }
.s-obar-hq { background: #f4f2ec !important; color: #1b1b1a !important; }
.s-obar-hq:hover { background: #fff !important; }
.s-obar-sum { display: inline-flex; align-items: center; gap: 12px; padding: 0 10px; color: #b9bdc5; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.s-obar-sum b { color: #fff; font-weight: 600; }
.s-obar-sum span { display: inline-flex; align-items: center; gap: 6px; }
.s-pcard { position: fixed; z-index: 31; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; width: min(300px, calc(100vw - 24px)); padding: 14px; border-radius: 22px; background: #fffdf8eb; -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); box-shadow: inset 0 0 0 1px #ffffffb3, 0 30px 70px -24px #000c; color: var(--ink); transform: translateX(-50%); animation: s-pop .35s var(--a-ease); }
.s-pcard[hidden] { display: none; }
@keyframes s-pop { from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.96); filter: blur(6px); } }
.s-pcard-pd { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, #4f8a3b 14%, #fff); }
.s-pcard-pd .pd { width: 34px; }
.s-pcard b { display: block; font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; }
.s-pcard small { display: block; font-size: 12.5px; color: var(--ink-3); }
.s-pcard p { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.s-pcard p .s-dot { margin-top: 5px; flex: none; }
.s-pcard-go { grid-column: 1 / -1; display: flex; gap: 6px; margin-top: 8px; }
.s-pcard-go button { flex: 1; height: 34px; border: 0; border-radius: 999px; background: #0000000d; font-size: 13px; font-weight: 600; color: var(--ink); }
.s-pcard-go button:first-child { background: var(--ink); color: #fff; }
.s-pcard-go button:hover { filter: brightness(.95); }
@media (max-width: 640px) {
  .office-zoom .s-office svg { transform: translate(-50%, -50%) scale(1.4); }
  .s-obar { top: 12px; max-width: calc(100vw - 24px); }
  .s-obar-sum b, .s-obar-sum span + span { display: none; }
  .s-obar-hq { display: none !important; }
}
/* A room, picked inside the office: a frosted panel on the right with who's there, what the room has done
   and a chat (a bottom sheet on phones) */
.s-room { position: fixed; z-index: 32; top: 76px; right: 16px; bottom: 16px; width: min(380px, calc(100vw - 32px)); display: flex; flex-direction: column; border-radius: 26px; background: #fffdf8e6; -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); box-shadow: inset 0 0 0 1px #ffffffb3, 0 30px 80px -24px #000d; color: var(--ink); overflow: hidden; animation: s-sheet .45s var(--a-ease); }
.s-room[hidden] { display: none; }
@keyframes s-sheet { from { opacity: 0; transform: translateX(24px); filter: blur(8px); } }
.s-room header { display: flex; align-items: center; gap: 12px; padding: 16px 14px 12px 18px; border-bottom: 1px solid #0000000d; }
.s-room header > i { width: 14px; height: 14px; border-radius: 5px; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); }
.s-room header div { flex: 1; min-width: 0; }
.s-room header b { display: block; font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.s-room header small { font-size: 12.5px; color: var(--ink-3); }
.s-room-x { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #0000000d; color: var(--ink-2); }
.s-room-x:hover { background: #0000001a; }
.s-room-x svg { width: 14px; height: 14px; }
.s-room-body { flex: 1; overflow-y: auto; padding: 6px 16px 12px; display: grid; align-content: start; gap: 14px; }
.s-room-k { margin: 10px 0 6px; font-size: 12px; font-weight: 600; color: var(--ink-4); text-transform: uppercase; letter-spacing: .04em; }
.s-room-p { display: flex; gap: 10px; padding: 6px 0; }
.s-room-p > span { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--c) 16%, #fff); }
.s-room-p > span .pd { width: 26px; }
.s-room-p b { display: block; font-size: 14px; font-weight: 600; }
.s-room-p small { font-size: 12px; color: var(--ink-3); }
.s-room-p p, .s-room-row { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.s-room-row { padding: 5px 0; border-bottom: 1px solid #0000000a; }
.s-room-row em { margin-left: auto; padding-left: 8px; font-style: normal; font-size: 12px; color: var(--ink-4); white-space: nowrap; }
.s-room-stats { display: flex; gap: 16px; margin-bottom: 6px; font-size: 13px; color: var(--ink-3); }
.s-room-stats b { color: var(--ink); font-size: 16px; }
.s-room-empty { font-size: 13px; color: var(--ink-3); }
.s-room-chat > div { display: grid; gap: 6px; }
.s-room-msg { max-width: 85%; padding: 8px 12px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; }
.s-room-msg.you { justify-self: end; background: #ebe3d3; border-bottom-right-radius: 5px; }
.s-room-msg.them { justify-self: start; background: #fff; box-shadow: 0 0 0 1px #0000000d; border-bottom-left-radius: 5px; }
.s-room-msg.note { justify-self: center; max-width: 100%; padding: 4px 10px; font-size: 12px; color: var(--ink-3); background: #0000000a; }
.s-room-msg.wait { color: var(--ink-4); }
.s-room-ask { display: flex; align-items: center; gap: 6px; margin: 0 12px 12px; padding: 4px 4px 4px 16px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px #00000014; }
.s-room-ask input { flex: 1; min-width: 0; height: 40px; border: 0; outline: 0; background: none; font-size: 15px; color: var(--ink); }
.s-room-ask .s-go { width: 36px; height: 36px; }
@media (max-width: 640px) { .s-room { top: auto; left: 10px; right: 10px; bottom: 10px; width: auto; height: min(70vh, 560px); } @keyframes s-sheet { from { opacity: 0; transform: translateY(30px); } } }
/* The room panel and the panda card: the same dark frosted glass as the sidebar, the office glowing through */
.s-room, .s-pcard { --ink: #f6f4ef; --ink-2: #e2e3e7; --ink-3: #b3b7bf; --ink-4: #8e939c; --hover: #ffffff17;
  background: #1b1d238c; color: var(--ink); -webkit-backdrop-filter: blur(40px) saturate(1.8); backdrop-filter: blur(40px) saturate(1.8); box-shadow: inset 0 0 0 1px #ffffff26, inset 0 1px 0 #ffffff33, 0 30px 80px -24px #000d; }
.s-room header { border-bottom-color: #ffffff14; }
.s-room-x { background: #ffffff17; }
.s-room-x:hover { background: #ffffff2b; }
.s-room-p > span, .s-pcard-pd { background: color-mix(in srgb, var(--c, #4f8a3b) 30%, #ffffff1a); }
.s-room-row { border-bottom-color: #ffffff12; }
.s-room-msg.you { background: #ffffff2b; color: #fff; }
.s-room-msg.them { background: #ffffff14; box-shadow: inset 0 0 0 1px #ffffff14; color: var(--ink); }
.s-room-msg.note { background: #ffffff0f; }
.s-room-ask { background: #ffffff14; box-shadow: inset 0 0 0 1px #ffffff1f; }
.s-room-ask input { color: #fff; }
.s-room-ask input::placeholder { color: #9da2ab; }
.s-room-ask .s-go, .s-pcard-go button:first-child { background: #f6f4ef; color: #1b1b1a; }
.s-pcard-go button { background: #ffffff17; color: var(--ink); }
/* A goal for everyone: a frosted card under the office bar */
.s-obar-goal { background: #ffffff1f !important; }
.s-goal { position: fixed; z-index: 33; bottom: calc(24px + var(--dock-up, 0px)); left: 50%; width: min(520px, calc(100vw - 24px)); transform: translateX(-50%); display: grid; gap: 8px; padding: 14px; border-radius: 22px; --ink: #f6f4ef; color: var(--ink); background: #1b1d23b3; -webkit-backdrop-filter: blur(40px) saturate(1.8); backdrop-filter: blur(40px) saturate(1.8); box-shadow: inset 0 0 0 1px #ffffff26, 0 30px 80px -24px #000d; animation: s-pop2 .35s var(--a-ease); }
@keyframes s-pop2 { from { opacity: 0; transform: translateX(-50%) translateY(-6px); filter: blur(6px); } }
@media (min-width: 1100px) { .side-open .s-goal { left: calc(50% + 144px); } }
.s-goal[hidden] { display: none; }
.s-goal-k { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #a9adb6; }
.s-goal textarea { width: 100%; resize: none; padding: 10px 12px; border: 0; border-radius: 14px; background: #ffffff14; box-shadow: inset 0 0 0 1px #ffffff1f; font: inherit; font-size: 15.5px; line-height: 1.4; color: #fff; outline: none; }
.s-goal textarea::placeholder { color: #8d929c; }
.s-goal-bar { display: flex; align-items: center; gap: 10px; }
.s-goal-bar small { flex: 1; font-size: 12.5px; color: #a9adb6; }
.s-goal-bar button { height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: #f6f4ef; color: #1b1b1a; font-size: 13.5px; font-weight: 600; }
.s-goal-bar button:disabled { opacity: .5; }
.s-goal-out { font-size: 13.5px; line-height: 1.45; color: #e2e3e7; }
.s-goal-out a { color: #9fd0ff; }
.s-room-modes { display: flex; gap: 2px; margin: 0 12px 8px; padding: 3px; border-radius: 999px; background: #ffffff12; justify-self: start; width: max-content; }
.s-room-modes button { height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: none; font-size: 12.5px; font-weight: 500; color: #b3b7bf; }
.s-room-modes button[aria-checked="true"] { background: #ffffff2b; color: #fff; font-weight: 600; }
a.s-room-msg.note { color: #9fd0ff; text-decoration: none; }
@media (max-width: 640px) { .s-obar-goal span { display: none; } .s-goal { bottom: 12px; } }
/* Goals, followed inside the office: a frosted panel at the bottom left */
.s-gtrack { position: fixed; z-index: 31; left: 16px; right: 92px; bottom: 20px; max-height: min(42vh, 420px); overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; padding: 12px 14px 14px; border-radius: 22px; --ink: #f6f4ef; color: var(--ink); background: #1b1d238c; -webkit-backdrop-filter: blur(40px) saturate(1.8); backdrop-filter: blur(40px) saturate(1.8); box-shadow: inset 0 0 0 1px #ffffff26, 0 30px 80px -24px #000d; animation: s-sheet2 .45s var(--a-ease); }
.s-gtrack[hidden] { display: none; }
@keyframes s-sheet2 { from { opacity: 0; transform: translateY(16px); filter: blur(8px); } }
@media (min-width: 1100px) { .side-open .s-gtrack { left: 300px; } }
/* across the bottom: the work on the left, the conversation on the right, each scrolling on its own */
body:has(.s-room:not([hidden])) .s-gtrack { right: 412px; }
.s-gt-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; min-height: 0; }
.s-gt-col { display: grid; align-content: start; gap: 8px; min-height: 0; overflow-y: auto; padding-right: 4px; }
.s-gt-side { grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; overflow: hidden; padding-right: 0; }
.s-gt-side .s-gt-chat { overflow-y: auto; align-content: end; padding-right: 4px; }
.s-gt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; min-height: 0; overflow-y: auto; align-content: start; padding-right: 4px; }
.s-gtrack .s-gt-col, .s-gt-side .s-gt-chat, .s-gt-list { scrollbar-width: thin; scrollbar-color: #ffffff2e transparent; }
.s-gtrack ::-webkit-scrollbar { width: 6px; }
.s-gtrack ::-webkit-scrollbar-track { background: transparent; }
.s-gtrack ::-webkit-scrollbar-thumb { background: #ffffff2e; border-radius: 3px; }
.s-gtrack ::-webkit-scrollbar-thumb:hover { background: #ffffff4d; }
.s-gt-x { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #ffffff17; color: #e2e3e7; }
.s-gt-x:hover { background: #ffffff2b; color: #fff; }
.s-gt-x svg { width: 13px; height: 13px; }
.s-gt-pill { position: fixed; z-index: 31; left: 16px; bottom: 24px; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: #1b1d238c; -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); box-shadow: inset 0 0 0 1px #ffffff26, 0 20px 50px -20px #000; color: #f4f2ec; font-size: 13.5px; font-weight: 600; animation: s-sheet2 .4s var(--a-ease); }
.s-gt-pill[hidden] { display: none; }
.s-gt-pill:hover { background: #2a2c33b3; }
@media (min-width: 1100px) { .side-open .s-gt-pill { left: 300px; } }
.ghost .s-gt-pill { bottom: 32px; }
.s-gtrack header { display: flex; align-items: center; gap: 8px; }
.s-gtrack header div { flex: 1; min-width: 0; }
.s-gtrack header b { display: block; font-size: 14.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-gtrack header small { font-size: 12px; color: #a9adb6; }
.s-gt-back, .s-gt-open, .s-gt-new { flex: none; height: 30px; min-width: 30px; display: grid; place-items: center; padding: 0 10px; border: 0; border-radius: 999px; background: #ffffff17; color: #f4f2ec; font-size: 13px; font-weight: 600; text-decoration: none; }
.s-gt-back:hover, .s-gt-open:hover, .s-gt-new:hover { background: #ffffff2b; }
.s-gt-bar { display: block; height: 5px; border-radius: 3px; background: #ffffff1a; overflow: hidden; }
.s-gt-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #7ee08a, #4cc9f0); transition: width .6s var(--a-ease); }
.s-gt-goal { display: grid; gap: 8px; padding: 10px 12px; border: 0; border-radius: 14px; background: #ffffff0f; color: inherit; text-align: left; }
.s-gt-goal:hover { background: #ffffff1c; }
.s-gt-goal span { display: grid; gap: 2px; min-width: 0; }
.s-gt-goal b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-gt-goal small { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #a9adb6; }
.s-gt-empty { font-size: 13px; line-height: 1.45; color: #a9adb6; padding: 4px 2px; }
.s-gt-ok { display: flex; align-items: center; gap: 6px; padding: 10px; border-radius: 14px; background: #ffcf6e1f; box-shadow: inset 0 0 0 1px #ffcf6e40; }
.s-gt-ok span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.s-gt-ok b { font-size: 13px; font-weight: 600; color: #ffe2a3; }
.s-gt-ok small { font-size: 11.5px; color: #c9ccd3; line-height: 1.35; }
.s-gt-ok button { flex: none; height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: #f6f4ef; color: #1b1b1a; font-size: 12.5px; font-weight: 700; }
.s-gt-ok button.no { background: #ffffff17; color: #e2e3e7; font-weight: 600; }
.s-gt-tasks { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }
.s-gt-tasks li { display: flex; align-items: center; gap: 9px; padding: 7px 4px; border-bottom: 1px solid #ffffff10; }
.s-gt-tasks li > i { flex: none; width: 8px; height: 8px; border-radius: 3px; background: var(--c); }
.s-gt-tasks li span { flex: 1; min-width: 0; display: grid; }
.s-gt-tasks li b { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-gt-tasks li small { font-size: 11.5px; color: #8d929c; }
.s-gt-tasks li em { flex: none; font-style: normal; font-size: 11.5px; color: #a9adb6; }
.s-gt-tasks li.st-running em { color: #8fe39a; }
.s-gt-tasks li.st-running > i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 35%, transparent); animation: hq-glow 1.6s ease-in-out infinite; }
.s-gt-tasks li.st-completed b { color: #a9adb6; text-decoration: line-through; text-decoration-color: #ffffff40; }
.s-gt-tasks li.st-waiting_input em, .s-gt-tasks li.st-waiting_approval em { color: #ffcf6e; }
.s-gt-tasks li.st-failed em { color: #ff8a7a; }
.s-gt-wait span { font-size: 13px; color: #a9adb6; }
.s-gt-chat { display: grid; gap: 6px; }
.s-gt-chat p { max-width: 92%; padding: 7px 10px; border-radius: 14px; font-size: 12.5px; line-height: 1.45; white-space: pre-wrap; }
.s-gt-chat p b { display: block; font-size: 11px; color: #a9adb6; font-weight: 600; }
.s-gt-chat .you { justify-self: end; background: #ffffff2b; }
.s-gt-chat .them { justify-self: start; background: #ffffff12; }
.s-gt-ask { display: flex; gap: 6px; padding: 3px 3px 3px 12px; border-radius: 999px; background: #ffffff14; box-shadow: inset 0 0 0 1px #ffffff1f; }
.s-gt-ask input { flex: 1; min-width: 0; height: 32px; border: 0; outline: 0; background: none; color: #fff; font-size: 14px; }
.s-gt-ask input::placeholder { color: #8d929c; }
.s-gt-ask button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f6f4ef; color: #1b1b1a; font-weight: 700; }
/* Images for the goal: a round + in the box, the picked ones in a tray above it, and images in the chat */
.s-gt-ask .s-gt-add { flex: none; margin-left: -9px; background: #ffffff17; color: #e2e3e7; font-size: 16px; font-weight: 500; }
.s-gt-ask .s-gt-add:hover { background: #ffffff2b; color: #fff; }
.s-gt-ask .s-gt-add:disabled { opacity: .4; }
.s-gt-tray { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.s-gt-tray span { position: relative; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px #ffffff26; }
.s-gt-tray img { width: 100%; height: 100%; object-fit: cover; }
.s-gt-tray button { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #000a; color: #fff; font-size: 12px; line-height: 1; }
.s-gt-tray small { font-size: 12px; color: #a9adb6; }
.s-gt-mimgs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.s-gt-mimgs img { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.s-gt-col > .s-gt-mimgs img { width: 56px; height: 56px; }
/* A panda's question, answered right in the card */
.s-gt-q { align-items: end; }
.s-gt-q input { width: 100%; height: 32px; margin-top: 6px; padding: 0 10px; border: 0; outline: 0; border-radius: 10px; background: #0000002e; box-shadow: inset 0 0 0 1px #ffffff1f; color: #fff; font-size: 14px; }
.s-gt-q input::placeholder { color: #8d929c; }
.s-gt-q input:focus { box-shadow: inset 0 0 0 1px #ffcf6e80; }
/* Auto mode: lit when nothing waits on you */
.s-gtrack header .s-gt-auto.is-on { background: #ffcf6e; color: #2a1d00; }
.s-gt-autonote { font-size: 12px; line-height: 1.4; color: #a9adb6; padding: 0 2px; }
.s-gt-autonote a { color: #f4f2ec; text-decoration: underline; text-decoration-color: #ffffff59; }
/* the dock's one column never grows past the dock (a long step title or the header's buttons on a phone) */
.s-gtrack { grid-template-columns: minmax(0, 1fr); }
/* on a phone the two columns stack and scroll together: each keeps its full height, so they can't overlap */
@media (max-width: 640px) { .s-gt-cols > .s-gt-col { min-height: auto; } }
/* a step's title is a link to its task in the app; the one column keeps a long title to its ellipsis */
.s-gt-steps li span { grid-template-columns: minmax(0, 1fr); }
.s-gt-steps li span a { display: block; min-width: 0; color: inherit; text-decoration: none; }
.s-gt-steps li span a b { display: block; }
.s-gt-steps li span a:hover b { text-decoration: underline; text-decoration-color: #ffffff59; }
@media (max-width: 640px) { .s-gtrack { left: 10px; right: 10px; bottom: 16px; max-height: 58vh; } .s-gt-cols { grid-template-columns: minmax(0, 1fr); overflow-y: auto; } .s-gt-col, .s-gt-side { overflow: visible; } .s-gt-side { grid-template-rows: auto auto; } .s-gt-side .s-gt-chat { overflow: visible; } .s-gt-pill { left: 10px; bottom: 16px; } .office-zoom .s-ozoom { top: 70px; bottom: auto; } }
/* Zoom in, zoom out, fit: a frosted column at the bottom right, like Maps (left of a room's panel) */
.s-ozoom { position: fixed; z-index: 31; right: 20px; bottom: 24px; display: grid; padding: 4px; border-radius: 18px; background: #ffffff17; -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: inset 0 0 0 1px #ffffff26, 0 20px 50px -20px #000; opacity: 0; visibility: hidden; transform: translateY(10px); filter: blur(6px); transition: opacity .5s var(--a-ease), transform .6s var(--a-ease), filter .5s var(--a-ease), right .45s var(--a-ease), visibility 0s .6s; }
.office-zoom .s-ozoom { opacity: 1; visibility: visible; transform: none; filter: none; transition: opacity .6s var(--a-ease) .3s, transform .7s var(--a-ease) .3s, filter .6s var(--a-ease) .3s, right .45s var(--a-ease), visibility 0s; }
.s-room:not([hidden]) ~ .s-ozoom { right: 412px; }
.s-ozoom button { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 14px; background: none; color: #f4f2ec; }
.s-ozoom button + button { margin-top: 2px; }
.s-ozoom button:hover:not(:disabled) { background: #ffffff1f; }
.s-ozoom button:disabled { opacity: .35; }
.s-ozoom svg { width: 18px; height: 18px; }
@media (max-width: 640px) { .s-ozoom { right: 12px; bottom: max(16px, env(safe-area-inset-bottom)); } .s-room:not([hidden]) ~ .s-ozoom { opacity: 0; pointer-events: none; } }
/* The sidebar over the office: frosted glass, the rooms glowing through it */
.has-office .s-side { --ink: #f6f4ef; --ink-2: #e2e3e7; --ink-3: #b3b7bf; --ink-4: #8e939c; --hover: #ffffff17; --surface: #2c2e35; --surface-2: #ffffff17; --line: #ffffff1a; --line-2: #ffffff29;
  background: #1b1d238c; color: var(--ink); -webkit-backdrop-filter: blur(40px) saturate(1.8); backdrop-filter: blur(40px) saturate(1.8); box-shadow: inset 0 0 0 1px #ffffff26, inset 0 1px 0 #ffffff33, 0 30px 80px -30px #000000cc; }
.has-office .s-side-list > [aria-current="true"] { background: #ffffff1f; }
.has-office .s-side kbd { background: #ffffff17; color: var(--ink-3); border-color: transparent; }
/* The account over the office: an avatar that reads on glass, and a frosted menu with light text */
.has-office .s-acct .s-me span { background: #f6f4ef; color: #1b1b1a; }
.has-office .s-me-menu { background: #23252ce6; -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); box-shadow: inset 0 0 0 1px #ffffff26, 0 24px 60px -20px #000c; }
.has-office .s-me-menu p { border-bottom-color: #ffffff1a; color: #a9adb6; }
.has-office .s-me-orgs { border-bottom-color: #ffffff1a; }
.has-office .s-me-menu [role="menuitemradio"][aria-checked="true"]::after { color: #8fe39a; }
.has-office .s-me-menu a, .has-office .s-me-menu button { color: #f4f2ec !important; }
.has-office .s-me-menu a:hover, .has-office .s-me-menu button:hover { background: #ffffff17; }
.has-office .s-me-menu #meOut { color: #ff8a7a !important; }
.has-office .s-acct-in { background: #ffffff1f; color: #fff; }
.has-office .s-acct-up { background: #f6f4ef; color: #1b1b1a !important; }
/* A living office (isohq.js `alive`): idle pandas breathe and blink and take their break; working pandas
   type at glowing screens. Picked or hovered, a panda lifts; picked, it hops hello. */
.iso-alive .hq-panda .pb { scale: 1.2; transform-box: fill-box; transform-origin: 50% 100%; animation: hq-breathe 3.4s ease-in-out infinite; transition: scale .25s var(--a-ease), translate .25s var(--a-ease); }
@keyframes hq-breathe { 50% { transform: scale(1.03, .97); } }
.iso-alive .hq-panda[tabindex] { cursor: pointer; outline: none; }
.iso-alive .hq-panda[tabindex]:hover .pb, .iso-alive .hq-panda[tabindex]:focus-visible .pb, .iso-alive .hq-panda.picked .pb { scale: 1.36; translate: 0 -2px; }
.iso-alive .hq-panda.picked .pb { filter: drop-shadow(0 0 5px #fff9); }
.iso-alive .hq-panda.hi { animation: hq-hop .5s var(--a-ease); }
@keyframes hq-hop { 40% { translate: 0 -7px; } }
.iso-alive .hq-panda .head { transform-box: fill-box; transform-origin: 50% 90%; }
.iso-alive .hq-panda .eyes { transform-box: fill-box; transform-origin: center; animation: hq-blink 5.2s infinite; }
@keyframes hq-blink { 0%, 94%, 100% { transform: none; } 96% { transform: scaleY(.1); } }
.iso-alive .hq-panda.working .head { animation: hq-type .55s ease-in-out infinite alternate; }
.iso-alive .hq-panda.nap .pb { animation-duration: 5s; }
.iso-alive .hq-panda.nap .head { transform: rotate(12deg) translateY(1.5px); }
.iso-alive .hq-panda.chat .head { animation: hq-nod 2.2s ease-in-out infinite; }
.iso-alive .hq-panda.chat.to-l .head { rotate: -8deg; }
.iso-alive .hq-panda.chat.to-r .head { rotate: 8deg; }
@keyframes hq-nod { 0%, 100% { transform: none; } 20% { transform: translateY(1px); } 35% { transform: none; } 50% { transform: translateY(1px); } }
.iso-alive .hq-panda .mug { animation: hq-sip 6s ease-in-out infinite; }
@keyframes hq-sip { 0%, 55%, 100% { transform: none; } 65%, 82% { transform: translate(-4px, -7px) rotate(-18deg); } }
.iso-alive .hq-panda .donut { animation: hq-bite 5.5s ease-in-out infinite; }
@keyframes hq-bite { 0%, 50%, 100% { transform: none; } 60%, 72% { transform: translate(-4px, -8px) rotate(-12deg); } }
.iso-alive .hq-panda .steam { animation: hq-steam 2.2s ease-in-out infinite; }
@keyframes hq-steam { 0% { opacity: 0; transform: translateY(2px); } 50% { opacity: 1; } 100% { opacity: 0; transform: translateY(-3px); } }
.iso-alive .hq-panda .arms { transform-box: fill-box; transform-origin: 50% 100%; animation: hq-stretch 3.6s ease-in-out infinite; }
@keyframes hq-stretch { 0%, 100% { opacity: 0; transform: scaleY(.3); } 30%, 70% { opacity: 1; transform: none; } }
.iso-alive .zz text { font: 700 7px Inter, system-ui, sans-serif; fill: #cdd6ff; opacity: 0; animation: hq-z 2.4s ease-out infinite; }
@keyframes hq-z { 0% { opacity: 0; translate: 0 0; } 30% { opacity: .9; } 100% { opacity: 0; translate: 6px -9px; } }
.iso-alive .scr.on { filter: drop-shadow(0 0 4px #8fd0ff); animation: hq-screen 1.8s steps(3) infinite; }
@keyframes hq-screen { 50% { opacity: .7; } }
.iso-alive .hq-chat { transform-box: fill-box; transform-origin: 20% 100%; opacity: 0; animation: hq-say 5s var(--a-ease) infinite; }
.iso-alive .hq-chat.later { animation-delay: 2.5s; }
.iso-alive .hq-chat text { font-size: 9px; }
@keyframes hq-say { 0% { opacity: 0; scale: .4; } 8%, 40% { opacity: 1; scale: 1; } 48%, 100% { opacity: 0; scale: .8; } }
.iso-alive .hq-bub { animation: hq-float 3s ease-in-out infinite; }
@keyframes hq-float { 50% { translate: 0 -2px; } }
/* Every department's sign, floating over its back wall once you're inside */
.s-office .room-sign { opacity: 0; transition: opacity .5s var(--a-ease); }
.office-zoom .s-office .room-sign { opacity: 1; transition-delay: .5s; }
.room-sign .sign-bg { fill: #14161bcc; stroke: #ffffff26; stroke-width: 1; }
.room-sign .sign-t { font: 600 8px Inter, system-ui, sans-serif; fill: #f4f2ec; }
.room-sign .sign-meta { font-weight: 500; fill: #a9adb6; }
/* Landing after a walk or a drop: a little hop; visiting: a look around */
.iso-alive .hq-panda.landed .pb { animation: hq-land .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes hq-land { 0% { transform: scale(1.1, .85); } 50% { transform: translateY(-5px) scale(.95, 1.08); } 100% { transform: none; } }
/* Doors: shut while everyone is in; open when someone's out (at the cooler) or walking through */
.iso-alive .front .door-swung { display: none; }
.iso-alive .room.out .front .door-swung, .iso-alive .room.passing .front .door-swung { display: inline; }
.iso-alive .room.out .front .door-shut, .iso-alive .room.passing .front .door-shut { display: none; }
/* The near walls are glass, so you can see in */
.iso-alive .front .glass { opacity: .5; }
/* A room at work: its floor glows and breathes, sparks rise from busy desks, its sign says so */
.iso-alive .room-glow { opacity: .25; animation: hq-glow 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes hq-glow { 50% { opacity: .55; } }
.iso-alive .sparks circle { opacity: 0; animation: hq-spark 1.4s ease-out infinite; }
@keyframes hq-spark { 0% { opacity: 0; translate: 0 0; } 25% { opacity: 1; } 100% { opacity: 0; translate: 0 -18px; } }
.room-sign.busy .sign-bg { stroke: #7ee08a99; }
.room-sign .sign-meta.busy { fill: #8fe39a; }
/* Celebrations for finished work: confetti, a disco ball, fireworks, balloons, or a dance */
.party.confetti rect { animation: hq-confetti 2.6s cubic-bezier(.2,.6,.4,1) forwards; opacity: 0; }
@keyframes hq-confetti { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } }
.party.disco .ball { animation: hq-ball 4.8s cubic-bezier(.3,1.3,.5,1) forwards; }
@keyframes hq-ball { 0% { transform: translateY(-80px); opacity: 0; } 15% { transform: none; opacity: 1; } 85% { transform: none; opacity: 1; } 100% { transform: translateY(-80px); opacity: 0; } }
.party.disco .ball ellipse { animation: hq-spin 1s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hq-spin { to { transform: scaleX(-1); } }
.party.disco .spot { opacity: 0; mix-blend-mode: screen; animation: hq-spot 1.2s ease-in-out 4 alternate; }
@keyframes hq-spot { 0% { opacity: 0; translate: 0 0; } 30%, 100% { opacity: .75; } 100% { translate: var(--sx) var(--sy); } }
.party.fireworks .burst { opacity: 0; transform-box: fill-box; transform-origin: center; animation: hq-burst 1.3s ease-out 2; }
@keyframes hq-burst { 0% { opacity: 1; scale: .2; } 70% { opacity: 1; } 100% { opacity: 0; scale: 1.3; } }
.party.balloons .balloon { animation: hq-balloon 4.6s ease-in forwards; }
@keyframes hq-balloon { 0% { opacity: 0; translate: 0 10px; } 15% { opacity: 1; } 100% { opacity: 0; translate: var(--sway) -170px; } }
.party .pop { font-size: 16px; opacity: 0; animation: hq-pop 1.6s ease-out 2; }
@keyframes hq-pop { 0% { opacity: 0; translate: 0 10px; scale: .5; } 30% { opacity: 1; scale: 1.2; } 100% { opacity: 0; translate: 0 -30px; scale: 1; } }
.iso-alive .hq-panda.dance .pb { animation: hq-dance .4s ease-in-out 8 alternate !important; }
@keyframes hq-dance { from { transform: translateY(0) rotate(-8deg); } to { transform: translateY(-7px) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .party * { animation: none !important; opacity: 1 !important; } .iso-alive .room-glow { opacity: .4; } }
/* Picked up: it dangles and looks surprised; put down: it walks home. At the cooler, they nod and chat. */
.iso-alive .hq-panda.held { cursor: grabbing; }
.iso-alive .hq-panda.held .zz { display: none; }
.iso-alive .hq-panda.held .pb { transform-origin: 50% 0; animation: hq-dangle .7s ease-in-out infinite alternate; scale: 1.3; filter: drop-shadow(0 10px 6px #0008); }
@keyframes hq-dangle { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
.iso-alive .hq-panda.walking .pb { animation: hq-walk .32s ease-in-out infinite alternate; }
@keyframes hq-walk { from { transform: translateY(0) rotate(-5deg); } to { transform: translateY(-2.5px) rotate(5deg); } }
.iso-alive .hq-say text, .iso-alive .hq-chat text { font-size: 9px; }
.iso-alive .hq-panda.cooler .head { animation: hq-nod 2.2s ease-in-out infinite; }
.iso-alive .hq-panda.cooler.to-l .head { rotate: -8deg; }
.iso-alive .hq-panda.cooler.to-r .head { rotate: 8deg; }
.iso-alive .hq-win.lit { filter: drop-shadow(0 0 5px #f5d58a); }
.iso-alive .lamp { filter: drop-shadow(0 0 6px #f2e3b8); }
.iso-alive .leaves { transform-box: fill-box; transform-origin: 50% 100%; animation: hq-sway 6s ease-in-out infinite; }
@keyframes hq-sway { 50% { rotate: 3deg; } }
.iso-alive .room { cursor: pointer; }
.iso-alive .room:hover .outline { opacity: .7; }
.s-office .room .outline { opacity: 0; transition: opacity .2s; }
@media (prefers-reduced-motion: reduce) {
  .iso-alive *, .s-pcard, .s-obar { animation: none !important; transition: none !important; }
  .iso-alive .hq-chat, .iso-alive .zz text { opacity: 1; }
}
/* The home view rises in: each piece fades up out of a soft blur, one after another */
.search-page:not(.asked) .s-hero > * { animation: s-rise .9s var(--a-ease) backwards; }
.search-page:not(.asked) .s-hero > :nth-child(2) { animation-delay: .06s; }
.search-page:not(.asked) .s-hero > :nth-child(3) { animation-delay: .12s; }
.search-page:not(.asked) .s-hero > :nth-child(n+4) { animation-delay: .18s; }
@keyframes s-rise { from { opacity: 0; transform: translateY(12px); filter: blur(10px); } }
@media (max-width: 640px) { .s-office svg { width: 240vw; } .has-office .s-hero { padding: 0 0 4vh; min-height: calc(100dvh - 24px); } .has-office .s-foot { background: linear-gradient(180deg, #0b0c0f00, #0b0c0f 45%); border-top-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .s-office, .s-office svg, .search-page, .s-ideas, .s-toasts, .s-veil, .has-office .s-hero > * { transition: none; } .search-page:not(.asked) .s-hero > *, .s-toast, .s-plus-menu { animation: none; } }
/* Ghost mode: a panda in a ghost costume in the corner; inside, a black bar on top, the box outlined in
   dashes, the office in black and white, and a line saying what isn't kept */
.s-top { position: relative; }
.s-ghost-btn { margin-left: auto; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 12px; background: none; transition: background .2s, transform .25s var(--a-ease); }
.s-ghost-btn:hover { background: var(--hover); transform: translateY(-1px) rotate(-6deg); }
.s-ghost-btn svg { width: 28px; height: 28px; }
.has-office .s-ghost-btn:hover { background: #ffffff17; }
.s-ghost-btn[aria-pressed="true"] { background: #ffffff24; box-shadow: inset 0 0 0 1px #ffffff40; }
.s-ghostbar { position: fixed; z-index: 85; top: 0; left: 0; right: 0; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 16px; background: #09090b; color: #fff; font-size: 14px; animation: s-drop .35s var(--a-ease); }
.s-ghostbar[hidden] { display: none; }
@keyframes s-drop { from { transform: translateY(-100%); } }
.s-ghostbar i { width: 24px; height: 24px; display: grid; place-items: center; }
.s-ghostbar i svg { width: 22px; height: 22px; }
.s-ghostbar b { font-weight: 600; }
.s-ghostbar span { color: #9da2ab; font-size: 13px; }
.s-ghostbar button { margin-left: auto; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: #d6d8dd; }
.s-ghostbar button:hover { background: #ffffff1a; }
.s-ghostbar button svg { width: 15px; height: 15px; }
/* In ghost mode the whole site sits in a black frame with rounded inner corners, under the bar */
.s-ghostframe { position: fixed; z-index: 84; inset: 0; border-radius: 0; box-shadow: 0 0 0 100vmax #09090b, inset 0 0 0 1px #ffffff26; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .3s var(--a-ease) .25s, inset .6s cubic-bezier(.22,.8,.2,1), border-radius .6s cubic-bezier(.22,.8,.2,1), visibility 0s .6s; }
/* going in, the frame closes in from the screen's edges as its corners round; leaving, it opens back out */
.ghost .s-ghostframe { inset: 44px 10px 10px; border-radius: 20px; opacity: 1; visibility: visible; transition: opacity .15s var(--a-ease), inset .6s cubic-bezier(.22,.8,.2,1), border-radius .6s cubic-bezier(.22,.8,.2,1), visibility 0s; }
.search-page { transition: background-color .8s var(--a-ease), padding .6s cubic-bezier(.22,.8,.2,1); }
.s-side { transition: transform .32s var(--a-ease), opacity .32s var(--a-ease), visibility .32s, background-color .8s var(--a-ease), top .6s cubic-bezier(.22,.8,.2,1), left .6s cubic-bezier(.22,.8,.2,1), bottom .6s cubic-bezier(.22,.8,.2,1); }
.s-logo.swap .s-logo-pd, .s-logo.swap .s-word { animation: s-swap .6s var(--a-ease) backwards; }
.s-logo.swap .s-word { animation-delay: .08s; }
@keyframes s-swap { from { opacity: 0; filter: blur(10px); transform: translateY(6px) scale(.96); } }
.ghost.search-page { padding: 44px 10px 10px; }
.ghost .s-side { left: 20px; bottom: 20px; }
.ghost .s-toasts { right: 28px; bottom: 72px; }
.ghost .s-ozoom { right: 28px; bottom: 32px; }
.ghost .s-gtrack { bottom: 32px; }
@media (min-width: 1100px) { .ghost.side-open .s-gtrack { left: 308px; } }
@media (max-width: 640px) { .ghost .s-ghostframe { inset: 44px 6px 6px; border-radius: 16px; } .ghost.search-page { padding: 44px 6px 6px; } }
.ghost .s-side { top: 56px; }
.ghost .s-obar { top: 62px; }
.ghost .s-goal { top: 114px; }
.s-ghost-note { display: none; }
.ghost:not(.asked) .s-ghost-note { display: block; max-width: 560px; margin-top: 18px; padding: 0 12px; text-align: center; font-size: 13.5px; line-height: 1.5; color: #a9adb6; }
.ghost .s-box { outline: 2px dashed #ffffff5c; outline-offset: 5px; }
.ghost .s-ghostbar { box-shadow: none; }
.ghost .s-office svg, .ghost.office-in .s-office svg { filter: grayscale(1) contrast(1.05); transition: transform 1.25s cubic-bezier(.22,.8,.2,1), opacity 1.1s var(--a-ease), left 1.1s var(--a-ease), filter .7s var(--a-ease); }
.ghost .s-office { background: radial-gradient(70% 55% at 50% 88%, #2a2a2a 0%, #161616 55%, #0b0b0b 100%); }
.ghost .s-office::before { opacity: 0; }
/* ghost pandas drift instead of breathing */
.iso-alive .hq-panda.ghosty .pb { animation: hq-ghost 3s ease-in-out infinite; }
@keyframes hq-ghost { 50% { transform: translateY(-3px); } }
.s-word.is-incognito { font-weight: 600; letter-spacing: -.035em; font-size: clamp(34px, 4.6vw, 48px); }
.s-ghost-pd { display: block; animation: s-poof .7s cubic-bezier(.3,1.6,.5,1), s-float 3.2s ease-in-out .7s infinite; }
@keyframes s-poof { 0% { opacity: 0; transform: scale(.3) rotate(-25deg); filter: blur(6px); } 60% { opacity: 1; transform: scale(1.12) rotate(6deg); filter: none; } 100% { transform: none; } }
.s-ghost-pd svg { width: 100%; height: auto; display: block; }
@keyframes s-float { 50% { transform: translateY(-5px) rotate(-3deg); } }
@media (max-width: 640px) { .s-ghostbar span { display: none; } }
@media (prefers-reduced-motion: reduce) { .s-ghost-pd, .s-ghostbar, .s-logo.swap .s-logo-pd, .s-logo.swap .s-word { animation: none; } .s-ghostframe { transition: none; } }
.office-zoom .s-ghost-btn { opacity: 0; pointer-events: none; }
/* Inside ghost mode the bar's × is the way out, so the corner button steps aside */
.ghost .s-ghost-btn { display: none; }
/* Your goals in the sidebar: what needs you, who's working, how far along */
.s-goalrow { display: flex; align-items: flex-start; gap: 10px; }
.s-goalrow > i { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--surface-2); font-style: normal; font-size: 14px; }
.s-goalrow span { display: grid; gap: 3px; min-width: 0; flex: 1; }
.s-goalrow small { display: flex; align-items: center; gap: 4px; }
.s-goalrow .s-gt-bar { height: 3px; margin-top: 2px; }
.s-goalrow.is-new { animation: s-newrow 1.6s var(--a-ease); }
@keyframes s-newrow { 0% { opacity: 0; transform: translateX(-10px); background: #f0883e33; } 30% { opacity: 1; transform: none; background: #f0883e33; } 100% { background: transparent; } }
/* The goals under Goals & Workflows: indented, compact */
.s-side-goals { margin: 0 0 4px 18px; padding-left: 8px; border-left: 1px solid var(--line); }
.s-side-goals .s-goalrow > i { width: 22px; height: 22px; font-size: 12px; border-radius: 7px; }
.s-side-goals .s-goalrow b { font-size: 13px; }
.s-side-goals .s-goalrow small { font-size: 11.5px; }
.has-office .s-hq-btn[aria-current="true"] { background: #ffffff1f; }
/* The goal, in plain words: what's happening now, then the steps */
.s-gt-now { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 14px; background: #ffffff12; box-shadow: inset 0 0 0 1px #ffffff1a; font-size: 13.5px; line-height: 1.45; color: #e2e3e7; }
.s-gt-now b { color: #fff; }
.s-gt-now .s-dot { flex: none; }
.s-gt-now button { margin-left: auto; flex: none; height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: #f6f4ef; color: #1b1b1a; font-size: 12.5px; font-weight: 700; }
.s-gt-steps { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }
.s-gt-steps li { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid #ffffff10; }
.s-gt-steps li > i { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 11px; font-weight: 700; color: #e2e3e7; background: #ffffff14; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 70%, transparent); }
.s-gt-steps li span { flex: 1; min-width: 0; display: grid; }
.s-gt-steps li b { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-gt-steps li small { font-size: 11.5px; color: #8d929c; }
.s-gt-steps li em { flex: none; font-style: normal; font-size: 11.5px; color: #a9adb6; }
.s-gt-steps li.st-completed > i { background: #7ee08a; color: #0d2a12; box-shadow: none; }
.s-gt-steps li.st-completed b { color: #a9adb6; }
.s-gt-steps li.st-running > i { background: var(--c); color: #fff; animation: hq-glow 1.4s ease-in-out infinite; }
.s-gt-steps li.st-running em { color: #8fe39a; font-weight: 600; }
.s-gt-steps li.st-failed > i { background: #ff8a7a; color: #2a0d0a; box-shadow: none; }
.s-gt-steps li.st-failed em { color: #ff8a7a; }
.s-gt-steps li.st-waiting_input em, .s-gt-steps li.st-waiting_approval em, .s-gt-steps li.st-draft em { color: #ffcf6e; }
/* style.css's .st-draft (a status chip) also matches a draft step's row: not here */
.s-gt-steps li.st-draft { background: none; box-shadow: none; color: inherit; }
.s-gt-k { margin-top: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #8d929c; }
.s-gt-doc { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: #ffffff0f; color: #e2e3e7; font-size: 13px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-gt-doc:hover { background: #ffffff1c; color: #fff; }
.s-gtrack header .s-gt-new { white-space: nowrap; }
@media (max-width: 640px) { .s-gtrack header .s-gt-new[data-g="archive"] { display: none; } }
/* Always doing: goals that keep happening (routines), with Run now, Pause and Stop */
.s-gt-span { grid-column: 1 / -1; }
.s-gt-routine { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; padding: 9px 10px; border-radius: 14px; background: #ffffff0f; box-shadow: inset 0 0 0 1px #ffffff12; }
.s-gt-routine span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.s-gt-routine b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-gt-routine small { font-size: 12px; color: #a9adb6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-gt-routine button { flex: none; height: 28px; min-width: 28px; padding: 0 10px; border: 0; border-radius: 999px; background: #ffffff17; color: #e2e3e7; font-size: 12px; font-weight: 600; }
.s-gt-routine button:hover { background: #ffffff2b; color: #fff; }
.s-gt-routine button.warn { background: #ff8a7a; color: #2a0d0a; }
.s-gt-routine.is-paused b { color: #a9adb6; }

/* Always-on goals in the sidebar (under the goals) and the box's "Always on" card */
.s-routinerow.is-paused { opacity: .6; }
.s-routinerow > i { background: color-mix(in srgb, var(--hq-accent, #f5b93a) 14%, var(--surface-2)); }
.tr-routine { display: grid; grid-template-columns: 44px 1fr; gap: 6px 14px; align-items: start; padding: 18px 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.tr-routine > svg { grid-row: span 3; width: 44px; height: 44px; }
.tr-routine p { margin: 0; font-size: 15px; line-height: 1.45; }
.tr-routine-acts { margin-top: 4px !important; }

/* Headquarters, built into the office: a frosted panel (like a room's) with the deliverables and the teams */
.s-hqp header > i { background: #f0883e; box-shadow: 0 0 0 4px #f0883e38; }
.s-hqp .s-room-body { gap: 10px; padding-bottom: 18px; }
.s-hqp-deliver { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.s-hqp-deliver a { display: flex; align-items: center; gap: 9px; padding: 10px 11px; border-radius: 16px; background: #ffffff12; color: var(--ink); }
.s-hqp-deliver a:hover { background: #ffffff22; }
.s-hqp-deliver i { font-style: normal; font-size: 18px; }
.s-hqp-deliver span { display: grid; min-width: 0; }
.s-hqp-deliver b { font-size: 13.5px; }
.s-hqp-deliver small { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-hqp-room { display: grid; gap: 2px; padding: 10px 12px 8px; border-radius: 18px; background: color-mix(in srgb, var(--c) 16%, #ffffff0d); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent); }
.s-hqp-room h3 { display: flex; justify-content: space-between; align-items: center; margin: 0 0 4px; font-size: 14px; }
.s-hqp-room h3 button { display: inline-flex; align-items: center; gap: 8px; border: 0; padding: 2px 0; background: none; color: color-mix(in srgb, var(--c) 55%, #fff); font: inherit; font-weight: 650; cursor: pointer; }
.s-hqp-room h3 button i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.s-hqp-room h3 em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.s-hqp-desk { display: flex; align-items: center; gap: 10px; padding: 6px 2px; border-radius: 12px; color: var(--ink); }
.s-hqp-desk:hover { background: #ffffff14; }
.s-hqp-desk > i { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--c) 28%, #ffffff1f); }
.s-hqp-desk > i .pd { width: 32px; }
.s-hqp-desk.working > i .pd { animation: s-type .7s ease-in-out infinite alternate; }
.s-hqp-desk > span { display: grid; min-width: 0; }
.s-hqp-desk b { font-size: 13.5px; }
.s-hqp-desk small { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-hqp-desk small em { font-style: normal; color: #c4b5fd; }
.s-hqp-doing { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-hqp-acts { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 6px 0 0; }
.has-hq .s-gtrack, .has-hq .s-gt-pill { display: none; }
/* The job under way, at the top of Your projects while the pandas write it */
.s-paper.is-writing { cursor: default; opacity: .9; }
.s-paper.is-writing small { display: flex; align-items: center; gap: 5px; }
@media (max-width: 640px) { .s-hqp-deliver { grid-template-columns: 1fr; } }
/* Building the office from Headquarters: hire into a room, add a department */
.s-hqp-hire { justify-self: start; margin: 4px 0 2px; padding: 5px 10px; border: 0; border-radius: 999px; background: #ffffff17; color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.s-hqp-hire:hover { background: #ffffff2b; color: var(--ink); }
.s-hqp-add { display: flex; gap: 6px; margin-top: 4px; }
.s-hqp-add input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid #ffffff24; border-radius: 12px; background: #ffffff12; font: inherit; font-size: 13.5px; color: var(--ink); }
.s-hqp-add button { height: 38px; padding: 0 14px; border: 0; border-radius: 12px; background: #f4f2ec; color: #1b1b1a; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.s-hqp-add button:disabled { opacity: .5; }
.s-hqp-err { margin: 0; font-size: 12.5px; color: #ff9d8f; }

.s-hqp-add input::placeholder { color: var(--ink-4); }
.s-hqp .s-hqv-note { color: var(--ink-3); }
.s-hqp .a-more { color: var(--ink); }/* Your projects: archive and erase under the open project's folders; the archived list at the foot */
.s-proj-acts { display: flex; gap: 6px; padding: 6px 8px 4px 34px; }
.s-proj-acts button, .s-arch-acts button { padding: 4px 9px; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--ink-3); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.s-proj-acts button:hover, .s-arch-acts button:hover { color: var(--ink); background: var(--hover); }
.s-proj-acts button.warn, .s-arch-acts button.warn { background: #d9302f; color: #fff; }
.s-arch-toggle { margin-top: 4px; }
.s-paper.is-archived { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 6px 10px; border-radius: 12px; font-size: 14px; color: var(--ink-3); }
.s-paper.is-archived > span:first-of-type { display: grid; min-width: 0; flex: 1; }
.s-paper.is-archived b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-paper.is-archived small { font-size: 11.5px; }
.s-arch-acts { display: flex; gap: 4px; flex: none; }

/* The Headquarters panel floats at its own height on the right (a room's sheet still runs to the floor) */
/* Headquarters is a sheet that rises over the office, laid out like a rates board: tab-like pills and a
   raised center tab sit on its top edge, the cards below. It peeks in at the bottom; scrolling (the wheel
   anywhere in the office, or a drag on the sheet) moves it up over the rooms. The container spans the view
   and lets clicks through to the office; only the sheet and its edge take them. */
.s-hqp { top: 0; left: 0; right: 0; bottom: 0; width: auto; max-height: none; display: block; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; pointer-events: none; animation: none; }
.s-hqp::-webkit-scrollbar { display: none; }
.s-hqp-space { height: calc(100vh - 150px); }
/* the hero over the office, like a landing page's: an eyebrow, a big two-line headline, a lede, stats, a button */
.s-hqp-hero { pointer-events: auto; max-width: 760px; color: #f6f4ef; animation: s-hero .7s var(--a-ease) .1s both; }
@keyframes s-hero { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } }
.s-hqp-eyebrow { margin: 0 0 14px; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #b3b7bf; }
.s-hqp-hero h2 { margin: 0; font-family: var(--sans); font-size: clamp(40px, 4.6vw, 72px); line-height: 1.02; font-weight: 650; letter-spacing: -.04em; color: #fff; text-shadow: 0 10px 40px #0009; }
.s-hqp-hero h2 span { color: #fff; }
.s-hqp-lede { margin: 18px 0 0; max-width: 460px; font-size: 16px; line-height: 1.55; color: #d6d8dd; }
.s-hqp-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; font-size: 14.5px; color: #b3b7bf; }
.s-hqp-stats b { font-weight: 650; color: #fff; }
.s-hqp-stats i { width: 4px; height: 4px; border-radius: 50%; background: #6e737c; }
.s-hqp-cta { display: inline-flex; align-items: center; height: 52px; margin-top: 30px; padding: 0 26px; border-radius: 999px; background: var(--hq-accent, #f5b93a); color: #1b1b1a !important; font-size: 15.5px; font-weight: 600; text-decoration: none; box-shadow: 0 14px 40px -16px #f5b93a99; }
.s-hqp-cta:hover { filter: brightness(1.06); }
/* the office dims on the left so the hero reads, and the bar moves up out of the board's way */
.has-hq .s-obar { bottom: auto; top: 18px; }
@media (max-width: 900px) { .s-hqp-space { padding: 0 20px 150px; align-items: flex-end; } .s-hqp-hero h2 { font-size: 40px; } .s-hqp-lede { font-size: 14.5px; } .has-hq .s-office::after { background: linear-gradient(0deg, #0b0c0fe6, #0b0c0f40 70%); } }
.s-hqp-sheet { position: relative; pointer-events: auto; min-height: 100vh; margin: 0 12px; border-radius: 30px 30px 0 0; background: #262729; box-shadow: inset 0 1px 0 #ffffff1f, 0 -30px 80px -30px #000c; animation: s-dock .5s var(--a-ease); }
@keyframes s-dock { from { opacity: 0; transform: translateY(40px); } }
@media (min-width: 1100px) { .side-open .s-hqp-sheet { margin-left: 288px; } }
.has-hq .s-ozoom { opacity: 0; pointer-events: none; }
/* the top edge: pills like tabs on the left and right, the raised center tab between them */
.s-hqp-edge { position: absolute; left: 22px; right: 22px; bottom: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px; }
.s-hqp-pills { display: flex; align-items: flex-end; gap: 8px; min-width: 0; }
.s-hqp-pills.is-right { justify-content: flex-end; }
.s-hqp-pill { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 18px 0 12px; border: 0; border-radius: 22px 22px 0 0; background: linear-gradient(180deg, #ffffff2e, #ffffff12 60%, #26272900); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); box-shadow: inset 0 1px 0 #ffffff40, inset 1px 0 0 #ffffff1a, inset -1px 0 0 #ffffff1a; color: #f4f2ec; font: inherit; font-size: 14.5px; text-decoration: none; cursor: pointer; }
.s-hqp-pill[data-room] { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 45%, #ffffff1f), color-mix(in srgb, var(--c) 18%, #ffffff0d) 60%, #26272900); }
.s-hqp-pill:hover { filter: brightness(1.12); }
span.s-hqp-pill { cursor: default; }
.s-hqp-pill > i { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #ffffff1f; box-shadow: inset 0 0 0 1px #ffffff26; font-style: normal; }
.s-hqp-pill > i svg { width: 15px; height: 15px; }
.s-hqp-pill > i.is-live { background: #3ddc8433; color: #3ddc84; }
.s-hqp-pill > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-hqp-pill em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
/* the center tab: modes as icons (the chosen one lit), a field, a bright pill button, a hint */
.s-hqp-tab { position: relative; width: 470px; display: grid; gap: 10px; padding: 12px 16px 14px; border-radius: 28px 28px 0 0; background: #262729; box-shadow: inset 0 1px 0 #ffffff1f; }
.s-hqp-modes { display: flex; justify-content: center; gap: 22px; }
.s-hqp-modes button { display: grid; justify-items: center; gap: 4px; border: 0; padding: 0; background: none; color: #8e939c; font: inherit; font-size: 12.5px; cursor: pointer; }
.s-hqp-modes button i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #ffffff2e; color: #b3b7bf; }
.s-hqp-modes button i svg { width: 17px; height: 17px; }
.s-hqp-modes button:hover { color: #e6e7ea; }
.s-hqp-modes button[aria-checked="true"] { color: #fff; }
.s-hqp-modes button[aria-checked="true"] i { background: var(--hq-accent, #f5b93a); box-shadow: none; color: #1b1b1a; }
.s-hqp-row { display: flex; gap: 8px; }
.s-hqp-row label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border-radius: 16px; background: #1c1d1f; box-shadow: inset 0 0 0 1px #ffffff0f; color: #8e939c; font-size: 14px; }
.s-hqp-row label:focus-within { box-shadow: inset 0 0 0 1px #ffffff33; }
.s-hqp-row label svg { width: 16px; height: 16px; flex: none; }
.s-hqp-row input, .s-hqp-row select { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 14px; color: #fff; outline: none; appearance: none; }
.s-hqp-row select option { color: #1b1b1a; }
.s-hqp-row input::placeholder { color: #8d929c; }
.s-hqp-go { flex: none; height: 46px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--hq-accent, #f5b93a); color: #1b1b1a; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.s-hqp-go:hover { filter: brightness(1.06); }
.s-hqp-go:disabled { opacity: .5; }
.s-hqp-hint { margin: 0; text-align: center; font-size: 12.5px; color: #8e939c; }
.s-hqp-err { margin: 0; text-align: center; font-size: 12.5px; color: #ff9d8f; }
/* the cards: recessed into the sheet, a small label, a title line, a value line */
.s-hqp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; padding: 22px 22px 48px; }
.s-hqp-card { display: grid; align-content: start; gap: 10px; min-height: 124px; padding: 18px 20px; border: 0; border-radius: 22px; background: #1c1d1f; box-shadow: inset 0 0 0 1px #ffffff08; color: #f6f4ef; font: inherit; text-align: left; text-decoration: none; transition: background .2s var(--a-ease), transform .2s var(--a-ease); }
.s-hqp-card.is-link:hover, .s-hqp-card.is-panda[href]:hover, .s-hqp-card.is-hire:hover { background: #222326; transform: translateY(-2px); }
.s-hqp-card.is-hire { cursor: pointer; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); }
.s-hqp-card.is-note { background: none; box-shadow: inset 0 0 0 1px #ffffff14; }
.s-hqp-k { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 500; color: #8e939c; }
.s-hqp-k i { width: 8px; height: 8px; border-radius: 2px; background: var(--c, #9c9588); }
.s-hqp-t { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 500; color: #e6e7ea; }
.s-hqp-t .pd { width: 24px; height: 24px; flex: none; }
.s-hqp-t span { color: #8e939c; }
.s-hqp-t .a-more { color: #f6f4ef; }
.s-hqp-v { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 21px; font-weight: 500; letter-spacing: -.01em; color: #fff; }
.s-hqp-v small { font-size: 12px; font-weight: 400; letter-spacing: 0; color: #8e939c; }
.s-hqp-card.is-note .s-hqp-v small { line-height: 1.45; }
.s-hqp-card.is-panda .s-hqp-v { display: block; font-size: 14.5px; letter-spacing: 0; color: #e2e3e7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-hqp-card.is-panda .s-hqp-v .s-dot { display: inline-block; margin-right: 6px; vertical-align: middle; }
@media (max-width: 1200px) { .s-hqp-pill { padding-right: 12px; } .s-hqp-tab { width: 400px; } }
@media (max-width: 900px) { .s-hqp-space { height: calc(100vh - 120px); } .s-hqp-edge { position: static; grid-template-columns: 1fr; padding: 14px 16px 0; } .s-hqp-pills { flex-wrap: wrap; } .s-hqp-pill { flex: 1 1 140px; height: 46px; border-radius: 16px; } .s-hqp-tab { width: auto; border-radius: 22px; background: #1f2022; } .s-hqp-pills.is-right { justify-content: flex-start; } }
@media (max-width: 640px) { .s-hqp-sheet { margin: 0; } .s-hqp-grid { grid-template-columns: 1fr 1fr; padding: 16px 14px 40px; } .s-hqp-row { flex-wrap: wrap; } .s-hqp-go { width: 100%; } }
@media (max-width: 640px) { .s-obar { bottom: calc(14px + var(--bar-up, 0px)); } }
.office-zoom .s-obar { transition: opacity .6s var(--a-ease) .25s, transform .8s var(--a-ease) .25s, filter .6s var(--a-ease) .25s, bottom .35s var(--a-ease), visibility 0s; }
/* The bar is the goal form's width: when its name and buttons need the room, the counts step out */
.s-obar { container-type: inline-size; }
@container (max-width: 560px) { .s-obar-sum span { display: none; } }

/* The landing: the signed-out home for someone who hasn't done anything yet (body.is-landing). A headline over
   the office on the left, the box under it, the office's numbers and a way in; the office is clear (no veil)
   and sits to the right, the sidebar starts closed. The first job, a project or signing in turns it off. */
.s-land, .s-land-foot { display: none; }
.is-landing:not(.asked) .s-land, .is-landing:not(.asked) .s-land-foot { display: block; }
.is-landing:not(.asked) .s-hero { justify-items: start; padding-left: clamp(24px, 7vw, 112px); padding-right: 24px; }
.is-landing:not(.asked) .s-logo, .is-landing:not(.asked) .s-below, .is-landing:not(.asked) #tagline, .is-landing:not(.asked) .s-toasts { display: none; }
.is-landing:not(.asked) .s-box, .is-landing:not(.asked) .s-tray { justify-self: start; width: min(600px, 100%); margin-left: 0; margin-right: 0; }
.s-land { max-width: 760px; margin-bottom: 28px; color: #f6f4ef; }
.s-land-k { margin: 0 0 14px; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #b3b7bf; }
.s-land-h { margin: 0; font-family: var(--sans); font-size: clamp(42px, 5vw, 76px); line-height: 1.02; font-weight: 650; letter-spacing: -.04em; color: #fff; text-shadow: 0 10px 40px #0009; }
.s-land-lede { margin: 18px 0 0; max-width: 500px; font-size: 16.5px; line-height: 1.55; color: #d6d8dd; }
.s-land-foot { margin-top: 22px; }
.s-land-foot .s-hqp-stats { margin: 0; }
.s-land-acts { display: flex; align-items: center; gap: 22px; margin: 26px 0 0; }
.s-land-acts .s-hqp-cta { margin: 0; }
.s-land-in { font-size: 15px; font-weight: 600; color: #f6f4ef !important; text-decoration: none; }
.s-land-in:hover { text-decoration: underline; }
.is-landing:not(.asked) .s-veil { opacity: 0; }
.is-landing:not(.asked) .s-office::after { opacity: 1; background: linear-gradient(90deg, #0b0c0fee 0%, #0b0c0fb3 32%, #0b0c0f26 64%, #0b0c0f00 100%); }
.is-landing:not(.asked):not(.office-zoom) .s-office svg { transform: translate(-30%, -50%); }
@media (max-width: 900px) { .is-landing:not(.asked) .s-hero { padding-left: 20px; } .s-land-h { font-size: 40px; } .s-land-lede { font-size: 15px; } .is-landing:not(.asked) .s-office::after { background: linear-gradient(0deg, #0b0c0ff0 30%, #0b0c0f59 75%); } .is-landing:not(.asked):not(.office-zoom) .s-office svg { transform: translate(-50%, -50%); } }
/* The landing's headline outranks the site's heading color; the hero gets the whole width on the left */
.ap .s-land-h { color: #fff; }
.is-landing:not(.asked) .s-main { max-width: none; margin: 0; }
/* No bar over the office: the board's tab sets goals, Esc or New job leave, the sidebar opens Headquarters */
.s-obar { display: none !important; }
.s-office-exit { display: none; }
.office-zoom .s-office-exit { display: grid; margin-right: auto; margin-left: 6px; color: #f4f2ec; background: #ffffff14; box-shadow: inset 0 0 0 1px #ffffff1f; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.office-zoom .s-office-exit:hover { background: #ffffff26; }
.office-zoom .s-office-exit svg { width: 16px; height: 16px; }