.image-placeholder{background:linear-gradient(145deg,#f5f6fa,#fbfbfc);grid-template-rows:auto 1fr auto;gap:9px;padding:13px 14px 11px;display:grid;position:relative}.image-placeholder-grid{opacity:.7;background-image:linear-gradient(45deg,#eef0f5 25%,#0000 25%),linear-gradient(-45deg,#eef0f5 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#eef0f5 75%),linear-gradient(-45deg,#0000 75%,#eef0f5 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;position:absolute;inset:0}.image-placeholder-grid i{background:#3559d81f;border:1px solid #55618e2e;border-radius:5px;display:block;position:absolute}.image-placeholder-grid i:first-child{width:24%;height:34%;top:18%;left:10%}.image-placeholder-grid i:nth-child(2){background:#ffffff8c;width:36%;height:49%;top:14%;right:10%}.image-placeholder-grid i:nth-child(3){border-radius:99px;width:48%;height:10%;bottom:13%;left:21%}.image-placeholder-grid i:nth-child(4){background:#3559d833;border-radius:50%;width:8%;height:8%;bottom:29%;right:20%}.image-placeholder.is-variant-1 .image-placeholder-grid i:first-child,.image-placeholder.is-variant-5 .image-placeholder-grid i:nth-child(2){border-radius:50%}.image-placeholder.is-variant-2 .image-placeholder-grid i:first-child{width:49%;height:17%;top:18%}.image-placeholder.is-variant-2 .image-placeholder-grid i:nth-child(2){width:22%;height:49%;top:35%}.image-placeholder.is-variant-3 .image-placeholder-grid i:first-child{width:16%;height:57%;left:14%}.image-placeholder.is-variant-3 .image-placeholder-grid i:nth-child(2){width:50%;height:27%;top:16%;right:13%}.image-placeholder.is-variant-4 .image-placeholder-grid i:first-child{width:31%;height:31%;top:29%;left:12%;transform:rotate(45deg)}.image-placeholder.is-variant-4 .image-placeholder-grid i:nth-child(2){width:28%;height:42%;top:22%;right:11%}.image-placeholder.is-variant-6 .image-placeholder-grid i:first-child{width:67%;height:16%;top:13%;left:9%}.image-placeholder.is-variant-6 .image-placeholder-grid i:nth-child(2){width:28%;height:40%;top:38%;right:12%}.image-placeholder.is-variant-7 .image-placeholder-grid i:first-child{border-radius:50% 50% 8px 8px;width:42%;height:43%;top:18%;left:16%}.image-placeholder.is-variant-7 .image-placeholder-grid i:nth-child(2){border-radius:50%;width:17%;height:17%;top:21%;right:8%}.image-placeholder-copy,.image-placeholder .preview-caption{z-index:1;position:relative}.image-placeholder-copy{background:#fffc;border:1px dashed #c8cad4;border-radius:6px;align-self:end;gap:3px;padding:9px 10px;display:grid}.image-placeholder-copy b{color:#64646e;font-size:9px}.image-placeholder-copy span{color:#9797a1;font-size:7px}.image-card-preview{align-content:center;gap:8px;padding:15px;display:grid}.image-card-media{color:#454c8e;background:linear-gradient(135deg,#dbeafe,#fef3c7);border-radius:7px;place-items:center;min-height:51px;font-size:11px;font-weight:800;display:grid}.image-card-copy{gap:3px;display:grid}.image-card-copy b{color:#575761;font-size:9px}.image-card-copy small{color:#8d8d97;font-size:7px}.image-layout-flow{align-items:center;gap:10px;display:flex}.image-layout-flow span,.image-layout-flow b{color:#5b5b65;text-align:center;background:#fafafa;border:1px solid #e6e6eb;border-radius:8px;flex:1;min-width:0;padding:13px;font-size:13px;display:grid}.image-layout-flow b{border-color:color-mix(in srgb, var(--accent) 30%, #fff);background:color-mix(in srgb, var(--accent) 7%, #fff);color:var(--accent)}.image-demo-frame{aspect-ratio:16/9;color:#666a7a;background:#f4f6ff;border:1px solid #dce3ff;border-radius:9px;place-items:center;font-size:13px;display:grid;overflow:hidden}.image-demo-frame.is-contain{background:repeating-conic-gradient(#eef0f7 0% 25%,#fff 0% 50%) 50%/20px 20px}.image-demo-media{width:100%;height:100%}@media (max-width:780px){.image-layout-flow{flex-direction:column;align-items:stretch}}.image-states-preview{align-content:center;gap:9px;padding:14px;display:grid}.image-states-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;display:grid}.image-states-cell{gap:4px;min-width:0;display:grid}.image-states-block{box-sizing:border-box;aspect-ratio:4/3;border:1px solid var(--line);border-radius:6px;width:100%;display:block}.image-states-cell.is-loading .image-states-block{background:linear-gradient(90deg,#e9ebf2 25%,#f4f5f9 50%,#e9ebf2 75%)}.image-states-cell.is-error .image-states-block{color:#a83a44;background:#fbecee;border-color:#e9c7cd;place-items:center;font-size:15px;font-weight:800;display:grid}.image-states-cell.is-empty .image-states-block{background:var(--soft);color:var(--muted);border-style:dashed;place-items:center;font-size:9px;font-weight:700;display:grid}.image-states-art{box-sizing:border-box;aspect-ratio:4/3;border:1px solid var(--line);background:#dbe7f5;border-radius:6px;width:100%;display:block}.image-states-cell small{text-align:center;color:var(--ink);font-size:8px;font-weight:700;display:block}.image-states-cell.is-error small{color:#a83a44}.image-states-cell.is-empty small{color:var(--muted)}.image-states-caption{color:var(--muted);margin:0;font-size:8px;line-height:1.5}.image-states-caption b{color:var(--ink);margin-right:3px;font-weight:700}.term-interactive-demo.image-lab-demo{border:1px solid var(--line);background:var(--surface-card);gap:14px}.term-interactive-demo.image-lab-demo button{border:1px solid var(--line);border-radius:var(--radius-buttons);background:var(--surface-card);min-height:34px;color:var(--ink);padding:7px 11px;font-size:13px;font-weight:650}.term-interactive-demo.image-lab-demo button:hover:not(:disabled){border-color:color-mix(in srgb, var(--ink) 28%, var(--line));color:var(--ink)}.term-interactive-demo.image-lab-demo button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.term-interactive-demo.image-lab-demo button:disabled{opacity:.55;cursor:not-allowed}.term-interactive-demo.image-lab-demo button.is-active{border-color:var(--ink);background:var(--ink);color:var(--color-white)}.term-interactive-demo.image-lab-demo .image-lab-primary{background:var(--color-rausch-600);color:var(--color-white);border:0;font-weight:700}.term-interactive-demo.image-lab-demo .image-lab-primary:hover:not(:disabled){background:var(--color-rausch-600);color:var(--color-white);filter:brightness(.92)}.term-interactive-demo.image-lab-demo .image-lab-primary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.term-interactive-demo.image-lab-demo .image-lab-zoom{cursor:zoom-in;background:0 0;border:0;min-height:0;padding:0}.term-interactive-demo.image-lab-demo .image-lab-zoom:hover:not(:disabled){color:inherit;border-color:#0000}.image-lab-brief{color:var(--muted);margin:0;font-size:12.5px;line-height:1.55}.image-lab-stage{border:1px solid var(--line);border-radius:var(--radius-cards);background:var(--soft);gap:10px;padding:14px;display:grid}.image-lab-frame{aspect-ratio:16/10;border:1px solid var(--line);background:var(--surface-card);border-radius:8px;place-items:center;display:grid;position:relative;overflow:hidden}.image-lab-skeleton{background:linear-gradient(90deg,#e3e6ef 25%,#f1f3f9 50%,#e3e6ef 75%) 0 0/200% 100%;width:100%;height:100%;animation:1.4s ease-in-out infinite image-lab-shimmer;display:block}@keyframes image-lab-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (prefers-reduced-motion:reduce){.image-lab-skeleton{background:#e3e6ef;animation:none}}.image-lab-zoom{width:100%;height:100%;display:block;position:relative}.image-lab-art{width:100%;height:100%;display:block}.image-lab-zoom-badge{color:var(--color-white);opacity:0;pointer-events:none;background:#222224c7;border-radius:9999px;padding:3px 8px;font-size:11px;font-weight:700;transition:opacity .14s;position:absolute;bottom:8px;right:8px}.image-lab-zoom:hover .image-lab-zoom-badge,.image-lab-zoom:focus-visible .image-lab-zoom-badge{opacity:1}.image-lab-error{color:#a83a44;text-align:center;background:#fbecee;place-items:center;gap:6px;width:100%;height:100%;padding:12px;display:grid}.image-lab-error-glyph{font-size:24px;font-weight:800;line-height:1}.image-lab-error-text{font-size:13px;font-weight:700}.image-lab-error .image-lab-primary{margin-top:4px}.image-lab-empty{background:var(--soft);width:100%;height:100%;color:var(--muted);text-align:center;place-items:center;gap:6px;display:grid}.image-lab-empty-mark{border:1.5px dashed var(--muted);border-radius:50%;place-items:center;width:30px;height:30px;font-size:11px;font-weight:700;display:grid}.image-lab-empty-text{font-size:12px;font-weight:650}.image-lab-badge{border:1px solid var(--line);color:var(--ink);background:#ffffffeb;border-radius:9999px;padding:2px 8px;font-size:11px;font-weight:700;position:absolute;top:8px;left:8px}.image-lab-badge.is-loading{color:var(--muted)}.image-lab-badge.is-empty{color:var(--muted)}.image-lab-alt{border:1px dashed var(--line);background:var(--surface-card);color:var(--ink);border-radius:6px;margin:0;padding:7px 10px;font-size:12px;line-height:1.5}.image-lab-alt b{margin-right:4px;font-weight:700}.image-lab-alt span{color:var(--muted);font-size:11px}.image-lab-segment{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.image-lab-segment-label{width:100%;color:var(--muted);font-size:11.5px;font-weight:700}.image-lab-actions{flex-wrap:wrap;gap:8px;display:flex}.image-lab-reset{background:var(--surface-card);color:var(--ink)}.image-lab-status{border-left:3px solid var(--ink);background:var(--soft);color:#5a5a64;border-radius:0 6px 6px 0;margin:0;padding:10px 12px;font-size:12.5px;line-height:1.55}.image-lab-preview-overlay{z-index:50;background:#14141699;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.image-lab-preview-frame{border:1px solid var(--line);border-radius:var(--radius-cards);background:var(--surface-card);gap:10px;width:100%;max-width:520px;padding:16px;display:grid}.image-lab-preview-art{box-sizing:border-box;aspect-ratio:16/10;border:1px solid var(--line);border-radius:8px;width:100%;display:block}.image-lab-preview-alt{color:var(--ink);margin:0;font-size:13px}.image-lab-preview-alt b{margin-right:4px;font-weight:700}.image-lab-preview-close{justify-self:start}.image-knowledge li b{color:var(--ink)}.image-howto{gap:8px;margin:12px 0 0;padding:0;list-style:inside decimal;display:grid}.image-howto li{color:#5a5a64;padding-left:4px;font-size:13px;line-height:1.6}.image-howto li b{color:var(--ink)}.image-example-grid article.image-example{gap:6px;display:grid}.image-example.is-good{border-color:color-mix(in srgb, var(--ink) 22%, var(--line))}.image-example.is-bad{border-color:#a83a44}.image-example.is-bad b{color:#a83a44}.image-example span{color:var(--muted);font-size:12px}.image-example-cta{border:1px solid var(--ink);border-radius:var(--radius-buttons);background:var(--ink);min-height:30px;color:var(--color-white);cursor:pointer;justify-self:start;padding:5px 12px;font-size:12px;font-weight:650}.image-example-cta:hover{filter:brightness(.92)}.image-example-cta:focus-visible{outline:2px solid var(--ink);outline-offset:2px}@media (max-width:560px){.image-states-row{grid-template-columns:repeat(2,minmax(0,1fr))}.image-lab-zoom-badge{opacity:1}.image-lab-segment button{flex:calc(50% - 6px)}}.term-card .image-states-preview{background:#f8efd9}.image-states-cell{background:#fff9ed;border-color:#d9c694}.image-states-caption{color:#4b402d}.image-states-caption b{color:#1f365f}.term-interactive-demo.image-lab-demo{background:#f8efd9;border-color:#cbb783}.term-interactive-demo.image-lab-demo button{color:#263958;background:#fff9ed;border-color:#a99a78}.term-interactive-demo.image-lab-demo button:hover:not(:disabled){color:#182946;background:#efe2c7;border-color:#263958}.term-interactive-demo.image-lab-demo button.is-active{color:#fff9ed;background:#1f365f;border-color:#1f365f}.term-interactive-demo.image-lab-demo .image-lab-primary{color:#fff9ed;background:#9d393a;border-color:#9d393a}.term-interactive-demo.image-lab-demo .image-lab-primary:hover:not(:disabled){color:#fff9ed;background:#7c2d31}.term-interactive-demo.image-lab-demo .image-lab-primary:focus-visible,.term-interactive-demo.image-lab-demo button:focus-visible{outline-color:#d08b25}.image-lab-brief{color:#544733}.image-lab-stage{background:#efe2c7;border-color:#d2bd8b}.image-lab-frame{background:#fff9ed;border-color:#1f365f}.image-lab-skeleton{background:linear-gradient(90deg,#dfd1b1 25%,#fff5df 50%,#dfd1b1 75%)}@media (prefers-reduced-motion:reduce){.image-lab-skeleton{background:#dfd1b1}}.image-lab-empty{color:#5d4a31;background:#f2e4c7}.image-lab-empty-mark{border-color:#7f6947}.image-lab-badge{color:#1f365f;background:#fff9edf0;border-color:#b9a675}.image-lab-badge.is-error{color:#8c3035;background:#f9dfda;border-color:#c87870}.image-lab-alt{color:#263958;background:#fff9ed;border-color:#bba675}.image-lab-alt span{color:#68573b}.image-lab-segment-label{color:#544733}.image-lab-reset{color:#3d3325;border-color:#756343}.term-interactive-demo.image-lab-demo .image-lab-status{color:#413721;background:#fff7e8;border-left-color:#1f365f}.image-lab-preview-frame{background:#fff9ed;border-color:#d2bd8b}.image-lab-preview-art{border-color:#1f365f}
