:root{--ink:#092138;--paper:#fff1d1;--red:#bd271a;--lime:#b5c900}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,sans-serif;border:7px double #526170;min-height:100vh}header{min-height:90px;background:var(--ink);color:#fff7e5;display:flex;align-items:center;gap:38px;padding:12px 3%}a{color:inherit}header a{text-decoration:none}.brand{font-family:Georgia,serif;font-size:42px;font-weight:900;letter-spacing:-2px}nav{display:flex;align-items:center;gap:0;flex:1}nav>*{padding:12px 45px;border-left:1px solid #b7b5a3!important}button,input,textarea,select{font:inherit}button{cursor:pointer;color:inherit}nav button{background:none;color:inherit;border:0;font-weight:600}header>button{background:var(--lime);border:2px solid #d7e537;border-radius:12px;padding:15px 25px;font-weight:bold}main{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 160px);background:radial-gradient(ellipse at 65% 40%,#fff4db,#f9ebcb)}.work{padding:40px 8% 24px 8%;border-right:1px solid #dfd2b2}h1{font:700 54px/1.1 Georgia,serif;margin:0 0 12px;letter-spacing:-1.5px}.intro{margin:0 0 24px;padding-bottom:20px;border-bottom:1px solid #dfd2b2;font-size:18px}label,legend{font-weight:600;font-size:18px}form>label{display:block;margin:16px 0 9px}input:not([type=radio]):not([type=range]),textarea,select{width:100%;background:#fff7e5;border:1px solid var(--ink);border-radius:12px;padding:14px 18px;color:var(--ink)}textarea{height:105px;resize:vertical}fieldset{padding:0;border:0;margin:24px 0}legend{margin-bottom:12px}.moods{display:flex;gap:12px;flex-wrap:wrap}.moods label{position:relative;border:2px solid var(--lime);border-radius:30px;padding:10px 16px;font-size:15px;cursor:pointer}.moods label:has(input:checked){background:var(--lime);color:white}.moods input{position:absolute;opacity:0}.moods label:focus-within{outline:2px solid var(--ink);outline-offset:3px}input[type=range]{width:100%;accent-color:var(--red);margin:12px 0}output{display:block}.small{font-size:13px;line-height:1.5}.stamp{width:100%;background:linear-gradient(#ce2c1b,#b82013);border:3px double #ed9c70;color:#fff3d8;border-radius:19px;font:700 32px Georgia,serif;padding:19px;box-shadow:0 3px 3px #9f795c}#message{font-size:13px;min-height:30px;line-height:1.5}.preview{position:relative;display:flex;flex-direction:column;align-items:center;padding:0 5% 20px}.auditor{width:410px;height:350px;object-fit:cover;object-position:50% 5%;mix-blend-mode:multiply;margin-top:10px}.receipt{width:100%;position:relative;margin-top:-55px;padding:32px 8%;background:radial-gradient(ellipse,#fff3d3,#f2dba6);border:1px solid #d4b878;box-shadow:1px 5px 8px #654d3533;border-radius:20px 8px 35px 12px;min-height:395px}.receipt:before{content:'';position:absolute;inset:25px;border-left:1px dashed #927956;border-right:1px dashed #927956;pointer-events:none}.receipt h2{font:900 38px Georgia,serif;margin:0 0 8px}.serial{background:var(--red);color:#fff;padding:3px 8px;font:13px monospace}hr{border:0;border-top:1px dashed #aa9870;margin:17px 0}.receipt h3{margin:10px 0;font:700 20px Georgia,serif;overflow-wrap:anywhere}.receipt p{font:16px/1.5 monospace;overflow-wrap:anywhere}.approved{border:6px double var(--red);color:var(--red);font:900 clamp(16px,2.3vw,40px) Georgia,serif;padding:8px;transform:rotate(-5deg);text-align:center;margin:25px 0 5px;white-space:nowrap}.caption{font-size:15px}footer{background:var(--ink);color:#fff5e1;display:flex;justify-content:space-between;gap:20px;padding:22px 3%;font-size:14px}.logo{width:65px;height:65px;object-fit:cover}#collection{padding:35px 5%;border-top:2px solid var(--ink)}#collection>label{display:inline-block;margin:8px 20px 10px 0}#records{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}.record{border:1px solid #ac9776;background:#fff6df;padding:22px;overflow-wrap:anywhere}.record button,.actions button,.back{background:var(--ink);color:var(--paper);border:0;padding:10px 14px;margin:5px;border-radius:5px}.record small{display:block;font-family:monospace}.actions{margin-top:20px}dialog{max-width:510px;width:94%;color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:12px;padding:30px}dialog::backdrop{background:#092138bb}dialog small{display:block;margin-top:6px}dialog label{display:block;margin-top:20px}.about{padding:60px 6%;gap:6%;align-items:center}.about section{max-width:750px;line-height:1.8}.about>img{width:100%;mix-blend-mode:multiply}.back{display:inline-block;text-decoration:none}@media(min-width:1700px){.work{padding-top:50px}.auditor{width:490px;height:400px}.receipt{min-height:430px}.receipt p{font-size:18px}textarea{height:130px}}@media(max-width:1000px){header{flex-wrap:wrap;gap:15px}.brand{font-size:32px}nav>*{padding:10px 18px}h1{font-size:40px}.work{padding:30px 6%}.auditor{width:310px}.receipt{padding:25px 9%}.receipt h2{font-size:27px}.moods{gap:6px}.moods label{padding:8px}}@media(max-width:680px){body{border-width:4px}header{padding:15px;justify-content:space-between}.brand{font-size:30px}nav{order:3;flex-basis:100%;justify-content:center}nav>*{padding:8px 20px}header>button{font-size:12px;padding:10px}main{grid-template-columns:1fr}.work{border-right:0;border-bottom:1px solid #dfd2b2;padding:30px 6%}h1{font-size:38px}.intro{font-size:16px}.preview{padding:0 5% 25px}.auditor{height:300px;width:340px;max-width:100%}.receipt{margin-top:-45px}.approved{font-size:23px}footer{flex-direction:column;gap:8px;font-size:12px}.about{padding:30px 6%}.about>img{max-width:350px}.stamp{font-size:28px}}

@font-face{font-family:Instrument;src:url('/assets/InstrumentSerif-Regular.ttf') format('truetype');font-display:swap}
.brand,.receipt h2,.approved,.stamp{font-family:Instrument,Georgia,serif;font-weight:400;letter-spacing:.3px}
.brand{font-size:62px;line-height:1}.receipt h2{font-size:46px}.stamp{font-size:40px;line-height:1;padding:20px}
.auditor{object-fit:contain;mix-blend-mode:normal;position:relative;z-index:1}
.receipt{z-index:2;border:0;border-radius:0;filter:drop-shadow(1px 4px 3px #70563044);background:radial-gradient(ellipse at 4% 85%,#cda96566,transparent 16%),radial-gradient(ellipse at 96% 6%,#c29a5755,transparent 14%),repeating-linear-gradient(5deg,#b18f4b08 0 1px,transparent 1px 4px),radial-gradient(ellipse,#fff2cf,#ecd5a2);clip-path:polygon(0 4%,3% 3%,5% 0,95% 0,97% 3%,100% 4%,99% 7%,100% 10%,99% 13%,100% 16%,99% 19%,100% 22%,99% 25%,100% 28%,99% 31%,100% 34%,99% 37%,100% 40%,99% 43%,100% 46%,99% 49%,100% 52%,99% 55%,100% 58%,99% 61%,100% 64%,99% 67%,100% 70%,99% 73%,100% 76%,99% 79%,100% 82%,99% 85%,100% 88%,99% 91%,100% 94%,97% 96%,95% 100%,87% 99%,80% 100%,73% 99%,66% 100%,59% 99%,52% 100%,45% 99%,38% 100%,31% 99%,24% 100%,17% 99%,5% 100%,3% 97%,0 96%,1% 93%,0 90%,1% 87%,0 84%,1% 81%,0 78%,1% 75%,0 72%,1% 69%,0 66%,1% 63%,0 60%,1% 57%,0 54%,1% 51%,0 48%,1% 45%,0 42%,1% 39%,0 36%,1% 33%,0 30%,1% 27%,0 24%,1% 21%,0 18%,1% 15%,0 12%,1% 9%)}
.approved{font-size:clamp(22px,3vw,53px);border-radius:7px;line-height:1.05}
@media(max-width:680px){.brand{font-size:38px}.receipt h2{font-size:36px}.approved{font-size:29px}.stamp{font-size:34px}}

.preview .auditor{content:url('/assets/auditor-cutout.png');width:510px;height:395px;object-fit:cover;object-position:center 12%;max-width:100%}
@media(min-width:1700px){.preview .auditor{width:560px;height:395px}}
@media(max-width:680px){.preview .auditor{width:340px;height:300px;object-fit:contain}}

@font-face{font-family:CopeDisplay;src:url('/assets/BodoniModa.ttf') format('truetype');font-weight:400 900;font-display:swap}
.brand,.receipt h2,.approved,.stamp{font-family:CopeDisplay,Georgia,serif;font-weight:900}
.brand{font-size:58px;letter-spacing:-2.5px;transform:scaleX(.8);transform-origin:left center;margin-right:-65px;white-space:nowrap}
.receipt h2{font-size:42px;letter-spacing:-1px}.stamp{font-size:36px;letter-spacing:-.8px}
.approved{font-size:clamp(22px,2.8vw,49px);letter-spacing:-1.7px;border:7px double var(--red);transform:rotate(-5deg);background:repeating-linear-gradient(173deg,transparent 0 6px,#fff1d130 7px 8px)}
@media(max-width:1000px){.brand{font-size:43px;margin-right:-45px}.receipt h2{font-size:32px}}
@media(max-width:680px){.brand{font-size:34px;margin-right:-43px;letter-spacing:-1.8px}.receipt h2{font-size:32px}.approved{font-size:25px;letter-spacing:-1px}.stamp{font-size:30px}}
