.mag7{
  --bg1:#f3f4f7;--bg2:#d3d8e1;--ink:#101114;--ink-2:#5b616c;--line:rgba(16,17,20,.10);
  --panel:rgba(255,255,255,.78);--panel-strong:rgba(255,255,255,.94);--accent:#101114;--shadow:0 10px 30px rgba(16,17,20,.12);
  position:relative;width:100%;height:100%;min-height:420px;overflow:hidden;font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);
  background:radial-gradient(120% 90% at 50% 20%,var(--bg1) 0%,var(--bg2) 100%);-webkit-font-smoothing:antialiased;transition:background .4s;
  -webkit-user-select:none;user-select:none;box-sizing:border-box}
.mag7 *{box-sizing:border-box}
.mag7[data-theme="dark"]{
  --bg1:#1b1d22;--bg2:#0b0c0f;--ink:#f2f3f5;--ink-2:#a1a6b0;--line:rgba(255,255,255,.12);
  --panel:rgba(24,26,31,.72);--panel-strong:rgba(24,26,31,.94);--accent:#f2f3f5;--shadow:0 10px 30px rgba(0,0,0,.45)}
.mag7[data-bg="transparent"]{background:transparent}
.mag7 .m7-stage{position:absolute;inset:0;touch-action:none;opacity:0;transform:scale(.965);transition:opacity .8s ease,transform 1.1s cubic-bezier(.2,.8,.2,1)}
.mag7.is-ready .m7-stage{opacity:1;transform:none}
.mag7 canvas{display:block;outline:none}
.mag7 .m7-ui{position:absolute;z-index:5;pointer-events:none}
.mag7 .m7-ui>*{pointer-events:auto}
.mag7 .m7-brand{top:16px;left:20px;display:flex;flex-direction:column;gap:2px}
.mag7 .m7-brand .m7-name{font-weight:800;font-size:22px;letter-spacing:-.02em;font-style:italic;line-height:1}
.mag7 .m7-brand .m7-sub{font-size:12px;color:var(--ink-2);letter-spacing:.06em;text-transform:uppercase}
.mag7 .m7-topright{top:16px;right:16px;display:flex;gap:8px}
.mag7 .m7-btn{appearance:none;border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:var(--ink);border-radius:999px;padding:9px 14px;font:600 12.5px/1 inherit;cursor:pointer;display:inline-flex;align-items:center;gap:7px;margin:0;
  transition:background .2s,transform .15s,border-color .2s,color .2s;box-shadow:var(--shadow)}
.mag7 .m7-btn:hover{transform:translateY(-1px)}
.mag7 .m7-btn.on{background:var(--accent);color:var(--bg1)}
.mag7 .m7-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mag7 .m7-icon{padding:9px}
.mag7 .m7-bottom{left:0;right:0;bottom:16px;display:flex;flex-direction:column;align-items:center;gap:10px}
.mag7 .m7-swatches{display:flex;gap:10px;padding:8px;border-radius:999px;background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);box-shadow:var(--shadow)}
.mag7 .m7-sw{width:38px;height:38px;border-radius:50%;border:2px solid transparent;padding:3px;background:transparent;cursor:pointer;position:relative;transition:transform .2s,border-color .2s;margin:0}
.mag7 .m7-sw i{display:block;width:100%;height:100%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),inset -4px -6px 10px rgba(0,0,0,.18),inset 3px 4px 8px rgba(255,255,255,.35)}
.mag7 .m7-sw:hover{transform:scale(1.08)}
.mag7 .m7-sw.on{border-color:var(--accent)}
.mag7 .m7-colorname{font-size:12px;color:var(--ink-2);letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.mag7 .m7-features{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;z-index:5}
.mag7 .m7-feat{appearance:none;border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--ink);margin:0;
  border-radius:14px;padding:10px 12px;font:600 12px/1.15 inherit;cursor:pointer;text-align:left;display:flex;align-items:center;gap:10px;min-width:190px;transition:transform .15s,background .2s,color .2s;box-shadow:var(--shadow)}
.mag7 .m7-feat:hover{transform:translateX(-2px)}
.mag7 .m7-feat.on{background:var(--accent);color:var(--bg1)}
.mag7 .m7-feat b{display:block;font-size:12.5px}
.mag7 .m7-feat small{display:block;font-weight:500;color:inherit;opacity:.7;margin-top:2px;font-size:11px}
.mag7 .m7-feat .m7-n{width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;font-size:11px;flex:none}
.mag7 .m7-hs{position:absolute;left:0;top:0;z-index:4;pointer-events:auto;cursor:pointer;opacity:0;transition:opacity .25s;will-change:transform}
.mag7 .m7-hs.vis{opacity:1}
.mag7 .m7-hs .m7-dot{width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(255,255,255,.55),0 2px 10px rgba(0,0,0,.25);position:relative}
.mag7 .m7-hs .m7-dot::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1.5px solid var(--accent);opacity:.5;animation:m7ping 2.2s ease-out infinite}
@keyframes m7ping{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.6);opacity:0}}
.mag7 .m7-hs .m7-lbl{position:absolute;left:18px;top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--panel-strong);border:1px solid var(--line);border-radius:10px;
  padding:7px 10px;font:600 12px/1.2 inherit;box-shadow:var(--shadow);opacity:0;transition:opacity .2s;pointer-events:none}
.mag7 .m7-hs:hover .m7-lbl,.mag7 .m7-hs.active .m7-lbl{opacity:1}
.mag7 .m7-hs.left .m7-lbl{left:auto;right:18px}
.mag7 .m7-card{position:absolute;left:20px;bottom:96px;max-width:340px;z-index:6;background:var(--panel-strong);border:1px solid var(--line);
  border-radius:18px;padding:16px 18px;box-shadow:var(--shadow);backdrop-filter:blur(14px);transform:translateY(12px);opacity:0;pointer-events:none;transition:all .3s}
.mag7 .m7-card.show{opacity:1;transform:none;pointer-events:auto}
.mag7 .m7-card h3{margin:0 24px 6px 0;font-size:15px;letter-spacing:-.01em;font-weight:700}
.mag7 .m7-card p{margin:0;font-size:13px;line-height:1.45;color:var(--ink-2)}
.mag7 .m7-card .m7-x{position:absolute;right:10px;top:8px;border:0;background:transparent;font-size:18px;cursor:pointer;color:var(--ink-2)}
.mag7 .m7-hint{position:absolute;left:50%;bottom:104px;transform:translateX(-50%);font-size:12px;color:var(--ink-2);z-index:4;
  display:flex;align-items:center;gap:8px;opacity:1;transition:opacity .5s;pointer-events:none;white-space:nowrap}
.mag7 .m7-hint.hide{opacity:0}
.mag7 .m7-loader{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:radial-gradient(120% 90% at 50% 20%,var(--bg1) 0%,var(--bg2) 100%);transition:opacity .5s}
.mag7 .m7-loader.done{opacity:0;pointer-events:none}
.mag7 .m7-loader .m7-box{text-align:center}
.mag7 .m7-loader .m7-box::before{content:"";display:block;width:46px;height:46px;margin:0 auto 12px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);animation:m7spin .9s linear infinite}
@keyframes m7spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.mag7 .m7-stage{transition:none}.mag7 .m7-loader .m7-box::before{animation:none}}
.mag7 .m7-loader .m7-name{font-weight:800;font-size:34px;font-style:italic;letter-spacing:-.02em}
.mag7 .m7-loader .m7-bar{width:180px;height:3px;background:var(--line);border-radius:3px;margin:14px auto 8px;overflow:hidden}
.mag7 .m7-loader .m7-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
.mag7 .m7-loader small{color:var(--ink-2);font-size:12px}
.mag7.narrow .m7-features{right:10px;top:auto;bottom:92px;transform:none;flex-direction:row;overflow-x:auto;left:10px;padding-bottom:4px;scrollbar-width:none}
.mag7.narrow .m7-feat{min-width:150px;flex:none}
.mag7.narrow .m7-card{left:10px;right:10px;max-width:none;bottom:166px}
.mag7.narrow .m7-brand .m7-name{font-size:18px}
.mag7.narrow .m7-hint{display:none}
.mag7.narrow .m7-brand .m7-sub{display:none}
.mag7.narrow .m7-btn span{display:none}
.mag7.narrow .m7-btn{padding:9px}