/* Embedded SpicY AI page: the interactive "Ask SpicY" system (markup in template-parts/spicy-diagram.php). */
.sy{--ink:#0b0b0c;--ink2:#151517;--line:rgba(255,255,255,.12);--mute:rgba(255,255,255,.62);
  --ok:#3ddc84;--miss:#ff3d4f;--hold:#ffb31a;
  --ring:linear-gradient(135deg,#ffc21a 0%,#ff5a1a 45%,#ff1f7a 100%);
  container:sy/inline-size;position:relative;max-width:1200px;margin:0 auto;color:#fff;-webkit-font-smoothing:antialiased}
.sy *{box-sizing:border-box}
.sy-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sy svg.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sy a{color:inherit;text-decoration:none}
.sy a:focus-visible,.sy button:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:6px}

/* frame */
.sy-frame{position:relative;border-radius:26px;padding:26px 28px 22px;
  background:radial-gradient(120% 80% at 100% 0,rgba(255,60,120,.12),transparent 55%) padding-box,radial-gradient(90% 70% at 0 100%,rgba(255,140,30,.10),transparent 60%) padding-box,linear-gradient(var(--ink),var(--ink)) padding-box,linear-gradient(140deg,#ffb31a,#ff5a1a 35%,#ff2a5a 65%,#ff1f8f) border-box;
  border:4px solid transparent;
  box-shadow:0 0 18px rgba(255,110,30,.35),0 0 60px rgba(255,40,120,.18),0 30px 60px -30px rgba(17,24,47,.55)}
.sy-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.sy-brand{display:flex;align-items:center;gap:14px}
.sy-word{display:block;width:96px;height:auto}
.sy-sub{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.9}
.sy-brand:hover .sy-sub{color:#ffd0a8}
.sy-note{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);border:1px solid var(--line);border-radius:99px;padding:5px 11px;white-space:nowrap}

.sy-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:28px;padding-top:22px}
.sy-label{margin:0 0 12px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#ff9a4a}

/* transaction history */
.sy-history{display:flex;flex-direction:column}
.sy-lanes{position:relative;display:flex;flex-direction:column;gap:12px;overflow:hidden;border-radius:16px}
.sy-lane{position:relative;padding:14px 14px 15px;border-radius:16px;background:var(--ink2);border:1px solid var(--line);transition:opacity .4s,filter .4s,border-color .4s}
.sy-lane.is-on{border-color:rgba(255,140,60,.45);box-shadow:inset 0 0 18px rgba(255,110,40,.12)}
.sy.is-lit .sy-lane:not(.is-on){opacity:.42;filter:saturate(.3)}
.sy-lane-name{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px}
.sy-lane-name svg.i{font-size:17px;color:#ff8a3d}
.sy-lane-name:hover{color:#ffd0a8}
.sy-docs{list-style:none;margin:0;padding:0;display:flex;position:relative}
.sy-docs::before{content:'';position:absolute;left:14px;right:14px;top:13px;height:2px;background:linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,255,255,.08))}
.sy-docs li{flex:1;min-width:0;display:flex;justify-content:center}
.sy-doc{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;padding:0 2px}
.sy-dot{position:relative;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);border:2px solid rgba(255,255,255,.28);transition:background .35s,border-color .35s,box-shadow .35s,transform .35s}
.sy-dot svg.i{position:absolute;font-size:15px;opacity:0;transition:opacity .25s;stroke-width:2.6}
.sy-doc-name{font-size:11.5px;font-weight:600;color:var(--mute);text-align:center;line-height:1.2;transition:color .3s}
.sy-doc:hover .sy-dot{transform:scale(1.12);border-color:#fff}
.sy-doc:hover .sy-doc-name{color:#fff}
.sy-doc.is-ok .sy-dot{background:var(--ok);border-color:var(--ok);color:#06210f;box-shadow:0 0 12px rgba(61,220,132,.55)}
.sy-doc.is-miss .sy-dot{background:var(--ink);border:2px dashed var(--miss);color:var(--miss);box-shadow:0 0 14px rgba(255,61,79,.55);animation:sy-pulse 1.6s ease-in-out infinite}
.sy-doc.is-hold .sy-dot{background:var(--hold);border-color:var(--hold);color:#2a1700;box-shadow:0 0 12px rgba(255,179,26,.55)}
.sy-doc.is-ok .ok,.sy-doc.is-miss .miss,.sy-doc.is-hold .hold{opacity:1}
.sy-doc.is-ok .sy-doc-name,.sy-doc.is-miss .sy-doc-name,.sy-doc.is-hold .sy-doc-name{color:#fff}
@keyframes sy-pulse{50%{box-shadow:0 0 4px rgba(255,61,79,.25)}}

/* the scan that runs across the lanes when SpicY looks something up */
.sy-beam{position:absolute;top:0;bottom:0;left:0;width:90px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,120,40,.10) 40%,rgba(255,60,120,.35) 50%,transparent 52%)}
.sy.is-scan .sy-beam{animation:sy-scan .75s ease-in-out}
@keyframes sy-scan{0%{opacity:1;transform:translateX(-90px)}100%{opacity:1;transform:translateX(calc(100cqw * .5))}}

.sy-layer{margin-top:12px;display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:99px;font-size:13.5px;line-height:1.35;
  background:linear-gradient(90deg,#ff6a00,#ff2a3d 55%,#e0157a);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 18px rgba(255,80,40,.35);transition:transform .2s,box-shadow .2s}
.sy-layer svg.i{font-size:22px}
.sy-layer:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 26px rgba(255,80,40,.6)}

/* console */
.sy-console{display:flex;flex-direction:column;min-width:0;border-radius:18px;background:var(--ink2);border:1px solid var(--line);overflow:hidden}
.sy-tabs{display:flex;align-items:stretch;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.sy-tabs::-webkit-scrollbar{display:none}
.sy-tab{position:relative;flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:14px 10px 13px;border:0;background:none;color:var(--mute);
  font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap;transition:color .2s,background .2s}
.sy-tab svg.i{font-size:16px}
.sy-tab:hover{color:#fff;background:rgba(255,255,255,.04)}
.sy-tab[aria-selected=true]{color:#fff;background:rgba(255,255,255,.05)}
.sy-tab::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--ring);transform:scaleX(0);transform-origin:left}
.sy-tab[aria-selected=true]::after{transform:scaleX(1);transition:transform .3s}
.sy.is-auto .sy-tab[aria-selected=true]::after{transform:scaleX(0);animation:sy-tick var(--dur,9s) linear forwards}
.sy.is-auto.is-held .sy-tab[aria-selected=true]::after{animation-play-state:paused}
@keyframes sy-tick{to{transform:scaleX(1)}}
.sy-play{flex:none;display:grid;place-items:center;width:44px;border:0;border-left:1px solid var(--line);background:none;color:var(--mute);cursor:pointer;font-size:14px}
.sy-play:hover{color:#fff}
.sy-play .r{display:none}
.sy-play.is-paused .p{display:none}
.sy-play.is-paused .r{display:block}

.sy-panel{padding:20px 22px 20px;min-height:448px;display:flex;flex-direction:column}
.sy-panel[hidden]{display:none}
.sy-ask{display:flex;align-items:flex-start;gap:10px;margin:0 0 14px;font-size:16px;font-weight:600;line-height:1.4}
.sy-who{flex:none;display:inline-flex;align-items:center;gap:6px;margin-top:1px;padding:3px 10px 3px 8px;border-radius:99px;background:rgba(255,255,255,.08);font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.sy-who svg.i{font-size:13px}
.sy-ask.is-alert .sy-who{background:rgba(255,179,26,.14);color:var(--hold)}
.sy-q{min-height:1.4em}
.sy-q.is-typing::after{content:'';display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-2px;background:#ff8a3d;animation:sy-caret .8s steps(1) infinite}
@keyframes sy-caret{50%{opacity:0}}

.sy-ans{display:flex;flex-direction:column;flex:1}
.sy-ans>*{transition:opacity .35s,transform .35s}
.sy.is-js .sy-ans>*{opacity:0;transform:translateY(6px)}
.sy.is-js .sy-panel.is-in .sy-ans>*{opacity:1;transform:none}
.sy-panel.is-in .sy-ans>:nth-child(2){transition-delay:.12s}
.sy-panel.is-in .sy-ans>:nth-child(3){transition-delay:.24s}
.sy-panel.is-in .sy-ans>:nth-child(4){transition-delay:.34s}
.sy-panel.is-in .sy-ans>:nth-child(5){transition-delay:.42s}
.sy-say{display:flex;gap:10px;margin:0 0 14px;font-size:14.5px;line-height:1.55;color:#e8e8e8}
.sy-say svg.i{font-size:18px;color:#ff8a3d;margin-top:2px}

.sy-ev,.sy-bars{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:6px}
.sy-ev li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px 8px 14px;border-radius:10px;background:rgba(255,255,255,.04);border-left:3px solid var(--line);font-size:13.5px}
.sy-ev a{font-weight:600}
.sy-ev a:hover{color:#ffb26b}
.sy-ev span{color:var(--mute);font-size:12.5px;text-align:right}
.sy-ev .is-ok{border-left-color:var(--ok)}
.sy-ev .is-miss{border-left-color:var(--miss)}
.sy-ev .is-miss span{color:#ff8a95}
.sy-ev .is-hold{border-left-color:var(--hold)}
.sy-ev .is-hold span{color:#ffd27a}

.sy-bars li{display:grid;grid-template-columns:84px 1fr 22px;align-items:center;gap:10px;font-size:13px}
.sy-bars span{color:var(--mute)}
.sy-bars i{display:block;height:12px;border-radius:99px;background:linear-gradient(90deg,#ff9a1a,#ff2a5a);transform-origin:left;transform:scaleX(var(--v));transition:transform .7s cubic-bezier(.2,.7,.2,1) .2s}
.sy.is-js .sy-panel:not(.is-in) .sy-bars i{transform:scaleX(0)}
.sy-bars b{text-align:right}

.sy-fields{margin:0 0 14px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sy-fields div{padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.04);border-left:3px solid var(--ok)}
.sy-fields div.is-hold{border-left-color:var(--hold)}
.sy-fields dt{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.sy-fields dd{margin:2px 0 0;font-size:13.5px;font-weight:600}
.sy-fields .is-hold dd{color:#ffd27a}

.sy-next{margin:auto 0 8px;font-size:14px;line-height:1.45}
.sy-next b{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#ff9a4a;margin-bottom:2px}
.sy-gate{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:12.5px;color:var(--mute)}
.sy-gate svg.i{font-size:14px;color:var(--ok)}
.sy-where{align-self:flex-start;font-size:13px;font-weight:700;color:#ff8a3d}
.sy-where::after{content:' →'}
.sy-where:hover{color:#ffb26b}

/* guardrails */
.sy-guard{list-style:none;margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:flex;justify-content:center;flex-wrap:wrap;gap:8px 28px}
.sy-guard a{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:rgba(255,255,255,.85)}
.sy-guard svg.i{font-size:16px;color:#ff8a3d}
.sy-guard a:hover{color:#fff}
.sy-section{background:linear-gradient(180deg,#f3f5f9,#fff 85%)}

/* narrow columns and phones */
@container sy (max-width:860px){
  .sy-body{grid-template-columns:1fr;gap:20px}
  .sy-panel{min-height:0}
  @keyframes sy-scan{0%{opacity:1;transform:translateX(-90px)}100%{opacity:1;transform:translateX(100cqw)}}
}
@container sy (max-width:560px){
  .sy-frame{padding:18px 14px 16px;border-width:3px;border-radius:18px}
  .sy-top{flex-wrap:wrap;gap:10px}
  .sy-word{width:76px}
  .sy-sub{font-size:11px}
  .sy-lane{padding:12px 8px 13px}
  .sy-doc-name{font-size:10px}
  .sy-dot{width:24px;height:24px}
  .sy-docs::before{top:11px}
  .sy-tab{padding:13px 4px 12px;font-size:12.5px}
  .sy-tab svg.i{display:none}
  .sy-play{width:36px}
  .sy-panel{padding:16px 14px}
  .sy-ev li{flex-direction:column;align-items:flex-start;gap:2px}
  .sy-ev span{text-align:left}
  .sy-fields{grid-template-columns:1fr}
  .sy-guard{flex-direction:column;align-items:flex-start;gap:10px}
}
@media (prefers-reduced-motion:reduce){.sy *,.sy *::after{animation:none!important;transition:none!important}}

/* Top visual: Neel's spicy.jpg in HTML (markup in template-parts/spicy-simple.php) */
.sys{--ink:#0b0b0c;max-width:1040px;margin:0 auto;color:#fff;-webkit-font-smoothing:antialiased}
.sys *{box-sizing:border-box}
.sys-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sys svg.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sys a{text-decoration:none;color:inherit}
.sys a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.sys-frame{position:relative;padding:30px 44px 40px;border-radius:30px;
  background:radial-gradient(70% 60% at 50% 45%,rgba(255,70,60,.14),transparent 70%),linear-gradient(160deg,#16213f,#0d1428 55%,#0b0f1e);
  box-shadow:0 2px 4px rgba(17,24,47,.06),0 30px 60px -24px rgba(17,24,47,.55)}
.sys-head{position:relative;display:flex;align-items:center;justify-content:center;min-height:56px;margin-bottom:22px}
.sys-title{font-size:clamp(26px,3.6vw,44px);font-weight:800;letter-spacing:.02em;text-transform:uppercase;line-height:1}
.sys-title span{background:linear-gradient(90deg,#ff9a1a,#ff3d3d 55%,#e0157a);-webkit-background-clip:text;background-clip:text;color:transparent}
.sys-logo{position:absolute;right:0;top:50%;transform:translateY(-50%);display:block}
.sys-logo svg{display:block;width:118px;height:auto}

.sys-stack{position:relative;display:flex;flex-direction:column;align-items:stretch}
.sys-rail{position:absolute;z-index:0;top:38px;bottom:38px;width:30px;border:3px solid transparent;pointer-events:none;
  border-image:linear-gradient(180deg,#ff9a1a,#ff3d3d 50%,#e0157a) 1;filter:drop-shadow(0 0 6px rgba(255,80,60,.6))}
.sys-rail-l{left:-14px;border-right:0}
.sys-rail-r{right:-14px;border-left:0}
.sys .sys-bar{position:relative;z-index:1;display:flex;align-items:center;gap:22px;height:76px;padding:0 24px 0 10px;border-radius:99px;
  background:linear-gradient(180deg,#fff,#f1f2f6);color:#141a2e;font-size:clamp(17px,2vw,22px);font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  box-shadow:0 0 0 2px rgba(255,120,60,.55),0 0 18px rgba(255,90,60,.35);transition:transform .2s,box-shadow .2s}
.sys-bar::after{content:'→';margin-left:auto;color:#ff5a1a;opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s}
.sys-bar:hover{transform:translateY(-2px);box-shadow:0 0 0 2px #ff7a3d,0 0 28px rgba(255,90,60,.6)}
.sys-bar:hover::after{opacity:1;transform:none}
.sys-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--c);color:#fff;font-size:26px;box-shadow:0 4px 12px rgba(255,60,40,.35)}
.sys-arrow{position:relative;z-index:1;display:grid;place-items:center;height:34px;color:#ff4a3d;font-size:24px}
.sys-arrow svg.i{stroke-width:2.4}

.sys-ai{position:relative;z-index:1;display:flex;align-items:center;gap:12px;min-height:96px;padding:10px 12px 10px 30px;border-radius:99px;overflow:hidden;
  background:linear-gradient(90deg,#ff6a00,#e8202a 40%,#a3104f 75%,#5a0c3c);box-shadow:0 0 0 2px rgba(255,150,60,.6),0 0 34px rgba(255,70,40,.55)}
.sys-ai::before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.18) 45%,transparent 60%);transform:translateX(-100%);animation:sys-sheen 5s ease-in-out infinite;pointer-events:none}
@keyframes sys-sheen{60%,100%{transform:translateX(100%)}}
.sys-ai-name{position:relative;display:flex;align-items:center;gap:16px;flex:1;min-width:0;font-size:clamp(18px,2.3vw,28px);font-weight:400;line-height:1.15}
.sys-ai-name b{font-weight:800}
.sys-ai-name svg.i{font-size:42px;stroke-width:1.6}
.sys-caps{position:relative;list-style:none;margin:0;padding:0;display:flex}
.sys-caps li+li{border-left:1px solid rgba(255,255,255,.35)}
.sys-caps a{display:flex;flex-direction:column;align-items:center;gap:7px;padding:8px clamp(10px,1.8vw,24px);border-radius:14px;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;transition:background .2s}
.sys-caps svg.i{font-size:24px}
.sys-caps a:hover{background:rgba(255,255,255,.14)}

@media (max-width:760px){
  .sys-frame{padding:22px 18px 26px;border-radius:20px}
  .sys-head{justify-content:space-between;min-height:40px;margin-bottom:16px}
  .sys-logo{position:static;transform:none}
  .sys-logo svg{width:76px}
  .sys .sys-bar{height:60px;gap:14px;padding-left:7px}
  .sys-ic{width:46px;height:46px;font-size:21px}
  .sys-rail{top:30px;bottom:30px;width:16px}
  .sys-rail-l{left:-9px}.sys-rail-r{right:-9px}
  .sys-ai{flex-direction:column;align-items:stretch;border-radius:22px;padding:16px 12px 12px;gap:12px}
  .sys-ai-name{justify-content:center;gap:12px}
  .sys-ai-name svg.i{font-size:32px}
  .sys-caps{display:grid;grid-template-columns:repeat(4,1fr)}
  .sys-caps a{padding:6px 2px;font-size:10.5px;letter-spacing:.02em}
  .sys-caps svg.i{font-size:20px}
}
@media (prefers-reduced-motion:reduce){.sys-ai::before{animation:none}}