/* Viral Banner Blitz. Own look (Marty 2026-11-13: every site its own look, vibrant): pop-art blitz on warm paper. Hot pink, electric
   blue, sunshine yellow and mint, thick ink outlines with hard offset shadows, halftone dots. Bricolage Grotesque + DM Sans + Space Mono.
   Not the InstantAdPay mint, not the Downline Banners ultraviolet + lime, not LinkSpin. Neutral class names (no "ad"/"banner" words:
   ad blockers hide elements with those). */
:root{
  --bg:#fff4dc;--bg2:#fffaf0;--panel:#ffffff;--panel2:#fff0c7;--ink:#14121f;--muted:#4d4862;--faint:#7c7690;
  --line:rgba(20,18,31,.14);--line2:#14121f;--edge:2.5px solid #14121f;--shadow:5px 5px 0 #14121f;--shadow-sm:3px 3px 0 #14121f;
  --hot:#ff2d87;--hot-ink:#14121f;--hot-soft:#ffd3e6;--amber:#ffd400;--amber-soft:#fff3a8;
  --sky:#2b59ff;--sky-soft:#dbe4ff;--ok:#00a878;--ok-soft:#c9f7e6;--bad:#e5243b;--bad-soft:#ffd9dd;--mint:#14d9a0;
  --disp:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;--body:"DM Sans","Segoe UI",system-ui,sans-serif;--mono:"Space Mono",ui-monospace,Consolas,monospace;
  --r:16px;--tile:125px;color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--body);min-height:100vh;
  background-image:radial-gradient(rgba(255,45,135,.16) 1.4px,transparent 1.6px),radial-gradient(rgba(43,89,255,.12) 1.4px,transparent 1.6px);
  background-size:22px 22px,22px 22px;background-position:0 0,11px 11px}
a{color:var(--sky);text-decoration-thickness:2px;text-underline-offset:2px} a:hover{color:var(--hot)}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--disp);line-height:1.04;margin:0 0 10px;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(32px,5.6vw,62px);font-weight:800}
h2{font-size:clamp(21px,2.7vw,28px);font-weight:800}
h3{font-size:17px;font-weight:800}
p{margin:8px 0}
.muted{color:var(--muted)} .small{font-size:13.5px} .mono{font-family:var(--mono)} .center{text-align:center}
/* nav */
nav.top{position:sticky;top:0;z-index:30;background:var(--amber);border-bottom:var(--edge)}
nav.top .wrap{display:flex;align-items:center;gap:14px;min-height:62px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-width:0;margin-right:auto}
.brand img{flex:none}
.brand .wm{font:800 20px/1 var(--disp);letter-spacing:-.03em;white-space:nowrap}
.brand .wm b{color:var(--hot);-webkit-text-stroke:.6px var(--ink)}
.brand .by{display:block;font:500 11px/1.2 var(--body);color:var(--ink);opacity:.7;letter-spacing:.02em;margin-top:3px}
nav.top .links{display:flex;gap:6px;flex-wrap:wrap}
nav.top .links a{color:var(--ink);text-decoration:none;font-weight:700;font-size:14px;padding:6px 11px;border-radius:999px;border:2px solid transparent}
nav.top .links a:hover{border-color:var(--ink);background:var(--bg2)}
nav.top .links a.on{color:#fff;background:var(--ink);border-color:var(--ink)}
@media (max-width:720px){nav.top .links{width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;margin:0 -4px 2px}nav.top .links::-webkit-scrollbar{display:none}nav.top .links a{flex:none}}
/* hero */
.hero{padding:34px 0 8px}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font:700 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  background:var(--mint);border:var(--edge);border-radius:999px;padding:7px 12px;box-shadow:var(--shadow-sm);margin-bottom:16px;transform:rotate(-1.5deg)}
.hero .eyebrow i{width:9px;height:9px;border-radius:50%;background:var(--hot);border:1.5px solid var(--ink);animation:pulse 1.4s ease-in-out infinite}
.hero h1 em{font-style:normal;color:var(--hot);-webkit-text-stroke:1px var(--ink);text-shadow:3px 3px 0 var(--amber)}
.hero .lead{color:var(--muted);font-size:clamp(16px,1.8vw,18.5px);max-width:720px}
@keyframes pulse{50%{transform:scale(1.35)}}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:800 15px/1 var(--disp);letter-spacing:.005em;padding:13px 20px;border-radius:12px;border:var(--edge);cursor:pointer;
  background:var(--hot);color:#fff;text-decoration:none;box-shadow:var(--shadow);transition:transform .1s ease,box-shadow .1s ease}
.btn:hover{color:#fff;transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:var(--shadow-sm)}
.btn.sec{background:var(--panel);color:var(--ink)} .btn.sec:hover{color:var(--ink)}
.btn.amber{background:var(--amber);color:var(--ink)} .btn.amber:hover{color:var(--ink)}
.btn.quiet{background:transparent;color:var(--ink);box-shadow:none;border:2px solid var(--line)} .btn.quiet:hover{box-shadow:none;transform:none;border-color:var(--ink);color:var(--ink)}
.btn.small{padding:8px 12px;font-size:13px;border-radius:10px;box-shadow:var(--shadow-sm)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* panels */
.card{background:var(--panel);border:var(--edge);border-radius:var(--r);padding:20px;margin:18px 0;box-shadow:var(--shadow)}
.card>h2:first-child,.card>h3:first-child{margin-top:0}
.note{border-radius:12px;padding:10px 14px;margin:12px 0;background:var(--sky-soft);border:2px solid var(--sky);font-size:14.5px}
.note.err{background:var(--bad-soft);border-color:var(--bad)} .note.ok{background:var(--ok-soft);border-color:var(--ok)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:12px 0}
.stat{background:var(--bg2);border:var(--edge);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow-sm)}
.stat:nth-child(4n+1){background:var(--amber-soft)} .stat:nth-child(4n+2){background:var(--hot-soft)} .stat:nth-child(4n+3){background:var(--sky-soft)} .stat:nth-child(4n+4){background:var(--ok-soft)}
.stat b{display:block;font:800 26px/1.15 var(--disp);font-variant-numeric:tabular-nums}
.stat span{color:var(--muted);font-size:13px}
/* the shift meter */
.meter{background:var(--panel);border:var(--edge);border-radius:var(--r);padding:16px 18px;margin:18px 0 6px;box-shadow:var(--shadow)}
.meter-top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.meter-top .big{font:800 38px/1 var(--disp);font-variant-numeric:tabular-nums;color:var(--sky)}
.meter-top .big small{font-size:18px;color:var(--muted);font-weight:700}
.meter-top .lbl{font-weight:700}
.meter-top .side{margin-left:auto;color:var(--muted);font-size:13.5px}
.bar{position:relative;height:22px;border-radius:999px;background:var(--bg);border:var(--edge);overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--hot),var(--amber));border-right:2.5px solid var(--ink);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.bar i::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.35) 0 10px,transparent 10px 20px);background-size:40px 100%;animation:slide 1s linear infinite}
@keyframes slide{to{background-position:40px 0}}
.ticks{display:flex;justify-content:space-between;margin-top:6px;font:700 11px var(--mono);color:var(--faint)}
.visit-note{font-size:13.5px;color:var(--muted);margin-top:10px;min-height:20px}
.visit-note.ok{color:var(--ok);font-weight:700}
/* the loop grid: 125x125 tiles */
.loop-head{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:28px 0 12px}
.loop-head h2{margin:0}
.loop-head .side{margin-left:auto;color:var(--muted);font-size:13.5px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,var(--tile));gap:12px;justify-content:center}
.tile{position:relative;display:block;width:var(--tile);aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--panel);border:var(--edge);box-shadow:var(--shadow-sm);line-height:0;text-decoration:none;transition:transform .1s ease}
.tile:hover{transform:rotate(-2deg) scale(1.04);z-index:2}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.tile .pos{position:absolute;left:4px;top:4px;font:700 10.5px/1 var(--mono);background:var(--amber);color:var(--ink);border:1.5px solid var(--ink);padding:3px 5px;border-radius:6px}
.tile .who{position:absolute;left:0;right:0;bottom:0;font:700 10.5px/1.2 var(--body);background:var(--ink);color:#fff;padding:5px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .15s}
.tile:hover .who,.tile:focus-visible .who{opacity:1}
.tile.next{border-color:var(--hot);box-shadow:0 0 0 3px var(--ink),5px 5px 0 3px var(--hot)}
.tile.next .pos{background:var(--hot);color:#fff}
.tile.fresh{animation:enter .6s cubic-bezier(.2,1.4,.4,1)}
@keyframes enter{from{transform:scale(.4) rotate(-12deg);opacity:0}}
.tile.open{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;border:2.5px dashed var(--ink);box-shadow:none;background:rgba(255,255,255,.55);color:var(--muted);font:700 12px/1.25 var(--body);text-align:center;padding:8px}
.tile.open:hover{background:var(--mint);color:var(--ink)}
.tile.open b{font:800 24px/1 var(--disp);color:var(--hot)}
.queue{display:flex;gap:10px;overflow-x:auto;padding:4px 6px 12px 2px;scrollbar-width:thin}
.queue .tile{--tile:72px;flex:none;border-radius:8px}
.queue .tile .pos{font-size:9.5px}
.legend{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin:10px 0 0}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:13px;height:13px;border-radius:3px;border:2.5px solid var(--hot);box-shadow:0 0 0 1.5px var(--ink)}
.legend i.n{border:2px solid var(--ink);box-shadow:none;background:var(--panel)}
@media (max-width:600px){:root{--tile:calc((100vw - 32px - 36px) / 4)}.grid{grid-template-columns:repeat(4,var(--tile));gap:12px}.meter-top .big{font-size:30px}.tile:hover{transform:none}}
/* steps */
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:12px 0;padding:0;list-style:none;counter-reset:s}
.how li{counter-increment:s;background:var(--panel);border:var(--edge);border-radius:14px;padding:14px 14px 14px 54px;position:relative;box-shadow:var(--shadow-sm)}
.how li::before{content:counter(s);position:absolute;left:12px;top:13px;width:30px;height:30px;border-radius:50%;background:var(--hot);color:#fff;border:2px solid var(--ink);font:800 15px/26px var(--disp);text-align:center}
.how li:nth-child(3n+2)::before{background:var(--sky)} .how li:nth-child(3n+3)::before{background:var(--amber);color:var(--ink)}
.how li b{display:block;margin-bottom:2px}
/* tables + forms */
table.t{width:100%;border-collapse:collapse;font-size:14.5px}
table.t th,table.t td{text-align:left;padding:9px 8px;border-bottom:1.5px solid var(--line);vertical-align:middle}
table.t th{color:var(--ink);font:700 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;border-bottom:2.5px solid var(--ink)}
table.t td.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
table.t tr.me td{background:var(--amber-soft)}
.scroll{overflow-x:auto}
.rank{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--bg2);border:2px solid var(--ink);font:800 13px var(--disp)}
tr:nth-child(2) .rank{background:var(--amber)} tr:nth-child(3) .rank{background:var(--hot);color:#fff} tr:nth-child(4) .rank{background:var(--sky);color:#fff}
.field{display:flex;flex-direction:column;gap:5px;margin:10px 0}
.field label{font-size:13.5px;color:var(--ink);font-weight:700}
.field input{background:var(--bg2);border:var(--edge);border-radius:10px;padding:11px 12px;color:var(--ink);font:14px var(--mono);width:100%}
.field input:focus{outline:3px solid var(--sky);outline-offset:1px}
.post-grid{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
@media (max-width:600px){.post-grid{grid-template-columns:1fr}}
.preview{width:125px;height:125px;border-radius:10px;border:2.5px dashed var(--ink);display:grid;place-items:center;color:var(--faint);font-size:12px;text-align:center;overflow:hidden;background:var(--bg2)}
.preview img{width:125px;height:125px;object-fit:cover;display:block}
.mine{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.mine .item{display:flex;gap:12px;background:var(--bg2);border:var(--edge);border-radius:14px;padding:10px;align-items:center;box-shadow:var(--shadow-sm)}
.mine .item img{width:72px;height:72px;border-radius:8px;border:2px solid var(--ink);object-fit:cover;flex:none}
.mine .item .s{font-size:13.5px;min-width:0}
.mine .item .s a{word-break:break-all}
.pill{display:inline-block;font:700 11px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;padding:4px 8px;border-radius:999px;margin-bottom:5px;border:1.5px solid var(--ink)}
.pill.queued{background:var(--sky-soft);color:var(--ink)} .pill.loop{background:var(--amber);color:var(--ink)} .pill.cycled{background:var(--mint);color:var(--ink)}
.share{display:flex;gap:8px;flex-wrap:wrap}.share input{flex:1;min-width:200px;background:var(--bg2);border:var(--edge);border-radius:10px;padding:11px 12px;color:var(--ink);font:14px var(--mono)}
.soon{border:2.5px dashed var(--ink);border-radius:var(--r);padding:26px 20px;text-align:center;background:rgba(255,255,255,.6)}
.soon .tag{display:inline-block;font:700 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--hot);border:2px solid var(--ink);padding:5px 10px;border-radius:999px;margin-bottom:10px;transform:rotate(-2deg)}
/* packages + prizes */
.pk{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:6px}
.pk .card{margin:0}
.pk .card:nth-child(3n+1){background:var(--hot-soft)} .pk .card:nth-child(3n+2){background:var(--sky-soft)} .pk .card:nth-child(3n+3){background:var(--amber-soft)}
.pk-price{font:800 26px/1.15 var(--disp);color:var(--ink);margin:4px 0}
.pk-list{list-style:none;padding:0;margin:6px 0}.pk-list li{font:700 16px/1.6 var(--body)}
.tag-soon{display:inline-block;font:700 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--hot);border:1.5px solid var(--ink);padding:4px 9px;border-radius:999px;margin-top:6px}
.pz{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.pz>div{background:var(--amber-soft);border:var(--edge);border-radius:14px;padding:12px 14px} .pz>div:nth-child(2){background:var(--hot-soft)}
/* footer + toasts */
footer.foot{margin-top:52px;padding:28px 0 40px;border-top:var(--edge);background:var(--ink);color:#d9d4ea;font-size:13.5px;text-align:center}
footer.foot a{color:var(--amber)} footer.foot p{margin:6px 0}
.toasts{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:50;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{pointer-events:auto;display:block;max-width:300px;background:var(--panel);border:var(--edge);border-radius:12px;padding:10px 14px;color:var(--ink);font-size:13.5px;line-height:1.35;
  box-shadow:4px 4px 0 var(--hot);opacity:0;transform:translateY(10px) rotate(-1deg);transition:opacity .35s ease,transform .35s ease;text-decoration:none}
.toast.in{opacity:1;transform:rotate(-1deg)} .toast span{color:var(--muted);font-size:12.5px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}