/* Donkley.ai: color system, donkey-fur texture, hero (talking donkey + job finder), example dashboard. */
:root {
  --violet: #7c5cff; --violet-ink: #5b3fd6; --coral: #ff7a59; --amber: #f0a92e; --mint: #22b07d;
  --grad: linear-gradient(100deg, #0e9fb5 0%, #7c5cff 55%, #ff7a59 100%);
  --fur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cpath d='M0.0 128.9Q2.4 126.3 3.4 123.6M74.6 46.1Q77.9 42.6 81.0 39.1M95.8 89.0Q97.7 86.7 100.3 84.4M99.1 97.7Q101.1 93.7 103.3 89.6M129.1 113.0Q132.3 109.5 133.0 106.0M96.4 90.1Q100.9 86.0 102.9 82.0M52.1 47.0Q53.5 44.5 57.0 42.0M41.7 60.0Q44.7 55.5 47.4 51.0M102.1 122.9Q103.8 119.9 105.1 117.0M71.2 59.0Q72.5 54.5 76.5 50.0M51.2 48.2Q54.6 44.2 58.0 40.2M23.2 56.8Q24.9 53.7 27.0 50.7M46.6 74.4Q49.8 72.0 50.6 69.5M64.1 120.8Q67.0 117.4 69.8 114.1M70.7 96.5Q74.0 93.9 76.1 91.4M35.2 82.2Q36.8 79.3 39.0 76.4M111.3 122.9Q112.4 118.5 116.0 114.1M57.0 21.5Q58.7 16.6 62.1 11.8M88.5 20.2Q90.0 16.7 93.6 13.3M129.1 123.8Q134.0 120.2 136.4 116.6M106.6 38.6Q106.7 35.6 109.4 32.7M0.2 86.4Q2.6 82.3 5.1 78.3M96.3 33.3Q98.2 31.1 100.8 28.8M125.2 16.6Q127.9 14.6 128.2 12.6M89.2 129.1Q90.6 124.4 93.8 119.8M135.6 79.1Q137.0 76.6 139.9 74.2M29.3 79.0Q32.0 74.7 33.6 70.5M100.0 69.7Q102.5 67.2 102.5 64.7M18.3 96.3Q21.3 94.5 22.0 92.6M120.6 139.0Q123.9 135.7 127.6 132.4M34.7 101.9Q36.6 99.3 40.0 96.7M56.7 124.2Q59.3 121.4 61.1 118.6M102.9 46.9Q104.5 44.1 107.9 41.3M43.6 138.0Q48.0 135.0 50.2 132.1M128.6 27.9Q130.4 25.7 132.3 23.5M78.0 108.0Q80.0 105.3 83.8 102.6M62.5 23.3Q65.4 20.2 67.8 17.1M70.9 106.0Q72.2 102.1 76.3 98.1M41.8 75.8Q43.6 71.8 46.6 67.8M33.0 92.3Q35.4 90.1 36.2 87.9M115.2 128.2Q119.8 125.0 121.7 121.9M3.5 106.7Q7.7 103.1 9.4 99.4M5.2 19.0Q5.3 16.5 7.8 14.0M1.3 84.7Q2.5 82.6 5.8 80.5M28.3 94.5Q31.8 91.2 32.3 87.9M59.2 94.3Q61.4 91.6 64.2 88.9M8.6 32.2Q11.3 28.3 16.1 24.4M129.6 71.2Q131.4 68.5 132.6 65.7M23.9 10.9Q26.4 7.2 28.6 3.4M67.3 139.1Q68.5 135.8 70.8 132.5M0.6 0.9Q1.4 -1.4 3.8 -3.7M129.4 108.8Q133.0 106.0 134.5 103.3M134.7 112.1Q137.0 108.9 140.2 105.7M57.0 69.6Q60.2 66.2 62.0 62.9M93.1 88.6Q97.6 84.8 100.0 80.9M138.4 61.3Q143.0 57.0 144.8 52.7M50.1 11.1Q53.6 6.8 55.8 2.5M103.3 133.7Q104.7 131.5 107.6 129.2M111.8 14.6Q115.7 11.2 118.9 7.8M99.6 75.0Q102.8 70.9 105.6 66.7M122.3 37.9Q124.5 35.0 127.3 32.2M26.3 82.5Q29.9 78.0 31.6 73.6M47.3 95.6Q48.8 93.6 51.4 91.6M128.9 0.2Q129.3 -3.0 132.5 -6.3M97.0 125.7Q99.9 123.0 100.1 120.3M98.0 24.5Q98.6 20.7 102.2 16.8M113.7 82.8Q115.1 80.7 117.6 78.6M100.1 133.7Q103.5 130.3 105.3 127.0M98.3 102.7Q98.8 100.5 101.9 98.4M85.9 31.5Q87.1 28.9 89.9 26.4' fill='none' stroke='%237a6c5d' stroke-opacity='.13' stroke-width='.9' stroke-linecap='round'/%3E%3Cpath d='M86.8 88.1Q90.2 85.8 91.3 83.5M7.4 96.7Q10.7 92.7 13.0 88.7M112.7 14.7Q116.5 11.9 118.4 9.1M59.5 121.3Q63.9 117.9 65.9 114.5M120.1 26.6Q121.0 24.4 124.1 22.2M132.8 133.7Q133.3 131.2 135.3 128.8M131.7 121.8Q133.2 119.5 136.6 117.2M4.2 65.8Q5.5 63.5 7.8 61.2M67.3 31.7Q67.3 29.4 69.7 27.1M88.1 65.5Q91.4 62.1 94.6 58.7M98.1 54.3Q102.3 50.2 104.9 46.0M134.7 99.6Q136.8 95.8 140.9 92.0M9.2 101.7Q11.7 98.8 14.1 95.9M54.2 69.2Q54.2 66.9 56.8 64.5M49.6 48.2Q50.7 44.4 54.1 40.6M7.3 0.2Q9.5 -3.4 14.5 -7.1M107.5 44.6Q111.4 40.3 113.5 36.0M1.6 139.1Q3.7 135.3 6.1 131.4M4.6 24.2Q7.1 20.7 11.1 17.2M120.1 113.9Q121.6 110.6 124.3 107.4M35.5 123.4Q38.7 120.2 41.9 117.0M121.3 114.8Q126.1 111.3 128.0 107.9M96.8 40.0Q100.2 37.4 101.4 34.8M22.8 118.3Q25.9 114.6 29.2 110.8M111.4 116.0Q111.9 113.2 114.3 110.3M3.3 80.9Q7.4 77.7 9.3 74.5M121.2 113.9Q123.2 110.3 125.4 106.7M54.0 75.3Q56.4 72.4 59.5 69.4M70.0 34.3Q72.5 30.7 76.3 27.1M35.6 86.0Q39.1 81.8 42.2 77.6M44.3 84.0Q47.2 80.6 49.8 77.1M22.6 29.2Q24.7 26.1 26.0 23.1M122.4 90.2Q124.1 87.3 126.5 84.3M17.6 21.7Q19.0 18.2 21.2 14.7M12.8 88.8Q13.8 85.6 17.2 82.4M117.6 38.4Q118.3 36.0 120.7 33.6M61.2 28.0Q64.7 24.7 66.6 21.4M109.9 68.9Q111.9 65.7 116.3 62.5M87.4 103.1Q91.8 100.1 93.4 97.1M40.7 139.3Q41.4 136.8 43.2 134.3' fill='none' stroke='%237a6c5d' stroke-opacity='.08' stroke-width='.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Donkey fur: a static tiled SVG of short hair strokes, very low contrast, under the light background. */
body { background-color: var(--bg); background-image: var(--fur); background-size: 140px 140px; }
@media (max-width: 600px) { body { background-size: 110px 110px; } }

.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.eyebrow { color: var(--violet-ink); }
.eyebrow::before { background: var(--grad); }
.btn-primary::before { background: linear-gradient(110deg, transparent 30%, rgba(124, 92, 255, .55) 50%, transparent 70%); }
.btn-primary:hover { box-shadow: 0 12px 28px -10px rgba(124, 92, 255, .6); }

/* ---------- Hero ---------- */
.hx { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(18px, 3vw, 36px) clamp(48px, 7vw, 88px); }
.hx-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hx-bg::after { /* stronger fur around the donkey, fading out */
  content: ""; position: absolute; left: 50%; top: 0; width: 900px; height: 520px; transform: translateX(-50%);
  background-image: var(--fur); background-size: 90px 90px; opacity: .9;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent);
}
.aur { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; will-change: transform; }
.aur.a1 { width: 520px; height: 420px; left: calc(50% - 560px); top: -120px; background: radial-gradient(circle, rgba(34, 211, 238, .75), transparent 65%); animation: aur1 18s ease-in-out infinite alternate; }
.aur.a2 { width: 560px; height: 460px; left: calc(50% + 40px); top: -160px; background: radial-gradient(circle, rgba(124, 92, 255, .6), transparent 65%); animation: aur2 22s ease-in-out infinite alternate; }
.aur.a3 { width: 460px; height: 380px; left: calc(50% - 160px); top: 260px; background: radial-gradient(circle, rgba(255, 122, 89, .4), transparent 65%); animation: aur3 26s ease-in-out infinite alternate; }
@keyframes aur1 { to { transform: translate(80px, 40px) scale(1.1); } }
@keyframes aur2 { to { transform: translate(-90px, 50px) scale(.92); } }
@keyframes aur3 { to { transform: translate(60px, -40px) scale(1.12); } }
.hx-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hx h1 { font-size: clamp(2.2rem, 6.4vw, 4.6rem); letter-spacing: -.045em; line-height: 1.02; max-width: 14ch; margin: 6px 0 .3em; color: var(--ink); }
.hx h1 .hl { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx .lead { color: var(--ink-2); font-size: clamp(1.05rem, 2vw, 1.25rem); max-width: 560px; margin: 0 auto 26px; }

/* ---------- Talking donkey ---------- */
.talker { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.talker-face {
  position: relative; width: clamp(150px, 26vw, 210px); aspect-ratio: 1; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .9); background: radial-gradient(circle at 50% 35%, #fff, #f1efeb 70%);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .5), 0 30px 60px -24px rgba(124, 92, 255, .45), 0 10px 30px -12px rgba(14, 159, 181, .4);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.talker-face:hover { transform: translateY(-2px) scale(1.02); }
.talker-face:focus-visible { outline: 3px solid var(--violet); outline-offset: 6px; border-radius: 50%; }
.halo { position: absolute; inset: -10px; border-radius: 50%; background: conic-gradient(from 0deg, #22d3ee, #7c5cff, #ff7a59, #22d3ee); opacity: .0; z-index: -1; filter: blur(10px); transition: opacity .4s; animation: spin 6s linear infinite; }
.talking .halo { opacity: .7; }
@keyframes spin { to { transform: rotate(1turn); } }
.dk-head { position: absolute; left: 12%; top: 6%; width: 80%; height: auto; overflow: visible; }
.dk-ear { transform-box: fill-box; transform-origin: 50% 100%; }
.dk-ear-r { animation: dk-ear 7s 2s infinite; }
.dk-ear-l { animation: dk-ear 9s 5s infinite; }
@keyframes dk-ear { 0%, 90%, 100% { transform: rotate(0); } 93% { transform: rotate(-9deg); } 96% { transform: rotate(4deg); } }
.dk-eye { transform-box: fill-box; transform-origin: center; animation: dk-blink 5s infinite; }
@keyframes dk-blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.dk-lipidle { transform-box: fill-box; transform-origin: 30% 50%; animation: dk-lip 3.4s ease-in-out infinite; }
@keyframes dk-lip { 0%, 70%, 100% { transform: none; } 78% { transform: rotate(-3deg) translateY(-.4px); } 86% { transform: rotate(2deg); } }
.talking .dk-lipidle { animation: none; }
.dk-drool { transform-box: fill-box; transform-origin: 50% 0; transform: scale(0); opacity: 0; }
.drooling .dk-drool { animation: dk-drool 2.6s var(--ease) both; }
@keyframes dk-drool {
  0% { transform: scale(0); opacity: 0; }
  18% { transform: scale(.8, .7); opacity: 1; }
  45% { transform: scale(1, 1.25) translateY(.6px); opacity: 1; }
  62% { transform: scale(.9, 1.6) translateY(1.4px); opacity: 1; }
  80% { transform: scale(.6, .5) translateY(-.4px); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}
.wave { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); display: flex; gap: 3px; align-items: center; height: 18px; opacity: 0; transition: opacity .3s; }
.talking .wave { opacity: 1; }
.wave i { width: 3px; height: 4px; border-radius: 3px; background: var(--grad); transition: height .08s linear; }
.talker-ctl { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.talk-btn, .mute-btn {
  display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; cursor: pointer; font: 600 .9rem/1 var(--f-head);
  color: var(--ink); background: rgba(255, 255, 255, .85); border: 1px solid var(--line-2); padding: 9px 14px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color .2s, background .2s;
}
.talk-btn svg { width: 12px; height: 12px; color: var(--violet); }
.mute-btn { padding: 8px; }
.mute-btn svg { width: 18px; height: 18px; }
.mute-btn .x { display: none; }
.mute-btn[aria-pressed="true"] .x { display: inline; }
.mute-btn[aria-pressed="true"] .snd { display: none; }
.talk-btn:hover, .mute-btn:hover { border-color: var(--ink); background: #fff; }
.talker-cap { min-height: 1.5em; max-width: 520px; margin: 2px 0 0; font: 500 .98rem/1.5 var(--f-body); color: var(--ink-2); }
.talker-cap .w { opacity: .28; transition: opacity .15s; }
.talker-cap .w.on { opacity: 1; }
.ai-tag { margin: 0; font: 600 .66rem/1 var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ---------- Job finder ---------- */
.finder { width: 100%; max-width: 760px; position: relative; text-align: left; }
.finder-box {
  position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 20px; border-radius: 22px; background: #fff;
  box-shadow: 0 0 0 1px rgba(20, 23, 28, .08), 0 24px 60px -24px rgba(124, 92, 255, .5), 0 8px 24px -12px rgba(14, 159, 181, .35);
  transition: box-shadow .3s var(--ease);
}
.finder-box::before { content: ""; position: absolute; inset: -2px; border-radius: 24px; padding: 2px; background: var(--grad); z-index: -1; opacity: .0; transition: opacity .3s; }
.finder-box:focus-within::before { opacity: 1; }
.finder-ic { width: 26px; height: 26px; color: var(--violet-ink); }
.finder input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--ink); font: 500 clamp(1.05rem, 2.4vw, 1.3rem)/1.2 var(--f-body); padding: 14px 4px; }
.finder input::placeholder { color: #8a9098; }
.finder-go { padding: 16px 22px; border-radius: 16px; font-size: 1.02rem; }
@media (max-width: 480px) { .finder-go { padding: 14px; } .finder-go .arrow { display: none; } .finder-box { padding-left: 12px; } .finder-ic { width: 22px; height: 22px; } }
.finder-out { margin-top: 10px; border-radius: 18px; padding: 8px; background: rgba(255, 255, 255, .96); border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(20, 23, 28, .45); }
.finder-out[hidden] { display: none; }
.finder-count { margin: 4px 10px 6px; font: 600 .74rem/1.4 var(--f-head); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.finder-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 420px; overflow-y: auto; }
.finder-list a { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--ink); border: 1px solid transparent; animation: f-in .3s var(--ease) both; }
.finder-list a:hover, .finder-list a:focus-visible { background: #f4f1ff; border-color: rgba(124, 92, 255, .35); outline: none; color: var(--ink); }
.finder-list b { font: 600 1rem/1.3 var(--f-head); min-width: 0; }
.finder-list small { grid-column: 1; color: var(--muted); font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.finder-list .f-price { grid-row: 1 / 3; grid-column: 2; align-self: center; font: 700 1.05rem var(--f-head); color: var(--violet-ink); }
.finder-list .f-g { color: var(--cyan-ink); font: 600 .68rem var(--f-head); letter-spacing: .08em; text-transform: uppercase; margin-right: 6px; }
@keyframes f-in { from { opacity: 0; transform: translateY(-4px); } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 16px 0 0; max-width: 820px; }
a.chip { padding: 8px 14px; border-radius: 999px; text-decoration: none; font: 500 .9rem/1.2 var(--f-body); color: var(--ink-2); background: rgba(255, 255, 255, .75); border: 1px solid var(--line); transition: border-color .2s, color .2s, transform .2s var(--ease), background .2s; }
a.chip:hover { color: var(--ink); background: #fff; border-color: rgba(124, 92, 255, .45); transform: translateY(-1px); }
.facts { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; color: var(--ink-2); font-size: .9rem; }
.facts li { display: inline-flex; align-items: center; gap: 7px; }
.facts .ico { width: 18px; height: 18px; color: var(--violet-ink); }

/* ---------- Example dashboard (bento) ---------- */
.dash-sec { padding-top: clamp(24px, 4vw, 48px); }
.bento-dash { display: grid; gap: 14px; grid-template-columns: repeat(6, 1fr); }
.tile { position: relative; min-width: 0; padding: 18px; border-radius: 20px; background: rgba(255, 255, 255, .82); border: 1px solid rgba(20, 23, 28, .08); box-shadow: 0 1px 0 rgba(20, 23, 28, .03), 0 18px 40px -26px rgba(60, 40, 140, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.tile-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; font: 600 .78rem/1.3 var(--f-head); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.t-kpi { grid-column: span 2; }
.kpi-big { margin: 0; font: 700 clamp(1.8rem, 3.6vw, 2.6rem)/1 var(--f-head); letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.tile-sub { margin: 6px 0 0; font-size: .88rem; color: var(--muted); }
.t-grad { background: var(--grad); border-color: transparent; color: #fff; }
.t-grad .tile-h, .t-grad .tile-sub { color: rgba(255, 255, 255, .85); }
.t-grad .kpi-big { color: #fff; }
.t-area { grid-column: span 4; }
.t-donut { grid-column: span 2; }
.t-bars { grid-column: span 3; }
.t-jobs { grid-column: span 3; }
.t-term { grid-column: span 3; padding: 0; overflow: hidden; background: #0b0d10; border-color: #0b0d10; }
.t-result { grid-column: span 3; padding: 0; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; }
@media (max-width: 960px) { .bento-dash { grid-template-columns: repeat(2, 1fr); } .t-kpi { grid-column: span 1; } .t-kpi.t-grad { grid-column: span 2; } .t-area, .t-donut, .t-bars, .t-jobs, .t-term, .t-result { grid-column: span 2; } }
@media (max-width: 520px) { .bento-dash { grid-template-columns: 1fr; } .t-kpi, .t-kpi.t-grad { grid-column: span 1; } .t-area, .t-donut, .t-bars, .t-jobs, .t-term, .t-result { grid-column: span 1; } }
.dash-note { text-align: center; margin: 16px 0 0; }

/* Area chart */
.chart-area { display: block; width: 100%; height: auto; overflow: visible; }
.ch-grid line { stroke: rgba(20, 23, 28, .08); stroke-width: 1; }
.ch-grid text, .ch-x text { font: 500 7px var(--f-mono); fill: #8a9098; }
.ar-line { stroke-dasharray: 1; stroke-dashoffset: 0; }
.ar-fill, .ar-dot { opacity: 1; }
.js .t-area:not(.in) .ar-line { stroke-dashoffset: 1; }
.js .t-area:not(.in) .ar-fill, .js .t-area:not(.in) .ar-dot { opacity: 0; }
.js .t-area .ar-line { transition: stroke-dashoffset 1.8s var(--ease) .2s; }
.js .t-area .ar-fill { transition: opacity 1s ease 1s; }
.js .t-area .ar-dot { transition: opacity .4s ease 1.9s; }

/* Donut */
.donut { display: grid; grid-template-columns: minmax(110px, 140px) 1fr; gap: 14px; align-items: center; }
.donut svg { width: 100%; height: auto; transform: rotate(-90deg); }
.donut text { transform: rotate(90deg); transform-origin: 60px 60px; }
.dn-track { fill: none; stroke: rgba(20, 23, 28, .06); stroke-width: 14; }
.dn-seg { fill: none; stroke-width: 14; transition: stroke-dasharray 1.1s var(--ease); transition-delay: calc(var(--i) * .12s + .2s); }
.js .t-donut:not(.in) .dn-seg { stroke-dasharray: 0 100 !important; }
.dn-big { font: 700 22px var(--f-head); fill: var(--ink); }
.dn-small { font: 500 8px var(--f-body); fill: #8a9098; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .84rem; }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend b { margin-left: auto; font: 600 .82rem var(--f-mono); }
@media (max-width: 1100px) and (min-width: 961px) { .donut { grid-template-columns: 1fr; } .donut svg { max-width: 140px; margin: 0 auto; } }

/* Cost bars */
.bars { display: grid; gap: 12px; }
.bar-row { display: grid; grid-template-columns: 130px 1fr 72px; gap: 10px; align-items: center; font-size: .86rem; }
.bar-row b { font: 700 .95rem var(--f-head); text-align: right; }
.bar-track { position: relative; height: 14px; border-radius: 8px; background: rgba(20, 23, 28, .06); overflow: hidden; }
.bar-fill { position: absolute; top: 0; bottom: 0; left: var(--l, 0); width: var(--w); border-radius: 8px; transform-origin: left; transition: transform 1.2s var(--ease) .2s; }
.js .t-bars:not(.in) .bar-fill { transform: scaleX(0); }
.b-us { background: var(--grad); min-width: 6px; }
.b-them { background: repeating-linear-gradient(135deg, #ffb39f 0 6px, #ffc9ba 6px 12px); }
.bar-scale { display: flex; justify-content: space-between; margin-left: 140px; margin-right: 82px; font: 500 .7rem var(--f-mono); color: #8a9098; }
.fine { margin: 12px 0 0; font-size: .76rem; line-height: 1.45; color: var(--muted); }
@media (max-width: 520px) { .bar-row { grid-template-columns: 1fr 64px; } .bar-l { grid-column: 1 / -1; } .bar-scale { margin: 0 72px 0 0; } }

/* Jobs in progress */
.jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.jobs li { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; }
.j-n { min-width: 0; }
.j-n b { display: block; font: 600 .94rem/1.25 var(--f-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.j-n small { color: var(--muted); font-size: .76rem; }
.jobs .bar { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: rgba(20, 23, 28, .06); overflow: hidden; }
.jobs .bar i { display: block; height: 100%; border-radius: inherit; background: var(--grad); transition: width .9s var(--ease); }
.jobs li[data-state="done"] .bar i { background: var(--mint); }

/* Terminal */
.term-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font: 500 .74rem var(--f-mono); color: #8f969e; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.term-bar .ex-tag { margin-left: auto; }
.term-bar .dots i { width: 8px; height: 8px; background: #2a3038; }
.term-bar .dots i:first-child { background: var(--coral); } .term-bar .dots i:nth-child(2) { background: var(--amber); } .term-bar .dots i:nth-child(3) { background: var(--mint); }
.term-body { margin: 0; padding: 14px 16px; min-height: 186px; font: 400 .8rem/1.7 var(--f-mono); color: #b9a9ff; white-space: pre-wrap; overflow-wrap: anywhere; }
.term-body .ok { color: #5fd69a; }
.term-body .cur { display: inline-block; width: 7px; height: 1em; vertical-align: -2px; background: #22d3ee; animation: t-blink 1s steps(2) infinite; }
@keyframes t-blink { 50% { opacity: 0; } }

/* Example result card (dinner plan) */
.app { position: relative; border-radius: 20px; overflow: hidden; background: #fff; color: var(--ink); border: 1px solid rgba(20, 23, 28, .08); box-shadow: 0 18px 40px -26px rgba(60, 40, 140, .35); height: 100%; }
.app-bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #f6f5f2; border-bottom: 1px solid var(--line); }
.app-url { flex: 1; min-width: 0; font: 500 .74rem var(--f-mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-body { padding: 14px 16px 16px; }
.app-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.app-kicker { margin: 0; font: 600 .7rem var(--f-head); letter-spacing: .08em; text-transform: uppercase; color: var(--violet-ink); }
.app-title { margin: 2px 0 0; font: 700 1.2rem/1.2 var(--f-head); letter-spacing: -.02em; }
.app-order { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 10px 0 12px; }
.app-order li { font-size: .76rem; padding: 4px 9px; border-radius: 8px; background: #f2f1ee; color: var(--ink-2); }
.app-order b { font-weight: 600; color: var(--muted); margin-right: 5px; }
.dinners { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.dinners li { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .86rem; }
.dinners .d { font: 700 .72rem var(--f-head); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.dinners .m { font-weight: 500; min-width: 0; }
.dinners .t { font: 500 .72rem var(--f-mono); color: var(--muted); }
.app-foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-top: 12px; font-size: .8rem; color: var(--muted); }
.app-foot > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.app-foot .ico { width: 16px; height: 16px; }
.app-actions { display: inline-flex; gap: 6px; }

/* Menu cards and steps pick up the new accents */
a.mcard::before { background: var(--grad); }
.steps4 .is-ai { background: linear-gradient(140deg, #14171c, #2a1f5c); }
.mc-b-new { background: var(--grad); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .aur, .halo, .dk-ear, .dk-eye, .dk-lipidle, .term-body .cur { animation: none !important; }
  .drooling .dk-drool { animation: none !important; }
  .js .t-area:not(.in) .ar-line, .js .t-donut:not(.in) .dn-seg, .js .t-bars:not(.in) .bar-fill { stroke-dashoffset: 0; transform: none; }
  .js .t-area:not(.in) .ar-fill, .js .t-area:not(.in) .ar-dot { opacity: 1; }
}
/* Phones: keep the background static and light. */
@media (max-width: 600px) { .aur { animation: none; filter: blur(40px); } }