:root{color:#193e50;font-synthesis:none;--ink:#193e50;--blue:#265f86;--cobalt:#315b9b;--coral:#d4654b;--brass:#bf8e3e;--sky:#d8edf1;--paper:#fffaf0ef;background:#f3f3e8;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{background:#e9eee8;margin:0}button,a,input{font:inherit}button{color:inherit;cursor:pointer;background:0 0;border:0}button:focus-visible,a:focus-visible,input:focus-visible{outline-offset:3px;outline:3px solid #e27956}header{z-index:40;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#f7f8ede8;border-bottom:1px solid #23495d33;align-items:center;gap:18px;height:72px;padding:0 28px;display:flex;position:relative}.brand{text-align:left;margin-right:auto}.brand b,.brand span{display:block}.brand b{letter-spacing:.2em}.brand span,header>button,header strong,.collection-home{letter-spacing:.14em;color:#21495d;font-size:9px}.collection-home{white-space:nowrap;border:1px solid;align-items:center;min-height:30px;padding:7px 9px;text-decoration:none;display:inline-flex}.landing{background-position:50%;background-size:cover;min-height:100vh;position:relative}.landing:before{content:"";background:linear-gradient(90deg,#f4f4e8e8 0 48%,#eef2e26b 68%,#ffffff08);position:absolute;inset:72px 0 0}.hero{max-width:1400px;padding:5.2vh 6vw;position:relative}.hero p,article p,.system p,.decision p,.drawer p{letter-spacing:.2em;color:#b34d3d;font-size:10px}.hero h1{color:#1d4e66;text-shadow:0 4px 24px #fff;margin:22px 0;font:600 clamp(53px,7.7vw,110px)/.82 Georgia,serif}.hero h2{color:#315f72;font:italic 400 clamp(25px,3vw,43px)/1.1 Georgia,serif}.hero blockquote{color:#315365;margin:28px 0;font:20px/1.5 Georgia,serif}.modes{grid-template-columns:repeat(3,1fr);gap:12px;max-width:1120px;display:grid}.modes button{text-align:left;background:#fff9ece8;border:1px solid #24546d55;min-height:92px;padding:18px;transition:transform .2s,background .2s;box-shadow:0 12px 38px #3b566724}.modes button:hover{background:#fff;transform:translateY(-2px)}.modes b,.modes span{display:block}.modes b{letter-spacing:.12em}.modes span{color:#4c6470;margin-top:8px;font-size:12px;line-height:1.4}.stage{background:#e4ece9;height:calc(100vh - 132px);position:relative;overflow:hidden}.scene{filter:brightness(1.1)contrast(.93)saturate(.98);background-position:50%;background-size:cover;animation:.8s both scene-in;position:absolute;inset:0}.scene:after{content:"";background-image:linear-gradient(#fffbe80d,#0000 61%,#193e502b 100%),linear-gradient(90deg,#f6f4e03d,#0000 64%),repeating-linear-gradient(0deg,#0000 0 39px,#2c66800a 40px),repeating-linear-gradient(90deg,#0000 0 39px,#2c66800a 40px);position:absolute;inset:0}article{z-index:5;background:var(--paper);border-left:3px solid var(--coral);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);width:min(760px,61vw);padding:21px 23px;position:absolute;bottom:5vh;left:5vw;box-shadow:0 18px 55px #2c455438}article h2{margin:9px 0 12px;font:43px/1.08 Georgia,serif}article>span{font:18px/1.52 Georgia,serif;display:block}article small,.system small,.decision small{color:#415c69;margin-top:13px;line-height:1.55;display:block}article small b,.system small b{color:#ae4c3c}.system,.decision{z-index:20;-webkit-backdrop-filter:blur(13px);backdrop-filter:blur(13px);background:#fffaf0f0;border:1px solid #25526a5a;width:485px;padding:22px;position:absolute;top:3.2vh;right:3vw;box-shadow:0 22px 72px #2c45543d}.system h3,.decision h3{margin:6px 0 11px;font:31px/1.08 Georgia,serif}.system label{letter-spacing:.12em;margin:12px 0;font-size:9px;display:block}.system label>b{float:right;color:#b04e3d}.system input{width:100%;accent-color:var(--coral);margin-top:7px;display:block}.system .message input{color:#234a5f;text-transform:uppercase;letter-spacing:.12em;background:#f6f3df;border:1px solid #28546b55;padding:9px 11px}.switches{grid-template-columns:repeat(2,1fr);gap:5px;margin:14px 0;display:grid}.switches button{letter-spacing:.09em;border:1px solid #28556d55;min-height:36px;font-size:8px}.switches button.active{background:var(--blue);color:#fff}.topology{background:linear-gradient(135deg,#e8eedf,#d9eaf0);border:1px solid #2a58705a;height:86px;margin:12px 0;position:relative;overflow:hidden}.topology i{z-index:4;border:3px solid var(--blue);background:#fffaf0;border-radius:50%;place-items:center;width:31px;height:31px;font:12px Georgia,serif;display:grid;position:absolute}.topology i:first-child{top:28px;left:7%}.topology i:nth-child(2){top:10px;left:34%}.topology i:nth-child(3){bottom:8px;left:34%}.topology i:nth-child(4){top:28px;right:7%}.topology span{z-index:2;background:var(--cobalt);height:3px;position:absolute;top:41px;left:11%;right:11%;transform:skewY(-7deg)}.topology .alternate{opacity:.25;background:#d27a52;transform:skewY(8deg)}.topology[data-failed=true] .primary{opacity:.18;background:repeating-linear-gradient(90deg,#a44 0 7px,#0000 8px 14px)}.topology[data-failed=true] .alternate{opacity:1}.packets{gap:5px;min-height:49px;padding:5px 0;display:flex;overflow-x:auto}.packets span{background:#dcecf0;border:1px solid #2c5e7655;flex:none;min-width:52px;padding:6px 8px}.packets i,.packets b{display:block}.packets i{color:#b0523d;font-size:7px}.packets b{letter-spacing:.1em;margin-top:4px;font-size:10px}.metrics{grid-template-columns:repeat(4,1fr);gap:3px;margin-top:12px;display:grid}.metrics span{background:#e2eadd;min-height:56px;padding:9px}.metrics i,.metrics b{display:block}.metrics i{color:#506773;font-size:7px}.metrics b{margin-top:5px;font:14px Georgia,serif}.decision button{text-align:left;border-bottom:1px solid #28526833;justify-content:space-between;align-items:center;gap:16px;width:100%;padding:15px 0;display:flex}.decision button:hover{color:#b04d3c}.state-rail{z-index:7;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);background:#fffce6d6;border:1px solid #28546a48;grid-template-columns:repeat(4,minmax(70px,1fr));max-width:430px;display:grid;position:absolute;bottom:18px;right:18px}.state-rail span{border-right:1px solid #28546a30;padding:9px 11px}.state-rail span:last-child{border:0}.state-rail i,.state-rail b{display:block}.state-rail i{letter-spacing:.08em;font-size:7px}.state-rail b{margin-top:2px;font:20px Georgia,serif}.drawer{z-index:20000;color:#203f50;background:#fffaf0;width:min(590px,100vw);padding:36px;position:fixed;inset:0 0 0 auto;overflow:auto;box-shadow:-30px 0 90px #2346}.drawer>button{float:right;font-size:30px}.drawer h2{font:36px/1.1 Georgia,serif}.drawer a{color:#8f4f43;border-bottom:1px solid #9d8b7766;padding:14px 0;display:block}.drawer small{margin-top:24px;line-height:1.7;display:block}nav{z-index:50;background:#f2f3e8;align-items:center;gap:8px;height:60px;padding:0 18px;display:flex;position:relative}nav>div{flex:1;gap:3px;min-width:max-content;display:flex}nav button{border:1px solid #28546b38;min-width:31px;min-height:32px;font-size:8px}nav button.active{background:var(--blue);color:#fff}.trace{z-index:60;letter-spacing:.08em;background:#fff6dfe8;max-width:60vw;padding:10px;font-size:8px;position:fixed;bottom:62px;right:12px}@keyframes scene-in{0%{opacity:.55;transform:scale(1.014)}to{opacity:1;transform:none}}@media (width<=760px){header{gap:7px;height:64px;padding:0 10px}header strong{display:none}.hero{padding:5vh 5vw}.hero h1{font-size:49px}.modes{grid-template-columns:1fr}.stage{height:calc(100vh - 124px)}article{width:92vw;max-height:57%;padding:15px;bottom:3vh;left:4vw;overflow:auto}article h2{font-size:31px}.system,.decision{width:92vw;max-height:72%;top:auto;bottom:3vh;right:4vw;overflow:auto}.state-rail{display:none}nav{padding:0 6px;overflow:auto}nav>div{min-width:max-content}.collection-home{padding:6px;font-size:8px}.trace{display:none}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.ultimate-motion{z-index:2;pointer-events:none;contain:paint;mix-blend-mode:screen;position:absolute;inset:0;overflow:hidden}.packet-atmosphere i,.packet-atmosphere span{display:block;position:absolute}.packet-grid{opacity:calc(.12 + var(--network-phase)*.24);background-image:linear-gradient(90deg,#77d8db18 1px,#0000 1px),linear-gradient(#77d8db18 1px,#0000 1px);background-size:62px 62px;animation:12s linear infinite network-clock;inset:0}.route-path{background:linear-gradient(90deg,#0000,#7be6d6 16% 84%,#0000);height:2px;animation:5.5s linear infinite packet-flow;top:48%;left:-8%;right:-8%;box-shadow:0 0 12px #55cfc6}.reassembly-ring{width:23vmin;height:23vmin;opacity:calc(.2 + var(--decision-energy)*.24);border:1px solid #7be6d699;border-radius:50%;animation:5s ease-in-out infinite reassembly-state;top:12%;right:8%;box-shadow:0 0 0 17px #6bd4cb10}.packet-atmosphere span{width:9px;height:5px;left:-3%;top:calc(18% + var(--n,0)*13%);animation:packet-hop calc(6s + var(--n,0)*.6s) steps(7,end) infinite;background:#4caea8;border:1px solid #d8fff7}.packet-atmosphere span:nth-of-type(2){--n:1;animation-delay:-2s}.packet-atmosphere span:nth-of-type(3){--n:2;animation-delay:-4s}.packet-atmosphere span:nth-of-type(4){--n:3;animation-delay:-1s}.packet-atmosphere span:nth-of-type(5){--n:4;animation-delay:-3s}@keyframes network-clock{to{background-position:62px 62px}}@keyframes packet-flow{0%{clip-path:inset(0 100% 0 0)}55%,to{clip-path:inset(0)}}@keyframes reassembly-state{50%{rotate:8deg;scale:1.14}}@keyframes packet-hop{to{translate:106vw calc((var(--n,0) - 2)*4vh);opacity:.1}}