/* Shared theme values from cwiens.com. */
:root {
  color-scheme: light;
  --bg: #daeaf6;
  --panel: rgba(255,255,255,0.72);
  --panel-strong: rgba(255,255,255,0.94);
  --panel-border: rgba(20,28,42,0.12);
  --accent-primary: #4F63D8;
  --text: #12161f;
  --text-soft: #303744;
  --text-muted: #596272;
  --contact-border: rgba(20,28,42,0.13);
  --contact-button-base: rgba(233,237,244,0.88);
  --contact-button-base-hover: rgba(241,245,250,0.96);
  font-family: 'Inter', Arial, Helvetica, sans-serif;
}
body {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  background: linear-gradient(180deg, #ffffff 0%, #e6f2fe 100%);
  color: var(--text);
}
button { border-color:var(--contact-border); background-color:var(--contact-button-base); color:var(--text-soft); }
button:hover { background-color:var(--contact-button-base-hover); }
.showcase-nav { display:flex; flex-wrap:wrap; gap:4px 24px; margin:0 0 24px; }
.showcase-nav a { display:inline-flex; align-items:center; min-height:44px; color:var(--text-muted); font-size:14px; font-weight:500; line-height:1.4; text-decoration:none; }
.showcase-nav a:hover { color:var(--text); text-decoration:underline; text-underline-offset:5px; }
.showcase-nav a[aria-current="page"] { color:var(--text); text-decoration:underline; text-underline-offset:5px; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1c2e;
  --panel: rgba(255,255,255,0.032);
  --panel-strong: rgba(255,255,255,0.046);
  --panel-border: rgba(255,255,255,0.09);
  --accent-primary: #8EA2FF;
  --text: #ffffff;
  --text-soft: #f1f2f6;
  --text-muted: #b7bcc8;
  --contact-border: rgba(255,255,255,0.13);
  --contact-button-base: rgba(18,23,33,0.9);
  --contact-button-base-hover: rgba(27,34,47,0.96);
  background: var(--bg);
}
html[data-theme="dark"] body {
  background: radial-gradient(circle at top left, rgba(94,114,228,0.07), transparent 32%), radial-gradient(circle at top right, rgba(255,255,255,0.04), transparent 28%), var(--bg);
}
html[data-theme="dark"] select { background-color:var(--panel-strong); color:var(--text); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23b7bcc8' stroke-width='1.5'/%3E%3C/svg%3E"); }
html[data-theme="dark"] select option { background:#0f1c2e; color:#fff; }
html[data-theme="dark"] button { background-image:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0)); box-shadow:inset 0 1px 0 rgba(255,255,255,0.08); }
html[data-theme="dark"] button:hover { border-color:rgba(255,255,255,0.15); background-image:linear-gradient(180deg,rgba(255,255,255,0.08),rgba(255,255,255,0.01)); }
html[data-theme="dark"] .diagram-arrows path { stroke:var(--text-muted); }
.showcase-back { display:inline-flex; align-items:center; min-height:44px; margin-bottom:8px; color:var(--text-muted); font-size:13px; text-decoration:none; }
.showcase-back:is(:not([data-gsap-rollover]):hover, .is-rollover) { color:var(--text); text-decoration:underline; text-underline-offset:4px; }

/* One persistent navigation row across the case study. */
.showcase-toolbar { position:sticky; top:12px; z-index:20; display:flex; align-items:center; flex-wrap:wrap; gap:8px 24px; margin:0 0 28px; padding:10px 12px; border:1px solid var(--panel-border); border-radius:16px; background:color-mix(in srgb,var(--bg) 80%,transparent); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.showcase-toolbar .showcase-nav { margin:0; gap:4px 24px; }
.showcase-toolbar .showcase-back { flex-shrink:0; justify-content:center; min-height:48px; margin:0; padding:0 18px; border:1px solid var(--contact-border); border-radius:12px; background-color:var(--contact-button-base); background-image:linear-gradient(180deg,rgba(255,255,255,0.64),rgba(255,255,255,0.18)); color:var(--text-soft); font-size:0.98rem; line-height:1.2; text-decoration:none; box-shadow:inset 0 1px 0 rgba(255,255,255,0.62); }
.showcase-toolbar .showcase-back:is(:not([data-gsap-rollover]):hover, .is-rollover) { background-color:var(--contact-button-base-hover); color:var(--text); text-decoration:none; }
html[data-theme="dark"] .showcase-toolbar .showcase-back { background-color:color-mix(in srgb,#b4d0e7 24%,var(--panel-strong)); background-image:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0)); box-shadow:inset 0 1px 0 rgba(255,255,255,0.08); }
@media(max-width:600px) {
  .showcase-toolbar { top:8px; gap:4px 16px; padding:8px; }
  .showcase-toolbar .showcase-nav { gap:0 16px; }
  .showcase-toolbar .showcase-nav a { font-size:13px; }
}

/* Same background rollover as the portfolio's AI process buttons. */
:root { --action-hover-bg:color-mix(in srgb,var(--bg) 72%,#000 28%); }
html[data-theme="light"] { --action-hover-bg:color-mix(in srgb,var(--bg) 78%,#051626 22%); }
.showcase-toolbar .showcase-back:is(:not([data-gsap-rollover]):hover, .is-rollover),
.showcase-toolbar .showcase-back:not([data-gsap-rollover]):focus-visible,
html[data-theme="dark"] .showcase-toolbar .showcase-back:is(:not([data-gsap-rollover]):hover, .is-rollover),
html[data-theme="dark"] .showcase-toolbar .showcase-back:not([data-gsap-rollover]):focus-visible {
  background-color:var(--action-hover-bg);
  border-color:transparent;
  color:var(--text);
}