:root{--bg:#090c13;--bg2:#0f1420;--surface:#151b2a;--surface2:#1b2234;--border:#29344f;--text:#eef4ff;--mid:#96a2c2;--dim:#64708f;--ton:#0098df;--accent:#1fd4ff;--green:#00c896;--amber:#f5a623;--red:#ff5c72;--mono:'Space Grotesk',ui-monospace,monospace;--sans:Inter,system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(900px 600px at 70% -10%,rgba(0,136,204,.2),transparent 70%),var(--bg);color:var(--text);font-family:var(--sans);line-height:1.5}a{color:var(--accent)}button,input{font:inherit}.wrap{width:min(1480px,calc(100% - 40px));margin:auto}.topbar{display:flex;justify-content:space-between;align-items:center;padding:22px 0}.brand{font-family:var(--mono);font-weight:800;letter-spacing:.13em}.brand span{color:var(--accent)}.top-links{display:flex;gap:18px;font-family:var(--mono);font-size:.8rem}.top-links a{text-decoration:none;color:var(--mid)}
.hero{padding:64px 0 40px}.eyebrow{font-family:var(--mono);font-size:.74rem;color:var(--ton);letter-spacing:.2em;text-transform:uppercase}.hero h1{font-size:clamp(2.4rem,6vw,5.5rem);line-height:1.02;letter-spacing:-.045em;max-width:1050px;margin:14px 0 24px}.hero p{font-size:clamp(1rem,1.7vw,1.35rem);color:var(--mid);max-width:820px}.proof-pill{display:inline-flex;gap:9px;align-items:center;margin-top:20px;padding:8px 12px;border-radius:99px;background:rgba(0,200,150,.08);border:1px solid rgba(0,200,150,.3);font-family:var(--mono);font-size:.76rem;color:#bfffee}.proof-pill::before{content:'';width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 12px var(--green)}
.section{padding:52px 0}.section-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:22px}.section-head h2{font-size:clamp(1.7rem,3vw,2.6rem);margin:6px 0}.section-head p{color:var(--mid);max-width:650px;margin:0}.guide{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:28px;align-items:start}.media{position:relative;height:min(68vh,720px);min-height:470px;padding:10px;background:#140b18;border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 26px 90px rgba(0,0,0,.55);cursor:zoom-in;display:flex;align-items:center;justify-content:center}.media-canvas{position:relative;flex:none}.media-canvas>img{width:100%;height:100%;object-fit:fill;display:block}.guide-mark{--mark:31,212,255;position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);border:2px solid rgb(var(--mark));border-radius:6px;background:rgba(var(--mark),.075);box-shadow:0 0 0 1px rgba(3,6,12,.55),inset 0 0 24px rgba(var(--mark),.045);pointer-events:none}.guide-mark::before{content:attr(data-label);position:absolute;left:-2px;top:-2px;transform:translateY(-100%);max-width:320px;padding:4px 7px;border:1px solid rgb(var(--mark));border-radius:4px 4px 4px 0;background:rgba(5,9,16,.95);color:#effaff;font:650 clamp(.52rem,.65vw,.68rem)/1.25 var(--mono);white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.65)}.guide-mark.label-in::before{top:4px;left:4px;transform:none}.guide-mark.label-right::before{left:auto;right:-2px}.guide-mark.green{--mark:0,200,150}.guide-mark.amber{--mark:245,166,35}.guide-mark.pink{--mark:255,92,114}.guide-mark.violet{--mark:157,112,255}.guide-mark.arrow-right::after{content:'';position:absolute;left:100%;top:50%;width:18px;height:2px;background:rgb(var(--mark));box-shadow:8px -3px 0 -2px rgb(var(--mark)),8px 3px 0 -2px rgb(var(--mark))}.guide-copy{background:linear-gradient(145deg,var(--surface),var(--bg2));border:1px solid var(--border);border-radius:14px;padding:24px;min-height:470px}.stage-no{font:600 .74rem var(--mono);color:var(--ton);letter-spacing:.14em;text-transform:uppercase}.guide-copy h3{font-size:1.45rem;line-height:1.25;margin:12px 0}.guide-copy p{color:var(--mid)}.time-gap{margin:20px 0;padding:13px;border:1px solid rgba(245,166,35,.35);background:rgba(245,166,35,.07);border-radius:9px;color:var(--amber);font:600 .8rem var(--mono)}.source-link{display:inline-flex;margin-top:10px;text-decoration:none;font:600 .78rem var(--mono)}.stage-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:16px}.stage-tab{text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:9px;color:var(--mid);padding:11px;cursor:pointer;transition:.2s}.stage-tab:hover,.stage-tab.on{border-color:var(--ton);background:rgba(0,136,204,.12);color:var(--text)}.stage-tab b{display:block;color:var(--accent);font:.7rem var(--mono);margin-bottom:4px}.stage-tab span{font-size:.78rem}
.legend-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.legend-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px}.legend-card b{display:block;margin-bottom:6px}.legend-card p{color:var(--mid);font-size:.88rem;margin:0}.opcode-table{width:100%;border-collapse:collapse;background:var(--surface);border-radius:12px;overflow:hidden}.opcode-table th,.opcode-table td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--border);font-size:.87rem}.opcode-table th{font:600 .7rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}.opcode{font:600 .78rem var(--mono);color:var(--accent)}
.analyzer{background:linear-gradient(150deg,var(--surface),#101522);border:1px solid var(--border);border-radius:16px;padding:clamp(18px,3vw,34px);box-shadow:0 30px 100px rgba(0,0,0,.35)}.analyzer-form{display:grid;grid-template-columns:auto minmax(220px,1fr) auto;gap:10px}.network{display:flex;padding:4px;background:var(--bg);border:1px solid var(--border);border-radius:9px}.network button{border:0;background:transparent;color:var(--mid);padding:9px 12px;border-radius:6px;cursor:pointer;font:600 .72rem var(--mono)}.network button.on{background:var(--ton);color:#fff}.analyzer input{width:100%;border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:9px;padding:11px 13px;font:.82rem var(--mono);outline:none}.analyzer input:focus{border-color:var(--ton);box-shadow:0 0 0 3px rgba(0,136,204,.13)}.primary{border:1px solid var(--ton);background:var(--ton);color:#fff;border-radius:9px;padding:10px 18px;cursor:pointer;font:700 .75rem var(--mono)}.primary:disabled{opacity:.45}.status{min-height:26px;margin-top:12px;color:var(--mid);font-size:.85rem}.status.error{color:var(--red)}.status.ok{color:var(--green)}.analysis-output{margin-top:22px}.analysis-summary{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}.summary-chip{border:1px solid var(--border);background:var(--bg);border-radius:99px;padding:6px 10px;color:var(--mid);font:.72rem var(--mono)}
.timeline{position:relative;margin-left:9px;padding-left:26px;border-left:2px solid var(--border)}.timeline-item{position:relative;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:15px 16px;margin-bottom:12px}.timeline-item::before{content:'';position:absolute;left:-34px;top:19px;width:14px;height:14px;background:var(--ton);border:3px solid var(--surface);border-radius:50%}.timeline-item.success::before{background:var(--green)}.timeline-title{display:flex;justify-content:space-between;gap:18px;align-items:center}.timeline-title b{font-size:.96rem}.timeline-time{color:var(--dim);font:.7rem var(--mono)}.timeline-meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:7px;color:var(--mid);font:.74rem var(--mono)}.timeline-item a{text-decoration:none}
.trace{display:flex;flex-direction:column;gap:9px}.trace-node{position:relative;border:1px solid var(--border);background:var(--bg);border-radius:10px;padding:13px 14px;margin-left:calc(var(--depth) * 28px)}.trace-node::before{content:'';position:absolute;left:-19px;top:-10px;bottom:50%;width:13px;border-left:1px solid var(--ton);border-bottom:1px solid var(--ton);border-radius:0 0 0 6px}.trace-node[data-depth="0"]::before{display:none}.trace-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.role{padding:3px 7px;border-radius:5px;background:rgba(0,136,204,.14);color:var(--accent);font:600 .67rem var(--mono)}.op-badge{padding:3px 7px;border-radius:5px;background:rgba(0,200,150,.1);color:var(--green);font:600 .67rem var(--mono)}.op-badge.unknown{color:var(--amber);background:rgba(245,166,35,.1)}.addr{font:.72rem var(--mono);color:var(--mid)}.trace-meta{display:flex;gap:13px;flex-wrap:wrap;margin-top:8px;color:var(--dim);font:.7rem var(--mono)}.decoded{margin-top:8px;color:var(--mid);font-size:.8rem}.empty{padding:30px;text-align:center;border:1px dashed var(--border);border-radius:10px;color:var(--mid)}.fineprint{margin-top:18px;color:var(--dim);font-size:.76rem}
.zoom{position:fixed;inset:0;z-index:100;background:rgba(1,3,8,.96);display:none;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}.zoom.open{display:flex}.zoom .media-canvas{max-width:97vw;max-height:95vh}.zoom button{position:absolute;z-index:20;right:18px;top:15px;width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:#fff;font-size:1.2rem;cursor:pointer}.footer{border-top:1px solid var(--border);padding:32px 0 50px;color:var(--dim);font-size:.8rem}
@media(max-width:900px){.guide{grid-template-columns:minmax(0,1fr)}.guide>*{min-width:0}.guide-copy{min-height:0}.media{height:52vh;min-height:360px;width:100%}.stage-tabs{grid-template-columns:1fr 1fr}.stage-tab{min-width:0}.legend-grid{grid-template-columns:1fr}.analyzer-form{grid-template-columns:1fr}.network{justify-content:center}.section-head{display:block}.top-links{display:none}.opcode-table{display:block;overflow-x:auto}}
@media(max-width:520px){.wrap{width:min(100% - 24px,1480px)}.hero{padding-top:38px}.hero h1{font-size:2.55rem}.media{height:380px;min-height:0}.guide-mark::before{font-size:.48rem;max-width:180px;white-space:normal}.stage-tabs{grid-template-columns:1fr}.timeline-title{align-items:flex-start;flex-direction:column;gap:4px}.trace-node{margin-left:calc(var(--depth) * 12px)}.opcode-table th,.opcode-table td{padding:10px 11px}}