:root{
  --paper:#F8F2E8; --paper-2:#F1E7D6; --ink:#2A1C10; --ink-2:#5A4430; --gold:#9A6A14; --gold-2:#C8901F; --gold-3:#E4B24E;
  --wood:#3A2416; --line:rgba(154,106,20,.28); --on-gold:#2A1C10; --shadow:rgba(60,35,10,.22);
  --serif:"Cormorant Garamond","Cormorant",Georgia,"Times New Roman",serif; --caps:"Cinzel","Trajan Pro",Georgia,serif;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#1C130C; --paper-2:#26190F; --ink:#F1E5CF; --ink-2:#CDB894; --gold:#E4B24E; --gold-2:#E4B24E; --gold-3:#F0C77A;
  --line:rgba(228,178,78,.25); --on-gold:#1C130C; --shadow:rgba(0,0,0,.5);
}}
:root[data-theme="dark"]{
  --paper:#1C130C; --paper-2:#26190F; --ink:#F1E5CF; --ink-2:#CDB894; --gold:#E4B24E; --gold-2:#E4B24E; --gold-3:#F0C77A;
  --line:rgba(228,178,78,.25); --on-gold:#1C130C; --shadow:rgba(0,0,0,.5);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 76px)}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--serif); font-size:20px; line-height:1.5; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--gold-2); outline-offset:3px; border-radius:2px}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px}

/* header */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:color-mix(in srgb,var(--paper) 92%,transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; gap:28px; height:72px}
.top .logo img{height:34px; width:auto}
.top nav{display:flex; gap:26px; margin-left:auto; font-size:19px}
.top nav a{text-decoration:none; color:var(--ink-2)}
.top nav a:hover{color:var(--ink)}
.listbtn{display:inline-flex; align-items:center; gap:10px; border:1px solid var(--gold-2); background:none; padding:8px 16px; border-radius:999px; font-size:18px}
.listbtn .n{min-width:24px; height:24px; border-radius:12px; background:var(--gold-2); color:var(--on-gold); font-size:15px; display:inline-grid; place-items:center; padding:0 6px; font-weight:600}
@media (max-width:760px){ .top nav{display:none} .listbtn{margin-left:auto} }

/* hero */
.hero{padding:64px 0 40px}
.hero .wrap{display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center}
.hero h1{font-weight:400; font-size:clamp(46px,6.2vw,84px); line-height:1.02; margin:0; letter-spacing:-.005em}
.hero h1 span{display:block}
.hero p.lede{font-size:23px; color:var(--ink-2); max-width:30em; margin:26px 0 34px}
.tag{font-family:var(--caps); font-size:14px; letter-spacing:.42em; color:var(--gold); margin:0 0 22px}
.cta{display:flex; flex-wrap:wrap; gap:14px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none; border-radius:999px; padding:13px 26px; font-size:19px; font-weight:600; border:1.5px solid var(--gold-2); transition:background .15s, color .15s}
.btn.fill{background:var(--gold-2); color:var(--on-gold)}
.btn.fill:hover{background:var(--gold-3)}
.btn.line{background:none; color:var(--ink)}
.btn.line:hover{background:var(--paper-2)}
.btn svg{width:20px; height:20px; flex:none}
.arch{position:relative; aspect-ratio: 5/6; max-width:520px; margin:0 auto; width:100%}
.arch svg.out{position:absolute; inset:0; width:100%; height:100%}
.arch img{position:absolute; filter:drop-shadow(0 22px 26px var(--shadow))}
.arch .a{left:4%; top:42%; width:42%; transform:rotate(-6deg)}
.arch .c{right:4%; top:42%; width:42%; transform:rotate(6deg)}
.arch .b{left:26%; top:24%; width:48%}
@media (max-width:860px){ .hero .wrap{grid-template-columns:1fr} .arch{max-width:420px} }

/* facts strip */
.facts{border-block:1px solid var(--line); background:var(--paper-2)}
.facts ul{list-style:none; margin:0; padding:18px 0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 40px; font-size:19px; color:var(--ink-2)}
.facts li{display:flex; align-items:center; gap:10px}
.facts li::before{content:""; width:8px; height:8px; background:var(--gold-2); transform:rotate(45deg)}

/* collection */
.sec{padding:80px 0}
.sec h2{font-weight:400; font-size:clamp(38px,4.4vw,56px); line-height:1.05; margin:0 0 14px}
.sec .intro{color:var(--ink-2); max-width:36em; margin:0 0 30px}
.filters{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 40px}
.chip{display:inline-flex; align-items:center; gap:9px; padding:7px 15px 7px 9px; border-radius:999px; border:1px solid var(--line); background:none; font-size:17px; color:var(--ink-2)}
.chip .dot{width:20px; height:20px; border-radius:50%; border:1px solid rgba(0,0,0,.18)}
.chip[aria-pressed="true"]{border-color:var(--gold-2); color:var(--ink); background:var(--paper-2)}
.chip.all{padding-left:15px}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:48px 36px}
.card{display:flex; flex-direction:column}
.card .ph{background:var(--paper-2); border-radius:4px; padding:22px; display:grid; place-items:center; aspect-ratio:1/1}
.card .ph img{width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 16px 18px var(--shadow))}
.card h3{font-weight:500; font-size:32px; line-height:1.1; margin:20px 0 4px}
.card .m{color:var(--ink-2); margin:0 0 16px; font-style:italic}
.row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px}
.silkname{font-size:17px; color:var(--ink-2)}
.sw{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px}
.sw button{width:30px; height:30px; border-radius:50%; border:2px solid var(--paper); box-shadow:0 0 0 1px var(--line); padding:0}
.sw button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--gold-2)}
.size{display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:3px; margin:0 0 18px}
.size button{border:0; background:none; padding:7px 14px; border-radius:999px; font-size:16px; color:var(--ink-2)}
.size button[aria-pressed="true"]{background:var(--gold-2); color:var(--on-gold); font-weight:600}
.acts{display:flex; gap:10px; flex-wrap:wrap; margin-top:auto}
.acts .btn{padding:11px 18px; font-size:17px}
.hint{font-size:16px; color:var(--ink-2); margin:-8px 0 16px}

/* set band */
.band{background:var(--wood); color:#F1E5CF}
.band .wrap{display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; padding:64px 24px}
.band h2{font-weight:400; font-size:clamp(34px,4vw,50px); line-height:1.08; margin:0 0 12px}
.band p{color:#D9C6A2; margin:0}
.band .btn.fill{background:#E4B24E; border-color:#E4B24E; color:#1C130C}
.band .mini{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.band .mini img{filter:drop-shadow(0 10px 12px rgba(0,0,0,.5))}
@media (max-width:760px){ .band .wrap{grid-template-columns:1fr} }

/* steps */
.steps{list-style:none; margin:30px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:36px; counter-reset:s}
.steps li{counter-increment:s; border-top:1px solid var(--line); padding-top:20px}
.steps li::before{content:counter(s); font-family:var(--caps); color:var(--gold); font-size:30px; display:block; margin-bottom:8px}
.steps h3{font-weight:500; font-size:28px; margin:0 0 6px}
.steps p{margin:0; color:var(--ink-2)}
@media (max-width:760px){ .steps{grid-template-columns:1fr} }

footer{border-top:1px solid var(--line); padding:48px 0 calc(60px + env(safe-area-inset-bottom,0px))}
footer .wrap{display:flex; flex-wrap:wrap; gap:24px 48px; align-items:flex-start; justify-content:space-between}
footer img{height:40px; width:auto}
footer p{margin:0; color:var(--ink-2); font-size:18px}
footer a{color:var(--gold); text-decoration:none}

/* floating WA */
.fab{position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:30; width:60px; height:60px; border-radius:50%; background:#25D366; display:grid; place-items:center; box-shadow:0 10px 24px rgba(0,0,0,.25)}
.fab svg{width:32px; height:32px}

/* drawer */
.scrim{position:fixed; inset:0; background:rgba(20,12,6,.45); opacity:0; pointer-events:none; transition:opacity .2s; z-index:40}
.drawer{position:fixed; top:0; right:0; height:100%; width:min(440px,100%); background:var(--paper); z-index:41; transform:translateX(100%); transition:transform .25s ease; display:flex; flex-direction:column; padding:calc(env(safe-area-inset-top,0px) + 20px) 24px calc(env(safe-area-inset-bottom,0px) + 20px); border-left:1px solid var(--line)}
.open .scrim{opacity:1; pointer-events:auto}
.open .drawer{transform:none}
.drawer header{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.drawer h2{font-weight:500; font-size:32px; margin:0}
.x{background:none; border:0; font-size:30px; line-height:1; padding:6px 10px}
.items{flex:1; overflow:auto; margin:0 -8px; padding:0 8px}
.it{display:grid; grid-template-columns:72px 1fr auto; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line)}
.it img{width:72px; height:72px; object-fit:contain; background:var(--paper-2); border-radius:3px}
.it b{font-weight:600; display:block; font-size:19px; line-height:1.2}
.it span{font-size:16px; color:var(--ink-2)}
.qty{display:flex; align-items:center; gap:6px}
.qty button{width:30px; height:30px; border-radius:50%; border:1px solid var(--line); background:none}
.rm{background:none; border:0; color:var(--ink-2); font-size:15px; text-decoration:underline; padding:4px 0}
.empty{color:var(--ink-2); padding:24px 0}
.drawer label{display:block; font-size:17px; color:var(--ink-2); margin:14px 0 6px}
.drawer textarea{width:100%; min-height:76px; font:inherit; font-size:18px; padding:10px 12px; border:1px solid var(--line); border-radius:4px; background:var(--paper-2); color:var(--ink); resize:vertical}
.drawer .btn{width:100%; margin-top:14px}
.toast{position:fixed; left:50%; bottom:calc(96px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,20px); background:var(--ink); color:var(--paper); padding:10px 20px; border-radius:999px; font-size:17px; opacity:0; transition:opacity .2s, transform .2s; z-index:50; pointer-events:none}
.toast.on{opacity:1; transform:translate(-50%,0)}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; scroll-behavior:auto !important} }
.offer{background:#8E1B24; color:#FBEFD9; text-align:center; font-size:18px; padding:9px 16px}
.offer b{color:#F6D18A; font-weight:600}
.top nav{gap:22px}
.top nav a[aria-current="page"]{color:var(--ink); text-decoration:underline; text-decoration-color:var(--gold-2); text-underline-offset:6px}
.menu{display:none; background:none; border:1px solid var(--line); border-radius:999px; padding:8px 14px; font-size:18px}
@media (max-width:1000px){ .top nav{display:none} .listbtn{margin-left:auto} .menu{display:inline-flex} }
.top .mnav{display:none; border-bottom:1px solid var(--line); background:var(--paper)}
.top .mnav.on{display:block}
.mnav a{display:block; padding:12px 24px; text-decoration:none; border-top:1px solid var(--line)}
.foil{background:linear-gradient(180deg,#C88A22 0%,#F2C766 50%,#B5741A 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero.dark{background:radial-gradient(ellipse 70% 80% at 72% 45%, #4A2E1C 0%, #24170E 55%, #160E08 100%); color:#F1E5CF; padding:80px 0 72px}
.hero.dark .lede{color:#D9C6A2}
.hero.dark h1{font-size:clamp(54px,7.6vw,108px); line-height:.98}
.hero.dark .tag{color:#E4B24E}
.hero.dark .btn.line{color:#F1E5CF; border-color:#E4B24E}
.hero.dark .btn.line:hover{background:rgba(228,178,78,.12)}
.hero.dark .btn.fill{background:#E4B24E; border-color:#E4B24E; color:#1C130C}
.hero.dark .arch img{filter:drop-shadow(0 26px 30px rgba(0,0,0,.6))}
.pill{display:inline-block; border:1px solid #E4B24E; color:#F6D18A; border-radius:999px; padding:5px 14px; font-size:17px; margin:0 0 22px}
.price{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:0 0 14px}
.price .now{font-size:28px; font-weight:600}
.price s{color:var(--ink-2); font-size:19px}
.price .off{font-size:15px; color:var(--gold); border:1px solid var(--gold-2); border-radius:999px; padding:1px 9px}
.card a.ph{text-decoration:none}
.card h3 a{text-decoration:none}
.pd{display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:start; padding:40px 0 70px}
.pd .ph{background:var(--paper-2); border-radius:4px; padding:36px; display:grid; place-items:center; aspect-ratio:1/1}
.pd .ph img{width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 22px 26px var(--shadow))}
.pd h1{font-weight:400; font-size:clamp(42px,5vw,64px); line-height:1.02; margin:0 0 8px}
.pd .m{font-style:italic; color:var(--ink-2); font-size:23px; margin:0 0 18px}
.pd .long{margin:0 0 24px; max-width:34em}
.label{font-size:17px; color:var(--ink-2); margin:0 0 10px}
.pd .sw button{width:38px; height:38px}
.qtyrow{display:flex; align-items:center; gap:12px; margin:0 0 22px}
.qtyrow button{width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:none; font-size:22px}
.qtyrow span{min-width:28px; text-align:center; font-size:22px}
.dl{border-top:1px solid var(--line); margin:30px 0 0}
.dl div{display:grid; grid-template-columns:160px 1fr; gap:16px; padding:13px 0; border-bottom:1px solid var(--line)}
.dl dt{color:var(--ink-2)} .dl dd{margin:0}
.crumb{font-size:17px; color:var(--ink-2); padding-top:28px}
.crumb a{color:var(--gold); text-decoration:none}
@media (max-width:860px){ .pd{grid-template-columns:1fr; gap:28px} .dl div{grid-template-columns:1fr; gap:2px} }
.page-head{padding:56px 0 8px}
.page-head h1{font-weight:400; font-size:clamp(44px,5.6vw,76px); line-height:1.02; margin:0 0 14px}
.page-head p{color:var(--ink-2); max-width:38em; margin:0}
.featured{display:grid; grid-template-columns:repeat(4,1fr); gap:28px}
@media (max-width:900px){ .featured{grid-template-columns:repeat(2,1fr)} }
.feat{text-decoration:none; display:block}
.feat .ph{background:var(--paper-2); border-radius:4px; padding:16px; aspect-ratio:1/1; display:grid; place-items:center}
.feat .ph img{width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 12px 14px var(--shadow))}
.feat h3{font-weight:500; font-size:24px; margin:14px 0 2px}
.feat p{margin:0; color:var(--ink-2); font-size:17px}
.occ{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:22px}
.oc{display:flex; flex-direction:column; text-decoration:none; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--paper)}
.oc .ph{background:var(--wood); padding:22px; aspect-ratio:4/3; display:grid; place-items:center}
.oc .ph img{height:100%; width:auto; object-fit:contain; filter:drop-shadow(0 12px 14px rgba(0,0,0,.55))}
.oc div.t{padding:14px 18px 18px}
.oc h3{font-weight:500; font-size:25px; margin:0 0 2px; line-height:1.15}
.oc p{margin:0; color:var(--ink-2); font-size:17px}
.oc:hover h3{text-decoration:underline; text-decoration-color:var(--gold-2)}
.setgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:42px 32px}
.set{display:flex; flex-direction:column}
.set .comp{background:var(--wood); border-radius:4px; padding:26px 16px; display:flex; flex-wrap:nowrap; gap:3%; justify-content:center; align-items:center; min-height:250px}
.set .comp.g3{display:grid; grid-template-columns:repeat(3,auto); justify-content:center}
.set .comp.cross{display:grid; grid-template-columns:repeat(3,72px); grid-template-rows:repeat(3,auto); justify-content:center; align-items:center; gap:6px}
.set .comp.pyr{display:flex; flex-wrap:wrap; justify-content:center; align-content:center; gap:12px 6%; padding:22px 16px}
.set .comp.pyr img:first-child{flex-basis:100%; max-width:40%; margin:0 30%}
.set .comp img{filter:drop-shadow(0 10px 12px rgba(0,0,0,.55))}
.set h3{font-weight:500; font-size:28px; margin:18px 0 2px; line-height:1.15}
.set .sub{font-size:17px; color:var(--gold); margin:0 0 6px}
.set .m{color:var(--ink-2); font-style:italic; margin:0 0 8px}
.set ul{margin:0 0 12px; padding-left:20px; color:var(--ink-2); font-size:17px}
.set .acts{margin-top:auto}
.set .opts{margin:4px 0 14px}
.set .opts select{font:inherit; font-size:17px; padding:7px 10px; border-radius:6px; border:1px solid var(--line); background:var(--paper); color:var(--ink); width:100%; margin-bottom:10px}
.set .opts .seg button{font-size:15px; padding:5px 12px}
.ctrls{display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; margin:0 0 32px}
.ctrls .grp{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.ctrls .lbl{font-size:17px; color:var(--ink-2); margin-right:4px}
.ctrls select{font:inherit; font-size:17px; padding:7px 12px; border-radius:999px; border:1px solid var(--line); background:var(--paper); color:var(--ink)}
.more{display:flex; justify-content:center; margin-top:40px}
.seo{background:var(--paper-2); border-top:1px solid var(--line)}
.seo .cols{display:grid; grid-template-columns:repeat(3,1fr); gap:40px}
.seo h3{font-weight:500; font-size:26px; margin:0 0 8px}
.seo p{margin:0; color:var(--ink-2)}
@media (max-width:860px){ .seo .cols{grid-template-columns:1fr} }
.prose{max-width:42em} .prose p{margin:0 0 18px} .prose h2{font-weight:400; font-size:clamp(32px,3.6vw,44px); margin:44px 0 12px} .prose ul{color:var(--ink-2)}
details{border-bottom:1px solid var(--line); padding:16px 0}
summary{cursor:pointer; font-size:24px; font-weight:500; list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; float:right; color:var(--gold)}
details[open] summary::after{content:"−"}
details p{color:var(--ink-2); margin:10px 0 0; max-width:40em}
.sumrow{display:flex; justify-content:space-between; font-size:18px; padding:4px 0; color:var(--ink-2)}
.sumrow.total{color:var(--ink); font-size:22px; font-weight:600; border-top:1px solid var(--line); margin-top:6px; padding-top:10px}
.contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:36px; margin-top:36px}
.contact-grid h3{font-weight:500; font-size:26px; margin:0 0 6px}
.contact-grid p{margin:0; color:var(--ink-2)}
.contact-grid a{color:var(--gold)}
.ptable{border-collapse:collapse; width:100%; max-width:640px; margin:10px 0 0}
.ptable th,.ptable td{text-align:left; padding:12px 10px; border-bottom:1px solid var(--line)}
.ptable th{font-weight:500; color:var(--ink-2)}

.dz{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr); gap:40px; align-items:start; padding:30px 0 80px}
@media (max-width:960px){ .dz{grid-template-columns:1fr} }
.wallbox{position:relative; width:100%; aspect-ratio:4/3; border-radius:4px; overflow:hidden; touch-action:none; user-select:none; box-shadow:0 1px 0 var(--line)}
.wallbox .light{position:absolute; inset:0; background:radial-gradient(ellipse 70% 55% at 50% 30%, rgba(255,250,238,.38), rgba(255,250,238,0) 72%), linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.10)); pointer-events:none}
.wallbox .skirt{position:absolute; left:0; right:0; top:90.7%; height:2%; background:#F1EBE0; border-top:1px solid rgba(0,0,0,.08)}
.wallbox .floor{position:absolute; left:0; right:0; top:92.7%; bottom:0; background:repeating-linear-gradient(90deg,#6E4E36 0 16.5%,#5E412C 16.5% 16.7%)}
.wallbox .console{position:absolute; left:17%; width:66%; top:79%; height:11.7%}
.wallbox .console i{position:absolute; left:0; right:0; top:0; height:16%; background:#3A2618}
.wallbox .console b{position:absolute; left:1.5%; right:1.5%; top:16%; bottom:0; background:#4E3221}
.wallbox .fr{position:absolute; transform:translate(-50%,-50%); cursor:grab; filter:drop-shadow(6px 10px 8px rgba(30,18,8,.35)) drop-shadow(1px 2px 2px rgba(30,18,8,.25))}
.wallbox .fr:active{cursor:grabbing}
.wallbox .fr.sel{outline:2px dashed #E4B24E; outline-offset:4px}
.wallbox .wm{position:absolute; pointer-events:none; z-index:3; height:auto}
.wallbox .wm.big{left:50%; top:44%; width:52%; transform:translate(-50%,-50%) rotate(-12deg); opacity:.13}
.wallbox .wm.corner{right:2.5%; bottom:1.6%; width:17%; opacity:.95; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.wallbox .empty{position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:#5A4430; font-size:22px; padding:0 12%}
.dpanel h2{font-weight:500; font-size:28px; margin:0 0 10px}
.dpanel .blk{border-top:1px solid var(--line); padding:18px 0}
.dpanel select{font:inherit; font-size:18px; padding:8px 12px; border-radius:6px; border:1px solid var(--line); background:var(--paper); color:var(--ink); width:100%}
.wallsw{display:flex; flex-wrap:wrap; gap:8px}
.wallsw button{width:40px; height:40px; border-radius:50%; border:2px solid var(--paper); box-shadow:0 0 0 1px var(--line); padding:0}
.wallsw button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--gold-2)}
.seg{display:flex; flex-wrap:wrap; gap:8px}
.seg button{border:1px solid var(--line); background:none; border-radius:999px; padding:6px 14px; font-size:17px; color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--gold-2); color:var(--on-gold); border-color:var(--gold-2); font-weight:600}
.plist{list-style:none; margin:0; padding:0}
.plist li{display:grid; grid-template-columns:52px 1fr auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line)}
.plist li.sel{background:var(--paper-2)}
.plist img{width:52px; height:52px; object-fit:contain}
.plist b{display:block; font-weight:600; font-size:18px; line-height:1.2}
.plist span{font-size:16px; color:var(--ink-2)}
.plist .ctl{display:flex; gap:6px}
.plist .ctl button{border:1px solid var(--line); background:none; border-radius:6px; padding:4px 8px; font-size:15px}
.dtot{display:flex; justify-content:space-between; align-items:baseline; font-size:20px; margin:14px 0 4px}
.dtot b{font-size:28px}
.dnote{font-size:16px; color:var(--ink-2); margin:8px 0 0}
.pvwrap{position:relative}
.pvb{position:absolute; left:10px; top:10px; background:rgba(28,19,12,.78); color:#F6D18A; font-size:13px; padding:3px 9px; border-radius:999px; letter-spacing:.02em; pointer-events:none}
.imgmodal{position:fixed; inset:0; z-index:60; background:rgba(20,12,6,.6); display:grid; place-items:center; padding:calc(env(safe-area-inset-top,0px) + 16px) 16px calc(env(safe-area-inset-bottom,0px) + 16px)}
.imgmodal[hidden]{display:none}
.imgcard{background:var(--paper); border-radius:8px; max-width:760px; width:100%; max-height:100%; overflow:auto; padding:20px 22px 24px}
.imgcard header{display:flex; justify-content:space-between; align-items:center}
.imgcard h2{font-weight:500; font-size:30px; margin:0}
.imgcard img{width:100%; height:auto; border-radius:4px; margin:12px 0 4px; box-shadow:0 1px 0 var(--line)}
[hidden]{display:none !important}
[data-page][hidden]{display:none}