/* Bower brand tokens, mirrored from bower-mobile-app/global.css
   (Parchment / Charcoal neutrals, Twilight accent, Twilight → Sunset gradient). */
@font-face{font-family:Suisse;src:url('./assets/SuisseIntl-Regular.ttf');font-weight:400;font-display:swap}
@font-face{font-family:Suisse;src:url('./assets/SuisseIntl-Semibold.ttf');font-weight:600;font-display:swap}
@font-face{font-family:GT;src:url('./assets/GT-Ultra-Median-Regular.ttf');font-display:swap}

:root{
  color-scheme:light;
  --background:#f0eee9;--foreground:#212721;
  --surface:#ffffff;--surface-secondary:#e8e6e0;--surface-tertiary:#dfddd6;
  --muted:#565b56;--subtle:#8a8d88;
  --accent:#5c88da;--accent-foreground:#ffffff;--accent-soft:#5c88da1f;
  --gradient-from:#5c88da;--gradient-to:#ffae62;
  --border:#dbdcdb;--separator:#e4e5e4;
  --backdrop:rgba(33,39,33,.4);
  --shadow:0 1px 2px rgba(33,39,33,.04),0 8px 24px rgba(33,39,33,.05);
  --radius:20px;
  --blob-a:#5c88da;--blob-b:#ffae62;--blob-opacity:.22;
  --glass:rgba(255,255,255,.62);--glass-strong:rgba(255,255,255,.82);--glass-border:rgba(255,255,255,.75);--glass-chip:rgba(33,39,33,.06);
}
@media (prefers-color-scheme:dark){:root{
  color-scheme:dark;
  --background:#111411;--foreground:#f0eee9;
  --surface:#1c211c;--surface-secondary:#212721;--surface-tertiary:#2a2f2a;
  --muted:#909390;--subtle:#6c706c;
  --accent:#83a5e3;--accent-foreground:#111411;--accent-soft:#83a5e326;
  --gradient-from:#83a5e3;
  --border:#333833;--separator:#2a2f2a;
  --backdrop:rgba(0,0,0,.55);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  --blob-opacity:.16;
  --glass:rgba(28,33,28,.6);--glass-strong:rgba(28,33,28,.82);--glass-border:rgba(240,238,233,.12);--glass-chip:rgba(240,238,233,.08);
}}

*{box-sizing:border-box}
body{min-height:100vh;min-height:100dvh}
body{margin:0;background:var(--background);color:var(--foreground);font-family:Suisse,-apple-system,Helvetica,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:12px}
.label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* Header */
header{display:flex;align-items:center;justify-content:space-between;padding:22px clamp(16px,4vw,48px);position:relative;z-index:5}
.brand{display:block;line-height:0}
.brand img{height:30px;width:auto}
.brand .logo-light{display:none}
@media (prefers-color-scheme:dark){.brand .logo-dark{display:none}.brand .logo-light{display:block}}
.segment{position:relative;display:flex;gap:2px;padding:4px;border-radius:999px;background:var(--surface);box-shadow:var(--shadow)}
.segment a{position:relative;z-index:1;padding:8px 16px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;transition:color .3s}
.segment a:hover{color:var(--foreground)}
.segment a[aria-current=page]{color:var(--background)}
.segment .thumb{position:absolute;top:4px;bottom:4px;left:4px;width:0;border-radius:999px;background:var(--foreground)}
.segment.ready .thumb{transition:transform .45s cubic-bezier(.3,.8,.2,1),width .45s cubic-bezier(.3,.8,.2,1)}

/* Section change: current content fades out (.switching), then newly shown content animates in, staggered */
@keyframes section-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes section-out{to{opacity:0;transform:translateY(-8px)}}
.intro,.panel-head,.feature,.protocol,.live-top,.bubble,.carousel,.viewer-tools{animation:section-in .5s cubic-bezier(.2,.8,.2,1) both}
.bubble{animation-delay:.06s}.carousel{animation-delay:.12s}.protocol{animation-delay:.06s}
.feature:nth-child(2){animation-delay:.04s}.feature:nth-child(3){animation-delay:.08s}.feature:nth-child(4){animation-delay:.12s}.feature:nth-child(5){animation-delay:.16s}
body.switching :is(.intro,.panel,.live,.viewer-tools){animation:section-out .18s ease forwards}

/* Sections: elements tagged data-show only appear in their section */
body:not([data-section=protocols]) [data-show=protocols],body[data-section=protocols] [data-show=glasses]{display:none!important}
body[data-section=protocols] #hotspots{display:none}

/* Layout */
main{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:0 clamp(16px,3vw,40px);padding:0 clamp(16px,4vw,48px) 24px}

/* Stage: headline + 3D viewer */
.stage{position:relative;min-height:560px;display:flex;flex-direction:column}
.intro{position:relative;z-index:2;pointer-events:none;padding-top:clamp(8px,3vh,32px);max-width:560px}
.intro .label{color:var(--accent)}
h1{font-family:GT,Georgia,serif;font-weight:400;font-size:clamp(40px,5vw,68px);line-height:1.02;letter-spacing:-.02em;margin:10px 0 14px}
.intro p{margin:0;color:var(--muted);font-size:16px;max-width:420px}

.viewer{position:relative;flex:1;min-height:360px;margin-top:-40px}
/* Full-window 3D layer beneath the UI. The UI layer ignores pointers except on its controls, so drags anywhere else reach the canvas. */
#canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;touch-action:none;cursor:grab;display:block}
header,main,footer{position:relative;z-index:2;pointer-events:none}
header a,footer a,.feature,.viewer-tools>button,#hotspots .hotspot,.protocol,.carousel,.bubble,.glass-pill{pointer-events:auto}
#canvas:active{cursor:grabbing}

/* Ambient brand shapes — a CSS nod to the app's ambient-shapes background; fixed behind the whole page */
.ambient{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.ambient i{position:absolute;border-radius:50%;filter:blur(90px);opacity:var(--blob-opacity);animation:drift 20s ease-in-out infinite alternate}
.ambient i:nth-child(1){width:60vmax;aspect-ratio:1;left:-8vmax;top:18vh;background:var(--blob-a)}
.ambient i:nth-child(2){width:44vmax;aspect-ratio:1;left:30vw;top:48vh;background:var(--blob-b);animation-duration:24s;animation-delay:-6s}
.ambient i:nth-child(3){width:40vmax;aspect-ratio:1;right:-10vmax;top:-12vh;background:var(--blob-a);opacity:calc(var(--blob-opacity)*.7);animation-duration:28s;animation-delay:-11s}
.ambient i:nth-child(4){width:34vmax;aspect-ratio:1;right:-6vmax;bottom:-14vh;background:var(--blob-b);opacity:calc(var(--blob-opacity)*.8);animation-duration:26s;animation-delay:-3s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(4vw,-3vh) scale(1.1)}}

.viewer-tools{position:absolute;left:0;bottom:4px;display:flex;align-items:center;gap:8px;z-index:3;flex-wrap:wrap;max-width:100%}
.icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--surface);box-shadow:var(--shadow);color:var(--foreground);transition:background .2s,color .2s}
.icon-btn svg{width:18px;height:18px}
.icon-btn:hover{background:var(--surface-secondary)}
.icon-btn[aria-pressed=true]{background:var(--accent);color:var(--accent-foreground)}
.hint{font-size:13px;color:var(--subtle);margin-left:6px}

#hotspots{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.hotspot{position:absolute;pointer-events:auto;width:22px;height:22px;border-radius:50%;background:var(--surface);box-shadow:0 0 0 6px var(--accent-soft),var(--shadow);transform:translate(-50%,-50%);transition:transform .2s}
.hotspot::after{content:'';position:absolute;inset:6px;border-radius:50%;background:var(--accent)}
.hotspot:hover{transform:translate(-50%,-50%) scale(1.12)}
.hotspot.active{box-shadow:0 0 0 8px var(--accent-soft),var(--shadow)}
.hotspot.active::after{inset:4px;background:linear-gradient(135deg,var(--gradient-from) 55%,var(--gradient-to))}
.hotspot.active::before{content:'';position:absolute;inset:-8px;border-radius:50%;border:1.5px solid var(--accent);opacity:0;animation:ping 2s ease-out infinite}
@keyframes ping{0%{transform:scale(.7);opacity:.7}100%{transform:scale(1.6);opacity:0}}

#loading{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;color:var(--muted)}#loading[hidden]{display:none}
#toast{position:absolute;top:18%;left:50%;transform:translate(-50%,6px);background:var(--foreground);color:var(--background);border-radius:999px;padding:10px 18px;font-size:13px;font-weight:600;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;white-space:nowrap;z-index:4;display:flex;align-items:center;gap:8px}
#toast::before{content:'';width:7px;height:7px;border-radius:50%;background:#4fcb94}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* Feature panel */
aside{display:flex;flex-direction:column;gap:14px;padding:clamp(8px,3vh,32px) 0 8px;min-height:0}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;padding:0 4px}
#features{display:flex;flex-direction:column;gap:10px}
.feature{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);transition:box-shadow .25s}
.feature-head{width:100%;display:flex;align-items:center;gap:14px;padding:14px 16px;text-align:left;border-radius:var(--radius)}
.feature-icon{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--surface-secondary);color:var(--accent);transition:background .25s,color .25s}
.feature-icon svg{width:20px;height:20px}
.feature-text{flex:1;min-width:0}
.feature-title{display:block;font-weight:600;font-size:16px;line-height:1.3}
.feature-sub{display:block;color:var(--muted);font-size:13px;margin-top:1px}
.chev{flex:none;width:16px;height:16px;color:var(--subtle);transition:transform .25s}
.feature.active .chev{transform:rotate(90deg)}
.feature.active .feature-icon{background:linear-gradient(135deg,var(--gradient-from) 55%,var(--gradient-to));color:#fff}
.feature-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.feature.active .feature-body{grid-template-rows:1fr}
.feature-body>div{overflow:hidden}
.feature-inner{padding:0 16px 16px 74px}
.feature-inner p{margin:0 0 12px;color:var(--muted);font-size:14px;line-height:1.55}
.how{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0;list-style:none}
.how li{font-size:12px;font-weight:600;padding:6px 10px;border-radius:999px;background:var(--surface-secondary);color:var(--foreground)}
.how li b{color:var(--accent);font-weight:600}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{height:40px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:8px;transition:filter .2s,background .2s}
.btn.primary{color:#fff;background-image:linear-gradient(to bottom right,var(--gradient-from) 0%,var(--gradient-from) 55%,var(--gradient-to) 100%)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.secondary{background:var(--surface-secondary)}
.btn.secondary:hover{background:var(--surface-tertiary)}
.btn[aria-pressed=true]{background:var(--foreground);color:var(--background)}

/* Live protocol overlay — frosted cards over the 3D stage, after the app's Live run screen */
.live{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-top:56px;pointer-events:none;z-index:3}
.live-top{display:flex;gap:8px}
.glass-pill{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.glass-pill svg{width:15px;height:15px;color:var(--muted)}
.live-dot{width:8px;height:8px;border-radius:50%;background:#1f9d6b;box-shadow:0 0 0 0 #1f9d6b80;animation:live 2s ease-out infinite}
@keyframes live{70%{box-shadow:0 0 0 7px #1f9d6b00}100%{box-shadow:0 0 0 0 #1f9d6b00}}
.bubble{max-width:560px;padding:14px 18px;border-radius:22px;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:var(--shadow)}
.bubble-label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.bubble p{margin:4px 0 0;font-size:15px;line-height:1.5;transition:opacity .25s}
.bubble p.fading{opacity:0}

.carousel{margin-top:auto;align-self:stretch;display:flex;align-items:flex-end;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:28px 18% 10px;scrollbar-width:none;cursor:grab;overscroll-behavior-x:contain;
  /* Run past the stage column (to the window edge on the left, into the column gap on the right) and fade out instead of cutting cards off */
  margin-left:calc(-1*clamp(16px,4vw,48px));margin-right:calc(-1*clamp(16px,3vw,40px));
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.carousel::-webkit-scrollbar{display:none}
.carousel.dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}
.step-card{flex:0 0 min(100%,340px);scroll-snap-align:center;padding:16px 18px 18px;border-radius:24px;background:var(--glass-strong);border:1px solid var(--glass-border);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);box-shadow:var(--shadow);transform:scale(calc(1 - .06*var(--d,0)));opacity:calc(1 - .45*var(--d,0));transition:border-color .25s}
.step-card.active{border-color:var(--accent)}
.step-caption{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.step-caption svg{width:13px;height:13px;flex:none}
.step-card.active .step-caption{color:var(--accent)}
.step-card.done .step-caption{color:#1f9d6b}
.step-card h4{margin:6px 0 4px;font-size:17px;font-weight:600;line-height:1.3}
/* Collapsed: two lines, fading out if the text runs longer. Open: JS sets max-height to the full text height so it animates. */
.step-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.5;max-height:42px;overflow:hidden;transition:max-height .3s ease}
.step-card p.clamped{-webkit-mask-image:linear-gradient(#000 50%,transparent);mask-image:linear-gradient(#000 50%,transparent)}
.step-card.open p{-webkit-mask-image:none;mask-image:none}
.step-card .more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.step-card.open .more{grid-template-rows:1fr}
.step-card .more>div{overflow:hidden;min-height:0}
.step-card .materials{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:10px 0 0;list-style:none}
.materials li{font-size:12px;font-weight:600;padding:6px 10px;border-radius:999px;background:var(--glass-chip)}
.step-actions{display:flex;gap:8px;margin-top:14px}
.chip-btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;white-space:nowrap;border-radius:999px;font-size:13px;font-weight:600;background:var(--glass-chip);transition:background .2s}
.chip-btn:hover{background:var(--surface-tertiary)}
.chip-btn svg{width:15px;height:15px}
.chip-btn.primary{color:#fff;background-image:linear-gradient(to bottom right,var(--gradient-from) 0%,var(--gradient-from) 55%,var(--gradient-to) 100%)}

/* Protocol details panel */
.panel{display:flex;flex-direction:column;gap:14px}
.protocol{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.protocol-head{display:flex;gap:14px;align-items:center}
.protocol-head h2{margin:0;font-size:17px;font-weight:600;line-height:1.3}
.protocol-intro{margin:14px 0 0;font-size:14px;color:var(--muted);line-height:1.55}
body[data-section=protocols] .stage{min-height:700px}
.active-icon{background:linear-gradient(135deg,var(--gradient-from) 55%,var(--gradient-to));color:#fff}
.progress{height:6px;border-radius:999px;background:var(--surface-secondary);margin:18px 0 6px;overflow:hidden}
.progress i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--gradient-from) 55%,var(--gradient-to));transition:width .4s ease}
.progress-label{margin:0;font-size:13px;color:var(--muted)}
.protocol h3{margin:20px 0 10px;font-size:12px}
.run-how{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--muted);line-height:1.5}
.run-how b{color:var(--foreground);font-weight:600}
.protocol .how{margin:0 0 18px}

/* Footer */
footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px clamp(16px,4vw,48px) 20px;font-size:13px;color:var(--subtle)}
.footer-links{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.site{font-size:13px;color:var(--muted);text-decoration:none}
.site:hover{color:var(--foreground)}
.play{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 10px;border-radius:10px;background:var(--surface);box-shadow:var(--shadow);color:var(--foreground);text-decoration:none;transition:background .2s}
.play:hover{background:var(--surface-secondary)}
.play svg{width:17px;height:19px}
.play span{display:flex;flex-direction:column;line-height:1.05;font-size:13px;font-weight:600}
.play small{font-size:9px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}


@media (max-width:980px){
  main{grid-template-columns:1fr}
  .stage{min-height:0}
  .viewer{flex:none;height:min(50vh,380px);margin-top:0}
  body[data-section=protocols] .viewer{height:min(82vh,600px)}
  .live{padding-top:8px}
  .carousel{margin-inline:calc(-1*clamp(16px,4vw,48px));padding-left:12%;padding-right:12%;-webkit-mask-image:none;mask-image:none}
  .intro{padding-top:4px}
  aside{padding-top:8px}
  .feature-inner{padding-left:16px}
  footer{flex-direction:column;align-items:flex-start;gap:12px}
  #canvas{touch-action:pan-y}
}
@media (max-width:480px){
  header{padding-top:16px;padding-bottom:12px}
  .brand img{height:26px}
  .segment a{padding:8px 12px}
  .hint{display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}