.qz{max-width:720px;margin:0 auto;padding:2rem 1rem;font-family:"Open Sans",sans-serif}
.qz-head{text-align:center;margin-bottom:2rem}
.qz-head h1{font-size:32px;color:#394652;margin:0 0 .5rem}
.qz-head p{font-size:16px;color:#6a7f9e;margin:0}

.qz-bar{height:8px;background:#e6e9ee;border-radius:4px;overflow:hidden;margin-bottom:1.5rem}
.qz-bar span{display:block;height:100%;background:linear-gradient(90deg,#8b3ff0,#e0369b,#2b8ef5);border-radius:4px;width:0;transition:width .45s cubic-bezier(.4,0,.2,1)}
.qz-count{font-size:13px;color:#a7aab5;margin-bottom:.5rem;letter-spacing:.02em}
.qz-q{font-size:19px;color:#394652;font-weight:600;margin-bottom:1.5rem;line-height:1.4}

.qz-opt{display:block;width:100%;text-align:left;padding:17px 22px;margin-bottom:14px;border:2px solid #e6e9ee;border-radius:14px;background:#f8f7ff;font-size:16px;color:#394652;cursor:pointer;line-height:1.5;transition:border-color .18s,background .18s,transform .12s,box-shadow .18s;font-family:inherit;position:relative}
.qz-opt:hover{border-color:#8b3ff0;background:#fff;transform:translateY(-2px);box-shadow:0 6px 18px rgba(139,63,240,.12)}
.qz-opt:active{transform:translateY(0)}
.qz-opt.sel{border-color:#8b3ff0;background:#fff;box-shadow:0 0 0 3px rgba(139,63,240,.15)}

.qz-back{margin-top:1rem;background:none;border:none;color:#a7aab5;font-size:14px;cursor:pointer;font-family:inherit;transition:color .15s}
.qz-back:hover{color:#6a7f9e}

/* animations */
@keyframes qzIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes qzOptIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
@keyframes qzPop{0%{opacity:0;transform:scale(.8)}60%{transform:scale(1.05)}100%{opacity:1;transform:scale(1)}}
@keyframes qzBarGrow{from{width:0}}
.qz-stage{animation:qzIn .4s ease both}
.qz-stage .qz-opt{animation:qzOptIn .35s ease both}
.qz-stage .qz-opt:nth-child(2){animation-delay:.06s}
.qz-stage .qz-opt:nth-child(3){animation-delay:.12s}

/* result */
.qz-res{text-align:center;animation:qzIn .5s ease both}
.qz-type{font-size:60px;font-weight:700;letter-spacing:.06em;margin:.4rem 0 0;background:linear-gradient(120deg,#8b3ff0,#e0369b,#2b8ef5,#f59a1c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:qzPop .6s ease both}
.qz-name{font-size:22px;color:#6a7f9e;margin:.2rem 0 1rem;font-weight:600}
.qz-tag{font-size:17px;color:#4d5458;max-width:520px;margin:0 auto 2rem;line-height:1.6}

.qz-chart{max-width:420px;margin:0 auto 2rem}
.qz-scale{margin-bottom:1.1rem;text-align:left}
.qz-scale-top{display:flex;justify-content:space-between;font-size:13px;color:#6a7f9e;margin-bottom:5px;font-weight:600}
.qz-scale-top .on{color:#8b3ff0}
.qz-track{height:12px;background:#e6e9ee;border-radius:6px;position:relative;overflow:hidden}
.qz-fill{position:absolute;top:0;height:100%;border-radius:6px;width:0;transition:width .9s cubic-bezier(.4,0,.2,1)}

.qz-card{text-align:left;background:#f8f7ff;border:1px solid #e6e9ee;border-radius:14px;padding:1.25rem 1.5rem;margin-bottom:16px;animation:qzIn .5s ease both}
.qz-card h3{font-size:16px;color:#394652;margin:0 0 .5rem;font-weight:700;display:flex;align-items:center;gap:8px}
.qz-card h3 .dot{width:10px;height:10px;border-radius:50%;flex:none}
.qz-card p{font-size:15px;color:#4d5458;line-height:1.7;margin:0}

.qz-table{width:100%;border-collapse:collapse;margin:0 auto 2rem;font-size:14px;text-align:left}
.qz-table th{background:#394652;color:#fff;padding:10px 14px;font-weight:600}
.qz-table th:first-child{border-radius:10px 0 0 0}.qz-table th:last-child{border-radius:0 10px 0 0}
.qz-table td{padding:10px 14px;border-bottom:1px solid #e6e9ee;color:#4d5458}
.qz-table tr:last-child td{border-bottom:none}
.qz-table .lt{font-weight:700;color:#8b3ff0}

.qz-again{display:inline-block;margin-top:1rem;padding:15px 34px;border:none;border-radius:60px;background:linear-gradient(120deg,#8b3ff0,#e0369b);color:#fff;font-size:16px;cursor:pointer;font-family:inherit;font-weight:600;transition:transform .15s,box-shadow .15s;box-shadow:0 6px 18px rgba(139,63,240,.25)}
.qz-again:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(139,63,240,.35)}
.qz-share{font-size:14px;color:#a7aab5;margin-top:1rem}

@media(max-width:600px){.qz-head h1{font-size:26px}.qz-type{font-size:46px}.qz-q{font-size:17px}}