.visual-library-hero{position:relative;overflow:hidden}.visual-library-hero:after{content:"";position:absolute;right:8%;top:18%;width:15rem;height:15rem;border:1px solid rgba(114,225,232,.24);border-radius:50%;box-shadow:0 0 0 2.8rem rgba(114,225,232,.04),0 0 0 5.6rem rgba(114,225,232,.025);pointer-events:none}.visual-library-hero>div,.visual-library-hero>a{position:relative;z-index:1}.visual-library-hero h1{max-width:13ch}
.concept-explorer{overflow:hidden;border:1px solid #c9dbe3;border-radius:1.5rem;background:#fff;box-shadow:0 24px 70px rgba(16,42,67,.1)}.concept-explorer>header{display:flex;gap:1.5rem;justify-content:space-between;padding:1.5rem;background:#f7fbfc;border-bottom:1px solid #d9e6eb}.concept-explorer>header p{display:flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:850;letter-spacing:.13em;color:#087f91}.concept-explorer>header p svg{width:.95rem}.concept-explorer>header h2{margin-top:.5rem;font-size:clamp(1.55rem,3vw,2.2rem);font-weight:800;letter-spacing:-.035em}.concept-explorer>header span{display:block;max-width:42rem;margin-top:.45rem;line-height:1.55;color:#5b717d}.concept-controls{display:flex;align-items:flex-start;gap:.5rem;flex:none}.concept-controls button{display:flex;align-items:center;gap:.35rem;padding:.65rem .75rem;border:1px solid #c8d9e1;border-radius:.7rem;background:#fff;font-size:.75rem;font-weight:850;color:#173c52}.concept-controls button:first-child{background:#092d47;color:#fff;border-color:#092d47}.concept-controls svg{width:.9rem;height:.9rem}
.concept-category-bar{display:flex;gap:.5rem;overflow-x:auto;padding:1rem 1.5rem;border-bottom:1px solid #dce7eb;background:#fff;scrollbar-width:thin}.concept-category-bar button{display:flex;align-items:center;gap:.45rem;flex:none;padding:.58rem .75rem;border:1px solid #cadbe2;border-radius:999px;background:#fff;font-size:.78rem;font-weight:780;color:#4a6572;transition:.2s ease}.concept-category-bar button span{display:grid;min-width:1.3rem;height:1.3rem;place-items:center;border-radius:999px;background:#edf3f5;font-size:.65rem}.concept-category-bar button:hover{border-color:#1595a3;color:#087f91;transform:translateY(-1px)}.concept-category-bar button.active{border-color:#0e7181;background:#dff4f5;color:#075d6a;box-shadow:inset 0 0 0 1px #8ed2d7}.concept-category-bar button.active span{background:#fff}
.concept-workspace{display:grid;grid-template-columns:17rem minmax(0,1fr);align-items:stretch}.concept-catalogue{padding:1rem;border-right:1px solid #d9e5ea;background:#f7fafb}.concept-catalogue>label{display:flex;align-items:center;gap:.45rem;padding:.65rem .7rem;border:1px solid #cbdbe2;border-radius:.7rem;background:#fff}.concept-catalogue>label>svg{width:1rem;color:#5a7683}.concept-catalogue input{min-width:0;flex:1;outline:none;font-size:.82rem;color:#18394d}.concept-catalogue label button{display:grid;place-items:center;color:#52717f}.concept-catalogue label button svg{width:.9rem}.concept-catalogue>small{display:block;margin:.8rem .15rem .5rem;font-size:.69rem;font-weight:800;color:#68808c}.concept-catalogue nav{display:grid;gap:.45rem}.concept-catalogue nav>button{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;align-items:center;gap:.55rem;width:100%;padding:.65rem;border:1px solid transparent;border-radius:.75rem;text-align:left;color:#365363;transition:.2s ease}.concept-catalogue nav>button:hover{border-color:#c4d9e0;background:#fff}.concept-catalogue nav>button.active{border-color:#8bcbd2;background:#fff;box-shadow:0 8px 20px rgba(15,67,88,.08);color:#083b50}.concept-catalogue nav i{display:grid;width:2rem;height:2rem;place-items:center;border-radius:.55rem;background:#e2f1f3;color:#0c8291}.concept-catalogue nav i svg{width:1rem}.concept-catalogue nav span{min-width:0}.concept-catalogue nav span small,.concept-catalogue nav span strong{display:block}.concept-catalogue nav span small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.65rem;font-weight:800;letter-spacing:.04em;color:#78909a}.concept-catalogue nav span strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:.12rem;font-size:.78rem}.concept-catalogue nav>button>svg{width:.85rem;color:#78919c}.concept-empty{display:grid;place-items:center;padding:1.5rem .5rem;text-align:center;color:#66808c}.concept-empty>svg{width:1.5rem}.concept-empty strong{margin-top:.4rem;font-size:.82rem}.concept-empty button{margin-top:.7rem;font-size:.72rem;font-weight:800;color:#087f91}
.concept-stage{min-width:0;padding:clamp(1.2rem,3vw,2.2rem);background:radial-gradient(circle at 80% 0,rgba(63,192,203,.13),transparent 30%),#082b42;color:#fff}.concept-stage-head{max-width:47rem}.concept-stage-head>span{font-size:.7rem;font-weight:850;letter-spacing:.13em;color:#6fdce3}.concept-stage-head h3{margin-top:.45rem;font-size:clamp(1.65rem,3vw,2.5rem);font-weight:800;line-height:1.06;letter-spacing:-.04em}.concept-stage-head p{margin-top:.65rem;font-size:.94rem;line-height:1.6;color:#bfd2dc}
.concept-flow{display:grid;grid-template-columns:repeat(var(--step-count),minmax(0,1fr));gap:1rem;margin-top:2rem}.concept-flow>button{position:relative;min-width:0;padding:.9rem;border:1px solid #315469;border-radius:1rem;background:#12384e;text-align:left;color:#d8e7ed;transition:transform .3s ease,border-color .3s ease,background .3s ease,box-shadow .3s ease}.concept-flow>button:hover{border-color:#66cfd7;transform:translateY(-3px)}.concept-flow>button.active{border-color:#7be4e9;background:#155469;box-shadow:0 0 0 3px rgba(123,228,233,.15),0 15px 35px rgba(0,0,0,.22);transform:translateY(-5px)}.concept-flow>button.complete{border-color:#3c8993;background:#103f50}.concept-flow>button>div{display:flex;align-items:center;justify-content:space-between}.concept-flow i{display:grid;width:2rem;height:2rem;place-items:center;border-radius:.6rem;background:#214b60;color:#73dce3}.concept-flow .active i{background:#70dce4;color:#062a3e}.concept-flow i svg{width:1rem}.concept-flow b{font-size:.67rem;letter-spacing:.12em;color:#7193a4}.concept-flow strong,.concept-flow small{display:block}.concept-flow strong{margin-top:1.05rem;font-size:.88rem;color:#fff}.concept-flow small{margin-top:.3rem;font-size:.72rem;line-height:1.35;color:#9db6c2}.concept-arrow{position:absolute;z-index:2;top:50%;right:-1.1rem;width:1.15rem;color:#568596;transform:translateY(-50%)}.concept-flow>button.active .concept-arrow{color:#76e0e6;animation:concept-pulse 1.5s ease-in-out infinite}
.concept-explanation{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;margin-top:1.6rem;padding:1rem;border:1px solid rgba(121,224,231,.35);border-radius:1rem;background:rgba(4,29,45,.65)}.concept-explanation>svg{width:1.5rem;color:#71dce3}.concept-explanation p small,.concept-explanation p strong,.concept-explanation p span{display:block}.concept-explanation p small{font-size:.65rem;font-weight:850;letter-spacing:.12em;color:#70dce4}.concept-explanation p strong{margin-top:.15rem;font-size:1rem}.concept-explanation p span{margin-top:.25rem;font-size:.8rem;line-height:1.45;color:#adc5d0}.concept-explanation em{font-style:normal;font-size:.75rem;font-weight:850;color:#86a7b6}.concept-links{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.2rem}.concept-links a{display:inline-flex;align-items:center;gap:.4rem;padding:.75rem .9rem;border:1px solid #70dce4;border-radius:.7rem;color:#9cebf0;font-size:.78rem;font-weight:850}.concept-links a:first-child{background:#70dce4;color:#062a3e}.concept-links a:hover{background:#fff;border-color:#fff;color:#062a3e}.concept-links a svg{width:.9rem}
@keyframes concept-pulse{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(4px)}}
@media(max-width:900px){.concept-workspace{grid-template-columns:1fr}.concept-catalogue{border-right:0;border-bottom:1px solid #d9e5ea}.concept-catalogue nav{grid-template-columns:repeat(2,minmax(0,1fr))}.concept-flow{grid-template-columns:repeat(2,minmax(0,1fr))}.concept-arrow{display:none}}
@media(max-width:767px){.visual-library-hero:after{right:-6rem;top:5rem}.concept-explorer>header{display:block}.concept-controls{margin-top:1rem}.concept-category-bar{padding:1rem}.concept-catalogue nav{display:flex;overflow-x:auto;padding-bottom:.3rem}.concept-catalogue nav>button{flex:0 0 13rem}.concept-stage{padding:1.2rem}.concept-flow{grid-template-columns:1fr;gap:.8rem}.concept-flow>button{padding:.9rem}.concept-flow>button.active{transform:translateX(4px)}.concept-flow>button:hover{transform:none}.concept-explanation{grid-template-columns:auto 1fr}.concept-explanation em{grid-column:2}}
@media(prefers-reduced-motion:reduce){.concept-category-bar button,.concept-catalogue nav>button,.concept-flow>button{transition:none}.concept-flow>button.active .concept-arrow{animation:none}}