:root{--paper:#f8f3e8;--ink:#423d30;--muted:#8a8372;--rust:#ad5b3b;--sage:#6f7d66;--card:#fffdf4;--card-radius:7px;--step:25px;color-scheme:light}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:14px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.025' filter='url(%23n)'/%3E%3C/svg%3E")}
button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}button:disabled{opacity:.38;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #e6b44f;outline-offset:4px}button{transition:background .18s,transform .18s,box-shadow .18s}button:hover:not(:disabled){filter:brightness(.96)}button:active:not(:disabled){transform:translateY(1px)}svg{width:20px;height:20px;display:block}button svg{flex-shrink:0}.svg-library{position:absolute;width:0;height:0;overflow:hidden}.page-shell{max-width:1110px;margin:auto;padding:0 40px;position:relative;z-index:1}.site-header{height:77px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e4ddce}.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ink)}.brand svg{width:25px;height:25px;color:var(--rust);transform:rotate(-14deg)}.brand span{font-size:10px;letter-spacing:2.4px;font-weight:600}.header-actions{display:flex;align-items:center;gap:23px}.icon-button{display:grid;place-items:center;padding:7px;border-radius:50%;color:#77735f}.help-button{display:flex;align-items:center;gap:8px;font-size:12px}.question-mark{border:1.4px solid #7b7768;border-radius:50%;width:17px;height:17px;display:grid;place-items:center;font-size:11px}.hero{display:flex;align-items:center;justify-content:space-between;min-height:213px;gap:12px}.hero-copy{padding:8px 0 14px}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:600;color:#8a7d60;display:flex;gap:7px;align-items:center}.eyebrow>span{height:5px;width:5px;background:#b97b45;border-radius:50%}h1{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:47px;letter-spacing:-1.9px;line-height:1.12;margin:13px 0 12px}h1 em{font-style:normal;display:block;color:var(--rust)}.hero-copy>p{margin:0;font-size:12px;color:#827969}.hero-art{width:385px;height:190px;margin-right:9px;flex-shrink:0}.game{border:1px solid #d7d2c3;border-radius:13px;overflow:hidden;box-shadow:0 8px 25px #5342260a;background:#fcf9f0}.game-top{display:flex;align-items:center;justify-content:space-between;padding:17px 25px;gap:20px}.game-name{display:flex;align-items:center;gap:9px;font-size:9px;letter-spacing:1.3px;font-weight:600;white-space:nowrap}.green-dot{width:6px;height:6px;border-radius:50%;background:#7a886b}.divider{color:#d0c6b2;margin:0 4px}.stats{display:flex;gap:36px;margin-left:auto;margin-right:17px}.stats>div{display:flex;flex-direction:column;gap:5px;min-width:39px;align-items:center}.stats span{font-size:8px;letter-spacing:1.6px;color:#958b78}.stats strong{font-weight:500;font-size:15px;font-variant-numeric:tabular-nums;line-height:1}.new-game{background:var(--rust);color:#fff9ed;border-radius:6px;padding:10px 16px;font-size:11px;white-space:nowrap;display:flex;gap:8px;align-items:center}.new-game>span{font-size:18px;line-height:12px}.felt{padding:24px 32px 16px;background-color:var(--sage);background-image:radial-gradient(ellipse at 50% 0%,#ffffff08,transparent 70%),url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.045' filter='url(%23n)'/%3E%3C/svg%3E");position:relative;user-select:none;-webkit-user-select:none}.seven-columns{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:25px}.top-piles{align-items:start}.pile-group{position:relative}.pile-label{display:block;font-size:7px;color:#e0e4d3b3;font-weight:500;letter-spacing:1.3px;text-align:center;margin-bottom:12px;white-space:nowrap}.pile-slot{width:100%;aspect-ratio:5/7;border-radius:var(--card-radius);position:relative;border:1.5px solid #e5e8d336;display:flex;align-items:center;justify-content:center}.stock{padding:0;border:none;background:#e9cd8d;box-shadow:0 2px 0 #ba9e65,0 4px 0 #d9bd7b,0 5px 0 #ba9e65,0 4px 9px #28302230;touch-action:manipulation}.back-design{position:absolute;inset:6px;border:1px solid #fff5d578;border-radius:3px;background:radial-gradient(circle at 25% 25%,#c4a36a4d 1px,transparent 2px);background-size:12px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;pointer-events:none}.back-design:before,.back-design:after{content:'✦';position:absolute;color:#aa7b3f7a;font-size:10px;left:8px;top:5px}.back-design:after{left:auto;top:auto;right:8px;bottom:5px}.back-snoopy{width:69%;height:auto;max-height:68%;transform:rotate(-7deg);margin-top:-5px}.back-leaf{position:absolute;right:9%;top:11%;color:#b97538;transform:rotate(30deg)}.back-leaf svg{width:14px;height:14px}.back-caption{font-size:6px;letter-spacing:1.6px;font-weight:600;color:#a07c46;margin-top:1px}.stock-count{font-size:8px;letter-spacing:.5px;position:absolute;bottom:-19px;width:100%;text-align:center;color:#e0e4d38c}.stock.empty{background:#ffffff02;box-shadow:none;border:1.5px solid #e5e8d336;color:#e1e4d499;font-size:28px}.stock.empty .back-design{display:none}.waste{border-color:#e5e8d318}.waste .card,.foundation .card{inset:0}.foundation-mark{font-size:37px;color:#e4e6d52e;font-family:Georgia,serif;pointer-events:none}.foundation .card{cursor:pointer}.middle-leaf{display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:center;color:#e4e6d55a;gap:11px;margin-top:20px}.middle-leaf>svg{width:32px;height:32px;transform:rotate(-13deg)}.middle-leaf>span{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:11px;text-align:center;line-height:1.5;opacity:.8}.tableau{margin-top:36px;min-height:293px;align-items:start}.column{position:relative;min-height:155px;width:100%;border-radius:var(--card-radius);touch-action:pan-y}.column>.empty-column{position:absolute;top:0;left:0;width:100%;aspect-ratio:5/7;border:1.5px dashed #e6e8d528;border-radius:var(--card-radius);display:grid;place-items:center;color:#e4e6d53d;font-family:'Fraunces',Georgia,serif;font-size:20px}.empty-column button{width:100%;height:100%;font-family:inherit;font-size:inherit;color:inherit;position:absolute;inset:0}.card{width:100%;aspect-ratio:5/7;position:absolute;top:var(--top,0px);left:0;border-radius:var(--card-radius);background:var(--card);box-shadow:0 1px 2px #3139253d,0 3px 7px #24311f1a;border:1px solid #dfdbc8;color:#38382f;padding:0;font-family:Georgia,serif;cursor:grab;touch-action:none;transition:box-shadow .15s,outline .15s;outline:0 solid transparent;transform-origin:center}.card:hover:not(.face-down){box-shadow:0 2px 9px #26351b59}.card:active{cursor:grabbing;transform:none!important}.card.red{color:#b3593f}.card.face-down{background:#e9cd8d;border-color:#d1b77d;cursor:default;pointer-events:none}.card.face-down .back-design{inset:5px}.card.face-down .back-snoopy{width:65%}.card .corner{position:absolute;top:6px;left:7px;display:flex;flex-direction:column;align-items:center;line-height:1.05;font-size:20px}.card .corner small{font-size:16px;line-height:1}.card .corner.bottom{top:auto;left:auto;bottom:6px;right:7px;transform:rotate(180deg)}.card .center-suit{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:39px;font-weight:400;line-height:1}.card .court{position:absolute;inset:28% 20%;border:1px solid currentColor;opacity:.8;display:flex;align-items:center;justify-content:center;border-radius:30px 30px 4px 4px;background:#eadfc025}.card .court>svg{width:90%;height:90%}.card .court .court-rank{position:absolute;bottom:-3px;background:var(--card);font-size:11px;padding:0 4px}.card .pips{position:absolute;inset:21% 25%;display:grid;grid-template-columns:repeat(2,1fr);align-items:center;justify-items:center;font-size:21px;line-height:1}.card.selected{outline:3px solid #f0c55f;outline-offset:-1px;box-shadow:0 0 18px #f7d17f38}.hint-source{outline:3px solid #f3d67a!important;outline-offset:2px}.hint-target{box-shadow:0 0 0 3px #f3d67a!important;border-radius:var(--card-radius);animation:hint-pulse 1s 3}.drag-source{opacity:.4}.drag-ghost{position:fixed;z-index:100;pointer-events:none;filter:drop-shadow(0 10px 10px #232f2244);transform:rotate(3deg)}.drag-ghost .card{width:100%;outline:none}.board-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;padding-top:16px;border-top:1px solid #f0efd615;color:#ebedde9c;font-size:9px;min-height:34px;letter-spacing:.1px}.foundation-progress{display:flex;align-items:center;white-space:nowrap;font-size:9px;gap:5px;font-variant-numeric:tabular-nums}.foundation-progress>svg{width:13px;height:13px;margin-left:5px;color:#d4bc7a;transform:rotate(14deg)}.game-toolbar{padding:15px 25px;display:flex;align-items:center;justify-content:space-between;gap:15px}.move-tools{display:flex;align-items:center;gap:18px}.move-tools>button{display:flex;gap:7px;align-items:center;font-size:11px;padding:6px 0}.move-tools svg{width:16px;height:16px;color:#7b7763}.move-tools button[hidden]{display:none}.play-tip{color:#9a9281;font-size:10px}.draw-switch{padding:3px;background:#ece7da;display:flex;border-radius:6px}.draw-switch button{padding:6px 12px;font-size:9px;color:#8f8776;white-space:nowrap;border-radius:4px}.draw-switch button.active{background:#fffcf4;box-shadow:0 1px 3px #423d3014;color:#59513f}.under-game{display:flex;align-items:center;justify-content:space-between;margin:17px 3px 0;color:#98886e;font-size:10px}.under-game>span{display:flex;align-items:center;gap:8px;font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:12px}.under-game svg{width:13px;height:13px;color:#b7804a;transform:rotate(-15deg)}.under-game button{padding:3px;color:#928873;font-size:9px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#ccc2ad}footer{text-align:center;font-size:8px;color:#aa9d85;padding:26px 0 22px;letter-spacing:.4px}footer>span{margin:0 9px;color:#b97e61}.falling-leaves{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}.falling-leaf{position:absolute;top:-40px;opacity:0;animation:fall var(--duration) linear infinite;animation-delay:var(--delay);color:var(--leaf-color)}.falling-leaf svg{width:var(--size);height:var(--size)}@keyframes fall{0%{opacity:0;transform:translate(0,-20px) rotate(0)}10%{opacity:.3}90%{opacity:.3}100%{opacity:0;transform:translate(100px,105vh) rotate(300deg)}}@keyframes hint-pulse{50%{box-shadow:0 0 0 5px #f3d67a70}}dialog{border:1px solid #e1d5be;border-radius:17px;padding:0;background:#fcf8ee;color:var(--ink);width:min(490px,calc(100% - 34px));box-shadow:0 20px 80px #1e291b40}dialog::backdrop{background:#29382580;backdrop-filter:blur(3px)}.dialog-inner{position:relative;padding:37px 38px}.close-dialog{position:absolute;right:14px;top:10px;font-size:26px;color:#918670}.dialog-leaf{width:32px;height:32px;color:var(--rust);margin-bottom:18px;transform:rotate(-15deg)}h2{font-family:'Fraunces',Georgia,serif;font-size:33px;font-weight:500;letter-spacing:-.8px;line-height:1.15;margin:12px 0 16px}.dialog-inner p,.dialog-inner li{font-size:12px;line-height:1.8;color:#817560}.dialog-inner ol{padding-left:18px;display:flex;flex-direction:column;gap:12px}.dialog-inner li{padding-left:5px}.dialog-inner li strong{color:#544936;font-weight:600}.help-extra{border-top:1px solid #e6ddcb;padding-top:16px}.primary{background:var(--rust);color:#fff9ee;border-radius:6px;padding:12px 17px;font-size:12px}.secondary{background:#eee6d7;border-radius:6px;padding:12px 17px;font-size:12px}.dialog-done{width:100%;margin-top:22px}.shortcut-row{display:flex;align-items:center;gap:7px;font-size:9px;color:#91846a;flex-wrap:wrap}kbd{font-family:inherit;font-size:8px;border:1px solid #ded3be;border-bottom-width:2px;border-radius:3px;padding:3px 5px}.shortcut-row kbd:not(:first-child){margin-left:10px}.compact{text-align:center;padding:38px 30px}.compact .eyebrow{justify-content:center;font-size:8px}.compact .dialog-leaf{margin:0 auto 14px}.dialog-buttons{display:flex;justify-content:center;gap:12px;margin-top:23px}.win-snoopy{width:100px;height:95px;margin:0 auto 15px}.win-stats{font-size:12px;color:#91846a;margin-top:18px}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,15px);padding:12px 20px;border:1px solid #ded1b6;background:#fffaf0;color:#6b5940;box-shadow:0 3px 15px #352b1f1c;border-radius:9px;font-size:12px;pointer-events:none;opacity:0;z-index:200;transition:opacity .2s,transform .2s}.toast.show{opacity:1;transform:translate(-50%,0)}
.empty-foundation{position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;border-radius:var(--card-radius)}
@media(min-width:1250px){.page-shell{padding:0 30px}.hero{min-height:216px}.hero-art{margin-right:35px}.felt{padding:24px 35px 16px}.seven-columns{gap:29px}}
@media(max-width:900px){.page-shell{padding:0 25px}.hero-art{width:320px}.hero{min-height:205px}h1{font-size:41px}.hero-copy>p{font-size:11px}.seven-columns{gap:17px}.felt{padding:22px 25px 16px}.stats{gap:20px;margin-right:0}.game-top{padding:15px 20px}.tableau{min-height:270px}.card .corner{font-size:17px;left:5px;top:5px}.card .corner small{font-size:14px}.card .corner.bottom{right:5px;bottom:5px}.card .pips{font-size:18px}.card .center-suit{font-size:33px}.play-tip{font-size:9px}.game-name{font-size:8px;gap:6px;letter-spacing:.7px}}
@media(max-width:680px){:root{--step:22px;--card-radius:5px}.page-shell{padding:0 14px}.site-header{height:59px}.brand span{font-size:8px;letter-spacing:1.5px}.brand{gap:7px}.brand svg{width:21px;height:21px}.header-actions{gap:10px}.help-button{font-size:11px}.hero{min-height:176px;gap:0}.hero-art{width:230px;height:155px;margin-right:-5px;margin-left:-22px}.hero-copy{padding-bottom:6px;z-index:1}.eyebrow{font-size:7px;letter-spacing:1.4px}h1{font-size:33px;letter-spacing:-1.3px;margin:10px 0}.hero-copy>p{font-size:10px;max-width:210px;line-height:1.6}.game-top{padding:12px 14px;gap:10px;flex-wrap:wrap}.game-name{font-size:8px;flex:1;gap:5px}.stats{order:3;width:100%;justify-content:center;gap:48px;padding-top:10px;border-top:1px solid #e4ddce;margin-top:3px}.stats>div{flex-direction:row;align-items:center;gap:7px}.stats strong{font-size:12px}.stats span{font-size:7px;letter-spacing:1px}.new-game{padding:8px 11px;font-size:10px}.felt{padding:19px 12px 13px}.seven-columns{gap:10px}.pile-label{font-size:6px;letter-spacing:.6px;margin-bottom:10px}.foundation-mark{font-size:27px}.middle-leaf>span{font-size:8px}.middle-leaf>svg{width:23px;height:23px}.middle-leaf{gap:8px;margin-top:10px}.tableau{margin-top:34px;min-height:265px}.column{min-height:100px}.card .corner{font-size:14px;left:4px;top:4px}.card .corner small{font-size:12px}.card .corner.bottom{bottom:4px;right:4px}.card .center-suit{font-size:26px}.card .pips{font-size:13px;inset:23% 27%}.card .court{inset:27% 19%}.card .court-rank{display:none}.back-caption{font-size:4px;letter-spacing:1px}.back-design{inset:4px}.back-leaf svg{width:10px;height:10px}.board-bottom{font-size:8px;line-height:1.6;gap:10px;min-height:37px}.foundation-progress{font-size:8px}.stock-count{font-size:7px;bottom:-17px}.game-toolbar{padding:11px 14px;gap:10px}.move-tools{gap:14px}.move-tools>button{font-size:10px;gap:5px}.move-tools svg{width:15px;height:15px}.play-tip{display:none}.draw-switch button{font-size:8px;padding:6px 9px}.under-game>span{font-size:10px}.under-game button{font-size:8px}.under-game{margin-top:14px}footer{padding:23px 0 17px;font-size:7px}.game{border-radius:10px}}
@media(max-width:430px){:root{--step:20px}.hero-art{width:180px;min-width:180px;height:138px;margin-left:-32px;opacity:.96}.hero{min-height:166px}h1{font-size:30px}.hero-copy>p{max-width:177px;font-size:9px}.eyebrow{font-size:6px;letter-spacing:1.3px}.brand span{font-size:7px;letter-spacing:1.3px}.help-button>span:last-child{display:none}.header-actions{gap:10px}.seven-columns{gap:6px}.felt{padding:17px 9px 11px}.pile-label{font-size:5px;letter-spacing:.35px}.card .corner{font-size:12px;left:3px;top:3px}.card .corner small{font-size:11px}.card .corner.bottom{bottom:3px;right:3px}.card .pips{font-size:11px;inset:25% 28%}.card .center-suit{font-size:22px}.card .back-design{inset:3px}.back-design:before,.back-design:after{font-size:6px;left:3px;top:3px}.back-design:after{left:auto;top:auto;right:3px;bottom:3px}.back-caption{font-size:3px;letter-spacing:.7px}.back-leaf{right:7%;top:8%}.back-leaf svg{width:8px;height:8px}.middle-leaf>span{font-size:7px}.middle-leaf>svg{width:20px;height:20px}.tableau{min-height:234px}.game-top{padding:11px 12px}.stats{gap:28px}.board-bottom #message{font-size:7px}.board-bottom{gap:5px}.foundation-progress svg{display:none}.dialog-inner{padding:31px 25px}.dialog-inner h2{font-size:29px}.dialog-buttons{gap:8px}.dialog-buttons button{font-size:11px;padding:11px 14px}.toast{width:max-content;max-width:90%;text-align:center}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.falling-leaves{display:none}}

/* Leaves float behind the table, leaving the playing cards unobstructed. */
.falling-leaf{animation-name:leaf-fall;animation-timing-function:linear;will-change:transform}
.leaf-sway{display:block;animation:leaf-sway var(--sway) ease-in-out infinite alternate;animation-delay:var(--delay)}
.falling-leaf svg{animation:leaf-turn calc(var(--sway) * 3) linear infinite;animation-delay:var(--delay)}
@keyframes leaf-fall{0%{opacity:0;transform:translate3d(0,-50px,0)}8%{opacity:.55}88%{opacity:.55}100%{opacity:0;transform:translate3d(var(--drift),110vh,0)}}
@keyframes leaf-sway{from{transform:translateX(-18px) rotate(-16deg)}to{transform:translateX(22px) rotate(19deg)}}
@keyframes leaf-turn{to{transform:rotate(calc(360deg * var(--spin)))}}
@media(prefers-reduced-motion:reduce){.falling-leaves{display:none}}

.real-hero{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:18px;padding:9px 30px 11px}
.autumn-snoopy{width:185px;height:178px;object-fit:contain;mix-blend-mode:multiply;display:block}
.hero-woodstock{width:54px;height:73px;margin-bottom:6px;mix-blend-mode:multiply;flex-shrink:0}
.hero-float{position:absolute;color:#c99549;opacity:.7}
.leaf-one{left:38px;top:53px;width:23px;height:23px;transform:rotate(-24deg)}
.leaf-two{right:46px;top:35px;width:18px;height:23px;transform:rotate(33deg);color:#ae6540}
.back-snoopy,.card .court>svg,.win-snoopy{mix-blend-mode:multiply}
.back-snoopy{transform:rotate(-5deg);max-height:58%;width:76%}
.card.face-down .back-snoopy{width:75%}
.card .court{inset:27% 17%;border-color:#c3bda480;opacity:1;background:transparent}
.card .court>svg{height:94%;width:94%}
.win-snoopy{width:90px;height:122px}
footer a{color:inherit;text-underline-offset:2px}
@media(max-width:900px){.real-hero{gap:12px;padding:5px 25px 10px}.autumn-snoopy{width:169px;height:165px}.leaf-one{left:18px}.leaf-two{right:22px}}
@media(max-width:680px){.real-hero{gap:8px;padding:0 6px 12px}.autumn-snoopy{width:138px;height:133px}.hero-woodstock{width:35px;height:50px}.leaf-one{left:9px;top:37px;width:16px;height:16px}.leaf-two{right:14px;top:19px;width:13px;height:18px}}
@media(max-width:430px){.real-hero{gap:5px;padding:0 3px 15px}.autumn-snoopy{width:112px;height:108px}.hero-woodstock{width:28px;height:39px}.leaf-one{left:10px;top:25px;width:13px;height:13px}.leaf-two{right:15px;top:12px;width:11px;height:15px}}

.card .pips{font-size:clamp(7px,1.4vw,20px);grid-auto-rows:minmax(0,1fr);inset:23% 25%}
.card .pips.many{font-size:clamp(5px,1.2vw,17px)}

.autumn-snoopy,.hero-woodstock{mix-blend-mode:normal}

.no-moves{display:flex;align-items:center;gap:13px;padding:15px 25px;background:#f1e0b9;border-top:1px solid #dbc798;color:#735735}.no-moves[hidden]{display:none}.no-moves>svg{width:23px;height:23px;color:#ad6d3e;flex-shrink:0}.no-moves-copy{flex:1}.no-moves-copy strong{display:block;font-family:'Fraunces',Georgia,serif;font-size:18px;font-weight:500;margin-bottom:3px}.no-moves-copy span{font-size:11px;line-height:1.6}.no-moves-actions{display:flex;gap:8px;flex-shrink:0}.no-moves-actions button{font-size:11px;padding:8px 13px;border:1px solid #c5ab7c;border-radius:5px;background:#fff8e8}.no-moves-actions button:last-child{background:var(--rust);border-color:var(--rust);color:#fffaf0}
@media(max-width:680px){.no-moves{padding:13px 14px;gap:9px;flex-wrap:wrap}.no-moves-copy{min-width:calc(100% - 40px)}.no-moves-copy strong{font-size:17px}.no-moves-copy span{font-size:10px}.no-moves-actions{margin-left:32px}}

.music-button{display:flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid #ddd3bf;border-radius:20px;font-size:10px;color:#837156;background:#f8f3e880;white-space:nowrap}
.music-note{font-size:16px;line-height:1}.music-button.is-playing{background:#e6eadc;border-color:#bcc8a9;color:#576747}.music-label-short{display:none}
.music-panel{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 356px;align-items:center;gap:28px;padding:24px;margin:0 0 22px;border:1px solid #ded4c0;border-radius:12px;background:#fcf9f0}
.music-panel[hidden]{display:none}.music-panel h2{font-size:29px;margin:9px 0 7px}.music-artist{font-size:11px;color:#89785e;margin:0 0 16px}
#music-status{font-size:11px;line-height:1.5;color:#86775e;min-height:17px;margin:10px 0 14px}.music-controls{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.music-controls .primary{font-size:10px;padding:9px 13px;min-width:89px}
.music-volume{display:flex;align-items:center;gap:8px;font-size:10px;color:#8a7a5f}.music-volume input{width:92px;accent-color:var(--rust);cursor:pointer}.music-volume output{width:30px;font-variant-numeric:tabular-nums}
.music-source{display:inline-block;margin-top:17px;font-size:10px;color:#9a805a;text-underline-offset:3px}.music-player-frame{width:356px;height:200px;border-radius:8px;overflow:hidden;background:#ede5d6}.music-player-frame iframe{display:block;width:100%;height:200px;border:0}.music-close{position:absolute;right:7px;top:3px;color:#9c8e74;font-size:22px;line-height:1;padding:5px}
@media(max-width:800px){.music-panel{grid-template-columns:1fr;gap:20px}.music-player-frame{width:100%;max-width:356px;margin:auto}.music-copy{max-width:100%}.music-volume input{width:110px}}
@media(max-width:680px){.header-actions{gap:6px}.music-button{padding:6px 8px;font-size:9px}.music-label{display:none}.music-label-short{display:inline}.music-panel{padding:24px 16px 16px}.music-panel h2{font-size:25px}.music-controls{gap:14px}.music-volume input{width:90px}}