.demo-page{color:#263342;max-width:1500px;margin:auto;padding:24px}.demo-header,.demo-intro,.demo-library-heading{justify-content:space-between;align-items:center;gap:20px;display:flex}.demo-header{border-bottom:1px solid #dbe1e8;padding-bottom:24px}.demo-header strong{color:#287157;margin-right:auto}.demo-intro{padding:32px 0 16px}.demo-intro h1{margin:8px 0;font-size:clamp(24px,3vw,36px)}.demo-intro p,.demo-panel p,.demo-library p{color:#647184;line-height:1.7}.demo-notice{color:#235d43;background:#edf8f1;border:1px solid #b7dccb;border-radius:12px;padding:16px;line-height:1.7}.demo-status{color:#475569;min-height:28px}.demo-layout{grid-template-columns:280px minmax(0,1fr);gap:20px;display:grid}.demo-panel{background:#fff;border:1px solid #dbe1e8;border-radius:16px;flex-direction:column;gap:12px;padding:22px;display:flex}.demo-panel h2{margin:12px 0 0;font-size:16px}.demo-panel p{margin:0;font-size:13px}.demo-panel small{color:#647184;line-height:1.7}.demo-panel>input[type=file]{opacity:0;width:1px;height:1px;position:absolute;overflow:hidden}.demo-panel .demo-filename{overflow-wrap:anywhere;color:#334155}.demo-canvas{background:#eef1f5;border:1px solid #dbe1e8;border-radius:16px;min-width:0;height:650px;overflow:hidden}.demo-canvas .selection-canvas{height:100%}.demo-empty{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;height:100%;padding:24px;display:flex}.demo-empty p{color:#647184}.demo-library{padding:32px 0}.demo-library h2{font-size:22px}.demo-library h2 small{color:#647184;font-size:14px}.demo-library-heading label{white-space:nowrap}.demo-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;margin-top:20px;display:grid}.demo-card{background:#fff;border:1px solid #dbe1e8;border-radius:12px;padding:14px;overflow:hidden}.demo-card h3{overflow-wrap:anywhere;margin:16px 0;font-size:15px}.demo-card>div:last-child{gap:8px;display:flex}.demo-image,.demo-tiles{height:220px;overflow:hidden}.demo-image img{object-fit:contain;width:100%;height:100%}.demo-tiles{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);display:grid}.demo-tiles img{object-fit:fill;width:100%;height:100%}.demo-checker{background:repeating-conic-gradient(#273247 0% 25%,#1a2434 0% 50%) 50%/20px 20px}.demo-empty-library{border:1px dashed #cbd5e1;border-radius:12px;padding:32px}.demo-page .btn:disabled{opacity:.45;cursor:not-allowed}@media (max-width:760px){.demo-page{padding:16px}.demo-intro,.demo-library-heading{flex-direction:column;align-items:flex-start}.demo-layout{grid-template-columns:1fr}.demo-canvas{height:460px}.demo-header{flex-wrap:wrap}.demo-header .brand{font-size:18px}.demo-grid{grid-template-columns:1fr}}.demo-page .demo-status{padding:8px 0}@media (max-width:760px){.demo-page .mask-workspace{grid-template-rows:minmax(160px,40%) minmax(0,1fr);grid-template-columns:minmax(0,1fr);gap:12px}.demo-page .mask-edit-stage{grid-row:1;min-height:0}.demo-page .mask-controls{grid-row:2;min-height:0;overflow:auto}.demo-page .mask-wide-dialog{height:94dvh;padding:12px}}