/* ============================================================
     One palette, two moods. Every colour in the Hub reads from these,
     so the light mode is a token swap and not a second stylesheet.
     ============================================================ */
  .ic-app, .ic-strip {
    --ic-top:#11151e; --ic-bot:#0d1119;
    --ic-line:#232939; --ic-line2:#1c2231; --ic-line3:#1d2432;
    --ic-line4:#283044; --ic-lineHi:#354055;
    --ic-ink:#eef3fc; --ic-ink2:#e0e7f2; --ic-ink3:#a5b1c6;
    --ic-ink4:#8c98b1; --ic-ink5:#69728d; --ic-ink6:#5b647a;
    --ic-shot:#151a22;
    --ic-railbg:rgba(13,17,25,.72);
    --ic-barbg:rgba(13,17,25,.78);
    --ic-stripbg:rgba(13,17,25,.86);
    --ic-veil:rgba(10,14,21,.92);
    --ic-hover:rgba(255,255,255,.038);
  }

  /* Brighter, not white. A cool paper that keeps the brand's blue in it,
     so cards still read as cards and nothing goes flat. */
  body.ic-light .ic-app, body.ic-light .ic-strip {
    --ic-top:#ffffff; --ic-bot:#f4f7fc;
    --ic-line:#dbe3ef; --ic-line2:#e3e9f3; --ic-line3:#e7ecf5;
    --ic-line4:#dde4ef; --ic-lineHi:#b9c8de;
    --ic-ink:#141b29; --ic-ink2:#2c3648; --ic-ink3:#55617a;
    --ic-ink4:#6a7591; --ic-ink5:#8791a8; --ic-ink6:#a3acbf;
    --ic-shot:#e8edf6;
    --ic-railbg:rgba(240,244,251,.86);
    --ic-barbg:rgba(240,244,251,.88);
    --ic-stripbg:rgba(240,244,251,.94);
    --ic-veil:rgba(20,27,41,.72);
    --ic-hover:rgba(20,40,80,.045);
  }
  body.ic-light { background:#eaeff7; }

  /* Every class here is ic- prefixed so nothing can pick up a shell rule
     by accident. That is how the .go bug got in. */
  /* shell.css centres body's child with flex, which was re-centring the
     whole app every time a pane changed width - the rail slid sideways. */
  body { padding:0; overflow:hidden; display:block; }
  /* ============================================================
     THE GROUND. No blobs. One cold light from above, a hairline grid
     that you feel rather than see, and a vignette to hold the edges.
     ============================================================ */
  body:not(.ic-light) {
    background:
      /* the light, off centre and high, in the brand's blue-violet */
      radial-gradient(120% 78% at 50% -14%,
        rgba(122,168,255,.13) 0%, rgba(122,168,255,.05) 30%, transparent 62%),
      radial-gradient(80% 52% at 84% 8%,
        rgba(178,131,255,.075) 0%, transparent 58%),
      /* the floor, warmer at the bottom so the page has a horizon */
      linear-gradient(180deg, #0d1219 0%, #0b0f16 44%, #090d13 100%);
    background-attachment:fixed; }

  /* the grid. 1px lines at 3% - structure, not decoration. */
  body:not(.ic-light)::before {
    content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
    opacity:1;
    background-image:
      linear-gradient(rgba(146,180,235,.030) 1px, transparent 1px),
      linear-gradient(90deg, rgba(146,180,235,.030) 1px, transparent 1px);
    background-size:64px 64px;
    -webkit-mask-image:radial-gradient(112% 86% at 50% 0%, #000 12%, transparent 74%);
    mask-image:radial-gradient(112% 86% at 50% 0%, #000 12%, transparent 74%); }

  /* the vignette, so nothing floats off the corners */
  body:not(.ic-light)::after {
    content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(128% 100% at 50% 36%,
      transparent 44%, rgba(4,6,11,.42) 82%, rgba(3,5,9,.62) 100%); }

  /* the app rides above both layers */
  .ic-app { position:relative; z-index:1; }

  /* The rail is a fixed column and never scrolls with the content.
     .ic-main is the only scroller on the page, so switching tabs can
     never move the menu. */
  .ic-app { --rail:252px; display:grid; grid-template-columns:var(--rail) 1fr;
    width:100%; height:100vh; overflow:hidden;
    transition:grid-template-columns .34s cubic-bezier(.2,.8,.3,1); }
  body.ic-narrow .ic-app { --rail:78px; }

  /* ---------------- left rail ---------------- */
  .ic-rail { height:100vh; display:flex; flex-direction:column;
    padding:26px 16px 18px; overflow:hidden;
    background:var(--ic-railbg); backdrop-filter:blur(22px);
    border-right:1px solid var(--ic-line2); }

  .ic-brand { display:flex; align-items:center; gap:12px; padding:0 8px; margin:0 0 34px;
    height:44px; }
  .ic-brand img { width:32px; height:32px; flex:0 0 32px; }
  .ic-brand .ic-wm { font-family:Orbitron,sans-serif; line-height:1.25; white-space:nowrap;
    transition:opacity .2s ease; }
  .ic-brand .ic-wm b { display:block; font-size:12px; font-weight:700;
    letter-spacing:.19em; color:#3ec9f0; }
  .ic-brand .ic-wm span { display:block; font-size:8.5px; font-weight:500;
    letter-spacing:.22em; color:var(--ic-ink5); margin-top:4px; }

  .ic-nav { display:flex; flex-direction:column; gap:3px; }
  .ic-nav .ic-sep { height:1px; background:var(--ic-line2); margin:20px 10px; }
  /* a tab that leaves the Hub - same shape, never the active one */
  .ic-nav a.ic-tab { text-decoration:none; }

  .ic-tab { --n:150,160,185;
    position:relative; display:flex; align-items:center; gap:14px;
    height:44px; padding:0 12px; border:0; width:100%; border-radius:11px;
    background:transparent; cursor:pointer; text-align:left;
    font-family:inherit; font-size:13px; letter-spacing:.01em; color:var(--ic-ink4);
    transition:background .22s ease, color .22s ease; }
  .ic-tab svg { width:19px; height:19px; flex:0 0 19px; fill:none; stroke:currentColor;
    stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
  .ic-tab span { white-space:nowrap; transition:opacity .2s ease; }
  /* Each item carries its own --n colour. At rest only the icon holds it,
     quietly. On hover the whole row picks it up. Active is a filled pill in
     that colour with a dot on the end - never a rule down the left edge,
     which Gen read as a stock AI treatment. */
  .ic-tab svg { color:rgb(var(--n)); opacity:.7; transition:opacity .22s ease; }
  .ic-tab:hover { color:var(--ic-ink2); background:rgba(var(--n),.10); }
  .ic-tab:hover svg { opacity:1; }
  /* Active is a soft block in the item's own colour. No pill, no dot, no
     rule down the edge - Gen has knocked back all three as stock AI. */
  .ic-tab.ic-on { color:var(--ic-ink); background:rgba(var(--n),.15);
    box-shadow:inset 0 0 0 1px rgba(var(--n),.26); font-weight:600; }
  .ic-tab.ic-on svg { opacity:1; }

  .ic-collapse { margin-top:auto; display:flex; align-items:center; gap:14px;
    height:42px; padding:0 12px; border:0; border-radius:11px; width:100%;
    background:transparent; cursor:pointer; color:var(--ic-ink6);
    font-family:inherit; font-size:11.5px; letter-spacing:.02em; text-align:left;
    transition:color .22s ease, background .22s ease; }
  .ic-collapse:hover { color:var(--ic-ink3); background:rgba(255,255,255,.028); }
  .ic-collapse svg { width:19px; height:19px; flex:0 0 19px; fill:none;
    stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
    transition:transform .34s cubic-bezier(.2,.8,.3,1); }
  body.ic-narrow .ic-collapse svg { transform:rotate(180deg); }

  body.ic-narrow .ic-wm,
  body.ic-narrow .ic-tab span,
  body.ic-narrow .ic-collapse span { opacity:0; pointer-events:none; }
  body.ic-narrow .ic-nav .ic-sep { margin:20px 4px; }

  /* ---------------- main ---------------- */
  .ic-main { min-width:0; height:100vh; overflow-y:auto; scrollbar-gutter:stable; }

  .ic-bar { position:sticky; top:0; z-index:20; display:flex; align-items:center;
    gap:20px; height:66px; padding:0 40px 0 44px;
    background:var(--ic-barbg); backdrop-filter:blur(22px);
    border-bottom:1px solid var(--ic-line2); }
  /* centred on the bar itself, not in the flow, so the avatar on the right
     cannot pull it off centre. */
  .ic-title { position:absolute; left:50%; transform:translateX(-50%);
    font-family:Orbitron,sans-serif; font-size:12.5px; font-weight:700;
    letter-spacing:.17em; margin-right:-.17em; text-transform:uppercase;
    color:var(--ic-ink2); white-space:nowrap; }
  .ic-bar { position:sticky; }
  .ic-me { margin-left:auto; display:flex; align-items:center; gap:14px; }
  .ic-theme { width:34px; height:34px; border-radius:9px; border:1px solid var(--ic-line);
    background:transparent; cursor:pointer; display:grid; place-items:center;
    color:var(--ic-ink4); transition:color .22s, border-color .22s, background .22s; }
  .ic-theme:hover { color:var(--ic-ink); border-color:var(--ic-lineHi);
    background:var(--ic-hover); }
  .ic-theme svg { width:16px; height:16px; fill:none; stroke:currentColor;
    stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .ic-theme .ic-sun { display:none; }
  body.ic-light .ic-theme .ic-sun { display:block; }
  body.ic-light .ic-theme .ic-moon { display:none; }
  .ic-face.ic-sm { width:38px; height:38px; flex:0 0 38px; font-size:12px; }

  /* One column, off the walls, and it stops growing before the text runs
     to the length of the monitor. */
  .ic-content { max-width:1180px; margin:0 auto;
    padding:44px clamp(24px, 4vw, 56px) 120px; }
  .ic-pane { display:none; }
  .ic-pane.ic-live { display:block; }

  /* ---------------- feed ---------------- */
  .ic-feed { display:flex; flex-direction:column; gap:18px; }
  .ic-item { display:flex; gap:20px; padding:26px 28px; border-radius:16px;
    border:1px solid var(--ic-line); background:linear-gradient(180deg,var(--ic-top),var(--ic-bot));
    transition:border-color .25s ease, transform .25s cubic-bezier(.2,.8,.3,1.1); }
  .ic-item:hover { border-color:var(--ic-lineHi); transform:translateY(-2px); }

  .ic-face { width:42px; height:42px; flex:0 0 42px; border-radius:50%;
    display:grid; place-items:center; font-family:Orbitron,sans-serif;
    font-weight:700; font-size:12px; color:var(--ic-ink4);
    background:linear-gradient(180deg,#1c2536,#111825); border:1px solid var(--ic-line4); }
  .ic-face.ic-tint { border-color:rgba(79,210,240,.4); color:#7fd8ee; }

  .ic-meta { display:flex; align-items:center; gap:9px; font-size:11.5px;
    color:var(--ic-ink5); margin:0 0 9px; }
  .ic-meta b { font-weight:600; color:var(--ic-ink3); font-size:12.5px; }
  .ic-meta i { width:3px; height:3px; border-radius:50%; background:var(--ic-ink6); }
  .ic-line { font-size:15px; line-height:1.55; color:var(--ic-ink2); margin:0; }
  .ic-line em { font-style:normal; color:#7ecbff; }

  .ic-chips { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; }
  .ic-chip { font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
    padding:6px 11px; border-radius:6px; color:var(--ic-ink4);
    border:1px solid var(--ic-line4); background:rgba(255,255,255,.014); }
  .ic-chip.ic-hot { color:#ff8a95; border-color:rgba(255,77,94,.3);
    background:rgba(255,77,94,.06); }
  .ic-chip.ic-good { color:#5fd39a; border-color:rgba(61,220,132,.28);
    background:rgba(61,220,132,.05); }

  /* ---------------- influencer hub ---------------- */
  .ic-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(292px,1fr));
    gap:20px; }
  .ic-card { padding:28px 26px; border-radius:16px; border:1px solid var(--ic-line);
    background:linear-gradient(180deg,var(--ic-top),var(--ic-bot));
    transition:border-color .25s ease, transform .25s cubic-bezier(.2,.8,.3,1.1); }
  .ic-card:hover { border-color:var(--ic-lineHi); transform:translateY(-2px); }
  .ic-who .ic-nm { font-size:14.5px; font-weight:600; color:var(--ic-ink); }
  .ic-who .ic-hd { font-size:11.5px; color:var(--ic-ink5); margin-top:3px; }

  .ic-stat { display:flex; align-items:baseline; justify-content:space-between;
    padding:11px 0; border-top:1px solid var(--ic-line3); font-size:12px; color:var(--ic-ink5); }
  .ic-stat b { font-weight:600; color:var(--ic-ink2); font-size:12.5px; }
  .ic-stat b.ic-tok { color:#7ecbff; font-family:Orbitron,sans-serif;
    font-size:11.5px; letter-spacing:.06em; }

  /* ---------------- livestreams ---------------- */
  /* A single line of cards read as a strip of nothing. A grid is what a
     shelf of video wants: newest top left, oldest bottom right, scan down
     to go back in time. */
  .ic-railwrap { position:relative; }
  .ic-catch { display:flex; align-items:center; justify-content:space-between;
    gap:20px; margin:0 0 20px; }
  .ic-catchn { font-size:11.5px; color:var(--ic-ink5); }
  .ic-catch h3 { margin:0; font-family:Orbitron,sans-serif; font-size:11px;
    font-weight:700; letter-spacing:.22em; text-transform:uppercase;
    color:var(--ic-ink5); }
  .ic-arrows { display:none; }
  .ic-arrow { width:38px; height:34px; border-radius:9px; cursor:pointer;
    display:grid; place-items:center; border:1px solid var(--ic-line);
    background:transparent; color:var(--ic-ink4);
    transition:color .2s, border-color .2s, background .2s, opacity .2s; }
  .ic-arrow:hover { color:var(--ic-ink); border-color:var(--ic-lineHi);
    background:var(--ic-hover); }
  .ic-arrow[disabled] { opacity:.3; cursor:default; }
  .ic-arrow svg { width:16px; height:16px; fill:none; stroke:currentColor;
    stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

  .ic-vids { display:flex; flex-direction:column; gap:18px; }
  /* still on the left, everything about it on the right. Explicit placement,
     because four children in a two column grid otherwise wrap the meta back
     under the picture. */
  .ic-vid { min-width:0; display:grid; grid-template-columns:308px 1fr;
    grid-template-rows:auto auto 1fr; column-gap:24px; row-gap:6px;
    align-items:start; padding:14px; border-radius:16px;
    border:1px solid transparent;
    transition:border-color .22s, background .22s; }
  .ic-vid .ic-shot   { grid-column:1; grid-row:1 / span 3; }
  .ic-vid .ic-vtitle { grid-column:2; grid-row:1; }
  .ic-vid .ic-vmeta  { grid-column:2; grid-row:2; }
  .ic-vid .ic-vsum   { grid-column:2; grid-row:3; }
  .ic-vid:hover { border-color:var(--ic-line4); background:var(--ic-hover); }
  .ic-vid .ic-shot { margin:0; }
  .ic-vid .ic-vtitle { margin:2px 0 8px; font-size:16px; line-height:1.4;
    color:var(--ic-ink); }
  .ic-vid .ic-vsum { margin:12px 0 0; font-size:13px; line-height:1.65;
    color:var(--ic-ink4); max-width:78ch;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; }
  @media (max-width:900px){
    .ic-vid { grid-template-columns:1fr; grid-template-rows:none; row-gap:10px; }
    .ic-vid .ic-shot, .ic-vid .ic-vtitle, .ic-vid .ic-vmeta, .ic-vid .ic-vsum {
      grid-column:1; grid-row:auto; }
  }
  .ic-vid { cursor:pointer; }
  .ic-shot { position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden;
    background:var(--ic-shot); border:1px solid var(--ic-line);
    transition:border-color .25s ease, transform .25s cubic-bezier(.2,.8,.3,1.1); }
  .ic-vid:hover .ic-shot { border-color:var(--ic-lineHi); transform:translateY(-3px); }
  .ic-shot::after { content:""; position:absolute; inset:0;
    background:radial-gradient(60% 70% at 50% 45%,rgba(90,182,255,.09),transparent 70%); }
  .ic-play { position:absolute; z-index:1; left:50%; top:50%; width:46px; height:46px;
    margin:-23px 0 0 -23px; border-radius:50%; display:grid; place-items:center;
    background:rgba(255,77,94,.82); border:1px solid rgba(255,150,158,.42);
    box-shadow:0 6px 22px rgba(255,45,65,.32);
    backdrop-filter:blur(6px);
    transition:background .25s ease, transform .25s cubic-bezier(.2,.8,.3,1.3); }
  .ic-vid:hover .ic-play { background:#ff4d5e; transform:scale(1.08);
    border-color:rgba(255,190,196,.6); }
  .ic-play svg { width:15px; height:15px; fill:#fff; margin-left:2px; }
  .ic-vid:hover .ic-play svg { fill:#fff; }
  .ic-dur { position:absolute; z-index:1; right:10px; bottom:10px; font-size:10.5px;
    letter-spacing:.05em; padding:3px 8px; border-radius:6px; color:var(--ic-ink2);
    background:rgba(6,9,14,.76); }
  .ic-vtitle { font-size:14px; line-height:1.5; color:var(--ic-ink2); margin:16px 0 6px; }
  .ic-vmeta { font-size:11.5px; color:var(--ic-ink5); }
  .ic-vmeta i { font-style:normal; opacity:.5; margin:0 2px; }
  .ic-sect + .ic-progs, .ic-sect + .ic-know { margin-bottom:34px; }

  @media (max-width:1000px){ }

  /* One column, centred. Two courses side by side squeezed a module list
     into a gutter; stacked, each one gets to be a course. */
  .ic-progs { display:flex; flex-direction:column; align-items:center; gap:30px; }
  /* ---- the card. Just enough to choose with: art, name, where you are. ---- */
  /* stacked, one under the other, both the same width. auto-fit put them
     side by side the moment the column was wide enough, which is the thing
     Gen asked twice not to have. */
  .ic-progs { display:flex; flex-direction:column; align-items:center; gap:26px; }
  .ic-pcard { display:block; width:100%; max-width:820px; padding:0;
    border:1px solid var(--ic-line);
    border-radius:20px; overflow:hidden; cursor:pointer; text-align:left;
    font:inherit; color:inherit;
    background:linear-gradient(180deg,var(--ic-top),var(--ic-bot));
    transition:border-color .26s, transform .26s cubic-bezier(.2,.8,.3,1.1),
               box-shadow .26s; }
  .ic-pcard:hover { border-color:rgba(var(--pc),.45); transform:translateY(-3px);
    box-shadow:0 24px 56px rgba(0,0,0,.5); }
  .ic-pcard .ic-part2 { display:block; position:relative; height:128px;
    overflow:hidden; }
  .ic-pcard .ic-part2 img { width:100%; height:100%; object-fit:cover; opacity:.5; }
  .ic-pcard .ic-pin { display:block; padding:22px 26px 24px; }
  .ic-pcard .ic-pname { display:block; font-family:Orbitron,sans-serif;
    font-size:17px; font-weight:700; color:var(--ic-ink); margin:0 0 10px;
    line-height:1.3; }
  .ic-pcard .ic-pbody { display:block; font-size:13.5px; line-height:1.6;
    color:var(--ic-ink4); margin:0 0 22px; }
  .ic-pcard .ic-meter { display:block; }
  .ic-pcard .ic-mtop { display:flex; align-items:baseline;
    justify-content:space-between; margin:0 0 9px; }
  .ic-pcard .ic-open { justify-content:flex-start; margin:20px 0 0;
    padding-top:18px; border-top:1px solid var(--ic-line3); color:rgb(var(--pc)); }

  /* ---- the course, which is what opening one gets you ---- */
  .ic-course { display:none; max-width:820px; margin:0 auto; }
  .ic-course.ic-live { display:block; }
  .ic-cbanner { position:relative; height:150px; border-radius:18px;
    overflow:hidden; border:1px solid var(--ic-line); margin:0 0 28px; }
  .ic-cbanner img { position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; opacity:.5; }
  .ic-cveil { position:absolute; inset:0;
    background:linear-gradient(180deg,rgba(6,9,14,.2),rgba(9,12,19,.96)); }
  .ic-chead { max-width:640px; margin:0 0 12px; }
  .ic-cname { font-family:Orbitron,sans-serif; font-size:24px; font-weight:700;
    letter-spacing:.02em; color:var(--ic-ink); margin:0 0 12px; line-height:1.25; }
  .ic-cbody { font-size:14.5px; line-height:1.65; color:var(--ic-ink3);
    margin:0 0 26px; }
  .ic-course .btn { margin:26px 0 0; max-width:260px; }
  .ic-course .ic-soon { margin-top:34px; }

  /* the artwork is a band across the top, not a panel the card is built
     around. Less picture, more course. */
  .ic-prog .ic-part2 { position:relative; height:104px; overflow:hidden;
    border-radius:19px 19px 0 0; }
  .ic-prog .ic-part2 img { width:100%; height:100%; object-fit:cover; opacity:.42; }
  .ic-pveil2 { position:absolute; inset:0;
    background:linear-gradient(180deg,rgba(6,9,14,.30),rgba(9,12,19,1) 96%); }
  .ic-pin { padding:4px 40px 0; }

  .ic-pkicker { display:block; font-family:Orbitron,sans-serif; font-size:9.5px;
    font-weight:700; letter-spacing:.24em; margin-right:-.24em; text-transform:uppercase;
    color:rgb(var(--pc)); margin-bottom:12px; }
  .ic-pname { font-family:Orbitron,sans-serif; font-size:21px; font-weight:700;
    letter-spacing:.03em; color:var(--ic-ink); margin:0 0 12px; line-height:1.25; }
  .ic-pbody { font-size:14px; line-height:1.65; color:var(--ic-ink3); margin:0 0 26px;
    max-width:46ch; }

  /* ---- the course itself. Modules, the one you are on opened. ---- */
  .ic-mods { display:flex; flex-direction:column;
    border-top:1px solid var(--ic-line3); margin-top:34px; }
  .ic-mod { display:block; border-bottom:1px solid var(--ic-line3); padding:16px 0; }
  .ic-mhead { display:grid; grid-template-columns:22px 30px 1fr auto;
    align-items:center; gap:14px; }
  .ic-mmark2 { width:22px; height:22px; border-radius:50%; display:grid;
    place-items:center; border:1px solid var(--ic-line4); color:var(--ic-ink6); }
  .ic-mmark2 svg { width:11px; height:11px; fill:none; stroke:currentColor;
    stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
  .ic-lrow.ic-ldone .ic-lname { color:var(--ic-ink6); }
  .ic-lrow.ic-ldone .ic-ldot { background:rgba(var(--pc),.55); }
  .ic-mn { font-family:Orbitron,sans-serif; font-size:11px; font-weight:700;
    color:var(--ic-ink6); letter-spacing:.08em; }
  .ic-mt { font-size:14px; color:var(--ic-ink3); }
  .ic-mc { font-size:11.5px; color:var(--ic-ink6); white-space:nowrap; }

  .ic-mod.ic-mdone .ic-mmark2 { color:rgb(var(--pc)); border-color:rgba(var(--pc),.5);
    background:rgba(var(--pc),.10); }
  .ic-mod.ic-mdone .ic-mt { color:var(--ic-ink5); }
  .ic-mod.ic-mnow .ic-mmark2 { color:#0b1119; border-color:transparent;
    background:rgb(var(--pc)); }
  .ic-mod.ic-mnow .ic-mmark2 svg { fill:currentColor; stroke:none; }
  .ic-mod.ic-mnow .ic-mt { color:var(--ic-ink); font-weight:600; }
  .ic-mod.ic-mnow .ic-mn { color:rgb(var(--pc)); }

  .ic-lessons { display:block; margin:14px 0 2px; padding-left:66px; }
  .ic-lrow { display:grid; grid-template-columns:6px 1fr auto; align-items:center;
    gap:14px; padding:9px 0; }
  .ic-ldot { width:5px; height:5px; border-radius:50%; background:var(--ic-line4); }
  .ic-lname { font-size:13px; color:var(--ic-ink4); }
  .ic-ltime { font-size:11px; color:var(--ic-ink6);
    font-family:"JetBrains Mono",ui-monospace,monospace; }

  .ic-meter { margin:0; }
  .ic-mtop { display:flex; align-items:baseline; justify-content:space-between;
    margin:0 0 10px; }
  .ic-mtop b { font-family:Orbitron,sans-serif; font-size:11px; font-weight:700;
    letter-spacing:.16em; text-transform:uppercase; color:rgb(var(--pc)); }
  .ic-mtop span { font-size:12px; color:var(--ic-ink5); }
  .ic-pbar { height:4px; border-radius:99px; background:var(--ic-line2);
    overflow:hidden; }
  .ic-pbar i { display:block; height:100%; border-radius:99px;
    background:linear-gradient(90deg,rgba(var(--pc),.55),rgb(var(--pc)));
    transition:width .6s cubic-bezier(.2,.8,.3,1); }

  @media (max-width:640px){
    .ic-pin { padding:4px 22px 0; }
    .ic-lessons { padding-left:0; }
    .ic-mhead { grid-template-columns:22px 1fr; }
    .ic-mn, .ic-mc { display:none; }
  }
  .ic-bub.ic-me { align-self:flex-end; color:#0a1420;
    background:linear-gradient(180deg,#8fd2ff,#6ab4ef); border-bottom-right-radius:5px; }

  /* ---------------- faq ----------------
     Built on the Knowledge Hub row, because a question and a guide are the
     same shape: a mark, a line you can read, and a thing that happens when
     you press it. The answer stops being grey once it is open. */
  /* The FAQ is the Knowledge Hub, with the answer folded underneath.
     Same groups, same heading rule, same row - a question and a guide are
     the same object. `.ic-kgroup` and `.ic-khead` are reused as they are. */
  .ic-faq { max-width:920px; margin:0 auto; }
  .ic-q { border-radius:12px; border:1px solid transparent;
    transition:border-color .2s, background .2s; }
  .ic-q + .ic-q { margin-top:6px; }
  .ic-q:hover, .ic-q.ic-qopen { border-color:rgba(var(--kc),.34);
    background:rgba(var(--kc),.06); }

  .ic-q > button { width:100%; display:flex; align-items:center; gap:20px;
    padding:16px 20px; border:0; background:transparent; cursor:pointer;
    font-family:inherit; text-align:left; }
  .ic-qmark { flex:0 0 38px; width:38px; height:38px; border-radius:10px;
    display:grid; place-items:center; background:rgba(var(--kc),.11);
    border:1px solid rgba(var(--kc),.24); }
  .ic-qmark svg { width:17px; height:17px; fill:none; stroke:rgb(var(--kc));
    stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .ic-qt { flex:1; min-width:0; font-size:14.5px; font-weight:600;
    color:var(--ic-ink); }
  .ic-qplus { flex:0 0 auto; color:var(--ic-ink6);
    transition:transform .3s cubic-bezier(.2,.8,.3,1), color .2s; }
  .ic-qplus svg { width:15px; height:15px; display:block; fill:none;
    stroke:currentColor; stroke-width:2; stroke-linecap:round; }
  .ic-q:hover .ic-qplus { color:rgb(var(--kc)); }
  .ic-q.ic-qopen .ic-qplus { transform:rotate(45deg); color:rgb(var(--kc)); }

  .ic-a { display:grid; grid-template-rows:0fr;
    transition:grid-template-rows .34s cubic-bezier(.2,.8,.3,1); }
  .ic-a > p { overflow:hidden; min-height:0; }
  .ic-q.ic-qopen .ic-a { grid-template-rows:1fr; }
  .ic-a p { font-size:13px; line-height:1.7; color:var(--ic-ink4);
    margin:0; padding:0 20px 0 78px; }
  .ic-q.ic-qopen .ic-a p { padding-bottom:18px; }

  /* ---------------- settings ----------------
     One list, one offer, one way out. Rows the height of a thumb, and the
     control for each one sitting at the end of its own line. */
  .ic-set { max-width:860px; margin:0 auto 26px; border-radius:16px;
    border:1px solid var(--ic-line); overflow:hidden;
    background:linear-gradient(180deg,var(--ic-top),var(--ic-bot)); }
  .ic-srow { display:flex; align-items:center; gap:24px; padding:20px 24px; }
  .ic-srow + .ic-srow { border-top:1px solid var(--ic-line3); }
  .ic-stext { min-width:0; flex:1; }
  .ic-stext b { display:block; font-size:14.5px; font-weight:600;
    color:var(--ic-ink); }
  .ic-stext span { display:block; margin-top:5px; font-size:12.5px;
    line-height:1.55; color:var(--ic-ink4); }

  .ic-sbtn { flex:0 0 auto; cursor:pointer; padding:9px 18px; border-radius:10px;
    font-family:Orbitron,sans-serif; font-size:9.5px; font-weight:700;
    letter-spacing:.16em; margin-right:-.16em; text-transform:uppercase;
    color:var(--ic-ink3); border:1px solid var(--ic-line4);
    background:transparent;
    transition:color .2s, border-color .2s, background .2s; }
  .ic-sbtn:hover { color:var(--ic-ink); border-color:var(--ic-lineHi);
    background:var(--ic-hover); }

  .ic-upsell { max-width:860px; margin:0 auto; padding:32px 34px;
    border-radius:16px; display:flex; align-items:center; gap:36px;
    background:linear-gradient(180deg,var(--ic-top),var(--ic-bot)); }
  .ic-uptext { flex:1; min-width:0; }
  .ic-upkick { display:block; font-family:Orbitron,sans-serif; font-size:9.5px;
    font-weight:700; letter-spacing:.24em;
    text-transform:uppercase; color:#b283ff; margin-bottom:12px; }
  .ic-uph { margin:0 0 10px; font-family:Orbitron,sans-serif; font-size:18px;
    font-weight:700; color:var(--ic-ink); }
  .ic-upb { margin:0; font-size:13.5px; line-height:1.65; color:var(--ic-ink4);
    max-width:46ch; }
  .ic-upside { flex:0 0 auto; text-align:right; }
  .ic-uprice { margin:0 0 16px; }
  .ic-uprice b { font-family:Orbitron,sans-serif; font-size:28px; font-weight:700;
    color:var(--ic-ink); }
  .ic-uprice span { font-size:12.5px; color:var(--ic-ink5); margin-left:4px; }
  .ic-upsell .btn { margin:0; }

  .ic-manage { max-width:860px; margin:34px auto 0; padding-top:26px;
    border-top:1px solid var(--ic-line3); display:flex; justify-content:center; }
  .ic-manage .btn { margin:0; max-width:280px; }

  @media (max-width:760px){
    .ic-upsell { flex-direction:column; align-items:flex-start; gap:24px; }
    .ic-upside { text-align:left; }
    .ic-srow { flex-direction:column; align-items:flex-start; gap:14px; }
    .ic-a p { padding-left:22px; }
  }

  /* ---------------- education ---------------- */
  .ic-soon { padding:76px 44px; border-radius:18px; text-align:center;
    border:1px dashed var(--ic-line4); background:rgba(255,255,255,.012); }
  .ic-soon .ic-mk { font-family:Orbitron,sans-serif; font-size:10.5px; font-weight:700;
    letter-spacing:.24em; text-transform:uppercase; color:#4fd2f0; }
  .ic-soon p { font-size:15px; line-height:1.6; color:var(--ic-ink3); margin:16px 0 0; }

  /* ============================================================
     MOBILE. Below 860px the fixed rail cannot stay - 252px of a 390px
     screen is two thirds of it. It becomes a bar along the bottom, which
     is where a thumb already is, and the panes get the full width.
     ============================================================ */
  @media (max-width:860px){
    .ic-app { grid-template-columns:1fr; height:100dvh; }

    /* the rail unpins from the side and lies along the bottom */
    .ic-rail { position:fixed; z-index:40; left:0; right:0; bottom:0;
      height:auto; flex-direction:row; padding:0; overflow-x:auto;
      border-right:0; border-top:1px solid var(--ic-line2);
      scrollbar-width:none; }
    .ic-rail::-webkit-scrollbar { display:none; }
    .ic-brand, .ic-collapse { display:none; }
    .ic-nav { flex-direction:row; gap:0; padding:0 6px;
      align-items:stretch; width:max-content; min-width:100%; }
    .ic-nav .ic-sep { display:none; }
    .ic-tab { flex-direction:column; gap:5px; height:auto; width:auto;
      min-width:76px; padding:11px 12px 10px; border-radius:0;
      font-size:9.5px; text-align:center; letter-spacing:.02em; }
    .ic-tab svg { width:20px; height:20px; }
    .ic-tab span { opacity:1 !important; white-space:nowrap; }
    .ic-tab.ic-on { background:none;
      box-shadow:inset 0 2px 0 rgb(var(--n)); color:var(--ic-ink); }

    /* the main column carries the whole width, and clears the bar */
    .ic-main { height:100dvh; padding-bottom:0; }
    .ic-content { padding:26px 18px 190px; }
    .ic-bar { padding:0 18px; height:58px; gap:12px; }
    .ic-title { font-size:14px; }
    .ic-strip { top:58px; padding:0 18px; }
    .ic-zones { max-width:none; }
    .ic-zones { height:46px; }
    .ic-zone { padding-right:16px; margin-right:16px; }
    .ic-zone + .ic-zone::before { left:-16px; }

    /* one column of everything */
    .ic-grid, .ic-vids, .ic-topvids, .ic-progs, .ic-know,
    .ic-pcols { grid-template-columns:1fr !important; }
    /* the shelf is a flex row, not a grid - it keeps scrolling sideways */
    .ic-story { flex:0 0 168px; width:168px; }
    .ic-vids { gap:26px; }
    .ic-item { flex-direction:column; gap:14px; padding:20px 18px; }
    .ic-hero { height:70px; margin:0 0 22px; }
    .ic-hero .ic-htext { padding:0 18px; }
    .ic-hero h2 { font-size:13px; }
    .ic-hero p { font-size:12.5px; }

    .ic-prog .ic-part2 { height:80px; }

    /* the profile header stops being a desktop masthead */
    .ic-pbanner { height:88px; }
    .ic-phead { margin:-30px 0 0; padding:0 20px 20px;
      grid-template-columns:auto 1fr; }
    .ic-pav { width:64px; height:64px; }
    .ic-pname2 { font-size:17px; }
    .ic-pnums { grid-column:1 / span 2; grid-row:3; gap:24px; flex-wrap:wrap;
      margin:18px 0 0; text-align:left; }
    .ic-facts { gap:20px 26px; }

    /* rows keep their shape but lose the desktop gutters */
    .ic-krow { padding:12px 10px; gap:14px; }
    .ic-trow, .ic-mrow { padding:13px 0; gap:12px; }
    .ic-tside { text-align:right; }
    .ic-tnums { gap:12px; }
  }

  @media (max-width:430px){
    .ic-content { padding:20px 14px 186px; }
    .ic-bar { padding:0 14px; }
    .ic-strip { padding:0 14px; }
    .ic-tab { min-width:66px; padding:10px 8px 9px; font-size:9px; }
    .ic-tnums i { font-size:11px; }
    .ic-tsym { font-size:14px; }
    .ic-pnums div b { font-size:17px; }
  }

  @media (max-width:1000px){
    .ic-main { padding:44px 32px 100px; }
  }

  /* ============================================================
     NO NAME LANE — the changes off the 4 September review.
     Everything added here is ic- prefixed like the rest of the file.
     ============================================================ */

  /* ---- 1 · the persistent strip. Sits under the title bar on EVERY pane,
       not just the newsfeed, so what the Circle holds is never off screen.
       The four tiles are the ones off the alerts landing. ---- */
  .ic-strip { position:sticky; top:66px; z-index:19;
    padding:18px 44px 20px;
    background:var(--ic-stripbg); backdrop-filter:blur(22px);
    border-bottom:1px solid var(--ic-line2); }
  .ic-zones { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }

  /* Four boxes across the top duplicated the rail and read as clutter,
     because the rail already says what is in here. This says what is
     HAPPENING in here, which the rail cannot: one line, live numbers,
     each one a way in. */
  .ic-strip { padding:0 44px; }
  .ic-zones { display:flex; align-items:center; gap:0; height:54px; }
  @keyframes icPulse { 0%,100% { transform:scale(1); opacity:1; }
                       50% { transform:scale(1.5); opacity:.55; } }
  .ic-zall { margin-left:auto; padding:0; display:flex; align-items:center;
    gap:8px; font-family:Orbitron,sans-serif; font-size:9.5px;
    letter-spacing:.16em; text-transform:uppercase; color:var(--ic-ink5);
    text-decoration:none; transition:color .2s; }
  .ic-zall:hover { color:var(--ic-ink2); }
  .ic-zall svg { width:13px; height:13px; fill:none; stroke:currentColor;
    stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .ic-zall::before { display:none; }

  @media (max-width:1240px){
    .ic-zones { overflow-x:auto; scrollbar-width:none; }
    .ic-zones::-webkit-scrollbar { display:none; }
    .ic-zall { display:none; }
  }

  /* ---- 2 · real faces, everywhere a person is named ---- */
  .ic-face { overflow:hidden; }
  .ic-face img { width:100%; height:100%; object-fit:cover; border-radius:50%;
    display:block; }

  /* ---- 3 · the video cards carry a real still and a summary ---- */
  .ic-shot img { position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; opacity:.82;
    transition:opacity .25s ease, transform .5s cubic-bezier(.2,.8,.3,1); }
  .ic-vid:hover .ic-shot img { opacity:1; transform:scale(1.04); }
  .ic-vsum { font-size:12.5px; line-height:1.6; color:var(--ic-ink4); margin:8px 0 0;
    max-width:44ch; }

  /* ---- The newsfeed. Built on the same block the influencer hub uses,
       because Gen wanted them to read as one family. Each item carries the
       colour of whatever it came from, on the left edge only. ---- */
  /* No coloured rule down the edge of a feed item - Gen has now knocked
     that treatment back twice, on the nav and here. The colour lives in the
     avatar and the coin mark instead. */
  .ic-item { position:relative; --f:110,194,255; align-items:flex-start; }
  .ic-ibody { min-width:0; flex:1; }
  .ic-item .ic-face.ic-tint { display:grid; place-items:center;
    background:rgba(var(--f),.12); border-color:rgba(var(--f),.4); }
  .ic-fdot { width:9px; height:9px; border-radius:50%; background:rgb(var(--f));
    box-shadow:0 0 0 4px rgba(var(--f),.16), 0 0 12px rgba(var(--f),.8); }
  .ic-fcoin { display:inline-block; width:19px; height:19px; vertical-align:-4px;
    margin-right:8px; }
  .ic-fcoin svg { width:100%; height:100%; display:block; }

  /* ---- the watched gesture. A viewed episode dims, keeps a tick in the
       corner and a filled bar along the bottom, so the backlog reads at a
       glance as done or not done. It survives a reload. ---- */
  .ic-vid.ic-watched .ic-shot img { opacity:.34; filter:saturate(.45); }
  .ic-vid.ic-watched .ic-vtitle { color:var(--ic-ink4); }
  .ic-seen { position:absolute; z-index:2; left:0; top:0; opacity:0;
    --seen-bg:rgba(10,14,21,.82); --seen-ink:var(--ic-ink2);
    display:inline-flex; align-items:center; gap:7px; padding:7px 12px 7px 10px;
    border-radius:0 0 10px 0; font-family:Orbitron,sans-serif; font-size:9px;
    letter-spacing:.16em; text-transform:uppercase; color:var(--seen-ink);
    background:var(--seen-bg); backdrop-filter:blur(8px);
    box-shadow:inset -1px -1px 0 rgba(255,255,255,.07);
    transform:translateY(-4px);
    transition:opacity .25s ease, transform .25s ease; }
  .ic-seen svg { width:11px; height:11px; fill:none; stroke:currentColor;
    stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
  .ic-vid.ic-watched .ic-seen { opacity:1; transform:none; }
  .ic-vid.ic-nowlive .ic-vmeta { color:#ff8a95; }

  /* ---- 6 · a card is a way in to a person, so it says so and behaves
       like a button. Clicking one opens their profile. ---- */
  .ic-card { display:block; width:100%; text-align:left; font:inherit;
    cursor:pointer; color:inherit; }
  .ic-card { text-align:center; padding:34px 26px 26px; }
  .ic-card .ic-stat { display:flex; }
  .ic-card .ic-nm, .ic-card .ic-hd { display:block; }

  /* the face leads. Bigger than the feed's, ringed in the person's colour. */
  .ic-cface { display:block; width:76px; height:76px; margin:0 auto 16px;
    border-radius:50%; overflow:hidden; position:relative;
    border:1px solid rgba(var(--p),.5);
    box-shadow:0 0 0 4px rgba(var(--p),.10), 0 12px 30px rgba(0,0,0,.4);
    transition:transform .26s cubic-bezier(.2,.8,.3,1.2), box-shadow .26s; }
  .ic-cface img { width:100%; height:100%; object-fit:cover; display:block; }
  .ic-card:hover .ic-cface { transform:translateY(-2px) scale(1.04);
    box-shadow:0 0 0 5px rgba(var(--p),.16), 0 16px 36px rgba(0,0,0,.5); }

  .ic-card .ic-nm { font-size:15px; font-weight:600; color:var(--ic-ink); }
  .ic-card .ic-hd { font-size:11.5px; color:var(--ic-ink5); margin-top:4px; }

  /* the one number that says what this page is for */
  .ic-wal { display:inline-flex; align-items:baseline; gap:6px; margin:18px auto 22px;
    padding:7px 14px; border-radius:99px; font-size:11.5px; color:var(--ic-ink3);
    border:1px solid rgba(var(--p),.28); background:rgba(var(--p),.07); }
  .ic-wal b { font-family:Orbitron,sans-serif; font-size:13px; font-weight:700;
    color:rgb(var(--p)); }

  /* the rows read left-to-right again, under the centred head */
  .ic-card .ic-stat { text-align:left; padding:11px 2px; }
  .ic-card .ic-open { justify-content:center; margin-top:22px;
    padding-top:18px; border-top:1px solid var(--ic-line3); }
  .ic-card:hover { border-color:rgba(var(--p),.45); }
  .ic-open { display:flex; align-items:center; gap:7px; margin:18px 0 0;
    font-family:Orbitron,sans-serif; font-size:9.5px; letter-spacing:.18em;
    text-transform:uppercase; color:rgb(var(--p)); opacity:.65;
    transition:opacity .22s ease, gap .22s ease; }
  .ic-card:hover .ic-open { opacity:1; gap:11px; }
  .ic-open svg { width:13px; height:13px; fill:none; stroke:currentColor;
    stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  /* the sparkline is gone from the grid. It still belongs on a profile,
     where there is room to label an axis. */

  /* ---- 7 · the profile itself. Its own banner, then what we hold on them. */
  .ic-prof { display:none; }
  .ic-prof.ic-live { display:block; }
  .ic-back { display:inline-flex; align-items:center; gap:9px; margin:0 0 24px;
    padding:9px 15px 9px 12px; border-radius:9px; cursor:pointer;
    border:1px solid var(--ic-line); background:transparent; font:inherit;
    font-size:12px; color:var(--ic-ink4); transition:.22s; }
  .ic-back:hover { color:var(--ic-ink); border-color:var(--ic-lineHi);
    background:var(--ic-hover); }
  .ic-back svg { width:14px; height:14px; fill:none; stroke:currentColor;
    stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

  /* The banner is the person's colour and nothing else. A stock still
     behind a profile was filling the space rather than saying anything,
     which is what Gen knocked back. */
  .ic-pbanner { position:relative; height:62px; border-radius:16px 16px 0 0;
    overflow:hidden; border:1px solid var(--ic-line); border-bottom:0;
    background:
      radial-gradient(120% 150% at 12% 0%, rgba(var(--p),.42), transparent 62%),
      radial-gradient(90% 130% at 88% 10%, rgba(var(--p),.16), transparent 60%),
      linear-gradient(180deg, rgba(var(--p),.10), var(--ic-bot) 92%); }
  /* one hairline sweep across the top, so it is not a flat wash */
  .ic-pbanner::after { content:""; position:absolute; left:0; right:0; top:0;
    height:1px; background:linear-gradient(90deg,transparent,
      rgba(var(--p),.75) 22%, rgba(var(--p),.75) 60%, transparent); }
  .ic-pbanner .ic-pveil { position:absolute; inset:0;
    background:linear-gradient(180deg,transparent 45%,var(--ic-bot) 100%); }
  body.ic-light .ic-pbanner {
    background:
      radial-gradient(120% 150% at 12% 0%, rgba(var(--p),.30), transparent 62%),
      linear-gradient(180deg, rgba(var(--p),.08), var(--ic-bot) 92%); }
  .ic-phead { position:relative; margin:-30px 0 0; padding:0 36px 28px;
    border:1px solid var(--ic-line); border-top:0; border-radius:0 0 16px 16px;
    background:linear-gradient(180deg,var(--ic-top),var(--ic-bot));
    display:grid; grid-template-columns:auto 1fr auto;
    column-gap:26px; align-items:center; }
  .ic-pav.ic-noface { display:grid; place-items:center;
    font-family:Orbitron,sans-serif; font-size:27px; font-weight:700;
    color:rgb(var(--p)); background:linear-gradient(180deg,var(--ic-top),var(--ic-bot)); }
  .ic-pav { position:relative; z-index:2; grid-column:1; grid-row:1 / span 2;
    width:72px; height:72px; border-radius:50%;
    overflow:hidden; border:3px solid var(--ic-bot);
    box-shadow:0 0 0 1px rgba(var(--p),.5), 0 12px 28px rgba(0,0,0,.5); }
  .ic-pav img { width:100%; height:100%; object-fit:cover; display:block; }
  .ic-pname2 { grid-column:2; grid-row:1; align-self:end;
    font-size:19px; font-weight:700; color:var(--ic-ink); margin:0; }
  .ic-phandle { grid-column:2; grid-row:2; align-self:start;
    font-size:12.5px; color:var(--ic-ink5); margin:3px 0 0; }
  .ic-pnums { grid-column:3; grid-row:1 / span 2; display:flex; gap:40px;
    margin:0; text-align:right; padding-left:20px; }
  .ic-pnums div b { display:block; font-family:Orbitron,sans-serif; font-size:17px;
    font-weight:700; color:rgb(var(--p)); }
  .ic-pnums div span { display:block; font-size:9.5px; letter-spacing:.13em;
    text-transform:uppercase; color:var(--ic-ink6); margin-top:5px; }

  /* ---- The profile as a dashboard, not a feed. Three questions, answered
       in order, each one a block you can read without reading the others:
       who is this, what are they holding, and what have they said about it.
       Every token carries its mark and a link out to the chart. ---- */
  .ic-psec { margin:26px 0 0; }
  .ic-psech { display:flex; align-items:baseline; justify-content:space-between;
    gap:18px; margin:0 0 14px; }
  .ic-psech h3 { margin:0; font-family:Orbitron,sans-serif; font-size:10px;
    font-weight:700; letter-spacing:.22em; text-transform:uppercase;
    color:var(--ic-ink5); }
  .ic-psech span { font-size:11.5px; color:var(--ic-ink6); }
  @media (max-width:860px){ }

  /* the book: a table you can scan down, one row per token */
  .ic-tbl { border:1px solid var(--ic-line3); border-radius:12px; overflow:hidden; }
  .ic-thead, .ic-trow { display:grid; align-items:center;
    grid-template-columns:minmax(150px,1.3fr) 1fr 1fr 1fr auto auto; gap:16px;
    padding:0 18px; }
  .ic-thead { height:38px; background:rgba(var(--p),.06);
    border-bottom:1px solid var(--ic-line3); }
  .ic-thead span { font-family:Orbitron,sans-serif; font-size:9px; font-weight:700;
    letter-spacing:.16em; text-transform:uppercase; color:var(--ic-ink6); }
  .ic-thead span.ic-r, .ic-trow .ic-r { text-align:right; }
  .ic-trow { height:62px; border-top:1px solid var(--ic-line3);
    transition:background .18s ease; }
  .ic-trow:first-of-type { border-top:0; }
  .ic-trow:hover { background:rgba(var(--p),.05); }
  .ic-tname { display:flex; align-items:center; gap:11px; min-width:0; }
  .ic-tmark { width:28px; height:28px; flex:0 0 28px; border-radius:50%;
    overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.08); }
  .ic-tmark svg { width:100%; height:100%; display:block; }
  .ic-tsym { font-family:Orbitron,sans-serif; font-size:13px; font-weight:700;
    letter-spacing:.05em; color:var(--ic-ink); }
  .ic-tnum { font-family:"JetBrains Mono",monospace; font-size:12.5px;
    color:var(--ic-ink3); }
  .ic-tnum.ic-up { color:#3ddc84; }
  .ic-tnum.ic-dn { color:#ff6b7a; }
  .ic-twhen { font-size:11.5px; color:var(--ic-ink5); white-space:nowrap; }
  .ic-tdex { display:inline-flex; align-items:center; gap:5px; font-size:11px;
    letter-spacing:.04em; color:rgb(var(--p)); text-decoration:none;
    padding:6px 11px; border-radius:8px;
    border:1px solid rgba(var(--p),.26); transition:.18s; white-space:nowrap; }
  .ic-tdex:hover { background:rgba(var(--p),.12); border-color:rgba(var(--p),.6); }
  @media (max-width:1100px){
    .ic-thead { display:none; }
    .ic-trow { grid-template-columns:1fr auto; height:auto; gap:6px 14px;
      padding:14px 16px; }
    .ic-trow .ic-tnum, .ic-trow .ic-twhen { font-size:11.5px; }
  }

  /* what they have said: two columns, calls and posts, side by side */
  .ic-say { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  @media (max-width:1100px){ .ic-say { grid-template-columns:1fr; } }
  .ic-saycol { border:1px solid var(--ic-line3); border-radius:12px;
    padding:6px 18px 10px; }
  .ic-saycol h4 { margin:14px 0 4px; font-family:Orbitron,sans-serif;
    font-size:9px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
    color:rgb(var(--p)); }
  .ic-mrow { display:flex; align-items:flex-start; gap:12px; padding:14px 0;
    border-top:1px solid var(--ic-line3); }
  .ic-mrow:first-of-type { border-top:0; }
  .ic-mmark { width:24px; height:24px; flex:0 0 24px; border-radius:50%;
    overflow:hidden; margin-top:1px; }
  .ic-mmark svg { width:100%; height:100%; display:block; }
  .ic-mtext { min-width:0; flex:1; }
  .ic-mtext b { display:block; font-size:13px; color:var(--ic-ink2); font-weight:600; }
  .ic-mtext s { display:block; text-decoration:none; font-size:12.5px;
    line-height:1.55; color:var(--ic-ink5); margin-top:4px; }
  .ic-mwhen { flex:0 0 auto; font-size:11px; color:var(--ic-ink6); white-space:nowrap; }
  .ic-tweet .ic-mmark { border-radius:7px; background:rgba(var(--p),.12);
    display:grid; place-items:center; }
  .ic-tweet .ic-mmark svg { width:12px; height:12px; fill:rgb(var(--p)); }
  .ic-tweet .ic-mtext b { font-weight:400; font-size:13.5px; line-height:1.55; }
  .ic-part2 { position:relative; flex:0 0 148px; height:148px; overflow:hidden; }
  .ic-part2 img { position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; opacity:.5;
    transition:transform .6s cubic-bezier(.2,.8,.3,1), opacity .3s ease; }
  .ic-prog:hover .ic-part2 img { transform:scale(1.05); opacity:.72; }
  .ic-part2 .ic-pveil2 { position:absolute; inset:0;
    background:radial-gradient(120% 130% at 14% 0%,rgba(var(--pc),.34),transparent 64%),
               linear-gradient(180deg,transparent 34%,var(--ic-bot) 100%); }
  body.ic-light .ic-part2 .ic-pveil2 {
    background:radial-gradient(120% 130% at 14% 0%,rgba(var(--pc),.26),transparent 64%),
               linear-gradient(180deg,transparent 30%,var(--ic-bot) 100%); }

  .ic-pin { display:flex; flex-direction:column; flex:1; min-width:0;
    padding:24px 26px 24px; margin-top:-22px; position:relative; z-index:2; }
  .ic-prog .ic-pname { font-family:Orbitron,sans-serif; font-size:16px;
    font-weight:700; letter-spacing:.04em; color:var(--ic-ink);
    margin:0 0 8px; line-height:1.3; }
  .ic-prog .ic-pbody { font-size:13px; line-height:1.55; color:var(--ic-ink3);
    margin:0 0 16px; max-width:40ch; }

  .ic-meter { margin:auto 0 16px; }
  .ic-mtop { display:flex; align-items:baseline; justify-content:space-between;
    gap:16px; margin:0 0 8px; }
  .ic-mtop b { font-family:Orbitron,sans-serif; font-size:11px; font-weight:700;
    letter-spacing:.1em; color:rgb(var(--pc)); }
  .ic-mtop span { font-size:11.5px; color:var(--ic-ink5); }
  /* .ic-pbar, NOT .ic-bar - that is the Hub's title bar, and naming the
     progress meter the same thing collapsed the header to 5px. */
  .ic-pbar { height:5px; border-radius:3px; overflow:hidden;
    background:rgba(var(--pc),.14); }
  .ic-pbar i { display:block; height:100%; border-radius:3px;
    background:linear-gradient(90deg,rgba(var(--pc),.55),rgb(var(--pc)));
    box-shadow:0 0 14px rgba(var(--pc),.6); }

  /* ---- The Knowledge Hub as a categorised list. A grid of equal cards
       gave nothing to scan by; a heading, a rule, then full width rows
       reads top to bottom in one pass. ---- */
  .ic-kgroup { margin:0 0 40px; }
  .ic-khead { display:flex; align-items:center; gap:11px; padding:0 4px 14px;
    border-bottom:1px solid var(--ic-line3); margin:0 0 18px; }
  .ic-khead svg { width:15px; height:15px; flex:0 0 15px; fill:none;
    stroke:rgb(var(--kc)); stroke-width:1.8; stroke-linecap:round;
    stroke-linejoin:round; }
  .ic-khead h3 { margin:0; font-family:Orbitron,sans-serif; font-size:10.5px;
    font-weight:700; letter-spacing:.22em; text-transform:uppercase;
    color:rgb(var(--kc)); }

  .ic-krow { display:flex; align-items:center; gap:20px; padding:16px 20px;
    border-radius:12px; text-decoration:none; border:1px solid transparent;
    transition:border-color .2s, background .2s, transform .2s cubic-bezier(.2,.8,.3,1.1); }
  .ic-krow + .ic-krow { margin-top:8px; }
  .ic-krow:hover { border-color:rgba(var(--kc),.34);
    background:rgba(var(--kc),.06); transform:translateX(3px); }
  .ic-kmark { width:38px; height:38px; flex:0 0 38px; border-radius:10px;
    display:grid; place-items:center; background:rgba(var(--kc),.11);
    border:1px solid rgba(var(--kc),.24); }
  .ic-kmark svg { width:17px; height:17px; fill:none; stroke:rgb(var(--kc));
    stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .ic-kbody { min-width:0; flex:1; }
  .ic-kbody b { display:block; font-size:14.5px; font-weight:600;
    color:var(--ic-ink); }
  .ic-kbody span { display:block; margin-top:4px; font-size:12.5px;
    line-height:1.55; color:var(--ic-ink4); }
  .ic-kgo { flex:0 0 auto; color:var(--ic-ink6); transition:color .2s, transform .2s; }
  .ic-krow:hover .ic-kgo { color:rgb(var(--kc)); transform:translateX(3px); }
  .ic-kgo svg { width:16px; height:16px; fill:none; stroke:currentColor;
    stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  .ic-ktime { flex:0 0 auto; font-family:"JetBrains Mono",monospace;
    font-size:11px; color:var(--ic-ink5); }

  /* the content clears the strip */
  .ic-content { padding-top:40px; }
  /* opening the Hub on a #hash makes the browser scroll to that pane, which
     put the pane's first inch under the sticky strip. This leaves room for
     the bar and the strip instead of fighting the scroll. */
  .ic-pane { scroll-margin-top:220px; }
  /* ============================================================
     THE TOGGLE, and the two places it now works. Newsfeed holds
     feed + livestreams; Education holds Knowledge Hub + programmes.
     `.ic-subview` had no rule at all before this, which is why both
     halves of Education rendered stacked on top of each other.
     ============================================================ */
  /* the emptied strip. Same height, same rule under it, so the page does
     not jump when the counters come back. */
  /* the page name sits on the left of the strip, Open Telegram on the
     right. Same face as the lockup, so the two bars read as one system. */
  /* the strip lines its two ends up with the column under it. space-between
     rather than margin-left:auto, which lost the right edge once the page
     name moved in beside it. */
  .ic-strip .ic-zones { max-width:1180px; margin:0 auto; width:100%;
    display:flex; align-items:center; justify-content:space-between; gap:24px;
    padding:0 clamp(24px, 4vw, 56px); box-sizing:border-box; overflow:visible; }
  .ic-strip .ic-zall { margin-left:0; flex:0 0 auto; }

  .ic-page { font-family:Orbitron,sans-serif; font-size:12px; font-weight:700;
    letter-spacing:.20em; margin-right:-.20em; text-transform:uppercase;
    color:var(--ic-ink); white-space:nowrap; }

  .ic-subview { display:none; }
  .ic-subview.ic-live { display:block; }

  .ic-seg { display:flex; width:max-content; margin:0 auto 34px; padding:4px;
    gap:4px; border-radius:13px; border:1px solid var(--ic-line);
    background:linear-gradient(180deg,var(--ic-top),var(--ic-bot)); }
  .ic-seg button { position:relative; cursor:pointer; padding:11px 26px;
    border:0; border-radius:10px; background:transparent;
    font-family:Orbitron,sans-serif; font-size:10.5px; font-weight:700;
    letter-spacing:.19em; margin-right:-.19em; text-transform:uppercase;
    color:var(--ic-ink5); transition:color .22s, background .22s; }
  .ic-seg button:hover { color:var(--ic-ink2); }
  /* Livestreams wears the moving sign, selected or not, because it is the
     thing Gen wants pulled out of the pair. shell.css draws .ring at a 15px
     radius, so it gets pulled in to the segment's own corner here. */
  .ic-seg .ring { border-radius:10px; }
  .ic-seg .ring::before { inset:-1px; border-radius:11px; padding:1.4px; }

  .ic-seg .ic-segon { color:var(--ic-ink);
    background:linear-gradient(180deg,rgba(110,194,255,.16),rgba(178,131,255,.12));
    box-shadow:inset 0 0 0 1px rgba(140,180,240,.30); }

  /* ---------------- the shelf ----------------
     Small video cards, not circles. The unread ring is the thing that
     carries over from stories: it sits on the still until you have
     watched the episode, then it goes and the picture drains. */
  .ic-stories { display:flex; gap:16px; overflow-x:auto; padding:3px 3px 6px;
    margin:0 0 30px; scrollbar-width:none; }
  .ic-stories::-webkit-scrollbar { display:none; }

  .ic-story { flex:0 0 196px; width:196px; padding:0; border:0; cursor:pointer;
    background:transparent; text-align:left;
    display:flex; flex-direction:column; gap:10px; }
  .ic-sthumb { position:relative; display:block; aspect-ratio:16/9;
    border-radius:12px; overflow:hidden; background:var(--ic-shot);
    transition:transform .24s cubic-bezier(.2,.8,.3,1.15), box-shadow .24s; }
  .ic-sthumb img { position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; transition:opacity .24s, filter .24s; }
  .ic-story:hover .ic-sthumb { transform:translateY(-3px);
    box-shadow:0 16px 36px rgba(0,0,0,.5); }

  /* the unread ring. Sits on the card until the episode has been watched. */
  .ic-sthumb::after { content:""; position:absolute; inset:0; border-radius:12px;
    padding:2px; pointer-events:none;
    background:conic-gradient(from 210deg,#6ec2ff,#4fd2f0,#b283ff,#f06ba8,#6ec2ff);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude; transition:opacity .24s; }
  .ic-story.ic-watched .ic-sthumb::after { opacity:0; }
  .ic-story.ic-watched .ic-sthumb { box-shadow:inset 0 0 0 1px var(--ic-line4); }
  .ic-story.ic-watched .ic-sthumb img { opacity:.4; filter:saturate(.4); }
  .ic-story.ic-watched .ic-stitle { color:var(--ic-ink5); }

  .ic-splay { position:absolute; left:50%; top:50%; width:34px; height:34px;
    margin:-17px 0 0 -17px; border-radius:50%; display:grid; place-items:center;
    background:rgba(10,14,21,.62); backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.16); opacity:0;
    transition:opacity .22s, transform .22s cubic-bezier(.2,.8,.3,1.3); }
  .ic-splay svg { width:11px; height:11px; fill:#fff; margin-left:2px; }
  .ic-story:hover .ic-splay { opacity:1; transform:scale(1.08); }

  .ic-stick { position:absolute; right:8px; top:8px; width:20px; height:20px;
    border-radius:50%; display:grid; place-items:center; opacity:0;
    background:rgba(10,14,21,.84); border:1px solid rgba(255,255,255,.14); }
  .ic-stick svg { width:10px; height:10px; fill:none; stroke:var(--ic-ink2);
    stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
  .ic-story.ic-watched .ic-stick { opacity:1; }

  /* on air. Its own keyframes, and nothing here carries .rise. */
  .ic-slabel { position:absolute; left:8px; bottom:8px; display:flex;
    align-items:center; gap:5px; padding:4px 9px; border-radius:6px;
    font-family:Orbitron,sans-serif; font-size:8.5px; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase; color:#fff;
    background:#ff4d5e; }
  .ic-slabel i { width:5px; height:5px; border-radius:50%; background:#fff;
    animation:ic-air 2s ease-in-out infinite; }
  .ic-story.ic-slive .ic-sthumb::after { background:conic-gradient(from 210deg,
      #ff5a5f,#ff8a5f,#ff5a5f); }

  .ic-stitle { font-size:12.5px; line-height:1.45; color:var(--ic-ink3);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; transition:color .2s; }
  .ic-story:hover .ic-stitle { color:var(--ic-ink); }

  @media (prefers-reduced-motion:reduce){ .ic-slabel i { animation:none; } }

  /* ---------------- the old 16:9 shelf, kept for the library ----------------
     Episodes across the top of the feed. Not stories - these run an hour,
     so they get a real video card and scroll sideways like a YouTube row.
     The card itself is `.ic-vid`, the same one the library uses, so watched,
     the play button and the progress pip all come for free. */
  .ic-shelf { display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x proximity;
    padding:0 2px 6px; margin:0 0 34px; scrollbar-width:thin;
    scrollbar-color:var(--ic-line4) transparent; }
  .ic-shelf .ic-vid { flex:0 0 300px; width:300px; }
  .ic-shelf .ic-vtitle { font-size:13.5px; margin:14px 0 5px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; }
  .ic-shelf .ic-shot { transition:border-color .22s, transform .22s cubic-bezier(.2,.8,.3,1.2); }
  .ic-shelf .ic-vid:hover .ic-shot { transform:translateY(-3px);
    border-color:var(--ic-lineHi); }

  /* Viewed reads as dark glass and a tick. The green chip and the green
     bar under the still are both gone. */
  /* ---------------- the player ---------------- */
  .ic-player[hidden] { display:none; }
  .ic-player { position:fixed; inset:0; z-index:120; display:grid;
    place-items:center; padding:40px; }
  .ic-pbackdrop { position:absolute; inset:0; background:rgba(4,7,12,.86);
    backdrop-filter:blur(10px); animation:ic-pfade .2s ease both; }
  .ic-pbox { position:relative; z-index:1; width:min(1080px,100%); }
  .ic-pframe { position:relative; aspect-ratio:16/9; border-radius:16px;
    overflow:hidden; background:#000; border:1px solid var(--ic-line4);
    box-shadow:0 40px 120px rgba(0,0,0,.7); animation:ic-prise .28s cubic-bezier(.2,.8,.3,1.1) both; }
  .ic-pframe iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
  /* offline, the embed cannot load. The still stays under it so the frame
     is never an empty black box. */
  .ic-pframe img { position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; opacity:.34; }
  /* the player's own head. Not .ic-phead - that is the profile header, and
     the two were fighting over the same name. */
  .ic-plhead { padding:20px 4px 0; }
  .ic-plhead h3 { margin:0; font-size:16px; font-weight:600; line-height:1.45;
    color:var(--ic-ink); }
  .ic-plhead p { margin:8px 0 0; font-size:12px; color:var(--ic-ink4); }
  .ic-px { position:absolute; z-index:2; right:-6px; top:-46px; width:36px; height:36px;
    display:grid; place-items:center; cursor:pointer; border-radius:10px;
    border:1px solid var(--ic-line4); background:var(--ic-bot); color:var(--ic-ink3);
    transition:color .2s, border-color .2s; }
  .ic-px:hover { color:var(--ic-ink); border-color:var(--ic-lineHi); }
  .ic-px svg { width:16px; height:16px; fill:none; stroke:currentColor;
    stroke-width:2; stroke-linecap:round; }
  @keyframes ic-pfade { from { opacity:0; } to { opacity:1; } }
  @keyframes ic-prise { from { opacity:0; transform:translateY(14px) scale(.985); }
                        to   { opacity:1; transform:none; } }
  @media (max-width:860px){
    .ic-player { padding:18px; }
    .ic-px { top:-42px; right:0; }
  }

  /* on air, where the runtime would be. Its own keyframes, and nothing
     here carries .rise. */
  .ic-dur.ic-onair { display:flex; align-items:center; gap:6px;
    background:#ff4d5e; color:#fff; font-weight:600; letter-spacing:.09em; }
  .ic-dur.ic-onair i { width:6px; height:6px; border-radius:50%; background:#fff;
    animation:ic-air 2s ease-in-out infinite; }
  @keyframes ic-air { 0%,100% { opacity:1; } 50% { opacity:.25; } }

  @media (prefers-reduced-motion:reduce){ .ic-dur.ic-onair i { animation:none; } }

  /* the livestreams view already opens on its own hero, so it does not
     need the pane's top margin doubled up under the toggle */

  @media (max-width:860px){
    .ic-seg { width:100%; }
    .ic-seg button { flex:1; padding:12px 10px; letter-spacing:.12em; }
    .ic-stories { gap:16px; margin-bottom:26px; }
  }