:root{--p2j-canvas: #f5f8fa;--p2j-panel: #ffffff;--p2j-panel-2: #eef3f6;--p2j-panel-3: #e2ebef;--p2j-line: #dde5ea;--p2j-line-2: #c2d1da;--p2j-ink: #0d1b24;--p2j-ink-2: #33485a;--p2j-dim: #63798a;--p2j-teal: #0d7d76;--p2j-teal-2: #0a5f59;--p2j-teal-soft: #eaf6f4;--p2j-amber: #b45309;--p2j-amber-soft: #fdf5e9;--p2j-green: #15803d;--p2j-green-soft: #eef8f1;--p2j-rose: #be123c;--p2j-rose-soft: #fdf1f4;--p2j-grad: linear-gradient(115deg, #0d7d76 0%, #12867f 46%, #1a6f9e 100%);--p2j-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;--primary: #0d7d76;--primary-dark: #0a5f59;--border: #dde5ea;--surface: #ffffff;--surface-muted: #f2f7f8;--shadow-soft: 0 2px 10px rgba(13, 27, 36, 0.06);--text-main: #0d1b24;--text-muted: #63798a;}
.p2j-sr{position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;}
.p2j-app{background: var(--p2j-canvas);border: 1px solid var(--p2j-line);border-radius: 1rem;padding: 0.9rem;margin-bottom: 2.4rem;}
.p2j-head{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 0.5rem 0.9rem;margin-bottom: 0.85rem;}
.p2j-byline{display: flex;flex-wrap: wrap;align-items: center;gap: 0.25rem 0.65rem;font-size: 0.82rem;color: var(--p2j-dim);}
.p2j-byline-author a, .p2j-byline-author .author-link{color: var(--p2j-teal-2);font-weight: 600;text-decoration: none;}
.p2j-byline-author a:hover, .p2j-byline-author .author-link:hover{text-decoration: underline;}
.p2j-byline-updated{color: var(--p2j-dim);opacity: 0.85;}
.p2j-badges{display: flex;flex-wrap: wrap;gap: 0.35rem;list-style: none;margin: 0;padding: 0;}
.p2j-badges li{font-size: 0.74rem;letter-spacing: 0.01em;color: var(--p2j-ink-2);background: var(--p2j-panel);border: 1px solid var(--p2j-line);border-radius: 999px;padding: 0.22rem 0.62rem;}
.p2j-badges b{color: var(--p2j-teal-2);font-weight: 600;}
.p2j-drop{position: relative;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;min-height: 190px;padding: 1.8rem 1.1rem;background: var(--p2j-panel);border: 2px dashed var(--p2j-line-2);border-radius: 0.9rem;cursor: pointer;transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;-webkit-tap-highlight-color: transparent;}
.p2j-drop:hover, .p2j-drop:focus-visible{border-color: var(--p2j-teal);background: var(--p2j-teal-soft);outline: none;box-shadow: 0 0 0 3px rgba(13, 125, 118, 0.14);}
.p2j-drop.is-over{border-color: var(--p2j-teal);border-style: solid;background: var(--p2j-teal-soft);}
.p2j-file{position: absolute;width: 1px;height: 1px;opacity: 0;pointer-events: none;}
.p2j-drop-icon{width: 52px;height: 52px;margin-bottom: 0.85rem;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d7d76' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2.5'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.6'/%3E%3Cpath d='M21 15.5 16 10.5 5.5 21'/%3E%3C/svg%3E") no-repeat center / 100%;}
.p2j-drop-title{margin: 0 0 0.2rem;font-size: 1.06rem;font-weight: 600;color: var(--p2j-ink);}
.p2j-drop-hint{margin: 0;font-size: 0.84rem;color: var(--p2j-dim);}
.p2j-drop[hidden]{display: none;}
.p2j-work{margin-top: 0.9rem;border-radius: 0.85rem;}
.p2j-work.is-drag{outline: 2px dashed var(--p2j-teal);outline-offset: 5px;}
.p2j-ctrl{display: grid;grid-template-columns: 1fr;gap: 0.75rem;margin-bottom: 0.75rem;}
@media (min-width: 768px){.p2j-ctrl{grid-template-columns: 1fr 1fr;gap: 0.9rem;}}
.p2j-ctrl-block{background: var(--p2j-panel);border: 1px solid var(--p2j-line);border-radius: 0.8rem;padding: 0.85rem 0.95rem;box-shadow: var(--shadow-soft);}
.p2j-ctrl-top{display: flex;align-items: baseline;justify-content: space-between;gap: 0.6rem;margin-bottom: 0.55rem;}
.p2j-ctrl-label{font-size: 0.86rem;font-weight: 600;color: var(--p2j-ink);}
.p2j-ctrl-out{font-family: var(--p2j-mono);font-size: 1.02rem;font-weight: 700;color: var(--p2j-teal-2);background: var(--p2j-teal-soft);border-radius: 0.4rem;padding: 0.08rem 0.5rem;}
.p2j-ctrl-hint{margin: 0.6rem 0 0;font-size: 0.79rem;line-height: 1.5;color: var(--p2j-dim);}
.p2j-range{width: 100%;height: 6px;margin: 0.35rem 0 0.75rem;-webkit-appearance: none;appearance: none;background: linear-gradient(90deg, var(--p2j-teal) 0%, var(--p2j-teal) var(--fill, 86%), var(--p2j-panel-3) var(--fill, 86%), var(--p2j-panel-3) 100%);border-radius: 999px;cursor: pointer;}
.p2j-range::-webkit-slider-thumb{-webkit-appearance: none;appearance: none;width: 20px;height: 20px;border-radius: 50%;background: var(--p2j-panel);border: 3px solid var(--p2j-teal);box-shadow: 0 1px 4px rgba(13, 27, 36, 0.2);cursor: pointer;}
.p2j-range::-moz-range-thumb{width: 20px;height: 20px;border-radius: 50%;background: var(--p2j-panel);border: 3px solid var(--p2j-teal);box-shadow: 0 1px 4px rgba(13, 27, 36, 0.2);cursor: pointer;}
.p2j-range:focus-visible{outline: none;box-shadow: 0 0 0 3px rgba(13, 125, 118, 0.2);}
.p2j-seg{display: flex;flex-wrap: wrap;gap: 0.3rem;}
.p2j-seg-btn{font-size: 0.78rem;font-weight: 500;color: var(--p2j-ink-2);background: var(--p2j-panel-2);border: 1px solid var(--p2j-line);border-radius: 999px;padding: 0.28rem 0.68rem;cursor: pointer;transition: background 0.15s, color 0.15s, border-color 0.15s;}
.p2j-seg-btn:hover{border-color: var(--p2j-line-2);background: var(--p2j-panel-3);}
.p2j-seg-btn.is-on{color: #fff;background: var(--p2j-teal);border-color: var(--p2j-teal);}
.p2j-swatch-row{display: flex;flex-wrap: wrap;align-items: center;gap: 0.6rem;}
.p2j-swatch{width: 46px;height: 40px;padding: 2px;background: var(--p2j-panel);border: 1px solid var(--p2j-line);border-radius: 0.5rem;cursor: pointer;}
.p2j-swatch:focus-visible{outline: none;border-color: var(--p2j-teal);box-shadow: 0 0 0 3px rgba(13, 125, 118, 0.18);}
.p2j-hex{font-family: var(--p2j-mono);font-size: 0.84rem;color: var(--p2j-dim);text-transform: lowercase;}
.p2j-mattes{display: flex;flex-wrap: wrap;gap: 0.35rem;}
.p2j-chip{width: 30px;height: 30px;border-radius: 50%;background: var(--chip, #fff);border: 1px solid var(--p2j-line-2);cursor: pointer;transition: transform 0.15s, box-shadow 0.15s;}
.p2j-chip:hover{transform: translateY(-1px);}
.p2j-chip.is-on{box-shadow: 0 0 0 2px var(--p2j-panel), 0 0 0 4px var(--p2j-teal);}
.p2j-bar{display: flex;flex-wrap: wrap;gap: 0.4rem;margin-bottom: 0.7rem;}
.p2j-btn{display: inline-flex;align-items: center;justify-content: center;min-height: 40px;font-size: 0.86rem;font-weight: 600;color: var(--p2j-ink-2);background: var(--p2j-panel);border: 1px solid var(--p2j-line);border-radius: 0.55rem;padding: 0.4rem 0.95rem;cursor: pointer;transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;-webkit-tap-highlight-color: transparent;}
.p2j-btn:hover:not(:disabled){border-color: var(--p2j-line-2);background: var(--p2j-panel-2);}
.p2j-btn:disabled{opacity: 0.5;cursor: not-allowed;}
.p2j-btn:focus-visible{outline: none;box-shadow: 0 0 0 3px rgba(13, 125, 118, 0.22);}
.p2j-btn.is-primary{color: #fff;background: var(--p2j-grad);border-color: transparent;}
.p2j-btn.is-primary:hover:not(:disabled){filter: brightness(1.07);background: var(--p2j-grad);}
.p2j-btn.is-ghost{background: transparent;color: var(--p2j-dim);}
.p2j-btn.is-busy{pointer-events: none;opacity: 0.75;}
.p2j-note{min-height: 1.2rem;font-size: 0.83rem;line-height: 1.5;color: var(--p2j-dim);margin-bottom: 0.7rem;}
.p2j-note.is-warn{color: var(--p2j-amber);}
.p2j-note.is-bad{color: var(--p2j-rose);}
.p2j-totals{display: grid;grid-template-columns: repeat(2, 1fr);gap: 0.5rem;margin-bottom: 0.75rem;}
@media (min-width: 640px){.p2j-totals{grid-template-columns: repeat(4, 1fr);}}
.p2j-total{background: var(--p2j-panel);border: 1px solid var(--p2j-line);border-radius: 0.7rem;padding: 0.6rem 0.75rem;}
.p2j-total.is-win{background: var(--p2j-green-soft);border-color: rgba(21, 128, 61, 0.25);}
.p2j-total-k{display: block;font-size: 0.72rem;text-transform: uppercase;letter-spacing: 0.05em;color: var(--p2j-dim);margin-bottom: 0.2rem;}
.p2j-total-v{display: block;font-family: var(--p2j-mono);font-size: 1.02rem;font-weight: 700;color: var(--p2j-ink);}
.p2j-total.is-win .p2j-total-v{color: var(--p2j-green);}
.p2j-compare{display: grid;grid-template-columns: 1fr 1fr;gap: 0.6rem;margin-bottom: 0.75rem;}
@media (min-width: 640px){.p2j-compare{gap: 0.9rem;}}
.p2j-pane{display: flex;flex-direction: column;background: var(--p2j-panel);border: 1px solid var(--p2j-line);border-radius: 0.8rem;overflow: hidden;box-shadow: var(--shadow-soft);min-width: 0;}
.p2j-pane-head{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 0.2rem 0.5rem;padding: 0.5rem 0.7rem;border-bottom: 1px solid var(--p2j-line);background: var(--p2j-panel-2);}
.p2j-pane-title{display: inline-flex;align-items: center;gap: 0.35rem;font-size: 0.78rem;font-weight: 600;color: var(--p2j-ink);}
.p2j-dot{width: 8px;height: 8px;border-radius: 50%;background: var(--p2j-amber);}
.p2j-dot.is-out{background: var(--p2j-teal);}
.p2j-pane-meta{font-family: var(--p2j-mono);font-size: 0.72rem;color: var(--p2j-dim);}
.p2j-frame{position: relative;aspect-ratio: 4 / 3;background: var(--p2j-panel-2);overflow: hidden;}
.p2j-frame.is-checker{background-color: #fff;background-image: linear-gradient(45deg, #e2ebef 25%, transparent 25%), linear-gradient(-45deg, #e2ebef 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e2ebef 75%), linear-gradient(-45deg, transparent 75%, #e2ebef 75%);background-size: 16px 16px;background-position: 0 0, 0 8px, 8px -8px, -8px 0;}
.p2j-img{width: 100%;height: 100%;object-fit: contain;display: block;}
.p2j-img[src=""]{visibility: hidden;}
.p2j-list{list-style: none;margin: 0;padding: 0;display: flex;flex-direction: column;gap: 0.4rem;}
.p2j-row{display: grid;grid-template-columns: 46px minmax(0, 1fr) auto;align-items: center;gap: 0.6rem;background: var(--p2j-panel);border: 1px solid var(--p2j-line);border-radius: 0.7rem;padding: 0.5rem 0.6rem;cursor: pointer;transition: border-color 0.15s, box-shadow 0.15s;}
.p2j-row:hover{border-color: var(--p2j-line-2);}
.p2j-row.is-active{border-color: var(--p2j-teal);box-shadow: 0 0 0 2px rgba(13, 125, 118, 0.14);}
.p2j-thumb{width: 46px;height: 46px;object-fit: cover;border-radius: 0.45rem;border: 1px solid var(--p2j-line);background: var(--p2j-panel-2);}
.p2j-cell{min-width: 0;}
.p2j-name{display: block;font-size: 0.85rem;font-weight: 600;color: var(--p2j-ink);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.p2j-sizes{display: flex;flex-wrap: wrap;align-items: center;gap: 0.3rem 0.5rem;margin-top: 0.15rem;font-family: var(--p2j-mono);font-size: 0.74rem;color: var(--p2j-dim);}
.p2j-delta{font-weight: 700;border-radius: 999px;padding: 0.05rem 0.42rem;}
.p2j-delta.is-good{color: var(--p2j-green);background: var(--p2j-green-soft);}
.p2j-delta.is-flat{color: var(--p2j-amber);background: var(--p2j-amber-soft);}
.p2j-delta.is-bad{color: var(--p2j-rose);background: var(--p2j-rose-soft);}
.p2j-row-actions{display: flex;align-items: center;gap: 0.3rem;}
.p2j-mini{display: inline-flex;align-items: center;justify-content: center;gap: 0.32rem;min-height: 34px;font-size: 0.78rem;font-weight: 600;color: #fff;background: var(--p2j-teal);border: 1px solid var(--p2j-teal);border-radius: 0.45rem;padding: 0.24rem 0.68rem;cursor: pointer;transition: background 0.15s, border-color 0.15s, opacity 0.15s;}
.p2j-mini:hover:not(:disabled){background: var(--p2j-teal-2);border-color: var(--p2j-teal-2);}
.p2j-mini:focus-visible{outline: none;box-shadow: 0 0 0 3px rgba(13, 125, 118, 0.28);}
.p2j-mini:disabled{color: var(--p2j-dim);background: var(--p2j-panel-2);border-color: var(--p2j-line);opacity: 0.7;cursor: not-allowed;}
.p2j-mini-i{width: 14px;height: 14px;flex: none;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 11 5 5 5-5'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E") no-repeat center / 100%;}
.p2j-mini:disabled .p2j-mini-i{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363798a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 11 5 5 5-5'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E");}
@media (max-width: 479px){.p2j-mini-t{position: absolute;width: 1px;height: 1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;}.p2j-mini{padding: 0.24rem 0.5rem;}}
.p2j-mini.is-x{color: var(--p2j-dim);background: var(--p2j-panel-2);border-color: var(--p2j-line);font-size: 1rem;line-height: 1;padding: 0.24rem 0.55rem;}
.p2j-mini.is-x:hover:not(:disabled){color: var(--p2j-rose);background: var(--p2j-rose-soft);border-color: rgba(190, 18, 60, 0.3);}
.p2j-flash{position: fixed;left: 50%;bottom: 1.4rem;transform: translate(-50%, 0.6rem);max-width: calc(100vw - 2rem);font-size: 0.86rem;color: #fff;background: var(--p2j-ink);border-radius: 0.6rem;padding: 0.6rem 1rem;box-shadow: 0 8px 24px rgba(13, 27, 36, 0.22);opacity: 0;pointer-events: none;transition: opacity 0.2s, transform 0.2s;z-index: 9999;}
.p2j-flash.is-on{opacity: 1;transform: translate(-50%, 0);}
.p2j-flash.is-bad{background: var(--p2j-rose);}
.p2j-article{margin: 0 auto 2.4rem;color: var(--p2j-ink-2);font-size: 1rem;line-height: 1.72;}
.p2j-article h2{font-size: 1.5rem;font-weight: 700;line-height: 1.3;color: var(--p2j-ink);margin: 0 0 0.9rem;}
.p2j-article h3{font-size: 1.16rem;font-weight: 700;line-height: 1.35;color: var(--p2j-ink);margin: 2rem 0 0.7rem;}
.p2j-article p{margin: 0 0 1rem;}
.p2j-article code{font-family: var(--p2j-mono);font-size: 0.88em;color: var(--p2j-teal-2);background: var(--p2j-teal-soft);border-radius: 0.3rem;padding: 0.08rem 0.34rem;}
.p2j-article strong{color: var(--p2j-ink);font-weight: 600;}
.p2j-scroll{overflow-x: auto;-webkit-overflow-scrolling: touch;margin: 0 0 1.1rem;border: 1px solid var(--p2j-line);border-radius: 0.7rem;background: var(--p2j-panel);}
.p2j-table{width: 100%;min-width: 520px;border-collapse: collapse;font-size: 0.88rem;}
.p2j-table th{text-align: left;font-weight: 600;color: var(--p2j-ink);background: var(--p2j-panel-2);padding: 0.6rem 0.8rem;border-bottom: 1px solid var(--p2j-line);white-space: nowrap;}
.p2j-table td{padding: 0.55rem 0.8rem;border-bottom: 1px solid var(--p2j-line);vertical-align: top;}
.p2j-table tr:last-child td{border-bottom: 0;}
.p2j-table td:first-child{font-family: var(--p2j-mono);font-weight: 600;color: var(--p2j-teal-2);white-space: nowrap;}
.p2j-callout{background: var(--p2j-amber-soft);border: 1px solid rgba(180, 83, 9, 0.2);border-left: 3px solid var(--p2j-amber);border-radius: 0.6rem;padding: 0.85rem 1rem;margin: 0 0 1.2rem;}
.p2j-callout-k{display: block;font-size: 0.74rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.06em;color: var(--p2j-amber);margin-bottom: 0.4rem;}
.p2j-callout p{margin: 0;font-size: 0.94rem;}
.p2j-steps{margin: 0 0 1.2rem;padding-left: 1.2rem;}
.p2j-steps li{margin-bottom: 0.6rem;padding-left: 0.25rem;}
.p2j-limits{list-style: none;margin: 0 0 1.2rem;padding: 0;}
.p2j-limits li{position: relative;padding-left: 1.15rem;margin-bottom: 0.6rem;}
.p2j-limits li::before{content: "";position: absolute;left: 0;top: 0.62em;width: 6px;height: 6px;border-radius: 50%;background: var(--p2j-teal);}