.collection-title{font-family:var(--serif);font-size:22px;font-weight:400;margin:30px 0 18px;color:var(--green-dark)}
.music-card .product-info{grid-template-columns:minmax(0,1fr) auto;align-items:start}
.music-card .product-info h3 a{color:inherit}
.music-card .product-info p{grid-column:1/-1;line-height:1.7}
.favorite-toggle{border:1px solid #d8ddd1;background:rgba(255,255,255,.9);color:#596553;font-size:11px;padding:7px 10px;white-space:nowrap;cursor:pointer;transition:.2s}
.favorite-toggle:hover,.favorite-toggle.is-favorite{color:#a14e53;border-color:#d9b7b5;background:#fff8f7}
.studio-card{background:#e7e8df!important;min-height:340px;padding:190px 28px 26px;justify-content:flex-end;gap:8px}
.studio-card-image{position:absolute;inset:0 0 auto;width:100%;height:185px;object-fit:cover}
.studio-card:after{content:"";position:absolute;inset:130px 0 auto;height:56px;background:linear-gradient(transparent,#e7e8df);pointer-events:none}
.studio-card .product-tag{z-index:1;left:14px;top:14px}
.studio-card .journal-kicker,.studio-card h3,.studio-card>p,.studio-card details,.studio-card .favorite-toggle{position:relative;z-index:1}
.studio-card .journal-kicker{font-size:10px;color:var(--green-dark)}
.studio-card h3{font-family:var(--serif);font-size:24px;font-weight:400;margin:0}
.studio-card>p{font-size:13px;line-height:1.7;margin:0;color:var(--muted)}
.studio-card details{font-size:12px;color:var(--green-dark)}
.studio-card details p{line-height:1.8}
.studio-card .favorite-toggle{align-self:flex-start}
.plan-card{background:#e7e8df;display:flex;flex-direction:column}
.plan-art{aspect-ratio:4/3;background-position:center;background-size:cover}
.plan-info{padding:22px;display:flex;flex-direction:column;gap:11px;flex:1}
.plan-info h3{font-family:var(--serif);font-weight:400;font-size:23px;margin:0}
.plan-info p{font-size:13px;line-height:1.8;color:var(--muted);margin:0}
.plan-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:8px}
.plan-bottom strong{font-weight:500;color:var(--green-dark);font-size:19px}
.price-disclaimer{font-size:12px;color:var(--muted);margin:20px 0 0}
.favorites-grid .studio-card{min-height:340px}
.content-item-form{border-top:1px solid var(--line);padding-top:14px;margin-top:8px}
@media(max-width:700px){.studio-card{min-height:325px;padding:185px 21px 21px}.studio-card-image{height:180px}.plan-info{padding:17px}.plan-info h3{font-size:20px}}
/* Cart and order workflows */
.tier-buy-form,.cancel-request-form{display:grid;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.tier-buy-form .field input,.cancel-request-form textarea{width:100%}
.order-list{display:grid;gap:14px;margin:28px 0}
.order-card{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--paper,#fff)}
.order-card h3,.order-card h4{margin:0 0 8px}.order-card p{margin:6px 0;color:var(--muted)}
.order-status{font-weight:700;color:var(--ink)!important}
.credit-score{font-weight:700}.credit-low{color:#c43131!important}.credit-good{color:#287446!important}
.admin-user{margin:12px 0;padding:16px;border:1px solid var(--line);border-radius:10px}
.admin-user summary{cursor:pointer;font-weight:700}.user-stats{display:flex;flex-wrap:wrap;gap:12px 24px;padding:16px 0}.user-stats span,.user-stats label{font-size:.92rem}
.user-stats input{width:90px}.kid-group{margin:14px 0;padding:14px;background:rgba(40,55,44,.04);border-radius:8px}.kid-group h4{margin:0 0 10px}
.order-filters{display:flex;flex-wrap:wrap;gap:8px}.tier-admin-row{display:grid;grid-template-columns:1.2fr 1fr auto 100px auto;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.cancel-score-setting{display:flex;align-items:center;gap:12px;margin-top:24px}.cancel-score-setting input{width:100px}
@media(max-width:700px){.order-card{align-items:flex-start;flex-direction:column}.tier-admin-row{grid-template-columns:1fr 1fr}.order-filters{width:100%}.cancel-score-setting{align-items:flex-start;flex-direction:column}.user-stats{display:grid;grid-template-columns:1fr 1fr}}

/* Member center */
.header-profile-link{display:inline-flex;align-items:center;gap:9px;color:var(--green-dark);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
.header-avatar,.profile-avatar-small{width:38px;height:38px;border-radius:50%;object-fit:cover;border:1px solid #aeb8a8;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;background:#e5e8df;color:var(--green-dark);font-size:16px}
.profile-page{width:min(1120px,calc(100% - 48px));margin:58px auto 80px;min-height:55vh}
.profile-page-heading{margin-bottom:24px}.profile-page-heading h1{font-family:var(--serif);font-size:34px;font-weight:400;margin:10px 0}
.profile-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:24px;align-items:start}
.profile-sidebar,.profile-panel{background:#fff;border:1px solid var(--line);border-radius:12px}
.profile-sidebar{padding:20px;position:sticky;top:24px}.profile-identity{display:flex;align-items:center;gap:12px;padding:4px 2px 20px;border-bottom:1px solid var(--line)}
.profile-identity>div{display:grid;gap:4px}.profile-identity>div span{font-size:12px;color:var(--muted)}
.profile-nav{display:grid;gap:6px;padding:16px 0}.profile-nav-item{width:100%;border:0;border-radius:7px;padding:12px 14px;text-align:left;background:transparent;color:var(--ink);cursor:pointer;font:inherit}
.profile-nav-item:hover,.profile-nav-item.active{background:#edf0e9;color:var(--green-dark);font-weight:700}.profile-logout{width:100%}
.profile-panel{padding:30px;min-height:410px}.profile-panel>h1{font-family:var(--serif);font-weight:400;font-size:30px;margin:10px 0 26px}
.profile-avatar-edit{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 0;border-bottom:1px solid var(--line)}
.profile-avatar-large{width:82px;height:82px;border-radius:50%;object-fit:cover;border:1px solid #aeb8a8;display:inline-flex;align-items:center;justify-content:center;overflow:hidden}
.profile-avatar-fallback{background:#e5e8df;color:var(--green-dark);font-family:var(--serif);font-size:30px}.profile-avatar-edit>span{font-size:12px;color:var(--muted)}
.profile-form{display:flex;align-items:flex-end;gap:14px;padding:22px 0;border-bottom:1px solid var(--line)}.profile-form .field{width:min(420px,100%)}
.profile-readonly{display:grid;grid-template-columns:130px minmax(0,1fr);align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid var(--line);font-size:14px}
.profile-readonly>label{color:var(--muted)}.profile-readonly>div{display:flex;align-items:center;gap:10px}.profile-placeholder-actions{display:flex;gap:10px;flex-wrap:wrap;padding-top:22px}
@media(max-width:760px){.profile-page{width:min(100% - 28px,600px);margin:28px auto 48px}.profile-layout{grid-template-columns:1fr;gap:14px}.profile-sidebar{position:static;padding:14px}.profile-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-nav-item{text-align:center;padding:10px 6px}.profile-panel{padding:20px 16px;min-height:300px}.profile-form{align-items:stretch;flex-direction:column}.profile-form .field{width:100%}.profile-readonly{grid-template-columns:100px minmax(0,1fr);font-size:13px}.header-profile-link{gap:6px}.header-avatar{width:32px;height:32px}}

/* Contact panel, count badges, responsive package settings and motion polish */
.footer-extra{grid-column:2;grid-row:2;display:grid;justify-items:start;gap:9px}.footer-contact{position:relative}
.footer-contact-toggle{border:0;padding:0;background:transparent;color:#e8e9e1;font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:4px;cursor:pointer;transition:color .2s}
.footer-contact-toggle:hover{color:#d6bb8b}
.footer-contact-qr{position:absolute;z-index:4;left:50%;bottom:calc(100% + 15px);transform:translateX(-50%);display:grid;justify-items:center;gap:8px;padding:14px;background:#fff;color:var(--ink);border-radius:10px;box-shadow:0 16px 44px rgba(0,0,0,.2);animation:qr-pop .2s ease-out}
.footer-contact-qr img{width:180px;height:180px;object-fit:contain}.footer-contact-qr span{font-size:12px;white-space:nowrap}
.footer-stats{display:flex;justify-content:center;gap:22px;color:#c4c9bf;font-size:12px}.footer-stats strong{color:#f4f1e9;font-size:16px;margin-left:5px}
.studio-stats{display:flex;align-items:center;justify-content:center;gap:clamp(35px,9vw,120px);padding:42px 20px;background:linear-gradient(115deg,#e6eadf,#f4f0e6 52%,#e9e4d7);text-align:center}
.studio-stats div{display:grid;gap:3px}.studio-stats strong{font-family:var(--serif);font-size:clamp(28px,4vw,44px);font-weight:400;color:var(--green-dark)}.studio-stats span{font-size:12px;color:var(--muted);letter-spacing:.08em}.studio-stats i{width:1px;height:42px;background:#bbc2b4}
.order-search{display:flex;align-items:center;gap:8px;min-width:min(420px,100%)}.order-search input{flex:1;min-width:0}
.order-loading{min-height:180px;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--muted)}
.tier-setting-head,.tier-setting-row{display:grid;grid-template-columns:34px minmax(120px,1.2fr) 80px minmax(100px,1fr) 90px 80px auto auto;align-items:center;gap:10px}
.tier-setting-head{padding:10px 8px;color:var(--muted);font-size:11px;border-bottom:1px solid var(--line)}.tier-setting-row{padding:10px 8px;border-bottom:1px solid var(--line)}
.tier-select{display:flex;justify-content:center}.tier-admin-row{display:contents}.tier-admin-row input:not([type=checkbox]){min-width:0;width:100%;height:39px;padding:7px 9px;border:1px solid var(--line);border-radius:4px;background:#fff}
.tier-admin-row label{display:flex;align-items:center;gap:5px;font-size:12px;white-space:nowrap}.tier-create-form{display:grid;grid-template-columns:1.3fr .8fr 1fr .6fr auto;gap:10px;align-items:center}
.tier-create-form input,.tier-batch-tools input,.tier-batch-tools select{width:100%;min-width:0;height:42px;padding:8px 10px;border:1px solid var(--line);border-radius:4px;background:#fff}
.tier-batch-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:16px 8px;background:#f6f7f2}.tier-batch-tools strong{margin-right:auto}
.tier-bulk-create{display:grid;gap:10px;margin-top:22px}.tier-bulk-create label{font-size:13px;color:var(--muted)}.tier-bulk-create textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:4px;resize:vertical}
.music-card,.plan-card,.studio-card{transition:transform .28s ease,box-shadow .28s ease}.music-card:hover,.plan-card:hover,.studio-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(39,48,38,.12)}
.product-art-link img,.plan-art,.studio-card-image{transition:transform .5s ease}.music-card:hover .product-art-link img{transform:scale(1.035)}
.section-label{background:linear-gradient(90deg,var(--green-dark),#9b7958);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
@keyframes qr-pop{from{opacity:0;transform:translate(-50%,8px) scale(.97)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@media(max-width:980px){.footer-extra{grid-column:1;grid-row:3}}
@media(max-width:760px){.footer-contact{justify-self:start}.footer-stats{justify-content:flex-start;flex-wrap:wrap}.tier-setting-head{display:none}.tier-setting-row{grid-template-columns:26px minmax(0,1fr);gap:5px 9px;padding:13px 4px}.tier-admin-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.tier-admin-row input[name=title]{grid-column:1/-1}.tier-admin-row label{grid-column:1/-1}.tier-admin-row input[name=sort_order]{display:none}.tier-create-form{grid-template-columns:1fr 1fr}.tier-create-form input:first-child{grid-column:1/-1}.order-search{min-width:100%;width:100%}.order-search .btn{white-space:nowrap}}
@media(max-width:700px){.footer-extra{grid-column:1;grid-row:auto}}
@media(prefers-reduced-motion:reduce){.music-card,.plan-card,.studio-card,.product-art-link img,.plan-art,.studio-card-image{transition:none}.footer-contact-qr{animation:none}}

/* Navigation, section reveals, and multi-package editor */
.site-header{background:rgba(246,245,239,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:header-arrive .55s ease-out both}
.main-nav{gap:clamp(20px,3vw,42px)}.main-nav a{position:relative;padding:8px 0;transition:color .25s,transform .25s;animation:nav-link-arrive .55s ease-out both}
.main-nav a:nth-child(2){animation-delay:.07s}.main-nav a:nth-child(3){animation-delay:.14s}.main-nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:linear-gradient(90deg,var(--green),#c9a878);transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.main-nav a:hover{color:var(--green-dark);transform:translateY(-2px)}.main-nav a:hover::after,.main-nav a:focus-visible::after{transform:scaleX(1)}
.admin-package-setting{padding:22px;margin:20px 0;border:1px solid var(--line);border-radius:12px;background:linear-gradient(145deg,#fff,#f8f8f3);box-shadow:0 10px 28px rgba(39,48,38,.05);animation:content-arrive .45s ease-out both}
.package-admin-form{padding-bottom:20px;border-bottom:1px solid var(--line)}.package-admin-form .field textarea{min-height:86px}.package-duration-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:17px 0 8px}.package-duration-heading h4{margin:0;font-size:14px}.package-duration-heading span{font-size:11px;color:var(--muted)}
.tier-setting-head,.tier-setting-row{grid-template-columns:34px minmax(115px,1.1fr) 68px minmax(85px,.8fr) minmax(115px,1fr) 82px 65px auto auto}
.tier-setting-head{align-items:center}.tier-setting-row{min-height:58px}.tier-admin-row{display:contents}.tier-admin-row input:not([type=checkbox]),.tier-admin-row select{min-width:0;width:100%;height:39px;padding:7px 8px;border:1px solid var(--line);border-radius:4px;background:#fff}
.tier-batch-tools>label{display:flex;align-items:center;gap:8px}.tier-batch-tools form{display:flex;flex-wrap:wrap;gap:9px}.tier-batch-tools select,.tier-batch-tools input{max-width:230px}
.new-package-tier{margin-top:15px;padding:14px;border-radius:8px;background:linear-gradient(110deg,#f1f4ed,#faf8f1)}.package-create-form{margin:12px 0 20px;padding:20px;border:1px solid var(--line);border-radius:10px;background:#fafbf8}
.section,.story,.journal,.studio-stats{animation:content-arrive .65s ease-out both}.section-heading{animation:content-arrive .55s ease-out both}
.plan-card{background:linear-gradient(145deg,#eff1e9,#e0e5db)}.plan-art{position:relative;overflow:hidden;background-position:center;background-size:cover}.plan-art::after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,rgba(255,255,255,.2),transparent 45%,rgba(42,56,45,.12))}
@keyframes header-arrive{from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:translateY(0)}}
@keyframes nav-link-arrive{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@keyframes content-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.admin-package-setting{padding:15px}.tier-setting-head{display:none}.tier-setting-row{grid-template-columns:26px minmax(0,1fr);gap:5px 9px;padding:12px 4px}.tier-admin-row{display:grid;grid-column:2;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.tier-admin-row input[name=title]{grid-column:1/-1}.tier-admin-row select[name=package_id],.tier-admin-row label{grid-column:1/-1}.tier-admin-row input[name=sort_order]{display:none}.tier-create-form{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.site-header,.main-nav a,.section,.story,.journal,.studio-stats,.section-heading,.admin-package-setting{animation:none}.main-nav a{transition:none}.main-nav a::after{transition:none}}


/* Responsive package overview and mobile controls */
.package-tile{min-width:0;border-radius:10px;overflow:hidden;background:linear-gradient(145deg,#f0f2ea,#e2e7dc);box-shadow:0 8px 24px rgba(39,48,38,.06);transition:transform .25s ease,box-shadow .25s ease}
.package-tile:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(39,48,38,.13)}
.package-tile-link{display:grid;color:inherit;min-height:100%;position:relative}
.package-tile-link>img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:#dbe1d5}
.package-tile-copy{display:grid;align-content:start;gap:7px;padding:18px 20px 19px}
.package-tile-copy h3{margin:0;font:400 clamp(19px,2vw,24px)/1.35 var(--serif);color:var(--ink)}
.package-tile-copy p{margin:0;color:var(--muted);font-size:13px;line-height:1.65;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.package-more{margin-top:4px;color:var(--green-dark);font-size:12px;font-weight:700;letter-spacing:.04em}
.package-tile-arrow{position:absolute;right:13px;top:13px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.9);color:var(--green-dark);font-size:18px}
.package-detail-wrap{max-width:1180px;margin:auto}.package-detail-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:clamp(28px,6vw,80px);align-items:center;max-width:1100px;margin:0 auto;background:linear-gradient(135deg,#f0f2eb,#fff);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 18px 55px rgba(39,48,38,.08)}
.package-detail-art{height:100%;min-height:420px;background:#e2e7dc}.package-detail-art img{display:block;width:100%;height:100%;min-height:420px;object-fit:cover}
.package-detail-card .plan-info{padding:clamp(22px,4vw,54px) clamp(20px,4vw,48px) clamp(26px,4vw,48px) 0}.package-detail-card .plan-info h1{font:400 clamp(30px,4vw,48px)/1.25 var(--serif);margin:0;color:var(--ink)}.package-detail-card .plan-info>p{font-size:14px;line-height:1.9}.package-detail-card .tier-choice{margin-top:8px}.package-detail-card .plan-bottom{justify-content:flex-start;gap:18px}.package-detail-card [data-open-order],.package-detail-card .plan-info>a.btn{align-self:flex-start;margin-top:7px}
.studio-stats{position:relative;z-index:1;min-height:190px;padding:36px 24px;gap:clamp(42px,11vw,160px);background:radial-gradient(ellipse at 50% 0%,#fff 0%,transparent 55%),linear-gradient(115deg,#e4e9df,#f5f1e7 55%,#e4e9df);border-bottom:1px solid rgba(54,69,56,.08)}
.studio-stats div{min-width:180px;gap:2px}.studio-stats strong{font-size:clamp(42px,6vw,68px);line-height:1.15;font-weight:500;letter-spacing:.02em}.studio-stats span{font-size:14px;letter-spacing:.12em;color:var(--green-dark)}
.brand{min-width:0}.brand-mark{flex:0 0 36px;width:36px;height:36px;aspect-ratio:1/1;border-radius:50%;overflow:hidden}.brand .brand-mark img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;flex:none}.brand>span:last-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-title-actions{display:flex;align-items:center;gap:9px;flex:0 0 auto}.admin-logout{min-height:42px;padding:0 14px;border:1px solid var(--line);border-radius:4px;touch-action:manipulation}
.hero-art{object-position:center}.hero-slide.is-active .hero-copy{animation:hero-copy-arrive .6s ease-out both}@keyframes hero-copy-arrive{from{opacity:0;transform:translateY(calc(-48% + 12px))}to{opacity:1;transform:translateY(-48%)}}
@media(max-width:760px){
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .package-tile{border-radius:8px}.package-tile-link{grid-template-columns:minmax(112px,38%) minmax(0,1fr);align-items:stretch;min-height:148px}
  .package-tile-link>img{height:100%;min-height:148px;aspect-ratio:auto;object-fit:cover}
  .package-tile-copy{align-content:center;gap:5px;padding:13px 13px 13px 15px}.package-tile-copy .section-label{font-size:9px}.package-tile-copy h3{font-size:18px}.package-tile-copy p{font-size:12px;line-height:1.55;-webkit-line-clamp:2}.package-more{font-size:11px;margin-top:2px}.package-tile-arrow{width:26px;height:26px;top:8px;right:8px;font-size:15px}
  .studio-stats{min-height:150px;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:25px 16px}.studio-stats div{min-width:0}.studio-stats strong{font-size:clamp(36px,10vw,54px)}.studio-stats span{font-size:11px}.studio-stats i{display:none}
  .package-detail-card{grid-template-columns:1fr;gap:0}.package-detail-art,.package-detail-art img{min-height:0;height:auto;aspect-ratio:16/10}.package-detail-card .plan-info{padding:22px 19px 25px}
  .site-header{height:68px;padding:0 12px;gap:6px}.brand{gap:7px;max-width:min(60vw,330px);font-size:clamp(12px,3.5vw,16px);letter-spacing:.05em;flex:0 1 auto}.brand-mark{flex-basis:32px;width:32px;height:32px;font-size:16px}.brand>span:last-child{max-width:calc(60vw - 42px)}.header-actions{gap:7px;margin-left:auto;margin-right:0;min-width:0}.header-profile-link{max-width:120px;min-width:0}.header-profile-link>span{overflow:hidden;text-overflow:ellipsis}.menu-toggle{order:3;flex:0 0 auto;padding:8px;min-width:40px;min-height:42px;touch-action:manipulation}.main-nav{top:68px;z-index:15;box-shadow:0 12px 20px rgba(39,48,38,.08)}
  .hero{height:min(540px,calc(100svh - 68px));min-height:420px;max-height:none}.hero-art{object-position:62% center}.hero-copy{left:22px;right:22px;top:45%;transform:translateY(-40%)}.hero h1{font-size:clamp(34px,9vw,48px);line-height:1.28;margin:16px 0 12px;max-width:13em}.hero-copy p{font-size:13px;line-height:1.7;margin-bottom:20px;max-width:28em}.hero-cta{gap:8px;flex-wrap:wrap}.hero-cta .btn{min-height:42px;padding:0 14px}.hero-count{left:22px;bottom:22px}.hero-controls{right:18px;bottom:15px}.hero-dots{right:20px;bottom:76px}
  .admin-title-actions{width:100%;justify-content:flex-start}.admin-logout{min-width:110px}.admin-title h1{font-size:32px}
}
@media(max-width:430px){
 .product-grid{grid-template-columns:1fr}.package-tile-link{grid-template-columns:38% minmax(0,1fr);min-height:138px}.package-tile-link>img{min-height:138px}.package-tile-copy{padding:10px 12px}.package-tile-copy h3{font-size:17px}.package-tile-copy p{font-size:11px;-webkit-line-clamp:2}.brand{max-width:57vw}.brand>span:last-child{max-width:calc(57vw - 40px)}.header-profile-link{max-width:42px}.header-profile-link>span{display:none}.site-header .header-actions .btn{min-height:35px;padding:0 10px}.hero{min-height:405px;height:min(500px,calc(100svh - 68px))}.hero-copy{top:43%}.eyebrow{font-size:9px;letter-spacing:.12em}.hero-controls .icon-btn{width:35px;height:35px}.studio-stats{min-height:132px}.studio-stats strong{font-size:37px}
}
@media(prefers-reduced-motion:reduce){.hero-slide.is-active .hero-copy{animation:none}.package-tile{transition:none}}

@media(max-width:700px){.admin-actions .user-greeting,.admin-actions a[href="/admin"]{display:none}.admin-actions #logout-button{min-width:76px;min-height:40px;touch-action:manipulation}.brand>span:last-child{display:block}}

/* Badge cards use a fixed media frame and contain-fit artwork so source images
   keep their original aspect ratio while cards align with the studio package style. */
.medal-tile{position:relative;overflow:hidden;background:var(--surface,#e9eadf);border:1px solid rgba(51,69,56,.12);border-radius:2px;transition:transform .28s ease,box-shadow .28s ease}
.medal-tile:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(40,53,43,.13)}
.medal-tile-link{display:grid;grid-template-rows:210px minmax(150px,1fr);color:inherit;text-decoration:none}
.medal-tile-art{position:relative;display:grid;place-items:center;overflow:hidden;min-width:0;background:var(--medal-accent,#dce2d8)}
.medal-tile-art img{display:block;width:100%;height:100%;object-fit:contain;padding:12px;transition:transform .45s ease}
.medal-tile:hover .medal-tile-art img{transform:scale(1.035)}
.medal-tile-art .product-tag{position:absolute;left:14px;top:14px}
.medal-tile-copy{padding:20px 22px 48px;min-width:0}
.medal-tile-copy h3{margin:8px 0;font-size:23px;line-height:1.35}
.medal-tile-copy p{margin:0;color:var(--muted,#718078);line-height:1.7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.medal-tile-favorite{position:absolute;bottom:13px;right:17px}
.medal-purchase-section{margin:46px 0 80px;padding:clamp(20px,4vw,42px);background:linear-gradient(135deg,#eef0e8,#e0e6dc);border:1px solid rgba(51,69,56,.12)}
.medal-option-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:26px 0}
.medal-option{display:flex;min-height:72px;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border:1px solid #aeb9aa;background:rgba(255,255,255,.7);color:var(--ink,#26372c);cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.medal-option:hover{transform:translateY(-2px);border-color:#35483a}.medal-option.is-selected{background:#34483a;color:white;border-color:#34483a}.medal-option span{white-space:nowrap;font-weight:700}
.medal-single-price,.medal-buy-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 0;border-bottom:1px solid rgba(51,69,56,.16)}
.medal-single-price strong,.medal-buy-row>strong{font-size:24px;color:#304637}
.medal-buy-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:22px}.medal-buy-form[hidden]{display:none}.medal-buy-form [data-medal-singers]{display:grid;gap:8px}.medal-buy-form .admin-form-actions{grid-column:1/-1}
.medal-option-admin-row{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;padding:14px 0;border-top:1px solid var(--line,#d7dbd1)}
.medal-option-admin-row>form{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));align-items:end;width:100%}.medal-option-admin-row .admin-form-actions{display:flex;gap:8px;align-items:center}
.medal-option-create{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line,#d7dbd1)}.medal-option-create input{flex:1 1 130px;min-width:0}
@media(max-width:700px){.medal-tile-link{grid-template-rows:170px minmax(126px,1fr)}.medal-tile-copy{padding:14px 15px 45px}.medal-tile-copy h3{font-size:19px}.medal-tile-copy p{font-size:13px;-webkit-line-clamp:2}.medal-option-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.medal-option{min-height:60px;padding:10px;font-size:13px}.medal-buy-form{grid-template-columns:1fr}.medal-buy-form .admin-form-actions{grid-column:auto}.medal-single-price strong,.medal-buy-row>strong{font-size:20px}.medal-option-admin-row{grid-template-columns:22px minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.medal-tile,.medal-tile-art img,.medal-option{transition:none}}

/* Immersive badge cards: full artwork stays visible while the copy backdrop
   rises on hover and settles away again on pointer exit. */
.medal-tile{border-radius:8px;isolation:isolate}
.medal-tile-link{position:relative;display:block;aspect-ratio:4/3;min-height:250px;overflow:hidden}
.medal-tile-art{position:absolute;inset:0;display:block;background:var(--medal-accent,#dce2d8)}
.medal-tile-art img{width:100%;height:100%;padding:0;object-fit:contain;object-position:center;filter:drop-shadow(0 8px 12px rgba(35,45,36,.12))}
.medal-tile:hover .medal-tile-art img,.medal-tile:focus-within .medal-tile-art img{transform:scale(1.025)}
.medal-tile-copy{position:absolute;z-index:1;left:0;right:0;bottom:0;display:grid;gap:5px;padding:24px 20px 58px;color:#27382d;text-shadow:0 1px 9px rgba(255,255,255,.95),0 1px 2px rgba(255,255,255,.85)}
.medal-tile-copy::before{content:"";position:absolute;z-index:0;inset:0;background:linear-gradient(145deg,rgba(247,247,239,.97),rgba(224,232,220,.96));transform:translateY(102%);transition:transform .48s cubic-bezier(.2,.7,.25,1)}
.medal-tile-copy>*{position:relative;z-index:1}
.medal-tile:hover .medal-tile-copy::before,.medal-tile:focus-within .medal-tile-copy::before{transform:translateY(0)}
.medal-tile-copy .section-label{font-size:10px;letter-spacing:.18em}
.medal-tile-copy h3.medal-card-title{position:relative;display:inline-block;width:fit-content;max-width:100%;margin:1px 0 2px;font:700 clamp(19px,2.1vw,27px)/1.28 var(--serif);letter-spacing:.015em;color:transparent;text-shadow:none;background-image:linear-gradient(105deg,transparent 46%,rgba(255,255,255,.14) 49%,transparent 52%),linear-gradient(100deg,#d33383 0%,#ff8c37 17%,#d4a924 32%,#1b9a78 49%,#337bd1 65%,#9b54cb 82%,#d33383 100%);background-size:250% 100%,300% 100%;background-position:180% 0,0% 50%;background-clip:text;-webkit-background-clip:text;animation:medal-title-cycle 7s linear infinite}
.medal-tile-copy p{color:#56645a;text-shadow:none;line-height:1.55;-webkit-line-clamp:2}
.medal-tile-copy .package-more{color:#294b37;text-shadow:none}
.medal-tile-favorite{z-index:2;bottom:12px;right:13px}
@keyframes medal-title-cycle{from{background-position:180% 0,0% 50%}to{background-position:-180% 0,300% 50%}}
@media(max-width:700px){.medal-tile-link{aspect-ratio:4/3;min-height:230px;grid-template-rows:none}.medal-tile-copy{gap:4px;padding:18px 15px 54px}.medal-tile-copy h3.medal-card-title{font-size:clamp(18px,5vw,23px)}.medal-tile-copy .section-label{font-size:9px}.medal-tile-copy p{font-size:12px}}
@media(hover:none){.medal-tile-copy::before{transform:translateY(0);opacity:.88}.medal-tile-copy{padding-top:14px}}
@media(prefers-reduced-motion:reduce){.medal-tile-copy::before,.medal-tile-art img{transition:none}.medal-tile-copy h3.medal-card-title{animation:none;background-position:50% 50%,50% 50%}}

/* Square artwork with a compact title strip; hover expands that strip upward
   to reveal the description without resizing or cropping the artwork. */
.medal-tile-link{display:block;position:relative;aspect-ratio:.8;min-height:0;overflow:hidden}
.medal-tile-art{position:absolute;inset:0 0 auto;width:100%;height:auto;aspect-ratio:1/1;overflow:hidden;background:var(--medal-accent,#dce2d8)}
.medal-tile-art img{width:100%;height:100%;padding:8px;object-fit:contain;object-position:center}
.medal-tile-copy{position:absolute;z-index:1;left:0;right:0;bottom:0;height:94px;max-height:94px;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;padding:12px 96px 16px 19px;overflow:hidden;text-shadow:none;transition:height .45s cubic-bezier(.2,.7,.25,1),max-height .45s cubic-bezier(.2,.7,.25,1)}
.medal-tile-copy::before{inset:0;clip-path:inset(calc(100% - 94px) 0 0);transform:none;transition:clip-path .45s cubic-bezier(.2,.7,.25,1)}
.medal-tile-copy .section-label{order:0;max-height:0;overflow:hidden;opacity:0;transform:translateY(12px);font-size:9px;transition:opacity .25s ease,transform .35s ease,max-height .35s ease}
.medal-tile-copy h3.medal-card-title{order:1;flex:0 0 auto;width:100%;margin:0;line-height:1.25}
.medal-tile-copy p{order:2;max-height:0;opacity:0;overflow:hidden;transform:translateY(14px);color:#56645a;font-size:13px;line-height:1.6;text-shadow:none;-webkit-line-clamp:3;transition:opacity .24s ease,transform .35s ease,max-height .4s ease}
.medal-tile-copy .package-more{order:3;max-height:0;margin:0;opacity:0;overflow:hidden;transform:translateY(12px);transition:opacity .24s ease,transform .35s ease,max-height .35s ease}
.medal-tile-favorite{z-index:3;right:12px;bottom:12px}
.medal-tile:hover .medal-tile-copy,.medal-tile:focus-within .medal-tile-copy{height:210px;max-height:210px}
.medal-tile:hover .medal-tile-copy::before,.medal-tile:focus-within .medal-tile-copy::before{clip-path:inset(0)}
.medal-tile:hover .medal-tile-copy .section-label,.medal-tile:focus-within .medal-tile-copy .section-label{max-height:22px;opacity:1;transform:translateY(0);transition-delay:.08s}
.medal-tile:hover .medal-tile-copy p,.medal-tile:focus-within .medal-tile-copy p{max-height:76px;opacity:1;transform:translateY(0);transition-delay:.1s}
.medal-tile:hover .medal-tile-copy .package-more,.medal-tile:focus-within .medal-tile-copy .package-more{max-height:22px;opacity:1;transform:translateY(0);transition-delay:.15s}
@media(max-width:700px){.medal-tile-link{aspect-ratio:.8;min-height:0}.medal-tile-copy{height:84px;max-height:84px;padding:10px 90px 14px 15px}.medal-tile-copy::before{clip-path:inset(calc(100% - 84px) 0 0)}.medal-tile-copy h3.medal-card-title{font-size:clamp(17px,4.7vw,22px)}.medal-tile-favorite{right:9px;bottom:9px}.medal-tile:hover .medal-tile-copy,.medal-tile:focus-within .medal-tile-copy{height:190px;max-height:190px}.medal-tile:hover .medal-tile-copy::before,.medal-tile:focus-within .medal-tile-copy::before{clip-path:inset(0)}}
@media(prefers-reduced-motion:reduce){.medal-tile-copy,.medal-tile-copy::before,.medal-tile-copy p,.medal-tile-copy .section-label,.medal-tile-copy .package-more{transition:none}}

/* Per-medal palettes are generated from each badge identity so color and
   animation phase differ by card while remaining stable between visits. */
.medal-tile-art{background:radial-gradient(ellipse at 50% 35%,color-mix(in srgb,var(--medal-glow) 25%,transparent),transparent 67%),var(--medal-panel,#e8e7dc)}
.medal-tile-copy::before{background:linear-gradient(145deg,var(--medal-panel,#f3f3ea),var(--medal-panel-deep,#e2e8dc))}
.medal-tile-copy h3.medal-card-title{filter:hue-rotate(var(--medal-title-hue,0deg));animation-duration:var(--medal-title-speed,7s);animation-delay:var(--medal-title-delay,0s)}
.medal-tile{background:var(--medal-panel,#e8e7dc)}.medal-tile-art img{filter:none}

/* Individually framed, full-image detail presentations with an ambient halo. */
.medal-detail-page{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(145deg,#f8f7f1,#f0f1e9 55%,#f8f7f2)}
.medal-detail-page::before{content:"";position:absolute;z-index:-1;inset:-12%;pointer-events:none;background:radial-gradient(ellipse at 22% 18%,color-mix(in srgb,var(--medal-glow) 23%,transparent),transparent 34%),radial-gradient(ellipse at 82% 42%,color-mix(in srgb,var(--medal-panel-deep) 45%,transparent),transparent 36%),radial-gradient(ellipse at 45% 88%,rgba(255,255,255,.85),transparent 37%);background-size:140% 140%;animation:medal-detail-ambient var(--medal-title-speed,8s) ease-in-out infinite alternate}
.medal-detail-hero{position:relative;isolation:isolate;padding:clamp(20px,3vw,34px);border:1px solid color-mix(in srgb,var(--medal-glow) 38%,#fff);border-radius:20px;background:linear-gradient(135deg,rgba(255,255,255,.65),color-mix(in srgb,var(--medal-panel) 45%,rgba(255,255,255,.62)));box-shadow:0 24px 65px rgba(37,49,39,.08);animation:detail-card-arrive .7s ease-out both}
.medal-detail-art{position:relative;display:grid;place-items:center;max-width:560px;width:100%;aspect-ratio:1/1;margin:0 auto;overflow:hidden;border:1px solid color-mix(in srgb,var(--medal-glow) 60%,#fff);background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.94),color-mix(in srgb,var(--medal-panel) 80%,#fff));box-shadow:0 20px 50px color-mix(in srgb,var(--medal-glow) 22%,transparent),inset 0 0 0 8px rgba(255,255,255,.46)}
.medal-detail-art .detail-frame{position:relative;z-index:1;display:grid;place-items:center;width:82%;height:82%;padding:clamp(8px,1.5vw,16px);border:1px solid color-mix(in srgb,var(--medal-glow) 75%,#fff);background:rgba(255,255,255,.48);box-shadow:0 12px 34px rgba(35,47,37,.12),inset 0 0 0 5px rgba(255,255,255,.56);transition:transform .45s ease,box-shadow .45s ease}
.medal-detail-art img{display:block;width:100%;height:100%;min-height:0;object-fit:contain;padding:2px;border:1px solid rgba(255,255,255,.8);border-radius:4px;background:rgba(255,255,255,.26);filter:drop-shadow(0 7px 12px rgba(35,45,37,.13))}
.medal-detail-art:hover .detail-frame{transform:scale(1.025) rotate(-.5deg);box-shadow:0 17px 40px color-mix(in srgb,var(--medal-glow) 28%,transparent),inset 0 0 0 5px rgba(255,255,255,.7)}
.detail-art-orbit{position:absolute;z-index:0;inset:7%;border:1px solid color-mix(in srgb,var(--medal-glow) 45%,transparent);border-radius:50%;animation:medal-detail-orbit 24s linear infinite}
.detail-art-orbit::before,.detail-art-orbit::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:var(--medal-glow);box-shadow:0 0 18px color-mix(in srgb,var(--medal-glow) 72%,transparent)}
.detail-art-orbit::before{top:10%;left:13%}.detail-art-orbit::after{right:9%;bottom:15%;width:5px;height:5px}
.detail-art-index{position:absolute;z-index:2;bottom:12px;left:16px;color:color-mix(in srgb,var(--medal-glow) 55%,#33453a);font-size:9px;font-weight:700;letter-spacing:.2em}
.medal-detail-art[data-decoration="1"]{border-radius:46% 46% 14px 14px}.medal-detail-art[data-decoration="1"] .detail-frame{border-radius:44% 44% 10px 10px;outline:2px solid color-mix(in srgb,var(--medal-glow) 40%,transparent);outline-offset:5px}
.medal-detail-art[data-decoration="2"]{border-radius:12px 44% 12px 44%}.medal-detail-art[data-decoration="2"] .detail-frame{border-style:double;border-width:5px 2px;border-radius:8px 36% 8px 36%}
.medal-detail-art[data-decoration="3"]{border-radius:50%;box-shadow:0 20px 50px color-mix(in srgb,var(--medal-glow) 24%,transparent),inset 0 0 0 10px rgba(255,255,255,.65)}.medal-detail-art[data-decoration="3"] .detail-frame{border-radius:50%;outline:1px dashed color-mix(in srgb,var(--medal-glow) 68%,#fff);outline-offset:5px}
.medal-detail-art[data-decoration="4"]{border-radius:8px;box-shadow:0 20px 50px color-mix(in srgb,var(--medal-glow) 22%,transparent),inset 0 0 0 4px rgba(255,255,255,.75)}.medal-detail-art[data-decoration="4"] .detail-frame{border-radius:2px;border-width:3px;padding:12px}
.medal-detail-copy{position:relative;z-index:1;max-width:560px;padding:clamp(8px,2vw,25px)}
.medal-detail-copy>.section-label{display:inline-flex;width:fit-content;padding:6px 11px;border:1px solid color-mix(in srgb,var(--medal-glow) 42%,#fff);border-radius:99px;background:color-mix(in srgb,var(--medal-panel) 55%,#fff);color:color-mix(in srgb,var(--medal-glow) 42%,#24372b);font-size:10px;letter-spacing:.12em}
.medal-detail-copy>.section-label{padding:7px 14px;border-color:color-mix(in srgb,var(--medal-hue) 40%,#34483a);background:rgba(255,255,255,.88);background-image:none;-webkit-background-clip:border-box;color:#263c30;-webkit-text-fill-color:#263c30;font-size:12px;letter-spacing:.08em;box-shadow:0 5px 16px rgba(37,54,41,.09)}
.medal-option-setting>.admin-toolbar{align-items:center;margin:0}.medal-option-setting>.admin-toolbar h3{margin-top:3px}.medal-option-setting>.admin-toolbar .form-hint{margin:4px 0 0}.medal-settings-toggle{flex:0 0 auto}.medal-settings-content{margin-top:18px;padding-top:6px;border-top:1px solid var(--line,#d7dbd1)}.medal-settings-content[hidden]{display:none!important}
.medal-option-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}.medal-options-save[hidden]{display:none!important}@media(max-width:700px){.medal-option-setting>.admin-toolbar{align-items:flex-start;gap:12px}.medal-option-actions{flex-wrap:wrap;justify-content:flex-end}.medal-option-actions .btn{min-height:34px;padding:0 10px;font-size:11px}}
.medal-kind-group{margin-top:28px}.medal-kind-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;padding:0 0 12px;border-bottom:1px solid var(--line,#d7dbd1)}.medal-kind-heading h3{margin:3px 0 0;font-size:20px;font-weight:600;color:var(--ink,#27382d)}.medal-kind-count{color:var(--muted,#778176);font-size:12px}.medal-kind-empty{padding:28px 12px;margin-bottom:12px;background:#fafaf7;border:1px dashed var(--line,#d7dbd1)}
.medal-detail-copy h1{width:fit-content;max-width:100%;margin:18px 0;font-size:clamp(34px,3.8vw,48px);font-weight:600;line-height:1.22;text-wrap:balance;color:transparent;background:linear-gradient(100deg,#304839,#8b5888,#a26731,#347b69,#304839);background-size:260% 100%;background-clip:text;-webkit-background-clip:text;filter:hue-rotate(var(--medal-title-hue,0deg));animation:medal-title-cycle var(--medal-title-speed,7s) linear infinite;animation-delay:var(--medal-title-delay,0s)}
.medal-detail-copy .lead{position:relative;margin:0;padding:16px 18px;border-left:3px solid var(--medal-glow);border-radius:0 12px 12px 0;background:linear-gradient(100deg,color-mix(in srgb,var(--medal-panel) 74%,#fff),rgba(255,255,255,.48));color:#45594a;font-size:clamp(16px,1.8vw,19px);line-height:1.8}
.medal-detail-copy .lead::before{content:"♪";position:absolute;right:14px;top:3px;color:color-mix(in srgb,var(--medal-glow) 52%,transparent);font-size:26px}
.medal-detail-copy .description{position:relative;margin:16px 0 20px;padding:18px 20px;border:1px solid rgba(68,86,70,.1);border-radius:12px;background:rgba(255,255,255,.65);color:#69736a;line-height:1.9;box-shadow:inset 3px 0 0 color-mix(in srgb,var(--medal-glow) 48%,transparent)}
.detail-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.medal-purchase-section{position:relative;z-index:1;border-radius:16px;overflow:hidden;box-shadow:0 14px 40px rgba(39,53,42,.06)}
@keyframes medal-detail-ambient{from{transform:translate3d(-1.5%,0,0) rotate(-2deg);opacity:.65}to{transform:translate3d(1.5%,1%,0) rotate(2deg);opacity:1}}
@keyframes medal-detail-orbit{to{transform:rotate(360deg)}}
@keyframes detail-card-arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.medal-detail-hero{gap:23px;padding:14px;border-radius:15px}.medal-detail-art{max-width:420px}.medal-detail-copy{padding:5px}.medal-detail-copy h1{font-size:clamp(34px,10vw,46px);margin:13px 0}.medal-detail-copy .lead,.medal-detail-copy .description{padding:14px 15px}.detail-art-index{font-size:8px;bottom:9px;left:12px}}
@media(prefers-reduced-motion:reduce){.medal-detail-page::before,.medal-detail-hero,.detail-art-orbit,.medal-detail-copy h1{animation:none}.medal-detail-art .detail-frame{transition:none}}

/* Soft musical notation moves only in the page background; each medal gets
   its own score angle, tempo, hue and starting beat from its stable identity. */
.medal-detail-page{--music-ink:color-mix(in srgb,var(--medal-glow) 56%,#587260)}
.detail-music-ambience{position:absolute;z-index:0;inset:0;overflow:hidden;pointer-events:none;contain:paint}
.medal-detail-page>.detail-back{position:relative;z-index:2}
.medal-detail-hero{z-index:1}
.detail-music-ambience .music-staff{position:absolute;left:-38%;width:176%;height:72px;opacity:.16;border-radius:50%;background:repeating-linear-gradient(to bottom,transparent 0 12px,var(--music-ink) 12px 13px,transparent 13px 15px);mask-image:linear-gradient(90deg,transparent,black 14%,black 85%,transparent);transform:rotate(var(--music-angle,0deg));animation:music-score-flow var(--music-speed,18s) ease-in-out infinite alternate;animation-delay:var(--music-delay,0s)}
.detail-music-ambience .music-staff::after{content:"♪　　 ♫　　　 ♬　　 ♩　　　 ♫　　 ♪";position:absolute;left:2%;top:-13px;color:var(--music-ink);font-family:Georgia,serif;font-size:28px;letter-spacing:.13em;white-space:nowrap;opacity:.76;animation:music-notation-drift var(--music-notation-speed,13s) linear infinite;animation-delay:var(--music-delay,0s)}
.music-staff-one{top:19%}.music-staff-two{top:66%;left:-25%!important;opacity:.105!important;transform:rotate(var(--music-angle-reverse,0deg)) scaleY(-1)!important;animation-direction:alternate-reverse!important}
.detail-music-ambience .music-note{position:absolute;color:var(--music-ink);font-family:Georgia,serif;font-weight:700;line-height:1;opacity:.19;text-shadow:0 0 24px color-mix(in srgb,var(--medal-glow) 34%,transparent);animation:music-note-bounce var(--music-note-speed,8s) ease-in-out infinite alternate;animation-delay:var(--music-delay,0s)}
.music-note-one{left:12%;top:31%;font-size:clamp(28px,4vw,55px)}.music-note-two{right:14%;top:47%;font-size:clamp(34px,5vw,66px);animation-delay:var(--music-delay-soft,0s)!important}.music-note-three{left:28%;top:76%;font-size:clamp(25px,3vw,44px);animation-delay:var(--music-delay-late,0s)!important}.music-note-four{right:31%;top:13%;font-size:clamp(22px,3vw,42px);animation-delay:var(--music-delay-near,0s)!important}
.detail-music-ambience[data-music-mode="1"] .music-staff-two{display:none}.detail-music-ambience[data-music-mode="2"] .music-staff-one{top:25%;transform:rotate(-5deg)}.detail-music-ambience[data-music-mode="3"] .music-staff-two{top:73%;height:54px}.detail-music-ambience[data-music-mode="4"] .music-staff-one{top:38%;height:88px;transform:rotate(7deg)}
@keyframes music-score-flow{from{translate:-3% 0}to{translate:7% 13px}}
@keyframes music-notation-drift{from{transform:translateX(-9%)}to{transform:translateX(16%)}}
@keyframes music-note-bounce{from{transform:translate3d(0,8px,0) rotate(-9deg)}to{transform:translate3d(0,-14px,0) rotate(8deg)}}
@media(max-width:700px){.detail-music-ambience .music-staff{left:-64%;width:230%;height:55px;opacity:.11}.music-staff-one{top:16%}.music-staff-two{top:74%;left:-55%!important}.detail-music-ambience .music-staff::after{font-size:21px}.detail-music-ambience .music-note{opacity:.13}.music-note-one{left:4%;top:35%}.music-note-two{right:5%;top:52%}.music-note-three{left:19%;top:83%}.music-note-four{right:25%;top:10%}}
@media(prefers-reduced-motion:reduce){.detail-music-ambience .music-staff,.detail-music-ambience .music-staff::after,.detail-music-ambience .music-note{animation:none}}

/* Each detail view receives a fresh color wash and a shuffled instrument scene. */
.medal-detail-page{background:linear-gradient(135deg,var(--detail-bg,#f6f5ef),var(--detail-bg-tint,#edf3ed) 56%,var(--detail-bg,#f6f5ef));transition:background 500ms ease}
.medal-detail-page::before{background:radial-gradient(ellipse at 18% 22%,color-mix(in srgb,var(--detail-bg-glow) 58%,transparent),transparent 38%),radial-gradient(ellipse at 84% 68%,color-mix(in srgb,var(--medal-glow) 36%,transparent),transparent 40%),radial-gradient(ellipse at 48% 98%,rgba(255,255,255,.74),transparent 35%)}
.music-scene-object{display:none;position:absolute;color:var(--music-ink);opacity:.21;filter:drop-shadow(0 14px 26px color-mix(in srgb,var(--detail-bg-glow) 65%,transparent));animation:music-object-drift var(--music-speed,18s) ease-in-out infinite alternate;animation-delay:var(--music-delay-soft,0s)}
.detail-music-ambience[data-music-scene="1"] .scene-vinyl,.detail-music-ambience[data-music-scene="2"] .scene-piano,.detail-music-ambience[data-music-scene="3"] .scene-guitar,.detail-music-ambience[data-music-scene="5"] .scene-cassette{display:block}.detail-music-ambience[data-music-scene="4"] .scene-equalizer{display:flex}
.scene-vinyl{width:clamp(190px,28vw,380px);aspect-ratio:1;border-radius:50%;right:7%;top:15%;background:repeating-radial-gradient(circle at center,#31493b 0 2px,#54705b 3px 5px,#344b3d 6px 8px);box-shadow:inset 0 0 0 1px #ffffff55,0 0 70px #758c7440;animation-name:vinyl-spin,music-object-drift;animation-duration:24s,var(--music-speed,18s);animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-direction:normal,alternate}
.vinyl-label{position:absolute;inset:38%;border-radius:50%;background:radial-gradient(circle,#d8c987 0 8%,#e3d9aa 9% 50%,#384d40 52%);box-shadow:0 0 0 2px #ffffff55}.vinyl-shine{position:absolute;inset:4%;border-radius:50%;background:conic-gradient(from 15deg,transparent 0 20%,#ffffff2b 24%,transparent 31% 64%,#ffffff18 70%,transparent 75%)}
.scene-piano{width:clamp(250px,34vw,470px);height:clamp(76px,10vw,130px);left:4%;top:53%;border:6px solid #536a59;border-radius:13px;background:repeating-linear-gradient(90deg,#f8f5e9 0 8.7%,#667767 8.7% 9.1%,#f8f5e9 9.1% 9.8%);box-shadow:0 12px 30px #344b3d30}
.piano-black-keys{position:absolute;inset:0 5% auto;height:58%;background:repeating-linear-gradient(90deg,transparent 0 7.2%,#26382d 7.2% 11.5%,transparent 11.5% 14.3%,#26382d 14.3% 18.6%,transparent 18.6% 28.6%);background-size:20% 100%;background-repeat:repeat-x}
.scene-guitar{width:clamp(135px,20vw,260px);height:clamp(255px,34vw,420px);left:10%;top:14%;transform:rotate(-11deg);animation-name:guitar-sway}
.scene-guitar svg{width:100%;height:100%;fill:currentColor;stroke:currentColor;opacity:.9}
.scene-equalizer{height:clamp(150px,24vw,300px);display:none;align-items:center;gap:clamp(8px,1.5vw,22px);right:10%;top:24%}
.scene-equalizer i{display:block;width:clamp(9px,1.5vw,20px);height:var(--bar-height,60%);border-radius:20px;background:linear-gradient(180deg,var(--detail-bg-glow),var(--music-ink));animation:equalizer-pulse calc(var(--music-note-speed,8s)*.55) ease-in-out infinite alternate;animation-delay:var(--music-delay,0s)}
.scene-equalizer i:nth-child(3n){--bar-height:90%;animation-delay:var(--music-delay-soft,0s)}.scene-equalizer i:nth-child(3n + 1){--bar-height:48%;animation-delay:var(--music-delay-late,0s)}.scene-equalizer i:nth-child(4n){--bar-height:72%;animation-delay:var(--music-delay-near,0s)}
.scene-cassette{width:clamp(230px,30vw,410px);height:clamp(145px,19vw,250px);right:8%;top:28%;border:8px solid #415849;border-radius:22px;background:linear-gradient(145deg,#9bad93,#617765 60%,#405648);box-shadow:inset 0 0 0 5px #ffffff30,0 18px 32px #344b3d38}
.cassette-reel{position:absolute;top:23%;width:25%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#354a3b 0 5px,#8ca08a 6px 8px,#354a3b 9px 13px);animation:vinyl-spin 12s linear infinite}.reel-one{left:18%}.reel-two{right:18%;animation-direction:reverse}.cassette-tape{position:absolute;left:24%;right:24%;bottom:15%;height:25%;border-radius:6px;background:linear-gradient(90deg,#34483a,#c4c8a8 12% 88%,#34483a)}
@keyframes vinyl-spin{to{rotate:360deg}}@keyframes music-object-drift{from{translate:0 14px}to{translate:0 -17px}}@keyframes guitar-sway{from{transform:rotate(-13deg) translateY(10px)}to{transform:rotate(-5deg) translateY(-12px)}}@keyframes equalizer-pulse{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
@media(max-width:700px){.music-scene-object{opacity:.12}.scene-vinyl{width:clamp(150px,48vw,230px);right:-8%;top:9%}.scene-piano{width:70vw;height:75px;left:-14%;top:67%}.scene-guitar{width:110px;height:230px;left:-4%;top:21%}.scene-equalizer{height:150px;right:3%;top:28%;gap:7px}.scene-equalizer i{width:8px}.scene-cassette{width:200px;height:130px;right:-8%;top:24%}}
@media(prefers-reduced-motion:reduce){.music-scene-object,.scene-equalizer i,.scene-cassette .cassette-reel{animation:none}}

/* A fresh instrument illustration is selected on every detail entry. */
.music-instrument{position:absolute;z-index:0;right:clamp(22px,8vw,130px);bottom:7%;width:clamp(160px,23vw,310px);height:clamp(170px,23vw,310px);display:grid;place-items:center;color:var(--music-ink);opacity:.31;filter:drop-shadow(0 18px 24px color-mix(in srgb,var(--detail-bg-glow) 78%,transparent));animation:instrument-hover 2.8s ease-in-out infinite alternate;transform-origin:50% 70%;pointer-events:none}
.instrument-glyph{font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif;font-size:clamp(100px,15vw,205px);line-height:1;display:block;text-shadow:0 0 32px color-mix(in srgb,var(--medal-glow) 62%,transparent);animation:instrument-glyph-pulse 2.1s ease-in-out infinite alternate}
.instrument-name{position:absolute;bottom:4%;padding:7px 16px;border:1px solid color-mix(in srgb,var(--music-ink) 38%,transparent);border-radius:999px;background:color-mix(in srgb,var(--detail-bg) 76%,transparent);font-size:clamp(13px,1.4vw,18px);font-weight:700;letter-spacing:.18em;backdrop-filter:blur(8px)}
.instrument-glint{position:absolute;inset:9%;border:2px solid color-mix(in srgb,var(--medal-glow) 52%,transparent);border-radius:50%;animation:instrument-ring 3.4s ease-in-out infinite alternate}
.music-instrument-strings{animation:instrument-string-sway 2.3s ease-in-out infinite alternate}.music-instrument-wind{animation:instrument-wind-sway 2.6s ease-in-out infinite alternate}.music-instrument-keys{animation:instrument-keys-bounce 2.1s ease-in-out infinite alternate}.music-instrument-percussion{animation:instrument-drum-hit 1.15s ease-in-out infinite alternate}.music-instrument-brass{animation:instrument-brass-sway 2s ease-in-out infinite alternate}
.medal-detail-art{aspect-ratio:auto;min-height:clamp(300px,38vw,520px);height:auto;transition:aspect-ratio .35s ease,border-radius .4s ease,box-shadow .4s ease}
.medal-detail-art.is-wide{aspect-ratio:1.28;min-height:0}.medal-detail-art.is-tall{aspect-ratio:.78;min-height:0}
.medal-detail-art .detail-frame{width:86%;height:86%;animation:frame-float 3.4s ease-in-out infinite alternate;box-shadow:0 18px 46px color-mix(in srgb,var(--medal-glow) 35%,transparent),inset 0 0 0 6px rgba(255,255,255,.65),0 0 0 2px color-mix(in srgb,var(--medal-glow) 74%,white)}
.medal-detail-art.is-wide .detail-frame{width:90%;height:88%}.medal-detail-art.is-tall .detail-frame{width:78%;height:91%}
.medal-detail-art .detail-frame::before,.medal-detail-art .detail-frame::after{content:"";position:absolute;z-index:2;inset:-9px;border:1px solid color-mix(in srgb,var(--medal-glow) 78%,white);pointer-events:none;animation:frame-orbit 7s ease-in-out infinite alternate}
.medal-detail-art .detail-frame::after{inset:-17px;border-style:dashed;border-color:color-mix(in srgb,var(--medal-hue) 44%,transparent);animation-duration:5.2s;animation-direction:alternate-reverse}
.detail-art-orbit{inset:-2%;border-width:2px;animation-duration:12s;box-shadow:0 0 32px color-mix(in srgb,var(--medal-glow) 25%,transparent)}
@keyframes instrument-hover{from{translate:0 22px;rotate:calc(var(--instrument-tilt,0deg) - 8deg) scale(.94)}to{translate:0 -24px;rotate:calc(var(--instrument-tilt,0deg) + 8deg) scale(1.06)}}
@keyframes instrument-glyph-pulse{from{transform:scale(.91) rotate(-5deg)}to{transform:scale(1.08) rotate(5deg)}}
@keyframes instrument-ring{from{transform:scale(.82) rotate(-20deg);opacity:.28}to{transform:scale(1.13) rotate(28deg);opacity:.82}}
@keyframes instrument-string-sway{from{translate:-14px 14px;rotate:-12deg}to{translate:12px -20px;rotate:12deg}}
@keyframes instrument-wind-sway{from{translate:-20px 12px;rotate:-10deg}to{translate:18px -14px;rotate:10deg}}
@keyframes instrument-keys-bounce{from{translate:0 18px;scale:.94}to{translate:0 -20px;scale:1.08}}
@keyframes instrument-drum-hit{from{translate:0 -8px;scale:1}to{translate:0 18px;scale:.92}}
@keyframes instrument-brass-sway{from{translate:-16px 18px;rotate:-14deg}to{translate:16px -18px;rotate:14deg}}
@keyframes frame-float{from{translate:0 3px;rotate:-1deg}to{translate:0 -10px;rotate:1deg}}
@keyframes frame-orbit{from{transform:rotate(-4deg) scale(.98)}to{transform:rotate(5deg) scale(1.02)}}
@media(max-width:700px){.music-instrument{right:-8px;bottom:3%;width:150px;height:170px;opacity:.18}.instrument-glyph{font-size:105px}.instrument-name{font-size:12px;padding:5px 10px}.medal-detail-art{min-height:290px}.medal-detail-art.is-wide{min-height:0}.medal-detail-art.is-tall{min-height:0}.medal-detail-art .detail-frame{width:83%;height:83%}.medal-detail-art.is-wide .detail-frame{width:91%;height:88%}.medal-detail-art.is-tall .detail-frame{width:76%;height:92%}}
@media(prefers-reduced-motion:reduce){.music-instrument,.instrument-glyph,.instrument-glint,.medal-detail-art .detail-frame,.medal-detail-art .detail-frame::before,.medal-detail-art .detail-frame::after,.detail-art-orbit{animation:none}}

/* Restrained line-art instruments: their small motions follow how each one is played. */
.music-instrument{right:auto;bottom:auto;width:clamp(145px,18vw,235px);height:clamp(125px,17vw,220px);display:grid;place-items:center;opacity:.19;filter:drop-shadow(0 8px 15px color-mix(in srgb,var(--detail-bg-glow) 46%,transparent));animation:instrument-presence 5s ease-in-out infinite alternate;animation-delay:var(--instrument-delay,0s)}
.music-instrument svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--music-ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.music-instrument .instrument-outline{fill:color-mix(in srgb,var(--detail-bg-glow) 23%,transparent);stroke-width:2.4}
.music-instrument .guitar-strings{stroke:color-mix(in srgb,var(--music-ink) 68%,white);stroke-width:1.2;transform-origin:50% 50%;animation:string-pluck 1.8s ease-in-out infinite}
.music-instrument.instrument-piano{width:clamp(200px,25vw,310px);height:clamp(110px,14vw,175px)}
.piano-keys{fill:#f6f3e9;stroke:var(--music-ink);stroke-width:1.1}.piano-keys .key-press{stroke-width:9;stroke:color-mix(in srgb,var(--detail-bg-glow) 75%,var(--music-ink));stroke-dasharray:70 440;animation:key-press 3.6s ease-in-out infinite}
.piano-black{stroke:var(--music-ink);stroke-width:8;stroke-dasharray:1 26;stroke-linecap:butt}
.sound-note{position:absolute;font-style:normal;font-family:Georgia,serif;font-size:24px;color:var(--music-ink);opacity:0;animation:local-note-rise 2.8s ease-out infinite}
.sound-note.note-a{left:69%;top:16%;animation-delay:.35s}.sound-note.note-b{left:78%;top:28%;animation-delay:1.4s}.sound-note.note-c{left:58%;top:18%;animation-delay:2.1s}
.instrument-drums .drum-wave{fill:none;stroke:var(--music-ink);stroke-width:1.6;stroke-dasharray:5 5;transform-box:fill-box;transform-origin:center;opacity:0;animation:drum-wave-hit 2.1s ease-out infinite}
.instrument-drums .wave-b{animation-delay:1.05s}.instrument-drums .drum-stick{transform-box:fill-box;transform-origin:top;animation:stick-tap 2.1s ease-in-out infinite}.instrument-drums .stick-b{animation-delay:.2s}.instrument-drums .drum-rim{fill:color-mix(in srgb,var(--detail-bg-glow) 13%,transparent)}
.instrument-violin .bow-line{stroke-width:3;transform-box:fill-box;transform-origin:center;animation:bow-play 2.7s ease-in-out infinite alternate}
.instrument-guzheng .zither-strings{stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:zither-pluck 1.65s ease-in-out infinite}
.instrument-flute svg>path:first-child{fill:color-mix(in srgb,var(--detail-bg-glow) 27%,transparent)}.instrument-flute .sound-note,.instrument-sax .sound-note{animation-name:breath-note;animation-duration:3.4s}
.instrument-sax svg>path:first-child{fill:color-mix(in srgb,var(--detail-bg-glow) 24%,transparent)}.instrument-sax svg>circle{fill:var(--music-ink);animation:sax-key 2s ease-in-out infinite alternate}
.instrument-slot-1{left:3%;top:17%}.instrument-slot-2{right:3%;left:auto;top:47%}.instrument-slot-3{left:36%;top:76%}
@keyframes instrument-presence{from{translate:0 3px}to{translate:0 -4px}}
@keyframes string-pluck{0%,30%,100%{transform:scaleX(1)}36%{transform:scaleX(1.035)}42%{transform:scaleX(.985)}48%{transform:scaleX(1.015)}}
@keyframes key-press{0%,12%,100%{stroke-dashoffset:0;opacity:.15}18%{stroke-dashoffset:-74;opacity:.9}29%{stroke-dashoffset:-74;opacity:.22}43%{stroke-dashoffset:-250;opacity:.85}54%{stroke-dashoffset:-250;opacity:.2}}
@keyframes local-note-rise{0%{opacity:0;transform:translate(0,10px) scale(.75)}18%{opacity:.72}75%{opacity:.5}100%{opacity:0;transform:translate(17px,-42px) scale(1.12)}}
@keyframes drum-wave-hit{0%,12%{opacity:0;transform:scale(.72)}24%{opacity:.6}75%,100%{opacity:0;transform:scale(1.24)}}
@keyframes stick-tap{0%,25%,100%{rotate:0deg}33%{rotate:-9deg}43%{rotate:5deg}52%{rotate:0deg}}
@keyframes bow-play{from{translate:-4px 2px;rotate:-2deg}to{translate:4px -2px;rotate:2deg}}
@keyframes zither-pluck{0%,35%,100%{transform:scaleY(1)}42%{transform:scaleY(1.045)}49%{transform:scaleY(.99)}56%{transform:scaleY(1.02)}}
@keyframes breath-note{0%{opacity:0;transform:translate(0,0) scale(.8)}25%{opacity:.65}100%{opacity:0;transform:translate(22px,-35px) scale(1.1)}}
@keyframes sax-key{from{opacity:.35}to{opacity:.9}}
@media(max-width:700px){.music-instrument{width:125px;height:108px;opacity:.14}.music-instrument.instrument-piano{width:165px;height:92px}.instrument-slot-1{left:0;top:12%}.instrument-slot-2{right:0;left:auto;top:46%}.instrument-slot-3{left:29%;top:78%}.sound-note{font-size:18px}}
@media(prefers-reduced-motion:reduce){.music-instrument,.music-instrument *,.sound-note{animation:none!important}}
.music-instrument{right:auto;bottom:auto;animation-duration:var(--instrument-duration,3s);animation-delay:var(--instrument-delay,0s)}
.instrument-slot-1{left:4%;top:12%}.instrument-slot-2{right:5%;left:auto;top:38%}.instrument-slot-3{left:34%;top:67%}
.music-instrument .instrument-glyph{animation-duration:var(--instrument-duration,3s);animation-delay:var(--instrument-delay,0s)}
.instrument-slot-1 .instrument-glint{animation-duration:3.7s;animation-delay:-1.1s}.instrument-slot-2 .instrument-glint{animation-duration:2.6s;animation-delay:-.4s}.instrument-slot-3 .instrument-glint{animation-duration:4.4s;animation-delay:-2s}
.music-note-one{animation-name:note-arc!important;animation-duration:4.5s!important}.music-note-two{animation-name:note-turn!important;animation-duration:5.3s!important}.music-note-three{animation-name:note-bounce-wide!important;animation-duration:3.8s!important}.music-note-four{animation-name:note-pulse!important;animation-duration:2.6s!important}
@keyframes note-arc{from{transform:translate(-12px,12px) rotate(-18deg)}to{transform:translate(18px,-26px) rotate(18deg)}}
@keyframes note-turn{from{transform:translate(12px,18px) rotate(-22deg) scale(.85)}to{transform:translate(-15px,-23px) rotate(25deg) scale(1.18)}}
@keyframes note-bounce-wide{from{transform:translate(-10px,17px) rotate(8deg)}to{transform:translate(22px,-31px) rotate(-12deg)}}
@keyframes note-pulse{from{transform:translateY(13px) scale(.75) rotate(-12deg);opacity:.14}to{transform:translateY(-19px) scale(1.2) rotate(14deg);opacity:.38}}
@media(max-width:700px){.instrument-slot-1{left:0;top:8%}.instrument-slot-2{right:-3%;left:auto;top:46%}.instrument-slot-3{left:25%;top:74%}.music-instrument{width:125px;height:140px;opacity:.17}.instrument-glyph{font-size:90px}.music-note-one{left:3%;top:34%}.music-note-two{right:3%;top:56%}.music-note-three{left:13%;top:82%}.music-note-four{right:21%;top:10%}}