:root{--surface-base: #111312;--surface-overlay: rgba(23, 25, 24, .9);--surface-elevated: rgba(28, 31, 30, .96);--surface-frosted: rgba(32, 35, 34, .76);--surface-border: rgba(132, 140, 136, .24);--surface-border-strong: rgba(156, 165, 160, .42);--text-main: #f2f2ef;--text-muted: #a2a59d;--accent: #d7a159;--accent-strong: #e1b270;--accent-soft: rgba(215, 161, 89, .16);--accent-subtle: rgba(215, 161, 89, .08);--shadow-soft: 0 12px 24px rgba(4, 6, 5, .24);--shadow-hover: 0 16px 30px rgba(4, 6, 5, .3);--orange-gradient: linear-gradient(140deg, #ff6b34 0%, #e55a2b 100%)}.app{width:100%;min-height:100vh;height:100vh;display:flex;flex-direction:column;overflow:hidden;color:var(--text-main);background:#131514;font-family:var(--font-sans)}.app:before{content:none;position:fixed;inset:0;pointer-events:none}.app.light{--surface-base: #f4f3ee;--surface-overlay: rgba(250, 249, 244, .96);--surface-elevated: rgba(255, 255, 252, .98);--surface-frosted: rgba(252, 251, 246, .88);--surface-border: rgba(108, 115, 106, .24);--surface-border-strong: rgba(95, 103, 94, .36);--text-main: #1e2120;--text-muted: #5f645e;--accent: #b8833f;--accent-strong: #9d6e33;--accent-soft: rgba(184, 131, 63, .15);--accent-subtle: rgba(184, 131, 63, .08);--shadow-soft: 0 10px 24px rgba(16, 20, 17, .08);--shadow-hover: 0 12px 28px rgba(16, 20, 17, .12);color:var(--text-main);background:#f3f2ed}.app.light:before{content:none}.site-header{padding:.18rem .9rem .2rem;background:transparent;border:0}.site-header-content{position:relative;padding:.2rem .35rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.6rem;border:0;background:transparent;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.site-header-content:after{content:none;position:absolute;inset:0;pointer-events:none}.site-header-left{display:flex;align-items:center;min-width:0}.site-header h1{margin:0;font-size:clamp(.9rem,1.75vw,1.04rem);letter-spacing:.01em;font-weight:600;line-height:1.18;font-family:var(--font-sans)}.site-eyebrow,.site-subtitle{margin:0;color:var(--text-muted)}.site-eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700}.site-subtitle{font-size:.74rem;max-width:min(78ch,72vw);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.site-back-link{display:inline-flex;align-items:center;gap:.3rem;width:fit-content;color:var(--text-main);text-decoration:none;border:1px solid var(--surface-border);border-radius:999px;padding:.24rem .62rem;font-size:.74rem;transition:.16s ease}.site-back-link:hover{border-color:var(--surface-border-strong);background:var(--accent-soft);color:var(--accent-strong)}.site-header-rackout-card{width:min(250px,100%)}.site-header-rackout-headline{display:flex;align-items:baseline;gap:.35em;flex-wrap:wrap;margin-bottom:.45rem}.site-header-rackout-headline .newsletter-title{margin:0;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase}.site-header-rackout-text{color:inherit}.site-header-rackout-desc{display:block;font-size:.71rem;color:var(--text-muted);line-height:1.32}.site-header-center{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:0;text-align:center;gap:.08rem}.site-header-brand{display:flex;flex-direction:column;align-items:center;gap:.1rem}.site-header-brand-title{font-size:clamp(.95rem,2vw,1.1rem);font-weight:700;letter-spacing:.02em;color:var(--text-main);font-family:var(--font-sans)}.site-header-brand-sub{font-size:.75rem;color:var(--text-muted);letter-spacing:.04em;font-family:var(--font-sans)}.site-header-right{display:flex;align-items:center;justify-content:flex-end;gap:.6rem;min-width:0}.site-header-extra{margin-top:.12rem;display:flex;justify-content:center}.site-header-actions{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}.site-header-label{display:inline-flex;align-items:center;gap:.45rem;font-size:.83rem;color:var(--text-muted)}.site-header-select{border-radius:10px;border:1px solid var(--surface-border);background:var(--surface-elevated);color:var(--text-main);padding:.3rem .62rem;min-width:118px}.site-header-select:focus-visible{outline:0;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.site-header .carbon-ad-link.site-sponsor-link,.site-header-rackout-ad{display:inline-flex;align-items:center;padding:.28rem .62rem;gap:.35rem;border-radius:999px;text-decoration:none;font-size:.72rem;font-weight:500;letter-spacing:.02em;background:color-mix(in srgb,var(--surface-elevated) 84%,var(--accent-subtle) 16%);color:var(--text-muted);border:1px solid var(--surface-border);transition:border-color .16s ease,color .16s ease,background-color .16s ease}.site-header .carbon-ad-link.site-sponsor-link:hover,.site-header-rackout-ad:hover{border-color:var(--surface-border-strong);background:color-mix(in srgb,var(--surface-elevated) 70%,var(--accent-soft) 30%);color:var(--text-main)}.app.light .site-header .carbon-ad-link.site-sponsor-link,.app.light .site-header-rackout-ad{color:var(--text-muted)}.app-content{min-height:0}.app:not(.home-page) .app-content{padding:0 .9rem .75rem}.app:not(.home-page) .diagram-container{border:1px solid var(--surface-border);border-radius:12px;background:var(--surface-elevated);box-shadow:var(--shadow-soft);animation:none}.app.home-page .home-content{animation:none}.app:not(.home-page) .diagram-container{overflow:hidden}.flow-controls{margin:1rem 1rem 0;border-radius:12px;border:1px solid var(--surface-border);background:var(--surface-elevated);padding:.75rem .9rem}.flow-controls h3{margin-top:0;margin-bottom:.5rem;color:var(--text-main);font-size:.95rem}.flow-control-row{display:flex;flex-wrap:wrap;gap:.55rem .75rem}.fibre-flow-content{display:flex;flex-direction:column;min-height:0}.fibre-flow-canvas{flex:1;overflow:hidden;padding:1rem}.home-page .app-content{padding:0 .9rem .75rem;overflow-y:auto}.home-content{overflow:visible;padding:.5rem 0 0;display:flex;flex-direction:column;gap:0}.home-mobile-bottom{display:none}.home-demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1rem}.home-demo-card{--home-card-accent: var(--accent-strong);position:relative;overflow:hidden;text-decoration:none;border-radius:14px;border:1px solid var(--surface-border);padding:1.5rem 1.35rem;background:color-mix(in srgb,var(--surface-elevated) 96%,#000 4%);color:var(--text-main);display:flex;flex-direction:column;align-items:flex-start;gap:1rem;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}.home-demo-card:before,.home-demo-card:after{content:"";position:absolute;left:0;right:0;pointer-events:none}.home-demo-card:before{top:0;height:1px;background:color-mix(in srgb,var(--surface-border) 78%,transparent 22%);opacity:1}.home-demo-card:after{bottom:0;height:3px;background:var(--home-card-accent);opacity:.7;transition:opacity .18s ease}.home-demo-card--racks{--home-card-accent: #f59e0b}.home-demo-card--fibre{--home-card-accent: #38bdf8}.home-demo-card--odf{--home-card-accent: #22c55e}.home-demo-card--flow{--home-card-accent: #9b7ad6}.app.light .home-demo-card{background:var(--surface-elevated)}.home-demo-card:hover{transform:translateY(-2px);border-color:var(--surface-border-strong);box-shadow:0 20px 32px #05070d4d}.home-demo-card:hover:after{opacity:1}.home-demo-card:hover .home-demo-card-icon{color:var(--home-card-accent);transform:scale(1.02)}.home-demo-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.home-demo-card-icon{flex-shrink:0;width:88px;height:88px;color:var(--home-card-accent);display:grid;place-items:center;background:transparent;transition:color .18s ease,transform .18s ease}.home-demo-card-icon svg{width:56px;height:56px;display:block}.home-demo-card-path{font-size:1.1rem;font-weight:600;font-family:var(--font-mono);color:var(--home-card-accent);letter-spacing:.02em}.home-demo-card-features{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.35rem;color:var(--text-muted);font-size:.85rem;line-height:1.4;font-family:var(--font-sans)}.home-demo-card-features li{display:flex;align-items:center;gap:.4rem}.home-demo-card-features li:before{content:"";width:4px;height:4px;border-radius:50%;background:var(--home-card-accent);opacity:.9;flex-shrink:0}.demo-toggle{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--surface-border);border-radius:999px;padding:.36rem .72rem;background:var(--surface-elevated);font-size:.82rem;font-family:var(--font-sans)}.demo-toggle input{accent-color:var(--accent)}.control-panel{top:.85rem;left:.85rem;border:1px solid var(--surface-border);background:color-mix(in srgb,var(--surface-elevated) 90%,transparent);box-shadow:0 12px 22px #03040959}.app.light .control-panel{background:color-mix(in srgb,var(--surface-elevated) 92%,white)}.control-button,.xy-theme__button{background:var(--surface-elevated);border:1px solid var(--surface-border);color:var(--text-main);border-radius:9px}.app.light .control-button,.app.light .xy-theme__button{background:var(--surface-elevated)}.control-button:hover,.xy-theme__button:hover{border-color:var(--surface-border-strong);background:color-mix(in srgb,var(--surface-elevated) 82%,var(--accent-subtle) 18%)}.control-select{background:var(--surface-elevated);color:var(--text-main);border:1px solid var(--surface-border);border-radius:9px}.control-select:hover{border-color:var(--surface-border-strong)}.control-select:focus-visible{outline:0;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.node-info-panel{background:color-mix(in srgb,var(--surface-elevated) 94%,transparent);border:1px solid var(--surface-border)}.node-info-panel h3,.info-row strong,.ports-section strong{color:var(--accent-strong)}.device-image-side{color:var(--text-muted)}.site-footer{background:transparent;border:0;padding:0 .9rem .75rem}.site-footer-links{margin:0;border:1px solid var(--surface-border);border-radius:12px;background:var(--surface-overlay);color:var(--text-muted);padding:.6rem .9rem;font-size:.75rem;font-family:var(--font-sans);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem}.footer-separator{opacity:.42}.footer-link-button{border:0;padding:0;background:none;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px}.site-footer-links a,.footer-link-button{transition:color .15s ease}.site-footer-links a:hover,.footer-link-button:hover{color:var(--text-main)}.commercial-contact-link{position:relative;cursor:help;text-decoration:underline;text-underline-offset:2px}.commercial-contact-tooltip{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);border:1px solid var(--surface-border);border-radius:8px;background:var(--surface-base);color:var(--text-main);padding:.35rem .55rem;font-size:.72rem;white-space:nowrap;z-index:30}.commercial-contact-link:hover .commercial-contact-tooltip,.commercial-contact-link:focus-within .commercial-contact-tooltip{display:inline-flex}.app.light .commercial-contact-tooltip{background:#fff}.npm-link{border-radius:999px;border:1px solid #cb3837;background:#cb38371a;color:#cb3837;padding:.18rem .55rem;gap:.3rem}.npm-link:hover{background:#cb3837;border-color:#cb3837;color:#fff;box-shadow:none;transform:none}.github-link{border-radius:999px;border:1px solid var(--surface-border);padding:.18rem .55rem}.github-link:hover{border-color:var(--surface-border-strong);background:#a1a1aa14;transform:none}.newsletter-card{width:min(290px,100%);border-radius:12px;border:1px solid var(--surface-border);background:color-mix(in srgb,var(--surface-elevated) 95%,transparent);padding:.75rem}.newsletter-title{margin:0 0 .62rem;font-size:.81rem;text-align:left;color:var(--text-muted);font-family:var(--font-sans)}.newsletter-form-input,.newsletter-form-button,.newsletter-loading-button{width:100%}.newsletter-form-input{border-color:var(--surface-border);background:var(--surface-elevated);color:var(--text-main);font-family:var(--font-sans)}.newsletter-form-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.newsletter-form-button,.newsletter-loading-button{border-radius:9px;background:var(--orange-gradient);font-family:var(--font-sans)}.rackout-link-container{margin-top:.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}.rackout-description{color:var(--text-muted);font-size:.75rem;font-family:var(--font-sans)}@media(prefers-reduced-motion:reduce){.site-header-content,.home-demo-card,.app:not(.home-page) .diagram-container,.app.home-page .home-content{animation:none}}@media(max-width:960px){.site-header,.app:not(.home-page) .app-content,.home-page .app-content,.site-footer{padding-left:.8rem;padding-right:.8rem}.site-header-content,.home-content,.site-footer-links{border-radius:12px}.home-page .site-header-content{grid-template-columns:1fr;gap:.8rem}.home-page .site-header-left,.home-page .site-header-center,.home-page .site-header-right{width:100%;justify-content:flex-start}.home-page .newsletter-card{width:100%}.flow-controls{margin:.85rem;margin-bottom:0}.site-footer-links{justify-content:flex-start}.footer-separator{display:none}}@media(max-width:768px){.app:not(.home-page) .site-header-content{grid-template-columns:auto minmax(0,1fr);gap:.45rem}.app:not(.home-page) .site-header-right{display:none}.app:not(.home-page) .site-subtitle{white-space:normal}.home-page .site-header-content{grid-template-columns:1fr;gap:.7rem}.home-page .site-header-left,.home-page .site-header-center,.home-page .site-header-right{width:100%;justify-content:flex-start}.site-header-rackout-card,.newsletter-card{max-width:100%}.home-page .site-header-right .newsletter-form-container--desktop{display:none}.home-page .newsletter-form-container--mobile{display:block;margin-top:1.5rem;width:100%}.home-page .home-mobile-bottom{display:flex;flex-direction:column;gap:.7rem;margin-top:1rem}.home-page .home-mobile-bottom-links{display:flex;justify-content:flex-start}.home-page .home-mobile-bottom-links .github-link{display:inline-flex;align-items:center;gap:.3rem}}@media(min-width:769px){.home-page .newsletter-form-container--mobile{display:none}}@media(max-width:640px){.home-demo-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.85rem}.home-demo-card{padding:1.35rem 1.15rem}.control-panel{top:.55rem;left:.55rem;gap:.32rem;padding:.52rem}}.dialog-overlay{background:#040509c2;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.app.light .dialog-overlay{background:#18181b59}.dialog-content{border:1px solid var(--surface-border);background:var(--surface-overlay);box-shadow:var(--shadow-soft);border-radius:14px}.dialog-header{border-bottom:1px solid var(--surface-border)}.dialog-title{color:var(--text-main)}.dialog-close-button{color:var(--text-muted)}.dialog-close-button:hover{background:var(--accent-soft);color:var(--text-main)}.dialog-content-xl{width:min(1100px,92vw);max-width:min(1100px,92vw);max-height:92vh;height:88vh}.dialog-body-panel{padding:1rem;overflow:hidden;display:flex;flex-direction:column;height:100%}.dialog-loading-state{padding:2rem;text-align:center;color:var(--text-muted)}.dialog-diagram-container{flex:1;min-height:600px;width:100%;height:100%}.license-section-modal{border-radius:10px;margin-bottom:0;background:transparent;border-top:0;padding:0}.license-content-modal{text-align:center;background:transparent;border:0;padding:.35rem .2rem 0;max-height:none}.license-more-link-wrap{margin-top:1rem;text-align:center}.license-more-link{color:var(--accent-strong);text-decoration:none;font-size:.9rem;font-weight:500;display:inline-flex;align-items:center;gap:.5rem}.license-more-link:hover{color:var(--accent)}.form-modal-overlay{position:fixed;inset:0;z-index:2100;background:#05060bb8;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:1rem}.form-modal-card{width:min(460px,100%);border-radius:14px;border:1px solid var(--surface-border);background:var(--surface-overlay);color:var(--text-main);box-shadow:var(--shadow-soft);padding:1.1rem}.form-modal-title{margin:0 0 .95rem;font-size:1.08rem;letter-spacing:.01em}.form-modal-form{display:flex;flex-direction:column;gap:.78rem}.form-modal-field{display:flex;flex-direction:column;gap:.36rem}.form-modal-label{font-size:.82rem;color:var(--text-muted);letter-spacing:.02em}.form-modal-input{width:100%;border-radius:10px;border:1px solid var(--surface-border);background:var(--surface-elevated);color:var(--text-main);padding:.52rem .64rem}.form-modal-input:focus-visible{outline:0;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.form-modal-color{height:40px;padding:.22rem;cursor:pointer}.form-modal-hint{margin:0;font-size:.74rem;color:var(--text-muted)}.form-modal-summary{border-radius:10px;border:1px solid var(--surface-border);background:var(--surface-frosted);padding:.65rem .75rem}.form-modal-summary-title{margin:0;font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-strong)}.form-modal-summary-text{margin:.18rem 0 0;font-size:.8rem;color:var(--text-muted)}.form-modal-actions{margin-top:.2rem;display:flex;justify-content:flex-end;gap:.55rem}.form-modal-button{border-radius:10px;padding:.48rem .82rem;font-size:.83rem;cursor:pointer;transition:.16s ease}.form-modal-button-secondary{border:1px solid var(--surface-border);background:var(--surface-elevated);color:var(--text-main)}.form-modal-button-secondary:hover{border-color:var(--surface-border-strong)}.form-modal-button-primary{border:1px solid transparent;background:var(--orange-gradient);color:#151515;font-weight:600}.form-modal-button-primary:hover{filter:brightness(1.04)}@media(max-width:768px){.dialog-content-xl{width:95vw;max-width:95vw;height:92vh;max-height:92vh}.dialog-diagram-container{min-height:420px}}
