/* Who Said It? Stormlight quote speed round. Everything scoped to #wsi1. */
#wsi1{--wsi-ink:#eaecf0;--wsi-mute:#7a8899;--wsi-gold:#e8c96a;--wsi-gold2:#c9a84c;--wsi-storm:#8fd3f4;--wsi-red:#e0605a;--wsi-bg:#060c1a;--wsi-line:#1a2840;
  container-type:inline-size;position:relative;scroll-margin-top:96px;overflow:hidden;margin:28px 0;border-radius:18px;background:radial-gradient(120% 80% at 50% 0%,#0f2240 0%,#060c1a 55%,#03060f 100%);border:1px solid #1a2840;box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(143,211,244,.08);color:var(--wsi-ink);font-family:'Lato',system-ui,sans-serif;min-height:560px}
#wsi1 *{box-sizing:border-box}
#wsi1 .wsi-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#wsi1 .wsi-kicker{font:700 11px/1.2 'Cinzel',Georgia,serif;letter-spacing:.28em;text-transform:uppercase;color:var(--wsi-storm)}
#wsi1 .wsi-fine{font-size:12px;color:var(--wsi-mute);margin:12px 0 0}
#wsi1 .wsi-go{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 26px;border-radius:999px;background:linear-gradient(180deg,#f3d887,#c9a84c);color:#1a1205;font:700 14px/1 'Cinzel',Georgia,serif;letter-spacing:.06em;text-decoration:none;box-shadow:0 10px 30px rgba(201,168,76,.28),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .2s,box-shadow .2s}
#wsi1 .wsi-go:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(201,168,76,.4),inset 0 1px 0 rgba(255,255,255,.5);color:#1a1205}
#wsi1 .wsi-go:active{transform:translateY(1px)}
#wsi1 .wsi-go:focus-visible,#wsi1 .wsi-card:focus-visible{outline:2px solid var(--wsi-storm);outline-offset:3px}
#wsi1 .wsi-alt{background:transparent;color:var(--wsi-gold);border:1px solid rgba(201,168,76,.55);box-shadow:none}
#wsi1 .wsi-alt:hover{background:rgba(201,168,76,.1);color:var(--wsi-gold)}

/* intro: a wall of the twelve voices behind the title */
#wsi1 .wsi-wall{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:50%;opacity:.9}
#wsi1 .wsi-wall img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:saturate(.8) brightness(.8);animation:wsi-breathe 7s ease-in-out infinite;animation-delay:calc(var(--k) * -.6s)}
#wsi1.wsi-intro::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 55% at 50% 58%,rgba(3,6,15,.82),rgba(3,6,15,.35) 100%),linear-gradient(180deg,rgba(3,6,15,0) 30%,rgba(3,6,15,.9) 100%);pointer-events:none}
#wsi1 .wsi-introbody{position:relative;z-index:2;text-align:center;padding:120px 28px 56px;max-width:560px;margin:0 auto}
#wsi1 .wsi-title{font:700 clamp(40px,9.5cqi,68px)/1 'Cinzel Decorative','Cinzel',Georgia,serif;margin:14px 0 16px;color:#fff;text-shadow:0 0 40px rgba(143,211,244,.45),0 2px 0 #000;letter-spacing:.01em}
#wsi1 .wsi-lede{font-size:18px;line-height:1.55;color:#c0cce0;margin:0 0 22px}
#wsi1 .wsi-rules{list-style:none;display:flex;justify-content:center;gap:10px;padding:0;margin:0 0 30px;flex-wrap:wrap}
#wsi1 .wsi-rules li{padding:8px 14px;border:1px solid rgba(143,211,244,.25);border-radius:999px;background:rgba(6,12,26,.6);font-size:13px;color:#c0cce0}
#wsi1 .wsi-rules b{color:var(--wsi-storm);font-family:'Cinzel',Georgia,serif;margin-right:4px}
@keyframes wsi-breathe{0%,100%{opacity:.75}50%{opacity:1}}

/* spheres: the progress bar is fifteen gems */
#wsi1 .wsi-hud{padding:20px 22px 0;position:relative;z-index:2}
#wsi1 .wsi-spheres{display:flex;justify-content:center;gap:clamp(4px,1.3cqi,10px);flex-wrap:nowrap}
#wsi1 .wsi-sph{width:clamp(11px,3.1cqi,18px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2a3a55,#0c1526 70%);box-shadow:inset 0 0 0 1px #24344f;transition:background .35s,box-shadow .35s,transform .35s}
#wsi1 .wsi-sph.now{box-shadow:inset 0 0 0 1px var(--wsi-storm),0 0 0 3px rgba(143,211,244,.15);animation:wsi-pulse 1.1s ease-in-out infinite}
#wsi1 .wsi-sph.on{background:radial-gradient(circle at 35% 30%,#fff 0,#bfe9ff 18%,#8fd3f4 40%,#2a6fa8 85%);box-shadow:0 0 14px rgba(143,211,244,.85),0 0 2px #fff;transform:scale(1.08)}
#wsi1 .wsi-sph.dun{background:radial-gradient(circle at 35% 30%,#3a3f48,#15181e 75%);box-shadow:inset 0 0 0 1px #2b2f37;opacity:.8}
@keyframes wsi-pulse{50%{transform:scale(1.2)}}
#wsi1 .wsi-meta{display:flex;justify-content:space-between;gap:10px;margin-top:14px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--wsi-mute)}
#wsi1 .wsi-meta b{color:var(--wsi-ink);font-family:'Cinzel',Georgia,serif;font-size:14px}
#wsi1 .wsi-streak.hot b{color:var(--wsi-gold);text-shadow:0 0 12px rgba(232,201,106,.6)}

/* the quote under a draining stormwall */
#wsi1 .wsi-quote{position:relative;margin:18px 22px 0;padding:34px 30px 26px;border-radius:16px;background:linear-gradient(180deg,rgba(16,29,50,.85),rgba(8,14,28,.85));border:1px solid rgba(143,211,244,.14);min-height:210px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
#wsi1 .wsi-quote::before{content:"\201C";position:absolute;left:14px;top:-18px;font:700 130px/1 Georgia,serif;color:rgba(143,211,244,.09)}
#wsi1 .wsi-storm{position:absolute;left:0;right:0;top:0;height:4px;background:rgba(143,211,244,.08)}
#wsi1 .wsi-storm i{display:block;height:100%;transform-origin:left center;background:linear-gradient(90deg,#2a6fa8,#8fd3f4 70%,#fff);box-shadow:0 0 16px #8fd3f4}
#wsi1.wsi-late .wsi-storm i{background:linear-gradient(90deg,#8a2d2a,#e0605a 70%,#ffd0c8);box-shadow:0 0 16px #e0605a}
#wsi1 .wsi-clock{position:absolute;right:16px;top:12px;font:700 22px/1 'Cinzel',Georgia,serif;color:rgba(143,211,244,.7);font-variant-numeric:tabular-nums}
#wsi1.wsi-late .wsi-clock{color:var(--wsi-red);animation:wsi-pulse .5s ease-in-out infinite}
#wsi1 blockquote{margin:0;border:0;padding:0;background:none;font:italic 400 clamp(21px,4.4cqi,30px)/1.38 Georgia,'Times New Roman',serif;color:#f4f6fa;text-wrap:balance;quotes:none}
#wsi1 blockquote span{display:inline-block;opacity:0;transform:translateY(8px);filter:blur(4px);animation:wsi-ink .38s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--w) * 22ms)}
@keyframes wsi-ink{to{opacity:1;transform:none;filter:none}}
#wsi1 figcaption{margin-top:16px;min-height:22px;font:700 15px/1.4 'Cinzel',Georgia,serif;color:var(--wsi-gold);letter-spacing:.03em;opacity:0;transition:opacity .25s}
#wsi1 figcaption span{font:400 14px 'Lato',system-ui,sans-serif;color:#9aa5b5;letter-spacing:0}
#wsi1 .wsi-timeout{color:var(--wsi-red)}
#wsi1.wsi-ok figcaption,#wsi1.wsi-ko figcaption{opacity:1}
#wsi1.wsi-ok .wsi-clock,#wsi1.wsi-ko .wsi-clock{opacity:0}
#wsi1.wsi-ok .wsi-quote{border-color:rgba(143,211,244,.45);box-shadow:0 0 50px rgba(143,211,244,.18) inset}
#wsi1.wsi-ko .wsi-quote{border-color:rgba(224,96,90,.4);animation:wsi-shake .35s}
@keyframes wsi-shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* four faces */
#wsi1 .wsi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:18px 22px 26px}
#wsi1 .wsi-card{appearance:none;position:relative;padding:0;border:0;border-radius:14px;background:#0c1526;cursor:pointer;overflow:hidden;color:inherit;text-align:center;box-shadow:0 0 0 1px #1f3150,0 12px 30px rgba(0,0,0,.4);transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s,filter .3s,opacity .3s;animation:wsi-deal .42s cubic-bezier(.2,.7,.2,1) backwards}
#wsi1 .wsi-card:nth-child(2){animation-delay:.05s}#wsi1 .wsi-card:nth-child(3){animation-delay:.1s}#wsi1 .wsi-card:nth-child(4){animation-delay:.15s}
@keyframes wsi-deal{from{opacity:0;transform:translateY(18px) scale(.96)}}
#wsi1 .wsi-card:not(:disabled):hover{transform:translateY(-5px);box-shadow:0 0 0 1px var(--wsi-gold2),0 18px 40px rgba(0,0,0,.5),0 0 30px rgba(201,168,76,.18)}
#wsi1 .wsi-face{display:block;aspect-ratio:3/4;overflow:hidden}
#wsi1 .wsi-face img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block;transition:transform .5s}
#wsi1 .wsi-card:not(:disabled):hover .wsi-face img{transform:scale(1.06)}
#wsi1 .wsi-name{position:absolute;left:0;right:0;bottom:0;padding:26px 6px 10px;background:linear-gradient(180deg,rgba(3,6,15,0),rgba(3,6,15,.92) 60%);font:700 clamp(12px,2.6cqi,16px)/1 'Cinzel',Georgia,serif;letter-spacing:.06em;color:#fff}
#wsi1 .wsi-card.right{box-shadow:0 0 0 2px var(--wsi-storm),0 0 40px rgba(143,211,244,.55);transform:translateY(-6px) scale(1.03);z-index:2}
#wsi1 .wsi-card.right::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 50% 30%,rgba(191,233,255,.35),transparent 70%);mix-blend-mode:screen;animation:wsi-flash .8s ease-out}
#wsi1 .wsi-card.wrong{box-shadow:0 0 0 2px var(--wsi-red);filter:grayscale(.9) brightness(.55)}
#wsi1 .wsi-card.wrong::before{content:"";position:absolute;z-index:3;left:-10%;right:-10%;top:50%;height:3px;background:var(--wsi-red);transform:rotate(-52deg);box-shadow:0 0 12px var(--wsi-red)}
#wsi1 .wsi-card.out{opacity:.32;filter:grayscale(.7)}
#wsi1 .wsi-card:disabled{cursor:default}
@keyframes wsi-flash{from{opacity:1}to{opacity:0}}
#wsi1 .wsi-plus{position:absolute;z-index:4;left:50%;top:38%;transform:translateX(-50%);font:700 28px/1 'Cinzel',Georgia,serif;color:#fff;text-shadow:0 0 18px var(--wsi-storm),0 2px 0 #000;animation:wsi-rise 1.2s ease-out forwards}
@keyframes wsi-rise{from{opacity:0;transform:translate(-50%,10px)}20%{opacity:1}to{opacity:0;transform:translate(-50%,-46px)}}

/* end + gate */
#wsi1 .wsi-tally{text-align:center;padding:44px 24px 10px}
#wsi1 .wsi-big{font-family:'Cinzel',Georgia,serif;margin:10px 0 2px;line-height:1}
#wsi1 .wsi-big b{font-size:clamp(96px,24cqi,150px);color:var(--wsi-gold);text-shadow:0 0 50px rgba(232,201,106,.35)}
#wsi1 .wsi-big span{font-size:clamp(30px,7cqi,46px);color:var(--wsi-mute);margin-left:6px}
#wsi1 .wsi-sub{color:#9aa5b5;font-size:14px}
#wsi1 .wsi-rank{font:700 clamp(22px,5cqi,30px)/1.15 'Cinzel Decorative','Cinzel',Georgia,serif;color:#fff;margin-top:16px}
#wsi1 .wsi-gate{max-width:520px;margin:18px auto 0;padding:24px 24px 34px;text-align:center}
#wsi1 .wsi-gate p:first-child{color:#c0cce0;font-size:16px;line-height:1.5;margin:0 0 18px}
#wsi1 .wsi-field{display:flex;gap:8px;padding:6px;border-radius:999px;background:#0c1526;border:1px solid #24344f}
#wsi1 .wsi-field input{flex:1;min-width:0;border:0;background:transparent;color:#fff;font-size:16px;padding:0 14px;outline:0}
#wsi1 .wsi-field:focus-within{border-color:var(--wsi-storm);box-shadow:0 0 0 3px rgba(143,211,244,.15)}
#wsi1 .wsi-err{color:var(--wsi-red);font-size:13px;margin-top:10px}

/* result */
#wsi1 .wsi-card-res{text-align:center;padding:30px 24px 10px}
#wsi1 .wsi-rank-big{font-size:clamp(30px,7.5cqi,46px);margin:10px 0 10px;text-shadow:0 0 34px rgba(143,211,244,.35)}
#wsi1 .wsi-card-res p{color:#c0cce0;max-width:520px;margin:0 auto 18px;line-height:1.55}
#wsi1 .wsi-row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:10px}
#wsi1 .wsi-share a{font-size:13px;color:#9aa5b5;text-decoration:none;padding:8px 12px;border-radius:999px;border:1px solid #1f3150}
#wsi1 .wsi-share a:hover{color:#fff;border-color:#3d5a85}
#wsi1 .wsi-spot{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:center;margin:26px 22px 0;padding:18px;border-radius:16px;background:linear-gradient(120deg,rgba(201,168,76,.10),rgba(12,21,38,.6));border:1px solid rgba(201,168,76,.28)}
#wsi1 .wsi-spot img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 18%;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.5)}
#wsi1 .wsi-spotname{font:700 30px/1.1 'Cinzel',Georgia,serif;color:#fff;margin:6px 0 6px}
#wsi1 .wsi-spot p{color:#c0cce0;margin:0 0 14px;line-height:1.5}
#wsi1 .wsi-keyh{font:700 13px 'Cinzel',Georgia,serif;letter-spacing:.24em;text-transform:uppercase;color:var(--wsi-storm);margin:34px 22px 12px}
#wsi1 .wsi-key{list-style:none;margin:0 22px;padding:0;display:grid;gap:8px}
#wsi1 .wsi-key li{display:grid;grid-template-columns:44px 1fr 22px;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(12,21,38,.75);border:1px solid #16243b}
#wsi1 .wsi-key li img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 15%}
#wsi1 .wsi-key q{display:block;font:italic 15px/1.4 Georgia,serif;color:#eaecf0;quotes:"\201C" "\201D"}
#wsi1 .wsi-key small{display:block;margin-top:4px;font-size:12px;color:#7a8899}
#wsi1 .wsi-key small b{color:var(--wsi-gold)}
#wsi1 .wsi-mark{font-size:18px;text-align:center}
#wsi1 .wsi-key li.ok .wsi-mark{color:var(--wsi-storm)}
#wsi1 .wsi-key li.ko{border-color:rgba(224,96,90,.25)}
#wsi1 .wsi-key li.ko .wsi-mark{color:var(--wsi-red)}
#wsi1.wsi-res{padding-bottom:26px}
#wsi1.wsi-res>.wsi-fine{margin:16px 22px 0}

@container (max-width:560px){
  #wsi1 .wsi-grid{grid-template-columns:repeat(2,1fr);gap:10px;padding:14px 14px 20px}
  #wsi1 .wsi-face{aspect-ratio:4/3.3}
  #wsi1 .wsi-quote{margin:14px 14px 0;padding:30px 18px 20px;min-height:180px}
  #wsi1 .wsi-hud{padding:16px 14px 0}
  #wsi1 .wsi-wall{grid-template-columns:repeat(4,1fr);grid-auto-rows:33.34%}
  #wsi1 .wsi-introbody{padding:90px 18px 44px}
  #wsi1 .wsi-spot{grid-template-columns:96px 1fr;margin:22px 14px 0;gap:14px}
  #wsi1 .wsi-spotname{font-size:24px}
  #wsi1 .wsi-key{margin:0 14px}
  #wsi1 .wsi-keyh{margin:30px 14px 10px}
  #wsi1 .wsi-field{flex-direction:column;border-radius:16px;padding:8px}
  #wsi1 .wsi-field input{padding:12px 10px}
}
@media (prefers-reduced-motion:reduce){
  #wsi1 *,#wsi1 *::before,#wsi1 *::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
}
/* the theme sync crawler only copies images it can see in CSS */
#wsi1 .wsi-preload{background:url(../img/quotes/q_kaladin.jpg),url(../img/quotes/q_dalinar.jpg),url(../img/quotes/q_shallan.jpg),url(../img/quotes/q_hoid.jpg),url(../img/quotes/q_jasnah.jpg),url(../img/quotes/q_lift.jpg),url(../img/quotes/q_teft.jpg),url(../img/quotes/q_adolin.jpg),url(../img/quotes/q_lopen.jpg),url(../img/quotes/q_pattern.jpg),url(../img/quotes/q_venli.jpg),url(../img/quotes/q_navani.jpg)}