@font-face{font-family:"Serif";src:url(/fonts/InstrumentSerif-normal-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Serif";src:url(/fonts/InstrumentSerif-italic-400.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Sans";src:url(/fonts/InterTight-normal-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Sans";src:url(/fonts/InterTight-normal-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Sans";src:url(/fonts/InterTight-normal-500.woff2) format("woff2");font-weight:500 700;font-display:swap}
:root{--bg:#08080a;--ink:#f4f1ea;--mut:rgba(244,241,234,.58);--dim:rgba(244,241,234,.36);--line:rgba(244,241,234,.12);--glass:rgba(22,22,26,.55);--amber:#ffb86b;--coral:#ff7a6b;--sky:#7cc4ff;--ok:#7ee0a6;--bad:#ff8d7a;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:"Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100dvh}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
::selection{background:var(--amber);color:#111}

/* background */
.bg{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;will-change:transform}
.o1{width:52vmax;height:52vmax;left:-14vmax;top:-18vmax;background:radial-gradient(circle,#ff9a5a 0,#ff6a5a55 45%,transparent 70%);animation:f1 22s var(--ease) infinite alternate}
.o2{width:46vmax;height:46vmax;right:-16vmax;bottom:-20vmax;background:radial-gradient(circle,#4f8dff 0,#4f8dff44 45%,transparent 70%);animation:f2 26s var(--ease) infinite alternate;opacity:.42}
.o3{width:28vmax;height:28vmax;left:55%;top:8%;background:radial-gradient(circle,#ffd29a 0,transparent 65%);animation:f3 18s var(--ease) infinite alternate;opacity:.25}
@keyframes f1{to{transform:translate(10vmax,8vmax) scale(1.1)}}
@keyframes f2{to{transform:translate(-8vmax,-10vmax) scale(1.15)}}
@keyframes f3{to{transform:translate(-12vmax,14vmax)}}
.grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;opacity:.18;mask-image:radial-gradient(ellipse at center,#000 10%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at center,#000 10%,transparent 70%)}
.grain{position:absolute;inset:-50%;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.5'/></svg>");opacity:.07;animation:gr 1.2s steps(4) infinite}
@keyframes gr{25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-1%,3%)}}

/* lock */
.lock{position:relative;z-index:1;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:max(28px,env(safe-area-inset-top)) 20px max(24px,env(safe-area-inset-bottom))}
.card{width:min(460px,100%);padding:44px 40px 36px;border-radius:32px;background:linear-gradient(180deg,rgba(30,30,36,.62),rgba(14,14,17,.62));border:1px solid rgba(255,255,255,.09);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 40px 120px -30px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.4);backdrop-filter:blur(28px) saturate(140%);-webkit-backdrop-filter:blur(28px) saturate(140%);text-align:center;animation:rise .9s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.98);filter:blur(8px)}}
.mono{position:relative;width:76px;height:76px;margin:0 auto 22px;display:grid;place-items:center}
.mono span{font-family:"Inter","SF Pro Display",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-weight:900;font-size:32px;letter-spacing:.01em;-webkit-text-stroke:.6px #ffd3a1;filter:drop-shadow(0 2px 10px rgba(255,170,110,.35));background:linear-gradient(135deg,#fff,#ffd3a1 60%,#ff9e80);-webkit-background-clip:text;background-clip:text;color:transparent}
.mono svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.mono circle{fill:rgba(255,255,255,.03);stroke:url(#g);stroke:rgba(255,190,130,.55);stroke-width:1.2;stroke-dasharray:296;stroke-dashoffset:296;animation:draw 1.6s .2s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:18px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 12px var(--amber);animation:pulse 2.4s infinite}
@keyframes pulse{50%{opacity:.35}}
h1{font-family:"Serif";font-weight:400;font-size:clamp(40px,8vw,54px);line-height:1.02;letter-spacing:-.01em}
h1 em{font-style:italic;background:linear-gradient(100deg,#ffe0b8,#ff9f7a 55%,#ff7a8a);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.sub{color:var(--mut);margin:12px 0 26px;font-size:15px}
.pw{position:relative;display:flex;align-items:center;height:58px;border-radius:18px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);transition:border-color .25s,box-shadow .25s,transform .25s}
.pw:focus-within{border-color:rgba(255,184,107,.55);box-shadow:0 0 0 5px rgba(255,170,100,.12)}
.pw .lk{width:18px;height:18px;margin-left:18px;flex:none;fill:none;stroke:var(--mut);stroke-width:1.6}
.pw input{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;padding:0 8px 0 12px;font-size:16px;letter-spacing:.02em}
.pw input::placeholder{color:var(--dim)}
.eye{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;color:var(--mut)}
.eye svg,.go svg,.qx svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.eye:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.go{width:44px;height:44px;margin-right:7px;border-radius:13px;display:grid;place-items:center;color:#1a1208;background:linear-gradient(135deg,#ffe2bd,#ffb27a 55%,#ff8a6b);box-shadow:0 8px 24px -8px rgba(255,140,90,.7);transition:transform .2s var(--ease),filter .2s}
.go:hover{transform:translateX(2px);filter:brightness(1.06)}
.go:active{transform:scale(.94)}
.go.busy svg{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.shake{animation:shake .5s var(--ease)}
@keyframes shake{20%{transform:translateX(-10px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.msg{min-height:22px;margin-top:12px;font-size:13.5px;color:var(--bad);transition:opacity .2s}
.msg.good{color:var(--ok)}
.rule{display:flex;align-items:center;gap:14px;margin:14px 0 18px;color:var(--dim);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.rule:before,.rule:after{content:"";flex:1;height:1px;background:var(--line)}
.sass{font-size:15px;line-height:1.55;color:var(--mut)}
.obv{font-family:"Serif";font-style:italic;font-size:18px;color:var(--ink)}
.quizBtn{margin:16px auto 0;display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px 0 22px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);font-weight:500;font-size:15px;transition:background .25s,border-color .25s,transform .25s var(--ease)}
.quizBtn:hover{background:rgba(255,255,255,.09);border-color:rgba(255,190,130,.5);transform:translateY(-1px)}
.quizBtn b{font-weight:400;display:inline-block;transition:transform .3s var(--ease)}
.quizBtn:hover b{transform:rotate(-12deg) scale(1.2)}
.fine{margin-top:16px;font-size:12.5px;color:var(--dim);line-height:1.5}
.foot{margin-top:26px;font-size:12px;color:var(--dim);letter-spacing:.04em}
.nos{position:fixed;bottom:12px;left:0;right:0;text-align:center;color:var(--mut);z-index:5}

/* quiz */
.quiz{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;background:rgba(8,8,10,.72);backdrop-filter:blur(30px) saturate(120%);-webkit-backdrop-filter:blur(30px) saturate(120%);opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s}
.quiz.on{opacity:1;visibility:visible;transition:opacity .45s var(--ease)}
.qtop{position:relative;display:flex;align-items:center;gap:16px;padding:max(18px,env(safe-area-inset-top)) 22px 18px}
.qbrand{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--mut);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qbrand .m{font-family:"Serif";font-style:italic;font-size:16px;color:var(--ink);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);flex:none}
.qcount{font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.12em;color:var(--mut)}
.qx{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--mut);transition:color .2s,background .2s}
.qx:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.06)}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffd7a8,#ff9a6b,#ff6f8a);box-shadow:0 0 16px rgba(255,140,100,.7);transition:width .7s var(--ease)}
.stage{position:relative;flex:1;overflow:hidden}
.q{position:absolute;inset:0;overflow-y:auto;display:flex;align-items:center;justify-content:center;padding:28px 22px 60px}
.qin{width:min(680px,100%)}
.q.enter{animation:qin .65s var(--ease) both}
.q.leave{animation:qout .4s var(--ease) both}
@keyframes qin{from{opacity:0;transform:translateY(40px);filter:blur(10px)}}
@keyframes qout{to{opacity:0;transform:translateY(-40px);filter:blur(10px)}}
.qn{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin-bottom:18px}
.qn:before{content:"";width:22px;height:1px;background:currentColor}
.qh{font-family:"Serif";font-weight:400;font-size:clamp(34px,6.4vw,64px);line-height:1.04;letter-spacing:-.012em}
.qh em{font-style:italic;color:#ffc796}
.qs{margin-top:14px;color:var(--mut);font-size:16px;line-height:1.55;max-width:560px}
.field{margin-top:34px}
.field+.field{margin-top:22px}
.field label{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.inp{width:100%;background:none;border:0;border-bottom:1.5px solid rgba(255,255,255,.18);padding:10px 0 12px;font-size:clamp(22px,3.6vw,30px);outline:0;transition:border-color .25s;border-radius:0}
.inp::placeholder{color:rgba(244,241,234,.22)}
.inp:focus{border-color:var(--amber)}
textarea.inp{font-size:18px;line-height:1.5;resize:none;min-height:120px;border:1.5px solid rgba(255,255,255,.14);border-radius:16px;padding:14px 16px;background:rgba(0,0,0,.25)}
.pre{display:flex;align-items:center;gap:6px}
.pre span{font-size:clamp(22px,3.6vw,30px);color:var(--dim);border-bottom:1.5px solid rgba(255,255,255,.18);padding:10px 0 12px}
.row{display:flex;align-items:center;gap:16px;margin-top:30px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 24px;border-radius:14px;font-weight:500;font-size:15.5px;color:#1a1208;background:linear-gradient(135deg,#ffe2bd,#ffb27a 55%,#ff8a6b);box-shadow:0 10px 30px -10px rgba(255,140,90,.65);transition:transform .2s var(--ease),filter .2s,opacity .2s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn.ghost{color:var(--ink);background:rgba(255,255,255,.06);box-shadow:none;border:1px solid var(--line)}
.hint{font-size:13px;color:var(--dim)}
.hint kbd{font:inherit;border:1px solid var(--line);border-radius:6px;padding:1px 6px;margin:0 2px}
.err{min-height:24px;margin-top:14px;color:var(--bad);font-size:15px;line-height:1.45}
.err.ok{color:var(--ok)}
.choices{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:32px}
.choice{height:84px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.03);font-family:"Serif";font-size:38px;transition:all .25s var(--ease)}
.choice:hover{border-color:rgba(255,190,130,.55);background:rgba(255,180,110,.08);transform:translateY(-2px)}
.choice.wrong{border-color:var(--bad);background:rgba(255,120,100,.1);animation:shake .5s}
.choice.right{border-color:var(--ok);background:rgba(120,230,160,.12)}
.boss{position:relative;margin-top:28px;padding:26px 24px;border-radius:22px;border:1px solid rgba(255,190,130,.25);background:radial-gradient(120% 140% at 0 0,rgba(255,160,90,.14),transparent 60%),rgba(0,0,0,.3);overflow:hidden}
.boss:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.06) 50%,transparent 60%);animation:sheen 4s infinite;pointer-events:none}
@keyframes sheen{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.formula{font-family:"Serif";font-size:clamp(26px,4.6vw,40px);text-align:center;letter-spacing:.01em;padding:4px 0 14px;white-space:nowrap;overflow-x:auto}
.formula sup{font-size:.55em}
.formula .sum{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:.9;margin:0 .1em}
.formula .sum small{font-size:.38em;font-family:"Sans"}
.formula .sum b{font-weight:400;font-size:1.3em}
.frac{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;font-size:.8em;line-height:1.05}
.frac span:first-child{border-bottom:1px solid currentColor;padding:0 .2em}
.tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tag{font-size:12px;padding:6px 11px;border-radius:999px;border:1px solid var(--line);color:var(--mut);background:rgba(255,255,255,.03)}
.tag.hot{color:#ffcf9e;border-color:rgba(255,190,130,.35)}
.fail{margin-top:18px;padding:16px 18px;border-radius:16px;background:rgba(255,120,100,.08);border:1px solid rgba(255,120,100,.25);display:none}
.fail.on{display:block;animation:qin .5s var(--ease)}
.fail b{display:block;font-family:"Serif";font-weight:400;font-size:26px;margin-bottom:4px}
.fail p{color:var(--mut);font-size:15px;line-height:1.5}
.welcome{text-align:center}
.welcome .big{font-size:72px;animation:pop .8s var(--ease) both}
@keyframes pop{from{transform:scale(.3) rotate(-20deg);opacity:0}}

/* meme */
.meme{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.meme.on{opacity:1;visibility:visible;transition:opacity .3s}
.memeCard{width:min(440px,100%);border-radius:26px;overflow:hidden;background:#111114;border:1px solid rgba(255,255,255,.1);box-shadow:0 40px 120px -20px #000;text-align:center;padding-bottom:22px;transform:scale(.8) rotate(-3deg);transition:transform .5s cubic-bezier(.3,1.6,.4,1)}
.meme.on .memeCard{transform:none}
.memeImg{position:relative;aspect-ratio:1/1;background:#000;display:grid;place-items:center;overflow:hidden}
.memeImg video{width:100%;height:100%;object-fit:cover;display:block}
.memeImg img{width:100%;height:100%;object-fit:cover;display:block}
.memeImg .cap{position:absolute;left:0;right:0;bottom:12px;font-family:Impact,"Anton","Arial Black",sans-serif;font-size:clamp(34px,9vw,46px);text-transform:uppercase;color:#fff;-webkit-text-stroke:2px #000;paint-order:stroke fill;letter-spacing:.02em;line-height:1;text-shadow:0 3px 0 #000}
.memeImg .txt{padding:30px;font-family:Impact,"Arial Black",sans-serif;font-size:56px;line-height:1.02;text-transform:uppercase;color:#fff;-webkit-text-stroke:2px #000;paint-order:stroke fill}
.memeImg .txt small{display:block;font-size:80px;margin-top:10px;-webkit-text-stroke:0}
.memeLine{padding:18px 22px 16px;color:var(--mut);font-size:15.5px;line-height:1.5}
.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));z-index:40;transform:translate(-50%,30px);opacity:0;padding:12px 18px;border-radius:14px;background:rgba(30,30,34,.92);border:1px solid var(--line);font-size:14px;transition:all .35s var(--ease);pointer-events:none;max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.unlocking .card{animation:out .7s var(--ease) forwards}
@keyframes out{to{opacity:0;transform:scale(1.04);filter:blur(12px)}}

@media (max-width:520px){
 .card{padding:36px 22px 28px;border-radius:28px}
 .qbrand span+span,.qbrand{font-size:12px}
 .qbrand{gap:8px}
 .choices{grid-template-columns:repeat(2,1fr)}
 .choice{height:72px}
 .q{align-items:flex-start;padding-top:8vh}
 .btn{height:52px}
 .row .hint{display:none}
}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ---- responsive pass (Oct 9): fluid sizing, touch targets, tablet + short-screen layouts ---- */
body{min-height:100vh;min-height:100dvh}
.lock{min-height:100vh;min-height:100dvh;padding:max(clamp(20px,5dvh,40px),env(safe-area-inset-top)) max(4vw,env(safe-area-inset-right)) max(clamp(18px,4dvh,32px),env(safe-area-inset-bottom)) max(4vw,env(safe-area-inset-left))}
.card{width:min(100%,460px);padding:clamp(30px,6dvh,44px) clamp(20px,6vw,40px) clamp(24px,4.6dvh,36px)}
.mono{width:clamp(64px,18vw,76px);height:clamp(64px,18vw,76px);margin-bottom:clamp(16px,3dvh,22px)}
.mono span{font-size:clamp(27px,7.6vw,32px)}
.eyebrow{font-size:clamp(10.5px,3vw,11.5px);margin-bottom:clamp(12px,2.4dvh,18px)}
h1{font-size:clamp(36px,10.4vw,54px)}
.sub{font-size:clamp(15px,4vw,16px);margin:12px 0 clamp(18px,3.4dvh,26px)}
.pw{height:clamp(56px,15vw,60px)}
.pw input{font-size:16px;padding:0 6px 0 10px}
.eye{width:44px;height:44px;flex:none}
.go{width:46px;height:46px;flex:none;margin-right:6px}
.eye svg,.go svg{width:20px;height:20px}
.msg{font-size:14px}
.sass{font-size:clamp(15px,4vw,16px)}
.quizBtn{min-height:50px;height:auto;padding:0 22px 0 24px;font-size:16px}
.fine{font-size:13px}
.foot{margin-top:clamp(16px,3dvh,26px)}
/* quiz */
.qtop{padding:max(14px,env(safe-area-inset-top)) max(clamp(14px,4vw,28px),env(safe-area-inset-right)) 14px max(clamp(14px,4vw,28px),env(safe-area-inset-left));gap:clamp(10px,3vw,16px)}
.qx{width:44px;height:44px;flex:none}
.q{padding:clamp(20px,5dvh,40px) max(clamp(18px,5vw,40px),env(safe-area-inset-right)) max(48px,env(safe-area-inset-bottom)) max(clamp(18px,5vw,40px),env(safe-area-inset-left))}
.qh{font-size:clamp(32px,8.6vw,64px)}
.qs{font-size:clamp(15px,4vw,17px)}
.choice{min-height:64px;font-size:clamp(30px,8vw,38px)}
.inp{font-size:clamp(20px,5.6vw,30px);min-height:48px}
.pre span{font-size:clamp(20px,5.6vw,30px)}
textarea.inp{font-size:17px;min-height:clamp(110px,18dvh,150px)}
.btn{min-height:50px;height:auto;padding:13px 24px;font-size:16px;line-height:1.25;max-width:100%}
.tag{font-size:12.5px;padding:7px 12px}
.boss{padding:clamp(18px,5vw,26px) clamp(14px,4.4vw,24px)}
.formula{font-size:clamp(19px,5.6vw,40px)}
/* meme overlay: always fits the screen */
.meme{padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.memeCard{width:min(100%,440px);max-height:calc(100dvh - 32px);overflow-y:auto;padding-bottom:20px}
.memeImg{max-height:min(440px,58dvh)}
.memeLine{font-size:clamp(15px,4vw,16px);padding:16px clamp(16px,5vw,22px) 14px}
#memeOk{margin:0 clamp(16px,5vw,22px);width:calc(100% - 2*clamp(16px,5vw,22px));justify-content:center;white-space:normal}
@media (max-width:520px){
 .card{border-radius:26px}
 .choices{grid-template-columns:repeat(2,1fr);gap:10px}
 .q{align-items:flex-start}
 .row{gap:12px}
 .row .btn{width:100%;justify-content:center}
 .formula{white-space:normal;line-height:1.5;overflow-x:visible}
}
@media (max-width:360px){
 .qbrand{font-size:0;gap:0}.qbrand .m{font-size:16px}
 .card{padding-left:18px;padding-right:18px}
 .pw .lk{margin-left:14px}
}
/* tablet: a roomier card and quiz */
@media (min-width:600px) and (max-width:1100px){
 .card{width:min(100%,520px);padding:52px 52px 42px;border-radius:34px}
 .mono{width:84px;height:84px}.mono span{font-size:35px}
 h1{font-size:clamp(50px,7.4vw,60px)}
 .sub,.sass{font-size:17px}
 .pw{height:62px}
 .quizBtn{min-height:52px;font-size:16.5px}
 .qin{width:min(720px,100%)}
}
/* touch devices: no sticky hover lifts */
@media (hover:none){.choice:hover{transform:none}.go:hover{transform:none}.quizBtn:hover{transform:none}}
/* short screens (phones in landscape, small laptops) */
@media (max-height:640px){
 .lock{justify-content:flex-start}
 .card{padding-top:26px;padding-bottom:22px}
 .mono{width:56px;height:56px;margin-bottom:12px}.mono span{font-size:24px}
 .eyebrow{margin-bottom:10px}
 .sub{margin-bottom:16px}
 .rule{margin:8px 0 10px}
 .fine{margin-top:10px}
 .q{align-items:flex-start;padding-top:16px}
 .field{margin-top:20px}
 .choices{margin-top:20px}.choice{min-height:56px}
}

.chk .card{visibility:hidden}