.pro-showcase { min-height:100%; padding:24px; background:linear-gradient(135deg,#fbf8ff 0%,#fffaf2 52%,#f7fbf7 100%); color:#2d2833; }
.pro-showcase-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:18px; }
.pro-showcase-head h2 { margin:3px 0 6px; font:700 clamp(22px,3vw,34px)/1.05 Georgia,serif; letter-spacing:-.025em; }
.pro-showcase-head p { max-width:620px; margin:0; color:#70687a; font-size:12px; line-height:1.55; }
.pro-showcase-kicker { display:flex; align-items:center; gap:7px; color:#7350b2; font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.pro-showcase-note { flex:0 0 auto; max-width:230px; padding:10px 12px; border:1px solid #e7dfef; border-radius:12px; background:#ffffffb8; color:#756d7c; font-size:10px; line-height:1.45; }
.pro-showcase-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.pro-example-card { min-width:0; border:1px solid #e7e0eb; border-radius:18px; background:#fff; overflow:hidden; box-shadow:0 12px 32px #35283d0c; }
.pro-example-card[data-example="clover"] { border-color:#e7dfc5; }
.pro-example-copy { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:15px 16px 11px; }
.pro-example-copy strong { display:block; margin-bottom:3px; font-size:14px; }
.pro-example-copy small { display:block; color:#7c7383; font-size:10px; line-height:1.4; }
.pro-case-badge { flex:0 0 auto; padding:5px 7px; border-radius:999px; background:#f1eaff; color:#7246bd; font-size:8px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.pro-example-card[data-example="clover"] .pro-case-badge { background:#fff3d7; color:#8b5a18; }
.pro-demo-stage { position:relative; height:230px; margin:0 12px; overflow:hidden; border:1px solid #ece7ef; border-radius:16px; background:linear-gradient(180deg,#fbfaff,#f5f0fa); cursor:crosshair; isolation:isolate; }
.pro-example-card[data-example="clover"] .pro-demo-stage { border-color:#eee5cc; background:linear-gradient(180deg,#fffaf0,#f4f1e5); }
.pro-demo-stage::after { content:"Move your cursor here"; position:absolute; left:10px; bottom:8px; color:#aaa1b0; font-size:9px; letter-spacing:.03em; pointer-events:none; }
.pro-demo-home { position:absolute; right:12px; bottom:12px; width:7px; height:7px; border-radius:50%; background:#d9cedf; opacity:.75; }
.pro-demo-pet { position:absolute; left:0; top:0; width:88px; height:88px; border:0; padding:0; margin:0; background:none; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; filter:drop-shadow(0 5px 6px #271d2c20); will-change:transform; z-index:2; }
.pro-demo-pet:active { cursor:grabbing; }
.pro-demo-pet:focus-visible { outline:3px solid #7759c2; outline-offset:3px; border-radius:16px; }
.pro-demo-sprite { display:block; width:100%; height:100%; background-repeat:no-repeat; pointer-events:none; transform-origin:50% 85%; }
.pro-demo-pet[data-facing="-1"] .pro-demo-sprite { transform:scaleX(-1); }
.pro-demo-bubble { position:absolute; z-index:3; max-width:190px; padding:9px 11px; border:1px solid #e8e0ed; border-radius:13px 13px 4px 13px; background:#fff; box-shadow:0 8px 24px #2a203015; color:#544d5b; font-size:10px; line-height:1.4; pointer-events:none; }
.pro-example-card[data-example="clover"] .pro-demo-bubble { border-color:#eadfbe; background:#fffdf6; color:#465349; }
.pro-behavior-row { display:flex; flex-wrap:wrap; gap:6px; padding:12px; }
.pro-behavior-row button { min-height:32px; padding:7px 10px; border:1px solid #e8e2ed; border-radius:9px; background:#fff; color:#5d5565; font:600 10px/1.2 inherit; cursor:pointer; }
.pro-behavior-row button:hover, .pro-behavior-row button[aria-pressed="true"] { border-color:#b9a7d9; background:#f6f0ff; color:#64449a; }
.pro-example-card[data-example="clover"] .pro-behavior-row button:hover, .pro-example-card[data-example="clover"] .pro-behavior-row button[aria-pressed="true"] { border-color:#d8bd7b; background:#fff8e8; color:#77501e; }
.pro-meta { display:flex; flex-wrap:wrap; gap:5px; padding:0 12px 14px; }
.pro-meta span { padding:5px 7px; border-radius:999px; background:#f6f3f8; color:#7b7184; font-size:8px; }
.pro-example-card[data-example="clover"] .pro-meta span { background:#f8f4e9; color:#72644f; }
.pro-showcase-foot { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:15px; padding:12px 14px; border:1px dashed #ded4e8; border-radius:13px; background:#ffffff9c; }
.pro-showcase-foot strong { display:block; font-size:11px; }
.pro-showcase-foot span { color:#7c7384; font-size:9px; }
.pro-showcase-foot button { flex:0 0 auto; }
.browser.mobile .pro-showcase { padding:12px; }
.browser.mobile .pro-showcase-head { display:block; }
.browser.mobile .pro-showcase-note { margin-top:10px; max-width:none; }
.browser.mobile .pro-showcase-grid { grid-template-columns:1fr; }
.browser.mobile .pro-demo-stage { height:190px; }
.browser.mobile .pro-showcase-foot { align-items:flex-start; flex-direction:column; }
@media(max-width:900px) { .pro-showcase-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .pro-demo-pet { will-change:auto; } }