/* The name is set in Cormorant Garamond italic (SIL Open Font Licence 1.1, see fonts/OFL.txt), served from this app. */
@font-face { font-family: "Mohona Display"; font-style: italic; font-weight: 600; font-display: block; src: url("fonts/cormorant-garamond-italic-latin.woff2") format("woff2"); }
@font-face { font-family: "Mohona Headline"; font-style: normal; font-weight: 800; font-display: block; src: url("fonts/cinzel-latin.woff2") format("woff2"); }
/* Mohona: muted pastel theme. Soft blue-grey tints carry the colour and each tint has one meaning (periwinkle = AlphaFold and
   selection, dusty blue = PDB and help, sage = assembled and safe); text and icons use the deep tone of the same family. */
:root {
  --bg: #f4f6fa; --surface: #ffffff; --surface-2: #f2f4f9; --surface-3: #e7ebf3; --border: #e2e6ef; --border-strong: #c9d0df;
  --text: #1d2540; --muted: #59627c; --faint: #8a92a7;
  --accent: #3b53a4; --on-accent: #ffffff; --accent-soft: #e6eaf7; --ring: rgba(59,83,164,.22);
  --fill: #d9e0f4; --fill-hover: #c9d3ef; --on-fill: #22347a;
  --hover: #eef1f8; --match: #f6e7a8; --match-text: #4a3a00; --range: #dbe5fb;
  --helix: #d9668f; --strand: #e2a53a; --unobs: #b6bccb;
  --viewer-bg: #ffffff; --danger: #a8324a; --danger-soft: #f8e7eb; --ok: #2c7a5b;
  --lav: #e4e8f6; --lav-ink: #2c4188; --sky: #deebf4; --sky-ink: #245571; --mint: #e0eee7; --mint-ink: #2c5c48;
  --peach: #f4ebdf; --peach-ink: #6d5430; --rose: #f5e4e8; --rose-ink: #853649; --butter: #f5efd5; --butter-ink: #655412;
  --band: linear-gradient(110deg, #e1e6f6 0%, #e3ecf6 48%, #e6f0ec 100%);
  --band-line: rgba(255,255,255,.9); --glass: rgba(255,255,255,.62); --glass-strong: rgba(255,255,255,.95);
  --wash-a: rgba(170,184,228,.20); --wash-b: rgba(190,214,230,.16); --wash-c: rgba(196,222,208,.16);
  --shadow: 0 1px 2px rgba(24,34,72,.06), 0 10px 28px rgba(24,34,72,.11);
  --shadow-card: 0 1px 2px rgba(24,34,72,.04), 0 10px 28px rgba(24,34,72,.07);
  --art-a: #93a6e6; --art-b: #8fbfe2; --art-c: #9bd3ba; --grad-b: #3d7fb8; --grad-c: #2f8f76;
  --display: "Mohona Display", "Didot", "Bodoni 72", "Bodoni MT", "Playfair Display", "Hoefler Text", "Baskerville", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --headline: "Mohona Headline", "Cinzel", "Trajan Pro", "Optima", "Palatino Linotype", Georgia, serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12151f; --surface: #1a1e2b; --surface-2: #212636; --surface-3: #2a3044; --border: #2b3145; --border-strong: #3f4762;
    --text: #e9ecf4; --muted: #a3abc0; --faint: #747d95;
    --accent: #a9b9f0; --on-accent: #16204a; --accent-soft: #252e52; --ring: rgba(169,185,240,.3);
    --fill: #2f3b6c; --fill-hover: #394780; --on-fill: #dfe6ff;
    --hover: #252b3e; --match: #5b4b12; --match-text: #f6e7a8; --range: #24305a;
    --helix: #e88aaa; --strand: #e9bb62; --unobs: #566078;
    --viewer-bg: #161a26; --danger: #f3a3b4; --danger-soft: #3a1c26; --ok: #86d3b0;
    --lav: #262f55; --lav-ink: #cbd6ff; --sky: #1e3242; --sky-ink: #b9d8ea; --mint: #1f382f; --mint-ink: #b3dcc8;
    --peach: #383023; --peach-ink: #e4d0aa; --rose: #3b222a; --rose-ink: #efbcc8; --butter: #39321a; --butter-ink: #eadb9c;
    --band: linear-gradient(110deg, #222b4f 0%, #1e2f45 50%, #1f352f 100%);
    --band-line: rgba(255,255,255,.09); --glass: rgba(255,255,255,.07); --glass-strong: rgba(26,30,43,.88);
    --wash-a: rgba(90,110,200,.12); --wash-b: rgba(80,140,180,.07); --wash-c: rgba(90,180,150,.06);
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.45);
    --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.35);
    --art-a: #6b80d8; --art-b: #5a9cc4; --art-c: #5fae95; --grad-b: #8ec5ee; --grad-c: #8fdcc0;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #12151f; --surface: #1a1e2b; --surface-2: #212636; --surface-3: #2a3044; --border: #2b3145; --border-strong: #3f4762;
  --text: #e9ecf4; --muted: #a3abc0; --faint: #747d95;
  --accent: #a9b9f0; --on-accent: #16204a; --accent-soft: #252e52; --ring: rgba(169,185,240,.3);
  --fill: #2f3b6c; --fill-hover: #394780; --on-fill: #dfe6ff;
  --hover: #252b3e; --match: #5b4b12; --match-text: #f6e7a8; --range: #24305a;
  --helix: #e88aaa; --strand: #e9bb62; --unobs: #566078;
  --viewer-bg: #161a26; --danger: #f3a3b4; --danger-soft: #3a1c26; --ok: #86d3b0;
  --lav: #262f55; --lav-ink: #cbd6ff; --sky: #1e3242; --sky-ink: #b9d8ea; --mint: #1f382f; --mint-ink: #b3dcc8;
  --peach: #383023; --peach-ink: #e4d0aa; --rose: #3b222a; --rose-ink: #efbcc8; --butter: #39321a; --butter-ink: #eadb9c;
  --band: linear-gradient(110deg, #222b4f 0%, #1e2f45 50%, #1f352f 100%);
  --band-line: rgba(255,255,255,.09); --glass: rgba(255,255,255,.07); --glass-strong: rgba(26,30,43,.88);
  --wash-a: rgba(90,110,200,.12); --wash-b: rgba(80,140,180,.07); --wash-c: rgba(90,180,150,.06);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.45);
  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.35);
  --art-a: #6b80d8; --art-b: #5a9cc4; --art-c: #5fae95; --grad-b: #8ec5ee; --grad-c: #8fdcc0;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background:
    radial-gradient(900px 480px at 4% 12%, var(--wash-a), transparent 60%),
    radial-gradient(820px 460px at 100% 34%, var(--wash-b), transparent 58%),
    radial-gradient(900px 560px at 46% 112%, var(--wash-c), transparent 60%),
    var(--bg);
  color: var(--text); font: 14px/1.45 var(--sans); -webkit-font-smoothing: antialiased; overflow: hidden;
}
::selection { background: var(--fill); color: var(--on-fill); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--mono); }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
:is(.btn, .mini, .tab, .ex, .ptile, .icon-btn, .lig, .lnk, .hint-btn, .search-go, .recent button):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Frame: the left menu, then the masthead above the page */
.app { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); height: 100vh; }
.mast { grid-column: 1; grid-row: 2; }
main.body, .page { grid-column: 1; grid-row: 3; }

/* Views. Away from the structure view the page scrolls as a document, and the viewer waits out of sight at a steady size. */
.home-hero, .home-try, .search-art { display: none; }
.app:not([data-view="entry"]) .entry-head { display: none; }
body:has(.app:not([data-view="entry"])) { overflow: auto; }
.app:not([data-view="entry"]) { height: auto; min-height: 100vh; grid-template-rows: auto auto 1fr auto; }
.app:not([data-view="entry"]) main.body { position: fixed; left: 0; right: 0; top: 150px; bottom: 0; visibility: hidden; pointer-events: none; }
.app:not([data-loaded]) main.body { grid-template-columns: minmax(0, 1fr); }
.app:not([data-loaded]) .side { display: none; }
.app:is([data-view="about"], [data-view="help"]) .mast { display: none; }

/* Masthead: the top bar and the entry's title band share one pastel wash */
.mast { position: relative; z-index: 30; background: var(--band); border-bottom: 1px solid var(--band-line); box-shadow: 0 1px 0 rgba(24,34,72,.05), 0 10px 26px rgba(24,34,72,.06); }
.mast::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(700px 260px at 14% 0%, rgba(255,255,255,.55), transparent 62%), radial-gradient(560px 220px at 88% 100%, rgba(255,255,255,.3), transparent 60%); }
:root[data-theme="dark"] .mast::before { opacity: .12; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mast::before { opacity: .12; } }
header.top { grid-column: 1; grid-row: 1; position: sticky; top: 0; z-index: 45; display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 16px 0 18px; background: var(--band); box-shadow: 0 1px 0 rgba(24,34,72,.06); }
.app:not([data-view="entry"]) header.top { box-shadow: 0 1px 0 rgba(24,34,72,.06), 0 8px 24px rgba(24,34,72,.07); }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 16.5px; letter-spacing: -.015em; white-space: nowrap; }
.brand-logo { width: 30px; height: 30px; flex: none; display: block; filter: drop-shadow(0 2px 6px rgba(24,34,72,.22)); }
/* The name is set as a wordmark: an italic display serif in flowing ink */
.wordmark { font-family: var(--display); font-style: italic; font-weight: 600; font-synthesis: none; letter-spacing: -.01em; background: linear-gradient(100deg, var(--accent) 0%, var(--grad-b) 34%, var(--grad-c) 58%, var(--grad-b) 80%, var(--accent) 100%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.brand .wordmark { display: inline-block; font-size: 30px; line-height: 1; padding: 1px 5px 5px 1px; margin-right: -3px; }
.brand .bn { font-weight: 500; font-size: 13.5px; color: var(--muted); margin-left: -1px; letter-spacing: 0; }
.top > .ver { font: 500 10.5px var(--mono); color: var(--muted); background: var(--glass); border-radius: 999px; padding: 2px 7px; letter-spacing: 0; }
@media (max-width: 1180px) { .brand .bn, .top > .ver { display: none; } }
.search { position: relative; flex: 1; max-width: 720px; margin: 0 auto 0 10px; }
.search-box { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 15px; background: var(--glass-strong); border: 1px solid var(--band-line); border-radius: 999px; min-width: 0; box-shadow: 0 1px 2px rgba(24,34,72,.06), 0 6px 18px rgba(24,34,72,.08); transition: border-color .15s, box-shadow .15s; }
.search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring), 0 6px 18px rgba(24,34,72,.08); }
.search-box > .ic { color: var(--faint); }
.search-box input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: inherit; font: inherit; }
.search-box input::placeholder { color: var(--faint); }
.search-box input::-webkit-search-cancel-button { display: none; }
kbd { font: 11px var(--mono); color: var(--faint); border: 1px solid var(--border); border-radius: 6px; padding: 0 5px; line-height: 17px; }
.search-box:focus-within kbd { display: none; }
.seg { display: inline-flex; height: 28px; padding: 2px; background: var(--surface-2); border-radius: 999px; flex: none; }
.search-box .seg { background: transparent; }
.seg button { border: 0; background: transparent; color: var(--muted); font-size: 12.5px; padding: 0 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--fill); color: var(--on-fill); font-weight: 600; }
.search-go { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--fill); color: var(--on-fill); cursor: pointer; flex: none; transition: background .15s; }
.search-go:hover { background: var(--fill-hover); }
.btn { height: 34px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer; font-weight: 600; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s; }
.btn:hover { background: var(--hover); }
.btn.primary { background: var(--fill); color: var(--on-fill); border-color: transparent; }
.btn.primary:hover { background: var(--fill-hover); }
.btn.sm { height: 30px; padding: 0 12px; font-size: 13px; }
.btn.block { flex: 1; min-width: 0; }
.btn .ic { color: var(--accent); }
.btn.primary .ic { color: inherit; }
.icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: var(--muted); flex: none; }
.icon-btn:hover { color: var(--text); background: var(--hover); }
.icon-btn .ic { width: 18px; height: 18px; }
.icon-btn.sm { width: 30px; height: 30px; }
.icon-btn.sm .ic { width: 16px; height: 16px; }
.mast .icon-btn { background: var(--glass); color: var(--text); }
.mast .icon-btn:hover { background: var(--glass-strong); }

/* Search results */
.results { position: absolute; top: 46px; left: 0; right: 0; max-height: min(64vh, 560px); overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); z-index: 1000; padding: 6px; }
.res-head { padding: 8px 10px 6px; font-size: 12px; color: var(--muted); }
.res-item { padding: 8px 10px; cursor: pointer; border-radius: 12px; }
.res-item[aria-selected="true"], .res-item:hover { background: var(--hover); }
.res-l1 { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.res-id { font: 600 13px var(--mono); flex: none; color: var(--accent); }
.res-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.res-tag { font-size: 11px; color: var(--lav-ink); background: var(--lav); border-radius: 999px; padding: 0 8px; flex: none; }
.res-l2 { font-size: 12.5px; color: var(--muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-empty { padding: 10px 10px 12px; color: var(--muted); }
.res-item.has-img { display: flex; gap: 10px; align-items: center; }
.res-body { min-width: 0; flex: 1; }
.res-img { width: 44px; height: 44px; flex: none; background: #fff; border-radius: 10px; border: 1px solid var(--border); object-fit: contain; }
.res-loading { padding: 12px 10px; color: var(--muted); display: flex; gap: 10px; align-items: center; }

/* Title band: what is open, its key facts and the two or three things to do with it */
.entry-head { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 28px; padding: 2px 20px 16px; }
.hero-main { flex: 1 1 420px; min-width: 0; }
.hero-side { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.head-top { display: flex; align-items: center; gap: 8px; min-height: 22px; margin-bottom: 6px; }
.src { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; flex: none; }
.src.pdb { background: var(--sky); color: var(--sky-ink); }
.src.af { background: var(--lav); color: var(--lav-ink); }
.src.asm { background: var(--mint); color: var(--mint-ink); }
.entry-head .src { background: var(--glass-strong); box-shadow: 0 1px 2px rgba(24,34,72,.08); }
.head-id { font: 700 14px var(--mono); }
.head-sub { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.head-title { font-size: 23px; line-height: 1.2; font-weight: 700; margin: 0 0 4px; letter-spacing: -.02em; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.head-org { color: var(--muted); font-size: 13.5px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--lav); color: var(--lav-ink); white-space: nowrap; }
.chip b { font-weight: 700; }
.entry-head .chips { margin: 0; justify-content: flex-end; }
.entry-head .chips .chip { background: var(--glass); color: var(--text); box-shadow: inset 0 0 0 1px var(--band-line); }
.head-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.entry-head .btn { background: var(--glass-strong); border-color: var(--band-line); box-shadow: 0 1px 2px rgba(24,34,72,.08); }
.entry-head .btn:hover { background: var(--surface); box-shadow: 0 4px 12px rgba(24,34,72,.12); }

/* "More" menu */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-list { position: absolute; right: 0; top: calc(100% + 6px); min-width: 236px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); z-index: 50; }
.menu-list a, .menu-list button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: 10px; color: var(--text); font-size: 13px; text-align: left; cursor: pointer; text-decoration: none; }
.menu-list a:hover, .menu-list button:hover { background: var(--hover); text-decoration: none; }
.menu-list .ic { color: var(--accent); }
.menu-list hr { border: 0; border-top: 1px solid var(--border); margin: 4px 8px; }

/* Body: two cards. The side card takes about 42% of the width; the divider sets --side-w when dragged. */
main.body { display: grid; grid-template-columns: minmax(0, 1fr) var(--side-w, clamp(468px, 42vw, 800px)); gap: 14px; padding: 14px 16px 16px; min-height: 0; }
.stage { position: relative; min-width: 0; min-height: 0; border-radius: 20px; overflow: hidden; background: var(--viewer-bg); border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.viewer-wrap { position: absolute; inset: 0; background: var(--viewer-bg); }
#molstar { position: absolute; inset: 0; }
#molstar .msp-layout-standard { border: 0; }

/* Floating view controls */
.dock { position: absolute; left: 12px; right: 12px; bottom: 14px; width: fit-content; margin: 0 auto; z-index: 4; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px; padding: 4px 6px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow); }
.dock select { field-sizing: content; height: 30px; max-width: 170px; border: 0; border-radius: 999px; background: transparent; color: var(--text); font: 13px var(--sans); padding: 0 4px 0 10px; cursor: pointer; }
.dock select:hover { background: var(--hover); }
.dock select:focus-visible, .dbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dock-sep { width: 1px; height: 18px; background: var(--border-strong); margin: 0 4px; }
.dbtn { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.dbtn:hover { background: var(--hover); color: var(--text); }
.dbtn[aria-pressed="true"] { background: var(--fill); color: var(--on-fill); }
.dbtn .ic { width: 17px; height: 17px; }

/* Overlays */
.ex-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.ex { position: relative; text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-height: 178px; padding: 18px 18px 16px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text); font-size: 14px; cursor: pointer; box-shadow: var(--shadow-card); overflow: hidden; transition: transform .18s, box-shadow .18s, border-color .18s; }
.ex::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 84px; background: linear-gradient(180deg, var(--lav), transparent); pointer-events: none; }
.ex[data-kind="pdb"]::before { background: linear-gradient(180deg, var(--sky), transparent); }
.ex > * { position: relative; }
.ex:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.ex-top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ex .src { background: var(--surface); box-shadow: 0 1px 2px rgba(24,34,72,.1); }
.ex .ex-id { font: 700 15px var(--mono); letter-spacing: -.01em; }
.ex-name { font-size: 15.5px; font-weight: 650; line-height: 1.28; letter-spacing: -.012em; }
.ex .ex-sub { font-size: 12.5px; color: var(--muted); }
.ex-hint { margin-top: auto; padding: 12px 30px 0 0; font-size: 12.5px; font-weight: 550; color: var(--accent); }
.ex-go { position: absolute !important; right: 14px; bottom: 14px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--fill); color: var(--on-fill); transition: transform .18s; }
.ex-go .ic { width: 14px; height: 14px; }
.ex:hover .ex-go, .set-card:hover .ex-go { transform: translateX(3px); }
.recent { display: flex; flex-wrap: wrap; gap: 6px; }
.recent button { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 5px 12px 5px 6px; cursor: pointer; font-size: 12.5px; display: inline-flex; gap: 6px; align-items: center; }
.recent button:hover { background: var(--hover); border-color: var(--border-strong); }
.loading { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--viewer-bg) 55%, transparent); z-index: 6; pointer-events: none; }
.loading-card { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow); font-size: 13.5px; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--fill); border-top-color: var(--accent); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: fixed; left: 50%; top: 74px; transform: translateX(-50%); max-width: min(560px, calc(100% - 32px)); display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px 10px 16px; background: var(--danger-soft); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); border-radius: 16px; box-shadow: var(--shadow); z-index: 200; font-size: 13.5px; }
.toast button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 18px; line-height: 1; padding: 0 2px; }

/* Side card */
.side { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-card); }

/* Tabs */
.tabs { display: flex; gap: 2px; padding: 10px 10px; background: var(--surface-2); border-bottom: 1px solid var(--border); border-radius: 19px 19px 0 0; overflow-x: auto; scrollbar-width: none; }
.tab { border: 0; background: transparent; padding: 6px 11px; color: var(--muted); border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 13px; white-space: nowrap; transition: background .15s, color .15s; }
.tab:hover { color: var(--text); background: var(--surface); }
.tab[aria-selected="true"] { color: var(--on-fill); background: var(--fill); }
.panes { flex: 1; min-height: 0; overflow: auto; position: relative; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.pane { padding: 16px 18px 28px; }
.infobar { border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 19px 19px; padding: 8px 18px; font-size: 12.5px; color: var(--muted); min-height: 36px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.infobar b { color: var(--text); font-weight: 650; }
.infobar .dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 4px; vertical-align: -1px; }

/* Sections, help and small controls */
.sec { margin: 0 0 26px; }
.sec-h { display: flex; align-items: center; gap: 4px; margin: 0 0 9px; }
.sec h3 { font-size: 14px; font-weight: 700; letter-spacing: -.005em; color: var(--text); margin: 0; }
.hint-btn { width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--faint); cursor: pointer; }
.hint-btn:hover, .hint-btn[aria-expanded="true"] { color: var(--lav-ink); background: var(--lav); }
.hint-btn .ic { width: 15px; height: 15px; }
.hint-body { font-size: 12.5px; line-height: 1.5; color: var(--sky-ink); background: var(--sky); border-radius: 14px; padding: 10px 13px; margin: 0 0 11px; }
.hint-body p { margin: 0 0 6px; }
.hint-body p:last-child { margin: 0; }
.hint-body a { color: inherit; text-decoration: underline; }
.lead { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.lnk { border: 0; background: none; padding: 0; color: var(--accent); cursor: pointer; font-size: 12.5px; font-weight: 550; white-space: nowrap; }
.lnk:hover { text-decoration: underline; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; font-size: 12.5px; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.warn { color: var(--danger); font-size: 12.5px; margin: 8px 0 0; }
ul.warn { padding-left: 18px; }
.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mini { height: 28px; padding: 0 11px; font-size: 12.5px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); border-radius: 999px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.mini:hover { background: var(--hover); }
.mini.sm { height: 24px; padding: 0 9px; font-size: 12px; }
.chk { display: inline-flex; align-items: center; gap: 6px; margin-right: 12px; color: var(--text); cursor: pointer; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
.inline-form { display: flex; gap: 6px; align-items: center; }
.inline-form input { flex: 1; min-width: 0; max-width: 220px; height: 30px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 999px; padding: 0 12px; font: 13px var(--mono); }
.inline-form input:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--ring); }

/* Sequence */
.seq-controls { position: sticky; top: -16px; margin: -16px -18px 10px; padding: 16px 18px 10px; background: var(--surface); z-index: 2; border-bottom: 1px solid var(--border); }
.chain-row { margin-bottom: 8px; flex-wrap: nowrap; }
.chain-row #chain { flex: 1; min-width: 0; }
.pane select { font: inherit; font-size: 13px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; height: 30px; padding: 0 8px; max-width: 100%; }
.pane select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.find { flex: 1; min-width: 150px; display: flex; align-items: center; height: 28px; border: 1px solid var(--border); background: var(--surface-2); border-radius: 999px; padding: 0 11px; gap: 6px; }
.find:focus-within { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--ring); }
.find input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: inherit; font: 13px var(--mono); }
.find-count { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 12px; color: var(--muted); align-items: center; }
.legend .sw { display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: 5px; vertical-align: 2px; }
.legend .sw-uo { display: inline-block; font: 600 12px var(--mono); color: var(--unobs); margin-right: 4px; }
.seq-summary { font-size: 12px; color: var(--muted); margin-left: auto; }
.seq { display: flex; flex-wrap: wrap; gap: 10px 12px; font: 12.5px/1 var(--mono); user-select: none; -webkit-user-select: none; padding-top: 2px; }
.blk { display: flex; flex-direction: column; gap: 3px; }
.blk-n { font-size: 10px; color: var(--faint); height: 11px; line-height: 11px; padding-left: 1px; white-space: nowrap; }
.blk-r { display: flex; }
.r { position: relative; display: inline-block; width: 9px; text-align: center; padding: 3px 0 7px; border-radius: 3px; cursor: pointer; scroll-margin: 150px 0 24px; }
.r::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 4px; background: var(--trk, transparent); }
.r.b0 { --trk: #0053D6; } .r.b1 { --trk: #65CBF3; } .r.b2 { --trk: #FFDB13; } .r.b3 { --trk: #FF7D45; }
.r.sh { --trk: var(--helix); } .r.se { --trk: var(--strand); }
.r.uo { color: var(--unobs); }
.r.rg { background: var(--range); }
.r.mt { background: var(--match); color: var(--match-text); }
.r.hov { background: var(--fill); color: var(--on-fill); }
.r.act { background: var(--accent); color: var(--on-accent); }
.seq-note { color: var(--faint); font-size: 12.5px; padding: 10px 0 0; }

/* Details */
.kv { display: grid; grid-template-columns: 108px 1fr; gap: 7px 12px; margin: 0; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.cit { margin: 0; font-size: 13px; }
.cit-title { font-weight: 600; }
.func { font-size: 13px; margin: 0; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.func.open { display: block; }
.ent { padding: 12px 0; border-top: 1px solid var(--border); font-size: 13px; }
.ent:first-of-type { border-top: 0; padding-top: 2px; }
.ent-h { font-weight: 650; }
.ent-h .n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--lav); font: 700 11px var(--mono); color: var(--lav-ink); margin-right: 7px; }
.ent-m { color: var(--muted); margin-top: 2px; }
.ent-a { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.ligs { display: flex; flex-direction: column; gap: 5px; }
.lig { display: flex; gap: 8px; align-items: baseline; text-align: left; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; font-size: 12.5px; min-width: 0; transition: background .15s, border-color .15s; }
.lig:hover { background: var(--hover); border-color: var(--border-strong); }
.lig b { font-family: var(--mono); flex: none; color: var(--accent); }
.lig .nm { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.lig .ct { color: var(--faint); flex: none; }
.xref { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.xref td { padding: 7px 8px; border-top: 1px solid var(--border); vertical-align: baseline; }
.xref tr:first-child td { border-top: 0; }
.xref tr { cursor: pointer; }
.xref tr:hover td { background: var(--hover); }
.xref .id { font: 600 12.5px var(--mono); color: var(--accent); white-space: nowrap; }
.xref .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.xref .ch { color: var(--muted); overflow-wrap: anywhere; }
.xref thead td { color: var(--muted); font-weight: 700; font-size: 11.5px; border-top: 0; background: var(--surface-2); }
.xref thead td:first-child { border-radius: 10px 0 0 10px; }
.xref thead td:last-child { border-radius: 0 10px 10px 0; }
.xref thead + tbody tr:first-child td { border-top: 0; }
.dl-links { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }

/* Confidence */
.conf-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.conf-top .big { font-size: 30px; font-weight: 750; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.dist { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--surface-2); }
.dist span { display: block; height: 100%; }
.dist-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--muted); }
.dist-legend li { display: flex; align-items: center; gap: 6px; }
.dist-legend .sq { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.dist-legend b { color: var(--text); font-variant-numeric: tabular-nums; margin-left: auto; }
#plddt-plot svg { display: block; width: 100%; height: 150px; overflow: visible; }
.axis text { font: 10px var(--sans); fill: var(--faint); }
.axis line, .axis path { stroke: var(--border-strong); }
.readout { font-size: 12.5px; color: var(--muted); margin-top: 6px; min-height: 18px; }
.readout b { color: var(--text); }
.pae-box { position: relative; display: inline-block; margin-left: 18px; }
.pae-box canvas { display: block; cursor: crosshair; border-radius: 6px; image-rendering: pixelated; }
.pae-xlab { font-size: 11px; color: var(--muted); text-align: center; margin-top: 4px; }
.pae-sel { position: absolute; border: 1.5px solid var(--text); background: rgba(255,255,255,.12); pointer-events: none; }
.pae-scale { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); margin-top: 8px; flex-wrap: wrap; }
.pae-scale .grad { flex: 1; max-width: 220px; min-width: 80px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgb(13,92,42), rgb(110,170,110) 45%, rgb(244,250,244)); border: 1px solid var(--border); }
.swatch-inline { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin: 0 3px; }

/* Superposition */
.sup-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 12px; }
.sup-title .arrow { color: var(--muted); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat { border-radius: 16px; padding: 11px 14px; background: var(--lav); --ink: var(--lav-ink); }
.stat .v { font-size: 19px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.015em; color: var(--ink); }
.stat .k { font-size: 12px; color: var(--ink); line-height: 1.3; }
.diffs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; align-items: center; }
.opt-grid { display: grid; grid-template-columns: 96px 1fr; gap: 8px 10px; align-items: center; font-size: 13px; }
.opt-grid > label, .opt-grid > .lbl { color: var(--muted); }
.opt-grid > * { min-width: 0; }
input.num { width: 64px; height: 28px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 10px; padding: 0 8px; font: 12.5px var(--mono); }
input.num:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.seg.sm { height: 30px; justify-self: start; }
.seg.sm button { font-size: 12.5px; padding: 0 11px; }
#dev-plot svg { display: block; width: 100%; height: 150px; overflow: visible; }
.pick-list { display: flex; flex-direction: column; }
.pick { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13px; }
.pick:first-child { border-top: 0; padding-top: 2px; }
.pick .id { font: 600 12.5px var(--mono); flex: none; min-width: 58px; color: var(--accent); }
.pick .what { flex: 1; min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Oligomer */
.own-tpl { margin-top: 12px; }
.own-tpl input { max-width: 300px; }
.tpl-find { margin: 0 0 8px; height: 30px; }
.tpl-find input { font-family: var(--sans); }
.tpl-find input::-webkit-search-cancel-button { cursor: pointer; }
.xref.tpl tr.sel td { background: var(--lav); }
.xref.tpl tr.sel td:first-child { border-radius: 10px 0 0 10px; }
.xref.tpl tr.sel td:last-child { border-radius: 0 10px 10px 0; }
.tpl-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xref.asm tr { cursor: default; }
.xref.asm tr:hover td { background: none; }
.ent-a select { font: inherit; font-size: 12.5px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; height: 28px; padding: 0 8px; }
input.num.acc { width: 96px; }

/* Predict */
.mols { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ptiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ptile { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 11px 13px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); cursor: pointer; min-width: 0; transition: background .15s, border-color .15s; }
.ptile:hover { background: var(--hover); border-color: var(--border-strong); }
.ptile .ic { width: 18px; height: 18px; color: var(--faint); margin-top: 1px; }
.ptile .pt-txt, .ptile .pt-name, .ptile .pt-sub { display: block; min-width: 0; }
.ptile .pt-name { font-size: 13.5px; font-weight: 650; }
.ptile .pt-sub { font-size: 12px; color: var(--muted); }
.ptile[aria-pressed="true"] { border-color: transparent; background: var(--fill); color: var(--on-fill); }
.ptile[aria-pressed="true"] .ic, .ptile[aria-pressed="true"] .pt-sub { color: var(--on-fill); }
.safe { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--mint-ink); background: var(--mint); border-radius: 14px; padding: 8px 12px; margin: 10px 0 0; }
.safe .ic { color: inherit; margin-top: 1px; }
.ptool { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.ptool-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.ptool-h b { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.needs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.need { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; padding: 4px 11px 4px 9px; border-radius: 999px; background: var(--lav); color: var(--lav-ink); }
.need .ic { width: 14px; height: 14px; color: inherit; }
.srv { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }
.srv .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; transform: translateY(-1px); }
.srv .dot.ok { background: var(--ok); }
.srv .dot.no { background: var(--danger); }
.pactions { display: flex; gap: 6px; margin: 14px 0 0; }
.cmd-wrap { position: relative; margin: 6px 0 0; }
.cmd-label { font-size: 12.5px; color: var(--muted); margin: 14px 0 0; }
pre.cmd { margin: 0; padding: 10px 42px 10px 13px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; font: 11.5px/1.5 var(--mono); white-space: pre-wrap; word-break: break-all; color: var(--text); }
.cmd-copy { position: absolute; top: 5px; right: 5px; }
details.fold { margin-top: 12px; }
details.fold > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary .ic { width: 14px; height: 14px; color: var(--accent); transition: transform .15s; }
details.fold[open] > summary .ic.chev { transform: rotate(90deg); }
details.fold > .fold-body { margin: 8px 0 0; }
details.fold.more { margin-top: 7px; }
details.fold.more > summary { font-size: 12.5px; color: var(--accent); }
details.fold.more[open] > summary { color: var(--muted); }
.reqs { display: grid; grid-template-columns: 80px 1fr; gap: 6px 10px; font-size: 12.5px; margin: 0; }
.reqs dt { color: var(--muted); }
.reqs dd { margin: 0; }
.istep { display: grid; grid-template-columns: 22px 1fr; gap: 0 10px; margin: 10px 0 0; font-size: 12.5px; }
.istep .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; background: var(--fill); color: var(--on-fill); }
.istep .n.off { background: var(--surface-2); color: var(--faint); }
.istep b { font-weight: 650; }
.istep p { margin: 2px 0 0; color: var(--muted); }
.pconfirm { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; cursor: pointer; font-size: 12.5px; }
.pconfirm input { margin-top: 2px; flex: none; }
.links-row { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 12px 0 0; font-size: 12.5px; }

/* Gene view: each residue above its codon */
.seq-mode-row { margin-top: 8px; }
.cds-note { font-size: 12px; color: var(--muted); margin-top: 6px; }
.seq.dna { gap: 12px 14px; }
.seq.dna .r { width: auto; min-width: 26px; padding: 3px 1px 8px; display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.seq.dna .r b { font-weight: 600; }
.seq.dna .r .cod { font-size: 9.5px; color: var(--muted); }
.seq.dna .r .cod.x { color: var(--danger); font-weight: 700; }
.seq.dna .r.act .cod, .seq.dna .r.hov .cod { color: inherit; }

/* Pathways */
.rx { padding: 10px 13px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; }
.rx + .rx { margin-top: 6px; }
.rx-eq { font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.rx-arrow { color: var(--accent); font-weight: 700; padding: 0 2px; }
.rx .acts { margin-top: 5px; color: var(--muted); }
.path { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; }
.path + .path { margin-top: 6px; }
.path span { background: var(--lav); color: var(--lav-ink); border-radius: 999px; padding: 2px 10px; }
.path span:last-of-type { font-weight: 650; }
.path i { color: var(--faint); font-style: normal; }
.mates { margin-top: 12px; }
.mates-h { font-size: 12px; font-weight: 700; color: var(--muted); margin: 0 0 4px; }
.mates .pick .id { min-width: 64px; font-family: var(--sans); font-size: 13px; }
.mates .pick .what { white-space: normal; }
.sites { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.site { display: grid; grid-template-columns: 150px 1fr; gap: 10px; }
.site-k { color: var(--muted); }
.site-v { display: flex; flex-wrap: wrap; gap: 2px 9px; }

/* Mutate */
.aa-grid { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.aa { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: 600 12.5px var(--mono); cursor: pointer; }
.aa:hover { background: var(--fill); color: var(--on-fill); border-color: transparent; }
.mut { border: 1px solid var(--border); border-radius: 16px; padding: 12px 14px; }
.mut + .mut { margin-top: 8px; }
.mut-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 9px; }
.mut-h b { font-size: 15px; color: var(--accent); }
.mut-acts { margin-left: auto; display: inline-flex; gap: 12px; }
.mut .kv { grid-template-columns: 78px 1fr; }
.checks { margin: 0; padding-left: 16px; }
.checks li + li { margin-top: 2px; }
.tools { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; font-size: 13px; }
.tool { display: grid; grid-template-columns: 78px 1fr; gap: 12px; }
.tool-k { color: var(--muted); }
.tool > span:last-child { display: flex; flex-wrap: wrap; gap: 2px 14px; }

.ddg.neg { color: var(--rose-ink); }
.ddg.pos { color: var(--mint-ink); }
.spinner.sm { display: inline-block; width: 12px; height: 12px; vertical-align: -2px; margin-right: 6px; }
.sendnote { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--sky-ink); background: var(--sky); border-radius: 14px; padding: 8px 12px; margin: 10px 0 0; }
.sendnote .ic { color: inherit; margin-top: 1px; }
.btn:disabled { opacity: .6; cursor: default; }

/* Metabolon workspace */
.tab-n { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; margin-left: 3px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 10.5px; font-weight: 700; vertical-align: 1px; }
.tab[aria-selected="true"] .tab-n { background: var(--on-fill); color: var(--fill); }
.src.file { background: var(--peach); color: var(--peach-ink); }
.set-list { display: flex; flex-direction: column; }
.set-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13px; }
.set-row:first-child { border-top: 0; padding-top: 2px; }
.set-row .id { flex: none; min-width: 58px; font-weight: 650; color: var(--accent); }
.set-row .what { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.set-acts { flex: none; display: inline-flex; gap: 10px; }
.set-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.set-add .inline-form { flex: 1; min-width: 220px; }
.set-add .inline-form input { max-width: 300px; }
.stepper { flex: none; display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: 999px; height: 26px; }
.stepper button { width: 24px; height: 24px; border: 0; background: none; border-radius: 50%; cursor: pointer; color: var(--muted); font-size: 14px; line-height: 1; }
.stepper button:hover { background: var(--hover); color: var(--text); }
.stepper b { min-width: 16px; text-align: center; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.pairs { display: flex; flex-direction: column; }
.pair { display: grid; grid-template-columns: minmax(96px, 30%) 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; }
.pair:first-child { border-top: 0; padding-top: 2px; }
.pair-k { font-weight: 600; overflow-wrap: anywhere; }
.pair-v { min-width: 0; }
.conf-add { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 14px; }
.cands { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.mates .pick .mini + .mini { margin-left: -4px; }

/* First page: the masthead becomes a hero with the search in the middle */
.app[data-view="home"] .mast { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 54px 24px 48px; border-bottom: 0; box-shadow: none; }
.app[data-view="home"] .mast::before { display: none; }
.app[data-view="home"] .mast::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--bg)); }
.app[data-view="home"] .mast > * { position: relative; z-index: 1; }
.app[data-view="home"] .mast > .search-slot { z-index: 4; }
/* Three streams run into the search box and an estuary runs out of it: the artwork is centred on the box. */
.app[data-view="home"] .mast { overflow-x: clip; }
.app[data-view="home"] .search-art { display: block; position: absolute; left: 50%; top: 50%; width: 1800px; height: 260px; margin: -130px 0 0 -900px; pointer-events: none; z-index: 0; }
.app[data-view="home"] .search-box, .app[data-view="home"] .results { position: relative; z-index: 1; }
.app[data-view="home"] .results { position: absolute; }
.art-a { stop-color: var(--art-a); } .art-b { stop-color: var(--art-b); } .art-c { stop-color: var(--art-c); }
.search-art .streams { opacity: .62; }
.search-art .flow path { stroke: var(--surface); stroke-dasharray: 3 38; opacity: .95; animation: flow 4.5s linear infinite; }
.search-art .beads circle { fill: var(--surface); stroke: var(--art-a); stroke-width: 4; }
@keyframes flow { to { stroke-dashoffset: -82; } }
@media (prefers-reduced-motion: reduce) { .search-art .flow path { animation: none; } .ex, .feat { transition: none; } }
.app[data-view="home"] .home-hero { display: block; order: 1; position: relative; z-index: 2; max-width: 900px; }
@keyframes ink { to { background-position: 100% 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
.home-hero .kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--lav-ink); background: var(--glass-strong); border: 1px solid var(--band-line); border-radius: 999px; padding: 6px 15px; box-shadow: 0 2px 10px rgba(24,34,72,.08); }
.home-hero .tagline { font-size: clamp(22px, 2.5vw, 32px); line-height: 1.15; font-weight: 750; letter-spacing: -.028em; color: var(--text); margin: 18px auto 10px; max-width: none; text-wrap: balance; }
.home-hero .grad { background: linear-gradient(92deg, var(--accent), var(--grad-b) 55%, var(--grad-c)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-hero p { font-size: 16.5px; line-height: 1.5; color: var(--muted); margin: 0 auto; max-width: 58ch; }
.app[data-view="home"] #search-slot-home { order: 2; width: min(790px, 100%); margin: 28px 0 0; }
.app[data-view="home"] .search { width: 100%; max-width: none; margin: 0; text-align: left; }
.app[data-view="home"] .search-box { height: 62px; padding: 0 10px 0 22px; gap: 10px; font-size: 16.5px; background: var(--surface); border-color: var(--border); box-shadow: 0 2px 4px rgba(24,34,72,.05), 0 20px 48px rgba(24,34,72,.17); }
.app[data-view="home"] .search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 5px var(--ring), 0 20px 48px rgba(24,34,72,.17); }
.app[data-view="home"] .search-box > .ic { width: 20px; height: 20px; }
.app[data-view="home"] .seg { height: 36px; }
.app[data-view="home"] .seg button { font-size: 13.5px; padding: 0 13px; }
.app[data-view="home"] .search-go { width: 42px; height: 42px; background: var(--accent); color: var(--on-accent); }
.app[data-view="home"] .search-go:hover { background: var(--accent); filter: brightness(1.12); }
.app[data-view="home"] .search-go .ic { width: 19px; height: 19px; }
.app[data-view="home"] .results { top: 70px; }
.app[data-view="home"] .home-try { display: flex; order: 3; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 18px; position: relative; z-index: 2; font-size: 13px; color: var(--muted); }
.home-try button { border: 1px solid var(--band-line); background: var(--glass); color: var(--text); border-radius: 999px; padding: 5px 13px; font: 500 12.5px var(--mono); cursor: pointer; transition: background .15s, transform .15s; }
.home-try button:hover { background: var(--surface); transform: translateY(-1px); }

/* Pages: first page, About, Help */
.page { position: relative; z-index: 1; }
.page-in { max-width: 1180px; margin: 0 auto; padding: 4px 32px 72px; }
.page-in.narrow { max-width: 1060px; }
.page-h { font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 36px 0 14px; }
.home .page-in > .page-h:first-of-type { margin-top: 8px; }
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.feat { display: grid; grid-template-columns: 44px 1fr; gap: 3px 14px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 18px; background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--text); text-decoration: none; transition: background .15s, border-color .15s, transform .15s; }
.feat:hover { background: var(--surface); border-color: var(--border-strong); transform: translateY(-2px); text-decoration: none; }
.feat-ic { grid-row: span 2; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--lav); color: var(--lav-ink); flex: none; }
.feat-ic .ic { width: 21px; height: 21px; }
.feat-t { font-size: 15px; font-weight: 700; letter-spacing: -.01em; align-self: end; }
.feat-d { font-size: 13px; line-height: 1.45; color: var(--muted); }
.set-card { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 2px 14px; align-items: center; padding: 14px 56px 14px 16px; margin: 4px 0 2px; border-radius: 18px; background: var(--mint); color: var(--mint-ink); text-decoration: none; }
.set-card:hover { text-decoration: none; }
.set-card .feat-ic { background: var(--glass-strong); color: var(--mint-ink); }
.set-card .set-t { font-size: 15px; font-weight: 650; color: var(--text); align-self: end; }
.set-card .set-d { font-size: 12.5px; align-self: start; }
.set-card .ex-go { top: 50%; bottom: auto; right: 16px; margin-top: -13px; background: var(--glass-strong); color: var(--mint-ink); }
.sources { margin: 40px 0 0; font-size: 12.5px; color: var(--faint); }
.page-hero { padding: 36px 0 4px; max-width: 780px; }
.page-hero .kicker { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lav-ink); }
.page-hero h1 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; font-weight: 800; letter-spacing: -.032em; margin: 8px 0 12px; }
.page-hero h1 .wordmark { display: inline-block; font-size: 1.75em; line-height: .95; padding: 0 .1em .08em 0; }
.page-hero h1 .bn { font-size: .6em; font-weight: 500; color: var(--muted); margin-left: 6px; letter-spacing: 0; }
.lede { font-size: 16.5px; line-height: 1.55; color: var(--muted); margin: 0; }
.about-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.acard { padding: 20px 22px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-card); font-size: 14px; line-height: 1.55; }
.acard.wide { grid-column: span 2; }
.acard.full { grid-column: 1 / -1; }
.astack { display: flex; flex-direction: column; gap: 14px; }
.astack .acard { flex: 1; }
.about-logo { display: block; width: 84px; height: 84px; margin: 2px 0 16px; filter: drop-shadow(0 8px 18px rgba(24,34,72,.25)); }
.acard h2 { font-size: 16px; font-weight: 750; letter-spacing: -.01em; margin: 0 0 10px; }
.acard p { margin: 0 0 10px; color: var(--muted); }
.acard p:last-child { margin: 0; }
.acard b { color: var(--text); font-weight: 650; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--muted); }
.ticks li { position: relative; padding-left: 28px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--mint); }
.ticks li::after { content: ""; position: absolute; left: 5.5px; top: 7px; width: 6px; height: 3.5px; border-left: 2px solid var(--mint-ink); border-bottom: 2px solid var(--mint-ink); transform: rotate(-45deg); }
.srcs { display: grid; grid-template-columns: 200px 1fr; gap: 10px 20px; margin: 0; }
.srcs dt { font-weight: 650; }
.srcs dd { margin: 0; color: var(--muted); }
.jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 22px 0 4px; }
.jump a { font-size: 12.5px; font-weight: 550; padding: 5px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none; transition: background .15s, color .15s; }
.jump a:hover { background: var(--fill); color: var(--on-fill); border-color: transparent; text-decoration: none; }
.help-grid { columns: 3 330px; column-gap: 14px; margin-top: 18px; }
.hcard { break-inside: avoid; margin: 0 0 14px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-card); scroll-margin-top: 78px; transition: box-shadow .3s, border-color .3s; }
.hcard.flash { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring), var(--shadow-card); }
.hcard h2 { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 750; letter-spacing: -.01em; margin: 0 0 13px; }
.hcard .feat-ic { width: 38px; height: 38px; border-radius: 12px; }
.hcard .feat-ic .ic { width: 19px; height: 19px; }
.hcard ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; font-size: 13.5px; line-height: 1.5; color: var(--muted); counter-reset: step; }
.hcard li { position: relative; padding-left: 28px; counter-increment: step; }
.hcard li::before { content: counter(step); position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%; background: var(--surface-2); color: var(--muted); font: 700 10.5px/19px var(--mono); text-align: center; }
.hcard li b { color: var(--text); font-weight: 650; }

/* Divider (sits in the gap between the two cards) and responsive layout */
.splitter { position: absolute; left: -15px; top: 0; bottom: 0; width: 14px; cursor: col-resize; z-index: 20; touch-action: none; }
.splitter::after { content: ''; position: absolute; left: 5px; top: 22px; bottom: 22px; width: 4px; border-radius: 4px; background: transparent; transition: background .15s; }
.splitter:hover::after, .splitter:focus-visible::after, .splitter.dragging::after { background: var(--fill-hover); }
.splitter:focus-visible { outline: none; }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing #molstar { pointer-events: none; }
@media (max-width: 1100px) { main.body { grid-template-columns: minmax(0, 1fr) var(--side-w, 420px); } }
@media (max-width: 920px) {
  body { overflow: auto; }
  .app { height: auto; min-height: 100vh; grid-template-rows: auto auto auto; }
  header.top { position: relative; flex-wrap: wrap; height: auto; padding: 8px 12px; gap: 8px 10px; }
  #search-slot-top { order: 5; flex-basis: 100%; }
  #search-slot-top:empty { display: none; }
  .search { margin: 0; max-width: none; }
  .entry-head { padding: 4px 14px 14px; }
  .hero-side { align-items: flex-start; }
  .entry-head .chips, .head-actions { justify-content: flex-start; }
  .menu-list { right: auto; left: 0; }
  main.body { grid-template-columns: 1fr; padding: 12px; gap: 12px; }
  .stage { height: 55vh; min-height: 340px; }
  .splitter { display: none; }
  .side { min-height: 70vh; }
  .panes { overflow: visible; }
  .seq-controls { position: static; }
}
@media (max-width: 640px) {
  .search-box { flex-wrap: wrap; height: auto; padding: 4px 5px 4px 13px; row-gap: 2px; border-radius: 20px; }
  .search-box input { height: 30px; }
  .search-box .seg { order: 5; flex-basis: 100%; }
  .search-box kbd { display: none; }
  .ptiles { grid-template-columns: 1fr; }
  .head-title { font-size: 20px; }
}
@media (max-width: 920px) {
  .mast, main.body, .page { grid-column: 1; }
  .app:not([data-view="entry"]) main.body { left: 0; }
  .app[data-view="home"] .mast { padding: 26px 16px 36px; }
  .home-hero p { font-size: 15.5px; }
  .page-in { padding: 4px 16px 40px; }
  .about-grid { grid-template-columns: 1fr; }
  .acard.wide, .acard.full { grid-column: auto; }
  .srcs { grid-template-columns: 1fr; gap: 0; }
  .srcs dd { margin-bottom: 9px; }
  .toast { left: 50%; }
}
@media (max-width: 640px) {
  .app[data-view="home"] .search-box { height: auto; padding: 8px 8px 8px 16px; border-radius: 24px; }
  .app[data-view="home"] .search-box input { height: 36px; }
}

/* Top navigation bar: the name at the left, then the pages, the search box and the tools */
a.brand { text-decoration: none; color: inherit; flex: none; }
.topnav { display: flex; align-items: center; gap: 2px; margin-left: 4px; flex: none; }
.topnav button { border: 0; background: transparent; color: var(--muted); font: 600 13.5px var(--sans); padding: 7px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.topnav button:hover:not(:disabled) { background: var(--glass); color: var(--text); }
.topnav button[aria-current="page"] { background: var(--glass-strong); color: var(--on-fill); box-shadow: 0 1px 2px rgba(24,34,72,.08); }
.topnav button:disabled { opacity: .42; cursor: default; }
.topnav button:focus-visible, .tool-btn:focus-visible, a.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.search-slot { min-width: 0; }
#search-slot-top { flex: 1 1 auto; display: flex; }
.top-tools { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
.tool-btn { height: 34px; padding: 0 13px 0 11px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--band-line); border-radius: 999px; background: var(--glass); color: var(--text); font: 600 12.5px var(--sans); cursor: pointer; white-space: nowrap; transition: background .15s; }
.tool-btn:hover { background: var(--glass-strong); }
.tool-btn.icon { width: 34px; padding: 0; justify-content: center; }
.tool-btn .ic { width: 17px; height: 17px; }
/* The first-page headline: Cinzel ExtraBold capitals, with the last word in the flowing italic of the name (both chosen by the user) */
.home-hero h1.tagline { font-family: var(--headline); font-synthesis: none; font-size: clamp(24px, 3.5vw, 46px); line-height: 1.17; font-weight: 800; letter-spacing: .012em; margin: 22px auto 16px; animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
.home-hero h1.tagline .grad { display: inline-block; font-family: var(--display); font-style: italic; font-weight: 600; font-synthesis: none; font-size: 1.9em; line-height: .7; letter-spacing: -.01em; padding: 0 .14em .1em .03em; margin: 0 -.1em -.1em 0; }
@media (prefers-reduced-motion: reduce) { .home-hero h1.tagline { animation: none; } }

/* Footer: the name and a disclaimer, the University logo, then the copyright line and links */
.foot { grid-column: 1; grid-row: 4; position: relative; z-index: 1; border-top: 1px solid var(--border); background: linear-gradient(to bottom, color-mix(in srgb, var(--surface) 55%, transparent), color-mix(in srgb, var(--surface) 90%, transparent)); }
.app[data-view="entry"] .foot { display: none; }
.foot-in { max-width: 1180px; margin: 0 auto; padding: 40px 32px 26px; }
.foot-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 48px; }
.foot-about { flex: 1 1 320px; max-width: 440px; }
.foot-name { font-weight: 700; font-size: 16px; color: var(--text); margin-bottom: 5px; }
.foot-about p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.foot-logo { display: block; flex: none; border-radius: 10px; }
.foot-logo img { display: block; height: 55px; width: auto; }
:root[data-theme="dark"] .foot-logo { background: #fff; padding: 10px 14px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .foot-logo { background: #fff; padding: 10px 14px; } }
.foot-base { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 28px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.foot-copy { padding-top: 1px; }
.foot-end { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; margin-left: auto; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 20px; }
.foot-links a { color: var(--accent); text-decoration: none; font-weight: 500; }
.foot-links a:hover { text-decoration: underline; }
@media (max-width: 920px) {
  .tool-btn span { display: none; }
  .tool-btn { width: 34px; padding: 0; justify-content: center; }
  .foot-in { padding: 30px 16px 22px; }
}
@media (max-width: 600px) {
  .topnav { order: 4; flex-basis: 100%; justify-content: space-between; margin: 0; }
}

/* Tabs: every section is a card on a tinted pane, with numbered badges on the sections of a workflow (the user's choice, option A) */
.panes { background: var(--bg); border-radius: 0 0 19px 19px; }
.pane { padding: 12px 12px 20px; }
.sec { margin: 0 0 10px; padding: 13px 15px 15px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 1px 2px rgba(24,34,72,.03); }
.sec-h { margin: 0 0 10px; min-height: 22px; gap: 6px; }
.sec h3 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sec-n { flex: none; width: 20px; height: 20px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--fill); color: var(--on-fill); font-size: 11.5px; font-weight: 700; letter-spacing: 0; }
.sec-sub { font-size: 12.5px; color: var(--muted); min-width: 0; }
.sec > :last-child { margin-bottom: 0; }
.sec .lead:last-child { margin-bottom: 0; }
#pane-seq { background: var(--surface); min-height: 100%; }
.seq-controls { top: -12px; margin: -12px -12px 10px; padding: 12px 14px 10px; }
.pane > .res-loading, .pane > .lead { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 13px 15px; margin: 0 0 10px; }
/* a list of substitutions inside its card is a flat list, not cards within a card */
.sec .mut { border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 12px 0 4px; }
.sec .mut + .mut { margin-top: 4px; }
.sec .mut:first-of-type { border-top: 0; padding-top: 0; }
/* The Mutate form: the chain, then the residue */
.mut-form select { flex: 0 1 auto; min-width: 0; max-width: 52%; border-radius: 999px; padding: 0 10px; }
.mut-form input { max-width: 190px; }
/* The title of the first page: "Mohona: Where sequence, structure and pathway meet", with the note on the name beneath it */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.home-hero h1.tagline { margin: 10px auto 18px; }
.home-hero .kicker { margin: 0 0 14px; }
/* the name in the title is set like its last word: the italic of the wordmark, in the same colours */
.home-hero h1.tagline .hero-name { margin-right: .02em; }