:root{--bg:#0b0f17;--panel:#111827;--card:#0f172a;--card2:#0b1220;--text:#e5e7eb;--muted:#94a3b8;--line:rgba(148,163,184,.18);--brand:#7c3aed;--brand2:#22c55e;--danger:#ef4444;--ok:#22c55e;--shadow: 0 10px 30px rgba(0,0,0,.35);--radius: 18px}:root[data-theme=light]{--bg:#f6f7fb;--panel:#ffffff;--card:#ffffff;--card2:#f1f5f9;--text:#0b1220;--muted:#475569;--line:rgba(15,23,42,.14);--shadow: 0 10px 30px rgba(2,6,23,.1)}*{box-sizing:border-box}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";background:radial-gradient(1200px 800px at 10% 10%,rgba(124,58,237,.25),transparent 60%),radial-gradient(900px 600px at 90% 20%,rgba(34,197,94,.18),transparent 55%),var(--bg);color:var(--text)}a{color:inherit;text-decoration:none}.container{width:min(1100px,92vw);margin:0 auto}.skipLink{position:absolute;left:-999px;top:10px;padding:10px 12px;border-radius:14px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);z-index:50}.appShell{min-height:100vh;display:flex;flex-direction:column}.topbar{position:sticky;top:0;z-index:20;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:color-mix(in srgb,var(--bg) 65%,transparent);border-bottom:1px solid var(--line)}.topbarInner{display:flex;align-items:center;gap:14px;padding:14px 0}.skipLink{position:absolute;left:-9999px;top:8px;padding:10px 12px;border-radius:12px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);z-index:999}.skipLink:focus{left:12px}.brand{display:flex;align-items:center;gap:10px;font-weight:700}.brandMark{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;background:#ffffff08}.brandText{letter-spacing:.2px}.nav{margin-left:10px;display:flex;gap:10px;flex-wrap:wrap}.navLink{padding:8px 10px;border-radius:12px;color:var(--muted);border:1px solid transparent}.navLink:hover{color:var(--text);border-color:var(--line);background:#ffffff08}.navLink.active{color:var(--text);border-color:#7c3aed59;background:#7c3aed1f}.topbarCta{margin-left:auto}.topbarActions{margin-left:auto;display:flex;align-items:center;gap:10px}.topbarActions+.topbarCta{margin-left:0}.iconBtn{width:40px;height:40px;display:grid;place-items:center;border-radius:14px;border:1px solid var(--line);background:#ffffff05;color:var(--text);cursor:pointer;font-weight:900}.mobileOnly{display:none}.mobileNav{border-bottom:1px solid var(--line);background:#0b0f17d9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}:root[data-theme=light] .mobileNav{background:#f6f7fbf2}.mobileNavInner{padding:12px 0 16px;display:grid;gap:8px}.mobileNavLink{padding:12px;border-radius:14px;border:1px solid var(--line);background:#ffffff05;color:var(--muted);font-weight:700}.mobileNavLink.active{color:var(--text);border-color:#7c3aed59;background:#7c3aed1f}.mobileNavCta{margin-top:6px;justify-self:start}.topbarActions{display:flex;gap:10px;align-items:center}.iconBtn{width:40px;height:40px;display:grid;place-items:center;border-radius:14px;border:1px solid var(--line);background:#ffffff08;color:var(--text);cursor:pointer;font-weight:800}.iconBtn:hover{border-color:#7c3aed59}.mobileOnly,.mobileNav{display:none}@media(max-width:900px){.nav{display:none}.mobileOnly{display:grid}.mobileNav{display:block;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 88%,transparent)}.mobileNavInner{padding:10px 0 14px;display:flex;flex-direction:column;gap:8px}.mobileNavLink{padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:#ffffff08;color:var(--muted);font-weight:800}.mobileNavLink.active{color:var(--text);border-color:#7c3aed59;background:#7c3aed1f}.mobileNavCta{margin-top:6px;text-align:center}}.main{flex:1;padding:24px 0 44px}.adSection{padding:4px 0 22px}.adWrap{width:100%;max-width:1100px;margin:0 auto;display:flex;justify-content:center;align-items:center;min-height:90px}.footer{border-top:1px solid var(--line);background:#0b0f178c}.footerInner{padding:26px 0;display:flex;gap:24px;justify-content:space-between;flex-wrap:wrap}.footerBrand{display:flex;align-items:center;gap:10px;font-weight:700}.footerLeft{max-width:520px}.footerCols{display:flex;gap:28px}.footerTitle{font-weight:700;margin-bottom:10px}.footerLink{display:block;color:var(--muted);margin:8px 0}.footerLink:hover{color:var(--text)}.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:24px;align-items:center;padding:18px 0 8px}@media(max-width:900px){.hero{grid-template-columns:1.15fr 1fr}.nav{display:none}.mobileOnly{display:grid}.topbarCta{display:none}}.kicker{color:var(--muted);border:1px solid var(--line);background:#ffffff08;display:inline-flex;padding:6px 10px;border-radius:999px;font-size:12px;letter-spacing:.2px}h1{font-size:clamp(28px,4vw,46px);margin:12px 0 8px;line-height:1.08}h2{font-size:clamp(20px,2.5vw,28px);margin:0}.lead{color:var(--muted);font-size:16px;line-height:1.6;margin:0}.heroActions{display:flex;gap:10px;margin:16px 0 10px;flex-wrap:wrap}.heroBadges{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}.badge{font-size:12px;color:var(--muted);border:1px solid var(--line);padding:6px 10px;border-radius:999px;background:#ffffff05}.heroMock{border:1px solid var(--line);background:linear-gradient(180deg,#ffffff08,#ffffff03);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.mockHeader{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);background:#ffffff05}.dot{width:10px;height:10px;border-radius:999px;background:#fff3}.dot.red{background:#ef4444}.dot.yellow{background:#f59e0b}.dot.green{background:#22c55e}.mockTitle{margin-left:auto;color:var(--muted);font-size:12px}.mockBody{margin:0;padding:14px 14px 0;font-size:12px;line-height:1.55;color:#cbd5e1;white-space:pre-wrap}.mockFooter{padding:12px 14px 14px;display:flex;gap:8px;flex-wrap:wrap}.section{margin-top:26px}.sectionHead{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:12px}.link{color:#cbd5e1;text-decoration:underline;text-underline-offset:3px}.link:hover{color:#fff}.grid{display:grid;grid-template-columns:1.15fr 1fr;gap:12px}@media(max-width:900px){.grid{grid-template-columns:1.15fr 1fr}}.grid5{grid-template-columns:1.15fr 1fr}@media(max-width:1100px){.grid5{grid-template-columns:1.15fr 1fr}}@media(max-width:600px){.grid5{grid-template-columns:1.15fr 1fr}}.card{border:1px solid var(--line);background:#0f172aa6;border-radius:var(--radius);padding:14px;box-shadow:0 8px 18px #0003}.cardTitle{font-weight:700;margin-bottom:6px}.toolCard{display:block;transition:transform .12s ease,border-color .12s ease}.toolCard:hover{transform:translateY(-2px);border-color:#7c3aed59}.toolCardTop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}.toolCardTitle{font-weight:800;letter-spacing:.2px}.toolCardDesc{color:var(--muted);line-height:1.5}.toolCardGo{margin-top:10px;color:#cbd5e1;font-weight:700}.pill{font-size:11px;padding:5px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted);background:#ffffff05}.btn{border:1px solid var(--line);padding:10px 12px;border-radius:14px;background:#ffffff05;color:var(--text);cursor:pointer;font-weight:700}.btn:hover{border-color:#7c3aed59}.btnPrimary{background:#7c3aed33;border-color:#7c3aed73}.btnPrimary:hover{background:#7c3aed47}.btnGhost{background:#ffffff05}.pageHead{margin:10px 0 16px}.twoCol{display:grid;grid-template-columns:1.15fr 1fr;gap:12px;align-items:stretch}.twoCol>.panel{height:clamp(420px,70vh,780px)}@media(max-width:900px){.twoCol{grid-template-columns:1.15fr 1fr}}.panel{border:1px solid var(--line);background:#0f172a8c;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}.panelHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);background:#ffffff05}.panelTitle{font-weight:800}.panelBody{padding:12px;flex:1;min-height:0;overflow:auto}.panelRight,.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.editor{width:100%;min-height:260px;border-radius:14px;border:1px solid var(--line);background:#0b0f178c;color:#dbeafe;padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:12.5px;line-height:1.5;outline:none;resize:none;height:100%;min-height:0}.preWrap{white-space:pre-wrap;word-break:break-word;margin:0;padding:12px;border-radius:14px;border:1px solid var(--line);background:#0b0f1773;color:#e2e8f0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:12.5px;line-height:1.55}.muted{color:var(--muted)}.small{font-size:12px}.ok{color:var(--ok);font-weight:800}.bad{color:var(--danger);font-weight:800}.statusRow{margin-top:10px;display:flex;gap:12px;flex-wrap:wrap}.select{border:1px solid var(--line);background:#0b0f1766;color:var(--text);padding:10px 12px;border-radius:14px;font-weight:700}.split{display:grid;grid-template-columns:1.15fr 1fr;gap:12px;align-items:start}@media(max-width:900px){.split{grid-template-columns:1.15fr 1fr}}.bullets{color:var(--muted);line-height:1.7;padding-left:18px}.ctaRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.callout{border:1px solid rgba(34,197,94,.28);background:#22c55e14;border-radius:var(--radius);padding:14px}.calloutTitle{font-weight:900;margin-bottom:6px}.calloutText{color:#cbd5e1;line-height:1.6}.calloutList{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}.chip{border:1px solid rgba(34,197,94,.35);background:#0b0f174d;color:#d1fae5;padding:6px 10px;border-radius:999px;font-size:12px}.hr{height:1px;background:var(--line);margin:14px 0;border:none}.h3{margin:0 0 10px}.faq{display:grid;gap:8px}.faqItem{border:1px solid var(--line);background:#ffffff05;border-radius:14px;padding:10px 12px}.faqItem summary{cursor:pointer;font-weight:800}.faqItem div{margin-top:8px;line-height:1.6}.diffList{display:grid;gap:10px}.diffRow{border:1px solid var(--line);background:#0b0f1766;border-radius:14px;padding:10px 12px}.diffRow.changed{border-color:#7c3aed59}.diffRow.added{border-color:#22c55e59}.diffRow.removed{border-color:#ef444459}.diffRow.type-change{border-color:#f59e0b59}.diffPath{font-weight:900;margin-bottom:4px}.diffType{color:var(--muted);font-weight:800;margin-bottom:6px}.diffVal code{color:#e2e8f0;border:1px solid var(--line);background:#ffffff05;padding:2px 6px;border-radius:10px}.form .label{display:block;font-weight:800;margin:6px 0}.form .input{width:100%;border:1px solid var(--line);background:#0b0f1766;color:var(--text);padding:10px 12px;border-radius:14px;margin-bottom:10px;outline:none}.prose h2{margin:12px 0 8px}.prose p{color:var(--muted);line-height:1.7;margin:0 0 10px}.smallTop{margin-top:18px}.jb{margin-top:10px}.jbRow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.jbActions{display:flex;gap:8px;flex-wrap:wrap}.jbChildren{display:grid;gap:10px}.jbChild{border:1px solid var(--line);background:#ffffff05;border-radius:14px;padding:10px}.jbKey{width:220px;max-width:100%}.jbType{min-width:150px}.jbNested{margin-top:10px;padding-left:10px;border-left:2px solid rgba(124,58,237,.22)}.jbIndex{font-weight:900;color:var(--muted);margin-bottom:8px}.jbValueRow{display:flex;gap:10px;align-items:center}.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0 14px}.toolbar .input{min-width:320px;flex:1}:root{--bg0: #070A12;--bg1: #0B1020;--card: rgba(255,255,255,.06);--card2: rgba(255,255,255,.08);--stroke: rgba(255,255,255,.1);--text: rgba(255,255,255,.92);--muted: rgba(255,255,255,.64);--brand: #7C5CFF;--brand2:#2EE9A6;--bad:#FF5C7A;--ok:#2EE9A6}body{background:radial-gradient(1100px 700px at 20% 10%,rgba(124,92,255,.22),transparent 60%),radial-gradient(900px 600px at 80% 20%,rgba(46,233,166,.18),transparent 55%),linear-gradient(180deg,var(--bg0),var(--bg1));color:var(--text)}.container{max-width:1200px;padding:18px 16px 34px}.pageHead{padding:14px 0 6px}.pageHead h1{letter-spacing:-.02em}.lead{color:var(--muted);max-width:72ch}.resultPanel,.card,.panel{background:var(--card);border:1px solid var(--stroke);border-radius:18px;box-shadow:0 10px 30px #00000040;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.btn{border-radius:12px}.btnPrimary{background:linear-gradient(90deg,var(--brand),#4C8DFF);border:1px solid rgba(255,255,255,.18)}.btnPrimary:hover{filter:brightness(1.06)}.btnGhost{background:#ffffff0f;border:1px solid rgba(255,255,255,.1)}.btnGhost:hover{background:#ffffff17}.preWrap{background:#00000059;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px;min-height:180px}.twoCol{gap:14px}@media(max-width:900px){.twoCol{grid-template-columns:1.15fr 1fr}.twoCol>.panel{height:auto}}:root{--bg0: #060812;--bg1: #0A1230;--card: rgba(255,255,255,.06);--card2: rgba(255,255,255,.08);--stroke: rgba(255,255,255,.1);--stroke2: rgba(255,255,255,.14);--text: rgba(255,255,255,.94);--muted: rgba(255,255,255,.66);--muted2: rgba(255,255,255,.52);--brand: #7C5CFF;--brandB: #4C8DFF;--mint: #2EE9A6;--bad:#FF5C7A;--ok:#2EE9A6;--radius-xl: 22px;--radius-lg: 18px;--radius-md: 14px;--shadow: 0 14px 40px rgba(0,0,0,.35)}html,body{height:100%}body{background:radial-gradient(1100px 700px at 18% 8%,rgba(124,92,255,.26),transparent 60%),radial-gradient(900px 700px at 82% 18%,rgba(46,233,166,.16),transparent 55%),radial-gradient(900px 700px at 55% 110%,rgba(76,141,255,.14),transparent 60%),linear-gradient(180deg,var(--bg0),var(--bg1));color:var(--text)}.container{max-width:1220px}.topbar{position:sticky;top:0;z-index:50;background:#0608128c;border-bottom:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.brand{gap:10px}.brandMark{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:linear-gradient(135deg,#7c5cfff2,#4c8dffe6);box-shadow:0 10px 28px #7c5cff40}.brandText{letter-spacing:-.02em;font-weight:800}.navLink{padding:10px 12px;border-radius:12px;color:var(--muted);transition:transform .12s ease,background .12s ease,color .12s ease}.navLink:hover{background:#ffffff0f;color:var(--text);transform:translateY(-1px)}.navLink.active{color:var(--text);background:#7c5cff2e;border:1px solid rgba(124,92,255,.28)}.btn{border-radius:14px;font-weight:700}.btnPrimary{background:linear-gradient(90deg,var(--brand),var(--brandB));border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 30px #7c5cff38}.btnPrimary:hover{filter:brightness(1.06);transform:translateY(-1px)}.btnGhost{background:#ffffff12;border:1px solid rgba(255,255,255,.1)}.btnGhost:hover{background:#ffffff1a;transform:translateY(-1px)}.hero{padding-top:18px}.kicker{display:inline-flex;padding:8px 12px;border-radius:999px;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);color:var(--muted);font-weight:700}.hero h1{font-size:clamp(34px,4vw,52px);letter-spacing:-.03em;line-height:1.05;margin-top:12px}.lead{color:var(--muted)}.badge{border-radius:999px;border:1px solid rgba(255,255,255,.1);background:#ffffff0f;color:var(--muted)}.card,.panel{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.toolbar{position:sticky;top:72px;z-index:20;background:#0a123066;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-xl);padding:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.input,.select,textarea{border-radius:14px;background:#00000040;border:1px solid rgba(255,255,255,.1);color:var(--text)}.input::placeholder{color:#fff6}.grid{gap:14px}.toolCard{display:flex;gap:14px;padding:16px;position:relative;overflow:hidden;transition:transform .14s ease,border-color .14s ease,background .14s ease}.toolCard:before{content:"";position:absolute;inset:-2px;background:radial-gradient(500px 240px at 15% 20%,rgba(124,92,255,.25),transparent 60%),radial-gradient(480px 220px at 90% 80%,rgba(46,233,166,.18),transparent 60%);opacity:0;transition:opacity .18s ease;pointer-events:none}.toolCard:hover{transform:translateY(-2px);border-color:#7c5cff3d}.toolCard:hover:before{opacity:1}.toolIcon{width:44px;height:44px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-weight:900;color:#ffffffeb;background:linear-gradient(135deg,#7c5cffe6,#2ee9a6b3);box-shadow:0 12px 26px #00000059;flex:0 0 auto}.toolCardMain{min-width:0}.toolCardTitle{font-size:16px;font-weight:800;letter-spacing:-.01em}.toolCardDesc{color:var(--muted);margin-top:6px;line-height:1.35}.toolCardGo{margin-top:10px;color:#ffffffd1;font-weight:800}.pill{border-radius:999px;padding:6px 10px;font-weight:800;background:#7c5cff2e;border:1px solid rgba(124,92,255,.25);color:#ffffffeb}.panelHeader{border-bottom:1px solid rgba(255,255,255,.08)}.panelTitle{font-weight:900;letter-spacing:-.01em}.preWrap{background:#0000004d;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md);padding:14px;min-height:220px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;line-height:1.45}.emptyState{padding:18px;border-radius:var(--radius-md);border:1px dashed rgba(255,255,255,.16);background:#0000002e}.emptyTitle{font-weight:900}.emptySub{color:var(--muted);margin-top:6px}.emptyTips{margin-top:10px;color:var(--muted2);padding-left:18px}.ok{color:var(--ok)}.bad{color:var(--bad)}.footer{margin-top:28px;background:#0000002e;border-top:1px solid rgba(255,255,255,.08)}.qrWrap{display:flex;justify-content:center;margin:10px 0 14px}.qrPreview{padding:14px;border-radius:18px;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);box-shadow:0 14px 30px #0000004d}.qrPreview svg{display:block;max-width:260px;max-height:260px}html{scroll-behavior:smooth}body{overscroll-behavior-y:none}*{scrollbar-color:rgba(255,255,255,.25) transparent}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.toolCard,.btn{transition:none!important}}body:before{content:"";position:fixed;inset:-40%;background:radial-gradient(800px 500px at 20% 20%,rgba(124,92,255,.18),transparent 60%),radial-gradient(700px 500px at 80% 30%,rgba(46,233,166,.12),transparent 60%),radial-gradient(700px 600px at 50% 80%,rgba(76,141,255,.1),transparent 60%);filter:blur(18px);animation:bgMove 12s ease-in-out infinite;pointer-events:none;z-index:-1}@keyframes bgMove{0%{transform:translateZ(0) scale(1)}50%{transform:translate3d(3%,2%,0) scale(1.02)}to{transform:translateZ(0) scale(1)}}:root{color-scheme:dark}:root[data-theme=dark]{color-scheme:dark}:root[data-theme=light]{color-scheme:light}:root[data-theme=light] body{background:radial-gradient(1100px 700px at 18% 8%,rgba(124,92,255,.12),transparent 60%),radial-gradient(900px 700px at 82% 18%,rgba(46,233,166,.1),transparent 55%),radial-gradient(900px 700px at 55% 110%,rgba(76,141,255,.08),transparent 60%),linear-gradient(180deg,#f7f8ff,#eef2ff);color:#0a0c18eb}:root[data-theme=light] .topbar{background:#ffffffc7;border-bottom:1px solid rgba(10,12,24,.08);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}:root[data-theme=light] .navLink{color:#0a0c18b3}:root[data-theme=light] .navLink:hover{background:#0a0c180f;color:#0a0c18eb}:root[data-theme=light] .card,:root[data-theme=light] .panel{background:linear-gradient(180deg,#ffffffd1,#ffffffa8);border:1px solid rgba(10,12,24,.08);box-shadow:0 16px 40px #0a0c1814}:root[data-theme=light] .preWrap{background:#ffffffb3;border:1px solid rgba(10,12,24,.08);color:#0a0c18eb}:root[data-theme=light] .btnGhost{background:#0a0c180f;border:1px solid rgba(10,12,24,.1);color:#0a0c18db}.toolChips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}.chip{border-radius:999px;padding:8px 12px;font-weight:800;border:1px solid rgba(255,255,255,.12);background:#ffffff0f;color:#ffffffd1;transition:transform .12s ease,background .12s ease}.chip:hover{transform:translateY(-1px);background:#ffffff1a}.chipActive{background:#7c5cff33;border-color:#7c5cff47;color:#fffffff0}.gridSections{display:flex;flex-direction:column;gap:14px}.sectionCard{padding:14px;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.1);background:#0000001f}.sectionTitle{font-weight:900;letter-spacing:-.01em;margin:2px 0 10px}.viewToggle{display:inline-flex;gap:6px;padding:6px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:#ffffff0f;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 14px 34px #00000038}.seg{border:1px solid rgba(255,255,255,.1);background:transparent;color:#fffc;padding:8px 12px;border-radius:999px;font-weight:900;letter-spacing:-.01em;cursor:pointer}.seg:hover{background:#ffffff0f}.segActive{background:#7c5cff33;border-color:#7c5cff47;color:#fffffff2}.miniRow{display:flex;flex-wrap:wrap;gap:8px}.miniPill{border-radius:999px;padding:8px 10px;border:1px solid rgba(255,255,255,.12);background:#ffffff0f;color:#ffffffe0;font-weight:900;cursor:pointer;max-width:100%}.miniPill:hover{background:#ffffff1a;transform:translateY(-1px)}.miniPillAlt{background:#0000002e}.categoryStack{display:flex;flex-direction:column;gap:10px}.catPanel{border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.1);background:#0000001a;overflow:hidden}.catSummary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;cursor:pointer;-webkit-user-select:none;user-select:none}.catSummary::-webkit-details-marker{display:none}.catName{font-weight:950;letter-spacing:-.01em}.catCount{font-size:12px;padding:6px 10px;border-radius:999px;background:#7c5cff29;border:1px solid rgba(124,92,255,.22);color:#ffffffdb;font-weight:900}.premiumToolbar{gap:12px}.toolbarRowTight{display:flex;align-items:center;gap:12px;justify-content:space-between}.toolbarHint{opacity:.72;font-size:13px}.toolbarHint b{opacity:1}.searchBox{position:relative;width:100%;max-width:920px;margin:0 auto}.searchInputWrap{position:relative;display:flex;align-items:center;gap:10px;border-radius:999px;padding:12px 14px;background:#ffffff0f;border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 38px #00000042;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transform:translateZ(0);transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}.searchBoxOpen .searchInputWrap,.searchInputWrap:focus-within{border-color:#7c5cff59;background:#ffffff14;box-shadow:0 22px 60px #00000057;transform:translateY(-1px)}.searchIcon{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:#7c5cff2e;border:1px solid rgba(124,92,255,.22);color:#ffffffeb;font-weight:900}.searchInput{width:100%;border:none;outline:none;background:transparent;color:#fffffff0;font-size:16px;line-height:1.2;letter-spacing:-.01em}.searchInput::placeholder{color:#ffffff8c}.searchHint{font-size:12px;padding:6px 10px;border-radius:999px;background:#00000038;border:1px solid rgba(255,255,255,.12);color:#ffffffbd;white-space:nowrap}.searchDropdown{z-index:2000;position:absolute;left:0;right:0;top:calc(100% + 10px);border-radius:18px;padding:8px;background:#0a0c18f5;border:1px solid rgba(255,255,255,.12);box-shadow:0 26px 80px #00000073;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transform:translateY(-6px) scale(.99);pointer-events:none;transition:opacity .14s ease,transform .14s ease;max-height:360px;overflow:auto;z-index:50}.searchDropdown.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.searchItem{width:100%;border:none;border-bottom:1px solid rgba(255,255,255,.08);background:transparent;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:14px;cursor:pointer;color:#ffffffe0;transition:background .12s ease,transform .12s ease}.searchItem:hover{background:#ffffff1a}.searchItem.active{background:#7c5cff47;border:1px solid rgba(124,92,255,.24);transform:translateY(-1px)}.searchItemMain{display:flex;flex-direction:column;gap:2px}.searchItemTitle{font-weight:900;letter-spacing:-.01em;color:#fffffff2}.searchItemMeta{font-size:12px;opacity:.82}.searchItemRight{opacity:.6;font-weight:900}.searchEmpty{padding:14px;border-radius:14px;background:#ffffff0a;border:1px dashed rgba(255,255,255,.12)}.searchEmptyTitle{font-weight:900}.searchEmptySub{font-size:13px;opacity:.72;margin-top:2px}.searchInputWrap:focus-within{outline:3px solid rgba(124,92,255,.18);outline-offset:2px}:root[data-theme=light] .searchInputWrap{background:#ffffffc7;border:1px solid rgba(10,12,24,.1);box-shadow:0 18px 38px #0a0c181f}:root[data-theme=light] .searchInput{color:#0a0c18eb}:root[data-theme=light] .searchInput::placeholder{color:#0a0c1873}:root[data-theme=light] .searchHint{background:#0a0c180f;border:1px solid rgba(10,12,24,.1);color:#0a0c18a6}:root[data-theme=light] .searchDropdown{z-index:2000;background:#ffffffeb;border:1px solid rgba(10,12,24,.1);box-shadow:0 26px 80px #0a0c182e}:root[data-theme=light] .searchItem{color:#0a0c18e0}:root[data-theme=light] .searchItem:hover{background:#0a0c180f}:root[data-theme=light] .searchItem.active{background:#7c5cff24;border:1px solid rgba(124,92,255,.18)}:root[data-theme=light] .searchItemMeta{opacity:.62}:root[data-theme=light] .searchIcon{color:#0a0c18db;background:#7c5cff29;border:1px solid rgba(124,92,255,.18)}@media(max-width:640px){.searchHint{display:none}.searchInputWrap{padding:11px 12px}}.jt{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:13px;line-height:1.45}.jtBlock{margin:2px 0}.jtRow{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:12px}.jtRow:hover{background:#ffffff0a}.jtBranch{-webkit-user-select:none;user-select:none}.jtToggle{width:26px;height:26px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:#ffffff08;color:inherit;cursor:pointer}.jtKey{color:#ffffffeb;font-weight:600}.jtColon{color:#ffffff59}.jtMeta{color:#ffffffa6}.jtVal_string{color:#b4ffd2f2}.jtVal_number{color:#a0d2fff2}.jtVal_boolean{color:#ffd2a0f2}.jtVal_object{color:#fffc}.jtChildren{margin-left:6px}.treeSearch{height:34px;width:240px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:#ffffff0a;color:#ffffffeb;font-size:13px}.treeSearch::placeholder{color:#ffffff73}.treeSearch:focus{outline:none;border-color:#96b4ff73;box-shadow:0 0 0 3px #78a0ff2e}.toast{position:fixed;top:16px;left:50%;transform:translate(-50%);padding:10px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:#0a0e18bf;color:#ffffffeb;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:9999;font-size:13px}.jtRowActive{background:#78a0ff1a;border:1px solid rgba(120,160,255,.22)}.jtRowMatch{box-shadow:inset 0 0 0 1px #8cdcff2e}.jtActions{margin-left:auto;display:inline-flex;gap:8px;opacity:0}.jtRow:hover .jtActions{opacity:1}.jtActionBtn{height:28px;width:28px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#ffffff08;color:#ffffffd9;cursor:pointer}.jtActionBtn:hover{background:#ffffff0f}.jtActionPath{font-size:14px}.jtLoadMoreWrap{margin:8px 0 10px}.jtLoadMore{padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:#ffffff0a;color:#ffffffd9;cursor:pointer}.jtHint{margin-top:6px;font-size:12px;color:#ffffff8c}@media(max-width:900px){.treeSearch{width:180px}}.paletteOverlay{position:fixed;inset:0;z-index:1000;display:grid;place-items:start center;padding:72px 16px 16px}.paletteBackdrop{position:fixed;inset:0;border:0;background:#0000008c}.palettePanel{position:relative;width:min(760px,100%);border-radius:18px;border:1px solid var(--border);background:var(--panel);box-shadow:0 20px 60px #0000008c;overflow:visible}.paletteHeader{display:flex;align-items:baseline;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid var(--border)}.paletteTitle{font-weight:700;letter-spacing:-.02em}.paletteHint{font-size:12px;color:var(--muted)}.paletteGrid{display:grid;grid-template-columns:1.15fr 1fr;gap:10px;padding:0 16px 12px}.paletteSection{border:1px solid var(--border);border-radius:14px;overflow:hidden}.paletteSectionTitle{font-size:12px;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--border);background:#ffffff05}.paletteList{display:flex;flex-direction:column;max-height:240px;overflow:auto}.paletteItem{text-align:left;border:0;background:transparent;padding:10px 12px;cursor:pointer}.paletteItem:hover{background:#ffffff0a}.paletteItemTitle{font-weight:600}.paletteItemMeta{font-size:12px;color:var(--muted)}.paletteEmpty{padding:12px;font-size:13px}.paletteFooter{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px 14px;border-top:1px solid var(--border);color:var(--muted)}.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:26px;padding:2px 8px;border-radius:10px;border:1px solid var(--border);background:#ffffff05;color:var(--text);font-size:12px;line-height:20px}.dotSep{opacity:.7}@media(max-width:900px){.paletteGrid{grid-template-columns:1.15fr 1fr}.paletteOverlay{padding-top:60px}}.toolCard{padding:18px}.rowBetween{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.row{display:flex}.grid2,.grid3{display:grid;grid-template-columns:1.15fr 1fr;gap:14px}@media(max-width:900px){.grid2,.grid3{grid-template-columns:1.15fr 1fr}}.inset{background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:16px}.label{font-size:12px;color:#ffffffa6;margin-bottom:8px}.input,.textarea,.select{width:100%;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:#0003;color:#ffffffeb;padding:10px 12px}.textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.pre{white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:13px;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:#00000038;max-height:420px;overflow:auto}.btn{border-radius:999px;padding:10px 14px;border:1px solid rgba(255,255,255,.14);background:#ffffff14;color:#ffffffeb;cursor:pointer}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.ghost{background:transparent}.badge{padding:6px 10px;border-radius:999px;font-size:12px;border:1px solid rgba(255,255,255,.12)}.badge.danger{border-color:#ff506e59;color:#ff8ca0f2;background:#ff506e14}.colorSwatch{width:44px;height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.16);box-shadow:0 10px 30px #00000059}.paletteDot{width:28px;height:28px;border-radius:999px;border:1px solid rgba(255,255,255,.18);cursor:pointer}.formats{display:flex;flex-direction:column;gap:10px}.formatRow{display:grid;grid-template-columns:1.15fr 1fr;gap:10px;align-items:center}.formatLabel{font-weight:700}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:13px}.gradientPreview{width:100%;height:120px;border-radius:18px;border:1px solid rgba(255,255,255,.1);box-shadow:0 16px 60px #00000059}.diagram{max-height:320px;overflow:auto;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:#0003;padding:10px}.diagramLine{display:flex;gap:10px;align-items:center;padding:6px 8px;border-radius:10px}.diagramLine:hover{background:#ffffff0a}.diagramType{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12);color:#fffc}.diagramPath{color:#ffffffe6}.stat{padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:#0003}.statLabel{font-size:12px;color:#ffffffa6}.statValue{font-size:20px;font-weight:800;margin-top:6px}.searchSuggest{margin-top:10px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.06);background:#ffffff08}.searchSuggestLabel{font-size:12px;color:#ffffffa6;margin-bottom:8px}.searchSuggestRow{display:flex;flex-wrap:wrap;gap:8px}.searchSuggestChip{cursor:pointer;border:1px solid rgba(255,255,255,.1);background:#ffffff0d;color:#ffffffe6;border-radius:999px;padding:8px 10px;min-height:34px}.searchSuggestChip:hover{background:#ffffff14}.showcaseTop{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.showcaseTry{font-size:14px;line-height:1.4}.showcaseTryWord{color:#ffffffeb;font-weight:600}.showcaseGrid{display:grid;gap:14px;grid-template-columns:1.15fr 1fr;grid-auto-rows:300px}@media(max-width:980px){.showcaseGrid{grid-template-columns:1.15fr 1fr;grid-auto-rows:auto}}.showcaseCard{position:relative;overflow:hidden}.showcaseTall{grid-row:span 2}.cardHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}.cardActions{display:flex;gap:8px;align-items:center}.btnSm{padding:8px 10px;border-radius:12px;font-size:12px}.showcaseBody{height:calc(100% - 44px);overflow:hidden}.showcaseEmbed{transform:scale(.85);transform-origin:top left;width:calc(100% / .85);height:calc(100% / .85)}@media(max-width:980px){.showcaseEmbed{transform:none;width:100%;height:auto}.showcaseBody{height:auto}}.showcaseMiniJson{height:100%;overflow:auto;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px;background:#0000002e}.colorGrid{display:grid;grid-template-columns:1.15fr 1fr;gap:14px;align-items:start}@media(max-width:980px){.colorGrid{grid-template-columns:1fr}}.pickerRow{display:grid;grid-template-columns:300px 1fr;gap:14px;align-items:start}@media(max-width:560px){.pickerRow{grid-template-columns:1fr}}.ring{width:300px;height:300px;border-radius:999px;position:relative;display:grid;place-items:center;padding:18px;background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);box-shadow:0 16px 50px #0000006b;border:1px solid rgba(255,255,255,.12);touch-action:none}@media(max-width:560px){.ring{width:260px;height:260px;justify-self:center}}.ring:before{content:"";position:absolute;inset:9px;border-radius:999px;background:#0c0e18b8;box-shadow:inset 0 0 0 1px #ffffff14}.sv{width:100%;height:100%;border-radius:18px;position:relative;overflow:hidden;box-shadow:0 8px 30px #00000059;touch-action:none;z-index:1}.svHue{position:absolute;inset:0}.svWhite{position:absolute;inset:0;background:linear-gradient(to right,#fff,#fff0)}.svBlack{position:absolute;inset:0;background:linear-gradient(to top,#000,#0000)}.svThumb{position:absolute;width:16px;height:16px;border-radius:999px;border:2px solid rgba(255,255,255,.95);box-shadow:0 8px 18px #00000080;transform:translate(-50%,-50%);pointer-events:none}.ringThumb{position:absolute;width:16px;height:16px;border-radius:999px;border:2px solid rgba(255,255,255,.95);box-shadow:0 10px 22px #0000008c;transform:translate(-50%,-50%);pointer-events:none;z-index:2}.colorMeta{display:grid;gap:10px;align-content:start}.paletteRow{display:flex;gap:10px;flex-wrap:wrap}.paletteDot{width:22px;height:22px;border-radius:999px;border:1px solid rgba(255,255,255,.18);cursor:pointer}.paletteDot:hover{transform:translateY(-1px)}.sliders{margin-top:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}.sliderItem{padding:10px;border-radius:14px;background:#ffffff0f;border:1px solid rgba(255,255,255,.1)}.sliderTop{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.sliderLabel{font-size:12px;font-weight:700;opacity:.95}.sliderValue{font-size:12px;font-variant-numeric:tabular-nums;opacity:.85}.sliderLine{display:flex;align-items:center;gap:10px}.sliderLine input[type=range]{width:100%;height:22px;background:transparent}.sliderLine input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:#ffffff29}.sliderLine input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:999px;background:#ffffffd9;border:1px solid rgba(0,0,0,.25);margin-top:-6px;box-shadow:0 10px 20px #00000059}.sliderLine input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:#ffffff29}.sliderLine input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:999px;background:#ffffffd9;border:1px solid rgba(0,0,0,.25)}.searchItemMeta{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.searchBadge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.2px;background:#7c5cff2e;color:#d2c8fff2;border:1px solid rgba(124,92,255,.22)}.searchSub{font-size:12px;opacity:.78}.hexPill{border-radius:999px;padding-left:14px;padding-right:14px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}.swatchRound{width:42px;height:42px;border-radius:999px;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.16);background:#ffffff0f;box-shadow:0 8px 24px #00000040}.colorInputRound{width:56px;height:56px;border:none;padding:0;background:transparent;cursor:pointer}.colorInputRound::-webkit-color-swatch-wrapper{padding:0}.colorInputRound::-webkit-color-swatch{border:none;border-radius:999px}.colorInputRound::-moz-color-swatch{border:none;border-radius:999px}.iconRow{display:flex;align-items:center;gap:8px}.iconRowLoose{gap:10px}.iconBtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#ffffff0f;color:#ffffffe6;cursor:pointer}.iconBtn:hover{background:#ffffff1a;border-color:#ffffff2e}.iconBtn:active{transform:translateY(1px)}.iconBtn:focus{outline:none;box-shadow:0 0 0 4px #8c78ff2e}


/* --- Mobile layout fixes (v25) --- */
@media (max-width: 720px){
  .split{ grid-template-columns: 1fr; gap:14px; }
  .ctaRow{ flex-direction: column; }
  .ctaRow .btn{ width:100%; text-align:center; }
  .callout{ padding:16px; }
}
@media (max-width: 420px){
  h1{ font-size: 30px; line-height:1.15; }
  .lead{ font-size: 15px; }
  .chip{ font-size: 12px; padding:7px 11px; }
}


/* Mobile layout fixes (v26): prevent card/button clipping on small screens */
@media (max-width:720px){
  .grid,.grid5,.twoCol,.split,.showcaseGrid,.formatRow,.grid2,.grid3,.paletteGrid{grid-template-columns:1fr!important}
  .showcaseGrid{grid-auto-rows:auto!important}
  .showcaseTall{grid-row:auto!important}
  .cardHead{flex-wrap:wrap;align-items:flex-start}
  .cardHead>*{min-width:0}
  .cardTitle{word-break:break-word}
  .cardActions{width:100%;justify-content:flex-start}
  .btnSm{width:100%;text-align:center}
  .container,.section,.card{overflow-x:hidden}
}


/* ========= MOBILE LAYOUT FIX (Hero + cards) ========= */
html, body {
  width: 100%;
  overflow-x: hidden; /* stop sideways clipping */
}

/* safer default container padding on mobile */
.wrap, .container, .page, main {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* HERO: remove desktop constraints */
.hero, .heroSection, .topHero, .landingHero {
  min-height: auto !important;
  height: auto !important;
  overflow: visible !important;
}

/* Force single-column hero + remove absolute demo positioning on mobile */
@media (max-width: 820px) {
  .hero__grid,
  .heroGrid,
  .split,
  .grid2,
  .twoCol,
  .showcaseGrid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Headline scaling */
  .hero__title,
  .heroTitle,
  .headline,
  h1 {
    font-size: clamp(34px, 9vw, 48px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
  }

  /* Subtitle scaling */
  .hero__subtitle,
  .heroSubtitle,
  .subhead {
    font-size: clamp(15px, 4.2vw, 18px) !important;
  }

  /* Any demo/mockup card positioned absolutely on desktop */
  .hero__right,
  .heroRight,
  .mock,
  .mockup,
  .demo,
  .preview,
  .heroCard {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Buttons: full-width */
  .ctaRow,
  .actionsRow {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .ctaRow .btn,
  .ctaRow a,
  .actionsRow .btn,
  .actionsRow a,
  .btn.primary,
  .btn.ghost,
  .btnSm,
  .cardHead .btn,
  .cardHead a {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Card header wrap so button never clips */
  .cardHead,
  .cardTop,
  .tileHead {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
}

/* Tiny phones */
@media (max-width: 380px) {
  .hero__title,
  .heroTitle,
  .headline,
  h1 {
    font-size: clamp(30px, 10vw, 40px) !important;
  }
}



/* =========================================================
   FINAL MOBILE FIX (v28)
   - Fixes Home showcase embedded tools overflowing on mobile
   - Prevents clipped buttons / pills / side panels
   ========================================================= */
@media (max-width: 860px){
  /* Home showcase: embedded full tools are too heavy for mobile preview */
  .showcaseBody{ display:none !important; }
  .showcaseCard{ padding-bottom: 14px; }
  .showcaseCard .cardHead{ margin-bottom: 0; }
  .showcaseCard::after{
    content:"";
    display:block;
    margin-top: 12px;
    height: 120px;
    border-radius: 18px;
    background:
      radial-gradient(500px 220px at 20% 30%, rgba(124,58,237,.35), transparent 55%),
      radial-gradient(500px 220px at 80% 70%, rgba(56,189,248,.22), transparent 60%),
      rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,.10);
  }
}

/* Buttons / header rows: allow wrapping so nothing gets cut */
@media (max-width: 720px){
  .rowBetween{ flex-wrap: wrap !important; align-items: flex-start !important; gap: 12px !important; }
  .row{ flex-wrap: wrap !important; }
  .row > .btn, .row > a.btn{ width: 100% !important; justify-content: center !important; }
  .toolbar .input{ min-width: 0 !important; width: 100% !important; }
  .toolbar{ width: 100%; }
  .pillRow, .chips, .formatRow{ flex-wrap: wrap !important; }
  /* any side-by-side panels inside tools */
  .formatPills, .formats, .formatsList{ max-width: 100% !important; overflow: hidden !important; }
}

/* Safety: never allow fixed widths to cause horizontal scroll */
@media (max-width: 560px){
  .pickerRow{ grid-template-columns: 1fr !important; }
  .ring{ width: 240px !important; height: 240px !important; }
}