.project-detail { --surface: #f6f7f6; }
.project-detail.dark-mode { --surface: #202324; }
.project-shell { box-sizing: border-box; width: 100%; max-width: 1040px; padding: 28px 40px 48px; margin: 0 auto; }
.project-shell a, .project-shell a:visited { color: var(--accent); }
.project-hero { padding: 64px 0 34px; }
.project-hero h1 { margin: 0 0 20px; font-size: clamp(32px, 6vw, 56px); font-weight: 500; letter-spacing: -.05em; line-height: 1.15; overflow-wrap: anywhere; }
.project-hero p { max-width: 660px; color: var(--soft); line-height: 1.85; font-size: 15px; margin: 0 0 26px; }
.project-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.project-shell .button, .project-shell .button:visited { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--bg); padding: 12px 18px; border: 1px solid var(--accent); border-radius: 5px; font-size: 12px; font-weight: 500; text-decoration: none; }
.project-shell .button.secondary, .project-shell .button.secondary:visited { background: transparent; color: var(--text); border-color: var(--border); }
.project-shell .project-source, .project-shell .project-source:visited { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; min-height: 44px; margin-left: auto; color: var(--text); text-decoration: none; }
.project-source svg { display: block; width: 22px; height: 22px; }
.project-source:hover { opacity: .75; }
.project-source:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.button:hover { filter: brightness(.92); }
.project-visual { margin: 0 0 48px; }
.project-visual img { width: 100%; height: auto; display: block; border: 1px solid var(--border); border-radius: 8px; box-sizing: border-box; background: #121616; }
.project-visual figcaption { margin-top: 12px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.project-section { padding: 32px 0; border-top: 1px solid var(--border); }
.project-section h2 { font-size: 19px; font-weight: 500; margin: 0 0 22px; }
.project-section h2 a, .project-section h2 a:visited { color: inherit; text-decoration: none; }
.project-section h3 { font-size: 14px; font-weight: 500; margin: 24px 0 12px; }
.project-section p, .project-section li { color: var(--soft); font-size: 13px; line-height: 1.85; }
.project-section dl { font-size: 13px; line-height: 1.85; }
.project-section dt { color: var(--text); margin-top: 16px; }
.project-section dd { margin: 4px 0 0; color: var(--soft); }
.project-section p { max-width: 760px; }
.project-section .device-disclaimer { margin-top: 36px; color: var(--muted); font-size: 12px; }
.project-section ul, .steps { padding-left: 23px; }
.project-section li { padding-left: 5px; margin: 0 0 14px; }
.project-section li strong { color: var(--text); font-weight: 500; }
.project-shell pre { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 18px; overflow-x: auto; font-size: 12px; line-height: 1.8; color: var(--text); }
.project-shell code { font-family: inherit; overflow-wrap: anywhere; }
@media (max-width: 650px) { .project-shell { padding: 24px; } .project-hero { padding-top: 42px; } .project-hero p { font-size: 13px; } }