:root{--cpg-ink: #1c1917;--cpg-desk: #f4efe4;--cpg-desk-2: #ebe2d0;--cpg-red: #d9472b;--cpg-red-dark: #a8331c;--cpg-yellow: #f6c445;--cpg-blue: #2f6fd1;--cpg-green: #2f9e6b;--cpg-line: #e3dacb;--cpg-text: #27221b;--cpg-muted: #6b6255;--cpg-radius: 12px;--primary: #d9472b;--primary-dark: #a8331c;--border: #e3dacb;--surface: #ffffff;--shadow-soft: 0 10px 28px rgba(60, 40, 10, 0.10);--surface-muted: #faf6ee;--text-main: #27221b;--text-muted: #6b6255;}
.cpg-bench [hidden]{display: none !important;}
.cpg-bench{display: grid;grid-template-columns: minmax(280px, 340px) 1fr;gap: 24px;align-items: start;margin: 8px 0 56px;}
.cpg-controls{background: #ffffff;border: 1px solid var(--cpg-line);border-radius: var(--cpg-radius);padding: 18px;box-shadow: var(--shadow-soft);position: sticky;top: 88px;}
.cpg-byline{display: flex;flex-wrap: wrap;justify-content: space-between;gap: 4px 12px;font-size: 12.5px;color: var(--cpg-muted);padding-bottom: 12px;margin-bottom: 16px;border-bottom: 2px dashed var(--cpg-line);}
.cpg-byline .author-link{color: var(--cpg-red-dark);font-weight: 700;text-decoration: none;}
.cpg-byline .author-link:hover{text-decoration: underline;}
.cpg-group{border: 0;padding: 0;margin: 0 0 16px;min-width: 0;}
.cpg-group legend,.cpg-label{display: block;font-size: 12px;font-weight: 800;letter-spacing: .07em;text-transform: uppercase;color: var(--cpg-muted);margin-bottom: 8px;float: none;width: auto;padding: 0;}
.cpg-seg{display: grid;grid-template-columns: repeat(3, 1fr);gap: 6px;}
.cpg-seg.is-two{grid-template-columns: repeat(2, 1fr);}
.cpg-opt{position: relative;margin: 0;}
.cpg-opt input{position: absolute;opacity: 0;width: 1px;height: 1px;}
.cpg-opt span{display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 3px;min-height: 46px;height: 100%;padding: 8px 4px;border: 2px solid var(--cpg-line);border-radius: 10px;background: #ffffff;font-weight: 700;font-size: 13.5px;color: var(--cpg-text);cursor: pointer;text-align: center;line-height: 1.2;transition: border-color .15s, background .15s;}
.cpg-opt svg{width: 26px;height: 26px;stroke: var(--cpg-ink);fill: none;stroke-width: 1.6;}
.cpg-opt small{font-weight: 500;font-size: 11.5px;color: var(--cpg-muted);}
.cpg-opt span:hover{border-color: var(--cpg-muted);}
.cpg-opt input:checked+span{border-color: var(--cpg-ink);background: var(--cpg-desk);box-shadow: inset 0 -4px 0 var(--cpg-red);}
.cpg-opt input:focus-visible+span{outline: 3px solid var(--cpg-blue);outline-offset: 2px;}
.cpg-field{margin-bottom: 16px;}
.cpg-field input[type="text"],.cpg-field select{width: 100%;min-height: 44px;border: 2px solid var(--cpg-line);border-radius: 10px;padding: 8px 10px;font-size: 15px;background: #ffffff;color: var(--cpg-text);}
.cpg-field input[type="text"]:focus-visible,.cpg-field select:focus-visible{outline: 3px solid var(--cpg-blue);outline-offset: 1px;border-color: var(--cpg-ink);}
.cpg-hint{display: block;font-size: 12.5px;color: var(--cpg-muted);margin-top: 5px;line-height: 1.45;}
.cpg-code-row{display: flex;gap: 6px;}
.cpg-code-row input[type="text"]{flex: 1;min-width: 0;font-family: ui-monospace, SFMono-Regular, Consolas, monospace;text-transform: uppercase;}
.cpg-btn{display: inline-flex;align-items: center;justify-content: center;gap: 8px;min-height: 44px;padding: 9px 14px;border-radius: 10px;border: 2px solid var(--cpg-ink);background: #ffffff;color: var(--cpg-ink);font-weight: 800;font-size: 14px;cursor: pointer;line-height: 1.1;}
.cpg-btn:hover{background: var(--cpg-desk);}
.cpg-btn:focus-visible,.cpg-swatch:focus-visible,.cpg-recent-btn:focus-visible{outline: 3px solid var(--cpg-blue);outline-offset: 2px;}
.cpg-btn-main{width: 100%;background: var(--cpg-red);border-color: var(--cpg-red-dark);color: #ffffff;font-size: 16px;min-height: 50px;box-shadow: 0 4px 0 var(--cpg-red-dark);}
.cpg-btn-main:hover{background: var(--cpg-red-dark);}
.cpg-btn-main:active{transform: translateY(2px);box-shadow: 0 2px 0 var(--cpg-red-dark);}
.cpg-stage{background: var(--cpg-desk);background-image: radial-gradient(var(--cpg-desk-2) 1px, transparent 1px);background-size: 18px 18px;border-radius: var(--cpg-radius);padding: 20px;border: 1px solid var(--cpg-line);}
.cpg-stage-head{display: flex;align-items: center;gap: 8px 12px;flex-wrap: wrap;max-width: 660px;margin: 0 auto 12px;}
.cpg-focus-btn{margin-left: auto;min-height: 38px;padding: 6px 12px;font-size: 13.5px;}
.cpg-canvas{display: grid;grid-template-columns: minmax(0, 1fr) 96px;gap: 14px;align-items: start;max-width: 660px;margin: 0 auto;}
.cpg-code-tag{font-size: 13px;color: var(--cpg-muted);}
.cpg-code{font-family: ui-monospace, SFMono-Regular, Consolas, monospace;font-weight: 800;font-size: 17px;color: var(--cpg-ink);background: #ffffff;border: 2px dashed var(--cpg-ink);border-radius: 6px;padding: 2px 8px;margin-left: 4px;}
.cpg-count{font-size: 13.5px;font-weight: 700;color: var(--cpg-text);background: var(--cpg-yellow);border-radius: 999px;padding: 3px 10px;}
.cpg-sheet{width: 100%;background: #ffffff;aspect-ratio: 850 / 1100;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 14px 32px rgba(60, 40, 10, 0.18);border-radius: 2px;}
.cpg-sheet.is-a4{aspect-ratio: 840 / 1188;}
.cpg-sheet svg{display: block;width: 100%;height: 100%;}
.cpg-sheet .r{cursor: pointer;}
.cpg-sheet .r:hover{opacity: .85;}
.cpg-actions{display: grid;grid-template-columns: repeat(4, 1fr);gap: 8px;max-width: 660px;margin: 16px auto 0;}
.cpg-actions .cpg-btn{padding: 9px 6px;font-size: 13.5px;}
.cpg-palette-box{position: sticky;top: 84px;display: flex;flex-direction: column;align-items: center;gap: 10px;background: #ffffff;border-radius: 12px;padding: 12px 8px;border: 1px solid var(--cpg-line);box-shadow: var(--shadow-soft);}
.cpg-palette-title{font-size: 11.5px;font-weight: 700;color: var(--cpg-muted);text-align: center;line-height: 1.3;margin: 0;}
.cpg-palette{display: grid;grid-template-columns: repeat(2, 34px);gap: 8px;justify-content: center;}
.cpg-swatch{width: 34px;height: 34px;border-radius: 50%;border: 2px solid rgba(0, 0, 0, 0.18);cursor: pointer;padding: 0;}
.cpg-swatch[aria-pressed="true"]{outline: 3px solid var(--cpg-ink);outline-offset: 2px;}
.cpg-eraser{display: flex;align-items: center;justify-content: center;background: #ffffff;border-style: dashed;color: var(--cpg-ink);font-size: 14px;}
.cpg-custom{width: 34px;height: 34px;border: 0;padding: 0;background: none;cursor: pointer;}
.cpg-current{display: flex;align-items: center;justify-content: center;width: 100%;padding-top: 8px;border-top: 1px dashed var(--cpg-line);}
.cpg-current span{width: 44px;height: 22px;border-radius: 999px;border: 2px solid var(--cpg-ink);}
.cpg-current span.is-erase{background-image: repeating-linear-gradient(45deg, #e5e5e5 0 4px, #ffffff 4px 8px) !important;}
.cpg-clear{width: 100%;min-height: 34px;padding: 4px 8px;font-size: 13px;}
.cpg-status{min-height: 22px;font-size: 14px;color: var(--cpg-text);margin: 12px auto 0;max-width: 660px;text-align: center;line-height: 1.5;}
.cpg-status.is-error{color: #b42318;font-weight: 700;}
.cpg-recent-box{max-width: 660px;margin: 10px auto 0;display: flex;flex-wrap: wrap;align-items: center;gap: 6px;font-size: 13px;color: var(--cpg-muted);}
.cpg-recent{display: flex;flex-wrap: wrap;gap: 6px;}
.cpg-recent-btn{font-family: ui-monospace, SFMono-Regular, Consolas, monospace;font-size: 12.5px;border: 1px solid var(--cpg-line);background: #ffffff;border-radius: 6px;padding: 3px 8px;cursor: pointer;color: var(--cpg-text);}
.cpg-recent-btn[aria-current="true"]{border-color: var(--cpg-ink);font-weight: 800;}
.cpg-noscript{max-width: 540px;margin: 0 auto 12px;padding: 12px;background: #fff4e5;border: 1px solid #f5c48a;border-radius: 8px;font-size: 14px;}
html.cpg-focus-open{overflow: hidden;}
.cpg-stage.is-focus{position: fixed;inset: 0;z-index: 10000;margin: 0;border: 0;border-radius: 0;display: flex;flex-direction: column;padding: 12px 16px;overflow: hidden;}
.cpg-stage.is-focus .cpg-stage-head{max-width: none;width: 100%;margin-bottom: 10px;}
.cpg-stage.is-focus .cpg-canvas{flex: 1;min-height: 0;max-width: none;width: 100%;display: flex;justify-content: center;align-items: center;gap: 18px;}
.cpg-stage.is-focus .cpg-sheet{flex: 0 0 auto;width: min(calc(100vw - 150px), calc((100vh - 170px) * 0.7727));width: min(calc(100vw - 150px), calc((100dvh - 170px) * 0.7727));}
.cpg-stage.is-focus .cpg-sheet.is-a4{width: min(calc(100vw - 150px), calc((100vh - 170px) * 0.7071));width: min(calc(100vw - 150px), calc((100dvh - 170px) * 0.7071));}
.cpg-stage.is-focus .cpg-palette-box{position: static;max-height: 100%;overflow-y: auto;}
.cpg-stage.is-focus .cpg-actions{max-width: none;margin-top: 10px;grid-template-columns: repeat(4, auto);justify-content: center;}
.cpg-stage.is-focus .cpg-status{margin-top: 6px;min-height: 0;}
.cpg-stage.is-focus .cpg-recent-box{display: none !important;}
.cpg-printroot{display: none;}
@media print{html.cpg-printing body>*:not(.cpg-printroot){display: none !important;}html.cpg-printing body{margin: 0 !important;padding: 0 !important;background: #ffffff !important;}html.cpg-printing .cpg-printroot{display: block !important;}html.cpg-printing .cpg-printroot svg{display: block;height: 98vh;width: auto;max-width: 100%;margin: 0 auto;}}
.cpg-article{margin: 0 auto 52px;}
.cpg-article h2{font-size: clamp(1.4rem, 2.6vw, 1.85rem);font-weight: 800;color: var(--cpg-ink);margin: 0 0 12px;line-height: 1.25;}
.cpg-article h3{font-size: 1.15rem;font-weight: 800;color: var(--cpg-ink);margin: 0 0 8px;}
.cpg-article p,.cpg-article li{font-size: 16.5px;line-height: 1.7;color: var(--cpg-text);}
.cpg-article code{background: var(--cpg-desk);color: var(--cpg-ink);padding: 1px 6px;border-radius: 4px;font-size: .92em;}
.cpg-table-wrap{overflow-x: auto;border: 1px solid var(--cpg-line);border-radius: 12px;background: #ffffff;margin-top: 16px;}
.cpg-table{width: 100%;border-collapse: collapse;min-width: 680px;}
.cpg-table th{background: var(--cpg-desk);text-align: left;font-size: 12.5px;text-transform: uppercase;letter-spacing: .05em;color: var(--cpg-muted);padding: 10px 12px;}
.cpg-table td{padding: 12px;border-top: 1px solid var(--cpg-line);vertical-align: top;font-size: 15px;line-height: 1.55;color: var(--cpg-text);}
.cpg-table td:first-child{font-weight: 700;}
.cpg-styles{display: grid;grid-template-columns: repeat(3, 1fr);gap: 16px;margin-top: 16px;}
.cpg-style-card{background: #ffffff;border: 1px solid var(--cpg-line);border-top: 6px solid var(--cpg-red);border-radius: 12px;padding: 18px;}
.cpg-style-card.is-glass{border-top-color: var(--cpg-blue);}
.cpg-style-card.is-quilt{border-top-color: var(--cpg-green);}
.cpg-style-card p{font-size: 15px;line-height: 1.65;margin-bottom: 10px;}
.cpg-style-card dl{display: grid;grid-template-columns: auto 1fr;gap: 4px 10px;margin: 12px 0 0;padding-top: 12px;border-top: 1px dashed var(--cpg-line);font-size: 13.5px;}
.cpg-style-card dt{color: var(--cpg-muted);font-weight: 600;}
.cpg-style-card dd{margin: 0;font-weight: 700;color: var(--cpg-text);}
.cpg-anatomy{display: flex;flex-wrap: wrap;gap: 6px;align-items: stretch;margin: 18px 0;}
.cpg-anatomy span{display: flex;flex-direction: column;align-items: center;padding: 10px 14px;background: #ffffff;border: 2px solid var(--cpg-ink);border-radius: 8px;font-family: ui-monospace, SFMono-Regular, Consolas, monospace;font-size: 26px;font-weight: 800;color: var(--cpg-ink);}
.cpg-anatomy small{font-size: 12px;font-weight: 600;color: var(--cpg-muted);margin-top: 4px;font-family: system-ui, sans-serif;}
.cpg-anatomy b{align-self: center;font-size: 26px;color: var(--cpg-muted);}
.cpg-steps{counter-reset: cpgstep;list-style: none;padding: 0;margin: 16px 0 0;}
.cpg-steps>li{position: relative;padding-left: 50px;margin-bottom: 18px;}
.cpg-steps>li::before{counter-increment: cpgstep;content: counter(cpgstep);position: absolute;left: 0;top: 2px;width: 34px;height: 34px;border-radius: 50%;background: var(--cpg-yellow);color: var(--cpg-ink);font-weight: 800;display: flex;align-items: center;justify-content: center;}
.cpg-paper{width: 100%;border-collapse: collapse;margin-top: 8px;font-size: 14.5px;}
.cpg-paper td{padding: 7px 10px;border-bottom: 1px solid var(--cpg-line);line-height: 1.45;}
.cpg-paper td:first-child{font-weight: 700;white-space: nowrap;}
.cpg-screen{display: grid;grid-template-columns: repeat(2, 1fr);gap: 12px 24px;margin-top: 12px;}
.cpg-screen div{background: #ffffff;border: 1px solid var(--cpg-line);border-radius: 10px;padding: 14px 16px;}
.cpg-screen p{margin: 0;font-size: 15px;}
.cpg-limits{background: var(--surface-muted);border-left: 6px solid var(--cpg-red);padding: 22px 26px;border-radius: 0 12px 12px 0;}
.cpg-limits ul{margin: 0;padding-left: 20px;}
.cpg-limits li{margin-bottom: 10px;}
@media (max-width: 991px){.cpg-bench{grid-template-columns: 1fr;}.cpg-controls{position: static;}.cpg-styles{grid-template-columns: 1fr;}}
@media (max-width: 575px){.cpg-actions{grid-template-columns: repeat(2, 1fr);}.cpg-stage{padding: 12px;}.cpg-screen{grid-template-columns: 1fr;}.cpg-anatomy span{font-size: 20px;padding: 8px 10px;}.cpg-canvas{grid-template-columns: 1fr;}.cpg-palette-box{top: auto;bottom: 8px;z-index: 5;flex-direction: row;padding: 8px;gap: 8px;}.cpg-palette-title,.cpg-current{display: none;}.cpg-palette{display: flex;flex: 1;min-width: 0;overflow-x: auto;padding: 3px;}.cpg-swatch,.cpg-custom{flex: 0 0 34px;}.cpg-clear{width: auto;}.cpg-focus-btn span{display: none;}.cpg-stage.is-focus{padding: 8px;}.cpg-stage.is-focus .cpg-canvas{flex-direction: column;gap: 8px;}.cpg-stage.is-focus .cpg-sheet{width: min(calc(100vw - 16px), calc((100vh - 200px) * 0.7727));width: min(calc(100vw - 16px), calc((100dvh - 200px) * 0.7727));}.cpg-stage.is-focus .cpg-sheet.is-a4{width: min(calc(100vw - 16px), calc((100dvh - 200px) * 0.7071));}.cpg-stage.is-focus .cpg-palette-box{width: 100%;max-height: none;}.cpg-stage.is-focus .cpg-actions{display: none;}}