/* Grape House catalogue (2026-10-24). Pages are 480x640 design pixels; catalog.js scales .book to fit the screen. */
@font-face{font-family:'DB'; src:url('/fonts/DB%20HelvethaicaMon%20X%20Bd%20v3.2.ttf') format('truetype');}
*{box-sizing:border-box; margin:0;}
button{font:inherit; color:inherit; cursor:var(--cursor-pointer-url), pointer;}

.book{position:relative; transform-origin:top center; flex:none;}
.bookin{position:relative; perspective:2600px; transition:transform .6s ease;}
.slot{position:absolute; top:0; width:480px; height:640px;}
.slot.L{left:0;} .slot.R{left:480px;}
.single .slot.R{left:0;}
.pg{position:absolute; inset:0; background:#fffaf0; overflow:hidden;
  background-image:linear-gradient(#fbeecb 1.2px,transparent 1.2px),linear-gradient(90deg,#fbeecb 1.2px,transparent 1.2px); background-size:32px 32px;}
.slot.L .pg{border-radius:18px 0 0 18px; box-shadow:inset -22px 0 24px -18px rgba(59,49,64,.28), -4px 6px 0 rgba(59,49,64,.12);}
.slot.R .pg{border-radius:0 18px 18px 0; box-shadow:inset 22px 0 24px -18px rgba(59,49,64,.28), 4px 6px 0 rgba(59,49,64,.12);}
.single .slot.R .pg{border-radius:18px; box-shadow:4px 6px 0 rgba(59,49,64,.15);}
.pgin{position:absolute; inset:0; padding:24px 28px 44px;}
.pgno{position:absolute; bottom:12px; left:0; right:0; text-align:center; font-size:22px; color:#9a8aa8;}
.slot.L .pgno{text-align:left; padding-left:30px;} .slot.R .pgno{text-align:right; padding-right:30px;}
.single .slot.R .pgno{text-align:center; padding:0;}

/* turning leaf */
.leaf{position:absolute; top:0; left:480px; width:480px; height:640px; transform-style:preserve-3d; transform-origin:left center; transition:transform .85s cubic-bezier(.45,.05,.3,1); z-index:5;}
.single .leaf{left:0;}
.face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;}
.face.back{transform:rotateY(180deg);}
.leaf .face .pg{border-radius:0 18px 18px 0;}
.leaf .face.back .pg{border-radius:18px 0 0 18px; box-shadow:inset -22px 0 24px -18px rgba(59,49,64,.28);}
.single .leaf .face .pg, .single .leaf .face.back .pg{border-radius:18px;}

/* chrome */
.nav:disabled{opacity:.25; cursor:default;}
.bar .sum{font-size:26px; line-height:1.1; text-align:left;}
.bar .sum b{color:#c74b8a; font-size:32px;}
.bar .sum small{display:block; font-size:19px; color:#7a6a86;}
.bar button{border:3px solid #3b3140; background:#7a5bd6; color:#fff; border-radius:999px; padding:4px 20px; font-size:26px; box-shadow:0 4px 0 #5a3fb0;}
.bar button.ghost{background:#fff; color:#3b3140; box-shadow:0 4px 0 rgba(59,49,64,.25);}
.dots{display:flex; gap:7px;}
.dots i{width:11px; height:11px; border-radius:50%; background:#cdbff0; border:2px solid #3b3140; display:block;}
.dots i.on{background:#ff8fb5;}
.toast{position:fixed; left:50%; bottom:92px; transform:translateX(-50%) translateY(20px); background:#3b3140; color:#fff; font-size:24px; padding:6px 20px; border-radius:999px; opacity:0; transition:.3s; z-index:40; pointer-events:none;}
.toast.show{opacity:1; transform:translateX(-50%);}

/* ---- page parts ---- */
.pgin h2{font-size:40px; line-height:1.05; color:#5a3fb0; text-shadow:3px 3px 0 #ffd6e4;}
.pgin h2 em{font-style:normal; color:#e0609a;}
.pgin .kick{display:inline-block; background:#7a5bd6; color:#fff; border-radius:999px; padding:0 14px; font-size:20px; margin-bottom:4px;}
.pgin p{font-size:23px; line-height:1.25; color:#5d5068; margin-top:6px;}
.pgin p b{color:#c74b8a;}
.price{display:inline-block; background:#ffd45e; border:3px solid #3b3140; border-radius:999px; padding:0 12px; font-size:26px; line-height:1.25; white-space:nowrap; transform:rotate(-2deg);}
.price.pink{background:#ff8fb5;} .price.mint{background:#9fe3c5;} .price.free{background:#c9b6ff;}
.cds{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px;}
.cd{position:relative; background:#fff; border:3px solid #3b3140; border-radius:18px; padding:5px 5px 6px; text-align:center; font-size:21px; line-height:1.1; box-shadow:3px 3px 0 #e2d6ff; transition:transform .15s;}
.cd img{width:100%; display:block; border-radius:12px;}
.cd b{display:block; margin-top:3px; font-size:23px;}
.cd small{display:block; color:#7a6a86; font-size:18px;}
.cd.pick{background:#fff3fa; border-color:#e0609a; box-shadow:0 0 0 3px #ffb3cc, 3px 3px 0 #e0609a; transform:translateY(-2px);}
.cd.pick::after{content:"✓ เลือกแล้ว"; position:absolute; top:-9px; right:-6px; background:#ff6f9f; color:#fff; border:2px solid #3b3140; border-radius:999px; font-size:17px; padding:0 9px; transform:rotate(5deg);}
.cd.off{opacity:.45; cursor:not-allowed;}
.cd .st{position:absolute; top:8px; left:8px; background:#9fe3c5; border:2px solid #3b3140; border-radius:999px; font-size:16px; padding:0 8px; line-height:1.3;}
.cd .st.no{background:#ffb3cc;}
.cd .pr{position:absolute; top:8px; right:8px; background:#ffd45e; border:2px solid #3b3140; border-radius:999px; font-size:16px; padding:0 7px; line-height:1.3;}
.cd.pick .pr{display:none;}
.tog{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:12px; border:3px solid #3b3140; background:#fff; border-radius:999px; padding:5px 12px; font-size:26px; box-shadow:0 4px 0 rgba(59,49,64,.2);}
.tog.on{background:#ff8fb5; box-shadow:0 4px 0 #e0609a;}
.tog:disabled{opacity:.4; cursor:not-allowed;}
.hint{font-size:19px; color:#9a8aa8; text-align:center; margin-top:4px;}
.ba2{display:flex; align-items:center; gap:6px; margin-top:12px;}
.ba2 figure{flex:1; text-align:center; font-size:20px; position:relative;}
.ba2 figure img{width:100%; border:3px solid #3b3140; border-radius:12px; display:block;}
.ba2 .ar{font-size:34px; color:#e0609a;}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
.chips span{background:#fff; border:2px solid #e2d6ff; border-radius:999px; padding:0 10px; font-size:20px;}
.stepper{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:12px;}
.stepper button{width:46px; height:46px; border-radius:50%; border:3px solid #3b3140; background:#fff; font-size:30px; line-height:1; box-shadow:0 3px 0 rgba(59,49,64,.25);}
.stepper b{font-size:34px; min-width:80px; text-align:center;}
.env2{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px;}
.env2 .gh-letter{margin:0; font-size:20px;} .env2 .gh-letter summary{padding:5px 8px; font-size:20px;} .env2 .gh-letter p{padding:5px 8px 7px; font-size:20px; margin:0;}
.steps{list-style:none; padding:0; margin-top:10px;}
.steps li{display:flex; gap:10px; align-items:center; font-size:23px; line-height:1.15; padding:5px 0;}
.steps li i{flex:none; width:34px; height:34px; border-radius:50%; background:#7a5bd6; color:#fff; border:3px solid #3b3140; font-style:normal; text-align:center; line-height:28px; font-size:21px;}
.tbl{width:100%; margin-top:8px; border-collapse:collapse; font-size:22px;}
.tbl td{padding:3px 0; border-bottom:2px dashed #e2d6ff;} .tbl td:last-child{text-align:right; font-weight:700; color:#c74b8a; white-space:nowrap;}
.item-row{display:flex; align-items:center; gap:10px; width:100%; margin-top:7px; border:3px solid #3b3140; background:#fff; border-radius:16px; padding:4px 10px; font-size:23px; text-align:left;}
.item-row.on{background:#fff3fa; border-color:#e0609a; box-shadow:0 0 0 3px #ffb3cc;}
.item-row .ic{font-size:28px;} .item-row .nm{flex:1;} .item-row .pr2{font-weight:700; color:#c74b8a;}
.item-row:disabled{opacity:.4;}
.sealbox{background:linear-gradient(#bfe8fb,#6fcff0); border:3px solid #3b3140; border-radius:16px; height:140px; display:flex; align-items:center; justify-content:center; margin-top:10px;}
.sealbox img{height:120px;}
.lines{margin-top:8px; font-size:22px;}
.lines div{display:flex; gap:8px; padding:3px 0; border-bottom:2px dashed #e2d6ff;}
.lines div span:first-child{flex:1;} .lines div b{color:#c74b8a;}
.total{display:flex; justify-content:space-between; align-items:center; margin-top:8px; font-size:32px; background:#ffd45e; border:3px solid #3b3140; border-radius:16px; padding:2px 14px;}
.inp{width:100%; margin-top:6px; border:3px solid #3b3140; border-radius:14px; padding:4px 12px; font:inherit; font-size:22px; background:#fff; color:#3b3140;}
.row2{display:flex; gap:8px; margin-top:8px;}
.row2 .tog{margin-top:0; font-size:23px; padding:5px 8px;}
.row2 a.tog{text-decoration:none; color:#3b3140;}
.empty{text-align:center; margin-top:40px; font-size:26px; color:#7a6a86;}
.empty div{font-size:64px;}

/* covers */
.cover .pg{background:#7a5bd6; background-image:radial-gradient(circle at 30% 20%, #9577e6 0, transparent 55%), repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 14px,transparent 14px 28px); border:6px solid #3b3140;}
.cover .pgno{display:none;}
.cv{position:absolute; inset:0; text-align:center; color:#fff; padding-top:46px;}
.cv .lace{position:absolute; left:0; right:0; top:0; height:22px; background:radial-gradient(circle at 20px 0, #fffaf0 19px, transparent 20px) 0 0/40px 22px repeat-x;}
.cv .pill{display:inline-block; background:#fffaf0; color:#5a3fb0; border-radius:999px; padding:0 20px; font-size:26px;}
.cv h1{font-size:92px; line-height:.95; margin-top:14px; color:#ffd45e; text-shadow:5px 5px 0 #3b3140;}
.cv .sub{font-size:44px; letter-spacing:10px; margin-top:6px; color:#fff; text-shadow:3px 3px 0 #3b3140;}
.cv .ph{font-size:96px; margin-top:20px; filter:drop-shadow(0 6px 0 rgba(0,0,0,.25));}
.cv .seals{display:flex; justify-content:center; gap:26px; margin-top:8px;}
.cv .seals img{width:150px; filter:drop-shadow(0 6px 4px rgba(0,0,0,.3));}
.cv .seals img:first-child{transform:scaleX(-1) rotate(8deg);} .cv .seals img:last-child{transform:rotate(8deg);}
.cv p{font-size:27px; color:#efe6ff; margin-top:14px; padding:0 40px;}
.cv .tap{position:absolute; left:0; right:0; bottom:34px; font-size:30px; color:#ffd45e; animation:cat-bob 1.4s ease-in-out infinite;}
@keyframes cat-bob{0%,100%{transform:translateX(0);}50%{transform:translateX(10px);}}
.cv.back{padding-top:150px;}
.cv.back h1{font-size:70px;}
@media (prefers-reduced-motion: reduce){.cv .tap{animation:none;} .leaf{transition-duration:.01s;} .bookin{transition:none;}}

/* tighter aquarium page + the price chips on page 1 */
.sealbox{height:104px; margin-top:6px;} .sealbox img{height:92px;}
.item-row{margin-top:5px; padding:1px 10px; font-size:21px;} .item-row .ic{font-size:24px;}
.pc{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:8px;}
.pc span{background:#fff; border:2px solid #e2d6ff; border-radius:12px; padding:1px 8px; font-size:19px; display:flex; justify-content:space-between; gap:6px;}
.pc span b{color:#c74b8a; white-space:nowrap;}

/* the order page has to hold ~11 lines plus the form */
.lines{font-size:19px; margin-top:6px;} .lines div{padding:1px 0; gap:6px;}
.total{font-size:26px; margin-top:6px; padding:0 12px;}
.inp{font-size:20px; padding:2px 10px; margin-top:5px;}
.row2{margin-top:6px;} .row2 .tog{font-size:21px; padding:3px 8px;}
.pgin .hint{font-size:17px; margin-top:2px;}

/* ---- buying in the book (2026-10-24): letters, pay, slip ---- */
.lrows{margin-top:8px; max-height:300px; overflow:auto; display:flex; flex-direction:column; gap:6px;}
.lrow{display:flex; align-items:center; gap:6px; background:#fff; border:2px solid #3b3140; border-radius:14px; padding:3px 6px;}
.lrow.st-heart{border-color:#ff6f9f; background:#fff0f5;} .lrow.st-star{border-color:#d9a400; background:#fffbe6;} .lrow.st-gold{border-color:#b9831d; background:#fff3b8;}
.lrow .li{font-size:22px;} .lrow .lt{flex:1; min-width:0; font-size:19px; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.lrow .lt b{color:#c74b8a;}
.lrow button{border:0; background:none; font-size:18px; padding:0 3px;}
.lnone{text-align:center; font-size:24px; color:#7a6a86; padding:26px 0;} .lnone small{font-size:18px;}
.qrs{display:flex; gap:12px; justify-content:center; margin-top:10px;}
.qrs figure{width:170px; text-align:center; font-size:19px;} .qrs img{width:100%; border:3px solid #3b3140; border-radius:14px; background:#fff; display:block;}
.bank{margin-top:10px; text-align:center; background:#fff; border:3px solid #3b3140; border-radius:16px; padding:6px; font-size:20px;}
.bank b{display:block; font-size:30px; letter-spacing:1px; color:#5a3fb0;}
.bank .tog{display:inline-flex; width:auto;}
.slipbtn{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; margin-top:8px; height:200px; border:3px dashed #7a5bd6; border-radius:16px; background:#f7f2ff; font-size:22px; color:#5a3fb0; cursor:var(--cursor-pointer-url), pointer; overflow:hidden;}
.slipbtn.has{border-style:solid; background:#fff;}
.slipbtn img{max-height:150px; max-width:90%; border-radius:8px;}
.err{margin-top:6px; background:#ffe3ec; color:#a8366b; border:2px solid #ff8fb5; border-radius:12px; padding:2px 10px; font-size:19px; text-align:center;}
.sentbox{text-align:center; margin-top:14px; background:#fff; border:3px solid #3b3140; border-radius:18px; padding:10px; font-size:22px;}
.sentbox .big{font-size:64px;} .sentbox b{display:block; font-size:30px; color:#5a3fb0;}
.lmodal{position:fixed; inset:0; z-index:50; background:rgba(40,25,70,.55); display:flex; align-items:center; justify-content:center; padding:16px;}
.lmodal[hidden]{display:none;}
.lbox{width:min(440px,100%); background:#fffaf0; border:4px solid #3b3140; border-radius:24px; padding:16px 18px; box-shadow:0 8px 0 rgba(59,49,64,.3);}
.lbox h3{font-size:30px; color:#5a3fb0;}
.lsty{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:8px;}
.lsty button{border:2px solid #3b3140; background:#fff; border-radius:14px; padding:3px 2px; font-size:19px; line-height:1.1;}
.lsty button small{display:block; font-size:15px; color:#c74b8a;}
.lsty button.on{background:#ffd6e4; box-shadow:0 0 0 3px #ff8fb5;}
.lbox textarea{resize:vertical; min-height:100px; line-height:1.35;}
.lcount{text-align:right; font-size:16px; color:#9a8aa8;}
.lbtns{display:flex; gap:8px; justify-content:flex-end; margin-top:6px;}
.lbtns button{border:3px solid #3b3140; background:#7a5bd6; color:#fff; border-radius:999px; padding:3px 18px; font-size:22px;}
.lbtns button.ghost{background:#fff; color:#3b3140;}

/* ---- inside the site's own page (2026-10-24, "cute, like the seal page") ---- */
.cat-page .book, .cat-page .bookin, .cat-page .pgin, .cat-page .lbox, .cat-page .toast{font-family:'DB','Segoe UI Emoji',sans-serif;}
.cat-page button{font:inherit;}
/* the book's "tank": pet.html's sky stage, outline and hard shadow */
.cat-tank{position:relative; margin:6px auto 0; max-width:1100px; padding:22px 64px 26px; overflow:hidden;
  background:linear-gradient(var(--sky-a,#eaf7ff) 0%, var(--sky-b,#cfeaf8) 70%, #b6dff2 100%);
  border:var(--bw,3px) solid var(--line,#141414); border-radius:22px; box-shadow:var(--shadow-hard,5px 5px 0 #141414);}
.cat-tank::after{content:""; position:absolute; left:0; right:0; bottom:0; height:16px; pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 22px, transparent 22px 44px);}
.cat-tank .book{margin:0 auto;}
.cat-tank .nav{position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:46px; height:58px; border:var(--bw,3px) solid var(--line,#141414);
  background:var(--pink-soft,#ffe3ee); color:var(--ink,#141414); border-radius:999px; font-size:36px; line-height:1; box-shadow:3px 3px 0 var(--line,#141414); cursor:pointer;}
.cat-tank .nav.prev{left:10px;} .cat-tank .nav.next{right:10px;}
.cat-tank .nav:active{transform:translateY(-50%) translate(2px,2px); box-shadow:1px 1px 0 var(--line,#141414);}
/* the cart under the book: like the pet page's stat card */
.cat-cart{position:relative; max-width:760px; margin:18px auto 30px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 18px;
  background:var(--paper,#fff); border:var(--bw,3px) solid var(--line,#141414); border-radius:22px; box-shadow:var(--shadow-hard,5px 5px 0 #141414); padding:14px 18px;}
.cat-cart .sum{font-weight:700; font-size:1.15rem; text-align:center;}
.cat-cart .sum b{color:var(--pink-deep,#e0609a); font-size:1.4rem;}
.cat-cart .sum small{display:block; font-size:.85rem; color:var(--ink-soft,#6f6178); font-weight:600;}
.cat-cart .btn{display:inline-flex; align-items:center; gap:8px; padding:10px 24px; font-weight:800; font-size:1.05rem; text-decoration:none; cursor:pointer;
  background:var(--mint,#a8e6cf); color:var(--ink,#141414); border:var(--bw,3px) solid var(--line,#141414); border-radius:999px; box-shadow:3px 3px 0 var(--line,#141414);}
.cat-cart .btn:hover{transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--line,#141414);}
.cat-cart .btn.ghost{background:var(--pink-soft,#ffe3ee);}
.cat-cart .chips{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; flex-basis:100%;}
.cat-cart .chips span{border:2px solid var(--line,#141414); border-radius:999px; padding:1px 10px; font-weight:700; font-size:.88rem; background:#fff7d6;}
.dots{display:flex; gap:7px; flex-basis:100%; justify-content:center;}
.dots i{width:11px; height:11px; border-radius:50%; background:#cdbff0; border:2px solid var(--line,#141414); display:block;}
.dots i.on{background:#ff8fb5;}
.toast{bottom:24px;}
@media (max-width:700px){.cat-tank{padding:16px 8px 22px;} .cat-tank .nav{top:auto; bottom:10px; transform:none; width:40px; height:44px; font-size:28px;} .cat-tank .nav:active{transform:translate(2px,2px);}}

/* seal colour page + the last "off to the cart" page (2026-10-24) */
.cols{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px;}
.col{position:relative; background:#fff; border:3px solid #3b3140; border-radius:16px; padding:4px 4px 5px; font-size:21px; box-shadow:3px 3px 0 #e2d6ff;}
.col img{width:100%; display:block;}
.col.pick{background:#fff3fa; border-color:#e0609a; box-shadow:0 0 0 3px #ffb3cc, 3px 3px 0 #e0609a;}
.col.pick::after{content:"✓"; position:absolute; top:-9px; right:-6px; width:26px; height:26px; line-height:22px; text-align:center; background:#ff6f9f; color:#fff; border:2px solid #3b3140; border-radius:50%; font-size:16px;}
.cta{text-align:center; padding-top:40px;}
.cta h2{font-size:48px;}
.cta-seal{width:240px; margin:18px auto 6px; display:block; filter:drop-shadow(0 6px 4px rgba(59,49,64,.2)); animation:cat-bob 2.4s ease-in-out infinite;}
.cta p{font-size:25px;}
.cta .tog{display:inline-flex; width:auto; padding:6px 30px; margin-top:16px;}
.cols{grid-template-columns:repeat(6,1fr); gap:5px;} .col{font-size:17px; padding:3px 2px 4px; border-radius:12px;}

/* ================= skins to choose from (2026-10-24, owner: "make the catalogue cuter — show me several") =================
   body.skin-candy / skin-night / skin-garden / skin-scrap — picked with ?skin= while choosing; the winner becomes the default. */

/* 1 · 🍓 Strawberry milk: pink gingham tank, polka-dot pages, heart corners */
.skin-candy .cat-tank{background:#ffe3ee; background-image:linear-gradient(90deg,rgba(255,143,181,.28) 50%,transparent 50%),linear-gradient(rgba(255,143,181,.28) 50%,transparent 50%); background-size:36px 36px;}
.skin-candy .cat-tank::after{background:repeating-linear-gradient(90deg,#fff 0 22px,#ffb3cc 22px 44px); height:14px;}
.skin-candy .pg{background-color:#fffafc; background-image:radial-gradient(#ffd6e4 2.6px,transparent 3px); background-size:26px 26px;}
.skin-candy .pgin h2{color:#e0457d; text-shadow:3px 3px 0 #ffe3ee;}
.skin-candy .pgin .kick{background:#ff6f9f;}
.skin-candy .cd{border-color:#e0457d; box-shadow:3px 3px 0 #ffb3cc; border-radius:22px;}
.skin-candy .col{border-color:#e0457d; box-shadow:3px 3px 0 #ffb3cc;}
.skin-candy .slot.R .pg::before, .skin-candy .slot.L .pg::before{content:"♥"; position:absolute; top:10px; right:18px; font-size:30px; color:#ff8fb5; transform:rotate(14deg); z-index:2;}
.skin-candy .slot.L .pg::before{content:"♥"; top:auto; bottom:14px; right:auto; left:44%; transform:rotate(-14deg);}
.skin-candy .cover .pg{background:#ff8fb5; background-image:radial-gradient(#fff 3px,transparent 3.5px); background-size:28px 28px;}
.skin-candy .cv h1{color:#fff; text-shadow:5px 5px 0 #e0457d;}
.skin-candy .cat-tank .nav{background:#fff; border-color:#e0457d; color:#e0457d; box-shadow:3px 3px 0 #e0457d;}

/* 2 · 🌙 Dreamy night: starry tank, cream pages, gold edges */
.skin-night .cat-tank{background:#2c2466; background-image:radial-gradient(#fff 1.2px,transparent 1.6px),radial-gradient(#ffe58a 1.5px,transparent 2px),linear-gradient(#2c2466,#5b3f9e 80%,#7c5fc4);
  background-size:60px 60px,110px 110px,auto; background-position:0 0,30px 50px,0 0;}
.skin-night .cat-tank::after{background:repeating-linear-gradient(90deg,rgba(255,229,138,.6) 0 6px,transparent 6px 26px); height:6px; bottom:8px;}
.skin-night .pg{background-color:#fffaf0; background-image:linear-gradient(#f3e6c4 1px,transparent 1px); background-size:100% 32px;}
.skin-night .slot .pg{box-shadow:inset 0 0 0 4px #ffd45e, 0 8px 20px rgba(0,0,0,.35);}
.skin-night .pgin h2{color:#4b3a8f; text-shadow:3px 3px 0 #ffe58a;}
.skin-night .pgin .kick{background:#4b3a8f; color:#ffe58a;}
.skin-night .cd, .skin-night .col{border-color:#4b3a8f; box-shadow:3px 3px 0 #ffd45e;}
.skin-night .slot.R .pg::before{content:"☾ ✦"; position:absolute; top:12px; right:20px; font-size:22px; color:#d9a400; z-index:2;}
.skin-night .cover .pg{background:#2c2466; background-image:radial-gradient(#ffe58a 1.5px,transparent 2px); background-size:34px 34px; border-color:#ffd45e;}
.skin-night .cv h1{color:#ffe58a; text-shadow:5px 5px 0 #000;}
.skin-night .cat-tank .nav{background:#ffe58a; box-shadow:3px 3px 0 #000;}
.skin-night .page-hero h1{color:#4b3a8f;}

/* 3 · 🌷 Spring garden: mint tank with flowers, lined notebook pages, washi tape */
.skin-garden .cat-tank{background:#d9f5e6; background-image:radial-gradient(circle at 20px 20px,#ffb3cc 5px,transparent 6px),radial-gradient(circle at 60px 50px,#ffe58a 4px,transparent 5px),radial-gradient(circle at 40px 70px,#c9b6ff 4px,transparent 5px);
  background-size:80px 80px;}
.skin-garden .cat-tank::after{height:22px; background:radial-gradient(circle at 11px 22px,#8fcf76 11px,transparent 12px) 0 0/22px 22px repeat-x;}
.skin-garden .pg{background-color:#fffef6; background-image:linear-gradient(90deg,transparent 46px,#ffb3cc 46px,#ffb3cc 48px,transparent 48px),linear-gradient(#d6ecf5 1px,transparent 1px); background-size:100% 100%,100% 30px;}
.skin-garden .pgin{padding-left:60px;}
.skin-garden .pgin h2{color:#3e8f5f; text-shadow:3px 3px 0 #d9f5e6;}
.skin-garden .pgin .kick{background:#5fbf8a;}
.skin-garden .cd, .skin-garden .col{border-color:#3e8f5f; box-shadow:3px 3px 0 #b8e6d0;}
.skin-garden .slot .pg::before{content:""; position:absolute; top:-4px; left:50%; width:110px; height:26px; margin-left:-55px; transform:rotate(-3deg); z-index:3;
  background:repeating-linear-gradient(45deg,rgba(255,179,204,.85) 0 8px,rgba(255,255,255,.85) 8px 16px);}
.skin-garden .cover .pg{background:#5fbf8a; background-image:radial-gradient(circle,#fff 4px,transparent 5px),radial-gradient(circle,#ffe58a 3px,transparent 4px); background-size:40px 40px,40px 40px; background-position:0 0,20px 20px;}
.skin-garden .cat-tank .nav{background:#fff; border-color:#3e8f5f; color:#3e8f5f; box-shadow:3px 3px 0 #3e8f5f;}

/* 4 · ✂️ Scrapbook: cork board tank, kraft pages, tape, tilted polaroid cards */
.skin-scrap .cat-tank{background:#c99a64; background-image:radial-gradient(rgba(90,55,25,.25) 1px,transparent 1.5px),radial-gradient(rgba(255,240,210,.35) 1px,transparent 1.5px); background-size:9px 9px,13px 13px;}
.skin-scrap .cat-tank::after{display:none;}
.skin-scrap .pg{background-color:#f4e7cf; background-image:radial-gradient(rgba(140,100,50,.12) 1px,transparent 1.5px); background-size:7px 7px;}
.skin-scrap .pgin h2{color:#7a4a24; text-shadow:2px 2px 0 #fff;}
.skin-scrap .pgin .kick{background:#e0609a; transform:rotate(-3deg);}
.skin-scrap .cd{background:#fff; border:0; border-radius:4px; padding:7px 7px 10px; box-shadow:2px 4px 8px rgba(80,50,20,.3);}
.skin-scrap .cd:nth-child(odd){transform:rotate(-2deg);} .skin-scrap .cd:nth-child(even){transform:rotate(2deg);}
.skin-scrap .cd img{border-radius:2px;}
.skin-scrap .cd::before{content:""; position:absolute; top:-9px; left:50%; width:60px; height:18px; margin-left:-30px; background:rgba(255,229,138,.85); transform:rotate(-4deg); z-index:2;}
.skin-scrap .col{border:0; background:#fff; box-shadow:2px 3px 6px rgba(80,50,20,.3); border-radius:4px;}
.skin-scrap .slot.L .pg::after{content:"✿"; position:absolute; bottom:40px; right:26px; font-size:44px; color:#e0609a; opacity:.7;}
.skin-scrap .cover .pg{background:#7a4a24; background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1.5px); background-size:6px 6px; border-color:#3b2410;}
.skin-scrap .cat-tank .nav{background:#f4e7cf; box-shadow:3px 3px 0 #3b2410;}




/* ================= PIXEL skins (2026-10-24, owner sent cozy pixel-game screenshots: "I want this feel") =================
   skin-pixel  = pink sky + pixel clouds (2nd reference)   skin-pixel2 = green gingham + binder (1st reference)
   Every frame is a 9-slice pixel SVG (border-image), so corners are stepped like the game UI at any size. */
.skin-pixel, .skin-pixel2{--px-ink:#5a3d52;}
.skin-pixel .pgin, .skin-pixel2 .pgin{font-family:'DB','Segoe UI Emoji',sans-serif;}
.skin-pixel .pgno, .skin-pixel2 .pgno{font-family:'Press Start 2P','DB',monospace; letter-spacing:0;}   /* only digits: the pixel font has no Thai and no ฿ */
/* the tank */
.skin-pixel .cat-tank{border-style:solid; border-width:12px; border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2016%2016'%20width%3D'16'%20height%3D'16'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'4'%20y%3D'0'%20width%3D'8'%20height%3D'2'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'2'%20width%3D'2'%20height%3D'2'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'12'%20y%3D'2'%20width%3D'2'%20height%3D'2'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'0'%20y%3D'4'%20width%3D'2'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'14'%20y%3D'4'%20width%3D'2'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'12'%20width%3D'2'%20height%3D'2'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'12'%20y%3D'12'%20width%3D'2'%20height%3D'2'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'4'%20y%3D'14'%20width%3D'8'%20height%3D'2'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'4'%20y%3D'2'%20width%3D'8'%20height%3D'2'%20fill%3D'%23ff9ec1'%2F%3E%3Crect%20x%3D'2'%20y%3D'4'%20width%3D'12'%20height%3D'8'%20fill%3D'%23ff9ec1'%2F%3E%3Crect%20x%3D'4'%20y%3D'12'%20width%3D'8'%20height%3D'2'%20fill%3D'%23ff9ec1'%2F%3E%3Crect%20x%3D'4'%20y%3D'2'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ffc9dc'%2F%3E%3Crect%20x%3D'2'%20y%3D'4'%20width%3D'1'%20height%3D'7'%20fill%3D'%23ffc9dc'%2F%3E%3C%2Fsvg%3E") 6 / 12px / 0 stretch; border-radius:0; background:none; image-rendering:pixelated; background:#f4a7bf url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2064%2040'%20width%3D'64'%20height%3D'40'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'8'%20y%3D'14'%20width%3D'16'%20height%3D'4'%20fill%3D'%23ffd9e6'%2F%3E%3Crect%20x%3D'4'%20y%3D'18'%20width%3D'28'%20height%3D'4'%20fill%3D'%23ffd9e6'%2F%3E%3Crect%20x%3D'12'%20y%3D'10'%20width%3D'8'%20height%3D'4'%20fill%3D'%23ffd9e6'%2F%3E%3Crect%20x%3D'2'%20y%3D'22'%20width%3D'32'%20height%3D'3'%20fill%3D'%23ffe9f0'%2F%3E%3Crect%20x%3D'42'%20y%3D'30'%20width%3D'12'%20height%3D'3'%20fill%3D'%23ffd9e6'%2F%3E%3Crect%20x%3D'38'%20y%3D'33'%20width%3D'20'%20height%3D'3'%20fill%3D'%23ffe9f0'%2F%3E%3Crect%20x%3D'46'%20y%3D'27'%20width%3D'5'%20height%3D'3'%20fill%3D'%23ffd9e6'%2F%3E%3C%2Fsvg%3E") 0 0/128px 80px repeat; image-rendering:pixelated; border-image-outset:0; box-shadow:none; padding:22px 74px 26px;}
.skin-pixel .cat-tank::after, .skin-pixel2 .cat-tank::after{display:none;}
.skin-pixel2 .cat-tank{border-style:solid; border-width:12px; border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2016%2016'%20width%3D'16'%20height%3D'16'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'4'%20y%3D'0'%20width%3D'8'%20height%3D'2'%20fill%3D'%232f6f4a'%2F%3E%3Crect%20x%3D'2'%20y%3D'2'%20width%3D'2'%20height%3D'2'%20fill%3D'%232f6f4a'%2F%3E%3Crect%20x%3D'12'%20y%3D'2'%20width%3D'2'%20height%3D'2'%20fill%3D'%232f6f4a'%2F%3E%3Crect%20x%3D'0'%20y%3D'4'%20width%3D'2'%20height%3D'8'%20fill%3D'%232f6f4a'%2F%3E%3Crect%20x%3D'14'%20y%3D'4'%20width%3D'2'%20height%3D'8'%20fill%3D'%232f6f4a'%2F%3E%3Crect%20x%3D'2'%20y%3D'12'%20width%3D'2'%20height%3D'2'%20fill%3D'%232f6f4a'%2F%3E%3Crect%20x%3D'12'%20y%3D'12'%20width%3D'2'%20height%3D'2'%20fill%3D'%232f6f4a'%2F%3E%3Crect%20x%3D'4'%20y%3D'14'%20width%3D'8'%20height%3D'2'%20fill%3D'%232f6f4a'%2F%3E%3Crect%20x%3D'4'%20y%3D'2'%20width%3D'8'%20height%3D'2'%20fill%3D'%23fff8ec'%2F%3E%3Crect%20x%3D'2'%20y%3D'4'%20width%3D'12'%20height%3D'8'%20fill%3D'%23fff8ec'%2F%3E%3Crect%20x%3D'4'%20y%3D'12'%20width%3D'8'%20height%3D'2'%20fill%3D'%23fff8ec'%2F%3E%3Crect%20x%3D'4'%20y%3D'2'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'2'%20y%3D'4'%20width%3D'1'%20height%3D'7'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") 6 / 12px / 0 stretch; border-radius:0; background:none; image-rendering:pixelated; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2032%2032'%20width%3D'32'%20height%3D'32'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'0'%20y%3D'0'%20width%3D'32'%20height%3D'32'%20fill%3D'%237fd19b'%2F%3E%3Crect%20x%3D'0'%20y%3D'0'%20width%3D'16'%20height%3D'32'%20fill%3D'rgba(255%2C255%2C255%2C.28)'%2F%3E%3Crect%20x%3D'0'%20y%3D'0'%20width%3D'32'%20height%3D'16'%20fill%3D'rgba(255%2C255%2C255%2C.28)'%2F%3E%3Crect%20x%3D'6'%20y%3D'6'%20width%3D'2'%20height%3D'2'%20fill%3D'%23fff'%2F%3E%3Crect%20x%3D'22'%20y%3D'22'%20width%3D'1'%20height%3D'1'%20fill%3D'%23fff'%2F%3E%3Crect%20x%3D'24'%20y%3D'9'%20width%3D'1'%20height%3D'1'%20fill%3D'%23eafff0'%2F%3E%3C%2Fsvg%3E") 0 0/64px 64px repeat; image-rendering:pixelated; box-shadow:none; padding:22px 74px 26px;}
/* pages: cream paper inside a pixel frame, faint pixel grid */
.skin-pixel .slot .pg, .skin-pixel2 .slot .pg, .skin-pixel .leaf .face .pg, .skin-pixel2 .leaf .face .pg{border-style:solid; border-width:12px; border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2016%2016'%20width%3D'16'%20height%3D'16'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'4'%20y%3D'0'%20width%3D'8'%20height%3D'2'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'2'%20width%3D'2'%20height%3D'2'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'12'%20y%3D'2'%20width%3D'2'%20height%3D'2'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'0'%20y%3D'4'%20width%3D'2'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'14'%20y%3D'4'%20width%3D'2'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'12'%20width%3D'2'%20height%3D'2'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'12'%20y%3D'12'%20width%3D'2'%20height%3D'2'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'4'%20y%3D'14'%20width%3D'8'%20height%3D'2'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'4'%20y%3D'2'%20width%3D'8'%20height%3D'2'%20fill%3D'%23fff8ec'%2F%3E%3Crect%20x%3D'2'%20y%3D'4'%20width%3D'12'%20height%3D'8'%20fill%3D'%23fff8ec'%2F%3E%3Crect%20x%3D'4'%20y%3D'12'%20width%3D'8'%20height%3D'2'%20fill%3D'%23fff8ec'%2F%3E%3Crect%20x%3D'4'%20y%3D'2'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'2'%20y%3D'4'%20width%3D'1'%20height%3D'7'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") 6 fill / 12px / 0 stretch; border-radius:0; background:none; image-rendering:pixelated; box-shadow:none;}
.skin-pixel .pg, .skin-pixel2 .pg{background:none;}
.skin-pixel .pgin::before, .skin-pixel2 .pgin::before{content:""; position:absolute; inset:0; z-index:-1;
  background-image:linear-gradient(rgba(233,182,200,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(233,182,200,.25) 1px,transparent 1px); background-size:16px 16px;}
.skin-pixel .pgin, .skin-pixel2 .pgin{z-index:0; padding:20px 24px 40px;}
/* binder rings down the middle of a spread */
.skin-pixel .bookin:not(.single)::after, .skin-pixel2 .bookin:not(.single)::after{content:""; position:absolute; left:466px; top:40px; bottom:40px; width:28px; z-index:8; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2014%2010'%20width%3D'14'%20height%3D'10'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'2'%20y%3D'0'%20width%3D'10'%20height%3D'2'%20fill%3D'%238a6a7a'%2F%3E%3Crect%20x%3D'0'%20y%3D'2'%20width%3D'2'%20height%3D'6'%20fill%3D'%238a6a7a'%2F%3E%3Crect%20x%3D'12'%20y%3D'2'%20width%3D'2'%20height%3D'6'%20fill%3D'%238a6a7a'%2F%3E%3Crect%20x%3D'2'%20y%3D'8'%20width%3D'10'%20height%3D'2'%20fill%3D'%238a6a7a'%2F%3E%3Crect%20x%3D'2'%20y%3D'2'%20width%3D'10'%20height%3D'2'%20fill%3D'%23ffc2d6'%2F%3E%3Crect%20x%3D'2'%20y%3D'6'%20width%3D'10'%20height%3D'2'%20fill%3D'%23e98fb0'%2F%3E%3Crect%20x%3D'2'%20y%3D'4'%20width%3D'10'%20height%3D'2'%20fill%3D'%23ffd9e6'%2F%3E%3C%2Fsvg%3E") center top/28px 20px repeat-y; background-size:28px 20px; background-repeat:space; image-rendering:pixelated;}
/* text */
.skin-pixel .pgin h2, .skin-pixel2 .pgin h2{color:var(--px-ink); text-shadow:2px 2px 0 #ffc9dc; font-size:36px;}
.skin-pixel2 .pgin h2{text-shadow:2px 2px 0 #c9f3df;}
.skin-pixel .pgin .kick, .skin-pixel2 .pgin .kick{border-style:solid; border-width:8px; border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%2012'%20width%3D'12'%20height%3D'12'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'2'%20y%3D'0'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'0'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'11'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'11'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%237a5bd6'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'10'%20height%3D'8'%20fill%3D'%237a5bd6'%2F%3E%3Crect%20x%3D'2'%20y%3D'10'%20width%3D'8'%20height%3D'1'%20fill%3D'%237a5bd6'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%239b82e6'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'1'%20height%3D'7'%20fill%3D'%239b82e6'%2F%3E%3C%2Fsvg%3E") 4 fill / 8px / 0 stretch; border-radius:0; background:none; image-rendering:pixelated; color:#fff; font-size:17px; padding:0 4px; line-height:1.4;}
.skin-pixel .price, .skin-pixel2 .price{border-style:solid; border-width:8px; border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%2012'%20width%3D'12'%20height%3D'12'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'2'%20y%3D'0'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'0'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'11'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'11'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ffe58a'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'10'%20height%3D'8'%20fill%3D'%23ffe58a'%2F%3E%3Crect%20x%3D'2'%20y%3D'10'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ffe58a'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23fff3b8'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'1'%20height%3D'7'%20fill%3D'%23fff3b8'%2F%3E%3C%2Fsvg%3E") 4 fill / 8px / 0 stretch; border-radius:0; background:none; image-rendering:pixelated; font-size:24px; padding:0 4px; transform:none; line-height:1.25; font-weight:800;}
.skin-pixel .price.pink, .skin-pixel2 .price.pink{border-style:solid; border-width:8px; border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%2012'%20width%3D'12'%20height%3D'12'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'2'%20y%3D'0'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'0'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'11'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'11'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ff9ec1'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'10'%20height%3D'8'%20fill%3D'%23ff9ec1'%2F%3E%3Crect%20x%3D'2'%20y%3D'10'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ff9ec1'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ffc9dc'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'1'%20height%3D'7'%20fill%3D'%23ffc9dc'%2F%3E%3C%2Fsvg%3E") 4 fill / 8px / 0 stretch; border-radius:0; background:none; image-rendering:pixelated;}
.skin-pixel .price.free, .skin-pixel2 .price.free{border-style:solid; border-width:8px; border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%2012'%20width%3D'12'%20height%3D'12'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'2'%20y%3D'0'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'0'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'11'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'11'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%239fe3c5'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'10'%20height%3D'8'%20fill%3D'%239fe3c5'%2F%3E%3Crect%20x%3D'2'%20y%3D'10'%20width%3D'8'%20height%3D'1'%20fill%3D'%239fe3c5'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23c9f3df'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'1'%20height%3D'7'%20fill%3D'%23c9f3df'%2F%3E%3C%2Fsvg%3E") 4 fill / 8px / 0 stretch; border-radius:0; background:none; image-rendering:pixelated;}
.skin-pixel .pgno, .skin-pixel2 .pgno{font-size:11px; color:#b88aa0;}
/* item tiles: pink tile inside a pixel card, like the furniture picker */
.skin-pixel .cd, .skin-pixel2 .cd, .skin-pixel .col, .skin-pixel2 .col{border-style:solid; border-width:8px; border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%2012'%20width%3D'12'%20height%3D'12'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'2'%20y%3D'0'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'0'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'11'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'11'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23fff6f0'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'10'%20height%3D'8'%20fill%3D'%23fff6f0'%2F%3E%3Crect%20x%3D'2'%20y%3D'10'%20width%3D'8'%20height%3D'1'%20fill%3D'%23fff6f0'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'1'%20height%3D'7'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") 4 fill / 8px / 0 stretch; border-radius:0; background:none; image-rendering:pixelated; box-shadow:none; padding:2px 2px 4px; filter:drop-shadow(3px 3px 0 rgba(90,61,82,.25));}
.skin-pixel .cd img, .skin-pixel2 .cd img{border-radius:0; image-rendering:auto; outline:3px solid #fde7ee;}
.skin-pixel .cd.pick, .skin-pixel2 .cd.pick, .skin-pixel .col.pick, .skin-pixel2 .col.pick{border-style:solid; border-width:8px; border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%2012'%20width%3D'12'%20height%3D'12'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'2'%20y%3D'0'%20width%3D'8'%20height%3D'1'%20fill%3D'%23c74b8a'%2F%3E%3Crect%20x%3D'1'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%23c74b8a'%2F%3E%3Crect%20x%3D'10'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%23c74b8a'%2F%3E%3Crect%20x%3D'0'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%23c74b8a'%2F%3E%3Crect%20x%3D'11'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%23c74b8a'%2F%3E%3Crect%20x%3D'1'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%23c74b8a'%2F%3E%3Crect%20x%3D'10'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%23c74b8a'%2F%3E%3Crect%20x%3D'2'%20y%3D'11'%20width%3D'8'%20height%3D'1'%20fill%3D'%23c74b8a'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ffe3ee'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'10'%20height%3D'8'%20fill%3D'%23ffe3ee'%2F%3E%3Crect%20x%3D'2'%20y%3D'10'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ffe3ee'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23fff3f8'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'1'%20height%3D'7'%20fill%3D'%23fff3f8'%2F%3E%3C%2Fsvg%3E") 4 fill / 8px / 0 stretch; border-radius:0; background:none; image-rendering:pixelated; transform:translateY(-3px);}
.skin-pixel .cd.pick::after, .skin-pixel2 .cd.pick::after{border-style:solid; border-width:8px; border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%2012'%20width%3D'12'%20height%3D'12'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'2'%20y%3D'0'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'0'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'11'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'11'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ff9ec1'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'10'%20height%3D'8'%20fill%3D'%23ff9ec1'%2F%3E%3Crect%20x%3D'2'%20y%3D'10'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ff9ec1'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ffc9dc'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'1'%20height%3D'7'%20fill%3D'%23ffc9dc'%2F%3E%3C%2Fsvg%3E") 4 fill / 8px / 0 stretch; border-radius:0; background:none; image-rendering:pixelated; content:"★ เลือก"; font-family:'DB',sans-serif; color:#fff; font-size:15px; padding:0 2px; top:-12px; right:-8px; transform:none;}
.skin-pixel .col.pick::after, .skin-pixel2 .col.pick::after{border-style:solid; border-width:8px; border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%2012'%20width%3D'12'%20height%3D'12'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'2'%20y%3D'0'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'0'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'11'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'11'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ff9ec1'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'10'%20height%3D'8'%20fill%3D'%23ff9ec1'%2F%3E%3Crect%20x%3D'2'%20y%3D'10'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ff9ec1'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ffc9dc'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'1'%20height%3D'7'%20fill%3D'%23ffc9dc'%2F%3E%3C%2Fsvg%3E") 4 fill / 8px / 0 stretch; border-radius:0; background:none; image-rendering:pixelated; content:"★"; width:auto; height:auto; line-height:1; padding:2px; font-size:14px; top:-12px; right:-8px;}
.skin-pixel .cd .pr, .skin-pixel2 .cd .pr{border-style:solid; border-width:8px; border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%2012'%20width%3D'12'%20height%3D'12'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'2'%20y%3D'0'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'0'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'11'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'11'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ffe58a'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'10'%20height%3D'8'%20fill%3D'%23ffe58a'%2F%3E%3Crect%20x%3D'2'%20y%3D'10'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ffe58a'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23fff3b8'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'1'%20height%3D'7'%20fill%3D'%23fff3b8'%2F%3E%3C%2Fsvg%3E") 4 fill / 8px / 0 stretch; border-radius:0; background:none; image-rendering:pixelated; font-size:15px; padding:0 2px; top:4px; right:4px; line-height:1.3;}
.skin-pixel .cd .st, .skin-pixel2 .cd .st{border-style:solid; border-width:8px; border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%2012'%20width%3D'12'%20height%3D'12'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'2'%20y%3D'0'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'0'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'11'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'11'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%239fe3c5'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'10'%20height%3D'8'%20fill%3D'%239fe3c5'%2F%3E%3Crect%20x%3D'2'%20y%3D'10'%20width%3D'8'%20height%3D'1'%20fill%3D'%239fe3c5'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23c9f3df'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'1'%20height%3D'7'%20fill%3D'%23c9f3df'%2F%3E%3C%2Fsvg%3E") 4 fill / 8px / 0 stretch; border-radius:0; background:none; image-rendering:pixelated; font-size:14px; padding:0 2px; line-height:1.3;}
.skin-pixel .tog, .skin-pixel2 .tog, .skin-pixel .item-row, .skin-pixel2 .item-row{border-style:solid; border-width:8px; border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%2012'%20width%3D'12'%20height%3D'12'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'2'%20y%3D'0'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'0'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'11'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'11'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23fff6f0'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'10'%20height%3D'8'%20fill%3D'%23fff6f0'%2F%3E%3Crect%20x%3D'2'%20y%3D'10'%20width%3D'8'%20height%3D'1'%20fill%3D'%23fff6f0'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'1'%20height%3D'7'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") 4 fill / 8px / 0 stretch; border-radius:0; background:none; image-rendering:pixelated; box-shadow:none; border-radius:0;}
.skin-pixel .tog.on, .skin-pixel2 .tog.on, .skin-pixel .item-row.on, .skin-pixel2 .item-row.on{border-style:solid; border-width:8px; border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%2012'%20width%3D'12'%20height%3D'12'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'2'%20y%3D'0'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'0'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'11'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'11'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ff9ec1'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'10'%20height%3D'8'%20fill%3D'%23ff9ec1'%2F%3E%3Crect%20x%3D'2'%20y%3D'10'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ff9ec1'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ffc9dc'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'1'%20height%3D'7'%20fill%3D'%23ffc9dc'%2F%3E%3C%2Fsvg%3E") 4 fill / 8px / 0 stretch; border-radius:0; background:none; image-rendering:pixelated;}
.skin-pixel .chips span, .skin-pixel2 .chips span{border-style:solid; border-width:8px; border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%2012'%20width%3D'12'%20height%3D'12'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'2'%20y%3D'0'%20width%3D'8'%20height%3D'1'%20fill%3D'%23e9b6c8'%2F%3E%3Crect%20x%3D'1'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%23e9b6c8'%2F%3E%3Crect%20x%3D'10'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%23e9b6c8'%2F%3E%3Crect%20x%3D'0'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%23e9b6c8'%2F%3E%3Crect%20x%3D'11'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%23e9b6c8'%2F%3E%3Crect%20x%3D'1'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%23e9b6c8'%2F%3E%3Crect%20x%3D'10'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%23e9b6c8'%2F%3E%3Crect%20x%3D'2'%20y%3D'11'%20width%3D'8'%20height%3D'1'%20fill%3D'%23e9b6c8'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23fde7ee'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'10'%20height%3D'8'%20fill%3D'%23fde7ee'%2F%3E%3Crect%20x%3D'2'%20y%3D'10'%20width%3D'8'%20height%3D'1'%20fill%3D'%23fde7ee'%2F%3E%3C%2Fsvg%3E") 4 fill / 8px / 0 stretch; border-radius:0; background:none; image-rendering:pixelated; padding:0 2px;}
.skin-pixel .ba2 figure img, .skin-pixel2 .ba2 figure img, .skin-pixel .sealbox, .skin-pixel2 .sealbox{border-radius:0;}
.skin-pixel .lines div, .skin-pixel2 .lines div{border-bottom:2px dotted #e9b6c8;}
.skin-pixel .total, .skin-pixel2 .total{border-style:solid; border-width:8px; border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%2012'%20width%3D'12'%20height%3D'12'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'2'%20y%3D'0'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'0'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'11'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'11'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ffe58a'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'10'%20height%3D'8'%20fill%3D'%23ffe58a'%2F%3E%3Crect%20x%3D'2'%20y%3D'10'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ffe58a'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23fff3b8'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'1'%20height%3D'7'%20fill%3D'%23fff3b8'%2F%3E%3C%2Fsvg%3E") 4 fill / 8px / 0 stretch; border-radius:0; background:none; image-rendering:pixelated; border-radius:0;}
/* covers */
.skin-pixel .cover .pg, .skin-pixel2 .cover .pg{border-style:solid; border-width:12px; border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2016%2016'%20width%3D'16'%20height%3D'16'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'4'%20y%3D'0'%20width%3D'8'%20height%3D'2'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'2'%20width%3D'2'%20height%3D'2'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'12'%20y%3D'2'%20width%3D'2'%20height%3D'2'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'0'%20y%3D'4'%20width%3D'2'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'14'%20y%3D'4'%20width%3D'2'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'12'%20width%3D'2'%20height%3D'2'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'12'%20y%3D'12'%20width%3D'2'%20height%3D'2'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'4'%20y%3D'14'%20width%3D'8'%20height%3D'2'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'4'%20y%3D'2'%20width%3D'8'%20height%3D'2'%20fill%3D'%23ff9ec1'%2F%3E%3Crect%20x%3D'2'%20y%3D'4'%20width%3D'12'%20height%3D'8'%20fill%3D'%23ff9ec1'%2F%3E%3Crect%20x%3D'4'%20y%3D'12'%20width%3D'8'%20height%3D'2'%20fill%3D'%23ff9ec1'%2F%3E%3Crect%20x%3D'4'%20y%3D'2'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ffc9dc'%2F%3E%3Crect%20x%3D'2'%20y%3D'4'%20width%3D'1'%20height%3D'7'%20fill%3D'%23ffc9dc'%2F%3E%3C%2Fsvg%3E") 6 fill / 12px / 0 stretch; border-radius:0; background:none; image-rendering:pixelated;}
.skin-pixel2 .cover .pg{border-style:solid; border-width:12px; border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2016%2016'%20width%3D'16'%20height%3D'16'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'4'%20y%3D'0'%20width%3D'8'%20height%3D'2'%20fill%3D'%232f6f4a'%2F%3E%3Crect%20x%3D'2'%20y%3D'2'%20width%3D'2'%20height%3D'2'%20fill%3D'%232f6f4a'%2F%3E%3Crect%20x%3D'12'%20y%3D'2'%20width%3D'2'%20height%3D'2'%20fill%3D'%232f6f4a'%2F%3E%3Crect%20x%3D'0'%20y%3D'4'%20width%3D'2'%20height%3D'8'%20fill%3D'%232f6f4a'%2F%3E%3Crect%20x%3D'14'%20y%3D'4'%20width%3D'2'%20height%3D'8'%20fill%3D'%232f6f4a'%2F%3E%3Crect%20x%3D'2'%20y%3D'12'%20width%3D'2'%20height%3D'2'%20fill%3D'%232f6f4a'%2F%3E%3Crect%20x%3D'12'%20y%3D'12'%20width%3D'2'%20height%3D'2'%20fill%3D'%232f6f4a'%2F%3E%3Crect%20x%3D'4'%20y%3D'14'%20width%3D'8'%20height%3D'2'%20fill%3D'%232f6f4a'%2F%3E%3Crect%20x%3D'4'%20y%3D'2'%20width%3D'8'%20height%3D'2'%20fill%3D'%237fd19b'%2F%3E%3Crect%20x%3D'2'%20y%3D'4'%20width%3D'12'%20height%3D'8'%20fill%3D'%237fd19b'%2F%3E%3Crect%20x%3D'4'%20y%3D'12'%20width%3D'8'%20height%3D'2'%20fill%3D'%237fd19b'%2F%3E%3Crect%20x%3D'4'%20y%3D'2'%20width%3D'8'%20height%3D'1'%20fill%3D'%23a9e6bd'%2F%3E%3Crect%20x%3D'2'%20y%3D'4'%20width%3D'1'%20height%3D'7'%20fill%3D'%23a9e6bd'%2F%3E%3C%2Fsvg%3E") 6 fill / 12px / 0 stretch; border-radius:0; background:none; image-rendering:pixelated;}
.skin-pixel .cv h1, .skin-pixel2 .cv h1{font-family:'Press Start 2P','DB',monospace; font-size:44px; line-height:1.3; color:#fff; text-shadow:4px 4px 0 var(--px-ink);}
.skin-pixel .cv .sub, .skin-pixel2 .cv .sub{font-family:'Press Start 2P',monospace; font-size:18px; letter-spacing:4px;}
.skin-pixel .cv .lace, .skin-pixel2 .cv .lace{display:none;}
.skin-pixel .cv .pill, .skin-pixel2 .cv .pill{border-style:solid; border-width:8px; border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%2012'%20width%3D'12'%20height%3D'12'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'2'%20y%3D'0'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'0'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'11'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'11'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23fff6f0'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'10'%20height%3D'8'%20fill%3D'%23fff6f0'%2F%3E%3Crect%20x%3D'2'%20y%3D'10'%20width%3D'8'%20height%3D'1'%20fill%3D'%23fff6f0'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'1'%20height%3D'7'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") 4 fill / 8px / 0 stretch; border-radius:0; background:none; image-rendering:pixelated; color:var(--px-ink);}
.skin-pixel .cv .tap, .skin-pixel2 .cv .tap{font-family:'Press Start 2P','DB',monospace; font-size:14px; color:#fff;}
/* arrows: square pixel buttons */
.skin-pixel .cat-tank .nav, .skin-pixel2 .cat-tank .nav{border-style:solid; border-width:8px; border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%2012'%20width%3D'12'%20height%3D'12'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'2'%20y%3D'0'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'0'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'11'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'11'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ff9ec1'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'10'%20height%3D'8'%20fill%3D'%23ff9ec1'%2F%3E%3Crect%20x%3D'2'%20y%3D'10'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ff9ec1'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ffc9dc'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'1'%20height%3D'7'%20fill%3D'%23ffc9dc'%2F%3E%3C%2Fsvg%3E") 4 fill / 8px / 0 stretch; border-radius:0; background:none; image-rendering:pixelated; box-shadow:none; width:48px; height:52px; color:#fff; font-family:'Press Start 2P',monospace; font-size:22px; filter:drop-shadow(3px 3px 0 rgba(90,61,82,.35));}
.skin-pixel .cat-tank .nav:disabled, .skin-pixel2 .cat-tank .nav:disabled{opacity:.4;}
/* the side tab rail, like the game's category tabs */
.pxtabs{display:none;}
.skin-pixel .pxtabs, .skin-pixel2 .pxtabs{display:flex; flex-direction:column; gap:6px; position:absolute; left:16px; top:70px; z-index:7;}
.pxtabs button{border-style:solid; border-width:8px; border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%2012'%20width%3D'12'%20height%3D'12'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'2'%20y%3D'0'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'0'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'11'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'11'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23fff6f0'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'10'%20height%3D'8'%20fill%3D'%23fff6f0'%2F%3E%3Crect%20x%3D'2'%20y%3D'10'%20width%3D'8'%20height%3D'1'%20fill%3D'%23fff6f0'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'1'%20height%3D'7'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") 4 fill / 8px / 0 stretch; border-radius:0; background:none; image-rendering:pixelated; width:44px; height:44px; padding:0; font-size:20px; cursor:pointer; filter:drop-shadow(2px 2px 0 rgba(90,61,82,.3));}
.pxtabs button.on{border-style:solid; border-width:8px; border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%2012'%20width%3D'12'%20height%3D'12'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'2'%20y%3D'0'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'0'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'11'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'11'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ff9ec1'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'10'%20height%3D'8'%20fill%3D'%23ff9ec1'%2F%3E%3Crect%20x%3D'2'%20y%3D'10'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ff9ec1'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ffc9dc'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'1'%20height%3D'7'%20fill%3D'%23ffc9dc'%2F%3E%3C%2Fsvg%3E") 4 fill / 8px / 0 stretch; border-radius:0; background:none; image-rendering:pixelated; transform:translateX(4px);}
.skin-pixel .cat-tank .nav.prev, .skin-pixel2 .cat-tank .nav.prev{top:auto; bottom:22px; left:14px; transform:none;}
/* the cart below: a HUD bar like the game's top bar */
.skin-pixel .cat-cart, .skin-pixel2 .cat-cart{border-style:solid; border-width:12px; border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2016%2016'%20width%3D'16'%20height%3D'16'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'4'%20y%3D'0'%20width%3D'8'%20height%3D'2'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'2'%20width%3D'2'%20height%3D'2'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'12'%20y%3D'2'%20width%3D'2'%20height%3D'2'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'0'%20y%3D'4'%20width%3D'2'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'14'%20y%3D'4'%20width%3D'2'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'12'%20width%3D'2'%20height%3D'2'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'12'%20y%3D'12'%20width%3D'2'%20height%3D'2'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'4'%20y%3D'14'%20width%3D'8'%20height%3D'2'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'4'%20y%3D'2'%20width%3D'8'%20height%3D'2'%20fill%3D'%23ff9ec1'%2F%3E%3Crect%20x%3D'2'%20y%3D'4'%20width%3D'12'%20height%3D'8'%20fill%3D'%23ff9ec1'%2F%3E%3Crect%20x%3D'4'%20y%3D'12'%20width%3D'8'%20height%3D'2'%20fill%3D'%23ff9ec1'%2F%3E%3Crect%20x%3D'4'%20y%3D'2'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ffc9dc'%2F%3E%3Crect%20x%3D'2'%20y%3D'4'%20width%3D'1'%20height%3D'7'%20fill%3D'%23ffc9dc'%2F%3E%3C%2Fsvg%3E") 6 fill / 12px / 0 stretch; border-radius:0; background:none; image-rendering:pixelated; box-shadow:none; filter:drop-shadow(4px 4px 0 rgba(90,61,82,.3));}
.skin-pixel .cat-cart .sum, .skin-pixel2 .cat-cart .sum{border-style:solid; border-width:8px; border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%2012'%20width%3D'12'%20height%3D'12'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'2'%20y%3D'0'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'0'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'11'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'11'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23fff6f0'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'10'%20height%3D'8'%20fill%3D'%23fff6f0'%2F%3E%3Crect%20x%3D'2'%20y%3D'10'%20width%3D'8'%20height%3D'1'%20fill%3D'%23fff6f0'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'1'%20height%3D'7'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") 4 fill / 8px / 0 stretch; border-radius:0; background:none; image-rendering:pixelated; padding:2px 10px;}
.skin-pixel .cat-cart .btn, .skin-pixel2 .cat-cart .btn{border-style:solid; border-width:8px; border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%2012'%20width%3D'12'%20height%3D'12'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'2'%20y%3D'0'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'0'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'11'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'11'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%239fe3c5'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'10'%20height%3D'8'%20fill%3D'%239fe3c5'%2F%3E%3Crect%20x%3D'2'%20y%3D'10'%20width%3D'8'%20height%3D'1'%20fill%3D'%239fe3c5'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23c9f3df'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'1'%20height%3D'7'%20fill%3D'%23c9f3df'%2F%3E%3C%2Fsvg%3E") 4 fill / 8px / 0 stretch; border-radius:0; background:none; image-rendering:pixelated; box-shadow:none;}
.skin-pixel .cat-cart .btn.ghost, .skin-pixel2 .cat-cart .btn.ghost{border-style:solid; border-width:8px; border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%2012'%20width%3D'12'%20height%3D'12'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'2'%20y%3D'0'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'0'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'11'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'11'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23fff6f0'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'10'%20height%3D'8'%20fill%3D'%23fff6f0'%2F%3E%3Crect%20x%3D'2'%20y%3D'10'%20width%3D'8'%20height%3D'1'%20fill%3D'%23fff6f0'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'1'%20height%3D'7'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") 4 fill / 8px / 0 stretch; border-radius:0; background:none; image-rendering:pixelated;}
.skin-pixel .cat-cart .chips span, .skin-pixel2 .cat-cart .chips span{border-style:solid; border-width:8px; border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%2012'%20width%3D'12'%20height%3D'12'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'2'%20y%3D'0'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'0'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'11'%20y%3D'2'%20width%3D'1'%20height%3D'8'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'1'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'10'%20y%3D'10'%20width%3D'1'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'11'%20width%3D'8'%20height%3D'1'%20fill%3D'%235a3d52'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23fff6f0'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'10'%20height%3D'8'%20fill%3D'%23fff6f0'%2F%3E%3Crect%20x%3D'2'%20y%3D'10'%20width%3D'8'%20height%3D'1'%20fill%3D'%23fff6f0'%2F%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'8'%20height%3D'1'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'1'%20height%3D'7'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") 4 fill / 8px / 0 stretch; border-radius:0; background:none; image-rendering:pixelated; background:none; padding:0 4px;}
.skin-pixel .dots i, .skin-pixel2 .dots i{border-radius:0; width:10px; height:10px;}
.skin-pixel2 .cat-cart{border-style:solid; border-width:12px; border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2016%2016'%20width%3D'16'%20height%3D'16'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'4'%20y%3D'0'%20width%3D'8'%20height%3D'2'%20fill%3D'%232f6f4a'%2F%3E%3Crect%20x%3D'2'%20y%3D'2'%20width%3D'2'%20height%3D'2'%20fill%3D'%232f6f4a'%2F%3E%3Crect%20x%3D'12'%20y%3D'2'%20width%3D'2'%20height%3D'2'%20fill%3D'%232f6f4a'%2F%3E%3Crect%20x%3D'0'%20y%3D'4'%20width%3D'2'%20height%3D'8'%20fill%3D'%232f6f4a'%2F%3E%3Crect%20x%3D'14'%20y%3D'4'%20width%3D'2'%20height%3D'8'%20fill%3D'%232f6f4a'%2F%3E%3Crect%20x%3D'2'%20y%3D'12'%20width%3D'2'%20height%3D'2'%20fill%3D'%232f6f4a'%2F%3E%3Crect%20x%3D'12'%20y%3D'12'%20width%3D'2'%20height%3D'2'%20fill%3D'%232f6f4a'%2F%3E%3Crect%20x%3D'4'%20y%3D'14'%20width%3D'8'%20height%3D'2'%20fill%3D'%232f6f4a'%2F%3E%3Crect%20x%3D'4'%20y%3D'2'%20width%3D'8'%20height%3D'2'%20fill%3D'%239fe3c5'%2F%3E%3Crect%20x%3D'2'%20y%3D'4'%20width%3D'12'%20height%3D'8'%20fill%3D'%239fe3c5'%2F%3E%3Crect%20x%3D'4'%20y%3D'12'%20width%3D'8'%20height%3D'2'%20fill%3D'%239fe3c5'%2F%3E%3Crect%20x%3D'4'%20y%3D'2'%20width%3D'8'%20height%3D'1'%20fill%3D'%23c9f3df'%2F%3E%3Crect%20x%3D'2'%20y%3D'4'%20width%3D'1'%20height%3D'7'%20fill%3D'%23c9f3df'%2F%3E%3C%2Fsvg%3E") 6 fill / 12px / 0 stretch; border-radius:0; background:none; image-rendering:pixelated;}
@media (max-width:700px){.skin-pixel .pxtabs, .skin-pixel2 .pxtabs{display:none;} .skin-pixel .cat-tank, .skin-pixel2 .cat-tank{padding:16px 10px 70px;}}

/* ================= SKY skin (2026-10-24, owner: "blue — not pixel, but that cozy-game feel") =================
   Chunky rounded frames with an inner highlight and a soft solid shadow, binder rings, side tabs, blue gingham + clouds. */
.skin-sky{--sk-ink:#2f4a6d; --sk-deep:#4a90d9; --sk-mid:#8cc8f2; --sk-soft:#d7eefc; --sk-paper:#fdfcf7; --sk-pink:#ff9ec1;}
.skin-sky .cat-tank{border:5px solid var(--sk-ink); border-radius:30px; box-shadow:0 8px 0 var(--sk-ink); padding:24px 76px 28px;
  background-color:#bfe3fb;
  background-image:radial-gradient(ellipse 46px 18px at 60px 40px,#fff 98%,transparent),radial-gradient(ellipse 30px 14px at 92px 32px,#fff 98%,transparent),
    radial-gradient(ellipse 40px 16px at 250px 120px,rgba(255,255,255,.9) 98%,transparent),radial-gradient(ellipse 26px 12px at 278px 112px,rgba(255,255,255,.9) 98%,transparent),
    linear-gradient(90deg,rgba(74,144,217,.14) 50%,transparent 50%),linear-gradient(rgba(74,144,217,.14) 50%,transparent 50%);
  background-size:340px 180px,340px 180px,340px 180px,340px 180px,48px 48px,48px 48px;}
.skin-sky .cat-tank::after{height:14px; bottom:0; background:repeating-linear-gradient(90deg,#fff 0 18px,var(--sk-mid) 18px 36px); border-top:3px solid var(--sk-ink);}
/* pages: cream paper in a thick blue rounded frame with a white inner line */
.skin-sky .slot .pg, .skin-sky .leaf .face .pg{border:5px solid var(--sk-ink); box-shadow:inset 0 0 0 4px #fff, inset 0 0 0 7px var(--sk-soft); background-color:var(--sk-paper);
  background-image:linear-gradient(rgba(140,200,242,.22) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(140,200,242,.22) 1.5px,transparent 1.5px); background-size:22px 22px;}
.skin-sky .slot.L .pg, .skin-sky .leaf .face.back .pg{border-radius:26px 8px 8px 26px;}
.skin-sky .slot.R .pg, .skin-sky .leaf .face.front .pg{border-radius:8px 26px 26px 8px;}
.skin-sky .single .slot.R .pg{border-radius:26px;}
.skin-sky .pgin{padding:24px 28px 42px;}
/* binder rings */
.skin-sky .bookin:not(.single)::after{content:""; position:absolute; left:464px; top:46px; bottom:46px; width:32px; z-index:8; pointer-events:none;
  background:radial-gradient(ellipse 13px 7px at 16px 10px,var(--sk-mid) 60%,var(--sk-ink) 62% 78%,transparent 80%) 0 0/32px 28px repeat-y;}
/* headings + labels */
.skin-sky .pgin h2{color:var(--sk-ink); text-shadow:3px 3px 0 var(--sk-soft);}
.skin-sky .pgin .kick{background:var(--sk-deep); border:3px solid var(--sk-ink); border-radius:12px; padding:0 12px; box-shadow:0 3px 0 var(--sk-ink);}
.skin-sky .price{border-width:3px; border-color:var(--sk-ink); border-radius:12px; box-shadow:0 3px 0 var(--sk-ink); transform:none;}
.skin-sky .price.free{background:#bfe9ff;}
.skin-sky .pgno{color:var(--sk-deep); font-weight:800;}
/* item cards: chunky frame, pale-blue tile behind the picture, label strip */
.skin-sky .cd, .skin-sky .col{border:4px solid var(--sk-ink); border-radius:20px; background:#fff; padding:5px 5px 6px; box-shadow:inset 0 0 0 3px var(--sk-soft), 0 5px 0 var(--sk-ink);}
.skin-sky .cd img{border-radius:13px; border:3px solid var(--sk-soft);}
.skin-sky .cd b{background:var(--sk-soft); border-radius:10px; margin:4px 2px 0; padding:1px 0;}
.skin-sky .cd.pick, .skin-sky .col.pick{border-color:var(--sk-deep); background:#eaf6ff; box-shadow:inset 0 0 0 3px #fff, 0 5px 0 var(--sk-deep); transform:translateY(-3px);}
.skin-sky .cd.pick::after{content:"★ เลือกแล้ว"; background:var(--sk-pink); border:3px solid var(--sk-ink); border-radius:12px; box-shadow:0 3px 0 var(--sk-ink); transform:rotate(4deg);}
.skin-sky .col.pick::after{background:var(--sk-pink); border:3px solid var(--sk-ink);}
.skin-sky .cd .pr{border-color:var(--sk-ink); border-radius:10px;}
.skin-sky .tog, .skin-sky .item-row{border:4px solid var(--sk-ink); border-radius:18px; box-shadow:0 4px 0 var(--sk-ink); background:#fff;}
.skin-sky .tog.on, .skin-sky .item-row.on{background:var(--sk-mid);}
.skin-sky .chips span{border-color:var(--sk-mid);}
.skin-sky .total{background:#ffe58a; border:4px solid var(--sk-ink); border-radius:16px; box-shadow:0 4px 0 var(--sk-ink);}
.skin-sky .lines div{border-bottom:2px dashed var(--sk-mid);}
.skin-sky .ba2 figure img, .skin-sky .sealbox{border:4px solid var(--sk-ink); border-radius:16px;}
/* covers */
.skin-sky .cover .pg{border:6px solid var(--sk-ink); background:var(--sk-deep);
  background-image:radial-gradient(ellipse 34px 14px at 50px 60px,rgba(255,255,255,.35) 98%,transparent),linear-gradient(90deg,rgba(255,255,255,.12) 50%,transparent 50%),linear-gradient(rgba(255,255,255,.12) 50%,transparent 50%);
  background-size:220px 160px,40px 40px,40px 40px; box-shadow:inset 0 0 0 5px #8cc8f2;}
.skin-sky .cv h1{color:#fff; text-shadow:0 5px 0 var(--sk-ink), 4px 0 0 var(--sk-ink), -4px 0 0 var(--sk-ink), 0 -4px 0 var(--sk-ink);}
.skin-sky .cv .sub{text-shadow:3px 3px 0 var(--sk-ink);}
.skin-sky .cv .lace{background:radial-gradient(circle at 20px 0,#fff 19px,transparent 20px) 0 0/40px 22px repeat-x;}
/* arrows + side tabs */
.skin-sky .cat-tank .nav{background:#fff; border:4px solid var(--sk-ink); border-radius:18px; color:var(--sk-deep); box-shadow:0 5px 0 var(--sk-ink); width:50px; height:56px;}
.skin-sky .pxtabs{display:flex; flex-direction:column; gap:8px; position:absolute; left:16px; top:74px; z-index:7;}
.skin-sky .pxtabs button{width:46px; height:46px; padding:0; font-size:20px; cursor:pointer; background:#fff; border:4px solid var(--sk-ink); border-radius:14px; box-shadow:0 4px 0 var(--sk-ink); transition:transform .12s;}
.skin-sky .pxtabs button.on{background:var(--sk-pink); transform:translateX(6px);}
.skin-sky .cat-tank .nav.prev{top:auto; bottom:24px; left:14px; transform:none;}
/* the cart card: a blue "HUD" bar */
.skin-sky .cat-cart{background:var(--sk-mid); border:5px solid var(--sk-ink); border-radius:26px; box-shadow:0 7px 0 var(--sk-ink);}
.skin-sky .cat-cart .sum{background:#fff; border:4px solid var(--sk-ink); border-radius:16px; padding:3px 14px; box-shadow:0 4px 0 var(--sk-ink);}
.skin-sky .cat-cart .chips span{background:#fff; border:3px solid var(--sk-ink);}
.skin-sky .cat-cart .btn{background:#ffe58a; border:4px solid var(--sk-ink); box-shadow:0 4px 0 var(--sk-ink);}
.skin-sky .cat-cart .btn.ghost{background:#fff;}
.skin-sky .dots i{background:#fff; border-color:var(--sk-ink);} .skin-sky .dots i.on{background:var(--sk-pink);}
@media (max-width:700px){.skin-sky .pxtabs{display:none;} .skin-sky .cat-tank{padding:16px 10px 72px;}}

/* ---- sky skin, cuter pass (2026-10-24, owner: "make it cuter still") ---- */
.skdeco, .cart-seal{display:none;}
.skin-sky{--sk-ink:#5b7fb8; --sk-deep:#7fb2ec; --sk-mid:#b4dbfb; --sk-soft:#e3f2fe; --sk-paper:#fffdf8; --sk-pink:#ffa9c8;}
.skin-sky .page-hero h1{color:#5b7fb8;}
.skin-sky .cat-tank{border-radius:38px; padding-top:48px; background-color:#cde9fd;}
/* bunting across the top: three rows of triangles, pink / yellow / mint */
.skin-sky .skdeco{display:block; position:absolute; inset:0; pointer-events:none; z-index:9;}
.skin-sky .bunting{position:absolute; left:24px; right:24px; top:0; height:34px; border-top:3px solid #fff;
  background:linear-gradient(to bottom right,#ffa9c8 50%,transparent 50%) 0 0/20px 26px repeat-x, linear-gradient(to bottom left,#ffa9c8 50%,transparent 50%) 20px 0/20px 26px repeat-x;
  -webkit-mask:linear-gradient(#000,#000) 0 0/40px 26px repeat-x; mask:none;}
.skin-sky .bunting{background:none;}
.skin-sky .bunting::before{content:""; position:absolute; inset:0;
  background:conic-gradient(from -30deg at 50% 100%,transparent 0 300deg,#ffa9c8 300deg 360deg) 0 0/40px 26px repeat-x; transform:scaleY(-1);}
.skin-sky .bunting::after{content:""; position:absolute; inset:0;
  background:conic-gradient(from -30deg at 50% 100%,transparent 0 300deg,#ffe58a 300deg 360deg) 40px 0/120px 26px repeat-x,
    conic-gradient(from -30deg at 50% 100%,transparent 0 300deg,#9fe3c5 300deg 360deg) 80px 0/120px 26px repeat-x; transform:scaleY(-1);}
/* floating stickers */
.skin-sky .fl{position:absolute; font-style:normal; font-size:26px; line-height:1; filter:drop-shadow(0 2px 0 #fff) drop-shadow(0 0 2px #fff); animation:sk-float 4s ease-in-out infinite;}
.skin-sky .f0{left:22px; top:48px;} .skin-sky .f1{right:26px; top:70px; animation-delay:-1s;} .skin-sky .f2{left:30%; top:30px; font-size:30px; animation-delay:-2s;}
.skin-sky .f3{right:34%; top:30px; animation-delay:-.5s;} .skin-sky .f4{right:22px; bottom:150px; animation-delay:-1.5s;} .skin-sky .f5{left:18px; bottom:120px; animation-delay:-2.5s; font-size:22px;}
.skin-sky .f6{right:24px; bottom:60px; font-size:20px; animation-delay:-3s;} .skin-sky .f7{left:46%; bottom:2px; font-size:24px; animation-delay:-.8s;}
.skin-sky .f8{left:12%; bottom:12px; animation-delay:-3.4s;} .skin-sky .f9{right:12%; bottom:14px; animation-delay:-2.2s;}
@keyframes sk-float{0%,100%{transform:translateY(0) rotate(-8deg);}50%{transform:translateY(-8px) rotate(8deg);}}
/* seals peeking over the edge of the book */
.skin-sky .peek{position:absolute; width:96px; right:90px; top:14px; transform:rotate(-8deg) scaleX(-1); filter:drop-shadow(0 3px 0 rgba(91,127,184,.35)); animation:sk-peek 3.2s ease-in-out infinite;}
.skin-sky .peek2{position:absolute; width:78px; left:100px; bottom:4px; transform:rotate(6deg); filter:drop-shadow(0 3px 0 rgba(91,127,184,.35)); animation:sk-peek 3.6s ease-in-out infinite reverse;}
@keyframes sk-peek{0%,100%{translate:0 0;}50%{translate:0 -6px;}}
/* pages: softer, a pink inner line, a heart / star in the bottom corners */
.skin-sky .slot .pg, .skin-sky .leaf .face .pg{border-width:4px; box-shadow:inset 0 0 0 4px #fff, inset 0 0 0 7px #ffe0ec;}
.skin-sky .slot.R .pg::before{content:"♡"; position:absolute; right:18px; bottom:10px; font-size:24px; color:#ffa9c8; z-index:2;}
.skin-sky .slot.L .pg::before{content:"☆"; position:absolute; left:20px; bottom:8px; font-size:24px; color:#ffd45e; z-index:2;}
.skin-sky .slot.cover .pg::before{display:none;}
.skin-sky .pgno{text-align:center !important; padding:0 !important;}
.skin-sky .pgin h2{color:#4f6fa3; text-shadow:3px 3px 0 #ffe0ec;}
.skin-sky .pgin .kick{background:#ffa9c8; border-color:#e07fa6; box-shadow:0 3px 0 #e07fa6; border-radius:99px; padding:0 14px;}
/* cards: washi tape, softer outline */
.skin-sky .cd, .skin-sky .col{border-width:3px; border-radius:22px; box-shadow:inset 0 0 0 3px var(--sk-soft), 0 4px 0 var(--sk-ink);}
.skin-sky .cd::before{content:""; position:absolute; top:-8px; left:50%; width:54px; height:16px; margin-left:-27px; border-radius:3px; z-index:2; transform:rotate(-4deg);
  background:repeating-linear-gradient(45deg,rgba(255,169,200,.9) 0 6px,rgba(255,255,255,.9) 6px 12px);}
.skin-sky .cd:nth-child(even)::before{transform:rotate(5deg); background:repeating-linear-gradient(45deg,rgba(255,229,138,.95) 0 6px,rgba(255,255,255,.9) 6px 12px);}
.skin-sky .cd b{background:linear-gradient(90deg,#ffe0ec,var(--sk-soft) 30% 70%,#ffe0ec); border-radius:99px;}
.skin-sky .cd.pick{background:#fff0f6; border-color:#ff8fb5; box-shadow:inset 0 0 0 3px #fff, 0 4px 0 #e07fa6;}
.skin-sky .col.pick{border-color:#ff8fb5; box-shadow:inset 0 0 0 3px #fff, 0 4px 0 #e07fa6;}
.skin-sky .tog{border-width:3px; border-radius:99px; box-shadow:0 4px 0 var(--sk-ink);}
.skin-sky .item-row{border-width:3px; border-radius:18px; box-shadow:0 4px 0 var(--sk-ink);}
.skin-sky .tog.on{background:linear-gradient(#ffc2d8,#ffa9c8); border-color:#e07fa6; box-shadow:0 4px 0 #e07fa6;}
.skin-sky .item-row.on{background:#ffe0ec; border-color:#e07fa6; box-shadow:0 4px 0 #e07fa6;}
.skin-sky .price{border-radius:99px; border-width:3px;}
.skin-sky .price.pink{background:#ffc2d8;}
/* cover: polka dots + a big bow */
.skin-sky .cover .pg{background:#8fc4f4; background-image:radial-gradient(#fff 3px,transparent 3.5px),radial-gradient(#ffd6e6 3px,transparent 3.5px); background-size:34px 34px,34px 34px; background-position:0 0,17px 17px;
  border-color:var(--sk-ink); box-shadow:inset 0 0 0 6px #fff;}
.skin-sky .cover .cv::after{content:"🎀"; position:absolute; top:26px; right:28px; font-size:56px; transform:rotate(14deg); filter:drop-shadow(0 3px 0 rgba(0,0,0,.15));}
.skin-sky .cv h1{text-shadow:0 5px 0 #5b7fb8, 4px 0 0 #5b7fb8, -4px 0 0 #5b7fb8, 0 -4px 0 #5b7fb8, 0 10px 0 #ffa9c8;}
.skin-sky .cv .sub, .skin-sky .cv p{color:#fff; text-shadow:2px 2px 0 #5b7fb8;}
.skin-sky .cv .tap{color:#fff; text-shadow:2px 2px 0 #5b7fb8;}
/* side tabs + arrows: round bubbles */
.skin-sky .pxtabs{top:90px;}
.skin-sky .pxtabs button{border-width:3px; border-radius:50%;}
.skin-sky .pxtabs button.on{background:#ffc2d8; border-color:#e07fa6; box-shadow:0 4px 0 #e07fa6;}
.skin-sky .cat-tank .nav{border-width:3px; border-radius:50%; width:52px; height:52px; color:#ff8fb5;}
/* the cart: a label tab and a seal sitting on top */
.cart-wrap{position:relative;}
.skin-sky .cart-seal{display:block; position:absolute; width:110px; left:calc(50% + 250px); top:-56px; z-index:2; transform:rotate(6deg) scaleX(-1); filter:drop-shadow(0 4px 0 rgba(91,127,184,.35));}
.skin-sky .cat-cart{background:linear-gradient(#d9eefe,#b4dbfb); border-width:4px; border-radius:30px; margin-top:34px;}
.skin-sky .cat-cart::before{content:"🛒 ตะกร้าของฉัน"; position:absolute; top:-18px; left:24px; background:#ffa9c8; color:#fff; font-weight:800; border:3px solid #e07fa6; border-radius:99px; padding:0 14px; box-shadow:0 3px 0 #e07fa6;}
.skin-sky .cat-cart .btn{border-width:3px; border-radius:99px;}
@media (prefers-reduced-motion: reduce){.skin-sky .fl, .skin-sky .peek, .skin-sky .peek2{animation:none;}}
@media (max-width:700px){.skin-sky .peek, .skin-sky .fl{display:none;} .skin-sky .cart-seal{left:auto; right:10px; width:80px; top:-46px;}}
/* bunting as real little flags on a string (overrides the gradient attempt above) */
.skin-sky .bunting{top:-2px; height:40px; border:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cpath d='M0 6 Q60 18 120 6' fill='none' stroke='%23ffffff' stroke-width='3'/%3E%3Cpath d='M8 8 L32 11 L20 34 Z' fill='%23ffa9c8' stroke='%23e07fa6' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M48 12 L72 12 L60 36 Z' fill='%23ffe58a' stroke='%23e0b84a' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M88 11 L112 8 L100 34 Z' fill='%239fe3c5' stroke='%235fbf8a' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0/120px 40px repeat-x;}
.skin-sky .bunting::before, .skin-sky .bunting::after{display:none;}
.skin-sky .cv p{background:rgba(91,127,184,.72); border-radius:16px; margin:14px 40px 0; padding:4px 14px; text-shadow:none;}
.skin-sky .cv .tap{background:#ffa9c8; border:3px solid #e07fa6; border-radius:99px; left:50%; right:auto; transform:translateX(-50%); padding:0 18px; text-shadow:none; animation:none;}

/* ---- sky skin: the cover as a light-blue fabric planner (2026-10-24, from the owner's "digital planner" reference) ---- */
.fab{display:none;}
.skin-sky .slot.cover:not(.back-cover) .pg{background:#b9d6f2; border:4px solid #8fb2d9; border-radius:10px 26px 26px 10px; box-shadow:inset 0 0 0 0 transparent, 0 10px 18px rgba(80,110,150,.28);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'160'%20height%3D'160'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'.9'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20values%3D'0%200%200%200%20.2%20%200%200%200%200%20.3%20%200%200%200%200%20.45%20%200%200%200%20.22%200'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'160'%20height%3D'160'%20filter%3D'url(%23n)'%2F%3E%3C%2Fsvg%3E"),
    repeating-linear-gradient(0deg,rgba(255,255,255,.10) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(60,90,130,.07) 0 1px,transparent 1px 3px);}
.skin-sky .slot.cover .fab{display:block; position:absolute; inset:0; z-index:3; overflow:hidden; font-family:'DB','Segoe UI Emoji',sans-serif;}
.skin-sky .slot.cover .fab ~ .cv{display:none;}
.skin-sky .slot.cover .pg::before{display:none;}
/* spine shading on the left */
.fab-spine{position:absolute; left:0; top:0; bottom:0; width:40px; background:linear-gradient(90deg,rgba(60,90,130,.28),rgba(255,255,255,.18) 55%,rgba(60,90,130,.10) 80%,transparent);}
/* debossed title: a touch darker than the cloth, light below-right, shadow above-left */
.fab-title{position:absolute; left:66px; top:120px; color:#9dbfe3; text-shadow:1px 1px 0 rgba(255,255,255,.55),-1px -1px 0 rgba(60,90,130,.35);}
.fab-title b{display:block; font:italic 400 86px/0.95 Georgia,'Times New Roman',serif; letter-spacing:-1px;}
.fab-title b + b{margin-left:24px;}
.fab-title i{display:block; margin-top:26px; font:700 16px/1 'Press Start 2P',monospace; font-style:normal; letter-spacing:2px; color:#88acd6;}
.fab-note{position:absolute; left:66px; top:390px; width:250px; font-size:19px; line-height:1.3; color:#7d9fc7; text-shadow:1px 1px 0 rgba(255,255,255,.45);}
/* the elastic band + satin bow */
.fab-band{position:absolute; right:86px; top:-4px; bottom:-4px; width:22px; background:repeating-linear-gradient(90deg,#f2b8c9 0 2px,#e8a3b8 2px 4px); box-shadow:inset 2px 0 0 rgba(255,255,255,.4), inset -2px 0 0 rgba(150,80,100,.25), 0 2px 6px rgba(80,60,90,.3);}
.fab-bow{position:absolute; right:30px; top:118px; width:130px; height:98px; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20120%2090'%3E%0A%3Cdefs%3E%3ClinearGradient%20id%3D'g'%20x1%3D'0'%20y1%3D'0'%20x2%3D'0'%20y2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23e8f4ff'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%23a9cdf0'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%0A%3Cpath%20d%3D'M60%2038%20C40%2010%208%208%206%2026%20C4%2044%2036%2046%2060%2040%20Z'%20fill%3D'url(%23g)'%20stroke%3D'%238fb6df'%20stroke-width%3D'2'%2F%3E%0A%3Cpath%20d%3D'M60%2038%20C80%2010%20112%208%20114%2026%20C116%2044%2084%2046%2060%2040%20Z'%20fill%3D'url(%23g)'%20stroke%3D'%238fb6df'%20stroke-width%3D'2'%2F%3E%0A%3Cpath%20d%3D'M56%2042%20L40%2086%20L50%2080%20L56%2088%20L60%2046%20Z'%20fill%3D'url(%23g)'%20stroke%3D'%238fb6df'%20stroke-width%3D'2'%2F%3E%0A%3Cpath%20d%3D'M64%2042%20L82%2084%20L72%2079%20L66%2088%20L60%2046%20Z'%20fill%3D'url(%23g)'%20stroke%3D'%238fb6df'%20stroke-width%3D'2'%2F%3E%0A%3Cellipse%20cx%3D'60'%20cy%3D'40'%20rx%3D'9'%20ry%3D'8'%20fill%3D'%23cfe5fb'%20stroke%3D'%238fb6df'%20stroke-width%3D'2'%2F%3E%0A%3Cpath%20d%3D'M22%2022%20C32%2018%2044%2024%2052%2034'%20stroke%3D'%23fff'%20stroke-width%3D'3'%20fill%3D'none'%20opacity%3D'.7'%20stroke-linecap%3D'round'%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; filter:drop-shadow(0 4px 3px rgba(60,90,130,.3)); transform:rotate(-8deg);}
/* sew-on buttons */
.fab .btn{position:absolute; width:26px; height:26px; border-radius:50%; box-shadow:inset 0 -2px 0 rgba(0,0,0,.12), 0 2px 3px rgba(60,90,130,.35);
  background:radial-gradient(circle at 38% 38%,rgba(0,0,0,.28) 2px,transparent 2.5px),radial-gradient(circle at 62% 38%,rgba(0,0,0,.28) 2px,transparent 2.5px),
    radial-gradient(circle at 38% 62%,rgba(0,0,0,.28) 2px,transparent 2.5px),radial-gradient(circle at 62% 62%,rgba(0,0,0,.28) 2px,transparent 2.5px),var(--c);}
.fab .b1{--c:#c9b6ff; left:330px; top:36px; width:32px; height:32px;} .fab .b2{--c:#9fe3c5; left:382px; top:46px; width:20px; height:20px;}
.fab .b3{--c:#ffc2d8; left:410px; top:34px; width:20px; height:20px;} .fab .b4{--c:#ffc2d8; right:22px; top:236px;} .fab .b5{--c:#ffb38a; right:20px; bottom:96px;}
/* resin stickers */
.fab .gem{position:absolute; font-style:normal; line-height:1; text-shadow:0 2px 0 rgba(255,255,255,.5); filter:drop-shadow(0 2px 2px rgba(60,90,130,.35));}
.fab .g1{left:58px; top:36px; font-size:40px; color:#ffd6e6; transform:rotate(-14deg);} .fab .g2{left:104px; top:62px; font-size:26px; color:#ffd6e6; transform:rotate(12deg);}
.fab .g3{left:350px; top:96px; font-size:30px; color:#ff6f9f;} .fab .g4{left:58px; bottom:58px; font-size:52px; color:#fff1a8; transform:rotate(-10deg);}
.fab .g5{right:44px; bottom:150px; font-size:22px; color:#9fe3c5;}
/* the felt patch with a lace ring and a seal, half under the band */
.fab-patch{position:absolute; right:56px; bottom:118px; width:150px; height:150px; background:#ffd6e6; transform:rotate(8deg); box-shadow:0 4px 6px rgba(60,90,130,.3);
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.25) 0 2px,transparent 2px 5px); border-radius:6px;}
.fab-lace{position:absolute; inset:16px; border-radius:50%; background:#8fb6df; display:grid; place-items:center;
  box-shadow:0 0 0 6px #fff, 0 0 0 9px #fff, 0 0 0 10px rgba(200,180,200,.6); outline:4px dotted #fff; outline-offset:8px;}
.fab-lace img{width:96px; transform:rotate(-8deg); filter:drop-shadow(0 2px 0 rgba(255,255,255,.7));}
.fab-tap{position:absolute; left:66px; bottom:40px; font:800 20px/1 'DB',sans-serif; color:#fff; background:#8fb6df; border-radius:99px; padding:6px 16px; box-shadow:0 3px 0 #6f93bf;}
.skin-sky .fab-note{width:180px; top:400px;}
.skin-sky .bookin:has(.slot.cover)::after{display:none;}
.skin-sky .slot.cover:not(.back-cover) .pg{background-color:#c9e2f8;}
.skin-sky .fab-title{color:#acccec;}
/* owner, 2026-10-24: "take out the clouds, the emoji and the party flags" — plain blue gingham, no floating stickers, no bunting */
.skin-sky .cat-tank{padding-top:24px; background-color:#cde9fd;
  background-image:linear-gradient(90deg,rgba(127,178,236,.18) 50%,transparent 50%),linear-gradient(rgba(127,178,236,.18) 50%,transparent 50%);
  background-size:48px 48px,48px 48px;}
.skin-sky .bunting, .skin-sky .fl{display:none;}
.skin-sky .peek{top:6px;}
.skin-sky .pxtabs{top:70px;}

/* the "skip to the house" button under the title (2026-10-25) */
.cat-gohouse{display:inline-block; margin-top:10px; background:#fff; color:#5b7fb8; border:3px solid #5b7fb8; border-radius:99px; padding:3px 18px; font-weight:800; text-decoration:none; box-shadow:0 4px 0 #5b7fb8;}
.cat-gohouse:hover{transform:translateY(-2px); box-shadow:0 6px 0 #5b7fb8;}

/* page 2: every kind of room on one page; page 3: my rooms (2026-10-25) */
.pick3 h3{display:flex; align-items:center; justify-content:space-between; margin:10px 0 2px; font-size:23px;}
.pick3 h3 .price{font-size:19px;}
.pick3 .gift{font-size:17px; color:#c74b8a; font-weight:700; margin-bottom:2px;}
.cds.c5{grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; margin-top:4px;}
.cds.c4{grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-top:4px;}
.cds.c5 .cd, .cds.c4 .cd{padding:3px 3px 4px; border-radius:12px; border-width:2.5px; box-shadow:2px 2px 0 #e2d6ff;}
.cds.c5 .cd img, .cds.c4 .cd img{border-radius:8px;}
.cds.c5 .cd b, .cds.c4 .cd b{font-size:15px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cds.c5 .cd .pr, .cds.c4 .cd .pr{display:none;}
.cds.c5 .cd.pick::after, .cds.c4 .cd.pick::after{content:"✓"; font-size:15px; padding:0 7px; top:-9px; right:-6px;}
.cd .st.mini{font-size:12px; top:3px; left:3px; padding:0 5px;}
.editing{display:inline-block; margin:2px 0 4px; background:#fff3b0; border:2px solid #3b3140; border-radius:999px; padding:0 12px; font-size:18px;}
.myrooms{display:flex; flex-direction:column; gap:6px; margin:10px 0; max-height:330px; overflow:auto;}
.myroom{display:flex; align-items:center; gap:8px; background:#fff; border:2.5px solid #3b3140; border-radius:14px; padding:4px 6px;}
.myroom.cur{background:#fff3fa; border-color:#e0609a;}
.myroom img{width:96px; border-radius:8px; flex:none;}
.myroom .mr-t{flex:1; font-size:19px; line-height:1.15;}
.myroom .mr-t small{display:block; font-size:15px; color:#7a6a86;}
.myroom button{font:inherit; font-size:16px; border:2px solid #3b3140; background:#fff; border-radius:999px; width:32px; height:32px; cursor:pointer; flex:none;}
.myroom button:last-child{background:#ffe3ec;}

/* page 9: eight special rooms, four to a row (2026-10-25) */
.cds.sp9 .cd b{font-size:16px;}
.cds.sp9 .cd .st{font-size:13px; top:4px; left:4px; padding:0 6px;}
.cds.c4.sp9{grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px;}
.cds.sp9 .cd b{font-size:18px;}

/* 11 special rooms (2026-10-26): page 2 six to a row, page 9 four to a row */
.cds.c5.c6{grid-template-columns:repeat(9,minmax(0,1fr)); gap:4px;}   /* 17 special rooms: 9 + 8 (was 8 + 8 for 16) */
.cds.c6 .cd b{font-size:13px;}
.cds.c4.sp9.sp9b{grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px;}
.cds.sp9b .cd b{font-size:15px;}