/* v2 visual direction: a warm editorial case archive with one loud accent. */
body.case-page {
  --case-ink: #111312;
  --case-paper: #f4efe6;
  --case-paper-deep: #e9e1d4;
  --case-coral: #ff554b;
  --case-blue: #2354f5;
  --case-line: #cfc6b8;
  --case-muted: #686862;
  --case-serif: Georgia, 'Times New Roman', serif;
  --case-sans: 'Avenir Next', 'Segoe UI', 'PingFang SC', sans-serif;
  --case-mono: 'IBM Plex Mono', 'Cascadia Code', monospace;
  color: var(--case-ink);
  background: var(--case-paper);
  border-top: 5px solid var(--case-coral);
  font-family: var(--case-sans);
}

body.case-page .site-noise { opacity: .035; mix-blend-mode: multiply; }
body.case-page .site-grid { display: none; }
body.case-page .site-header { border-bottom: 1px solid var(--case-ink); background: rgba(244,239,230,.94); backdrop-filter: blur(16px); }
body.case-page .site-header.scrolled { border-bottom-color: var(--case-coral); background: rgba(244,239,230,.98); }
body.case-page .wordmark-mark { color: #fff; background: var(--case-coral); border-radius: 0; transform: rotate(-4deg); }
body.case-page .wordmark-mark span { color: #fff; }
body.case-page .wordmark-copy strong { color: var(--case-ink); }
body.case-page .wordmark-copy small { color: var(--case-muted); }
body.case-page .desktop-nav a, body.case-page .mobile-nav a, body.case-page .lang-toggle { color: var(--case-ink); }
body.case-page .desktop-nav a:hover, body.case-page .mobile-nav a:hover, body.case-page .lang-toggle:hover { color: var(--case-coral); }
body.case-page .button-outline { color: var(--case-ink); border-color: var(--case-ink); background: transparent; border-radius: 0; }
body.case-page .button-outline:hover { color: #fff; border-color: var(--case-coral); background: var(--case-coral); }
body.case-page .menu-toggle { color: var(--case-ink); border-color: var(--case-ink); border-radius: 0; }

body.case-page .inner-page-hero {
  min-height: 760px;
  padding: 100px 0 124px;
  overflow: hidden;
  background: var(--case-paper);
  border-bottom: 1px solid var(--case-ink);
}
body.case-page .inner-page-hero::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 7px;
  background: var(--case-coral);
  opacity: .9;
}
body.case-page .hero-layout { grid-template-columns: minmax(0, 1.05fr) minmax(420px, .75fr); gap: 72px; }
body.case-page .hero-copy { position: relative; z-index: 1; }
body.case-page .eyebrow { color: var(--case-coral); font-family: var(--case-mono); letter-spacing: .18em; }
body.case-page .eyebrow-dot { width: 8px; height: 8px; border-radius: 0; background: var(--case-coral); box-shadow: none; transform: rotate(45deg); }
body.case-page .hero h1 {
  max-width: 760px;
  color: var(--case-ink);
  font-family: var(--case-serif);
  font-size: clamp(64px, 8.3vw, 122px);
  font-weight: 500;
  letter-spacing: -.085em;
  line-height: .88;
}
body.case-page .hero h1 em { color: var(--case-coral); }
body.case-page .hero-lede { max-width: 600px; margin-top: 38px; color: #3c3d38; font-size: 18px; line-height: 1.78; }
body.case-page .hero-actions { margin-top: 38px; }
body.case-page .button-primary { color: #fff; background: var(--case-coral); border-radius: 0; box-shadow: 8px 8px 0 var(--case-ink); }
body.case-page .button-primary:hover { color: #fff; background: var(--case-ink); box-shadow: 8px 8px 0 var(--case-coral); }
body.case-page .text-link { color: var(--case-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
body.case-page .text-link:hover { color: var(--case-coral); }
body.case-page .hero-note { color: var(--case-muted); font-family: var(--case-mono); }
body.case-page .hero-note span { color: var(--case-coral); }
body.case-page .hero-panel {
  border: 1px solid var(--case-ink);
  border-radius: 0;
  background: var(--case-ink);
  box-shadow: 16px 16px 0 var(--case-coral);
  transform: rotate(1.35deg);
}
body.case-page .panel-chrome { border-bottom-color: rgba(244,239,230,.18); color: #aaa99e; }
body.case-page .panel-chrome .chrome-dots i:nth-child(1) { background: var(--case-coral); }
body.case-page .panel-chrome .chrome-dots i:nth-child(2) { background: #f4c75d; }
body.case-page .panel-chrome .chrome-dots i:nth-child(3) { background: #bce976; }
body.case-page .panel-status { color: #c7f17b; }
body.case-page .hero-panel-body { padding: 34px 31px 27px; }
body.case-page .panel-kicker { color: #a4a59c; }
body.case-page .panel-title { color: #fffaf2; font-family: var(--case-serif); font-size: 32px; font-weight: 500; line-height: 1.08; }
body.case-page .signal-stack { border-top-color: rgba(244,239,230,.2); }
body.case-page .signal-row { border-bottom-color: rgba(244,239,230,.2); }
body.case-page .signal-index, body.case-page .signal-value { color: #8b8d86; }
body.case-page .signal-label { color: #f5efe6; }
body.case-page .signal-state.ok { color: #c7f17b; }
body.case-page .signal-state.live { color: #73c2ff; }
body.case-page .signal-state.warn { color: #ff9b62; }
body.case-page .panel-foot { color: #ffb0a9; }

body.case-page .work-section { background: var(--case-paper-deep); border-top: 0; border-bottom: 1px solid var(--case-ink); }
body.case-page .section-heading { margin-bottom: 54px; }
body.case-page .section-heading h2 { color: var(--case-ink); font-family: var(--case-serif); font-size: clamp(52px, 6vw, 88px); font-weight: 500; letter-spacing: -.075em; line-height: .9; }
body.case-page .section-heading .accent { color: var(--case-coral); }
body.case-page .section-heading > p { color: #55564f; }
body.case-page .library-toolbar { padding: 16px; border: 1px solid var(--case-ink); background: var(--case-ink); }
body.case-page .library-toolbar label { color: #d8d2c7; }
body.case-page .library-toolbar input, body.case-page .library-toolbar select { min-height: 46px; color: #fffaf2; border-color: rgba(244,239,230,.3); border-radius: 0; background: #1d201d; }
body.case-page .library-toolbar input::placeholder { color: #8e9088; }
body.case-page .library-toolbar input:focus, body.case-page .library-toolbar select:focus { border-color: var(--case-coral); box-shadow: 0 0 0 3px rgba(255,85,75,.17); }
body.case-page .library-toolbar .button-outline { color: #fffaf2; border-color: rgba(244,239,230,.6); }
body.case-page .library-toolbar .button-outline:hover { color: var(--case-ink); border-color: var(--case-coral); background: var(--case-coral); }
body.case-page .library-meta { color: #686961; border-top-color: var(--case-line); }
body.case-page .library-meta span:first-child { color: var(--case-coral); }

body.case-page .cases-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
body.case-page .case-card {
  grid-column: span 5;
  min-height: 386px;
  padding: 27px 27px 23px;
  border: 1px solid var(--case-ink);
  border-radius: 0;
  background: #fffdf8;
  box-shadow: 8px 8px 0 rgba(17,19,18,.08);
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .2s ease;
}
body.case-page .case-card:nth-child(4n+1), body.case-page .case-card:nth-child(4n+4) { grid-column: span 7; }
body.case-page .case-card:hover { transform: translate(-4px,-6px); border-color: var(--case-coral); background: #fffdf8; box-shadow: 12px 14px 0 rgba(255,85,75,.19); }
body.case-page .case-card.demo-card { border-style: dashed; }
body.case-page .case-card-header { margin-bottom: 3px; }
body.case-page .case-icon { width: 42px; height: 42px; border: 1px solid var(--case-ink); border-radius: 0; color: var(--case-ink); font-family: var(--case-mono); }
body.case-page .case-status { border-radius: 0; color: var(--case-coral); background: #fff0e7; font-family: var(--case-mono); }
body.case-page .case-status.internal { color: var(--case-blue); background: #edf1ff; }
body.case-page .case-status.demo { color: #92630b; background: #fff4ce; }
body.case-page .case-card h3 { color: var(--case-ink); font-family: var(--case-serif); font-size: clamp(26px, 2.2vw, 36px); font-weight: 500; letter-spacing: -.055em; line-height: .99; }
body.case-page .case-summary { color: #4f504a; font-size: 14px; line-height: 1.72; }
body.case-page .case-proof { border-color: var(--case-coral); color: #5f6058; background: #fff2eb; }
body.case-page .case-card.demo-card .case-proof { border-color: #d69e20; background: #fff8df; }
body.case-page .case-tags { gap: 7px; }
body.case-page .case-tags span { padding: 5px 7px; border: 1px solid var(--case-line); color: #676860; font: 500 10px var(--case-mono); }
body.case-page .case-footer { color: #777870; border-top: 1px solid var(--case-line); padding-top: 14px; }
body.case-page .case-open { color: var(--case-coral); font-family: var(--case-mono); }
body.case-page .case-card:hover .case-open { color: var(--case-ink); }
body.case-page .case-card-artifact { height: 148px; margin: -27px -27px 21px; border-bottom: 1px solid var(--case-ink); }
body.case-page .case-card-artifact::after { background: linear-gradient(120deg, rgba(255,85,75,.08), transparent 45%, rgba(35,84,245,.14)); }
body.case-page .case-card-artifact img { filter: saturate(.8) contrast(1.05); object-position: center 40%; }
body.case-page .case-card-artifact span { border-color: #fff; color: #fff; background: rgba(17,19,18,.82); font-family: var(--case-mono); }
body.case-page .case-card-placeholder { position: relative; height: 148px; margin: -27px -27px 21px; overflow: hidden; color: var(--case-ink); background: #e5ddd0; }
body.case-page .case-card-placeholder::before { content: ''; position: absolute; inset: 19px 23px; border: 1px solid rgba(17,19,18,.48); background: repeating-linear-gradient(0deg, transparent 0 17px, rgba(17,19,18,.1) 18px 19px), linear-gradient(135deg, transparent 0 62%, rgba(255,85,75,.92) 62% 63%, transparent 63%); }
body.case-page .case-card-placeholder b { position: absolute; left: 25px; bottom: 21px; color: var(--case-coral); font: 500 12px var(--case-mono); letter-spacing: .12em; }
body.case-page .case-card-placeholder small { position: absolute; right: 24px; top: 21px; color: #4b4d47; font: 500 9px var(--case-mono); }
body.case-page .case-card:nth-child(3n) .case-card-placeholder { color: #fffaf2; background: var(--case-ink); }
body.case-page .case-card:nth-child(3n) .case-card-placeholder::before { border-color: rgba(244,239,230,.36); background: repeating-linear-gradient(0deg, transparent 0 17px, rgba(244,239,230,.1) 18px 19px), linear-gradient(135deg, transparent 0 62%, rgba(255,85,75,.9) 62% 63%, transparent 63%); }
body.case-page .case-card:nth-child(3n) .case-card-placeholder small { color: #c9c8be; }
body.case-page .case-card:nth-child(3n+1) .case-card-placeholder { color: #fff; background: var(--case-blue); }
body.case-page .case-card:nth-child(3n+1) .case-card-placeholder::before { border-color: rgba(255,255,255,.56); background: repeating-linear-gradient(0deg, transparent 0 17px, rgba(255,255,255,.12) 18px 19px), linear-gradient(135deg, transparent 0 62%, rgba(255,85,75,.9) 62% 63%, transparent 63%); }
body.case-page .case-card:nth-child(3n+1) .case-card-placeholder b, body.case-page .case-card:nth-child(3n+1) .case-card-placeholder small { color: #fff; }
body.case-page .case-card:nth-child(3n+2) .case-card-placeholder { background: #ffcfc5; }
body.case-page .case-card:nth-child(3n+2) .case-card-placeholder::before { border-color: rgba(17,19,18,.45); background: repeating-linear-gradient(0deg, transparent 0 17px, rgba(17,19,18,.09) 18px 19px), linear-gradient(135deg, transparent 0 62%, var(--case-blue) 62% 63%, transparent 63%); }

body.case-page .intro-band { background: var(--case-ink); border-color: var(--case-ink); }
body.case-page .split-intro h2 { color: #fffaf2; font-family: var(--case-serif); font-weight: 500; }
body.case-page .split-intro .accent { color: var(--case-coral); }
body.case-page .split-intro .eyebrow { color: #ffb0a9; }
body.case-page .body-large { color: #c9c7bd; }
body.case-page .site-footer { color: #cbc9bf; border-top-color: var(--case-ink); background: #0d0f0e; }
body.case-page .footer-brand p, body.case-page .footer-grid p, body.case-page .footer-grid a, body.case-page .footer-bottom { color: #aaa99f; }
body.case-page .footer-label { color: #ff8d84; }

body.case-page .case-dialog { border: 1px solid #fffaf2; border-radius: 0; background: #121514; box-shadow: 20px 24px 0 rgba(255,85,75,.65), 0 35px 120px rgba(0,0,0,.55); }
body.case-page .case-dialog::backdrop { background: rgba(17,19,18,.74); backdrop-filter: blur(7px); }
body.case-page .dialog-close { border-radius: 0; color: #fffaf2; border-color: rgba(255,255,255,.35); }
body.case-page .dialog-close:hover { color: #fff; border-color: var(--case-coral); background: var(--case-coral); }
body.case-page .dialog-kicker, body.case-page .case-artifacts-head { color: #ff9c93; }
body.case-page .dialog-body h2 { color: #fffaf2; font-family: var(--case-serif); font-weight: 500; }
body.case-page .dialog-body > p, body.case-page .case-human-process p, body.case-page .dialog-list li { color: #c0c2b8; }
body.case-page .case-human-process { border-color: rgba(255,255,255,.16); border-left-color: var(--case-coral); background: rgba(255,85,75,.08); }
body.case-page .case-human-process > span { color: #ff9c93; }
body.case-page .case-artifact-note { color: #aaa99f; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.035); }
body.case-page .case-artifact-note b { color: #fffaf2; }
body.case-page .dialog-proof { color: #e5e1d8; border-color: var(--case-coral); background: rgba(255,85,75,.08); }
body.case-page .dialog-footer { border-color: rgba(255,255,255,.16); color: #aaa99f; }

@media (max-width: 980px) {
  body.case-page .hero-layout { grid-template-columns: 1fr; gap: 60px; }
  body.case-page .hero-panel { max-width: 680px; margin-left: auto; }
  body.case-page .cases-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.case-page .case-card, body.case-page .case-card:nth-child(4n+1), body.case-page .case-card:nth-child(4n+4) { grid-column: auto; }
}
@media (max-width: 720px) {
  body.case-page { border-top-width: 3px; }
  body.case-page .inner-page-hero { min-height: auto; padding: 73px 0 94px; }
  body.case-page .hero h1 { font-size: clamp(57px, 16vw, 84px); }
  body.case-page .hero-lede { font-size: 16px; }
  body.case-page .hero-panel { box-shadow: 9px 10px 0 var(--case-coral); transform: none; }
  body.case-page .section-heading h2 { font-size: clamp(51px, 15vw, 78px); }
  body.case-page .cases-grid { grid-template-columns: 1fr; gap: 15px; }
  body.case-page .case-card { min-height: 0; }
  body.case-page .case-card h3 { font-size: 31px; }
  body.case-page .case-card-artifact, body.case-page .case-card-placeholder { height: 170px; }
  body.case-page .case-dialog { width: calc(100% - 24px); box-shadow: 8px 8px 0 rgba(255,85,75,.65), 0 30px 70px rgba(0,0,0,.58); }
}

/* v10 bridge: the archive now shares the dark Tommy Tang studio atmosphere. */
body.case-page {
  --case-paper: #0b0d0e;
  --case-paper-deep: #111516;
  --case-line: rgba(241,238,231,.16);
  --case-muted: #8f9790;
  background: var(--case-paper);
  color: #f1eee7;
}
body.case-page .site-header { background: rgba(11,13,14,.92); border-bottom-color: var(--case-line); }
body.case-page .site-header.scrolled { background: rgba(11,13,14,.98); border-bottom-color: var(--case-coral); }
body.case-page .wordmark-copy strong, body.case-page .desktop-nav a, body.case-page .mobile-nav a, body.case-page .lang-toggle { color: #f1eee7; }
body.case-page .wordmark-copy small { color: #89918a; }
body.case-page .button-outline, body.case-page .text-link, body.case-page .menu-toggle { color: #f1eee7; border-color: rgba(241,238,231,.4); }
body.case-page .inner-page-hero { background: var(--case-paper); border-bottom-color: var(--case-line); }
body.case-page .hero h1 { color: #f1eee7; font-family: var(--case-sans); font-size: clamp(54px, 6.3vw, 86px); font-weight: 600; letter-spacing: -.08em; line-height: .98; }
body.case-page .hero-lede { color: #aab1aa; }
body.case-page .hero-note { color: #8f9790; }
body.case-page .work-section { background: var(--case-paper-deep); border-bottom-color: var(--case-line); }
body.case-page .section-heading h2 { color: #f1eee7; font-family: var(--case-sans); font-size: clamp(42px, 5vw, 70px); font-weight: 600; line-height: 1.02; }
body.case-page .section-heading > p { color: #9da49d; }
body.case-page .library-meta { color: #7e8780; border-top-color: var(--case-line); }
body.case-page .case-card { background: #121617; border-color: var(--case-line); box-shadow: none; }
body.case-page .case-card:hover { background: #171b1c; box-shadow: 10px 12px 0 rgba(255,90,79,.2); }
body.case-page .case-icon { color: #f1eee7; border-color: rgba(241,238,231,.45); }
body.case-page .case-card h3 { color: #f1eee7; font-family: var(--case-serif); }
body.case-page .case-summary { color: #a5ada6; }
body.case-page .case-proof { color: #c3cac3; background: rgba(255,90,79,.08); }
body.case-page .case-tags span { color: #a3aaa3; border-color: var(--case-line); }
body.case-page .case-footer { color: #7f8780; border-top-color: var(--case-line); }
body.case-page .case-card-placeholder { color: #f1eee7; background: #151a1c; }
body.case-page .case-card-placeholder::before { border-color: rgba(241,238,231,.25); background: repeating-linear-gradient(0deg, transparent 0 17px, rgba(241,238,231,.08) 18px 19px), linear-gradient(135deg, transparent 0 62%, rgba(255,90,79,.92) 62% 63%, transparent 63%); }
body.case-page .case-card:nth-child(3n) .case-card-placeholder, body.case-page .case-card:nth-child(3n+1) .case-card-placeholder, body.case-page .case-card:nth-child(3n+2) .case-card-placeholder { color: #f1eee7; background: #151a1c; }
body.case-page .case-card:nth-child(3n) .case-card-placeholder::before, body.case-page .case-card:nth-child(3n+1) .case-card-placeholder::before, body.case-page .case-card:nth-child(3n+2) .case-card-placeholder::before { border-color: rgba(241,238,231,.25); background: repeating-linear-gradient(0deg, transparent 0 17px, rgba(241,238,231,.08) 18px 19px), linear-gradient(135deg, transparent 0 62%, rgba(255,90,79,.92) 62% 63%, transparent 63%); }
body.case-page .case-card-placeholder b, body.case-page .case-card-placeholder small, body.case-page .case-card:nth-child(3n+1) .case-card-placeholder b, body.case-page .case-card:nth-child(3n+1) .case-card-placeholder small { color: #ff8d84; }
body.case-page .site-footer { border-top-color: var(--case-line); background: #080a0b; }

/* v11 archive evidence: each no-photo case gets a semantic work trace instead of the same placeholder. */
body.case-page .case-card-placeholder { display:flex; flex-direction:column; justify-content:space-between; height:148px; margin:-27px -27px 21px; padding:16px 18px 13px; overflow:hidden; color:#f1eee7; background:#141a1c; }
body.case-page .case-card-placeholder::before { display:none; }
body.case-page .case-placeholder-head, body.case-page .case-placeholder-foot { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; }
body.case-page .case-placeholder-head small { position:static; color:#8f9790; font:500 9px var(--case-mono); letter-spacing:.08em; }
body.case-page .case-placeholder-head b { position:static; color:var(--case-coral); font:600 11px var(--case-mono); letter-spacing:.12em; }
body.case-page .case-placeholder-viz { position:relative; z-index:1; display:grid; grid-template-columns:repeat(5,1fr); align-items:end; gap:7px; height:54px; margin:0 2px; }
body.case-page .case-placeholder-viz::before { position:absolute; right:0; bottom:9px; left:0; content:""; border-top:1px solid rgba(241,238,231,.2); }
body.case-page .case-placeholder-viz i { display:block; height:23px; border:1px solid rgba(241,238,231,.28); background:linear-gradient(180deg,rgba(255,90,79,.82),rgba(255,90,79,.18)); transform:skewY(-8deg); }
body.case-page .case-placeholder-viz i:nth-child(2) { height:37px; background:linear-gradient(180deg,rgba(141,168,255,.86),rgba(141,168,255,.16)); }
body.case-page .case-placeholder-viz i:nth-child(3) { height:30px; background:linear-gradient(180deg,rgba(201,239,114,.88),rgba(201,239,114,.14)); }
body.case-page .case-placeholder-viz i:nth-child(4) { height:45px; background:linear-gradient(180deg,rgba(255,90,79,.92),rgba(255,90,79,.18)); }
body.case-page .case-placeholder-viz i:nth-child(5) { height:19px; background:linear-gradient(180deg,rgba(241,238,231,.7),rgba(241,238,231,.12)); }
body.case-page .case-placeholder-foot span, body.case-page .case-placeholder-foot strong { color:#7f8780; font:500 8px var(--case-mono); letter-spacing:.08em; }
body.case-page .case-placeholder-foot strong { color:#ff8d84; font-weight:500; }
body.case-page .case-card-placeholder.motif-palette { background:radial-gradient(circle at 78% 22%,rgba(255,90,79,.22),transparent 34%),#17181b; }
body.case-page .case-card-placeholder.motif-palette .case-placeholder-viz i { border-radius:50%; transform:none; }
body.case-page .case-card-placeholder.motif-palette .case-placeholder-viz i:nth-child(1) { height:30px; }
body.case-page .case-card-placeholder.motif-palette .case-placeholder-viz i:nth-child(2) { height:30px; }
body.case-page .case-card-placeholder.motif-palette .case-placeholder-viz i:nth-child(3) { height:30px; }
body.case-page .case-card-placeholder.motif-palette .case-placeholder-viz i:nth-child(4) { height:30px; }
body.case-page .case-card-placeholder.motif-palette .case-placeholder-viz i:nth-child(5) { height:30px; }
body.case-page .case-card-placeholder.motif-chart { background:linear-gradient(155deg,#141b2d,#141a1c 67%); }
body.case-page .case-card-placeholder.motif-chart .case-placeholder-viz i { clip-path:polygon(0 78%,25% 58%,43% 66%,64% 20%,80% 36%,100% 0,100% 100%,0 100%); border:0; background:linear-gradient(180deg,rgba(141,168,255,.95),rgba(141,168,255,.08)); transform:none; }
body.case-page .case-card-placeholder.motif-ledger { background:linear-gradient(140deg,#151d1b,#141a1c); }
body.case-page .case-card-placeholder.motif-ledger .case-placeholder-viz { grid-template-columns:repeat(3,1fr); gap:10px; }
body.case-page .case-card-placeholder.motif-ledger .case-placeholder-viz i { height:34px; background:repeating-linear-gradient(0deg,transparent 0 7px,rgba(201,239,114,.55) 8px 9px); }
body.case-page .case-card-placeholder.motif-ledger .case-placeholder-viz i:nth-child(n+4) { display:none; }
body.case-page .case-card-placeholder.motif-brief { background:linear-gradient(145deg,#1c1717,#141a1c); }
body.case-page .case-card-placeholder.motif-brief .case-placeholder-viz i { height:2px; border:0; transform:none; background:#ff8d84; box-shadow:0 10px 0 rgba(255,141,132,.5),0 20px 0 rgba(255,141,132,.25); }
body.case-page .case-card-placeholder.motif-brief .case-placeholder-viz i:nth-child(2) { height:2px; }
body.case-page .case-card-placeholder.motif-brief .case-placeholder-viz i:nth-child(3) { height:2px; }
body.case-page .case-card-placeholder.motif-brief .case-placeholder-viz i:nth-child(n+4) { display:none; }
body.case-page .case-card-placeholder.motif-route { background:linear-gradient(135deg,#161b27,#141a1c); }
body.case-page .case-card-placeholder.motif-route .case-placeholder-viz i { height:11px; border-radius:50%; transform:none; background:var(--case-blue); box-shadow:24px -18px 0 rgba(141,168,255,.72),48px 8px 0 rgba(201,239,114,.75); }
body.case-page .case-card-placeholder.motif-route .case-placeholder-viz i:nth-child(n+4) { display:none; }
body.case-page .case-card-placeholder.motif-flow { background:linear-gradient(135deg,#181719,#141a1c); }
body.case-page .case-card-placeholder.motif-flow .case-placeholder-viz i { height:33px; border:1px solid rgba(255,141,132,.45); background:transparent; transform:none; }
body.case-page .case-card-placeholder.motif-flow .case-placeholder-viz i:nth-child(2n) { margin-top:17px; height:16px; }
body.case-page .case-card-placeholder.motif-signal { background:linear-gradient(155deg,#141b2d,#141a1c 76%); }
body.case-page .case-card-placeholder.motif-signal .case-placeholder-viz { display:block; height:54px; border-bottom:1px solid rgba(141,168,255,.35); background:repeating-linear-gradient(0deg,transparent 0 16px,rgba(141,168,255,.1) 17px 18px); }
body.case-page .case-card-placeholder.motif-signal .case-placeholder-viz::after { position:absolute; inset:2px 0 0; content:""; background:linear-gradient(145deg,transparent 0 14%,#8da8ff 14% 15%,transparent 15% 32%,#8da8ff 32% 33%,transparent 33% 47%,#c9ef72 47% 48%,transparent 48% 68%,#8da8ff 68% 69%,transparent 69%); clip-path:polygon(0 72%,16% 54%,31% 64%,47% 30%,63% 43%,79% 20%,100% 4%,100% 100%,0 100%); opacity:.9; }
body.case-page .case-card-placeholder.motif-signal .case-placeholder-viz i { display:none; }
body.case-page .case-card-placeholder.motif-grid { background:linear-gradient(145deg,#171b1d,#141a1c); }
body.case-page .case-card-placeholder.motif-grid .case-placeholder-viz { grid-template-columns:repeat(6,1fr); align-items:stretch; height:54px; gap:4px; }
body.case-page .case-card-placeholder.motif-grid .case-placeholder-viz i { height:auto; border-color:rgba(241,238,231,.18); transform:none; background:repeating-linear-gradient(0deg,transparent 0 10px,rgba(141,168,255,.24) 11px 12px); }
body.case-page .case-card-placeholder.motif-grid .case-placeholder-viz i:nth-child(2n) { background:repeating-linear-gradient(0deg,transparent 0 10px,rgba(201,239,114,.25) 11px 12px); }
body.case-page .case-card-placeholder.motif-grid .case-placeholder-viz::before { bottom:0; border-top-color:rgba(241,238,231,.18); }

body.case-page .case-artifact-generated { border-radius:0; border-color:rgba(241,238,231,.16); background:radial-gradient(circle at 84% 4%,rgba(255,90,79,.14),transparent 46%),#12191b; }
body.case-page .artifact-viz-head b { border-color:#ff8d84; color:#ff8d84; }
body.case-page .artifact-viz-grid { margin-top:18px; }
body.case-page .artifact-viz-palette, body.case-page .artifact-viz-signal, body.case-page .artifact-viz-ledger, body.case-page .artifact-viz-brief, body.case-page .artifact-viz-route { position:relative; height:48px; margin:15px 0 9px; }
body.case-page .artifact-viz-palette { display:flex; align-items:center; gap:7px; }
body.case-page .artifact-viz-palette i { width:26px; height:26px; border:1px solid rgba(241,238,231,.28); border-radius:50%; background:#ff5a4f; }
body.case-page .artifact-viz-palette i:nth-child(2) { background:#8da8ff; }
body.case-page .artifact-viz-palette i:nth-child(3) { background:#c9ef72; }
body.case-page .artifact-viz-palette i:nth-child(4) { background:#f1eee7; }
body.case-page .artifact-viz-palette span { position:absolute; right:0; bottom:0; color:#7f8780; font:7px var(--case-mono); }
body.case-page .artifact-viz-signal { display:flex; align-items:end; gap:5px; border-bottom:1px solid rgba(241,238,231,.2); }
body.case-page .artifact-viz-signal i { display:block; flex:1; height:35%; background:linear-gradient(180deg,#8da8ff,rgba(141,168,255,.1)); clip-path:polygon(0 70%,30% 49%,48% 62%,68% 18%,100% 0,100% 100%,0 100%); }
body.case-page .artifact-viz-signal i:nth-child(2) { height:57%; }
body.case-page .artifact-viz-signal i:nth-child(3) { height:42%; }
body.case-page .artifact-viz-signal i:nth-child(4) { height:79%; }
body.case-page .artifact-viz-signal i:nth-child(5) { height:91%; }
body.case-page .artifact-viz-signal b { position:absolute; top:11px; right:7px; width:5px; height:5px; border-radius:50%; background:#c9ef72; box-shadow:0 0 0 4px rgba(201,239,114,.12); }
body.case-page .artifact-viz-ledger { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
body.case-page .artifact-viz-ledger i { padding:5px 4px; border:1px solid rgba(201,239,114,.36); color:#c9ef72; font:7px var(--case-mono); font-style:normal; }
body.case-page .artifact-viz-ledger span { display:block; height:2px; background:rgba(241,238,231,.35); box-shadow:0 7px 0 rgba(241,238,231,.17),0 14px 0 rgba(241,238,231,.1); }
body.case-page .artifact-viz-brief { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
body.case-page .artifact-viz-brief b { display:block; height:30px; border:1px solid rgba(255,141,132,.4); background:linear-gradient(180deg,rgba(255,90,79,.3),transparent); }
body.case-page .artifact-viz-brief span { height:2px; background:rgba(241,238,231,.3); box-shadow:0 7px 0 rgba(241,238,231,.15); }
body.case-page .artifact-viz-route { display:flex; align-items:center; justify-content:space-between; }
body.case-page .artifact-viz-route i { display:grid; width:24px; height:24px; place-items:center; border:1px solid #8da8ff; border-radius:50%; color:#8da8ff; font:7px var(--case-mono); font-style:normal; }
body.case-page .artifact-viz-route b { flex:1; height:1px; margin:0 4px; background:rgba(141,168,255,.55); }