:root{--ink:#202428;--muted:#8a9099;--line:#e8ebf2;--paper:#f6f7fb;--panel:#fff;--accent:#1488e8;--accent-dark:#066fc5;--gold:#8fd8ff;--soft:#eef7ff;--danger:#b42318;--shadow:0 34px 90px #2d37501a}*{box-sizing:border-box}body{min-height:100vh;color:var(--ink);background:#f4f6fb;margin:0;font-family:Arial,PingFang SC,Microsoft YaHei,sans-serif;overflow-x:hidden}body:before{content:"USER JOURNEY";z-index:-1;white-space:nowrap;letter-spacing:0;color:#8a92b614;font-size:clamp(62px,14vw,170px);font-weight:900;position:fixed;top:96px;left:50%;transform:translate(-50%)}button,input,textarea{font:inherit}.app-shell{align-items:center;width:min(920px,100%);min-height:100vh;margin:0 auto;padding:24px 20px;display:grid}.intro,.survey,.result{box-shadow:var(--shadow);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#ffffffe6;border:1px solid #fffffff2;border-radius:34px;padding:clamp(20px,4vw,38px)}.hidden{display:none}.brand-row{color:#2e343a;align-items:center;gap:10px;margin-bottom:34px;font-weight:700;display:inline-flex}.brand-mark{color:#fff;background:linear-gradient(135deg,#bde7ff,#ffc6e5);border-radius:50%;place-items:center;width:34px;height:34px;display:inline-grid;box-shadow:0 10px 30px #1488e838}h1,h2{letter-spacing:0;margin:0}h1{max-width:820px;font-size:clamp(42px,9vw,88px);font-weight:900;line-height:.98}h2{font-size:clamp(24px,4vw,38px);font-weight:800;line-height:1.14}p{line-height:1.7}.intro p{max-width:680px;color:var(--muted)}.journey-preview{grid-template-columns:repeat(5,1fr);gap:14px;margin:34px 0;display:grid}.journey-preview span{color:#2024289e;background:radial-gradient(circle at 30% 22%,#aee8ffe6,#0000 36%),radial-gradient(circle at 78% 72%,#ffc6e5e6,#0000 42%),linear-gradient(135deg,#ffffffbf,#eef7fff2);border:0;border-radius:20px;place-items:end start;min-height:130px;padding:18px;font-weight:700;display:grid;box-shadow:inset 0 0 0 1px #ffffffb3,0 18px 42px #748fac1f}.primary-btn,.ghost-btn{cursor:pointer;border:0;border-radius:999px;min-height:48px;padding:0 26px;font-weight:700}.primary-btn{color:#1488e8;background:linear-gradient(90deg,#dceeff,#ffe2f0);box-shadow:0 18px 36px #1488e81f}.primary-btn:hover{color:var(--accent-dark)}.ghost-btn{color:var(--ink);border:1px solid var(--line);background:#fff;line-height:48px}.small-note{color:var(--muted);font-size:14px}.survey{grid-template-rows:auto auto minmax(0,1fr) auto;place-self:stretch center;gap:10px;width:min(640px,100%);animation:.42s both rise;display:grid;position:relative}.survey.hidden{display:none}.survey-header{display:block}.audio-preview-btn{z-index:8;cursor:pointer;background:linear-gradient(135deg,#dceefff5,#ffe2f0f5);border:0;border-radius:50%;flex:none;place-items:center;width:58px;height:58px;padding:0;display:grid;position:absolute;bottom:86px;right:20px;overflow:visible;box-shadow:0 16px 34px #1488e824}.audio-preview-btn:before{content:"";border-radius:inherit;background:#ffffffbd;transition:transform .18s,opacity .18s;position:absolute;inset:7px}.audio-core{z-index:3;background:#8a9099;border-radius:50%;place-items:center;width:30px;height:30px;transition:background .18s,transform .18s;display:grid;position:relative;box-shadow:0 9px 18px #1488e83d}.audio-triangle{border-top:7px solid #0000;border-bottom:7px solid #0000;border-left:10px solid #fff;width:0;height:0;margin-left:3px}.audio-wave{z-index:1;opacity:0;border:2px solid #1488e83d;border-radius:50%;animation:none;position:absolute;inset:0;transform:scale(.72)}.audio-wave-2{animation-delay:.35s}.audio-wave-3{animation-delay:.7s}.audio-preview-btn.is-playing:before{animation:1.8s ease-in-out infinite audioBreath}.audio-preview-btn.is-playing .audio-core{background:#1488e8;transform:scale(1.04)}.audio-preview-btn.is-playing .audio-wave{animation:1.8s ease-out infinite audioWave}.top-progress{gap:10px;display:grid}.top-progress-row{grid-template-columns:1fr auto;align-items:center;gap:12px;display:grid}.eyebrow{color:var(--muted);margin:0 0 6px;font-weight:700}.progress-number{background:var(--soft);text-align:center;min-width:64px;color:var(--accent-dark);border-radius:999px;flex:none;padding:7px 10px;font-weight:700}.milestones{justify-content:center;gap:14px;display:flex;position:relative}.milestone{color:#0000;background:#dde2ea;border:0;border-radius:50%;width:12px;height:12px;min-height:0;padding:0;transition:transform .22s,border-color .22s,background .22s;position:relative}.milestone strong,.milestone span{display:none}.milestone strong{font-size:13px}.milestone span{margin-top:5px;font-size:12px}.milestone.active,.milestone.done{background:var(--accent);color:#0000}.milestone.active{transform:scale(1.28)}.milestone.done:after{content:"";background:#fff;border-radius:50%;place-items:center;width:auto;height:auto;animation:.26s both pop;display:grid;position:absolute;inset:3px}.progress-track{background:#e7ebf2;border-radius:999px;height:7px;overflow:hidden}.progress-fill{background:linear-gradient(90deg,#aee8ff,#ffc6e5);width:0;height:100%;transition:width .28s}.question-card{background:var(--panel);border:0;border-radius:28px;min-height:0;padding:18px;animation:.26s both slideIn;position:relative;overflow:hidden;box-shadow:0 16px 42px #5a6a8214}.question-card:before{content:"";z-index:0;border-radius:inherit;filter:blur();background:radial-gradient(circle at 18% 16%,#aee8ffdb,#0000 34%),radial-gradient(circle at 78% 28%,#ffc6e5d1,#0000 36%),radial-gradient(circle at 64% 82%,#bef6d79e,#0000 38%),linear-gradient(#ffffffbd,#ffffffeb);position:absolute;inset:0}.question-card:after{display:none}.question-help{color:var(--muted);z-index:1;margin-top:0;position:relative}.options{z-index:1;gap:10px;display:grid;position:relative}.option{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;background:#ffffffb8;border:1px solid #0000;border-radius:16px;align-items:center;gap:10px;min-height:50px;padding:12px;transition:transform .18s,border-color .18s,background .18s;display:flex}.option:has(input:checked){border-color:var(--accent);background:var(--soft);transform:translateY(-1px)}.option input{opacity:0;pointer-events:none;position:absolute}.option-control{background:#ffffff9e;border:2px solid #20242847;flex:none;place-items:center;width:24px;height:24px;transition:border-color .18s,background .18s,transform .18s;display:grid;position:relative}.single-option .option-control{border-radius:50%}.multi-option .option-control{border-radius:8px}.single-option .option-control:after{content:"";background:0 0;border-radius:50%;width:10px;height:10px;transition:background .18s,transform .18s}.multi-option .option-control:after{content:"";border-bottom:3px solid #0000;border-left:3px solid #0000;width:11px;height:7px;transition:border-color .18s;transform:rotate(-45deg)translateY(-1px)}.option:has(input:checked) .option-control{background:#1488e8;border-color:#1488e8;transform:scale(1.04)}.single-option:has(input:checked) .option-control:after{background:#fff;transform:scale(1)}.multi-option:has(input:checked) .option-control:after{border-bottom-color:#fff;border-left-color:#fff}.option span:last-child{line-height:1.45}.option:hover{border-color:#1488e873}.compact-card .options{grid-template-columns:repeat(2,minmax(0,1fr))}.compact-card .option{align-items:flex-start;min-height:46px}.compact-card .option-control{margin-top:1px}.compact-card .option span:last-child{overflow-wrap:anywhere}.rating-grid{gap:18px;display:grid}.rating-row{gap:8px;display:grid}.rating-label{font-weight:700}.rating-options{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.nps-options{grid-template-columns:repeat(11,minmax(36px,1fr))}.rating-option{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;text-align:center;background:#ffffffb8;border:1px solid #0000;border-radius:16px;place-items:center;min-height:46px;padding:7px;font-size:13px;display:grid}.rating-option input{opacity:0;position:absolute}.rating-option:has(input:checked){border-color:var(--accent);background:var(--accent);color:#fff;font-weight:700}.importance-slider-block,.satisfaction-slider-block{gap:10px;display:grid;position:relative}.horizontal-slider-wrap{padding:8px 4px 2px}.range-slider{--value:50%;accent-color:#ff7748;display:block}.importance-range{appearance:none;background:linear-gradient(90deg, #7fc9ff var(--value), #e5e9ef var(--value));border-radius:999px;outline:none;width:100%;height:22px}.importance-range::-webkit-slider-runnable-track{background:0 0;border-radius:999px;height:12px}.importance-range::-webkit-slider-thumb{appearance:none;background:#1488e8;border:5px solid #fff;border-radius:50%;width:32px;height:32px;margin-top:-10px;box-shadow:0 10px 22px #1488e842}.importance-range::-moz-range-track{background:0 0;border-radius:999px;height:12px}.importance-range::-moz-range-thumb{background:#1488e8;border:5px solid #fff;border-radius:50%;width:24px;height:24px;box-shadow:0 10px 22px #1488e842}.range-labels{color:var(--muted);font-size:12px;display:grid}.horizontal-labels{text-align:center;grid-template-columns:repeat(5,1fr);gap:4px}.satisfaction-scale{gap:10px;display:grid;position:relative}.satisfaction-horizontal{gap:10px;display:grid}.satisfaction-faces{grid-template-columns:repeat(5,1fr);align-items:center;gap:6px;padding:2px 2px 0;display:grid}.satisfaction-face-point{cursor:pointer;opacity:.42;background:0 0;border:0;justify-items:center;padding:0;transition:opacity .18s,transform .18s;display:grid;transform:scale(.86)}.satisfaction-face-point.selected{opacity:1;transform:translateY(-4px)scale(1.08)}.satisfaction-track-wrap{padding:6px 4px 2px}.satisfaction-range{appearance:none;background:linear-gradient(90deg, #ff7748 var(--value), #e5e9ef var(--value));z-index:2;border-radius:999px;outline:none;width:100%;height:22px;position:relative}.satisfaction-range::-webkit-slider-runnable-track{background:0 0;border-radius:999px;height:12px}.satisfaction-range::-webkit-slider-thumb{appearance:none;background:#ff7748;border:5px solid #ffffffdb;border-radius:50%;width:34px;height:34px;margin-top:-11px;box-shadow:0 12px 26px #ff77484d}.satisfaction-range::-moz-range-track{background:0 0;border-radius:999px;height:12px}.satisfaction-range::-moz-range-thumb{background:#ff7748;border:5px solid #ffffffdb;border-radius:50%;width:24px;height:24px;box-shadow:0 12px 26px #ff77484d}.satisfaction-current{min-height:20px;color:var(--muted);text-align:center;margin:2px 0 0;font-size:14px}.satisfaction-labels button{color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;padding:0}.satisfaction-labels button:hover,.satisfaction-face-point:hover{opacity:1}.satisfaction-options{z-index:1;gap:12px;display:grid;position:relative}.satisfaction-option{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:none;background:#ffffff6b;border:1px solid #0000;border-radius:18px;grid-template-columns:1fr 54px;align-items:center;gap:16px;min-height:68px;padding:10px 12px 10px 18px;transition:transform .18s,border-color .18s,background .18s;display:grid;position:relative}.satisfaction-option input{opacity:0;position:absolute}.satisfaction-copy{gap:4px;display:grid}.satisfaction-copy strong{font-size:17px}.satisfaction-copy small{color:var(--muted);letter-spacing:0;font-size:13px}.mood-face{filter:drop-shadow(0 12px 18px #28304024);border-radius:50%;width:clamp(40px,5vw,50px);height:clamp(40px,5vw,50px);animation:2.8s ease-in-out infinite faceFloat;display:block;overflow:visible}.mood-face circle{stroke:#ffffff47;stroke-width:2px}.mood-face.great circle{fill:#a8c66c}.mood-face.good{animation-delay:80ms}.mood-face.good circle{fill:#ffd25f}.mood-face.fair{animation-delay:.16s}.mood-face.fair circle{fill:#cdb5a6}.mood-face.poor{animation-delay:.24s}.mood-face.poor circle{fill:#ff7748}.mood-face.bad{animation-delay:.32s}.mood-face.bad circle{fill:#8f7af5}.mood-face path{fill:none;stroke:#2d2520e6;stroke-width:7px;stroke-linecap:round;stroke-linejoin:round}.mood-face.bad path{stroke:#29205f}.mood-face .eye,.mood-face .eye-line,.mood-face .x-eye{animation:4s ease-in-out infinite faceBlink}.mood-face .mouth{transform-origin:50% 65%;animation:2.8s ease-in-out infinite mouthBreathe}.satisfaction-option.selected{background:#ffffffdb;border-color:#ff774880;transform:translateY(-1px);box-shadow:0 14px 34px #ff774829}.satisfaction-rail{pointer-events:none;z-index:0;width:14px;height:calc(100% - 52px);position:absolute;top:42px;left:48%;transform:translate(-50%)}.rail-line,.rail-fill{border-radius:999px;width:12px;position:absolute;left:50%;transform:translate(-50%)}.rail-line{background:#dfdad9b8;inset-block:0}.rail-fill{background:#ff7748;height:0;transition:height .22s;bottom:0}.rail-fill.score-1{height:20%}.rail-fill.score-2{height:40%}.rail-fill.score-3{height:60%}.rail-fill.score-4{height:80%}.rail-fill.score-5{height:100%}textarea{resize:vertical;border:1px solid var(--line);background:#fff;border-radius:18px;width:100%;min-height:150px;padding:12px}.validation{min-height:24px;color:var(--danger);z-index:1;font-weight:700;position:relative}.survey-actions,.result-actions{justify-content:space-between;gap:10px;display:flex}.result{text-align:center}.result-icon{color:#fff;background:linear-gradient(135deg,#aee8ff,#ffc6e5);border-radius:50%;place-items:center;width:72px;height:72px;margin:0 auto 18px;font-size:40px;animation:.32s both pop;display:grid}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(14px)}to{opacity:1;transform:translate(0)}}@keyframes pop{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@keyframes audioBreath{0%,to{opacity:.82;transform:scale(1)}50%{opacity:1;transform:scale(.9)}}@keyframes audioWave{0%{opacity:.48;transform:scale(.72)}72%,to{opacity:0;transform:scale(1.55)}}@keyframes faceFloat{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-3px)scale(1.03)}}@keyframes blink{0%,88%,to{transform:scaleY(1)}92%{transform:scaleY(.14)}}@keyframes faceBlink{0%,88%,to{opacity:1}92%{opacity:.28}}@keyframes happyEye{0%,to{opacity:1}50%{opacity:.78}}@keyframes smilePulse{0%,to{transform:translate(-50%)scaleX(1)}50%{transform:translate(-50%)scaleX(1.08)}}@keyframes mouthBreathe{0%,to{transform:scaleX(1)}50%{transform:scaleX(1.06)}}@keyframes frownPulse{0%,to{transform:translate(-50%)translateY(0)}50%{transform:translate(-50%)translateY(2px)}}@keyframes wobbleX{0%,to{transform:rotate(0)}50%{transform:rotate(8deg)}}@media (max-width:640px){html,body{min-height:100%}body{background:#f5f7fb;overflow:hidden}body:before{font-size:64px;top:86px}.app-shell{align-items:start;width:100%;padding:0}.intro,.survey,.result{width:100%;height:100dvh;box-shadow:none;background:#ffffffb8;border:0;border-radius:0;padding:12px 18px 10px}.intro{grid-template-rows:auto auto auto auto auto auto;align-content:center;gap:12px;display:grid;overflow:hidden}.brand-row{margin-bottom:2px;font-size:14px}.brand-mark{width:30px;height:30px}.survey{grid-template-rows:auto auto minmax(0,1fr) auto;gap:8px;overflow:hidden}.journey-preview{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:4px 0}.journey-preview span{border-radius:18px;place-items:center;min-height:58px;padding:8px 4px;font-size:13px}h1{font-size:clamp(32px,10vw,42px);line-height:1.04}.intro p{margin:0;font-size:13px;line-height:1.55}.intro .small-note{text-align:center;font-size:12px}h2{font-size:clamp(20px,6.3vw,25px);line-height:1.14}.milestone{width:10px;height:10px}.milestone span{margin-top:0}.top-progress{gap:7px;padding-top:2px}.top-progress-row{grid-template-columns:1fr auto;gap:10px}.progress-number{background:#eaf4ff;border-radius:999px;min-width:54px;min-height:0;padding:6px 9px;font-size:14px}.milestones{justify-content:flex-start;gap:10px;margin-top:0}.progress-track{height:5px}.eyebrow{margin-bottom:4px;font-size:14px}.survey-header{min-height:0}.audio-preview-btn{width:46px;height:46px;bottom:74px;right:18px}.audio-preview-btn:before{inset:6px}.audio-core{width:24px;height:24px}.audio-triangle{border-top-width:5px;border-bottom-width:5px;border-left-width:8px}.question-card{border-radius:26px;grid-template-rows:auto minmax(0,1fr) auto;height:100%;min-height:0;padding:12px 14px;display:grid;overflow:hidden}.question-card:before{border-radius:inherit;inset:0}.question-card:after{display:none}.options{align-content:start;gap:8px;overflow:visible}.option{border-radius:16px;min-height:46px;padding:9px 12px;font-size:15px}.compact-card .options{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.compact-card .option{border-radius:14px;align-items:flex-start;gap:7px;min-height:42px;padding:8px 9px;font-size:13px}.compact-card .option-control{width:20px;height:20px;margin-top:1px}.compact-card .option span:last-child{overflow-wrap:anywhere;line-height:1.32}.short-card .option{min-height:52px}.option input{width:22px;height:22px}.rating-grid{gap:12px}.horizontal-slider-wrap{padding:8px 4px 2px}.importance-slider-block,.satisfaction-slider-block{gap:9px}.satisfaction-horizontal{gap:6px}.satisfaction-current{min-height:18px;font-size:13px}.range-labels{line-height:1.2}.rating-options{grid-template-columns:1fr;gap:8px}.nps-options{grid-template-columns:repeat(4,1fr);gap:7px}.rating-option{border-radius:15px;justify-content:start;min-height:42px;padding:9px 12px}.nps-card .rating-option{justify-content:center;padding:8px}.ipa-card{padding-top:10px;padding-bottom:10px}.horizontal-labels{font-size:9px}.importance-range::-webkit-slider-thumb{width:34px;height:34px;margin-top:-11px}.mood-face{width:clamp(34px,9.6vw,42px);height:clamp(34px,9.6vw,42px)}.survey-actions,.result-actions{z-index:10;background:0 0;grid-template-columns:1fr 1fr;gap:10px;padding:4px 0 0;display:grid;position:static}.result-actions{grid-template-columns:1fr}.primary-btn,.ghost-btn{width:100%;min-height:48px;font-size:16px}textarea{min-height:180px}}