@font-face{font-family:"DotGothic16";src:url("assets/DotGothic16-Regular.ttf") format("truetype");font-display:swap;font-style:normal;font-weight:400}
:root{
  --ink:#050a18;
  --ink-2:#081224;
  --ink-3:#0d1a2e;
  --green:#10d99a;
  --green-bright:#3cffbd;
  --green-dim:#087b67;
  --gold:#f0c64e;
  --gold-light:#ffe68a;
  --gold-dark:#7e5a13;
  --white:#f4f7f5;
  --muted:#aeb9c0;
  --danger:#ffcf4b;
  --page:590px;
  --pixel:"DotGothic16",ui-monospace,"SFMono-Regular",Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  --jp:"DotGothic16",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
}
*{box-sizing:border-box}
html{background:#030713;scroll-behavior:smooth}
body{margin:0;min-width:320px;min-height:100vh;background:#030713;color:var(--white);font-family:var(--jp);font-synthesis:none}
button{font:inherit}
button:focus-visible{outline:3px solid #fff;outline-offset:4px}
#app{min-height:100vh;outline:none}
.page-shell{position:relative;width:min(100%,var(--page));min-height:100vh;margin:0 auto;overflow:hidden;padding:74px 20px 56px;background:
  radial-gradient(circle at 9% 18%,rgba(240,198,78,.9) 0 1px,transparent 1.8px),
  radial-gradient(circle at 84% 28%,rgba(60,255,189,.7) 0 1px,transparent 1.8px),
  radial-gradient(circle at 70% 71%,rgba(240,198,78,.75) 0 1px,transparent 1.6px),
  radial-gradient(circle at 22% 88%,rgba(60,255,189,.65) 0 1px,transparent 1.7px),
  radial-gradient(ellipse at 12% 26%,rgba(0,152,113,.42),transparent 42%),
  radial-gradient(ellipse at 88% 70%,rgba(116,65,22,.24),transparent 40%),
  linear-gradient(180deg,#04101d 0%,#071324 52%,#050916 100%);
isolation:isolate}
.page-shell:before{content:"";position:absolute;inset:0;z-index:-2;opacity:.26;background-image:
  linear-gradient(rgba(48,255,190,.11) 1px,transparent 1px),
  linear-gradient(90deg,rgba(48,255,190,.09) 1px,transparent 1px),
  repeating-linear-gradient(135deg,transparent 0 18px,rgba(255,255,255,.025) 18px 19px);background-size:32px 32px,32px 32px,24px 24px;mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 92%,transparent)}
.page-shell:after{content:"";position:absolute;z-index:-1;inset:0;background:
  radial-gradient(circle at 17% 7%,#e5b833 0 1px,transparent 2px),radial-gradient(circle at 34% 13%,#23f3b0 0 1px,transparent 2px),
  radial-gradient(circle at 69% 10%,#dcb638 0 1px,transparent 2px),radial-gradient(circle at 92% 18%,#28dca7 0 1px,transparent 2px),
  radial-gradient(circle at 10% 47%,#e5b833 0 1px,transparent 2px),radial-gradient(circle at 82% 54%,#23f3b0 0 1px,transparent 2px),
  radial-gradient(circle at 42% 74%,#dcb638 0 1px,transparent 2px),radial-gradient(circle at 91% 89%,#28dca7 0 1px,transparent 2px);opacity:.65;pointer-events:none}
.preview-tag{position:absolute;z-index:20;top:17px;right:16px;min-height:28px;padding:5px 9px;border:1px solid rgba(255,230,138,.7);background:rgba(5,10,24,.82);color:var(--gold-light);font:700 10px/1 var(--pixel);letter-spacing:.08em;cursor:pointer}
.brand-mark{display:flex;justify-content:center;align-items:center;gap:9px;color:var(--gold-light);font:800 14px/1 var(--pixel);letter-spacing:.14em;text-transform:uppercase}
.brand-gem{display:grid;place-items:center;width:25px;height:25px;border:2px solid var(--gold);background:#063b37;box-shadow:inset 0 0 0 3px var(--ink),0 0 12px rgba(60,255,189,.45);transform:rotate(45deg);color:white;font-size:11px}
.brand-gem::first-letter{transform:rotate(-45deg)}
.pixel-kicker,.panel-kicker{color:var(--green-bright);font:800 12px/1.3 var(--pixel);letter-spacing:.2em;text-align:center;text-shadow:0 0 9px rgba(60,255,189,.48)}
.ornate{position:relative;border:2px solid var(--gold);box-shadow:inset 0 0 0 3px var(--ink),inset 0 0 0 4px var(--gold-dark),0 0 0 2px rgba(20,218,154,.55),0 0 22px rgba(16,217,154,.12)}
.corner{position:absolute;width:22px;height:22px;z-index:3;border-color:var(--green-bright);filter:drop-shadow(0 0 4px rgba(60,255,189,.7))}
.corner-tl{top:-5px;left:-5px;border-top:5px solid;border-left:5px solid}.corner-tr{top:-5px;right:-5px;border-top:5px solid;border-right:5px solid}
.corner-bl{bottom:-5px;left:-5px;border-bottom:5px solid;border-left:5px solid}.corner-br{bottom:-5px;right:-5px;border-bottom:5px solid;border-right:5px solid}
.section-title{display:flex;align-items:center;gap:12px;margin:46px 0 22px;color:#fff;font-size:25px;line-height:1.4;letter-spacing:.02em;text-shadow:2px 2px 0 #000}
.section-title span{color:var(--green);font-size:20px;text-shadow:0 0 10px rgba(60,255,189,.55)}
.rpg-button{min-height:56px;border:2px solid currentColor;background:var(--ink);color:var(--green-bright);box-shadow:4px 5px 0 #01040a;cursor:pointer;font-weight:800;letter-spacing:.02em;transition:transform .12s ease,filter .12s ease}
.rpg-button:hover{filter:brightness(1.13);transform:translateY(-1px)}.rpg-button:active{transform:translate(2px,2px);box-shadow:2px 3px 0 #01040a}

/* Home */
.home-screen{padding-top:58px}
.home-screen>.brand-mark{margin-bottom:28px}
.hero-panel{padding:36px 27px 32px;text-align:center;background:linear-gradient(180deg,rgba(7,14,31,.92),rgba(6,22,31,.94));border-width:3px}
.hero-panel h1{margin:15px 0 12px;font-size:37px;line-height:1.22;letter-spacing:.03em;text-shadow:3px 3px 0 #000}
.hero-panel h1 em{color:var(--gold);font-style:normal;font-size:1.24em;text-shadow:2px 2px 0 #6f4809,0 0 14px rgba(240,198,78,.35)}
.hero-lead{margin:0 auto;max-width:370px;color:#d1d8d8;font-size:15px;line-height:1.9}
.hero-sigil{position:relative;display:grid;place-items:center;width:116px;height:116px;margin:23px auto;border:1px solid rgba(240,198,78,.46);border-radius:50%;box-shadow:0 0 28px rgba(16,217,154,.25),inset 0 0 25px rgba(16,217,154,.18)}
.hero-sigil:before,.hero-sigil:after,.hero-sigil i{content:"";position:absolute;inset:12px;border:1px dashed var(--green);border-radius:50%;transform:rotate(23deg)}
.hero-sigil:after{inset:27px;border-style:solid;border-color:var(--gold);transform:rotate(-31deg)}
.hero-sigil i{inset:3px;border-style:dotted;transform:rotate(0)}
.hero-sigil b{font:900 43px/1 var(--pixel);color:var(--gold-light);text-shadow:0 0 14px rgba(240,198,78,.85)}
.hero-panel .primary{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;background:linear-gradient(180deg,#f5d45e,#eab93b);color:#151208;border-color:#fff1a2;box-shadow:inset 0 0 0 3px #8c6514,4px 6px 0 #1a1103;font-size:17px}
.hero-panel .primary small{font:700 9px/1.5 var(--pixel);letter-spacing:.11em}
.sample-button{margin:19px auto 0;padding:8px 4px;border:0;border-bottom:1px solid var(--green);background:transparent;color:var(--green-bright);font-size:13px;cursor:pointer}
.type-index{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.type-index-card{display:flex;min-height:92px;background:rgba(5,10,24,.9);border:2px solid var(--green-dim);box-shadow:inset 0 0 0 2px rgba(4,14,27,.9),0 0 12px rgba(16,217,154,.12);overflow:hidden}
.type-index-card img{width:78px;object-fit:cover;object-position:top;background:#071421;border-right:1px solid #506245}
.type-index-card div{display:flex;flex-direction:column;justify-content:center;padding:10px 8px}.type-index-card div>span{font-size:17px}.type-index-card strong{font-size:16px;margin:2px 0;color:#fff}.type-index-card small{color:var(--gold);font:700 8px/1.4 var(--pixel);letter-spacing:.06em}
.home-note{margin:28px 8px 0;color:#aab4bb;font-size:12px;line-height:1.8;text-align:center}

/* Questions */
.question-screen{padding-top:112px;min-height:100vh}
.question-progress{display:flex;justify-content:center;align-items:baseline;gap:18px;color:var(--gold);font:900 29px/1 var(--pixel);text-shadow:2px 2px 0 #58400b,0 0 11px rgba(240,198,78,.44)}
.question-progress span{color:var(--green);font-size:18px}.question-progress b{font-size:20px}
.progress-frame{position:relative;height:26px;margin:25px 0 68px;padding:6px;border:3px solid var(--green-bright);background:var(--ink);box-shadow:inset 0 0 0 2px #eef5ef,0 0 14px rgba(16,217,154,.38)}
.progress-frame i{display:block;height:100%;background:linear-gradient(90deg,#12b88a,#66efc4);box-shadow:inset 0 2px 0 rgba(255,255,255,.38);transition:width .45s ease}
.question-panel{text-align:center}
.question-label{display:inline-block;margin:0 auto 31px;padding:12px 25px;border:2px solid var(--gold);color:var(--gold-light);font:900 18px/1 var(--pixel);letter-spacing:.18em;box-shadow:inset 0 0 0 2px #3f3215,0 0 12px rgba(240,198,78,.18);text-shadow:2px 2px #5a430b}
.question-panel h1{margin:0 auto 48px;max-width:490px;font-size:27px;line-height:1.6;font-weight:650;letter-spacing:.03em;text-shadow:2px 2px 0 #000}
.answer-grid{display:grid;gap:18px}
.answer{position:relative;display:grid;grid-template-columns:60px 1fr;align-items:center;gap:16px;width:100%;min-height:113px;padding:18px 23px;border:3px solid var(--green);background:rgba(4,10,23,.9);box-shadow:inset 0 0 0 2px #113d3e,5px 7px 0 rgba(0,0,0,.52);color:#fff;text-align:left;cursor:pointer;transition:.12s ease}
.answer:hover,.answer.is-selected{border-color:var(--gold);background:linear-gradient(90deg,rgba(136,101,17,.34),rgba(11,65,58,.8));box-shadow:inset 0 0 0 2px #8d701b,5px 7px 0 rgba(0,0,0,.52)}
.answer.is-selected:before{content:"▶";position:absolute;left:-29px;color:#ffd64e;font-size:25px;text-shadow:2px 2px 0 #805801}
.answer-letter{display:grid;place-items:center;width:55px;height:55px;border:3px solid #fff;background:#11b982;color:#fff;font:900 26px/1 var(--pixel);box-shadow:3px 3px 0 #000}
.answer.is-selected .answer-letter{background:#f4c84e;color:#161000}
.answer-copy{font-size:18px;line-height:1.65}
.back-button{min-height:52px;margin:46px auto 0;padding:10px 27px;border:2px solid #788393;background:rgba(5,10,24,.75);color:#adb5c0;font-size:15px;cursor:pointer}.back-button:disabled{opacity:.25;cursor:default}

/* Loading */
.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding-top:40px;padding-bottom:60px;text-align:center}
.magic-stage{position:relative;width:280px;height:280px;margin:-10px auto 26px;display:grid;place-items:center}
.magic-ring{position:absolute;border-radius:50%}.ring-one{inset:19px;border:2px dotted rgba(60,255,189,.34);animation:spin 8s linear infinite}.ring-two{inset:52px;border:2px dashed rgba(240,198,78,.56);animation:spin 5s linear infinite reverse}.ring-three{inset:85px;border:1px solid rgba(60,255,189,.9);box-shadow:0 0 28px rgba(16,217,154,.52),inset 0 0 24px rgba(16,217,154,.42);animation:pulse 1.4s ease-in-out infinite}
.magic-core{display:grid;place-items:center;width:82px;height:82px;border-radius:50%;background:radial-gradient(circle,#fff9a8 0 4%,#5cffb8 20%,#17bf82 42%,rgba(51,21,91,.75) 64%,transparent 72%);color:white;font-size:30px;filter:drop-shadow(0 0 18px #28ffaf);animation:pulse 1s ease-in-out infinite}
.pixel{position:absolute;width:8px;height:8px;background:#45ffba;box-shadow:0 0 6px currentColor;animation:pixel-float 1.7s ease-in-out infinite}.p1{top:47px;left:77px}.p2{top:61px;right:66px;animation-delay:.25s}.p3{bottom:55px;left:54px;animation-delay:.7s}.p4{bottom:39px;right:86px;animation-delay:.9s}.p5{top:117px;left:27px;animation-delay:1.2s}.p6{top:104px;right:23px;animation-delay:1.4s}
.loading-label{margin:0 0 24px;color:var(--gold);font-size:23px;letter-spacing:.04em;text-shadow:0 0 12px rgba(240,198,78,.38)}
.loading-screen h1{margin:0;color:var(--green-bright);font:900 26px/1 var(--pixel);letter-spacing:.23em;text-shadow:3px 3px 0 #063e33,0 0 14px rgba(60,255,189,.56)}
.loading-progress{width:100%;margin:54px 0 0}.loading-progress #loading-fill{width:8%;animation:loadbar 2.8s ease-in-out forwards}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{transform:scale(1.08);filter:brightness(1.2)}}@keyframes pixel-float{50%{transform:translateY(-13px) rotate(90deg);opacity:.38}}@keyframes loadbar{to{width:96%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}

/* Result */
.result-screen{padding:70px 20px 0}
.result-heading{display:flex;align-items:center;justify-content:center;width:min(82%,410px);min-height:47px;margin:8px auto 35px;padding:9px 20px;border:2px solid var(--gold);background:rgba(5,10,24,.88);box-shadow:inset 0 0 0 2px #5d4717,0 0 15px rgba(240,198,78,.14);text-align:center}.result-heading p{margin:0;color:var(--gold-light);font-size:18px;letter-spacing:.08em}
.result-hero{display:flex;flex-direction:column;align-items:center;position:relative;padding:0 2px 18px}
.type-card{background:linear-gradient(180deg,#040817,#071729);overflow:hidden;text-align:center}
.hero-type-card{width:67%;padding:12px 11px 14px;border-width:3px}
.type-nameplate{position:relative;z-index:4;display:flex;justify-content:center;align-items:center;gap:9px;min-height:46px;margin:-3px -3px 0;border:2px solid var(--gold);background:#060b1b;color:var(--gold);font-size:24px;font-weight:900;letter-spacing:.03em;text-shadow:2px 2px 0 #4d3608}
.type-art-wrap{position:relative;margin:10px 0 0;border:1px solid rgba(60,255,189,.45);background:radial-gradient(circle at 50% 45%,rgba(16,217,154,.32),rgba(4,8,21,.18) 58%),linear-gradient(transparent 96%,rgba(60,255,189,.17) 96%);background-size:auto,16px 16px;overflow:hidden}
.type-art-wrap:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 30px #02040c;pointer-events:none}
.type-art{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.type-subtitle{margin-top:8px;padding:8px;border:2px solid var(--gold);background:#07332e;color:var(--gold-light);font-size:19px;font-weight:900;text-shadow:2px 2px #322207}
.type-tagline{margin:8px 1px 0;padding:8px;border:1px solid var(--green-dim);font-size:13px;font-weight:700;line-height:1.5}
.result-times{margin:19px 0 16px;color:var(--gold);font:900 38px/1 var(--pixel);text-shadow:2px 2px 0 #5b430b}
.level-badge{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:50%;min-width:190px;height:210px;border-radius:0;border:3px solid var(--gold);background:radial-gradient(circle at 50% 50%,rgba(16,217,154,.20),transparent 54%),#050a18;box-shadow:inset 0 0 0 4px #f8f4d7,inset 0 0 0 7px #574414,0 0 18px rgba(240,198,78,.22);color:var(--gold-light);text-align:center}
.level-badge.is-large{width:50%;height:210px}.result-hero>.level-badge{position:relative;right:auto;bottom:auto;z-index:auto}
.level-badge .gem{position:absolute;inset:17px;border:2px solid var(--green);transform:rotate(45deg);box-shadow:0 0 13px rgba(60,255,189,.6)}
.level-badge strong{z-index:2;font:900 52px/1 var(--pixel);text-shadow:3px 3px 0 #5b430b}.level-badge .level-over,.level-badge .level-under{z-index:2;font:800 15px/1.4 var(--pixel);letter-spacing:.05em}.level-badge small{position:absolute;bottom:10px;padding:3px 7px;border:1px solid var(--gold);background:#050a18;color:var(--gold);font-size:9px}
.level-king{height:225px;background:radial-gradient(circle at 50% 52%,rgba(20,96,78,.38),#06101e 70%);border-radius:0}.level-king img{width:116px;height:116px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(240,198,78,.55))}.level-king strong{font-family:var(--jp);font-size:27px}.level-king .level-over{position:absolute;top:15px;font-size:18px}.level-king .level-under{position:static}
.result-combination{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;width:100%;margin:27px 0 17px;color:#e8ecec;font-size:20px;font-weight:800;line-height:1.5}.result-combination span:first-child{color:var(--green-bright)}.result-combination b{color:var(--gold)}
.ai-level-frame{width:min(86%,430px);padding:14px 18px;border:3px solid var(--green);background:rgba(5,10,24,.88);box-shadow:inset 0 0 0 2px #174940;color:#fff;font-size:18px;font-weight:800;text-align:center}
.line-callout{margin:39px 2px 0;padding:28px 24px 24px;text-align:center;background:rgba(5,12,25,.94)}.line-callout>p{margin:0 0 17px;color:var(--gold-light);font-weight:800}.line-callout small,.connection-note{display:block;margin-top:14px;color:#98a5ad;font-size:10px}.line-button{width:100%;background:linear-gradient(180deg,#19d488,#08a66b);border-color:#79f5bd;color:#03140d;font-size:16px;box-shadow:inset 0 0 0 3px #075c43,4px 5px 0 #02060c}
.content-panel{margin:50px 0 0}.content-panel>.section-title{margin-top:0}
.message-panel blockquote{margin:0;padding:28px 26px;border-left:5px solid var(--green);background:linear-gradient(90deg,rgba(10,80,71,.66),rgba(5,15,29,.82));color:var(--green-bright);font-size:20px;line-height:1.85;text-shadow:0 0 9px rgba(60,255,189,.18)}
.step-up{margin:42px 2px 0;padding:28px 24px;background:#050a18}.step-up h2{margin:7px 0 17px;color:var(--gold);font-size:24px}.step-up>p:last-child{margin:0;color:#d4d8da;line-height:1.9}
.detail-type-card{padding:14px;max-width:430px;margin:0 auto 30px}.detail-type-card+.section-title{margin-top:42px}.detail-type-card .type-nameplate{font-size:23px}.detail-type-card .type-subtitle{font-size:18px}.detail-type-card .type-tagline{font-size:14px}
.lead-quote{padding:25px 23px;border-left:5px solid var(--green);background:rgba(8,61,54,.56);color:var(--green-bright);font-size:20px;line-height:1.8}
.long-copy{margin-top:30px;color:#d3d7da;font-size:16px;line-height:2}.long-copy p{margin:0 0 21px}
.two-column-content>div{padding:4px 20px 20px;background:rgba(5,10,24,.88)}.two-column-content>div+div{margin-top:25px}.two-column-content .section-title{margin-top:17px;margin-bottom:8px}.strength-box{border:3px solid var(--green);box-shadow:inset 0 0 0 2px #194c43}.growth-box{border:3px solid var(--gold);box-shadow:inset 0 0 0 2px #5b4717}.growth-box .section-title span,.growth-box .rpg-list li:before{color:var(--gold)}.growth-box .rpg-list li{border-bottom-color:rgba(240,198,78,.28)}
.rpg-list{list-style:none;margin:0;padding:0}.rpg-list li{position:relative;margin:0;padding:17px 15px 17px 39px;border-bottom:1px solid rgba(16,217,154,.23);color:#d8ddde;font-size:15px;line-height:1.75}.rpg-list li:before{content:"▶";position:absolute;left:11px;top:19px;color:var(--green)}
.partner-panel{margin:51px 2px 0;padding:31px 25px;background:#050a18}.partner-panel h2{margin:9px 0 30px;color:#fff;font-size:24px}.partner-panel h3{margin:0 0 16px;color:var(--gold);font-size:29px}.partner-panel>p:not(.panel-kicker){color:#d1d6d9;line-height:1.9}
.level-detail{text-align:center}.level-detail>.level-badge{margin:0 auto 19px}.level-detail h3{font-size:22px;color:var(--gold-light)}.level-detail>p{color:#d1d6d9;line-height:1.9;text-align:left}.level-detail .rpg-list{text-align:left}.provisional{display:inline-block;margin:-8px 0 17px;padding:4px 8px;border:1px solid var(--gold-dark);color:#c9a741;font:700 9px/1.4 var(--pixel)}
.next-panel{margin:48px -20px 0;padding:38px 27px 44px;border-top:1px solid rgba(16,217,154,.46);border-bottom:1px solid rgba(16,217,154,.46);background:linear-gradient(90deg,rgba(5,10,24,.3),rgba(12,72,61,.55),rgba(5,10,24,.3))}.next-panel .section-title{margin:0 0 18px}.next-panel p{margin:0;color:#d7dddd;font-size:17px;line-height:1.9}
.share-section>p{color:#c2cbd0;line-height:1.8}.share-preview-frame{min-height:240px;padding:8px;background:#060b18;display:grid;place-items:center}.share-preview-frame:empty:after,.share-preview-frame:not(:has(img[src])):after{content:"結果画像を生成しています";color:#788891;font-size:12px}.share-preview-frame img{display:block;width:100%;height:auto}.share-preview-frame img:not([src]),.share-preview-frame img[src=""]{display:none}
.save-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:27px}.save-main{grid-column:1/-1;background:linear-gradient(180deg,#ffd95d,#e9b833);color:#151007;border-color:#fff1a1;font-size:15px;box-shadow:inset 0 0 0 3px #8a6517,4px 5px 0 #02060c}.save-sub{color:var(--green-bright);font-size:14px}
.benefits-lead{color:#cad1d4;line-height:1.9}.benefit-featured{display:grid;gap:15px;margin:24px 0}.benefit-featured article{display:flex;align-items:center;gap:17px;min-height:95px;padding:16px 18px;border:2px solid var(--gold);background:#060c1d;box-shadow:inset 0 0 0 2px #443615}.benefit-featured article>span{display:grid;place-items:center;width:50px;height:50px;border:2px solid var(--green);background:#092f2d;font-size:22px}.benefit-featured small{color:var(--green);font:700 9px/1.4 var(--pixel);letter-spacing:.08em}.benefit-featured h3{margin:4px 0 0;font-size:17px;line-height:1.45}.benefit-featured article div>b{display:inline-block;margin-top:8px;padding:2px 7px;border:1px solid var(--gold);color:var(--gold);font:700 9px/1.2 var(--pixel)}
.more-title{margin:34px 0 17px;color:var(--gold);font-size:20px;text-align:center}.benefit-more-list{display:grid;gap:12px}.benefit-more-list article{display:flex;align-items:center;gap:15px;min-height:75px;padding:13px 16px;border:2px solid var(--green);background:rgba(4,35,34,.74);box-shadow:inset 0 0 0 2px #09241f}.benefit-more-list article>span{display:grid;place-items:center;width:42px;height:42px;flex:0 0 auto;border:1px solid var(--gold);color:var(--gold);font-size:18px}.benefit-more-list small{color:#75ddba;font:700 8px/1.4 var(--pixel);letter-spacing:.08em}.benefit-more-list h3{margin:3px 0 0;font-size:15px;line-height:1.4}
.result-footer{margin:60px -20px 0;padding:42px 20px 35px;background:#02050d;text-align:center;border-top:1px solid #2a493e}.restart-button{margin:30px auto 20px;padding:12px 20px;border:1px solid #75818a;background:transparent;color:#c5cbd0;cursor:pointer}.result-footer>p{font:700 8px/1 var(--pixel);letter-spacing:.15em;color:#68747d}

dialog{width:min(90vw,420px);padding:0;border:2px solid var(--gold);background:#050a18;color:#fff;box-shadow:0 0 0 4px #11271f,0 20px 80px #000}dialog::backdrop{background:rgba(1,4,12,.8)}.dialog-frame{padding:27px}.dialog-frame h2{margin:0 0 14px;color:var(--gold)}.dialog-frame p{color:#c5ced2;line-height:1.75}.dialog-frame button{width:100%;min-height:48px;border:2px solid var(--green);background:#092d29;color:#fff;cursor:pointer}

@media(max-width:430px){
  .page-shell{padding-left:14px;padding-right:14px}.result-screen{padding-left:14px;padding-right:14px}.next-panel,.result-footer{margin-left:-14px;margin-right:-14px}
  .question-screen{padding-top:94px}.progress-frame{margin-bottom:57px}.question-label{font-size:16px;padding:11px 20px}.question-panel h1{font-size:24px;margin-bottom:40px}.answer{grid-template-columns:52px 1fr;gap:13px;min-height:103px;padding:16px 15px}.answer-letter{width:49px;height:49px;font-size:23px}.answer-copy{font-size:16px}
  .type-index{grid-template-columns:1fr}.type-index-card{min-height:78px}.type-index-card img{width:90px}.hero-panel h1{font-size:33px}
  .type-nameplate{font-size:20px}.type-subtitle{font-size:16px}.result-hero>.level-badge{right:auto;transform:none}.result-combination{margin-right:0;font-size:16px}.section-title{font-size:23px}.hero-type-card{width:67%}.level-badge,.level-badge.is-large{width:50%;min-width:176px}.level-king img{width:108px;height:108px}
  .save-grid{gap:12px}.save-sub{font-size:12px;padding:4px}.message-panel blockquote{font-size:18px}.long-copy{font-size:15px}
}
@media(min-width:591px){body:before,body:after{content:"";position:fixed;top:0;bottom:0;width:calc((100vw - var(--page))/2);background:linear-gradient(90deg,#01040b,#07111e);z-index:-1}body:before{left:0}body:after{right:0;transform:scaleX(-1)}.page-shell{box-shadow:0 0 70px rgba(0,0,0,.75)}}

/* Photo-matched result proportions and decorative skin. */
.page-shell{background:radial-gradient(ellipse 90% 620px at 5% 200px,rgba(0,179,121,.29),transparent),url('assets/background.png') center top/590px auto repeat-y,#050916}
.result-heading{width:auto;max-width:310px;margin:8px auto 54px;padding:12px 19px;background:transparent;box-shadow:none}
.result-heading p{font-size:18px}
.type-card{padding:10px;border:3px solid #17b990;outline:3px solid #f8f5e9;outline-offset:-9px;box-shadow:none}
.type-nameplate{min-height:40px;margin:2px 2px 0;font-size:25px;border-width:3px;clip-path:polygon(6% 0,94% 0,100% 50%,94% 100%,6% 100%,0 50%);padding:3px 14px}
.type-art-wrap{margin:0 2px;border:0}.type-art{aspect-ratio:1.45;object-fit:cover;object-position:center 45%}
.type-subtitle{margin:0 2px;padding:5px 2px;font-size:23px;border-width:3px;line-height:1.2}
.type-tagline{margin:4px 2px 2px;padding:5px 2px;font-size:15px;line-height:1.4;white-space:nowrap;letter-spacing:-.05em}
.hero-type-card{width:67%;padding:8px}
.hero-type-card .type-nameplate{min-height:29px;font-size:20px;padding:1px 8px}
.hero-type-card .type-subtitle{font-size:17px;padding:4px 1px}
.hero-type-card .type-tagline{font-size:10px;padding:4px 0}
.hero-type-card .type-art{aspect-ratio:1.4}
.type-card .corner{width:15px;height:15px;background:#13b98b;border:2px solid white;filter:none}
.corner-tl{top:0;left:0}.corner-tr{top:0;right:0}.corner-bl{bottom:0;left:0}.corner-br{bottom:0;right:0}
.result-times{font-size:37px;margin:15px 0}
.level-badge,.level-badge.is-large{width:50%;min-width:0;height:auto;aspect-ratio:1;padding:8px;overflow:hidden;box-shadow:inset 0 0 0 5px #050818,inset 0 0 0 9px white}
.level-king img{width:90%;height:77%;object-fit:contain;margin:10px 0 0;filter:none}
.level-king .level-over{position:absolute;top:13px;background:#07091f;border:2px solid #b18a39;padding:0 17px;color:#ffdb52;font-size:22px;line-height:1.2}
.level-king strong{position:absolute;bottom:13px;left:18%;right:18%;padding:2px;background:#07091f;border:2px solid #ae8540;color:#ffdb52;font-size:24px;line-height:1.2}
.result-combination{gap:9px;font-size:25px;margin-top:27px;text-shadow:2px 3px #08634e}
.result-combination span:first-child,.result-combination span:last-child{color:#f4d354}.result-combination b{color:white;text-shadow:none}
.ai-level-frame{padding:12px 8px;width:78%;font-family:var(--pixel);font-size:20px;letter-spacing:.08em;background:rgba(0,78,59,.15)}
.line-callout{border-top:4px double #16b38a;border-bottom:4px double #16b38a;margin:25px 0 0;padding:54px 20px 49px;background:transparent}
.line-callout>p{font-size:19px;line-height:1.8;font-weight:400;color:#f8d356;margin-bottom:29px}
.line-button{background:#05c653;color:white;border:4px solid #28e578;outline:4px solid black;box-shadow:5px 7px black,0 0 30px #03cb5c70;min-height:69px;font-weight:400;font-size:18px}
.line-callout small{font-size:12px;line-height:1.7;margin-top:25px}
.content-panel{margin-top:68px}.section-title{font-size:27px;font-weight:400;gap:14px;margin-bottom:30px}
.message-panel blockquote{border-left-color:#f5cf51;color:#f5cf51;background:rgba(110,79,10,.13);font-size:21px;padding:23px;line-height:1.9}
.step-up{border:0;box-shadow:none;background:transparent;padding:0;margin:34px 0 55px}.step-up .corner{display:none}.step-up .panel-kicker{display:none}.step-up h2{color:#f4d452;font-size:21px;font-weight:400}.step-up h2:before{content:'▶ ';font-size:19px}.step-up>p:last-child{font-size:18px;line-height:2}
.detail-type-card{max-width:none;padding:10px;margin-bottom:34px}
.long-copy{font-size:18px;line-height:2.15}.long-copy p{margin-bottom:37px}
.two-column-content>div{position:relative;padding:25px 25px 21px;border-width:3px;box-shadow:none}
.two-column-content>div:before{content:'';position:absolute;top:-7px;left:-6px;width:13px;height:13px;background:var(--green);border:2px solid white}.two-column-content>.growth-box:before{background:var(--gold)}
.two-column-content .section-title{font-size:19px;color:var(--green);margin:5px 0 20px}.two-column-content .section-title span{display:none}.growth-box .section-title{color:var(--gold)}
.rpg-list li{border:0;font-size:18px;line-height:1.8;padding:13px 0 13px 27px}.rpg-list li:before{font-size:12px;left:0;top:20px}.strength-box .rpg-list li:before{content:'◆';font-size:18px}.growth-box .rpg-list li:before{content:'◇';font-size:18px}
.ornate:not(.type-card){border:4px double #cfa545;outline:1px solid #edcc6a;outline-offset:3px;box-shadow:inset 0 0 0 8px #050919,inset 0 0 0 10px #9a794a;}
.ornate:not(.type-card)>.corner{width:20px;height:20px;background:#078b64;border:3px ridge #ffe177;box-shadow:0 0 0 3px #352619;transform:rotate(45deg);filter:none}
.ornate:not(.type-card)>.corner-tl{top:0;left:0}.ornate:not(.type-card)>.corner-tr{top:0;right:0}.ornate:not(.type-card)>.corner-bl{bottom:0;left:0}.ornate:not(.type-card)>.corner-br{bottom:0;right:0}
.partner-panel{margin-top:58px;padding:35px}.partner-panel .panel-kicker{display:none}.partner-panel h2{font-size:15px;letter-spacing:.15em;color:var(--gold);font-weight:400;margin:0 0 25px}.partner-panel h3{font-size:31px;font-weight:400}.partner-panel>p:not(.panel-kicker){font-size:18px;line-height:2}.partner-panel .rpg-list li{padding-top:17px;padding-bottom:17px}
.level-detail>.level-badge{width:90%;margin-bottom:37px}.level-detail .level-king .level-over{top:22px;font-size:35px}.level-detail .level-king strong{bottom:22px;font-size:40px}.level-detail .level-king img{width:88%;height:82%}
.level-detail>.section-title{justify-content:flex-start;margin-top:0}.level-detail .level-subheading{text-align:left;font-size:20px;font-weight:400;color:var(--gold)}.level-detail>p{font-size:18px;line-height:2}.level-detail .rpg-list li:before{content:'★';color:var(--gold);font-size:20px}
.next-panel{margin:45px 3px 0;border:4px double #b48c3d;outline:1px solid #e2bd58;outline-offset:3px;background:#050a18;padding:32px;box-shadow:inset 0 0 0 7px #070d19,inset 0 0 0 8px #977c4e}.next-panel .section-title{font-size:17px;color:var(--green)}
.share-preview-frame{min-height:0;padding:7px}.save-main{font-size:17px;min-height:60px}.save-sub{min-height:63px;font-size:16px}
.benefits-lead{border:3px solid #16b28c;padding:23px;font-size:18px}.benefit-featured{gap:17px}.benefit-featured article{border:3px solid #16b28c;box-shadow:none;min-height:146px;padding:22px;gap:22px;position:relative}.benefit-featured article:before{content:'';position:absolute;top:-6px;left:-6px;width:12px;height:12px;background:#f5d35b;border:2px solid white}.benefit-featured article>span{border:0;background:none;width:27px;flex:0 0 27px;font-size:28px}.benefit-featured small{color:var(--gold);font-size:17px;letter-spacing:.18em}.benefit-featured h3{font-size:19px;line-height:1.65;font-weight:400;margin-top:11px}.benefit-featured article div>b{border:0;padding:0;color:#9ca4b7;font-size:17px;letter-spacing:.12em}
.more-title{text-align:left;font-size:19px;font-weight:400}.more-title:before{content:'▶ '}.benefit-more-list article{background:rgba(5,12,22,.7);min-height:80px;padding:17px;gap:18px;box-shadow:none}.benefit-more-list article>span{border:0;width:25px;font-size:24px}.benefit-more-list small{display:none}.benefit-more-list h3{font-size:16px;font-weight:400;line-height:1.8}
.final-offer{margin:80px 3px 0;padding:38px 27px;background:#050a18;text-align:center}.final-offer .panel-kicker{color:var(--gold);font-size:16px}.final-offer h2{font-size:25px;line-height:1.6;font-weight:400;margin:26px 0}.final-offer em{font-style:normal;color:var(--green)}.final-offer>p:not(.panel-kicker){font-size:17px;line-height:2}.final-offer .line-button{margin:28px 0 10px}.connection-note{font-size:12px;line-height:1.8}
.result-footer{background:transparent;border-top:3px double #175c4c;margin-top:110px}.result-footer>.brand-mark{display:none}.result-footer>p{font-size:14px;line-height:1.7}.result-footer .prototype-note{font-size:12px;color:#98a5ad;line-height:1.8;letter-spacing:0}
@media(max-width:430px){
 .result-heading{max-width:215px;margin-bottom:54px}.result-heading p{font-size:16px}.result-screen{padding-top:65px}.hero-type-card .type-nameplate{font-size:17px;min-height:25px}.hero-type-card .type-subtitle{font-size:14px}.hero-type-card .type-tagline{font-size:8px;letter-spacing:-.09em}.hero-type-card{padding:7px}.result-combination{font-size:21px}.ai-level-frame{width:80%;font-size:17px}.level-king .level-over{font-size:18px;top:12px}.level-king strong{font-size:20px;bottom:12px}.level-king img{height:76%;width:86%;margin-top:10px}.line-callout{padding:45px 18px}.line-callout>p{font-size:16px}.line-button{font-size:16px;min-height:61px}.section-title{font-size:23px}.type-nameplate{font-size:25px}.type-subtitle{font-size:22px}.type-tagline{font-size:12px}.long-copy{font-size:16px}.step-up>p:last-child{font-size:16px}.lead-quote{font-size:19px}.rpg-list li{font-size:16px}.two-column-content>div{padding:25px 23px}.partner-panel{padding:32px}.partner-panel>p:not(.panel-kicker){font-size:16px}.level-detail>p{font-size:16px}.benefits-lead{font-size:16px}.benefit-featured h3{font-size:17px}.final-offer h2{font-size:22px}.final-offer>p:not(.panel-kicker){font-size:16px}.final-offer{padding:35px 22px}.save-main{font-size:15px}.save-sub{font-size:14px}
}
@media(max-width:350px){.hero-type-card{width:74%}.hero-type-card .type-tagline{font-size:8px}.result-combination{font-size:18px;gap:6px}.type-tagline{font-size:10px}.final-offer{padding-left:16px;padding-right:16px}.line-button{font-size:14px}.section-title{font-size:21px}.save-main{font-size:13px}.save-sub{font-size:12px}}
.level-king img,.level-detail .level-king img{position:absolute;top:12%;left:8%;width:84%;height:79%;margin:0;object-fit:contain}
.level-king .level-over,.level-king strong{z-index:2}
@media(max-width:430px){
 .question-screen{padding-top:55px}.question-progress{font-size:25px}.question-progress b{font-size:17px}.question-screen .progress-frame{height:24px;margin:22px 0 43px;padding:5px}.question-label{margin-bottom:24px;min-width:178px;font-size:18px;letter-spacing:.14em;padding:10px 12px;text-shadow:1px 0 currentColor}.question-panel h1{font-size:23px;margin-bottom:37px;line-height:1.65}.answer-grid{gap:15px;margin-left:22px}.answer{min-height:76px;grid-template-columns:38px 1fr;padding:16px 17px;gap:16px}.answer-letter{width:38px;height:38px;font-size:21px;text-shadow:1px 0 currentColor}.answer-copy{font-size:16px;line-height:1.6}.back-button{min-height:43px;margin-top:31px;padding:7px 24px;font-size:14px}.answer.is-selected:before{left:-24px;font-size:18px}.loading-screen .progress-frame{margin-top:43px;margin-bottom:0}
}
.result-heading h1{margin:0;color:var(--gold-light);font-size:18px;letter-spacing:.08em;font-weight:400}
.loading-progress #loading-fill{animation:none;width:10%}
.message-body{font-size:18px;line-height:2}.next-panel h3{font-size:23px;font-weight:400;line-height:1.6}.provisional-copy{font-size:12px;line-height:1.8;color:#acb6ba}
@media(max-width:430px){.result-heading h1{font-size:16px}.message-body{font-size:16px}.next-panel h3{font-size:21px}}
.pixel-cloud{position:absolute;width:160px;height:160px;pointer-events:none}.pixel-cloud i{position:absolute;left:var(--x);top:var(--y);width:5px;height:5px;background:var(--spark);box-shadow:4px 3px var(--spark);animation:pixel-spark 1.4s var(--delay) infinite alternate steps(3)}
@keyframes pixel-spark{from{opacity:.25;transform:translate(0,0)}to{opacity:1;transform:translate(5px,-7px)}}
.loading-screen h1{font-size:25px;text-shadow:1px 0 currentColor,2px 2px #064738;letter-spacing:.21em}
@media(prefers-reduced-motion:reduce){.pixel-cloud i{animation:none}.magic-ring,.magic-core,.pixel{animation:none}}
.ornate:not(.type-card)>.corner{width:46px;height:46px;background:url('assets/frame-corner.svg') center/contain no-repeat;border:0;box-shadow:none;transform:none;filter:none;pointer-events:none}
.ornate:not(.type-card)>.corner-tl{top:-4px;left:-4px}.ornate:not(.type-card)>.corner-tr{top:-4px;right:-4px;transform:rotate(90deg)}.ornate:not(.type-card)>.corner-bl{bottom:-4px;left:-4px;transform:rotate(-90deg)}.ornate:not(.type-card)>.corner-br{bottom:-4px;right:-4px;transform:rotate(180deg)}

/* Start screen layout */
.home-reference{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100vh;
  padding:56px 4.1% 46px;
}
.home-sr-title{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.home-hero-frame{
  position:relative;
  width:100%;
  margin:0;
  padding:7px;
  border:3px solid #0bb985;
  background:#06101d;
  box-shadow:0 0 18px rgba(16,217,154,.26);
}
.home-hero-frame img{
  display:block;
  width:100%;
  height:auto;
  border:3px solid #f4f7f5;
  background:#050a18;
}
.home-corner{
  position:absolute;
  z-index:2;
  width:12px;
  height:12px;
  background:#10bd88;
  border:2px solid #fff;
}
.home-corner-tl{top:9px;left:9px}
.home-corner-br{right:9px;bottom:9px}
.home-copy{
  width:100%;
  margin:40px auto 0;
  text-align:center;
}
.home-copy p{
  margin:0;
  color:#f5f7f6;
  font-size:clamp(15px,4.1vw,19px);
  line-height:32px;
  letter-spacing:-.025em;
  white-space:nowrap;
  text-shadow:2px 2px 0 #000;
}
.home-type-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:10px;
  width:90%;
  margin:40px auto 0;
}
.home-type-box{
  grid-column:span 2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:56px;
  border:3px solid #0cbd86;
  background:rgba(3,8,20,.84);
  box-shadow:inset 0 0 0 2px rgba(6,58,49,.8),4px 5px 0 rgba(0,0,0,.82);
  color:#fff;
  font-size:17px;
}
.home-type-box span{font-family:var(--jp);font-size:20px}
.home-type-box strong{font-weight:400}
.home-type-commander{grid-column:3 / span 2;width:calc(100% + 12px);justify-self:center}
.home-start-button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  width:100%;
  min-height:65px;
  margin:40px 0 0;
  border:4px solid #19e0a2;
  outline:4px solid #010309;
  background:linear-gradient(180deg,#10cb93 0%,#0bb881 76%,#068966 100%);
  box-shadow:inset 0 6px 0 rgba(70,255,199,.22),7px 9px 0 #010309,0 0 22px rgba(16,217,154,.25);
  color:#fff;
  font-size:22px;
  font-weight:400;
  text-shadow:2px 2px 0 rgba(0,50,37,.75);
  cursor:pointer;
}
.home-start-button span{font-size:27px}
.home-start-button:hover{filter:brightness(1.08)}
.home-start-button:focus-visible{outline:3px solid #fff;outline-offset:7px}
.home-start-button:active{transform:translate(3px,3px);box-shadow:inset 0 6px 0 rgba(70,255,199,.22),4px 6px 0 #010309}
.home-footer{
  margin:45px 0 0;
  color:#767e8e;
  font-family:var(--pixel);
  font-size:16px;
  line-height:1.6;
  letter-spacing:.10em;
  text-align:center;
}
@media(max-width:430px){
  .home-reference{padding:48px 4.1% 42px}
  .home-copy p{font-size:clamp(14px,4.05vw,17px);line-height:32px}
  .home-type-grid{width:90%;gap:8px}
  .home-type-box{gap:7px;min-height:54px;font-size:16px}
  .home-type-box span{font-size:18px}
  .home-start-button{font-size:20px}
  .home-footer{font-size:16px}
}
@media(max-width:350px){
  .home-reference{padding-left:3.5%;padding-right:3.5%}
  .home-copy p{font-size:13.5px;letter-spacing:-.04em}
  .home-type-grid{width:94%;gap:6px}
  .home-type-box{gap:4px;font-size:14px}
  .home-type-box span{font-size:16px}
}