@font-face{font-family:Caveat;font-weight:400;font-display:swap;src:url(/fonts/caveat-latin-400-normal.woff2) format("woff2")}@font-face{font-family:Caveat;font-weight:500;font-display:swap;src:url(/fonts/caveat-latin-500-normal.woff2) format("woff2")}@font-face{font-family:Caveat;font-weight:600;font-display:swap;src:url(/fonts/caveat-latin-600-normal.woff2) format("woff2")}@font-face{font-family:Permanent Marker;font-weight:400;font-display:swap;src:url(/fonts/permanent-marker-latin-400-normal.woff2) format("woff2")}@font-face{font-family:Michroma;font-weight:400;font-display:swap;src:url(/fonts/michroma-latin-400-normal.woff2) format("woff2")}@font-face{font-family:Barlow Semi Condensed;font-weight:500;font-display:swap;src:url(/fonts/barlow-semi-condensed-latin-500-normal.woff2) format("woff2")}@font-face{font-family:Barlow Semi Condensed;font-weight:600;font-display:swap;src:url(/fonts/barlow-semi-condensed-latin-600-normal.woff2) format("woff2")}@font-face{font-family:Barlow Semi Condensed;font-weight:700;font-display:swap;src:url(/fonts/barlow-semi-condensed-latin-700-normal.woff2) format("woff2")}@font-face{font-family:Barlow Semi Condensed;font-weight:800;font-display:swap;src:url(/fonts/barlow-semi-condensed-latin-800-normal.woff2) format("woff2")}@font-face{font-family:Barlow Semi Condensed;font-weight:700;font-style:italic;font-display:swap;src:url(/fonts/barlow-semi-condensed-latin-700-italic.woff2) format("woff2")}:root{--room: #0d0a08;--paper: #fbf9f2;--ink: #1f2c6e;--rule: rgba(40, 90, 170, .32);--head: #c8321f;--kraft: #c49e66}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--room);overflow:hidden;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}#stage{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}#veil{position:fixed;inset:0;background:#000;pointer-events:none;transition:opacity 1.4s ease .2s;z-index:5}#veil.off{opacity:0}.held{position:fixed;inset:0;z-index:10;display:grid;place-items:center;background:#0805038c;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .25s ease}.held.on{opacity:1;pointer-events:auto}.held .sheet{transform:translateY(40px) rotate(-2deg) scale(.96);transition:transform .38s cubic-bezier(.2,.9,.25,1.05)}.held.on .sheet{transform:translateY(0) rotate(-.8deg) scale(1)}.jcard{--cw: min(92vw, 860px, calc((100vh - 40px)*1.36) );width:var(--cw);box-shadow:0 30px 60px #0000008c,0 6px 14px #0006;background:var(--paper);color:var(--ink);border-radius:2px;position:relative}.jcard .spine{display:flex;align-items:center;gap:2.4%;height:calc(var(--cw) * .122);border-bottom:1px dashed rgba(0,0,0,.18);padding:0 2.6% 0 0}.jcard .spine .band{align-self:stretch;width:15%;background:var(--head);display:grid;place-items:center;color:#fff;font:700 calc(var(--cw) * .036) "Barlow Semi Condensed",sans-serif}.jcard input,.jcard textarea{border:0;outline:0;background:transparent;color:inherit;width:100%;padding:0;margin:0;resize:none;caret-color:currentColor}.jcard .title{font:400 calc(var(--cw) * .05) "Permanent Marker",cursive;line-height:1}.jcard .inside{padding:2.4% 3.4% 2.6%;display:grid;grid-template-columns:1fr 1fr;column-gap:4%}.jcard .brandline{grid-column:1 / -1;display:flex;justify-content:space-between;font:700 max(9px,calc(var(--cw) * .016)) "Barlow Semi Condensed",sans-serif;letter-spacing:.06em;color:var(--head);margin-bottom:1.2%}.jcard .col{position:relative;--lh: max(18px, calc(var(--cw) * .042))}.jcard .col .side{position:absolute;left:0;top:0;font:800 calc(var(--lh) * .82) "Barlow Semi Condensed",sans-serif;color:var(--head);line-height:var(--lh)}.jcard textarea{font:500 calc(var(--lh) * .8) "Caveat",cursive;line-height:var(--lh);height:calc(var(--lh) * 10);background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--lh) - 1px),var(--rule) calc(var(--lh) - 1px),var(--rule) var(--lh));background-attachment:local;text-indent:calc(var(--lh) * .9);overflow:hidden}.jcard .note{grid-column:1 / -1;display:flex;gap:2%;align-items:baseline;margin-top:1.2%;font:600 max(9px,calc(var(--cw) * .015)) "Barlow Semi Condensed",sans-serif;color:var(--head);letter-spacing:.05em}.jcard .note input{font:500 max(16px,calc(var(--cw) * .03)) "Caveat",cursive;color:var(--ink);border-bottom:1px solid var(--rule)}.jcard.dark{--paper: #1a1917;--ink: #f3ead2;--rule: rgba(201, 165, 74, .45);--head: #c9a54a}.jcard.readonly input,.jcard.readonly textarea{pointer-events:none}.label{width:min(90vw,560px);background:#fbfaf5;color:#2b2b2b;border-radius:3px;padding:22px 24px 20px;box-shadow:0 30px 60px #0000008c,0 6px 14px #0006;outline:3px solid #2b2b2b;outline-offset:-10px;position:relative;font-family:Barlow Semi Condensed,sans-serif}.label .to{display:flex;gap:12px;align-items:baseline;font-weight:700;font-size:20px}.label .to input{flex:1;border:0;outline:0;background:transparent;border-bottom:2px solid rgba(0,0,0,.2);font:400 clamp(24px,6vw,38px) "Permanent Marker",cursive;color:#1f2c6e;padding:2px 0}.label .body{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:end;margin-top:18px}.label .tapename{font:500 clamp(20px,4.4vw,30px) "Caveat",cursive;color:#1f2c6e;min-height:1.2em}.label .from{display:flex;gap:12px;align-items:baseline;margin-top:6px;font-weight:600;font-size:15px}.label .from input{flex:1;border:0;outline:0;background:transparent;border-bottom:2px solid rgba(0,0,0,.14);font:400 clamp(20px,4.6vw,28px) "Permanent Marker",cursive;color:#1f2c6e;padding:2px 0}.label .send{min-width:0}.label .link{display:block;width:100%;margin-top:6px;padding:4px 0;border:0;border-bottom:1px solid rgba(31,78,163,.35);background:transparent;font:600 clamp(13px,3.2vw,16px) "Barlow Semi Condensed",sans-serif;color:#1f4ea3;text-overflow:ellipsis;outline:0}.label .link:focus-visible{outline:2px solid #1f4ea3;outline-offset:3px}.label .acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.label .act{-webkit-appearance:none;appearance:none;min-height:44px;padding:0 18px;border:0;border-radius:3px;background:#1f2c6e;color:#fbf9f2;font:700 17px/1 Barlow Semi Condensed,sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}.label .act+.act{background:transparent;color:#1f2c6e;box-shadow:inset 0 0 0 2px #1f2c6e}.label .act:disabled{opacity:.4;cursor:default}.label .act[hidden]{display:none}.label .act:focus-visible{outline:2px solid #1f4ea3;outline-offset:3px}.label canvas.qr{width:clamp(110px,26vw,150px);height:clamp(110px,26vw,150px);image-rendering:pixelated}.label .meter{height:14px;margin-top:16px;background-image:radial-gradient(circle,rgba(200,50,31,.9) 2.2px,transparent 2.6px);background-size:10px 14px;background-repeat:repeat-x;clip-path:inset(0 calc(100% - var(--p, 0%)) 0 0);transition:clip-path .3s ease}.label .stamp{position:absolute;left:34%;top:46%;transform:translate(-50%,-50%) rotate(-14deg) scale(1.6);border:5px solid rgba(190,40,30,.85);color:#be281ed9;border-radius:8px;padding:2px 16px;font:700 clamp(26px,6vw,44px) "Barlow Semi Condensed",sans-serif;letter-spacing:.06em;opacity:0;pointer-events:none;transition:transform .18s cubic-bezier(.3,1.6,.5,1),opacity .12s;mix-blend-mode:multiply}.label .stamp.on{opacity:1;transform:translate(-50%,-50%) rotate(-14deg) scale(1)}#postit{position:fixed;right:max(18px,3vw);top:max(18px,3vh);z-index:12;width:min(250px,62vw);min-height:170px;padding:22px 20px 18px;background:linear-gradient(170deg,#fff59a,#f6e56b);color:#23305f;font:500 clamp(20px,4.8vw,25px) / 1.15 "Caveat",cursive;box-shadow:0 14px 24px #00000073,inset 0 -18px 30px #0000000d;transform:rotate(2.5deg) translateY(-20px);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .35s cubic-bezier(.2,.9,.25,1.1);cursor:pointer}#postit.on{opacity:1;transform:rotate(2.5deg) translateY(0);pointer-events:auto}#hint{position:fixed;left:0;top:0;z-index:9;max-width:300px;padding:5px 10px 6px;background:linear-gradient(180deg,#242427,#161618);color:#f4f1e8;font:600 14px/1.2 Barlow Semi Condensed,sans-serif;letter-spacing:.03em;border-radius:3px;box-shadow:0 6px 14px #00000080,inset 0 1px #ffffff14;text-shadow:0 1px 0 rgba(0,0,0,.6);pointer-events:none;opacity:0;transition:opacity .12s ease;white-space:nowrap;will-change:transform}#hint.on{opacity:1}#help[hidden]{display:none}#help{font-family:Barlow Semi Condensed,sans-serif;user-select:none;-webkit-user-select:none}#help .tabs{position:fixed;left:max(16px,2vw);bottom:max(14px,2vh);z-index:8;display:flex;gap:6px;transform:rotate(-1deg)}#help .tabs button{-webkit-appearance:none;appearance:none;border:0;margin:0;padding:6px 11px 7px;background:linear-gradient(180deg,#f1e9cf,#e6dbb9);color:#3a2e18;font:700 12px/1 Barlow Semi Condensed,sans-serif;letter-spacing:.12em;text-transform:uppercase;border-radius:1px;box-shadow:0 4px 10px #00000073,inset 0 -1px #00000014;cursor:pointer;opacity:.86;transition:opacity .15s ease,transform .15s ease}#help .tabs button:hover,#help .tabs button:focus-visible{opacity:1;transform:translateY(-1px)}#help button:focus-visible{outline:2px solid #f6e56b;outline-offset:2px}#help .tabs .state{display:inline-block;min-width:2.2em;margin-left:4px;padding:2px 5px;background:#23305f;color:#fbf6e4;border-radius:1px;letter-spacing:.08em}#help-hints[aria-pressed=false] .state{background:transparent;color:#7c6d4c;box-shadow:inset 0 0 0 1px #3c2e1859}.guide{position:fixed;left:max(16px,2vw);top:max(14px,2vh);z-index:8;width:min(300px,calc(100vw - 32px));max-height:calc(100vh - 80px);overflow:auto;padding:12px 14px 10px 16px;background:linear-gradient(to bottom,transparent 37px,rgba(200,50,31,.55) 37px,rgba(200,50,31,.55) 38px,transparent 38px),#fbf9f0;color:#23305f;border-radius:2px;box-shadow:0 16px 30px #0000008c,0 3px 8px #00000059;transform:rotate(-.8deg) translateY(-12px);transform-origin:top left;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .3s cubic-bezier(.2,.9,.25,1.05)}.guide.on{opacity:1;transform:rotate(-.8deg) translateY(0);pointer-events:auto}.guide h2{margin:1px 26px 12px 0;font:800 14px/1.1 Barlow Semi Condensed,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#c8321f}.guide .x{position:absolute;right:6px;top:4px;width:28px;height:28px;border:0;background:none;color:#8a7a5a;font:400 24px/1 Barlow Semi Condensed,sans-serif;cursor:pointer}.guide .x:hover{color:#23305f}.guide [data-step]{display:grid;grid-template-columns:16px 13px 1fr;column-gap:6px;align-items:start;font:600 15px/1.25 Barlow Semi Condensed,sans-serif}.guide [data-step] .box{width:13px;height:13px;margin-top:3px;border:1.5px solid rgba(35,48,95,.55);border-radius:1px;position:relative}.guide [data-step] .n{color:#c8321f;font-weight:800}.guide [data-step] .note{display:block;margin-top:1px;font-weight:500;font-size:13.5px;line-height:1.3;color:#23305fc7}.guide .now [data-step] .t{background:linear-gradient(transparent 55%,rgba(255,236,90,.85) 55%,rgba(255,236,90,.85) 92%,transparent 92%) 0 0 / 100% 1.25em no-repeat}.guide .now [data-step] .note{background:#fbf9f0;padding-top:2px}.guide .finished{margin:0;font:500 21px/1.1 Caveat,cursive;color:#c8321f}.guide .dots{display:flex;gap:5px;margin:10px 0 0 22px;padding:0;list-style:none}.guide .dots li{width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1.3px #23305f73}.guide .dots li.done{background:#c8321f;box-shadow:none}.guide .dots li.next{box-shadow:inset 0 0 0 1.8px #c8321f}.guide.all .dots,.guide .steps,.guide .tips,.guide.all .now{display:none}.guide.all .steps{display:block;list-style:none;margin:0;padding:0}.guide.all .tips{display:block}.guide .steps li{padding:2px 0 5px}.guide .steps li .note{display:none}.guide .steps li.next .note{display:block}.guide .steps li.next .t{background:linear-gradient(transparent 55%,rgba(255,236,90,.85) 55%,rgba(255,236,90,.85) 92%,transparent 92%) 0 0 / 100% 1.25em no-repeat}.guide .steps li.done{color:#23305f73}.guide [data-step].done .box:after{content:"\2713";position:absolute;left:-1px;top:-9px;font:600 22px/1 Caveat,cursive;color:#c8321f}.guide .tips p{margin:8px 0 0;font:500 13.5px/1.3 Barlow Semi Condensed,sans-serif;color:#23305fd9}.guide .tips b{font-weight:700;color:#23305f}.guide .more{display:block;margin:9px 0 0 22px;padding:0;border:0;background:none;color:#1f4ea3;font:600 13px/1.2 Barlow Semi Condensed,sans-serif;text-decoration:underline;text-underline-offset:2px;cursor:pointer}@media(max-width:520px){.guide{left:10px;top:max(10px,env(safe-area-inset-top));width:calc(100vw - 20px);max-height:calc(100vh - 70px);padding:10px 12px 8px 14px;transform:rotate(-.4deg) translateY(-12px)}.guide.on{transform:rotate(-.4deg) translateY(0)}.guide h2{margin-bottom:9px;font-size:13px}.guide [data-step]{font-size:15px}.guide .dots{margin-top:7px}.guide .more{margin-top:6px}#help .tabs{left:10px;bottom:max(10px,env(safe-area-inset-bottom))}#hint{font-size:15px;padding:7px 12px 8px}}@media(prefers-reduced-motion:reduce){.held .sheet,#postit,#veil,.guide{transition:none}}
