:root{--hd-color-primary:#1A2B1F;--hd-color-primary-mid:#2D4A35;--hd-color-primary-light:#3D6B47;--hd-color-accent:#B87333;--hd-color-accent-light:#D4924A;--hd-color-accent-pale:#F5EDD9;--hd-color-white:#FFFFFF;--hd-color-bg:#F8F7F4;--hd-color-bg-alt:#EFEFEB;--hd-color-surface:#FFFFFF;--hd-color-text-main:#1A2B1F;--hd-color-text-body:#3A4A3E;--hd-color-text-muted:#6B7B6E;--hd-color-text-light:#9BAA9E;--hd-color-border:#E2E0DA;--hd-color-border-strong:#C8C5BC;--hd-color-success:#2D6A4F;--hd-color-highlight:#F2EFE9;--hd-font-display:'Sora', sans-serif;--hd-font-body:'Inter', sans-serif;--hd-radius-sm:6px;--hd-radius-md:10px;--hd-radius-lg:16px;--hd-radius-xl:24px;--hd-radius-pill:100px;--hd-shadow-sm:0 1px 3px rgba(26,43,31,0.07), 0 1px 2px rgba(26,43,31,0.04);--hd-shadow-md:0 4px 16px rgba(26,43,31,0.09), 0 2px 6px rgba(26,43,31,0.05);--hd-shadow-lg:0 12px 40px rgba(26,43,31,0.12), 0 4px 12px rgba(26,43,31,0.06);--hd-transition:0.25s cubic-bezier(0.4, 0, 0.2, 1);--hd-transition-slow:0.5s cubic-bezier(0.4, 0, 0.2, 1);--hd-header-height:72px;--hd-announcement-height:40px}*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:var(--hd-font-body);background:var(--hd-color-bg);color:var(--hd-color-text-body);-webkit-font-smoothing:antialiased}.demo-page{max-width:720px;margin:0 auto;padding:88px 24px 120px}.demo-eyebrow{font-family:var(--hd-font-body);font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--hd-color-accent);margin-bottom:14px}.demo-title{font-family:var(--hd-font-display);font-size:clamp(28px, 4.5vw, 38px);font-weight:700;color:var(--hd-color-primary);letter-spacing:-.02em;margin:0 0 12px;line-height:1.15}.demo-sub{font-size:15.5px;color:var(--hd-color-text-muted);line-height:1.6;max-width:46ch;margin:0 0 44px}.demo-label{font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--hd-color-text-main);margin-bottom:16px}.swatch-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.demo-swatch{width:44px;height:44px;border-radius:var(--hd-radius-sm);border:1px solid var(--hd-color-border);box-shadow:var(--hd-shadow-sm);cursor:pointer;transition:transform var(--hd-transition),box-shadow var(--hd-transition);position:relative}.demo-swatch:hover{transform:translateY(-2px);box-shadow:var(--hd-shadow-md)}.demo-swatch--custom{width:auto;height:44px;padding:0 18px 0 14px;border-radius:var(--hd-radius-pill);background:var(--hd-color-primary);border:1px solid var(--hd-color-primary);display:inline-flex;align-items:center;gap:9px;color:var(--hd-color-white);font-family:var(--hd-font-body);font-size:13.5px;font-weight:600;letter-spacing:.01em}.demo-swatch--custom i{font-size:12px;color:var(--hd-color-accent-light)}.demo-swatch--custom:hover{background:var(--hd-color-primary-mid);border-color:var(--hd-color-primary-mid)}.demo-swatch--custom:hover i{transform:rotate(90deg)}.demo-swatch--custom i{transition:transform var(--hd-transition)}.demo-note{margin-top:28px;padding:14px 16px;background:var(--hd-color-surface);border:1px solid var(--hd-color-border);border-radius:var(--hd-radius-md);font-size:13px;color:var(--hd-color-text-muted);display:flex;gap:10px;align-items:flex-start;line-height:1.55}.demo-note i{color:var(--hd-color-accent);margin-top:2px}.ral-overlay{position:fixed;inset:0;background:rgb(15 22 17 / .56);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px;z-index:1000;opacity:0;visibility:hidden;transition:opacity var(--hd-transition-slow),visibility var(--hd-transition-slow)}.ral-overlay.is-open{opacity:1;visibility:visible}.ral-modal{width:100%;max-width:1080px;height:min(760px, 90vh);background:var(--hd-color-surface);border-radius:var(--hd-radius-xl);box-shadow:var(--hd-shadow-lg);display:flex;flex-direction:column;overflow:hidden;transform:translateY(18px) scale(.98);opacity:0;transition:transform var(--hd-transition-slow),opacity var(--hd-transition-slow)}.ral-overlay.is-open .ral-modal{transform:translateY(0) scale(1);opacity:1}@media (prefers-reduced-motion:reduce){.ral-overlay,.ral-modal,.swatch,.ral-group-btn,.ral-swatch-selected-ring,.fa-spin-slow{transition:none!important;animation:none!important}}.ral-header{flex-shrink:0;background:var(--hd-color-primary);background-image:linear-gradient(135deg,var(--hd-color-primary) 0%,var(--hd-color-primary-mid) 100%);padding:22px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative}.ral-header::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--hd-color-accent) 0%,var(--hd-color-accent-light) 50%,var(--hd-color-accent) 100%);opacity:.9}.ral-header-text{min-width:0}.ral-header-eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--hd-color-accent-light);margin:0 0 4px;display:flex;align-items:center;gap:8px}.ral-header-eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--hd-color-accent-light);display:inline-block}.ral-header h2{font-family:var(--hd-font-display);font-size:22px;font-weight:700;color:var(--hd-color-white);margin:0;letter-spacing:-.01em}.ral-header-meta{font-size:13px;color:rgb(255 255 255 / .62);margin-top:4px;font-weight:400}.ral-close-btn{flex-shrink:0;width:38px;height:38px;border-radius:50%;border:1px solid rgb(255 255 255 / .18);background:rgb(255 255 255 / .08);color:var(--hd-color-white);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;transition:background var(--hd-transition),border-color var(--hd-transition),transform var(--hd-transition)}.ral-close-btn:hover{background:rgb(255 255 255 / .16);border-color:rgb(255 255 255 / .3);transform:rotate(90deg)}.ral-close-btn:focus-visible{outline:2px solid var(--hd-color-accent-light);outline-offset:2px}.ral-toolbar{flex-shrink:0;padding:16px 28px;border-bottom:1px solid var(--hd-color-border);display:flex;align-items:center;gap:16px;background:var(--hd-color-surface)}.ral-search{flex:1;position:relative;max-width:360px}.ral-search i.fa-magnifying-glass{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--hd-color-text-light);font-size:13.5px;pointer-events:none}.ral-search input{width:100%;padding:10px 14px 10px 38px;border-radius:var(--hd-radius-pill);border:1px solid var(--hd-color-border);background:var(--hd-color-bg);font-family:var(--hd-font-body);font-size:13.5px;color:var(--hd-color-text-main);transition:border-color var(--hd-transition),box-shadow var(--hd-transition),background var(--hd-transition)}.ral-search input::placeholder{color:var(--hd-color-text-light)}.ral-search input:focus{outline:none;border-color:var(--hd-color-accent);background:var(--hd-color-white);box-shadow:0 0 0 3px var(--hd-color-accent-pale)}.ral-search-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;border:none;background:#fff0;color:var(--hd-color-text-light);cursor:pointer;display:none;align-items:center;justify-content:center;font-size:11px}.ral-search-clear.is-visible{display:flex}.ral-search-clear:hover{background:var(--hd-color-bg-alt);color:var(--hd-color-text-muted)}.ral-result-count{font-size:12.5px;color:var(--hd-color-text-muted);white-space:nowrap;font-variant-numeric:tabular-nums}.ral-result-count strong{color:var(--hd-color-text-main);font-weight:600}.ral-toolbar-right{margin-left:auto;display:flex;align-items:center;gap:6px;flex-shrink:0}.ral-note-pill{display:none;align-items:center;gap:6px;font-size:11.5px;color:var(--hd-color-text-light);padding:6px 10px;border-radius:var(--hd-radius-pill);background:var(--hd-color-bg)}@media (min-width:900px){.ral-note-pill{display:inline-flex}}.ral-note-pill i{color:var(--hd-color-text-light);font-size:10px}.ral-body{flex:1;display:flex;min-height:0}.ral-rail{flex-shrink:0;width:196px;border-right:1px solid var(--hd-color-border);background:var(--hd-color-bg);padding:16px 12px;overflow-y:auto}.ral-rail-heading{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--hd-color-text-light);padding:4px 10px 10px}.ral-group-btn{width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--hd-radius-sm);border:none;background:#fff0;cursor:pointer;font-family:var(--hd-font-body);font-size:13.5px;font-weight:500;color:var(--hd-color-text-body);text-align:left;margin-bottom:2px;transition:background var(--hd-transition),color var(--hd-transition)}.ral-group-btn:hover{background:var(--hd-color-bg-alt)}.ral-group-btn:focus-visible{outline:2px solid var(--hd-color-accent);outline-offset:-2px}.ral-group-btn.is-active{background:var(--hd-color-primary);color:var(--hd-color-white)}.ral-group-btn.is-active .ral-group-count{color:rgb(255 255 255 / .55)}.ral-group-swatch{width:16px;height:16px;border-radius:5px;flex-shrink:0;border:1px solid rgb(0 0 0 / .08)}.ral-group-label{flex:1}.ral-group-count{font-size:11.5px;color:var(--hd-color-text-light);font-variant-numeric:tabular-nums}.ral-rail-divider{height:1px;background:var(--hd-color-border);margin:12px 6px}.ral-grid-scroll{flex:1;overflow-y:auto;padding:20px 24px 24px;min-width:0}.ral-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:10px}.swatch{position:relative;aspect-ratio:1;border-radius:var(--hd-radius-sm);border:1px solid rgb(0 0 0 / .07);cursor:pointer;transition:transform 0.15s cubic-bezier(.4,0,.2,1),box-shadow 0.15s cubic-bezier(.4,0,.2,1);padding:0;outline-offset:2px}.swatch:hover{transform:scale(1.08);box-shadow:var(--hd-shadow-md);z-index:2}.swatch:focus-visible{outline:2px solid var(--hd-color-accent);z-index:3}.swatch.is-selected{box-shadow:0 0 0 2px var(--hd-color-surface),0 0 0 4px var(--hd-color-accent);transform:scale(1.05);z-index:2}.swatch.is-selected::after{content:'\f00c';font-family:'Font Awesome 5 Free';font-weight:900;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--swatch-check-color,#fff);text-shadow:0 1px 3px rgb(0 0 0 / .35)}.swatch.is-light-check::after{--swatch-check-color:#1A2B1F;text-shadow:none}.ral-empty-state{display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 20px;color:var(--hd-color-text-muted)}.ral-empty-state.is-visible{display:flex}.ral-empty-state i{font-size:28px;color:var(--hd-color-border-strong);margin-bottom:14px}.ral-empty-state p{margin:0 0 4px;font-size:14.5px;font-weight:600;color:var(--hd-color-text-main)}.ral-empty-state span{font-size:13px}.ral-inspector{flex-shrink:0;border-top:1px solid var(--hd-color-border);background:var(--hd-color-bg-alt);padding:18px 28px;display:flex;align-items:center;gap:20px}.ral-inspector-chip{width:64px;height:64px;border-radius:var(--hd-radius-md);border:1px solid rgb(0 0 0 / .08);flex-shrink:0;box-shadow:var(--hd-shadow-sm);background:var(--hd-color-border);position:relative;overflow:hidden}.ral-inspector-chip::before{content:'';position:absolute;inset:0;background-image:linear-gradient(45deg,#ddd 25%,transparent 25%),linear-gradient(-45deg,#ddd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ddd 75%),linear-gradient(-45deg,transparent 75%,#ddd 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0;opacity:0}.ral-inspector-chip.is-empty::before{opacity:1}.ral-inspector-info{min-width:0;flex:1}.ral-inspector-code-row{display:flex;align-items:baseline;gap:10px;margin-bottom:2px}.ral-inspector-code{font-family:var(--hd-font-display);font-size:19px;font-weight:700;color:var(--hd-color-primary);letter-spacing:-.01em;font-variant-numeric:tabular-nums}.ral-inspector-name{font-size:14px;color:var(--hd-color-text-body);font-weight:500}.ral-inspector-hex{font-size:12px;color:var(--hd-color-text-light);font-family:'SF Mono','Courier New',monospace;letter-spacing:.01em}.ral-inspector-placeholder{font-size:13.5px;color:var(--hd-color-text-muted);line-height:1.5}.ral-inspector-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.ral-btn{font-family:var(--hd-font-body);font-size:13.5px;font-weight:600;border-radius:var(--hd-radius-pill);padding:11px 20px;border:1px solid #fff0;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background var(--hd-transition),border-color var(--hd-transition),transform var(--hd-transition),opacity var(--hd-transition);white-space:nowrap}.ral-btn:disabled{opacity:.45;cursor:not-allowed}.ral-btn:active:not(:disabled){transform:scale(.97)}.ral-btn--ghost{background:var(--hd-color-surface);border-color:var(--hd-color-border-strong);color:var(--hd-color-text-body)}.ral-btn--ghost:hover:not(:disabled){border-color:var(--hd-color-text-light);background:var(--hd-color-white)}.ral-btn--primary{background:var(--hd-color-primary);color:var(--hd-color-white)}.ral-btn--primary:hover:not(:disabled){background:var(--hd-color-primary-mid)}.ral-btn--primary:focus-visible,.ral-btn--ghost:focus-visible{outline:2px solid var(--hd-color-accent);outline-offset:2px}.ral-btn.is-confirmed{background:var(--hd-color-success)}@media (max-width:860px){.ral-modal{max-width:100%;height:100dvh;max-height:100dvh;border-radius:0}.ral-overlay{padding:0}.ral-header{padding:18px 18px}.ral-header h2{font-size:18px}.ral-toolbar{padding:14px 18px;flex-wrap:wrap}.ral-search{max-width:none;order:1;flex-basis:100%}.ral-result-count{order:2}.ral-toolbar-right{order:3;margin-left:auto}.ral-note-pill{display:none!important}.ral-body{flex-direction:column}.ral-rail{width:100%;border-right:none;border-bottom:1px solid var(--hd-color-border);padding:10px 14px;display:flex;flex-direction:row;overflow-x:auto;overflow-y:visible;gap:6px;-webkit-overflow-scrolling:touch}.ral-rail-heading,.ral-rail-divider{display:none}.ral-group-btn{flex-shrink:0;width:auto;padding:8px 12px;border-radius:var(--hd-radius-pill);border:1px solid var(--hd-color-border);margin-bottom:0}.ral-group-btn.is-active{border-color:var(--hd-color-primary)}.ral-group-count{display:none}.ral-grid-scroll{padding:16px 16px 20px}.ral-grid{grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:8px}.ral-inspector{padding:14px 16px;gap:14px}.ral-inspector-chip{width:52px;height:52px}.ral-inspector-code{font-size:17px}.ral-inspector-actions{flex-direction:column;align-items:stretch}.ral-btn{padding:10px 16px;font-size:13px;justify-content:center}.ral-inspector-placeholder{font-size:12.5px}}@media (max-width:480px){.ral-header-eyebrow{font-size:10.5px}.ral-header h2{font-size:16.5px}.ral-header-meta{display:none}.ral-grid{grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:7px}.ral-inspector{flex-wrap:wrap}.ral-inspector-info{flex-basis:100%;order:1}.ral-inspector-chip{order:0}.ral-inspector-actions{flex-basis:100%;order:2;flex-direction:row}.ral-btn{flex:1}}.ral-grid-scroll::-webkit-scrollbar,.ral-rail::-webkit-scrollbar{width:8px;height:8px}.ral-grid-scroll::-webkit-scrollbar-track,.ral-rail::-webkit-scrollbar-track{background:#fff0}.ral-grid-scroll::-webkit-scrollbar-thumb,.ral-rail::-webkit-scrollbar-thumb{background:var(--hd-color-border-strong);border-radius:10px}.ral-grid-scroll::-webkit-scrollbar-thumb:hover,.ral-rail::-webkit-scrollbar-thumb:hover{background:var(--hd-color-text-light)}.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}