.notes+.demo{margin-top:22px}.frame .demo .shop,.frame .demo .ide{margin-top:0;border-radius:0;box-shadow:none}.demo .qa-grid{margin-top:0}.demo .setup{margin-top:28px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--line);padding:16px}.demo .setup .r{display:flex;justify-content:space-between;align-items:center;padding:9px 0;font-size:15px;border-top:1px solid var(--line)}.demo .setup .r span:last-child{font-weight:600;background:#e6f7fb;color:#0e7490;padding:3px 10px;border-radius:8px}.demo .shop{background:#fff;border-radius:24px;box-shadow:0 0 0 1px var(--line),0 40px 90px -50px #14141e66;overflow:hidden}.demo .shop-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}.demo .fchip{padding:8px 14px;border-radius:999px;font-size:15px;font-weight:500;background:#f3f2ef;border:0;cursor:pointer;transition:background .2s,color .2s}.demo .fchip[aria-pressed=true]{background:var(--ink);color:#fff}.demo .sortsel{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:15px;color:var(--muted)}.demo .sortsel select{padding:8px 12px;border-radius:10px;border:0;box-shadow:inset 0 0 0 1px var(--line);background:#fff;color:var(--ink);font-weight:500}.demo .shop-count{padding:10px 18px 0;font-size:14px;color:var(--muted)}.demo .products{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:12px 18px 18px}.demo .prod{border-radius:16px;background:#f7f6f3;padding:12px;transition:opacity .35s,transform .35s}.demo .prod.hide{display:none}.demo .prod.pop{animation:pop .4s cubic-bezier(.2,.8,.2,1)}@keyframes pop{0%{opacity:0;transform:scale(.96)}}.demo .prod .bag{height:92px;border-radius:12px;display:grid;place-items:end start;padding:10px;font-size:12px;font-weight:600;color:#fff}.demo .prod b{display:block;font-size:16px;font-weight:600;margin-top:10px}.demo .prod small{display:block;font-size:13px;color:var(--muted)}.demo .prod .price{font-size:15px;font-weight:600;margin-top:6px}.demo .ide{margin-top:64px;display:grid;grid-template-columns:230px 1fr 280px;background:#fff;color:var(--ink);border-radius:22px;overflow:hidden;box-shadow:0 50px 100px -50px #000c;min-height:470px}.demo .files{background:#fafafa;border-right:1px solid var(--line);padding:14px 10px;font-size:14px}.demo .files div{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;white-space:nowrap;overflow:hidden}.demo .files div:after{content:"";width:6px;height:6px;border-radius:50%;background:#16a34a;margin-left:auto;flex:none}.demo .files div.warn:after{background:#d97706}.demo .files div.on{background:#eee9ff;color:#5b21b6;font-weight:600}.demo .editor{display:flex;flex-direction:column;min-width:0}.demo .ed-top{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:14px}.demo .ed-top b{font-weight:600}.demo .ed-top .sync{margin-left:auto;color:#15803d;display:flex;align-items:center;gap:6px}.demo .ed-top .sync:before{content:"";width:7px;height:7px;border-radius:50%;background:#16a34a}.demo .ide pre{font-family:var(--mono);font-size:14px;line-height:1.8;padding:14px 0;overflow:hidden;counter-reset:ln}.demo .ide pre span.l{display:block;padding:0 16px 0 52px;position:relative;white-space:pre}.demo .ide pre span.l:before{counter-increment:ln;content:counter(ln);position:absolute;left:0;width:36px;text-align:right;color:#b4b8c2}.demo .k{color:#7c3aed}.demo .s{color:#c2410c}.demo .f{color:#1b6fee}.demo .c{color:#9aa0aa;font-style:italic}.demo .ai{border-left:1px solid var(--line);display:flex;flex-direction:column;padding:14px}.demo .ai-top{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px}.demo .ai-top .mark{width:24px;height:24px;border-radius:7px}.demo .ai-top .mark svg{width:13px;height:13px}.demo .ai-msg{margin-top:14px;padding:12px;border-radius:12px;background:#f6f6f8;font-size:14px;line-height:1.45}.demo .ai-sugg{margin-top:auto;display:grid;gap:6px}.demo .ai-sugg span{font-size:14px;padding:9px 12px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line);transition:background .2s,box-shadow .2s}.demo .ai-sugg span.on{background:#f3eeff;box-shadow:inset 0 0 0 1.5px #a78bfa}.demo .ai-in{margin-top:10px;padding:10px 12px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line);font-size:14px;color:var(--muted)}.demo .qa-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:28px;align-items:start}.demo .browser{border-radius:22px;background:#fff;box-shadow:0 0 0 1px var(--line),0 40px 90px -50px #14141e66;overflow:hidden}.demo .bar{display:flex;align-items:center;gap:8px;padding:14px 16px;background:#f2f1ee;border-bottom:1px solid var(--line)}.demo .bar i{width:11px;height:11px;border-radius:50%;background:#d9d6d0}.demo .bar .url{margin-left:10px;flex:1;font-family:var(--mono);font-size:14px;background:#fff;border-radius:8px;padding:6px 10px;color:var(--muted);position:relative}.demo .site{padding:34px 38px 40px;position:relative}.demo .site-nav{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:17px;margin-bottom:46px}.demo .site-nav span:last-child{font-weight:500;color:var(--muted);font-size:15px}.demo .site .row2{display:flex;gap:10px;margin-top:22px}.demo .site .b1{background:#1d4d3f;color:#fff;font-weight:600;font-size:15px;padding:11px 16px;border-radius:10px}.demo .site .b2{font-weight:600;font-size:15px;padding:11px 16px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line)}.demo .site .media{margin-top:30px;height:150px;border-radius:14px;background:repeating-linear-gradient(135deg,#e9efe9 0 14px,#f2f5f1 14px 28px);display:grid;place-items:center;color:#8b938c;font-family:var(--mono);font-size:14px}.demo .quotes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.demo .quotes div{padding:16px;border-radius:14px;background:#f5f4f1;font-size:15px;line-height:1.45}.demo .quotes b{display:block;margin-top:10px;font-size:14px}.demo .flag{position:relative;border-radius:6px;transition:box-shadow .25s,background .25s}.demo .flag.hot{box-shadow:0 0 0 3px var(--t-qa);background:#e0336f12}.demo .pin{position:absolute;top:-12px;right:-12px;z-index:3;width:26px;height:26px;border-radius:50%;background:var(--t-qa);color:#fff;font-size:14px;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 3px #fff;transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}.demo .scanned .pin{transform:scale(1)}.demo .scanline{position:absolute;left:0;right:0;top:0;height:120px;pointer-events:none;background:linear-gradient(180deg,#e0336f00,#e0336f1f 80%,#e0336f99);transform:translateY(-130px);opacity:0}.demo .scanning .scanline{animation:scan 1.6s cubic-bezier(.5,0,.3,1) forwards}@keyframes scan{0%{opacity:1;transform:translateY(-130px)}90%{opacity:1}to{opacity:0;transform:translateY(780px)}}.demo .issues{background:#fff;border-radius:22px;box-shadow:0 0 0 1px var(--line);padding:10px;position:sticky;top:90px}.demo .issues-head{display:flex;justify-content:space-between;align-items:center;padding:14px 14px 12px}.demo .issues-head b{font-size:20px;letter-spacing:-.02em}.demo .count{font-size:15px;font-weight:600;color:var(--t-qa);background:#ffe1ea;border-radius:999px;padding:4px 11px}.demo .issue{display:grid;grid-template-columns:30px 1fr;gap:12px;padding:14px;border-radius:14px;cursor:pointer;transition:background .2s}.demo .issue:hover,.demo .issue.hot{background:#fbf1f4}.demo .issue .k{width:26px;height:26px;border-radius:50%;background:#ffe1ea;color:var(--t-qa);font-weight:700;font-size:14px;display:grid;place-items:center;margin-top:2px}.demo .issue b{display:block;font-size:17px;font-weight:600;letter-spacing:-.01em}.demo .issue span{display:block;font-size:15px;color:var(--muted);line-height:1.4;margin-top:2px}.demo .rescan{margin:6px 14px 10px;width:calc(100% - 28px);justify-content:center;background:var(--ink);color:#fff}@media(max-width:1100px){.demo .ide{grid-template-columns:1fr}.demo .files,.demo .ai{display:none}.demo .qa-grid{grid-template-columns:1fr}.demo .issues{position:static}}@media(max-width:640px){.demo .products{grid-template-columns:1fr 1fr}.demo .sortsel{margin-left:0}.demo .site{padding:24px 20px 28px}.demo .quotes{grid-template-columns:1fr}}
