*{margin:0;padding:0;box-sizing:border-box}.main-app{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;padding:16px;min-height:100vh;background:linear-gradient(135deg,#ecf7ff,#ebedff,#f8eefa);background:linear-gradient(135deg,color(xyz 0.857 0.916 1.1),color(xyz 0.828 0.854 1.102),#f8eefa);animation:backgroundShift 8s ease-in-out infinite}@keyframes backgroundShift{0%,to{background:linear-gradient(135deg,#ecf7ff,#ebedff,#f8eefa);background:linear-gradient(135deg,color(xyz 0.857 0.916 1.1),color(xyz 0.828 0.854 1.102),#f8eefa)}50%{background:linear-gradient(135deg,#f8eefa,#ecf7ff,#ebedff);background:linear-gradient(135deg,#f8eefa,color(xyz 0.857 0.916 1.1),color(xyz 0.828 0.854 1.102))}}h1{margin-bottom:32px;color:#19232a;text-align:center;font-size:32px;font-weight:700;background:linear-gradient(135deg,#00243c,#152a5c,#312e76 50%,#43184c);background:linear-gradient(135deg,color(xyz 0.015 0.016 0.056),#152a5c,#312e76 50%,#43184c);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:titleGlow 3s ease-in-out infinite alternate}@keyframes titleGlow{0%{filter:brightness(1) drop-shadow(0 0 8px oklch(.35 .12 280 / .3))}to{filter:brightness(1.1) drop-shadow(0 0 16px oklch(.35 .12 280 / .5))}}.personality-test{max-width:800px;margin:0 auto;padding:16px;width:100%;box-sizing:border-box;animation:slideInUp .6s ease-out}@keyframes slideInUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.question-container{background:linear-gradient(135deg,#f3faffe6,#fbfbfff2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:32px;margin-bottom:24px;box-shadow:0 8px 32px #19232a1a,0 2px 8px #19232a0d;border:1px solid oklch(.95 .01 240 / .5);animation:questionAppear .5s ease-out;transition:all .3s cubic-bezier(.4,0,.2,1)}.question-container:hover{transform:translateY(-2px);box-shadow:0 12px 40px #19232a26,0 4px 16px #19232a14}@keyframes questionAppear{0%{opacity:0;transform:scale(.95) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.question-text{font-size:18px;font-weight:600;margin-bottom:28px;color:#19232a;line-height:1.5;animation:fadeInSlide .6s ease-out .2s both}@keyframes fadeInSlide{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.slider-container{display:flex;flex-direction:column;gap:20px;margin-bottom:24px;animation:fadeInSlide .6s ease-out .3s both}.slider-label{font-size:13px;color:#4c575f;text-align:center;font-weight:500;transition:color .3s ease}.slider-label.left{order:1}.slider-label.right{order:3}.slider{order:2;width:100%;height:16px;background:linear-gradient(to right,#c3d0da,#dadee5);border-radius:20px;outline:none;appearance:none;-webkit-appearance:none;margin:16px 0;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.slider:before{content:"";position:absolute;inset:0;background:linear-gradient(45deg,#7fb5dc,#8186d7,#ba8ac5);opacity:0;transition:opacity .3s ease;border-radius:inherit}.slider:hover:before{opacity:.3}.slider:focus{box-shadow:0 0 0 3px #7fb5dc4d;outline:2px solid transparent}.next-button:focus-visible{outline:3px solid oklch(.75 .08 240);outline-offset:2px}.restart-button:focus-visible{outline:3px solid oklch(.75 .08 140);outline-offset:2px}.slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#7fb5dc,#8186d7);cursor:pointer;border:4px solid oklch(.98 .01 240);box-shadow:0 4px 12px #19232a33,0 2px 4px #19232a1a;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;z-index:2}.slider::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 8px 24px #19232a59,0 4px 12px #19232a33}.slider::-webkit-slider-thumb:active{transform:scale(.95)}.slider::-moz-range-thumb{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#7fb5dc,#8186d7);cursor:pointer;border:4px solid oklch(.98 .01 240);box-shadow:0 4px 12px #19232a33,0 2px 4px #19232a1a;transition:all .2s cubic-bezier(.4,0,.2,1)}.current-value{text-align:center;font-size:14px;color:#313c44;padding:12px 16px;background:linear-gradient(135deg,#ecf3f8cc,#f8f8fce6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:12px;font-weight:600;border:1px solid oklch(.9 .01 240 / .3);animation:valueUpdate .3s cubic-bezier(.4,0,.2,1);transition:all .3s ease}.current-value:hover{background:linear-gradient(135deg,#e5ecf1e6,#f1f1f5f2);transform:translateY(-1px)}@keyframes valueUpdate{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.progress-bar{width:100%;height:12px;background:linear-gradient(to right,#d2d8dd,#dddee1);border-radius:20px;margin-bottom:32px;overflow:hidden;box-shadow:inset 0 2px 4px #19232a1a;animation:progressBarAppear .5s ease-out}@keyframes progressBarAppear{0%{opacity:0;transform:scaleX(.8)}to{opacity:1;transform:scaleX(1)}}.progress-fill{height:100%;background:linear-gradient(90deg,#3d98d1,#6b95e5,#8d92f9 50%,#d094dd);border-radius:20px;transition:width .6s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.progress-fill:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,oklch(.85 .08 260 / .6),transparent);animation:progressShimmer 2s infinite}@keyframes progressShimmer{0%{left:-100%}to{left:100%}}.next-button{display:block;width:100%;padding:18px 24px;background:linear-gradient(135deg,#3d98d1,#6b95e5,#8d92f9);color:#f3faff;border:none;border-radius:16px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);margin-top:24px;min-height:56px;box-shadow:0 4px 16px #3d98d14d,0 2px 8px #3d98d133;position:relative;overflow:hidden;animation:buttonSlideIn .5s ease-out .4s both}@keyframes buttonSlideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.next-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,oklch(.85 .08 260 / .3),transparent);transition:left .5s ease}.next-button:hover{background:linear-gradient(135deg,#0089ca,#1588cd,#2588d0 12.5%,#3a87d5 25%,#5585df 50%,#7d7ff3);background:linear-gradient(135deg,color(xyz 0.195 0.22 0.594),#1588cd,#2588d0 12.5%,#3a87d5 25%,#5585df 50%,#7d7ff3);transform:translateY(-2px);box-shadow:0 8px 24px #3d98d166,0 4px 12px #3d98d14d}.next-button:hover:before{left:100%}.next-button:active{transform:translateY(0)}.next-button:disabled{background:linear-gradient(135deg,#c8cfd4,#d3d4d7);color:#6d7277;cursor:not-allowed;transform:none;box-shadow:none}.results-container{text-align:center;background:linear-gradient(135deg,#f3fafff2,#fbfbfffa);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:24px;padding:40px 32px;box-shadow:0 20px 60px #19232a26,0 8px 24px #19232a1a;border:1px solid oklch(.95 .01 240 / .5);animation:resultsAppear .8s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}@keyframes resultsAppear{0%{opacity:0;transform:scale(.9) translateY(40px)}to{opacity:1;transform:scale(1) translateY(0)}}.results-container:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(#9ed5fd1a,#c3c9ff1a,#e6bdef1a,#9ed5fd1a);background:conic-gradient(#9ed5fd1a,color(xyz 0.618 0.606 1.056 / 0.102),#e6bdef1a,#9ed5fd1a);animation:resultsBackground 8s linear infinite;z-index:-1}@keyframes resultsBackground{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.result-framework{font-size:32px;font-weight:700;background:linear-gradient(135deg,#00243c,#152a5c,#312e76 50%,#43184c);background:linear-gradient(135deg,color(xyz 0.015 0.016 0.056),#152a5c,#312e76 50%,#43184c);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:20px;text-transform:uppercase;letter-spacing:1.5px;word-break:break-word;animation:frameworkReveal 1s ease-out .3s both;position:relative}@keyframes frameworkReveal{0%{opacity:0;transform:scale(.8) rotateX(90deg)}to{opacity:1;transform:scale(1) rotateX(0)}}.result-framework:after{content:"";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);width:60px;height:3px;background:linear-gradient(90deg,#3d98d1,#6b95e5,#8d92f9 50%,#d094dd);border-radius:2px;animation:underlineExpand .6s ease-out .8s both}@keyframes underlineExpand{0%{width:0}to{width:60px}}.result-description{font-size:16px;color:#3e4952;margin-bottom:32px;line-height:1.7;animation:descriptionFade .8s ease-out .6s both;max-width:600px;margin-left:auto;margin-right:auto}@keyframes descriptionFade{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.restart-button{padding:16px 32px;background:linear-gradient(135deg,#75b168,#5fbe7a,#3dca8d);color:#f3faff;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);min-height:48px;box-shadow:0 4px 16px #75b1684d,0 2px 8px #75b16833;animation:restartButtonAppear .6s ease-out 1s both;position:relative;overflow:hidden}@keyframes restartButtonAppear{0%{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.restart-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,oklch(.85 .08 160 / .3),transparent);transition:left .5s ease}.restart-button:hover{background:linear-gradient(135deg,#5da34d,#3db064 50%,#1db76e 75%,#0cb871,#00ba74 87.5%,#00bb7c);background:linear-gradient(135deg,#5da34d,#3db064 50%,#1db76e 75%,#0cb871,color(xyz 0.205 0.363 0.223) 87.5%,color(xyz 0.207 0.374 0.241));transform:translateY(-2px);box-shadow:0 8px 24px #75b16866,0 4px 12px #75b1684d}.restart-button:hover:before{left:100%}.restart-button:active{transform:translateY(0)}@media (max-width: 768px){.personality-test{padding:12px}.question-container{padding:16px;margin-bottom:16px}.question-text{font-size:15px}.slider-label{font-size:11px}.current-value{font-size:13px}.result-framework{font-size:28px;letter-spacing:.5px}.result-description{font-size:15px}h1{font-size:22px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.main-app{animation:none}h1{animation:none;filter:none}.progress-fill:before{animation:none}.results-container:before{animation:none}.next-button:before,.restart-button:before{display:none}}@media (max-width: 480px){.personality-test{padding:8px}.question-container{padding:12px}.question-text{font-size:14px}.result-framework{font-size:24px}.results-container{padding:20px}h1{font-size:20px}}@media (min-width: 769px){.slider-container{flex-direction:row;align-items:center;gap:16px}.slider-label{font-size:14px;text-align:left;white-space:nowrap;min-width:140px}.slider-label.left{text-align:right;order:initial}.slider-label.right{text-align:left;order:initial}.slider{flex:1;order:initial;margin:0}.question-text{font-size:18px}.result-framework{font-size:48px;letter-spacing:2px}.result-description{font-size:18px}h1{font-size:28px}}@media (prefers-contrast: high){.question-container{border:2px solid oklch(.25 .02 240)}.slider{border:1px solid oklch(.25 .02 240)}.next-button,.restart-button,.results-container{border:2px solid oklch(.25 .02 240)}}.share-section{margin-top:32px;padding-top:24px;border-top:1px solid oklch(.85 .03 240);text-align:center}.share-section h4{color:#273d4d;font-size:16px;font-weight:600;margin-bottom:16px}.share-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.share-button{padding:12px 20px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);min-height:44px;position:relative;overflow:hidden;display:flex;align-items:center;gap:8px}.share-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,oklch(.9 .02 240 / .3),transparent);transition:left .5s ease}.share-button:hover:before{left:100%}.share-button:active{transform:scale(.95)}.native-share{background:linear-gradient(135deg,#008ead,#0099df);background:linear-gradient(135deg,color(xyz 0.166 0.228 0.518),color(xyz 0.251 0.28 0.866));color:#fff;box-shadow:0 4px 12px #008fad4d;box-shadow:0 4px 12px oklch(.6 .15 220 / .3)}.native-share:hover{background:linear-gradient(135deg,#007f9a,#0089c9);background:linear-gradient(135deg,color(xyz 0.125 0.178 0.464),color(xyz 0.204 0.22 0.804));transform:translateY(-2px);box-shadow:0 6px 16px #008fad66;box-shadow:0 6px 16px oklch(.6 .15 220 / .4)}.bluesky-share{background:linear-gradient(135deg,#009298,#009fc1);background:linear-gradient(135deg,color(xyz 0.142 0.234 0.385),color(xyz 0.209 0.292 0.707));color:#fff;box-shadow:0 4px 12px #0092984d;box-shadow:0 4px 12px oklch(.6 .15 200 / .3)}.bluesky-share:hover{background:linear-gradient(135deg,#008287,#008ead);background:linear-gradient(135deg,color(xyz 0.101 0.184 0.328),color(xyz 0.162 0.231 0.64));transform:translateY(-2px);box-shadow:0 6px 16px #00929866;box-shadow:0 6px 16px oklch(.6 .15 200 / .4)}.mastodon-share{background:linear-gradient(135deg,#6568b6,#8f68cb);color:#fff;box-shadow:0 4px 12px #6568b64d}.mastodon-share:hover{background:linear-gradient(135deg,#5656b0,#8254c4);transform:translateY(-2px);box-shadow:0 6px 16px #6568b666}@media (max-width: 768px){.share-buttons{flex-direction:column;align-items:center}.share-button{width:100%;max-width:240px;justify-content:center}}.source-section{margin-top:24px;padding-top:20px;border-top:1px solid oklch(.85 .02 240 / .3);display:flex;justify-content:center}.source-link{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:8px;text-decoration:none;color:#4c575f;font-size:14px;font-weight:500;transition:all .3s cubic-bezier(.4,0,.2,1);background:linear-gradient(135deg,#ecf3f880,#f8f8fcb3);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid oklch(.9 .01 240 / .2);position:relative;overflow:hidden}.source-link:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,oklch(.85 .02 240 / .2),transparent);transition:left .5s ease}.source-link:hover:before{left:100%}.source-link:hover{color:#273d4d;background:linear-gradient(135deg,#e0edf8b3,#f0f1f9e6);transform:translateY(-1px);box-shadow:0 4px 12px #19232a1a;border-color:#c3d0da4d}.source-link:active{transform:translateY(0)}.source-icon{font-size:16px;opacity:.8;transition:opacity .3s ease}.source-link:hover .source-icon{opacity:1}