@charset "UTF-8";
:root{--bg:#f6f5f1;--paper:#fff;--ink:#252a3c;--muted:#727788;--line:#e6e5e3;--navy:#191e31;--accent:#64577f;--gold:#c8b48d;--water:#72b3dc;--fire:#e6a17f;--grass:#9abc95;--sans:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;--serif:"Noto Serif CJK JP","Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;-webkit-font-smoothing:antialiased}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait;opacity:.6}button{border:0}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid #8a77b7;outline-offset:4px}button:hover{filter:brightness(1.06)}button, a{touch-action:manipulation}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}[hidden]{display:none!important}h1,h2,h3,p{margin:0}.srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skipLink{position:absolute;left:20px;top:-80px;z-index:99;background:white;padding:12px}.skipLink:focus{top:8px}
.siteHeader{height:80px;background:var(--navy);color:#faf9f5;border-bottom:1px solid #32364a}.headerInner{max-width:1240px;height:100%;margin:auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:13px}.brand>span{display:flex;align-items:baseline;gap:13px}.brand strong{font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:.09em}.brandSub{font-size:12px;letter-spacing:.12em;color:#c5c7d1}.headerRight{display:flex;gap:22px;align-items:center}.fanLabel{font-size:9px;letter-spacing:.16em;color:#9b9fb2}.previewPill{border:1px solid #474759;border-radius:4px;padding:7px 10px;color:#ded6e9;font-size:10px;letter-spacing:.04em;display:flex;align-items:center;gap:6px}.previewPill>span{width:5px;height:5px;border-radius:50%;background:#c2adcf}
.page{max-width:1240px;margin:auto;padding:0 40px}.intro{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:52px 0 36px}.eyebrow{display:flex;gap:10px;align-items:center;font-size:9px;font-weight:600;letter-spacing:.18em;color:#80715d;margin-bottom:19px}.line{width:26px;height:1px;background:#b6a17b}h1{font-family:var(--serif);font-size:46px;font-weight:500;line-height:1.35;letter-spacing:.04em}h1 span{color:#5f526e}.introText{color:#6d7180;font-size:12px;line-height:1.9;margin-top:14px;letter-spacing:.025em}.mobileBreak{display:none}.steps{display:flex;gap:25px;align-items:center;padding:20px 0 0;margin:0;list-style:none}.steps li{display:flex;flex-direction:column;gap:14px;position:relative;min-width:83px;font-size:10px;color:#727381}.stepNumber{font-family:Georgia,serif;font-size:27px;font-style:italic;color:#877e91}.steps li:not(:last-child):after{content:"";position:absolute;top:18px;left:38px;width:55px;height:1px;background:#d8d4d9}.previewNote{display:flex;gap:10px;align-items:center;border:1px solid #e4dfea;border-radius:6px;background:#efedf3;padding:12px 16px;margin-bottom:20px;color:#686078;font-size:11px;line-height:1.7}.previewNote>svg{width:16px;height:16px}.previewNote p{flex:1;display:flex;gap:14px;align-items:center}.previewNote strong{font-size:10px;font-weight:600;white-space:nowrap}.textButton{background:none;color:var(--accent);font-size:11px;font-weight:600;padding:7px 0;white-space:nowrap}.textButton span{margin-left:9px;font-size:16px}.workspace{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:start;gap:24px;scroll-margin-top:20px}.uploadPanel{background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 5px 18px #1e263504}.panelHeading{display:flex;justify-content:space-between;align-items:center;padding:25px 28px 22px;border-bottom:1px solid var(--line);gap:10px}.sectionNumber{font-size:9px;letter-spacing:.16em;color:#938799;font-weight:600;display:block;margin-bottom:8px}h2{font-size:18px;letter-spacing:.035em;font-weight:600}.countBadge{font-size:10px;color:#777d8d;background:#f3f3f5;border:1px solid #e9e9ed;padding:5px 9px;border-radius:4px;white-space:nowrap}.uploadBody{padding:24px 28px 21px}.dropzone{border:1px dashed #c9c7d2;border-radius:7px;background:#fbfafc;text-align:center;padding:31px 16px 22px;transition:background .15s,border-color .15s}.dropzone.dragging{background:#ede8f5;border-color:#75628c}.uploadIllustration{position:relative;width:75px;height:65px;margin:0 auto 19px}.backSheet,.frontSheet{position:absolute;width:45px;height:53px;border:1px solid #c5bdcf;border-radius:5px;top:1px;left:9px;background:#e8e2ef;transform:rotate(-13deg)}.frontSheet{display:grid;place-items:center;top:6px;left:22px;transform:rotate(8deg);background:#fdfcfe}.frontSheet svg{width:27px;height:27px;color:#91829f;stroke-width:1.1}.plusBadge{position:absolute;right:0;bottom:0;width:23px;height:23px;background:#655679;color:white;border:3px solid #fbfafc;border-radius:50%;line-height:17px;font-size:17px}.dropzone h3{font-size:14px;letter-spacing:.03em;font-weight:600}.dropSub{font-size:11px;color:#858292;margin-top:8px}.primary{display:flex;justify-content:center;align-items:center;gap:11px;min-height:46px;background:#615174;color:white;border:1px solid #615174;border-radius:5px;font-size:12px;font-weight:600;letter-spacing:.04em;transition:background .15s;box-shadow:0 3px 7px #53436413}.primary:hover{background:#514263}.chooseButton{margin:21px auto 15px;padding:0 32px;min-width:190px}.chooseButton svg{width:17px;height:17px}.fileTypes{font-size:10px;color:#8b8694}.uploadHint{display:flex;gap:11px;margin:18px 0 0;align-items:flex-start;color:#80828e}.uploadHint svg{width:17px;height:17px;margin-top:2px;color:#8d869c}.uploadHint p{font-size:10px;line-height:1.9}.uploadHint strong{font-weight:500;color:#555166}.localOnly{display:flex;align-items:center;justify-content:center;gap:5px;color:#898491;font-size:9px;margin:24px 0 0;line-height:1.7}.localOnly svg{width:12px;height:12px}.fileError{padding:12px;background:#fff3ee;border:1px solid #eed3c4;border-radius:4px;color:#9a5136;font-size:12px;line-height:1.8;margin-top:16px}
.resultPanel{color:#eeedf4;background:var(--navy);border:1px solid #292e43;border-radius:10px;overflow:hidden;position:sticky;top:24px}.resultPanel .panelHeading{border-color:#34384b}.resultPanel .sectionNumber{color:#a19ab4}.resultPanel h2{font-weight:500}.resultStatus{color:#c0b9cd;font-size:9px;border:1px solid #4c465f;border-radius:3px;padding:5px 8px;white-space:nowrap}.emptyResult{text-align:center;padding:47px 20px 44px}.resultIllustration{width:89px;height:104px;border:1px solid #4b4960;border-radius:5px;background:#23273d;position:relative;margin:0 auto 27px;text-align:left;padding:20px 14px;transform:rotate(-4deg);box-shadow:7px 7px 0 #24283b}.miniLine{display:block;width:34px;height:3px;background:#736d83;border-radius:2px;margin-bottom:8px}.miniLine.short{width:21px;height:2px;background:#4b4a60}.resultIllustration>div{display:flex;gap:5px;margin-top:14px}.resultIllustration i{width:13px;height:5px;border-radius:2px;opacity:.8}.miniLine.bottom{margin-top:10px;width:52px;height:2px;background:#4b4a60}.resultIllustration svg{position:absolute;right:-18px;top:-10px;width:31px;height:31px;fill:#c4b69a;color:#c4b69a;stroke-width:0}.emptyResult h3,.loadingResult h3{font-family:var(--serif);font-weight:500;font-size:18px;letter-spacing:.04em}.emptyResult>p,.loadingResult p{font-size:11px;color:#a6a7b7;line-height:1.9;margin-top:14px}.sampleButton{display:inline-flex;align-items:center;gap:17px;background:#292d43;color:#e0d9ea;border:1px solid #49445b;border-radius:4px;padding:12px 18px;font-size:11px;margin-top:25px}.resultFooter{border-top:1px solid #34384b;padding:17px 28px;display:flex;gap:16px;align-items:center;font-size:10px;color:#c1c0cf}.resultFooter>span{display:flex;align-items:center;gap:6px}.resultFooter i{width:5px;height:5px;border-radius:50%}.water{background:var(--water)}.fire{background:var(--fire)}.grass{background:var(--grass)}.resultFooter .legendText{margin-left:auto;color:#9192a4;font-size:9px}.loadingResult{min-height:365px;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:30px 20px}.spinner{display:block;width:34px;height:34px;border:1px solid #57516a;border-top:2px solid #d4c4e1;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:30px}@keyframes spin{to{transform:rotate(360deg)}}
.characterSets{display:grid;gap:14px;margin-top:20px}.characterSets:empty{display:none}.characterSet{border:1px solid #e4e1e9;border-radius:6px;padding:15px;background:#fcfbfd}.characterHead{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:13px}.characterName{font-size:12px;font-weight:600;display:flex;align-items:center;gap:8px}.characterOrdinal{color:#9b8ba9;font-size:11px;font-family:Georgia,serif}.characterHead button{color:#8d7e91;background:none;font-size:10px;min-height:32px;padding:0 5px}.imageStrip{display:flex;gap:9px;flex-wrap:wrap}.imageTile{position:relative;width:74px;height:100px}.imageZoom{padding:0;width:100%;height:100%;background:#eeecf2;border:1px solid #ded9e5;border-radius:4px;overflow:hidden;display:block}.imageZoom img{width:100%;height:100%;object-fit:contain}.removeImage{position:absolute;right:-5px;top:-5px;width:24px;height:24px;border:2px solid #fcfbfd;background:#333248;color:white;border-radius:50%;font-size:15px;line-height:15px;padding:0;display:grid;place-items:center}.appendImage{background:#f2eef6;border:1px dashed #c9bed7;border-radius:4px;color:#726283;min-height:38px;font-size:10px;margin-top:12px;padding:7px 12px;display:flex;align-items:center;gap:9px}.appendImage:disabled{cursor:default}.characterFoot{display:flex;justify-content:space-between;align-items:center;gap:8px}.imageCount{color:#827b8d;font-size:10px;margin-top:12px}.selectionActions{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#80778b;margin-top:14px}.textButton.muted{color:#817789;font-weight:400;font-size:10px}.simulateButton{width:100%;margin-top:14px;gap:10px}.simulateButton>span:last-child{margin-left:auto}.simulateButton{padding:0 17px}.demoTag{font-size:9px;border:1px solid #a494b6;padding:2px 5px;border-radius:2px;font-weight:400}.dropzone.compact{padding:17px}.dropzone.compact .uploadIllustration,.dropzone.compact h3,.dropzone.compact .dropSub{display:none}.dropzone.compact .chooseButton{margin:0 auto 10px;background:#fff;color:#635374;border-color:#c3b8ce;box-shadow:none}.filledResult{padding:20px 25px}.sampleNotice{font-size:9px;line-height:1.8;display:flex;align-items:flex-start;gap:7px;color:#c3b4cf;margin-bottom:22px}.sampleDot{width:4px;height:4px;border-radius:50%;background:#bea7cc;flex-shrink:0;margin-top:6px}.resultCards{display:grid;gap:20px}.teamCard{border-bottom:1px solid #38394e;padding-bottom:20px}.teamHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.teamName{font-size:13px;font-weight:500;color:#eee9f2}.teamLabel{font-size:9px;color:#aaa4b9;display:block;margin-top:5px}.teamPower{font-family:Georgia,serif;font-size:29px;letter-spacing:.025em;color:#eadfc7}.teamPower small{font-size:10px;color:#aaa3b3;font-family:var(--sans);margin-left:5px}.attributeChips{display:flex;gap:7px;flex-wrap:wrap}.attributeChip{border:1px solid;padding:5px 9px;border-radius:3px;font-size:11px;display:flex;align-items:center;gap:9px;min-width:54px}.attributeChip.water{background:#21384c;color:#acd1eb;border-color:#3a5469}.attributeChip.fire{background:#403134;color:#efbd9f;border-color:#634944}.attributeChip.grass{background:#2d3936;color:#bfd5b3;border-color:#48594c}.attributeChip b{font-weight:500;font-variant-numeric:tabular-nums}.copySection{margin-top:21px}.copyHeading{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#b1aabe;margin-bottom:10px}.copyButton{display:flex;gap:6px;align-items:center;padding:7px 10px;color:#ede6d5;background:#353445;border:1px solid #5c5363;border-radius:4px;font-size:10px}.copyButton svg{width:13px;height:13px}textarea{display:block;width:100%;padding:13px;background:#14192a;border:1px solid #3c3b51;border-radius:4px;color:#ddd9e6;resize:vertical;font-size:11px;line-height:2;min-height:91px;overflow-wrap:anywhere}.copyFeedback{font-size:10px;color:#dacba9;min-height:18px;line-height:1.8;margin-top:6px}.resetButton{display:block;background:none;color:#bcb1c9;font-size:10px;text-decoration:underline;text-underline-offset:4px;padding:8px;margin:7px auto 0}
.guide{border-top:1px solid #dfdcd8;margin-top:40px;padding-top:28px}.guide>div:first-child{display:flex;align-items:baseline;gap:19px}.guide h2{font-size:13px;font-weight:500;color:#625e6d;letter-spacing:.02em}.guide .sectionNumber{font-size:8px;color:#8b7f8c}.guideItems{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}.guide article{display:flex;gap:13px;align-items:flex-start}.guide article>span{font-family:Georgia,serif;font-style:italic;color:#b1a28d;font-size:23px;line-height:1.15}.guide h3{font-size:11px;font-weight:500}.guide p{font-size:10px;color:#85808b;line-height:1.9;margin-top:6px}.siteFooter{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #e3dfdb;margin-top:35px;padding:21px 0 28px;font-size:9px;color:#8c8692;line-height:1.9}.siteFooter>p:last-child{font-size:8px;letter-spacing:.08em;text-align:right}.siteFooter span{display:block}.footerVersion{letter-spacing:0;color:#a09aa4}dialog{border:0;border-radius:10px;background:#1c2032;color:white;padding:35px 22px 15px;width:min(700px,94vw);max-height:94dvh;overflow:auto;box-shadow:0 20px 100px #0007}dialog::backdrop{background:#080b19d9;backdrop-filter:blur(5px)}dialog img{display:block;max-width:100%;max-height:76dvh;object-fit:contain;margin:auto}dialog>button{position:absolute;top:5px;right:6px;width:34px;height:34px;background:#303448;color:#fff;border-radius:50%;font-size:24px}dialog>p{font-size:10px;color:#bab5c9;text-align:center;margin-top:12px}
@media(min-width:1450px){.intro{padding-top:62px;padding-bottom:42px}.page,.headerInner{max-width:1280px}.uploadBody{padding:28px 32px}.dropzone{padding-top:36px;padding-bottom:28px}.emptyResult{padding-top:56px;padding-bottom:50px}}
@media(max-width:1000px){.headerInner,.page{padding-left:26px;padding-right:26px}.steps{gap:12px}.steps li{min-width:70px;font-size:9px}.steps li:not(:last-child):after{width:40px}.panelHeading{padding:22px}.uploadBody{padding:22px}.workspace{gap:18px}.fanLabel{display:none}.emptyResult h3{font-size:16px}.guideItems{gap:12px}.guide p{font-size:9px}}
@media(max-width:760px){.siteHeader{height:68px}.headerInner,.page{padding-left:20px;padding-right:20px}.brand{gap:9px}.brand img{width:31px;height:31px}.brand>span{flex-direction:column;gap:2px}.brand strong{font-size:18px}.brandSub{font-size:8px;letter-spacing:.09em}.previewPill{font-size:8px;padding:6px 8px}.intro{display:block;padding:32px 0 25px}.eyebrow{font-size:8px;margin-bottom:14px;letter-spacing:.13em}.line{width:19px}h1{font-size:35px;letter-spacing:.01em}.introText{font-size:11px;line-height:1.9;margin-top:11px}.steps{gap:0;padding-top:23px;justify-content:space-between;max-width:355px}.steps li{flex-direction:row;align-items:baseline;gap:8px;font-size:9px;min-width:0}.stepNumber{font-size:20px}.steps li:not(:last-child):after{display:none}.previewNote{padding:11px 12px;gap:8px;align-items:flex-start;margin-bottom:18px}.previewNote>svg{margin-top:1px}.previewNote p{display:block;font-size:9px;line-height:1.85}.previewNote p strong{display:block;font-size:9px;margin-bottom:2px}.previewNote .textButton{font-size:9px;padding:0;align-self:center}.previewNote .textButton span{margin-left:3px}.workspace{grid-template-columns:1fr;gap:20px}.panelHeading{padding:21px 22px 18px}.sectionNumber{font-size:8px;margin-bottom:7px}h2{font-size:16px}.uploadBody{padding:20px}.dropzone{padding:26px 12px 20px}.uploadIllustration{transform:scale(.9);margin-bottom:12px}.dropzone h3{font-size:13px}.chooseButton{min-width:180px;margin-top:18px}.uploadHint{gap:9px;margin-top:16px}.uploadHint p{font-size:10px}.localOnly{font-size:8px;margin-top:19px}.resultPanel{position:static}.emptyResult{padding-top:36px;padding-bottom:32px}.emptyResult h3{font-size:17px}.resultIllustration{transform:rotate(-4deg) scale(.9);margin-bottom:20px}.resultFooter{padding:16px 22px}.guide{margin-top:30px;padding-top:23px}.guide>div:first-child{display:block}.guide .sectionNumber{margin-bottom:9px}.guide h2{font-size:12px}.guideItems{grid-template-columns:1fr;gap:20px;margin-top:22px}.guide article>span{font-size:22px}.guide h3{font-size:11px}.guide p{font-size:10px;margin-top:3px}.siteFooter{margin-top:28px;padding-top:20px;font-size:8px;gap:12px}.siteFooter>p:last-child{font-size:7px;white-space:nowrap}.filledResult{padding:20px 22px}.sampleNotice{font-size:8px}.teamPower{font-size:27px}.characterFoot{gap:4px}.appendImage{font-size:9px}.fileError{font-size:11px}}
@media(max-width:370px){.page,.headerInner{padding-left:14px;padding-right:14px}h1{font-size:31px}.previewPill{font-size:7px}.previewNote .textButton{font-size:8px}.uploadBody{padding:16px}.uploadHint p{font-size:9px}.resultFooter .legendText{font-size:8px}.siteFooter{flex-direction:column;gap:10px}.siteFooter>p:last-child{text-align:left}.siteFooter>p:last-child span{display:inline;margin-left:12px}.imageTile{width:62px;height:86px}}
.introText{font-size:13px}.previewNote{font-size:12px}.previewNote strong{font-size:11px}.uploadHint p{font-size:12px}.localOnly{font-size:10px}.dropSub{font-size:12px}.fileTypes{font-size:11px}.primary{font-size:13px}.emptyResult>p{font-size:12px}.sampleButton{font-size:12px}.guide h3{font-size:12px}.guide p{font-size:11px}.copyHeading{font-size:11px}.copyButton{font-size:11px;min-height:36px}.sampleNotice{font-size:10px}textarea{font-size:12px}.characterHead button{min-height:40px}.appendImage{min-height:40px;font-size:11px}.removeImage{width:28px;height:28px}.resetButton{min-height:36px;font-size:11px}.selectionActions{font-size:11px}.imageCount{font-size:11px}
@media(max-width:760px){.introText{font-size:12px}.mobileBreak{display:block}.previewNote{display:grid;grid-template-columns:16px 1fr;column-gap:8px;row-gap:5px}.previewNote p{font-size:11px;line-height:1.8}.previewNote p strong{font-size:10px}.previewNote .textButton{grid-column:2;font-size:11px;justify-self:start;min-height:28px;padding:0}.uploadHint p{font-size:11px}.localOnly{font-size:9px}.primary{font-size:13px}.fileTypes{font-size:10px}.dropSub{font-size:11px}.sampleNotice{font-size:10px}.guide h3{font-size:12px}.guide p{font-size:11px}.copyButton{min-height:40px;font-size:11px}.resetButton{min-height:40px}.characterHead button{font-size:11px}.textButton.muted{min-height:36px;font-size:11px}.resultFooter{font-size:11px}.resultFooter .legendText{font-size:10px}.appendImage{font-size:10px}.imageCount{font-size:10px}.sampleButton{font-size:12px;min-height:44px}.siteFooter{font-size:9px}.siteFooter>p:last-child{font-size:8px}}
/* Character-art edition. Supplied illustrations remain unmodified. */
.characterHero{position:relative;isolation:isolate;overflow:hidden;min-height:420px;margin-top:30px;padding:45px 48px;background:#171b30;border:1px solid #343047;border-radius:10px;color:#f7f3ef;box-shadow:0 12px 40px #1c183c0c}
.characterHero:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 75% 45%,#65456a66 0,transparent 60%),linear-gradient(115deg,#1a2036,#221b32)}
.characterHero:after{content:"";position:absolute;left:48px;top:24px;width:24px;height:1px;background:#bfa68288}
.heroCopy{position:relative;z-index:3;width:44%;max-width:450px}.characterHero .eyebrow{font-size:8px;letter-spacing:.18em;color:#c6b99e;margin-bottom:21px;white-space:nowrap}.characterHero .line{background:#bea586;width:22px}.characterHero h1{font-size:52px;letter-spacing:.035em;line-height:1.33;font-weight:400}.characterHero h1 span{display:block;color:#d3c1dd}.characterHero .introText{font-size:12px;line-height:2.1;color:#b6b4c7;margin-top:18px;letter-spacing:.03em}.heroAction{display:inline-flex;align-items:center;gap:36px;padding:13px 20px;background:#d3bf99;color:#282535;border:1px solid #e0cfae;border-radius:4px;font-size:12px;letter-spacing:.06em;margin-top:24px;min-height:44px;transition:background .18s,transform .18s}.heroAction:hover{background:#ead5b0;transform:translateY(-2px)}.heroAction>span{font-size:18px}.heroFanNote{font-size:9px;color:#a7a2b7;margin-left:15px;white-space:nowrap}
.heroArtwork{position:absolute;right:4px;top:0;width:56%;height:100%;max-width:640px;z-index:1}.artOrbit{position:absolute;width:400px;height:400px;left:20%;top:9px;border:1px solid #b39cb52b;border-radius:50%;transform:rotate(-20deg)}.artOrbit:before{content:"";position:absolute;inset:22px;border:1px solid #b39cb514;border-radius:50%}.characterArt{display:block;position:absolute;margin:0;padding:0;aspect-ratio:518/1122;overflow:hidden;border:1px solid #bfb0d05c;border-radius:5px;background:#0a0c16;box-shadow:0 16px 35px #070914a6;transition:transform .25s,box-shadow .25s;transform-origin:50% 55%}.characterArt img{width:100%;height:100%;object-fit:contain;display:block}.characterArt:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 3px #ffffff07}.crimsonArt{width:27%;left:4%;top:30px;transform:rotate(-10deg);z-index:1}.violetArt{width:31%;left:34%;top:10px;transform:rotate(0deg);z-index:3}.azureArt{width:27%;left:67%;top:30px;transform:rotate(10deg);z-index:2}.characterArt:hover{filter:none;transform:translateY(-5px) rotate(0deg);box-shadow:0 18px 40px #070914c9}.characterArt:focus-visible{outline:2px solid #e9d5af;outline-offset:4px;z-index:4}.artCorner{position:absolute;right:7px;bottom:7px;background:#141522bf;color:#e2cfa8;border:1px solid #cfbfa34d;border-radius:3px;width:24px;height:24px;display:grid;place-items:center;font-size:13px;opacity:0;transition:opacity .2s}.characterArt:hover .artCorner,.characterArt:focus-visible .artCorner{opacity:1}.artCaption{position:absolute;bottom:15px;right:23px;display:flex;gap:15px;align-items:center;font-size:8px;letter-spacing:.23em;color:#b8a5bf}.artCaption span{font-size:18px;color:#bfa67d}
.workflowBar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px 0 24px}.workflowBar>p{font-family:var(--serif);font-size:15px;letter-spacing:.05em;color:#57515e}.workflowBar>p>span{color:#897b91}.workflowBar .steps{padding:0;gap:29px}.workflowBar .steps li{flex-direction:row;align-items:baseline;gap:8px;min-width:0;font-size:10px}.workflowBar .stepNumber{font-size:20px}.workflowBar .steps li:after{display:none}.characterHero~.previewNote{margin-bottom:20px}.characterHero~.workflowBar+.previewNote{margin-bottom:20px}
@media(min-width:1450px){.characterHero{padding:48px 52px;min-height:440px}.characterHero h1{font-size:56px}.characterHero:after{left:52px}.heroArtwork{right:15px}.crimsonArt,.azureArt{top:42px}.violetArt{top:16px}}
@media(max-width:1100px) and (min-width:901px){.characterHero{min-height:365px;padding:36px}.characterHero:after{left:36px;top:19px}.characterHero h1{font-size:45px}.characterHero .introText{font-size:11px}.characterHero .eyebrow{font-size:7px;letter-spacing:.12em}.heroFanNote{display:block;margin:10px 0 0}.heroArtwork{right:0;top:15px}.heroCopy{width:43%}.characterHero .heroAction{margin-top:16px}.workflowBar>p{font-size:13px}}
@media(max-width:900px){.characterHero{height:460px;min-height:0;padding:0;margin-top:22px}.characterHero:after{display:none}.heroArtwork{width:100%;max-width:440px;height:265px;right:50%;transform:translateX(50%);top:-4px}.crimsonArt,.azureArt{width:25%;top:19px}.crimsonArt{left:10%}.violetArt{width:29%;left:35.5%;top:0}.azureArt{left:65%}.artOrbit{width:260px;height:260px;left:22%;top:0}.artCaption{display:none}.heroCopy{position:absolute;max-width:none;width:auto;left:27px;right:27px;bottom:23px}.characterHero h1{font-size:35px;letter-spacing:0;line-height:1.4}.characterHero h1 span{display:inline}.characterHero .eyebrow{font-size:8px;letter-spacing:.1em;margin-bottom:12px}.characterHero .introText{font-size:12px;line-height:1.9;margin-top:9px}.heroAction{margin-top:16px;padding:10px 18px;gap:30px;font-size:12px}.heroFanNote{font-size:9px;margin-left:12px}.characterHero:before{z-index:2;pointer-events:none;background:linear-gradient(0deg,#191b2f 0%,#191b2f 38%,transparent 57%)}.heroCopy{z-index:3}.workflowBar{padding:20px 0}.workflowBar>p{font-size:12px}.workflowBar .steps{gap:18px}.workflowBar .steps li{font-size:9px}.workflowBar .stepNumber{font-size:19px}.artCorner{opacity:1;width:19px;height:19px;font-size:10px;bottom:5px;right:5px}}
@media(min-width:601px) and (max-width:900px){.characterHero{height:350px}.heroCopy{left:28px;bottom:33px;width:46%;right:auto}.characterHero h1{font-size:36px}.characterHero h1 span{display:block}.characterHero .eyebrow{font-size:6px;letter-spacing:.06em}.characterHero .introText{font-size:10px}.heroArtwork{width:54%;height:100%;right:0;top:31px;transform:none}.characterHero:before{background:linear-gradient(90deg,#191b2f 0%,#191b2f 39%,transparent 60%);z-index:0}.crimsonArt{left:0;width:29%}.violetArt{left:31%;width:32%}.azureArt{left:65%;width:29%}.heroFanNote{display:block;margin:9px 0 0}.heroAction{margin-top:16px}.artOrbit{left:0;width:100%;height:auto;aspect-ratio:1}}
@media(max-width:600px){.workflowBar>p{display:none}.workflowBar .steps{width:100%;max-width:none;justify-content:space-between;gap:7px}.characterHero{height:465px}.heroCopy{left:23px;right:23px}.characterHero h1{font-size:clamp(25px,7.8vw,34px)}.characterHero .eyebrow{font-size:7px}.characterHero .introText{font-size:11px}.heroArtwork{top:5px}.workflowBar{padding:19px 2px}.workflowBar .stepNumber{font-size:20px}.characterHero .heroFanNote{font-size:8px}.heroAction{gap:24px}.characterArt:hover{transform:rotate(0deg)}.characterHero .introText br{display:block}}
@media(max-width:370px){.characterHero{height:430px}.heroCopy{left:20px;right:20px;bottom:20px}.characterHero .eyebrow{font-size:6px;gap:6px}.characterHero .line{width:13px}.characterHero .introText{font-size:10px}.heroFanNote{margin-left:9px}.heroAction{font-size:11px;padding:9px 14px;gap:20px}.heroArtwork{top:8px}.workflowBar .steps li{font-size:8px}.workflowBar .stepNumber{font-size:18px}}
/* Keep a separate lower band for the artwork caption, including rotated cards. */
@media(min-width:901px){.characterHero{min-height:clamp(390px,42vw,500px)}.heroArtwork{top:0}.artCaption{bottom:20px;z-index:4}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Direct transition from character hero to the upload/result workspace. */
.characterHero + .workspace{margin-top:28px}
@media(max-width:760px){.characterHero + .workspace{margin-top:20px}}

/* Champagne-trimmed hero action; scoped away from upload controls. */
.characterHero .heroAction{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;vertical-align:middle;gap:13px;min-height:56px;padding:7px 7px 7px 18px;border:1px solid #bca37a;border-radius:6px;background:linear-gradient(120deg,#363249,#222337 70%);color:#f2e4c8;box-shadow:inset 0 1px 0 #f4dfba1c,0 6px 18px #080c1b38;transition:border-color .2s,box-shadow .2s,transform .2s}
.heroAction:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 20%,#efd7a51a 45%,transparent 70%);transform:translateX(-120%);transition:transform .6s}
.characterHero .heroActionIcon{width:20px;height:20px;color:#c9b18d;stroke-width:1.4}
.characterHero .heroActionLabel{font-size:13px;font-weight:600;letter-spacing:.12em;white-space:nowrap}
.characterHero .heroActionArrow{display:grid;place-items:center;width:40px;height:40px;margin-left:15px;border:1px solid #e3cfa4;border-radius:3px;background:linear-gradient(135deg,#efdfbd,#bea379);color:#272435;box-shadow:inset 0 1px 0 #fff7}
.heroActionArrow svg{width:19px;height:19px;transition:transform .2s}
.characterHero .heroAction:focus-visible{outline:2px solid #f4dfb9;outline-offset:5px}
@media(hover:hover){.characterHero .heroAction:hover{background:linear-gradient(120deg,#42394f,#29283d 70%);border-color:#edd4a5;box-shadow:inset 0 1px 0 #f4dfba25,0 8px 24px #080c1b55;transform:translateY(-2px)}.heroAction:hover:before{transform:translateX(120%)}.heroAction:hover .heroActionArrow svg{transform:translateY(3px)}}
.characterHero .heroAction:active{transform:translateY(1px)}
@media(max-width:600px){.characterHero .heroAction{min-height:52px;padding-left:14px;gap:11px}.characterHero .heroActionArrow{width:36px;height:36px;margin-left:9px}.characterHero .heroActionLabel{font-size:12px}.characterHero .heroFanNote{display:block;margin:9px 0 0}}
@media(prefers-reduced-motion:reduce){.heroAction:before{display:none}}

/* Editorial wordmark: function first, game title as the signature. */
.siteHeader{background:linear-gradient(110deg,#1b2033,#171b2c);border-bottom:1px solid #c4aa7933}
.siteHeader .brand{gap:15px;min-width:0;min-height:48px}
.siteHeader .brandMark{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border:1px solid #c6aa7466;border-radius:9px;background:linear-gradient(145deg,#c8ad8012,#ffffff02);box-shadow:inset 0 1px 0 #eddbb41a}
.siteHeader .brandMark img{width:32px;height:32px}
.siteHeader .brandWordmark{display:flex;align-items:baseline;flex-direction:row;gap:17px}
.siteHeader .brandWordmark strong{font-family:var(--serif);font-size:22px;letter-spacing:.1em;font-weight:500;color:#f1eee6;white-space:nowrap}
.siteHeader .brandSub{display:flex;align-items:center;gap:15px;font-family:Georgia,"Times New Roman",serif;font-size:17px;letter-spacing:.045em;color:#cbb78f;white-space:nowrap}
.siteHeader .brandDivider{font-family:var(--sans);font-weight:300;font-size:18px;color:#877755}
.siteHeader .previewPill{font-size:9px;letter-spacing:.14em;color:#bdb6ca;border-color:#ffffff20;padding:7px 9px}
@media(max-width:1000px){.siteHeader .brandWordmark{flex-direction:column;align-items:flex-start;gap:5px}.siteHeader .brandWordmark strong{font-size:19px}.siteHeader .brandSub{font-size:13px;gap:9px}.siteHeader .brandDivider{font-size:13px}}
@media(max-width:600px){.siteHeader{height:78px}.siteHeader .headerInner{gap:10px}.siteHeader .brand{gap:10px}.siteHeader .brandMark{width:35px;height:35px;flex-basis:35px;border-radius:7px}.siteHeader .brandMark img{width:27px;height:27px}.siteHeader .brandWordmark strong{font-size:17px;letter-spacing:.06em}.siteHeader .brandSub{font-size:12px;letter-spacing:.04em}.siteHeader .previewPill{font-size:7px;padding:6px;letter-spacing:.08em;gap:4px}.siteHeader .headerRight{flex-shrink:0}}
@media(max-width:350px){.siteHeader .headerInner{padding-left:16px;padding-right:16px}.siteHeader .brand{gap:8px}.siteHeader .brandWordmark strong{font-size:15px}.siteHeader .brandMark{width:31px;height:31px;flex-basis:31px}.siteHeader .brandSub{font-size:11px}}

/* Two-line hero copy on desktop; compact single line on phones. */
.characterHero h1{font-size:44px;letter-spacing:.015em}
.characterHero h1 span{display:block}
@media(max-width:900px){.characterHero h1{font-size:clamp(22px,6.5vw,34px)}}

@media(max-width:600px){.characterHero h1{font-size:clamp(18px,5.8vw,26px);letter-spacing:0;white-space:nowrap}.characterHero h1 span{display:inline}}

/* Bring desktop artwork closer to the shorter headline. */
@media(min-width:901px){.heroCopy{width:34%;min-width:275px;max-width:350px}.heroArtwork{right:24px}}
@media(min-width:1101px){.heroCopy{min-width:325px}.characterHero h1{font-size:52px}.heroArtwork{right:40px}}
@media(min-width:1240px){.heroArtwork{right:80px}}

/* Production result states */
.teamName{overflow-wrap:anywhere}.noResults{padding:16px;color:var(--muted)}#extractError{margin:24px}.uploadBody[inert]{opacity:.7}

/* Lightweight simultaneous three-image artwork crossfade, test page only. */
.characterArt .artIncoming{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;pointer-events:none}
.characterArt .artIncomingVisible{opacity:1}
.artCorner{z-index:2}

/* Result PNG export: no changes to extraction or slideshow styling. */
.resultImageActions{display:flex;justify-content:flex-end;margin-bottom:18px}.resultImageActions .copyButton{min-height:42px;font-size:12px;padding:10px 14px}
.resultImageDialog{position:fixed;inset:0;margin:auto;width:min(92vw,650px);max-height:90dvh;padding:20px;background:#191d30;color:#eee9f2;border:1px solid #555366;border-radius:10px;overflow:auto;box-sizing:border-box}
.resultImageDialog::backdrop{background:#080b16cc}.resultImageDialog[open]{display:block}
.exportHeading{display:flex;align-items:center;justify-content:space-between;gap:16px}.exportHeading h2{font-size:18px;font-weight:500}.exportHeading button{position:static;width:44px;height:44px;font-size:26px;color:#eee9f2;background:#353445;border-radius:4px}
.exportPreview img{display:block;width:100%;height:auto;margin:16px 0;border:1px solid #38394e}.exportPreview img[hidden]{display:none}
.exportActions,.exportPages{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px}.exportActions .copyButton{min-height:44px;font-size:13px;text-decoration:none;justify-content:center;padding:10px 14px}.exportPages{justify-content:center}.exportPages button{background:#353445;color:#eee9f2;border:1px solid #5c5363;border-radius:4px;padding:10px 16px;min-height:44px}.exportPages button:disabled{opacity:.4}.exportPages span{font-size:13px}
.exportHint,#resultImageStatus{font-size:12px;line-height:1.7;color:#c5bdd1;margin-top:12px}.exportPages[hidden],.exportActions [hidden]{display:none}