.x2-design{--k-esp:#3a2a20;--k-foam:#fbf6ee;--k-cream:#f3eadb;--k-latte:#e6d5bc;--k-kraft:#ebdcc3;--k-kraft-line:#d6c09e;--k-tc:#a9532e;--k-ink-2:#6b5546;--k-open:#3f7d4e;--k-serif:var(--font-k-serif), Georgia, serif;--k-ui:var(--font-k-ui), system-ui, sans-serif}.x2-l{border-radius:32px;position:absolute;inset:0;overflow:hidden}.x2-design{background:var(--k-foam);color:var(--k-esp);border:1px solid var(--slate)}.x2-l [data-p]{position:absolute}.x2-l [data-p=header]{width:264px;height:44px;top:28px;left:18px}.x2-l [data-p=hello]{width:264px;height:60px;top:88px;left:18px}.x2-l [data-p=card]{width:264px;height:196px;top:164px;left:18px}.x2-l [data-p=stamps]{width:228px;height:94px;top:214px;left:36px}.x2-l [data-p=note]{width:228px;height:28px;top:318px;left:36px}.x2-l [data-p=button]{width:264px;height:56px;top:380px;left:18px}.x2-l [data-p=history]{width:264px;height:62px;top:454px;left:18px}.x2-l [data-p=tabs]{width:300px;height:60px;top:540px;left:0}.x2-design{font-family:var(--k-ui)}.x2-design svg{fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:1em;height:1em}.x2-status{height:18px;font:600 12px/1 var(--k-ui);justify-content:space-between;align-items:center;padding:0 24px 0 30px;display:flex;position:absolute;top:6px;left:0;right:0}.x2-status:after{content:"";background:#000;border-radius:10px;width:76px;height:18px;margin-left:-38px;position:absolute;top:0;left:50%}.x2-status span{align-items:center;gap:4px;font-size:13px;display:flex}.x2-status svg{stroke-width:2px}.x2-design [data-p=header]{align-items:center;gap:10px;display:flex}.x2-design [data-p=header] b{background:var(--k-esp);width:40px;height:40px;color:var(--k-foam);font:italic 600 16px/1 var(--k-serif);border-radius:12px;flex:none;place-items:center;display:grid}.x2-design [data-p=header] div{flex:1;min-width:0}.x2-design [data-p=header] span{font:700 15px/1.25 var(--k-ui);letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}.x2-design [data-p=header] small{font:500 11.5px/1.4 var(--k-ui);color:var(--k-ink-2);white-space:nowrap;align-items:center;gap:5px;display:flex;overflow:hidden}.x2-design [data-p=header] small:before{content:"";background:var(--k-open);border-radius:50%;flex:none;width:6px;height:6px}.x2-design [data-p=header] em{background:var(--k-latte);width:34px;height:34px;font:700 13px/1 var(--k-ui);border-radius:50%;flex:none;place-items:center;font-style:normal;display:grid}.x2-design [data-p=hello] small{font:500 13px/1.4 var(--k-ui);color:var(--k-ink-2);display:block}.x2-design [data-p=hello] strong{font:600 30px/1.1 var(--k-serif);letter-spacing:-.02em;white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}.x2-design [data-p=card]{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"), var(--k-kraft);box-shadow:inset 0 0 0 1px var(--k-kraft-line), 0 12px 24px -16px #3a2a208c;transition:box-shadow .5s var(--ease);border-radius:18px;padding:15px 18px}.x2-design [data-p=card]:before{content:"";background:var(--k-foam);width:16px;height:16px;box-shadow:264px 0 0 var(--k-foam);border-radius:50%;position:absolute;top:146px;left:-8px}.x2-design [data-p=card]:after{content:"";border-top:1.5px dashed var(--k-kraft-line);position:absolute;top:153.5px;left:16px;right:16px}.x2-design [data-p=card] div{justify-content:space-between;align-items:baseline;display:flex}.x2-design [data-p=card] div span{font:700 10.5px/1 var(--k-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--k-ink-2)}.x2-design [data-p=card] div b{font:600 22px/1 var(--k-serif);font-variant-numeric:tabular-nums}.x2-design [data-p=card] div b small{color:var(--k-ink-2);font-size:14px}.x2-design [data-p=card].full{box-shadow:inset 0 0 0 2px var(--k-tc), 0 12px 24px -16px #3a2a208c}.x2-design [data-p=stamps]{grid-template-rows:1fr 1fr;grid-template-columns:repeat(5,1fr);gap:8px 9px;display:grid}.x2-design [data-p=stamps] i{place-items:center;display:grid}.x2-design [data-p=stamps] b{width:30px;height:30px;font:600 11px/1 var(--k-ui);color:var(--k-ink-2);border:1.5px dashed #bba27f;border-radius:50%;place-items:center;display:grid}.x2-design [data-p=stamps] i.on b{border:2px solid var(--k-tc);width:35px;height:35px;color:var(--k-tc);box-shadow:inset 0 0 0 2px var(--k-kraft), inset 0 0 0 3.2px var(--k-tc);font:italic 600 12.5px/1 var(--k-serif);transform:rotate(var(--r));-webkit-mask:var(--x2-ink);-webkit-mask:var(--x2-ink);mask:var(--x2-ink)}.x2-design{--x2-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='1'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3 2.75'/%3E%3C/filter%3E%3Crect width='48' height='48' filter='url(%23n)'/%3E%3C/svg%3E")}.x2-design [data-p=stamps] i.gift b{border-color:var(--k-tc);color:var(--k-tc);font-size:16px}.x2-design [data-p=stamps] i.gift.on b{background:var(--k-tc);color:var(--k-foam);box-shadow:none;-webkit-mask:none;mask:none}.x2-design [data-p=stamps] i.pop b{animation:x2-slam .55s var(--ease)}@keyframes x2-slam{0%{transform:scale(1.7) rotate(var(--r));opacity:0}55%{transform:scale(.93) rotate(var(--r));opacity:1}to{transform:scale(1) rotate(var(--r))}}.x2-design [data-p=note]{font:600 13px/22px var(--k-ui);white-space:nowrap;text-overflow:ellipsis;padding-top:5px;overflow:hidden}.x2-design [data-p=button]{background:var(--k-tc);color:var(--k-foam);font:600 16px/1 var(--k-ui);cursor:pointer;border:0;border-radius:16px;justify-content:center;align-items:center;gap:10px;transition:background-color .2s,transform .15s;display:flex;box-shadow:0 10px 20px -12px #a9532ee6}.x2-design [data-p=button] svg{font-size:20px}.x2-design [data-p=button]:hover{background:#95482a}.x2-design [data-p=button]:active{transform:scale(.98)}.x2-design [data-p=history]{background:var(--k-cream);border-radius:16px;align-items:center;gap:12px;padding:0 14px 0 10px;display:flex}.x2-design [data-p=history] .seal{border:2px solid var(--k-tc);width:40px;height:40px;box-shadow:inset 0 0 0 2px var(--k-cream), inset 0 0 0 3.2px var(--k-tc);color:var(--k-tc);font:italic 600 13px/1 var(--k-serif);border-radius:50%;flex:none;place-items:center;display:grid;transform:rotate(-8deg)}.x2-design [data-p=history] div{flex:1;min-width:0}.x2-design [data-p=history] small{font:500 11.5px/1.4 var(--k-ui);color:var(--k-ink-2);white-space:nowrap;display:block}.x2-design [data-p=history] div>span{font:700 14px/1.35 var(--k-ui);white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}.x2-design [data-p=history] em{font:700 12px/1 var(--k-ui);color:#8e4424;flex:none;font-style:normal}.x2-design [data-p=tabs]{border-top:1px solid var(--k-latte);font:500 11px/1 var(--k-ui);color:var(--k-ink-2);text-align:center;background:#fffdf9;grid-template-columns:repeat(4,1fr);align-content:start;padding-top:5px;display:grid}.x2-design [data-p=tabs] span{justify-items:center;gap:3px;display:grid}.x2-design [data-p=tabs] svg{box-sizing:content-box;border-radius:12px;padding:2px 14px;font-size:18px}.x2-design [data-p=tabs] .on{color:var(--k-esp);font-weight:700}.x2-design [data-p=tabs] .on svg{background:var(--k-latte)}.x2-design [data-p=tabs]:after{content:"";background:var(--k-esp);border-radius:2px;width:96px;height:4px;margin-left:-48px;position:absolute;bottom:5px;left:50%}
