/* =====================================================================
   Forkcast skin art (round 4). Same layout and positions for every skin;
   only type, surfaces, borders, textures, controls and decorations change.
   All art is CSS or inline SVG; the fonts are bundled locally (OFL).
   ===================================================================== */
@font-face{font-family:"FC Fredoka";src:url(/fonts/fredoka.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"FC Caveat";src:url(/fonts/caveat.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"FC Bebas";src:url(/fonts/bebas-neue.woff2) format("woff2");font-weight:400;font-display:swap}
.heroArt{display:none}
.hero{position:relative}
body[data-skin=cat] .heroArt,body[data-skin=knit] .heroArt,body[data-skin=bass] .heroArt{display:block;position:absolute;right:-2px;top:2px;width:88px;height:88px;pointer-events:none}
.heroArt[hidden]{display:none!important}
.heroArt svg{width:100%;height:100%;overflow:visible}
.sk-cat .skNum{font-family:"FC Fredoka",ui-rounded,system-ui;font-weight:600}
.sk-knit .skNum{font-family:"FC Caveat",cursive;font-weight:700;font-size:34px}
.sk-bass .skNum{font-family:"FC Bebas",Impact,sans-serif;font-weight:400;font-size:34px;letter-spacing:.02em}
.sk-cat .skPrev{border-radius:26px}.sk-knit .skPrev{border-radius:12px}.sk-bass .skPrev{border-radius:8px}

/* ============================== CAT CAFÉ ============================== */
body[data-skin=cat]{--r:26px;--fur:#f2a65a;--fur2:#b86f2c;--ear:#ff9fb0;--ink:#3b2a24;
  --p1:#f4a9b8;--p2:#9fd3b7;--p3:#f1cf7a;--p4:#b9b0f2;--pd1:#f07895;--pd2:#4fb586;--pd3:#e9b13c;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 110'%3E%3Cg fill='rgba(255,179,138,0.06)'%3E%3Cg transform='translate(14 18) rotate(-18) scale(.9)'%3E%3Cg%3E%3Cellipse cx='12' cy='16' rx='5.6' ry='4.6'/%3E%3Cellipse cx='5' cy='9.5' rx='2.2' ry='2.8'/%3E%3Cellipse cx='9.4' cy='5' rx='2.2' ry='2.9'/%3E%3Cellipse cx='14.6' cy='5' rx='2.2' ry='2.9'/%3E%3Cellipse cx='19' cy='9.5' rx='2.2' ry='2.8'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(70 66) rotate(22) scale(.75)'%3E%3Cg%3E%3Cellipse cx='12' cy='16' rx='5.6' ry='4.6'/%3E%3Cellipse cx='5' cy='9.5' rx='2.2' ry='2.8'/%3E%3Cellipse cx='9.4' cy='5' rx='2.2' ry='2.9'/%3E%3Cellipse cx='14.6' cy='5' rx='2.2' ry='2.9'/%3E%3Cellipse cx='19' cy='9.5' rx='2.2' ry='2.8'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-size:220px 220px}
body[data-skin=cat][data-mode=light]{--p1:#ffc9d4;--p2:#c9ead7;--p3:#ffe3a3;--p4:#dcd6ff;--pd1:#e0607f;--pd2:#2f9c6a;--pd3:#c98f12;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 110'%3E%3Cg fill='rgba(201,95,54,0.07)'%3E%3Cg transform='translate(14 18) rotate(-18) scale(.9)'%3E%3Cg%3E%3Cellipse cx='12' cy='16' rx='5.6' ry='4.6'/%3E%3Cellipse cx='5' cy='9.5' rx='2.2' ry='2.8'/%3E%3Cellipse cx='9.4' cy='5' rx='2.2' ry='2.9'/%3E%3Cellipse cx='14.6' cy='5' rx='2.2' ry='2.9'/%3E%3Cellipse cx='19' cy='9.5' rx='2.2' ry='2.8'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(70 66) rotate(22) scale(.75)'%3E%3Cg%3E%3Cellipse cx='12' cy='16' rx='5.6' ry='4.6'/%3E%3Cellipse cx='5' cy='9.5' rx='2.2' ry='2.8'/%3E%3Cellipse cx='9.4' cy='5' rx='2.2' ry='2.9'/%3E%3Cellipse cx='14.6' cy='5' rx='2.2' ry='2.9'/%3E%3Cellipse cx='19' cy='9.5' rx='2.2' ry='2.8'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
body[data-skin=cat],body[data-skin=cat] button,body[data-skin=cat] input,body[data-skin=cat] textarea{font-family:"FC Fredoka",ui-rounded,"SF Pro Rounded",system-ui,sans-serif}
body[data-skin=cat] .big,body[data-skin=cat] .cxp,body[data-skin=cat] .tot .k,body[data-skin=cat] .meLvl{font-weight:600;letter-spacing:-.01em}
body[data-skin=cat] .title,body[data-skin=cat] .cardh b,body[data-skin=cat] .logHead h1{font-weight:600}
body[data-skin=cat] .eyebrow{color:var(--ac);font-weight:500}
/* level ring with ears */
body[data-skin=cat] .lvl:before,body[data-skin=cat] .lvl:after{content:"";position:absolute;top:-5px;width:13px;height:12px;background:var(--ac);clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:2px}
body[data-skin=cat] .lvl:before{left:3px;transform:rotate(-22deg)}body[data-skin=cat] .lvl:after{right:3px;transform:rotate(22deg)}
body[data-skin=cat] .lvl{background:radial-gradient(circle,var(--card) 62%,transparent 64%)}
body[data-skin=cat] .lvl .trk{stroke:var(--card2);stroke-width:4}body[data-skin=cat] .lvl .bar{stroke-width:4}
body[data-skin=cat] .streak{background:color-mix(in srgb,var(--p3) 26%,var(--card));border:1.5px solid color-mix(in srgb,var(--p3) 60%,var(--line))}
/* chart & macros: pastel café */
body[data-skin=cat] .chart .line{stroke-width:3.4}
body[data-skin=cat] .mac{border-radius:20px;border:0;padding:9px 12px}
body[data-skin=cat] .mac:nth-child(1){background:color-mix(in srgb,var(--p1) 24%,var(--card))}
body[data-skin=cat] .mac:nth-child(2){background:color-mix(in srgb,var(--p3) 24%,var(--card))}
body[data-skin=cat] .mac:nth-child(3){background:color-mix(in srgb,var(--p2) 24%,var(--card))}
body[data-skin=cat] .mac i{height:7px;border-radius:7px;background:color-mix(in srgb,var(--tx) 10%,transparent)}
body[data-skin=cat] .mac i:after{border-radius:7px}
body[data-skin=cat] .mac:nth-child(1) i:after{background:var(--pd1)}body[data-skin=cat] .mac:nth-child(2) i:after{background:var(--pd3)}body[data-skin=cat] .mac:nth-child(3) i:after{background:var(--pd2)}
/* soft, squishy cards */
body[data-skin=cat] .card,body[data-skin=cat] .bigIn,body[data-skin=cat] .res,body[data-skin=cat] .photoBox{border:1.5px solid var(--line);border-radius:26px;box-shadow:0 5px 0 -1px color-mix(in srgb,var(--line) 85%,transparent)}
body[data-skin=cat][data-mode=light] .card,body[data-skin=cat][data-mode=light] .bigIn,body[data-skin=cat][data-mode=light] .res{box-shadow:0 5px 0 -1px var(--line),0 10px 24px -14px rgba(120,60,30,.25)}
/* cat-ear tab headers */
body[data-skin=cat] .card>.cardh>b:first-child{position:relative;display:inline-block;padding:3px 12px 4px;margin:6px 0 0 -4px;border-radius:13px;background:color-mix(in srgb,var(--ac) 17%,var(--card2));font-size:15px}
body[data-skin=cat] .card>.cardh>b:first-child:before,body[data-skin=cat] .card>.cardh>b:first-child:after{content:"";position:absolute;top:-7px;width:12px;height:10px;background:inherit;clip-path:polygon(50% 0,100% 100%,0 100%)}
body[data-skin=cat] .card>.cardh>b:first-child:before{left:7px;transform:rotate(-14deg)}body[data-skin=cat] .card>.cardh>b:first-child:after{right:7px;transform:rotate(14deg)}
/* whisker / paw dividers */
body[data-skin=cat] .meal+.meal,body[data-skin=cat] .dayRow+.dayRow,body[data-skin=cat] .itSw+.itSw .it{border-top-color:transparent;background-image:radial-gradient(circle,color-mix(in srgb,var(--mut) 45%,transparent) 1.4px,transparent 1.8px);background-size:10px 4px;background-repeat:repeat-x;background-position:0 -1px}
body[data-skin=cat] .itSw+.itSw .it{background-color:var(--card)}
body[data-skin=cat] .card>.cardh:after{content:none}
body[data-skin=cat] .boardCard .prog:after{content:"";display:block;height:14px;margin:10px auto 0;width:110px;background:var(--mut);opacity:.35;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14'%3E%3Cg fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M2 4 Q16 1 30 5'/%3E%3Cpath d='M2 10 Q16 9 30 9'/%3E%3Cpath d='M70 5 Q84 1 98 4'/%3E%3Cpath d='M70 9 Q84 9 98 10'/%3E%3C/g%3E%3Ccircle cx='50' cy='7' r='2.6'/%3E%3Ccircle cx='42' cy='7' r='1.6'/%3E%3Ccircle cx='58' cy='7' r='1.6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14'%3E%3Cg fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M2 4 Q16 1 30 5'/%3E%3Cpath d='M2 10 Q16 9 30 9'/%3E%3Cpath d='M70 5 Q84 1 98 4'/%3E%3Cpath d='M70 9 Q84 9 98 10'/%3E%3C/g%3E%3Ccircle cx='50' cy='7' r='2.6'/%3E%3Ccircle cx='42' cy='7' r='1.6'/%3E%3Ccircle cx='58' cy='7' r='1.6'/%3E%3C/svg%3E") center/contain no-repeat}
/* doodles: a loaf cat on the board, one sitting on the tab bar */
body[data-skin=cat] .boardCard{position:relative}
body[data-skin=cat] .boardCard:before{content:"";position:absolute;right:22px;top:-19px;width:52px;height:23px;background:var(--fur);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 30'%3E%3Cpath d='M6 30 C6 16 14 10 22 10 L24 2 L30 8 L38 8 L44 2 L46 10 C52 12 56 18 56 24 C62 22 66 24 66 28 C66 30 64 30 62 29 C60 28 58 29 57 30 Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 30'%3E%3Cpath d='M6 30 C6 16 14 10 22 10 L24 2 L30 8 L38 8 L44 2 L46 10 C52 12 56 18 56 24 C62 22 66 24 66 28 C66 30 64 30 62 29 C60 28 58 29 57 30 Z'/%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none}
body[data-skin=cat] .tabs:before{content:"";position:absolute;left:calc(50% - 68px);top:-20px;width:19px;height:21px;background:var(--ac);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 48'%3E%3Cpath d='M10 34 C8 24 10 16 14 12 L12 2 L19 8 C21 7.4 23 7.4 25 8 L32 2 L30 12 C34 16 35 24 33 34 Z'/%3E%3Cpath d='M31 30 C38 30 40 36 38 44 C37 48 33 48 33 44 C34 40 34 36 30 35 Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 48'%3E%3Cpath d='M10 34 C8 24 10 16 14 12 L12 2 L19 8 C21 7.4 23 7.4 25 8 L32 2 L30 12 C34 16 35 24 33 34 Z'/%3E%3Cpath d='M31 30 C38 30 40 36 38 44 C37 48 33 48 33 44 C34 40 34 36 30 35 Z'/%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none;opacity:.95}
/* buttons */
body[data-skin=cat] .primary{border-radius:99px;font-weight:600;box-shadow:0 5px 0 color-mix(in srgb,var(--ac) 62%,#5a2a14),0 10px 24px var(--glow);transform:translateY(-2px)}
body[data-skin=cat] .primary:active{transform:translateY(2px);box-shadow:0 1px 0 color-mix(in srgb,var(--ac) 62%,#5a2a14)}
body[data-skin=cat] .secondary,body[data-skin=cat] .ghostBtn,body[data-skin=cat] .seg,body[data-skin=cat] .chip,body[data-skin=cat] .addRow button,body[data-skin=cat] .opt,body[data-skin=cat] .nudge button{border-radius:99px}
body[data-skin=cat] .opt{border-radius:22px}
body[data-skin=cat] .seg button{border-radius:99px}
body[data-skin=cat] .seg button.on{background:color-mix(in srgb,var(--ac) 20%,var(--card2));color:var(--tx)}
body[data-skin=cat] .chip.on{box-shadow:0 3px 0 color-mix(in srgb,var(--ac) 62%,#5a2a14)}
body[data-skin=cat] .bigIn .ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:24px;background:color-mix(in srgb,var(--p1) 40%,var(--card2))}
body[data-skin=cat] #camBtn .ic{background:color-mix(in srgb,var(--p2) 40%,var(--card2))}
body[data-skin=cat] textarea,body[data-skin=cat] input:not(.sw){border-radius:20px;border-width:1.5px}
body[data-skin=cat] .stepper button,body[data-skin=cat] .bigStep button,body[data-skin=cat] .it .q button{background:color-mix(in srgb,var(--p3) 30%,var(--card2));border:1.5px solid color-mix(in srgb,var(--p3) 55%,var(--line))}
/* nav: floating café pill */
body[data-skin=cat] .tabs{left:10px;right:10px;bottom:calc(6px + env(safe-area-inset-bottom));padding:8px 8px;border-radius:30px;border:1.5px solid var(--line);background:color-mix(in srgb,var(--card) 90%,transparent);box-shadow:0 10px 30px -10px rgba(0,0,0,.35)}
body[data-skin=cat] .tabs button{position:relative}
body[data-skin=cat] .tabs button.on{color:var(--ac)}
body[data-skin=cat] .tabs button.on:not(.logTab):after{content:"";position:absolute;bottom:-6px;width:9px;height:9px;background:var(--ac);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg%3E%3Cg%3E%3Cellipse cx='12' cy='16' rx='5.6' ry='4.6'/%3E%3Cellipse cx='5' cy='9.5' rx='2.2' ry='2.8'/%3E%3Cellipse cx='9.4' cy='5' rx='2.2' ry='2.9'/%3E%3Cellipse cx='14.6' cy='5' rx='2.2' ry='2.9'/%3E%3Cellipse cx='19' cy='9.5' rx='2.2' ry='2.8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg%3E%3Cg%3E%3Cellipse cx='12' cy='16' rx='5.6' ry='4.6'/%3E%3Cellipse cx='5' cy='9.5' rx='2.2' ry='2.8'/%3E%3Cellipse cx='9.4' cy='5' rx='2.2' ry='2.9'/%3E%3Cellipse cx='14.6' cy='5' rx='2.2' ry='2.9'/%3E%3Cellipse cx='19' cy='9.5' rx='2.2' ry='2.8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
/* history & me */
body[data-skin=cat] .cd{border-radius:50% 50% 46% 46%}
body[data-skin=cat] .cd.ok{box-shadow:inset 0 -3px 0 rgba(0,0,0,.1)}
body[data-skin=cat] #bars rect{rx:5px}
body[data-skin=cat] .stat{border-radius:22px;border:0}
body[data-skin=cat] .stat:nth-child(3n+1){background:color-mix(in srgb,var(--p1) 22%,var(--card))}
body[data-skin=cat] .stat:nth-child(3n+2){background:color-mix(in srgb,var(--p3) 22%,var(--card))}
body[data-skin=cat] .stat:nth-child(3n){background:color-mix(in srgb,var(--p2) 22%,var(--card))}
body[data-skin=cat] .meLvl{border-radius:46% 46% 42% 42%;position:relative;overflow:visible}
body[data-skin=cat] .meLvl:before,body[data-skin=cat] .meLvl:after{content:"";position:absolute;top:-9px;width:22px;height:20px;background:var(--ac);clip-path:polygon(50% 0,100% 100%,0 100%)}
body[data-skin=cat] .meLvl:before{left:4px;transform:rotate(-18deg)}body[data-skin=cat] .meLvl:after{right:4px;transform:rotate(18deg)}
body[data-skin=cat] .xpbar{height:10px}body[data-skin=cat] .xpbar i{background:linear-gradient(90deg,var(--pd1),var(--ac))}
body[data-skin=cat] .sheetBody{border-radius:32px 32px 0 0}
body[data-skin=cat] .sheetBody:before{content:"";display:block;width:44px;height:20px;margin:-8px auto 8px;background:var(--line);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 40'%3E%3Cpath d='M6 26 C6 14 10 10 10 10 L8 1 L17 6 C19 5.5 25 5.5 27 6 L36 1 L34 10 C34 10 38 14 38 26 C38 34 30 38 22 38 C14 38 6 34 6 26 Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 40'%3E%3Cpath d='M6 26 C6 14 10 10 10 10 L8 1 L17 6 C19 5.5 25 5.5 27 6 L36 1 L34 10 C34 10 38 14 38 26 C38 34 30 38 22 38 C14 38 6 34 6 26 Z'/%3E%3C/svg%3E") center/contain no-repeat}
body[data-skin=cat] .toast{border-radius:22px}
body[data-skin=cat] .tile{border-radius:20px}
/* hero art palette + rewards: tail wag */
.heroArt .haPct{font:600 17px "FC Fredoka",ui-rounded,system-ui;fill:var(--tx)}.heroArt .haLbl{font:500 9px "FC Fredoka",ui-rounded,system-ui;fill:var(--mut)}
.heroArt .haTail{animation:tailWag 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:0 0}
@keyframes tailWag{0%,70%,100%{rotate:0deg}78%{rotate:-14deg}86%{rotate:10deg}93%{rotate:-6deg}}
.cel-cat .catTail{width:54px;height:62px;margin-top:4px;transform-origin:50% 100%;animation:tailSwish 1s ease-in-out infinite alternate}
.cel-cat .catTail path{fill:none;stroke:var(--fur,#f2a65a);stroke-width:7;stroke-linecap:round}
@keyframes tailSwish{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}
.cel-cat .palPop .pa{transform-origin:50% 100%;animation:catWag 1.1s .9s ease-in-out infinite}
@keyframes catWag{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}
.cel-cat .cxp,.cel-cat .chead,.cel-cat .reason{font-family:"FC Fredoka",ui-rounded,system-ui}
.cel-cat .reason{border-radius:16px;background:color-mix(in srgb,var(--ac) 14%,transparent)}
.cat-art{}

/* =========================== STITCH & SKEIN =========================== */
body[data-skin=knit]{--r:16px;--yarn:#e07a5f;--yarnD:#9c4a33;--needle:#c9a67a;--knob:#e9b44c;--sw0:#e07a5f;--sw1:#e9b44c;--sw2:#8fb07c;--sw3:#7f9cc4;
  --hand:"FC Caveat","Bradley Hand","Noteworthy",cursive;--serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,ui-serif,serif;
  background-image:repeating-linear-gradient(0deg,rgba(255,240,220,.025) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(255,240,220,.02) 0 1px,transparent 1px 4px)}
body[data-skin=knit][data-mode=light]{--needle:#a8834f;--yarn:#d0664a;--yarnD:#8a3b25;background-image:repeating-linear-gradient(0deg,rgba(110,70,30,.035) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(110,70,30,.03) 0 1px,transparent 1px 4px)}
body[data-skin=knit],body[data-skin=knit] button,body[data-skin=knit] input,body[data-skin=knit] textarea{font-family:var(--serif)}
body[data-skin=knit] .big{font-family:var(--hand);font-weight:700;font-size:70px;letter-spacing:0;line-height:.95}
body[data-skin=knit] .big small{font-family:var(--serif);font-style:italic}
body[data-skin=knit] .eyebrow{font-family:var(--hand);font-size:22px;font-weight:600;color:var(--ac);letter-spacing:0}
body[data-skin=knit] .logHead h1{font-family:var(--hand);font-size:36px;font-weight:700;letter-spacing:0}
body[data-skin=knit] .title{font-family:var(--hand);font-size:21px;font-weight:700;line-height:1}
body[data-skin=knit] .mini .k,body[data-skin=knit] .tot .k,body[data-skin=knit] .stat b,body[data-skin=knit] .meLvl,body[data-skin=knit] .bigStep b{font-family:var(--hand);font-weight:700}
body[data-skin=knit] .tot .k{font-size:40px}body[data-skin=knit] .stat b{font-size:26px}body[data-skin=knit] .mini .k{font-size:28px}
/* level ring = yarn ball on crossed needles */
body[data-skin=knit] .lvl:before{content:"";position:absolute;inset:-7px;background:linear-gradient(45deg,transparent 47%,var(--needle) 47% 53%,transparent 53%),linear-gradient(-45deg,transparent 47%,var(--needle) 47% 53%,transparent 53%);z-index:-1;border-radius:4px;-webkit-mask:radial-gradient(circle,transparent 25px,#000 26px);mask:radial-gradient(circle,transparent 25px,#000 26px)}
body[data-skin=knit] .lvl{background:radial-gradient(circle,var(--card) 64%,transparent 66%);isolation:isolate}
body[data-skin=knit] .lvl .trk{stroke:color-mix(in srgb,var(--yarn) 30%,var(--card2));stroke-width:4;stroke-dasharray:2 1.4}
body[data-skin=knit] .lvl .bar{stroke:var(--yarn);stroke-width:4;stroke-linecap:butt}
body[data-skin=knit] .lvl span{font-family:var(--hand);font-size:19px;position:relative;z-index:1}
body[data-skin=knit] .streak{border-radius:8px;border:1.5px dashed color-mix(in srgb,var(--ac) 55%,var(--line));background:var(--card)}
/* chart = running stitch */
body[data-skin=knit] .chart .line{stroke-dasharray:7 4;stroke-width:3;filter:none}
body[data-skin=knit] .chart .dot{fill:var(--yarn)}
/* quilted patches */
body[data-skin=knit] .card,body[data-skin=knit] .bigIn,body[data-skin=knit] .res,body[data-skin=knit] .mac,body[data-skin=knit] .stat,body[data-skin=knit] .photoBox{position:relative;border:1px solid var(--line);border-radius:14px;box-shadow:0 2px 0 color-mix(in srgb,var(--line) 80%,transparent)}
body[data-skin=knit] .card:after,body[data-skin=knit] .bigIn:after,body[data-skin=knit] .res:after,body[data-skin=knit] .mac:after,body[data-skin=knit] .stat:after{content:"";position:absolute;inset:4px;border:1.5px dashed color-mix(in srgb,var(--ac) 32%,transparent);border-radius:10px;pointer-events:none}
body[data-skin=knit] .palCard,body[data-skin=knit] .meCard{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cg fill='none' stroke='rgba(255,236,214,0.05)' stroke-width='1.6'%3E%3Cpath d='M1 1 L6 9 L11 1'/%3E%3Cpath d='M13 1 L18 9 L23 1'/%3E%3C/g%3E%3C/svg%3E");background-size:14px 7px}
body[data-skin=knit][data-mode=light] .palCard,body[data-skin=knit][data-mode=light] .meCard{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cg fill='none' stroke='rgba(120,70,40,0.06)' stroke-width='1.6'%3E%3Cpath d='M1 1 L6 9 L11 1'/%3E%3Cpath d='M13 1 L18 9 L23 1'/%3E%3C/g%3E%3C/svg%3E")}
body[data-skin=knit] .boardCard,body[data-skin=knit] #v-history .card:nth-of-type(2){background-image:linear-gradient(90deg,color-mix(in srgb,var(--ac) 5%,transparent) 50%,transparent 50%),linear-gradient(color-mix(in srgb,var(--ac) 5%,transparent) 50%,transparent 50%);background-size:22px 22px}
body[data-skin=knit] .snackBtn{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--sw2) 12%,var(--card)) 0 8px,var(--card) 8px 16px)}
/* ribbon/label headers */
body[data-skin=knit] .card>.cardh>b:first-child{display:inline-block;font-family:var(--hand);font-size:22px;font-weight:700;line-height:1.05;padding:1px 18px 3px 14px;margin-left:-15px;background:color-mix(in srgb,var(--ac) 88%,#000 0%);color:var(--on-ac);clip-path:polygon(0 0,100% 0,calc(100% - 9px) 50%,100% 100%,0 100%);position:relative;z-index:1}
body[data-skin=knit] .card>.cardh{align-items:center}
body[data-skin=knit] .linkBtn{font-family:var(--hand);font-size:19px}
/* stitched dividers */
body[data-skin=knit] .meal,body[data-skin=knit] .dayRow,body[data-skin=knit] .it,body[data-skin=knit] .setRow,body[data-skin=knit] .gi{border-top-style:dashed;border-top-width:1.5px}
/* macros: knit bars (stitch texture) */
body[data-skin=knit] .mac{padding:9px 12px}
body[data-skin=knit] .mac i{height:9px;border-radius:5px;background:color-mix(in srgb,var(--tx) 9%,transparent)}
body[data-skin=knit] .mac i:after{border-radius:5px;background-color:var(--sw0);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cg fill='none' stroke='rgba(120,70,40,0.09)' stroke-width='1.6'%3E%3Cpath d='M1 1 L6 9 L11 1'/%3E%3Cpath d='M13 1 L18 9 L23 1'/%3E%3C/g%3E%3C/svg%3E");background-size:8px 4px}
body[data-skin=knit] .mac:nth-child(2) i:after{background-color:var(--sw1)}body[data-skin=knit] .mac:nth-child(3) i:after{background-color:var(--sw2)}
/* buttons: fabric labels and sewn-on buttons */
body[data-skin=knit] .primary{border-radius:8px;outline:1.5px dashed color-mix(in srgb,var(--on-ac) 55%,transparent);outline-offset:-6px;box-shadow:0 3px 0 color-mix(in srgb,var(--ac) 65%,#000),0 8px 20px var(--glow);font-family:var(--serif);letter-spacing:.01em}
body[data-skin=knit] .chip{border-radius:6px 14px 14px 6px;padding-left:20px;background-image:radial-gradient(circle at 9px 50%,var(--bg) 2.6px,color-mix(in srgb,var(--mut) 60%,transparent) 3.2px,transparent 3.8px)}
body[data-skin=knit] .chip.on{background-image:radial-gradient(circle at 9px 50%,var(--bg) 2.6px,transparent 3.2px)}
body[data-skin=knit] .seg{border-radius:10px;border-style:dashed}
body[data-skin=knit] .seg button{border-radius:7px}
body[data-skin=knit] .ghostBtn{border-radius:10px;border-width:1.5px;font-family:var(--serif)}
body[data-skin=knit] textarea,body[data-skin=knit] input:not(.sw){border-radius:10px;border-style:dashed;border-width:1.5px}
body[data-skin=knit] .bigIn .ic{font-size:30px}
body[data-skin=knit] .bigIn b{font-family:var(--hand);font-size:24px;line-height:1}
body[data-skin=knit] .stepper button,body[data-skin=knit] .bigStep button,body[data-skin=knit] .it .q button,body[data-skin=knit] .itX{position:relative}
body[data-skin=knit] .stepper button,body[data-skin=knit] .bigStep button,body[data-skin=knit] .it .q button{border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--sw1) 35%,var(--card2)) 58%,color-mix(in srgb,var(--sw1) 55%,var(--card2)) 60%);border:1.5px solid color-mix(in srgb,var(--sw1) 60%,var(--line))}
/* log button = sewn-on button: four holes, the + is the thread */
body[data-skin=knit] .tabs .logTab span{color:transparent;background:
  linear-gradient(var(--thread),var(--thread)) 50% 50%/3px 24px no-repeat,
  linear-gradient(var(--thread),var(--thread)) 50% 50%/24px 3px no-repeat,
  radial-gradient(circle at 50% 28%,rgba(0,0,0,.45) 3.2px,transparent 3.8px),radial-gradient(circle at 50% 72%,rgba(0,0,0,.45) 3.2px,transparent 3.8px),
  radial-gradient(circle at 28% 50%,rgba(0,0,0,.45) 3.2px,transparent 3.8px),radial-gradient(circle at 72% 50%,rgba(0,0,0,.45) 3.2px,transparent 3.8px),
  radial-gradient(circle,var(--ac) 56%,color-mix(in srgb,var(--ac) 78%,#000) 58% 63%,var(--ac) 65%);
  --thread:#fff5e6;box-shadow:0 6px 20px var(--glow),inset 0 -3px 0 rgba(0,0,0,.18)}
/* nav: linen strip with a stitched hem */
body[data-skin=knit] .tabs{border-top:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px),color-mix(in srgb,var(--card) 94%,transparent)}
body[data-skin=knit] .tabs:before{content:"";position:absolute;left:0;right:0;top:5px;border-top:1.5px dashed color-mix(in srgb,var(--ac) 45%,transparent)}
body[data-skin=knit] .tabs button{font-family:var(--hand);font-size:15px;font-weight:700;position:relative}
body[data-skin=knit] .tabs button.on{color:var(--ac)}
body[data-skin=knit] .tabs button.on:not(.logTab):after{content:"";position:absolute;bottom:-1px;left:50%;width:26px;height:4px;transform:translateX(-50%);background:repeating-linear-gradient(90deg,var(--ac) 0 5px,transparent 5px 8px)}
/* history & me */
body[data-skin=knit] .cd{border-radius:6px}
body[data-skin=knit] .cd.ok{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cg fill='none' stroke='rgba(255,236,214,0.09)' stroke-width='1.6'%3E%3Cpath d='M1 1 L6 9 L11 1'/%3E%3Cpath d='M13 1 L18 9 L23 1'/%3E%3C/g%3E%3C/svg%3E");background-size:10px 5px}
body[data-skin=knit][data-mode=light] .cd.ok{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cg fill='none' stroke='rgba(255,236,214,0.09)' stroke-width='1.6'%3E%3Cpath d='M1 1 L6 9 L11 1'/%3E%3Cpath d='M13 1 L18 9 L23 1'/%3E%3C/g%3E%3C/svg%3E")}
body[data-skin=knit] .meLvl{border-radius:12px;outline:1.5px dashed color-mix(in srgb,var(--on-ac) 60%,transparent);outline-offset:-6px;font-size:32px}
body[data-skin=knit] .xpbar{height:10px;border-radius:5px}
body[data-skin=knit] .xpbar i{background-color:var(--ac);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cg fill='none' stroke='rgba(120,70,40,0.09)' stroke-width='1.6'%3E%3Cpath d='M1 1 L6 9 L11 1'/%3E%3Cpath d='M13 1 L18 9 L23 1'/%3E%3C/g%3E%3C/svg%3E");background-size:8px 4px}
body[data-skin=knit] .sheetBody{border-radius:18px 18px 0 0}
body[data-skin=knit] .sheetBody:before{content:"";display:block;margin:-6px 18px 12px;border-top:1.5px dashed color-mix(in srgb,var(--ac) 45%,transparent)}
body[data-skin=knit] .sheetBody h2{font-family:var(--hand);font-size:30px}
body[data-skin=knit] .toast{border-radius:10px;border-style:dashed}
body[data-skin=knit] .tile{border-radius:10px}
body[data-skin=knit] .tile small{font-family:var(--serif)}
body[data-skin=knit] .album .alb span{font-family:var(--hand);font-size:16px}
/* hero art + reward */
.heroArt .knitLbl{font:700 15px "FC Caveat",cursive;fill:var(--ac)}
.heroArt .haThread{stroke-dasharray:160;stroke-dashoffset:0;animation:thread 1.4s ease-out both}
@keyframes thread{from{stroke-dashoffset:160}}
.cel-knit .yarnStrand{width:240px;height:30px;margin-top:10px}
.cel-knit .yarnStrand path{fill:none;stroke:var(--yarn,#e07a5f);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.2s .3s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.cel-knit .cxp,.cel-knit .chead{font-family:"FC Caveat",cursive;letter-spacing:0}
.cel-knit .chead{font-size:26px;text-transform:none}
.cel-knit .cxp{font-size:92px;font-weight:700}
.cel-knit .reason{border-radius:8px;border:1.5px dashed color-mix(in srgb,var(--ac) 45%,transparent);background:color-mix(in srgb,var(--ac) 9%,transparent)}

/* ============================== LOW END =============================== */
body[data-skin=bass]{--r:10px;--bezel:#1d1b1a;--screw:#8a8a94;--poster:"FC Bebas","DIN Condensed","Avenir Next Condensed",Impact,sans-serif;
  background-image:radial-gradient(ellipse 90% 40% at 50% -6%,color-mix(in srgb,var(--ac) 16%,transparent),transparent 70%),repeating-linear-gradient(45deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),repeating-linear-gradient(-45deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px);background-attachment:fixed,scroll,scroll}
body[data-skin=bass][data-mode=light]{--bezel:#2a2724;--screw:#a5a29a;background-image:radial-gradient(ellipse 90% 40% at 50% -6%,color-mix(in srgb,var(--ac) 12%,transparent),transparent 70%),repeating-linear-gradient(45deg,rgba(0,0,0,.025) 0 1px,transparent 1px 3px),repeating-linear-gradient(-45deg,rgba(0,0,0,.03) 0 1px,transparent 1px 3px)}
body[data-skin=bass] .big,body[data-skin=bass] .cxp,body[data-skin=bass] .tot .k,body[data-skin=bass] .mini .k,body[data-skin=bass] .stat b,body[data-skin=bass] .meLvl,body[data-skin=bass] .bigStep b,body[data-skin=bass] .logHead h1,body[data-skin=bass] .title,body[data-skin=bass] .lvl span{font-family:var(--poster);font-weight:400;letter-spacing:.02em}
body[data-skin=bass] .big{font-size:76px;line-height:.9}
body[data-skin=bass] .big small{font-family:var(--poster);font-size:22px;letter-spacing:.1em}
body[data-skin=bass] .eyebrow{font-family:var(--poster);font-size:17px;letter-spacing:.16em;text-transform:uppercase;color:var(--ac)}
body[data-skin=bass] .logHead h1{font-size:40px;line-height:1}
body[data-skin=bass] .title{font-size:20px;letter-spacing:.06em}
body[data-skin=bass] .tot .k{font-size:44px}body[data-skin=bass] .stat b{font-size:28px}body[data-skin=bass] .mini .k{font-size:30px}
/* level ring = dial with ticks */
body[data-skin=bass] .lvl{background:radial-gradient(circle at 50% 38%,#3a3a42,#16161a 62%,transparent 64%);color:#fff;border-radius:50%}
body[data-skin=bass] .lvl:before{content:"";position:absolute;inset:-5px;border-radius:50%;background:repeating-conic-gradient(var(--mut) 0 3deg,transparent 3deg 30deg);-webkit-mask:radial-gradient(circle,transparent 23px,#000 24px);mask:radial-gradient(circle,transparent 23px,#000 24px);opacity:.7}
body[data-skin=bass] .lvl .trk{stroke:#2a2a31}
body[data-skin=bass] .lvl .bar{filter:drop-shadow(0 0 3px var(--ac))}
body[data-skin=bass] .lvl span{font-size:19px;position:relative}
body[data-skin=bass] .streak{border-radius:6px;font-family:var(--poster);letter-spacing:.06em;font-size:19px;box-shadow:0 0 14px color-mix(in srgb,var(--ac) 25%,transparent);border-color:color-mix(in srgb,var(--ac) 45%,var(--line))}
/* hero: grille cloth behind the number */
body[data-skin=bass] .hero{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='rgba(255,255,255,0.07)'%3E%3Ccircle cx='3' cy='3' r='1.1'/%3E%3Ccircle cx='9' cy='9' r='1.1'/%3E%3C/g%3E%3C/svg%3E");background-size:9px 9px;border-radius:12px}
body[data-skin=bass][data-mode=light] .hero{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='rgba(0,0,0,0.08)'%3E%3Ccircle cx='3' cy='3' r='1.1'/%3E%3Ccircle cx='9' cy='9' r='1.1'/%3E%3C/g%3E%3C/svg%3E")}
body[data-skin=bass] .chart .line{stroke-width:2.6;filter:drop-shadow(0 0 5px var(--ac))}
/* amp panels with corner screws */
body[data-skin=bass] .card,body[data-skin=bass] .bigIn,body[data-skin=bass] .res,body[data-skin=bass] .stat,body[data-skin=bass] .photoBox{border-radius:10px;border:1px solid var(--line);
  background:radial-gradient(circle at 9px 9px,var(--screw) 1.6px,rgba(0,0,0,.4) 2.1px,transparent 2.8px),radial-gradient(circle at calc(100% - 9px) 9px,var(--screw) 1.6px,rgba(0,0,0,.4) 2.1px,transparent 2.8px),
  radial-gradient(circle at 9px calc(100% - 9px),var(--screw) 1.6px,rgba(0,0,0,.4) 2.1px,transparent 2.8px),radial-gradient(circle at calc(100% - 9px) calc(100% - 9px),var(--screw) 1.6px,rgba(0,0,0,.4) 2.1px,transparent 2.8px),
  linear-gradient(180deg,color-mix(in srgb,var(--card) 92%,#fff 8%),var(--card) 40%);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 2px 0 rgba(0,0,0,.3)}
body[data-skin=bass][data-mode=light] .card,body[data-skin=bass][data-mode=light] .bigIn,body[data-skin=bass][data-mode=light] .res,body[data-skin=bass][data-mode=light] .stat{box-shadow:inset 0 1px 0 #fff,0 2px 0 rgba(0,0,0,.06)}
body[data-skin=bass] .stat{background-size:auto}
body[data-skin=bass] .snackBtn{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='rgba(255,255,255,0.07)'%3E%3Ccircle cx='3' cy='3' r='1.1'/%3E%3Ccircle cx='9' cy='9' r='1.1'/%3E%3C/g%3E%3C/svg%3E") 0 0/7px 7px,linear-gradient(140deg,color-mix(in srgb,var(--ac) 20%,var(--card)),var(--card));border-color:color-mix(in srgb,var(--ac) 35%,var(--line))}
body[data-skin=bass][data-mode=light] .snackBtn{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='rgba(0,0,0,0.08)'%3E%3Ccircle cx='3' cy='3' r='1.1'/%3E%3Ccircle cx='9' cy='9' r='1.1'/%3E%3C/g%3E%3C/svg%3E") 0 0/7px 7px,linear-gradient(140deg,color-mix(in srgb,var(--ac) 14%,var(--card)),var(--card))}

/* headers: faceplate label with an LED */
body[data-skin=bass] .card>.cardh>b:first-child{font-family:var(--poster);font-weight:400;font-size:21px;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
body[data-skin=bass] .card>.cardh>b:first-child:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ac);box-shadow:0 0 8px var(--ac),0 0 2px var(--ac)}
body[data-skin=bass] .linkBtn,body[data-skin=bass] .cardh .muted{font-family:var(--poster);font-size:16px;letter-spacing:.08em;font-weight:400}
/* fret-marker dot dividers */
body[data-skin=bass] .meal+.meal,body[data-skin=bass] .dayRow+.dayRow{border-top-color:transparent;background:radial-gradient(circle at calc(50% - 7px) 1px,var(--mut) 1.8px,transparent 2.4px),radial-gradient(circle at calc(50% + 7px) 1px,var(--mut) 1.8px,transparent 2.4px),linear-gradient(var(--line),var(--line)) 0 0/calc(50% - 16px) 1px no-repeat,linear-gradient(var(--line),var(--line)) 100% 0/calc(50% - 16px) 1px no-repeat}
/* macros: VU segments */
body[data-skin=bass] .mac{border-radius:6px;border:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--card) 90%,#fff 10%),var(--card))}
body[data-skin=bass] .mac b{font-family:var(--poster);font-weight:400;font-size:20px;letter-spacing:.03em}
body[data-skin=bass] .mac i{height:8px;border-radius:1px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--tx) 12%,transparent) 0 5px,transparent 5px 7px)}
body[data-skin=bass] .mac i:after{border-radius:0;background:var(--ac);box-shadow:0 0 6px var(--ac);-webkit-mask:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 7px);mask:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 7px)}
/* buttons: backlit footswitch, knobs */
body[data-skin=bass] .primary{border-radius:8px;font-family:var(--poster);font-weight:400;font-size:22px;letter-spacing:.08em;text-transform:uppercase;background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 78%,#fff),var(--ac) 45%,color-mix(in srgb,var(--ac) 82%,#000));box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 3px 0 rgba(0,0,0,.45),0 0 26px var(--glow);padding:13px}
body[data-skin=bass] .secondary,body[data-skin=bass] .ghostBtn,body[data-skin=bass] .addRow button{border-radius:6px;font-family:var(--poster);font-weight:400;font-size:18px;letter-spacing:.08em}
body[data-skin=bass] .chip{border-radius:5px}
body[data-skin=bass] .chip.on{box-shadow:0 0 12px var(--glow)}
body[data-skin=bass] .seg{border-radius:8px;background:#101013;border-color:#2a2a31}
body[data-skin=bass][data-mode=light] .seg{background:#2a2a30;border-color:#2a2a30}
body[data-skin=bass] .seg button{border-radius:5px;color:#a0a0ac}
body[data-skin=bass] .seg button.on{background:linear-gradient(#3a3a42,#26262c);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px #000}
body[data-skin=bass] .seg button em{color:var(--ac)}
body[data-skin=bass] textarea,body[data-skin=bass] input:not(.sw){border-radius:6px}
body[data-skin=bass] .stepper button,body[data-skin=bass] .bigStep button,body[data-skin=bass] .it .q button{border:0;border-radius:50%;color:#fff;background:radial-gradient(circle at 50% 38%,#4a4a54,#1b1b20 58%,transparent 60%),repeating-conic-gradient(#2c2c33 0 9deg,#141418 9deg 18deg);box-shadow:0 2px 4px rgba(0,0,0,.45)}
body[data-skin=bass] .sw:checked{box-shadow:0 0 10px var(--glow)}
body[data-skin=bass] .bigIn .ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:22px;background:radial-gradient(circle,#0c0c0f 30%,#2d2d34 32% 52%,#9a9aa6 54% 58%,#26262c 60%)}
body[data-skin=bass] .bigIn b{font-family:var(--poster);font-weight:400;font-size:24px;letter-spacing:.06em}
/* nav: brushed-metal control strip, LED on the active channel */
body[data-skin=bass] .tabs{border-top:1px solid #2c2c33;background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),linear-gradient(#1d1d22,#111114);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
body[data-skin=bass][data-mode=light] .tabs{border-top-color:#cfcdc6;background:repeating-linear-gradient(90deg,rgba(0,0,0,.025) 0 1px,transparent 1px 3px),linear-gradient(#f3f2ef,#e1dfd9);box-shadow:inset 0 1px 0 #fff}
body[data-skin=bass] .tabs button{font-family:var(--poster);font-weight:400;font-size:14px;letter-spacing:.1em;position:relative}
body[data-skin=bass] .tabs button.on{color:var(--ac)}
body[data-skin=bass] .tabs button:not(.logTab):before{content:"";position:absolute;top:-2px;width:5px;height:5px;border-radius:50%;background:#3a3a42}
body[data-skin=bass] .tabs button.on:not(.logTab):before{background:var(--ac);box-shadow:0 0 8px var(--ac),0 0 2px var(--ac)}
body[data-skin=bass] .tabs .logTab span{background:radial-gradient(circle,#2b2b31 0 24%,#141418 26% 56%,var(--ac) 58% 64%,#1c1c21 66%);color:#fff;box-shadow:0 6px 24px var(--glow),inset 0 0 0 2px #333}
/* history & me */
body[data-skin=bass] .cd{border-radius:4px}
body[data-skin=bass] .cd.ok{box-shadow:0 0 10px color-mix(in srgb,var(--ac) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.35)}
body[data-skin=bass] .meLvl{border-radius:10px;font-size:34px;background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 80%,#fff),var(--ac) 50%,color-mix(in srgb,var(--ac) 82%,#000));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 24px var(--glow)}
body[data-skin=bass] .meLvl small{font-family:var(--poster);font-size:11px}
body[data-skin=bass] .xpbar{height:10px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 8px)}
body[data-skin=bass] .xpbar i{border-radius:0;background:linear-gradient(90deg,#2be38a,var(--ac) 70%,#ff5a3d);-webkit-mask:repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 8px);mask:repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 8px)}
body[data-skin=bass] .sheetBody{border-radius:12px 12px 0 0;border-top:2px solid var(--ac);box-shadow:0 -10px 40px -10px var(--glow)}
body[data-skin=bass] .sheetBody h2{font-family:var(--poster);font-weight:400;font-size:32px;letter-spacing:.04em}
body[data-skin=bass] .toast{border-radius:6px}
body[data-skin=bass] .tile{border-radius:6px}
body[data-skin=bass] .tile.lit{box-shadow:0 0 14px color-mix(in srgb,var(--ac) 30%,transparent)}
/* hero art + reward */
.heroArt .vuTxt{font:400 13px "FC Bebas",Impact,sans-serif;fill:#2a2420;letter-spacing:.1em}.heroArt .vuSm{font:700 9px system-ui;fill:#2a2420}
.heroArt .vuNeedle{transform-origin:50px 78px;transition:transform 1.2s cubic-bezier(.3,1.6,.5,1)}
.heroArt .vuLed{filter:drop-shadow(0 0 3px var(--ac))}
.cel-bass .cxp,.cel-bass .chead,.cel-bass .reason b{font-family:"FC Bebas",Impact,sans-serif;font-weight:400;letter-spacing:.04em}
.cel-bass .cxp{font-size:110px}.cel-bass .chead{font-size:24px;letter-spacing:.14em}
.cel-bass .reason{border-radius:4px;background:color-mix(in srgb,var(--ac) 9%,transparent);border:1px solid color-mix(in srgb,var(--ac) 28%,transparent)}

/* motion preferences: art stays, movement stops */
body.calm .heroArt *,body.calm .catTail,body.calm .palPop .pa{animation:none!important}
@media (prefers-reduced-motion:reduce){.heroArt *,.catTail,.palPop .pa{animation:none!important}.heroArt .vuNeedle{transition:none}}
/* Round 6b: Plec pick finishes follow the Low End palette (celluloid looks; same in light + dark) */
body[data-skin=bass]{--pk1:#f2a94e;--pk2:#a8501a;--pkS:#3e1a07;--pkSo:.55;--pkInk:#1e0c04;--pkFoil:#ffe08a}
body[data-skin=bass][data-sp=neon]{--pk1:#ff8ae6;--pk2:#7b5cff;--pkS:#ffffff;--pkSo:.28;--pkInk:#26061f;--pkFoil:#3ee8ff}
body[data-skin=bass][data-sp=tolex]{--pk1:#8fd0ff;--pk2:#2a6cb8;--pkS:#0d2f5a;--pkSo:.35;--pkInk:#06182e;--pkFoil:#ffd34d}
body[data-skin=bass][data-sp=mono]{--pk1:#f6f3ec;--pk2:#cfcabe;--pkS:#8a857a;--pkSo:.3;--pkInk:#1a1a1a;--pkFoil:#9a9a9a}
body[data-skin=bass] .pet-bass .pb{animation:pickBob 1.8s ease-in-out infinite}
body[data-skin=bass] .pet-bass.pm-sleepy .pb{animation-duration:4s}
@keyframes pickBob{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-2px) rotate(-2deg)}50%{transform:translateY(0) rotate(0)}75%{transform:translateY(-2px) rotate(2deg)}}