:root{--primary: #0f766e;--primary-dark: #115e59;--border: #e3e1da;--surface: #ffffff;--shadow-soft: 0 18px 44px rgba(17,24,39,0.08);--surface-muted: #f6f5f1;--text-main: #111827;--text-muted: #5b6270;--qrg-ink: #111827;--qrg-paper: #fbfaf7;--qrg-tint: #e6f2f0;--qrg-warn: #b45309;--qrg-warn-bg: #fff7ed;--qrg-err: #b91c1c;--qrg-err-bg: #fef2f2;--qrg-radius: 18px;--qrg-radius-sm: 10px;}
.qrg-page{padding-bottom: 3rem;color: var(--text-main);}
.qrg-byline{display: flex;flex-wrap: wrap;gap: 4px 16px;font-size: 0.8rem;color: var(--text-muted);margin: 0 0 1.25rem;}
.qrg-byline .author-link{color: var(--primary-dark);font-weight: 600;text-decoration: none;}
.qrg-byline .author-link:hover{text-decoration: underline;}
.qrg-bench{display: grid;grid-template-columns: 1fr;gap: 1.25rem;margin-bottom: 2.75rem;}
@media (min-width:992px){.qrg-bench{grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr);align-items: start;}}
.qrg-build,.qrg-out{background: var(--surface);border: 1px solid var(--border);border-radius: var(--qrg-radius);box-shadow: var(--shadow-soft);padding: 1.25rem;}
@media (min-width:768px){.qrg-build,.qrg-out{padding: 1.5rem;}}
@media (min-width:992px){.qrg-out{position: sticky;top: 1rem;}}
.qrg-types{display: grid;grid-template-columns: repeat(3,1fr);gap: 0.4rem;padding: 0.35rem;background: var(--surface-muted);border: 1px solid var(--border);border-radius: 14px;margin-bottom: 1.25rem;}
@media (min-width:576px){.qrg-types{grid-template-columns: repeat(6,1fr);}}
.qrg-type{appearance: none;border: 0;background: transparent;border-radius: 10px;padding: 0.6rem 0.4rem;display: flex;flex-direction: column;align-items: center;gap: 0.3rem;font-size: 0.8rem;font-weight: 700;color: var(--text-muted);cursor: pointer;transition: background 0.15s ease,color 0.15s ease;}
.qrg-type svg{width: 20px;height: 20px;fill: none;stroke: currentColor;stroke-width: 1.8;stroke-linecap: round;stroke-linejoin: round;}
.qrg-type:hover{color: var(--qrg-ink);}
.qrg-type[aria-selected="true"]{background: var(--qrg-ink);color: #ffffff;box-shadow: 0 4px 12px rgba(17,24,39,0.18);}
.qrg-type:focus-visible,.qrg-btn:focus-visible,.qrg-input:focus-visible,.qrg-range:focus-visible{outline: 3px solid rgba(15,118,110,0.4);outline-offset: 2px;}
.qrg-panel{display: grid;gap: 0.9rem;}
.qrg-panel[hidden]{display: none;}
.qrg-pair{display: grid;grid-template-columns: 1fr;gap: 0.9rem;}
@media (min-width:576px){.qrg-pair{grid-template-columns: 1fr 1fr;}}
.qrg-field{display: flex;flex-direction: column;gap: 0.35rem;margin: 0;min-width: 0;}
.qrg-label{font-size: 0.8rem;font-weight: 700;letter-spacing: 0.03em;text-transform: uppercase;color: var(--text-muted);}
.qrg-label output{color: var(--qrg-ink);font-weight: 800;}
.qrg-input{width: 100%;border: 1.5px solid var(--border);border-radius: var(--qrg-radius-sm);background: var(--qrg-paper);padding: 0.7rem 0.85rem;font-size: 0.98rem;color: var(--qrg-ink);transition: border-color 0.15s ease,background 0.15s ease;}
.qrg-input:hover{border-color: #c9c6bb;}
.qrg-input:focus{border-color: var(--primary);background: #ffffff;outline: none;}
.qrg-area{resize: vertical;min-height: 92px;line-height: 1.5;}
select.qrg-input{cursor: pointer;}
.qrg-help{font-size: 0.82rem;line-height: 1.5;color: var(--text-muted);}
.qrg-help code{font-size: 0.8rem;background: var(--surface-muted);padding: 0.05rem 0.3rem;border-radius: 4px;color: var(--qrg-ink);}
.qrg-check{display: flex;align-items: center;gap: 0.55rem;font-size: 0.92rem;color: var(--text-main);cursor: pointer;margin: 0;}
.qrg-check input{width: 18px;height: 18px;accent-color: var(--primary);}
.qrg-panel-bar{display: flex;flex-wrap: wrap;gap: 0.5rem;align-items: center;margin: 1.1rem 0 0;padding-bottom: 1.25rem;border-bottom: 1px solid var(--border);}
.qrg-design{display: grid;grid-template-columns: 1fr 1fr;gap: 0.9rem;border: 0;padding: 0;margin: 1.25rem 0 0;min-width: 0;}
.qrg-design legend{float: left;width: 100%;font-size: 0.95rem;font-weight: 800;color: var(--qrg-ink);margin: 0 0 0.15rem;grid-column: 1 / -1;}
.qrg-span{grid-column: 1 / -1;}
.qrg-swatch{display: flex;align-items: center;gap: 0.6rem;border: 1.5px solid var(--border);border-radius: var(--qrg-radius-sm);background: var(--qrg-paper);padding: 0.35rem 0.6rem;}
.qrg-swatch input{width: 34px;height: 34px;border: 0;padding: 0;background: none;cursor: pointer;}
.qrg-swatch output{font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size: 0.88rem;color: var(--qrg-ink);}
.qrg-range{width: 100%;accent-color: var(--primary);}
.qrg-btn{appearance: none;border-radius: var(--qrg-radius-sm);padding: 0.65rem 1rem;font-size: 0.92rem;font-weight: 700;cursor: pointer;border: 1.5px solid transparent;transition: background 0.15s ease,border-color 0.15s ease,color 0.15s ease,transform 0.15s ease;display: inline-flex;align-items: center;justify-content: center;gap: 0.35rem;}
.qrg-btn:disabled{opacity: 0.45;cursor: not-allowed;}
.qrg-btn-main{background: var(--primary);color: #ffffff;}
.qrg-btn-main:not(:disabled):hover{background: var(--primary-dark);transform: translateY(-1px);}
.qrg-btn-main .qrg-px{font-weight: 500;opacity: 0.85;}
.qrg-btn-ghost{background: #ffffff;border-color: var(--border);color: var(--qrg-ink);}
.qrg-btn-ghost:not(:disabled):hover{border-color: var(--primary);color: var(--primary-dark);}
.qrg-btn-text{background: transparent;color: var(--text-muted);padding-left: 0.5rem;padding-right: 0.5rem;}
.qrg-btn-text:hover{color: var(--qrg-err);}
.qrg-btn.is-done{background: var(--qrg-tint);border-color: var(--primary);color: var(--primary-dark);}
.qrg-stage{display: flex;align-items: center;justify-content: center;aspect-ratio: 1 / 1;max-width: 340px;margin: 0 auto;border-radius: 14px;background-color: var(--surface-muted);background-image: linear-gradient(45deg,#ecebe5 25%,transparent 25%,transparent 75%,#ecebe5 75%),linear-gradient(45deg,#ecebe5 25%,transparent 25%,transparent 75%,#ecebe5 75%);background-size: 18px 18px;background-position: 0 0,9px 9px;padding: 1rem;}
.qrg-canvas{width: 100%;height: auto;image-rendering: pixelated;border-radius: 4px;box-shadow: 0 6px 18px rgba(17,24,39,0.12);}
.qrg-empty{margin: 0;max-width: 220px;text-align: center;font-size: 0.92rem;line-height: 1.5;color: var(--text-muted);background: var(--surface);padding: 0.9rem 1rem;border-radius: var(--qrg-radius-sm);border: 1px dashed var(--border);}
.qrg-empty.is-error{color: var(--qrg-err);border-color: var(--qrg-err);background: var(--qrg-err-bg);}
.qrg-stats{display: grid;grid-template-columns: repeat(2,1fr);gap: 0.5rem;margin: 1rem 0 0;}
@media (min-width:480px){.qrg-stats{grid-template-columns: repeat(4,1fr);}}
.qrg-stats[hidden]{display: none;}
.qrg-stats div{background: var(--surface-muted);border-radius: var(--qrg-radius-sm);padding: 0.5rem 0.6rem;}
.qrg-stats dt{font-size: 0.68rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.04em;color: var(--text-muted);}
.qrg-stats dd{margin: 0.1rem 0 0;font-size: 0.95rem;font-weight: 800;color: var(--qrg-ink);font-variant-numeric: tabular-nums;}
.qrg-notes{list-style: none;padding: 0;margin: 0.75rem 0 0;display: grid;gap: 0.4rem;}
.qrg-notes:empty{display: none;}
.qrg-notes li{font-size: 0.85rem;line-height: 1.45;padding: 0.5rem 0.7rem;border-radius: 8px;border-left: 3px solid var(--primary);background: var(--qrg-tint);color: var(--primary-dark);}
.qrg-notes li.is-warn{border-left-color: var(--qrg-warn);background: var(--qrg-warn-bg);color: var(--qrg-warn);}
.qrg-actions{display: grid;grid-template-columns: 1fr 1fr;gap: 0.5rem;margin-top: 1rem;}
.qrg-actions .qrg-btn-main{grid-column: 1 / -1;padding: 0.8rem 1rem;font-size: 1rem;}
.qrg-actions [hidden]{display: none;}
.qrg-payload-wrap{margin-top: 1rem;display: grid;gap: 0.35rem;}
.qrg-payload{margin: 0;max-height: 160px;overflow: auto;white-space: pre-wrap;word-break: break-all;font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size: 0.8rem;line-height: 1.5;background: var(--qrg-ink);color: #e5e7eb;border-radius: var(--qrg-radius-sm);padding: 0.75rem 0.85rem;}
.qrg-article{margin: 0 0 2.5rem;font-size: 1rem;line-height: 1.7;color: var(--text-main);}
.qrg-article h2{font-size: 1.5rem;font-weight: 800;letter-spacing: -0.01em;color: var(--qrg-ink);margin: 2.25rem 0 0.75rem;}
.qrg-article h2:first-child{margin-top: 0;}
.qrg-article h3{font-size: 1.12rem;font-weight: 700;color: var(--qrg-ink);margin: 1.5rem 0 0.5rem;}
.qrg-article p{margin: 0 0 0.9rem;}
.qrg-article ul{padding-left: 1.2rem;margin: 0 0 1rem;}
.qrg-article li{margin-bottom: 0.45rem;}
.qrg-article a{color: var(--primary-dark);font-weight: 600;}
.qrg-article code{font-size: 0.86em;background: var(--surface-muted);border: 1px solid var(--border);padding: 0.05rem 0.3rem;border-radius: 5px;color: var(--qrg-ink);word-break: break-word;}
.qrg-table-wrap{overflow-x: auto;border: 1px solid var(--border);border-radius: var(--qrg-radius-sm);margin: 0 0 1rem;}
.qrg-table{width: 100%;border-collapse: collapse;font-size: 0.9rem;min-width: 620px;}
.qrg-table th{background: var(--qrg-ink);color: #ffffff;text-align: left;font-weight: 700;padding: 0.6rem 0.8rem;}
.qrg-table td{padding: 0.6rem 0.8rem;border-top: 1px solid var(--border);vertical-align: top;}
.qrg-table td:first-child{font-weight: 700;white-space: nowrap;}
.qrg-table tbody tr:nth-child(even){background: var(--qrg-paper);}
.qrg-table code{border: 0;background: transparent;padding: 0;font-size: 0.82rem;}
.qrg-ec-grid{display: grid;grid-template-columns: 1fr;gap: 0.75rem;margin: 1rem 0 1.1rem;}
@media (min-width:576px){.qrg-ec-grid{grid-template-columns: 1fr 1fr;}}
@media (min-width:992px){.qrg-ec-grid{grid-template-columns: repeat(4,1fr);}}
.qrg-ec{position: relative;display: flex;flex-direction: column;gap: 0.4rem;padding: 1rem;border: 1px solid var(--border);border-radius: 14px;background: var(--surface);}
.qrg-ec-on{border-color: var(--primary);box-shadow: 0 0 0 3px var(--qrg-tint);}
.qrg-ec-tag{display: inline-flex;align-items: center;justify-content: center;width: 34px;height: 34px;border-radius: 8px;background: var(--qrg-ink);color: #ffffff;font-weight: 800;font-size: 1.05rem;}
.qrg-ec-bar{display: block;height: 6px;border-radius: 99px;background: var(--surface-muted);overflow: hidden;}
.qrg-ec-bar::after{content: "";display: block;height: 100%;width: var(--fill);background: var(--primary);border-radius: inherit;}
.qrg-ec strong{font-size: 0.95rem;color: var(--qrg-ink);}
.qrg-ec p{font-size: 0.88rem;line-height: 1.5;color: var(--text-muted);margin: 0;flex: 1;}
.qrg-ec-mod{font-size: 0.78rem;font-weight: 700;color: var(--primary-dark);font-variant-numeric: tabular-nums;}
.qrg-formula{background: var(--qrg-ink);color: #e5e7eb;border-radius: var(--qrg-radius-sm);padding: 1rem 1.1rem;font-size: 0.86rem;line-height: 1.7;overflow-x: auto;margin: 0 0 1rem;}
.qrg-formula code{background: transparent;border: 0;color: inherit;padding: 0;font-size: inherit;}
.qrg-limits{display: grid;gap: 0;border: 1px solid var(--border);border-left: 4px solid var(--qrg-warn);border-radius: var(--qrg-radius-sm);background: var(--qrg-paper);}
.qrg-limits p{margin: 0;padding: 0.85rem 1rem;font-size: 0.95rem;}
.qrg-limits p + p{border-top: 1px solid var(--border);}
.qrg-checklist{counter-reset: qrg;list-style: none;padding: 0;margin: 0;display: grid;gap: 0.6rem;}
.qrg-checklist li{counter-increment: qrg;position: relative;padding: 0.7rem 0.9rem 0.7rem 3.1rem;background: var(--surface);border: 1px solid var(--border);border-radius: var(--qrg-radius-sm);margin: 0;}
.qrg-checklist li::before{content: counter(qrg);position: absolute;left: 0.75rem;top: 0.65rem;width: 26px;height: 26px;border-radius: 6px;background: var(--qrg-tint);color: var(--primary-dark);font-weight: 800;font-size: 0.85rem;display: flex;align-items: center;justify-content: center;}
@media (prefers-reduced-motion:reduce){.qrg-type,.qrg-btn,.qrg-input{transition: none;}.qrg-btn-main:not(:disabled):hover{transform: none;}}