.detail-main{padding-top:28px}.back-link{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;min-height:36px;margin-bottom:20px}.back-link:hover{color:var(--sky)}.detail-title{margin-bottom:28px}.detail-title .eyebrow{margin-bottom:10px}.detail-title h1{font-size:30px;overflow-wrap:anywhere}.detail-title>p:last-child{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.8;max-width:780px}.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;align-items:start;gap:24px}.detail-content{display:grid;gap:20px;min-width:0}.preview-panel,.detail-panel,.project-summary{background:white;border:1px solid var(--line);border-radius:12px;overflow:hidden}.preview-bar{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);font-size:11px;color:var(--muted);background:#fcfcfd}.preview-dots{display:flex;gap:5px}.preview-dots i{width:7px;height:7px;border-radius:50%;background:#d0d5dd}.preview-device{margin-left:auto;font-size:10px;border:1px solid var(--line);padding:3px 8px;border-radius:5px;background:white}.detail-image-link{display:block;background:var(--canvas)}.detail-image{display:block;width:100%;height:auto}.detail-image-empty{height:320px;display:grid;place-items:center;color:var(--muted)}.preview-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}.preview-caption a{display:flex;align-items:center;gap:6px;color:var(--sky);font-weight:600;white-space:nowrap}.preview-caption svg{width:13px;height:13px}.detail-panel{padding:24px}.detail-panel .eyebrow{margin-bottom:8px}.detail-panel h2{font-size:18px}.overview-description{font-size:13px;color:var(--muted);line-height:1.9;margin-top:12px}.detail-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.project-pages{display:grid;margin-top:18px;gap:8px}.project-pages>a{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:8px;min-height:60px}.project-pages>a:hover{border-color:#bfdbfe;background:var(--sky-soft)}.page-symbol{display:grid;place-items:center;width:34px;height:34px;background:var(--canvas);border-radius:8px;color:var(--muted);flex-shrink:0}.project-pages strong{display:block;font-size:12px;font-weight:600}.project-pages small{display:block;color:var(--muted);font-size:11px;margin-top:3px;overflow-wrap:anywhere}.project-pages>a>svg{margin-left:auto;color:var(--muted);width:15px;height:15px;flex-shrink:0}.project-summary{position:sticky;top:24px;padding:24px;box-shadow:var(--shadow)}.project-summary .type-tag{display:inline-block;color:var(--sky);background:var(--sky-soft);border-color:#dbeafe}.project-summary h2{font-size:21px;line-height:1.5;margin-top:14px;overflow-wrap:anywhere}.summary-description{font-size:12px;line-height:1.8;color:var(--muted);margin-top:8px}.project-meta{margin:22px 0 0;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.project-meta>div{display:flex;justify-content:space-between;gap:12px;font-size:12px;padding:7px 0}.project-meta dt{color:var(--muted)}.project-meta dd{margin:0;font-weight:500;text-align:right}.purchase-section{padding-top:22px}.purchase-button,.demo-button{width:100%;font-size:12px;min-height:46px}.purchase-button:disabled{opacity:1;background:#eef2f6;color:#98a2b3;border-color:var(--line);box-shadow:none}.purchase-note{text-align:center;font-size:11px;line-height:1.7;color:var(--muted);margin:8px 0 18px}.summary-footer{display:flex;justify-content:center;align-items:center;gap:7px;font-size:10px;color:var(--muted);margin-top:18px}.summary-dot{width:5px;height:5px;border-radius:50%;background:#16a34a}.detail-main footer a:hover{color:var(--sky)}
@media(max-width:1200px){.detail-layout{grid-template-columns:minmax(0,1fr) 280px;gap:18px}.project-summary{padding:20px}.detail-panel{padding:20px}}
@media(max-width:800px){.detail-layout{grid-template-columns:1fr}.project-summary{position:static;grid-row:1}.project-summary h2{font-size:20px}.project-summary .summary-description{display:none}.project-meta{margin-top:14px}.purchase-section{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:18px}.purchase-note{grid-column:1/-1;grid-row:2;margin:0}.summary-footer{margin-top:12px}.detail-title{margin-bottom:20px}.preview-caption{font-size:10px}}
@media(max-width:600px){.detail-main{padding-top:18px}.back-link{margin-bottom:14px}.detail-title h1{font-size:26px;letter-spacing:-.8px}.detail-title>p:last-child{font-size:12px}.detail-panel{padding:18px}.detail-panel h2{font-size:16px}.overview-description{font-size:12px}.preview-caption{align-items:flex-start}.preview-caption>span{max-width:210px}.project-summary{padding:18px}.purchase-button,.demo-button{font-size:11px;padding:10px}.project-meta>div{font-size:11px}.detail-image-empty{height:230px}}
.detail-image-link{width:100%;padding:0;border:0;cursor:zoom-in}.detail-image-link:hover{filter:brightness(.98)}#image-preview{width:min(1280px,calc(100vw - 32px));max-width:none;max-height:90dvh;padding:0;border:1px solid var(--line);border-radius:12px;background:white;overflow:hidden}#image-preview::backdrop{background:rgb(15 23 42 / .65)}.image-modal-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;border-bottom:1px solid var(--line)}.image-modal-header h2{font-size:14px;overflow-wrap:anywhere}.image-modal-body{overflow:auto;max-height:calc(90dvh - 74px);background:var(--canvas)}.image-modal-body img{display:block;width:100%;height:auto}html:has(#image-preview[open]){overflow:hidden}@media(max-width:600px){#image-preview{width:calc(100vw - 16px)}.image-modal-header{padding:12px}.image-modal-header h2{font-size:12px}}