body.treasure-store .workbench-layout{grid-template-columns:280px minmax(0,1fr) 340px;gap:28px;align-items:center}
body.treasure-store .class-list{display:block;order:0;grid-column:auto;width:100%;min-width:0;overflow:visible;padding:20px;background:#252723f2;border:1px solid #ad9362;border-radius:5px;align-self:start}
body.treasure-store .class-list h2{display:block;margin:0 0 8px;font-size:24px;line-height:1.2;color:#f2e1bd}
body.treasure-store .class-intro{font-size:14px;line-height:1.5;color:#d7c9ab;margin:0 0 18px}
body.treasure-store .class-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
body.treasure-store .class-list button{display:flex;gap:6px;align-items:center;justify-content:space-between;width:100%;min-width:0;min-height:44px;padding:9px 10px;border:1px solid #bba47740;border-radius:3px;background:#ffffff04;color:#f8eddb;font:600 15px/1.25 var(--sans);white-space:normal;cursor:pointer;text-align:left}
body.treasure-store .class-list button span{display:block;visibility:hidden;font-size:11px;flex-shrink:0}
body.treasure-store .class-list button:hover{background:#bda27025;border-color:#cfb781}
body.treasure-store .class-list button[aria-pressed=true]{color:#302619;background:#dec38b;border-color:#f1dba7;box-shadow:inset 0 0 0 1px #785c32}
body.treasure-store .class-list button[aria-pressed=true] span{visibility:visible}
body.treasure-store .class-list :is(button,select):focus-visible{outline:3px solid #fff1c8;outline-offset:3px}
body.treasure-store .class-options>button[data-class="0"]{grid-column:1/-1}
body.treasure-store .class-options>button[data-class="13"]{grid-column:1/-1}
body.treasure-store .relic-stage{grid-column:auto;order:1;min-width:0}
body.treasure-store .hero-details{grid-column:auto;order:2;min-width:0}
body.treasure-store .class-list{position:relative;isolation:isolate;margin:14px 0 18px;padding:31px 22px 29px;background:linear-gradient(90deg,#c6a66c45,transparent 12%,transparent 86%,#b8955f40),radial-gradient(ellipse at 15% 33%,#ac793515,transparent 55%),#efdfb8;color:#372c20;border:1px solid #b69961;border-radius:5px 5px 10px 10px;box-shadow:inset 0 12px 14px -12px #5e3d16, inset 0 -12px 15px -13px #5e3d16,0 12px 22px #130e0860;outline:none}
body.treasure-store .class-list::before,body.treasure-store .class-list::after{content:'';position:absolute;left:-10px;right:-10px;height:28px;border:1px solid #96703f;border-left:7px solid #a37d46;border-right:7px solid #a37d46;border-radius:10px / 14px;background:linear-gradient(180deg,#a58149 0%,#dec393 17%,#f9ebc5 40%,#e8d2a0 66%,#b18a4c 100%);box-shadow:inset 2px 0 2px #f5dfac,inset -2px 0 2px #745024,0 4px 7px #21140755;pointer-events:none;z-index:1}
body.treasure-store .class-list::before{top:-14px}
body.treasure-store .class-list::after{bottom:-14px;transform:rotate(180deg)}
body.treasure-store .class-list h2{color:#392b1d;font-style:italic;text-align:center;font-size:23px}
body.treasure-store .class-intro{color:#655039;text-align:center;border-bottom:3px double #b8a17b;padding-bottom:16px;margin-bottom:16px}
body.treasure-store .class-list button{color:#493723;background:none;border:0;border-bottom:1px solid #b8a17b70;border-radius:0;font-family:var(--serif);font-size:15px;padding:9px 3px;min-height:42px}
body.treasure-store .class-list button[aria-pressed=true]{background:#68492e;color:#fff4dc;box-shadow:none;padding-left:8px;padding-right:8px}
body.treasure-store .class-list button:hover{background:#c8ad7c66}
body.treasure-store .class-list button[aria-pressed=true]:hover{background:#68492e}
body.treasure-store .class-list :is(button,select):focus-visible{outline-color:#68492e}
@media(min-width:1101px) and (max-width:1300px){body.treasure-store .workbench-layout{grid-template-columns:250px minmax(0,1fr) 290px;gap:18px}
}
@media(max-width:1100px){body.treasure-store .workbench-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
body.treasure-store .class-list{grid-column:1/-1}
body.treasure-store .class-options{grid-template-columns:repeat(4,minmax(0,1fr))}
body.treasure-store .class-options>button[data-class="0"]{grid-column:auto}
}
@media(max-width:760px){body.treasure-store .workbench-layout{display:flex;gap:24px}
body.treasure-store .class-list{padding:20px 16px}
body.treasure-store .class-options{grid-template-columns:repeat(2,minmax(0,1fr))}
body.treasure-store .class-list button{font-size:15px;min-height:44px}
}
@media(max-width:760px){body.treasure-store .class-list{width:calc(100% - 16px);margin:14px 8px 18px;padding:29px 20px 27px}
body.treasure-store .class-options>button:is([data-class="0"],[data-class="13"]){grid-column:1/-1}
}

body.treasure-store .scroll-reveal,body.treasure-store .scroll-reveal-inner{display:contents}
body.treasure-store .scroll-reveal-inner>[data-class="13"]{grid-column:1/-1}
body.treasure-store .class-list .scroll-toggle{display:none}
@media(max-width:760px){
 body.treasure-store .class-list{padding:22px 20px 25px;margin-bottom:28px}
 body.treasure-store .class-list>h2,body.treasure-store .class-list>.class-intro{display:block}
 body.treasure-store .class-options{gap:0}
 body.treasure-store .scroll-reveal{display:grid;grid-column:1/-1;grid-template-rows:minmax(44px,0fr);mask-image:linear-gradient(to bottom,#0008,#0003 65%,transparent);transition:grid-template-rows .45s ease}
 body.treasure-store .scroll-reveal-inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;overflow:hidden;min-height:0}
 body.treasure-store .is-unrolled .scroll-reveal{grid-template-rows:minmax(44px,1fr);mask-image:none}
 body.treasure-store .class-list .scroll-toggle{position:absolute;z-index:2;bottom:-23px;left:50%;transform:translateX(-50%);display:grid;place-items:center;width:46px;min-height:46px;height:46px;padding:0;border:1px solid #91703b;border-radius:50%;background:#ead3a0;color:#51371e;box-shadow:inset 0 0 0 3px #f8e8bf,0 3px 7px #21140755;cursor:pointer}
 body.treasure-store .class-list .scroll-toggle{justify-content:center;gap:0}
 body.treasure-store .class-list .scroll-toggle:hover{background:#f7e5bb}
 body.treasure-store .scroll-toggle svg{transition:transform .3s ease}
 body.treasure-store .is-unrolled .scroll-toggle svg{transform:rotate(180deg)}
}
@media(prefers-reduced-motion:reduce){body.treasure-store :is(.scroll-reveal,.scroll-reveal-inner,.scroll-toggle svg){transition:none}}