/* ============================================================ Overlay system (scrim + panels + modals) ============================================================ */ .scrim{ position:fixed;inset:0;z-index:80;background:rgba(5,6,8,.62); backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px); opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s; } .scrim.on{opacity:1;visibility:visible} .sheet{ position:fixed;top:0;right:0;bottom:0;z-index:90; width:var(--panel-w);display:flex;flex-direction:column; background:linear-gradient(180deg,#0B0C0F 0%,#0A0B0D 100%); border-left:1px solid var(--red-dim); box-shadow:-30px 0 80px rgba(0,0,0,.6); transform:translateX(102%);visibility:hidden; transition:transform .55s var(--ease),visibility .55s; } .sheet.on{transform:translateX(0);visibility:visible} .reduced .sheet{transition:opacity .25s linear,visibility .25s;transform:none;opacity:0} .reduced .sheet.on{opacity:1} .sheet-head{ flex:0 0 auto;padding:20px clamp(18px,4vw,28px) 16px; border-bottom:1px solid rgba(255,255,255,.08); display:flex;align-items:flex-start;gap:14px; } .sheet-head .meta{flex:1 1 auto;min-width:0} .sheet-kicker{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--amber);font-weight:700} .sheet-title{font-size:clamp(21px,3.2vw,28px);font-weight:800;letter-spacing:-.02em;margin-top:7px;line-height:1.06} .sheet-desc{margin-top:9px;font-size:13.5px;color:var(--muted);line-height:1.6;max-width:42ch} .sheet-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:16px clamp(18px,4vw,28px) 34px;-webkit-overflow-scrolling:touch} .sheet-body::-webkit-scrollbar{width:8px} .sheet-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14)} .close-x{ flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center; border:1px solid var(--line);border-radius:2px;transition:border-color .25s,background .25s; } .close-x:hover{border-color:var(--red);background:rgba(212,55,43,.14)} .close-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round} .rule{height:1px;background:rgba(255,255,255,.08);margin:20px 0} .sect-label{ font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted-2);font-weight:700; display:flex;align-items:center;gap:10px;margin:22px 0 12px; } .sect-label::after{content:"";flex:1 1 auto;height:1px;background:rgba(255,255,255,.08)} /* Tool cards — editorial grid, not glass */ .tool-list{display:flex;flex-direction:column;gap:1px;background:rgba(255,255,255,.07)} .tool{ display:flex;align-items:center;gap:12px;width:100%;text-align:left; padding:15px 14px;background:#0C0E11;min-height:64px; transition:background .25s var(--ease),padding-left .25s var(--ease); } .tool:hover,.tool:focus-visible{background:#14171C;padding-left:18px} .tool .t-main{flex:1 1 auto;min-width:0} .tool .t-name{font-size:15px;font-weight:700;letter-spacing:-.005em;display:flex;align-items:center;gap:8px} .tool .t-name i{width:5px;height:5px;background:var(--amber);border-radius:50%;flex:0 0 auto;opacity:0;transition:opacity .25s} .tool:hover .t-name i{opacity:1} .tool .t-cat{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);font-weight:700;margin-top:5px} .tool .t-desc{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.5} .tool .t-go{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;color:var(--muted-2);transition:transform .25s var(--ease),color .25s} .tool:hover .t-go{transform:translateX(3px);color:var(--white)} .tool .t-go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .save-btn{ flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:2px; transition:border-color .25s,background .25s,color .25s;color:var(--muted); } .save-btn:hover{border-color:var(--amber);color:var(--gold)} .save-btn[aria-pressed="true"]{border-color:var(--amber);color:#0A0B0D;background:var(--amber)} .save-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round} .save-btn[aria-pressed="true"] svg{fill:currentColor} /* Chips / filters */ .chips{display:flex;flex-wrap:wrap;gap:7px} .chip{ min-height:34px;padding:0 13px;border:1px solid var(--line);border-radius:2px; font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--muted); transition:border-color .25s,color .25s,background .25s; } .chip:hover{color:var(--white);border-color:var(--line-strong)} .chip[aria-pressed="true"]{border-color:var(--red);color:var(--white);background:rgba(212,55,43,.16)} /* Category index rows */ .cat-row{ display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:16px 12px; border-bottom:1px solid rgba(255,255,255,.07);transition:background .25s,padding-left .25s var(--ease); } .cat-row:hover,.cat-row:focus-visible{background:#13161A;padding-left:16px} .cat-row .n{font-size:11px;font-weight:800;color:var(--red);letter-spacing:.1em;width:26px;flex:0 0 auto} .cat-row .c-main{flex:1 1 auto;min-width:0} .cat-row .c-title{font-size:15px;font-weight:700} .cat-row .c-sub{font-size:11.5px;color:var(--muted);margin-top:3px} .cat-row .c-count{font-size:10px;letter-spacing:.16em;color:var(--muted-2);font-weight:700;text-transform:uppercase} /* Modal (tool detail / matcher) */ .modal{ position:fixed;z-index:100;left:50%;top:50%;transform:translate(-50%,-46%) scale(.98); width:min(560px,94vw);max-height:min(86vh,760px);display:flex;flex-direction:column; background:#0A0B0D;border:1px solid var(--red-dim);box-shadow:0 40px 120px rgba(0,0,0,.75); opacity:0;visibility:hidden;transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s; } .modal.on{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)} .reduced .modal{transform:translate(-50%,-50%)} .modal-head{padding:22px clamp(18px,4vw,26px) 14px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;gap:14px;align-items:flex-start} .modal-body{overflow-y:auto;overscroll-behavior:contain;padding:18px clamp(18px,4vw,26px) 22px} .modal-foot{ padding:14px clamp(18px,4vw,26px);border-top:1px solid rgba(255,255,255,.08); display:flex;gap:9px;flex-wrap:wrap;background:#0B0D10; } .tag-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .tag{ font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--muted); border:1px solid var(--line);padding:5px 9px;border-radius:2px; } .use-list{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px} .use-list li{display:flex;gap:10px;font-size:13.5px;color:#C9CDD3;line-height:1.5} .use-list li::before{content:"";flex:0 0 auto;width:5px;height:5px;margin-top:7px;background:var(--red)} /* Search overlay — illuminated directory terminal */ .search-wrap{ position:fixed;inset:0;z-index:100;display:flex;align-items:flex-start;justify-content:center; padding:clamp(56px,10vh,110px) 16px 24px; opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s; } .search-wrap.on{opacity:1;visibility:visible} .search-box{ width:min(680px,100%);max-height:min(78vh,700px);display:flex;flex-direction:column; background:linear-gradient(180deg,rgba(12,14,17,.98),rgba(8,9,11,.98)); border:1px solid var(--red-dim);box-shadow:0 0 0 1px rgba(240,166,63,.08),0 50px 140px rgba(0,0,0,.8); transform:translateY(-10px);transition:transform .4s var(--ease); } .search-wrap.on .search-box{transform:translateY(0)} .search-top{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.09)} .search-top svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:var(--amber);stroke-width:1.7;stroke-linecap:round} #searchInput{ flex:1 1 auto;min-width:0;background:none;border:0;color:var(--white); font-family:var(--font);font-size:17px;font-weight:500;padding:8px 0; } #searchInput::placeholder{color:var(--muted-2)} .search-hint{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);font-weight:700;white-space:nowrap} .search-meta{ padding:9px 18px;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2); font-weight:700;border-bottom:1px solid rgba(255,255,255,.07);display:flex;justify-content:space-between;gap:12px; } .search-meta button{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--red)} .search-results{overflow-y:auto;overscroll-behavior:contain;padding:6px 0 10px;flex:1 1 auto} .res{ display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 18px;min-height:56px; border-left:2px solid transparent;transition:background .18s,border-color .18s; } .res.sel,.res:hover{background:rgba(255,255,255,.055);border-left-color:var(--amber)} .res .r-name{font-size:14.5px;font-weight:700} .res .r-sub{font-size:11.5px;color:var(--muted);margin-top:3px} .res .r-cat{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);font-weight:700;white-space:nowrap} .empty{padding:34px 18px;text-align:center;color:var(--muted)} .empty strong{display:block;font-size:15px;color:var(--white);margin-bottom:7px} mark{background:rgba(240,166,63,.24);color:var(--gold);border-radius:1px} /* Matcher */ .matcher-field{display:flex;flex-direction:column;gap:10px} #matchInput{ width:100%;min-height:96px;resize:vertical;background:#0D0F13;color:var(--white); border:1px solid var(--line);padding:13px 14px;font-family:var(--font);font-size:14.5px;line-height:1.55; transition:border-color .25s; } #matchInput:focus{border-color:var(--amber)} #matchInput::placeholder{color:var(--muted-2)} .seed-row{display:flex;flex-wrap:wrap;gap:6px} .seed{ font-size:11px;color:var(--muted);border:1px solid var(--line);padding:7px 11px;border-radius:2px; transition:border-color .25s,color .25s;min-height:34px; } .seed:hover{border-color:var(--amber);color:var(--gold)} .match-out{display:flex;flex-direction:column;gap:1px;background:rgba(255,255,255,.07);margin-top:16px} .match-note{font-size:11.5px;color:var(--muted-2);margin-top:12px;line-height:1.55} /* ============================================================ Final hub console — stays inside the world ============================================================ */ .hub{ position:fixed;left:50%;bottom:clamp(18px,4vh,42px);transform:translate(-50%,26px); z-index:30;width:min(940px,94vw); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .8s var(--ease),transform .8s var(--ease),visibility .8s; } .hub.on{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto} .hub-card{ background:linear-gradient(180deg,rgba(10,11,14,.82),rgba(8,9,11,.94)); border:1px solid var(--red-dim);border-top:2px solid var(--red); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); padding:clamp(18px,3vw,26px); box-shadow:0 -20px 80px rgba(0,0,0,.55); } .hub-top{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;justify-content:space-between} .hub h2{font-size:clamp(20px,3.4vw,32px);font-weight:800;letter-spacing:-.025em;line-height:1.04;max-width:16ch} .hub h2 .rd{color:var(--red)} .hub-sub{font-size:13px;color:var(--muted);margin-top:8px;max-width:44ch;line-height:1.55} .hub-actions{display:flex;flex-wrap:wrap;gap:8px} .hub-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(14px,2.4vw,26px);margin-top:20px} .hub-panel .sect-label{margin-top:0} .hub-search{display:flex;align-items:center;gap:10px;border:1px solid var(--line);padding:0 12px;min-height:46px;background:#0D0F13} .hub-search svg{width:15px;height:15px;fill:none;stroke:var(--amber);stroke-width:1.7;stroke-linecap:round;flex:0 0 auto} .hub-search span{font-size:13px;color:var(--muted-2)} .hub-search kbd{ margin-left:auto;font:inherit;font-size:10px;letter-spacing:.1em;color:var(--muted); border:1px solid var(--line);padding:3px 6px;border-radius:2px; } @media (max-width:820px){ .hub-grid{grid-template-columns:1fr} .hub{bottom:12px;width:96vw} .hub-card{max-height:64vh;overflow-y:auto;overscroll-behavior:contain} } /* Toast */ .toast{ position:fixed;left:50%;bottom:22px;transform:translate(-50%,14px);z-index:110; background:#0C0E11;border:1px solid var(--amber);color:var(--gold); padding:11px 18px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700; opacity:0;visibility:hidden;transition:opacity .3s,transform .3s var(--ease),visibility .3s;white-space:nowrap; } .toast.on{opacity:1;visibility:visible;transform:translate(-50%,0)} @media (max-width:560px){ .hero{padding:calc(var(--nav-h) + 6vh) 18px 22vh;align-items:flex-end} .hero-in{max-width:100%} .hud{max-width:74vw;bottom:96px} .scroll-cue{bottom:14px} .sheet{width:100vw;border-left:0;border-top:2px solid var(--red)} }
AI Finder
Preparing the path

AI Tools · Guided Discovery

Walk the Path
to the Right AI.

A guided directory for creative, technical and business tools. Scroll to walk. Approach a display to reveal it.