:root{--gfp-ink: #1c1915;--gfp-muted: #625a50;--gfp-faint: #9b9184;--gfp-surface: #ffffff;--gfp-paper: #f6f2ea;--gfp-line: #e4dccd;--gfp-red: #b23a1e;--gfp-red-dark: #8a2b14;--gfp-red-soft: #f8e7e1;--gfp-blue: #23415f;--gfp-good: #1f6b4f;--gfp-good-soft: #e3f1ea;--gfp-warn: #93600f;--gfp-warn-soft: #fbf0d9;--gfp-bad: #a1251b;--gfp-bad-soft: #fbe3e0;--gfp-radius: 14px;--gfp-radius-sm: 8px;--gfp-shadow: 0 14px 34px rgba(28,25,21,0.08);--gfp-focus: 0 0 0 3px rgba(178,58,30,0.28);--gfp-mono: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--gfp-h: Georgia,serif;--gfp-b: system-ui,sans-serif;--primary: var(--gfp-red);--primary-dark: var(--gfp-red-dark);--border: var(--gfp-line);--surface: var(--gfp-surface);--shadow-soft: var(--gfp-shadow);--surface-muted: var(--gfp-paper);--text-main: var(--gfp-ink);--text-muted: var(--gfp-muted);}
.gfp-tool{background: var(--gfp-surface);border: 1px solid var(--gfp-line);border-radius: var(--gfp-radius);box-shadow: var(--gfp-shadow);color: var(--gfp-ink);overflow: hidden;margin-bottom: 2.5rem;}
.gfp-byline{display: flex;flex-wrap: wrap;justify-content: space-between;gap: 0.3rem 1rem;padding: 0.75rem 1.4rem;background: var(--gfp-paper);border-bottom: 1px solid var(--gfp-line);font-size: 0.86rem;color: var(--gfp-muted);}
.gfp-byline-author{font-weight: 600;color: var(--gfp-ink);}
.gfp-byline .author-link{color: var(--gfp-red);text-decoration: none;}
.gfp-byline .author-link:hover{text-decoration: underline;}
.gfp-body{display: grid;grid-template-columns: minmax(250px,320px) minmax(0,1fr);}
.gfp-controls{padding: 1.3rem;border-right: 1px solid var(--gfp-line);display: flex;flex-direction: column;gap: 1rem;background: #fdfbf7;}
.gfp-set{border: 0;margin: 0;padding: 0;display: flex;flex-direction: column;gap: 0.6rem;min-width: 0;}
.gfp-set legend,.gfp-legend{font-size: 0.72rem;font-weight: 700;letter-spacing: 0.08em;text-transform: uppercase;color: var(--gfp-red);margin: 0 0 0.15rem;padding: 0;float: none;width: auto;}
.gfp-row{display: flex;gap: 0.6rem;}
.gfp-grow{flex: 1 1 auto;min-width: 0;}
.gfp-field{display: flex;flex-direction: column;gap: 0.3rem;font-size: 0.84rem;color: var(--gfp-muted);margin: 0;}
.gfp-field>span{display: flex;justify-content: space-between;font-weight: 600;}
.gfp-field output{font-family: var(--gfp-mono);color: var(--gfp-ink);font-weight: 500;}
.gfp-field select{width: 100%;padding: 0.5rem 0.6rem;border: 1px solid var(--gfp-line);border-radius: var(--gfp-radius-sm);background: var(--gfp-surface);color: var(--gfp-ink);font-size: 0.92rem;}
.gfp-field select:focus,.gfp-field input:focus,.gfp-textbox textarea:focus,.gfp-out:focus{outline: none;box-shadow: var(--gfp-focus);border-color: var(--gfp-red);}
.gfp-field input[type=range]{width: 100%;accent-color: var(--gfp-red);}
.gfp-swaprow{display: flex;gap: 0.5rem;}
.gfp-swaprow .gfp-btn{flex: 1 1 0;}
.gfp-btn{display: inline-flex;align-items: center;justify-content: center;gap: 0.4rem;padding: 0.5rem 0.95rem;border-radius: var(--gfp-radius-sm);border: 1px solid var(--gfp-red);background: var(--gfp-red);color: #fff;font-weight: 600;font-size: 0.88rem;cursor: pointer;transition: background 0.15s,color 0.15s,border-color 0.15s;}
.gfp-btn:hover{background: var(--gfp-red-dark);border-color: var(--gfp-red-dark);}
.gfp-btn:focus-visible,.gfp-chip:focus-visible,.gfp-tab:focus-visible,.gfp-seg-btn:focus-visible{outline: none;box-shadow: var(--gfp-focus);}
.gfp-btn-ghost{background: var(--gfp-surface);color: var(--gfp-ink);border-color: var(--gfp-line);}
.gfp-btn-ghost:hover{background: var(--gfp-red-soft);border-color: var(--gfp-red);color: var(--gfp-red-dark);}
.gfp-chips{display: flex;flex-wrap: wrap;gap: 0.4rem;}
.gfp-chip{border: 1px solid var(--gfp-line);background: var(--gfp-surface);border-radius: 999px;padding: 0.32rem 0.7rem;font-size: 0.78rem;color: var(--gfp-ink);cursor: pointer;text-align: left;line-height: 1.3;}
.gfp-chip span{color: var(--gfp-faint);}
.gfp-chip:hover{border-color: var(--gfp-red);color: var(--gfp-red-dark);}
.gfp-chip.is-on{background: var(--gfp-ink);border-color: var(--gfp-ink);color: #fff;}
.gfp-chip.is-on span{color: #cfc6b8;}
.gfp-stage{padding: 1.3rem;display: flex;flex-direction: column;gap: 0.9rem;min-width: 0;}
.gfp-stagebar{display: flex;justify-content: space-between;align-items: center;gap: 0.75rem;flex-wrap: wrap;}
.gfp-status{font-size: 0.82rem;color: var(--gfp-muted);display: inline-flex;align-items: center;gap: 0.4rem;}
.gfp-status::before{content: "";width: 8px;height: 8px;border-radius: 50%;background: var(--gfp-faint);}
.gfp-status[data-state=ok]::before{background: var(--gfp-good);}
.gfp-status[data-state=fail]::before{background: var(--gfp-bad);}
.gfp-seg{display: inline-flex;border: 1px solid var(--gfp-line);border-radius: 999px;padding: 2px;background: var(--gfp-paper);}
.gfp-seg-btn{border: 0;background: transparent;padding: 0.25rem 0.8rem;border-radius: 999px;font-size: 0.8rem;font-weight: 600;color: var(--gfp-muted);cursor: pointer;}
.gfp-seg-btn.is-on{background: var(--gfp-surface);color: var(--gfp-ink);box-shadow: 0 1px 3px rgba(28,25,21,0.15);}
.gfp-preview{--pv-bg: #fffdf9;--pv-ink: #1c1915;--pv-muted: #5c544a;--pv-accent: var(--gfp-red);background: var(--pv-bg);color: var(--pv-ink);border: 1px solid var(--gfp-line);border-radius: var(--gfp-radius);padding: clamp(1.2rem,3vw,2.2rem);font-family: var(--gfp-b);font-size: 17px;line-height: 1.6;transition: background 0.2s,color 0.2s;min-height: 320px;overflow-wrap: anywhere;}
.gfp-preview[data-theme=dark]{--pv-bg: #17181c;--pv-ink: #eeeae3;--pv-muted: #aaa398;--pv-accent: #f08a6c;border-color: #2b2d33;}
.gfp-kicker{font-family: var(--gfp-b);font-size: 0.72em;font-weight: 700;letter-spacing: 0.1em;text-transform: uppercase;color: var(--pv-accent);margin: 0 0 0.6em;}
.gfp-h1,.gfp-h2{font-family: var(--gfp-h);font-weight: 700;color: var(--pv-ink);margin: 0 0 0.45em;line-height: 1.15;}
.gfp-h1{font-size: 2.44em;}
.gfp-h2{font-size: 1.56em;margin-top: 1.1em;}
.gfp-p{margin: 0 0 0.9em;color: var(--pv-ink);font-family: inherit;font-size: 1em;line-height: inherit;}
.gfp-p+.gfp-p{color: var(--pv-muted);}
#gfpRest{white-space: pre-line;}
.gfp-ui{display: flex;flex-wrap: wrap;align-items: center;gap: 0.7em;margin-top: 1.3em;padding-top: 1.1em;border-top: 1px dashed var(--gfp-line);font-size: 0.85em;}
.gfp-preview[data-theme=dark] .gfp-ui{border-top-color: #34363d;}
.gfp-ui-btn{background: var(--pv-accent);color: #fff;padding: 0.45em 1.1em;border-radius: 6px;font-weight: 700;}
.gfp-preview[data-theme=dark] .gfp-ui-btn{color: #17181c;}
.gfp-ui-tag{border: 1px solid var(--pv-accent);color: var(--pv-accent);padding: 0.15em 0.6em;border-radius: 999px;font-size: 0.85em;font-weight: 600;}
.gfp-ui-meta{color: var(--pv-muted);}
.gfp-ui-meta strong{color: var(--pv-ink);}
.gfp-glyphs{display: grid;grid-template-columns: 1fr 1fr;gap: 0.6rem;}
.gfp-glyph{border: 1px solid var(--gfp-line);border-radius: var(--gfp-radius-sm);padding: 0.6rem 0.85rem;display: flex;flex-direction: column;gap: 0.15rem;background: var(--gfp-paper);min-width: 0;}
.gfp-glyph-aa{font-size: 1.7rem;line-height: 1.2;color: var(--gfp-ink);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
#gfpGlyphH .gfp-glyph-aa{font-family: var(--gfp-h);}
#gfpGlyphB .gfp-glyph-aa{font-family: var(--gfp-b);}
.gfp-glyph-name{font-size: 0.78rem;color: var(--gfp-muted);}
.gfp-verdict{border-radius: var(--gfp-radius-sm);padding: 0.7rem 0.95rem;font-size: 0.9rem;line-height: 1.5;border-left: 4px solid var(--gfp-good);background: var(--gfp-good-soft);color: var(--gfp-ink);}
.gfp-verdict strong{display: block;color: var(--gfp-good);}
.gfp-verdict[data-level=ok]{border-left-color: var(--gfp-blue);background: #e7edf4;}
.gfp-verdict[data-level=ok] strong{color: var(--gfp-blue);}
.gfp-verdict[data-level=warn]{border-left-color: var(--gfp-warn);background: var(--gfp-warn-soft);}
.gfp-verdict[data-level=warn] strong{color: var(--gfp-warn);}
.gfp-verdict[data-level=bad]{border-left-color: var(--gfp-bad);background: var(--gfp-bad-soft);}
.gfp-verdict[data-level=bad] strong{color: var(--gfp-bad);}
.gfp-textbox{display: flex;flex-direction: column;gap: 0.4rem;}
.gfp-textbox-head{display: flex;justify-content: space-between;align-items: center;gap: 0.5rem;flex-wrap: wrap;}
.gfp-textbox-head label{font-weight: 700;font-size: 0.88rem;margin: 0;}
.gfp-textbox-btns{display: flex;gap: 0.4rem;}
.gfp-textbox-btns .gfp-btn{padding: 0.32rem 0.75rem;font-size: 0.8rem;}
.gfp-textbox textarea{width: 100%;border: 1px solid var(--gfp-line);border-radius: var(--gfp-radius-sm);padding: 0.65rem 0.8rem;font-size: 0.92rem;line-height: 1.5;resize: vertical;color: var(--gfp-ink);background: var(--gfp-surface);}
.gfp-code{border-top: 1px solid var(--gfp-line);padding: 1.2rem 1.3rem 1.3rem;background: #1d1b19;color: #ece6dc;}
.gfp-code-head{display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;gap: 0.75rem;margin-bottom: 0.75rem;}
.gfp-tabs{display: inline-flex;gap: 0.25rem;background: #2a2724;border-radius: var(--gfp-radius-sm);padding: 3px;}
.gfp-tab{border: 0;background: transparent;color: #b8b0a3;padding: 0.35rem 0.85rem;border-radius: 6px;font-size: 0.84rem;font-weight: 600;cursor: pointer;font-family: var(--gfp-mono);}
.gfp-tab.is-on{background: #3b3733;color: #fff;}
.gfp-code-btns{display: flex;flex-wrap: wrap;gap: 0.4rem;}
.gfp-code .gfp-btn-ghost{background: transparent;color: #ece6dc;border-color: #4a4540;}
.gfp-code .gfp-btn-ghost:hover{background: #2f2b28;color: #fff;border-color: #f08a6c;}
.gfp-out{width: 100%;min-height: 170px;background: #141311;color: #f3d9b8;border: 1px solid #3a3632;border-radius: var(--gfp-radius-sm);padding: 0.85rem 1rem;font-family: var(--gfp-mono);font-size: 0.82rem;line-height: 1.6;resize: vertical;white-space: pre;overflow: auto;}
.gfp-code-note{margin: 0.6rem 0 0;font-size: 0.8rem;color: #b8b0a3;}
.gfp-code-note b{color: #fff;font-weight: 600;}
.gfp-article{margin: 0 auto 2.5rem;color: var(--gfp-ink);font-size: 1.02rem;line-height: 1.7;}
.gfp-article h2{font-size: 1.5rem;font-weight: 700;margin: 2.2rem 0 0.8rem;color: var(--gfp-ink);}
.gfp-article h2:first-child{margin-top: 0;}
.gfp-article p{margin: 0 0 1rem;}
.gfp-article code{font-family: var(--gfp-mono);font-size: 0.86em;background: var(--gfp-paper);border: 1px solid var(--gfp-line);border-radius: 4px;padding: 0.05em 0.35em;color: var(--gfp-red-dark);word-break: break-word;}
.gfp-table-wrap{overflow-x: auto;margin: 0 0 1rem;border: 1px solid var(--gfp-line);border-radius: var(--gfp-radius-sm);}
.gfp-table{width: 100%;border-collapse: collapse;font-size: 0.92rem;min-width: 560px;}
.gfp-table th,.gfp-table td{padding: 0.6rem 0.8rem;text-align: left;vertical-align: top;border-bottom: 1px solid var(--gfp-line);}
.gfp-table th{background: var(--gfp-paper);font-size: 0.78rem;text-transform: uppercase;letter-spacing: 0.06em;color: var(--gfp-muted);}
.gfp-table tr:last-child td{border-bottom: 0;}
.gfp-tag{display: inline-block;padding: 0.1rem 0.55rem;border-radius: 999px;font-size: 0.78rem;font-weight: 700;white-space: nowrap;}
.gfp-tag-good{background: var(--gfp-good-soft);color: var(--gfp-good);}
.gfp-tag-ok{background: #e7edf4;color: var(--gfp-blue);}
.gfp-tag-warn{background: var(--gfp-warn-soft);color: var(--gfp-warn);}
.gfp-tag-bad{background: var(--gfp-bad-soft);color: var(--gfp-bad);}
.gfp-pairlist{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 0.75rem;margin: 0 0 1rem;}
.gfp-pairitem{border: 1px solid var(--gfp-line);border-radius: var(--gfp-radius-sm);padding: 0.85rem 1rem;background: var(--gfp-surface);}
.gfp-pairitem dt{font-weight: 700;margin-bottom: 0.3rem;color: var(--gfp-red-dark);}
.gfp-pairitem dd{margin: 0;font-size: 0.93rem;line-height: 1.55;color: var(--gfp-muted);}
.gfp-pairitem dd strong{color: var(--gfp-ink);}
.gfp-pre{background: #1d1b19;color: #f3d9b8;border-radius: var(--gfp-radius-sm);padding: 0.95rem 1.1rem;font-size: 0.8rem;line-height: 1.65;overflow-x: auto;margin: 0 0 1rem;}
.gfp-pre code{background: none;border: 0;padding: 0;color: inherit;font-size: inherit;word-break: normal;}
.gfp-list{padding-left: 1.2rem;margin: 0 0 1rem;}
.gfp-list li{margin-bottom: 0.6rem;}
@media (max-width: 900px){.gfp-body{grid-template-columns: 1fr;}.gfp-controls{border-right: 0;border-bottom: 1px solid var(--gfp-line);}}
@media (max-width: 600px){.gfp-byline,.gfp-controls,.gfp-stage,.gfp-code{padding-left: 1rem;padding-right: 1rem;}.gfp-glyphs,.gfp-pairlist{grid-template-columns: 1fr;}.gfp-preview{min-height: 0;}.gfp-code-head{flex-direction: column;align-items: stretch;}.gfp-tabs{justify-content: space-between;}.gfp-tab{flex: 1 1 0;padding-left: 0.4rem;padding-right: 0.4rem;}}
@media (prefers-reduced-motion: reduce){.gfp-btn,.gfp-preview{transition: none;}}