:root{
--edge-black:#171716;
--infrastructure-white:#f1efe8;
--field-orange:#ff5a1f;
--realm-mint:#c8dccb;
--structural-olive:#7a6b43;
--concrete:#d7cfb5;
--information-blue:#afcfea;

--state-operational:var(--realm-mint);
--state-active:var(--field-orange);
--state-warning:#e2a93b;
--state-critical:#c9483d;
--state-offline:#6c6c67;
--state-information:var(--information-blue);

--family-realms:var(--realm-mint);
--family-compute:var(--edge-black);
--family-photon:var(--field-orange);
--family-water:var(--information-blue);
--family-communications:var(--realm-mint);
--family-mobile:var(--field-orange);
--family-storage:var(--concrete);
--family-human:var(--infrastructure-white);

--surface-canvas:var(--infrastructure-white);
--surface-panel:#fafaf6;
--surface-panel-raised:#ffffff;
--surface-canvas-dark:var(--edge-black);
--surface-panel-dark:#242422;
--surface-panel-dark-raised:#302f2b;

--border:rgba(23,23,22,0.18);
--border-strong:rgba(23,23,22,0.42);
--border-dark:rgba(255,255,255,0.20);
--border-dark-strong:rgba(255,255,255,0.38);

--text-primary:var(--edge-black);
--text-secondary:rgba(23,23,22,0.68);
--text-muted:rgba(23,23,22,0.46);
--text-on-dark:var(--infrastructure-white);
--text-secondary-on-dark:rgba(255,255,255,0.72);
--text-muted-on-dark:rgba(255,255,255,0.50);
--text-on-accent:var(--edge-black);

--edge-black-hover:#2c2c29;
--field-orange-hover:#e6531c;
--state-critical-hover:#b34039;
--focus-ring:rgba(23,23,22,0.15);
--focus-ring-critical:rgba(201,72,61,0.22);
--scrim:rgba(23,23,22,0.5);
}
/* blueprint mode — tan drafting ground (thesis canon, ds v1.1) */
html[data-theme="tan"]{
--surface-canvas:#ddd4bd;
--surface-panel:#e6dfcb;
--surface-panel-raised:#efe9da;
--border:rgba(23,23,22,0.22);
--border-strong:rgba(23,23,22,0.46);
--text-secondary:rgba(23,23,22,0.66);
--text-muted:rgba(23,23,22,0.48);
}

:root{
--font-sans:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
--font-mono:'Geist Mono',ui-monospace,'SFMono-Regular','IBM Plex Mono',monospace;

--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;
--weight-bold:700;
--weight-black:800;

--text-display-xl:96px;
--text-display-lg:64px;
--text-display-md:48px;
--text-heading-xl:32px;
--text-heading-lg:24px;
--text-heading-md:20px;
--text-body-lg:17px;
--text-body-md:15px;
--text-body-sm:13px;
--text-mono-lg:16px;
--text-mono-md:14px;
--text-mono-sm:12px;
--text-label-sm:11px;

--tracking-tight:-0.02em;
--tracking-normal:0em;
--tracking-label:0.08em;
--tracking-wide:0.12em;

--leading-tight:1.05;
--leading-snug:1.25;
--leading-normal:1.5;
}

:root{
--space-0:0px;
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:24px;
--space-6:32px;
--space-7:48px;
--space-8:64px;
--space-9:96px;
--space-10:128px;
}

:root{
--radius-0:0px;
--radius-sm:2px;
--radius-md:4px;
--radius-lg:6px;
}

:root{
--duration-instant:80ms;/* @kind other */
--duration-fast:130ms;/* @kind other */
--duration-base:200ms;/* @kind other */
--duration-slow:320ms;/* @kind other */
--ease-mechanical:cubic-bezier(.4,0,.2,1);/* @kind other */
--ease-linear:linear;/* @kind other */
}

@font-face{font-family:'Geist';src:url("/assets/geist.woff2") format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'Geist Mono';src:url("/assets/geist-mono.woff2") format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}


/* Firma Frontier — artistic composition: everything lives inside a drifting line field */
.fl-page{background:var(--infrastructure-white);color:var(--edge-black);font-family:var(--font-sans);height:100vh;display:flex;flex-direction:column;overflow:hidden}
.ff-mono{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
/* the line field */
.fl-lines{background-image:repeating-linear-gradient(0deg,transparent 0 71px,var(--border-strong) 71px 72px);animation:flDriftY 40s linear infinite}
.fl-lines-over{position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(0deg,transparent 0 71px,var(--infrastructure-white) 71px 73px);animation:flDriftY 40s linear infinite;z-index:3}
@keyframes flDriftY{to{background-position-y:72px}}
/* signals traveling the lines */
.fl-traveler{position:absolute;width:9px;height:9px;background:var(--field-orange);z-index:4;animation:flTravel linear infinite}
.fl-traveler.d{transform:rotate(45deg);background:var(--edge-black)}
@keyframes flTravel{from{left:-2%}to{left:102%}}
/* giant sliced type */
.fl-title{font-size:clamp(64px,9.5vw,148px);line-height:.9;font-weight:700;letter-spacing:-0.035em;margin:0}
/* diagonal stripe ribbon crossing the field */
.fl-ribbon{position:absolute;left:-10%;width:120%;height:88px;background:repeating-linear-gradient(90deg,var(--edge-black) 0 26px,var(--realm-mint) 26px 52px);animation:ffSlide 6s linear infinite;z-index:0}
.fl-ribbon.o{background:repeating-linear-gradient(90deg,var(--edge-black) 0 26px,var(--field-orange) 26px 52px);animation-duration:5s;animation-direction:reverse}
@keyframes ffSlide{to{background-position-x:52px}}
/* device band cut on the diagonal */
.fl-para{clip-path:polygon(0 10%,100% 0,100% 90%,0 100%)}
/* slow pans */
.ff-kb{overflow:hidden;position:relative}
.ff-kb img{width:100%;height:100%;object-fit:cover;display:block;animation:ffKb 26s ease-in-out infinite alternate;will-change:transform}
@keyframes ffKb{from{transform:scale(1.02) translateX(-1.5%)}to{transform:scale(1.12) translateX(1.5%)}}
@keyframes ffDevPan{from{object-position:0% 38%}to{object-position:100% 38%}}
.ff-sweep{position:absolute;top:0;bottom:0;width:2px;background:var(--field-orange);box-shadow:0 0 0 1px rgba(255,90,31,.25);animation:ffSweep 7s cubic-bezier(.4,0,.6,1) infinite;z-index:2}
.ff-sweep::after{content:"";position:absolute;inset:0 -60px 0 0;background:linear-gradient(90deg,transparent,rgba(255,90,31,.14))}
@keyframes ffSweep{0%{left:4%}50%{left:96%}100%{left:4%}}
/* scanner-revealed words: right edge of the clip tracks the sweep line exactly */
.fl-scanwords{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1;pointer-events:none}
.fl-scanwords > span{position:absolute;left:0;right:0;text-align:center;font-weight:700;font-size:clamp(38px,6vw,94px);letter-spacing:-0.03em;color:var(--infrastructure-white);text-transform:uppercase;white-space:nowrap;animation:flWipe 7s cubic-bezier(.4,0,.6,1) infinite;opacity:1}
.fl-scanwords > span span{animation:none;clip-path:none;opacity:1;position:static}
@keyframes flWipe{0%{clip-path:inset(0 96% 0 0)}50%{clip-path:inset(0 4% 0 0)}100%{clip-path:inset(0 96% 0 0)}}
/* floating framed images */
.ff-frame{position:relative;border:1px solid var(--border-strong);background:var(--surface-panel-raised)}
.ff-frame::before,.ff-frame::after{content:"";position:absolute;width:10px;height:10px;border:2px solid var(--edge-black);pointer-events:none;z-index:2}
.ff-frame::before{top:-2px;left:-2px;border-right:0;border-bottom:0}
.ff-frame::after{bottom:-2px;right:-2px;border-left:0;border-top:0}
.fl-img{width:100%;height:100%;object-fit:cover;display:block;animation:ffDrift 24s ease-in-out infinite alternate;will-change:object-position}
@keyframes ffDrift{from{object-position:30% 50%}to{object-position:70% 50%}}
.fl-rail{writing-mode:vertical-rl;font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary)}
/* triangle procession */
.ff-tris{display:flex;gap:0;overflow:hidden}
.ff-tri{width:64px;height:64px;flex:none;background:var(--edge-black);clip-path:polygon(0 0,0 100%,100% 50%);animation:ffMarch 1.2s steps(1) infinite}
.ff-tri:nth-child(2n){background:var(--field-orange)}
@keyframes ffMarch{0%{transform:translateX(0)}50%{transform:translateX(18px)}100%{transform:translateX(0)}}
/* reveal */
.ff-rev{opacity:0;transform:translateY(26px);transition:opacity .8s ease-out,transform .8s ease-out}
.ff-rev.in{opacity:1;transform:none}
a{color:var(--edge-black)}a:hover{color:var(--field-orange)}
@media (prefers-reduced-motion:reduce){.fl-lines,.fl-lines-over,.fl-traveler,.fl-ribbon,.ff-kb img,.ff-sweep,.fl-img,.ff-tri,.fl-scanwords > span{animation:none}.fl-scanwords > span{clip-path:none}}

/* ============================================================================
   Layout — these were inline styles on the React components. Same values,
   moved into the sheet so the markup is static and the page needs no runtime.
   ============================================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--infrastructure-white)}
img{display:block;max-width:100%}

/* fixed instrument plates */
.fl-plate-brand{position:fixed;top:18px;left:20px;z-index:30;display:flex;align-items:center;gap:9px;background:var(--infrastructure-white);padding:6px 10px 6px 6px;border:1px solid var(--border-strong)}
.fl-plate-brand img{width:17px;height:18px}
.fl-plate-brand span{font-family:var(--font-sans);font-weight:800;font-size:13px;letter-spacing:-0.01em}
.fl-plate{position:fixed;z-index:30;font-size:10px;padding:5px 10px;background:var(--edge-black);color:var(--infrastructure-white)}
.fl-plate-signal{top:22px;right:20px;background:var(--field-orange);color:var(--edge-black);font-weight:600}
.fl-plate-coords{bottom:18px;left:20px}
.fl-plate-registry{bottom:18px;right:20px}

/* hero */
.fl-hero{position:relative;flex:1 1 46%;min-height:0;overflow:hidden}
.fl-hero .fl-traveler{margin-top:-4px}
.fl-titlewrap{position:absolute;left:6vw;top:50%;transform:translateY(-54%);z-index:2}
.fl-dash{color:var(--field-orange)}
.fl-legend{position:absolute;right:7vw;top:26%;z-index:4;font-size:11px;text-align:right;line-height:2.2;color:var(--text-secondary)}
.fl-legend span{color:var(--edge-black);font-weight:600}

/* live panel */
.fl-panel{flex:1 1 42%;min-height:0;border-top:1px solid var(--border-strong)}
.fl-panel img{filter:brightness(.82)}
.fl-panel-tag{position:absolute;left:20px;bottom:14px;font-size:10px;color:var(--infrastructure-white);background:var(--edge-black);padding:5px 10px;z-index:3}

/* close */
.fl-close{flex:none;height:56px;display:flex;align-items:center;justify-content:center;font-size:11px;letter-spacing:.16em;border-top:1px solid var(--border-strong);background:var(--infrastructure-white)}
.fl-seal{background:var(--edge-black);height:40px;flex:none;display:flex;align-items:center;justify-content:center}
.fl-seal img{width:14px;height:15px}

/* phone — the fixed plates would collide over a 100vh page at this width */
@media (max-width:640px){
  .fl-plate-registry{display:none}
  .fl-legend{right:5vw;top:16%;font-size:10px;line-height:2}
  .fl-plate-brand span{font-size:11px}
}