/* qardd.com. Neo-brutalist family look: ink borders, hard offset shadows, flat colour panels, bold display type.
   One gradient surface per page at most (the .wall in the home hero, the .phead slab on inner pages), never under
   text, blending two palette colours only. The player page has none. Occasion colours arrive as --ia/--ib/--ic/--isky. */
:root{--ink:#1b1426;--paper:#fff3e4;--card:#fff;--hot:#ff4a6e;--cool:#3c5cff;--pop:#ffd447;--muted:#544c60;
  --ia:var(--hot);--ib:var(--pop);--ic:var(--cool);--isky:#fff1e6;
  --display:"Bricolage Grotesque",system-ui,sans-serif;--body:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--bw:3px;--sh:6px}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16.5px/1.55 var(--body);overflow-x:hidden}
a{color:var(--ink);text-decoration-thickness:2px;text-underline-offset:2px}
a:hover{color:var(--cool)}
:focus-visible{outline:3px solid var(--cool);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px;background:var(--card);border:var(--bw) solid var(--ink);padding:6px 10px;z-index:9}
main{max-width:1120px;margin:0 auto;padding:0 16px 48px}
h1,h2,h3{font-family:var(--display);line-height:1.08;margin:0 0 .4em;text-wrap:balance}
h1{font-size:clamp(2.1rem,7vw,3.8rem);font-weight:800;letter-spacing:-.025em}
h2{font-size:clamp(1.4rem,3.6vw,2rem);font-weight:800}
h3{font-size:1.15rem;font-weight:800}
p{margin:0 0 .8em}
.muted{color:var(--muted)}
.kicker{display:inline-block;margin:0 0 .8em;background:var(--ink);color:#fff;font:700 .74rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px}
.lead{font-size:1.12rem;max-width:56ch}

/* pixel strip under the header */
.strip{height:10px;background:repeating-linear-gradient(90deg,var(--hot) 0 10px,var(--pop) 10px 20px,var(--cool) 20px 30px,var(--paper) 30px 40px);border-bottom:var(--bw) solid var(--ink)}

/* header */
header.site{max-width:1120px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
.brand:hover{color:var(--ink)}
.logo{width:42px;height:42px;display:block;transition:transform .2s}
.brand:hover .logo{transform:rotate(-6deg)}
.wm{font:800 1.9rem/1 var(--display);letter-spacing:-.02em}
header.site nav{display:flex;gap:6px;flex-wrap:wrap}
header.site nav a{font-weight:700;text-decoration:none;border:var(--bw) solid var(--ink);background:var(--card);padding:5px 10px;box-shadow:3px 3px 0 var(--ink)}
header.site nav a:hover{background:var(--pop);color:var(--ink)}
header.site nav a.cta{background:var(--hot)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:800 1rem/1.1 var(--body);text-decoration:none;cursor:pointer;background:var(--hot);color:var(--ink);border:var(--bw) solid var(--ink);padding:10px 16px;box-shadow:4px 4px 0 var(--ink);border-radius:0;transition:transform .08s,box-shadow .08s}
.btn:hover{color:var(--ink);transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn.ghost{background:var(--card)}
.btn.cool{background:var(--cool);color:#fff}
.btn.cool:hover{color:#fff}
.btn.big{font-size:1.2rem;padding:14px 24px;box-shadow:6px 6px 0 var(--ink)}
.btn.huge{font:800 clamp(1.4rem,4vw,2rem)/1 var(--display);padding:18px 34px;box-shadow:8px 8px 0 var(--ink)}
.acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* home hero with the accent wall */
.hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);border:var(--bw) solid var(--ink);box-shadow:var(--sh) var(--sh) 0 var(--ink);background:var(--card);margin:10px 0 40px}
.hero .copy{padding:30px 26px 28px}
.wall{background:linear-gradient(135deg,var(--hot),var(--pop));border-left:var(--bw) solid var(--ink);display:grid;place-items:center;min-height:300px;position:relative;overflow:hidden}
.bigcard{width:min(64%,250px);display:block;filter:drop-shadow(7px 7px 0 var(--ink));animation:bob 4s ease-in-out infinite}
.wall .float{position:absolute;width:54px;filter:drop-shadow(3px 3px 0 var(--ink))}
.wall .f1{left:9%;top:12%;transform:rotate(-14deg)}.wall .f2{right:9%;top:16%;transform:rotate(12deg)}.wall .f3{left:13%;bottom:12%;transform:rotate(8deg)}.wall .f4{right:11%;bottom:10%;transform:rotate(-10deg)}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8px) rotate(-1deg)}}

/* sections */
.block{margin:0 0 44px}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:s;padding:0;margin:0;list-style:none}
.steps li{border:var(--bw) solid var(--ink);background:var(--card);padding:16px;box-shadow:4px 4px 0 var(--ink);position:relative}
.steps li::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:38px;height:38px;margin-bottom:10px;background:var(--pop);border:var(--bw) solid var(--ink);font:800 1.2rem/1 var(--display)}
.steps li:nth-child(2)::before{background:var(--hot)}.steps li:nth-child(3)::before{background:var(--cool);color:#fff}
.steps b{display:block;font:800 1.12rem/1.2 var(--display);margin-bottom:4px}
.demos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.demo{display:flex;flex-direction:column;min-width:0}
.demo h3{display:flex;align-items:center;gap:8px;font-size:1.35rem;margin:0 0 4px}
.demo h3 .icon{width:30px;height:30px}
.demo>p{color:var(--muted);margin:0 0 12px}
.demo .full{margin-top:12px;font-weight:700;font-size:.95rem}
.promise{border:var(--bw) solid var(--ink);background:var(--pop);padding:22px;box-shadow:var(--sh) var(--sh) 0 var(--ink);display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.promise .lock{width:64px;height:64px}
.promise p{margin:0;font-weight:600}
.promise .big{font:800 clamp(1.25rem,3vw,1.7rem)/1.2 var(--display);margin:0 0 6px}
.makeone{text-align:center;border:var(--bw) dashed var(--ink);padding:34px 16px;background:var(--card)}
.makeone p{color:var(--muted);margin:14px 0 0}
.sib{border:var(--bw) dashed var(--ink);background:var(--card);padding:14px;margin-top:20px}
.sib p{margin:0}

/* inner page header: the slab is this page's accent wall */
.phead{position:relative;border:var(--bw) solid var(--ink);background:var(--card);box-shadow:var(--sh) var(--sh) 0 var(--ink);padding:22px 24px 20px;margin:10px 0 30px;overflow:hidden}
.phead::after{content:"";position:absolute;top:-2px;right:-80px;bottom:-2px;width:calc(24% + 80px);background:linear-gradient(135deg,var(--cool),var(--hot));border-left:var(--bw) solid var(--ink);transform:skewX(-12deg);transform-origin:top right;pointer-events:none}
.phead>*{position:relative;z-index:1;max-width:70%}
.phead p:last-child{margin:0}
.prose{max-width:70ch}
.prose h2{margin-top:1.2em}
.prose ul{padding-left:1.2em}.prose li{margin:.35em 0}
.prose code{background:var(--card);border:1px solid var(--ink);padding:1px 5px;font-size:.92em;overflow-wrap:anywhere}

/* maker */
.maker{display:grid;gap:26px;max-width:860px}
.step{border:var(--bw) solid var(--ink);background:var(--card);box-shadow:var(--sh) var(--sh) 0 var(--ink);padding:20px;min-width:0}
.step h2{display:flex;align-items:center;gap:10px}
.num{display:inline-grid;place-items:center;width:38px;height:38px;flex:none;background:var(--pop);border:var(--bw) solid var(--ink);font-size:1.15rem}
fieldset{border:0;padding:0;margin:0 0 18px;min-width:0}
legend{font:800 1.05rem/1.2 var(--display);padding:0;margin:0 0 10px}
.opts{display:grid;gap:10px}
.opts.occ{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
.opts.gms{grid-template-columns:repeat(3,minmax(0,1fr))}
.opt{position:relative;display:block;cursor:pointer;min-width:0}
.opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.opt-in{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;height:100%;border:var(--bw) solid var(--ink);background:var(--card);padding:12px 8px;box-shadow:3px 3px 0 var(--ink);transition:transform .08s}
.opt-in b{font:800 1rem/1.15 var(--display)}
.opt-in small{color:var(--muted);font-size:.84rem;line-height:1.3}
.opt .icon{width:44px;height:44px}
.opt:hover .opt-in{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.opt input:checked+.opt-in{background:var(--pop);box-shadow:5px 5px 0 var(--ink);transform:translate(-2px,-2px)}
.opt input:focus-visible+.opt-in{outline:3px solid var(--cool);outline-offset:3px}

canvas.mini{width:100%;height:96px;display:block;border:2px solid var(--ink);background:var(--isky)}
.field{margin:0 0 16px}
.field label{display:flex;justify-content:space-between;gap:10px;font:800 1rem/1.2 var(--display);margin:0 0 6px}
.field label small{font:600 .82rem/1.2 var(--body);color:var(--muted)}
.count{font:700 .8rem/1 var(--body);color:var(--muted);align-self:flex-end;white-space:nowrap}
.count.near{color:#b5123a}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
input[type=text],input[type=number],textarea,input.link{width:100%;font:600 1.05rem var(--body);color:var(--ink);padding:11px 12px;border:var(--bw) solid var(--ink);background:var(--paper);box-shadow:4px 4px 0 var(--ink);border-radius:0}
textarea{min-height:120px;resize:vertical;line-height:1.45}
input:focus,textarea:focus{outline:3px solid var(--cool);outline-offset:2px}
input[type=number]{max-width:140px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.chip{font:600 .9rem/1.3 var(--body);text-align:left;color:var(--ink);cursor:pointer;border:2px solid var(--ink);background:var(--card);padding:7px 10px;box-shadow:2px 2px 0 var(--ink);border-radius:0;max-width:100%}
.chip:hover{background:var(--pop)}
.err{color:#b5123a;font-weight:700;min-height:1.4em;margin:0}
.result{margin-top:16px;border:var(--bw) solid var(--ink);background:var(--paper);padding:16px}
.result .acts{margin:12px 0}
input.link{font:600 .92rem/1.3 ui-monospace,Menlo,Consolas,monospace;background:var(--card);box-shadow:none}
.note{font-size:.92rem;color:var(--muted);margin:0}
.status{font-weight:700;min-height:1.4em;margin:0}
dialog.pv{border:var(--bw) solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:14px;width:min(600px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;background:var(--paper);color:var(--ink)}
dialog.pv::backdrop{background:rgba(27,20,38,.55)}
.pvhead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 10px}
.pvhead h2{margin:0;font-size:1.3rem}

/* the stage */
.stage{max-width:560px;margin:0 auto;width:100%}
.screen{position:relative;border:var(--bw) solid var(--ink);box-shadow:var(--sh) var(--sh) 0 var(--ink);background:var(--isky);overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none}
.screen:focus-visible{outline:4px solid var(--cool);outline-offset:4px}
.mode-player .screen{height:clamp(380px,calc(100svh - 236px),740px)}
.mode-demo .screen{aspect-ratio:4/5;touch-action:manipulation}
.mode-demo .screen.g-catch{touch-action:pan-y}
.mode-preview .screen{height:min(64dvh,600px);min-height:380px}
.screen canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.screen canvas.fx{pointer-events:none;z-index:3}
.start{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:16px;background:rgba(255,255,255,.4);cursor:pointer}
.start-card{background:var(--card);border:var(--bw) solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:18px 18px 20px;max-width:330px;text-align:center}
.start-card .sicon{width:56px;height:56px;display:block;margin:0 auto 6px}
.goal{font:800 1.2rem/1.2 var(--display);margin:0 0 6px}
.how{font-size:.9rem;color:var(--muted);margin:0 0 14px}
.stage-bar{display:flex;justify-content:center;margin-top:16px}
.reveal{position:absolute;inset:0;z-index:2;overflow:auto;display:grid;place-items:center;padding:16px;background:rgba(27,20,38,.18)}
.rcard{background:var(--card);border:var(--bw) solid var(--ink);box-shadow:7px 7px 0 var(--ink);padding:20px;width:100%;max-width:420px;animation:rise .5s cubic-bezier(.2,1.4,.4,1)}
.rhead{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.rhead .kicker{margin:0;background:var(--isky);color:var(--ink);border:2px solid var(--ink)}
.ricon{width:40px;height:40px}
.rto{font-size:clamp(1.6rem,6vw,2.3rem);overflow-wrap:anywhere;outline:none}
.rmsg{white-space:pre-line;font-size:1.12rem;line-height:1.5;overflow-wrap:anywhere}
.rfrom{font:800 1.15rem/1.2 var(--display);overflow-wrap:anywhere;margin:0 0 14px}
.ract{display:flex;flex-wrap:wrap;gap:10px}
.ract .btn{font-size:.95rem;padding:9px 13px}
.rback{margin:12px 0 0;font-size:.9rem}
@keyframes rise{from{transform:translateY(30px) scale(.94);opacity:0}to{transform:none;opacity:1}}

/* player page */
.ptop{text-align:center;max-width:560px;margin:4px auto 14px}
.ptop h1{font-size:clamp(1.5rem,5.6vw,2.4rem);margin:0 0 .2em;overflow-wrap:anywhere}
.ptop p{color:var(--muted);margin:0;overflow-wrap:anywhere}
.notice{max-width:560px;margin:0 auto;border:var(--bw) solid var(--ink);background:var(--card);box-shadow:var(--sh) var(--sh) 0 var(--ink);padding:22px}
.pfoot{text-align:center;margin:26px 0 0;font-weight:700}

/* footer */
footer.site{border-top:var(--bw) solid var(--ink);background:var(--card);padding:22px 16px 26px}
.fgrid{max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:flex-start}
.fgrid nav{display:flex;flex-wrap:wrap;gap:6px 16px;font-weight:700}
.fnote{max-width:1120px;margin:14px auto 0;font-size:.86rem;color:var(--muted);border-top:1px solid var(--ink);padding-top:10px}

@media (max-width:860px){
  .demos{grid-template-columns:1fr;max-width:460px;margin:0 auto}
}
@media (max-width:760px){
  .hero{grid-template-columns:1fr}
  .wall{order:-1;min-height:190px;border-left:0;border-bottom:var(--bw) solid var(--ink)}
  .bigcard{width:130px}
  .wall .float{width:40px}
  .hero .copy{padding:20px 16px 22px}
  .steps{grid-template-columns:1fr}
  .phead{padding:18px 16px 66px}
  .phead::after{top:auto;left:-2px;right:-2px;bottom:-2px;width:auto;height:46px;transform:none;border-left:0;border-top:var(--bw) solid var(--ink)}
  .phead>*{max-width:none}
  .promise{grid-template-columns:1fr}
  .step{padding:16px}
  .two{grid-template-columns:1fr}
  .opts.gms{grid-template-columns:1fr}
  .gms .opt-in{flex-direction:row;text-align:left;align-items:center}
  .gms .opt-in canvas.mini{width:96px;height:76px;flex:none}
  .gms .opt-in span{display:flex;flex-direction:column;gap:2px}
}
@media (max-width:430px){
  .wm{font-size:1.6rem}.logo{width:36px;height:36px}
  header.site nav a{padding:4px 8px;font-size:.92rem}
  .opts.occ{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.icon{display:block}
.wall .float .icon{width:100%;height:auto}

[data-o="birthday"]{--ia:#ff4a6e;--ib:#ffd447;--ic:#3c5cff;--isky:#fff1e6}
[data-o="thanks"]{--ia:#ff8a3d;--ib:#2bb673;--ic:#ffd447;--isky:#fff6dc}
[data-o="love"]{--ia:#e8336a;--ib:#ff9ec0;--ic:#8a3ffc;--isky:#ffe9ef}
[data-o="congrats"]{--ia:#3c5cff;--ib:#ffd447;--ic:#21c7b8;--isky:#eef0ff}
[data-o="holiday"]{--ia:#d7263d;--ib:#1f8a5b;--ic:#ffd447;--isky:#eaf6ff}
[data-o="getwell"]{--ia:#21c7b8;--ib:#ffb347;--ic:#8f7cff;--isky:#ecfbf7}
[data-o="justbecause"]{--ia:#8f7cff;--ib:#c6f432;--ic:#ff4a6e;--isky:#f4f0ff}