:root{--purple:#6d4aff;--yellow:#ffe24b;--ink:#171525;--lav:#eeeaff}*{box-sizing:border-box}body{margin:0;background:#f8f6ff;color:var(--ink);font-family:Arial,"PingFang SC",sans-serif;min-height:100vh}header{height:108px;background:var(--ink);color:white;display:flex;align-items:center;padding:0 max(24px,calc((100% - 1120px)/2));gap:16px}.logo{width:54px;height:54px;border-radius:17px;background:var(--yellow);color:var(--ink);display:grid;place-items:center;font-size:36px;font-weight:900;transform:rotate(-5deg)}header p{font-size:9px;letter-spacing:.25em;color:#a9a2d0;margin:0}header h1{font-size:25px;margin:4px 0}.progress{margin-left:auto;text-align:right;font-weight:700}.progress div{width:160px;height:7px;background:#38334f;border-radius:10px;margin-top:8px;overflow:hidden}.progress i{display:block;height:100%;width:0;background:var(--yellow);transition:.4s}main{width:min(1120px,calc(100% - 32px));margin:38px auto 70px}.intro{display:flex;justify-content:space-between;align-items:end}.intro span{display:inline-block;background:var(--purple);color:white;padding:6px 10px;border-radius:20px;font-size:11px;font-weight:800;letter-spacing:.1em}.intro h2{font-size:clamp(28px,4vw,46px);letter-spacing:-.04em;margin:13px 0 8px}.intro p{margin:0;color:#6f6b80}.intro button{border:0;background:transparent;color:#777187;text-decoration:underline}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:34px 0}.card{position:relative;border:3px solid transparent;background:white;border-radius:24px;padding:8px;box-shadow:0 10px 24px #32257d18;cursor:pointer;transition:.2s}.card:hover{transform:translateY(-4px)}.card.selected{border-color:var(--purple);transform:translateY(-5px);box-shadow:0 10px 0 #d7cfff}.card canvas{width:100%;aspect-ratio:4/3;display:block;border-radius:16px;background:#ddd}.badge{position:absolute;top:15px;left:15px;width:31px;height:31px;background:white;border-radius:50%;display:grid;place-items:center;font-weight:900;box-shadow:0 2px 8px #0004}.check{position:absolute;right:16px;top:16px;width:27px;height:27px;border-radius:50%;background:var(--purple);color:white;display:none;place-items:center}.selected .check{display:grid}.submit{text-align:center;background:var(--lav);padding:20px;border-radius:20px}.submit p{margin:0 0 12px;color:#77718d;font-size:13px}.submit button,.next{border:0;background:var(--ink);color:white;padding:14px 32px;border-radius:12px;font-weight:800;cursor:pointer}.submit button:disabled{opacity:.35}.answer{margin-top:20px;border:2px solid var(--ink);background:var(--yellow);border-radius:22px;padding:24px;display:grid;grid-template-columns:100px 1fr 360px;align-items:center;gap:24px;box-shadow:7px 7px 0 var(--ink)}.answer[hidden]{display:none}.stamp{width:90px;height:90px;border:5px solid var(--purple);color:var(--purple);border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:900;transform:rotate(-10deg)}.answer small{font-weight:800;letter-spacing:.1em}.answer h3{font-size:24px;margin:7px 0}.answer p{line-height:1.6;margin:0}.types{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}.types span{background:white;padding:6px 9px;border-radius:8px;font-size:12px;font-weight:700}.answer canvas{width:100%;border-radius:14px}.next{display:block;margin:28px 0 0 auto;background:var(--purple)}.next[hidden]{display:none}@media(max-width:800px){header{height:88px}.progress div{width:90px}.grid{grid-template-columns:1fr 1fr}.answer{grid-template-columns:70px 1fr}.stamp{width:65px;height:65px;font-size:17px}.answer canvas{grid-column:1/-1}.intro{align-items:start}.intro button{margin-top:8px}}@media(max-width:440px){main{margin-top:24px}.intro{display:block}.grid{gap:9px}.card{border-radius:16px;padding:5px}.card canvas{border-radius:11px}.answer{padding:16px;gap:12px}}