.product-demo{color-scheme:light;--paper:#f7f2e8;--ink:#36352f;--muted:#80796d;--orange:#955039;--line:#dfd7c9}.product-demo *{box-sizing:border-box}.product-demo{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}.product-demo button,.product-demo input{font:inherit}.product-demo button{cursor:pointer}.product-demo button:focus-visible,.product-demo input:focus-visible{outline:3px solid var(--orange);outline-offset:5px}.product-demo{max-width:1080px;margin:auto;padding:24px 44px 24px}.product-demo .masthead{display:flex;justify-content:space-between;align-items:center}.product-demo .brand{display:flex;gap:9px;align-items:center;font-size:20px;font-weight:650;letter-spacing:-.7px}.product-demo .brand img{width:38px;height:38px}.product-demo .edition{font-size:11px;color:var(--muted);letter-spacing:1.8px}.product-demo .heading{display:grid;text-align:center;margin:24px 0 20px;min-height:110px;position:relative}.product-demo .copy{position:relative;grid-area:1/1;will-change:opacity,transform}.product-demo .eyebrow{font-size:11px;font-weight:600;color:var(--orange);letter-spacing:2px;margin:0 0 12px}.product-demo h2{font-size:clamp(27px,3.5vw,42px);font-weight:550;letter-spacing:-1.7px;line-height:1.25;margin:0}.product-demo .subtitle{margin:10px 0 0;color:var(--muted);font-size:14px}.product-demo .copy:not(:first-child){opacity:0}.product-demo .film{position:relative;border:1px solid var(--line);border-radius:20px;background:#fcf9f3;overflow:hidden;box-shadow:0 18px 50px -34px #51433044}.product-demo .film:before{content:"";position:absolute;inset:0;background-image:radial-gradient(#ada08b38 .65px,transparent .65px);background-size:12px 12px;opacity:.2;pointer-events:none}.product-demo .film svg{display:block;width:100%;height:auto;position:relative}.product-demo .film-top{position:absolute;z-index:1;top:22px;left:27px;right:27px;display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1.8px;color:var(--muted)}.product-demo .status{display:flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.3px}.product-demo .status-dot{width:6px;height:6px;border-radius:50%;background:#a59d90}.product-demo .status.enabled .status-dot{background:#74866a}.product-demo .status.enabled{color:#627455}.product-demo .film-caption{position:absolute;bottom:24px;left:20px;right:20px;text-align:center;font-size:13px;letter-spacing:.4px;color:var(--muted)}.product-demo .film-caption strong{color:var(--orange);font-weight:500}.product-demo .transport{display:flex;align-items:center;gap:14px;margin:20px 4px 0}.product-demo .icon-button{width:34px;height:34px;display:grid;place-items:center;flex:none;background:transparent;border:1px solid var(--line);border-radius:50%;color:var(--ink)}.product-demo .icon-button:hover{background:#ebe4d8}.product-demo .icon-button svg{width:14px;height:14px}.product-demo .timeline{appearance:none;min-width:0;flex:1;height:3px;border-radius:4px;background:linear-gradient(to right,var(--orange) var(--progress,0%),var(--line) var(--progress,0%));cursor:pointer;margin:0}.product-demo .timeline::-webkit-slider-thumb{appearance:none;width:10px;height:10px;border-radius:50%;background:var(--orange)}.product-demo .timeline::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:var(--orange)}.product-demo .time{font:11px ui-monospace,SFMono-Regular,monospace;color:var(--muted);white-space:nowrap}.product-demo .chapters{display:flex;justify-content:center;gap:38px;margin-top:19px}.product-demo .chapter{display:flex;align-items:center;gap:9px;border:0;padding:7px 0;background:transparent;color:#999083;font-size:12px}.product-demo .chapter>span:first-child{font:10px ui-monospace,SFMono-Regular,monospace}.product-demo .chapter.active{color:var(--orange)}.product-demo .chapter:before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor}.product-demo .footnote{text-align:center;font-size:11px;color:#9b9285;margin:18px 0 0}.product-demo svg text{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI",sans-serif}.product-demo #camera,.product-demo #pointer,.product-demo #menu{will-change:transform,opacity}
    @media(min-width:1500px){.product-demo{padding-top:45px}.product-demo .heading{margin-top:48px}}
    @media(max-width:650px){.product-demo .display-label{display:none}.product-demo{padding:20px 16px}.product-demo .edition{font-size:9px;letter-spacing:1px}.product-demo .brand{font-size:18px}.product-demo .heading{margin-top:32px;min-height:114px}.product-demo .subtitle{font-size:12px}.product-demo .film{border-radius:12px}.product-demo .film-top{top:13px;left:15px;right:15px;font-size:8px;letter-spacing:1px}.product-demo .status{font-size:9px}.product-demo .film-caption{bottom:12px;font-size:10px}.product-demo .chapters{gap:24px;margin-top:16px}.product-demo .chapter{font-size:11px}.product-demo .transport{gap:10px;margin-top:16px}.product-demo .footnote{font-size:10px;line-height:1.6}.product-demo .time{font-size:10px}}.product-demo .preview-options{display:flex;align-items:center;gap:16px}.product-demo .preview-options select{font:inherit;font-size:12px;color:var(--ink);border:1px solid var(--line);border-radius:20px;padding:7px 10px;background:transparent;max-width:120px}.product-demo select:focus-visible{outline:3px solid var(--orange);outline-offset:4px}.product-demo :lang(en) .eyebrow{letter-spacing:1.3px}.product-demo :lang(en) h2{letter-spacing:-1.3px}.product-demo :lang(en) .film-top{letter-spacing:.5px}.product-demo [data-i18n="menu.auto"]{font-size:11px}.product-demo [data-i18n="menu.crossing"]{font-size:12px}.product-demo [data-i18n="blocked"],.product-demo [data-i18n="crossed"]{font-size:9px}
    @media(max-width:650px){.product-demo .preview-options{gap:8px}.product-demo .edition{display:none}.product-demo .preview-options select{font-size:11px}.product-demo .eyebrow{font-size:10px;letter-spacing:1px}.product-demo .subtitle{line-height:1.6}.product-demo .film-caption{position:relative;bottom:auto;left:auto;right:auto;margin:0 12px 12px;line-height:1.5;min-height:30px}.product-demo .chapters{gap:14px}.product-demo .chapter{gap:6px}.product-demo .chapter-name{font:inherit}.product-demo :lang(en) h2{font-size:28px}.product-demo :lang(en) .status{max-width:48%;text-align:right;letter-spacing:0}}.product-demo /* German commands match the app; fit the longer labels around fixed SVG controls. */
    :lang(de) [data-i18n="menu.auto"]{text-anchor:end;transform:translateX(118px)}.product-demo :lang(de) #save-label{font-size:10px}.product-demo :lang(de) #menu [data-i18n="menu.crossing"]{font-size:11px}.product-demo :lang(de) .eyebrow{letter-spacing:1px}
    @media(max-width:650px){.product-demo :lang(de) .status{max-width:48%;text-align:right;letter-spacing:0}.product-demo :lang(de) .heading{min-height:145px}.product-demo :lang(de) h2{font-size:28px}}
  
.product-demo{max-width:1080px;margin:0 auto 5rem;padding:0;scroll-margin-top:2rem;line-height:normal}.product-demo .heading{margin-top:0}.product-demo .footnote{line-height:1.6}.product-demo .chapter{white-space:nowrap}
@media(max-width:650px){.product-demo{margin-bottom:3rem}.product-demo .heading{margin-top:0}.product-demo .chapters{gap:10px;flex-wrap:wrap}}