:root{color:#dbe6f6;--bg:#07111f;--panel:#091221db;--border:#9ab4de2e;--border-strong:#9ac4ff57;--text:#dbe6f6;--muted:#8a9bb8;--accent:#64c8ff;--accent-2:#7f92ff;--success:#43d8b5;--warning:#ffc669;--danger:#ff7a95;--mono:"IBM Plex Mono", "Consolas", monospace;--shadow:0 0 0 1px #64c8ff1f, 0 24px 64px #03081275;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#07111f;font-family:IBM Plex Sans,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 15% 12%,#64c8ff1f,#0000 24%),radial-gradient(circle at 84% 20%,#7f92ff1f,#0000 24%),linear-gradient(#040b14 0%,#091120 54%,#07101b 100%);min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer}#app{min-height:100vh}.shell{width:min(1380px,100% - 32px);margin:0 auto;padding:28px 0 40px}.hero{grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);align-items:end;gap:30px;margin-bottom:20px;display:grid}.eyebrow,.section-kicker{color:var(--accent);letter-spacing:.2em;text-transform:uppercase;margin:0 0 10px;font-size:.78rem;font-weight:700}h1,h2,h3,p{margin:0}h1{letter-spacing:-.06em;max-width:820px;font-size:clamp(3rem,7vw,6.2rem);line-height:.9}.hero-copy{max-width:420px;color:var(--muted);font-size:clamp(1rem,2vw,1.14rem);line-height:1.5}.layout{grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:18px;display:grid}.panel{border:1px solid var(--border);background:linear-gradient(180deg, #ffffff08, transparent 18%), var(--panel);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);border-radius:28px;padding:24px}.panel-head{grid-template-columns:minmax(0,1fr) minmax(220px,.8fr);align-items:end;gap:20px;margin-bottom:18px;display:grid}.panel-head h2,.fabric-head h3{font-family:var(--mono);letter-spacing:-.03em;font-weight:600}.panel-head h2{font-size:clamp(1.6rem,2.8vw,2.7rem)}.panel-copy,.range-copy{color:var(--muted);font-size:.96rem;line-height:1.45}.sim-controls{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:16px;display:grid}.field{gap:8px;display:grid}.field span{color:var(--muted);letter-spacing:.05em;text-transform:uppercase;font-size:.82rem;font-weight:600}.field input{border:1px solid var(--border);min-height:52px;color:var(--text);background:#ffffff08;border-radius:16px;padding:0 14px}.field input[readonly]{color:var(--accent)}.range-wrap{border:1px solid var(--border);background:#ffffff08;border-radius:16px;grid-template-columns:1fr auto;align-items:center;gap:12px;min-height:52px;padding:0 14px;display:grid}input[type=range]{appearance:none;background:0 0;width:100%;height:18px;margin:0}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,#64c8ff57,#7f92ff80);border-radius:999px;height:6px}input[type=range]::-moz-range-track{background:linear-gradient(90deg,#64c8ff57,#7f92ff80);border-radius:999px;height:6px}input[type=range]::-webkit-slider-thumb{appearance:none;background:linear-gradient(#ddf6ff,#64c8ff);border:0;border-radius:50%;width:18px;height:18px;margin-top:-6px;box-shadow:0 0 0 3px #64c8ff2e}input[type=range]::-moz-range-thumb{background:linear-gradient(#ddf6ff,#64c8ff);border:0;border-radius:50%;width:18px;height:18px;box-shadow:0 0 0 3px #64c8ff2e}#prefix-pill{font-family:var(--mono)}.focus-strip{flex-wrap:wrap;gap:10px;margin-top:18px;display:flex}.focus-chip{border:1px solid var(--border);min-height:42px;color:var(--muted);background:#ffffff08;border-radius:999px;padding:0 14px}.focus-chip.active,.focus-chip:hover{border-color:var(--border-strong);color:var(--text);background:#64c8ff14}.fabric-stage{border:1px solid var(--border);background:#ffffff05;border-radius:22px;margin-top:20px;padding:18px}.fabric-head{grid-template-columns:minmax(0,1fr) minmax(240px,.8fr);align-items:end;gap:18px;margin-bottom:16px;display:grid}.fabric{border:1px solid var(--border);background:linear-gradient(#ffffff0a,#0000 24%),linear-gradient(90deg,#64c8ff0f 1px,#0000 1px) 0 0/32px 100%,linear-gradient(#ffffff08 1px,#0000 1px) 0 0/100% 54px,linear-gradient(#12213ae6,#0b1525f5);border-radius:18px;padding:60px 14px 48px;position:relative}.fabric-lane{gap:6px;min-height:148px;display:flex}.lane-segment{background:#ffffff08;border-radius:10px;position:relative}.lane-segment.active{background:linear-gradient(#64c8ff1f,#64c8ff08);box-shadow:inset 0 0 0 1px #64c8ff2e}.lane-segment span{color:#dbe6f6b3;font-family:var(--mono);align-items:center;gap:8px;font-size:.74rem;display:flex;position:absolute;bottom:10px;left:8px;right:8px}.lane-segment i{background:#dbe6f629;flex:1;height:1px}.fabric-markers{position:absolute;inset:0 14px 48px}.marker{width:0;position:absolute;top:12px;bottom:0;transform:translate(-50%)}.marker:before{content:"";background:currentColor;width:1px;position:absolute;top:34px;bottom:0;left:50%;transform:translate(-50%)}.marker span{letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;background:#091221f0;border:1px solid #ffffff1f;border-radius:999px;align-items:center;min-height:30px;padding:0 10px;font-size:.72rem;font-weight:600;display:inline-flex;transform:translate(-50%)}.marker-network{color:var(--accent-2)}.marker-host{color:var(--warning)}.marker-broadcast{color:var(--danger)}.bit-row{grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;margin-top:18px;display:grid}.bit-cell{border:1px solid var(--border);text-align:center;background:#ffffff05;border-radius:14px;padding:12px 10px}.bit-cell.locked{box-shadow:inset 0 0 0 1px #64c8ff24}.bit-cell.open{box-shadow:inset 0 0 0 1px #43d8b51f}.bit-cell span{color:var(--muted);font-family:var(--mono);font-size:.72rem;display:block}.bit-cell strong{font-family:var(--mono);margin-top:8px;font-size:1rem;display:block}.sim-results{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px;display:grid}.result-card,.reference-item{border:1px solid var(--border);background:#ffffff05;border-radius:16px;padding:14px 16px}.result-card span,.reference-item span{color:var(--muted);letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px;font-size:.8rem;font-weight:600;display:block}.result-card strong,.reference-item strong{font-family:var(--mono);font-size:.94rem;font-weight:600;line-height:1.35;display:block}.drill-card{gap:18px;display:grid}.drill-prompt{border:1px solid var(--border);background:#ffffff05;border-radius:18px;padding:18px}.drill-prompt span{color:var(--muted);letter-spacing:.05em;text-transform:uppercase;margin-bottom:10px;font-size:.82rem;font-weight:600;display:block}.drill-prompt strong{font-family:var(--mono);font-size:1.28rem}.drill-inputs{display:grid}.drill-actions{gap:12px;display:flex}.drill-actions button{border:1px solid var(--border-strong);min-height:48px;color:var(--text);background:#64c8ff1f;border-radius:14px;padding:0 16px}.drill-actions .ghost{border-color:var(--border);background:#ffffff08}.drill-feedback{border:1px solid var(--border);min-height:52px;color:var(--muted);background:#ffffff05;border-radius:16px;padding:14px 16px;line-height:1.45}.drill-feedback.ok{color:#a6f0da;border-color:#43d8b54d}.drill-feedback.bad{color:#ffc2cf;border-color:#ff7a954d}.drill-reference{gap:12px;display:grid}@media (width<=1180px){.hero,.layout,.panel-head,.sim-controls,.fabric-head,.sim-results{grid-template-columns:1fr}.sim-results{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=760px){.shell{width:min(100% - 20px,1380px);padding-top:18px}h1{font-size:clamp(2.5rem,12vw,4.2rem)}.panel,.fabric-stage{padding:18px}.sim-results,.bit-row{grid-template-columns:1fr}.drill-actions{flex-direction:column}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}