.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;flex-shrink:0;line-height:1;overflow:hidden}.avatar-image{width:100%;height:100%;object-fit:cover;display:block}.avatar-guest{width:100%;height:100%;display:inline-flex;align-items:center;justify-content:center;color:#cfcfd6}.avatar-frame{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0;line-height:0}.avatar-frame-super{background:conic-gradient(from var(--sparkle-angle, 0deg),#ff2fd0,#ffd54a,#35d0ff,#b026ff,#ffd54a,#ff2fd0);animation:sparkle-spin 3s linear infinite;box-shadow:0 0 12px #ffd54a99}.avatar-frame-inner{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#1a0b2e;width:calc(100% - 6px);height:calc(100% - 6px);margin:3px}@property --sparkle-angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}@keyframes sparkle-spin{0%{--sparkle-angle: 0deg}to{--sparkle-angle: 360deg}}.account-button{position:fixed;top:1rem;right:1rem;z-index:100;background:#00000059;border:2px solid rgba(255,255,255,.25);border-radius:50%;padding:.15rem;cursor:pointer;line-height:0}.account-button:hover{border-color:#fff9}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#05030fb8;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:200;padding:1rem;animation:modal-fade-in .15s ease-out}@keyframes modal-fade-in{0%{opacity:0}to{opacity:1}}.modal-panel{position:relative;border:2px solid transparent;border-radius:20px;background-image:linear-gradient(160deg,#1e102ef5,#0a0814fa),linear-gradient(120deg,#ff2fd0,#ffd54a,#35d0ff,#b026ff);background-origin:border-box;background-clip:padding-box,border-box;width:min(480px,92vw);max-height:85vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent;color:#f4f2ff;box-shadow:0 30px 80px #0000008c;animation:modal-pop-in .18s cubic-bezier(.2,.9,.3,1.2)}.mypage{padding:1.85rem}@keyframes modal-pop-in{0%{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}.mypage-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.mypage-header h2,.auth-form h2{margin:0;font-size:1.4rem;font-weight:800;background:linear-gradient(90deg,#ff2fd0,#ffd54a,#35d0ff);-webkit-background-clip:text;background-clip:text;color:transparent}.mypage h3{font-size:.95rem;letter-spacing:.03em;text-transform:uppercase;opacity:.85;margin-bottom:.6rem}.mypage section{padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.08)}.mypage section:first-of-type{border-top:none;padding-top:0}.mypage-profile{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}.mypage-profile-tag{font-size:1.1rem;font-weight:700}.mypage-userid-hint{font-size:.8rem;opacity:.7;margin-top:.2rem}.avatar-upload-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.avatar-upload-row button[type=button]:not(.link){padding:.55rem 1.1rem;border-radius:999px;border:none;cursor:pointer;font-weight:700;background:linear-gradient(90deg,#ff2fd0,#ff9d2f,#ffd54a);color:#1a0620;box-shadow:0 6px 18px #ff3cb44d;transition:transform .15s ease,box-shadow .15s ease}.avatar-upload-row button[type=button]:not(.link):hover{transform:translateY(-1px);box-shadow:0 10px 24px #ff3cb473}.icon-picker{display:flex;flex-wrap:wrap;gap:.6rem}.icon-picker-item{background:transparent;border:3px solid transparent;border-radius:50%;padding:0;cursor:pointer;line-height:0;transition:transform .15s ease,border-color .15s ease}.icon-picker-item:hover:not(:disabled){transform:translateY(-2px)}.icon-picker-item.selected{border-color:#ffd54a;box-shadow:0 0 12px #ffd54a80}.icon-picker-item:disabled{cursor:default;opacity:.6}.cropper{display:flex;flex-direction:column;align-items:center;gap:1rem}.cropper-viewport{position:relative;overflow:hidden;border-radius:12px;background:#000;touch-action:none;cursor:grab}.cropper-viewport:active{cursor:grabbing}.cropper-circle-mask{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border-radius:50%;box-shadow:0 0 0 9999px #0009;border:2px solid rgba(255,255,255,.8)}.cropper-zoom{width:100%;max-width:280px}.cropper-actions{display:flex;align-items:center;gap:1rem}.cropper-actions button[type=button]:not(.link){padding:.55rem 1.3rem;border-radius:999px;border:none;cursor:pointer;font-weight:700;background:linear-gradient(90deg,#ff2fd0,#ff9d2f,#ffd54a);color:#1a0620;box-shadow:0 6px 18px #ff3cb44d}.cropper-actions button[type=button]:not(.link):disabled{opacity:.5;cursor:default}.mypage-name-form{display:flex;flex-direction:column;gap:.75rem}.mypage-name-form input{padding:.65rem .8rem;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:#ffffff0f;color:#fff;transition:border-color .15s ease,background .15s ease}.mypage-name-form input:focus{outline:none;border-color:#ff9d2f;background:#ffffff1a}.mypage-name-form button{align-self:flex-start;padding:.55rem 1.2rem;border-radius:999px;border:none;cursor:pointer;font-weight:700;background:linear-gradient(90deg,#ff2fd0,#ff9d2f,#ffd54a);color:#1a0620;box-shadow:0 6px 18px #ff3cb44d;transition:transform .15s ease,box-shadow .15s ease}.mypage-name-form button:hover{transform:translateY(-1px);box-shadow:0 10px 24px #ff3cb473}.auth-form{background:#ffffff0a;padding:2rem;border-radius:16px;display:flex;flex-direction:column;gap:.9rem;width:min(480px,100%);box-sizing:border-box;color:#f4f2ff}.auth-form input{padding:.65rem .8rem;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:#ffffff0f;color:#fff;transition:border-color .15s ease,background .15s ease}.auth-form input:focus{outline:none;border-color:#ff9d2f;background:#ffffff1a}.auth-form button{padding:.7rem;border-radius:999px;border:none;cursor:pointer;font-weight:800;letter-spacing:.02em;background:linear-gradient(90deg,#ff2fd0,#ff9d2f,#ffd54a);color:#1a0620;box-shadow:0 8px 22px #ff3cb459;transition:transform .15s ease,box-shadow .15s ease}.auth-form button:hover{transform:translateY(-1px);box-shadow:0 12px 28px #ff3cb480}.field{display:flex;flex-direction:column;gap:.3rem}.field-label{font-size:.75rem;opacity:.75}.password-field{position:relative;display:flex}.password-field input{flex:1;padding-right:2.4rem}.password-field .password-toggle{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);background:transparent;border:none;padding:.2rem;color:#ffffffb3;display:flex;align-items:center;justify-content:center;cursor:pointer}.password-field .password-toggle:hover{color:#fff}button.link{background:transparent;color:#9be7ff;text-decoration:underline;font-weight:400;border:none;cursor:pointer;padding:0}.error{color:#ff6b6b}.success{color:#6fe08a}.hint{opacity:.7;font-size:.85rem}.modal-panel::-webkit-scrollbar{width:8px}.modal-panel::-webkit-scrollbar-track{background:transparent;margin:12px 0}.modal-panel::-webkit-scrollbar-thumb{background-color:#ffffff59;background-clip:padding-box;border:2px solid transparent;border-radius:999px}.modal-panel::-webkit-scrollbar-thumb:hover{background-color:#ffffff8c;background-clip:padding-box}:root{color-scheme:light dark;--bg: #0b1220;--surface: #131c2e;--surface-2: #1b2639;--border: #2a3650;--text: #e8edf7;--text-muted: #9aa8c0;--accent: #38bdf8;--accent-ink: #042331;--correct: #2bb673;--correct-bg: rgba(43, 182, 115, .14);--wrong: #f2545b;--wrong-bg: rgba(242, 84, 91, .14);--radius: 14px;--maxw: 820px}@media (prefers-color-scheme: light){:root{--bg: #f4f6fb;--surface: #ffffff;--surface-2: #eef1f8;--border: #d8deec;--text: #182134;--text-muted: #5d6b85;--accent: #0b74c4;--accent-ink: #ffffff;--correct: #10794f;--correct-bg: rgba(16, 121, 79, .1);--wrong: #c22630;--wrong-bg: rgba(194, 38, 48, .1)}}*{box-sizing:border-box}html{overflow-x:hidden}body{margin:0;background:var(--bg);color:var(--text);font-family:Hiragino Sans,Noto Sans JP,Segoe UI,system-ui,sans-serif;line-height:1.75;-webkit-text-size-adjust:100%}.page{min-height:100vh;display:flex;flex-direction:column}.app-header{display:flex;align-items:center;gap:1rem;padding:.85rem 4.5rem .85rem 1rem;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}.app-title{margin:0;font-size:1.05rem;font-weight:800}.back-link{color:var(--text-muted);text-decoration:none;font-size:.88rem;white-space:nowrap}.back-link:hover{color:var(--text)}.app-nav{display:flex;gap:.25rem;padding:.5rem .75rem;background:var(--surface);border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none;position:sticky;top:54px;z-index:19}.app-nav::-webkit-scrollbar{display:none}.app-nav a{flex:0 0 auto;padding:.4rem .8rem;border-radius:999px;color:var(--text-muted);text-decoration:none;font-size:.88rem;font-weight:600;white-space:nowrap}.app-nav a.on{background:var(--accent);color:var(--accent-ink)}.app-main{flex:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:1.25rem 1rem 3rem}.app-footer{padding:1rem;text-align:center;border-top:1px solid var(--border)}.center-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem 1rem}.hint{color:var(--text-muted);font-size:.88rem;margin:.4rem 0}.muted{color:var(--text-muted)}.error.banner{background:var(--wrong-bg);color:var(--wrong);border:1px solid var(--wrong);border-radius:var(--radius);padding:.6rem .9rem;margin:0 0 1rem;font-size:.9rem}button{font-family:inherit;font-size:1rem}.primary{background:var(--accent);color:var(--accent-ink);border:none;border-radius:var(--radius);padding:.85rem 1.4rem;font-weight:700;cursor:pointer}.primary:disabled{opacity:.5;cursor:default}.wide{width:100%;margin-top:1rem}.link-button{background:none;border:none;color:var(--accent);cursor:pointer;text-decoration:underline;padding:.4rem;font-size:.9rem}.chip{display:inline-block;padding:.15rem .6rem;border-radius:999px;background:var(--surface-2);color:var(--text-muted);font-size:.78rem;font-weight:700}.chip.small{font-size:.72rem}.chip.field-technology{color:#38bdf8}.chip.field-management{color:#f0a132}.chip.field-strategy{color:#b779f5}.progress-bar{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}.progress-bar.slim{height:5px;margin-top:.25rem}.progress-bar-fill{height:100%;background:var(--accent);border-radius:999px}.hero h1{margin:0 0 .25rem;font-size:1.5rem}.hero-sub{margin:0 0 1.5rem;color:var(--text-muted);font-size:.9rem}.summary-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem;margin-bottom:1.5rem}.summary-progress-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem;font-size:.9rem}.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.75rem;margin:1.25rem 0 0}.summary-grid div{background:var(--surface-2);border-radius:10px;padding:.6rem .75rem}.summary-grid dt{font-size:.76rem;color:var(--text-muted)}.summary-grid dd{margin:.15rem 0 0;font-size:1.3rem;font-weight:800}.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem}.menu-card{display:flex;flex-direction:column;gap:.3rem;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;cursor:pointer;color:inherit}.menu-card:hover{border-color:var(--accent)}.menu-card.primary-card{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.menu-title{font-size:1.05rem;font-weight:800}.menu-desc{font-size:.82rem;opacity:.85}.setup h1,.stats h1,.history h1{margin:0 0 1rem;font-size:1.35rem}.setup-section{margin-bottom:1.5rem}.setup-section h2{font-size:.95rem;margin:0 0 .4rem}.chip-grid{display:flex;flex-wrap:wrap;gap:.5rem}.chip-button{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:.5rem .9rem;color:var(--text-muted);cursor:pointer;font-size:.88rem;min-height:42px}.chip-button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}.setup-row{display:flex;gap:1rem;flex-wrap:wrap}.setup-row label{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;color:var(--text-muted)}.setup-row input,.setup-row select{background:var(--surface);border:1px solid var(--border);border-radius:10px;color:var(--text);padding:.6rem .7rem;font-size:1rem;min-width:140px}.resume-box{background:var(--surface);border:1px solid var(--accent);border-radius:var(--radius);padding:1rem;margin-bottom:1.5rem}.resume-box p{margin:0 0 .75rem;font-size:.9rem}.resume-actions{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}.question{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem}.question-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}.question-meta{display:flex;gap:.4rem;flex-wrap:wrap}.question-progress{min-width:110px;font-size:.8rem;color:var(--text-muted);text-align:right}.question-progress .progress-bar{margin-top:.3rem;height:5px}.review-toggle{margin:.9rem 0;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:.5rem 1rem;color:var(--text-muted);cursor:pointer;font-size:.88rem;min-height:42px}.review-toggle.on{background:#f0a132;border-color:#f0a132;color:#2a1a00;font-weight:700}.question-text{white-space:pre-wrap;font-size:1.02rem;margin:.5rem 0 1rem}.question-figure{margin-bottom:1rem}.question-figure img{max-width:100%;height:auto;border-radius:10px;background:#fff;display:block}.choices{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-direction:column;gap:.6rem}.choice{width:100%;display:flex;align-items:flex-start;gap:.75rem;text-align:left;background:var(--surface-2);border:2px solid transparent;border-radius:var(--radius);padding:.9rem 1rem;color:inherit;cursor:pointer;min-height:56px}.choice:hover:not(.locked){border-color:var(--accent)}.choice.picked{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface-2))}.choice.locked{cursor:default}.choice.correct{border-color:var(--correct);background:var(--correct-bg)}.choice.wrong{border-color:var(--wrong);background:var(--wrong-bg)}.choice-key{font-weight:800;flex-shrink:0}.choice-text{flex:1;white-space:pre-wrap}.choice-badge{flex-shrink:0;font-size:.72rem;font-weight:700;padding:.1rem .5rem;border-radius:999px;background:#00000040}.result{border-radius:var(--radius);padding:1rem;margin-bottom:1rem;border:2px solid}.result.correct{border-color:var(--correct);background:var(--correct-bg)}.result.wrong{border-color:var(--wrong);background:var(--wrong-bg)}.result-title{margin:0 0 .75rem;font-size:1.25rem}.result.correct .result-title{color:var(--correct)}.result.wrong .result-title{color:var(--wrong)}.result-answers{display:flex;gap:1.5rem;margin:0 0 1rem}.result-answers dt{font-size:.76rem;color:var(--text-muted)}.result-answers dd{margin:0;font-size:1.25rem;font-weight:800}.explanation h3,.question-stats h3{font-size:.9rem;margin:0 0 .35rem}.explanation p{margin:0 0 1rem;white-space:pre-wrap;font-size:.95rem}.question-stats ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;font-size:.88rem}.question-nav{display:flex;gap:.75rem}.question-nav button{flex:1;padding:.85rem 1rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2);color:inherit;cursor:pointer;min-height:48px}.question-nav button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}.question-nav button:disabled{opacity:.4;cursor:default}.practice-footer{margin-top:1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:var(--text-muted)}.stats-section{margin-bottom:2rem}.stats-section h2{font-size:1rem;margin:0 0 .6rem}.accuracy-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem}.accuracy-compare>div{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.9rem;display:flex;flex-direction:column}.accuracy-label{font-size:.8rem;color:var(--text-muted)}.accuracy-value{font-size:1.8rem;font-weight:800}.stats-table{width:100%;border-collapse:collapse;font-size:.88rem}.stats-table th,.stats-table td{text-align:left;padding:.6rem .5rem;border-bottom:1px solid var(--border);vertical-align:top}.stats-table thead th{font-size:.78rem;color:var(--text-muted);font-weight:600}.stats-table .num{font-variant-numeric:tabular-nums}.history-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}.history-list li{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--border);border-radius:10px;padding:.7rem .9rem}.history-list li.ok{border-left-color:var(--correct)}.history-list li.ng{border-left-color:var(--wrong)}.history-main{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.history-q{font-weight:700;font-size:.92rem}.history-sub{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:var(--text-muted);margin-top:.2rem}.badge{font-size:.72rem;font-weight:700;padding:.1rem .5rem;border-radius:999px}.badge.ok{background:var(--correct-bg);color:var(--correct)}.badge.ng{background:var(--wrong-bg);color:var(--wrong)}.pager{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.25rem;font-size:.85rem;color:var(--text-muted)}.pager button{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.5rem .9rem;color:inherit;cursor:pointer;min-height:42px}.pager button:disabled{opacity:.4;cursor:default}@media (min-width: 760px){.app-title{font-size:1.2rem}.question{padding:1.5rem}.question-text{font-size:1.08rem}}@media (max-width: 480px){.app-main{padding:1rem .75rem 2.5rem}.result-answers{gap:1rem}}