@property --px{syntax:"<number>";inherits:true;initial-value:0}
@property --py{syntax:"<number>";inherits:true;initial-value:0}


.sh-card{
  --sh-paper:var(--adp-drawing-card);   
  --sh-ink:#2B2418;                      
  --sh-night:#110d07;                    
  --sh-white:#ffffff;                    
  --sh-gold:#d9b45a;                     
  --sh-gold-dark:#8d6a1f;--sh-gold-light:#f6e3a1;--sh-gold-mid:#c79a3a;--sh-gold-ink:#3a2a08;
  --sh-foil-a:#ffd696;--sh-foil-b:#ffaac3;--sh-foil-c:#96e1eb;--sh-foil-d:#fff0c8;   
  --sh-band:#EFDFC0;                     
  --sh-leaf:linear-gradient(calc(120deg + var(--px)*50deg),var(--sh-gold-dark),var(--sh-gold-light) 42%,var(--sh-gold-mid) 58%,var(--sh-gold-dark));
  --px:0;--py:0;
}


.sh-body{display:grid;gap:var(--adp-space-6);padding-top:var(--adp-space-6);padding-bottom:var(--adp-space-8)}
.sh-top{display:grid;gap:var(--adp-space-3);max-width:640px}
.sh-title{margin:0;font:400 var(--adp-size-display-1)/var(--adp-line-display) var(--adp-font-display);letter-spacing:-.012em}
.sh-lede{margin:0;color:var(--adp-ink-quiet);font:400 var(--adp-size-reading)/var(--adp-line-reading) var(--adp-font-reading)}
.sh-found{display:grid;border:var(--adp-outline);border-top:0;background:var(--adp-field)}
.sh-found[hidden],.sh-open[hidden]{display:none}
.sh-hit{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:var(--adp-space-2);padding:var(--adp-space-2) var(--adp-space-3);border-top:var(--adp-rule)}
.sh-hit b{font:400 var(--adp-size-reading)/1.3 var(--adp-font-reading)}
.sh-hit small{display:block;color:var(--adp-ink-quiet);font:400 var(--adp-size-control)/1.3 var(--adp-font-controls)}
.sh-hit .adp-btn{min-height:36px;padding:0 var(--adp-space-3)}
.sh-rows{display:grid;gap:var(--adp-space-7)}
.sh-bar{display:flex;flex-wrap:wrap;align-items:end;gap:var(--adp-space-4) var(--adp-space-6)}
.sh-pick{display:grid;gap:var(--adp-space-1)}
.sh-strip-says{margin:0;color:var(--adp-ink-quiet);font:italic 400 var(--adp-size-small)/1.5 var(--adp-font-reading);text-align:center}
.sh-strip-says b{color:var(--adp-ink);font-style:normal;font-weight:400}
.sh-row{display:grid;gap:var(--adp-space-3)}
.sh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--adp-space-5) var(--adp-space-4)}
.sh-slot{position:relative;display:block;padding:0;background:none;border:0;color:inherit;font:inherit;text-align:inherit;cursor:pointer}
.sh-slot:focus-visible{outline:2px solid var(--adp-accent);outline-offset:4px}
.sh-empty{max-width:52ch;margin:0;color:var(--adp-ink-quiet);font:italic 400 var(--adp-size-reading)/var(--adp-line-reading) var(--adp-font-reading)}

.sh-open{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:var(--adp-space-7);align-items:start;padding-bottom:var(--adp-space-6);border-bottom:var(--adp-double-rule)}
.sh-stage{position:sticky;top:var(--adp-space-4);display:grid;gap:var(--adp-space-4);justify-items:center}
.sh-big{position:relative;width:100%}
.sh-big::after{content:"";position:absolute;right:6%;bottom:-5%;left:6%;z-index:-1;height:8%;background:radial-gradient(closest-side,color-mix(in srgb,var(--adp-ink) 34%,transparent),transparent)}
.sh-says{max-width:38ch;min-height:3em;margin:0;color:var(--adp-ink-quiet);font:italic 400 var(--adp-size-small)/1.5 var(--adp-font-reading);text-align:center;text-wrap:balance}
.sh-says b{color:var(--adp-ink);font-style:normal;font-weight:400}
.sh-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--adp-space-2) var(--adp-space-4)}
.sh-acts a.adp-link{font:500 var(--adp-size-control)/1.4 var(--adp-font-controls)}
.sh-panel{display:grid;gap:var(--adp-space-6);align-content:start}
.sh-part{display:grid;gap:var(--adp-space-4)}
.sh-ask{display:grid;gap:var(--adp-space-2)}
.sh-ask>p{margin:0;min-height:1.4em;color:var(--adp-ink-quiet);font:italic 400 var(--adp-size-small)/1.4 var(--adp-font-reading)}
.sh-ask>p b{color:var(--adp-ink);font-style:normal;font-weight:400}
.sh-text{max-width:420px}
.sh-body button.adp-link{padding:0;background:none;border:0;border-radius:0;font:500 var(--adp-size-control)/1.4 var(--adp-font-controls);cursor:pointer}
.sh-panel p{margin:0}
.sh-kept{margin:0;color:var(--adp-ink-quiet);font:400 var(--adp-size-control)/1.4 var(--adp-font-controls)}


.sh-card{position:relative;display:block;width:100%;aspect-ratio:5/7;container-type:inline-size;perspective:300cqw}
.sh-tilt,.sh-turn{position:absolute;inset:0;transform-style:preserve-3d}
.sh-tilt{transform:rotateX(calc(var(--py)*-7deg)) rotateY(calc(var(--px)*9deg))}
.sh-card{transition:--px .4s cubic-bezier(.22,1,.36,1),--py .4s cubic-bezier(.22,1,.36,1)}
.sh-card.is-held{transition-duration:.08s;transition-timing-function:linear}   
.sh-turn{transition:transform .7s cubic-bezier(.45,0,.55,1)}
.sh-card.is-turned .sh-turn{transform:rotateY(180deg)}
.sh-face,.sh-back{position:absolute;inset:0;overflow:hidden;border-radius:4.2cqw;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:visibility 0s linear .35s}
.sh-face{background:var(--deep);color:var(--sh-paper)}
.sh-back{transform:rotateY(180deg);visibility:hidden}
.sh-card.is-turned .sh-face{visibility:hidden}
.sh-card.is-turned .sh-back{visibility:visible}

.sh-card.is-turned{--px:0!important;--py:0!important}

@keyframes sh-greet{0%{--px:-.38;--py:-.3}32%{--px:.9;--py:.18}68%{--px:-.8;--py:-.22}100%{--px:-.38;--py:-.3}}
.sh-card.is-greeting{animation:sh-greet 1.3s cubic-bezier(.45,0,.55,1) 1 both}

.sh-big .sh-card{touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.sh-ground{position:absolute;inset:-9%;pointer-events:none;transform:translate(calc(var(--px)*-2.4cqw),calc(var(--py)*-2.4cqw))}
.sh-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,color-mix(in srgb,var(--sh-night) 66%,transparent),color-mix(in srgb,var(--sh-night) 20%,transparent) 30%,transparent 46%)}
.sh-halo{position:absolute;top:8%;right:14%;bottom:30%;left:14%;pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--sh-paper) 50%,transparent),transparent)}
.sh-sheen{position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(115deg,color-mix(in srgb,var(--sh-white) 5%,transparent) 0 1px,transparent 1px 1.2cqw),linear-gradient(115deg,transparent 40%,color-mix(in srgb,var(--sh-foil-a) 50%,transparent) 46%,color-mix(in srgb,var(--sh-foil-b) 36%,transparent) 49%,color-mix(in srgb,var(--sh-foil-c) 36%,transparent) 51.5%,color-mix(in srgb,var(--sh-foil-d) 46%,transparent) 54.5%,transparent 60%);background-size:auto,320% 320%;background-position:0 0,calc(50% - var(--px)*30%) calc(50% - var(--py)*30%);mix-blend-mode:overlay}
.sh-glare{position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(circle at calc(50% + var(--px)*46%) calc(42% + var(--py)*46%),color-mix(in srgb,var(--sh-white) 20%,transparent),transparent 34%);mix-blend-mode:soft-light}
.sh-art{position:absolute;top:6%;right:6%;bottom:26%;left:6%;z-index:2}
.sh-piece{position:absolute;display:block;aspect-ratio:1;padding:0;background:none;border:0;transform:translate(-50%,-50%) translate(calc(var(--px)*var(--d)*.3cqw),calc(var(--py)*var(--d)*.3cqw))}
.sh-piece img,.sh-bottle img{display:block;width:100%;height:100%;object-fit:contain}
.sh-piece::after{content:"";position:absolute;right:12%;bottom:-3%;left:12%;z-index:-1;height:16%;background:radial-gradient(closest-side,color-mix(in srgb,var(--sh-night) 42%,transparent),transparent)}

.sh-piece.is-smelt::before{content:"";position:absolute;inset:-14%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--sh-paper) 85%,transparent),color-mix(in srgb,var(--sh-paper) 30%,transparent) 70%,transparent)}
.sh-bottle{position:absolute;left:50%;margin:0;aspect-ratio:var(--a);transform:translate(-50%,-50%) translate(calc(var(--px)*var(--d)*.3cqw),calc(var(--py)*var(--d)*.3cqw))}
.sh-bottle::after{content:"";position:absolute;right:-12%;bottom:-2.5%;left:-12%;z-index:-1;height:7%;background:radial-gradient(closest-side,color-mix(in srgb,var(--sh-night) 60%,transparent),transparent)}
.sh-frame{position:absolute;inset:3.2cqw;z-index:5;border:1px solid color-mix(in srgb,var(--sh-paper) 50%,transparent);border-radius:2.2cqw;pointer-events:none}
.sh-head{position:absolute;right:7.5cqw;bottom:6.6cqw;left:7.5cqw;z-index:3;display:grid;gap:1cqw}
.sh-house{font:500 max(7px,2.6cqw)/1.2 var(--adp-font-controls);letter-spacing:.16em;text-transform:uppercase;opacity:.86}
.sh-name{margin:0;font:400 10.5cqw/1.02 var(--adp-font-display);letter-spacing:-.01em;text-wrap:balance}
.sh-name.is-long{font-size:7.6cqw}
.sh-meta{font:italic 400 max(8px,3.1cqw)/1.2 var(--adp-font-reading);opacity:.86}
.sh-mk{position:absolute;right:7.5cqw;bottom:7cqw;z-index:3;width:5.2cqw;height:5.5cqw;fill:currentColor}
.sh-sign{display:inline-block;width:1em;height:1em;vertical-align:-.12em}

.sh-card[data-state="want"] .sh-face{opacity:.55}
.sh-card[data-state="none"] .sh-face{background:var(--sh-paper);color:var(--sh-ink)}
.sh-card[data-state="none"] .sh-frame{border:1px dashed var(--adp-edge)}
.sh-card[data-state="none"] :is(.sh-ground,.sh-scrim,.sh-halo,.sh-sheen,.sh-glare){display:none}
.sh-card[data-state="none"] .sh-bottle img{opacity:.8}
.sh-card[data-state="none"] .sh-bottle::after{display:none}
.sh-tag{position:absolute;top:6.4cqw;left:-1px;z-index:6;padding:.9cqw 2.4cqw;background:var(--sh-paper);border:1px solid var(--adp-edge);color:var(--sh-ink);font:600 max(7px,2.4cqw)/1.2 var(--adp-font-controls);letter-spacing:.12em;text-transform:uppercase}


.sh-seals{position:absolute;top:6.4cqw;right:6.4cqw;z-index:6;display:grid;gap:1.4cqw;justify-items:end}
.sh-seal{position:relative;display:grid;place-content:center;justify-items:center;gap:.3cqw;width:22cqw;height:22cqw;border-radius:50%;background:var(--sh-leaf);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sh-gold-ink) 60%,transparent),0 .7cqw 1.3cqw -.4cqw color-mix(in srgb,var(--sh-night) 65%,transparent);color:var(--sh-gold-ink);text-align:center}
.sh-seal::before{content:"";position:absolute;inset:1.4cqw;border:1px solid color-mix(in srgb,var(--sh-gold-ink) 50%,transparent);border-radius:50%}
.sh-seal span{max-width:16cqw;font:600 max(5px,2.5cqw)/1.12 var(--adp-font-controls);letter-spacing:.06em;text-transform:uppercase}
.sh-seal b{font:400 7cqw/1 var(--adp-font-display)}
.sh-card.is-crown .sh-frame{inset:3.6cqw;border:2px solid var(--sh-gold);outline:1px solid var(--sh-gold);outline-offset:-1.5cqw}
.sh-card.is-crown .sh-face{box-shadow:inset 0 0 0 1cqw var(--sh-gold)}
.sh-card.is-crown .sh-name{background:var(--sh-leaf);-webkit-background-clip:text;background-clip:text;color:transparent}


.sh-back{display:flex;flex-direction:column;background:var(--sh-paper);box-shadow:inset 0 0 0 1px var(--adp-hairline);color:var(--sh-ink)}
.sh-back-head{position:relative;display:grid;gap:.6cqw;padding:6.4cqw 7.5cqw 4.6cqw;overflow:hidden;background:var(--deep);color:var(--sh-paper)}
.sh-back-head::before{content:"";position:absolute;inset:-30% -10%;background:radial-gradient(40% 70% at 12% 20%,color-mix(in srgb,var(--t-top) 70%,transparent),transparent),radial-gradient(40% 80% at 92% 60%,color-mix(in srgb,var(--t-heart) 60%,transparent),transparent),radial-gradient(50% 70% at 50% 110%,color-mix(in srgb,var(--t-base) 66%,transparent),transparent)}
.sh-back-head>*{position:relative}
.sh-back-head .sh-name{font-size:8cqw}
.sh-back-head .sh-name.is-long{font-size:6.2cqw}
.sh-back-body{display:grid;flex:1;align-content:start;gap:2.2cqw;min-height:0;padding:3.6cqw 7.5cqw 0;overflow-y:auto}
.sh-say{margin:0;font:italic 400 max(11.5px,3.5cqw)/1.34 var(--adp-font-reading);text-wrap:pretty}
.sh-facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.8cqw 3cqw;margin:0}
.sh-facts dt,.sh-mine-label{color:var(--adp-ink-quiet);font:500 max(7px,2.2cqw)/1.5 var(--adp-font-controls);letter-spacing:.12em;text-transform:uppercase}
.sh-facts dd{margin:0;font:400 max(10.5px,3cqw)/1.3 var(--adp-font-reading)}
.sh-bands{display:grid;gap:.9cqw;margin:0;padding:0;list-style:none}
.sh-bands li{display:grid;grid-template-columns:4.2cqw minmax(0,1fr);align-items:center;gap:0 2cqw;padding:1.1cqw 2cqw;background:color-mix(in srgb,var(--c) 22%,transparent);border-left:.9cqw solid var(--c);font:italic 400 max(10.5px,2.9cqw)/1.3 var(--adp-font-reading)}
.sh-bands .sh-sign{width:4.2cqw;height:4.2cqw}
.sh-words{display:flex;flex-wrap:wrap;gap:1.2cqw;margin:0}
.sh-words span{padding:.5cqw 2cqw;border:1px solid var(--adp-tag);color:var(--adp-tag);font:500 max(8px,2.4cqw)/1.5 var(--adp-font-controls)}
.sh-mine{display:grid;gap:.4cqw;margin:2.4cqw 7.5cqw 6.2cqw;padding:2cqw 3cqw 2.4cqw;background:var(--sh-band)}
.sh-mine p{margin:0;font:400 max(10.5px,3cqw)/1.3 var(--adp-font-reading)}
.sh-mine em{color:var(--adp-ink-quiet)}
.sh-mine .is-crown{color:var(--sh-gold-dark);font-weight:700}


.sh-strip{position:relative;display:flex;--seat:min(300px,72vw);gap:var(--adp-space-4);padding:var(--adp-space-5) calc(50% - var(--seat)/2) var(--adp-space-6);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
.sh-strip::-webkit-scrollbar{display:none}
.sh-seat{position:relative;flex:none;width:var(--seat);scroll-snap-align:center;transform-origin:50% 100%}
.sh-strip[data-swipe="one"] .sh-seat{transform:scale(calc(1 - var(--a,0)*.07))}
.sh-strip[data-swipe="hand"],.sh-strip[data-swipe="flow"]{gap:0}
.sh-strip[data-swipe="hand"] .sh-seat{margin:0 calc(var(--seat)*-.2);transform:rotate(calc(var(--o,0)*9deg)) translateY(calc(var(--a,0)*var(--a,0)*7%)) scale(calc(1 - var(--a,0)*.1))}
.sh-strip[data-swipe="flow"] .sh-seat{margin:0 calc(var(--seat)*-.17);transform-origin:50% 50%;transform:perspective(900px) rotateY(calc(var(--o,0)*-36deg)) scale(calc(1 - var(--a,0)*.13))}
.sh-strip[data-swipe="binder"]{max-width:780px;gap:var(--adp-space-6);padding:var(--adp-space-4) 0 var(--adp-space-6)}
.sh-page{display:grid;flex:none;align-self:flex-start;align-content:start;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--adp-space-4);width:100%;scroll-snap-align:center}

@media (max-width:760px){
  .sh-page{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sh-open{grid-template-columns:minmax(0,1fr);gap:var(--adp-space-6)}
  .sh-stage{position:static;width:100%;max-width:340px;margin:0 auto}
  .sh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sh-hit{grid-template-columns:minmax(0,1fr) auto}
  .sh-hit b{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  .sh-turn,.sh-card,.sh-face,.sh-back{transition:none}
  .sh-card.is-greeting{animation:none}
  .sh-tilt{transform:none}
}