/* Product-only styles: removing the player's CSS removes the illustration too. */
.product-site{overflow:hidden;border:1px solid #d6dccb;border-radius:15px;background:#fdfcf4;color:#294c42;box-shadow:0 12px 36px #435a3c0a}
.product-browser{display:flex;align-items:center;gap:20px;min-height:37px;padding:8px 19px;background:#e9eee1;color:#7a8973;font-size:10px;letter-spacing:.02em}
.product-browser>span:first-child{font-size:11px;letter-spacing:2px;color:#9aa88a}
.product-hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:260px;overflow:hidden;background:#f3eedf;color:#264b3d;text-align:left}
.product-hero:after{position:absolute;inset:0;z-index:-1;content:"";background:linear-gradient(90deg,#f7f4e9f5 0%,#f7f4e9d9 22%,#f7f4e995 43%,#f7f4e900 72%);pointer-events:none}
.product-art{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:58% 60%;display:block;animation:product-reveal 650ms ease-out both}
.product-art-glow{position:absolute;inset:0;z-index:-1;opacity:.35;pointer-events:none;background:radial-gradient(ellipse at 76% 21%,#fff5cc7a,transparent 43%);animation:product-light 7s ease-in-out infinite alternate}
.product-hero-copy{position:relative;max-width:66%;padding:34px 30px}
.product-eyebrow{display:block;margin:0 0 16px;font-size:10px;font-weight:600;letter-spacing:.12em;color:#687d5f}
.product-title{margin:0;font-size:clamp(25px,3vw,34px);line-height:1.2;font-weight:750;letter-spacing:-.035em;text-wrap:balance;overflow-wrap:anywhere}
.product-description{max-width:280px;margin:14px 0 0;font-size:12px;line-height:1.85;color:#586e51;text-wrap:pretty}
.product-content{padding:24px 28px;background:linear-gradient(140deg,#fffef8,#f2f3e8)}
.product-proposal{display:flex;align-items:center;justify-content:space-between;gap:26px}
.product-card-label{font-size:9px;font-weight:600;letter-spacing:.08em;color:#8d9c7b}
.product-proposal h4{margin:8px 0 6px;font-size:16px;line-height:1.5;font-weight:650;color:#365849}
.product-proposal p{margin:0;font-size:11px;line-height:1.7;color:#8a9679}
.product-vote{flex:none;display:flex;gap:13px;align-items:center;justify-content:center;min-height:43px;padding:11px 17px;border:1px solid #416c4f;border-bottom-width:3px;border-radius:10px;background:#527b58;color:#fffbe9;font-family:inherit;font-size:12px;font-weight:600;line-height:1.3;cursor:pointer;box-shadow:0 3px 8px #294c4210;transition:transform .16s ease,background .16s ease,box-shadow .16s ease}
.product-vote:hover{transform:translateY(-2px);background:#456e4c;box-shadow:0 6px 12px #294c421a}
.product-vote:active{transform:translateY(1px);box-shadow:none}
.product-vote:focus-visible{outline:3px solid #dda94b;outline-offset:4px}
.product-vote:disabled{cursor:default;opacity:.6;transform:none}
.product-vote span{min-width:17px;white-space:nowrap}
.product-hero-compact{min-height:190px;border-radius:12px 12px 0 0}
.product-hero-compact .product-hero-copy{max-width:74%;padding:25px}
.product-hero-compact .product-title{font-size:24px}
.product-hero-compact .product-eyebrow{font-size:9px;margin-bottom:10px}
.product-hero-compact .product-description{font-size:11px;line-height:1.7;margin-top:10px;max-width:235px}
.product-hero-compact .product-art{object-position:64% 60%}
.product-theme-books .product-art{object-position:61% 57%}
.product-theme-custom .product-art{object-position:59% 54%}
.product-plain{color:#111;background:#fff;font-family:serif;text-align:left;border:1px solid #d9ddce;padding:25px;min-height:235px}
.product-plain h3{font-size:24px;margin:12px 0}
.product-plain h4{font-size:16px;margin:20px 0 8px}
.product-plain p{font-size:14px;line-height:1.55;margin:10px 0}
.product-plain button{font-family:inherit;font-size:14px;padding:3px 10px;color:#111;border:1px solid #999;border-radius:2px;background:#eee;cursor:pointer}
@keyframes product-reveal{from{opacity:0;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}
@keyframes product-light{from{opacity:.18}to{opacity:.48}}
@media(max-width:560px){.product-hero{min-height:240px}.product-hero-copy{max-width:78%;padding:26px 22px}.product-description{max-width:220px}.product-content{padding:21px}.product-proposal{align-items:flex-start;flex-direction:column;gap:17px}.product-vote{min-height:42px}.product-title{font-size:28px}.product-hero-compact{min-height:180px}.product-hero-compact .product-hero-copy{padding:23px;max-width:81%}.product-hero-compact .product-title{font-size:23px}}
@media(prefers-reduced-motion:reduce){.product-art,.product-art-glow{animation:none}.product-vote{transition:none}}
/* The preview is a webpage inside a tangible device, not a card pasted
   over the workshop. The same cream casing appears on Xiao Ma's desk. */
.product-device{position:relative;display:block;width:100%;min-width:0;margin:0;padding:0 3px;color:#526b53}
.product-device-frame{position:relative;padding:16px 7px 0;border:1.5px solid #6e866f;border-radius:12px 12px 9px 9px;background:#e3e8d4;box-shadow:inset 0 1px 0 #fffff5,3px 4px 0 #adbea0,0 10px 20px #4b65471a}
.product-device-camera{position:absolute;left:calc(50% - 2px);top:5px;width:4px;height:4px;border:1px solid #61755d;border-radius:50%;background:#81927a;box-shadow:inset 1px 1px 0 #3d5647;pointer-events:none}
.product-device-screen{position:relative;min-width:0;overflow:hidden;border:2px solid #4c6753;border-radius:5px;background:#fff}
.product-device-screen>.product-site{border:0;border-radius:0;box-shadow:none}
.product-device-screen>.product-plain{border:0;border-radius:0}
.product-device-screen .product-browser{border-radius:0;min-width:0}
.product-device-screen .product-hero{min-height:225px}
.product-device-screen .product-hero-copy{padding-top:28px;padding-bottom:28px}
.product-device-screen .product-content{padding-top:20px;padding-bottom:20px}
.product-device-chin{display:flex;align-items:center;justify-content:center;gap:7px;min-height:23px;color:#73846a;line-height:1;font-size:8px;letter-spacing:.06em}
.product-device-chin>i{display:block;width:4px;height:4px;border-radius:50%;background:#8cac76;box-shadow:0 0 0 1px #6d8c62;pointer-events:none}
.product-device-chin>span{font-weight:450}
.product-device-base{position:relative;pointer-events:none}
.product-device-local .product-device-base{height:10px;margin:0 -3px;border:1px solid #8ba17f;border-top:0;border-radius:0 0 8px 8px;background:linear-gradient(#cad6bb,#e8eddb 55%,#bacaaa);box-shadow:0 3px 0 #a5b596,0 8px 14px #59714c13}
.product-device-local .product-device-base:before{content:'';position:absolute;left:43%;right:43%;top:0;height:4px;border:1px solid #a2b394;border-top:0;border-radius:0 0 4px 4px;background:#eef1e3}
.product-device-remote .product-device-base{height:29px;margin-top:1px}
.product-device-remote .product-device-base:before{content:'';position:absolute;left:calc(50% - 19px);top:0;width:38px;height:21px;border:1px solid #8ba17d;border-top:0;background:linear-gradient(90deg,#b1c2a0,#dae3cb 45%,#b5c6a5);clip-path:polygon(11% 0,89% 0,100% 100%,0 100%)}
.product-device-remote .product-device-base:after{content:'';position:absolute;left:calc(50% - 66px);bottom:0;width:132px;height:10px;border:1px solid #8ea17e;border-radius:50% 50% 4px 4px;background:#dce5ca;box-shadow:0 2px 0 #a6b998,0 5px 9px #5b74501a}
@media(max-width:560px){.product-device{padding:0 2px}.product-device-frame{padding:13px 5px 0;border-radius:9px 9px 6px 6px;box-shadow:inset 0 1px 0 #fffff5,2px 3px 0 #adbea0,0 8px 15px #4b654713}.product-device-camera{top:4px;width:3px;height:3px}.product-device-screen .product-hero{min-height:220px}.product-device-screen .product-hero-copy{padding:24px 18px;max-width:81%}.product-device-screen .product-content{padding:18px}.product-device-chin{min-height:21px;font-size:7px}.product-device-remote .product-device-base{height:25px}.product-device-remote .product-device-base:before{height:18px}.product-device-remote .product-device-base:after{height:8px;width:112px;left:calc(50% - 56px)}}