.demo-experience{margin-top:50px;text-align:left}
.demo-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px;font-size:14px;color:#58718b}
.demo-heading strong{font-weight:600;color:#263e55}
.demo-heading button{padding:7px 14px;border:1px solid #d4e0eb;border-radius:9px;background:#fff;color:#345e87;font-size:13px}
.demo-heading button:hover{background:#eaf3fc}
.demo-scroll{overflow-x:auto;border-radius:24px;box-shadow:0 28px 80px -32px rgba(35,87,125,.4);overscroll-behavior-x:contain}
.demo-canvas{position:relative;min-width:760px;width:100%;height:691px;overflow:hidden}
.demo-caption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 20px;margin-top:13px;font-size:13px;line-height:1.65;color:#66778a}
.demo-mobile-tip{display:none}
.terminal-demo{--td-text:#d0e4e9;--td-accent:#8e87ff;--td-line:rgba(176,177,203,.5);--td-gold:#e8ac38;position:absolute;left:0;top:0;width:1041px;height:691px;transform-origin:top left;border:2px solid rgba(158,161,188,.6);border-radius:23px;overflow:hidden;background:linear-gradient(rgba(15,29,54,.48),rgba(15,24,45,.3)),url('assets/demo/dusk-city.webp') center/cover;color:var(--td-text);font:400 17px/1.45 'PingFang SC','Microsoft YaHei','Noto Sans CJK SC',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:.015em;-webkit-font-smoothing:antialiased;isolation:isolate}
.terminal-demo button,.terminal-demo input{font:inherit;color:inherit;letter-spacing:inherit}
.terminal-demo button{touch-action:manipulation}
.terminal-demo h2{margin:0;font:inherit;color:var(--td-accent)}
.terminal-demo p{color:inherit;font:inherit}
.terminal-demo strong{font-weight:550;font-variant-numeric:tabular-nums;letter-spacing:0}
.terminal-demo svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;color:var(--td-accent)}
.terminal-demo button:focus-visible,.terminal-demo input:focus-visible{outline:2px solid #ffe09b;outline-offset:3px}
.td-accent{color:var(--td-accent)}
.td-topbar{position:absolute;inset:0 0 auto;height:52px;display:flex;align-items:center;gap:17px;padding:0 23px;background:rgba(14,25,49,.33)}
.td-brand{margin-right:auto;white-space:nowrap}
.td-account{width:168px;height:40px;padding:0 16px;border:2px solid var(--td-line);border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.td-account strong{color:var(--td-accent)}
.td-header-divider{width:2px;height:23px;background:var(--td-line)}
.td-navigation-item{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.td-settings{display:grid;place-items:center;border:2px solid var(--td-accent);border-radius:11px;width:44px;height:40px}
.td-settings svg{width:30px;height:30px;color:#d2d4dc}
.td-navigation{position:absolute;top:52px;left:23px;right:23px;height:55px;border-bottom:2px solid var(--td-line);display:flex;align-items:center;justify-content:space-between;padding:0 16px}
.td-navigation>div{display:flex;gap:40px;align-items:center}
.td-panel{position:absolute;border:1.6px solid var(--td-line);border-radius:13px;background:rgba(20,29,52,.13);padding:12px 14px}
.td-sell{left:23px;top:121px;width:164px;height:316px}
.td-catalog{left:204px;top:121px;width:572px;height:316px;padding:12px 12px}
.td-order{left:792px;top:121px;width:224px;height:316px}
.td-tools{left:23px;top:454px;width:164px;height:213px}
.td-inventory{left:204px;top:454px;width:572px;height:213px}
.td-status{left:792px;top:454px;width:224px;height:213px}
.td-sell h2{color:var(--td-gold)}
.td-slot{position:relative;display:grid;place-items:center;border:2px solid var(--td-line);border-radius:3px;background:rgba(17,24,46,.23);padding:3px;min-width:0}
.td-slot:hover{border-color:#dad6ff;background:rgba(149,142,255,.2)}
.td-slot[aria-pressed=true]{border-color:var(--td-gold);background:rgba(242,185,74,.11)}
.terminal-demo .td-slot img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;pointer-events:none;border-radius:0}
.td-stack-count{position:absolute;bottom:-1px;right:0;color:#fff;text-shadow:0 1px 2px #0b1320,1px 1px 1px #0b1320;pointer-events:none;font-size:13px;font-weight:600;line-height:1.15}
.td-sell-slot{position:absolute;top:53px;left:62px;width:36px;height:36px;border-color:var(--td-gold);padding:0}
.td-sell-name{position:absolute;top:91px;left:5px;right:5px;text-align:center;font-size:11px;line-height:1.2;opacity:.8}
.td-sell-estimate,.td-sell-unit{position:absolute;left:4px;right:4px;text-align:center;top:105px}
.td-sell-estimate strong,.td-sell-unit strong{display:block;margin-top:12px;white-space:nowrap;font-size:18px}
.td-sell-estimate strong{color:#ffb51f}
.td-sell-unit{top:169px}
.td-sell-wallet{position:absolute;top:235px;left:14px;right:14px;display:flex;justify-content:space-between}
.td-action{position:absolute;bottom:13px;left:18px;right:18px;height:33px;border:2px solid #bf913c;border-radius:10px;background:rgba(157,110,49,.15);padding:0 6px;font-size:18px}
.td-action:hover:not(:disabled){background:rgba(242,180,54,.26);border-color:#efbc57}
.td-action:disabled{opacity:.5;cursor:default}
.td-catalog-heading{display:flex;align-items:center;justify-content:space-between;height:27px}
.td-pagination{display:flex;align-items:center;gap:19px;margin-right:-1px;font-size:20px}
.td-pagination>span{display:grid;place-items:center;width:32px;height:29px;border:2px solid var(--td-line);border-radius:10px;opacity:.75}
.td-pagination svg{width:21px;height:21px;stroke:var(--td-text)}
.td-search-row{display:flex;align-items:center;gap:9px;margin-top:3px;height:49px}
#td-search{width:100%;height:43px;border:2px solid var(--td-line);border-radius:12px;background:rgba(15,24,44,.28);padding:6px 12px;min-width:0;outline-offset:1px;font-size:18px}
#td-search::placeholder{color:var(--td-text);opacity:.95}
.td-sorts{display:flex;gap:8px;height:36px}
.td-sorts button{position:relative;flex-shrink:0;width:36px;padding:0;display:flex;align-items:center;border:1.7px solid var(--td-accent);border-radius:9px;background:rgba(121,111,232,.09);color:var(--td-accent);transition:width 180ms cubic-bezier(.333,0,.667,1),background 150ms}
.td-sorts button[aria-pressed=true]{width:54px}
.td-sort-glyph{display:grid;place-items:center;width:32px;flex:0 0 32px}
.td-sort-direction{position:absolute;right:3px;display:grid;place-items:center;opacity:0;transition:opacity 60ms}
.td-sorts button[aria-pressed=true] .td-sort-direction{opacity:1;transition-delay:120ms}
.td-sorts .td-sort-direction svg{width:15px;height:20px;stroke-width:1.8}
.td-sorts[data-ascending=true] .td-sort-direction svg{transform:rotate(180deg)}
.td-sorts svg{width:23px;height:23px}
.td-sorts button[aria-pressed=true]{background:rgba(148,138,255,.18)}
.td-listings{display:grid;grid-template-columns:repeat(10,48px);gap:6px;margin-top:8px}
.td-listings .td-slot{height:49px}
.td-empty-results{padding:20px 6px;font-size:15px!important;opacity:.8}
.td-catalog-divider{position:absolute;left:0;right:0;top:245px;height:1px;background:rgba(156,147,255,.15);pointer-events:none}
.td-selected{position:absolute;top:52px;left:14px;right:14px;display:flex;align-items:center;gap:10px;height:40px}
.td-selected img{width:33px;height:33px;object-fit:contain;image-rendering:pixelated;flex-shrink:0}
.td-selected span{font-size:17px;line-height:1.25;overflow-wrap:anywhere}
.td-price-line{position:absolute;left:14px;right:14px;top:105px;display:flex;justify-content:space-between;align-items:center;gap:6px}
.td-price-line strong{font-size:18px;white-space:nowrap;color:var(--td-accent)}
.td-total-line{top:143px}
.td-quantities{position:absolute;top:179px;left:14px;right:14px;display:flex;gap:9px}
.td-quantities button{height:37px;flex:1;min-width:0;padding:0;border:2px solid var(--td-accent);border-radius:11px;background:rgba(103,95,199,.08);font-size:20px}
.td-quantities button:last-child{border-color:var(--td-line)}
.td-quantities button[aria-pressed=true]{background:rgba(128,116,223,.22)}
#td-quantity{position:absolute;left:148px;right:auto;top:179px;width:58px;height:37px;border:2px solid var(--td-accent);border-radius:11px;background:#263453;padding:2px 4px;z-index:2;text-align:center;font-size:15px;font-variant-numeric:tabular-nums}
.td-order-wallet{position:absolute;top:237px;left:14px;right:14px;display:flex;justify-content:space-between;gap:4px}
.td-order .td-action{left:49px;right:49px}
.td-tools h2{text-align:center}
.td-tools p{margin-top:25px;font-size:16px;line-height:1.55;overflow-wrap:anywhere}
.td-inventory h2{color:var(--td-text)}
.td-inventory-grid{display:grid;grid-template-columns:repeat(9,36px);grid-template-rows:repeat(4,36px);gap:0;position:absolute;top:43px;left:122px}
.td-inventory-grid .td-slot{height:36px;width:36px;padding:3px;border-width:1.5px}
.td-inventory-grid .td-slot:nth-child(n+28){margin-top:14px}
.td-status h2{color:var(--td-accent)}
#td-message{font-size:15px;line-height:1.4;white-space:pre-line;overflow-wrap:anywhere;margin-top:21px;min-height:65px}
#td-message.td-error{color:#ffc787}
.td-allowance{position:absolute;left:14px;right:14px;bottom:8px;border-top:2px solid var(--td-line);padding-top:4px}
.td-allowance>div{display:flex;justify-content:space-between;margin-top:2px}
.td-allowance strong{color:var(--td-accent);font-size:22px;line-height:1}
html[lang=en] .terminal-demo{font-size:16px}
html[lang=en] .td-account{font-size:15px;padding-inline:12px}
html[lang=en] .td-price-line{font-size:13px}
html[lang=en] .td-price-line strong{font-size:17px}
html[lang=en] .td-selected span{font-size:15px}
html[lang=en] #td-search{font-size:13px}
html[lang=en] .td-tools p{font-size:15px;line-height:1.35}
html[lang=en] .td-order-wallet,html[lang=en] .td-sell-wallet{font-size:15px}
@media(max-width:800px){.demo-mobile-tip{display:block}.demo-scroll{border-radius:17px}.demo-heading{align-items:flex-start}.demo-heading>div{max-width:75%}}
@media(prefers-reduced-motion:reduce){.terminal-demo *{scroll-behavior:auto;transition:none!important}}

.td-price-line>span{white-space:nowrap;flex-shrink:0}
#terminal-demo{scroll-margin-top:100px}
.td-brand{font-weight:500;letter-spacing:.06em}
.td-sell h2,.td-catalog h2,.td-order h2,.td-inventory h2,.td-status h2{font-weight:450}
.td-slot:active,.td-action:active:not(:disabled){background:rgba(195,179,255,.2)}
.td-selected span{font-size:16px;line-height:1.4}