:root{--phf-bg: #f3f4f9;--phf-panel: #ffffff;--phf-panel-2: #eef0f7;--phf-line: #dde0ec;--phf-line-2: #c3c8dc;--phf-ink: #1b1e33;--phf-ink-2: #444a68;--phf-dim: #6e7493;--phf-brand: #4f5b93;--phf-brand-2: #39436f;--phf-brand-soft: #eceefa;--phf-accent: #8892bf;--phf-code: #1c1e2e;--phf-code-2: #252839;--phf-code-ink: #e2e4f2;--phf-code-dim: #6c7194;--phf-ok: #2f7d4f;--phf-ok-soft: #eaf6ef;--phf-warn: #a24a12;--phf-warn-soft: #fdf2e8;--phf-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--primary: #4f5b93;--primary-dark: #39436f;--border: #dde0ec;--surface: #ffffff;--surface-muted: #f3f4f9;--shadow-soft: 0 2px 10px rgba(27, 30, 51, 0.06);--text-main: #1b1e33;--text-muted: #6e7493;}
.phf-sr{position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;}
.phf-app{background: var(--phf-bg);border: 1px solid var(--phf-line);border-radius: 14px;padding: 1rem;margin-bottom: 2.5rem;}
.phf-top{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 0.5rem 1rem;margin-bottom: 0.85rem;}
.phf-byline{display: flex;flex-wrap: wrap;align-items: baseline;gap: 0.25rem 0.8rem;font-size: 0.8rem;color: var(--phf-dim);}
.phf-byline-author a{color: var(--phf-brand-2);font-weight: 600;text-decoration: none;}
.phf-byline-author a:hover{text-decoration: underline;}
.phf-chips{display: flex;flex-wrap: wrap;gap: 0.4rem;list-style: none;margin: 0;padding: 0;}
.phf-chips li{font-size: 0.75rem;font-weight: 600;color: var(--phf-ink-2);background: var(--phf-panel);border: 1px solid var(--phf-line);border-radius: 6px;padding: 0.2rem 0.6rem;}
.phf-chips kbd{font-family: var(--phf-mono);font-size: 0.72rem;color: var(--phf-brand-2);background: none;padding: 0;box-shadow: none;font-weight: 700;}
.phf-toolbar{display: flex;flex-wrap: wrap;align-items: center;gap: 0.45rem;margin-bottom: 0.75rem;}
.phf-toolbar-end{display: flex;flex-wrap: wrap;gap: 0.45rem;margin-left: auto;}
.phf-btn{appearance: none;display: inline-flex;align-items: center;gap: 0.4rem;background: var(--phf-panel);border: 1px solid var(--phf-line-2);color: var(--phf-ink-2);font-size: 0.83rem;font-weight: 600;line-height: 1.4;padding: 0.48rem 0.9rem;border-radius: 8px;cursor: pointer;white-space: nowrap;transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;}
.phf-btn:hover{border-color: var(--phf-brand);color: var(--phf-brand-2);background: var(--phf-brand-soft);}
.phf-btn:focus-visible{outline: 2px solid var(--phf-brand);outline-offset: 2px;}
.phf-btn.is-main{background: var(--phf-brand);border-color: var(--phf-brand);color: #ffffff;padding: 0.48rem 1.25rem;}
.phf-btn.is-main:hover{background: var(--phf-brand-2);border-color: var(--phf-brand-2);color: #ffffff;}
.phf-btn.is-done{background: var(--phf-ok-soft);border-color: var(--phf-ok);color: var(--phf-ok);}
.phf-btn kbd{font-family: var(--phf-mono);font-size: 0.68rem;background: rgba(255, 255, 255, 0.18);color: inherit;border-radius: 4px;padding: 0.05rem 0.35rem;box-shadow: none;}
.phf-file{display: none;}
.phf-panes{display: grid;grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);gap: 0.75rem;}
.phf-pane{display: flex;flex-direction: column;background: var(--phf-panel);border: 1px solid var(--phf-line);border-radius: 10px;overflow: hidden;min-width: 0;}
.phf-pane.is-out{background: var(--phf-code);border-color: var(--phf-code);}
.phf-pane-head{display: flex;align-items: center;justify-content: space-between;gap: 0.5rem;padding: 0.5rem 0.8rem;border-bottom: 1px solid var(--phf-line);font-size: 0.78rem;}
.phf-pane.is-out .phf-pane-head{border-bottom-color: var(--phf-code-2);}
.phf-pane-title{font-weight: 700;color: var(--phf-ink);margin: 0;}
.phf-pane.is-out .phf-pane-title{color: var(--phf-code-ink);}
.phf-pane-meta{color: var(--phf-dim);font-family: var(--phf-mono);font-size: 0.72rem;}
.phf-pane.is-out .phf-pane-meta{color: var(--phf-code-dim);}
.phf-input{flex: 1;width: 100%;min-height: 460px;border: 0;resize: vertical;padding: 0.8rem 0.9rem;font-family: var(--phf-mono);font-size: 0.82rem;line-height: 1.6;color: var(--phf-ink);background: var(--phf-panel);tab-size: 4;white-space: pre;overflow: auto;}
.phf-input:focus{outline: none;box-shadow: inset 0 0 0 2px var(--phf-accent);}
.phf-input.is-drop{background: var(--phf-brand-soft);outline: 2px dashed var(--phf-brand);outline-offset: -6px;}
.phf-view{display: flex;flex: 1;min-height: 460px;max-height: 640px;overflow-y: auto;font-family: var(--phf-mono);font-size: 0.82rem;line-height: 1.6;}
.phf-gutter{flex: 0 0 auto;margin: 0;padding: 0.8rem 0.6rem 0.8rem 0.8rem;text-align: right;color: var(--phf-code-dim);user-select: none;white-space: pre;font: inherit;border-right: 1px solid var(--phf-code-2);background: transparent;}
.phf-out{flex: 1;margin: 0;padding: 0.8rem 0.9rem;color: var(--phf-code-ink);background: transparent;white-space: pre;overflow-x: auto;overflow-y: visible;font: inherit;tab-size: 4;min-width: 0;}
.phf-k{color: #c9a5f2;}
.phf-v{color: #8fb4ff;}
.phf-s{color: #b8dd8f;}
.phf-c{color: #7d83a6;font-style: italic;}
.phf-n{color: #f2a072;}
.phf-t{color: #ff9fb0;font-weight: 700;}
.phf-y{color: #ffd27a;}
.phf-note{min-height: 1.4rem;margin: 0.6rem 0 0;font-size: 0.83rem;color: var(--phf-ink-2);}
.phf-note.is-ok{color: var(--phf-ok);}
.phf-note.is-warn{color: var(--phf-warn);}
.phf-lower{display: grid;grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);gap: 0.75rem;margin-top: 0.6rem;}
.phf-rules{background: var(--phf-panel);border: 1px solid var(--phf-line);border-radius: 10px;padding: 0.85rem 1rem;margin: 0;min-width: 0;}
.phf-rules legend{float: left;width: 100%;font-size: 0.9rem;font-weight: 700;color: var(--phf-ink);margin: 0 0 0.6rem;}
.phf-rule-group{clear: both;margin-bottom: 0.7rem;}
.phf-rule-label{display: block;font-size: 0.74rem;font-weight: 700;color: var(--phf-dim);text-transform: uppercase;letter-spacing: 0.04em;margin-bottom: 0.3rem;}
.phf-radios{display: inline-flex;flex-wrap: wrap;border: 1px solid var(--phf-line-2);border-radius: 8px;overflow: hidden;}
.phf-radios label{position: relative;margin: 0;cursor: pointer;}
.phf-radios input{position: absolute;opacity: 0;pointer-events: none;}
.phf-radios span{display: block;padding: 0.32rem 0.75rem;font-size: 0.8rem;font-weight: 600;color: var(--phf-ink-2);border-right: 1px solid var(--phf-line-2);}
.phf-radios label:last-child span{border-right: 0;}
.phf-radios input:checked+span{background: var(--phf-brand);color: #ffffff;}
.phf-radios input:focus-visible+span{outline: 2px solid var(--phf-brand);outline-offset: -2px;}
.phf-check{display: flex;align-items: flex-start;gap: 0.5rem;font-size: 0.83rem;color: var(--phf-ink-2);margin: 0 0 0.4rem;cursor: pointer;}
.phf-check input{margin-top: 0.22rem;accent-color: var(--phf-brand);}
.phf-check code{font-size: 0.78rem;}
.phf-report{background: var(--phf-panel);border: 1px solid var(--phf-line);border-radius: 10px;padding: 0.85rem 1rem;min-width: 0;}
.phf-report h3{font-size: 0.9rem;font-weight: 700;color: var(--phf-ink);margin: 0 0 0.5rem;}
.phf-report h3+ul{margin-bottom: 0.9rem;}
.phf-list{list-style: none;margin: 0;padding: 0;}
.phf-list li{display: flex;justify-content: space-between;align-items: baseline;gap: 0.75rem;font-size: 0.83rem;color: var(--phf-ink-2);padding: 0.32rem 0;border-bottom: 1px dashed var(--phf-line);}
.phf-list li:last-child{border-bottom: 0;}
.phf-list li.is-empty{color: var(--phf-dim);font-style: italic;}
.phf-list li.is-info{color: var(--phf-brand-2);}
.phf-list.is-warn li:not(.is-empty):not(.is-info){color: var(--phf-warn);}
.phf-sec{flex: 0 0 auto;font-family: var(--phf-mono);font-size: 0.7rem;font-weight: 600;color: var(--phf-brand-2);background: var(--phf-brand-soft);border-radius: 4px;padding: 0.08rem 0.4rem;}
.phf-article{margin: 0 auto 2.5rem;color: var(--phf-ink-2);font-size: 1rem;line-height: 1.75;}
.phf-article h2{font-size: 1.6rem;font-weight: 800;color: var(--phf-ink);line-height: 1.3;margin: 0 0 1rem;}
.phf-article h3{font-size: 1.2rem;font-weight: 700;color: var(--phf-ink);margin: 2.2rem 0 0.75rem;}
.phf-article p{margin: 0 0 1rem;}
.phf-article code{font-family: var(--phf-mono);font-size: 0.86em;color: var(--phf-brand-2);background: var(--phf-brand-soft);border-radius: 4px;padding: 0.08rem 0.3rem;}
.phf-pair{display: grid;grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);gap: 0.75rem;margin: 0;}
.phf-pair figure{margin: 0;min-width: 0;}
.phf-pair figcaption{font-size: 0.75rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.05em;color: var(--phf-dim);margin-bottom: 0.35rem;}
.phf-article pre{margin: 0 0 1rem;background: var(--phf-code);color: var(--phf-code-ink);border-radius: 8px;padding: 0.85rem 1rem;font-family: var(--phf-mono);font-size: 0.8rem;line-height: 1.6;overflow-x: auto;white-space: pre;}
.phf-pair pre{margin: 0;height: 100%;}
.phf-article pre code{background: none;color: inherit;padding: 0;font-size: inherit;}
.phf-marks{counter-reset: mk;list-style: none;padding: 0;margin: 3rem 0 2rem;}
.phf-marks li{counter-increment: mk;position: relative;padding: 0 0 0 2.2rem;margin-bottom: 0.65rem;}
.phf-marks li::before{content: counter(mk);position: absolute;left: 0;top: 0.15rem;width: 1.5rem;height: 1.5rem;border-radius: 50%;background: var(--phf-brand);color: #ffffff;font-size: 0.78rem;font-weight: 700;display: flex;align-items: center;justify-content: center;}
.phf-ref{font-family: var(--phf-mono);font-size: 0.78rem;color: var(--phf-dim);white-space: nowrap;}
.phf-cards{display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 0.6rem;margin: 0 0 1rem;}
.phf-card{background: var(--phf-panel);border: 1px solid var(--phf-line);border-left: 3px solid var(--phf-brand);border-radius: 8px;padding: 0.75rem 0.9rem;font-size: 0.92rem;line-height: 1.6;}
.phf-card dt{display: flex;align-items: baseline;gap: 0.5rem;font-weight: 700;color: var(--phf-ink);margin-bottom: 0.25rem;}
.phf-card dd{margin: 0;}
.phf-flag{background: var(--phf-warn-soft);border: 1px solid #f1d3b8;border-radius: 8px;padding: 0.85rem 1rem;margin: 0 0 1rem;}
.phf-flag ul{margin: 0;padding-left: 1.2rem;}
.phf-flag li{margin-bottom: 0.4rem;}
.phf-scroll{overflow-x: auto;margin: 0 0 1rem;}
.phf-table{width: 100%;border-collapse: collapse;font-size: 0.9rem;min-width: 620px;}
.phf-table th{text-align: left;font-size: 0.75rem;text-transform: uppercase;letter-spacing: 0.04em;color: var(--phf-dim);border-bottom: 2px solid var(--phf-line-2);padding: 0.5rem 0.6rem;}
.phf-table td{border-bottom: 1px solid var(--phf-line);padding: 0.6rem;vertical-align: top;}
.phf-table td:first-child{font-weight: 700;color: var(--phf-ink);white-space: nowrap;}
.phf-limits{padding-left: 1.2rem;}
.phf-limits li{margin-bottom: 0.55rem;}
@media (max-width: 991px){.phf-panes{grid-template-columns: 1fr;}.phf-lower{grid-template-columns: 1fr;}.phf-input{min-height: 300px;}.phf-view{min-height: 300px;}}
@media (max-width: 640px){.phf-app{padding: 0.7rem;}.phf-toolbar-end{margin-left: 0;}.phf-pair{grid-template-columns: 1fr;}.phf-cards{grid-template-columns: 1fr;}.phf-article h2{font-size: 1.35rem;}}