.demo-intro{display:flex;justify-content:space-between;gap:30px;background:var(--hero);color:var(--hero-text);padding:38px;border:3px solid var(--line);margin-bottom:18px;position:relative;overflow:hidden}.demo-intro h1{font-size:clamp(36px,5vw,66px);line-height:1.02}.demo-intro p{max-width:420px;font-size:16px}.demo-seal{align-self:center;border:1px solid #ffffff40;padding:25px;max-width:260px;transform:rotate(3deg)}.demo-seal>span{display:block;font-size:52px;color:var(--gold);line-height:1}.demo-seal strong{display:block;font-size:27px;line-height:1.1;margin:12px 0}.demo-seal small{display:block;font-size:14px;line-height:1.5}.demo-banner{display:flex;gap:12px 24px;flex-wrap:wrap;padding:16px 20px;background:var(--soft);border:1px solid var(--accent);margin:20px 0;font-size:14px}.demo-banner strong{color:var(--accent)}.demo-device-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.demo-device{padding:24px;background:var(--surface);border:2px solid var(--line);position:relative}.demo-device[data-selected=true]{border-color:var(--accent);box-shadow:4px 4px 0 var(--accent)}.demo-device h3{margin:12px 0;font-size:24px}.device-art{height:130px;display:grid;place-items:center;background:var(--soft);margin-bottom:22px}.demo-device .small{min-height:44px}.demo-device button{width:100%}.demo-chip{font-size:14px;background:var(--soft);padding:8px 12px;color:var(--accent);border:1px solid var(--accent)}.demo-next{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:30px}.demo-next p{margin-bottom:0}.demo-person h3{font-size:22px;margin-bottom:10px}.demo-person p{font-size:14px}.demo-bottom{border-top:2px solid var(--line);padding:20px 0;margin-top:15px;display:flex;align-items:center;justify-content:space-between;gap:24px}.demo-bottom p{font-size:14px;max-width:580px}.demo-bottom a{color:var(--ink);font-weight:700;font-size:14px;text-underline-offset:4px}.demo-timeline{list-style:none;padding:0;margin:22px 0}.demo-timeline li{border-left:3px solid var(--accent);padding:8px 15px;margin:7px 0;background:var(--soft);font-size:14px}.demo-timeline small{display:block;color:var(--muted)}.demo-share{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin-top:20px}.demo-share label{flex:1;min-width:160px}.demo-alert-label{font-size:14px;color:var(--accent);font-weight:800}.demo-detail-note{padding:14px;background:var(--soft);font-size:14px}body[data-theme=purple] .demo-intro{background:radial-gradient(ellipse at top right,#61398a80,transparent 70%),#1d112f;border-color:#8056a9}body[data-theme=purple] .demo-device{border-color:#64497e}body[data-theme=purple] .demo-device[data-selected=true]{border-color:var(--accent)}@media(max-width:800px){.demo-device-grid{grid-template-columns:1fr}.demo-device{display:grid;grid-template-columns:100px 1fr;gap:0 20px}.device-art{height:130px;grid-row:1/5;margin:0}.demo-device button{grid-column:2}.demo-device .small{min-height:0}.demo-intro{padding:26px}.demo-seal{max-width:220px}.demo-bottom,.demo-next{align-items:flex-start;flex-direction:column}}@media(max-width:520px){.demo-seal{display:none}.demo-device{grid-template-columns:80px 1fr;padding:18px;gap:0 16px}.device-art{height:115px}.demo-device h3{font-size:21px}.demo-intro h1{font-size:42px}.demo-share button{width:100%}}.device-art{height:220px;background:#f3eee6;overflow:hidden}.device-art img{display:block;width:100%;height:200px;max-width:240px;object-fit:contain;padding:10px}@media(max-width:800px){.demo-device{grid-template-columns:160px 1fr}.device-art{height:190px}.device-art img{height:180px}}@media(max-width:520px){.demo-device{display:block}.device-art{height:200px;margin-bottom:18px}.device-art img{height:190px}.demo-device button{margin-top:10px}}