/* Interactive editing and before/after cases share the workspace palette. */
.edit-demo,.presenter-showcase{scroll-margin-top:100px}
.presenter-showcase .presenter-footer{justify-content:flex-end}
#works .work-grid{grid-template-columns:1fr}
#works .cover-gallery{display:grid;grid-template-columns:1.25fr 1fr;align-items:center}
#works .covers{min-height:240px;padding:28px 55px;gap:22px}
#works .covers img{max-height:230px;object-fit:contain}
#works .work-caption{padding:32px}
.edit-demo{margin-top:28px;padding:30px;background:white;border:1px solid var(--line);border-radius:22px;box-shadow:0 12px 45px #122d6510}
.demo-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}
.demo-heading h3{font-size:23px;letter-spacing:-.6px}.demo-heading p{font-size:13px;margin-top:9px}.demo-heading>.badge{flex-shrink:0}
.edit-demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.demo-view{min-width:0}.demo-preview{position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden;background:#101d34;isolation:isolate;--effect:#fff;--effect-bg:#ffffff24}
.demo-preview video{width:100%;height:100%;object-fit:cover;display:block}
.demo-watermark{position:absolute;top:18px;left:18px;font-size:9px;letter-spacing:2px;color:#fff9;pointer-events:none}
.demo-scene-layer{position:absolute;top:15%;left:8%;right:8%;pointer-events:none;color:var(--effect);text-shadow:0 2px 16px #07152a66}
.demo-scene-layer>div{background:linear-gradient(125deg,#102b5db8,#10223d6b);backdrop-filter:blur(9px);padding:22px;border:1px solid #ffffff30;border-radius:15px;box-shadow:0 8px 30px #10223d20}
.demo-scene-layer small{display:block;font-size:11px;letter-spacing:1px;opacity:.85;margin-bottom:16px}
.demo-scene-layer ol{padding:0;list-style:none;display:grid;gap:10px}.demo-scene-layer li{display:flex;align-items:center;gap:13px;font-size:18px;font-weight:650}.demo-scene-layer li b{font-size:11px;padding:8px;border:1px solid currentColor;border-radius:7px;opacity:.75}
.demo-keyword{font-size:clamp(24px,3vw,42px);display:inline-block;border-bottom:4px solid currentColor;padding-bottom:5px}
.demo-bars{height:110px;display:flex;align-items:end;justify-content:center;gap:27px}.demo-bars>div{height:100%;width:40px;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:6px}.demo-bars b{font-size:12px}.demo-bars i{display:block;background:var(--effect);width:100%;height:var(--bar);border-radius:5px 5px 0 0;opacity:.85}
.demo-compare{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:15px;padding-block:15px}.demo-compare>span{opacity:.65}.demo-compare strong{padding:13px;border:1px solid currentColor;border-radius:8px}
.demo-icons{display:flex;justify-content:center;gap:32px}.demo-icons>span{display:grid;place-items:center;gap:8px;font-size:42px}.demo-icons b{font-size:14px}
.demo-scan{width:105px;height:105px;margin:auto;position:relative;display:grid;place-items:center}.demo-scan i,.demo-scan:after{content:"";position:absolute;inset:0;border:1px dashed currentColor;border-radius:50%;animation:demo-orbit 12s linear infinite}.demo-scan:after{inset:13px;border-style:solid;opacity:.4;animation-direction:reverse}.demo-scan b{font-size:25px;letter-spacing:3px}.demo-scan em{position:absolute;inset:15px 10px auto;height:1px;background:currentColor;animation:demo-scan 3s ease-in-out infinite}
.demo-network{position:relative;height:100px;max-width:260px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:28px 90px;align-items:center;text-align:center;font-size:11px}.demo-network svg{position:absolute;inset:0;width:100%;height:100%;stroke:currentColor;fill:none;opacity:.5}.demo-network>b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid currentColor;border-radius:10px;padding:10px;background:#253c63}.demo-network>span{position:relative}
.demo-caption{position:absolute;bottom:17%;left:6%;right:6%;text-align:center;font-size:clamp(14px,1.6vw,23px);font-weight:750;color:var(--effect);text-shadow:0 2px 3px #000,0 0 10px #000;pointer-events:none}
.edit-demo[data-tone=blue] .demo-preview{--effect:#b4d9ff}.edit-demo[data-tone=violet] .demo-preview{--effect:#e1c2ff}
.edit-demo[data-placement=center] .demo-scene-layer{top:32%}.edit-demo[data-placement=lower] .demo-scene-layer{top:auto;bottom:25%}.edit-demo[data-placement=left] .demo-scene-layer{left:4%;right:30%;top:23%}.edit-demo[data-placement=right] .demo-scene-layer{left:30%;right:4%;top:23%}
.demo-footnote{font-size:10px;margin-top:12px;color:#8896ac;line-height:1.7}
.demo-controls{padding:3px 0;min-width:0}.demo-control-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.demo-control-heading h4{font-size:15px}.demo-control-heading button{font-size:12px;color:#8292ac;padding:6px}
.demo-effects{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:20px}.demo-effects button{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;background:#fafbfe;padding:13px 12px;text-align:left;color:#516581;font-size:12px;transition:background .2s,border-color .2s,transform .2s}.demo-effects button>span:first-child{font-size:17px;width:26px;text-align:center;color:#8198cb}.demo-effects button i{margin-left:auto;font-style:normal;color:#8099d1}.demo-effects button:hover{transform:translateY(-2px);border-color:#b5caff}.demo-effects button[aria-pressed=true],.demo-options button[aria-pressed=true]{background:#edf2ff;color:#305df3;border-color:#9fb7ff}.demo-effects button[aria-pressed=true]>span:first-child{color:#305df3}
.demo-options{display:flex;align-items:center;gap:7px;padding:13px 0;border-top:1px solid #edf1f8;flex-wrap:wrap}.demo-options>span{font-size:12px;color:#8998b0;margin-right:auto}.demo-options button{border:1px solid var(--line);border-radius:7px;padding:8px 10px;font-size:11px;background:white;color:#647593}.demo-bottom{display:flex;gap:12px;margin-top:19px}.demo-bottom .button{flex:1;justify-content:center;font-size:12px;padding:14px 10px}.demo-bottom button:disabled{opacity:.45;cursor:default}.demo-status{font-size:11px;margin-top:13px;min-height:38px;line-height:1.7}
.presenter-showcase{padding-top:90px}.presenter-showcase h2{font-size:32px}.presenter-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px}.presenter-case{margin:0;background:white;border:1px solid var(--line);border-radius:18px;overflow:hidden}.presenter-case.after{border-color:#b9caff;box-shadow:0 10px 35px #305bff0a}.presenter-case figcaption{padding:22px 25px;display:flex;align-items:center;justify-content:space-between;gap:15px}.presenter-case figcaption small{font-size:9px;letter-spacing:2px;color:#9aa8be}.presenter-case h3{font-size:17px;margin-top:7px}.presenter-case figcaption>span{font-size:11px;color:#8495af}.presenter-case.after figcaption small{color:var(--blue)}
.presenter-film{background:radial-gradient(ellipse at top,#314568,#152038);display:flex;justify-content:center;padding:0 18px}.presenter-film video{display:block;height:460px;max-width:100%;aspect-ratio:9/16;object-fit:contain;background:#101827}.case-play{padding:17px;width:100%;background:white;color:#3d5e99;font-size:13px;transition:background .2s}.case-play:hover{background:#f3f6ff}.case-play[aria-pressed=true]{color:var(--blue);background:#eef3ff}.case-status{font-size:12px;color:#b64949;min-height:18px;margin-top:8px}.presenter-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:12px}.presenter-footer p{font-size:11px;line-height:1.9;color:#8a99b1}.presenter-footer .button{font-size:12px;flex-shrink:0}
@keyframes demo-orbit{to{rotate:360deg}}@keyframes demo-scan{50%{translate:0 70px;opacity:.3}}
@media(max-width:1100px){.edit-demo{padding:24px}.edit-demo-grid{gap:24px}.demo-scene-layer>div{padding:16px}.demo-scene-layer li{font-size:15px}.demo-compare{font-size:12px;gap:6px}.demo-compare strong{padding:9px}.presenter-case figcaption{align-items:start;flex-direction:column;gap:8px}.presenter-film video{height:400px}}
@media(max-width:800px){.edit-demo-grid{grid-template-columns:1fr}.demo-view{max-width:510px;width:100%;margin:auto}.demo-caption{font-size:20px}.demo-controls{max-width:510px;width:100%;margin:auto}.demo-heading h3{font-size:21px}.demo-heading>.badge{display:none}#works .covers{padding:24px;gap:12px}.presenter-film video{height:340px}.presenter-showcase h2{font-size:27px}.demo-keyword{font-size:32px}}
@media(max-width:480px){#works .cover-gallery{grid-template-columns:1fr}#works .work-caption{padding:20px 24px}.edit-demo{padding:18px;border-radius:16px;margin-top:18px}.demo-heading h3{font-size:19px}.demo-heading p{font-size:12px;line-height:1.7}.demo-watermark{font-size:8px;left:12px;top:12px}.demo-scene-layer>div{padding:13px;border-radius:10px}.demo-scene-layer small{font-size:9px;margin-bottom:10px}.demo-scene-layer li{font-size:13px;gap:10px}.demo-scene-layer li b{padding:5px}.demo-caption{font-size:15px}.demo-keyword{font-size:24px}.demo-compare{font-size:10px}.demo-bars{height:80px}.demo-icons>span{font-size:30px}.demo-network{gap:24px 65px;font-size:9px;height:80px}.demo-scan{height:75px;width:75px}.demo-effects button{padding:10px 8px;font-size:11px;gap:6px}.demo-options{gap:5px}.demo-options button{padding:8px;font-size:10px}.demo-status{font-size:10px}.presenter-showcase{padding-top:55px}.presenter-pair{gap:12px;grid-template-columns:1fr}.presenter-case figcaption{flex-direction:row;align-items:center;padding:18px}.presenter-case figcaption>span{font-size:10px}.presenter-film video{height:370px}.presenter-footer{align-items:stretch;flex-direction:column;gap:17px}.presenter-footer .button{justify-content:center}.presenter-footer p{font-size:10px}html[lang=en-US] .demo-options>span{width:100%;margin-bottom:3px}html[lang=en-US] .demo-effects button{font-size:10px}}
@media(prefers-reduced-motion:reduce){.demo-scan *,.demo-scan:after{animation:none!important}.demo-effects button:hover{transform:none}}