/* Never underline links on hover */
a:hover {
    text-decoration: none;
}

/* ---- Whoami section ---- */
.whoami {
    display: flex;
    align-items: stretch;
    gap: 18px;
}

.whoami img {
    flex-shrink: 0;
}

/* avatar keeps a fixed width but stretches its height to match the
   terminal, so the two panels line up top and bottom */
.whoami .ida-avatar {
    flex-shrink: 0;
    width: var(--ida-size);
    height: auto;
    align-self: stretch;
    border-radius: 10px;
}

/* whoami "cat whoami" terminal */
.whoami-term {
    flex: 1;
    min-width: 0;
    background: #0d1117;
    border: 1px solid #1f2733;
    border-radius: 10px;
    overflow: hidden;
    font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.82em;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.whoami-term .bar {
    background: #161b22;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid #1f2733;
}

.whoami-term .bar i {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
}

.whoami-term .bar .r { background: #ff5f56; }
.whoami-term .bar .y { background: #ffbd2e; }
.whoami-term .bar .g { background: #27c93f; }

.whoami-term .bar b {
    color: #8b98a5;
    font-weight: 500;
    margin-left: 8px;
    font-size: 0.85em;
}

.whoami-term .body {
    padding: 14px 16px;
    color: #adbac7;
    line-height: 1.75;
}

.whoami-term .cmd { color: #e6edf3; }
.whoami-term .cmd::before { content: "$ "; color: #3ef29b; }
.whoami-term .k { color: #ff5555; }   /* keys — bright red */
.whoami-term .s { color: #3ef29b; }   /* values — bright green */
.whoami-term .cm { color: #6cb6ff; }  /* comment — blue */

/* stack on small screens */
@media (max-width: 600px) {
    .whoami {
        flex-direction: column;
        align-items: center;
    }

    /* column layout: force an explicit square so it can never collapse
       (stretch would apply horizontally here and height:auto -> 0) */
    .whoami .ida-avatar {
        flex: 0 0 auto;
        width: 180px;
        height: 180px;
        align-self: center;
    }

    .whoami-term {
        width: 100%;
        font-size: 0.78em;
    }
}

/* ---- Shared card pieces ---- */
.card,
.card-square {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
    overflow: hidden;
    width: 100%;
    text-decoration: none;
    color: var(--text);
    font-family: var(--display);
    display: flex;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover,
.card-square:hover {
    transform: translateY(-4px);
    /* soft drop shadow + a golden ring highlight (ring drawn via box-shadow
       so it doesn't shift layout the way a real border would) */
    box-shadow: var(--shadow-lg), var(--ring);
}

.card:hover .card-ribbon,
.card-square:hover .card-ribbon {
    opacity: 1;
}

.card-content {
    padding: 15px;
    flex-grow: 1;
}

/* A card title is a link label, not a section heading, so it drops the h3
   top margin that would otherwise pad the top of every card. The display face
   is monospace and therefore wide: at the old 1.5em long titles ran to three
   lines and drove the card height. */
.card-title {
    font-size: 1.15em;
    line-height: 1.35;
    margin: 0 0 8px;
    color: var(--heading);
}

/* Body text uses a clean sans-serif to contrast the display-face title */
.card-description {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 0.9em;
    font-weight: 400;
    color: var(--text-dim);
    line-height: 1.5;
    margin-bottom: 12px;
}

/* Date/meta as a small uppercase caption, clearly secondary */
.card-meta {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 0.72em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
}

.card-ribbon {
    position: absolute;
    top: 15px;
    left: -5px;
    background: var(--ribbon, var(--btn));
    color: #fff;
    padding: 5px 10px;
    font-size: 0.85em;
    font-weight: bold;
    opacity: 0;
}

/* ---- Post filter bar (search + tag chips) ---- */
/* Chips are generated by posts-filter.js from the tags present on the cards,
   so adding a tag in _data/posts.yml is enough to get a new chip. */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
}

.filter-search {
    flex: 1 1 220px;
    min-width: 170px;
    padding: 8px 13px;
    font-family: var(--sans);
    font-size: 0.88em;
    color: var(--text);
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.15s ease;
}

.filter-search::placeholder { color: var(--text-dim); }
.filter-search:focus { border-color: var(--accent); }

.filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.filter-chip {
    padding: 5px 11px;
    font-family: var(--sans);
    font-size: 0.72em;
    font-weight: 600;
    color: var(--text-dim);
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.filter-chip:hover { color: var(--accent); border-color: var(--accent); }
.filter-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.filter-chip.active {
    color: var(--accent-ink);
    background: var(--accent);
    border-color: var(--accent);
}

/* Tags on a post card. Gold keeps them distinct from the blue topic tags
   used by the repo cards further down the page. */
.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}

.card-tag {
    font-family: var(--sans);
    font-size: 0.62em;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: 999px;
    padding: 2px 8px;
}

.no-results {
    margin: 4px 0 0;
    text-align: center;
    color: var(--text-dim);
    font-size: 0.9em;
}

.no-results[hidden] { display: none; }

/* ---- Horizontal post cards ---- */
.card-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.card {
    flex-direction: row;
}

.card img {
    min-width: 30%;
    max-width: 30%;
    height: auto;
    object-fit: cover;
}

/* Stack post cards vertically on small screens */
@media (max-width: 600px) {
    .card {
        flex-direction: column;
    }

    .card img {
        min-width: 100%;
        max-width: 100%;
        height: 180px;
    }
}

/* ---- Square project cards ---- */
.card-container-square {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.card-square {
    max-width: 300px;
    flex-direction: column;
}

.card-square:hover {
    transform: translateY(-3px);
}

.card-square img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* ---- Pagination controls ---- */
.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    font-family: var(--display);
}

.pagination-controls button,
.pagination-controls span.page-number {
    background: var(--btn);
    color: #fff;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px;
    margin: 0 5px;
    font-size: 1em;
    transition: background-color 0.3s;
}

.pagination-controls button:disabled {
    background: var(--bg-subtle);
    color: var(--text-dim);
    cursor: not-allowed;
}

.pagination-controls span.page-number {
    background: var(--bg-subtle);
    color: var(--text);
    cursor: default;
}

.pagination-controls button:hover:not(:disabled) {
    filter: brightness(1.1);
}

/* Pagination is driven by JS: controls ship with the `hidden` attribute and
   are revealed on init, so without JS all cards simply show at once. */
.pagination-controls[hidden] {
    display: none;
}

/* ---- Social / support badges (shields.io style) ---- */
.badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.social-badge {
    display: inline-flex;
    align-items: stretch;
    height: 28px;
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    font-size: 0.78em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.social-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.22);
}

.social-badge .badge-icon {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    color: #fff;
    font-weight: 600;
}

.social-badge .badge-text {
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: var(--badge-neutral, #555);
    color: #fff;
}

.social-badge svg {
    width: 14px;
    height: 14px;
    fill: #fff;
}

.social-badge.b-git .badge-icon { background: #f05032; }
.social-badge.b-medium .badge-icon { background: #000; }
.social-badge.b-linkedin .badge-icon { background: #0a66c2; }
.social-badge.b-coffee .badge-icon { background: #0070ba; }

/* ---- Certification badges (shields.io style, text/text) ---- */
.cert-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.cert-badge {
    display: inline-flex;
    align-items: stretch;
    height: 30px;
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    font-size: 0.8em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cert-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.22);
}

.cert-badge .cert-key {
    display: flex;
    align-items: center;
    padding: 0 10px;
    color: #fff;
    font-weight: 700;
}

.cert-badge .cert-val {
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: var(--badge-neutral, #555);
    color: #fff;
}

/* ---- Project repo cards (GitHub-style) ---- */
.repo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 16px;
}

.repo {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.repo:hover {
    transform: translateY(-3px);
    /* golden ring highlight to match the post cards */
    box-shadow: var(--shadow-lg), var(--ring);
    border-color: var(--accent-warm);
}

.repo-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.repo-icon {
    width: 16px;
    height: 16px;
    fill: var(--text-dim);
    flex-shrink: 0;
}

.repo-name {
    color: var(--link);
    font-weight: 700;
    font-size: 1.05em;
    line-height: 1.2;
}

.repo-ribbon {
    margin-left: auto;
    font-size: 0.62em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    background: var(--btn);
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.repo-ribbon.r-featured { background: var(--accent-warm); }
.repo-ribbon.r-archived { background: #8b8b8b; }

.repo-desc {
    font-size: 0.86em;
    color: var(--text-dim);
    line-height: 1.45;
    flex-grow: 1;
    margin: 0;
}

.repo-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.repo-tags .tag {
    font-size: 0.7em;
    font-weight: 600;
    background: var(--link-soft);
    color: var(--link);
    border-radius: 20px;
    padding: 2px 9px;
}

/* Marks a repo that is also live as a GitHub Pages site. Green reads as a
   deployment status and keeps it clearly apart from the blue topic tags. */
.repo-tags .tag-pages {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--live-soft);
    color: var(--live);
    box-shadow: inset 0 0 0 1px currentColor;
}

.repo-tags .tag-pages svg {
    width: 10px;
    height: 10px;
    fill: currentColor;
    flex-shrink: 0;
}

.repo-foot {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.78em;
    color: var(--text-dim);
    min-height: 16px;
}

.repo-lang {
    display: flex;
    align-items: center;
    gap: 5px;
}

.lang-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #8b8b8b;
    display: inline-block;
}

.repo-stat {
    display: flex;
    align-items: center;
    gap: 4px;
}

.repo-stat svg {
    width: 14px;
    height: 14px;
    fill: var(--text-dim);
}

/* ── IDA animated avatar · slim port of IDA_Logo_Animation.html ──
   Usage: set the size with --ida-size on .ida-avatar (default 100px).
   Requires the base GIF (your existing modern_ida101.GIF) as the <img> src.
   Optional: load "JetBrains Mono" (Google Fonts) for the exact handle font. */
.ida-avatar {
  --ida-size: 100px;
  position: relative;
  width: var(--ida-size); height: var(--ida-size);
  overflow: hidden;
  background: #0c0d10;
  box-shadow: 0 .04em .11em rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.07);
  /* container-relative unit: 1em == size/26.67 (30px at 800px, like the original) */
  font-size: calc(var(--ida-size) * 0.0375);
  user-select: none;
}
.ida-avatar > * { position: absolute; pointer-events: none; }

/* base image · seamless ken-burns drift + noir grade
   (slight over-bleed so the composited edge never exposes the tile) */
.ida-base {
  inset: -3%; width: 106%; height: 106%; object-fit: cover;
  filter: saturate(0.22) contrast(1.22) brightness(1.03);
  animation: ida-kenburns 4s linear infinite;
  will-change: transform;
}
@keyframes ida-kenburns {
  0% { transform: scale(1.0600) translate(0.000%, 0.000%); }
  12.5% { transform: scale(1.0727) translate(0.424%, -0.132%); }
  25% { transform: scale(1.0780) translate(0.600%, -0.450%); }
  37.5% { transform: scale(1.0727) translate(0.424%, -0.768%); }
  50% { transform: scale(1.0600) translate(0.000%, -0.900%); }
  62.5% { transform: scale(1.0473) translate(-0.424%, -0.768%); }
  75% { transform: scale(1.0420) translate(-0.600%, -0.450%); }
  87.5% { transform: scale(1.0473) translate(-0.424%, -0.132%); }
  100% { transform: scale(1.0600) translate(-0.000%, 0.000%); }
}

/* mood tint (noir) */
.ida-tint { inset: 0; background: rgba(80,105,145,.14); mix-blend-mode: overlay; }

/* cigarette ember glow */
.ida-ember {
  left: 80%; top: 46%; width: 9%; height: 7%;
  transform: translate(-50%,-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,120,40,.85) 0%, rgba(255,80,30,.25) 45%, rgba(255,80,30,0) 70%);
  filter: blur(.1em); mix-blend-mode: screen;
  animation: ida-ember 4s linear infinite;
}
@keyframes ida-ember {
  0%{opacity:0.360}
  2.5%{opacity:0.463}
  5%{opacity:0.360}
  7.5%{opacity:0.137}
  10%{opacity:0.056}
  12.5%{opacity:0.200}
  15%{opacity:0.360}
  17.5%{opacity:0.325}
  20%{opacity:0.172}
  22.5%{opacity:0.158}
  25%{opacity:0.360}
  27.5%{opacity:0.562}
  30%{opacity:0.548}
  32.5%{opacity:0.395}
  35%{opacity:0.360}
  37.5%{opacity:0.520}
  40%{opacity:0.664}
  42.5%{opacity:0.583}
  45%{opacity:0.360}
  47.5%{opacity:0.257}
  50%{opacity:0.360}
  52.5%{opacity:0.463}
  55%{opacity:0.360}
  57.5%{opacity:0.137}
  60%{opacity:0.056}
  62.5%{opacity:0.200}
  65%{opacity:0.360}
  67.5%{opacity:0.325}
  70%{opacity:0.172}
  72.5%{opacity:0.158}
  75%{opacity:0.360}
  77.5%{opacity:0.562}
  80%{opacity:0.548}
  82.5%{opacity:0.395}
  85%{opacity:0.360}
  87.5%{opacity:0.520}
  90%{opacity:0.664}
  92.5%{opacity:0.583}
  95%{opacity:0.360}
  97.5%{opacity:0.257}
  100%{opacity:0.360}
}

/* smoke plumes */
.ida-smoke {
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(235,238,245,.9) 0%, rgba(225,230,240,.35) 45%, rgba(220,225,235,0) 72%);
  filter: blur(.233em);
  animation: 4s linear infinite;
  will-change: transform, opacity;
}
.ida-smoke.s1 { width:10%; height:15%;   animation-name: ida-smoke1; }
.ida-smoke.s2 { width:7%;  height:10.5%; animation-name: ida-smoke2; animation-delay: -1.52s; }
.ida-smoke.s3 { width:12%; height:18%;   animation-name: ida-smoke3; animation-delay: -2.84s; }
@keyframes ida-smoke1 {
  0%{top:42.00%;left:76.00%;opacity:0.000;transform:translate(-50%,-50%) scale(0.60) rotate(0.0deg)}
  10%{top:37.80%;left:78.02%;opacity:0.117;transform:translate(-50%,-50%) scale(0.73) rotate(6.1deg)}
  20%{top:33.60%;left:78.38%;opacity:0.223;transform:translate(-50%,-50%) scale(0.86) rotate(7.1deg)}
  30%{top:29.40%;left:76.77%;opacity:0.307;transform:translate(-50%,-50%) scale(0.99) rotate(2.3deg)}
  40%{top:25.20%;left:74.53%;opacity:0.361;transform:translate(-50%,-50%) scale(1.12) rotate(-4.4deg)}
  50%{top:21.00%;left:73.50%;opacity:0.380;transform:translate(-50%,-50%) scale(1.25) rotate(-7.5deg)}
  60%{top:16.80%;left:74.53%;opacity:0.361;transform:translate(-50%,-50%) scale(1.38) rotate(-4.4deg)}
  70%{top:12.60%;left:76.77%;opacity:0.307;transform:translate(-50%,-50%) scale(1.51) rotate(2.3deg)}
  80%{top:8.40%;left:78.38%;opacity:0.223;transform:translate(-50%,-50%) scale(1.64) rotate(7.1deg)}
  90%{top:4.20%;left:78.02%;opacity:0.117;transform:translate(-50%,-50%) scale(1.77) rotate(6.1deg)}
  100%{top:0.00%;left:76.00%;opacity:0.000;transform:translate(-50%,-50%) scale(1.90) rotate(0.0deg)}
}
@keyframes ida-smoke2 {
  0%{top:40.00%;left:75.86%;opacity:0.000;transform:translate(-50%,-50%) scale(0.60) rotate(-6.4deg)}
  10%{top:35.80%;left:74.50%;opacity:0.117;transform:translate(-50%,-50%) scale(0.73) rotate(-10.5deg)}
  20%{top:31.60%;left:76.03%;opacity:0.223;transform:translate(-50%,-50%) scale(0.86) rotate(-5.9deg)}
  30%{top:27.40%;left:79.18%;opacity:0.307;transform:translate(-50%,-50%) scale(0.99) rotate(3.5deg)}
  40%{top:23.20%;left:81.36%;opacity:0.361;transform:translate(-50%,-50%) scale(1.12) rotate(10.1deg)}
  50%{top:19.00%;left:80.77%;opacity:0.380;transform:translate(-50%,-50%) scale(1.25) rotate(8.3deg)}
  60%{top:14.80%;left:77.89%;opacity:0.361;transform:translate(-50%,-50%) scale(1.38) rotate(-0.3deg)}
  70%{top:10.60%;left:75.11%;opacity:0.307;transform:translate(-50%,-50%) scale(1.51) rotate(-8.7deg)}
  80%{top:6.40%;left:74.71%;opacity:0.223;transform:translate(-50%,-50%) scale(1.64) rotate(-9.9deg)}
  90%{top:2.20%;left:77.02%;opacity:0.117;transform:translate(-50%,-50%) scale(1.77) rotate(-2.9deg)}
  100%{top:-2.00%;left:80.14%;opacity:0.000;transform:translate(-50%,-50%) scale(1.90) rotate(6.4deg)}
}
@keyframes ida-smoke3 {
  0%{top:43.00%;left:75.46%;opacity:0.000;transform:translate(-50%,-50%) scale(0.60) rotate(4.4deg)}
  10%{top:38.80%;left:75.96%;opacity:0.117;transform:translate(-50%,-50%) scale(0.73) rotate(5.9deg)}
  20%{top:34.60%;left:74.85%;opacity:0.223;transform:translate(-50%,-50%) scale(0.86) rotate(2.6deg)}
  30%{top:30.40%;left:73.04%;opacity:0.307;transform:translate(-50%,-50%) scale(0.99) rotate(-2.9deg)}
  40%{top:26.20%;left:72.02%;opacity:0.361;transform:translate(-50%,-50%) scale(1.12) rotate(-6.0deg)}
  50%{top:22.00%;left:72.63%;opacity:0.380;transform:translate(-50%,-50%) scale(1.25) rotate(-4.1deg)}
  60%{top:17.80%;left:74.37%;opacity:0.361;transform:translate(-50%,-50%) scale(1.38) rotate(1.1deg)}
  70%{top:13.60%;left:75.81%;opacity:0.307;transform:translate(-50%,-50%) scale(1.51) rotate(5.4deg)}
  80%{top:9.40%;left:75.75%;opacity:0.223;transform:translate(-50%,-50%) scale(1.64) rotate(5.3deg)}
  90%{top:5.20%;left:74.25%;opacity:0.117;transform:translate(-50%,-50%) scale(1.77) rotate(0.8deg)}
  100%{top:1.00%;left:72.54%;opacity:0.000;transform:translate(-50%,-50%) scale(1.90) rotate(-4.4deg)}
}

/* film grain — noise tile is injected by the script below */
.ida-grain {
  inset: 0; background-size: 128px 128px;
  opacity: .316; mix-blend-mode: overlay;
  animation: ida-grain .667s step-end infinite;
}
@keyframes ida-grain {
  0.000%{background-position:0px 0px}
  12.500%{background-position:37px 81px}
  25.000%{background-position:91px 14px}
  37.500%{background-position:55px 55px}
  50.000%{background-position:13px 97px}
  62.500%{background-position:77px 29px}
  75.000%{background-position:29px 63px}
  87.500%{background-position:63px 7px}
  100%{background-position:0px 0px}
}

/* vignette */
.ida-vig {
  inset: 0;
  background: radial-gradient(ellipse at 50% 42%, rgba(0,0,0,0) 48%, rgba(0,0,0,.78) 100%);
}

/* handle overlay */
.ida-handle {
  left: 0; right: 0; bottom: 6.5%;
  display: flex; flex-direction: column; align-items: center; gap: .267em;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  text-align: center; line-height: 1;
}
.ida-handle .h {
  font-weight: 700; font-size: 1em; letter-spacing: .08em;
  color: rgba(120,255,170,.95);
  text-shadow: 0 0 .4em rgba(80,255,150,.45), 0 .067em .2em rgba(0,0,0,.9);
}
.ida-handle .h .p { color: rgba(120,255,170,.5); }
.ida-handle .t {
  font-weight: 400; font-size: .433em; letter-spacing: .18em;
  color: rgba(200,210,220,.55);
}

@media (prefers-reduced-motion: reduce) {
  .ida-base, .ida-ember, .ida-smoke, .ida-grain { animation: none; }
}