:root{
  --ink:#172033;
  --muted:rgba(23,32,51,.70);
  --purple:#6d4cff;
  --blue:#2563eb;
  --teal:#10b7b0;
  --green:#10b981;
  --orange:#f97316;
  --soft:#f5f7ff;
  --border:rgba(23,32,51,.12);
  --shadow:0 18px 50px rgba(23,32,51,.12);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:var(--ink);background:radial-gradient(circle at top left,rgba(16,185,129,.18),transparent 36%),radial-gradient(circle at bottom right,rgba(37,99,235,.18),transparent 34%),linear-gradient(135deg,#f7fffb,#f4f7ff)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
[hidden],.sq-game[hidden],.sq-end[hidden]{display:none!important}
.sq-app{max-width:1220px;margin:0 auto;padding:22px;min-height:100vh}
.sq-hero,.sq-game,.sq-end-card{background:#fff;border:1px solid var(--border);border-radius:32px;box-shadow:var(--shadow);overflow:hidden}
.sq-hero{padding:clamp(22px,4vw,54px)}
.sq-brand-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:26px}
.sq-brand,.sq-eyebrow,.sq-kicker{display:inline-flex;align-items:center;min-height:32px;padding:6px 11px;border-radius:999px;background:rgba(16,185,129,.12);color:#067a59;font-weight:900;font-size:.88rem;letter-spacing:.02em;margin:0}
.sq-hero-grid{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:start}
h1{font-size:clamp(3rem,7vw,6.2rem);line-height:.9;letter-spacing:-.075em;margin:12px 0;color:var(--ink)}
.sq-lead{font-size:clamp(1.06rem,2vw,1.32rem);line-height:1.55;color:var(--muted);max-width:720px;margin:0}
.sq-feature-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.sq-feature-row span{padding:9px 12px;border-radius:999px;background:var(--soft);font-weight:900;color:rgba(23,32,51,.76)}
.sq-panel{display:grid;gap:14px;background:linear-gradient(180deg,#fbfffe,#f5f8ff);border:1px solid var(--border);border-radius:24px;padding:20px}
label{display:grid;gap:7px;font-weight:900;color:rgba(23,32,51,.82)}
input,select,textarea{width:100%;border:1px solid var(--border);border-radius:14px;padding:12px 13px;background:#fff;color:var(--ink);outline:none}
textarea{resize:vertical;min-height:120px}
.sq-custom{border:1px dashed rgba(23,32,51,.18);border-radius:18px;padding:12px;background:#fff}
.sq-custom summary{font-weight:900;cursor:pointer}
.sq-custom p{color:var(--muted);line-height:1.45;margin:10px 0}
.sq-start,.sq-ghost{border:0;border-radius:16px;min-height:48px;padding:12px 16px;font-weight:950;text-decoration:none}
.sq-start{background:linear-gradient(135deg,var(--green),var(--blue));color:#fff;box-shadow:0 14px 30px rgba(16,185,129,.22)}
.sq-ghost{background:#fff;border:1px solid var(--border);color:var(--ink)}
.sq-game{padding:18px}
.sq-topbar{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;padding:10px 8px 18px}
.sq-topbar h2{font-size:clamp(1.6rem,3vw,2.6rem);letter-spacing:-.04em;margin:8px 0 4px}
.sq-topbar p:not(.sq-kicker){margin:0;color:var(--muted);line-height:1.4}
.sq-scoreboard{display:grid;grid-template-columns:repeat(4,86px);gap:8px}
.sq-scoreboard div{background:var(--soft);border:1px solid var(--border);border-radius:18px;padding:10px;text-align:center}
.sq-scoreboard strong{display:block;font-size:1.4rem}
.sq-scoreboard span{display:block;color:var(--muted);font-size:.76rem;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.sq-playfield{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px;align-items:stretch}
.sq-card-zone,.sq-zones{min-height:440px;border-radius:28px;border:1px solid var(--border);background:linear-gradient(180deg,#fff,#f8fbff);padding:22px}
.sq-instruction{margin:0 0 12px;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.05em;font-size:.8rem}
.sq-sort-card{display:flex;align-items:center;justify-content:center;text-align:center;min-height:220px;border-radius:28px;background:radial-gradient(circle at top left,rgba(255,255,255,.38),transparent 28%),linear-gradient(135deg,var(--green),var(--blue));color:#fff;box-shadow:0 24px 60px rgba(37,99,235,.22);padding:24px;user-select:none;touch-action:none}
.sq-sort-card span{font-size:clamp(2.2rem,6vw,4.5rem);font-weight:1000;letter-spacing:-.055em;line-height:1}
.sq-sort-card.dragging{opacity:.55;transform:scale(.98)}
.sq-hint{min-height:26px;margin:16px 0 0;color:#067a59;font-weight:900}
.sq-feedback{min-height:32px;margin:12px 0 0;font-size:1.08rem;font-weight:950}
.sq-feedback.good{color:#067a59}.sq-feedback.bad{color:#be123c}
.sq-zones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sq-zone{border:2px dashed rgba(23,32,51,.18);background:#fff;border-radius:22px;min-height:122px;padding:14px;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:1000;font-size:clamp(1.05rem,2.2vw,1.55rem);color:var(--ink);box-shadow:0 8px 20px rgba(23,32,51,.05);transition:.18s transform,.18s border-color,.18s background}
.sq-zone:hover,.sq-zone.drop-ready{transform:translateY(-2px);border-color:var(--green);background:rgba(16,185,129,.08)}
.sq-zone.correct{background:rgba(16,185,129,.14);border-color:var(--green)}
.sq-zone.incorrect{background:rgba(244,63,94,.12);border-color:#f43f5e}
.sq-controls{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:16px}
.sq-end{display:grid;place-items:center;min-height:100vh}
.sq-end-card{max-width:640px;padding:34px;text-align:center}
.sq-end-card h2{font-size:clamp(2rem,5vw,4rem);letter-spacing:-.06em;margin:12px 0}
.sq-end-card p:not(.sq-eyebrow){color:var(--muted);font-size:1.12rem;line-height:1.55}.sq-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:20px}
@media(max-width:900px){.sq-hero-grid,.sq-playfield,.sq-topbar{grid-template-columns:1fr}.sq-scoreboard{grid-template-columns:repeat(4,1fr)}.sq-panel{order:2}.sq-zones{min-height:auto}.sq-card-zone{min-height:auto}}
@media(max-width:640px){.sq-app{padding:10px}.sq-hero,.sq-game,.sq-end-card{border-radius:24px}.sq-scoreboard{grid-template-columns:repeat(2,1fr)}.sq-zones{grid-template-columns:1fr}.sq-sort-card{min-height:170px}.sq-start,.sq-ghost{width:100%}.sq-brand-row{display:grid}}