/* PiCraft Play Lab: home-page games, graphs and experiments */
#ldPlay{scroll-margin-top:64px;content-visibility:auto;contain-intrinsic-size:auto 780px}
.plRoot{margin-top:6px}
.plTabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 20px}
.plTab{display:inline-flex;align-items:center;gap:8px;border:2px solid color-mix(in srgb,var(--c) 28%,#fff);background:#fff;color:#1c2350;font-weight:700;font-size:15px;line-height:1;font-family:inherit;padding:11px 18px;border-radius:99px;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.plTab:hover{transform:translateY(-2px);box-shadow:0 8px 18px color-mix(in srgb,var(--c) 22%,transparent)}
.plTab[aria-selected=true]{background:var(--c);border-color:var(--c);color:#fff;box-shadow:0 8px 18px color-mix(in srgb,var(--c) 30%,transparent)}
.plTab:focus-visible,.plCard:focus-visible,.plOpt:focus-visible,.plPill:focus-visible,.plGo:focus-visible,.plBtn:focus-visible,.plBack:focus-visible,.plMc:focus-visible{outline:3px solid #7C3AED;outline-offset:2px}
.plGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.plCard{display:flex;flex-direction:column;gap:6px;text-align:left;background:#fff;border:1.5px solid color-mix(in srgb,var(--c) 22%,#fff);border-radius:22px;padding:18px;cursor:pointer;font-family:inherit;color:#1c2350;box-shadow:0 12px 26px color-mix(in srgb,var(--c) 12%,transparent);transition:transform .18s,box-shadow .18s}
.plCard:hover{transform:translateY(-4px);box-shadow:0 18px 34px color-mix(in srgb,var(--c) 22%,transparent)}
.plIc{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:30px;background:color-mix(in srgb,var(--c) 14%,#fff);margin-bottom:4px}
.plCard h3{margin:0;font-size:18px;line-height:1.25}
.plCard p{margin:0;font-size:14px;line-height:1.5;color:#5b6580}
.plMeta{margin-top:auto;padding-top:8px;display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:700;color:var(--c)}
.plMeta i{font-style:normal;background:var(--c);color:#fff;padding:5px 12px;border-radius:99px}
.plBar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.plBar b{font-size:18px}
.plBack{border:0;background:#eef0ff;color:#3a2fb0;font-weight:700;font-size:14px;font-family:inherit;padding:9px 14px;border-radius:99px;cursor:pointer}
.plBack:hover{background:#e0e3ff}
.plGame{background:#fff;border:1.5px solid #dfe3f7;border-radius:22px;padding:18px;box-shadow:0 14px 30px rgba(66,85,255,.08);min-height:240px}
.plIntro{text-align:center;max-width:560px;margin:10px auto}
.plIntro p{color:#4a5472;font-size:16px;line-height:1.6;margin:0 0 16px}
.plLv{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.plPill,.plGo,.plBtn{border:0;background:linear-gradient(135deg,#4255FF,#7C3AED);color:#fff;font-weight:700;font-size:15px;font-family:inherit;padding:12px 22px;border-radius:99px;cursor:pointer;box-shadow:0 8px 18px rgba(66,85,255,.25);transition:transform .15s}
.plPill:hover,.plGo:hover,.plBtn:hover{transform:translateY(-2px)}
.plBtn.alt{background:#eef0ff;color:#3a2fb0;box-shadow:none}
.plBtn.sm{padding:8px 14px;font-size:13.5px}
.plBtn[disabled]{opacity:.5;cursor:default;transform:none}
.plBest{font-size:14px;color:#6b7390;margin-top:14px!important}
.plHud{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:14px}
.plChip{background:#f1f3ff;border-radius:99px;padding:6px 14px;font-size:14px;font-weight:600;color:#3a4270}
.plChip b{color:#1c2350}
.plChip.warn{background:#ffe9e0;color:#b4410c}
.plQ{text-align:center;margin:8px 0 16px;min-height:64px}
.plBig{font:800 clamp(28px,6vw,44px)/1.2 var(--display,"Outfit",sans-serif);color:#1c2350}
.plSeq{letter-spacing:.02em}
.plAsk{font-weight:700;font-size:clamp(16px,3.4vw,20px);line-height:1.45;font-family:inherit;color:#1c2350}
.plOpts{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:560px;margin:0 auto}
.plOpt{background:#f6f7ff;border:2px solid #dfe3f7;border-radius:16px;padding:14px 10px;font-weight:700;font-size:clamp(16px,3.6vw,20px);line-height:1.3;font-family:inherit;color:#1c2350;cursor:pointer;min-height:56px;transition:transform .12s,background .12s,border-color .12s}
.plOpt:hover:not([disabled]){background:#eaeeff;border-color:#9aa6ff;transform:translateY(-2px)}
.plOpt.ok{background:#dcf8e7;border-color:#22b55e;color:#0b6a31}
.plOpt.no{background:#ffe4e4;border-color:#ef4444;color:#9b1c1c}
.plOpt[disabled]{cursor:default}
.plOpts.kid .plOpt{font-size:clamp(24px,7vw,34px);padding:16px 10px}
.plFb{min-height:48px;margin:14px auto 0;max-width:560px;text-align:center;font-size:15px;line-height:1.5;color:#3a4270}
.plRes{text-align:center;padding:10px 0}
.plRes .em{font-size:56px}
.plRes h3{margin:6px 0 4px;font-size:24px}
.plRes p{margin:4px 0;color:#4a5472}
.plRes .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.plField{position:relative;height:190px;background:linear-gradient(180deg,#e8f1ff,#fdf2ff);border-radius:18px;margin:0 auto 12px;max-width:560px;overflow:hidden}
.plField span{position:absolute;font-size:30px;line-height:1;transform:translate(-50%,-50%)}
.plBoard{display:grid;gap:8px;max-width:440px;margin:0 auto}
.plMc{aspect-ratio:1;border:0;border-radius:14px;font-size:clamp(26px,8vw,38px);cursor:pointer;display:grid;place-items:center;background:linear-gradient(135deg,#7C3AED,#4255FF);color:#fff;font-family:inherit;transition:transform .25s,background .2s;padding:0}
.plMc.up{background:#fff;border:2px solid #dfe3f7;transform:rotateY(0)}
.plMc.done{background:#dcf8e7;border:2px solid #22b55e}
.plMc:disabled{cursor:default}
.plOdd{aspect-ratio:1;background:#f6f7ff;border:2px solid #dfe3f7;border-radius:14px;font-size:clamp(24px,7vw,36px);cursor:pointer;display:grid;place-items:center;padding:0;font-family:inherit}
.plOdd:hover{background:#eaeeff}
.plOdd.ok{background:#dcf8e7;border-color:#22b55e}
.plOdd.no{background:#ffe4e4;border-color:#ef4444}
.plCtl{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 22px;margin:0 0 14px}
.plCtl label{display:block;font-size:13.5px;font-weight:700;color:#3a4270}
.plCtl label output{float:right;color:#4255FF}
.plCtl input[type=range]{width:100%;accent-color:#4255FF;margin-top:6px}
.plCtl select,.plCtl input[type=text]{width:100%;margin-top:6px;border:2px solid #dfe3f7;border-radius:12px;padding:10px 12px;font-weight:600;font-size:15px;font-family:inherit;color:#1c2350;background:#fff}
.plRow{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px;align-items:center}
.plChipBtn{border:1.5px solid #d3d9fb;background:#fff;color:#3a2fb0;font-weight:600;font-size:13.5px;font-family:inherit;padding:7px 12px;border-radius:99px;cursor:pointer}
.plChipBtn:hover{background:#eef0ff}
.plChipBtn[aria-pressed=true]{background:#4255FF;border-color:#4255FF;color:#fff}
.plPlot{width:100%;overflow:hidden;border-radius:16px;background:#fff;border:1.5px solid #e4e8fb;touch-action:pan-y}
.plPlot svg{display:block;max-width:100%;font:11px sans-serif}
.plPlot .function-plot .title,.plPlot .function-plot .x.axis-label,.plPlot .function-plot .y.axis-label{font-size:12px}
.plInfo{background:#f6f7ff;border-radius:14px;padding:12px 14px;margin-top:12px;font-size:14.5px;line-height:1.6;color:#2b3463}
.plInfo b{color:#1c2350}
.plQtext{font-weight:700;font-size:16.5px;line-height:1.5;margin:0 0 10px;color:#1c2350}
.plCanvas{display:block;width:100%;border-radius:16px;border:1.5px solid #dfe3f7;touch-action:pan-y}
.plSim{border-radius:16px;overflow:hidden;border:1.5px solid #dfe3f7;background:#f4f6ff}
.plSim canvas{display:block;width:100%!important}
.plErr{color:#b4410c;font-weight:600}
.plNote{font-size:13px;color:#6b7390;margin:18px 0 0;text-align:center}
@media (max-width:560px){.plTab{padding:10px 14px;font-size:14px}.plGrid{grid-template-columns:1fr}.plGame{padding:14px}}
@media (prefers-reduced-motion:reduce){.plCard,.plTab,.plOpt,.plPill,.plGo,.plBtn,.plMc{transition:none}}

/* dark mode (uses the site's dark.css variables) */
html.dk .plTab{background:var(--surface,#1f2330);color:var(--fg,#bfc4d4);border-color:color-mix(in srgb,var(--c) 40%,#353e50)}
html.dk .plTab[aria-selected=true]{background:var(--c);border-color:var(--c);color:#fff}
html.dk .plCard{background:var(--bg,#141721);border-color:color-mix(in srgb,var(--c) 30%,#363c4e);color:var(--fg,#bfc4d4);box-shadow:none}
html.dk .plCard h3{color:#e6e9f5}
html.dk .plCard p{color:var(--muted,#8892b0)}
html.dk .plIc{background:color-mix(in srgb,var(--c) 24%,#1d2037)}
html.dk .plBack,html.dk .plBtn.alt{background:#262b45;color:#b9c0ff}
html.dk .plBar b{color:#e6e9f5}
html.dk .plGame{background:var(--bg,#141721);border-color:#353e50;box-shadow:none}
html.dk .plIntro p,html.dk .plRes p,html.dk .plFb{color:var(--faint,#a1a7bb)}
html.dk .plBest,html.dk .plNote{color:var(--muted,#8892b0)}
html.dk .plChip{background:#262b45;color:var(--fg,#bfc4d4)}
html.dk .plChip b,html.dk .plRes h3{color:#fff}
html.dk .plChip.warn{background:#3d2a1f;color:#ffb48a}
html.dk .plBig,html.dk .plAsk,html.dk .plQtext{color:#e6e9f5}
html.dk .plOpt,html.dk .plOdd{background:#1d2037;border-color:#353e50;color:#e6e9f5}
html.dk .plOpt:hover:not([disabled]),html.dk .plOdd:hover{background:#262b45;border-color:#6672d8}
html.dk .plOpt.ok,html.dk .plOdd.ok,html.dk .plMc.done{background:#1b3a2a;border-color:#22b55e;color:#8ee6b0}
html.dk .plOpt.no,html.dk .plOdd.no{background:#3d1f24;border-color:#ef4444;color:#ffb4b4}
html.dk .plField{background:linear-gradient(180deg,#1d2440,#2a1f3d)}
html.dk .plMc.up{background:#1d2037;border-color:#353e50}
html.dk .plCtl label{color:var(--fg,#bfc4d4)}
html.dk .plCtl label output{color:#9aa6ff}
html.dk .plCtl select,html.dk .plCtl input[type=text]{background:#1d2037;border-color:#353e50;color:#e6e9f5}
html.dk .plChipBtn{background:var(--surface,#1f2330);color:#b9c0ff;border-color:#353e50}
html.dk .plChipBtn[aria-pressed=true]{background:#4255FF;border-color:#4255FF;color:#fff}
html.dk .plInfo{background:#1d2037;color:var(--fg,#bfc4d4)}
html.dk .plInfo b{color:#fff}
html.dk .plPlot,html.dk .plCanvas,html.dk .plSim{border-color:#353e50}
html.dk .plErr{color:#ffb48a}