/* Website gallery uses the actual viewport so its previews and controls stay readable. */
.showcase-entry { position:absolute; left:auto; right:clamp(24px,2.65%,44px); bottom:58px; display:flex; align-items:center; gap:14px; padding:14px 20px; border:1px solid #e3f27280; border-radius:16px; background:#0e1117; color:var(--lime); cursor:pointer; font:600 18px Archivo,sans-serif; text-decoration:none; }
.showcase-entry small { color:#a7aab2; font-size:12px; font-weight:400; }
.showcase :is(button,a):focus-visible,.showcase-entry:focus-visible,.preview-dialog :is(button,a):focus-visible { outline:3px solid var(--lime); outline-offset:5px; }
html.is-showcase,html.is-showcase body { touch-action:auto; }
.screen.showcase { position:fixed; z-index:40; inset:0; width:100%; height:100%; height:100dvh; overflow:auto; background:var(--dark); touch-action:pan-y; }
.showcase-shell { max-width:1560px; margin:auto; padding:28px clamp(24px,5vw,80px) 24px; }
.showcase-top { display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:13px; }
.showcase-top a,.showcase-footer a { text-decoration:none; }.showcase-signature { color:#b8bac3; }.showcase-signature b { color:var(--pink); margin-right:9px; }
.quiet-button { border:0; background:none; padding:10px 0; color:#fff; font:inherit; cursor:pointer; }
.showcase-intro { margin:clamp(36px,5vw,64px) 0 clamp(36px,4vw,56px); }
.showcase-eyebrow { color:#aaaeb8; font-size:10px; letter-spacing:2.6px; margin:0 0 17px; }
.showcase-intro h2 { font:400 clamp(34px,4.4vw,64px)/1.12 'Archivo Black',sans-serif; letter-spacing:-1.8px; margin:0; }.showcase-intro h2 span { color:var(--lime); }
.showcase-intro > p { color:#afb2bc; font-size:14px; line-height:1.7; margin:0 0 5px; }
.showcase-gallery { display:grid; grid-template-columns:minmax(210px, .85fr) minmax(0,2.6fr); gap:clamp(26px,4vw,64px); align-items:start; }
.project-list { display:grid; padding-top:0; }.project-list button { display:grid; grid-template-columns:24px minmax(0,1fr); gap:12px; align-items:center; text-align:left; color:#979aa6; border:0; border-bottom:1px solid #ffffff1c; background:none; padding:27px 0; cursor:pointer; transition:color .2s, transform .2s; font-family:Archivo,sans-serif; }
.project-list button[aria-pressed=true] { color:var(--lime); }.project-list button:hover { transform:translateX(4px); color:#fff; }
.project-number { align-self:start; font-size:11px; padding-top:3px; }.project-list strong { display:block; font-size:17px; font-weight:600; line-height:1.3; }.project-list small { display:block; margin-top:10px; color:#a4a7b0; font-size:11px; }
.browser-window { overflow:hidden; border:1px solid #ffffff30; border-radius:13px; background:#1c2029; box-shadow:0 24px 65px #0005; transform:perspective(1400px) rotateY(-2deg); transition:transform .35s; }.browser-window:hover { transform:perspective(1400px) rotateY(0); }
.browser-chrome { height:38px; display:grid; grid-template-columns:40px minmax(0,1fr) 40px; align-items:center; padding:0 15px; color:#9ea3b0; font-size:10px; letter-spacing:.3px; }#project-domain { text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.browser-dots { display:flex; gap:5px; }.browser-dots i { width:6px; height:6px; border-radius:50%; background:#6f7378; }.browser-dots i:first-child { background:var(--pink); }.browser-dots i:nth-child(2) { background:var(--lime); }.browser-dots i:nth-child(3) { background:var(--purple); }
.preview-viewport { position:relative; aspect-ratio:16/9; overflow:hidden; background:#f5f5ee; }.preview-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:14px; color:#353841; font-size:22px; }.preview-placeholder small { font-size:12px; }
#preview-mount { position:absolute; inset:0; pointer-events:none; }#preview-mount iframe { width:1280px; height:800px; border:0; transform-origin:top left; background:white; }
#preview-explore { position:absolute; inset:0; width:100%; border:0; cursor:pointer; background:linear-gradient(transparent 70%,#0e111744); display:flex; align-items:flex-end; justify-content:center; padding:24px; }#preview-explore span { display:flex; gap:24px; align-items:center; padding:14px 22px; background:var(--lime); color:var(--dark); border-radius:99px; font:600 13px Archivo,sans-serif; box-shadow:0 8px 30px #0003; transition:transform .2s; }#preview-explore:hover span { transform:translateY(-4px); }
.project-feature { min-width:0; }
.project-caption { display:flex; justify-content:space-between; gap:20px; align-items:center; padding-top:25px; }.project-status { color:var(--lime); text-transform:uppercase; letter-spacing:1.7px; font-size:9px; margin:0 0 9px; }.project-caption h3 { font-size:23px; font-weight:500; margin:0; }.project-caption p:last-child { font-size:13px; color:#a4a7b0; margin:8px 0 0; line-height:1.5; }.project-caption a { font-size:12px; white-space:nowrap; text-decoration:none; border-bottom:1px solid #626673; padding-bottom:7px; }
.project-controls { display:flex; align-items:center; justify-content:space-between; margin-top:23px; padding-top:17px; border-top:1px solid #ffffff1c; color:#9fa3af; font-size:10px; letter-spacing:1px; }.project-controls > span:first-child { color:var(--lime); }
.showcase-footer { display:flex; justify-content:space-between; gap:20px; border-top:1px solid #ffffff1c; margin-top:38px; padding-top:22px; font-size:11px; color:#9397a3; }.showcase-footer strong { color:#fff; font-weight:500; margin-left:8px; }
.showcase.is-active .showcase-shell { animation:showcaseEnter .5s ease-out both; }@keyframes showcaseEnter { from { opacity:0; transform:translateX(60px); } to { opacity:1; transform:translateX(0); } }
.preview-dialog { width:calc(100% - 40px); max-width:1500px; height:calc(100% - 40px); max-height:100dvh; padding:0; border:1px solid #ffffff38; border-radius:15px; background:var(--dark); color:white; overflow:hidden; touch-action:auto; }.preview-dialog::backdrop { background:#050609d9; backdrop-filter:blur(10px); }.preview-dialog[open] { display:flex; flex-direction:column; }.preview-toolbar { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:15px 20px; }.preview-toolbar > div { display:flex; align-items:center; gap:16px; }.preview-toolbar strong { font-size:15px; }.preview-toolbar span { font-size:10px; color:var(--lime); }.preview-toolbar a { font-size:12px; text-decoration:none; }.preview-toolbar button { padding:10px 15px; border:1px solid #ffffff45; border-radius:99px; background:none; color:white; cursor:pointer; }.preview-note { margin:0; padding:0 20px 12px; color:#adb1bd; font-size:11px; }#live-preview-mount { flex:1; min-height:0; background:white; }#live-preview-mount iframe { width:100%; height:100%; border:0; }
@media(max-width:900px) { .showcase-gallery { grid-template-columns:1fr; gap:24px; }.project-list { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; padding:0; }.project-list button { grid-template-columns:1fr; gap:8px; padding:15px 0; }.project-list strong { font-size:13px; }.project-list small { font-size:10px; }.showcase-intro { margin:36px 0 32px; }.showcase-intro > p { font-size:12px; }.browser-window { transform:none; } }
@media(max-width:600px) { .showcase-shell { padding:14px 20px 28px; }.showcase-signature { display:none; }.showcase-intro { display:block; }.showcase-intro h2 { font-size:clamp(28px,6.5vw,37px); letter-spacing:-1px; }.showcase-intro > p { margin:16px 0 0; }.showcase-intro > p br { display:none; }.project-list { gap:12px; }.project-caption { align-items:flex-start; }.project-caption h3 { font-size:20px; }.project-caption a { font-size:10px; margin-top:23px; }.project-controls { flex-wrap:wrap; gap:14px; }.project-controls > span:nth-child(2) { order:3; flex-basis:100%; font-size:11px; letter-spacing:0; }.showcase-footer { flex-direction:column; margin-top:28px; gap:14px; }.preview-placeholder { font-size:15px; }.preview-placeholder small { font-size:9px; }#preview-explore { padding:13px; }#preview-explore span { font-size:11px; padding:11px 16px; }.preview-dialog { width:100%; height:100%; max-width:100%; border-radius:0; border:0; }.preview-toolbar { padding:12px; }.preview-toolbar > div { align-items:flex-start; flex-direction:column; gap:7px; }.preview-toolbar > div:last-child { align-items:flex-end; }.preview-toolbar strong { font-size:13px; }.preview-note { padding:0 12px 12px; font-size:10px; } }
@media (max-width:768px), (max-height:600px) and (pointer:coarse) { .showcase-entry { left:auto; right:20px; bottom:70px; padding:9px 12px; gap:8px; font-size:13px; }.showcase-entry small { display:none; } }
@media(prefers-reduced-motion:reduce) { .showcase *, .showcase-entry { animation:none!important; transition:none!important; }.browser-window,.browser-window:hover { transform:none; } }

#preview-mount img { display:block; width:100%; height:100%; object-fit:cover; }

.hero.is-mouse-dragging { cursor:grabbing; user-select:none; -webkit-user-select:none; }