/* QUICK EXPLORE — system destinations plus the AI proposal studio. */
#smlQuickExplore{
  position:fixed; inset:0; z-index:9600;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(16px,2.5vh,28px); padding:clamp(18px,4vw,52px);
  box-sizing:border-box; overflow:auto;
  color:#dfffe8; font-family:'IBM Plex Mono','Courier New',monospace;
  background:radial-gradient(ellipse at 50% 38%,#123523 0,#07170e 52%,#010704 100%);
  opacity:0; transform:scale(1.018); transition:opacity .2s ease,transform .28s ease;
}
#smlQuickExplore.open{ opacity:1; transform:scale(1); }
#smlQuickExplore.closing{ opacity:0; transform:scale(1.025); }
#smlQuickExplore::after{
  content:''; position:fixed; z-index:20; inset:0; pointer-events:none;
  background:#effff3; opacity:0;
}
#smlQuickExplore.confirm-flash::after{ animation:sqeDoubleScreenFlash .64s steps(1,end) both; }
@keyframes sqeDoubleScreenFlash{
  0%,4%,23%,43%,62%,100%{ opacity:0; }
  5%,22%,44%,61%{ opacity:.96; }
}
.sqe-gridlines{
  position:absolute; inset:0; opacity:.12; pointer-events:none;
  background-image:linear-gradient(rgba(78,234,120,.35) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(78,234,120,.35) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,black,transparent 88%);
}
.sqe-header,.sqe-grid,.sqe-footer{ position:relative; z-index:1; width:min(1180px,100%); }
.sqe-header{ text-align:center; }
.sqe-kicker{ color:#5db879; font-size:11px; letter-spacing:2.5px; }
.sqe-header h1{
  margin:7px 0 4px; color:#f0fff4;
  font-size:clamp(27px,4vw,52px); line-height:1; letter-spacing:clamp(4px,1vw,11px);
  text-shadow:0 0 18px rgba(77,235,119,.45);
}
.sqe-header p{ margin:0; color:#78a986; font-size:clamp(11px,1.3vw,14px); letter-spacing:.6px; }
.sqe-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(10px,1.7vw,22px); }
.sqe-card{
  --sqe-accent:#4eea78;
  position:relative; min-height:clamp(280px,48vh,420px); overflow:hidden;
  display:flex; flex-direction:column; align-items:stretch;
  padding:18px; border:1px solid color-mix(in srgb,var(--sqe-accent) 52%,#183923);
  background:linear-gradient(155deg,color-mix(in srgb,var(--sqe-accent) 9%,#07110a),#030906 68%);
  color:#c9e9d2; text-align:left; font:inherit; cursor:pointer;
  box-shadow:inset 0 0 35px rgba(0,0,0,.35),0 12px 30px rgba(0,0,0,.24);
  opacity:0; transform:translateY(18px);
  animation:sqeCardIn .34s var(--sqe-delay) ease forwards;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
@keyframes sqeCardIn{ to{ opacity:1; transform:translateY(0); } }
.sqe-card::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.16;
  background:repeating-linear-gradient(to bottom,transparent 0 3px,var(--sqe-accent) 4px);
}
.sqe-card::before{
  content:''; position:absolute; z-index:2; left:0; right:0; bottom:0; height:4px;
  background:var(--sqe-accent); transform:scaleX(0); transform-origin:left;
  box-shadow:0 0 16px var(--sqe-accent); pointer-events:none;
}
.sqe-card.holding::before{ animation:sqeCharge .56s linear forwards; }
@keyframes sqeCharge{ to{ transform:scaleX(1); } }
.sqe-card:hover,.sqe-card.selected{
  transform:translateY(-6px); border-color:var(--sqe-accent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--sqe-accent) 32%,transparent),
             0 0 30px color-mix(in srgb,var(--sqe-accent) 20%,transparent),
             inset 0 0 40px color-mix(in srgb,var(--sqe-accent) 8%,transparent);
  outline:none;
}
/* Match the character-select screen's reliable pattern: the card stays put
   while its inset "TV" alternates light/dark exactly twice. */
.sqe-card.picked{
  opacity:1; transform:translateY(-7px) scale(1.012); filter:none;
  animation:none;
}
.sqe-card.picked .sqe-visual{ animation:sqePickTvFlash .16s steps(1,end) 2; }
@keyframes sqePickTvFlash{
  50%{ background:#effff3; color:#021006; box-shadow:inset 0 0 0 5px #fff,0 0 34px #effff3; }
}
.sqe-cobol{ --sqe-accent:#4ff17e; }
.sqe-legacy{ --sqe-accent:#51a7ff; }
.sqe-mac{ --sqe-accent:#d8dce7; }
.sqe-ghostbridge{ --sqe-accent:#d378ff; }
.sqe-proposal{ --sqe-accent:#ffbd4a; grid-column:1/-1; min-height:126px; display:grid; grid-template-columns:190px 1fr 180px; grid-template-rows:auto auto 1fr; column-gap:22px; }
.sqe-proposal .sqe-visual{ grid-column:1; grid-row:1/4; width:100%; height:88px; margin:0; align-self:center; }
.sqe-proposal .sqe-title{ grid-column:2; grid-row:1; align-self:end; }
.sqe-proposal .sqe-tag{ grid-column:2; grid-row:2; min-height:0; }
.sqe-proposal .sqe-copy{ grid-column:2; grid-row:3; margin-top:7px; }
.sqe-proposal .sqe-enter{ grid-column:3; grid-row:1/4; margin:0; padding:0; align-self:center; }
.sqe-proposal-doc{ font-size:9px; line-height:1.6; }
.sqe-proposal-doc em{ color:#fff4dc; font-style:normal; }
.sqe-proposal-spark{ margin-left:13px; color:#fff; font-size:28px; text-shadow:0 0 15px var(--sqe-accent); }
.sqe-number,.sqe-era{ position:absolute; top:13px; color:var(--sqe-accent); font-size:11px; letter-spacing:1px; }
.sqe-number{ left:16px; }
.sqe-era{ right:16px; }
.sqe-visual{
  position:relative; height:118px; margin:21px 0 19px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  border:1px solid color-mix(in srgb,var(--sqe-accent) 35%,#111);
  background:#020704; color:var(--sqe-accent);
  box-shadow:inset 0 0 22px color-mix(in srgb,var(--sqe-accent) 9%,transparent);
}
.sqe-visual i{ font-style:normal; }
.sqe-code{ font-size:10px; line-height:1.9; letter-spacing:.5px; }
.sqe-code em,.sqe-window em,.sqe-macwindow em,.sqe-screen em{ color:#effff3; font-style:normal; }
.sqe-winbar,.sqe-menubar{ position:absolute; top:16px; left:14px; right:14px; padding:5px 7px; font-size:9px; background:#0d4e96; color:white; }
.sqe-window,.sqe-macwindow{ padding:12px; border:2px outset #aaa; background:#c5c5c5; color:#111; font-size:9px; line-height:1.7; }
.sqe-start{ position:absolute; left:14px; bottom:12px; padding:3px 6px; background:#bfbfbf; color:#111; font-size:8px; border:2px outset #ddd; }
.sqe-menubar{ background:#e8e8ec; color:#222; border-radius:5px 5px 0 0; }
.sqe-macwindow{ border:1px solid #85858d; border-radius:6px; background:#1e232a; color:#d9dde5; }
.sqe-dock{ position:absolute; bottom:9px; padding:3px 9px; border-radius:8px; background:rgba(230,235,240,.32); font-size:8px; letter-spacing:3px; }
.sqe-screen{ width:34%; height:57%; display:grid; place-content:center; border:2px solid currentColor; font-size:9px; text-align:center; }
.sqe-screen-a{ color:#7dff9f; }
.sqe-screen-b{ color:#8fbcff; }
.sqe-bridge-line{ margin:0 5px; color:#e6a4ff; font-size:22px; }
.sqe-title{ color:#f3fff6; font-size:clamp(18px,2vw,26px); font-weight:700; letter-spacing:2px; }
.sqe-tag{ min-height:27px; margin-top:4px; color:var(--sqe-accent); font-size:9px; letter-spacing:1.2px; }
.sqe-copy{ margin-top:11px; color:#87a890; font-size:11px; line-height:1.55; }
.sqe-enter{ margin-top:auto; padding-top:16px; color:var(--sqe-accent); font-size:10px; letter-spacing:1px; }
.sqe-enter b{ float:right; font-size:17px; line-height:.6; }
.sqe-footer{ color:#4d7e5c; text-align:center; font-size:10px; letter-spacing:1.4px; }

@media (max-width:900px){
  #smlQuickExplore{ justify-content:flex-start; }
  .sqe-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sqe-card{ min-height:280px; }
}
@media (max-width:520px){
  #smlQuickExplore{ padding:14px; gap:13px; }
  .sqe-grid{ grid-template-columns:1fr; }
  .sqe-card{ min-height:220px; }
  .sqe-visual{ height:82px; margin-bottom:12px; }
  .sqe-footer{ padding-bottom:12px; }
  .sqe-proposal{ display:flex; min-height:220px; }
  .sqe-proposal .sqe-visual{ width:auto; height:82px; margin:21px 0 12px; }
  .sqe-proposal .sqe-enter{ margin-top:auto; padding-top:16px; align-self:stretch; }
}
@media (prefers-reduced-motion:reduce){
  #smlQuickExplore,.sqe-card{ animation:none; transition:none; opacity:1; transform:none; }
  .sqe-card.holding::before,.sqe-card.picked{ animation:none; }
}