.pfge-demo, .pfge-widget { --pfge-bg: #07111f; --pfge-panel: #0d1d30; --pfge-panel-2: #122740; --pfge-line: #26415f; --pfge-text: #edf5ff; --pfge-muted: #8ea7c2; --pfge-gold: #d6a93d; --pfge-green: #38d6a2; box-sizing: border-box; color: var(--pfge-text); color-scheme: dark; font: 15px/1.45 Inter, ui-sans-serif, system-ui, sans-serif; }
.pfge-demo *, .pfge-widget * { box-sizing: border-box; }
.pfge-demo { min-height: 100vh; margin: 0; padding: clamp(18px, 4vw, 56px); background: radial-gradient(circle at 80% -10%, #173351 0, transparent 35%), var(--pfge-bg); }
.pfge-shell { width: min(1240px, 100%); margin: auto; }
.pfge-header { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.pfge-title { margin: 0; color: #fff; font: 400 clamp(42px, 7vw, 84px)/.85 "Bebas Neue", Impact, sans-serif; letter-spacing: .035em; }
.pfge-kicker { margin: 0 0 7px; color: var(--pfge-gold); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.pfge-subtitle { max-width: 650px; margin: 9px 0 0; color: var(--pfge-muted); }
.pfge-grid { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(430px, 1.4fr); gap: 18px; align-items: start; }
.pfge-panel, .pfge-widget { border: 1px solid var(--pfge-line); border-radius: 14px; background: color-mix(in srgb, var(--pfge-panel) 94%, transparent); box-shadow: 0 18px 52px rgba(0,0,0,.25); }
.pfge-panel { padding: 18px; }
.pfge-panel + .pfge-panel { margin-top: 14px; }
.pfge-panel-title { margin: 0 0 14px; font: 400 24px/1 "Bebas Neue", Impact, sans-serif; letter-spacing: .055em; }
.pfge-field { display: grid; gap: 6px; margin-bottom: 13px; }
.pfge-field > label, .pfge-field-label { color: var(--pfge-muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pfge-input, .pfge-select, .pfge-button { min-height: 42px; border: 1px solid var(--pfge-line); border-radius: 8px; color: var(--pfge-text); background: #091725; font: inherit; }
.pfge-input, .pfge-select { width: 100%; padding: 9px 11px; }
.pfge-input:focus, .pfge-select:focus, .pfge-button:focus-visible, .pfge-range:focus-visible { outline: 2px solid var(--pfge-gold); outline-offset: 2px; }
.pfge-seed-row, .pfge-action-row, .pfge-hue-row, .pfge-item-row { display: flex; gap: 8px; align-items: center; }
.pfge-seed-row .pfge-input, .pfge-item-row .pfge-input { flex: 1; min-width: 0; }
.pfge-button { padding: 8px 13px; cursor: pointer; font-weight: 800; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.pfge-button:hover { border-color: var(--pfge-gold); background: #142940; transform: translateY(-1px); }
.pfge-button--primary { border-color: #b88c2c; color: #12100a; background: linear-gradient(135deg, #efce70, var(--pfge-gold)); }
.pfge-button--icon { width: 42px; padding: 0; font-size: 20px; }
.pfge-range { width: 100%; accent-color: var(--pfge-gold); }
.pfge-wear-readout { display: flex; justify-content: space-between; gap: 12px; color: var(--pfge-muted); font-variant-numeric: tabular-nums; }
.pfge-wear-band { color: var(--pfge-gold); font-weight: 800; }
.pfge-widget { position: relative; overflow: hidden; padding: 12px; }
.pfge-canvas { display: block; width: 100%; aspect-ratio: 2 / 1; border-radius: 9px; background: linear-gradient(135deg, #050b13, #101f30); }
.pfge-chrome { min-height: 42px; display: flex; align-items: center; gap: 10px; padding: 10px 2px 0; }
.pfge-mode-badge { flex: 0 0 auto; padding: 4px 8px; border: 1px solid currentColor; border-radius: 999px; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.pfge-mode-badge--simulated { color: #7fa9cf; }
.pfge-mode-badge--real { color: var(--pfge-green); }
.pfge-status { min-width: 0; flex: 1; overflow: hidden; color: var(--pfge-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.pfge-inspect-btn { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; padding: 6px 11px; border: 1px solid #b88c2c; border-radius: 7px; color: #17130b; background: var(--pfge-gold); font: 800 12px/1 inherit; text-decoration: none; cursor: pointer; }
.pfge-inspect-btn--disabled, .pfge-inspect-btn[aria-disabled="true"] { opacity: .5; cursor: wait; pointer-events: none; }
.pfge-dev-panel > summary { cursor: pointer; color: var(--pfge-gold); font-weight: 800; }
.pfge-dev-panel[open] > summary { margin-bottom: 13px; }
.pfge-analysis { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin-top: 12px; padding: 13px; border: 1px solid var(--pfge-line); border-radius: 9px; background: var(--pfge-panel-2); }
.pfge-analysis-value { color: var(--pfge-gold); font: 400 34px/1 "Bebas Neue", Impact, sans-serif; }
.pfge-analysis-meta, .pfge-help { color: var(--pfge-muted); font-size: 12px; }
.pfge-message { min-height: 20px; margin: 8px 0 0; color: #ffbd7b; font-size: 12px; }
.pfge-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 860px) { .pfge-grid { grid-template-columns: 1fr; } .pfge-header { align-items: start; flex-direction: column; } }
@media (max-width: 520px) { .pfge-demo { padding: 14px; } .pfge-seed-row, .pfge-action-row, .pfge-item-row { flex-wrap: wrap; } .pfge-item-row .pfge-input { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { .pfge-demo *, .pfge-widget * { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; } }

/* Existing-site Pattern Viewer integration. */
.pfv-topbar .waterdex-brand { text-align: center; }
.pfv-search-control { display: grid; min-width: min(280px, 32vw); gap: 4px; color: var(--muted, #9cb0c5); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pfv-search-control input { min-height: 38px; border: 1px solid rgba(202, 166, 75, .45); border-radius: 7px; padding: 7px 10px; color: #f1eadc; background: #07182c; font: inherit; font-size: 14px; letter-spacing: normal; text-transform: none; }
.pfv-browser .skin-grid > .pfv-pagebar { grid-column: 1 / -1; }
.skin-infographic-inspect { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 38px; margin-top: 10px; text-align: center; }
.skin-infographic-inspect .pfge-inspect-btn, .pfv-inspect-btn { min-width: 150px; color: #061323; background: linear-gradient(180deg, #ead17d, #c9a44d); box-shadow: 0 7px 18px rgba(202, 166, 75, .18); }
#itemModal .item-modal:has(.pfv-modal) { width: min(1180px, calc(100vw - 28px)) !important; max-height: min(92dvh, 900px) !important; padding: 18px !important; overflow: auto !important; }
#itemModal .item-modal:has(.pfv-modal) #itemModalContent { height: auto !important; min-height: 0 !important; overflow: visible !important; }
.pfv-modal { display: grid; gap: 13px; color: #f1eadc; }
.pfv-modal-head { display: flex; align-items: end; justify-content: center; min-height: 68px; padding: 4px 54px 10px; border-bottom: 1px solid rgba(202, 166, 75, .35); text-align: center; }
.pfv-modal-head small { color: #caa64b; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.pfv-modal-head h1 { margin: 2px 0; color: #f5eddc; font: 700 clamp(26px, 4vw, 44px)/1 var(--font-display, Impact, sans-serif); }
.pfv-modal-head p { margin: 0; color: #9fb3c8; }
.pfv-modal-body { display: grid; grid-template-columns: minmax(220px, .42fr) minmax(520px, 1.3fr); gap: 14px; min-height: 0; }
.pfv-reference-image { display: grid; min-width: 0; margin: 0; padding: 12px; place-items: center; border: 1px solid rgba(202, 166, 75, .28); border-radius: 12px; background: radial-gradient(circle at 50% 34%, #17324d, #071524 72%); }
.pfv-reference-image img { display: block; width: 100%; max-height: 300px; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0,0,0,.42)); }
.pfv-reference-image figcaption { align-self: end; color: #8299b1; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.pfv-render-stage { min-width: 0; padding: 10px; }
.pfv-render-stage .pfge-canvas { max-height: 330px; object-fit: contain; }
.pfv-render-stage .pfge-chrome { flex-wrap: wrap; }
.pfv-controls { display: grid; grid-template-columns: .9fr 1.1fr; gap: 10px; }
.pfv-controls > label, .pfv-inspect-entry { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 11px; border: 1px solid rgba(202, 166, 75, .24); border-radius: 10px; background: #0b1c30; }
.pfv-controls label > span, .pfv-inspect-entry > label { color: #9fb3c8; font-size: 11px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.pfv-controls input, .pfv-controls button { min-height: 38px; border: 1px solid rgba(202, 166, 75, .4); border-radius: 7px; color: #f1eadc; background: #07182c; }
.pfv-controls input { min-width: 0; padding: 7px 9px; }
.pfv-controls button { padding: 7px 10px; cursor: pointer; font-weight: 800; }
.pfv-controls button:hover { border-color: #d8b85f; background: #132d49; }
.pfv-seed-controls, .pfv-inspect-entry > div { display: flex; gap: 6px; min-width: 0; }
.pfv-seed-controls input, .pfv-inspect-entry input { flex: 1; }
.pfv-controls output { color: #d8b85f; font-variant-numeric: tabular-nums; }
.pfv-inspect-entry small, .pfv-inspect-note { color: #8299b1; font-size: 11px; }
.pfv-status { min-height: 18px; margin: 0; color: #d8b85f; text-align: center; font-size: 12px; }
@media (max-width: 900px) { .pfv-modal-body { grid-template-columns: 1fr; } .pfv-reference-image { grid-template-columns: 1fr auto; } .pfv-reference-image img { max-height: 180px; } .pfv-controls { grid-template-columns: 1fr 1fr; } .pfv-inspect-entry { grid-column: 1 / -1; } }
@media (max-width: 620px) { .pfv-search-control { min-width: 100%; } .pfv-controls { grid-template-columns: 1fr; } .pfv-inspect-entry { grid-column: auto; } .pfv-inspect-entry > div { flex-wrap: wrap; } .pfv-inspect-entry input { flex-basis: 100%; } .pfv-modal-head { padding-inline: 38px; } }