.reference-explorer { --ref-accent: #9ee55a; border-top: 1px solid var(--color-line); }
.projects-section > .container > .section-head { opacity: 1; transform: none; }
.reference-explorer [hidden] { display: none !important; }
.reference-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 23px 0; }
.reference-edition { color: var(--color-muted); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; display: flex; align-items: center; gap: 12px; }
.reference-edition i { width: 6px; height: 6px; background: var(--ref-accent); border-radius: 50%; box-shadow: 0 0 15px #9ee55a55; }
.reference-view-toggle { background: none; border: 0; padding: 8px 0 8px 12px; font-size: .76rem; color: var(--color-muted); cursor: pointer; white-space: nowrap; }
.reference-view-toggle span { margin-left: 10px; color: var(--ref-accent); }
.reference-interactive { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px 56px; align-items: center; }
.reference-stage-wrap { position: relative; min-width: 0; }
.reference-stage-wrap::before { content: ""; position: absolute; width: 58%; height: 7%; left: 21%; bottom: 14%; border-radius: 50%; background: #000; filter: blur(18px); opacity: .65; pointer-events: none; }
.reference-stage { width: 100%; height: 530px; position: relative; background: radial-gradient(ellipse at 48% 40%, #9ee55a0c, transparent 65%); border-radius: 50%; cursor: grab; touch-action: pan-y; }
.reference-stage.is-dragging { cursor: grabbing; }
.reference-stage canvas { display: block; width: 100%; height: 100%; border-radius: inherit; }
.reference-stage:focus-visible { outline: 2px solid var(--ref-accent); outline-offset: -10px; }
.reference-stage-footer { display: flex; align-items: center; justify-content: center; gap: 18px; margin: -12px 0 20px; position: relative; pointer-events: none; }
.reference-axis { font-size: .72rem; color: var(--ref-accent); border: 1px solid #9ee55a3a; padding: 6px 10px; border-radius: 50%; }
.reference-stage-footer p { margin: 0; font-size: .72rem; color: var(--color-muted); }
.reference-stage-footer p span { margin: 0 6px; color: #637064; }
.reference-details { padding-right: 15px; }
.reference-meta { display: flex; align-items: center; gap: 24px; margin-bottom: 29px; }
.reference-counter { font-size: 1rem; color: var(--ref-accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.reference-counter span { color: #65706a; font-size: .76rem; }
.reference-type { font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: var(--color-muted); }
.reference-copy { min-height: 210px; }
.reference-copy h3 { margin: 0 0 19px; font-size: clamp(1.8rem, 3.1vw, 2.7rem); letter-spacing: -.045em; line-height: 1.12; overflow-wrap: break-word; }
.reference-copy p { margin: 0; color: var(--color-muted); max-width: 40ch; font-size: .95rem; line-height: 1.8; }
.reference-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 26px; }
.reference-tags span { border: 1px solid #ffffff20; border-radius: 30px; padding: 5px 11px; color: #cbd0c7; font-size: .7rem; }
.reference-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 45px; font-size: .85rem; font-weight: 650; padding-bottom: 10px; border-bottom: 1px solid #9ee55a77; }
.reference-link span { color: var(--ref-accent); font-size: 1.3rem; transition: transform .2s; }
.reference-link:hover span { transform: translate(3px,-3px); }
.reference-pagination { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--color-line); padding-top: 20px; margin-top: 34px; }
.reference-pagination button { width: 42px; height: 42px; flex: 0 0 auto; border: 1px solid #ffffff25; border-radius: 50%; background: transparent; font-size: 1.2rem; cursor: pointer; }
.reference-pagination span { color: var(--color-muted); font-size: .69rem; text-align: center; }
.reference-pagination button:hover { background: var(--ref-accent); border-color: var(--ref-accent); color: #0e160b; }
.reference-project-picker { display: flex; position: relative; min-width: 0; grid-column: 1 / -1; border-top: 1px solid var(--color-line); margin-top: 20px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #7eaa4d #ffffff0b; padding: 0 0 8px; }
.reference-project-picker button { display: flex; flex: 0 0 auto; align-items: center; gap: 16px; padding: 23px 20px; min-height: 62px; text-align: left; border: 0; border-top: 2px solid transparent; background: transparent; cursor: pointer; color: var(--color-muted); font-size: .85rem; }
.reference-project-picker button span { color: #687368; font-size: .67rem; font-variant-numeric: tabular-nums; }
.reference-project-picker button[aria-pressed="true"] { border-color: var(--ref-accent); color: var(--color-text); background: linear-gradient(#9ee55a09, transparent); }
.reference-project-picker button[aria-pressed="true"] span { color: var(--ref-accent); }
.reference-explorer button:focus-visible, .reference-link:focus-visible { outline: 2px solid var(--ref-accent); outline-offset: 4px; }
.reference-explorer .project-grid { padding: 14px 0 0; }
.reference-explorer .project-card { display: flex; flex-direction: column; min-height: 0; overflow: hidden; opacity: 1; transform: none; }
.reference-explorer .project-card::after { display: none; }
.reference-explorer .project-card-c { grid-column: auto; }
.reference-explorer .project-media { position: relative; inset: auto; aspect-ratio: 3 / 2; flex: 0 0 auto; background: #151a16; }
.reference-explorer .project-media img { width: 100%; height: 100%; object-fit: cover; }
.reference-explorer .project-content { position: relative; padding: 26px; flex: 1; background: #101513; }
.reference-explorer .project-content h3 { font-size: 1.35rem; }
.reference-explorer .project-content a { margin-top: 20px; }
@media (max-width: 1000px) {
  .reference-interactive { gap: 10px 25px; grid-template-columns: 1.1fr 1fr; }
  .reference-stage { height: 450px; }
  .reference-copy { min-height: 200px; }
  .reference-stage-footer { gap: 8px; }
  .reference-stage-footer p { max-width: 210px; text-align: center; }
  .reference-project-picker button { font-size: .75rem; gap: 9px; }
}
@media (max-width: 720px) {
  .reference-toolbar { padding: 16px 0; gap: 6px; }
  .reference-edition { font-size: .58rem; gap: 7px; letter-spacing: .07em; }
  .reference-view-toggle { font-size: .66rem; }
  .reference-interactive { grid-template-columns: 1fr; gap: 0; }
  .reference-stage { height: min(108vw, 460px); }
  .reference-stage-footer { margin: -8px 0 24px; }
  .reference-stage-footer p { max-width: none; font-size: .65rem; }
  .reference-details { padding: 18px 4px 0; border-top: 1px solid var(--color-line); }
  .reference-meta { margin-bottom: 18px; gap: 18px; }
  .reference-copy { min-height: 167px; }
  .reference-copy h3 { font-size: 2rem; max-width: 20ch; }
  .reference-copy p { font-size: .88rem; }
  .reference-tags { margin: 15px 0 22px; }
  .reference-pagination { margin-top: 25px; }
  .reference-project-picker { margin-top: 24px; }
  .reference-project-picker button { display: flex; flex-direction: column; align-items: flex-start; max-width: 165px; font-size: .7rem; padding: 16px 14px; gap: 6px; line-height: 1.4; }
}
@media (prefers-reduced-motion: reduce) {
  .reference-explorer *, .reference-explorer *::after { animation: none !important; transition: none !important; }
}