:root{--ink:#1d1d1a;--paper:#f2efe8;--lime:#d8ff31;--coral:#ff6950;--line:#b9b7af}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif}button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.topbar{height:74px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 5vw;border-bottom:1px solid var(--line);font-size:11px;font-weight:800;letter-spacing:.1em}.brand{justify-self:start;border:0;background:none;font-size:15px;font-weight:900}.brand span{background:var(--ink);color:#fff;padding:5px 7px;margin-left:4px}.topbar nav{display:flex;gap:30px}.topbar>span{justify-self:end;color:#777}.stage{display:none}.stage.active{display:block}.hero{min-height:600px;display:grid;grid-template-columns:1.05fr .95fr;padding:7vw 7vw 5vw;overflow:hidden;border-bottom:1px solid var(--line)}.eyebrow{font-size:10px;font-weight:900;letter-spacing:.18em;border-left:34px solid var(--coral);padding-left:10px}h1{font-size:clamp(48px,6.2vw,92px);line-height:.98;letter-spacing:-.07em;margin:48px 0 30px}h1 em{font-style:normal;position:relative;z-index:1}h1 em:after{content:'';position:absolute;left:-4px;right:-8px;bottom:5px;height:20px;background:var(--lime);z-index:-1;transform:rotate(-1deg)}.lead{max-width:580px;font-size:15px;line-height:2}.fan{position:relative;min-height:460px;margin-left:4vw}.fan-card{position:absolute;width:270px;height:360px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 22px 40px #0002;border:1px solid #222}.fan-card small{font-size:9px;letter-spacing:.15em}.fan-card b{font-size:48px;line-height:.85;letter-spacing:-.07em}.f1{background:var(--coral);transform:rotate(-11deg);top:72px}.f2{background:var(--lime);transform:rotate(7deg);top:16px;left:125px}.f3{background:#242321;color:white;transform:rotate(17deg);top:95px;left:235px}.dark,.workspace,.results{background:#20201e;color:#fff;padding:80px 7vw}.section-head{display:grid;grid-template-columns:120px 1fr 1fr;align-items:end;border-bottom:1px solid #555;padding-bottom:28px}.section-head span{color:var(--lime);font-size:10px}.section-head h2{font-size:32px;margin:0}.section-head p{text-align:right;color:#999;font-size:12px}.url-form{padding:48px 0 12px}.url-form label{display:block;color:#999;font-size:9px;letter-spacing:.15em;margin-bottom:12px}.url-form>div{display:flex;max-width:940px}.url-form input{flex:1;min-width:0;padding:19px;background:#2d2d29;border:1px solid #666;color:#fff}.url-form button,.accent{border:0;background:var(--lime);color:#171714!important;padding:0 28px;font-weight:900}.url-form p{font-size:10px;color:#888}.url-form p.error{color:#ff907a}.text-button{background:none;border:0;border-bottom:1px solid currentColor;color:inherit;padding:8px 0;font-size:11px}.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #555;margin-top:55px}.steps>div{display:grid;gap:7px;border-right:1px solid #555;padding:28px 25px 8px 0;margin-right:24px}.steps span{color:var(--coral);font-size:10px}.steps small{color:#777;font-size:9px;letter-spacing:.12em}.workspace{min-height:calc(100vh - 74px)}.workspace-head{display:grid;grid-template-columns:1fr 1.1fr .8fr;align-items:end;border-bottom:1px solid #555;padding-bottom:35px}.workspace-head h2{font-size:clamp(42px,5vw,72px);line-height:1;letter-spacing:-.06em;margin:0}.meter{justify-self:end;width:250px}.meter:before{content:'';display:block;height:5px;background:#555}.meter i{display:block;height:5px;background:var(--lime);margin-top:-5px;width:0;transition:.25s}.meter b{display:block;text-align:right;font-size:11px;margin-top:11px}.character-chip{display:flex;align-items:center;gap:14px;margin:28px 0}.character-chip img,.avatar-fallback{width:55px;height:55px;object-fit:cover;background:var(--coral);display:grid;place-items:center;font-size:22px}.character-chip div{display:grid;gap:4px}.character-chip small{color:#999}.questions{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #555}.question{display:grid;grid-template-columns:45px 1fr;gap:8px;padding:25px 4vw 25px 0;border-bottom:1px solid #555}.question:nth-child(even){padding-left:4vw;border-left:1px solid #555}.question>span{grid-row:1/3;color:var(--coral);font-size:10px}.question b{font-size:14px}.question input{grid-column:2;border:0;border-bottom:1px solid #777;background:none;color:#fff;padding:10px 0;outline:none}.question input:focus{border-color:var(--lime)}.wizard{display:flex;align-items:center;justify-content:space-between;padding-top:38px}.wizard button{border:1px solid #777;background:none;color:#fff;padding:14px 22px;font-weight:800}.wizard button:disabled{opacity:.3}.wizard i{display:inline-block;width:28px;height:3px;background:#555;margin:4px}.wizard i.active{background:var(--coral)}.design .workspace-head{grid-template-columns:1fr 2fr}.design-grid{display:grid;grid-template-columns:1fr 1fr;gap:6vw;margin:50px 0}.photo-editor{display:grid;gap:18px}.photo-preview{height:460px;background:#333 center/cover no-repeat;display:grid;place-items:center;border:1px solid #666;overflow:hidden}.photo-preview span{font-size:9px;letter-spacing:.14em;color:#888}.photo-editor label{display:grid;grid-template-columns:95px 1fr;align-items:center;font-size:11px}.upload-button{display:block!important;background:var(--lime);color:#171714;text-align:center;padding:16px;font-weight:900}.upload-button input{display:none}.photo-editor small{color:#999;line-height:1.7}.palettes{display:grid;gap:12px;margin-top:18px}.palette{background:#2b2b28;color:#fff;border:1px solid #555;padding:18px;text-align:left;display:grid;grid-template-columns:1fr auto;align-items:center}.palette.selected{border:3px solid var(--lime)}.swatches{display:flex;height:70px;margin-bottom:12px}.swatches i{flex:1}.palette small{color:#888}.job-summary{margin-top:35px;border-top:1px solid #555;padding-top:22px}.job-summary h3{font-size:11px;letter-spacing:.14em}.job-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.job-grid span{display:flex;justify-content:space-between;background:#292925;padding:7px 9px;font-size:9px}.job-grid b{color:var(--lime)}.results{min-height:100vh;padding:70px 3vw}.result-title{display:flex;align-items:end;justify-content:space-between;margin:0 3vw 50px}.result-title h2{font-size:52px;margin:10px 0 0}.result-title button{padding:20px 28px}.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.result-card{aspect-ratio:4/5;padding:22px;color:#171714;position:relative;overflow:hidden;display:flex;flex-direction:column}.result-card>small{font-size:8px;font-weight:900;letter-spacing:.13em}.result-card h3{font-size:clamp(26px,2.7vw,44px);line-height:.9;letter-spacing:-.06em;margin:25px 0 15px;text-transform:uppercase}.result-photo{height:56%;margin:18px -22px 0;background:#777 center/cover no-repeat}.character-name{margin-top:14px!important}.character-meta{font-size:9px;border-top:1px solid #0005;padding-top:8px;line-height:1.6}.mini-jobs{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:7px}.mini-jobs span{display:flex;justify-content:space-between;font-size:6px;background:#0000000c;padding:3px}.qa{border-top:1px solid #0004;padding:7px 0 5px}.qa small{display:block;font-size:6px;line-height:1.25;opacity:.65}.qa b{font-size:9px;line-height:1.25;display:block;margin-top:2px}.result-card>button{position:absolute;right:12px;bottom:12px;background:transparent;border:1px solid currentColor;font-size:8px;padding:7px}.center{display:block;margin:40px auto 0}footer{display:flex;justify-content:space-between;padding:24px 5vw;font-size:8px;font-weight:800;letter-spacing:.1em}
@media(max-width:900px){.topbar{grid-template-columns:1fr auto}.topbar nav,.topbar>span{display:none}.hero{grid-template-columns:1fr;padding-top:70px}.fan{transform:scale(.68);transform-origin:left top;min-height:330px}.f3{left:205px}.section-head,.workspace-head{grid-template-columns:1fr;gap:13px}.section-head p{text-align:left}.dark,.workspace{padding:60px 6vw}.steps,.questions,.design-grid,.gallery{grid-template-columns:1fr}.url-form>div{display:grid}.url-form button{padding:17px}.meter{justify-self:start}.question:nth-child(even){padding-left:0;border-left:0}.result-title{align-items:start;gap:28px;flex-direction:column}.gallery{max-width:500px;margin:auto}.result-card{min-height:560px}.job-grid{grid-template-columns:repeat(2,1fr)}footer{gap:12px;flex-direction:column}}

/* Lodestone job icons: battle, crafter, and gatherer */
.job-grid span{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:7px;padding:6px 8px}
.job-grid img{width:22px;height:22px;object-fit:contain}
.mini-jobs{grid-template-columns:repeat(6,1fr);gap:2px}
.mini-jobs span{align-items:center;justify-content:center;gap:2px;padding:2px}
.mini-jobs img{width:14px;height:14px;object-fit:contain}
.mini-jobs b{font-size:6px}
.wizard button.accent{background:var(--lime);color:#171714!important;border-color:var(--lime)}
.wizard button.accent:hover{filter:brightness(.94)}
.wizard button.accent:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.photo-editor{align-content:start;grid-auto-rows:max-content}
.upload-button{display:flex!important;align-items:center!important;justify-content:center!important;width:100%;min-height:58px;padding:0 28px!important;font-size:15px!important;line-height:1.2;font-weight:900;letter-spacing:.03em;border:2px solid var(--lime);box-shadow:0 5px 0 #a8c91d;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}
.upload-button:hover{filter:brightness(.96);transform:translateY(1px);box-shadow:0 4px 0 #a8c91d}
.upload-button:active{transform:translateY(4px);box-shadow:0 1px 0 #a8c91d}
.upload-button:focus-within{outline:3px solid var(--coral);outline-offset:3px}
.result-actions{display:flex;align-items:center;gap:12px}
.result-actions button{min-height:58px;padding:0 24px;font-size:12px;font-weight:900;letter-spacing:.02em}
.result-actions .back-design{background:transparent;color:#fff;border:1px solid #777}
.result-actions .back-design:hover{border-color:#fff;background:#ffffff0d}
.result-actions .back-design:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
@media(max-width:900px){.result-actions{width:100%;flex-direction:column-reverse;align-items:stretch}.result-actions button{width:100%}}
.photo-preview{position:relative;height:auto;aspect-ratio:1080/650;background:#333;isolation:isolate}
.photo-preview>img,.result-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:center;will-change:transform}
.photo-preview>span{position:relative;z-index:1}
.photo-preview>canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.result-photo{position:relative;height:auto;aspect-ratio:1080/650;overflow:hidden;background:#777}
.square-enix-mark{position:absolute;right:10px;bottom:10px;z-index:2;padding:7px 10px 6px;background:#000b;color:#fff;font-family:Arial,sans-serif;font-size:8px;font-weight:900;line-height:1;letter-spacing:.14em;box-shadow:0 0 0 1px #ffffff40;pointer-events:none}
.gallery-loading{grid-column:1/-1;margin:80px 0;text-align:center;color:#aaa;font-size:12px;letter-spacing:.08em}
.result-card.canvas-preview{padding:0;background:transparent;display:block}
.card-preview{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.result-card.canvas-preview>button{z-index:2;top:12px;bottom:auto;background:#ffffffd9;color:#171714}
.font-section{margin-top:30px;padding-top:24px;border-top:1px solid #555}
.font-choices{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
.font-option{min-height:92px;padding:13px;background:#2b2b28;color:#fff;border:1px solid #555;text-align:left;display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px}
.font-option.selected{border:3px solid var(--lime)}
.font-option>span{grid-column:1/-1;font-size:25px;line-height:1.1}
.font-option>b{font-size:10px;letter-spacing:.08em}
.font-option>small{font-size:9px;color:#999}
@media(max-width:500px){.font-choices{grid-template-columns:1fr}}