/* Real-screen demo: canvas + plugin, captured from Figma. Default state is the finished result. */
.demo{padding:20px 0 70px}
.demo-window{position:relative;border-radius:18px;background:#f5f5f5;border:1px solid var(--theme-line,#dededb);box-shadow:0 30px 80px #17171722,0 6px 18px #17171712;overflow:hidden}
.dw-bar{height:38px;display:flex;align-items:center;gap:7px;padding:0 16px;background:#fbfbfa;border-bottom:1px solid #e5e6e8;font-size:12px;color:#697078}
.dw-bar i{width:10px;height:10px;border-radius:50%;background:#dcdde0}.dw-bar span{margin-left:8px}
.dw-body{position:relative;display:grid;grid-template-columns:69% 31%;align-items:start;background:#f5f5f5}
.dw-canvas{display:grid;padding:1.4% 0 3% 1.2%}
.dw-canvas img{grid-area:1/1;width:100%;height:auto;display:block;border-radius:6px}
.c-before{opacity:0}
.dw-plugin{position:relative;display:grid;container-type:inline-size;padding:2.6% 3.2% 2.6% .6%}
.dw-layer{grid-area:1/1;position:relative}
.dw-layer img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 14px 40px #17171728}
.p-before{opacity:0}
/* Clean prompt typed over the real textarea so the demo reads well */
.p-type{position:absolute;left:6.6%;top:47.5%;width:87.3%;height:15.4%;padding:3.2cqw 3.6cqw;background:#fff;border-radius:2.4cqw;font:400 3.9cqw/1.6 Inter,'DM Sans',sans-serif;color:#202124;overflow:hidden;visibility:hidden}
.p-type .caret{display:inline-block;width:.12em;height:1.05em;margin-left:1px;vertical-align:-.15em;background:#ff4f00;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.p-ring{position:absolute;left:5%;top:72%;width:90%;height:21%;border:2px solid #ff4f00;border-radius:14px;box-shadow:0 0 0 6px #ff4f0026;opacity:0;pointer-events:none}
.dw-cursor{position:absolute;left:0;top:0;width:26px;height:26px;margin:-3px 0 0 -4px;z-index:20;pointer-events:none;opacity:0}
.dw-cursor svg{display:block;filter:drop-shadow(0 3px 5px #0004)}
.ripple{position:absolute;left:2px;top:2px;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:3px solid #ff4f00;opacity:0}
.dw-steps{list-style:none;margin:0;padding:14px 18px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:#fbfbfa;border-top:1px solid #e5e6e8}
.dw-steps li{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:12px;color:#697078;font:600 13px 'DM Sans',sans-serif;transition:background .3s,color .3s}
.dw-steps b{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:#e5e6e8;color:#202124;font:700 11px Manrope,sans-serif;transition:background .3s,color .3s,scale .45s var(--spring,ease)}
.dw-steps li.on{background:#fff0e8;color:#202124}.dw-steps li.on b{background:#ff4f00;color:#111;scale:1.12}
.demo-window.beam{overflow:hidden}
@media(max-width:760px){
  .dw-body{grid-template-columns:1fr}
  .dw-plugin{width:78%;margin:0 auto;padding:2% 0 6%}
  .dw-steps{grid-template-columns:1fr 1fr}
  .dw-steps li{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.p-type .caret{animation:none}}