.app-shell{display:flex;min-height:100vh}.app-shell--empty{align-items:center;justify-content:center;padding:var(--sp-7);color:var(--text-secondary)}.sidebar{position:-webkit-sticky;position:sticky;top:0;display:flex;flex-direction:column;width:var(--sidebar-width);flex:0 0 auto;height:100vh;padding:var(--sp-4) var(--sp-3);background:var(--surface);border-right:1px solid var(--border);overflow:hidden;z-index:50;transition:width var(--dur-med) var(--ease-out),transform var(--dur-med) var(--ease-out);animation:rise-in var(--dur-slow) var(--ease-out) both}.sidebar.is-collapsed{width:var(--sidebar-collapsed-width)}.sidebar-brand{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-2) var(--sp-4);white-space:nowrap}.sidebar-logo{display:inline-flex;flex:0 0 auto}.sidebar-brand-text{display:flex;flex-direction:column;min-width:0}.sidebar-title{font-size:var(--fs-lg);font-weight:600;letter-spacing:.5px}.sidebar-subtitle{font-family:var(--font-mono);font-size:10px;letter-spacing:1.8px;color:var(--text-secondary)}.sidebar-section-label{font-size:var(--fs-xs);letter-spacing:1.5px;color:var(--text-secondary);padding:var(--sp-2) var(--sp-2) var(--sp-1);white-space:nowrap}.sidebar-nav{display:flex;flex-direction:column;gap:var(--sp-1)}.tool-item{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:44px;padding:var(--sp-2) var(--sp-2);border-radius:var(--r-md);text-align:left;border:1px solid transparent;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}button.tool-item:hover{background:var(--surface-sunken)}.tool-item.is-active{background:var(--accent-soft);border-color:var(--accent-a25);box-shadow:inset 3px 0 0 var(--accent-strong)}.tool-item.is-active .tool-item-name{color:var(--accent-strong)}.tool-item-icon{display:inline-flex;flex:0 0 auto;color:var(--text-secondary)}.tool-item.is-active .tool-item-icon{color:var(--accent-strong)}.tool-item-text{display:flex;flex-direction:column;min-width:0;overflow:hidden}.tool-item-name{font-size:var(--fs-md);font-weight:500;white-space:nowrap}.tool-item-desc{font-size:var(--fs-xs);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tool-item.is-placeholder{cursor:default;opacity:.45}.sidebar-collapse{margin-top:auto;display:flex;align-items:center;gap:var(--sp-3);min-height:40px;padding:0 var(--sp-2);border-radius:var(--r-md);color:var(--text-secondary);white-space:nowrap;transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}.sidebar-collapse:hover{background:var(--surface-sunken);color:var(--text)}.sidebar-collapse-icon{display:inline-flex;flex:0 0 20px;justify-content:center;transition:transform var(--dur-med) var(--ease-out)}.sidebar-collapse-icon.is-flipped{transform:rotate(180deg)}.sidebar-collapse-text{font-size:var(--fs-sm)}.sidebar.is-collapsed .sidebar-section-label{opacity:0;pointer-events:none}.sidebar.is-collapsed .sidebar-brand-text,.sidebar.is-collapsed .tool-item-text,.sidebar.is-collapsed .sidebar-collapse-text{display:none}.sidebar.is-collapsed .tool-item{justify-content:center;padding:var(--sp-2) 0}.sidebar.is-collapsed .sidebar-brand{justify-content:center;padding-left:0;padding-right:0}.sidebar.is-collapsed .sidebar-collapse{justify-content:center;padding:0}.sidebar-close{display:none;position:absolute;top:var(--sp-3);right:var(--sp-3);width:40px;height:40px;font-size:22px;line-height:1;border-radius:var(--r-sm);color:var(--text-secondary);align-items:center;justify-content:center}.sidebar-close:hover{background:var(--surface-sunken)}.sidebar-backdrop{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:var(--text-a32);border:none;z-index:40}.workspace{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}.workspace-topbar{display:none;position:-webkit-sticky;position:sticky;top:0;z-index:30;align-items:center;gap:var(--sp-3);height:var(--topbar-height);padding:0 var(--sp-4);background:var(--surface);border-bottom:1px solid var(--border)}.topbar-menu{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r-sm);color:var(--text)}.topbar-menu:hover{background:var(--surface-sunken)}.topbar-title{font-size:var(--fs-lg);font-weight:600}.workspace-main{flex:1 1 auto;padding:var(--sp-6) var(--sp-6) var(--sp-7);min-width:0}.tool-page{max-width:1120px;margin:0 auto}@media (max-width: 900px){.sidebar{position:fixed;top:0;left:0;bottom:0;width:min(300px,86vw)!important;transform:translate(-104%);box-shadow:var(--shadow-3);animation:none}.sidebar.is-open{transform:translate(0)}.sidebar .sidebar-brand-text,.sidebar .sidebar-section-label,.sidebar .tool-item-text,.sidebar .sidebar-collapse-text{opacity:1;pointer-events:auto}.sidebar.is-collapsed .sidebar-brand-text,.sidebar.is-collapsed .tool-item-text{display:flex}.sidebar .tool-item{justify-content:flex-start;padding:var(--sp-2)}.sidebar-collapse{display:none}.sidebar-close{display:inline-flex}.sidebar-backdrop.is-open,.sidebar-backdrop{display:block;animation:rise-in var(--dur-fast) var(--ease-out) both}.workspace-topbar{display:flex}.workspace-main{padding:var(--sp-4) var(--sp-4) var(--sp-6)}}.tool-header{margin-bottom:var(--sp-5);animation:rise-in var(--dur-slow) var(--ease-out) both}.tool-header h1{font-size:var(--fs-2xl);letter-spacing:.3px}.tool-subtitle{margin-top:var(--sp-1);color:var(--text-secondary);font-size:var(--fs-md)}.tool-section{margin-bottom:var(--sp-4);animation:rise-in var(--dur-slow) var(--ease-out) both;transition-delay:0ms}.tool-section:hover{box-shadow:var(--shadow-2)}.tool-footnote{color:var(--text-secondary);font-size:var(--fs-sm);padding:0 var(--sp-2) var(--sp-4);animation:rise-in var(--dur-slow) var(--ease-out) both}.ip-input-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-4)}.ip-input-grid{display:grid;grid-template-columns:minmax(180px,1.2fr) minmax(220px,1.4fr) minmax(180px,1.2fr);gap:var(--sp-4)}.field{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}.field-label{font-size:var(--fs-sm);font-weight:500;color:var(--text-secondary);padding:0}.field-hint-inline{margin-left:var(--sp-2);font-weight:400;font-size:var(--fs-xs)}.field-error{font-size:var(--fs-xs);color:var(--danger);line-height:1.5}.prefix-controls{display:flex;align-items:center;gap:var(--sp-2)}.prefix-slash{font-size:var(--fs-lg);color:var(--text-secondary)}.prefix-controls .text-input{width:72px;text-align:center}.prefix-controls .range-input{flex:1 1 auto;min-width:0}.ip-input-divider{height:1px;background:var(--border);margin:var(--sp-4) 0}.mode-group{border:none;padding:0;margin:0 0 var(--sp-4)}.mode-group legend{margin-bottom:var(--sp-2)}.mode-options{display:flex;gap:var(--sp-2);flex-wrap:wrap}.mode-option{display:flex;align-items:center;gap:var(--sp-2);min-height:44px;padding:var(--sp-2) var(--sp-3);border:1px solid var(--border-strong);border-radius:var(--r-md);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}.mode-option:hover{background:var(--surface-sunken)}.mode-option:has(input:checked){border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent)}.mode-option input{accent-color:var(--accent-strong);width:16px;height:16px}.mode-option-text{display:flex;flex-direction:column}.mode-option-name{font-size:var(--fs-md);font-weight:500}.mode-option-desc{font-size:var(--fs-xs);color:var(--text-secondary)}.value-controls{display:flex;align-items:center;gap:var(--sp-3)}.value-controls .text-input{width:110px;text-align:center}.value-controls .range-input{flex:1 1 auto;min-width:0}.bv-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-4)}.bv-caption{font-size:var(--fs-sm);color:var(--text-secondary)}.bv-block{padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg);margin-bottom:var(--sp-4)}.bv-block:last-child{margin-bottom:0}.bv-block-mask{background:var(--surface)}.bv-block-title{display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;font-size:var(--fs-sm);font-weight:600;color:var(--text-secondary);margin-bottom:var(--sp-2)}.bv-block-value{color:var(--text);font-size:var(--fs-md);font-weight:600}.bv-grid{display:grid;grid-template-columns:repeat(32,minmax(0,1fr));gap:3px}.bv-octet-row{margin-bottom:var(--sp-2)}.bv-octet{grid-column:span 8;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:600;padding:2px 0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm)}.bv-label-row{margin-bottom:var(--sp-2)}.seg-label{font-size:var(--fs-xs);font-weight:600;letter-spacing:.4px;padding:1px 6px 3px;border-bottom:2.5px solid currentColor;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}.seg-label-net{color:var(--net)}.seg-label-subnet{color:var(--subnet-strong)}.seg-label-host{color:var(--host)}.bit{display:flex;align-items:center;justify-content:center;height:var(--bit-size);font-family:var(--font-mono);font-size:var(--fs-xs);border-radius:4px;border:1px solid transparent;transition:background-color .38s var(--ease-out),color .38s var(--ease-out),box-shadow .38s var(--ease-out)}.bit-net{background:var(--net-soft);color:var(--net)}.bit-subnet{background:var(--subnet-soft);color:var(--subnet-strong)}.bit-host{background:var(--host-soft);color:var(--host)}.bit.seg-start{box-shadow:inset 2.5px 0 0 var(--border-strong)}.bit.is-pulsing{animation:bit-borrow .42s var(--ease-out)}.bv-mask-row .bit-mask-one{background:var(--net-soft);color:var(--net);font-weight:600}.bv-mask-row .bit-mask-zero{background:transparent;color:var(--text-secondary);opacity:.55}.bv-mask-legend{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2);font-size:var(--fs-xs);color:var(--text-secondary)}.legend-dot{display:inline-block;width:10px;height:10px;border-radius:3px;flex:0 0 auto}.legend-dot-one{background:var(--net-soft);border:1px solid var(--net)}.steps-list{list-style:none;padding:0;margin:0;position:relative}.step-item{position:relative;display:flex;gap:var(--sp-3);padding:0 0 var(--sp-4) 0;margin-left:5px;border-left:2px solid var(--accent-a22);animation:rise-in .42s var(--ease-out) both}.step-item:last-child{border-left-color:transparent;padding-bottom:0}.step-dot{position:absolute;left:-6px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--surface);border:2.5px solid var(--accent-strong)}.step-body{padding-left:var(--sp-3);font-size:var(--fs-md);line-height:1.75}.step-note{display:block;margin-top:2px;font-size:var(--fs-xs);color:var(--text-secondary)}.step-keyword{font-weight:600;color:var(--subnet-strong)}.step-num{font-weight:600;font-size:.95em;background:var(--surface-sunken);border-radius:4px;padding:0 5px;white-space:nowrap}.hl-net{color:var(--net);font-weight:600}.hl-subnet{color:var(--subnet-strong);font-weight:600}.hl-host{color:var(--host);font-weight:600}.tree-scroll{overflow:auto;border-radius:var(--r-sm)}.tree-layout{min-width:max-content;padding:var(--sp-2) var(--sp-2) var(--sp-3)}.tree-root-row{display:flex;justify-content:center}.tree-root-card{display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:var(--sp-3) var(--sp-5);background:var(--accent-soft);border:1.5px solid var(--accent-a40);border-radius:var(--r-md);animation:pop-in .42s var(--ease-out) both}.tree-root-label{font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:600;letter-spacing:1px;color:var(--accent-strong)}.tree-root-cidr{font-size:var(--fs-md);font-weight:600}.tree-root-badge{font-size:var(--fs-xs);color:var(--subnet-strong);font-weight:600}.tree-stem{width:2px;height:20px;margin:0 auto;background:var(--border-strong)}.tree-children{display:flex;align-items:flex-start;gap:var(--sp-3)}.tree-child{position:relative;flex:1 1 0;min-width:118px;padding-top:20px}.tree-child:before{content:"";position:absolute;top:0;left:50%;width:2px;height:20px;transform:translate(-50%);background:var(--border-strong)}.tree-child:after{content:"";position:absolute;top:0;left:calc(var(--sp-3) / -2);right:calc(var(--sp-3) / -2);height:2px;background:var(--border-strong)}.tree-child:first-child:after{left:50%}.tree-child:last-child:after{right:50%}.subnet-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:var(--sp-2) var(--sp-3);background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-1);font-size:var(--fs-xs);text-align:left;min-height:44px;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);animation:pop-in .42s var(--ease-out) both}.tree-child .subnet-card{animation-name:rise-in}.subnet-card:hover{border-color:var(--accent-a55);transform:translateY(-2px);box-shadow:var(--shadow-2)}.subnet-card.is-selected{border-color:var(--accent-strong);box-shadow:0 0 0 1.5px var(--accent-strong),var(--shadow-2)}.subnet-card-index{font-weight:600;color:var(--subnet-strong)}.subnet-card-cidr{font-size:var(--fs-sm);font-weight:600;white-space:nowrap}.subnet-card-meta{color:var(--text-secondary)}.subnet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-3);padding:var(--sp-1)}.subnet-grid .subnet-card{animation:none}.detail-index{color:var(--accent-strong)}.detail-cidr{font-size:var(--fs-md);font-weight:600;color:var(--accent-strong)}.detail-grid{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,1.6fr);gap:var(--sp-5)}.detail-info{display:flex;flex-direction:column;gap:var(--sp-2);margin:0}.detail-info-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm)}.detail-info-row dt{font-size:var(--fs-sm);color:var(--text-secondary);flex:0 0 auto}.detail-info-row dd{margin:0;text-align:right;min-width:0}.detail-value{font-weight:600;font-size:var(--fs-md)}.detail-hint{display:block;font-size:var(--fs-xs);color:var(--text-secondary)}.detail-subtitle{font-size:var(--fs-sm);font-weight:600;color:var(--text-secondary);margin:0 0 var(--sp-2)}.mini-bits{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:3px;margin-bottom:var(--sp-2)}.mini-bit{display:flex;align-items:center;justify-content:center;height:22px;font-size:var(--fs-xs);border-radius:4px}.seg-net{background:var(--net-soft);color:var(--net)}.seg-subnet{background:var(--subnet-soft);color:var(--subnet-strong)}.seg-host{background:var(--host-soft);color:var(--host)}.detail-legend{display:flex;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-4);font-size:var(--fs-xs);color:var(--text-secondary)}.legend-item{display:inline-flex;align-items:center;gap:6px}.legend-net{background:var(--net-soft);border:1px solid var(--net)}.legend-subnet{background:var(--subnet-soft);border:1px solid var(--subnet)}.legend-host{background:var(--host-soft);border:1px solid var(--host)}.device-dots{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:var(--sp-2)}.device-dot{width:15px;height:15px;border-radius:4px;background:var(--host-soft);border:1px solid var(--host);animation:pop-in .3s var(--ease-out) both}.device-bar-head{display:flex;align-items:baseline;gap:var(--sp-3);margin-bottom:var(--sp-2)}.device-count{font-size:var(--fs-2xl);font-weight:600;color:var(--host);line-height:1.1}.device-bar-caption{font-size:var(--fs-sm);color:var(--text-secondary)}.device-bar-track{height:14px;border-radius:7px;background:var(--surface-sunken);border:1px solid var(--border);overflow:hidden}.device-bar-fill{height:100%;border-radius:7px;background:linear-gradient(90deg,var(--host),var(--host-a72));transition:width var(--dur-med) var(--ease-out)}.device-bar-note{margin-top:var(--sp-2);font-size:var(--fs-xs);color:var(--text-secondary)}.device-empty{font-size:var(--fs-sm);color:var(--text-secondary);background:var(--surface-sunken);border-radius:var(--r-sm);padding:var(--sp-3)}.table-scroll{max-height:400px;overflow:auto;border:1px solid var(--border);border-radius:var(--r-md)}.result-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}.result-table th{position:-webkit-sticky;position:sticky;top:0;z-index:1;background:var(--surface-sunken);text-align:left;font-weight:600;font-size:var(--fs-xs);letter-spacing:.5px;color:var(--text-secondary);padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border-strong);white-space:nowrap}.result-table td{padding:7px var(--sp-3);border-bottom:1px solid var(--border);white-space:nowrap}.result-table tbody tr:last-child td{border-bottom:none}.result-row{cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out)}.result-row:hover{background:var(--accent-soft)}.result-row.is-selected{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent-strong)}.col-index{width:56px}.col-num,th.col-num{text-align:right}.table-footnote{margin-top:var(--sp-3);font-size:var(--fs-xs);color:var(--text-secondary)}.error-notice{border-color:var(--danger-border);background:linear-gradient(0deg,var(--danger-soft),var(--danger-soft)),var(--surface)}.error-head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)}.error-badge{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--danger);color:#fff;font-weight:600;flex:0 0 auto}.error-body{display:flex;flex-direction:column;gap:var(--sp-3)}.error-summary{font-size:var(--fs-md);line-height:1.8}.error-facts{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--sp-1)}.error-facts li{font-size:var(--fs-sm);color:var(--text-secondary)}.error-facts code{color:var(--danger);font-weight:600;background:var(--surface);border:1px solid var(--danger-border);border-radius:4px;padding:0 5px}@media (max-width: 980px){.ip-input-grid{grid-template-columns:1fr 1fr}.detail-grid{grid-template-columns:1fr}}@media (max-width: 720px){:root{--bit-size: 14px}.ip-input-grid{grid-template-columns:1fr}.mode-options{flex-direction:column}.mode-option{align-items:flex-start}.bv-octet{font-size:13px}.value-controls{flex-direction:column;align-items:stretch}.value-controls .text-input{width:100%}}.tcp-root .panel{animation:rise-in var(--dur-slow) var(--ease-out) both}.tcp-header{margin-bottom:var(--sp-5);animation:rise-in var(--dur-slow) var(--ease-out) both}.tcp-header h1{font-size:var(--fs-2xl);letter-spacing:.3px}.tcp-subtitle{margin-top:var(--sp-1);color:var(--text-secondary);font-size:var(--fs-md)}.tcp-footnote{color:var(--text-secondary);font-size:var(--fs-sm);padding:0 var(--sp-2) var(--sp-4);animation:rise-in var(--dur-slow) var(--ease-out) both}.tcp-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);gap:var(--sp-4);align-items:start;margin-bottom:var(--sp-4)}.tcp-col-main,.tcp-col-side{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}.seq-scene{position:relative;padding-top:108px}.seq-lifeline{position:absolute;top:92px;bottom:4px;width:2px;background-image:repeating-linear-gradient(to bottom,var(--text-a32) 0 6px,transparent 6px 12px)}.seq-lifeline-a{left:18%}.seq-lifeline-b{left:82%}.seq-net-label{position:absolute;top:96px;left:50%;transform:translate(-50%);font-size:var(--fs-xs);letter-spacing:3px;color:var(--text-secondary);opacity:.65;pointer-events:none}.seq-node{position:absolute;top:0;transform:translate(-50%);width:172px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--sp-3) var(--sp-2);background:var(--surface);border:1.5px solid var(--border-strong);border-radius:var(--r-md);box-shadow:var(--shadow-1);transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);z-index:2}.seq-node-a{left:18%}.seq-node-b{left:82%}.seq-node-emoji{font-size:22px;line-height:1.2}.seq-node-name{font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:600}.seq-node-caption{font-size:var(--fs-xs);color:var(--text-secondary)}.seq-node.is-sending{border-color:var(--accent-a55)}.seq-node.is-receiving{border-color:var(--accent-strong);animation:node-pulse .9s var(--ease-out)}@keyframes node-pulse{0%{box-shadow:0 0 0 0 var(--accent-a40),var(--shadow-2);transform:translate(-50%) scale(1)}45%{box-shadow:0 0 0 10px var(--accent-a22),var(--shadow-2);transform:translate(-50%) scale(1.03)}to{box-shadow:0 0 0 1.5px var(--accent-a25),var(--shadow-2);transform:translate(-50%) scale(1)}}.seq-lanes{position:relative;display:flex;flex-direction:column;z-index:1}.seq-lane{position:relative;height:44px}.seq-lane.is-future .seq-lane-dots{position:absolute;top:50%;left:24%;right:24%;height:2px;transform:translateY(-50%);background-image:repeating-linear-gradient(to right,var(--text-a14) 0 6px,transparent 6px 12px)}.seq-arrow{position:absolute;top:50%;height:2.5px;transform:translateY(-50%);background:var(--text-a18)}.seq-arrow.is-a2b{left:18%;right:calc(18% + 9px)}.seq-arrow.is-b2a{left:calc(18% + 9px);right:18%}.seq-arrow-head{position:absolute;top:50%;transform:translateY(-50%);border-top:5px solid transparent;border-bottom:5px solid transparent}.seq-arrow.is-a2b .seq-arrow-head{right:-9px;border-left:9px solid var(--text-a18)}.seq-arrow.is-b2a .seq-arrow-head{left:-9px;border-right:9px solid var(--text-a18)}.seq-lane.is-past .seq-arrow{background:var(--text-a32)}.seq-lane.is-past .seq-arrow.is-a2b .seq-arrow-head{border-left-color:var(--text-a32)}.seq-lane.is-past .seq-arrow.is-b2a .seq-arrow-head{border-right-color:var(--text-a32)}.seq-lane.is-current .seq-arrow{background:var(--accent)}.seq-lane.is-current .seq-arrow.is-a2b .seq-arrow-head{border-left-color:var(--accent)}.seq-lane.is-current .seq-arrow.is-b2a .seq-arrow-head{border-right-color:var(--accent)}.seq-pkt-label{position:absolute;top:0;left:50%;transform:translate(-50%);display:flex;align-items:baseline;gap:6px;padding:2px 10px;background:var(--surface);border:1px solid var(--border);border-radius:999px;font-family:var(--font-mono);font-size:var(--fs-xs);white-space:nowrap;z-index:2}.seq-pkt-label b{font-weight:600;color:var(--accent-strong)}.seq-pkt-label i{font-style:normal;color:var(--text-secondary)}.seq-lane.is-current .seq-pkt-label{border-color:var(--accent-a55);box-shadow:var(--shadow-1);animation:pop-in var(--dur-med) var(--ease-out) both}.seq-pkt-fly{position:absolute;top:50%;margin-top:-23px;width:150px;--fly-w: 150px;display:flex;flex-direction:column;gap:1px;padding:5px 10px;background:var(--surface);border:1.5px solid var(--accent-strong);border-radius:var(--r-sm);box-shadow:var(--shadow-2);font-family:var(--font-mono);font-size:var(--fs-xs);text-align:center;z-index:5}.seq-pkt-fly-title{font-weight:600;color:var(--accent-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.seq-pkt-fly-detail{color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.seq-pkt-fly.is-a2b{animation:pkt-fly-right calc(.95s / var(--speed, 1)) var(--ease-out) both}.seq-pkt-fly.is-b2a{animation:pkt-fly-left calc(.95s / var(--speed, 1)) var(--ease-out) both}@keyframes pkt-fly-right{0%{left:18%;opacity:0}8%{opacity:1}to{left:calc(82% - var(--fly-w));opacity:1}}@keyframes pkt-fly-left{0%{left:calc(82% - var(--fly-w));opacity:0}8%{opacity:1}to{left:18%;opacity:1}}.seq-banner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:4px 16px;background:var(--accent-soft);border:1px solid var(--accent-a40);border-radius:999px;font-size:var(--fs-sm);font-weight:600;color:var(--accent-strong);white-space:nowrap;animation:pop-in var(--dur-med) var(--ease-out) both}.ctl-main{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-3)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.ctl-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4)}.ctl-group{display:flex;align-items:center;gap:var(--sp-2)}.ctl-label{font-size:var(--fs-sm);color:var(--text-secondary)}.seg{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--r-sm);overflow:hidden}.seg-item{min-height:34px;padding:0 var(--sp-3);font-size:var(--fs-sm);color:var(--text-secondary);border-right:1px solid var(--border);transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}.seg-item:last-child{border-right:none}.seg-item:hover{background:var(--surface-sunken);color:var(--text)}.seg-item.is-active{background:var(--accent-soft);color:var(--accent-strong);font-weight:600}.ctl-progress{margin-left:auto;font-size:var(--fs-sm);color:var(--text-secondary);white-space:nowrap}.exp-phase{font-size:var(--fs-xs);font-weight:600;letter-spacing:1px;color:var(--accent-strong);margin-bottom:var(--sp-2)}.exp-meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-3)}.exp-direction{font-size:var(--fs-sm);font-weight:600;padding:2px 10px;background:var(--surface-sunken);border-radius:999px}.exp-flags{display:flex;gap:4px;flex-wrap:wrap}.flag-chip{font-size:var(--fs-xs);font-weight:600;padding:1px 8px;border-radius:4px;background:var(--accent-soft);color:var(--accent-strong);border:1px solid var(--accent-a28)}.flag-chip-data{background:var(--host-soft);color:var(--host);border-color:var(--host-a72)}.exp-flags-empty{font-size:var(--fs-xs);color:var(--text-secondary)}.exp-text{font-size:var(--fs-md);line-height:1.8;margin-bottom:var(--sp-3)}.exp-dialogue{display:flex;gap:var(--sp-2);align-items:flex-start;padding:var(--sp-3);border-radius:var(--r-md);background:var(--bg);border:1px solid var(--border);border-left-width:3px;margin-bottom:var(--sp-3);transition:opacity var(--dur-med) var(--ease-out)}.exp-dialogue-a{border-left-color:var(--accent)}.exp-dialogue-b{border-left-color:var(--host)}.exp-dialogue-avatar{font-size:20px;line-height:1.3}.exp-dialogue-name{display:block;font-size:var(--fs-xs);color:var(--text-secondary);font-family:var(--font-mono);margin-bottom:2px}.exp-dialogue-text{font-size:var(--fs-md);line-height:1.7}.exp-tip{padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);background:var(--subnet-soft);border:1px solid var(--border);margin-bottom:var(--sp-3);transition:opacity var(--dur-med) var(--ease-out)}.exp-tip-label{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--subnet-strong);margin-bottom:2px}.exp-tip p{font-size:var(--fs-sm);line-height:1.7}.exp-note{padding-top:var(--sp-3);border-top:1px dashed var(--border-strong);font-size:var(--fs-xs);color:var(--text-secondary);line-height:1.7}.exp-panel--protocol .exp-dialogue,.exp-panel--protocol .exp-tip{opacity:.55}.exp-panel--protocol .exp-meta,.exp-panel--protocol .exp-direction{box-shadow:none}.exp-panel--protocol .flag-chip{box-shadow:0 0 0 1px var(--accent-a25)}.pkt-rows{display:flex;flex-direction:column;gap:var(--sp-2);margin:0}.pkt-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm)}.pkt-row dt{font-size:var(--fs-sm);color:var(--text-secondary)}.pkt-row dd{margin:0;font-family:var(--font-mono);font-size:var(--fs-md);font-weight:600;text-align:right;min-width:0}.pkt-row-hint{display:block;font-size:var(--fs-xs);font-weight:400;color:var(--text-secondary)}.pkt-row-flags{align-items:flex-start}.pkt-row-flags dt{padding-top:2px}.pkt-flags{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}.pkt-flag{font-size:var(--fs-xs);font-weight:600;padding:1px 8px;border-radius:4px;border:1px solid var(--border-strong);color:var(--text-secondary);background:var(--surface);transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}.pkt-flag.is-on{border-color:var(--accent-strong);background:var(--accent-soft);color:var(--accent-strong)}.pkt-empty{padding:var(--sp-5) var(--sp-3);text-align:center;color:var(--text-secondary);font-size:var(--fs-sm);background:var(--surface-sunken);border-radius:var(--r-md)}.pkt-empty span{display:block;font-size:26px;margin-bottom:var(--sp-2)}.pkt-empty small{display:block;margin-top:var(--sp-1);font-size:var(--fs-xs);color:var(--text-secondary)}.state-panel{margin-bottom:var(--sp-4)}.state-track{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6)}.state-chain-title{font-size:var(--fs-sm);font-weight:600;margin-bottom:var(--sp-2)}.state-chain-change{display:inline-block;font-size:var(--fs-xs);color:var(--subnet-strong);background:var(--subnet-soft);padding:1px 8px;border-radius:4px;margin-bottom:var(--sp-3)}.state-chain-change--idle{color:var(--text-secondary);background:var(--surface-sunken)}.state-change-arrow{color:var(--text-secondary)}.state-list{list-style:none;margin:0;padding:0}.state-node{position:relative;display:flex;align-items:center;gap:var(--sp-2);padding:0 0 var(--sp-3) var(--sp-3);margin-left:9px;border-left:2px solid var(--accent-a22);font-size:var(--fs-sm);transition:color var(--dur-fast) var(--ease-out)}.state-node:last-child{border-left-color:transparent;padding-bottom:0}.state-dot{position:absolute;left:-7px;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:var(--surface);border:2px solid var(--text-a32);transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}.state-node.is-past{color:var(--text-secondary)}.state-node.is-past .state-dot{border-color:var(--accent-a55)}.state-node.is-current{color:var(--accent-strong);font-weight:600}.state-node.is-current .state-dot{background:var(--accent-strong);border-color:var(--accent-strong);box-shadow:0 0 0 3px var(--accent-soft)}.state-node.is-future{color:var(--text-secondary);opacity:.55}.tl-panel{margin-bottom:var(--sp-4)}.tl-row{display:flex;flex-wrap:wrap;gap:var(--sp-2)}.tl-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 var(--sp-3);border-radius:999px;border:1px solid var(--border-strong);background:var(--surface);font-size:var(--fs-sm);white-space:nowrap;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}.tl-chip:hover{transform:translateY(-1px);box-shadow:var(--shadow-1)}.tl-icon{font-size:var(--fs-sm)}.tl-chip.is-past{border-color:var(--accent-a40);background:var(--accent-soft);color:var(--accent-strong)}.tl-chip.is-current{border-color:var(--accent-strong);background:var(--accent-strong);color:#fff;font-weight:600;box-shadow:var(--shadow-2)}.tl-chip.is-future{color:var(--text-secondary)}.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-bottom:var(--sp-4)}.why-title{font-size:var(--fs-md);font-weight:600;margin-bottom:var(--sp-2)}.why-text{font-size:var(--fs-sm);line-height:1.85;margin-bottom:var(--sp-2)}.why-note{font-size:var(--fs-sm);line-height:1.85;padding:var(--sp-3);background:var(--surface-sunken);border-radius:var(--r-md)}.why-note-label{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--accent-strong);margin-bottom:2px}.why-mini{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-2);padding:var(--sp-3);background:var(--bg);border-radius:var(--r-sm)}.why-mini-group{display:flex;flex-direction:column;gap:3px}.why-mini-caption{font-size:var(--fs-xs);font-weight:600;color:var(--text-secondary);margin-bottom:2px}.why-lane{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-secondary);white-space:pre;overflow:hidden}.tcp-root[data-mode=protocol] .exp-dialogue,.tcp-root[data-mode=protocol] .exp-tip{opacity:.55}.tcp-root[data-mode=protocol] .pkt-panel{box-shadow:0 0 0 1.5px var(--accent-a25),var(--shadow-1)}@media (max-width: 900px){.tcp-layout{grid-template-columns:1fr}.state-track{grid-template-columns:1fr;gap:var(--sp-4)}.why-grid{grid-template-columns:1fr}.seq-node{width:136px}.seq-pkt-label{max-width:64%;overflow:hidden}.seq-pkt-label i{display:none}.seq-pkt-fly{width:128px;--fly-w: 128px}.ctl-progress{margin-left:0;width:100%}}:root{--bg: #f4f6f5;--surface: #ffffff;--surface-sunken: #eef1f0;--text: #16211e;--text-secondary: #5c6b66;--border: rgba(22, 33, 30, .1);--border-strong: rgba(22, 33, 30, .22);--accent: #0d9488;--accent-strong: #0f766e;--accent-soft: rgba(13, 148, 136, .1);--net: #0f766e;--net-soft: rgba(15, 118, 110, .13);--subnet: #b45309;--subnet-soft: rgba(180, 83, 9, .15);--subnet-strong: #92400e;--host: #6d5ba6;--host-soft: rgba(109, 91, 166, .15);--danger: #b3261e;--danger-soft: rgba(179, 38, 30, .08);--danger-border: rgba(179, 38, 30, .35);--accent-a22: rgba(13, 148, 136, .22);--accent-a25: rgba(13, 148, 136, .25);--accent-a28: rgba(13, 148, 136, .28);--accent-a40: rgba(13, 148, 136, .4);--accent-a55: rgba(13, 148, 136, .55);--host-a72: rgba(109, 91, 166, .72);--text-a14: rgba(22, 33, 30, .14);--text-a18: rgba(22, 33, 30, .18);--text-a32: rgba(22, 33, 30, .32);--font-sans: "IBM Plex Sans", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;--fs-xs: 11.5px;--fs-sm: 12.5px;--fs-md: 14px;--fs-lg: 16px;--fs-xl: 21px;--fs-2xl: 27px;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 20px;--sp-6: 24px;--sp-7: 32px;--r-sm: 8px;--r-md: 10px;--r-lg: 14px;--shadow-1: 0 1px 2px rgba(22, 33, 30, .05), 0 1px 3px rgba(22, 33, 30, .07);--shadow-2: 0 2px 4px rgba(22, 33, 30, .05), 0 6px 16px rgba(22, 33, 30, .08);--shadow-3: 0 4px 8px rgba(22, 33, 30, .06), 0 14px 34px rgba(22, 33, 30, .12);--ease-out: cubic-bezier(.22, 1, .36, 1);--dur-fast: .16s;--dur-med: .3s;--dur-slow: .46s;--sidebar-width: 240px;--sidebar-collapsed-width: 68px;--topbar-height: 54px;--bit-size: 19px}*,*:before,*:after{box-sizing:border-box}*{margin:0}html{-webkit-text-size-adjust:100%}body{font-family:var(--font-sans);font-size:var(--fs-md);line-height:1.6;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}body:before{content:"01111010 00100100 01110011 00101011 00101011 10011011 11111110 00111110 10111100 00001011 11111100 11011010 00010111 01111101 11011111 01001111 01110101 00100011 11010101 10111110 01011001 00110011 10001111 00011101 00101110 00110000 10000110 11011110 01111011 01011011 10011110 11001110 00001100 00101011 00010111 00010001 01011000 10101111 11001000 01010001 00101111 00100011 01010010 01000110 11001111 10100101 11010111 00101111 10010111 10000111 10110010 00100101 00101010 11101101 10110000 01111110 10101110 00111011 10111010 10111010";position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;-webkit-user-select:none;user-select:none;font-family:var(--font-mono);font-size:13px;line-height:2.2;letter-spacing:2px;word-break:break-all;white-space:pre-wrap;color:var(--text);opacity:.035;padding:var(--sp-5);mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.25) 55%,transparent 90%);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.25) 55%,transparent 90%)}#root{position:relative;z-index:1;min-height:100vh}h1,h2,h3{font-weight:600;line-height:1.3}.mono{font-family:var(--font-mono)}.strong{font-weight:600}::selection{background:var(--accent-soft);color:var(--accent-strong)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:var(--sp-5);transition:box-shadow var(--dur-med) var(--ease-out),transform var(--dur-med) var(--ease-out)}.panel-title{font-size:var(--fs-lg);font-weight:600;letter-spacing:.2px}.panel-title-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-4)}.panel-caption{font-size:var(--fs-sm);color:var(--text-secondary)}button{font:inherit;color:inherit;cursor:pointer;background:none;border:none;padding:0}.btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 var(--sp-4);border-radius:var(--r-sm);font-size:var(--fs-md);font-weight:500;border:1px solid var(--border);background:var(--surface);transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}.btn:hover{background:var(--surface-sunken);border-color:var(--border-strong)}.btn:active{transform:translateY(1px)}.btn-ghost{color:var(--text-secondary)}.btn-ghost:hover{color:var(--text)}.btn-primary{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff}.btn-primary:hover{background:var(--accent);border-color:var(--accent)}input{font:inherit;color:inherit}.text-input{height:40px;padding:0 var(--sp-3);border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--surface);font-size:var(--fs-md);min-width:0;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}.text-input:hover{border-color:var(--text-a32)}.text-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.text-input.is-invalid{border-color:var(--danger-border);background:var(--danger-soft)}.text-input.is-invalid:focus{box-shadow:0 0 0 3px var(--danger-soft)}.text-input[type=number]{-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield}.range-input{-webkit-appearance:none;appearance:none;width:100%;height:36px;background:transparent;cursor:pointer}.range-input::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(to right,var(--accent-strong) 0%,var(--accent-strong) var(--fill, 50%),var(--text-a14) var(--fill, 50%),var(--text-a14) 100%)}.range-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-6px;border-radius:50%;background:var(--surface);border:2px solid var(--accent-strong);box-shadow:var(--shadow-1);transition:transform var(--dur-fast) var(--ease-out)}.range-input::-webkit-slider-thumb:hover{transform:scale(1.12)}.range-input::-moz-range-track{height:6px;border-radius:3px;background:var(--text-a14)}.range-input::-moz-range-progress{height:6px;border-radius:3px;background:var(--accent-strong)}.range-input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--surface);border:2px solid var(--accent-strong);box-shadow:var(--shadow-1)}.table-scroll::-webkit-scrollbar,.tree-scroll::-webkit-scrollbar{height:10px;width:10px}.table-scroll::-webkit-scrollbar-thumb,.tree-scroll::-webkit-scrollbar-thumb{background:var(--text-a18);border-radius:5px;border:2px solid var(--surface)}.notice{border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);line-height:1.7}.notice-info{background:var(--accent-soft);border:1px solid var(--accent-a28);color:var(--accent-strong)}@keyframes rise-in{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes bit-borrow{0%{transform:translateY(0)}40%{transform:translateY(-5px)}to{transform:translateY(0)}}@keyframes pop-in{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}