.tool-usage-demo{--demo-rgb:var(--accent-rgb,76, 104, 255);z-index:1;background:linear-gradient(145deg,#0e131ef0,#080c14f5);border:1px solid #ffffff17;border-radius:16px;width:min(1120px,100%);margin:-17px auto 28px;position:relative;overflow:hidden;box-shadow:0 20px 55px #0003,inset 0 1px #ffffff08}.tool-usage-demo.is-wide{width:min(1240px,100%)}.tool-usage-demo[data-tone=cyan]{--demo-rgb:76, 196, 208}.tool-usage-demo[data-tone=green]{--demo-rgb:94, 232, 154}.tool-usage-demo[data-tone=rose]{--demo-rgb:238, 111, 126}.tool-usage-demo[data-tone=violet]{--demo-rgb:132, 119, 255}.tool-usage-demo-summary{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;min-height:78px;padding:14px 16px;display:grid}.tool-usage-demo-icon{border:1px solid rgba(var(--demo-rgb), .28);width:42px;height:42px;color:rgb(var(--demo-rgb));background:rgba(var(--demo-rgb), .09);box-shadow:0 0 24px rgba(var(--demo-rgb), .08);border-radius:12px;place-items:center;display:grid}.tool-usage-demo-icon svg{width:21px;height:21px}.tool-usage-demo-copy{gap:3px;min-width:0;display:grid}.tool-usage-demo-copy small,.tool-usage-demo-detail>span{color:rgb(var(--demo-rgb));font:700 12px var(--font-geist-mono), monospace;letter-spacing:.16em}.tool-usage-demo-copy strong{color:#e6ebf4;font-size:var(--font-size-meta)}.tool-usage-demo-copy>span{color:#727d8f;font-size:var(--font-size-meta);text-overflow:ellipsis;white-space:nowrap;line-height:1.45;overflow:hidden}.tool-usage-demo-toggle{border:1px solid rgba(var(--demo-rgb), .24);color:#cbd3e2;background:rgba(var(--demo-rgb), .065);min-height:44px;font-size:var(--font-size-meta);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;gap:7px;padding:0 12px;font-weight:650;transition:border-color .16s,background .16s,color .16s,transform .16s;display:inline-flex}.tool-usage-demo-toggle b{color:rgb(var(--demo-rgb));background:rgba(var(--demo-rgb), .12);font:700 12px var(--font-geist-mono), monospace;letter-spacing:.08em;border-radius:5px;padding:3px 5px}.tool-usage-demo-toggle svg{width:16px;height:16px;transition:transform .18s}.tool-usage-demo.is-open .tool-usage-demo-toggle svg{transform:rotate(180deg)}.tool-usage-demo-toggle:hover{color:#fff;border-color:rgba(var(--demo-rgb), .42);background:rgba(var(--demo-rgb), .11)}.tool-usage-demo-toggle:active{transform:scale(.98)}.tool-usage-demo-toggle:focus-visible,.tool-usage-demo-steps button:focus-visible,.tool-usage-demo-controls button:focus-visible{outline:2px solid rgba(var(--demo-rgb), .78);outline-offset:2px}.tool-usage-demo-region{border-top:1px solid #0000;grid-template-rows:0fr;transition:grid-template-rows .26s,border-color .18s;display:grid}.tool-usage-demo.is-open .tool-usage-demo-region{border-top-color:#ffffff13;grid-template-rows:1fr}.tool-usage-demo-region-inner{min-height:0;overflow:hidden}.tool-usage-demo-steps{background:#02050a2e;border-bottom:1px solid #ffffff12;grid-template-columns:repeat(3,1fr);gap:7px;min-height:58px;padding:9px 14px;display:grid}.tool-usage-demo-steps button{border-radius:var(--control-radius);color:#687487;text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;align-items:center;gap:9px;min-width:0;min-height:44px;padding:7px 10px;display:flex}.tool-usage-demo-steps button span{color:#556071;font:700 12px var(--font-geist-mono), monospace}.tool-usage-demo-steps button strong{font-size:var(--font-size-meta);text-overflow:ellipsis;white-space:nowrap;font-weight:620;overflow:hidden}.tool-usage-demo-steps button:hover{color:#c5cfdd;background:#ffffff06}.tool-usage-demo-steps button.active{color:#eef3fb;border-color:rgba(var(--demo-rgb), .22);background:rgba(var(--demo-rgb), .075)}.tool-usage-demo-steps button.active span{color:rgb(var(--demo-rgb))}.tool-usage-demo-stage{grid-template-columns:minmax(0,1.45fr) minmax(230px,.55fr);gap:18px;padding:18px;display:grid}.tool-usage-demo-window{background:#03070d7a;border:1px solid #ffffff16;border-radius:13px;min-width:0;overflow:hidden;box-shadow:inset 0 1px #ffffff06}.tool-usage-demo-window-bar{color:#737f90;border-bottom:1px solid #ffffff12;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;min-height:39px;padding:0 13px;display:grid}.tool-usage-demo-window-bar>span{gap:4px;display:flex}.tool-usage-demo-window-bar i{background:rgba(var(--demo-rgb), .44);border-radius:50%;width:5px;height:5px;display:block}.tool-usage-demo-window-bar i:nth-child(2){opacity:.64}.tool-usage-demo-window-bar i:nth-child(3){opacity:.35}.tool-usage-demo-window-bar strong{font-size:var(--font-size-meta);text-overflow:ellipsis;white-space:nowrap;font-weight:580;overflow:hidden}.tool-usage-demo-window-bar small{color:#526073;font:12px var(--font-geist-mono), monospace}.tool-usage-demo-comparison{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:12px;min-height:156px;padding:17px;display:grid}.tool-usage-demo-comparison>div{background:#ffffff05;border:1px solid #ffffff12;border-radius:10px;align-content:start;gap:9px;min-width:0;padding:13px;display:grid}.tool-usage-demo-comparison>div.result{border-color:rgba(var(--demo-rgb), .18);background:rgba(var(--demo-rgb), .045)}.tool-usage-demo-comparison>svg{width:17px;color:rgb(var(--demo-rgb));opacity:.75;align-self:center}.tool-usage-demo-comparison small{color:#657185;font:700 12px var(--font-geist-mono), monospace;letter-spacing:.15em}.tool-usage-demo-comparison code{color:#9aa5b6;font:12px/1.65 var(--font-geist-mono), monospace;overflow-wrap:anywhere;white-space:pre-wrap;overflow:hidden}.tool-usage-demo-comparison .result code{color:#d7dfeb}.tool-usage-demo-detail{flex-direction:column;align-items:flex-start;min-width:0;padding:6px 3px;display:flex}.tool-usage-demo-detail h2{color:#edf1f8;letter-spacing:-.035em;margin:8px 0 7px;font-size:16px}.tool-usage-demo-detail p{color:#768295;font-size:var(--font-size-meta);word-break:keep-all;margin:0;line-height:1.7}.tool-usage-demo-controls{flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:16px;display:flex}.tool-usage-demo-controls button{border-radius:var(--control-radius);color:#8793a5;min-height:44px;font-size:var(--font-size-meta);cursor:pointer;background:#ffffff06;border:1px solid #ffffff16;align-items:center;gap:6px;padding:0 11px;display:inline-flex}.tool-usage-demo-controls button:first-child{color:#dce3ee;border-color:rgba(var(--demo-rgb), .2);background:rgba(var(--demo-rgb), .065)}.tool-usage-demo-controls button:hover:not(:disabled){color:#fff;border-color:rgba(var(--demo-rgb), .3)}.tool-usage-demo-controls button:disabled{opacity:.38;cursor:not-allowed}.tool-usage-demo-controls svg{width:16px;height:16px}.tool-usage-demo-motion-note{color:#596678;font-size:var(--font-size-meta);margin-top:9px;line-height:1.5}.tool-usage-demo-progress{background:#ffffff0a;height:2px;overflow:hidden}.tool-usage-demo-progress i{background:linear-gradient(90deg, rgba(var(--demo-rgb), .72), rgb(var(--demo-rgb)));height:100%;transition:width .24s;display:block}@media (width<=760px){.tool-usage-demo-stage{grid-template-columns:1fr}.tool-usage-demo-detail{min-height:150px}.tool-usage-demo-controls{margin-top:13px}}@media (width<=580px){.tool-usage-demo{margin-top:-10px;margin-bottom:22px}.tool-usage-demo-summary{grid-template-columns:auto minmax(0,1fr);padding:13px}.tool-usage-demo-copy>span{white-space:normal}.tool-usage-demo-toggle{grid-column:1/-1;width:100%}.tool-usage-demo-steps{grid-template-columns:1fr}.tool-usage-demo-steps button{min-height:44px}.tool-usage-demo-stage{padding:13px}.tool-usage-demo-comparison{grid-template-columns:1fr;min-height:0}.tool-usage-demo-comparison>svg{justify-self:center;transform:rotate(90deg)}}@media (prefers-reduced-motion:reduce){.tool-usage-demo-region,.tool-usage-demo-toggle,.tool-usage-demo-toggle svg,.tool-usage-demo-progress i{transition:none}}html[data-reduced-motion=true] .tool-usage-demo-region,html[data-reduced-motion=true] .tool-usage-demo-toggle,html[data-reduced-motion=true] .tool-usage-demo-toggle svg,html[data-reduced-motion=true] .tool-usage-demo-progress i{transition:none}