@property --sweep{syntax:"<angle>";inherits:true;initial-value:0deg}

:root{
  /* Colors */
  --color:#ff9500;
  --color-bright:#ffb340;
  --color-dim:#cc7700;
  --color-dark:#8a5200;
  --color-glow:#ff950066;
  --color-glow-subtle:#ff950014;
  --bg:#060503;
  --bg2:#0c0a06;
  --bg3:#12100a;
  --scanline:rgba(0,0,0,0.04);
  --border:#ff950020;
  --dim:#ff950088;
  --portrait-bg:#2f2819;

  /* Glass */
  --glass-bg:rgba(20,16,10,0.65);
  --glass-bg-hover:rgba(25,20,12,0.75);
  --glass-border:rgba(255,149,0,0.18);
  --glass-border-hover:rgba(255,149,0,0.35);
  --glass-blur:24px;
  --glass-blur-strong:40px;
  --glass-highlight:linear-gradient(135deg,rgba(255,179,64,0.07) 0%,transparent 50%);
  --glass-shine:rgba(255,179,64,0.08);
  --glass-shine-hover:rgba(255,179,64,0.12);
  --glass-tint:rgba(255,149,0,0.08);
  --glass-tint-subtle:rgba(255,149,0,0.06);
  --glass-tint-faint:rgba(255,149,0,0.04);
  --glass-glow:0 0 15px rgba(255,149,0,0.08),0 0 30px rgba(255,149,0,0.04);
  --glass-glow-hover:0 0 20px rgba(255,149,0,0.15),0 0 40px rgba(255,149,0,0.06);

  /* Radius */
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:20px;
  --radius-xl:28px;
  --radius-pill:999px;

  /* Typography */
  --font-primary:'Share Tech Mono',monospace;
  --font-display:'Google Sans Code',monospace;
  --type-title-size:32px;
  --type-title-line:40px;
  --type-title-mobile-size:24px;
  --type-title-mobile-line:32px;
  --type-body-size:24px;
  --type-body-line:40px;
  --type-body-mobile-size:20px;
  --type-body-mobile-line:32px;
  --type-label-size:16px;
  --type-label-line:24px;
  --type-caption-size:12px;
  --type-caption-line:16px;

  /* Spacing */
  --space-xs:4px;
  --space-sm:8px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;
  --space-2xl:48px;
  --space-3xl:64px;
  --space-4xl:96px;
  --space-section:192px;

  /* Transitions */
  --transition-fast:.2s ease;
  --transition-standard:.4s ease;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;font-synthesis:none}
body{background:radial-gradient(ellipse 800px 600px at 15% 10%,rgba(255,149,0,0.15),transparent 60%),radial-gradient(ellipse 700px 700px at 85% 50%,rgba(255,120,0,0.10),transparent 60%),radial-gradient(ellipse 600px 500px at 40% 80%,rgba(200,120,0,0.08),transparent 60%),radial-gradient(ellipse 500px 400px at 60% 20%,rgba(255,179,64,0.06),transparent 60%),var(--bg);background-attachment:fixed;color:var(--color);font-family:var(--font-primary);overflow-x:hidden}
body:has(.page-wrap){overflow:hidden}
body::before{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,var(--scanline) 2px,var(--scanline) 4px);pointer-events:none;z-index:9999}
body::after{display:none}
body:has(.page-wrap)::before,body:has([data-theme])::before,body:has(.vn-desktop)::before{display:none}
.subpage-scanlines{position:fixed;inset:0;width:100vw;height:100vh;background:repeating-linear-gradient(0deg,transparent,transparent 2px,var(--scanline) 2px,var(--scanline) 4px);pointer-events:none;z-index:9999}
.page-wrap img,.page-wrap canvas,.page-wrap video,.page-wrap picture,.page-wrap [data-logo],#helium-intro img,#helium-intro canvas,#helium-intro video,#helium-intro picture,#helium-intro [data-logo],.vn-app img:not(.iphone-base):not(.iphone-overlay){position:relative;z-index:10000}
html.boot-pending,html.boot-pending body{overflow:hidden}
html.boot-pending body>*{visibility:hidden}
html.boot-pending::before{content:'';position:fixed;inset:0;z-index:99998;background:radial-gradient(ellipse 800px 600px at 15% 10%,rgba(255,149,0,0.15),transparent 60%),radial-gradient(ellipse 700px 700px at 85% 50%,rgba(255,120,0,0.10),transparent 60%),radial-gradient(ellipse 600px 500px at 40% 80%,rgba(200,120,0,0.08),transparent 60%),radial-gradient(ellipse 500px 400px at 60% 20%,rgba(255,179,64,0.06),transparent 60%),var(--bg);background-attachment:fixed;pointer-events:none}
.ssh-overlay,.ssh-overlay[data-theme]{position:fixed;inset:0;width:100vw;min-height:100vh;min-height:100dvh;box-sizing:border-box;padding:clamp(1rem,4vw,2rem);z-index:99999;background:radial-gradient(ellipse 800px 600px at 15% 10%,rgba(255,149,0,0.15),transparent 60%),radial-gradient(ellipse 700px 700px at 85% 50%,rgba(255,120,0,0.10),transparent 60%),radial-gradient(ellipse 600px 500px at 40% 80%,rgba(200,120,0,0.08),transparent 60%),radial-gradient(ellipse 500px 400px at 60% 20%,rgba(255,179,64,0.06),transparent 60%),var(--bg);background-attachment:fixed;font-family:var(--font-primary);font-size:var(--type-label-size);line-height:var(--type-label-line);color:var(--color);white-space:pre-wrap;text-shadow:0 0 2px var(--color-bright),0 0 8px var(--color),0 0 20px var(--color-glow),0 0 40px var(--color-glow-subtle);overflow:hidden}
.ssh-overlay.fade-out{opacity:0;pointer-events:none}
body.ssh-loading{overflow:hidden}
body.ssh-loading .page-wrap{overflow:hidden!important}
::-webkit-scrollbar{width:6px;background:transparent}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--color-dark);border-radius:var(--radius-pill)}
*{scrollbar-width:thin;scrollbar-color:var(--color-dark) transparent}


/* Headings */
h1{font-size:64px;line-height:72px;letter-spacing:.2em;font-family:var(--font-primary);color:var(--color-bright)}
h2{font-size:40px;line-height:48px;letter-spacing:.1em;font-family:var(--font-primary);color:var(--color-bright)}
h3{font-size:32px;line-height:40px;letter-spacing:.1em;font-family:var(--font-primary);color:var(--color-bright);text-transform:uppercase}
h4{font-size:24px;line-height:32px;letter-spacing:.15em;font-family:var(--font-primary);color:var(--color)}

/* Text Sizes */
.text-display{font-size:64px;line-height:72px}
.text-heading{font-size:40px;line-height:48px}
.text-title{font-size:var(--type-title-size);line-height:var(--type-title-line)}
.text-body{font-size:var(--type-body-size);line-height:var(--type-body-line)}
.text-body+.text-body{margin-top:var(--space-lg)}
.text-label{font-size:var(--type-label-size);line-height:var(--type-label-line)}
.text-caption{font-size:var(--type-caption-size);line-height:var(--type-caption-line)}

/* Text Modifiers */
.text-allcaps{text-transform:uppercase;letter-spacing:.15em}
.text-italic{font-style:italic}
.text-strike{text-decoration:line-through}
.text-link{color:var(--color);text-decoration:underline;text-underline-offset:4px;cursor:pointer;transition:color var(--transition-fast)}
.text-link:hover{color:var(--color-bright)}
.text-quote{border-left:2px solid var(--color-dark);padding-left:var(--space-md);color:var(--color-bright);font-style:italic}

.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-to-content link — hidden until focused via keyboard */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--color-bright);color:var(--color-dark);padding:var(--space-md);z-index:9999;font-family:var(--font-primary);font-size:14px;text-decoration:none;letter-spacing:.05em}
.skip-link:focus{left:var(--space-md);top:var(--space-md)}
.nav a:focus-visible,.mobile-nav a:focus-visible,a.card:focus-visible,.card[data-arrow]:focus-visible,.text-link:focus-visible,.hero-btn:focus-visible,.section-cta:focus-visible{outline:2px solid var(--color-bright);outline-offset:4px;box-shadow:0 0 0 1px var(--bg),0 0 16px var(--color-glow)}
.text-link:focus-visible{color:var(--color-bright)}


/* Tag / Pill */
.tag{font-size:16px;letter-spacing:.15em;padding:8px 16px;border:none;color:var(--color-dim);text-transform:uppercase;transition:all .3s;border-radius:var(--radius-sm);position:relative;overflow:hidden}
.tag::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(var(--light-angle,to bottom right),var(--light-color,var(--color)) 0%,var(--glass-border) 33%,var(--glass-border) 62%,var(--glass-border) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

/* Gradient Line */
.gradient-line{height:1px;background:linear-gradient(90deg,var(--border),transparent)}

/* Cursor */
.cursor{animation:blink 1s step-end infinite;line-height:1}

/* Dither Canvas */
.dither-canvas{image-rendering:pixelated;image-rendering:crisp-edges;width:100%;height:100%;object-fit:contain}

/* Scanline Overlay */
.scanline{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,var(--scanline) 2px,var(--scanline) 4px);pointer-events:none}

/* Image Gallery */
.image-gallery{display:flex;flex-direction:column;gap:var(--space-xl)}
.image-gallery>img{width:100%}

/* Feature List — numbered manifest. Block-centered on page, dim mono prefix
   auto-generated from CSS counter, bright bold heading-size names. */
.feature-list{list-style:none;counter-reset:feature;display:flex;flex-direction:column;gap:var(--space-xl);max-width:560px;margin:0 auto;padding:var(--space-2xl) 0}
.feature-list>li{counter-increment:feature;display:flex;align-items:baseline;gap:var(--space-lg);font-family:var(--font-primary);font-size:40px;line-height:48px;color:var(--color-bright);letter-spacing:.05em;margin:0}
.feature-list>li::before{content:counter(feature,decimal-leading-zero);color:var(--color-dim);font-size:24px;letter-spacing:.2em;flex-shrink:0;min-width:2ch}

/* Image Caption */
.image-caption{text-align:center;color:var(--color-bright);margin-top:var(--space-md);font-size:24px;line-height:40px}

/* Step List / Numbered Steps */
.step-list{display:flex;flex-direction:column;gap:var(--space-4xl)}
.step-row{display:grid;grid-template-columns:120px 1fr;gap:var(--space-xl);align-items:center}
.ascii-number{font-family:'Google Sans Code',monospace;font-size:.55rem;line-height:1.15;color:var(--color-dim);white-space:pre;overflow:visible}

.section-header{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-4xl)}
.section-header::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--light-color,var(--border)),transparent)}
.section-number{font-size:16px;line-height:24px;color:var(--color-dark);letter-spacing:.2em}
.section-title{font-family:var(--font-primary);font-size:32px;letter-spacing:.15em;color:var(--color);text-shadow:0 0 6px var(--color-glow);white-space:nowrap;margin:0}
.section-title.section-subtitle{margin-top:var(--space-4xl);margin-bottom:var(--space-2xl)}

.card{background:linear-gradient(calc(135deg + var(--sweep)),var(--glass-shine) 0%,transparent 50%);border:none;border-radius:var(--radius-md);position:relative;overflow:hidden;transition:all var(--transition-standard);display:flex;flex-direction:column;cursor:default;box-shadow:0 8px 32px rgba(0,0,0,0.4)}
.card[data-arrow],a.card{cursor:pointer}
a.card{text-decoration:none;color:inherit}
.card::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(calc(var(--light-angle,135deg) + var(--sweep)),var(--light-color,var(--color)) 0%,var(--glass-border) 33%,var(--glass-border) 62%,var(--glass-border) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:1}
.card[data-arrow]:not(:hover),.hero-btn:not(:hover){transition:--sweep .6s ease}
.card[data-arrow]:hover .tag::before{background:var(--color-dim)}
.card-body::before{content:'';position:absolute;left:0;right:0;height:40px;background:linear-gradient(180deg,transparent,var(--color-glow-subtle),transparent);top:-10%;pointer-events:none;opacity:0;transition:opacity var(--transition-standard)}
.card[data-arrow]:hover .card-body::before,a.card:hover .card-body::before{opacity:1;animation:scanDown 2s linear infinite}
.card-body{padding:var(--space-md);flex:1;display:flex;flex-direction:column}
.card-title{font-family:var(--font-primary);font-size:24px;line-height:40px;letter-spacing:.1em;margin-bottom:12px;color:var(--color-bright);text-transform:uppercase}
.card-title[data-icon]::after,.card-title[data-icon-before]::before{content:'';display:inline-block;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.card-title[data-icon]::after{width:0.85em;height:0.85em;vertical-align:-0.15em;margin-left:0.3em}
.card-title[data-icon-before]::before{width:32px;height:32px;vertical-align:middle;margin-right:var(--space-sm)}
.card-title[data-icon="lock"]::after{background-color:var(--color-bright);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'%3E%3Cpath d='M 8 4 L 8 12 L 4 12 L 4 13 L 4 28 L 28 28 L 28 12 L 24 12 L 24 4 L 8 4 z M 10 6 L 22 6 L 22 12 L 10 12 L 10 6 z M 6 14 L 26 14 L 26 26 L 6 26 L 6 14 z M 14 17 L 14 21 L 15 21 L 15 23 L 17 23 L 17 21 L 18 21 L 18 17 L 14 17 z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'%3E%3Cpath d='M 8 4 L 8 12 L 4 12 L 4 13 L 4 28 L 28 28 L 28 12 L 24 12 L 24 4 L 8 4 z M 10 6 L 22 6 L 22 12 L 10 12 L 10 6 z M 6 14 L 26 14 L 26 26 L 6 26 L 6 14 z M 14 17 L 14 21 L 15 21 L 15 23 L 17 23 L 17 21 L 18 21 L 18 17 L 14 17 z'/%3E%3C/svg%3E")}
.card-title[data-icon-before="usability"]::before{background-color:var(--color-bright);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'%3E%3Cpath d='M 8 0 L 8 2 L 14 2 L 14 0 L 8 0 z M 14 2 L 14 4 L 16 4 L 16 2 L 14 2 z M 16 4 L 16 9 L 18 9 L 18 4 L 16 4 z M 8 2 L 6 2 L 6 4 L 8 4 L 8 2 z M 6 4 L 4 4 L 4 9 L 6 9 L 6 4 z M 10 4 L 10 6 L 12 6 L 12 4 L 10 4 z M 12 6 L 12 15 L 14 15 L 14 13 L 16 13 L 16 15 L 18 15 L 18 13 L 20 13 L 20 15 L 22 15 L 22 13 L 24 13 L 24 11 L 14 11 L 14 6 L 12 6 z M 24 13 L 24 24 L 26 24 L 26 13 L 24 13 z M 24 24 L 22 24 L 22 27 L 24 27 L 24 24 z M 22 27 L 10 27 L 10 29 L 22 29 L 22 27 z M 10 27 L 10 24 L 8 24 L 8 27 L 10 27 z M 8 24 L 8 15 L 6 15 L 6 24 L 8 24 z M 8 15 L 10 15 L 10 6 L 8 6 L 8 15 z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'%3E%3Cpath d='M 8 0 L 8 2 L 14 2 L 14 0 L 8 0 z M 14 2 L 14 4 L 16 4 L 16 2 L 14 2 z M 16 4 L 16 9 L 18 9 L 18 4 L 16 4 z M 8 2 L 6 2 L 6 4 L 8 4 L 8 2 z M 6 4 L 4 4 L 4 9 L 6 9 L 6 4 z M 10 4 L 10 6 L 12 6 L 12 4 L 10 4 z M 12 6 L 12 15 L 14 15 L 14 13 L 16 13 L 16 15 L 18 15 L 18 13 L 20 13 L 20 15 L 22 15 L 22 13 L 24 13 L 24 11 L 14 11 L 14 6 L 12 6 z M 24 13 L 24 24 L 26 24 L 26 13 L 24 13 z M 24 24 L 22 24 L 22 27 L 24 27 L 24 24 z M 22 27 L 10 27 L 10 29 L 22 29 L 22 27 z M 10 27 L 10 24 L 8 24 L 8 27 L 10 27 z M 8 24 L 8 15 L 6 15 L 6 24 L 8 24 z M 8 15 L 10 15 L 10 6 L 8 6 L 8 15 z'/%3E%3C/svg%3E")}
.card-title[data-icon-before="survey"]::before{background-color:var(--color-bright);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'%3E%3Cpath d='M 11 4 L 11 5 L 6 5 L 6 28 L 26 28 L 26 5 L 21 5 L 21 4 L 11 4 z M 13 6 L 19 6 L 19 8 L 13 8 L 13 6 z M 8 7 L 11 7 L 11 10 L 21 10 L 21 7 L 24 7 L 24 26 L 8 26 L 8 7 z M 19 14 L 19 16 L 21 16 L 21 14 L 19 14 z M 19 16 L 17 16 L 17 18 L 19 18 L 19 16 z M 17 18 L 15 18 L 15 20 L 17 20 L 17 18 z M 15 20 L 13 20 L 13 22 L 15 22 L 15 20 z M 13 20 L 13 18 L 11 18 L 11 20 L 13 20 z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'%3E%3Cpath d='M 11 4 L 11 5 L 6 5 L 6 28 L 26 28 L 26 5 L 21 5 L 21 4 L 11 4 z M 13 6 L 19 6 L 19 8 L 13 8 L 13 6 z M 8 7 L 11 7 L 11 10 L 21 10 L 21 7 L 24 7 L 24 26 L 8 26 L 8 7 z M 19 14 L 19 16 L 21 16 L 21 14 L 19 14 z M 19 16 L 17 16 L 17 18 L 19 18 L 19 16 z M 17 18 L 15 18 L 15 20 L 17 20 L 17 18 z M 15 20 L 13 20 L 13 22 L 15 22 L 15 20 z M 13 20 L 13 18 L 11 18 L 11 20 L 13 20 z'/%3E%3C/svg%3E")}
.card-title[data-icon-before="analytics"]::before{background-color:var(--color-bright);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'%3E%3Cpath d='M 6 5 L 6 7 L 26 7 L 26 5 L 6 5 z M 4 9 L 4 10 L 4 27 L 28 27 L 28 9 L 4 9 z M 6 11 L 26 11 L 26 25 L 6 25 L 6 11 z M 13 13 L 13 15 L 13 22 L 13 23 L 15 23 L 15 21 L 17 21 L 17 19 L 19 19 L 19 17 L 17 17 L 17 15 L 15 15 L 15 14 L 15 13 L 13 13 z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'%3E%3Cpath d='M 6 5 L 6 7 L 26 7 L 26 5 L 6 5 z M 4 9 L 4 10 L 4 27 L 28 27 L 28 9 L 4 9 z M 6 11 L 26 11 L 26 25 L 6 25 L 6 11 z M 13 13 L 13 15 L 13 22 L 13 23 L 15 23 L 15 21 L 17 21 L 17 19 L 19 19 L 19 17 L 17 17 L 17 15 L 15 15 L 15 14 L 15 13 L 13 13 z'/%3E%3C/svg%3E")}
.card-title[data-icon-before="support"]::before{background-color:var(--color-bright);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'%3E%3Cpath d='M 4 4 L 4 27 L 6 27 L 6 6 L 26 6 L 26 22 L 10 22 L 10 24 L 28 24 L 28 4 L 4 4 z M 10 24 L 8 24 L 8 27 L 10 27 L 10 24 z M 8 27 L 6 27 L 6 29 L 8 29 L 8 27 z M 13 8 L 13 10 L 18 10 L 18 13 L 15 13 L 15 16 L 17 16 L 17 15 L 20 15 L 20 8 L 13 8 z M 15 18 L 15 20 L 17 20 L 17 18 L 15 18 z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'%3E%3Cpath d='M 4 4 L 4 27 L 6 27 L 6 6 L 26 6 L 26 22 L 10 22 L 10 24 L 28 24 L 28 4 L 4 4 z M 10 24 L 8 24 L 8 27 L 10 27 L 10 24 z M 8 27 L 6 27 L 6 29 L 8 29 L 8 27 z M 13 8 L 13 10 L 18 10 L 18 13 L 15 13 L 15 16 L 17 16 L 17 15 L 20 15 L 20 8 L 13 8 z M 15 18 L 15 20 L 17 20 L 17 18 L 15 18 z'/%3E%3C/svg%3E")}
.card-visual{display:flex;align-items:center;justify-content:center;padding:var(--space-md);background:transparent;border-bottom:none;height:200px;position:relative}
.card-visual::after{content:'';position:absolute;bottom:0;left:1px;right:1px;height:1px;background:linear-gradient(calc(90deg + var(--sweep,0deg)),var(--light-color,var(--color)),var(--glass-border) 50%,var(--glass-border))}
.card-visual[data-padding="tight"]{padding:8px 12px}
.card-visual[data-padding="none"]{padding:0}
.card-visual[data-overflow="hidden"]{overflow:hidden}
.card-visual[data-overlay]{position:relative}
.card-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-primary);text-align:center;pointer-events:none;color:var(--color);display:flex;flex-direction:column;align-items:center}
.card-overlay-label{font-size:12px}
.card-overlay-value{font-size:28px}
.card-tags{display:flex;flex-wrap:wrap;gap:var(--space-sm);align-items:center;margin-top:auto}
.card[data-arrow]:hover .tag,a.card:hover .tag{border-color:var(--color-dim);color:var(--color)}
.card[data-arrow]::after{content:'';position:absolute;bottom:var(--space-md);right:var(--space-md);width:24px;height:24px;background-color:var(--color-dark);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'%3E%3Cpath d='M 21.1875 9.28125 L 19.78125 10.71875 L 24.0625 15 L 4 15 L 4 17 L 24.0625 17 L 19.78125 21.28125 L 21.1875 22.71875 L 27.90625 16 Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'%3E%3Cpath d='M 21.1875 9.28125 L 19.78125 10.71875 L 24.0625 15 L 4 15 L 4 17 L 24.0625 17 L 19.78125 21.28125 L 21.1875 22.71875 L 27.90625 16 Z'/%3E%3C/svg%3E");-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transition:all .3s;pointer-events:none}
.card[data-arrow]:hover::after{background-color:var(--color-bright);transform:translateX(4px)}

/* Countdown */
.countdown{text-align:center;font-family:var(--font-primary);color:var(--color)}
.countdown-label{font-size:24px;letter-spacing:.1em;margin-bottom:8px;border:1px solid var(--glass-border);padding:4px 16px;display:inline-block;border-radius:var(--radius-sm)}
.countdown-grid{display:flex;gap:8px;justify-content:center;margin-bottom:8px}
.countdown-box{display:flex;flex-direction:column;align-items:center;gap:2px}
.countdown-value{font-size:24px;border:none;padding:4px 12px;min-width:44px;text-align:center;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--glass-shine) 0%,transparent 50%)}
.countdown-unit{font-size:12px;color:var(--color-dark);text-transform:uppercase}

.portrait{position:relative;width:80px;align-self:stretch;flex-shrink:0;overflow:hidden;background:var(--portrait-bg);border-radius:var(--radius-sm)}
.portrait-img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.9) contrast(1.1);display:block}
.portrait::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,var(--scanline) 2px,var(--scanline) 4px);pointer-events:none}

.waveform{display:flex;align-items:center;gap:1px;height:56px;margin-bottom:12px;overflow:hidden}
.waveform span{display:block;width:2px;min-width:2px;background:var(--color);border-radius:1px;height:2px;opacity:.3;transition:height .6s ease-in,opacity .6s ease-in}
.waveform.wave-active span{transition:height .4s ease-out,opacity .4s ease-out}
.waveform.wave-active span{height:var(--h);opacity:1;animation:wave 1.8s ease-in-out var(--d) infinite alternate}

.attribution{display:flex;flex-direction:column;gap:0}
.attribution-name{font-size:16px;line-height:24px;letter-spacing:.2em;color:var(--color);text-transform:uppercase}
.attribution-role{font-size:16px;line-height:24px;letter-spacing:.15em;color:var(--color-dark)}

.audiolog-list{display:flex;flex-direction:column;gap:var(--space-4xl)}
.audiolog-entry{padding:0;position:relative;filter:drop-shadow(0 8px 32px rgba(0,0,0,0.4))}
.audiolog-entry::before{content:'';position:absolute;inset:0;background:linear-gradient(var(--light-angle,to bottom right),var(--light-color,var(--color)) 0%,var(--glass-border) 33%,var(--glass-border) 62%,var(--glass-border) 100%);pointer-events:none;z-index:3;clip-path:var(--audio-border)}
.audiolog-entry::after{content:'';position:absolute;inset:0;background:var(--glass-highlight);pointer-events:none;z-index:0;clip-path:var(--audio-shape)}
.audiolog-tab{display:inline-block;padding:8px 20px;background:transparent;border:none;font-size:16px;line-height:24px;letter-spacing:.15em;color:var(--color-dark);position:relative;z-index:2}
.audiolog-card{border:none;padding:var(--space-xl);background:transparent;overflow:visible;border-radius:0 var(--radius-lg) var(--radius-lg) var(--radius-lg);position:relative}
.audiolog-card > p{font-size:24px;line-height:40px;color:var(--color-bright);margin-bottom:12px}
.audiolog-header{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-md)}
.audiolog-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-sm)}
.audiolog-meta .waveform{margin-bottom:0}

.editor{border:none;font-family:var(--font-primary);position:relative;background:var(--glass-highlight);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.4)}
.editor::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(var(--light-angle,to bottom right),var(--light-color,var(--color)) 0%,var(--glass-border) 33%,var(--glass-border) 62%,var(--glass-border) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:1}
.editor-content{padding:var(--space-xl);display:flex;flex-direction:column;gap:0}
.editor-row{display:flex}
.editor-line-number{font-size:16px;line-height:40px;color:var(--color-dark);width:40px;flex-shrink:0;text-align:right;padding-right:var(--space-md);user-select:none}
.editor-tilde{font-size:16px;line-height:40px;color:var(--color-dim);width:40px;flex-shrink:0;text-align:right;padding-right:var(--space-md);user-select:none}
.editor-line{font-size:24px;line-height:40px;padding-left:var(--space-md);border-left:1px solid var(--glass-border);flex:1;min-width:0;color:var(--color-bright)}
.editor-blank{line-height:40px;padding-left:var(--space-md);border-left:1px solid var(--glass-border);flex:1}
.editor-status{padding:0;border-top:1px solid var(--glass-border);font-size:24px;line-height:40px;border-radius:0 0 var(--radius-md) var(--radius-md);overflow:hidden}
.editor-status-bar{display:flex}
.editor-status-mode{background:var(--color);color:var(--bg);padding:4px 12px}
.editor-status-file{background:var(--color-dark);color:var(--bg);padding:4px 12px}
.editor-status-spacer{background:var(--bg3);color:var(--color-dim);padding:4px 12px;flex:1}
.editor-status-enc{background:var(--color-dark);color:var(--bg);padding:4px 8px}
.editor-status-info{background:var(--color);color:var(--bg);padding:4px 12px}
.editor-syntax{color:var(--color-dim)}
.icon-inline{display:inline-block;vertical-align:middle;fill:currentColor}

.terminal{background:var(--glass-highlight);border:none;overflow:hidden;border-radius:var(--radius-lg);box-shadow:0 8px 32px rgba(0,0,0,0.4);position:relative;container-type:inline-size}
.terminal::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(var(--light-angle,to bottom right),var(--light-color,var(--color)) 0%,var(--glass-border) 33%,var(--glass-border) 62%,var(--glass-border) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:1}
.terminal-bar{background:var(--glass-tint);padding:0 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:none;font-size:16px;line-height:24px;letter-spacing:.15em;color:var(--dim);position:relative}
.terminal-bar::after{content:'';position:absolute;bottom:0;left:1px;right:1px;height:1px;background:linear-gradient(90deg,var(--color),var(--glass-border) 50%,var(--glass-border))}
.terminal-dots{display:flex;gap:6px}
.terminal-dots span{width:10px;height:10px;border-radius:50%;border:1px solid var(--color-dark)}
.terminal-dots span:first-child{background:var(--color);box-shadow:0 0 6px var(--color-glow)}
.terminal-body{font-size:24px;line-height:48px;padding:var(--space-lg)}
.terminal-line{display:block;overflow-wrap:anywhere;word-break:break-word}
.terminal-line.terminal-thinking{font-variant-emoji:text;font-family:'Share Tech Mono','Noto Sans Symbols 2',monospace}
.terminal-prompt{color:var(--color-bright)}
.terminal-output{color:var(--dim)}
.terminal-highlight{color:var(--color-bright);text-shadow:0 0 5px var(--color-glow)}
/* Claude Code CLI line types */
.terminal-claude{color:var(--color);padding-left:2ch;text-indent:-2ch;font-variant-emoji:text;font-family:'Share Tech Mono','Noto Sans Symbols 2',monospace}
.terminal-claude::before{content:'\23FA\FE0E  '}
.terminal-claude-cont{color:var(--color);padding-left:2ch}
.terminal-hanging{padding-left:var(--hang,2ch);text-indent:calc(-1 * var(--hang,2ch))}
.terminal-line.terminal-hanging{display:block}
.terminal-claude-cont.terminal-hanging,.terminal-action.terminal-hanging{padding-left:calc(4ch + var(--hang,2ch))}
.terminal-user-input .terminal-hanging{padding-left:calc(2ch + var(--hang,2ch));display:inline-block}
.terminal-action{color:var(--color-dark);padding-left:2ch}
.terminal-bold{color:var(--color);padding-left:2ch;text-transform:uppercase}
.terminal-filegroup{color:var(--color-dark);padding-left:2ch}
.terminal-user-input{padding-left:2ch;text-indent:-2ch;background:var(--glass-tint);border-radius:4px;padding-top:4px;padding-bottom:4px;padding-right:8px;color:var(--color-bright);margin-top:48px}
.terminal-user-input::before{content:'❯ ';color:var(--color-bright)}
.terminal-spacer{height:48px}
.terminal-bold+.terminal-spacer{height:0}
.terminal-separator{color:var(--color-dark);padding-left:0}
.terminal-task{color:var(--color-dark);padding-left:2ch}
.terminal-task-done{padding-left:2ch}
.terminal-task-done .task-check{color:var(--color)}
.terminal-task-done .task-label{color:var(--color)}
/* Bottom input bar for Claude mode */
.terminal-input-bar{border-top:1px solid var(--color-dark);padding:16px var(--space-lg);display:none;align-items:center;justify-content:space-between;flex-direction:row-reverse;flex-wrap:wrap;row-gap:8px;column-gap:16px;font-size:24px;line-height:48px}
@container (max-width:560px){
  .terminal-input-bar{flex-direction:column;align-items:flex-start;justify-content:flex-start}
  .terminal-input-bar .mode-indicator{display:none}
}
.terminal-input-bar.visible{display:flex}
.terminal-input-bar .mode-indicator{color:var(--color-dark);white-space:nowrap;line-height:1;font-variant-emoji:text;font-family:'Share Tech Mono','Noto Sans Symbols 2',monospace}
.terminal-input-bar .terminal-idle-hint{line-height:1}
.terminal-input-bar .input-right{display:flex;align-items:center;gap:0}
.terminal-input-bar .input-text{color:var(--color-bright);white-space:pre-wrap}
.terminal-body a:hover{text-shadow:0 0 8px var(--color-glow)}
.terminal-line.terminal-idle{overflow-anchor:none}
.terminal-body .terminal-idle-hint{overflow-anchor:none}
.terminal-line .vn-typewriter-cursor + .terminal-idle-hint{margin-left:2px}

/* Contact variant — data-field labels */
.terminal-contact{display:block;margin-top:0}
.terminal-contact-header{display:block;white-space:pre;color:var(--dim)}
.terminal-contact-header::before{content:'╔══════════════════════════════════════════╗\A║  '}
.terminal-contact-header::after{content:'\A╠══════════════════════════════════════════╣'}
.terminal-contact-header span{color:var(--color-bright);text-shadow:0 0 5px var(--color-glow)}
.terminal-contact::after{content:'╚══════════════════════════════════════════╝';white-space:pre;display:block;color:var(--dim)}
.terminal[data-variant="contact"] .terminal-output[data-field]{display:flex;align-items:baseline;gap:0}
.terminal[data-variant="contact"] .terminal-output[data-field]::before{content:'║  'attr(data-field)' : ';white-space:pre;min-width:18ch;color:var(--dim)}
.terminal[data-variant="contact"] .terminal-output[data-field]::after{content:none}

.timeline{position:relative;padding-left:var(--space-xl)}
.timeline::before{content:'';position:absolute;left:0;top:16px;bottom:0;width:1px;background:linear-gradient(180deg,var(--color),var(--color-dark),transparent)}
.timeline-item{position:relative;padding-bottom:var(--space-4xl)}
.timeline-item:last-child{padding-bottom:0}
.timeline-item::before{content:'';position:absolute;left:-36px;top:16px;width:10px;height:10px;border-radius:50%;background:var(--dot-color,var(--color-bright));box-shadow:0 0 12px var(--dot-glow,var(--color-glow)),0 0 24px var(--dot-glow,var(--color-glow))}
.timeline-item > h3{font-size:var(--type-title-size);line-height:var(--type-title-line);color:var(--color-dim);margin-bottom:4px}
.timeline-item > h4,.timeline-item > p{color:var(--color-bright);margin-bottom:4px}
.timeline-item > h4 + h4{color:var(--color-dark);margin-bottom:8px}

.nav{position:fixed;top:2rem;left:50%;transform:translateX(-50%);display:flex;align-items:center;width:fit-content;height:48px;gap:var(--space-xs);font-size:16px;letter-spacing:.1em;z-index:10001;background:linear-gradient(calc(135deg + var(--sweep)),var(--glass-shine) 0%,transparent 50%);backdrop-filter:blur(var(--glass-blur-strong));-webkit-backdrop-filter:blur(var(--glass-blur-strong));border:none;border-radius:var(--radius-pill);padding:0 8px;box-shadow:0 4px 24px rgba(0,0,0,0.4);transition:transform .3s ease,opacity .3s ease}
.nav::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(calc(var(--light-angle,135deg) + var(--sweep)),var(--light-color,var(--color)) 0%,var(--glass-border) 33%,var(--glass-border) 62%,var(--glass-border) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.nav.nav-hidden{transform:translateX(-50%) translateY(-120%);opacity:0;pointer-events:none}
.hero .nav{position:absolute;top:2rem;width:auto}
.nav a{color:var(--color-dim);text-decoration:none;transition:all .3s;padding:8px 18px;border-radius:var(--radius-pill);text-shadow:none}
.nav a:hover,.nav a:focus-visible,.nav a.active{color:var(--color-bright);background:var(--color-glow-subtle)}
.nav a::before{content:'>';margin-right:.3rem;opacity:0;transition:opacity var(--transition-fast)}
.nav a:hover::before,.nav a:focus-visible::before{opacity:1}

/* Hamburger */
.hamburger{display:none;position:fixed;top:2rem;right:2rem;z-index:10002;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.hamburger span{display:block;width:24px;height:2px;background:var(--color)}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* Mobile Nav */
.mobile-nav{display:none;position:fixed;top:0;left:0;right:0;z-index:10001;background:var(--glass-bg-hover);backdrop-filter:blur(var(--glass-blur-strong));-webkit-backdrop-filter:blur(var(--glass-blur-strong));border:1px solid var(--glass-border);border-radius:var(--radius-xl);padding:var(--space-xl);font-family:var(--font-primary);margin:var(--space-md);box-shadow:0 8px 32px rgba(0,0,0,0.5)}
.mobile-nav.open{display:block}
.mobile-nav-title{font-size:16px;color:var(--color);letter-spacing:.15em;text-align:center;margin-bottom:var(--space-sm)}
.mobile-nav-rule{color:var(--color-dark);font-size:16px;letter-spacing:0;margin-bottom:12px;text-align:center;overflow:hidden}
.mobile-nav a{display:flex;align-items:center;gap:12px;color:var(--color);text-decoration:none;padding:8px 16px;font-size:16px;letter-spacing:.1em;transition:background .15s}
.mobile-nav a:hover,.mobile-nav a:focus-visible,.mobile-nav a:active{background:var(--color);color:var(--bg)}
.mobile-nav a::before{content:'○';font-size:12px;color:var(--color-dark)}
.mobile-nav a:hover::before,.mobile-nav a:focus-visible::before,.mobile-nav a:active::before{color:var(--bg)}
.mobile-nav a.active::before{content:'●';color:var(--color)}
.mobile-nav-sep{border:none;border-top:1px dashed var(--color-dark);margin:8px 16px}

.page-wrap{filter:none;position:fixed;inset:0;left:-100px;padding:0 0 0 100px;overflow-x:hidden;overflow-y:auto;background:none}
html.barrel-ready #hero .hero-warp{filter:url(#barrel)}
html.barrel-ready .page-wrap[data-theme] .subpage-hero > .subpage-hero-ascii{filter:url(#barrel)}
html.barrel-ready body.helium-page #helium-intro > .subpage-hero > .subpage-hero-ascii{filter:url(#barrel)}
.visually-hidden-svg{display:none;position:absolute;top:-9999px;z-index:0;visibility:hidden}
@-moz-document url-prefix(){
  .visually-hidden-svg.filter-defs-host{display:block;position:absolute;left:-9999px;top:-9999px;z-index:0;visibility:visible;pointer-events:none}
}
.hidden{display:none}
.container{max-width:1200px;margin:0 auto;padding:0 var(--space-xl)}
.section{padding:0;margin:0 0 var(--space-section) 0;scroll-margin-top:var(--space-xl)}
.section-body{padding-left:var(--space-3xl)}
.section-body>img{width:100%}
.section-body>.text-body+:not(.text-body){margin-top:var(--space-4xl)}

/* Sticky Sidebar Layout (testimonials + experience) */
.sticky-layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl)}
.sticky-layout > *{min-width:0}
.sticky-header .section-title{white-space:normal;max-width:15em}
/* Full-width modifier for a section-end CTA. Used on top of an existing button class (e.g. .hero-btn). */
.section-cta{display:flex;width:100%;margin-top:var(--space-4xl)}
.sticky-layout[data-reverse]{direction:rtl}
.sticky-layout[data-reverse]>*{direction:ltr}
.sticky-header{position:sticky;top:64px;align-self:start;display:flex;flex-direction:column;gap:var(--space-sm)}

/* Masonry Layout (projects) */
.masonry{display:flex;gap:var(--space-xl)}
.masonry-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-xl)}
.masonry-col:nth-child(2){margin-top:var(--space-4xl)}


@keyframes flicker{0%,100%{opacity:1}92%{opacity:1}93%{opacity:.8}94%{opacity:1}96%{opacity:.9}97%{opacity:1}}
@keyframes glow{0%,100%{text-shadow:0 0 8px var(--color-glow),0 0 20px var(--color-glow)}50%{text-shadow:0 0 15px var(--color-glow),0 0 40px var(--color-glow)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes scanDown{0%{top:-10%}100%{top:110%}}
@keyframes pulse{0%,100%{box-shadow:0 0 5px var(--color-glow)}50%{box-shadow:0 0 20px var(--color-glow),0 0 40px var(--color-glow)}}
@keyframes floatGlow{0%,100%{filter:drop-shadow(0 0 8px var(--color-glow))}50%{filter:drop-shadow(0 0 20px var(--color-glow))}}
@keyframes scrollGlow{0%,9%{opacity:.15}10%,30%{opacity:.8}31%,100%{opacity:.15}}
@keyframes wave{0%{opacity:.5;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1.1)}100%{opacity:.6;transform:scaleY(.7)}}


[data-theme="blue"]{
  --color:#0095ff;
  --color-bright:#40b3ff;
  --color-dim:#0077cc;
  --color-dark:#005299;
  --color-glow:#0095ff66;
  --color-glow-subtle:#0095ff14;
  --bg:#060a0f;
  --bg2:#080c11;
  --bg3:#0a1018;
  --border:#0095ff20;
  --dim:#0095ff88;
  --portrait-bg:#192839;
  --glass-bg:rgba(8,14,22,0.65);
  --glass-bg-hover:rgba(10,18,28,0.75);
  --glass-border:rgba(0,149,255,0.18);
  --glass-border-hover:rgba(0,149,255,0.35);
  --glass-highlight:linear-gradient(135deg,rgba(64,179,255,0.07) 0%,transparent 50%);
  --glass-shine:rgba(64,179,255,0.08);
  --glass-shine-hover:rgba(64,179,255,0.12);
  --glass-tint:rgba(0,149,255,0.08);
  --glass-tint-subtle:rgba(0,149,255,0.06);
  --glass-tint-faint:rgba(0,149,255,0.04);
  --glass-glow:0 0 15px rgba(0,149,255,0.08),0 0 30px rgba(0,149,255,0.04);
  --glass-glow-hover:0 0 20px rgba(0,149,255,0.15),0 0 40px rgba(0,149,255,0.06);
}
[data-theme="pink"]{
  --color:#ff5ea0;
  --color-bright:#ff8ec0;
  --color-dim:#cc4b80;
  --color-dark:#993860;
  --color-glow:#ff5ea066;
  --color-glow-subtle:#ff5ea014;
  --bg:#0f060a;
  --bg2:#120810;
  --bg3:#180a14;
  --border:#ff5ea020;
  --dim:#ff5ea088;
  --portrait-bg:#391928;
  --glass-bg:rgba(22,8,14,0.65);
  --glass-bg-hover:rgba(28,10,18,0.75);
  --glass-border:rgba(255,94,160,0.18);
  --glass-border-hover:rgba(255,94,160,0.35);
  --glass-highlight:linear-gradient(135deg,rgba(255,142,192,0.07) 0%,transparent 50%);
  --glass-shine:rgba(255,142,192,0.08);
  --glass-shine-hover:rgba(255,142,192,0.12);
  --glass-tint:rgba(255,94,160,0.08);
  --glass-tint-subtle:rgba(255,94,160,0.06);
  --glass-tint-faint:rgba(255,94,160,0.04);
  --glass-glow:0 0 15px rgba(255,94,160,0.08),0 0 30px rgba(255,94,160,0.04);
  --glass-glow-hover:0 0 20px rgba(255,94,160,0.15),0 0 40px rgba(255,94,160,0.06);
}
[data-theme="purple"]{
  --color:#a855f7;
  --color-bright:#c084fc;
  --color-dim:#8b3fd9;
  --color-dark:#6b21a8;
  --color-glow:#a855f766;
  --color-glow-subtle:#a855f714;
  --bg:#0a060f;
  --bg2:#0c0812;
  --bg3:#120a18;
  --border:#a855f720;
  --dim:#a855f788;
  --portrait-bg:#291939;
  --glass-bg:rgba(14,8,22,0.65);
  --glass-bg-hover:rgba(18,10,28,0.75);
  --glass-border:rgba(168,85,247,0.18);
  --glass-border-hover:rgba(168,85,247,0.35);
  --glass-highlight:linear-gradient(135deg,rgba(192,132,252,0.07) 0%,transparent 50%);
  --glass-shine:rgba(192,132,252,0.08);
  --glass-shine-hover:rgba(192,132,252,0.12);
  --glass-tint:rgba(168,85,247,0.08);
  --glass-tint-subtle:rgba(168,85,247,0.06);
  --glass-tint-faint:rgba(168,85,247,0.04);
  --glass-glow:0 0 15px rgba(168,85,247,0.08),0 0 30px rgba(168,85,247,0.04);
  --glass-glow-hover:0 0 20px rgba(168,85,247,0.15),0 0 40px rgba(168,85,247,0.06);
}
[data-theme="green"]{
  --color:#00c9a7;
  --color-bright:#4de8cc;
  --color-dim:#00a88b;
  --color-dark:#007a65;
  --color-glow:#00c9a766;
  --color-glow-subtle:#00c9a714;
  --bg:#050f0d;
  --bg2:#071210;
  --bg3:#0a1816;
  --border:#00c9a720;
  --dim:#00c9a788;
  --portrait-bg:#132e28;
  --glass-bg:rgba(8,18,16,0.65);
  --glass-bg-hover:rgba(10,22,20,0.75);
  --glass-border:rgba(0,201,167,0.18);
  --glass-border-hover:rgba(0,201,167,0.35);
  --glass-highlight:linear-gradient(135deg,rgba(77,232,204,0.07) 0%,transparent 50%);
  --glass-shine:rgba(77,232,204,0.08);
  --glass-shine-hover:rgba(77,232,204,0.12);
  --glass-tint:rgba(0,201,167,0.08);
  --glass-tint-subtle:rgba(0,201,167,0.06);
  --glass-tint-faint:rgba(0,201,167,0.04);
  --glass-glow:0 0 15px rgba(0,201,167,0.08),0 0 30px rgba(0,201,167,0.04);
  --glass-glow-hover:0 0 20px rgba(0,201,167,0.15),0 0 40px rgba(0,201,167,0.06);
}
[data-theme]{color:var(--color);background:transparent}
body:has([data-theme="blue"]){background:radial-gradient(ellipse 800px 600px at 15% 10%,rgba(0,149,255,0.12),transparent 60%),radial-gradient(ellipse 700px 700px at 85% 50%,rgba(0,120,200,0.08),transparent 60%),radial-gradient(ellipse 600px 500px at 40% 80%,rgba(0,100,180,0.06),transparent 60%),radial-gradient(ellipse 500px 400px at 60% 20%,rgba(64,179,255,0.05),transparent 60%),#060a0f;background-attachment:fixed}
body:has([data-theme="pink"]){background:radial-gradient(ellipse 800px 600px at 15% 10%,rgba(255,94,160,0.12),transparent 60%),radial-gradient(ellipse 700px 700px at 85% 50%,rgba(200,70,130,0.08),transparent 60%),radial-gradient(ellipse 600px 500px at 40% 80%,rgba(180,60,110,0.06),transparent 60%),radial-gradient(ellipse 500px 400px at 60% 20%,rgba(255,142,192,0.05),transparent 60%),#0f060a;background-attachment:fixed}
body:has([data-theme="purple"]){background:radial-gradient(ellipse 800px 600px at 15% 10%,rgba(168,85,247,0.12),transparent 60%),radial-gradient(ellipse 700px 700px at 85% 50%,rgba(140,60,220,0.08),transparent 60%),radial-gradient(ellipse 600px 500px at 40% 80%,rgba(120,50,190,0.06),transparent 60%),radial-gradient(ellipse 500px 400px at 60% 20%,rgba(192,132,252,0.05),transparent 60%),#0a060f;background-attachment:fixed}
body:has([data-theme="green"]){background:radial-gradient(ellipse 800px 600px at 15% 10%,rgba(0,201,167,0.12),transparent 60%),radial-gradient(ellipse 700px 700px at 85% 50%,rgba(0,168,139,0.08),transparent 60%),radial-gradient(ellipse 600px 500px at 40% 80%,rgba(0,140,115,0.06),transparent 60%),radial-gradient(ellipse 500px 400px at 60% 20%,rgba(77,232,204,0.05),transparent 60%),#050f0d;background-attachment:fixed}
body[data-theme="blue"]{background:radial-gradient(ellipse 800px 600px at 15% 10%,rgba(0,149,255,0.12),transparent 60%),radial-gradient(ellipse 700px 700px at 85% 50%,rgba(0,120,200,0.08),transparent 60%),radial-gradient(ellipse 600px 500px at 40% 80%,rgba(0,100,180,0.06),transparent 60%),radial-gradient(ellipse 500px 400px at 60% 20%,rgba(64,179,255,0.05),transparent 60%),#060a0f;background-attachment:fixed}
body[data-theme="pink"]{background:radial-gradient(ellipse 800px 600px at 15% 10%,rgba(255,94,160,0.12),transparent 60%),radial-gradient(ellipse 700px 700px at 85% 50%,rgba(200,70,130,0.08),transparent 60%),radial-gradient(ellipse 600px 500px at 40% 80%,rgba(180,60,110,0.06),transparent 60%),radial-gradient(ellipse 500px 400px at 60% 20%,rgba(255,142,192,0.05),transparent 60%),#0f060a;background-attachment:fixed}
body[data-theme="purple"]{background:radial-gradient(ellipse 800px 600px at 15% 10%,rgba(168,85,247,0.12),transparent 60%),radial-gradient(ellipse 700px 700px at 85% 50%,rgba(140,60,220,0.08),transparent 60%),radial-gradient(ellipse 600px 500px at 40% 80%,rgba(120,50,190,0.06),transparent 60%),radial-gradient(ellipse 500px 400px at 60% 20%,rgba(192,132,252,0.05),transparent 60%),#0a060f;background-attachment:fixed}
body[data-theme="green"]{background:radial-gradient(ellipse 800px 600px at 15% 10%,rgba(0,201,167,0.12),transparent 60%),radial-gradient(ellipse 700px 700px at 85% 50%,rgba(0,168,139,0.08),transparent 60%),radial-gradient(ellipse 600px 500px at 40% 80%,rgba(0,140,115,0.06),transparent 60%),radial-gradient(ellipse 500px 400px at 60% 20%,rgba(77,232,204,0.05),transparent 60%),#050f0d;background-attachment:fixed}
html.boot-pending[data-boot-theme="blue"]::before{background:radial-gradient(ellipse 800px 600px at 15% 10%,rgba(0,149,255,0.12),transparent 60%),radial-gradient(ellipse 700px 700px at 85% 50%,rgba(0,120,200,0.08),transparent 60%),radial-gradient(ellipse 600px 500px at 40% 80%,rgba(0,100,180,0.06),transparent 60%),radial-gradient(ellipse 500px 400px at 60% 20%,rgba(64,179,255,0.05),transparent 60%),#060a0f;background-attachment:fixed}
html.boot-pending[data-boot-theme="pink"]::before{background:radial-gradient(ellipse 800px 600px at 15% 10%,rgba(255,94,160,0.12),transparent 60%),radial-gradient(ellipse 700px 700px at 85% 50%,rgba(200,70,130,0.08),transparent 60%),radial-gradient(ellipse 600px 500px at 40% 80%,rgba(180,60,110,0.06),transparent 60%),radial-gradient(ellipse 500px 400px at 60% 20%,rgba(255,142,192,0.05),transparent 60%),#0f060a;background-attachment:fixed}
html.boot-pending[data-boot-theme="purple"]::before{background:radial-gradient(ellipse 800px 600px at 15% 10%,rgba(168,85,247,0.12),transparent 60%),radial-gradient(ellipse 700px 700px at 85% 50%,rgba(140,60,220,0.08),transparent 60%),radial-gradient(ellipse 600px 500px at 40% 80%,rgba(120,50,190,0.06),transparent 60%),radial-gradient(ellipse 500px 400px at 60% 20%,rgba(192,132,252,0.05),transparent 60%),#0a060f;background-attachment:fixed}
html.boot-pending[data-boot-theme="green"]::before{background:radial-gradient(ellipse 800px 600px at 15% 10%,rgba(0,201,167,0.12),transparent 60%),radial-gradient(ellipse 700px 700px at 85% 50%,rgba(0,168,139,0.08),transparent 60%),radial-gradient(ellipse 600px 500px at 40% 80%,rgba(0,140,115,0.06),transparent 60%),radial-gradient(ellipse 500px 400px at 60% 20%,rgba(77,232,204,0.05),transparent 60%),#050f0d;background-attachment:fixed}
.ssh-overlay[data-theme="blue"]{background:radial-gradient(ellipse 800px 600px at 15% 10%,rgba(0,149,255,0.12),transparent 60%),radial-gradient(ellipse 700px 700px at 85% 50%,rgba(0,120,200,0.08),transparent 60%),radial-gradient(ellipse 600px 500px at 40% 80%,rgba(0,100,180,0.06),transparent 60%),radial-gradient(ellipse 500px 400px at 60% 20%,rgba(64,179,255,0.05),transparent 60%),#060a0f;background-attachment:fixed}
.ssh-overlay[data-theme="pink"]{background:radial-gradient(ellipse 800px 600px at 15% 10%,rgba(255,94,160,0.12),transparent 60%),radial-gradient(ellipse 700px 700px at 85% 50%,rgba(200,70,130,0.08),transparent 60%),radial-gradient(ellipse 600px 500px at 40% 80%,rgba(180,60,110,0.06),transparent 60%),radial-gradient(ellipse 500px 400px at 60% 20%,rgba(255,142,192,0.05),transparent 60%),#0f060a;background-attachment:fixed}
.ssh-overlay[data-theme="purple"]{background:radial-gradient(ellipse 800px 600px at 15% 10%,rgba(168,85,247,0.12),transparent 60%),radial-gradient(ellipse 700px 700px at 85% 50%,rgba(140,60,220,0.08),transparent 60%),radial-gradient(ellipse 600px 500px at 40% 80%,rgba(120,50,190,0.06),transparent 60%),radial-gradient(ellipse 500px 400px at 60% 20%,rgba(192,132,252,0.05),transparent 60%),#0a060f;background-attachment:fixed}
.ssh-overlay[data-theme="green"]{background:radial-gradient(ellipse 800px 600px at 15% 10%,rgba(0,201,167,0.12),transparent 60%),radial-gradient(ellipse 700px 700px at 85% 50%,rgba(0,168,139,0.08),transparent 60%),radial-gradient(ellipse 600px 500px at 40% 80%,rgba(0,140,115,0.06),transparent 60%),radial-gradient(ellipse 500px 400px at 60% 20%,rgba(77,232,204,0.05),transparent 60%),#050f0d;background-attachment:fixed}
[data-theme] .section{animation:none}
[data-theme] .portrait::after{display:none}
[data-theme="blue"] .text-body{color:var(--color-bright)}
[data-theme="green"] .text-body{color:var(--color-bright)}
[data-theme="pink"] .text-body{color:var(--color-bright)}
[data-theme="purple"] .text-body{color:var(--color-bright)}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-xl);margin:0 0 var(--space-4xl)}
.stats-item{display:flex;flex-direction:column;gap:0;align-items:center}
.stats-value{font-family:var(--font-primary);font-size:48px;line-height:1;color:var(--bg);background:var(--color-bright);letter-spacing:.05em;padding:var(--space-md) var(--space-xl);text-align:center;width:100%;border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.stats-prefix{font-size:40px;color:var(--color-dim)}
.stats-label{font-size:16px;line-height:24px;letter-spacing:.15em;color:var(--color-dim);text-transform:uppercase;border:1px solid var(--glass-border);padding:var(--space-sm) var(--space-md);text-align:center;width:100%;border-radius:0 0 var(--radius-sm) var(--radius-sm)}


.subpage-hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;margin-bottom:var(--space-4xl);padding:var(--space-section) 0 3rem;overflow:visible;gap:var(--space-lg)}
.subpage-hero-label{font-size:16px;letter-spacing:.2em;color:var(--color-dim);text-transform:uppercase;margin-bottom:var(--space-lg);text-align:center}
.subpage-hero-ascii{font-family:'Google Sans Code',monospace;font-size:16px;line-height:.9;color:var(--color-bright);white-space:pre;text-align:left;text-shadow:none;animation:crtGlow 4s ease-in-out infinite;transform-origin:center top;display:inline-block;position:relative}
.subpage-hero-ascii::before{content:attr(data-ascii-glow);position:absolute;inset:0;color:transparent;white-space:pre;text-align:left;text-shadow:0 0 10px var(--color-glow),0 0 20px var(--color-glow);pointer-events:none}
.subpage-hero-ascii-mobile{display:none}
@keyframes crtGlow{0%,100%{opacity:1}50%{opacity:.85}}
.subpage-hero-tagline{display:flex;justify-content:space-between;align-items:baseline;width:100%;letter-spacing:.2em;color:var(--color-dim);text-transform:uppercase;line-height:1}
.subpage-hero-tagline .text-body+.text-body{margin-top:0}
.subpage-hero-image{width:100%;margin-top:var(--space-section)}
.subpage-hero-scroll{position:absolute;bottom:2rem;display:flex;flex-direction:column;align-items:center;font-size:24px;line-height:40px;color:var(--color-dim)}
.subpage-hero-scroll span{display:block;transform:scaleX(1.3);opacity:.15;animation:scrollGlow 2s ease-in-out infinite}
.subpage-hero-scroll span+span{margin-top:-24px}
.subpage-hero-scroll span:nth-child(2){animation-delay:.2s}
.subpage-hero-scroll span:nth-child(3){animation-delay:.4s}

/* Case Study Hero — per-case anchor for subpages with multiple studies. */
.case-study-hero{display:flex;flex-direction:column;gap:var(--space-2xl);padding:var(--space-section) 0 var(--space-xl);margin-bottom:var(--space-2xl);position:relative}
.case-study-hero-topline{display:flex;justify-content:space-between;align-items:baseline;color:var(--color-dim);font-family:var(--font-primary);font-size:14px;letter-spacing:.3em;text-transform:uppercase}
.case-study-hero-tag{color:var(--color-dim)}
.case-study-hero-status{color:var(--color-bright);display:inline-flex;align-items:center;gap:var(--space-sm);text-shadow:0 0 6px var(--color-glow)}
.case-study-hero-status::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--color-bright);box-shadow:0 0 8px var(--color-glow),0 0 16px var(--color-glow);animation:crtGlow 2s ease-in-out infinite}
.case-study-hero-title{font-family:var(--font-primary);font-size:clamp(40px,6vw,72px);line-height:1.05;letter-spacing:.05em;color:var(--color-bright);text-shadow:0 0 8px var(--color-glow),0 0 20px var(--color-glow);text-transform:uppercase;margin:0;white-space:normal}
.case-study-hero-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2xl) var(--space-4xl)}
.case-study-hero-meta-item{display:flex;flex-direction:column;gap:var(--space-xs);border-left:1px solid var(--glass-border);padding-left:var(--space-lg)}
.case-study-hero-meta-label{font-family:var(--font-primary);font-size:12px;letter-spacing:.3em;color:var(--color-dim);text-transform:uppercase}
.case-study-hero-meta-value{font-family:var(--font-primary);font-size:18px;letter-spacing:.08em;color:var(--color);line-height:1.4}
.case-study-hero-meta-note{font-size:13px;color:var(--color-dim);font-family:var(--font-primary);letter-spacing:.1em;margin-top:var(--space-xs)}
@media (max-width:768px){
  .case-study-hero-meta{grid-template-columns:1fr;gap:var(--space-lg)}
  .case-study-hero-title{letter-spacing:.03em}
  .case-study-hero-topline{font-size:12px;letter-spacing:.2em}
}

.subpage-back{padding:var(--space-xl) 0;display:block}
[data-theme] .section>img{width:100%;display:block;margin:var(--space-xl) 0}
[data-theme] .text-body+img,[data-theme] .text-body+.editor,[data-theme] .text-body+.stats,[data-theme] .text-body+.masonry,[data-theme] .text-body+.sticky-layout,[data-theme] .text-body+.timeline,[data-theme] .text-body+.logo-grid{margin-top:var(--space-4xl)}
[data-theme] .masonry .card-title{color:var(--color)}
[data-theme] .masonry .card-title[data-icon-before]::before{background-color:var(--color)}
.placeholder{width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,var(--glass-shine) 0%,transparent 50%);border:1px dashed var(--glass-border);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--color-dark);font-size:12px;letter-spacing:.15em;text-transform:uppercase;font-family:var(--font-primary)}
.sticky-layout+.sticky-layout{margin-top:var(--space-section)}
[data-theme] .text-body+.step-list{margin-top:var(--space-4xl)}
.pd-assembly-def-desc{margin-top:var(--space-md)}
[data-theme] .masonry+img{margin-top:var(--space-4xl)}
[data-theme] img+.image-caption{margin-top:var(--space-md)}

.step-row .card-title{margin-bottom:var(--space-sm);color:var(--color)}

/* Logo Grid */
.logo-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--glass-border);border-radius:var(--radius-md);overflow:hidden}
.logo-grid-item{display:flex;flex-direction:column;justify-content:center;align-items:center;aspect-ratio:4/3;padding:var(--space-xl);border-right:1px solid var(--glass-border);position:relative}
.logo-grid-item:last-child{border-right:none}
.logo-grid-item img{max-width:80%;max-height:60%;object-fit:contain}
.logo-grid-item [data-logo]{display:block;width:80%;min-height:0;aspect-ratio:5/2;flex-shrink:0;background:var(--color-bright);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.logo-grid-item .placeholder{aspect-ratio:auto;width:100%;height:auto;flex:1}
.logo-grid-num{position:absolute;bottom:0;left:0;font-family:var(--font-primary);font-size:16px;letter-spacing:.1em;color:var(--bg);background:var(--color-bright);padding:var(--space-sm) var(--space-lg);display:none}
.logo-grid--numbered .logo-grid-num{display:block}
.logo-grid:has(+ .logo-grid){border-radius:var(--radius-md) var(--radius-md) 0 0;border-bottom:none}
.logo-grid+.logo-grid{border-radius:0 0 var(--radius-md) var(--radius-md)}

/* Section Subtitle (mid-section heading) */
.section-subtitle{margin-top:var(--space-4xl);margin-bottom:var(--space-2xl)}

/* Step Table */
.step-table{border-top:2.5px solid var(--color-bright);border-bottom:2.5px solid var(--color-bright);border-left:none;border-right:none;--dash:19px;--gap:6px;--dash-w:2.5px;--dash-line:repeating-linear-gradient(to bottom,var(--color-bright) 0,var(--color-bright) var(--dash),transparent var(--dash),transparent calc(var(--dash) + var(--gap)))}
.step-table-header,.step-table-row{display:grid;grid-template-columns:52px 240px 1fr}
.step-table-header{border-bottom:2.5px solid var(--color-bright)}
.step-table-row{border-bottom:2.5px solid var(--color-bright)}
.step-table-row:last-child{border-bottom:none}
.step-table-num,.step-table-phase,.step-table-desc{padding:16px;background-repeat:no-repeat;background-size:var(--dash-w) 100%}
.step-table-num{background-image:var(--dash-line),var(--dash-line);background-position:left top,right top}
.step-table-phase{background-image:var(--dash-line);background-position:right top}
.step-table-desc{background-image:var(--dash-line);background-position:right top}
.step-table .text-body{margin:0}

/* Check List */
.check-list{display:flex;flex-direction:column;gap:var(--space-lg);margin:0 0 var(--space-4xl)}
[data-theme] .text-body+.check-list{margin-top:var(--space-4xl)}
.check-item{display:flex;align-items:center;gap:var(--space-lg)}
.check-item::before{content:'';flex-shrink:0;width:32px;height:32px;display:block;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.check-item[data-status="pass"]{color:var(--color-bright)}
.check-item[data-status="pass"]::before{background-color:var(--color-bright);-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M%2026%204%20L%2026%206%20L%2028%206%20L%2028%204%20L%2026%204%20z%20M%2028%206%20L%2028%2010%20L%2030%2010%20L%2030%206%20L%2028%206%20z%20M%2028%2010%20L%2026%2010%20L%2026%2012%20L%2028%2012%20L%2028%2010%20z%20M%2026%2012%20L%2024%2012%20L%2024%2014%20L%2026%2014%20L%2026%2012%20z%20M%2024%2014%20L%2022%2014%20L%2022%2016%20L%2024%2016%20L%2024%2014%20z%20M%2022%2016%20L%2020%2016%20L%2020%2018%20L%2022%2018%20L%2022%2016%20z%20M%2020%2018%20L%2018%2018%20L%2018%2020%20L%2020%2020%20L%2020%2018%20z%20M%2018%2020%20L%2016%2020%20L%2016%2022%20L%2018%2022%20L%2018%2020%20z%20M%2016%2022%20L%2014%2022%20L%2014%2024%20L%2016%2024%20L%2016%2022%20z%20M%2014%2024%20L%2012%2024%20L%2012%2026%20L%2014%2026%20L%2014%2024%20z%20M%2012%2026%20L%2010%2026%20L%2010%2028%20L%2012%2028%20L%2012%2026%20z%20M%2010%2026%20L%2010%2024%20L%208%2024%20L%208%2026%20L%2010%2026%20z%20M%208%2024%20L%208%2022%20L%206%2022%20L%206%2024%20L%208%2024%20z%20M%206%2022%20L%206%2020%20L%204%2020%20L%204%2022%20L%206%2022%20z%20M%204%2020%20L%204%2016%20L%202%2016%20L%202%2020%20L%204%2020%20z%20M%204%2016%20L%206%2016%20L%206%2014%20L%204%2014%20L%204%2016%20z%20M%206%2016%20L%206%2018%20L%208%2018%20L%208%2016%20L%206%2016%20z%20M%208%2018%20L%208%2020%20L%2010%2020%20L%2010%2018%20L%208%2018%20z%20M%2010%2020%20L%2010%2022%20L%2012%2022%20L%2012%2020%20L%2010%2020%20z%20M%2012%2020%20L%2014%2020%20L%2014%2018%20L%2012%2018%20L%2012%2020%20z%20M%2014%2018%20L%2016%2018%20L%2016%2016%20L%2014%2016%20L%2014%2018%20z%20M%2016%2016%20L%2018%2016%20L%2018%2014%20L%2016%2014%20L%2016%2016%20z%20M%2018%2014%20L%2020%2014%20L%2020%2012%20L%2018%2012%20L%2018%2014%20z%20M%2020%2012%20L%2022%2012%20L%2022%2010%20L%2020%2010%20L%2020%2012%20z%20M%2022%2010%20L%2024%2010%20L%2024%208%20L%2022%208%20L%2022%2010%20z%20M%2024%208%20L%2026%208%20L%2026%206%20L%2024%206%20L%2024%208%20z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M%2026%204%20L%2026%206%20L%2028%206%20L%2028%204%20L%2026%204%20z%20M%2028%206%20L%2028%2010%20L%2030%2010%20L%2030%206%20L%2028%206%20z%20M%2028%2010%20L%2026%2010%20L%2026%2012%20L%2028%2012%20L%2028%2010%20z%20M%2026%2012%20L%2024%2012%20L%2024%2014%20L%2026%2014%20L%2026%2012%20z%20M%2024%2014%20L%2022%2014%20L%2022%2016%20L%2024%2016%20L%2024%2014%20z%20M%2022%2016%20L%2020%2016%20L%2020%2018%20L%2022%2018%20L%2022%2016%20z%20M%2020%2018%20L%2018%2018%20L%2018%2020%20L%2020%2020%20L%2020%2018%20z%20M%2018%2020%20L%2016%2020%20L%2016%2022%20L%2018%2022%20L%2018%2020%20z%20M%2016%2022%20L%2014%2022%20L%2014%2024%20L%2016%2024%20L%2016%2022%20z%20M%2014%2024%20L%2012%2024%20L%2012%2026%20L%2014%2026%20L%2014%2024%20z%20M%2012%2026%20L%2010%2026%20L%2010%2028%20L%2012%2028%20L%2012%2026%20z%20M%2010%2026%20L%2010%2024%20L%208%2024%20L%208%2026%20L%2010%2026%20z%20M%208%2024%20L%208%2022%20L%206%2022%20L%206%2024%20L%208%2024%20z%20M%206%2022%20L%206%2020%20L%204%2020%20L%204%2022%20L%206%2022%20z%20M%204%2020%20L%204%2016%20L%202%2016%20L%202%2020%20L%204%2020%20z%20M%204%2016%20L%206%2016%20L%206%2014%20L%204%2014%20L%204%2016%20z%20M%206%2016%20L%206%2018%20L%208%2018%20L%208%2016%20L%206%2016%20z%20M%208%2018%20L%208%2020%20L%2010%2020%20L%2010%2018%20L%208%2018%20z%20M%2010%2020%20L%2010%2022%20L%2012%2022%20L%2012%2020%20L%2010%2020%20z%20M%2012%2020%20L%2014%2020%20L%2014%2018%20L%2012%2018%20L%2012%2020%20z%20M%2014%2018%20L%2016%2018%20L%2016%2016%20L%2014%2016%20L%2014%2018%20z%20M%2016%2016%20L%2018%2016%20L%2018%2014%20L%2016%2014%20L%2016%2016%20z%20M%2018%2014%20L%2020%2014%20L%2020%2012%20L%2018%2012%20L%2018%2014%20z%20M%2020%2012%20L%2022%2012%20L%2022%2010%20L%2020%2010%20L%2020%2012%20z%20M%2022%2010%20L%2024%2010%20L%2024%208%20L%2022%208%20L%2022%2010%20z%20M%2024%208%20L%2026%208%20L%2026%206%20L%2024%206%20L%2024%208%20z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.check-item[data-status="fail"]{color:var(--color-dark)}
.check-item[data-status="fail"]::before{background-color:var(--color-dark);-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M%204%204%20L%204%206%20L%206%206%20L%206%204%20L%204%204%20z%20M%206%206%20L%206%208%20L%208%208%20L%208%206%20L%206%206%20z%20M%208%208%20L%208%2010%20L%2010%2010%20L%2010%208%20L%208%208%20z%20M%2010%2010%20L%2010%2012%20L%2012%2012%20L%2012%2010%20L%2010%2010%20z%20M%2012%2012%20L%2012%2014%20L%2014%2014%20L%2014%2012%20L%2012%2012%20z%20M%2026%204%20L%2026%206%20L%2028%206%20L%2028%204%20L%2026%204%20z%20M%2026%206%20L%2024%206%20L%2024%208%20L%2026%208%20L%2026%206%20z%20M%2024%208%20L%2022%208%20L%2022%2010%20L%2024%2010%20L%2024%208%20z%20M%2022%2010%20L%2020%2010%20L%2020%2012%20L%2022%2012%20L%2022%2010%20z%20M%2020%2012%20L%2018%2012%20L%2018%2014%20L%2020%2014%20L%2020%2012%20z%20M%2018%2014%20L%2016%2014%20L%2016%2016%20L%2018%2016%20L%2018%2014%20z%20M%2016%2016%20L%2014%2016%20L%2014%2018%20L%2016%2018%20L%2016%2016%20z%20M%2014%2018%20L%2012%2018%20L%2012%2020%20L%2014%2020%20L%2014%2018%20z%20M%2012%2020%20L%2010%2020%20L%2010%2022%20L%2012%2022%20L%2012%2020%20z%20M%2010%2022%20L%208%2022%20L%208%2024%20L%2010%2024%20L%2010%2022%20z%20M%208%2024%20L%206%2024%20L%206%2026%20L%208%2026%20L%208%2024%20z%20M%206%2026%20L%204%2026%20L%204%2028%20L%206%2028%20L%206%2026%20z%20M%2018%2018%20L%2018%2020%20L%2020%2020%20L%2020%2018%20L%2018%2018%20z%20M%2020%2020%20L%2020%2022%20L%2022%2022%20L%2022%2020%20L%2020%2020%20z%20M%2022%2022%20L%2022%2024%20L%2024%2024%20L%2024%2022%20L%2022%2022%20z%20M%2024%2024%20L%2024%2026%20L%2026%2026%20L%2026%2024%20L%2024%2024%20z%20M%2026%2026%20L%2026%2028%20L%2028%2028%20L%2028%2026%20L%2026%2026%20z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M%204%204%20L%204%206%20L%206%206%20L%206%204%20L%204%204%20z%20M%206%206%20L%206%208%20L%208%208%20L%208%206%20L%206%206%20z%20M%208%208%20L%208%2010%20L%2010%2010%20L%2010%208%20L%208%208%20z%20M%2010%2010%20L%2010%2012%20L%2012%2012%20L%2012%2010%20L%2010%2010%20z%20M%2012%2012%20L%2012%2014%20L%2014%2014%20L%2014%2012%20L%2012%2012%20z%20M%2026%204%20L%2026%206%20L%2028%206%20L%2028%204%20L%2026%204%20z%20M%2026%206%20L%2024%206%20L%2024%208%20L%2026%208%20L%2026%206%20z%20M%2024%208%20L%2022%208%20L%2022%2010%20L%2024%2010%20L%2024%208%20z%20M%2022%2010%20L%2020%2010%20L%2020%2012%20L%2022%2012%20L%2022%2010%20z%20M%2020%2012%20L%2018%2012%20L%2018%2014%20L%2020%2014%20L%2020%2012%20z%20M%2018%2014%20L%2016%2014%20L%2016%2016%20L%2018%2016%20L%2018%2014%20z%20M%2016%2016%20L%2014%2016%20L%2014%2018%20L%2016%2018%20L%2016%2016%20z%20M%2014%2018%20L%2012%2018%20L%2012%2020%20L%2014%2020%20L%2014%2018%20z%20M%2012%2020%20L%2010%2020%20L%2010%2022%20L%2012%2022%20L%2012%2020%20z%20M%2010%2022%20L%208%2022%20L%208%2024%20L%2010%2024%20L%2010%2022%20z%20M%208%2024%20L%206%2024%20L%206%2026%20L%208%2026%20L%208%2024%20z%20M%206%2026%20L%204%2026%20L%204%2028%20L%206%2028%20L%206%2026%20z%20M%2018%2018%20L%2018%2020%20L%2020%2020%20L%2020%2018%20L%2018%2018%20z%20M%2020%2020%20L%2020%2022%20L%2022%2022%20L%2022%2020%20L%2020%2020%20z%20M%2022%2022%20L%2022%2024%20L%2024%2024%20L%2024%2022%20L%2022%2022%20z%20M%2024%2024%20L%2024%2026%20L%2026%2026%20L%2026%2024%20L%2024%2024%20z%20M%2026%2026%20L%2026%2028%20L%2028%2028%20L%2028%2026%20L%2026%2026%20z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}

/* Briefing Component — all variants. Hierarchy: problem=hero, hypothesis+goal=children. */


.folder-scroll-container{position:relative;height:5000px;margin-top:var(--space-section);margin-bottom:var(--space-section)}
.folder-scroll-sticky{position:sticky;top:0;height:100vh;display:grid;place-items:center}
.folder-scroll-title{position:relative;z-index:3;text-align:center;margin:0;padding:var(--space-xl) 0}
.folder-scroll-sticky .folder-cabinet{max-width:1200px;width:100%}

.folder-stack{position:relative;min-height:600px;margin:0 40px;overflow:visible}
.folder{padding:0;position:absolute;left:0;right:0;overflow:visible}
.folder.pulling{z-index:10}
.folder-tab{display:inline-block;padding:8px 28px;background:transparent;border:none;font-size:16px;line-height:24px;letter-spacing:.15em;color:var(--color-dark);position:relative;top:1px;z-index:1;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 100%,0 100%);margin-bottom:-1px}
.folder-tab::before{content:'';position:absolute;inset:-1px -1px 0 -1px;background:var(--color-dark);clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 100%,0 100%);z-index:-2}
.folder-tab::after{content:'';position:absolute;inset:0 0 0 0;background:var(--bg);clip-path:polygon(13px 1px,calc(100% - 13px) 1px,calc(100% - 1px) 100%,1px 100%);z-index:-1}
.folder-body{padding:var(--space-lg);background:var(--bg);min-height:500px;position:relative;clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%,0 16px)}
.folder-body::before{content:'';position:absolute;inset:0 -1px -1px -1px;background:var(--color-dark);clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%,0 16px);z-index:-2}
.folder-body::after{content:'';position:absolute;inset:0;background:var(--bg);clip-path:polygon(17px 1px,calc(100% - 17px) 1px,calc(100% - 1px) 17px,calc(100% - 1px) calc(100% - 1px),1px calc(100% - 1px),1px 17px);z-index:-1}
.folder-body > p{color:var(--color-bright)}

/* All tabs same fixed width */
.folder-tab{width:168px;text-align:center;box-sizing:border-box}

/* Back — Problem: tab left, 16px narrower total (8px each side) */
.folder:nth-child(1){z-index:1;top:0;left:8px;right:8px}
.folder:nth-child(1) .folder-tab{margin-left:16px}
.folder:nth-child(1) .folder-body{height:500px;min-height:0;overflow:hidden}

/* Middle — Hypothesis: tab after Problem, 8px narrower total (4px each side) */
.folder:nth-child(2){z-index:2;top:20px;left:4px;right:4px}
.folder:nth-child(2) .folder-tab{margin-left:min(calc(164px + 32px), calc(16px + (100% - 184px) / 2))}
.folder:nth-child(2) .folder-body{height:500px;min-height:0;overflow:hidden}

/* Front — Goal: full width */
.folder:nth-child(3){z-index:3;top:40px}
.folder:nth-child(3) .folder-tab{margin-left:min(calc(328px + 48px), calc(100% - 168px - 16px))}

/* Text hidden by default — shown only when folder is being pulled */
.folder-body > p{visibility:hidden}
.folder.pulling .folder-body > p{visibility:visible}

/* Cabinet wrapper */
/* Debug toggle */
/* debug toggle removed — scroll-driven */

.folder-cabinet{position:relative}

/* Transitions */
/* Scroll-driven: no CSS transitions needed, JS interpolates every frame */

/* Default state: folders stacked flat, tray collapsed */
/* default state positions now driven by JS scroll interpolation */
/* default state overrides now handled by JS --taper custom property */
/* Edge lines positioned by JS */

/* Edge lines — single straight line from Problem notch through all notches to tray */
/* Left: (48,56)→(44,76)→(40,96)→(35,121) — slope: -4dx per 20dy */
/* Right: mirrored from right edge */
.folder-edge{position:absolute;pointer-events:none;z-index:0;background:var(--color-dark)}

/* Tray — in front of all folders, 40px below front folder BODY top, same height as folder body */
.folder-tray{position:absolute;top:121px;left:0;right:0;height:500px;z-index:4;pointer-events:none}
/* Top rectangle bar */
.folder-tray-bar{position:absolute;top:0;left:0;right:0;height:16px;background:var(--bg);border:1px solid var(--color-dark);border-bottom:none;z-index:1}
/* Upside-down trapezoid body — border layer then fill layer */
.folder-tray-body{position:absolute;top:16px;left:0;right:0;bottom:0}
.folder-tray-body::before{content:'';position:absolute;inset:0;background:var(--color-dark);clip-path:polygon(0 0,100% 0,calc(100% - var(--taper,40px)) 100%,var(--taper,40px) 100%);z-index:1}
.folder-tray-body::after{content:'';position:absolute;top:1px;left:1px;right:1px;bottom:1px;background:var(--bg);clip-path:polygon(0 0,100% 0,calc(100% - var(--taper-inner,39px)) 100%,var(--taper-inner,39px) 100%);z-index:2}

/* Shared: two-column sub-grid for hypothesis+goal */
.brief-subs{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl)}
.brief-sub-label{font-family:var(--font-primary);font-size:16px;line-height:24px;letter-spacing:.15em;color:var(--color);margin-bottom:var(--space-sm)}


.brief-syslog{border:none;border-radius:var(--radius-lg);background:var(--glass-highlight);box-shadow:0 8px 32px rgba(0,0,0,0.4);padding:var(--space-xl);font-family:var(--font-primary);position:relative}
.brief-syslog::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(var(--light-angle,to bottom right),var(--light-color,var(--color)) 0%,var(--glass-border) 33%,var(--glass-border) 62%,var(--glass-border) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.brief-syslog-cmd{color:var(--color-dim);font-size:16px;line-height:24px;margin-bottom:var(--space-xl)}
.brief-syslog-cmd span{color:var(--color-bright)}
.brief-syslog-problem{margin-bottom:var(--space-2xl)}
.brief-syslog-meta{font-size:16px;line-height:24px;color:var(--color-dark);margin-bottom:var(--space-sm)}
.brief-syslog-tag{padding:2px 6px;font-size:14px;letter-spacing:.1em}
.brief-syslog-tag[data-level="warn"]{color:var(--bg);background:var(--color-dim)}
.brief-syslog-tag[data-level="info"]{color:var(--color-bright);border:1px solid var(--color-dim)}
.brief-syslog-tag[data-level="ok"]{color:var(--bg);background:var(--color-bright)}
.brief-syslog .brief-subs .brief-syslog-meta{margin-top:0}

.brief-diff{border:1px solid var(--glass-border);border-radius:var(--radius-md);overflow:hidden;font-family:var(--font-primary);overflow:hidden}
.brief-diff-header{padding:var(--space-md) var(--space-xl);background:var(--color-glow-subtle);font-size:16px;line-height:24px;color:var(--color-dim);border-bottom:1px solid var(--border)}
.brief-diff-body{padding:var(--space-xl)}
.brief-diff-problem{margin-bottom:var(--space-2xl)}
.brief-diff-hunk{font-size:16px;line-height:24px;color:var(--color);margin-bottom:var(--space-sm)}
.brief-diff-line{padding-left:var(--space-lg)}
.brief-diff-line[data-op="-"]{color:var(--color-dark)}
.brief-diff-line[data-op="-"]::before{content:'- ';color:var(--color-dark)}
.brief-diff-line[data-op="+"]{color:var(--color-bright)}
.brief-diff-line[data-op="+"]::before{content:'+ ';color:var(--color-bright)}
.brief-diff-line[data-op=" "]{color:var(--dim)}
.brief-diff-line[data-op=" "]::before{content:'  '}

.brief-man{border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:var(--space-xl);font-family:var(--font-primary)}
.brief-man-header{display:flex;justify-content:space-between;font-size:16px;line-height:24px;color:var(--color-dim);margin-bottom:var(--space-xl);letter-spacing:.1em}
.brief-man-problem{margin-bottom:var(--space-2xl)}
.brief-man-label{color:var(--color);font-size:16px;line-height:24px;letter-spacing:.15em;text-transform:uppercase;margin-bottom:var(--space-sm)}
.brief-man-text{padding-left:var(--space-2xl)}
.brief-man-footer{display:flex;justify-content:space-between;font-size:16px;line-height:24px;color:var(--color-dark);margin-top:var(--space-xl)}

.brief-yaml{border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:var(--space-xl);font-family:var(--font-primary)}
.brief-yaml-cmd{font-size:16px;line-height:24px;color:var(--color-dim);margin-bottom:var(--space-xl)}
.brief-yaml-cmd span{color:var(--color-bright)}
.brief-yaml-sep{color:var(--color-dark);font-size:16px;line-height:24px;margin-bottom:var(--space-lg)}
.brief-yaml-problem{margin-bottom:var(--space-2xl)}
.brief-yaml-key{color:var(--color);font-size:16px;line-height:24px;letter-spacing:.1em}
.brief-yaml-key::after{content:':';color:var(--color-dark)}
.brief-yaml-val{padding-left:var(--space-xl);color:var(--color-bright)}
.brief-yaml-indent-key{color:var(--color-dim);font-size:16px;line-height:24px;padding-left:var(--space-xl)}
.brief-yaml-indent-key::after{content:' |';color:var(--color-dark)}

.brief-htop{font-family:var(--font-primary)}
.brief-htop-panel{border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:var(--space-xl);position:relative}
.brief-htop-panel-hero{padding:var(--space-2xl) var(--space-xl);margin-bottom:var(--space-xl)}
.brief-htop-label{position:absolute;top:-1px;left:var(--space-lg);transform:translateY(-50%);background:var(--bg);padding:0 var(--space-md);font-size:16px;line-height:24px;letter-spacing:.15em;color:var(--color)}
.brief-htop .brief-subs .brief-htop-panel{margin-bottom:0}

.brief-neofetch{border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:var(--space-xl);font-family:var(--font-primary)}
.brief-neofetch-problem{margin-bottom:var(--space-2xl);padding-bottom:var(--space-2xl);border-bottom:1px solid var(--border)}
.brief-neofetch-problem .text-heading{color:var(--color-bright)}
.brief-neofetch-problem-label{font-size:16px;line-height:24px;color:var(--color-dim);letter-spacing:.15em;margin-bottom:var(--space-md)}
.brief-neofetch-row{display:flex;gap:var(--space-lg);padding:var(--space-md) 0}
.brief-neofetch-key{color:var(--color);font-size:16px;line-height:24px;letter-spacing:.1em;min-width:120px;flex-shrink:0}
.brief-neofetch-key::after{content:' ─'}

.brief-sql{border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:var(--space-xl);font-family:var(--font-primary)}
.brief-sql-prompt{font-size:16px;line-height:24px;color:var(--color-dim);margin-bottom:var(--space-xl)}
.brief-sql-prompt span{color:var(--color-bright)}
.brief-sql-problem{padding:var(--space-xl);border:1px solid var(--border);margin-bottom:var(--space-2xl)}
.brief-sql-problem-label{font-size:16px;line-height:24px;color:var(--color);letter-spacing:.15em;margin-bottom:var(--space-sm)}
.brief-sql-table{width:100%;border-collapse:collapse}
.brief-sql-table th{text-align:left;padding:var(--space-md) var(--space-lg);font-size:16px;line-height:24px;color:var(--color);letter-spacing:.1em;border-bottom:2px solid var(--color-dim)}
.brief-sql-table td{padding:var(--space-lg);vertical-align:top;border-bottom:1px solid var(--border)}
.brief-sql-table td:first-child{color:var(--color);font-size:16px;line-height:24px;letter-spacing:.1em;white-space:nowrap;width:120px}
.brief-sql-footer{font-size:16px;line-height:24px;color:var(--color-dark);margin-top:var(--space-md)}

.brief-packet{border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:var(--space-xl);font-family:var(--font-primary)}
.brief-packet-header{font-size:16px;line-height:24px;color:var(--color-dim);margin-bottom:var(--space-xl);letter-spacing:.1em}
.brief-packet-problem{display:grid;grid-template-columns:48px 1fr;gap:0 var(--space-lg);margin-bottom:var(--space-2xl)}
.brief-packet-addr{color:var(--color-dark);font-size:16px;line-height:24px;padding-top:var(--space-md)}
.brief-packet-payload{border:1px solid var(--border);padding:var(--space-lg)}
.brief-packet-payload-label{font-size:16px;line-height:24px;color:var(--color);letter-spacing:.15em;margin-bottom:var(--space-sm)}
.brief-packet .brief-subs .brief-packet-block{display:grid;grid-template-columns:48px 1fr;gap:0 var(--space-lg)}

.brief-tree{border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:var(--space-xl);font-family:var(--font-primary)}
.brief-tree-cmd{font-size:16px;line-height:24px;color:var(--color-dim);margin-bottom:var(--space-xl)}
.brief-tree-cmd span{color:var(--color-bright)}
.brief-tree-root{font-size:16px;line-height:24px;color:var(--color);margin-bottom:var(--space-sm)}
.brief-tree-problem{margin-bottom:var(--space-2xl);padding-bottom:var(--space-xl);border-bottom:1px dashed var(--border)}
.brief-tree-connector{color:var(--color-dark);font-size:16px;line-height:24px}
.brief-tree-leaf{color:var(--color-dim);font-size:16px;line-height:24px;margin-left:24px}
.brief-tree-content{margin-left:48px}
.brief-tree-footer{font-size:16px;line-height:24px;color:var(--color-dark);margin-top:var(--space-xl)}

.brief-registers{border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:var(--space-xl);font-family:var(--font-primary)}
.brief-registers-cmd{font-size:16px;line-height:24px;color:var(--color-dim);margin-bottom:var(--space-xl)}
.brief-registers-problem{padding:var(--space-xl);border:1px solid var(--color-dim);margin-bottom:var(--space-2xl)}
.brief-registers-problem-label{font-size:16px;line-height:24px;color:var(--color);letter-spacing:.15em;margin-bottom:var(--space-sm)}
.brief-registers-header{display:grid;grid-template-columns:48px 48px 1fr;gap:0 var(--space-lg);font-size:16px;line-height:24px;color:var(--color);letter-spacing:.1em;padding-bottom:var(--space-md);border-bottom:1px solid var(--color-dim)}
.brief-registers-row{display:grid;grid-template-columns:48px 48px 1fr;gap:0 var(--space-lg);padding:var(--space-lg) 0;border-bottom:1px solid var(--border)}
.brief-registers-row:last-child{border-bottom:none}
.brief-registers-type{color:var(--color-dark);font-size:16px;line-height:24px}
.brief-registers-name{color:var(--color);font-size:16px;line-height:24px}
.brief-registers-footer{font-size:16px;line-height:24px;color:var(--color-dark);margin-top:var(--space-xl)}

@media(max-width:768px){
  .brief-subs{grid-template-columns:1fr}
  .brief-registers-header,.brief-registers-row{grid-template-columns:40px 40px 1fr}
}


/* Option 1 — Centered Timeline */
.pd-centered{position:relative;padding:var(--space-xl) 0}
.pd-centered-line{position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--border);transform:translateX(-50%)}
.pd-centered-item{display:flex;align-items:flex-start;gap:var(--space-md);margin-bottom:var(--space-4xl);position:relative}
.pd-centered-content{flex:1;max-width:42%}
.pd-centered-dot{width:14px;height:14px;border-radius:50%;background:var(--color-bright);flex-shrink:0;margin-top:4px;box-shadow:0 0 8px var(--color-glow)}
.pd-centered-num{font-family:var(--font-primary);font-size:var(--text-label);color:var(--color-dim);flex-shrink:0;width:32px}
.pd-left{flex-direction:row;justify-content:flex-end;padding-right:calc(50% - 7px)}
.pd-left .pd-centered-content{text-align:right}
.pd-left .pd-centered-num{text-align:left;order:1}
.pd-left .pd-centered-dot{order:0;margin-left:var(--space-md)}
.pd-right{flex-direction:row;padding-left:calc(50% - 7px)}

/* Option 2 — User Flow */
.pd-flow{display:flex;flex-direction:column;align-items:center;gap:0}
.pd-flow-node{font-family:var(--font-primary);font-size:var(--text-label);color:var(--color-bright);border:2px solid var(--color);border-radius:50px;padding:var(--space-sm) var(--space-xl);letter-spacing:.1em}
.pd-flow-arrow{font-family:var(--font-primary);color:var(--color-dim);text-align:center;line-height:1.2;padding:var(--space-sm) 0}
.pd-flow-step{width:100%;max-width:600px}
.pd-flow-box{border:1px solid var(--glass-border);padding:var(--space-lg);position:relative;border-radius:var(--radius-sm)}
.pd-flow-label{font-family:var(--font-primary);font-size:var(--text-label);color:var(--color-dim);position:absolute;top:var(--space-sm);right:var(--space-sm)}

/* Option 3 — Scroll-Driven Swap */
.pd-scroll-swap{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl);min-height:400px}
.pd-swap-display{position:sticky;top:100px;align-self:start;border:1px solid var(--glass-border);padding:var(--space-xl);background:linear-gradient(135deg,var(--glass-shine) 0%,transparent 50%);border-radius:var(--radius-md)}
.pd-swap-num{font-family:var(--font-display);font-size:80px;color:var(--color-dim);line-height:1}
.pd-swap-title{font-family:var(--font-primary);color:var(--color);font-size:var(--text-heading);margin:var(--space-md) 0}
.pd-swap-steps{display:flex;flex-direction:column;gap:var(--space-xl)}
.pd-swap-step{font-family:var(--font-primary);font-size:var(--text-body);color:var(--color-bright);padding:var(--space-lg);border:1px solid var(--glass-border);border-radius:var(--radius-sm);cursor:default;transition:border-color .3s,background .3s}
.pd-swap-step.active{border-color:var(--color);background:linear-gradient(135deg,var(--glass-shine) 0%,transparent 50%)}
.pd-swap-step-num{color:var(--color-dim);margin-right:var(--space-sm)}

/* Option 4 — Horizontal Tabs */
.pd-tabs-bar{display:flex;gap:0;border-bottom:2px solid var(--border);overflow-x:auto}
.pd-tab{font-family:var(--font-primary);font-size:var(--text-label);color:var(--color-dim);background:none;border:none;border-bottom:2px solid transparent;padding:var(--space-md) var(--space-lg);cursor:pointer;white-space:nowrap;letter-spacing:.05em;margin-bottom:-2px;transition:color .2s,border-color .2s}
.pd-tab:hover{color:var(--color-bright)}
.pd-tab.active{color:var(--color-bright);border-bottom-color:var(--color-bright)}
.pd-tabs-panels{padding:var(--space-xl) 0}
.pd-panel{display:none}
.pd-panel.active{display:block}

/* Option 5 — Isometric Cube */
.pd-cube-scene{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4xl);align-items:center}
.pd-cube-stack{perspective:800px;height:400px;display:flex;align-items:center;justify-content:center}
.pd-cube-layer{width:200px;height:40px;position:absolute;transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(30deg) translateY(calc(var(--i) * -50px))}
.pd-cube-face{position:absolute;width:100%;height:100%}
.pd-cube-top{background:var(--color-dim);opacity:.3;transform:rotateX(90deg) translateZ(20px)}
.pd-cube-front{background:var(--bg2);border:1px solid var(--color);display:flex;align-items:center;padding:0 var(--space-md);font-family:var(--font-primary);color:var(--color-bright);font-size:var(--text-label);transform:translateZ(20px)}
.pd-cube-right{background:var(--bg3);border:1px solid var(--color-dim);transform:rotateY(90deg) translateZ(100px);width:40px}
.pd-cube-label{color:var(--color-dim);margin-right:var(--space-sm)}
.pd-cube-details{display:flex;flex-direction:column;gap:var(--space-lg)}

/* Option 6 — Patch Panel */
.pd-patch{border:2px solid var(--glass-border);background:linear-gradient(135deg,var(--glass-shine) 0%,transparent 50%);border-radius:var(--radius-md);overflow:hidden}
.pd-patch-header{display:flex;justify-content:space-between;padding:var(--space-sm) var(--space-lg);border-bottom:1px solid var(--border);font-family:var(--font-primary);font-size:var(--text-label);color:var(--color-dim)}
.pd-patch-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.pd-patch-port{padding:var(--space-lg);border-right:1px solid var(--border);text-align:center}
.pd-patch-port:last-child{border-right:none}
.pd-patch-indicator{width:8px;height:8px;border-radius:50%;background:var(--color-bright);margin:0 auto var(--space-sm);box-shadow:0 0 6px var(--color-glow)}
.pd-patch-jack{font-family:var(--font-display);font-size:28px;color:var(--color-bright);margin-bottom:var(--space-xs)}
.pd-patch-label{font-family:var(--font-primary);font-size:var(--text-label);color:var(--color);letter-spacing:.1em}

/* Option 7 — Process Pipeline */
.pd-pipeline{display:flex;gap:0;overflow-x:auto}
.pd-pipe-stage{flex:1;min-width:160px;padding:var(--space-lg);border:1px solid var(--border);position:relative}
.pd-pipe-status{font-family:var(--font-primary);font-size:var(--text-label);color:var(--color-bright);background:var(--color-dark);display:inline-block;padding:2px var(--space-sm);margin-bottom:var(--space-md);letter-spacing:.1em}
.pd-pipe-connector{position:absolute;top:50%;right:-12px;width:24px;height:2px;background:var(--color);z-index:1}
.pd-pipe-connector::after{content:'';position:absolute;right:0;top:-4px;border:5px solid transparent;border-left-color:var(--color)}
.pd-pipe-stage:last-child .pd-pipe-connector{display:none}

/* Option 9 — Terminal Cat */
.pd-cat{background:linear-gradient(135deg,var(--glass-shine) 0%,transparent 50%);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:var(--space-xl);font-family:var(--font-primary)}
.pd-cat-line{color:var(--color-dim);margin-bottom:var(--space-sm);font-size:var(--text-label)}
.pd-cat-prompt{color:var(--color-bright);margin-right:var(--space-sm)}
.pd-cat-output{padding:var(--space-md) 0 var(--space-xl) var(--space-xl);border-left:2px solid var(--border);margin:var(--space-sm) 0 var(--space-lg) var(--space-sm)}
.pd-cat-heading{font-family:var(--font-primary);color:var(--color);font-size:var(--text-body);margin-bottom:var(--space-sm);letter-spacing:.05em}
.pd-cat-cursor{color:var(--color-bright);animation:blink 1s step-end infinite}

/* Option 10 — Radar */
.pd-radar{display:flex;justify-content:center}
.pd-radar-svg{width:400px;height:400px}
.pd-radar-sweep{transform-origin:200px 200px;animation:radarSweep 4s linear infinite}
@keyframes radarSweep{to{transform:rotate(360deg)}}

/* Option 11 — Circuit Board */
.pd-circuit{overflow-x:auto}
.pd-circuit-svg{width:100%;height:auto;min-width:600px}

/* Option 12 — Branching Path */
.pd-branch{position:relative;height:900px}
.pd-branch-svg{position:absolute;inset:0;width:100%;height:100%}
.pd-branch-callout{position:absolute;max-width:280px;border:1px solid var(--glass-border);padding:var(--space-md);background:linear-gradient(135deg,var(--glass-shine) 0%,transparent 50%);border-radius:var(--radius-sm)}

/* Option 13 — Stacking Layers */
.pd-stack{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4xl);align-items:center}
.pd-stack-scene{perspective:600px;height:350px;position:relative;display:flex;align-items:center;justify-content:center}
.pd-stack-layer{position:absolute;width:280px;height:50px;border:1px solid var(--color);background:var(--bg2);display:flex;align-items:center;justify-content:center;transform:rotateX(-25deg) rotateY(20deg) translateY(calc(var(--layer) * -60px));transition:transform .6s,box-shadow .6s}
.pd-stack-label{font-family:var(--font-primary);font-size:var(--text-label);color:var(--color-bright);letter-spacing:.1em}

/* Option 14 — Scroll Path */
.pd-scrollpath{position:relative;height:2500px}
.pd-scrollpath-track{position:sticky;top:0;height:100vh;overflow:hidden}
.pd-scrollpath-svg{position:absolute;left:50%;transform:translateX(-50%);width:100px;height:100%;top:0}
.pd-scrollpath-trail{stroke-dasharray:none}
.pd-scrollpath-progress{stroke-dasharray:5000;stroke-dashoffset:5000;transition:stroke-dashoffset .1s}
.pd-scrollpath-dot{filter:drop-shadow(0 0 6px var(--color-glow));transition:cy .1s}
.pd-scrollpath-node{position:absolute;left:50%;transform:translateX(-50%);opacity:0;transition:opacity .4s}
.pd-scrollpath-node.active{opacity:1}
.pd-scrollpath-ping{width:16px;height:16px;border-radius:50%;border:2px solid var(--color-bright);position:absolute;left:50%;top:0;transform:translateX(-50%);animation:pingPulse 2s ease-out infinite}
@keyframes pingPulse{0%{transform:translateX(-50%) scale(1);opacity:1}100%{transform:translateX(-50%) scale(3);opacity:0}}
.pd-scrollpath-callout{position:absolute;top:-10px;left:80px;width:320px;border:none;background:linear-gradient(135deg,var(--glass-shine) 0%,transparent 50%);padding:var(--space-lg);border-radius:var(--radius-lg);box-shadow:0 8px 32px rgba(0,0,0,0.4)}
.pd-callout-right{left:auto;right:80px}

/* Mobile timeline fallback */
.pd-mobile-timeline{display:none;margin-top:var(--space-4xl)}

/* Option 15 — Stacking Assembly (Oxide Rack style) */
.pd-assembly{position:relative;height:7500px;margin-top:var(--space-section)}
.pd-assembly-sticky{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:40% 1fr;grid-template-rows:auto auto 1fr;gap:var(--space-md) var(--space-xl);align-items:center;padding:var(--space-xl) 0;overflow:hidden}
.pd-assembly-title{grid-column:1/-1;grid-row:1;justify-self:center;align-self:start;margin:0}
.pd-phase-indicator{grid-column:1/-1;grid-row:2;justify-self:center;display:flex;gap:var(--space-xl);align-self:start}
.pd-phase{display:flex;align-items:center;gap:var(--space-sm);color:var(--color-dark);font-size:var(--text-label);letter-spacing:.12em}
.pd-phase-led{flex-shrink:0;width:1em;display:inline-block;text-align:center}
.pd-phase-led::after{content:'◇';position:relative;top:-3px}
.pd-phase.active{color:var(--color-bright)}
.pd-phase.active .pd-phase-led::after{content:'◆';text-shadow:0 0 8px var(--color-glow)}
.pd-phase.pulsing{color:var(--color)}
.pd-phase.pulsing .pd-phase-led::after{animation:brailleSpin .8s steps(1) infinite;top:0}
@keyframes brailleSpin{0%{content:'⠋'}12.5%{content:'⠙'}25%{content:'⠹'}37.5%{content:'⠸'}50%{content:'⠼'}62.5%{content:'⠴'}75%{content:'⠦'}87.5%{content:'⠧'}}
.pd-assembly-svg-wrap{grid-row:3;grid-column:1;display:flex;align-items:center;overflow:visible;position:relative}
@keyframes crtOff{
0%{clip-path:inset(0 0 0 0);opacity:1;filter:brightness(1)}
60%{clip-path:inset(40% 0 0 0);filter:brightness(1.5)}
85%{clip-path:inset(85% 0 0 0);filter:brightness(2.5)}
100%{clip-path:inset(100% 0 0 0);opacity:1;filter:brightness(4)}
}
@keyframes crtOn{
0%{clip-path:inset(0 0 100% 0);opacity:1;filter:brightness(4) drop-shadow(0 0 30px var(--color-bright))}
30%{clip-path:inset(0 0 70% 0);filter:brightness(2) drop-shadow(0 0 20px var(--color-glow))}
60%{clip-path:inset(0 0 30% 0);filter:brightness(1.3) drop-shadow(0 0 15px var(--color-glow))}
100%{clip-path:inset(0 0 0 0);opacity:1;filter:drop-shadow(0 0 20px var(--color-glow)) drop-shadow(0 0 40px var(--color-glow))}
}
.rack-cell{opacity:0}
.pd-assembly-svg-wrap>svg:first-child.crt-off{animation:crtOff .4s cubic-bezier(.4,0,1,.6) forwards}
.pd-problem-complete.glitch-in,.pd-solution-complete.glitch-in{animation:crtOn .4s cubic-bezier(.2,0,.3,1) forwards}
.pd-assembly-stack-area{position:relative;height:450px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}

/* Oxide-style block: dashed border + depth offset via ::before */
.pd-oxide-block{position:relative;width:220px;height:64px;border:1.5px dashed var(--color);display:flex;align-items:center;justify-content:center;background:var(--bg)}
.pd-oxide-block::before{content:'';position:absolute;inset:-1.5px;width:100%;height:100%;border:1.5px dashed var(--color-dim);transform:translate(10px,-10px);z-index:-1;background:var(--bg)}
.pd-oxide-block::after{content:'';position:absolute;top:-10px;right:-10px;width:10px;height:calc(100% + 1.5px);border-right:1.5px dashed var(--color-dim);border-top:1.5px dashed var(--color-dim)}
.pd-oxide-label{font-family:var(--font-primary);font-size:var(--text-label);color:var(--color-bright);letter-spacing:.1em}

/* Dropper */
.pd-assembly-dropper{position:absolute;top:-100px;left:50%;transform:translateX(-50%);transition:top .5s cubic-bezier(.4,.0,.2,1);opacity:0;z-index:10}
.pd-assembly-dropper.dropping{opacity:1}

/* Landed stack */
.pd-assembly-landed{display:flex;flex-direction:column-reverse;align-items:center;gap:0}
.landed-block{opacity:0;transition:opacity .3s;margin-top:-1.5px}
.landed-block.placed{opacity:1}
.landed-block.current{border-color:var(--color-bright)}
.landed-block.current::before{border-color:var(--color)}
.landed-block.current .pd-oxide-label{color:var(--color-bright);text-shadow:0 0 8px var(--color-glow)}

/* Result */
.pd-assembly-result{font-family:var(--font-primary);font-size:var(--text-heading);color:var(--color-bright);letter-spacing:.15em;opacity:0;transform:scale(.9);transition:all .8s ease-out;margin-top:var(--space-xl);text-align:center;position:absolute;bottom:20px;left:0;right:0}
.pd-assembly-result.complete{opacity:1;transform:scale(1);text-shadow:0 0 20px var(--color-glow),0 0 40px var(--color-glow),0 0 60px var(--color-glow)}

/* Definition (right side) */
.pd-assembly-def{grid-row:3;grid-column:2;transition:opacity .3s;opacity:0;position:relative;padding:16px 0 16px var(--space-lg);border-left:2px solid var(--color);margin-left:100px}
.pd-assembly-def::before{content:'';position:absolute;left:0;top:0;width:24px;height:2px;background:var(--color)}
.pd-assembly-def::after{content:'';position:absolute;left:0;bottom:0;width:24px;height:2px;background:var(--color)}
.pd-assembly-def-text{max-width:400px}
.pd-assembly-def-title.card-title{color:var(--bg);background:var(--color-bright);display:inline;padding:2px var(--space-sm);font-size:var(--text-label);letter-spacing:.05em;line-height:2}
.pd-assembly-def-line{display:none}
.pd-assembly-connector{z-index:5}

/* Scroll space */
.pd-assembly-scroll-space{height:7500px}

/* Option 16 — Overlapping Folders */
.pd-folders{position:relative;display:flex;height:400px}
.pd-folder{position:absolute;top:0;bottom:0;width:75%;background:linear-gradient(135deg,var(--glass-shine) 0%,transparent 50%);border:1px solid var(--glass-border);transition:all .4s ease-out;cursor:pointer;border-radius:var(--radius-md)}
.pd-folder:nth-child(1){left:0;z-index:5}
.pd-folder:nth-child(2){left:15%;z-index:4}
.pd-folder:nth-child(3){left:30%;z-index:3}
.pd-folder:nth-child(4){left:45%;z-index:2}
.pd-folder:nth-child(5){left:60%;z-index:1}
.pd-folder.active{z-index:10;border-color:var(--color)}
.pd-folder-tab{position:absolute;top:-28px;left:0;padding:4px var(--space-lg);font-family:var(--font-primary);font-size:var(--text-label);color:var(--color-dim);letter-spacing:.1em;border:1px solid var(--border);border-bottom:none;background:var(--bg2)}
.pd-folder.active .pd-folder-tab{color:var(--color-bright);border-color:var(--color);background:var(--bg)}
.pd-folder-body{padding:var(--space-xl);opacity:0;transition:opacity .3s}
.pd-folder.active .pd-folder-body{opacity:1}


/* Scroll capture — tall invisible div */
.vn-scroll{height:20000px;position:relative}

/* Fixed desktop viewport */
.vn-desktop{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;background:transparent}
.vn-desktop::after{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,var(--scanline) 2px,var(--scanline) 4px);pointer-events:none;z-index:50}
.vn-screen{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--space-xl);position:relative;overflow:hidden}

/* Dock — fixed at bottom */
.vn-dock{display:flex;align-items:center;justify-content:center;gap:var(--space-md);padding:var(--space-sm) var(--space-xl);background:transparent;border:none;flex-shrink:0;position:relative;z-index:80}
.vn-dock-icon{width:48px;height:48px;border-radius:var(--radius-md);background:var(--glass-tint-subtle);border:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--color-dark);position:relative;transition:color .3s,border-color .3s,box-shadow .3s,transform .3s}
.vn-dock-icon.active{color:var(--color-bright);border-color:var(--color);box-shadow:0 0 16px var(--color-glow),0 0 32px var(--color-glow);transform:scale(1.35) translateY(-6px)}
.vn-dock-sep{width:1px;height:32px;background:var(--border);margin:0 var(--space-xs)}
.dock-badge{position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:50%;background:var(--color-bright);font-family:var(--font-primary);font-size:9px;color:var(--bg);display:flex;align-items:center;justify-content:center}
.vn-dock-icon.dock-bouncing{animation:dockUp .35s cubic-bezier(.2,1,.4,1) infinite alternate}
@keyframes dockUp{from{transform:translateY(0)}to{transform:translateY(-20px)}}
/* Dock icons — mask-image so they inherit currentColor and theme with active state */
.vn-dock-icon[data-icon]::before{content:'';width:24px;height:24px;background-color:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.vn-dock-icon[data-icon="slack"]::before{-webkit-mask-image:url("/assets/work/helium/images/slack_icon.svg");mask-image:url("/assets/work/helium/images/slack_icon.svg")}
.vn-dock-icon[data-icon="amplitude"]::before{-webkit-mask-image:url("/assets/work/helium/images/amplitude_icon.svg");mask-image:url("/assets/work/helium/images/amplitude_icon.svg")}
.vn-dock-icon[data-icon="chrome"]::before{-webkit-mask-image:url("/assets/work/helium/images/chrome_icon.svg");mask-image:url("/assets/work/helium/images/chrome_icon.svg")}
.vn-dock-icon[data-icon="procreate"]::before{-webkit-mask-image:url("/assets/work/helium/images/procreate_icon.svg");mask-image:url("/assets/work/helium/images/procreate_icon.svg")}
.vn-dock-icon[data-icon="simulator"]::before{-webkit-mask-image:url("/assets/work/helium/images/simulator_icon.svg");mask-image:url("/assets/work/helium/images/simulator_icon.svg")}
.vn-dock-icon[data-icon="github"]::before{-webkit-mask-image:url("/assets/work/helium/images/github_icon.svg");mask-image:url("/assets/work/helium/images/github_icon.svg")}
/* Terminal dock icon — text ">_" anchored top-left to mimic macOS Terminal.app */
#dock-terminal{justify-content:flex-start;align-items:flex-start;padding:6px 8px;font-family:var(--font-primary);font-size:20px;letter-spacing:-.05em}

/* App windows — contained, centered, macOS Genie effect */
.vn-app{position:absolute;display:flex;flex-direction:column;width:100%;max-width:1000px;height:80%;max-height:600px;left:50%;top:50%;pointer-events:none;visibility:hidden;transform:translate(-50%,-50%);z-index:60}
.vn-app-inner{flex:1;display:flex;flex-direction:column;border:none;border-radius:var(--radius-xl);overflow:hidden;background:linear-gradient(135deg,var(--glass-shine) 0%,transparent 50%);transform-origin:var(--dock-origin-x,50%) bottom;transform:scaleX(.08) scaleY(.05) translateY(120%);opacity:0;transition:transform .45s cubic-bezier(.16,.85,.3,1),opacity .25s;box-shadow:0 16px 64px rgba(0,0,0,0.5);position:relative}
.vn-app-inner::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(calc(var(--light-angle,135deg) + var(--sweep,0deg)),var(--color) 0%,var(--glass-border) 33%,var(--glass-border) 62%,var(--glass-border) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:1}
.vn-app .slack-window::before,.vn-app .terminal::before{display:none}
.vn-app.open{visibility:visible;pointer-events:auto}
.vn-app.open .vn-app-inner{transform:scaleX(1) scaleY(1) translateY(0);opacity:1}
/* Closing: same genie in reverse */
.vn-app.closing{visibility:visible;pointer-events:none}
.vn-app.closing .vn-app-inner{transform:scaleX(.08) scaleY(.05) translateY(120%);opacity:0;transition:transform .3s cubic-bezier(.5,0,.9,.4),opacity .2s .1s}

/* Comic SFX — single arc of letters from dock icon, each letter bigger */
.dock-sfx{position:absolute;bottom:70px;left:var(--dock-slack-x,280px);pointer-events:none;display:none;z-index:50}
.dock-sfx.show{display:block}
.dock-sfx-letter{font-family:var(--font-primary);color:var(--color-bright);position:absolute;line-height:1;opacity:0}
.dock-sfx.show .dock-sfx-letter{animation:sfxPop .15s ease-out forwards}
.dock-sfx.show .dock-sfx-knock{animation:sfxSlam .1s cubic-bezier(.1,.8,.2,1) forwards}
@keyframes sfxPop{0%{opacity:0;scale:0}100%{opacity:1;scale:1}}
@keyframes sfxSlam{0%{opacity:0;scale:1.5}40%{opacity:1;scale:.92}100%{opacity:1;scale:1}}

/* Slack title bar + window */
.slack-bar{display:flex;align-items:center;gap:var(--space-sm);padding:0 16px;height:32px;background:var(--glass-tint-faint);border-bottom:none;font-family:var(--font-primary);font-size:12px;color:var(--color-dim);letter-spacing:.08em;flex-shrink:0;position:relative}
.slack-bar::after{content:'';position:absolute;bottom:0;left:1px;right:1px;height:1px;background:linear-gradient(90deg,var(--color),var(--glass-border) 50%,var(--glass-border))}
.slack-dots{display:flex;gap:5px;margin-right:var(--space-sm)}
.slack-dots span{width:10px;height:10px;border-radius:50%;border:1px solid var(--color-dark);background:transparent}
.slack-dots span:first-child{background:var(--color);border-color:var(--color)}
.vn-app .slack-window{width:100%;flex:1;display:grid;grid-template-columns:200px 1fr;border:none;overflow:hidden;border-radius:0}
.vn-app .slack-main{overflow-y:hidden;display:flex;flex-direction:column}
.vn-app .slack-messages{overflow-y:auto;flex:1;min-height:0;padding-right:var(--space-md);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}

/* Terminal fills the app window */
.vn-app .terminal{width:100%;height:100%;display:flex;flex-direction:column;border:none;border-radius:var(--radius-lg)}
.vn-app .terminal-body{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}

/* GitHub PR in app window */
.vn-app .gh-pr{border:none}

/* Browser window */
.browser-window{flex:1;overflow:hidden;background:var(--glass-highlight);position:relative;display:flex;flex-direction:column}
#app-browser-mobbin .vn-app-inner::before{z-index:10001}
#app-browser-mobbin .vn-thought{background:linear-gradient(calc(var(--light-angle,135deg) + var(--sweep,0deg)),var(--glass-shine) 0%,transparent 50%),radial-gradient(ellipse 800px 600px at 15% 10%,rgba(255,149,0,0.15),transparent 60%),radial-gradient(ellipse 700px 700px at 85% 50%,rgba(255,120,0,0.10),transparent 60%),radial-gradient(ellipse 600px 500px at 40% 80%,rgba(200,120,0,0.08),transparent 60%),radial-gradient(ellipse 500px 400px at 60% 20%,rgba(255,179,64,0.06),transparent 60%),var(--bg);background-size:auto,100vw 100vh,100vw 100vh,100vw 100vh,100vw 100vh,100vw 100vh}
#app-browser-mobbin .thought-dot{background:radial-gradient(ellipse 800px 600px at 15% 10%,rgba(255,149,0,0.15),transparent 60%),radial-gradient(ellipse 700px 700px at 85% 50%,rgba(255,120,0,0.10),transparent 60%),radial-gradient(ellipse 600px 500px at 40% 80%,rgba(200,120,0,0.08),transparent 60%),radial-gradient(ellipse 500px 400px at 60% 20%,rgba(255,179,64,0.06),transparent 60%),var(--bg);background-size:100vw 100vh}
.browser-header{width:100%;height:auto;display:block;flex-shrink:0;position:relative;z-index:2}

/* Sketch window — live drawing */
.sketch-window{flex:1;overflow:hidden;background:#fff;position:relative;display:flex;align-items:center;justify-content:center;padding:var(--space-md)}
.sketch-svg{width:100%;height:100%;object-fit:contain;visibility:hidden;pointer-events:none}
.sketch-svg.ready{visibility:visible}
/* Amplitude window */
.amplitude-window{flex:1;display:flex;flex-direction:column;justify-content:center;padding:var(--space-xl);padding-bottom:calc(var(--space-xl) + 80px);gap:var(--space-lg);background:var(--glass-highlight);overflow:hidden}
.amplitude-header{display:flex;flex-direction:column;gap:0}
.amplitude-title{font-family:var(--font-primary);font-size:22px;color:var(--color-bright);letter-spacing:.04em}
.amplitude-title.text-body{font-size:var(--type-body-size);line-height:var(--type-body-line)}
.amplitude-subtitle{font-family:var(--font-primary);font-size:14px;color:var(--color-dark);letter-spacing:.06em}
.amplitude-subtitle.text-caption{font-size:var(--type-caption-size);line-height:var(--type-caption-line)}
.amplitude-chart{display:flex;flex-direction:column;gap:var(--space-lg);flex:1;justify-content:center}
.amplitude-row{display:grid;grid-template-columns:180px 1fr;align-items:center;gap:var(--space-md)}
.amplitude-label{display:flex;align-items:center;gap:var(--space-sm)}
.amplitude-plan-name{font-family:var(--font-primary);font-size:16px;color:var(--color-bright);letter-spacing:.04em}
.amplitude-plan-name.text-label{font-size:var(--type-label-size);line-height:var(--type-label-line)}
.amplitude-plan-tag{font-family:var(--font-primary);font-size:12px;padding:3px 10px;border-radius:var(--radius-pill);letter-spacing:.08em;text-transform:uppercase}
.amplitude-plan-tag.text-caption{font-size:var(--type-caption-size);line-height:var(--type-caption-line)}
.amplitude-tag-free{background:var(--color-dark);color:var(--bg)}
.amplitude-tag-paid{background:var(--color);color:var(--bg)}
.amplitude-bar-single{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:var(--space-sm)}
.amplitude-bars-pair{display:flex;flex-direction:column;gap:4px}
.amplitude-bar-line{display:grid;grid-template-columns:16px 64px 1fr;align-items:center;gap:var(--space-xs)}
.amplitude-ab{font-family:var(--font-primary);font-size:14px;color:var(--color-dim);letter-spacing:.06em}
.amplitude-ab.text-caption{font-size:var(--type-caption-size);line-height:var(--type-caption-line)}
.amplitude-ab-ghost{color:var(--color-dark)}
.amplitude-bar-track{height:28px;background:var(--glass-tint-faint);border-radius:4px;display:flex;align-items:center}
.amplitude-bar-track-ghost{overflow:hidden}
.amplitude-bar-ghost{height:100%;border-radius:4px;width:0;background-color:transparent;background-image:radial-gradient(var(--color-dark) 1px,transparent 1px);background-size:3px 3px;opacity:.6}
.amplitude-bar{height:100%;border-radius:4px;width:0;transition:none}
.amplitude-bar-free{background:linear-gradient(90deg,var(--color-dark),var(--color-dim))}
.amplitude-bar-paid{background:linear-gradient(90deg,var(--color),var(--color-bright))}
.amplitude-pct{font-family:var(--font-primary);font-size:15px;color:var(--color-dim);text-align:right;letter-spacing:.04em}
.amplitude-pct.text-label{font-size:var(--type-label-size);line-height:var(--type-label-line)}
.amplitude-pct-ghost{color:var(--color-dark)}
.amplitude-delta{font-family:var(--font-primary);font-size:14px;letter-spacing:.04em;white-space:nowrap;padding:0 var(--space-sm);flex-shrink:0}
.amplitude-delta.text-label{font-size:var(--type-label-size);line-height:var(--type-label-line)}
.amplitude-delta-up{color:var(--color-bright)}
.amplitude-delta-down{color:var(--color-dark)}
.amplitude-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg)}
.amplitude-stat{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-lg);background:var(--glass-tint-faint);border-radius:8px;opacity:0;transition:opacity .4s ease-out}
.amplitude-stat-value{font-family:var(--font-primary);font-size:36px;letter-spacing:.02em;line-height:1;background:linear-gradient(90deg,var(--color),var(--color-bright));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.amplitude-stat-value.text-title{font-size:var(--type-title-size);line-height:var(--type-title-line)}
.amplitude-stat-label{font-family:var(--font-primary);font-size:13px;color:var(--color-dim);letter-spacing:.06em;text-transform:uppercase}
.amplitude-stat-label.text-caption{font-size:var(--type-caption-size);line-height:var(--type-caption-line)}

.vn-titlecard{flex-direction:column;gap:var(--space-md)}
.vn-titlecard-text{font-family:var(--font-primary);font-size:28px;color:var(--color-dim);letter-spacing:.2em;text-transform:uppercase}
.vn-titlecard-text.text-title{font-size:var(--type-title-size);line-height:var(--type-title-line)}

#app-amplitude .vn-thought,#app-amplitude-results .vn-thought{background:linear-gradient(calc(var(--light-angle,135deg) + var(--sweep,0deg)),var(--glass-shine) 0%,transparent 50%),radial-gradient(ellipse 800px 600px at 15% 10%,rgba(255,149,0,0.15),transparent 60%),radial-gradient(ellipse 700px 700px at 85% 50%,rgba(255,120,0,0.10),transparent 60%),radial-gradient(ellipse 600px 500px at 40% 80%,rgba(200,120,0,0.08),transparent 60%),radial-gradient(ellipse 500px 400px at 60% 20%,rgba(255,179,64,0.06),transparent 60%),var(--bg);background-size:auto,100vw 100vh,100vw 100vh,100vw 100vh,100vw 100vh,100vw 100vh}
#app-amplitude .thought-dot,#app-amplitude-results .thought-dot{background:radial-gradient(ellipse 800px 600px at 15% 10%,rgba(255,149,0,0.15),transparent 60%),radial-gradient(ellipse 700px 700px at 85% 50%,rgba(255,120,0,0.10),transparent 60%),radial-gradient(ellipse 600px 500px at 40% 80%,rgba(200,120,0,0.08),transparent 60%),radial-gradient(ellipse 500px 400px at 60% 20%,rgba(255,179,64,0.06),transparent 60%),var(--bg);background-size:100vw 100vh}
#app-sketch .vn-app-inner::before{z-index:10001}
#app-sketch .vn-thought{background:linear-gradient(calc(var(--light-angle,135deg) + var(--sweep,0deg)),var(--glass-shine) 0%,transparent 50%),radial-gradient(ellipse 800px 600px at 15% 10%,rgba(255,149,0,0.15),transparent 60%),radial-gradient(ellipse 700px 700px at 85% 50%,rgba(255,120,0,0.10),transparent 60%),radial-gradient(ellipse 600px 500px at 40% 80%,rgba(200,120,0,0.08),transparent 60%),radial-gradient(ellipse 500px 400px at 60% 20%,rgba(255,179,64,0.06),transparent 60%),var(--bg);background-size:auto,100vw 100vh,100vw 100vh,100vw 100vh,100vw 100vh,100vw 100vh}
#app-sketch .thought-dot{background:radial-gradient(ellipse 800px 600px at 15% 10%,rgba(255,149,0,0.15),transparent 60%),radial-gradient(ellipse 700px 700px at 85% 50%,rgba(255,120,0,0.10),transparent 60%),radial-gradient(ellipse 600px 500px at 40% 80%,rgba(200,120,0,0.08),transparent 60%),radial-gradient(ellipse 500px 400px at 60% 20%,rgba(255,179,64,0.06),transparent 60%),var(--bg);background-size:100vw 100vh}
.browser-scroll{flex:1;overflow:hidden;position:relative}
.browser-scrollable{width:100%;height:auto;display:block;transition:transform .6s ease-out}

/* Phone scene — no window chrome, just centered */
.vn-app-phone{border:none;background:transparent;max-height:none;height:auto}
.vn-app-phone .vn-app-inner{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--space-xl);padding:0;overflow:visible;flex-wrap:nowrap;background:transparent;border-radius:0;box-shadow:none;min-height:0;transition:transform .45s cubic-bezier(.16,.85,.3,1),opacity .25s}
.vn-app-phone .vn-app-inner::before{display:none}
.vn-app-phone .phone-frame{width:340px}
.vn-phone-thoughts{position:relative;flex:1 1 0;min-width:0;overflow:visible;z-index:10001}
.vn-phone-thoughts:empty{display:none}

/* Thought bubbles */
.vn-thought{font-family:var(--font-primary);font-size:16px;color:var(--color-bright);font-style:italic;line-height:1.4;padding:var(--space-sm) var(--space-md);border:none;background:linear-gradient(calc(var(--light-angle,135deg) + var(--sweep,0deg)),var(--glass-shine) 0%,transparent 50%);border-radius:var(--radius-xl);visibility:hidden;opacity:0;position:var(--vn-thought-position,absolute);top:var(--vn-thought-top,50%);right:var(--vn-thought-right,auto);bottom:var(--vn-thought-bottom,auto);left:var(--vn-thought-left,auto);margin:var(--vn-thought-margin,0);transform:var(--vn-thought-transform-hidden,translateY(calc(-50% + 12px)));box-shadow:0 8px 32px rgba(0,0,0,0.4);transition:opacity .3s,transform .3s ease-out,visibility 0s .3s}
.vn-thought.text-body{font-size:var(--type-body-size);line-height:var(--type-body-line)}
.vn-thought::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(calc(var(--light-angle,135deg) + var(--sweep,0deg)),var(--light-color,var(--color)) 0%,var(--glass-border) 33%,var(--glass-border) 62%,var(--glass-border) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:1}
.thought-dot{position:absolute;border-radius:50%;background:linear-gradient(135deg,var(--glass-shine) 0%,transparent 50%);outline:1px solid var(--glass-border);box-shadow:0 4px 12px rgba(0,0,0,0.3)}
.thought-dot-lg{width:10px;height:10px;left:var(--thought-dot-lg-left,auto);right:var(--thought-dot-lg-right,auto);bottom:var(--thought-dot-lg-bottom,-14px)}
.thought-dot-sm{width:6px;height:6px;left:var(--thought-dot-sm-left,auto);right:var(--thought-dot-sm-right,auto);bottom:var(--thought-dot-sm-bottom,-24px)}
#thoughts-left,
#thoughts-reveal-left,
.browser-thought-left{--thought-dot-lg-left:auto;--thought-dot-lg-right:20px;--thought-dot-sm-left:auto;--thought-dot-sm-right:10px}
#thoughts-right,
#thoughts-reveal-right,
.browser-thought-right{--thought-dot-lg-left:20px;--thought-dot-lg-right:auto;--thought-dot-sm-left:10px;--thought-dot-sm-right:auto}
.vn-app.open .vn-thought.show{visibility:visible;opacity:1;transform:var(--vn-thought-transform-visible,translateY(-50%));transition:opacity .3s,transform .3s ease-out,visibility 0s}
.vn-thought-bright{color:var(--color-bright);font-style:normal;border-color:var(--color)}

/* Hidden elements revealed by step */
.vn-hidden{display:none}
.vn-msg:not(.show){display:none}

/* Old Slack messages (previous day) */
.vn-msg.slack-old{opacity:.35}

/* Slack date divider */
/* Slack message input bar */
.slack-input-bar{flex-shrink:0;border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:10px 14px;margin:var(--space-xl) 0 var(--space-sm);font-family:var(--font-primary);font-size:var(--text-label);transition:border-color .3s,box-shadow .3s;background:linear-gradient(135deg,var(--glass-shine) 0%,transparent 50%)}
.slack-input-placeholder{color:var(--color-dark);min-height:1em;display:block}
.slack-input-placeholder::after{content:' ▼';font-size:12px;display:inline-block;visibility:hidden}
.slack-input-bar.glow{border-color:var(--color);box-shadow:0 0 12px var(--color-glow)}
.slack-input-bar.glow .slack-input-placeholder{background:linear-gradient(90deg,var(--color-bright) 0%,var(--color-bright) var(--fill,0%),var(--color-dark) var(--fill,0%),var(--color-dark) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.slack-input-bar.glow .slack-input-placeholder::after{visibility:visible;-webkit-text-fill-color:var(--color-dark);animation:hintArrow 1s ease-in-out infinite}
@keyframes hintArrow{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(3px);opacity:1}}
.slack-date-divider{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md) 0;margin:var(--space-sm) 0}
.slack-date-divider::before,.slack-date-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.slack-date-divider span{font-family:var(--font-primary);font-size:12px;color:var(--color-dim);letter-spacing:.1em;white-space:nowrap}

/* Typewriter */
.vn-typewriter{white-space:pre-wrap}
.vn-typewriter-cursor{display:inline-block;width:10px;height:1.1em;background:var(--color-bright);vertical-align:text-bottom;animation:blink 1s step-end infinite;margin-left:2px}

/* Terminal idle hint — behind cursor, fills on scroll */
.terminal-idle-hint{font-size:inherit;font-variant-emoji:text;font-family:'Share Tech Mono','Noto Sans Symbols 2',monospace}
.terminal-idle-hint.text-label{font-size:var(--type-label-size);line-height:var(--type-label-line)}
.terminal-idle-hint-text{font:inherit;background:linear-gradient(90deg,var(--color-bright) 0%,var(--color-bright) var(--fill,0%),var(--color-dark) var(--fill,0%),var(--color-dark) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.terminal-idle-hint-arrow{display:inline-flex;align-items:flex-end;justify-content:center;min-width:1.15ch;height:1em;margin-left:.15em;text-align:center;line-height:1;vertical-align:-0.08em;overflow:hidden;contain:paint;overflow-anchor:none;-webkit-text-fill-color:var(--color-dark);color:var(--color-dark);animation:hintArrow 1s ease-in-out infinite}

/* Indicator flash — applied by JS (class-based to avoid filter+background-clip rendering bugs) */
.slack-input-bar.glow .slack-input-placeholder.indicator-flash,
.slack-input-bar.glow .slack-input-placeholder.indicator-flash::after,
.terminal-idle-hint.indicator-flash,
.terminal-idle-hint.indicator-flash .terminal-idle-hint-text,
.terminal-idle-hint.indicator-flash .terminal-idle-hint-arrow,
.vn-scroll-hint.indicator-flash,
.vn-scroll-hint.indicator-flash::after{-webkit-text-fill-color:#fff;text-shadow:0 0 6px var(--color-bright),0 0 14px var(--color-bright)}
.terminal-idle-hint.indicator-flash .terminal-idle-hint-arrow{text-shadow:none;filter:drop-shadow(0 0 6px var(--color-bright)) drop-shadow(0 0 14px var(--color-bright))}

/* End card */
.vn-endcard{position:absolute;inset:0;display:none;align-items:center;justify-content:center}
.vn-endcard.open{display:flex}
.vn-end-prompt{font-family:var(--font-primary);font-size:var(--text-body);color:var(--color-dim);display:flex;align-items:center;gap:4px}
.vn-end-prompt .cursor{display:inline-block;width:12px;height:24px;background:var(--color-bright);animation:blink 1s step-end infinite}

/* Scroll hint — VN continue prompt with fill progress */
.vn-scroll-hint{position:absolute;bottom:16px;right:max(24px,calc((100vw - 1480px) / 2 + 24px));max-width:min(360px,calc(100vw - 48px));text-align:right;font-family:'Share Tech Mono','Noto Sans Symbols 2',monospace;font-size:20px;font-variant-emoji:text;opacity:0;transition:opacity .4s;display:flex;align-items:center;justify-content:flex-end;gap:var(--space-sm);background:linear-gradient(90deg,var(--color-bright) 0%,var(--color-bright) var(--fill,0%),var(--color-dark) var(--fill,0%),var(--color-dark) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.vn-scroll-hint.text-label{font-size:var(--type-label-size);line-height:var(--type-label-line)}
.vn-scroll-hint.show{opacity:1}
.vn-scroll-hint::after{content:'▼\FE0E';font-size:14px;-webkit-text-fill-color:var(--color-dark);display:inline-block;animation:hintArrow 1s ease-in-out infinite}

/* Simulator login screen — fills viewport, IO triggers lock */
.vn-login{height:100dvh;display:flex;align-items:center;justify-content:center;margin-top:var(--space-section)}
.vn-login-inner{text-align:center}
.vn-login-title{font-family:var(--font-primary);font-size:1.6rem;letter-spacing:.35em;color:var(--color-bright);text-shadow:0 0 20px var(--color-glow);margin-bottom:var(--space-xl)}
.vn-login-prompt{font-family:var(--font-primary);font-size:.9rem;letter-spacing:.15em;color:var(--color-dim);display:flex;align-items:center;justify-content:center}
.vn-login-label{color:var(--color-dark);margin-right:var(--space-sm)}
.vn-login-field{color:var(--color-bright);letter-spacing:.3em}
.vn-login-cursor{}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* Boot sequence (uses vn-endcard base for positioning) */
.vn-boot .vn-boot-inner{width:540px;max-width:90%}
.vn-boot-logo{font-family:var(--font-primary);font-size:1.4rem;letter-spacing:.3em;color:var(--color-bright);text-align:center;text-shadow:0 0 20px var(--color-glow)}
.vn-boot-subtitle{font-family:var(--font-primary);font-size:.7rem;letter-spacing:.2em;color:var(--color-dark);text-align:center;margin-top:var(--space-xs)}
.vn-boot-log{font-family:var(--font-primary);font-size:.75rem;color:var(--color-dim);line-height:1.9;margin:var(--space-xl) 0 var(--space-md)}
.vn-boot-log .boot-ln{opacity:0;animation:bootLnIn .25s ease forwards}
.vn-boot-log .boot-ln.ok{color:var(--color-bright)}
@keyframes bootLnIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.vn-boot-bar{height:2px;background:var(--color-dark);border-radius:1px;overflow:hidden}
.vn-boot-fill{height:100%;width:0%;background:var(--color-bright);box-shadow:0 0 8px var(--color-glow);transition:width .25s ease}

/* CRT TV off/on — wraps vn-desktop so content transforms with it */
#tv-screen{display:none;position:fixed;inset:0;z-index:100;background:radial-gradient(ellipse 800px 600px at 15% 10%,rgba(255,149,0,0.15),transparent 60%),radial-gradient(ellipse 700px 700px at 85% 50%,rgba(255,120,0,0.10),transparent 60%),radial-gradient(ellipse 600px 500px at 40% 80%,rgba(200,120,0,0.08),transparent 60%),radial-gradient(ellipse 500px 400px at 60% 20%,rgba(255,179,64,0.06),transparent 60%),var(--bg);background-attachment:fixed}
#tv-screen.tv-off{animation:tvOff .5s ease forwards}
#tv-screen.tv-on{animation:tvOn .8s ease forwards}
@keyframes tvOff{
  0%{opacity:1;filter:brightness(1);transform:scale(1)}
  40%{opacity:1;filter:brightness(5);transform:scaleY(.005)}
  100%{opacity:0;filter:brightness(0);transform:scaleY(0)}
}
@keyframes tvOn{
  0%{opacity:0;transform:scaleY(.005) scaleX(.5);filter:brightness(10)}
  20%{opacity:1;transform:scaleY(.005) scaleX(1);filter:brightness(5)}
  50%{transform:scaleY(1) scaleX(1);filter:brightness(2)}
  100%{transform:scaleY(1) scaleX(1);filter:brightness(1);opacity:1}
}

/* Scroll lock — bulletproof overflow block during login animation */
html.vn-scroll-lock,html.vn-scroll-lock body{overflow:hidden}
.helium-page{overflow:auto}
#helium-intro{position:relative;z-index:200;padding-bottom:0}
#dock-badge-slack{display:none}

/* Debug menu */
.debug-menu{position:fixed;top:12px;left:12px;z-index:99999;font-family:var(--font-primary);font-size:14px;letter-spacing:.05em;user-select:none}
.debug-menu-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-dark);font-size:18px;line-height:1;border-radius:4px;background:rgba(0,0,0,0.4)}
.debug-menu-dropdown{display:none;position:absolute;top:32px;left:0;background:rgba(10,8,5,0.95);border:1px solid var(--color-dark);border-radius:6px;padding:4px 0;min-width:180px;max-height:80vh;overflow-y:auto}
.debug-menu-divider{height:1px;margin:4px 0;background:rgba(255,255,255,0.08)}
.dbg-item{display:block;width:100%;padding:6px 14px;border:0;background:none;cursor:pointer;color:var(--color-dim);white-space:nowrap;text-align:left;font:inherit;letter-spacing:inherit}
.dbg-item:hover,.dbg-item:focus-visible{color:var(--color-bright);outline:none}
.dbg-item.active{color:var(--color-bright);background:var(--color-glow-subtle);box-shadow:inset 2px 0 0 var(--color)}
.dbg-item-action{color:var(--color-bright)}

/* Claude output */
.vn-claude-output .file-path{color:var(--color)}
.vn-claude-output .code-line{color:var(--color-dark)}
.claude-welcome{padding:0}
.claude-welcome-grid{border:1px solid var(--color);border-top:none;position:relative;display:grid;grid-template-columns:1fr 1fr;width:100%}
.claude-welcome-top-left{position:absolute;top:-1px;left:0;width:9px;border-top:1px solid var(--color)}
.claude-welcome-top-right{position:absolute;top:-1px;right:0;left:265px;border-top:1px solid var(--color)}
.claude-welcome-label{position:absolute;top:-12px;left:17px;padding:0 8px;font-family:var(--font-primary);color:var(--color-bright);font-size:20px;letter-spacing:.08em;white-space:nowrap;line-height:1.2}
.claude-welcome-version,.claude-welcome-dim{color:var(--color-dim)}
.claude-welcome-bright{color:var(--color-bright)}
.claude-welcome-pane{padding:24px;display:flex;flex-direction:column}
.claude-welcome-pane-center{align-items:center}
.claude-welcome-pane-divider{border-left:1px solid var(--color)}
.claude-welcome-heading{font-family:var(--font-primary);color:var(--color-bright);font-size:22px;margin-top:8px}
.claude-welcome-copy{font-family:var(--font-primary);font-size:20px;line-height:1.5}
.claude-welcome-copy-center{margin-top:8px;text-align:center}
.claude-welcome-section{margin-top:12px}
.claude-welcome-art{font-family:'Google Sans Code',monospace;font-size:22px;color:var(--color);line-height:1;margin:12px 0}
.claude-welcome-art-invert{color:var(--bg);background:var(--color)}
.claude-welcome-art-fill{background:var(--color)}

.slack-window{border:none;background:var(--glass-highlight);width:100%;display:grid;grid-template-columns:200px 1fr;overflow:hidden;border-radius:var(--radius-lg);box-shadow:0 8px 32px rgba(0,0,0,0.4);position:relative}
.slack-window::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(var(--light-angle,to bottom right),var(--light-color,var(--color)) 0%,var(--glass-border) 33%,var(--glass-border) 62%,var(--glass-border) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:1}
.slack-sidebar{background:var(--bg2);border-right:1px solid var(--border);padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-sm)}
.slack-sidebar-section{margin-top:var(--space-md)}
.slack-sidebar-title{font-family:var(--font-primary);font-size:var(--text-label);color:var(--color-bright);letter-spacing:.1em;margin-bottom:var(--space-sm)}
.slack-sidebar-title.text-label{font-size:var(--type-label-size);line-height:var(--type-label-line)}
.slack-sidebar-caption{font-size:12px;line-height:16px;color:var(--color-dark);letter-spacing:.15em;text-transform:uppercase}
.slack-sidebar-caption.text-caption{font-size:var(--type-caption-size);line-height:var(--type-caption-line)}
.slack-channel{font-family:var(--font-primary);font-size:var(--text-label);color:var(--color-dark);padding:4px var(--space-sm);letter-spacing:.05em}
.slack-channel.text-label{font-size:var(--type-label-size);line-height:var(--type-label-line)}
.slack-channel::before{content:'# ';color:var(--color-dark)}
.slack-channel.active{color:var(--color-bright);background:var(--color-glow-subtle)}
.slack-channel.active::before{color:var(--color)}
.slack-dm{font-family:var(--font-primary);font-size:var(--text-label);color:var(--color-dark);padding:4px var(--space-sm);letter-spacing:.05em;display:flex;align-items:center;gap:var(--space-sm)}
.slack-dm.text-label{font-size:var(--type-label-size);line-height:var(--type-label-line)}
.slack-dm::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--color-dark);flex-shrink:0}
.slack-dm.active{color:var(--color-bright)}
.slack-dm.active::before{background:var(--color-bright);box-shadow:0 0 6px var(--color-glow)}
.slack-dm.unread{color:var(--color-bright)}
.slack-main{padding:var(--space-lg);display:flex;flex-direction:column;gap:0}
.slack-header{font-family:var(--font-primary);font-size:var(--text-label);color:var(--color-bright);padding-bottom:var(--space-md);border-bottom:none;margin-bottom:var(--space-lg);letter-spacing:.05em;position:relative}
.slack-header.text-label{font-size:var(--type-label-size);line-height:var(--type-label-line)}
.slack-header::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--color),var(--glass-border) 50%,var(--glass-border))}
.slack-messages{display:flex;flex-direction:column;gap:var(--space-lg);flex:1}
.slack-message{display:grid;grid-template-columns:36px 1fr;gap:var(--space-sm)}
.slack-avatar{width:36px;height:36px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-family:var(--font-primary);font-size:var(--text-label);color:var(--bg);flex-shrink:0}
.slack-avatar.text-caption{font-size:var(--type-caption-size);line-height:var(--type-caption-line)}
.slack-avatar-coco,.slack-avatar-bones{background:var(--color)}
.slack-avatar-spencer{background:var(--color-dim)}
.slack-avatar-tyler{background:var(--color-dark)}
.slack-avatar-redbeard,.slack-avatar-alejandra{background:var(--color-bright)}
.slack-msg-content{display:flex;flex-direction:column;gap:2px}
.slack-msg-header{display:flex;align-items:baseline;gap:var(--space-sm)}
.slack-msg-name{font-family:var(--font-primary);font-size:var(--text-label);color:var(--color-dim);letter-spacing:.05em}
.slack-msg-name.text-label{font-size:var(--type-label-size);line-height:var(--type-label-line)}
.slack-msg-time{font-family:var(--font-primary);font-size:12px;color:var(--color-dark);letter-spacing:.05em}
.slack-msg-time.text-caption{font-size:var(--type-caption-size);line-height:var(--type-caption-line)}
.slack-msg-role{color:var(--color-dark)}
.slack-msg-body{font-family:var(--font-primary);font-size:var(--text-label);color:var(--color-bright);line-height:1.5}
.slack-msg-body.text-label{font-size:var(--type-label-size);line-height:var(--type-label-line)}
.slack-typing{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) 0}
.slack-typing-dots{display:flex;gap:4px}
.slack-typing-dots span{width:6px;height:6px;border-radius:50%;background:var(--color-dim);animation:slackDot 1.4s infinite}
.slack-typing-dots span:nth-child(2){animation-delay:.2s}
.slack-typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes slackDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.slack-typing-label{font-family:var(--font-primary);font-size:12px;color:var(--color-dark)}
.slack-typing-label.text-caption{font-size:var(--type-caption-size);line-height:var(--type-caption-line)}
.slack-reaction{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border);padding:2px var(--space-sm);font-size:14px;margin-top:var(--space-sm);background:var(--bg2)}
.slack-reaction-row{display:flex;gap:6px;flex-wrap:wrap}
.slack-reaction-hidden{opacity:0;transform:scale(0.5);transition:opacity .25s,transform .25s}
.slack-reaction-accent{border-color:var(--color);background:var(--color-glow-subtle)}
.slack-attachment{border-left:3px solid var(--color);padding:var(--space-sm) var(--space-md);margin-top:var(--space-sm);background:var(--bg2)}
.slack-attachment-title{font-family:var(--font-primary);font-size:var(--text-label);color:var(--color-bright)}
.slack-attachment-title.text-label{font-size:var(--type-label-size);line-height:var(--type-label-line)}
.slack-input{display:flex;align-items:center;gap:var(--space-sm);border:1px solid var(--border);padding:var(--space-sm) var(--space-md);margin-top:var(--space-md);background:var(--bg2)}
.slack-input-text{font-family:var(--font-primary);font-size:var(--text-label);color:var(--color-dim);flex:1}
.slack-input-text.text-label{font-size:var(--type-label-size);line-height:var(--type-label-line)}
.slack-mention{color:var(--color);background:rgba(var(--color-rgb),0.15);border-radius:3px}
.slack-inline-token{font-size:0.9em;color:var(--color-bright)}
.slack-inline-token.text-label{font-size:var(--type-label-size);line-height:var(--type-label-line)}

.vn-terminal-flat{border:none;border-radius:0}
.vn-cursor-hidden{display:none}
.vn-end-path{color:var(--color-dim)}
.gh-pr-meta-spacer{margin-left:auto}
.iphone-mockup-static{flex:0 0 auto}

.dock{display:flex;align-items:flex-end;justify-content:center;gap:var(--space-md);padding:var(--space-sm) var(--space-xl);background:var(--glass-highlight);border:none;border-radius:var(--radius-xl);position:relative;box-shadow:0 8px 32px rgba(0,0,0,0.4)}
.dock::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(var(--light-angle,to bottom right),var(--light-color,var(--color)) 0%,var(--glass-border) 33%,var(--glass-border) 62%,var(--glass-border) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:1}
.dock-icon{width:56px;height:56px;border-radius:var(--radius-md);background:var(--glass-tint-subtle);border:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center;font-family:var(--font-primary);font-size:28px;color:var(--color-dim);position:relative;transition:transform .2s}
.dock-icon:hover{transform:scale(1.2) translateY(-8px)}
.dock-icon.bouncing{animation:dockBounce .6s ease-in-out 3}
@keyframes dockBounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-20px)}60%{transform:translateY(-10px)}}
.dock-badge{position:absolute;top:-4px;right:-4px;width:18px;height:18px;border-radius:50%;background:var(--color-bright);font-family:var(--font-primary);font-size:10px;color:var(--bg);display:flex;align-items:center;justify-content:center;line-height:1}
.dock-separator{width:1px;height:40px;background:var(--border);margin:0 var(--space-xs)}
.dock-dot{position:absolute;bottom:-8px;width:4px;height:4px;border-radius:50%;background:var(--color-dim)}

.gh-pr{border:none;background:var(--glass-highlight);width:100%;overflow:hidden;border-radius:var(--radius-lg);box-shadow:0 8px 32px rgba(0,0,0,0.4);position:relative}
.gh-pr::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(var(--light-angle,to bottom right),var(--light-color,var(--color)) 0%,var(--glass-border) 33%,var(--glass-border) 62%,var(--glass-border) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:1}
.vn-app .gh-pr{border-radius:0;box-shadow:none}
.vn-app .gh-pr::before{display:none}
#app-github{align-items:center;justify-content:center}
#app-github .vn-app-inner{flex:none;width:100%}
.gh-pr-header{padding:var(--space-lg);border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:var(--space-sm)}
.gh-pr-title{font-family:var(--font-primary);font-size:var(--text-body);color:var(--color-bright);letter-spacing:.02em}
.gh-pr-title.text-body{font-size:var(--type-body-size);line-height:var(--type-body-line)}
.gh-pr-meta{font-family:var(--font-primary);font-size:12px;color:var(--color-dark);display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap}
.gh-pr-meta.text-caption{font-size:var(--type-caption-size);line-height:var(--type-caption-line)}
.gh-pr-branch{font-family:var(--font-primary);font-size:12px;color:var(--color);background:var(--bg2);padding:2px var(--space-sm);border:1px solid var(--border)}
.gh-pr-branch.text-caption{font-size:var(--type-caption-size);line-height:var(--type-caption-line)}
.gh-pr-status{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--border)}
.gh-pr-check{display:flex;align-items:center;gap:var(--space-sm);font-family:var(--font-primary);font-size:var(--text-label);color:var(--color-dim)}
.gh-pr-check.text-label{font-size:var(--type-label-size);line-height:var(--type-label-line)}
.gh-pr-check::before{content:'';width:16px;height:16px;border-radius:50%;border:2px solid var(--color-dim)}
.gh-pr-check.passed::before{background:var(--color-bright);border-color:var(--color-bright)}
.gh-pr-review{padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:var(--space-sm);font-family:var(--font-primary);font-size:var(--text-label);color:var(--color-dim)}
.gh-pr-review.text-label{font-size:var(--type-label-size);line-height:var(--type-label-line)}
.gh-pr-review.approved{color:var(--color-bright)}
.gh-pr-review.approved::before{content:'\2713';color:var(--color-bright)}
.gh-pr-reviewer{color:var(--color-bright)}
.gh-pr-reviewer.text-label{font-size:var(--type-label-size);line-height:var(--type-label-line)}
.gh-pr-merge-area{padding:var(--space-lg);display:flex;align-items:center;gap:var(--space-md)}
.gh-pr-merge-btn{font-family:var(--font-primary);font-size:var(--text-label);letter-spacing:.1em;padding:var(--space-sm) var(--space-xl);border:2px solid var(--color-bright);color:var(--color-bright);background:none;cursor:pointer}
.gh-pr-merge-btn.text-label{font-size:var(--type-label-size);line-height:var(--type-label-line)}
.gh-pr-merge-btn.merged{border-color:var(--color-bright);background:var(--color-bright);color:var(--bg)}
.gh-pr-merged-label{font-family:var(--font-primary);font-size:var(--text-label);color:var(--color-bright);letter-spacing:.1em}
.gh-pr-merged-label.text-caption{font-size:var(--type-caption-size);line-height:var(--type-caption-line)}

.phone-frame{width:300px;border:none;border-radius:36px;padding:12px;background:linear-gradient(135deg,var(--glass-shine) 0%,transparent 50%);position:relative;overflow:hidden;z-index:10000}
.phone-frame::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,var(--color) 0%,var(--glass-border) 33%,var(--glass-border) 62%,var(--glass-border) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:1}
.phone-frame::before{display:none}
.phone-screen{width:100%;aspect-ratio:375/812;background:var(--bg2);border-radius:24px;overflow:hidden;position:relative}
.phone-screen::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:100px;height:28px;border-radius:14px;background:var(--bg);border:1px solid var(--border);z-index:2}

/* iPhone SVG mockup */
.iphone-mockup{position:relative;width:340px;z-index:10000;aspect-ratio:432/880;overflow:hidden}
.iphone-base{position:absolute;top:0;left:0;height:100%;width:auto;z-index:0}
.iphone-screen{position:absolute;top:calc(18 / 880 * 100%);left:calc(21 / 432 * 100%);width:calc(390 / 432 * 100%);height:calc(844 / 880 * 100%);border-radius:11.3%;overflow:hidden;z-index:1;padding:38px 16px 16px;box-sizing:border-box;display:flex;flex-direction:column}
.iphone-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2}
.vn-app-phone .iphone-mockup{width:340px}

/* Phone stage wrapper — no-op on desktop so phones participate directly
   in the parent layout (flex row + preserve-3d context). Mobile overrides
   this with layout-specific rules in helium-responsive.css. */
.vn-phone-stage{display:contents}

/* Android screen + overlay overrides */
#app-phone-reveal .reveal-phone-2 .iphone-screen{top:calc(11 / 882 * 100%);left:calc((11.82 - 4) / 423 * 100%);width:calc(395.834 / 423 * 100%);height:calc(858.482 / 882 * 100%);border-radius:calc(17.5336 / 423 * 100%);padding:0}
.reveal-phone-2 .iphone-overlay{z-index:10001}

/* Plan picker mockups (inside phone) */
.plan-carousel{display:flex;gap:16px;transition:transform .6s ease;flex:1;min-height:0}
.plan-card{min-width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.plan-card img{width:100%;height:auto;display:block}
.plan-card-name{font-family:var(--font-primary);font-size:32px;color:var(--color-bright);text-align:center}
.plan-card-price{font-family:var(--font-primary);font-size:var(--text-label);color:var(--color-dim);text-align:center}
.plan-card-features{display:flex;flex-direction:column;gap:var(--space-xs);font-family:var(--font-primary);font-size:12px;color:var(--color-dark);padding:var(--space-md)}
.plan-card-features li{list-style:none;padding:4px 0;border-bottom:1px solid var(--border)}
.plan-dots{display:flex;justify-content:center;gap:8px;padding:var(--space-md) 0}
.plan-dots span{width:8px;height:8px;border-radius:50%;background:#c8c8c8}
.plan-dots span.active{background:#1c1c1c}

/* Tabbed plan picker (the "after") */
.plan-tabs{display:flex;border-bottom:2px solid var(--border)}
.plan-tab{flex:1;padding:var(--space-sm) var(--space-xs);text-align:center;font-family:var(--font-primary);font-size:10px;color:var(--color-dark);border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.plan-tab.active{color:var(--color-bright);border-bottom-color:var(--color-bright)}
.plan-tab-name{font-size:12px;letter-spacing:.05em}
.plan-tab-sub{font-size:9px;color:var(--color-dark);opacity:.7}
.plan-tab.active .plan-tab-sub{color:var(--color-dim);opacity:1}
.plan-tab-content{flex:1;display:flex;flex-direction:column;position:relative;overflow:hidden;min-height:0}
#app-phone-reveal .iphone-screen{padding:0}
@keyframes phoneSwingIn{
0%{transform:translate(-50%,-50%) translateX(0) translateZ(-300px);opacity:0}
40%{transform:translate(-50%,-50%) translateX(-90%) translateZ(-300px);opacity:0.7}
100%{transform:translate(-50%,-50%) translateX(-25%) translateZ(0);opacity:1}
}
@keyframes phoneSwingOut{
0%{transform:translate(-50%,-50%) translateX(-25%) translateZ(50px);opacity:1}
60%{transform:translate(-50%,-50%) translateX(-90%) translateZ(-300px);opacity:0.7}
100%{transform:translate(-50%,-50%) translateX(0) translateZ(-300px);opacity:0}
}
/* White overlay for dark plan backgrounds */
.plan-overlay-white{opacity:0}

/* Plan panes */
.plan-pane{display:none;flex-direction:column;flex:1;min-height:0;overflow:hidden;position:relative;border-radius:inherit}
.plan-pane.active{display:flex}
#app-phone-reveal .plan-pane{position:absolute;inset:0}
#app-phone-reveal .plan-pane.active{position:relative}
.plan-bg{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;padding-top:54px}
/* Plan background gradients are on the inline SVG #reveal-screen-fill */
.plan-balloon{height:auto;object-fit:contain;animation:planFloat 4s ease-in-out infinite;position:relative;z-index:1}
.plan-pane.active .plan-balloon{animation:balloonIn .2s ease-out,planFloat 4s ease-in-out .2s infinite}
@keyframes balloonIn{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes balloonOut{0%{transform:translateY(0);opacity:1}100%{transform:translateY(30px);opacity:0}}
.plan-pane[data-plan="zero"] .plan-balloon{width:50%}
.plan-pane[data-plan="air"] .plan-balloon{width:77%}
.plan-pane[data-plan="infinity"] .plan-balloon{width:65%}
.plan-info{width:100%;max-width:100%;height:auto;display:block;flex-shrink:0;position:relative;z-index:2;margin:auto auto 0;padding:16px;padding-bottom:28px;box-sizing:border-box}

/* Cloud drift for Air plan */
.plan-cloud-left{top:10%;left:0;animation:cloudDrift 30s linear infinite}
.plan-cloud-right{top:30%;left:0;animation:cloudDrift 30s linear infinite;animation-delay:-15s}
@keyframes cloudDrift{0%{transform:translateX(-150%)}100%{transform:translateX(350%)}}

/* Starfield for Infinity plan */
.plan-starfield{position:absolute;inset:0;overflow:hidden}
.plan-starfield .star{position:absolute;background:#fff;border-radius:50%}

/* Balloon float */
@keyframes planFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Side-by-side device testing */
.device-pair{display:flex;gap:var(--space-xl);align-items:center;justify-content:center}
.device-pair .phone-frame{width:220px}
.device-label{font-family:var(--font-primary);font-size:12px;color:var(--color-dark);text-align:center;margin-top:var(--space-sm);letter-spacing:.1em}

/* Claude Code output (inside terminal) */
.vn-claude-output .file-path{color:var(--color)}
.vn-claude-output .code-line{color:var(--color-dark)}

.locked-body{display:flex;flex-direction:column;min-height:100vh}
.locked-body .footer{margin-top:0;flex-shrink:0}
.locked-body>.container{width:100%}
.locked-page{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--space-4xl) var(--space-xl);text-align:center}
.locked-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--space-xl);max-width:600px;width:100%}
.locked-ascii{font-family:'Google Sans Code',monospace;color:var(--color-bright);white-space:pre;line-height:1;font-size:14px;letter-spacing:0;display:inline-block;margin:0;tab-size:1;text-align:left;filter:drop-shadow(0 0 4px rgba(255,179,64,.6)) drop-shadow(0 0 12px rgba(255,149,0,.35)) drop-shadow(0 0 28px rgba(255,149,0,.12))}
.locked-title{font-family:var(--font-primary);font-size:32px;line-height:1;letter-spacing:.2em;color:var(--color-bright);text-transform:uppercase;margin:0}
.locked-note{font-family:var(--font-primary);font-size:var(--type-label-size);line-height:var(--type-label-line);color:var(--color-dim);max-width:480px;letter-spacing:.05em}
.locked-prompt{display:inline-flex;align-items:baseline;gap:var(--space-sm);justify-content:center;font-family:var(--font-primary);font-size:24px;line-height:32px;margin:0;width:auto;max-width:100%;color:var(--color-bright)}
.locked-prompt-label{white-space:nowrap}
.locked-prompt-display{display:inline-flex;align-items:baseline;letter-spacing:.15em;min-width:1ch}
.locked-prompt-display-text{white-space:pre}
.locked-prompt-submit{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.locked-error{font-family:var(--font-primary);font-size:var(--type-label-size);line-height:var(--type-label-line);background:var(--color-bright);color:var(--bg);letter-spacing:.15em;text-transform:uppercase;margin:0;padding:0 .5em;display:inline-block;align-self:center}
.locked-error::before{content:'! ';color:var(--bg)}

.password-form{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-md);margin-top:var(--space-xl);max-width:480px}
.password-form .text-label{color:var(--color-dim);letter-spacing:.15em;text-transform:uppercase}
.form-field{width:100%;background:var(--glass-tint);border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:var(--space-md);color:var(--color-bright);font-family:var(--font-primary);font-size:var(--type-body-size);line-height:var(--type-body-line);letter-spacing:.05em;outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast);caret-color:var(--color-bright)}
.form-field::placeholder{color:var(--color-dark)}
.form-field:hover{border-color:var(--glass-border-hover);background:var(--glass-bg-hover)}
.form-field:focus{border-color:var(--color);box-shadow:0 0 0 1px var(--color),var(--glass-glow-hover);background:var(--glass-bg-hover)}
.form-field:disabled{opacity:.5;cursor:not-allowed}
.form-error{color:var(--color-bright);text-shadow:0 0 6px var(--color-glow);letter-spacing:.1em;text-transform:uppercase}
.form-error::before{content:'! ';color:var(--color)}
.btn{display:inline-flex;align-items:center;gap:var(--space-sm);background:var(--glass-tint);border:1px solid var(--color-dim);border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-lg);color:var(--color-bright);font-family:var(--font-primary);font-size:var(--type-label-size);line-height:var(--type-label-line);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast);text-decoration:none}
.btn::after{content:' ›';color:var(--color)}
.btn:hover{background:var(--glass-bg-hover);border-color:var(--color);color:var(--color-bright);box-shadow:0 0 12px var(--color-glow)}
.btn:focus-visible{outline:none;border-color:var(--color);box-shadow:0 0 0 1px var(--color),0 0 12px var(--color-glow)}
.btn:active{background:var(--color-glow-subtle)}
.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}

@media(max-width:768px){
  /* Typography */
  h2{font-size:32px;line-height:40px}
  h3{font-size:24px;line-height:32px}
  h4{font-size:20px;line-height:28px}
  .text-display{font-size:40px;line-height:48px}
  .text-heading{font-size:32px;line-height:40px}
  .text-title{font-size:24px;line-height:32px}
  .text-body{font-size:var(--type-body-mobile-size);line-height:var(--type-body-mobile-line)}

  /* Layout */
  .section-body{padding-left:0}
  .container{padding:0 var(--space-md)}
  .step-row{grid-template-columns:1fr;align-items:flex-start;gap:var(--space-md)}
  .image-caption{font-size:20px;line-height:32px}
  .nav{display:none}
  .hamburger{display:flex}
  .projects-grid{grid-template-columns:1fr;gap:var(--space-xl)}
  .masonry{flex-direction:column;gap:var(--space-xl)}
  .masonry-col{display:contents}
  .card[data-order="1"]{order:1}
  .card[data-order="2"]{order:2}
  .card[data-order="3"]{order:3}
  .card[data-order="4"]{order:4}
  .card[data-order="5"]{order:5}
  .card[data-order="6"]{order:6}
  .sticky-layout{grid-template-columns:1fr;gap:var(--space-xl)}
  .sticky-header{position:static}

  /* Section Header */
  .section-header{flex-direction:column;align-items:flex-start;gap:0;margin-bottom:var(--space-xl)}
  .section-header::after{width:100%}
  .section-title{white-space:normal;word-break:break-word}
  .sticky-header{gap:0}
  .sticky-header .section-title{white-space:normal;word-break:break-word}

  /* Card */
  .card[data-arrow]::after{display:none}

  /* Audiolog */
  .audiolog-list{max-width:100%;overflow:hidden}
  .audiolog-entry{max-width:100%;overflow:hidden}
  .audiolog-card{overflow:hidden;max-width:100%}
  .audiolog-tab{max-width:100%}
  .audiolog-header{flex-wrap:wrap}
  .waveform{overflow:hidden;min-width:0;max-width:100%}
  .audiolog-meta{min-width:0;overflow:hidden}
  .audiolog-card > p{word-break:break-word;overflow-wrap:break-word}
  .attribution{flex-wrap:wrap}

  /* Editor */
  .editor-content{padding:16px 16px 16px 8px}
  .editor-line-number,.editor-tilde{width:24px;padding-right:8px}
  .editor-line{padding-left:8px}
  .editor-blank{padding-left:8px}
  .editor-status{font-size:20px;line-height:32px}
  .editor-status-mode,.editor-status-file,.editor-status-spacer{display:none}
  .editor-status-enc{flex:1}

  /* Terminal */
  .terminal-bar span:not(.terminal-dots):not(.terminal-dots span){visibility:hidden}
  .terminal-contact-header{display:none}
  .terminal-contact::after{display:none}
  .terminal[data-variant="contact"] .terminal-output[data-field]{flex-direction:column;gap:4px;margin-top:16px}
  .terminal[data-variant="contact"] .terminal-output[data-field]::before{content:attr(data-field) ':';min-width:auto;text-transform:capitalize}
  .terminal[data-variant="contact"] .terminal-output[data-field]::after{display:none}

  /* Stats */
  .stats{grid-template-columns:1fr}
  .stats-value{font-size:48px}

  /* Logo Grid */
  .logo-grid{grid-template-columns:1fr}
  .logo-grid-item{border-right:none;border-bottom:1px solid var(--border)}
  .logo-grid-item:last-child{border-bottom:none}

  /* Subpage Hero */
  .subpage-hero{min-height:auto;padding:var(--space-4xl) 0;gap:var(--space-xl)}
  .subpage-hero-image{margin-top:0}
  .subpage-hero-ascii-desktop{display:none}
  .subpage-hero-ascii-mobile{display:inline-block}
  .subpage-hero-ascii{transform-origin:center top}
  .subpage-hero-tagline{flex-direction:column;gap:var(--space-sm);align-items:center;text-align:center}
  .subpage-hero-scroll{display:none}

  /* Scroll offset for anchor links on subpages */
  [data-theme] .section{scroll-margin-top:var(--space-xl)}

  /* Component mobile overrides */
  .audiolog-card > p{font-size:20px;line-height:32px}
  .editor-line{font-size:20px}
  .terminal-body{font-size:20px;line-height:40px}
  .card-title{font-size:20px;line-height:32px}
  .timeline-item > h3{font-size:var(--type-title-mobile-size);line-height:var(--type-title-mobile-line)}
  .feature-list{gap:var(--space-lg);padding:var(--space-xl) 0;max-width:100%;padding-left:var(--space-md);padding-right:var(--space-md)}
  .feature-list>li{font-size:32px;line-height:40px;gap:var(--space-md)}
  .feature-list>li::before{font-size:18px}
  .form-field{font-size:var(--type-body-mobile-size);line-height:var(--type-body-mobile-line);padding:var(--space-sm) var(--space-md)}
  .password-form{max-width:100%}
  .locked-page{padding:var(--space-2xl) var(--space-md)}
  .locked-wrap{gap:var(--space-lg)}
  .locked-ascii{font-size:11px}
  .locked-title{font-size:24px;letter-spacing:.15em}
  .locked-prompt{font-size:20px;line-height:28px;flex-wrap:nowrap}

  /* Step Table */
  .step-table-header{display:none}
  .step-table-row{grid-template-columns:auto 1fr}
  .step-table-num{background-image:var(--dash-line),var(--dash-line);background-position:left top,right top}
  .step-table-desc{grid-column:1/-1;background-image:var(--dash-line),var(--dash-line);background-position:left top,right top;background-size:var(--dash-w) 100%}

  /* Step List */
  .step-row{grid-template-columns:1fr;align-items:flex-start;gap:var(--space-md)}
  .ascii-number{font-size:.4rem;max-width:100%}

  /* Folder Cabinet — tray fills container, stack inset 16px on mobile */
  .folder-scroll-sticky .folder-cabinet{align-self:start;margin-top:var(--space-xl)}
  .folder-stack{margin:0 16px;min-height:400px}
  .folder-tray{left:0;right:0;height:300px}
  /* tray body clip-path handled by JS --taper */
  .folder-stack{min-height:400px}
  .folder-body{min-height:300px}
  .folder:nth-child(1) .folder-body,.folder:nth-child(2) .folder-body{height:300px;min-height:0}
  /* Tabs: no mobile override — desktop fixed offsets apply everywhere */
  /* default tray handled by JS */
  /* Edge lines: recalc for 16px stack margin — (24,56)→(20,76)→(16,96)→(11,121) */
  /* Edge lines handled by JS */

  /* Assembly: hide on mobile, show timeline instead */
  .pd-assembly{display:none}
  .pd-mobile-timeline{display:block}
}

.footer{padding:var(--space-xl) var(--space-xl);border-top:1px solid var(--glass-border);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-md);color:var(--color-dark);letter-spacing:.15em;margin-top:var(--space-xl)}
.footer .text-body+.text-body{margin-top:0}
.footer .text-body{color:var(--color-dark)}
.footer .text-link,.footer .text-link:visited{color:var(--color-dark)}
.footer .text-link:hover,.footer .text-link:focus-visible{color:var(--color-bright)}
/* Top breathing room for hero-less pages so first content clears the fixed nav */
.subpage-content-top{padding-top:var(--space-section)}

/* Safari: disable barrel filter (WebKit feImage tiling bug) */
html[data-safari] .page-wrap{filter:none!important;overscroll-behavior-y:none}
html[data-safari] #hero{filter:none!important}
html[data-safari] .subpage-hero > .subpage-hero-ascii{filter:none!important}
html[data-safari] .terminal-idle-hint-arrow,html[data-safari] .vn-scroll-hint::after,html[data-safari] .slack-input-placeholder::after{overflow:visible!important;contain:none!important;padding:0 .35em;line-height:1.4}
html[data-safari] .terminal-idle-hint.indicator-flash .terminal-idle-hint-arrow{filter:none;text-shadow:0 0 6px var(--color-bright),0 0 14px var(--color-bright)}
html[data-safari] body{background:var(--bg);background-attachment:initial;overscroll-behavior-y:none}
html[data-safari] body::after{display:block;content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 800px 600px at 15% 10%,rgba(255,149,0,0.15),transparent 60%),radial-gradient(ellipse 700px 700px at 85% 50%,rgba(255,120,0,0.10),transparent 60%),radial-gradient(ellipse 600px 500px at 40% 80%,rgba(200,120,0,0.08),transparent 60%),radial-gradient(ellipse 500px 400px at 60% 20%,rgba(255,179,64,0.06),transparent 60%)}
html[data-safari] body[data-theme="blue"]::after{background:radial-gradient(ellipse 800px 600px at 15% 10%,rgba(0,149,255,0.12),transparent 60%),radial-gradient(ellipse 700px 700px at 85% 50%,rgba(0,120,200,0.08),transparent 60%),radial-gradient(ellipse 600px 500px at 40% 80%,rgba(0,100,180,0.06),transparent 60%),radial-gradient(ellipse 500px 400px at 60% 20%,rgba(64,179,255,0.05),transparent 60%)}
html[data-safari] body[data-theme="pink"]::after{background:radial-gradient(ellipse 800px 600px at 15% 10%,rgba(255,94,160,0.12),transparent 60%),radial-gradient(ellipse 700px 700px at 85% 50%,rgba(200,70,130,0.08),transparent 60%),radial-gradient(ellipse 600px 500px at 40% 80%,rgba(180,60,110,0.06),transparent 60%),radial-gradient(ellipse 500px 400px at 60% 20%,rgba(255,142,192,0.05),transparent 60%)}
html[data-safari] body[data-theme="purple"]::after{background:radial-gradient(ellipse 800px 600px at 15% 10%,rgba(168,85,247,0.12),transparent 60%),radial-gradient(ellipse 700px 700px at 85% 50%,rgba(140,60,220,0.08),transparent 60%),radial-gradient(ellipse 600px 500px at 40% 80%,rgba(120,50,190,0.06),transparent 60%),radial-gradient(ellipse 500px 400px at 60% 20%,rgba(192,132,252,0.05),transparent 60%)}
html[data-safari] body[data-theme="green"]::after{background:radial-gradient(ellipse 800px 600px at 15% 10%,rgba(0,201,167,0.12),transparent 60%),radial-gradient(ellipse 700px 700px at 85% 50%,rgba(0,168,139,0.08),transparent 60%),radial-gradient(ellipse 600px 500px at 40% 80%,rgba(0,140,115,0.06),transparent 60%),radial-gradient(ellipse 500px 400px at 60% 20%,rgba(77,232,204,0.05),transparent 60%)}
html[data-safari] #tv-screen{background-attachment:scroll}
html[data-safari] .vn-app-inner>*{transform:translateZ(0)}