:root{
  --bg:#1e1e1e;          /* figma canvas dark */
  --chrome:#2c2c2c;
  --chrome-2:#383838;
  --line:#3a3a3a;
  --panel:#252525;
  --text:#e8e8e8;
  --text-dim:#9a9a9a;
  --text-faint:#6e6e6e;
  --blue:#0d99ff;
  --blue-dim:#0d99ff;
  --frame-bg:#ffffff;
  --grid:#2a2a2a;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
html,body{overscroll-behavior:none}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;
  user-select:none;
}

/* ---------- Toolbar ---------- */
.toolbar{
  position:fixed;top:0;left:0;right:0;height:48px;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(28,28,30,.66);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);
  backdrop-filter:blur(22px) saturate(1.6);
  border-bottom:1px solid rgba(255,255,255,.09);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 8px 30px -12px rgba(0,0,0,.6);
  padding:0 10px;
}
.tb-left{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{display:flex;align-items:center;padding:0 4px;color:var(--text)}
.brand-mark svg{display:block}
.file-meta{min-width:0}
.file-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-name .chev{color:var(--text-faint);font-size:10px;margin-left:2px}
.file-sub{font-size:11px;color:var(--text-faint);white-space:nowrap}

.tb-center{display:flex;gap:4px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);padding:4px;border-radius:10px}
.seg{
  font:inherit;font-size:12px;font-weight:500;color:var(--text-dim);
  background:transparent;border:0;border-radius:6px;padding:5px 12px;cursor:pointer;
  white-space:nowrap;transition:.15s;
}
.seg:hover{color:var(--text);background:var(--chrome-2)}
.seg.active{color:#fff;background:var(--blue)}
.seg-map{color:#cfe9ff}
.seg-map.active{background:rgba(13,153,255,.22);color:#fff}

.tb-right{display:flex;align-items:center;gap:4px}
.icon-btn{
  width:30px;height:30px;border:0;border-radius:6px;background:transparent;
  color:var(--text-dim);font-size:18px;line-height:1;cursor:pointer;transition:.12s;
}
.icon-btn:hover{background:var(--chrome-2);color:#fff}
.zoom-label{
  font:inherit;font-size:12px;font-weight:500;color:var(--text-dim);
  background:transparent;border:0;border-radius:6px;padding:6px 8px;cursor:pointer;min-width:52px;
}
.zoom-label:hover{background:var(--chrome-2);color:#fff}
.present-btn{
  font:inherit;font-size:12px;font-weight:600;color:#fff;background:var(--blue);
  border:0;border-radius:6px;padding:7px 14px;cursor:pointer;margin-left:4px;transition:.12s;
}
.present-btn:hover{filter:brightness(1.08)}

/* ---------- Layers panel ---------- */
.layers{
  position:fixed;top:48px;left:0;bottom:0;width:248px;z-index:40;
  background:rgba(26,26,28,.62);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  backdrop-filter:blur(22px) saturate(1.5);
  border-right:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;transition:transform .22s ease;
}
.layers.hidden{transform:translateX(-100%)}
.layers-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px 10px;font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-faint);border-bottom:1px solid var(--line);
}
.collapse-toggle{background:transparent;border:0;color:var(--text-dim);font-size:15px;cursor:pointer;padding:2px 6px;border-radius:4px}
.collapse-toggle:hover{background:var(--chrome-2);color:#fff}
.layers-body{flex:1;overflow-y:auto;padding:6px 0}
.layers-foot{padding:12px 14px;border-top:1px solid var(--line)}
.brand-foot{font-size:13px;font-weight:600}
.by{font-size:11px;color:var(--text-faint);margin-top:2px}

.layer-group{margin-bottom:2px}
.layer-group-head{
  display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;border-radius:6px;
  margin:0 6px;
}
.layer-group-head:hover{background:var(--chrome-2)}
.lg-caret{font-size:9px;color:var(--text-faint);transition:transform .15s;width:10px}
.layer-group.collapsed .lg-caret{transform:rotate(-90deg)}
.lg-swatch{width:12px;height:12px;border-radius:3px;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset}
.lg-name{font-size:12.5px;font-weight:600}
.layer-children{padding-left:6px}
.layer-group.collapsed .layer-children{display:none}
.layer-item{
  display:flex;align-items:center;gap:8px;padding:6px 12px 6px 30px;margin:0 6px;
  font-size:12px;color:var(--text-dim);cursor:pointer;border-radius:6px;
}
.layer-item:hover{background:var(--chrome-2);color:var(--text)}
.layer-item.active{background:rgba(13,153,255,.16);color:#fff}
.li-icon{width:12px;height:12px;flex:none;opacity:.7}
.li-dim{color:var(--text-faint);font-weight:400}

/* layers reveal tab when hidden */
.layers-reveal{
  position:fixed;top:58px;left:8px;z-index:41;width:28px;height:28px;border-radius:6px;
  background:var(--panel);border:1px solid var(--line);color:var(--text-dim);
  font-size:15px;cursor:pointer;
}
.layers-reveal:hover{color:#fff}

/* ---------- Canvas ---------- */
.viewport{
  position:fixed;top:48px;left:248px;right:0;bottom:0;
  overflow:hidden;cursor:grab;
  background:
    radial-gradient(var(--grid) 1px, transparent 1px);
  background-size:24px 24px;background-color:var(--bg);
  touch-action:none;
}
.viewport.panning{cursor:grabbing}
.viewport.full{left:0}
.canvas{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
.canvas.animate{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.connectors{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}
.frames{position:absolute;top:0;left:0}

/* ---------- Sitemap band (world-space sizes ~2.2x so it reads at fit zoom) ---------- */
.sm-head{position:absolute;display:flex;flex-direction:column;gap:8px}
.sm-kicker{font-size:24px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.sm-title{font-size:74px;font-weight:700;letter-spacing:-.015em;color:#fff;line-height:1.08}
.sm-sub{font-size:29px;line-height:1.4;color:var(--text-dim)}
.sm-node{
  position:absolute;display:flex;align-items:center;gap:20px;padding:0 28px;
  background:linear-gradient(180deg,#2f2f31,#262627);
  border:2px solid rgba(255,255,255,.12);border-radius:22px;
  box-shadow:0 2px 0 rgba(255,255,255,.05) inset,0 26px 56px -34px rgba(0,0,0,.8);
  transition:.14s;
}
.sm-node:hover{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue) inset,0 30px 64px -30px rgba(13,153,255,.5);transform:translateY(-2px)}
.sm-dot{width:16px;height:16px;border-radius:50%;background:var(--text-faint);flex:none}
.sm-label{font-size:29px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-tag{font-size:19px;font-weight:800;letter-spacing:.06em;color:#fff;background:var(--blue);padding:5px 13px;border-radius:11px;margin-left:auto;flex:none}
.sm-tag-goal{background:#0aa46a}
.sm-tag-group{background:#6b5bd1}
.sm-entry{background:linear-gradient(180deg,#16465f,#103445);border-color:rgba(26,188,254,.5)}
.sm-entry .sm-dot{background:#1abcfe}
.sm-goal{background:linear-gradient(180deg,#14463a,#0e3a30);border-color:rgba(10,207,131,.45)}
.sm-goal .sm-dot{background:#0acf83}
.sm-group{background:linear-gradient(180deg,#2a2740,#211f33);border-color:rgba(124,108,224,.4)}
.sm-group .sm-dot{background:#a78bfa}
.sm-group .sm-label{color:var(--text-dim)}
.sm-link{fill:none;stroke:rgba(255,255,255,.22);stroke-width:3.8}
.sm-cta{stroke:rgba(10,207,131,.5);stroke-width:3.4;stroke-dasharray:11 11}
.sm-report{stroke:rgba(245,158,66,.55);stroke-width:3.4;stroke-dasharray:11 11}
.sm-arrow{fill:rgba(255,255,255,.3)}
.sm-arrow-cta{fill:rgba(10,207,131,.6)}
.sm-arrow-report{fill:rgba(245,158,66,.7)}

/* row label / direction header */
.row-label{position:absolute;display:flex;flex-direction:column;gap:10px}
.rl-top{display:flex;align-items:baseline;gap:12px}
.rl-badge{
  font-size:13px;font-weight:800;color:#0d0d0d;background:linear-gradient(180deg,#fff,#d7d7d7);
  width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  align-self:center;box-shadow:0 2px 8px -2px rgba(0,0,0,.6);
}
.rl-name{font-size:30px;font-weight:700;letter-spacing:-.01em}
.rl-tag{font-size:14px;color:var(--text-dim)}
.rl-meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.rl-swatches{display:flex;gap:6px}
.rl-sw{width:22px;height:22px;border-radius:5px;box-shadow:0 0 0 1px rgba(255,255,255,.14) inset}
.rl-type{font-size:12.5px;color:var(--text-faint)}
.rl-type b{color:var(--text-dim);font-weight:600}

/* cell reference badge (A1, B2 …) to the left of each concept frame */
.cell-ref{
  position:absolute;width:46px;height:30px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;letter-spacing:.03em;color:#fff;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  box-shadow:0 2px 10px -3px rgba(0,0,0,.6);
}
.cell-ref::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;
  border-radius:0 3px 3px 0;background:var(--cr,var(--blue));
}

/* frame */
.frame{position:absolute}
.frame-title{
  position:absolute;top:-26px;left:2px;font-size:12.5px;color:var(--text-dim);
  display:flex;align-items:center;gap:7px;white-space:nowrap;
}
.frame-title .ft-ico{width:11px;height:11px;opacity:.6}
.frame-title .ft-dim{color:var(--text-faint);font-size:11px}
.frame-shell{
  position:relative;
  background:var(--frame-bg);border-radius:8px;overflow:hidden;
  box-shadow:0 1px 0 rgba(0,0,0,.4),0 18px 40px -12px rgba(0,0,0,.55);
  outline:1px solid rgba(255,255,255,.06);
}
.frame-shell img{display:block;width:100%;height:auto}
/* live coded screens render inside an iframe; pointer-events off so the canvas keeps panning/zooming */
.frame-shell iframe{display:block;border:0;background:#fff;pointer-events:none}
/* graceful "building" placeholder shown until the real screen loads (or if it 404s) */
.frame-fallback{
  position:absolute;inset:0;z-index:2;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:#f3f2ee;color:#8b8b86;font-size:14px;text-align:center;padding:20px;
}
.frame-fallback.is-hidden{display:none}
.frame-fallback::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.65) 50%,transparent 80%);
  transform:translateX(-100%);animation:ff-shimmer 1.7s linear infinite;
}
@keyframes ff-shimmer{to{transform:translateX(100%)}}
.frame-fallback .ff-mark{color:#c3c2bc}
.frame-fallback .ff-mark svg{width:26px;height:26px}
.frame-fallback .ff-title{font-weight:700;color:#5a5a55;font-size:15px}
.frame-fallback .ff-sub{font-size:12px;color:#a7a7a1;letter-spacing:.02em}
.frame.start .frame-title::after{
  content:"FLOW START";font-size:9px;font-weight:700;letter-spacing:.06em;
  color:#fff;background:var(--blue);padding:2px 6px;border-radius:4px;
}
.frame:hover .frame-shell{outline:2px solid var(--blue)}

/* per-frame structure caption */
.frame-spec{position:absolute;top:calc(100% + 12px);left:0}
.fs-desc{font-size:12px;line-height:1.45;color:var(--text-dim);margin-bottom:7px}
.fs-sections{list-style:none;display:flex;flex-wrap:wrap;gap:4px 5px}
.fs-sections li{
  font-size:10px;color:var(--text-faint);background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);padding:2px 7px;border-radius:11px;white-space:nowrap;
}

/* mobile note (shown only on small screens) */
.mobile-note{
  display:none;position:fixed;top:56px;left:50%;transform:translateX(-50%);z-index:31;
  background:rgba(13,153,255,.16);border:1px solid rgba(13,153,255,.3);
  color:#cfe9ff;font-size:11.5px;font-weight:500;padding:6px 12px;border-radius:20px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);white-space:nowrap;pointer-events:none;
}

/* hint */
.hint{
  position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:30;
  background:rgba(20,20,20,.85);border:1px solid var(--line);backdrop-filter:blur(6px);
  color:var(--text-dim);font-size:12px;padding:8px 14px;border-radius:8px;
  transition:opacity .5s;pointer-events:none;
}
.hint.gone{opacity:0}

/* connectors style */
.conn-path{fill:none;stroke:var(--blue);stroke-width:2.2;opacity:.9}
.conn-path.tabs{stroke:#1abcfe;opacity:.75;stroke-dasharray:2 6;stroke-linecap:round}
.conn-path.report{stroke:#f59e42;stroke-width:2;opacity:.85;stroke-dasharray:8 6}
.conn-dot{fill:var(--blue)}
.conn-arrow{fill:var(--blue)}
.conn-arrow-report{fill:#f59e42}

.frame{position:absolute;cursor:zoom-in}
.frame .frame-open{
  position:absolute;top:6px;right:6px;z-index:3;opacity:0;transform:translateY(-2px);
  background:rgba(20,20,22,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:6px;
  font-size:10px;font-weight:600;letter-spacing:.04em;padding:4px 8px;transition:.16s;
}
.frame:hover .frame-open{opacity:1;transform:none}

/* ---------- Present mode ---------- */
.present{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgba(10,11,12,.78);-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);
}
.present.open{display:flex;flex-direction:column;animation:fadein .25s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.present-bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 16px;flex:none;
  background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.08);
}
.pb-left{display:flex;align-items:center;gap:12px;min-width:0}
.pb-sw{width:14px;height:14px;border-radius:4px;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.18) inset}
.pb-title{font-size:14px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-title .pb-dir{color:var(--text-dim);font-weight:500}
.pb-count{font-size:12px;color:var(--text-dim);background:rgba(255,255,255,.06);padding:4px 10px;border-radius:20px}
.pb-close{
  width:34px;height:34px;border:1px solid rgba(255,255,255,.14);border-radius:8px;
  background:rgba(255,255,255,.05);color:#fff;font-size:18px;cursor:pointer;flex:none;
}
.pb-close:hover{background:rgba(255,255,255,.12)}
.present-stage{flex:1;position:relative;overflow:hidden;display:flex;align-items:flex-start;justify-content:center}
.present-scroll{height:100%;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:16px}
/* live interactive iframe, scaled to fit the stage (scale set inline by JS) */
.pb-frame-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.pb-scaler{position:relative;transform-origin:center center;animation:rise .35s cubic-bezier(.22,.61,.36,1);flex:none}
.pb-scaler iframe{
  display:block;border:0;background:#fff;border-radius:14px;pointer-events:auto;
  box-shadow:0 50px 110px -34px rgba(0,0,0,.85);outline:1px solid rgba(255,255,255,.1);
}
.pb-fallback{border-radius:14px}
.pb-wrap{display:flex;gap:26px;align-items:flex-start;justify-content:center;width:100%;padding:0 24px}
.pb-render{width:min(620px,86vw);min-height:60vh;display:flex;align-items:center;justify-content:center;color:#bbb;font-size:14px;background:rgba(255,255,255,.04);border-radius:10px}
.pb-spec{
  width:248px;flex:none;position:sticky;top:0;color:var(--text-dim);
  animation:rise .45s cubic-bezier(.22,.61,.36,1);
}
.pb-spec-label{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin:0 0 7px}
.pb-spec p{font-size:13px;line-height:1.5;color:var(--text);margin:0 0 20px}
.pb-spec ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.pb-spec li{font-size:12px;color:var(--text-dim);padding-left:16px;position:relative}
.pb-spec li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--blue);opacity:.7}
@media (max-width:920px){ .pb-spec{display:none} .pb-wrap{padding:0} }
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.99)}to{opacity:1;transform:none}}
.present-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);color:#fff;font-size:20px;cursor:pointer;z-index:3;
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.present-nav:hover{background:rgba(255,255,255,.18);transform:translateY(-50%) scale(1.06)}
.present-nav.prev{left:18px}
.present-nav.next{right:18px}
.present-dots{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;gap:7px;padding:8px 12px;border-radius:20px;
  background:rgba(20,20,22,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1);flex-wrap:wrap;max-width:90vw;justify-content:center;
}
.present-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.28);cursor:pointer;transition:.15s}
.present-dot:hover{background:rgba(255,255,255,.55)}
.present-dot.on{background:#fff;width:18px;border-radius:4px}

/* ---------- Minimap (compact, chrome-dark, thin outlines) ---------- */
.minimap{
  position:fixed;right:16px;bottom:16px;z-index:35;
  width:200px;border-radius:10px;overflow:hidden;cursor:pointer;padding:6px;
  background:rgba(44,44,46,.82);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.09);box-shadow:0 14px 40px -16px rgba(0,0,0,.7);
}
.minimap svg{display:block;width:100%;height:auto;max-height:180px}
.mm-frame{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.32);stroke-width:1;vector-effect:non-scaling-stroke}
.mm-sm{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.2);stroke-width:1;vector-effect:non-scaling-stroke}
.mm-view{fill:rgba(13,153,255,.06);stroke:rgba(13,153,255,.75);stroke-width:1.2;vector-effect:non-scaling-stroke}
@media (max-width:760px){ .minimap{display:none} }

/* ---------- Mobile ---------- */
@media (max-width:760px){
  .tb-center{display:none}
  .file-sub{display:none}
  .layers{width:82vw;max-width:300px;box-shadow:0 0 40px rgba(0,0,0,.5)}
  .viewport{left:0}
  .present-btn{padding:7px 11px}
  .file-name{font-size:12px}
  .hint{font-size:11px;max-width:90vw;text-align:center;bottom:10px}
  .mobile-note{display:block}
}