:root{--peel:#f59a0d;--zest:#fbcf1a;--pith:#fffbe6;--pulp:#fde98a;--rind:#2a1605;--rind-soft:#553710;--foil-a:#f6e7a8;--foil-b:#b98a2a;}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}body{min-height:100dvh;background:var(--peel);color:var(--rind);font-family:"Azeret Mono",ui-monospace,Menlo,Consolas,monospace;font-weight:400;line-height:1.45;display:flex;flex-direction:column;align-items:center;overflow-x:clip;padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));}main{flex:1;width:100%;display:flex;align-items:center;justify-content:center;perspective:1100px;padding:4px 0 10px}.stage{position:relative;width:100%;max-width:430px}.shadow{position:absolute;inset:18px 6px -14px;border-radius:12px;background:rgba(80,35,0,.38);filter:blur(18px);z-index:0;transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.2,1)}.stage.lift .shadow{opacity:.7;transform:translateY(8px) scale(.97)}.packet{position:relative;z-index:1;width:100%;background:linear-gradient(128deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 66%,rgba(255,255,255,.28) 100%),var(--pith);transition:transform .5s cubic-bezier(.2,.8,.2,1);-webkit-mask: linear-gradient(#000,#000) center/100% calc(100% - 20px) no-repeat,conic-gradient(from -45deg at 50% 100%,#000 90deg,transparent 0) top/14px 10px repeat-x,conic-gradient(from 135deg at 50% 0,#000 90deg,transparent 0) bottom/14px 10px repeat-x;mask: linear-gradient(#000,#000) center/100% calc(100% - 20px) no-repeat,conic-gradient(from -45deg at 50% 100%,#000 90deg,transparent 0) top/14px 10px repeat-x,conic-gradient(from 135deg at 50% 0,#000 90deg,transparent 0) bottom/14px 10px repeat-x;}.inner{padding:22px 18px 22px}.crimp{display:block;height:10px;margin:0 -18px 12px;border-bottom:1px solid rgba(42,22,5,.12)}.head{display:flex;align-items:center;gap:12px}.head img{width:56px;height:56px;flex:none;border-radius:12px;background:var(--rind);padding:4px}.maker{font-size:clamp(.72rem,.68rem + .2vw,.8rem);font-weight:700;letter-spacing:.02em}.lot{font-size:clamp(.62rem,.6rem + .1vw,.68rem);color:var(--rind-soft);letter-spacing:.04em}.foil{margin-left:auto;flex:none;width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff8d8 0 8%,transparent 30%),conic-gradient(from 20deg,var(--foil-a),var(--foil-b),var(--foil-a),#d6b45a,var(--foil-a));display:grid;place-items:center;text-align:center;font-size:.5rem;font-weight:700;letter-spacing:.08em;line-height:1.2;color:var(--rind);box-shadow:inset 0 0 0 3px rgba(255,255,255,.35),inset 0 0 0 5px rgba(120,85,20,.25);}h1{margin:16px 0 8px;font-size:clamp(1.3rem,1.02rem + 1.4vw,1.75rem);font-weight:700;line-height:1.18;letter-spacing:-.02em;}.sub{font-size:clamp(.8rem,.76rem + .2vw,.9rem);color:var(--rind-soft)}.strip{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:18px -18px 0;padding:16px 18px;min-height:60px;background:var(--zest);color:var(--rind);text-decoration:none;font-weight:700;font-size:clamp(.92rem,.86rem + .3vw,1.02rem);letter-spacing:.01em;-webkit-tap-highlight-color:transparent;transition:background-color .2s;}.strip::before,.strip::after{content:"";position:absolute;left:0;right:0;height:2px;background:repeating-linear-gradient(90deg,var(--rind) 0 6px,transparent 6px 11px)}.strip::before{top:0}.strip::after{bottom:0}.strip .notch{font-size:.62rem;font-weight:400;letter-spacing:.1em;display:block;color:var(--rind-soft)}.strip .arrow{flex:none;width:40px;height:40px;border-radius:50%;background:var(--rind);color:var(--zest);display:grid;place-items:center;transition:transform .25s}.strip:active .arrow{transform:translateX(4px)}.strip:focus-visible{outline:3px solid var(--rind);outline-offset:-5px}@media (hover: hover){.strip:hover{background:#ffd93d}.strip:hover .arrow{transform:translateX(4px)}}.worry{margin-top:10px;font-size:clamp(.7rem,.67rem + .15vw,.78rem);color:var(--rind-soft)}.panel{margin-top:16px;border:1.5px solid var(--rind);border-radius:4px}.panel h2{font-size:.72rem;font-weight:700;letter-spacing:.05em;padding:6px 10px;background:var(--rind);color:var(--pith)}.panel ul{list-style:none}.panel li{display:flex;justify-content:space-between;gap:8px;padding:6px 10px;font-size:clamp(.7rem,.67rem + .15vw,.78rem);border-top:1px solid rgba(42,22,5,.18)}.panel li:first-child{border-top:0}.panel li span:last-child{color:var(--rind-soft)}.panel li.mine{background:var(--pulp)}.panel li.mine span:last-child{color:var(--rind);font-weight:700}.foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:14px}.small{font-size:.7rem;color:var(--rind-soft);line-height:1.5;max-width:24ch}.code{flex:none;text-align:center;font-size:.55rem;letter-spacing:.14em;color:var(--rind)}.bars{display:block;width:96px;height:34px;background:repeating-linear-gradient(90deg,var(--rind) 0 2px,transparent 2px 4px,var(--rind) 4px 5px,transparent 5px 8px,var(--rind) 8px 11px,transparent 11px 12px,var(--rind) 12px 13px,transparent 13px 16px)}footer{width:100%;text-align:center;font-size:.68rem;color:var(--rind);padding:4px 0 0}@media (min-width:768px){.inner{padding:28px 30px 26px}.crimp{margin:0 -30px 14px}.strip{margin:20px -30px 0;padding:18px 30px}.head img{width:72px;height:72px}.foil{width:68px;height:68px;font-size:.56rem}}@media (max-height:700px) and (max-width:480px){.inner{padding-top:16px;padding-bottom:16px}h1{margin-top:12px}.strip{margin-top:14px}}@media (prefers-reduced-motion: reduce){.packet,.shadow,.strip .arrow{transition:none}}