:root{--paper:#f4efe4;--paper-2:#ece5d6;--ink:#1c1813;--ink-soft:#5b5347;--ink-faint:#8d8473;--line:#d8cfbd;--line-strong:#c7bba3;--accent:#e0532f;--accent-deep:#b53d1d;--good:#2f7d54;--card:#fbf8f1;--shadow:0 1px 0 #fff8 inset, 0 18px 40px -28px #4a3c2a55;--r:14px;--font-display:"Fraunces", Georgia, serif;--font-body:"Hanken Grotesk", system-ui, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, monospace}*{box-sizing:border-box}html{scroll-behavior:smooth}body{min-height:100vh;font-family:var(--font-body);color:var(--ink);background:radial-gradient(120% 90% at 85% -10%, #fff7ea 0%, transparent 55%), radial-gradient(90% 70% at -5% 110%, #f0e7d4 0%, transparent 50%), var(--paper);-webkit-font-smoothing:antialiased;margin:0}.grain{pointer-events:none;z-index:0;background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);opacity:.28;background-size:28px 28px,28px 28px;position:fixed;inset:0;-webkit-mask-image:radial-gradient(120% 120% at 50% 30%,#000 30%,#0000 90%);mask-image:radial-gradient(120% 120% at 50% 30%,#000 30%,#0000 90%)}.grain:after{content:"";opacity:.04;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");position:absolute;inset:0}.masthead{z-index:1;border-bottom:1.5px solid var(--line-strong);align-items:center;gap:22px;max-width:1240px;margin:0 auto;padding:40px 32px 22px;display:flex;position:relative}.mast-text{flex:1}.mast-text h1{font-family:var(--font-display);letter-spacing:-.02em;margin:0;font-size:clamp(28px,4.6vw,46px);font-weight:600;line-height:.95}.mast-text h1 em{color:var(--accent);font-style:italic;font-weight:400}.mast-text p{color:var(--ink-soft);max-width:52ch;margin:8px 0 0;font-size:15px}.mark{background:var(--ink);border-radius:10px;flex:none;grid-template-columns:repeat(3,1fr);gap:4px;width:54px;height:54px;padding:7px;display:grid;box-shadow:0 10px 22px -14px #1c1813aa}.mark span{background:var(--paper);border-radius:2px;animation:.5s backwards pop}.mark span:nth-child(2),.mark span:nth-child(4),.mark span:nth-child(6),.mark span:nth-child(8){background:var(--accent)}.mark span:first-child{animation-delay:20ms}.mark span:nth-child(2){animation-delay:60ms}.mark span:nth-child(3){animation-delay:.1s}.mark span:nth-child(4){animation-delay:.14s}.mark span:nth-child(5){animation-delay:.18s}.mark span:nth-child(6){animation-delay:.22s}.mark span:nth-child(7){animation-delay:.26s}.mark span:nth-child(8){animation-delay:.3s}.mark span:nth-child(9){animation-delay:.34s}@keyframes pop{0%{opacity:0;transform:scale(0)}}.ghost-btn{font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink);border:1.5px solid var(--ink);cursor:pointer;background:0 0;border-radius:999px;flex:none;padding:10px 18px;font-size:12px;transition:all .18s}.ghost-btn:hover{background:var(--ink);color:var(--paper);transform:translateY(-1px)}.layout{z-index:1;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);align-items:start;gap:34px;max-width:1240px;margin:0 auto;padding:30px 32px 10px;display:grid;position:relative}form{flex-direction:column;gap:20px;display:flex}.card{border:1.5px solid var(--line-strong);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow);grid-template-columns:1fr 1fr;gap:16px 18px;min-inline-size:0;margin:0;padding:22px 22px 24px;animation:.6s cubic-bezier(.2,.7,.2,1) backwards rise;display:grid;position:relative}.card:first-of-type{animation-delay:50ms}.card:nth-of-type(2){animation-delay:.12s}.card:nth-of-type(3){animation-delay:.19s}.card:nth-of-type(4){animation-delay:.26s}@keyframes rise{0%{opacity:0;transform:translateY(14px)}}legend{font-family:var(--font-display);letter-spacing:-.01em;grid-column:1/-1;align-items:center;gap:10px;margin-bottom:2px;padding:0;font-size:19px;font-weight:600;display:flex}.idx{font-family:var(--font-mono);color:var(--accent);letter-spacing:.05em;background:#e0532f1a;border:1px solid #e0532f3d;border-radius:6px;padding:3px 7px;font-size:11px;font-weight:700}.field{flex-direction:column;gap:6px;min-inline-size:0;display:flex}.field.span2{grid-column:1/-1}label{letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);font-size:12px;font-weight:600}label abbr{color:var(--accent);text-decoration:none}input[type=text],input[type=number],input[type=date],select{font-family:var(--font-body);color:var(--ink);background:var(--paper);border:1.5px solid var(--line-strong);border-radius:9px;width:100%;padding:11px 13px;font-size:15px;transition:border-color .16s,box-shadow .16s,background .16s}input::placeholder{color:var(--ink-faint)}input:focus,select:focus{border-color:var(--accent);background:#fff;outline:none;box-shadow:0 0 0 3px #e0532f29}#iban{font-family:var(--font-mono);letter-spacing:.02em}.field.color .swatch{background:var(--paper);border:1.5px solid var(--line-strong);border-radius:9px;align-items:center;gap:10px;padding:5px 11px 5px 5px;display:flex}input[type=color]{cursor:pointer;background:0 0;border:none;border-radius:7px;block-size:32px;inline-size:38px;padding:0}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:1px solid #0002;border-radius:6px}.swatch code{font-family:var(--font-mono);color:var(--ink-soft);text-transform:uppercase;font-size:13px}.field.checkbox label{text-transform:none;letter-spacing:0;color:var(--ink);cursor:pointer;flex-direction:row;align-items:center;gap:9px;font-size:14px}input[type=checkbox]{accent-color:var(--accent);block-size:17px;inline-size:17px}.field.range output{font-family:var(--font-mono);color:var(--accent-deep);font-weight:700}input[type=range]{appearance:none;background:var(--line-strong);border-radius:4px;width:100%;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);border:3px solid var(--card);width:20px;height:20px;box-shadow:0 2px 8px -2px var(--accent-deep);cursor:pointer;border-radius:50%}input[type=range]::-moz-range-thumb{background:var(--accent);border:3px solid var(--card);cursor:pointer;border-radius:50%;width:16px;height:16px}.segmented{background:var(--paper);border:1.5px solid var(--line-strong);border-radius:10px;grid-template-columns:repeat(4,1fr);gap:6px;padding:5px;display:grid}.segmented button{font-family:var(--font-mono);color:var(--ink-soft);cursor:pointer;background:0 0;border:none;border-radius:7px;padding:9px 0;font-size:14px;font-weight:700;transition:all .16s}.segmented button:hover{color:var(--ink)}.segmented button.on{background:var(--ink);color:var(--paper);box-shadow:0 4px 12px -6px #1c1813}.preview{flex-direction:column;gap:18px;animation:.6s cubic-bezier(.2,.7,.2,1) .22s backwards rise;display:flex;position:sticky;top:24px}.specimen{background:var(--card);border:1.5px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--shadow);padding:24px}.qr-stage{border-radius:10px;padding:6px;display:block}.qr-stage svg{width:100%;height:auto;display:block}.qr-stage.checker{background-image:linear-gradient(45deg,#00000010 25%,#0000 25%),linear-gradient(-45deg,#00000010 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#00000010 75%),linear-gradient(-45deg,#0000 75%,#00000010 75%);background-position:0 0,0 9px,9px -9px,-9px 0;background-size:18px 18px}.specimen-foot{border-top:1.5px dashed var(--line-strong);justify-content:space-between;align-items:baseline;margin-top:18px;padding-top:14px;display:flex}.specimen-foot .amt{font-family:var(--font-display);letter-spacing:-.01em;font-size:26px;font-weight:600}.specimen-foot .vs{font-family:var(--font-mono);color:var(--ink-soft);letter-spacing:.04em;font-size:12px}.error{color:var(--accent-deep);border:1px solid #e0532f33;border-left:3px solid var(--accent);background:#e0532f12;border-radius:8px;margin-top:14px;padding:10px 13px;font-size:13.5px}.exports{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.exp{font-family:var(--font-body);background:var(--card);border:1.5px solid var(--line-strong);cursor:pointer;box-shadow:var(--shadow);border-radius:11px;flex-direction:column;align-items:flex-start;gap:1px;padding:13px 14px;transition:all .16s;display:flex}.exp strong{font-family:var(--font-mono);letter-spacing:.02em;font-size:15px}.exp small{color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em;font-size:11px}.exp:not(:disabled):hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 14px 26px -18px #1c1813}.exp:not(:disabled):active{transform:translateY(0)}.exp:disabled{opacity:.42;cursor:not-allowed}.exp.done{border-color:var(--good);background:#2f7d540f}.exp.done small{color:var(--good)}.inspect{background:var(--card);border:1.5px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--shadow);padding:20px 22px 22px}.inspect-head{justify-content:space-between;align-items:baseline;margin-bottom:14px;display:flex}.inspect-head h2{font-family:var(--font-display);letter-spacing:-.01em;margin:0;font-size:20px;font-weight:600}.bytes{font-family:var(--font-mono);color:var(--ink-faint);letter-spacing:.02em;font-size:11px}.decoded{border-collapse:collapse;width:100%}.decoded tr{border-bottom:1px solid var(--line)}.decoded tr:last-child{border-bottom:none}.decoded tr.empty{opacity:.4}.decoded td{vertical-align:top;padding:7px 0}.decoded .k{letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft);width:44%;font-size:12px;font-weight:600}.decoded .val{font-family:var(--font-mono);color:var(--ink);word-break:break-word;font-size:13.5px}.raw{margin-top:14px}.raw summary{cursor:pointer;color:var(--ink);padding:8px 0;font-size:13px;font-weight:600;list-style:none}.raw summary::-webkit-details-marker{display:none}.raw summary:before{content:"▸";color:var(--accent);margin-right:8px;transition:transform .15s;display:inline-block}.raw[open] summary:before{transform:rotate(90deg)}.raw summary small{color:var(--ink-faint);font-weight:400}.mono{font-family:var(--font-mono);color:var(--ink);background:var(--paper);border:1px solid var(--line-strong);white-space:pre-wrap;word-break:break-all;border-radius:9px;max-height:200px;margin:4px 0 0;padding:13px 15px;font-size:12px;line-height:1.65;overflow:auto}.tab{color:var(--accent);opacity:.55;padding:0 2px;font-weight:700}.footer{z-index:1;border-top:1.5px solid var(--line-strong);max-width:1240px;color:var(--ink-faint);margin:26px auto 0;padding:22px 32px 40px;font-size:13px;position:relative}.footer code{font-family:var(--font-mono);color:var(--ink-soft);background:var(--paper-2);border-radius:5px;padding:2px 6px;font-size:12px}@media (width<=920px){.layout{grid-template-columns:1fr}.preview{position:static}.masthead{flex-wrap:wrap}}@media (width<=560px){.card{grid-template-columns:1fr}.field.span2{grid-column:auto}.masthead,.layout,.footer{padding-left:18px;padding-right:18px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}