:root{
  --azul:#1f4fa3; --azul-d:#163a7a; --azul-l:#e6edfa;
  --amarelo:#f6c343; --vermelho:#d9483b; --verde:#1f9d6b; --roxo:#7c4dde;
  --creme:#fbf6ec; --papel:#fffdf8; --ink:#1d2433; --muted:#6b7280; --line:#e7dfcf;
  --t-presente:#1f9d6b; --t-perfeito:#d9483b; --t-imperfeito:#7c4dde; --t-futuro:#e08a00; --t-condicional:#0e8fc7;
  --radius:22px; --shadow:0 10px 30px rgba(22,58,122,.12), 0 2px 6px rgba(22,58,122,.08);
}
*{box-sizing:border-box}
html{font-size:18px}
body{
  margin:0; color:var(--ink); font-family:Nunito, system-ui, sans-serif; min-height:100vh;
  background-color:var(--creme);
  background-image:
    radial-gradient(circle at 50% 50%, transparent 34%, rgba(31,79,163,.07) 35%, rgba(31,79,163,.07) 38%, transparent 39%),
    conic-gradient(from 45deg, rgba(31,79,163,.045) 25%, transparent 0 50%, rgba(31,79,163,.045) 0 75%, transparent 0);
  background-size:96px 96px;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
.hidden{display:none!important}

header{display:flex;align-items:center;gap:20px;padding:14px 28px;background:var(--azul);color:#fff;box-shadow:0 4px 0 var(--amarelo);flex-wrap:wrap}
.brand{font-family:Fraunces, Georgia, serif;font-weight:800;font-size:1.7rem;letter-spacing:.5px}
nav{display:flex;gap:6px}
nav button{background:transparent;border:0;color:#cfe0ff;font-weight:800;font-size:1.05rem;padding:8px 16px;border-radius:999px;transition:.2s}
nav button:hover{background:rgba(255,255,255,.12);color:#fff}
nav button.active{background:#fff;color:var(--azul)}
.badges{margin-left:auto;display:flex;gap:10px}
.badge{background:rgba(255,255,255,.15);padding:6px 14px;border-radius:999px;font-weight:800}
.flame{display:inline-block}
.flame.on{animation:flicker 1.6s ease-in-out infinite}
@keyframes flicker{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.08) rotate(-3deg)}60%{transform:scale(.97) rotate(2deg)}}

main{max-width:980px;margin:0 auto;padding:32px 20px 80px}
.panel{background:var(--papel);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 28px;border:2px solid var(--line)}
.fade-in{animation:fadeUp .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pop{animation:pop .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}

/* home */
.hero{text-align:center;padding:30px 0 34px}
.hero h1{font-family:Fraunces, Georgia, serif;font-size:4rem;margin:0;color:var(--azul-d)}
.wave{display:inline-block;animation:wave 2.4s ease-in-out infinite;transform-origin:70% 70%}
@keyframes wave{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}}
.sub{font-size:1.4rem;color:var(--muted);margin:10px 0 28px}
.sub b{color:var(--vermelho);font-size:1.6rem}
.big-btn{font-size:2rem;font-weight:800;padding:20px 64px;border-radius:999px;border:0;background:var(--vermelho);color:#fff;box-shadow:0 6px 0 #a8322a;transition:transform .1s}
.big-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #a8322a}
.pulse{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 6px 0 #a8322a,0 0 0 0 rgba(217,72,59,.45)}50%{box-shadow:0 6px 0 #a8322a,0 0 0 18px rgba(217,72,59,0)}}
.row{display:flex;align-items:center;gap:16px;padding:10px 0;flex-wrap:wrap}
.row>label{width:150px;font-weight:800;color:var(--muted);font-size:.95rem;text-transform:uppercase;letter-spacing:.06em}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.row .chips{flex:1}
.chipb{border:2px solid var(--line);background:#fff;padding:8px 16px;border-radius:999px;font-weight:700;transition:.15s}
.chipb:hover{border-color:var(--azul)}
.chipb.on{background:var(--azul);border-color:var(--azul);color:#fff}
.chipb.t.on{background:var(--tc);border-color:var(--tc)}
.counts{display:flex;gap:14px;justify-content:center;margin-top:22px}
.count{background:#fff;border:2px solid var(--line);border-radius:16px;padding:10px 20px;text-align:center}
.count b{display:block;font-size:1.8rem;font-family:Fraunces, Georgia, serif;color:var(--azul)}

/* quiz */
.qtop{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.bar{flex:1;height:16px;background:#fff;border-radius:999px;overflow:hidden;border:2px solid var(--line)}
.bar>div{height:100%;background:linear-gradient(90deg,var(--verde),#4fd19c);border-radius:999px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.ghost{background:transparent;border:2px solid var(--line);border-radius:999px;padding:8px 18px;font-weight:700;color:var(--muted);transition:.15s}
.ghost:hover{border-color:var(--azul);color:var(--azul)}
.primary{background:var(--azul);color:#fff;border:0;border-radius:999px;padding:12px 28px;font-weight:800;font-size:1.1rem;box-shadow:0 4px 0 var(--azul-d);transition:transform .1s}
.primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--azul-d)}
.combo{min-width:80px;text-align:right;font-weight:800;font-size:1.3rem;color:var(--vermelho)}
.qcard{background:var(--papel);border-radius:28px;box-shadow:var(--shadow);padding:40px 44px;border:2px solid var(--line);text-align:center}
.tag{display:inline-block;padding:6px 16px;border-radius:999px;font-weight:800;color:#fff;font-size:.95rem;letter-spacing:.03em;background:var(--tc,var(--azul))}
.tag.soft{background:var(--azul-l);color:var(--azul)}
.prompt{font-family:Fraunces, Georgia, serif;font-size:3.4rem;font-weight:800;line-height:1.15;margin:22px 0 8px;color:var(--azul-d)}
.prompt .pron{color:var(--tc,var(--azul))}
.prompt .blank{display:inline-block;width:2.4em;height:.8em;border-bottom:5px dotted #cbbf9f;vertical-align:baseline}
.hint{font-size:1.4rem;color:var(--muted)}
.hint b{color:var(--ink)}
.say{border:0;background:var(--azul-l);border-radius:50%;width:52px;height:52px;font-size:1.4rem;vertical-align:middle;transition:.15s}
.say:hover{transform:scale(1.1)}
.tin{width:100%;max-width:560px;font-size:2.4rem;text-align:center;padding:16px 20px;border-radius:18px;border:3px solid var(--line);margin-top:28px;background:#fff;outline:none;transition:.2s;font-weight:700}
.tin:focus{border-color:var(--azul);box-shadow:0 0 0 6px var(--azul-l)}
.tin.ok{border-color:var(--verde);background:#eafaf2}
.tin.bad{border-color:var(--vermelho);background:#fdeceb;text-decoration:line-through;text-decoration-color:var(--vermelho)}
.accents{margin:14px 0 6px;display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.acc{width:46px;height:46px;border-radius:12px;border:2px solid var(--line);background:#fff;font-size:1.3rem;font-weight:700;transition:.1s}
.acc:hover{border-color:var(--azul);transform:translateY(-2px)}
.btns{display:flex;gap:12px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
.opt{display:flex;align-items:center;gap:14px;text-align:left;font-size:1.7rem;font-weight:700;padding:18px 20px;background:#fff;border:3px solid var(--line);border-radius:18px;transition:transform .12s, border-color .12s, background .2s;animation:fadeUp .4s both}
.opt:nth-child(2){animation-delay:.05s}.opt:nth-child(3){animation-delay:.1s}.opt:nth-child(4){animation-delay:.15s}
.opt:hover:not(:disabled){border-color:var(--azul);transform:translateY(-3px)}
.opt .k{flex:none;width:40px;height:40px;border-radius:12px;background:var(--azul-l);color:var(--azul);display:grid;place-items:center;font-size:1.1rem}
.opt.right{border-color:var(--verde);background:#eafaf2;animation:pulseGood .6s}
.opt.right .k{background:var(--verde);color:#fff}
.opt.wrongo{border-color:var(--vermelho);background:#fdeceb;animation:shake .45s}
.opt.wrongo .k{background:var(--vermelho);color:#fff}
.opt:disabled{cursor:default}
.opt:disabled:not(.right):not(.wrongo){opacity:.5}
.pulse-good{animation:pulseGood .6s}
@keyframes pulseGood{0%{box-shadow:var(--shadow),0 0 0 0 rgba(31,157,107,.55)}100%{box-shadow:var(--shadow),0 0 0 26px rgba(31,157,107,0)}}
.shake{animation:shake .45s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-12px)}40%{transform:translateX(10px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
.fb{margin-top:26px;padding-top:22px;border-top:2px dashed var(--line)}
.fb h3{margin:0 0 6px;font-size:1.6rem}
.fb.g h3{color:var(--verde)} .fb.m h3{color:#b7791f} .fb.b h3{color:var(--vermelho)}
.answer-big{font-family:Fraunces, Georgia, serif;font-size:2.6rem;font-weight:800;color:var(--azul-d);margin:6px 0}
.given{color:var(--muted);font-size:1.2rem}
.note{display:inline-block;margin-top:12px;background:#fff6d8;border:2px solid #f3dd8f;border-radius:14px;padding:8px 16px;font-size:1.1rem}
.speed{font-size:1rem;color:var(--muted);margin-top:4px}
table.conj{margin:16px auto 0;border-collapse:separate;border-spacing:0 4px;font-size:1.25rem}
table.conj td{padding:6px 18px;text-align:left}
table.conj td:first-child{color:var(--muted);text-align:right}
table.conj td:last-child{font-weight:800}
table.conj tr.hi td{background:var(--azul-l)}
table.conj tr.hi td:first-child{border-radius:10px 0 0 10px}
table.conj tr.hi td:last-child{border-radius:0 10px 10px 0;color:var(--azul-d);animation:glow 1.4s ease-in-out 2}
@keyframes glow{50%{color:var(--vermelho)}}
.combo-pop{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);font-family:Fraunces, Georgia, serif;font-size:4rem;font-weight:800;color:var(--vermelho);pointer-events:none;animation:comboPop 1.1s ease-out forwards;z-index:50;text-shadow:0 4px 0 #fff}
@keyframes comboPop{0%{opacity:0;transform:translate(-50%,-30%) scale(.5)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-90%) scale(1)}}
.keys{color:var(--muted);font-size:.85rem;margin-top:18px}

/* done */
.done{text-align:center}
.done h1{font-family:Fraunces, Georgia, serif;font-size:3.6rem;margin:0;color:var(--azul-d)}
.score{font-family:Fraunces, Georgia, serif;font-size:6rem;font-weight:800;color:var(--verde);line-height:1;margin:16px 0;animation:pop .6s cubic-bezier(.2,1.6,.4,1)}
.misses{text-align:left;max-width:600px;margin:20px auto 0}
.miss{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;border-radius:12px;background:#fff;border:2px solid var(--line);margin-bottom:8px;font-size:1.15rem;animation:fadeUp .4s both}
.miss b{color:var(--vermelho)}
.confetti{position:fixed;top:-20px;width:11px;height:17px;border-radius:3px;z-index:99;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(800deg)}}

/* editor */
.edit{display:grid;grid-template-columns:320px 1fr;gap:22px;align-items:start}
.ed-tools{display:flex;gap:8px;margin-bottom:12px}
.ed-tools input{flex:1;min-width:0}
input.f,select.f,textarea.f,.ed-tools input,.ed-tools select{border:2px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;outline:none;font-size:1.05rem}
input.f:focus,textarea.f:focus,select.f:focus{border-color:var(--azul)}
.elist{max-height:58vh;overflow:auto;margin:12px -8px 0;padding:0 8px}
.eitem{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;cursor:pointer;transition:.12s}
.eitem:hover{background:var(--azul-l)}
.eitem.sel{background:var(--azul);color:#fff}
.eitem.sel small{color:#cfe0ff}
.eitem small{color:var(--muted);margin-left:auto;text-align:right;font-size:.85rem;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dot{width:12px;height:12px;border-radius:50%;flex:none}
.k-verb{background:var(--azul)} .k-noun{background:var(--verde)} .k-phrase{background:var(--roxo)}
.wide{width:100%}
.frm{display:grid;grid-template-columns:120px 1fr;gap:12px 16px;align-items:center}
.frm label{font-weight:800;color:var(--muted)}
.frm .big{font-size:1.5rem;font-weight:800}
.vwrap{overflow-x:auto;margin-top:20px}
table.vgrid{border-collapse:collapse;width:100%}
table.vgrid th{font-size:.85rem;padding:6px;text-align:left;white-space:nowrap}
table.vgrid thead th{color:#fff;background:var(--tc);border-radius:8px 8px 0 0}
table.vgrid tbody th{color:var(--muted)}
table.vgrid td{padding:3px}
table.vgrid input{width:100%;min-width:110px;border:2px solid var(--line);border-radius:8px;padding:6px 8px;font-size:1rem;background:#fff;outline:none}
table.vgrid input:focus{border-color:var(--azul)}
.ed-actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;align-items:center}
.danger{background:transparent;border:2px solid #f2c4bf;color:var(--vermelho);border-radius:999px;padding:10px 20px;font-weight:800}
.danger:hover{background:#fdeceb}
.empty{color:var(--muted);text-align:center;padding:60px 0;font-size:1.3rem}
details.bulk{margin-top:18px;border-top:2px dashed var(--line);padding-top:14px}
details.bulk summary{font-weight:800;cursor:pointer;color:var(--azul)}
details.bulk textarea{width:100%;height:150px;margin:10px 0}
.small{font-size:.9rem;color:var(--muted)}
a.ghost{display:inline-block;text-decoration:none;margin-top:14px}

/* AI helper */
.ai-bar{display:flex;gap:12px;align-items:center;margin-bottom:22px;padding:18px 22px;background:linear-gradient(120deg,#fffdf8,#eef3ff);flex-wrap:wrap}
.ai-bar .spark{font-size:2rem;animation:flicker 2.4s ease-in-out infinite}
.ai-bar input{flex:1;min-width:220px;font-size:1.5rem;font-weight:700;border:3px solid var(--line);border-radius:16px;padding:12px 18px;outline:none;background:#fff}
.ai-bar input:focus{border-color:var(--azul);box-shadow:0 0 0 6px var(--azul-l)}
.ai-bar select{border:2px solid var(--line);border-radius:12px;padding:10px;background:#fff}
.ai-bar .small{flex-basis:100%}
.thinking{text-align:center;padding:70px 0;font-size:1.4rem;color:var(--azul)}
.thinking .dots span{display:inline-block;width:14px;height:14px;margin:0 5px;border-radius:50%;background:var(--azul);animation:bounce 1s ease-in-out infinite}
.thinking .dots span:nth-child(2){animation-delay:.15s;background:var(--amarelo)}
.thinking .dots span:nth-child(3){animation-delay:.3s;background:var(--vermelho)}
@keyframes bounce{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(-14px);opacity:1}}
.exrow{display:grid;grid-template-columns:1fr 1fr auto auto;gap:8px;align-items:center;margin-top:8px}
.exrow input[type=text]{border:2px solid var(--line);border-radius:10px;padding:8px 10px;background:#fff;outline:none;min-width:0}
.exrow label{font-size:.85rem;color:var(--muted);white-space:nowrap;cursor:pointer}
.xbtn{border:0;background:none;color:var(--muted);font-size:1.2rem}
.ai-flash{animation:aiflash 1.2s ease-out}
@keyframes aiflash{0%{box-shadow:var(--shadow),0 0 0 0 rgba(246,195,67,.8)}100%{box-shadow:var(--shadow),0 0 0 24px rgba(246,195,67,0)}}
.exs{margin-top:14px;font-size:1.15rem;color:var(--ink)}
.exs div{margin:4px 0}.exs i{color:var(--muted)}

/* tables */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.tabs .chipb{font-size:1.05rem}
.ref{border-collapse:separate;border-spacing:6px;margin:0 auto;font-size:1.7rem}
.ref th{font-family:Fraunces, Georgia, serif;color:#fff;background:var(--tc);border-radius:14px;padding:10px 22px;font-size:1.4rem}
.ref th small{display:block;font-family:Nunito, sans-serif;font-size:.85rem;opacity:.85;font-weight:600}
.ref td{background:#fff;border:2px solid var(--line);border-radius:14px;padding:10px 22px;font-weight:700;animation:fadeUp .4s both}
.ref td.p{background:none;border:0;color:var(--muted);text-align:right;font-weight:600;font-size:1.2rem}
.end{color:var(--tc);font-weight:800}
.tips{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:22px}
.tip{background:#fff6d8;border:2px solid #f3dd8f;border-radius:16px;padding:14px 18px;font-size:1.05rem;animation:fadeUp .5s both}
.tip b{color:var(--azul-d)}
.minis{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:14px}
.mini{background:#fff;border:2px solid var(--line);border-radius:16px;padding:12px 16px;animation:fadeUp .4s both;transition:transform .15s}
.mini:hover{transform:translateY(-3px) rotate(-.5deg)}
.mini h4{margin:0 0 6px;font-family:Fraunces, Georgia, serif;font-size:1.3rem;color:var(--azul-d)}
.mini h4 small{font-family:Nunito, sans-serif;font-weight:600;color:var(--muted);font-size:.85rem}
.mini table{width:100%;font-size:1.05rem}
.mini td:first-child{color:var(--muted);width:42%}
.mini td:last-child{font-weight:700}
.irr{background:#fdeceb;color:var(--vermelho);border-radius:6px;padding:0 4px}
.tactions{display:flex;gap:12px;justify-content:center;margin:22px 0 6px;flex-wrap:wrap}
.drill td input{width:100%;min-width:90px;font-size:1.5rem;font-weight:700;border:3px solid var(--line);border-radius:12px;padding:6px 10px;outline:none;background:#fff;transition:.2s}
.drill td input:focus{border-color:var(--tc);box-shadow:0 0 0 5px var(--azul-l)}
.drill td{padding:6px 10px}
.drill td.cell{white-space:nowrap}
.drill .stem{color:var(--muted);font-weight:700;margin-right:2px}
.drill .endin{width:90px;min-width:0}
.drill input.ok{border-color:var(--verde);background:#eafaf2;animation:pop .35s}
.drill input.mid{border-color:#e0b100;background:#fff6d8}
.drill input.bad{border-color:var(--vermelho);background:#fdeceb;animation:shake .45s}
.fix{display:block;font-size:1rem;color:var(--verde);font-weight:800;margin-top:2px}
.dscore{text-align:center;font-family:Fraunces, Georgia, serif;font-size:2.4rem;color:var(--azul-d);margin-top:14px}

/* search + bookmarks */
.search{position:relative;flex:1;max-width:380px;margin-left:auto}
.search input{width:100%;border:0;border-radius:999px;padding:9px 18px;font-size:1rem;font-weight:700;background:rgba(255,255,255,.18);color:#fff;outline:none;transition:.2s}
.search input::placeholder{color:#cfe0ff}
.search input:focus{background:#fff;color:var(--ink)}
.sres{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--papel);color:var(--ink);border-radius:18px;box-shadow:var(--shadow);border:2px solid var(--line);max-height:70vh;overflow:auto;z-index:60;padding:6px;animation:fadeUp .2s both}
.sr{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;cursor:pointer}
.sr:hover,.sr.act{background:var(--azul-l)}
.sr small{color:var(--muted)}
.sr .tag{font-size:.75rem;padding:2px 10px;margin-left:auto}
.star{border:0;background:none;font-size:1.4rem;line-height:1;color:#e0a800;transition:transform .2s;padding:2px 6px}
.star:hover{transform:scale(1.25) rotate(-10deg)}
.star.on{animation:pop .35s}
.modal{position:fixed;inset:0;background:rgba(22,36,60,.45);display:grid;place-items:center;z-index:80;padding:20px;animation:fadeIn .2s both}
@keyframes fadeIn{from{opacity:0}}
.modal .panel{max-width:860px;width:100%;max-height:88vh;overflow:auto;animation:pop .3s cubic-bezier(.2,1.4,.4,1) both}
.mhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mhead h2{margin:0;font-size:2.4rem}
.bm{display:flex;gap:10px;flex-wrap:wrap}
.bm .chipb{font-size:1.05rem}
.badges{margin-left:0}

/* stats */
.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.stat{background:var(--papel);border:2px solid var(--line);border-radius:18px;padding:18px;text-align:center;box-shadow:var(--shadow);animation:fadeUp .4s both}
.stat b{display:block;font-family:Fraunces, Georgia, serif;font-size:2.6rem;color:var(--azul)}
.stat span{color:var(--muted);font-weight:700}
.chart{display:flex;align-items:flex-end;gap:8px;height:180px;padding-top:10px}
.col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.colbar{width:100%;border-radius:8px 8px 3px 3px;background:var(--azul-l);position:relative;overflow:hidden;transform-origin:bottom;animation:grow .7s cubic-bezier(.2,.8,.2,1) both}
.colbar i{position:absolute;left:0;right:0;bottom:0;background:var(--verde)}
@keyframes grow{from{transform:scaleY(0)}}
.col small{color:var(--muted);font-size:.75rem}
.tbar{display:flex;align-items:center;gap:12px;margin:8px 0}
.tbar span{width:190px;font-weight:700}
.tbar .track{flex:1;height:14px;background:#fff;border:2px solid var(--line);border-radius:999px;overflow:hidden}
.tbar .track i{display:block;height:100%;background:var(--tc);animation:growX .8s cubic-bezier(.2,.8,.2,1) both;transform-origin:left}
@keyframes growX{from{transform:scaleX(0)}}
h2{font-family:Fraunces, Georgia, serif;color:var(--azul-d);margin:0 0 14px}

#toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(120px);background:var(--ink);color:#fff;padding:12px 24px;border-radius:999px;font-weight:700;transition:transform .35s cubic-bezier(.2,1.4,.4,1);z-index:100}
#toast.show{transform:translateX(-50%) translateY(0)}

@media (max-width:760px){
  html{font-size:16px}
  .edit{grid-template-columns:1fr}
  .opts{grid-template-columns:1fr}
  .sgrid{grid-template-columns:1fr 1fr}
  .qcard{padding:28px 18px}
  .prompt{font-size:2.5rem}
  .row>label{width:100%}
}