:root{--ref-bg-1: #f6f1e8;--ref-bg-2: #efe9dd;--ref-paper: #fbf7ef;--ref-ink: #2f2a23;--ref-ink-soft: #4a4238;--ref-muted: #8a7f6f;--ref-line: #e0d6c4;--ref-line-soft: #ece4d3;--ref-accent: #8a6f4a;--ref-accent-soft: #b89a6c;--ref-shadow: 18, 16, 12}body.design-references-page{background:radial-gradient(circle at 12% 8%,rgba(196,170,126,.16),transparent 42%),radial-gradient(circle at 88% 92%,rgba(123,143,130,.1),transparent 46%),linear-gradient(180deg,#f8f2e7,#f1ebe1 42%,#ece9e0);color:var(--ref-ink);min-height:100vh;position:relative}body.design-references-page:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.48  0 0 0 0 0.38  0 0 0 0.045 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");mix-blend-mode:multiply}.design-references-page header.w-full{max-width:none;margin:0;padding:16px clamp(16px,4vw,42px) 10px;position:relative;z-index:2}.design-references-page nav{color:#6f665c}.design-references-page nav a{color:#6f665c}.design-references-page nav a:hover{color:#3f362d}.design-references-page a[href="/"]{background:#dccdb873;color:#5f5142}.design-references-page a[href="/"]:hover{background:#d6c6b09e;color:#44382c}.dr-container{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:28px clamp(20px,4vw,44px) 92px}.dr-hero{text-align:center;margin-bottom:56px;position:relative}.dr-hero:after{content:"";display:block;width:72px;height:2px;margin:18px auto 0;background:linear-gradient(90deg,#ab8b6000,#ab8b6080,#ab8b6000)}.dr-eyebrow{margin:0 0 14px;font-size:.74rem;letter-spacing:.32em;text-transform:uppercase;color:var(--ref-accent);font-weight:500}.dr-title{margin:0;font-size:clamp(1.9rem,3.4vw,2.6rem);letter-spacing:.04em;font-weight:650;color:#3a2f24;line-height:1.18}.dr-subtitle{margin:18px auto 0;max-width:640px;font-size:1rem;color:var(--ref-muted);line-height:1.9}.dr-intro{margin:14px auto 0;max-width:600px;font-size:.86rem;color:#8a7c6a;line-height:1.78;font-style:italic}.dr-section{margin-top:48px;position:relative;opacity:0;transform:translateY(14px);animation:dr-rise .7s cubic-bezier(.22,1,.36,1) forwards}.dr-section:nth-of-type(1){animation-delay:.05s}.dr-section:nth-of-type(2){animation-delay:.12s}.dr-section:nth-of-type(3){animation-delay:.19s}.dr-section:nth-of-type(4){animation-delay:.26s}.dr-section:nth-of-type(5){animation-delay:.33s}@keyframes dr-rise{to{opacity:1;transform:translateY(0)}}.dr-section-head{display:flex;align-items:baseline;gap:14px;margin-bottom:22px;padding-bottom:10px;border-bottom:1px solid var(--ref-line-soft)}.dr-section-index{font-size:.72rem;letter-spacing:.28em;color:var(--ref-accent-soft);font-weight:500;flex-shrink:0}.dr-section-title{margin:0;font-size:1.18rem;font-weight:600;color:#3a2f24;letter-spacing:.02em}.dr-section-hint{margin-left:auto;font-size:.76rem;color:var(--ref-muted);font-style:italic}.dr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}.dr-card{position:relative;display:flex;flex-direction:column;padding:20px 22px 18px;background:linear-gradient(180deg,#fffcf5eb,#f8f2e8db);border:1px solid var(--ref-line);border-radius:4px;text-decoration:none;color:inherit;overflow:hidden;transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s ease,border-color .32s ease;box-shadow:0 1px 2px rgba(var(--ref-shadow),.04),0 6px 18px rgba(var(--ref-shadow),.05);will-change:transform}.dr-card:before{content:"";position:absolute;top:0;right:0;width:64px;height:64px;background:radial-gradient(circle at 100% 0%,rgba(184,154,108,.1),transparent 70%);pointer-events:none}.dr-card:after{content:"";position:absolute;left:22px;right:22px;bottom:14px;height:1px;background:linear-gradient(90deg,#ab8b6000,#ab8b6038,#ab8b6000);transition:background .32s ease}.dr-card:hover{transform:translateY(-3px);border-color:#b89a6c8c;box-shadow:0 2px 4px rgba(var(--ref-shadow),.05),0 14px 32px rgba(var(--ref-shadow),.1),0 0 0 1px #b89a6c14}.dr-card:hover:after{background:linear-gradient(90deg,#ab8b6000,#ab8b6080,#ab8b6000)}.dr-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.dr-card-tag{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ref-accent-soft);font-weight:500}.dr-card-arrow{font-size:.9rem;color:var(--ref-muted);transition:transform .32s ease,color .32s ease}.dr-card:hover .dr-card-arrow{transform:translate(2px,-2px);color:var(--ref-accent)}.dr-card-name{margin:0 0 8px;font-size:1.02rem;font-weight:600;letter-spacing:.01em;color:#2f2a23;line-height:1.4}.dr-card-desc{margin:0 0 14px;font-size:.84rem;color:#7a6f5f;line-height:1.62}.dr-card-host{margin-top:auto;font-size:.72rem;color:#9a8d7a;letter-spacing:.04em;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;word-break:break-all}.design-references-page .footer-pocket{background:#c4b39c2e;border-color:#a894783d}.design-references-page .footer-pocket small{color:#594c3ec7}@media(max-width:640px){.dr-container{padding:18px 16px 64px}.dr-hero{margin-bottom:36px}.dr-grid{grid-template-columns:1fr;gap:14px}.dr-card{padding:18px 18px 16px}.dr-section{margin-top:36px}.dr-section-hint{display:none}}@media(prefers-reduced-motion:reduce){.dr-section{animation:none;opacity:1;transform:none}.dr-card{transition:border-color .2s ease,box-shadow .2s ease}}