.app-demo{padding:68px 0 78px;border-top:1px solid var(--line);scroll-margin-top:24px}
.home-demo-heading{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:34px}
.home-demo-heading h2{font:400 clamp(34px,3.9vw,54px)/1.13 var(--serif);letter-spacing:-.033em;margin:0;max-width:650px}
.home-demo-heading>p{font-size:15px;color:var(--muted);max-width:390px;margin:0 0 4px;line-height:1.65}
.home-demo-grid{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:34px 27px;margin:0;padding:0}
.home-demo-item{min-width:0;grid-column:span 2}
.home-demo-item:nth-child(4){grid-column:2/span 2}
.home-demo-card{width:100%;height:100%;padding:0;display:flex;flex-direction:column;align-items:stretch;text-align:left;color:var(--ink);background:transparent}
.home-demo-frame{display:grid;place-items:center;min-height:452px;padding:25px 18px;background:#e8ede3;border:1px solid #d6ddcf;overflow:hidden}
.home-demo-thumb{display:block;width:auto;height:400px;max-width:100%;object-fit:contain;border-radius:14px;box-shadow:0 8px 28px #11231d1c;transition:transform .3s}
.home-demo-card:hover .home-demo-thumb{transform:translateY(-3px)}
.home-demo-caption{display:flex;align-items:baseline;gap:13px;padding-top:18px}
.home-demo-number{font-size:11px;letter-spacing:.08em;color:#98733d;flex-shrink:0}
.home-demo-card-title{font:400 clamp(23px,2vw,29px)/1.2 var(--serif);letter-spacing:-.025em}
.home-demo-note{font-size:12px;line-height:1.6;color:var(--muted);margin:30px 0 0}
.home-demo-viewer{width:min(960px,calc(100% - 40px));height:min(880px,94dvh);max-height:94dvh;max-width:960px;padding:0;border:1px solid #d2d9cb;background:var(--paper);color:var(--ink);overflow:hidden}
.home-demo-viewer[open]{display:flex;flex-direction:column}
.home-demo-viewer-header{display:flex;align-items:center;gap:18px;padding:15px 20px;flex-shrink:0;border-bottom:1px solid var(--line)}
.home-demo-viewer-header h2{font:400 clamp(20px,2.3vw,28px)/1.2 var(--serif);letter-spacing:-.02em;flex:1;margin:0;min-width:0;overflow-wrap:anywhere}
.home-demo-icon-button{width:44px;height:44px;min-width:44px;display:grid;place-items:center;padding:0;background:transparent;color:var(--ink);border:1px solid #a9b9ac;border-radius:50%;font-size:23px;line-height:1}
.home-demo-icon-button:hover,.home-demo-reset:hover{background:#e2e9dc}
.home-demo-icon-button:disabled{opacity:.35;cursor:default;background:transparent}
.home-demo-close{font-size:30px;margin-left:auto}
.home-demo-stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:0;flex:1;overflow:hidden;background:#dce4d7;touch-action:none;user-select:none;-webkit-user-select:none;overscroll-behavior:contain}
.home-demo-stage.is-zoomed{cursor:grab}
.home-demo-stage.is-zoomed:active{cursor:grabbing}
.home-demo-image{display:block;max-width:none;max-height:none;flex:none;object-fit:contain;transform-origin:center center;will-change:transform;pointer-events:none;user-select:none;-webkit-user-drag:none}
.home-demo-controls{display:flex;align-items:center;gap:14px;padding:13px 20px;flex-shrink:0;border-top:1px solid var(--line)}
.home-demo-count{font-size:13px;font-variant-numeric:tabular-nums;min-width:40px;text-align:center;color:var(--muted)}
.home-demo-zoom{display:flex;align-items:center;gap:8px;margin-left:auto}
.home-demo-reset{min-width:65px;height:44px;padding:0 10px;border-radius:5px;background:transparent;color:var(--ink);font-size:13px;font-variant-numeric:tabular-nums}
@media(max-width:1050px){.home-demo-heading{align-items:start}.home-demo-heading>p{max-width:320px}.home-demo-frame{min-height:380px;padding:20px 12px}.home-demo-thumb{height:338px}.home-demo-grid{gap:28px 20px}.home-demo-card-title{font-size:24px}}
@media(max-width:760px){.app-demo{padding:42px 0}.home-demo-heading{display:block;margin-bottom:26px}.home-demo-heading h2{font-size:35px}.home-demo-heading>p{font-size:14px;max-width:460px;margin:17px 0 0}.home-demo-grid{grid-template-columns:1fr;gap:32px}.home-demo-item,.home-demo-item:nth-child(4){grid-column:auto}.home-demo-frame{min-height:510px;padding:23px 18px}.home-demo-thumb{height:462px}.home-demo-card-title{font-size:28px}.home-demo-caption{gap:12px;padding-top:17px}.home-demo-note{font-size:12px;margin-top:25px}.home-demo-viewer{width:calc(100% - 16px);height:94dvh;max-height:94dvh;border-radius:8px}.home-demo-viewer-header{padding:11px 12px;gap:12px}.home-demo-viewer-header h2{font-size:22px}.home-demo-controls{padding:11px 12px;gap:8px}.home-demo-zoom{gap:4px}.home-demo-reset{min-width:55px;padding:0 5px}.home-demo-count{min-width:34px;font-size:12px}.home-demo-icon-button{width:42px;height:42px;min-width:42px}}
@media(max-width:370px){.home-demo-controls{gap:6px;padding:9px}.home-demo-icon-button{width:38px;height:42px;min-width:38px}.home-demo-zoom{gap:2px}.home-demo-reset{min-width:48px;font-size:12px}.home-demo-count{min-width:28px}.home-demo-frame{min-height:465px}.home-demo-thumb{height:420px}}
@media(prefers-reduced-motion:reduce){.home-demo-thumb{transition:none}}