/* Cloud Dive — shared foundation */
:root {
  color-scheme: light;
  --canvas: #fff8e8;
  --canvas-dot: rgba(17, 17, 17, .10);
  --surface: #fffdf7;
  --surface-raised: #ffffff;
  --surface-soft: #f4eddf;
  --surface-strong: #ebe1d0;
  --ink: #141318;
  --text: #24222a;
  --muted: #665f6b;
  --border: #17161b;
  --border-soft: #d3c8b8;
  --shadow-color: #17161b;
  --focus: #111111;

  --brand: #6f80ff;
  --brand-soft: #dce2ff;
  --yellow: #ffd23f;
  --pink: #ff82cc;
  --green: #67df8a;
  --cyan: #62dcf6;
  --coral: #ff7868;
  --purple: #b28cff;
  --azure: #1687ff;
  --aws: #ff9a1f;
  --concept: #a97cf7;
  --neutral-action-bg: #fffdf7;
  --neutral-action-ink: #141318;

  --radius-sm: 8px;
  --shadow-sm: 4px 4px 0 var(--shadow-color);
  --shadow: 7px 7px 0 var(--shadow-color);
  --shadow-lg: 10px 10px 0 var(--shadow-color);
  --max: 1320px;
  --page-x: clamp(1rem, 3vw, 2rem);
  --header-h: 70px;
  --section-space: clamp(4rem, 8vw, 7rem);
  --ease: cubic-bezier(.2, .8, .2, 1);

  --z-search-mobile: 42;
  --z-mobile-coach: 70;
  --z-menu-backdrop: 80;
  --z-header: 90;
  --z-mobile-menu: 110;
  --z-reading-progress: 120;
  --z-search-results: 125;
  --z-toast: 150;
  --z-tooltip: 240;
  --z-skip-link: 999;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #101116;
  --canvas-dot: rgba(255, 255, 255, .075);
  --surface: #191b23;
  --surface-raised: #222530;
  --surface-soft: #2a2d39;
  --surface-strong: #343847;
  --ink: #f8f3e9;
  --text: #f2eef5;
  --muted: #c1bdc8;
  --border: #f0e9dc;
  --border-soft: #4a4d5d;
  --shadow-color: #050506;
  --focus: #fffaf0;

  --brand: #8190ff;
  --brand-soft: #30385e;
  --yellow: #ffd84f;
  --pink: #ff91d6;
  --green: #79e79a;
  --cyan: #74e4fb;
  --coral: #ff8c7f;
  --purple: #c29dff;
  --azure: #58aaff;
  --aws: #ffad3e;
  --concept: #c09cff;
  --neutral-action-bg: #252833;
  --neutral-action-ink: #f8f3e9;
}

body[data-provider="azure"] { --provider: var(--azure); }
body[data-provider="aws"] { --provider: var(--aws); }
body[data-provider="cloud-concepts"] { --provider: var(--concept); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 32px); overflow-x: clip; scrollbar-gutter: stable; }
body {
  margin: 0;
  min-width: 0;
  background:
    radial-gradient(circle at 1px 1px, var(--canvas-dot) 1px, transparent 1.2px) 0 0 / 24px 24px,
    var(--canvas);
  color: var(--text);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 4%, transparent), transparent 30%, color-mix(in srgb, var(--pink) 3%, transparent));
}

.hidden { display: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, h5, p { margin: 0; }
h1, h2, h3, h4, h5 { color: var(--ink); font-family: ui-rounded, "Arial Rounded MT Bold", "Segoe UI", Arial, sans-serif; line-height: 1.08; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.section-title, .project-title-row h1, .library-project-card h3, .related-grid h3{ text-wrap: balance; overflow-wrap: anywhere; word-break: normal; }
.project-lede, .section-copy, .library-project-card > p, .content-section p, .content-section li { overflow-wrap: break-word; word-break: normal; }
.project-lede, .section-copy, .content-section p, .hero-provider-message, .cd-about-lede, .cd-about-intro-copy p { text-wrap: pretty; }
ul, ol { margin: 0; padding-left: 1.3rem; }
kbd, code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
::selection { background: var(--yellow); color: #111; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
@media  (forced-colors: active) { :focus-visible { outline-color: Highlight; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: var(--z-skip-link); padding: 10px 14px; background: var(--yellow); color: #111; border: 2px solid #111; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); font-weight: 900; }
.skip-link:focus { top: 14px; }
.wrap { width: min(calc(100% - (2 * var(--page-x))), var(--max)); margin-inline: auto; }
.page-main { min-height: 70vh; }

.section { padding-block: var(--section-space); }
.standalone-section { padding-top: clamp(3rem, 7vw, 5.5rem); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(1.25rem, 4vw, 4rem); margin-bottom: 26px; }
.section-title { font-size: clamp(2.7rem, 6vw, 5.5rem); font-weight: 900; letter-spacing: -.065em; line-height: 1.01; }
.section-title + .section-copy { margin-top: 14px; }
.section-title-sm { font-size: clamp(2rem, 4vw, 3.4rem); }
.section-copy { max-width: 680px; color: var(--muted); font-size: .96rem; line-height: 1.7; }
.kicker, .eyebrow {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin-bottom: 12px;
  padding: 7px 10px;
  background: var(--yellow);
  color: #111;
  border: 2px solid #111;
  border-radius: 999px;
  box-shadow: 2px 2px 0 #111;
  font: 900 .70rem/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.btn {
  --btn-bg: var(--neutral-action-bg);
  --btn-ink: var(--neutral-action-ink);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 15px;
  background: var(--btn-bg);
  color: var(--btn-ink);
  border: 2px solid var(--border);
  border-radius: 9px;
  box-shadow: 4px 4px 0 var(--shadow-color);
  font: 850 .78rem/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing: -.01em;
  transition: transform .14s var(--ease), box-shadow .14s var(--ease), filter .14s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shadow-color); }
.btn-primary { --btn-bg: var(--brand); --btn-ink: #111; }
.btn-yellow { --btn-bg: var(--yellow); --btn-ink: #111; }
.btn-pink { --btn-bg: var(--pink); --btn-ink: #111; }
.btn-outline { --btn-bg: var(--surface); --btn-ink: var(--ink); }
.btn-arrow { font-size: 1.05em; }

.hero { padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(4rem, 8vw, 7rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(450px, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.hero-copy-block { min-width: 0; }
.display { color: var(--ink); font-size: clamp(4rem, 8vw, 7.9rem); font-weight: 900; letter-spacing: -.078em; line-height: .9; }
.display-line { display: block; min-height: .9em; }
.hero .display { color: #111; }
html[data-theme="dark"] .hero .display { color: #fff; }
.hero-provider-switch { position: relative; width: 2.48em; display: inline-flex; align-items: center; justify-content: center; margin: 0 .02em 0 .03em; padding: .015em .12em .04em; background: var(--concept); color: #111; border: 4px solid #111; border-radius: 12px; box-shadow: 8px 8px 0 #111; font: inherit; letter-spacing: inherit; line-height: .86; transform: rotate(-.35deg); cursor: pointer; transition: transform .14s var(--ease), box-shadow .14s var(--ease), background-color .16s ease, color .16s ease; vertical-align: .015em; white-space: nowrap; }
html[data-theme="dark"] .hero-provider-switch { color: #fff; background: #6f52c8; }
html[data-theme="dark"] .hero-provider-switch[data-provider="azure"] { background: #0b67c2; }
html[data-theme="dark"] .hero-provider-switch[data-provider="aws"] { background: #a95500; }
.hero-provider-switch::after { content: "CLICK"; position: absolute; z-index: 3; top: -15px; right: 5px; padding: 4px 6px; background: var(--yellow); color: #111; border: 2px solid #111; border-radius: 6px; box-shadow: 2px 2px 0 #111; font: 900 .52rem/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing: .04em; transform: rotate(5deg); pointer-events: none; }
.hero-provider-switch:active { transform: rotate(0deg) translate(2px,2px); box-shadow: 3px 3px 0 #111; }
.hero-provider-switch[data-provider="azure"] { background: var(--azure); }
.hero-provider-switch[data-provider="aws"] { background: var(--aws); }
.hero-switch-hint { width: fit-content; margin-top: 18px; color: var(--muted); font-size: .59rem; letter-spacing: .025em; }
.hero-switch-hint strong { color: var(--ink); }
.hero-provider-message { min-height: 2.9em; max-width: 680px; margin-top: 15px; padding-left: 12px; border-left: 4px solid var(--concept); color: var(--ink); font-size: .86rem; font-weight: 800; line-height: 1.45; }
.hero[data-provider="azure"] .hero-provider-message { border-color: var(--azure); }
.hero[data-provider="aws"] .hero-provider-message { border-color: var(--aws); }
.hero-desc { min-height: 5.1em; max-width: 700px; margin-top: 24px; color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-visual { position: relative; min-width: 0; perspective: 1100px; }
.hero-sticker { position: absolute; z-index: 5; padding: 7px 9px; border: 2px solid #111; border-radius: 8px; box-shadow: 3px 3px 0 #111; color: #111; font: 900 .6rem/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.sticker-one { top: -18px; right: 20px; background: var(--green); transform: rotate(-4deg); }
.sticker-three { bottom: -16px; left: 18px; background: var(--yellow); transform: rotate(-4deg); }
.architecture-lab { overflow: hidden; background: var(--surface-raised); border: 3px solid var(--border); border-radius: 17px; box-shadow: 10px 10px 0 var(--shadow-color); transition: transform .18s var(--ease); transform-style: preserve-3d; }
.architecture-lab-head { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 14px; background: color-mix(in srgb, var(--brand) 15%, var(--surface)); border-bottom: 2px solid var(--border); }
.architecture-lab-head > div { display: grid; gap: 4px; }
.architecture-lab-head strong { color: var(--ink); font-size: .9rem; }
.architecture-live, .architecture-context { color: var(--muted); font: 850 .56rem/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; text-transform: uppercase; }
.architecture-live { display: inline-flex; align-items: center; gap: 7px; }
.architecture-live i { width: 8px; height: 8px; background: var(--green); border: 1px solid #111; border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 22%, transparent); }
.architecture-context { padding: 6px 8px; background: var(--surface-raised); border: 1.5px solid var(--border); border-radius: 999px; color: var(--ink); }
.architecture-focus { display: flex; gap: 6px; padding: 9px 10px; background: var(--surface-soft); border-bottom: 2px solid var(--border); }
.architecture-focus button { min-height: 33px; padding: 0 9px; background: transparent; color: var(--muted); border: 1.5px solid var(--border-soft); border-radius: 7px; font: 850 .56rem/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.architecture-focus button.is-active { background: var(--yellow); color: #111; border-color: #111; box-shadow: 2px 2px 0 #111; }
.architecture-lab-body { display: grid; grid-template-columns: minmax(165px, .72fr) minmax(0, 1.28fr); min-height: 360px; }
.architecture-flow { display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 16px; background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--border) 16%, transparent) 1px, transparent 1.1px) 0 0/18px 18px, color-mix(in srgb, var(--brand) 4%, var(--surface)); border-right: 2px solid var(--border); }
.hero-arch-node { position: relative; min-height: 58px; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; padding: 9px 10px; text-align: left; background: var(--surface-raised); color: var(--ink); border: 2px solid var(--border); border-radius: 9px; box-shadow: 3px 3px 0 var(--shadow-color); transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .16s ease; }
.hero-arch-node.is-selected { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--shadow-color); background: color-mix(in srgb, var(--cyan) 19%, var(--surface-raised)); }
.hero-arch-node.is-failed { background: color-mix(in srgb, var(--coral) 45%, var(--surface-raised)); animation: node-shake .35s linear 2; }
.node-status { grid-row: 1 / 3; width: 11px; height: 11px; background: var(--green); border: 1.5px solid #111; border-radius: 50%; }
.hero-arch-node strong { min-width: 0; font-size: .72rem; line-height: 1.25; }
.hero-arch-node small { color: var(--muted); font: 700 .49rem/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; text-transform: uppercase; }
.hero-arch-arrow { color: var(--brand); font-size: 1.05rem; font-weight: 900; text-align: center; line-height: 1; }
.architecture-inspector { padding: 18px; }
.inspector-head { display: grid; gap: 5px; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft); }
.inspector-head span, .inspector-grid dt { color: var(--muted); font: 850 .52rem/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; text-transform: uppercase; }
.inspector-head strong { font-size: 1rem; }
.inspector-grid { display: grid; gap: 11px; margin: 14px 0 0; }
.inspector-grid > div { display: grid; gap: 4px; }
.inspector-grid dd { margin: 0; color: var(--text); font-size: .7rem; line-height: 1.48; }
.architecture-lab-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; background: var(--surface-soft); border-top: 2px solid var(--border); }
.architecture-lab-foot p { color: var(--muted); font-size: .67rem; line-height: 1.45; }
.architecture-lab-foot p strong { color: var(--coral); font: 900 .58rem/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.challenge-impact-copy { display: block; margin-top: 5px; color: var(--ink); font-size: .92em; font-weight: 800; }
.challenge-next { display: block; margin-top: 4px; color: var(--muted); font-size: .92em; }
.lab-stress-btn { flex: 0 0 auto; min-height: 38px; padding: 0 11px; background: var(--coral); color: #111; border: 2px solid #111; border-radius: 8px; box-shadow: 3px 3px 0 #111; font: 900 .58rem/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.lab-stress-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #111; }
@keyframes node-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

.path-migration { background: #6fc3ff; }
.path-resilience { background: #ff8e78; }
.path-foundation { background: #82e89a; }
.path-security { background: #be9cff; }

.compact-section-head { align-items: center; }
.home-recent-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.home-recent-card { min-height: 190px; display: flex; flex-direction: column; padding: 17px; background: var(--surface-raised); border: 2px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); }
.home-recent-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font: 750 .58rem/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; text-transform: uppercase; }
.home-recent-card h3 { margin-top: 20px; font-size: 1.05rem; }
.home-recent-open { margin-top: auto; padding-top: 15px; font: 850 .65rem/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }

[data-path="migration"] { --path-accent: #6fc3ff; --path-ink: #111; }
[data-path="resilience"] { --path-accent: #ff8e78; --path-ink: #111; }
[data-path="foundation"] { --path-accent: #82e89a; --path-ink: #111; }
[data-path="security"] { --path-accent: #be9cff; --path-ink: #111; }

.project-path-banner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:0;
  padding:13px 14px;
  background:color-mix(in srgb,var(--green) 32%,var(--surface));
  border:2px solid var(--border);
  border-radius:10px;
  box-shadow:3px 3px 0 var(--shadow-color);
}
.project-path-banner[hidden] { display:none; }
.project-path-banner > div { display:grid; gap:3px; min-width:0; }
.project-path-banner .mono {
  color:var(--muted);
  font:900 .68rem/1.15 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.project-path-banner strong { color:var(--ink); font-size:1rem; line-height:1.22; }
.project-path-banner p { color:var(--muted); font-size:.75rem; line-height:1.48; }
.project-path-banner button { flex:0 0 auto; }
.project-path-banner[data-path] { background: color-mix(in srgb, var(--path-accent) 58%, var(--surface)); border-color: var(--border); }
.project-path-banner[data-path] .mono, .project-path-banner[data-path] strong { color: var(--ink); }
.journey-memberships[data-path] > span { background: var(--path-accent); color: var(--path-ink); border-color: #111; }
.journey-memberships[data-path] .journey-inline-link { display: inline-flex; align-items: center; min-height: 36px; padding: 5px 9px; background: color-mix(in srgb, var(--path-accent) 28%, var(--surface-raised)); color: var(--ink); border: 1.5px solid color-mix(in srgb, var(--path-accent) 68%, var(--border)); border-radius: 7px; }
.journey-path-block[data-path] { border-left: 6px solid var(--path-accent); background: color-mix(in srgb, var(--path-accent) 12%, var(--surface-raised)); }
.journey-path-block[data-path] .journey-kicker { color: color-mix(in srgb, var(--path-accent) 62%, var(--ink)); }

.project-quick-dialog { width:min(680px,calc(100% - 28px)); max-height:calc(100vh - 28px); max-height:calc(100dvh - 28px); padding:0; overflow:visible; background:transparent; border:0; }.project-quick-dialog::backdrop { background:rgba(8,9,12,.64); backdrop-filter:blur(4px); }.quick-dialog-card { position:relative; padding:clamp(22px,4vw,34px); background:var(--surface-raised); color:var(--text); border:3px solid var(--border); border-radius:16px; box-shadow:10px 10px 0 var(--shadow-color); }.quick-dialog-close { position:absolute; top:9px; right:9px; width:44px; height:44px; background:var(--coral); color:#111; border:2px solid #111; border-radius:8px; box-shadow:2px 2px 0 #111; font-weight:900; }.quick-kicker { color:var(--muted); font:850 .6rem/1.3 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; text-transform:uppercase; }.quick-dialog-card h2 { margin-top:14px; padding-right:40px; font-size:clamp(2rem,6vw,3.4rem); letter-spacing:-.045em; }.quick-dialog-card p { margin-top:14px; color:var(--muted); }.quick-snapshot { display:grid; gap:8px; margin:18px 0 0; }
.quick-services { display:flex; flex-wrap:wrap; gap:6px; margin-top:18px; }.quick-services span { padding:6px 8px; background:var(--surface-soft); border:1.5px solid var(--border); border-radius:7px; font:800 .56rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; }.quick-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }

[data-reading-progress] { position: fixed; inset: 0 0 auto 0; z-index: var(--z-reading-progress); width: 100%; height: 4px; appearance: none; border: 0; background: transparent; }
[data-reading-progress]::-webkit-progress-bar { background: transparent; }
[data-reading-progress]::-webkit-progress-value { background: var(--provider, var(--brand)); }
[data-reading-progress]::-moz-progress-bar { background: var(--provider, var(--brand)); }
.project-hero { position: relative; padding: clamp(2.8rem, 6vw, 5.5rem) 0 2rem; }
.project-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, color-mix(in srgb, var(--provider, var(--brand)) 12%, transparent), transparent 45%); border-bottom: 2px solid var(--border-soft); }
.mobile-project-back { display: none; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; color: var(--muted); font: 750 .69rem/1.15 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.project-title-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 56px); align-items: end; }
.project-title-row > div:first-child { max-width: 960px; }
.project-title-row .eyebrow { background: var(--provider, var(--brand)); color: #111; }
.project-title-row h1 { font-size: clamp(3.2rem, 7vw, 6.7rem); font-weight: 900; letter-spacing: -.072em; line-height: .98; text-wrap: balance; }
.project-lede { max-width: 870px; margin-top: 20px; color: var(--muted); font-size: clamp(.98rem, 1.35vw, 1.12rem); line-height: 1.72; }
.project-action-stack { display: grid; gap: 10px; min-width: 158px; }
.project-action-stack .btn { width: 100%; }
.project-action-stack [data-save-project] { --btn-bg: var(--provider, var(--brand)); --btn-ink: #111; border-color: #111; box-shadow: 5px 5px 0 #111; }
.project-action-stack [data-copy-link] { --btn-bg: var(--surface-raised); --btn-ink: var(--ink); }
.glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
.glance-item { min-width: 0; padding: 14px 15px; background: var(--surface-raised); border: 2px solid var(--border); border-radius: 10px; }
.glance-item small, .decision-snapshot-item small { display: block; margin-bottom: 6px; color: var(--muted); font: 800 .70rem/1.05 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; text-transform: uppercase; letter-spacing: .04em; }
.glance-item strong { display: block; overflow-wrap: break-word; word-break: normal; color: var(--ink); font-size: .82rem; line-height: 1.35; }
.decision-snapshot { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.decision-snapshot-item { min-width: 0; padding: 14px 15px; background: color-mix(in srgb, var(--provider, var(--brand)) 10%, var(--surface)); border: 2px solid var(--border-soft); border-radius: 10px; }
.decision-snapshot-item strong { color: var(--ink); font-size: .78rem; line-height: 1.45; }
.journey-memberships { display: flex; align-items: center; gap: 9px; margin-top: 13px; color: var(--muted); font: 750 .68rem/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.journey-memberships > span { padding: 4px 6px; background: var(--surface-soft); border: 1px solid var(--border-soft); border-radius: 5px; text-transform: uppercase; }
.journey-inline-link { color: var(--ink); font-weight: 850; }
.project-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(22px, 3vw, 42px); padding: 28px 0 clamp(4rem, 8vw, 7rem); align-items: start; }
.toc { position: sticky; top: 100px; max-height: calc(100vh - 118px); max-height: calc(100dvh - 118px); overflow: auto; padding: 11px; background: var(--surface); border: 2px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); scrollbar-width: thin; }
.toc summary { cursor: pointer; min-height:44px; display:flex; align-items:center; padding: 8px 9px 10px; color: var(--ink); font: 900 .66rem/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; text-transform: uppercase; list-style: none; }
.toc summary::-webkit-details-marker { display: none; }
.toc nav { display: grid; gap: 2px; }
.toc-group { display: grid; gap: 2px; padding: 5px 0 7px; border-top: 1px solid var(--border-soft); }
.toc-group:first-child { padding-top: 0; border-top: 0; }
.toc-group-label { padding: 7px 8px 4px; color: var(--muted); font: 900 .70rem/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-transform: uppercase; letter-spacing: .08em; }
.toc a { position: relative; display: block; padding: 7px 8px 7px 13px; border-radius: 6px; color: var(--muted); font-size: .7rem; font-weight: 750; line-height: 1.25; }
.toc a::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: transparent; }
.toc a[aria-current="location"] { color: var(--ink); background: color-mix(in srgb, var(--provider, var(--brand)) 12%, var(--surface)); outline: 1px solid color-mix(in srgb, var(--provider, var(--brand)) 38%, transparent); box-shadow: inset 4px 0 0 var(--provider, var(--brand)); font-weight: 900; }
.toc a[aria-current="location"]::before { background: var(--provider, var(--brand)); }
.project-content { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.content-section { grid-column: 1 / -1; min-width: 0; padding: clamp(20px, 3vw, 30px); background: var(--surface); border: 1.5px solid var(--border-soft); border-radius: 14px; }
.content-section[id="networking"], .content-section[id="security"], .content-section[id="availability"], .content-section[id="disaster-recovery"] { grid-column: span 1; min-height: 225px; border-width: 2px; }
.content-section[id="networking"] { background: color-mix(in srgb, var(--cyan) 16%, var(--surface)); }
.content-section[id="security"] { background: color-mix(in srgb, var(--green) 15%, var(--surface)); }
.content-section[id="availability"] { background: color-mix(in srgb, var(--yellow) 14%, var(--surface)); }
.content-section[id="disaster-recovery"] { background: color-mix(in srgb, var(--coral) 13%, var(--surface)); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.section-heading h2 { display: flex; align-items: center; gap: 10px; font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 900; letter-spacing: -.035em; }
.section-heading h2::before { content: ""; width: 8px; height: 24px; flex: 0 0 auto; background: var(--provider, var(--brand)); border: 1.5px solid var(--border); border-radius: 4px; }
.content-section p, .content-section li { color: var(--text); font-size: .91rem; line-height: 1.75; }
.content-section p + p, .content-section ul, .content-section ol { margin-top: 12px; }
.content-section h3 { margin: 22px 0 8px; font-size: 1rem; font-weight: 900; }
.content-section a:not(.project-card):not(.btn):not(.journey-inline-link) { color: color-mix(in srgb, var(--provider, var(--brand)) 80%, var(--ink)); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.content-section code { padding: 2px 5px; background: var(--surface-soft); border: 1px solid var(--border-soft); border-radius: 5px; color: var(--ink); font-size: .83em; overflow-wrap: anywhere; }
.service-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.service-tags span { padding: 6px 8px; background: color-mix(in srgb, var(--provider, var(--brand)) 11%, var(--surface-raised)); border: 1.5px solid var(--border-soft); border-radius: 7px; color: var(--ink); font: 750 .64rem/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
#architecture { padding: clamp(22px, 3vw, 34px); background: var(--surface-raised); border: 3px solid var(--border); box-shadow: var(--shadow); }
#architecture .section-heading h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.diagram-scroll { margin-top: 20px; padding: clamp(16px, 3vw, 28px); overflow: auto; background: color-mix(in srgb, var(--provider, var(--brand)) 7%, var(--surface)); border: 2px solid var(--border); border-radius: 13px; }
.architecture-svg { width: 100%; min-width: 720px; min-height: 210px; }
.architecture-svg .node { fill: var(--surface-raised); stroke: var(--border); stroke-width: 2.5; }
.architecture-svg text { fill: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 13px; font-weight: 800; dominant-baseline: central; }
.architecture-svg .edge { stroke: var(--provider, var(--brand)); stroke-width: 3; }
.architecture-svg .arrow { fill: var(--provider, var(--brand)); }
.mobile-flow { display: none; }
.decision-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.decision-card { padding: 18px; background: var(--surface-raised); border: 2px solid var(--border); border-radius: 10px; box-shadow: 3px 3px 0 var(--shadow-color); }
.decision-card-label { display: block; margin-bottom: 7px; color: var(--provider, var(--brand)); font: 900 .70rem/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; text-transform: uppercase; letter-spacing: .06em; }
.decision-card-why { margin-top: 14px; margin-bottom: 5px; color: var(--muted); }
.decision-card-tradeoff { margin-top: 14px; margin-bottom: 5px; color: color-mix(in srgb, var(--coral) 72%, var(--ink)); }
.decision-card h3 { margin: 0 0 7px; font-size: 1rem; }
.decision-card p { color: var(--muted); font-size: .82rem; }
.architecture-basis-marker { margin-bottom: 14px; padding: 13px 15px; background: color-mix(in srgb, var(--provider, var(--brand)) 10%, var(--surface-raised)); border-left: 4px solid var(--provider, var(--brand)); border-radius: 7px; color: var(--muted); font-size: .78rem; }
.callout { margin: 14px 0; padding: 13px 15px; background: var(--surface-raised); border: 1.5px solid var(--border-soft); border-left: 5px solid var(--brand); border-radius: 9px; }
.callout p { margin: 0; color: var(--text); font-size: .80rem; line-height: 1.6; }
.callout-label { display: block; margin-bottom: 7px; color: var(--ink); font: 900 .54rem/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-transform: uppercase; letter-spacing: .08em; }
.callout-architect { border-left-color: var(--provider, var(--brand)); background: color-mix(in srgb, var(--provider, var(--brand)) 9%, var(--surface-raised)); }
.callout-important { border-left-color: var(--coral); background: color-mix(in srgb, var(--coral) 9%, var(--surface-raised)); }
.section-callout { margin-top: 0; }
.architecture-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 16px; color: var(--muted); font: 800 .58rem/1.3 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.architecture-legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend-line { width: 24px; height: 0; border-top: 3px solid var(--provider, var(--brand)); }
.legend-outbound { border-top-style: dashed; }
.legend-boundary { width: 24px; height: 13px; border: 2px dashed var(--border); border-radius: 4px; }
.architecture-svg-detailed { min-width: 900px; min-height: 420px; }
.arch-region-boundary { fill: color-mix(in srgb, var(--provider, var(--brand)) 3%, transparent); stroke: var(--border-soft); stroke-width: 2; stroke-dasharray: 8 7; }
.arch-vnet-boundary { fill: color-mix(in srgb, var(--cyan) 7%, transparent); stroke: var(--provider, var(--brand)); stroke-width: 2.5; stroke-dasharray: 10 7; }
.arch-subnet-boundary { fill: color-mix(in srgb, var(--surface-raised) 76%, transparent); stroke: var(--border-soft); stroke-width: 1.5; stroke-dasharray: 6 5; }
.architecture-svg .arch-boundary-label, .architecture-svg .arch-small-label, .architecture-svg .edge-label { fill: var(--muted); font-size: 13px; font-weight: 800; }
.architecture-svg .arch-node-sub { fill: var(--muted); font-size: 12px; }
.architecture-svg .node-provider { fill: color-mix(in srgb, var(--provider, var(--brand)) 14%, var(--surface-raised)); }
.architecture-svg .node-soft { fill: var(--surface-soft); }
.architecture-svg .edge-outbound { stroke-dasharray: 8 5; }
.architecture-svg .edge-dashed { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 6 5; }
.architecture-svg .arrow-outbound { fill: var(--provider, var(--brand)); }
.mobile-flow-phase { margin-top: 6px; padding: 6px 9px; color: var(--muted); font: 900 .56rem/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-transform: uppercase; letter-spacing: .06em; text-align: center; }
.mobile-full-architecture { display: none; margin-top: 13px; }
.mobile-section-toggle { display: none; }
.checks { display: grid; gap: 8px; padding: 0; list-style: none; }
.checks li { position: relative; padding-left: 28px; }
.checks li::before { content: "✓"; position: absolute; left: 0; top: .05em; width: 20px; height: 20px; display: grid; place-items: center; background: var(--green); color: #111; border: 1.5px solid #111; border-radius: 5px; font: 900 .65rem/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.journey-path-list { display: grid; gap: 12px; }
.journey-path-block { padding: 18px; background: color-mix(in srgb, var(--provider, var(--brand)) 9%, var(--surface-raised)); border: 2px solid var(--border); border-radius: 11px; }
.journey-progress-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; }
.journey-kicker { color: var(--muted); font: 800 .58rem/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; text-transform: uppercase; }
.journey-progress-head h3 { margin-top: 5px; font-size: 1.15rem; }
.journey-progress-head > a { min-height:36px; display:inline-flex; align-items:center; font: 850 .69rem/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.project-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 14px; }
.project-pager a { display: grid; gap: 5px; padding: 13px; background: var(--surface); border: 1.5px solid var(--border-soft); border-radius: 8px; }
.project-pager small { color: var(--muted); font: 750 .55rem/1.3 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.project-pager strong { color: var(--ink); font-size: .72rem; line-height: 1.4; }
.pager-next { text-align: right; }
.related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.related-grid .project-card { position: relative; min-height: 220px; display: flex; flex-direction: column; padding: 16px 16px 15px 20px; overflow: hidden; background: var(--surface-raised); border: 2px solid var(--border); border-radius: 11px; box-shadow: 4px 4px 0 var(--shadow-color); transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.related-grid .project-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: var(--concept); }
.related-grid .project-card[data-provider="azure"]::before { background: var(--azure); }
.related-grid .project-card[data-provider="aws"]::before { background: var(--aws); }
.related-grid .card-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.related-provider-badge { background: var(--concept); color: #111; border-color: #111; }
.project-card[data-provider="azure"] .related-provider-badge { background: var(--azure); }
.project-card[data-provider="aws"] .related-provider-badge { background: var(--aws); }
.related-grid h3 { margin-top: 12px; font-size: 1.1rem; }
.related-grid .summary { margin-top: 9px; color: var(--muted); font-size: .72rem; line-height: 1.55; }
.related-grid .card-footer { display: flex; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-soft); font: 800 .58rem/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }

.guide-architecture-tools { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:18px; padding:11px 12px; background:var(--surface-soft); border:2px solid var(--border); border-radius:9px; }
.guide-architecture-tools > div:first-child { display:grid; gap:3px; }.guide-architecture-tools .mono { color:var(--muted); font-size:.70rem; }.guide-architecture-tools p { color:var(--muted); font-size:.74rem; }.guide-lens-buttons { display:flex; flex-wrap:wrap; gap:5px; }.guide-lens-buttons button { min-height:38px; padding:0 10px; background:var(--surface-raised); color:var(--ink); border:1.5px solid var(--border); border-radius:6px; font:800 .70rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; }.guide-lens-buttons button.is-active { background:var(--yellow); color:#111; border-color:#111; box-shadow:2px 2px 0 #111; }
.architecture-node-group { cursor:pointer; transform-box:fill-box; transform-origin:center; transition:opacity .16s ease,transform .16s var(--ease); outline:none; }.architecture-node-group:focus-visible,
.architecture-node-group.is-selected { transform:translateY(-3px); }.architecture-node-group.is-selected .node,.architecture-node-group.is-selected .node-soft { stroke:var(--provider,var(--brand)); stroke-width:4; }.architecture-node-group.lens-dim { opacity:.2; }.architecture-node-group.lens-highlight { opacity:1; }.architecture-node-group.lens-highlight .node,.architecture-node-group.lens-highlight .node-soft { fill:color-mix(in srgb,var(--provider,var(--brand)) 24%,var(--surface-raised)); stroke:var(--provider,var(--brand)); stroke-width:3; }
.mobile-flow-node.is-interactive { cursor:pointer; }.mobile-flow-node.is-interactive:focus-visible { background:color-mix(in srgb,var(--provider,var(--brand)) 18%,var(--surface-raised)); }
.guide-node-inspector { margin-top:14px; padding:15px; background:color-mix(in srgb,var(--cyan) 9%,var(--surface-raised)); border:2px solid var(--border); border-radius:10px; box-shadow:3px 3px 0 var(--shadow-color); }.guide-inspector-head { display:grid; gap:4px; padding-bottom:10px; border-bottom:1px solid var(--border-soft); }.guide-inspector-head .mono { color:var(--muted); font-size:.75rem; }.guide-inspector-head strong { color:var(--ink); font-size:1rem; }.guide-node-inspector dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:12px 0 0; }.guide-node-inspector dl > div { padding:9px; background:var(--surface); border:1px solid var(--border-soft); border-radius:7px; }.guide-node-inspector dt { color:var(--muted); font:850 .75rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; text-transform:uppercase; }.guide-node-inspector dd { margin:5px 0 0; color:var(--text); font-size:.875rem; line-height:1.5; }
.guide-playground-cta { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:16px; padding:15px; background:color-mix(in srgb,var(--yellow) 25%,var(--surface)); border:2px solid var(--border); border-radius:10px; }.guide-playground-cta > div { display:grid; gap:4px; }.guide-playground-cta .mono { color:var(--muted); font-size:.75rem; }.guide-playground-cta strong { color:var(--ink); }.guide-playground-cta p { color:var(--muted); font-size:.875rem; line-height:1.5; }

html[data-theme="dark"] .library-project-card h3,
html[data-theme="dark"] .project-card-open,
html[data-theme="dark"] .content-section h2,
html[data-theme="dark"] .content-section h3,
html[data-theme="dark"] .decision-snapshot-item strong,
html[data-theme="dark"] .glance-item strong,
html[data-theme="dark"] .resume-job h4,
html[data-theme="dark"] .resume-employer-head h4,
html[data-theme="dark"] .resume-role-head h5,
html[data-theme="dark"] .resume-cert h4,
html[data-theme="dark"] .resume-skill h4 { color: var(--ink); }
html[data-theme="dark"] .pg-panel,
html[data-theme="dark"] .content-section,
html[data-theme="dark"] .toc,
html[data-theme="dark"] .resume-section { color: var(--text); }

.playground-heading { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:20px; flex-wrap:wrap; gap:12px; }.playground-kicker{background:#72beff;color:#111;border-color:#111}.hardware-status{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--surface);border:2px solid var(--border);border-radius:8px;box-shadow:3px 3px 0 var(--shadow-color);font:850 .6rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace}.led{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 20%,transparent)}.led.analyzing{background:var(--yellow);box-shadow:0 0 0 4px color-mix(in srgb,var(--yellow) 22%,transparent)}
.scenario-board { padding:15px; background:var(--surface); border:2px solid var(--border); border-radius:13px; box-shadow:var(--shadow-sm); }.scenario-board-head { display:flex; justify-content:space-between; gap:20px; align-items:end; padding-bottom:12px; border-bottom:1px solid var(--border-soft); }.scenario-board-head > div { display:grid; gap:3px; }.scenario-board-head .mono,.scenario-note { color:var(--muted); font-size:.55rem; }.scenario-board-head h2 { font-size:1.25rem; }.scenario-note { font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; font-weight:800; }

@media (min-width:768px) { .guide-architecture-tools.lens-mobile-only { display:none; } }
.scenario-strip { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-top:12px; }.scenario-group { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; padding:7px; background:var(--surface-soft); border:1.5px solid var(--border-soft); border-radius:8px; }.scenario-group > span { grid-column:1/-1; color:var(--muted); font:850 .75rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; text-transform:uppercase; }.scenario-group button { min-height:44px; padding:0 6px; background:var(--surface-raised); color:var(--muted); border:1.5px solid var(--border); border-radius:6px; font:800 .74rem/1.15 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; }.scenario-group button.is-active { background:var(--yellow); color:#111; border-color:#111; box-shadow:2px 2px 0 #111; }
.playground-presets { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:12px; }.playground-presets > span { margin-right:4px; color:var(--muted); font-size:.75rem; }.playground-presets button { min-height:44px; padding:0 10px; background:var(--surface-raised); color:var(--ink); border:2px solid var(--border); border-radius:7px; box-shadow:2px 2px 0 var(--shadow-color); font:800 .8125rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; }
.challenge-banner { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-top:14px; padding:13px 15px; background:color-mix(in srgb,var(--coral) 32%,var(--surface)); border:2px solid var(--border); border-radius:10px; box-shadow:var(--shadow-sm); }.challenge-banner > div { display:grid; gap:3px; }.challenge-banner .mono { color:var(--muted); font-size:.52rem; }.challenge-banner strong { color:var(--ink); }.challenge-banner p { color:var(--muted); font-size:.72rem; }.challenge-banner button { min-height:44px; padding:0 8px; background:var(--surface-raised); border:1.5px solid var(--border); border-radius:7px; font:800 .52rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; }
.playground-grid { display:grid; grid-template-columns:250px minmax(0,1fr) 310px; gap:14px; margin-top:18px; align-items:start; }.pg-panel{min-width:0;background:var(--surface);border:2px solid var(--border);border-radius:12px;box-shadow:var(--shadow-sm);overflow:hidden}.pg-panel-head{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;background:var(--surface-soft);border-bottom:2px solid var(--border);font:850 .75rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;text-transform:uppercase}.pg-panel-head>div{display:flex;gap:6px}.pg-head-action{min-height:44px;padding-inline:10px;box-shadow:2px 2px 0 var(--shadow-color);font-size:.75rem}.provider-toggle-group{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px}.p-tog-btn{min-width:0;min-height:44px;padding:0 5px;box-shadow:none}.p-tog-btn.active{background:var(--yellow);color:#111;border-color:#111}.palette-body{display:grid;gap:7px;padding:0 10px 10px}.tool-btn{width:100%;min-height:44px;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:7px;text-align:left;box-shadow:none}.tool-btn.is-added{background:color-mix(in srgb,var(--green) 18%,var(--surface-raised))}.tool-btn b{font-size:.8rem}.tool-code,.node-code{display:grid;place-items:center;min-width:34px;height:28px;padding:0 5px;background:var(--surface-soft);color:#111;border:1.5px solid #111;border-radius:5px;font:900 .75rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.accent-blue .tool-code,.accent-blue.node-code,.accent-blue .node-code{background:#72beff}.accent-coral .tool-code,.accent-coral.node-code,.accent-coral .node-code{background:#ff8e78}.accent-orange .tool-code,.accent-orange.node-code,.accent-orange .node-code{background:#ffb04d}.accent-cyan .tool-code,.accent-cyan.node-code,.accent-cyan .node-code{background:#62dcf6}.accent-green .tool-code,.accent-green.node-code,.accent-green .node-code{background:#82e89a}.accent-purple .tool-code,.accent-purple.node-code,.accent-purple .node-code{background:#be9cff}.accent-pink .tool-code,.accent-pink.node-code,.accent-pink .node-code{background:#ff82cc}.accent-yellow .tool-code,.accent-yellow.node-code,.accent-yellow .node-code{background:#ffd23f}
.canvas-layers{display:grid;gap:10px;min-height:500px;padding:12px;background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--border) 12%,transparent) 1px,transparent 1.1px) 0 0/18px 18px,color-mix(in srgb,var(--brand) 4%,var(--surface-raised))}.tier-zone{position:relative;min-height:104px;padding:32px 10px 10px;background:color-mix(in srgb,var(--surface) 92%,transparent);border:2px dashed var(--border-soft);border-radius:10px}.tier-zone.has-items{border-style:solid;border-color:color-mix(in srgb,var(--brand) 48%,var(--border-soft))}.tier-label{position:absolute;top:8px;left:9px;color:var(--muted);font:800 .53rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;text-transform:uppercase}.zone-nodes{display:flex;align-items:center;flex-wrap:wrap;gap:7px}.canvas-connector{color:var(--brand);font-weight:900}.canvas-node{position:relative;min-width:120px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:7px;padding:7px 8px;background:var(--surface-raised);border:2px solid var(--border);border-radius:8px;box-shadow:2px 2px 0 var(--shadow-color);text-align:left;cursor:pointer}.canvas-node.is-selected{transform:translate(-1px,-2px);box-shadow:4px 4px 0 var(--shadow-color)}.canvas-node.is-selected{outline:2px solid var(--brand);outline-offset:2px}.canvas-node strong{font-size:.65rem;line-height:1.25}.node-del{display:grid;place-items:center;width:44px;height:44px;margin:-9px -8px -9px 0;background:transparent;color:var(--muted);border:0;border-radius:8px;font-size:.9rem}.canvas-inspector{padding:12px;background:color-mix(in srgb,var(--cyan) 8%,var(--surface));border-top:2px solid var(--border)}.canvas-inspector>.mono{color:var(--muted);font-size:.75rem}.canvas-inspector>p{margin-top:5px;color:var(--muted);font-size:.875rem;line-height:1.5}.canvas-inspector-head{display:flex;align-items:center;gap:9px}.canvas-inspector-head>div{display:grid;gap:3px}.canvas-inspector-head .mono{color:var(--muted);font-size:.75rem}.canvas-inspector-head strong{font-size:.84rem}.canvas-inspector dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:10px 0 0}.canvas-inspector dl>div{padding:8px;background:var(--surface-raised);border:1px solid var(--border-soft);border-radius:6px}.canvas-inspector dt{color:var(--muted);font:850 .75rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;text-transform:uppercase}.canvas-inspector dd{margin:4px 0 0;font-size:.875rem;line-height:1.5}
.coach-health{display:grid;gap:7px;padding:11px;border-bottom:1px solid var(--border-soft)}.coverage-row{display:flex;justify-content:space-between;align-items:center;gap:8px;color:var(--muted);font-size:.65rem;font-weight:750}.coverage-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 7px;border:1.5px solid var(--border);border-radius:999px;color:var(--ink);font:800 .75rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.coverage-chip i{width:7px;height:7px;border-radius:50%;background:var(--surface-strong)}.coverage-chip.is-covered{background:color-mix(in srgb,var(--green) 30%,var(--surface-raised))}.coverage-chip.is-covered i{background:var(--green)}.coverage-chip.is-review{background:color-mix(in srgb,var(--yellow) 30%,var(--surface-raised))}.coverage-chip.is-review i{background:var(--yellow)}.coverage-chip.is-missing{background:color-mix(in srgb,var(--coral) 20%,var(--surface-raised))}.coverage-chip.is-missing i{background:var(--coral)}
.coach-feed{display:grid;gap:8px;padding:10px;max-height:640px;overflow:auto}.coach-alert,.coach-empty{padding:10px;background:var(--surface-raised);border:1.5px solid var(--border-soft);border-radius:8px;color:var(--muted);font-size:.875rem;line-height:1.5}.alert-tag{display:inline-flex;margin-bottom:7px;padding:4px 6px;background:var(--yellow);color:#111;border:1px solid #111;border-radius:5px;font:850 .75rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace}.alert-tag.good{background:var(--green)}.alert-tag.danger{background:var(--coral)}.alert-tag.challenge{background:var(--pink)}.quick-fix{display:flex;margin-top:9px;background:var(--yellow);color:#111;border-color:#111;box-shadow:2px 2px 0 #111}.coach-why{margin-top:9px;padding-top:8px;border-top:1px solid var(--border-soft)}.coach-why summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--ink);font:800 .8125rem/1.3 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.coach-why p{margin-top:7px;color:var(--muted);font-size:.875rem;line-height:1.5}.mobile-coach-button{display:none}

.not-found { min-height: 68vh; display: grid; place-items: center; padding: 40px var(--page-x); }
.not-found-card { max-width: 680px; padding: clamp(28px, 5vw, 55px); background: var(--surface); border: 3px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg); text-align: center; }
.not-found-card h1 { max-width: 13ch; margin-inline: auto; font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: -.06em; text-wrap: balance; }
.not-found-card > p:not(.eyebrow) { margin-top: 14px; color: var(--muted); }
.not-found-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

.reveal-item, .reveal-card { opacity: 0; transform: translateY(12px); }
.reveal-visible, .reveal-card.is-visible { opacity: 1; transform: none; transition: opacity .38s ease, transform .38s var(--ease); }

@media  (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 780px; }
  
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-layout { grid-template-columns: 185px minmax(0, 1fr); gap: 20px; }

  .playground-grid { grid-template-columns: 220px minmax(0, 1fr); }
  .playground-grid .pg-panel:last-child { grid-column: 1 / -1; }
  .scenario-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media  (max-width: 820px) {

  .section-head { align-items: flex-start; flex-direction: column; }
  .home-recent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-title-row { grid-template-columns: 1fr; align-items: start; }
  .project-action-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; width: min(100%, 360px); }
  .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .decision-snapshot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .decision-snapshot-item:first-child { grid-column: 1 / -1; }
  .project-layout { grid-template-columns: 1fr; }
  .toc { position: static; max-height: none; }
  .toc:not([open]) nav { display: none; }
  .project-content { grid-template-columns: 1fr; }
  .content-section, .content-section[id="networking"], .content-section[id="security"], .content-section[id="availability"], .content-section[id="disaster-recovery"] { grid-column: 1; }

}

@media  (max-width: 767px) {
  .kicker, .eyebrow { max-width: 100%; white-space: normal; overflow-wrap: normal; word-break: normal; line-height: 1.25; }
  :root { --page-x: 14px; --header-h: 58px; }
  html { scroll-padding-top: 82px; }
  body { font-size: 15px; }

  .section { padding-block: clamp(3.2rem, 13vw, 5rem); }
  .standalone-section { padding-top: 3rem; }
  .section-title { font-size: clamp(2.6rem, 13vw, 4.2rem); }
  .display { font-size: clamp(3.35rem, 15vw, 5.5rem); }
  .hero-provider-switch { width: 2.52em; border-width: 3px; box-shadow: 6px 6px 0 #111; }
  .hero-provider-message, .hero-desc { min-height: 0; }
  .hero { padding-top: 3.2rem; padding-bottom: 3.5rem; }
  .hero-grid { gap: 0; }
  .hero-visual { display: block; margin-top: 34px; }
  .architecture-lab { box-shadow: 7px 7px 0 var(--shadow-color); }
  .architecture-lab-body { grid-template-columns: 1fr; }
  .architecture-flow { border-right: 0; border-bottom: 2px solid var(--border); }
  .architecture-lab-foot { align-items: stretch; flex-direction: column; }
  .lab-stress-btn { width: 100%; }
  .sticker-one { right: 8px; }
  .sticker-three { left: 10px; bottom: -14px; }

  .home-recent-grid { grid-template-columns: 1fr; }
  .project-section-head-simple { align-items: flex-start; flex-direction: column; }
  .project-results { white-space: normal; }
  .project-grid { grid-template-columns: 1fr; }
  .library-project-card { min-height: 300px; }
  .project-quick-dialog[open] { inset: auto 0 0; }
  .project-card-foot { align-items: flex-start; flex-direction: column; }
  .project-card-actions { width: 100%; justify-content: space-between; }
  .project-quick-dialog { width: 100%; max-width: none; max-height: 88dvh; margin: auto 0 0; }
  .quick-dialog-card { max-height: 88dvh; overflow: auto; border-radius: 18px 18px 0 0; border-width: 3px 0 0; box-shadow: 0 -7px 0 var(--shadow-color); }
  .project-library-footer { align-items: stretch; flex-direction: column; }
  .project-load-more { width: 100%; }
  .project-hero { padding: 2rem 0 1.2rem; }
  .breadcrumb { display: none; }
  .mobile-project-back { display: inline-flex; min-height:44px; align-items:center; margin-bottom: 12px; color: var(--muted); font: 800 .68rem/1.15 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
  .project-title-row h1 { font-size: clamp(2.65rem, 12.4vw, 4.2rem); line-height: 1; }
  .project-lede { margin-top: 16px; font-size: .91rem; }
  .project-action-stack { width: 100%; }
  .glance { margin-top: 20px; }
  .glance-item { padding: 11px 12px; }
  .decision-snapshot { grid-template-columns: 1fr; }
  .decision-snapshot-item:first-child { grid-column: auto; }
  .journey-memberships { align-items: flex-start; flex-direction: column; }
  .journey-memberships[data-path] .journey-inline-link { min-height:44px; }
  .journey-progress-head > a { min-height:44px; }
  .project-layout { padding-top: 18px; }
  .toc { padding: 8px; box-shadow: 3px 3px 0 var(--shadow-color); }
  .toc summary { padding: 9px; }
  .toc nav { grid-template-columns: 1fr; gap: 3px; padding-top: 3px; }
  .toc-group { padding-bottom: 5px; }
  .toc-group-label { padding-left: 7px; }
  .toc a { min-height:40px; display:flex; align-items:center; padding: 8px 8px 8px 13px; font-size: .69rem; }
  .content-section { padding: 18px; }
  #architecture { padding: 18px; box-shadow: 5px 5px 0 var(--shadow-color); }
  .diagram-scroll { display: none; }
  #architecture.show-full-architecture .diagram-scroll { display: block; overflow-x: auto; }
  #architecture.show-full-architecture .architecture-svg { min-width: 720px; }
  .mobile-flow { display: grid; gap: 8px; margin-top: 18px; }
  .mobile-full-architecture { display: inline-flex; }
  .mobile-flow-node { min-height:44px; padding: 12px 13px; background: var(--surface-raised); border: 2px solid var(--border); border-radius: 9px; box-shadow: 3px 3px 0 var(--shadow-color); color: var(--ink); font: 850 .72rem/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; text-align: center; }
  .mobile-flow-arrow { color: var(--provider, var(--brand)); font-size: 1.4rem; font-weight: 900; text-align: center; }
  .guide-architecture-tools, .guide-playground-cta { align-items: flex-start; flex-direction: column; }
  .guide-lens-buttons { width:100%; }
  .guide-lens-buttons button { min-height:44px; font-size:.74rem; }
  .guide-node-inspector dl, .canvas-inspector dl { grid-template-columns: 1fr; }
  .decision-grid, .related-grid, .project-pager { grid-template-columns: 1fr; }
  .pager-next { text-align: left; }
  .mobile-collapsible .mobile-section-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; flex:0 0 44px; padding: 0; background: var(--surface-soft); border: 1.5px solid var(--border); border-radius: 7px; }
  .mobile-collapsible .mobile-section-toggle::before { content: "+"; font-size: 1rem; font-weight: 900; }
  .mobile-collapsible.is-open .mobile-section-toggle::before { content: "−"; }
  .mobile-collapsible:not(.is-open) .section-body { display: none; }
  #references a { min-height:44px; display:inline-flex; align-items:center; padding-block:6px; }

  .scenario-board-head { align-items: flex-start; flex-direction: column; }
  .scenario-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scenario-group:last-child { grid-column: 1 / -1; }
  .playground-grid { grid-template-columns: 1fr; }
  .playground-grid .pg-panel:last-child { grid-column: auto; }
  .pg-canvas .pg-panel-head { align-items:flex-start; flex-direction:column; }
  .pg-canvas .pg-panel-head > div { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pg-canvas .pg-head-action { width:100%; }
  .canvas-layers { min-height: 430px; }
  .mobile-coach-button { position: fixed; right: 14px; bottom: 14px; z-index: var(--z-mobile-coach); display: inline-flex; min-height: 44px; align-items: center; padding: 0 10px; background: var(--yellow); color: #111; border: 2px solid #111; border-radius: 9px; box-shadow: 4px 4px 0 #111; font: 900 .58rem/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

}

@media  (max-width: 440px) {
  .project-action-stack { grid-template-columns: 1fr; }
  .glance { grid-template-columns: 1fr 1fr; }
  .toc nav { grid-template-columns: 1fr; }
  .about-actions { display: grid; }
  .about-actions .btn { width: 100%; }
  .scenario-strip { grid-template-columns: 1fr; }
  .scenario-group:last-child { grid-column: auto; }
  .quick-actions { display: grid; }
  .quick-actions .btn { width: 100%; }
  .project-card-actions { align-items: stretch; flex-direction: column; }
  .project-quick-look { width: 100%; }
}

.home-recent-card { transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s ease; }

.hero-provider-switch[data-provider="generic"] { background: var(--concept); }
.hero[data-provider="generic"] .hero-provider-message { border-color: var(--concept); }

.app-tooltip { position: fixed; z-index: var(--z-tooltip); max-width: min(300px, calc(100vw - 20px)); padding: 7px 9px; background: #17181e; color: #fff; border: 2px solid #111; border-radius: 7px; box-shadow: 3px 3px 0 rgba(0,0,0,.28); font: 800 .58rem/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .13s ease, transform .13s var(--ease); }
.app-tooltip.is-visible { opacity: 1; transform: translateY(0); }
.app-tooltip[data-placement="bottom"] { transform: translateY(-4px); }
.app-tooltip.is-visible[data-placement="bottom"] { transform: translateY(0); }
html[data-theme="dark"] .app-tooltip { background: #f4efe6; color: #16171b; border-color: #f4efe6; box-shadow: 3px 3px 0 #050506; }

.hero { --hero-provider-color: var(--concept); }
.hero[data-provider="azure"] { --hero-provider-color: var(--azure); }
.hero[data-provider="aws"] { --hero-provider-color: var(--aws); }
.hero .architecture-lab-head { background: color-mix(in srgb, var(--hero-provider-color) 15%, var(--surface)); transition: background-color .20s ease; }
.hero .architecture-flow { background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--border) 16%, transparent) 1px, transparent 1.1px) 0 0/18px 18px, color-mix(in srgb, var(--hero-provider-color) 4%, var(--surface)); transition: background-color .20s ease; }
.hero .hero-arch-node.is-selected { background: color-mix(in srgb, var(--hero-provider-color) 18%, var(--surface-raised)); }
.hero-arch-node.is-path-active { border-color: color-mix(in srgb, var(--concept) 62%, var(--border)); }
.hero[data-provider="azure"] .hero-arch-node.is-path-active { border-color: color-mix(in srgb, var(--azure) 72%, var(--border)); }
.hero[data-provider="aws"] .hero-arch-node.is-path-active { border-color: color-mix(in srgb, var(--aws) 72%, var(--border)); }
.hero-arch-arrow { opacity: .34; transform: scale(.92); transition: color .18s ease, opacity .18s ease, transform .18s var(--ease); }
.hero-arch-arrow.is-path-active { opacity: 1; transform: scale(1); color: var(--concept); animation: path-trace .32s var(--ease) both; }
.hero[data-provider="azure"] .hero-arch-arrow.is-path-active { color: var(--azure); }
.hero[data-provider="aws"] .hero-arch-arrow.is-path-active { color: var(--aws); }
.hero-arch-node.is-impacted { background: color-mix(in srgb, var(--yellow) 38%, var(--surface-raised)); outline: 2px solid var(--yellow); outline-offset: 2px; animation: impact-pop .48s var(--ease) both; }
.hero-arch-node.is-failed::after { content: "!"; position: absolute; top: -9px; right: -9px; width: 24px; height: 24px; display: grid; place-items: center; background: var(--coral); color: #111; border: 2px solid #111; border-radius: 50%; box-shadow: 2px 2px 0 #111; font: 900 .68rem/1 ui-monospace, monospace; }
.architecture-lab:not(.is-tracking) { transition: transform .20s var(--ease), box-shadow .18s var(--ease); }
.architecture-lab.is-tracking { transition: none; }
@keyframes path-trace { from { opacity:.25; transform:scale(.78); } to { opacity:1; transform:scale(1); } }
@keyframes impact-pop { 0% { transform:scale(.97); } 55% { transform:scale(1.025); } 100% { transform:scale(1); } }

.project-grid.is-refreshing { opacity: .62; transform: translateY(3px); }
.project-grid { transition: opacity .16s ease, transform .16s var(--ease); }
.save-pop { animation: save-pop .40s var(--ease); }
@keyframes save-pop { 0%,100% { transform:translate(0,0) scale(1); } 45% { transform:translate(-1px,-2px) scale(1.05); box-shadow:5px 5px 0 var(--shadow-color); } }

.project-quick-dialog[open] .quick-dialog-card { animation: quick-dialog-in .22s var(--ease) both; }
.project-quick-dialog.is-closing .quick-dialog-card { animation: quick-dialog-out .15s ease both; }
@keyframes quick-dialog-in { from { opacity:0; transform:translateY(16px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes quick-dialog-out { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(10px) scale(.99); } }
.quick-dialog-card h2{font-size:clamp(1.8rem,5vw,2.8rem)}
.quick-snapshot{grid-template-columns:1fr;gap:8px}
.quick-fact{display:grid;grid-template-columns:minmax(92px,.3fr) minmax(0,1fr);gap:12px;align-items:start;padding:12px 14px;background:var(--surface-soft);border:1.5px solid var(--border-soft);border-radius:9px}
.quick-fact .mono{color:var(--muted);font-size:.72rem;text-transform:uppercase}
.quick-fact strong{color:var(--ink);font-size:.9rem;line-height:1.48}

.canvas-node-wrap { position: relative; display: inline-flex; align-items: center; gap: 3px; transition: opacity .18s ease, transform .18s var(--ease); }
.canvas-node { transition: transform .16s var(--ease), box-shadow .16s var(--ease), background-color .16s ease, outline-color .16s ease, opacity .16s ease; }
.canvas-node-wrap.is-entering { animation: node-enter .20s var(--ease) both; }
.canvas-node-wrap.is-removing { opacity: 0; transform: scale(.94) translateY(3px); }
.canvas-node-wrap.is-dragging { opacity: .48; transform: rotate(1deg) scale(1.025); }
.canvas-node-wrap.is-drop-target::before { content:""; position:absolute; left:-7px; top:2px; bottom:2px; width:4px; background:var(--yellow); border:1px solid #111; border-radius:4px; }
.node-del { min-width:44px; min-height:44px; opacity:.58; transition: opacity .14s ease, transform .14s var(--ease), background-color .14s ease; cursor:pointer; }
.node-del:focus-visible { opacity:1; }
.canvas-node-wrap.is-challenge-primary .canvas-node { background: color-mix(in srgb,var(--coral) 42%,var(--surface-raised)); outline:2px solid var(--coral); outline-offset:2px; animation: challenge-primary .46s ease both; }
.canvas-node-wrap.is-challenge-impact .canvas-node { background: color-mix(in srgb,var(--yellow) 30%,var(--surface-raised)); outline:2px solid var(--yellow); outline-offset:2px; animation: challenge-impact .42s var(--ease) both; animation-delay:var(--impact-delay,90ms); }
.canvas-connector { opacity:.55; transition: opacity .16s ease, color .16s ease, transform .16s var(--ease); }
.tier-zone:has(.canvas-node.is-selected) .canvas-connector { opacity:1; color:var(--concept); }
@keyframes node-enter { from { opacity:0; transform:scale(.96) translateY(4px); } to { opacity:1; transform:none; } }
@keyframes challenge-primary { 0%,100%{transform:none} 30%{transform:translateX(-3px)} 60%{transform:translateX(3px)} }
@keyframes challenge-impact { from{opacity:.55;transform:scale(.97)} to{opacity:1;transform:none} }

.coach-alert.is-entering, .coach-empty.is-entering { animation: coach-enter .22s var(--ease) both; animation-delay:var(--coach-delay,0ms); }
.coach-alert.is-resolving { background:color-mix(in srgb,var(--green) 24%,var(--surface-raised)); border-color:color-mix(in srgb,var(--green) 68%,var(--border)); animation: coach-resolve .22s var(--ease) both; }
.coach-why-body { display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .18s var(--ease), opacity .18s ease; }
.coach-why-body > p { overflow:hidden; }
.coach-why[open] .coach-why-body { grid-template-rows:1fr; opacity:1; }
@keyframes coach-enter { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
@keyframes coach-resolve { 50% { transform:translateY(-2px); box-shadow:4px 4px 0 var(--shadow-color); } }

.mobile-flow-node { transition: opacity .16s ease, transform .16s var(--ease), background-color .16s ease, border-color .16s ease; }
.mobile-flow-node.is-selected { transform:translateY(-2px); background:color-mix(in srgb,var(--provider,var(--concept)) 20%,var(--surface-raised)); border-color:var(--provider,var(--concept)); }
.mobile-flow-node.lens-dim { opacity:.34; }
.mobile-flow-node.lens-highlight { opacity:1; background:color-mix(in srgb,var(--provider,var(--concept)) 18%,var(--surface-raised)); border-color:var(--provider,var(--concept)); }
.section-arrival { animation: section-arrival .72s ease both; }
@keyframes section-arrival { 0% { background-color:color-mix(in srgb,var(--provider,var(--concept)) 15%,transparent); } 100% { background-color:transparent; } }
.guide-node-inspector { transition: border-color .18s ease, background-color .18s ease, transform .18s var(--ease); }

@media  (max-width: 700px) {
  .quick-snapshot { grid-template-columns: 1fr; }
  .project-quick-dialog[open] .quick-dialog-card { animation-name: quick-sheet-in; }
  .project-quick-dialog.is-closing .quick-dialog-card { animation-name: quick-sheet-out; }
  @keyframes quick-sheet-in { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
  @keyframes quick-sheet-out { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(18px); } }
}

@media  (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto; transition-duration: .001ms; animation-duration: .001ms; animation-iteration-count: 1; }
  .reveal-item, .reveal-card { opacity: 1; transform: none; }
}

[hidden] { display: none; }

@media  (max-width: 520px) {
  .hero-provider-switch::after { top: -12px; right: 2px; padding: 3px 5px; font-size: .46rem; }
}

@media  print {
  @page { margin: 14mm; }
  html { scroll-behavior: auto !important; }
  body { background:#fff !important; color:#111 !important; }
  body::before, .cd-header, .cd-footer, .toast, .reading-progress, .mobile-coach-button, .project-action-stack, .project-library-controls, .project-library-footer, .project-quick-dialog, .project-quick-look, .project-floating-zone, .project-toolbar, .project-active-row, .save-control, .copy-control, [data-full-architecture-toggle], .question-card-next, .question-game-progress, .question-easter-egg { display:none !important; }
  .wrap { width:100% !important; max-width:none !important; }
  .page-main, .not-found { min-height:0 !important; }
  .project-hero { padding:18px 0 14px !important; }
  .project-title-row { display:block !important; }
  .project-title-row h1 { font-size:34pt !important; color:#111 !important; }
  .project-lede, .content-section p, .content-section li { color:#222 !important; }
  .project-layout { display:block !important; padding:14px 0 0 !important; }
  .toc { display:none !important; }
  .project-content { display:block !important; }
  .content-section, #architecture, .decision-card, .glance-item, .decision-snapshot-item { break-inside:avoid; box-shadow:none !important; background:#fff !important; border-color:#999 !important; }
  .content-section { margin-bottom:10mm; }
  .diagram-scroll { overflow:visible !important; background:#fff !important; border-color:#bbb !important; }
  .architecture-svg { width:100% !important; min-width:0 !important; height:auto !important; }
  .mobile-flow { display:none !important; }
  .cd-about-hero, .cd-about-section, .resume-shell, .work-card, .cert-card, .cd-work-card, .cd-thinking-card { break-inside:avoid; box-shadow:none !important; transform:none !important; }
  .cd-profile-links, .cd-sticker-pack, .resume-download-3d, .resume-expand-btn { display:none !important; }
  .resume-page-intro { display:none !important; }
  #resumeExperience.mobile-collapsed > .work-card { display:block !important; }
  a { text-decoration:none !important; }
}

@media  (hover: hover) and (pointer: fine) {

.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--shadow-color); }
.hero-provider-switch:hover { transform: rotate(0deg) translate(-2px,-2px); box-shadow: 10px 10px 0 #111; }
.hero-arch-node:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--shadow-color); background: color-mix(in srgb, var(--cyan) 19%, var(--surface-raised)); }

.home-recent-card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.library-project-card:hover { transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translate(-3px,-4px); box-shadow:11px 11px 0 var(--shadow-color); }.project-quick-look:hover { background:var(--yellow); color:#111; border-color:#111; }
.breadcrumb a:hover { color: var(--ink); }
.toc a:hover { color: var(--ink); background: var(--surface-soft); }
.related-grid .project-card:hover { transform: translate(-2px, -3px); box-shadow: 7px 7px 0 var(--shadow-color); }.architecture-node-group:hover { transform:translateY(-3px); }.mobile-flow-node.is-interactive:hover { background:color-mix(in srgb,var(--provider,var(--brand)) 18%,var(--surface-raised)); }.playground-presets button:hover{transform:translateY(-1px);background:var(--cyan);color:#111;border-color:#111}.canvas-node:hover{transform:translate(-1px,-2px);box-shadow:4px 4px 0 var(--shadow-color)}
.hero .hero-arch-node:hover { background: color-mix(in srgb, var(--hero-provider-color) 18%, var(--surface-raised)); }
.quick-brief-flip:hover .quick-brief-face { border-color: var(--concept); }
.canvas-node-wrap:hover .node-del { opacity:1; }
.node-del:hover { transform:scale(1.08); background:color-mix(in srgb,var(--coral) 20%,transparent); }
}

html[data-theme="dark"] .project-path-banner .mono,
html[data-theme="dark"] .project-path-banner p { color:var(--text); }

.project-path-chooser{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}.project-path-chooser>.mono{font-size:.72rem;color:var(--muted)}.project-path-chooser>div{display:flex;gap:8px;flex-wrap:wrap}.project-path-chooser a{display:inline-flex;align-items:center;min-height:36px;padding:7px 10px;border:1.5px solid var(--border);border-radius:999px;background:var(--surface-raised);color:var(--ink);font-size:.78rem;font-weight:850;text-decoration:none;box-shadow:var(--shadow-sm)}.project-path-chooser a:hover,.project-path-chooser a:focus-visible{transform:translateY(-1px);border-color:var(--ink)}.project-path-chooser a[data-path-choice="migration"]{--path-choice:#6fc3ff}.project-path-chooser a[data-path-choice="resilience"]{--path-choice:#ff8e78}.project-path-chooser a[data-path-choice="foundation"]{--path-choice:#82e89a}.project-path-chooser a[data-path-choice="security"]{--path-choice:#be9cff}.project-path-chooser a::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--path-choice);border:1px solid var(--ink);margin-right:6px}@media(max-width:599px){.project-path-chooser{align-items:flex-start;gap:8px;margin-top:14px}.project-path-chooser>div{display:grid;grid-template-columns:1fr 1fr;width:100%}.project-path-chooser a{min-height:44px;font-size:.76rem;padding:8px 9px}}

.project-path-banner button,.resume-expand-btn,.p-tog-btn,.tool-btn,.quick-fix,.project-quick-look{
  min-height:44px;
  padding:0 12px;
  background:var(--surface-raised);
  color:var(--ink);
  border:2px solid var(--border);
  border-radius:9px;
  box-shadow:2px 2px 0 var(--shadow-color);
  font:850 .74rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  transition:transform .14s var(--ease),box-shadow .14s var(--ease),background-color .14s ease,border-color .14s ease,color .14s ease;
}

.projects-library-section{padding-bottom:clamp(5.4rem,10vw,8rem)}
.project-section-head-simple{max-width:940px}
.project-section-head-simple>div{max-width:900px}
.project-library-title{display:grid;gap:4px;max-width:13ch;margin-top:8px;font-size:clamp(3.5rem,4.5vw,4rem);line-height:.96;letter-spacing:-.055em}
.project-library-title span{display:block}
.project-section-head .section-copy{max-width:52rem;margin-top:12px;font-size:clamp(.95rem,1.15vw,1.08rem);line-height:1.7}
.project-library-shell{display:grid;gap:16px;padding-bottom:72px}
.project-toolbar{display:grid;gap:10px;padding:0;background:transparent;border:0;box-shadow:none}
.project-command-panel{max-width:none}

.project-search-panel{padding:0;background:transparent;border:0;box-shadow:none}
.project-search-box{
  min-height:58px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;
  gap:7px;
  padding:6px 7px;
  background:color-mix(in srgb,var(--surface-raised) 94%,transparent);
  border:2px solid var(--border);
  border-radius:16px;
  box-shadow:4px 4px 0 var(--shadow-color);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:border-color .15s ease,box-shadow .15s var(--ease),transform .15s var(--ease);
}
.project-search-box:focus-within{border-color:#111;box-shadow:6px 6px 0 #111;transform:translate(-1px,-1px)}
.project-search-glyph{
  width:38px;height:38px;display:grid;place-items:center;
  background:var(--cyan);color:#111;border:1.5px solid #111;border-radius:10px;
  box-shadow:2px 2px 0 #111;font-size:1rem;font-weight:950;
}
.project-search-box input{
  min-width:0;width:100%;min-height:44px;padding:0 2px;border:0;outline:0;background:transparent;
  color:var(--ink);font-size:clamp(.9rem,1.15vw,1.02rem);font-weight:760;
}
.project-search-box input::placeholder{color:color-mix(in srgb,var(--muted) 78%,transparent)}
.project-search-box input::-webkit-search-cancel-button,.project-search-box input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.project-search-box input::-ms-clear{display:none;width:0;height:0}
.project-search-clear{
  width:44px;height:44px;display:grid;place-items:center;padding:0;
  background:transparent;color:var(--muted);border:0;border-radius:10px;font-size:1.25rem;font-weight:900;
}
.project-search-clear:hover{background:var(--surface-soft);color:var(--ink)}
.project-search-box kbd{
  padding:5px 7px;background:var(--surface-soft);border:1.5px solid var(--border-soft);
  border-radius:6px;color:var(--muted);font-size:.62rem;box-shadow:1px 1px 0 var(--shadow-color);
}
.project-results-strip{display:block;min-width:0}
.project-results{
  display:inline-flex;align-items:center;min-height:32px;
  color:var(--muted);
  font:850 .72rem/1.35 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
}

.project-active-row{display:flex;align-items:center;gap:8px;padding:0 2px}
.project-active-row[hidden]{display:none}
.project-active-filters{display:flex;flex-wrap:wrap;gap:6px 8px;min-width:0}
.project-active-chip{
  min-height:44px;display:inline-flex;align-items:center;gap:5px;padding:0 8px 0 10px;
  background:color-mix(in srgb,var(--cyan) 16%,var(--surface-raised));color:var(--ink);
  border:1.5px solid var(--border);border-radius:999px;
  font:850 .7rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  box-shadow:1px 1px 0 var(--shadow-color);
}
.project-active-chip span{font-size:.9rem;line-height:1}

.project-floating-zone{
  position:fixed;left:0;right:0;bottom:max(10px,env(safe-area-inset-bottom));
  z-index:88;height:52px;pointer-events:none;
}
.project-floating-zone{transition:opacity .14s ease,transform .18s var(--ease)}
body.mobile-menu-open .project-floating-zone,body.quick-look-open .project-floating-zone,.project-floating-zone.is-footer-near{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px)}
.project-floating-dock{
  pointer-events:auto;position:absolute;left:50%;bottom:0;display:flex;align-items:stretch;
  transform:translateX(-50%);
  border:2px solid color-mix(in srgb,var(--border) 88%,transparent);
  border-radius:15px;
  background:color-mix(in srgb,var(--surface-raised) 92%,transparent);
  box-shadow:4px 4px 0 color-mix(in srgb,var(--shadow-color) 88%,transparent),0 9px 20px rgba(0,0,0,.08);
  backdrop-filter:blur(18px) saturate(1.08);
  -webkit-backdrop-filter:blur(18px) saturate(1.08);
  transition:background .18s ease,box-shadow .18s var(--ease),transform .28s var(--ease);
}
.project-floating-dock.is-filter-open,.project-floating-dock.is-sort-open{
  background:color-mix(in srgb,var(--surface-raised) 97%,transparent);
  box-shadow:5px 5px 0 var(--shadow-color),0 12px 26px rgba(0,0,0,.12);
}
.project-floating-dock.is-filter-open{transform:translateX(calc(-50% - 172px))}
.project-floating-main{display:flex;align-items:center;min-height:48px;padding:2px}
.project-floating-actions{display:flex;align-items:center;gap:4px}
.project-floating-btn{
  min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:6px 7px;background:var(--surface-raised);color:var(--ink);
  border:2px solid var(--border);border-radius:9px;box-shadow:2px 2px 0 var(--shadow-color);
  font:850 .7rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  white-space:nowrap;
  transition:transform .14s var(--ease),box-shadow .14s var(--ease),background-color .14s ease;
}
.project-floating-btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--shadow-color)}
.project-floating-btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--shadow-color)}
.project-floating-btn:disabled{cursor:not-allowed;opacity:.68;transform:none;box-shadow:1px 1px 0 var(--shadow-color)}
.project-floating-saved[aria-pressed="true"]{background:var(--green);color:#111}
.project-floating-filter-trigger{background:color-mix(in srgb,var(--purple) 82%,var(--surface-raised));color:#111}
.project-floating-sort-anchor{position:relative;display:flex;min-width:0}

.project-floating-filter-panel{
  position:absolute;left:calc(100% + 8px);bottom:0;width:max-content;height:52px;
  opacity:0;visibility:hidden;transform:translateX(-8px) scale(.985);transform-origin:left bottom;
  pointer-events:none;
  transition:opacity .14s ease,transform .17s var(--ease),visibility 0s linear .14s;
}
.project-floating-dock.is-filter-open .project-floating-filter-panel{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s;
}
.project-floating-filter-clip{
  width:max-content;height:52px;overflow:visible;
  border:2px solid color-mix(in srgb,var(--border) 88%,transparent);border-radius:14px;
  background:color-mix(in srgb,var(--surface-raised) 97%,transparent);
  box-shadow:4px 4px 0 var(--shadow-color),0 9px 20px rgba(0,0,0,.10);
  backdrop-filter:blur(18px) saturate(1.08);-webkit-backdrop-filter:blur(18px) saturate(1.08);
}
.project-floating-filter-fields{width:max-content;height:48px;display:flex;align-items:center;gap:4px;padding:2px 3px}
.project-floating-control{position:relative;flex:0 0 auto}
.project-floating-platform{width:132px}
.project-floating-topic{width:104px}
.project-floating-level{width:100px}
.project-floating-select{
  width:100%;height:44px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:5px;padding:3px 7px;
  background:var(--surface-raised);color:var(--ink);
  border:2px solid var(--border);border-radius:9px;box-shadow:2px 2px 0 var(--shadow-color);
  text-align:left;
  transition:transform .14s var(--ease),box-shadow .14s var(--ease);
}
.project-floating-topic .project-floating-select,.project-floating-level .project-floating-select{grid-template-columns:minmax(0,1fr) auto}
.project-floating-select:hover,.project-floating-select[aria-expanded="true"]{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--shadow-color)}
.project-floating-select:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--shadow-color)}
.project-floating-provider-dot{width:10px;height:10px;border:1.5px solid #111;border-radius:50%;background:var(--yellow)}
.project-floating-platform[data-value="azure"] .project-floating-provider-dot{background:var(--azure)}
.project-floating-platform[data-value="aws"] .project-floating-provider-dot{background:var(--aws)}
.project-floating-platform[data-value="cloud-concepts"] .project-floating-provider-dot{background:var(--concept)}
.project-floating-control-copy{min-width:0;display:grid;gap:2px}
.project-floating-control-copy small{
  color:var(--muted);font:850 .75rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  text-transform:uppercase;letter-spacing:.08em;
}
.project-floating-control-copy strong{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:900 .875rem/1.15 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
}
.project-floating-chev{color:var(--muted);font-size:.72rem;transition:transform .14s var(--ease)}
.project-floating-select[aria-expanded="true"] .project-floating-chev{transform:rotate(180deg)}
.project-floating-clear{
  position:relative;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;
  background:var(--surface-raised);color:var(--ink);border:2px solid var(--border);border-radius:9px;
  box-shadow:2px 2px 0 var(--shadow-color);font-size:0;
}
.project-floating-clear::before{
  content:"×";position:absolute;inset:0;display:grid;place-items:center;
  font:1000 1rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}
.project-floating-clear:hover{transform:translate(-1px,-1px);background:var(--surface-soft);box-shadow:3px 3px 0 var(--shadow-color)}
.project-floating-clear:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--shadow-color)}

.project-floating-option-menu{
  position:absolute;left:0;bottom:calc(100% + 7px);z-index:196;
  width:max(100%,176px);min-width:176px;max-width:min(230px,calc(100vw - 28px));max-height:260px;
  overflow-y:auto;overscroll-behavior:contain;padding:3px;
  background:color-mix(in srgb,var(--surface-raised) 98%,transparent);
  border:2px solid var(--border);border-radius:10px;
  box-shadow:4px 4px 0 var(--shadow-color),0 10px 22px rgba(0,0,0,.12);
  opacity:0;visibility:hidden;transform:translateY(4px) scale(.99);transform-origin:bottom center;pointer-events:none;
  transition:opacity .14s ease,transform .17s var(--ease),visibility 0s linear .14s;
}
.project-floating-option-menu.open{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.project-floating-platform .project-floating-option-menu{min-width:190px}
.project-floating-topic .project-floating-option-menu{left:50%;transform:translate(-50%,4px) scale(.99)}
.project-floating-topic .project-floating-option-menu.open{transform:translateX(-50%)}
.project-floating-level .project-floating-option-menu{left:auto;right:0;min-width:164px}
.project-floating-option{
  width:100%;min-height:44px;display:flex;align-items:center;gap:7px;padding:7px 8px;
  background:transparent;color:var(--ink);border:1.5px solid transparent;border-radius:8px;
  text-align:left;font:820 .64rem/1.2 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
}
.project-floating-option:hover,.project-floating-option:focus-visible{
  outline:none;background:color-mix(in srgb,var(--purple) 12%,var(--surface-raised));
  border-color:color-mix(in srgb,var(--border) 18%,transparent);
}
.project-floating-option[aria-selected="true"]{
  background:color-mix(in srgb,var(--purple) 25%,var(--surface-raised));
  border-color:color-mix(in srgb,var(--purple) 65%,var(--border));
  box-shadow:inset 3px 0 0 var(--purple);font-weight:950;
}
.project-floating-option[aria-selected="true"]::after{content:"✓";margin-left:auto;font-weight:1000}
.project-floating-option-swatch{width:10px;height:10px;flex:0 0 10px;border:1.5px solid #111;border-radius:50%;background:var(--yellow)}
.project-floating-option-swatch.azure{background:var(--azure)}
.project-floating-option-swatch.aws{background:var(--aws)}
.project-floating-option-swatch.cloud-concepts{background:var(--concept)}

.project-floating-sort-popover{
  position:absolute;left:50%;bottom:calc(100% + 9px);z-index:198;
  width:min(250px,calc(100vw - 24px));opacity:0;visibility:hidden;
  transform:translate(-50%,4px) scale(.99);transform-origin:bottom center;pointer-events:none;
  transition:opacity .14s ease,transform .17s var(--ease),visibility 0s linear .14s;
}
.project-floating-sort-popover.open{opacity:1;visibility:visible;transform:translateX(-50%);pointer-events:auto;transition-delay:0s}
.project-floating-sort-card{
  padding:3px;background:color-mix(in srgb,var(--surface-raised) 98%,transparent);
  border:2px solid var(--border);border-radius:10px;
  box-shadow:4px 4px 0 var(--shadow-color),0 10px 22px rgba(0,0,0,.12);
}
.project-floating-sort-list{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.project-floating-sort-option{
  position:relative;min-height:48px;display:flex;align-items:center;gap:6px;padding:7px 28px 7px 8px;
  background:var(--surface-raised);color:var(--ink);border:1.5px solid color-mix(in srgb,var(--border) 18%,transparent);
  border-radius:9px;box-shadow:1px 1px 0 color-mix(in srgb,var(--shadow-color) 45%,transparent);
  text-align:left;transition:transform .14s var(--ease),box-shadow .14s var(--ease),background-color .14s ease;
}
.project-floating-sort-option:hover,.project-floating-sort-option:focus-visible{outline:none;transform:translateY(-1px);box-shadow:2px 2px 0 var(--shadow-color)}
.project-floating-sort-option:active{transform:translateY(1px);box-shadow:none}
.project-floating-sort-option[aria-checked="true"]{
  background:color-mix(in srgb,var(--purple) 24%,var(--surface-raised));
  border-color:var(--border);box-shadow:2px 2px 0 var(--shadow-color);
}
.project-floating-sort-option::before{
  display:grid;place-items:center;width:24px;height:24px;flex:0 0 24px;
  border:1.5px solid var(--border);border-radius:8px;
  background:color-mix(in srgb,var(--yellow) 34%,var(--surface-raised));
  font:950 .62rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}
.project-floating-sort-option[data-sort="featured"]::before{content:"✦"}
.project-floating-sort-option[data-sort="az"]::before{content:"A"}
.project-floating-sort-option strong{font:900 .64rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.project-floating-sort-option[aria-checked="true"]::after{
  content:"✓";position:absolute;right:9px;top:50%;transform:translateY(-50%);font-weight:1000;
}

.project-static-fallback{padding:16px;background:var(--surface);border:2px dashed var(--border);border-radius:12px}
.projects-ready .project-static-fallback{display:none}
.project-data-failed .project-toolbar,.project-data-failed .project-floating-zone,.project-data-failed .project-library-footer,.project-data-failed .project-grid{display:none!important}
.project-static-fallback>p{display:grid;gap:4px;margin-bottom:12px}.project-static-fallback>p span{color:var(--muted);font-size:.78rem}
.project-static-fallback-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.project-static-fallback h3{margin-bottom:8px;font-size:1rem}.project-static-fallback-grid section>div{display:grid;gap:6px}.project-static-fallback a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px}
.library-project-card{--rx:0deg;--ry:0deg;position:relative;min-height:330px;display:flex;flex-direction:column;overflow:hidden;background:color-mix(in srgb,var(--surface-raised) 86%,transparent);border:3px solid var(--border);border-radius:15px;box-shadow:7px 7px 0 var(--shadow-color);backdrop-filter:blur(12px) saturate(1.08);-webkit-backdrop-filter:blur(12px) saturate(1.08);transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .18s var(--ease),box-shadow .18s var(--ease),background-color .18s ease,border-color .18s ease}
.library-project-card::before{content:"";position:absolute;width:150px;height:150px;right:-45px;top:-45px;background:var(--card-solid,var(--brand));clip-path:var(--shape-clip,circle(50%));transform:rotate(var(--shape-rotate,0));opacity:.92;pointer-events:none}
.library-project-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--card-solid,var(--brand)) 18%,transparent),transparent 34%);opacity:.86}
.project-card-link{position:relative;z-index:1;display:flex;flex:1;flex-direction:column;padding:20px 20px 10px}
.project-card-top{display:flex;align-items:center;gap:6px;justify-content:space-between;min-width:0}
.project-card-badge-stack{display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
.home-recent-meta,.journey-memberships>span,.project-provider-badge,.project-level-badge,.project-saved-badge,.project-card-open{white-space:nowrap}
.project-provider-badge,.project-level-badge,.related-provider-badge,.meta-pill{display:inline-flex;white-space:nowrap;align-items:center;min-height:25px;padding:0 8px;background:var(--surface-soft);color:var(--ink);border:1.5px solid var(--border);border-radius:999px;font:850 .64rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;text-transform:uppercase}
.library-project-card.azure .project-provider-badge{background:var(--azure);color:#111;border-color:#111}.library-project-card.aws .project-provider-badge{background:var(--aws);color:#111;border-color:#111}.library-project-card.cloud-concepts .project-provider-badge{background:var(--concept);color:#111;border-color:#111}
.project-card-link h3{width:100%;margin-top:24px;font-size:1.45rem;font-weight:900;letter-spacing:-.035em}
.project-card-link>p{margin-top:12px;color:var(--muted);font-size:.95rem;line-height:1.55}
.project-card-services{display:flex;flex-wrap:wrap;gap:5px;margin-top:16px}
.project-service-chip{padding:5px 6px;white-space:nowrap;background:var(--surface-soft);border:1px solid var(--border-soft);border-radius:6px;color:var(--muted);font:700 .75rem/1.2 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace}
.project-card-foot{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding:10px 20px 17px;color:var(--muted);border-top:1px solid var(--border-soft);font:800 .72rem/1.25 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;text-transform:uppercase}
.project-card-actions{display:flex;align-items:center;gap:7px}
.project-card-open{color:var(--ink)}
.project-quick-look{min-height:40px;padding-inline:10px;font-size:.78rem;box-shadow:none;text-transform:uppercase;background:var(--surface-raised);color:var(--muted)}
.project-card-open{min-height:40px;display:inline-flex;align-items:center;padding:0 10px;background:var(--yellow);color:#111;border:1.5px solid #111;border-radius:8px;box-shadow:2px 2px 0 #111;font-size:.78rem}
.project-saved-badge{display:inline-flex;align-items:center;min-height:25px;padding:0 8px;background:var(--green);color:#111;border:1.5px solid #111;border-radius:999px;font:850 .52rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace}
.library-project-card mark{padding:0 .08em;background:var(--yellow);color:#111;border-radius:3px}
.library-project-card.is-saved{outline:2px solid color-mix(in srgb,var(--green) 70%,var(--border));outline-offset:3px}
.project-empty{
  grid-column:1/-1;display:grid;gap:10px;justify-items:center;padding:30px;
  background:var(--surface);border:2px dashed var(--border);border-radius:12px;color:var(--muted);text-align:center;
}
.project-empty strong{color:var(--ink)}
.project-empty-action{
  min-height:44px;padding:0 12px;background:var(--yellow);color:#111;border:2px solid #111;border-radius:9px;
  box-shadow:2px 2px 0 #111;font:850 .7rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}
.project-library-footer{display:flex;align-items:center;justify-content:space-between;gap:18px}
.project-library-note{max-width:720px;color:var(--muted);font-size:.76rem}
.project-grid.is-refreshing{opacity:.72;transform:translateY(2px)}
.project-grid{transition:opacity .13s ease,transform .13s var(--ease)}
html[data-theme="dark"] .library-project-card{background:color-mix(in srgb,var(--surface-raised) 90%,transparent)}

@media (hover:hover) and (pointer:fine){
  .library-project-card:hover{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translate(-3px,-4px);box-shadow:11px 11px 0 var(--shadow-color)}
  .project-active-chip:hover{transform:translateY(-1px)}
  .project-quick-look:hover{background:var(--yellow);color:#111;border-color:#111}
}

@media (max-width:1100px){
  .project-floating-dock,.project-floating-dock.is-filter-open{transform:translateX(-50%)}
  .project-floating-filter-panel{
    left:50%;bottom:calc(100% + 8px);width:max-content;max-width:calc(100vw - 24px);
    transform:translate(-50%,5px) scale(.985);transform-origin:bottom center;
  }
  .project-floating-dock.is-filter-open .project-floating-filter-panel{transform:translateX(-50%)}
  .project-floating-platform{width:130px}
  .project-floating-topic{width:102px}
  .project-floating-level{width:98px}
  .project-library-shell{padding-bottom:86px;transition:padding-bottom .18s var(--ease)}
  .project-filter-open .project-library-shell{padding-bottom:136px}
  .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .project-card-link h3{font-size:1.32rem}
}

@media (max-width:767px){
  .projects-library-section{padding-top:2.55rem}
  .project-library-title{grid-auto-flow:row;grid-template-columns:1fr;gap:2px;max-width:10ch}
  .project-toolbar{gap:8px}
  .project-search-box{min-height:58px;padding:6px 7px}
  .project-search-box kbd{display:none}
  .project-active-row{align-items:flex-start}
  .project-active-chip{font-size:.68rem}
  .project-path-banner{align-items:stretch;flex-direction:column;gap:11px;padding:12px}
  .project-path-banner button{width:100%}
  .project-floating-platform{width:120px}
  .project-floating-topic{width:98px}
  .project-floating-level{width:94px}
  .project-floating-control-copy small{font-size:.75rem}
  .project-floating-btn{padding-inline:6px}
  .project-grid{grid-template-columns:1fr;gap:14px}
  .library-project-card{min-height:300px}
  .project-card-link h3{font-size:1.34rem}
  .project-card-link>p{font-size:.84rem;line-height:1.62}
  .project-provider-badge,.project-level-badge,.project-saved-badge{min-height:30px;font-size:.72rem}
  .project-service-chip{padding:6px 7px;font-size:.72rem}
  .project-card-foot{align-items:stretch;flex-direction:column;font-size:.72rem}
  .project-card-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px}
  .project-quick-look,.project-card-open{
    min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 10px;
    border:2px solid var(--border);border-radius:9px;background:var(--surface-raised);
    box-shadow:2px 2px 0 var(--shadow-color);font-size:.72rem;
  }
  .project-library-footer{align-items:stretch;flex-direction:column}
  .project-load-more{width:100%}
}

@media (max-width:520px){
  .project-library-shell{gap:12px;padding-bottom:112px}
  .project-filter-open .project-library-shell{padding-bottom:176px}
  .project-search-box{grid-template-columns:auto minmax(0,1fr) auto;min-height:58px}
  .project-search-box kbd{display:none}
  .project-search-glyph{width:38px;height:38px}
  .project-results{font-size:.68rem}
  .project-active-filters{gap:6px}
  .project-active-chip{min-height:44px;padding-inline:8px;font-size:.64rem}

  .project-floating-zone{bottom:max(7px,env(safe-area-inset-bottom))}
  .project-floating-dock{
    width:auto;max-width:calc(100vw - 16px);border-radius:14px;
  }
  .project-floating-main{min-height:48px;padding:2px}
  .project-floating-actions{gap:4px}
  .project-floating-btn{min-height:44px;padding:6px}
  .project-floating-filter-panel{
    left:50%;bottom:calc(100% + 7px);width:calc(100vw - 24px);max-width:none;height:auto;
    transform:translate(-50%,5px) scale(.985);
  }
  .project-floating-dock.is-filter-open .project-floating-filter-panel{transform:translateX(-50%)}
  .project-floating-filter-clip{width:100%;height:auto;border-radius:14px}
  .project-floating-filter-fields{
    position:relative;width:100%;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;
  }
  .project-floating-platform{grid-column:1/-1;width:100%}
  .project-floating-topic,.project-floating-level{width:100%}
  .project-floating-select{height:44px;padding:3px 7px}
  .project-floating-control-copy small{display:block;font-size:.72rem}
  .project-floating-control-copy strong{font-size:.84rem}
  .project-floating-clear{
    position:absolute;top:-9px;right:-7px;width:44px;min-width:44px;height:44px;min-height:44px;
    border:0;background:transparent;box-shadow:none;
  }
  .project-floating-clear::before{
    inset:7px;border:2px solid #111;border-radius:50%;background:var(--yellow);color:#111;box-shadow:2px 2px 0 #111;
  }
  .project-floating-clear:hover{background:transparent;transform:none;box-shadow:none}
  .project-floating-option-menu{left:0;right:0;width:auto;max-width:none;max-height:196px}
  .project-floating-topic .project-floating-option-menu{
    left:0;right:auto;width:calc(200% + 4px);transform:translateY(4px) scale(.99);
  }
  .project-floating-topic .project-floating-option-menu.open{transform:none}
  .project-floating-level .project-floating-option-menu{left:auto;right:0;width:calc(200% + 4px)}
  .project-floating-sort-popover{width:min(250px,calc(100vw - 24px))}
}

@media (max-width:430px){
  .project-card-actions{grid-template-columns:1fr}
  .project-quick-look,.project-card-open{width:100%}
}

@media (max-width:767px){.project-static-fallback-grid{grid-template-columns:1fr}.project-static-fallback{padding:12px}}
@media (prefers-reduced-motion:reduce){
  .project-floating-dock,.project-floating-filter-panel,.project-floating-option-menu,.project-floating-sort-popover,
  .project-floating-btn,.project-floating-select,.project-grid{transition-duration:.01ms!important}
}
.project-search-clear[hidden],.project-floating-clear[hidden]{display:none!important}

@media (max-width:520px){.project-floating-dock,.project-floating-filter-clip{backdrop-filter:blur(8px) saturate(1.04);-webkit-backdrop-filter:blur(8px) saturate(1.04)}}

@media (forced-colors:active){.project-floating-btn,.project-floating-select,.project-floating-option,.project-active-chip,.project-search-box{forced-color-adjust:auto;border-color:ButtonText}.project-floating-option[aria-selected="true"],.project-floating-saved[aria-pressed="true"]{outline:2px solid Highlight;outline-offset:1px}}

.mobile-flow-topology{gap:8px}
.mobile-flow-relation{padding:2px 8px;color:var(--muted);font:800 .75rem/1.4 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;text-align:center}
.mobile-flow-branches{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mobile-flow-branches-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.mobile-flow-branches .mobile-flow-node{min-width:0}
.strategy-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.strategy-comparison>div{display:grid;gap:6px;padding:13px;background:var(--surface-soft);border:1.5px solid var(--border-soft);border-radius:9px}
.strategy-comparison strong{color:var(--ink);font-size:1rem}
.strategy-comparison span{color:var(--text);font-size:.9rem;line-height:1.5}
.strategy-comparison small{color:var(--muted);font-size:.78rem;line-height:1.5}
.worked-decision{margin-top:12px;padding:14px;border-left:5px solid var(--provider,var(--brand));background:color-mix(in srgb,var(--provider,var(--brand)) 9%,var(--surface-raised));border-radius:8px}
.worked-decision p{margin-top:7px}
.question-game-count{display:block;margin-top:8px;color:var(--muted);font:850 .78rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;text-align:center}
@media(max-width:599px){.mobile-flow-branches-three{grid-template-columns:1fr}.strategy-comparison{grid-template-columns:1fr}.quick-fact{grid-template-columns:1fr;gap:5px}}
@media(prefers-reduced-motion:reduce){.save-pop,.section-arrival,.canvas-node-wrap.is-entering,.canvas-node-wrap.is-removing,.canvas-node-wrap.is-challenge-primary .canvas-node,.canvas-node-wrap.is-challenge-impact .canvas-node,.coach-alert.is-entering,.coach-empty.is-entering,.coach-alert.is-resolving,.project-quick-dialog[open] .quick-dialog-card,.project-quick-dialog.is-closing .quick-dialog-card{animation:none!important;transition:none!important;transform:none!important}.coach-why-body{transition:none!important}}

.project-floating-zone{height:64px;bottom:max(16px,env(safe-area-inset-bottom))}
.project-floating-dock,.project-floating-dock.is-filter-open,.project-floating-dock.is-sort-open{
  transform:translateX(-50%);border:2px solid var(--border);border-radius:15px;
  background:var(--surface-raised);
  box-shadow:5px 5px 0 var(--shadow-color);transition:background-color .16s ease,box-shadow .16s ease;
}
.project-floating-main{min-height:60px;padding:7px 9px}
.project-floating-actions{gap:8px}
.project-floating-btn{
  min-height:44px;gap:8px;padding:0 12px;border:1.5px solid transparent;border-radius:9px;
  background:transparent;color:var(--ink);box-shadow:none;font-family:inherit;font-size:.875rem;font-weight:850;line-height:1.3;
}
.project-floating-btn:hover,.project-floating-btn:active{transform:none;box-shadow:none;background:var(--surface-soft)}
.project-floating-btn:focus-visible,.project-floating-select:focus-visible,.project-floating-clear:focus-visible{
  outline:3px solid var(--focus);outline-offset:3px;
}
.project-floating-btn:disabled{box-shadow:none;background:transparent;opacity:.6}
.project-floating-saved[aria-pressed="true"]{background:var(--yellow);color:#111;border-color:var(--border)}
.project-floating-saved[aria-pressed="true"] svg{fill:currentColor}
.project-floating-filter-trigger[aria-expanded="true"]{background:var(--nav-projects,var(--azure));color:#111;border-color:var(--border)}
.project-floating-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 20px;width:20px;height:20px}
.project-floating-icon svg,.project-floating-chev svg,.project-floating-clear svg{
  display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.project-filter-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding-inline:4px;border-radius:6px;background:var(--ink);color:var(--surface-raised);font-family:inherit;font-weight:800;font-size:.7rem;line-height:1}
.project-filter-count[hidden]{display:none}
.project-sort-mobile-label{display:none}

.project-floating-filter-panel{
  left:50%;right:auto;bottom:calc(100% + 12px);width:min(560px,calc(100vw - 32px));max-width:none;height:auto;
  transform:translate(-50%,6px);transform-origin:bottom center;
}
.project-floating-dock.is-filter-open .project-floating-filter-panel{transform:translateX(-50%)}
.project-floating-filter-clip{width:100%;height:auto;background:var(--surface-raised);padding:14px;border:2px solid var(--border);border-radius:15px;box-shadow:5px 5px 0 var(--shadow-color)}
.project-filter-panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;margin-bottom:10px}
.project-filter-panel-head>strong{font-size:1rem;font-weight:850}
.project-floating-filter-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;height:auto;gap:10px;padding:0}
.project-floating-platform,.project-floating-topic,.project-floating-level{width:100%;min-width:0;grid-column:auto}
.project-floating-select{
  height:66px;gap:9px;padding:10px 12px;background:var(--surface-raised);border:1.5px solid var(--border-soft);
  box-shadow:none;border-radius:10px;transition:background-color .16s ease,border-color .16s ease;
}
.project-floating-select:hover,.project-floating-select[aria-expanded="true"]{transform:none;box-shadow:none;background:var(--surface-soft);border-color:var(--border)}
.project-floating-control-copy{gap:6px}
.project-floating-control-copy small{font-family:inherit;font-weight:650;font-size:.75rem;line-height:1.2;text-transform:none;letter-spacing:0}
.project-floating-control-copy strong{font-family:inherit;font-size:.875rem;font-weight:800;line-height:1.3}
.project-floating-chev{display:flex;align-items:center;justify-content:center;width:18px;height:18px}
.project-floating-chev svg{width:18px;height:18px}
.project-floating-provider-dot{width:9px;height:9px;border-width:1px}
.project-floating-clear{
  position:static;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:auto;min-width:0;height:44px;padding:0 9px;
  border:1.5px solid transparent;border-radius:9px;background:transparent;color:var(--muted);box-shadow:none;font-family:inherit;font-weight:750;font-size:.8rem;line-height:1.3;
}
.project-floating-clear::before{content:none}
.project-floating-clear:hover,.project-floating-clear:active{transform:none;box-shadow:none;background:var(--surface-soft);color:var(--ink)}
.project-floating-clear svg{width:17px;height:17px}
.project-floating-option-menu{padding:6px;border-radius:12px;box-shadow:4px 4px 0 var(--shadow-color);max-height:min(260px,40dvh)}
.project-floating-option{gap:10px;padding:10px;font-family:inherit;font-size:.875rem;font-weight:650;line-height:1.4}
.project-floating-option[aria-selected="true"]{box-shadow:none;background:color-mix(in srgb,var(--nav-projects,var(--azure)) 15%,var(--surface-raised));font-weight:850}
.project-floating-sort-popover{width:220px;bottom:calc(100% + 17px)}
.project-floating-sort-card{padding:6px;border-radius:12px;box-shadow:4px 4px 0 var(--shadow-color)}
.project-floating-sort-list{grid-template-columns:1fr;gap:4px}
.project-floating-sort-option{min-height:44px;padding:10px 32px 10px 12px;border:1.5px solid transparent;box-shadow:none;background:transparent}
.project-floating-sort-option[data-sort]::before{content:none}
.project-floating-sort-option strong{font-family:inherit;font-weight:750;font-size:.875rem;line-height:1.4}
.project-floating-sort-option:hover,.project-floating-sort-option:focus-visible{transform:none;box-shadow:none;background:var(--surface-soft)}
.project-floating-sort-option[aria-checked="true"]{box-shadow:none;background:color-mix(in srgb,var(--nav-projects,var(--azure)) 15%,var(--surface-raised));border-color:var(--border-soft)}
.project-library-shell,.project-filter-open .project-library-shell{padding-bottom:96px}

@media(max-width:599px){
  .project-floating-zone{bottom:max(12px,env(safe-area-inset-bottom))}
  .project-floating-dock{max-width:calc(100vw - 32px)}
  .project-floating-main{padding:6px;min-height:58px}
  .project-floating-actions{gap:6px}
  .project-floating-btn{padding-inline:9px;font-size:.8125rem;gap:7px}
  .project-saved-label,#projectSortLabel{display:none}
  .project-sort-mobile-label{display:inline}
  .project-floating-saved{width:44px;padding:0;flex:0 0 44px;border:1.5px solid var(--border-soft);border-radius:50%}
  .project-floating-filter-panel{width:calc(100vw - 32px);bottom:calc(100% + 12px)}
  .project-floating-filter-clip{padding:12px}
  .project-filter-panel-head{margin-bottom:8px}
  .project-floating-filter-fields{grid-template-columns:1fr;gap:8px}
  .project-floating-select{height:58px;padding:8px 12px}
  .project-floating-control-copy{gap:4px}
  .project-floating-control-copy small{display:block;font-size:.75rem}
  .project-floating-control-copy strong{font-size:.875rem}
  .project-floating-topic .project-floating-option-menu,.project-floating-level .project-floating-option-menu,.project-floating-platform .project-floating-option-menu{
    left:0;right:0;width:100%;min-width:0;max-width:none;transform:translateY(4px);
  }
  .project-floating-topic .project-floating-option-menu.open,.project-floating-level .project-floating-option-menu.open,.project-floating-platform .project-floating-option-menu.open{transform:none}
}
@media(prefers-reduced-motion:reduce){.project-floating-dock,.project-floating-filter-panel,.project-floating-btn,.project-floating-select{transition:none!important}}

@media(min-width:1101px){
  .project-floating-dock,.project-floating-dock.is-filter-open,.project-floating-dock.is-sort-open{
    --filter-tray-width:640px;
    display:grid;grid-template-columns:max-content 0px;align-items:center;
    transition:grid-template-columns .3s var(--ease),background-color .16s ease,box-shadow .16s ease;
  }
  .project-floating-dock.is-filter-open{grid-template-columns:max-content var(--filter-tray-width)}
  .project-floating-main{order:0}
  .project-floating-filter-panel{
    order:1;position:relative;left:auto;right:auto;bottom:auto;
    width:var(--filter-tray-width);max-width:none;height:60px;
    transform:translateX(-12px);transform-origin:left center;
    transition:opacity .16s ease,transform .3s var(--ease),visibility 0s linear .3s;
  }
  .project-floating-dock.is-filter-open .project-floating-filter-panel{
    transform:none;animation:project-filter-reveal .3s var(--ease);transition:opacity .18s ease .07s,transform .3s var(--ease),visibility 0s;
  }
  .project-floating-filter-clip{
    display:flex;align-items:center;gap:10px;height:60px;padding:6px 12px 6px 4px;
    border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .project-filter-panel-head{order:1;min-height:44px;margin:0;gap:0}
  .project-filter-panel-head>strong{display:none}
  .project-floating-filter-fields{flex:1;min-width:0;width:auto;grid-template-columns:1fr 1.25fr 1fr;gap:8px}
  .project-floating-select{height:48px;padding:6px 10px;gap:7px}
  .project-floating-control-copy{gap:3px}
  .project-floating-clear{padding-inline:8px}
  .project-floating-platform .project-floating-option-menu,.project-floating-topic .project-floating-option-menu,.project-floating-level .project-floating-option-menu{bottom:calc(100% + 12px)}
}
@keyframes project-filter-reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@media(prefers-reduced-motion:reduce){
  .project-floating-dock,.project-floating-filter-panel,.project-floating-dock.is-filter-open .project-floating-filter-panel{transition:none!important;animation:none!important}
}