:root{--green:#063f32;--gold:#e3b743;--ink:#18382f;--muted:#536b62;--line:#d5e1db}*{box-sizing:border-box}body{margin:0;background:#f0f5f2;color:var(--ink);font:16px/1.55 Arial,sans-serif}a{color:var(--green)}button,input,select{font:inherit}button,a,input,select,summary{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #b17e12;outline-offset:4px}[hidden]{display:none!important}header{padding:18px max(20px,calc((100% - 1180px)/2));background:#fff;display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--line)}.brand{text-decoration:none;font-size:22px;font-weight:900;line-height:1.1;white-space:nowrap}.brand span{color:#9a7015}.brand small{display:block;font-size:12px;letter-spacing:2px;margin-top:6px}nav{display:flex;gap:24px}nav a{text-decoration:none;font-size:14px;font-weight:700}main{max-width:1180px;padding:32px 24px 40px;margin:auto}.intro{display:flex;justify-content:space-between;gap:30px;align-items:center;margin-bottom:26px}.eyebrow{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;font-weight:800;color:#536b62;margin:0 0 8px}h1{font-size:clamp(30px,4vw,46px);line-height:1.1;letter-spacing:-1.5px;margin:0 0 12px}h2{font-size:26px;line-height:1.2;margin:0 0 18px}.intro p:last-child{max-width:640px;margin:0}.session-badge{background:var(--green);color:#fff;border-radius:12px;padding:15px 22px;font-weight:800;white-space:nowrap}.session-badge small{display:block;font-weight:400;color:#f5d56f;font-size:14px}.steps{list-style:none;padding:0;margin:0 0 28px;display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);background:#fff;border-radius:12px;overflow:hidden}.steps li{padding:14px;font-size:14px;color:var(--muted);border-right:1px solid var(--line)}.steps b{display:inline-block;margin-right:8px;color:#71867b;font-size:12px}.steps li[aria-current]{background:var(--green);color:#fff;font-weight:700}.steps li[aria-current] b{color:#f5d56f}.workspace{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:32px;align-items:start}.booth{padding:12px;border-radius:30px 30px 14px 14px;background:linear-gradient(100deg,#d1d8d4,#f9fcfa 13%,#a6b3ab 16%,#d7dfd9 85%,#84978a);box-shadow:0 16px 38px #063f3225;border:1px solid #8d9c92}.booth-sign{background:linear-gradient(150deg,#0a654c,#063f32);color:#fff;border:2px solid var(--gold);border-radius:19px 19px 6px 6px;text-align:center;padding:16px}.booth-sign span{font-size:32px;letter-spacing:4px;font-weight:900}.booth-sign strong{color:#f5d56f}.booth-sign small{display:block;font-size:12px;letter-spacing:3px;color:#d0e5d9}.booth-interior{position:relative;padding:42px 43px 10px;background:repeating-linear-gradient(90deg,#033428 0,#0b5741 12px,#083d30 20px,#127253 28px,#063f32 40px);margin-top:10px;border-radius:5px}.lens{position:absolute;top:9px;left:calc(50% - 11px);width:22px;height:22px;border:4px solid #263831;background:radial-gradient(circle at 35% 30%,#a9d8c8 2px,#081612 4px,#153e3f 8px);border-radius:50%;box-shadow:0 0 0 2px #b0bdb5}.screen{background:#132c24;border:7px solid #263c32;box-shadow:0 0 0 2px #c2cdc5,0 4px 20px #0007;border-radius:14px;aspect-ratio:35/45;position:relative;overflow:hidden;color:#fff}.screen #welcome{padding:30px 18px;text-align:center;display:flex;flex-direction:column;justify-content:center;height:100%}.screen-label{font-size:12px;letter-spacing:3px;color:#f5d56f}.screen h2{font-size:clamp(24px,3vw,36px);margin:18px 0 6px}.screen p{font-size:14px;color:#c2d5cb}.format-card{padding:18px;border:1px solid #b8c6bd;border-radius:8px;font-size:34px;margin:15px auto 0;color:#f5d56f}.format-card small{font-size:14px}.screen-note{font-size:12px!important}#cameraBox,#editorBox,#sheetBox{width:100%;height:100%;position:relative}video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}#preview{width:100%;height:100%;object-fit:contain;display:block}#sheetPreview{width:100%;height:100%;object-fit:contain;background:#fff}.face-guide{position:absolute;top:10%;left:18%;width:64%;height:76%;border:2px dashed #fff9;border-radius:48%;pointer-events:none}.camera-caption{position:absolute;bottom:8px;left:0;width:100%;text-align:center;background:#063f32bd;padding:8px;font-size:12px}#countdown{position:absolute;inset:0;display:grid;place-items:center;font-size:90px;font-weight:900;color:#fff;text-shadow:0 4px 20px #000}.crop-guide{position:absolute;top:12%;bottom:12%;left:4%;right:4%;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}.crop-guide span{border-top:2px dashed #f5d56f;background:#063f3280;font-size:12px;padding:2px 4px;color:#fff;width:100%}.booth-status{display:flex;align-items:center;gap:10px;margin:14px -20px 0;padding:6px 0;color:#f5d56f}.booth-status p{font-size:14px;line-height:1.4;color:#fff;margin:0;min-height:40px}.booth-base{background:#e1e7e2;border-radius:4px 4px 8px 8px;display:flex;justify-content:space-between;font-size:12px;font-weight:800;letter-spacing:1px;margin-top:10px;padding:15px 12px}.control-panel{background:#fff;border:1px solid var(--line);padding:28px;border-radius:18px;box-shadow:0 8px 25px #063f3208}.control-panel p{margin:12px 0}label{display:block;font-weight:700;font-size:14px;margin:14px 0 8px}select{width:100%;padding:12px;background:#f5f8f6;color:var(--ink);border:1px solid #9bad9f;border-radius:8px;min-height:48px}.notice{font-size:14px;background:#f5f4e9;border-left:3px solid #c8a53d;padding:12px;border-radius:0 6px 6px 0}.primary,.secondary,.file-button{display:block;width:100%;border:1px solid transparent;border-radius:10px;padding:14px 18px;min-height:50px;margin-top:12px;font-weight:800;text-align:center;cursor:pointer;text-decoration:none}.primary{background:var(--green);color:#fff;border-color:var(--gold);box-shadow:0 4px 10px #063f3215}.secondary,.file-button{background:#fff;border-color:#9fb3a6;color:var(--green)}button:hover{filter:brightness(1.08)}button:disabled{opacity:.55;cursor:wait}.text-button{display:block;background:none;border:0;color:var(--green);text-decoration:underline;padding:10px;cursor:pointer;margin:8px auto;font-size:14px;min-height:44px}.muted{font-size:14px;color:var(--muted)}.tips{padding-left:20px;font-size:16px}.tips li{margin-bottom:12px}.consent,.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:400}.consent input,.check input{width:20px;height:20px;flex-shrink:0;accent-color:var(--green);margin-top:2px}.file-button{position:relative}.file-button input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.file-button:focus-within{outline:3px solid #b17e12;outline-offset:4px}input[type=range]{width:100%;accent-color:var(--green);min-height:32px}output{float:right}.restart-actions{border-top:1px solid var(--line);margin-top:20px;padding-top:10px}.danger{color:#a43a2d}.issues{padding-left:22px;font-size:14px}.issues li{margin:8px 0}.session-footer{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:24px 0;font-size:14px;color:var(--muted)}.session-footer strong{display:block;color:var(--ink);font-size:16px}details{border-top:1px solid var(--line);padding-top:18px;font-size:14px}summary{cursor:pointer;font-weight:700;min-height:44px}footer{display:flex;gap:24px;justify-content:center;padding:24px;background:#fff;font-size:14px;flex-wrap:wrap}@media(max-width:760px){main{padding:24px 16px}.intro{align-items:start;gap:16px}.session-badge{padding:10px;font-size:14px;white-space:normal;min-width:108px}.session-badge small{font-size:12px}.workspace{grid-template-columns:1fr;gap:20px}.booth{max-width:470px;width:100%;margin:auto}.control-panel{padding:22px}.steps li{padding:10px 4px;font-size:12px;text-align:center}.steps b{display:block;margin:0 0 3px}.session-footer{grid-template-columns:1fr;gap:0}header{padding:14px 16px}.brand{font-size:18px}nav{gap:12px}nav a{font-size:12px}.screen #welcome{padding:20px 12px}.booth-interior{padding-left:38px;padding-right:38px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* SOS Documents: palette from the supplied black, emerald and metallic gold reference. */
:root{--green:#06452e;--gold:#e8be42;--ink:#f3f7f3;--muted:#b5cbbb;--line:#294a34;--neon:#00e83e}
body{background:radial-gradient(ellipse at 8% 45%,#07351b 0,transparent 48%),#030805;color:var(--ink)}
header{background:#030905;border-bottom:1px solid #9b7c2d;box-shadow:0 3px 18px #00e83e0b}
a{color:#f4d671}.brand{color:#f6faf6}.brand span{color:#f5cc55}.brand small{color:#8ff4ad}nav a{color:#ebf4ec}
.eyebrow{color:#96e8ae}.intro p:last-child{color:#c0d2c5}
.session-badge{background:linear-gradient(135deg,#0a4d2d,#04170b);border:1px solid #d9ad36;box-shadow:0 0 20px #00e83e13}
.steps{background:#09180f;border-color:#3c543d}.steps li{color:#c8d5cb;border-color:#3c543d}.steps b{color:#a9bcae}
.steps li[aria-current]{background:linear-gradient(110deg,#096735,#073820);box-shadow:inset 0 -2px #00e83e}
.booth{border-color:#d6aa35;background:linear-gradient(105deg,#785711 0%,#e6b638 5%,#fff0a0 10%,#b88118 14%,#e5b642 21%,#090f09 24%,#111c12 76%,#d19a24 81%,#fff09a 88%,#ad7415 94%,#f1c653 100%);box-shadow:0 0 0 1px #050805,0 16px 45px #0009,0 0 25px #00e83e1d}
.booth-sign{background:linear-gradient(140deg,#021008,#0b3820 55%,#030a05);border-color:#f3cb59;box-shadow:inset 0 0 20px #0008,0 2px 14px #00e83e17}
.booth-sign strong{color:#f9d65f}.booth-sign small{color:#bbd3c1}
.booth-interior{background:repeating-linear-gradient(90deg,#010b04 0,#06451d 12px,#032311 20px,#087531 28px,#011507 40px);border:1px solid #195b2f;box-shadow:inset 0 0 25px #0008}
.lens{border-color:#bd9733;box-shadow:0 0 0 2px #2b4a33,0 0 13px #00e83e45}
.screen{background:#030d07;border-color:#111f15;box-shadow:0 0 0 2px #b79639,0 0 20px #00e83e24}
.screen-label{color:#f4cf60}.screen p{color:#c8d9cd}.format-card{border-color:#e8c254;color:#f9d86e;background:#06170d;box-shadow:0 0 15px #00e83e0e}
.booth-base{background:linear-gradient(110deg,#b48623,#fae281 45%,#ddb348 72%,#906611);color:#0b160d;border:1px solid #f5d275}
.booth-status{color:#3fff71}.booth-status p{color:#ecf6ee}
.control-panel{background:linear-gradient(150deg,#102319,#070f0a);border-color:#76642f;box-shadow:0 12px 30px #0005}
select{background:#04140b;color:#f2f7f2;border-color:#71815b}
.notice{background:#292511;border-color:#f1c448;color:#f4e6b8}
.primary{background:linear-gradient(135deg,#0a7b3b,#075329 55%,#032e16);border:1px solid #f4ce5a;color:#fff;box-shadow:0 0 0 1px #e8be421c,0 6px 18px #0005,0 0 17px #00e83e24}
.primary:hover{box-shadow:0 0 0 1px #f4ce5a55,0 6px 18px #0005,0 0 23px #00e83e42}
.secondary,.file-button{background:#0b2113;border-color:#b59743;color:#f5d775}
.text-button{color:#f2d476}.muted{color:#b7cdbd}.danger{color:#ffb4a5}
input[type=range],.consent input,.check input{accent-color:#17bf56}
.session-footer{color:#b7cdbd}.session-footer strong{color:#f7dc85}
footer{background:#020704;border-top:1px solid #77612a}footer a{color:#eed17d}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,.file-button:focus-within{outline-color:#77ff9d}
@media(max-width:400px){header{flex-wrap:wrap;gap:14px}nav{width:100%;justify-content:space-between}.booth-interior{padding-left:24px;padding-right:24px}.format-card{font-size:26px;padding:14px}.booth-base{font-size:11px;letter-spacing:.5px}.steps li{overflow-wrap:anywhere}}

/* Keep the preview and its actions together, with compact spacing on phones. */
main{max-width:1100px;padding-top:24px}
.intro{margin-bottom:18px;gap:20px}h1{font-size:clamp(28px,3.5vw,38px);margin-bottom:8px}
.steps{margin-bottom:20px}.steps li{padding:11px 12px}
.workspace{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:20px;align-items:start}
.booth{position:sticky;top:16px;align-self:start;border-radius:22px 22px 12px 12px}
.booth-sign{padding:10px}.booth-sign span{font-size:25px;letter-spacing:3px}.booth-sign small{font-size:11px}
.booth-interior{padding:34px 26px 7px}.screen{width:min(100%,260px);margin:0 auto;border-width:5px}
.screen #welcome{padding:16px 12px}.screen h2{font-size:27px;margin:12px 0 4px}
.screen p{margin:8px 0}.format-card{font-size:28px;padding:12px;margin-top:10px}
.booth-status{margin:10px 0 0;gap:8px}.booth-status p{font-size:13px;min-height:0}
.booth-base{padding:9px 10px;margin-top:7px}
.control-panel{padding:22px}.control-panel h2{font-size:24px;margin-bottom:12px}
.control-panel p{margin:10px 0}.control-panel label{margin:10px 0 6px}
.primary,.secondary,.file-button{padding:12px 14px;margin-top:10px;min-height:48px}
.notice{font-size:13px;padding:10px}.source-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
.source-actions .file-button{margin-bottom:0;font-size:14px}.source-actions .primary{font-size:14px}
.setup-summary{color:#c5d9cc}.setup-tips{padding-top:12px;margin-top:8px}
.setup-tips summary{font-size:14px;min-height:34px}.setup-tips .tips{font-size:14px}
.crop-tools{display:flex;align-items:center;gap:12px}.crop-tools .secondary{width:auto;flex:1;font-size:14px}.crop-tools .text-button{flex:1;margin:10px 0 0}
#cameraControls{max-width:340px;margin:12px auto 0;padding:10px;border-radius:10px;background:#03160b;border:1px solid #b59743;display:grid;grid-template-columns:1fr 1fr;gap:8px}
#cameraControls label{margin:0;align-self:center;font-size:14px;color:#f0d77a}
#cameraControls select{min-height:40px;padding:6px 8px}
#cameraControls button{margin:0;min-height:48px;font-size:14px;padding:10px}
.restart-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center;margin-top:14px;padding-top:8px}
.restart-actions .secondary{font-size:14px}.restart-actions .text-button{font-size:13px;margin:10px 0 0}
.session-footer{padding:16px 0;gap:20px}
@media(max-width:760px){
 main{padding:18px 14px 28px}.intro{gap:12px;margin-bottom:14px}.intro .eyebrow{font-size:11px;margin-bottom:6px}
 .intro p:last-child{font-size:14px;line-height:1.4}.session-badge{padding:9px;font-size:13px;min-width:96px}
 header{padding:12px 14px;flex-wrap:nowrap;gap:10px}.brand{font-size:16px}.brand small{font-size:10px;letter-spacing:1px}
 nav{width:auto;gap:10px}nav a{font-size:12px}
 .steps{margin-bottom:14px}.steps li{padding:8px 3px;font-size:11px}.steps b{margin-bottom:2px}
 .workspace{display:flex;flex-direction:column;gap:12px}.booth{width:100%;max-width:none;margin:0;position:relative;top:auto;padding:8px}
 .booth-sign{padding:7px;border-radius:14px 14px 5px 5px}.booth-sign span{font-size:21px}.booth-sign small{display:none}
 .booth-interior{padding:28px 22px 6px;margin-top:7px}.lens{top:5px;width:19px;height:19px;left:calc(50% - 9.5px)}
 .screen{width:min(100%,174px)}.screen #welcome{padding:8px}.screen-label,.screen-note{display:none}
 .screen h2{font-size:21px;margin:5px 0}.screen p{font-size:12px;margin:5px 0}
 .format-card{font-size:23px;padding:8px;margin-top:6px}.format-card small{font-size:12px}
 body[data-phase="1"] .screen,body[data-phase="2"] .screen:has(#cameraBox[hidden]){width:100%;max-width:340px;height:148px;aspect-ratio:auto}
 body[data-phase="1"] .screen #welcome,body[data-phase="2"] .screen #welcome{justify-content:center}
 body[data-phase="1"] .screen #welcome p,body[data-phase="2"] .screen #welcome p{display:none}
 body[data-phase="1"] .format-card,body[data-phase="2"] .format-card{margin-top:8px}
 .booth-status{margin-top:8px}.booth-status p{font-size:12px;line-height:1.35}.booth-base{padding:7px 8px;font-size:10px}
 .control-panel{width:100%;padding:16px;border-radius:12px}.control-panel h2{font-size:22px;margin-bottom:10px}
 .control-panel .eyebrow{font-size:11px;margin-bottom:5px}.control-panel label{margin-top:8px}
 .control-panel .notice{font-size:12px;line-height:1.45;padding:8px}
 .primary,.secondary,.file-button{margin-top:8px}.source-actions{gap:8px}
 body[data-phase="2"] .workspace:has(#cameraBox[hidden]) .control-panel{order:-1}
 body[data-phase="3"] .booth,body[data-phase="4"] .booth,body[data-phase="5"] .booth{position:sticky;top:0;z-index:2}
 #cameraControls{max-width:340px;margin-top:9px;padding:8px}
 .crop-tools{gap:8px}.restart-actions{gap:8px}
 .session-footer{gap:0}
}
@media(max-width:360px){header{flex-wrap:wrap}nav{width:100%;justify-content:space-between}.intro{display:block}.session-badge{display:inline-block;margin-top:10px}.session-badge small{display:inline;margin-left:8px}.steps li{font-size:10px}}


.steps{grid-template-columns:repeat(6,minmax(0,1fr))}.steps li{min-width:0}#orderChoice .primary{margin-top:12px}#savePhotoBox{margin-top:18px}@media(max-width:600px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.steps li{font-size:10px}.steps b{margin-right:4px}}