@font-face{font-family:Than;src:url('assets/than.otf');font-display:swap}@font-face{font-family:Manop;src:url('assets/manop.otf');font-display:swap}
:root{--ink:#242525;--paper:#f3f3ef;--pink:#f8a1ba;--muted:#c2c2b0;--wine:#510700;--rule:#595b50}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--paper);font:18px/1.65 Manop,sans-serif}button,input,textarea{font:inherit}header{margin:0 4%;height:110px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--rule)}header img{width:145px;display:block;filter:brightness(0) saturate(100%) invert(79%) sepia(23%) saturate(683%) hue-rotate(297deg)}header>span{font-size:10px;letter-spacing:1.6px}.live{color:var(--pink);letter-spacing:.7px}nav{display:flex;justify-content:flex-end;gap:36px;margin:20px 4% 50px;color:#aaa99c;font-size:11px}nav .active{color:var(--pink)}main{min-height:650px}.screen{animation:arrive 140ms ease-out}.hero{display:grid;grid-template-columns:57% 43%;margin:0 4% 120px;position:relative;isolation:isolate}.art{position:relative;min-height:690px;margin-right:45px;background:#292a29 url('assets/theme.jpg') center top/100% auto no-repeat;border-top:1px solid var(--rule)}.caption{position:absolute;top:15px;left:20px;font-size:9px;letter-spacing:1.4px;color:var(--muted)}.hero-logo{position:absolute;width:270px;right:-54px;bottom:-70px;z-index:3;background:var(--ink);padding:18px 12px;filter:grayscale(1);opacity:.9}.intro{padding:54px 0 0 12px;position:relative;z-index:2}.eyebrow{font-size:10px;letter-spacing:1.5px;color:var(--muted);line-height:1.7;text-transform:uppercase}h1{font:normal clamp(64px,7.3vw,112px)/1.15 Than,serif;letter-spacing:-1.4px;margin:26px 0 32px;text-transform:uppercase}h1 em{font-style:normal;color:var(--pink)}.intro h1{margin-left:-120px;background:var(--ink);width:max-content;padding:15px 20px 12px 22px}.lead{font-size:28px;color:var(--pink);margin:18px 0 12px}p{margin:16px 0;line-height:1.8;color:#d7d7cc}.intro>p:not(.eyebrow):not(.lead):not(.small-steps){max-width:365px}.primary,.outline{display:inline-flex;align-items:center;justify-content:space-between;gap:25px;min-height:54px;padding:13px 24px;cursor:pointer;text-decoration:none;border:1px solid var(--pink);border-radius:0;transition:background-color 130ms,color 130ms,transform 100ms;font-size:18px}.primary{background:var(--pink);color:var(--wine);margin-top:18px}.primary:hover{background:var(--paper);border-color:var(--paper)}.primary:active,.outline:active{transform:translateY(1px)}.outline{background:transparent;color:var(--pink)}.outline:hover{background:var(--pink);color:var(--wine)}button:disabled{opacity:.4;cursor:default}.intro .primary{min-width:290px}.small-steps{font-size:12px;color:var(--muted);margin-top:14px}.exhibit{border-top:1px solid var(--rule);margin-top:38px;padding-top:16px;display:flex;gap:25px;justify-content:space-between;font-size:12px;color:var(--muted)}.exhibit span:first-child{max-width:130px}.form-screen{display:grid;grid-template-columns:43% 57%;gap:0;max-width:1280px;margin:65px auto 100px;padding:0 5%;align-items:start}.form-screen>div{padding-top:14px;position:relative;z-index:2}.form-screen h1{font-size:clamp(60px,6.2vw,92px);width:max-content;margin-right:-100px;padding-bottom:18px}.form-screen>div>p:not(.eyebrow){max-width:310px}.side-logo{width:210px;margin:55px 0 0 18px;filter:grayscale(1);opacity:.45}form{background:var(--paper);color:var(--ink);padding:45px 35px 30px;margin-top:110px;border-top:7px solid var(--pink);position:relative}form:before{content:'กาลครั้งนี้ / YOUR LETTER';position:absolute;right:12px;top:-39px;font-size:10px;letter-spacing:1.5px;color:var(--muted)}label{display:block;font-size:13px;margin:0 0 9px;line-height:1.7}input:not([type=checkbox]),textarea{display:block;width:100%;background:none;border:0;border-bottom:1px solid #9b9c8d;border-radius:0;padding:10px 0 13px;font:21px/1.6 Manop;color:var(--ink);margin-bottom:28px}input::placeholder,textarea::placeholder{color:#727365;opacity:1}textarea{min-height:125px;resize:vertical}.hint{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:#6d6e60;margin:-17px 0 28px}#signature{display:block;background:#fff;width:100%;height:125px;border-bottom:1px solid #9b9c8d;cursor:crosshair;touch-action:none}.text-button{background:none;border:0;border-bottom:1px solid #7e8071;color:var(--muted);font:15px/1.5 Manop;padding:6px 0;cursor:pointer;margin:12px 0;transition:color 130ms,border-color 130ms}.text-button:hover{color:var(--pink);border-color:var(--pink)}form .text-button{color:#555746}form .text-button:hover{color:var(--wine)}.privacy{font-size:12px;line-height:1.7;color:#626454;margin-top:18px}#form-error{color:var(--wine);font-size:14px}form .primary{width:100%;background:var(--wine);border-color:var(--wine);color:var(--paper)}form .primary:hover{background:#722c25}.capture-screen{display:grid;grid-template-columns:33% 67%;max-width:1400px;padding:0 5%;margin:85px auto 110px;gap:0;align-items:start}.capture-screen>div:first-child{padding-right:32px;position:relative;z-index:2}.capture-screen h1{font-size:clamp(65px,7.3vw,108px);margin-right:-120px;position:relative;z-index:2;background:var(--ink);width:max-content;padding:8px 18px 12px 0}.viewfinder{position:relative;background:#191b19;aspect-ratio:1.44;border:1px solid #787a69;min-height:400px;margin-top:110px;margin-right:-4vw}.viewfinder:before{content:'ภาพหนึ่งใบ / DEVALAI';position:absolute;top:-32px;right:4px;font-size:10px;letter-spacing:2px;color:var(--muted)}video,#photo{position:absolute;width:100%;height:100%;object-fit:cover}video{transform:scaleX(-1)}.monochrome{filter:grayscale(1)}#camera-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#a4a694;font-size:60px}#camera-placeholder small{font-size:13px;margin-top:10px}.finder-label{position:absolute;bottom:12px;right:16px;font-size:9px;letter-spacing:1.3px;background:var(--paper);color:var(--ink);padding:5px 10px}#countdown{position:absolute;inset:0;display:grid;place-items:center;font:100px Than;color:var(--pink);pointer-events:none}.filter{font-size:13px;color:var(--muted);margin-top:28px}.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.upload{margin:0}.capture-screen .primary{font-size:16px;gap:15px}.capture-screen .outline{padding:10px 18px;font-size:16px}#camera-status{font-size:13px}.result-screen{display:grid;grid-template-columns:50% 50%;gap:0;max-width:1180px;margin:60px auto 120px;padding:0 4%;align-items:start}.result-screen>div:first-child{padding-top:50px;position:relative;z-index:2}.result-screen h1{font-size:clamp(65px,7vw,102px)}.result-screen .primary{display:flex;max-width:310px}.result-screen .outline{display:flex;max-width:310px;margin-top:12px;font-size:16px}.result-screen .text-button{display:block;margin-top:22px}.receipt-wrap{position:relative;background:var(--paper);padding:0;max-width:390px;width:100%;margin-left:40px;margin-top:0;outline:1px solid #898b78;outline-offset:12px;transform:rotate(2deg)}.receipt-wrap:before{content:'จากกาลครั้งนี้ ถึงกาลครั้งหน้า';position:absolute;right:-38px;top:35%;writing-mode:vertical-rl;font-size:11px;color:var(--muted);letter-spacing:2px}#receipt{display:block;width:100%;height:auto}#save-status{font-size:13px;max-width:350px}footer{margin:0 4%;border-top:1px solid var(--rule);padding:22px 0 30px;display:flex;justify-content:space-between;gap:25px;font-size:10px;color:var(--muted);letter-spacing:.5px}footer span:nth-child(2){max-width:260px}.hidden{display:none!important}:focus-visible{outline:2px solid var(--pink);outline-offset:5px}form :focus-visible{outline-color:var(--wine)}@keyframes arrive{from{opacity:0}to{opacity:1}}
@media(min-width:1500px){.hero{max-width:1440px;margin-left:auto;margin-right:auto}.art{min-height:780px}.intro{padding-top:90px}}
@media(max-width:1000px) and (min-width:701px){.intro h1{font-size:76px;margin-left:-80px}.hero{grid-template-columns:52% 48%}.art{margin-right:24px;min-height:660px;background-size:auto 100%}.hero-logo{width:210px}.intro .primary{min-width:0;width:100%}.form-screen h1{font-size:65px}.capture-screen{grid-template-columns:40% 60%}.capture-screen h1{font-size:76px}.viewfinder{min-height:350px}.receipt-wrap{margin-left:15px;max-width:300px}.result-screen h1{font-size:75px}}
@media(max-width:700px){header{height:90px;margin:0 6%;gap:12px}header img{width:120px}header>span:not(.live){display:none}.live{font-size:9px}nav{margin:17px 6% 28px;justify-content:space-between;gap:8px;font-size:10px}.hero{display:flex;flex-direction:column;margin:0 6% 80px}.art{min-height:360px;height:360px;margin:0 17% 0 0;background-size:100% auto}.caption{font-size:8px;left:12px;top:12px}.hero-logo{width:150px;right:-57px;bottom:-28px;padding:10px}.intro{padding:24px 0 0 0}.intro h1{font-size:76px;letter-spacing:-1px;padding:0;background:none;margin:32px 0 20px;width:auto}.intro>.eyebrow{margin-right:75px;font-size:8px}.lead{font-size:25px}.intro>p:not(.eyebrow):not(.lead):not(.small-steps){font-size:16px;max-width:360px}.intro .primary{width:100%;min-width:0}.exhibit{margin-top:28px;font-size:11px}.exhibit span:first-child{max-width:none}.form-screen,.capture-screen,.result-screen{display:flex;flex-direction:column;margin:32px 6% 70px;padding:0;gap:0}.form-screen>div{padding:0}.form-screen h1{font-size:63px;width:auto;margin:20px 0}.form-screen>div>p:not(.eyebrow){max-width:none;font-size:16px}.side-logo{display:none}form{margin:45px 0 0;padding:30px 22px 22px;width:100%}label{font-size:12px}.capture-screen>div:first-child{padding:0;width:100%}.capture-screen h1{font-size:72px;margin:20px 0;width:auto;background:none;padding:0}.viewfinder{width:100%;min-height:0;margin:50px 0 10px;order:-1;aspect-ratio:1.44}.viewfinder:before{font-size:8px}#camera-placeholder small{font-size:10px}.finder-label{font-size:8px}.capture-screen>div:first-child>.eyebrow{margin-top:24px}.result-screen>div:first-child{padding:45px 0 0;width:100%;order:2}.result-screen h1{font-size:70px;margin:20px 0}.receipt-wrap{width:72%;max-width:290px;margin:20px auto 0;transform:rotate(2deg)}.result-screen .primary,.result-screen .outline{width:100%;max-width:none}footer{margin:0 6%;font-size:9px;flex-wrap:wrap;gap:14px}footer span:first-child{width:100%}.privacy{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{@page{size:80mm 142.51mm;margin:0}body{background:white}header,nav,footer,.screen:not(#result),#result>div:first-child{display:none!important}main,#result{display:block!important;margin:0;padding:0;min-height:0}.receipt-wrap{padding:0;margin:0;max-width:none;width:80mm;outline:0;transform:none}.receipt-wrap:before{display:none}#receipt{width:80mm;height:142.51mm}}
/* Keep the supplied collage's upper composition intact, with the logo crossing its edge. */
@media(min-width:1001px){.art{height:690px;align-self:start}}
.hero-logo{background:transparent;filter:brightness(0) invert(93%);opacity:1}
@media(min-width:1500px){.art{height:780px}}
@media(max-width:700px){.art{background-size:auto 590px}}
.side-logo{filter:brightness(0) invert(93%);opacity:.3}
@media(min-width:701px) and (max-width:1000px){.form-screen{grid-template-columns:40% 60%;gap:18px}.form-screen h1{width:auto;font-size:58px;margin-right:0;letter-spacing:-1px}.form-screen>div>p:not(.eyebrow){font-size:16px}.form-screen form{padding:30px 24px;margin-top:95px}}
.art:after{content:'';position:absolute;left:0;right:0;bottom:0;height:54px;background:var(--ink);pointer-events:none}
@media(max-width:700px){.art:after{display:none}}

/* Step 00: clear photobooth introduction, fully beside the poster. */
.intro{padding-left:24px}.intro h1{margin:26px 0 30px;padding:0;background:none;width:auto;max-width:100%;font-size:clamp(60px,5.6vw,84px);letter-spacing:-1px}.hero-logo{right:0}
@media(min-width:701px) and (max-width:1000px){.intro{padding-left:16px}.intro h1{font-size:60px;margin-left:0}.intro>p:not(.eyebrow):not(.small-steps){font-size:17px}}
@media(max-width:700px){.intro{padding-left:0}.intro h1{font-size:66px;margin:32px 0 24px}.hero-logo{right:-42px}}

/* Fewer words and a single next action, with the exhibition design retained. */
.hero{align-items:center}.intro{padding-top:0}.intro h1{margin-top:0;margin-bottom:34px}.intro .primary{min-width:250px}.form-screen h1{width:auto}.form-screen form{margin-top:35px}form:before,.viewfinder:before,.receipt-wrap:before{display:none}.hint{justify-content:flex-end}.data-note{color:#626454;font-size:11px;margin-top:-8px}.data-note summary{cursor:pointer;width:max-content;min-height:28px;padding:4px 0}.data-note p{font-size:12px;color:#626454;margin:8px 0 16px}.privacy{margin-bottom:8px}.capture-screen h1{margin-bottom:35px}.filter{margin:0 0 14px}.capture-screen .primary{min-width:170px}.capture-screen .text-button{margin-top:20px}#camera-status:empty{display:none}.result-screen .primary{width:100%;max-width:310px}.result-screen h1{margin-bottom:30px}.result-screen .text-button{margin-top:20px}footer span:first-child{width:auto}
@media(max-width:700px){.hero{align-items:stretch}.intro{padding-top:44px}.intro h1{margin-bottom:26px}.intro .primary{min-width:0}.form-screen form{margin-top:25px}.capture-screen>div:first-child{padding-top:15px}.capture-screen h1{font-size:58px;margin:0 0 20px}.viewfinder{margin-top:15px}.capture-screen .primary{min-width:0;width:100%}.capture-screen .actions{width:100%}.capture-screen #retake{margin-right:15px}.result-screen .primary{max-width:none}.result-screen h1{font-size:62px}.result-screen>div:first-child{padding-top:35px}footer{font-size:9px}}

/* Artwork with a reserved central space for the event logo. */
.hero .art{background-image:url('assets/background-no-logo.png');background-size:cover;background-position:center top;border:0;min-height:0;aspect-ratio:2497/3105;height:auto;align-self:center}.hero .art:after{display:none}.event-logo{position:absolute;width:49%;height:auto;left:50%;top:24%;transform:translateX(-50%);filter:brightness(0) saturate(100%) invert(79%) sepia(23%) saturate(683%) hue-rotate(297deg)}
/* Connected progress dots, using the exhibition palette. */
nav.stepper{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;max-width:1120px;margin:28px auto 46px;padding:0;height:58px;isolation:isolate;--progress:0%}nav.stepper:before,nav.stepper:after{content:'';position:absolute;left:12.5%;top:5px;height:10px;border-radius:8px;z-index:-1}nav.stepper:before{width:75%;background:#6c6e64}nav.stepper:after{width:var(--progress);background:var(--pink);transition:width 140ms ease-out}nav.stepper>span{display:flex;align-items:center;flex-direction:column;position:relative;color:#a5a79b;font-size:12px;letter-spacing:.3px;line-height:1.4}nav.stepper i{display:block;width:10px;height:10px;border-radius:50%;background:var(--paper);margin:5px 0 16px;flex-shrink:0}nav.stepper b{font-weight:normal}nav.stepper .active{color:var(--paper)}nav.stepper .active i{width:20px;height:20px;margin:0 0 11px;border:4px solid var(--pink);background:var(--ink)}nav.stepper .complete{color:var(--pink)}nav.stepper .complete i{background:var(--pink)}
@media(max-width:1000px) and (min-width:701px){.hero .art{background-size:cover;height:auto;min-height:0}nav.stepper{margin-left:5%;margin-right:5%}.intro h1{font-size:60px}}
@media(max-width:700px){.hero .art{width:100%;height:auto;min-height:0;max-height:none;margin:0;background-size:cover;aspect-ratio:1.02;background-position:center top}.event-logo{width:47%;top:24%}.intro{padding-top:34px}.intro h1{font-size:64px;margin-top:0}nav.stepper{margin:24px 3% 30px;height:48px}nav.stepper:before,nav.stepper:after{top:6px;height:6px}nav.stepper>span{font-size:11px}nav.stepper i{width:8px;height:8px;margin:5px 0 12px}nav.stepper .active i{height:18px;width:18px;border-width:3px;margin:0 0 7px}}
.hero .event-logo{top:11%;width:48%}nav.stepper>span{font-size:14px}nav.stepper b{font-weight:600}
@media(max-width:700px){.hero .event-logo{top:15%;width:47%}nav.stepper>span{font-size:11px}}

/* Exhibition artwork is the page backdrop; content stays sharp above it. */
body{position:relative;isolation:isolate;min-height:100svh}body:before{content:'';position:fixed;inset:-6px;z-index:-2;background:#272727 url('assets/background-no-logo.png') center 30%/cover no-repeat;filter:blur(2px);pointer-events:none}body:after{content:'';position:fixed;inset:0;z-index:-1;background:rgba(20,21,20,.42);pointer-events:none}header,footer{border-color:#77796c66}nav.stepper{max-width:960px}main{min-height:0}.hero{display:flex;align-items:center;justify-content:center;min-height:calc(100svh - 350px);margin:0 5% 70px;padding:35px 20px 60px;background:none}.welcome-content{width:100%;max-width:620px;text-align:center}.hero .event-title{font:normal 1rem Than;margin:0 0 34px;padding:0}.welcome-logo{display:block;width:min(100%,460px);height:auto;margin:0 auto;filter:brightness(0) saturate(100%) invert(79%) sepia(23%) saturate(683%) hue-rotate(297deg)}.welcome-description{font:20px/1.85 Manop,sans-serif;color:var(--paper);margin:0 0 28px;text-wrap:balance}.welcome-content .primary{justify-content:center;min-width:190px;padding:12px 40px;font-size:22px;margin:0}.capture-screen h1{background:transparent}footer{margin-top:0}
@media(max-width:700px){body:before{background-size:auto 100%;background-position:center center;filter:blur(1.5px)}body:after{background:rgba(20,21,20,.48)}nav.stepper{margin-bottom:26px}.hero{min-height:calc(100svh - 280px);margin:0 6% 28px;padding:30px 0 45px}.welcome-logo{width:min(100%,310px)}.hero .event-title{margin-bottom:28px}.welcome-description{font-size:17px;line-height:1.85;margin-bottom:26px}.welcome-content .primary{font-size:20px;width:180px;min-width:0}footer{padding-bottom:22px}}
@media print{body:before,body:after{display:none!important}}
/* Homepage keeps only the information button in its header. */
body[data-step="0"] header{justify-content:flex-end;border-bottom:0}body[data-step="0"] header #home,body[data-step="0"] header .live{display:none}.info-button{width:36px;height:36px;flex-shrink:0;display:grid;place-items:center;border:1px solid var(--muted);border-radius:50%;background:transparent;color:var(--paper);font:24px/1 Than,serif;cursor:pointer;padding:0;transition:color 130ms,border-color 130ms,background 130ms}.info-button:hover{color:var(--ink);background:var(--pink);border-color:var(--pink)}dialog{position:fixed;inset:0;max-width:520px;width:calc(100% - 40px);max-height:calc(100svh - 60px);margin:auto;padding:45px 40px 35px;border:0;border-top:5px solid var(--pink);background:var(--paper);color:var(--ink);overflow:auto;box-sizing:border-box}dialog::backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(3px)}dialog h2{font:normal 42px/1.25 Than,serif;margin:0 28px 25px 0;color:var(--wine)}dialog p{font:18px/1.85 Manop,sans-serif;color:#393c32;margin:18px 0 0}.dialog-close{position:absolute;right:14px;top:12px;display:grid;place-items:center;width:40px;height:40px;border:0;background:transparent;color:var(--wine);font:30px/1 sans-serif;cursor:pointer}.dialog-close:hover{background:#e6e6db}dialog :focus-visible{outline-color:var(--wine)}.welcome-description{max-width:530px;margin-left:auto;margin-right:auto}
@media(max-width:700px){.info-button{width:34px;height:34px}dialog{padding:37px 25px 28px}dialog h2{font-size:36px;margin-bottom:20px}dialog p{font-size:17px}}
@media print{dialog,.info-button{display:none!important}}

/* Softer controls, with the progress indicator integrated into the header. */
.primary,.outline{border-radius:10px}.text-button{border-radius:5px}.dialog-close{border-radius:8px}
header{display:grid;grid-template-columns:160px minmax(0,1fr) 40px;align-items:center;column-gap:30px;height:118px;margin-bottom:35px}header #home{justify-self:start}header .info-button{justify-self:end}header nav.stepper{grid-column:2;grid-row:1;width:100%;max-width:800px;margin:0 auto;height:54px}body[data-step="0"] header{height:195px;grid-template-columns:1fr 40px;grid-template-rows:82px 68px;margin-bottom:20px;align-content:start}body[data-step="0"] header .info-button{grid-column:2;grid-row:1}body[data-step="0"] header nav.stepper{grid-column:1 / -1;grid-row:2;max-width:960px;align-self:center}.hero{min-height:calc(100svh - 240px);margin-bottom:0;padding-bottom:60px}
/* Frosted glass information window: the exhibition remains visible through it. */
dialog{background:rgba(36,37,37,.68);border:1px solid rgba(243,243,239,.24);border-top-color:rgba(248,161,186,.6);border-radius:18px;backdrop-filter:blur(20px) saturate(110%);-webkit-backdrop-filter:blur(20px) saturate(110%);box-shadow:0 18px 55px rgba(0,0,0,.22);color:var(--paper)}dialog::backdrop{background:rgba(0,0,0,.22);backdrop-filter:blur(3px)}dialog h2{color:var(--pink)}dialog p{color:var(--paper)}.dialog-close{color:var(--paper)}.dialog-close:hover{background:rgba(243,243,239,.12)}dialog :focus-visible{outline-color:var(--pink)}
@media(max-width:1000px) and (min-width:701px){header{grid-template-columns:125px minmax(0,1fr) 36px;gap:18px}header img{width:120px}header nav.stepper{margin:0}header nav.stepper>span{font-size:12px}}
@media(max-width:700px){header{height:154px;grid-template-columns:1fr 40px;grid-template-rows:75px 60px;margin-bottom:22px;column-gap:12px;align-content:start}header #home{grid-column:1;grid-row:1}header .info-button{grid-column:2;grid-row:1}header nav.stepper{grid-column:1 / -1;grid-row:2;width:100%;height:48px;margin:0;max-width:none}body[data-step="0"] header{height:154px;grid-template-rows:75px 60px;margin-bottom:16px}body[data-step="0"] header nav.stepper{max-width:none;margin:0}.hero{min-height:calc(100svh - 175px);margin-bottom:0;padding:30px 0 55px}dialog{border-radius:14px}}
@media(min-width:1001px){header{grid-template-columns:160px minmax(0,1fr) 160px}body[data-step="0"] header{grid-template-columns:1fr 40px}}
@media(min-width:701px) and (max-width:1000px){header{grid-template-columns:125px minmax(0,1fr) 125px}body[data-step="0"] header{grid-template-columns:1fr 40px}}
/* One rounded rose-glass treatment across every action. */
:root{--button-glass:rgba(248,161,186,.19);--button-edge:rgba(248,161,186,.55);--button-text:#ffe2ec}
body button:is(.primary,.outline,.text-button,.info-button,.dialog-close){background:var(--button-glass);border:1px solid var(--button-edge);color:var(--button-text);border-radius:999px;backdrop-filter:blur(14px) saturate(115%);-webkit-backdrop-filter:blur(14px) saturate(115%);box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 3px 12px rgba(0,0,0,.12);transition:background-color 130ms,border-color 130ms,transform 100ms}
body button:is(.primary,.outline,.text-button,.info-button,.dialog-close):hover{background:rgba(248,161,186,.31);border-color:rgba(248,161,186,.85);color:var(--button-text)}body button:is(.primary,.outline,.text-button,.info-button,.dialog-close):active{transform:translateY(1px)}body button.text-button{padding:8px 17px;min-height:36px;font-size:14px;line-height:1.4}body button.dialog-close{width:36px;height:36px;top:14px;right:14px}body button.info-button{padding:0}
.welcome-logo{filter:brightness(0) saturate(100%) invert(79%) sepia(23%) saturate(683%) hue-rotate(297deg) drop-shadow(0 5px 12px rgba(0,0,0,.5))}.form-screen h1,.capture-screen h1,.result-screen h1{text-shadow:0 4px 14px rgba(0,0,0,.55)}
/* Frosted writing surface, with bright text and clearly defined fields. */
#letter{background:rgba(27,29,28,.73);border:1px solid rgba(243,243,239,.23);border-top-color:rgba(248,161,186,.6);border-radius:20px;backdrop-filter:blur(20px) saturate(110%);-webkit-backdrop-filter:blur(20px) saturate(110%);box-shadow:0 12px 35px rgba(0,0,0,.16);color:var(--paper)}#letter label{color:var(--paper)}#letter input,#letter textarea{background:rgba(243,243,239,.055);border:1px solid rgba(243,243,239,.25);border-radius:12px;padding:11px 14px;color:var(--paper)}#letter input::placeholder,#letter textarea::placeholder{color:#bfc2b5;opacity:1}#letter input:focus,#letter textarea:focus{background:rgba(243,243,239,.09);border-color:var(--pink)}#letter :focus-visible{outline-color:var(--pink)}#letter .hint,#letter .privacy,#letter .data-note,#letter .data-note p{color:#d0d2c7}#signature{background:rgba(243,243,239,.95);border:1px solid rgba(243,243,239,.5);border-radius:12px}#form-error{color:var(--pink)}#words-back{display:block;margin:18px 0 0}
.capture-screen #camera{width:auto;min-width:0;padding:10px 23px;min-height:46px;font-size:18px;line-height:1.4}.capture-timing{font-size:13px;color:var(--muted);margin:12px 0}.capture-review{flex-direction:column;align-items:flex-start;gap:0}.capture-screen #retake{margin:12px 0 0}.capture-screen #back{margin-top:42px}.result-screen #result-back{margin-top:28px}.result-screen #restart{margin-top:12px}.result-screen h1{font-size:clamp(60px,6.2vw,90px)}
@media(max-width:700px){#letter{border-radius:17px}.capture-screen #camera{width:auto;padding:10px 23px}.capture-review #finish{width:100%}.capture-review #retake{width:auto}.capture-screen #back{margin-top:36px}.result-screen h1{font-size:58px}}
/* Consistent corner navigation, separate from the next action. */
.step-heading{display:flex;align-items:flex-start;gap:18px;margin-bottom:30px}.step-heading h1{margin:0!important;min-width:0;width:auto!important}.step-heading button.back-icon{flex:0 0 42px;width:42px;min-width:42px;height:42px;min-height:42px;padding:0;margin:20px 0 0!important;display:grid;place-items:center;font:24px/1 Manop,sans-serif}.capture-screen .step-heading{margin-bottom:32px}.result-screen .step-heading h1{font-size:clamp(52px,5.2vw,76px)}
.form-actions{display:flex;justify-content:flex-end;margin-top:24px}.form-actions button.primary{width:180px;min-width:180px;max-width:none;margin:0;justify-content:space-between}.print-note{font-size:12px;color:var(--muted);line-height:1.7;margin:8px 0 22px;max-width:300px}#camera-options .filter{margin-bottom:0}
.capture-review{gap:14px;margin-top:18px}.capture-review #retake{margin:0;font-size:14px;align-self:flex-start}.capture-review #finish{margin:0;width:180px;min-width:0}.result-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.result-actions #print,.result-actions #download{display:inline-flex;width:auto;min-width:150px;max-width:none;margin:0;padding:12px 20px;gap:12px;justify-content:center;white-space:nowrap}.button-icon{display:block;flex:0 0 20px}body button.dialog-close{display:grid;place-items:center;align-items:center;justify-items:center;padding:0;line-height:1}body button.dialog-close svg{display:block;margin:0;flex-shrink:0}
@media(max-width:1000px) and (min-width:701px){.step-heading{gap:12px}.step-heading button.back-icon{flex-basis:36px;width:36px;min-width:36px;height:36px;min-height:36px;margin-top:16px!important}.result-screen .step-heading h1{font-size:56px}}
@media(max-width:700px){.step-heading{gap:14px;margin-bottom:20px}.step-heading button.back-icon{flex-basis:38px;width:38px;min-width:38px;height:38px;min-height:38px;margin-top:14px!important;font-size:22px}.form-screen .step-heading h1{font-size:56px}.capture-screen .step-heading h1{font-size:54px}.result-screen .step-heading h1{font-size:48px}.form-actions button.primary{width:180px;min-width:180px}.result-actions{gap:10px}.result-actions #print,.result-actions #download{min-width:145px;padding:12px 18px;font-size:16px}.capture-review #finish{width:180px}.print-note{max-width:none}}
@media print{#receipt{filter:grayscale(1)!important}}
/* Earlier steps are keyboard- and pointer-accessible, without skipping ahead. */
nav.stepper .step-button{display:flex;flex-direction:column;align-items:center;gap:0;width:100%;padding:0;margin:0;background:none;border:0;border-radius:0;color:inherit;font:inherit;line-height:inherit;cursor:pointer;box-shadow:none;backdrop-filter:none}nav.stepper .step-button:disabled{opacity:1;cursor:default}nav.stepper .step-button:not(:disabled):hover b{color:var(--pink)}nav.stepper .step-button:focus-visible{outline:2px solid var(--pink);outline-offset:5px;border-radius:8px}
/* Back arrows share the logo's left margin; headings keep their own breathing room. */
.form-screen,.capture-screen,.result-screen{position:relative;max-width:none;margin-left:4%;margin-right:4%;padding-left:70px;padding-right:0}.form-screen>div,.capture-screen>div:first-child,.result-screen>div:first-child{position:static}.step-heading{position:static;display:block;padding:0}.step-heading button.back-icon{position:absolute;left:0;margin:0!important}.form-screen .step-heading button.back-icon{top:34px}.capture-screen .step-heading button.back-icon{top:20px}.result-screen .step-heading button.back-icon{top:70px}
#letter .form-actions button.primary{width:auto;min-width:0;max-width:none;padding:12px 24px;gap:14px}.capture-review{flex-direction:row;align-items:center;gap:12px;flex-wrap:wrap}.capture-review #finish{width:auto;min-width:0;padding:12px 24px;gap:12px}.capture-review #retake{align-self:auto;margin:0}.capture-review #finish{margin:0}.text-button:not(.back-icon){display:inline-flex;align-items:center;justify-content:center;gap:8px}button .reset-icon{display:inline-block;font:27px/1 Arial,sans-serif;flex-shrink:0}
#camera-options .filter{font-size:18px;line-height:1.6;display:flex;align-items:center;gap:10px;color:var(--paper)}#mono{width:18px;height:18px;margin:0;accent-color:var(--pink)}#camera-options .print-note{font-size:16px;line-height:1.75;color:#e0e2d8;margin-top:10px;max-width:340px}
/* Restart sits level with the lower edge of the receipt on wider screens. */
.result-screen{align-items:stretch}.result-screen>div:first-child{display:flex;flex-direction:column;padding-bottom:8px}.result-screen #restart{margin-top:auto;margin-bottom:0;align-self:flex-start}.result-screen .result-actions{margin-bottom:24px}
@media(max-width:1000px) and (min-width:701px){.form-screen,.capture-screen,.result-screen{padding-left:58px}.form-screen .step-heading button.back-icon{top:30px}.capture-screen .step-heading button.back-icon{top:16px}.result-screen .step-heading button.back-icon{top:66px}}
@media(max-width:700px){.form-screen,.capture-screen,.result-screen{margin-left:6%;margin-right:6%;padding-left:0;padding-right:0}.step-heading{padding-left:56px}.form-screen .step-heading button.back-icon{top:14px}.capture-screen .step-heading button.back-icon{top:auto;margin-top:12px!important}.result-screen .step-heading button.back-icon{top:auto;margin-top:12px!important}.result-screen>div:first-child{display:block;padding-bottom:0}.result-screen #restart{margin-top:36px;display:inline-flex}.result-screen .result-actions{margin-bottom:0}.capture-review #finish{width:auto}#letter .form-actions button.primary{width:auto;min-width:0}#camera-options .print-note{font-size:16px;max-width:none}}
/* Shared sizing for the four compact actions. */
:root{--compact-action-width:min(148px,calc((88vw - 12px)/2))}
body .screen button:is(#clear,#retake,#finish,#restart){display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;width:var(--compact-action-width);min-width:var(--compact-action-width);max-width:var(--compact-action-width);height:48px;min-height:48px;padding:8px 16px;font:16px/1.3 Manop,sans-serif;white-space:nowrap}
body .screen button:is(#clear,#retake,#finish,#restart) :is(.reset-icon,.action-icon){display:inline-block;flex-shrink:0;font:26px/1 Arial,sans-serif}
/* The preview is bounded by its grid cell and the visible window. */
.capture-screen{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px;margin-top:45px;margin-bottom:50px;align-items:start}.capture-screen>div{min-width:0}.capture-screen .viewfinder{box-sizing:border-box;width:min(100%,calc((100svh - 230px)*1.44));max-width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:1.44;margin:0;justify-self:end;align-self:start;overflow:hidden;border-radius:12px}.viewfinder video,.viewfinder #photo{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:cover}
@media(max-width:1000px) and (min-width:701px){.capture-screen{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px}.capture-screen .viewfinder{min-height:0;margin:0}}
@media(max-width:700px){.capture-screen{gap:0;margin-top:22px}.capture-screen .viewfinder{width:min(100%,calc((100svh - 200px)*1.44));max-width:100%;min-height:0;margin:0 auto 20px;flex-shrink:0;align-self:center}.capture-screen>div:first-child{min-width:0}.capture-review{gap:12px}}
/* Completed markers merge into the filled track instead of protruding at its ends. */
nav.stepper .complete i{visibility:hidden}

/* Give the later-step headings a quieter patch of the exhibition backdrop. */
.form-screen .step-heading,.capture-screen .step-heading,.result-screen .step-heading{margin-top:55px}.form-screen .step-heading button.back-icon{top:89px}.capture-screen .step-heading button.back-icon{top:75px}.result-screen .step-heading button.back-icon{top:125px}
body .capture-screen button#shutter{width:auto;min-width:0;max-width:100%;padding:12px 24px;gap:14px;font:18px/1.4 Manop,sans-serif;justify-content:center}
@media(max-width:1000px) and (min-width:701px){.form-screen .step-heading button.back-icon{top:85px}.capture-screen .step-heading button.back-icon{top:71px}.result-screen .step-heading button.back-icon{top:121px}}
@media(max-width:700px){.form-screen .step-heading,.capture-screen .step-heading,.result-screen .step-heading{margin-top:32px}.form-screen .step-heading button.back-icon{top:46px}.capture-screen .step-heading button.back-icon,.result-screen .step-heading button.back-icon{top:auto;margin-top:12px!important}body .capture-screen button#shutter{width:auto;min-width:0}}
@media(min-width:701px){.form-screen .step-heading,.capture-screen .step-heading,.result-screen .step-heading{margin-top:110px}.form-screen .step-heading button.back-icon{top:144px}.capture-screen .step-heading button.back-icon{top:130px}.result-screen .step-heading button.back-icon{top:180px}}
@media(min-width:701px) and (max-width:1000px){.form-screen .step-heading button.back-icon{top:140px}.capture-screen .step-heading button.back-icon{top:126px}.result-screen .step-heading button.back-icon{top:176px}}
/* Back controls stay at one shared position; only the headings are lowered. */
.form-screen .step-heading button.back-icon,.capture-screen .step-heading button.back-icon,.result-screen .step-heading button.back-icon{top:20px;margin:0!important}
@media(max-width:700px){.form-screen .step-heading button.back-icon,.capture-screen .step-heading button.back-icon,.result-screen .step-heading button.back-icon{top:14px;margin:0!important}}
@media(min-width:701px){.form-screen .step-heading button.back-icon{top:0}.capture-screen .step-heading button.back-icon{top:20px}.result-screen .step-heading button.back-icon{top:5px}}
@media(max-width:700px){.capture-screen .step-heading button.back-icon{top:24px}}
/* Lift the headings slightly; keep the shared Back-arrow coordinates unchanged. */
@media(min-width:701px){.form-screen .step-heading,.capture-screen .step-heading,.result-screen .step-heading{margin-top:82px}}
@media(max-width:700px){.form-screen .step-heading,.capture-screen .step-heading,.result-screen .step-heading{margin-top:20px}}
/* Keep the two-colour writing title on one line. */
.form-screen .step-heading h1{white-space:nowrap;font-size:clamp(46px,4.5vw,68px)}
@media(min-width:701px){.result-screen .step-heading{margin-top:46px}}
@media(max-width:1000px) and (min-width:701px){.form-screen .step-heading h1{font-size:clamp(32px,4vw,44px)}}
@media(max-width:700px){.form-screen .step-heading h1{font-size:clamp(34px,10.2vw,42px)}.result-screen .step-heading{margin-top:0}}
/* One responsive type scale for all three task headings. */
:root{--step-title-size:clamp(42px,4.5vw,64px)}
.form-screen .step-heading h1,.capture-screen .step-heading h1,.result-screen .step-heading h1{font-size:var(--step-title-size);line-height:1.15}
.result-screen .step-heading{margin-top:0}
@media(max-width:1000px) and (min-width:701px){:root{--step-title-size:clamp(32px,4vw,44px)}}
@media(max-width:700px){:root{--step-title-size:clamp(34px,10vw,42px)}}
/* Fit the receipt and every result action inside a desktop-height workspace. */
@media screen and (min-width:701px){
 .result-screen{--receipt-height:min(calc(100svh - 250px),694.75px);height:calc(100svh - 210px);min-height:0;margin-top:60px;margin-bottom:20px;grid-template-rows:minmax(0,1fr);align-items:start}
 .result-screen>div:first-child{height:calc(var(--receipt-height) + 20px);max-height:100%;min-height:0;padding-top:16px;padding-bottom:0}
 .result-screen .receipt-wrap{width:calc(var(--receipt-height)*.5613577);max-width:100%;height:auto;margin:20px 0 0;align-self:start;justify-self:center;outline-offset:8px;transform:rotate(1deg)}
 .result-screen .step-heading{margin-top:0;margin-bottom:24px}
 .result-screen #save-status{margin:8px 0;line-height:1.6}
 .result-screen .result-actions{margin-top:16px;margin-bottom:16px}
}
@media screen and (min-width:701px) and (max-height:700px){:root{--step-title-size:clamp(36px,7.5svh,52px)}.result-screen>div:first-child{padding-top:8px}.result-screen .step-heading{margin-bottom:16px}}
/* The print artifact is exactly 80 mm wide; screen scaling never changes it. */
@page{size:80mm 142.512mm;margin:0}
@media print{
 html,body{width:80mm!important;margin:0!important;padding:0!important;min-height:0!important;background:#fff!important}
 main,#result{display:block!important;width:80mm!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important}
 #result .receipt-wrap{display:block!important;width:80mm!important;max-width:80mm!important;height:142.512mm!important;margin:0!important;padding:0!important;outline:none!important;border:0!important;transform:none!important;box-shadow:none!important;break-inside:avoid}
 #receipt{display:block!important;width:80mm!important;height:142.512mm!important;margin:0!important;filter:grayscale(1)!important;break-inside:avoid}
}
@media screen and (min-width:701px) and (max-height:700px){:root{--step-title-size:min(clamp(32px,4.5vw,52px),7.5svh)}}

#about-dialog .keep-word{white-space:nowrap;word-break:keep-all;overflow-wrap:normal}

.form-screen>div>p.form-intro{font-size:18px;line-height:1.7;color:var(--paper);max-width:30ch;margin:16px 0 0;text-shadow:0 1px 6px #0008}

.form-screen>div>p.form-intro{max-width:none;font-size:clamp(12px,1.28vw,18px)}.form-intro>span{display:block;white-space:nowrap}
@media(max-width:700px){.form-screen>div>p.form-intro{font-size:clamp(11px,3.25vw,18px)}}

nav.stepper .step-icon{display:block;width:24px;height:24px}nav.stepper b{display:flex;justify-content:center;align-items:center}nav.stepper .step-button:not(:disabled):hover .step-icon{color:var(--pink)}
@media(max-width:700px){nav.stepper .step-icon{width:22px;height:22px}}

nav.stepper .step-icon{width:24px;height:24px}
@media(max-width:700px){nav.stepper .step-icon{width:22px;height:22px}}

/* Keep supporting descriptions consistent across steps. */
:root{--step-description-size:clamp(12px,1.28vw,18px)}
.form-screen>div>p.form-intro,#camera-options .print-note{font-size:var(--step-description-size);line-height:1.7}
@media(max-width:700px){:root{--step-description-size:clamp(11px,3.25vw,18px)}}

.receipt-transfer{width:min(430px,90vw);max-height:90svh;overflow:auto;text-align:center;padding:30px 26px 24px}.receipt-transfer h2{font:normal 40px/1.2 Than,serif;color:var(--pink);margin:12px 0 16px}.receipt-transfer p{font-size:17px;line-height:1.65;margin:12px 0}.receipt-transfer .transfer-note{font-size:13px;color:var(--muted);line-height:1.6;margin:10px 0}.receipt-transfer #transfer-qr{display:block;width:220px;max-width:100%;height:auto;margin:16px auto;border-radius:12px}.receipt-transfer #transfer-qr[hidden]{display:none}.receipt-transfer #transfer-status{font-size:16px;min-height:26px}body #scan-now{width:max-content;min-width:0;font-size:17px;padding:10px 24px;margin-top:16px}#scan-now:disabled{opacity:.6}.receipt-transfer .dialog-close{display:flex;align-items:center;justify-content:center}

/* Compact action rows and a shared, single-line heading scale. */
.result-screen .step-heading h1{white-space:nowrap}
.capture-screen .capture-review{display:flex;flex-direction:row;flex-wrap:nowrap;gap:10px;align-items:center}
.capture-screen .capture-review #retake,.capture-screen .capture-review #finish{width:auto;min-width:0;flex:0 1 auto;white-space:nowrap;margin:0;padding:10px 16px;min-height:46px;font:16px/1.4 Manop,sans-serif;gap:8px}
.result-screen .result-actions{display:flex;flex-wrap:nowrap;gap:10px;align-items:center}
.result-screen .result-actions #print,.result-screen .result-actions #download,.result-screen .result-actions #scan-now{width:auto;min-width:0;max-width:none;flex:0 1 auto;white-space:nowrap;margin:0;padding:10px 16px;min-height:46px;font:16px/1.4 Manop,sans-serif;gap:8px;justify-content:center}
.result-actions .button-icon{width:18px;height:18px;flex-basis:18px}
@media(max-width:1000px) and (min-width:701px){.result-screen .result-actions{gap:6px}.result-screen .result-actions #print,.result-screen .result-actions #download,.result-screen .result-actions #scan-now{font-size:14px;padding:9px 10px;gap:6px}}
@media(max-width:700px){:root{--step-title-size:clamp(26px,7.2vw,34px)}.result-screen .result-actions{gap:7px}.result-screen .result-actions #print,.result-screen .result-actions #download,.result-screen .result-actions #scan-now{font-size:clamp(12px,3.5vw,15px);padding:9px 10px;gap:6px;min-height:44px}.result-actions .button-icon{width:16px;height:16px;flex-basis:16px}}