:root{--primary: #2457a6;--primary-dark: #183d75;--border: #dcdfe4;--surface: #ffffff;--shadow-soft: 0 1px 2px rgba(20, 24, 31, 0.06), 0 8px 24px rgba(20, 24, 31, 0.06);--surface-muted: #f4f5f7;--text-main: #1d2129;--text-muted: #5b6270;}
.npo-wrap{--npo-ink: #1d2129;--npo-dim: #5b6270;--npo-line: #dcdfe4;--npo-blue: #2457a6;--npo-amber: #e8a33d;--npo-mono: Consolas, "Cascadia Mono", "SF Mono", Menlo, "Liberation Mono", monospace;--npo-sans: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;--npo-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;color: var(--npo-ink);}
.npo-sr{position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;}
.npo-app{margin: 0.5rem 0 1.25rem;}
.npo-modes{display: grid;grid-template-columns: 1fr 1fr;max-width: 560px;margin: 0 0 0.9rem;border: 1px solid var(--npo-line);border-radius: 10px;overflow: hidden;background: #fff;}
.npo-mode{display: flex;flex-direction: column;align-items: flex-start;gap: 2px;padding: 0.65rem 1rem;border: 0;background: transparent;text-align: left;cursor: pointer;color: var(--npo-dim);font: inherit;}
.npo-mode+.npo-mode{border-left: 1px solid var(--npo-line);}
.npo-mode strong{font-size: 0.98rem;color: var(--npo-ink);}
.npo-mode small{font-size: 0.8rem;line-height: 1.3;}
.npo-mode[aria-checked="true"]{background: #eef3fb;box-shadow: inset 0 -3px 0 var(--npo-blue);}
.npo-mode:focus-visible{outline: 2px solid var(--npo-blue);outline-offset: -2px;}
.npo-app[data-mode="advanced"] .npo-mode[aria-checked="true"]{background: #fdf3e1;box-shadow: inset 0 -3px 0 var(--npo-amber);}
.npo-app[data-mode="advanced"] .npo-mode[aria-checked="true"] strong{color: #2a2620;}
.npo-app[data-mode="advanced"] .npo-mode[aria-checked="true"] small{color: #7a6f5c;}
.npo-frame{display: flex;flex-direction: column;border: 1px solid #c9ccd2;border-radius: 8px;background: #fff;box-shadow: var(--shadow-soft);overflow: hidden;}
.npo-titlebar{display: flex;align-items: center;gap: 0.75rem;padding: 0.35rem 0.4rem 0.35rem 0.8rem;background: #f3f3f3;border-bottom: 1px solid #e1e1e1;font: 13px/1.3 var(--npo-sans);color: #333;}
.npo-title{flex: 1;min-width: 0;font-weight: 600;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.npo-count{color: #6b6b6b;font-weight: 400;margin-left: 0.4rem;}
.npo-saved{font-size: 12px;color: #4a7a3a;white-space: nowrap;}
.npo-saved.is-bad{color: #b42318;font-weight: 600;}
.npo-full{display: inline-flex;align-items: center;gap: 0.4rem;border: 1px solid transparent;border-radius: 4px;background: transparent;color: inherit;font: inherit;padding: 0.35rem 0.6rem;cursor: pointer;}
.npo-full:hover{background: #e5e5e5;}
.npo-tabs{display: none;align-items: flex-end;gap: 2px;padding: 0.4rem 0.5rem 0;background: #f7f3ea;border-bottom: 1px solid #e6dfd0;overflow-x: auto;}
.npo-tablist{display: flex;gap: 2px;min-width: 0;}
.npo-tab{display: flex;align-items: center;flex: 0 0 auto;max-width: 210px;border-radius: 8px 8px 0 0;background: #efe9dc;color: #6f6655;}
.npo-tab.is-active{background: #ffffff;color: #2a2620;box-shadow: inset 0 2px 0 var(--npo-amber);}
.npo-tab-name{min-width: 0;max-width: 170px;border: 0;background: transparent;color: inherit;font: 13px/1 var(--npo-sans);padding: 0.6rem 0.4rem 0.6rem 0.8rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;cursor: pointer;}
.npo-tab-x{border: 0;background: transparent;color: inherit;opacity: 0.55;font-size: 16px;line-height: 1;padding: 0.35rem 0.55rem;cursor: pointer;}
.npo-tab-x:hover,.npo-tab-x:focus-visible{opacity: 1;color: #b42318;}
.npo-tab-add{flex: 0 0 auto;align-self: stretch;border: 1px dashed #d6cdb9;border-bottom: 0;border-radius: 8px 8px 0 0;background: transparent;color: #6f6655;font-size: 17px;line-height: 1;padding: 0 0.8rem;cursor: pointer;}
.npo-tab-add:hover{color: #2a2620;border-color: var(--npo-amber);}
.npo-tab-add:disabled{opacity: 0.35;cursor: not-allowed;}
.npo-bar{display: flex;flex-wrap: wrap;align-items: center;gap: 2px;padding: 0.25rem 0.45rem;background: #fafafa;border-bottom: 1px solid #e6e6e6;}
.npo-bar button,.npo-bar select{font: 13px/1 var(--npo-sans);color: #222;background: transparent;border: 1px solid transparent;border-radius: 4px;padding: 0.48rem 0.6rem;cursor: pointer;}
.npo-bar select{border-color: #d6d6d6;background: #fff;padding: 0.4rem 0.4rem;}
.npo-bar button:hover{background: #e8eef8;border-color: #c7d5ec;}
.npo-bar button[aria-pressed="true"]{background: #dfe8f6;border-color: #b9cbe8;}
.npo-bar button:focus-visible,.npo-bar select:focus-visible{outline: 2px solid var(--npo-blue);outline-offset: 1px;}
.npo-sep{width: 1px;height: 20px;background: #dcdcdc;margin: 0 0.3rem;}
.npo-bar-adv{display: none;}
.npo-body{display: grid;grid-template-columns: auto minmax(0, 1fr);}
.npo-gutter{display: none;overflow: hidden;padding: 14px 0;background: #faf7f0;border-right: 1px solid #e6dfd0;user-select: none;text-align: right;min-width: 3.2em;}
.npo-gutter pre{margin: 0;padding: 0 0.7em 0 0.9em;font-family: var(--npo-mono);font-size: var(--npo-size, 16px);line-height: 1.55;color: #a89f8c;will-change: transform;}
.npo-editor{display: block;grid-column: 2;width: 100%;height: 60vh;min-height: 420px;margin: 0;border: 0;border-radius: 0;outline: none;resize: vertical;padding: 14px 16px;font-family: var(--npo-mono);font-size: var(--npo-size, 16px);line-height: 1.55;color: #111;background: #fff;white-space: pre-wrap;overflow-wrap: break-word;tab-size: 4;}
.npo-editor:focus-visible{box-shadow: inset 0 0 0 2px rgba(36, 87, 166, 0.3);}
.npo-nowrap .npo-editor{white-space: pre;overflow-wrap: normal;overflow-x: auto;}
.npo-side{display: none;}
.npo-status{display: flex;flex-wrap: wrap;background: #f3f3f3;border-top: 1px solid #e1e1e1;font: 12px/1 var(--npo-sans);color: #444;}
.npo-status span{padding: 0.5rem 0.85rem;border-left: 1px solid #dcdcdc;white-space: nowrap;}
.npo-status span:first-child{border-left: 0;margin-right: auto;}
.npo-status span:empty,.npo-status .npo-adv-only{display: none;}
.npo-app[data-mode="advanced"] .npo-count{display: none;}
.npo-app[data-mode="advanced"] .npo-frame{background: #ffffff;border-color: #e6dfd0;border-radius: 12px;box-shadow: 0 18px 40px rgba(80, 60, 20, 0.10);}
.npo-app[data-mode="advanced"] .npo-titlebar{background: #f7f3ea;border-bottom-color: #e6dfd0;color: #3a342b;}
.npo-app[data-mode="advanced"] .npo-saved{color: #3f7a2e;}
.npo-app[data-mode="advanced"] .npo-saved.is-bad{color: #b42318;}
.npo-app[data-mode="advanced"] .npo-full:hover{background: #efe6d3;}
.npo-app[data-mode="advanced"] .npo-tabs{display: flex;}
.npo-app[data-mode="advanced"] .npo-bar{background: #f7f3ea;border-bottom-color: #e6dfd0;}
.npo-app[data-mode="advanced"] .npo-bar-basic{display: none;}
.npo-app[data-mode="advanced"] .npo-bar-adv{display: flex;}
.npo-app[data-mode="advanced"] .npo-bar button{color: #3a342b;}
.npo-app[data-mode="advanced"] .npo-bar button:hover{background: #efe6d3;border-color: #d6c7a6;}
.npo-app[data-mode="advanced"] .npo-bar button[aria-pressed="true"]{background: #fbe9c6;border-color: #d9a24a;color: #7a4a00;}
.npo-app[data-mode="advanced"] .npo-bar select{background: #efe9dc;border-color: #d6cdb9;color: #3a342b;}
.npo-app[data-mode="advanced"] .npo-bar button:focus-visible,.npo-app[data-mode="advanced"] .npo-bar select:focus-visible{outline-color: var(--npo-amber);}
.npo-app[data-mode="advanced"] .npo-sep{background: #ddd4c2;}
.npo-app[data-mode="advanced"] .npo-body{grid-template-columns: auto minmax(0, 1fr) 270px;}
.npo-app[data-mode="advanced"].npo-nowrap.npo-numbers .npo-gutter{display: block;}
.npo-app[data-mode="advanced"] .npo-editor{background: #ffffff;color: #2a2620;caret-color: #b36b00;}
.npo-app[data-mode="advanced"] .npo-editor::selection{background: #f6d9a0;color: #1a1408;}
.npo-app[data-mode="advanced"] .npo-editor:focus-visible{box-shadow: inset 0 0 0 2px rgba(232, 163, 61, 0.35);}
.npo-app[data-mode="advanced"][data-font="sans"] .npo-editor{font-family: var(--npo-sans);}
.npo-app[data-mode="advanced"][data-font="serif"] .npo-editor{font-family: var(--npo-serif);}
.npo-app[data-mode="advanced"] .npo-side{display: block;position: relative;grid-column: 3;border-left: 1px solid #e6dfd0;background: #faf7f0;color: #3a342b;font: 13px/1.45 var(--npo-sans);}
.npo-side-in{position: absolute;inset: 0;overflow-y: auto;}
.npo-tool{border-bottom: 1px solid #e6dfd0;}
.npo-tool summary{padding: 0.7rem 0.9rem;cursor: pointer;font-weight: 600;color: #2a2620;}
.npo-tool summary:focus-visible{outline: 2px solid var(--npo-amber);outline-offset: -2px;}
.npo-tool-body{display: grid;gap: 0.45rem;padding: 0 0.9rem 0.9rem;}
.npo-side label{font-size: 12px;color: #6f6655;}
.npo-side input[type="text"]{width: 100%;background: #ffffff;border: 1px solid #d6cdb9;border-radius: 6px;color: #2a2620;padding: 0.45rem 0.55rem;font: 13px var(--npo-mono);}
.npo-side input[type="text"]:focus{outline: none;border-color: var(--npo-amber);}
.npo-checks{display: flex;gap: 1rem;}
.npo-checks label{display: flex;align-items: center;gap: 0.35rem;color: #3a342b;font-size: 12.5px;cursor: pointer;}
.npo-grid2{display: grid;grid-template-columns: 1fr 1fr;gap: 0.4rem;}
.npo-side button{background: #ffffff;border: 1px solid #d6cdb9;color: #2a2620;border-radius: 6px;padding: 0.5rem 0.45rem;font: 12.5px/1.2 var(--npo-sans);cursor: pointer;}
.npo-side button:hover{border-color: var(--npo-amber);}
.npo-side button:focus-visible{outline: 2px solid var(--npo-amber);outline-offset: 1px;}
.npo-side .npo-go{background: var(--npo-amber);border-color: var(--npo-amber);color: #1a1408;font-weight: 600;}
.npo-find-msg{min-height: 1.2em;margin: 0;font-size: 12px;color: #6f6655;}
.npo-find-msg.is-bad{color: #b42318;}
.npo-stats{display: grid;grid-template-columns: 1fr auto;gap: 0.3rem 0.75rem;margin: 0;}
.npo-stats dt{font-weight: 400;color: #6f6655;}
.npo-stats dd{margin: 0;text-align: right;font-family: var(--npo-mono);color: #2a2620;}
.npo-app[data-mode="advanced"] .npo-status{background: #f7f3ea;border-top-color: #e6dfd0;color: #6f6655;}
.npo-app[data-mode="advanced"] .npo-status span{border-left-color: #e6dfd0;}
.npo-app[data-mode="advanced"] .npo-status .npo-adv-only{display: inline-block;}
.npo-app[data-mode="advanced"] .npo-status .npo-adv-only:empty{display: none;}
.npo-frame.is-full{position: fixed;inset: 0;z-index: 9999;border: 0;border-radius: 0;}
.npo-frame.is-full .npo-body{flex: 1;min-height: 0;grid-template-rows: minmax(0, 1fr);}
.npo-frame.is-full .npo-editor{height: 100%;min-height: 0;resize: none;}
body.npo-lock{overflow: hidden;}
.npo-toast{position: fixed;left: 50%;bottom: 24px;z-index: 10000;max-width: calc(100% - 32px);transform: translate(-50%, 16px);opacity: 0;background: #1d2129;color: #fff;padding: 0.6rem 1rem;border-radius: 8px;font: 14px/1.4 var(--npo-sans);pointer-events: none;transition: opacity 0.2s ease, transform 0.2s ease;}
.npo-toast.is-on{opacity: 1;transform: translate(-50%, 0);}
#npoPrint{display: none;}
.npo-strip{display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;gap: 0.5rem 1.5rem;padding: 0.75rem 0;margin-bottom: 1.75rem;border-bottom: 1px solid var(--npo-line);font-size: 0.9rem;color: var(--npo-dim);}
.npo-strip kbd{font-size: 0.8rem;}
.npo-byline{display: flex;flex-wrap: wrap;gap: 0.25rem 1rem;}
.npo-byline .author-link{color: var(--npo-blue);font-weight: 600;}
.npo-article{margin-bottom: 2.5rem;font-size: 1.02rem;line-height: 1.7;}
.npo-article h2{font-size: 1.5rem;font-weight: 700;margin: 2.25rem 0 0.75rem;padding-left: 0.75rem;border-left: 4px solid var(--npo-blue);}
.npo-article h2:first-child{margin-top: 0;}
.npo-article p,.npo-article li{color: #333a45;}
.npo-article ul,.npo-article ol{padding-left: 1.3rem;}
.npo-article li{margin-bottom: 0.45rem;}
.npo-article code,.npo-article kbd{font-family: var(--npo-mono);font-size: 0.88em;}
.npo-article code{background: #f1f2f5;border-radius: 4px;padding: 0.1em 0.35em;}
.npo-wrap kbd{display: inline-block;background: #fff;border: 1px solid #c9ccd2;border-bottom-width: 2px;border-radius: 4px;padding: 0.05em 0.4em;color: var(--npo-ink);}
.npo-scroll{overflow-x: auto;margin: 1rem 0 1.25rem;}
.npo-table{width: 100%;border-collapse: collapse;font-size: 0.95rem;}
.npo-table th,.npo-table td{padding: 0.6rem 0.75rem;border-bottom: 1px solid var(--npo-line);text-align: left;vertical-align: top;}
.npo-table thead th{font-size: 0.8rem;text-transform: uppercase;letter-spacing: 0.06em;color: var(--npo-dim);}
.npo-table thead th:nth-child(3){color: #8a5a10;}
.npo-table tbody th{font-weight: 600;white-space: nowrap;}
.npo-table td:nth-child(3){background: #fbf6ec;}
.npo-limits li strong{color: var(--npo-ink);}
@media (max-width: 900px){.npo-app[data-mode="advanced"] .npo-body{grid-template-columns: auto minmax(0, 1fr);}.npo-app[data-mode="advanced"] .npo-side{grid-column: 1 / -1;border-left: 0;border-top: 1px solid #e6dfd0;}.npo-side-in{position: static;}.npo-editor{height: 55vh;min-height: 320px;}.npo-frame.is-full .npo-side{display: none;}}
@media (max-width: 560px){.npo-mode small{display: none;}.npo-status .npo-hide-sm{display: none;}.npo-bar button,.npo-bar select{padding: 0.5rem 0.45rem;}.npo-sep{display: none;}.npo-full-txt{display: none;}.npo-article h2{font-size: 1.3rem;}}
@media print{body *{visibility: hidden;}#npoPrint,#npoPrint *{visibility: visible;}#npoPrint{display: block;position: absolute;left: 0;top: 0;width: 100%;margin: 0;white-space: pre-wrap;overflow-wrap: break-word;font: 11pt/1.5 Consolas, "Courier New", monospace;color: #000;}}