@font-face{font-family:'Fraunces';font-weight:800;font-display:swap;src:url(fonts/fraunces-800.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-weight:600;font-display:swap;src:url(fonts/nunito-600.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-weight:700;font-display:swap;src:url(fonts/nunito-700.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-weight:800;font-display:swap;src:url(fonts/nunito-800.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-weight:900;font-display:swap;src:url(fonts/nunito-900.woff2) format('woff2')}
@font-face{font-family:'Frank Ruhl Libre';font-weight:700;font-display:swap;src:url(fonts/frank-ruhl-700.woff2) format('woff2')}
:root{
  --navy-950:#060f2b;--navy-900:#081536;--navy-800:#0c1d4d;--navy-700:#13296b;--blue:#2f5fd0;--blue-ink:#1f4fb8;
  --gold:#f4c95d;--gold-hi:#ffe7a0;--gold-deep:#b8860b;--cream:#fdf8ec;--paper:#fffdf7;--ink:#0f2257;--text:#26304f;--muted:#5d6788;
  --choc:#4a2a16;--choc-2:#6b3e22;--choc-3:#8a5634;--line:#eadcb8;
  --display:'Fraunces',Georgia,'Times New Roman',serif;--ui:'Nunito',ui-rounded,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --hebrew:'Frank Ruhl Libre','Times New Roman',serif;--s:110px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--ui);color:var(--cream);-webkit-font-smoothing:antialiased;
  background-color:var(--navy-900);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23f4c95d' stroke-opacity='.07' stroke-width='1.2'%3E%3Cpath d='M42 30l9 15.6H33z'/%3E%3Cpath d='M42 55.2l-9-15.6h18z'/%3E%3C/g%3E%3C/svg%3E"),radial-gradient(120% 60% at 50% -10%,#20409a 0%,var(--navy-800) 45%,var(--navy-900) 100%);
  background-attachment:fixed}
a{color:inherit}
img,svg{max-width:100%}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--ink);padding:8px 14px;border-radius:8px;z-index:99;font-weight:800}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* header */
.site-header{position:sticky;top:0;z-index:20;background:linear-gradient(to bottom,rgba(8,21,54,.95),rgba(8,21,54,.85));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid rgba(244,201,93,.16)}
.hbar{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:8px 14px}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:36px;width:auto;display:block}
.nav{display:flex;gap:2px;margin-left:auto;align-items:center}
.nav a{text-decoration:none;font-weight:800;font-size:15px;padding:9px 11px;border-radius:999px;color:#dfe6ff;white-space:nowrap}
.nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav a[aria-current="page"]{color:var(--gold-hi)}
.play-pill{flex:none;display:inline-flex;align-items:center;gap:7px;text-decoration:none;font-family:var(--display);font-weight:800;font-size:16px;color:var(--ink);padding:9px 16px;border-radius:999px;background:linear-gradient(180deg,#ffe9a8,#f4c95d 50%,#e0aa36);box-shadow:0 3px 0 #a87412,0 6px 14px rgba(0,0,0,.3)}
.play-pill:active{transform:translateY(2px);box-shadow:0 1px 0 #a87412}
.play-pill svg{width:18px;height:18px}
.subnav{display:none}
@media (max-width:820px){
  .nav{display:none}
  .hbar{justify-content:space-between}
  .subnav{display:flex;gap:4px;overflow-x:auto;padding:0 10px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .subnav::-webkit-scrollbar{display:none}
  .subnav a{flex:none;text-decoration:none;font-weight:800;font-size:14px;padding:7px 12px;border-radius:999px;color:#dfe6ff;background:rgba(255,255,255,.07);border:1px solid rgba(244,201,93,.2)}
  .subnav a[aria-current="page"]{color:var(--ink);background:var(--gold);border-color:var(--gold)}
}

/* layout */
.wrap{max-width:1080px;margin:0 auto;padding:18px 14px 40px}
.crumbs{font-size:14px;font-weight:700;color:#aebbe6;margin:4px 4px 12px;display:flex;flex-wrap:wrap;gap:6px}
.crumbs a{color:#dfe6ff;text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span[aria-hidden]{opacity:.5}
.layout{display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:980px){.layout{grid-template-columns:minmax(0,1fr) 300px;align-items:start}.side{position:sticky;top:76px}}

/* hero */
.hero{display:grid;grid-template-columns:1fr;gap:18px;align-items:center;padding:20px 22px;border-radius:22px;margin-bottom:16px;
  background:radial-gradient(120% 140% at 85% 20%,rgba(244,201,93,.18),transparent 55%),linear-gradient(160deg,#18348a,#0e2160);border:1px solid rgba(244,201,93,.25);box-shadow:0 14px 34px rgba(0,0,0,.3)}
.hero.has-art{grid-template-columns:1fr auto}
.kicker{font-size:13px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.hero h1{margin:6px 0 8px;font-family:var(--display);font-weight:800;font-size:clamp(30px,7vw,46px);line-height:1.08;color:#fff}
.hero .lede{margin:0;font-size:clamp(17px,4.2vw,19px);line-height:1.5;color:#dbe3ff;max-width:36em}
.hero-art{display:grid;place-items:center;padding:0 10px 0 0}
.hero-art .dz{--s:76px}
@media (max-width:560px){.hero{padding:16px 16px 18px}.hero .lede{display:none}.hero.has-art{gap:10px}.hero-art{padding:0}.hero-art .dz{--s:38px}.hero h1{margin-bottom:0}}

/* article */
.prose{background:var(--paper);color:var(--text);border-radius:22px;padding:clamp(20px,5vw,40px);box-shadow:0 14px 36px rgba(0,0,0,.28);font-size:18px;line-height:1.68}
.prose>*:first-child{margin-top:0}
.prose h2{font-family:var(--display);font-weight:800;color:var(--ink);font-size:clamp(23px,5.4vw,29px);line-height:1.2;margin:1.7em 0 .5em}
.prose h3{font-family:var(--display);font-weight:800;color:var(--choc-2);font-size:21px;line-height:1.25;margin:1.4em 0 .4em}
.prose p{margin:0 0 1em}
.prose a{color:var(--blue-ink);font-weight:700;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:rgba(31,79,184,.35)}
.prose a:hover{text-decoration-color:currentColor}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.1em}
.prose li{margin:.3em 0}
.prose li::marker{color:var(--gold-deep);font-weight:900}
.prose strong{color:var(--ink)}
.prose blockquote{margin:1.2em 0;padding:14px 18px;border-left:5px solid var(--gold);background:#fbf3dd;border-radius:0 14px 14px 0;color:var(--choc)}
.prose blockquote p:last-child{margin:0}
.prose hr{border:0;height:1px;background:var(--line);margin:2em 0}
.prose table{width:100%;border-collapse:separate;border-spacing:0;margin:1em 0 1.4em;font-size:16px;line-height:1.4;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.prose th{background:var(--ink);color:var(--cream);text-align:left;font-weight:800;padding:10px 12px}
.prose td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:top}
.prose tr:nth-child(even) td{background:#fbf6e7}
.table-scroll{overflow-x:auto;margin:0 -4px;padding:0 4px}
.he{font-family:var(--hebrew);font-weight:700;font-size:1.2em;color:var(--ink);unicode-bidi:isolate}
.answer{font-size:clamp(19px,4.6vw,21px);line-height:1.55;color:var(--ink);font-weight:700;padding:16px 18px;border-radius:16px;background:linear-gradient(160deg,#fff4d1,#fbe9b8);border:1px solid #efd9a0;margin:0 0 1.4em}
.answer p{margin:0}
.note{font-size:15px;color:var(--muted)}
.updated{font-size:14px;color:var(--muted);margin-top:2em}

/* letter tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:1em 0 1.6em}
.tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:14px 10px;border-radius:16px;text-decoration:none!important;color:var(--ink)!important;background:#fff;border:1px solid var(--line);box-shadow:0 2px 0 var(--line);transition:transform .12s}
.tile:hover{transform:translateY(-2px)}
.tile .glyph{width:64px;height:64px;border-radius:14px;display:grid;place-items:center;margin-bottom:4px}
.tile .glyph svg{width:46px;height:46px}
.tile b{font-family:var(--display);font-size:19px}
.tile .rule{font-size:14px;font-weight:700;color:var(--muted);line-height:1.3}
.tile b .he{color:var(--ink)}
.g-nun{background:#5c6b94;color:#fff}.g-gimel{background:linear-gradient(160deg,#f4c95d,#c9962c);color:var(--ink)}.g-hey{background:#1f7a70;color:#fff}.g-shin{background:#6b3e22;color:#ffe7a0}.g-peh{background:#1f4fb8;color:#fff}
.bigletter{float:right;margin:0 0 10px 18px;width:120px;height:120px;border-radius:24px;display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.bigletter svg{width:86px;height:86px}
@media (max-width:480px){.bigletter{width:92px;height:92px;margin-left:12px}.bigletter svg{width:66px;height:66px}}

/* CTA */
.cta{display:flex;align-items:center;gap:18px;margin:1.6em 0;padding:18px 20px;border-radius:20px;color:var(--cream);text-decoration:none!important;
  background:radial-gradient(120% 140% at 0% 0%,rgba(244,201,93,.22),transparent 50%),linear-gradient(160deg,#1b3a92,#0c1d4d);border:1px solid rgba(244,201,93,.35);box-shadow:0 10px 24px rgba(12,29,77,.3)}
.cta .dz{--s:40px;flex:none;margin:0 6px}
.cta b{display:block;font-family:var(--display);font-weight:800;font-size:22px;color:#fff;line-height:1.15}
.cta span{display:block;font-size:15px;font-weight:700;color:#cfd9ff;margin-top:3px;line-height:1.35}
.cta .go{margin-left:auto;flex:none;font-family:var(--display);font-weight:800;font-size:17px;color:var(--ink);padding:11px 18px;border-radius:999px;background:linear-gradient(180deg,#ffe9a8,#f4c95d 50%,#e0aa36);box-shadow:0 3px 0 #a87412}
.cta:hover .go{filter:brightness(1.05)}
@media (max-width:560px){.cta{flex-wrap:wrap}.cta .go{margin-left:0;width:100%;text-align:center}}

/* side */
.side .card{border-radius:20px;padding:18px;background:rgba(255,255,255,.06);border:1px solid rgba(244,201,93,.22);margin-bottom:16px}
.side h2{margin:0 0 10px;font-family:var(--display);font-weight:800;font-size:19px;color:var(--gold-hi)}
.side ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.side li a{display:block;text-decoration:none;font-weight:700;font-size:15.5px;color:#dfe6ff;padding:7px 8px;border-radius:10px;line-height:1.3}
.side li a:hover{background:rgba(255,255,255,.08)}
.side li a[aria-current="page"]{color:var(--gold-hi);background:rgba(244,201,93,.1)}
.side .play{text-align:center}
.side .play .dz{--s:54px;margin:4px auto 10px}
.side .play p{margin:0 0 12px;color:#cfd9ff;font-weight:700;font-size:15px;line-height:1.4}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-family:var(--display);font-weight:800;font-size:18px;color:var(--ink);padding:12px 22px;border-radius:999px;background:linear-gradient(180deg,#ffe9a8,#f4c95d 50%,#e0aa36);box-shadow:0 4px 0 #a87412,0 8px 18px rgba(0,0,0,.25)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #a87412}

/* related */
.related{margin-top:22px}
.related h2{font-family:var(--display);font-weight:800;font-size:24px;color:var(--gold-hi);margin:0 4px 12px}
.rgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.rcard{display:block;text-decoration:none;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(244,201,93,.2);transition:background .15s}
.rcard:hover{background:rgba(255,255,255,.11)}
.rcard b{display:block;font-family:var(--display);font-weight:800;font-size:18px;color:#fff;line-height:1.25}
.rcard span{display:block;font-size:14.5px;font-weight:600;color:#c3cdee;margin-top:4px;line-height:1.4}

/* guide hub */
.hub-section{margin:0 0 22px}
.hub-section h2{font-family:var(--display);font-weight:800;font-size:24px;color:var(--gold-hi);margin:0 4px 10px}

/* faq */
.faq-item{border:1px solid var(--line);border-radius:16px;background:#fff;margin:0 0 10px;overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;padding:14px 46px 14px 16px;font-family:var(--display);font-weight:800;font-size:19px;color:var(--ink);position:relative;line-height:1.3}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';position:absolute;right:16px;top:50%;transform:translateY(-50%);font-family:var(--ui);font-weight:900;font-size:24px;color:var(--gold-deep)}
.faq-item[open] summary::after{content:'–'}
.faq-item .faq-a{padding:0 16px 14px;font-size:17px}
.faq-item .faq-a p{margin:0 0 .6em}

/* simulator */
.sim{margin:1.4em 0;padding:18px;border-radius:18px;background:#0e2160;color:var(--cream);font-size:16px;line-height:1.5}
.sim h3{margin:0 0 6px!important;color:var(--gold-hi)!important;font-size:21px}
.sim p{margin:0 0 12px;color:#cfd9ff}
.sim .controls{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-bottom:14px}
.sim label{display:grid;gap:4px;font-size:13px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#aebbe6}
.sim select{font:inherit;font-weight:800;font-size:16px;padding:9px 10px;border-radius:10px;border:0;background:#fff;color:var(--ink)}
.sim button{font-family:var(--display);font-weight:800;font-size:17px;border:0;cursor:pointer;color:var(--ink);padding:10px 18px;border-radius:999px;background:linear-gradient(180deg,#ffe9a8,#f4c95d 50%,#e0aa36);box-shadow:0 3px 0 #a87412}
.sim .out{display:grid;gap:12px}
.sim .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.sim .stat{background:rgba(255,255,255,.07);border-radius:12px;padding:10px 12px}
.sim .stat b{display:block;font-family:var(--display);font-size:26px;color:#fff}
.sim .stat span{font-size:13px;font-weight:800;color:#aebbe6}
.sim .bars{display:grid;gap:6px}
.sim .bar{display:grid;grid-template-columns:96px 1fr 56px;gap:8px;align-items:center;font-size:14px;font-weight:800}
.sim .bar i{display:block;height:16px;border-radius:8px;background:linear-gradient(90deg,#f4c95d,#ffe7a0);min-width:2px}
.sim .bar em{font-style:normal;text-align:right;color:var(--gold-hi)}

/* printable card */
.print-card{display:flex;gap:16px;align-items:center;padding:16px;border-radius:18px;background:#fbf3dd;border:1px solid #efd9a0;margin:1.2em 0}
.print-card .ico{flex:none;width:56px;height:56px;border-radius:14px;background:var(--ink);color:var(--gold);display:grid;place-items:center}
.print-card .ico svg{width:30px;height:30px}
.print-card b{display:block;font-family:var(--display);font-size:19px;color:var(--ink)}
.print-card span{display:block;font-size:15px;color:var(--muted);line-height:1.4}
.print-card a.btn{margin-left:auto;font-size:16px;padding:10px 18px}
@media (max-width:560px){.print-card{flex-wrap:wrap}.print-card a.btn{margin-left:0;width:100%}}

/* footer */
.site-footer{margin-top:30px;border-top:1px solid rgba(244,201,93,.16);background:rgba(6,15,43,.6)}
.fwrap{max-width:1080px;margin:0 auto;padding:28px 14px 34px;display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.fwrap h2{font-family:var(--display);font-weight:800;font-size:16px;color:var(--gold-hi);margin:0 0 8px}
.fwrap ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.fwrap a{color:#c3cdee;text-decoration:none;font-weight:700;font-size:14.5px}
.fwrap a:hover{color:#fff;text-decoration:underline}
.fbrand img{height:34px;width:auto}
.fbrand p{color:#97a5d4;font-size:14px;line-height:1.5;margin:8px 0 0}
.copy{text-align:center;color:#7d8bbb;font-size:13px;padding:0 14px 26px}

/* dreidel static sway */
.dz.sway .dz-spin{animation:sway 4.5s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotateX(-10deg) rotateY(calc(var(--a) - 24deg))}to{transform:rotateX(-10deg) rotateY(calc(var(--a) + 24deg))}}
@media (prefers-reduced-motion:reduce){.dz.sway .dz-spin{animation:none}}
@media print{.site-header,.site-footer,.side,.cta,.related{display:none}body{background:#fff}.prose{box-shadow:none}}

/* contact form */
.contact{display:grid;gap:14px;margin:1.4em 0;padding:20px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.field{display:grid;gap:6px}
.field label{font-weight:800;font-size:15px;color:var(--ink)}
.field input,.field textarea{font:inherit;font-size:17px;color:var(--ink);background:#fffdf7;border:2px solid #e2d3ae;border-radius:12px;padding:11px 13px;width:100%}
.field textarea{resize:vertical;min-height:150px;line-height:1.5}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#c0392b}
.contact .btn{justify-self:start;border:0;cursor:pointer}
.contact .btn[disabled]{opacity:.6;cursor:default}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{margin:0;padding:10px 14px;border-radius:12px;background:#fdecea;color:#8a1f12;font-weight:700;font-size:15px}
.sent{display:grid;gap:8px;justify-items:start;margin:1.4em 0;padding:22px;border-radius:18px;background:linear-gradient(160deg,#fff4d1,#fbe9b8);border:1px solid #efd9a0}
.sent b{font-family:var(--display);font-size:24px;color:var(--ink)}
.sent span{font-size:17px;color:var(--text)}
.sent .btn{margin-top:6px}
[hidden]{display:none!important}
.prose a.btn{color:var(--ink);text-decoration:none}

/* ---------- 3D dreidel ---------- */
.dz{position:relative;width:var(--s);height:calc(var(--s)*2.2);perspective:calc(var(--s)*10);perspective-origin:50% -60%}
.dz-spin{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 100%;transform:rotateX(-8deg) rotateY(-30deg)}
.dz-face>.sh,.dz-tip i>.sh{position:absolute;inset:0;display:block;background:#000;opacity:0;pointer-events:none;border-radius:inherit;backface-visibility:hidden;-webkit-backface-visibility:hidden}
#stage .dz-spin,.dz.live .dz-spin{will-change:transform}
#stage .dz .sh{will-change:opacity}
.dz-handle{position:absolute;left:50%;top:0;width:0;height:calc(var(--s)*.5);transform-style:preserve-3d}
.dz-handle i{position:absolute;top:0;height:100%;width:calc(var(--s)*.09);left:calc(var(--s)*-.045);
  transform:rotateY(calc(var(--i)*36deg)) translateZ(calc(var(--s)*.13));backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:var(--handle);border-radius:calc(var(--s)*.02) calc(var(--s)*.02) 0 0}
.dz-handle i::after,.dz-face::after,.dz-tip i::after{content:'';position:absolute;inset:0;background:#000;opacity:var(--sh,0);pointer-events:none}
.dz-handle b{position:absolute;width:calc(var(--s)*.27);height:calc(var(--s)*.27);left:calc(var(--s)*-.135);top:calc(var(--s)*-.135);border-radius:50%;transform:rotateX(90deg);background:var(--handle-top)}
.dz-body{position:absolute;left:0;top:calc(var(--s)*.5);width:var(--s);height:calc(var(--s)*1.1);transform-style:preserve-3d}
.dz-face{position:absolute;inset:0;display:grid;place-items:center;
  transform:rotateY(calc(var(--i)*90deg)) translateZ(calc(var(--s)*.5));backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:var(--fc);box-shadow:inset 0 0 0 calc(var(--s)*.035) var(--edge);border-radius:calc(var(--s)*.03)}
.dz-face::before{content:'';position:absolute;inset:9%;border:calc(var(--s)*.012) solid var(--edge);border-radius:calc(var(--s)*.05);opacity:.55}
.dz-face svg{position:relative;width:68%;height:68%;color:var(--letter);filter:drop-shadow(0 calc(var(--s)*.012) 0 var(--letter-shadow,rgba(0,0,0,.35)))}
.dz-face:nth-child(1){--fc:var(--face0,var(--face))}
.dz-face:nth-child(2){--fc:var(--face1,var(--face))}
.dz-face:nth-child(3){--fc:var(--face2,var(--face))}
.dz-face:nth-child(4){--fc:var(--face3,var(--face))}
.dz-top{position:absolute;left:0;top:calc(var(--s)*.05);width:var(--s);height:var(--s);transform:rotateX(90deg) translateZ(calc(var(--s)*.55));
  background:radial-gradient(circle, var(--handle-ring,rgba(0,0,0,.25)) 0 18%, transparent 19%), var(--top);box-shadow:inset 0 0 0 calc(var(--s)*.035) var(--edge)}
.dz-tip{position:absolute;left:0;top:calc(var(--s)*1.6);width:var(--s);height:0;transform-style:preserve-3d}
.dz-tip i{position:absolute;left:0;top:0;width:var(--s);height:calc(var(--s)*.781);transform-origin:50% 0;
  transform:rotateY(calc(var(--i)*90deg)) translateZ(calc(var(--s)*.5)) rotateX(-39.8deg);
  clip-path:polygon(0 0,100% 0,50% 100%);-webkit-clip-path:polygon(0 0,100% 0,50% 100%);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--tc)}
.dz-tip i:nth-child(1){--tc:var(--tip0,var(--tip))}
.dz-tip i:nth-child(2){--tc:var(--tip1,var(--tip))}
.dz-tip i:nth-child(3){--tc:var(--tip2,var(--tip))}
.dz-tip i:nth-child(4){--tc:var(--tip3,var(--tip))}
.dz-tip i::before{content:'';position:absolute;left:0;right:0;top:0;height:calc(var(--s)*.035);background:var(--edge)}
.dz.mini{--s:30px}
.dz.live .dz-spin{animation:idleSpin 5s linear infinite}
@keyframes idleSpin{from{transform:rotateX(-10deg) rotateY(0deg)}to{transform:rotateX(-10deg) rotateY(360deg)}}

/* designs */
.dz[data-design="sapphire"]{--face:linear-gradient(165deg,#4677ea 0%,#2550c0 55%,#1a3c96 100%);--edge:#f4c95d;--letter:#ffe7a0;--top:#4f80ea;--tip:linear-gradient(#2550c0,#173483);--handle:linear-gradient(90deg,#c9962c,#ffe7a0 45%,#e0aa36);--handle-top:radial-gradient(circle at 40% 35%,#fff3c8,#e0aa36 70%)}
.dz[data-design="emerald"]{--face:linear-gradient(165deg,#36b57a 0%,#1d8452 50%,#0f5a37 100%);--edge:#f4c95d;--letter:#ffe7a0;--letter-shadow:rgba(4,40,22,.6);--top:#3fbf82;--tip:linear-gradient(#1d8452,#0b3f26);--handle:linear-gradient(90deg,#c9962c,#ffe7a0 45%,#e0aa36);--handle-top:radial-gradient(circle at 40% 35%,#fff3c8,#e0aa36 70%)}
.dz[data-design="aurora"] .dz-face,.dz[data-design="aurora"] .dz-top{background-size:300% 300%!important;animation:auroraShift 6s ease-in-out infinite alternate}
.dz[data-design="aurora"]{--face:linear-gradient(125deg,#071a3a 0%,#0f5c5a 22%,#38d39f 40%,#7b5cf0 60%,#14306e 80%,#071a3a 100%);--edge:#b9fff0;--letter:#ffffff;--letter-shadow:rgba(56,211,159,.95);--top:linear-gradient(125deg,#0f5c5a,#38d39f,#7b5cf0,#0f5c5a);--tip:linear-gradient(#14306e,#050d24);--handle:linear-gradient(90deg,#7d879a,#ffffff 45%,#aab3c1);--handle-top:radial-gradient(circle at 40% 35%,#fff,#9aa4b4 75%);--handle-ring:rgba(185,255,240,.4)}
@keyframes auroraShift{from{background-position:0% 30%}to{background-position:100% 70%}}
.dz[data-design="golden"] .dz-face,.dz[data-design="golden"] .dz-tip i{background-size:100% 100%,260% 100%!important;animation:goldGlint 3.4s ease-in-out infinite}
.dz[data-design="golden"]{--face:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 100%),linear-gradient(100deg,#8a5d0f 0%,#c8961e 12%,#ffe9a3 22%,#fffaf0 26%,#f2c14e 32%,#a8741a 44%,#7a5410 52%,#d9a93a 62%,#fff1bd 70%,#fffdf5 73%,#e7b443 80%,#9a6814 92%,#7a5410 100%);--edge:#fff1b8;--letter:#5a3a05;--letter-shadow:rgba(255,246,214,.9);--top:conic-gradient(from 20deg,#fff4c9,#c8961e,#fffaf0,#a8741a,#ffe9a3,#8a5d0f,#fff4c9);--tip:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,0)),linear-gradient(100deg,#7a5410,#e7b443 30%,#fff6d6 40%,#c8961e 55%,#7a5410 80%);--handle:linear-gradient(90deg,#8a5d0f,#fff6d6 40%,#f2c14e 60%,#a8741a);--handle-top:radial-gradient(circle at 40% 35%,#fffaf0,#e0aa36 60%,#8a5d0f);--handle-ring:rgba(90,58,5,.4)}
.dz[data-design="golden"] .dz-face svg{filter:drop-shadow(0 calc(var(--s)*-.008) 0 rgba(90,58,5,.55)) drop-shadow(0 calc(var(--s)*.012) 0 rgba(255,246,214,.95))}
@keyframes goldGlint{0%,100%{background-position:0 0,0% 0}50%{background-position:0 0,100% 0}}
.dz[data-design="mosaic"]{--face:radial-gradient(circle,#f4c95d 0 7%,transparent 8%) 0 0/25% 25%,repeating-conic-gradient(from 45deg,#1c6ea4 0 25%,#eef6fa 0 50%) 0 0/25% 25%,#1c6ea4;--edge:#0d3f66;--letter:#0d2f5c;--letter-shadow:rgba(255,255,255,.95);--top:repeating-conic-gradient(from 45deg,#1c6ea4 0 25%,#eef6fa 0 50%) 0 0/25% 25%;--tip:linear-gradient(#1c6ea4,#0d3f66);--handle:linear-gradient(90deg,#c9962c,#ffe7a0 45%,#e0aa36);--handle-top:radial-gradient(circle at 40% 35%,#fff3c8,#e0aa36 70%)}
.dz[data-design="mosaic"] .dz-face svg{background:radial-gradient(closest-side,rgba(255,255,255,.96) 72%,rgba(255,255,255,0));border-radius:50%}
.dz[data-design="neon"]{--face:radial-gradient(circle at 50% 120%,rgba(255,46,170,.35),transparent 60%),linear-gradient(165deg,#15102e,#07051a);--edge:#ff2eaa;--letter:#5ff6ff;--letter-shadow:rgba(95,246,255,.9);--top:#15102e;--tip:linear-gradient(#15102e,#05030f);--handle:linear-gradient(90deg,#ff2eaa,#ffc2ea 45%,#ff2eaa);--handle-top:radial-gradient(circle,#ffd6f0,#ff2eaa 75%);--handle-ring:rgba(255,46,170,.6)}
.dz[data-design="neon"] .dz-face{box-shadow:inset 0 0 0 calc(var(--s)*.035) #ff2eaa,inset 0 0 calc(var(--s)*.18) rgba(255,46,170,.55)}
.dz[data-design="neon"] .dz-face svg{filter:drop-shadow(0 0 calc(var(--s)*.03) #5ff6ff) drop-shadow(0 0 calc(var(--s)*.08) rgba(95,246,255,.7));animation:neonBuzz 3.2s infinite}
@keyframes neonBuzz{0%,90%,94%,100%{opacity:1}92%{opacity:.55}}
.dz[data-design="onyx"]{--face:radial-gradient(120% 90% at 30% 15%,rgba(255,255,255,.035),transparent 60%),linear-gradient(170deg,#1b1b1e 0%,#121214 55%,#0b0b0d 100%);--edge:#2b2d32;--letter:#9aa0aa;--letter-shadow:rgba(0,0,0,.85);--top:radial-gradient(circle at 40% 35%,#1f1f22,#0e0e10);--tip:linear-gradient(#141416,#060607);--handle:linear-gradient(90deg,#2a2c31,#8d939d 42%,#c9ced6 50%,#5a5f68 62%,#2a2c31);--handle-top:radial-gradient(circle at 40% 35%,#d8dce3,#5a5f68 55%,#1c1d21);--handle-ring:rgba(140,148,160,.25)}
.dz[data-design="onyx"] .dz-face{box-shadow:inset 0 0 0 calc(var(--s)*.03) #2b2d32}
.dz[data-design="onyx"] .dz-face::before{border-color:#3a3d43;opacity:.6}
.dz[data-design="onyx"] .dz-face svg{filter:drop-shadow(0 calc(var(--s)*-.006) 0 rgba(255,255,255,.18)) drop-shadow(0 calc(var(--s)*.012) calc(var(--s)*.01) rgba(0,0,0,.9))}
.dz[data-design="diamond"]{--face:linear-gradient(115deg,rgba(255,255,255,.95) 0 14%,transparent 14.5%),linear-gradient(245deg,rgba(255,255,255,.7) 0 22%,transparent 22.5%),linear-gradient(35deg,transparent 60%,rgba(170,215,255,.85) 60.5% 76%,transparent 76.5%),linear-gradient(160deg,#f7fbff 0%,#d6ecff 30%,#a9d2f6 55%,#eaf6ff 75%,#b7dcfa 100%);--edge:#ffffff;--letter:#1a4f9c;--letter-shadow:rgba(255,255,255,.95);--top:conic-gradient(from 0deg,#ffffff,#cfe8ff,#ffffff,#a9d2f6,#ffffff,#d6ecff,#ffffff);--tip:linear-gradient(135deg,#ffffff,#b7dcfa 50%,#e9f5ff);--handle:linear-gradient(90deg,#b8c4d6,#ffffff 45%,#cfd8e6);--handle-top:radial-gradient(circle at 40% 35%,#fff,#bcd6f2 75%);--handle-ring:rgba(120,170,230,.35)}
.dz[data-design="diamond"] .dz-face::before{inset:0;border:0;opacity:1;border-radius:0;background:radial-gradient(circle at 22% 28%,#fff 0 2%,transparent 3%),radial-gradient(circle at 74% 18%,#fff 0 1.6%,transparent 2.6%),radial-gradient(circle at 80% 72%,#fff 0 2.2%,transparent 3.2%),radial-gradient(circle at 30% 80%,#fff 0 1.4%,transparent 2.4%);animation:twinkle 1.8s ease-in-out infinite alternate}
.dz[data-design="diamond"] .dz-face:nth-child(2)::before,.dz[data-design="diamond"] .dz-face:nth-child(4)::before{animation-delay:-.9s}
@keyframes twinkle{from{opacity:.15}to{opacity:1}}
.dz[data-design="gilded"]{--face:linear-gradient(160deg,#fff1bd 0%,#f2c14e 40%,#d39a2a 75%,#b17818 100%);--edge:#8a5a10;--letter:#13296b;--letter-shadow:rgba(255,255,255,.55);--top:#ffe08a;--tip:linear-gradient(#e7b240,#a46c12);--handle:linear-gradient(90deg,#0f2257,#2f5fd0 50%,#13296b);--handle-top:radial-gradient(circle at 40% 35%,#5b8cf0,#13296b 75%);--handle-ring:rgba(138,90,16,.45)}
.dz[data-design="chocolate"]{--face:linear-gradient(165deg,#8d5532 0%,#6b3e22 45%,#4a2a16 100%);--edge:#f4c95d;--letter:#f4c95d;--letter-shadow:rgba(30,12,4,.7);--top:radial-gradient(circle at 50% 50%,#8a5634,#6b3e22);--tip:linear-gradient(#6b3e22,#3b200f);--handle:linear-gradient(90deg,#c9962c,#ffe7a0 45%,#e0aa36);--handle-top:radial-gradient(circle at 40% 35%,#fff3c8,#e0aa36 70%)}
.dz[data-design="olivewood"]{--face:repeating-linear-gradient(97deg,rgba(60,30,8,.0) 0 5px,rgba(60,30,8,.13) 5px 7px,rgba(60,30,8,0) 7px 13px),radial-gradient(ellipse at 30% 60%,rgba(80,45,15,.25),transparent 40%),linear-gradient(160deg,#d8b07a,#b08251 55%,#8b6034);--edge:#5c3b1a;--letter:#3b220d;--letter-shadow:rgba(255,235,200,.45);--top:repeating-radial-gradient(circle at 50% 50%,#c49a66 0 4px,#b3864f 4px 7px);--tip:linear-gradient(#b08251,#7a5229);--handle:linear-gradient(90deg,#7a5229,#c9a06a 45%,#8b6034);--handle-top:radial-gradient(circle,#d8b07a,#8b6034 75%)}
.dz[data-design="sterling"]{--face:linear-gradient(160deg,#ffffff 0%,#d9dee7 35%,#a9b3c2 70%,#8a95a6 100%);--edge:#6b7689;--letter:#173a8f;--letter-shadow:rgba(255,255,255,.6);--top:linear-gradient(135deg,#f6f8fb,#c3cad6);--tip:linear-gradient(#bcc4d0,#7d879a);--handle:linear-gradient(90deg,#7d879a,#ffffff 45%,#aab3c1);--handle-top:radial-gradient(circle at 40% 35%,#fff,#9aa4b4 75%)}
.dz[data-design="starlight"]{--face:radial-gradient(circle at 18% 22%,#fff 0 1.2px,transparent 1.8px),radial-gradient(circle at 78% 14%,#fff 0 1px,transparent 1.6px),radial-gradient(circle at 85% 70%,#dfe8ff 0 1.3px,transparent 2px),radial-gradient(circle at 25% 85%,#fff 0 .9px,transparent 1.5px),radial-gradient(circle at 55% 92%,#c9d6ff 0 1px,transparent 1.6px),radial-gradient(circle at 10% 55%,#fff 0 .8px,transparent 1.4px),linear-gradient(170deg,#1d3580 0%,#0d1b4a 70%,#08112f 100%);--edge:#c9d6ff;--letter:#fdf8ec;--letter-shadow:rgba(140,170,255,.9);--top:radial-gradient(circle at 30% 30%,#fff 0 1px,transparent 1.6px),radial-gradient(circle at 70% 60%,#fff 0 1px,transparent 1.6px),#1d3580;--tip:linear-gradient(#13296b,#060f2b);--handle:linear-gradient(90deg,#7d879a,#ffffff 45%,#aab3c1);--handle-top:radial-gradient(circle at 40% 35%,#fff,#9aa4b4 75%);--handle-ring:rgba(201,214,255,.35)}
.dz[data-design="clay"]{--face:radial-gradient(ellipse at 30% 25%,rgba(255,220,180,.35),transparent 55%),linear-gradient(165deg,#d4754a 0%,#b9582f 55%,#93401f 100%);--edge:#fdf3dc;--letter:#fdf3dc;--letter-shadow:rgba(90,30,10,.55);--top:#cf6c42;--tip:linear-gradient(#b9582f,#7a3218);--handle:linear-gradient(90deg,#93401f,#d98a63 45%,#a84c27);--handle-top:radial-gradient(circle,#e09670,#93401f 80%);--handle-ring:rgba(253,243,220,.35)}
.dz[data-design="festival"]{--face0:linear-gradient(165deg,#ff7f6b,#e04b3a);--face1:linear-gradient(165deg,#ffd166,#f0a020);--face2:linear-gradient(165deg,#3fc1b0,#1f8a7d);--face3:linear-gradient(165deg,#6a8dff,#3a5fd8);--face:#3a5fd8;--tip0:#c53d2e;--tip1:#d98a12;--tip2:#18786d;--tip3:#2c4fc0;--tip:#2c4fc0;--edge:#ffffff;--letter:#ffffff;--letter-shadow:rgba(0,0,0,.3);--top:#fff4dc;--handle:repeating-linear-gradient(180deg,#fff 0 6px,#e04b3a 6px 12px);--handle-top:radial-gradient(circle,#fff,#ffd8d0 80%);--handle-ring:rgba(224,75,58,.4)}
.dz[data-design="jerusalem"]{--face:radial-gradient(ellipse at 70% 80%,rgba(160,120,60,.18),transparent 50%),radial-gradient(ellipse at 20% 20%,rgba(255,255,255,.5),transparent 45%),linear-gradient(165deg,#f6ead0 0%,#e6d3aa 55%,#cfb685 100%);--edge:#2a5bc4;--letter:#1f4fb8;--letter-shadow:rgba(255,255,255,.6);--top:#f3e6c8;--tip:linear-gradient(#e0cb9c,#b89a62);--handle:linear-gradient(90deg,#1f4fb8,#7fa6ff 45%,#2a5bc4);--handle-top:radial-gradient(circle at 40% 35%,#cfe0ff,#2a5bc4 75%);--handle-ring:rgba(42,91,196,.35)}