*,:before,:after{box-sizing:border-box}html,body{background:linear-gradient(#f1f5f9 0%,#e2e8f0 100%);min-height:100vh;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;font-family:Hiragino Sans,Yu Gothic,system-ui,-apple-system,sans-serif}#root{min-height:100vh}.app{color:#1f2937;zoom:.67;max-width:1100px;margin:0 auto;padding:14px 24px;font-family:Inter,Hiragino Sans,Yu Gothic,system-ui,sans-serif}.pattern-tabs{justify-content:center;gap:8px;margin-bottom:14px;display:flex}.pattern-tabs button{color:#475569;min-width:112px;font:inherit;cursor:pointer;background:#ffffffc2;border:1px solid #d1d5db;border-radius:999px;padding:10px 18px;font-size:13px;font-weight:700;transition:background .2s,color .2s,border-color .2s}.pattern-tabs button.active{color:#fff;background:#210024;border-color:#210024}.pattern-panel{opacity:0;visibility:hidden;pointer-events:none;grid-area:view;transition:opacity .12s}.pattern-panel.active{opacity:1;visibility:visible;pointer-events:auto}.app{grid-template-areas:"tabs""view";display:grid}.pattern-tabs{grid-area:tabs}.app-header{text-align:center;margin-bottom:10px}.app-header h1{letter-spacing:.02em;margin:0 0 4px;font-size:23px;font-weight:700}.app-header p{color:#6b7280;margin:0;font-size:13px}.graph-container{background:#fff;border:1px solid #e5e7eb;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;padding:12px 16px 10px;display:flex;box-shadow:0 6px 20px #0f172a0d}.supply-diagram{background:#fff;border-radius:12px;width:100%;max-width:1000px;height:auto}.supply-column{letter-spacing:.12em;-webkit-user-select:none;user-select:none;font-size:16px;font-weight:700}.supply-edge{opacity:1;transition:opacity .25s}.supply-edge.dimmed,.supply-node.dimmed{opacity:.24}.supply-path{fill:none;stroke:#cbd5e1;stroke-width:1.4px;stroke-linecap:round;transition:stroke .2s,stroke-width .2s}.supply-path.active{stroke:#475569;stroke-width:2.2px;stroke-dasharray:6 5;animation:.9s linear infinite flow}.supply-edge-label{fill:#94a3b8;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:10px}.supply-edge-label.active{fill:#1f2937}.supply-node{cursor:pointer;transition:opacity .25s}.supply-node circle{transition:stroke-width .2s}.supply-icon-html{pointer-events:none;-webkit-user-select:none;user-select:none;place-items:center;width:36px;height:36px;font-size:26px;line-height:1;display:grid}.supply-label{fill:#1f2937;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:13px;font-weight:700}.supply-sublabel{fill:#9ca3af;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:11px}.legend{background:#fff;border:1px solid #e5e7eb;border-radius:12px;flex-wrap:wrap;justify-content:center;gap:16px 28px;margin-top:20px;padding:14px 20px;display:flex}.legend span{color:#374151;align-items:center;gap:8px;font-size:13px;display:inline-flex}.legend i{border-radius:50%;width:12px;height:12px;display:inline-block}.org-pattern{background:radial-gradient(circle at 63% 22%,#fff5d4b8,#0000 28%),radial-gradient(circle at 28% 24%,#f1dcff9e,#0000 22%),linear-gradient(#fffdf9 0%,#fffaf2 100%);border:1px solid #e9d5ff8f;border-radius:18px;padding:16px;position:relative;overflow:hidden;box-shadow:0 18px 50px #52266514}.org-diagram{width:100%;height:auto;display:block}.org-title{fill:#241328;letter-spacing:0;font-size:26px;font-weight:700}.org-subtitle{fill:#4b344f;font-size:15px}.solid-line,.dot-line{fill:none;stroke:#7b7474;stroke-width:2px;stroke-linecap:round;transition:opacity .2s,stroke-width .2s}.line-dot{fill:#77706f;opacity:0}.line-dot.active{animation:.36s forwards dotFadeIn}.line-dot.exiting{animation:.36s forwards dotFadeOut}@keyframes dotFadeIn{0%{opacity:0}to{opacity:1}}@keyframes dotFadeOut{0%{opacity:1}to{opacity:0}}.solid-line{stroke-dasharray:3 12}.dot-line{stroke-dasharray:1 12}.solid-line.active,.dot-line.active{opacity:1;stroke-width:3px;animation:.9s linear infinite flow}.svg-icon{color:#6720b6;place-items:center;width:48px;height:48px;font-size:34px;display:grid}.claude-image{object-fit:contain;width:48px;height:48px;display:block}.node-label,.card-title{fill:#2c1530;font-weight:700}.node-label{font-size:13px}.card-title{font-size:16px}.card-summary{fill:#5f4a63;font-size:10px;font-weight:600}.svg-card{filter:drop-shadow(0 16px 28px #5c344a14);transition:filter .2s,opacity .2s}.svg-card.active,.svg-node.active{filter:drop-shadow(0 0 10px #44275347)}.svg-node{fill:#fff;stroke-width:3px;transition:filter .2s,stroke-width .2s}.svg-node.you{stroke:#b96bff}.svg-node.pancake{stroke:#e17855}.svg-node.active{stroke-width:4px}.svg-hit{fill:#0000;cursor:pointer}.svg-card,.svg-node,.role-row{cursor:pointer}.role-row{fill:#ffffffbd}.status-dot{fill:#178a66}.status-dot.alert{fill:#d90c3b}.role-text{fill:#46324a;font-size:9px;font-weight:600}@media (width<=800px){.app{padding:16px}.org-pattern{padding:8px}}@keyframes flow{0%{stroke-dashoffset:10px}to{stroke-dashoffset:0}}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{filter:drop-shadow(0 0 #1f293700)}50%{filter:drop-shadow(0 0 6px #1f293759)}}.app-header,.graph-container,.legend{animation:.5s both fadeIn}.app-header{animation-delay:0s}.graph-container{animation-delay:.1s}.legend{animation-delay:.2s}.node:hover circle{animation:1.6s ease-in-out infinite pulse}