:root{--wpm-ink: #1a1d24;--wpm-text: #2a2e37;--wpm-muted: #636a78;--wpm-line: #e6e1d8;--wpm-paper: #faf7f2;--wpm-card: #ffffff;--wpm-amber: #b45309;--wpm-amber-dark: #8a3f06;--wpm-amber-soft: #fdf1e3;--wpm-green: #15803d;--wpm-green-soft: #e7f6ec;--wpm-red: #b91c1c;--wpm-red-soft: #fde8e8;--wpm-radius: 16px;--wpm-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--primary: #b45309;--primary-dark: #8a3f06;--border: #e6e1d8;--surface: #ffffff;--shadow-soft: 0 16px 36px rgba(26, 29, 36, 0.07);--surface-muted: #faf7f2;--text-main: #1a1d24;--text-muted: #636a78;}
.wpm-page{color: var(--wpm-text);padding-bottom: 3.5rem;}
.wpm-hero{padding: 1.25rem 0 1.5rem;}
.wpm-lead{font-size: 1.08rem;line-height: 1.7;color: var(--wpm-muted);margin: 0 0 1rem;}
.wpm-byline{display: flex;flex-wrap: wrap;gap: .35rem 1rem;font-size: .875rem;color: var(--wpm-muted);}
.wpm-byline-author a,.wpm-byline-author .author-link{color: var(--wpm-amber-dark);font-weight: 600;text-decoration: none;}
.wpm-byline-author a:hover{text-decoration: underline;}
.wpm-byline-updated::before{content: "\00b7";margin-right: 1rem;}
.wpm-card{background: var(--wpm-card);border: 1px solid var(--wpm-line);border-radius: var(--wpm-radius);box-shadow: var(--shadow-soft);padding: 1.5rem;}
.wpm-app{margin-bottom: 1.25rem;}
.wpm-picker{display: flex;flex-wrap: wrap;align-items: center;gap: .5rem;margin-bottom: 1rem;}
.wpm-picker-label{font-size: .85rem;font-weight: 700;color: var(--wpm-ink);margin-right: .25rem;}
.wpm-chip{border: 1px solid var(--wpm-line);background: var(--wpm-paper);color: var(--wpm-text);font-size: .85rem;font-weight: 600;padding: .4rem .8rem;border-radius: 999px;cursor: pointer;}
.wpm-chip:hover{border-color: var(--wpm-amber);}
.wpm-chip[aria-pressed="true"]{background: var(--wpm-ink);border-color: var(--wpm-ink);color: #fff;}
.wpm-chip:focus-visible,.wpm-btn:focus-visible{outline: 2px solid var(--wpm-amber);outline-offset: 2px;}
.wpm-custom{border: 1px dashed var(--wpm-line);border-radius: 12px;padding: 1rem;margin-bottom: 1rem;background: var(--wpm-paper);}
.wpm-custom label{display: block;font-weight: 700;font-size: .9rem;color: var(--wpm-ink);margin-bottom: .35rem;}
.wpm-area{width: 100%;min-height: 110px;border: 1px solid var(--wpm-line);border-radius: 10px;background: var(--wpm-card);padding: .85rem 1rem;font-family: var(--wpm-mono);font-size: .9rem;line-height: 1.65;color: var(--wpm-ink);resize: vertical;margin-bottom: .6rem;}
.wpm-help{font-size: .82rem;color: var(--wpm-muted);margin: .35rem 0 0;}
.wpm-live{display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));border: 1px solid var(--wpm-line);border-radius: 12px;overflow: hidden;margin-bottom: 1rem;}
.wpm-live div{padding: .65rem .75rem;background: var(--wpm-paper);}
.wpm-live div + div{border-left: 1px solid var(--wpm-line);}
.wpm-live b{display: block;font-family: var(--wpm-mono);font-size: 1.35rem;color: var(--wpm-ink);line-height: 1.2;}
.wpm-live span{font-size: .75rem;color: var(--wpm-muted);text-transform: uppercase;letter-spacing: .06em;}
.wpm-passage{font-family: var(--wpm-mono);font-size: 1.12rem;line-height: 1.9;white-space: pre-wrap;word-break: break-word;color: #9aa0ab;background: var(--wpm-paper);border: 1px solid var(--wpm-line);border-radius: 12px;padding: 1.1rem 1.25rem;max-height: 300px;overflow-y: auto;cursor: text;user-select: none;}
.wpm-c.is-ok{color: var(--wpm-ink);}
.wpm-c.is-bad{color: var(--wpm-red);background: var(--wpm-red-soft);border-radius: 2px;}
.wpm-c.is-cur{box-shadow: inset 0 -3px 0 var(--wpm-amber);color: var(--wpm-ink);}
.wpm-input{display: block;width: 100%;min-height: 120px;margin-top: .85rem;border: 2px solid var(--wpm-line);border-radius: 12px;background: var(--wpm-card);padding: .9rem 1.1rem;font-family: var(--wpm-mono);font-size: 1.05rem;line-height: 1.7;color: var(--wpm-ink);resize: vertical;}
.wpm-input:focus{outline: none;border-color: var(--wpm-amber);box-shadow: 0 0 0 3px rgba(180, 83, 9, .14);}
.wpm-input[readonly]{background: var(--wpm-paper);color: var(--wpm-muted);}
.wpm-actions{display: flex;flex-wrap: wrap;align-items: center;gap: .6rem;margin-top: .85rem;}
.wpm-kbd{font-size: .8rem;color: var(--wpm-muted);margin-left: auto;}
.wpm-kbd kbd{font-family: var(--wpm-mono);font-size: .75rem;background: var(--wpm-paper);border: 1px solid var(--wpm-line);border-bottom-width: 2px;border-radius: 4px;padding: 0 .35rem;color: var(--wpm-ink);}
.wpm-btn{border: 1px solid var(--wpm-line);background: var(--wpm-card);color: var(--wpm-ink);font-weight: 600;font-size: .9rem;padding: .6rem 1.05rem;border-radius: 10px;cursor: pointer;}
.wpm-btn:hover{border-color: var(--wpm-amber);color: var(--wpm-amber-dark);}
.wpm-btn.is-main{background: var(--wpm-ink);border-color: var(--wpm-ink);color: #fff;}
.wpm-btn.is-main:hover{background: #000;color: #fff;}
.wpm-btn[data-state="copied"]{background: var(--wpm-green-soft);border-color: #a7dbb8;color: var(--wpm-green);}
.wpm-status{min-height: 1.2rem;font-size: .85rem;color: var(--wpm-amber-dark);margin: .6rem 0 0;}
.wpm-result{display: grid;grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);gap: 1.25rem;align-items: start;margin-bottom: 2.5rem;}
.wpm-result[hidden]{display: none;}
.wpm-result h2{font-size: 1.15rem;font-weight: 800;color: var(--wpm-ink);margin: 0 0 .75rem;outline: none;}
.wpm-score-label{font-family: var(--wpm-mono);font-size: .75rem;font-weight: 700;letter-spacing: .08em;text-transform: uppercase;color: var(--wpm-muted);margin: 0;}
.wpm-net{font-family: var(--wpm-mono);font-size: clamp(3rem, 7vw, 4.25rem);font-weight: 800;color: var(--wpm-ink);line-height: 1;margin: .3rem 0 .2rem;}
.wpm-net small{font-size: 1rem;font-weight: 600;color: var(--wpm-muted);margin-left: .35rem;}
.wpm-band{display: inline-block;font-size: .85rem;font-weight: 600;color: var(--wpm-amber-dark);background: var(--wpm-amber-soft);padding: .25rem .6rem;border-radius: 6px;margin-bottom: 1rem;}
.wpm-mini{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));border: 1px solid var(--wpm-line);border-radius: 12px;overflow: hidden;margin-bottom: 1.1rem;}
.wpm-mini div{padding: .7rem .6rem;text-align: center;background: var(--wpm-paper);}
.wpm-mini div + div{border-left: 1px solid var(--wpm-line);}
.wpm-mini b{display: block;font-family: var(--wpm-mono);font-size: 1.15rem;color: var(--wpm-ink);}
.wpm-mini span{font-size: .72rem;color: var(--wpm-muted);}
.wpm-scale{position: relative;height: 10px;border-radius: 5px;background: linear-gradient(90deg, #f3d9d9 0 25%, #f6e6cf 25% 37.5%, #f3eccb 37.5% 50%, #dcefdc 50% 66.67%, #c7e8d2 66.67% 100%);margin: 1.4rem 0 .35rem;}
.wpm-marker{position: absolute;top: -7px;width: 4px;height: 24px;margin-left: -2px;background: var(--wpm-ink);border-radius: 2px;transition: left .25s ease;}
.wpm-ticks{position: relative;height: 1.1rem;font-family: var(--wpm-mono);font-size: .7rem;color: var(--wpm-muted);margin-bottom: 1rem;}
.wpm-ticks span{position: absolute;transform: translateX(-50%);}
.wpm-ticks span:first-child{transform: none;}
.wpm-ticks span:last-child{transform: translateX(-100%);}
.wpm-work{list-style: none;margin: .4rem 0 0;padding: .8rem .9rem;background: var(--wpm-paper);border: 1px dashed var(--wpm-line);border-radius: 10px;font-family: var(--wpm-mono);font-size: .78rem;line-height: 1.6;color: var(--wpm-text);}
.wpm-work li + li{margin-top: .3rem;}
.wpm-trace{display: flex;align-items: flex-end;gap: 4px;height: 140px;padding: .5rem;background: var(--wpm-paper);border: 1px solid var(--wpm-line);border-radius: 10px;margin: .4rem 0 .4rem;}
.wpm-bar{flex: 1;height: 100%;display: flex;align-items: flex-end;min-width: 6px;}
.wpm-bar span{display: block;width: 100%;background: var(--wpm-amber);border-radius: 3px 3px 0 0;cursor: help;}
.wpm-bar:hover span{background: var(--wpm-amber-dark);}
.wpm-keys{display: flex;flex-wrap: wrap;gap: .5rem;margin: .5rem 0 1.25rem;}
.wpm-key{font-family: var(--wpm-mono);font-size: .85rem;color: var(--wpm-muted);border: 1px solid var(--wpm-line);border-bottom-width: 3px;border-radius: 7px;padding: .3rem .6rem;background: var(--wpm-card);}
.wpm-key b{color: var(--wpm-red);}
.wpm-doc section{margin-bottom: 2.5rem;}
.wpm-doc h2{font-size: 1.5rem;font-weight: 800;color: var(--wpm-ink);letter-spacing: -.015em;margin: 0 0 .8rem;}
.wpm-doc h3{font-size: 1.05rem;font-weight: 700;color: var(--wpm-ink);margin: 1.25rem 0 .5rem;}
.wpm-doc p,.wpm-doc li{font-size: 1rem;line-height: 1.75;color: var(--wpm-text);}
.wpm-doc code{font-family: var(--wpm-mono);font-size: .88em;background: var(--wpm-paper);border: 1px solid var(--wpm-line);padding: 0 .3rem;border-radius: 4px;color: var(--wpm-ink);}
.wpm-formula{font-family: var(--wpm-mono);font-size: .9rem;line-height: 1.8;background: var(--wpm-ink);color: #f4efe6;border-radius: 12px;padding: 1rem 1.2rem;overflow-x: auto;margin: 1rem 0;}
.wpm-formula b{color: #f5b971;font-weight: 700;}
.wpm-pair{display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 1rem;margin: 1rem 0;}
.wpm-pair div{border: 1px solid var(--wpm-line);border-radius: 12px;padding: 1rem;background: var(--wpm-paper);}
.wpm-pair b{display: block;font-family: var(--wpm-mono);font-size: 1.6rem;color: var(--wpm-ink);}
.wpm-pair p{font-size: .92rem;margin: .25rem 0 0;}
.wpm-table-wrap{overflow-x: auto;border: 1px solid var(--wpm-line);border-radius: 12px;margin: 1rem 0;}
.wpm-table{width: 100%;border-collapse: collapse;font-size: .92rem;min-width: 560px;}
.wpm-table th{background: var(--wpm-paper);text-align: left;font-weight: 700;color: var(--wpm-ink);padding: .7rem .9rem;border-bottom: 1px solid var(--wpm-line);}
.wpm-table td{padding: .7rem .9rem;border-bottom: 1px solid var(--wpm-line);vertical-align: top;line-height: 1.55;}
.wpm-table tr:last-child td{border-bottom: 0;}
.wpm-table td:first-child{font-weight: 600;color: var(--wpm-ink);}
.wpm-num{font-family: var(--wpm-mono);white-space: nowrap;}
.wpm-steps{counter-reset: wpmstep;list-style: none;padding: 0;margin: 1rem 0 0;}
.wpm-steps li{counter-increment: wpmstep;position: relative;padding: 0 0 .9rem 2.6rem;}
.wpm-steps li::before{content: counter(wpmstep);position: absolute;left: 0;top: .15rem;width: 1.8rem;height: 1.8rem;border-radius: 6px;background: var(--wpm-amber-soft);color: var(--wpm-amber-dark);font-family: var(--wpm-mono);font-weight: 800;font-size: .85rem;display: flex;align-items: center;justify-content: center;}
.wpm-limits{list-style: none;padding: 0;margin: 1rem 0 0;border-left: 3px solid var(--wpm-amber);}
.wpm-limits li{padding: .55rem 0 .55rem 1.1rem;}
.wpm-limits li + li{border-top: 1px solid var(--wpm-line);}
.sr-only{position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;}
@media (max-width: 991px){.wpm-result{grid-template-columns: 1fr;}}
@media (max-width: 575px){.wpm-card{padding: 1.1rem;}.wpm-live{grid-template-columns: repeat(2, minmax(0, 1fr));}.wpm-live div:nth-child(3){border-left: 0;}.wpm-live div:nth-child(n+3){border-top: 1px solid var(--wpm-line);}.wpm-passage{font-size: 1rem;}.wpm-pair{grid-template-columns: 1fr;}.wpm-kbd{display: none;}}