*{box-sizing:border-box}body{margin:0;color:#172026;background:#eef2f0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input{font:inherit}button{cursor:pointer}.page{width:min(1440px,calc(100vw - 32px));margin:0 auto;padding:28px 0}.graphPage{display:grid;gap:16px}.topbar,.workspace,.timeline,.summary>div{border:1px solid #cfd8d3;background:#fbfcfb}.modeBar{display:inline-grid;grid-template-columns:repeat(3,auto);justify-self:start;gap:2px;border:1px solid #cfd8d3;border-radius:8px;padding:3px;background:#fbfcfb}.modeButton{height:30px;border:0;border-radius:5px;padding:0 10px;background:transparent;color:#42514a;font-size:12px;font-weight:800}.modeButton.active{background:#e7f3f2;color:#172026}.topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;border-radius:8px;padding:20px}.eyebrow{margin:0 0 8px;color:#5f6f67;font-size:12px;font-weight:800;letter-spacing:0;text-transform:uppercase}h1,h2,p{margin:0;letter-spacing:0}h1{font-size:clamp(30px,4vw,52px);line-height:1}h2{font-size:18px}.dek{max-width:760px;margin-top:10px;color:#53625b;line-height:1.45}.seedControls,.timelineTop,.graphHeader{display:flex;align-items:center;gap:10px}.seedControls{flex-wrap:wrap;justify-content:flex-end}.seedControls label{display:grid;gap:6px;color:#5f6f67;font-size:12px;font-weight:800;text-transform:uppercase}.seedControls input{width:160px;height:40px;border:1px solid #b8c5bf;border-radius:6px;padding:0 10px;background:#fff;color:#172026}.seedControls button{align-self:end;height:40px;border:1px solid #172026;border-radius:6px;padding:0 14px;background:#172026;color:#fff}.workspace{overflow:hidden;border-radius:8px}.graphHeader{justify-content:space-between;gap:16px;min-height:68px;padding:14px 16px;border-bottom:1px solid #dce4e0}.graphHeader p{margin-top:4px;color:#5f6f67;font-size:13px}.eventPill{border:1px solid #ccd8d2;border-radius:999px;padding:6px 10px;background:#f5f7f6;color:#42514a;font-size:12px;font-weight:800}.graphStage{position:relative;width:100%;height:min(62vh,620px);min-height:460px;overflow:hidden;background:#fff}.adapterFallback{position:absolute;inset:16px;display:grid;place-content:center;gap:8px;border:1px dashed #b9c5bf;border-radius:8px;background:#f8faf9;color:#53625b;text-align:center}.adapterFallback strong{color:#172026}.thingStage{background:#fdfefe}.thingSvg{position:relative;width:100%;height:100%;min-width:0;min-height:0}.thingSvg svg{display:block;width:100%;height:100%;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.thingSvg svg:active{cursor:grabbing}.zoomBadge{position:absolute;right:12px;bottom:12px;border:1px solid #ccd8d2;border-radius:999px;padding:5px 9px;background:#ffffffe6;color:#42514a;font-size:12px;font-weight:800}.timeline{overflow:hidden;border-radius:8px;padding:16px}.timelineTop{justify-content:flex-end;margin-bottom:8px}.eventText{animation:slideIn .36s ease;margin-top:4px;color:#53625b}.eventPill{white-space:nowrap;text-transform:uppercase}.eventPill.addNode,.tick.addNode{border-color:#7fb685;background:#e9f7ea}.eventPill.addEdge,.tick.addEdge{border-color:#76a9d8;background:#e7f1fb}.eventPill.removeNode,.tick.removeNode{border-color:#e2a36b;background:#fff1e5}.eventPill.removeEdge,.tick.removeEdge{border-color:#d88383;background:#fdeaea}.eventPill.transfer,.tick.transfer{border-color:#76a9d8;background:#e7f1fb}.range{width:100%;accent-color:#1f6f78}.rangeLabels{display:none}.stepButtons{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.stepButtons button{display:inline-grid;place-items:center;width:36px;height:36px;border:1px solid #172026;border-radius:6px;padding:0;background:#172026;color:#fff}.stepButtons button:disabled{border-color:#cfd8d3;background:#eef2f0;color:#7a8780;cursor:default}.summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.summary>div{display:grid;gap:6px;border-radius:8px;padding:14px}.summary span{color:#5f6f67;font-size:12px;font-weight:800;text-transform:uppercase}.summary strong{font-size:20px}@keyframes slideIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:900px){.page{width:min(100vw - 20px,1440px);padding:16px 0}.topbar,.graphHeader,.timelineTop{align-items:stretch;flex-direction:column}.seedControls,.stepButtons{justify-content:flex-start}.seedControls{align-items:stretch;flex-direction:column}.seedControls input,.seedControls button{width:100%}.summary{grid-template-columns:1fr}.graphStage{height:58vh;min-height:380px}.stepButtons{justify-content:stretch}.stepButtons button{flex:1}}
