/* GENERATED by marketing/tools/trace_demo_build.py from the dev team's held file. Do not edit. */
.trace-demo{
      --navy-deep:#0C2445; --ink:#163B6D; --accent:#56BBAF; --accent-ink:#0B5A50;
      --aqua:#0C80B5; --canvas:#F4F7F9; --surface:#FFFFFF; --line:#D7E0E6;
      --ok:#1B7A45; --ok-tint:#E7F5EC; --warn:#8A5B00; --warn-tint:#FCF3DF;
      --danger:#B3261E; --danger-tint:#FBEBEA; --info:#075D84; --info-tint:#E8F3F9;
      --muted:#607080; --purple:#65519B; --purple-tint:#F1EDFA;
      --shadow:8px 8px 18px rgba(93,111,128,.22),-8px -8px 18px rgba(255,255,255,.9); --shadow-raised:14px 14px 30px rgba(93,111,128,.26),-12px -12px 26px rgba(255,255,255,.96);
      --shadow-inset:inset 4px 4px 9px rgba(93,111,128,.18),inset -4px -4px 9px rgba(255,255,255,.9);
      --shadow-modal:24px 24px 70px rgba(25,49,73,.30),-18px -18px 52px rgba(255,255,255,.72); --r-s:12px; --r-m:18px; --r-l:26px;
    }
    .trace-demo,.trace-demo *{box-sizing:border-box}
    .trace-demo{margin:0;min-height:100%;font-family:"IBM Plex Sans","Segoe UI",Arial,sans-serif;background:#E9EFF3;color:var(--ink)}
    .trace-demo{font-size:14px;line-height:1.45;overflow-x:hidden}
    .trace-demo button,.trace-demo select{font:inherit}
    .trace-demo button:focus-visible,.trace-demo select:focus-visible{outline:3px solid rgba(12,128,181,.35);outline-offset:2px}
    .trace-demo .shell{min-height:100vh;display:grid;grid-template-rows:auto auto 1fr;background:#E9EFF3}
    .trace-demo .topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 24px;background:#E9EFF3;box-shadow:0 10px 24px rgba(93,111,128,.13)}
    .trace-demo .brand{display:flex;align-items:center;gap:12px;min-width:0}
    .trace-demo .brand h1{font-family:Archivo,"Segoe UI",sans-serif;font-size:20px;line-height:1.1;margin:0;font-weight:650;letter-spacing:-.02em}
    .trace-demo .brand p{margin:3px 0 0;color:var(--muted);font-size:12px}
    .trace-demo .top-note{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:12px;text-align:right}
    .trace-demo .status-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px var(--ok-tint)}
    .trace-demo .toolbar{padding:14px 24px;display:flex;gap:14px;align-items:end;flex-wrap:wrap;background:#E9EFF3}
    .trace-demo .field{display:grid;gap:4px;min-width:185px}
    .trace-demo .field label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
    .trace-demo select,.trace-demo .tool-button{min-height:42px;border:0;border-radius:var(--r-s);background:#E9EFF3;color:var(--ink);padding:9px 13px;box-shadow:5px 5px 12px rgba(93,111,128,.20),-5px -5px 12px rgba(255,255,255,.92)}
    .trace-demo .tool-button{font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px}
    .trace-demo .tool-button:hover{color:var(--accent-ink);box-shadow:7px 7px 15px rgba(93,111,128,.23),-7px -7px 15px rgba(255,255,255,.96)}
    .trace-demo .tool-button:active{box-shadow:var(--shadow-inset)}
    .trace-demo .tool-button.primary{background:#77CBBF;color:var(--navy-deep)}
    .trace-demo .legend{margin-left:auto;display:flex;flex-wrap:wrap;gap:9px 14px;align-items:center;padding-bottom:5px;color:var(--muted);font-size:12px}
    .trace-demo .legend-item{display:flex;align-items:center;gap:6px;white-space:nowrap}
    .trace-demo .legend-swatch{width:13px;height:13px;border-radius:4px;border:1px solid var(--line);background:var(--surface)}
    .trace-demo .legend-swatch.screen{border:2px solid var(--accent)}
    .trace-demo .legend-swatch.config{background:var(--purple-tint);border-color:#CFC3EA}
    .trace-demo .legend-swatch.future{background:repeating-linear-gradient(135deg,#fff,#fff 4px,var(--warn-tint) 4px,var(--warn-tint) 8px);border-color:#DFC78C}
    .trace-demo .main{padding:14px 18px 20px;min-height:0}
    .trace-demo .canvas-shell{position:relative;height:calc(100vh - 184px);min-height:590px;background-color:#E9EFF3;background-image:radial-gradient(rgba(82,112,134,.22) 1px,transparent 1px);background-size:22px 22px;border:0;border-radius:var(--r-l);overflow:hidden;box-shadow:inset 9px 9px 22px rgba(93,111,128,.17),inset -9px -9px 22px rgba(255,255,255,.85),var(--shadow);touch-action:none;user-select:none}
    .trace-demo .canvas-shell.dragging{cursor:grabbing}
    .trace-demo .canvas{position:absolute;left:0;top:0;width:2460px;height:2020px;transform-origin:0 0;will-change:transform}
    .trace-demo .edges{position:absolute;inset:0;width:2460px;height:2020px;overflow:visible;pointer-events:none}
    .trace-demo .edge{fill:none;stroke:#9DB2C1;stroke-width:3;marker-end:url(#arrow)}
    .trace-demo .edge.loop{stroke:var(--aqua);stroke-dasharray:8 6}
    .trace-demo .edge.audit{stroke:var(--accent-ink);stroke-dasharray:5 6;opacity:.72}
    .trace-demo .edge.future-edge{stroke:#B08A2D;stroke-dasharray:4 7}
    .trace-demo .phase{position:absolute;width:370px;height:1270px;border-left:1px dashed #C8D6DF;padding-left:18px;pointer-events:none}
    .trace-demo .phase h2{margin:0;color:#527086;font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:800}
    .trace-demo .phase p{margin:3px 0 0;color:#7890A1;font-size:12px;max-width:300px}
    .trace-demo .phase.config-phase{left:55px;top:60px}.trace-demo .phase.capture-phase{left:455px;top:60px}.trace-demo .phase.review-phase{left:855px;top:60px}.trace-demo .phase.validate-phase{left:1255px;top:60px}.trace-demo .phase.bind-phase{left:1655px;top:60px}.trace-demo .phase.monitor-phase{left:2055px;top:60px}
    .trace-demo .lane-label{position:absolute;left:55px;width:2360px;padding:10px 14px;border-top:1px solid var(--line);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:#527086;pointer-events:none}
    .trace-demo .lane-label.audit-label{top:1360px}.trace-demo .lane-label.assurance-label{top:1690px}
    .trace-demo .node{position:absolute;width:260px;min-height:102px;border:0;border-left:5px solid #91A8B8;border-radius:var(--r-m);background:#E9EFF3;color:var(--ink);padding:14px 15px;text-align:left;box-shadow:var(--shadow);cursor:pointer;touch-action:manipulation;transition:transform .16s ease,box-shadow .16s ease,opacity .2s ease,filter .2s ease;border-collapse:separate}
    .trace-demo .node:hover{transform:translateY(-2px);box-shadow:var(--shadow-raised)}
    .trace-demo .node.has-screen{border-left-color:var(--accent)}
    .trace-demo .node.configured{background:#ECEAF4;border-left-color:var(--purple)}
    .trace-demo .node.future{background:linear-gradient(135deg,#E9EFF3 0 84%,#F6EACD 84% 100%);border-left-color:#B08A2D}
    .trace-demo .node.outcome-good{border-left-color:var(--ok)}.trace-demo .node.outcome-warn{border-left-color:var(--warn)}.trace-demo .node.outcome-bad{border-left-color:var(--danger)}
    .trace-demo .node.audit-node{border-left-color:var(--accent-ink)}.trace-demo .node.replay-node{border-left-color:var(--aqua)}
    .trace-demo .node.dimmed{opacity:.18;filter:grayscale(.65)}
    .trace-demo .node.highlighted{box-shadow:0 0 0 4px rgba(86,187,175,.23),var(--shadow-raised)}
    .trace-demo .node-kicker{display:flex;justify-content:space-between;align-items:center;gap:8px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.065em;font-weight:800}
    .trace-demo .node h3{font-size:15px;margin:7px 0 4px;font-weight:750;line-height:1.22}
    .trace-demo .node p{font-size:12px;line-height:1.38;margin:0;color:var(--muted)}
    .trace-demo .node .screen-hint{display:inline-flex;align-items:center;gap:4px;color:var(--accent-ink);font-size:11px;font-weight:750;margin-top:8px}
    .trace-demo .scenario-context{margin:10px -5px -4px;padding:9px 10px;border-radius:12px;background:#E9EFF3;box-shadow:var(--shadow-inset);color:#36566D;font-size:10px;line-height:1.35;display:grid;gap:5px}
    .trace-demo .scenario-context strong{color:var(--accent-ink);font-size:10px}.trace-demo .scenario-role{padding-top:5px;border-top:1px solid rgba(96,112,128,.18);color:#526A7A}
    .trace-demo .persona-chip{font-size:9px;padding:2px 5px;border-radius:4px;background:#EEF3F6;color:#526A7A;white-space:nowrap}
    .trace-demo .future-chip{background:var(--warn-tint);color:var(--warn)}
    .trace-demo .config-chip{background:var(--purple-tint);color:var(--purple)}
    .trace-demo .canvas-help{position:absolute;left:18px;bottom:18px;z-index:10;display:flex;align-items:center;gap:8px;background:#E9EFF3;border:0;border-radius:var(--r-s);padding:9px 12px;color:var(--muted);font-size:12px;box-shadow:var(--shadow);pointer-events:none}
    .trace-demo .zoom-controls{position:absolute;right:14px;bottom:14px;z-index:10;display:grid;grid-template-columns:42px 42px;gap:6px}
    .trace-demo .zoom-controls button{height:42px;border:0;border-radius:var(--r-s);background:#E9EFF3;color:var(--ink);font-size:20px;font-weight:700;cursor:pointer;box-shadow:var(--shadow)}
    .trace-demo .zoom-controls .fit{grid-column:1/-1;font-size:12px}
    .trace-demo .scenario-note{position:absolute;right:18px;top:18px;z-index:10;max-width:360px;background:#E9EFF3;border:0;border-radius:var(--r-m);padding:13px 15px;box-shadow:var(--shadow);pointer-events:none}
    .trace-demo .scenario-note strong{display:block;margin-bottom:3px}.trace-demo .scenario-note span{color:var(--muted);font-size:12px}
    .trace-demo .modal{position:fixed;inset:0;z-index:100;background:rgba(221,235,240,.18);backdrop-filter:blur(19px) saturate(145%);-webkit-backdrop-filter:blur(19px) saturate(145%);display:grid;place-items:center;padding:22px;opacity:0;visibility:hidden;transition:opacity .18s ease;user-select:text;isolation:isolate}
    .trace-demo .modal:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 16% 12%,rgba(255,255,255,.34),transparent 34%),radial-gradient(circle at 86% 78%,rgba(75,166,157,.11),transparent 38%),linear-gradient(135deg,rgba(255,255,255,.10),rgba(14,44,76,.045));box-shadow:inset 0 0 90px rgba(255,255,255,.11)}
    .trace-demo .modal.open{opacity:1;visibility:visible}
    .trace-demo .modal-panel{position:relative;z-index:1;width:min(1120px,96vw);max-height:92vh;overflow:auto;background:rgba(233,239,243,.94);backdrop-filter:blur(28px) saturate(118%);-webkit-backdrop-filter:blur(28px) saturate(118%);border:1px solid rgba(255,255,255,.52);border-radius:var(--r-l);box-shadow:24px 28px 62px rgba(32,55,72,.34),inset 2px 2px 2px rgba(255,255,255,.86),inset -2px -2px 3px rgba(75,94,108,.14);transform:translateY(12px) scale(.975);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
    .trace-demo .modal.open .modal-panel{transform:none}
    .trace-demo .modal-header{position:sticky;top:0;z-index:5;background:rgba(233,239,243,.84);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);display:flex;justify-content:space-between;gap:20px;padding:18px 20px;box-shadow:0 8px 18px rgba(72,91,106,.10),inset 0 1px rgba(255,255,255,.64)}
    .trace-demo .modal-header h2{margin:0;font-size:20px}.trace-demo .modal-header p{margin:5px 0 0;color:var(--muted);font-size:13px;max-width:760px}
    .trace-demo .close-button{width:42px;height:42px;border:0;border-radius:50%;background:#E9EFF3;color:var(--ink);font-size:24px;cursor:pointer;flex:none;box-shadow:var(--shadow)}
    .trace-demo .detail-tabs{display:flex;align-items:center;gap:8px;padding:14px 20px 0;background:rgba(233,239,243,.72)}
    .trace-demo .detail-tabs-label{margin-right:4px;color:var(--muted);font-size:12px;font-weight:700}
    .trace-demo .detail-tab{border:0;border-radius:11px;background:#E9EFF3;color:var(--muted);padding:9px 14px;font-weight:750;cursor:pointer;box-shadow:4px 4px 10px rgba(93,111,128,.18),-4px -4px 10px rgba(255,255,255,.9)}
    .trace-demo .detail-tab.active{color:var(--accent-ink);box-shadow:var(--shadow-inset)}.trace-demo .detail-tab[hidden]{display:none}
    .trace-demo .modal-body{padding:18px 20px 22px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px}
    .trace-demo .screen-wrap{background-color:#E9EFF3;background-image:radial-gradient(rgba(82,112,134,.18) 1px,transparent 1px);background-size:18px 18px;border-radius:var(--r-m);padding:18px;min-width:0;box-shadow:var(--shadow-inset)}
    .trace-demo .annotations{display:grid;align-content:start;gap:10px}
    .trace-demo .annotation{border-left:3px solid var(--accent);padding:10px 12px;background:#F8FBFC;border-radius:0 var(--r-s) var(--r-s) 0;opacity:0;transform:translateX(8px)}
    .trace-demo .annotation strong{display:block;font-size:12px;margin-bottom:3px;color:var(--ink)}.trace-demo .annotation span{display:block;color:var(--muted);font-size:11px;line-height:1.45}.trace-demo .annotation.example-detail{border-left-color:var(--purple);background:#F5F2FA}
    .trace-demo .modal.open .pop{animation:pop-in .38s both}.trace-demo .modal.open .annotation:nth-child(1){animation-delay:.06s}.trace-demo .modal.open .annotation:nth-child(2){animation-delay:.11s}.trace-demo .modal.open .annotation:nth-child(3){animation-delay:.16s}.trace-demo .modal.open .annotation:nth-child(4){animation-delay:.21s}.trace-demo .modal.open .annotation:nth-child(5){animation-delay:.26s}.trace-demo .modal.open .annotation:nth-child(6){animation-delay:.31s}
    @keyframes pop-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
    .trace-demo .mock-app{--m-navy:#0C2445;--m-ink:#163B6D;--m-accent:#56BBAF;--m-canvas:#F4F7F9;--m-surface:#FFF;--m-line:#D7E0E6;--m-muted:#607080;display:grid;grid-template-columns:154px 1fr;min-height:540px;background:var(--m-canvas);border:1px solid #C6D4DD;border-radius:10px;overflow:hidden;box-shadow:0 12px 34px rgba(12,36,69,.15);color:var(--m-ink);font-size:12px;opacity:0;transform:scale(.985)}
    .trace-demo .mock-side{background:var(--m-navy);color:#fff;padding:14px 11px}.trace-demo .mock-brand{display:flex;gap:9px;align-items:center;margin-bottom:22px}.trace-demo .mock-logo{width:30px;height:30px;border-radius:6px;background:var(--m-accent);color:var(--m-navy);display:grid;place-items:center;font-weight:800}.trace-demo .mock-brand small{display:block;color:#BBD0DF;text-transform:uppercase;letter-spacing:.08em;font-size:8px}.trace-demo .mock-nav{display:grid;gap:7px}.trace-demo .mock-nav div{padding:8px 9px;border-radius:5px;color:#DCE7EF}.trace-demo .mock-nav .active{background:rgba(86,187,175,.14);box-shadow:inset 3px 0 var(--m-accent);color:#fff;font-weight:700}
    .trace-demo .mock-main{min-width:0}.trace-demo .mock-top{background:var(--m-surface);border-bottom:1px solid var(--m-line);padding:13px 16px;display:flex;justify-content:space-between;gap:10px;align-items:center}.trace-demo .mock-top h3{margin:0;font-size:16px}.trace-demo .mock-content{padding:14px;display:grid;gap:12px}.trace-demo .mock-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.trace-demo .mock-card{background:var(--m-surface);border:1px solid var(--m-line);border-radius:7px;padding:12px;min-width:0}.trace-demo .mock-card h4{margin:0 0 4px;font-size:12px}.trace-demo .mock-card>p{margin:0 0 10px;color:var(--m-muted);font-size:10px}.trace-demo .mock-button{display:inline-flex;min-height:30px;align-items:center;justify-content:center;border-radius:5px;border:1px solid var(--m-line);padding:6px 10px;background:var(--m-surface);color:var(--m-ink);font-weight:700;font-size:10px}.trace-demo .mock-button.primary{background:var(--m-accent);border-color:var(--m-accent);color:var(--m-navy)}.trace-demo .mock-button.danger{background:#B3261E;color:#fff;border-color:#B3261E}
    .trace-demo .mock-form{display:grid;grid-template-columns:1fr 1fr;gap:9px}.trace-demo .mock-field{display:grid;gap:4px;color:var(--m-muted);font-size:9px}.trace-demo .mock-field.wide{grid-column:1/-1}.trace-demo .mock-input{min-height:30px;border:1px solid var(--m-line);border-radius:5px;background:#fff;padding:6px 8px;color:var(--m-ink);font-size:10px}.trace-demo .mock-input.area{min-height:54px}.trace-demo .mock-section{grid-column:1/-1;font-weight:800;color:var(--m-ink);padding-top:4px;border-bottom:1px solid var(--m-line)}
    .trace-demo .mock-tabs{display:flex;border:1px solid var(--m-line);border-bottom:0;background:#F8FBFC}.trace-demo .mock-tab{padding:8px 9px;border-right:1px solid var(--m-line);font-size:9px;font-weight:700}.trace-demo .mock-tab.active{background:#fff;box-shadow:inset 0 3px var(--m-accent)}
    .trace-demo .mock-table{width:100%;border-collapse:collapse}.trace-demo .mock-table th,.trace-demo .mock-table td{text-align:left;padding:7px 6px;border-bottom:1px solid var(--m-line);font-size:9px;vertical-align:top}.trace-demo .mock-table th{color:var(--m-muted);text-transform:uppercase;letter-spacing:.04em}.trace-demo .mock-pill{display:inline-flex;padding:3px 6px;border-radius:4px;background:#E7F5EC;color:#1B7A45;font-weight:700;font-size:8px}.trace-demo .mock-pill.warn{background:#FCF3DF;color:#8A5B00}.trace-demo .mock-pill.bad{background:#FBEBEA;color:#B3261E}.trace-demo .mock-pill.info{background:#E8F3F9;color:#075D84}
    .trace-demo .mock-timeline{display:grid;gap:0}.trace-demo .mock-event{display:grid;grid-template-columns:16px 1fr;gap:8px;position:relative;padding-bottom:10px}.trace-demo .mock-event:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--m-accent);margin-top:3px;z-index:1}.trace-demo .mock-event:not(:last-child):after{content:"";position:absolute;left:3px;top:11px;bottom:-2px;width:2px;background:var(--m-line)}.trace-demo .mock-event strong{display:block;font-size:10px}.trace-demo .mock-event span{font-size:9px;color:var(--m-muted)}
    .trace-demo .mock-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.trace-demo .mock-stat{border:1px solid var(--m-line);background:#fff;border-radius:6px;padding:8px}.trace-demo .mock-stat strong{display:block;font-size:14px}.trace-demo .mock-stat span{color:var(--m-muted);font-size:8px}
    .trace-demo .mini-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-items:center}.trace-demo .mini-step{position:relative;border:1px solid var(--m-line);background:#fff;border-radius:6px;padding:10px;text-align:center;font-size:9px;font-weight:700}.trace-demo .mini-step:not(:last-child):after{content:"→";position:absolute;right:-9px;top:50%;transform:translate(50%,-50%);color:var(--m-muted)}
    .trace-demo .api-screen{background:#0B1627;color:#D9E5F2;border-radius:8px;padding:16px;font-family:"IBM Plex Mono",Consolas,monospace;font-size:11px;line-height:1.65;min-height:400px;box-shadow:0 12px 34px rgba(12,36,69,.18);opacity:0}.trace-demo .api-screen .cmd{color:#72D6C9}.trace-demo .api-screen .key{color:#9ECDF0}.trace-demo .api-screen .ok{color:#83D5A5}.trace-demo .api-screen .warn{color:#F3CB72}.trace-demo .api-screen .comment{color:#7F95AC}
    .trace-demo .api-catalog{display:grid;gap:12px}.trace-demo .api-call{background:#0B1627;color:#D9E5F2;border-radius:12px;padding:14px;box-shadow:0 12px 34px rgba(12,36,69,.18)}.trace-demo .api-call h4{font-family:"IBM Plex Sans","Segoe UI",sans-serif;margin:0 0 5px;color:#fff;font-size:13px}.trace-demo .api-call>p{font-family:"IBM Plex Sans","Segoe UI",sans-serif;margin:0 0 10px;color:#9EB2C5;font-size:11px}.trace-demo .api-route{font-family:"IBM Plex Mono",Consolas,monospace;color:#72D6C9;font-weight:700;margin-bottom:9px;word-break:break-all}.trace-demo .api-call pre{margin:0;white-space:pre-wrap;word-break:break-word;font:11px/1.55 "IBM Plex Mono",Consolas,monospace;color:#D9E5F2}.trace-demo .api-call .api-response{margin-top:9px;padding-top:9px;border-top:1px solid #283C53;color:#83D5A5;font:10px/1.45 "IBM Plex Mono",Consolas,monospace}.trace-demo .api-docs{margin-top:12px;border-top:1px solid #283C53}.trace-demo .api-docs summary{min-height:44px;display:flex;align-items:center;gap:8px;color:#9ECDF0;font:700 11px "IBM Plex Sans","Segoe UI",sans-serif;cursor:pointer;list-style:none}.trace-demo .api-docs summary::-webkit-details-marker{display:none}.trace-demo .api-docs summary:before{content:"+";width:22px;height:22px;border-radius:7px;background:#182A40;color:#72D6C9;display:grid;place-items:center;font:700 15px "IBM Plex Mono",monospace;box-shadow:inset 1px 1px rgba(255,255,255,.06)}.trace-demo .api-docs[open] summary:before{content:"−"}.trace-demo .api-doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 0 4px}.trace-demo .api-doc-section{background:#111F32;border:1px solid #263A51;border-radius:9px;padding:10px;min-width:0}.trace-demo .api-doc-section strong{display:block;color:#72D6C9;font:700 10px "IBM Plex Sans","Segoe UI",sans-serif;text-transform:uppercase;letter-spacing:.055em;margin-bottom:4px}.trace-demo .api-doc-section p{margin:0;color:#C0CFDC;font:11px/1.48 "IBM Plex Sans","Segoe UI",sans-serif}.trace-demo .api-doc-note{grid-column:1/-1;color:#8198AB;font:10px/1.45 "IBM Plex Sans","Segoe UI",sans-serif;padding:2px 2px 0}
    .trace-demo .journey-player{position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:18px;background:rgba(221,235,240,.16);backdrop-filter:blur(20px) saturate(145%);-webkit-backdrop-filter:blur(20px) saturate(145%);opacity:0;visibility:hidden;transition:opacity .22s ease;isolation:isolate}
    .trace-demo .journey-player:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 12% 8%,rgba(255,255,255,.34),transparent 32%),radial-gradient(circle at 88% 84%,rgba(75,166,157,.13),transparent 38%),linear-gradient(135deg,rgba(255,255,255,.08),rgba(14,44,76,.05));pointer-events:none}.trace-demo .journey-player.open{opacity:1;visibility:visible}
    .trace-demo .journey-panel{width:min(1240px,97vw);max-height:96vh;overflow:auto;border:1px solid rgba(255,255,255,.52);border-radius:var(--r-l);background:rgba(233,239,243,.95);box-shadow:26px 30px 68px rgba(32,55,72,.36),inset 2px 2px 2px rgba(255,255,255,.86),inset -2px -2px 3px rgba(75,94,108,.14);transform:translateY(14px) scale(.98);transition:transform .25s cubic-bezier(.2,.8,.2,1)}.trace-demo .journey-player.open .journey-panel{transform:none}
    .trace-demo .journey-head{position:sticky;top:0;z-index:8;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:16px 18px 13px;background:rgba(233,239,243,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 8px 18px rgba(72,91,106,.10),inset 0 1px rgba(255,255,255,.66)}.trace-demo .journey-eyebrow{color:var(--accent-ink);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.trace-demo .journey-head h2{margin:3px 0 3px;font-size:20px}.trace-demo .journey-head p{margin:0;color:var(--muted);font-size:12px}.trace-demo .journey-exit{width:42px;height:42px;border:0;border-radius:50%;background:#E9EFF3;color:var(--ink);font-size:24px;cursor:pointer;box-shadow:var(--shadow)}
    .trace-demo .journey-progress{grid-column:1/-1;height:7px;border-radius:999px;background:#D5E0E6;box-shadow:inset 2px 2px 5px rgba(91,111,126,.22),inset -2px -2px 5px rgba(255,255,255,.82);overflow:hidden}.trace-demo .journey-progress-bar{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--accent),#337B86);transition:width .35s ease}
    .trace-demo .journey-body{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:16px;padding:16px 18px}.trace-demo .journey-stage{position:relative;min-width:0;min-height:570px;padding:16px;border-radius:var(--r-m);background-color:#E9EFF3;background-image:radial-gradient(rgba(82,112,134,.17) 1px,transparent 1px);background-size:18px 18px;box-shadow:var(--shadow-inset);overflow:hidden}.trace-demo .journey-stage .mock-app{min-height:536px}.trace-demo .journey-stage .mock-input{transition:box-shadow .18s ease,background .18s ease,color .18s ease}.trace-demo .journey-stage .mock-input.demo-typing{background:#F7FFFF;box-shadow:0 0 0 2px rgba(86,187,175,.38),0 5px 14px rgba(12,36,69,.10)}.trace-demo .journey-stage .demo-reveal{opacity:0;transform:translateY(7px);transition:opacity .28s ease,transform .28s ease}.trace-demo .journey-stage .demo-reveal.shown{opacity:1;transform:none}.trace-demo .journey-stage .mock-button.demo-click{animation:demo-click .48s ease;box-shadow:inset 3px 3px 7px rgba(20,65,70,.26),inset -2px -2px 5px rgba(255,255,255,.25)}
    .trace-demo .demo-cursor{position:absolute;z-index:12;left:0;top:0;width:24px;height:30px;background:#0C2445;clip-path:polygon(0 0,100% 68%,61% 73%,82% 100%,64% 100%,45% 77%,20% 100%);filter:drop-shadow(0 3px 3px rgba(0,0,0,.28));transform:translate(24px,24px);transition:transform .72s cubic-bezier(.2,.72,.2,1),opacity .18s ease;opacity:0;pointer-events:none}.trace-demo .demo-cursor.visible{opacity:1}.trace-demo .demo-cursor.clicking{animation:cursor-tap .42s ease}
    @keyframes cursor-tap{0%,100%{scale:1}45%{scale:.76}}@keyframes demo-click{0%,100%{filter:none}45%{filter:brightness(1.16)}}
    .trace-demo .journey-notes{display:grid;align-content:start;gap:10px}.trace-demo .journey-note{border-radius:var(--r-s);padding:12px;background:#E9EFF3;box-shadow:var(--shadow)}.trace-demo .journey-note strong{display:block;color:var(--ink);font-size:11px;margin-bottom:5px}.trace-demo .journey-note p{margin:0;color:var(--muted);font-size:11px;line-height:1.48}.trace-demo .journey-note.live{border-left:3px solid var(--accent);background:#F5FAFA}.trace-demo .journey-note.live p{color:#36566D}.trace-demo .journey-role{display:inline-flex;margin-top:8px;padding:4px 7px;border-radius:6px;background:var(--accent-tint);color:var(--accent-ink);font-size:9px;font-weight:800}
    .trace-demo .journey-controls{position:sticky;bottom:0;z-index:8;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:12px 18px 15px;background:rgba(233,239,243,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 -8px 18px rgba(72,91,106,.09)}.trace-demo .journey-control{min-height:40px;border:0;border-radius:11px;padding:9px 14px;background:#E9EFF3;color:var(--ink);font-weight:750;cursor:pointer;box-shadow:var(--shadow)}.trace-demo .journey-control:active{box-shadow:var(--shadow-inset)}.trace-demo .journey-control.primary{background:var(--accent);color:#0C2445}.trace-demo .journey-control[disabled]{opacity:.42;cursor:not-allowed}.trace-demo .journey-status{min-width:130px;text-align:center;color:var(--muted);font-size:11px;font-weight:700}.trace-demo .journey-speed{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:10px}.trace-demo .journey-speed select{min-height:38px;border:0;border-radius:10px;background:#E9EFF3;color:var(--ink);padding:0 9px;box-shadow:var(--shadow-inset)}
    @media (max-width:900px){.trace-demo .top-note{display:none}.trace-demo .legend{margin-left:0;width:100%}.trace-demo .canvas-shell{height:calc(100vh - 215px);min-height:520px}.trace-demo .modal-body{grid-template-columns:1fr}.trace-demo .annotations{grid-template-columns:1fr 1fr}.trace-demo .mock-app{grid-template-columns:120px 1fr}.trace-demo .mock-side{padding:10px 8px}.trace-demo .modal{padding:10px}.trace-demo .modal-panel{max-height:96vh}.trace-demo .journey-body{grid-template-columns:1fr}.trace-demo .journey-notes{grid-template-columns:1fr 1fr}.trace-demo .journey-stage{min-height:530px}.trace-demo .journey-stage .mock-app{min-height:500px}}
    @media (max-width:620px){.trace-demo .topbar,.trace-demo .toolbar{padding-left:12px;padding-right:12px}.trace-demo .brand p{display:none}.trace-demo .field{min-width:145px;flex:1}.trace-demo .main{padding:8px}.trace-demo .canvas-shell{height:calc(100vh - 215px);border-radius:10px}.trace-demo .scenario-note{max-width:245px}.trace-demo .canvas-help{display:none}.trace-demo .mock-app{grid-template-columns:1fr}.trace-demo .mock-side{display:none}.trace-demo .mock-grid,.trace-demo .mock-form{grid-template-columns:1fr}.trace-demo .mock-field.wide,.trace-demo .mock-section{grid-column:1}.trace-demo .mock-summary{grid-template-columns:1fr 1fr}.trace-demo .annotations{grid-template-columns:1fr}.trace-demo .screen-wrap{padding:8px}.trace-demo .modal-header,.trace-demo .modal-body{padding:12px}.trace-demo .api-doc-grid{grid-template-columns:1fr}.trace-demo .api-doc-note{grid-column:1}.trace-demo .journey-player{padding:7px}.trace-demo .journey-panel{max-height:98vh}.trace-demo .journey-head{padding:12px}.trace-demo .journey-body{padding:10px}.trace-demo .journey-stage{padding:8px;min-height:455px}.trace-demo .journey-stage .mock-app{min-height:435px}.trace-demo .journey-notes{grid-template-columns:1fr}.trace-demo .journey-note:not(.live){display:none}.trace-demo .journey-controls{padding:10px}.trace-demo .journey-status{order:-1;width:100%}}
    @media (prefers-reduced-motion:reduce){.trace-demo,.trace-demo *,.trace-demo *:before,.trace-demo *:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}


/* ---- MyRISK overlay. Everything above is the dev team's, scoped. ---- */

/* The demo owns a full viewport in its original form. On the site it is a
   component in a page that already has a header and a footer, so the shell's
   100vh becomes a bounded height instead. */
.trace-demo{border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(25,49,73,.14)}
.trace-demo .shell{min-height:0}
.trace-demo .canvas-shell{height:min(72vh,720px)}

/* The patent notice, top right, in the heading's typeface as instructed.
   Sized below the 20px heading so the two read as a pair rather than compete. */
.trace-demo .patent-note{font-family:Archivo,"Segoe UI",sans-serif;font-size:15px;
  font-weight:650;letter-spacing:-.02em;color:var(--navy-deep);white-space:nowrap}
@media (max-width:620px){.trace-demo .patent-note{font-size:13px;white-space:normal}}

/* The illustrative statement, in page text where a screenshot keeps it. */
.trace-demo .demo-qualifier{margin:0;padding:12px 24px 0;font-size:12.5px;line-height:1.5;
  color:var(--muted);max-width:none}
.trace-demo .demo-qualifier b{color:var(--ink);font-weight:600}

/* THE NOTICE MUST NOT VANISH ON A PHONE, and the dev team's stylesheet hides this
   element entirely below 900px -- reasonably, because what lived here was a
   throwaway status label. A legal notice is not that. Below 900px the topbar is
   allowed to wrap and the note drops onto its own full-width line directly under
   the heading, which puts it ABOVE the canvas rather than beside it. One element,
   one string: top right on a desktop, above the workflow on a phone, never two
   copies to keep in step. */
@media (max-width:900px){
  .trace-demo .topbar{flex-wrap:wrap}
  .trace-demo .top-note{display:flex;width:100%;text-align:left;margin-top:2px}
  .trace-demo .patent-note{white-space:normal}
}

/* At narrow widths the dev team's rule gives each toolbar field min-width:145px
   and flex:1, so two selects share the row and both clip their labels -- measured
   at a 489px viewport, the narrowest headless Chrome will report. Full width
   each, below their own 620px breakpoint. Their file is not edited; this is ours. */
@media (max-width:620px){
  .trace-demo .toolbar .field{min-width:100%;flex:1 0 100%}
  .trace-demo .toolbar select{width:100%}
}

/* The API tab's locked state. The tab is hidden entirely when no layer is
   loaded -- this styles the request-access panel shown in its place. */
.trace-demo .api-locked{padding:18px;border-radius:var(--r-m);background:var(--canvas);
  box-shadow:var(--shadow-inset);font-size:13px;line-height:1.55;color:var(--ink)}
.trace-demo .api-locked h4{margin:0 0 .5rem;font-size:14px}
.trace-demo .api-locked p{margin:0 0 .6rem}