/* Atmosphere stays behind all onboarding content. Four independent soft volumes. */
html{background:#faf8f4}body,body[data-screen],main.hero,main.setup,main.scan,main.reveal{background:transparent}body{isolation:isolate}#app{position:relative;z-index:1}.ambient{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1;background:linear-gradient(#fffdfa 0%,#fffdfa 36%,#f8eadc 55%,#dc773b 76%,#211c1a 100%);contain:strict}
.ambient:after{content:'';position:absolute;inset:0;background:linear-gradient(#fffdfa 4%,#fffdfaeb 24%,#fffdfa55 46%,transparent 67%)}
.flow{position:absolute;filter:blur(45px);will-change:transform;border-radius:48% 52% 65% 35% / 53% 40% 60% 47%;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
.flow-a{left:-30%;top:60%;width:115%;height:55%;background:radial-gradient(ellipse,#ff954b 8%,#ee6c26 46%,transparent 72%);animation:flow-a 19s ease-in-out infinite alternate}
.flow-b{left:18%;top:68%;width:110%;height:54%;background:radial-gradient(ellipse,#13171a 10%,#242122 46%,transparent 71%);animation:flow-b 23s -8s ease-in-out infinite alternate}
.flow-c{left:38%;top:75%;width:32%;height:66%;background:linear-gradient(90deg,transparent,#ff8a32 40%,#ffac60 55%,transparent);animation:flow-c 17s -5s ease-in-out infinite alternate}
.flow-d{left:-20%;top:87%;width:85%;height:40%;background:radial-gradient(ellipse,#15191c 15%,#242122 42%,transparent 70%);animation:flow-d 25s -12s ease-in-out infinite alternate}
.flow-grain{position:absolute;inset:0;background:url('assets/flow-grain.svg') repeat;opacity:.15;mix-blend-mode:soft-light;z-index:2}
@keyframes flow-a{0%{transform:translate(-4%,9%) rotate(-12deg) scale(1,.8);border-radius:35% 65% 50% 50%}50%{transform:translate(14%,-8%) rotate(10deg) scale(.88,1.25);border-radius:64% 36% 27% 73%}100%{transform:translate(-2%,-1%) rotate(-5deg) scale(1.2,.95);border-radius:45% 55% 70% 30%}}
@keyframes flow-b{0%{transform:translate(0,0) rotate(16deg) scale(1.1,.85)}55%{transform:translate(-29%,12%) rotate(-20deg) scale(.85,1.25)}100%{transform:translate(4%,26%) rotate(8deg) scale(1.2,1.1)}}
@keyframes flow-c{0%{transform:translate(-10%,9%) rotate(43deg) scale(.85,1)}50%{transform:translate(42%,-18%) rotate(-26deg) scale(1.3,.85)}100%{transform:translate(-32%,-5%) rotate(18deg) scale(.7,1.2)}}
@keyframes flow-d{0%{transform:translate(0,0) scale(1,1)}100%{transform:translate(23%,-14%) rotate(22deg) scale(1.25,.76)}}
main.hero .card-wall{grid-template-columns:repeat(2,minmax(0,1fr));width:min(94vw,120svh);gap:clamp(14px,3vw,36px)}.wall-column:last-child{display:none!important}
main.hero .gray-card{background:#f7d4b3;opacity:.40;border:1px solid #e9ae7d55;box-shadow:inset 0 0 0 1px #ffffff80}.gray-card img{filter:sepia(1) saturate(1.4) hue-rotate(337deg);mix-blend-mode:multiply;opacity:.78}
main.hero .orange-entry{box-shadow:inset 0 0 0 1px #ffedd6d9,0 0 17px #ffb06455,0 8px 22px #a7452220;border:1px solid #fff3d3bb}
.hero-entry-label,.hero-resume,.back-actions .primary,.studio-buttons button,.studio-cancel,.generation-retry,.export-actions button,.signature-actions button{backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);background:linear-gradient(135deg,#fff8ed52,#ffb57927);border:1px solid #fff8ecd9;box-shadow:inset 0 1px 0 #fff9,0 5px 20px #3e231b24;color:#fffaf4;border-radius:10px}
.hero-entry-label{background:#a7472052}.hero-resume{bottom:calc(20px + env(safe-area-inset-bottom));right:20px;background:#77422377}.hero-editorial .hero-footnote{color:#fff9f1;text-shadow:0 1px 5px #29160b;max-width:48%;white-space:normal;padding-bottom:env(safe-area-inset-bottom)}
main.hero:before,main.hero:after{display:none}.hero-editorial{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
main.setup{padding:clamp(45px,10svh,110px) 18px calc(32px + env(safe-area-inset-bottom))}.card-pair{width:min(740px,100%)}.card-pair>.reference-back{background:linear-gradient(135deg,#f9994dde,#e96c29a6 65%,#eaaa7266);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid #ffe6c2a8;box-shadow:inset 0 1px 0 #fff7,0 12px 32px #54261630}.reference-back .back-fields,.reference-back .back-actions{color:#fffefa;text-shadow:0 1px 2px #853b1c50}.reference-back input,.reference-back .choice-trigger{color:#fffefa}.pair-note{color:#fffaf4;text-shadow:0 1px 4px #34231d;font-size:12px}.back-actions .primary{color:#752e0c;background:linear-gradient(130deg,#fff9ead9,#ffdeba99)}
.card-studio{position:relative;isolation:isolate;padding-bottom:calc(38px + env(safe-area-inset-bottom))}.studio-controls{max-width:100%}.studio-status,.studio-hint,.studio-disclosure,.test-actions .text-button,.export-status{color:#fffaf4;text-shadow:0 1px 5px #24170fc9}.studio-buttons [data-sign]{background:#bf5420b3;border-color:#fff1d4b8}.studio-cancel{min-width:180px;padding:12px 24px;font-size:14px;margin-top:20px;background:#f3b28040}.test-actions .text-button{padding:12px}.card-studio #error:not(:empty){background:#fff4e8e8;border-radius:8px;padding:12px;position:relative;z-index:5;color:#9a310e}.export-actions button:hover:not(:disabled){background:#d4753e88;color:white}
.scan-avatar{position:absolute;z-index:-1;top:3svh;left:50%;width:min(490px,94vw);height:62svh;max-height:650px;transform:translateX(-50%);pointer-events:none;perspective:1000px;overflow:hidden;mask-image:linear-gradient(#000 76%,transparent)}.scan-avatar img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 14px #ffefdb);animation:avatar-turn 19s ease-in-out infinite alternate}.avatar-ring{position:absolute;left:10%;top:42%;width:80%;height:18%;border:1px solid #fa8d45a3;border-radius:50%;transform:rotate(-9deg);animation:avatar-ring 17s ease-in-out infinite alternate}.avatar-light{position:absolute;inset:0;background:linear-gradient(transparent 44%,#fff6e03d 49%,#ffa65266 50%,transparent 56%);animation:avatar-sweep 21s ease-in-out infinite alternate;mix-blend-mode:screen}
@keyframes avatar-turn{from{transform:rotateY(-12deg) rotateZ(-1deg);opacity:.62}to{transform:rotateY(13deg) rotateZ(1deg);opacity:.9}}@keyframes avatar-ring{to{transform:rotate(8deg) translateY(28px);opacity:.45}}@keyframes avatar-sweep{from{transform:translateY(-30%);opacity:.3}to{transform:translateY(32%);opacity:.8}}
.is-scanning.card-studio{justify-content:flex-start;padding-top:41svh;min-height:100svh}.is-scanning .studio-stage{margin:0 0 42px;width:min(590px,90vw)}.is-scanning .solid-card,.awaiting-generation .solid-card{animation:card-float 21s ease-in-out infinite alternate}.is-scanning .scan-orbit{display:none}.is-scanning .scan-light{animation:gentle-scan 19s ease-in-out infinite;height:4%;background:linear-gradient(transparent,#fff5d8b3,transparent);filter:drop-shadow(0 0 6px #ff9032)}
@keyframes card-float{from{transform:rotateX(3deg) rotateY(-6deg) rotateZ(-3deg)}to{transform:rotateX(-2deg) rotateY(6deg) rotateZ(3deg)}}@keyframes gentle-scan{0%,100%{top:0;opacity:0}30%{opacity:.6}80%{top:100%;opacity:.6}90%{opacity:0}}
.scan-progress{width:min(260px,70vw);height:7px;border-radius:20px;background:#fff4e66b;display:flex;gap:4px}.scan-progress:after{content:'';display:block;width:50%;border-radius:20px;background:#fff4e630}.scan-progress span,.awaiting-generation .scan-progress span{animation:none;transform:none;width:50%;border-radius:20px;background:#ff8a3b}.card-studio[data-generation-stage="generating"] .scan-progress:after{background:#ff8a3b}.generation-failed .scan-avatar{opacity:.35}.generation-failed .scan-avatar *{animation-play-state:paused}
@media(max-width:650px){.flow{filter:blur(30px)}.hero-editorial{padding-top:70px}.hero-resume{font-size:12px;padding:12px;max-width:49%;right:14px}.hero-editorial .hero-footnote{font-size:12px}.card-pair>.reference-back{min-height:290px}.reference-back .back-fields{top:29%;height:46%}.reference-back .back-fields label,.reference-back .choice-label{font-size:11px}.reference-back .choice-trigger,.reference-back input[name=name]{font-size:14px}.reference-back .back-actions{bottom:6%}.pair-note{font-size:11px}.is-scanning .studio-stage{margin-bottom:34px}.is-scanning .studio-status{font-size:18px}.studio-controls{width:100%}.scan-avatar{top:4svh;height:56svh}.card-studio.is-ready{justify-content:flex-start;padding-top:35svh}.studio-buttons{justify-content:center}}
html.page-hidden *,html.page-hidden *:before,html.page-hidden *:after{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.flow,.scan-avatar img,.avatar-ring,.avatar-light,.is-scanning .solid-card,.awaiting-generation .solid-card,.is-scanning .scan-light{animation:none!important}.avatar-light,.is-scanning .scan-light{display:none}.flow{will-change:auto}.scan-avatar img{opacity:.8}.is-scanning .solid-face{animation:none}.hero-editorial p>span{opacity:1;transform:none}}

/* Final contrast and touch-target pass. */
.flow-a{top:67%;height:48%}.flow-c{top:72%}
main.hero .card-wall{mask-image:linear-gradient(#000 0%,#000 72%,#0009 88%,transparent 100%)}
.hero-editorial .hero-footnote{color:#fffaf4;text-shadow:0 1px 5px #120c09}
.scan-avatar img{filter:drop-shadow(0 0 10px #fff2df) contrast(1.12)}
.card-studio[data-generation-stage="generating"] .scan-progress:after{background:#ffb57799}
@media(max-width:650px){.back-actions .primary{font-size:13px;min-height:42px;padding:8px 12px;gap:8px}.back-actions .primary .star{width:18px;height:18px}.back-actions .text-button{font-size:13px;min-height:42px;padding:8px 0}.hero-editorial .hero-start{font-size:13px;max-width:48%}}

/* User reference: show the portrait band, feather the body into the light. */
.scan-avatar{top:7svh;width:min(680px,105vw);height:46svh;max-height:480px;mix-blend-mode:multiply;mask-image:linear-gradient(transparent,#000 9%,#000 62%,transparent 96%)}
.scan-avatar img{position:absolute;left:0;top:-42%;width:100%;height:auto;max-width:none;object-fit:initial;filter:contrast(1.1) saturate(.85);animation:reference-breathe 18s ease-in-out infinite alternate}
@keyframes reference-breathe{from{transform:translateY(0) rotateY(-4deg) scale(1.01)}to{transform:translateY(-7px) rotateY(4deg) scale(1.035)}}
.avatar-ring{top:47%;opacity:.4}.avatar-light{opacity:.3}
.flow{filter:blur(34px)}.flow-a{animation-duration:15s;top:62%;height:56%}.flow-b{animation-duration:19s}.flow-c{animation-duration:16s;width:44%;background:linear-gradient(90deg,transparent,#ff8a32 37%,#ffc283 54%,transparent)}.flow-d{animation-duration:21s}
.flow-grain{opacity:.34;mix-blend-mode:soft-light}.ambient-dust{position:absolute;inset:0;width:100%;height:100%;z-index:3;opacity:.55;pointer-events:none}
@keyframes flow-a{0%{transform:translate(-16%,12%) rotate(-19deg) scale(1.1,.72);border-radius:35% 65% 50% 50%}50%{transform:translate(20%,-13%) rotate(18deg) scale(.8,1.32);border-radius:64% 36% 27% 73%}100%{transform:translate(-9%,3%) rotate(-12deg) scale(1.3,.9);border-radius:45% 55% 70% 30%}}
@media(max-width:650px){.flow{filter:blur(25px)}.scan-avatar{top:9svh;height:44svh;width:108vw}}
@media(prefers-reduced-motion:reduce){.scan-avatar img{animation:none!important;opacity:1}.ambient-dust{display:none}}

/* Fit the onboarding pages to the viewport instead of hiding overflowing controls. */
html,body{height:100%;overflow:hidden}#app.hero,#app.setup,#app.scan,#app.reveal{height:100dvh;min-height:0;overflow:clip;box-sizing:border-box}
main.setup{display:flex;align-items:center;justify-content:center;padding:24px 18px calc(24px + env(safe-area-inset-bottom))}
.card-pair{flex:none;width:min(740px,calc((100dvh - 64px)*.8),100%);margin:0}.card-pair>.reference-back{min-height:0}.card-pair>.error:empty{display:none}
main.scan,main.reveal{display:flex;align-items:center;justify-content:center}
.card-studio,.card-studio.is-ready,.is-scanning.card-studio{min-height:0;width:100%;height:100%;padding:24px 18px calc(20px + env(safe-area-inset-bottom));justify-content:center;gap:18px}
.card-studio .studio-stage{flex:none;width:min(700px,90vw,calc((100dvh - 330px)*1.45));margin:0}
.is-scanning.card-studio{padding-top:32svh;justify-content:flex-start;gap:20px}.is-scanning .studio-stage{width:min(590px,90vw,calc((66dvh - 210px)*1.6));margin:0}
.studio-controls{flex:none}.studio-status{margin-bottom:14px}.studio-hint{margin-top:12px}.export-actions{margin-top:14px}.test-actions{margin-top:8px}.studio-cancel{margin-top:12px}
body[data-screen="scan"] .ambient:before{content:'';position:absolute;left:-20%;top:-13%;width:135%;height:47%;z-index:1;background:radial-gradient(ellipse at 60% 40%,#f9bb818c,transparent 65%);filter:blur(32px);animation:top-haze 18s ease-in-out infinite alternate}
body[data-screen="scan"] .ambient:after{background:linear-gradient(#fffdfa55 0%,#fffdfa88 25%,#fffdfa33 48%,transparent 67%)}
@keyframes top-haze{from{transform:translate(-9%,-4%) scale(1,.8)}to{transform:translate(12%,9%) scale(.9,1.2)}}
@media(max-width:650px){.card-pair{width:min(100%,calc((100dvh - 54px)*1.05))}.card-pair>.reference-back{min-height:280px}.card-studio .studio-stage{width:min(94vw,calc((100dvh - 345px)*1.45))}.is-scanning .studio-stage{width:min(92vw,calc((66dvh - 195px)*1.6))}.scan-avatar{top:4svh}.studio-status{font-size:16px}.studio-hint{font-size:11px}.test-actions{gap:14px}}
@media(max-height:620px){main.setup{padding:12px}.card-pair{width:min(100%,calc((100dvh - 40px)*.79))}.card-pair>.reference-back{min-height:220px}.back-actions .primary,.back-actions .text-button{min-height:32px;font-size:11px}.reference-back .back-fields{top:24%;height:46%}.reference-back .choice-trigger,.reference-back input[name=name]{font-size:12px}.card-studio{gap:10px!important;padding:12px!important}.is-scanning.card-studio{padding-top:22svh!important}.studio-status{margin-bottom:8px}.studio-hint,.studio-disclosure{margin-top:6px}.test-actions .text-button{padding:6px}.studio-buttons button{padding:9px 16px}.export-actions button{padding:8px 10px}.scan-avatar{top:0;height:40svh}.is-scanning .studio-stage{width:min(80vw,calc((73dvh - 160px)*1.5))}}
@media(prefers-reduced-motion:reduce){body[data-screen="scan"] .ambient:before{animation:none}}
@media(max-height:500px) and (min-width:650px){main.setup .card-pair{width:min(1100px,100%);display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center}.card-pair>.reference-back{margin-top:0;min-height:0}.card-pair>.error{grid-column:1/-1}.is-scanning.card-studio{padding-top:12px!important;flex-direction:row;gap:30px!important}.is-scanning .studio-stage{width:min(48vw,calc((100dvh - 80px)*1.55))}.is-scanning .studio-controls{width:40%;}.scan-avatar{left:25%;top:0;height:80svh;width:50vw}.card-studio.is-ready{flex-direction:row}.is-ready .studio-stage{width:48vw}.is-ready .studio-controls{width:43%}.studio-hint{max-width:none}}

/* More visible fivefold dust field; content remains on the layer above. */
.ambient-dust{opacity:.92}

/* Restore the physical card's full front/back showcase while generating. */
.is-scanning.awaiting-generation .solid-card{animation:scan-card-showcase 12s linear infinite}
@keyframes scan-card-showcase{
 0%{transform:rotateX(6deg) rotateY(0deg) rotateZ(-2deg)}
 12%{transform:rotateX(6deg) rotateY(0deg) rotateZ(-2deg)}
 38%{transform:rotateX(-4deg) rotateY(180deg) rotateZ(2deg)}
 56%{transform:rotateX(-4deg) rotateY(180deg) rotateZ(2deg)}
 88%{transform:rotateX(6deg) rotateY(360deg) rotateZ(-2deg)}
 100%{transform:rotateX(6deg) rotateY(360deg) rotateZ(-2deg)}
}
@media(prefers-reduced-motion:reduce){.is-scanning.awaiting-generation .solid-card{animation:none}}

/* Scan light lives inside each face, inheriting the very same 3D projection. */
.is-scanning.awaiting-generation .solid-card{animation-duration:7.5s}
.is-scanning .solid-face .scan-light{position:absolute;inset:0 0 auto;height:2px;z-index:12;pointer-events:none;background:#fff9e5;box-shadow:0 0 4px 1px #fff8dc,0 0 12px 3px #ff9b4a99;filter:none;animation:surface-scan 4.5s ease-in-out infinite}
@keyframes surface-scan{0%{top:0;opacity:0}12%{opacity:.95}88%{opacity:.95}100%{top:100%;opacity:0}}
.is-ready .solid-card{transition:transform .42s cubic-bezier(.2,.75,.25,1)}.is-dragging .solid-card{transition:none}
@media(prefers-reduced-motion:reduce){.is-scanning.awaiting-generation .solid-card{animation:none}.is-scanning .solid-face .scan-light{display:none;animation:none}.is-ready .solid-card{transition:none}}

/* Keep both setup cards at the same physical ratio, including small screens. */
main.setup .card-pair>.reference-back{min-height:0;height:auto;aspect-ratio:1.69;box-sizing:border-box}
@media(max-width:650px){
 main.setup .reference-back .back-fields{top:23%;height:49%;gap:0 5cqw}
 main.setup .reference-back .back-fields label,main.setup .reference-back .choice-label{font-size:clamp(9px,2.8cqw,11px)}
 main.setup .reference-back .choice-trigger,main.setup .reference-back input[name=name]{font-size:clamp(11px,3.5cqw,14px);min-height:0;padding:2px 0}
 main.setup .back-actions{bottom:5%}
 main.setup .back-actions button{min-height:30px;font-size:clamp(10px,3cqw,12px);padding:6px 10px}
}

/* Keyboard-aware mobile field editing. */
[hidden]{display:none!important}
.name-editor-trigger{background:none;border:0;border-bottom:1px solid #ffffff60;color:#fff;text-align:left;width:100%;font:inherit;cursor:pointer}
.field-editor{position:fixed;inset:0;width:100%;max-width:none;max-height:none;margin:0;padding:16px;border:0;background:transparent;box-sizing:border-box;overflow:hidden;color:#713916}
.field-editor[open]{display:flex;align-items:flex-end;justify-content:center}.field-editor::backdrop{background:#30201866;backdrop-filter:blur(6px)}
.field-editor>section{width:min(100%,520px);max-height:100%;overflow:auto;overscroll-behavior:contain;background:#fff8f0;border:1px solid #ffe5cf;border-radius:22px;padding:20px 20px calc(20px + env(safe-area-inset-bottom));box-sizing:border-box;box-shadow:0 12px 50px #42221030}
.field-editor header{display:flex;align-items:center;justify-content:space-between;gap:16px}.field-editor h2{font-size:22px;margin:0}.field-editor header button{background:none;border:0;font-size:28px;color:inherit;min-width:44px;min-height:44px}
.editor-body{padding-top:16px}.field-editor label{display:block;font-size:14px;margin-bottom:8px}.field-editor input{box-sizing:border-box;width:100%;min-height:52px;font:400 18px Outfit,Arial,sans-serif;padding:12px;border:1px solid #dcae8d;border-radius:10px;background:white;color:#39271e}
.editor-done,.field-options button{width:100%;min-height:48px;padding:12px 16px;border:1px solid #e9c7ac;border-radius:10px;font:400 16px Outfit,Arial,sans-serif;cursor:pointer}.editor-done{margin-top:18px;background:#e96e30;color:#fff}.field-options{display:grid;gap:8px}.field-options button{background:#fff;color:#743811;text-align:left}.field-options button[aria-selected=true]{background:#ffe2c5;border-color:#e96e30}
.signature-dialog{box-sizing:border-box;padding:max(24px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(28px,env(safe-area-inset-left));overscroll-behavior:none;touch-action:none;overflow:auto}.signature-sheet{max-height:100%}.signature-sheet canvas{box-sizing:border-box;border:1px dashed #cc9b7a;border-radius:12px;background:#fff9ed80;user-select:none;-webkit-user-select:none}.signature-dialog .signature-close{top:max(16px,env(safe-area-inset-top));min-width:44px;min-height:44px}
@media(max-width:650px),(pointer:coarse){main.setup .choice-field{position:relative}main.setup .choice-trigger:after{content:'';position:absolute;inset:0}main.setup .name-editor-trigger{font-size:14px;min-height:30px;padding:3px 0}main.hero .hero-editorial{padding-top:calc(64px + env(safe-area-inset-top))}}
@media(max-height:500px){.signature-sheet canvas{height:130px;margin-top:8px}.signature-sheet h2{font-size:22px}.signature-actions button{min-height:40px;padding:8px 14px}}

/* Editorial glass editing panels: restrained corners and white/orange light. */
.field-editor{isolation:isolate}
.field-editor::backdrop{background:linear-gradient(180deg,#30251b26,#67422533);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.field-editor::before,.field-editor::after{content:'';position:absolute;pointer-events:none;z-index:-1;filter:blur(36px);border-radius:45%;animation:editor-light-a 17s ease-in-out infinite alternate}
.field-editor::before{width:110%;height:55%;left:-25%;bottom:-17%;background:radial-gradient(ellipse,#ff9d5bc9 0%,#ffd6ab99 40%,transparent 72%)}
.field-editor::after{width:100%;height:48%;right:-28%;bottom:-8%;background:radial-gradient(ellipse,#fffdf6e6 0%,#ffe7cf88 45%,transparent 73%);animation:editor-light-b 21s ease-in-out infinite alternate}
.field-editor>section{position:relative;border-radius:8px;background:linear-gradient(155deg,#fffaf1d9 5%,#fff8eed1 45%,#ffe0c6a6 100%);border:1px solid #fff6e6b8;backdrop-filter:blur(24px) saturate(115%);-webkit-backdrop-filter:blur(24px) saturate(115%);box-shadow:inset 0 1px 0 #fff9,0 16px 46px #5f371d26}
.field-editor header{height:auto;min-height:44px;padding:0 0 14px;margin:0;border-bottom:1px solid #ad744833;gap:12px}
.field-editor h2{margin:0;text-transform:uppercase;text-align:left;font:600 18px Outfit,Arial,sans-serif;letter-spacing:.065em;line-height:1.25}
.field-editor header button{margin-right:-10px;font-weight:400;font-size:26px;border-radius:5px}
.field-editor label{text-transform:uppercase;font-size:11px;letter-spacing:.08em;font-weight:500}
.field-editor input,.editor-done,.field-options button{border-radius:5px;border-color:#d79a7066;box-shadow:inset 0 1px 0 #fff9}
.field-editor input{background:#ffffff80}
.field-options button{text-align:center;background:linear-gradient(140deg,#ffffff9e,#fff5e966);color:#653918;transition:background .18s,border-color .18s}
.field-options button:hover,.field-options button[aria-selected=true]{background:#ffcfaa99;border-color:#cb773dcc}
.editor-done{background:linear-gradient(135deg,#e97838e6,#e68445bf);border-color:#fff0d999;color:#fffaf4}
.field-editor input:focus-visible,.field-editor button:focus-visible{outline:2px solid #c9662e;outline-offset:2px}
.signature-sheet canvas,.signature-actions button,.photo-overlay-actions,.camera-dialog{border-radius:6px}
.signature-sheet h2{text-transform:uppercase;letter-spacing:.06em;text-align:left;font-size:20px}
@keyframes editor-light-a{0%{transform:translate(-5%,8%) scale(1,.85)}55%{transform:translate(22%,-15%) scale(.85,1.2)}100%{transform:translate(5%,-2%) scale(1.15,.95)}}
@keyframes editor-light-b{from{transform:translate(8%,7%) scale(.85,1.1)}to{transform:translate(-23%,-12%) scale(1.25,.85)}}
.page-hidden .field-editor::before,.page-hidden .field-editor::after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.field-editor::before,.field-editor::after{animation:none}}

/* Light must live inside the translucent sheet, beneath the controls. */
.field-editor>section{isolation:isolate;background:linear-gradient(160deg,#fffdf38c,#fff8eb59 55%,#ffe7d43d);border-color:#fffdf2d9;backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 #ffffff80,0 18px 50px #57351b2b}
.editor-glow{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:-1;background:linear-gradient(#fff8ef66,transparent 40%)}
.editor-glow i{position:absolute;display:block;width:115%;height:95%;bottom:-45%;left:-45%;border-radius:44% 56% 60% 40%;filter:blur(22px);background:radial-gradient(ellipse,#ff883bd9 0%,#ffa866b3 32%,#ffc58b66 53%,transparent 73%);animation:sheet-orange 12s ease-in-out infinite alternate}
.editor-glow i+i{left:auto;right:-45%;bottom:-36%;height:90%;background:radial-gradient(ellipse,#fffefaff 5%,#fff9eddd 35%,#fff1dc66 60%,transparent 76%);animation:sheet-white 14s ease-in-out infinite alternate}
.field-options button{background:linear-gradient(120deg,#ffffff80,#fff9ef40);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border-color:#fffaf4bf;color:#603010;text-transform:none}
.field-options button:hover,.field-options button[aria-selected=true]{background:#ffd3ae99;border-color:#c86b32}
.choice-value{text-transform:capitalize}
@keyframes sheet-orange{0%{transform:translate(-8%,12%) rotate(-15deg) scale(.95,.8)}50%{transform:translate(40%,-12%) rotate(15deg) scale(1.25,1.05)}100%{transform:translate(67%,3%) rotate(-8deg) scale(.85,1.3)}}
@keyframes sheet-white{0%{transform:translate(12%,-8%) scale(1.1,.9)}55%{transform:translate(-32%,12%) rotate(-18deg) scale(.85,1.15)}100%{transform:translate(-65%,-18%) rotate(12deg) scale(1.15,.85)}}
.page-hidden .editor-glow i{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.editor-glow i{animation:none}}

/* Quiet orange/charcoal flow, matching the main atmosphere. */
.field-editor::after{background:radial-gradient(ellipse,#24232199 0%,#42372e66 42%,transparent 73%)}
.field-editor::before{background:radial-gradient(ellipse,#d9753699 0%,#dba06a66 40%,transparent 72%)}
.editor-glow i{background:radial-gradient(ellipse,#e58242b3 0%,#d7865299 32%,#c7956255 53%,transparent 73%);animation-duration:18s}
.editor-glow i+i{background:radial-gradient(ellipse,#232426c9 5%,#34312fb3 35%,#64534766 60%,transparent 76%);animation-duration:22s}
.field-editor>section{box-shadow:inset 0 1px 0 #ffffff80,inset 0 -1px 0 #ffffff40,0 18px 50px #33291f33;border-color:#fff6e699}
.field-options button{background:linear-gradient(120deg,#fff9efd9,#fff4e6bf);border-color:#fff5e080;box-shadow:inset 0 1px 0 #ffffff40}
.field-editor input{background:#fff9efcf}

/* Shared field geometry prevents the name and chosen values shifting rows. */
main.setup .back-fields>label,main.setup .back-fields>.choice-field{display:grid;grid-template-rows:auto minmax(0,1fr);align-content:stretch;min-width:0;min-height:0;position:relative}
main.setup .back-fields .choice-label{line-height:1.2;margin:0;padding:0}
main.setup .back-fields .choice-trigger,main.setup .back-fields .name-editor-trigger,main.setup .back-fields input[name=name]{display:flex;align-items:center;box-sizing:border-box;min-height:0;height:100%;width:100%;margin:0;padding:2px 0;font-family:inherit;font-weight:400;font-size:clamp(11px,3.5cqw,16px);line-height:1.2;letter-spacing:.005em;border-radius:0;border-bottom:1px solid #ffffff60;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
main.setup .back-fields .choice-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
main.setup .back-fields .name-editor-trigger:after{content:'';position:absolute;inset:0}
main.setup .back-fields .flower-mark,main.setup .back-fields .choice-chevron{flex-shrink:0}

/* R5: lighter mobile compositing, same composition and color direction. */
.hero-static-preview{width:100%;height:100%;object-fit:fill;pointer-events:none}
.scan-avatar{mix-blend-mode:normal;mask-image:linear-gradient(#000 0%,#000 65%,transparent 100%)}
.scan-avatar img{top:0;left:0;width:100%;height:100%;object-fit:contain;object-position:center top;filter:none;opacity:.78}
@media(max-width:650px),(pointer:coarse){
 .flow{filter:none!important}.flow-c,.flow-d{display:none}
 .flow-a{animation-name:mobile-flow-a}.flow-b{animation-name:mobile-flow-b}
 .flow-grain{mix-blend-mode:normal;opacity:.06}
 .gray-card img{filter:none;mix-blend-mode:normal;opacity:.66}
 .hero-entry-label{backdrop-filter:none;-webkit-backdrop-filter:none}
 .field-options button{backdrop-filter:none;-webkit-backdrop-filter:none}
 .scan-avatar img{animation:none}.avatar-light{display:none}
}
@keyframes mobile-flow-a{from{transform:translate(-9%,10%) scale(1.1,.85)}to{transform:translate(14%,-9%) scale(.9,1.18)}}
@keyframes mobile-flow-b{from{transform:translate(0,5%) scale(1.1,.9)}to{transform:translate(-20%,14%) scale(.95,1.15)}}

/* Only two columns are rendered; the second is the live entry column. */
main.hero .wall-column:last-child{display:block!important}

.scan-avatar{width:min(680px,96vw)}

/* R6: a few character cards, with the original airy gallery retained. */
main.hero .portrait-sample{opacity:.68;background:#f5dfc5}
.sample-portrait{position:absolute;left:6%;top:32%;width:29%;height:56%;border-radius:3px;background-image:url('assets/hero-portraits-r6.webp');background-size:200% 100%;background-repeat:no-repeat;box-shadow:0 0 0 1px #edd2b680}
.sample-left{background-position:left center}.sample-right{background-position:right center}
.editing-overlay .flow,.editing-overlay .ambient:before{animation-play-state:paused!important}
@media(max-width:650px),(pointer:coarse){
 .portrait-sample img{opacity:.85!important}
 .card-pair>.reference-back{backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* R7: a cohesive pale portrait collection, with occasional blank cards. */
main.hero .portrait-sample{opacity:.44;background:#f5dfc5}
main.hero .sample-portrait{background-image:url('assets/hero-portraits-r7.webp');background-size:400% 200%;opacity:.48;box-shadow:none;border-radius:2px}
main.hero .portrait-sample>img{filter:none;mix-blend-mode:normal;opacity:.66!important}

/* R7.1: clearer portraits and a distinct primary entrance. */
main.hero .portrait-sample{opacity:.58;background:#f5d9b9}
main.hero .sample-portrait{opacity:.72}
main.hero .orange-entry{border:1px solid #fff4dc;box-shadow:inset 0 0 0 1px #fff0d3b3,0 0 20px #ff9e455c,0 8px 20px #84381335}
main.hero .orange-entry .hero-entry-label{left:5%;right:5%;bottom:6%;padding:5% 4%;background:#fff4e5;color:#96360e;border:1px solid #fffdf5;border-radius:5px;box-shadow:0 3px 10px #71301430;font-size:clamp(11px,1.18vw,18px);font-weight:600;line-height:1.25;backdrop-filter:none;-webkit-backdrop-filter:none}
main.hero .orange-entry:hover .hero-entry-label,main.hero .orange-entry:focus-visible .hero-entry-label{background:#fffaf2;color:#702806}