*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg:#fafafa;--color-surface:#fff;--color-text:#1a1a2e;--color-text-secondary:#6b7280;--color-primary:#6366f1;--color-primary-hover:#4f46e5;--color-accent:#ec4899;--color-border:#e5e7eb;--color-bar-fill:#6366f1;--color-bar-track:#e5e7eb;--radius:12px;--radius-sm:8px;--shadow:0 1px 3px #00000014, 0 1px 2px #0000000f;--shadow-lg:0 4px 12px #0000001a;--max-width:480px}html{-webkit-text-size-adjust:100%;font-size:16px}body{background:var(--color-bg);color:var(--color-text);min-height:100dvh;font-family:Hiragino Sans,Hiragino Kaku Gothic ProN,Noto Sans JP,sans-serif;line-height:1.6}#root{flex-direction:column;min-height:100dvh;display:flex}img{max-width:100%;height:auto;display:block}button{cursor:pointer;background:0 0;border:none;font-family:inherit}select{font-family:inherit;font-size:1rem}.top-page{flex:1;justify-content:center;align-items:center;padding:2rem 1rem;display:flex}.top-content{max-width:var(--max-width);text-align:center;width:100%}.top-title{letter-spacing:.02em;background:linear-gradient(135deg, var(--color-primary), var(--color-accent));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:2rem;font-weight:800}.top-subtitle{color:var(--color-text);margin-top:.75rem;font-size:1.15rem;font-weight:600}.top-description{color:var(--color-text-secondary);margin-top:.75rem;font-size:.9rem;line-height:1.8}.top-form{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);margin-top:2rem;padding:1.25rem}.form-label{color:var(--color-text-secondary);margin-bottom:.75rem;font-size:.8rem}.form-row{justify-content:center;gap:1rem;display:flex}.form-row label{color:var(--color-text-secondary);flex-direction:column;gap:.35rem;font-size:.85rem;display:flex}.form-row select{border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);padding:.5rem .75rem}.start-button{color:#fff;background:linear-gradient(135deg, var(--color-primary), var(--color-accent));width:100%;max-width:320px;box-shadow:var(--shadow-lg);border-radius:999px;margin-top:2rem;padding:1rem 2rem;font-size:1.1rem;font-weight:700;transition:transform .15s,box-shadow .15s}.start-button:hover{transform:translateY(-1px);box-shadow:0 6px 20px #6366f14d}.start-button:active{transform:translateY(0)}.top-note{color:var(--color-text-secondary);margin-top:1rem;font-size:.8rem}.quiz-page{max-width:var(--max-width);flex-direction:column;flex:1;align-items:center;width:100%;margin:0 auto;padding:1rem;display:flex}.progress-bar-container{align-items:center;gap:.75rem;width:100%;margin-bottom:1.25rem;display:flex}.progress-bar-track{background:var(--color-bar-track);border-radius:999px;flex:1;height:6px;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg, var(--color-primary), var(--color-accent));border-radius:999px;height:100%;transition:width .3s}.progress-bar-text{color:var(--color-text-secondary);white-space:nowrap;text-align:right;min-width:3.5em;font-size:.8rem}.question-card{width:100%}.question-card.fade-in{animation:.3s fadeIn}.question-card.fade-out{animation:.3s forwards fadeOut}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}.anchor-section{text-align:center;margin-bottom:1rem}.anchor-label{color:var(--color-text);margin-bottom:.75rem;font-size:.95rem;font-weight:600}.anchor-image{border-radius:var(--radius);width:180px;height:auto;box-shadow:var(--shadow);margin:0 auto}.choices-section{justify-content:center;gap:.75rem;display:flex}.choice{border-radius:var(--radius);cursor:pointer;max-width:200px;box-shadow:var(--shadow);background:var(--color-surface);border:3px solid #0000;flex:1;transition:border-color .15s,transform .15s,box-shadow .15s;position:relative;overflow:hidden}.choice:hover{box-shadow:var(--shadow-lg);border-color:var(--color-primary);transform:translateY(-2px)}.choice:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.choice-selected{border-color:var(--color-primary);transform:scale(.97)}.choice-label{color:#fff;background:var(--color-primary);z-index:1;border-radius:50%;justify-content:center;align-items:center;width:1.5rem;height:1.5rem;font-size:.75rem;font-weight:700;display:flex;position:absolute;top:.4rem;left:.5rem}.choice-image{border-radius:0;width:100%}.result-page{flex:1;justify-content:center;padding:2rem 1rem;display:flex}.result-content{max-width:var(--max-width);text-align:center;width:100%}.result-label{color:var(--color-text-secondary);font-size:.9rem}.result-type-name{background:linear-gradient(135deg, var(--color-primary), var(--color-accent));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-top:.5rem;font-size:1.75rem;font-weight:800}.result-quadrant{color:var(--color-text-secondary);margin-top:.25rem;font-size:.85rem}.result-description{text-align:left;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);margin-top:1rem;padding:1.25rem;font-size:.95rem;line-height:1.8}.result-aruaru{text-align:left;margin-top:1.5rem}.result-aruaru ul{flex-direction:column;gap:.5rem;list-style:none;display:flex}.result-aruaru li{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.75rem 1rem;font-size:.9rem;line-height:1.6}.result-aruaru li:before{content:"✔ ";color:var(--color-primary);font-weight:700}.result-plot{aspect-ratio:1;width:100%;max-width:320px;margin:2rem auto;position:relative}.plot-label{color:var(--color-text-secondary);font-size:.7rem;font-weight:600;position:absolute}.plot-label-top{top:-1.2rem;left:50%;transform:translate(-50%)}.plot-label-bottom{bottom:-1.2rem;left:50%;transform:translate(-50%)}.plot-label-left{transform-origin:50%;top:50%;left:-.5rem;transform:translateY(-50%)rotate(-90deg)}.plot-label-right{transform-origin:50%;top:50%;right:-.5rem;transform:translateY(-50%)rotate(90deg)}.plot-area{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);position:absolute;inset:0}.plot-axis-x{background:var(--color-border);height:1px;position:absolute;top:50%;left:5%;right:5%}.plot-axis-y{background:var(--color-border);width:1px;position:absolute;top:5%;bottom:5%;left:50%}.plot-quadrant-label{color:var(--color-text-secondary);opacity:.6;font-size:.6rem;position:absolute}.plot-quadrant-label.tl{top:8%;left:10%}.plot-quadrant-label.tr{top:8%;right:10%}.plot-quadrant-label.bl{bottom:8%;left:10%}.plot-quadrant-label.br{bottom:8%;right:10%}.plot-dot{background:var(--color-accent);width:16px;height:16px;box-shadow:0 0 0 2px var(--color-accent), var(--shadow-lg);z-index:1;border:3px solid #fff;border-radius:50%;animation:1.5s ease-in-out infinite dotPulse;position:absolute;transform:translate(-50%,-50%)}@keyframes dotPulse{0%,to{box-shadow:0 0 0 2px var(--color-accent), var(--shadow-lg)}50%{box-shadow:0 0 0 4px #ec48994d, var(--shadow-lg)}}.result-section-title{margin-top:2rem;margin-bottom:1rem;font-size:1rem;font-weight:700}.score-bars{text-align:left;flex-direction:column;gap:.75rem;display:flex}.score-bar-row{align-items:center;gap:.75rem;display:flex}.score-bar-label{text-align:right;flex-shrink:0;width:3em;font-size:.85rem;font-weight:600}.score-bar-track{background:var(--color-bar-track);border-radius:999px;flex:1;height:10px;overflow:hidden}.score-bar-fill{background:linear-gradient(90deg, var(--color-primary), var(--color-accent));border-radius:999px;height:100%;transition:width .6s}.score-bar-value{width:3em;color:var(--color-text-secondary);flex-shrink:0;font-size:.85rem}.result-duration{color:var(--color-text-secondary);margin-top:1.5rem;font-size:.8rem}.result-actions{flex-direction:column;align-items:center;gap:.75rem;margin-top:2rem;display:flex}.share-button{color:#fff;background:#000;border-radius:999px;width:100%;max-width:320px;padding:.875rem 2rem;font-size:1rem;font-weight:700;transition:background .15s}.share-button:hover{background:#1a1a1a}.retry-button{color:var(--color-text-secondary);border:1px solid var(--color-border);border-radius:999px;padding:.75rem 2rem;font-size:.9rem;font-weight:600;transition:border-color .15s,color .15s}.retry-button:hover{border-color:var(--color-text-secondary);color:var(--color-text)}