@import url('/fonts.css');

:root{--paper:#f7f5ed;--ink:#24251f;--muted:#797a70;--line:#d9d9cc;--lime:#d6fb52;--purple:#b5a0e0;--orange:#eaa471;--display:'Booth Display',Impact,'Arial Narrow',sans-serif;--body:'Booth Sans',Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:14px}button,input,a{-webkit-tap-highlight-color:transparent}button,a,input{touch-action:manipulation}button,a{-webkit-user-select:none;user-select:none}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed}a{color:inherit;text-decoration:none}[hidden]{display:none!important}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #7960bf;outline-offset:5px}.svg-definitions{position:absolute;width:0;height:0;overflow:hidden}.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.site-header{max-width:1360px;margin:0 auto;padding:25px 44px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:24px}.brand{display:flex;gap:12px;align-items:center;font-weight:900;font-size:22px;letter-spacing:-1px;line-height:1.1}.brand-face{display:block;width:43px;height:46px;background:var(--lime);border:1.5px solid var(--ink);border-radius:9px;transform:rotate(-5deg);padding:4px}.brand-face svg{width:100%;height:100%;color:var(--ink);stroke:var(--lime);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.brand-caption{display:block;letter-spacing:1.5px;font-size:8px;font-weight:600;margin-top:6px}.header-note{font-size:10px;font-weight:700;letter-spacing:1.5px;display:flex;align-items:center;gap:8px}.status-dot{width:7px;height:7px;background:var(--ink);border-radius:50%}.header-link{display:flex;gap:12px;align-items:center;font-size:11px;font-weight:800}.header-link .icon{width:17px}main{max-width:1272px;padding:0 28px;margin:auto}.hero{padding:54px 4px 46px;display:flex;justify-content:space-between;gap:20px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.7px;display:flex;gap:9px;align-items:center;margin-bottom:18px}.tiny-star{font-size:20px;line-height:1}.hero h1{font-family:var(--display);font-size:clamp(64px,7.4vw,105px);font-weight:800;letter-spacing:-1px;line-height:.94;margin:0}.hero h1 span{position:relative;display:inline-block;z-index:0}.hero h1 span:after{content:'';position:absolute;left:-2px;right:-8px;bottom:-1px;height:21%;background:var(--lime);transform:rotate(-1deg);z-index:-1}.hero p{font-size:15px;line-height:1.65;color:#63655a;margin:22px 0 0}.hero-doodle{position:relative;align-self:center;width:250px;height:240px;margin:0 24px 0 0;transform:rotate(9deg)}.hero-face{width:190px;height:190px;position:absolute;left:22px;top:22px;color:var(--purple);stroke:var(--ink);stroke-width:2.7;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(4px 4px 0 #24251f)}.doodle-label{position:absolute;right:0;top:0;font-family:var(--display);font-size:23px;letter-spacing:.7px;transform:rotate(-17deg);z-index:1}.doodle-star{position:absolute;width:66px;height:66px;right:-20px;bottom:18px;fill:var(--lime);stroke:var(--ink);stroke-width:1.7;transform:rotate(13deg)}.doodle-arrow{font-size:78px;position:absolute;left:-23px;bottom:15px;transform:rotate(-7deg)}.booth{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--ink);border-radius:12px;overflow:hidden;background:#fffef9;box-shadow:5px 5px 0 #e3e4d7}.photo-panel{border-right:1px solid var(--line);min-width:0}.panel-heading{height:57px;padding:0 23px;display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid var(--line);font-size:10px;font-weight:800;letter-spacing:1px}.panel-heading>span:first-child{display:flex;gap:10px;align-items:center}.step-number{display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--ink);border-radius:50%;font-size:9px;letter-spacing:0}.panel-caption{font-size:8px;font-weight:600;color:var(--muted);letter-spacing:1px}.photo-stage{position:relative;height:482px;margin:20px;background:#eeeee5;border:1px dashed #c8cabe;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}.photo-stage.has-photo{background:#deded4;border-style:solid}.photo-stage.dragging{background:#e8f7bc;outline:3px solid var(--lime);outline-offset:-5px}.empty-state{text-align:center;width:100%;padding:20px}.photo-illustration{position:relative;width:115px;height:131px;background:#fbfaf4;border:1.5px solid var(--ink);border-radius:7px;transform:rotate(-7deg);margin:4px auto 25px;box-shadow:4px 4px 0 #d0d0c2;padding:12px}.photo-illustration svg{width:100%;height:100%;color:var(--lime);stroke:var(--ink);stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round}.illustration-star{position:absolute;right:-21px;top:-15px;font-size:45px;color:var(--ink);transform:rotate(15deg)}h2{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:.3px;margin:0}.empty-state p{color:#7a7c6e;font-size:12px;line-height:1.7;margin:11px 0 25px}.button{display:flex;gap:10px;align-items:center;justify-content:center;min-height:47px;padding:13px 20px;border:1.5px solid var(--ink);border-radius:5px;font-size:11px;font-weight:800;letter-spacing:.5px;transition:transform .15s,box-shadow .15s,background .15s}.button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 3px 0 var(--ink)}.button:active:not(:disabled){transform:translateY(1px);box-shadow:none}.button-dark{background:var(--ink);color:var(--paper)}.empty-state .button{margin:auto;width:210px}.upload-link{background:none;border:0;display:flex;align-items:center;gap:7px;margin:17px auto 21px;color:#55584c;font-size:12px}.upload-link .icon{width:15px;height:15px}.upload-link span{margin-left:4px;font-size:17px}.upload-link:hover{text-decoration:underline}.file-hint{font-size:8px;color:#949588;letter-spacing:1px}.photo-preview{width:100%;height:100%;object-fit:contain}.photo-toolbar{display:flex;position:absolute;top:13px;left:13px;right:13px;justify-content:space-between;gap:5px}.small-button{display:flex;gap:6px;align-items:center;font-weight:800;font-size:9px;border:1px solid var(--ink);border-radius:4px;padding:8px 10px;background:var(--paper)}.small-button .icon{width:14px;height:14px}.photo-badge{position:absolute;bottom:14px;left:14px;padding:7px 10px;background:var(--lime);border:1px solid var(--ink);font-weight:800;font-size:8px;letter-spacing:1px;transform:rotate(-3deg)}.compare-button{position:absolute;bottom:14px;right:12px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:4px;padding:9px 10px;font-size:8px;font-weight:700;letter-spacing:.5px;touch-action:none}.photo-footer{display:flex;gap:8px;align-items:center;padding:0 22px 19px;font-size:9px;color:#818374}.photo-footer .icon{width:14px;height:14px}.controls-content{padding:28px 26px 23px}.style-fieldset{border:0;padding:0;margin:0}.style-fieldset legend{font-size:10px;font-weight:800;letter-spacing:.8px;margin-bottom:15px}.style-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.style-card{position:relative;cursor:pointer;min-width:0}.style-card input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.style-content{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:154px;border:1px solid var(--line);border-radius:6px;padding:10px 4px;background:#f9f8f2;transition:background .15s,border-color .15s;pointer-events:none}.style-card input:checked+.style-content{background:#ecf7cd;border:1.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}.style-card input:focus-visible+.style-content{outline:3px solid #7960bf;outline-offset:4px}.style-face{width:75px;height:80px;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;margin:0 0 10px}.goblin{color:#bad770}.bighead{color:var(--purple)}.fisheye{color:var(--orange)}.style-content strong{font-size:10px;font-weight:800;margin-bottom:6px}.style-content>span:not(.checkmark){font-size:8px;color:#858578;text-align:center}.checkmark{position:absolute;top:6px;right:7px;background:var(--ink);color:#ecf7cd;border-radius:50%;width:14px;height:14px;display:none;align-items:center;justify-content:center;font-size:9px}.style-card input:checked+.style-content .checkmark{display:flex}.intensity-control{margin:30px 0 24px}.slider-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:13px}.slider-heading label{font-size:10px;font-weight:800;letter-spacing:.7px}.slider-heading output{font-family:var(--display);font-size:30px;line-height:1}.slider-heading output span{font-size:18px;margin-left:2px}input[type=range]{width:100%;height:8px;display:block;margin:12px 0 15px;appearance:none;-webkit-appearance:none;border:1px solid var(--ink);border-radius:10px;background:linear-gradient(to right,var(--lime) 0%,var(--lime) 61%,#e5e5dc 61%,#e5e5dc 100%);cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:22px;height:22px;background:var(--ink);border:4px solid var(--lime);box-shadow:0 0 0 1.5px var(--ink);border-radius:50%;cursor:grab}input[type=range]::-moz-range-thumb{width:14px;height:14px;background:var(--ink);border:4px solid var(--lime);box-shadow:0 0 0 1.5px var(--ink);border-radius:50%;cursor:grab}.range-labels{display:flex;justify-content:space-between;font-size:8px;color:#818374}.intensity-description{margin-top:15px;font-size:10px;font-style:italic;color:#636656}.generate-button{width:100%;background:var(--lime);color:var(--ink);min-height:54px;justify-content:space-between}.generate-button>span{flex:1}.generate-button:disabled{background:#e9eddd;color:#979b8b;border-color:#c6cbb9;opacity:.9}.generation-note{text-align:center;font-size:9px;color:#8c8e7f;margin:12px 0 24px}.booth-receipt{border-top:1px dashed #cdcfbe;padding-top:20px;position:relative}.booth-receipt>span:first-child{font-size:8px;letter-spacing:1px;font-weight:700;color:#777b68}.booth-receipt p{font-size:10px;line-height:1.6;max-width:250px;color:#939583;margin:6px 0 0}.receipt-face{font-family:var(--display);position:absolute;right:5px;top:23px;font-size:36px;transform:rotate(12deg);color:#a8ad95}.result-actions{display:grid;grid-template-columns:1.3fr 1fr;gap:10px;margin:0 0 15px}.result-actions .button{font-size:9px;padding:10px;min-height:43px}.button-outline{background:transparent;color:var(--ink)}.saved-note{grid-column:1/-1;font-size:9px;line-height:1.5;color:#7d806e;margin:0}.error-message{font-size:12px;line-height:1.5;color:#924434;background:#f9e4dd;border:1px solid #ddb1a3;border-radius:4px;padding:10px}.generating-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#f7f5edef;backdrop-filter:blur(6px)}.spinning-face{width:100px;height:100px;color:var(--lime);stroke:var(--ink);stroke-width:2.5;animation:wobble 1.2s infinite ease-in-out}.generating-overlay h3{font-family:var(--display);font-size:27px;margin:24px 0 0}.generating-overlay p{color:#797c6d;font-size:12px}.how-it-works{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:37px 4px 41px}.how-it-works>div{display:grid;grid-template-columns:36px 1fr;gap:0 10px}.how-it-works>div>span{font-family:var(--display);font-size:22px;color:#a8ab96;grid-row:1/3}.how-it-works strong{font-size:10px;letter-spacing:.6px;padding-top:4px}.how-it-works p{font-size:10px;color:#8b8e7a;line-height:1.6;margin:6px 0 0}footer{border-top:1px solid var(--line);padding:25px 4px 29px;display:flex;align-items:center;justify-content:space-between;gap:16px;color:#919581;font-size:8px;letter-spacing:.4px}footer>a{color:#565b46;font-weight:800;font-size:11px;letter-spacing:-.3px}.footer-star{font-size:18px;vertical-align:middle;margin-left:10px}.recent-section{margin-top:40px}.recent-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:19px}.recent-heading h2{font-size:27px}.recent-heading h2 span{display:block;font-family:var(--body);font-size:8px;font-weight:500;letter-spacing:1px;color:var(--muted);margin-top:8px}.text-button{border:0;background:none;color:var(--muted);font-size:8px;text-decoration:underline}.recent-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}.recent-card{padding:7px;background:#fffef9;border:1px solid var(--ink);border-radius:4px;box-shadow:2px 2px 0 #d5d7c7;transition:transform .2s}.recent-card:hover{transform:rotate(-3deg)}.recent-card img{width:100%;height:145px;object-fit:cover;background:#e9eadf;border-radius:2px}.recent-card span{display:block;font-size:8px;font-weight:700;letter-spacing:.5px;padding:9px 2px 4px}.history-note{font-size:9px;color:var(--muted);line-height:1.6;margin-top:15px}dialog{border:1.5px solid var(--ink);border-radius:12px;padding:22px;background:var(--paper);width:min(540px,calc(100vw - 24px));max-height:calc(100dvh - 30px)}dialog::backdrop{background:#24251fa8;backdrop-filter:blur(5px)}.camera-heading{display:flex;gap:15px;justify-content:space-between;align-items:center;margin-bottom:15px}.camera-heading h2{font-size:25px}.close-button{border:1px solid var(--ink);background:transparent;border-radius:50%;font-size:22px;width:30px;height:30px;line-height:1}.camera-view{position:relative;background:var(--ink);width:100%;aspect-ratio:4/3;border-radius:6px;overflow:hidden}.camera-view video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.camera-view.rear video{transform:none}.face-guide{width:45%;height:78%;position:absolute;top:11%;left:27.5%;border:2px dashed #d6fb5277;border-radius:50%;pointer-events:none}.camera-view p{position:absolute;bottom:8px;left:12px;right:12px;text-align:center;background:#24251fbb;color:var(--paper);font-size:11px;border-radius:4px;padding:9px;line-height:1.5}.camera-controls{display:flex;gap:12px;margin-top:17px}.camera-controls .button{flex:1;justify-content:center;font-size:10px}.camera-help{font-size:10px;line-height:1.6;color:var(--muted);text-align:center;margin:13px 0 0}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 30px);background:var(--ink);color:var(--paper);padding:13px 20px;border:1px solid var(--lime);border-radius:5px;font-size:12px;box-shadow:3px 3px 0 var(--lime);z-index:10}.busy .style-fieldset,.busy .intensity-control{pointer-events:none;opacity:.6}@keyframes wobble{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg) scale(1.12)}}
@media(min-width:1440px){main{max-width:1230px}.hero{padding-top:62px}.hero h1{font-size:105px}.photo-stage{height:490px}}
@media(max-width:1000px){.site-header{padding:20px 28px}.hero h1{font-size:80px}.hero-doodle{margin-right:10px;width:200px;height:210px}.hero-face{width:165px;height:165px;left:10px;top:30px}.doodle-star{width:50px;height:50px;right:0}.doodle-label{font-size:19px}.doodle-arrow{font-size:65px}.controls-content{padding:25px 20px 20px}.style-grid{gap:7px}.style-content{min-height:143px}.style-content strong{font-size:9px}.style-content>span:not(.checkmark){font-size:7px}.style-face{width:65px;height:70px}.panel-heading{padding:0 18px}.panel-caption{font-size:7px}.photo-stage{margin:16px;height:465px}.range-labels{font-size:7px}.recent-grid{grid-template-columns:repeat(4,1fr)}footer>span:nth-child(2){max-width:220px;text-align:center;line-height:1.7}}
@media(max-width:720px){.site-header{padding:18px 20px}.brand{font-size:19px}.brand-face{width:36px;height:40px}.brand-caption{font-size:6px;letter-spacing:1.2px}.header-note{display:none}.header-link{font-size:9px;gap:6px}main{padding:0 18px}.hero{padding:34px 0 32px}.hero h1{font-size:clamp(50px,10vw,75px);letter-spacing:0}.eyebrow{font-size:8px;letter-spacing:1px;margin-bottom:15px}.hero p{font-size:12px;margin-top:18px}.hero-doodle{display:none}.booth{grid-template-columns:1fr;box-shadow:3px 3px 0 #e3e4d7}.photo-panel{border-right:0;border-bottom:1.5px solid var(--ink)}.photo-stage{height:420px;margin:16px}.photo-footer{font-size:8px;padding:0 17px 15px}.panel-heading{height:51px;font-size:9px}.panel-caption{font-size:7px}.controls-content{padding:23px 20px}.style-content{min-height:148px}.style-content strong{font-size:10px}.style-content>span:not(.checkmark){font-size:8px}.style-face{width:72px;height:76px}.intensity-control{margin-top:26px}.range-labels{font-size:8px}.booth-receipt p{max-width:75%}.how-it-works{gap:23px;grid-template-columns:1fr;padding:32px 3px}.how-it-works>div{grid-template-columns:35px 1fr}.how-it-works p{font-size:11px}.how-it-works strong{font-size:11px}footer{flex-wrap:wrap;padding:20px 3px}footer>a{flex-basis:45%}footer>span:nth-child(2){order:3;max-width:none;text-align:left;flex-basis:100%;font-size:7px}footer>span:last-child{font-size:7px}.footer-star{margin-left:4px}.recent-grid{grid-template-columns:repeat(3,1fr);gap:9px}.recent-card img{height:120px}.recent-heading h2{font-size:24px}.recent-heading h2 span{font-size:6px;letter-spacing:.6px}.camera-heading h2{font-size:21px}dialog{padding:16px}.compare-button{font-size:7px}.photo-badge{font-size:7px}}
@media(max-width:370px){.style-content>span:not(.checkmark){font-size:7px}.style-content strong{font-size:8px}.style-face{width:60px}.slider-heading label{font-size:9px}.photo-stage{height:375px}.hero h1{font-size:48px}.result-actions .button{font-size:8px;gap:6px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}