/* Light, material and motion are shared; the five reading structures stay distinct. */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --flow: #5278e7;
  --frame-glow: 82, 120, 231;
}

body[data-design=article] {
  --paper: #f5f6f8;
  --surface: #ffffff;
  --ink: #202735;
  --muted: #657084;
  --line: #dce2ec;
  --accent: #4d65c8;
  --tint: #eaf0fe;
  background: radial-gradient(ellipse at 90% 0%, #e9eefc 0%, transparent 36%), var(--paper);
}
body[data-design=article][data-project=agent] { --accent:#6a5bb7; --flow:#8471dd; --frame-glow:120,99,197; }
body[data-design=article][data-project=reelsomet] { --accent:#267b79; --flow:#3b9d9b; --frame-glow:48,133,136; }
body[data-design=article][data-project=analytics] { --accent:#93662f; --flow:#b18449; --frame-glow:166,120,60; }
body[data-design=article][data-project=salary] { --accent:#826296; --flow:#9b78b2; --frame-glow:139,106,166; }
body[data-design=article][data-project=labor] { --accent:#4b7b69; --flow:#629981; --frame-glow:78,140,114; }
body[data-design=article][data-project=contracts] { --accent:#596b8e; --flow:#6b83af; --frame-glow:90,116,157; }
body[data-design=workbench] { --flow:#b0e4cb; --frame-glow:100,158,137; }
body[data-design=dossier] { --flow:#cc644f; --frame-glow:194,101,81; }

/* A quieter identity bar gives the work more room. */
.design-switcher {
  height:32px;
  background:#e9ecf2;
  color:#687388;
  font-size:9px;
  border-bottom:1px solid #dfe4ed;

}
.design-switcher>div { gap:6px; }
.design-switcher>div>a { color:#788294; padding:3px 9px; border-radius:5px; transition:background .3s,color .3s; }
.design-switcher>div>a[aria-current] { background:white; color:#354766; box-shadow:0 1px 4px #202b4710; }
.design-switcher>div>a:hover { background:#ffffffa8; color:#273e6e; }
.portfolio-header {
  top:32px;
  height:76px;
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  background:var(--paper);
  border-bottom-color:color-mix(in srgb,var(--line) 80%,transparent);

}
.brand { display:flex; align-items:center; gap:13px; }
.brand-monogram {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--surface);
  font:italic 20px/1 Georgia,serif;
  color:var(--accent);
  letter-spacing:-2px;
  padding-right:3px;
  box-shadow:0 3px 8px #27345006;
}
.brand-name { font-size:12px; font-weight:600; }
.brand-name small { font-size:8px; letter-spacing:.06em; margin-top:3px; }
.main-nav a { position:relative; padding-block:8px; transition:color .3s; }
.main-nav a::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:1px;
  height:1px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .5s var(--ease-out);
}
.main-nav a:hover::after,.main-nav a[aria-current]::after { transform:scaleX(1); }
.main-nav a[aria-current] { color:var(--accent); }
.lang-switch { gap:5px; }
.lang-switch button { padding:7px 8px; border-radius:6px; transition:background .25s,color .25s; }
.lang-switch button[aria-pressed=true] { background:var(--surface); box-shadow:0 1px 4px #1d294b0b; text-decoration:none; }
.lang-switch button:hover { color:var(--accent); }

.button {
  border-radius:12px;
  padding:15px 20px 15px 23px;
  box-shadow:0 4px 8px #14213608,0 12px 25px #14213609;
  transition:transform .45s var(--ease-out),background .2s,border-color .2s;
}
.button:hover { transform:translateY(-3px); box-shadow:0 6px 12px #1421360c,0 17px 36px #14213613; }
.button:active { transform:translateY(-1px); }
.link-arrow { display:inline-block; margin-left:14px; transition:transform .5s var(--ease-out); }
a:hover>.link-arrow { transform:translate(3px,-2px); }
.inline-link { border-bottom-color:color-mix(in srgb,var(--accent) 25%,transparent); padding-bottom:8px; }
.cv-links a { border-radius:9px; transition:border-color .3s,transform .4s var(--ease-out); }
.cv-links a:hover { transform:translateY(-2px); }
.tags { gap:8px; }
.tags>span { padding:5px 9px; border:1px solid var(--line); border-radius:5px; background:color-mix(in srgb,var(--surface) 60%,transparent); font-size:9px; }

/* A working RAG example becomes the personal homepage's signature. */
.hero-article { padding-top:46px; gap:58px; grid-template-columns:.84fr 1.2fr; min-height:0; }
.hero-article h1 { font-size:clamp(72px,7.3vw,119px); line-height:.97; letter-spacing:-.065em; }
.hero-article .role { font-size:23px; color:var(--accent); margin-top:24px; }
.hero-description { line-height:1.95; }
.hero-article .hero-description { max-width:415px; font-size:14px; }
.hero-facts { display:flex; align-items:center; gap:25px; margin-top:37px; color:var(--muted); font-size:9px; letter-spacing:.01em; }
.hero-facts strong { font-weight:500; color:var(--ink); margin-right:5px; font-size:12px; font-variant-numeric:tabular-nums; }
.hero-facts>span+span { border-left:1px solid var(--line); padding-left:25px; }
.hero-figure {
  position:relative;
  padding:22px;
  border:1px solid #fff;
  border-radius:23px;
  background:linear-gradient(145deg,#fff,#f9fbff);
  box-shadow:0 1px 2px #20356305,0 22px 70px #2c4d8411,inset 0 0 0 1px #e2e9f3;
}
.figure-label { padding:1px 1px 19px; font-size:8px; letter-spacing:.1em; align-items:center; }
.figure-label button { font-size:9px; color:var(--accent); padding:0; letter-spacing:0; }
.figure-eyebrow::before { content:"";display:inline-block;width:5px;height:5px;background:var(--accent);border-radius:50%;margin:0 8px 1px 0; }
.hero-figure-title { display:flex; align-items:center; gap:18px; padding:0 2px 20px; }
.hero-figure-title>span { font-family:Georgia,serif; font-size:44px; letter-spacing:-.07em; color:var(--ink); }
.hero-figure-title>p { border-left:1px solid var(--line); padding-left:18px; font-size:12px; line-height:1.65; color:var(--muted); }
.hero-figure .diagram-viewport { padding:4px; border:0; }
.hero-figure .diagram-viewport>.diagram-scene { height:270px; max-height:none; }
body[data-design=article] .hero-figure .diagram-viewport>.diagram-scene { height:270px; }
.hero-stage-nav { display:flex; gap:5px; margin:17px 0 15px; padding:5px; border-radius:11px; background:#eaf0f8; }
.hero-stage-nav button { flex:1; display:flex; gap:8px; align-items:center; justify-content:center; font-size:10px; padding:10px 7px; border-radius:7px; color:#738198; transition:color .3s,background .4s,box-shadow .4s; }
.hero-stage-nav button>span { font-size:7px; color:#a4afc2; font-variant-numeric:tabular-nums; }
.hero-stage-nav button[aria-pressed=true] { background:white; color:var(--accent); box-shadow:0 2px 8px #253d6510; }
.hero-stage-nav button:hover { color:var(--accent); background:#ffffff70; }
.hero-figure figcaption { padding:13px 2px 0; border-top-color:#e8edf5; font-size:9px; line-height:1.9; }
.hero-figure figcaption a { display:block; margin-top:5px; }
[data-hero-caption] { display:block; min-height:1.9em; }
.hero-sequence .hero-figure { padding:25px 35px; max-width:1000px; border-radius:24px; }
.hero-sequence .hero-figure .diagram-viewport>.diagram-scene { height:380px; }
.hero-sequence .hero-facts { justify-content:center; }
.hero-dossier .hero-facts { margin-top:30px; }
.workspace-overview { border-radius:16px; }

/* Softly lit component plates, with a real direction of travel. */
.diagram-group rect { fill:var(--diagram-group,#f4f7fc); stroke:var(--diagram-border,#d8e0ed); stroke-dasharray:none; stroke-width:.9; fill-opacity:.65; }
.diagram-group text { font-size:10px; letter-spacing:1.25px; fill:var(--diagram-caption,#8794aa); }
.diagram-node { opacity:.23; transition:none; }
.diagram-node.is-active { opacity:1; filter:none; }
.node-sheen { pointer-events:none; }
.diagram-node .node-shape { stroke-width:1; fill:var(--node-fill,#f6efdf); stroke:var(--node-stroke,#c3b28e); transition:none; }
.diagram-node[data-tone=data] { --node-fill:#e6eefb; --node-stroke:#91a7cf; }
.diagram-node[data-tone=model] { --node-fill:#e9e5f6; --node-stroke:#afa0c8; }
.diagram-node[data-tone=store] { --node-fill:#e5efe9; --node-stroke:#96b4a4; }
.diagram-node[data-tone=evaluation] { --node-fill:#f8efdd; --node-stroke:#c9b184; }
.diagram-node[data-tone=output] { --node-fill:#e5edf9; --node-stroke:#96adcd; }
.node-title { font-size:18px; font-weight:600; fill:var(--node-ink,#35425a); letter-spacing:-.25px; }
.node-sub { font-size:12px; fill:var(--node-muted,#7b889d); }
.node-detail { opacity:.32; }
.diagram-node[role=button]:hover .node-shape { stroke-width:1.8; stroke:var(--flow); }
.diagram-node[role=button]:focus-visible .node-shape { stroke-width:2.5; }
.diagram-edge { opacity:.17; transition:none; }
.diagram-edge.is-active { opacity:1; }
.diagram-edge .edge-line { stroke:var(--diagram-arrow,#a2b0c8); stroke-width:1.2; }
.diagram-edge.is-active .edge-line { stroke:var(--flow); stroke-width:1.8; }
.diagram-edge.is-secondary .edge-line { stroke-dasharray:4 5; }
.edge-port { fill:var(--surface); stroke:var(--flow); stroke-width:1; opacity:0; transition:none; }
.diagram-edge.is-active .edge-port { opacity:1; }
.diagram-edge text { font-size:10px; fill:var(--diagram-caption,#7f8ca2); stroke-width:6; }
.architecture.is-mini .diagram-node,.work-visual .diagram-node { filter:none; }
.architecture.is-mini .edge-port { display:none; }

.pinned-figure {
  top:128px;
  padding:20px;
  border:1px solid color-mix(in srgb,var(--line) 80%,white);
  border-radius:22px;
  background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--surface) 90%,var(--tint)));
  box-shadow:0 2px 4px #233b6504,0 20px 60px rgba(var(--frame-glow),.065);
}
.diagram-toolbar { padding:0 2px 16px; font-size:8px; letter-spacing:.09em; align-items:center; }
.diagram-toolbar b { font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.diagram-toolbar>div { gap:7px; }
.diagram-toolbar button { font-size:9px; padding:7px 9px; border:1px solid transparent; border-radius:7px; color:var(--muted); transition:background .3s,color .3s,border-color .3s; }
.diagram-toolbar button:hover { background:var(--tint); color:var(--accent); }
.diagram-toolbar button[aria-pressed=true] { border-color:var(--line); background:var(--surface); color:var(--accent); }
.diagram-toolbar [data-play] { color:var(--accent); background:var(--tint); }
.diagram-toolbar [data-play]>span { margin-left:3px; }
.diagram-viewport {
  padding:10px;
  border:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  border-radius:13px;
  background:radial-gradient(circle,#889cc618 .7px,transparent .8px) 0 0/18px 18px,var(--surface);
}
body[data-design=article] .pinned-figure .diagram-viewport>.diagram-scene { height:clamp(230px,calc(100svh - 400px),510px); }
.figure-key { padding:13px 3px 5px; gap:17px; font-size:7px; opacity:.8; }
.figure-key span::before { border-radius:2px; width:7px; height:7px; }
.stage-nav { gap:13px; padding:0 2px; margin-top:12px; }
.stage-nav button { color:var(--muted); padding:6px 0 13px; transition:color .5s; font-size:9px; }
.stage-nav button>span { display:inline-flex; align-items:center; justify-content:center; width:24px; height:21px; border-radius:5px; transition:background .6s,box-shadow .6s; font-variant-numeric:tabular-nums; }
.stage-nav button[aria-current]>span { background:var(--surface); box-shadow:0 1px 4px #142a5910; color:var(--accent); }
.stage-nav i { overflow:hidden; height:2px; border-radius:2px; background:var(--line); }
.stage-nav button[aria-current] i { background:var(--line); }
.stage-progress { display:block; width:100%; height:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; }
.figure-caption-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 2px 1px; }
.active-figure-caption { font-size:10px; padding:0; line-height:1.6; min-height:16px; color:var(--muted); }
.flow-indicator { display:flex; align-items:center; gap:6px; font-size:6px; letter-spacing:.09em; white-space:nowrap; color:var(--muted); opacity:.45; transition:opacity .4s; }
.flow-indicator i { width:4px; height:4px; border-radius:50%; background:var(--accent); }
[data-flowing] .flow-indicator { opacity:1; color:var(--accent); }
.project-heading h1 { text-wrap:balance; }
.project-owner { border-left:1px solid var(--line); padding:5px 0 5px 26px; }
.project-owner>p { color:var(--accent); font-size:8px; letter-spacing:.12em; }
.project-owner>strong { font-size:13px; }
.project-summary { font-size:18px; }
.project-problem { border-top-color:var(--line); }
.story-intro h2 { font-size:30px; text-wrap:balance; }
.story-step { border-top-color:color-mix(in srgb,var(--line) 70%,transparent); }
.story-step h3 { font-size:34px; letter-spacing:-.045em; text-wrap:balance; }
.step-number { font:400 12px/1.6 var(--ui); font-variant-numeric:tabular-nums; opacity:.55; transition:none; }
.story-step.is-active .step-number { opacity:1; }
.my-work {
  position:relative;
  border-left:2px solid var(--line);
  padding:17px 18px;
  border-radius:0 12px 12px 0;
  background:color-mix(in srgb,var(--tint) 30%,transparent);
  transition:border-color .2s;
}
.story-step.is-active .my-work { background:color-mix(in srgb,var(--tint) 65%,transparent); box-shadow:10px 8px 30px rgba(var(--frame-glow),.025); }
.my-work>span { letter-spacing:.12em; font-size:7px; font-weight:600; }
.my-work>p { font-size:12px; }

.work-visual { border-radius:17px; padding:20px; border-color:color-mix(in srgb,var(--line) 70%,white); box-shadow:0 12px 35px #213a6305; transition:transform .25s var(--ease-out),border-color .2s; }
.work-visual:hover { transform:translateY(-5px); box-shadow:0 18px 45px rgba(var(--frame-glow),.10); }
.work-visual .architecture { padding:8px 0 10px; }
.work-copy h3 { text-wrap:balance; }
.work-open { padding-top:12px; border-top:1px solid var(--line); }
.note-item { transition:color .2s; }
.note-item:hover { color:var(--accent); }
.experience-row h4 { text-wrap:balance; }
.education { border-bottom:1px solid var(--line); }
.contact-actions>a { transition:color .3s,border-color .3s; }
.contact-actions>a:hover { color:var(--accent); border-color:var(--accent); }
.design-preview { border-radius:16px; transition:transform .25s var(--ease-out); }
.design-preview:hover { transform:translateY(-6px); box-shadow:0 24px 65px #30274211; }
/* Each alternative keeps its own material and accent. */
body[data-design=atlas] .atlas-index { top:32px; }
body[data-design=atlas] .pinned-figure { top:128px; }
body[data-design=workbench] .workspace-tabs { top:108px; }
body[data-design=workbench] .pinned-figure { top:173px; }
body[data-design=workbench] .diagram-viewport { background:radial-gradient(circle,#d4ede515 .7px,transparent .8px) 0 0/18px 18px,#1b232c; }
body[data-design=workbench] .node-sheen { opacity:.07; }
body[data-design=workbench] .edge-port { fill:#26323d; }
body[data-design=workbench] .diagram-node.is-active { filter:none; }
body[data-design=workbench] .design-switcher { border-color:#303940; color:#b0bdc6; }
body[data-design=workbench] .design-switcher>div>a[aria-current] { background:#293a35; color:#c9e8d9; }
body[data-design=workbench] .portfolio-header { background:#171c23e8; }
body[data-design=workbench] .stage-nav button[aria-current]>span { background:#34473e; }
body[data-design=dossier] .pinned-figure { border-radius:4px; padding:12px 40px; box-shadow:none; }
body[data-design=dossier] .diagram-viewport { border-radius:3px; }
body[data-design=dossier] .work-visual { border-radius:4px; }
body[data-design=dossier] .button { border-radius:3px; }
body[data-design=sequence] .pinned-figure { padding-inline:30px; border-radius:0; box-shadow:none; }
body[data-design=sequence] .figure-caption-row { justify-content:center; }
body[data-design=sequence] .active-figure-caption { padding:0; }
body[data-design=sequence] .my-work { border-radius:12px; border:0; }

dialog { border-radius:18px; box-shadow:0 40px 120px #18284138; }
.dialog-close { border-radius:7px; }
dialog[open] { animation:dialog-enter .45s var(--ease-out) both; }
dialog::backdrop { background:#15223955;  }
@keyframes dialog-enter { from {opacity:0;transform:translateY(12px) scale(.985)} to {opacity:1;transform:none} }
@media(max-width:1200px) {
  .hero-article { gap:32px; grid-template-columns:.82fr 1.18fr; }
  .hero-article h1 { font-size:78px; }
  .hero-figure { padding:18px; }
  .hero-facts { gap:15px; }
  .hero-facts>span+span { padding-left:15px; }
  .diagram-toolbar button { padding-inline:6px; font-size:8px; }
  .diagram-toolbar b { margin-left:9px; }
  .figure-caption-row { gap:10px; }
  .flow-indicator { display:none; }
}

@media(max-width:760px) {
  :root { scroll-padding-top:119px; }
  .design-switcher { height:32px; font-size:8px; }
  .design-switcher>div { gap:2px; }
  .portfolio-header { height:72px; top:32px; }
  .brand { gap:10px; }
  .brand-monogram { width:29px; height:29px; font-size:17px; }
  .brand-name { font-size:10px; }
  .brand-name small { font-size:7px; }
  .lang-switch button { padding-inline:5px; font-size:9px; }
  .portfolio-header .lang-switch { margin-left:auto; }
  .portfolio-header { gap:12px; }
  .menu-toggle { font-size:19px; }
  .hero-article { display:flex; gap:37px; padding-top:38px; }
  .hero-article h1 { font-size:70px; }
  .hero-article .role { font-size:22px; }
  .hero-article .hero-description { font-size:14px; }
  .hero-facts { gap:16px; margin-top:28px; font-size:8px; }
  .hero-facts>span+span { padding-left:16px; }
  .hero-facts strong { font-size:11px; }
  .hero-figure { border-radius:17px; padding:16px; }
  .hero-figure-title { gap:14px; padding-bottom:16px; }
  .hero-figure-title>span { font-size:35px; }
  .hero-figure-title>p { font-size:10px; padding-left:14px; }
  .hero-figure .figure-label { font-size:6px; padding-bottom:17px; }
  .hero-figure .figure-label button { font-size:8px; }
  .hero-figure .diagram-viewport>.diagram-scene { height:250px; }
  body[data-design=article] .hero-figure .diagram-viewport>.diagram-scene { height:250px; }
  .hero-stage-nav { margin-top:12px; gap:2px; padding:4px; }
  .hero-stage-nav button { gap:4px; font-size:9px; padding:10px 4px; }
  .hero-stage-nav button>span { font-size:6px; }
  .hero-figure figcaption { font-size:8px; }
  .hero-sequence .hero-figure { padding:16px; border-radius:18px; }
  .hero-sequence .hero-figure .diagram-viewport>.diagram-scene { height:250px; }
  .pinned-figure { top:110px; padding:11px; border-radius:15px; margin-inline:-10px; box-shadow:0 10px 0 var(--paper),0 18px 35px rgba(var(--frame-glow),.045); }
  .diagram-toolbar { font-size:7px; padding:1px 0 10px; gap:7px; }
  .diagram-toolbar b { font-size:7px; margin-left:8px; }
  .diagram-toolbar>div { gap:1px; }
  .diagram-toolbar button { font-size:9px; padding:7px 5px; min-height:32px; border-radius:5px; }
  .diagram-toolbar [data-play]>span { display:none; }
  .diagram-viewport { padding:5px; border-radius:9px; }
  body[data-design=article] .pinned-figure .diagram-viewport>.diagram-scene { height:29svh; min-height:190px; }
  .stage-nav { gap:11px; margin-top:7px; padding-inline:1px; }
  .stage-nav button { font-size:9px; padding-bottom:10px; min-height:44px; }
  .stage-nav button>span { width:20px; height:18px; }
  .figure-caption-row { padding-top:10px; min-height:30px; }
  .active-figure-caption { font-size:9px; min-height:15px; padding:0; }
  .flow-indicator { display:none; }
  .story-step h3 { font-size:29px; }
  .my-work { padding:15px 17px; }
  .my-work>p { font-size:12px; }
  .project-owner { margin-top:25px; padding:2px 0 2px 18px; }
  .project-owner>strong { font-size:12px; }
  .project-summary { font-size:16px; }
  .story-intro h2 { font-size:25px; }
  .tags>span { font-size:8px; padding:4px 8px; }
  .work-visual { padding:14px; border-radius:13px; }
  .work-open { font-size:9px; }
  .cv-links a { font-size:10px; padding:12px 14px; }
  body[data-design=atlas] .portfolio-header>.brand { display:flex; }
  body[data-design=atlas] .pinned-figure { top:110px; }
  body[data-design=workbench] .workspace-tabs { top:104px; }
  body[data-design=workbench] .pinned-figure { top:150px; }
  body[data-design=dossier] .pinned-figure { padding:11px; top:110px; }
  body[data-design=sequence] .pinned-figure { padding-inline:6px; top:109px; }
  body[data-design=sequence] .active-figure-caption { padding:0; }
  body[data-design=sequence] .story-step h3 { font-size:29px; }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* One fixed SVG layer; zoom and signal movement are compositor transforms. */
:root { scroll-behavior:auto; }
.diagram-scene { position:relative; width:100%; overflow:hidden; contain:layout paint; isolation:isolate; }
.diagram-camera { position:absolute; left:0; top:0; transform-origin:0 0; transition:transform 480ms cubic-bezier(.22,.72,.16,1); }
.diagram-scene.is-visible .diagram-camera { will-change:transform; }
.diagram-camera>.architecture { display:block; width:100%; height:100%; max-height:none; overflow:visible; }
.diagram-signals { position:absolute; inset:0; pointer-events:none; }
.signal-dot { position:absolute; top:0; left:0; width:7px; height:7px; margin:-3.5px; border-radius:50%; background:var(--flow); opacity:0; box-shadow:0 0 0 3px color-mix(in srgb,var(--flow) 15%,transparent); }
.diagram-toolbar button:disabled { opacity:.4; cursor:default; }
@media(prefers-reduced-motion:reduce) { .diagram-camera { transition:none; } .signal-dot { display:none; } }