:root{--rsz-paper: #f3f6f5;--rsz-panel: #ffffff;--rsz-panel-2: #eaf0ee;--rsz-line: #d9e2df;--rsz-line-2: #b9c7c3;--rsz-ink: #13222a;--rsz-ink-2: #3a4a52;--rsz-dim: #63737a;--rsz-teal: #0f766e;--rsz-teal-2: #0b5a54;--rsz-teal-soft: #e3f3f1;--rsz-amber: #a15c07;--rsz-amber-soft: #fdf4e4;--rsz-rose: #b42343;--rsz-rose-soft: #fcedf1;--rsz-stage: #1b262c;--rsz-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--primary: #0f766e;--primary-dark: #0b5a54;--border: #d9e2df;--surface: #ffffff;--surface-muted: #f3f6f5;--shadow-soft: 0 2px 10px rgba(19, 34, 42, 0.06);--text-main: #13222a;--text-muted: #63737a;}
.rsz-sr{position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;}
.rsz-app{background: var(--rsz-paper);border: 1px solid var(--rsz-line);border-radius: 14px;padding: 1rem;margin-bottom: 2.6rem;color: var(--rsz-ink);}
.rsz-head{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 0.5rem 1rem;margin-bottom: 0.9rem;}
.rsz-byline{display: flex;flex-wrap: wrap;gap: 0.2rem 0.7rem;font-size: 0.82rem;color: var(--rsz-dim);}
.rsz-byline-author a, .rsz-byline-author .author-link{color: var(--rsz-teal-2);font-weight: 600;text-decoration: none;}
.rsz-byline-author a:hover, .rsz-byline-author .author-link:hover{text-decoration: underline;}
.rsz-facts{display: flex;flex-wrap: wrap;gap: 0.4rem;list-style: none;margin: 0;padding: 0;}
.rsz-facts li{font-size: 0.78rem;color: var(--rsz-ink-2);background: var(--rsz-panel);border: 1px solid var(--rsz-line);border-radius: 6px;padding: 0.22rem 0.6rem;}
.rsz-facts b{color: var(--rsz-teal-2);}
.rsz-drop{display: flex;align-items: center;justify-content: center;gap: 1.2rem;padding: 2.6rem 1.2rem;background: var(--rsz-panel);border: 2px dashed var(--rsz-line-2);border-radius: 12px;cursor: pointer;text-align: left;transition: border-color 0.15s, background 0.15s, padding 0.15s;}
.rsz-drop:hover, .rsz-drop:focus-visible, .rsz-drop.is-over{border-color: var(--rsz-teal);background: var(--rsz-teal-soft);outline: none;}
.rsz-file{display: none;}
.rsz-drop-mark{position: relative;flex: 0 0 auto;width: 70px;height: 56px;border: 2px solid var(--rsz-ink);border-radius: 4px;}
.rsz-drop-mark span{position: absolute;left: -2px;bottom: -2px;width: 40px;height: 32px;background: var(--rsz-teal);border-radius: 3px;}
.rsz-drop-mark::after{content: "";position: absolute;left: 34px;bottom: 26px;width: 22px;height: 2px;background: var(--rsz-ink);transform: rotate(-38deg);transform-origin: left center;}
.rsz-drop-text{display: flex;flex-direction: column;gap: 0.25rem;}
.rsz-drop-title{font-size: 1.08rem;font-weight: 700;color: var(--rsz-ink);}
.rsz-drop-swap{display: none;font-size: 0.98rem;font-weight: 700;color: var(--rsz-ink);}
.rsz-drop-hint{font-size: 0.86rem;color: var(--rsz-dim);}
.rsz-drop.is-loaded{padding: 0.9rem 1rem;gap: 0.8rem;justify-content: flex-start;}
.rsz-drop.is-loaded .rsz-drop-mark{width: 40px;height: 32px;}
.rsz-drop.is-loaded .rsz-drop-mark span{width: 22px;height: 18px;}
.rsz-drop.is-loaded .rsz-drop-mark::after{left: 19px;bottom: 14px;width: 12px;}
.rsz-drop.is-loaded .rsz-drop-title, .rsz-drop.is-loaded .rsz-drop-hint{display: none;}
.rsz-drop.is-loaded .rsz-drop-swap{display: block;}
.rsz-alt{display: flex;flex-wrap: wrap;align-items: center;gap: 0.4rem 0.7rem;margin-top: 0.6rem;font-size: 0.82rem;color: var(--rsz-dim);}
.rsz-mini{border: 1px solid var(--rsz-line-2);background: var(--rsz-panel);color: var(--rsz-ink);border-radius: 6px;padding: 0.3rem 0.7rem;font-size: 0.82rem;font-weight: 600;cursor: pointer;}
.rsz-mini:hover, .rsz-mini:focus-visible{border-color: var(--rsz-teal);color: var(--rsz-teal-2);}
.rsz-note{font-size: 0.88rem;border-radius: 8px;margin-top: 0.7rem;}
.rsz-note:empty{display: none;}
.rsz-note.is-info{background: var(--rsz-teal-soft);color: var(--rsz-teal-2);padding: 0.55rem 0.8rem;}
.rsz-note.is-err{background: var(--rsz-rose-soft);color: var(--rsz-rose);padding: 0.55rem 0.8rem;}
.rsz-bench{display: grid;grid-template-columns: minmax(280px, 360px) 1fr;gap: 1rem;margin-top: 1rem;}
.rsz-bench[hidden]{display: none;}
.rsz-controls{background: var(--rsz-panel);border: 1px solid var(--rsz-line);border-radius: 12px;padding: 1rem;display: flex;flex-direction: column;gap: 1rem;}
.rsz-src{display: flex;flex-direction: column;gap: 0.15rem;padding-bottom: 0.8rem;border-bottom: 1px solid var(--rsz-line);}
.rsz-src-name{font-weight: 700;font-size: 0.92rem;word-break: break-all;}
.rsz-src-meta{font: 0.8rem/1.4 var(--rsz-mono);color: var(--rsz-dim);}
.rsz-group{display: flex;flex-direction: column;gap: 0.4rem;}
.rsz-group[hidden], .rsz-pane[hidden]{display: none;}
.rsz-row{flex-direction: row;align-items: center;gap: 0.6rem;}
.rsz-label{font-size: 0.74rem;font-weight: 700;letter-spacing: 0.06em;text-transform: uppercase;color: var(--rsz-dim);margin: 0;}
.rsz-label-sub{margin-top: 0.8rem;display: block;}
.rsz-label-row{display: flex;align-items: center;justify-content: space-between;}
.rsz-out{font: 700 0.9rem/1 var(--rsz-mono);color: var(--rsz-teal-2);}
.rsz-help{font-size: 0.8rem;color: var(--rsz-dim);line-height: 1.45;}
.rsz-seg{display: flex;background: var(--rsz-panel-2);border-radius: 8px;padding: 3px;gap: 3px;}
.rsz-seg-btn{flex: 1 1 0;border: 0;background: transparent;color: var(--rsz-ink-2);font-size: 0.84rem;font-weight: 600;padding: 0.42rem 0.5rem;border-radius: 6px;cursor: pointer;white-space: nowrap;}
.rsz-seg-btn[aria-pressed="true"]{background: var(--rsz-panel);color: var(--rsz-teal-2);box-shadow: 0 1px 3px rgba(19, 34, 42, 0.14);}
.rsz-seg-btn:focus-visible{outline: 2px solid var(--rsz-teal);outline-offset: 1px;}
.rsz-seg-dark{background: rgba(255, 255, 255, 0.08);}
.rsz-seg-dark .rsz-seg-btn{color: #c4d0d3;}
.rsz-seg-dark .rsz-seg-btn[aria-pressed="true"]{background: #fff;color: var(--rsz-ink);}
.rsz-dims{display: grid;grid-template-columns: 1fr auto 1fr;align-items: end;gap: 0.5rem;}
.rsz-dim{display: flex;flex-direction: column;gap: 0.3rem;margin: 0;font-size: 0.78rem;font-weight: 600;color: var(--rsz-ink-2);}
.rsz-dim-wide{margin-bottom: 0.6rem;}
.rsz-input{width: 100%;border: 1px solid var(--rsz-line-2);border-radius: 8px;padding: 0.5rem 0.65rem;font: 600 1rem/1.2 var(--rsz-mono);color: var(--rsz-ink);background: #fff;}
.rsz-input:focus{border-color: var(--rsz-teal);outline: 2px solid var(--rsz-teal-soft);}
.rsz-select{font-family: inherit;font-size: 0.92rem;}
.rsz-lock{display: flex;flex-direction: column;align-items: center;gap: 0.15rem;border: 1px solid var(--rsz-line-2);background: var(--rsz-panel);border-radius: 8px;padding: 0.35rem 0.45rem;cursor: pointer;color: var(--rsz-dim);font-size: 0.66rem;font-weight: 700;line-height: 1.1;}
.rsz-lock[aria-pressed="true"]{border-color: var(--rsz-teal);background: var(--rsz-teal-soft);color: var(--rsz-teal-2);}
.rsz-lock-ico{position: relative;width: 22px;height: 10px;}
.rsz-lock-ico::before, .rsz-lock-ico::after{content: "";position: absolute;top: 0;width: 11px;height: 10px;border: 2px solid currentColor;border-radius: 5px;}
.rsz-lock-ico::before{left: 0;}
.rsz-lock-ico::after{right: 0;}
.rsz-lock[aria-pressed="false"] .rsz-lock-ico::before{left: -3px;}
.rsz-lock[aria-pressed="false"] .rsz-lock-ico::after{right: -3px;}
.rsz-chips{display: flex;flex-wrap: wrap;gap: 0.35rem;}
.rsz-presets{display: grid;grid-template-columns: repeat(2, 1fr);}
.rsz-chip{border: 1px solid var(--rsz-line);background: var(--rsz-panel);border-radius: 7px;padding: 0.35rem 0.6rem;font: 600 0.82rem/1.2 var(--rsz-mono);color: var(--rsz-ink);cursor: pointer;text-align: left;}
.rsz-chip small{display: block;font: 500 0.7rem/1.3 system-ui, sans-serif;color: var(--rsz-dim);}
.rsz-chip:hover{border-color: var(--rsz-line-2);}
.rsz-chip[aria-pressed="true"]{border-color: var(--rsz-teal);background: var(--rsz-teal-soft);color: var(--rsz-teal-2);}
.rsz-fits{display: grid;grid-template-columns: repeat(3, 1fr);gap: 0.4rem;}
.rsz-fit{display: flex;flex-direction: column;align-items: center;gap: 0.35rem;border: 1px solid var(--rsz-line);background: var(--rsz-panel);border-radius: 8px;padding: 0.55rem 0.3rem;font-size: 0.76rem;font-weight: 600;color: var(--rsz-ink-2);cursor: pointer;}
.rsz-fit[aria-pressed="true"]{border-color: var(--rsz-teal);background: var(--rsz-teal-soft);color: var(--rsz-teal-2);}
.rsz-ico{position: relative;display: block;width: 40px;height: 26px;border: 2px solid currentColor;border-radius: 3px;overflow: hidden;}
.rsz-ico::after{content: "";position: absolute;top: 50%;left: 50%;width: 14px;height: 14px;border-radius: 50%;background: currentColor;opacity: 0.55;transform: translate(-50%, -50%);}
.rsz-ico.is-cover::after{width: 30px;height: 30px;}
.rsz-ico.is-contain{background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(15, 118, 110, 0.18) 9px 27px, transparent 27px);}
.rsz-ico.is-contain::after{width: 22px;height: 22px;}
.rsz-ico.is-stretch::after{width: 34px;height: 18px;}
.rsz-swatch{width: 40px;height: 32px;border: 1px solid var(--rsz-line-2);border-radius: 6px;padding: 2px;background: #fff;cursor: pointer;}
.rsz-hex{font: 0.84rem var(--rsz-mono);color: var(--rsz-ink-2);}
.rsz-split{display: grid;grid-template-columns: 1fr 1fr;gap: 0.7rem;}
.rsz-range{width: 100%;accent-color: var(--rsz-teal);}
.rsz-group.is-off .rsz-range, .rsz-group.is-off .rsz-out{opacity: 0.4;}
.rsz-actions{display: flex;gap: 0.5rem;padding-top: 0.2rem;}
.rsz-btn{flex: 1 1 auto;border: 1px solid var(--rsz-line-2);background: var(--rsz-panel);color: var(--rsz-ink);border-radius: 8px;padding: 0.65rem 1rem;font-weight: 700;font-size: 0.92rem;cursor: pointer;}
.rsz-btn-main{background: var(--rsz-teal);border-color: var(--rsz-teal);color: #fff;}
.rsz-btn-main:hover:not(:disabled){background: var(--rsz-teal-2);}
.rsz-btn:disabled{opacity: 0.5;cursor: not-allowed;}
.rsz-btn-quiet{flex: 0 0 auto;color: var(--rsz-dim);}
.rsz-stage{background: var(--rsz-stage);border-radius: 12px;padding: 0.8rem;display: flex;flex-direction: column;gap: 0.7rem;min-width: 0;}
.rsz-stage-bar{display: flex;align-items: center;justify-content: space-between;gap: 0.6rem;}
.rsz-busy{font: 600 0.78rem var(--rsz-mono);color: #8fd3cb;}
.rsz-frame{display: flex;align-items: center;justify-content: center;min-height: 320px;max-height: 560px;border-radius: 8px;overflow: hidden;background-color: #26333a;background-image: linear-gradient(45deg, #2e3c43 25%, transparent 25%), linear-gradient(-45deg, #2e3c43 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #2e3c43 75%), linear-gradient(-45deg, transparent 75%, #2e3c43 75%);background-size: 18px 18px;background-position: 0 0, 0 9px, 9px -9px, -9px 0;}
.rsz-img{display: block;max-width: 100%;max-height: 540px;object-fit: contain;}
.rsz-img:not([src]){visibility: hidden;}
.rsz-frame.is-actual{display: block;overflow: auto;}
.rsz-frame.is-actual .rsz-img{max-width: none;max-height: none;}
.rsz-stats{display: grid;grid-template-columns: repeat(4, 1fr);gap: 1px;margin: 0;background: rgba(255, 255, 255, 0.08);border-radius: 8px;overflow: hidden;}
.rsz-stats div{background: var(--rsz-stage);padding: 0.55rem 0.7rem;}
.rsz-stats-wide{grid-column: 1 / -1;}
.rsz-stats dt{font-size: 0.68rem;font-weight: 700;letter-spacing: 0.06em;text-transform: uppercase;color: #8a9ba1;}
.rsz-stats dd{margin: 0.15rem 0 0;font: 700 0.92rem/1.3 var(--rsz-mono);color: #fff;}
.rsz-stats dd.is-down{color: #7ee0b5;}
.rsz-stats dd.is-up{color: #f6c177;}
.rsz-warn{margin: 0;font-size: 0.84rem;line-height: 1.5;color: #f6c177;background: rgba(246, 193, 119, 0.1);border-left: 3px solid #f6c177;border-radius: 0 6px 6px 0;padding: 0.5rem 0.75rem;}
.rsz-warn[hidden]{display: none;}
.rsz-article{margin: 0 auto 2.4rem;color: var(--rsz-ink-2);font-size: 1rem;line-height: 1.7;}
.rsz-article h2{font-size: 1.45rem;font-weight: 800;color: var(--rsz-ink);margin: 2.4rem 0 0.8rem;line-height: 1.3;}
.rsz-article h2:first-child{margin-top: 0.4rem;}
.rsz-article h3{font-size: 1.12rem;font-weight: 700;color: var(--rsz-ink);margin: 1.8rem 0 0.6rem;}
.rsz-article p{margin: 0 0 1rem;}
.rsz-article strong{color: var(--rsz-ink);}
.rsz-article a{color: var(--rsz-teal-2);font-weight: 600;}
.rsz-article code{font-family: var(--rsz-mono);font-size: 0.88em;color: var(--rsz-ink);}
.rsz-code{background: var(--rsz-stage);color: #d6e4e6;border-radius: 10px;padding: 0.9rem 1.1rem;margin: 0 0 1rem;overflow-x: auto;font-size: 0.9rem;line-height: 1.6;}
.rsz-code code{color: inherit;font-size: inherit;}
.rsz-scroll{overflow-x: auto;margin: 0 0 1rem;border: 1px solid var(--rsz-line);border-radius: 10px;}
.rsz-table{width: 100%;border-collapse: collapse;font-size: 0.9rem;min-width: 600px;background: var(--rsz-panel);}
.rsz-table th{text-align: left;font-size: 0.74rem;letter-spacing: 0.05em;text-transform: uppercase;color: var(--rsz-dim);background: var(--rsz-panel-2);padding: 0.6rem 0.8rem;}
.rsz-table td{padding: 0.6rem 0.8rem;border-top: 1px solid var(--rsz-line);vertical-align: top;}
.rsz-table td:first-child{font-weight: 600;color: var(--rsz-ink);}
.rsz-table td:nth-child(2){font-family: var(--rsz-mono);font-size: 0.86rem;color: var(--rsz-teal-2);white-space: nowrap;}
.rsz-table-limits td:nth-child(2){font-family: inherit;font-size: inherit;color: inherit;white-space: normal;}
.rsz-shapes{display: grid;grid-template-columns: repeat(3, 1fr);gap: 0.9rem;margin: 0.4rem 0 1.2rem;}
.rsz-shape{margin: 0;background: var(--rsz-panel);border: 1px solid var(--rsz-line);border-radius: 12px;padding: 0.9rem;font-size: 0.92rem;line-height: 1.6;}
.rsz-shape-demo{position: relative;height: 92px;margin-bottom: 0.8rem;border: 2px solid var(--rsz-ink);border-radius: 4px;overflow: hidden;background: var(--rsz-panel-2);}
.rsz-shape-demo span{position: absolute;top: 50%;left: 50%;border-radius: 50%;background: radial-gradient(circle at 40% 35%, #34a59a, var(--rsz-teal-2));transform: translate(-50%, -50%);}
.rsz-shape-demo.is-cover span{width: 150%;height: 0;padding-bottom: 150%;}
.rsz-shape-demo.is-contain{background: #fff;}
.rsz-shape-demo.is-contain span{width: 84px;height: 84px;}
.rsz-shape-demo.is-stretch span{width: 96%;height: 84px;}
.rsz-mp{list-style: none;padding: 0;margin: 0 0 1rem;border: 1px solid var(--rsz-line);border-radius: 10px;overflow: hidden;}
.rsz-mp li{display: flex;flex-wrap: wrap;gap: 0.2rem 1.2rem;padding: 0.55rem 0.9rem;background: var(--rsz-panel);}
.rsz-mp li + li{border-top: 1px solid var(--rsz-line);}
.rsz-mp code{min-width: 120px;font-weight: 700;color: var(--rsz-teal-2);}
@media (max-width: 991px){.rsz-bench{grid-template-columns: 1fr;}.rsz-stats{grid-template-columns: repeat(2, 1fr);}.rsz-shapes{grid-template-columns: 1fr;}}
@media (max-width: 480px){.rsz-drop{flex-direction: column;text-align: center;padding: 2rem 1rem;}.rsz-drop.is-loaded{flex-direction: row;text-align: left;}.rsz-split{grid-template-columns: 1fr;}.rsz-frame{min-height: 220px;}}