.pisi-set-animator, .pisi-set-animator * { box-sizing: border-box; }
 .pisi-set-animator { --bg:#eef7ff; --panel:#fff; --text:#12324a; --accent:#18a6a6; --accent2:#ffb347; --accent3:#8e6bd8; --border:#bfd7e6; }
.pisi-set-animator { margin:0; font-family:Arial,Helvetica,sans-serif; background:var(--bg); color:var(--text); }
.app { display:grid; grid-template-columns:320px 1fr; min-height:100vh; gap:18px; padding:18px; }
.controls { background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:20px; }
.controls h1 { margin-top:0; font-size:24px; }
.controls label { display:block; margin:12px 0 4px; font-weight:700; }
.controls input,.controls select { width:100%; margin-top:7px; padding:11px 12px; border:1px solid var(--border); border-radius:10px; font-size:16px; }
.field-help { display:block; margin:3px 0 8px; color:#60758a; font-size:.82rem; font-weight:500; }
.check { display:flex!important; align-items:center; gap:8px; margin-top:14px!important; }
.check input { width:auto; margin:0; }
.buttons { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
.buttons button { border:0; border-radius:11px; padding:12px; font-size:15px; font-weight:700; cursor:pointer; background:var(--accent); color:#fff; }
.buttons button:last-child { grid-column:span 2; background:#49677f; }
.stage-wrap { display:flex; align-items:center; justify-content:center; }
.stage { width:min(100%,1160px); aspect-ratio:16/9; position:relative; overflow:hidden; border-radius:20px; background:radial-gradient(circle at 20% 15%,rgba(255,255,255,.95),rgba(255,255,255,.65) 40%,transparent 70%),linear-gradient(145deg,#e9f9ff,#fff7e4); border:2px solid var(--border); padding:24px 32px; }
.brand { position:absolute; right:24px; top:16px; font-weight:700; color:#537187; }
.stage h2 { text-align:center; font-size:clamp(22px,2.6vw,38px); margin:8px 0 8px; }
.set-lines { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; font-size:clamp(17px,1.8vw,28px); font-weight:700; text-align:center; }
.venn { position:relative; height:61%; margin-top:2px; }
.venn-svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.venn-circle { stroke-width:7; }
.circle-a { stroke:var(--accent); fill:rgba(24,166,166,.12); }
.circle-b { stroke:var(--accent2); fill:rgba(255,179,71,.13); }
.circle-c { stroke:var(--accent3); fill:rgba(142,107,216,.11); }
.svg-label { font-size:42px; font-weight:900; fill:var(--text); text-anchor:middle; }
.solution-shape { fill:#ffe66d; stroke:#f0a800; stroke-width:9; opacity:.72; }
.highlight-layer { opacity:0; }
.highlight-layer.blink { opacity:1; animation:solutionBlink 1.05s ease-in-out infinite; }
@keyframes solutionBlink { 0%,100%{opacity:.28;filter:drop-shadow(0 0 2px #f0a800)} 50%{opacity:.92;filter:drop-shadow(0 0 16px #f0a800)} }
.elements { position:absolute; display:flex; flex-wrap:wrap; gap:6px; font-size:clamp(17px,2vw,30px); font-weight:900; justify-content:center; align-items:center; z-index:4; }
.region-a { left:20%; top:28%; width:14%; height:20%; }
.region-b { right:20%; top:28%; width:14%; height:20%; }
.region-c { left:43%; top:76%; width:14%; height:16%; }
.region-ab { left:43%; top:19%; width:14%; height:16%; }
.region-ac { left:32%; top:56%; width:14%; height:17%; }
.region-bc { right:32%; top:56%; width:14%; height:17%; }
.region-abc { left:43%; top:47%; width:14%; height:17%; }
.token { opacity:0; transform:translateY(12px) scale(.82); transition:opacity .45s ease,transform .45s ease; padding:2px 6px; border-radius:9px; }
.token.show { opacity:1; transform:translateY(0) scale(1); }
.selected-token { background:#fff3a5; box-shadow:0 0 0 4px rgba(255,230,109,.35); animation:tokenPulse 1.05s ease-in-out infinite; }
@keyframes tokenPulse { 50% { transform:scale(1.17); box-shadow:0 0 0 8px rgba(255,230,109,.2); } }
.explanation,.result { text-align:center; font-weight:700; position:relative; z-index:8; }
.explanation { min-height:30px; font-size:clamp(15px,1.55vw,24px); }
.result { margin-top:5px; font-size:clamp(22px,2.4vw,36px); color:#0f7f7f; opacity:0; transform:scale(.92); transition:.5s ease; }
.result.show { opacity:1; transform:scale(1); }
@media (max-width:900px){ .app{grid-template-columns:1fr}.controls{order:2}.stage-wrap{order:1}.stage{aspect-ratio:auto;min-height:650px} }
@media (max-width:600px){ .app{padding:8px}.stage{padding:18px 8px;min-height:560px}.set-lines{gap:4px}.brand{font-size:12px}.svg-label{font-size:34px}.elements{font-size:16px} }
.preset-row { margin-bottom:12px; }
.random-box { margin-top:14px; padding:12px; border:1px dashed var(--accent); border-radius:12px; background:#f3ffff; }
.random-box strong { display:block; margin-bottom:6px; }
.two-cols { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.two-cols label { margin:4px 0; font-size:13px; }
.random-btn { width:100%; margin-top:8px; border:0; border-radius:10px; padding:10px; font-weight:800; cursor:pointer; background:#8e6bd8; color:white; }
.hidden { display:none !important; }
.product-panel { height:55%; margin:18px auto 0; width:92%; padding:18px; border:2px solid var(--border); border-radius:18px; background:rgba(255,255,255,.72); overflow:auto; }
.product-arrow { text-align:center; font-weight:900; font-size:clamp(18px,2vw,28px); margin-bottom:12px; }
.product-pairs { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.pair-token { font-size:clamp(18px,2vw,30px); background:#fff3a5; border:2px solid #f0a800; padding:7px 12px; }
@media (max-width:600px){ .two-cols{grid-template-columns:1fr}.product-panel{height:48%}.result{font-size:18px;overflow-wrap:anywhere} }

.pisi-set-animator .access-badge { margin:-4px 0 14px; padding:9px 12px; border-radius:10px; font-weight:800; text-align:center; font-size:14px; }
.pisi-set-animator .access-badge.demo { background:#fff7d6; border:1px solid #f0cf67; color:#745800; }
.pisi-set-animator .access-badge.premium { background:#e9fff1; border:1px solid #73c98e; color:#176b35; }
.pisi-set-animator #operation option:disabled { color:#888; }


/* v1.0.1: WordPress/mobile SVG and layout hardening */
.pisi-set-animator .venn-svg { display:block !important; visibility:visible !important; opacity:1 !important; }
.pisi-set-animator .venn-svg .venn-circle { display:block !important; visibility:visible !important; opacity:1 !important; stroke-width:7px !important; vector-effect:non-scaling-stroke; }
.pisi-set-animator .venn-svg .circle-a { stroke:#18a6a6 !important; fill:rgba(24,166,166,.12) !important; }
.pisi-set-animator .venn-svg .circle-b { stroke:#ffb347 !important; fill:rgba(255,179,71,.13) !important; }
.pisi-set-animator .venn-svg .circle-c { stroke:#8e6bd8 !important; fill:rgba(142,107,216,.11) !important; }
.pisi-set-animator .venn-svg .svg-label { display:block !important; visibility:visible !important; fill:#12324a !important; }
.mobile-playbar { display:none; }

@media (max-width:900px){
  .pisi-set-animator { padding-bottom:76px; }
  .pisi-set-animator .app { display:flex; flex-direction:column; min-height:0; padding:8px; gap:12px; }
  .pisi-set-animator .stage-wrap { order:1; width:100%; display:block; }
  .pisi-set-animator .controls { order:2; padding:16px; }
  .pisi-set-animator .stage { width:100%; min-height:760px; height:auto; aspect-ratio:auto; padding:52px 10px 18px; overflow:hidden; }
  .pisi-set-animator .brand { top:12px; right:12px; font-size:13px; }
  .pisi-set-animator .stage h2 { margin:4px 0 12px; font-size:28px; line-height:1.15; }
  .pisi-set-animator .set-lines { grid-template-columns:1fr; gap:5px; font-size:19px; line-height:1.25; text-align:left; padding:0 8px; }
  .pisi-set-animator .set-line { overflow-wrap:anywhere; word-break:normal; }
  .pisi-set-animator .venn { height:390px; width:100%; margin:8px auto 0; }
  .pisi-set-animator .venn-svg { width:100%; height:100%; }
  .pisi-set-animator .elements { font-size:17px; line-height:1.1; gap:3px; }
  .pisi-set-animator .explanation { font-size:18px; line-height:1.3; padding:0 8px; }
  .pisi-set-animator .result { font-size:24px; line-height:1.2; padding:0 8px; }
  .pisi-set-animator .mobile-playbar { position:fixed; left:8px; right:8px; bottom:10px; z-index:99999; display:grid; grid-template-columns:2fr 1fr; gap:8px; padding:8px; border-radius:14px; background:rgba(255,255,255,.96); border:1px solid #bfd7e6; box-shadow:0 8px 28px rgba(18,50,74,.22); backdrop-filter:blur(8px); }
  .pisi-set-animator .mobile-playbar button { border:0; border-radius:10px; padding:12px 10px; font-size:16px; font-weight:800; color:#fff; background:#18a6a6; }
  .pisi-set-animator .mobile-playbar button:last-child { background:#49677f; }
}

@media (max-width:480px){
  .pisi-set-animator .stage { min-height:720px; padding-left:4px; padding-right:4px; }
  .pisi-set-animator .stage h2 { font-size:25px; }
  .pisi-set-animator .set-lines { font-size:17px; }
  .pisi-set-animator .venn { height:350px; }
  .pisi-set-animator .svg-label { font-size:38px !important; }
  .pisi-set-animator .elements { font-size:15px; }
}


/* v1.0.3: wide desktop canvas, sticky menu and lesson controls */
@media (min-width:901px){
  .pisi-set-animator .app{grid-template-columns:320px minmax(0,1fr);padding:12px;gap:12px;min-height:100vh;align-items:stretch}
  .pisi-set-animator .controls{position:sticky;top:10px;align-self:start;max-height:calc(100vh - 20px);overflow-y:auto;scrollbar-width:thin}
  .pisi-set-animator .stage-wrap{min-width:0;width:100%;align-items:stretch;justify-content:stretch}
  .pisi-set-animator .stage{width:100%;max-width:none;height:calc(100vh - 24px);min-height:720px;aspect-ratio:auto;border-radius:18px;padding:58px 34px 24px}
  .pisi-set-animator .venn{height:64%;max-height:none}
}
.pisi-set-animator .stage-topline{position:absolute;left:24px;right:24px;top:14px;display:flex;align-items:center;justify-content:space-between;gap:18px;font-weight:800;color:#537187;z-index:12}
.pisi-set-animator .teacher-brand{color:#12324a;letter-spacing:.2px}
.pisi-set-animator .stage-topline .brand{position:static;right:auto;top:auto}
.pisi-set-animator .stage-actions{position:absolute;right:22px;bottom:18px;z-index:20;display:flex;gap:10px}
.pisi-set-animator .stage-actions button{border:0;border-radius:12px;padding:12px 18px;font-size:16px;font-weight:900;cursor:pointer;color:#fff;background:#18a6a6;box-shadow:0 5px 18px rgba(18,50,74,.18)}
.pisi-set-animator .stage-actions button:last-child{background:#8e6bd8}
.pisi-set-animator .venn-circle,.pisi-set-animator .svg-label{transition:opacity .35s ease,filter .35s ease}
.pisi-set-animator .venn-circle.lesson-hidden,.pisi-set-animator .svg-label.lesson-hidden{opacity:0!important}
.pisi-set-animator .venn-circle.lesson-drawing{stroke-dasharray:1200;stroke-dashoffset:1200;fill-opacity:0;animation:drawSetCircle .9s ease forwards}
@keyframes drawSetCircle{to{stroke-dashoffset:0;fill-opacity:1}}
.pisi-set-animator .set-line.active-line{color:#0f7f7f;text-shadow:0 0 12px rgba(24,166,166,.25)}
@media (max-width:900px){
  .pisi-set-animator .stage-topline{left:10px;right:10px;top:10px;font-size:12px;align-items:flex-start}
  .pisi-set-animator .teacher-brand{max-width:52%;line-height:1.15}
  .pisi-set-animator .stage-actions{display:none}
}


/* v1.0.4: staged element entry and optional third set */
.pisi-set-animator .set-mode-check{margin:8px 0 12px;padding:9px 10px;border:1px solid #bfd7e6;border-radius:10px;background:#f5fbff;font-weight:800}
.pisi-set-animator .set-c-control{transition:opacity .25s ease,filter .25s ease}
.pisi-set-animator .set-c-control.set-c-disabled{opacity:.42;filter:grayscale(.45)}
.pisi-set-animator .set-c-off{display:none!important}
.pisi-set-animator .token.lesson-token-pulse{animation:lessonTokenPulse .65s ease}
@keyframes lessonTokenPulse{0%{transform:scale(1)}45%{transform:scale(1.32);background:#dff9ff;box-shadow:0 0 0 8px rgba(24,166,166,.18)}100%{transform:scale(1)}}

/* v1.0.5: visible desktop controls and safer element placement */
@media (min-width:901px){
  .pisi-set-animator .stage{padding-top:104px}
  .pisi-set-animator .stage-actions{
    left:24px;
    right:auto;
    top:48px;
    bottom:auto;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .pisi-set-animator .stage h2{margin-top:0}
}
.pisi-set-animator .stage-actions button{min-width:132px}

/* Keep labels comfortably inside their Venn regions. */
.pisi-set-animator .elements{
  max-width:18%;
  max-height:22%;
  overflow:visible;
  align-content:center;
  line-height:1.05;
}
.pisi-set-animator .region-a{left:24%;top:31%;width:12%;height:18%}
.pisi-set-animator .region-b{right:24%;top:31%;width:12%;height:18%}
.pisi-set-animator .region-c{left:44%;top:77%;width:12%;height:13%}
.pisi-set-animator .region-ab{left:44%;top:22%;width:12%;height:14%}
.pisi-set-animator .region-ac{left:35%;top:58%;width:12%;height:15%}
.pisi-set-animator .region-bc{right:35%;top:58%;width:12%;height:15%}
.pisi-set-animator .region-abc{left:44%;top:47%;width:12%;height:15%}
.pisi-set-animator .elements .token{
  max-width:100%;
  overflow-wrap:anywhere;
  text-align:center;
  padding:1px 4px;
}
@media (min-width:901px){
  .pisi-set-animator .elements{font-size:clamp(16px,1.65vw,27px);gap:3px 5px}
}


/* v1.0.6: operational toolbar and persistent emoji set notation */
.pisi-set-animator .set-line-value{display:inline-block;vertical-align:middle;min-width:.72em}
.pisi-set-animator .operation-toolbar{
  display:grid;
  grid-template-columns:minmax(150px,1fr) minmax(150px,1fr) auto minmax(150px,1fr) minmax(190px,1.2fr) auto;
  align-items:end;
  gap:10px;
  margin:8px 0 12px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,.82);
  box-shadow:0 5px 16px rgba(18,50,74,.08);
}
.pisi-set-animator .operation-toolbar label{display:block;margin:0;font-size:13px;font-weight:800}
.pisi-set-animator .operation-toolbar input,
.pisi-set-animator .operation-toolbar select{width:100%;margin-top:5px;padding:9px 10px;border:1px solid var(--border);border-radius:9px;font-size:15px;background:#fff}
.pisi-set-animator .operation-toolbar .op-c-check{display:flex!important;align-items:center;align-self:center;gap:7px;white-space:nowrap;padding:10px 5px;margin-top:18px!important}
.pisi-set-animator .operation-toolbar .op-c-check input{width:auto;margin:0}
.pisi-set-animator .operation-toolbar .toolbar-play{align-self:end;min-width:118px;height:42px;border:0;border-radius:10px;background:var(--accent);color:#fff;font-size:16px;font-weight:900;cursor:pointer;box-shadow:0 7px 16px rgba(24,166,166,.22)}
.pisi-set-animator .operation-toolbar .toolbar-play:hover{filter:brightness(.96);transform:translateY(-1px)}
.pisi-set-animator .controls .buttons{display:none!important}
@media (min-width:901px){
  .pisi-set-animator .stage{padding-top:54px}
  .pisi-set-animator .stage h2{margin-top:8px}
}
@media (max-width:1250px) and (min-width:901px){
  .pisi-set-animator .operation-toolbar{grid-template-columns:1fr 1fr auto 1fr;}
  .pisi-set-animator .operation-toolbar .operation-field{grid-column:span 3}
  .pisi-set-animator .operation-toolbar .toolbar-play{grid-column:4}
}
@media (max-width:900px){
  .pisi-set-animator .operation-toolbar{grid-template-columns:1fr 1fr;gap:8px;margin-top:0;padding:8px}
  .pisi-set-animator .operation-toolbar .op-c-check{margin-top:4px!important}
  .pisi-set-animator .operation-toolbar .operation-field{grid-column:1 / -1}
  .pisi-set-animator .operation-toolbar .toolbar-play{grid-column:1 / -1;width:100%}
  .pisi-set-animator .stage{padding-top:48px}
}


/* v1.0.7: C toggle fix, higher result and TTS help */
.pisi-set-animator .tts-row{display:flex;align-items:center;gap:8px;margin-top:10px}
.pisi-set-animator .tts-row .check{margin:0!important;flex:1}
.pisi-set-animator .tts-help-btn{width:25px;height:25px;border-radius:50%;border:1px solid #8fb7cd;background:#eef8ff;color:#12324a;font-weight:900;cursor:pointer;line-height:1}
.pisi-set-animator .tts-help{margin-top:7px;padding:10px 11px;border:1px solid #bfd7e6;border-radius:10px;background:#f5fbff;color:#39586e;font-size:13px;line-height:1.35}
.pisi-set-animator .lesson-summary{position:relative;z-index:9}
@media (min-width:901px){
  .pisi-set-animator .venn{height:58%}
  .pisi-set-animator .lesson-summary{transform:translateY(-34px)}
}
@media (max-width:900px){
  .pisi-set-animator .lesson-summary{transform:translateY(-8px)}
}

/* v1.1.0: Smart Venn positioning – strict regions and playful visual learning */
.pisi-set-animator .venn .elements{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  display:block!important;
  overflow:visible!important;
  pointer-events:none;
}
.pisi-set-animator .venn .elements .token.smart-positioned{
  position:absolute;
  margin:0;
  transform:translate(-50%,-50%) translateY(12px) scale(.82) rotate(var(--token-tilt,0deg));
  white-space:nowrap;
  line-height:1;
  padding:3px 6px;
  text-align:center;
  transform-origin:center;
}
.pisi-set-animator .venn .elements .token.smart-positioned.show{
  transform:translate(-50%,-50%) translateY(0) scale(1) rotate(var(--token-tilt,0deg));
  animation:smartTokenLanding .55s cubic-bezier(.2,.85,.35,1.25);
}
.pisi-set-animator .venn .elements .token-dense{font-size:.82em;padding:2px 4px}
.pisi-set-animator .venn .elements .token-very-dense{font-size:.68em;padding:1px 3px}
.pisi-set-animator .venn .elements .token-long{font-size:.72em}
.pisi-set-animator .venn .elements .selected-token.smart-positioned{
  animation:tokenPulseSmart 1.05s ease-in-out infinite;
}
@keyframes smartTokenLanding{
  0%{opacity:0;transform:translate(-50%,-50%) translateY(-22px) scale(.7) rotate(var(--token-tilt,0deg))}
  65%{opacity:1;transform:translate(-50%,-50%) translateY(4px) scale(1.12) rotate(var(--token-tilt,0deg))}
  100%{opacity:1;transform:translate(-50%,-50%) translateY(0) scale(1) rotate(var(--token-tilt,0deg))}
}
@keyframes tokenPulseSmart{
  0%,100%{transform:translate(-50%,-50%) scale(1) rotate(var(--token-tilt,0deg));box-shadow:0 0 0 4px rgba(255,230,109,.35)}
  50%{transform:translate(-50%,-50%) scale(1.15) rotate(var(--token-tilt,0deg));box-shadow:0 0 0 8px rgba(255,230,109,.2)}
}
/* v1.1.3: compact tokens for narrow intersections; never leave the Venn diagram. */
.pisi-set-animator .venn .elements .token-tight-region{
  font-size:.56em!important;
  padding:1px 2px!important;
  letter-spacing:-.03em;
}