@font-face{font-family:Nunito;src:url('/brand/nunito.ttf')}*{box-sizing:border-box}body{margin:0;background:#06272e;color:#fff0cf;font:16px system-ui,sans-serif}button,input,select{font:inherit}button,select,input{border-radius:9px;padding:.62rem .8rem}button,select{border:1px solid #507d7c;background:#14444a;color:#fff0cf;cursor:pointer}button:hover,a:hover{filter:brightness(1.15)}button:disabled{opacity:.48;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #c4f85c;outline-offset:3px}input{border:1px solid #507d7c;background:#0a323b;color:#fff0cf;min-width:0}input::placeholder{color:#a5c6bf}a{color:inherit;text-decoration:none}.primary{background:#ff8642;border-color:#ff8642;color:#092b32;font-weight:800}.ghost{background:transparent}header{display:flex;align-items:center;gap:1rem;padding:.85rem clamp(1rem,4vw,3rem);background:#082d35;border-bottom:1px solid #28535a;position:sticky;top:0;z-index:2}header form{margin-inline:auto;display:flex;gap:.4rem;width:min(42vw,35rem)}header input{width:100%}.brand{display:flex;align-items:center;gap:.7rem}.brand img:first-child{width:44px}.brand img:last-child{width:clamp(110px,16vw,210px)}.shell{display:grid;grid-template-columns:210px minmax(0,1fr);max-width:1600px;margin:auto}aside{background:#092d34;border-right:1px solid #28535a;min-height:calc(100vh - 72px);padding:1.25rem}nav,#eras{display:grid;gap:.35rem}nav a,#eras a{padding:.65rem;border-radius:8px}nav a[aria-current],nav a:hover,#eras a:hover{background:#19505a}#eras{margin-top:1rem;border-top:1px solid #28535a;padding-top:1rem;font-size:.88rem;color:#abd2c6}main{padding:clamp(1rem,4vw,3rem);min-width:0}h1,h2,h3{font-family:Nunito,system-ui,sans-serif;line-height:1.1}h1{font-size:clamp(2rem,5vw,4rem);margin:.25rem 0 1rem}h2{margin:1.8rem 0 .85rem}h3{margin:.4rem 0}.sub,small{color:#b6d7cf}.hero{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:#0b363e url('/brand/home_binder_fabric.webp') center/cover;border:1px solid #3b686a;border-radius:18px;padding:1.4rem 2rem}.hero img{width:min(25%,150px);max-height:150px;object-fit:contain}.sets{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.7rem}.set{display:flex;align-items:center;gap:.7rem;padding:.8rem;background:#0b343b;border:1px solid #2a555b;border-radius:11px}.set img{width:78px;height:44px;object-fit:contain}.set b{display:block}.toolbar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.8rem 0}.toolbar label{padding:.4rem}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem}.tile,.panel{padding:.8rem;border:1px solid #315c60;background:#0c363d;border-radius:14px;min-width:0}.tile .art{display:block}.art img,.placeholder{width:100%;aspect-ratio:63/88;object-fit:contain;border-radius:8px;background:#08262d}.placeholder{display:grid;place-items:center;color:#b6d7cf}.tile .toolbar{gap:.3rem;margin:.6rem 0 0}.tile button{padding:.35rem .5rem}.card-layout{display:grid;grid-template-columns:minmax(160px,300px) minmax(0,1fr);gap:1.5rem;align-items:start}.card-layout .art{display:block;padding:0;width:100%;border:0}.prices{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.prices strong{display:block;font-size:1.65rem}.chart{width:100%;max-height:330px}.chart text{font-size:12px;fill:#c4ddd6}.rows{display:grid;gap:.6rem}.record{display:flex;align-items:center;justify-content:space-between;gap:1rem}.record a{flex:1}.record img{width:42px;vertical-align:middle;margin-right:.7rem}.record .toolbar{flex-shrink:0}.hidden{display:none!important}dialog{width:min(640px,94vw);border:1px solid #4a7a7b;background:#0a343d;color:#fff0cf;padding:1.4rem;border-radius:15px;max-height:90vh}dialog::backdrop{background:#010c11c9}dialog form label{display:grid;gap:.3rem;margin:.7rem 0}dialog textarea{width:100%;min-height:150px;padding:.75rem;background:#06272e;color:#fff0cf;border:1px solid #547b78}dialog.gallery{width:auto;text-align:center;padding:.5rem}dialog.gallery img{display:block;max-height:75vh;max-width:85vw;margin:.4rem auto}.zoom{overflow:auto;max-height:75vh;max-width:85vw}.zoom.enlarged img{max-height:none;max-width:none;width:140vw}#notice{position:fixed;bottom:1rem;right:1rem;z-index:4;max-width:calc(100% - 2rem);background:#fff0cf;color:#082b32;border-radius:10px;padding:.7rem 1rem}#notice:empty{display:none}@media(max-width:750px){.shell{display:block}aside{min-height:0;padding:.45rem}nav{display:flex;overflow:auto;white-space:nowrap}#eras{display:none}header{flex-wrap:wrap;justify-content:space-between}header form{order:3;width:100%}.card-layout{grid-template-columns:minmax(120px,220px) minmax(0,1fr);gap:.8rem}}@media(max-width:475px){.card-layout{grid-template-columns:1fr}.card-layout>.art{width:min(65%,210px);margin:auto}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Shared navigation and desktop card detail */
:root{color-scheme:dark}
body{background:#06262c}
header{background:#082a30;gap:clamp(1rem,3vw,3rem)}
.brand img:first-child{width:clamp(160px,17vw,310px);display:block}
.header-end{display:flex;align-items:center;gap:1rem}
.header-beast{width:58px;height:58px;object-fit:contain}
header form{width:min(46vw,52rem)}
.shell{max-width:none;grid-template-columns:clamp(195px,11vw,272px) minmax(0,1fr)}
aside{background:#092e34}
nav a{display:flex;align-items:center;gap:.7rem;font-weight:650}
nav svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
nav a[aria-current]{background:#a0f5d5;color:#06272e}
main{padding:clamp(1.2rem,2.4vw,3.75rem)}
.sets .set{background:transparent;border:0;border-bottom:1px solid #21454a;border-radius:0;padding:.75rem .15rem}
.sets .set img{width:100%;height:clamp(54px,5.5vw,112px)}
.sets .set b{font-family:Nunito,system-ui,sans-serif;font-size:1.05rem;color:#fff6e6}
.tile{background:#0b3036;border-color:#254b50}
.tile button{background:transparent;border-color:#315c60;font-size:.86rem}
.back{display:inline-block;color:#abd2c6;margin-bottom:1rem}
.card-layout{grid-template-columns:minmax(200px,min(30%,540px)) minmax(0,1fr);gap:clamp(1.2rem,2.5vw,3.75rem)}
.printing h1{font-size:clamp(2rem,3.6vw,5rem);margin:0}
.printing p{margin:.55rem 0 1.15rem;font-size:clamp(1rem,1.05vw,1.4rem)}
.printing .art{background:transparent}
.printing .art img{display:block}
.printing .toolbar button{background:transparent}
.variants{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.8rem}
.variants a{font-size:.86rem;border:1px solid #315c60;border-radius:7px;padding:.4rem .6rem}
.variants a[aria-current]{color:#9cf5d3;border-color:#64bca4}
.market .panel{background:#0c3239;border-color:#28535a;padding:clamp(.8rem,2vw,1.35rem)}
.market .prices strong{font-variant-numeric:tabular-nums;font-size:clamp(1.7rem,3vw,3.6rem);margin:.2rem 0}
.market-history{margin-top:1rem}
.chart-heading{display:flex;justify-content:space-between;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:1rem}
.chart-heading h2{margin:0;font-size:clamp(1.45rem,1.6vw,2.4rem)}
.regions{display:inline-flex;border:1px solid #37656b;border-radius:10px;overflow:hidden}
.regions button{border:0;border-radius:0;background:transparent;padding:.42rem .65rem}
.regions button[aria-pressed=true]{background:#a0f5d5;color:#06272e;font-weight:750}
.chart{display:block;max-height:none}.chart text{font-size:clamp(11px,.78vw,18px)}
.market .prices small{font-size:clamp(.85rem,.85vw,1.2rem)}
.chart-plot>.sub{min-height:7rem;display:grid;place-items:center;text-align:center}
.market-mascot{display:block;width:clamp(170px,17vw,425px);max-width:90%;height:auto;margin:.45rem 0 0 auto;pointer-events:none}
@media(min-width:1500px){
  nav a{font-size:1.1rem;padding:.8rem}
  header form input,header form button,.printing .toolbar button,.variants a,.regions button{font-size:clamp(1rem,.85vw,1.2rem)}
  .tile,.set{font-size:1.05rem}
}
.era-section{
  --era:#a0f5d5;
  --era-secondary:#52a3a1;
  margin-block:1.25rem clamp(1.5rem,3vw,3rem);
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--era) 37%,#092e34);
  border-top:3px solid var(--era);
  border-radius:18px;
  background:#082a30;
  scroll-margin-top:110px;
}
.era-section[data-theme=mega]{--era:#cbb4ff;--era-secondary:#5293ff}
.era-section[data-theme=scarlet]{--era:#ff9a87;--era-secondary:#bc88fa}
.era-section[data-theme=sword]{--era:#77cfff;--era-secondary:#ed78b2}
.era-section[data-theme=sun]{--era:#ffc47d;--era-secondary:#8c87e6}
.era-section[data-theme=xy]{--era:#75dddc;--era-secondary:#e78b94}
.era-section[data-theme=black]{--era:#e0e8ec;--era-secondary:#8494a9}
.era-section[data-theme=gold]{--era:#eac77c;--era-secondary:#c5d6ee}
.era-section[data-theme=platinum]{--era:#c6cedf;--era-secondary:#da818f}
.era-section[data-theme=diamond]{--era:#a8cbff;--era-secondary:#eab1e2}
.era-section[data-theme=ex]{--era:#8ae2aa;--era-secondary:#e69979}
.era-section[data-theme=wizards]{--era:#e5c58e;--era-secondary:#7792db}
.era-heading{
  display:flex;flex-direction:column;align-items:center;
  gap:.55rem;text-align:center;
  padding:clamp(1rem,2vw,2rem);
  border-bottom:1px solid color-mix(in srgb,var(--era) 22%,#082a30);
  background:linear-gradient(112deg,
    color-mix(in srgb,var(--era) 14%,#0a3036),
    color-mix(in srgb,var(--era-secondary) 9%,#082a30) 70%);
}
.era-logo{display:block;width:clamp(180px,22vw,360px);max-width:100%;height:clamp(58px,6vw,116px);object-fit:contain;object-position:center}
[data-theme=wizards] .era-logo{width:auto;border-radius:9px}
.era-heading h2{font-size:clamp(1.5rem,2.5vw,2.75rem);margin:0}
.era-meta{color:var(--era);margin:0}
.era-section .sets{
  grid-template-columns:repeat(auto-fill,minmax(min(100%,clamp(175px,12vw,270px)),1fr));
  gap:.35rem clamp(.65rem,1.3vw,1.5rem);
  padding:.55rem clamp(.85rem,2vw,2rem) 1rem;
}
.era-section .set{
  flex-direction:column;align-items:center;justify-content:center;
  gap:.45rem;text-align:center;padding:.85rem .4rem;
  min-height:clamp(110px,9.3vw,180px);
  border-color:color-mix(in srgb,var(--era) 17%,#082a30);
}
.era-section .set:hover{background:color-mix(in srgb,var(--era) 9%,#082a30);border-radius:9px}
.era-section .set b{font-size:clamp(.95rem,1vw,1.25rem);overflow-wrap:anywhere}
@media(max-width:900px){.era-section{scroll-margin-top:165px}}
@media(max-width:560px){
  .era-section .sets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .era-logo{width:min(100%,235px)}
}
@media(max-width:900px){.shell{display:block}aside{min-height:0;padding:.6rem}nav{display:flex;flex-wrap:wrap}#eras{display:none}header{flex-wrap:wrap;justify-content:space-between}header form{order:3}.header-beast{display:none}header form{width:100%}.card-layout{grid-template-columns:minmax(150px,30%) minmax(0,1fr);gap:1rem}}
@media(max-width:560px){.card-layout{grid-template-columns:1fr}.printing .art{max-width:220px}.sets{grid-template-columns:1fr 1fr}.sets .set{flex-direction:column;align-items:start}.chart-heading h2{font-size:1.25rem}.market-mascot{width:145px}}

.binder-library button[aria-pressed=true] { border-color:#a0f5d5; color:#a0f5d5 }
.binder-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem; border-top:1px solid #315158; padding-block:1rem .65rem }
.binder-heading h2 { margin:0; overflow-wrap:anywhere }
.binder-heading p { margin:.4rem 0 0 }
.binder-heading .toolbar { margin:0 }
.binder-workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(145px,200px); gap:clamp(.7rem,1.5vw,1.5rem); align-items:start }
.book-desk { min-width:0; padding:clamp(.45rem,1.4vw,1.5rem); border:1px solid #254952; border-radius:16px; background:linear-gradient(#0321284a,#02161bd9),url('/brand/home_binder_fabric.webp') center/cover }
.book-stage { display:grid; place-items:center; perspective:1400px; min-height:clamp(260px,37vw,570px) }
.book-closed { display:block; width:min(clamp(175px,46%,465px),52vh); padding:0; border:0; border-radius:14px; background:none; box-shadow:0 16px 26px #0009 }
.book-cover { min-width:0; position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7%; border:1px solid #47777b; border-radius:12px; background:#092d34 url('/brand/home_binder_fabric.webp') center/cover; box-shadow:inset 0 0 30px #020a0b9e }
.book-cover:not(.inside) { aspect-ratio:.77; border:5px solid #152226; outline:1px solid #556669 }
.book-cover::before { content:""; position:absolute; inset:7px; border:1px dashed #77afa7a6; border-radius:inherit; pointer-events:none }
.book-cover:not(.inside)::after { content:""; position:absolute; inset:0 auto 0 0; width:8%; border-right:1px solid #69878950; background:repeating-linear-gradient(135deg,#131c1e,#11191a 2px,#1f2a2c 3px); box-shadow:3px 0 10px #0008 }
.book-cover.back::after { inset:0 0 0 auto; border-right:0; border-left:1px solid #69878950; box-shadow:-3px 0 10px #0008 }
.book-cover img { width:46%; max-height:45%; object-fit:contain; z-index:1 }
.book-cover.back img { position:absolute; width:19%; right:15%; bottom:12%; opacity:.7 }
.book-cover strong { z-index:1; max-width:72%; text-align:center; overflow-wrap:anywhere; padding:.45em .8em; border:1px dashed #705844; border-radius:9px; background:#e7d7b4; color:#092a30; font:800 clamp(.68rem,1.6vw,1.45rem) Nunito,system-ui,sans-serif; box-shadow:0 3px 6px #0008 }
.book-cover.inside.front { justify-content:flex-start; padding-top:15% }
.book-cover.inside.front img { width:25%; margin-bottom:4% }
.book-cover-sleeve { position:absolute; inset:52% 4% 5%; transform:skewY(-10deg); border-top:2px solid #72a2a6; background:linear-gradient(#12353b,#062126); box-shadow:0 -4px 12px #030b0d9c }
.book-zipper { position:absolute; top:5%; right:7%; width:10%; height:2%; border-radius:4px; background:linear-gradient(#b6c3bc,#32474a); transform:rotate(16deg) }
.book-cover.back .book-zipper { right:auto; left:6%; transform:rotate(-30deg) }
.book-spread { width:min(100%,calc((min(65vh,820px) - 58px)*var(--spread-ratio) + 45px)); min-width:0; display:grid; grid-template-columns:minmax(0,1fr) clamp(15px,3.2vw,47px) minmax(0,1fr); padding:clamp(4px,.65vw,10px); border:1px solid #4a7b7c; border-radius:clamp(8px,1.2vw,19px); background:#12414a url('/brand/home_binder_fabric.webp') center/cover; box-shadow:0 14px 25px #0009,inset 0 0 0 3px #06191e,inset 0 0 0 4px #416866 }
.book-spine { position:relative; display:flex; flex-direction:column; justify-content:space-around; align-items:center; background:linear-gradient(90deg,#051419,#244047 44%,#06191e 62%,#0a252c); box-shadow:inset 0 0 5px #000 }
.book-spine i { position:relative; z-index:2; pointer-events:none; width:112%; height:clamp(5px,1.05vw,15px); border:1px solid #777e77; border-radius:50%; background:linear-gradient(#f6e4c3,#80877c 28%,#2c3030 51%,#b1b8ad 75%,#313738); box-shadow:0 2px 4px #000e }
.book-leaf { min-width:0; position:relative; padding:clamp(4px,.8vw,12px); border:1px solid #47565b; border-radius:clamp(5px,.8vw,12px); background:repeating-linear-gradient(135deg,#172023,#151e21 2px,#192326 3px); box-shadow:inset 0 0 14px #0008,0 3px 6px #000a }
.binder-pockets { display:grid; grid-template-columns:repeat(var(--columns),minmax(0,1fr)); gap:clamp(2px,.55vw,9px) }
.binder-pocket { position:relative; display:grid; place-items:center; min-width:0; aspect-ratio:63/88; padding:clamp(1px,.24vw,4px); overflow:hidden; border:1px solid #536168; border-radius:clamp(2px,.4vw,6px); background:linear-gradient(150deg,#82989719,#0a1316 28%,#192429 98%); box-shadow:inset 0 2px #a7a8a921 }
.binder-pocket[data-filled] { cursor:grab; touch-action:none; user-select:none }
.binder-pocket[data-filled]:active { cursor:grabbing }
.binder-pocket:hover,.binder-pocket:focus-visible,.binder-pocket[aria-pressed=true],.binder-pocket.pocket-target { border-color:#a0f5d5; background-color:#163f45 }
.binder-pocket.pocket-target { outline:2px dashed #a0f5d5; outline-offset:-3px; box-shadow:inset 0 0 15px #8df4d368 }
.binder-pocket img,.book-drag-card img { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; border-radius:3px }
.binder-pocket.pocket-lifted > * { opacity:.26 }
.binder-pocket > span:not(.binder-card-placeholder) { color:#85afaa; font-size:clamp(.65rem,1.5vw,1.5rem) }
.binder-card-placeholder { display:grid; gap:.15rem; place-content:center; color:#cae8dd; min-width:0; text-align:center; font-size:clamp(.45rem,.8vw,.82rem); overflow-wrap:anywhere }
.binder-card-placeholder small { font-size:.85em; opacity:.8 }
.book-drag-card { position:fixed; z-index:9999; pointer-events:none; display:grid; place-items:center; transform:translate(-50%,-62%) rotate(-7deg); border-radius:5px; background:#193139; box-shadow:0 12px 24px #000c }
.book-page-number { display:block; text-align:center; font-size:clamp(.6rem,1vw,1rem); margin-top:.3rem }
.book-corner { position:absolute; z-index:3; bottom:0; right:0; width:clamp(16px,2vw,30px); height:clamp(15px,1.8vw,28px); padding:0; border:0; border-radius:0 0 8px 0; background:transparent }
.book-corner::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg,transparent 47%,#708084 51%,#c4d0c6 57%,#26383c 84%); clip-path:polygon(0 100%,100% 0,100% 100%); pointer-events:none }
.book-corner:hover { background:transparent }
.book-leaf.right { padding-bottom:clamp(7px,.6vw,12px) }
.book-corner:hover,.book-corner:focus-visible { filter:brightness(1.5) }
.book-controls { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin-top:1rem }
.book-controls select { text-align:center }
.book-placement { text-align:center; color:#a0f5d5 }
.book-placement:not(:empty) { margin-top:.7rem }
.book-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
.turn-forward .book-leaf.right,.book-closed.turn-forward { transform-origin:left center; animation:book-turn-in .34s ease-out }
.turn-back .book-leaf.left,.book-closed.turn-back { transform-origin:right center; animation:book-turn-back .34s ease-out }
@keyframes book-turn-in { from { transform:rotateY(-63deg); filter:brightness(.72) } to { transform:rotateY(0); filter:brightness(1) } }
@keyframes book-turn-back { from { transform:rotateY(63deg); filter:brightness(.72) } to { transform:rotateY(0); filter:brightness(1) } }
@media(prefers-reduced-motion:reduce){ .turn-forward .book-leaf.right,.turn-back .book-leaf.left,.book-closed.turn-forward,.book-closed.turn-back { animation:none } }
.binder-tools { min-width:0; display:grid; gap:.85rem; padding:.85rem; border:1px solid #315158; border-radius:12px; background:#09262c }
.binder-settings form,#binder-fill,#binder-search { display:grid; gap:.65rem }
.binder-settings form { margin:.6rem 0 }
.binder-settings label,#binder-fill label,#binder-search label { display:block }
.binder-settings input,#binder-search input { display:block; width:100%; margin-top:.25rem }
.binder-dimensions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.35rem }
.binder-dimensions input { padding-inline:.3rem }
.binder-finder-input { display:flex; gap:.3rem; margin-top:.3rem }
.binder-finder-input input { min-width:0; width:100% }
.binder-finder-input button { padding-inline:.45rem }
.binder-finder-results { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem; max-height:420px; overflow:auto }
.binder-finder-results button,.binder-results button { display:grid; justify-items:center; align-content:start; gap:.2rem; min-width:0; overflow-wrap:anywhere }
.binder-finder-results button { font-size:.7rem; padding:.25rem }
.binder-finder-results img { width:100%; object-fit:contain }
.binder-finder-results button[aria-pressed=true] { border-color:#a0f5d5; background:#1b4549 }
.binder-results { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(105px,100%),1fr)); gap:.45rem }
.binder-results img { max-width:100%; height:95px; object-fit:contain }
@media(max-width:760px) { .book-spread { width:100% } .binder-workspace { grid-template-columns:minmax(0,1fr) } .book-stage { min-height:0 } .binder-finder-results { grid-template-columns:repeat(auto-fill,minmax(64px,1fr)) } }

.binder-delete { background:transparent; border-color:#875a60; color:#ffc5c0 }